/* =====================================================================
   BATTLE (lane 1): board, HUD, cards in play, big moments, victory/defeat.
   Loaded after arena.css. Uses its tokens (--gold-*, --ease-*, --glass).
   Heavy effects are off under body.fx-low and prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------- table */
#game { background:
  radial-gradient(ellipse 60% 44% at 50% 50%, rgba(120, 70, 220, .22), transparent 70%),
  radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%),
  linear-gradient(180deg, #0e0720 0%, #1a0e36 30%, #1d1040 50%, #1a0e36 70%, #0e0720 100%); }
#game::before { background:
  radial-gradient(circle at 50% 50%, rgba(242, 193, 78, .08), transparent 22%),
  repeating-radial-gradient(circle at 50% 50%, rgba(242, 193, 78, .03) 0 1px, transparent 1px 54px); }
#game::after { display: none; }
body.theme-midnight #game { background: radial-gradient(ellipse 60% 44% at 50% 50%, rgba(90, 50, 170, .12), transparent 70%), #020104; }

/* mats: dark glass with a gold inlay (translucent so store battle boards show through) */
#mats .mat { border: 1px solid rgba(232, 186, 90, .14); background: rgba(10, 5, 22, .26); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 8px 24px rgba(0, 0, 0, .22); }
#mats .mat .lbl { font: 700 10px/1 var(--font-title); letter-spacing: .32em; color: rgba(232, 186, 90, .42); }
#mats .mat.k-leader .lbl, #mats .mat.k-life .lbl { display: none; }
#mats .mat.k-leader { border-radius: 16px; border-color: rgba(232, 186, 90, .3);
  background: radial-gradient(ellipse at 50% 40%, rgba(168, 107, 255, .14), transparent 70%), rgba(10, 5, 22, .3); }
#mats .mat.field { border-radius: 24px; border: 1px solid rgba(232, 186, 90, .42);
  background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(120, 70, 220, .16), transparent 75%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(30, 16, 62, .5), rgba(14, 7, 32, .56));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 18px 40px rgba(0, 0, 0, .35), inset 0 0 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 230, 170, .08);
  transition: border-color .25s, box-shadow .25s; }
#mats .mat.field.s1 { background:
    radial-gradient(ellipse 70% 90% at 50% 50%, rgba(200, 60, 90, .1), transparent 75%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(40, 14, 44, .5), rgba(18, 7, 26, .56)); }
#mats .mat.field .inlay { position: absolute; inset: 7px; border-radius: 18px; border: 1px solid rgba(232, 186, 90, .2); pointer-events: none;
  background:
    linear-gradient(var(--gold-2), var(--gold-2)) left top / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left top / 1.5px 26px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right top / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right top / 1.5px 26px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) left bottom / 1.5px 26px no-repeat,
    linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 26px 1.5px no-repeat, linear-gradient(var(--gold-2), var(--gold-2)) right bottom / 1.5px 26px no-repeat; opacity: .75; }
#mats .mat.field .slot { position: absolute; top: 50%; width: 143px; height: 196px; margin-top: -98px; border-radius: 12px;
  border: 1px solid rgba(232, 186, 90, .1); background: radial-gradient(ellipse at 50% 50%, rgba(168, 107, 255, .07), transparent 72%); }
#mats .mat.field.drop { border-color: var(--gold-1); background: radial-gradient(ellipse 70% 90% at 50% 50%, rgba(242, 193, 78, .18), transparent 75%), linear-gradient(180deg, rgba(40, 22, 70, .6), rgba(20, 10, 40, .6));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 40px rgba(242, 193, 78, .35), inset 0 0 50px rgba(242, 193, 78, .14); }
#mats .mat.field.drop .slot { border-color: rgba(242, 193, 78, .4); }
#game.lcb-on #mats .mat { background: rgba(6, 3, 14, .2); }
#game.lcb-on #mats .mat.field { background: linear-gradient(180deg, rgba(14, 7, 30, .34), rgba(8, 4, 18, .4)); }

/* centre line + turn medallion */
#game .divider{ top: 399px; height: 2px; background: linear-gradient(90deg, transparent 4%, rgba(232, 186, 90, .55) 30%, rgba(232, 186, 90, .1) 46%, transparent 48%, transparent 52%, rgba(232, 186, 90, .1) 54%, rgba(232, 186, 90, .55) 70%, transparent 96%); }
#game .divider::before, #game .divider::after{ content: ""; position: absolute; top: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 10px rgba(242, 193, 78, .6); }
#game .divider::before{ left: calc(30% - 4px); } #game .divider::after{ left: calc(70% - 4px); }
#centerMed { position: absolute; left: 800px; top: 400px; width: 92px; height: 92px; margin: -46px 0 0 -46px; pointer-events: none; z-index: 1; }
#centerMed .cm-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-3), var(--gold-hi), var(--gold-2), var(--gold-4), var(--gold-1), var(--gold-3));
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%); mask: radial-gradient(circle, transparent 60%, #000 61%);
  box-shadow: 0 0 24px rgba(168, 107, 255, .5); transition: box-shadow .4s; }
#centerMed .cm-core { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: 1px;
  background: radial-gradient(circle at 50% 35%, #3a1f73, #140a2c 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7), 0 0 26px rgba(168, 107, 255, .45); transition: box-shadow .4s, background .4s; }
#centerMed em { font: 800 8px/1 var(--font-ui); letter-spacing: .3em; color: rgba(242, 216, 150, .75); font-style: normal; margin-left: .3em; }
#centerMed b { font: 900 30px/1 var(--font-title); color: var(--gold-hi); text-shadow: 0 0 12px rgba(242, 193, 78, .6), 0 2px 3px #000; }
#centerMed[data-side="them"] .cm-core { background: radial-gradient(circle at 50% 35%, #5a1822, #1a0710 70%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7), 0 0 26px rgba(255, 80, 70, .45); }
body.theme-midnight #centerMed .cm-core { background: radial-gradient(circle at 50% 35%, #1e1236, #050308 70%); }

/* deck pile, trash count */
#game .pile .count{ bottom: -12px; min-width: 38px; padding: 4px 9px; font: 900 14px/1 var(--font-title); color: #2b1600; border: 1px solid #fff0c2;
  background: linear-gradient(180deg, #ffe39a, #d9a13a 60%, #a8741c); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), 0 0 12px rgba(242, 193, 78, .35); }
#game .pile.low .count{ color: #fff; border-color: #ffc2b0; background: linear-gradient(180deg, #ff8a6a, #b3231a); box-shadow: 0 3px 8px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 90, 70, .6); }
#game .pile .back{ box-shadow: 0 6px 14px rgba(0, 0, 0, .55); }
#game .tcount{ position: absolute; transform: translateX(-50%); z-index: 95; min-width: 30px; padding: 3px 8px; border-radius: 99px; text-align: center; pointer-events: none;
  font: 800 12px/1 var(--font-title); color: #e9dcff; background: rgba(10, 5, 22, .9); border: 1px solid rgba(232, 186, 90, .45); opacity: 0; transition: opacity .3s; }
#game .tcount.on{ opacity: 1; }

/* ---------------------------------------------------------------- player plates (avatar + name + life gem) */
#game .bplate{ position: absolute; left: 20px; width: 336px; height: 66px; z-index: 305; pointer-events: none; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 0;
  border-radius: 40px 14px 14px 40px; border: 1px solid rgba(232, 186, 90, .42);
  background: linear-gradient(90deg, rgba(8, 4, 18, .94), rgba(30, 16, 60, .88) 62%, rgba(12, 6, 26, .8));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 230, 170, .1); transition: border-color .35s, box-shadow .35s; }
