/* Readable cards, collapsible sidebars, and one native page scroll. */
:root{--left-rail-width:216px;--jump-offset:78px}
html{scroll-padding-top:var(--jump-offset);scroll-behavior:auto}
body{min-width:320px;min-height:100vh;height:auto;overflow:visible;font-size:14px;line-height:1.5}
button,input,summary{touch-action:manipulation}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #e8d28e;outline-offset:3px}
.app-shell{display:grid;grid-template-columns:var(--left-rail-width) minmax(0,1fr);align-items:start;min-height:100vh}
.sidebar{position:sticky;top:0;left:auto;width:auto;height:auto;min-height:100dvh;align-self:start;padding:23px 14px 20px;overflow:visible}
.main-area{grid-column:2;height:auto;min-height:100vh;min-width:0;overflow:visible}
.topbar{height:auto;min-height:72px;flex-wrap:wrap;gap:12px;padding:15px 24px}
.top-actions{flex-wrap:wrap;gap:12px}
.breadcrumbs{font-size:12px;line-height:1.7}
.match-pill{height:auto;min-height:29px;font-size:11px}
.icon-button{font-size:12px;min-height:32px}
.wallet-button{min-height:35px}
.wallet-button strong{font-size:15px}
.wallet-label{font-size:11px}
.top-actions .account-button{display:flex;min-height:36px}
.account-button-copy strong{font-size:12px}
.account-button-copy small{font-size:11px;line-height:1.5}
.brand{margin-bottom:30px}
.brand-copy strong{font-size:16px}
.brand-copy small{font-size:10px;letter-spacing:1.4px}
.side-caption{font-size:11px;letter-spacing:1px}
.nav-item{height:47px;font-size:14px}
.nav-icon{font-size:21px;width:22px;flex:none}
.pvp-nav-badge{font-size:10px}
.record-card strong{font-size:13px}
.record-card span{font-size:12px;line-height:1.8}
.side-bottom{margin-top:35px}
.season-chip{font-size:11px;height:auto;min-height:34px;padding:7px}
.player-mini strong{font-size:12px}
.player-mini span{font-size:10px;line-height:1.6}
.player-mini>div:nth-child(2){min-width:0}
.player-mini strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.workspace-controls{position:sticky;top:0;z-index:13;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;padding:10px 24px;border-bottom:1px solid #cfbe7d29;background:#162219f5;box-shadow:0 3px 12px #04090433;backdrop-filter:blur(10px);font-family:var(--cn)}
.layout-toggles,.page-shortcuts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.layout-toggle,.page-shortcuts>button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:35px;padding:6px 10px;border:1px solid #b5ba8b3d;border-radius:6px;background:#a6bb770a;color:#bbc8a9;font:500 12px/1.5 var(--cn);white-space:nowrap;cursor:pointer}
.layout-toggle>span:first-child{color:#d8c589;font-size:17px;line-height:1}
.layout-toggle[aria-expanded="false"]{border-color:#d7bf7866;background:#d7bf7812;color:#e1d5a8}
.layout-toggle:hover,.page-shortcuts>button:hover{border-color:#d7c184a1;background:#d7bf7820;color:#f0e3b8}
.page-shortcuts>button{border-color:transparent;background:transparent;color:#a8b69a;padding-left:8px;padding-right:8px}
.page-shortcuts>button>span{font-size:15px;color:#cbb77c}
#pageTop,#battlefield,#handArea,#rightRail,#leftSidebar{scroll-margin-top:var(--jump-offset)}
#pageTop:focus,#battlefield:focus,#handArea:focus{outline:none}
.game-layout{flex:none;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 282px;align-items:start;gap:22px;padding:20px 24px 100px;max-width:1840px;overflow:visible}
.duel-column{display:flex;flex-direction:column;gap:15px;height:auto;min-height:0;min-width:0;overflow:visible}
.battle-toolbar{flex:none;min-height:62px;gap:12px;flex-wrap:wrap;align-items:center}
.battle-toolbar h1{font-size:21px;line-height:1.5}
.eyebrow{font-size:10px;line-height:1.6;letter-spacing:1.3px}
.toolbar-right{display:flex;flex-wrap:wrap;gap:5px}
.subtle-button,.difficulty-trigger span:last-child,.toolbar-right .pvp-toolbar-button{font-size:12px;min-height:34px}
.subtle-button span:first-child,.difficulty-trigger span:first-child{font-size:16px}
.round-badge{height:32px;font-size:12px}
.battlefield{flex:none;height:620px;min-height:620px;border-radius:12px}
.battle-hud{top:13px;left:15px;right:15px;gap:10px;align-items:flex-start}
.turn-label{flex-wrap:wrap;font-size:13px;gap:6px}
.turn-label #turnHint{font-size:12px}
.pvp-battle-status{font-size:11px;max-width:48%;white-space:normal;padding:5px 8px}
.player-zone{left:5%;right:5%;height:38%}
.enemy-zone{top:8%}.friendly-zone{bottom:8%}
.hero-card{width:246px;max-width:100%;height:67px;gap:10px;padding:8px 10px}
.hero-portrait{width:39px;height:39px;font-size:23px}
.hero-info{flex:1;min-width:0}
.hero-info strong{font-size:12px}
.hero-info span{font-size:11px;line-height:1.5}
#heroTrainerName,#enemyTrainerName,#enemyTrainerStage{max-width:none}
.hero-health{font-size:14px}
.hero-health b{font-size:19px}
.hero-health span{font-size:17px}
.hero-footer{font-size:11px;line-height:1.5;left:0}
.enemy-zone .board-slots{inset:79px 0 33px}
.friendly-zone .board-slots{inset:29px 0 79px}
.board-slots{grid-template-columns:repeat(5,minmax(0,110px));gap:clamp(5px,1.1vw,14px);align-items:start}
.unit{height:120px;min-height:120px;max-height:120px;padding:5px 3px 8px;border-radius:9px}
.unit-art{width:52px;height:52px;font-size:36px;flex:none}
.unit-name{max-width:100%;font-size:12px;line-height:1.6;overflow:hidden;text-overflow:ellipsis}
.unit-move{font-size:10px;line-height:1.5;margin-top:2px;letter-spacing:0}
.unit-status{font-size:12px;left:5px;top:5px}
.unit.burning .unit-status{font-size:14px}
.unit-taunt{font-size:11px;right:5px;top:5px}
.unit-badges{bottom:-9px}
.stat-gem,.stat-heart{min-width:25px;height:25px;font-size:14px}
.center-ribbon{height:29px;font-size:11px;gap:8px;padding:0 13px}
.board-instruction{bottom:9px;max-width:94%;width:max-content;white-space:normal;text-align:center;font-size:12px;line-height:1.5;padding:5px 11px}

/* This command row stays with the battlefield when the reference rail is hidden. */
.duel-column .unit-command{position:relative;inset:auto;transform:none;width:100%;max-width:none;min-height:0;padding:14px 42px 14px 15px;display:none;visibility:visible;opacity:1;pointer-events:auto;flex:none;margin:0}
.duel-column .unit-command.visible{display:grid;grid-template-columns:43px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:8px 12px}
.duel-column .command-creature{grid-column:1;grid-row:1/3;width:39px;height:39px;font-size:25px}
.duel-column .command-copy{grid-column:2;grid-row:1;min-width:0;gap:5px}
.duel-column .command-copy strong{font-size:14px;white-space:normal;line-height:1.6}
.duel-column .command-copy small{font-size:12px;line-height:1.7;white-space:normal;overflow:visible;max-width:none}
.duel-column .skill-button{grid-column:3;grid-row:1/3;width:auto!important;min-width:141px;height:auto;min-height:41px;padding:9px 12px;font-size:13px}
.duel-column .skill-button span{display:inline!important;font-size:11px;margin-left:5px}
.duel-column .combo-ready{grid-column:2;grid-row:2;width:max-content;max-width:100%;height:auto;min-height:28px;padding:5px 8px;font-size:11px;line-height:1.5;white-space:normal;overflow:visible}
.duel-column .combo-ready>span{font-size:15px}
.duel-column .combo-ready:after{content:none}
.duel-column .command-close{right:9px;top:8px;font-size:24px;min-width:28px;min-height:28px}
.duel-column .unit-command:not(:has(.combo-ready)) .command-copy{grid-row:1/3}
.combo-notice{min-width:260px;max-width:94%;gap:10px;padding:10px 13px}
.combo-notice strong{font-size:12px}
.combo-notice small{font-size:10px;line-height:1.6}

.hand-area{display:flex;flex-direction:column;flex:none;gap:9px;height:auto;min-height:0;padding-top:12px;overflow:visible}
.hand-topline{height:auto;min-height:34px;gap:10px;flex-wrap:wrap}
.hand-title{gap:8px;flex-wrap:wrap;min-width:0}
.hand-title strong{font-size:15px}
.hand-count{font-size:12px}
.hand-helper{font-size:11px;margin-left:0;line-height:1.6}
.mana-track{font-size:14px;gap:6px;flex-wrap:wrap}
.mana-label{font-size:11px;display:inline}
.mana-track>b{font-size:17px}
.mana-track #manaMaximum{font-size:14px}
.mana-gem{width:21px;height:21px;font-size:13px}
.mana-orb{width:10px;height:10px}
.reinforcement-bar{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;gap:8px 12px;margin:0;padding:0}
.reinforce-button{grid-column:1;grid-row:1;min-height:39px;padding:9px 12px;font-size:12px}
.reinforce-hint{grid-column:2;grid-row:1;font-size:12px;line-height:1.7}
.reinforce-wallet{grid-column:3;grid-row:1;font-size:12px;gap:5px}
.reinforce-wallet strong{font-size:16px}
.reinforce-wallet small{display:inline;font-size:11px}
.hand-area .hand-cards{flex:none;display:flex;align-items:stretch;height:auto;min-height:264px;max-height:none;gap:13px;padding:13px 4px 15px;overflow-x:auto;overflow-y:hidden;scrollbar-width:auto;scrollbar-color:#b8a87970 #111a1480;touch-action:pan-x pan-y}
.hand-cards .hand-card{flex:0 0 174px;width:174px;height:246px;min-height:246px;max-height:246px;border-radius:10px}
.hand-cards .hand-card .card-art{inset:5px 5px 43%}
.hand-cards .hand-card .card-content{left:9px;right:9px;bottom:11px;gap:3px}
.hand-cards .card-cost{width:32px;height:33px;font-size:16px}
.hand-cards .card-stamp{font-size:10px}
.hand-cards .card-creature{font-size:70px}
.hand-cards .card-name{font-size:15px;line-height:1.5}
.hand-cards .hand-card .card-type{font-size:11px;line-height:1.4;letter-spacing:0}
.hand-cards .card-ability{flex-direction:column;gap:2px;justify-content:center;font-size:12px;line-height:1.5;margin-top:2px}
.hand-cards .card-ability i{font-size:11px;line-height:1.4;max-width:100%}
.hand-cards .card-stats{font-size:12px;margin-top:4px}
.hand-cards .card-stats b{font-size:17px}
.hand-cards .card-stats small{font-size:11px}

.potion-bar{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px 14px;padding:12px 14px;border:1px solid #a8bf8c3d;border-radius:9px;background:linear-gradient(115deg,#a6c9870d,#10241966);font-family:var(--cn)}
.potion-stock{display:flex;align-items:center;gap:9px;color:#b7cdaa;font-size:12px;white-space:nowrap}
.potion-stock strong{color:#e0efcb;font-size:17px;margin:0 2px;font-variant-numeric:tabular-nums}
.potion-bottle{display:grid;place-items:center;flex:none;width:28px;height:33px;border:1px solid #a7d5a17d;border-radius:7px 7px 9px 9px;background:linear-gradient(150deg,#abd58b30,#4e995221);color:#d8f4c2;box-shadow:inset 0 0 0 3px #c6e9b207;font-size:22px;line-height:1}
.potion-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.potion-buy,.potion-use,.potion-cancel{min-height:38px;padding:8px 11px;border:1px solid #adc78c66;border-radius:6px;background:#95ba6f15;color:#d1e3ba;font:500 12px/1.5 var(--cn);cursor:pointer;white-space:nowrap}
.potion-buy{border-color:#ccba7573;background:#c3ab5d13;color:#e3d5a6}
.potion-cancel{border-color:#b4c2922c;background:transparent;color:#acb698}
.potion-use:not(:disabled):hover{border-color:#c2e2ac;background:#9cc5772f;box-shadow:0 0 13px #b1db7d15}
.potion-buy:not(:disabled):hover{border-color:#e1ce8a;background:#c3ab5d29}
.potion-buy:disabled,.potion-use:disabled{opacity:.48;cursor:not-allowed}
.potion-hint{grid-column:1/-1;min-width:0;margin:0;color:#a8b59d;font-size:12px;line-height:1.75}
.shop-potion-section{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin:0 0 25px;padding:18px;border:1px solid #aac68a4d;border-radius:11px;background:radial-gradient(ellipse at 10% 0%,#99c6801b,transparent 75%),#0c1a1266}
.shop-potion-icon{width:39px;height:46px;font-size:30px}
.shop-potion-copy{flex:1;min-width:190px}
.shop-potion-copy h3{margin:0 0 5px;font-size:15px;font-weight:500;color:#d8e7c7}
.shop-potion-copy p{margin:3px 0;font-size:12px;line-height:1.8;color:#b0bfa1}
.shop-potion-copy strong{font-size:15px;color:#e1efcd}
.unit.heal-target{border-color:#c4f1ad;box-shadow:0 0 0 2px #b4e88a48,0 0 21px #a4e78c66;animation:heal-target-glow 1.5s ease-in-out infinite}
.unit.heal-target:before{border-color:#c0efaa;box-shadow:0 0 10px #c0efaa38}
.fx-heal-amount{color:#d8ffc1;text-shadow:0 2px 5px #112d12,0 0 15px #9ff590}
.fx-heal-caption{color:#e1ffca;border-color:#b4e99d99;background:#16371eee;box-shadow:0 0 18px #96e18b42,0 3px 12px #0009}
@keyframes heal-target-glow{50%{box-shadow:0 0 0 3px #b4e88a25,0 0 28px #a4e78c91}}

.right-rail{display:flex;flex-direction:column;align-items:stretch;gap:15px;height:auto;min-height:0;overflow:visible}
.opponent-panel,.guide-panel{padding:17px}
.panel-label{font-size:11px;letter-spacing:1px}
.opponent-heading strong{font-size:15px}
.opponent-heading>div:nth-child(2)>span{font-size:12px;line-height:1.6}
.opponent-meta{font-size:12px;gap:8px}
.opponent-meta span,.opponent-meta b{font-size:12px}
.match-progress-head{font-size:12px}
.guide-heading h2{font-size:17px;line-height:1.6}
.guide-step{grid-template-columns:21px 27px minmax(0,1fr);gap:9px;padding:12px 0}
.step-number{font-size:11px}
.step-icon{width:27px;height:27px;font-size:16px}
.guide-panel .guide-step>div strong{font-size:13px;line-height:1.7}
.guide-step p{font-size:12px;line-height:1.8;margin-top:3px}
.guide-tip{font-size:12px;line-height:1.8;padding:10px}
.potion-step-icon{color:#c6e6ad;border-color:#abcb8966;background:#88b86b17}
.log-panel{flex:none;min-height:0;max-height:none;height:auto;padding:17px;overflow:visible}
.battle-log{min-height:0;max-height:none;height:auto;overflow:visible;padding-right:0}
.log-heading button{font-size:12px;min-height:32px}
.log-entry{padding:9px 0;gap:9px}
.log-copy{font-size:12px;line-height:1.8;overflow-wrap:anywhere}
.log-round,.log-icon{font-size:11px}
.right-footer{font-size:11px;line-height:1.8}
.bottom-turn-bar{left:var(--left-rail-width);height:auto;min-height:57px;gap:12px;padding:10px 24px max(10px,env(safe-area-inset-bottom));background:#121e16f5;backdrop-filter:blur(10px)}
.turn-owner{font-size:12px;gap:8px;white-space:nowrap}
.turn-footer-hint{font-size:12px;line-height:1.6}
.end-turn-button{height:auto;min-height:38px;padding:8px 16px;font-size:13px;white-space:nowrap}
.toast{font-size:13px;line-height:1.7;max-width:calc(100vw - 28px);white-space:normal;text-align:center}

/* Preserve a single scrollable surface inside each modal. */
.modal,.result-card,.difficulty-dialog,.stage-dialog,.shop-dialog,.pvp-dialog,.auth-dialog,.resume-dialog,.reinforce-dialog{max-height:calc(100dvh - 28px);overflow-y:auto;scrollbar-width:auto;scrollbar-color:#ad9b6580 #111b1444}
.collection-grid{max-height:none;overflow:visible;gap:8px 15px}
.modal-body{font-size:14px;line-height:1.9}
.collection-entry{padding:9px 3px;flex-wrap:wrap}
.collection-entry b{font-size:13px}
.collection-entry small{font-size:11px;white-space:normal;line-height:1.7}
.collection-entry>em{font-size:11px}
.guide-combo-line{font-size:13px}
.modal-primary,.result-secondary{height:auto;min-height:42px;font-size:13px;line-height:1.6;padding:10px 13px}
.difficulty-dialog .difficulty-eyebrow,.stage-eyebrow,.shop-eyebrow,.pvp-eyebrow,.auth-eyebrow{font-size:10px;letter-spacing:1.2px}
.difficulty-intro,.difficulty-option{font-size:13px;line-height:1.8}
.difficulty-option-head strong{font-size:15px}
.difficulty-option-head em{font-size:11px}
.first-game-guide>strong{font-size:13px}
.first-game-guide ol,.first-game-reinforce{font-size:12px;line-height:1.9}
.first-game-reinforce small{font-size:11px}
.journey-mode-choice strong{font-size:13px}
.journey-mode-choice small{font-size:11px}
.difficulty-actions{flex-wrap:wrap}
.difficulty-actions .modal-primary,.difficulty-actions .result-secondary{height:auto;min-height:44px;font-size:13px}
.stage-heading p,.stage-mode-badge small,.stage-map-caption,.stage-legend{font-size:12px}
.stage-node strong{font-size:13px}
.stage-node small,.stage-number{font-size:11px}
.stage-detail-main>p,.stage-opponent,.stage-stats,.stage-tip p,.stage-footer>p,.stage-reward small{font-size:12px;line-height:1.8}
.stage-detail-eyebrow{font-size:11px}
.stage-actions .result-secondary,.stage-actions .modal-primary{font-size:13px;height:auto;min-height:43px}
.stage-node{min-height:145px}
.stage-legend{flex-wrap:wrap}
.result-card p,.result-reward,.result-coins small{font-size:13px;line-height:1.8}
.shop-heading p,.shop-wallet-banner>p,.shop-wallet-banner>div:nth-child(2)>span,.shop-notice,.shop-loadout-hint,.shop-section-heading>span,.shop-slot-copy small,.shop-rules p,.shop-rules small{font-size:12px;line-height:1.8}
.shop-section-heading h3,.shop-slot-copy strong{font-size:14px}
.shop-remove,.shop-rarity,.shop-kind,.shop-stats>span,.shop-combo{font-size:12px}
.shop-stats b{font-size:15px}
.shop-move{font-size:13px;flex-wrap:wrap}
.shop-card-actions>button{min-height:42px;font-size:13px;line-height:1.7}
.shop-rules strong{font-size:13px}
.shop-slot{flex-wrap:wrap}
.pvp-header p,.pvp-lobby-intro p,.pvp-login-button small,.pvp-action-card>p,.pvp-player-copy small,.pvp-room-status,.pvp-message{font-size:12px;line-height:1.8}
.pvp-login-button strong,.pvp-player-copy strong,.pvp-player-role{font-size:13px}
.pvp-action-eyebrow,.pvp-player-ready,.pvp-room-capacity,.pvp-steps,.pvp-steps b{font-size:11px}
.pvp-steps{flex-wrap:wrap}
.pvp-dialog .modal-primary,.pvp-header .pvp-close,.pvp-room-actions .pvp-leave{height:auto;min-height:42px;font-size:13px}
.pvp-room-code-card p,.pvp-room-code-heading,.pvp-refresh{font-size:12px}
.auth-intro,.auth-field,.auth-field input,.auth-message,.auth-form-note,.auth-import small,.account-cloud-note p,.auth-privacy,.resume-dialog p{font-size:13px;line-height:1.8}
.auth-rules strong,.auth-rules p,.auth-close,.auth-password-wrap>button,.auth-field input::placeholder{font-size:12px;line-height:1.8}
.auth-import strong{font-size:13px}
.auth-tabs>button,.auth-submit,.account-logout{font-size:14px}
.auth-dialog .auth-submit,.resume-dialog .auth-submit{font-size:14px}
.account-logout{font-size:13px!important;min-height:42px}
.auth-field input{min-height:45px}
.account-save-details span,.account-save-details strong{font-size:13px}
.account-entry-note,.account-entry-note button,.stage-account-link{font-size:12px;line-height:1.8}
.reinforce-added,#reinforceCopy,.reinforce-reveal-note{font-size:12px;line-height:1.8}
.reinforce-dialog .reinforce-close{height:auto;min-height:43px;font-size:13px}
.reinforce-reveal-eyebrow{font-size:9px}
.reinforce-card{width:194px;min-height:270px}
.reinforce-card .hand-card{width:194px;height:270px;min-height:270px}
.reinforce-card .hand-card .card-name{font-size:17px}
.reinforce-card .hand-card .card-type{font-size:11px}
.reinforce-card .hand-card .card-ability{font-size:12px;flex-direction:column;line-height:1.5;gap:2px}
.reinforce-card .hand-card .card-ability i{font-size:11px}
.reinforce-card .hand-card .card-stats b{font-size:18px}
.reinforce-card .hand-card .card-stats small{font-size:11px}
.reinforce-reveal-stage{min-height:298px}

.left-rail-collapsed{--left-rail-width:66px}
.left-rail-collapsed .sidebar{padding:21px 8px}
.left-rail-collapsed .brand{justify-content:center;padding:0;margin-bottom:28px}
.left-rail-collapsed .brand-copy,.left-rail-collapsed .side-caption,.left-rail-collapsed .nav-item>span:not(.nav-icon),.left-rail-collapsed .sidebar-divider,.left-rail-collapsed .record-card,.left-rail-collapsed .season-chip,.left-rail-collapsed .player-mini>div:nth-child(2),.left-rail-collapsed .more-icon{display:none}
.left-rail-collapsed .nav-item{justify-content:center;padding:0}
.left-rail-collapsed .nav-item.active:before{left:-8px}
.left-rail-collapsed .player-mini{justify-content:center;padding:12px 0}
.right-rail-collapsed .game-layout{grid-template-columns:minmax(0,1fr)}

@media(max-width:1180px){
 .game-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px;padding-left:18px;padding-right:18px}
 .topbar,.workspace-controls{padding-left:18px;padding-right:18px}
 .reinforcement-bar{grid-template-columns:minmax(0,1fr) auto}
 .reinforce-button{grid-column:1;grid-row:1;justify-self:start}
 .reinforce-wallet{grid-column:2;grid-row:1}
 .reinforce-hint{grid-column:1/-1;grid-row:2}
 .potion-bar{grid-template-columns:minmax(0,1fr)}
 .potion-actions{justify-content:flex-start}
 .turn-footer-hint{display:none}
}
@media(max-width:1100px){
 .game-layout{grid-template-columns:minmax(0,1fr)}
 .right-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:15px}
 .right-rail .opponent-panel,.right-rail .right-footer{grid-column:1/-1}
 .battlefield{height:620px;min-height:620px}
 .hand-helper{display:none}
}
@media(max-width:940px){
 .sidebar{position:sticky;left:auto;top:0;width:auto;height:auto;min-height:100dvh}
 html:not(.left-rail-collapsed) .sidebar{padding:23px 14px 20px}
 html:not(.left-rail-collapsed) .sidebar .brand{justify-content:flex-start;padding:0 5px;margin-bottom:30px}
 html:not(.left-rail-collapsed) .brand-copy,html:not(.left-rail-collapsed) .player-mini>div:nth-child(2){display:grid}
 html:not(.left-rail-collapsed) .side-caption,html:not(.left-rail-collapsed) .nav-item>span:not(.nav-icon),html:not(.left-rail-collapsed) .sidebar-divider,html:not(.left-rail-collapsed) .more-icon{display:block}
 html:not(.left-rail-collapsed) .record-card,html:not(.left-rail-collapsed) .season-chip{display:flex}
 html:not(.left-rail-collapsed) .nav-item{justify-content:flex-start;padding:0 12px}
 html:not(.left-rail-collapsed) .player-mini{justify-content:flex-start}
 .duel-column{height:auto;min-height:0}
 .battle-toolbar h1{font-size:20px}
 .main-area{height:auto;min-height:100vh}
 .board-slots{grid-template-columns:repeat(5,minmax(0,105px))}
 .hero-card{height:67px;width:246px}
 .unit{height:120px;min-height:120px;max-height:120px}
 .hand-area{overflow:visible}
 .right-rail .guide-panel,.right-rail .log-panel{min-height:0;max-height:none}
 .bottom-turn-bar{left:var(--left-rail-width);min-height:57px}
 .page-shortcuts>button{padding:6px}
}
@media(max-width:760px){
 .duel-column .unit-command.visible{grid-template-columns:35px minmax(0,1fr);grid-template-rows:auto auto auto;padding:13px 37px 13px 13px;gap:8px 10px}
 .duel-column .command-creature{grid-column:1;grid-row:1;width:33px;height:33px}
 .duel-column .command-copy,.duel-column .unit-command:not(:has(.combo-ready)) .command-copy{grid-column:2;grid-row:1}
 .duel-column .combo-ready{grid-column:1/-1;grid-row:2}
 .duel-column .skill-button{grid-column:1/-1!important;grid-row:3;width:100%!important;min-height:41px;font-size:13px}
 .duel-column .command-copy strong{font-size:13px}
 .right-rail{grid-template-columns:minmax(0,1fr)}
 .right-rail>*{grid-column:1/-1}
 .board-slots{gap:5px}
 .unit{height:116px;min-height:116px;max-height:116px}
 .unit-art{width:46px;height:46px;font-size:30px}
 .potion-actions{gap:7px}
 .topbar{gap:9px;padding-top:12px;padding-bottom:12px}
 .topbar .top-actions{gap:9px}
 .match-pill{display:none}
 .shop-potion-section{padding:15px;gap:12px}
}
@media(max-width:640px){
 :root{--left-rail-width:0px;--jump-offset:109px}
 .app-shell{display:block}
 .main-area{display:flex;min-height:100vh;width:100%}
 .sidebar,html:not(.left-rail-collapsed) .sidebar{position:relative;top:auto;width:100%;height:auto;min-height:0;padding:14px 14px 12px;border-right:0;border-bottom:1px solid #c9be7929}
 .sidebar .brand{margin-bottom:15px}
 .sidebar .side-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 9px}
 .sidebar .brand-copy{display:grid}
 .sidebar .side-bottom{margin-top:17px}
 .sidebar .sidebar-divider,.sidebar .record-card,.sidebar .season-chip,.sidebar .player-mini,.sidebar .side-caption{display:none!important}
 .left-rail-collapsed .sidebar{padding:7px 12px}
 .left-rail-collapsed .sidebar .brand,.left-rail-collapsed .sidebar .side-bottom{display:none}
 .left-rail-collapsed .sidebar .side-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .left-rail-collapsed .sidebar .nav-item{height:40px}
 .left-rail-collapsed .sidebar .nav-item.active:before{left:20%;right:20%;top:auto;bottom:0;width:60%;height:2px}
 .topbar{padding:12px 14px;min-height:0;gap:7px}
 .breadcrumbs{font-size:12px}
 .topbar .top-actions{width:100%;justify-content:flex-start;gap:8px;padding:0}
 .top-actions .account-button{margin-left:auto;padding-left:9px;min-height:36px}
 .top-actions .account-button .account-button-copy{display:grid}
 .account-button-copy strong{font-size:12px}
 .account-button-copy small{font-size:10px}
 .auth-field input{font-size:16px}
 .wallet-button{height:auto;min-height:35px;padding:5px 9px;gap:5px}
 .wallet-label{display:inline;font-size:11px}
 .wallet-button strong{font-size:14px}
 .workspace-controls{gap:4px 8px;padding:7px 12px}
 .layout-toggles{gap:7px}
 .layout-toggle{min-height:34px;padding:5px 9px;font-size:12px}
 .page-shortcuts{gap:3px}
 .page-shortcuts>button{min-height:32px;font-size:12px;padding:5px 7px}
 .game-layout{padding:15px 12px 103px;gap:18px}
 .duel-column{height:auto;min-height:0;gap:13px}
 .battle-toolbar{gap:8px;min-height:0}
 .battle-toolbar h1{font-size:19px}
 .battle-toolbar>div:first-child{width:100%;padding:0}
 .toolbar-right{gap:4px;width:100%;justify-content:flex-start}
 .subtle-button,.difficulty-trigger span:last-child,.toolbar-right .pvp-toolbar-button{font-size:12px;padding:5px 7px;min-height:33px}
 .round-badge{font-size:12px;margin-left:auto;height:31px}
 .eyebrow{font-size:9px;letter-spacing:.8px}
 .battlefield{height:600px;min-height:600px}
 .battle-hud{top:12px;left:10px;right:10px;gap:6px}
 .turn-label{font-size:12px;line-height:1.5;gap:5px}
 .turn-label #turnHint{font-size:11px}
 .turn-progress{width:45px;margin-top:8px}
 .pvp-battle-status{font-size:10px;max-width:52%;padding:4px 5px}
 .player-zone{left:3%;right:3%;height:37%}
 .enemy-zone{top:9%}.friendly-zone{bottom:9%}
 .hero-card{width:246px;height:65px;padding:7px 9px;gap:8px}
 .hero-portrait{width:36px;height:36px;font-size:22px}
 .hero-info strong{font-size:12px}.hero-info span{font-size:11px}
 .hero-health b{font-size:18px}
 .hero-footer{font-size:10px;line-height:1.5}
 .enemy-zone .board-slots{inset:76px 0 33px}
 .friendly-zone .board-slots{inset:26px 0 76px}
 .board-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
 .unit{height:110px;min-height:110px;max-height:110px;padding:5px 2px 8px}
 .unit-art{width:42px;height:42px;font-size:29px}
 .unit-name{font-size:12px;line-height:1.6}
 .unit-move{font-size:10px;line-height:1.5;max-width:100%}
 .stat-gem,.stat-heart{height:23px;min-width:23px;font-size:13px}
 .unit-taunt{font-size:10px;right:3px;top:3px}
 .center-ribbon{height:27px;font-size:10px;padding:0 9px;gap:5px}
 .board-instruction{font-size:11px;line-height:1.5;max-width:95%;bottom:8px;padding:5px 8px}
 .hand-topline{min-height:32px;gap:8px}
 .hand-title strong{font-size:15px}
 .hand-count{font-size:12px}
 .mana-track{gap:5px}.mana-orbs{margin-left:2px;gap:3px}.mana-orb{width:9px;height:9px}
 .mana-label{font-size:11px}
 .reinforce-button{font-size:12px;min-height:40px;padding:8px 11px}
 .reinforce-hint{font-size:12px;line-height:1.8}
 .reinforce-wallet strong{font-size:16px}
 .reinforce-wallet small{display:inline;font-size:11px}
 .potion-bar{padding:12px;gap:8px}
 .potion-actions{gap:7px;justify-content:flex-start}
 .potion-buy,.potion-use,.potion-cancel{min-height:39px;padding:8px 10px;font-size:12px}
 .potion-hint{font-size:12px}
 .hand-area .hand-cards{gap:11px;min-height:260px;padding-top:12px}
 .hand-cards .hand-card{flex-basis:166px;width:166px;height:242px;min-height:242px;max-height:242px}
 .hand-cards .card-name{font-size:15px}
 .hand-cards .hand-card .card-type{font-size:11px}
 .hand-cards .card-ability{font-size:12px}.hand-cards .card-ability i{font-size:11px}
 .hand-cards .card-stats small{font-size:10px}
 .bottom-turn-bar{left:0;min-height:60px;padding:9px 13px max(9px,env(safe-area-inset-bottom));gap:7px}
 .turn-owner{font-size:11px;gap:6px}
 .turn-owner .mini-avatar{width:25px;height:25px;font-size:15px}
 .end-turn-button{min-height:39px;font-size:13px;padding:8px 12px}
 .toast{bottom:78px;font-size:13px}
 .opponent-panel,.guide-panel,.log-panel{padding:16px}
 .guide-step{padding:12px 0}.guide-step p,.log-copy{font-size:12px}
 .shop-potion-copy{min-width:160px}
 .shop-potion-section>.potion-buy{width:100%}
 .stage-node{min-height:118px}
 .stage-node strong{font-size:13px}.stage-node small{font-size:11px}
 .stage-legend{font-size:11px}
 .stage-header,.stage-map-caption{flex-wrap:wrap}
 .shop-section-heading{align-items:flex-start;flex-wrap:wrap;gap:5px}
 .first-game-guide ol,.first-game-reinforce{font-size:12px}
 .first-game-reinforce small{font-size:11px}
 .reinforce-reveal-eyebrow{font-size:8px;letter-spacing:.7px}
}
@media(max-width:380px){
 .game-layout{padding-left:9px;padding-right:9px}
 .workspace-controls{padding-left:9px;padding-right:9px}
 .page-shortcuts{width:100%;justify-content:space-between}
 .page-shortcuts>button{flex:1}
 .board-slots{gap:3px}
 .unit-art{width:37px;height:37px}
 .unit-name{font-size:11px}
 .mana-label{display:none}
 .turn-owner .mini-avatar,.turn-owner .bar-dot{display:none}
 .potion-actions .potion-buy{flex:1}
 .potion-actions .potion-use{flex:1}
}
@media(prefers-reduced-motion:reduce){.unit.heal-target{animation:none}}

/* Later chapters, trainer medicine, and an explicit two-player rematch. */
.stage-chapter-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 17px}
.stage-chapter-nav:empty{display:none}
.stage-chapter-nav>button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;min-height:62px;padding:11px 14px;border:1px solid #bac68a38;border-radius:9px;background:#12201691;color:#b6c4a7;text-align:left;font:500 13px/1.6 var(--cn);cursor:pointer;transition:border-color .18s,background .18s}
.stage-chapter-nav>button strong,.stage-chapter-nav>button b{font-size:14px;font-weight:600}
.stage-chapter-nav>button small,.stage-chapter-nav>button span{font-size:12px;line-height:1.6;color:#94a683}
.stage-chapter-nav>button:hover{border-color:#cfba7699;background:#a7ad5b15}
.stage-chapter-nav>button.active,.stage-chapter-nav>button.selected,.stage-chapter-nav>button[aria-pressed="true"]{border-color:#e0c985;background:linear-gradient(115deg,#bda25128,#a1b46c10);box-shadow:inset 3px 0 #e0c985;color:#f0e2b2}
.stage-chapter-nav>button[aria-pressed="true"] :is(small,span),.stage-chapter-nav>button.active :is(small,span){color:#cec398}
.trainer-potion-bar,.shop-trainer-potion{border-color:#c4b3b04d;background:linear-gradient(120deg,#d3a5c10c,#758fc510,#10201980)}
.trainer-potion-bottle{border-color:#ddb4c58c;background:linear-gradient(145deg,#e2aabd39,#8b739b25);color:#f1c7d5;box-shadow:inset 0 0 0 3px #ecc5da09}
.trainer-potion-bar .potion-stock{color:#d2bccb}
.trainer-potion-bar .potion-stock strong,.shop-trainer-potion .shop-potion-copy strong{color:#f1d5e2}
.trainer-potion-bar .potion-use{border-color:#c6aac177;background:#ba8eb717;color:#e5c9de}
.trainer-potion-bar .potion-use:not(:disabled):hover{border-color:#e9c4df;background:#bc96b832}
.shop-card.shop-top-tier{border-color:#d9b3d0b8;background:radial-gradient(ellipse at 15% 0%,#dba9d52c,transparent 55%),radial-gradient(ellipse at 95% 80%,#d4b75d20,transparent 65%),linear-gradient(150deg,#293127,#1d2321 90%);box-shadow:0 0 0 1px #e6c18c13,0 7px 22px #0004}
.shop-card.shop-top-tier:before{border-color:#e6c0dd38}
.shop-card.shop-top-tier:hover{border-color:#f0d6ea;box-shadow:0 0 25px #d8b1d329,0 8px 25px #0005}
.shop-top-tier .shop-rarity{color:#f4d0e8;font-weight:600;letter-spacing:1px}
.shop-top-tier .shop-price{color:#f1d69a}
.shop-top-tier h3{color:#f4dfe9}
.pvp-supply-copy{display:block;margin-top:7px;color:#94a38b;font-size:12px;line-height:1.8}
.pvp-balance-notice{display:flex;align-items:flex-start;gap:8px;margin:0 0 18px;padding:12px 14px;border:1px solid #c8b4734d;border-radius:8px;background:#c2a3480c;color:#d2c59a;font-size:12px;line-height:1.85;overflow-wrap:anywhere}
.pvp-balance-notice:before{content:'◈';flex:none;padding-top:1px;color:#e0c581;font-size:17px;line-height:1.3}
.pvp-balance-notice[data-state="short"]{border-color:#c799724f;background:#b7824012;color:#e3bea0}
.pvp-settlement{display:flex;align-items:center;justify-content:space-between;gap:19px;margin:16px 0 13px;padding:18px;border:1px solid #bdc58b3f;border-radius:11px;background:radial-gradient(ellipse at 0% 0%,#a8c47116,transparent 80%),#1122177d}
.pvp-settlement>div{flex:1;min-width:0}
.pvp-settlement-eyebrow{color:#a7b38a;font:600 10px/1.6 var(--ui);letter-spacing:1.5px}
.pvp-settlement h3{margin:6px 0;color:#e7dfba;font-size:16px;font-weight:500;line-height:1.6}
.pvp-settlement p{margin:0;color:#aeba9e;font-size:12px;line-height:1.85}
#pvpSettlementAmount{flex:none;color:#ced9b9;font:600 24px/1.5 var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap}
#pvpSettlementAmount[data-tone="positive"]{color:#d9e8a8}
#pvpSettlementAmount[data-tone="negative"]{color:#e8b399}
.pvp-rematch-progress{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin:14px 0;padding:12px;border:1px dashed #bac38a40;border-radius:8px;background:#0c1a1266;color:#92a486;font-size:12px;line-height:1.6}
.pvp-rematch-progress>span{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid #a9bc8625;border-radius:20px;white-space:nowrap}
.pvp-rematch-progress>span.confirmed{border-color:#b7d88b69;background:#a9c87714;color:#d2e8ac}
.pvp-rematch-progress i{font-size:15px;font-style:normal}
.pvp-rematch-progress>b{font-size:12px;font-weight:400;color:#708266}
.pvp-player.rematch-ready{border-color:#b4d28c75;background:linear-gradient(125deg,#a9c27317,#10261978)}
.pvp-player.rematch-ready .pvp-player-ready{color:#d1e6a5;border-color:#b1ce8466;background:#a5c17113}
.pvp-room-actions{flex-wrap:wrap;align-items:stretch}
.pvp-room-actions .modal-primary{flex:1 1 210px;width:auto;min-height:44px}
.pvp-room-actions .pvp-leave{flex:1 0 100%;height:auto;min-height:39px}
.pvp-room-actions .pvp-rematch-button,.result-card .pvp-rematch-button{border-color:#d6c18098;background:linear-gradient(115deg,#b8a35532,#94ac5c25);color:#efe0ad}
.pvp-room-actions .pvp-rematch-button:disabled,.result-card .pvp-rematch-button:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}
.result-card .rematch-status{margin:16px 0 0;padding:11px 12px;border:1px dashed #b8c58d47;border-radius:7px;background:#a4bc7310;color:#beceac;font-size:12px;line-height:1.8}
.result-card .pvp-result-lobby{width:100%;min-height:41px;margin-top:8px;font-size:13px}
@media(max-width:640px){
 .stage-chapter-nav{gap:8px;margin-bottom:14px}
 .stage-chapter-nav>button{padding:10px 11px;min-height:62px;font-size:13px}
 .stage-chapter-nav>button :is(small,span){font-size:11px}
 .trainer-potion-bar .potion-actions>.potion-buy{flex:1 1 180px}
 .trainer-potion-bar .potion-actions>.potion-use{flex:1 1 160px}
 .pvp-settlement{align-items:flex-start;flex-direction:column;gap:9px;padding:15px}
 #pvpSettlementAmount{font-size:25px}
 .pvp-balance-notice{font-size:12px;padding:11px 12px}
 .pvp-rematch-progress{gap:7px;padding:10px 7px}
 .pvp-room-actions .modal-primary{flex:1 0 100%;width:100%}
 .pvp-rematch-progress>span{font-size:12px;padding:5px 8px}
}
@media(prefers-reduced-motion:reduce){.stage-chapter-nav>button{transition:none}}