/* ═══════════════════════════════════════════════════════════════════
   เถ้าแห่งคำสาป — v2.7 "Reliquary Diorama" depth & beauty layer
   Loaded AFTER styles.css (and auth.css). Additive only — delete this file
   + depth.js tags to revert. Ledger: ../polish/ledger.md
   Planes: far (scene art · parallax) → mid (fog · light shafts) → play (stone
   table / tablet) → object (cards · units · stones) → glass (vignette · embers)
   One warm key light from top-centre: shadows fall down, rims light top edges.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* — z-layers (inside a screen) — */
  --z-scene: 0; --z-atmos: 1; --z-floor: 1; --z-board: 3; --z-hud: 5; --z-hand: 6;
  --z-fx: 30; --z-overlay: 20; --z-modal: 120; --z-toast: 140;

  /* — key light & parallax (driven by depth.js; -1..1) — */
  --plx: 0; --ply: 0; --lx: 50%; --ly: 0%;
  --key: #ffb46a;
  --rim: rgba(255, 226, 180, .20);
  --rim-strong: rgba(255, 230, 190, .36);
  --ember-glow: rgba(232, 122, 58, .38);

  /* — elevation: e0 sunken socket → e5 modal — */
  --e0: inset 0 2px 6px #000d, inset 0 -1px 0 rgba(255, 220, 170, .06), inset 0 0 0 1px #000a;
  --e1: 0 1px 0 #0009, 0 2px 4px #0007, 0 8px 12px -6px #0009;
  --e2: 0 1px 1px #000a, 0 4px 8px #0008, 0 14px 24px -8px #000d;
  --e3: 0 2px 2px #000a, 0 10px 18px #0009, 0 28px 46px -12px #000e;
  --e4: 0 4px 6px #000a, 0 18px 32px #000a, 0 42px 72px -16px #000;
  --e5: 0 8px 16px #000b, 0 30px 60px #000c, 0 70px 120px -20px #000;
  --ember-bounce: 0 22px 46px -22px rgba(232, 122, 58, .45);

  /* — carved relic surface — */
  --relic-face: linear-gradient(172deg, #2b2118 0%, #1b1510 36%, #120e0b 100%);
  --relic-face-hi: linear-gradient(172deg, #33271b 0%, #211912 40%, #15100c 100%);
  --relic-bevel: inset 0 1px 0 var(--rim), inset 0 -2px 0 #000a, inset 0 0 0 1px rgba(201, 162, 39, .10), inset 0 0 34px #0008;
  --relic-line: color-mix(in srgb, var(--brass) 40%, #2a2018);
  --filigree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23c9a227' stroke-width='1.6'%3E%3Cdefs%3E%3Cg id='c'%3E%3Cpath d='M1.5 34V10Q1.5 1.5 10 1.5H34' stroke-opacity='.8'/%3E%3Cpath d='M7.5 26V14Q7.5 7.5 14 7.5H26' stroke-opacity='.38'/%3E%3Cpath d='M14 10l4 4-4 4-4-4z' fill='%23e8b862' fill-opacity='.75' stroke='none'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 96 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 96)'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 -1 96 96)'/%3E%3Cpath d='M34 1.5H62M34 94.5H62M1.5 34V62M94.5 34V62' stroke-opacity='.32'/%3E%3C/svg%3E");
  --stone-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fog-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .014' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .78 0 0 0 0 .68 0 0 0 0 .58 0 0 0 1.25 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  /* — type scale (Sarabun) — */
  --fs-micro: .62rem; --fs-xs: .72rem; --fs-sm: .82rem; --fs-md: .95rem;
  --fs-lg: 1.15rem; --fs-xl: 1.45rem; --fs-2xl: clamp(1.45rem, 5.2vw, 1.95rem);
  --fs-display: clamp(2.05rem, 7.4vw, 3.1rem);
  --track-eyebrow: .22em;

  /* — motion (motion.md presets) — */
  --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-emph: cubic-bezier(.2, 0, 0, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* — card type gems (semantic; match ribbon/preview colours) — */
  --gem-unit: #4fe3c1; --gem-attack: #ec5566; --gem-skill: #6fb0e0;
  --gem-power: #b892ea; --gem-buff: #f2b64c; --gem-trap: #b39a64;
}

/* ═════════════ 1 · ATMOSPHERE (global back plane + scene FX) ═════════════ */
.atmos {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  opacity: 1; transition: opacity .5s ease;
}
body[data-screen="title"] .atmos, body[data-screen="login"] .atmos, body[data-screen="battle"] .atmos { opacity: 0; }
.atmos-far {
  position: absolute; inset: -6%;
  background: var(--atmos-art, url("assets/scenes/ashwild.jpg")) center 40% / cover no-repeat;
  filter: saturate(.6) contrast(1.05) brightness(.34) blur(2px);
  transform: scale(1.06);
  translate: calc(var(--plx) * -16px) calc(var(--ply) * -11px);
  transition: background-image .6s ease;
  will-change: translate;
}
.atmos-far::after { /* lift the canvas into charcoal, keep top ember glow */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 45% at 50% -5%, rgba(196, 92, 38, .22), transparent 70%),
    linear-gradient(180deg, #0c0a09b0 0%, #0c0a0966 40%, #0c0a09d8 100%);
}
.scene-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fog {
  position: absolute; left: -50%; width: 200%; height: 55%; bottom: -6%;
  background: var(--fog-noise) 0 0 / 50% 100% repeat-x;
  opacity: .2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 80%, transparent 100%);
  animation: fogDrift 70s linear infinite;
  translate: calc(var(--plx) * -6px) 0;
}
.fog.f2 { bottom: 18%; height: 40%; opacity: .12; animation-duration: 110s; animation-direction: reverse; translate: calc(var(--plx) * -10px) 0; }
@keyframes fogDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.shafts {
  position: absolute; inset: -10% -20% 20% -20%;
  background:
    linear-gradient(104deg, transparent 0 18%, rgba(255, 178, 104, .13) 22%, transparent 28%,
      transparent 44%, rgba(255, 204, 150, .08) 47.5%, transparent 52%,
      transparent 64%, rgba(255, 168, 96, .10) 67%, transparent 73%);
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 85% at 50% 0%, #000 20%, transparent 78%);
  transform-origin: 50% 0%;
  animation: shaftSway 16s ease-in-out infinite alternate;
  translate: calc(var(--plx) * 10px) 0;
}
@keyframes shaftSway {
  0% { transform: skewX(-3deg); opacity: .75; }
  50% { opacity: 1; }
  100% { transform: skewX(4deg); opacity: .8; }
}
.ember-canvas {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  width: 100vw; height: 100vh; height: 100dvh;
}
.auth-page .ember-canvas { z-index: 2; }

/* ═════════════ 2 · RELIC SURFACES · BUTTONS · TYPE ═════════════ */
.relic-filigree, .title-hero-panel::after, .settings-sheet::after,
#ao-modal .ao-card::after, .end-stats::after, .auth-panel::after {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  border: 18px solid transparent;
  border-image: var(--filigree) 34 / 18px / 0 stretch;
  opacity: .62;
}