#game .bplate.s0{ top: 770px; } #game .bplate.s1{ top: 28px; }
#game .bplate.s1{ background: linear-gradient(90deg, rgba(8, 4, 18, .94), rgba(52, 16, 34, .86) 62%, rgba(14, 6, 18, .8)); }
#game .bplate.active{ border-color: var(--gold-1); box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 0 22px rgba(242, 193, 78, .32), inset 0 1px 0 rgba(255, 230, 170, .16); }
#game .bp-av{ position: relative; flex: none; width: 76px; height: 76px; margin-left: -8px; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 200deg, var(--gold-3), var(--gold-hi), var(--gold-2), var(--gold-4), var(--gold-1), var(--gold-3));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 0 2px rgba(0, 0, 0, .55); }
#game .bp-av img{ width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; object-position: 50% 22%; background: #1a1030; }
#game .bplate.medal .bp-av{ background: none; padding: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .65); }
#game .bplate.active .bp-av{ box-shadow: 0 6px 16px rgba(0, 0, 0, .65), 0 0 18px rgba(242, 193, 78, .55); }
#game .bp-info{ flex: 1; min-width: 0; }
#game .bp-name{ display: block; font: 800 18px/1.1 var(--font-title); color: #fff4d6; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 3px #000; }
#game .bp-lead{ display: block; margin-top: 2px; font: 700 10.5px/1 var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game .bp-pips{ display: flex; gap: 4px; margin-top: 6px; }
#game .bp-pips i{ width: 11px; height: 11px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: rgba(255, 255, 255, .13); transition: background .3s; }
#game .bp-pips i.on{ background: linear-gradient(135deg, #ffd0c2, #ff5a3f 45%, #8a0f08); }
#game .bp-life{ position: relative; flex: none; width: 58px; height: 62px; display: grid; place-items: center; margin-top: -4px; }
#game .bp-life::before{ content: ""; position: absolute; inset: -3px; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-2) 40%, var(--gold-4)); }
#game .bp-life i{ position: absolute; inset: 0; clip-path: polygon(50% 0, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  background: linear-gradient(118deg, rgba(255, 255, 255, .45) 0 20%, transparent 21%), linear-gradient(242deg, rgba(255, 255, 255, .18) 0 32%, transparent 33%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .3) 59%), linear-gradient(160deg, #ffb09a 0%, #ff4a30 32%, #a3140a 64%, #4a0503 100%); }
#game .bp-life .bp-num{ position: relative; font: 900 27px/1 var(--font-title); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .8), 0 0 10px rgba(255, 120, 90, .7); margin-top: -2px; }
#game .bp-life em{ position: absolute; bottom: -14px; font: 800 8.5px/1 var(--font-ui); letter-spacing: .28em; color: #ffc9bd; font-style: normal; margin-left: .28em; }
#game .bplate.danger .bp-life{ animation: lcDanger 1.1s ease-in-out infinite; }
@keyframes lcDanger { 50% { transform: scale(1.08); filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 60, 40, .9)); } }

/* ---------------------------------------------------------------- crystals (Arena mana) */
#game .crystalbar{ height: 44px; gap: 5px; padding: 0 12px 0 12px; border-radius: 12px; border: 1px solid rgba(232, 186, 90, .42);
  background: linear-gradient(180deg, rgba(8, 4, 18, .92), rgba(26, 14, 52, .88)); box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 230, 170, .08); }
