/* App shell — loaded last. Frames the game as screens (lobby · match · player ·
   training · tour · shop) and owns the lobby. Component styles stay in style.css,
   shop.css and tactics.css; this file only decides how screens are laid out. */
body.shell{--bar:64px;--nav:64px;--radius:14px;--surface:#152324;--surface-2:#1a2b2a;--edge:#2c3e3c;--soft:#a9bbab}

/* ── Top bar and main menu ─────────────────────────────────────────── */
.shell .topbar{position:sticky;top:0;z-index:40;height:var(--bar);display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:0 max(20px,calc((100vw - 1240px)/2));background:#0e191a;border-bottom:1px solid var(--edge)}
.shell .brand{cursor:pointer;font-size:21px;gap:10px}
.shell .brand small{display:none}
.shell .brand-logo{width:38px;height:38px;border-radius:10px;display:block}
.shell .page-tabs{display:flex;justify-content:center;gap:2px;height:100%;margin:0;border:0}
.shell .page-tabs button{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 16px;border:0;background:none;color:#8da198;font:600 14px var(--font);letter-spacing:0}
.shell .page-tabs button svg{width:20px;height:20px;flex-shrink:0}
.shell .page-tabs button b{font:inherit;color:inherit;letter-spacing:0}
.shell .page-tabs button:hover{color:#e3efd4}
.shell .page-tabs .active,.shell .page-tabs .active b{color:var(--lime)}
.shell .page-tabs .active::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--lime)}
.shell .header-meta{margin:0}
.shell .wallet{display:flex;align-items:baseline;gap:5px;padding:6px 13px 7px;border:1px solid var(--edge);border-radius:999px;background:var(--surface);font:600 13px var(--display);letter-spacing:.4px;color:var(--lime)}
.shell .wallet small{display:none}
.shell .wallet b{font-size:20px}
.shell .icon-btn{width:34px;height:34px;font-size:14px}
.shell main{max-width:1240px;padding:22px 20px 0}
.shell .game-layout{display:block}
.shell footer{margin-top:44px}
body[data-page=match] .page-tabs{display:none}

/* ── Lobby ─────────────────────────────────────────────────────────── */
.kicker{font:600 12px var(--display);letter-spacing:1.8px;color:var(--lime);text-transform:uppercase}
.lobby-hero{position:relative;isolation:isolate;overflow:hidden;min-height:470px;border:1px solid var(--edge);border-radius:var(--radius);background:#12221f}
.lobby-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block}
.lobby-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0c1818f0 0%,#0c1818b8 30%,#0c181838 58%,#0c181866 100%),linear-gradient(0deg,#0c1818d9 0%,#0c181800 40%)}
.lobby-hero-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:40px;align-items:center;min-height:470px;padding:40px 44px}
.lobby-event-top{display:flex;align-items:center;gap:10px}
.lobby-event #surfaceChip{font-size:11px;padding:4px 8px;border-radius:5px;letter-spacing:1px;color:#c9d8c1;border-color:#4a5f55}
.lobby-event #currentTourName{margin:14px 0 18px;font-size:46px;line-height:1.12;letter-spacing:-1.8px;font-weight:800;word-break:keep-all}
.lobby-event .round-track{max-width:380px;gap:6px;margin:0}
.lobby-event .round-track span{padding:8px 6px;border-radius:7px;font-size:13px;font-weight:600;background:#0f1c1c99}
.lobby-cta{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:28px}
.play-btn{display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:260px;padding:15px 18px 15px 24px;border-radius:12px;text-align:left;box-shadow:0 12px 32px #d7fb7924}
.play-btn b{display:block;font-size:21px;font-weight:800;letter-spacing:-.4px}
.play-btn small{display:block;margin-top:3px;font-size:12px;font-weight:500;opacity:.72}
.play-btn svg{width:26px;height:26px;flex-shrink:0}
.play-btn:hover{filter:brightness(1.05)}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--edge);border-radius:12px;background:#0f1c1ccc}
.mode-switch button{padding:9px 14px;border:0;border-radius:9px;background:none;text-align:left;color:#97aba0}
.mode-switch b{display:block;font-size:13px;font-weight:700}
.mode-switch small{display:block;margin-top:2px;font-size:11px;opacity:.85}
.mode-switch [aria-pressed=true]{background:#2a3e2e;color:var(--lime)}
.lobby-prize{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:20px}
.lobby-prize .prize-preview{margin:0;font-size:13px;color:#b9cba6}
.lobby-prize .text-btn{padding:0;font-size:13px;width:auto}
.versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
.versus-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid #3a4f4a;border-radius:var(--radius);background:#132221f2}
.versus-card.me{border-color:#718b45}
.versus-card .athlete-face{width:100%;border-radius:0}
.rival-figure{display:grid;place-items:end center;aspect-ratio:1;padding-bottom:6%;background:radial-gradient(circle at 50% 80%,#ff947630 0%,#ff947600 62%),#1a2a2b}
.rival-figure canvas{width:74%;height:auto;display:block}
.versus-info{display:grid;gap:3px;padding:13px 15px 15px}
.versus-info small{font:600 11px var(--display);letter-spacing:1.4px;color:#90a498}
.versus-info strong{font-size:20px;letter-spacing:-.5px;line-height:1.3}
.versus-info span,.versus-info .versus-style{margin:0;font-size:12.5px;line-height:1.55;color:var(--soft)}
.versus-level{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;background:#0c1818d9;font:700 14px var(--display);letter-spacing:.6px;color:var(--lime)}
.versus-card.rival .versus-level{color:var(--coral)}
.versus-mark{align-self:center;font:800 26px var(--display);letter-spacing:2px;color:#eef2df}
.lobby-coach{grid-column:1/-1}
.lobby-coach .coach-note{margin:0;padding:13px 15px;border-radius:10px;background:#0f1c1ce6}
.lobby-coach .coach-note>span{font-size:11px}
.lobby-coach .coach-note p{font-size:13px;line-height:1.6;color:#c2d0bd}
.lobby-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.lobby-card{display:flex;flex-direction:column;gap:11px;min-height:176px;padding:18px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--surface);color:inherit;text-align:left}
button.lobby-card:hover{border-color:#5d7552;background:#18292a}
.lobby-card>strong{font-size:17px;letter-spacing:-.4px;line-height:1.35}
.card-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13px;line-height:1.6;color:var(--soft)}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;font-size:12.5px;color:#9db1a1}
.card-foot svg{width:18px;height:18px;flex-shrink:0;color:var(--lime)}
.goal-rows{display:grid;gap:10px}
.goal{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;font-size:13px;color:#cbd8c4}
.goal i,.xp-line i{display:block;height:5px;border-radius:5px;background:#2a3b39;overflow:hidden}
.goal i{grid-column:1/-1}
.goal i b,.xp-line i b{display:block;height:100%;border-radius:5px;background:var(--lime)}
.goal em{font:600 13px var(--display);font-style:normal;letter-spacing:.4px;color:#90a498}
.goal.done em{color:var(--lime)}
.xp-line span{display:block;margin-top:8px;font-size:12.5px;color:var(--soft)}
.lobby-card.reward{padding:0;gap:0;overflow:hidden;background:linear-gradient(155deg,#25392a 0%,#172726 70%)}
.lobby-card.reward>.kicker{padding:18px 18px 0}
.lobby-card.reward .idle-button{flex:1;justify-content:flex-end;gap:6px;min-width:0;padding:10px 18px 18px;border:0;border-radius:0;background:none;box-shadow:none;font-size:13px}
.lobby-card.reward .idle-button span{flex-direction:column;align-items:flex-start;gap:4px;font-size:15px;font-weight:700;color:#eef2df}
.lobby-card.reward .idle-button b{font-size:38px;line-height:1.05}
.lobby-card.reward .idle-button small{font-size:12px}
.lobby-card.reward .idle-button::after{content:'받기';align-self:flex-start;margin-top:8px;padding:8px 18px;border-radius:999px;background:#2c4130;color:#a9c09a;font-size:13px;font-weight:700}
.lobby-card.reward .idle-button.ready::after{background:var(--lime);color:#17231b}
.lobby-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lobby-links button,.lobby-links a{padding:10px 16px;border:1px solid var(--edge);border-radius:999px;background:none;color:#b6c6b4;font-size:13px}
.lobby-links button:hover,.lobby-links a:hover{color:var(--lime);border-color:#5d7552}

/* ── Match ─────────────────────────────────────────────────────────── */
.shell .match-screen{max-width:1080px;margin:0 auto}
.shell .match-screen .match-toolbar{height:52px;gap:12px;border-top:0}
.shell .match-screen .court-label{margin-right:auto;font-size:13px}
.back-btn{display:flex;align-items:center;gap:2px;padding:8px 15px 8px 9px;border:1px solid var(--edge);border-radius:999px;background:var(--surface);color:#d2dfca;font-size:13px;font-weight:600}
.back-btn svg{width:18px;height:18px}
.back-btn:hover{border-color:#5d7552;color:var(--lime)}
.shell .small-btn{padding:7px 10px;font-size:12px}
.shell .match-footer{font-size:13px}
.shell .match-footer .text-btn{font-size:13px}
.match-aside{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:6px}
.match-aside .session-panel{padding:16px 0}
.match-aside .session-panel>p{font-size:11px}
.match-aside #restartBtn{width:auto;margin:0;padding:12px 18px;font-size:13px}
.shell #endLobbyBtn{flex-basis:100%;padding:10px 0 0;font-size:13px;text-align:center}
/* The mode bar belongs to the dark court, not a white card. */
.shell .play-mode{border-color:var(--edge);border-radius:12px;background:var(--surface)}
.shell .play-mode strong{font-size:16px;color:#eef2df}
.shell .play-mode p{font-size:13px;color:var(--soft)}
.shell .tactics-toggle{border-color:#4b5f55;background:#22332f;color:#c5d3c1;font-size:13px}
.shell .tactics-toggle[aria-checked=true]{background:var(--lime);border-color:var(--lime);color:#17231b}
.cinema .match-aside,.cinema .back-btn{display:none}

.shell .tactics-desk{border-color:#4d6a47;border-radius:var(--radius)}
.shell .tactics-grid{grid-template-columns:minmax(200px,290px) minmax(0,1fr);gap:28px;align-items:start}
.shell .tactics-map svg{max-height:380px}
.shell .tactics-legend{font-size:12px;gap:4px 12px}
.shell .tactics-map>small,.shell .tactic-effect,.shell .tactics-evidence p,.shell .tactics-analysis>p,.shell .tactics-note,.shell .tactics-desk .point-start-row p,.shell .timing-desk>div>small,.shell .timing-desk>span{font-size:12.5px;line-height:1.65}
.shell .tactics-evidence span,.shell .tactics-presets>span,.shell .tactics-phase,.shell .tactics-orders .tactics-scope{font-size:12px}
.shell .tactics-orders label{font-size:13.5px}
.shell .tactics-orders select{font-size:14px;padding:12px 10px}
.shell .tactics-scope select{font-size:13px;padding:8px}
.shell .tactics-presets button{font-size:13px;padding:10px 14px;border-radius:8px}
.shell .tactics-evidence strong{font-size:14.5px}
.shell .tactics-analysis summary{font-size:13.5px}
.shell .timing-desk b{font-size:14px}
/* Action bar: quick tactics plus "start" (between points) or the timing button (during a
   rally). It stays at the bottom edge on every screen, so a point never needs scrolling. */
.shell .tactics-action{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:stretch;justify-content:center;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #4d6a47;background:#0f1d1b;box-shadow:0 -10px 24px #0b1514cc}
.shell .tactics-action .tactics-presets{flex:0 1 440px;flex-wrap:nowrap;gap:8px;margin:0}
.shell .tactics-action .tactics-presets>span{display:none}
.shell .tactics-action .tactics-presets button{flex:1 1 0;min-height:54px;padding:0 6px;font-size:14px}
.shell .tactics-action .point-start-row{flex:0 1 340px;display:block;margin:0}
.shell .tactics-action .point-start-row p{display:none}
.shell .tactics-action #startNextPoint{width:100%;min-height:54px;border-radius:10px;font-size:16px}
.shell .tactics-desk:not(.held) .tactics-action .point-start-row{display:none}
.shell .tactics-action .timing-desk{flex:0 1 340px;display:block;margin:0;padding:0;border:0}
.shell .tactics-action .timing-desk>div,.shell .tactics-action .timing-desk>span{display:none}
.shell .tactics-desk.held .tactics-action .timing-desk{display:none}
.shell .point-cue{display:none}
body.tactics-on[data-page=match].shell footer{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
/* These two are sized by id in style.css, so they need id-level overrides. */
.shell #orderFeedback{max-width:none;font-size:12.5px;line-height:1.6;white-space:normal;overflow:visible}
.shell #pointAdvice{font-size:12.5px}
/* The timing button lost its base style when it moved into the tactics desk:
   it fell back to a default grey button and its gauge escaped to the viewport. */
.shell .timing-desk .timing-btn{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:70px;padding:10px 12px 24px;border:1px solid #6d8459;border-radius:10px;background:#263a2c;color:#d2e8be}
.shell .timing-desk .timing-btn b{font-size:15px}
.shell .timing-desk .timing-btn small{margin:0;font-size:12px;color:#a9bf9e}
.shell .timing-desk .timing-btn[aria-disabled=true]{cursor:default;opacity:.8}
.shell .timing-desk .timing-btn.armed{background:#35472c}
.shell .timing-desk .timing-btn.perfect{background:#47612e;border-color:#efffa8;color:#f1ffd4;box-shadow:0 0 18px #d7fb7925}
.shell .timing-desk .timing-btn.ready{background:var(--lime);border-color:#e6ffb0;color:#172815;box-shadow:0 0 24px #d7fb7940;opacity:1}
.shell .timing-desk .timing-btn.ready small{color:inherit}
.shell .first-steps{border-radius:10px}
@media(max-width:650px){.shell .tactics-grid{grid-template-columns:1fr;gap:18px}.shell .tactics-map{grid-template-columns:150px minmax(0,1fr)}}

/* ── Training ──────────────────────────────────────────────────────── */
/* Plan + start stay at the bottom edge, the same way as the tactics action bar. */
.shell .training-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--edge);background:#0f1d1b;box-shadow:0 -10px 24px #0b1514cc}
.shell .training-bar .routine-choice{flex:0 1 230px;display:grid;gap:4px;margin:0;padding:0;border:0;font-size:12px;color:var(--soft)}
.shell .training-bar .routine-choice select{width:100%;min-height:46px;margin:0;font-size:14px}
.shell .training-bar .training-action{flex:0 1 600px;display:flex;align-items:center;gap:18px;margin:0;padding:0;border:0;background:none}
.shell .training-bar .training-action>div{flex:1;min-width:0}
.shell .training-bar .training-action h3{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell .training-bar .training-action p{margin:3px 0 0;font-size:13px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shell .training-bar #startTrainingBtn{flex:0 0 auto;min-width:230px;min-height:54px;margin:0;border-radius:10px;font-size:16px}
body[data-page=training].shell footer{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.shell .training-stage{scroll-margin-top:calc(var(--bar) + 12px)}

/* ── Player ────────────────────────────────────────────────────────── */
.sub-tabs{display:flex;gap:4px;width:max-content;max-width:100%;margin:2px 0 20px;padding:4px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);overflow-x:auto}
.sub-tabs button{flex-shrink:0;padding:10px 18px;border:0;border-radius:9px;background:none;color:#97aba0;font-size:14px;font-weight:600}
.sub-tabs .active{background:#2a3e2e;color:var(--lime)}
.shell .player-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:start;padding:26px 28px;border-radius:var(--radius)}
.shell .player-screen,.shell [data-view=training],.shell [data-view=tour],.shell [data-view=book],.shell [data-view=shop]{max-width:1040px;margin:0 auto}
.shell [data-subview=cards]>.deck-heading:first-child{margin-top:4px}

/* ── Phone (the main platform) ─────────────────────────────────────────
   Court Rise is a phone game first. Everything below is tuned at 390×844 and
   checked at 360×740 and 430×932. Rules: the primary action sits in thumb reach
   without scrolling, text is 12px or larger (11px for small caps labels), and
   anything tappable is about 40px or taller. */
html{-webkit-text-size-adjust:100%}
body.shell{overscroll-behavior-y:none}
.shell button,.shell a,.shell select,.shell summary{touch-action:manipulation}
.shell button{-webkit-user-select:none;user-select:none}
@media(max-width:980px){
 .lobby-hero-body{grid-template-columns:1fr;gap:26px;padding:28px 24px}
 .lobby-shade{background:linear-gradient(180deg,#0c1818e6 0%,#0c1818b8 45%,#0c1818f2 100%)}
 .lobby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lobby-event #currentTourName{font-size:38px}
}
@media(max-width:760px){
 /* Frame */
 .shell .topbar{display:flex;height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));gap:10px}
 .shell .header-meta{margin-left:auto}
 .shell .brand{font-size:19px}
 .shell .brand-logo{width:34px;height:34px}
 .shell .icon-btn{width:40px;height:40px}
 .shell .page-tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0e191a;border-top:1px solid var(--edge)}
 .shell .page-tabs button{flex-direction:column;justify-content:center;gap:4px;padding:0;font-size:12px}
 .shell .page-tabs button svg{width:23px;height:23px}
 .shell .page-tabs .active::after{top:-1px;bottom:auto;left:30%;right:30%}
 .shell main{padding:12px max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
 .shell footer{margin-top:30px;padding-bottom:calc(var(--nav) + 28px + env(safe-area-inset-bottom))}
 .shell footer>span{font-size:11px}
 .shell footer>p{font-size:12px;line-height:1.6}
 .shell .toast{bottom:calc(var(--nav) + 18px + env(safe-area-inset-bottom));font-size:13px}
 .shell .text-btn{display:inline-flex;align-items:center;min-height:40px;padding:0;font-size:13px}
 .shell .text-btn.full{display:flex;justify-content:center}
 .shell .primary,.shell .secondary{min-height:44px;font-size:13.5px}
 .shell .eyebrow{display:inline-block;font-size:11px;letter-spacing:1.2px}
 .shell .micro{font-size:12px;line-height:1.6}
 .shell .small-chip{font-size:11px;padding:3px 7px}
 .shell .view-heading{margin:8px 0 18px}
 .shell .view-heading h2{font-size:25px;line-height:1.35;margin:6px 0 8px}
 .shell .view-heading p{font-size:13px;line-height:1.65}
 /* Lobby: who I play, then the start button, all on the first screen */
 .lobby-hero{min-height:0}
 .lobby-hero-body{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-height:0;padding:16px 14px 16px}
 .lobby-event{display:contents}
 .lobby-event-top{order:1}
 #lobbyTourSlot{order:2}
 #lobbyRoundSlot{order:3}
 .versus{order:4;gap:8px;margin-top:2px}
 .lobby-cta{order:5;margin-top:2px;gap:10px}
 .lobby-prize{order:6;margin-top:0;gap:2px 16px}
 .lobby-event #currentTourName{margin:0;font-size:29px;letter-spacing:-1.1px}
 .lobby-event #surfaceChip{font-size:11px}
 .lobby-event .round-track{max-width:none}
 .lobby-event .round-track span{padding:7px 6px;font-size:12.5px}
 .play-btn{flex:1 1 100%;min-width:0;min-height:68px;padding:12px 16px 12px 20px}
 .play-btn small{font-size:12.5px}
 .mode-switch{flex:1 1 100%}
 .mode-switch button{min-height:52px;padding:8px 12px}
 .mode-switch b{font-size:14px}
 .mode-switch small{font-size:12px}
 .lobby-prize .prize-preview{font-size:12.5px}
 .versus-mark{font-size:18px}
 .versus-card .athlete-face,.rival-figure{aspect-ratio:1/.8;background-size:400% auto;background-position-y:12%}
 .rival-figure canvas{width:58%}
 .versus-info{padding:9px 11px 11px;gap:2px}
 .versus-info small{font-size:11px}
 .versus-info strong{font-size:16px}
 .versus-info span,.versus-info .versus-style{font-size:12px;line-height:1.45}
 .versus-level{top:8px;right:8px;font-size:13px;padding:3px 9px}
 .lobby-coach .coach-note{padding:10px 12px}
 .lobby-coach .coach-note>span{font-size:11px}
 .lobby-coach .coach-note p{margin-top:3px;font-size:12.5px;line-height:1.5}
 .lobby-grid{gap:10px;margin-top:10px}
 .lobby-card{min-height:148px;padding:14px;gap:9px}
 .lobby-card>strong{font-size:15px}
 .kicker{font-size:11px;letter-spacing:1.4px}
 .card-text,.goal,.xp-line span,.card-foot{font-size:12.5px}
 .goal em{font-size:12.5px}
 .lobby-card.reward>.kicker{padding:14px 14px 0}
 .lobby-card.reward .idle-button{padding:6px 14px 14px}
 .lobby-card.reward .idle-button span{font-size:14px}
 .lobby-card.reward .idle-button b{font-size:30px}
 .lobby-links button,.lobby-links a{min-height:44px;display:inline-flex;align-items:center}
 /* Match: the court owns the screen; controls sit under the thumb */
 body[data-page=match] .topbar{display:none}
 body[data-page=match].shell main{padding-top:calc(6px + env(safe-area-inset-top))}
 body[data-page=match].shell footer{padding-bottom:30px}
 .shell .match-screen .match-toolbar{height:auto;min-height:0;flex-wrap:wrap;gap:8px 10px;padding:0 0 8px}
 .back-btn{min-height:40px}
 .shell .match-screen .court-label{font-size:13px}
 .shell .toolbar-actions{flex:1 1 100%;flex-wrap:nowrap;justify-content:space-between;gap:5px;overflow-x:auto;scrollbar-width:none}
 .shell .toolbar-actions::-webkit-scrollbar{display:none}
 .shell .toolbar-actions .small-btn{flex:1 0 auto;min-height:38px;padding:0 8px;border:1px solid var(--edge);border-radius:999px;font-size:12px;color:#b9c8b6}
 .shell #cinemaBtn{display:none}
 /* Auto play: the court takes the screen. Tactics on: leave room for the mode bar and the action bar. */
 .shell .stage{aspect-ratio:auto;height:clamp(340px,calc(100vh - 196px),150vw);height:clamp(340px,calc(100dvh - 196px),150vw);max-height:none}
 body.tactics-on .stage{height:clamp(320px,calc(100vh - 322px),150vw);height:clamp(320px,calc(100dvh - 322px),150vw)}
 .cinema .shell .stage,.shell.cinema .stage{height:76vh!important}
 .shell .score-player span{font-size:12.5px}
 .shell .score-player small{font-size:11px}
 .shell .rally-meter span{font-size:11px}
 .shell .shot-badge{font-size:12px}
 .shell .motion-label{font-size:11px}
 .shell .play-mode{margin:10px 0;padding:10px 12px 10px 14px}
 .shell .play-mode strong{font-size:15px}
 .shell .play-mode p{display:none}
 .shell .tactics-toggle{min-height:40px;padding:0 14px;font-size:13px}
 .shell .tactics-desk{margin-top:0}
 .shell .tactics-action{flex-direction:column;gap:8px;padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
 .shell .tactics-action .tactics-presets,.shell .tactics-action .point-start-row,.shell .tactics-action .timing-desk{flex:none}
 .shell .tactics-action .tactics-presets{gap:6px}
 .shell .tactics-action .tactics-presets button{min-height:42px;padding:0 4px;font-size:13px}
 .shell .tactics-action .timing-btn{min-height:62px}
 body.tactics-on[data-page=match].shell footer{padding-bottom:calc(170px + env(safe-area-inset-bottom))}
 .shell #pointBoard text{font-size:10px}
 .shell .tactics-desk .point-cards button{min-height:44px;font-size:12.5px}
 .shell .first-steps>span,.shell .first-steps p{font-size:12.5px}
 .shell .session-panel .eyebrow{font-size:11px}
 .shell .session-panel>p,.shell .session-stats span{font-size:12px}
 .match-aside{grid-template-columns:1fr}
 .match-aside #restartBtn{width:100%}
 /* Result: one clear next step, the rest within reach */
 .shell .match-end{padding:18px 16px}
 .shell .match-end .eyebrow{font-size:12px}
 .shell .match-end h2{font-size:27px}
 .shell .match-end p{font-size:13px;line-height:1.6;margin:10px 0 0}
 .shell .match-end .end-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:340px;margin-top:16px}
 .shell .match-end .end-actions .secondary{margin:0}
 .shell .match-end #rematchBtn{grid-column:1/-1;min-height:54px;border-radius:10px;font-size:16px}
 .shell .match-end .secondary{min-height:46px;padding:0 8px;font-size:13px}
 .shell #endLobbyBtn{grid-column:1/-1;justify-content:center;min-height:44px;padding:0;font-size:13.5px}
 .shell .diagnosis-heading span,.shell .diagnosis-bottom span{font-size:12px}
 .shell .diagnosis-heading strong{font-size:14.5px}
 .shell .shot-diagnosis p{font-size:13px}
 .shell .diagnosis-bottom{flex-direction:column;align-items:stretch;gap:8px}
 .shell .diagnosis-bottom button{min-height:44px;margin:0;font-size:13px}
 /* Player */
 .sub-tabs{width:100%}
 .sub-tabs button{flex:1;min-height:44px;padding:0 8px;font-size:13.5px}
 .shell .player-panel{grid-template-columns:1fr;padding:18px 16px}
 .shell #rankLabel,.shell #countryBadge,.shell #athleteBuild,.shell #athleteGrip{font-size:12.5px}
 .shell #nameInput{min-height:40px;font-size:18px}
 .shell .level-badge small,.shell .profile-theme-label{font-size:11px}
 .shell .stat span,.shell .stat b{font-size:12.5px}
 .shell .compare-btn{min-height:44px;font-size:13px}
 .shell .deck-card .slot-label{font-size:11px}
 .shell .deck-card p{font-size:12px;line-height:1.5}
 .shell .deck-card strong{font-size:14px}
 .shell .preset-row{flex-wrap:wrap;gap:8px}
 .shell .preset-row span{font-size:12px}
 .shell .preset-row button{min-height:40px;padding:0 14px;font-size:13px}
 .shell .pack-note{font-size:12px;line-height:1.6}
 .shell .collection{grid-template-columns:repeat(2,minmax(0,1fr))}
 .shell .collect-card strong{font-size:13.5px}
 .shell .collect-card .tiny-tag{font-size:11px}
 .shell .racket-option b{font-size:13.5px}
 .shell .racket-option span,.shell .racket-specs span,.shell .range-labels span,.shell .gear-presets span{font-size:12px}
 .shell .racket-option small,.shell .racket-art span{font-size:11px}
 .shell .gear-info p,.shell .string-workbench p,.shell .gear-sources p,.shell .gear-sources summary,.shell .section-top b{font-size:13px;line-height:1.6}
 .shell .gear-info small,.shell [data-subview=gear] small{font-size:12px}
 .shell .gear-presets button{min-height:40px;padding:0 12px;font-size:13px}
 .shell .gear-sources a{display:block;padding:9px 0;font-size:13px}
 .shell .string-workbench select{min-height:44px;font-size:14px}
 /* Training · tour · shop */
 .shell .training-bar{bottom:calc(var(--nav) + env(safe-area-inset-bottom));gap:8px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))}
 .shell .training-bar .routine-choice{flex:0 0 40%;font-size:0}
 .shell .training-bar .routine-choice select{min-height:54px;font-size:13.5px}
 .shell .training-bar .training-action{flex:1 1 0}
 .shell .training-bar .training-action>div{display:none}
 .shell .training-bar #startTrainingBtn{flex:1;min-width:0;width:100%;padding:0 8px}
 body[data-page=training].shell footer{padding-bottom:calc(var(--nav) + 110px + env(safe-area-inset-bottom))}
 .shell .training-stage{scroll-margin-top:calc(60px + env(safe-area-inset-top))}
 .shell .facility strong{font-size:13px}
 .shell .facility span{font-size:11.5px}
 .shell .practice-controls button{min-height:44px;font-size:12.5px}
 .shell .practice-dashboard strong,.shell .practice-dashboard small,.shell .training-status,.shell .drill-panel p,.shell .drill-panel li,.shell .drill-panel a,.shell .training-effect span,.shell .training-effect small,.shell .academy-note p,.shell #selectedTrainingDesc,.shell .training-feedback{font-size:12.5px;line-height:1.6}
 .shell .drill-list button{min-height:48px;font-size:13.5px}
 .shell .drill-list small{font-size:11.5px}
 .shell .drill-panel a{display:inline-block;padding:8px 0}
 .shell .routine-choice select{min-height:44px;font-size:14px}
 .shell .tour-main small,.shell .tour-reward small{font-size:11px}
 .shell .tour-main em{font-size:12px}
 .shell .career-summary span{font-size:12px}
 .shell .rules-note{font-size:12px;line-height:1.65}
 .shell .store-theme span,.shell .store-kicker,.shell .store-top .eyebrow{font-size:11px}
 .shell .store-theme small,.shell .store-top label{font-size:11px}
 .shell .store-price small,.shell .store-wallet span,.shell .store-footnote{font-size:12px}
 .shell .store-tabs button{min-height:44px;font-size:13px}
 .shell .store-notice,.shell .store-faq p,.shell .store-product-body p{font-size:13px;line-height:1.6}
 .shell .store-faq summary{min-height:44px;display:flex;align-items:center;font-size:13.5px}
 .shell #shopLanguage{min-height:40px;font-size:13px}
}
@media(max-width:340px){.lobby-grid{grid-template-columns:1fr}.lobby-card{min-height:0}}
/* Scroll targets sit below the sticky top bar. */
.shell .tactics-desk{scroll-margin-top:calc(var(--bar) + 12px)}
.shell .scoreboard{scroll-margin-top:calc(var(--bar) + 76px)}
@media(max-width:380px){.shell .toolbar-actions .small-btn{padding:0 6px;font-size:11.5px}.shell .toolbar-actions{gap:4px}}