/* game page — the cabinet is a dark slab on the left (sticky on desktop), the coin and its boards are calm white panels on the right */
.gp { padding: 32px 0 104px; --hh: 88px; --pad: 10px; }
.gp-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; }

/* ---------- the slab ---------- */
/* --sh is the screen's height: the viewport minus the header, the controls and some air, so the whole cabinet is always in view */
.player { position: sticky; top: calc(var(--hh) + 24px); --sh: clamp(440px, calc(100vh - var(--hh) - 148px - 2 * var(--pad)), 860px); }
@supports (height: 100svh) { .player { --sh: clamp(440px, calc(100svh - var(--hh) - 148px - 2 * var(--pad)), 860px); } }
.frame { position: relative; width: calc(var(--sh) * 9 / 16 + 2 * var(--pad)); height: calc(var(--sh) + 2 * var(--pad)); border-radius: 36px; background: var(--slab);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), var(--shadow-lg); }
.frame iframe, .frame .loading { position: absolute; left: var(--pad); top: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); border: 0; border-radius: calc(36px - var(--pad)); }
.frame iframe { display: block; background: #000; }
.frame .loading { display: grid; place-items: center; background: #0a0908; color: rgba(255, 255, 255, .42); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-align: center; padding: 0 20px; }
.frame #fullX { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.frame #fullX:hover { background: rgba(255, 255, 255, .24); }
.frame #fullX svg { width: 16px; height: 16px; }

/* controls under the slab: one quiet line of help and two round buttons */
.pbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: calc(var(--sh) * 9 / 16 + 2 * var(--pad)); margin-top: 20px; padding-left: 8px; }
.pbar #hint { font-size: 13px; line-height: 1.4; }
.pctl { display: flex; gap: 8px; flex: none; }
.pctl .ib { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); color: var(--ink); box-shadow: 0 1px 0 rgba(20, 18, 16, .04), 0 6px 16px -8px rgba(60, 38, 16, .3); transition: transform .2s var(--ease), box-shadow .2s; }
.pctl .ib:hover { box-shadow: 0 0 0 1px var(--ink); }
.pctl .ib:active { transform: scale(.94); }
.pctl .ib svg { width: 18px; height: 18px; }

/* real fullscreen (Fullscreen API) */
.frame:fullscreen { width: 100vw; height: 100vh; border-radius: 0; box-shadow: none; background: #000; }
.frame:fullscreen iframe { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
/* fake fullscreen for browsers without the Fullscreen API on elements (iPhone): game.js toggles .full */
.frame.full { position: fixed; inset: 0; z-index: 70; width: 100%; height: 100vh; height: 100dvh; max-width: none; margin: 0; border-radius: 0; box-shadow: none; background: #000; }
.frame.full iframe, .frame.full .loading { left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
/* exit is game.html's #fullX in the frame's corner; the mute button floats just left of it */
.frame.full #fullX { top: max(10px, env(safe-area-inset-top)) !important; right: max(10px, env(safe-area-inset-right)) !important; }
.frame.full ~ .pbar { position: fixed; z-index: 71; top: max(10px, env(safe-area-inset-top)); right: calc(max(10px, env(safe-area-inset-right)) + 52px); width: auto; max-width: none; margin: 0; padding: 0; }
.frame.full ~ .pbar > :not(.pctl), .frame.full ~ .pbar #full { display: none; }
.frame.full ~ .pbar .ib { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body:has(.frame.full) { overflow: hidden; }
.player:has(.frame.full) { z-index: 70; }   /* the sticky player is its own stacking context */

/* ---------- the coin ---------- */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; min-width: 0; container-type: inline-size; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s; margin-bottom: -6px; }
.back .arr { font-family: var(--mono); transition: transform .2s var(--ease); }
.back:hover { color: var(--ink); }
.back:hover .arr { transform: translateX(-3px); }
.coin-t { display: flex; align-items: center; gap: 20px; min-width: 0; }
.coin-t img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; background: var(--bg2); box-shadow: 0 0 0 1px var(--rule); flex: none; }
.gname { font-size: clamp(40px, 4.6vw, 72px); line-height: .9; letter-spacing: -.052em; min-width: 0; overflow-wrap: anywhere; padding-bottom: .06em; }
.coin .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.coin .tk { font: 500 16px/1 var(--mono); color: var(--ink); }
.coin .sub .chip { height: 28px; background: rgba(255, 255, 255, .55); }
.coin .sub .chip:empty, .coin .ver:empty, .coin .tk:empty { display: none; }
.coin .ver { font-size: 13px; color: var(--muted); }
.desc { margin: 18px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.5; letter-spacing: -.01em; color: var(--ink2); white-space: pre-line; overflow-wrap: anywhere; }
.desc:empty { display: none; }

.cabox { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#cCA .ca { width: fit-content; max-width: 100%; }   /* the plate hugs the address and its Copy button */
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links .btn { height: 42px; padding: 0 18px; font-size: 14px; }
.links .btn .arr { font-size: 13px; }
.links .btn:hover .arr { transform: translate(2px, -2px); }

/* market: big mono numbers under an ink rule, like the live block on the home page */
.mkt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; border-top: 1px solid var(--ink); padding-top: 18px; }
.mkt b { display: block; font: 500 clamp(30px, 2.8vw, 42px)/1 var(--mono); letter-spacing: -.045em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt > div > span { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.mkt .dot { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(255, 74, 28, .16); }
.mkt .tri { display: inline-block; font-style: normal; font-size: .42em; vertical-align: .4em; margin-right: .5em; letter-spacing: 0; }
.curve { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: -12px; }
.curve .bar { height: 4px; border-radius: 99px; background: var(--rule); }
.curve .bar i { position: relative; display: block; height: 100%; width: 0; border-radius: 99px; background: var(--ink); transition: width 1s var(--ease); }
.curve .bar i::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.curve span { font-size: 13px; white-space: nowrap; }

/* ---------- panels ---------- */
.panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 10px; align-items: start; }
@container (min-width: 720px) {
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panels .own { grid-column: 1 / -1; }
}
.panels .panel { padding: 26px; }
.panels .ph { margin-bottom: 14px; }
.panels .ph h2 { font-size: 24px; letter-spacing: -.035em; }
#ownerSub { font-size: 13px; }
.board .r .w { font-size: 12px; color: var(--muted); }

/* who you are on the board */
.me { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.me:empty { display: none; }
.me label { font-size: 13px; font-weight: 500; color: var(--muted); margin-right: 2px; }
.me .inp { flex: 1 1 110px; width: auto; min-width: 0; height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.me #signin { flex: 1 1 100%; }
.me #meNote { line-height: 1.45; margin-top: 4px; }

/* build log: a quiet timeline, newest first */
.log { display: grid; grid-template-columns: minmax(0, 1fr); }
.log .it { position: relative; padding: 0 0 20px 26px; font-size: 15px; line-height: 1.45; min-width: 0; }
.log .it:last-child { padding-bottom: 0; }
.log .it::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.log .it:first-child::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 74, 28, .16); }
.log .it::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: 4px; width: 1px; background: var(--rule2); }
.log .it:last-child::after { display: none; }
.log .it .when { display: block; font: 500 12px/1.4 var(--mono); color: var(--muted); }
.log .it .what { margin-top: 3px; overflow-wrap: anywhere; }
.log .it .what b { font-weight: 600; }
.log .it ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; color: var(--muted); font-size: 14px; }
.log .it ul li { position: relative; padding-left: 14px; }
.log .it ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--faint); }

