/* Battle presentation: one viewport, all cards available, deliberate card inspection. */
body[data-screen="battle"] { overflow:hidden; background:#050709; }
body[data-screen="battle"] #app { height:100dvh; overflow:hidden; }
#battle-screen:not([hidden]) {
  --hand-height:clamp(112px,18.5dvh,176px);
  height:calc(100dvh - 42px);
  min-height:0;
  grid-template-rows:minmax(0,1fr) auto auto auto;
  overflow:hidden;
  background:#06090b;
}
#battle-screen .game-layout { grid-template-rows:50px minmax(0,1fr); overflow:hidden; }
#battle-screen .battle-hud { height:50px; background:linear-gradient(180deg,#12292d,#08151b); border-bottom:1px solid #6d895e; }
#battle-screen .stage-wrap { position:relative; isolation:isolate; background:radial-gradient(ellipse at 51% 44%,#527e38 0,#17291f 54%,#020708 100%); }
#battle-screen #arena { position:relative; z-index:0; filter:saturate(1.16) contrast(1.06) brightness(1.035); }
#battle-screen .stage-wrap::before,
#battle-screen .stage-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; }
#battle-screen .stage-wrap::before {
  z-index:0; inset:-28px;
  background:url('/assets/arena-artist-edition.png') center 50%/cover no-repeat;
  filter:blur(21px) brightness(.48) saturate(1.2);
}
#battle-screen .stage-wrap::after {
  z-index:2;
  box-shadow:inset 0 0 90px 30px #03080779,inset 0 0 14px #edbf6466;
  background:
    radial-gradient(ellipse 35% 30% at 28% 13%,#fff0b92c,transparent 70%),
    radial-gradient(ellipse 25% 23% at 73% 55%,#68fdc318,transparent 72%),
    linear-gradient(180deg,#0813184d,transparent 20%,transparent 80%,#07100e55);
  mix-blend-mode:screen;
  animation:arena-light 9s ease-in-out infinite alternate;
}
#battle-screen #board-targets { z-index:3; }
#battle-screen .player-dock {
  position:relative; z-index:4; overflow:visible;
  padding:0 14px 2px; border-top:2px solid #b68644;
  background:linear-gradient(180deg,#332617,#1b1511 27%,#111315 100%);
  box-shadow:0 -12px 30px #04080c9c,inset 0 2px #f3cb7b57;
}
#battle-screen .player-hud { height:36px; background:#060d10b8; }
#battle-screen .hand-workspace { display:block; width:min(100%,1640px); min-height:0; overflow:visible; }
#battle-screen .hand {
  position:relative; display:block; width:100%;
  height:calc(var(--hand-height) + 12px); min-height:0;
  padding:0; margin:0;
  overflow:visible; scrollbar-width:none; perspective:900px;
}
#battle-screen .hand-card {
  position:absolute; bottom:7px; flex:none;
  width:calc(var(--hand-height) * 212 / 306); height:var(--hand-height);
  transform:translateY(0) rotate(0deg) !important;
  transform-origin:50% 93%;
  transition:transform .21s cubic-bezier(.2,.8,.2,1),filter .21s,box-shadow .21s;
  box-shadow:0 8px 10px #000b,2px 2px #fff4;
  will-change:transform;
}
#battle-screen .hand-card:hover,
#battle-screen .hand-card:focus-visible {
  z-index:50!important;
  transform:translateY(-52px) rotate(-1deg) scale(1.17) !important;
  filter:brightness(1.15) drop-shadow(0 0 8px #ffe5909c);
  box-shadow:0 20px 28px #000d;
}
#battle-screen .hand-card.selected:not(:hover) {
  z-index:45!important;
  transform:translateY(-16px) scale(1.045) !important;
  filter:drop-shadow(0 0 8px #69f7edb3);
}
#battle-screen .card-intel-panel { display:none; }
#battle-screen .battle-controls { position:relative; z-index:3; padding-bottom:3px; }
#battle-screen .battle-history { min-height:24px; padding:3px 14px; align-items:center; }
#battle-screen .battle-status:not([open]) { line-height:1; }
#battle-screen .battle-history:has(.battle-status[open]) { position:absolute; bottom:0; right:0; z-index:6; background:#0a0f12ee; border:1px solid #b28d53; }
#battle-screen .battle-history:has(.battle-status[open]) #log { max-height:150px; }
#battle-screen #hint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#battle-screen .end-turn:not(:disabled) { box-shadow:inset 2px 2px #ffe3a5,inset -2px -2px #ad4b0c,0 0 18px #ffb74442; }
@keyframes arena-light { from { opacity:.72; transform:translateX(-1.5%); } to { opacity:1; transform:translateX(1.5%); } }

