/* ==========================================================================
   SCREEN COMPOSITIONS — spatial rules derived from references/golazo-layout
   --------------------------------------------------------------------------
   Proportions are relative to the screen area under the HUD (container
   units: cqw / cqh on .screen), never absolute coordinates. Themes restyle
   these surfaces through tokens; they never move them.
   ========================================================================== */

/* ---------- Page scaffolds ---------- */
.page{height:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2.2cqh,22px)}
.plate{flex:none;margin:clamp(2px,1.2cqh,16px) 0 0;width:min(100%,clamp(300px,42cqw,680px));padding:clamp(12px,2.6cqh,26px) 24px;text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px color-mix(in oklch,var(--bg) 60%,black);font:var(--display-weight) clamp(24px,4.6cqh,44px)/1 var(--font-display);letter-spacing:calc(var(--display-track) * 2.5);text-transform:var(--display-case);overflow-wrap:anywhere}
.plate:focus{outline:none}
.page-tabs{flex:none;display:flex;justify-content:center}
.page-tabs .seg{display:flex;width:100%}.page-tabs .seg button{flex:1 1 0;justify-content:center}
.page-tabs.stack{flex-direction:column;gap:8px}
.panel{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--list);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.panel-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px;scrollbar-color:var(--line) transparent}
.panel-foot{flex:none;display:flex;justify-content:center;padding:6px 10px 10px}
.page-foot{flex:none;display:flex;justify-content:center;gap:clamp(16px,4cqw,48px)}
.footlink{min-height:var(--tap);padding:0 12px;background:none;border:0;color:var(--fg);font:var(--display-weight) 17px/1 var(--font-display);letter-spacing:calc(var(--display-track) * 1.5);text-transform:var(--display-case);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;border-radius:var(--r-sm)}
@media (hover:hover){.footlink:hover{text-decoration-color:var(--accent);background:color-mix(in oklch,var(--fg) 8%,transparent)}}
.rows{display:flex;flex-direction:column;gap:8px}

/* Narrow column (Tournaments, Hall of Fame, Hall of Fame prizes): ~40% of the width */
.page.narrow>.page-tabs,.page.narrow>.panel{width:min(100%,clamp(320px,40cqw,680px))}
/* Wide table (My Results, distribution): ~90% of the width */
.page.wide>.panel,.page.wide>.tabrow{width:min(100%,92cqw)}
.page.wide>.dist-sum{flex:none}

/* ---------- Lobby: How to Play over the left of a centred row of portrait cards; one action below ---------- */
.lobby{height:100%;display:grid;place-items:center}
.lobby-stage{display:flex;flex-direction:column;gap:clamp(10px,2.4cqh,24px)}
.lobby-top{display:flex}
.modes{display:flex;justify-content:center;gap:clamp(10px,1.8cqw,28px)}
.tile-mode{--h:min(52cqh,calc((92cqw - (var(--n) - 1) * 24px) / var(--n) / .68));height:var(--h);width:calc(var(--h) * .68);flex:none}
.tile-mode[aria-pressed=true]{transform:translateY(-4px)}
/* Label scales with the card so long mode names never break mid-word (≈7.6em for 11 caps) */
.tile-mode .tile-title{padding:16px 8px;font-size:min(26px,calc((var(--h) * .68 - 16px) / 7.6))}
.lobby-cta{display:flex;justify-content:center}
.lobby-cta .btn.xl{min-width:min(100%,clamp(240px,22cqw,360px))}

