.phone-shell[hidden],.phone-hub-nav{display:none}.phone-dialog{color:#eef4fc;background:linear-gradient(150deg,#1d3842,#101f2e 65%);border:1px solid #7dcab76b;border-radius:22px;padding:0;width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 32px);box-shadow:0 24px 80px #0009;overflow:hidden}.phone-dialog[open]{display:flex;flex-direction:column}.phone-dialog::backdrop{background:#040b14b8;backdrop-filter:blur(4px)}.phone-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid #8edcbb24;flex-shrink:0}.phone-sheet-head h2{font-size:18px;margin:0}.phone-close,.phone-help{border:1px solid #81bfa44d;border-radius:10px;background:#203b46;color:#c9ece0;box-shadow:none;padding:10px 12px;font-size:13px;min-height:42px}.phone-sheet-caption{color:#e3c692;font-size:12px;margin:0;padding:8px 18px 0;flex-shrink:0}.phone-sheet-caption:empty{display:none}.phone-sheet-body{padding:16px 18px;overflow:auto;overscroll-behavior:contain;min-height:0}.phone-sheet-foot{padding:12px 18px 16px;display:flex;gap:10px;flex-shrink:0;border-top:1px solid #8edcbb24}.phone-sheet-foot:empty{display:none}.phone-sheet-foot button{flex:1;min-height:44px}.phone-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.phone-menu-grid button,.phone-menu-grid a{min-height:56px;display:grid;place-items:center;padding:12px;font-size:14px;text-decoration:none}.phone-menu-grid .phone-danger{color:#ffc0ae}.phone-sheet-body>.arena-panel,.phone-sheet-body>.settings,.phone-sheet-body>.history,.phone-sheet-body>details{margin:0;padding:0;border:0;box-shadow:none;background:none}.phone-sheet-body>.arena-panel>h2,.phone-sheet-body>.settings>h2,.phone-sheet-body>.history>.section-title{display:none}.phone-sheet-body details>summary{display:none}.phone-sheet-body details p,.phone-sheet-body p,.phone-sheet-body li{font-size:13px;line-height:1.8;color:#bdced6}.phone-sheet-body label{display:block;font-size:13px;color:#b9cdd5;margin:10px 0}.phone-sheet-body select,.phone-sheet-body input:not([type=range]){width:100%;margin-top:6px;background:#0c1d2b;color:#eef4fc;font:inherit;border:1px solid #536d7b;border-radius:9px;padding:11px;min-height:44px}.phone-sheet-body input[type=range]{width:100%;min-width:0;min-height:36px}.phone-sheet-body .game-log,.phone-sheet-body #events{max-height:none;overflow:visible;padding-left:20px}.phone-sheet-body .result{position:static;inset:auto;width:auto;transform:none;padding:0;background:none;border:0;box-shadow:none}.phone-sheet-body .result>#again{display:none}.phone-sheet-body .checkers-guide,.phone-sheet-body .go-ending{margin-bottom:16px}.phone-sheet-body .arena-small{margin-top:16px}.phone-dialog .primary,.phone-dialog .secondary{min-height:44px}.phone-dialog button:disabled{opacity:.4}.phone-hub-more .phone-menu-grid{padding:18px}
@media(max-width:740px),(max-width:1100px) and (max-height:520px){
 body.phone-play{height:100dvh;min-height:0;overflow:hidden;background-attachment:scroll}body.phone-play>header,body.phone-play>main,body.phone-play>footer,body.phone-play>.install-note{display:none!important}
 .phone-shell{position:fixed;inset:0;height:100dvh;max-height:100dvh;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-rows:44px 66px 52px minmax(0,1fr) 34px 64px 48px;grid-template-areas:'top' 'seats' 'status' 'board' 'notice' 'powers' 'actions';gap:5px;overflow:hidden}
 .phone-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:8px}.phone-back{font-size:13px;text-decoration:none;color:#bfd7d2;min-width:60px;min-height:44px;display:flex;align-items:center}.phone-game-title{font-size:19px;letter-spacing:2px}.phone-help{font-size:12px;padding:8px 12px;min-height:38px}
 .phone-seats{grid-area:seats;min-height:0}.phone-seats>.seat-row,.phone-seats>.players{height:100%;display:flex;gap:6px;margin:0;align-items:stretch}.phone-seats .seat,.phone-seats .player{padding:5px 7px;min-width:0;min-height:0;flex:1;gap:7px;margin:0;border-radius:12px;align-items:center}.phone-seats .versus{display:none}.phone-seats .seat-picture,.phone-seats .profile-portrait{max-width:70px;gap:3px;flex:none}.phone-seats .seat-picture .seat-disc,.phone-seats .profile-avatar{width:25px;height:25px;font-size:12px;line-height:25px;min-width:25px}.phone-seats .seat-title,.phone-seats .title-nameplate{font-size:8px;line-height:1.2;max-width:72px;max-height:22px;overflow:hidden;padding:0 2px;white-space:normal}.phone-seats .title-nameplate small{display:none}.phone-seats .seat strong,.phone-seats .player strong{font-size:12px;line-height:1.4;max-height:32px;overflow:hidden;overflow-wrap:anywhere}.phone-seats small,.phone-seats .player small{font-size:9px;line-height:1.4}.phone-seats .fragments{font-size:10px;margin-left:auto}.phone-seats .player>.stone{width:23px;height:23px;flex:none}.phone-seats .seat[role=button]{cursor:pointer;border:2px solid #f2cd87;box-shadow:0 0 12px #f0c47648}.phone-seats .seat[aria-disabled=true]{opacity:.4}
 .phone-status{grid-area:status;display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0}.phone-status>.multi-turn,.phone-status>.turnbar{margin:0;padding:4px 10px;border:0;border-radius:10px;box-shadow:none;background:#16333d;min-height:40px}.phone-status #status{font-size:13px;line-height:1.3;display:block;max-height:34px;overflow:hidden}.phone-status .multi-turn>div:first-child,.phone-status .turn-info{min-width:0}.phone-status #effect-label,.phone-status .time-effect{font-size:10px;line-height:1.2}.phone-status #effect-label:empty{display:none}.phone-status .clock{flex:none;white-space:nowrap}.phone-status #seconds{font-size:22px!important}.phone-status .clock small{font-size:10px;margin-left:4px}.phone-status progress,.phone-status .time-track{height:3px;min-height:3px;margin:0;width:100%;border:0;accent-color:#81ead2}.phone-status .time-track>div{height:100%}
 .phone-stage{grid-area:board;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding-bottom:7px}.phone-stage>.board-shell,.phone-stage>.board-wrap{width:var(--phone-board-width);max-width:100%;margin:0;padding:10px;border-radius:13px;flex:none;box-shadow:inset 0 2px 1px #fff4,0 5px 0 #211c1a,0 9px 18px #0006}.phone-stage>.board-wrap{--rim:16px;padding:16px}.phone-stage .board-wrap::before{inset:5px}.phone-stage .board-files{bottom:5px;font-size:7px}.phone-stage .board-ranks{left:2px;width:11px;font-size:7px}.phone-stage .game-board{width:100%;height:auto}.phone-stage .token{font-size:clamp(12px,4vw,26px)}.phone-stage .chess .token{font-size:clamp(19px,7vw,46px)}.phone-stage .xiangqi .token{font-size:clamp(12px,4vw,25px);border-width:1px}.phone-stage .checkers-camp-label strong{font-size:clamp(7px,2.4vw,11px);line-height:1.25}.phone-stage .handoff{padding:14px}.phone-stage .handoff h2{font-size:18px}.phone-stage .handoff p{font-size:12px}.phone-stage .veil{font-size:11px;top:3px;padding:5px 10px;max-width:95%;white-space:normal}
 .phone-notice{grid-area:notice;display:flex;align-items:center;min-width:0;overflow:hidden}.phone-notice .notice{font-size:11px;line-height:1.4;max-height:32px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#a8c9c7;padding:0 3px}
 .phone-powers{grid-area:powers;min-width:0;min-height:0}.phone-powers>#power-buttons,.phone-powers>.powers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0;background:none;box-shadow:none;height:100%}.phone-powers>.powers>p,.phone-powers>.powers>.section-title,.phone-powers>.powers>.test-note{display:none}.phone-powers .arena-power,.phone-powers .power{display:flex;align-items:center;gap:8px;min-width:0;min-height:0;margin:0;padding:7px 10px;border:1px solid #6caa9466;border-radius:12px;background:linear-gradient(135deg,#285445,#172f39);box-shadow:inset 0 1px #caffef18,0 3px 0 #081a21;position:relative;text-align:left}.phone-powers .symbol,.phone-powers .power-icon{font-size:23px;width:27px;flex:0 0 27px;height:auto;background:none;border:0;box-shadow:none;text-align:center;color:#a2efcf}.phone-powers .power strong,.phone-powers .arena-power strong{font-size:14px;line-height:1.3;white-space:nowrap}.phone-powers .arena-power small{font-size:10px;line-height:1.3;display:block;max-height:26px;overflow:hidden;color:#aac9c0}.phone-powers .power small{display:none}.phone-powers .power em{position:static;margin-left:auto;font-size:9px;color:#c1dfcb;border:0;background:none;white-space:normal;width:28px;padding:0}.phone-powers button:disabled{opacity:.45}.phone-empty-powers{text-align:center;color:#8cabb6;font-size:12px;margin:0;position:relative;top:-43px;pointer-events:none}.phone-replay{grid-area:powers;min-width:0;overflow:hidden}.phone-replay label{font-size:10px}.phone-replay input[type=range]{display:block;width:100%;height:25px;margin:0}.phone-replay p{font-size:10px;line-height:1.3;margin:0;max-height:26px;overflow:hidden}.phone-replay .replay-toolbar{display:flex;gap:5px;align-items:center}.phone-replay .replay-toolbar button{padding:6px;font-size:11px;min-width:52px;min-height:36px}.phone-replay .replay-toolbar input{flex:1;min-width:0}
 .phone-actions{grid-area:actions;display:flex;gap:9px;min-width:0}.phone-actions button{flex:1;min-width:0;min-height:44px;padding:8px 10px;font-size:14px;border-radius:12px}.phone-actions button:only-child{flex:0 1 150px;margin:auto}.phone-dialog .ability-pair,.phone-dialog .loadout-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.phone-dialog .loadout-note{font-size:12px}.phone-dialog #result-panel[hidden],.phone-dialog #score-panel[hidden]{display:none!important}
}
@media(max-width:740px){
 .phone-hub .hub-nav{display:none}.phone-hub{padding-bottom:82px}.phone-hub .hub-shell{padding-bottom:16px}.phone-hub-nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:#102531f5;backdrop-filter:blur(16px);border-top:1px solid #7bbaa94d;padding:5px max(6px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));box-shadow:0 -8px 30px #0004}.phone-hub-nav a,.phone-hub-nav button{min-width:0;min-height:54px;border:0;background:none;color:#9ebac3;text-decoration:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border-radius:11px;padding:3px}.phone-hub-nav span{font-size:23px;line-height:1.1}.phone-hub-nav small{font-size:11px}.phone-hub-nav .selected{color:#a6efd1;background:#28604b55}
}
@media(max-width:360px),(max-height:650px) and (orientation:portrait){
 .phone-shell{grid-template-rows:38px 59px 46px minmax(0,1fr) 28px 58px 44px;gap:3px;padding-top:max(3px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}.phone-top .phone-help{min-height:34px;padding:6px 10px}.phone-seats .seat,.phone-seats .player{padding:4px}.phone-seats .seat-picture,.phone-seats .profile-portrait{max-width:60px}.phone-seats .seat-title{font-size:7px}.phone-status .multi-turn,.phone-status .turnbar{min-height:36px}.phone-powers .arena-power,.phone-powers .power{padding:5px 7px;gap:5px}.phone-powers .power strong,.phone-powers .arena-power strong{font-size:12px}
}
@media(max-width:1100px) and (max-height:520px) and (orientation:landscape){
 .phone-shell{grid-template-columns:minmax(0,1fr) minmax(235px,38%);grid-template-rows:38px 62px 48px minmax(0,1fr) 60px 44px;grid-template-areas:'board top' 'board seats' 'board status' 'board notice' 'board powers' 'board actions';gap:5px 12px;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}.phone-stage{padding-bottom:7px}.phone-notice{align-items:flex-start}.phone-seats .seat{padding:4px}.phone-seats .seat strong{font-size:11px}.phone-powers .arena-power strong{font-size:12px}.phone-top .phone-help{padding:5px 10px;min-height:34px}
}

.phone-sheet-feedback{font-size:12px;line-height:1.5;color:#f2cb90;margin:0;padding:8px 18px 0;flex-shrink:0}.phone-sheet-feedback:empty{display:none}.phone-sheet-body>#result-panel>h2{display:block;color:#a7ebce}.phone-actions button:disabled{opacity:.4}

/* Keep attack and defense together while preserving a single-screen board. */
.phone-guards[hidden]{display:none}
@media(max-width:740px),(max-width:1100px) and (max-height:520px){
.phone-shell{--guard-row:52px;grid-template-rows:44px 66px 52px minmax(0,1fr) 34px 64px var(--guard-row) 48px;grid-template-areas:"top" "seats" "status" "board" "notice" "powers" "guards" "actions"}
.phone-shell[data-phase=replay]{--guard-row:0px}
.phone-guards{grid-area:guards;min-width:0;min-height:0;overflow:hidden}.phone-guards>section{margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.phone-guards h3{font:10px/12px system-ui;color:#bed3c5;margin:0 0 3px;letter-spacing:1px}
.phone-guards .guard-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.phone-guards .guard-chip{width:auto;min-width:0;padding:3px 7px;gap:6px;border:1px solid #b4af7655;border-radius:9px;background:#123e32c9;font-size:11px;line-height:1.25}
.phone-guards .guard-chip>.relic-icon,.phone-guards .guard-chip .art-icon{width:25px;height:25px;min-width:25px;margin:0;border:0;box-shadow:none;background:none}
.phone-guards .guard-chip>span:last-child{min-width:0}.phone-guards .guard-chip small{font-size:9px;line-height:1.3;white-space:nowrap;margin:0}
.phone-guards .guard-list>p{grid-column:1/-1;margin:0;padding:7px 10px;border-radius:9px;background:#123e3288;color:#b5c8bb;font-size:11px}
}
@media(max-width:360px),(max-height:650px) and (orientation:portrait){.phone-shell{--guard-row:47px;grid-template-rows:38px 59px 46px minmax(0,1fr) 28px 58px var(--guard-row) 44px}.phone-guards .guard-chip{padding:2px 5px;gap:4px}.phone-guards h3{margin-bottom:2px}.phone-guards .guard-chip>.relic-icon,.phone-guards .guard-chip .art-icon{width:22px;height:22px;min-width:22px}}
@media(max-width:1100px) and (max-height:520px) and (orientation:landscape){.phone-shell{--guard-row:48px;grid-template-rows:38px 62px 48px minmax(0,1fr) 60px var(--guard-row) 44px;grid-template-areas:"board top" "board seats" "board status" "board notice" "board powers" "board guards" "board actions"}}