/* ==========================================================================
   RESPONSIVE — chosen from the real size of the game frame (data-layout).
     desktop   : the reference composition (16:9)
     portrait  : width ≤ 700 and taller than wide
     landscape : height ≤ 520 and wider than tall (phones on their side)
   Each layout keeps the same hierarchy (HUD → title plate → tabs → content →
   foot links/actions) but re-flows it; desktop coordinates are never forced.
   Mobile layouts are provisional: no mobile footage reviewed yet.
   ========================================================================== */

/* ---------- Mobile portrait ---------- */
[data-layout=portrait] .bar{min-height:58px;padding:8px 10px 0;gap:8px}
[data-layout=portrait] .ibtn.hud-btn{width:48px;height:44px}
[data-layout=portrait] .wallet{min-width:0}
[data-layout=portrait] .wallet .lbl{display:none}
[data-layout=portrait] .wallet .w{padding:0 8px}
[data-layout=portrait] .offline{margin:0 12px 8px}
[data-layout=portrait] .screen{padding:4px 12px 14px}
[data-layout=portrait] .plate{width:100%;font-size:24px;padding:14px 16px}
[data-layout=portrait] .page.narrow>.page-tabs,[data-layout=portrait] .page.narrow>.panel,[data-layout=portrait] .page.wide>.panel,[data-layout=portrait] .page.wide>.tabrow{width:100%}
[data-layout=portrait] .seg{display:flex;flex-wrap:nowrap}
[data-layout=portrait] .seg button{flex:1 1 0;justify-content:center;min-width:0;min-height:var(--tap);padding:0 6px;font-size:13px}
[data-layout=portrait] .btn.sm{min-height:var(--tap)}
/* Lobby: the card row becomes a snap carousel of larger portrait cards; the next card peeks in */
[data-layout=portrait] .lobby{grid-template-columns:minmax(0,1fr)}
[data-layout=portrait] .lobby-stage{width:100%;min-width:0}
[data-layout=portrait] .modes{--cw:calc(min(50cqh,calc(62cqw / .68)) * .68);position:relative;justify-content:flex-start;gap:14px;margin-inline:-12px;padding:10px calc(100% + 12px - var(--cw)) 12px 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:12px;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}
[data-layout=portrait] .modes.dragging{cursor:grabbing;scroll-snap-type:none}
[data-layout=portrait] .modes::-webkit-scrollbar{display:none}
[data-layout=portrait] .tile-mode{--h:min(50cqh,calc(62cqw / .68));scroll-snap-align:start}
[data-layout=portrait] .lobby-cta .btn.xl{width:100%;font-size:20px}
/* Rows and tables */
[data-layout=portrait] .trow-foot{flex-direction:column;align-items:stretch}
[data-layout=portrait] .pill-btn{justify-content:center}
[data-layout=portrait] .rkhead,[data-layout=portrait] .rk{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:0 12px}
[data-layout=portrait] .rk .en,[data-layout=portrait] .rkhead .en,[data-layout=portrait] .rowhead{display:none}
[data-layout=portrait] .av{width:34px;height:34px;font-size:12px}
[data-layout=portrait] .tabrow{grid-template-columns:1fr}
[data-layout=portrait] .tabrow>span:first-child{display:none}
[data-layout=portrait] .tabrow-r{justify-self:stretch}
[data-layout=portrait] .rrow{grid-template-columns:1fr auto;gap:6px 12px;padding:12px 14px}
[data-layout=portrait] .rrow .nm{grid-column:1/-1}
[data-layout=portrait] .rrow .num{text-align:left;font-size:14px}
[data-layout=portrait] .rrow .lbl{display:inline;color:var(--muted);font-weight:400;font-size:12px;margin-right:6px}
[data-layout=portrait] .rrow .chev{display:none}
[data-layout=portrait] .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-layout=portrait] .stats.three{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
[data-layout=portrait] .stats.three .stat{padding:10px}
[data-layout=portrait] .stats.three .stat b{font-size:19px}
[data-layout=portrait] .cols{grid-template-columns:1fr;gap:12px}
/* Leaderboard: personal panel stacks above the table */
[data-layout=portrait] .page.split{height:auto;min-height:100%}
[data-layout=portrait] .lb{flex:none;grid-template-columns:1fr;gap:12px}
[data-layout=portrait] .lb-table{min-height:60cqh}
/* Card strips: one large card and a peek of the next */
[data-layout=portrait] .bigcard{width:74cqw;min-height:min(60cqh,520px)}
[data-layout=portrait] .infobar{width:100%;flex-direction:column}
[data-layout=portrait] .infobar .seg{width:100%}
[data-layout=portrait] .dist-grid{grid-template-columns:auto 1fr auto}
[data-layout=portrait] .reward{gap:12px}
/* Dialogs become bottom sheets; the title plate sits inside the sheet */
[data-layout=portrait] .ov{align-items:flex-end;padding:var(--sa-t) 0 0}
[data-layout=portrait] .dlg-wrap,[data-layout=portrait] .dlg-wrap.md,[data-layout=portrait] .dlg-wrap.sm{width:100%;max-height:94%;gap:12px;padding:0 0 max(16px,calc(var(--sa-b) + 10px));background:var(--surface);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-dlg) var(--r-dlg) 0 0;animation-name:sheet}
[data-layout=portrait] .dlg{margin-top:0;background:none;border:0;box-shadow:none;border-radius:0}
[data-layout=portrait] .dhead{margin-top:0;padding:14px 60px 0}
[data-layout=portrait] .dplate{box-shadow:none;font-size:20px;min-height:52px;padding:10px 16px}
[data-layout=portrait] .dhead>.ibtn{top:18px}
[data-layout=portrait] .dbody{padding:16px 18px 6px}
[data-layout=portrait] .dfoot{width:100%;padding:0 16px}
[data-layout=portrait] .dfoot .btn{flex:1 1 auto}
[data-layout=portrait] .dfoot .btn.primary{flex-basis:100%;order:-1}
/* Scenes stay full screen */
[data-layout=portrait] .dlg-wrap.scene{max-height:100%;height:100%;border:0;border-radius:0;background:none;padding:var(--sa-t) 12px max(16px,calc(var(--sa-b) + 10px))}
[data-layout=portrait] .result .dplate{font-size:44px}
[data-layout=portrait] .tut{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
[data-layout=portrait] .tutorial .tutart{height:100%}
[data-layout=portrait] .tutorial .dfoot .btn{flex:none}
[data-layout=portrait] .tutorial .dfoot .btn.primary{order:0;flex-basis:auto}
[data-layout=portrait] .pausebtn{top:10px;right:10px}
@keyframes sheet{from{transform:translateY(40px);opacity:0}}

/* ---------- Mobile landscape (limited height) ---------- */
[data-layout=landscape] .bar{min-height:52px;padding:6px 14px 0}
[data-layout=landscape] .ibtn.hud-btn{width:48px;height:44px}
[data-layout=landscape] .wallet{height:44px}
[data-layout=landscape] .wallet .lbl{display:none}
[data-layout=landscape] .offline{margin:0 14px 6px;padding:5px 10px}
[data-layout=landscape] .screen{padding:2px 16px 8px}
[data-layout=landscape] .page{gap:8px}
[data-layout=landscape] .plate{margin:0;padding:8px 18px;font-size:20px}
[data-layout=landscape] .page.narrow>.page-tabs,[data-layout=landscape] .page.narrow>.panel{width:min(100%,62cqw)}
[data-layout=landscape] .page-tabs.stack{flex-direction:row}
[data-layout=landscape] .seg button{min-height:var(--tap)}
[data-layout=landscape] .btn.sm{min-height:var(--tap)}
/* Lobby: one row of shorter portrait cards */
[data-layout=landscape] .lobby-stage{gap:8px}
[data-layout=landscape] .tile-mode{--h:min(54cqh,calc((92cqw - (var(--n) - 1) * 12px) / var(--n) / .68))}
[data-layout=landscape] .modes{gap:12px}
[data-layout=landscape] .tile-title{padding-block:8px}
[data-layout=landscape] .tile small,[data-layout=landscape] .tile-badge{display:none}
[data-layout=landscape] .tile[aria-pressed=true]{transform:none}
[data-layout=landscape] .btn.xl{min-height:48px;font-size:17px;padding:0 24px}
/* Rows, tables, leaderboard */
[data-layout=landscape] .card{padding:12px 14px;gap:8px}
[data-layout=landscape] .rk{min-height:50px}
[data-layout=landscape] .rk-section{font-size:16px}
[data-layout=landscape] .rrow,[data-layout=landscape] .rowhead{grid-template-columns:minmax(0,1.6fr) 110px 90px 80px 90px}
[data-layout=landscape] .rrow{min-height:56px;padding:10px 14px}
[data-layout=landscape] .rowhead{padding:0 15px 6px}
[data-layout=landscape] .rrow .chev,[data-layout=landscape] .rowhead .chev{display:none}
[data-layout=landscape] .lb{grid-template-columns:minmax(200px,32%) minmax(0,1fr);gap:12px}
[data-layout=landscape] .lb-me{padding:12px 14px}
[data-layout=landscape] .lb-name{font-size:20px}
[data-layout=landscape] .lb-me .sectlabel{margin-top:12px}
[data-layout=landscape] .stats{gap:8px;margin-bottom:10px}
[data-layout=landscape] .stat{padding:8px 12px}
[data-layout=landscape] .stat b{font-size:18px;margin-top:3px}
[data-layout=landscape] .alert{padding:10px 12px;margin-bottom:10px}
/* Card strips: smaller cards, still large relative to the viewport */
[data-layout=landscape] .strip{padding-top:22px}
[data-layout=landscape] .bigcard{width:clamp(200px,32cqw,300px);min-height:76cqh;gap:6px;padding-bottom:12px}
[data-layout=landscape] .bigcard-art{min-height:40px}
[data-layout=landscape] .bigcard-note,[data-layout=landscape] .bigcard-state > small{display:none}
[data-layout=landscape] .infobar{padding:6px 12px;gap:6px 12px}
[data-layout=landscape] .trow-flat{min-height:48px}
[data-layout=landscape] .dist-sum{padding:10px 16px;gap:2px}
/* Dialogs */
[data-layout=landscape] .ov{padding:8px max(16px,var(--sa-r)) max(8px,var(--sa-b)) max(16px,var(--sa-l))}
[data-layout=landscape] .dlg-wrap{gap:8px}
[data-layout=landscape] .dlg{margin-top:24px}
[data-layout=landscape] .dhead{margin-top:-24px}
[data-layout=landscape] .dplate{min-height:46px;padding:8px 20px;font-size:19px}
[data-layout=landscape] .dhead .crumb{margin-bottom:3px}
[data-layout=landscape] .dhead>.ibtn{top:8px}
[data-layout=landscape] .dbody{padding:28px 18px 10px}
[data-layout=landscape] .kv{padding:7px 0}
[data-layout=landscape] .timeline{margin:6px 0 0}[data-layout=landscape] .timeline li{padding:4px 0}
[data-layout=landscape] .result .dplate{font-size:36px}
[data-layout=landscape] .scene .dbody{padding-top:8px}
[data-layout=landscape] .tutorial .tutart{height:100%}
[data-layout=landscape] .tut-panel{padding:14px 18px}
[data-layout=landscape] .btn.arrow{width:48px;min-height:48px}
[data-layout=landscape] .pausebtn{top:8px;right:8px;width:var(--tap);height:var(--tap)}
[data-layout=landscape] .pg-body{padding-top:56px;gap:8px}
[data-layout=landscape] .pg-orb{width:48px;height:48px}

/* ---------- v0.6 responsive defect fixes (no layout changes) ---------- */
/* Overlay bodies use the themed scrollbar instead of the light native one */
.dbody{scrollbar-color:var(--line) transparent}
/* Prize pills never break "1,000 PLAYR" over two lines */
.bigcard .pill{white-space:nowrap}
/* Portrait: the PLACE column header fits its column */
[data-layout=portrait] .rkhead,[data-layout=portrait] .rk{grid-template-columns:52px minmax(0,1fr) auto}
/* Landscape: room cards fit the frame height, so the info bar and filters stay on screen */
[data-layout=landscape] .bigcard{min-height:0}
[data-layout=landscape] .strip{padding-bottom:6px}
/* Landscape: stacked filter groups get the full width so each stays on one line and the list keeps its height */
[data-layout=landscape] .page.narrow>.page-tabs.stack{width:min(100%,92cqw)}
[data-layout=landscape] .page-tabs.stack .seg button{white-space:nowrap;padding:0 12px}
[data-layout=landscape] .page-tabs.stack .seg{flex-wrap:nowrap}
[data-layout=landscape] .page-tabs.stack .seg button{flex:1 1 auto}
[data-layout=landscape] .bigcard-art{flex:none;min-height:0;padding:4px 0}
[data-layout=landscape] .bigcard-why{font-size:11px;line-height:1.3}
/* Strip pages taller than the frame scroll from the top instead of being clipped above it */
.page.strip-page{justify-content:safe center;height:auto;min-height:100%}
/* Card rows keep one vertical position across Room tiers → Room selection: the row sits in a middle track
   between two equal flexible tracks, and the footer (links or info bar) hangs in the bottom track,
   so a taller footer no longer pushes the cards up. */
.page.strip-page{display:grid;grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);justify-items:center;align-items:start;row-gap:0}
.page.strip-page>:not(.sr-only):not(.page-foot):not(.infobar){grid-row:2;width:100%}
.page.strip-page>.page-foot,.page.strip-page>.infobar{grid-row:3;margin-top:clamp(10px,2.2cqh,22px)}
/* Details dialog: portrait puts the distribution fact on its own row, the other two side by side; landscape stays compact */
[data-layout=portrait] .det-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
[data-layout=portrait] .det-grid .det-fact:first-child{grid-column:1/-1;flex-direction:row;align-items:center}
[data-layout=portrait] .det-fact.hero .det-ic{width:76px;height:76px}
[data-layout=portrait] .det-fact.hero{padding:14px 16px;gap:16px}
[data-layout=landscape] .det{gap:8px}
[data-layout=landscape] .det-fact{padding:8px 12px;gap:12px}
[data-layout=landscape] .det-fact.hero{padding:10px 16px}
[data-layout=landscape] .det-fact.hero .det-ic{width:60px;height:60px}
[data-layout=landscape] .det-ic{width:44px;height:44px}
[data-layout=landscape] .det-grid{gap:8px}
[data-layout=landscape] .det-grid .det-fact{flex-direction:row;align-items:center}

