/* Compact shield cards, with a scrollable menu independent of battlefield sizing. */
body[data-screen=play]{overflow-x:hidden;overflow-y:auto}
body[data-screen=play] main{height:auto;min-height:calc(var(--app-height,100dvh) - 90px);overflow:visible}
body[data-screen=play] .game-lobby{min-height:calc(var(--app-height,100dvh) - 90px);height:auto;justify-content:flex-end;padding-bottom:28px;overflow:visible}
body[data-screen=play] .footer{display:none}
.battle-menu.classic-menu{width:min(1120px,calc(100% - 96px))!important;margin:auto auto 0;padding-top:110px}
.classic-menu .mode-heading h1{font:400 25px/1.2 var(--heading);margin:0;color:#fff0c7;text-shadow:0 2px #173e4c}
.classic-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;align-items:stretch}
.classic-menu .game-mode-card.classic-card{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto 1fr auto;align-content:stretch;gap:12px 13px;padding:28px 17px 17px;min-height:210px;border-radius:13px;border-width:1px 1px 5px;transition:transform .18s,box-shadow .18s}
.classic-menu .classic-card:hover{transform:translateY(-3px);box-shadow:0 9px 20px #032c4566,inset 0 1px #e2fff544}
.classic-menu .classic-ffa{background:linear-gradient(120deg,#556456f5,#284956f5);border-color:#f3cd76;border-bottom-color:#edc467}
.classic-menu .classic-practice{background:linear-gradient(120deg,#326a60f7,#174656fa);border-color:#9ec2ac;border-bottom-color:#2d695e}
.classic-menu .classic-card .mode-badge{top:9px;right:10px;font:800 8px/1.1 var(--font);letter-spacing:.2px;padding:4px 6px}
.classic-menu .classic-card .mode-emblem{grid-row:1;grid-column:1;margin:6px 0 0;width:46px;height:54px;border-radius:9px 9px 16px 16px}
.classic-menu .classic-card .classic-title{grid-column:2;min-width:0;padding-top:8px}
.classic-menu .classic-card h3{font:400 26px/1.05 var(--heading);margin:0 0 6px;letter-spacing:0}
.classic-menu .classic-card p{display:block;min-height:0;font:600 11px/1.4 var(--font);margin:0;color:#e0ebe0}
.classic-tiers{grid-column:1/-1;display:flex;gap:7px;align-self:center}
.classic-tiers button{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;padding:7px 4px;color:#f9edc8;border:1px solid #9fb4af;border-bottom:3px solid #123a46;border-radius:7px;background:#143c4bbf;transition:background .15s,transform .15s}
.classic-tiers button strong{font-size:18px;line-height:1}.classic-tiers button span{font-size:9px}.classic-tiers button small{font-size:10px;width:100%;line-height:1;color:#c4d7d5}
.classic-tiers button[aria-pressed=true]{background:#f3d07c;border-color:#ffedba;border-bottom-color:#af8539;color:#493a20}.classic-tiers button[aria-pressed=true] small{color:#6e5429}.classic-tiers button:hover{transform:translateY(-1px);filter:brightness(1.08)}
.classic-menu .classic-card .game-card-action{grid-column:1/-1;grid-row:3;margin:0;gap:10px;align-self:end;flex-wrap:nowrap}
.classic-menu .classic-card .game-card-action button{width:auto;min-width:0;min-height:42px;margin:0;font:800 12px var(--font);padding:10px 12px;gap:7px;border-radius:7px;white-space:nowrap}
.classic-entry{font:800 12px/1.5 var(--font);color:#fff2cd}.classic-entry small{display:block;color:#cbdcd2;font:600 10px/1.3 var(--font)}
.classic-menu .classic-practice .game-card-action{flex-wrap:wrap}.classic-menu .classic-practice .game-card-action button{flex:1}
.classic-menu-footer{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.classic-menu-footer .secondary{background:linear-gradient(#365f6a,#1c4456);min-height:42px;padding:9px 16px;font-size:12px}.classic-menu-footer svg{width:17px;height:17px}.classic-menu-footer .ghost{font-size:11px}
.account-session-actions{display:flex;gap:12px;border-top:1px solid #ffffff24;padding-top:20px;margin-top:24px;flex-wrap:wrap}.account-session-actions button{min-width:115px}
.account-identity{display:flex;align-items:center;gap:15px}.account-identity h2{margin:0}.account-details .selectable{overflow-wrap:anywhere}
@media(max-width:900px){.battle-menu.classic-menu{width:calc(100% - 50px)!important}.classic-cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:680px){
 body[data-screen=play] main{min-height:calc(var(--app-height,100dvh) - 77px)}
 body[data-screen=play] .game-lobby{min-height:calc(var(--app-height,100dvh) - 77px);height:auto;display:flex;gap:12px;padding:0 14px calc(100px + var(--app-safe-bottom, env(safe-area-inset-bottom)));justify-content:flex-start}
 .game-lobby .lobby-side-buttons{position:static;display:flex;flex-direction:row;align-self:stretch;justify-content:flex-end;gap:8px;margin:0 0 2px}
 .lobby-side-buttons .round-game-button{height:38px;width:auto;min-width:78px;flex-direction:row;gap:6px;padding:6px 9px;border-radius:8px}.lobby-side-buttons .round-game-button svg{height:15px;width:15px}.lobby-side-buttons .round-game-button span{font-size:10px}
 .battle-menu.classic-menu{width:100%!important;padding:0!important;margin:0!important}
 .classic-menu .mode-heading{margin-bottom:10px}.classic-menu .mode-heading h1{font-size:23px}
 .classic-cards{grid-template-columns:1fr;gap:12px}
 .classic-menu .game-mode-card.classic-card{min-height:0;padding:24px 14px 13px;grid-template-columns:40px minmax(0,1fr);gap:10px 12px;grid-template-rows:auto auto}
 .classic-menu .classic-card .mode-emblem{width:39px;height:46px;margin:0}.classic-menu .classic-card .mode-emblem svg{width:25px;height:25px}
 .classic-menu .classic-card .classic-title{padding-top:1px}.classic-menu .classic-card h3{font-size:25px;margin:0 0 5px}
 .classic-menu .classic-card p{font-size:11px;min-height:0}
 .classic-menu .classic-card .game-card-action{grid-row:auto;flex-wrap:nowrap}.classic-menu .classic-card .game-card-action button{min-height:44px;padding:9px 13px;font-size:12px}
 .classic-tiers button{min-height:44px;flex-wrap:nowrap}.classic-tiers button small{width:auto;margin-left:4px}.classic-tiers button span{font-size:9px}
 .classic-menu .classic-card:hover{transform:none}
 .classic-menu-footer{margin-top:14px;gap:8px}.classic-menu-footer .secondary{min-height:44px}
 .account-session-actions button{flex:1;min-height:44px}
}
@media(prefers-reduced-motion:reduce){.classic-menu .classic-card,.classic-tiers button{transition:none}}

/* Keep the outline continuous: depth belongs outside the rounded face. */
body :is(.secondary,.game-card-action button.soon,.round-game-button){
 border:1px solid #94b7c4;border-radius:9px;
 background:linear-gradient(160deg,#426d80,#254d65);background-clip:border-box;
 box-shadow:0 3px 0 #0e2d40,0 4px 0 1px #64899766,inset 0 1px #d2ebec29;
 color:#f0f4e6;text-shadow:none;
}
body .classic-tiers button:not([aria-pressed=true]){
 border:1px solid #86a6b1;background:#234957;
 box-shadow:0 3px 0 #10313e,inset 0 1px #cee5e319;
}
.classic-menu .game-mode-card.classic-card{overflow:visible}
.classic-menu .classic-card:after{border-radius:inherit}
.classic-menu .classic-card .game-card-action{padding-bottom:5px;gap:12px}
.classic-tiers{gap:10px;padding-bottom:4px}
.team-pickers{grid-column:1/-1;display:grid;gap:9px;align-self:center}
.team-formats button{font-size:11px;gap:8px;min-height:38px}
.team-swatches{width:22px;height:15px;flex-shrink:0;border-radius:3px;background:linear-gradient(90deg,#e67d70 50%,#6b9dde 50%);border:1px solid #d4e2df88}
.team-swatches.squad{background:linear-gradient(90deg,#e67d70 25%,#6b9dde 25% 50%,#ecf0dd 50% 75%,#303944 75%)}
.public-entry-buttons button{min-height:74px;grid-template-rows:1fr}.public-entry-buttons .entry-token{grid-row:1}
.classic-menu-footer{gap:14px;padding:5px 4px 7px}
.action-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-bottom:5px}
.wallet-actions,.admin-section-links,.admin-save-actions{flex-wrap:wrap;gap:12px;padding-bottom:5px}
.account-session-actions{padding-bottom:5px}
.modal-body>button.full-width+button.full-width{margin-top:12px}
.modal-body>input+label{margin-top:16px}
.modal-body>input+button{margin-top:16px;margin-bottom:16px}
.modal-body>button:last-child{margin-bottom:5px}
.account-details>button+p{margin-top:18px}
@media(hover:hover) and (pointer:fine){
 body :is(.secondary,.game-card-action button.soon,.round-game-button):not(:disabled):hover{
  border-color:#d0e8ed;background:linear-gradient(160deg,#527f91,#315e75);
  box-shadow:0 4px 0 #0e2d40,0 5px 0 1px #86a9b377,0 9px 15px #061f3638,inset 0 1px #e4f9f333;
 }
 .classic-menu .classic-card:hover{transform:none;translate:0 -3px}
}
body :is(.secondary,.game-card-action button.soon,.round-game-button):not(:disabled):active{
 box-shadow:0 1px 0 #0e2d40,inset 0 1px #d2ebec29;
}
.classic-tiers button{transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,translate .15s ease}
@media(prefers-reduced-motion:reduce){.classic-tiers button{transition:none}.classic-tiers button[aria-pressed=true]{animation:none}}
/* Money controls stay still on hover; only an actual selection animates. */
body .balance,body .balance:not(:disabled):hover,body .balance:not(:disabled):active,
body .classic-tiers button:not(:disabled):hover,body .public-entry-buttons button:not(:disabled):hover{
 transform:none!important;translate:none;filter:none;
}
body .topbar .balance,body .topbar .balance:hover,body .topbar .balance:active{
 background:#123344;box-shadow:inset 0 1px #c5d4c71a;transition:none;
 opacity:1;visibility:visible;transform:none;translate:none;filter:none;
}
body .topbar .balance:hover{border-color:#a3c1cb;border-bottom-color:#092235}
body .topbar .balance,body .topbar .balance *{animation:none!important;transition:none!important}
.classic-menu .classic-card:has(.classic-tiers button:hover){transform:none!important;translate:none;box-shadow:0 6px 15px #032c454f,inset 0 2px #e2fff529}
body :is(.balance,.classic-tiers button,.public-entry-buttons button,.queue-tiers button){
 opacity:1!important;animation:none!important;transform:none!important;translate:none!important;scale:1!important;filter:none!important;
 transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.classic-menu .classic-card{animation:none}
.action-row.centered{justify-content:center}
.action-row>.ghost{padding:10px 14px;min-height:44px}
.content-panel>input+label{margin-top:18px}
.content-panel>input+button,.content-panel>input+.action-row{margin-top:16px;margin-bottom:16px}
.content-panel>button+label{margin-top:22px}
.content-panel>button+p[role=status]{margin-top:14px}
@media(max-width:680px){
 .classic-menu-footer{gap:12px}.classic-cards{gap:16px}
 .classic-menu .classic-card .game-card-action{gap:12px}
 .wallet-actions>button{flex:1}.action-row>button{flex:1;min-width:120px}
 dialog input:not([type=checkbox]):not([type=range]),dialog select,.login-panel input{font-size:16px;min-height:44px}
 dialog{overscroll-behavior:contain;scroll-padding-block:20px}
 .mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:stretch;position:fixed;left:11px;right:auto;width:calc(100vw - 22px);height:64px;box-sizing:border-box;gap:3px;padding:5px;transform:none;animation:none}
 .mobile-nav button,.mobile-nav button.active{width:100%;min-width:0;min-height:48px;padding:5px 3px;border:1px solid transparent;border-bottom-width:3px;animation:none!important;transform:none!important;translate:none!important;box-sizing:border-box}
 .mobile-nav button.active{border-color:#fff4b8;border-bottom-color:#ab7431}
}

.mode-save-feedback:empty{display:none}.mode-save-feedback{font-size:12px!important;line-height:1.5!important;margin:8px 0 0!important;max-width:420px;overflow-wrap:anywhere}.mode-save-feedback[data-state=saved]{color:#b4e2bc}.mode-save-feedback[data-state=error]{color:#ffd2ac}.mode-save-feedback[data-state=saving]{color:#ffdf8e}.mode-control button:disabled{opacity:.6;cursor:wait}.admin-save-actions>span{flex:1 1 240px}
.invite-link{display:flex;gap:8px;align-items:center;margin:10px 0 6px}.invite-link input{flex:1;min-width:0}.invite-link button{flex:0 0 auto}