/* ========== HEADER ========== */
  .header { text-align: center; margin-bottom: 2px; }
  .header h1 {
    font-size: 1.4rem;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 2px; text-transform: uppercase;
  }
  .header .subtitle { font-size: .7rem; color: #64748b; margin-top: 2px; }

  /* ========== STATUS BARS ========== */
  .status-row {
    display: flex; justify-content: center; align-items: center;
    width: auto; max-width: calc(100vw - 52px);
    margin-bottom: 0px; gap: 8px;
    margin-left: auto; margin-right: auto;
  }
  .player-info {
    display: flex; flex-direction: row; align-items: center; gap: 8px;
    background: var(--panel); border: 1px solid var(--panel-border);
    border-radius: 8px; padding: 6px 10px; min-width: 0; overflow: hidden;
  }
  .player-info-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; }
  .player-info.red  { border-color: var(--red); }
  .player-info.white { border-color: #475569; }
  .player-info-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .player-hud-avatar {
    width: 44px; height: 44px; border-radius: 6px;
    object-fit: cover; border: 1px solid rgba(255,255,255,.18); flex-shrink: 0;
  }
  .player-hud-avatar-initials {
    display: flex; align-items: center; justify-content: center;
    background: #1e40af; color: #bfdbfe; font-size: .75rem; font-weight: 700;
  }
  .player-info .name { font-weight: 700; font-size: .8rem; color: #f1f5f9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player-info .stat { font-size: .72rem; color: #cbd5e1; white-space: nowrap; }
  .player-info .stat b { color: var(--gold); }

  .turn-active {
    box-shadow: 0 0 0 2px rgba(74,222,128,.22), 0 10px 18px rgba(34,197,94,.14);
    border-color: rgba(74,222,128,.35);
    transform: translateY(-1px);
    animation: activeGlow 1.4s ease-in-out infinite;
  }
  .turn-active.white {
    box-shadow: 0 0 0 2px rgba(248,113,113,.22), 0 10px 18px rgba(248,113,113,.14);
    border-color: rgba(248,113,113,.35);
  }

  .turn-badge {
    background: var(--panel); border: 1px solid var(--gold-dark);
    border-radius: 8px; padding: 6px 14px; text-align: center;
    font-size: .75rem; color: #e2e8f0;
  }
  .turn-badge .turn-num { font-size: 1.1rem; font-weight: 700; color: var(--gold); }

  .turn-banner {
    background: linear-gradient(135deg, rgba(161,98,7,.22), rgba(250,204,21,.08));
    box-shadow: 0 6px 16px rgba(250,204,21,.12), inset 0 0 12px rgba(250,204,21,.14);
  }

  @keyframes activeGlow {
    0%,100% { filter: brightness(1); }
    50% { filter: brightness(1.08); }
  }

  /* ========== JUICE PACK v1 — hit-stop + camera shake ========== */
  /* Hit-stop: freeze "juicy" FX animations for ~110ms on impact. Scoped
     to the specific classes that animate so the browser doesn't walk
     every descendant of .board-scene looking for paused rules (universal
     selectors are surprisingly expensive on deep trees). */
  .board-scene.hit-stop .fx,
  .board-scene.hit-stop .destroy-particle,
  .board-scene.hit-stop .attack-arc,
  .board-scene.hit-stop .summon-particles,
  .board-scene.hit-stop .card-token.is-destroying {
    animation-play-state: paused !important;
  }

  /* Camera shake: intensity controlled via --shake-intensity (0..1).
     Two strengths — light (single-monster damage) and heavy (leader hit). */
  @keyframes camera-shake-light {
    0%,100% { transform: translate3d(0,0,0); }
    10%     { transform: translate3d(calc(-6px * var(--shake-intensity, .5)), calc(-2px * var(--shake-intensity, .5)), 0); }
    25%     { transform: translate3d(calc(5px  * var(--shake-intensity, .5)), calc(3px  * var(--shake-intensity, .5)), 0); }
    45%     { transform: translate3d(calc(-4px * var(--shake-intensity, .5)), calc(2px  * var(--shake-intensity, .5)), 0); }
    65%     { transform: translate3d(calc(3px  * var(--shake-intensity, .5)), calc(-3px * var(--shake-intensity, .5)), 0); }
    85%     { transform: translate3d(calc(-2px * var(--shake-intensity, .5)), calc(1px  * var(--shake-intensity, .5)), 0); }
  }
  @keyframes camera-shake-heavy {
    0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
    8%      { transform: translate3d(calc(-10px * var(--shake-intensity, 1)), calc(-4px * var(--shake-intensity, 1)), 0) rotate(-.4deg); }
    20%     { transform: translate3d(calc(9px   * var(--shake-intensity, 1)), calc(5px  * var(--shake-intensity, 1)), 0) rotate(.4deg); }
    35%     { transform: translate3d(calc(-8px  * var(--shake-intensity, 1)), calc(3px  * var(--shake-intensity, 1)), 0) rotate(-.3deg); }
    50%     { transform: translate3d(calc(6px   * var(--shake-intensity, 1)), calc(-4px * var(--shake-intensity, 1)), 0) rotate(.2deg); }
    65%     { transform: translate3d(calc(-4px  * var(--shake-intensity, 1)), calc(2px  * var(--shake-intensity, 1)), 0) rotate(-.2deg); }
    80%     { transform: translate3d(calc(3px   * var(--shake-intensity, 1)), calc(-1px * var(--shake-intensity, 1)), 0) rotate(.1deg); }
    92%     { transform: translate3d(calc(-2px  * var(--shake-intensity, 1)), 0, 0) rotate(0deg); }
  }
  .board-scene.shake-light  { animation: camera-shake-light .25s cubic-bezier(.36,.07,.19,.97); }
  .board-scene.shake-heavy  { animation: camera-shake-heavy .42s cubic-bezier(.36,.07,.19,.97); }
  .board-scene.shake-heavy::after {
    content: ''; position: absolute; inset: -10%; pointer-events: none; z-index: 5;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(200,16,46,.35) 100%);
    animation: leader-hit-vignette .42s ease-out;
  }
  @keyframes leader-hit-vignette {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Respect user's motion preference */
  @media (prefers-reduced-motion: reduce) {
    .board-scene.shake-light,
    .board-scene.shake-heavy { animation: none; }
    .board-scene.shake-heavy::after { display: none; }
  }

  /* ========== JUICE PACK v2 — slow-mo / color grading / letterbox / turn wipe ========== */

  /* Slow-mo: scale animation-duration of every descendant to 0.35× speed.
     We piggy-back on the fact that our FX use CSS animations — setting
     animation-duration via a variable + multiplier is cleaner than JS.
     Since we can't multiply existing durations without enumerating,
     we use a catch-all slowdown via keyframes-style rate scaling: set
     animation-play-state ratio via `animation-duration: calc(var(--ad, 1s) * 2.85)`
     is impossible generically. Instead: scale the time axis with the
     transform trick via animation-delay adjustments is overkill. Pragmatic
     approach: use a CSS variable `--slow-mo` that the big-impact
     animations read (hit-stop, destruction FX, etc.) OR a wholesale
     filter on .slow-mo that slows only transitions. */
  /* Slow-mo: scale specific FX animations; avoid universal `*` which
     walks the entire subtree every frame. */
  .board-scene.slow-mo .fx,
  .board-scene.slow-mo .destroy-particle,
  .board-scene.slow-mo .attack-arc,
  .board-scene.slow-mo .summon-particles,
  .board-scene.slow-mo .card-token.is-destroying,
  .board-scene.slow-mo .card-3d-wrapper {
    animation-duration: calc(var(--anim-base, 1s) * 2.85) !important;
    transition-duration: calc(var(--trans-base, .3s) * 2.85) !important;
  }
  .board-scene.slow-mo::after {
    content: ''; position: absolute; inset: -10%; pointer-events: none; z-index: 6;
    background:
      radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.6) 100%),
      linear-gradient(180deg, rgba(200,16,46,.05), transparent 20%, rgba(250,204,21,.04));
    animation: slow-mo-vignette .4s ease-out;
  }
  @keyframes slow-mo-vignette {
    0% { opacity: 0; }
    40% { opacity: 1; }
    100% { opacity: .8; }
  }

  /* Color grading by LP — cheap overlay approach. Using `filter:` on
     .board-scene triggered GPU compositing of the entire 3D subtree
     (board + all cards + atmosphere canvas) every frame; this version
     only paints a single fixed-position tinted layer which is virtually
     free. Fades in on class change via transition on opacity. */
  .board-scene.lp-grade-tense::before,
  .board-scene.lp-grade-critical::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
    transition: opacity .6s ease, background .6s ease;
  }
  .board-scene.lp-grade-tense::before {
    background: rgba(10,10,20,.28);
    opacity: 1;
  }
  .board-scene.lp-grade-critical::before {
    background:
      radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(200,16,46,.28) 100%),
      rgba(10,10,20,.18);
    opacity: 1;
    /* No infinite pulse — keeps the compositor quiet. */
  }

  /* Letterbox bars — slide in from top/bottom during cinematics */
  .cinematic-letterbox {
    position: fixed; inset: 0; pointer-events: none; z-index: 9500;
  }
  .cinematic-letterbox-bar {
    position: absolute; left: 0; right: 0; height: 10vh;
    background: #000;
    transform: translateY(-100%);
    transition: transform .32s cubic-bezier(.25,.8,.25,1);
  }
  .cinematic-letterbox-bar.top    { top: 0; }
  .cinematic-letterbox-bar.bottom { bottom: 0; transform: translateY(100%); }
  .cinematic-letterbox.on .cinematic-letterbox-bar.top    { transform: translateY(0); }
  .cinematic-letterbox.on .cinematic-letterbox-bar.bottom { transform: translateY(0); }

  /* Turn transition wipe */
  .turn-wipe {
    position: fixed; inset: 0; pointer-events: none; z-index: 9200; overflow: hidden;
  }
  .turn-wipe-band {
    position: absolute; top: 42%; left: -40vw; right: -40vw;
    height: 140px;
    display: flex; align-items: center; justify-content: center; gap: 26px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.85) 18%, rgba(0,0,0,.9) 50%, rgba(0,0,0,.85) 82%, transparent 100%);
    border-top: 2px solid transparent; border-bottom: 2px solid transparent;
    animation: turn-wipe-sweep 1.8s cubic-bezier(.55,.05,.35,.98) forwards;
  }
  .turn-wipe-player .turn-wipe-band {
    border-color: #facc15;
    box-shadow: 0 0 40px rgba(250,204,21,.45), inset 0 0 60px rgba(250,204,21,.14);
  }
  .turn-wipe-enemy .turn-wipe-band {
    border-color: #c8102e;
    box-shadow: 0 0 40px rgba(200,16,46,.5), inset 0 0 60px rgba(200,16,46,.16);
  }
  .turn-wipe-label {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.6rem; font-weight: 900; letter-spacing: .3em; text-transform: uppercase;
    color: #e2e8f0; text-shadow: 0 0 18px rgba(255,255,255,.35);
  }
  .turn-wipe-player .turn-wipe-label { color: #facc15; text-shadow: 0 0 22px rgba(250,204,21,.6); }
  .turn-wipe-enemy  .turn-wipe-label { color: #ff4060; text-shadow: 0 0 22px rgba(200,16,46,.6); }
  .turn-wipe-name {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 1.4rem; font-weight: 700; letter-spacing: .2em;
    color: #fff; text-shadow: 0 0 14px rgba(0,0,0,.9), 0 2px 0 #000;
    max-width: 60vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Slide in from the left, HOLD at center ~900ms so the name is readable,
     then slide out to the right. Text un-skews so it stays legible. */
  @keyframes turn-wipe-sweep {
    0%   { transform: translateX(-110vw) skewX(-18deg); opacity: 0; }
    18%  { transform: translateX(-10vw)  skewX(-18deg); opacity: 1; }
    32%  { transform: translateX(0)       skewX(-18deg); opacity: 1; }
    68%  { transform: translateX(0)       skewX(-18deg); opacity: 1; }
    82%  { transform: translateX(10vw)    skewX(-18deg); opacity: 1; }
    100% { transform: translateX(110vw)   skewX(-18deg); opacity: 0; }
  }
  /* Keep the label/name upright while the band stays skewed */
  .turn-wipe-label, .turn-wipe-name { transform: skewX(18deg); }

  @media (prefers-reduced-motion: reduce) {
    .board-scene.slow-mo .fx,
    .board-scene.slow-mo .destroy-particle,
    .board-scene.slow-mo .attack-arc,
    .board-scene.slow-mo .summon-particles,
    .board-scene.slow-mo .card-token.is-destroying,
    .board-scene.slow-mo .card-3d-wrapper {
      animation-duration: calc(var(--anim-base, 1s) * 1.4) !important;
      transition-duration: calc(var(--trans-base, .3s) * 1.4) !important;
    }
    .turn-wipe-band { animation-duration: .4s; }
    .cinematic-letterbox-bar { transition: transform .15s; }
    .board-scene.lp-grade-critical::before { animation: none; opacity: .5; }
  }

  /* ========== 3D BOARD ========== */
  .board-scene {
    perspective: 900px;
    perspective-origin: 50% 20%;
    margin: 0;
    margin-top: -52px;
    margin-bottom: 60px;
    /* Containing block for the ::before / ::after overlays added by the
       juice-pack (slow-mo vignette, shake-heavy vignette, lp-grade-critical
       pulse). Without this they escape to the viewport and paint over the
       entire screen — which manifested as a black-out on state changes. */
    position: relative;
  }
  .board-wrapper {
    transform: rotateX(45deg) rotateZ(0deg);
    transform-style: preserve-3d;
    position: relative;
    width: fit-content;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* PS2-faithful: rotate board 180° to enemy perspective during their turn */
  .board-wrapper.enemy-turn {
    transform: rotateX(45deg) rotateZ(180deg);
  }
  .board {
    display: grid;
    grid-template-columns: repeat(var(--board-size), var(--cell-size));
    grid-template-rows:    repeat(var(--board-size), var(--cell-size));
    /* gap: 0 + padding: 0 pra remover as zonas mortas de 2-3px entre
       células onde o clique do mouse não registrava. A separação
       visual segue feita pela borda 1px de cada .cell. */
    gap: 0;
    background: linear-gradient(145deg, #0a0a14, #111122);
    border: 3px solid #2a2a40;
    border-radius: 4px;
    padding: 0;
    box-shadow:
      0 30px 60px rgba(0,0,0,.7),
      0 0 0 1px rgba(255,255,255,.04),
      inset 0 0 40px rgba(0,0,0,.3);
    transform-style: preserve-3d;
    position: relative; /* containing block for .atmosphere-canvas + .attack-arcs overlays */
  }

  .cell {
    position: relative;
    width: var(--cell-size); height: var(--cell-size);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, box-shadow .15s;
    font-size: .6rem; text-align: center;
    overflow: visible;
    transform-style: preserve-3d;
  }
  .cell.dark {
    background: linear-gradient(135deg, #12122a 0%, #0e0e20 100%);
  }
  .cell.light {
    background: linear-gradient(135deg, #1a1a38 0%, #14142c 100%);
  }

  /* FX overlays per cell + global flashes */
  .fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    mix-blend-mode: screen;
  }
  .fx { pointer-events: none; }
  .cell .fx {
    position: absolute;
    inset: 2px;
    border-radius: 6px;
    z-index: 400;
    opacity: .95;
  }

  /* ── Card Destroyed (generic) ── */
  .fx-destroy {
    background: radial-gradient(circle at 50% 50%, rgba(248,113,113,.65) 0%, rgba(248,113,113,.1) 50%, transparent 70%);
    animation: fxPop .85s ease-out forwards;
  }

  /* ── Lightning bolt on card (Raigeki / Lightning Vortex) — PS2 DotR style ── */
  .fx-lightning {
    position: absolute;
    left: 50%; top: -60%;
    width: 60px; height: 220%;
    transform: translateX(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 600'><defs><filter id='lg'><feGaussianBlur stdDeviation='4' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter><linearGradient id='lgg' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23fff8a0' stop-opacity='.9'/><stop offset='40%25' stop-color='%23ffd700'/><stop offset='100%25' stop-color='%23ff8c00' stop-opacity='.6'/></linearGradient></defs><path d='M55 0 L45 80 L72 120 L30 210 L65 270 L25 380 L60 440 L40 520 L55 600' stroke='url(%23lgg)' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' fill='none' filter='url(%23lg)' opacity='.7'/><path d='M55 0 L45 80 L72 120 L30 210 L65 270 L25 380 L60 440 L40 520 L55 600' stroke='%23fffde0' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' fill='none' filter='url(%23lg)'/><path d='M45 80 L20 140' stroke='%23ffe066' stroke-width='4' stroke-linecap='round' fill='none' opacity='.5' filter='url(%23lg)'/><path d='M65 270 L90 330' stroke='%23ffe066' stroke-width='3' stroke-linecap='round' fill='none' opacity='.4' filter='url(%23lg)'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: fxLightning 1800ms ease-out forwards;
    filter: drop-shadow(0 0 16px rgba(255,215,0,0.9)) drop-shadow(0 0 30px rgba(255,180,0,0.5));
    z-index: 50;
  }
  .fx-lightning::after {
    content: '';
    position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
    width: 50px; height: 50px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,250,200,.8) 0%, rgba(255,215,0,.4) 40%, transparent 70%);
    animation: fxLightningImpact 1s ease-out 0.1s forwards;
    opacity: 0;
  }
  @keyframes fxLightningImpact {
    0% { opacity: 0; transform: translateX(-50%) scale(0.3); }
    20% { opacity: 1; transform: translateX(-50%) scale(1.5); }
    100% { opacity: 0; transform: translateX(-50%) scale(2.5); }
  }

  /* ── Black Hole suction on card (subtle glow — canvas handles global) ── */
  .fx-blackhole-suck {
    background: radial-gradient(circle at 50% 50%, rgba(120,0,220,.6) 0%, rgba(60,0,130,.3) 40%, transparent 70%);
    animation: fxBlackholeSuck 3s cubic-bezier(.15,.05,.08,1) forwards;
    border-radius: 4px;
  }

  /* ── Summon Portal Effect (PS2 DotR style) ── */
  .fx-summon {
    background: none;
    animation: none;
    overflow: visible;
  }
  .fx-summon::before, .fx-summon::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
  /* Outer portal ring */
  .fx-summon::before {
    width: 120%; height: 120%;
    border: 2px solid rgba(250,204,21,.7);
    box-shadow: 0 0 15px rgba(250,204,21,.6), inset 0 0 15px rgba(250,204,21,.3), 0 0 40px rgba(255,180,0,.3);
    animation: summonPortalRing 1.2s ease-out forwards;
  }
  /* Inner light column */
  .fx-summon::after {
    width: 60%; height: 200%;
    background: linear-gradient(to top, rgba(250,204,21,.6) 0%, rgba(255,255,200,.8) 30%, rgba(255,255,255,.9) 50%, rgba(255,255,200,.8) 70%, transparent 100%);
    filter: blur(6px);
    animation: summonLightColumn 1.2s ease-out forwards;
  }
  @keyframes summonPortalRing {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotateX(70deg); }
    20% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotateX(70deg); }
    50% { opacity: .8; transform: translate(-50%,-50%) scale(1.0) rotateX(70deg); box-shadow: 0 0 25px rgba(250,204,21,.9), inset 0 0 20px rgba(250,204,21,.5), 0 0 60px rgba(255,180,0,.5); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3) rotateX(70deg); }
  }
  @keyframes summonLightColumn {
    0% { opacity: 0; transform: translate(-50%,-50%) scaleY(0); }
    15% { opacity: 1; transform: translate(-50%,-50%) scaleY(1); }
    60% { opacity: .7; }
    100% { opacity: 0; transform: translate(-50%,-50%) scaleY(1.2); }
  }
  /* Golden particles rising from summon */
  .summon-particles {
    position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 5;
  }
  .summon-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: #ffd700;
    border-radius: 50%;
    box-shadow: 0 0 4px #ffd700, 0 0 8px rgba(255,215,0,.5);
    animation: summonParticleRise 1.2s ease-out forwards;
  }
  @keyframes summonParticleRise {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(0); }
  }

  /* ── Trap activation flash ── */
  .fx-trap {
    background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.65) 0%, rgba(168,85,247,.1) 50%, transparent 70%);
    animation: fxTrap 1s ease-out forwards;
  }

  /* ── Mirror Wall / half ATK pre-battle cue ── */
  .fx-halfatk {
    background:
      radial-gradient(circle at 50% 50%, rgba(244,114,182,.55), rgba(168,85,247,.18) 55%, transparent 70%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 4px, rgba(255,255,255,0) 4px 9px);
    border: 1px solid rgba(244,114,182,.6);
    animation: fxHalfAtk 1.1s ease-out forwards;
  }

  /* ── Phase / turn transition ── */
  .fx-round {
    background: radial-gradient(circle at 50% 50%, rgba(250,204,21,.32), transparent 70%);
    animation: fxPulse 1.05s ease-out forwards;
  }
  .fx-turn-player {
    background: radial-gradient(circle at 50% 50%, rgba(34,197,94,.3), transparent 70%);
    animation: fxWave 1.05s ease-out forwards;
  }
  .fx-turn-enemy {
    background: radial-gradient(circle at 50% 50%, rgba(248,113,113,.3), transparent 70%);
    animation: fxWave 1.05s ease-out forwards;
  }

  /* ── Global overlays ── */
  .fx-global {
    width: 70vw; max-width: 780px;
    height: 70vh; max-height: 520px;
    border-radius: 50%;
    filter: blur(22px) saturate(1.05);
    opacity: .8;
  }
  .fx-global.fx-round { box-shadow: 0 0 35px rgba(250,204,21,.28), inset 0 0 45px rgba(250,204,21,.18); }
  .fx-global.fx-turn-player { box-shadow: 0 0 35px rgba(74,222,128,.28), inset 0 0 45px rgba(74,222,128,.18); }
  .fx-global.fx-turn-enemy { box-shadow: 0 0 35px rgba(248,113,113,.28), inset 0 0 45px rgba(248,113,113,.18); }

  /* Raigeki global flash — now handled by RaigekiCanvas, keep empty rule to prevent stale CSS */
  .fx-global.fx-raigeki { display: none; }

  /* fx-global.fx-blackhole removed — replaced by BlackHoleCanvas component */

  /* ── Tremendous Fire: Swirling fireballs ── */
  .fx-tremendous-fire {
    width: 100%; height: 100%;
    position: relative;
  }
  .fx-tremendous-fire::before,
  .fx-tremendous-fire::after {
    content: '';
    position: absolute;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,200,0,.9), rgba(255,100,0,.7) 40%, rgba(200,50,0,.4) 70%, transparent);
    box-shadow: 0 0 12px rgba(255,150,0,.8), inset -2px -2px 6px rgba(0,0,0,.3);
    animation: fireballTrajectory1 1.4s ease-in forwards;
  }
  .fx-tremendous-fire::after {
    animation: fireballTrajectory2 1.4s 0.15s ease-in forwards;
  }
  /* Additional fireballs using pseudo-elements within the board */
  .fireball-particle {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,220,20,1), rgba(255,140,0,.85) 30%, rgba(220,60,0,.65) 60%, rgba(150,20,0,.2) 85%, transparent);
    box-shadow: 0 0 20px rgba(255,180,0,.95), 0 0 40px rgba(255,100,0,.7), inset -2px -2px 8px rgba(0,0,0,.5);
    pointer-events: none;
  }
  .fireball-particle.fb1 { animation: fireballTrajectory1 1.8s ease-in forwards; }
  .fireball-particle.fb2 { animation: fireballTrajectory2 1.8s 0.1s ease-in forwards; }
  .fireball-particle.fb3 { animation: fireballTrajectory3 1.8s 0.2s ease-in forwards; }
  .fireball-particle.fb4 { animation: fireballTrajectory4 1.8s 0.3s ease-in forwards; }

  /* Local fireballs spawned from a specific DOM element to a target (uses CSS vars) */
  .local-fireball {
    position: fixed;
    width: 34px; height: 30px;
    left: 0; top: 0;
    transform-origin: center center;
    background: radial-gradient(circle at 30% 30%, #fff5d6 0%, #ff9a2e 22%, #ff3b00 55%, rgba(255,60,0,0) 100%);
    border-radius: 45% 50% 40% 45%;
    box-shadow: 0 0 12px rgba(255,120,30,0.7);
    pointer-events: none;
    will-change: transform, opacity, filter;
  }

  .local-fireball::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 200%; height: 60%;
    transform-origin: left center;
    transform: translateY(-50%) skewY(-12deg) translateX(-10%);
    background: linear-gradient(90deg, rgba(255,220,140,0.98) 0%, rgba(255,120,40,0.95) 35%, rgba(255,60,0,0.28) 75%, rgba(255,60,0,0) 100%);
    filter: blur(10px) saturate(1.2);
    border-radius: 40px;
    opacity: 0.95;
  }

  .local-fireball::after {
    content: '';
    position: absolute;
    right: -6px; bottom: -6px;
    width: 10px; height: 10px;
    background: radial-gradient(circle, #fff8d6 0%, #ffd07a 30%, #ff5a10 70%, #ff2d00 100%);
    border-radius: 50%;
    filter: blur(5px) contrast(1.1);
    opacity: 0.98;
  }

  .local-fireball[data-state='moving'] {
    animation: localFireMove var(--dur,420ms) cubic-bezier(0.2,0.9,0.25,1) var(--delay,0ms) forwards;
  }
  .local-fireball[data-state='trail']::before {
    animation: localTrail var(--dur,420ms) cubic-bezier(0.2,0.9,0.25,1) var(--delay,0ms) forwards;
  }
  .local-fireball[data-state='ember']::after {
    animation: emberFly var(--dur,420ms) cubic-bezier(0.2,0.9,0.25,1) var(--delay,0ms) forwards;
  }

  @keyframes localFireMove {
    0%{ transform: translate(var(--sx,0px), var(--sy,0px)) translateZ(0) scale(var(--scale,1)) rotate(var(--rot,0deg)); opacity: 1; }
    60%{ transform: translate(calc(var(--sx,0px) + var(--tx,0px) * 0.6), calc(var(--sy,0px) + var(--ty,0px) * 0.6)) translateZ(0) scale(calc(var(--scale,1) * 0.9)) rotate(calc(var(--rot,0deg) + 12deg)); opacity: 0.95; }
    100%{ transform: translate(calc(var(--sx,0px) + var(--tx,0px)), calc(var(--sy,0px) + var(--ty,0px))) translateZ(0) scale(0.45) rotate(calc(var(--rot,0deg) + 20deg)); opacity: 0.02; }
  }

  @keyframes localTrail {
    0%{ transform: translateX(0) scaleX(1); opacity: 0.98; filter: blur(8px) saturate(1.2); }
    50%{ transform: translateX(50%) scaleX(0.8); opacity: 0.6; filter: blur(10px) saturate(1.1); }
    100%{ transform: translateX(100%) scaleX(0.3); opacity: 0.06; filter: blur(14px) saturate(0.9); }
  }

  @keyframes emberFly {
    0%{ transform: translate(0,0) scale(1); opacity: 1; }
    60%{ transform: translate(calc(var(--tx,0px) * 0.6), calc(var(--ty,0px) * 0.6)) scale(0.6); opacity: 0.9; }
    100%{ transform: translate(calc(var(--tx,0px)), calc(var(--ty,0px))) scale(0.25); opacity: 0.05; }
  }

  /* impact flash on leader */
  .impact-flash {
    position: fixed; left: 0; top: 0; width: 92px; height: 92px; border-radius: 50%; pointer-events: none; z-index: 60; transform: translate(-50%,-50%) scale(0.6); opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(circle at 50% 40%, rgba(255,220,140,0.98) 0%, rgba(255,120,40,0.95) 30%, rgba(255,80,10,0.75) 50%, rgba(255,40,0,0.35) 70%, rgba(255,40,0,0) 100%);
    filter: blur(20px) saturate(1.35);
    animation: impactPulse 700ms ease-out forwards;
  }
  @keyframes impactPulse { 0%{opacity:0; transform: translate(-50%,-50%) scale(0.6);} 10%{opacity:0.95; transform: translate(-50%,-50%) scale(1.12);} 30%{opacity:0.6; transform: translate(-50%,-50%) scale(1.28);} 100%{opacity:0; transform: translate(-50%,-50%) scale(1.9);} }

  /* ── Phase banner overlay ── */
  .phase-banner {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 1300;
    pointer-events: none;
  }
  .phase-banner-text {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 24px currentColor, 0 0 60px currentColor;
    animation: phaseBannerIn 1.8s ease-out forwards;
    opacity: 0;
  }
  .phase-banner-text.player-phase { color: #4ade80; }
  .phase-banner-text.enemy-phase { color: #f87171; }

  /* ── Keyframes ── */
  @keyframes fxPop {
    0% { transform: scale(.5); opacity: 1; }
    40% { transform: scale(1.1); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  @keyframes fxLightning {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
    8% { opacity: 1; transform: translateX(-50%) scaleY(1.05); filter: brightness(2.5); }
    20% { opacity: .85; filter: brightness(1.5); }
    30% { opacity: 1; filter: brightness(3); }
    45% { opacity: .5; }
    55% { opacity: .9; filter: brightness(2); }
    70% { opacity: .4; }
    85% { opacity: .6; filter: brightness(1.5); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
  }
  @keyframes fxBlackholeSuck {
    0%   { transform: scale(1.05) rotate(0deg);    opacity: 1; }
    12%  { transform: scale(1.0)  rotate(60deg);   opacity: 1; }
    30%  { transform: scale(.78)  rotate(200deg);  opacity: .9; }
    52%  { transform: scale(.45)  rotate(440deg);  opacity: .75; }
    72%  { transform: scale(.2)   rotate(700deg);  opacity: .45; }
    88%  { transform: scale(.06)  rotate(940deg);  opacity: .18; }
    100% { transform: scale(0)    rotate(1080deg); opacity: 0; }
  }
  @keyframes fxSummon {
    0% { transform: scale(.3); opacity: 0; }
    50% { transform: scale(1.15); opacity: .9; }
    100% { transform: scale(1); opacity: 0; }
  }
  @keyframes fxTrap {
    0% { transform: scale(.7); opacity: 1; box-shadow: 0 0 0 rgba(168,85,247,.25); }
    50% { transform: scale(1.05); opacity: .8; box-shadow: 0 0 18px rgba(168,85,247,.5); }
    100% { transform: scale(1.4); opacity: 0; box-shadow: 0 0 35px rgba(168,85,247,.15); }
  }
  @keyframes fxHalfAtk {
    0% { transform: scale(0.75); opacity: 0; filter: saturate(1.8); }
    25% { transform: scale(1.08); opacity: 0.95; }
    55% { transform: scale(0.95); opacity: 0.75; }
    100% { transform: scale(1.25); opacity: 0; filter: saturate(0.7); }
  }
  @keyframes fxPulse {
    0% { transform: scale(.75); opacity: .9; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  @keyframes fxWave {
    0% { transform: scale(.8); opacity: .9; }
    60% { transform: scale(1.05); opacity: .6; }
    100% { transform: scale(1.35); opacity: 0; }
  }
  /* fxRaigekiGlobal removed — canvas replaces CSS lightning */
  /* fxBlackholeGlobal removed — canvas replaces CSS vortex */

  /* ── Tremendous Fire: Multiple fireballs trajectories ── */
  /* Fireballs start from top (player hand) and curve down to enemy leader */
  @keyframes fireballTrajectory1 {
    0% {
      left: 25%;
      top: 5%;
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,180,0,.95)) drop-shadow(0 0 25px rgba(255,100,0,.7));
    }
    25% {
      left: 32%;
      top: 25%;
      opacity: 0.98;
      transform: scale(1.08) rotate(45deg);
      filter: brightness(1.6) drop-shadow(0 0 18px rgba(255,200,50,1)) drop-shadow(0 0 35px rgba(255,120,0,.8));
    }
    50% {
      left: 42%;
      top: 50%;
      opacity: 0.9;
      transform: scale(1) rotate(100deg);
      filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,150,0,.8)) drop-shadow(0 0 30px rgba(255,80,0,.6));
    }
    75% {
      left: 48%;
      top: 75%;
      opacity: 0.5;
      transform: scale(0.7) rotate(150deg);
      filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,100,0,.5)) drop-shadow(0 0 20px rgba(200,50,0,.3));
    }
    100% {
      left: 50%;
      top: 85%;
      opacity: 0;
      transform: scale(0.3) rotate(180deg);
      filter: brightness(0.5) drop-shadow(0 0 2px rgba(255,50,0,.1));
    }
  }
  @keyframes fireballTrajectory2 {
    0% {
      right: 20%;
      top: 8%;
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,180,0,.95)) drop-shadow(0 0 25px rgba(255,100,0,.7));
    }
    25% {
      right: 28%;
      top: 28%;
      opacity: 0.98;
      transform: scale(1.08) rotate(-45deg);
      filter: brightness(1.6) drop-shadow(0 0 18px rgba(255,200,50,1)) drop-shadow(0 0 35px rgba(255,120,0,.8));
    }
    50% {
      right: 38%;
      top: 52%;
      opacity: 0.9;
      transform: scale(1) rotate(-100deg);
      filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,150,0,.8)) drop-shadow(0 0 30px rgba(255,80,0,.6));
    }
    75% {
      right: 46%;
      top: 75%;
      opacity: 0.5;
      transform: scale(0.7) rotate(-150deg);
      filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,100,0,.5)) drop-shadow(0 0 20px rgba(200,50,0,.3));
    }
    100% {
      right: 48%;
      top: 85%;
      opacity: 0;
      transform: scale(0.3) rotate(-180deg);
      filter: brightness(0.5) drop-shadow(0 0 2px rgba(255,50,0,.1));
    }
  }
  @keyframes fireballTrajectory3 {
    0% {
      left: 15%;
      top: 10%;
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: brightness(1.35) drop-shadow(0 0 12px rgba(255,180,0,.95)) drop-shadow(0 0 25px rgba(255,100,0,.7));
    }
    25% {
      left: 30%;
      top: 30%;
      opacity: 0.98;
      transform: scale(1.08) rotate(50deg);
      filter: brightness(1.55) drop-shadow(0 0 18px rgba(255,200,50,1)) drop-shadow(0 0 35px rgba(255,120,0,.8));
    }
    50% {
      left: 44%;
      top: 55%;
      opacity: 0.9;
      transform: scale(1) rotate(105deg);
      filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,150,0,.8)) drop-shadow(0 0 30px rgba(255,80,0,.6));
    }
    75% {
      left: 50%;
      top: 75%;
      opacity: 0.5;
      transform: scale(0.7) rotate(155deg);
      filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,100,0,.5)) drop-shadow(0 0 20px rgba(200,50,0,.3));
    }
    100% {
      left: 52%;
      top: 85%;
      opacity: 0;
      transform: scale(0.3) rotate(190deg);
      filter: brightness(0.5) drop-shadow(0 0 2px rgba(255,50,0,.1));
    }
  }
  @keyframes fireballTrajectory4 {
    0% {
      right: 15%;
      top: 12%;
      opacity: 1;
      transform: scale(1) rotate(0deg);
      filter: brightness(1.4) drop-shadow(0 0 12px rgba(255,180,0,.95)) drop-shadow(0 0 25px rgba(255,100,0,.7));
    }
    25% {
      right: 26%;
      top: 32%;
      opacity: 0.98;
      transform: scale(1.08) rotate(-50deg);
      filter: brightness(1.6) drop-shadow(0 0 18px rgba(255,200,50,1)) drop-shadow(0 0 35px rgba(255,120,0,.8));
    }
    50% {
      right: 40%;
      top: 57%;
      opacity: 0.9;
      transform: scale(1) rotate(-105deg);
      filter: brightness(1.5) drop-shadow(0 0 16px rgba(255,150,0,.8)) drop-shadow(0 0 30px rgba(255,80,0,.6));
    }
    75% {
      right: 48%;
      top: 75%;
      opacity: 0.5;
      transform: scale(0.7) rotate(-155deg);
      filter: brightness(1.2) drop-shadow(0 0 10px rgba(255,100,0,.5)) drop-shadow(0 0 20px rgba(200,50,0,.3));
    }
    100% {
      right: 50%;
      top: 85%;
      opacity: 0;
      transform: scale(0.3) rotate(-190deg);
      filter: brightness(0.5) drop-shadow(0 0 2px rgba(255,50,0,.1));
    }
  }

  @keyframes phaseBannerIn {
    0% { opacity: 0; transform: scale(2.5) translateY(-20px); }
    25% { opacity: 1; transform: scale(1) translateY(0); }
    65% { opacity: .9; }
    100% { opacity: 0; transform: scale(.9) translateY(10px); }
  }

  /* AI animating dimming */
  .ai-animating .cell { pointer-events: none; }
  .ai-animating .hand-card { pointer-events: none; opacity: .7; }
  .ai-animating .btn-end { pointer-events: none; opacity: .5; }

  /* ========== TERRAIN BACKGROUNDS ========== */
  /* Each terrain tries to load an image from Imagens/terrenos/{key}.jpg;
     the gradient serves as fallback when the image is missing. */
  .cell.terrain-normal    { background: url('../Imagens/terrenos/normal.jpg') center/cover no-repeat, linear-gradient(135deg, #1a1a2e, #16162a) !important; }
  .cell.terrain-mountain  { background: url('../Imagens/terrenos/mountain.jpg') center/cover no-repeat, linear-gradient(135deg, #3b2820 0%, #5c3a2a 40%, #7a5540 100%) !important; }
  .cell.terrain-forest    { background: url('../Imagens/terrenos/forest.jpg') center/cover no-repeat, linear-gradient(135deg, #0f2e1a 0%, #1a4d2e 40%, #2d6e42 100%) !important; }
  .cell.terrain-meadow    { background: url('../Imagens/terrenos/meadow.jpg') center/cover no-repeat, linear-gradient(135deg, #2a4a1a 0%, #3d6b26 40%, #5a8a38 100%) !important; }
  .cell.terrain-wasteland { background: url('../Imagens/terrenos/wasteland.jpg') center/cover no-repeat, linear-gradient(135deg, #3d2f1a 0%, #5c4a28 40%, #7a6438 100%) !important; }
  .cell.terrain-sea       { background: url('../Imagens/terrenos/sea.jpg') center/cover no-repeat, linear-gradient(135deg, #0a2040 0%, #163a6a 40%, #1e5090 100%) !important; }
  .cell.terrain-dark      { background: url('../Imagens/terrenos/dark.jpg') center/cover no-repeat, linear-gradient(135deg, #1a0a2e 0%, #2a1050 40%, #3a1870 100%) !important; }
  .cell.terrain-wall      { background: url('../Imagens/terrenos/wall.jpg') center/cover no-repeat, linear-gradient(135deg, #3a3a3a 0%, #5a5a5a 40%, #6b6b6b 100%) !important; }
  .cell.terrain-toon      { background: url('../Imagens/terrenos/toon.jpg') center/cover no-repeat, linear-gradient(135deg, #8b1a8b 0%, #c040c0 40%, #e060e0 100%) !important; }
  .cell.terrain-volcano   { background: url('../Imagens/terrenos/volcano.jpg') center/cover no-repeat, linear-gradient(135deg, #4a0a00 0%, #8b1a00 40%, #c03000 100%) !important; }
  .cell.terrain-factory   { background: url('../Imagens/terrenos/factory.jpg') center/cover no-repeat, linear-gradient(135deg, #1a1a2a 0%, #2a2a4a 40%, #3a3a5a 100%) !important; }
  .cell.terrain-holy      { background: url('../Imagens/terrenos/holy.jpg') center/cover no-repeat, linear-gradient(135deg, #3a3010 0%, #6a5a20 40%, #9a8a40 100%) !important; }
  .cell.terrain-crash     { background: url('../Imagens/terrenos/crash.gif') center/cover no-repeat, linear-gradient(135deg, #1a0000 0%, #5a0a00 40%, #991a00 70%, #cc3300 100%) !important; }

  /* ═══════════════════════════════════════════════════════════════
     GFX v2 — Anime-inspired board visuals
     Keeps terrain texture images, adds glow overlays and energy grid
     ═══════════════════════════════════════════════════════════════ */

  /* Board frame — dark arena with glowing blue border */
  .gfx-v2 .board {
    background: #08081a !important;
    border: 3px solid rgba(60,140,255,.35) !important;
    box-shadow:
      0 30px 80px rgba(0,0,0,.8),
      0 0 40px rgba(60,120,255,.12),
      0 0 80px rgba(80,60,200,.08),
      inset 0 0 30px rgba(20,40,120,.15) !important;
    gap: 3px !important;
    padding: 3px !important;
    position: relative;
  }

  /* Glowing cyan grid lines between cells */
  .gfx-v2 .cell {
    border: 2px solid rgba(40,160,255,.3) !important;
    transition: all .2s ease !important;
    position: relative;
  }
  .gfx-v2 .cell:hover {
    border-color: rgba(80,200,255,.6) !important;
    box-shadow: 0 0 16px rgba(60,180,255,.25) !important;
  }

  /* Default cells (no terrain) — dark blue tint. Terrain cells keep their texture images */
  .gfx-v2 .cell.dark:not([class*="terrain-"]) {
    background: linear-gradient(135deg, #0c0c20, #0a0a1a) !important;
  }
  .gfx-v2 .cell.light:not([class*="terrain-"]) {
    background: linear-gradient(135deg, #10102a, #0d0d22) !important;
  }

  /* ── v2 Terrains — KEEP texture images, add glow overlay ──
     Use ::before for a colored glow overlay on top of the texture */
  .gfx-v2 .cell[class*="terrain-"]::before {
    content: '';
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    border-radius: 2px;
  }

  /* Terrain-specific glow overlays (texture images from v1 remain) */
  .gfx-v2 .cell.terrain-meadow { border-color: rgba(60,200,60,.35) !important; }
  .gfx-v2 .cell.terrain-meadow::before {
    background: linear-gradient(180deg, rgba(40,255,40,.08), rgba(80,200,60,.12));
    box-shadow: inset 0 0 20px rgba(60,220,60,.1);
  }

  .gfx-v2 .cell.terrain-forest { border-color: rgba(30,180,50,.3) !important; }
  .gfx-v2 .cell.terrain-forest::before {
    background: radial-gradient(ellipse at 50% 50%, rgba(30,180,50,.1), transparent 70%);
  }

  .gfx-v2 .cell.terrain-mountain { border-color: rgba(200,140,60,.3) !important; }
  .gfx-v2 .cell.terrain-mountain::before {
    background: linear-gradient(135deg, rgba(180,120,40,.06), rgba(140,80,20,.1));
  }

  .gfx-v2 .cell.terrain-sea { border-color: rgba(40,140,255,.4) !important; }
  .gfx-v2 .cell.terrain-sea::before {
    background: linear-gradient(180deg, rgba(40,160,255,.1), transparent, rgba(30,120,255,.08));
    animation: gfx2SeaWave 3s ease-in-out infinite;
  }

  .gfx-v2 .cell.terrain-dark { border-color: rgba(140,50,255,.35) !important; }
  .gfx-v2 .cell.terrain-dark::before {
    background: radial-gradient(circle at 40% 40%, rgba(160,60,255,.12), transparent 60%);
    animation: gfx2Pulse 4s ease-in-out infinite;
  }

  .gfx-v2 .cell.terrain-wasteland { border-color: rgba(180,140,50,.3) !important; }
  .gfx-v2 .cell.terrain-wasteland::before {
    background: linear-gradient(135deg, rgba(160,120,40,.06), rgba(120,80,20,.08));
  }

  .gfx-v2 .cell.terrain-wall { border-color: rgba(150,150,170,.4) !important; }
  .gfx-v2 .cell.terrain-wall::before {
    background: linear-gradient(135deg, rgba(120,120,140,.08), rgba(80,80,100,.06));
  }

  .gfx-v2 .cell.terrain-toon { border-color: rgba(220,60,255,.35) !important; }
  .gfx-v2 .cell.terrain-toon::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,80,255,.1), transparent 60%);
    animation: gfx2Pulse 3s ease-in-out infinite;
  }

  .gfx-v2 .cell.terrain-volcano { border-color: rgba(255,80,20,.35) !important; }
  .gfx-v2 .cell.terrain-volcano::before {
    background: radial-gradient(ellipse at 50% 70%, rgba(255,60,0,.12), transparent 60%);
    animation: gfx2Pulse 2s ease-in-out infinite;
  }

  .gfx-v2 .cell.terrain-factory { border-color: rgba(100,100,200,.3) !important; }
  .gfx-v2 .cell.terrain-factory::before {
    background: linear-gradient(135deg, rgba(80,80,180,.06), rgba(60,60,140,.08));
  }

  .gfx-v2 .cell.terrain-holy { border-color: rgba(240,210,60,.35) !important; }
  .gfx-v2 .cell.terrain-holy::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,230,80,.1), transparent 60%);
    animation: gfx2Pulse 3.5s ease-in-out infinite;
  }

  .gfx-v2 .cell.terrain-crash { border-color: rgba(255,40,10,.4) !important; }
  .gfx-v2 .cell.terrain-crash::before {
    background: radial-gradient(circle at 50% 50%, rgba(255,30,0,.12), transparent 60%);
    animation: gfx2CrashFlicker .8s ease-in-out infinite alternate;
  }

  .gfx-v2 .cell.terrain-normal { border-color: rgba(60,160,255,.2) !important; }

  /* ── v2 Animations ── */
  @keyframes gfx2SeaWave {
    0%,100% { opacity: .4; }
    50% { opacity: 1; }
  }
  @keyframes gfx2Pulse {
    0%,100% { opacity: .3; }
    50% { opacity: .9; }
  }
  @keyframes gfx2CrashFlicker {
    0% { opacity: .4; }
    100% { opacity: 1; }
  }

  /* ── v2 Highlights — bright energy rings ── */
  .gfx-v2 .cell.hl-move {
    border-color: rgba(34,197,94,.7) !important;
    box-shadow: inset 0 0 16px rgba(34,197,94,.2), 0 0 10px rgba(34,197,94,.2) !important;
  }
  .gfx-v2 .cell.hl-attack {
    border-color: rgba(239,68,68,.7) !important;
    box-shadow: inset 0 0 16px rgba(239,68,68,.2), 0 0 10px rgba(239,68,68,.2) !important;
  }
  .gfx-v2 .cell.hl-summon {
    border-color: rgba(250,204,21,.7) !important;
    box-shadow: inset 0 0 16px rgba(250,204,21,.2), 0 0 10px rgba(250,204,21,.2) !important;
  }
  .gfx-v2 .cell.selected {
    border-color: rgba(56,189,248,.8) !important;
    box-shadow: inset 0 0 20px rgba(56,189,248,.25), 0 0 14px rgba(56,189,248,.2) !important;
  }

  /* ── v2 Card pieces — glow per faction ── */
  .gfx-v2 .cell-piece {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 6px rgba(100,180,255,.2));
  }
  .gfx-v2 .cell-piece.red-rose {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(255,40,40,.25));
  }
  .gfx-v2 .cell-piece.white-rose {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(80,160,255,.25));
  }

  /* ── v2 Board-scene background aura ── */
  .gfx-v2 {
    position: relative;
  }
  .gfx-v2::before {
    content: '';
    position: absolute; inset: -60px; z-index: -1; pointer-events: none;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(40,80,200,.1) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(120,40,200,.06) 0%, transparent 40%),
      radial-gradient(ellipse at 80% 80%, rgba(40,120,200,.06) 0%, transparent 40%);
    animation: gfx2AuraPulse 8s ease-in-out infinite;
  }
  @keyframes gfx2AuraPulse {
    0%,100% { opacity: .5; }
    50% { opacity: 1; }
  }

  /* terrain label */
  .terrain-label {
    position: absolute;
    bottom: 1px; left: 50%;
    transform: translateX(-50%);
    font-size: .32rem;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .cell:hover {
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
  }
  .cell.highlight-move {
    background: var(--highlight-move) !important;
    box-shadow: inset 0 0 12px rgba(34,197,94,.3);
  }
  .cell.highlight-attack {
    background: var(--highlight-attack) !important;
    box-shadow: inset 0 0 12px rgba(239,68,68,.3);
  }
  .cell.highlight-summon {
    background: var(--highlight-summon) !important;
    box-shadow: inset 0 0 12px rgba(250,204,21,.3);
  }
  .cell.highlight-spell-target {
    background: rgba(139,92,246,.5) !important;
    box-shadow: inset 0 0 14px rgba(139,92,246,.4);
    animation: spellPulse 1s ease-in-out infinite;
  }
  @keyframes spellPulse {
    0%,100% { box-shadow: inset 0 0 14px rgba(139,92,246,.4); }
    50% { box-shadow: inset 0 0 22px rgba(139,92,246,.7); }
  }
  .cell.highlight-trap {
    background: rgba(168,85,247,.35) !important;
    box-shadow: inset 0 0 12px rgba(168,85,247,.3);
  }

  /* ========== CAMERA SYSTEM (Duelist of the Roses) ========== */
  .cell.camera-cursor {
    box-shadow:
      inset 0 0 0 2px rgba(56, 189, 248, 0.85),
      inset 0 0 16px rgba(56, 189, 248, 0.25),
      0 0 12px rgba(56, 189, 248, 0.35);
    z-index: 10;
    animation: cameraCursorPulse 1.2s ease-in-out infinite;
  }
  .cell.camera-cursor::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(56, 189, 248, 0.6);
    border-radius: 2px;
    pointer-events: none;
    z-index: 11;
  }
  @keyframes cameraCursorPulse {
    0%, 100% { box-shadow: inset 0 0 0 2px rgba(56,189,248,.85), inset 0 0 16px rgba(56,189,248,.25), 0 0 12px rgba(56,189,248,.35); }
    50% { box-shadow: inset 0 0 0 2.5px rgba(56,189,248,1), inset 0 0 22px rgba(56,189,248,.4), 0 0 20px rgba(56,189,248,.5); }
  }

  /* Close mode: overflow hidden and smooth transitions */
  .board-scene-close {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(56,189,248,.15), 0 0 0 1px rgba(56,189,248,.1);
  }
  .board-scene-close .board-wrapper {
    transform-origin: center center;
  }

  /* Camera controls */
  .camera-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .camera-toggle-btn {
    background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.9));
    border: 1px solid rgba(56,189,248,.25);
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    letter-spacing: 0.3px;
  }
  .camera-toggle-btn:hover {
    border-color: rgba(56,189,248,.5);
    color: #e2e8f0;
    box-shadow: 0 0 12px rgba(56,189,248,.2);
  }
  .camera-toggle-btn.camera-close-active {
    background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(56,189,248,.12));
    border-color: rgba(56,189,248,.6);
    color: #38bdf8;
    box-shadow: 0 0 14px rgba(56,189,248,.25);
  }
  .camera-hint {
    font-size: .55rem;
    color: #64748b;
    letter-spacing: 0.2px;
  }
  /* On touch devices, keyboard hint is irrelevant */
  @media (pointer: coarse) {
    .camera-hint { display: none; }
  }

  /* ========== PS2 IMMERSIVE MODE (fullscreen close camera) ========== */
  /* Board fills entire viewport */
  .ps2-immersive .board-scene-close {
    position: fixed;
    inset: 0;
    z-index: 50;
    margin: 0 !important;
    border-radius: 0;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1600px;
    perspective-origin: 50% 38%;
    box-shadow: none;
  }

  /* Status bar always visible at top */
  .ps2-immersive .status-row {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    margin: 0;
    padding: 6px 14px;
    background: linear-gradient(180deg, rgba(8,8,16,.9) 70%, transparent);
    backdrop-filter: blur(4px);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
    width: auto;
    max-width: 95vw;
  }

  /* Hide standalone camera toggle in PS2 mode — it's in the action bar instead */
  .ps2-immersive .camera-controls {
    display: none;
  }

  /* Selected card info: floats bottom-left above action bar */
  .ps2-immersive .selected-card-info {
    position: fixed;
    left: 8px;
    bottom: 64px;
    max-width: 300px;
    z-index: 201;
    background: rgba(6,6,14,.93);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(56,189,248,.2);
    border-radius: 8px;
    padding: 6px 12px;
    margin: 0;
  }

  /* PS2 bottom action bar */
  .ps2-action-bar { display: none; }
  .ps2-action-bar.gp-hidden { display: none !important; }
  .ps2-immersive .ps2-action-bar {
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 12px;
    background: rgba(8,8,16,.92);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .ps2-action-btn {
    position: relative;
    background: rgba(15,23,42,.9);
    border: 1px solid rgba(56,189,248,.22);
    color: #94a3b8;
    font-size: .68rem;
    padding: 5px 11px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-family: inherit;
    transition: all .18s ease;
    white-space: nowrap;
    display: flex; align-items: center; gap: 2px;
  }
  .ps2-btn-icon { font-size: .95rem; line-height: 1; }
  .ps2-btn-badge {
    position: absolute;
    top: -5px; right: -5px;
    background: #38bdf8;
    color: #0f172a;
    border-radius: 50%;
    min-width: 15px; height: 15px;
    font-size: .45rem;
    font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    padding: 0 2px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  .ps2-badge-dark { background: #64748b; color: #fff; }
  .ps2-action-btn:hover:not(:disabled) { border-color: rgba(56,189,248,.55); color: #e2e8f0; background: rgba(30,41,59,.9); }
  .ps2-action-btn.ps2-btn-active { background: rgba(14,165,233,.16); border-color: rgba(56,189,248,.6); color: #38bdf8; box-shadow: 0 0 10px rgba(56,189,248,.18); }
  .ps2-action-btn:disabled { opacity: .38; cursor: not-allowed; }
  .ps2-action-btn.ps2-btn-end { background: linear-gradient(135deg,rgba(127,29,29,.8),rgba(185,28,28,.8)); border-color: rgba(239,68,68,.5); color: #fca5a5; }
  .ps2-action-btn.ps2-btn-end:hover:not(:disabled) { box-shadow: 0 0 12px rgba(239,68,68,.4); color: #fff; }

  /* Hand panel: hidden by default in PS2 immersive */
  .ps2-immersive .hand-area {
    position: fixed;
    bottom: 48px; /* above action bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 199;
    background: rgba(6,6,14,.97);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(56,189,248,.2);
    padding: 6px 12px 8px;
    height: auto;
    display: none;
    margin: 0;
    width: auto;
    max-width: 95vw;
  }
  .ps2-immersive.ps2-show-hand .hand-area { display: block; }
  /* When gamepad connected and action bar hidden, hand sits at bottom */
  .ps2-immersive .hand-area.gp-hand-bottom { bottom: 0; }

  /* Log panel: hidden by default in PS2 immersive */
  .ps2-immersive .log-area,
  .ps2-immersive .timeline-area {
    position: fixed;
    right: 0;
    top: 68px;
    width: 260px;
    max-height: 50vh;
    z-index: 199;
    background: linear-gradient(160deg, rgba(10,8,20,.96), rgba(6,6,14,.98));
    backdrop-filter: blur(6px);
    border-left: 1px solid rgba(185,28,28,.25);
    border-bottom: 1px solid rgba(185,28,28,.25);
    border-radius: 0 0 0 10px;
    padding: 10px;
    overflow-y: auto;
    display: none;
    margin: 0;
  }
  .ps2-immersive.ps2-show-log .log-area,
  .ps2-immersive.ps2-show-log .timeline-area { display: block; }

  /* Hide original btn-row buttons in PS2 immersive (moved to action bar) — keep fusion visible */
  .ps2-immersive .btn-row .btn-end,
  .ps2-immersive .btn-row .btn-graveyard,
  .ps2-immersive .btn-row .btn-restart { display: none !important; }
  .ps2-immersive .btn-row { justify-content: center; }
  .ps2-immersive .btn-row .btn-fusion {
    display: inline-flex !important;
    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    z-index: 210; padding: 10px 24px; font-size: .85rem;
  }
  .ps2-immersive .btn-row .btn-fusion:hover:not(:disabled) {
    transform: translateX(-50%) scale(1.05);
  }
  .ps2-immersive .btn-row .fusion-hint {
    display: block !important;
    position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
    z-index: 210;
  }

  /* ========== PS2 MOBILE — regras específicas para touch ========== */
  @media (pointer: coarse) {
    /* Ação: botões circulares com ícone — sem texto */
    .ps2-immersive .ps2-action-bar {
      gap: 10px;
      padding: 8px 16px;
      justify-content: space-evenly;
    }
    .ps2-action-btn {
      width: 46px; height: 46px;
      border-radius: 50%;
      padding: 0;
      justify-content: center;
      flex-direction: column;
      font-size: 0;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .ps2-btn-icon { font-size: 1.3rem; }
    .ps2-btn-label { display: none; }
    /* End turn: pill que mostra ícone + pequeno texto */
    .ps2-action-btn.ps2-btn-wide {
      width: auto; border-radius: 23px;
      padding: 0 14px; gap: 5px;
    }
    .ps2-action-btn.ps2-btn-wide .ps2-btn-label {
      display: inline;
      font-size: .6rem;
    }
    /* Câmera standalone oculta em mobile PS2 (integrada na action bar) */
    .ps2-immersive .camera-controls { display: none; }
    /* Selected card info: mover para direita (D-pad fica na esquerda) */
    .ps2-immersive .selected-card-info {
      right: 8px;
      left: auto;
      bottom: 58px;
      max-width: 46vw;
      font-size: .62rem;
      padding: 5px 8px;
    }
    /* Status bar mais compacta em smartphones */
    .ps2-immersive .status-row { padding: 4px 8px; gap: 5px; }
    .ps2-immersive .player-info { padding: 4px 7px; min-width: 100px; gap: 5px; }
    .ps2-immersive .player-hud-avatar { width: 32px; height: 32px; }
    .ps2-immersive .player-info .name { font-size: .68rem; }
    .ps2-immersive .player-info .stat { font-size: .58rem; }
    .ps2-immersive .turn-badge { padding: 4px 8px; }
    .ps2-immersive .turn-num { font-size: .9rem; }
    /* Hand label compacto */
    .ps2-immersive .hand-label { font-size: .6rem; gap: 6px; }
    /* Hand cards menores no mobile */
    .ps2-immersive .hand-card { width: 78px; min-height: 108px; padding: 4px 3px; }
    .ps2-immersive .hand-card .hc-name { font-size: .5rem; }
    /* Log compacto no mobile */
    .ps2-immersive .log-area,
    .ps2-immersive .timeline-area { width: 210px; font-size: .55rem; }
    .ps2-immersive .log-box { font-size: .58rem; }
    .ps2-immersive .timeline-area .tl-content { font-size: .52rem; }
    .ps2-immersive .timeline-area .tl-icon { width: 20px; height: 20px; font-size: .6rem; }
    /* D-pad ligeiramente mais alto para não sobrepor action bar maior */
    .ps2-dpad-overlay { bottom: 66px; }
    /* Hand area acima da action bar mobile (um pouco mais alta) */
    .ps2-immersive .hand-area { bottom: 62px; max-width: 100vw; }
  }

  /* ========== MOBILE LANDSCAPE: ultra-compact in-game HUD ========== */
  @media (max-height: 440px) and (orientation: landscape) {
    /* Status bar: minimal */
    .ps2-immersive .status-row { padding: 2px 6px; gap: 4px; }
    .ps2-immersive .player-info { padding: 2px 5px; min-width: 80px; gap: 3px; }
    .ps2-immersive .player-hud-avatar { width: 22px; height: 22px; }
    .ps2-immersive .player-info .name { font-size: .55rem; }
    .ps2-immersive .player-info .stat { font-size: .48rem; }
    .ps2-immersive .turn-badge { padding: 2px 5px; }
    .ps2-immersive .turn-num { font-size: .7rem; }
    .ps2-immersive .turn-label { font-size: .4rem; }
    /* Action bar: slim */
    .ps2-immersive .ps2-action-bar { padding: 3px 10px; gap: 6px; }
    .ps2-action-btn { width: 34px; height: 34px; }
    .ps2-btn-icon { font-size: 1rem; }
    .ps2-action-btn.ps2-btn-wide { padding: 0 8px; }
    .ps2-action-btn.ps2-btn-wide .ps2-btn-label { font-size: .5rem; }
    /* Hand: smaller cards, closer to bottom */
    .ps2-immersive .hand-area { bottom: 40px; padding: 3px 8px 4px; }
    .ps2-immersive .hand-label { font-size: .48rem; gap: 4px; padding: 1px 0; }
    .ps2-immersive .hand-card { width: 60px; min-height: 82px; padding: 2px 2px; }
    .ps2-immersive .hand-card .hc-name { font-size: .4rem; }
    .ps2-immersive .hand-card .hc-stats { font-size: .4rem; }
    .ps2-immersive .hand-card .hc-cost { font-size: .38rem; }
    /* D-pad: hidden on landscape mobile — drag-to-pan replaces it */
    .ps2-dpad-overlay { display: none !important; }
    /* Log/timeline */
    .ps2-immersive .log-area,
    .ps2-immersive .timeline-area { width: 160px; font-size: .48rem; }
    /* Selected card info — no D-pad blocking left side anymore */
    .ps2-immersive .selected-card-info { bottom: 42px; left: 8px; right: auto; font-size: .52rem; padding: 3px 6px; max-width: 40vw; }
  }

  /* ========== PS2 MOBILE D-PAD ========== */
  .ps2-dpad-overlay {
    position: fixed;
    left: 12px;
    bottom: 58px; /* above action bar */
    z-index: 210;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
  }
  .ps2-dpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: rgba(8,8,16,.55);
    border-radius: 14px;
    padding: 8px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.08);
  }
  .ps2-dpad-middle {
    display: flex;
    align-items: center;
    gap: 3px;
  }
  .ps2-dpad-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(30,41,59,.82);
    border: 1px solid rgba(56,189,248,.28);
    color: #cbd5e1;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: background .1s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
  }
  .ps2-dpad-btn:active {
    background: rgba(14,165,233,.35);
    border-color: rgba(56,189,248,.75);
    color: #38bdf8;
    transform: scale(.88);
  }
  .ps2-dpad-center {
    background: rgba(14,165,233,.18);
    border-color: rgba(56,189,248,.5);
    color: #38bdf8;
    font-size: .9rem;
  }
  /* On desktop (pointer: fine), hide D-pad and mobile zoom even if React renders it */
  @media (pointer: fine) {
    .ps2-dpad-overlay { display: none !important; }
    .ps2-mobile-zoom { display: none !important; }
  }

  /* ========== MOBILE ZOOM BUTTONS (in-game, bottom-right) ========== */
  .ps2-mobile-zoom {
    position: fixed;
    right: 12px;
    bottom: 58px;
    z-index: 210;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ps2-mobile-zoom-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(30,41,59,.82);
    border: 1px solid rgba(56,189,248,.28);
    color: #cbd5e1;
    font-size: 1.3rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background .1s, transform .1s;
  }
  .ps2-mobile-zoom-btn:active {
    background: rgba(14,165,233,.35);
    border-color: rgba(56,189,248,.75);
    color: #38bdf8;
    transform: scale(.88);
  }
  @media (max-height: 440px) and (orientation: landscape) {
    .ps2-mobile-zoom { bottom: 42px; right: 8px; gap: 3px; }
    .ps2-mobile-zoom-btn { width: 32px; height: 32px; font-size: 1rem; border-radius: 8px; }
  }

  /* ========== GAMEPAD SUPPORT ========== */
  .gp-virtual-cursor {
    position: fixed;
    width: 28px; height: 28px;
    margin-left: -14px; margin-top: -14px;
    border: 2px solid rgba(56,189,248,.9);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,.25) 0%, transparent 70%);
    box-shadow: 0 0 16px rgba(56,189,248,.4), 0 0 4px rgba(56,189,248,.8);
    z-index: 99999;
    pointer-events: none;
    transition: left 0.06s linear, top 0.06s linear;
  }
  .gp-virtual-cursor::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 4px; height: 4px;
    margin: -2px 0 0 -2px;
    background: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 6px #38bdf8;
  }
  .gp-indicator {
    position: fixed;
    bottom: 50px; right: 8px;
    background: rgba(10,12,16,.85);
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .8rem;
    z-index: 300;
    border: 1px solid rgba(56,189,248,.25);
    opacity: .7;
    pointer-events: none;
    animation: gpPulse 2s ease-in-out infinite;
  }
  @keyframes gpPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

  .hand-card.gp-hand-active {
    outline: 3px solid #38bdf8 !important;
    outline-offset: -1px;
    box-shadow: 0 0 20px rgba(56,189,248,.5), 0 0 8px rgba(56,189,248,.3) !important;
    transform: translateY(-6px) scale(1.05);
    z-index: 10;
    transition: transform .15s, box-shadow .15s;
  }

  /* ========== PAUSE MENU E CONFIGURAÇÕES ========== */
  .btn-pause-gear {
    position: fixed;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(30,41,59,.9), rgba(15,23,42,.95));
    border: 1px solid rgba(255,255,255,.15);
    color: #cbd5e1;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,.6);
    transition: all .2s ease;
  }
  .btn-pause-gear:hover {
    transform: rotate(45deg) scale(1.1);
    border-color: rgba(250,204,21,.5);
    color: #facc15;
    box-shadow: 0 4px 20px rgba(250,204,21,.3);
  }
  @media (max-width: 640px) {
    .btn-pause-gear {
      width: 34px;
      height: 34px;
      font-size: 1.1rem;
      top: 10px;
      right: 10px;
    }
  }

  .pause-menu-overlay, .settings-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease-out;
  }
  
  .pause-menu-modal, .settings-menu-modal {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 1px solid rgba(250,204,21,.4);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: slideUp .2s ease-out;
  }
  .pause-menu-modal { width: 320px; }
  .settings-menu-modal {
    width: 480px;
    max-width: 95vw;
    /* Limita altura pra nunca estourar a viewport. Com muitas opções
       (FPS cap + Fullscreen pref + gameplay + audio), o modal cresceu
       além de 100vh em telas baixas. Scroll interno resolve sem cortar
       opções. */
    max-height: min(90vh, 720px);
    align-items: stretch;
    overflow: hidden; /* filho .settings-content é que scrolla */
  }
  /* Settings-content scrolla internamente — headers/tabs ficam fixos */
  .settings-menu-modal .settings-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(234,179,8,.4) transparent;
  }
  .settings-menu-modal .settings-content::-webkit-scrollbar { width: 6px; }
  .settings-menu-modal .settings-content::-webkit-scrollbar-thumb {
    background: rgba(234,179,8,.4); border-radius: 3px;
  }

  /* Slider de zoom (usado em HUD tab) */
  .setting-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, rgba(200,16,46,.3), rgba(234,179,8,.5));
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 4px 0;
  }
  .setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #facc15, #d97706);
    border: 2px solid #0f172a;
    cursor: grab;
    box-shadow: 0 0 8px rgba(234,179,8,.6);
    transition: transform .1s;
  }
  .setting-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
  .setting-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #facc15, #d97706);
    border: 2px solid #0f172a;
    cursor: grab;
    box-shadow: 0 0 8px rgba(234,179,8,.6);
  }
  .setting-slider-scale {
    display: flex; justify-content: space-between;
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 11px;
    color: #64748b;
    letter-spacing: .04em;
    margin-top: 2px;
  }

  /* Mobile: pra caber bem em telas estreitas + landscape curto */
  @media (max-width: 560px) {
    .settings-menu-modal { padding: 16px; width: 100%; }
    .settings-tabs { gap: 4px; }
    .settings-tab { padding: 6px 4px; font-size: .65rem; letter-spacing: 0; }
  }
  @media (max-height: 600px) {
    .settings-menu-modal { max-height: 94vh; padding: 12px 16px; }
    .settings-header { margin-bottom: 10px; padding-bottom: 6px; }
    .settings-header h2 { font-size: 1rem; }
    .settings-tabs { margin-bottom: 8px; }
  }

  .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .settings-header h2 { margin: 0; font-size: 1.2rem; color: #f1f5f9; text-transform: uppercase; letter-spacing: 1px; }
  
  .settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }
  .settings-tab {
    flex: 1;
    background: rgba(0,0,0,.3);
    border: 1px solid rgba(255,255,255,.1);
    color: #94a3b8;
    font-size: .8rem;
    font-weight: 600;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .settings-tab:hover {
    background: rgba(255,255,255,.08);
    color: #f8fafc;
  }
  .settings-tab.active {
    background: linear-gradient(to bottom, rgba(234,179,8,.15), rgba(202,138,4,.05));
    border-color: rgba(234,179,8,.5);
    color: #facc15;
    box-shadow: inset 0 0 8px rgba(234,179,8,.2);
  }
  
  .settings-content {
    min-height: 240px;
    background: rgba(0,0,0,.2);
    border-radius: 8px;
    padding: 16px;
  }
  .setting-group {
    display: flex;
    flex-direction: column;
  }
  .setting-group h3 {
    font-size: 1rem; color: #f8fafc; margin-bottom: 6px; border-bottom: 1px dashed rgba(255,255,255,.1); padding-bottom: 4px;
  }

  .setting-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 14px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden;
  }
  .setting-card:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(234,179,8,.3);
  }
  .setting-card.active {
    background: linear-gradient(135deg, rgba(74,222,128,.1), rgba(16,185,129,.1));
    border-color: #10b981;
    box-shadow: 0 0 14px rgba(16,185,129,.15);
  }
  .setting-card.active::before {
    content: "✓";
    position: absolute;
    top: 10px; right: 14px;
    color: #10b981;
    font-size: 1.2rem;
    font-weight: bold;
  }
  .setting-card-title {
    font-weight: 700; color: #f1f5f9; margin-bottom: 4px; font-size: .85rem; display: flex; align-items: center; gap: 6px;
  }
  .setting-card.active .setting-card-title {
    color: #34d399;
  }
  .setting-card-desc {
    font-size: .75rem; color: #94a3b8; line-height: 1.4;
  }

  /* ========== SMOOTH CARD MOVEMENT ========== */
  @keyframes cardSlideIn {
    from { transform: translate(-50%, -50%) translate(var(--slide-x, 0), var(--slide-y, 0)) translateZ(6px); }
    to   { transform: translate(-50%, -50%) translateZ(6px); }
  }
  .card-3d-wrapper.card-sliding {
    animation: cardSlideIn 0.35s ease-out !important;
  }
  /* Ghost trail behind moving card */
  .card-3d-wrapper.card-sliding::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(to right, rgba(100,200,255,.3), transparent);
    border-radius: 4px;
    filter: blur(4px);
    opacity: 0;
    animation: moveTrailGlow 0.35s ease-out forwards;
    pointer-events: none;
  }
  @keyframes moveTrailGlow {
    0% { opacity: .6; transform: translate(calc(var(--slide-x, 0) * 0.3), calc(var(--slide-y, 0) * 0.3)); }
    100% { opacity: 0; transform: translate(0, 0); }
  }
  .card-3d-wrapper.def-position.card-sliding {
    animation: cardSlideInDef 0.35s ease-out !important;
  }
  @keyframes cardSlideInDef {
    from { transform: translate(-50%, -50%) translate(var(--slide-x, 0), var(--slide-y, 0)) rotateZ(90deg) translateZ(6px); }
    to   { transform: translate(-50%, -50%) rotateZ(90deg) translateZ(6px); }
  }

  /* ========== CARD FLIP 3D ANIMATION ========== */
  .card-3d-wrapper.card-flipping {
    animation: cardFlip3D 0.7s ease-in-out forwards;
    transform-style: preserve-3d;
  }
  @keyframes cardFlip3D {
    0% { transform: translate(-50%, -50%) rotateY(0deg) translateZ(6px); }
    40% { transform: translate(-50%, -50%) rotateY(90deg) translateZ(14px) scale(1.15); }
    60% { transform: translate(-50%, -50%) rotateY(90deg) translateZ(14px) scale(1.15); }
    100% { transform: translate(-50%, -50%) rotateY(0deg) translateZ(6px) scale(1); }
  }
  .card-3d-wrapper.card-flipping .card-token {
    animation: cardFlipGlow 0.7s ease-in-out forwards;
  }
  @keyframes cardFlipGlow {
    0% { box-shadow: 0 0 0 transparent; }
    40% { box-shadow: 0 0 20px rgba(250,204,21,.8), 0 0 40px rgba(250,204,21,.4); }
    70% { box-shadow: 0 0 15px rgba(250,204,21,.5); }
    100% { box-shadow: 0 0 0 transparent; }
  }

  /* Piece has already acted this turn — darken like PS2 DotR did so it's
     visually clear that the player/AI already committed a decision for it.
     Applied to any non-leader card-token when piece.hasMoved is true. */
  .card-token.card-used {
    filter: brightness(.5) saturate(.65) contrast(.95);
    transition: filter .24s ease;
  }
  .card-token.card-used .card-img {
    filter: brightness(.85);
  }
  .card-token.card-used::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
    pointer-events: none;
  }

  /* ========== CARD SPELLBOUND (ENCADEADA) ==========
     Carta afetada por armadilha de encadeamento — não pode atacar
     nem se mover. Visual: dessaturada com tint azul-arroxeado (frio,
     "congelado") + badge de corrente no canto superior-esquerdo. */
  .card-token.card-spellbound {
    filter: grayscale(.55) brightness(.65) contrast(.95);
  }
  .card-token.card-spellbound::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(96, 165, 250, .18), rgba(30, 20, 60, .35));
    pointer-events: none;
    mix-blend-mode: multiply;
  }
  .spellbound-badge {
    position: absolute;
    top: 2px; left: 2px;
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px 5px;
    background: linear-gradient(180deg, #1e3a8a, #1e1b4b);
    border: 1px solid rgba(147, 197, 253, .7);
    border-radius: 4px;
    font-size: .55rem;
    font-weight: 800;
    color: #dbeafe;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
    box-shadow:
      0 0 8px rgba(96, 165, 250, .5),
      inset 0 0 4px rgba(255,255,255,.15);
    z-index: 10;
    animation: spellboundPulse 2s ease-in-out infinite;
    pointer-events: none;
    letter-spacing: .02em;
  }
  .spellbound-badge.perm {
    background: linear-gradient(180deg, #7c2d12, #431407);
    border-color: rgba(251, 146, 60, .7);
    color: #fef3c7;
    box-shadow: 0 0 8px rgba(251, 146, 60, .45), inset 0 0 4px rgba(255,255,255,.15);
  }
  .spellbound-badge .spellbound-icon {
    font-size: .6rem;
    filter: drop-shadow(0 0 3px rgba(147, 197, 253, .8));
  }
  .spellbound-badge.perm .spellbound-icon {
    filter: drop-shadow(0 0 3px rgba(251, 146, 60, .8));
  }
  .spellbound-badge .spellbound-text {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: .7rem;
    line-height: 1;
  }
  @keyframes spellboundPulse {
    0%, 100% { opacity: .85; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.06); }
  }
  /* Em mobile, badge mais compacto */
  @media (max-width: 560px) {
    .spellbound-badge { padding: 1px 3px; font-size: .48rem; }
    .spellbound-badge .spellbound-icon { font-size: .5rem; }
    .spellbound-badge .spellbound-text { font-size: .6rem; }
  }

  /* ========== CARD DESTRUCTION PARTICLES ========== */
  .card-token.is-destroying {
    animation: cardShatter 0.8s ease-in forwards !important;
  }
  @keyframes cardShatter {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    15% { opacity: 1; transform: scale(1.05); filter: brightness(2) saturate(0.5); }
    30% { opacity: .9; filter: brightness(1.5) hue-rotate(10deg); }
    100% { opacity: 0; transform: scale(0.3) rotate(15deg); filter: brightness(3) saturate(0); }
  }

  /* Blackhole ativo: cartas destruídas são SUGADAS pro centro do board.
     Cada .cell expõe --cell-r e --cell-c (0..6). O centro é (3,3).
     Calculamos deslocamento em % da própria cell — ex: carta em (0,0)
     precisa mover (+300%, +300%) pra chegar no centro (3,3). */
  .board-scene.blackhole-active .card-token.is-destroying {
    animation: suckToHole 1.6s cubic-bezier(.55,.06,.68,.19) forwards !important;
    z-index: 50; /* carta passa por cima do vórtice enquanto é sugada */
    transform-origin: center center;
  }
  @keyframes suckToHole {
    0% {
      opacity: 1;
      transform: translate(0, 0) scale(1) rotate(0deg);
      filter: brightness(1);
    }
    25% {
      opacity: 1;
      transform: translate(
        calc((3 - var(--cell-c, 3)) * 22%),
        calc((3 - var(--cell-r, 3)) * 22%)
      ) scale(.88) rotate(120deg);
      filter: brightness(1.3) saturate(1.1);
    }
    70% {
      opacity: .9;
      transform: translate(
        calc((3 - var(--cell-c, 3)) * 75%),
        calc((3 - var(--cell-r, 3)) * 75%)
      ) scale(.4) rotate(540deg);
      filter: brightness(.9) hue-rotate(-20deg);
    }
    100% {
      opacity: 0;
      transform: translate(
        calc((3 - var(--cell-c, 3)) * 100%),
        calc((3 - var(--cell-r, 3)) * 100%)
      ) scale(.05) rotate(900deg);
      filter: brightness(.3) hue-rotate(-40deg);
    }
  }
  /* Attack path arcs — parabolic SVG paths from selected attacker to each
     valid target, colored by predicted combat result. Overlays the 7×7
     board; pointer-events: none so cells stay clickable underneath. */
  .attack-arcs {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 5;
    overflow: hidden; /* keep arcs clipped to the board so a mis-sized SVG never paints over the HUD */
  }
  .attack-arc {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 6 4;
    vector-effect: non-scaling-stroke;
    /* drop-shadow(currentColor) on large paths can nuke performance in some
       browsers — skip the filter, rely on the stroke color + dash animation. */
    opacity: .9;
    animation: attack-arc-flow 1s linear infinite;
  }
  .attack-arc-win     { stroke: #22c55e; color: #22c55e; }
  .attack-arc-lose    { stroke: #ef4444; color: #ef4444; stroke-dasharray: 3 5; }
  .attack-arc-tied,
  .attack-arc-mutual  { stroke: #f59e0b; color: #f59e0b; }
  .attack-arc-unknown { stroke: #94a3b8; color: #94a3b8; stroke-dasharray: 2 4; opacity: .65; }
  @keyframes attack-arc-flow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
  }
  @media (prefers-reduced-motion: reduce) {
    .attack-arc { animation: none; }
  }

  /* Shatter pieces on destroy — many small angular shards with physics
     (outward burst -> gravity fall -> spin + fade). The shard silhouette
     is a randomized jagged polygon; size, opacity and glow are controlled
     via per-piece CSS vars for variety without duplicating keyframes. */
  .destroy-particles {
    position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 6;
    transform: translateZ(14px); /* sit above the card in 3D */
  }
  .destroy-particle {
    position: absolute;
    width: var(--size, 10px); height: calc(var(--size, 10px) * 1.2);
    background: linear-gradient(135deg, #f87171 0%, #b91c1c 55%, #450a0a 100%);
    box-shadow:
      0 0 3px rgba(248,113,113,.55),
      0 0 6px rgba(248,113,113,.3),
      inset 0.5px 0.5px 0 rgba(255,255,255,.22),
      inset -0.5px -0.5px 0 rgba(0,0,0,.55);
    transform-origin: center;
    opacity: var(--alpha, 1);
    animation: destroyShatter var(--dur, 1.05s) cubic-bezier(.22,.7,.22,1) forwards;
    /* No `will-change`: 20 live particles × per-element compositor layer
       costs more GPU memory than the animation saves. The keyframes still
       hint the engine to promote just while running. */
  }
  /* Eight distinct jagged silhouettes cycled via :nth-child so a cloud of
     20+ shards reads as chaos, not clones. */
  .destroy-particle:nth-child(8n+1) { clip-path: polygon(22% 0%, 100% 28%, 88% 100%, 0% 82%); }
  .destroy-particle:nth-child(8n+2) { clip-path: polygon(0% 12%, 92% 0%, 100% 68%, 58% 100%, 14% 88%); }
  .destroy-particle:nth-child(8n+3) { clip-path: polygon(34% 0%, 100% 18%, 94% 78%, 38% 100%, 0% 52%); }
  .destroy-particle:nth-child(8n+4) { clip-path: polygon(52% 0%, 100% 52%, 68% 100%, 0% 74%, 16% 24%); }
  .destroy-particle:nth-child(8n+5) { clip-path: polygon(10% 0%, 100% 20%, 82% 100%, 22% 86%, 0% 42%); }
  .destroy-particle:nth-child(8n+6) { clip-path: polygon(42% 0%, 100% 36%, 62% 100%, 0% 72%, 26% 22%); }
  .destroy-particle:nth-child(8n+7) { clip-path: polygon(0% 30%, 50% 0%, 100% 40%, 84% 96%, 28% 100%); }
  .destroy-particle:nth-child(8n+8) { clip-path: polygon(14% 6%, 88% 0%, 100% 46%, 72% 100%, 0% 78%); }
  .destroy-particle.fire {
    background: linear-gradient(135deg, #fbbf24 0%, #ea580c 55%, #7c2d12 100%);
    box-shadow: 0 0 4px rgba(234,88,12,.7), 0 0 9px rgba(234,88,12,.35), inset 0.5px 0.5px 0 rgba(255,255,255,.25), inset -0.5px -0.5px 0 rgba(0,0,0,.45);
  }
  .destroy-particle.ember {
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #78350f 100%);
    box-shadow: 0 0 5px rgba(251,191,36,.85), 0 0 10px rgba(251,191,36,.4), inset 0.5px 0.5px 0 rgba(255,255,255,.32), inset -0.5px -0.5px 0 rgba(0,0,0,.4);
  }
  .destroy-particle.spark {
    background: linear-gradient(135deg, #fff7ed 0%, #fde68a 60%, #b45309 100%);
    width: calc(var(--size, 10px) * .6); height: calc(var(--size, 10px) * .6);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,247,220,.9), 0 0 12px rgba(251,191,36,.55);
    clip-path: none !important;
  }
  /* Motion: burst outward, then gravity pulls shards down while they spin
     and fade. --dx / --dy = initial burst vector (px). --spin = end rotation. */
  @keyframes destroyShatter {
    0%   { opacity: var(--alpha, 1); transform: translate(0, 0) rotate(0deg) scale(1.15); }
    18%  { opacity: var(--alpha, 1); transform: translate(calc(var(--dx, 40px) * .55), calc(var(--dy, -30px) * .55)) rotate(calc(var(--spin, 180deg) * .22)) scale(1.05); }
    55%  { opacity: calc(var(--alpha, 1) * .85); transform: translate(var(--dx, 40px), calc(var(--dy, -30px) + 18px)) rotate(calc(var(--spin, 180deg) * .6)) scale(.88); }
    100% { opacity: 0; transform: translate(calc(var(--dx, 40px) * 1.22), calc(var(--dy, -30px) + 90px)) rotate(var(--spin, 180deg)) scale(.42); }
  }
  @media (prefers-reduced-motion: reduce) {
    .destroy-particle { animation-duration: .4s; }
  }

  /* ========== ANIMATED TERRAIN EFFECTS ========== */
  /* Sea — water shimmer */
  .cell.terrain-sea::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(135deg, transparent 40%, rgba(96,165,250,.12) 50%, transparent 60%),
      linear-gradient(225deg, transparent 40%, rgba(147,197,253,.1) 50%, transparent 60%);
    animation: terrainSeaShimmer 3s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainSeaShimmer {
    0%, 100% { opacity: .3; transform: translateX(-5%); }
    50% { opacity: .7; transform: translateX(5%); }
  }
  /* Volcano — lava pulse */
  .cell.terrain-volcano::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 80%, rgba(239,68,68,.2) 0%, rgba(234,88,12,.1) 40%, transparent 70%);
    animation: terrainLavaPulse 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainLavaPulse {
    0%, 100% { opacity: .3; }
    50% { opacity: .8; }
  }
  /* Forest — leaf sway */
  .cell.terrain-forest::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(74,222,128,.06) 0%, transparent 40%, rgba(34,197,94,.08) 100%);
    animation: terrainForestSway 4s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainForestSway {
    0%, 100% { transform: translateX(0); opacity: .4; }
    50% { transform: translateX(3px); opacity: .7; }
  }
  /* Dark — shadow pulse */
  .cell.terrain-dark::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(88,28,135,.15) 0%, rgba(30,10,60,.1) 60%, transparent 100%);
    animation: terrainDarkPulse 3.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainDarkPulse {
    0%, 100% { opacity: .3; box-shadow: inset 0 0 10px rgba(88,28,135,.2); }
    50% { opacity: .7; box-shadow: inset 0 0 20px rgba(88,28,135,.4); }
  }
  /* Holy — divine shimmer */
  .cell.terrain-holy::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 30% 30%, rgba(253,224,71,.1) 0%, transparent 50%),
      radial-gradient(circle at 70% 70%, rgba(250,204,21,.08) 0%, transparent 50%);
    animation: terrainHolyShimmer 3s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainHolyShimmer {
    0%, 100% { opacity: .3; }
    33% { opacity: .7; }
    66% { opacity: .4; }
  }
  /* Mountain — dust drift */
  .cell.terrain-mountain::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(168,130,90,.08) 50%, transparent 70%);
    animation: terrainMountainDust 5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainMountainDust {
    0%, 100% { transform: translateX(-8px); opacity: .2; }
    50% { transform: translateX(8px); opacity: .5; }
  }
  /* Factory — spark flash */
  .cell.terrain-factory::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 70% 30%, rgba(96,165,250,.1) 0%, transparent 40%);
    animation: terrainFactorySpark 2s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainFactorySpark {
    0%, 85%, 100% { opacity: .1; }
    90% { opacity: .8; }
  }
  /* Wasteland — heat haze */
  .cell.terrain-wasteland::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(180,140,80,.06) 0%, transparent 60%);
    animation: terrainWastelandHaze 4s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainWastelandHaze {
    0%, 100% { transform: scaleX(1); opacity: .3; }
    50% { transform: scaleX(1.02); opacity: .6; }
  }
  /* Toon — rainbow shimmer */
  .cell.terrain-toon::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,100,100,.06), rgba(100,255,100,.06), rgba(100,100,255,.06), rgba(255,255,100,.06));
    background-size: 300% 300%;
    animation: terrainToonRainbow 4s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainToonRainbow {
    0% { background-position: 0% 0%; opacity: .3; }
    50% { background-position: 100% 100%; opacity: .6; }
    100% { background-position: 0% 0%; opacity: .3; }
  }
  /* Meadow — grass wave */
  .cell.terrain-meadow::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(132,204,22,.08) 100%);
    animation: terrainMeadowWave 3.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }
  @keyframes terrainMeadowWave {
    0%, 100% { transform: translateY(0); opacity: .3; }
    50% { transform: translateY(-2px); opacity: .6; }
  }

  /* ========== ATMOSPHERIC PARTICLE CANVAS ========== */
  .atmosphere-canvas {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 1;
    width: 100%; height: 100%;
  }

  /* ========== DUEL INTRO CINEMATIC ========== */
  .duel-loading-overlay {
    position: fixed; inset: 0; z-index: 11000;
    background: #000; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    animation: duelIntroFadeOut 0.8s ease-in 5.2s forwards;
  }
  .duel-loading-bg {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(30,10,60,.9) 0%, #000 70%);
    animation: duelIntroBgPulse 3s ease-in-out infinite;
  }
  @keyframes duelIntroBgPulse {
    0%,100% { opacity: .7; }
    50% { opacity: 1; }
  }
  @keyframes duelIntroFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
  }

  /* Spinning board */
  .duel-loading-board-container {
    position: relative; z-index: 2;
    perspective: 900px;
    width: 320px; height: 320px;
    animation: duelIntroBoardEntry 6s ease-out forwards;
  }
  @keyframes duelIntroBoardEntry {
    0% { transform: scale(0.3) translateY(60px); opacity: 0; }
    8% { opacity: 1; }
    15% { transform: scale(0.7) translateY(0); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
  }
  .duel-loading-board {
    width: 100%; height: 100%;
    display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr);
    gap: 1px; border-radius: 8px; overflow: hidden;
    transform-style: preserve-3d;
    animation: duelIntroBoardSpin 6s linear forwards;
    box-shadow: 0 0 40px rgba(100, 50, 200, .4), 0 0 80px rgba(100, 50, 200, .2);
  }
  @keyframes duelIntroBoardSpin {
    0%   { transform: rotateX(55deg) rotateZ(0deg) scale(0.6); }
    100% { transform: rotateX(45deg) rotateZ(720deg) scale(1); }
  }

  .duel-loading-cell {
    position: relative;
    border: 1px solid rgba(100, 80, 40, .4);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1a1a2e, #16162a);
  }
  /* Terrain colors for intro cells */
  .duel-loading-cell.terrain-normal    { background: url('../Imagens/terrenos/normal.jpg') center/cover no-repeat, linear-gradient(135deg, #1a1a2e, #16162a); }
  .duel-loading-cell.terrain-mountain  { background: url('../Imagens/terrenos/mountain.jpg') center/cover no-repeat, linear-gradient(135deg, #3b2820, #7a5540); }
  .duel-loading-cell.terrain-forest    { background: url('../Imagens/terrenos/forest.jpg') center/cover no-repeat, linear-gradient(135deg, #0f2e1a, #2d6e42); }
  .duel-loading-cell.terrain-meadow    { background: url('../Imagens/terrenos/meadow.jpg') center/cover no-repeat, linear-gradient(135deg, #2a4a1a, #5a8a38); }
  .duel-loading-cell.terrain-wasteland { background: url('../Imagens/terrenos/wasteland.jpg') center/cover no-repeat, linear-gradient(135deg, #3d2f1a, #7a6438); }
  .duel-loading-cell.terrain-sea       { background: url('../Imagens/terrenos/sea.jpg') center/cover no-repeat, linear-gradient(135deg, #0a2040, #1e5090); }
  .duel-loading-cell.terrain-dark      { background: url('../Imagens/terrenos/dark.jpg') center/cover no-repeat, linear-gradient(135deg, #1a0a2e, #3a1870); }
  .duel-loading-cell.terrain-wall      { background: url('../Imagens/terrenos/wall.jpg') center/cover no-repeat, linear-gradient(135deg, #3a3a3a, #6b6b6b); }
  .duel-loading-cell.terrain-toon      { background: url('../Imagens/terrenos/toon.jpg') center/cover no-repeat, linear-gradient(135deg, #8b1a8b, #e060e0); }
  .duel-loading-cell.terrain-volcano   { background: url('../Imagens/terrenos/volcano.jpg') center/cover no-repeat, linear-gradient(135deg, #4a0a00, #c03000); }
  .duel-loading-cell.terrain-factory   { background: url('../Imagens/terrenos/factory.jpg') center/cover no-repeat, linear-gradient(135deg, #1a1a2a, #3a3a5a); }
  .duel-loading-cell.terrain-holy      { background: url('../Imagens/terrenos/holy.jpg') center/cover no-repeat, linear-gradient(135deg, #3a3010, #9a8a40); }
  .duel-loading-cell.terrain-crash     { background: url('../Imagens/terrenos/crash.gif') center/cover no-repeat, linear-gradient(135deg, #1a0000, #cc3300); }

  .duel-loading-terrain-icon {
    font-size: 10px; opacity: .5;
    position: absolute; bottom: 1px; right: 2px;
  }

  /* Leaders appearing on the board */
  .duel-loading-leader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
  }
  .duel-loading-leader-img {
    width: 90%; height: 90%; object-fit: cover; border-radius: 3px;
    filter: drop-shadow(0 0 6px rgba(255,215,0,.8));
  }
  .duel-loading-leader-player {
    animation: duelIntroLeaderAppear 1s ease-out 2.5s backwards;
  }
  .duel-loading-leader-enemy {
    animation: duelIntroLeaderAppear 1s ease-out 3s backwards;
  }
  @keyframes duelIntroLeaderAppear {
    0% { opacity: 0; transform: scale(2.5); filter: brightness(3); }
    60% { opacity: 1; transform: scale(1.1); filter: brightness(1.5); }
    100% { opacity: 1; transform: scale(1); filter: brightness(1); }
  }

  /* Leader glow pulse after appearing */
  .duel-loading-leader-player .duel-loading-leader-img {
    animation: duelIntroLeaderGlow 1.5s ease-in-out 3.5s infinite alternate;
  }
  .duel-loading-leader-enemy .duel-loading-leader-img {
    animation: duelIntroLeaderGlow 1.5s ease-in-out 4s infinite alternate;
  }
  @keyframes duelIntroLeaderGlow {
    0% { filter: drop-shadow(0 0 4px rgba(255,215,0,.6)); }
    100% { filter: drop-shadow(0 0 12px rgba(255,215,0,1)) drop-shadow(0 0 20px rgba(200,150,50,.5)); }
  }

  /* VS section */
  .duel-loading-vs {
    position: relative; z-index: 3;
    display: flex; align-items: center; gap: 30px;
    margin-top: 30px;
    animation: duelIntroVsEntry .8s ease-out 1.5s backwards;
  }
  @keyframes duelIntroVsEntry {
    0% { opacity: 0; transform: translateY(40px) scale(0.8); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .duel-loading-vs-text {
    font-size: 2.5rem; font-weight: 900; color: #facc15;
    text-shadow: 0 0 20px rgba(250,204,21,.6), 0 2px 8px rgba(0,0,0,.8);
    letter-spacing: 4px;
    animation: duelIntroVsPulse 1s ease-in-out 2s infinite alternate;
  }
  @keyframes duelIntroVsPulse {
    0% { transform: scale(1); text-shadow: 0 0 20px rgba(250,204,21,.6); }
    100% { transform: scale(1.15); text-shadow: 0 0 40px rgba(250,204,21,.9), 0 0 60px rgba(250,150,0,.4); }
  }
  .duel-loading-duelist {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .duel-loading-duelist-portrait {
    width: 70px; height: 70px; border-radius: 50%;
    border: 3px solid rgba(250,204,21,.6);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: 0 0 15px rgba(250,204,21,.3);
  }
  .duel-loading-portrait-img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .duel-loading-portrait-initial {
    font-size: 1.8rem; font-weight: 700; color: #facc15;
  }
  .duel-loading-duelist-left {
    animation: duelIntroDuelistLeft 1s ease-out 1.5s backwards;
  }
  .duel-loading-duelist-right {
    animation: duelIntroDuelistRight 1s ease-out 1.5s backwards;
  }
  @keyframes duelIntroDuelistLeft {
    0% { opacity: 0; transform: translateX(-60px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  @keyframes duelIntroDuelistRight {
    0% { opacity: 0; transform: translateX(60px); }
    100% { opacity: 1; transform: translateX(0); }
  }
  .duel-loading-duelist-name {
    font-size: .95rem; font-weight: 600; color: #e2e8f0;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
    max-width: 120px; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .duel-loading-skip {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    z-index: 5; color: rgba(255,255,255,.4); font-size: .8rem;
    animation: duelIntroSkipBlink 2s ease-in-out infinite;
  }
  @keyframes duelIntroSkipBlink {
    0%,100% { opacity: .3; }
    50% { opacity: .7; }
  }

  /* ========== BATTLE CINEMATIC OVERLAY ========== */
  .battle-anim-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    animation: battleOverlayIn 0.3s ease-out, battleScreenShake 0.4s ease-out 1.0s;
  }
  @keyframes battleOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes battleScreenShake {
    0% { transform: translate(0,0); }
    15% { transform: translate(-6px, 3px); }
    30% { transform: translate(5px, -4px); }
    45% { transform: translate(-4px, 2px); }
    60% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, 1px); }
    100% { transform: translate(0,0); }
  }
  /* Battle energy sparks at impact */
  .battle-sparks {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 3;
  }
  .battle-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px #ffd700, 0 0 12px rgba(255,215,0,.5);
    opacity: 0;
    animation: battleSparkFly 0.8s ease-out forwards;
  }
  @keyframes battleSparkFly {
    0% { opacity: 0; transform: translate(0,0) scale(1); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--sx, 60px), var(--sy, -40px)) scale(0); }
  }
  /* Shockwave ring at clash */
  .battle-shockwave {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,200,.8);
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    animation: battleShockwaveExpand 0.6s ease-out 1.0s forwards;
    pointer-events: none; z-index: 2;
  }
  @keyframes battleShockwaveExpand {
    0% { transform: translate(-50%,-50%) scale(0); opacity: 0.9; border-width: 4px; }
    100% { transform: translate(-50%,-50%) scale(15); opacity: 0; border-width: 1px; }
  }

  .battle-anim-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
  }

  .battle-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .battle-card-left {
    animation: battleSlideLeft 2.5s ease-out forwards;
  }
  .battle-card-right {
    animation: battleSlideRight 2.5s ease-out forwards;
  }

  /* Mirror Wall prelude on attacker before clash */
  .battle-card-halfatk .battle-card-img-wrap {
    animation: battleHalfAtkPulse 0.52s ease-out 0.5s both;
  }
  .battle-halfatk-overlay {
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%) scale(0.85);
    background: linear-gradient(135deg, rgba(88,28,135,.95), rgba(190,24,93,.95));
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.4px;
    font-size: 0.72rem;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.35);
    text-shadow: 0 1px 6px rgba(0,0,0,.7);
    box-shadow: 0 0 14px rgba(236,72,153,.55);
    opacity: 0;
    animation: battleHalfAtkLabel 0.62s ease-out 0.5s forwards;
    pointer-events: none;
    z-index: 4;
  }

  @keyframes battleSlideLeft {
    0%   { transform: translateX(-70vw) scale(0.4) rotate(-15deg); opacity: 0; }
    18%  { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    42%  { transform: translateX(28px) scale(1.05); }
    52%  { transform: translateX(0) scale(1); }
    100% { transform: translateX(0) scale(1); }
  }
  @keyframes battleSlideRight {
    0%   { transform: translateX(70vw) scale(0.4) rotate(15deg); opacity: 0; }
    18%  { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; }
    42%  { transform: translateX(-28px) scale(1.05); }
    52%  { transform: translateX(0) scale(1); }
    100% { transform: translateX(0) scale(1); }
  }

  @keyframes battleHalfAtkPulse {
    0% { transform: scale(1); filter: saturate(1) brightness(1); box-shadow: 0 0 24px rgba(255,215,0,.5), 0 4px 20px rgba(0,0,0,.6); }
    30% { transform: scale(1.08); filter: saturate(1.6) brightness(1.25) hue-rotate(22deg); box-shadow: 0 0 32px rgba(244,114,182,.78), 0 0 60px rgba(168,85,247,.4), 0 4px 20px rgba(0,0,0,.6); }
    65% { transform: scale(0.92); filter: saturate(0.8) brightness(0.9); box-shadow: 0 0 18px rgba(244,114,182,.4), 0 4px 20px rgba(0,0,0,.6); }
    100% { transform: scale(1); filter: saturate(1) brightness(1); box-shadow: 0 0 24px rgba(255,215,0,.5), 0 4px 20px rgba(0,0,0,.6); }
  }
  @keyframes battleHalfAtkLabel {
    0% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.7); }
    35% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.92); }
  }

  .battle-card-img-wrap {
    width: 130px;
    height: 190px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #ffd700;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.5), 0 4px 20px rgba(0,0,0,.6);
  }
  .battle-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .battle-card-name {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .battle-card-stat {
    color: #ffd700;
    font-size: 1rem;
    font-weight: 900;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
  }

  /* VS icon */
  .battle-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0;
    animation: battleVsBounce 0.5s ease-out 0.5s forwards;
  }
  .battle-vs-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 10px rgba(255,0,0,.7));
  }
  .battle-vs-text {
    font-size: 1.5rem;
    font-weight: 900;
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 50, 50, 0.9);
    letter-spacing: 4px;
  }
  @keyframes battleVsBounce {
    0%   { opacity: 0; transform: scale(0); }
    50%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Impact flash at clash moment */
  .battle-anim-container::after {
    content: '';
    position: absolute;
    inset: -60px;
    background: radial-gradient(circle, rgba(255,255,200,.6) 0%, transparent 60%);
    opacity: 0;
    animation: battleImpactFlash 2.5s ease-out forwards;
    pointer-events: none;
    z-index: -1;
  }
  @keyframes battleImpactFlash {
    0%   { opacity: 0; }
    40%  { opacity: 0; }
    44%  { opacity: 1; }
    55%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Fire/burn destruction effect on losing card */
  .battle-card-burn .battle-card-img-wrap {
    animation: battleBurnCard 1.4s ease-in 1.1s forwards;
  }
  @keyframes battleBurnCard {
    0%   { filter: brightness(1); transform: scale(1); }
    15%  { filter: brightness(2) saturate(2); transform: scale(1.02); }
    35%  { filter: brightness(1.3) sepia(1) saturate(3.5) hue-rotate(-20deg); transform: scale(1.04); }
    60%  { filter: brightness(0.9) sepia(1) saturate(4) hue-rotate(-30deg); transform: scale(0.96); opacity: 0.8; }
    80%  { filter: brightness(0.5) saturate(2); transform: scale(0.8) rotate(3deg); opacity: 0.4; }
    100% { filter: brightness(0); transform: scale(0.3) rotate(8deg); opacity: 0; }
  }

  /* Fire overlay on the destroyed card image */
  .battle-fire-overlay {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    opacity: 0;
    animation: battleFireAppear 1.4s ease-in 1.1s forwards;
    background:
      radial-gradient(ellipse at 30% 90%, #ff4500 0%, transparent 55%),
      radial-gradient(ellipse at 70% 80%, #ff6600 0%, transparent 45%),
      radial-gradient(ellipse at 50% 95%, #ffaa00 0%, transparent 50%),
      radial-gradient(ellipse at 40% 70%, #ff3300 0%, transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  @keyframes battleFireAppear {
    0%   { opacity: 0; }
    20%  { opacity: 0.7; }
    50%  { opacity: 1; }
    100% { opacity: 1; }
  }

  /* Winner glow pulse on the winning card */
  .battle-card-win .battle-card-img-wrap {
    animation: battleWinGlow 1.4s ease-in 1.1s forwards;
  }
  @keyframes battleWinGlow {
    0%   { box-shadow: 0 0 24px rgba(255,215,0,.5), 0 4px 20px rgba(0,0,0,.6); }
    30%  { box-shadow: 0 0 40px rgba(255,215,0,.9), 0 0 60px rgba(255,200,0,.5), 0 4px 20px rgba(0,0,0,.6); filter: brightness(1.3); }
    100% { box-shadow: 0 0 30px rgba(255,215,0,.7), 0 0 45px rgba(255,200,0,.3), 0 4px 20px rgba(0,0,0,.6); filter: brightness(1.15); }
  }

  /* Result label */
  .battle-result-label {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: battleResultAppear 0.5s ease-out 1.3s forwards;
  }
  .battle-result-label.atkWins { color: #4ade80; text-shadow: 0 0 20px rgba(74,222,128,.8); }
  .battle-result-label.defWins { color: #f87171; text-shadow: 0 0 20px rgba(248,113,113,.8); }
  .battle-result-label.mutual { color: #fb923c; text-shadow: 0 0 20px rgba(251,146,60,.8); }
  .battle-result-label.bounce { color: #60a5fa; text-shadow: 0 0 20px rgba(96,165,250,.8); }
  .battle-result-label.leaderHit { color: #facc15; text-shadow: 0 0 20px rgba(250,204,21,.8); }
  @keyframes battleResultAppear {
    0%   { opacity: 0; transform: scale(2); }
    60%  { opacity: 1; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* ========== TRAP CINEMATIC OVERLAY ========== */
  .trap-anim-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    animation: trapOverlayIn 0.4s ease-out;
    cursor: pointer;
  }
  @keyframes trapOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .trap-anim-header {
    font-size: 1.6rem;
    font-weight: 900;
    color: #c084fc;
    text-shadow: 0 0 30px rgba(192,132,252,.9), 0 0 60px rgba(147,51,234,.6);
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    animation: trapHeaderAppear 0.6s ease-out 0.2s forwards;
  }
  @keyframes trapHeaderAppear {
    0%   { opacity: 0; transform: scale(2) translateY(-20px); }
    60%  { opacity: 1; transform: scale(0.95) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  .trap-anim-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .trap-anim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .trap-anim-trap-card {
    opacity: 0;
    animation: trapCardFlipIn 0.8s ease-out 0.3s forwards;
  }
  @keyframes trapCardFlipIn {
    0%   { opacity: 0; transform: rotateY(90deg) scale(0.6); }
    50%  { opacity: 1; transform: rotateY(-10deg) scale(1.05); }
    70%  { transform: rotateY(5deg) scale(1); }
    100% { opacity: 1; transform: rotateY(0deg) scale(1); }
  }

  .trap-anim-img-wrap {
    width: 130px;
    height: 190px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #a855f7;
    box-shadow: 0 0 24px rgba(168,85,247,.6), 0 0 48px rgba(147,51,234,.3), 0 4px 20px rgba(0,0,0,.6);
  }
  .trap-anim-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .trap-anim-name {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .trap-anim-arrow {
    font-size: 2.4rem;
    opacity: 0;
    animation: trapArrowPulse 0.5s ease-out 0.9s forwards;
    filter: drop-shadow(0 0 12px rgba(255,80,0,.8));
  }
  @keyframes trapArrowPulse {
    0%   { opacity: 0; transform: scale(0); }
    50%  { opacity: 1; transform: scale(1.5); }
    100% { opacity: 1; transform: scale(1); }
  }

  .trap-anim-victim-card {
    opacity: 0;
    animation: trapVictimAppear 0.5s ease-out 1.1s forwards;
  }
  @keyframes trapVictimAppear {
    0%   { opacity: 0; transform: translateX(40px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  .trap-anim-victim-burn {
    border-color: #ef4444 !important;
    box-shadow: 0 0 24px rgba(239,68,68,.6), 0 4px 20px rgba(0,0,0,.6) !important;
    animation: trapVictimBurn 1.6s ease-in 1.6s forwards;
  }
  @keyframes trapVictimBurn {
    0%   { filter: brightness(1); transform: scale(1); }
    15%  { filter: brightness(2) saturate(2); transform: scale(1.02); }
    35%  { filter: brightness(1.3) sepia(1) saturate(3.5) hue-rotate(-20deg); transform: scale(1.04); }
    60%  { filter: brightness(0.9) sepia(1) saturate(4) hue-rotate(-30deg); transform: scale(0.96); opacity: 0.8; }
    80%  { filter: brightness(0.5) saturate(2); transform: scale(0.8) rotate(3deg); opacity: 0.4; }
    100% { filter: brightness(0); transform: scale(0.3) rotate(8deg); opacity: 0; }
  }

  .trap-anim-fire-overlay {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    opacity: 0;
    animation: trapFireRise 1.6s ease-in 1.6s forwards;
    background:
      radial-gradient(ellipse at 30% 90%, #ff4500 0%, transparent 55%),
      radial-gradient(ellipse at 70% 80%, #ff6600 0%, transparent 45%),
      radial-gradient(ellipse at 50% 95%, #ffaa00 0%, transparent 50%),
      radial-gradient(ellipse at 40% 70%, #ff3300 0%, transparent 40%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  @keyframes trapFireRise {
    0%   { opacity: 0; }
    20%  { opacity: 0.7; }
    50%  { opacity: 1; }
    100% { opacity: 1; }
  }

  .trap-anim-effect-label {
    font-size: 1.2rem;
    font-weight: 900;
    color: #f87171;
    text-shadow: 0 0 20px rgba(248,113,113,.8);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: trapEffectLabelAppear 0.5s ease-out 2.0s forwards;
  }
  @keyframes trapEffectLabelAppear {
    0%   { opacity: 0; transform: scale(2); }
    60%  { opacity: 1; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
  }

  /* Mobile: smaller trap cards */
  @media (max-width: 480px) {
    .trap-anim-header { font-size: 1.1rem; letter-spacing: 2px; }
    .trap-anim-img-wrap { width: 100px; height: 146px; }
    .trap-anim-name { font-size: 0.7rem; max-width: 110px; }
    .trap-anim-effect-label { font-size: 0.9rem; }
    .trap-anim-container { gap: 14px; }
  }

  /* ========== EQUIP/BUFF CINEMATIC OVERLAY ========== */
  .equip-anim-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.90);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    animation: equipOverlayIn 0.4s ease-out;
    cursor: pointer;
  }
  @keyframes equipOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .equip-anim-header {
    font-size: 1.5rem;
    font-weight: 900;
    color: #34d399;
    text-shadow: 0 0 30px rgba(52,211,153,.9), 0 0 60px rgba(16,185,129,.6);
    letter-spacing: 4px;
    text-transform: uppercase;
    opacity: 0;
    animation: equipHeaderAppear 0.6s ease-out 0.2s forwards;
  }
  @keyframes equipHeaderAppear {
    0%   { opacity: 0; transform: scale(2) translateY(-20px); }
    60%  { opacity: 1; transform: scale(0.95) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  .equip-anim-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .equip-anim-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .equip-anim-spell-card {
    opacity: 0;
    animation: equipSpellSlideIn 0.7s ease-out 0.3s forwards;
  }
  @keyframes equipSpellSlideIn {
    0%   { opacity: 0; transform: translateX(-60px) scale(0.7) rotate(-8deg); }
    60%  { opacity: 1; transform: translateX(5px) scale(1.02) rotate(0deg); }
    100% { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
  }

  .equip-anim-img-wrap {
    width: 130px;
    height: 190px;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #ffd700;
    box-shadow: 0 0 24px rgba(255,215,0,.5), 0 4px 20px rgba(0,0,0,.6);
  }
  .equip-anim-spell-border {
    border-color: #34d399;
    box-shadow: 0 0 24px rgba(52,211,153,.6), 0 0 48px rgba(16,185,129,.3), 0 4px 20px rgba(0,0,0,.6);
  }
  .equip-anim-monster-border {
    border-color: #fbbf24;
    box-shadow: 0 0 24px rgba(251,191,36,.5), 0 4px 20px rgba(0,0,0,.6);
    animation: equipMonsterGlow 1.5s ease-in-out 1.2s forwards;
  }
  @keyframes equipMonsterGlow {
    0%   { box-shadow: 0 0 24px rgba(251,191,36,.5), 0 4px 20px rgba(0,0,0,.6); }
    50%  { box-shadow: 0 0 40px rgba(52,211,153,.9), 0 0 70px rgba(16,185,129,.5), 0 4px 20px rgba(0,0,0,.6); filter: brightness(1.3); }
    100% { box-shadow: 0 0 30px rgba(52,211,153,.7), 0 0 50px rgba(16,185,129,.3), 0 4px 20px rgba(0,0,0,.6); filter: brightness(1.15); }
  }

  .equip-anim-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .equip-anim-name {
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .equip-anim-arrow {
    font-size: 2.4rem;
    opacity: 0;
    animation: equipArrowMerge 0.6s ease-out 0.8s forwards;
    filter: drop-shadow(0 0 12px rgba(52,211,153,.8));
  }
  @keyframes equipArrowMerge {
    0%   { opacity: 0; transform: scale(0) translateX(-20px); }
    50%  { opacity: 1; transform: scale(1.4) translateX(0); }
    100% { opacity: 1; transform: scale(1) translateX(0); }
  }

  .equip-anim-monster-card {
    opacity: 0;
    animation: equipMonsterAppear 0.6s ease-out 1.0s forwards;
  }
  @keyframes equipMonsterAppear {
    0%   { opacity: 0; transform: translateX(40px) scale(0.8); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  .equip-anim-glow-overlay {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    opacity: 0;
    animation: equipGlowPulse 1.2s ease-in-out 1.5s forwards;
    background: radial-gradient(ellipse at center, rgba(52,211,153,.4) 0%, transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
  }
  @keyframes equipGlowPulse {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    70%  { opacity: 0.6; }
    100% { opacity: 0.3; }
  }

  .equip-anim-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
    animation: equipStatsAppear 0.5s ease-out 1.6s forwards;
  }
  @keyframes equipStatsAppear {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .equip-stat-change {
    font-size: 0.9rem;
    color: #e2e8f0;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
  }
  .equip-stat-up {
    color: #4ade80;
    text-shadow: 0 0 12px rgba(74,222,128,.7);
    font-size: 1.1rem;
  }
  .equip-stat-diff {
    display: inline-block;
    margin-left: 6px;
    color: #34d399;
    font-weight: 900;
    font-size: 0.85rem;
    text-shadow: 0 0 10px rgba(52,211,153,.8);
    animation: equipStatBounce 0.4s ease-out 2.0s both;
  }
  @keyframes equipStatBounce {
    0%   { transform: scale(0); }
    50%  { transform: scale(1.5); }
    100% { transform: scale(1); }
  }

  /* Mobile: smaller equip cards */
  @media (max-width: 480px) {
    .equip-anim-header { font-size: 1.1rem; letter-spacing: 2px; }
    .equip-anim-img-wrap { width: 100px; height: 146px; }
    .equip-anim-name { font-size: 0.7rem; max-width: 110px; }
    .equip-anim-container { gap: 16px; }
    .equip-stat-change { font-size: 0.75rem; }
    .equip-stat-up { font-size: 0.9rem; }
  }

  /* Mobile: smaller battle cards */
  @media (max-width: 480px) {
    .battle-card-img-wrap { width: 100px; height: 146px; }
    .battle-card-name { font-size: 0.7rem; max-width: 110px; }
    .battle-card-stat { font-size: 0.85rem; }
    .battle-vs-icon { font-size: 1.8rem; }
    .battle-vs-text { font-size: 1.2rem; }
    .battle-result-label { font-size: 1.1rem; }
    .battle-anim-container { gap: 14px; }
  }

  /* ========== 3D CARD ON BOARD ========== */
  /* O wrapper fica pointer-events: none pra não roubar cliques de
     células vizinhas quando o translateZ(6px) + rotateX(45°) do
     board projeta sua área para fora da própria célula. O .card-token
     interno herda auto pra que cliques/right-clicks no card ainda
     funcionem (evento bubbla pro wrapper/cell via DOM path). */
  .card-3d-wrapper {
    position: absolute;
    left: 50%; top: 50%;
    /* portrait card (65% × 95%) sits inside the square cell;
       when rotated 90° for DEF, 95% wide and 65% tall — still fits */
    width: 65%; height: 95%;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
    /* cards sit above the board plane — higher Z avoids z-fighting in 3D camera */
    transform: translate(-50%, -50%) translateZ(6px);
    transition: transform .16s ease;
    z-index: 220;
    pointer-events: none;
    overflow: visible;
  }

  .card-token {
    width: 100%; height: 100%;
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-size: .52rem; line-height: 1.15;
    font-weight: 600;
    position: relative;
    border: 2px solid;
    padding: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    overflow: hidden;
    backface-visibility: visible;
    transform-style: flat;
    /* Card em si permanece clicável (pra onContextMenu e pra que o
       clique bubble up pro cell). Mas como é 100% do wrapper, só
       cobre a área da própria célula — não estende pra vizinhas. */
    pointer-events: auto;
  }

  /* ---- real card art image ---- */
  .card-token .card-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 3px;
    display: block;
  }
  /* overlay gradient so badges/name remain readable over the art */
  .card-token .card-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      transparent 40%,
      rgba(0,0,0,.82) 100%
    );
    border-radius: 3px;
    pointer-events: none;
  }
  /* fallback: no image — show centered emoji */
  .card-token .card-fallback {
    position: absolute;
    inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1px;
  }
  /* Animation for card destruction (e.g. crash terrain) */
  .is-destroying {
    animation: pieceBurnOut 1s ease-in forwards !important;
    pointer-events: none;
    z-index: 999;
  }
  @keyframes pieceBurnOut {
    0%   { filter: brightness(1) sepia(0); transform: scale(1); }
    30%  { filter: brightness(2) sepia(1) saturate(5) hue-rotate(-20deg); transform: scale(1.05); }
    100% { filter: brightness(0) sepia(1) saturate(10) hue-rotate(-40deg); transform: scale(0.1); opacity: 0; }
  }

  /* Animation for card destruction (e.g. crash terrain) */
  .is-destroying {
    animation: pieceBurnOut 1s ease-in forwards !important;
    pointer-events: none;
    z-index: 999;
  }
  @keyframes pieceBurnOut {
    0%   { filter: brightness(1) sepia(0); transform: scale(1); }
    30%  { filter: brightness(2) sepia(1) saturate(5) hue-rotate(-20deg); transform: scale(1.05); }
    100% { filter: brightness(0) sepia(1) saturate(10) hue-rotate(-40deg); transform: scale(0.1); opacity: 0; }
  }

  /* content layer sits on top of the art */
  .card-token .card-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1px 2px 2px;
    display: flex; flex-direction: column;
    align-items: center;
    pointer-events: none;
  }
  /* emoji fallback when image not found */
  .card-img-fb {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
  }
  /* Blur/shimmer placeholder while a real card image is probing CDN candidates */
  .card-img-fb.card-img-loading {
    background: linear-gradient(110deg, rgba(18,18,30,0) 20%, rgba(148,163,184,.08) 45%, rgba(148,163,184,.18) 50%, rgba(148,163,184,.08) 55%, rgba(18,18,30,0) 80%);
    background-size: 220% 100%;
    animation: card-shimmer 1.4s linear infinite;
    color: rgba(255,255,255,.18);
  }
  @keyframes card-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -80% 0; }
  }

  /* Card shadow on the "floor" */
  .card-3d-wrapper::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: rgba(0,0,0,.35);
    filter: blur(6px);
    border-radius: 4px;
    z-index: -1;
  }

  .card-token.player {
    background: linear-gradient(180deg, #991b1b 0%, #500a0a 50%, #300505 100%);
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
  }
  .card-token.enemy {
    background: linear-gradient(180deg, #334155 0%, #1e293b 50%, #0f172a 100%);
    border-color: #64748b;
    box-shadow: 0 2px 8px rgba(100,116,139,.3);
  }
  .card-token.leader {
    border-width: 3px;
    overflow: visible; /* Allow the hologram model to stand above the card */
    transform-style: preserve-3d; /* Re-enable 3D for hologram (non-leaders stay flat) */
  }
  .card-token.leader.player {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(250,204,21,.5), 0 0 4px rgba(250,204,21,.3);
  }
  .card-token.leader.enemy {
    border-color: #c0c0c0;
    box-shadow: 0 0 16px rgba(192,192,192,.4), 0 0 4px rgba(192,192,192,.2);
  }

  /* Hologram above the leader card — isolated 3D via local perspective */
  .card-token.leader {
    transform-style: flat; /* Isolate from board 3D distortion */
  }
  .leader-hologram {
    position: absolute;
    bottom: 55%;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) translateY(0);
    width: 154%;
    height: 196%;
    pointer-events: none;
    z-index: 50;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 800px;
    animation: floatHologram 3.5s ease-in-out infinite, holoPulseOpacity 4s ease-in-out infinite;
  }
  .leader-hologram .model-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: rotateX(-15deg);
    transform-origin: bottom center;
  }

  /* === Scanlines overlay === */
  .holo-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 255, 255, 0.04) 3px,
      rgba(0, 255, 255, 0.04) 4px
    );
    animation: scanlineScroll 8s linear infinite;
    mix-blend-mode: screen;
  }
  @keyframes scanlineScroll {
    0%   { background-position-y: 0; }
    100% { background-position-y: 100px; }
  }

  /* === Chromatic aberration on model image === */
  .holo-chroma-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .holo-chroma-wrapper .model-img {
    position: relative;
    z-index: 1;
  }
  .holo-chroma-red,
  .holo-chroma-blue {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }
  .holo-chroma-red img,
  .holo-chroma-blue img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    transform: rotateX(-15deg);
    transform-origin: bottom center;
  }
  .holo-chroma-red {
    mix-blend-mode: screen;
    opacity: 0.35;
    animation: chromaShiftRed 5s ease-in-out infinite;
  }
  .holo-chroma-blue {
    mix-blend-mode: screen;
    opacity: 0.35;
    animation: chromaShiftBlue 5s ease-in-out infinite;
  }
  .holo-chroma-red img { filter: saturate(0) brightness(1.2) sepia(1) hue-rotate(-30deg) saturate(3); }
  .holo-chroma-blue img { filter: saturate(0) brightness(1.2) sepia(1) hue-rotate(180deg) saturate(3); }
  @keyframes chromaShiftRed {
    0%, 100% { transform: translate(0.8px, 0); }
    50%      { transform: translate(1.5px, -0.5px); }
  }
  @keyframes chromaShiftBlue {
    0%, 100% { transform: translate(-0.8px, 0); }
    50%      { transform: translate(-1.5px, 0.5px); }
  }

  /* === Pulsing opacity === */
  @keyframes holoPulseOpacity {
    0%, 100% { opacity: 0.92; }
    50%      { opacity: 0.78; }
  }

  /* === Summoning ring (base circle) === */
  .holo-summon-ring {
    position: absolute;
    bottom: -8%;
    left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    width: 120%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    border: 2px solid rgba(0, 255, 255, 0.5);
    box-shadow:
      0 0 15px rgba(0, 255, 255, 0.3),
      0 0 30px rgba(0, 255, 255, 0.15),
      inset 0 0 15px rgba(0, 255, 255, 0.1);
    animation: ringPulse 3s ease-in-out infinite, ringSpin 12s linear infinite;
  }
  .holo-summon-ring::before {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.3);
    animation: ringSpin 8s linear infinite reverse;
  }
  .holo-summon-ring::after {
    content: '';
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    border: 1px dashed rgba(0, 255, 255, 0.25);
    animation: ringSpin 6s linear infinite;
  }
  .card-token.player .holo-summon-ring {
    border-color: rgba(250, 204, 21, 0.5);
    box-shadow:
      0 0 15px rgba(250, 204, 21, 0.3),
      0 0 30px rgba(250, 204, 21, 0.15),
      inset 0 0 15px rgba(250, 204, 21, 0.1);
  }
  .card-token.player .holo-summon-ring::before { border-color: rgba(250, 204, 21, 0.3); }
  .card-token.player .holo-summon-ring::after { border-color: rgba(250, 204, 21, 0.25); }
  .card-token.enemy .holo-summon-ring {
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow:
      0 0 15px rgba(244, 63, 94, 0.3),
      0 0 30px rgba(244, 63, 94, 0.15),
      inset 0 0 15px rgba(244, 63, 94, 0.1);
  }
  .card-token.enemy .holo-summon-ring::before { border-color: rgba(244, 63, 94, 0.3); }
  .card-token.enemy .holo-summon-ring::after { border-color: rgba(244, 63, 94, 0.25); }
  @keyframes ringPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) rotateX(70deg) scale(1); }
    50%      { opacity: 1; transform: translateX(-50%) rotateX(70deg) scale(1.05); }
  }
  @keyframes ringSpin {
    0%   { rotate: 0deg; }
    100% { rotate: 360deg; }
  }

  /* === Energy aura around silhouette === */
  .holo-aura {
    position: absolute;
    inset: -8%;
    pointer-events: none;
    z-index: -1;
    border-radius: 30%;
    animation: auraPulse 3s ease-in-out infinite;
  }
  .card-token.player .holo-aura {
    background: radial-gradient(ellipse at center bottom, rgba(250, 204, 21, 0.25) 0%, rgba(250, 204, 21, 0.08) 40%, transparent 70%);
  }
  .card-token.enemy .holo-aura {
    background: radial-gradient(ellipse at center bottom, rgba(244, 63, 94, 0.25) 0%, rgba(244, 63, 94, 0.08) 40%, transparent 70%);
  }
  @keyframes auraPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.1); opacity: 1; }
  }

  /* === Materializing animation (on first appear) === */
  .leader-hologram.holo-materializing {
    animation: holoMaterialize 1.2s ease-out forwards, floatHologram 3.5s ease-in-out 1.2s infinite, holoPulseOpacity 4s ease-in-out 1.2s infinite;
  }
  @keyframes holoMaterialize {
    0% {
      clip-path: inset(100% 0 0 0);
      opacity: 0;
      filter: brightness(3) saturate(0);
    }
    40% {
      clip-path: inset(30% 0 0 0);
      opacity: 0.6;
      filter: brightness(2) saturate(0.5);
    }
    100% {
      clip-path: inset(0 0 0 0);
      opacity: 0.92;
      filter: brightness(1) saturate(1);
    }
  }
  .holo-materialize-flash {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    background: radial-gradient(ellipse at center bottom, rgba(255,255,255,0.9) 0%, transparent 70%);
    animation: materializeFlash 1s ease-out forwards;
  }
  @keyframes materializeFlash {
    0%   { opacity: 1; transform: scale(0.8); }
    50%  { opacity: 0.5; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.5); }
  }

  /* === Particles canvas (positioned behind the model) === */
  .holo-particles-canvas {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: -1;
  }

  /* === 3D model canvas === */
  .holo-3d-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    object-fit: contain;
  }
  .leader-hologram.holo-3d-mode .holo-3d-canvas {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.3));
  }

  @keyframes floatHologram {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-18px); }
  }

  .card-token.player .leader-hologram {
    filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.9))
            drop-shadow(0 0 30px rgba(250, 204, 21, 0.4))
            drop-shadow(0 15px 20px rgba(0, 0, 0, 0.6));
  }
  .card-token.enemy .leader-hologram {
    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.9))
            drop-shadow(0 0 30px rgba(244, 63, 94, 0.4))
            drop-shadow(0 15px 20px rgba(0, 0, 0, 0.6));
    /* Counter-rotate -180° to compensate card-token.enemy rotateZ(180°) */
    transform: translateX(-50%) rotateZ(-180deg) translateY(0);
    animation: floatHologramEnemy 3.5s ease-in-out infinite, holoPulseOpacity 4s ease-in-out infinite;
  }
  @keyframes floatHologramEnemy {
    0%, 100% { transform: translateX(-50%) rotateZ(-180deg) translateY(0); }
    50%      { transform: translateX(-50%) rotateZ(-180deg) translateY(-18px); }
  }
  /* Enemy turn: flip holograms to face the enemy (turn owner) */
  .board-wrapper.enemy-turn .card-token.player .leader-hologram {
    transform: translateX(-50%) rotateZ(180deg) translateY(0);
    animation: floatHologramFlipped 3.5s ease-in-out infinite, holoPulseOpacity 4s ease-in-out infinite;
  }
  .board-wrapper.enemy-turn .card-token.enemy .leader-hologram {
    transform: translateX(-50%) translateY(0);
    animation: floatHologram 3.5s ease-in-out infinite, holoPulseOpacity 4s ease-in-out infinite;
  }
  @keyframes floatHologramFlipped {
    0%, 100% { transform: translateX(-50%) rotateZ(180deg) translateY(0); }
    50%      { transform: translateX(-50%) rotateZ(180deg) translateY(-18px); }
  }

  /* Leader rank badge on board piece */
  .leader-rank-badge {
    display: block;
    font-size: .36rem;
    font-weight: 900;
    letter-spacing: .04em;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251,191,36,.7), 0 1px 2px rgba(0,0,0,1);
    line-height: 1;
    margin-top: 1px;
  }
  .leader-rank-badge-img {
    display: block;
    width: 22px;
    height: auto;
    image-rendering: pixelated;
    margin-top: 1px;
    filter: drop-shadow(0 0 3px rgba(251,191,36,.7));
  }

  .card-token .card-icon { font-size: 1.1rem; line-height: 1; }
  .card-token .card-name {
    font-size: .38rem; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #f1f5f9;
    text-shadow: 0 1px 3px rgba(0,0,0,1);
  }
  .card-token .card-stats { font-size: .42rem; color: #fde68a; }

  /* Position badge */
  .card-token .pos-badge {
    position: absolute;
    top: 1px; right: 1px;
    font-size: .38rem;
    padding: 0px 2px;
    border-radius: 2px;
    font-weight: 900;
    line-height: 1.3;
  }
  .pos-badge.atk-badge {
    background: rgba(239,68,68,.8);
    color: #fff;
  }
  .pos-badge.def-badge {
    background: rgba(59,130,246,.8);
    color: #fff;
  }

  .card-token.selected {
    box-shadow: 0 0 0 4px var(--gold), 0 0 36px rgba(250,204,21,.95) !important;
    z-index: 320;
  }

  /* Enemy cards face their owner (rotated 180° on board) */
  .card-token.enemy {
    transform: rotateZ(180deg);
  }

  /* DEF position: card rotates 90° on the board plane.
     The portrait card (65%×95% of cell) already fits when rotated:
     visually becomes 95% wide × 65% tall — still inside the square cell. */
  .card-3d-wrapper.def-position {
    transform: translate(-50%, -50%) rotateZ(90deg) translateZ(6px);
  }
  .card-3d-wrapper.def-position .card-token {
    border-color: #3b82f6;
  }
  .card-3d-wrapper.def-position .card-token.player {
    background: linear-gradient(180deg, #1e3a5f 0%, #0c1f3a 50%, #060d1a 100%);
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,.3);
  }
  .card-3d-wrapper.def-position .card-token.enemy {
    background: linear-gradient(180deg, #1e293b 0%, #111827 50%, #070b14 100%);
    border-color: #475569;
    box-shadow: 0 2px 8px rgba(71,85,105,.3);
    /* DEF enemy: keep 180° facing + visual styling, parent already handles 90° rotation */
  }

  /* ========== HAND CARD IMAGE ========== */
  .hand-card {
    position: relative;
    overflow: hidden;
  }
  .hand-card .hc-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 5px;
    display: block;
  }
  .hand-card .hc-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 45%, rgba(0,0,0,.88) 100%);
    border-radius: 5px;
    pointer-events: none;
  }
  .hand-card .hc-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 3px 4px 4px;
    display: flex; flex-direction: column;
    align-items: center;
    pointer-events: none;
  }
  .hand-card .hc-fallback {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    width: 100%; height: 100%;
  }

  /* ========== HAND ========== */
  .hand-area {
    margin-top: 16px;
    width: auto; max-width: 95vw;
    position: relative;
    z-index: 10;
    margin-left: auto; margin-right: auto;
  }
  .hand-label {
    font-size: .72rem; color: #94a3b8; margin-bottom: 4px;
    display: flex; justify-content: space-between; align-items: center;
    position: relative; z-index: 10;
  }
  .hand {
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
    padding: 6px 0;
    /* Hide the horizontal scrollbar visually — still scrollable via swipe/wheel.
       A bar was flickering on hover of the last card because the hover lift
       (translateY) nudged layout by 1px. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge/IE */
  }
  .hand::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .hand-card {
    flex: 0 0 auto;
    width: 97px; min-height: 132px;
    background: linear-gradient(180deg, #1e1e38 0%, #0f0f1a 100%);
    border: 2px solid #3b3b5c;
    border-radius: 6px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 6px 4px;
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
    text-align: center;
    position: relative;
  }
  .hand-card:hover { transform: translateY(-6px) scale(1.03); border-color: var(--gold); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
  .hand-card.selected-hand {
    border-color: var(--gold); box-shadow: 0 0 14px rgba(250,204,21,.5); transform: translateY(-8px) scale(1.05);
  }
  .hand-card .hc-icon { font-size: 1.5rem; }
  .hand-card .hc-name { font-size: .58rem; font-weight: 700; margin: 3px 0 2px; }
  .hand-card .hc-stats { font-size: .52rem; color: #fde68a; }
  .hand-card .hc-cost  { font-size: .48rem; color: #94a3b8; }
  .hand-card .hc-cost b { color: var(--gold); }
  .hand-card .hc-type { font-size: .42rem; color: #64748b; margin-top: 1px; }
  .hand-card .hc-effect { font-size: .42rem; color: #c4b5fd; margin-top: 1px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }

  /* Enemy hand — face-down card backs during opponent turn */
  .hand-card.enemy-hand-card {
    border-color: #991b1b;
    background: linear-gradient(180deg, #1a0a0a 0%, #0f0505 100%);
    pointer-events: none;
    opacity: 0.9;
  }
  .hand-card.enemy-hand-card .hc-img {
    border-radius: 4px;
  }

  /* Draw card animation — PS2 slide in from left */
  .hand-card.hand-card-draw {
    animation: handCardSlideIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes handCardSlideIn {
    0% { opacity: 0; transform: translateX(-80px) scale(0.85); }
    60% { opacity: 1; transform: translateX(6px) scale(1.02); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
  }

  /* Spell card in hand */
  .hand-card.spell-card {
    border-color: #22c55e;
    background: linear-gradient(180deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
  }
  .hand-card.spell-card:hover { border-color: #4ade80; box-shadow: 0 8px 20px rgba(34,197,94,.3); }
  .hand-card.spell-card.selected-hand { border-color: #4ade80; box-shadow: 0 0 14px rgba(34,197,94,.5); }
  .spell-badge, .trap-badge {
    position: absolute; top: 2px; left: 2px; z-index: 5;
    font-size: .38rem; font-weight: 700; padding: 1px 4px;
    border-radius: 3px; color: #fff;
  }
  .spell-badge { background: rgba(34,197,94,.8); }
  .trap-badge { background: rgba(168,85,247,.8); }

  /* Trap card in hand */
  .hand-card.trap-hand-card {
    border-color: #a855f7;
    background: linear-gradient(180deg, rgba(168,85,247,.15), rgba(168,85,247,.05));
  }
  .hand-card.trap-hand-card:hover { border-color: #c084fc; box-shadow: 0 8px 20px rgba(168,85,247,.3); }
  .hand-card.trap-hand-card.selected-hand { border-color: #c084fc; box-shadow: 0 0 14px rgba(168,85,247,.5); }

  /* Can't afford indicator */
  .hand-card.no-afford { opacity: .5; }

  /* ──── FUSION SELECTION STYLES ──── */
  .hand-card.fusion-selected {
    border-color: #f59e0b;
    box-shadow: 0 0 18px rgba(245,158,11,.6), 0 -8px 20px rgba(245,158,11,.2);
    transform: translateY(-14px) scale(1.06);
    background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(217,119,6,.08));
    z-index: 20;
  }
  .hand-card.fusion-selected:hover {
    transform: translateY(-16px) scale(1.08);
    box-shadow: 0 0 24px rgba(245,158,11,.7), 0 -10px 25px rgba(245,158,11,.3);
  }
  .fusion-order-badge {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    z-index: 25;
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000; font-weight: 900; font-size: .65rem;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fbbf24;
    box-shadow: 0 2px 8px rgba(245,158,11,.5);
    animation: fusionBadgePulse 1.5s ease-in-out infinite;
  }
  @keyframes fusionBadgePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(245,158,11,.5); transform: translateX(-50%) scale(1); }
    50% { box-shadow: 0 2px 14px rgba(245,158,11,.8); transform: translateX(-50%) scale(1.1); }
  }

  .btn-fusion {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000; font-weight: 700; font-size: .65rem;
    padding: 6px 16px; border-radius: 8px; border: 2px solid #fbbf24;
    cursor: pointer; text-shadow: none;
    box-shadow: 0 0 14px rgba(245,158,11,.4);
    animation: fusionBtnGlow 2s ease-in-out infinite;
    transition: all .2s;
  }
  .btn-fusion:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 0 24px rgba(245,158,11,.7);
  }
  .btn-fusion:disabled { opacity: .5; cursor: not-allowed; }
  @keyframes fusionBtnGlow {
    0%, 100% { box-shadow: 0 0 14px rgba(245,158,11,.4); }
    50% { box-shadow: 0 0 24px rgba(245,158,11,.7); }
  }

  .fusion-hint {
    font-size: .55rem; color: #f59e0b; padding: 4px 10px;
    background: rgba(245,158,11,.1); border-radius: 6px;
    border: 1px solid rgba(245,158,11,.3);
  }

  .fusion-result-preview {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(217,119,6,.08));
    border: 2px solid #f59e0b; border-radius: 8px;
    padding: 6px 12px; margin: 4px 8px;
    animation: fusionResultGlow 2s ease-in-out infinite;
  }
  @keyframes fusionResultGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(245,158,11,.3); }
    50% { box-shadow: 0 0 20px rgba(245,158,11,.6); }
  }
  .fusion-result-img {
    width: 40px; height: 55px; object-fit: cover; border-radius: 4px;
    border: 2px solid #fbbf24;
  }
  .fusion-result-info {
    display: flex; flex-direction: column; gap: 2px; font-size: .6rem;
  }
  .fusion-result-name {
    font-weight: 700; font-size: .7rem; color: #fbbf24;
  }

  .highlight-fusion {
    background: rgba(245,158,11,.3) !important;
    box-shadow: inset 0 0 12px rgba(245,158,11,.5);
    animation: highlightFusion 1s ease-in-out infinite;
  }
  @keyframes highlightFusion {
    0%, 100% { box-shadow: inset 0 0 12px rgba(245,158,11,.5); }
    50% { box-shadow: inset 0 0 20px rgba(245,158,11,.8); }
  }

  .fusion-summon-modal {
    border-color: #f59e0b !important;
    box-shadow: 0 0 30px rgba(245,158,11,.4) !important;
  }

  .log-entry.fusion {
    color: #fbbf24; font-weight: 700;
    text-shadow: 0 0 8px rgba(245,158,11,.5);
  }

  /* Trap card on board (face-down) */
  .card-token.trap-facedown {
    background: linear-gradient(135deg, #312e81, #4c1d95);
    border: 2px solid #7c3aed;
  }
  .card-token.trap-facedown .trap-back {
    font-size: 1.4rem; text-align: center; line-height: 1;
  }
  /* Player trap on board (face-down placeholder) */
  .card-token.trap-card {
    background: linear-gradient(135deg, rgba(168,85,247,.3), rgba(88,28,135,.4));
    border: 2px solid #a855f7;
  }
  .card-token.trap-card .trap-icon {
    font-size: 1rem; text-align: center; display: block;
  }
  /* Revealed permanent trap — shows card image */
  .card-token.trap-card-revealed {
    position: relative; overflow: hidden;
    border: 2px solid #a855f7;
    box-shadow: 0 0 8px rgba(168,85,247,.4);
  }
  .trap-revealed-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
    padding: 2px 3px 1px; text-align: center;
  }

  /* ========== FACE-DOWN CARDS (card back image) ========== */
  .card-token.facedown-card {
    background: transparent;
    border: 2px solid #8B6914;
    position: relative;
    overflow: hidden;
    padding: 0;
  }
  .card-token.facedown-card.selected {
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251,191,36,.5);
  }
  .card-back-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* Player face-down card: card back with name overlay */
  .card-token.facedown-player {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 2px solid #8B6914;
    background: transparent;
  }
  .card-token.facedown-player.selected {
    border-color: #fbbf24;
    box-shadow: 0 0 12px rgba(251,191,36,.5);
  }
  .facedown-player-info {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,.7);
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    z-index: 5;
  }
  .facedown-player-name {
    font-size: .35rem;
    color: #fde68a;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .facedown-player-info .pos-badge {
    position: static;
    font-size: .3rem;
    padding: 0 3px;
  }

  /* ========== SUMMON OPTIONS MODAL ========== */
  .summon-options-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 2000;
    animation: fadeIn .2s;
  }
  .summon-options-modal {
    background: linear-gradient(135deg, #1e1b4b, #0f172a);
    border: 2px solid #6366f1;
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 8px 40px rgba(99,102,241,.3);
  }
  .summon-options-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
  }
  .summon-options-title {
    font-size: .85rem; font-weight: 700; color: #e2e8f0;
  }
  .summon-options-close {
    background: transparent; border: 1px solid #475569; color: #94a3b8;
    border-radius: 50%; width: 22px; height: 22px; cursor: pointer;
    font-size: .7rem; display: flex; align-items: center; justify-content: center;
  }
  .summon-options-close:hover { background: rgba(239,68,68,.2); border-color: #f87171; color: #f87171; }
  .summon-options-card-preview {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px; padding: 8px;
    background: rgba(30,41,59,.5); border-radius: 8px;
    border: 1px solid rgba(99,102,241,.2);
  }
  .summon-preview-img {
    width: 48px; height: 48px; object-fit: cover; border-radius: 6px;
    border: 1px solid rgba(99,102,241,.4);
  }
  .summon-preview-stats {
    display: flex; flex-direction: column; gap: 2px;
    font-size: .7rem; color: #cbd5e1;
  }
  .summon-options-label {
    font-size: .65rem; color: #94a3b8; margin-bottom: 8px; text-align: center;
  }
  .summon-options-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .summon-opt-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 8px;
    border-radius: 8px; border: 2px solid transparent;
    cursor: pointer; transition: all .2s;
    font-family: inherit;
  }
  .summon-opt-btn:hover, .summon-opt-btn.gp-focus {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 0 12px rgba(59,130,246,.5);
  }
  /* Gamepad focus highlight for menu/modal buttons */
  .btn-restart.gp-focus, .gy-ok-btn.gp-focus, .gy-stop-btn.gp-focus,
  .gp-nav-focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px;
    box-shadow: 0 0 12px rgba(59,130,246,.5) !important;
    transform: scale(1.03);
  }
  /* Story map marker gamepad focus: zoom + bright glow */
  .sm2-marker.gp-nav-focus {
    outline: none !important;
    transform: scale(1.5) !important;
    z-index: 500 !important;
    filter: drop-shadow(0 0 12px rgba(250,204,21,.9)) drop-shadow(0 0 24px rgba(59,130,246,.7));
    transition: transform .25s ease, filter .25s ease;
  }
  .sm2-marker.gp-nav-focus .sm2-marker-ring {
    border-color: #facc15 !important;
    box-shadow: 0 0 16px rgba(250,204,21,.8), 0 0 32px rgba(250,204,21,.4) !important;
    animation: gpMarkerPulse 1s ease infinite !important;
  }
  @keyframes gpMarkerPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(250,204,21,.8), 0 0 32px rgba(250,204,21,.4); }
    50% { box-shadow: 0 0 24px rgba(250,204,21,1), 0 0 48px rgba(250,204,21,.6); }
  }
  .sm2-marker.gp-nav-focus .sm2-marker-label {
    color: #facc15 !important;
    text-shadow: 0 0 8px rgba(250,204,21,.7);
    font-weight: 900;
  }
  .summon-opt-icon { font-size: 1.1rem; }
  .summon-opt-text { font-size: .55rem; font-weight: 600; }
  .summon-opt-mode { font-size: .5rem; opacity: .8; }

  .summon-faceup-atk {
    background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(185,28,28,.2));
    border-color: rgba(239,68,68,.4); color: #fca5a5;
  }
  .summon-faceup-atk:hover { border-color: #ef4444; box-shadow: 0 0 14px rgba(239,68,68,.3); }

  .summon-faceup-def {
    background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(29,78,216,.2));
    border-color: rgba(59,130,246,.4); color: #93c5fd;
  }
  .summon-faceup-def:hover { border-color: #3b82f6; box-shadow: 0 0 14px rgba(59,130,246,.3); }

  .summon-facedown-atk {
    background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(67,56,202,.2));
    border-color: rgba(99,102,241,.4); color: #a5b4fc;
  }
  .summon-facedown-atk:hover { border-color: #6366f1; box-shadow: 0 0 14px rgba(99,102,241,.3); }

  .summon-facedown-def {
    background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(109,40,217,.2));
    border-color: rgba(139,92,246,.4); color: #c4b5fd;
  }
  .summon-facedown-def:hover { border-color: #8b5cf6; box-shadow: 0 0 14px rgba(139,92,246,.3); }

  /* ========== LOG ========== */
  /* ========== VISUAL BATTLE TIMELINE ========== */
  .timeline-area {
    margin-top: 8px;
    width: 680px; max-width: 95vw;
    background: linear-gradient(160deg, rgba(15,12,25,.95), rgba(8,8,18,.97));
    border: 1px solid rgba(185,28,28,.25);
    border-radius: 10px;
    padding: 10px 12px 8px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(185,28,28,.35) transparent;
  }
  .timeline-area::-webkit-scrollbar { width: 4px; }
  .timeline-area::-webkit-scrollbar-thumb { background: rgba(185,28,28,.35); border-radius: 4px; }
  .timeline-title {
    font-size: .55rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.5px; color: rgba(250,204,21,.7);
    margin-bottom: 8px; padding-bottom: 5px;
    border-bottom: 1px solid rgba(250,204,21,.12);
  }
  .timeline-track {
    display: flex; flex-direction: column; gap: 0;
    position: relative;
  }
  /* Individual event row */
  .tl-event {
    display: flex; align-items: flex-start; gap: 8px;
    position: relative;
    padding: 4px 0;
    animation: tlSlideIn .3s ease-out;
  }
  @keyframes tlSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  /* Vertical connector line */
  .tl-connector {
    position: absolute; left: 11px; top: 22px;
    width: 2px; height: calc(100% - 10px);
    background: rgba(100,116,139,.2);
    pointer-events: none;
  }
  .tl-event:last-child .tl-connector { display: none; }
  /* Icon circle */
  .tl-icon {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    background: rgba(30,25,50,.9);
    border: 1.5px solid rgba(100,116,139,.3);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    z-index: 1;
    position: relative;
  }
  /* Content text */
  .tl-content {
    font-size: .6rem; line-height: 1.45;
    color: #cbd5e1;
    padding-top: 3px;
    flex: 1;
  }
  /* Event type colors */
  .tl-event.tl-battle .tl-icon { border-color: rgba(239,68,68,.5); background: rgba(60,15,15,.9); }
  .tl-event.tl-battle .tl-content { color: #fca5a5; }
  .tl-event.tl-battle .tl-connector { background: rgba(239,68,68,.2); }

  .tl-event.tl-summon .tl-icon { border-color: rgba(34,197,94,.5); background: rgba(15,50,20,.9); }
  .tl-event.tl-summon .tl-content { color: #86efac; }
  .tl-event.tl-summon .tl-connector { background: rgba(34,197,94,.2); }

  .tl-event.tl-spell .tl-icon { border-color: rgba(167,139,250,.5); background: rgba(40,20,60,.9); }
  .tl-event.tl-spell .tl-content { color: #c4b5fd; }
  .tl-event.tl-spell .tl-connector { background: rgba(167,139,250,.2); }

  .tl-event.tl-trap .tl-icon { border-color: rgba(251,191,36,.5); background: rgba(50,35,10,.9); }
  .tl-event.tl-trap .tl-content { color: #fde68a; }
  .tl-event.tl-trap .tl-connector { background: rgba(251,191,36,.2); }

  .tl-event.tl-system .tl-icon { border-color: rgba(250,204,21,.4); background: rgba(40,35,10,.9); }
  .tl-event.tl-system .tl-content { color: var(--gold); font-weight: 600; }
  .tl-event.tl-system .tl-connector { background: rgba(250,204,21,.15); }

  .tl-event.tl-info .tl-icon { border-color: rgba(96,165,250,.4); background: rgba(15,25,50,.9); }
  .tl-event.tl-info .tl-content { color: #93c5fd; }
  .tl-event.tl-info .tl-connector { background: rgba(96,165,250,.2); }

  .tl-event.tl-error .tl-icon { border-color: rgba(239,68,68,.6); background: rgba(60,10,10,.9); }
  .tl-event.tl-error .tl-content { color: #f87171; font-weight: 600; }

  .tl-event.tl-fusion .tl-icon { border-color: rgba(251,191,36,.6); background: rgba(50,35,10,.9); }
  .tl-event.tl-fusion .tl-content { color: #fbbf24; font-weight: 700; }

  /* Last event emphasis */
  .tl-event:last-child .tl-icon {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(250,204,21,.25), 0 1px 4px rgba(0,0,0,.4);
  }
  .tl-event:last-child .tl-content { font-weight: 600; }

  /* ========== BUTTONS ========== */
  .btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
  button {
    font-family: inherit; font-weight: 700;
    padding: 8px 18px; border-radius: 6px;
    border: 2px solid; cursor: pointer;
    font-size: .75rem; text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform .1s, box-shadow .15s;
  }
  button:active { transform: scale(.96); }
  button:disabled { opacity: .4; cursor: not-allowed; }
  .btn-end {
    background: linear-gradient(135deg, var(--red-dark), var(--red));
    border-color: #ef4444; color: white;
  }
  .btn-end:hover:not(:disabled) { box-shadow: 0 0 12px rgba(239,68,68,.5); }
  .btn-cancel {
    background: var(--panel); border-color: #4b5563; color: #94a3b8;
  }
  .btn-toggle {
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    border-color: #3b82f6; color: white;
  }
  .btn-toggle:hover:not(:disabled) { box-shadow: 0 0 12px rgba(59,130,246,.5); }
  .btn-restart {
    background: linear-gradient(135deg, #065f46, #059669);
    border-color: #34d399; color: white;
  }

  /* ========== GAME OVER OVERLAY ========== */
  .overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.88);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(8px);
  }

  /* ========== DECK LEADER RANK-UP OVERLAY ========== */
  .rank-up-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.82);
    display: flex; align-items: center; justify-content: center;
    z-index: 9200;
    backdrop-filter: blur(6px);
    animation: fadeIn .2s ease;
  }
  .rank-up-modal {
    background: linear-gradient(160deg,#1e293b,#0f172a);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 0 40px rgba(251,191,36,.4);
    max-width: 320px;
    width: 90%;
    animation: rankUpPop .4s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes rankUpPop {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }
  .rank-up-badge { font-size: 2.5rem; margin-bottom: 4px; }
  .rank-up-title {
    font-size: 1.5rem; font-weight: 900; letter-spacing: .08em;
    color: #fbbf24;
    text-shadow: 0 0 16px rgba(251,191,36,.6);
    margin: 4px 0;
  }
  .rank-up-sub { color: #94a3b8; font-size: .85rem; margin: 0 0 12px; }
  .rank-up-ranks {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-bottom: 6px;
  }
  .rank-up-old { color: #64748b; font-size: 1.1rem; font-weight: 700; }
  .rank-up-arrow { color: #fbbf24; font-size: 1.2rem; }
  .rank-up-new {
    color: #fbbf24; font-size: 1.4rem; font-weight: 900;
    text-shadow: 0 0 10px rgba(251,191,36,.8);
  }
  .rank-up-rank-img {
    height: 40px; width: auto; image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(251,191,36,.6));
  }
  .rank-up-rank-img.old { opacity: .55; filter: grayscale(.5); }
  .rank-up-rank-img.new { filter: drop-shadow(0 0 8px rgba(251,191,36,.9)); }
  .rank-up-label { color: #e2e8f0; font-size: .9rem; margin: 4px 0 8px; }
  .rank-up-ability {
    color: #4ade80; font-size: .8rem;
    background: rgba(74,222,128,.1);
    border: 1px solid rgba(74,222,128,.3);
    border-radius: 6px;
    padding: 4px 10px;
    margin: 6px 0 0;
  }
  .overlay h2 { font-size: 2rem; margin-bottom: 8px; }
  .overlay .win  { color: var(--gold); text-shadow: 0 0 20px rgba(250,204,21,.5); }
  .overlay .lose { color: #ef4444; text-shadow: 0 0 20px rgba(239,68,68,.5); }
  .overlay p { color: #94a3b8; margin-bottom: 16px; }

  /* ========== ANIMATIONS ========== */
  @keyframes shake {
    0%,100%{ transform: translate(0,0); }
    20%{ transform: translate(-3px,2px); }
    40%{ transform: translate(3px,-2px); }
    60%{ transform: translate(-2px,-3px); }
    80%{ transform: translate(2px,3px); }
  }
  .cell.battle-anim { animation: shake .35s ease-in-out; }

  /* ========== CARD DETAIL MODAL ========== */
  .card-detail-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.75);
    display: flex; align-items: center; justify-content: center;
    z-index: 9500;
    backdrop-filter: blur(6px);
    animation: fadeIn .15s ease;
  }
  @keyframes fadeIn { from{opacity:0} to{opacity:1} }


  .card-detail {
    background: linear-gradient(160deg, #1a1a30 0%, #0d0d1a 100%);
    border: 2px solid #3b3b60;
    border-radius: 14px;
    padding: 24px 28px;
    width: min(340px, 90vw);
    position: relative;
    box-shadow: 0 0 60px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05);
    animation: zoomIn .18s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes zoomIn { from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} }

  .card-detail.player-card { border-color: #dc2626; box-shadow: 0 0 40px rgba(220,38,38,.25), 0 0 60px rgba(0,0,0,.8); }
  .card-detail.enemy-card  { border-color: #475569; box-shadow: 0 0 40px rgba(71,85,105,.2),  0 0 60px rgba(0,0,0,.8); }
  .card-detail.leader-card { border-color: var(--gold); box-shadow: 0 0 40px rgba(250,204,21,.3), 0 0 60px rgba(0,0,0,.8); }
  .card-detail.hand-card-detail { border-color: #4f46e5; box-shadow: 0 0 40px rgba(79,70,229,.25), 0 0 60px rgba(0,0,0,.8); }

  .card-detail-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none;
    color: #64748b; font-size: 1.2rem; cursor: pointer;
    padding: 2px 6px; border-radius: 4px;
    transition: color .15s, background .15s;
  }
  .card-detail-close:hover { color: #f1f5f9; background: rgba(255,255,255,.08); }

  /* full art in modal */
  .card-detail-art {
    width: 160px;
    aspect-ratio: 421 / 614;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 auto 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
    background: #111;
    display: flex; align-items: center; justify-content: center;
  }
  .card-detail-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .card-detail-art .art-fallback {
    font-size: 4.5rem;
    filter: drop-shadow(0 0 12px rgba(250,204,21,.4));
  }
  .card-detail-name {
    font-size: 1.05rem; font-weight: 800;
    text-align: center; margin-bottom: 4px;
    background: linear-gradient(90deg, var(--gold), #fff, var(--gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: .5px;
  }
  .card-detail-type {
    text-align: center; font-size: .72rem;
    color: #94a3b8; margin-bottom: 16px;
    text-transform: uppercase; letter-spacing: 1px;
  }
  .card-detail-stats {
    display: flex; gap: 10px; justify-content: center;
    margin-bottom: 16px;
  }
  .card-detail-stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 18px;
    text-align: center;
    flex: 1;
  }
  .card-detail-stat .ds-label { font-size: .58rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; }
  .card-detail-stat .ds-value { font-size: 1.3rem; font-weight: 800; margin-top: 2px; }
  .card-detail-stat.atk-stat .ds-value { color: #f87171; }
  .card-detail-stat.def-stat .ds-value { color: #60a5fa; }
  .card-detail-stat.lvl-stat .ds-value { color: var(--gold); }

  .card-detail-info {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 8px;
  }
  .card-detail-info-row {
    display: flex; justify-content: space-between;
    font-size: .7rem;
    padding: 5px 8px;
    background: rgba(255,255,255,.03);
    border-radius: 6px;
  }
  .card-detail-info-row .di-label { color: #64748b; }
  .card-detail-info-row .di-value { color: #e2e8f0; font-weight: 600; }
  .pos-atk { color: #f87171; }
  .pos-def { color: #60a5fa; }

  .card-detail-effect {
    margin-top: 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, rgba(250,204,21,.12), rgba(234,179,8,.06));
    border: 1px solid rgba(250,204,21,.25);
    border-radius: 8px;
  }
  .card-detail-effect .di-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    color: #facc15;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .card-effect-text {
    margin: 0;
    font-size: .72rem;
    color: #e2e8f0;
    line-height: 1.4;
    font-style: italic;
  }

  .card-detail-hint {
    text-align: center; font-size: .6rem;
    color: #334155; margin-top: 14px;
  }

  /* ========== DUELIST SELECT SCREEN v2 ========== */
  .ds2-screen {
    height: 100vh; display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(160deg, #080810 0%, #0f0f1a 60%, #10101e 100%);
  }
  .ds2-header {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; flex-shrink: 0;
    background: rgba(0,0,0,.4); border-bottom: 1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(8px);
  }
  .ds2-title {
    font-size: 1.3rem; font-weight: 700; margin: 0;
    background: linear-gradient(90deg, var(--gold), #fde68a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }
  .ds2-search-wrap { margin-left: auto; }
  .ds2-search {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
    color: #e2e8f0; border-radius: 8px; padding: 6px 12px; font-size: .82rem;
    width: 180px; outline: none; transition: border-color .2s;
  }
  .ds2-search:focus { border-color: var(--gold); }
  .ds2-search::placeholder { color: #475569; }

  /* Series tabs */
  .ds2-tabs {
    display: flex; gap: 4px; padding: 8px 16px; flex-shrink: 0;
    overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid rgba(255,255,255,.05);
    background: rgba(0,0,0,.2);
  }
  .ds2-tabs::-webkit-scrollbar { display: none; }
  .ds2-tab {
    background: transparent; border: 1px solid transparent;
    color: #64748b; border-radius: 8px; padding: 6px 12px;
    cursor: pointer; font-size: .78rem; white-space: nowrap;
    transition: all .18s; font-weight: 500;
  }
  .ds2-tab:hover { color: #94a3b8; background: rgba(255,255,255,.04); }
  .ds2-tab.active {
    background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.25);
    color: var(--gold); font-weight: 600;
  }

  /* Scrollable body */
  .ds2-body {
    flex: 1; overflow-y: auto; padding: 16px 20px 40px;
    min-height: 0;
  }

  /* Series group headers */
  .ds2-series-group { margin-bottom: 24px; }
  .ds2-series-title {
    font-size: 1rem; font-weight: 700; color: #94a3b8;
    margin: 0 0 12px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(148,163,184,.1);
    display: flex; align-items: center; gap: 8px;
  }

  /* Card grid — fixed columns per breakpoint so filtered views stay consistent */
  .ds2-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  @media (min-width: 640px)  { .ds2-grid { grid-template-columns: repeat(5, 1fr); } }
  @media (min-width: 800px)  { .ds2-grid { grid-template-columns: repeat(6, 1fr); } }
  @media (min-width: 1000px) { .ds2-grid { grid-template-columns: repeat(7, 1fr); } }
  @media (min-width: 1200px) { .ds2-grid { grid-template-columns: repeat(8, 1fr); } }
  @media (min-width: 1500px) { .ds2-grid { grid-template-columns: repeat(9, 1fr); } }
  @media (min-width: 1800px) { .ds2-grid { grid-template-columns: repeat(10, 1fr); } }

  /* Individual duelist card */
  .ds2-card {
    background: linear-gradient(145deg, #1a1f35 0%, #0f1225 100%);
    border: 1px solid rgba(148,163,184,.12);
    border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: all .25s ease;
    display: flex; flex-direction: column;
  }
  .ds2-card:hover {
    border-color: var(--gold);
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(212,175,55,.2), 0 0 0 1px rgba(250,204,21,.15);
  }
  .ds2-card:active { transform: translateY(-1px); }

  /* Portrait area */
  .ds2-card-portrait {
    position: relative; width: 100%; aspect-ratio: 3/4;
    overflow: hidden; background: #0a0e1a;
  }
  .ds2-card-portrait img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
  }
  .ds2-card:hover .ds2-card-portrait img { transform: scale(1.05); }
  .ds2-card-icon-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; background: linear-gradient(135deg, #1e293b, #0f172a);
  }

  /* Style badge on portrait */
  .ds2-card-style {
    position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
    font-size: .6rem; padding: 2px 8px; border-radius: 6px;
    font-weight: 600; backdrop-filter: blur(6px); white-space: nowrap;
  }
  .style-aggressive { background: rgba(239,68,68,.75); color: #fff; }
  .style-defensive  { background: rgba(59,130,246,.75); color: #fff; }
  .style-balanced   { background: rgba(34,197,94,.75); color: #fff; }
  .style-trapper    { background: rgba(168,85,247,.75); color: #fff; }

  /* Info below portrait */
  .ds2-card-info {
    padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 2px;
    text-align: center;
  }
  .ds2-card-name { font-size: .82rem; font-weight: 700; color: #e2e8f0; }
  .ds2-card-title { font-size: .65rem; color: #64748b; line-height: 1.3; }

  /* Mobile adjustments */
  @media (max-width: 480px) {
    .ds2-header { padding: 10px 12px; gap: 8px; }
    .ds2-title { font-size: 1rem; }
    .ds2-search { width: 120px; font-size: .75rem; padding: 5px 8px; }
    .ds2-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .ds2-card-name { font-size: .75rem; }
    .ds2-body { padding: 12px 10px 32px; }
    .ds2-tabs { padding: 6px 10px; }
  }
  @media (max-width: 360px) {
    .ds2-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  }


/* ---- Graveyard viewer + post-duel slot-machine reward (moved from index.html) ---- */
  /* =====================================================================
     GRAVEYARD VIEWER
  ===================================================================== */
  .btn-graveyard {
    padding: 8px 16px; border-radius: 8px; border: 1px solid rgba(168,85,247,.4);
    cursor: pointer; font-size: .75rem; font-weight: 700;
    background: linear-gradient(135deg, #1e0a3a, #2d1b69);
    color: #c4b5fd; transition: all .2s;
  }
  .btn-graveyard:hover { border-color: #a855f7; box-shadow: 0 0 15px rgba(168,85,247,.3); transform: scale(1.05); }
  .btn-graveyard:disabled { opacity: .5; cursor: not-allowed; transform: none; }

  .graveyard-overlay {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.85); backdrop-filter: blur(5px);
  }
  .graveyard-modal {
    background: linear-gradient(160deg, #1a0a2e, #0f0f1a 70%, #1e1b4b);
    border: 2px solid rgba(168,85,247,.3);
    border-radius: 16px; padding: 0; max-width: 520px; width: 94%;
    max-height: 80vh; display: flex; flex-direction: column;
    box-shadow: 0 0 60px rgba(168,85,247,.15);
    animation: graveyardIn .4s cubic-bezier(.175,.885,.32,1.275);
  }
  @keyframes graveyardIn { from { transform: scale(.7) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

  .graveyard-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px; border-bottom: 1px solid rgba(168,85,247,.2);
  }
  .graveyard-title { font-size: 1.2rem; font-weight: 900; color: #c4b5fd; }
  .graveyard-close {
    background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer;
    padding: 4px 8px; border-radius: 4px; transition: all .2s;
  }
  .graveyard-close:hover { color: #f87171; background: rgba(239,68,68,.1); }

  .graveyard-tabs {
    display: flex; gap: 0; border-bottom: 1px solid rgba(168,85,247,.15);
  }
  .graveyard-tab {
    flex: 1; padding: 10px 0; border: none; cursor: pointer;
    font-size: .75rem; font-weight: 700; color: #64748b;
    background: transparent; transition: all .2s;
    border-bottom: 2px solid transparent;
  }
  .graveyard-tab.active {
    color: #c4b5fd; border-bottom-color: #a855f7;
    background: rgba(168,85,247,.08);
  }
  .graveyard-tab:hover:not(.active) { color: #94a3b8; background: rgba(255,255,255,.03); }

  .graveyard-cards {
    flex: 1; overflow-y: auto; padding: 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 120px;
  }
  .graveyard-empty {
    text-align: center; color: #475569; font-size: .8rem;
    padding: 40px 0; font-style: italic;
  }

  .graveyard-card {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px; padding: 8px 12px; transition: all .2s;
  }
  .graveyard-card:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
  .graveyard-spell { border-color: rgba(99,102,241,.25); background: rgba(99,102,241,.06); }
  .graveyard-trap  { border-color: rgba(168,85,247,.25); background: rgba(168,85,247,.06); }

  .graveyard-card-img { width: 42px; height: 42px; border-radius: 5px; object-fit: contain; flex-shrink: 0; }
  .graveyard-card-info { flex: 1; min-width: 0; }
  .graveyard-card-name { font-size: .7rem; font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .graveyard-card-stats { font-size: .6rem; color: #94a3b8; margin-top: 2px; }
  .graveyard-card-type { font-size: .55rem; font-weight: 700; margin-top: 2px; }
  .graveyard-card-type.spell-label { color: #a5b4fc; }
  .graveyard-card-type.trap-label  { color: #c4b5fd; }

  /* =====================================================================
     SLOT MACHINE REWARD MODAL
  ===================================================================== */
  .reward-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.92); backdrop-filter: blur(8px);
    overflow-y: auto; padding: 10px 0;
  }

  /* =====================================================================
     GRAVEYARDS SLOT MACHINE — Egyptian Stone Theme
  ===================================================================== */
  .gy-slot-machine {
    background:
      linear-gradient(180deg, rgba(80,50,20,.15), rgba(40,25,10,.4)),
      repeating-linear-gradient(0deg, rgba(120,90,50,.08) 0px, transparent 2px, transparent 18px),
      radial-gradient(ellipse at 50% 0%, rgba(160,120,60,.2), transparent 70%),
      #2a1f14;
    border: 3px solid #8b6914;
    border-radius: 16px;
    padding: 0 0 24px;
    text-align: center;
    max-width: 520px; width: 96%;
    box-shadow:
      0 0 60px rgba(139,105,20,.3),
      inset 0 0 80px rgba(0,0,0,.4),
      0 8px 32px rgba(0,0,0,.6);
    animation: slotModalIn .5s cubic-bezier(.175,.885,.32,1.275);
    overflow: hidden;
    position: relative;
  }
  @keyframes slotModalIn { from { transform: scale(.6) rotateX(20deg); opacity: 0; } to { transform: scale(1) rotateX(0); opacity: 1; } }

  /* Title bar */
  .gy-slot-title-bar {
    background:
      linear-gradient(180deg, #1a1560, #0e0a3a 40%, #1a1560);
    border-bottom: 3px solid #8b6914;
    border-top: 3px solid #8b6914;
    padding: 10px 16px;
    margin-bottom: 0;
  }
  .gy-slot-title {
    font-family: "Cinzel", "Georgia", serif;
    font-size: 1.2rem; font-weight: 900;
    color: #e8d882;
    text-shadow: 0 0 10px rgba(232,216,130,.6), 0 2px 4px rgba(0,0,0,.8);
    letter-spacing: 3px;
    text-transform: uppercase;
  }

  /* Body layout: arrows + reels + arrows */
  .gy-slot-body {
    display: flex; align-items: stretch; justify-content: center;
    padding: 16px 8px 12px;
    position: relative;
    background:
      linear-gradient(90deg, rgba(80,60,30,.3), transparent 20%, transparent 80%, rgba(80,60,30,.3));
  }

  /* Arrow columns */
  .gy-slot-arrows {
    display: flex; flex-direction: column; justify-content: space-around;
    padding: 4px 2px; gap: 4px;
  }
  .gy-arrow-row {
    display: flex; align-items: center; justify-content: center;
    height: 33.33%;
  }
  .gy-arrow {
    font-size: 1.4rem; color: #5a4a20; opacity: .3;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    transition: all .3s;
  }
  .gy-arrow-active .gy-arrow {
    color: #facc15; opacity: 1;
    text-shadow: 0 0 8px rgba(250,204,21,.6);
    filter: drop-shadow(0 0 4px rgba(250,204,21,.4));
  }

  /* Reels container */
  .gy-slot-reels {
    display: flex; gap: 6px; justify-content: center; flex: 1; max-width: 420px;
  }

  /* Individual reel */
  .gy-reel {
    flex: 1; max-width: 140px;
    display: flex; flex-direction: column; gap: 3px;
    background: rgba(0,0,0,.7);
    border: 2px solid #5a4a20;
    border-radius: 8px;
    padding: 4px;
    transition: border-color .4s, box-shadow .4s;
    overflow: hidden;
  }
  .gy-reel-spinning { border-color: #3a643a; box-shadow: 0 0 12px rgba(74,222,128,.2); }
  .gy-reel-stopped { border-color: #8b6914; box-shadow: 0 0 16px rgba(139,105,20,.3); }

  /* Individual card cell */
  .gy-reel-cell {
    height: 100px; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; overflow: hidden; position: relative;
    background: rgba(20,15,10,.8);
    border: 1px solid rgba(90,74,32,.3);
    transition: all .3s;
  }
  .gy-reel-center {
    border: 2px solid rgba(0,255,200,.25);
    box-shadow: inset 0 0 10px rgba(0,255,200,.08);
  }
  .gy-reel-winner {
    border-color: rgba(0,255,200,.7) !important;
    box-shadow: 0 0 20px rgba(0,255,200,.3), inset 0 0 15px rgba(0,255,200,.1) !important;
    background: rgba(0,255,200,.05) !important;
  }
  .gy-spinning {
    animation: gySpinBlur .1s linear infinite;
  }
  @keyframes gySpinBlur {
    0%   { filter: blur(2px); transform: translateY(-6px); opacity: .6; }
    50%  { filter: blur(0px); transform: translateY(0); opacity: 1; }
    100% { filter: blur(2px); transform: translateY(6px); opacity: .6; }
  }

  .gy-reel-img {
    width: 90%; height: 90%; object-fit: contain; border-radius: 4px;
  }

  /* Win-line overlay (horizontal line across center row) */
  .gy-win-line {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,255,200,.5), rgba(0,255,200,.8), rgba(0,255,200,.5), transparent);
    pointer-events: none;
    z-index: 2;
    display: none; /* only visible when needed, arrow highlight does it */
  }

  /* Stop button */
  .gy-stop-btn {
    margin-top: 16px;
    padding: 12px 32px; border-radius: 8px;
    border: 2px solid #8b6914;
    cursor: pointer; font-size: .95rem; font-weight: 900; color: #e8d882;
    background: linear-gradient(180deg, #3a2a10, #1a1005 60%, #3a2a10);
    box-shadow: 0 0 20px rgba(139,105,20,.3), inset 0 1px 0 rgba(232,216,130,.2);
    transition: all .2s;
    text-transform: uppercase; letter-spacing: 2px;
    animation: gyBtnPulse 1.5s ease infinite;
  }
  .gy-stop-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(139,105,20,.5); }
  @keyframes gyBtnPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139,105,20,.3); }
    50% { box-shadow: 0 0 35px rgba(232,216,130,.5); }
  }

  .gy-revealing {
    margin-top: 16px; font-size: 1rem; font-weight: 700; color: #e8d882;
    animation: slotRevealPulse 1s ease infinite;
  }
  @keyframes slotRevealPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }

  /* ── Reveal section ── */
  .gy-reveal-section {
    padding: 16px 16px 0;
    animation: slotRevealIn .6s ease both;
  }
  @keyframes slotRevealIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

  .gy-reveal-title {
    font-size: 1.2rem; font-weight: 900; color: #e8d882;
    text-shadow: 0 0 15px rgba(232,216,130,.5);
    margin-bottom: 14px; letter-spacing: 1px;
  }
  .gy-reveal-cards {
    display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; margin-bottom: 16px;
  }
  .gy-reveal-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: rgba(139,105,20,.1); border: 1px solid rgba(139,105,20,.4);
    border-radius: 8px; padding: 10px 8px; width: 120px; cursor: pointer;
    animation: gyRevealCard .5s ease both;
    box-shadow: 0 0 15px rgba(139,105,20,.15);
  }
  .gy-reveal-card:nth-child(2) { animation-delay: .15s; }
  .gy-reveal-card:nth-child(3) { animation-delay: .30s; }
  @keyframes gyRevealCard { from { transform: scale(.7) rotateY(90deg); opacity: 0; } to { transform: scale(1) rotateY(0); opacity: 1; } }

  .gy-reveal-new {
    border-color: rgba(34,211,238,.6) !important;
    background: rgba(34,211,238,.08) !important;
    box-shadow: 0 0 20px rgba(34,211,238,.2) !important;
  }

  .gy-reveal-img { width: 65px; height: 65px; object-fit: contain; border-radius: 4px; }
  .gy-reveal-name { font-size: .6rem; font-weight: 700; color: #e2e8f0; text-align: center; min-height: 24px; }
  .gy-reveal-stats { font-size: .55rem; color: #94a3b8; }
  .gy-reveal-type { font-size: .45rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; margin-top: 1px; }
  .gy-reveal-type.spell-type { background: rgba(99,102,241,.3); color: #a5b4fc; }
  .gy-reveal-type.trap-type  { background: rgba(168,85,247,.3); color: #c4b5fd; }

  /* ── Bonus rare card section ── */
  .gy-bonus-reveal-btn {
    margin: 12px auto; display: block;
    padding: 10px 28px; border-radius: 8px;
    border: 2px solid #facc15;
    cursor: pointer; font-size: .9rem; font-weight: 900; color: #0f172a;
    background: linear-gradient(135deg, #facc15, #f59e0b, #facc15);
    background-size: 200% 100%;
    animation: gyBonusBtnShine 2s linear infinite;
    box-shadow: 0 0 25px rgba(250,204,21,.4);
    transition: all .2s;
  }
  .gy-bonus-reveal-btn:hover { transform: scale(1.08); box-shadow: 0 0 40px rgba(250,204,21,.6); }
  @keyframes gyBonusBtnShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .gy-bonus-section {
    margin: 12px 0; animation: gyBonusIn .8s cubic-bezier(.175,.885,.32,1.275) both;
  }
  @keyframes gyBonusIn {
    from { transform: scale(.3) rotateZ(-10deg); opacity: 0; }
    to { transform: scale(1) rotateZ(0); opacity: 1; }
  }
  .gy-bonus-title {
    font-size: 1rem; font-weight: 900; color: #facc15;
    text-shadow: 0 0 20px rgba(250,204,21,.7);
    margin-bottom: 10px; letter-spacing: 2px;
  }
  .gy-bonus-card {
    position: relative;
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    background: linear-gradient(135deg, rgba(250,204,21,.15), rgba(245,158,11,.1));
    border: 2px solid rgba(250,204,21,.6);
    border-radius: 12px; padding: 16px 20px;
    box-shadow: 0 0 35px rgba(250,204,21,.25);
    animation: gyBonusGlow 2s ease infinite;
  }
  @keyframes gyBonusGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(250,204,21,.25); }
    50% { box-shadow: 0 0 50px rgba(250,204,21,.5), 0 0 80px rgba(250,204,21,.2); }
  }
  .gy-bonus-img { width: 90px; height: 90px; object-fit: contain; border-radius: 6px; }
  .gy-bonus-name { font-size: .75rem; font-weight: 800; color: #facc15; text-shadow: 0 0 8px rgba(250,204,21,.5); }
  .gy-bonus-stats { font-size: .65rem; color: #e2e8f0; }

  /* OK button */
  .gy-ok-btn {
    margin-top: 16px;
    padding: 12px 32px; border-radius: 8px; border: 2px solid #8b6914;
    cursor: pointer; font-size: .95rem; font-weight: 800; color: #e8d882;
    background: linear-gradient(180deg, #2a4a2a, #1a3a1a);
    box-shadow: 0 0 15px rgba(74,222,128,.2);
    transition: all .2s;
  }
  .gy-ok-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(74,222,128,.4); color: #4ade80; }

  /* Reward modal mobile responsiveness */
  @media (max-height: 500px) {
    .reward-overlay { align-items: flex-start; }
    .gy-slot-machine { max-width: 95vw; padding-bottom: 12px; }
    .gy-slot-title { font-size: .8rem; letter-spacing: 1px; }
    .gy-slot-title-bar { padding: 6px 10px; }
    .gy-slot-body { padding: 8px 4px 6px; }
    .gy-reel-cell { height: 60px; }
    .gy-reel-img { width: 85%; height: 85%; }
    .gy-stop-btn { margin-top: 8px; padding: 8px 20px; font-size: .75rem; }
    .gy-reveal-cards { gap: 6px; flex-wrap: wrap; }
    .gy-reveal-card { width: 90px; padding: 6px 4px; }
    .gy-reveal-img { width: 50px; height: 50px; }
    .gy-reveal-title { font-size: .9rem; margin-bottom: 8px; }
    .gy-ok-btn { margin-top: 8px; padding: 8px 20px; font-size: .8rem; }
    .gy-bonus-card { padding: 8px 12px; }
    .gy-bonus-img { width: 60px; height: 60px; }
    .gy-reveal-section { padding: 10px 10px 0; }
  }
  @media (max-width: 400px) {
    .gy-slot-machine { width: 100%; border-radius: 8px; }
    .gy-slot-title { font-size: .75rem; }
    .gy-reel-cell { height: 70px; }
    .gy-reveal-card { width: 85px; padding: 6px 4px; }
    .gy-reveal-img { width: 50px; height: 50px; }
    .gy-reveal-name { font-size: .5rem; }
    .gy-stop-btn { padding: 8px 16px; font-size: .75rem; }
    .gy-ok-btn { padding: 8px 16px; font-size: .75rem; }
  }

  /* NEW! badges */
  .slot-new-badge {
    position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #22d3ee, #3b82f6);
    color: #fff; font-size: .45rem; font-weight: 900; padding: 2px 6px;
    border-radius: 6px; white-space: nowrap; z-index: 5;
    box-shadow: 0 0 10px rgba(34,211,238,.6);
    animation: newBadgePulse 1s ease infinite;
  }
  .slot-new-badge-reveal {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    color: #fff; font-size: .55rem; font-weight: 900; padding: 2px 10px;
    border-radius: 8px; white-space: nowrap; z-index: 5;
    box-shadow: 0 0 14px rgba(34,211,238,.7);
    animation: newBadgePulse 1s ease infinite;
    letter-spacing: .5px;
  }
  @keyframes newBadgePulse {
    0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 10px rgba(34,211,238,.6); }
    50% { transform: translateX(-50%) scale(1.1); box-shadow: 0 0 20px rgba(99,102,241,.9); }
  }
  .player-info { position: relative; overflow: visible; }

  .lp-floater {
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 100;
    animation: lpFloatUp 1.4s ease-out forwards;
  }
  .lp-floater-dmg {
    font-size: 1.4rem; font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 8px rgba(239,68,68,.9), 0 0 20px rgba(239,68,68,.5), 0 2px 4px rgba(0,0,0,.8);
    letter-spacing: 1px;
  }
  @keyframes lpFloatUp {
    0%   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.3); }
    20%  { opacity: 1; transform: translateX(-50%) translateY(-12px) scale(1.5); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(.8); }
  }

  /* Shake effect on LP damage */
  .lp-shake {
    animation: lpShake .5s ease;
  }
  @keyframes lpShake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(5px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    90%  { transform: translateX(1px); }
    100% { transform: translateX(0); }
  }
  /* Red flash overlay on damage */
  .lp-shake::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: rgba(239,68,68,.2);
    animation: lpFlash .5s ease forwards;
    pointer-events: none;
  }
  @keyframes lpFlash {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }