:root {
  --bg:#14101c;
  --panel:#1e1830;
  --raised:#2a2140;
  --bone:#ede6d6;
  --dim:#9a8fa8;
  --teal:#46c2cb;
  --red:#d64550;
  --gold:#e8c468;
  --damage:#ff5a3c
}
* {
  box-sizing:border-box
}
html,body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--bone);
  font-family:Georgia,serif
}
body {
  overflow-x:hidden
}
button {
  font:inherit;
  color:inherit
}
.screen {
  min-height:100vh;
  min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-content:center;
  text-align:center;
  background:radial-gradient(circle,#2a2140 0,#14101c 65%);
  padding:2rem
}
.title-mark {
  font-size:clamp(3rem,9vw,7rem);
  letter-spacing:.08em;
  text-shadow:0 4px 30px #000
}
.title-mark span {
  color:var(--gold)
}
.screen p {
  color:var(--dim);
  font:1.1rem system-ui,sans-serif
}
.primary {
  width:320px;
  height:96px;
  border:0;
  background:url(assets/btn_primary.png) center/100% 100% no-repeat;
  font-size:1.5rem;
  font-weight:800;
  text-shadow:0 2px 4px #000;
  cursor:pointer;
  transition:.18s transform,.18s filter
}
.primary:hover,.primary:focus-visible {
  transform:translateY(-3px);
  filter:brightness(1.2)
}
.battle {
  height:100vh;
  height:100dvh;
  background:linear-gradient(#100a14bb,#100a1488),url(assets/bg_battlefield.png) center/cover fixed;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) 20px minmax(0,1fr);
  gap:6px;
  padding:10px;
  position:relative;
  overflow:hidden;
}
.battle header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 16px;
  background:#14101cdd;
  border:1px solid #5d4a70;
  border-radius:8px;
  letter-spacing:.12em
}
.battle header small {
  color:var(--dim)
}
.side {
  min-width:0;
  min-height:0;
  container-type:size;
  display:grid;
  grid-template-columns:clamp(110px,15vw,180px) 110px minmax(0,1fr);
  gap:12px;
  align-items:center;
}
.side.player {
  align-self:stretch;
}
.hero {
  position:relative;
  min-width:0;
}
.hero>img {
  display:block;
  width:min(100%,180px,calc(100cqh - 40px));
  margin:auto;
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  border:5px solid var(--red);
  box-shadow:0 0 28px #d6455077
}
.hero.player>img {
  border-color:var(--teal);
  box-shadow:0 0 28px #46c2cb77
}
.hp {
  height:34px;
  margin-top:2px;
  position:relative;
  background:url(assets/panel_hp.png) center/100% 100% no-repeat;
  padding:8px 14px
}
.hp i {
  position:absolute;
  inset:9px 15px;
  background:var(--red);
  transform:scaleX(var(--health,1));
  transform-origin:left;
  transition:transform .25s;
}
.player .hp i {
  background:var(--teal)
}
.hp b {
  position:relative;
  display:block;
  text-align:center;
  font:700 14px system-ui;
  text-shadow:0 1px 3px #000
}
.charger {
  width:min(110px,calc((100cqh - 24px) * 2 / 3));
  aspect-ratio:2 / 3;
  position:relative;
  margin:auto;
}
.charger>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:10px
}
.charger.known>img {
  opacity:.6
}
.charger strong {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size:clamp(1.5rem,5cqh,2.5rem);
  text-shadow:0 3px 8px #000
}
.charger .cost {
  position:absolute;
  left:-5px;
  top:-5px;
  background:#14101c;
  border:2px solid var(--gold);
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:bold
}
.board {
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:24px 12px;
  scrollbar-color:var(--gold) #14101c;
  scrollbar-width:thin;
}
.board:empty:after {
  content:'THE LINE IS EMPTY';
  color:#9a8fa866;
  letter-spacing:.2em;
  margin:auto
}
.card {
  --card-width:min(142px,calc((100cqh - 56px) * 2 / 3));
  flex:0 0 var(--card-width);
  width:var(--card-width);
  aspect-ratio:2 / 3;
  container-type:inline-size;
  position:relative;
  filter:drop-shadow(0 8px 8px #0008);
  transition:transform .3s;
}
.card .art {
  position:absolute;
  left:9.86%;
  top:13.15%;
  width:80.28%;
  height:50.7%;
  object-fit:cover;
}
.card .frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%
}
.card .name {
  position:absolute;
  left:7%;
  right:7%;
  bottom:18.3%;
  text-align:center;
  font-size:clamp(10px,8.45cqw,12px);
  line-height:1.05;
  font-weight:bold;
  text-shadow:0 2px 3px #000;
}
.atk,.life {
  position:absolute;
  bottom:2.35%;
  width:24%;
  text-align:center;
  font:bold clamp(14px,14cqw,20px) system-ui;
  text-shadow:0 2px 3px #000;
}
.atk {
  left:3.52%;
  color:var(--damage)
}
.life {
  right:3.52%
}
.badges {
  position:absolute;
  right:0;
  top:21.13%;
  display:grid;
  gap:2px;
}
.badges img {
  width:19.72cqw;
  height:19.72cqw;
}
.boss {
  z-index:2;
  filter:drop-shadow(0 10px 14px #d64550) drop-shadow(0 0 5px #e8b84b)
}
.crown {
  position:absolute;
  right:0;
  bottom:0;
  color:var(--gold);
  font-size:17cqw
}
.lane {
  background:linear-gradient(90deg,transparent,#d6455033 20%,#e8c46855 50%,#46c2cb33 80%,transparent);
  height:3px;
  align-self:center
}
#log {
  position:fixed;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%) translateY(20px);
  opacity:0;
  background:#14101cee;
  border:1px solid var(--gold);
  padding:12px 24px;
  border-radius:6px;
  text-transform:uppercase;
  transition:.2s;
  pointer-events:none
}
#log.show {
  opacity:1;
  transform:translate(-50%,-50%)
}
.hero-hit:after {
  content:'';
  position:fixed;
  inset:0;
  box-shadow:inset 0 0 130px var(--damage);
  pointer-events:none;
  animation:vignette .25s
}
.draft,.end {
  position:relative;
  justify-items:center;
  gap:8px;
  padding:16px;
}
.banner {
  display:block;
  width:min(100%,1024px);
  height:clamp(40px,9vh,96px);
  height:clamp(40px,9dvh,96px);
  object-fit:contain;
  opacity:.75;
}
.draft h1,.end h1 {
  font-size:clamp(2rem,6vw,3rem);
  margin:0;
}
.draft>p,.end>p {
  margin:0;
}
.title-actions { display:grid; justify-items:center; gap:12px; margin-top:18px; }
.title-actions .secondary { width:320px; min-height:56px; border:1px solid #e8c46888; border-radius:8px; background:#2a2140; color:var(--bone); font:700 1rem/1.2 system-ui,sans-serif; cursor:pointer; transition:var(--auth-hover,200ms) transform,var(--auth-hover,200ms) filter; }
.title-actions .secondary:hover,.title-actions .secondary:focus-visible { transform:translateY(-2px); filter:brightness(1.15); }
.title-actions .secondary:disabled { cursor:wait; opacity:.7; transform:none; }
.title-actions .auth-status { margin:0; min-height:56px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; color:var(--teal); }
.premium-badge { padding:4px 8px 3px; border:1px solid #e8c468aa; border-radius:999px; background:#e8c46818; color:var(--gold); font:800 11px/1 system-ui,sans-serif; letter-spacing:.12em; box-shadow:0 0 12px #e8c46824; }
.title-actions .upgrade-button { border-color:var(--gold); background:linear-gradient(135deg,#4a3520,#2a2140); color:var(--gold); }
.title-actions .purchase-note { max-width:420px; margin:0; color:var(--bone); font:600 14px/20px system-ui,sans-serif; }
.gallery-screen { place-content:start center; gap:18px; overflow-y:auto; padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.gallery-screen h1 { margin:0; color:var(--gold); font-size:clamp(36px,7vw,64px); letter-spacing:.08em; }
.gallery-intro { margin:0; color:var(--dim); }
.gallery-grid { width:min(1200px,100%); display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; align-items:stretch; }
.gallery-card { min-width:0; display:grid; grid-template-rows:auto auto auto auto auto 1fr; justify-items:center; gap:7px; padding:12px; border:1px solid #b08d57; border-radius:10px; background:var(--panel); text-align:center; box-shadow:0 8px 24px #14101c99; }
.gallery-card--rare { border-color:#c0c6d4; } .gallery-card--mythic { border-color:var(--gold); }
.gallery-card__visual { position:relative; width:min(180px,100%); aspect-ratio:2 / 3; }
.gallery-card__art { position:absolute; left:13.04%; top:13.04%; width:73.92%; height:49.28%; object-fit:cover; }
.gallery-card__frame { position:absolute; inset:0; width:100%; height:100%; }
.gallery-card h2 { margin:0; color:var(--bone); font:800 20px/24px Georgia,serif; }
.gallery-card p { margin:0; }
.gallery-card__stats { color:var(--bone); font:800 15px/22px system-ui; }
.gallery-card__tier { color:var(--gold); font:800 12px/18px system-ui; letter-spacing:.1em; text-transform:uppercase; }
.gallery-card__keywords { color:#c9bfd4; font:700 13px/19px system-ui; }
.gallery-card__rules { align-self:start; color:var(--dim); font:500 14px/20px system-ui; }
.gallery-screen>.secondary { min-width:160px; min-height:48px; padding:10px 18px; border:1px solid #9a8fa8; border-radius:6px; background:var(--panel); color:var(--bone); cursor:pointer; font:700 16px/24px system-ui; }
@media(max-width:560px) { .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .gallery-card { padding:8px; } .gallery-card h2 { font-size:16px; line-height:20px; } .gallery-card__stats,.gallery-card__keywords,.gallery-card__rules { font-size:12px; line-height:17px; } .gallery-screen>.secondary { width:100%; } }
.cosmetics-screen { place-content:start center; gap:18px; overflow-y:auto; padding:max(32px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
.cosmetics-screen h1 { margin:0; color:var(--gold); font-size:clamp(36px,7vw,64px); letter-spacing:.08em; }
.cosmetics-intro,.bazar-note { max-width:60ch; margin:0 auto; }
.bazar-note { padding:12px 16px; border:1px solid #e8c46866; border-radius:6px; background:#e8c4680d; color:var(--gold)!important; }
.cosmetics-state { width:min(1080px,100%); display:grid; gap:18px; }
.cosmetics-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; width:100%; }
.cosmetics-grid--compact { grid-template-columns:repeat(auto-fit,minmax(150px,220px)); justify-content:center; }
.cosmetic-tile { min-width:0; display:grid; grid-template-rows:150px auto auto; gap:8px; padding:12px; border:1px solid #9a8fa873; border-radius:8px; background:var(--raised); color:var(--bone); text-align:left; font-family:system-ui,sans-serif; }
button.cosmetic-tile { cursor:pointer; }
.cosmetic-tile:hover,.cosmetic-tile:focus-visible,.cosmetic-tile.is-selected { border-color:var(--gold); box-shadow:0 0 0 2px #e8c46844; }
.cosmetic-tile__art { width:100%; height:150px; object-fit:cover; border-radius:5px; background:var(--panel); }
.cosmetic-tile__name { font-size:17px; line-height:22px; }
.cosmetic-tile__earn { color:var(--dim); font-size:14px; line-height:20px; }
.profile-group { display:grid; gap:12px; padding:18px; border:1px solid #9a8fa84d; border-radius:8px; background:#1e1830cc; }
.profile-group h2 { margin:0; color:var(--gold); font-size:22px; }
.profile-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.profile-badges .cosmetic-tile { width:180px; }
.cosmetics-offline,.cosmetics-empty { grid-column:1/-1; margin:0; padding:16px; color:var(--dim); text-align:center; }
@media(max-width:560px) { .cosmetics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .cosmetic-tile { grid-template-rows:110px auto auto; padding:9px; } .cosmetic-tile__art { height:110px; } .cosmetics-screen>.primary { width:100%; height:64px; } }
.draft-charge { color:var(--gold); font:700 12px/16px system-ui; letter-spacing:.08em; }
.draft-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }
.draft-actions .secondary { min-width:112px; min-height:44px; padding:9px 16px; border:1px solid #5d4a70; border-radius:6px; background:var(--panel); color:var(--bone); cursor:pointer; font:700 14px/20px system-ui; }
.draft-actions .secondary:hover,.draft-actions .secondary:focus-visible { border-color:var(--gold); background:var(--raised); }
.draft-actions .secondary:disabled { opacity:.5; filter:grayscale(1); cursor:not-allowed; }
.draft-deck { width:min(720px,100%); padding:8px 16px; border:1px solid #86602e; border-radius:3px; background:#0d0a12; text-align:left; }
.draft-deck[hidden] { display:none; }
.draft-deck__card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:9px 0; border-bottom:1px solid #3a2d46; }
.draft-deck__card:last-child { border-bottom:0; }
.draft-deck__name { min-width:0; color:var(--bone); font:700 14px/18px system-ui; }
.draft-deck__stats { color:var(--gold); font:700 12px/18px system-ui; white-space:nowrap; }
.draft-deck__keyword { grid-column:1/-1; color:#ccbfb1; font:500 14px/20px system-ui; }
#offers {
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:clamp(12px,3vw,40px);
  margin-top:4px;
  flex-wrap:wrap;
  max-width:100%;
}
.draft-card {
  width:230px;
  max-width:100%;
  background:#14101c;
  border:1px solid #5d4a70;
  border-radius:12px;
  position:relative;
  cursor:pointer;
  transition:.2s transform,.2s filter;
  padding:8px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.draft-card:hover,.draft-card:focus-visible {
  transform:translateY(-3px);
  filter:brightness(1.15)
}
.draft-art {
  position:absolute;
  left:13.04%;
  top:13.04%;
  width:73.92%;
  height:49.28%;
  object-fit:cover;
}
.draft-frame {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.draft-card strong,.draft-card span,.draft-card b,.draft-card small {
  position:relative;
  display:block;
}
.draft-card strong {
  font-size:18px
}
.draft-card span {
  color:var(--gold)
}
.draft-card small {
  color:var(--dim);
  font:13px/1.3 system-ui;
  margin-top:3px
}
.enemy-preview {
  width:min(920px,100%);
  display:grid;
  grid-template-columns:minmax(170px,.7fr) minmax(220px,1fr) minmax(260px,1.4fr);
  align-items:center;
  gap:12px 20px;
  padding:14px 18px;
  border:2px solid #c99b4a;
  border-radius:8px;
  background:#e8dcc3;
  box-shadow:0 8px 28px #14101ca8;
  color:#2a2118;
  text-align:left;
}
.enemy-preview__title { margin:0; color:#6b3e16; font:800 20px/24px Georgia,serif; letter-spacing:.05em; }
.enemy-preview__boss { padding-left:16px; border-left:1px solid #c99b4a; }
.enemy-preview__boss strong { font:800 18px/22px Georgia,serif; }
.enemy-preview__boss p { margin:4px 0 0; color:#6b5841; font:500 14px/19px system-ui,sans-serif; }
.enemy-preview__units { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; list-style:none; font:700 15px/20px system-ui,sans-serif; }
#battle-screen .enemy-preview--opening { position:fixed; left:50%; top:50%; z-index:29; translate:-50% -50%; transition:opacity 250ms ease,translate 250ms ease; }
#battle-screen .enemy-preview--opening.is-dismissed { opacity:0; translate:-50% -44%; pointer-events:none; }
#battle-screen .enemy-queue-panel {
  position:fixed;
  z-index:28;
  top:86px;
  right:clamp(12px,4vw,72px);
  width:min(360px,calc(100vw - 24px));
  max-height:calc(100vh - 110px);
  overflow:auto;
  padding:14px 18px;
  border:2px solid #c99b4a;
  border-radius:8px;
  background:#e8dcc3;
  box-shadow:0 8px 28px #14101ca8;
  color:#2a2118;
}
#battle-screen .enemy-queue-panel h2 { margin:0 0 8px; color:#6b3e16; font:800 18px/22px Georgia,serif; letter-spacing:.05em; }
#battle-screen .enemy-queue-list { margin:0; padding-left:28px; font:700 15px/24px system-ui,sans-serif; }
#battle-screen .deck-stack--enemy { cursor:pointer; }
#battle-screen .deck-stack--enemy:focus-visible { outline:2px solid #e8b84b; outline-offset:4px; }
.draft-card .draft-effect {
  min-height:3.9em;
  display:flex;
  align-items:center;
  color:var(--bone);
  font-size:14px;
}
.draft-card .draft-confirm {
  position:relative;
  display:block;
  width:100%;
  margin-top:auto;
  padding:8px 10px;
  border:1px solid var(--gold);
  border-radius:5px;
  background:var(--raised);
  color:var(--bone);
  font:700 14px/20px system-ui;
}
.deck-event { align-content:start; overflow:hidden; }
.deck-event__rule { max-width:720px; color:var(--bone); text-align:center; font:600 16px/22px system-ui; }
.deck-event__count { color:var(--gold); font:700 13px/18px system-ui; letter-spacing:.08em; text-transform:uppercase; }
.deck-event__choices { width:min(1180px,100%); min-height:250px; max-height:48vh; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); align-items:start; gap:16px; padding:8px 12px 20px; scrollbar-color:var(--gold) var(--panel); }
.deck-event__card { width:100%; min-width:0; transition:transform var(--event-hover) ease,filter var(--event-hover) ease,opacity var(--event-hover) ease,box-shadow var(--event-hover) ease; }
.deck-event__card[aria-pressed=true] { border-color:var(--gold); background:var(--raised); box-shadow:0 0 0 3px var(--gold),0 0 28px #e8b84b66; transform:translateY(-6px); }
.deck-event__card[aria-pressed=true] .draft-confirm { background:var(--gold); color:var(--bg); }
.deck-event__choices.is-resolving { pointer-events:none; }
.deck-event__card.is-departing { animation:event-card-leave var(--event-leave) ease-in forwards; }
.deck-event__card.is-arriving { animation:event-card-arrive var(--event-arrive) ease-out both; box-shadow:0 0 0 2px var(--gold),0 0 32px #e8b84b88; }
.deck-event__preview { max-height:none; overflow:visible; grid-template-columns:minmax(180px,240px) auto minmax(180px,240px); justify-content:center; align-items:center; }
.deck-event__preview-card { display:grid; justify-items:center; gap:8px; }
.deck-event__preview-card .draft-card { width:100%; }
.deck-event__preview-card.is-new .draft-card { animation:event-card-arrive var(--event-arrive) ease-out both; box-shadow:0 0 0 2px var(--gold),0 0 32px #e8b84b88; }
.deck-event__preview-label,.deck-event__tier { color:var(--bone); font:700 14px/20px system-ui; letter-spacing:.06em; text-transform:uppercase; }
.deck-event__preview-card.is-new .deck-event__preview-label { color:var(--gold); }
.deck-event__tier { opacity:.8; font-size:12px; }
.deck-event__arrow { color:var(--gold); font:700 36px/1 system-ui; }
.deck-event .primary:disabled { filter:grayscale(1); opacity:.55; cursor:not-allowed; }
@keyframes event-card-leave { to { opacity:0; transform:translateY(-18px) scale(.92); filter:brightness(1.6); } }
@keyframes event-card-arrive { from { opacity:0; transform:translateY(18px) scale(.92); filter:brightness(1.8); } }
@media (prefers-reduced-motion:reduce) { .deck-event__card.is-departing,.deck-event__card.is-arriving,.deck-event__preview-card.is-new .draft-card { animation-duration:1ms; } }
@media (max-width:620px) { .deck-event__preview { grid-template-columns:minmax(130px,1fr) auto minmax(130px,1fr); gap:8px; padding-inline:0; } .deck-event__arrow { font-size:24px; } }
.end {
  gap:12px
}
.end h1 {
  color:var(--gold)
}
.lost h1 {
  color:var(--red)
}
.end>.end-trophy {
  max-width:560px; padding:10px 16px; border:1px solid var(--gold); border-radius:6px; background:#e8b84b1f; color:var(--gold); font-weight:800; letter-spacing:.03em
}
.save-panel { width:min(760px,100%); padding:16px; border:1px solid #5d4a70; border-radius:10px; background:#14101cdd; }
.save-panel h2 { margin:0 0 12px; color:var(--bone); font:800 22px/28px Georgia,serif; }
.save-panel__choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.save-panel .primary { width:100%; height:auto; min-height:64px; padding:12px; background:var(--raised); border:1px solid var(--gold); border-radius:7px; font-size:1rem; }
.save-panel__slot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.save-panel__summary { color:var(--dim); font:600 13px/18px system-ui,sans-serif; text-shadow:none; }
.save-panel__confirm { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; }
.save-panel__confirm p { flex-basis:100%; margin:0; color:var(--bone); }
.save-panel__confirm .primary { width:min(240px,100%); }
.save-panel__success { margin:0; color:var(--gold)!important; font-weight:800!important; }
.save-panel__error { margin:0; color:var(--red)!important; font-weight:700!important; }
@keyframes vignette {
  50% {
    box-shadow:inset 0 0 180px var(--damage)
  }

}

/* Art has its own proportional slot; copy can grow without covering the frame. */
.draft-visual {
  position:relative;
  display:block;
  flex:none;
  width:min(100%,clamp(120px,28vh,206px));
  width:min(100%,clamp(120px,28dvh,206px));
  aspect-ratio:2 / 3;
}
.starter-select { height:100vh; height:100dvh; display:flex; flex-direction:column; gap:12px; }
.starter-select h1 { flex:none; margin:0; font-size:clamp(2rem,5vw,3.5rem); }
.starter-select__intro { flex:none; margin:0; }
.starter-select__choices { width:min(1200px,100%); min-height:0; margin-inline:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; overflow-y:auto; }
.starter-option { min-width:0; display:flex; flex-direction:column; align-self:start; }
.starter-choice { width:100%; min-width:0; padding:16px; border:1px solid #5d4a70; border-radius:12px; background:#14101c; color:var(--bone); cursor:pointer; display:flex; flex-direction:column; gap:8px; align-items:stretch; transition:transform var(--starter-hover) ease,filter var(--starter-hover) ease,box-shadow var(--starter-hover) ease; }
.starter-choice:hover,.starter-choice:focus-visible { transform:translateY(-3px); filter:brightness(1.12); }
.starter-choice[aria-pressed=true] { border-color:var(--gold); background:var(--raised); box-shadow:0 0 0 3px var(--gold),0 0 28px #e8b84b66; }
.starter-choice__name { font:800 24px/28px Georgia,serif; color:var(--gold); }
.starter-choice__blurb { min-height:42px; color:var(--dim); font:500 14px/20px system-ui,sans-serif; }
.starter-choice__cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.starter-choice .draft-card { width:100%; min-width:0; padding:3px; border-radius:5px; cursor:inherit; pointer-events:none; }
.starter-choice .draft-visual { width:100%; }
.starter-choice .draft-card>strong { min-height:22px; font-size:9px; line-height:11px; }
.starter-choice .draft-card>span:not(.draft-visual),.starter-choice .draft-card>b,.starter-choice .draft-card>small { display:none; }
.starter-choice .cost-dot { left:-3px; top:-3px; width:22px; height:22px; font-size:10px; line-height:12px; }
.starter-deck__toggle { min-height:44px; margin-top:8px; padding:9px 16px; border:1px solid #5d4a70; border-radius:6px; background:var(--panel); color:var(--bone); cursor:pointer; font:700 14px/20px system-ui; transition:transform var(--starter-hover) ease,filter var(--starter-hover) ease; }
.starter-deck__toggle:hover,.starter-deck__toggle:focus-visible { transform:translateY(-2px); filter:brightness(1.15); }
.starter-deck { margin-top:8px; padding:8px 12px; border:1px solid #5d4a70; border-radius:8px; background:#0d0a12; text-align:left; }
.starter-deck[hidden] { display:none; }
.starter-deck__card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:9px 0; border-bottom:1px solid #3a2d46; }
.starter-deck__card:last-child { border-bottom:0; }
.starter-deck__name { min-width:0; color:var(--bone); font:700 14px/18px system-ui; }
.starter-deck__stats { color:var(--gold); font:700 12px/18px system-ui; white-space:nowrap; }
.starter-deck__keyword { grid-column:1/-1; color:var(--dim); font:500 12px/16px system-ui; }
.starter-select__actions { flex:none; display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:4px; }
.starter-select__actions .secondary { min-width:112px; min-height:44px; padding:9px 16px; border:1px solid #5d4a70; border-radius:6px; background:var(--panel); color:var(--bone); cursor:pointer; font:700 14px/20px system-ui; transition:var(--starter-hover) transform,var(--starter-hover) filter; }
.starter-select__actions .secondary:hover,.starter-select__actions .secondary:focus-visible { transform:translateY(-2px); filter:brightness(1.15); }
.primary { max-width:100%; }
@media(max-width:760px) {
  .draft { place-content:start center; overflow-y:auto; }
  .draft-deck__card { grid-template-columns:1fr; }
  .draft-deck__keyword { grid-column:auto; }
  .starter-select__choices { grid-template-columns:1fr; }
  .starter-choice__blurb { min-height:0; }
  .enemy-preview { grid-template-columns:1fr; gap:8px; padding:12px; }
  .enemy-preview__title { font-size:18px; line-height:22px; }
  .enemy-preview__boss { padding:8px 0 0; border-left:0; border-top:1px solid #c99b4a; }
  .enemy-preview__units { font-size:14px; }
  #battle-screen .enemy-preview--opening { width:calc(100% - 24px); }
  #battle-screen .enemy-queue-panel { top:64px; right:12px; max-height:calc(100vh - 76px); }
}
#log { max-width:calc(100% - 24px); text-align:center; z-index:5; }
@media (max-width:760px) {
  .battle { grid-template-rows:auto minmax(0,1fr) 12px minmax(0,1fr); }
  /* HUD above the board leaves its entire width available to the warband. */
  .side { grid-template-columns:minmax(0,1fr) 56px; grid-template-rows:76px minmax(0,1fr); gap:4px; }
  .hero { display:flex; align-items:center; gap:8px; }
  .hero>img { width:60px; margin:0; border-width:3px; }
  .hp { width:112px; margin:0; flex:none; }
  .charger { width:44px; }
  .charger strong { font-size:1.75rem; }
  .charger .cost { width:24px; height:24px; font-size:12px; left:0; top:0; }
  .board { grid-column:1 / -1; gap:8px; padding:24px 8px; }
  .card { --card-width:min(112px,calc((100cqh - 136px) * 2 / 3)); }
  .battle header { font-size:12px; padding:8px; gap:8px; letter-spacing:.05em; }
  .battle header small { display:none; }
  #phase { text-align:right; }
  .screen { padding:16px; }
}

/* War Ledger: all fight geometry is frozen as inline variables at mount. */
@property --loss-width { syntax:'<percentage>'; inherits:false; initial-value:0%; }
#battle-screen { --slot-w:216px; --slot-gap:24px; --card-h:324px; --name-size:16px; --name-line:18px; --pip-size:48px; --stat-size:28px; --badge-size:28px; --name-bottom:58px; height:auto; min-height:100vh; display:grid; grid-template-columns:minmax(0,1200px); grid-template-rows:48px auto 34px 0 auto; justify-content:center; align-content:start; row-gap:0; padding:24px max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); overflow:visible; background:linear-gradient(#14101cb8,#14101cb8),url(assets/bg_battlefield.png) center/cover fixed; box-shadow:inset 0 0 96px #14101c99; font:500 14px/20px system-ui,sans-serif; }
#battle-screen [hidden] { display:none!important; }
#battle-screen * { font-variant-numeric:tabular-nums lining-nums; }
#battle-screen :focus-visible { outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 2px var(--bg); }
#battle-screen .battle-header { align-self:start; height:40px; display:grid; grid-template-columns:180px 1fr auto; align-items:center; padding:0 8px 0 16px; border:1px solid #9a8fa873; background:var(--panel); letter-spacing:0; }
#battle-screen .battle-fight { font:700 18px/24px Georgia,serif; letter-spacing:.06em; }
#battle-screen .battle-phase { text-align:center; font:600 16px/24px system-ui; letter-spacing:.02em; }
#battle-screen .header-count { text-align:right; }
.ranked-screen { width:min(760px,calc(100% - 32px)); margin:auto; padding:clamp(24px,5vw,56px); gap:22px; }
.ranked-intro { max-width:52ch; margin:0 auto; color:var(--dim); text-align:center; }
.ranked-ratings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:100%; }
.ranked-rating { display:grid; gap:4px; padding:18px; border:1px solid #c99b4a66; border-radius:8px; background:var(--panel); text-align:left; }
.ranked-rating__label { color:var(--gold); font:700 14px/20px system-ui; letter-spacing:.1em; text-transform:uppercase; }
.ranked-rating__value { font:800 clamp(28px,5vw,42px)/1 Georgia,serif; }
.ranked-rating small { color:var(--dim); font-size:14px; }
.ranked-state { width:100%; min-height:154px; display:grid; place-items:center; }
.ranked-picker,.ranked-queued,.ranked-result { width:100%; display:grid; gap:16px; padding:22px; border:1px solid #9a8fa873; border-radius:8px; background:var(--raised); text-align:center; }
.ranked-picker__select { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--gold); border-radius:6px; background:var(--panel); color:var(--bone); font:600 16px/24px system-ui; }
.ranked-result--win h2 { color:#7be382; }
.ranked-result--loss h2 { color:var(--damage); }
.ranked-result__movement { margin:0; font:800 clamp(24px,4vw,36px)/1.2 Georgia,serif; }
.ranked-offline,.ranked-empty { padding:16px; color:var(--dim); text-align:center; }
@media(max-width:560px) { .ranked-ratings { grid-template-columns:1fr; } .ranked-screen { width:100%; padding:24px 16px max(24px,env(safe-area-inset-bottom)); } }
.friendly-screen { width:min(760px,calc(100% - 32px)); margin:auto; padding:clamp(24px,5vw,56px); gap:22px; }
.friendly-intro { max-width:56ch; margin:0 auto; color:var(--dim); text-align:center; }
.friendly-state { width:100%; min-height:240px; display:grid; place-items:center; }
.friendly-picker,.friendly-result { width:100%; display:grid; gap:18px; padding:22px; border:1px solid #9a8fa873; border-radius:8px; background:var(--raised); }
.friendly-field { display:grid; gap:7px; color:var(--gold); font:700 14px/20px system-ui; letter-spacing:.08em; text-transform:uppercase; }
.friendly-picker__select,.friendly-picker__input { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--gold); border-radius:6px; background:var(--panel); color:var(--bone); font:600 16px/24px system-ui; }
.friendly-picker__input::placeholder { color:#9a8fa8; }
.friendly-own-deck { display:grid; gap:10px; }
.friendly-deck-id-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; }
.friendly-deck-id__label { color:var(--dim); font:700 12px/18px system-ui; letter-spacing:.08em; text-transform:uppercase; }
.friendly-deck-id { overflow-wrap:anywhere; color:var(--bone); font:600 14px/20px ui-monospace,SFMono-Regular,Consolas,monospace; }
.friendly-deck-id__copy { min-width:88px; min-height:44px; padding:8px 12px; border:1px solid #9a8fa8; border-radius:6px; background:var(--panel); color:var(--bone); cursor:pointer; font:700 14px/20px system-ui; }
.friendly-result { text-align:center; }
.friendly-result--win h2 { color:#7be382; }
.friendly-result--loss h2 { color:var(--damage); }
.friendly-result__rounds { margin:0; color:var(--bone); font:800 clamp(24px,4vw,36px)/1.2 Georgia,serif; }
.friendly-result .secondary { min-height:48px; border:1px solid #9a8fa8; border-radius:6px; background:var(--panel); color:var(--bone); font:700 16px/24px system-ui; cursor:pointer; }
.friendly-error { margin:0; color:var(--damage); text-align:center; }
.friendly-offline,.friendly-empty { padding:16px; color:var(--dim); text-align:center; }
@media(max-width:560px) { .friendly-screen { width:100%; padding:24px 16px max(24px,env(safe-area-inset-bottom)); } .friendly-picker,.friendly-result { padding:18px; } .friendly-deck-id-row { grid-template-columns:1fr auto; } .friendly-deck-id__label { grid-column:1 / -1; } }
.replay-viewer { min-height:100vh; min-height:100dvh; background:radial-gradient(circle at top,#2a2140,#14101c 64%); }
.replay-header { position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left)); border-bottom:1px solid #9a8fa873; background:#14101cf2; }
.replay-header h1 { margin:0; font:700 clamp(16px,2vw,24px)/1.25 Georgia,serif; color:var(--bone); }
.replay-controls { display:flex; gap:10px; flex:none; }
.replay-header .primary,.replay-end .primary,.replay-message .primary { width:auto; min-width:132px; height:48px; padding:0 24px; font-size:16px; background:var(--raised); border:1px solid var(--gold); border-radius:6px; }
.replay-decks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; padding:20px; }
.replay-deck { min-width:0; padding:16px; border:1px solid #9a8fa873; border-radius:8px; background:#1e1830d9; }
.replay-deck h2 { margin:0 0 12px; color:var(--gold); font-size:20px; }
.replay-deck__cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
.replay-deck .draft-card { width:100%; min-width:0; }
.replay-viewer.is-playing .replay-decks { max-height:230px; overflow:auto; border-bottom:1px solid #9a8fa873; }
.replay-stage { position:relative; min-height:120px; }
.replay-stage:empty::before { content:'Loading replay…'; display:block; padding:28px; color:var(--dim); font:16px/1.5 system-ui,sans-serif; text-align:center; }
.replay-end { position:fixed; inset:50% auto auto 50%; z-index:45; translate:-50% -50%; display:grid; gap:16px; min-width:min(420px,calc(100% - 32px)); padding:32px; border:2px solid var(--gold); border-radius:10px; background:#1e1830f5; box-shadow:0 18px 70px #000c; text-align:center; }
.replay-end h2 { margin:0; color:var(--gold); font-size:clamp(28px,6vw,48px); }
.replay-message { gap:16px; }
.replay-id-field { width:min(100%,420px); min-height:48px; padding:10px 12px; border:1px solid var(--gold); border-radius:6px; background:var(--bg); color:var(--bone); font:600 15px/1.4 ui-monospace,monospace; }
.replay-id-field--header { min-width:180px; min-height:42px; }
.inline-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:16px; background:#000b; }
.inline-modal__dialog { display:grid; gap:12px; width:min(460px,100%); padding:24px; border:1px solid var(--gold); border-radius:10px; background:var(--panel); box-shadow:0 20px 70px #000c; }
.inline-modal__dialog h2,.inline-modal__dialog p { margin:0; }
@media(max-width:760px) { .replay-header { position:relative; align-items:flex-start; flex-direction:column; } .replay-decks { grid-template-columns:1fr; padding:12px; } .replay-deck__cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#battle-screen .battle-header__meta { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
#battle-screen .speed-control { display:flex; border:1px solid #c99b4a; border-radius:4px; overflow:hidden; background:#14101c; }
#battle-screen .speed-control__button { min-width:32px; height:28px; padding:0 5px; border:0; border-right:1px solid #c99b4a66; border-radius:0; background:#2a2140; color:#ede6d6; font:700 12px/1 system-ui; }
#battle-screen .speed-control__button:last-child { border-right:0; }
#battle-screen .speed-control__button[aria-pressed=true] { background:#c99b4a; color:#2a2118; }
#battle-screen .speed-control__button.is-locked { min-width:48px; background:#211a2c; color:#c9bfd4; cursor:pointer; }
#battle-screen .speed-control__button.is-locked:hover,#battle-screen .speed-control__button.is-locked:focus-visible { background:#392b49; color:var(--gold); }
#battle-screen .mute-toggle { min-width:72px; }
#battle-screen .mute-toggle[aria-pressed=true] { background:#462c38; color:var(--bone); }
#battle-screen .side { position:relative; container-type:normal; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:108px auto; gap:8px; direction:ltr; }
#battle-screen .side--player { grid-template-rows:auto 108px; }
#battle-screen .side--player .side__info { grid-row:2; }
#battle-screen .side--player .board-scroll { grid-row:1; }
#battle-screen .side__info { display:flex; gap:24px; align-items:center; min-width:0; position:relative; z-index:2; }
#battle-screen .side--enemy .side__info { flex-direction:row-reverse; }
#battle-screen .hero-panel { width:400px; height:96px; flex:none; border-radius:8px; background:var(--panel); position:relative; box-shadow:0 4px 12px #14101ca6; }
#battle-screen .hero-portrait { position:absolute; width:80px; height:80px; left:8px; top:8px; border:3px solid var(--red); border-radius:50%; object-fit:cover; background:var(--bg); box-shadow:0 0 12px #d645502e; }
#battle-screen .side--player .hero-portrait { border-color:var(--teal); box-shadow:0 0 12px #46c2cb2e; }
#battle-screen .hero-label { position:absolute; top:4px; left:104px; font-weight:600; letter-spacing:.04em; }
#battle-screen .hero-hp__text { position:absolute; left:104px; top:24px; font:800 32px/36px system-ui; background:var(--panel); }
#battle-screen .hero-hpbar { position:absolute; left:104px; right:16px; top:68px; height:20px; border:1px solid var(--dim); background:var(--bg); padding:2px; }
#battle-screen .hero-hpbar::before { content:''; position:absolute; left:2px; top:2px; bottom:2px; width:var(--loss-width,var(--health)); max-width:calc(100% - 4px); background:#ede6d659; }
#battle-screen .hero-hpbar::after { content:''; position:absolute; inset:-4px -8px; background:url(assets/panel_hp.png) center/100% 100%; pointer-events:none; opacity:.25; }
#battle-screen .hero-hpbar__fill { position:relative; height:100%; background:var(--red); transition:width 250ms ease-out; }
#battle-screen .side--player .hero-hpbar__fill { background:var(--teal); }
#battle-screen .hero-panel.is-low { outline:2px solid var(--damage); }
#battle-screen .hero-panel.is-healing { box-shadow:0 0 8px #7be38233; }
#battle-screen .deck-stack,#battle-screen .charger-slot { position:relative; width:72px; height:108px; flex:none; border-radius:8px; }
#battle-screen .deck-stack__layer { position:absolute; inset:0; background:url(assets/card_back.png) center/100% 100%; border-radius:8px; }
#battle-screen .deck-stack__layer--1 { translate:-4px -4px; } #battle-screen .deck-stack__layer--2 { translate:-2px -2px; }
#battle-screen .deck-stack.is-empty .deck-stack__layer { display:none; }
#battle-screen .deck-stack.is-empty .deck-stack__layer--1 { display:block; translate:0; filter:grayscale(1); opacity:.4; }
#battle-screen .deck-top { position:absolute; inset:0; }
#battle-screen .deck-count { position:absolute; z-index:6; right:-8px; bottom:-8px; min-width:32px; height:32px; padding:0 7px; display:grid; place-items:center; white-space:nowrap; background:var(--bg); border:2px solid var(--gold); border-radius:18px; font:700 18px/24px system-ui; }
#battle-screen .deck-label,#battle-screen .charger-label { position:absolute; bottom:0; left:0; right:0; text-align:center; background:var(--panel); font:600 14px/20px system-ui; z-index:5; }
#battle-screen .deck-plaque { width:176px; min-height:64px; padding:8px; background:var(--panel); border:1px solid #9a8fa873; border-radius:8px; }
#battle-screen .charger-slot { border:2px dashed var(--dim); background:url(assets/slot_charger.png) center/100% 100%; }
#battle-screen .card-face,#battle-screen .card-back { position:absolute; inset:0; }
#battle-screen .card__art { position:absolute; left:9.86%; top:13.15%; width:80.28%; height:50.7%; object-fit:cover; }
#battle-screen .card__frame,#battle-screen .card-back__image { position:absolute; inset:0; width:100%; height:100%; }
#battle-screen .card__name { display:none; }
#battle-screen .charger-card .card__art { opacity:.6; }
#battle-screen .cost-dot { position:absolute; left:-8px; top:-8px; width:48px; height:48px; z-index:9; border:0; background:url('assets/cost_gem.png') center/contain no-repeat; color:var(--bone); text-shadow:0 1px 2px #14101c; display:grid; place-items:center; font:700 18px/24px system-ui; }
.draft-visual .cost-dot { position:absolute; left:-8px; top:-8px; width:48px; height:48px; z-index:9; background:url('assets/cost_gem.png') center/contain no-repeat; color:#ede6d6; text-shadow:0 1px 2px #14101c; display:grid; place-items:center; font:700 18px/24px system-ui; }
#battle-screen .cost-dot__count { position:absolute; right:-8px; bottom:20px; width:44px; height:36px; z-index:10; display:grid; place-items:center; border:2px solid var(--bone); border-radius:8px; background:var(--raised); font:800 28px/32px system-ui; }
#battle-screen .is-scout-revealed { z-index:7; background:var(--panel); }
#battle-screen .charger-card { z-index:8; } #battle-screen .charger-card:has(~ .is-scout-revealed) .card-back__image { visibility:hidden; }
#battle-screen .board-scroll { min-width:0; width:100%; height:calc(var(--card-h) + 24px); overflow-x:auto; overflow-y:hidden; padding:12px 0; scrollbar-width:thin; scrollbar-color:var(--gold) var(--bg); }
#battle-screen .board-lane { position:relative; width:calc(20 * (var(--slot-w) + var(--slot-gap))); height:var(--card-h); }
#battle-screen .slot-ghosts { position:absolute; inset:0; display:flex; gap:var(--slot-gap); pointer-events:none; }
#battle-screen .slot-ghost { position:relative; flex:0 0 var(--slot-w); height:var(--card-h); border:0; border-radius:4px; background:url(assets/slot-empty.png) center/100% 100% no-repeat; filter:drop-shadow(0 10px 20px rgba(0,0,0,.62)) drop-shadow(0 2px 4px rgba(0,0,0,.85)); }
#battle-screen .slot-ghost::after { content:''; position:absolute; inset:6%; border-radius:3px; box-shadow:inset 0 0 22px 7px rgba(0,0,0,.72); pointer-events:none; }
#battle-screen .side-turn-marker { position:absolute; left:-18px; top:50%; z-index:8; width:28px; padding:10px 4px; translate:0 -50%; border:1px solid #9a8fa8; border-radius:5px; background:#211a2ce6; color:#9a8fa8; font:900 11px/12px system-ui; letter-spacing:.08em; text-align:center; writing-mode:vertical-rl; transform:rotate(180deg); transition:color var(--fx-duration,150ms),border-color var(--fx-duration,150ms),box-shadow var(--fx-duration,150ms),background var(--fx-duration,150ms); }
#battle-screen .side.is-active-turn .side-turn-marker { border-color:var(--gold); background:#392b49; color:var(--bone); box-shadow:0 0 14px #e8b84b99,inset 0 0 8px #e8b84b38; }
#battle-screen .side--player.is-active-turn .side-turn-marker { border-color:var(--teal); box-shadow:0 0 14px #46c2cbaa,inset 0 0 8px #46c2cb38; }
#battle-screen .march-control { z-index:9; display:flex; align-items:center; justify-content:center; gap:12px; width:min(620px,calc(100% - 72px)); min-height:34px; margin:auto; padding:3px 12px; border:1px solid #c99b4a73; border-radius:6px; background:#1e1830e6; }
#battle-screen .march-control__label { flex:none; color:var(--bone); font:800 11px/16px system-ui; letter-spacing:.08em; }
#battle-screen .march-control__slider { width:100%; accent-color:var(--gold); cursor:ew-resize; }
#battle-screen .board-empty { position:absolute; left:calc((5 * (var(--slot-w) + var(--slot-gap)) - var(--slot-gap)) / 2); top:45%; transform:translateX(-50%); width:240px; height:32px; padding:6px; text-align:center; background:var(--panel); }
#battle-screen .card { position:absolute; left:0; top:0; width:var(--slot-w); height:var(--card-h); aspect-ratio:auto; transition:transform 300ms ease; filter:drop-shadow(0 8px 12px #14101ccc); z-index:2; border-radius:10px; }
#battle-screen .card__idle { position:absolute; inset:0; border-radius:inherit; }
#battle-screen .card__status { position:absolute; left:50%; top:8px; z-index:8; translate:-50% 0; min-width:38px; padding:2px 6px; border:1px solid var(--dim); border-radius:10px; background:#14101ce6; color:var(--dim); font:900 11px/14px system-ui; letter-spacing:.06em; text-align:center; }
#battle-screen .card__status:empty { display:none; }
#battle-screen .is-summoning-sick .card__idle { filter:saturate(.55) brightness(.78); }
#battle-screen .is-summoning-sick .card__status { display:block; color:#c9bfd4; }
#battle-screen .has-rush .card__status { display:block; border-color:var(--gold); color:var(--gold); box-shadow:0 0 8px #e8b84b66; }
#battle-screen .card .card__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; position:absolute; left:7%; right:7%; bottom:var(--name-bottom); height:36px; text-align:center; background:var(--panel); border:1px solid #b08d57; border-radius:4px; font:700 var(--name-size)/var(--name-line) Georgia,serif; }
#battle-screen .boss .card__name { bottom:calc(var(--name-bottom) + 54px); }
#battle-screen .card__trait { position:absolute; left:12%; right:12%; bottom:var(--name-bottom); min-height:44px; margin:0; padding:3px 5px; display:grid; place-items:center; overflow:hidden; z-index:3; border:1px solid #b08d57; border-radius:4px; background:var(--panel); color:var(--bone); font:500 11px/13px system-ui,sans-serif; text-align:center; }
#battle-screen .card__atk,#battle-screen .card__hp { position:absolute; bottom:4px; width:var(--pip-size); height:var(--pip-size); display:grid; place-items:center; border:2px solid var(--dim); border-radius:50%; background:var(--bg); font:800 var(--stat-size)/1 system-ui; z-index:4; }
#battle-screen .card__atk { left:8px; } #battle-screen .card__hp { right:8px; }
#battle-screen .card__atk,#battle-screen .card__hp { color:var(--bone); }
#battle-screen[data-card-tier=large] .card__atk::before,#battle-screen[data-card-tier=large] .card__hp::before { position:absolute; bottom:100%; background:var(--panel); color:var(--bone); font:500 14px/20px system-ui; }
#battle-screen[data-card-tier=large] .card__atk::before { content:'ATK'; } #battle-screen[data-card-tier=large] .card__hp::before { content:'HP'; }
#battle-screen .is-damaged .card__hp { border-color:var(--red); } #battle-screen .is-damaged .card__hp::after { content:''; position:absolute; width:8px; height:4px; background:var(--red); top:0; }
#battle-screen .is-buffed { color:#7be382; box-shadow:0 3px #7be382; } #battle-screen .is-buffed::after { content:'+'; position:absolute; right:-4px; top:-4px; color:#7be382; background:var(--bg); font-size:14px; }
#battle-screen .is-reduced { color:var(--damage); }
#battle-screen .has-aura { border-bottom:2px solid #7be382; } #battle-screen .has-shield { outline:2px solid #ffd966; box-shadow:0 0 12px #ffd9664d; }
#battle-screen .card__badges { position:absolute; right:0; top:21%; display:grid; gap:4px; z-index:5; }
#battle-screen .card__badge { width:var(--badge-size); height:var(--badge-size); background:var(--panel); border-radius:50%; }
#battle-screen .card__badge--more { display:grid; place-items:center; }
#battle-screen .card__crown { position:absolute; right:20px; bottom:52px; font:20px/20px system-ui; color:var(--gold); background:var(--panel); z-index:6; }
#battle-screen .boss { filter:drop-shadow(0 8px 12px #d6455038); }
#battle-screen { overflow:hidden; contain:paint; }
#battle-screen .ember-layer { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#battle-screen .ember { position:absolute; left:var(--ember-x); bottom:-10px; width:3px; height:3px; border-radius:50%; background:#c65b32; box-shadow:0 0 7px #7a416e; opacity:0; animation:ember-rise var(--ember-duration) linear var(--ember-delay) infinite; }
#battle-screen .battle-header,#battle-screen .side,#battle-screen .battle-log { z-index:1; }
#battle-screen .fx-hit-stop { animation-play-state:paused!important; }
@keyframes ember-rise { 0% { transform:translate3d(0,0,0) scale(.6); opacity:0; } 12% { opacity:.32; } 78% { opacity:.16; } 100% { transform:translate3d(var(--ember-drift),-68vh,0) scale(1.15); opacity:0; } }
#battle-screen .is-attacker { border-top:2px solid var(--bone); } #battle-screen .is-target { border-left:2px solid var(--bone); border-right:2px solid var(--bone); }
#battle-screen .lane-arrow { position:absolute; top:116px; width:44px; height:44px; z-index:5; border:1px solid var(--dim); background:var(--panel); border-radius:8px; font:28px system-ui; }
#battle-screen .lane-arrow--prev { left:0; } #battle-screen .lane-arrow--next { right:0; } #battle-screen .lane-arrow:disabled { color:var(--dim); opacity:.7; }
#battle-screen .side::before,#battle-screen .side::after { content:''; position:absolute; top:116px; bottom:0; width:16px; pointer-events:none; z-index:3; background:linear-gradient(90deg,#14101c99,transparent); }
#battle-screen .side::after { right:0; rotate:180deg; }
#battle-screen .side--player::before,#battle-screen .side--player::after { top:0; bottom:116px; }
#battle-screen .side.is-active-turn .board-scroll { box-shadow:inset 0 3px #c99b4a,inset 0 -3px #c99b4a,0 0 12px #c99b4a38; }
#battle-screen .mana-bank { min-width:72px; padding:10px 8px; border:2px solid #5b7fc7; border-radius:10px; background:#17233d; color:#dce9ff; font:800 16px/20px system-ui; text-align:center; box-shadow:inset 0 0 12px #5b7fc733; }
#battle-screen .mana-bank.is-active { border-color:#9fc5ff; box-shadow:0 0 16px #78a9ff88,inset 0 0 12px #5b7fc355; }
#battle-screen .battle-log { position:relative; height:0; background:transparent; z-index:10; border:0; overflow:visible; }
.battle-log__history { position:fixed; right:16px; bottom:16px; left:auto; top:auto; translate:none; z-index:11; width:min(360px,calc(100vw - 32px)); padding:4px 52px 4px 12px; text-align:left; background:#1e1830e6; border:1px solid #c99b4a59; border-radius:4px; }
.battle-log__line { display:none; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.battle-log__line:last-child { display:block; }
.battle-log__history.is-expanded { width:min(420px,calc(100vw - 32px)); max-height:min(40vh,320px); overflow:auto; }
.battle-log__history.is-expanded .battle-log__line { display:block; white-space:normal; }
.log-toggle { position:absolute; right:0; top:-22px; width:44px; height:44px; border:1px solid var(--dim); background:var(--raised); border-radius:8px; font:600 14px system-ui; }
.battle-detail { position:fixed; right:16px; bottom:16px; width:min(420px,calc(100vw - 32px)); min-height:0; max-height:min(40vh,320px); overflow:auto; background:var(--panel); padding:5px 12px; z-index:12; }
#battle-screen .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#battle-screen .flight-layer { position:fixed; inset:0; z-index:20; pointer-events:none; }
#battle-screen .ability-fx-layer { position:fixed; inset:0; z-index:19; overflow:hidden; pointer-events:none; }
#battle-screen .ability-fx__particle { position:fixed; left:0; top:0; width:var(--fx-size); height:calc(var(--fx-size) * 1.8); border:1px solid var(--fx-accent); border-radius:50%; background:#ede6d6; opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) rotate(var(--fx-rotate)); transform-origin:center; animation:ability-fx-travel var(--fx-duration) cubic-bezier(.2,.8,.2,1) forwards; }
#battle-screen .ability-fx__particle--shape-1 { width:calc(var(--fx-size) * 2.4); height:2px; border:0; border-radius:0; background:var(--fx-accent); }
#battle-screen .ability-fx__particle--shape-2 { background:transparent; border-width:2px; width:calc(var(--fx-size) * 2.6); height:calc(var(--fx-size) * 2.6); }
#battle-screen .ability-fx__particle--bc-shield-left,#battle-screen .ability-fx__particle--tr-shield-pop,#battle-screen .ability-fx__particle--tr-damaged-shield { background:#ffd966; }
#battle-screen .ability-fx__particle--bc-tax,#battle-screen .ability-fx__particle--bc-scout,#battle-screen .ability-fx__particle--tr-mana { background:#e8c468; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
#battle-screen .ability-fx__particle--bc-chrono,#battle-screen .ability-fx__particle--bc-meddler,#battle-screen .ability-fx__particle--bc-doom,#battle-screen .ability-fx__particle--bc-hex-hurler,#battle-screen .ability-fx__particle--bc-hexblade,#battle-screen .ability-fx__particle--bc-cultist { background:#2a2140; border-color:#c0c6d4; }
#battle-screen .ability-fx__particle--bc-gate,#battle-screen .ability-fx__particle--bc-inquisitor,#battle-screen .ability-fx__particle--bc-copycat,#battle-screen .ability-fx__particle--tr-attack { border-radius:0; height:2px; background:#c0c6d4; }
#battle-screen .ability-fx__particle--bc-squire,#battle-screen .ability-fx__particle--bc-duelist,#battle-screen .ability-fx__particle--bc-gravedigger,#battle-screen .ability-fx__particle--tr-summon,#battle-screen .ability-fx__particle--tr-heal,#battle-screen .ability-fx__particle--tr-growth-damaged,#battle-screen .ability-fx__particle--tr-growth-kill,#battle-screen .ability-fx__particle--tr-damaged-summon,#battle-screen .ability-fx__particle--tr-stat-other { background:#7be382; clip-path:polygon(50% 0,100% 100%,0 100%); }
#battle-screen .ability-fx__particle--bc-atk-down,#battle-screen .ability-fx__particle--tr-death,#battle-screen .ability-fx__particle--tr-deathrattle-wisp,#battle-screen .ability-fx__particle--tr-deathrattle-activation,#battle-screen .ability-fx__particle--tr-shift,#battle-screen .ability-fx__particle--tr-fizzle { background:#9a8fa8; }
#battle-screen .ability-fx__particle--bc-cataclysm,#battle-screen .ability-fx__particle--bc-firebelch,#battle-screen .ability-fx__particle--tr-damage,#battle-screen .ability-fx__particle--tr-hero-hit,#battle-screen .ability-fx__particle--tr-summon-ping { background:#ff5a3c; clip-path:polygon(50% 0,68% 38%,100% 50%,68% 62%,50% 100%,32% 62%,0 50%,32% 38%); }
#battle-screen .ability-fx__particle--tr-deploy { background:#b08d57; clip-path:polygon(0 35%,100% 0,78% 100%,18% 72%); }
#battle-screen .ability-fx__particle--poison { background:#6fcf3f; border-color:var(--fx-accent); clip-path:polygon(50% 0,100% 68%,74% 100%,26% 100%,0 68%); }
#battle-screen .ability-fx__particle--double { box-shadow:8px 0 0 #c0c6d4; }
#battle-screen .ability-fx__particle--edge-cue { outline:3px solid var(--fx-accent); outline-offset:4px; }
#battle-screen .ability-fx__particle--reduced { width:28px; height:28px; background:transparent; border:2px solid var(--fx-accent); clip-path:none; animation-name:ability-fx-reduced; }
@keyframes ability-fx-travel { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) rotate(var(--fx-rotate)) scale(.7); } 15% { opacity:.9; } 58% { opacity:.85; transform:translate3d(var(--fx-xm),var(--fx-ym),0) rotate(calc(var(--fx-rotate) + 35deg)); } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) rotate(calc(var(--fx-rotate) + 90deg)) scale(1.15); } }
@keyframes ability-fx-return { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.7); } 45% { opacity:.9; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(1); } 100% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.5); } }
@keyframes ability-fx-sink { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0); } 35% { opacity:.9; transform:translate3d(var(--fx-x1),var(--fx-y1),0); } 100% { opacity:0; transform:translate3d(var(--fx-x1),calc(var(--fx-y1) + 36px),0) scaleX(.25); } }
@keyframes ability-fx-rise { 0% { opacity:0; transform:translate3d(var(--fx-x1),calc(var(--fx-y1) + 36px),0) scale(.5); } 70% { opacity:.9; } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0); } }
@keyframes ability-fx-spiral { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) rotate(0); } 45% { opacity:.9; transform:translate3d(var(--fx-xm),var(--fx-ym),0) rotate(240deg) scale(1.4); } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) rotate(540deg) scale(.25); } }
@keyframes ability-fx-ring { 0% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(.25); } 45% { opacity:.9; } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(2); } }
@keyframes ability-fx-remnant { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scaleX(.4); } 25% { opacity:.8; } 100% { opacity:0; transform:translate3d(var(--fx-xm),var(--fx-ym),0) scaleX(1.4); } }
@keyframes ability-fx-deck { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.7); } 18% { opacity:.9; } 72% { opacity:.85; transform:translate3d(var(--fx-xm),var(--fx-ym),0) rotate(var(--fx-rotate)); } 100% { opacity:0; transform:translate3d(var(--fx-x1),calc(var(--fx-y1) + 18px),0) rotate(calc(var(--fx-rotate) + 45deg)) scale(.65); } }
@keyframes ability-fx-mana { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.6); } 20% { opacity:1; } 65% { opacity:.9; transform:translate3d(var(--fx-xm),var(--fx-ym),0) rotate(45deg); } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) rotate(90deg) scale(.35); } }
@keyframes ability-fx-cone { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.35); } 15% { opacity:.9; } 55% { opacity:.8; transform:translate3d(var(--fx-xm),var(--fx-ym),0) scale(1); } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(1.35); } }
@keyframes ability-fx-stub { 0% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) scale(.4); } 35% { opacity:.75; transform:translate3d(var(--fx-xm),var(--fx-ym),0) scale(.8); } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(.2); } }
@keyframes ability-fx-drain { 0% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0) scale(.6); } 20% { opacity:.9; } 62% { opacity:.8; transform:translate3d(var(--fx-xm),var(--fx-ym),0) rotate(180deg); } 100% { opacity:0; transform:translate3d(var(--fx-x0),var(--fx-y0),0) rotate(360deg) scale(.3); } }
#battle-screen .ability-fx__particle--path-return { animation-name:ability-fx-return; }
#battle-screen .ability-fx__particle--path-sink { animation-name:ability-fx-sink; }
#battle-screen .ability-fx__particle--path-deck { animation-name:ability-fx-deck; }
#battle-screen .ability-fx__particle--path-mana { animation-name:ability-fx-mana; }
#battle-screen .ability-fx__particle--path-cone { animation-name:ability-fx-cone; }
#battle-screen .ability-fx__particle--path-stub { animation-name:ability-fx-stub; }
#battle-screen .ability-fx__particle--path-drain { animation-name:ability-fx-drain; }
#battle-screen .ability-fx__particle--path-rise { animation-name:ability-fx-rise; }
#battle-screen .ability-fx__particle--path-spiral { animation-name:ability-fx-spiral; }
#battle-screen .ability-fx__particle--path-ring,#battle-screen .ability-fx__particle--path-contact { animation-name:ability-fx-ring; }
#battle-screen .ability-fx__particle--path-remnant { animation-name:ability-fx-remnant; }
#battle-screen .ability-fx__particle--reduced { animation-name:ability-fx-reduced; }
@keyframes ability-fx-reduced { 0% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0); } 25% { opacity:.9; } 100% { opacity:0; transform:translate3d(var(--fx-x1),var(--fx-y1),0); } }
#battle-screen .card-ghost { position:fixed; transform-origin:top left; z-index:2; filter:drop-shadow(0 12px 20px #14101ce6); }
#battle-screen .damage-floater { position:fixed; z-index:1; color:var(--bone); font:800 32px/36px system-ui; -webkit-text-stroke:1px var(--bg); text-shadow:0 0 2px var(--bg); }
#battle-screen .battlecry-caption { position:fixed; z-index:4; max-width:min(360px,calc(100vw - 24px)); translate:-50% -100%; padding:5px 10px; border:1px solid #c99b4a; border-radius:5px; background:var(--panel); color:var(--bone); font:700 14px/20px system-ui; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:1; transition:opacity var(--caption-fade,300ms) ease; }
#battle-screen .battlecry-caption.is-fading { opacity:0; }
#battle-screen .battlecry-caption.is-reduced { left:50%; top:50%; translate:-50% -50%; }
#battle-screen .is-vacant { opacity:0!important; }
#battle-screen .turn-banner { position:fixed; left:50%; top:50%; z-index:30; width:max-content; max-width:40vw; transform:translate(-50%,-50%); pointer-events:none; padding:12px 32px; border:2px solid #c99b4a; box-shadow:0 8px 28px #14101ca8; background:#e8dcc3; color:#2a2118; font:800 clamp(20px,3vw,38px)/1.1 Georgia,serif; letter-spacing:.09em; text-align:center; }
.card-hover-tip { position:absolute; z-index:100; width:min(300px,calc(100vw - 16px)); pointer-events:none; display:grid; grid-template-columns:auto 1fr; gap:6px 10px; padding:12px 14px; border:2px solid #c99b4a; border-radius:6px; box-shadow:0 10px 28px #14101ccc; background:#e8dcc3; color:#2a2118; font:600 14px/19px system-ui; }
.card-hover-tip[hidden] { display:none; }
.card-hover-tip__name { padding-right:32px; font:800 18px/22px Georgia,serif; }
.card-hover-tip__cost { grid-column:2; grid-row:1; justify-self:end; width:26px; height:26px; display:grid; place-items:center; border:2px solid #8a642e; border-radius:50%; background:#2a2118; color:#e8dcc3; }
.card-hover-tip__stats { grid-column:1/-1; font-weight:800; }
.card-hover-tip__base { grid-column:1/-1; color:#6b5841; }
.card-hover-tip__base:empty,.card-hover-tip__keywords.is-empty { display:none; }
.card-hover-tip__keywords { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px 10px; color:#6b3e16; }
.card-hover-tip__keyword { display:none; align-items:center; gap:4px; }
.card-hover-tip__keyword.is-visible { display:inline-flex; }
.card-hover-tip__keyword::before { content:''; width:18px; height:18px; flex:none; background:center/contain no-repeat; }
.card-hover-tip__keyword--shield::before { background-image:url(assets/icon_ds.png); }
.card-hover-tip__keyword--poisonous::before { background-image:url(assets/icon_poison.png); }
.card-hover-tip__keyword--windfury::before { background-image:url(assets/icon_wf.png); }
.card-hover-tip__keyword--battlecry::before { background-image:url(assets/icon_bc.png); }
.card-hover-tip__keyword--deathrattle::before { background-image:url(assets/icon_dr.png); }
.card-hover-tip__keyword--aura::before { background-image:url(assets/icon_aura.png); }
.card-hover-tip__text { grid-column:1/-1; margin:0; font-weight:500; }
#battle-screen .fx-hero-hit::after { position:absolute; inset:0; width:auto; rotate:0deg; box-shadow:inset 0 0 48px #ff5a3c38; background:none; z-index:1; }
#battle-screen .fx-deploy-pop,#battle-screen .fx-tick,#battle-screen .fx-lunge,#battle-screen .fx-hit,#battle-screen .fx-shield,#battle-screen .fx-death,#battle-screen .fx-shatter,#battle-screen .fx-stalemate,#battle-screen .fx-battlecry-source,#battle-screen .fx-battlecry-target,#battle-screen .damage-floater,#battle-screen .is-scout-revealed,#battle-screen .hero-portrait.fx-hit,#battle-screen .fx-deploy-pop .card-face { animation-duration:var(--fx-duration)!important; }
@media(prefers-reduced-motion:reduce) { #battle-screen .ember,#battle-screen .fx-deploy-pop .card-face { animation:none; } #battle-screen .ability-fx__particle { animation-name:ability-fx-reduced; } }
@media(max-width:1439px) { #battle-screen { --slot-w:176px; --slot-gap:16px; --card-h:264px; --name-size:14px; --name-line:18px; --pip-size:40px; --stat-size:24px; --badge-size:24px; grid-template-columns:minmax(0,1000px); padding:16px; } #battle-screen .hero-panel { width:320px; } #battle-screen .side__info { gap:16px; } }
@media(max-width:1023px) { #battle-screen { --slot-w:144px; --slot-gap:12px; --card-h:216px; padding:16px 12px; } #battle-screen .hero-panel { width:280px; } #battle-screen .hero-portrait { width:64px; height:64px; top:16px; } #battle-screen .deck-plaque,#battle-screen .header-count { display:none; } #battle-screen .battle-header { grid-template-columns:auto 1fr auto; } #battle-screen .battle-phase { text-align:center; } }
@media(max-width:760px) { #battle-screen { --slot-w:112px; --slot-gap:12px; --card-h:168px; --name-size:14px; --name-line:16px; --name-bottom:36px; --pip-size:32px; --stat-size:22px; --badge-size:24px; padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left)); grid-template-rows:44px auto 24px auto; } #battle-screen .side { grid-template-rows:112px auto; } #battle-screen .side__info { gap:12px; } #battle-screen .hero-panel { width:156px; height:96px; } #battle-screen .hero-portrait { width:40px; height:40px; left:0; top:4px; } #battle-screen .hero-label { left:48px; top:4px; width:104px; max-height:40px; overflow:hidden; font-size:14px; letter-spacing:0; } #battle-screen .hero-hp__text { left:0; top:48px; font-size:24px; line-height:28px; } #battle-screen .hero-hpbar { left:0; right:8px; top:80px; height:16px; } #battle-screen .deck-stack { width:56px; height:84px; } #battle-screen .cost-dot { width:32px; height:32px; font-size:16px; border-width:2px; } #battle-screen .cost-dot__count { width:40px; height:32px; font-size:24px; line-height:28px; } #battle-screen .deck-count { font-size:16px; } #battle-screen .battle-fight { font-size:12px; line-height:16px; } #battle-screen .battle-phase { display:block; position:absolute; top:48px; left:50%; translate:-50% 0; z-index:8; width:max-content; padding:3px 8px; border:1px solid var(--gold); border-radius:5px; background:var(--panel); font:800 12px/16px system-ui; } #battle-screen .battle-header { padding:0 4px; grid-template-columns:70px 1fr; } #battle-screen .battle-header__meta { grid-column:2; } #battle-screen .speed-control__button { min-width:31px; height:32px; padding:0 3px; } #battle-screen .turn-banner { max-width:80vw; padding:10px 18px; font-size:20px; } #battle-screen .lane-arrow { display:none; } #battle-screen .battle-log { height:24px; } #battle-screen .battle-log__history,#battle-screen .battle-detail { padding-top:1px; padding-bottom:1px; } #battle-screen .log-toggle { top:-10px; } #battle-screen .damage-floater { font-size:28px; line-height:32px; } }
#battle-screen[data-card-tier=mobile] .card .card__name { left:6px; right:6px; height:32px; }
#battle-screen[data-card-tier=mobile] .boss .card__name { bottom:calc(var(--name-bottom) + 42px); }
#battle-screen[data-card-tier=mobile] .card__trait { left:6px; right:6px; min-height:36px; padding:2px 4px; font-size:10px; line-height:11px; }
#battle-screen[data-card-tier=mobile] .card__atk { left:4px; } #battle-screen[data-card-tier=mobile] .card__hp { right:4px; }
#battle-screen[data-card-tier=mobile] .card__badges { top:32px; }
#battle-screen[data-card-tier=mobile] .card__crown { right:8px; bottom:36px; }
/* Incoming labels remain above art, and may use the reserved info-row gap. */
#battle-screen .charger-label { z-index:11; left:-6px; right:-6px; }
#battle-screen .hero-hpbar::before { width:var(--health); }
@media(max-width:760px) {
 #battle-screen .hero-label { font-size:0; line-height:0; }
 #battle-screen .hero-label::after { content:attr(data-compact); font:600 14px/20px system-ui; }
 #battle-screen .charger-label { bottom:-20px; left:-8px; right:-8px; line-height:20px; }
 #battle-screen .deck-label { text-align:left; padding-left:2px; }
 #battle-screen .deck-count { right:-4px; }
 #battle-screen .board-empty { left:0; transform:none; }
}
#battle-screen .card .card__name { border-color:var(--card-trim,#b08d57); }
#battle-screen .cost-dot__count::before { content:''; position:absolute; inset:-5px; padding:2px; border-radius:10px; background:conic-gradient(var(--bone) calc(var(--charge-progress,1) * 1turn),transparent 0); mask:linear-gradient(#14101c 0 0) content-box,linear-gradient(#14101c 0 0); mask-composite:exclude; pointer-events:none; }
@media(max-width:760px) { #battle-screen { grid-template-rows:44px auto 32px 24px auto; } #battle-screen .side-turn-marker { left:-8px; } #battle-screen .march-control { width:calc(100% - 24px); } }
#battle-screen .fx-death::after { content:''; position:absolute; inset:0; background:linear-gradient(125deg,transparent 49.5%,#ede6d659 50%,transparent 50.5%); pointer-events:none; }
#battle-screen .card.is-corpse { filter:grayscale(1); opacity:.38; translate:0 20px; }
#battle-screen .card__state { display:none; position:absolute; z-index:1; pointer-events:none; animation:fx-state-arrive var(--fx-state-fade) ease-out; }
#battle-screen .card__name,#battle-screen .card__atk,#battle-screen .card__hp,#battle-screen .card__status,#battle-screen .card__badges { z-index:2; }
#battle-screen .fx-state-shield .card__state--a { display:block; left:6%; right:6%; top:8%; height:62%; border:2px solid #ffd966; border-bottom-color:transparent; border-radius:50%; opacity:.32; animation:fx-state-arrive var(--fx-state-fade) ease-out,fx-state-breathe var(--fx-state-cycle) ease-in-out infinite; }
/* State leaf priority: shield is fixed to A; poison > windfury > rush fill the highest available leaf. */
#battle-screen .fx-state-poison:not(.fx-state-shield) .card__state--a,#battle-screen .fx-state-poison.fx-state-shield .card__state--b { display:block; left:13%; top:54%; width:6px; height:10px; border-radius:50% 50% 60% 60%; background:#6fcf3f; box-shadow:calc(var(--slot-w) * .66) 3px 0 #6fcf3f; opacity:.4; animation:fx-state-arrive var(--fx-state-fade) ease-out,fx-state-drift var(--fx-state-cycle) ease-in-out infinite; }
#battle-screen .fx-state-windfury:not(.fx-state-shield):not(.fx-state-poison) .card__state--a,#battle-screen .fx-state-windfury:is(.fx-state-shield,.fx-state-poison):not(.fx-state-shield.fx-state-poison) .card__state--b { display:block; left:12%; top:20%; width:8px; height:2px; background:#c0c6d4; box-shadow:0 8px 0 #c0c6d4; }
#battle-screen .fx-state-rush:not(.fx-state-shield):not(.fx-state-poison):not(.fx-state-windfury) .card__state--a,#battle-screen .fx-state-rush:is(.fx-state-shield,.fx-state-poison,.fx-state-windfury):not(.fx-state-shield.fx-state-poison):not(.fx-state-shield.fx-state-windfury):not(.fx-state-poison.fx-state-windfury) .card__state--b { display:block; right:10%; top:54%; width:9px; height:4px; border-top:3px solid #e8b84b; border-right:3px solid #e8b84b; transform:skewX(28deg); box-shadow:-8px 7px 0 -1px #e8b84b; }
#battle-screen .fx-state-aura-adjacent-source .card__idle,#battle-screen .fx-state-aura-adjacent-target .card__idle { background:linear-gradient(90deg,rgba(123,227,130,.18) 0 45%,transparent 45% 55%,rgba(123,227,130,.18) 55%) 50% 87%/90% 2px no-repeat; }
#battle-screen .fx-state-aura-all-source .card__idle { background:linear-gradient(rgba(123,227,130,.18),rgba(123,227,130,.18)) 50% 94%/65% 2px no-repeat; }
#battle-screen .fx-state-aura-all-target .card__idle { box-shadow:inset 6px 0 rgba(123,227,130,.18),inset -6px 0 rgba(123,227,130,.18); }
@keyframes fx-state-arrive { from { opacity:0; } }
@keyframes fx-state-breathe { 0%,100% { opacity:.24; } 50% { opacity:.36; } }
@keyframes fx-state-drift { 0%,100% { translate:0 0; } 50% { translate:0 5px; } }
@media(prefers-reduced-motion:reduce) { #battle-screen .card__state { animation:none!important; } }
#battle-screen[data-card-tier=mobile] .card__atk,#battle-screen[data-card-tier=mobile] .card__hp { bottom:0; }
@media(max-width:760px) { #battle-screen .deck-count { right:-8px; bottom:-8px; } }
@media(max-width:760px) { #battle-screen .charger-slot { align-self:flex-start; margin-top:8px; } }
#battle-screen .side__info { height:100%; }
#battle-screen .deck-label { text-align:left; padding-left:4px; }
@media(max-width:760px) { #battle-screen .deck-label { left:-4px; padding-left:0; } }
@media(max-width:760px) {
 #battle-screen { grid-template-rows:52px auto 0 auto; }
 #battle-screen .battle-header { height:44px; }
 #battle-screen .side--player { grid-template-rows:auto 112px; }
 #battle-screen .battle-log { height:0; }
 #battle-screen .log-toggle { top:-22px; }
}

.auth-email { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.auth-email__input { padding: 10px 12px; border-radius: 8px; border: 1px solid #5a4a32; background: #1d1710; color: #f3e9d2; font: inherit; }
.auth-email__input:focus { outline: 2px solid #d8a94e; outline-offset: 1px; }
.fight-result { position:fixed; inset:0; z-index:30; display:grid; place-content:center; justify-items:center; gap:12px; background:#14101cd9; }
.fight-result h1 { margin:0; color:var(--gold); font:800 42px/48px Georgia,serif; letter-spacing:3px; text-shadow:0 2px 12px #000; }
.fight-result__sub { margin:0 0 8px; color:var(--bone); font:600 16px/22px system-ui,sans-serif; }
.fight-result__actions { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
@media(max-width:760px) { .fight-result h1 { font-size:30px; line-height:36px; } .fight-result__actions { flex-direction:column; align-items:stretch; } }
#battle-screen .side--player .board-scroll { scrollbar-width:none; }
#battle-screen .side--player .board-scroll::-webkit-scrollbar { display:none; }

/* Wave 1: title-only metalwork. Other screens retain their existing contract. */
.screen.title {
  --title-metal:#ae8546;
  --title-highlight:#f2d58b;
  --title-ink:#0d1013;
  position:relative;
  isolation:isolate;
  place-content:center;
  justify-items:center;
  padding:32px 24px;
  background:radial-gradient(ellipse at 50% 35%,#10151b22 15%,#05080bd9 100%),linear-gradient(#0b111780,#0b111738),url(assets/bg_battlefield.png) center/cover fixed;
}
.screen.title .title-mark {
  margin:0;
  font:700 clamp(38px,5vw,72px)/1.12 Georgia,serif;
  letter-spacing:.025em;
  color:#e8c468;
  background:linear-gradient(165deg,#ede6d6 0 9%,#e8c468 28% 64%,#b08d57 88% 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 #b08d57) drop-shadow(0 5px 5px #14101c);
  -webkit-text-stroke:.5px #14101c;
  text-shadow:-1px -1px 0 #ede6d6,1px 2px 0 #b08d57,0 5px 8px #14101c;
}
.screen.title .title-emblem { display:block; width:112px; height:112px; margin:0 auto 8px; object-fit:contain; }
.screen.title .title-tagline { margin:12px 0 24px; color:#cec2ae; font:18px/1.5 Georgia,serif; text-shadow:0 2px 4px #000; }
.screen.title .title-actions { width:min(600px,100%); gap:14px; margin:0; }
.screen.title .title-modes { display:flex; gap:16px; width:100%; }
.screen.title .title-modes > .primary { flex:1; width:0; min-height:64px; font-size:23px; }
.screen.title .title-modes > .upgrade-button { font-size:18px; }
.screen.title .primary {
  position:relative;
  width:min(320px,100%);
  height:auto;
  min-height:58px;
  padding:12px 24px;
  border:1px solid var(--title-metal);
  border-radius:2px;
  outline:1px solid #30281e;
  outline-offset:3px;
  background:linear-gradient(135deg,#89704b55,transparent 18%,transparent 82%,#89704b55),linear-gradient(#25282b,#0d1013 50%,#1b1916);
  box-shadow:inset 0 0 0 3px #0d1013,inset 0 0 0 4px #6d522e,0 5px 12px #0009;
  color:#f1dfa7;
  font:700 25px/1.2 Georgia,serif;
  text-shadow:0 2px 3px #000;
}
.screen.title .primary::before,.screen.title .primary::after {
  content:''; position:absolute; top:calc(50% - 5px); width:10px; height:10px;
  background:linear-gradient(135deg,#e5c57b,#75552b 60%,#151415);
  border:1px solid #c4a064; transform:rotate(45deg); pointer-events:none;
}
.screen.title .primary::before { left:-6px; }
.screen.title .primary::after { right:-6px; }
.screen.title .title-start {
  width:100%; min-height:78px; margin:4px 0 6px;
  font-size:38px; color:#ffe8a5; border-color:#e4c47a;
  background:radial-gradient(ellipse at bottom,#9b571a80,transparent 72%),linear-gradient(#29241c,#151210 50%,#382615);
  box-shadow:inset 0 0 0 3px #171410,inset 0 0 0 4px #b79350,inset 0 -5px 22px #e8992926,0 0 28px #d68b242b,0 6px 16px #000;
}
.screen.title .primary:hover { filter:brightness(1.2); }
.screen.title .primary:focus-visible { outline:2px solid #ffe8a5; outline-offset:6px; }
.screen.title .primary:disabled { opacity:.7; cursor:wait; transform:none; }
.screen.title .title-account {
  position:static; max-width:600px; margin-top:24px;
  display:flex; align-items:center; gap:16px; padding:8px 16px 8px 8px;
  border-block:1px solid #ae8546; border-inline:1px solid #6d522e;
  background:linear-gradient(90deg,#101317f5,#101317c9);
  box-shadow:0 3px 15px #0008,inset 0 0 0 3px #ae854618;
}
.screen.title .title-account__portrait {
  width:44px; height:44px; flex:none; object-fit:cover; object-position:center 20%;
  border-radius:50%; border:3px double #ddbb70; outline:2px solid #6d522e;
  box-shadow:0 0 0 5px #161615,0 0 0 6px #ae854660;
}
.screen.title .auth-status { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; color:#b7c4ca; font:14px/1.5 system-ui,sans-serif; overflow-wrap:anywhere; }
.screen.title .premium-badge { border-radius:2px; color:#ffe8a5; background:linear-gradient(#49391f,#1a1711); border-color:#ae8546; padding:6px 8px; }
.screen.title .title-account .primary { width:auto; min-height:44px; padding:8px 12px; font:14px/1.2 system-ui,sans-serif; }
.screen.title .title-account .primary::before,.screen.title .title-account .primary::after { display:none; }
.screen.title .title-auth { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; width:min(800px,100%); margin-top:28px; padding-top:20px; border-top:1px solid #ae854655; }
.screen.title .auth-email { display:grid; grid-template-columns:minmax(0,1fr) auto; width:100%; gap:10px; }
.screen.title .title-auth .auth-button { width:auto; min-height:46px; padding:10px 14px; font:600 14px/1.3 system-ui,sans-serif; }
.screen.title .title-auth .primary::before,.screen.title .title-auth .primary::after { display:none; }
.screen.title .auth-email .purchase-note { grid-column:1 / -1; margin:0; font:14px/1.4 system-ui,sans-serif; }
.screen.title .title-utilities { display:flex; justify-content:flex-end; gap:12px; width:min(800px,100%); margin-top:22px; }
.screen.title .title-icon { width:44px; min-height:44px; padding:4px; font:28px/1 system-ui,sans-serif; }
.screen.title .title-icon::before,.screen.title .title-icon::after { display:none; }
.screen.title .auth-email__input,.screen.title .replay-id-field { width:100%; min-height:46px; padding:10px 12px; border:1px solid #ae8546; border-radius:2px; background:#0d1013; color:#ede6d6; font:16px/1.4 system-ui,sans-serif; }
.screen.title .auth-button,.screen.title .title-replay,.screen.title .upgrade-button { font-size:18px; min-height:48px; }
.screen.title .purchase-note { color:#ede6d6; overflow-wrap:anywhere; }
.screen.title .inline-modal__dialog { border:1px solid #ae8546; border-radius:2px; background:linear-gradient(135deg,#29251f,#0d1013 65%); box-shadow:inset 0 0 0 4px #0d1013,inset 0 0 0 5px #6d522e,0 20px 70px #000c; padding:28px; justify-items:center; }
.screen.title .inline-modal__dialog h2 { color:#f2d58b; font:700 28px/1.2 Georgia,serif; }
.screen.title .inline-modal__dialog p { color:#cec2ae; font:16px/1.5 system-ui,sans-serif; }
.screen.title .inline-modal__dialog .primary { width:100%; font-size:20px; }
@media(max-width:760px) {
  .screen.title { padding:20px 22px; }
  .screen.title .title-account { flex-wrap:wrap; justify-content:center; width:100%; margin-top:20px; gap:12px; padding:12px; }
  .screen.title .auth-status { flex:1; text-align:left; }
  .screen.title .title-emblem { width:96px; height:96px; }
  .screen.title .title-mark { font-size:clamp(34px,8vw,56px); }
  .screen.title .title-tagline { font-size:16px; margin:10px 0 20px; }
  .screen.title .title-start { min-height:72px; font-size:32px; }
  .screen.title .title-modes > .primary { font-size:20px; padding:12px; }
  .screen.title .title-modes > .upgrade-button { font-size:16px; }
  .screen.title .title-auth { grid-template-columns:1fr; margin-top:24px; padding-top:16px; }
  .screen.title .auth-email { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .screen.title .title-utilities { margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .screen.title .primary { transition:none; }
  .screen.title .primary:hover,.screen.title .primary:focus-visible { transform:none; }
}
/* Wave 2: banner selection and between-fight screens only. */
.screen.starter-select,.screen.draft {
  background:radial-gradient(ellipse at 50% 20%,#2a2140 0, #14101c 70%);
  box-shadow:inset 0 0 0 5px #14101c,inset 0 0 0 6px #62596d,inset 0 0 0 10px #1e1830,inset 0 0 0 11px #393342;
}

/* Wave 2 keeps all controls and card data in their existing DOM owners. */
.screen.starter-select { padding:clamp(24px,4vh,42px) 4%; gap:14px; }
.screen.starter-select h1 { font:700 clamp(30px,4.4vw,70px)/1.12 Georgia,serif; letter-spacing:.025em; color:#f4e8d9; text-shadow:0 2px 3px #000,0 0 28px #e8c46820; }
.screen.starter-select .starter-select__intro { color:#ccbfb1; font-size:clamp(16px,1.4vw,22px); line-height:1.4; }
.screen.starter-select .starter-select__choices { width:min(1400px,100%); padding:16px 12px; gap:20px; scrollbar-color:var(--gold) var(--panel); }
.screen.starter-select .starter-choice { position:relative; padding:20px 16px 16px; gap:12px; border:2px solid #403449; border-radius:12px 12px 6px 6px; background:linear-gradient(145deg,#1e1830,#14101c 70%); box-shadow:inset 0 0 0 2px #14101c,inset 0 0 0 3px #62596d40,0 8px 20px #0005; }
.screen.starter-select .starter-choice[aria-pressed=true] { border-color:#f4d37a; background:linear-gradient(145deg,#30263e,#1e1830); box-shadow:inset 0 0 0 2px #86602e,inset 0 0 0 3px #f4d37a,0 0 7px #e8c468,0 0 25px #e9ae4a60; }
.screen.starter-select .starter-choice[aria-pressed=true]::before { content:'\25c6'; position:absolute; top:-12px; left:calc(50% - 10px); width:20px; color:#f4d37a; text-shadow:0 0 12px #e9ae4a; }
.screen.starter-select .starter-choice__name { color:#f0d08b; font:700 clamp(24px,2vw,32px)/1.2 Georgia,serif; }
.screen.starter-select .starter-choice__blurb { min-height:48px; color:#ccbfb1; font:400 16px/24px system-ui,sans-serif; }
.screen.starter-select .starter-choice__cards { gap:8px; }
.screen.starter-select .starter-choice .draft-card { padding:4px; background:#100e16; border:1px solid #62596d80; box-shadow:0 2px 6px #0006; }
.screen.starter-select .starter-choice .draft-card>strong { min-height:32px; display:grid; place-items:center; color:#ede6d6; font:700 12px/16px Georgia,serif; }
.screen.starter-select .starter-choice .cost-dot { width:30px; height:30px; left:-4px; top:-4px; font:700 14px/18px system-ui,sans-serif; }
.screen.starter-select .starter-deck__toggle,.screen.starter-select .starter-select__actions .secondary,.screen.draft .draft-actions .secondary {
  min-height:52px; border:1px solid #747381; border-radius:3px; background:linear-gradient(165deg,#393342,#1e1830 45%,#14101c); box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 4px #62596d; color:var(--bone); font:600 18px/24px Georgia,serif;
}
.screen.starter-select .starter-option:has([aria-pressed=true]) .starter-deck__toggle { border-color:var(--gold); box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 4px #86602e; }
.screen.starter-select .starter-deck { border-color:#86602e; border-radius:3px; padding:10px 16px; }
.screen.starter-select .starter-deck__keyword { color:#ccbfb1; font-size:14px; line-height:20px; }
.screen.starter-select .starter-select__actions { gap:30px; margin-top:2px; }
.screen.starter-select .starter-select__actions .primary { width:320px; height:76px; font-size:30px; }
.screen.starter-select .starter-select__actions .secondary { width:280px; height:64px; align-self:center; font-size:28px; }
.screen.starter-select button:focus-visible,.screen.draft button:focus-visible { outline:2px solid #f4e8d9; outline-offset:4px; }
.screen.draft { gap:14px; padding:28px; }
.screen.draft h1 { color:#f4e8d9; letter-spacing:.04em; text-shadow:0 2px 4px #000; }
.screen.draft>p { color:#ccbfb1; line-height:1.5; }
.screen.draft .draft-card { border-radius:5px; border-color:#86602e; background:linear-gradient(145deg,#2a2140,#14101c 65%); box-shadow:inset 0 0 0 3px #14101c,0 8px 24px #0006; }
.screen.draft .draft-card[aria-pressed=true] { border-color:#f4d37a; box-shadow:0 0 0 2px #f4d37a,0 0 24px #e9ae4a60; }
.screen.draft .draft-confirm { border-radius:2px; border-color:#b08d57; background:linear-gradient(#393342,#1e1830); color:var(--bone); }
.screen.draft .draft-actions { gap:20px; }
.screen.draft .draft-actions .secondary { height:56px; width:180px; }
@media(max-width:1000px) {
  .screen.starter-select .starter-select__choices { grid-template-columns:1fr; width:min(520px,100%); }
  .screen.starter-select .starter-choice__blurb { min-height:0; }
}
@media(max-width:600px) {
  .screen.starter-select { padding:24px 12px 16px; gap:10px; }
  .screen.starter-select .starter-select__choices { padding:14px 9px; gap:20px; }
  .screen.starter-select .starter-choice { padding:18px 10px 12px; }
  .screen.starter-select .starter-choice__cards { gap:5px; }
  .screen.starter-select .starter-choice .draft-card>strong { font-size:11px; line-height:14px; min-height:30px; }
  .screen.starter-select .starter-select__actions { gap:12px; flex-wrap:nowrap; }
  .screen.starter-select .starter-select__actions .primary { width:55%; height:64px; font-size:26px; }
  .screen.starter-select .starter-select__actions .secondary { width:40%; height:52px; font-size:22px; }
  .screen.starter-select .starter-deck__card { grid-template-columns:1fr; }
  .screen.draft { padding:24px 16px; }
  .screen.draft .draft-actions { width:100%; }
  .screen.draft .draft-actions .secondary { width:45%; }
}
@media(prefers-reduced-motion:reduce) {
  .screen.starter-select button,.screen.draft button { transition:none; }
  .screen.starter-select button:hover,.screen.starter-select button:focus-visible,.screen.draft button:hover,.screen.draft button:focus-visible { transform:none; }
}
.screen.draft>.banner { height:44px; }
.screen.draft #offers .draft-card { width:210px; }
.screen.draft .deck-event__preview { grid-template-columns:minmax(130px,200px) auto minmax(130px,200px); }
.screen.draft.deck-event { gap:10px; }
.screen.draft.deck-event>.primary { height:64px; }

/* Wave 3: battle-only metalwork. Geometry, lifecycle and timing remain owned by the ledger. */
#battle-screen {
  --battle-metal:#b08d57;
  --battle-ink:#14101c;
  position:relative;
  padding-bottom:76px;
  background:radial-gradient(ellipse at 50% 48%,#14101c55,#14101ce8),url(assets/bg_battlefield.png) center/cover fixed;
  box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 5px #b08d5766,inset 0 0 0 10px #14101c,inset 0 0 0 12px #c0c6d433,inset 0 0 100px #14101c;
}
/* Noninteractive screen-edge pillars; no new asset or DOM region. */
#battle-screen::before,#battle-screen::after {
  content:''; position:absolute; top:14px; bottom:14px; width:14px; z-index:0; pointer-events:none;
  border:2px solid #17120c; border-radius:7px 2px;
  background:
    conic-gradient(from 45deg,#17120c 0 25%,#d6c184 0 42%,#967a45 0 58%,#5d4325 0 75%,#17120c 0) center 33%/9px 9px no-repeat,
    conic-gradient(from 45deg,#17120c 0 25%,#d6c184 0 42%,#967a45 0 58%,#5d4325 0 75%,#17120c 0) center 67%/9px 9px no-repeat,
    linear-gradient(90deg,#5d4325 0 12%,#d6c184 13% 27%,#b3975b 28% 53%,#967a45 54% 72%,#5d4325 73% 88%,#17120c 89%);
  box-shadow:inset 1px 0 #eee0aa80,inset -2px 0 #17120c,0 3px 5px #0009;
}
#battle-screen::before { left:14px; }
#battle-screen::after { right:14px; transform:scaleX(-1); }
#battle-screen .battle-header {
  height:44px; padding:0; gap:16px; border:0; background:transparent;
  grid-template-columns:180px minmax(210px,1fr) auto;
}
#battle-screen .battle-fight,#battle-screen .battle-phase {
  position:relative; display:grid; place-items:center; min-height:42px; padding:6px 16px;
  border:1px solid var(--battle-metal); border-radius:2px;
  background:linear-gradient(#2a2140,#14101c 55%,#1e1830);
  box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 4px #b08d574d,0 4px 12px #14101c;
  color:var(--gold); text-shadow:0 2px 2px #14101c;
}
#battle-screen .battle-phase { border-color:#c0c6d480; color:var(--bone); font-family:Georgia,serif; letter-spacing:.05em; }
#battle-screen .battle-phase::before,#battle-screen .battle-phase::after { content:'◆'; position:absolute; left:5px; font-size:9px; color:#c0c6d4; }
#battle-screen .battle-phase::after { left:auto; right:5px; }
#battle-screen .header-count { display:none; }
#battle-screen .speed-control { box-shadow:0 3px 8px #14101c; border-color:#b08d5780; }
#battle-screen .speed-control__button { height:36px; min-width:38px; background:linear-gradient(#2a2140,#14101c); font-size:13px; }
#battle-screen .speed-control__button[aria-pressed=true] { background:linear-gradient(#e8c468,#b08d57); color:#14101c; }
#battle-screen .mute-toggle[aria-pressed=true] { background:#2a2140; color:var(--bone); }
#battle-screen .hero-panel {
  border:1px solid #b08d5780; border-radius:4px;
  background:linear-gradient(110deg,#14101c 15%,#1e1830 70%,#2a2140);
  box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 4px #b08d5733,0 5px 16px #14101c;
}
#battle-screen .hero-panel::before {
  content:''; position:absolute; left:1px; top:1px; width:92px; height:92px; border-radius:50%;
  background:conic-gradient(#e8c468,#2a2140 12%,#b08d57 24%,#14101c 37%,#c0c6d4 50%,#2a2140 62%,#b08d57 77%,#14101c 90%,#e8c468);
  box-shadow:0 0 0 2px #14101c,0 0 0 3px #b08d57,0 0 20px #d6455038;
}
#battle-screen .side--player .hero-panel::before { box-shadow:0 0 0 2px #14101c,0 0 0 3px #b08d57,0 0 20px #46c2cb38; }
#battle-screen .hero-portrait { box-shadow:0 0 0 2px #14101c,inset 0 0 12px var(--red); }
#battle-screen .hero-label { color:var(--bone); font-size:13px; }
#battle-screen .hero-hp__text {
  z-index:2;
  background:transparent;
  color:var(--bone);
  text-shadow:-1px 0 #17120c,0 1px #17120c,1px 0 #17120c,0 -1px #17120c,0 3px 4px #000;
}
#battle-screen .hero-hpbar {
  --hero-bar-gold:#b3975b;
  box-sizing:border-box;
  isolation:isolate;
  padding:4px;
  border:1px solid #d6c184;
  border-radius:5px;
  outline:1px solid #17120c;
  outline-offset:2px;
  background:linear-gradient(180deg,#967a45 0,#b3975b 20%,#5d4325 48%,#17120c 52%,#5d4325 82%,#967a45 100%);
  box-shadow:inset 0 0 0 1px #5d4325,inset 0 0 0 3px #17120c,inset 0 4px 7px #000,0 5px 7px #0009;
}
#battle-screen .hero-hpbar::before {
  z-index:0;
  left:4px;
  top:4px;
  bottom:4px;
  width:var(--health);
  max-width:calc(100% - 8px);
  border-radius:2px;
  background:linear-gradient(180deg,#332a1f,#0d0b08 55%,#17120c);
  box-shadow:inset 0 2px 5px #000,inset 0 0 0 1px #d6c18466;
}
#battle-screen .hero-hpbar::after {
  z-index:2;
  inset:-3px -7px;
  border:0;
  border-radius:6px;
  opacity:1;
  background:
    linear-gradient(45deg,transparent 42%,#d6c184 43% 49%,#5d4325 50% 57%,transparent 58%) left center/9px 12px no-repeat,
    linear-gradient(-45deg,transparent 42%,#d6c184 43% 49%,#5d4325 50% 57%,transparent 58%) right center/9px 12px no-repeat;
  filter:drop-shadow(0 2px 1px #17120c);
}
#battle-screen .hero-hpbar__fill {
  z-index:1;
  height:100%;
  min-width:0;
  border-radius:2px;
  background:linear-gradient(180deg,#e55b62 0,#bb2837 27%,#8c1829 58%,#4c0c17 100%);
  box-shadow:inset 0 1px #ffd2bd99,inset 0 -1px #2a050a,0 0 0 1px #8a4d36,0 0 5px #a5222c55;
}
#battle-screen .side--player .hero-hpbar__fill {
  background:linear-gradient(180deg,#73d98a 0,#25a947 28%,#137332 60%,#083d22 100%);
  box-shadow:inset 0 1px #d9efbd99,inset 0 -1px #032616,0 0 0 1px #8c6d3d,0 0 5px #278c4555;
}
#battle-screen .deck-stack { filter:drop-shadow(0 4px 5px #14101c); }
#battle-screen .deck-stack__layer--1 { translate:-8px -3px; }
#battle-screen .deck-stack__layer--2 { translate:-4px -1px; }
#battle-screen .deck-count { color:var(--bone); border-color:var(--battle-metal); background:linear-gradient(#2a2140,#14101c); }
#battle-screen .deck-label { color:var(--gold); background:#14101c; border-top:1px solid #b08d5780; }
#battle-screen .deck-plaque { border-color:#b08d5780; border-radius:2px; background:linear-gradient(135deg,#1e1830,#14101c); box-shadow:inset 0 0 0 3px #14101c,0 4px 12px #14101c; color:var(--bone); }
#battle-screen .mana-bank {
  position:relative; isolation:isolate; min-width:90px; padding:5px 8px; border:1px solid #46c2cb;
  border-radius:4px; background:#14101c; color:var(--bone); text-shadow:0 2px 2px #14101c;
  box-shadow:0 0 12px #46c2cb33; font-size:15px;
}
#battle-screen .mana-bank::before { content:''; position:absolute; z-index:-1; width:76px; height:96px; left:50%; top:50%; translate:-50% -50%; background:url(assets/cost_gem.png) center/contain no-repeat; filter:drop-shadow(0 0 8px #46c2cb80); }
#battle-screen .mana-bank::after { content:''; position:absolute; inset:0; z-index:-1; border-radius:3px; background:#14101ce8; }
#battle-screen .card__art { border-radius:42% 42% 0 0; }
#battle-screen .card .card__name { background:linear-gradient(#1e1830,#14101c); box-shadow:0 2px 4px #14101c; color:var(--bone); }
#battle-screen .card__atk,#battle-screen .card__hp { border-color:#b08d57; box-shadow:inset 0 0 0 2px #14101c,0 2px 5px #14101c; background:linear-gradient(#2a2140,#14101c); }
#battle-screen .card__hp { background:linear-gradient(#481e2a,#14101c); }
#battle-screen .card__idle::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:url('assets/unit-frame.png') center/100% 100% no-repeat;
}
#battle-screen .boss .card__idle::after { filter:sepia(.22) saturate(1.2) hue-rotate(-12deg) brightness(1.08); }
#battle-screen .card__frame { display:none; }
#battle-screen .card__art {
  left:8.5%;
  top:4.5%;
  width:83%;
  height:62.5%;
  border-radius:47% 47% 0 0;
}
#battle-screen .card .card__name {
  left:7%;
  right:7%;
  top:62%;
  bottom:auto;
  z-index:4;
  height:11.5%;
  min-height:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-shadow:0 2px 2px #000;
}
#battle-screen .boss .card__name { top:52%; bottom:auto; }
#battle-screen .card__trait { top:63%; bottom:auto; z-index:4; }
#battle-screen .card__atk,#battle-screen .card__hp {
  bottom:0;
  z-index:5;
  border:0;
  background:transparent;
  box-shadow:none;
  text-shadow:0 2px 2px #000;
}
#battle-screen .card__atk { left:2%; }
#battle-screen .card__hp { right:2%; }
#battle-screen .side-turn-marker { border-color:#b08d5780; background:#14101c; color:var(--bone); }
#battle-screen .march-control { position:relative; border-radius:2px; border-color:#b08d57; background:linear-gradient(#2a2140,#14101c); box-shadow:0 0 12px #e8c46822; }
#battle-screen .march-control::before,#battle-screen .march-control::after { content:''; position:absolute; width:30%; height:3px; top:50%; right:100%; background:linear-gradient(90deg,transparent,#b08d57); pointer-events:none; }
#battle-screen .march-control::after { right:auto; left:100%; transform:scaleX(-1); }
#battle-screen .march-control__label { color:var(--gold); }
#battle-screen .march-control__slider { min-height:28px; margin:0; }
#battle-screen .turn-banner {
  width:max-content; max-width:min(680px,86vw); padding:24px 42px; border:0; border-top:2px solid #b08d57; border-bottom:2px solid #b08d57;
  background:radial-gradient(ellipse,#ede6d6,#dcc59e 65%,#b08d57); color:#2b2118;
  box-shadow:inset 0 0 0 5px #b08d5733,inset 0 0 22px #b08d5780,0 12px 24px #14101ccc;
  font-size:clamp(20px,2.7vw,42px); letter-spacing:.06em; text-shadow:0 1px #ede6d6;
}
#battle-screen .turn-banner::before,#battle-screen .turn-banner::after { content:''; position:absolute; top:-8px; bottom:-8px; left:-10px; width:22px; border:1px solid #b08d57; border-radius:45% 20% 20% 45% / 8%; background:linear-gradient(90deg,#80603b,#dcc59e 35%,#ede6d6 55%,#b08d57); box-shadow:3px 2px 5px #14101c66; }
#battle-screen .turn-banner::after { left:auto; right:-10px; transform:scaleX(-1); }
.battle-log__history,.battle-detail { border:1px solid #b08d5780; border-radius:3px; background:#14101cf5; box-shadow:inset 0 0 0 3px #b08d571a,0 4px 12px #14101c; }
.battle-log__history .log-toggle { border-color:#b08d57; border-radius:3px; background:linear-gradient(#2a2140,#14101c); color:var(--gold); }
.fight-result { padding:24px; gap:20px; background:radial-gradient(ellipse,#14101cb8,#14101cf5); overflow-y:auto; }
.fight-result h1 { width:min(620px,86vw); padding:38px 24px; background:url(assets/banner_victory.png) center/100% 100% no-repeat; color:var(--gold); font-size:clamp(30px,4vw,52px); text-shadow:0 2px 4px #14101c; }
.fight-result__sub { padding:14px 24px; border-block:2px solid #b08d57; color:#2b2118; background:radial-gradient(ellipse,#ede6d6,#dcc59e); box-shadow:0 4px 16px #14101c; text-align:center; }
.fight-result__actions button { min-width:160px; min-height:52px; padding:12px 24px; border:1px solid #e8c468; border-radius:3px; background:linear-gradient(#51402b,#241c23); color:var(--bone); box-shadow:inset 0 0 0 3px #14101c,inset 0 0 0 4px #b08d5780,0 4px 12px #14101c; font:700 18px/24px Georgia,serif; }
.fight-result__actions .secondary { border-color:#b08d5780; background:linear-gradient(#2a2140,#14101c); }
.fight-result__actions button:hover { border-color:var(--bone); box-shadow:inset 0 0 0 3px #14101c,0 0 16px #e8c46855; }
.fight-result__actions button:focus-visible { outline:2px solid var(--bone); outline-offset:4px; }
@media(max-width:1320px) {
  #battle-screen::before,#battle-screen::after { width:10px; }
}
@media(max-width:1023px) {
  #battle-screen .hero-panel::before { width:76px; height:76px; left:1px; top:9px; }
  #battle-screen .battle-header { grid-template-columns:145px minmax(170px,1fr) auto; gap:8px; }
}
@media(max-width:760px) {
  #battle-screen { grid-template-rows:100px auto 44px 0 auto; padding-bottom:76px; }
  #battle-screen::before,#battle-screen::after { top:4px; bottom:4px; width:4px; left:0; border-width:1px; border-radius:0; background:linear-gradient(90deg,#d6c184,#967a45 35%,#5d4325 72%,#17120c); box-shadow:inset 1px 0 #eee0aa66; }
  #battle-screen::after { left:auto; right:0; }
  #battle-screen .battle-header { height:88px; grid-template-columns:112px minmax(0,1fr); grid-template-rows:38px 44px; gap:6px; }
  #battle-screen .battle-fight { min-height:38px; padding:6px; font-size:14px; }
  #battle-screen .battle-phase { position:relative; top:auto; left:auto; translate:none; width:auto; min-height:38px; padding:6px 12px; font-size:12px; }
  #battle-screen .battle-header__meta { grid-column:1/-1; justify-content:center; }
  #battle-screen .speed-control { width:100%; }
  #battle-screen .speed-control__button { flex:1; min-width:44px; height:44px; font-size:14px; }
  #battle-screen .mute-toggle { flex:1.8; }
  #battle-screen .hero-panel { width:156px; border-color:#b08d5766; }
  #battle-screen .hero-panel::before { left:-3px; top:1px; width:46px; height:46px; }
  #battle-screen .hero-portrait { left:0; top:4px; }
  #battle-screen .hero-hp__text { left:6px; }
  #battle-screen .hero-hpbar { left:6px; right:6px; }
  #battle-screen .side__info { gap:12px; }
  #battle-screen .mana-bank { min-width:78px; padding:5px 3px; font-size:14px; }
  #battle-screen .mana-bank::before { width:64px; height:80px; }
  #battle-screen .march-control { width:calc(100% - 12px); padding:2px 8px; min-height:44px; gap:8px; }
  #battle-screen .march-control__slider { min-height:38px; }
  #battle-screen .turn-banner { padding:20px; max-width:86vw; }
  .fight-result { gap:12px; }
  .fight-result h1 { padding:30px 12px; }
  .fight-result__sub { font-size:14px; padding:12px; }
  .fight-result__actions { width:min(300px,100%); gap:10px; }
}
#battle-screen[data-card-tier=mobile] .hero-hp__text { font-size:22px; line-height:26px; }
#battle-screen[data-card-tier=mobile] .hero-hpbar { max-width:calc(100% - 12px); height:16px; padding:3px; }
#battle-screen[data-card-tier=mobile] .hero-hpbar::before { left:3px; top:3px; bottom:3px; max-width:calc(100% - 6px); }
#battle-screen[data-card-tier=mobile] .hero-hpbar::after { inset:-2px -3px; background-size:7px 10px; }
/* Short desktop windows use the existing medium tier at mount, never resize live cards. */
@media(min-width:1440px) and (max-height:950px) {
  #battle-screen { --slot-w:176px; --slot-gap:16px; --card-h:264px; --name-size:14px; --name-line:18px; --pip-size:40px; --stat-size:24px; --badge-size:24px; grid-template-columns:minmax(0,1000px); grid-template-rows:48px auto 34px 0 auto; padding-top:12px; }
  #battle-screen .side { grid-template-rows:100px auto; gap:0; }
  #battle-screen .side--player { grid-template-rows:auto 100px; }
  #battle-screen .side__info { gap:16px; }
  #battle-screen .hero-panel { width:320px; }
}
.fight-result h1 { text-align:center; }
.fight-result__actions button { height:auto; }
@media(max-width:760px) {
  #battle-screen .hero-label { font-size:0; line-height:0; }
  #battle-screen .battle-fight { white-space:nowrap; font-size:13px; }
}
.battle-log__history .battle-log__line:last-of-type { display:block; }
@media(max-width:760px) {
  #battle-screen .side-turn-marker { left:0; top:0; width:auto; padding:0 5px; writing-mode:horizontal-tb; transform:none; translate:none; font-size:10px; line-height:12px; }
  #battle-screen .side--enemy .side-turn-marker { top:112px; }
}