@media(max-width:800px) {
  #battle-screen:not([hidden]) { --hand-height:clamp(105px,17dvh,145px); }
  #battle-screen .hand-card:hover,#battle-screen .hand-card:focus-visible { transform:translateY(-34px) scale(1.12)!important; }
  #battle-screen .hand-card.selected:not(:hover) { transform:translateY(-10px) scale(1.03)!important; }
  #battle-screen .battle-hud { padding:0 8px; }
}
@media(max-width:560px) {
  #battle-screen:not([hidden]) { --hand-height:clamp(98px,18dvh,132px); height:calc(100dvh - 42px); min-height:0; grid-template-rows:minmax(0,1fr) auto auto auto; }
  #battle-screen .game-layout { grid-template-rows:48px minmax(0,1fr); }
  #battle-screen .stage-wrap { height:100%; aspect-ratio:auto; }
  #battle-screen .battle-hud { height:48px; }
  #battle-screen .player-dock { padding:0 5px 2px; }
  #battle-screen .player-hud { height:34px; }
  #battle-screen .hand { height:calc(var(--hand-height) + 8px); }
  #battle-screen .hand-card { bottom:4px; }
  #battle-screen .hand-card:hover,#battle-screen .hand-card:focus-visible { transform:translateY(-25px) scale(1.07)!important; }
  #battle-screen .battle-history { min-height:20px; padding:2px 7px; }
  #battle-screen .battle-controls { padding:0 5px 2px; }
  #battle-screen .action-row { height:44px; }
  #battle-screen .end-turn { height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  #battle-screen .stage-wrap::after { animation:none; }
}

/* Nonmodal selected card: the field stays playable while the card sits at its right edge. */
#card-side[hidden] { display:none!important; }
#battle-screen .card-side {
  position:absolute; z-index:7; top:50%; right:12px;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center;
  width:min(215px,18vw); max-height:calc(100% - 14px);
  padding:5px 7px 6px;
  border:1px solid #c9a967;
  background:linear-gradient(180deg,#0c1a20d9,#081014e6);
  box-shadow:0 12px 26px #0009,inset 0 0 0 1px #78968b4d;
  pointer-events:auto;
}
#battle-screen .card-side-head { width:100%; height:22px; display:flex; align-items:center; justify-content:space-between; color:#cce5d6; font:12px VT323; letter-spacing:1px; }
#battle-screen .card-side-head button { width:20px; height:20px; padding:0; border:1px solid #839d95; background:#1b3337; color:#fff2cf; font:20px/15px VT323; cursor:pointer; }
#battle-screen .side-card-flip {
  display:block; position:relative; flex:none;
  width:min(100%,190px); aspect-ratio:212/306;
  max-height:calc(100% - 48px);
  padding:0; border:0; background:transparent;
  perspective:750px; cursor:pointer; touch-action:none;
}
#battle-screen .side-card-rotor {
  position:absolute; inset:0; display:block;
  transform-style:preserve-3d;
  transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .18s ease-out;
  filter:drop-shadow(0 9px 7px #000b);
}
#battle-screen .side-card-front,#battle-screen .side-card-back { position:absolute; inset:0; display:block; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .48s cubic-bezier(.2,.7,.2,1); }
#battle-screen .side-card-front { transform:rotateY(0deg); }
#battle-screen .side-card-back { transform:rotateY(180deg); background:var(--game-card-back) center/100% 100% no-repeat; image-rendering:pixelated; border:1px solid #d4bd78; }
#battle-screen .side-card-flip.flipped .side-card-front { transform:rotateY(-180deg); }
#battle-screen .side-card-flip.flipped .side-card-back { transform:rotateY(0deg); }
#battle-screen .card-side .side-card-display {
  position:absolute; inset:0; bottom:auto; left:auto;
  width:100%; height:100%; margin:0!important;
  transform:none!important; pointer-events:none;
  box-shadow:none; filter:none;
}
#battle-screen .card-side .side-card-display:hover { transform:none!important; }
#battle-screen .side-card-rotor::after {
  content:""; position:absolute; inset:4%; pointer-events:none;
  background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%),#fff7c942,transparent 46%);
  mix-blend-mode:screen;
}
#battle-screen #side-card-tip { margin:3px 0 0; width:100%; min-height:19px; color:#f6df9a; font:13px/1 VT323; text-align:center; }
#battle-screen .stage-wrap.drag-over::after { box-shadow:inset 0 0 80px 22px #a8ffad62,inset 0 0 0 4px #d9f7a6; }
#battle-screen .hand-card.drag-origin { opacity:.4; filter:grayscale(.6); }
.drag-ghost {
  position:fixed!important; z-index:9999!important; left:0; top:0;
  margin:0!important; pointer-events:none!important;
  transform:translate(-50%,-77%) rotate(-4deg) scale(1.12)!important;
  transition:none!important; box-shadow:0 18px 28px #000c!important;
  image-rendering:pixelated;
}
@media(max-width:800px) {
  #battle-screen .card-side { width:min(145px,21vw); right:7px; }
  #battle-screen .card-side-head { font-size:10px; }
  #battle-screen #side-card-tip { font-size:11px; }
}
@media(max-width:560px) {
  #battle-screen .card-side { top:auto; bottom:6px; right:5px; transform:none; width:108px; max-height:200px; padding:3px; }
  #battle-screen .card-side-head { height:17px; font-size:9px; }
  #battle-screen .card-side-head button { width:17px; height:17px; }
  #battle-screen .side-card-flip { width:100%; max-height:150px; }
  #battle-screen #side-card-tip { font-size:10px; min-height:12px; }
}
@media(prefers-reduced-motion:reduce) {
  #battle-screen .side-card-rotor,#battle-screen .side-card-front,#battle-screen .side-card-back { transition:none; }
}