/* Header counters: tighter on phones so PLAYR plus three counters fit beside the corner buttons */
[data-layout=portrait] .wallet{gap:2px;padding:0 3px}
[data-layout=portrait] .wallet .w-main{height:36px;padding:0 10px 0 8px;font-size:17px;gap:6px}
[data-layout=portrait] .wallet .w-main img.cur{--cur:22px}
[data-layout=portrait] .wallet .w-item{padding:0 4px;gap:3px;font-size:13px}
[data-layout=portrait] .wallet img.tk{width:20px;height:20px}
[data-layout=landscape] .wallet .w-main{height:34px;font-size:18px}
[data-layout=landscape] .wallet .w-item{font-size:14px}

/* ---------- Desktop: buttons, header and tables at 2× (designed at 1920×1080) ---------- */
[data-layout=desktop][data-wide]{--av-frame-w:5px}
[data-layout=desktop][data-wide] .btn{min-height:88px;padding:0 36px;gap:14px;font-size:30px}
[data-layout=desktop][data-wide] .btn svg.i{width:36px;height:36px}
[data-layout=desktop][data-wide] .btn.sm{min-height:76px;padding:0 26px;font-size:26px}
[data-layout=desktop][data-wide] .btn.xl{min-height:128px;padding:0 68px;font-size:44px}
[data-layout=desktop][data-wide] .btn.join{min-width:min(100%,440px)}
[data-layout=desktop][data-wide] .btn.arrow{width:128px;min-height:128px;padding:0}[data-layout=desktop][data-wide] .btn.arrow svg.i{width:56px;height:56px}
[data-layout=desktop][data-wide] .ibtn{width:88px;height:88px}[data-layout=desktop][data-wide] .ibtn svg.i{width:40px;height:40px}
[data-layout=desktop][data-wide] .pill-btn{min-height:88px;padding:0 36px;font-size:28px}
[data-layout=desktop][data-wide] .lb-actions .btn{flex-basis:260px}
/* Header */
[data-layout=desktop][data-wide] .bar{min-height:120px;gap:24px;padding-top:16px}
[data-layout=desktop][data-wide] .hud-l,[data-layout=desktop][data-wide] .hud-r{gap:16px}
[data-layout=desktop][data-wide] .ibtn.hud-btn{width:112px;height:96px}[data-layout=desktop][data-wide] .ibtn.hud-btn svg.i{width:44px;height:44px}
[data-layout=desktop][data-wide] .navpill{min-height:96px;padding:0 32px;gap:16px;font-size:30px}[data-layout=desktop][data-wide] .navpill svg.i{width:36px;height:36px}
[data-layout=desktop][data-wide] .wallet{height:96px;gap:12px;padding:0 8px;min-width:min(100%,clamp(520px,50cqw,960px))}
[data-layout=desktop][data-wide] .wallet .w-main{height:80px;padding:0 36px 0 24px;gap:18px;font-size:42px}
[data-layout=desktop][data-wide] .wallet .w-main img.cur{--cur:56px}
[data-layout=desktop][data-wide] .wallet .w-items{gap:4px}
[data-layout=desktop][data-wide] .wallet .w-item{padding:0 16px;gap:10px;font-size:30px}
[data-layout=desktop][data-wide] .wallet img.tk{width:48px;height:48px}
/* Leaderboards and Hall of Fame rankings */
[data-layout=desktop][data-wide] .page.narrow>.page-tabs,[data-layout=desktop][data-wide] .page.narrow>.panel{width:min(100%,clamp(320px,56cqw,1080px))}
[data-layout=desktop][data-wide] .rkhead,[data-layout=desktop][data-wide] .rk{grid-template-columns:104px minmax(0,1fr) repeat(var(--cols),minmax(150px,auto));gap:28px;padding:0 32px}
[data-layout=desktop][data-wide] .rkhead{top:-6px;min-height:80px;font-size:26px}
[data-layout=desktop][data-wide] .ranks.table{--rkh:80px}
[data-layout=desktop][data-wide] .rk{min-height:128px;font-size:30px}
[data-layout=desktop][data-wide] .rk .pos{font-size:44px}
[data-layout=desktop][data-wide] .rk-note{font-size:26px}
[data-layout=desktop][data-wide] .rk .num small{font-size:24px}
[data-layout=desktop][data-wide] .who{gap:24px}
[data-layout=desktop][data-wide] .av{width:80px;height:80px}[data-layout=desktop][data-wide] .av-pic{font-size:28px}
[data-layout=desktop][data-wide] .ranks{gap:12px}
/* My Results */
[data-layout=desktop][data-wide] .rrow,[data-layout=desktop][data-wide] .rowhead{grid-template-columns:minmax(0,1.6fr) 240px 200px 180px 220px 80px;gap:28px}
[data-layout=desktop][data-wide] .rrow{min-height:132px;padding:28px 36px;font-size:30px}
[data-layout=desktop][data-wide] .rrow small{font-size:24px}
[data-layout=desktop][data-wide] .rrow .chev{width:80px;height:80px}[data-layout=desktop][data-wide] .rrow .chev svg.i{width:40px;height:40px}
[data-layout=desktop][data-wide] .rowhead{padding:0 38px 16px;font-size:24px}
/* Prize tables (room distribution, Hall of Fame prizes) */
[data-layout=desktop][data-wide] .thead{padding:28px 56px 16px;font-size:28px}
[data-layout=desktop][data-wide] .table-panel>.rows{padding:4px 24px 24px;gap:16px}
[data-layout=desktop][data-wide] .trow-flat{min-height:clamp(120px,14cqh,192px);padding:0 32px;font-size:30px}
[data-layout=desktop][data-wide] .dist-grid,[data-layout=desktop][data-wide] .prize-grid{gap:28px}
[data-layout=desktop][data-wide] .pos-big{font-size:clamp(48px,7cqh,88px)}
[data-layout=desktop][data-wide] .reward{gap:44px}[data-layout=desktop][data-wide] .reward svg.i{width:40px;height:40px}
[data-layout=desktop][data-wide] .rrow .chip,[data-layout=desktop][data-wide] .rk .chip{font-size:22px;padding:10px 16px;border-radius:10px}

