/* Classic keeps rectangular card faces, with scenery independent of UI. */
.refined-classic .enemy-hand{display:none}
.refined-classic .hero{background:#102633ed;border:1px solid #c6a566;min-width:0;text-align:left}
.refined-classic .portrait{border:2px solid #d8bb7b;border-radius:50%;overflow:hidden;background:#142939}
.refined-classic .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 23%}
.refined-classic .opponent-power{position:static}
.refined-classic .legal-target{outline:3px dashed #fff2a9;outline-offset:2px}
.refined-classic [aria-pressed=true]{outline:3px solid #7ee5ff;outline-offset:2px}
.refined-classic .card:focus-visible,.refined-classic button:focus-visible{outline:3px solid #7ee5ff;outline-offset:2px}
.refined-classic .empty-slot{border:1px dashed #d8c39366;border-radius:10px;background:#10243222;max-height:220px}
.refined-classic .deck-edge{transform:translate(calc(var(--layer)*3px),calc(var(--layer)*3px)) rotate(-3deg)}
@media(min-width:1000px){
 #app .refined-classic .battle-heading>div:first-child{min-width:0;flex:1}
 #app .refined-classic .battle-heading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #app .refined-classic .table{grid-template-columns:158px minmax(0,1fr) 158px}
 #app .refined-classic .deck-stack{width:152px;flex-basis:152px}
 #app .refined-classic .enemy-rail{transform:translateX(-10px)}
 #app .refined-classic .deck-cards,#app .refined-classic .deck-stack .sleeve,#app .refined-classic .empty-deck{width:144px;height:192px}
 #app .refined-classic .deck-stack b{top:160px;font-size:26px}
 #app .refined-classic .hero .portrait{width:50px;height:50px;flex-basis:50px}
 #app .refined-classic .hero b{white-space:nowrap}
 #app .refined-classic .hint:has(#cancel){overflow:visible;position:relative;z-index:8}
 #app .refined-classic #cancel{height:28px;background:#173747;flex-shrink:0}
 #app .refined-classic .board .card.unit{border-radius:8px;background:#152c34ed}
 #app .refined-classic .hand{grid-template-columns:repeat(var(--hand-count),minmax(0,190px));justify-content:center;background:#081d2d88;border-top:1px solid #d9b67466}
 #app .refined-classic .card .art{border-radius:4px}
 #app .refined-classic .hero-power:disabled{opacity:1;border-style:dashed}
}
@media(max-width:999px){
 html:has(.refined-classic){scroll-padding-bottom:calc(176px + env(safe-area-inset-bottom));scroll-padding-top:38px}
 body:has(.refined-classic){--control-height:116px;--hint-height:48px}
 body:has(.refined-classic)>header{padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));flex-wrap:wrap;gap:6px}
 body:has(.refined-classic)>header>a{font-size:17px}
 body:has(.refined-classic) .audio{gap:6px;font-size:12px}
 body:has(.refined-classic) .audio input,body:has(.refined-classic) #music-select,body:has(.refined-classic) #track-name{display:none}
 body:has(.refined-classic)>footer{display:none}
 #app .refined-classic{padding:8px max(10px,env(safe-area-inset-right)) calc(var(--control-height) + var(--hint-height) + env(safe-area-inset-bottom) + 18px) max(10px,env(safe-area-inset-left));width:100%;min-width:0;max-width:none}
 #app .refined-classic .battle-heading{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
 #app .refined-classic .battle-heading h2{font-size:18px;margin:0}
 #app .refined-classic .battle-actions{display:flex;flex-wrap:wrap;gap:6px}
 #app .refined-classic button,#app .refined-classic select{min-height:44px;touch-action:manipulation}
 #app .refined-classic .battle-grid{display:block}
 #app .refined-classic .table{display:flex;flex-direction:column;gap:8px;padding:0;border:0;background:transparent;box-shadow:none}
 #app .refined-classic .enemy-staging{order:1;display:flex;justify-content:center;margin:0;gap:6px}
 #app .refined-classic .hero{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:30px 8px 8px 30px;min-height:54px;max-width:440px;flex:1;overflow:hidden}
 #app .refined-classic .hero .portrait{width:44px;height:44px;flex:0 0 44px}
 #app .refined-classic .hero>span:not(.portrait){flex:1}
 #app .refined-classic .hero strong{font-size:16px}
 #app .refined-classic .hero small{font:11px/1.2 system-ui}
 #app .refined-classic .hero b{position:static;font-size:26px;white-space:nowrap;padding:2px}
 #app .refined-classic .opponent-power{font:11px system-ui;max-width:80px}
 #app .refined-classic .enemy-board{order:2}
 #app .refined-classic .turn-line{order:3;position:sticky;top:0;z-index:9;background:#102633f5;min-height:32px;padding:5px;gap:8px;font-size:10px}
 #app .refined-classic .turn-line span:last-child{display:none}
 #app .refined-classic .player-board{order:4}
 #app .refined-classic .board{display:grid;grid-template-columns:repeat(6,150px);grid-template-rows:220px;justify-content:start;gap:10px;overflow-x:auto;min-height:0;padding:6px 4px 10px;scroll-padding:4px;overscroll-behavior-x:contain}
 #app .refined-classic .board .card-wrap{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 44px;gap:2px;min-height:0}
 #app .refined-classic .board .card.unit{grid-column:1/-1;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;padding:4px;border-radius:8px}
 #app .refined-classic .board .art{height:76px;min-height:0;flex:1;margin:0}
 #app .refined-classic .board .card strong{font:15px/1.1 Georgia;min-height:32px;padding:2px}
 #app .refined-classic .board .card-text{height:14px;min-height:14px;flex:0 0 14px;padding:0;font-size:0;overflow:hidden}
 #app .refined-classic .unit-status{font:11px/14px system-ui;margin:0}
 #app .refined-classic .board .cost{display:none}
 #app .refined-classic .stats{height:28px;min-height:28px;margin:0;padding:0}
 #app .refined-classic .stats .attack-badge,#app .refined-classic .stats .health-badge{font-size:22px;width:28px;height:28px}
 #app .refined-classic .inspect-card,#app .refined-classic .guard-unit{font:12px system-ui;padding:4px;margin:0;width:100%;height:44px}
 #app .refined-classic .enemy-board .inspect-card{grid-column:1/-1}
 #app .refined-classic .empty-slot{height:174px;min-height:0}
 #app .refined-classic .player-row{position:fixed;bottom:0;left:0;right:0;z-index:15;height:calc(var(--control-height) + env(safe-area-inset-bottom));padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr 90px 114px;grid-template-rows:52px 44px;gap:6px;margin:0;background:#0b202df5;border-top:1px solid #c9a567}
 #app .refined-classic .player-row .hero{grid-column:1/3;grid-row:1;min-height:0;width:100%;max-width:none}
 #app .refined-classic .gold{grid-column:3;grid-row:1;margin:0;padding:0;min-width:0;align-self:center}
 #app .refined-classic .gold strong{font-size:24px}#app .refined-classic .gold strong small{font-size:16px}#app .refined-classic .gold>span{font:10px system-ui}
 #app .refined-classic .hero-power{grid-column:1/3;grid-row:2;padding:3px;min-width:0;max-width:none;min-height:44px;height:44px;display:block}
 #app .refined-classic .hero-power>span{display:none}#app .refined-classic .hero-power strong{font-size:15px}#app .refined-classic .hero-power small{display:inline;font-size:11px;margin-left:6px}
 #app .refined-classic #end-turn{grid-column:3;grid-row:2;padding:4px;font-size:15px}
 #app .refined-classic .hint{position:fixed;bottom:calc(var(--control-height) + env(safe-area-inset-bottom));left:0;right:0;z-index:15;height:var(--hint-height);padding:3px 10px;margin:0;display:flex;align-items:center;gap:8px;background:#102633f5;font:12px/1.3 system-ui;overflow:auto}
 #app .refined-classic #cancel{flex-shrink:0;order:-1;min-width:70px}
 #app .refined-classic .quest-peek{order:0;width:100%;padding:5px 10px;min-height:44px}
 #app .refined-classic .quest-peek strong,#app .refined-classic .quest-peek span{display:inline;font-size:12px;margin:0 8px 0 0}
 #app .refined-classic .layout-rail{order:5;display:inline-flex;align-self:flex-start;width:48%;height:140px;pointer-events:none}
 #app .refined-classic .enemy-rail{align-self:flex-end;margin-top:-148px;order:6}
 #app .refined-classic .deck-stack{width:106px;flex-basis:106px;margin:auto;padding:0}
 #app .refined-classic .deck-cards,#app .refined-classic .deck-stack .sleeve,#app .refined-classic .empty-deck{width:84px;height:112px}
 #app .refined-classic .deck-stack b{top:84px;font-size:22px}#app .refined-classic .deck-stack>small{font-size:10px;margin-top:14px}
 #app .refined-classic .hand{display:flex;gap:10px;overflow-x:auto;justify-content:start;padding:6px 4px 12px;margin:0;scroll-padding:4px;overscroll-behavior-x:contain}
 #app .refined-classic .hand .card-wrap{flex:0 0 156px;display:grid;grid-template-rows:200px 44px;gap:3px}
 #app .refined-classic .hand .card{min-height:0;height:200px;width:100%;transform:none;padding:4px}
 #app .refined-classic .hand .art{height:106px;flex-basis:106px}
 #app .refined-classic .hand .card strong{font:16px/1.1 Georgia;min-height:36px}
 #app .refined-classic .hand .card-text{display:none}
 #app .refined-classic .hand .cost{font-size:22px;width:30px;height:30px}
 body:has(.refined-classic) #close-inspector{min-height:44px}
}
@media(max-width:999px) and (orientation:landscape){
 html:has(.refined-classic){scroll-padding-bottom:calc(122px + env(safe-area-inset-bottom))}
 body:has(.refined-classic){--control-height:66px;--hint-height:44px}
 #app .refined-classic .player-row{grid-template-columns:minmax(180px,1fr) 140px 90px 110px;grid-template-rows:54px}
 #app .refined-classic .player-row .hero{grid-column:1;grid-row:1}
 #app .refined-classic .hero-power{grid-column:2;grid-row:1;height:48px}
 #app .refined-classic .gold{grid-column:3;grid-row:1}
 #app .refined-classic #end-turn{grid-column:4;grid-row:1}
 #app .refined-classic .board{grid-template-columns:repeat(6,140px);grid-template-rows:200px}
}