/* The hand shares the arena foreground; gameplay values stay unchanged. */
.card-stage{border:3px solid #775540;border-radius:24px;overflow:hidden;background:#918c79;box-shadow:0 12px 35px #1b201c35}
.card-stage .battlefield{height:400px;border:0;border-radius:0;box-shadow:none}
.card-stage .arena-tip{bottom:10px}
.card-dock{position:relative;background:linear-gradient(#a7aa9160,#687d7970),url('assets/battlefield.webp') center bottom/cover;padding:0 20px 6px;isolation:isolate}
.card-dock:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#273f4980);z-index:-1}
.card-dock .hand-heading{margin:0;padding:12px 0 0;color:white;text-shadow:0 2px 3px #273526;font-size:12px}
.card-dock .hand-heading h3{font-size:15px;margin:0}.card-dock .hand-heading .back{color:white}.card-dock #hand-count{font-size:10px;color:#f4edd6}
.card-dock .hand{justify-content:center;align-items:flex-end;overflow:visible;gap:0;padding:45px 6px 22px;min-height:315px}
.card-dock .ability{position:relative;flex:0 0 clamp(150px,14vw,185px);width:185px;min-width:0;height:275px;margin:0 -18px;overflow:visible;border:0;border-radius:15px;background:transparent;box-shadow:none;transform:translateY(var(--fan-drop)) rotate(var(--fan-angle));transform-origin:50% 110%;z-index:var(--fan-index);transition:transform .22s ease,filter .22s ease;filter:drop-shadow(0 7px 4px #17252680);text-align:left;padding:0;opacity:1}
.card-face{display:flex;flex-direction:column;height:100%;overflow:hidden;border:4px solid #704335;border-bottom-width:7px;border-radius:14px;background:#f8edd0;box-shadow:inset 0 0 0 2px #e0ab60}
.card-dock .ability h4{position:relative;order:2;margin:0;padding:9px 6px 7px;color:#fff;font-size:13px;min-height:34px;height:auto;background:linear-gradient(#6b4239,#432e34);text-align:center;text-shadow:0 2px 1px #231c28}
.card-dock .card-art{position:relative;order:1;flex:0 0 122px;height:122px;overflow:hidden;background:radial-gradient(ellipse at 65% 20%,#fff7bbcc,transparent 50%),conic-gradient(from 20deg at 60% 70%,#ffffff38,transparent,var(--hero-color),#fff4a755,var(--hero-color));border-bottom:2px solid #b1754b}
.card-dock .card-art:before{content:'';position:absolute;width:145px;height:145px;left:20px;top:10px;border:2px solid #fff8a866;border-radius:50%;box-shadow:0 0 0 14px #fff5b222,0 0 0 32px #fff5b211}
.card-dock .card-art .sprite{position:absolute;width:125%;left:-14%;bottom:-2px;filter:drop-shadow(0 7px 2px #452b4666);transform:rotate(-8deg)}
.card-dock .ability-effect{position:absolute;right:7px;top:17px;width:38px;height:38px;line-height:38px;text-align:center;font-size:29px;color:#fff7bc;text-shadow:0 0 14px #fff,0 2px 3px #704735;background:#54478544;border:1px solid #fff5be77;border-radius:50%}
.card-dock .card-energy{z-index:3;left:-13px;top:-15px;width:48px;height:48px;border:4px solid #243e88;border-radius:50%;font-size:27px;color:#fff;background:radial-gradient(circle at 35% 20%,#87eaff,#198af2 42%,#4538bf 85%);box-shadow:inset 0 0 0 3px #53b5ff,0 3px 0 #14224e,0 0 0 2px #d8c091;text-shadow:0 2px #203776;display:grid;place-items:center;line-height:1}
.card-dock .card-class{order:3;position:static;text-align:center;display:block;font-size:9px;letter-spacing:.8px;padding:3px;height:17px;color:#644837;background:#e1c99c}
.card-dock .card-values{order:4;padding:4px 7px 0;display:flex;gap:5px;justify-content:space-between;background:transparent}
.card-dock .card-values span{border-radius:6px;padding:2px 7px;font-size:15px;flex:1;text-align:center;color:white;border:1px solid #fff7c1;box-shadow:0 2px 0 #5c493329}
.card-dock .card-values .attack{background:linear-gradient(#e76d4b,#bd4140)}.card-dock .card-values .shield{background:linear-gradient(#57bccd,#3e7baa)}
.card-dock .ability p{order:5;padding:5px 9px;margin:0;font-size:10px;line-height:1.35;height:auto;min-height:0;flex:1;color:#473b40;background:transparent}
.card-dock .ability small{order:6;font-size:9px;letter-spacing:1px;color:#f6eccf;text-align:center;background:#69493e;padding:4px;display:block}
.card-dock .ability:hover,.card-dock .ability:focus-visible{transform:translateY(-31px) rotate(0deg) scale(1.1);z-index:100;filter:drop-shadow(0 16px 10px #17252690);outline:none}
.card-dock .ability:focus-visible .card-face{outline:3px solid #fff6bc;outline-offset:3px}
.card-dock .ability.queued-card{transform:translateY(-18px) rotate(var(--fan-angle));outline:0}.card-dock .queued-card .card-face{border-color:#f8c15b;box-shadow:0 0 0 2px #fff2a2,0 0 25px #ffe19080}
.card-dock .ability.queued-card:hover,.card-dock .ability.queued-card:focus-visible{transform:translateY(-35px) rotate(0deg) scale(1.1)}
.card-dock .selected-ribbon{top:-15px;right:-8px;bottom:auto;left:auto;width:29px;height:29px;display:grid;place-items:center;border:2px solid #fff1ba;border-radius:50%;background:#2d8c69;font-size:14px;font-weight:900;box-shadow:0 3px 0 #244636;color:white;z-index:4}
.card-dock .ability:disabled .card-face{filter:saturate(.4) brightness(.85)}.card-dock .ability:disabled .card-energy{filter:saturate(.35)}
.battle-controls{margin-top:10px}.battle-controls .energy{min-width:100px}.battle-footnote{font-size:11px}
@media(min-width:1100px){.card-dock .hand[data-crowded='true'] .ability{margin:0 -29px;flex-basis:166px}}
@media(max-width:900px){.card-stage .battlefield{height:370px}.card-dock .hand{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;gap:10px;padding:30px 14px 20px;min-height:310px;scroll-snap-type:x proximity}.card-dock .ability{flex:0 0 160px;margin:0;transform:none;scroll-snap-align:center}.card-dock .ability:hover,.card-dock .ability:focus-visible{transform:translateY(-8px);}.card-dock .ability.queued-card,.card-dock .ability.queued-card:hover{transform:translateY(-10px)}.card-dock{padding:0 8px}.card-dock #target-hint{display:none}}
@media(max-width:600px){.card-stage .battlefield{height:340px}.card-dock .hand-heading{flex-wrap:wrap;gap:8px}.card-dock .hand-heading h3{flex:1}.card-dock .hand{margin:0 -8px}.battle-controls{flex-wrap:wrap}.battle-controls .plan-wrap{min-width:0;flex:1}.battle-controls .commit{width:100%}.card-stage .teams{inset:64px 12px 30px}}
@media(prefers-reduced-motion:reduce){.card-dock .ability{transition:none}}

/* Compact foreground hand and grounded combat formations. */
.battle-view{max-width:1450px;padding-top:6px}
.battle-view .battle-heading{margin-bottom:4px;min-height:40px}.battle-view .battle-heading h2{font-size:20px;margin:2px 0}.battle-view .battle-toolbar{margin-bottom:6px}.battle-view .battle-toolbar button{min-height:24px;padding:4px 9px}
.card-stage .battlefield{height:clamp(270px,43vh,420px);background-position:center 62%}
.card-stage .teams{inset:60px 18px 48px;gap:25px;align-items:stretch}
.card-stage .battlefield .side{height:100%;width:47%}
.card-stage .battlefield .side .unit{width:31%;top:auto;bottom:0;padding:0 2px;transform:none}
.card-stage .battlefield .allies .unit:nth-child(1){right:0;left:auto;top:auto;bottom:0}
.card-stage .battlefield .allies .unit:nth-child(2){left:0;right:auto;top:auto;bottom:14px}
.card-stage .battlefield .allies .unit:nth-child(3){left:34%;right:auto;top:auto;bottom:0}
.card-stage .battlefield .enemies .unit:nth-child(1){left:0;right:auto;top:auto;bottom:0}
.card-stage .battlefield .enemies .unit:nth-child(2){right:0;left:auto;top:auto;bottom:14px}
.card-stage .battlefield .enemies .unit:nth-child(3){right:34%;left:auto;top:auto;bottom:0}
.card-stage .battle-body{height:clamp(65px,9vw,125px)}
.card-stage .battle-motion{height:100%;transform-origin:50% 100%}
.card-stage .unit .sprite{position:absolute;bottom:0;width:100%;height:auto;transform-origin:50% 100%;animation:grounded-idle 2.8s ease-in-out infinite}
.card-stage .unit .villain{height:100%;aspect-ratio:auto}
.card-stage .unit .villain img{object-position:center bottom}
.card-stage .battle-body:after{bottom:0;left:14%;right:14%;height:8px;background:#67482a70;filter:blur(2px)}
.card-stage .unit-label{font-size:9px;padding:3px;gap:2px}.card-stage .unit-label span{font-size:8px}.card-stage .status-line{font-size:8px;min-height:14px;line-height:14px;margin-top:2px}
@keyframes grounded-idle{0%,100%{transform:scale(1.01,.99)}50%{transform:scale(.99,1.025)}}
.card-dock{background:linear-gradient(#79898022,#435b6399),url('assets/battlefield.webp') center 95%/cover;padding:0 14px 0}
.card-dock .hand-heading{padding-top:6px;font-size:10px}.card-dock .hand-heading h3{font-size:12px}.card-dock #hand-count{font-size:9px}
.card-dock .hand{padding:22px 8px 12px;min-height:210px;align-items:flex-end}
.card-dock .ability{flex:0 0 118px;width:118px;height:178px;margin:0 -10px;transform:translateY(calc(var(--fan-drop) * .45)) rotate(var(--fan-angle))}
.card-dock .card-face{border-width:3px;border-bottom-width:4px;border-radius:10px}
.card-dock .card-art{flex-basis:65px;height:65px}.card-dock .card-art .sprite{width:108%;left:-4%;bottom:0;transform:rotate(-5deg)}
.card-dock .card-art:before{width:90px;height:90px;top:5px;left:15px}.card-dock .ability-effect{width:23px;height:23px;line-height:23px;font-size:17px;top:8px;right:5px}
.card-dock .ability h4{font-size:9px;line-height:1.15;padding:4px 3px;min-height:27px;display:flex;align-items:center;justify-content:center}
.card-dock .card-energy{width:31px;height:31px;left:-8px;top:-11px;font-size:19px;border-width:3px;box-shadow:inset 0 0 0 2px #53b5ff,0 2px 0 #14224e,0 0 0 1px #d8c091}
.card-dock .card-class{height:13px;font-size:7px;padding:2px;letter-spacing:.2px}.card-dock .card-values{padding:3px 4px 0;gap:3px}.card-dock .card-values span{font-size:10px;padding:1px 3px;border-radius:4px}
.card-dock .ability p{font-size:8px;line-height:1.25;padding:3px 5px}.card-dock .ability small{font-size:7px;padding:2px;letter-spacing:.5px}
.card-dock .selected-ribbon{width:21px;height:21px;font-size:11px;top:-10px;right:-5px}
.card-dock .ability.queued-card{transform:translateY(-8px) rotate(var(--fan-angle))}
.card-dock .ability:hover,.card-dock .ability:focus-visible,.card-dock .ability.queued-card:hover,.card-dock .ability.queued-card:focus-visible{transform:translateY(-24px) rotate(0deg) scale(1.35);z-index:100}
.card-dock .hand[data-crowded='true'] .ability{flex-basis:118px;margin:0 -16px}
.battle-view .battle-controls{padding:8px 12px;margin:7px 0}.battle-view .selection-notice{padding:8px 14px;margin:7px 0}.battle-view .selection-notice strong{font-size:14px}.battle-view .selection-notice .selection-icon{font-size:22px}.battle-view .battle-footnote{margin-top:8px}
@media(max-width:900px){.card-dock .hand{padding:20px 10px 12px;min-height:210px;gap:7px}.card-dock .ability,.card-dock .hand[data-crowded='true'] .ability{flex-basis:118px;margin:0;transform:none}.card-dock .ability:hover,.card-dock .ability:focus-visible,.card-dock .ability.queued-card:hover{transform:translateY(-6px);}.card-dock .ability.queued-card{transform:translateY(-6px)}}
@media(max-width:600px){.card-stage .battlefield{height:290px}.card-stage .teams{inset:60px 6px 43px;gap:10px}.card-stage .battlefield .side{width:48%}.card-stage .battle-body{height:59px}.card-stage .unit-label{font-size:7px;flex-direction:column;padding:2px}.card-stage .unit-label span{font-size:6px}.card-stage .status-line{font-size:6px;line-height:10px;min-height:20px}.card-stage .battlefield .side .unit:nth-child(2){bottom:10px}.card-dock{padding:0 8px}.card-dock .hand{min-height:207px}.card-dock .hand-heading h3{font-size:11px}.card-stage .arena-tip{font-size:8px}.battle-view .battle-heading h2{font-size:16px}}
@media(min-width:701px) and (max-height:750px){
 body:has(.battle-view) header{padding:4px 18px;min-height:0;height:42px}body:has(.battle-view) header .brand{width:125px}body:has(.battle-view) header .brand-art{width:120px;max-width:100%}body:has(.battle-view) header .small-button{padding:4px 9px;font-size:10px}
 .battle-view .battle-heading{min-height:25px;margin-bottom:0}.battle-view .battle-heading h2{font-size:16px}.battle-view .battle-heading .eyebrow{display:none}.battle-view .round-pill{font-size:10px;padding:5px 10px}
 .battle-view .battle-toolbar{margin-bottom:4px}.battle-view .battle-toolbar button{min-height:18px;font-size:9px;padding:2px 7px}
 .card-stage .battlefield{height:205px}.card-stage .teams{inset:43px 15px 31px}.card-stage .battle-body{height:65px}.card-stage .arena-top{top:9px}.card-stage .arena-tip{bottom:5px;font-size:9px;padding:3px}.card-stage .unit-label{font-size:8px;padding:2px}.card-stage .status-line{font-size:7px;line-height:11px;min-height:11px}.card-stage .versus{font-size:15px}
 .card-dock .hand-heading{padding-top:4px;font-size:9px}.card-dock .hand-heading h3{font-size:10px}.card-dock .hand{min-height:164px;padding:15px 8px 8px;justify-content:center;overflow:visible;gap:0}
 .card-dock .ability,.card-dock .hand[data-crowded='true'] .ability{width:100px;flex-basis:100px;height:140px;margin:0 -9px;transform:rotate(var(--fan-angle))}
 .card-dock .hand[data-crowded='true'] .ability{margin:0 -14px}.card-dock .card-art{flex-basis:43px;height:43px}.card-dock .ability h4{min-height:20px;font-size:8px;padding:3px}.card-dock .card-class{height:11px;font-size:6px;padding:1px}.card-dock .card-values span{font-size:9px;padding:0 2px}.card-dock .ability p{font-size:7px;padding:2px 4px}.card-dock .ability small{font-size:6px;padding:1px}.card-dock .card-energy{width:25px;height:25px;font-size:15px;top:-8px;left:-6px}
 .card-dock .ability:hover,.card-dock .ability:focus-visible,.card-dock .ability.queued-card:hover{transform:translateY(-18px) rotate(0deg) scale(1.5)}
 .battle-view .battle-controls{padding:5px 10px;margin:5px 0;min-height:44px}.battle-view .battle-controls .energy-icon{font-size:25px}.battle-view .battle-controls .energy b{font-size:17px}.battle-view .battle-controls .commit{padding:8px 16px;font-size:12px}.battle-view .selection-notice{padding:4px 10px;margin:5px 0}.battle-view .selection-notice strong{font-size:11px}.battle-view .selection-notice #selection-detail{font-size:9px}.battle-view .battle-footnote{font-size:9px}
}