/* Chiprow — a neon parlour wall. Bottom tab bar on a phone, a side rail on a desk. */
:root{
  --ground:#070A07; --ink:#EFF5E4; --lime:#C7FF2F; --dim:#8A9179; --edge:#171C14;
  --slab:#0C110B; --slab2:#101709; --warn:#FF7A45;
  --tube:0 0 6px rgba(199,255,47,.55), 0 0 22px rgba(199,255,47,.28);
  --rail:76px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink)}
body{font:400 16px/1.5 "Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--lime);text-decoration:none}
img{max-width:100%}
h1,h2{margin:0}

.parlour{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(64px + env(safe-area-inset-bottom))}

/* ---- chrome: a bottom tab bar that becomes a side rail ---- */
.deckrail{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(4,1fr) auto;align-items:center;gap:2px;
  background:rgba(7,10,7,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--edge);padding:6px 8px calc(6px + env(safe-area-inset-bottom));
}
.rail-mark{display:none}
.rail-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--dim);font-size:11px;letter-spacing:.04em}
.rail-ico{font-size:17px;line-height:1}
.rail-item[data-on]{color:var(--lime);text-shadow:var(--tube)}
.rail-key{
  font:700 12px/1 "Space Grotesk",sans-serif;letter-spacing:.06em;text-transform:lowercase;
  background:transparent;color:var(--lime);border:1px solid var(--lime);border-radius:999px;
  padding:9px 12px;margin-left:6px;cursor:pointer;white-space:nowrap
}
.rail-key[data-on]{background:var(--lime);color:#0A0D06;box-shadow:var(--tube)}

/* ---- stage ---- */
.stage{width:100%;max-width:600px;margin:0 auto;padding:20px 16px 8px;display:flex;flex-direction:column;gap:18px;flex:1}

.crown{display:flex;flex-direction:column;gap:10px}
.crown-mark{font:400 30px/1 "Bungee",Impact,sans-serif;letter-spacing:.02em;color:var(--lime);text-shadow:var(--tube)}
.crown-rule{margin:0;font-size:17px;line-height:1.35;color:var(--ink);max-width:22ch}
.bell{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:var(--slab)}
.bell-k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bell-v{font:700 15px/1 "Space Grotesk",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px}
.bell-v[data-hot]{color:var(--lime);text-shadow:var(--tube)}

/* ---- the deck of six table cards ---- */
.deck{display:flex;flex-direction:column;gap:12px}
.tbl{
  position:relative;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;
  padding:14px;border:1px solid var(--edge);border-radius:16px;background:linear-gradient(180deg,var(--slab),var(--slab2));
  transition:border-color .25s,box-shadow .25s,opacity .3s
}
.tbl[data-exact]{border-color:var(--lime);box-shadow:0 0 0 1px rgba(199,255,47,.25),0 0 30px rgba(199,255,47,.10)}
.tbl[data-shut]{opacity:.5}
.tbl[data-mine]:after{content:"your chip";position:absolute;top:-8px;right:12px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:#0A0D06;padding:2px 7px;border-radius:999px}
.tbl-dial{width:96px;height:96px;display:block}
.tbl-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.tbl-n{font:400 13px/1 "Bungee",Impact,sans-serif;letter-spacing:.08em;color:var(--dim)}
.tbl-read{font-size:16px;line-height:1.25;color:var(--ink)}
.tbl-read b{color:var(--lime);font-weight:700}
.tbl-read[data-over] b{color:var(--warn)}
.tbl-lock{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tbl-sit{
  margin-top:6px;align-self:flex-start;font:700 13px/1 "Space Grotesk",sans-serif;letter-spacing:.05em;
  background:var(--lime);color:#0A0D06;border:0;border-radius:999px;padding:11px 18px;cursor:pointer;min-height:40px
}
.tbl-sit[disabled]{background:transparent;color:var(--dim);border:1px solid var(--edge);cursor:default;box-shadow:none}
.tbl-sit:not([disabled]):active{transform:translateY(1px)}
.pip{transition:fill .3s,opacity .3s}

/* ---- the ledge (second column on a desk, a stack below on a phone) ---- */
.ledge{display:flex;flex-direction:column;gap:12px}
.card{padding:14px;border:1px solid var(--edge);border-radius:16px;background:var(--slab)}
.card-h{font:400 12px/1 "Bungee",Impact,sans-serif;letter-spacing:.1em;color:var(--dim);margin-bottom:10px}
.primer-p{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink)}
.facts{margin:0;display:grid;grid-template-columns:1fr auto;gap:5px 12px;font-size:13px}
.facts>div{display:contents}
.facts dt{color:var(--dim)}
.facts dd{margin:0;text-align:right;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.primer-more{display:inline-block;margin-top:12px;font-size:13px;font-weight:700}
.tally-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tally-cell{border:1px solid var(--edge);border-radius:12px;padding:10px}
.tally-n{display:block;font:400 21px/1 "Bungee",Impact,sans-serif;color:var(--lime);text-shadow:var(--tube);font-variant-numeric:tabular-nums}
.tally-k{display:block;margin-top:5px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.tape-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;max-height:280px;overflow-y:auto}
.tape-row{display:flex;align-items:baseline;gap:8px;font-size:13px;border-bottom:1px dashed var(--edge);padding-bottom:7px}
.tape-row:last-child{border-bottom:0}
.tape-who{color:var(--dim);font-variant-numeric:tabular-nums}
.tape-act{color:var(--ink)}
.tape-act b{color:var(--lime)}
.tape-quiet{font-size:13px;color:var(--dim);list-style:none}

/* ---- ledger / rules / chip views ---- */
.sheetview{display:flex;flex-direction:column;gap:12px}
.row{padding:12px 14px;border:1px solid var(--edge);border-radius:14px;background:var(--slab)}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.row-id{font:400 14px/1 "Bungee",Impact,sans-serif;color:var(--ink)}
.row-note{font-size:12px;color:var(--dim)}
.row-tables{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.chiplet{border:1px solid var(--edge);border-radius:9px;padding:7px 3px;text-align:center}
.chiplet[data-exact]{border-color:var(--lime);background:rgba(199,255,47,.08)}
.chiplet-n{display:block;font-size:11px;color:var(--dim)}
.chiplet-s{display:block;font:700 15px/1.2 "Space Grotesk",sans-serif;font-variant-numeric:tabular-nums}
.chiplet[data-exact] .chiplet-s{color:var(--lime)}
.prose h2{font:400 15px/1.3 "Bungee",Impact,sans-serif;color:var(--lime);margin:0 0 8px}
.prose p{margin:0 0 12px;font-size:15px;line-height:1.55}
.prose p:last-child{margin-bottom:0}
.prose ol{margin:0 0 12px;padding-left:20px;font-size:15px;line-height:1.55}
.claimbtn{font:700 13px/1 "Space Grotesk",sans-serif;background:var(--lime);color:#0A0D06;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;min-height:38px}

/* ---- baseboard + hail ---- */
.baseboard{
  width:100%;max-width:600px;margin:0 auto;padding:22px 16px 26px;
  display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  font-size:12px;color:var(--dim);border-top:1px solid var(--edge)
}
.baseboard .addr{font-variant-numeric:tabular-nums;word-break:break-all}
.baseboard .buy{font-weight:700;color:#0A0D06;background:var(--lime);padding:7px 13px;border-radius:999px}
.hail{
  position:fixed;left:12px;right:12px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:60;margin:0;
  padding:12px 14px;border-radius:12px;background:var(--slab2);border:1px solid var(--lime);
  color:var(--ink);font-size:14px;box-shadow:0 10px 40px rgba(0,0,0,.6)
}
.hail[data-bad]{border-color:var(--warn)}

/* ---- a wider measure, still one column ---- */
@media (min-width:721px){
  .stage,.baseboard{max-width:760px;padding-left:24px;padding-right:24px}
  .crown-mark{font-size:44px}
  .crown-rule{font-size:22px;max-width:26ch}
  .tbl{grid-template-columns:124px 1fr;gap:18px;padding:18px}
  .tbl-dial{width:124px;height:124px}
  .tbl-read{font-size:18px}
  .bell-v{font-size:17px}
}

/* ---- a desk: the wall recomposes into a rail, the deck and the ledge ---- */
@media (min-width:1001px){
  .parlour{padding-bottom:0;padding-left:var(--rail)}
  .deckrail{
    top:0;right:auto;bottom:0;width:var(--rail);
    grid-template-columns:none;grid-template-rows:auto repeat(4,auto) 1fr auto;justify-items:center;
    gap:6px;border-top:0;border-right:1px solid var(--edge);padding:16px 8px
  }
  .rail-mark{display:block;width:34px;height:34px;margin-bottom:10px}
  .rail-mark img{border-radius:50%}
  .rail-item{font-size:10px;padding:9px 2px;width:100%}
  .rail-key{grid-row:7;margin:0 0 6px;padding:9px 8px;font-size:11px}
  .stage{
    max-width:1120px;padding:36px 32px 12px;
    display:grid;grid-template-columns:minmax(0,1fr) 352px;grid-template-rows:auto 1fr;
    gap:24px 28px;align-content:start
  }
  .crown{grid-column:1 / -1}
  .crown-mark{font-size:56px}
  .crown-rule{font-size:25px;max-width:30ch}
  .bell{align-self:start;width:fit-content}
  .deck,.sheetview{grid-column:1;min-width:0}
  .ledge{grid-column:2;grid-row:2;align-self:start;position:sticky;top:36px}
  .tape-list{max-height:340px}
  .baseboard{max-width:1120px;padding:28px 32px 34px}
  .hail{left:auto;right:28px;bottom:28px;max-width:380px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}