/* ---------- Room covers: artwork is 4:3, so every room card frames it at 4:3 ----------
   Cards size to their content instead of stretching the art to fill a tall box. */
.bigcard{min-height:0}
.bigcard-art.room-cover{flex:none;position:relative;overflow:hidden;aspect-ratio:4/3;height:auto;min-height:0;padding:0}
.room-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room-cover svg.i{width:22%}
[data-layout=portrait] .bigcard{min-height:0}
/* Landscape: card width follows the frame height so the 4:3 cover and the actions fit on screen */
[data-layout=landscape] .bigcard{width:clamp(170px,calc((100cqh - 250px) * 1.333 + 24px),300px)}
[data-layout=landscape] .bigcard-art.room-cover{padding:0}
/* Tablet held upright: room strips become a 2-column grid sized to fit the height, no sideways scroll */
/* Tablet held upright: narrow pages (Tournaments, Hall of Fame) use the same width as the other tablet screens */
#game[data-tall] .page.narrow>.page-tabs,#game[data-tall] .page.narrow>.panel,#game[data-tall] .page.wide>.panel,#game[data-tall] .page.wide>.tabrow{width:min(100%,88cqw)}
#game[data-tall] .plate{width:min(100%,clamp(360px,60cqw,680px));font-size:clamp(28px,4.6cqw,40px);overflow-wrap:normal}
/* Room tiers and rooms scroll sideways on every layout; upright tablets show ~2 cards with the next peeking */
#game[data-tall] .tier-card,#game[data-tall] .match-card{width:min(42cqw,400px)}
.strip.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
/* Card strips only behave as carousels when the cards overflow. When every card fits,
   the auto margins centre the row side by side (no scrollbar, nothing to drag);
   when they don't fit, the margins collapse to 0 and the row scrolls from the first card. */
.strip{justify-content:flex-start}
.strip>:first-child{margin-left:auto}
.strip>:last-child{margin-right:auto}
[data-layout=desktop][data-wide] .prize-grid{--place-size:clamp(24px,3.5cqh,44px)}

/* Tablet How to Play follows phone portrait: art above copy, equal halves.
   Use the kit's existing non-wide tablet classification, in either orientation. */
#game[data-layout=desktop]:not([data-wide]) .tut {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
#game[data-layout=desktop]:not([data-wide]) .tutorial .tutart {height:100%}