/* ---------- Horizontal strips of large cards (room tiers, room matches) ---------- */
.page.strip-page{justify-content:center}
.strip{flex:none;width:100%;display:flex;gap:clamp(14px,2.8cqw,48px);justify-content:safe center;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:26px clamp(12px,2cqw,32px) 12px;scrollbar-color:var(--line) transparent}
.bigcard{position:relative;flex:none;scroll-snap-align:center;width:clamp(240px,26cqw,440px);min-height:min(66cqh,620px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6cqh,16px);padding:0 clamp(14px,1.6cqw,24px) clamp(16px,2.6cqh,28px);background:var(--tile);border:1px solid var(--line);border-radius:var(--r-lg);text-align:center}
/* Tier colour: one --tier per card, taken from the theme's tier tokens (cards and the voucher note share it) */
[data-tier=explorer]{--tier:var(--tier-explorer)}[data-tier=contender]{--tier:var(--tier-contender)}
[data-tier=challenger]{--tier:var(--tier-challenger)}[data-tier=champion]{--tier:var(--tier-champion)}
.bigcard[data-tier]{border-color:var(--tier);box-shadow:inset 0 0 0 1px var(--tier),0 0 32px color-mix(in oklch,var(--tier) 22%,transparent);background:linear-gradient(180deg,color-mix(in oklch,var(--tier) 16%,var(--tile)),var(--tile) 70%)}
.bigcard[data-tier] .bigcard-plate{background:color-mix(in oklch,var(--tier) 62%,var(--surface-2));border-color:var(--tier);color:#fff;text-shadow:0 1px 2px #0007}
.bigcard[data-tier] .bigcard-art{background:linear-gradient(160deg,color-mix(in oklch,var(--tier) 55%,var(--surface-2)),color-mix(in oklch,var(--tier) 18%,var(--surface-2)));color:color-mix(in oklch,var(--tier) 30%,#fff)}
.bigcard[data-tier] .pill{background:color-mix(in oklch,var(--tier) 28%,var(--surface-3))}
.bigcard.is-mine[data-tier]{box-shadow:inset 0 0 0 2px var(--accent),0 0 32px color-mix(in oklch,var(--tier) 22%,transparent)}
.voucher-note[data-tier]{border-color:color-mix(in oklch,var(--tier) 60%,var(--line-soft))}
.bigcard.is-mine{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bigcard.is-unavailable .bigcard-art,.bigcard.is-unavailable .pill{opacity:.6}
.bigcard-plate{margin:-20px 0 0;min-width:78%;padding:10px 18px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 8px 20px color-mix(in oklch,var(--bg) 60%,black);font:var(--display-weight) clamp(18px,2.8cqh,26px)/1.1 var(--font-display);letter-spacing:calc(var(--display-track) * 1.2);text-transform:var(--display-case)}
.bigcard-art{flex:1;width:100%;min-height:clamp(90px,20cqh,200px);display:grid;place-items:center;border-radius:var(--r);background:var(--surface-2);color:var(--muted)}
.bigcard-art svg.i{width:30%;height:auto;aspect-ratio:1;stroke-width:calc(var(--icon-stroke) * .7)}
.seats-big{font:700 clamp(20px,3.85cqh,35px)/1 var(--font-display);color:var(--fg);font-variant-numeric:tabular-nums}.seats-big small{font-size:.5em;color:var(--muted)}
.bigcard-label{margin:0;font:var(--display-weight) clamp(15px,2.2cqh,21px)/1.1 var(--font-display);letter-spacing:var(--display-track);text-transform:var(--display-case)}
.bigcard-state{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}.bigcard-state small{color:var(--muted);font-size:12px}
.bigcard-note,.bigcard-why{color:var(--muted);font-size:12px;max-width:30ch}
.bigcard-why{color:var(--fg)}
.pill{margin:0;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 20px;border-radius:999px;background:var(--surface-3);font-weight:700;font-variant-numeric:tabular-nums}
.pill svg.i{width:18px;height:18px;color:var(--muted)}
.pill-row{display:flex;align-items:center;gap:10px}
.infobar{flex:none;width:min(100%,92cqw);display:flex;align-items:center;justify-content:center;gap:12px 24px;flex-wrap:wrap;padding:14px 20px;background:var(--list);border:1px solid var(--line-soft);border-radius:var(--r-lg);text-align:center}
.infobar p{margin:0}
/* Free-entry voucher explanation under a tier's room cards */
.voucher-note{flex-direction:column;gap:8px;padding:14px clamp(16px,3cqw,40px)}
.voucher-note .vn-text{max-width:70ch;line-height:1.45;color:var(--fg);text-wrap:balance}
.voucher-note .amt{font-weight:700}
.voucher-note .vn-avail{display:flex;align-items:center;justify-content:center;gap:10px;font:var(--display-weight) 18px/1 var(--font-display);letter-spacing:var(--display-track);text-transform:var(--display-case)}
.voucher-ic{width:40px;height:28px;object-fit:contain}

/* ---------- Distribution & prize tables ---------- */
.dist-sum{width:min(100%,92cqw);padding:clamp(14px,2.6cqh,26px) 24px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.dist-kicker{margin:0 0 4px;font:var(--display-weight) 20px/1.1 var(--font-display);letter-spacing:calc(var(--display-track) * 1.5);text-transform:var(--display-case)}
.dist-line{margin:0;color:var(--muted)}.dist-line b{color:var(--fg);margin-left:4px}
.dist-pool{margin:6px 0 2px;display:flex;align-items:center;gap:10px;font:700 clamp(28px,5cqh,44px)/1 var(--font-display);font-variant-numeric:tabular-nums}.dist-pool svg.i{width:30px;height:30px;color:var(--muted)}
.table-panel{display:flex;flex-direction:column}
.thead{flex:none;padding:14px 26px 8px;color:var(--muted);font:600 14px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase}
.thead .num,.trow-flat .num{text-align:right}
.trow-flat{align-items:center;min-height:clamp(60px,10cqh,96px);padding:0 16px;background:var(--tile);border:1px solid var(--line-soft);border-radius:var(--r)}
.dist-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px}
.prize-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:14px}
.pos-big{font:700 clamp(28px,5cqh,44px)/1 var(--font-display);font-variant-numeric:tabular-nums}
.reward{display:flex;justify-content:flex-end;gap:22px}.reward>span{display:inline-flex;align-items:center;gap:6px}.reward svg.i{width:20px;height:20px;color:var(--muted)}
.table-panel>.rows{padding:2px 12px 12px;overflow:auto;min-height:0}
.page.wide>.table-panel>.thead,.page.narrow .table-panel .thead{padding-left:28px;padding-right:28px}

/* ---------- My Results: tabs centred, filter to the right, wide table ---------- */
.tabrow{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.tabrow-r{justify-self:end}

/* ---------- Competition leaderboard: small personal panel left, ranking table right ---------- */
.page.split{gap:clamp(12px,4cqh,48px)}
.lb{flex:1;min-height:0;width:min(100%,96cqw);display:grid;grid-template-columns:minmax(240px,29%) minmax(0,1fr);gap:clamp(16px,3.5cqw,56px)}
.lb-me{padding:clamp(16px,3cqh,32px) clamp(16px,2cqw,28px);overflow:auto;display:block;border-color:var(--line)}
.lb-me .eyebrow{margin-bottom:8px}
.lb-name{margin:0 0 10px;font:var(--display-weight) clamp(22px,3.6cqh,32px)/1.1 var(--font-display);letter-spacing:calc(var(--display-track) * .5);text-transform:var(--display-case);overflow-wrap:anywhere}
.lb-me .sectlabel{margin-top:22px}
.lb-me .alert{margin-top:18px}
.lb-table .panel-body{padding:6px 10px 10px}

/* ---------- Gameplay: platform layer sits above the developer's game ---------- */
.platform-layer{position:absolute;inset:0;pointer-events:none}
.platform-layer>*{pointer-events:auto}
.pausebtn{position:absolute;top:12px;right:12px;z-index:4;width:52px;height:48px;border-radius:var(--r);background:var(--chrome);border:1px solid var(--line);color:var(--fg);display:grid;place-items:center;backdrop-filter:blur(6px);transition:background var(--dur-fast)}
@media (hover:hover){.pausebtn:hover{background:var(--surface-3)}}
.owner-platform{position:absolute;top:6px;right:6px;width:64px;height:60px;border:2px solid var(--accent);border-radius:calc(var(--r-sm) + 4px);pointer-events:none!important;z-index:5}
.owner-platform .tag{top:66px;right:0;background:var(--accent);color:var(--on-accent)}
.center-ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:var(--scrim);text-align:center;animation:fade var(--dur-overlay) ease}
.center-ov.loading,.center-ov.rotate{background:var(--bg)}
.center-ov .inner{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:380px}
.center-ov h2{margin:0;font:var(--display-weight) 26px/1.1 var(--font-display);text-transform:var(--display-case);letter-spacing:var(--display-track)}
.center-ov h2:focus{outline:none}
.center-ov p{margin:0;color:var(--muted)}
.rotate .phone{width:64px;height:64px;border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center}.rotate .phone svg.i{width:34px;height:34px}
/* Voucher art is wider than tall (≈10:7): size by height, keep its ratio. */
/* Voucher count: its own tier-tinted chip ("6x" + voucher icon), separate from the "Available" label; tight count-to-icon gap. */
.voucher-note .vn-avail .amt-x{display:inline-flex;align-items:center;gap:.12em;padding:4px 12px 4px 14px;border-radius:999px;background:color-mix(in oklch,var(--tier,var(--accent)) 22%,var(--surface-2));box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--tier,var(--accent)) 55%,transparent)}
.voucher-note .amt-x img.cur{--cur:1.5em;width:calc(var(--cur) * 1.43);min-width:0;margin:0;vertical-align:middle}
/* Hall of Fame prizes: place numbers at half their old size; the rewards on the right match that size. */
.prize-grid{--place-size:clamp(14px,2.5cqh,22px)}
.prize-grid .pos-big{font-size:var(--place-size)}
.prize-grid .reward{font:700 var(--place-size)/1 var(--font-display);align-items:center}