:root {
  --bg: #0b0f14; --surface: #131a22; --surface-2: #1a232e; --line: #243040;
  --ink: #e8eef5; --muted: #8a99ab; --faint: #5c6b7d;
  --accent: #34d399; --accent-ink: #04120b; --pos: #34d399; --neg: #f87171; --roll: #fbbf24;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 80% -10%, #16202b 0%, var(--bg) 55%);
  color: var(--ink); font: 15px/1.55 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100%;
}
code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; color: var(--accent); }
h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.lead { color: var(--muted); max-width: 68ch; margin: 0 0 22px; }
.hidden { display: none !important; }

/* Header */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 24px; border-bottom: 1px solid var(--line);
  background: rgba(11, 15, 20, .7); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #059669); box-shadow: 0 0 0 1px rgba(52, 211, 153, .3), 0 8px 24px -8px var(--accent); }
.brand .name { font-weight: 700; letter-spacing: -.01em; }
.brand .sub { font-size: 12px; color: var(--muted); }
.player { display: flex; align-items: center; gap: 14px; }
.player label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.player input {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  padding: 8px 12px; border-radius: 9px; font: inherit; font-size: 14px; width: 160px;
}
.player input:focus { outline: none; border-color: var(--accent); }
.wallet { display: flex; flex-direction: column; align-items: flex-end; padding-left: 14px; border-left: 1px solid var(--line); }
.wl-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.wl-amt { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--accent); font-size: 17px; }

main { padding: 28px 24px 48px; max-width: 1200px; margin: 0 auto; }

/* Lobby grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.tile {
  display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; color: var(--ink); font: inherit; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 12px 32px -16px var(--accent); }
.t-art {
  width: 100%; aspect-ratio: 16/9; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--surface-2), #0e151d); border: 1px solid var(--line);
  font-weight: 800; font-size: 26px; letter-spacing: .04em; color: var(--accent);
}
.t-name { font-weight: 600; text-transform: capitalize; }
.t-go { font-size: 12px; color: var(--muted); }
.tile:hover .t-go { color: var(--accent); }

/* Play view */
.play-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.back { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; border-radius: 9px; cursor: pointer; font: inherit; }
.back:hover { border-color: var(--accent); }
.playing { color: var(--muted); } .playing b { color: var(--ink); text-transform: capitalize; }
.spacer { flex: 1; }
.raw { color: var(--muted); font-size: 12px; text-decoration: none; } .raw:hover { color: var(--accent); }