#game .gem{ position: relative; width: 24px; height: 30px; clip-path: none; background: none; filter: none; opacity: 1; transition: transform .2s var(--ease-back); }
#game .gem i{ position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%);
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(255, 255, 255, .06)); transition: background .25s, opacity .25s; }
#game .gem::before{ content: ""; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(185, 138, 255, .75), transparent 65%); opacity: 0; transition: opacity .3s; pointer-events: none; }
#game .gem.lit i{ background: linear-gradient(118deg, rgba(255, 255, 255, .7) 0 18%, transparent 19%), linear-gradient(242deg, rgba(255, 255, 255, .28) 0 34%, transparent 35%),
  linear-gradient(180deg, transparent 30%, rgba(40, 0, 90, .25) 31%), linear-gradient(170deg, #f6ecff 0%, #b98aff 34%, #7a3ee0 60%, #3b1280 100%); }
#game .gem.temp i{ background: linear-gradient(118deg, rgba(255, 255, 255, .75) 0 18%, transparent 19%), linear-gradient(242deg, rgba(255, 255, 255, .3) 0 34%, transparent 35%),
  linear-gradient(170deg, #f2fdff 0%, #8fe7ff 36%, #2c9ad0 64%, #0c4a78 100%); }
#game .gem.lit::before, #game .gem.temp::before{ opacity: 1; }
#game .gem.temp::before{ background: radial-gradient(circle, rgba(111, 211, 255, .75), transparent 65%); }
#game .gem.used i{ background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0 18%, transparent 19%), linear-gradient(170deg, #4e3f6c, #261a40 60%, #140b24); opacity: .9; }
#game .gem.used::after{ background: rgba(185, 138, 255, .35) !important; }
#game .gem.lock i{ background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(255, 255, 255, .05)); opacity: .9; }
#game .gem.lock::after, #game .gem.used::after{ content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 30%, 82% 100%, 18% 100%, 0 30%, 50% 0, 50% 8%, 8% 32%, 23% 93%, 77% 93%, 92% 32%, 50% 8%); background: rgba(232, 186, 90, .16); }
#game .gem.mine.free{ cursor: pointer; }
#game .gem.mine.free:hover{ transform: translateY(-4px) scale(1.2); }
#game .crystalbar .num{ margin-left: 8px; min-width: 50px; display: flex; align-items: baseline; gap: 1px; }
#game .crystalbar .num b{ font: 900 22px/1 var(--font-title); color: #f3e6ff; text-shadow: 0 0 12px rgba(168, 107, 255, .7); }
#game .crystalbar .num span{ font: 800 13px/1 var(--font-title); color: var(--ink-dim); }
body.theme-midnight #game .crystalbar, body.theme-midnight #game .bplate{ background: rgba(4, 3, 8, .95); }

/* ---------------------------------------------------------------- End Turn orb + phase */
#hud #endTurn.eorb { position: absolute; right: 44px; top: 326px; width: 148px; height: 148px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none;
  display: grid; place-items: center; align-content: center; gap: 4px; cursor: pointer; overflow: visible; isolation: isolate;
  font: 900 17px/1.02 var(--font-title); letter-spacing: .08em; text-transform: uppercase; color: #2b1600; text-shadow: 0 1px 0 rgba(255, 240, 200, .55);
  transition: transform .2s var(--ease-back), filter .3s; -webkit-tap-highlight-color: transparent; }
#game .eorb > i{ position: absolute; border-radius: 50%; pointer-events: none; }
#game .eorb .eo-glow{ inset: -22px; z-index: -3; background: radial-gradient(circle, rgba(255, 205, 100, .55), rgba(255, 180, 60, .15) 50%, transparent 70%); opacity: .75; transition: opacity .35s; }
#game .eorb .eo-ring{ inset: 0; z-index: -2;
  background: radial-gradient(circle at 50% 30%, #fff3c8 0%, #ffd46e 30%, #e0a03a 58%, #9c6512 82%, #6a400a 100%);
  box-shadow: 0 0 0 3px #2a1406, 0 0 0 5px #e7bb62, 0 0 0 7px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .6), inset 0 -8px 16px rgba(90, 50, 0, .45), inset 0 6px 12px rgba(255, 255, 255, .5); transition: background .35s, box-shadow .35s; }
#game .eorb .eo-ring::after{ content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 245, 210, .55); }
#game .eorb .eo-spin{ inset: -9px; z-index: -1; border: 2px solid transparent; border-top-color: rgba(255, 120, 100, .9); border-right-color: rgba(255, 120, 100, .35); opacity: 0; }
#game .eorb .eo-l{ position: relative; max-width: 110px; text-align: center; }
#game .eorb .eo-t{ position: relative; display: none; min-width: 58px; padding: 3px 8px; border-radius: 99px; font: 900 15px/1 var(--font-title); letter-spacing: .04em; color: #fff; background: #8a1a10; box-shadow: 0 0 10px rgba(255, 60, 40, .7); text-shadow: none; }
#game .eorb.timed .eo-t{ display: block; animation: lcTick 1s steps(1) infinite; }
@keyframes lcTick { 50% { background: #c9261a; } }
#hud #endTurn.eorb:not(:disabled):hover { transform: scale(1.05); }
#hud #endTurn.eorb:not(:disabled):active { transform: scale(.96); }
#game .eorb[data-st="idle"] .eo-glow{ animation: lcOrb 1.6s ease-in-out infinite; }
@keyframes lcOrb { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.1); } }
#game .eorb[data-st="idle"] .eo-ring{ box-shadow: 0 0 0 3px #2a1406, 0 0 0 5px #fff0c2, 0 0 0 7px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 200, 90, .8), inset 0 -8px 16px rgba(90, 50, 0, .45), inset 0 6px 12px rgba(255, 255, 255, .6); }
#game .eorb[data-st="busy"]{ filter: saturate(.7) brightness(.85); }
#game .eorb[data-st="theirs"], #game .eorb[data-st="over"]{ color: #b9a9d8; text-shadow: 0 1px 2px #000; cursor: default; }
#game .eorb[data-st="theirs"] .eo-glow, #game .eorb[data-st="over"] .eo-glow, #game .eorb[data-st="prompt"] .eo-glow{ opacity: 0; }
#game .eorb[data-st="theirs"] .eo-ring, #game .eorb[data-st="over"] .eo-ring{ background: radial-gradient(circle at 50% 30%, #4a3a6e 0%, #2a1d48 45%, #160d2a 100%);
  box-shadow: 0 0 0 3px #0c0618, 0 0 0 5px rgba(232, 186, 90, .35), 0 0 0 7px rgba(0, 0, 0, .5), 0 14px 30px rgba(0, 0, 0, .6), inset 0 4px 10px rgba(255, 255, 255, .08); }
#game .eorb[data-st="theirs"] .eo-ring::after, #game .eorb[data-st="prompt"] .eo-ring::after{ border-color: rgba(232, 186, 90, .2); }
#game .eorb[data-st="theirs"] .eo-spin{ opacity: 1; animation: lcSpin 1.1s linear infinite; }
@keyframes lcSpin { to { transform: rotate(360deg); } }
#game .eorb[data-st="prompt"]{ color: #d6f3ff; text-shadow: 0 1px 2px #000; cursor: default; }
#game .eorb[data-st="prompt"] .eo-ring{ background: radial-gradient(circle at 50% 30%, #2d5a7e 0%, #173656 45%, #0b1a30 100%);
  box-shadow: 0 0 0 3px #06101e, 0 0 0 5px #6fd3ff, 0 0 26px rgba(111, 211, 255, .55), 0 14px 30px rgba(0, 0, 0, .6); }
#game .eorb.timed .eo-ring{ box-shadow: 0 0 0 3px #2a0806, 0 0 0 5px #ff8a6a, 0 0 30px rgba(255, 70, 50, .7), 0 14px 30px rgba(0, 0, 0, .6), inset 0 6px 12px rgba(255, 255, 255, .4); }
#phaseTag { position: absolute; right: 33px; top: 460px; width: 170px; text-align: center; pointer-events: none; z-index: 2; }
#phaseTag b { display: none; }
#phaseTag span { display: inline-block; max-width: 100%; padding: 5px 12px; border-radius: 99px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 800 10.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: #fff4d6;
  background: linear-gradient(180deg, rgba(30, 16, 60, .96), rgba(10, 5, 22, .96)); border: 1px solid rgba(232, 186, 90, .55); box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
#phaseTag[data-side="them"] span { color: #ffc2b8; border-color: rgba(255, 120, 100, .45); }

/* ---------------------------------------------------------------- top bar, log, tracker, prompt, banner */
#topbar { gap: 6px; }
#topbar .btn { padding: 8px 14px; font: 800 11.5px/1 var(--font-title); letter-spacing: .14em; border-radius: 10px; text-transform: uppercase; }
#topbar .btn.on { background: linear-gradient(180deg, rgba(242, 193, 78, .4), rgba(150, 100, 20, .35)); border-color: var(--gold-1); color: #fff4d6; }
#log, #tracker { background: linear-gradient(180deg, rgba(14, 8, 30, .96), rgba(8, 4, 18, .96)); border: 1px solid rgba(232, 186, 90, .38); border-radius: 14px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 170, .08); }
#log.on, #tracker.on { animation: lcDrop .25s var(--ease-out); }
@keyframes lcDrop { from { opacity: 0; transform: translateY(-8px); } }
#log div { padding: 3px 0 3px 9px; border-left: 2px solid rgba(255, 255, 255, .1); margin-bottom: 3px; }
#log .me { border-left-color: #a86bff; } #log .them { border-left-color: #ff6a5a; }
#tracker h4 { font-family: var(--font-title); color: var(--gold-1); }
#banner .msg { font: 800 20px/1.2 var(--font-title); padding: 12px 30px; border-radius: 12px; color: #fff4d6;
  background: linear-gradient(180deg, rgba(20, 11, 42, .95), rgba(8, 4, 18, .95)); border: 1px solid var(--gold-line); box-shadow: 0 14px 34px rgba(0, 0, 0, .65), 0 0 0 4px rgba(8, 4, 18, .5); }
#promptBar { padding: 10px 12px 10px 22px; border-radius: 14px; border: 1px solid rgba(111, 211, 255, .65);
  background: linear-gradient(180deg, rgba(14, 26, 48, .96), rgba(8, 10, 26, .96)); box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(111, 211, 255, .28); }
#promptBar.on { animation: lcPrompt .3s var(--ease-back); }
@keyframes lcPrompt { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); } to { transform: translateX(-50%); } }
#promptBar .ptxt { font: 600 16px/1.3 var(--font-ui); color: #eaf8ff; }
#playBtn { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 10px 26px rgba(0, 0, 0, .55), 0 0 26px rgba(242, 193, 78, .55); }
#preview .keytips div { background: linear-gradient(180deg, rgba(20, 11, 42, .96), rgba(8, 4, 18, .96)); border: 1px solid rgba(232, 186, 90, .32); border-radius: 10px; padding: 7px 10px; line-height: 1.35; }
#preview .keytips b { color: var(--gold-1); }

/* ---------------------------------------------------------------- turn banner sweep */
#sweep { top: 300px; height: 200px; overflow: hidden; }
#sweep .band { position: absolute; left: 0; right: 0; top: 50%; height: 124px; margin-top: -62px; opacity: 0; transform: scaleY(0);
  background: linear-gradient(90deg, transparent 0%, rgba(10, 5, 24, .9) 18%, rgba(18, 9, 40, .94) 50%, rgba(10, 5, 24, .9) 82%, transparent 100%); }
