/* ── Battle Visualizer styles ─────────────────────────────────────────────── */
:root{--surface:#141418;--surface2:#1a1a20;--border:#252530;--accent:#f97316}
.viz-wrap{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.viz-player-area{padding:.5rem .75rem;position:relative}
/* Translucent (not opaque) so the visualizer background image (set inline
   on .viz-wrap by js/battle-visualizer.js) shows through behind the board. */
.viz-player-top{background:rgba(13,13,17,.74);border-bottom:1px solid var(--border)}
.viz-player-bot{background:rgba(13,13,17,.74);border-top:1px solid var(--border)}
.viz-stats{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem .65rem;font-size:.78rem;padding:.35rem 0;position:relative;z-index:1}
.viz-player-name{font-weight:600;font-size:.8rem;color:#bbb;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:.15rem}
.viz-stat{display:flex;align-items:center;gap:.2rem;color:#888;transition:color .25s}
.viz-stat-icon{font-size:.72rem;line-height:1}
.viz-active{color:#93c5fd}
/* Brief flash on a stat value -- used both for intra-turn shield dips/gains
   (_animateShieldEvents) and for the walkthrough's pulseStat() narration
   highlights (game/beginner-deck.php). Applied directly to whichever
   .viz-{stat}-val element is being called out. */
@keyframes vizStatPulse{0%{transform:scale(1.35)}100%{transform:scale(1)}}
.viz-pulse{display:inline-block;animation:vizStatPulse .32s ease-out}
/* Blows up a stat's icon (⚡/☠/🛡/♥/etc) to ~10x size while the walkthrough
   narrates it (pulseStat() in js/battle-visualizer.js) -- a first-time
   player has no reason to know which of the tiny row icons is "Energy" vs
   "Poison" otherwise. Only used by game/beginner-deck.php's walkthrough. */
@keyframes vizIconPulse{0%{transform:scale(1)}25%{transform:scale(10)}60%{transform:scale(10)}100%{transform:scale(1)}}
.viz-icon-pulse{display:inline-block;position:relative;z-index:20;animation:vizIconPulse 1.3s cubic-bezier(.34,1.56,.64,1)}
.viz-danger{color:#86efac}
.viz-dimmed{opacity:.5}
/* Progressive disclosure (game/beginner-deck.php's walkthrough only, via
   the constructor's hiddenStats option + revealStats()) -- hides a stat
   pill entirely until its introducing beat, rather than just dimming it. */
.viz-stat-hidden{display:none}
/* Primary tier -- Energy and the two board totals below it read as the
   numbers that actually decide what happens next (what you can play, what
   combat resolves to), so they're pulled out of the uniform small-text row
   the rest of the stats (and the deck/hand meta counts) share. Colors match
   the on-card melee/armor accents already established below (gold/cyan)
   rather than inventing a new palette. */
.viz-stat-primary{font-size:1rem;font-weight:800}
.viz-energy-stat{color:#fde68a}
.viz-melee-total-stat{color:#fbbf24}
.viz-armor-total-stat{color:#22d3ee}
.viz-bar-wrap{width:46px;height:4px;background:#1a1a24;border-radius:2px;overflow:hidden;flex-shrink:0}
.viz-bar-fill{height:100%;border-radius:2px;transition:width 500ms ease-out,background 300ms}
.viz-life-fill{background:#22c55e}
.viz-honor-fill{background:#fbbf24}
.viz-board{display:flex;flex-wrap:nowrap;gap:.5rem;padding:.5rem 0 .35rem;min-height:150px;align-items:flex-end;position:relative;z-index:1}
.viz-board-top{align-items:flex-start}
.viz-card{background:transparent;border:none;padding:0;font-size:.68rem;opacity:0;transform:translateY(8px);transition:opacity .28s ease-out,transform .28s ease-out;position:relative;overflow:visible;flex-shrink:0;line-height:0}
.viz-stack-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);min-width:22px;height:22px;border-radius:11px;background:rgba(0,0,0,.82);border:1px solid #555;color:#fff;font-size:1rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;z-index:6;pointer-events:none}
.viz-stack-count--large{border-color:var(--accent);color:var(--accent)}
/* Token copy indicator -- distinct corner badge (not the center-positioned
   stack-count/gear, and not a dim/glow reuse) so it stays legible and
   unambiguous even on a token that's also utilized or anthem-buffed. */
.viz-token-badge{position:absolute;top:2px;left:2px;background:rgba(0,0,0,.8);border:1px solid #7dd3fc;color:#7dd3fc;font-size:.5rem;font-weight:800;letter-spacing:.04em;padding:1px 4px;border-radius:3px;z-index:6;pointer-events:none;text-transform:uppercase}
.viz-card--visible{opacity:1;transform:none}
.viz-card--utilized{opacity:.3}
.viz-card--dying{pointer-events:none}
.viz-card-art{font-size:1.35rem;line-height:1;text-align:center;margin-bottom:.12rem;user-select:none}
.viz-card-name{font-weight:600;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.18rem}
.viz-card-spell-dot{width:7px;height:7px;border-radius:50%;background:#383850;margin:.12rem 0}
.viz-hp-wrap{position:absolute;bottom:14px;left:9px;right:9px;height:4px;background:rgba(0,0,0,.6);border-radius:2px;overflow:hidden}
.viz-hp-fill{height:100%;border-radius:2px;transition:width 380ms ease-out,background 280ms}
.viz-hp-text{position:absolute;bottom:4px;left:0;right:0;font-size:.58rem;color:#aaa;text-align:center;line-height:1}
/* Melee/Armor read bigger+bolder than the plain HP number between them --
   combat numbers should be legible at a glance, not just on hover. Placed
   before the anthem rules below so a buffed card's gold/cyan still wins
   (same specificity, later-in-file rule takes it). */
.viz-hp-melee,.viz-hp-armor{font-size:.72rem;font-weight:800;color:#ddd}
/* ── Anthem aura indicators (melee/armor buffed by another permanent in play) ──
   Colored stat text is the primary signal (distinct from rarity-ornament
   colors below: green rare, orange legendary, purple mythic, gold infinite);
   the card glow is intentionally faint so it reads as ambient light rather
   than competing with the rarity ring. */
.viz-stat-anthem-melee{color:#fbbf24;font-weight:800}
.viz-stat-anthem-armor{color:#22d3ee;font-weight:800}
.viz-card--anthem-melee{box-shadow:0 0 6px rgba(251,191,36,.45)}
.viz-card--anthem-armor{box-shadow:0 0 6px rgba(34,211,238,.45)}
.viz-card--anthem-melee.viz-card--anthem-armor{box-shadow:0 0 6px rgba(251,191,36,.4),0 0 10px rgba(34,211,238,.35)}
.viz-divider{display:flex;align-items:center;justify-content:center;padding:.28rem .75rem;font-size:.7rem;color:#383850;background:rgba(10,10,12,.85);border-top:1px solid #111;border-bottom:1px solid #111;letter-spacing:.03em;position:relative;overflow:visible;z-index:30}
.viz-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .45rem;padding:.5rem .75rem;border-top:1px solid var(--border);background:var(--surface2)}
.viz-btn{background:#1a1a22;border:1px solid #2a2a38;color:#999;border-radius:5px;padding:.18rem .5rem;font-size:.73rem;cursor:pointer;transition:color .12s,border-color .12s}
.viz-btn:hover{color:#ddd;border-color:#444}
.viz-btn.active{border-color:var(--accent);color:var(--accent)}
.viz-scrubber{flex:1;min-width:80px;accent-color:var(--accent);cursor:pointer}
.viz-turn-label{font-size:.7rem;color:#444;white-space:nowrap}
.viz-speed-wrap{display:flex;gap:.2rem}
.viz-feed{padding:.35rem .75rem;border-top:1px solid var(--border);font-size:.71rem;display:flex;flex-direction:column;gap:.08rem;height:110px;overflow-y:auto}
.viz-feed-line{padding:.03rem 0}
.ev-damage{color:#f87171}.ev-heal{color:#4ade80}.ev-play{color:#e2e2ea;font-weight:600}
.ev-die{color:#555;font-style:italic}.ev-poison{color:#86efac}.ev-shield{color:#93c5fd}
.ev-honor{color:#fbbf24}.ev-draw{color:#a78bfa}.ev-meta{color:#383850;font-style:italic}
.viz-float{position:absolute;right:0;top:-2px;pointer-events:none;font-weight:700;font-size:.8rem;z-index:10;animation:vizFloat 1.25s ease-out forwards}
@keyframes vizFloat{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}

/* ── Card death animation ─────────────────────────────────────────────────── */
@keyframes vizShatter{
  0%  {opacity:1;transform:scale(1) rotate(0deg) translateY(0)}
  18% {opacity:.95;transform:scale(1.12) rotate(-12deg) translateY(-4px)}
  100%{opacity:0;transform:scale(.25) rotate(35deg) translateY(18px)}
}
.viz-card--shatter{animation:vizShatter .58s ease-in forwards!important;pointer-events:none}

/* ── Card hit shake ──────────────────────────────────────────────────────── */
@keyframes vizHit{
  0%  {transform:translateX(0)}
  18% {transform:translateX(-7px)}
  40% {transform:translateX(5px)}
  60% {transform:translateX(-3px)}
  80% {transform:translateX(2px)}
  100%{transform:translateX(0)}
}
.viz-card--hit{
  animation:vizHit .46s ease-out;
  filter:brightness(1.8) saturate(1.4);
  transition:opacity .28s,filter .6s!important;
}

/* ── Card attack lunge ───────────────────────────────────────────────────── */
@keyframes vizLungeUp{
  0%  {transform:translateY(0) scale(1)}
  32% {transform:translateY(-14px) scale(1.08)}
  68% {transform:translateY(-4px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes vizLungeDown{
  0%  {transform:translateY(0) scale(1)}
  32% {transform:translateY(14px) scale(1.08)}
  68% {transform:translateY(4px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}
.viz-card--lunge-up  {animation:vizLungeUp   .46s ease-out;transition:opacity .28s,border-color .2s,background .25s!important}
.viz-card--lunge-down{animation:vizLungeDown .46s ease-out;transition:opacity .28s,border-color .2s,background .25s!important}

/* ── Card effect glow (fires when a card activates / is utilized) ─────────── */
@keyframes vizCardGlow{
  0%  {filter:brightness(1)   drop-shadow(0 0 0px  rgba(255,210,60,0))}
  25% {filter:brightness(1.7) drop-shadow(0 0 14px rgba(255,210,60,.95))}
  100%{filter:brightness(1)   drop-shadow(0 0 0px  rgba(255,210,60,0))}
}
.viz-card--glow{animation:vizCardGlow 1.1s ease-out forwards}

/* ── Floating damage number on card ─────────────────────────────────────── */
.viz-dmg-float{
  position:absolute;top:-6px;right:-2px;
  font-size:.76rem;font-weight:800;color:#f87171;
  pointer-events:none;z-index:20;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
  animation:vizDmgFloat .88s ease-out forwards;
}
@keyframes vizDmgFloat{
  0%  {opacity:1;transform:translateY(0) scale(1.2)}
  100%{opacity:0;transform:translateY(-22px) scale(.75)}
}

/* ── Player-area aura overlays ───────────────────────────────────────────── */
.viz-aura{
  position:absolute;inset:0;
  pointer-events:none;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  z-index:8;
  animation:vizAuraPulse 1.9s ease-out forwards;
}
@keyframes vizAuraPulse{
  0%  {opacity:.9}
  35% {opacity:.65}
  100%{opacity:0}
}
.viz-aura--poison{background:radial-gradient(ellipse at 50% 45%,rgba(34,197,94,.24) 0%,transparent 72%);box-shadow:inset 0 0 32px rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.28)}
.viz-aura--damage{background:radial-gradient(ellipse at 50% 50%,rgba(239,68,68,.22) 0%,transparent 70%);box-shadow:inset 0 0 28px rgba(239,68,68,.18);border:1px solid rgba(239,68,68,.32)}
.viz-aura--shield{background:radial-gradient(ellipse at 50% 30%,rgba(147,197,253,.2) 0%,transparent 70%);box-shadow:inset 0 0 22px rgba(147,197,253,.12);border:1px solid rgba(147,197,253,.28)}
.viz-aura--honor {background:radial-gradient(ellipse at 50% 60%,rgba(251,191,36,.2) 0%,transparent 70%);box-shadow:inset 0 0 22px rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25)}
.viz-aura--heal  {background:radial-gradient(ellipse at 50% 50%,rgba(74,222,128,.2) 0%,transparent 70%);box-shadow:inset 0 0 22px rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.22)}
.viz-aura--draw  {background:radial-gradient(ellipse at 50% 40%,rgba(167,139,250,.18) 0%,transparent 70%);box-shadow:inset 0 0 20px rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.22)}
.viz-aura--mill  {background:radial-gradient(ellipse at 50% 60%,rgba(75,85,99,.24) 0%,transparent 70%);box-shadow:inset 0 0 20px rgba(75,85,99,.14);border:1px solid rgba(75,85,99,.22)}

.viz-aura-num{
  font-size:1.4rem;font-weight:800;
  pointer-events:none;
  border-radius:4px;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
  animation:vizAuraNum 1.9s ease-out forwards;
}
@keyframes vizAuraNum{
  0%  {opacity:1;transform:scale(1.25) translateY(0)}
  28% {transform:scale(1.05) translateY(-5px)}
  100%{opacity:0;transform:scale(.8) translateY(-18px)}
}
.viz-aura--poison .viz-aura-num{color:#86efac;text-shadow:0 0 10px rgba(34,197,94,.8)}
.viz-aura--damage .viz-aura-num{color:#fca5a5;text-shadow:0 0 10px rgba(239,68,68,.8)}
.viz-aura--shield .viz-aura-num{color:#bfdbfe;text-shadow:0 0 10px rgba(147,197,253,.8)}
.viz-aura--honor  .viz-aura-num{color:#fde68a;text-shadow:0 0 10px rgba(251,191,36,.8)}
.viz-aura--heal   .viz-aura-num{color:#bbf7d0;text-shadow:0 0 10px rgba(74,222,128,.8)}
.viz-aura--draw   .viz-aura-num{color:#ddd6fe;text-shadow:0 0 10px rgba(167,139,250,.8)}

/* ── Top-3 compact strip ─────────────────────────────────────────────────── */
.top3-strip{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .6rem;padding:.55rem .9rem;margin-bottom:1rem;background:#0d0d18;border:1px solid #1e1c3a;border-radius:8px;font-size:.76rem}
.top3-label{color:#555;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;flex-shrink:0}
.top3-entry{display:flex;align-items:center;gap:.3rem;color:#b0a8c8;text-decoration:none;padding:.15rem .45rem;border-radius:5px;border:1px solid transparent;transition:background .12s,border-color .12s;white-space:nowrap}
.top3-entry:hover{background:#12122a;border-color:#2a2840;color:#d4cfe8}
.top3-medal{font-size:.85rem;line-height:1}
.top3-name{font-weight:600;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.top3-wr{font-size:.7rem;color:#22c55e;font-weight:700;font-family:monospace}
.top3-cohort{font-size:.68rem;color:#333;margin-left:auto;white-space:nowrap;flex-shrink:0}

/* ── RARITY ORNAMENTS ────────────────────────────────────────────────────── */

/* Uncommon — cool blue shimmer */
.viz-card.viz-rarity--uncommon{
  border-color:rgba(96,165,250,.5);
  filter:drop-shadow(0 0 4px rgba(96,165,250,.38));
}
.viz-card.viz-rarity--uncommon::before{border-color:rgba(96,165,250,.2)}
.viz-card.viz-rarity--uncommon::after{
  background:
    radial-gradient(circle at 0% 0%,rgba(96,165,250,.18) 0%,transparent 35%),
    radial-gradient(circle at 100% 100%,rgba(96,165,250,.18) 0%,transparent 35%);
}

/* Rare — forest green glow */
.viz-card.viz-rarity--rare{
  border-color:rgba(74,222,128,.55);
  filter:drop-shadow(0 0 5px rgba(74,222,128,.45));
}
.viz-card.viz-rarity--rare::before{border-color:rgba(74,222,128,.28)}
.viz-card.viz-rarity--rare::after{
  background:
    radial-gradient(circle at 0% 0%,rgba(74,222,128,.2) 0%,transparent 35%),
    radial-gradient(circle at 100% 0%,rgba(74,222,128,.2) 0%,transparent 35%),
    radial-gradient(circle at 0% 100%,rgba(74,222,128,.2) 0%,transparent 35%),
    radial-gradient(circle at 100% 100%,rgba(74,222,128,.2) 0%,transparent 35%);
}

/* Legendary — gold crown glow + all-four corner glints */
.viz-card.viz-rarity--legendary{
  border-color:rgba(250,180,0,.72);
  filter:drop-shadow(0 0 6px rgba(250,180,0,.58));
}
.viz-card.viz-rarity--legendary::before{border-color:rgba(250,160,0,.4)}
.viz-card.viz-rarity--legendary::after{
  background:
    radial-gradient(circle at 0% 0%,rgba(250,180,0,.32) 0%,transparent 32%),
    radial-gradient(circle at 100% 0%,rgba(250,180,0,.32) 0%,transparent 32%),
    radial-gradient(circle at 0% 100%,rgba(250,180,0,.32) 0%,transparent 32%),
    radial-gradient(circle at 100% 100%,rgba(250,180,0,.32) 0%,transparent 32%),
    radial-gradient(ellipse at 50% 0%,rgba(255,210,50,.18) 0%,transparent 55%);
}

/* Mythic — purple pulse + animated corner wisps */
.viz-card.viz-rarity--mythic{
  border-color:rgba(168,85,247,.75);
  animation:vizMythicPulse 2.6s ease-in-out infinite;
}
.viz-card.viz-rarity--mythic::before{border-color:rgba(168,85,247,.35)}
.viz-card.viz-rarity--mythic::after{
  background:
    radial-gradient(circle at 0% 0%,rgba(168,85,247,.38) 0%,transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(168,85,247,.38) 0%,transparent 34%),
    radial-gradient(circle at 0% 100%,rgba(168,85,247,.38) 0%,transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(168,85,247,.38) 0%,transparent 34%),
    radial-gradient(ellipse at 50% 50%,rgba(200,100,255,.12) 0%,transparent 65%);
  animation:vizMythicCorners 2.6s ease-in-out infinite;
}
@keyframes vizMythicPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(168,85,247,.52))}
  50%    {filter:drop-shadow(0 0 12px rgba(210,100,255,.85))}
}
@keyframes vizMythicCorners{
  0%,100%{opacity:.7}
  50%    {opacity:1}
}

/* Infinite — golden aurora shimmer across the full card */
.viz-card.viz-rarity--infinite{
  border-color:rgba(255,200,50,.88);
  animation:vizInfinitePulse 2.2s ease-in-out infinite;
}
.viz-card.viz-rarity--infinite::before{border-color:rgba(255,180,0,.5)}
.viz-card.viz-rarity--infinite::after{
  background:linear-gradient(
    115deg,
    rgba(255,60,0,.14) 0%,
    rgba(255,200,0,.22) 22%,
    rgba(255,255,120,.16) 44%,
    rgba(255,200,0,.22) 66%,
    rgba(255,60,0,.14) 88%,
    transparent 100%
  );
  background-size:300% 300%;
  animation:vizInfiniteShimmer 2.8s linear infinite;
}
@keyframes vizInfinitePulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,160,0,.68))}
  33%    {filter:drop-shadow(0 0 14px rgba(255,80,0,.85))}
  66%    {filter:drop-shadow(0 0 10px rgba(255,230,60,.9))}
}
@keyframes vizInfiniteShimmer{
  0%  {background-position:100% 0%}
  100%{background-position:0% 100%}
}

/* ── Spell active aura (while on board) ─────────────────────────────────── */
@keyframes vizSpellActive{
  0%  {box-shadow:0 0 0 3px rgba(120,80,220,.0),0 0 22px rgba(120,80,220,.0);filter:brightness(2.2) drop-shadow(0 0 14px rgba(130,80,240,1))}
  40% {box-shadow:0 0 0 3px rgba(120,80,220,.8),0 0 28px rgba(120,80,220,.6);filter:brightness(1.6) drop-shadow(0 0 18px rgba(150,90,255,.8))}
  100%{box-shadow:0 0 0 1px rgba(80,50,180,.25),0 0 8px rgba(80,50,180,.2);filter:brightness(1) drop-shadow(0 0 5px rgba(100,60,200,.4))}
}
.viz-card--spell-active{
  animation:vizSpellActive 1.1s ease-out forwards;
}

/* ── Spell burst exit (pronounced dissolve) ──────────────────────────────── */
@keyframes vizSpellBurst{
  0%  {opacity:1;transform:scale(1)   rotate(0deg);filter:brightness(1.5) drop-shadow(0 0 12px rgba(130,80,240,.9))}
  15% {opacity:1;transform:scale(1.45) rotate(-4deg);filter:brightness(2.8) drop-shadow(0 0 32px rgba(180,100,255,1))}
  45% {opacity:.7;transform:scale(1.8) rotate(6deg);filter:brightness(1.8) drop-shadow(0 0 24px rgba(130,80,240,.7))}
  100%{opacity:0;transform:scale(2.4) rotate(-8deg);filter:brightness(.5) drop-shadow(0 0 0px rgba(0,0,0,0))}
}
.viz-card--spell-burst{
  animation:vizSpellBurst 1.55s ease-out forwards!important;
  pointer-events:none;
  z-index:20;
}

/* ── Stack overlap ────────────────────────────────────────────────────────── */
.viz-card--stacked-behind{
  filter:brightness(.55);
  border-style:dashed;
}

/* ── Match-end overlay ───────────────────────────────────────────────────── */
.viz-end-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  z-index:50;cursor:pointer;
  backdrop-filter:blur(3px);
  animation:vizEndIn .5s ease-out;
  border-radius:inherit;
}
@keyframes vizEndIn{
  from{opacity:0;backdrop-filter:blur(0)}
  to  {opacity:1;backdrop-filter:blur(3px)}
}
.viz-end-inner{
  text-align:center;padding:1.4rem 2.2rem;
  border:1px solid rgba(208,160,40,.45);
  border-radius:10px;
  background:rgba(8,8,18,.88);
  animation:vizEndSlideIn .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes vizEndSlideIn{
  from{opacity:0;transform:scale(.85) translateY(14px)}
  to  {opacity:1;transform:scale(1)   translateY(0)}
}
.viz-end-winner{
  font-family:Impact,'Arial Black',sans-serif;
  font-size:1.65rem;font-weight:400;letter-spacing:.1em;
  color:#d0a028;
  text-shadow:0 0 28px rgba(208,160,40,.75),2px 2px 0 rgba(0,0,0,.8);
  line-height:1.2;
}
.viz-end-reason{
  font-size:.8rem;color:#777;margin-top:.45rem;letter-spacing:.03em;
}
.viz-end-hint{
  font-size:.65rem;color:#383848;margin-top:.75rem;letter-spacing:.04em;text-transform:uppercase;
}

/* ── Guided Mode popup ───────────────────────────────────────────────────── */
.viz-guided-popup{
  flex-direction:column;gap:.55rem;
  padding:.85rem 1rem;
  border-top:1px solid rgba(208,160,40,.4);
  background:linear-gradient(135deg,#161226,#1a1430);
  animation:vizGuidedIn .18s ease-out;
  cursor:pointer;
}
@keyframes vizGuidedIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.viz-guided-head{
  font-family:Impact,'Arial Black',sans-serif;font-weight:400;letter-spacing:.06em;
  font-size:.85rem;color:#d0a028;text-transform:uppercase;
}
.viz-guided-events{list-style:none;display:flex;flex-direction:column;gap:.2rem;font-size:.82rem;color:#d8dae8;line-height:1.5}
.viz-guided-events li{padding-left:1rem;position:relative}
.viz-guided-events li::before{content:'▸';position:absolute;left:0;color:#d0a028}
.viz-guided-nothing{font-size:.8rem;color:#666;font-style:italic}
.viz-guided-life{font-size:.78rem;color:#9ca3af;padding-top:.15rem;border-top:1px solid rgba(255,255,255,.08)}
.viz-guided-continue{
  align-self:flex-end;
  background:linear-gradient(135deg,#a07818,#d0a028);color:#fff;border:none;border-radius:6px;
  padding:.4rem 1rem;font-size:.78rem;font-weight:700;cursor:pointer;transition:filter .13s;
  font-family:system-ui,sans-serif;
}
.viz-guided-continue:hover{filter:brightness(1.12)}
.viz-btn.viz-guided-toggle.active{border-color:#d0a028;color:#d0a028;background:rgba(208,160,40,.12)}

/* ── Board / discard layout ──────────────────────────────────────────────── */
.viz-board-wrap{display:flex;align-items:stretch;min-height:64px}
.viz-board{flex:1;min-width:0;overflow-x:auto;overflow-y:visible}
.viz-board::-webkit-scrollbar{height:6px}
.viz-board::-webkit-scrollbar-track{background:transparent}
.viz-board::-webkit-scrollbar-thumb{background:rgba(249,115,22,.35);border-radius:3px}
.viz-board::-webkit-scrollbar-thumb:hover{background:rgba(249,115,22,.55)}
.viz-board{scrollbar-width:thin;scrollbar-color:rgba(249,115,22,.35) transparent}

/* ── Champion Zone ─────────────────────────────────────────────────────────── */
.viz-champion-zone{display:none;flex-direction:column;align-items:center;gap:.15rem;padding:.3rem .5rem .25rem;border-right:1px solid #1e1e2c;margin-right:.3rem;min-width:76px;max-width:96px;flex-shrink:0}
.viz-champion-zone.viz--champ{display:flex}
.viz-champ-label{font-size:.56rem;color:#7c3aed;text-transform:uppercase;letter-spacing:.06em;font-weight:700;white-space:nowrap;margin-bottom:.04rem}
.viz-champ-card{background:#1a0a2e;border:1px solid rgba(124,58,237,.4);border-radius:6px;padding:.3rem .4rem;width:100%;font-size:.68rem;box-sizing:border-box;transition:opacity .3s}
.viz-champ-card.viz-champ-absent{opacity:.22;border-style:dashed}
.viz-champ-svg{display:block;transition:opacity .3s}
.viz-champ-svg.viz-champ-absent{opacity:.22}
.viz-champ-cost{font-size:.62rem;color:#a78bfa;text-align:center;margin-top:.06rem}
/* Discard pile */
.viz-pile{flex:none;width:52px;border-left:1px solid rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px 3px 5px;gap:3px}
.viz-pile-stack{position:relative;width:36px;height:44px;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))}
.viz-pile-card{position:absolute;width:32px;height:40px;border-radius:3px;background:linear-gradient(150deg,#1a1a26,#0b0b12);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:default;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.viz-pile-card:nth-child(1){top:5px;left:5px;z-index:1;opacity:.35;transform:rotate(-4deg)}
.viz-pile-card:nth-child(2){top:2px;left:2px;z-index:2;opacity:.65;transform:rotate(-1.5deg)}
.viz-pile-card:nth-child(3){top:0;left:0;z-index:3;opacity:1}
.viz-pile-emoji{font-size:.88rem;line-height:1}
.viz-pile-icon{width:20px;height:20px;object-fit:contain;display:block}
.viz-pile-num{font-size:.68rem;font-weight:700;color:#555;line-height:1}
.viz-pile-lbl{font-size:.5rem;color:#2a2a36;text-transform:uppercase;letter-spacing:.05em}

/* Discard pile — rarity tint on the top card only, kept subtle/static so the
   secondary pile UI doesn't compete with the main battlefield's animated glows */
.viz-pile-card.viz-rarity--uncommon{border-color:rgba(96,165,250,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 4px rgba(96,165,250,.3)}
.viz-pile-card.viz-rarity--rare{border-color:rgba(74,222,128,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 4px rgba(74,222,128,.32)}
.viz-pile-card.viz-rarity--legendary{border-color:rgba(250,180,0,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 5px rgba(250,180,0,.4)}
.viz-pile-card.viz-rarity--mythic{border-color:rgba(168,85,247,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 5px rgba(168,85,247,.4)}
.viz-pile-card.viz-rarity--infinite{border-color:rgba(255,200,50,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 5px rgba(255,200,50,.45)}

/* Hand row -- reuses .viz-pile-card's tile/rarity styling verbatim, but laid
   out as a plain scrollable flex row (every card visible, no stacking) since
   hand has no "top of pile" concept. Overrides the pile-stack's absolute
   positioning/rotation (meant for 3 overlapping cards) back to normal flow. */
.viz-hand-row{display:flex;align-items:center;gap:4px;padding:.3rem .6rem;min-height:48px;overflow-x:auto;overflow-y:visible}
.viz-hand-row::-webkit-scrollbar{height:6px}
.viz-hand-row::-webkit-scrollbar-track{background:transparent}
.viz-hand-row::-webkit-scrollbar-thumb{background:rgba(249,115,22,.35);border-radius:3px}
.viz-hand-row{scrollbar-width:thin;scrollbar-color:rgba(249,115,22,.35) transparent}
.viz-hand-row .viz-pile-card{position:static;flex:none;opacity:1;transform:none;cursor:pointer}
.viz-hand-row .viz-pile-card:hover{border-color:rgba(255,255,255,.32)}

/* ── Spell announce card (SVG-framed, caster-side board item) ────────────── */
.viz-spell-announce{
  flex:none;
  position:relative;
  pointer-events:auto;cursor:default;
  background:none;border:none;padding:0;box-shadow:none;border-radius:0;
  width:90px;line-height:0;overflow:visible;
  animation:vizSannIn .36s cubic-bezier(.15,.85,.2,1) both,
            vizSpellHue 2.4s .36s linear infinite;
  align-self:flex-end;
}
.viz-spell-announce:hover{cursor:pointer}
.viz-spell-announce.viz-sann--exit{
  animation:vizSannOut 1.45s ease-in forwards;
  pointer-events:none;
}
@keyframes vizSannIn{
  0%  {opacity:0;transform:scale(.58) translateY(10px);filter:brightness(3.5) drop-shadow(0 0 20px rgba(249,115,22,1))}
  55% {opacity:1;transform:scale(1.07) translateY(-3px);filter:brightness(1.7) drop-shadow(0 0 22px rgba(249,115,22,.9))}
  100%{opacity:1;transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 14px rgba(249,115,22,.72))}
}
@keyframes vizSpellHue{
  from{filter:drop-shadow(0 0 14px rgba(249,115,22,.72)) hue-rotate(0deg)}
  to  {filter:drop-shadow(0 0 14px rgba(249,115,22,.72)) hue-rotate(360deg)}
}
@keyframes vizSannOut{
  0%  {opacity:1;transform:scale(1) translateY(0);filter:brightness(1) drop-shadow(0 0 14px rgba(249,115,22,.7))}
  18% {opacity:.92;transform:scale(1.04) translateY(-4px);filter:brightness(1.3) drop-shadow(0 0 20px rgba(249,115,22,.85))}
  100%{opacity:0;transform:scale(.86) translateY(-18px);filter:brightness(.5) drop-shadow(0 0 0 rgba(0,0,0,0))}
}
/* Wavy rainbow border overlay SVG injected per-spell */
.viz-sann-wave{
  animation:vizSpellWaveHue 2.4s .36s linear infinite;
}
@keyframes vizSpellWaveHue{
  from{filter:hue-rotate(0deg)}
  to  {filter:hue-rotate(360deg)}
}
/* Flowing dashes on the wavy rainbow rect — GPU-accelerated, no filter recalc */
.viz-sann-wave-rect{
  animation:vizSpellDash 1.6s linear infinite;
}
@keyframes vizSpellDash{
  from{stroke-dashoffset:0}
  to  {stroke-dashoffset:-36}
}
/* Fallback inner text styles (used when buildCardSVGMini is unavailable) */
.viz-sann-emoji{font-size:1.8rem;line-height:1;text-align:center;margin-bottom:.28rem;user-select:none}
.viz-sann-name{font-size:.75rem;font-weight:700;color:#fde68a;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viz-sann-sub{font-size:.58rem;color:#b45309;text-transform:uppercase;letter-spacing:.07em;margin-top:.18rem;text-align:center}
@media(max-width:600px){
  .viz-player-name{max-width:110px}.viz-bar-wrap{width:34px}
  .top3-entry{font-size:.72rem}.top3-name{max-width:90px}
}

/* ── Combat melee arrow ─────────────────────────────────────────────────── */
.viz-combat-arrow{
  position:absolute;
  left:50%;top:50%;
  display:flex;flex-direction:column;align-items:center;gap:.18rem;
  pointer-events:none;z-index:60;
  white-space:nowrap;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(239,68,68,.4);
  border-radius:10px;
  padding:.5rem .9rem;
  backdrop-filter:blur(4px);
}
.viz-combat-label{font-size:1rem;font-weight:900;color:#fbbf24;letter-spacing:.14em;text-shadow:0 0 12px rgba(251,191,36,.8);text-transform:uppercase}
.viz-combat-row{display:flex;align-items:center;gap:.3rem}
.viz-combat-icon{font-size:1.5rem;line-height:1;filter:drop-shadow(0 0 8px rgba(239,68,68,.85))}
.viz-combat-dir{font-size:1.3rem;font-weight:900;color:#fca5a5}
.viz-combat-dmg{font-size:1.5rem;font-weight:800;color:#f87171;text-shadow:0 0 14px rgba(239,68,68,.95)}

@keyframes vizCombatUp{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.55)}
  12% {opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  55% {opacity:1;transform:translate(-50%,calc(-50% - 22px)) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 46px)) scale(.85)}
}
@keyframes vizCombatDown{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.55)}
  12% {opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  55% {opacity:1;transform:translate(-50%,calc(-50% + 22px)) scale(1)}
  100%{opacity:0;transform:translate(-50%,calc(-50% + 46px)) scale(.85)}
}
.viz-combat-arrow--up  {animation:vizCombatUp   1.8s ease-out forwards}
.viz-combat-arrow--down{animation:vizCombatDown 1.8s ease-out forwards}

/* ── Gear overlay — spinning indicator on utilized cards ─────────────────── */
.viz-gear-overlay{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-size:1.85rem;line-height:1;
  pointer-events:none;
  opacity:0;
  z-index:6;
  /* Brightness compensates for parent opacity:.3 on utilized cards */
  filter:brightness(5) drop-shadow(0 0 5px rgba(255,180,0,.95));
  color:rgba(255,210,80,1);
  transition:opacity .25s;
}
.viz-card--utilized .viz-gear-overlay{
  opacity:1; /* effective = parent(0.3)×1 = 0.3, but brightness(5) makes it visible */
  animation:vizGearSpin 2.4s linear infinite;
}
@keyframes vizGearSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}

/* ── Directional bump — attacker card lunges toward its target ───────────── */
@keyframes vizBump{
  0%  {transform:translate(0,0) rotate(0deg) scale(1)}
  45% {transform:translate(var(--bump-x,0px),var(--bump-y,-60px)) rotate(var(--bump-tilt,-8deg)) scale(1.18)}
  100%{transform:translate(0,0) rotate(0deg) scale(1)}
}
.viz-card--bump{
  animation:vizBump .55s cubic-bezier(.22,.68,0,1.2) !important;
  transition:none !important;
  z-index:50;
  position:relative;
}
/* Board must overflow and outrank the divider while a card is mid-bump */
.viz-board--bumping{
  overflow:visible !important;
  z-index:40 !important;
}

/* ── Combat melee march — attackers step forward, armor defenders brace ──── */
.viz-card--melee-attacker{
  transition:transform .22s cubic-bezier(.34,1.4,.64,1),filter .22s ease-out !important;
}
.viz-card--melee-attacker.viz-card--march-up{
  transform:translateY(-24px) scale(1.08);
  filter:brightness(1.5) drop-shadow(0 0 11px rgba(251,191,36,.8));
  z-index:45;
}
.viz-card--melee-attacker.viz-card--march-down{
  transform:translateY(24px) scale(1.08);
  filter:brightness(1.5) drop-shadow(0 0 11px rgba(251,191,36,.8));
  z-index:45;
}
@keyframes vizBlockBrace{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(147,197,253,0))}
  40%    {filter:brightness(1.55) drop-shadow(0 0 12px rgba(147,197,253,.95))}
}
.viz-card--blocking{animation:vizBlockBrace .5s ease-in-out 2}
.viz-block-badge{
  position:absolute;top:-8px;left:50%;
  font-size:.8rem;pointer-events:none;z-index:31;
  filter:drop-shadow(0 0 5px rgba(147,197,253,.95));
  animation:vizBlockBadge .95s ease-out forwards;
}
@keyframes vizBlockBadge{
  0%  {opacity:0;transform:translate(-50%,4px) scale(.7)}
  20% {opacity:1;transform:translate(-50%,0) scale(1.15)}
  80% {opacity:1;transform:translate(-50%,0) scale(1)}
  100%{opacity:0;transform:translate(-50%,-6px) scale(.9)}
}