/* The game frame is a fixed 1200×675 stage; the play view widens to fit it beside the 320px sidebar. */
main:has(#play:not(.hidden)) { max-width: 1588px; } /* 1202 frame + 18 gap + 320 side + 2×24 padding */

.stage { display: grid; grid-template-columns: minmax(0, 1202px) 320px; gap: 18px; align-items: start; justify-content: center; }
.frame-wrap { background: #000; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; width: fit-content; max-width: 100%; }
#game-slot, #game-slot iframe { display: block; width: 100%; border: 0; }
#game-slot iframe { width: 1200px; max-width: 100%; aspect-ratio: 1200 / 675; height: auto; }

.side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.side-card.grow { min-height: 200px; }
.side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.side-title .hint { text-transform: none; letter-spacing: 0; color: var(--faint); font-size: 10px; border: 1px solid var(--line); padding: 1px 6px; border-radius: 20px; }
.big-bal { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; color: var(--accent); }
.side-sub { font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; margin-top: 2px; }

.feed, .log { list-style: none; margin: 0; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.feed li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .k { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; }
.feed .k.neg { color: var(--neg); background: rgba(248, 113, 113, .12); }
.feed .k.pos { color: var(--pos); background: rgba(52, 211, 153, .12); }
.feed .k.roll { color: var(--roll); background: rgba(251, 191, 36, .12); }
.feed .a { text-align: right; } .feed .a.neg { color: var(--neg); } .feed .a.pos { color: var(--pos); }
.feed .b { text-align: right; color: var(--muted); }
.log li { padding: 4px 0; color: var(--muted); border-bottom: 1px solid var(--line); word-break: break-word; }
.log li:last-child { border-bottom: 0; }
.empty { color: var(--faint) !important; font-style: italic; }

/* THE SIDEBAR STANDS DOWN LONG BEFORE 880px. It is a FIXED 320px, so between
   880 and the width a 1200x675 stage needs it was taking a third of the play
   column and the game paid for all of it. Measured on the deployed page, window
   against the frame the game was handed:

     1440 -> 1052x592     1200 ->  812x457
     1000 ->  612x344      900 ->  512x288      820 ->  755x425 (stacked)

   The 820px window gave the game a BIGGER frame than the 900px one — that is
   the breakpoint being in the wrong place, not a subtlety.

   The column pays 386px for the sidebar (320 + an 18px gap + the page's own
   48), so a 16:9 stage 520px tall needs a 1310px window to keep it beside the
   game. 1240 is where that stops being worth it: stacked, a 1240px window
   hands the game 1192x670 against the 812x457 it was getting at 1200. Above it
   the two-column integration view stands — 1440 measures 1052x592 — and under
   it the wallet, the activity feed and the handshake go below the game, which
   is also the order they are read in. */
@media (max-width: 1240px) {
  .stage { grid-template-columns: 1fr; }
  .side { position: static; }
}

/* AND THE RATIO STANDS DOWN WHERE IT STOPS PAYING. 16:9 of a column under
   ~925px is less than 520px tall, and the games' own shell wants a 52vh stage,
   a menu and a 48px bar out of whatever it is given: at 900px the frame was
   288px tall and the game inside it was a scrollbar. Below 980 the height is
   stated instead — the same shape the phone rule below uses, with a floor that
   suits a laptop half-screen rather than a phone. */
@media (max-width: 980px) {
  #game-slot iframe { aspect-ratio: auto; height: clamp(520px, 78dvh, 760px); }
}

/* ─── PHONES ──────────────────────────────────────────────────────────────
   Measured at 375x812 before this block, on the deployed page.

   THE HEADER RAN OFF THE RIGHT EDGE. `.bar` is one flex row and nothing in it
   may wrap, so at 375px `.player` — a label, a 160px input and the wallet —
   laid out from x=163 to x=527: the player id, the WALLET LABEL and the
   balance were all past the frame, and the brand's one-line subtitle was
   squeezed into four. The player row takes a line of its own here and the
   input gives up its fixed width, which is all it needed: the brand gets the
   full 343px and its subtitle fits on one line again.

   THE GAME GOT 183 PIXELS. `#game-slot iframe` carries `aspect-ratio:1200/675`
   so that the desktop stage is exactly the 1200x675 the frame is built for —
   and 16:9 of a 325px-wide phone column is 183px tall. The game rendered at
   325x183, 22% of the screen, with the wallet and handshake panels holding the
   rest; a comparable provider demo gives its game 343x650 on the same phone.
   A phone is not a 16:9 stage, so the ratio stands down and the frame takes a
   real portrait height instead. 78dvh leaves the header and the play bar
   visible above it, the 380px floor keeps it playable on a short landscape
   frame, and the 760px cap stops a tall tablet from handing the game more
   height than its own shell asks for. */
@media (max-width: 700px) {
  .bar { flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; gap: 12px; }
  .player { width: 100%; gap: 12px; }
  .player input { flex: 1 1 auto; width: auto; min-width: 0; }
  .wallet { padding-left: 12px; }

  /* The frame gets the width. 16px of page padding each side plus the wrap's
     1px border took 34 of a 414px phone away from the game, and the game
     already runs its own shell padding inside that. 8px still reads as a page
     rather than a bleed. */
  main { padding: 20px 8px 40px; }
  .play-head { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }

  .frame-wrap { width: 100%; }
  #game-slot iframe { aspect-ratio: auto; height: clamp(380px, 78dvh, 760px); }
}