#sweep .band::before, #sweep .band::after { content: ""; position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc, #a86bff) 20%, var(--gold-1) 50%, var(--sc, #a86bff) 80%, transparent); box-shadow: 0 0 14px var(--sc, #a86bff); }
#sweep .band::before { top: 0; } #sweep .band::after { bottom: 0; }
#sweep .t { position: relative; font: 900 76px/1 var(--font-title); letter-spacing: .16em; margin-left: .16em;
  background: linear-gradient(180deg, #fff 0%, #fff6dc 40%, var(--gold-1) 70%, var(--gold-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 22px var(--sc, #a86bff)); opacity: 0; }
#sweep .s { position: absolute; left: 0; right: 0; top: calc(50% + 40px); text-align: center; font: 800 14px/1 var(--font-ui); letter-spacing: .5em; color: var(--gold-1); opacity: 0; text-transform: uppercase; }
#sweep[data-kind="them"] .t, #sweep[data-kind="boss"] .t { background-image: linear-gradient(180deg, #fff 0%, #ffe2dc 40%, #ff9c8a 72%, #e0402f 100%); }
#sweep[data-kind="them"] .s, #sweep[data-kind="boss"] .s { color: #ffb3a6; }
#sweep.go .band { animation: swBand 1.6s var(--ease-out) forwards; }
#sweep.go .t { animation: swText 1.6s cubic-bezier(.2, .8, .2, 1) forwards; }
#sweep.go .s { animation: swSub 1.6s ease-out forwards; }
@keyframes swBand { 0% { opacity: 0; transform: scaleY(0); } 14% { opacity: 1; transform: scaleY(1); } 78% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.3); } }
@keyframes swText { 0% { opacity: 0; transform: translateX(-140px) scale(1.12); } 22% { opacity: 1; transform: translateX(0) scale(1); } 72% { opacity: 1; transform: translateX(14px); } 100% { opacity: 0; transform: translateX(150px) scale(.98); } }
@keyframes swSub { 0%, 18% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; transform: none; } 72% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- Command splash */
#cmdSplash { top: 240px; height: 320px; display: block; left: 0; right: 0; }
#cmdSplash.go { animation: lcCmd 1.9s ease-out forwards; }
@keyframes lcCmd { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
#cmdSplash .band { position: absolute; left: 0; right: 0; top: 60px; height: 200px;
  background: linear-gradient(90deg, transparent, rgba(8, 4, 18, .94) 16%, rgba(20, 10, 44, .96) 50%, rgba(8, 4, 18, .94) 84%, transparent); }
#cmdSplash .band::before, #cmdSplash .band::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc, #f2c14e), transparent); box-shadow: 0 0 16px var(--sc, #f2c14e); }
#cmdSplash .band::before { top: 0; } #cmdSplash .band::after { bottom: 0; }
#cmdSplash .a { position: absolute; left: 50%; top: 0; width: 320px; height: 320px; margin-left: -560px; background: center 20% / cover no-repeat;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 0 transparent); }
#cmdSplash .a::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }
#cmdSplash .txt { position: absolute; left: 50%; top: 88px; width: 700px; margin-left: -200px; text-align: left; display: block; }
#cmdSplash .k { font: 800 15px/1 var(--font-ui); letter-spacing: .5em; color: var(--sc, #f2c14e); }
#cmdSplash .n { margin: 10px 0 8px; font: 900 62px/1 var(--font-title); letter-spacing: .04em; color: #fff; text-shadow: 0 0 30px var(--sc, #f2c14e), 0 4px 10px #000; white-space: nowrap; }
#cmdSplash .x { max-width: 660px; text-align: left; font: 500 18px/1.35 var(--font-ui); color: #ffeec2; text-shadow: 0 2px 6px #000; }
#cmdSplash.go .band { animation: cmdBand 1.9s var(--ease-out) both; }
#cmdSplash.go .a { animation: cmdArt 1.9s var(--ease-out) both; }
#cmdSplash.go .txt { animation: cmdTxt 1.9s var(--ease-out) both; }
@keyframes cmdBand { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 85% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.6); opacity: 0; } }
@keyframes cmdArt { 0% { transform: translateX(-160px) scale(.9); opacity: 0; } 18% { transform: translateX(0) scale(1.04); opacity: 1; } 30% { transform: scale(1); } 85% { transform: translateX(12px); opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }
@keyframes cmdTxt { 0%, 8% { transform: translateX(120px); opacity: 0; } 24% { transform: none; opacity: 1; } 85% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(-30px); opacity: 0; } }

/* ---------------------------------------------------------------- boss intent: red telegraph plate */
#intentBox { left: 392px; top: 306px; width: 340px; padding: 14px 18px 14px; border-radius: 6px; color: #ffe3de;
  background:
    linear-gradient(#ff6a5a, #ff6a5a) left top / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) left top / 2px 18px no-repeat,
    linear-gradient(#ff6a5a, #ff6a5a) right top / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) right top / 2px 18px no-repeat,
    linear-gradient(#ff6a5a, #ff6a5a) left bottom / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) left bottom / 2px 18px no-repeat,
    linear-gradient(#ff6a5a, #ff6a5a) right bottom / 18px 2px no-repeat, linear-gradient(#ff6a5a, #ff6a5a) right bottom / 2px 18px no-repeat,
    repeating-linear-gradient(135deg, rgba(255, 90, 70, .05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, rgba(74, 10, 18, .96), rgba(26, 5, 14, .97));
  border: 1px solid rgba(255, 106, 90, .55); box-shadow: 0 0 0 4px rgba(20, 3, 8, .75), 0 0 0 5px rgba(232, 186, 90, .35), 0 18px 40px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 60, 40, .28); }
#intentBox::after { content: ""; position: absolute; inset: -6px; border-radius: 9px; border: 1px solid rgba(255, 90, 70, .7); opacity: 0; pointer-events: none; }
#intentBox.on:not(.broken)::after { animation: lcTele 1.8s ease-out infinite; }
@keyframes lcTele { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.06, 1.2); } }
#intentBox .k { display: flex; align-items: center; gap: 8px; font: 800 11px/1 var(--font-ui); letter-spacing: .3em; color: #ff9a8a; }
#intentBox .k::before { content: ""; width: 14px; height: 14px; flex: none; background: radial-gradient(circle, #fff 0 18%, #ff5a4f 20% 42%, transparent 44%), radial-gradient(ellipse 100% 55% at 50% 50%, rgba(255, 90, 70, .9) 0 60%, transparent 62%); }
#intentBox .n { font: 900 24px/1.1 var(--font-title); margin: 7px 0 4px; color: #fff; text-shadow: 0 0 16px rgba(255, 70, 50, .7), 0 2px 3px #000; }
#intentBox .t { font-size: 14px; line-height: 1.4; color: #ffd9d2; }
#intentBox .h { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 140, 120, .22); font-size: 12.5px; color: #a8e6ff; }
#intentBox.broken { border-color: rgba(111, 211, 255, .6);
  background: repeating-linear-gradient(135deg, rgba(111, 211, 255, .05) 0 8px, transparent 8px 16px), linear-gradient(160deg, rgba(12, 32, 54, .95), rgba(8, 10, 26, .96));
  box-shadow: 0 0 0 4px rgba(4, 10, 20, .75), 0 18px 40px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- cards in play */
#layer .card::before { content: ""; position: absolute; inset: -7px; border-radius: 11cqw; pointer-events: none; opacity: 0; transition: opacity .25s; }
#layer .card.can::before { opacity: 1; border: 2px solid rgba(255, 228, 150, .95);
  box-shadow: 0 0 14px 2px rgba(255, 196, 80, .75), 0 0 34px 6px rgba(242, 160, 40, .35), inset 0 0 12px rgba(255, 210, 120, .5); animation: lcCan 2.2s ease-in-out infinite; }
