/* Antehall — the hall at night: one pink-lit seat on an isometric ziggurat, the top ante as one huge number, a crawling
   strip of plays above it and the coin's address docked over the thumb. */
:root {
  --ground: #130e19; --slab: #1c1424; --slab2: #261b30; --seam: #3a2b46; --ink: #f3e9f1; --dim: #a48fa6; --low: #6f5d74;
  --pink: #ff4fa3; --pinkdim: #b8337a; --pinkglow: rgba(255, 79, 163, .28);
  --disp: 'Smooch Sans', 'Arial Narrow', sans-serif; --body: 'Onest', system-ui, sans-serif; --mono: 'Azeret Mono', ui-monospace, monospace;
  --dockh: 64px;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0 auto; background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--body);
  display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 16px calc(var(--dockh) + 28px + env(safe-area-inset-bottom));
  overflow-x: hidden; max-width: 640px;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; }
em { font-style: normal; color: var(--pink); }

/* ---------- the strip ---------- */
.marq { margin: 0 -16px; height: 34px; overflow: hidden; border-bottom: 1px solid var(--seam); background: #0d0912; display: flex; align-items: center; }
.marq-run { display: inline-flex; white-space: nowrap; gap: 0; animation: crawl 38s linear infinite; will-change: transform; }
.marq-it { font: 500 12px/1 var(--mono); color: var(--dim); padding: 0 28px; letter-spacing: .02em; }
.marq-it b { color: var(--ink); font-weight: 600; }
.marq-it em { color: var(--pink); }
.marq-it.is-new { color: var(--ink); }
@keyframes crawl { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marq-run { animation: none; } }

/* ---------- the lintel (name + connect) ---------- */
.lintel { display: flex; align-items: center; justify-content: space-between; height: 48px; gap: 10px; }
.lintel-mark { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font: 800 22px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.lintel-mark img { border-radius: 7px; }
.lintel-go { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; color: var(--dim); }
.lintel-go a { text-decoration: none; }
.lintel-go a:hover { color: var(--ink); }
.lintel-btn { border: 1px solid var(--seam); background: var(--slab); color: var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; }

/* ---------- the throne: the one live number ---------- */
.throne { padding: 14px 0 4px; font-size: 15px; }
.throne-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 12px/1.2 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.throne-clock { border: 1px solid var(--seam); border-radius: 6px; padding: 4px 8px; color: var(--ink); white-space: nowrap; }
.throne-clock b { font-weight: 600; }
.throne-clock.is-late { border-color: var(--pink); color: var(--pink); }
.throne-fig {
  display: block; width: 100%; font: 900 clamp(118px, 38vw, 210px)/.86 var(--disp); letter-spacing: -.01em; color: var(--pink);
  text-shadow: 0 0 34px var(--pinkglow); margin: 10px 0 4px; font-variant-numeric: tabular-nums;
}
.throne-fig.is-flip { animation: seatflip .7s ease-out; }
@keyframes seatflip { 0% { transform: translateY(-10px); opacity: .2; } 100% { transform: none; opacity: 1; } }
.throne-by { font: 500 14px/1.4 var(--mono); color: var(--dim); }
.throne-by a { color: var(--ink); }

.verdict { margin: 14px 0 6px; font-size: 17px; line-height: 1.45; }
.verdict b { font-family: var(--mono); font-weight: 600; }

/* ---------- the hall drawing ---------- */
.ziggu { margin: 6px 0 0; }
.ziggu-art { display: block; width: 100%; height: auto; }
.ziggu-key { margin: 2px 0 0; font-size: 12px; color: var(--low); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.ziggu-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ziggu-dot.is-seat { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.ziggu-dot.is-step { background: #5b4469; }
.zf-top { fill: #2e2139; stroke: #4a3757; stroke-width: 1; }
.zf-l { fill: #1f1628; } .zf-r { fill: #181020; }
.zf-top.is-ghost { fill: #1a1221; stroke: #2f2238; stroke-dasharray: 3 3; }
.zf-l.is-ghost, .zf-r.is-ghost { fill: #150f1b; }
.zf-top.is-seat { fill: #3b2245; stroke: var(--pink); }
.zf-chip { fill: var(--pink); stroke: #ffd2e8; stroke-width: .6; }
.zf-chipside { fill: var(--pinkdim); }
.zf-glow { fill: var(--pinkglow); }
.zf-lab { font: 600 11px var(--mono); fill: var(--ink); }
.zf-sub { font: 500 9.5px var(--mono); fill: var(--dim); }
.zf-pay { font: 600 10px var(--mono); fill: var(--pink); }
.zf-lead { stroke: #4a3757; stroke-width: 1; }
.zf-new { animation: stepin .8s ease-out; }
@keyframes stepin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- the wager ---------- */
.wager { margin: 18px 0 0; background: var(--slab); border: 1px solid var(--seam); border-radius: 16px; padding: 14px; }
.wager-hit { margin: 0 0 12px; font-size: 14px; color: var(--dim); }
.wager-hit s { color: var(--low); }
.wager-row { display: flex; gap: 8px; }
.wager-box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--ground); border: 1px solid var(--seam); border-radius: 12px; padding: 0 12px; }
.wager-box:focus-within { border-color: var(--pink); }
.wager-k, .wager-u { font: 600 11px var(--mono); color: var(--low); text-transform: uppercase; }
.wager-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font: 800 30px/1 var(--disp); padding: 10px 0; letter-spacing: .02em; }
.wager-go { flex: 0 0 auto; border: 0; border-radius: 12px; padding: 0 18px; background: var(--pink); color: #1a0711; font: 900 21px/1 var(--disp); text-transform: uppercase; letter-spacing: .04em; min-height: 54px; }
.wager-go:disabled { background: var(--slab2); color: var(--low); cursor: default; }
.wager-nudge { display: flex; gap: 6px; margin: 10px 0 0; flex-wrap: wrap; }
.wager-nudge button { border: 1px solid var(--seam); background: transparent; color: var(--dim); border-radius: 8px; padding: 5px 10px; font: 500 12px var(--mono); }
.wager-nudge button.is-picked { border-color: var(--pink); color: var(--ink); }
.wager-sum { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.wager-sum b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.wager-owed { margin: 12px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--slab2); font-size: 13px; }
.wager-owed[hidden] { display: none; }
.wager-owed button { border: 1px solid var(--pink); background: transparent; color: var(--pink); border-radius: 8px; padding: 6px 12px; }

/* ---------- the ledge: the strip of plays + the rules ---------- */
.ledge { margin: 18px 0 0; display: grid; gap: 14px; min-width: 0; }
.ledge-sheet { background: var(--slab); border: 1px solid var(--seam); border-radius: 16px; padding: 14px; min-width: 0; }
.ledge-sheet[hidden] { display: none; }
.ledge-h { margin: 0 0 10px; font: 800 24px/1 var(--disp); text-transform: uppercase; letter-spacing: .05em; }
.ledge-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; }
.ledge-list li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--seam); font-size: 13px; overflow-wrap: anywhere; }
.ledge-list li:first-child { border-top: 0; }
.ledge-list li > b { font: 500 11px/1.9 var(--mono); color: var(--low); }
.ledge-list li.is-fresh { animation: printin 1.2s ease-out; }
.ledge-list .lg-pay { color: var(--pink); }
.ledge-list .lg-close { color: var(--ink); font-weight: 700; }
@keyframes printin { from { background: var(--pinkglow); } to { background: transparent; } }
.ledge-rules { margin: 0; padding: 0 0 0 18px; font-size: 14px; color: var(--dim); }
.ledge-rules li { margin: 0 0 8px; }
.ledge-rules b { color: var(--ink); }
.ledge-eg { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: var(--ground); border: 1px dashed var(--seam); font-size: 13px; }
.ledge-eg p { margin: 0 0 6px; }
.ledge-egh { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--low); }
#pane ol { margin: 0; padding-left: 18px; font-size: 13px; }
#pane p { font-size: 13px; overflow-wrap: anywhere; }

/* ---------- the plinth (footer) ---------- */
.plinth { margin: 22px 0 0; padding: 14px 0 0; border-top: 1px solid var(--seam); font-size: 12px; color: var(--low); }
.plinth p { margin: 0 0 6px; overflow-wrap: anywhere; }
.plinth-mono { font-family: var(--mono); color: var(--dim); }
.plinth a[hidden] { display: none; }

/* ---------- the CA dock (fixed over the thumb) ---------- */
.cadock {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
  width: min(calc(100% - 16px), 760px); min-height: var(--dockh);
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 16px;
  background: rgba(29, 20, 37, .96); border: 1px solid var(--pinkdim); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 4px rgba(19, 14, 25, .7);
  backdrop-filter: blur(8px);
}
.cadock-k { font: 900 18px/1 var(--disp); color: var(--pink); letter-spacing: .06em; }
.cadock-addr { flex: 1; min-width: 0; font: 600 10.5px/1.35 var(--mono); color: var(--ink); word-break: break-all; user-select: all; }
.cadock-addr.is-pending { color: var(--dim); font-weight: 400; user-select: text; word-break: normal; }
.cadock-copy { flex: 0 0 auto; border: 0; border-radius: 10px; background: var(--pink); color: #1a0711; font: 900 16px/1 var(--disp); text-transform: uppercase; letter-spacing: .05em; padding: 12px 12px; }
.cadock-copy:disabled { background: var(--slab2); color: var(--low); cursor: default; }
.cadock-copy.is-copied { background: var(--ink); }
.cadock-gm { flex: 0 0 auto; font: 500 10px var(--mono); color: var(--dim); }
.cadock-gm[hidden] { display: none; }

.chooser { position: fixed; inset: 0; z-index: 50; background: rgba(8, 5, 11, .78); display: grid; place-items: center; }
.chooser[hidden] { display: none; }
.chooser-card { background: var(--slab); border: 1px solid var(--seam); border-radius: 16px; padding: 16px; width: min(320px, 90vw); display: grid; gap: 8px; }
.chooser-card p { margin: 0; font: 800 22px var(--disp); text-transform: uppercase; }
.chooser-card button { border: 1px solid var(--seam); background: var(--ground); color: var(--ink); border-radius: 10px; padding: 10px; display: flex; gap: 8px; align-items: center; }
.chooser-card img { width: 22px; height: 22px; }
#pickerList { display: grid; gap: 6px; }
.notice { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dockh) + 26px); z-index: 40; background: var(--ink); color: var(--ground); padding: 8px 14px; border-radius: 10px; font-size: 13px; max-width: 90vw; }
.notice[hidden] { display: none; }

/* ---------- tablet: wider measure, bigger number ---------- */
@media (min-width: 720px) {
  body { max-width: 780px; padding-left: 28px; padding-right: 28px; font-size: 16px; }
  .marq { margin: 0 -28px; }
  .throne-fig { font-size: clamp(170px, 30vw, 250px); }
  .verdict { font-size: 19px; }
  .ziggu-art { max-width: 620px; margin: 0 auto; }
  .ledge { grid-template-columns: 1fr 1fr; align-items: start; }
  .ledge-list { max-height: 420px; }
  .cadock-addr { font-size: 13px; }
}

/* ---------- desktop: the hall left, the strip + rules as a column on the right ---------- */
@media (min-width: 1000px) {
  body {
    max-width: 1180px; padding-left: 36px; padding-right: 36px; column-gap: 40px;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-areas: "marq marq" "lintel lintel" "throne ledge" "verdict ledge" "ziggu ledge" "wager ledge" "plinth plinth";
    grid-template-rows: auto auto auto auto auto 1fr auto;
  }
  .marq { grid-area: marq; margin: 0 -36px; }
  .lintel { grid-area: lintel; height: 56px; }
  .throne { grid-area: throne; }
  .verdict { grid-area: verdict; font-size: 21px; max-width: 34em; }
  .ziggu { grid-area: ziggu; }
  .wager { grid-area: wager; align-self: start; }
  .ledge { grid-area: ledge; grid-template-columns: 1fr; margin-top: 14px; align-self: start; position: sticky; top: 14px; }
  .ledge-list { max-height: 340px; }
  .plinth { grid-area: plinth; }
  .throne-fig { font-size: 240px; }
  .ziggu-art { max-width: 560px; margin: 0; }
  .cadock { width: 760px; }
  .cadock-addr { font-size: 14px; }
}