/* the launcher's editor */
.edit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.edit > p { margin: 0; line-height: 1.5; }
.edit > p b { color: var(--ink); font-weight: 500; }
.edit > .btn { justify-self: start; }
.eact { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }

/* ---------- tablet + phone: the slab first, sized to fit the visible screen with its controls ---------- */
@media (max-width: 960px) {
  .gp { padding: 16px 0 80px; --pad: 8px; }
  .gp-grid { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  .player { position: static; --pw: min(calc(100vw - 2 * var(--gutter)), 520px, max(240px, calc((100vh - var(--hh) - 96px) * 9 / 16 + 2 * var(--pad)))); }
  @supports (height: 100svh) { .player { --pw: min(calc(100vw - 2 * var(--gutter)), 520px, max(240px, calc((100svh - var(--hh) - 96px) * 9 / 16 + 2 * var(--pad)))); } }
  .frame { width: var(--pw); height: calc((var(--pw) - 2 * var(--pad)) * 16 / 9 + 2 * var(--pad)); max-width: 100%; margin: 0 auto; border-radius: 30px; }
  .frame iframe, .frame .loading { border-radius: calc(30px - var(--pad)); }
  .pbar { width: var(--pw); max-width: 100%; margin: 14px auto 0; padding-left: 4px; }
  .side { gap: 26px; }
  /* no game yet (not found, still confirming): the message comes first, the empty slab after it */
  .gp-grid:has(#nf) .side { order: -1; }
}
@media (max-width: 640px) {
  .gp { padding-top: 12px; --hh: 72px; --pad: 6px; }
  .gp-grid { row-gap: 36px; }
  .frame { border-radius: 26px; }
  .frame iframe, .frame .loading { border-radius: calc(26px - var(--pad)); }
  .pbar #hint { font-size: 12px; }
  .coin-t { gap: 14px; }
  .coin-t img { width: 52px; height: 52px; }
  .gname { font-size: clamp(34px, 10vw, 44px); }
  .coin .sub { margin-top: 16px; }
  .desc { font-size: 16px; margin-top: 14px; }
  .links .btn { flex: 1 1 auto; }
  .links .btn.gold { flex-basis: 100%; }
  .edit > .btn { justify-self: stretch; }
  .mkt { column-gap: 12px; padding-top: 16px; }
  .mkt b { font-size: clamp(22px, 6.6vw, 28px); }
  .mkt > div > span { font-size: 13px; margin-top: 8px; }
  .curve { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: -8px; }
  .panels { margin-top: 4px; gap: 16px; }
  .panels .panel { padding: 20px; }
  .panels .ph h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .curve .bar i, .pctl .ib, .back .arr { transition: none; } }