/* One viewport: opponent, phase controls, own board, hand. */
@media(min-width:701px){
  #gameScreen:has(#tableView:not(.hidden)),#multiScreen:has(.multi-table){height:calc(100dvh - 64px);min-height:0;padding:6px 12px}
  .multi-game{height:100%}
  #tableView,.multi-table{height:100%;min-height:0;display:grid;grid-template-rows:34px minmax(0,1fr) 72px minmax(0,1fr) 34px minmax(0,1.05fr);gap:5px}
  .board-section,.hand-section{min-width:0;min-height:0;margin:0;padding:5px 8px}
  .zone-title{height:17px;line-height:17px;margin:0 0 3px;font-size:12px}
  .board-row,.hand-row{height:calc(100% - 20px);min-height:0;align-items:flex-start;padding:8px 5px 5px;gap:10px;scrollbar-width:thin}
  .hand-with-deck{height:calc(100% - 20px);min-height:0;align-items:stretch;gap:14px;padding:8px 5px 5px}
  .hand-row{height:100%;padding:0 4px 5px}
  .board-row .game-card,.hand-row .game-card{height:100%;width:auto;min-width:104px;max-width:none;flex:0 0 auto;aspect-ratio:3/4.7}
  .game-card .card-art-wrap{height:calc(100% - 42px)}
  .board-row .game-card img,.hand-row .game-card img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
  .game-card .card-stat-strip{height:42px;min-height:42px;padding:3px 2px;gap:1px}
  .game-card .card-stat-strip>span{font-size:11px}
  .game-card .card-stat-strip strong{font-size:17px;display:block}
  .game-card .card-stat-strip small{font-size:10px}
  .game-card .card-stat-strip>span:only-child{grid-column:1/-1}
  .game-card:not(:has(.card-stat-strip)) .card-art-wrap{height:100%}
  .game-card .hidden-tag{font-size:10px;left:2px;bottom:2px;padding:2px}
  .game-card .combat-card-label{font-size:10px;padding:3px 1px;top:2px}
  .game-card.selected,.game-card.selectable:hover{transform:translateY(-3px)}
  .player-deck-pile{height:100%;width:auto;flex:0 0 auto;aspect-ratio:3/4.9}
  .hand-deck-card{width:100%;height:calc(100% - 5px)}
  .hand-deck-card span{right:0;bottom:0;min-width:28px;height:28px;font-size:14px}
  .player-status,.multi-player-status{margin:0;padding:3px 10px;min-height:0;font-size:14px;overflow:hidden}
  .status-main{gap:9px}.turn-chip{padding:3px 8px;font-size:12px}
  .status-zones{display:flex;align-items:center;gap:14px;margin:0;flex-wrap:nowrap}
  .status-zone{padding:0;display:flex;align-items:center;gap:5px}
  .status-zone span{font-size:12px}.status-zone strong{font-size:14px}
  .status-zone .deck-stack{display:none}
  .deck-zone>div:last-child{display:flex;gap:5px;align-items:center}
  .action-bar,.multi-action-bar,.action-bar.cinematic-mode,.multi-action-bar.cinematic-mode{position:static;left:auto;bottom:auto;transform:none;width:100%;height:100%;min-height:0;margin:0;padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #b99a50;border-radius:12px;background:linear-gradient(110deg,#10261b,#091610);box-shadow:0 0 24px #d8b66315;z-index:5}
  .action-copy strong{font-size:18px;color:#f6da8c}.action-copy span{font-size:14px}
  .action-buttons{flex-shrink:0;flex-wrap:nowrap}.action-buttons button{min-height:42px}
  .hand-section .swipe-cue{display:none}
  @media(max-height:750px){
    #tableView,.multi-table{grid-template-rows:30px minmax(0,1fr) 64px minmax(0,1fr) 30px minmax(0,1fr);gap:3px}
    .status-zone{gap:3px}.status-zones{gap:8px}.action-copy strong{font-size:16px}
    .arena-scene h2{font-size:30px;margin-bottom:10px}.arena-fighter>img{height:34vh}
    .arena-fighter h3{margin:6px 0}.arena-outcome{margin-top:12px}
  }
}
.game-card.can-drag{cursor:grab;touch-action:none;user-select:none}
.card-drag-active,.card-drag-active *{cursor:grabbing!important;user-select:none!important}
.game-card.card-drag-ghost{position:fixed!important;left:0;top:0;margin:0!important;z-index:1000;pointer-events:none;opacity:1;transition:none!important;animation:none!important;will-change:transform;box-shadow:0 18px 40px #0009,0 0 18px #f5d58066}
.card-drag-ghost .card-art-wrap{height:calc(100% - 42px)}
.card-drag-ghost img{width:100%;height:100%;object-fit:contain}
.held-card-preview{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;background:#020604c9;pointer-events:none;padding:24px}
.held-card-preview img{display:block;width:auto;height:auto;max-width:88vw;max-height:90dvh;object-fit:contain;border-radius:15px;box-shadow:0 24px 90px #000,0 0 0 2px #e1c47a}
.direct-target{position:relative;isolation:isolate;min-width:240px}
.direct-impact .arena-direct{animation:direct-quake .55s .32s both}
.direct-impact .arena-fighter{animation:direct-lunge .8s both}
.direct-impact .arena-damage{position:relative;animation:direct-number .8s .32s both;color:#ffad76;text-shadow:0 0 20px #ff5b25,0 0 65px #ff3d00aa}
.direct-impact .arena-life{animation:life-recoil .85s .32s both}
.direct-impact:before{animation:impact-wave 1.2s .32s both;background:radial-gradient(ellipse,#ff792688,transparent 65%)}
.direct-shockwave{position:absolute;left:50%;top:40%;width:260px;height:260px;border:5px solid #ffe5ae;border-radius:50%;box-shadow:0 0 35px #ff8b37,inset 0 0 30px #ff5a27;z-index:-1;animation:direct-ring .95s .32s both}
.direct-sparks{position:absolute;left:50%;top:40%;pointer-events:none;z-index:-1}
.direct-sparks i{position:absolute;width:34px;height:4px;border-radius:50%;background:#ffdd9e;box-shadow:0 0 12px #ff7028;animation:direct-spark .8s .32s both}
@keyframes direct-lunge{0%{transform:none}28%{transform:translateX(-35px) rotate(-7deg) scale(.95)}42%{transform:translateX(85px) rotate(9deg) scale(1.1)}100%{transform:none}}
@keyframes direct-quake{0%,100%{transform:none}15%{transform:translate(-13px,6px)}30%{transform:translate(11px,-5px)}50%{transform:translate(-7px,3px)}75%{transform:translate(3px,-2px)}}
@keyframes direct-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes direct-spark{0%{opacity:0;transform:rotate(var(--angle)) translateX(15px) scaleX(.3)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(var(--reach)) scaleX(.1)}}
@keyframes direct-number{0%{opacity:0;transform:scale(2.1)}18%{opacity:1;transform:scale(.88)}40%{transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.direct-shockwave,.direct-sparks{display:none}}
.game-card.dragging{opacity:.45;cursor:grabbing}
.drop-ready{outline:2px dashed #dfc778;outline-offset:-3px;background:#e5c95b12}
.drop-hover{outline:3px solid #ffe49a;background:#e5c95b30;box-shadow:inset 0 0 30px #ffe49a33}
.arena-scene{position:relative;isolation:isolate}
.arena-scene.impact:before{content:'';position:absolute;inset:5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#ffd87966,transparent 65%);animation:impact-wave 1s ease-out both}
.impact .arena-versus{animation:impact-shake .6s ease-out}
.impact .arena-team{animation:attack-lunge .75s ease-out}
.impact .arena-versus>.arena-fighter{animation:defend-recoil .75s ease-out}
.impact .arena-cross{animation:arena-strike .85s ease-out}
.impact .arena-fighter:not(.fallen)>img{animation:survivor-flare 1.4s ease-out}
.arena-direct .arena-fighter{animation:attack-lunge .8s ease-out}
.arena-damage{animation:damage-burst .8s cubic-bezier(.2,.8,.2,1)}
.arena-life{animation:life-recoil 1s ease-out}
.arena-fighter.fallen>img{animation:fall-to-ash 1.4s ease-out both}
@keyframes impact-wave{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
@keyframes impact-shake{20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-3px)}60%{transform:translate(-4px,2px)}80%{transform:translate(2px,-1px)}}
@keyframes attack-lunge{20%{transform:translateX(-18px) rotate(-3deg)}42%{transform:translateX(40px) rotate(4deg) scale(1.04)}100%{transform:none}}
@keyframes defend-recoil{35%{transform:translateX(0)}55%{transform:translateX(25px) rotate(5deg)}100%{transform:none}}
@keyframes survivor-flare{30%{filter:brightness(1.7) drop-shadow(0 0 25px #ffca63)}100%{filter:drop-shadow(0 15px 25px #000)}}
@keyframes fall-to-ash{0%{filter:brightness(1.8);transform:scale(1.03)}45%{filter:sepia(1) saturate(2);transform:rotate(-6deg)}100%{filter:grayscale(1) brightness(.35);transform:scale(.94) rotate(-3deg)}}
@keyframes life-recoil{35%{transform:scale(1.15);color:#ff735c}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.combat-arena *,.initiative-coin{animation:none!important;transition:none!important}}

/* Persistent personal soundtrack and campaign epilogues. */
.music-toggle{position:fixed;right:12px;bottom:12px;z-index:260;border:1px solid #ab965b;border-radius:24px;background:#102319f2;color:#f5df9f;padding:10px 16px;cursor:pointer;box-shadow:0 4px 18px #0008;font:700 13px Arial;max-width:calc(100vw - 24px)}
.story-ending{margin:18px auto;max-width:800px}.story-ending img{display:block;width:100%;height:auto;border:1px solid #b79b54;border-radius:14px}.story-ending h3{color:#f0d37f;font-size:clamp(1.3rem,3vw,2rem);margin:16px 0 10px}.story-ending p{color:#dbe1d9;line-height:1.65;font-size:1rem;max-width:65ch;margin:auto;text-align:left}
.help-grid{grid-template-columns:1fr}.help-grid span{line-height:1.6}.draft-card,.card-art-wrap{background:linear-gradient(135deg,#35533e,#172f25)}.draft-card img{aspect-ratio:640/853}
/* Desktop presentation: full-width illustrated lobby and readable battle controls. */
@media(min-width:1000px){
 .splash-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(560px,1fr);min-height:100dvh;background:radial-gradient(ellipse at 85% 20%,#294638 0,transparent 60%),#080e0b;align-items:center}
 .splash-cover{height:100%;min-height:100dvh;display:grid;align-items:center;background:#080c09}
 .splash-cover img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 22px 40px #0008)}
 .splash-cover:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 85%,#080e0b)}
 .splash-content{width:100%;max-width:1000px;padding:32px clamp(22px,2.5vw,52px);gap:20px}
 .player-name-panel{width:100%;padding:16px 18px;margin:0;border-color:#b59856;background:#0e1c16;font-size:19px}
 .player-name-panel input{font-size:18px;min-height:54px;min-width:0;width:100%}
 .mode-grid{grid-template-columns:1fr 1fr;gap:18px}
 .mode-card{position:relative;text-align:left;padding:22px;border-radius:20px;border-top:3px solid #a88c4d;background:linear-gradient(145deg,#1b3025f5,#0a1510);box-shadow:0 15px 35px #0005}
 .human-mode-card{background:linear-gradient(145deg,#142d40,#08151f);border-top-color:#6badd2}
 .mode-icon{font-size:30px;line-height:1;margin-bottom:12px}
 .mode-card h2{font-size:clamp(23px,1.65vw,32px);line-height:1.1;margin:0 0 12px}
 .mode-card p{font:500 clamp(16px,1.05vw,19px)/1.5 Arial,sans-serif;color:#d0d9d2;min-height:85px;margin:0 0 14px}
 .difficulty-stack{gap:12px}
 .difficulty-btn.compact{min-height:64px;align-items:flex-start;justify-content:center;flex-direction:column;gap:5px;padding:12px 16px}
 .difficulty-btn.compact strong{font-size:20px}.difficulty-btn.compact span{font-size:14px;text-align:left;line-height:1.3}
 .mode-card button{font-size:17px;min-height:58px;font-weight:700;line-height:1.3}
 .rules-mode-card{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:center;padding:20px 24px;background:linear-gradient(115deg,#302918,#15180f)}
 .rules-mode-card .mode-icon{display:none}.rules-mode-card h2{font-size:25px;margin-bottom:6px}.rules-mode-card p{grid-column:1;min-height:0;margin:0;font-size:16px}
 .rules-mode-card button{grid-column:2;grid-row:1/3;width:auto;margin:0;padding-inline:20px}
 .splash-features{margin:0;gap:10px}.splash-features span{font-size:14px;padding:9px 13px}.splash-features strong{font-size:18px}
 button{transition:filter .18s,box-shadow .18s,transform .18s}button:not(:disabled):hover{filter:brightness(1.14);box-shadow:0 5px 22px #d8b66328;transform:translateY(-1px)}button:focus-visible{outline:3px solid #ffe5a0;outline-offset:4px}
 #gameScreen,#multiScreen{max-width:none;width:100%}
 #tableView{grid-template-rows:40px minmax(0,1fr) 88px minmax(0,1fr) 40px minmax(0,1.05fr);gap:7px}
 .multi-table{grid-template-rows:42px 40px minmax(0,1fr) 88px minmax(0,1fr) 40px minmax(0,1.05fr);gap:7px}
 .board-section,.hand-section{padding:7px 12px;border-color:#52765c;background:linear-gradient(115deg,#122f22d9,#0b1d16e8)}
 .zone-title{height:22px;line-height:22px;font-size:15px;letter-spacing:.07em}.zone-title strong{font-size:14px;color:#f0d18a}
 .board-row{height:calc(100% - 25px)}.hand-with-deck{height:calc(100% - 25px)}
 .player-status,.multi-player-status{font-size:17px;padding:4px 12px}.status-zone span{font-size:14px}.status-zone strong{font-size:17px}.turn-chip{font-size:14px}
 .action-bar,.multi-action-bar{padding:12px 20px;background:linear-gradient(110deg,#284632,#10251b);border-color:#dab96c;box-shadow:0 4px 24px #0006,inset 3px 0 #e8c875}
 .action-copy{min-width:0}.action-copy strong{font-size:clamp(21px,1.65vw,29px);line-height:1.15}.action-copy span{font-size:16px;line-height:1.35}
 .action-buttons{gap:10px}.action-buttons button{font-size:18px;min-height:52px;padding:10px 20px}
 .life-hud-side strong{font-size:35px}.life-hud-label{font-size:14px}.topbar .ghost-btn{font-size:15px}
 .game-card .card-stat-strip strong{font-size:20px}.game-card .card-stat-strip>span{font-size:12px}
 .draft-header h2{font-size:30px}.draft-header p{font-size:17px}.draft-controls button{font-size:19px;min-height:52px}
 .arena-scene h2{font-size:clamp(32px,3vw,54px)}.arena-fighter h3{font-size:24px}.arena-outcome{font-size:24px}
 @media(max-height:850px){
  .splash-content{padding:22px;gap:14px}.mode-card{padding:16px}.mode-icon{margin-bottom:8px}.mode-card p{font-size:16px;min-height:72px}.mode-card h2{font-size:24px}.mode-card button{min-height:52px}.difficulty-btn.compact strong{font-size:18px}.rules-mode-card{padding:16px}.rules-mode-card p{min-height:0}
  #tableView{grid-template-rows:34px minmax(0,1fr) 78px minmax(0,1fr) 34px minmax(0,1.05fr);gap:4px}
  .multi-table{grid-template-rows:36px 34px minmax(0,1fr) 78px minmax(0,1fr) 34px minmax(0,1.05fr);gap:4px}
  .action-copy strong{font-size:21px}.action-copy span{font-size:15px}.action-buttons button{font-size:16px;padding:9px 14px;min-height:46px}
 }
}
@media(min-width:1000px){
 .splash-shell{display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 20%,#294638,transparent 72%),#080e0b}
 .splash-cover{width:100%;height:clamp(210px,32vh,360px);min-height:0;flex-shrink:0;background:transparent}
 .splash-cover img{width:100%;height:100%;object-fit:cover;object-position:center}
 .splash-cover:after{background:linear-gradient(0deg,#0c1811,transparent 18%)}
 .splash-content{max-width:1800px;padding:20px clamp(24px,4vw,76px) 28px;gap:18px}
 .player-name-panel{width:min(740px,100%);padding:12px 18px}
 .mode-grid{grid-template-columns:1.1fr 1.1fr .8fr;gap:22px}
 .mode-card{padding:24px}.mode-card p{min-height:58px}
 .rules-mode-card{grid-column:auto;display:block;padding:24px}.rules-mode-card .mode-icon{display:block}.rules-mode-card h2{font-size:clamp(23px,1.65vw,32px);margin-bottom:12px}.rules-mode-card p{min-height:58px;font-size:clamp(16px,1.05vw,19px);margin-bottom:14px}.rules-mode-card button{width:100%;margin-top:12px}
 .board-row .game-card,.hand-row .game-card{min-width:124px}
 .game-card .card-stat-strip>span{min-width:0;white-space:nowrap}.game-card .card-stat-strip strong{font-size:18px}
 @media(max-height:850px){
  .splash-cover{height:28vh}.splash-content{padding:10px 30px 18px;gap:12px}.player-name-panel{padding:8px 14px}.player-name-panel input{min-height:46px}
  .mode-card,.rules-mode-card{padding:17px}.mode-card p,.rules-mode-card p{font-size:16px;min-height:66px;margin-bottom:10px}.mode-card h2,.rules-mode-card h2{font-size:24px}.mode-icon{font-size:25px;margin-bottom:7px}.mode-card button{min-height:50px}.difficulty-stack{gap:9px}.difficulty-btn.compact{padding:10px 13px}.difficulty-btn.compact span{font-size:13px}.splash-features span{padding:6px 11px}
 }
}
@media(min-width:1000px){
 .splash-cover{isolation:isolate;overflow:hidden}
 .splash-cover:before{content:'';position:absolute;inset:-25px;z-index:-1;background:linear-gradient(#08120e77,#08120e77),url('assets/splash-cover.webp') center/cover;filter:blur(18px)}
 .splash-cover img{object-fit:contain}.splash-cover:after{z-index:1;background:linear-gradient(0deg,#0c1811,transparent 10%)}
}
@media(min-width:1000px){.splash-cover img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:contain}}