body.battle-mode .battle-top {
      grid-template-columns: 300px minmax(260px, 1fr) 236px !important;
      min-height: 58px !important;
      padding: 4px 22px !important;
      background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(10,8,5,.68)) !important;
    }

    body.battle-mode .battle-stage-v3 {
      grid-template-columns: minmax(0, 1fr) 330px !important;
      gap: 10px !important;
      padding: 5px 18px 0 !important;
      min-height: 0 !important;
    }

    body.battle-mode .battlefield-v3 {
      border-color: rgba(226,168,70,.62) !important;
      background:
        linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.16) 58%, rgba(0,0,0,.44)),
        var(--battle-bg, url("../backgrounds/bg_plains_ruins.png")) center bottom / cover no-repeat !important;
    }

    body.battle-mode .battlefield-v3 .duel-unit.player-unit {
      left: 16% !important;
      bottom: 14% !important;
    }

    body.battle-mode .battlefield-v3 .duel-unit.enemy-unit {
      right: 20% !important;
      bottom: 14% !important;
    }

    body.battle-mode .battlefield-v3 .unit-sprite {
      max-width: 292px !important;
      max-height: 232px !important;
      filter: drop-shadow(0 18px 0 rgba(0,0,0,.26)) !important;
    }

    body.battle-mode .battle-hud {
      width: 310px !important;
      max-width: 310px !important;
    }

    body.battle-mode .battle-hud-player {
      left: 22px !important;
      bottom: 22px !important;
    }

    body.battle-mode .battle-hud-enemy {
      right: 24px !important;
      top: 20px !important;
    }

    body.battle-mode .fighter-card {
      border: 1px solid rgba(228,169,70,.66) !important;
      background: linear-gradient(180deg, rgba(17,30,29,.92), rgba(6,8,8,.96)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,225,135,.13), 0 12px 28px rgba(0,0,0,.42) !important;
    }

    body.battle-mode .battle-hud-enemy .fighter-card {
      background: linear-gradient(180deg, rgba(55,25,18,.92), rgba(9,7,6,.96)) !important;
    }

    body.battle-mode .log-panel-v3 {
      width: 330px !important;
      border: 1px solid rgba(229,170,70,.66) !important;
      background: linear-gradient(180deg, rgba(10,15,16,.94), rgba(4,5,5,.98)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,225,135,.12), inset 0 0 42px rgba(0,0,0,.6) !important;
    }

    body.battle-mode .log-panel-v3 .tabs {
      padding: 12px 14px 8px !important;
      border-bottom: 1px solid rgba(225,165,62,.3) !important;
    }

    body.battle-mode .log-panel-v3 h3 {
      color: #ffe5a0 !important;
      font-size: 20px !important;
      text-shadow: 0 2px 6px #000 !important;
    }

    body.battle-mode .log-list {
      padding: 12px 14px 18px !important;
      scrollbar-width: thin;
      scrollbar-color: rgba(218,159,58,.55) rgba(0,0,0,.25);
    }

    body.battle-mode #battleLog > * {
      margin: 0 0 10px !important;
      padding: 9px 10px 9px 14px !important;
      border-left: 2px solid rgba(238,182,76,.7) !important;
      background: linear-gradient(90deg, rgba(221,160,57,.12), rgba(0,0,0,.08)) !important;
      color: #ead8aa !important;
      line-height: 1.45 !important;
    }

    body.battle-mode #battleLog > *::before {
      content: "" !important;
      display: inline-block !important;
      width: 7px !important;
      height: 7px !important;
      margin-right: 8px !important;
      border-radius: 50% !important;
      background: #e6b45d !important;
      box-shadow: 0 0 8px rgba(230,180,93,.45) !important;
      vertical-align: 1px !important;
    }

    body.battle-mode #toggleLogBtn {
      min-height: 38px !important;
      padding: 8px 14px !important;
      border: 1px solid rgba(223,168,70,.58) !important;
      background: linear-gradient(180deg, rgba(77,55,24,.92), rgba(23,18,12,.95)) !important;
      color: #ffe1a1 !important;
      box-shadow: inset 0 0 0 1px rgba(255,231,155,.12) !important;
    }

    body.battle-mode .hand-dock-v3 {
      grid-template-columns: 180px minmax(0, 1fr) 520px !important;
      height: 366px !important;
      min-height: 366px !important;
      margin-top: -34px !important;
      padding: 18px 18px 14px !important;
      gap: 10px !important;
      position: relative !important;
      z-index: 30 !important;
      border-top: 1px solid rgba(225,171,72,.5) !important;
      border-bottom: 1px solid rgba(92,67,31,.75) !important;
      background:
        radial-gradient(circle at 50% -18%, rgba(196,139,48,.18), rgba(0,0,0,0) 42%),
        repeating-linear-gradient(90deg, rgba(255,220,126,.025) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, rgba(8,9,9,.98) 0%, rgba(3,4,4,.985) 42%, rgba(0,1,1,.99) 100%) !important;
      box-shadow: inset 0 1px 0 rgba(255,221,123,.2), inset 0 18px 34px rgba(0,0,0,.28), 0 -22px 46px rgba(0,0,0,.34) !important;
      backdrop-filter: none !important;
    }

    body.battle-mode .hand-command-strip {
      display: grid !important;
      grid-template-rows: auto auto !important;
      align-items: center !important;
      justify-items: center !important;
      align-content: center !important;
      padding: 10px 8px !important;
      border: 1px solid rgba(226,168,70,.42) !important;
      background: linear-gradient(180deg, rgba(15,20,20,.52), rgba(4,5,5,.82)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,225,135,.1) !important;
    }

    body.battle-mode #endTurnBtn,
    body.battle-mode .hand-command-strip #endTurnBtn {
      order: 1 !important;
      width: 166px !important;
      height: 166px !important;
      min-width: 166px !important;
      background: url("../ui/sprites/endTurnCircle.png") center / contain no-repeat !important;
      color: #fff1bd !important;
      font-size: 23px !important;
      font-weight: 900 !important;
      text-shadow: 0 2px 8px #000, 0 0 14px rgba(255,196,82,.75) !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    body.battle-mode .deck-counters {
      order: 2 !important;
      width: 100% !important;
      justify-content: center !important;
      align-self: start !important;
    }

    body.battle-mode .deck-counters .energy-badge {
      width: 150px !important;
      text-align: center !important;
      padding: 6px 10px !important;
      border: 1px solid rgba(248,214,99,.64) !important;
      background: rgba(0,0,0,.58) !important;
      color: #ffe36f !important;
      font-size: 24px !important;
      font-weight: 900 !important;
      text-shadow: 0 2px 5px #000 !important;
    }

    body.battle-mode .hand-dock-v3 .hand-row {
      height: 342px !important;
      min-height: 342px !important;
      padding: 4px 0 0 !important;
      gap: 6px !important;
      justify-content: center !important;
      align-items: end !important;
      overflow: visible !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.battle-mode .hand-dock-v3 .card,
    body.battle-mode .played-card-stage .card {
      width: 210px !important;
      flex: 0 0 210px !important;
      height: 340px !important;
      min-height: 340px !important;
      max-height: 340px !important;
      grid-template-rows: 38px 24px 148px 70px !important;
      gap: 6px !important;
      padding: 16px 15px 10px !important;
      overflow: hidden !important;
      background-color: rgba(28,21,12,.94) !important;
      border-color: rgba(255,213,106,.56) !important;
      box-shadow:
        inset 0 0 0 2px rgba(0,0,0,.36),
        inset 0 0 0 3px rgba(255,226,142,.14),
        0 10px 0 rgba(0,0,0,.22),
        0 18px 30px rgba(0,0,0,.48) !important;
    }

    body.battle-mode .played-card-stage .card {
      filter: drop-shadow(0 0 22px var(--elm-glow, transparent)) !important;
    }

    /* Played card – larger art, tighter art↔desc gap */
    body.battle-mode .played-card-stage .card {
      height: 358px !important;
      min-height: 358px !important;
      max-height: 358px !important;
      grid-template-rows: 38px 24px 190px 70px !important;
      gap: 3px !important;
    }
    body.battle-mode .played-card-stage .card-art {
      height: 190px !important;
      min-height: 190px !important;
    }
    body.battle-mode .played-card-stage .card-desc {
      margin-top: 2px !important;
    }

    body.battle-mode .hand-dock-v3 .card:hover,
    body.battle-mode .hand-dock-v3 .card:focus,
    body.battle-mode .hand-dock-v3 .card.selected {
      transform: translateY(-10px) !important;
      z-index: 20 !important;
      outline: 0 !important;
      border-color: rgba(255,207,86,.72) !important;
      box-shadow: 0 20px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,210,92,.32) !important;
    }

    body.battle-mode .hand-dock-v3 .card-top {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      min-height: 38px !important;
      padding: 3px 22px 2px !important;
      align-items: center !important;
      background: linear-gradient(180deg, rgba(8,9,9,.18), rgba(9,7,4,.06) 74%, rgba(0,0,0,0)) !important;
      border: 0 !important;
      box-shadow: inset 0 -1px 0 rgba(229,170,70,.24) !important;
    }
    body.battle-mode .played-card-stage .card-top {
      position: relative !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      min-height: 38px !important;
      padding: 3px 22px 2px !important;
      align-items: center !important;
      background: linear-gradient(180deg, rgba(8,9,9,.35), rgba(9,7,4,.12) 74%, rgba(0,0,0,0)) !important;
      border: 0 !important;
      box-shadow: inset 0 -1px 0 rgba(229,170,70,.24) !important;
    }

    body.battle-mode .hand-dock-v3 .card-name {
      position: relative !important;
      z-index: 10 !important;
      font-size: 17px !important;
      line-height: 1.12 !important;
      text-align: center !important;
      color: #ffedbd !important;
      text-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
    }
    body.battle-mode .played-card-stage .card-name {
      font-size: 17px !important;
      line-height: 1.12 !important;
      text-align: center !important;
      color: #ffedbd !important;
      text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
    }

    body.battle-mode .hand-dock-v3 .card-cost,
    body.battle-mode .played-card-stage .card-cost {
      position: absolute !important;
      left: -3px !important;
      top: -4px !important;
      width: 52px !important;
      height: 56px !important;
      min-width: 52px !important;
      margin: 0 !important;
      padding: 0 !important;
      display: block !important;
      z-index: 8 !important;
      background: var(--cost-sprite-img) center / contain no-repeat !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      color: transparent !important;
      font-size: 0 !important;
      line-height: 0 !important;
      text-indent: -9999px !important;
      overflow: hidden !important;
      text-shadow: none !important;
      transform: none !important;
    }

    body.battle-mode .hand-dock-v3 .card-art,
    body.battle-mode .played-card-stage .card-art {
      height: 140px !important;
      min-height: 140px !important;
      background-size: var(--atlas-art-size, cover) !important;
      background-position: var(--atlas-art-position, center) !important;
      background-repeat: no-repeat !important;
      border: 0 !important;
      outline: 0 !important;
      display: grid !important;
      place-items: center !important;
      position: relative !important;
      background-image: var(--atlas-art-image, none) !important;
      background-color: transparent !important;
      box-shadow: inset 0 0 0 1px rgba(229,170,70,.16) !important;
    }

    /* Played card art: override the combined rule above so played card gets larger art */
    body.battle-mode .played-card-stage .card-art {
      height: 190px !important;
      min-height: 190px !important;
    }

    /* v2 portrait art: taller card + grid to fit 130x170 v2 art without overflow */
    body.battle-mode .hand-dock-v3 .card {
      min-height: 324px !important;
      height: 324px !important;
      grid-template-rows: auto auto 144px 1fr auto !important;
    }
    /* v2 portrait images use contain to show full art without cropping */
    body.battle-mode .hand-dock-v3 .card-art[style*="--atlas-art-size:cover"],
    body.battle-mode .played-card-stage .card-art[style*="--atlas-art-size:cover"] {
      background-size: contain !important;
    }
    body.battle-mode .preview-art-box[style*="--atlas-art-size:cover"] {
      background-size: contain !important;
    }

    /* ════════════════════════════════════════════════════════════════
       Card name & description tier colors
       ════════════════════════════════════════════════════════════════ */
    /* Base cards – warm platinum */
    body.battle-mode .hand-dock-v3 .card-tier-basic .card-name {
      color: #fff0bf !important;
      text-shadow: 0 1px 3px rgba(80,60,20,.3) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-basic .card-desc {
      color: #e8d9aa !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="basic"] {
      color: #ffe8a9 !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="basic"] {
      color: #e8d9aa !important;
    }

    /* Normal skill Ⅰ–Ⅱ – cool silver-blue */
    body.battle-mode .hand-dock-v3 .card-tier-normal-low .card-name {
      color: #d7e8ff !important;
      text-shadow: 0 1px 3px rgba(40,80,140,.15) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-normal-low .card-desc {
      color: #c8d8e8 !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="normal-low"] {
      color: #d7e8ff !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="normal-low"] {
      color: #c8d8e8 !important;
    }

    /* Normal skill Ⅲ–Ⅳ – cool cyan-blue */
    body.battle-mode .hand-dock-v3 .card-tier-normal-mid .card-name {
      color: #bff3ff !important;
      text-shadow: 0 1px 4px rgba(40,180,220,.2) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-normal-mid .card-desc {
      color: #b7dde6 !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="normal-mid"] {
      color: #bff3ff !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="normal-mid"] {
      color: #b7dde6 !important;
    }

    /* Normal skill Ⅴ–Ⅵ – silver-violet */
    body.battle-mode .hand-dock-v3 .card-tier-normal-high .card-name {
      color: #d8c4ff !important;
      text-shadow: 0 1px 4px rgba(130,60,220,.18) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-normal-high .card-desc {
      color: #c9b7ee !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="normal-high"] {
      color: #d8c4ff !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="normal-high"] {
      color: #c9b7ee !important;
    }

    /* Normal skill Ⅶ–Ⅷ – star-blue-violet static glow */
    body.battle-mode .hand-dock-v3 .card-tier-normal-elite .card-name {
      color: #b8a7ff !important;
      text-shadow: 0 0 8px rgba(120,80,255,.32), 0 1px 5px rgba(80,40,200,.18) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-normal-elite .card-desc {
      color: #c6bfff !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="normal-elite"] {
      color: #b8a7ff !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="normal-elite"] {
      color: #c6bfff !important;
    }

    /* Advanced skill ★Ⅰ – gold */
    body.battle-mode .hand-dock-v3 .card-tier-star-1 .card-name {
      color: #ffd76a !important;
      text-shadow: 0 0 7px rgba(255,200,60,.25), 0 1px 5px rgba(180,120,20,.16) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-star-1 .card-desc {
      color: #ffe1a3 !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="star-1"] {
      color: #ffd76a !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="star-1"] {
      color: #ffe1a3 !important;
    }

    /* Advanced skill ★Ⅱ – warm orange-gold */
    body.battle-mode .hand-dock-v3 .card-tier-star-2 .card-name {
      color: #ffbd5c !important;
      text-shadow: 0 0 9px rgba(255,180,50,.3), 0 1px 5px rgba(180,100,20,.18) !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-star-2 .card-desc {
      color: #ffd39a !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="star-2"] {
      color: #ffbd5c !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="star-2"] {
      color: #ffd39a !important;
    }

    /* Advanced skill ★Ⅲ – deep orange-gold shimmer (8s) */
    body.battle-mode .hand-dock-v3 .card-tier-star-3 .card-name {
      background: linear-gradient(135deg, #ff9b4a 35%, #ffcc7a 50%, #ff9b4a 65%) !important;
      background-size: 200% 100% !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: 0 0 6px rgba(255,155,74,.35), 0 1px 2px rgba(0,0,0,.22) !important;
      animation: tierNameShimmer 8s ease-in-out infinite !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-star-3 .card-desc {
      color: #ffc37a !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="star-3"] {
      color: #ff9b4a !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="star-3"] {
      color: #ffc37a !important;
    }

    /* Special advanced skill ♛ – gold-violet gradient flow (10s) */
    body.battle-mode .hand-dock-v3 .card-tier-crown .card-name {
      background: linear-gradient(135deg, #ffd76a 25%, #e8a0ff 50%, #ffd76a 75%) !important;
      background-size: 200% 100% !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: 0 0 8px rgba(232,160,255,.28), 0 0 3px rgba(255,215,106,.2), 0 1px 2px rgba(0,0,0,.22) !important;
      animation: tierCrownFlow 10s ease-in-out infinite !important;
    }
    body.battle-mode .hand-dock-v3 .card-tier-crown .card-desc {
      color: #ffe6a6 !important;
    }
    body.battle-mode .preview-card-title[data-visual-tier="crown"] {
      color: #e8a0ff !important;
    }
    body.battle-mode .preview-card-desc[data-visual-tier="crown"] {
      color: #ffe6a6 !important;
    }

    /* ════════════════════════════════════════════════════════════════
       Played card tier styles — static colors matching hand tiers
       ════════════════════════════════════════════════════════════════ */
    body.battle-mode .played-card-stage .card-tier-basic .card-name {
      color: #fff0bf !important;
    }
    body.battle-mode .played-card-stage .card-tier-normal-low .card-name {
      color: #d7e8ff !important;
    }
    body.battle-mode .played-card-stage .card-tier-normal-mid .card-name {
      color: #bff3ff !important;
    }
    body.battle-mode .played-card-stage .card-tier-normal-high .card-name {
      color: #d8c4ff !important;
    }
    body.battle-mode .played-card-stage .card-tier-normal-elite .card-name {
      color: #b8a7ff !important;
      text-shadow: 0 0 8px rgba(120,80,255,.32) !important;
    }
    body.battle-mode .played-card-stage .card-tier-star-1 .card-name {
      color: #ffd76a !important;
      text-shadow: 0 0 7px rgba(255,200,60,.25) !important;
    }
    body.battle-mode .played-card-stage .card-tier-star-2 .card-name {
      color: #ffbd5c !important;
      text-shadow: 0 0 9px rgba(255,180,50,.3) !important;
    }
    body.battle-mode .played-card-stage .card-tier-star-3 .card-name {
      background: linear-gradient(135deg, #ff9b4a 35%, #ffcc7a 50%, #ff9b4a 65%) !important;
      background-size: 200% 100% !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: 0 0 6px rgba(255,155,74,.3), 0 1px 2px rgba(0,0,0,.22) !important;
    }
    body.battle-mode .played-card-stage .card-tier-crown .card-name {
      background: linear-gradient(135deg, #ffd76a 25%, #e8a0ff 50%, #ffd76a 75%) !important;
      background-size: 200% 100% !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      text-shadow: 0 0 8px rgba(232,160,255,.28), 0 0 3px rgba(255,215,106,.2), 0 1px 2px rgba(0,0,0,.22) !important;
    }

    @keyframes tierNameShimmer {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }
    @keyframes tierCrownFlow {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    body.battle-mode .hand-dock-v3 .card-art::before,
    body.battle-mode .played-card-stage .card-art::before {
      content: "" !important;
      position: absolute !important;
      inset: 12px !important;
      border-radius: 50% !important;
      background: radial-gradient(circle, rgba(255,228,149,.13), rgba(0,0,0,0) 66%) !important;
      pointer-events: none !important;
    }

    body.battle-mode .hand-dock-v3 .card-icon,
    body.battle-mode .played-card-stage .card-icon {
      width: 108px !important;
      height: 108px !important;
      object-fit: contain !important;
      display: block !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      opacity: 1 !important;
      position: relative !important;
      z-index: 2 !important;
    }

    body.battle-mode .hand-dock-v3 .card-art > img.card-icon,
    body.battle-mode .played-card-stage .card-art > img.card-icon {
      display: none !important;
    }



    @keyframes elmParticleFloat {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: .25; }
      20% { transform: translate(4px, -5px) scale(1.1); opacity: .45; }
      40% { transform: translate(-3px, -10px) scale(0.9); opacity: .3; }
      60% { transform: translate(5px, -4px) scale(1.15); opacity: .5; }
      80% { transform: translate(-2px, -7px) scale(1.05); opacity: .35; }
    }



    @keyframes elmCardPlayed {
      0% { transform: scale(1.5); opacity: 0; }
      12% { transform: scale(1); opacity: .95; }
      25% { transform: scale(1.08); opacity: .85; }
      45% { transform: scale(1); opacity: .7; }
      70% { transform: scale(1.02); opacity: .55; }
      100% { transform: scale(1); opacity: .35; }
    }


    body.battle-mode .hand-dock-v3 .card[data-element="火"],
    body.battle-mode .played-card-stage .card[data-element="火"] { --elm-p1: #ff6a33; --elm-p2: #e8451a; --elm-glow: rgba(255,106,51,.35); }
    body.battle-mode .hand-dock-v3 .card[data-element="冰"],
    body.battle-mode .played-card-stage .card[data-element="冰"] { --elm-p1: #4fc3f7; --elm-p2: #29b6f6; --elm-glow: rgba(79,195,247,.3); }
    body.battle-mode .hand-dock-v3 .card[data-element="风"],
    body.battle-mode .played-card-stage .card[data-element="风"] { --elm-p1: #4db6ac; --elm-p2: #26a69a; --elm-glow: rgba(77,182,172,.3); }
    body.battle-mode .hand-dock-v3 .card[data-element="土"],
    body.battle-mode .played-card-stage .card[data-element="土"] { --elm-p1: #d4a017; --elm-p2: #b8860b; --elm-glow: rgba(212,160,23,.3); }
    body.battle-mode .hand-dock-v3 .card[data-element="雷"],
    body.battle-mode .played-card-stage .card[data-element="雷"] { --elm-p1: #b388ff; --elm-p2: #7c4dff; --elm-glow: rgba(179,136,255,.3); }
    body.battle-mode .hand-dock-v3 .card[data-element="光"],
    body.battle-mode .played-card-stage .card[data-element="光"] { --elm-p1: #ffd54f; --elm-p2: #ffca28; --elm-glow: rgba(255,213,79,.35); }
    body.battle-mode .hand-dock-v3 .card[data-element="暗"],
    body.battle-mode .played-card-stage .card[data-element="暗"] { --elm-p1: #ce93d8; --elm-p2: #ab47bc; --elm-glow: rgba(206,147,216,.25); }
    body.battle-mode .hand-dock-v3 .card[data-element="无"],
    body.battle-mode .played-card-stage .card[data-element="无"] { --elm-p1: rgba(210,220,230,.75); --elm-p2: rgba(150,165,180,.55); --elm-glow: rgba(190,205,220,.35); }

    body.battle-mode .hand-dock-v3 .card-art::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      pointer-events: none !important;
      z-index: 1 !important;
      border-radius: 0 !important;
      background:
        radial-gradient(circle at 22% 28%, var(--elm-glow, rgba(255,226,143,.12)) 0, transparent 6px),
        radial-gradient(circle at 72% 20%, var(--elm-p1, rgba(255,226,143,.18)) 0, transparent 5px),
        radial-gradient(circle at 35% 75%, var(--elm-p2, rgba(255,226,143,.15)) 0, transparent 5px),
        radial-gradient(circle at 80% 65%, var(--elm-glow, rgba(255,226,143,.1)) 0, transparent 4px),
        radial-gradient(circle at 15% 80%, var(--elm-p1, rgba(255,226,143,.1)) 0, transparent 4px) !important;
      background-repeat: no-repeat !important;
      animation: elmParticleFloat 7s ease-in-out infinite !important;
      opacity: .65 !important;
      mix-blend-mode: screen !important;
    }

    body.battle-mode .hand-dock-v3 .card:hover .card-art::after,
    body.battle-mode .hand-dock-v3 .card.selected .card-art::after {
      opacity: .95 !important;
      animation-duration: 4s !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="enhanced"] {
      border-color: rgba(255, 214, 120, .58) !important;
      box-shadow: inset 0 0 0 1px rgba(255,238,174,.12), 0 0 16px var(--elm-glow, rgba(255,220,126,.16)) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="enhanced"] .card-cost {
      filter: drop-shadow(0 0 5px rgba(255, 220, 130, .42)) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="strong"] {
      border-color: rgba(255, 205, 91, .78) !important;
      box-shadow: inset 0 0 0 1px rgba(255,242,176,.18), 0 0 22px var(--elm-glow, rgba(255,205,91,.24)) !important;
      filter: brightness(1.06) saturate(1.1) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="strong"] .card-art::after {
      opacity: .9 !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"] {
      border-color: rgba(255, 218, 112, .95) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,246,198,.22),
        0 0 28px var(--elm-glow, rgba(255,218,112,.32)),
        0 0 46px rgba(255,196,76,.16) !important;
      filter: brightness(1.1) saturate(1.16) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"]::after {
      content: "" !important;
      position: absolute !important;
      inset: -2px !important;
      border-radius: 7px !important;
      pointer-events: none !important;
      background: linear-gradient(115deg, transparent 0 28%, rgba(255,224,132,.34) 45%, transparent 62% 100%) !important;
      opacity: .46 !important;
      mix-blend-mode: screen !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] {
      border-color: rgba(255, 242, 180, .98) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,248,202,.34),
        0 0 34px rgba(255,226,132,.44),
        0 0 58px var(--elm-glow, rgba(255,226,132,.32)) !important;
      filter: brightness(1.14) saturate(1.24) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"]::after {
      content: "" !important;
      position: absolute !important;
      inset: -5px !important;
      border-radius: 9px !important;
      pointer-events: none !important;
      border: 1px solid rgba(255,241,174,.5) !important;
      box-shadow: 0 0 24px rgba(255,222,118,.5), 0 0 38px var(--elm-glow, rgba(255,222,118,.28)) !important;
      opacity: .9 !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-cost {
      filter: drop-shadow(0 0 9px rgba(255,232,141,.82)) brightness(1.12) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-art::after {
      opacity: 1 !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,236,154,.24) 0, transparent 48%),
        radial-gradient(circle at 22% 28%, var(--elm-glow, rgba(255,226,143,.22)) 0, transparent 10px),
        radial-gradient(circle at 72% 20%, var(--elm-p1, rgba(255,226,143,.28)) 0, transparent 8px),
        radial-gradient(circle at 35% 75%, var(--elm-p2, rgba(255,226,143,.22)) 0, transparent 8px),
        radial-gradient(circle at 80% 65%, rgba(255,230,150,.2) 0, transparent 7px) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"] {
      border-color: rgba(255, 231, 142, 1) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,250,214,.34),
        inset 0 0 18px var(--elm-glow, rgba(255,218,112,.34)),
        0 0 0 1px rgba(255,225,132,.4),
        0 0 26px var(--elm-glow, rgba(255,218,112,.42)),
        0 0 54px rgba(255,198,76,.22),
        0 14px 28px rgba(0,0,0,.38) !important;
      animation: advancedHandFlow 3.8s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"]::after {
      inset: -3px !important;
      border-radius: 8px !important;
      background:
        linear-gradient(115deg, transparent 0 20%, rgba(255,238,164,.48) 42%, transparent 62% 100%),
        linear-gradient(45deg, transparent, var(--elm-glow, rgba(255,218,112,.24)), transparent) !important;
      opacity: .78 !important;
      animation: advancedBorderSweep 2.8s linear infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"] .card-cost {
      filter: drop-shadow(0 0 8px rgba(255,231,142,.9)) brightness(1.2) saturate(1.18) !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="advanced"] .card-art::after {
      opacity: 1 !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,238,170,.18) 0, transparent 42%),
        radial-gradient(circle at 14% 25%, var(--elm-p1, rgba(255,226,143,.42)) 0, transparent 9px),
        radial-gradient(circle at 82% 18%, var(--elm-p2, rgba(255,226,143,.36)) 0, transparent 8px),
        radial-gradient(circle at 32% 78%, var(--elm-glow, rgba(255,226,143,.35)) 0, transparent 8px),
        radial-gradient(circle at 73% 72%, rgba(255,246,190,.3) 0, transparent 7px),
        radial-gradient(circle at 48% 18%, var(--elm-p1, rgba(255,226,143,.28)) 0, transparent 5px) !important;
      animation: elmParticleFloat 3.8s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] {
      border-color: rgba(255, 247, 196, 1) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,252,226,.52),
        inset 0 0 24px rgba(255,235,148,.26),
        0 0 0 2px rgba(255,235,148,.48),
        0 0 34px rgba(255,229,137,.62),
        0 0 72px var(--elm-glow, rgba(255,226,132,.45)),
        0 16px 32px rgba(0,0,0,.42) !important;
      animation: ultimateHandPulse 2.4s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"]::after {
      inset: -7px !important;
      border-radius: 10px !important;
      border: 2px solid rgba(255,244,185,.72) !important;
      background:
        linear-gradient(120deg, transparent 0 18%, rgba(255,251,210,.58) 38%, transparent 58% 100%),
        conic-gradient(from 0deg, transparent, rgba(255,236,150,.34), transparent, var(--elm-glow, rgba(255,226,132,.26)), transparent) !important;
      box-shadow:
        0 0 28px rgba(255,236,150,.66),
        0 0 54px var(--elm-glow, rgba(255,226,132,.42)) !important;
      opacity: 1 !important;
      animation: ultimateBorderPulse 2.6s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-cost {
      filter: drop-shadow(0 0 12px rgba(255,244,181,1)) drop-shadow(0 0 20px var(--elm-glow, rgba(255,226,132,.62))) brightness(1.34) saturate(1.24) !important;
      animation: ultimateCostGleam 1.9s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-art::after {
      opacity: 1 !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,248,204,.34) 0, transparent 46%),
        radial-gradient(circle at 16% 20%, rgba(255,255,255,.5) 0, transparent 9px),
        radial-gradient(circle at 82% 16%, var(--elm-p1, rgba(255,226,143,.48)) 0, transparent 11px),
        radial-gradient(circle at 26% 76%, var(--elm-p2, rgba(255,226,143,.42)) 0, transparent 10px),
        radial-gradient(circle at 76% 74%, rgba(255,238,154,.42) 0, transparent 9px),
        radial-gradient(circle at 50% 18%, var(--elm-glow, rgba(255,226,143,.42)) 0, transparent 8px),
        radial-gradient(circle at 48% 84%, rgba(255,255,255,.35) 0, transparent 7px) !important;
      animation: elmParticleFloat 2.8s ease-in-out infinite !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-name,
    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-desc,
    body.battle-mode .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-power {
      text-shadow: 0 0 8px rgba(255,230,150,.28), 0 1px 2px rgba(0,0,0,.35) !important;
    }

    @keyframes advancedHandFlow {
      0%, 100% { filter: brightness(1.12) saturate(1.18); }
      50% { filter: brightness(1.2) saturate(1.3); }
    }

    @keyframes advancedBorderSweep {
      0% { background-position: -180px 0, 0 0; }
      100% { background-position: 180px 0, 0 0; }
    }

    @keyframes ultimateHandPulse {
      0%, 100% { filter: brightness(1.18) saturate(1.28); }
      50% { filter: brightness(1.32) saturate(1.42); }
    }

    @keyframes ultimateBorderPulse {
      0%, 100% { transform: scale(1); opacity: .86; }
      50% { transform: scale(1.025); opacity: 1; }
    }

    @keyframes ultimateCostGleam {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }

    /* ════════════════════════════════════════════════ */
    /* 8-9-10 Cost Hand Card Star-Ring Auras          */
    /* ════════════════════════════════════════════════ */

    /* Allow ring pseudo-elements to extend beyond card border */
    body.battle-mode .hand-dock-v3 .card[data-cost="8"],
    body.battle-mode .hand-dock-v3 .card[data-cost="9"],
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] {
      overflow: visible !important;
    }

    body.battle-mode .hand-dock-v3 .card[data-cost="8"] .card-cost {
      filter: drop-shadow(0 0 6px rgba(255,225,140,.6)) drop-shadow(0 0 12px var(--elm-glow, rgba(255,220,126,.35))) brightness(1.15) saturate(1.12) !important;
    }

    /* ── 9-cost: dual ring + stronger glow ── */
    body.battle-mode .hand-dock-v3 .card[data-cost="9"] {
      border-color: rgba(255, 240, 170, 1) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,250,214,.42),
        inset 0 0 22px var(--elm-glow, rgba(255,218,112,.42)),
        0 0 0 1px rgba(255,235,148,.5),
        0 0 36px var(--elm-glow, rgba(255,218,112,.55)),
        0 0 68px rgba(255,210,100,.3),
        0 16px 32px rgba(0,0,0,.42) !important;
      animation: starRing9CardPulse 3s ease-in-out infinite !important;
    }

    @keyframes starRing9CardPulse {
      0%, 100% { filter: brightness(1.14) saturate(1.22); }
      50% { filter: brightness(1.26) saturate(1.38); }
    }

    body.battle-mode .hand-dock-v3 .card[data-cost="9"] .card-cost {
      filter: drop-shadow(0 0 10px rgba(255,240,160,.95)) drop-shadow(0 0 18px var(--elm-glow, rgba(255,218,112,.55))) brightness(1.25) saturate(1.22) !important;
    }

    /* ── 10-cost: triple-layer ultimate star ring ── */
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] {
      border-color: rgba(255, 248, 206, 1) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255,252,232,.62),
        inset 0 0 28px rgba(255,238,160,.34),
        0 0 0 2px rgba(255,242,180,.55),
        0 0 40px rgba(255,236,150,.72),
        0 0 86px var(--elm-glow, rgba(255,226,132,.58)),
        0 0 130px rgba(255,210,80,.25),
        0 18px 36px rgba(0,0,0,.48) !important;
      animation: starRing10Pulse 2s ease-in-out infinite !important;
    }

    @keyframes starRing10Pulse {
      0%, 100% { filter: brightness(1.22) saturate(1.34); }
      50% { filter: brightness(1.42) saturate(1.52); }
    }

    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .card-cost {
      filter: drop-shadow(0 0 16px rgba(255,248,200,1)) drop-shadow(0 0 30px rgba(255,220,100,.82)) brightness(1.42) saturate(1.32) !important;
      animation: starRing10Cost 1.8s ease-in-out infinite !important;
    }

    @keyframes starRing10Cost {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.12); }
    }

    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .card-name,
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .card-desc,
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .card-power {
      text-shadow: 0 0 12px rgba(255,235,160,.42), 0 0 26px rgba(255,200,60,.2), 0 1px 2px rgba(0,0,0,.35) !important;
    }

    /* ════════════════════════════════════════════════ */
    /* True orbital star rings for high-cost hand cards */
    /* ════════════════════════════════════════════════ */

    /* Hide orbit system outside hand context — it breaks grid layout in played cards */
    body.battle-mode .card-orbit-system {
      display: none !important;
    }

    /* Orbit system container — only visible inside hand dock */
    body.battle-mode .hand-dock-v3 .card[data-cost="8"] .card-orbit-system,
    body.battle-mode .hand-dock-v3 .card[data-cost="9"] .card-orbit-system,
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .card-orbit-system {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      z-index: 0 !important;
      overflow: visible !important;
    }

    /* Common orbit span styling */
    body.battle-mode .hand-dock-v3 .card .orbit {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      pointer-events: none !important;
      border-radius: 50% !important;
      border-style: solid !important;
      box-sizing: border-box !important;
    }

    /* ── 8-cost: single elliptical orbit ring ── */
    body.battle-mode .hand-dock-v3 .card[data-cost="8"] .orbit-1 {
      width: 300px !important;
      height: 80px !important;
      margin-left: -150px !important;
      margin-top: -40px !important;
      border-width: 2px !important;
      border-color: var(--elm-p1, #ffe18a) !important;
      opacity: .5 !important;
      box-shadow: 0 0 8px var(--elm-p1, #ffe18a), 0 0 24px var(--elm-glow, rgba(255,225,138,.3)) !important;
      transform: rotate(-10deg) !important;
      animation: orbitSpin8 10s linear infinite !important;
    }

    @keyframes orbitSpin8 {
      to { transform: rotate(350deg); }
    }

    /* ── 9-cost: dual elliptical orbit rings ── */
    body.battle-mode .hand-dock-v3 .card[data-cost="9"] .orbit-1 {
      width: 310px !important;
      height: 85px !important;
      margin-left: -155px !important;
      margin-top: -42px !important;
      border-width: 2px !important;
      border-color: var(--elm-p1, #ffe18a) !important;
      opacity: .6 !important;
      box-shadow: 0 0 10px var(--elm-p1, #ffe18a), 0 0 30px var(--elm-glow, rgba(255,225,138,.4)) !important;
      transform: rotate(-8deg) !important;
      animation: orbitSpin9Inner 8s linear infinite !important;
    }

    @keyframes orbitSpin9Inner {
      to { transform: rotate(352deg); }
    }

    body.battle-mode .hand-dock-v3 .card[data-cost="9"] .orbit-2 {
      width: 330px !important;
      height: 100px !important;
      margin-left: -165px !important;
      margin-top: -50px !important;
      border-width: 2px !important;
      border-color: var(--elm-p2, #ff9f43) !important;
      opacity: .4 !important;
      box-shadow: 0 0 6px var(--elm-p2, #ff9f43), 0 0 20px var(--elm-glow, rgba(255,225,138,.25)) !important;
      transform: rotate(6deg) !important;
      animation: orbitSpin9Outer 12s linear infinite !important;
    }

    @keyframes orbitSpin9Outer {
      to { transform: rotate(366deg); }
    }

    /* ── 10-cost: triple-layer ultimate orbital system ── */
    /* Inner sacred glow ring */
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .orbit-1 {
      width: 280px !important;
      height: 70px !important;
      margin-left: -140px !important;
      margin-top: -35px !important;
      border-width: 1px !important;
      border-color: rgba(255,248,200,.7) !important;
      opacity: .7 !important;
      box-shadow:
        0 0 12px rgba(255,248,200,.6),
        0 0 30px rgba(255,215,0,.3),
        inset 0 0 16px rgba(255,248,200,.15) !important;
      transform: rotate(-5deg) !important;
      animation: orbitSpin10Inner 6s linear infinite !important;
    }

    @keyframes orbitSpin10Inner {
      to { transform: rotate(355deg); }
    }

    /* Mid element-colour primary ring */
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .orbit-2 {
      width: 320px !important;
      height: 95px !important;
      margin-left: -160px !important;
      margin-top: -47px !important;
      border-width: 3px !important;
      border-color: var(--elm-p1, #ffe18a) !important;
      opacity: .65 !important;
      box-shadow:
        0 0 14px var(--elm-p1, #ffe18a),
        0 0 36px var(--elm-glow, rgba(255,225,138,.5)) !important;
      transform: rotate(-12deg) !important;
      animation: orbitSpin10Mid 9s linear infinite !important;
    }

    @keyframes orbitSpin10Mid {
      to { transform: rotate(348deg); }
    }

    /* Outer gold ultimate ring */
    body.battle-mode .hand-dock-v3 .card[data-cost="10"] .orbit-3 {
      width: 360px !important;
      height: 120px !important;
      margin-left: -180px !important;
      margin-top: -60px !important;
      border-width: 2px !important;
      border-color: rgba(255,215,0,.6) !important;
      opacity: .5 !important;
      box-shadow:
        0 0 18px rgba(255,215,0,.5),
        0 0 40px rgba(255,200,50,.25),
        0 0 80px rgba(255,180,0,.12) !important;
      transform: rotate(8deg) !important;
      animation: orbitSpin10Outer 14s linear infinite reverse !important;
    }

    @keyframes orbitSpin10Outer {
      to { transform: rotate(368deg); }
    }

    body.battle-mode .played-card-stage .card-art::after {
      opacity: .9 !important;
      animation: elmCardPlayed 2.5s ease-out forwards !important;
      background:
        radial-gradient(circle at 22% 28%, var(--elm-glow, rgba(255,226,143,.18)) 0, transparent 8px),
        radial-gradient(circle at 72% 20%, var(--elm-p1, rgba(255,226,143,.22)) 0, transparent 6px),
        radial-gradient(circle at 35% 75%, var(--elm-p2, rgba(255,226,143,.18)) 0, transparent 6px),
        radial-gradient(circle at 80% 65%, var(--elm-glow, rgba(255,226,143,.14)) 0, transparent 5px),
        radial-gradient(circle at 15% 80%, var(--elm-p1, rgba(255,226,143,.12)) 0, transparent 5px),
        radial-gradient(circle at 50% 50%, var(--elm-glow, rgba(255,226,143,.1)) 0, transparent 45%) !important;
    }

    body.battle-mode .hand-dock-v3 .card-meta,
    body.battle-mode .played-card-stage .card-meta {
      min-height: 24px !important;
      padding: 2px 3px !important;
      background: transparent !important;
      border: 0 !important;
      overflow: hidden !important;
    }

    body.battle-mode .hand-dock-v3 .card-meta .pill,
    body.battle-mode .played-card-stage .card-meta .pill {
      background: linear-gradient(180deg, rgba(18,19,17,.82), rgba(5,6,6,.9)) !important;
      border: 1px solid rgba(255,220,126,.22) !important;
      color: rgba(255,239,194,.94) !important;
    }

    body.battle-mode .hand-dock-v3 .card-desc,
    body.battle-mode .played-card-stage .card-desc {
      min-height: 70px !important;
      max-height: 70px !important;
      padding: 6px 8px !important;
      font-size: 12px !important;
      line-height: 1.25 !important;
      color: #f3e1b5 !important;
      background: linear-gradient(180deg, rgba(4,5,5,.9), rgba(1,2,2,.94)) !important;
      border: 1px solid rgba(255,220,126,.24) !important;
      border-radius: 4px !important;
      overflow: hidden !important;
      display: flex !important;
      align-items: flex-start !important;
    }

    body.battle-mode .hand-dock-v3 .card-power,
    body.battle-mode .played-card-stage .card-power {
      min-height: 30px !important;
      max-height: 30px !important;
      font-size: 15px !important;
      font-weight: 900 !important;
      overflow: visible !important;
      margin-top: 0 !important;
      background: linear-gradient(180deg, rgba(117,78,24,.88), rgba(51,34,13,.92)) !important;
      border: 1px solid rgba(255,220,126,.42) !important;
      color: #fff1b6 !important;
      text-shadow: 0 2px 5px rgba(0,0,0,.8) !important;
    }

    body.battle-mode .card-preview-panel {
      height: 342px !important;
      max-height: 342px !important;
      padding: 14px 18px 18px !important;
      display: grid !important;
      grid-template-rows: 34px 24px 132px 22px 28px 30px !important;
      gap: 6px !important;
      border: 1px solid rgba(229,170,70,.66) !important;
      background: linear-gradient(180deg, rgba(9,11,11,.98), rgba(3,4,4,.99)) !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-card-title {
      font-size: 20px !important;
      color: #ffe8a9 !important;
      border-bottom: 1px solid rgba(229,170,70,.28) !important;
    }

    body.battle-mode .preview-cost-icon,
    body.battle-mode .preview-card-title .atlas-status-icon {
      display: inline-block !important;
      width: 38px !important;
      height: 42px !important;
      background: var(--cost-sprite-img, var(--cost-sprite)) center / contain no-repeat !important;
      vertical-align: middle !important;
    }

    body.battle-mode .preview-cost-zero {
      color: #ffe8a9 !important;
      font-size: 15px !important;
    }

    body.battle-mode .preview-art-row {
      grid-template-columns: 158px minmax(0, 1fr) !important;
      min-height: 132px !important;
      gap: 12px !important;
    }

    body.battle-mode .preview-art-box {
      width: 158px !important;
      height: 132px !important;
      min-height: 132px !important;
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
      display: grid !important;
      place-items: center !important;
      background-image: var(--atlas-art-image, none) !important;
      border: 1px solid rgba(230,170,70,.48) !important;
      box-shadow: inset 0 0 0 1px rgba(229,170,70,.16) !important;
    }

    body.battle-mode .preview-art-box .card-icon {
      width: 122px !important;
      height: 122px !important;
      object-fit: contain !important;
      display: block !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      position: relative !important;
      z-index: 1 !important;
    }

    body.battle-mode .preview-art-box > img.card-icon {
      display: block !important;
      width: 122px !important;
      height: 122px !important;
      max-width: 128px !important;
      max-height: 128px !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      filter: none !important;
      position: relative !important;
      z-index: 1 !important;
    }

    body.battle-mode .preview-card-desc {
      min-height: 132px !important;
      max-height: 132px !important;
      padding: 10px 12px !important;
      font-size: 14px !important;
      line-height: 1.42 !important;
      color: #f4e4bd !important;
      background: rgba(3,4,4,.96) !important;
      border: 1px solid rgba(255,220,126,.18) !important;
      overflow: hidden !important;
    }

    body.battle-mode .card-preview-panel {
      grid-template-rows: 34px 24px 18px 134px 22px 28px 30px !important;
      gap: 6px !important;
    }

    body.battle-mode .preview-effectiveness-slot {
      grid-row: 3 !important;
      min-height: 18px !important;
      max-height: 18px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-effectiveness-slot:empty {
      visibility: hidden !important;
    }

    body.battle-mode .preview-effectiveness-slot .element-advantage-hint {
      max-width: 100% !important;
      padding: 3px 8px !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .preview-art-row {
      grid-row: 4 !important;
      min-height: 134px !important;
      grid-template-columns: 132px minmax(0, 1fr) !important;
      align-items: stretch !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-art-box {
      width: 132px !important;
      height: 134px !important;
      min-height: 134px !important;
    }

    body.battle-mode .preview-art-box .card-icon,
    body.battle-mode .preview-art-box > img.card-icon {
      width: 104px !important;
      height: 104px !important;
      max-width: 108px !important;
      max-height: 108px !important;
    }

    body.battle-mode .preview-card-desc {
      min-height: 134px !important;
      max-height: 134px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-card-keywords {
      grid-row: 5 !important;
      min-height: 22px !important;
      max-height: 22px !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-card-power {
      grid-row: 6 !important;
    }

    body.battle-mode .preview-detail-grid {
      grid-row: 7 !important;
    }

    body.battle-mode .played-card-stage {
      width: auto !important;
      height: auto !important;
      min-width: min(520px, 72vw) !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      pointer-events: none !important;
      overflow: visible !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 18px !important;
    }

    body.battle-mode .played-card-stage .cast-banner {
      align-self: center !important;
      width: min(520px, 70vw) !important;
      min-height: 46px !important;
      display: grid !important;
      place-items: center !important;
      padding: 8px 18px !important;
      border: 1px solid rgba(255, 230, 154, .62) !important;
      background: linear-gradient(90deg, rgba(20,14,6,.12), rgba(72,45,12,.86), rgba(20,14,6,.12)) !important;
      color: #fff0b0 !important;
      font-size: 24px !important;
      font-weight: 900 !important;
      letter-spacing: 2px !important;
      text-align: center !important;
      text-shadow: 0 0 14px rgba(255, 221, 126, .44), 0 2px 8px rgba(0,0,0,.95) !important;
      box-shadow: 0 0 22px rgba(255, 210, 110, .2) !important;
    }

    body.battle-mode .played-card-stage.show.ultimate .cast-banner {
      min-height: 58px !important;
      font-size: 30px !important;
      border-color: rgba(255, 242, 190, .82) !important;
      box-shadow: 0 0 28px rgba(255, 230, 142, .35), inset 0 0 18px rgba(255, 230, 142, .14) !important;
    }

    body.battle-mode .played-card-stage .played-card-wrap {
      display: grid !important;
      place-items: center !important;
      position: relative !important;
    }

    body.battle-mode .played-card-stage .cast-subtitle {
      min-height: 24px !important;
      color: rgba(255, 232, 177, .92) !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      text-align: center !important;
      text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
    }

    body.battle-mode .played-card-stage .ultimate-backdrop,
    body.battle-mode .played-card-stage .ultimate-rays,
    body.battle-mode .played-card-stage .cast-vortex,
    body.battle-mode .played-card-stage .cast-ring,
    body.battle-mode .played-card-stage .cast-burst {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      pointer-events: none !important;
      opacity: 0 !important;
    }

    body.battle-mode .played-card-stage.show.advanced .cast-vortex,
    body.battle-mode .played-card-stage.show.ultimate .cast-vortex {
      width: min(520px, 82vw) !important;
      height: min(520px, 82vw) !important;
      z-index: -2 !important;
      opacity: 1 !important;
      background:
        radial-gradient(circle, rgba(255,255,255,.42) 0 2px, transparent 3px 100%),
        radial-gradient(circle, var(--elm-glow, rgba(255,220,126,.34)) 0 18%, transparent 58%) !important;
      background-size: 42px 42px, 100% 100% !important;
      border-radius: 50% !important;
      animation: castVortexGather 1800ms ease-in-out infinite !important;
      filter: drop-shadow(0 0 18px var(--elm-p1, #ffe18a)) !important;
    }

    body.battle-mode .played-card-stage.show.advanced .cast-ring,
    body.battle-mode .played-card-stage.show.ultimate .cast-ring {
      width: min(420px, 72vw) !important;
      height: min(420px, 72vw) !important;
      z-index: -1 !important;
      opacity: 1 !important;
      border-radius: 50% !important;
      border: 3px solid var(--elm-p1, #ffe18a) !important;
      box-shadow:
        0 0 30px var(--elm-glow, rgba(255,220,126,.45)),
        inset 0 0 34px var(--elm-glow, rgba(255,220,126,.36)) !important;
      animation: castRingPulse 1500ms ease-in-out infinite !important;
    }

    body.battle-mode .played-card-stage.show.advanced .cast-burst,
    body.battle-mode .played-card-stage.show.ultimate .cast-burst {
      width: min(480px, 78vw) !important;
      height: min(480px, 78vw) !important;
      z-index: -1 !important;
      opacity: 1 !important;
      border-radius: 50% !important;
      background: conic-gradient(from 0deg, transparent, var(--elm-p1, #ffe18a), transparent, var(--elm-p2, #ff9f43), transparent) !important;
      -webkit-mask: radial-gradient(circle, transparent 0 44%, #000 45% 48%, transparent 49% 100%) !important;
      mask: radial-gradient(circle, transparent 0 44%, #000 45% 48%, transparent 49% 100%) !important;
      animation: castBurstSpin 1250ms linear infinite !important;
    }

    body.battle-mode .played-card-stage.show.ultimate .ultimate-backdrop {
      position: fixed !important;
      inset: -20vh -20vw !important;
      left: 50% !important;
      top: 50% !important;
      width: 140vw !important;
      height: 140vh !important;
      z-index: -5 !important;
      opacity: 1 !important;
      background: radial-gradient(circle at 50% 44%, rgba(255,232,150,.18), rgba(5,4,8,.64) 44%, rgba(0,0,0,.82) 100%) !important;
      animation: ultimateBackdropPulse 2600ms ease-in-out infinite !important;
    }

    body.battle-mode .played-card-stage.show.ultimate .ultimate-rays {
      width: min(760px, 110vw) !important;
      height: min(760px, 110vw) !important;
      z-index: -4 !important;
      opacity: 1 !important;
      background: repeating-conic-gradient(from 0deg, rgba(255,242,180,.32) 0 8deg, transparent 8deg 20deg) !important;
      border-radius: 50% !important;
      filter: blur(.3px) drop-shadow(0 0 22px rgba(255,230,142,.48)) !important;
      animation: ultimateRaysSpin 4200ms linear infinite !important;
    }

    body.battle-mode .played-card-stage.show.ultimate .cast-ring {
      width: min(620px, 96vw) !important;
      height: min(620px, 96vw) !important;
      border-width: 5px !important;
      box-shadow:
        0 0 44px #fff0a8,
        0 0 82px var(--elm-p1, #ffe18a),
        inset 0 0 54px rgba(255,240,168,.32) !important;
    }

    body.battle-mode .target-impact {
      position: absolute !important;
      left: var(--fx-x, 50%) !important;
      top: var(--fx-y, 50%) !important;
      width: 160px !important;
      height: 160px !important;
      z-index: 32 !important;
      transform: translate(-50%, -50%) scale(.4) !important;
      border-radius: 50% !important;
      pointer-events: none !important;
      background:
        radial-gradient(circle, rgba(255,255,255,.86) 0 8%, var(--fx-color, #ffe18a) 9% 24%, transparent 25% 100%),
        conic-gradient(from 0deg, transparent, var(--fx-color, #ffe18a), transparent 42%, rgba(255,255,255,.62), transparent) !important;
      box-shadow: 0 0 34px var(--fx-color, #ffe18a) !important;
      animation: targetImpactBurst 760ms ease-out forwards !important;
    }

    body.battle-mode .target-impact.friendly-heal {
      background: radial-gradient(circle, rgba(206,255,194,.94) 0 10%, rgba(92,255,139,.58) 11% 28%, transparent 29% 100%) !important;
      box-shadow: 0 0 32px rgba(92,255,139,.7) !important;
    }

    body.battle-mode .target-impact.friendly-shield {
      background: radial-gradient(circle, transparent 0 38%, rgba(116,215,255,.78) 39% 44%, transparent 45% 100%) !important;
      box-shadow: 0 0 34px rgba(116,215,255,.72), inset 0 0 24px rgba(116,215,255,.38) !important;
    }

    body.battle-mode .target-impact.hostile-status,
    body.battle-mode .target-impact.friendly-buff,
    body.battle-mode .target-impact.friendly-summon {
      background: radial-gradient(circle, rgba(191,145,255,.74) 0 14%, rgba(92,180,255,.28) 15% 42%, transparent 43% 100%) !important;
      box-shadow: 0 0 28px rgba(171,111,255,.66) !important;
    }

    body.battle-mode .target-impact.advanced {
      width: 230px !important;
      height: 230px !important;
      animation-duration: 800ms !important;
      box-shadow: 0 0 28px var(--fx-color, #ffe18a), 0 0 56px rgba(255,200,80,.28) !important;
    }

    body.battle-mode .target-impact.ultimate {
      width: 360px !important;
      height: 360px !important;
      animation-duration: 1100ms !important;
      box-shadow: 0 0 50px #fff0a8, 0 0 90px var(--fx-color, #ffe18a), 0 0 130px rgba(255,200,60,.35) !important;
    }

    @keyframes castVortexGather {
      0% { transform: translate(-50%, -50%) rotate(0deg) scale(.78); opacity: .35; }
      45% { opacity: 1; }
      100% { transform: translate(-50%, -50%) rotate(210deg) scale(1.05); opacity: .62; }
    }

    @keyframes castRingPulse {
      0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: .58; }
      50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    }

    @keyframes castBurstSpin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes ultimateBackdropPulse {
      0%, 100% { opacity: .76; }
      50% { opacity: 1; }
    }

    @keyframes ultimateRaysSpin {
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes targetImpactBurst {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.36) rotate(0deg); }
      18% { opacity: 1; }
      70% { opacity: .78; transform: translate(-50%, -50%) scale(1) rotate(32deg); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24) rotate(52deg); }
    }

    body.battle-mode .played-card-stage::before,
    body.battle-mode .played-card-stage::after {
      content: none !important;
      display: none !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    body.battle-mode .played-card-stage .card::before,
    body.battle-mode .played-card-stage .card::after {
      content: none !important;
      display: none !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: 0 !important;
    }

    body.battle-mode .played-card-stage.show {
      animation: playedCardFloat 1700ms ease forwards !important;
    }

    body.battle-mode .played-card-stage.show.enhanced {
      animation-duration: 2300ms !important;
    }

    body.battle-mode .played-card-stage.show.strong {
      animation-duration: 2700ms !important;
    }

    body.battle-mode .played-card-stage.show.advanced {
      animation-duration: 3200ms !important;
    }

    body.battle-mode .played-card-stage.show.ultimate {
      animation-duration: 4600ms !important;
    }

    body.battle-mode.advanced-drama #battlefield::before,
    body.battle-mode.ultimate-drama #battlefield::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      z-index: 4 !important;
      pointer-events: none !important;
      background: radial-gradient(circle at 50% 43%, transparent 0 24%, rgba(0,0,0,.32) 62%, rgba(0,0,0,.52) 100%) !important;
    }

    body.battle-mode.ultimate-drama #battlefield::before {
      background: radial-gradient(circle at 50% 43%, transparent 0 20%, rgba(0,0,0,.44) 58%, rgba(0,0,0,.68) 100%) !important;
    }

    body.battle-mode .float-text.advanced {
      font-size: 40px !important;
      text-shadow: 0 0 16px var(--fx-color, #ffe18a), 0 4px 12px rgba(0,0,0,.95) !important;
    }

    body.battle-mode .float-text {
      animation-fill-mode: forwards !important;
    }

    body.battle-mode .float-text.ultimate {
      font-size: 52px !important;
      color: #fff5bd !important;
      text-shadow: 0 0 14px #fff0a8, 0 0 30px var(--fx-color, #ffe18a), 0 0 50px rgba(255,200,80,.4), 0 5px 16px rgba(0,0,0,.96) !important;
      animation: floatTextUltimate 800ms ease-out forwards !important;
    }

    @keyframes floatTextUltimate {
      0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); }
      25% { opacity: 1; transform: translate(-50%, -8px) scale(1.12); }
      50% { transform: translate(-50%, -14px) scale(1); }
      100% { opacity: 1; transform: translate(-50%, -22px) scale(1); }
    }

    body.battle-mode .float-text.ultimate.friendly-heal {
      color: #b5ffc8 !important;
      text-shadow: 0 0 14px rgba(92,255,139,.8), 0 0 34px rgba(92,255,139,.5), 0 5px 16px rgba(0,0,0,.96) !important;
    }

    body.battle-mode .float-text.ultimate.friendly-shield {
      color: #b8edff !important;
      text-shadow: 0 0 14px rgba(116,215,255,.8), 0 0 34px rgba(116,215,255,.5), 0 5px 16px rgba(0,0,0,.96) !important;
    }

    body.battle-mode .float-text.dot-tick {
      font-size: 28px !important;
      color: #ff4444 !important;
      text-shadow: 0 0 10px rgba(255,40,40,.7), 0 3px 8px rgba(0,0,0,.9) !important;
      z-index: 125 !important;
      animation: dotTickUp 1s ease-out forwards !important;
    }
    @keyframes dotTickUp {
      0% { opacity: 1; transform: translate(-50%, 0); }
      100% { opacity: 0; transform: translate(-50%, -80px); }
    }

    body.battle-mode .unit-overhead-hp {
      position: absolute !important;
      left: 50% !important;
      top: -44px !important;
      width: 260px !important;
      transform: translateX(-50%) !important;
      z-index: 6 !important;
      padding: 5px 7px 7px !important;
      border: 1px solid rgba(255, 220, 126, .42) !important;
      background: linear-gradient(180deg, rgba(8, 9, 8, .92), rgba(2, 3, 3, .88)) !important;
      box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.05) !important;
      pointer-events: none !important;
    }

    body.battle-mode .unit-overhead-hp .hp-label {
      font-size: 12px !important;
      font-weight: 900 !important;
      color: #ffe8ae !important;
      text-align: center !important;
      text-shadow: 0 2px 5px #000 !important;
      margin-bottom: 4px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .unit-overhead-hp .hp-track {
      position: relative !important;
      height: 13px !important;
      overflow: hidden !important;
      background: rgba(0, 0, 0, .72) !important;
      border: 1px solid rgba(255, 232, 160, .22) !important;
    }

    body.battle-mode .unit-overhead-hp .hp-fill,
    body.battle-mode .unit-overhead-hp .shield-fill {
      position: absolute !important;
      left: 0 !important;
      top: 0 !important;
      bottom: 0 !important;
      transition: width .35s ease !important;
    }

    body.battle-mode .unit-overhead-hp.player .hp-fill {
      background: linear-gradient(90deg, #23d76f, #96ff9d) !important;
    }

    body.battle-mode .unit-overhead-hp.enemy .hp-fill {
      background: linear-gradient(90deg, #d73330, #ff8768) !important;
    }

    body.battle-mode .unit-overhead-hp .shield-fill {
      top: auto !important;
      height: 4px !important;
      background: linear-gradient(90deg, #58c7ff, #ffe18a) !important;
      opacity: .9 !important;
    }

    body.battle-mode .summon-unit {
      position: absolute !important;
      z-index: 17 !important;
      width: 118px !important;
      min-height: 128px !important;
      display: grid !important;
      place-items: center !important;
      pointer-events: auto !important;
      filter: drop-shadow(0 12px 12px rgba(0,0,0,.45)) !important;
    }

    body.battle-mode .summon-unit.player-summon {
      left: calc(34% + var(--summon-x, 0px)) !important;
      bottom: calc(15% + var(--summon-y, 0px)) !important;
    }

    body.battle-mode .summon-unit.enemy-summon {
      right: calc(42% + var(--summon-x, 0px)) !important;
      bottom: calc(20% + var(--summon-y, 0px)) !important;
    }

    body.battle-mode .summon-name {
      max-width: 128px !important;
      margin-bottom: 3px !important;
      padding: 2px 6px !important;
      border: 1px solid rgba(255,231,160,.42) !important;
      background: rgba(5,8,8,.78) !important;
      color: #ffe8ae !important;
      font-size: 10px !important;
      font-weight: 900 !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .summon-sprite {
      max-width: 108px !important;
      max-height: 92px !important;
      object-fit: contain !important;
    }

    body.battle-mode .summon-hp {
      position: relative !important;
      width: 96px !important;
      height: 12px !important;
      margin-top: 2px !important;
      border: 1px solid rgba(255,232,160,.32) !important;
      background: rgba(0,0,0,.72) !important;
      overflow: hidden !important;
    }

    body.battle-mode .summon-hp-fill {
      position: absolute !important;
      inset: 0 auto 0 0 !important;
      background: linear-gradient(90deg, #29d68b, #d8ff8d) !important;
      transition: width .35s ease !important;
    }

    body.battle-mode .summon-hp span {
      position: relative !important;
      z-index: 1 !important;
      display: block !important;
      color: #fff7cf !important;
      font-size: 9px !important;
      line-height: 12px !important;
      text-align: center !important;
      text-shadow: 0 1px 3px #000 !important;
    }

    body.battle-mode .summon-unit.assist-attack {
      animation: summonAssistLunge 1.05s ease-out !important;
      filter: drop-shadow(0 12px 12px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(255,225,118,.72)) !important;
    }

    body.battle-mode .summon-unit.guard-hit {
      animation: summonGuardHit .42s ease-out !important;
      filter: drop-shadow(0 12px 12px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(109,210,255,.7)) !important;
    }

    body.battle-mode .summon-assist-beam {
      position: absolute !important;
      left: var(--from-x, 50%) !important;
      top: var(--from-y, 50%) !important;
      z-index: 26 !important;
      width: 210px !important;
      height: 5px !important;
      transform-origin: left center !important;
      transform: translate(0, -50%) rotate(var(--beam-angle, 0deg)) !important;
      background: linear-gradient(90deg, rgba(255,245,162,0), rgba(255,235,126,.95), rgba(123,229,255,0)) !important;
      box-shadow: 0 0 14px rgba(255,228,106,.78) !important;
      pointer-events: none !important;
      animation: summonBeamFlash 1.12s ease-out both !important;
    }

    body.battle-mode .summon-assist-impact {
      position: absolute !important;
      left: var(--fx-x, 50%) !important;
      top: var(--fx-y, 50%) !important;
      z-index: 27 !important;
      width: 82px !important;
      height: 82px !important;
      border: 2px solid rgba(255,232,126,.76) !important;
      border-radius: 50% !important;
      transform: translate(-50%, -50%) !important;
      box-shadow: 0 0 22px rgba(255,219,84,.72), inset 0 0 18px rgba(255,255,255,.2) !important;
      pointer-events: none !important;
      animation: summonImpactPop 1.16s ease-out both !important;
    }

    body.battle-mode .summon-assist-label,
    body.battle-mode .summon-float-text {
      position: absolute !important;
      left: var(--fx-x, 50%) !important;
      top: var(--fx-y, 50%) !important;
      z-index: 29 !important;
      transform: translate(-50%, -50%) !important;
      pointer-events: none !important;
      text-align: center !important;
      text-shadow: 0 2px 6px #000, 0 0 12px rgba(255,221,95,.65) !important;
      white-space: nowrap !important;
    }

    body.battle-mode .summon-assist-label {
      padding: 4px 10px !important;
      border: 1px solid rgba(255,231,160,.58) !important;
      background: rgba(5,8,8,.84) !important;
      color: #ffe88f !important;
      font-size: 12px !important;
      font-weight: 900 !important;
      animation: summonLabelRise 1.2s ease-out both !important;
    }

    body.battle-mode .summon-float-text {
      color: #ffe15e !important;
      font-size: 20px !important;
      font-weight: 950 !important;
      animation: summonNumberRise 1.2s ease-out both !important;
    }

    body.battle-mode .summon-float-text.guard {
      color: #7ed9ff !important;
      font-size: 17px !important;
    }

    body[data-anim="low"].battle-mode .summon-unit.assist-attack,
    body[data-anim="low"].battle-mode .summon-unit.guard-hit {
      animation: none !important;
    }

    body[data-anim="low"].battle-mode .summon-assist-beam,
    body[data-anim="low"].battle-mode .summon-assist-impact {
      display: none !important;
    }

    @keyframes summonAssistLunge {
      0% { transform: translateX(0) scale(1); }
      42% { transform: translateX(16px) scale(1.06); }
      100% { transform: translateX(0) scale(1); }
    }

    @keyframes summonGuardHit {
      0% { transform: translateX(0) scale(1); }
      45% { transform: translateX(-8px) scale(.96); }
      100% { transform: translateX(0) scale(1); }
    }

    @keyframes summonBeamFlash {
      0% { opacity: 0; clip-path: inset(0 100% 0 0); }
      28% { opacity: 1; clip-path: inset(0 0 0 0); }
      100% { opacity: 0; clip-path: inset(0 0 0 100%); }
    }

    @keyframes summonImpactPop {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
      42% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
    }

    @keyframes summonLabelRise {
      0% { opacity: 0; transform: translate(-50%, -38%); }
      22% { opacity: 1; }
      100% { opacity: 0; transform: translate(-50%, -82%); }
    }

    @keyframes summonNumberRise {
      0% { opacity: 0; transform: translate(-50%, -30%) scale(.82); }
      20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -110%) scale(1.04); }
    }

    body.battle-mode .mechanic-popup {
      position: absolute !important;
      left: var(--fx-x, 50%) !important;
      top: var(--fx-y, 34%) !important;
      z-index: 28 !important;
      transform: translate(-50%, -50%) !important;
      padding: 6px 11px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,231,160,.52) !important;
      background: linear-gradient(180deg, rgba(28,24,15,.94), rgba(7,8,8,.92)) !important;
      color: #ffe9a8 !important;
      font-size: 16px !important;
      font-weight: 900 !important;
      pointer-events: none !important;
      white-space: nowrap !important;
      text-shadow: 0 2px 6px rgba(0,0,0,.9) !important;
      box-shadow: 0 0 18px rgba(255,214,112,.22) !important;
      animation: mechanicPopupFloat 1400ms ease-out forwards !important;
    }

    body.battle-mode .mechanic-popup.element { color: #fff3b8 !important; box-shadow: 0 0 20px rgba(255,226,132,.34) !important; }
    body.battle-mode .mechanic-popup.debuff { color: #ffb0dc !important; border-color: rgba(255,111,177,.56) !important; }
    body.battle-mode .mechanic-popup.control { color: #c8eeff !important; border-color: rgba(132,220,255,.58) !important; }

    @keyframes mechanicPopupFloat {
      0% { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
      18% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
      78% { opacity: 1; transform: translate(-50%, -66%) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -88%) scale(.98); }
    }

    body.battle-mode .played-card-stage.show .card {
      transform: scale(1.1) !important;
      pointer-events: none !important;
      outline: 0 !important;
    }

    body.battle-mode .played-card-stage.show:has(.card[data-cost="8"]) .card {
      filter: brightness(1.1) drop-shadow(0 0 18px var(--elm-glow, rgba(255,218,112,.4))) !important;
    }

    body.battle-mode .played-card-stage.show:has(.card[data-cost="9"]) .card {
      filter: brightness(1.16) drop-shadow(0 0 24px var(--elm-glow, rgba(255,218,112,.55))) drop-shadow(0 0 48px rgba(255,200,80,.22)) !important;
      transform: scale(1.14) !important;
    }

    body.battle-mode .played-card-stage.show:has(.card[data-cost="10"]) .card {
      filter: brightness(1.22) drop-shadow(0 0 28px rgba(255,245,190,.6)) drop-shadow(0 0 56px rgba(255,200,80,.35)) !important;
      transform: scale(1.18) !important;
    }

    @keyframes playedCardFloat {
      0% { opacity: 0; transform: translate(-50%, 20px) scale(.96); }
      18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      72% { opacity: 1; transform: translate(-50%, -12px) scale(1); }
      100% { opacity: 0; transform: translate(-50%, -34px) scale(.98); }
    }

    /* ════════════════════════════════════════════════ */
    /* Enhanced Cast Stage for 8-9-10 Cost Cards      */
    /* ════════════════════════════════════════════════ */

    /* ── Enhanced card glow behind the played card ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="8"]) .played-card-wrap::after,
    body.battle-mode .played-card-stage:has(.card[data-cost="9"]) .played-card-wrap::after,
    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .played-card-wrap::after {
      content: "" !important;
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 90% !important;
      height: 90% !important;
      transform: translate(-50%, -50%) !important;
      border-radius: 30% !important;
      pointer-events: none !important;
      z-index: -1 !important;
      opacity: 0 !important;
      animation: castCardGlowIn 700ms ease-out 300ms forwards !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="8"]) .played-card-wrap::after {
      background: radial-gradient(circle, var(--elm-glow, rgba(255,218,112,.38)) 0, transparent 68%) !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="9"]) .played-card-wrap::after {
      background: radial-gradient(circle, var(--elm-glow, rgba(255,218,112,.52)) 0, var(--elm-p1, #ffe18a) 18%, transparent 72%) !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .played-card-wrap::after {
      background: radial-gradient(circle, rgba(255,248,200,.7) 0, var(--elm-p1, #ffe18a) 14%, var(--elm-glow, rgba(255,218,112,.5)) 28%, transparent 76%) !important;
      filter: blur(2px) !important;
    }

    @keyframes castCardGlowIn {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
      100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    /* ── Enhanced cast-vortex per cost tier ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="8"]) .cast-vortex {
      width: min(560px, 86vw) !important;
      height: min(560px, 86vw) !important;
      background:
        radial-gradient(circle, rgba(255,255,255,.46) 0 2px, transparent 3px 100%),
        radial-gradient(circle, var(--elm-glow, rgba(255,220,126,.42)) 0 18%, transparent 62%) !important;
      background-size: 38px 38px, 100% 100% !important;
      filter: drop-shadow(0 0 22px var(--elm-p1, #ffe18a)) !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="9"]) .cast-vortex {
      width: min(620px, 90vw) !important;
      height: min(620px, 90vw) !important;
      background:
        radial-gradient(circle, rgba(255,255,255,.54) 0 2px, transparent 3px 100%),
        radial-gradient(circle, var(--elm-p1, #ffe18a) 0 6%, var(--elm-glow, rgba(255,220,126,.52)) 12%, transparent 66%) !important;
      background-size: 34px 34px, 100% 100% !important;
      filter: drop-shadow(0 0 28px var(--elm-p1, #ffe18a)) drop-shadow(0 0 48px rgba(255,200,80,.3)) !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .cast-vortex {
      width: min(720px, 94vw) !important;
      height: min(720px, 94vw) !important;
      background:
        radial-gradient(circle, rgba(255,248,200,.6) 0 2px, transparent 3px 100%),
        radial-gradient(circle, rgba(255,248,210,.34) 0 6%, var(--elm-p1, #ffe18a) 10%, var(--elm-glow, rgba(255,220,126,.62)) 18%, transparent 70%) !important;
      background-size: 30px 30px, 100% 100% !important;
      filter: drop-shadow(0 0 30px rgba(255,230,150,.7)) drop-shadow(0 0 60px rgba(255,200,80,.4)) !important;
    }

    /* ── Enhanced cast-ring per cost tier ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="8"]) .cast-ring {
      width: min(480px, 76vw) !important;
      height: min(480px, 76vw) !important;
      border-width: 4px !important;
      box-shadow:
        0 0 36px var(--elm-glow, rgba(255,220,126,.52)),
        0 0 64px rgba(255,200,80,.22),
        inset 0 0 40px var(--elm-glow, rgba(255,220,126,.42)) !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="9"]) .cast-ring {
      width: min(560px, 86vw) !important;
      height: min(560px, 86vw) !important;
      border-width: 5px !important;
      box-shadow:
        0 0 42px var(--elm-glow, rgba(255,220,126,.62)),
        0 0 76px rgba(255,200,80,.34),
        inset 0 0 48px var(--elm-glow, rgba(255,220,126,.52)) !important;
      animation-duration: 900ms !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .cast-ring {
      width: min(680px, 98vw) !important;
      height: min(680px, 98vw) !important;
      border-width: 6px !important;
      border-color: #fff0a8 !important;
      box-shadow:
        0 0 48px #fff0a8,
        0 0 88px var(--elm-p1, #ffe18a),
        0 0 120px rgba(255,200,60,.28),
        inset 0 0 60px rgba(255,240,168,.38) !important;
      animation-duration: 750ms !important;
    }

    /* ── Enhanced cast-burst per cost tier ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="9"]) .cast-burst {
      width: min(540px, 82vw) !important;
      height: min(540px, 82vw) !important;
      -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 43% 48%, transparent 49% 100%) !important;
      mask: radial-gradient(circle, transparent 0 42%, #000 43% 48%, transparent 49% 100%) !important;
      animation-duration: 750ms !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .cast-burst {
      width: min(620px, 90vw) !important;
      height: min(620px, 90vw) !important;
      background: conic-gradient(from 0deg, transparent, rgba(255,215,0,.7), transparent, var(--elm-p1, #ffe18a), rgba(255,255,255,.5), transparent) !important;
      -webkit-mask: radial-gradient(circle, transparent 0 40%, #000 41% 48%, transparent 49% 100%) !important;
      mask: radial-gradient(circle, transparent 0 40%, #000 41% 48%, transparent 49% 100%) !important;
      animation-duration: 600ms !important;
    }

    /* ── Enhanced ultimate backdrop and rays ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .ultimate-backdrop {
      background: radial-gradient(circle at 50% 44%, rgba(255,240,180,.28), rgba(120,80,40,.54) 36%, rgba(0,0,0,.86) 100%) !important;
      animation-duration: 1500ms !important;
    }

    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .ultimate-rays {
      width: min(860px, 120vw) !important;
      height: min(860px, 120vw) !important;
      background: repeating-conic-gradient(from 0deg, rgba(255,245,200,.42) 0 6deg, transparent 6deg 18deg) !important;
      filter: blur(.5px) drop-shadow(0 0 28px rgba(255,235,160,.6)) !important;
      animation-duration: 2400ms !important;
    }

    /* ── Enhanced banner for 10-cost ── */
    body.battle-mode .played-card-stage:has(.card[data-cost="10"]) .cast-banner {
      border-color: rgba(255, 248, 210, .9) !important;
      box-shadow: 0 0 36px rgba(255, 236, 160, .5), inset 0 0 24px rgba(255, 240, 170, .22) !important;
      text-shadow: 0 0 20px rgba(255, 238, 160, .7), 0 2px 10px rgba(0,0,0,.95) !important;
    }

    /* ── Low-animation overrides for cast stage enhancements ── */
    body[data-anim="low"] .played-card-stage:has(.card[data-cost="8"]) .played-card-wrap::after,
    body[data-anim="low"] .played-card-stage:has(.card[data-cost="9"]) .played-card-wrap::after,
    body[data-anim="low"] .played-card-stage:has(.card[data-cost="10"]) .played-card-wrap::after {
      animation: none !important;
      opacity: .24 !important;
    }

    body[data-anim="low"] .played-card-stage:has(.card[data-cost="10"]) .ultimate-rays,
    body[data-anim="low"] .played-card-stage:has(.card[data-cost="10"]) .ultimate-backdrop {
      animation: none !important;
    }

    body.battle-mode .preview-detail-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 10px !important;
    }

    body.battle-mode .preview-detail-grid .pill {
      min-height: 32px !important;
      justify-content: center !important;
      background: linear-gradient(180deg, rgba(55,50,42,.92), rgba(22,20,17,.94)) !important;
      border: 1px solid rgba(255,220,126,.26) !important;
    }

    .battle-prep-modal .character-grid,
    .codex-grid {
      align-items: stretch !important;
    }

    .battle-prep-modal .character-card,
    .codex-grid .character-card {
      display: grid !important;
      grid-template-rows: auto auto auto 1fr !important;
      gap: 10px !important;
      padding: 18px 18px 16px !important;
      background: linear-gradient(180deg, rgba(10,12,12,.98), rgba(3,4,4,.98)) !important;
      border: 1px solid rgba(224,170,75,.42) !important;
      box-shadow: inset 0 0 0 1px rgba(255,225,135,.08), 0 14px 28px rgba(0,0,0,.34) !important;
      overflow: hidden !important;
    }

    .battle-prep-modal .character-card:hover,
    .battle-prep-modal .character-card.selected,
    .codex-grid .character-card:hover,
    .codex-grid .character-card.selected {
      outline: 0 !important;
      transform: translateY(-3px) !important;
      border-color: rgba(255,208,91,.7) !important;
      box-shadow: inset 0 0 0 1px rgba(255,225,135,.16), 0 16px 30px rgba(0,0,0,.42) !important;
    }

    .battle-prep-modal .character-card h3,
    .codex-grid .character-card h3 {
      margin: 0 !important;
      padding-bottom: 8px !important;
      color: #ffe3a1 !important;
      font-size: 22px !important;
      line-height: 1.18 !important;
      border-bottom: 1px solid rgba(229,170,70,.28) !important;
      text-shadow: 0 2px 6px #000 !important;
    }

    .battle-prep-modal .character-card .title,
    .codex-grid .character-card .title,
    .battle-prep-modal .character-card .small-note,
    .codex-grid .character-card .small-note {
      margin: 0 !important;
      padding: 7px 9px !important;
      color: #d8bd82 !important;
      background: rgba(0,0,0,.32) !important;
      border: 1px solid rgba(255,220,126,.12) !important;
      line-height: 1.35 !important;
    }

    .battle-prep-modal .character-card .pill-list,
    .codex-grid .character-card .pill-list {
      gap: 6px !important;
      padding: 8px !important;
      background: rgba(0,0,0,.28) !important;
      border: 1px solid rgba(255,220,126,.1) !important;
    }

    .battle-prep-modal .character-card .skills,
    .codex-grid .character-card .skills,
    .codex-grid .character-card .desc {
      margin: 0 !important;
      padding: 10px 11px !important;
      color: rgba(255,232,180,.86) !important;
      background: rgba(2,3,3,.72) !important;
      border: 1px solid rgba(255,220,126,.12) !important;
      line-height: 1.5 !important;
      overflow: hidden !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card-art::after,
    body[data-anim="low"] .played-card-stage .card-art::after {
      animation: none !important;
      opacity: .12 !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card[data-drama-tier="advanced"] .card-art::after {
      opacity: .52 !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card[data-drama-tier="ultimate"] .card-art::after {
      opacity: .72 !important;
    }

    body[data-anim="low"].battle-mode.advanced-drama #battlefield::before,
    body[data-anim="low"].battle-mode.ultimate-drama #battlefield::before {
      opacity: .34 !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card[data-cost="8"] .orbit,
    body[data-anim="low"] .hand-dock-v3 .card[data-cost="9"] .orbit,
    body[data-anim="low"] .hand-dock-v3 .card[data-cost="10"] .orbit {
      animation: none !important;
      opacity: .2 !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card[data-cost="9"],
    body[data-anim="low"] .hand-dock-v3 .card[data-cost="10"] {
      animation: none !important;
    }

    body[data-anim="low"] .hand-dock-v3 .card[data-cost="10"] .card-cost {
      animation: none !important;
    }

    @media (max-width: 1280px) {
      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 170px minmax(0, 1fr) 430px !important;
      }
      body.battle-mode .hand-dock-v3 .card {
        width: 184px !important;
        flex-basis: 184px !important;
      }
    }

    @media (max-width: 520px) {
      body.battle-mode .played-card-stage {
        min-width: min(360px, 88vw) !important;
        gap: 12px !important;
      }

      body.battle-mode .played-card-stage .cast-banner {
        width: min(350px, 86vw) !important;
        min-height: 40px !important;
        font-size: 18px !important;
        padding: 7px 12px !important;
      }
    }

  /* ── Home Title Screen: image + hotspot buttons ── */
    /* =========================================================
       Battle Reference UI Pass
       Goal: move battle screen closer to the provided reference mockup.
       Scope: layout, HUD, hand dock, card preview, log panel only.
       ========================================================= */
    body.battle-mode,
    body.battle-mode #screen-battle {
      width: 100vw !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      background: #050607 !important;
    }

    body.battle-mode .battle-layout-v3 {
      height: 100vh !important;
      min-height: 100vh !important;
      max-height: 100vh !important;
      overflow: hidden !important;
      display: grid !important;
      grid-template-rows: 56px minmax(0, 1fr) 326px !important;
      background:
        linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.02) 42%, rgba(0,0,0,.48)),
        #050607 !important;
    }

    body.battle-mode .battle-top {
      height: 56px !important;
      min-height: 56px !important;
      grid-template-columns: 280px minmax(360px, 1fr) 240px !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 5px 14px !important;
      border-bottom: 1px solid rgba(218,166,72,.58) !important;
      background: linear-gradient(180deg, rgba(8,11,12,.98), rgba(4,5,5,.94)) !important;
      box-shadow: inset 0 -1px 0 rgba(255,225,132,.12), 0 8px 22px rgba(0,0,0,.36) !important;
    }

    body.battle-mode .battle-brand {
      height: 42px !important;
      min-width: 0 !important;
      padding: 0 18px 0 8px !important;
      border: 1px solid rgba(220,166,72,.26) !important;
      border-right-color: transparent !important;
      background: linear-gradient(90deg, rgba(12,17,18,.92), rgba(20,15,8,.28) 78%, transparent) !important;
      clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%) !important;
      overflow: hidden !important;
    }

    body.battle-mode .battle-brand span {
      font-size: 20px !important;
      line-height: 1 !important;
      color: #ffe4a2 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-shadow: 0 2px 6px #000, 0 0 12px rgba(234,178,77,.28) !important;
    }

    body.battle-mode .brand-mark {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      font-size: 18px !important;
      border-radius: 3px !important;
      background: linear-gradient(180deg, rgba(78,54,22,.96), rgba(11,11,9,.96)) !important;
      border: 1px solid rgba(226,174,82,.46) !important;
    }

    body.battle-mode .battle-round {
      justify-self: center !important;
      width: min(520px, 100%) !important;
      height: 44px !important;
      min-height: 44px !important;
      padding: 0 36px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      border: 1px solid rgba(222,169,76,.62) !important;
      background:
        linear-gradient(90deg, transparent 0 3%, rgba(8,12,13,.98) 3% 18%, rgba(57,37,16,.96) 50%, rgba(8,12,13,.98) 82%, transparent 97%) !important;
      clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%) !important;
      box-shadow: inset 0 0 0 1px rgba(255,230,146,.08), 0 0 18px rgba(218,166,72,.14) !important;
    }

    body.battle-mode .battle-round span {
      font-size: 13px !important;
      color: rgba(255,228,166,.76) !important;
      white-space: nowrap !important;
    }

    body.battle-mode .battle-round b {
      font-size: 21px !important;
      color: #ffd875 !important;
      text-shadow: 0 2px 6px #000, 0 0 14px rgba(236,185,83,.32) !important;
      white-space: nowrap !important;
    }

    body.battle-mode .battle-icon-actions {
      justify-content: end !important;
      gap: 10px !important;
    }

    body.battle-mode .battle-icon-btn {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      padding: 0 !important;
      display: grid !important;
      place-items: center !important;
      border-radius: 4px !important;
      border: 1px solid rgba(222,169,76,.56) !important;
      background: linear-gradient(180deg, rgba(54,38,18,.98), rgba(8,8,7,.98)) !important;
      color: #ffe4a2 !important;
      font-size: 19px !important;
      line-height: 1 !important;
      box-shadow: inset 0 0 0 1px rgba(255,230,150,.08), 0 0 16px rgba(218,166,72,.08) !important;
    }

    body.battle-mode .battle-stage-v3 {
      grid-template-columns: minmax(0, 1fr) 320px !important;
      grid-template-rows: minmax(0, 1fr) !important;
      gap: 8px !important;
      min-height: 0 !important;
      padding: 6px 10px 4px !important;
      overflow: hidden !important;
      background: #070808 !important;
    }

    body.battle-mode .battlefield-v3 {
      min-height: 0 !important;
      height: 100% !important;
      overflow: hidden !important;
      border: 1px solid rgba(225,169,72,.5) !important;
      border-radius: 0 !important;
      background:
        radial-gradient(circle at 50% 12%, rgba(255,210,110,.14), transparent 34%),
        linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.06) 55%, rgba(0,0,0,.22)),
        var(--battle-bg, url("../backgrounds/bg_plains_ruins.png")) center bottom / cover no-repeat !important;
      box-shadow: inset 0 0 0 1px rgba(255,231,150,.06), inset 0 -36px 64px rgba(0,0,0,.22), 0 10px 28px rgba(0,0,0,.34) !important;
    }

    body.battle-mode .battlefield-v3::before {
      opacity: .2 !important;
      background: radial-gradient(circle at 50% 54%, transparent 0 54%, rgba(0,0,0,.28) 100%) !important;
      pointer-events: none !important;
    }

    body.battle-mode .battlefield-v3::after {
      opacity: .18 !important;
      pointer-events: none !important;
    }

    body.battle-mode #effectsCanvas {
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      pointer-events: none !important;
      z-index: 22 !important;
    }

    body.battle-mode .battle-hud {
      width: 288px !important;
      max-width: 288px !important;
      z-index: 34 !important;
      pointer-events: auto !important;
      filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)) !important;
    }

    body.battle-mode .battle-hud-player {
      left: 18px !important;
      bottom: 18px !important;
      top: auto !important;
      right: auto !important;
    }

    body.battle-mode .battle-hud-enemy {
      right: 18px !important;
      top: 18px !important;
      left: auto !important;
      bottom: auto !important;
      width: 300px !important;
      max-width: 300px !important;
    }

    body.battle-mode .battle-hud .fighter-card {
      min-height: 0 !important;
      padding: 8px 10px 9px !important;
      border-radius: 3px !important;
      border: 1px solid rgba(226,171,75,.56) !important;
      background: linear-gradient(180deg, rgba(9,39,38,.88), rgba(5,10,10,.94)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,232,160,.06), 0 10px 20px rgba(0,0,0,.35) !important;
    }

    body.battle-mode .battle-hud-enemy .fighter-card {
      background: linear-gradient(180deg, rgba(52,23,17,.9), rgba(8,7,6,.96)) !important;
    }

    body.battle-mode .battle-hud .fighter-name {
      font-size: 15px !important;
      line-height: 1.12 !important;
      color: #ffe7a6 !important;
      gap: 8px !important;
    }

    body.battle-mode .battle-hud p {
      margin-top: 4px !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
      color: rgba(238,218,170,.8) !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .battle-hud .mechanic-note {
      max-height: 28px !important;
      white-space: normal !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
    }

    body.battle-mode .battle-hud .bar {
      height: 14px !important;
      margin-top: 6px !important;
      border: 1px solid rgba(255,232,160,.22) !important;
      background: rgba(0,0,0,.68) !important;
    }

    body.battle-mode .battle-hud .energy-row {
      margin-top: 7px !important;
      gap: 4px !important;
      align-items: center !important;
      max-height: 25px !important;
      overflow: hidden !important;
    }

    body.battle-mode .battle-hud .energy-dot {
      width: 13px !important;
      height: 13px !important;
      border-radius: 3px !important;
      transform: rotate(45deg) !important;
      border-color: rgba(113,205,255,.48) !important;
      background: rgba(14,28,37,.9) !important;
    }

    body.battle-mode .battle-hud .energy-dot.full {
      background: linear-gradient(135deg, #6ed4ff, #2f80d8) !important;
      box-shadow: 0 0 8px rgba(91,193,255,.45) !important;
    }

    body.battle-mode .battle-hud .status-line {
      margin-top: 7px !important;
      min-height: 20px !important;
      max-height: 60px !important;
      overflow-y: auto !important;
      gap: 3px !important;
    }

    body.battle-mode .battle-hud .status,
    body.battle-mode .enemy-resource-row {
      font-size: 10px !important;
      line-height: 1.1 !important;
      padding: 1px 4px !important;
    }

    body.battle-mode .enemy-hand-in-hud {
      margin-top: 6px !important;
      padding-top: 5px !important;
      border-top: 1px solid rgba(255,220,126,.18) !important;
    }

    body.battle-mode .opponent-card-row {
      gap: 5px !important;
      overflow: hidden !important;
    }

    body.battle-mode .card-back {
      width: 24px !important;
      height: 34px !important;
      border-radius: 3px !important;
    }

    body.battle-mode .battlefield-v3 .duel-unit {
      width: 220px !important;
      z-index: 18 !important;
      pointer-events: none !important;
    }

    body.battle-mode .battlefield-v3 .duel-unit.player-unit {
      left: 14% !important;
      bottom: 23% !important;
      top: auto !important;
      right: auto !important;
    }

    body.battle-mode .battlefield-v3 .duel-unit.enemy-unit {
      right: 28% !important;
      bottom: 26% !important;
      top: auto !important;
      left: auto !important;
    }

    body.battle-mode .battlefield-v3 .unit-sprite {
      max-width: 220px !important;
      max-height: 210px !important;
      object-fit: contain !important;
      filter: drop-shadow(0 16px 0 rgba(0,0,0,.25)) !important;
    }

    body.battle-mode .unit-overhead-hp {
      top: -38px !important;
      width: 220px !important;
      padding: 4px 6px 6px !important;
      z-index: 7 !important;
      display: none !important;
    }

    body.battle-mode .unit-overhead-hp .hp-label {
      font-size: 11px !important;
    }

    body.battle-mode .skill-banner {
      top: 18px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: min(460px, 48vw) !important;
      min-height: 38px !important;
      padding: 7px 18px !important;
      border: 1px solid rgba(234,178,77,.58) !important;
      background: linear-gradient(90deg, transparent, rgba(54,35,14,.9) 16%, rgba(12,12,10,.94) 50%, rgba(54,35,14,.9) 84%, transparent) !important;
      color: #ffe9aa !important;
      font-size: 18px !important;
      text-align: center !important;
      text-shadow: 0 2px 7px #000 !important;
      z-index: 40 !important;
      pointer-events: none !important;
    }

    body.battle-mode .log-panel-v3 {
      width: 320px !important;
      min-width: 320px !important;
      height: 100% !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      border: 1px solid rgba(222,169,76,.54) !important;
      background: linear-gradient(180deg, rgba(8,13,14,.96), rgba(3,4,4,.98)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,226,142,.07), inset 0 0 42px rgba(0,0,0,.42) !important;
    }

    body.battle-mode .log-panel-v3 .tabs {
      min-height: 50px !important;
      padding: 10px 12px 8px !important;
      border-bottom: 1px solid rgba(222,169,76,.28) !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
    }

    body.battle-mode .log-panel-v3 h3 {
      margin: 0 !important;
      color: #ffe4a2 !important;
      font-size: 18px !important;
      white-space: nowrap !important;
      text-shadow: 0 2px 6px #000 !important;
    }

    body.battle-mode #toggleLogBtn {
      min-height: 30px !important;
      padding: 5px 10px !important;
      font-size: 12px !important;
      border-radius: 3px !important;
    }

    body.battle-mode .log-list {
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding: 10px 12px 14px !important;
      gap: 0 !important;
      scrollbar-width: thin !important;
      scrollbar-color: rgba(218,159,58,.58) rgba(0,0,0,.22) !important;
    }

    body.battle-mode #battleLog > * {
      position: relative !important;
      margin: 0 !important;
      padding: 9px 8px 9px 24px !important;
      border-left: 0 !important;
      border-bottom: 1px solid rgba(222,169,76,.16) !important;
      background: linear-gradient(90deg, rgba(222,169,76,.08), rgba(0,0,0,0)) !important;
      color: rgba(244,226,184,.9) !important;
      line-height: 1.42 !important;
      font-size: 12px !important;
    }

    body.battle-mode #battleLog > *::before {
      content: "" !important;
      position: absolute !important;
      left: 8px !important;
      top: 14px !important;
      width: 8px !important;
      height: 8px !important;
      margin: 0 !important;
      border-radius: 2px !important;
      transform: rotate(45deg) !important;
      background: #e8b75d !important;
      box-shadow: 0 0 9px rgba(232,183,93,.42) !important;
    }

    body.battle-mode .hand-dock-v3 {
      grid-template-columns: 210px minmax(0, 1fr) 360px !important;
      height: 326px !important;
      min-height: 326px !important;
      margin-top: 0 !important;
      padding: 8px 10px 10px !important;
      gap: 10px !important;
      overflow: visible !important;
      position: relative !important;
      z-index: 500 !important;
      border-top: 1px solid rgba(222,169,76,.48) !important;
      background:
        radial-gradient(circle at 50% -22%, rgba(224,166,70,.15), transparent 36%),
        linear-gradient(180deg, rgba(7,9,10,.98), rgba(2,3,3,.99)) !important;
      box-shadow: inset 0 1px 0 rgba(255,230,150,.14), 0 -12px 26px rgba(0,0,0,.34) !important;
    }

    body.battle-mode .hand-command-strip {
      display: grid !important;
      grid-template-rows: 1fr auto !important;
      align-content: center !important;
      justify-items: center !important;
      gap: 10px !important;
      padding: 9px 8px !important;
      border: 1px solid rgba(222,169,76,.36) !important;
      background: linear-gradient(180deg, rgba(14,18,18,.58), rgba(3,4,4,.86)) !important;
      overflow: hidden !important;
    }

    body.battle-mode #endTurnBtn,
    body.battle-mode .hand-command-strip #endTurnBtn {
      order: 1 !important;
      width: 154px !important;
      height: 154px !important;
      min-width: 154px !important;
      min-height: 154px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      display: grid !important;
      place-items: center !important;
      text-align: center !important;
      color: #fff0b6 !important;
      font-size: 22px !important;
      line-height: 1.16 !important;
      font-weight: 900 !important;
      background:
        radial-gradient(circle at 50% 50%, rgba(91,64,27,.92), rgba(17,13,8,.98) 62%, rgba(5,5,4,1) 100%),
        conic-gradient(from 45deg, rgba(226,171,75,.25), rgba(226,171,75,.8), rgba(226,171,75,.25)) !important;
      border: 1px solid rgba(232,178,82,.68) !important;
      box-shadow: inset 0 0 0 5px rgba(0,0,0,.42), inset 0 0 0 7px rgba(232,178,82,.17), 0 0 24px rgba(232,178,82,.13) !important;
      text-shadow: 0 2px 8px #000, 0 0 13px rgba(255,200,86,.62) !important;
    }

    body.battle-mode .deck-counters {
      order: 2 !important;
      width: 100% !important;
      justify-content: center !important;
      align-self: start !important;
      display: flex !important;
    }

    body.battle-mode .deck-counters .energy-badge {
      width: 170px !important;
      min-height: 34px !important;
      display: grid !important;
      place-items: center !important;
      padding: 5px 9px !important;
      border: 1px solid rgba(116,202,255,.48) !important;
      background:
        linear-gradient(135deg, rgba(69,181,255,.22) 0 18%, transparent 18% 32%, rgba(69,181,255,.18) 32% 50%, transparent 50%),
        rgba(0,0,0,.56) !important;
      color: #d8f3ff !important;
      font-size: 18px !important;
      font-weight: 900 !important;
      text-shadow: 0 2px 5px #000 !important;
    }

    body.battle-mode .hand-dock-v3 .hand-row {
      height: 306px !important;
      min-height: 306px !important;
      padding: 18px 6px 8px !important;
      gap: 14px !important;
      align-items: end !important;
      justify-content: center !important;
      overflow-x: auto !important;
      overflow-y: visible !important;
      border: 1px solid rgba(222,169,76,.18) !important;
      background: linear-gradient(180deg, rgba(10,12,13,.46), rgba(2,3,3,.2)) !important;
      box-shadow: none !important;
      scroll-padding: 20px !important;
    }

    body.battle-mode .hand-dock-v3 .card {
      width: 180px !important;
      flex: 0 0 180px !important;
      height: 286px !important;
      min-height: 286px !important;
      max-height: 286px !important;
      grid-template-rows: 34px 22px 118px 1fr auto !important;
      gap: 5px !important;
      padding: 12px 12px 9px !important;
      overflow: hidden !important;
      transform-origin: center bottom !important;
      border-radius: 6px !important;
    }

    body.battle-mode .hand-dock-v3 .card:hover,
    body.battle-mode .hand-dock-v3 .card:focus {
      transform: translateY(-14px) rotate(-.5deg) !important;
      z-index: 780 !important;
    }

    body.battle-mode .hand-dock-v3 .card.selected {
      transform: translateY(-20px) !important;
      z-index: 790 !important;
      border-color: rgba(255,219,105,.94) !important;
      box-shadow: 0 22px 34px rgba(0,0,0,.56), 0 0 0 2px rgba(255,219,105,.42), 0 0 28px rgba(255,204,83,.28), inset 0 0 0 1px rgba(255,232,148,.24) !important;
    }

    body.battle-mode .hand-dock-v3 .card-name {
      font-size: 15px !important;
      line-height: 1.12 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    body.battle-mode .hand-dock-v3 .card-cost {
      width: 46px !important;
      height: 50px !important;
      min-width: 46px !important;
      left: -4px !important;
      top: -5px !important;
    }

    body.battle-mode .hand-dock-v3 .card-meta {
      min-height: 22px !important;
      max-height: 22px !important;
      gap: 4px !important;
    }

    body.battle-mode .hand-dock-v3 .card-meta .pill {
      font-size: 10px !important;
      line-height: 1.1 !important;
      padding: 2px 5px !important;
      white-space: nowrap !important;
    }

    body.battle-mode .hand-dock-v3 .card-art {
      height: 116px !important;
      min-height: 116px !important;
      border: 1px solid rgba(232,178,82,.24) !important;
      background-size: contain !important;
      background-position: center !important;
    }

    body.battle-mode .hand-dock-v3 .card-desc {
      min-height: 58px !important;
      max-height: 58px !important;
      padding: 6px 7px !important;
      font-size: 11px !important;
      line-height: 1.28 !important;
      overflow: hidden !important;
    }

    body.battle-mode .hand-dock-v3 .card-power {
      min-height: 24px !important;
      max-height: 24px !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
      padding: 4px 6px !important;
      overflow: hidden !important;
    }

    body.battle-mode .card-preview-panel {
      width: 360px !important;
      min-width: 360px !important;
      height: 306px !important;
      max-height: 306px !important;
      min-height: 306px !important;
      display: grid !important;
      grid-template-rows: 32px 25px 18px 112px 24px 28px 28px !important;
      gap: 6px !important;
      padding: 12px 14px !important;
      overflow: hidden !important;
      border-radius: 0 !important;
      border: 1px solid rgba(222,169,76,.54) !important;
      background: linear-gradient(180deg, rgba(9,11,11,.97), rgba(3,4,4,.99)) !important;
      box-shadow: inset 0 0 0 1px rgba(255,226,142,.07) !important;
    }

    body.battle-mode .preview-empty {
      place-self: center !important;
      text-align: center !important;
      color: rgba(255,232,184,.72) !important;
      line-height: 1.5 !important;
    }

    body.battle-mode .preview-card-title {
      font-size: 17px !important;
      line-height: 1.15 !important;
      min-width: 0 !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
      color: #ffe8a9 !important;
    }

    body.battle-mode .preview-card-title > span:first-child {
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .preview-card-title > span:last-child {
      flex: 0 0 auto !important;
      font-size: 14px !important;
      color: #d9f0ff !important;
    }

    body.battle-mode .preview-card-meta {
      min-height: 25px !important;
      max-height: 25px !important;
      overflow: hidden !important;
      gap: 5px !important;
    }

    body.battle-mode .preview-card-meta .pill,
    body.battle-mode .preview-card-keywords .pill,
    body.battle-mode .preview-detail-grid .pill {
      font-size: 11px !important;
      line-height: 1.12 !important;
      white-space: nowrap !important;
    }

    body.battle-mode .preview-effectiveness-slot {
      min-height: 18px !important;
      max-height: 18px !important;
    }

    body.battle-mode .preview-art-row {
      grid-template-columns: 112px minmax(0, 1fr) !important;
      min-height: 112px !important;
      max-height: 112px !important;
      gap: 10px !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-art-box {
      width: 112px !important;
      height: 112px !important;
      min-height: 112px !important;
      background-size: contain !important;
      background-position: center !important;
    }

    body.battle-mode .preview-card-desc {
      min-height: 112px !important;
      max-height: 112px !important;
      padding: 8px 9px !important;
      font-size: 12px !important;
      line-height: 1.38 !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-card-keywords {
      min-height: 24px !important;
      max-height: 24px !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-card-power {
      min-height: 28px !important;
      max-height: 28px !important;
      padding: 5px 8px !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-detail-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 6px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      overflow: hidden !important;
    }

    body.battle-mode .preview-detail-grid .pill {
      min-height: 28px !important;
      padding: 4px 6px !important;
      justify-content: center !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    @media (max-width: 1600px) {
      body.battle-mode .battle-layout-v3 {
        grid-template-rows: 54px minmax(0, 1fr) 306px !important;
      }

      body.battle-mode .battle-top {
        height: 54px !important;
        min-height: 54px !important;
        grid-template-columns: 250px minmax(330px, 1fr) 220px !important;
      }

      body.battle-mode .battle-stage-v3 {
        grid-template-columns: minmax(0, 1fr) 300px !important;
      }

      body.battle-mode .log-panel-v3 {
        width: 300px !important;
        min-width: 300px !important;
      }

      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 190px minmax(0, 1fr) 340px !important;
        height: 306px !important;
        min-height: 306px !important;
      }

      body.battle-mode .hand-dock-v3 .hand-row,
      body.battle-mode .card-preview-panel {
        height: 286px !important;
        min-height: 286px !important;
        max-height: 286px !important;
      }

      body.battle-mode .hand-dock-v3 .card {
        width: 162px !important;
        flex-basis: 162px !important;
        height: 266px !important;
        min-height: 266px !important;
        max-height: 266px !important;
        grid-template-rows: 32px 21px 104px 1fr auto !important;
      }

      body.battle-mode .card-preview-panel {
        width: 340px !important;
        min-width: 340px !important;
      }
    }

    @media (max-width: 1366px) {
      body.battle-mode .battle-layout-v3 {
        grid-template-rows: 50px minmax(0, 1fr) 288px !important;
      }

      body.battle-mode .battle-top {
        height: 50px !important;
        min-height: 50px !important;
        grid-template-columns: 210px minmax(280px, 1fr) 188px !important;
        padding: 4px 9px !important;
      }

      body.battle-mode .battle-brand span {
        font-size: 17px !important;
      }

      body.battle-mode .battle-round {
        height: 40px !important;
        padding: 0 28px !important;
      }

      body.battle-mode .battle-round b {
        font-size: 18px !important;
      }

      body.battle-mode .battle-icon-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
      }

      body.battle-mode .battle-stage-v3 {
        grid-template-columns: minmax(0, 1fr) 286px !important;
        padding: 5px 7px 3px !important;
      }

      body.battle-mode .log-panel-v3 {
        width: 286px !important;
        min-width: 286px !important;
      }

      body.battle-mode .battle-hud {
        width: 252px !important;
        max-width: 252px !important;
      }

      body.battle-mode .battle-hud-enemy {
        width: 268px !important;
        max-width: 268px !important;
      }

      body.battle-mode .battlefield-v3 .duel-unit {
        width: 190px !important;
      }

      body.battle-mode .battlefield-v3 .unit-sprite {
        max-width: 190px !important;
        max-height: 178px !important;
      }

      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 174px minmax(0, 1fr) 320px !important;
        height: 288px !important;
        min-height: 288px !important;
        padding: 7px !important;
        gap: 8px !important;
      }

      body.battle-mode .hand-command-strip #endTurnBtn {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
        font-size: 19px !important;
      }

      body.battle-mode .deck-counters .energy-badge {
        width: 142px !important;
        font-size: 15px !important;
      }

      body.battle-mode .hand-dock-v3 .hand-row,
      body.battle-mode .card-preview-panel {
        height: 274px !important;
        min-height: 274px !important;
        max-height: 274px !important;
      }

      body.battle-mode .hand-dock-v3 .card {
        width: 148px !important;
        flex-basis: 148px !important;
        height: 252px !important;
        min-height: 252px !important;
        max-height: 252px !important;
        grid-template-rows: 30px 20px 92px 1fr auto !important;
        padding: 10px 9px 8px !important;
      }

      body.battle-mode .hand-dock-v3 .card-art {
        height: 92px !important;
        min-height: 92px !important;
      }

      body.battle-mode .hand-dock-v3 .card-desc {
        min-height: 50px !important;
        max-height: 50px !important;
        font-size: 10px !important;
      }

      body.battle-mode .card-preview-panel {
        width: 320px !important;
        min-width: 320px !important;
        grid-template-rows: 28px 23px 16px 96px 22px 26px 26px !important;
        padding: 10px !important;
      }

      body.battle-mode .preview-art-row {
        grid-template-columns: 96px minmax(0, 1fr) !important;
        min-height: 96px !important;
        max-height: 96px !important;
      }

      body.battle-mode .preview-art-box,
      body.battle-mode .preview-card-desc {
        width: 96px !important;
        height: 96px !important;
        min-height: 96px !important;
        max-height: 96px !important;
      }

      body.battle-mode .preview-card-desc {
        width: auto !important;
        font-size: 11px !important;
      }
    }

    @media (max-width: 980px) {
      body.battle-mode .battle-top {
        grid-template-columns: 44px minmax(220px, 1fr) 150px !important;
      }

      body.battle-mode .battle-brand span {
        display: none !important;
      }

      body.battle-mode .battle-stage-v3 {
        grid-template-columns: minmax(0, 1fr) 250px !important;
      }

      body.battle-mode .log-panel-v3 {
        width: 250px !important;
        min-width: 250px !important;
      }

      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 132px minmax(0, 1fr) 270px !important;
      }

      body.battle-mode .card-preview-panel {
        width: 270px !important;
        min-width: 270px !important;
      }
    }

    /* Battle Reference Recovery Pass: restore sprite assets and combat feedback after 87c297f. */
    body.battle-mode .battle-top {
      background:
        linear-gradient(180deg, rgba(10, 8, 5, .84), rgba(5, 5, 4, .38)) !important;
      box-shadow:
        inset 0 -1px 0 rgba(255, 225, 132, .18),
        0 10px 22px rgba(0, 0, 0, .34) !important;
    }

    body.battle-mode .battle-brand {
      width: 280px !important;
      height: 48px !important;
      padding: 0 30px 0 60px !important;
      border: 0 !important;
      background-image: url("../ui/sprites/topTitlePlate.png") !important;
      background-size: 100% 100% !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-color: transparent !important;
      clip-path: none !important;
      box-shadow: none !important;
    }

    body.battle-mode .brand-mark {
      opacity: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    body.battle-mode .battle-round {
      width: min(360px, 100%) !important;
      height: 48px !important;
      min-height: 48px !important;
      border: 0 !important;
      background-image: url("../ui/sprites/turnPlate.png") !important;
      background-size: 100% 100% !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-color: transparent !important;
      clip-path: none !important;
      box-shadow: none !important;
    }

    body.battle-mode .battle-icon-btn {
      width: 58px !important;
      height: 48px !important;
      min-width: 58px !important;
      min-height: 48px !important;
      border: 0 !important;
      border-radius: 0 !important;
      background-size: 100% 100% !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-color: transparent !important;
      box-shadow: none !important;
      color: transparent !important;
      font-size: 0 !important;
      text-shadow: none !important;
    }

    body.battle-mode #battleCodexBtn {
      background-image: url("../ui/sprites/topButtonBook.png") !important;
    }

    body.battle-mode #battleSettingsBtn {
      background-image: url("../ui/sprites/topButtonGear.png") !important;
    }

    body.battle-mode #battleExitBtn {
      background-image: url("../ui/sprites/topButtonMenu.png") !important;
    }

    body.battle-mode .hand-command-strip {
      border-color: rgba(226, 171, 75, .48) !important;
      background:
        radial-gradient(circle at 50% 32%, rgba(152, 92, 26, .28), transparent 58%),
        repeating-linear-gradient(135deg, rgba(255, 217, 128, .055) 0 6px, rgba(0, 0, 0, 0) 6px 14px),
        linear-gradient(180deg, rgba(24, 18, 11, .78), rgba(5, 5, 4, .94)) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 232, 150, .08),
        inset 0 0 32px rgba(224, 166, 70, .08) !important;
    }

    body.battle-mode #endTurnBtn,
    body.battle-mode .hand-command-strip #endTurnBtn {
      background-image: url("../ui/sprites/endTurnCircle.png") !important;
      background-size: contain !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      background-color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      color: #fff2bf !important;
      text-shadow: 0 2px 8px #000, 0 0 14px rgba(255, 205, 88, .72) !important;
    }

    body.battle-mode .deck-counters .energy-badge {
      clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%) !important;
      border-color: rgba(130, 207, 255, .58) !important;
      background:
        radial-gradient(circle at 22px 50%, rgba(125, 220, 255, .95) 0 5px, rgba(36, 132, 214, .8) 6px, transparent 7px),
        repeating-linear-gradient(90deg, rgba(86, 191, 255, .18) 0 16px, rgba(0, 0, 0, 0) 16px 24px),
        linear-gradient(180deg, rgba(18, 35, 41, .9), rgba(5, 8, 9, .96)) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 232, 160, .08),
        0 0 14px rgba(80, 190, 255, .12) !important;
    }

    body.battle-mode .unit-overhead-hp {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      top: -76px !important;
      left: 50% !important;
      width: 230px !important;
      padding: 5px 8px 7px !important;
      transform: translateX(-50%) !important;
      border: 1px solid rgba(255, 226, 142, .5) !important;
      background: linear-gradient(180deg, rgba(10, 13, 13, .92), rgba(2, 3, 3, .86)) !important;
      box-shadow: 0 8px 16px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 232, 150, .08) !important;
      z-index: 30 !important;
      pointer-events: none !important;
    }

    body.battle-mode .duel-unit .unit-label,
    body.battle-mode .duel-unit .unit-hp {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: none !important;
    }

    body.battle-mode .duel-unit .unit-label {
      position: absolute !important;
      left: 50% !important;
      top: -27px !important;
      bottom: auto !important;
      transform: translateX(-50%) !important;
      width: max-content !important;
      max-width: 210px !important;
      padding: 3px 9px !important;
      border: 1px solid rgba(255, 226, 142, .34) !important;
      background: rgba(3, 4, 4, .72) !important;
      color: #ffe8a6 !important;
      font-size: 12px !important;
      line-height: 1.15 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-shadow: 0 2px 6px #000 !important;
    }

    body.battle-mode .duel-unit .unit-hp {
      position: absolute !important;
      left: 50% !important;
      top: -7px !important;
      bottom: auto !important;
      transform: translateX(-50%) !important;
      width: 170px !important;
      height: 15px !important;
      border: 1px solid rgba(255, 226, 142, .32) !important;
      background: rgba(0, 0, 0, .72) !important;
      overflow: hidden !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card {
      transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease !important;
      will-change: transform, filter !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card:hover,
    body.battle-mode .hand-dock-v3 #playerHand .card:focus {
      transform: translateY(-18px) rotate(-.6deg) !important;
      filter: brightness(1.08) saturate(1.1) !important;
      border-color: rgba(255, 224, 112, .84) !important;
      box-shadow:
        0 24px 36px rgba(0, 0, 0, .58),
        0 0 0 2px rgba(255, 219, 105, .28),
        0 0 22px var(--elm-glow, rgba(255, 205, 92, .3)) !important;
      z-index: 780 !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card.selected {
      transform: translateY(-24px) scale(1.02) !important;
      filter: brightness(1.12) saturate(1.15) !important;
      border-color: rgba(255, 228, 124, .98) !important;
      box-shadow:
        0 28px 42px rgba(0, 0, 0, .62),
        0 0 0 3px rgba(255, 219, 105, .46),
        0 0 34px var(--elm-glow, rgba(255, 205, 92, .36)),
        inset 0 0 0 1px rgba(255, 232, 148, .28) !important;
      z-index: 800 !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card.playing {
      animation: handCardPlayFlash .34s ease both !important;
      filter: brightness(1.18) saturate(1.18) !important;
      z-index: 820 !important;
    }

    body.battle-mode .played-card-stage.show .card {
      filter: brightness(1.12) saturate(1.12) drop-shadow(0 0 24px var(--elm-glow, rgba(255, 205, 92, .38))) !important;
      box-shadow:
        0 30px 44px rgba(0, 0, 0, .58),
        0 0 0 2px rgba(255, 221, 124, .36),
        0 0 30px var(--elm-glow, rgba(255, 205, 92, .32)) !important;
    }

    @keyframes handCardPlayFlash {
      0% { transform: translateY(-24px) scale(1.02); }
      48% { transform: translateY(-42px) scale(1.08); }
      100% { transform: translateY(-18px) scale(.98); }
    }

    @media (max-width: 1600px) {
      body.battle-mode .battle-brand {
        width: 250px !important;
        height: 46px !important;
        padding-left: 54px !important;
      }

      body.battle-mode .battle-round {
        height: 46px !important;
      }

      body.battle-mode .battle-icon-btn {
        width: 54px !important;
        height: 46px !important;
        min-width: 54px !important;
        min-height: 46px !important;
      }

      body.battle-mode .unit-overhead-hp {
        width: 210px !important;
      }
    }

    @media (max-width: 1366px) {
      body.battle-mode .battle-brand {
        width: 210px !important;
        height: 42px !important;
        padding-left: 45px !important;
        padding-right: 20px !important;
      }

      body.battle-mode .battle-round {
        height: 42px !important;
        min-height: 42px !important;
      }

      body.battle-mode .battle-icon-btn {
        width: 46px !important;
        height: 40px !important;
        min-width: 46px !important;
        min-height: 40px !important;
      }

      body.battle-mode .unit-overhead-hp {
        top: -68px !important;
        width: 190px !important;
      }

      body.battle-mode .duel-unit .unit-label {
        max-width: 185px !important;
        font-size: 11px !important;
      }

      body.battle-mode .duel-unit .unit-hp {
        width: 150px !important;
      }
    }

    /* Battle Dock Scale Refinement Pass: hand scale, layering, single HP, and energy slots. */
    body.battle-mode .hand-dock-v3 {
      grid-template-columns: 190px minmax(0, 1fr) 320px !important;
      gap: 10px !important;
      overflow: visible !important;
      z-index: 720 !important;
      border-top-color: rgba(231, 176, 78, .58) !important;
      background:
        radial-gradient(ellipse at 50% -18%, rgba(226, 171, 75, .18), transparent 42%),
        linear-gradient(180deg, rgba(8, 9, 9, .86), rgba(2, 3, 3, .98)) !important;
    }

    body.battle-mode .hand-command-strip {
      width: 190px !important;
      overflow: visible !important;
      padding: 10px 6px 8px !important;
      background:
        radial-gradient(circle at 50% 38%, rgba(112, 74, 28, .24), transparent 62%),
        linear-gradient(180deg, rgba(18, 15, 10, .82), rgba(5, 5, 4, .96)) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 232, 150, .1),
        inset 0 0 32px rgba(226, 171, 75, .08),
        0 0 18px rgba(0, 0, 0, .25) !important;
    }

    body.battle-mode #endTurnBtn,
    body.battle-mode .hand-command-strip #endTurnBtn {
      width: 176px !important;
      height: 170px !important;
      min-width: 176px !important;
      min-height: 170px !important;
      font-size: 24px !important;
      line-height: 1.12 !important;
      background-size: 100% 100% !important;
    }

    body.battle-mode .deck-counters {
      width: 100% !important;
      align-self: end !important;
    }

    body.battle-mode .energy-meter {
      width: 170px !important;
      min-height: 64px !important;
      display: grid !important;
      grid-template-rows: 34px 18px !important;
      align-items: center !important;
      justify-items: center !important;
      gap: 4px !important;
      padding: 7px 8px 6px !important;
      border: 1px solid rgba(121, 204, 255, .48) !important;
      clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%) !important;
      background:
        radial-gradient(circle at 20px 18px, rgba(121, 222, 255, .78), transparent 9px),
        linear-gradient(180deg, rgba(14, 29, 35, .9), rgba(4, 7, 8, .96)) !important;
      box-shadow:
        inset 0 0 0 1px rgba(255, 232, 160, .08),
        0 0 14px rgba(80, 190, 255, .12) !important;
    }

    body.battle-mode .energy-slots {
      display: grid !important;
      grid-template-columns: repeat(10, 1fr) !important;
      gap: 3px !important;
      width: 142px !important;
      height: 30px !important;
      align-items: center !important;
    }

    body.battle-mode .energy-slot {
      width: 10px !important;
      height: 18px !important;
      border: 1px solid rgba(110, 196, 255, .42) !important;
      border-radius: 2px !important;
      transform: skewX(-9deg) !important;
      background: linear-gradient(180deg, rgba(9, 20, 25, .94), rgba(3, 7, 9, .96)) !important;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, .55) !important;
    }

    body.battle-mode .energy-slot.full {
      background:
        linear-gradient(180deg, #8fe7ff, #2e8ce7 58%, #0c4a9d) !important;
      box-shadow:
        inset 0 0 5px rgba(255, 255, 255, .28),
        0 0 8px rgba(92, 201, 255, .44) !important;
    }

    body.battle-mode .energy-count {
      color: #d8f4ff !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-shadow: 0 2px 5px #000 !important;
    }

    body.battle-mode .hand-dock-v3 .hand-row,
    body.battle-mode #playerHand {
      height: 322px !important;
      min-height: 322px !important;
      max-height: none !important;
      padding: 0 8px 6px !important;
      gap: 12px !important;
      justify-content: safe center !important;
      align-items: end !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      overscroll-behavior-x: contain;
      border-color: rgba(222, 169, 76, .24) !important;
      background:
        radial-gradient(ellipse at 50% 100%, rgba(226, 171, 75, .08), transparent 52%),
        linear-gradient(180deg, rgba(4, 6, 7, .42), rgba(2, 3, 3, .16)) !important;
      z-index: 930 !important;
    }

    body.battle-mode .hand-dock-v3 .card {
      width: 188px !important;
      flex: 0 0 188px !important;
      height: 316px !important;
      min-height: 316px !important;
      max-height: 316px !important;
      grid-template-rows: 36px 22px 142px 1fr auto !important;
      padding: 12px 12px 10px !important;
      z-index: 2 !important;
    }

    body.battle-mode .hand-dock-v3 .card-art {
      height: 142px !important;
      min-height: 142px !important;
    }

    body.battle-mode .hand-dock-v3 .card-desc {
      min-height: 62px !important;
      max-height: 62px !important;
      margin-top: 12px !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card:hover,
    body.battle-mode .hand-dock-v3 #playerHand .card:focus {
      transform: translateY(-42px) rotate(-.6deg) !important;
      z-index: 940 !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card.selected {
      transform: translateY(-48px) scale(1.025) !important;
      z-index: 950 !important;
    }

    body.battle-mode .card-preview-panel {
      width: 320px !important;
      min-width: 320px !important;
      z-index: 910 !important;
    }

    body.battle-mode .unit-overhead-hp {
      top: -50px !important;
      width: 220px !important;
      min-height: 34px !important;
      padding: 5px 8px 6px !important;
    }

    body.battle-mode .unit-overhead-hp .hp-label {
      font-size: 11px !important;
      line-height: 1.1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    body.battle-mode .duel-unit .unit-label,
    body.battle-mode .duel-unit .unit-hp {
      display: none !important;
    }

    @media (max-width: 1600px) {
      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 176px minmax(0, 1fr) 300px !important;
      }

      body.battle-mode .hand-command-strip {
        width: 176px !important;
      }

      body.battle-mode #endTurnBtn,
      body.battle-mode .hand-command-strip #endTurnBtn {
        width: 160px !important;
        height: 154px !important;
        min-width: 160px !important;
        min-height: 154px !important;
        font-size: 22px !important;
      }

      body.battle-mode .energy-meter {
        width: 158px !important;
      }

      body.battle-mode .energy-slots {
        width: 132px !important;
      }

      body.battle-mode .hand-dock-v3 .card {
        width: 172px !important;
        flex-basis: 172px !important;
        height: 298px !important;
        min-height: 298px !important;
        max-height: 298px !important;
        grid-template-rows: 34px 21px 124px 1fr auto !important;
      }

      body.battle-mode .hand-dock-v3 .card-art {
        height: 124px !important;
        min-height: 124px !important;
      }

      body.battle-mode .hand-dock-v3 .card-desc {
        margin-top: 10px !important;
      }

      body.battle-mode .card-preview-panel {
        width: 300px !important;
        min-width: 300px !important;
      }
    }

    @media (max-width: 1400px) {
      body.battle-mode .hand-dock-v3 {
        grid-template-columns: 168px minmax(0, 1fr) 292px !important;
      }

      body.battle-mode .hand-command-strip {
        width: 168px !important;
      }

      body.battle-mode #endTurnBtn,
      body.battle-mode .hand-command-strip #endTurnBtn {
        width: 148px !important;
        height: 142px !important;
        min-width: 148px !important;
        min-height: 142px !important;
        font-size: 20px !important;
      }

      body.battle-mode .energy-meter {
        width: 150px !important;
        min-height: 58px !important;
      }

      body.battle-mode .energy-slots {
        width: 124px !important;
        gap: 2px !important;
      }

      body.battle-mode .energy-slot {
        width: 9px !important;
        height: 16px !important;
      }

      body.battle-mode .hand-dock-v3 .hand-row,
      body.battle-mode #playerHand {
        height: 298px !important;
        min-height: 298px !important;
        max-height: none !important;
        gap: 8px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
      }

      body.battle-mode .hand-dock-v3 .card {
        width: 158px !important;
        flex-basis: 158px !important;
        height: 274px !important;
        min-height: 274px !important;
        max-height: 274px !important;
        grid-template-rows: 30px 20px 112px 1fr auto !important;
        padding: 10px 9px 8px !important;
      }

      body.battle-mode .hand-dock-v3 .card-art {
        height: 112px !important;
        min-height: 112px !important;
      }

      body.battle-mode .hand-dock-v3 .card-desc {
        min-height: 52px !important;
        max-height: 52px !important;
        margin-top: 8px !important;
      }

      body.battle-mode .card-preview-panel {
        width: 292px !important;
        min-width: 292px !important;
      }

      body.battle-mode .unit-overhead-hp {
        top: -46px !important;
        width: 190px !important;
      }
    }

    /* Final small battle UI fix pass: keep selected cards grounded after hover, fit preview labels, and unclip HUD energy. */
    body.battle-mode .hand-dock-v3 #playerHand .card:not(:hover):not(.playing) {
      transform: translateY(0) rotate(0) !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card:hover {
      transform: translateY(-42px) rotate(-.6deg) !important;
      z-index: 940 !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card:focus:not(:hover):not(.playing),
    body.battle-mode .hand-dock-v3 #playerHand .card:focus-visible:not(:hover):not(.playing) {
      transform: translateY(0) rotate(0) !important;
      outline: 2px solid rgba(255, 224, 112, .74) !important;
      outline-offset: 3px !important;
    }

    body.battle-mode .hand-dock-v3 #playerHand .card.selected:not(:hover):not(.playing) {
      transform: translateY(0) scale(1) !important;
      filter: brightness(1.1) saturate(1.12) !important;
      border-color: rgba(255, 228, 124, .98) !important;
      box-shadow:
        0 14px 24px rgba(0, 0, 0, .46),
        0 0 0 2px rgba(255, 219, 105, .38),
        0 0 24px var(--elm-glow, rgba(255, 205, 92, .34)),
        inset 0 0 0 1px rgba(255, 232, 148, .24) !important;
      z-index: 935 !important;
    }

    /* Pause hand hover transition during re-render so new DOM lands at final position without bounce */
    body.battle-mode.hand-hover-suppressed .hand-dock-v3 #playerHand .card:not(.playing) {
      transition: none !important;
    }

    /* Disable pointer events on hand cards while combat input is locked */
    body.battle-mode.combat-input-locked .hand-dock-v3 #playerHand .card {
      pointer-events: none !important;
    }

    body.battle-mode .card-preview-panel {
      height: 312px !important;
      min-height: 312px !important;
      max-height: 312px !important;
      grid-template-rows: 30px 23px 16px 126px 22px 25px 25px !important;
      gap: 5px !important;
      padding-top: 8px !important;
      padding-bottom: 7px !important;
    }

    body.battle-mode .preview-card-title {
      min-height: 30px !important;
      padding-bottom: 3px !important;
    }

    body.battle-mode .preview-card-meta {
      min-height: 23px !important;
      max-height: 23px !important;
    }

    body.battle-mode .preview-effectiveness-slot {
      min-height: 16px !important;
      max-height: 16px !important;
    }

    body.battle-mode .preview-art-row {
      min-height: 126px !important;
      max-height: 126px !important;
    }

    body.battle-mode .preview-art-box {
      width: 118px !important;
      height: 118px !important;
      min-height: 118px !important;
    }

    body.battle-mode .preview-card-desc {
      min-height: 126px !important;
      max-height: 126px !important;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }

    body.battle-mode .preview-card-keywords {
      min-height: 22px !important;
      max-height: 22px !important;
    }

    body.battle-mode .preview-card-power {
      min-height: 25px !important;
      max-height: 25px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
    }

    body.battle-mode .preview-detail-grid {
      min-height: 25px !important;
      max-height: 25px !important;
    }

    body.battle-mode .preview-detail-grid .pill {
      min-height: 25px !important;
      padding-top: 3px !important;
      padding-bottom: 3px !important;
    }

    body.battle-mode .battle-hud .energy-row {
      max-height: none !important;
      overflow: visible !important;
      margin-bottom: 6px !important;
      position: relative !important;
      z-index: 3 !important;
    }

    body.battle-mode .battle-hud .status-line {
      margin-top: 8px !important;
      position: relative !important;
      z-index: 1 !important;
    }

    @media (max-width: 1400px) {
      body.battle-mode .hand-dock-v3 #playerHand .card:hover {
        transform: translateY(-36px) rotate(-.6deg) !important;
      }

      body.battle-mode .card-preview-panel {
        grid-template-rows: 28px 22px 14px 100px 20px 24px 24px !important;
        gap: 4px !important;
        padding-top: 7px !important;
        padding-bottom: 6px !important;
      }

      body.battle-mode .preview-card-title {
        min-height: 28px !important;
      }

      body.battle-mode .preview-card-meta {
        min-height: 22px !important;
        max-height: 22px !important;
      }

      body.battle-mode .preview-effectiveness-slot {
        min-height: 14px !important;
        max-height: 14px !important;
      }

      body.battle-mode .preview-art-row {
        min-height: 100px !important;
        max-height: 100px !important;
      }

      body.battle-mode .preview-art-box {
        width: 92px !important;
        height: 92px !important;
        min-height: 92px !important;
      }

      body.battle-mode .preview-card-desc {
        min-height: 100px !important;
        max-height: 100px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
      }

      body.battle-mode .preview-card-keywords {
        min-height: 20px !important;
        max-height: 20px !important;
      }

      body.battle-mode .preview-card-power,
      body.battle-mode .preview-detail-grid,
      body.battle-mode .preview-detail-grid .pill {
        min-height: 24px !important;
        max-height: 24px !important;
      }
    }

  body.home-mode .home-title-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
  }
  .home-title-art {
    position: relative;
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
  }
  .home-title-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  /* ── Hotspot buttons (desktop/landscape) — transparent clickable areas ── */
  .home-title-screen .home-hotspot {
    position: absolute !important;
    left: 39.5%;
    width: 20.8%;
    height: 7.9%;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    opacity: 1;
    cursor: pointer !important;
    z-index: 5 !important;
    transform: none !important;
    filter: none !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
    appearance: none;
    -webkit-appearance: none;
  }
  .home-title-screen .home-hotspot::before,
  .home-title-screen .home-hotspot::after {
    content: none !important;
    display: none !important;
  }
  .home-title-screen .home-hotspot:focus-visible {
    outline: 2px solid rgba(255, 213, 103, 0.85) !important;
    outline-offset: 2px !important;
    background: transparent !important;
    box-shadow: 0 0 12px rgba(245, 190, 70, 0.25) !important;
  }
  .home-title-screen .home-hotspot:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(245, 190, 70, 0.55) !important;
    box-shadow: 0 0 18px rgba(245, 190, 70, 0.30) !important;
    transform: none !important;
    filter: none !important;
  }
  .home-title-screen .home-hotspot:active {
    background: transparent !important;
    background-color: transparent !important;
    transform: none !important;
    box-shadow: 0 0 22px rgba(245, 190, 70, 0.45) !important;
  }
  .home-hotspot-start     { top: 39.1%; }
  .home-title-screen .home-hotspot-start { height: 8.35% !important; }
  .home-hotspot-characters { top: 49.6%; }
  .home-hotspot-cards      { top: 59.4%; }
  .home-hotspot-guide      { top: 69.2%; }
  .home-hotspot-settings   { top: 78.7%; }
  .home-title-screen .home-hotspot-settings { height: 8.0% !important; }
  /* ── Mobile / fallback real-button menu ── */
  .home-mobile-menu {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px 20px;
    width: 100%;
    max-width: 420px;
  }
  .home-mobile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 700;
    font-family: inherit;
    color: #ffe1a0;
    background: linear-gradient(135deg, rgba(40, 28, 16, .92), rgba(20, 14, 8, .95));
    border: 1px solid rgba(231, 172, 78, .4);
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, box-shadow .2s, border-color .2s;
    text-align: left;
  }
  .home-mobile-btn:hover {
    background: linear-gradient(135deg, rgba(60, 42, 24, .95), rgba(30, 20, 10, .98));
    border-color: rgba(231, 172, 78, .7);
    box-shadow: 0 0 14px rgba(255, 215, 0, .25);
  }
  .home-mobile-btn:focus-visible {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
  }
  .home-mobile-btn:active {
    transform: scale(.97);
  }
  .home-mobile-btn-campaign { border-color: rgba(255,214,111,.85) !important; background: linear-gradient(180deg, #b4782f, #5c3215) !important; }
  .campaign-home-button { position:absolute; left:50%; bottom:7%; transform:translateX(-50%); z-index:4; min-width:220px; font-weight:800; }
  .campaign-home-button:focus-visible { outline:3px solid #fff0a5; outline-offset:4px; }
  .campaign-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
  .campaign-card,.campaign-stage { border:1px solid rgba(240,196,106,.3); background:rgba(0,0,0,.3); color:#ffe8ad; padding:12px; text-align:left; cursor:pointer; }
  .campaign-card.selected,.campaign-stage.selected { border-color:#ffd56d; box-shadow:0 0 18px rgba(255,199,79,.25); }
  .campaign-card h3,.campaign-stage h3 { margin-bottom:6px; }
  .campaign-hud { position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:30; width:min(560px,calc(100% - 24px)); display:flex; align-items:center; gap:10px; padding:7px 10px; border:1px solid rgba(255,214,111,.45); background:rgba(18,10,5,.82); color:#ffe5a3; font-size:12px; }
  .campaign-ring { display:flex; gap:3px; }
  .campaign-ring i { width:12px; height:12px; border:1px solid #9d7135; background:#291b0e; }
  .campaign-ring i.on { background:#ffd56d; box-shadow:0 0 8px #f0ae3c; }
  .campaign-intent { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  @media (max-width:700px) { .campaign-home-button { bottom:4%; min-width:190px; } .campaign-hud { top:4px; font-size:11px; } .campaign-ring i { width:10px; height:10px; } }
  .home-mobile-icon {
    font-size: 22px;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
  }
  /* ── Portrait / small screen: hide image hotspots, show real buttons ── */
  @media (max-width: 700px), (orientation: portrait) {
    body.home-mode .home-title-screen {
      background:
        linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.75)),
        url("../backgrounds/home-title-screen.png") center / cover no-repeat;
    }
    .home-title-art { display: none !important; }
    .home-mobile-menu { display: flex !important; }
  }
  /* ── Image load failure fallback ── */
  .home-title-screen.image-load-failed .home-title-art {
    display: none !important;
  }
  .home-title-screen.image-load-failed .home-mobile-menu {
    display: flex !important;
  }
  /* ── ≤768px 战斗手牌专用布局：原生横向滑动触达全部手牌、结束回合独立成行不被遮挡、战役意图独立成行保持可读 ── */
  @media (max-width: 768px) {
    /* 窄视口必须允许整条布局链收缩：fr 轨道在内在尺寸计算中会取内容 max-content，
       不加 min-width:0 时 hand-dock 会把 battle-layout 的轨道撑到视口之外，
       导致结束回合按钮被裁出屏幕（如 x=-56）。 */
    body.battle-mode .battle-layout-v3 {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body.battle-mode .hand-dock-v3 {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      height: auto !important;
      min-height: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 8px !important;
      padding: 6px 6px 8px !important;
    }
    /* 卡牌预览依赖鼠标悬停，触屏端隐藏以让位给手牌滑动区 */
    body.battle-mode .hand-dock-v3 .card-preview-panel {
      display: none !important;
    }
    body.battle-mode .hand-command-strip {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      /* 窄视口允许换行：结束回合保持完整可点，牌堆计数器整行下移，不再挤压重叠 */
      flex-wrap: wrap !important;
      min-width: 0 !important;
      max-width: 100% !important;
      gap: 14px !important;
      padding: 6px 8px !important;
    }
    body.battle-mode .hand-command-strip .deck-counters {
      flex-shrink: 0 !important;
    }
    body.battle-mode .hand-command-strip #endTurnBtn {
      width: 128px !important;
      height: 128px !important;
      min-width: 128px !important;
      min-height: 128px !important;
      background-size: 1002px 752px !important;
      background-position: -16px -271px !important;
    }
    body.battle-mode .hand-dock-v3 .hand-row,
    body.battle-mode #playerHand {
      height: 372px !important;
      min-height: 372px !important;
      max-height: 372px !important;
      padding: 22px 10px 10px !important;
      gap: 10px !important;
      justify-content: flex-start !important;
      align-items: center !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      scroll-snap-type: x proximity;
      z-index: auto !important;
    }
    body.battle-mode .hand-dock-v3 #playerHand .card {
      scroll-snap-align: start;
      flex-shrink: 0 !important;
    }
    body.battle-mode .battle-layout-v3 {
      grid-template-rows: auto minmax(0, 1fr) auto !important;
      height: 100vh !important;
      min-height: 100vh !important;
      max-height: 100vh !important;
      overflow: hidden !important;
    }
    body.battle-mode .battle-stage-v3 {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: minmax(0, 1fr) auto !important;
    }
    body.battle-mode .duel-unit {
      width: 128px !important;
    }
    body.battle-mode .duel-unit .unit-sprite {
      width: 128px !important;
    }
    body.battle-mode .duel-unit.player-unit {
      left: 4% !important;
      bottom: 8% !important;
    }
    body.battle-mode .duel-unit.enemy-unit {
      right: 4% !important;
      bottom: 12% !important;
    }
    body.battle-mode .log-panel-v3 {
      max-height: 64px !important;
    }
    .campaign-hud { flex-wrap: wrap; row-gap: 3px; padding: 6px 8px; }
    .campaign-intent { flex: 1 1 100%; }
  }
  /* 手牌溢出修复（真机验收发现）：dock 的分配高度（≤1600px 为 306px、≤1366px 为 288px）
     小于手牌行自身高度（322px / 298px），手牌行自 dock 顶部向下排布，底部 11~18px 落到视口外，
     被 .battle-layout-v3 的 overflow:hidden 裁掉，表现为卡牌描述文字被切断、且无法滚动查看。
     这里让手牌行始终等于 dock 的可用高度、卡牌按自身尺寸底对齐，代价仅为卡牌上缘略微上移。
     仅作用于桌面单行网格；≤980px 是移动端两行堆叠布局（dock 内部另有 227px/372px 行定义），不在此覆盖。 */
  @media (min-width: 981px) {
    body.battle-mode .hand-dock-v3 {
      grid-template-rows: minmax(0, 1fr) !important;
    }
    body.battle-mode .hand-dock-v3 #playerHand {
      /* Reserve the existing hover lift inside the horizontal scrollport.
         Cards can never hit-test outside their own command-free column. */
      height: calc(100% + 64px) !important;
      margin-top: -64px !important;
      padding-top: 48px !important;
      min-height: 0 !important;
      max-height: none !important;
    }
  }
  /* Width and height both constrain the battle budget. On small/short viewports
     keep a readable arena and scroll the screen to reach the full hand/commands. */
  @media (max-width: 980px), (max-height: 700px) {
    body.battle-mode #screen-battle {
      height: 100dvh !important;
      min-height: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
    }
    body.battle-mode .battle-layout-v3 {
      height: auto !important;
      min-height: 100dvh !important;
      max-height: none !important;
      grid-template-rows: auto minmax(600px, 1fr) auto !important;
      overflow: visible !important;
    }
    body.battle-mode .battle-stage-v3 {
      min-height: 600px !important;
    }
    body.battle-mode #battlefield {
      /* Both full stat panels need separate vertical space on narrow screens. */
      min-height: 520px !important;
    }
    body.battle-mode #playerHand {
      touch-action: pan-x pan-y;
    }
  }
  body.home-mode .home-title-screen.image-load-failed {
    background: linear-gradient(135deg, #1a1108, #0d0804);
  }

/* Battle information and card layout use the original main definitions above.
   Only actor feedback, rarity accents, and campaign/result art are added below. */
body.battle-mode .hand-dock-v3 .card-preview-panel {
  height: 100% !important; min-height: 0 !important; max-height: 100% !important;
  overflow-y: auto !important;
}
/* The original single-row dock also needs a bounded track at tablet widths. */
@media (min-width: 769px) and (max-width: 980px) {
  body.battle-mode .hand-dock-v3 { grid-template-rows: minmax(0, 1fr) !important; }
}
:root {
  --battle-ink: #0c131b;
  --battle-paper: #f0e6d1;
  --battle-muted: #c6bba8;
  --battle-gold: #c7ac72;
  --battle-line: #77664c;
}
.arena-sigil {
  position: absolute; width: 57%; height: 28%; left: 22%; bottom: 4%; z-index: 2;
  border: 1px solid #e0c48d70; border-radius: 50%; pointer-events: none;
  transform: rotate(-5deg); box-shadow: inset 0 0 24px #e0c48d15;
}
.arena-sigil::before, .arena-sigil::after { content: ""; position: absolute; inset: 12%; border: 1px solid #e0c48d30; border-radius: 50%; }
.arena-sigil::after { inset: -12%; border-style: dashed; opacity: .35; }
body.battle-mode .duel-unit.actor-casting::after { opacity: 1; box-shadow: 0 6px 18px -6px var(--hero-accent); }
body.battle-mode .duel-unit.has-shield .unit-sprite { filter: drop-shadow(0 12px 9px #0008) drop-shadow(0 0 2px #9ad4ec) !important; }
body.battle-mode .duel-unit[data-affliction="ice"] .unit-sprite { filter: drop-shadow(0 12px 9px #0008) saturate(.55) drop-shadow(0 0 3px #a7e4f5) !important; }
body.battle-mode .duel-unit[data-affliction="curse"] .unit-sprite, body.battle-mode .duel-unit[data-affliction="bind"] .unit-sprite { filter: drop-shadow(0 12px 9px #0008) drop-shadow(0 0 3px #9571b8) !important; }
body.battle-mode .duel-unit[data-affliction="fire"] .unit-sprite { filter: drop-shadow(0 12px 9px #0008) drop-shadow(0 0 2px #ec9761) !important; }
body.battle-mode .duel-unit.defeated { opacity: .28; filter: grayscale(1); transition: opacity .5s, filter .5s; }
.element-impact { position: absolute; z-index: 19; width: 120px; height: 120px; translate: -50% -50%; pointer-events: none; color: var(--effect-color); }
.element-impact i { position: absolute; left: 50%; top: 50%; width: 3px; height: 56px; transform-origin: 50% 0; background: currentColor; animation: impact-ray var(--impact-duration) cubic-bezier(.16,1,.3,1) both; }
.element-impact i:nth-child(2) { rotate: 60deg; }
.element-impact i:nth-child(3) { rotate: 120deg; }
.element-impact i:nth-child(4) { rotate: 180deg; }
.element-impact i:nth-child(5) { rotate: 240deg; }
.element-impact i:nth-child(6) { rotate: 300deg; }
.element-impact.element-冰 i { clip-path: polygon(50% 0, 100% 70%, 50% 100%, 0 70%); width: 10px; }
.element-impact.element-火 i { width: 6px; border-radius: 50%; background: linear-gradient(currentColor, transparent); }
.element-impact.element-风 i { background: none; border: 1px solid currentColor; border-bottom: 0; border-radius: 50%; width: 48px; height: 18px; }
.element-impact.element-土 i { height: 16px; width: 12px; background: #b19a73; clip-path: polygon(18% 0, 82% 10%, 100% 76%, 60% 100%, 0 64%); }
.element-impact.element-雷 i { width: 36px; height: 64px; clip-path: polygon(42% 0, 62% 0, 44% 40%, 80% 36%, 18% 100%, 37% 53%, 8% 55%); }
.element-impact.friendly-heal i { color: #9cddb5; width: 4px; height: 12px; border-radius: 1px; }
.element-impact.friendly-shield { border: 1px solid #b0def1; border-radius: 46% 46% 60% 60%; animation: guard-form var(--impact-duration) both; }
.element-impact.friendly-shield i { display: none; }
.element-impact.friendly-summon { border: 1px solid #ddca9f; border-radius: 50%; transform: rotateX(55deg); animation: guard-form var(--impact-duration) both; }
.element-impact.hostile-status i { background: none; border: 1px solid currentColor; width: 14px; height: 14px; rotate: 45deg; }
@keyframes impact-ray { 0% { opacity: 0; scale: .3; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.2; translate: 0 20px; } }
@keyframes guard-form { 0% { opacity: 0; scale: .7; } 25% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.1; } }
body.battle-mode .screen-flash { display: none !important; }
body.battle-mode :focus-visible, .campaign-modal :focus-visible { outline: 2px solid #f0d798 !important; outline-offset: 3px !important; }
.campaign-modal .modal-panel { width: min(1140px, calc(100vw - 32px)) !important; background: #101821 !important; border: 1px solid #958058 !important; box-shadow: 0 20px 50px #0008 !important; }
.campaign-modal .modal-body > .campaign-grid:first-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campaign-modal .modal-body { padding: 18px 22px !important; color: #e8ddc5; }
.campaign-modal .campaign-card { position: relative; overflow: hidden; background: #17232e; border: 1px solid #8c785550; border-radius: 4px; padding: 16px; color: #e8dcc2; }
.campaign-modal .campaign-card[data-campaign-character] { min-height: 180px; padding-right: 43%; isolation: isolate; }
.campaign-card .campaign-portrait { position: absolute; right: -8px; bottom: 0; height: 90%; width: 45%; object-fit: contain; object-position: right bottom; z-index: -1; opacity: .9; }
.campaign-modal .campaign-card h3 { font-size: 16px; color: #f4e7c8; line-height: 1.35; }
.campaign-modal .campaign-card div { font-size: 11px; margin-top: 4px; line-height: 1.45; }
.campaign-modal .campaign-card small { display: block; color: #c6bfad; font-size: 11px; line-height: 1.5; margin-top: 8px; }
.campaign-modal .campaign-card p { font-size: 11px; color: #d1bb89; }
.campaign-modal .campaign-card.selected { background: #25313c; border-color: #d7bb7d; box-shadow: none; }
.campaign-modal .campaign-stage { background: #14212b; color: #e5d8bd; border: 1px solid #8c785550; border-radius: 4px; }
.campaign-modal .campaign-stage.selected { border-color: #d7bb7d; box-shadow: none; background: #29333b; }
.campaign-modal .campaign-stage:disabled { opacity: .45; }
.campaign-route { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.campaign-route .campaign-stage { position: relative; min-height: 128px; padding: 14px 12px; }
.campaign-route .campaign-stage::before { content: ""; position: absolute; top: -5px; left: 15px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #ddc38a; background: #101821; }
.campaign-route h3 { font-size: 14px; line-height: 1.4; }
.campaign-route small { display: block; font-size: 10px; color: #c6bfad; margin-top: 9px; line-height: 1.45; }
body #screen-result.active { position: fixed; inset: 0; display: flex !important; align-items: center; justify-content: flex-end; padding: 40px 7vw; overflow-y: auto; isolation: isolate; background: linear-gradient(90deg, #08131dcc, #08131df2), url("../backgrounds/bg_plains_ruins.png") center / cover; }
#screen-result .panel { position: relative; width: min(780px, 66vw); max-width: 780px !important; margin: 0 !important; background: #111e29e8; border: 1px solid #af986866; padding: 32px; box-shadow: 0 18px 40px #0005; }
.result-character { position: absolute; left: 3vw; bottom: 5vh; width: 32vw; height: 74vh; object-fit: contain; filter: drop-shadow(0 15px 20px #0006); z-index: -1; }
.result-seal { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #d9bd83; border-radius: 50%; color: #f4e1b4; font-family: "STSong", "SimSun", serif; font-size: 40px; margin-bottom: 18px; }
#screen-result[data-outcome="defeat"] .result-character { filter: grayscale(.8) drop-shadow(0 15px 20px #0006); opacity: .7; }
#screen-result[data-outcome="defeat"] .result-seal { color: #d1b2b2; border-color: #927575; }
#screen-result h2 { font-size: clamp(21px, 2.4vw, 30px); color: #efe0be; }
#screen-result .summary-grid { gap: 10px; margin-top: 24px; }
#screen-result .stat-tile { background: #0a16216b; border: 0; padding: 14px 12px; }
#screen-result .stat-tile b { color: #e6d2a6; font-size: 21px; font-variant-numeric: tabular-nums; }
#screen-result .stat-tile span { color: #c4c1b5; font-size: 11px; }
@media (max-width: 700px) {
.cast-title-strip { top: 62%; padding: 8px 18px; }
.cast-title-strip strong { font-size: 16px; }
.cast-cameo { top: 58%; height: 37%; width: 50%; }
.campaign-modal .modal-body { padding: 14px !important; }
.campaign-modal .campaign-grid { grid-template-columns: minmax(0, 1fr); }
.campaign-modal .modal-body > .campaign-grid:first-of-type { grid-template-columns: minmax(0, 1fr); }
.campaign-modal .campaign-card[data-campaign-character] { min-height: 158px; padding-right: 45%; }
.campaign-modal .campaign-route { grid-template-columns: minmax(0, 1fr); }
.campaign-route .campaign-stage { min-height: 82px; padding: 12px 14px; }
.campaign-route small { margin-top: 4px; }
body #screen-result.active { padding: 24px 14px; align-items: flex-start; }
#screen-result .panel { width: 100%; padding: 24px 20px; margin-top: 14vh !important; }
.result-character { left: 0; bottom: auto; top: 0; width: 100%; height: 48vh; opacity: .3; }
#screen-result .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
body.battle-mode .played-card-stage.show { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
body.battle-mode *, .campaign-modal *, #screen-result * { animation: none !important; transition: none !important; }
.element-impact, .arena-sigil { display: none !important; }
}
body[data-anim="low"] .element-impact { display: none !important; }

body.battle-mode #playerHand .card[data-tier="advanced"] { border-color: #d8b66f !important; }
body.battle-mode #playerHand .card[data-tier="special"] { border-color: #b49adb !important; }
body.battle-mode #playerHand .card[data-cost="0"] .card-cost { color: #efdeb8 !important; font-size: 21px !important; line-height: 36px !important; text-indent: 0 !important; text-align: center; border: 1px solid #bb9f65 !important; border-radius: 50% !important; background: #172631 !important; }