/* buttons — primary = forged ember-gold plate · secondary = dark bronze */
.btn:not(.end-turn) {
  position: relative; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--gold2) 70%, #6a4a1c);
  background:
    linear-gradient(180deg, rgba(255, 236, 196, .16) 0%, transparent 42%),
    linear-gradient(180deg, #6b4a1d 0%, #4a3212 46%, #2a1b09 100%);
  color: #fff1d2;
  text-shadow: 0 1px 0 #1a0e04, 0 0 12px rgba(255, 190, 110, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .45), inset 0 -3px 0 #0009, inset 0 0 0 1px #0006,
    inset 0 -16px 22px -12px rgba(232, 122, 58, .55),
    var(--e2), 0 0 22px rgba(232, 122, 58, .16);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              filter var(--dur-fast) var(--ease-out), border-color var(--dur) ease;
}
.btn:not(.end-turn):hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 180, .5), inset 0 -3px 0 #0009, inset 0 0 0 1px #0006,
    inset 0 -18px 24px -12px rgba(255, 150, 70, .7),
    var(--e3), 0 0 28px rgba(232, 122, 58, .28);
}
.btn:not(.end-turn):active {
  transform: translateY(1px) scale(.98); filter: brightness(.96);
  box-shadow: inset 0 2px 4px #000a, inset 0 0 0 1px #0006, inset 0 -10px 18px -10px rgba(232, 122, 58, .5), var(--e1);
}
.btn.secondary:not(.end-turn) {
  border-color: color-mix(in srgb, var(--brass) 26%, #3a3026);
  background:
    linear-gradient(180deg, rgba(255, 236, 196, .07) 0%, transparent 40%),
    linear-gradient(180deg, #2e261d 0%, #1d1812 55%, #14100c 100%);
  color: #e0d3bd; text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .14), inset 0 -2px 0 #0009, inset 0 0 0 1px #0005, var(--e2);
}
.btn.secondary:not(.end-turn):hover {
  border-color: color-mix(in srgb, var(--brass) 55%, #3a3026); color: var(--gold2);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .2), inset 0 -2px 0 #0009, inset 0 0 0 1px #0005, var(--e3), 0 0 16px rgba(201, 162, 39, .12);
}
.btn.secondary:not(.end-turn):active { box-shadow: inset 0 2px 4px #000b, inset 0 0 0 1px #0005, var(--e1); }
.btn.danger { background: linear-gradient(180deg, #4a1822, #22090f) !important; border-color: #8a3040 !important; color: #ffc4cc !important; }
.btn:disabled { box-shadow: var(--e1) !important; filter: grayscale(.5) brightness(.8) !important; }
.btn:focus-visible { outline: 2px solid #ffd59a; outline-offset: 3px; }

/* HUD pills → small relic plates */
.pill {
  background: linear-gradient(180deg, #241c15e8, #120e0be8);
  border-color: color-mix(in srgb, var(--brass) 26%, #2e261e);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 #000a, var(--e2);
}

/* headings — engraved, consistent scale */
.mode-head h2 { text-shadow: none !important; filter: drop-shadow(0 1px 0 #3a2810) drop-shadow(0 6px 10px #000c) drop-shadow(0 0 22px rgba(232, 122, 58, .25)); }
.screen h2, .overlay h2 {
  font-size: var(--fs-2xl); font-weight: 800; letter-spacing: .03em;
  text-shadow: 0 1px 0 #3a2810, 0 2px 0 #1a1008, 0 6px 14px #000c, 0 0 26px rgba(232, 122, 58, .18);
  text-wrap: balance;
}
.title-eyebrow, .mode-eyebrow, .guide-eyebrow, .auth-eyebrow { letter-spacing: var(--track-eyebrow); }

/* ═════════════ 3 · TITLE & LOGIN ═════════════ */
.title-scene-art {
  translate: calc(var(--plx) * -18px) calc(var(--ply) * -12px);
  filter: saturate(.78) contrast(1.12) brightness(.62);
  will-change: transform, translate;
}
.title-scene-glow {
  background:
    radial-gradient(ellipse 60% 40% at calc(var(--lx) * 1) 22%, rgba(232, 122, 58, .30), transparent 66%),
    radial-gradient(ellipse 55% 30% at 50% 100%, rgba(232, 122, 58, .20), transparent 70%),
    linear-gradient(180deg, #0c0a0999 0%, #0c0a0944 35%, #0c0a09bb 100%);
}
.title-embers { translate: calc(var(--plx) * 8px) calc(var(--ply) * 6px); }
.title-frame { translate: calc(var(--plx) * 3px) calc(var(--ply) * 2px); }
.title-crest-wrap { translate: calc(var(--plx) * 6px) calc(var(--ply) * 4px); }

.title-panel {
  background: linear-gradient(172deg, rgba(43, 33, 24, .86) 0%, rgba(27, 21, 16, .9) 36%, rgba(18, 14, 11, .94) 100%);
  border-color: var(--relic-line);
  box-shadow: var(--relic-bevel), var(--e3);
  backdrop-filter: none; -webkit-backdrop-filter: none; /* blur over an animated scene re-renders every frame on phones */
}
.title-hero-panel {
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(232, 122, 58, .20), transparent 62%),
    linear-gradient(172deg, rgba(51, 39, 27, .86) 0%, rgba(33, 25, 18, .9) 40%, rgba(21, 16, 12, .95) 100%);
  border-color: color-mix(in srgb, var(--brass) 52%, #2a2018);
  box-shadow: var(--relic-bevel), var(--e4), var(--ember-bounce);
  padding-top: 30px; padding-bottom: 26px;
}
.title-hero-panel::before {
  background:
    radial-gradient(circle at var(--lx) 0%, rgba(255, 210, 150, .14), transparent 45%),
    linear-gradient(180deg, rgba(201, 162, 39, .08), transparent 30%);
}
.title-profile-dock {
  background: linear-gradient(172deg, #1d1712 0%, #120e0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 226, 180, .10), inset 0 -1px 0 #000a, var(--e2);
  border-color: color-mix(in srgb, var(--brass) 22%, #2a2018);
  transform: scale(.985);
}
.title-screen h1, .login-screen h1, .auth-page h1 {
  font-size: var(--fs-display);
  filter: drop-shadow(0 1px 0 #6a4616) drop-shadow(0 2px 0 #2a1806) drop-shadow(0 8px 10px #000c) drop-shadow(0 0 26px rgba(232, 122, 58, .35));
}
.title-crest-ring { box-shadow: 0 0 0 4px #0c0a09aa, 0 0 34px rgba(232, 122, 58, .35), inset 0 0 18px #c45c2644, 0 10px 22px #000c; }
.title-crest { box-shadow: inset 0 2px 0 rgba(255, 220, 160, .25), inset 0 -4px 10px #000c, 0 0 22px #c45c2655; }
/* hero CTA "เล่น" — the brightest object on the screen */
#btn-start {
  min-width: 58%; min-height: 54px; font-size: 1.18rem; letter-spacing: .12em;
  background:
    radial-gradient(ellipse 70% 120% at 50% 120%, rgba(255, 150, 70, .55), transparent 60%),
    linear-gradient(180deg, rgba(255, 236, 196, .2) 0%, transparent 45%),
    linear-gradient(180deg, #8a5e22 0%, #5c3c14 46%, #321f0a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 190, .6), inset 0 -3px 0 #000a, inset 0 0 0 1px #0006,
    var(--e3), 0 0 34px rgba(232, 122, 58, .34), 0 0 0 4px rgba(12, 10, 9, .6), 0 0 0 5px rgba(201, 162, 39, .28);
}
.title-actions { gap: 10px; }
.title-extra #btn-online-duel { grid-column: 1 / -1; }
.title-welcome { box-shadow: var(--e0); background: linear-gradient(180deg, rgba(10, 8, 6, .55), rgba(10, 8, 6, .35)); }
.tutorial-tip, .class-tip {
  background: linear-gradient(172deg, rgba(43, 33, 24, .92), rgba(18, 14, 11, .94)) !important;
  box-shadow: var(--relic-bevel), var(--e3) !important;
}
.title-actions #btn-continue { min-height: 54px; }
.title-overflow {
  margin-top: 10px; padding: 10px; border-radius: 16px;
  background: linear-gradient(180deg, #0c0a09cc, #0c0a09ee);
  box-shadow: var(--e0);
  animation: overflowIn var(--dur-slow) var(--ease-out);
}
@keyframes overflowIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.title-ornament span { background: linear-gradient(90deg, transparent, rgba(232, 184, 98, .7), transparent); height: 1px; box-shadow: 0 1px 0 #000; }
.login-seal { box-shadow: var(--relic-bevel), var(--e2) !important; background: var(--relic-face) !important; }

/* ═════════════ 4 · MODES · HEROES · GUIDE · COLLECTION ═════════════ */
.mode-card, .hero-card, .guide-card {
  background: var(--relic-face);
  box-shadow: var(--relic-bevel), var(--e3);
  backdrop-filter: none;
}
.mode-card:hover, .mode-card:focus-visible, .hero-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--relic-bevel), var(--e4), 0 0 0 1px color-mix(in srgb, var(--mc, var(--brass)) 35%, transparent),
    0 26px 50px -20px color-mix(in srgb, var(--mc, var(--ember)) 45%, transparent);
}
.mode-card:active, .hero-card:active { transform: translateY(-1px) scale(.99); transition-duration: 90ms; }
.mode-head, .guide-head, .col-head { position: relative; z-index: 1; }
.col-sil {
  border: 1px solid #00000080;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 39, .07), transparent 55%),
    linear-gradient(165deg, #15110d, #0b0907);
  box-shadow: var(--e0), 0 1px 0 rgba(255, 220, 170, .06);
}
.col-sil-crest { box-shadow: inset 0 2px 4px #000c, 0 1px 0 rgba(255, 220, 170, .08); background: #0e0c09; }
.col-filters { box-shadow: var(--relic-bevel), var(--e2) !important; }
.guide-tab, .cf-chip { box-shadow: inset 0 1px 0 rgba(255, 226, 180, .10), var(--e1); }
.guide-tab.is-on, .cf-chip.is-on { box-shadow: inset 0 1px 0 rgba(255, 226, 180, .3), var(--e2), 0 0 16px rgba(232, 122, 58, .2); }

/* ═════════════ 5 · PATH MAP — replaced in v2.8 by map.css (adventure map) ═════════════ */

/* ═════════════ 6 · BATTLE — arena diorama ═════════════ */
.battle-scene {
  transform: scale(1.1);
  translate: calc(var(--plx) * -16px) calc(var(--ply) * -10px);
  filter: saturate(.95) contrast(1.08) brightness(.9);
  will-change: translate;
}
.battle-scene-veil {
  background:
    linear-gradient(180deg, #0c0a09d0 0%, #0c0a0970 16%, #0c0a0920 36%, #0c0a0960 58%, #0c0a09d8 82%, #0a0806 100%),
    radial-gradient(ellipse 85% 60% at 50% 30%, transparent 40%, #060504aa 100%);
}
.arena { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.arena-plane { position: absolute; left: 0; right: 0; top: 30%; bottom: 0; }
/* 2D-faked perspective floor (rings as flattened ellipses, grout converging to a far vanishing point):
   looks like a table in perspective but costs one static layer — a real rotateX plane was too heavy on phones */
.arena-floor {
  position: absolute; left: -8%; right: -8%; top: 0; bottom: 0;
  translate: calc(var(--plx) * -8px) 0;
  background:
    radial-gradient(ellipse 30% 9% at 50% 21%, rgba(255, 160, 80, .30), rgba(196, 92, 38, .10) 55%, transparent 75%),
    radial-gradient(ellipse 46% 15% at 50% 22%, transparent 0 93%, rgba(232, 184, 98, .26) 95.5%, transparent 98%),
    radial-gradient(ellipse 54% 18.5% at 50% 22%, transparent 0 95%, rgba(232, 184, 98, .14) 97%, transparent 99%),
    radial-gradient(ellipse 92% 34% at 50% 22%, transparent 0 96%, rgba(232, 184, 98, .10) 97.5%, transparent 99%),
    repeating-conic-gradient(from 180deg at 50% -90%, transparent 0 2.6deg, rgba(0, 0, 0, .34) 2.6deg 2.75deg),
    linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .3) 18%, transparent 19%, transparent 34%, rgba(0, 0, 0, .3) 35%, transparent 36.5%, transparent 58%, rgba(0, 0, 0, .3) 59%, transparent 61%),
    var(--stone-noise) 0 0 / 140px,
    linear-gradient(180deg, #2a2017, #15100c);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 55%, transparent 88%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 55%, transparent 88%);
  opacity: .5;
}
.screen.battle .scene-fx .fog { bottom: 26%; opacity: .16; }
.screen.battle .scene-fx .fog.f2 { display: none; }
.screen.battle .scene-fx .shafts { opacity: .7; inset: -10% -20% 40% -20%; }
/* battle: atmosphere holds still on phones so motion budget goes to the cards */
@media (max-width: 899px), (hover: none) {
  .screen.battle .scene-fx .fog, .screen.battle .scene-fx .shafts { animation: none; }
}
.screen.battle.enemy-phase .arena-floor { filter: hue-rotate(-18deg) saturate(1.3); }

/* HUD plate */
.battle-title { text-shadow: 0 1px 0 #000, 0 2px 8px #000c; }

/* enemies: back-halo + pedestal shadow + idle breath */
.enemy .portrait-wrap { isolation: isolate; animation: foeBreath 5.2s ease-in-out infinite; }
.enemy:nth-child(2) .portrait-wrap { animation-delay: -1.7s; }
.enemy:nth-child(3) .portrait-wrap { animation-delay: -3.1s; }
.enemy .portrait-wrap::before {
  content: ""; position: absolute; inset: -22% -22% -10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 50% 46%, rgba(232, 122, 58, .34), rgba(196, 92, 38, .10) 46%, transparent 68%);
  pointer-events: none;
}
.enemy .portrait-wrap::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -7px; height: 12px; z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, #000e 0%, #000a 35%, transparent 70%);
  filter: blur(2px); pointer-events: none;
}
@keyframes foeBreath { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.012); } }
.enemy .portrait {
  border: 1px solid color-mix(in srgb, var(--brass) 44%, #1a140f);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 180, .30), inset 0 -18px 30px -10px #000c, inset 0 0 0 1px #000a,
    0 0 0 3px #0c0a09cc, 0 0 0 4px rgba(201, 162, 39, .26),
    var(--e3);
}
.enemy.targeted .portrait { outline-color: #ffd28a; box-shadow: inset 0 1px 0 rgba(255, 226, 180, .3), inset 0 -18px 30px -10px #000c, 0 0 0 3px #0c0a09cc, 0 0 0 4px #ffd28a, var(--e3), 0 0 26px rgba(255, 190, 110, .45); }
.enemy .intent {
  background: linear-gradient(180deg, #2a1f17f2, #140f0cf2);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 #000a, var(--e2);
  position: relative;
}
.intent.attack { box-shadow: inset 0 1px 0 rgba(255, 180, 190, .25), inset 0 -1px 0 #000a, var(--e2), 0 0 14px rgba(236, 85, 102, .35); }
.enemy .name, .enemy .hpbar, .enemy .status, .enemy .intent-extra, .enemy .intent { position: relative; z-index: 2; }
.enemy .name { text-shadow: 0 1px 0 #000, 0 2px 6px #000; }
.enemy .hpbar, .player-stats .hpbar {
  box-shadow: inset 0 2px 3px #000c, 0 1px 0 rgba(255, 220, 170, .08);
  border-color: #000;
}
.hpbar .fill { background: linear-gradient(180deg, #ff7a88 0%, #c8394a 45%, #7a1622 100%); box-shadow: inset 0 1px 0 #ffffff40; }
.hpbar .block-fill { background: linear-gradient(180deg, #a6d8ff 0%, #5a9cd0 50%, #2a5480 100%); }

/* player bar → stone ledge facing the player */
.player-bar {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0%, rgba(12, 10, 8, .55) 26%, rgba(10, 8, 6, .82) 100%);
  border-top: 0;
}
.player-portrait {
  box-shadow: inset 0 1px 0 rgba(255, 230, 190, .35), 0 0 0 2px #0c0a09, 0 0 0 3px rgba(201, 162, 39, .45), var(--e2), 0 0 14px rgba(232, 122, 58, .25);
}
.class-meter { box-shadow: inset 0 1px 0 var(--rim), inset 0 -1px 0 #000a, var(--e2) !important; }

/* board: carved tray with sockets; units cast contact shadows */
.player-board {
  width: max-content; max-width: 100%; margin: 0 auto;
  padding: 6px 8px 8px; border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .15)),
    var(--stone-noise) 0 0 / 160px;
  box-shadow: inset 0 3px 8px #000c, inset 0 -1px 0 rgba(255, 220, 170, .08), 0 1px 0 rgba(255, 220, 170, .05);
}
.board-slot.empty {
  border: 1px solid #0009;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(201, 162, 39, .10) 35% 36%, transparent 37%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232, 122, 58, .07), transparent 70%),
    linear-gradient(180deg, #0b0907, #15110d);
  box-shadow: var(--e0);
  color: #6a5c4c99;
}
.board-slot.filled::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -7px; height: 12px; z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, #000d, transparent 70%);
  pointer-events: none;
}
.unit {
  position: relative; z-index: 1;
  box-shadow: inset 0 1px 0 rgba(220, 255, 240, .30), inset 0 -10px 18px -8px #000c, var(--e3), 0 0 14px rgba(79, 227, 193, .25);
}
.unit.guardian { box-shadow: inset 0 1px 0 rgba(220, 240, 255, .3), inset 0 -10px 18px -8px #000c, var(--e3), 0 0 14px rgba(126, 200, 255, .35); }
.unit-art { box-shadow: inset 0 -12px 16px -6px #000c; }

/* end turn — forged plate; ember core when it's the only move left */
.end-turn {
  background:
    linear-gradient(180deg, rgba(255, 236, 196, .18) 0%, transparent 40%),
    linear-gradient(180deg, #6a4a1c 0%, #4a3212 50%, #22160a 100%);
  border-color: color-mix(in srgb, var(--gold2) 80%, #6a4a1c);
  color: #fff1d2; text-shadow: 0 1px 0 #1a0e04;
  box-shadow: inset 0 1px 0 rgba(255, 230, 180, .5), inset 0 -4px 0 #000a, inset 0 0 0 1px #0006, var(--e3), 0 0 20px rgba(232, 122, 58, .2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) ease, filter var(--dur-fast) ease;
}
.end-turn:active:not(:disabled) { transform: translateY(2px) scale(.98); box-shadow: inset 0 2px 5px #000b, inset 0 0 0 1px #0006, var(--e1); }
.end-turn.pulse {
  background:
    radial-gradient(ellipse 80% 120% at 50% 120%, rgba(255, 150, 70, .65), transparent 62%),
    linear-gradient(180deg, rgba(255, 236, 196, .2) 0%, transparent 40%),
    linear-gradient(180deg, #8a5e22 0%, #5c3c14 50%, #2c1c0a 100%);
}

/* hand: foreground lip — the table edge closest to you */
.hand-area {
  position: relative;
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%, rgba(232, 122, 58, .14), transparent 70%),
    linear-gradient(180deg, rgba(14, 11, 8, .55) 0%, rgba(10, 8, 6, .92) 34%, #080605 100%);
  border-top: 0;
  box-shadow: 0 -18px 30px -6px #000c;
}
.hand-area::before { /* bevelled brass lip */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; pointer-events: none;
  background: linear-gradient(180deg, rgba(232, 184, 98, .38) 0, rgba(232, 184, 98, .38) 1px, rgba(60, 40, 18, .9) 1px, #0a0806 6px);
  box-shadow: 0 -1px 0 #000, 0 3px 6px #000c;
}
.hand { perspective: 700px; }
.hand .card { transform-origin: 50% 110%; }
.hand .card .card-inner { box-shadow: inset 0 1px 0 #ffffff22, inset 0 -1px 0 #00000080, inset 0 0 0 1px #000c, inset 0 0 22px #000a, var(--e3); }
.hand .card.playable .card-inner {
  box-shadow:
    inset 0 1px 0 #ffffff26, inset 0 -1px 0 #00000080, inset 0 0 0 1px #000c, inset 0 0 22px #000a, var(--e3),
    0 0 0 1.5px color-mix(in srgb, var(--glow-play) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--glow-play) 45%, transparent);
}
.pile-info { text-shadow: 0 1px 0 #000; position: relative; z-index: 1; }

/* ═════════════ 7 · CARDS — bevel · type gem · idle foil ═════════════ */
.card-inner { border-width: 1.5px; }
.card .art-wrap::after {
  height: 100%;
  background:
    radial-gradient(ellipse 85% 70% at 50% 38%, transparent 55%, #0009 100%),
    linear-gradient(180deg, transparent 58%, #120e12 100%);
}
.card .type-ribbon { display: flex; align-items: center; justify-content: center; gap: 5px; }
.card .type-ribbon::before {
  content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); border-radius: 1.5px;
  background: radial-gradient(circle at 32% 30%, #fff 0 10%, var(--g, #ccc) 38%, color-mix(in srgb, var(--g, #ccc) 35%, #000) 100%);
  box-shadow: 0 0 6px var(--g, #ccc), 0 0 0 1px #0009;
}
.card.type-unit   { --g: var(--gem-unit); }
.card.type-attack { --g: var(--gem-attack); }
.card.type-skill  { --g: var(--gem-skill); }
.card.type-power  { --g: var(--gem-power); }
.card.type-buff   { --g: var(--gem-buff); }
.card.type-trap   { --g: var(--gem-trap); }
.card.type-curse  { --g: var(--ember-hot); }
.card .type-ribbon { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--g, #888) 55%, transparent); }
.card .cost {
  background:
    conic-gradient(from 200deg at 50% 55%, transparent 0 20%, rgba(255, 255, 255, .18) 25%, transparent 32%, transparent 70%, rgba(255, 255, 255, .12) 76%, transparent 82%),
    radial-gradient(ellipse 55% 35% at 40% 25%, #ffffffcc, transparent 70%),
    radial-gradient(circle at 50% 60%, #86d0f0, #2a6aa0 45%, #0e2848 80%);
}
.card .name-bar { text-shadow: 0 1px 0 #000, 0 0 8px rgba(0, 0, 0, .6); }
/* idle foil sweep (touch users see it too) — only where few cards are on screen */
.hand .card.rarity-rare .art-wrap::before, .hand .card.rarity-epic .art-wrap::before, .hand .card.rarity-curse .art-wrap::before,
.reward-row .card:not(.rarity-common) .art-wrap::before, .shop-slot .card:not(.rarity-common) .art-wrap::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .0) 42%, rgba(255, 244, 214, .28) 48%, rgba(180, 220, 255, .16) 52%, transparent 60%);
  /* no blend mode: keeps phones compositing cheap */
  transform: translateX(-60%);
  animation: foilSweep 6.5s var(--ease-in-out, ease-in-out) infinite;
}
.card.rarity-epic .art-wrap::before, .card.rarity-curse .art-wrap::before { animation-duration: 4.8s; }
@keyframes foilSweep { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }

/* card-play ghost: a real arc (up, over, into the target) */
.ghost-play { animation: ghostArc .56s cubic-bezier(.3, .0, .4, 1) forwards !important; }
@keyframes ghostArc {
  0% { transform: translate(0, 0) scale(1) rotateX(0); opacity: 1; filter: brightness(1); }
  40% { transform: translate(calc(var(--gx) * .35), calc(var(--gy) * .45 - 70px)) scale(1.16) rotateX(14deg); opacity: 1; filter: brightness(1.35) drop-shadow(0 30px 30px #000c); }
  100% { transform: translate(var(--gx), var(--gy)) scale(.42) rotateX(30deg) rotateZ(8deg); opacity: 0; filter: brightness(2); }
}
.card.deal { animation: dealArc .42s var(--ease-out) backwards; }
@keyframes dealArc {
  from { opacity: 0; transform: translate(60px, 70px) rotate(14deg) scale(.82); }
  to { opacity: 1; }
}

/* ═════════════ 8 · JUICE — damage numbers · hit · trap flip ═════════════ */
.float-dmg {
  font-size: 2.1rem; font-weight: 900; letter-spacing: -.01em;
  paint-order: stroke fill; -webkit-text-stroke: 4px #1a0606;
  text-shadow: 0 1px 0 #5a1010, 0 2px 0 #3a0808, 0 3px 0 #2a0505, 0 6px 10px #000c;
  animation: dmgPop .95s var(--ease-out) forwards;
  will-change: transform, opacity;
}
.float-dmg.block, .float-dmg.soul, .float-dmg.void { -webkit-text-stroke: 3px #06101a; text-shadow: 0 1px 0 #10304a, 0 2px 0 #0a1e30, 0 6px 10px #000c; font-size: 1.15rem; }
.float-dmg.heal { -webkit-text-stroke: 3px #061a0c; text-shadow: 0 1px 0 #104a20, 0 2px 0 #0a3014, 0 6px 10px #000c; }
@keyframes dmgPop {
  0% { opacity: 0; transform: translateY(6px) scale(.4); }
  16% { opacity: 1; transform: translateY(-10px) scale(1.4); }
  32% { transform: translateY(-14px) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-62px) scale(.92); }
}
.enemy.hit .portrait { filter: brightness(1.7) saturate(1.3) sepia(.2); }

.trap-reveal {
  position: fixed; left: 50%; top: 46%; z-index: 70; pointer-events: none;
  width: 116px; height: 164px; margin: -82px 0 0 -58px; perspective: 700px;
}
.trap-reveal .tr-card {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: trapFlip 1.15s var(--ease-out) forwards;
}
.trap-reveal .tr-face {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px;
  box-shadow: var(--e4), 0 0 30px rgba(232, 122, 58, .4);
}
.trap-reveal .tr-back {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 22%, rgba(201, 162, 39, .5) 23% 24%, transparent 25% 34%, rgba(201, 162, 39, .3) 35% 36%, transparent 37%),
    repeating-linear-gradient(45deg, #1a1410 0 8px, #221a12 8px 16px);
  border: 2px solid var(--brass);
}
.trap-reveal .tr-front {
  transform: rotateY(180deg);
  background: linear-gradient(170deg, #2e2418, #120e0a);
  border: 2px solid var(--gem-trap); color: var(--gold2);
}
.trap-reveal .tr-kicker { font-size: var(--fs-micro); letter-spacing: .2em; color: var(--gem-trap); font-weight: 800; }
.trap-reveal .tr-name { font-size: var(--fs-md); font-weight: 800; line-height: 1.25; text-shadow: 0 1px 0 #000; }
.trap-reveal .tr-gem { width: 14px; height: 14px; transform: rotate(45deg); background: radial-gradient(circle at 32% 30%, #fff 0 10%, var(--gem-trap) 40%, #2a2010); box-shadow: 0 0 10px var(--gem-trap); }
@keyframes trapFlip {
  0% { transform: translateY(40px) rotateY(0) scale(.6); }
  18% { transform: translateY(0) rotateY(0) scale(1); }
  50% { transform: translateY(-6px) rotateY(180deg) scale(1.08); }
  80% { transform: translateY(-10px) rotateY(180deg) scale(1.04); }
  100% { transform: translateY(-40px) rotateY(180deg) scale(.9); }
}
.trap-reveal { animation: trapFade 1.15s linear forwards; }
@keyframes trapFade { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* turn banner depth */
.turn-banner span, .turn-banner .tb-inner { box-shadow: var(--e4), inset 0 1px 0 var(--rim-strong) !important; }

/* ═════════════ 9 · OVERLAYS — spotlight · altar · victory/defeat ═════════════ */
.overlay {
  background:
    radial-gradient(ellipse 70% 46% at 50% 30%, rgba(232, 122, 58, .16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(10, 8, 6, .55) 30%, rgba(4, 3, 2, .94) 100%);
  backdrop-filter: blur(6px) saturate(.8) brightness(.8);
}
.overlay.show > * { animation: ovRise var(--dur-slow) var(--ease-out) backwards; }
.overlay.show > *:nth-child(2) { animation-delay: 40ms; }
.overlay.show > *:nth-child(3) { animation-delay: 80ms; }
.overlay.show > *:nth-child(4) { animation-delay: 120ms; }
.overlay.show > *:nth-child(n+5) { animation-delay: 160ms; }
@keyframes ovRise { from { opacity: 0; transform: translateY(12px); } }
.overlay > h2::after {
  content: ""; display: block; height: 12px; width: min(220px, 60vw); margin: 8px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12'%3E%3Cdefs%3E%3ClinearGradient id='l' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23e8b862' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23e8b862' stop-opacity='.8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6H96' stroke='url(%23l)'/%3E%3Cpath d='M124 6H220' stroke='url(%23l)' transform='matrix(-1 0 0 1 344 0)'/%3E%3Cpath d='M110 1l5 5-5 5-5-5z' fill='%23e8b862'/%3E%3Cpath d='M100 6l3-3 3 3-3 3zM114 6l3-3 3 3-3 3z' fill='%23c45c26' opacity='.8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.reward-row { position: relative; padding-bottom: 18px; }
.reward-row::after { /* altar pool under the offered cards */
  content: ""; position: absolute; left: -6%; right: -6%; bottom: -4px; height: 46px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(232, 122, 58, .28), rgba(0, 0, 0, .55) 55%, transparent 75%);
}
.reward-row .card { filter: drop-shadow(0 18px 18px #000c); }
.reward-row .card .card-inner { box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #00000080, inset 0 0 0 1px #000c, inset 0 0 22px #000a, var(--e4); }
.shop-slot {
  background: var(--relic-face);
  box-shadow: var(--relic-bevel), var(--e3);
  backdrop-filter: none;
}
.shop-slot:hover { box-shadow: var(--relic-bevel), var(--e4), 0 0 0 1px color-mix(in srgb, var(--ash) 30%, transparent); }
.end-stats { position: relative; background: var(--relic-face) !important; box-shadow: var(--relic-bevel), var(--e4) !important; }
.end-stats .es { box-shadow: var(--e0); }
@property --ray { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.overlay[data-end]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .6s ease;
}
.overlay.show[data-end="win"]::before {
  opacity: .6;
  background: repeating-conic-gradient(from var(--ray) at 50% 30%, rgba(255, 196, 110, .17) 0 4deg, transparent 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 62vmin);
          mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 62vmin);
  animation: raysTurn 80s linear infinite;
}
@keyframes raysTurn { to { --ray: 360deg; } }
.overlay.show[data-end="win"] > h2 { color: #ffe2a0; text-shadow: 0 1px 0 #6a4616, 0 2px 0 #2a1806, 0 0 30px rgba(255, 190, 110, .6); }
.overlay.show[data-end="loss"], .overlay.show[data-end="end"] {
  background:
    radial-gradient(ellipse 70% 46% at 50% 30%, rgba(120, 130, 150, .12), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(8, 8, 10, .6) 30%, rgba(2, 2, 3, .96) 100%);
  backdrop-filter: blur(6px) grayscale(.85) brightness(.6);
}
.overlay.show[data-end="loss"] > h2 { color: #d8d0c8; text-shadow: 0 1px 0 #222, 0 2px 0 #111, 0 0 26px rgba(200, 58, 74, .45); }

/* ═════════════ 10 · MODALS — carved relic sheets ═════════════ */
.settings-sheet, .profile-modal-card, #ao-modal .ao-card {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(232, 122, 58, .12), transparent 70%),
    var(--stone-noise) 0 0 / 180px,
    var(--relic-face-hi);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, #2a2018);
  box-shadow: var(--relic-bevel), var(--e5), 0 0 60px rgba(196, 92, 38, .16);
}
#ao-modal .ao-card { position: relative; border-radius: 20px; }
.profile-modal-card { position: relative; }
#ao-modal .ao-box { background: linear-gradient(180deg, #0f0c0a, #15110d); box-shadow: var(--e0); border-color: #0008; }
#ao-modal .ao-backdrop { background: radial-gradient(ellipse at 50% 30%, #0a0806aa, #000000e0); }
.st-sec h4 { letter-spacing: .14em; }
.toast { box-shadow: var(--relic-bevel), var(--e4); background: var(--relic-face-hi); }

/* ═════════════ 11 · AUTH PAGE ═════════════ */
.auth-page .title-scene-art { translate: calc(var(--plx) * -18px) calc(var(--ply) * -12px); }
.auth-panel {
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(232, 122, 58, .12), transparent 70%),
    var(--relic-face-hi) !important;
  box-shadow: var(--relic-bevel), var(--e5), var(--ember-bounce) !important;
  border-color: color-mix(in srgb, var(--brass) 45%, #2a2018) !important;
}
.auth-tabs { box-shadow: var(--e0) !important; background: #0b0907 !important; }
.auth-tab[aria-selected="true"] { box-shadow: inset 0 1px 0 var(--rim-strong), var(--e2), 0 0 14px rgba(232, 122, 58, .22) !important; }
.auth-page .pm-input, .pm-input { box-shadow: var(--e0); background-color: #0d0b09; }
.auth-page .pm-input:focus, .pm-input:focus { box-shadow: var(--e0), 0 0 0 2px rgba(232, 184, 98, .45); }

/* ═════════════ 12 · MOBILE TUNING ═════════════ */
@media (max-width: 600px) {
  .title-hero-panel { padding-top: 24px; padding-bottom: 20px; }
  #btn-start { min-width: 100%; }
  .title-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .title-actions .btn { width: 100%; }
  .arena-plane { top: 34%; }
  .float-dmg { font-size: 1.8rem; }
  .relic-filigree, .title-hero-panel::after, .settings-sheet::after, .auth-panel::after, #ao-modal .ao-card::after, .end-stats::after { border-width: 14px; border-image-width: 14px; inset: 4px; }
  .enemy .portrait-wrap::after { bottom: -9px; height: 13px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .arena-plane { top: 22%; }
  .title-actions { display: flex; }
}

/* ═════════════ 13 · REDUCED MOTION ═════════════ */
body.reduce-motion .atmos-far, body.reduce-motion .title-scene-art, body.reduce-motion .battle-scene,
body.reduce-motion .fog, body.reduce-motion .shafts, body.reduce-motion .arena-floor,
body.reduce-motion .title-frame, body.reduce-motion .title-crest-wrap, body.reduce-motion .title-embers { translate: none !important; }
body.reduce-motion .fog, body.reduce-motion .shafts, body.reduce-motion .enemy .portrait-wrap,
body.reduce-motion .art-wrap::before, body.reduce-motion .overlay[data-end]::before { animation: none !important; }
body.reduce-motion .ember-canvas { display: none; }
body.reduce-motion .trap-reveal .tr-card { animation: none !important; transform: rotateY(180deg); }
body.reduce-motion .trap-reveal { animation: trapFade 1.15s linear forwards !important; animation-duration: 1.15s !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(.force-motion) .fog, body:not(.force-motion) .shafts, body:not(.force-motion) .enemy .portrait-wrap,
  body:not(.force-motion) .art-wrap::before, body:not(.force-motion) .overlay[data-end]::before { animation: none !important; }
}