@keyframes lcCan { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
#game .card.can .face{ box-shadow: 0 0 0 1.5px #ffe7a0, 0 6px 16px rgba(0, 0, 0, .55); }
#game .card.ready .face{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 22px rgba(255, 200, 90, .75), 0 6px 16px rgba(0, 0, 0, .55); }
#layer .card.inhand:not(.down):hover .face { box-shadow: 0 0 0 1.5px rgba(255, 231, 160, .9), 0 30px 46px rgba(0, 0, 0, .65); }
#layer .card.inhand.can:hover::before { box-shadow: 0 0 18px 4px rgba(255, 206, 100, .85), 0 0 44px 10px rgba(242, 160, 40, .4), inset 0 0 12px rgba(255, 210, 120, .5); }
#game .card.target .face, #game .lcard.target{ box-shadow: 0 0 0 3px #ff6a5a, 0 0 28px rgba(255, 70, 50, .95) !important; }
#game .card.selected .face{ box-shadow: 0 0 0 3px #fff6dc, 0 0 30px rgba(255, 230, 170, .85) !important; }
#game .card.dragging .face{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 30px rgba(255, 200, 90, .7); }
#game .card .kws{ gap: 2cqw; }
#game .card .kws span{ width: 17cqw; height: 17cqw; font-size: 9.5cqw; line-height: 1;
  background: radial-gradient(circle at 35% 28%, #4a2d80, #150a2c 72%); border: 1.5px solid #e8c374;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(0, 0, 0, .5); }
#game .card.rested{ filter: brightness(.66) saturate(.75); }
/* leader on the board: framed like a portrait */
#game .lcard .lc{ box-shadow: 0 0 0 2px #c9953a, 0 0 0 4px rgba(10, 5, 20, .85), 0 0 0 5px rgba(232, 186, 90, .35), 0 14px 30px rgba(0, 0, 0, .65); }
#game .lcard.can .lc{ box-shadow: 0 0 0 2px #ffe7a0, 0 0 0 4px rgba(10, 5, 20, .85), 0 0 26px rgba(255, 200, 90, .85), 0 14px 30px rgba(0, 0, 0, .65); }
#game .cmd{ border-radius: 10px; font: 800 12px/1 var(--font-title); letter-spacing: .06em; padding: 6px 10px 6px 8px; background: linear-gradient(180deg, #ffe7a3, #d9a441 60%, #a8741c); box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- attack arrow */
#arrow .a-glow { stroke: rgba(255, 110, 50, .55); stroke-width: 28; stroke-linecap: round; }
#arrow .a-shaft { stroke-width: 13; stroke-linecap: round; }
#arrow .a-core { stroke: rgba(255, 250, 232, .9); stroke-width: 3; stroke-linecap: round; }
#arrow .a-flow { stroke: #fff4d0; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1 24; animation: aFlow .45s linear infinite; }
@keyframes aFlow { to { stroke-dashoffset: -25; } }
#arrow .a-head path { fill: #ff5a36; stroke: #ffe7a0; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 8px rgba(255, 110, 50, .9)); }
#arrow .a-src { fill: rgba(255, 210, 110, .3); stroke: #ffe7a0; stroke-width: 2; }
#arrow .a-ret { opacity: 0; transition: opacity .15s; }
#arrow .a-ret circle { fill: none; stroke: #ff6a4a; stroke-width: 3; }
#arrow .a-ret circle.in { stroke: #ffe7a0; stroke-width: 2; stroke-dasharray: 12 9; animation: aRet 1.2s linear infinite; }
#arrow .a-ret path { stroke: #ff6a4a; stroke-width: 4; stroke-linecap: round; }
@keyframes aRet { to { stroke-dashoffset: -42; } }
#arrow .aw.lock .a-ret { opacity: 1; }
#arrow .aw.lock .a-glow { stroke: rgba(255, 70, 40, .7); }

/* ---------------------------------------------------------------- fx */
#game .float{ font: 900 40px/1 var(--font-title); letter-spacing: .02em; text-shadow: 0 3px 0 rgba(0, 0, 0, .7), 0 0 20px currentColor; animation: lcFloat 1.25s cubic-bezier(.2, .8, .3, 1) forwards; white-space: nowrap; z-index: 2; }
#game .float span{ position: relative; display: inline-block; }
@keyframes lcFloat { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.4); } 16% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); } 30% { transform: translate(-50%, -10px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -64px) scale(.95); } }
#game .float.dmg{ color: #fff !important; font-size: 44px; text-shadow: 0 2px 0 #5a0500, 0 0 8px rgba(0, 0, 0, .6); }
#game .float.dmg::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: -1;
  clip-path: polygon(50% 0, 61% 30%, 95% 20%, 72% 47%, 100% 64%, 66% 67%, 70% 100%, 50% 76%, 28% 100%, 32% 68%, 0 66%, 28% 48%, 5% 20%, 39% 30%);
  background: radial-gradient(circle at 50% 45%, #ffb08a, #e0301f 55%, #7a0a05); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
#game .float.dmg span{ z-index: 1; }
#game .float.heal, #game .float.buff{ font-size: 34px; }
#game .float.word, #game .float.shield, #game .float.debuff{ font-size: 30px; letter-spacing: .12em; }
#game .float.shield span{ padding: 6px 16px; border-radius: 10px; background: linear-gradient(180deg, rgba(20, 50, 80, .92), rgba(8, 18, 36, .92)); border: 1.5px solid #8fe7ff; box-shadow: 0 0 20px rgba(111, 211, 255, .6); }
#game .crack{ font: 900 46px/1 var(--font-title); color: #ffd0c6; letter-spacing: .06em; text-shadow: 0 0 26px #ff2a1a, 0 0 8px #ff5a3f, 0 3px 0 #4a0500; transform: translateX(-50%); animation: lcCrack 1.5s cubic-bezier(.2, .8, .3, 1) forwards; white-space: nowrap; }
@keyframes lcCrack { 0% { opacity: 0; transform: translate(-50%, 0) scale(2); } 14% { opacity: 1; transform: translate(-50%, 0) scale(.95); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
#game .spark{ width: 7px; height: 7px; }
#game .spark.streak{ width: 16px; height: 3px; border-radius: 3px; }
#game .spark.mote{ width: 6px; height: 6px; }
#game .impact{ position: absolute; width: 240px; height: 240px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(210, 180, 255, .75) 16%, rgba(140, 80, 255, .35) 38%, transparent 66%); }
#game .impact.gold{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 226, 150, .8) 16%, rgba(242, 160, 40, .35) 38%, transparent 66%); }
#game .impact.hit{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 200, 140, .85) 14%, rgba(255, 80, 40, .4) 38%, transparent 66%); }
#game .impact.cyan{ background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(170, 235, 255, .8) 16%, rgba(60, 170, 255, .35) 38%, transparent 66%); }
#game .shard{ position: absolute; pointer-events: none; background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(255, 200, 120, .7)); will-change: transform, opacity; }
#board0.shake { animation: lcShake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes lcShake { 10%, 90% { transform: translate(-1px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 50%, 70% { transform: translate(-5px, 2px); } 40%, 60% { transform: translate(5px, -1px); } }
#layer.shake { animation: none; }

/* ---------------------------------------------------------------- VS intro */
#vsIntro { position: absolute; inset: 0; z-index: 960; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 50%, rgba(10, 5, 24, .55), rgba(4, 2, 10, .92)); animation: vsBg .3s ease-out; transition: opacity .35s; }
#vsIntro.out { opacity: 0; pointer-events: none; }
@keyframes vsBg { from { opacity: 0; } }
#game .vs-side{ position: absolute; top: 0; bottom: 0; width: 58%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%), linear-gradient(180deg, #120a26, #07040f); }
#game .vs-side.a{ left: 0; clip-path: polygon(0 0, 100% 0, 86% 100%, 0 100%); animation: vsA .6s var(--ease-out) both; }
#game .vs-side.b{ right: 0; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); animation: vsB .6s .08s var(--ease-out) both; }
@keyframes vsA { from { transform: translateX(-70%); } }
@keyframes vsB { from { transform: translateX(70%); } }
#game .vs-art{ position: absolute; top: 50%; width: 640px; height: 640px; margin-top: -350px; background: center / cover no-repeat;
  -webkit-mask: radial-gradient(ellipse 50% 52% at 50% 48%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 50% 52% at 50% 48%, #000 55%, transparent 100%); animation: vsDrift 2.6s linear both; }
#game .vs-side.a .vs-art{ left: 5%; } #game .vs-side.b .vs-art{ right: 5%; }
@keyframes vsDrift { from { transform: scale(1.08); } to { transform: scale(1.18); } }
#game .vs-shade{ position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 2, 10, .88) 88%); }
#game .vs-side::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
#game .vs-side.a::after{ background: linear-gradient(100deg, transparent 80%, var(--gold-2) 80.3%, transparent 80.6%); }
#game .vs-name{ position: absolute; bottom: 90px; }
#game .vs-side.a .vs-name{ left: 80px; animation: vsNameA .6s .3s var(--ease-out) both; }
#game .vs-side.b .vs-name{ right: 80px; text-align: right; animation: vsNameB .6s .38s var(--ease-out) both; }
@keyframes vsNameA { from { opacity: 0; transform: translateX(-40px); } }
@keyframes vsNameB { from { opacity: 0; transform: translateX(40px); } }
#game .vs-name em{ display: block; font: 800 15px/1 var(--font-ui); letter-spacing: .4em; color: var(--gold-1); font-style: normal; text-transform: uppercase; }
#game .vs-name b{ display: block; margin: 10px 0 8px; font: 900 54px/1 var(--font-title); color: #fff; text-shadow: 0 0 26px var(--c), 0 4px 10px #000; }
#game .vs-name span{ font: 700 13px/1 var(--font-ui); letter-spacing: .3em; color: #cbbbe8; text-transform: uppercase; }
#game .vs-mid{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#game .vs-mid b{ position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font: 900 150px/1 var(--font-title); letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff 0%, var(--gold-hi) 30%, var(--gold-1) 55%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .65)) drop-shadow(0 0 30px rgba(242, 193, 78, .7)); animation: vsSlam .5s .42s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes vsSlam { from { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
#game .vs-mid .vs-flash{ position: absolute; left: -400px; top: -400px; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 220, .9), rgba(242, 193, 78, .3) 25%, transparent 60%); opacity: 0; animation: vsFlash .7s .5s ease-out both; }
@keyframes vsFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
#game .vs-mid .vs-ring{ position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border: 3px solid var(--gold-1); opacity: 0; animation: vsRing .8s .5s ease-out both; }
@keyframes vsRing { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
#game .vs-skip{ position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font: 700 12px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: rgba(233, 220, 255, .5); animation: vsBg .4s 1s both; }
#vsIntro.still *, #vsIntro.still { animation: none !important; }

/* ---------------------------------------------------------------- mulligan, triumph, pick */
#mulligan .box, #triumph .box { padding: 34px 48px 32px; }
#mulligan h2::before, #triumph h2::before { display: block; margin-bottom: 8px; font: 800 12px/1 var(--font-ui); letter-spacing: .45em; }
#mulligan h2::before { content: "PREPARE FOR BATTLE"; }
#triumph h2::before { content: "FROM YOUR LIFE"; }
:is(#mulligan, #triumph) .cards { perspective: 1200px; }
#mulligan .cards { gap: 18px; margin: 22px 0 28px; }
:is(#mulligan, #triumph) .cards .card.deal { animation: lcDeal .6s var(--ease-back) backwards; animation-delay: calc(var(--i, 0) * 90ms + 160ms); }
@keyframes lcDeal { from { opacity: 0; transform: translateY(90px) rotateX(40deg) rotate(calc(var(--k, 0) * 6deg)) scale(.8); } }
:is(#mulligan, #triumph) .cards .card:hover { transform: translateY(-12px) scale(1.05); }
:is(#mulligan, #triumph) .cards .card .face { box-shadow: 0 16px 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 186, 90, .4); }
:is(#mulligan, #triumph) .cards .card:hover .face { box-shadow: 0 24px 40px rgba(0, 0, 0, .65), 0 0 0 2px #ffe7a0, 0 0 26px rgba(242, 193, 78, .5); }
#triumph .cards { position: relative; margin: 26px 0 30px; }
#triumph .cards::before { content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; margin: -280px 0 0 -280px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: lcRays 14s linear infinite; }
@keyframes lcRays { to { transform: rotate(360deg); } }
#triumph .cards .card.deal { width: 210px !important; height: 294px !important; animation: lcTri .9s var(--ease-out) backwards; }
@keyframes lcTri { 0% { opacity: 0; transform: rotateY(180deg) scale(.6); filter: brightness(3); } 60% { opacity: 1; filter: brightness(1.6); } 100% { filter: none; } }
#pickModal .ptxt { font-family: var(--font-title); background: linear-gradient(180deg, var(--gold-hi), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 3px #000); }
#pickModal .card.pickc .face { box-shadow: 0 18px 34px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 186, 90, .45); }
#pickModal .card.pickc:hover .face { box-shadow: 0 24px 40px rgba(0, 0, 0, .65), 0 0 0 2px #ffe7a0, 0 0 30px rgba(242, 193, 78, .55); }

/* ---------------------------------------------------------------- victory / defeat */
#over.lc-over { background: #05020c; }
#over.lc-over::before { content: ""; position: absolute; inset: -3%; background: var(--hero) var(--hero-pos, 50% 30%) / cover no-repeat; filter: blur(3px) saturate(1.1) brightness(.5); transform: scale(1.04); animation: ovHero 14s ease-out both; }
#over.lc-over::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(10, 5, 22, .1), rgba(6, 3, 14, .78) 75%, rgba(4, 2, 10, .96)); }
#over.lose::before { filter: blur(3px) grayscale(.75) brightness(.36) sepia(.2) hue-rotate(190deg); }
@keyframes ovHero { from { transform: scale(1.12); } to { transform: scale(1.02); } }
#over.lc-over .box { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; min-width: 0; width: 1060px; max-width: calc(100% - 60px); padding: 40px 54px 38px 44px; text-align: left; overflow: visible;
  background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(140, 90, 230, .2), transparent 70%), linear-gradient(180deg, rgba(24, 13, 48, .9), rgba(10, 5, 22, .94)); animation: ovBox .7s var(--ease-out) both; }
#over.lose .box { background: radial-gradient(ellipse 80% 60% at 60% 0%, rgba(120, 50, 70, .2), transparent 70%), linear-gradient(180deg, rgba(20, 13, 30, .92), rgba(8, 6, 14, .95)); border-color: rgba(190, 150, 170, .3); }
@keyframes ovBox { from { opacity: 0; transform: translateY(30px) scale(.97); } }
#over.lc-over .box > .ov-rays { display: none; }
#over.win .box::after { content: ""; position: absolute; left: 60%; top: 60px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .12) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%); mask: radial-gradient(circle, #000 10%, transparent 62%); animation: lcRays 30s linear infinite; }
#over .ov-left { flex: none; }
#over .overlead { margin: 0; perspective: 900px; }
#over .overlead .lc { width: 220px; height: 327px; box-shadow: 0 0 0 2px #c9953a, 0 0 0 5px rgba(10, 5, 20, .85), 0 30px 60px rgba(0, 0, 0, .7), 0 0 60px rgba(242, 193, 78, .35); animation: ovLead .9s .15s var(--ease-back) both, overLead 3.5s 1.1s ease-in-out infinite; }
#over.lose .overlead .lc { filter: grayscale(.55) brightness(.75); box-shadow: 0 0 0 2px #7a6a80, 0 0 0 5px rgba(10, 5, 20, .85), 0 30px 60px rgba(0, 0, 0, .7); }
@keyframes ovLead { from { opacity: 0; transform: translateY(40px) rotateY(-30deg) scale(.85); } }
#over .ov-main { flex: 1; min-width: 0; }
#over .ov-eyebrow { font: 800 13px/1 var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--gold-1); animation: ovRise .5s .2s var(--ease-out) both; }
#over.lose .ov-eyebrow { color: #c9b4c4; }
#over .big { margin: 8px 0 0; font: 900 96px/1 var(--font-title); letter-spacing: .12em; white-space: nowrap; animation: ovBig .8s .25s cubic-bezier(.2, .9, .3, 1.15) both; }
#over .big.win { background: linear-gradient(180deg, #fff 0%, #fff3c8 25%, var(--gold-1) 55%, var(--gold-2) 78%, var(--gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(60, 30, 0, .7)) drop-shadow(0 0 30px rgba(242, 193, 78, .6)); }
#over .big.lose { background: linear-gradient(180deg, #f2e6ee 0%, #c6aab8 45%, #8a5a6e 80%, #5a2a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 24px rgba(160, 40, 60, .45)); animation-name: ovBigLose; animation-duration: 1.1s; }
@keyframes ovBig { from { opacity: 0; transform: scale(1.6); letter-spacing: .4em; } }
@keyframes ovBigLose { from { opacity: 0; transform: translateY(-20px); letter-spacing: .3em; } }
@keyframes ovRise { from { opacity: 0; transform: translateY(12px); } }
#over .ov-rule { position: relative; height: 1px; margin: 16px 0 14px; background: linear-gradient(90deg, var(--gold-line), transparent 80%); animation: ovRise .5s .45s both; }
#over .ov-rule i { position: absolute; left: 0; top: -4px; width: 9px; height: 9px; transform: rotate(45deg); background: linear-gradient(135deg, var(--gold-1), var(--gold-3)); }
#over .stats { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: #d8cdf0; animation: ovRise .5s .5s both; }
#over .ov-facts { display: flex; gap: 8px; margin-top: 8px; }
#over .ov-facts i { font: 700 12px/1 var(--font-ui); font-style: normal; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(232, 186, 90, .25); color: #e9dcff; }
#over .ov-xp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin: 0 0 16px; animation: ovRise .5s .6s both; }
#over .ov-lvl { font: 800 14px/1 var(--font-title); letter-spacing: .12em; color: #e9dcff; white-space: nowrap; }
#over .ov-lvl b { font-size: 20px; color: var(--gold-hi); }
#over .ov-xp.up .ov-lvl b { animation: ovLvl .7s var(--ease-back); display: inline-block; }
@keyframes ovLvl { 40% { transform: scale(1.6); color: #fff; } }
#over .ov-bar { position: relative; height: 12px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .5); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), 0 0 0 1px rgba(232, 186, 90, .35); }
#over .ov-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, #6a3dc0, #b98aff 60%, #f3e6ff); box-shadow: 0 0 14px rgba(185, 138, 255, .8); transition: width .9s var(--ease-out); }
#over .ov-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 30px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7)); border-radius: 99px; }
#over .ov-xpn { font: 800 15px/1 var(--font-title); color: #d9c3ff; white-space: nowrap; }
#over .rewards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; perspective: 800px; }
#over .rewards > * { font: 800 17px/1 var(--font-title); }
#over .rewards > .ov-in { animation: ovFlip .55s var(--ease-back) backwards; animation-delay: calc(1s + var(--i, 0) * 260ms); }
@keyframes ovFlip { from { opacity: 0; transform: rotateX(90deg) translateY(10px); } }
#over .actions { justify-content: flex-start; flex-wrap: wrap; gap: 12px; animation: ovRise .5s .8s both; }
#over .actions { flex-wrap: nowrap; }
#over .actions .btn { min-width: 0; padding: 13px 20px; font-size: 16px; white-space: nowrap; }
#over .lcs-unlocks { justify-content: flex-start; margin: 0 0 16px; }
#over .lcs-overopp { margin: 0 0 16px; }
#over.lc-over .cz-overpet { left: -70px; bottom: -40px; }

/* ---------------------------------------------------------------- phone landscape (stage scale < .62) */
body.mobile #game .bplate{ width: 380px; height: 78px; }
body.mobile #game .bplate.s0{ top: 800px; } body.mobile #game .bplate.s1{ top: 14px; }
body.mobile #game .bp-av{ width: 88px; height: 88px; }
body.mobile #game .bp-name{ font-size: 24px; } body.mobile #game .bp-lead{ font-size: 14px; }
body.mobile #game .bp-pips i{ width: 14px; height: 14px; }
body.mobile #game .bp-life{ width: 70px; height: 76px; } body.mobile #game .bp-life .bp-num{ font-size: 34px; } body.mobile #game .bp-life em{ font-size: 11px; bottom: -16px; }
body.mobile #game .crystalbar{ transform: scale(1.4); }
body.mobile #game .crystalbar .num b{ font-size: 24px; }
body.mobile #hud #endTurn.eorb { width: 196px; height: 196px; right: 30px; top: 300px; font-size: 25px; padding: 0; }
body.mobile #game .eorb .eo-l{ max-width: 150px; }
body.mobile #game .eorb .eo-t{ font-size: 20px; }
body.mobile #phaseTag { right: 8px; top: 482px; width: 240px; } body.mobile #phaseTag span { font-size: 15px; padding: 7px 14px; }
body.mobile #topbar .btn { font-size: 18px; padding: 14px 20px; }
body.mobile #game .pile .count{ font-size: 20px; padding: 6px 12px; } body.mobile #game .tcount{ font-size: 18px; padding: 5px 12px; }
body.mobile #centerMed { transform: scale(1.25); }
body.mobile #sweep .t { font-size: 96px; } body.mobile #sweep .s { font-size: 20px; top: calc(50% + 52px); }
body.mobile #cmdSplash .n { font-size: 74px; } body.mobile #cmdSplash .x { font-size: 24px; } body.mobile #cmdSplash .k { font-size: 20px; }
body.mobile #intentBox { left: 392px; top: 298px; width: 420px; } body.mobile #intentBox .n { font-size: 28px; } body.mobile #intentBox .t { font-size: 18px; } body.mobile #intentBox .h { font-size: 16px; } body.mobile #intentBox .k { font-size: 14px; }
body.mobile #game .float{ font-size: 54px; } body.mobile #game .float.dmg{ font-size: 58px; } body.mobile #game .float.dmg::before{ width: 120px; height: 120px; margin: -60px 0 0 -60px; }
body.mobile #game .vs-name b{ font-size: 72px; } body.mobile #game .vs-name em{ font-size: 22px; } body.mobile #game .vs-name span{ font-size: 18px; } body.mobile #game .vs-skip{ font-size: 18px; }
body.mobile #mulligan h2::before, body.mobile #triumph h2::before { font-size: 18px; }
body.mobile #mulligan .cards .card { width: 220px !important; height: 308px !important; }
body.mobile #over.lc-over .box { width: 1300px; padding: 44px 60px; }
body.mobile #over .ov-eyebrow { font-size: 20px; } body.mobile #over .big { font-size: 120px; } body.mobile #over .stats { font-size: 24px; }
body.mobile #over .ov-facts i { font-size: 17px; } body.mobile #over .ov-lvl { font-size: 20px; } body.mobile #over .ov-xpn { font-size: 20px; } body.mobile #over .ov-bar { height: 16px; }
body.mobile #over .rewards > * { font-size: 24px; }
body.mobile #over .overlead .lc { width: 250px; height: 372px; }

/* ---------------------------------------------------------------- graphics low + reduced motion */
body.fx-low #layer .card.can::before, body.fx-low #game .eorb .eo-glow, body.fx-low #game .bplate.danger .bp-life, body.fx-low #intentBox.on::after,
body.fx-low #arrow .a-flow, body.fx-low #arrow .a-ret circle.in, body.fx-low #triumph .cards::before, body.fx-low #over.win .box::after,
body.fx-low #over.lc-over::before, body.fx-low #over .overlead .lc, body.fx-low :is(#mulligan, #triumph) .cards .card.deal, body.fx-low #over .rewards > .ov-in,
body.fx-low #over .big, body.fx-low #over .ov-eyebrow, body.fx-low #over .ov-rule, body.fx-low #over .stats, body.fx-low #over .ov-xp, body.fx-low #over .actions, body.fx-low #over.lc-over .box { animation: none !important; }
body.fx-low #layer .card.can::before { opacity: 1; }
body.fx-low #game .eorb[data-st="theirs"] .eo-spin{ animation-duration: 2.5s; }
@media (prefers-reduced-motion: reduce) {
  #layer .card.can::before, #game .eorb .eo-glow, #game .bplate.danger .bp-life, #intentBox.on::after, #arrow .a-flow, #arrow .a-ret circle.in, #triumph .cards::before, #over.win .box::after,
  #over.lc-over::before, #over .overlead .lc, :is(#mulligan, #triumph) .cards .card.deal, #over .rewards > .ov-in, #over .big, #over .ov-eyebrow, #over .ov-rule, #over .stats, #over .ov-xp, #over .actions, #over.lc-over .box,
  #sweep.go .band, #sweep.go .t, #sweep.go .s, #cmdSplash.go .band, #cmdSplash.go .a, #cmdSplash.go .txt, #game .float, #game .crack, #vsIntro * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  #sweep.go .t, #sweep.go .band, #sweep.go .s { animation: lcFadeHold 1.6s linear forwards !important; }
  @keyframes lcFadeHold { 0% { opacity: 0; transform: none; } 12%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}
body.mobile #over .actions .btn { font-size: 22px; padding: 16px 24px; }
/* phone: my plate shrinks to avatar + life gem so the enlarged hand never covers the Life count */
body.mobile #game .bplate.s0 { width: 196px; top: 804px; gap: 6px; }
body.mobile #game .bplate.s0 .bp-info { display: none; }
body.mobile #over .lcs-unlocks > span { font-size: 18px; } body.mobile #over .lcs-unlocks button { font-size: 18px; padding: 8px 16px; }
#game .bplate.long .bp-name { font-size: 14.5px; }
body.mobile #game .bplate.long .bp-name { font-size: 19px; }
#game.splashing #preview { opacity: 0 !important; }

/* =====================================================================
   lane D (battle feel): motion tokens, the charge arrow, instant-speed moments, phone budgets.
   One motion language: durations / easings below; js/ui.js MOTION + EASE mirror them for WAAPI.
   ===================================================================== */
#game { --m-fast: 140ms; --m-base: 260ms; --m-slow: 480ms; --m-hero: 900ms;
  --e-out: cubic-bezier(.2, .8, .2, 1); --e-in: cubic-bezier(.55, 0, .8, .3); --e-inout: cubic-bezier(.65, 0, .35, 1); --e-back: cubic-bezier(.3, 1.5, .5, 1); --e-land: cubic-bezier(.5, 0, .3, 1); }
/* the charge: declared attacker lifts and glows, the arrow stays locked on the target until the blow lands */
#chargeArrow { position: absolute; inset: 0; pointer-events: none; z-index: 842; overflow: visible; --ac: #ffb347; --ac2: #fff1c8; }
#chargeArrow[data-side="them"] { --ac: #ff4d3d; --ac2: #ffd6cc; }
#chargeArrow .ca-glow { fill: none; stroke: var(--ac); stroke-opacity: .42; stroke-width: 26; stroke-linecap: round; filter: blur(6px); }
#chargeArrow .ca-shaft { fill: none; stroke: var(--ac); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 100; }
#chargeArrow .ca-core { fill: none; stroke: var(--ac2); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; opacity: .9; }
#chargeArrow .ca-hd path { fill: var(--ac); stroke: var(--ac2); stroke-width: 3; stroke-linejoin: round; }
#chargeArrow .ca-src { fill: rgba(255, 255, 255, .12); stroke: var(--ac2); stroke-width: 2.5; }
#game .card.charging .face, #game .lcard.charging .lc { box-shadow: 0 0 0 3px #ffe7a0, 0 0 30px rgba(255, 170, 70, .9), 0 26px 30px rgba(0, 0, 0, .6) !important; }
#game .card.rested.charging { filter: brightness(.95); }
#game .card.charged .face, #game .lcard.charged .lc { box-shadow: 0 0 0 3px #ff5a4f, 0 0 26px rgba(255, 70, 50, .85) !important; }

/* instant speed (Counter / Brace / Interject / Triumph): vignette + stamp on the centre line, never takes input */
#hud #instFx { position: absolute; inset: 0; z-index: 884; pointer-events: none; opacity: 0; --ic: #6fd3ff; }
#instFx .if-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 50%, transparent 38%, rgba(4, 2, 12, .5) 100%);
  box-shadow: inset 0 0 150px color-mix(in srgb, var(--ic) 50%, transparent); }
#instFx .if-stamp { position: absolute; left: 0; right: 0; top: 400px; height: 0; display: grid; justify-items: center; align-content: center; gap: 10px; }
#instFx .if-stamp b { display: block; padding: 12px 70px; font: 900 72px/1 var(--font-title); letter-spacing: .18em; text-indent: .18em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 26px var(--ic), 0 0 8px var(--ic), 0 4px 0 rgba(0, 0, 0, .6);
  background: linear-gradient(90deg, transparent, rgba(6, 10, 24, .86) 18%, rgba(6, 10, 24, .92) 50%, rgba(6, 10, 24, .86) 82%, transparent);
  border-top: 2px solid; border-bottom: 2px solid; border-image: linear-gradient(90deg, transparent, var(--ic) 25%, #fff 50%, var(--ic) 75%, transparent) 1; }
#instFx .if-stamp span { font: 800 15px/1.2 var(--font-ui); letter-spacing: .26em; text-transform: uppercase; color: color-mix(in srgb, var(--ic) 55%, #fff); text-shadow: 0 2px 4px #000; white-space: nowrap; }
#instFx .if-stamp span:empty { display: none; }
#instFx[data-kind="triumph"] .if-stamp b { background: linear-gradient(90deg, transparent, rgba(40, 24, 4, .88) 18%, rgba(50, 30, 6, .94) 50%, rgba(40, 24, 4, .88) 82%, transparent); }
body.mobile #instFx .if-stamp b { font-size: 92px; } body.mobile #instFx .if-stamp span { font-size: 22px; }
body.portrait #instFx .if-stamp { top: calc(var(--ph) / 2); }
body.portrait #instFx .if-stamp b { font-size: 64px; padding: 12px 40px; } body.portrait #instFx .if-stamp span { font-size: 22px; }

/* the lobby backdrop keeps animating behind an opaque board: stop painting it during a match */
body[data-screen="game"] #afBg { visibility: hidden; }
body[data-screen="game"] #afBg * { animation-play-state: paused !important; }
/* phones: particle and loop budget (ambient motes 26 -> 10; card-face holo loops hold still on the battle layer) */
body:is(.mobile, .portrait) #game .motes i:nth-child(n+11) { display: none; }
body:is(.mobile, .portrait) #layer .card.foil::after, body:is(.mobile, .portrait) #layer .card.promo::after, body:is(.mobile, .portrait) #layer .card .shine,
body:is(.mobile, .portrait) #layer .card .shine::after, body:is(.mobile, .portrait) #layer .card .cf-promo, body:is(.mobile, .portrait) #layer .lcard .fa-holo,
body:is(.mobile, .portrait) #layer .lcard .fa-holo::after, body:is(.mobile, .portrait) #layer .lcard .lc::after { animation-play-state: paused; }
body.fx-low #chargeArrow .ca-glow { filter: none; }
@media (prefers-reduced-motion: reduce) { #chargeArrow .ca-glow { filter: none; } }
body:is(.mobile, .portrait) #chargeArrow .ca-shaft { stroke-width: 16; } body:is(.mobile, .portrait) #chargeArrow .ca-core { stroke-width: 4; }
body:is(.mobile, .portrait) #chargeArrow .ca-hd path { transform: scale(1.35); }
/* portrait: the Brace / Interject panel owns the middle band; the (disabled) End Turn orb and phase tag step aside
   instead of peeking out around it */
#hud #endTurn.eorb { transition: transform .2s var(--ease-back), filter .3s, opacity .2s; }
#phaseTag { transition: opacity .2s; }
body.portrait #game:has(#hud > .pz:not(.out)) :is(#endTurn, #phaseTag) { opacity: 0; pointer-events: none; }
/* prompts win: board fx (damage numbers, sparks, shards) and the charge arrow sit just under the HUD layer (850), so
   the Brace / Interject panels and the prompt bar are never drawn over; they stay above every card */
#game #fx { z-index: 845; }