/* ============================================================================
 * Monstar UI
 * Design tokens → layout → panels → modals → battle → effects (verbatim) → media
 * ========================================================================== */
:root {
  color-scheme: dark;
  --ink: #eaf0f7;
  --ink-soft: #b9c4d4;
  --muted: #8a97ab;
  --bg-0: #0c1018;
  --bg-1: #121826;
  --panel: #1a2233;
  --panel-2: #212c41;
  --panel-line: rgba(255, 255, 255, 0.09);
  --panel-hi: rgba(255, 255, 255, 0.05);
  --field: #5ea867;
  --water: #4b9cc8;
  --gold: #f0b440;
  --gold-deep: #c8881e;
  --teal: #43c5b0;
  --violet: #9b87f0;
  --danger: #e0594a;
  --ok: #3fc77a;
  --ok-deep: #2a9d63;
  --focus: #6cb6e8;
  --clean-map-bg-image: none;
  --clean-world-menu-bg-image: none;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Frosted-glass system — the same look as the in-battle combat cards,
     shared by every panel/modal/console so the whole UI reads as one. */
  --glass-bg: linear-gradient(180deg, rgba(28, 37, 58, 0.56), rgba(12, 17, 28, 0.70));
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-edge-top: rgba(255, 255, 255, 0.30);
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  --glass-blur: blur(16px) saturate(1.4);
  --glass-sheen:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 16%, transparent 44%),
    radial-gradient(120% 60% at 50% -14%, rgba(255, 255, 255, 0.08), transparent 60%);
}

* { box-sizing: border-box; }

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font);
  color-scheme: light;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.82)),
    var(--clean-map-bg-image) center / cover no-repeat,
    #fff;
  background-attachment: fixed;
}

body.title-booting {
  background: #fff;
}

body.title-booting .shell,
body.title-booting #battle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 42px;
  padding: 0 16px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 1px 0 var(--panel-hi), var(--shadow-sm);
}

button:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, #283450, var(--panel-2));
}

button:focus-visible {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(108, 182, 232, 0.32), inset 0 1px 0 var(--panel-hi);
}

button:active { transform: translateY(1px); }

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}

/* Accent buttons keyed off existing element ids */
#saveBtn, #onlineSaveBtn, #catchBtn {
  background: linear-gradient(180deg, #2f9d63, var(--ok-deep));
  border-color: rgba(255, 255, 255, 0.2);
  color: #f3fff7;
}
#saveBtn:hover, #onlineSaveBtn:hover, #catchBtn:hover { background: linear-gradient(180deg, #38b673, #2f9d63); }
#loadBtn {
  background: linear-gradient(180deg, #365f9f, #243f73);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f4f8ff;
}
#loadBtn:hover { background: linear-gradient(180deg, #4272ba, #365f9f); }
#runBtn { color: #ffd9d2; }
#runBtn:hover { border-color: var(--danger); }
#talkBtn {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: rgba(255, 255, 255, 0.22);
  color: #2a1d05;
}
#talkBtn:hover { background: linear-gradient(180deg, #ffc857, var(--gold)); }

#desktopLandControls {
  display: none;
}

html:not(.is-touch) body.desktop-land-controls-visible #desktopLandControls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 15;
  width: 154px;
  height: 154px;
  display: block;
  pointer-events: none;
}

body:has(#battle:not(.hidden)) #desktopLandControls,
body:has(#modal:not(.hidden)) #desktopLandControls,
body:has(#tacticsLayer:not(.hidden)) #desktopLandControls,
body.title-booting #desktopLandControls {
  display: none;
}

.desktop-land-btn {
  position: absolute;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
  color: #fff;
  pointer-events: auto;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
  -webkit-user-select: none;
  user-select: none;
}

.desktop-land-action-btn {
  right: 0;
  bottom: 0;
  width: 78px;
  height: 78px;
  font-size: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: radial-gradient(circle at 36% 28%, #f7f9ff 0 8%, #333842 32%, #050505 100%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px rgba(0, 0, 0, 0.76),
    0 0 0 2px rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.52);
}

.desktop-land-build-btn {
  right: 62px;
  bottom: 90px;
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  background:
    linear-gradient(#111722, #030303) padding-box,
    conic-gradient(from 0deg, #ff5a8a, #ffd36a, #5dff9a, #54d9ff, #a66cff, #ff5a8a) border-box;
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.28),
    inset 0 -14px 20px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(118, 230, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.58);
  animation: landBuildPulse 1.15s linear infinite;
  font-size: 0.72rem;
}

.desktop-land-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.86);
}

.desktop-land-action-btn:hover {
  background: radial-gradient(circle at 36% 28%, #f7f9ff 0 8%, #333842 32%, #050505 100%);
}

.desktop-land-build-btn:hover {
  background:
    linear-gradient(#111722, #030303) padding-box,
    conic-gradient(from 0deg, #ff5a8a, #ffd36a, #5dff9a, #54d9ff, #a66cff, #ff5a8a) border-box;
}

.desktop-land-btn:active {
  transform: scale(0.94);
}

.shell {
  width: min(1560px, 100%);
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 380px);
  align-items: center;
  gap: 26px;
  padding: 26px;
}

.playfield {
  position: relative;
  /* Largest 4:3 box that fits the column width AND the viewport height,
     so a taller window makes the game bigger instead of adding dead space.
     (100vh - 52px) accounts for .shell's 26px top/bottom padding. */
  width: min(100%, calc((100vh - 52px) * 4 / 3));
  max-width: 1100px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.89)),
    var(--clean-map-bg-image) center / cover no-repeat,
    #fff;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.playfield::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

body.tactics-active .shell {
  grid-template-columns: minmax(320px, 1fr);
  max-width: 1600px;
}

body.tactics-active .side-panel {
  display: none;
}

body.tactics-active .playfield {
  width: min(100%, calc((100vh - 52px) * 16 / 9));
  max-width: 1500px;
  aspect-ratio: 16 / 9;
  padding: 6px;
  background: #05090e;
}

body.tactics-active .tactics-layer {
  inset: 6px;
}

#game {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  image-rendering: pixelated;
}

.tactics-layer {
  position: absolute;
  inset: 10px;
  z-index: 22;
  overflow: hidden;
  display: block;
  border-radius: 8px;
  background: #05090e;
  color: #fffaf0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  touch-action: none;
  /* Block double/triple-tap text selection so Chrome's Touch-to-Search sheet never opens mid-battle */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.tactics-layer.hidden {
  display: none;
}

.tactics-viewport {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The board has its own JS pinch/wheel zoom — without this the BROWSER also
     pinch-zooms the page at the same time and the HUD ends up off-screen. */
  touch-action: none;
}

.tactics-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 1;
  transition: opacity 180ms ease-out;
}

.tactics-viewport.is-render-warming canvas {
  opacity: 0;
}

.tactics-layer.is-render-warming > :not(.tactics-viewport) {
  opacity: 0.62;
  transition: opacity 180ms ease-out;
}

.tactics-viewport.is-render-warming::after {
  content: attr(data-render-warmup-label);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  min-width: min(280px, calc(100% - 40px));
  padding: 12px 20px 12px 46px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 232, 172, 0.34);
  border-radius: 999px;
  color: #fff4d0;
  background:
    radial-gradient(circle at 18px 50%, rgba(147, 244, 255, 0.22), transparent 18px),
    linear-gradient(180deg, rgba(35, 31, 27, 0.94), rgba(9, 12, 16, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 34px rgba(0, 0, 0, 0.42);
  font-size: clamp(0.78rem, 1.4vw, 0.96rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

.tactics-viewport.is-render-warming::before {
  content: "";
  position: absolute;
  left: calc(50% - min(140px, calc(50% - 20px)) + 17px);
  top: calc(50% - 8px);
  z-index: 7;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 244, 208, 0.26);
  border-top-color: #8ff4ff;
  border-right-color: #ffd77d;
  border-radius: 50%;
  animation: tacticsRenderWarmupSpin 0.78s linear infinite;
  pointer-events: none;
}

@keyframes tacticsRenderWarmupSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tactics-viewport.is-render-warming::before {
    animation-duration: 1.8s;
  }
}

.tactics-cinematic {
  --fx-a: 125, 240, 255;
  --fx-b: 255, 211, 107;
  --fx-c: 89, 255, 178;
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  isolation: isolate;
  background:
    linear-gradient(115deg, rgba(3, 7, 12, 0.92), rgba(var(--fx-c), 0.18) 44%, rgba(3, 7, 12, 0.9)),
    radial-gradient(circle at 50% 50%, rgba(var(--fx-a), 0.24), transparent 38%);
  animation: tacticsCinematicIn 260ms ease-out both;
}

.tactics-cinematic--victory {
  --fx-a: 255, 244, 196;
  --fx-b: 255, 214, 118;   /* gold leads the win; mint is the accent */
  --fx-c: 109, 239, 171;
}

.tactics-cinematic--defeat {
  --fx-a: 255, 88, 92;
  --fx-b: 151, 116, 255;
  --fx-c: 38, 35, 54;
}

.tactics-cinematic--godheart {
  --fx-a: 255, 255, 255;
  --fx-b: 255, 216, 106;
  --fx-c: 125, 240, 255;
}

.tactics-cinematic.is-exiting {
  animation: tacticsCinematicOut 320ms ease-in forwards;
}

/* Beyond fight-start: enemy figures march up and set around you before the title locks. */
.tactics-cinematic__approach {
  position: absolute;
  left: 0; right: 0; bottom: 11%;
  z-index: 3;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(4px, 2.4vw, 30px);
  pointer-events: none;
}
.tactics-cinematic__figure {
  position: relative;
  width: min(20vw, 130px);
  height: min(32vh, 240px);
  opacity: 0;
  transform: translate(var(--fx, 0), 120%) scale(0.82);
  animation: tacticsFigureMarch 940ms cubic-bezier(0.22, 0.72, 0.2, 1) var(--fdelay, 0ms) forwards;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
}
.tactics-cinematic__figure.is-lead {
  width: min(25vw, 166px);
  height: min(39vh, 292px);
  z-index: 2;
}
.tactics-cinematic__figure b {
  position: absolute; inset: 0;
  background-image: var(--portrait-image, none);
  background-size: var(--portrait-size, cover);
  background-position: var(--portrait-position, center);
  background-repeat: no-repeat;
  border-radius: 16px 16px 9px 9px;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent);
  mask-image: linear-gradient(180deg, #000 74%, transparent);
  box-shadow: inset 0 0 0 2px rgba(var(--team-rgb, 255, 111, 120), 0.55),
              inset 0 -46px 66px rgba(3, 6, 10, 0.62);
}
.tactics-cinematic__figure b::after {
  content: ""; position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 32%, rgba(var(--team-rgb, 255, 111, 120), 0.42), transparent 62%);
  mix-blend-mode: screen; opacity: 0.85;
}
.tactics-cinematic__figure small {
  position: absolute; left: 50%; bottom: -7%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(9px, 1.5vw, 13px);
  font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 8px #000;
  opacity: 0;
  animation: tacticsFigureName 460ms ease forwards;
  animation-delay: calc(var(--fdelay, 0ms) + 780ms);
}
@keyframes tacticsFigureMarch {
  0% { opacity: 0; transform: translate(var(--fx, 0), 128%) scale(0.78); }
  50% { opacity: 1; }
  72% { transform: translate(var(--fx, 0), -7%) scale(1.03); }
  100% { opacity: 1; transform: translate(var(--fx, 0), 0) scale(1); }
}
@keyframes tacticsFigureName { to { opacity: 0.92; } }
/* Walk-sheet mode: real class characters walking toward you (front row, 4-frame cycle). */
.tactics-cinematic__figure--walk {
  width: min(26vw, 168px);
  height: min(26vw, 168px);
}
.tactics-cinematic__figure--walk.is-lead {
  width: min(33vw, 212px);
  height: min(33vw, 212px);
}
.tactics-cinematic__figure--walk b {
  background-image: var(--walk);
  background-size: 400% 400%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: none;
  animation: tacticsClassWalk 720ms steps(1) 0ms infinite;
}
.tactics-cinematic__figure--walk b::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 6%;
  width: 62%; height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(var(--team-rgb, 255, 111, 120), 0.5), transparent 70%);
  inset: auto auto 6% 50%;
  mix-blend-mode: screen;
  opacity: 0.8;
}
@keyframes tacticsClassWalk {
  0%, 24.99%   { background-position: 0% 0%; }
  25%, 49.99%  { background-position: 33.333% 0%; }
  50%, 74.99%  { background-position: 66.666% 0%; }
  75%, 100%    { background-position: 100% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .tactics-cinematic__figure--walk b { animation: none; }
}
.tactics-cinematic.has-approach .tactics-cinematic__plate { animation-delay: 940ms; }
@media (prefers-reduced-motion: reduce) {
  .tactics-cinematic__figure { animation-duration: 1ms; animation-delay: 0ms; opacity: 1; transform: translate(var(--fx, 0), 0); }
}

.tactics-cinematic__wash {
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(var(--fx-a), 0.18) 36%, rgba(var(--fx-b), 0.24) 50%, rgba(var(--fx-a), 0.18) 64%, transparent 82% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 9px);
  transform: skewX(-14deg) translateX(-120%);
  animation: tacticsWashSweep 980ms cubic-bezier(0.18, 0.78, 0.26, 1) 80ms both;
  mix-blend-mode: screen;
}

.tactics-cinematic__slashes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tactics-cinematic__slashes span {
  position: absolute;
  left: -18%;
  width: 136%;
  height: clamp(6px, 1.1vw, 13px);
  background: linear-gradient(90deg, transparent, rgba(var(--fx-b), 0.05), rgba(var(--fx-a), 0.88), rgba(255, 255, 255, 0.98), rgba(var(--fx-b), 0.78), transparent);
  box-shadow: 0 0 24px rgba(var(--fx-a), 0.62), 0 0 54px rgba(var(--fx-b), 0.36);
  transform: translateX(-115%) rotate(-13deg);
  animation: tacticsSlashSweep 740ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}

.tactics-cinematic__slashes span:nth-child(1) {
  top: 25%;
  animation-delay: 60ms;
}

.tactics-cinematic__slashes span:nth-child(2) {
  top: 49%;
  height: clamp(9px, 1.6vw, 18px);
  animation-delay: 150ms;
}

.tactics-cinematic__slashes span:nth-child(3) {
  top: 70%;
  animation-delay: 230ms;
}

.tactics-cinematic__sigil {
  position: absolute;
  z-index: 1;
  width: min(58vmin, 560px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.68) rotate(-18deg);
  animation: tacticsSigilRise 1120ms cubic-bezier(0.17, 0.86, 0.21, 1) 120ms both;
}

.tactics-cinematic__ring,
.tactics-cinematic__core {
  position: absolute;
  display: block;
}

.tactics-cinematic__ring {
  inset: 0;
  border: 2px solid rgba(var(--fx-a), 0.72);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 42px rgba(var(--fx-a), 0.48),
    inset 0 0 44px rgba(var(--fx-b), 0.26);
}

.tactics-cinematic__ring::before,
.tactics-cinematic__ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(var(--fx-b), 0.62);
  transform: rotate(45deg);
}

.tactics-cinematic__ring::after {
  inset: 25%;
  border-color: rgba(255, 255, 255, 0.5);
  transform: rotate(0deg);
}

.tactics-cinematic__core {
  width: 21%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.74);
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(var(--fx-a), 0.34), rgba(var(--fx-b), 0.18)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 34px rgba(var(--fx-a), 0.58);
}

.tactics-cinematic__shards {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tactics-cinematic__shards span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(26px, 5vw, 76px);
  height: clamp(2px, 0.35vw, 4px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(var(--fx-a), 0.88), transparent);
  box-shadow: 0 0 18px rgba(var(--fx-a), 0.56);
  transform-origin: left center;
  transform: rotate(var(--r)) translateX(16px) scaleX(0);
  opacity: 0;
  animation: tacticsShardBurst 940ms cubic-bezier(0.12, 0.82, 0.16, 1) var(--delay) both;
}

.tactics-cinematic__plate {
  position: relative;
  z-index: 4;
  width: min(760px, calc(100% - 30px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  padding: clamp(18px, 4.4vw, 44px) clamp(14px, 5vw, 54px);
  text-align: center;
  color: #fffdf4;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.62), 0 0 32px rgba(var(--fx-a), 0.32);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  background:
    linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.48) 12% 88%, transparent),
    linear-gradient(180deg, rgba(var(--fx-a), 0.16), rgba(0, 0, 0, 0.18));
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  animation: tacticsPlateLock 760ms cubic-bezier(0.16, 0.88, 0.2, 1) 260ms both;
}

.tactics-cinematic__plate small,
.tactics-cinematic__plate strong,
.tactics-cinematic__plate em {
  max-width: 100%;
  letter-spacing: 0;
}

.tactics-cinematic__plate small {
  font-size: clamp(0.68rem, 1.6vw, 0.96rem);
  font-weight: 950;
  color: rgba(255, 255, 255, 0.76);
}

.tactics-cinematic__plate strong {
  display: block;
  font-size: clamp(2rem, 8vw, 5.7rem);
  line-height: 0.92;
  font-weight: 1000;
  text-transform: uppercase;
}

.tactics-cinematic__plate em {
  display: block;
  font-size: clamp(0.82rem, 2.2vw, 1.18rem);
  line-height: 1.25;
  font-style: normal;
  font-weight: 850;
  color: rgba(255, 255, 255, 0.84);
}

@keyframes tacticsCinematicIn {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes tacticsCinematicOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.035); }
}

@keyframes tacticsWashSweep {
  0% { transform: skewX(-14deg) translateX(-120%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: skewX(-14deg) translateX(120%); opacity: 0.15; }
}

@keyframes tacticsSlashSweep {
  0% { transform: translateX(-115%) rotate(-13deg); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translateX(115%) rotate(-13deg); opacity: 0; }
}

@keyframes tacticsSigilRise {
  0% { opacity: 0; transform: scale(0.68) rotate(-18deg); }
  28% { opacity: 0.95; }
  100% { opacity: 0.64; transform: scale(1.08) rotate(8deg); }
}

@keyframes tacticsShardBurst {
  0% { opacity: 0; transform: rotate(var(--r)) translateX(14px) scaleX(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--r)) translateX(var(--dist)) scaleX(1); }
}

@keyframes tacticsPlateLock {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(6px); }
  42% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* --- Victory: rootlight rises. Per-letter gold reveal, motes float up,
       twin light beams behind the plate, the field brightens. ------------- */
.tactics-cinematic--victory {
  backdrop-filter: saturate(1.18) brightness(1.05);
}

.tactics-cinematic__motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.tactics-cinematic__motes span {
  position: absolute;
  left: var(--mx);
  width: var(--msize);
  height: var(--msize);
  border-radius: 50%;
  opacity: 0;
}

.tactics-cinematic--victory .tactics-cinematic__motes span {
  bottom: -3%;
  background: radial-gradient(circle, #fff9e2 0 30%, rgba(var(--fx-b), 0.9) 60%, transparent);
  box-shadow: 0 0 12px rgba(var(--fx-b), 0.75);
  animation: tacticsMoteRise var(--mdur) ease-out var(--mdelay) infinite;
}

.tactics-cinematic--defeat .tactics-cinematic__motes span {
  top: -3%;
  background: radial-gradient(circle, rgba(255, 205, 188, 0.9) 0 30%, rgba(var(--fx-a), 0.55) 60%, transparent);
  box-shadow: 0 0 9px rgba(var(--fx-a), 0.4);
  animation: tacticsMoteSink var(--mdur) ease-in var(--mdelay) infinite;
}

.tactics-cinematic__letters {
  display: inline-block;
  white-space: nowrap;
}

.tactics-cinematic__letters i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  animation: tacticsLetterPop 480ms cubic-bezier(0.16, 0.92, 0.24, 1.18) calc(340ms + var(--li, 0) * 55ms) both;
}

.tactics-cinematic--defeat .tactics-cinematic__letters i {
  animation-name: tacticsLetterFall;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.45, 1);
}

.tactics-cinematic--victory .tactics-cinematic__plate::before,
.tactics-cinematic--victory .tactics-cinematic__plate::after {
  content: "";
  position: absolute;
  top: -46%;
  bottom: -46%;
  width: clamp(16px, 3.2vw, 40px);
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(var(--fx-b), 0.26) 34% 66%, transparent);
  filter: blur(10px);
  transform: scaleY(0);
  animation: tacticsBeamRise 900ms cubic-bezier(0.18, 0.84, 0.24, 1) 420ms both;
}

.tactics-cinematic--victory .tactics-cinematic__plate::before { left: 10%; }
.tactics-cinematic--victory .tactics-cinematic__plate::after { right: 10%; animation-delay: 540ms; }

/* --- Defeat: the field dims and the sigil gives out. -------------------- */
.tactics-cinematic--defeat {
  backdrop-filter: saturate(0.35) brightness(0.78);
}

.tactics-cinematic--defeat .tactics-cinematic__wash {
  animation-direction: reverse;
}

.tactics-cinematic--defeat .tactics-cinematic__ring {
  animation: tacticsRingFalter 1500ms ease-in 260ms both;
}

.tactics-cinematic--defeat .tactics-cinematic__core {
  animation: tacticsCoreGutter 1500ms ease-in 380ms both;
}

.tactics-cinematic--defeat .tactics-cinematic__plate {
  border-bottom-color: rgba(var(--fx-a), 0.66);
}

/* The losing squad remains visible as dimmed portraits while the broken
   rootlight gathers beneath them; First Reach then answers from below. */
.tactics-cinematic__fallen {
  position: absolute;
  left: 50%;
  bottom: 4%;
  z-index: 2;
  width: min(760px, 92%);
  height: min(31vh, 230px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(2px, 1.4vw, 16px);
  transform: translateX(-50%);
  pointer-events: none;
}

.tactics-cinematic__fallen-figure {
  position: relative;
  width: min(17vw, 112px);
  height: min(24vh, 176px);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: tacticsFallenFigure 2150ms cubic-bezier(0.26, 0.62, 0.36, 1) calc(180ms + var(--fallen-i) * 90ms) both;
}

.tactics-cinematic__fallen-figure.is-lead {
  width: min(21vw, 142px);
  height: min(29vh, 210px);
}

.tactics-cinematic__fallen-figure b {
  position: absolute;
  inset: 0;
  background-image: var(--portrait-image, none);
  background-size: var(--portrait-size, cover);
  background-position: var(--portrait-position, center);
  background-repeat: no-repeat;
  border-radius: 15px 15px 8px 8px;
  -webkit-mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, 0.8) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 54%, rgba(0, 0, 0, 0.8) 78%, transparent 100%);
  filter: grayscale(0.9) saturate(0.35) brightness(0.55) contrast(1.12);
  box-shadow: inset 0 0 0 1px rgba(var(--team-rgb, 94, 216, 255), 0.22), 0 16px 28px rgba(0, 0, 0, 0.5);
}

.tactics-cinematic__fallen-figure small {
  position: absolute;
  left: 50%;
  bottom: 1%;
  transform: translateX(-50%);
  max-width: 112%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(225, 229, 236, 0.56);
  font-size: clamp(0.5rem, 1.1vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.tactics-cinematic__return {
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(221, 255, 205, 0.9);
  opacity: 0;
  transform: translate(-50%, 18px);
  animation: tacticsReturnHome 1550ms cubic-bezier(0.16, 0.86, 0.22, 1) 2350ms both;
  text-shadow: 0 2px 10px #000, 0 0 18px rgba(101, 234, 150, 0.55);
}

.tactics-cinematic__return b {
  white-space: nowrap;
  font-size: clamp(0.62rem, 1.5vw, 0.92rem);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tactics-cinematic__return-ring {
  position: relative;
  flex: 0 0 auto;
  width: clamp(24px, 4vw, 38px);
  aspect-ratio: 1;
  border: 1px solid rgba(214, 255, 189, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(105, 239, 154, 0.74), inset 0 0 12px rgba(105, 239, 154, 0.28);
  animation: tacticsReturnRing 1700ms ease-in-out infinite;
}

.tactics-cinematic__return-ring::before {
  content: "";
  position: absolute;
  width: 25%;
  height: 42%;
  border-radius: 70% 15% 70% 15%;
  transform: translate(148%, 68%) rotate(45deg);
  background: #ecffd0;
  box-shadow: 0 0 10px #83f0a6;
}

@keyframes tacticsFallenFigure {
  0% { opacity: 0; transform: translateY(-24px) scale(1.08); filter: blur(5px); }
  24% { opacity: 0.78; filter: blur(0); }
  58% { opacity: 0.58; transform: translateY(4px) scale(0.98); }
  100% { opacity: 0.18; transform: translateY(32px) scale(0.9); filter: blur(1px); }
}

@keyframes tacticsReturnHome {
  0% { opacity: 0; transform: translate(-50%, 18px); }
  28% { opacity: 1; transform: translate(-50%, 0); }
  78% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0.86; transform: translate(-50%, -3px); }
}

@keyframes tacticsReturnRing {
  0%, 100% { transform: scale(0.94); opacity: 0.72; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes tacticsMoteRise {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-46vh) scale(1.1); }
}

@keyframes tacticsMoteSink {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  22% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(52vh) scale(0.6); }
}

@keyframes tacticsLetterPop {
  0% { opacity: 0; transform: translateY(0.42em) scale(1.5); filter: blur(5px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tacticsLetterFall {
  0% { opacity: 0; transform: translateY(-0.55em); filter: blur(4px); }
  55% { opacity: 1; filter: blur(0); }
  74% { transform: translateY(0.06em); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes tacticsBeamRise {
  0% { opacity: 0; transform: scaleY(0); }
  35% { opacity: 1; }
  100% { opacity: 0.85; transform: scaleY(1); }
}

@keyframes tacticsRingFalter {
  0% { opacity: 1; }
  58% { opacity: 0.85; transform: rotate(0deg) scale(1); }
  66% { opacity: 0.35; transform: rotate(-2.5deg) scale(0.985); }
  72% { opacity: 0.8; }
  82% { opacity: 0.25; transform: rotate(2deg) scale(0.97); }
  100% { opacity: 0.12; transform: rotate(4deg) scale(0.94); }
}

@keyframes tacticsCoreGutter {
  0% { opacity: 1; transform: rotate(45deg) scale(1); }
  60% { opacity: 0.9; }
  70% { opacity: 0.3; transform: rotate(41deg) scale(0.9); }
  78% { opacity: 0.7; }
  100% { opacity: 0.05; transform: rotate(32deg) scale(0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .tactics-cinematic,
  .tactics-cinematic.is-exiting,
  .tactics-cinematic__wash,
  .tactics-cinematic__slashes span,
  .tactics-cinematic__sigil,
  .tactics-cinematic__shards span,
  .tactics-cinematic__motes span,
  .tactics-cinematic__letters i,
  .tactics-cinematic__fallen-figure,
  .tactics-cinematic__return,
  .tactics-cinematic__return-ring,
  .tactics-cinematic__plate,
  .tactics-cinematic--victory .tactics-cinematic__plate::before,
  .tactics-cinematic--victory .tactics-cinematic__plate::after,
  .tactics-cinematic--defeat .tactics-cinematic__ring,
  .tactics-cinematic--defeat .tactics-cinematic__core {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }

  .tactics-cinematic__shards,
  .tactics-cinematic__motes {
    display: none;
  }
}

.modal.godheart-transform-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #02040a;
}

.modal.godheart-transform-modal.hidden {
  display: none;
}

.godheart-transform {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #fff8d6;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 225, 111, 0.2), transparent 34%),
    linear-gradient(180deg, #02040a, #09111c 45%, #03050a);
}

.godheart-transform__sky {
  position: absolute;
  inset: -18%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 244, 193, 0.22), transparent 25%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 222, 96, 0.11) 0 3deg, transparent 3deg 18deg);
  opacity: 0.66;
  transform: rotate(0deg) scale(1.08);
  animation: godheartSkySpin 4480ms linear both;
}

.godheart-transform__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.godheart-transform__sprite,
.godheart-transform__light,
.godheart-transform__boss-start {
  position: absolute;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: auto;
  will-change: transform, opacity, background-position;
}

.godheart-transform__sprite {
  width: min(38vmin, 320px);
  background-image: var(--transform-sheet);
  background-size: 1600% 100%;
  transform: translateX(var(--offset)) translateY(5vmin) scale(0.96);
  opacity: 0;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.48)) saturate(1.08);
  animation:
    godheartTransformFrames 1920ms steps(15, end) var(--delay) both,
    godheartSpritePresence 4480ms linear var(--delay) both;
}

.godheart-transform__light {
  z-index: 4;
  width: min(112vmin, 760px);
  background-image: var(--light-sheet);
  background-size: 2400% 100%;
  transform: scale(0.6);
  opacity: 0;
  mix-blend-mode: screen;
  animation: godheartLightFrames 1960ms steps(23, end) 1500ms both;
}

.godheart-transform__boss-start {
  z-index: 5;
  width: min(92vmin, 650px);
  background-image: var(--start-sheet);
  background-size: 1800% 100%;
  transform: scale(0.72);
  opacity: 0;
  mix-blend-mode: screen;
  animation: godheartBossStartFrames 1220ms steps(17, end) 3000ms both;
}

.godheart-transform__caption {
  position: absolute;
  left: max(18px, env(safe-area-inset-left));
  right: max(18px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.78), 0 0 24px rgba(255, 224, 112, 0.44);
  animation: godheartCaptionPresence 4480ms ease both;
}

.godheart-transform__caption small {
  font-size: clamp(0.64rem, 1.55vw, 0.86rem);
  font-weight: 950;
  letter-spacing: 0;
  color: rgba(255, 245, 188, 0.82);
}

.godheart-transform__caption strong {
  max-width: min(760px, 92vw);
  font-size: clamp(1.45rem, 5vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes godheartTransformFrames {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

@keyframes godheartSpritePresence {
  0% { opacity: 0; transform: translateX(var(--offset)) translateY(7vmin) scale(0.88); }
  8%, 52% { opacity: 1; }
  70% { opacity: 0.5; transform: translateX(var(--offset)) translateY(3vmin) scale(1.04); }
  100% { opacity: 0; transform: translateX(var(--offset)) translateY(1vmin) scale(1.16); }
}

@keyframes godheartLightFrames {
  0% { opacity: 0; background-position: 0 0; transform: scale(0.58); filter: brightness(1); }
  10% { opacity: 0.85; }
  42%, 62% { opacity: 1; filter: brightness(1.45); }
  78% { opacity: 0.95; }
  100% { opacity: 0; background-position: 100% 0; transform: scale(1.08); filter: brightness(1.1); }
}

@keyframes godheartBossStartFrames {
  0% { opacity: 0; background-position: 0 0; transform: scale(0.72) rotate(-4deg); }
  12%, 74% { opacity: 1; }
  100% { opacity: 0; background-position: 100% 0; transform: scale(1.1) rotate(4deg); }
}

@keyframes godheartSkySpin {
  from { transform: rotate(0deg) scale(1.08); opacity: 0.55; }
  52% { opacity: 0.92; }
  to { transform: rotate(18deg) scale(1.18); opacity: 0; }
}

@keyframes godheartCaptionPresence {
  0% { opacity: 0; transform: translateY(12px); }
  12%, 75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .godheart-transform__sky,
  .godheart-transform__sprite,
  .godheart-transform__light,
  .godheart-transform__boss-start,
  .godheart-transform__caption {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

.tactics-topbar,
.tactics-panel,
.tactics-actions,
.tactics-inspect-dock,
.tactics-right-dock {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
}

.tactics-topbar {
  top: 72px;
  left: 82px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(5, 10, 18, 0.72);
  backdrop-filter: blur(6px);
}

.tactics-topbar span,
.tactics-panel small {
  display: block;
  color: rgba(255, 250, 230, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.tactics-topbar strong {
  display: block;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.tactics-turn-order {
  position: absolute;
  left: 10px;
  top: 72px;
  bottom: 138px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 218px;
  overflow: hidden auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.tactics-turn-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 52px;
  padding: 6px 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 10, 18, 0.68);
  color: #fffaf0;
  backdrop-filter: blur(6px);
}

.tactics-turn-card.enemy {
  background: rgba(41, 10, 16, 0.74);
  border-color: rgba(255, 138, 132, 0.34);
}

.tactics-turn-card.ally {
  background: rgba(8, 30, 42, 0.72);
  border-color: rgba(102, 217, 255, 0.34);
}

.tactics-turn-card.is-active {
  border-color: rgba(255, 224, 112, 0.84);
  box-shadow: 0 0 0 1px rgba(255, 224, 112, 0.18), 0 0 18px rgba(255, 216, 104, 0.2);
}

.tactics-turn-portrait,
.tactics-panel-portrait {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(var(--team-rgb, 255, 255, 255), 0.56);
  background-color: rgba(var(--class-rgb, 255, 255, 255), 0.12);
  background-image:
    var(--portrait-image),
    radial-gradient(circle at 50% 38%, rgba(var(--class-rgb, 255, 255, 255), 0.62) 0 24%, rgba(var(--class-rgb, 255, 255, 255), 0.18) 52%, rgba(4, 9, 16, 0.9) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.12));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: var(--portrait-size, contain), 100% 100%, 100% 100%;
  background-position: var(--portrait-position, center), center, center;
  overflow: hidden;
  box-sizing: border-box;
}

.tactics-panel-portrait {
  width: 46px;
  height: 46px;
}

.tactics-turn-meta {
  min-width: 0;
}

.tactics-turn-meta strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
  line-height: 1.12;
}

.tactics-turn-meta small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 250, 230, 0.68);
  font-size: 0.58rem;
  font-weight: 800;
}

.tactics-mini-hp {
  display: block;
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.tactics-mini-hp i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9ef68c, #f8da69);
}

.tactics-panel {
  left: 10px;
  bottom: 10px;
  width: min(430px, calc(52% - 18px));
  max-height: 126px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(5, 10, 18, 0.78);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.tactics-panel strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.92rem;
}

.tactics-panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: rgba(255, 250, 230, 0.82);
  font-size: 0.74rem;
  line-height: 1.35;
}

.tactics-active-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 9px;
  color: rgba(255, 250, 230, 0.84);
  font-size: 0.72rem;
  line-height: 1.2;
}

.tactics-active-card strong {
  margin: 0;
  font-size: 0.86rem;
}

.tactics-active-card small {
  color: rgba(255, 250, 230, 0.62);
  font-size: 0.62rem;
  font-weight: 900;
}

.tactics-tile-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 6px;
  color: rgba(255, 250, 230, 0.74);
  font-size: 0.65rem;
  line-height: 1.2;
}

.tactics-log {
  margin-top: 7px;
  color: rgba(255, 250, 230, 0.78);
  font-size: 0.73rem;
  line-height: 1.32;
}

.tactics-panel p {
  margin: 0;
  color: rgba(255, 250, 230, 0.82);
  font-size: 0.78rem;
  line-height: 1.35;
}

.tactics-actions {
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: min(440px, calc(48% - 12px));
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(5, 10, 18, 0.74);
  backdrop-filter: blur(6px);
}

.tactics-command-title {
  flex: 1 0 100%;
  color: rgba(255, 250, 230, 0.68);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tactics-actions button {
  min-height: 36px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #fffaf0;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.tactics-actions button small {
  display: block;
  color: rgba(255, 250, 230, 0.58);
  font-size: 0.58rem;
  line-height: 1;
}

.tactics-actions button:not(:disabled):hover,
.tactics-actions button:not(:disabled):focus-visible {
  background: rgba(126, 231, 255, 0.22);
  border-color: rgba(126, 231, 255, 0.48);
}

.tactics-actions button:disabled {
  opacity: 0.45;
}

.tactics-actions .danger {
  background: rgba(255, 91, 91, 0.22);
  border-color: rgba(255, 150, 130, 0.36);
}

.tactics-actions .confirm {
  background: rgba(122, 226, 133, 0.22);
  border-color: rgba(158, 246, 169, 0.38);
}

/* Ability + category rows: full-width, left-aligned, name-over-meta — scannable
   on a phone; the low-MP/HP warning reads as a warning, not grey noise.
   (width-based, NOT flex-basis: the right-dock lays this panel out as a COLUMN
   flexbox, where a 100% basis would stretch each button to the panel height.) */
.tactics-actions button[data-tactics-ability],
.tactics-actions button[data-tactics-category],
.tactics-actions button[data-authority-ability] {
  width: 100%;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  gap: 3px;
  text-align: left;
}

.tactics-actions button[data-tactics-ability] small,
.tactics-actions button[data-tactics-category] small,
.tactics-actions button[data-authority-ability] small {
  font-size: 0.6rem;
  line-height: 1.15;
}

.tactics-actions button small em {
  color: #ffb3a3;
  font-style: normal;
  font-weight: 900;
}

/* Confirm forecast: per-target effect + hit% rows under the ability name. */
.tactics-preview-rows {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tactics-preview-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: baseline;
  font-size: 0.64rem;
}

.tactics-preview-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.tactics-preview-row.enemy strong { color: #ffc9cf; }
.tactics-preview-row.ally strong { color: #c9f3ff; }

.tactics-preview-effect {
  color: #fffaf0;
  font-weight: 900;
  white-space: nowrap;
}

.tactics-preview-effect em {
  color: #ffd66a;
  font-style: normal;
  font-weight: 950;
}

.tactics-preview-hit {
  min-width: 34px;
  text-align: right;
  color: rgba(255, 250, 230, 0.72);
  font-weight: 900;
  white-space: nowrap;
}

.tactics-preview-rows small {
  color: rgba(255, 250, 230, 0.6);
  font-size: 0.58rem;
}

body:has(#tacticsLayer:not(.hidden)) #touchControls {
  display: none !important;
}

body:has(#tacticsLayer:not(.hidden)) .online-hud {
  display: none !important;
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .tactics-layer {
    position: fixed;
    inset: 0;
    z-index: 55;
    border-radius: 0;
  }

  html.is-touch .tactics-topbar {
    top: max(6px, env(safe-area-inset-top));
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    padding: 6px 8px;
    min-height: 42px;
    gap: 8px;
  }

  html.is-touch .tactics-topbar span {
    font-size: 0.58rem;
  }

  html.is-touch .tactics-topbar strong {
    font-size: 0.78rem;
  }

  html.is-touch .tactics-turn-order {
    top: 54px;
    bottom: 120px;
    left: max(8px, env(safe-area-inset-left));
    width: min(30vw, 180px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  html.is-touch .tactics-turn-order::-webkit-scrollbar {
    display: none;
  }

  html.is-touch .tactics-turn-card {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 42px;
    padding: 4px 6px;
  }

  html.is-touch .tactics-turn-portrait {
    width: 34px;
    height: 34px;
  }

  html.is-touch .tactics-turn-meta strong {
    font-size: 0.62rem;
  }

  html.is-touch .tactics-turn-meta small {
    font-size: 0.5rem;
  }

  html.is-touch .tactics-panel {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(42vw, 318px);
    max-height: 102px;
    padding: 8px;
    overflow: hidden;
  }

  html.is-touch .tactics-panel strong {
    margin-bottom: 2px;
    font-size: 0.76rem;
  }

  html.is-touch .tactics-panel-row,
  html.is-touch .tactics-log {
    font-size: 0.62rem;
    line-height: 1.22;
  }

  html.is-touch .tactics-log {
    max-height: 3.8em;
    overflow: hidden;
  }

  html.is-touch .tactics-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(66px, 1fr));
    justify-content: stretch;
    gap: 6px;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    max-width: min(52vw, 420px);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding: 7px;
  }

  html.is-touch .tactics-command-title {
    grid-column: 1 / -1;
  }

  html.is-touch .tactics-actions button[data-tactics-ability],
  html.is-touch .tactics-actions button[data-tactics-category],
  html.is-touch .tactics-actions .tactics-ability-detail,
  html.is-touch .tactics-actions .tactics-target-preview {
    grid-column: 1 / -1;
  }

  html.is-touch .tactics-actions button {
    min-width: 0;
    min-height: 42px;
    padding: 5px 6px;
    font-size: 0.64rem;
    line-height: 1.05;
  }
}

@media (max-width: 740px) and (max-height: 430px) and (orientation: landscape) {
  html.is-touch .tactics-topbar {
    min-height: 36px;
    padding: 5px 7px;
  }

  html.is-touch .tactics-turn-order {
    top: 46px;
    bottom: 108px;
    width: min(29vw, 154px);
    gap: 4px;
  }

  html.is-touch .tactics-turn-card {
    min-height: 36px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 5px;
  }

  html.is-touch .tactics-turn-portrait {
    width: 30px;
    height: 30px;
  }

  html.is-touch .tactics-panel {
    width: 40vw;
    max-height: 88px;
    padding: 7px;
  }

  html.is-touch .tactics-actions {
    grid-template-columns: repeat(3, minmax(62px, 1fr));
    max-width: 55vw;
    gap: 5px;
  }

  html.is-touch .tactics-actions button {
    min-height: 38px;
    font-size: 0.58rem;
  }
}

/* Heartroot Beyond tactics HUD: glass command panels + FFT-style turn ladder. */
.tactics-topbar,
.tactics-panel,
.tactics-actions,
.tactics-inspect-dock {
  position: absolute;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(24, 30, 48, 0.48), rgba(10, 14, 24, 0.66));
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: 8px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.tactics-topbar::after,
.tactics-panel::after,
.tactics-actions::after,
.tactics-inspect-dock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--glass-sheen);
}

.tactics-topbar > *,
.tactics-panel > *,
.tactics-actions > *,
.tactics-inspect-dock > * {
  position: relative;
  z-index: 1;
}

.tactics-topbar {
  top: 22px;
  left: 32px;
  right: auto;
  width: auto;
  height: 42px;
  min-height: 0;
  padding: 0;
  border: 0;
  gap: 6px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tactics-topbar::after,
.tactics-topbar > div {
  display: none;
}

.tactics-camera-button {
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(164, 210, 232, 0.28);
  background: rgba(5, 10, 17, 0.9);
  color: #fffaf0;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
}

.tactics-facing-button {
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(164, 210, 232, 0.28);
  background: rgba(5, 10, 17, 0.9);
  color: #fffaf0;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0;
}

.tactics-facing-button:disabled {
  opacity: 0.42;
}

.tactics-zoom-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.tactics-zoom-button {
  font-size: 0 !important;
}

.tactics-zoom-button::before,
.tactics-zoom-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: #fffaf0;
  box-shadow: 0 0 8px rgba(106, 222, 255, 0.28);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#tacticsZoomOutButton::after {
  display: none;
}

#tacticsZoomInButton::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Context lessons live inside the tactics stacking context. The global toast
   sits below this layer, so this compact banner is the authoritative visible
   tutorial surface while the board is open. */
.tactics-tutorial-banner {
  --tutorial-accent: #79eaff;
  position: absolute;
  top: clamp(76px, 11vh, 104px);
  left: 50%;
  z-index: 18;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: clamp(280px, calc(100% - 360px), 620px);
  min-height: 62px;
  padding: 8px 14px 8px 10px;
  overflow: hidden;
  border: 1px solid rgba(121, 234, 255, 0.58);
  border: 1px solid color-mix(in srgb, var(--tutorial-accent) 68%, transparent);
  border-radius: 12px;
  background: rgba(8, 13, 24, 0.94);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--tutorial-accent) 15%, rgba(8, 13, 24, 0.94)), rgba(8, 13, 24, 0.92) 58%, rgba(4, 8, 16, 0.96));
  color: #fffaf0;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.42),
    0 0 26px color-mix(in srgb, var(--tutorial-accent) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
  backdrop-filter: blur(10px) saturate(1.18);
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px) scale(0.975);
  transition:
    opacity 220ms ease,
    transform 360ms cubic-bezier(0.2, 0.9, 0.2, 1.15),
    visibility 0s linear 360ms;
}

.tactics-tutorial-banner::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 4px;
  background: var(--tutorial-accent);
  box-shadow: 0 0 18px var(--tutorial-accent);
}

.tactics-tutorial-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0.1), transparent 28% 76%, rgba(255, 255, 255, 0.04));
}

.tactics-tutorial-banner.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.tactics-tutorial-banner.is-resetting {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -10px) scale(0.975);
  transition: none !important;
}

.tactics-tutorial-banner.is-leaving {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.985);
}

.tactics-tutorial-banner[data-tutorial-key="attack"] { --tutorial-accent: #ffd36b; }
.tactics-tutorial-banner[data-tutorial-key="facing"] { --tutorial-accent: #c7a2ff; }
.tactics-tutorial-banner[data-tutorial-key="heal"] { --tutorial-accent: #8df1aa; }

.tactics-tutorial-banner > * {
  position: relative;
  z-index: 1;
}

.tactics-tutorial-banner__step {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--tutorial-accent) 64%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--tutorial-accent) 14%, rgba(5, 10, 18, 0.86));
  color: var(--tutorial-accent);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--tutorial-accent) 70%, transparent);
  white-space: nowrap;
}

.tactics-tutorial-banner__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.tactics-tutorial-banner__body small {
  grid-column: 1 / -1;
  color: color-mix(in srgb, var(--tutorial-accent) 86%, #fff);
  font-size: 0.53rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1;
}

.tactics-tutorial-banner__body strong {
  color: #fff8dd;
  font-size: clamp(0.78rem, 1.35vw, 1rem);
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
}

.tactics-tutorial-banner__copy {
  min-width: 0;
  color: rgba(255, 250, 238, 0.88);
  font-size: clamp(0.68rem, 1.15vw, 0.82rem);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .tactics-tutorial-banner {
    transition-duration: 1ms !important;
  }
}

/* Legacy Training: irreversible duplicate-to-EXP management. */
.legacy-training-card {
  width: min(1120px, 94vw);
  max-width: 1120px;
}

/* The clean-world Box shell normally clips its body. Legacy Training also
   contains the permanent-loss review below the two pickers, so the complete
   card must remain reachable on shorter screens. */
.modal.clean-world-modal .box-card--scroll.legacy-training-card {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.legacy-training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 16px;
  margin-top: 14px;
}

.legacy-training-grid > section {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  color: #080808;
}

.legacy-training-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.legacy-training-head h3,
.legacy-training-grid h3,
.legacy-training-preview h3 {
  margin: 0 0 8px;
}

.legacy-training-list {
  display: grid;
  gap: 7px;
  max-height: 310px;
  margin-top: 9px;
  padding-right: 4px;
  overflow: auto;
}

.legacy-training-row {
  display: grid;
  grid-template-columns: 22px 54px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 64px;
  padding: 7px 9px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.88);
  color: #080808;
  cursor: pointer;
}

.legacy-training-row:hover,
.legacy-training-row.is-selected {
  border-color: rgba(25, 126, 86, 0.58);
  background: rgba(217, 249, 234, 0.94);
}

.legacy-training-row.is-disabled {
  opacity: 0.56;
  cursor: not-allowed;
}

.legacy-training-row > img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.legacy-training-row > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.legacy-training-row small,
.legacy-training-row em {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
  line-height: 1.25;
}

.legacy-training-row em,
.legacy-training-error {
  color: #8b1e1a;
  font-style: normal;
}

.legacy-training-safety {
  margin: 8px 0 0;
  color: #744a00;
  font-size: 0.82rem;
}

.legacy-training-preview {
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid rgba(25, 126, 86, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: #080808;
}

.legacy-training-preview.has-error {
  border-color: rgba(171, 45, 37, 0.48);
}

.legacy-training-preview ul {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.legacy-training-preview li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.legacy-training-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.legacy-training-totals span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(38, 135, 95, 0.12);
}

.legacy-training-warning {
  margin: 12px 0;
  padding: 13px 15px;
  border: 2px solid #ff776f;
  border-radius: 13px;
  background: rgba(255, 235, 233, 0.96);
  color: #681916;
}

.legacy-training-warning--rare {
  border-color: #f5ca68;
  background: rgba(255, 247, 216, 0.98);
  color: #5d4300;
}

.legacy-training-warning p {
  margin: 7px 0;
}

.legacy-training-card .dialogue-actions .danger {
  border-color: #ff6f67;
  background: linear-gradient(180deg, #a63b37, #70201f);
  color: #fff;
}

@media (max-width: 760px) {
  .legacy-training-card {
    width: min(96vw, 700px);
  }

  .legacy-training-grid {
    grid-template-columns: 1fr;
  }

  .legacy-training-list {
    max-height: 240px;
  }

  .legacy-training-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== Breeding mutation reveal continuity ================================
   Mutation rarity is telegraphed before the shell opens. These overlays use
   their own class namespace so sprite filters never tint the complete modal. */
.egg-mutation-cue {
  --mutation-a: rgba(255, 210, 92, 0.92);
  --mutation-b: var(--mutation-a);
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.egg-mutation-cue::before,
.egg-mutation-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.egg-mutation-cue::before {
  width: 390px;
  height: 390px;
  transform: translate(-50%, -50%) scale(0.42);
  background:
    radial-gradient(circle, transparent 0 34%, var(--mutation-a) 36% 37%, transparent 39% 51%, var(--mutation-b) 53% 54%, transparent 57%),
    conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--mutation-a) 72%, transparent), transparent 24%, color-mix(in srgb, var(--mutation-b) 68%, transparent), transparent 52%, color-mix(in srgb, var(--mutation-a) 62%, transparent), transparent 78%);
  filter: blur(0.3px) drop-shadow(0 0 22px var(--mutation-a));
  mix-blend-mode: screen;
  animation: egg-mutation-wash var(--mutation-cue-duration, 1250ms) ease-out var(--mutation-cue-delay, 1300ms) both;
}

.egg-mutation-cue::after {
  width: 250px;
  height: 250px;
  transform: translate(-50%, -50%) scale(0.35);
  background: radial-gradient(circle, color-mix(in srgb, var(--mutation-a) 45%, white) 0 4%, color-mix(in srgb, var(--mutation-b) 32%, transparent) 22%, transparent 68%);
  filter: blur(2px);
  animation: egg-mutation-core var(--mutation-cue-duration, 1250ms) ease-out var(--mutation-cue-delay, 1300ms) both;
}

@keyframes egg-mutation-wash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(-18deg); }
  24% { opacity: 0.38; }
  72% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.02) rotate(12deg); }
  100% { opacity: 0.16; transform: translate(-50%, -50%) scale(1.18) rotate(28deg); }
}

@keyframes egg-mutation-core {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  62% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); }
}

.egg-mutation-orbits {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 330px;
  height: 330px;
  transform: translate(-50%, -50%);
}

.egg-mutation-orbits span {
  position: absolute;
  inset: 12%;
  border: 3px solid transparent;
  border-top-color: var(--mutation-a);
  border-right-color: var(--mutation-b);
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 8px var(--mutation-a));
  animation: egg-mutation-orbit var(--mutation-cue-duration, 1250ms) cubic-bezier(0.16, 0.78, 0.2, 1) var(--mutation-cue-delay, 1300ms) both;
}

.egg-mutation-orbits span:nth-child(2) {
  inset: 4%;
  animation-delay: calc(var(--mutation-cue-delay, 1300ms) + 90ms);
  animation-direction: reverse;
}

.egg-mutation-orbits span:nth-child(3) {
  inset: -4%;
  animation-delay: calc(var(--mutation-cue-delay, 1300ms) + 180ms);
}

.mutation-cue-grade-1 .egg-mutation-orbits span:nth-child(n + 2),
.mutation-cue-grade-2 .egg-mutation-orbits span:nth-child(3) {
  display: none;
}

.mutation-cue-grade-1 .egg-mutation-orbits span { border-width: 2px; }
.mutation-cue-grade-2 .egg-mutation-orbits span { border-width: 2.5px; }
.mutation-cue-grade-3 .egg-mutation-orbits span { border-width: 3px; }

@keyframes egg-mutation-orbit {
  0% { opacity: 0; rotate: -35deg; scale: 0.42; }
  32% { opacity: 0.82; }
  76% { opacity: 1; rotate: 175deg; scale: 1; }
  100% { opacity: 0; rotate: 245deg; scale: 1.16; }
}

.egg-mutation-shards {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 1px;
  height: 1px;
}

.egg-mutation-shards span {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 18px;
  border-radius: 60% 15%;
  background: linear-gradient(180deg, white, var(--mutation-a) 48%, var(--mutation-b));
  box-shadow: 0 0 9px var(--mutation-a);
  opacity: 0;
  transform: rotate(calc(var(--mutation-shard-i) * 40deg)) translateY(-34px) scale(0.2);
  animation: egg-mutation-shard var(--mutation-cue-duration, 1250ms) ease-out calc(var(--mutation-cue-delay, 1300ms) + var(--mutation-shard-i) * 28ms) both;
}

@keyframes egg-mutation-shard {
  0%, 10% { opacity: 0; }
  38% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(calc(var(--mutation-shard-i) * 40deg + 26deg)) translateY(-184px) scale(1); }
}

.egg-mutation-cue-badge {
  position: absolute;
  left: 50%;
  top: 13%;
  z-index: 7;
  min-width: 104px;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--mutation-a) 68%, white);
  border-radius: 999px;
  color: #fffdf2;
  background: linear-gradient(115deg, rgba(4, 8, 15, 0.88), color-mix(in srgb, var(--mutation-a) 32%, rgba(4, 8, 15, 0.88)), rgba(4, 8, 15, 0.9));
  box-shadow: 0 0 20px color-mix(in srgb, var(--mutation-a) 52%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-align: center;
  text-shadow: 0 1px 2px #000, 0 0 9px var(--mutation-a);
  opacity: 0;
  transform: translate(-50%, 16px) scale(0.72);
  animation: egg-mutation-badge 700ms cubic-bezier(0.16, 0.86, 0.22, 1) calc(var(--mutation-cue-delay, 1300ms) + 210ms) both;
}

@keyframes egg-mutation-badge {
  0% { opacity: 0; transform: translate(-50%, 16px) scale(0.72); }
  68% { opacity: 1; transform: translate(-50%, -3px) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* The authored 12-frame refraction strip sits above the affinity egg while
   the original egg/shake/crack animation continues beneath it. */
.prismatic-hatch-reveal {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: var(--prismatic-hatch-size, 512px);
  height: var(--prismatic-hatch-size, 512px);
  transform: translate(-50%, -50%) scale(0.86);
  background-image: var(--prismatic-hatch-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--prismatic-hatch-strip, 6144px) var(--prismatic-hatch-size, 512px);
  filter: drop-shadow(0 0 20px var(--mutation-a)) drop-shadow(0 0 38px var(--mutation-b));
  mix-blend-mode: screen;
  animation: prismatic-hatch-reveal-play var(--prismatic-hatch-duration, 2600ms) steps(11, end) var(--mutation-cue-delay, 0ms) both;
}

.egg-hatch-scene.is-prismatic-mutation .dig-caption {
  z-index: 8;
  box-sizing: border-box;
  padding: 20px 20px 0;
  background: linear-gradient(180deg, transparent, rgba(3, 8, 16, 0.78));
}

@keyframes prismatic-hatch-reveal-play {
  from { background-position: 0 0; opacity: 0.18; }
  10% { opacity: 0.9; }
  to { background-position: var(--prismatic-hatch-travel, -5632px) 0; opacity: 1; }
}

.is-prismatic-mutation .egg-mutation-cue-badge {
  min-width: 188px;
  border-color: rgba(255, 255, 255, 0.74);
  color: white;
  background: linear-gradient(105deg, rgba(24, 8, 54, 0.94), color-mix(in srgb, var(--mutation-a) 52%, #37136c), color-mix(in srgb, var(--mutation-b) 54%, #0a3152), rgba(24, 8, 54, 0.94));
  background-size: 260% 100%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mutation-b) 40%, transparent), 0 0 30px var(--mutation-a), 0 0 48px color-mix(in srgb, var(--mutation-b) 62%, transparent);
  animation:
    egg-mutation-badge 700ms cubic-bezier(0.16, 0.86, 0.22, 1) calc(var(--mutation-cue-delay, 0ms) + 900ms) both,
    prismatic-seal-flow 3.2s linear calc(var(--mutation-cue-delay, 0ms) + 900ms) infinite;
}

@keyframes prismatic-seal-flow { to { background-position: 260% 0; } }

.egg-hatch-result.has-mutation-cue {
  border-color: color-mix(in srgb, var(--mutation-a) 42%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34), 0 0 28px color-mix(in srgb, var(--mutation-a) 24%, transparent);
}

.egg-hatch-result.has-mutation-cue .egg-hatch-result-monster {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 43% 52%, color-mix(in srgb, var(--mutation-a) 24%, transparent), transparent 45%),
    radial-gradient(circle at 62% 56%, color-mix(in srgb, var(--mutation-b) 22%, transparent), transparent 52%);
}

.egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::before,
.egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 212px;
  height: 212px;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::before {
  background: conic-gradient(from 0deg, transparent 0 12%, var(--mutation-a) 17%, transparent 25% 43%, var(--mutation-b) 49%, transparent 58% 76%, rgba(255,255,255,0.8) 82%, transparent 90%);
  filter: blur(0.8px) drop-shadow(0 0 18px var(--mutation-a));
  animation: prism-result-orbit 5.2s linear infinite;
}

.egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::after {
  width: 164px;
  height: 164px;
  border: 2px solid color-mix(in srgb, var(--mutation-b) 64%, transparent);
  box-shadow: 0 0 24px var(--mutation-a), inset 0 0 24px color-mix(in srgb, var(--mutation-b) 52%, transparent);
  animation: prism-result-counter-orbit 4.1s linear infinite;
}

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

@keyframes prism-result-counter-orbit {
  to { transform: translate(-50%, -50%) rotate(-360deg) scale(1.08); }
}

.egg-hatch-mutation-seal {
  position: absolute;
  right: max(8px, calc(50% - 142px));
  bottom: 4px;
  z-index: 5;
  padding: 6px 11px;
  border: 1px solid color-mix(in srgb, var(--mutation-a) 64%, white);
  border-radius: 999px;
  color: #fffdf2;
  background: rgba(5, 9, 16, 0.9);
  box-shadow: 0 0 16px color-mix(in srgb, var(--mutation-a) 55%, transparent);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  text-shadow: 0 1px 2px #000;
  animation: mutation-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.egg-hatch-mutation-seal--prismatic {
  color: white;
  border-color: rgba(255, 255, 255, 0.68);
  background: linear-gradient(100deg, #32115d, color-mix(in srgb, var(--mutation-a) 68%, #1d174f), color-mix(in srgb, var(--mutation-b) 70%, #07335a), #32115d);
  background-size: 250% 100%;
  box-shadow: 0 0 20px var(--mutation-a), 0 0 34px color-mix(in srgb, var(--mutation-b) 58%, transparent);
  animation:
    mutation-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    prismatic-seal-flow 3.2s linear infinite;
}

@keyframes mutation-result-enter {
  0% { opacity: 0; translate: 0 24px; }
  72% { opacity: 1; translate: 0 -4px; }
  100% { opacity: 1; translate: 0 0; }
}

/* Compose reveal entry with persistent Prismatic/Holo motion. Keeping entry on
   translate means the sprite's transform/filter animations no longer replace it. */
#modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.mutation-prismatic:not(.holo-sprite):not(.black-holo-sprite):not(.shiny-sprite) {
  animation:
    mutation-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    prism-hue-spin 5.2s linear infinite,
    prism-breathe 2.6s ease-in-out infinite;
}

#modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.holo-sprite.mutation-prismatic,
#modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.shiny-sprite.mutation-prismatic {
  animation:
    mutation-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    shiny-glow 2.4s ease-in-out 560ms infinite,
    prism-hue-spin 4.4s linear infinite;
}

#modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.black-holo-sprite.mutation-prismatic {
  animation:
    mutation-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    black-holo-color-cycle 2.4s ease-in-out 560ms infinite,
    black-holo-glow 7.2s ease-in-out 560ms infinite,
    prism-hue-spin 7.2s linear infinite;
}

/* Restore ordinary mutation tint where later Party rules intentionally remove
   generic image filters. Prismatic also gets a static fallback for reduced motion. */
img.mutation-azure { --party-mutation-filter: hue-rotate(168deg) saturate(1.28) brightness(1.05) drop-shadow(0 0 var(--mut-glow-size, 0px) rgba(56, 160, 255, 0.85)); }
img.mutation-crimson { --party-mutation-filter: hue-rotate(-36deg) saturate(1.36) brightness(1.04) drop-shadow(0 0 var(--mut-glow-size, 0px) rgba(255, 84, 64, 0.85)); }
img.mutation-emerald { --party-mutation-filter: hue-rotate(86deg) saturate(1.3) brightness(1.06) drop-shadow(0 0 var(--mut-glow-size, 0px) rgba(64, 224, 124, 0.85)); }
img.mutation-violet { --party-mutation-filter: hue-rotate(230deg) saturate(1.24) brightness(1.04) drop-shadow(0 0 var(--mut-glow-size, 0px) rgba(178, 102, 255, 0.85)); }
img.mutation-gold { --party-mutation-filter: sepia(0.34) hue-rotate(12deg) saturate(1.42) brightness(1.1) drop-shadow(0 0 var(--mut-glow-size, 0px) rgba(255, 204, 64, 0.85)); }
img.mutation-prismatic { --party-mutation-filter: saturate(1.32) brightness(1.07) drop-shadow(0 0 calc(var(--sprite-size, 54px) * 0.05) hsl(var(--prism-hue) 100% 74% / 0.95)) drop-shadow(0 0 calc(var(--sprite-size, 54px) * 0.14) hsl(calc(var(--prism-hue) + 100deg) 100% 70% / 0.52)); }

html:not(.is-touch) .side-panel .party-item img[class*="mutation-"]:not(.holo-sprite):not(.black-holo-sprite),
.modal.clean-world-modal .party-item img[class*="mutation-"]:not(.holo-sprite):not(.black-holo-sprite) {
  filter: var(--party-mutation-filter);
}

html:not(.is-touch) .side-panel .party-item img[class*="mutation-"] { --sprite-size: 28px; }
.modal.clean-world-modal .party-item img[class*="mutation-"] { --sprite-size: 72px; }

/* Mutation seals now communicate lineage at a glance instead of sharing one
   generic gold treatment. */
.box-seal--mutation-azure { color: #082b55; background: linear-gradient(90deg, rgba(107, 195, 255, 0.82), rgba(204, 235, 255, 0.72)); }
.box-seal--mutation-crimson { color: #4d1009; background: linear-gradient(90deg, rgba(255, 130, 111, 0.82), rgba(255, 207, 183, 0.72)); }
.box-seal--mutation-emerald { color: #063d22; background: linear-gradient(90deg, rgba(99, 231, 145, 0.82), rgba(202, 255, 218, 0.72)); }
.box-seal--mutation-violet { color: #32104f; background: linear-gradient(90deg, rgba(195, 132, 255, 0.82), rgba(237, 207, 255, 0.74)); }
.box-seal--mutation-gold { color: #4a3100; background: linear-gradient(90deg, rgba(255, 214, 91, 0.86), rgba(255, 241, 183, 0.74)); }
.box-seal--mutation-grade-2 { border-width: 2px; box-shadow: 0 0 8px color-mix(in srgb, var(--mutation-a) 34%, transparent); }
.box-seal--mutation-grade-3 { border-width: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--mutation-a) 52%, transparent), inset 0 0 8px rgba(255,255,255,0.28); }
.box-seal--mutation-prismatic {
  color: white;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(100deg, #492078, var(--mutation-a), var(--mutation-b), #12628b, #492078);
  background-size: 280% 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mutation-a) 48%, transparent);
  animation: prismatic-seal-flow 4.2s linear infinite;
}

/* Battle mutation FX live on a real wrapper child, never on the animated
   sprite strip, so idle/attack/hit/faint playback remains authoritative. */
.combatant.mutation-combatant { isolation: isolate; }
.combatant.mutation-combatant .sprite-flip > img { position: relative; z-index: 2; }

.mutation-battle-aura {
  position: absolute;
  inset: 2%;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--mutation-a) 32%, transparent), transparent 66%);
  filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.055) var(--mutation-a));
  opacity: 0.58;
  animation: mutation-battle-pulse 2.8s ease-in-out infinite;
}

.mutation-battle-aura::before,
.mutation-battle-aura::after,
.mutation-battle-aura > i {
  content: "";
  position: absolute;
  inset: 9%;
  border: 2px solid transparent;
  border-top-color: var(--mutation-a);
  border-right-color: var(--mutation-b);
  border-radius: 50%;
  filter: drop-shadow(0 0 7px var(--mutation-a));
  opacity: 0.7;
  animation: mutation-battle-orbit 4.8s linear infinite;
}

.mutation-battle-aura::after {
  inset: 18%;
  animation-direction: reverse;
  animation-duration: 3.9s;
}

.mutation-battle-aura > i { display: none; }
.mutation-battle-aura--grade-1::after { display: none; }
.mutation-battle-aura--grade-2::before { border-width: 2.5px; }
.mutation-battle-aura--grade-3::before,
.mutation-battle-aura--grade-3::after { border-width: 3px; opacity: 0.9; }

.mutation-battle-aura--prismatic {
  inset: -1%;
  opacity: 0.88;
  background:
    radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--mutation-a) 28%, transparent), transparent 54%),
    conic-gradient(from 0deg, transparent 0 12%, color-mix(in srgb, var(--mutation-a) 62%, transparent) 18%, transparent 28% 47%, color-mix(in srgb, var(--mutation-b) 62%, transparent) 54%, transparent 65% 82%, rgba(255,255,255,0.42) 88%, transparent 96%);
  filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.07) var(--mutation-a)) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--mutation-b));
  animation: prismatic-battle-aura 5.4s linear infinite;
}

.mutation-battle-aura--prismatic > i {
  display: block;
  inset: 2%;
  border-width: 3px;
  border-left-color: rgba(255,255,255,0.78);
  opacity: 0.86;
}

.mutation-battle-aura > b {
  position: absolute;
  right: 2%;
  bottom: 2%;
  z-index: 4;
  min-width: 42px;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--mutation-a) 64%, white);
  border-radius: 999px;
  color: white;
  background: rgba(3, 7, 14, 0.88);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mutation-a) 52%, transparent);
  font-size: clamp(0.52rem, 1.2vw, 0.68rem);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

.mutation-battle-aura--prismatic > b {
  right: 0;
  min-width: 88px;
  background: linear-gradient(100deg, #32115d, color-mix(in srgb, var(--mutation-a) 58%, #1b1854), color-mix(in srgb, var(--mutation-b) 60%, #07345b));
}

.combatant.player:not(.face-right) .mutation-battle-aura > b,
.combatant.enemy.face-right .mutation-battle-aura > b {
  transform: scaleX(-1);
}

@keyframes mutation-battle-pulse {
  0%, 100% { opacity: 0.42; scale: 0.97; }
  50% { opacity: 0.72; scale: 1.04; }
}

@keyframes mutation-battle-orbit { to { rotate: 360deg; } }

@keyframes prismatic-battle-aura {
  to { rotate: 360deg; filter: hue-rotate(360deg) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.07) var(--mutation-a)) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--mutation-b)); }
}

.combatant .sprite-flip.battle-anim img.mutation-azure:not(.holo-sprite):not(.black-holo-sprite) { filter: hue-rotate(168deg) saturate(1.28) brightness(1.05); }
.combatant .sprite-flip.battle-anim img.mutation-crimson:not(.holo-sprite):not(.black-holo-sprite) { filter: hue-rotate(-36deg) saturate(1.36) brightness(1.04); }
.combatant .sprite-flip.battle-anim img.mutation-emerald:not(.holo-sprite):not(.black-holo-sprite) { filter: hue-rotate(86deg) saturate(1.3) brightness(1.06); }
.combatant .sprite-flip.battle-anim img.mutation-violet:not(.holo-sprite):not(.black-holo-sprite) { filter: hue-rotate(230deg) saturate(1.24) brightness(1.04); }
.combatant .sprite-flip.battle-anim img.mutation-gold:not(.holo-sprite):not(.black-holo-sprite) { filter: sepia(0.34) hue-rotate(12deg) saturate(1.42) brightness(1.1); }

.combatant:is(.fainting, .in-ball, .bastimaw-in-ball, .escape, .bastimaw-escape, .voidbound, .void-release) .mutation-battle-aura {
  opacity: 0;
  animation: none;
}

@media (max-width: 560px), (max-height: 620px) {
  .prismatic-hatch-reveal { transform: translate(-50%, -50%) scale(0.68); }
  .egg-mutation-orbits { transform: translate(-50%, -50%) scale(0.78); }
  .egg-mutation-cue-badge { top: 10%; }
  .egg-hatch-mutation-seal { right: 5px; bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .egg-mutation-cue::before,
  .egg-mutation-cue::after,
  .egg-mutation-orbits span,
  .egg-mutation-shards span,
  .prismatic-hatch-reveal,
  .egg-mutation-cue-badge,
  .egg-hatch-mutation-seal,
  .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::before,
  .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster::after,
  .box-seal--mutation-prismatic,
  .mutation-battle-aura,
  .mutation-battle-aura::before,
  .mutation-battle-aura::after,
  .mutation-battle-aura > i {
    animation: none;
  }

  .egg-mutation-cue::before,
  .egg-mutation-cue-badge,
  .egg-hatch-mutation-seal { opacity: 1; }
  .egg-mutation-cue-badge { transform: translate(-50%, 0); }
  .mutation-battle-aura { opacity: 0.62; }

  #modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.mutation-prismatic {
    animation: none;
    opacity: 1;
    translate: 0 0;
    filter: var(--party-mutation-filter);
  }
}

.tactics-turn-order {
  counter-reset: tactics-turn;
  top: 72px;
  left: 10px;
  width: 64px;
  bottom: auto;
  max-height: 196px;
  gap: 5px;
  padding: 2px 0;
  overflow: hidden auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 227, 255, 0.42) rgba(3, 12, 20, 0.18);
}

/* ================================================================
   PRIVATE FRIENDS & GROUP PARITY
   Durable friends and consent-first anywhere groups use the existing
   online social shell, with the original monochrome/teal map-menu tone.
   ================================================================ */

html:has(body.online-private-social-open),
body.online-private-social-open { overflow: hidden; }

.online-private-social-card.online-social-shell {
  --social-ink: #f2f8f7;
  --social-muted: rgba(213, 229, 226, 0.64);
  --social-line: rgba(126, 214, 201, 0.16);
  --social-panel: rgba(8, 17, 20, 0.8);
  --social-cyan: #71ead7;
  --social-violet: #89aaa5;
  --social-gold: #d7e9c8;
  --social-green: #75edbd;
  width: min(960px, calc(100vw - 24px));
  height: min(720px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% -8%, rgba(103, 232, 210, 0.12), transparent 31%),
    linear-gradient(145deg, rgba(19, 27, 29, 0.995), rgba(5, 10, 12, 0.995) 62%, rgba(10, 17, 18, 0.995));
  border-color: rgba(136, 231, 214, 0.25);
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.76), 0 0 0 1px #020607, inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.online-private-social-card.online-social-shell::before {
  background:
    linear-gradient(rgba(116, 219, 201, 0.027) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 219, 201, 0.027) 1px, transparent 1px);
  background-size: 30px 30px;
}

.online-private-social-head { grid-template-columns: auto minmax(0, 1fr) auto; }

.online-private-social-head-icon {
  border-color: rgba(119, 234, 214, 0.3);
  background: linear-gradient(145deg, rgba(91, 222, 200, 0.14), rgba(255, 255, 255, 0.035));
}

.online-private-social-head-icon::before,
.online-private-social-head-icon::after,
.online-private-social-head-icon > i:first-child,
.online-private-social-head-icon > i:nth-child(2) {
  content: "";
  position: absolute;
  border: 2px solid #8eead9;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(113, 234, 214, 0.16);
}

.online-private-social-head-icon::before { width: 14px; height: 14px; top: 9px; left: 10px; }
.online-private-social-head-icon::after { width: 12px; height: 12px; top: 12px; right: 9px; opacity: 0.68; }
.online-private-social-head-icon > i:first-child { width: 25px; height: 13px; left: 7px; bottom: 8px; border-radius: 15px 15px 6px 6px; }
.online-private-social-head-icon > i:nth-child(2) { width: 21px; height: 11px; right: 5px; bottom: 9px; border-radius: 13px 13px 5px 5px; opacity: 0.6; }
.online-private-social-head-icon > b { position: absolute; right: -6px; bottom: -5px; min-width: 23px; height: 23px; display: grid; place-items: center; color: #071713; background: #8de8d7; border: 2px solid #111b1d; border-radius: 50%; font-size: 9px; font-weight: 950; }

.online-private-social-tabs {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 0.9fr) minmax(96px, auto);
  align-items: stretch;
  gap: 7px;
  padding: 8px 12px;
  background: rgba(2, 7, 8, 0.68);
  border-bottom: 1px solid var(--social-line);
}

.online-private-social-tabs > button {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  color: rgba(222, 237, 234, 0.58);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.online-private-social-tabs > button:hover:not(:disabled) { color: #fff; border-color: rgba(116, 232, 211, 0.25); transform: translateY(-1px); }
.online-private-social-tabs > button[aria-selected="true"] { color: #eafffb; background: linear-gradient(135deg, rgba(96, 226, 203, 0.14), rgba(255, 255, 255, 0.035)); border-color: rgba(121, 233, 213, 0.31); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 18px rgba(0, 0, 0, 0.18); }
.online-private-social-tabs > button > b { min-width: 21px; height: 21px; display: grid; place-items: center; color: #071612; background: #8be5d4; border-radius: 999px; font-size: 8px; }
.online-private-social-tabs > button:not([aria-selected="true"]) > b { color: rgba(230, 242, 240, 0.68); background: rgba(255, 255, 255, 0.075); }
.online-private-social-tabs > button > span { position: relative; width: 24px; height: 18px; flex: 0 0 24px; }
.online-private-social-tabs > button > span > i { position: absolute; border: 1.5px solid currentColor; border-radius: 50%; }
.online-private-social-tabs > button > span > i:nth-child(1) { width: 9px; height: 9px; top: 0; left: 3px; }
.online-private-social-tabs > button > span > i:nth-child(2) { width: 15px; height: 8px; bottom: 0; left: 0; border-radius: 9px 9px 4px 4px; }
.online-private-social-tabs > button > span > i:nth-child(3) { width: 10px; height: 8px; right: 0; bottom: 0; border-radius: 7px 7px 3px 3px; opacity: 0.6; }
.online-private-social-tabs > .online-private-social-refresh { justify-self: end; color: rgba(215, 231, 227, 0.58); }
.online-private-social-refresh > i { width: 12px; height: 12px; border: 2px solid currentColor; border-left-color: transparent; border-radius: 50%; }

.online-private-social-body {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 229, 209, 0.28) transparent;
}

.online-private-social-body::-webkit-scrollbar { width: 7px; }
.online-private-social-body::-webkit-scrollbar-thumb { background: rgba(111, 229, 209, 0.22); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.online-private-social-panel { min-width: 0; display: grid; align-content: start; gap: 10px; }

.online-private-social-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(300px, 1.18fr);
  gap: 10px;
}

.online-private-social-code-card,
.online-private-social-add,
.online-private-social-list,
.online-private-social-invitations,
.online-private-social-privacy,
.online-private-social-safety,
.online-private-social-group-room,
.online-private-social-group-empty {
  min-width: 0;
  color: var(--social-ink);
  background: var(--social-panel);
  border: 1px solid rgba(139, 214, 202, 0.12);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.online-private-social-code-card,
.online-private-social-add { display: grid; align-content: center; gap: 7px; padding: 13px 14px; }
.online-private-social-code-card > span,
.online-private-social-add > label { color: rgba(225, 238, 235, 0.72); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.online-private-social-code-card > div,
.online-private-social-add > div { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.online-private-social-code-card code { min-width: 0; display: flex; align-items: center; padding: 0 12px; overflow: hidden; color: #c9fff5; background: rgba(91, 223, 200, 0.07); border: 1px solid rgba(111, 229, 209, 0.18); border-radius: 11px; font-family: "Courier New", monospace; font-size: clamp(14px, 2.2vw, 21px); font-weight: 900; letter-spacing: 0.09em; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.online-private-social-code-card small,
.online-private-social-add small { color: var(--social-muted); font-size: 8px; font-weight: 700; line-height: 1.4; }

.online-private-social-add input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  color: #f5fffd;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(166, 210, 203, 0.16);
  border-radius: 11px;
  outline: 0;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.online-private-social-add input::placeholder { color: rgba(217, 232, 229, 0.25); }
.online-private-social-add input[aria-invalid="true"] { border-color: rgba(255, 128, 128, 0.6); box-shadow: 0 0 0 2px rgba(255, 104, 104, 0.09); }

.online-private-social-card button,
.online-private-social-card select,
.online-private-social-card summary { -webkit-tap-highlight-color: transparent; }

.online-private-social-card button {
  min-height: 38px;
  padding: 0 12px;
  color: rgba(232, 243, 240, 0.76);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.online-private-social-card button:hover:not(:disabled) { color: #fff; background: rgba(118, 231, 211, 0.075); border-color: rgba(126, 234, 214, 0.25); }
.online-private-social-card button:active:not(:disabled) { transform: translateY(1px); }
.online-private-social-card button:disabled { cursor: not-allowed; opacity: 0.38; }
.online-private-social-card button.online-private-social-primary { color: #061511; background: linear-gradient(135deg, #d8fff7, #79e7d3 58%, #6fcbbd); border-color: rgba(151, 244, 226, 0.62); box-shadow: 0 8px 20px rgba(70, 211, 184, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72); }
.online-private-social-card button.online-private-social-primary:hover:not(:disabled) { color: #03110d; background: linear-gradient(135deg, #e9fffb, #8af0dc 58%, #75d8c7); }
.online-private-social-card button.online-private-social-primary.is-ready { color: #dffff8; background: rgba(88, 224, 198, 0.09); border-color: rgba(110, 235, 212, 0.25); box-shadow: none; }

.online-private-social-list { padding: 11px; }
.online-private-social-list > header,
.online-private-social-invitations > header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 2px 9px; }
.online-private-social-list > header > div { min-width: 0; display: grid; gap: 3px; }
.online-private-social-list > header span,
.online-private-social-invitations > header span { color: rgba(231, 242, 240, 0.8); font-size: 9px; font-weight: 950; letter-spacing: 0.11em; text-transform: uppercase; }
.online-private-social-list > header small { overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-list > header b,
.online-private-social-invitations > header b { min-width: 35px; height: 23px; display: grid; place-items: center; color: #aaf4e6; background: rgba(95, 224, 201, 0.07); border: 1px solid rgba(112, 232, 211, 0.15); border-radius: 999px; font-size: 8px; }
.online-private-social-people { display: grid; align-content: start; gap: 7px; }

.online-private-social-person {
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.027);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  animation: privateSocialRowIn 300ms calc(var(--social-row, 0) * 35ms) ease both;
}
.online-private-social-person.is-online { background: linear-gradient(135deg, rgba(91, 216, 195, 0.065), rgba(255, 255, 255, 0.024)); border-color: rgba(113, 225, 205, 0.13); }
.online-private-social-person.is-grouped { border-color: rgba(115, 237, 190, 0.23); box-shadow: inset 3px 0 0 rgba(112, 237, 188, 0.38); }
@keyframes privateSocialRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.online-private-social-avatar { position: relative; width: 43px; height: 43px; display: grid; place-items: center; color: #eafffb; background: linear-gradient(145deg, rgba(113, 224, 204, 0.14), rgba(255, 255, 255, 0.035)); border: 1px solid rgba(131, 227, 211, 0.2); border-radius: 13px; font-family: "Cinzel", Georgia, serif; font-size: 11px; font-weight: 900; }
.online-private-social-avatar > i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; background: #5d716e; border: 2px solid #10191a; border-radius: 50%; }
.is-online > .online-private-social-avatar > i,
.online-private-social-person.is-online .online-private-social-avatar > i { background: var(--social-green); box-shadow: 0 0 9px rgba(117, 237, 189, 0.55); }
.online-private-social-person-copy { min-width: 0; display: grid; gap: 5px; }
.online-private-social-person-copy > div { min-width: 0; display: flex; align-items: center; gap: 6px; }
.online-private-social-person-copy strong { min-width: 0; overflow: hidden; color: #f8fffd; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-person-copy > div > span,
.online-private-social-group-member > div > div > span { flex: 0 0 auto; padding: 3px 5px; color: #aef3e6; background: rgba(93, 222, 199, 0.065); border: 1px solid rgba(116, 231, 210, 0.13); border-radius: 999px; font-size: 6px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.online-private-social-person-copy > small { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-person-copy > small > i { width: 5px; height: 5px; flex: 0 0 5px; background: currentColor; border-radius: 50%; }
.online-private-social-person-actions { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }

.online-private-social-more { position: relative; }
.online-private-social-more > summary { width: 38px; height: 38px; display: grid; place-items: center; color: rgba(229, 240, 237, 0.58); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; cursor: pointer; list-style: none; }
.online-private-social-more > summary::-webkit-details-marker { display: none; }
.online-private-social-more > summary > span { transform: translateY(-3px); font-size: 12px; letter-spacing: 1px; }
.online-private-social-more[open] > summary { color: #dffff8; border-color: rgba(115, 231, 210, 0.26); }
.online-private-social-more > div { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; width: 190px; display: grid; gap: 5px; padding: 7px; background: rgba(5, 12, 13, 0.985); border: 1px solid rgba(129, 219, 203, 0.2); border-radius: 12px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65); }
.online-private-social-more > div > button { width: 100%; justify-content: flex-start; text-align: left; }
.online-private-social-more > div > button.is-danger { color: #ffb0ad; border-color: rgba(255, 121, 117, 0.16); }

.online-private-social-invitations { display: grid; gap: 7px; padding: 11px; background: linear-gradient(135deg, rgba(107, 232, 209, 0.09), rgba(8, 17, 20, 0.82)); border-color: rgba(118, 233, 212, 0.22); }
.online-private-social-invitations > article { min-width: 0; display: grid; grid-template-columns: 43px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 13px; animation: privateSocialRowIn 300ms calc(var(--social-row, 0) * 35ms) ease both; }
.online-private-social-invitations > article > div:not(.online-private-social-invite-actions) { min-width: 0; display: grid; gap: 4px; }
.online-private-social-invitations > article strong { overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-invitations > article small { color: var(--social-muted); font-size: 8px; }
.online-private-social-invite-actions { display: flex; gap: 6px; }
.online-private-social-invitations > p { margin: 0; padding: 3px 2px 0; color: rgba(210, 230, 226, 0.64); font-size: 8px; font-weight: 700; line-height: 1.45; }

.online-private-social-empty { min-height: 145px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 22px; text-align: center; }
.online-private-social-empty > span { position: relative; width: 58px; height: 40px; }
.online-private-social-empty > span > i { position: absolute; width: 30px; height: 30px; border: 1px solid rgba(117, 231, 210, 0.28); border-radius: 50%; }
.online-private-social-empty > span > i:first-child { left: 3px; }
.online-private-social-empty > span > i:last-child { right: 3px; bottom: 0; }
.online-private-social-empty strong { color: #effbf8; font-family: "Cinzel", Georgia, serif; font-size: 15px; }
.online-private-social-empty p { max-width: 480px; margin: 0; color: var(--social-muted); font-size: 9px; font-weight: 700; line-height: 1.5; }
.online-private-social-empty-small { margin: 0; padding: 14px; color: var(--social-muted); font-size: 9px; font-weight: 700; text-align: center; }

.online-private-social-privacy { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 0.42fr); align-items: center; gap: 12px; padding: 11px 13px; }
.online-private-social-privacy > div { min-width: 0; display: grid; gap: 3px; }
.online-private-social-privacy > div > span { color: rgba(235, 245, 242, 0.82); font-size: 9px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.online-private-social-privacy > div > small { color: var(--social-muted); font-size: 8px; font-weight: 700; }
.online-private-social-privacy select { width: 100%; height: 40px; padding: 0 34px 0 11px; color: #effbf8; background: #101a1b; border: 1px solid rgba(137, 219, 205, 0.18); border-radius: 10px; font-size: 9px; font-weight: 850; }

.online-private-social-safety { padding: 0; overflow: hidden; }
.online-private-social-safety > summary { min-height: 43px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; color: rgba(224, 237, 234, 0.68); cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.online-private-social-safety > summary > span { min-width: 23px; height: 21px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.055); border-radius: 999px; }
.online-private-social-safety-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 10px 10px; }
.online-private-social-safety-grid > section { min-width: 0; padding: 9px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 11px; }
.online-private-social-safety-grid h3 { margin: 0 0 7px; color: rgba(231, 242, 239, 0.72); font-size: 8px; letter-spacing: 0.09em; text-transform: uppercase; }
.online-private-social-safety-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
.online-private-social-safety-row > span { min-width: 0; overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-safety-row > button { min-height: 30px; }

.online-private-social-group-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(102, 229, 205, 0.08), transparent 34%), var(--social-panel); }
.online-private-social-group-empty h3 { margin: 2px 0 0; color: #f4fffc; font-family: "Cinzel", Georgia, serif; font-size: clamp(21px, 3.5vw, 31px); }
.online-private-social-group-empty p { max-width: 590px; margin: 0; color: var(--social-muted); font-size: 10px; font-weight: 700; line-height: 1.55; }
.online-private-social-group-mark { position: relative; width: 118px; height: 66px; }
.online-private-social-group-mark > i { position: absolute; bottom: 0; width: 48px; height: 36px; border: 1px solid rgba(125, 233, 213, 0.29); border-radius: 28px 28px 12px 12px; box-shadow: 0 0 26px rgba(100, 228, 204, 0.07); }
.online-private-social-group-mark > i::before { content: ""; position: absolute; top: -30px; left: 10px; width: 25px; height: 25px; border: 1px solid rgba(125, 233, 213, 0.32); border-radius: 50%; }
.online-private-social-group-mark > i:nth-child(1) { left: 0; opacity: 0.58; }
.online-private-social-group-mark > i:nth-child(2) { left: 35px; z-index: 2; border-color: rgba(145, 244, 225, 0.55); }
.online-private-social-group-mark > i:nth-child(3) { right: 0; opacity: 0.58; }

.online-private-social-group-room { padding: 12px; overflow: hidden; }
.online-private-social-group-room > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 3px 3px 12px; }
.online-private-social-group-room > header > div { min-width: 0; }
.online-private-social-group-room h3 { margin: 4px 0 2px; color: #f5fffc; font-family: "Cinzel", Georgia, serif; font-size: clamp(22px, 3.4vw, 31px); }
.online-private-social-group-room header small { color: var(--social-muted); font-size: 9px; font-weight: 750; }
.online-private-social-ready-ring { width: 70px; height: 70px; display: grid; place-items: center; padding: 5px; border-radius: 50%; background: conic-gradient(var(--social-green) var(--private-social-ready), rgba(255, 255, 255, 0.07) 0); box-shadow: 0 0 25px rgba(92, 225, 188, 0.08); }
.online-private-social-ready-ring > i { width: 100%; height: 100%; display: flex; align-items: baseline; justify-content: center; padding-top: 18px; color: #fff; background: #0a1516; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 50%; font-style: normal; }
.online-private-social-ready-ring strong { font-size: 20px; }
.online-private-social-ready-ring small { color: var(--social-muted); font-size: 9px; }
.online-private-social-group-roster { display: grid; gap: 7px; }

.online-private-social-group-member { min-width: 0; min-height: 69px; display: grid; grid-template-columns: 28px 43px minmax(0, 1fr) auto auto auto; align-items: center; gap: 9px; padding: 9px; background: rgba(255, 255, 255, 0.027); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 13px; animation: privateSocialRowIn 300ms calc(var(--social-row, 0) * 35ms) ease both; }
.online-private-social-group-member.is-ready { background: linear-gradient(135deg, rgba(91, 225, 181, 0.09), rgba(255, 255, 255, 0.024)); border-color: rgba(111, 234, 188, 0.18); }
.online-private-social-group-member.is-offline { opacity: 0.58; }
.online-private-social-order { color: rgba(197, 218, 214, 0.32); font-family: "Courier New", monospace; font-size: 8px; font-weight: 900; }
.online-private-social-group-member > div { min-width: 0; display: grid; gap: 4px; }
.online-private-social-group-member > div > div { min-width: 0; display: flex; align-items: center; gap: 5px; }
.online-private-social-group-member > div strong { min-width: 0; overflow: hidden; color: #f8fffd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-group-member > div small { overflow: hidden; color: var(--social-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-group-member > div > div > span.is-leader { color: #e0efcf; border-color: rgba(203, 230, 170, 0.17); background: rgba(190, 222, 154, 0.055); }
.online-private-social-ready-state { display: inline-flex; align-items: center; gap: 5px; color: rgba(215, 229, 225, 0.42); font-size: 7px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.online-private-social-ready-state > i { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
.online-private-social-group-member.is-ready .online-private-social-ready-state { color: var(--social-green); }
.online-private-social-follow { min-width: 82px; }
.online-private-social-group-more { justify-self: end; }
.online-private-social-consent-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin-top: 9px; padding: 9px 10px; color: rgba(211, 231, 226, 0.68); background: rgba(91, 222, 199, 0.045); border: 1px solid rgba(111, 229, 209, 0.1); border-radius: 11px; }
.online-private-social-consent-note > i { width: 7px; height: 7px; margin-top: 4px; background: var(--social-cyan); border-radius: 50%; box-shadow: 0 0 9px rgba(113, 234, 215, 0.48); }
.online-private-social-consent-note p { margin: 0; font-size: 8px; font-weight: 700; line-height: 1.5; }
.online-private-social-group-actions { display: grid; grid-template-columns: minmax(130px, 0.4fr) minmax(180px, 0.6fr); gap: 8px; margin-top: 10px; }
.online-private-social-group-actions > button { min-height: 44px; }

.online-private-social-loading { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--social-muted); text-align: center; }
.online-private-social-loading > span { height: 40px; display: flex; align-items: center; gap: 7px; }
.online-private-social-loading > span > i { width: 8px; height: 8px; background: var(--social-cyan); border-radius: 50%; animation: privateSocialPulse 900ms ease-in-out infinite alternate; }
.online-private-social-loading > span > i:nth-child(2) { animation-delay: 150ms; }
.online-private-social-loading > span > i:nth-child(3) { animation-delay: 300ms; }
.online-private-social-loading strong { color: #f0fbf8; font-family: "Cinzel", Georgia, serif; font-size: 17px; }
.online-private-social-loading small { font-size: 9px; }
@keyframes privateSocialPulse { to { opacity: 0.22; transform: translateY(-7px); } }

.online-private-social-footer { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 41px; padding: 7px 13px; background: rgba(2, 7, 8, 0.72); border-top: 1px solid var(--social-line); }
.online-private-social-footer > p { min-width: 0; margin: 0; overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.online-private-social-footer > p.is-error { color: #ffaaa5; }
.online-private-social-footer > p.is-success { color: #8cf1ce; }
.online-private-social-footer > span { color: rgba(196, 219, 214, 0.27); font-family: "Courier New", monospace; font-size: 6px; }

.online-private-social-confirm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 34%, rgba(39, 15, 18, 0.34), rgba(1, 5, 6, 0.84) 68%);
  backdrop-filter: blur(8px) saturate(0.8);
}
.online-private-social-confirm {
  width: min(410px, 100%);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  color: #f5fffc;
  background: linear-gradient(155deg, rgba(25, 11, 14, 0.98), rgba(4, 14, 15, 0.98));
  border: 1px solid rgba(255, 129, 120, 0.34);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.online-private-social-confirm-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #19080a;
  background: linear-gradient(145deg, #ffd6ce, #ff8278);
  border-radius: 13px;
  font: 900 20px/1 "Courier New", monospace;
  box-shadow: 0 10px 28px rgba(255, 90, 78, 0.18);
}
.online-private-social-confirm h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: -0.02em; }
.online-private-social-confirm p { margin: 0; color: rgba(220, 235, 231, 0.78); font-size: 11px; line-height: 1.55; }
.online-private-social-confirm > div:last-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 5px; }
.online-private-social-card button.online-private-social-danger { color: #22090b; background: linear-gradient(135deg, #ffd8d1, #ff897f); border-color: rgba(255, 167, 157, 0.65); }

.online-private-social-card :focus-visible {
  outline: 2px solid #9af5e4;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(106, 235, 211, 0.13);
}

@media (max-width: 720px) {
  body.online-private-social-open .online-group-overlay { box-sizing: border-box; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
  body.online-private-social-open .online-private-social-card.online-social-shell { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 21px; }
  .online-private-social-head { grid-template-columns: 43px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
  .online-private-social-head-icon { width: 43px; height: 43px; border-radius: 14px; transform: scale(0.9); }
  .online-private-social-head .online-social-head-copy h2 { font-size: 19px; }
  .online-private-social-head .online-social-head-copy > small { font-size: 10px; }
  .online-private-social-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; padding: 6px 8px; }
  .online-private-social-tabs > button { min-height: 41px; padding: 6px 8px; }
  .online-private-social-tabs > .online-private-social-refresh { width: 43px; min-width: 43px; padding: 0; font-size: 0; }
  .online-private-social-body { padding: 8px; }
  .online-private-social-hero { grid-template-columns: 1fr; }
  .online-private-social-code-card code { font-size: 16px; }
  .online-private-social-person { grid-template-columns: 43px minmax(0, 1fr); }
  .online-private-social-person-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .online-private-social-person-actions > button { min-width: 0; }
  .online-private-social-more > div { right: 0; }
  .online-private-social-invitations > article { grid-template-columns: 43px minmax(0, 1fr); }
  .online-private-social-invite-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-private-social-privacy { grid-template-columns: 1fr; }
  .online-private-social-safety-grid { grid-template-columns: 1fr; }
  .online-private-social-group-member { grid-template-columns: 24px 43px minmax(0, 1fr) auto auto; }
  .online-private-social-group-member .online-private-social-ready-state { grid-column: 3; justify-self: start; }
  .online-private-social-group-member .online-private-social-follow { grid-column: 4; grid-row: 1 / span 2; }
  .online-private-social-group-member .online-private-social-group-more { grid-column: 5; grid-row: 1 / span 2; }
  .online-private-social-footer > span { display: none; }
  .online-private-social-card button { font-size: 12px; }
  .online-private-social-code-card > span,
  .online-private-social-add > label,
  .online-private-social-list > header span,
  .online-private-social-invitations > header span,
  .online-private-social-privacy > div > span,
  .online-private-social-safety > summary,
  .online-private-social-safety-grid h3 { font-size: 11px; }
  .online-private-social-code-card small,
  .online-private-social-add small,
  .online-private-social-list > header small,
  .online-private-social-person-copy > small,
  .online-private-social-invitations > article small,
  .online-private-social-invitations > p,
  .online-private-social-privacy > div > small,
  .online-private-social-privacy select,
  .online-private-social-safety-row > span,
  .online-private-social-empty p,
  .online-private-social-empty-small,
  .online-private-social-group-empty p,
  .online-private-social-group-room header small,
  .online-private-social-group-member > div small,
  .online-private-social-ready-state,
  .online-private-social-consent-note p,
  .online-private-social-loading small { font-size: 11px; }
  .online-private-social-footer { min-height: 52px; padding-block: 8px; }
  .online-private-social-footer > p {
    overflow: visible;
    font-size: 11px;
    line-height: 1.4;
    text-overflow: clip;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .online-private-social-tabs > button > span { display: none; }
  .online-private-social-tabs > button { gap: 5px; font-size: 12px; letter-spacing: 0.055em; }
  .online-private-social-code-card > div,
  .online-private-social-add > div { grid-template-columns: minmax(0, 1fr) auto; }
  .online-private-social-code-card code { padding: 0 8px; font-size: 13px; letter-spacing: 0.045em; }
  .online-private-social-group-room > header { grid-template-columns: minmax(0, 1fr) 58px; }
  .online-private-social-ready-ring { width: 58px; height: 58px; }
  .online-private-social-ready-ring > i { padding-top: 13px; }
  .online-private-social-group-member { grid-template-columns: 20px 37px minmax(0, 1fr); gap: 7px; }
  .online-private-social-group-member > .online-private-social-avatar { width: 37px; height: 37px; border-radius: 11px; }
  .online-private-social-group-member .online-private-social-ready-state { grid-column: 3; }
  .online-private-social-group-member .online-private-social-follow { grid-column: 1 / -1; grid-row: auto; width: 100%; }
  .online-private-social-group-member .online-private-social-group-more { grid-column: 1 / span 2; grid-row: 2; justify-self: start; }
  .online-private-social-group-actions { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}

@media (max-width: 360px) {
  .online-private-social-card.online-social-shell .online-private-social-head { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px 8px; }
  .online-private-social-card.online-social-shell .online-private-social-head-icon { display: none; }
  .online-private-social-card.online-social-shell .online-private-social-head .online-social-head-copy h2 { font-size: 17px; }
  .online-private-social-card.online-social-shell .online-social-close { width: 43px; min-width: 43px; height: 43px; border-radius: 13px; }
}

@media (pointer: coarse), (hover: none) {
  .online-private-social-card button,
  .online-private-social-more > summary,
  .online-private-social-card select,
  .online-private-social-add input { min-height: 44px; }
  .online-private-social-person { min-height: 72px; }
  .online-private-social-more > div { width: min(230px, calc(100vw - 32px)); }
}

@media (max-height: 520px) and (orientation: landscape) {
  .online-private-social-card.online-social-shell { height: calc(100dvh - 12px); }
  .online-private-social-head { padding-block: 7px; }
  .online-private-social-head-icon { width: 40px; height: 40px; transform: scale(0.82); }
  .online-private-social-head .online-social-head-copy h2 { font-size: 17px; }
  .online-private-social-tabs { padding-block: 5px; }
  .online-private-social-tabs > button { min-height: 36px; }
  .online-private-social-footer { min-height: 32px; padding-block: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .online-private-social-person,
  .online-private-social-invitations > article,
  .online-private-social-group-member,
  .online-private-social-loading > span > i { animation: none !important; }
  .online-private-social-card button { transition: none; }
}

.tactics-turn-order::-webkit-scrollbar {
  width: 5px;
}

.tactics-turn-order::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(3, 12, 20, 0.18);
}

.tactics-turn-order::-webkit-scrollbar-thumb {
  border: 1px solid rgba(3, 12, 20, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(164, 242, 255, 0.7), rgba(64, 174, 211, 0.5));
  box-shadow: 0 0 7px rgba(86, 218, 255, 0.18);
}

.tactics-turn-card {
  counter-increment: tactics-turn;
  display: grid;
  grid-template-columns: 17px 42px;
  min-height: 44px;
  gap: 5px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.tactics-turn-card::before {
  content: counter(tactics-turn);
  color: #7de3ff;
  font-size: 0.82rem;
  font-weight: 950;
  text-align: right;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.tactics-turn-card.enemy::before {
  color: #ff7c86;
}

.tactics-turn-card.is-active::before {
  color: #ffdf72;
}

.tactics-turn-card.enemy,
.tactics-turn-card.ally {
  background: transparent;
  border-color: transparent;
}

.tactics-turn-card.is-active {
  box-shadow: none;
}

.tactics-turn-meta,
.tactics-mini-hp {
  display: none !important;
}

.tactics-turn-portrait,
.tactics-panel-portrait {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(var(--team-rgb, 255, 255, 255), 0.62);
  background-color: rgba(var(--class-rgb, 255, 255, 255), 0.13);
  background-image:
    var(--portrait-image),
    radial-gradient(circle at 50% 36%, rgba(var(--class-rgb, 255, 255, 255), 0.66) 0 25%, rgba(var(--class-rgb, 255, 255, 255), 0.2) 54%, rgba(4, 9, 16, 0.92) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.14));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: var(--portrait-size, contain), 100% 100%, 100% 100%;
  background-position: var(--portrait-position, center), center, center;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 18px rgba(var(--class-rgb, 255, 255, 255), 0.18);
  position: relative;
}

.tactics-turn-portrait::after,
.tactics-panel-portrait::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 250, 230, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  opacity: var(--portrait-initial-opacity, 0);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
  pointer-events: none;
}

.tactics-turn-card.enemy .tactics-turn-portrait {
  border-color: rgba(var(--team-rgb, 255, 110, 118), 0.78);
}

.tactics-turn-card.ally .tactics-turn-portrait {
  border-color: rgba(var(--team-rgb, 94, 216, 255), 0.78);
}

.tactics-turn-card.is-active .tactics-turn-portrait {
  border-color: rgba(255, 224, 112, 0.94);
  box-shadow: 0 0 0 2px rgba(255, 224, 112, 0.32), 0 0 18px rgba(255, 216, 104, 0.34), inset 0 0 18px rgba(var(--class-rgb, 255, 255, 255), 0.22);
}

.tactics-panel {
  left: 10px;
  top: auto;
  bottom: 10px;
  width: 232px;
  max-height: none;
  padding: 6px;
}

.tactics-unit-panel {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.tactics-panel-portrait {
  width: 54px;
  height: 54px;
  border-radius: 8px;
}

.tactics-panel-portrait.small {
  width: 42px;
  height: 42px;
}

.tactics-unit-main {
  min-width: 0;
}

.tactics-unit-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-items: start;
  margin-bottom: 5px;
}

.tactics-unit-heading small {
  grid-column: 1 / -1;
  color: rgba(255, 250, 230, 0.62);
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.tactics-unit-heading strong {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  color: #fffaf0;
  font-size: 0.78rem;
  line-height: 1.08;
}

.tactics-unit-heading em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffe7a8;
  font-size: 0.54rem;
  line-height: 1.05;
  font-style: normal;
  font-weight: 900;
}

.tactics-stat-row {
  display: grid;
  grid-template-columns: 20px minmax(54px, 1fr) 40px;
  gap: 4px;
  align-items: center;
  margin-top: 2px;
}

.tactics-stat-row span,
.tactics-stat-row b {
  color: rgba(255, 250, 230, 0.78);
  font-size: 0.54rem;
  font-weight: 950;
}

.tactics-stat-row b {
  text-align: right;
}

.tactics-stat-track {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

.tactics-stat-track i {
  display: block;
  position: relative;
  z-index: 1;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52e487, #f2d866);
  box-shadow: 0 0 8px rgba(95, 227, 154, 0.34);
}

.tactics-stat-loss {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 246, 222, 0.98), rgba(255, 67, 82, 0.94));
  box-shadow: 0 0 10px rgba(255, 67, 82, 0.78);
  transform-origin: left center;
  animation: tactics-hp-loss 1.6s ease-out forwards;
}

@keyframes tactics-hp-loss {
  0% { opacity: 1; transform: scaleX(1); }
  72% { opacity: 0.82; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.08); }
}

.tactics-stat-row.mp .tactics-stat-track i {
  background: linear-gradient(90deg, #55d8ff, #8f83ff);
}

.tactics-stat-row.ct .tactics-stat-track i {
  background: linear-gradient(90deg, #f7a33e, #ffe36e);
}

.tactics-unit-foot,
.tactics-ability-tags,
.tactics-status-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.tactics-unit-foot span,
.tactics-ability-tags span,
.tactics-status-grid span {
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 250, 230, 0.72);
  font-size: 0.58rem;
  font-weight: 900;
}

.tactics-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tactics-status-grid b {
  color: #fffaf0;
}

.tactics-target-preview,
.tactics-ability-detail {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tactics-target-preview {
  display: block;
  gap: 5px;
  align-items: center;
}

.tactics-target-preview strong,
.tactics-target-preview small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactics-target-preview strong {
  color: #fffaf0;
  font-size: 0.66rem;
}

.tactics-target-preview small {
  color: rgba(255, 250, 230, 0.68);
  font-size: 0.55rem;
  font-weight: 900;
}

.tactics-target-side {
  display: block;
  min-width: 0;
}

.tactics-target-side strong,
.tactics-target-side small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactics-target-side strong {
  color: #fffaf0;
  font-size: 0.72rem;
}

.tactics-target-side small {
  color: rgba(255, 250, 230, 0.68);
  font-size: 0.58rem;
  font-weight: 850;
}

.tactics-result-core {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
  background: rgba(8, 12, 22, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tactics-result-core span,
.tactics-result-core small {
  color: rgba(255, 250, 230, 0.68);
  font-size: 0.55rem;
  font-weight: 950;
  text-transform: uppercase;
}

.tactics-result-core b {
  color: #fffaf0;
  font-size: 1.15rem;
  line-height: 1;
}

.tactics-result-core.heal b {
  color: #92f0a0;
}

.tactics-result-core.boost b {
  color: #ffe36e;
}

.tactics-splash-note {
  grid-column: 1 / -1;
  color: rgba(255, 250, 230, 0.62);
  font-size: 0.58rem;
  font-weight: 900;
  text-align: center;
}

.tactics-ability-detail p {
  margin: 4px 0 0;
  color: rgba(255, 250, 230, 0.78);
  font-size: 0.58rem;
  line-height: 1.25;
}

.tactics-ability-detail strong {
  color: #fffaf0;
  font-size: 0.7rem;
}

.tactics-tile-line {
  margin-top: 7px;
  font-size: 0.58rem;
}

.tactics-log {
  margin-top: 7px;
  max-height: 2.8em;
  overflow: hidden;
  color: rgba(255, 250, 230, 0.66);
}

.tactics-right-dock {
  top: 22px;
  right: 10px;
  bottom: auto;
  width: 148px;
  max-width: calc(100% - 20px);
  height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow: visible;
  transition: width 160ms ease;
}

.tactics-right-dock.has-ability-detail {
  width: clamp(248px, 30vw, 336px);
}

.tactics-actions {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  max-height: min(330px, 100%);
  max-width: none;
  gap: 5px;
  padding: 6px;
  overflow: hidden auto;
  scrollbar-width: thin;
}

.tactics-right-dock.has-ability-detail .tactics-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.tactics-command-title {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  color: rgba(255, 250, 230, 0.64);
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

.tactics-right-dock.has-ability-detail .tactics-command-title,
.tactics-right-dock.has-ability-detail .tactics-target-preview,
.tactics-right-dock.has-ability-detail .tactics-ability-detail {
  grid-column: 1 / -1;
}

.tactics-actions button {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 0.66rem;
  line-height: 1.05;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tactics-actions button small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tactics-actions .tactics-target-preview,
.tactics-actions .tactics-ability-detail {
  min-width: 0;
  max-width: 100%;
  padding: 6px;
  border-radius: 8px;
  background: rgba(8, 12, 22, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.tactics-ability-detail p,
.tactics-ability-detail strong,
.tactics-ability-tags span {
  overflow-wrap: anywhere;
}

.tactics-inspect-dock {
  left: auto;
  right: 10px;
  top: auto;
  bottom: 10px;
  width: 232px;
  max-height: none;
  padding: 6px;
  overflow: hidden;
}

.tactics-inspect-dock.enemy {
  background:
    linear-gradient(180deg, rgba(86, 15, 24, 0.68), rgba(28, 9, 14, 0.74));
  border-color: rgba(255, 92, 104, 0.42);
  border-top-color: rgba(255, 174, 178, 0.46);
}

.tactics-inspect-dock.ally {
  background:
    linear-gradient(180deg, rgba(10, 44, 64, 0.62), rgba(8, 16, 28, 0.72));
  border-color: rgba(94, 216, 255, 0.36);
  border-top-color: rgba(165, 237, 255, 0.44);
}

.tactics-inspect-dock .tactics-inspect-panel {
  padding: 0;
  background: transparent;
  border: 0;
}

.tactics-inspect-dock.enemy .tactics-unit-heading strong {
  color: #ffd7d9;
}

.tactics-inspect-dock.ally .tactics-unit-heading strong {
  color: #d8f6ff;
}

.tactics-inspect-dock .tactics-unit-panel.compact {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 5px;
}

.tactics-inspect-dock .tactics-unit-panel.compact .tactics-unit-heading {
  display: block;
  margin-bottom: 3px;
}

.tactics-inspect-dock .tactics-unit-panel.compact .tactics-unit-heading strong {
  font-size: 0.62rem;
}

.tactics-inspect-dock .tactics-unit-panel.compact .tactics-unit-heading em {
  display: none;
}

.tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row {
  grid-template-columns: 18px minmax(38px, 1fr) 34px;
  gap: 3px;
}

.tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row span,
.tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row b {
  font-size: 0.48rem;
}

.tactics-actions button.confirm {
  background: rgba(122, 226, 133, 0.24);
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .tactics-topbar {
    top: max(16px, calc(env(safe-area-inset-top) + 16px));
    left: max(26px, calc(env(safe-area-inset-left) + 26px));
    width: auto;
    height: 36px;
    min-height: 0;
    padding: 0;
  }

  html.is-touch .tactics-camera-button,
  html.is-touch .tactics-facing-button {
    width: 36px;
    height: 36px;
    font-size: 0.54rem;
  }

  html.is-touch .tactics-tutorial-banner {
    top: max(12px, calc(env(safe-area-inset-top) + 12px));
    left: max(204px, calc(env(safe-area-inset-left) + 204px));
    right: max(176px, calc(env(safe-area-inset-right) + 176px));
    width: auto;
    max-width: 420px;
    min-height: 52px;
    margin-inline: auto;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 8px;
    padding: 6px 10px 6px 8px;
    border-radius: 10px;
    transform: translateY(-8px) scale(0.975);
  }

  html.is-touch .tactics-tutorial-banner.is-visible {
    transform: translateY(0) scale(1);
  }

  html.is-touch .tactics-tutorial-banner.is-resetting {
    transform: translateY(-8px) scale(0.975);
  }

  html.is-touch .tactics-tutorial-banner.is-leaving {
    transform: translateY(-7px) scale(0.985);
  }

  html.is-touch .tactics-tutorial-banner__step {
    min-height: 36px;
    font-size: 0.58rem;
  }

  html.is-touch .tactics-tutorial-banner__body {
    gap: 1px 7px;
  }

  html.is-touch .tactics-tutorial-banner__body small {
    font-size: 0.46rem;
  }

  html.is-touch .tactics-tutorial-banner__body strong {
    font-size: 0.7rem;
  }

  html.is-touch .tactics-tutorial-banner__copy {
    font-size: 0.6rem;
    line-height: 1.18;
  }

  html.is-touch .tactics-turn-order {
    top: max(58px, calc(env(safe-area-inset-top) + 58px));
    left: max(8px, env(safe-area-inset-left));
    bottom: auto;
    width: 44px;
    max-height: 156px;
    overflow: hidden auto;
  }

  html.is-touch .tactics-turn-card {
    grid-template-columns: 11px 30px;
    min-height: 32px;
    gap: 3px;
    padding: 0;
  }

  html.is-touch .tactics-turn-portrait {
    width: 30px;
    height: 30px;
  }

  html.is-touch .tactics-panel {
    left: max(8px, env(safe-area-inset-left));
    top: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: clamp(154px, 26vw, 188px);
    max-height: calc(100vh - 84px);
    padding: 6px;
  }

  html.is-touch .tactics-unit-panel {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 5px;
  }

  html.is-touch .tactics-panel-portrait {
    width: 34px;
    height: 34px;
  }

  html.is-touch .tactics-panel-portrait.small {
    width: 32px;
    height: 32px;
  }

  html.is-touch .tactics-unit-heading strong {
    font-size: 0.76rem;
  }

  html.is-touch .tactics-unit-heading em,
  html.is-touch .tactics-unit-foot span,
  html.is-touch .tactics-ability-tags span,
  html.is-touch .tactics-status-grid span {
    font-size: 0.5rem;
  }

  html.is-touch .tactics-stat-row {
    grid-template-columns: 20px minmax(48px, 1fr) 38px;
    gap: 4px;
    margin-top: 2px;
  }

  html.is-touch .tactics-target-preview {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  html.is-touch .tactics-result-core {
    min-height: 38px;
  }

  html.is-touch .tactics-result-core b {
    font-size: 1.15rem;
  }

  html.is-touch .tactics-right-dock {
    top: max(16px, calc(env(safe-area-inset-top) + 16px));
    right: max(8px, env(safe-area-inset-right));
    bottom: auto;
    width: clamp(112px, 22vw, 136px);
    max-width: calc(100vw - max(16px, calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)));
    height: calc(100vh - 24px);
    gap: 7px;
  }

  html.is-touch .tactics-right-dock.has-ability-detail {
    width: clamp(190px, 42vw, 270px);
  }

  html.is-touch .tactics-right-dock .tactics-actions {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(280px, 100%);
    max-width: none;
    gap: 5px;
    padding: 6px;
    overflow: hidden auto;
  }

  html.is-touch .tactics-right-dock.has-ability-detail .tactics-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.is-touch .tactics-inspect-dock {
    left: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: clamp(198px, 38vw, 236px);
    max-height: none;
  }

  html.is-touch .tactics-actions button {
    min-height: 32px;
    font-size: 0.6rem;
  }
}

/* Tactics is a game surface, not a squeezed desktop dashboard. Portrait uses
   two full-width rails so the camera owns the centre of the phone; landscape
   uses one top initiative rail and two compact edge docks. Every visible
   control stays at a touch-sized target and no roster card is half-clipped. */
@media (max-width: 760px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  .tactics-layer,
  body.tactics-active .tactics-layer {
    position: fixed;
    inset: 0;
    z-index: 55;
    border-radius: 0;
  }

  .tactics-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(10, 9, 8, 0.94) 0,
        rgba(28, 23, 16, 0.72) 6px,
        rgba(28, 23, 16, 0) 14px,
        transparent calc(100% - 14px),
        rgba(28, 23, 16, 0.72) calc(100% - 6px),
        rgba(10, 9, 8, 0.94) 100%
      );
    box-shadow:
      inset 1px 0 rgba(238, 204, 132, 0.22),
      inset -1px 0 rgba(238, 204, 132, 0.22);
  }

  .tactics-topbar {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    width: auto;
    height: 44px;
    gap: 6px;
  }

  .tactics-camera-button,
  .tactics-facing-button {
    width: 44px;
    height: 44px;
    font-size: 0.68rem;
  }

  .tactics-turn-order {
    top: calc(max(10px, env(safe-area-inset-top)) + 54px);
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: auto;
    width: auto;
    height: 54px;
    max-height: 54px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 5);
    gap: 6px;
    padding: 4px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tactics-turn-order::-webkit-scrollbar {
    display: none;
  }

  .tactics-turn-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-width: 0;
    min-height: 46px;
    scroll-snap-align: start;
  }

  .tactics-turn-card::before {
    position: absolute;
    top: -1px;
    left: max(1px, calc(50% - 25px));
    z-index: 2;
    min-width: 16px;
    padding: 2px 3px;
    border-radius: 999px;
    color: #061018;
    background: #83e7ff;
    font-size: 0.62rem;
    line-height: 1;
    text-align: center;
    text-shadow: none;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.52);
  }

  .tactics-turn-card.enemy::before {
    color: #fff7f4;
    background: #c94858;
  }

  .tactics-turn-card.is-active::before {
    color: #211700;
    background: #ffdf72;
  }

  .tactics-turn-portrait {
    width: 44px;
    height: 44px;
  }

  .tactics-panel {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 86px);
    width: auto;
    max-height: 98px;
    padding: 7px 8px;
  }

  .tactics-unit-panel {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
  }

  .tactics-panel-portrait,
  .tactics-panel-portrait.small {
    width: 46px;
    height: 46px;
  }

  .tactics-unit-heading {
    margin-bottom: 3px;
  }

  .tactics-unit-heading strong {
    font-size: 0.82rem;
  }

  .tactics-unit-heading small,
  .tactics-unit-heading em {
    font-size: 0.64rem;
  }

  .tactics-stat-row {
    grid-template-columns: 22px minmax(56px, 1fr) 44px;
    gap: 5px;
    margin-top: 1px;
  }

  .tactics-stat-row span,
  .tactics-stat-row b {
    font-size: 0.62rem;
  }

  .tactics-unit-foot,
  .tactics-tile-line {
    display: none;
  }

  .tactics-log {
    max-height: 1.2em;
    margin-top: 3px;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.15;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tactics-right-dock,
  .tactics-right-dock.has-ability-detail {
    top: auto;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: 76px;
    gap: 0;
  }

  .tactics-actions,
  .tactics-right-dock.has-ability-detail .tactics-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    width: 100%;
    height: 100%;
    max-height: 100%;
    gap: 6px;
    padding: 7px;
    overflow: hidden auto;
  }

  .tactics-command-title,
  .tactics-target-preview,
  .tactics-ability-detail {
    grid-column: 1 / -1;
  }

  .tactics-command-title {
    font-size: 0.68rem;
    line-height: 1;
  }

  .tactics-actions button {
    min-height: 44px;
    padding: 7px 6px;
    font-size: 0.74rem;
    line-height: 1.08;
  }

  .tactics-actions button small {
    font-size: 0.64rem;
  }

  .tactics-layer:has(.tactics-actions button[data-tactics-category]) .tactics-right-dock,
  .tactics-layer:has(.tactics-actions button[data-tactics-ability]) .tactics-right-dock,
  .tactics-layer:has(.tactics-actions button[data-authority-ability]) .tactics-right-dock,
  .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-right-dock {
    height: min(238px, 34dvh);
  }

  .tactics-layer:has(.tactics-actions button[data-tactics-category]) .tactics-actions,
  .tactics-layer:has(.tactics-actions button[data-tactics-ability]) .tactics-actions,
  .tactics-layer:has(.tactics-actions button[data-authority-ability]) .tactics-actions,
  .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tactics-layer:has(.tactics-actions button[data-tactics-category]) .tactics-panel,
  .tactics-layer:has(.tactics-actions button[data-tactics-ability]) .tactics-panel,
  .tactics-layer:has(.tactics-actions button[data-authority-ability]) .tactics-panel,
  .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-panel {
    display: none;
  }

  .tactics-inspect-dock {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    top: calc(max(10px, env(safe-area-inset-top)) + 118px);
    bottom: auto;
    width: auto;
    max-height: 78px;
    padding: 7px 8px;
  }

  .tactics-inspect-dock .tactics-unit-panel.compact {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .tactics-inspect-dock .tactics-unit-panel.compact .tactics-unit-heading strong,
  .tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row span,
  .tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row b {
    font-size: 0.62rem;
  }

  .tactics-tutorial-banner {
    top: calc(max(10px, env(safe-area-inset-top)) + 122px);
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    min-height: 58px;
    transform: none;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .tactics-layer {
    position: fixed;
    inset: 0;
    border-radius: 0;
  }

  html.is-touch .tactics-topbar {
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    width: auto;
    height: 42px;
    justify-content: flex-start;
    gap: 6px;
  }

  html.is-touch .tactics-camera-button,
  html.is-touch .tactics-facing-button {
    width: 42px;
    height: 42px;
    font-size: 0.66rem;
  }

  html.is-touch .tactics-turn-order {
    top: max(10px, env(safe-area-inset-top));
    left: max(204px, calc(env(safe-area-inset-left) + 204px));
    right: max(156px, calc(env(safe-area-inset-right) + 156px));
    bottom: auto;
    width: auto;
    height: 42px;
    max-height: 42px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 38px;
    gap: 5px;
    padding: 2px 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  html.is-touch .tactics-turn-order::-webkit-scrollbar {
    display: none;
  }

  html.is-touch .tactics-turn-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-width: 0;
    min-height: 38px;
    scroll-snap-align: start;
  }

  html.is-touch .tactics-turn-card::before {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 2;
    min-width: 14px;
    padding: 2px;
    border-radius: 999px;
    color: #061018;
    background: #83e7ff;
    font-size: 0.56rem;
    line-height: 1;
    text-align: center;
    text-shadow: none;
  }

  html.is-touch .tactics-turn-card.enemy::before {
    color: #fff7f4;
    background: #c94858;
  }

  html.is-touch .tactics-turn-card.is-active::before {
    color: #211700;
    background: #ffdf72;
  }

  html.is-touch .tactics-turn-portrait {
    width: 36px;
    height: 36px;
  }

  html.is-touch .tactics-panel {
    width: clamp(176px, 24vw, 204px);
    max-height: 104px;
  }

  html.is-touch .tactics-unit-heading strong {
    font-size: 0.8rem;
  }

  html.is-touch .tactics-unit-heading em,
  html.is-touch .tactics-unit-foot span,
  html.is-touch .tactics-stat-row span,
  html.is-touch .tactics-stat-row b {
    font-size: 0.6rem;
  }

  html.is-touch .tactics-right-dock {
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: clamp(128px, 18vw, 148px);
    height: calc(100dvh - max(20px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 20px)));
    transition: none;
  }

  html.is-touch .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-turn-order {
    right: max(282px, calc(env(safe-area-inset-right) + 282px));
  }

  html.is-touch .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-tutorial-banner {
    right: max(290px, calc(env(safe-area-inset-right) + 290px));
  }

  html.is-touch .tactics-actions button {
    min-height: 42px;
    font-size: 0.7rem;
  }

  html.is-touch .tactics-actions button small {
    font-size: 0.6rem;
  }

  html.is-touch .tactics-inspect-dock {
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 112px);
    width: clamp(176px, 24vw, 204px);
    max-height: 92px;
  }

  html.is-touch .tactics-tutorial-banner {
    top: calc(max(10px, env(safe-area-inset-top)) + 50px);
    left: max(118px, calc(env(safe-area-inset-left) + 118px));
    right: max(166px, calc(env(safe-area-inset-right) + 166px));
  }
}

.debug-tile-tools {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 18;
  display: grid;
  justify-items: end;
  gap: 8px;
  pointer-events: none;
}

.debug-tile-tools.dock-left {
  left: 18px;
  right: auto;
  justify-items: start;
}

.debug-tile-tools.dock-center {
  left: 50%;
  right: auto;
  justify-items: center;
  transform: translateX(-50%);
}

.debug-tile-toolbar {
  display: grid;
  grid-template-columns: 32px auto 32px;
  gap: 6px;
  pointer-events: auto;
}

.debug-tile-tools button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  letter-spacing: 0;
  pointer-events: auto;
}

.debug-tile-dock {
  width: 32px;
  padding: 0;
  font-size: 0.78rem;
}

.debug-tile-toggle {
  background: linear-gradient(180deg, rgba(42, 54, 82, 0.92), rgba(15, 20, 32, 0.94));
  border-color: rgba(127, 231, 255, 0.34);
}

.debug-tile-tools.is-open .debug-tile-toggle {
  color: #071018;
  background: linear-gradient(180deg, #8ff0ff, #55c9df);
  border-color: rgba(255, 255, 255, 0.65);
}

.debug-tile-panel {
  width: min(430px, calc(100vw - 44px));
  max-height: min(74vh, calc(100vh - 150px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  display: grid;
  gap: 8px;
  color: #f6fbff;
  background:
    radial-gradient(140% 80% at 50% 0%, rgba(255, 255, 255, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(18, 25, 40, 0.82), rgba(7, 10, 18, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  pointer-events: auto;
}

.debug-tile-panel[hidden] { display: none; }

.debug-tile-readout {
  min-height: 26px;
  padding: 6px 8px;
  border-radius: 7px;
  color: rgba(246, 251, 255, 0.86);
  background: rgba(5, 8, 14, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  font-weight: 800;
}

.debug-tile-actions,
.debug-tile-file-actions {
  display: grid;
  gap: 6px;
}

.debug-tile-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.debug-tile-file-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.debug-mobile-actions { display: none; }

.debug-tile-actions [data-debug-mark="grass"] { border-color: rgba(125, 255, 138, 0.5); }
.debug-tile-actions [data-debug-mark="noGrass"] { border-color: rgba(190, 178, 255, 0.58); }
.debug-tile-actions [data-debug-mark="block"] { border-color: rgba(255, 118, 118, 0.55); }
.debug-tile-actions [data-debug-mark="open"] { border-color: rgba(255, 230, 109, 0.55); }
.debug-tile-actions [data-debug-mark="water"] { border-color: rgba(103, 220, 255, 0.55); }
.debug-tile-actions [data-debug-mark="dry"] { border-color: rgba(244, 199, 123, 0.55); }
.debug-tile-actions [data-debug-move="npc"] { border-color: rgba(205, 139, 255, 0.62); }
.debug-tile-actions [data-debug-move="gate"] { border-color: rgba(105, 255, 224, 0.62); }
.debug-tile-actions [data-debug-move="gateCopy"] { border-color: rgba(124, 231, 255, 0.66); }
.debug-tile-actions [data-debug-move="object"] { border-color: rgba(255, 190, 93, 0.66); }
.debug-tile-actions [data-debug-erase="erase"] { border-color: rgba(255, 255, 255, 0.7); }

.debug-tile-tools button.is-recording,
.battle-bug-btn.is-recording {
  color: #fff;
  background: linear-gradient(180deg, #f25d65, #a81523);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 0 2px rgba(255, 92, 105, 0.22), 0 12px 26px rgba(0, 0, 0, 0.35);
  animation: debugBugRecordPulse 0.86s ease-in-out infinite;
}

#debugBugBtn,
#debugMobileBugBtn,
.battle-bug-btn {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

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

.debug-bug-card {
  width: min(560px, calc(100vw - 32px));
}

.debug-bug-card p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.debug-bug-card label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.debug-bug-card label span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 900;
}

.debug-bug-card input,
.debug-bug-card textarea {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: rgba(4, 8, 16, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.debug-bug-card textarea {
  resize: vertical;
  min-height: 150px;
  line-height: 1.42;
}

.debug-bug-card input:focus,
.debug-bug-card textarea:focus {
  border-color: rgba(127, 231, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(127, 231, 255, 0.16);
}

.debug-bug-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.debug-bug-actions button {
  min-height: 38px;
  padding: 8px 14px;
}

.debug-save-card {
  width: min(500px, calc(100vw - 32px));
}

.debug-save-card .debug-bug-actions button[disabled] {
  cursor: wait;
  opacity: 0.56;
}

.heartroot-review-card {
  width: min(940px, calc(100vw - 32px));
}

.heartroot-review-card > p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.heartroot-review-section {
  margin-top: 12px;
}

.heartroot-review-section h3 {
  margin: 0 0 7px;
  color: rgba(201, 234, 255, 0.78);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.heartroot-review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.heartroot-review-grid button {
  min-height: 42px;
  padding: 9px 10px;
  text-align: left;
  white-space: normal;
}

@media (max-width: 760px) {
  .heartroot-review-grid {
    grid-template-columns: 1fr;
  }
}

.debug-tile-actions button.is-marked,
.debug-tile-actions button.is-pending {
  color: #071018;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.debug-tile-actions button.is-selected {
  color: #071018;
  font-weight: 900;
  border-color: #ffffff;
  background: linear-gradient(180deg, #ffffff, #bfe9ff);
  box-shadow:
    0 0 0 3px rgba(127, 231, 255, 0.65),
    0 0 22px rgba(127, 231, 255, 0.55);
}

.debug-tile-actions [data-debug-mark="grass"].is-marked { background: linear-gradient(180deg, #a7ffad, #65de74); }
.debug-tile-actions [data-debug-mark="noGrass"].is-marked { background: linear-gradient(180deg, #d2c7ff, #9f8cff); }
.debug-tile-actions [data-debug-mark="block"].is-marked { background: linear-gradient(180deg, #ffaaa5, #ef6767); }
.debug-tile-actions [data-debug-mark="open"].is-marked { background: linear-gradient(180deg, #fff19a, #e7c74c); }
.debug-tile-actions [data-debug-mark="water"].is-marked { background: linear-gradient(180deg, #a6f2ff, #54cbe6); }
.debug-tile-actions [data-debug-mark="dry"].is-marked { background: linear-gradient(180deg, #ffdca3, #dfad5c); }
.debug-tile-actions [data-debug-move="npc"].is-pending { background: linear-gradient(180deg, #ddb4ff, #b36df0); }
.debug-tile-actions [data-debug-move="gate"].is-pending { background: linear-gradient(180deg, #9effed, #51d8c5); }
.debug-tile-actions [data-debug-move="gateCopy"].is-pending { background: linear-gradient(180deg, #b7f4ff, #63c8f3); }
.debug-tile-actions [data-debug-move="object"].is-pending { background: linear-gradient(180deg, #ffd690, #e49a37); }
.debug-tile-actions [data-debug-erase="erase"].is-selected {
  color: #fff;
  background: linear-gradient(180deg, #ff8585, #c22323);
  box-shadow: 0 0 0 3px rgba(255, 118, 118, 0.7), 0 0 22px rgba(255, 90, 90, 0.5);
}

/* A picked Move/Copy source pulses on the tool button too, so the two-click
   state is obvious even without looking at the canvas. */
.debug-tile-actions button.is-pending {
  animation: debug-tool-pending-pulse 1.1s ease-in-out infinite;
}

@keyframes debug-tool-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 12px rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.28), 0 0 26px rgba(255, 255, 255, 0.6); }
}

.encounter-transition {
  --enc-a: #ffe56a;
  --enc-b: #5bd36b;
  --enc-glow: rgba(255, 229, 106, 0.56);
  position: absolute;
  inset: 10px;
  z-index: 12;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  /* stays see-through: the world darkens via the closing iris (::after) */
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(4, 6, 12, 0.42));
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.45);
}

.encounter-transition[data-terrain="water"] {
  --enc-a: #77ddff;
  --enc-b: #2f86ff;
  --enc-glow: rgba(77, 195, 255, 0.58);
}

.encounter-transition[data-terrain="safari"] {
  --enc-a: #fff36b;
  --enc-b: #41c978;
  --enc-glow: rgba(133, 232, 110, 0.58);
}

.encounter-transition.holo,
.encounter-transition.shiny {
  --enc-a: #fff7a8;
  --enc-b: #ff9ff3;
  --enc-glow: rgba(255, 236, 142, 0.72);
}

.encounter-transition.black-holo {
  --enc-a: #ffffff;
  --enc-b: #05060a;
  --enc-glow: rgba(255, 255, 255, 0.82);
}

.encounter-transition.is-playing {
  animation: encounter-shell 1060ms cubic-bezier(0.2, 0.75, 0.18, 1) both;
}

/* Beat 1 - alert ping: one clean white pulse where the danger registers. */
.encounter-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92), var(--enc-glow) 16%, transparent 42%);
  opacity: 0;
}

.encounter-transition.is-playing::before {
  animation: encounter-ping 200ms ease-out both;
}

/* Beat 3 - iris: the world closes to a glowing aperture around the center.
   --enc-iris is registered below so the gradient stop itself animates. */
.encounter-transition::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    transparent calc(var(--enc-iris) - 4%),
    var(--enc-glow) calc(var(--enc-iris) - 1.2%),
    rgba(4, 6, 12, 0.95) calc(var(--enc-iris) + 0.8%));
  opacity: 0;
}

.encounter-transition.is-playing::after {
  opacity: 1;
  animation: encounter-iris 460ms cubic-bezier(0.55, 0.06, 0.68, 0.94) 300ms both;
}

@property --enc-iris {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 118%;
}

.encounter-transition__stripes,
.encounter-transition__ring,
.encounter-transition__slash,
.encounter-transition__sigil {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

/* Beat 2 - speed rush: thin light streaks whip across, alternating sides. */
.encounter-transition__stripes {
  inset: 0;
  left: 0;
  top: 0;
  overflow: hidden;
}

.encounter-transition__stripes span {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 6px;
  border-radius: 999px;
  transform: translateX(-115%) skewX(-14deg);
  background: linear-gradient(90deg, transparent 6%, rgba(255, 255, 255, 0.98) 38%, var(--enc-a) 62%, transparent 90%);
  box-shadow: 0 0 16px var(--enc-glow), 0 0 34px var(--enc-glow);
  opacity: 0;
}

.encounter-transition__stripes span:nth-child(1) { top: 12%; height: 5px; }
.encounter-transition__stripes span:nth-child(2) { top: 31%; height: 8px; }
.encounter-transition__stripes span:nth-child(3) { top: 50%; height: 5px; }
.encounter-transition__stripes span:nth-child(4) { top: 68%; height: 8px; }
.encounter-transition__stripes span:nth-child(5) { top: 85%; height: 5px; }
.encounter-transition.is-playing .encounter-transition__stripes span {
  animation: encounter-streak 400ms cubic-bezier(0.24, 0.5, 0.3, 1) 60ms both;
}
.encounter-transition.is-playing .encounter-transition__stripes span:nth-child(even) {
  animation-name: encounter-streak-rev;
  background: linear-gradient(270deg, transparent 6%, rgba(255, 255, 255, 0.98) 38%, var(--enc-b) 62%, transparent 90%);
}
.encounter-transition.is-playing .encounter-transition__stripes span:nth-child(2) { animation-delay: 120ms; }
.encounter-transition.is-playing .encounter-transition__stripes span:nth-child(3) { animation-delay: 180ms; }
.encounter-transition.is-playing .encounter-transition__stripes span:nth-child(4) { animation-delay: 240ms; }
.encounter-transition.is-playing .encounter-transition__stripes span:nth-child(5) { animation-delay: 300ms; }

/* Beat 1b - shockwave ring racing out from the ping */
.encounter-transition__ring {
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 26px var(--enc-glow), inset 0 0 20px var(--enc-glow);
  opacity: 0;
}

.encounter-transition.is-playing .encounter-transition__ring {
  animation: encounter-shockwave 340ms cubic-bezier(0.16, 0.7, 0.3, 1) 30ms both;
}

/* Beat 2b - one clean diagonal beam through the middle of the rush */
.encounter-transition__slash {
  left: 6%;
  right: 6%;
  width: auto;
  height: 6px;
  margin: -3px 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff 34%, var(--enc-a) 58%, transparent);
  box-shadow: 0 0 22px var(--enc-glow);
  opacity: 0;
}

.encounter-transition.is-playing .encounter-transition__slash {
  animation: encounter-beam 240ms cubic-bezier(0.2, 0.65, 0.25, 1) 210ms both;
}

/* Beat 4 - ignition spark: a bright core lights inside the closed iris right
   before the cut to battle. */
.encounter-transition__sigil {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 12%, var(--enc-a) 13% 22%, transparent 26%),
    conic-gradient(from 0deg,
      transparent 0 20deg, rgba(255, 255, 255, 0.95) 22deg 24deg, transparent 26deg 110deg,
      rgba(255, 255, 255, 0.95) 112deg 114deg, transparent 116deg 200deg,
      rgba(255, 255, 255, 0.95) 202deg 204deg, transparent 206deg 290deg,
      rgba(255, 255, 255, 0.95) 292deg 294deg, transparent 296deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 20px var(--enc-glow)) drop-shadow(0 0 40px var(--enc-glow));
  opacity: 0;
}

.encounter-transition.is-playing .encounter-transition__sigil {
  animation: encounter-ignite 280ms cubic-bezier(0.2, 0.9, 0.3, 1) 420ms both;
}

@keyframes encounter-shell {
  0% { opacity: 0; }
  6%, 100% { opacity: 1; }
}
@keyframes encounter-ping {
  0% { opacity: 0; transform: scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes encounter-iris {
  0% { --enc-iris: 118%; }
  100% { --enc-iris: 0%; }
}
@keyframes encounter-shockwave {
  0% { opacity: 0; transform: scale(0.16); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.3); }
}
@keyframes encounter-streak {
  0% { opacity: 0; transform: translateX(-115%) skewX(-14deg); }
  22%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translateX(115%) skewX(-14deg); }
}
@keyframes encounter-streak-rev {
  0% { opacity: 0; transform: translateX(115%) skewX(14deg); }
  22%, 72% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-115%) skewX(14deg); }
}
@keyframes encounter-beam {
  0% { opacity: 0; transform: rotate(-24deg) scaleX(0.05); }
  40% { opacity: 1; transform: rotate(-24deg) scaleX(1); }
  100% { opacity: 0; transform: rotate(-24deg) scaleX(1.2); }
}
@keyframes encounter-ignite {
  /* a brief spark as the iris closes - it hands the center over to the
     silhouette, so it fades back out instead of holding */
  0% { opacity: 0; transform: scale(0.15) rotate(-40deg); }
  45% { opacity: 1; transform: scale(1.1) rotate(6deg); }
  100% { opacity: 0; transform: scale(0.7) rotate(20deg); }
}

/* Malraux tank detonation: one hard camera kick across the whole stage.
   Uses the standalone `translate` property so it composes with (and cannot
   break) the mobile canvas transform. */
.playfield.devils-blast-quake {
  animation: devils-blast-quake 640ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

@keyframes devils-blast-quake {
  0% { translate: 0 0; }
  8% { translate: -8px 6px; }
  18% { translate: 9px -7px; }
  28% { translate: -7px -5px; }
  40% { translate: 6px 5px; }
  54% { translate: -4px 3px; }
  70% { translate: 3px -2px; }
  85% { translate: -2px 1px; }
  100% { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .playfield.devils-blast-quake { animation: none; }
}

/* ---- dynamic layer: terrain debris + the wild monster's silhouette ------ */
.encounter-transition__dyn {
  position: absolute;
  inset: 0;
  z-index: 2; /* above the iris (::after) - the silhouette floats on the dark */
  pointer-events: none;
}

/* debris whipping through the rush - leaves/droplets/sand by terrain color */
.enc-particles span {
  position: absolute;
  top: calc(6% + var(--x, 50) * 0.86%);
  left: -6%;
  width: calc(7px + var(--s, 0) * 1px);
  height: calc(5px + var(--s, 0) * 1px);
  border-radius: 62% 38% 55% 45%;
  background: var(--enc-a);
  box-shadow: 0 0 8px var(--enc-glow);
  opacity: 0;
  animation: enc-particle 480ms cubic-bezier(0.22, 0.5, 0.3, 1) calc(70ms + var(--d, 0) * 1ms) both;
}

.enc-particles span:nth-child(even) {
  left: auto;
  right: -6%;
  background: var(--enc-b);
  animation-name: enc-particle-rev;
}

@keyframes enc-particle {
  0% { opacity: 0; transform: translateX(0) rotate(0turn) scale(0.7); }
  14% { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(112vw) rotate(2.3turn) scale(1.05); }
}

@keyframes enc-particle-rev {
  0% { opacity: 0; transform: translateX(0) rotate(0turn) scale(0.7); }
  14% { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(-112vw) rotate(-2.3turn) scale(1.05); }
}

/* the wild monster slams in as a pure silhouette inside the closing iris */
.enc-mon-wrap {
  position: absolute;
  inset: 0 0 6% 0;
  display: grid;
  place-items: center;
}

.enc-mon {
  max-width: 42%;
  max-height: 52%;
  object-fit: contain;
  opacity: 0;
  filter: brightness(0) drop-shadow(0 0 22px var(--enc-glow)) drop-shadow(0 0 46px var(--enc-glow));
  animation: enc-mon-slam 330ms cubic-bezier(0.2, 0.8, 0.26, 1.14) 460ms both;
}

/* holo encounters give the tease away on purpose - richer aura, brighter rim */
.encounter-transition.holo .enc-mon {
  filter: brightness(0) drop-shadow(0 0 18px #fff7a8) drop-shadow(0 0 40px var(--enc-glow)) drop-shadow(0 0 64px rgba(255, 159, 243, 0.55));
}

.encounter-transition.black-holo .enc-mon {
  filter: brightness(0) drop-shadow(0 0 14px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 34px rgba(255, 255, 255, 0.6));
}

@keyframes enc-mon-slam {
  0% { opacity: 0; transform: scale(1.75); }
  62% { opacity: 1; transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* final light pop right before the cut to battle */
.enc-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 46%, #ffffff, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.4));
  opacity: 0;
  animation: enc-flash-pop 210ms ease-in 880ms both;
}

@keyframes enc-flash-pop {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 0.96; }
}

/* ===== Legendary encounter cinematic ====================================
   Built by playLegendEncounterCinematic() per legend NPC. The overlay owns
   the playfield for ~2.6s: themed motif field, silhouette rise + reveal,
   name card, final flash. Tap anywhere to skip. data-motif picks the theme:
   storm / magma / blade / aeon / void / prism / ring. */
.legend-encounter {
  --la: #fff3c4;
  --lb: #ffd36a;
  --lglow: rgba(255, 230, 150, 0.6);
  position: absolute;
  inset: 10px;
  z-index: 13;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the mobile playfield is inset from the screen edges - go full-bleed there,
   just under #touchControls (15) so the stick and buttons stay visible */
html.is-touch .legend-encounter,
html.is-touch .encounter-transition {
  position: fixed;
  inset: 0;
  border-radius: 0;
  z-index: 14;
}

/* Phone landscape: the 4:3 map is a CENTER SLICE of the 16:9 overlay, so the
   default farthest-corner iris spends most of its close darkening the black
   pillarbox bars where nothing is visible. Pin the gradient reference to the
   map's own diagonal (~84vh) so the close reads across the VISIBLE picture. */
html.is-touch .encounter-transition::after {
  background: radial-gradient(circle 84vh at 50% 50%,
    transparent calc(var(--enc-iris) - 4%),
    var(--enc-glow) calc(var(--enc-iris) - 1.2%),
    rgba(4, 6, 12, 0.95) calc(var(--enc-iris) + 0.8%));
}

/* phone landscape is short: smaller legend, higher, and the skip hint moves
   away from the ☰/A cluster */
html.is-touch .legend-encounter .le-sprite-wrap { inset: 0 0 30% 0; }
html.is-touch .legend-encounter .le-sprite { max-height: 48%; }
html.is-touch .legend-encounter .le-title { bottom: 5%; }
html.is-touch .legend-encounter h2 { font-size: clamp(1.6rem, 9vh, 2.6rem); }
html.is-touch .legend-encounter .le-skip {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
  bottom: max(10px, env(safe-area-inset-bottom));
}

.legend-encounter .le-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 84%, color-mix(in srgb, var(--lb) 34%, transparent), transparent 58%),
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--la) 12%, transparent), transparent 52%),
    linear-gradient(180deg, rgba(2, 3, 6, 0.9), rgba(4, 6, 12, 0.98));
  animation: le-fade-in 650ms ease-out both;
}

.legend-encounter .le-flare,
.legend-encounter .le-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.legend-encounter .le-motif span { position: absolute; }

.legend-encounter .le-rings span {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 2px solid var(--la);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--lglow);
  opacity: 0;
  animation: le-ring-out 820ms cubic-bezier(0.16, 0.7, 0.3, 1) both;
}
.legend-encounter .le-rings span:nth-child(1) { animation-delay: 1030ms; }
.legend-encounter .le-rings span:nth-child(2) { animation-delay: 1170ms; }
.legend-encounter .le-rings span:nth-child(3) { animation-delay: 1310ms; }

.legend-encounter .le-sprite-wrap {
  position: absolute;
  inset: 0 0 18% 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* light core behind the silhouette - keeps the center alive even while the
   battle sprite is still decoding on a cold cache */
.legend-encounter .le-sprite-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vmin, 340px);
  height: min(46vmin, 340px);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--la) 48%, transparent),
    color-mix(in srgb, var(--lb) 22%, transparent) 48%,
    transparent 70%);
  filter: blur(2px);
  animation: le-core-breathe 2.6s ease-in-out infinite, le-fade-in 700ms ease-out 260ms both;
}

@keyframes le-core-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.09); }
}

/* Right-facing legend art (e.g. Glovemaw) mirrors so it fronts the title like
   every left-facing legend does. Flip the WRAP - the img's own keyframes own
   its transform. */
.legend-encounter.le-face-right .le-sprite-wrap { transform: scaleX(-1); }

.legend-encounter .le-sprite {
  max-width: 46%;
  max-height: 58%;
  object-fit: contain;
  filter: brightness(0) saturate(0) drop-shadow(0 0 30px var(--lglow)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6));
  animation:
    le-sprite-rise 900ms cubic-bezier(0.16, 0.8, 0.24, 1) 220ms both,
    le-sprite-reveal 800ms ease-out 1060ms both,
    le-sprite-idle 3.4s ease-in-out 1900ms infinite;
}

@keyframes le-sprite-rise {
  0% { opacity: 0; transform: translateY(14%) scale(0.82); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes le-sprite-reveal {
  0% { filter: brightness(0) saturate(0) drop-shadow(0 0 30px var(--lglow)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6)); }
  26% { filter: brightness(2.1) saturate(0.6) drop-shadow(0 0 44px var(--lglow)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6)); }
  100% { filter: brightness(1.06) saturate(1) drop-shadow(0 0 26px var(--lglow)) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6)); }
}
@keyframes le-sprite-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.6%) scale(1.008); }
}

.legend-encounter .le-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.legend-encounter .le-kicker {
  font-size: clamp(0.62rem, 1.6vw, 0.85rem);
  font-weight: 800;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--la);
  text-shadow: 0 0 16px var(--lglow);
  animation: le-fade-up 520ms ease-out 700ms both;
}

.legend-encounter h2 {
  margin: 0;
  font-size: clamp(1.9rem, 6vw, 3.4rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.05;
  text-shadow: 0 0 26px var(--lglow), 0 4px 18px rgba(0, 0, 0, 0.8);
  animation: le-title-in 720ms cubic-bezier(0.2, 0.9, 0.28, 1) 960ms both;
}

.legend-encounter .le-title p {
  margin: 0;
  font-size: clamp(0.78rem, 2vw, 1rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  animation: le-fade-up 520ms ease-out 1280ms both;
}

.legend-encounter .le-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, #ffffff, color-mix(in srgb, var(--la) 55%, #fff) 30%, rgba(255, 255, 255, 0.6) 62%, rgba(255, 255, 255, 0.3));
  opacity: 0;
  animation: le-flash-pop 480ms ease-in 2140ms both;
}

.legend-encounter .le-skip {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  animation: le-fade-up 420ms ease-out 950ms both;
}

@keyframes le-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes le-fade-up {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes le-title-in {
  0% { opacity: 0; transform: scale(1.16); filter: blur(7px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes le-ring-out {
  0% { opacity: 0; transform: scale(0.2); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes le-flash-pop {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- storm (Tempestide): driving rain + lightning flicker ---------------- */
.legend-encounter[data-motif="storm"] .le-motif span {
  top: -14%;
  left: calc(var(--x, 50) * 1%);
  width: 2px;
  height: calc(90px + var(--r, 0) * 9px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--la) 55%, rgba(255, 255, 255, 0.9));
  opacity: 0;
  animation: le-rain calc(600ms + var(--s, 0) * 70ms) linear calc(var(--d, 0) * -1ms) infinite;
}
@keyframes le-rain {
  0% { opacity: 0; transform: rotate(15deg) translateY(-12%); }
  10% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(15deg) translateY(140vh); }
}
.legend-encounter[data-motif="storm"] .le-flare {
  background: linear-gradient(180deg, rgba(198, 228, 255, 0.6), rgba(110, 165, 255, 0.2) 42%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: le-lightning 2.4s linear 350ms infinite;
}
@keyframes le-lightning {
  0%, 17%, 22%, 54%, 60%, 100% { opacity: 0; }
  18.5%, 20% { opacity: 0.95; }
  56%, 57.5% { opacity: 0.65; }
  58.5% { opacity: 0.2; }
}

/* --- magma (Cindercoil): rising embers over a breathing lava glow -------- */
.legend-encounter[data-motif="magma"] .le-motif span {
  bottom: -6%;
  left: calc(var(--x, 50) * 1%);
  width: calc(4px + var(--s, 0) * 1px);
  height: calc(4px + var(--s, 0) * 1px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6d8, var(--la) 55%, var(--lb));
  box-shadow: 0 0 12px var(--lglow);
  opacity: 0;
  animation: le-ember calc(1700ms + var(--r, 0) * 130ms) ease-out calc(var(--d, 0) * -2ms) infinite;
}
@keyframes le-ember {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--r, 0) * 2px - 16px), -64vh) scale(1.15); }
}
.legend-encounter[data-motif="magma"] .le-flare {
  background: linear-gradient(0deg, color-mix(in srgb, var(--lb) 55%, transparent), transparent 46%);
  mix-blend-mode: screen;
  animation: le-lava-breathe 1.7s ease-in-out infinite;
}
@keyframes le-lava-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* --- blade (Eclipsfang): cold moonlight, falling glints, crossing slashes - */
.legend-encounter[data-motif="blade"] .le-motif span {
  top: -8%;
  left: calc(var(--x, 50) * 1%);
  width: 3px;
  height: calc(12px + var(--s, 0) * 3px);
  clip-path: polygon(50% 0%, 100% 30%, 50% 100%, 0% 30%);
  background: linear-gradient(180deg, #ffffff, var(--lb));
  box-shadow: 0 0 10px var(--lglow);
  opacity: 0;
  animation: le-glint calc(2400ms + var(--r, 0) * 160ms) linear calc(var(--d, 0) * -2.4ms) infinite;
}
@keyframes le-glint {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  14% { opacity: 0.85; }
  86% { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(120vh) rotate(210deg); }
}
.legend-encounter[data-motif="blade"] .le-flare::before,
.legend-encounter[data-motif="blade"] .le-flare::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  top: 46%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff 46%, transparent);
  box-shadow: 0 0 26px var(--lglow);
  opacity: 0;
}
.legend-encounter[data-motif="blade"] .le-flare::before { animation: le-slash-a 640ms cubic-bezier(0.2, 0.7, 0.24, 1) 980ms both; }
.legend-encounter[data-motif="blade"] .le-flare::after { animation: le-slash-b 640ms cubic-bezier(0.2, 0.7, 0.24, 1) 1200ms both; }
@keyframes le-slash-a {
  0% { opacity: 0; transform: rotate(22deg) translateX(-44%) scaleX(0.25); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: rotate(22deg) translateX(44%) scaleX(1); }
}
@keyframes le-slash-b {
  0% { opacity: 0; transform: rotate(-22deg) translateX(44%) scaleX(0.25); }
  32% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-22deg) translateX(-44%) scaleX(1); }
}

/* --- ring: the prizefighter's walk-in - rising arena sparks + a 1-2 combo -- */
.legend-encounter[data-motif="ring"] .le-motif span {
  bottom: -6%;
  left: calc(var(--x, 50) * 1%);
  width: calc(3px + var(--s, 0) * 1px);
  height: calc(3px + var(--s, 0) * 1px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8 20%, var(--la) 55%, transparent 75%);
  box-shadow: 0 0 10px var(--lglow);
  opacity: 0;
  animation: le-corner-spark calc(2300ms + var(--r, 0) * 150ms) linear calc(var(--d, 0) * -2.3ms) infinite;
}
@keyframes le-corner-spark {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 0.9; }
  78% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(14px, -108vh); }
}
.legend-encounter[data-motif="ring"] .le-flare::before,
.legend-encounter[data-motif="ring"] .le-flare::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 45%;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff1c2 42%, var(--la) 54%, transparent);
  box-shadow: 0 0 30px var(--lglow);
  opacity: 0;
}
.legend-encounter[data-motif="ring"] .le-flare::before { animation: le-jab-a 520ms cubic-bezier(0.3, 0.8, 0.2, 1) 980ms both; }
.legend-encounter[data-motif="ring"] .le-flare::after { animation: le-jab-b 560ms cubic-bezier(0.3, 0.8, 0.2, 1) 1210ms both; }
@keyframes le-jab-a {
  0% { opacity: 0; transform: rotate(6deg) translateX(-58%) scaleX(0.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(6deg) translateX(36%) scaleX(1); }
}
@keyframes le-jab-b {
  0% { opacity: 0; transform: rotate(-5deg) translateX(58%) scaleX(0.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(-5deg) translateX(-36%) scaleX(1); }
}

/* --- aeon: columns of first light + a breathing halo ---------------------- */
.legend-encounter[data-motif="aeon"] .le-motif span {
  top: -15%;
  left: calc(var(--x, 50) * 1%);
  width: calc(5px + var(--s, 0) * 2px);
  height: 130%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--la) 55%, transparent) 30% 70%, transparent);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: le-column calc(2600ms + var(--r, 0) * 140ms) ease-in-out calc(var(--d, 0) * -3ms) infinite;
}
@keyframes le-column {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.55; }
}
.legend-encounter[data-motif="aeon"] .le-flare {
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--la) 45%, transparent), transparent 46%);
  mix-blend-mode: screen;
  animation: le-halo-breathe 2.8s ease-in-out infinite;
}
@keyframes le-halo-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.07); }
}

/* --- void (Umbrael): motes spiral INTO the fallen one --------------------- */
.legend-encounter[data-motif="void"] .le-motif span {
  left: 50%;
  top: 44%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--la);
  box-shadow: 0 0 10px var(--lglow);
  opacity: 0;
  --ang: calc(var(--x, 0) * 3.75deg);
  animation: le-voidpull calc(1400ms + var(--r, 0) * 100ms) ease-in calc(var(--d, 0) * -1.6ms) infinite;
}
@keyframes le-voidpull {
  0% { opacity: 0; transform: rotate(var(--ang)) translateX(48vmin) scale(1); }
  16% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(calc(var(--ang) + 130deg)) translateX(1.5vmin) scale(0.15); }
}
.legend-encounter[data-motif="void"] .le-flare {
  inset: -30%;
  background: conic-gradient(from 0deg at 50% 47%,
    transparent, color-mix(in srgb, var(--lb) 60%, transparent) 22%, transparent 40%,
    color-mix(in srgb, var(--la) 25%, transparent) 62%, transparent 80%);
  opacity: 0.5;
  animation: le-void-swirl 3.4s linear infinite;
}
@keyframes le-void-swirl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.legend-encounter[data-motif="void"] .le-bg {
  background:
    radial-gradient(circle at 50% 44%, rgba(24, 8, 44, 0.6), transparent 40%),
    linear-gradient(180deg, rgba(1, 1, 3, 0.95), rgba(2, 2, 6, 0.99));
}

/* --- prism (Prismarch): four-affinity facets orbit the sovereign ---------- */
.legend-encounter[data-motif="prism"] .le-motif span {
  left: 50%;
  top: 44%;
  width: calc(9px + var(--s, 0) * 2px);
  height: calc(13px + var(--s, 0) * 3px);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  opacity: 0;
  --ang: calc(var(--x, 0) * 3.75deg);
  animation: le-facet calc(3200ms + var(--r, 0) * 160ms) linear calc(var(--d, 0) * -3.2ms) infinite;
}
.legend-encounter[data-motif="prism"] .le-motif span:nth-child(4n) { background: #ffe25c; box-shadow: 0 0 12px rgba(255, 226, 92, 0.8); }
.legend-encounter[data-motif="prism"] .le-motif span:nth-child(4n + 1) { background: #ffffff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
.legend-encounter[data-motif="prism"] .le-motif span:nth-child(4n + 2) { background: #ff8b4a; box-shadow: 0 0 12px rgba(255, 139, 74, 0.8); }
.legend-encounter[data-motif="prism"] .le-motif span:nth-child(4n + 3) { background: #8ee6ff; box-shadow: 0 0 12px rgba(142, 230, 255, 0.8); }
@keyframes le-facet {
  0% { opacity: 0; transform: rotate(var(--ang)) translateX(34vmin) rotate(0deg) scale(0.8); }
  12% { opacity: 0.95; }
  88% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(calc(var(--ang) + 300deg)) translateX(30vmin) rotate(340deg) scale(1); }
}
.legend-encounter[data-motif="prism"] .le-flare {
  inset: -25%;
  background: conic-gradient(from 90deg at 50% 46%,
    rgba(255, 226, 92, 0.16), rgba(255, 255, 255, 0.14), rgba(255, 139, 74, 0.16),
    rgba(142, 230, 255, 0.16), rgba(255, 226, 92, 0.16));
  mix-blend-mode: screen;
  animation: le-prism-turn 5s linear infinite;
}
@keyframes le-prism-turn {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.toast {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-weight: 600;
  background: linear-gradient(180deg, rgba(28, 37, 58, 0.64), rgba(12, 17, 28, 0.74));
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  animation: toast-in 0.28s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden { display: none !important; }

.side-panel {
  min-width: 0;
  max-height: calc(100vh - 52px);
  display: grid;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.brand,
.status-grid,
.party-panel,
.actions,
.dpad,
.journal {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* Polished-glass specular sheen — identical treatment to the battle cards */
.brand::after,
.status-grid::after,
.party-panel::after,
.actions::after,
.dpad::after,
.journal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--glass-sheen);
}

.brand,
.party-panel,
.journal { padding: 18px; }

.brand {
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(155, 135, 240, 0.32), transparent 60%),
    var(--glass-bg);
}

.brand h1,
.party-panel h2,
.journal h2 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.brand h1 {
  font-size: clamp(2rem, 4.6vw, 3rem);
  font-weight: 900;
  background: linear-gradient(135deg, #fff, #c7d2e6 55%, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
}

.status-grid div {
  min-width: 0;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px 8px;
  text-align: center;
}

.status-grid span,
.combat-card small,
.monster-meta {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 1.18rem;
  font-weight: 800;
  color: #fff;
}

#money {
  color: #ffe08a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#money::before {
  content: "";
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0 8%, transparent 9%),
    conic-gradient(from 18deg, #57e8ff, #9b6cff, #ffd66a, #4fd4b7, #57e8ff);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.7),
    0 0 14px rgba(93, 220, 255, 0.42);
}
#seal { font-size: 1rem; color: var(--teal); }

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.panel-title h2 { font-size: 1.25rem; font-weight: 800; }

.panel-title button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.82rem;
}

.party-list { display: grid; gap: 9px; }

.party-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  position: relative;
  min-height: 80px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.party-item:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.18); }

.party-item.is-holding-lead::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255, 213, 107, 0.96);
  border-radius: inherit;
  pointer-events: none;
  animation: partyLeadHoldRing 520ms linear forwards;
}

@keyframes partyLeadHoldRing {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.55;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.party-item.lead {
  border-color: rgba(240, 180, 64, 0.55);
  background: linear-gradient(180deg, rgba(240, 180, 64, 0.18), rgba(240, 180, 64, 0.03));
  box-shadow: inset 3px 0 0 var(--gold), 0 0 0 1px rgba(240, 180, 64, 0.18);
}

.party-item img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.side-panel img,
.side-panel button,
#modal img,
#modal button,
.party-monster-image {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.party-monster-image {
  cursor: pointer;
  touch-action: manipulation;
}

.party-monster-image.species-sylvopup.stage-0,
.party-monster-image.species-sylvopup.stage-3 {
  transform: scaleX(-1);
}

.party-monster-image.species-aethlet.stage-1,
.party-monster-image.species-aethletfire.stage-1,
.party-monster-image.species-aethletstone.stage-1,
.party-monster-image.species-aethletastral.stage-1 {
  scale: 1.4;
}

.party-monster-image:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.party-item strong,
.combat-name strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.party-info { min-width: 0; }

.party-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.monster-meta { text-transform: none; letter-spacing: 0.02em; }

.lead-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  color: #2a1d05;
  background: linear-gradient(180deg, #ffd56b, var(--gold));
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mini-hp {
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mini-hp span,
.hp-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #5fe39a, var(--ok-deep));
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-exp {
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
}

.mini-exp span {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #7fe7ff, #2f8fd8);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.party-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.party-controls button {
  min-height: 30px;
  padding: 0 6px;
  border-radius: 7px;
  font-size: 0.72rem;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
}

.dpad button {
  min-height: 50px;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink-soft);
}

.dpad button:hover { color: #fff; }
.dpad [data-dir="up"] { grid-column: 2; }
.dpad [data-dir="left"] { grid-column: 1; }
.dpad [data-dir="down"] { grid-column: 2; }
.dpad [data-dir="right"] { grid-column: 3; }

.journal {
  background:
    radial-gradient(360px 120px at 0% 0%, rgba(67, 197, 176, 0.22), transparent 62%),
    var(--glass-bg);
}

.journal h2 { font-size: 1.05rem; color: var(--teal); }

.journal p {
  margin: 9px 0 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---- Modals -------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(20, 26, 40, 0.7), rgba(6, 8, 14, 0.86));
  backdrop-filter: blur(5px);
  animation: toast-in 0.22s ease;
}

/* The fail-closed Online world lock speaks the same paper language as the
   entry gate and landing: ink frame at the edges, serif title, quiet copy.
   Its DOM and copy are watchdog-pinned (publicOnlineGameBoundary
   PresentationIntact compares markup verbatim) - this is style only. */
.modal.mongame-public-online-game-lock {
  padding: 24px;
  color: #17160f;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
  cursor: progress;
}

.modal.mongame-public-online-game-lock::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("assets/ui/title-home-overlay.webp?v=mva-online-title-1") center / cover no-repeat;
  opacity: 0.88;
  -webkit-mask-image: radial-gradient(ellipse 36% 34% at 50% 46%, transparent 0 66%, rgba(0, 0, 0, 0.24) 77%, #000 100%);
  mask-image: radial-gradient(ellipse 36% 34% at 50% 46%, transparent 0 66%, rgba(0, 0, 0, 0.24) 77%, #000 100%);
}

.modal.mongame-public-online-game-lock > .modal-card {
  position: relative;
  width: min(620px, 100%);
  max-height: none;
  overflow: visible;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.mongame-public-online-game-lock > .modal-card h1 {
  margin: 0;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0;
  opacity: 0.8;
  text-wrap: balance;
}

.modal.mongame-public-online-game-lock > .modal-card p {
  margin: 0;
  max-width: 52ch;
  color: #66635d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (orientation: landscape) and (max-height: 560px) {
  .modal.mongame-public-online-game-lock > .modal-card h1 {
    font-size: clamp(1.7rem, 9dvh, 2.4rem);
  }

  .modal.mongame-public-online-game-lock > .modal-card p {
    font-size: 0.88rem;
  }
}

.mongame-public-online-game-lock--sync {
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: progress;
}

.mongame-public-online-game-sync-indicator {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(238, 247, 255, 0.68);
  font-size: clamp(0.75rem, 1.8vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(3, 8, 15, 0.55);
  user-select: none;
  animation: mongame-public-online-sync-indicator-reveal 140ms ease-out 420ms forwards;
}

@keyframes mongame-public-online-sync-indicator-reveal {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mongame-public-online-game-sync-indicator {
    animation-duration: 1ms;
  }
}

/* The battle is an overlay; the modal (incl. the forced-switch prompt when a
   monster faints) must always sit above it so it stays usable. */
.battle { z-index: 20; }
.modal { z-index: 40; }

.modal-card,
.shop-card {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  background:
    radial-gradient(130% 80% at 50% -8%, rgba(255, 255, 255, 0.10), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-edge-top);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.modal.battle-switch-modal {
  width: 100vw;
  min-height: 100dvh;
  padding: 0;
  place-items: center;
  place-content: center;
  background:
    radial-gradient(circle at 50% 46%, rgba(122, 210, 255, 0.12), transparent 42%),
    rgba(4, 7, 13, 0.22);
  -webkit-backdrop-filter: blur(2px) saturate(1.08);
  backdrop-filter: blur(2px) saturate(1.08);
}

.battle-switch-card {
  position: relative;
  width: min(780px, calc(100vw - 56px));
  max-height: min(420px, calc(100dvh - 56px));
  overflow: visible;
  padding: clamp(12px, 2.2vw, 18px);
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(24, 31, 50, 0.54), rgba(9, 13, 23, 0.48));
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.36);
  border-radius: 18px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

.battle-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: clamp(9px, 1.5vw, 14px);
}

.battle-switch-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 10px 10px 18px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.32);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.battle-switch-tile:hover:not(:disabled),
.battle-switch-tile:focus-visible:not(:disabled) {
  transform: translateY(-3px);
  border-color: rgba(127, 231, 255, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 38px rgba(0, 0, 0, 0.36),
    0 0 0 2px rgba(127, 231, 255, 0.24);
  outline: none;
}

.battle-switch-tile:disabled {
  cursor: default;
}

.battle-switch-tile.is-active {
  border-color: rgba(240, 180, 64, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(240, 180, 64, 0.22),
    0 0 0 2px rgba(240, 180, 64, 0.14),
    0 12px 26px rgba(0, 0, 0, 0.28);
}

.battle-switch-tile.is-fainted {
  filter: saturate(0.38) brightness(0.72);
  opacity: 0.62;
}

.battle-switch-tile.is-unavailable {
  filter: saturate(0.42) brightness(0.62);
  opacity: 0.56;
}

.battle-switch-art {
  position: absolute;
  inset: 7px 8px 24px;
  display: grid;
  place-items: center;
}

.battle-switch-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.48));
}

.battle-switch-name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(234, 240, 247, 0.9);
  font-size: clamp(0.64rem, 1.35vw, 0.78rem);
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.battle-switch-note {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 7px;
  z-index: 2;
  overflow: hidden;
  color: #ffdb82;
  font-size: 0.54rem;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
}

.battle-switch-hp {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
}

.battle-switch-hp span {
  display: block;
  width: var(--hp, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2a9d63, #5fe39a);
}

.battle-switch-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 1.22rem;
  line-height: 1;
  color: #f7fbff;
  background: linear-gradient(180deg, rgba(44, 54, 82, 0.9), rgba(14, 18, 30, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.modal-card h2,
.shop-card h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3.6vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.modal-card p,
.shop-card p {
  color: var(--ink-soft);
  line-height: 1.55;
}

/* In-world NPC speech bubble — replaces the dialogue modal so the world
   stays visible (no dark backdrop) and the speaker feels like they're talking. */
#speechBubble.speech-overlay { position:fixed; inset:0; z-index:60; pointer-events:none;
  display:block; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; padding:0; }
#speechBubble.hidden { display:none; }
#speechBubble .speech-bubble { position:fixed; pointer-events:auto; width:min(440px,86vw);
  background: radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,0.12), transparent 60%), var(--glass-bg);
  border:1px solid var(--glass-edge); border-top-color:var(--glass-edge-top); border-radius:18px;
  padding:14px 16px 12px; box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  transform-origin: 50% 100%;
  /* standalone translate/scale so the entrance can't fight positionSpeech's
     inline transform reset */
  animation: speech-bubble-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.14) both; }

@keyframes speech-bubble-in {
  0% { opacity: 0; translate: 0 10px; scale: 0.96; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* Animated exit: scripted flows (e.g. the Echo Wall) close the bubble with a
   real beat before their follow-up UI opens, instead of a same-frame swap. */
#speechBubble .speech-bubble.speech-bubble--closing {
  animation: speech-bubble-out 220ms cubic-bezier(0.4, 0, 0.7, 0.4) both;
  pointer-events: none;
}

@keyframes speech-bubble-out {
  0% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 8px; scale: 0.96; }
}

/* Type-on: the action buttons hold back until the line lands, and a soft
   gold caret blinks at the write head. */
#speechBubble .speech-bubble .speech-actions { transition: opacity 180ms ease; }
#speechBubble .speech-bubble.speech-typing .speech-actions {
  /* Ghost, not gone: full opacity-0 left seconds of dark empty box under
     short lines while the type-on ran. A dim preview keeps the bubble's
     shape readable and still signals "wait / tap to finish". */
  opacity: 0.22;
  filter: saturate(0.35);
  pointer-events: none;
}
#speechBubble .speech-bubble.speech-typing .speech-text::after {
  content: "\258E";
  margin-left: 1px;
  color: rgba(255, 220, 130, 0.9);
  animation: speech-caret 640ms steps(1) infinite;
}

@keyframes speech-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
#speechBubble .speech-bubble::after { content:""; position:absolute; left:50%; bottom:-14px;
  transform:translateX(-50%); border:9px solid transparent; border-top-color:rgba(20,27,44,0.82);
  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.25)); }
#speechBubble .speech-bubble.tail-up::after { bottom:auto; top:-14px; border-top-color:transparent;
  border-bottom-color:rgba(20,27,44,0.82); }
#speechBubble .speech-bubble.tail-none::after { display:none; }
#speechBubble .speech-name { display:inline-block; font-weight:900; font-size:0.82rem;
  letter-spacing:0.02em; color:var(--gold); margin-bottom:4px; }
#speechBubble .speech-name:empty { display:none; }
#speechBubble .speech-text { margin:0; color:var(--ink); line-height:1.5; font-size:0.95rem;
  white-space:pre-wrap; overflow-wrap:anywhere; }
#speechBubble .speech-highlight {
  color:#160d03;
  font-weight:900;
  background:linear-gradient(180deg, #ffe889 0%, #f4c334 100%);
  border:1px solid rgba(255,255,255,0.48);
  border-radius:5px;
  padding:0 0.24em 0.04em;
  text-shadow:none;
  box-shadow:0 0 0 1px rgba(82,52,5,0.18), 0 4px 10px rgba(0,0,0,0.16);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
#speechBubble .speech-art { display:block; position:relative; width:min(118px, 38vw); aspect-ratio:1;
  margin:0 auto 10px; border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 24px rgba(0,0,0,0.20); }
#speechBubble .speech-art.speech-art-wide { width:min(360px, 74vw); aspect-ratio:16 / 9;
  margin-bottom:12px; }
#speechBubble .speech-art img { width:100%; height:100%; object-fit:contain; display:block;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,0.24)); }
#speechBubble .speech-art.story-art-omen {
  border-color:rgba(168, 106, 255, 0.34);
  box-shadow:0 14px 32px rgba(38, 10, 60, 0.34), 0 0 34px rgba(130, 64, 255, 0.12);
}
#speechBubble .speech-art.story-art-omen img {
  animation: story-omen-breathe 4.8s ease-in-out infinite;
}
#speechBubble .speech-art.story-art-schematic {
  border-color:rgba(216, 146, 255, 0.40);
  box-shadow:0 14px 32px rgba(34, 8, 55, 0.34), 0 0 36px rgba(185, 82, 255, 0.18);
}
#speechBubble .speech-art.story-art-schematic::after {
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  height:18%;
  top:-20%;
  background:linear-gradient(180deg, transparent, rgba(239, 214, 255, 0.44), transparent);
  mix-blend-mode:screen;
  animation: story-schematic-scan 2.6s linear infinite;
}
#speechBubble .speech-art.story-art-schematic img {
  animation: story-schematic-flicker 3.2s steps(2, end) infinite;
}
#speechBubble .speech-art.story-art-gate {
  border-color:rgba(235, 224, 255, 0.42);
  box-shadow:0 14px 32px rgba(20, 10, 38, 0.36), 0 0 38px rgba(214, 194, 255, 0.18);
}
#speechBubble .speech-art.story-art-gate::before {
  content:"";
  position:absolute;
  inset:-10%;
  background:radial-gradient(circle at 50% 36%, rgba(255,255,255,0.42), rgba(178,120,255,0.16) 34%, transparent 68%);
  mix-blend-mode:screen;
  opacity:0.28;
  animation: story-gate-halo 4.2s ease-in-out infinite;
  pointer-events:none;
}
#speechBubble .speech-art.story-art-gate img {
  animation: story-gate-wake 4.2s ease-in-out infinite;
}
@keyframes story-omen-breathe {
  0%, 100% { filter:saturate(1.02) contrast(1.02) brightness(0.96); transform:scale(1); }
  48% { filter:saturate(1.16) contrast(1.08) brightness(1.08); transform:scale(1.018); }
}
@keyframes story-schematic-scan {
  0% { transform:translateY(0); opacity:0; }
  10% { opacity:0.82; }
  88% { opacity:0.72; }
  100% { transform:translateY(660%); opacity:0; }
}
@keyframes story-schematic-flicker {
  0%, 100% { filter:saturate(1.08) contrast(1.04) brightness(1); }
  50% { filter:saturate(1.22) contrast(1.1) brightness(1.08); }
}
@keyframes story-gate-halo {
  0%, 100% { opacity:0.18; transform:scale(0.96); }
  48% { opacity:0.46; transform:scale(1.04); }
}
@keyframes story-gate-wake {
  0%, 100% { filter:saturate(1.02) brightness(0.98); }
  48% { filter:saturate(1.12) brightness(1.14); }
}
/* ANIM-07 — recognition beat only: the statue's wings brighten black→white in
 * ONE slow 2.2s swell (not a strobe), then decay into the ambient halo/wake
 * loops, which take over after the one-shot finishes. */
#speechBubble .speech-art.story-art-gate--flash::before {
  animation: story-gate-wing-flash 2.2s ease-in-out 1 both, story-gate-halo 4.2s ease-in-out 2.2s infinite;
}
#speechBubble .speech-art.story-art-gate--flash img {
  animation: story-gate-img-flash 2.2s ease-in-out 1 both, story-gate-wake 4.2s ease-in-out 2.2s infinite;
}
@keyframes story-gate-wing-flash {
  0% { opacity:0.18; transform:scale(0.96); }
  38% { opacity:0.94; transform:scale(1.05); }
  100% { opacity:0.18; transform:scale(0.96); }
}
@keyframes story-gate-img-flash {
  0% { filter:saturate(1.02) brightness(0.98); }
  38% { filter:saturate(0.62) contrast(0.94) brightness(1.85); }
  100% { filter:saturate(1.02) brightness(0.98); }
}
#speechBubble .speech-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
#speechBubble .speech-actions:empty { display:none; }
#speechBubble .speech-actions button { font:inherit; font-weight:800; font-size:0.85rem;
  padding:7px 14px; border-radius:999px; cursor:pointer; color:var(--ink);
  background:rgba(255,255,255,0.08); border:1px solid var(--glass-edge); }
#speechBubble .speech-actions button:hover { background:rgba(255,255,255,0.16);
  border-color:rgba(240,180,64,0.55); }

/* Voice-only dialogue: the line plays aloud, the bubble shrinks to its
   buttons (+ replay). font-size:0 hides the words but keeps embedded
   .speech-art story images visible. */
#speechBubble .speech-bubble.speech-bubble--voice-only { width:auto; max-width:min(440px,86vw); }
#speechBubble .speech-bubble--voice-only .speech-name { display:none; }
#speechBubble .speech-bubble--voice-only .speech-text { font-size:0; line-height:0; min-height:0; }
#speechBubble .speech-bubble--voice-only .speech-actions { margin-top:0; }
#speechBubble .speech-bubble--voice-only .speech-text:has(.speech-art) { margin-bottom:10px; }
#speechBubble .speech-replay { display:inline-grid; place-items:center; width:34px;
  min-width:34px; padding:0 !important; font-size:1.05rem !important; line-height:1; }

/* Authored boss-aftermath dialogue on desktop: keep the map visible and let
   the scene itself own click-to-advance. Touch/mobile rail presentation stays
   on its existing rules because this block requires a fine pointer and a
   non-touch document. */
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch) #speechBubble .speech-bubble.speech-bubble--cinematic-advance {
    position: fixed;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(360px, calc(100vw - 32px));
    height: 152px;
    max-height: calc(100dvh - 32px);
    overflow: hidden;
    padding: 12px 16px 22px;
    border-radius: 15px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
  }

  html:not(.is-touch) #speechBubble .speech-bubble--cinematic-advance .speech-name {
    flex: 0 0 auto;
    margin-bottom: 3px;
    font-size: 0.76rem;
  }

  html:not(.is-touch) #speechBubble .speech-bubble--cinematic-advance .speech-text {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    scrollbar-width: thin;
  }

  html:not(.is-touch) #speechBubble .speech-bubble--cinematic-advance .speech-actions {
    display: none !important;
  }

  html:not(.is-touch) #speechBubble .speech-bubble.speech-bubble--cinematic-advance::before {
    content: "";
    position: absolute;
    right: 17px;
    bottom: 10px;
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 218, 126, 0.9);
    border-bottom: 2px solid rgba(255, 218, 126, 0.9);
    pointer-events: none;
    transform: translateY(0) rotate(45deg);
    animation: speech-cinematic-advance-hint 980ms ease-in-out infinite;
  }

  html:not(.is-touch) #speechBubble .speech-bubble--cinematic-advance.speech-typing::before {
    opacity: 0.16;
    animation: none;
  }

  html:not(.is-touch) #speechBubble .speech-bubble--cinematic-advance.speech-typing .speech-text::after {
    color: rgba(255, 220, 130, 0.58);
    animation-duration: 900ms;
  }
}

@keyframes speech-cinematic-advance-hint {
  0%, 100% { opacity: 0.45; transform: translateY(-1px) rotate(45deg); }
  50% { opacity: 1; transform: translateY(2px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.is-touch) #speechBubble .speech-bubble.speech-bubble--cinematic-advance::before {
    animation: none;
    opacity: 0.78;
  }
}

html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail {
  width: min(260px, 34vw);
  max-height: calc(100dvh - 14px);
  overflow-y: auto;
  padding: 9px 10px 8px;
  border-radius: 12px;
  background: rgba(8, 10, 16, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-name {
  margin-bottom: 2px;
  font-size: 0.68rem;
}
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-text {
  line-height: 1.28;
  font-size: 0.74rem;
}
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-actions {
  margin-top: 7px;
  gap: 6px;
}
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.7rem;
}
/* Voice-only on the mobile rail: out-rank the rail's own .speech-text font
   size and let the box shrink to its buttons. */
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail.speech-bubble--voice-only {
  width: max-content;
  max-width: min(260px, 60vw);
}
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail.speech-bubble--voice-only .speech-text {
  font-size: 0;
  line-height: 0;
  min-height: 0;
}
@media (max-width: 720px) and (orientation: landscape) {
  html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail {
    width: min(220px, 32vw);
    padding: 8px 9px;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-text {
    font-size: 0.68rem;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide {
    box-sizing: border-box;
    left: 0 !important;
    top: 0 !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    transform: none !important;
    border-radius: 0;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.85fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "art name"
      "art text"
      "art actions";
    gap: 8px 12px;
    overflow: hidden;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide::after {
    display: none;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-art-wide {
    grid-area: art;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-self: stretch;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-art-wide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #050505;
    border-radius: 8px;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-name {
    grid-area: name;
    align-self: end;
    margin: 0;
    font-size: 0.76rem;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-text {
    grid-area: text;
    min-height: 0;
    overflow: auto;
    font-size: 0.82rem;
    line-height: 1.36;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-actions {
    grid-area: actions;
    align-self: end;
    margin-top: 0;
  }
  html.is-touch #speechBubble .speech-bubble.speech-bubble-art-wide .speech-actions button {
    min-height: 38px;
    padding: 6px 12px;
  }
}

.devils-battle-start {
  position: relative;
  width: min(620px, 92vw);
  height: min(360px, 62vh);
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 95, 220, 0.34), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(55, 14, 80, 0.88), rgba(8, 6, 14, 0.96) 66%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255,255,255,0.12);
  animation: devils-clash-card 980ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}
.devils-battle-start::before,
.devils-battle-start::after {
  content: "";
  position: absolute;
  inset: -20%;
  mix-blend-mode: screen;
}
.devils-battle-start::before {
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,95,220,0.16) 18px 20px);
  transform: rotate(-18deg) translateX(-38%);
  animation: devils-clash-scan 980ms ease-out forwards;
}
.devils-battle-start::after {
  background: radial-gradient(circle, rgba(255,255,255,0.88), rgba(255,90,220,0.38) 14%, transparent 36%);
  opacity: 0;
  animation: devils-clash-flash 980ms ease-out forwards;
}
.devils-battle-start__ring,
.devils-battle-start__slash,
.devils-battle-start__sigil {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.devils-battle-start__ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  border: 3px solid rgba(255, 190, 245, 0.75);
  box-shadow: 0 0 28px rgba(255, 82, 220, 0.8), inset 0 0 34px rgba(120, 58, 255, 0.48);
  animation: devils-clash-ring 980ms cubic-bezier(0.18, 0.8, 0.2, 1) forwards;
}
.devils-battle-start__slash {
  width: 420px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #ffffff 18%, #ff5fdc 52%, #7b4cff 82%, transparent);
  box-shadow: 0 0 22px #ff5fdc;
  animation: devils-clash-slash 980ms cubic-bezier(0.18, 0.78, 0.2, 1) forwards;
}
.devils-battle-start__sigil {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 8%, #ffbaf1 9% 16%, transparent 17%),
    conic-gradient(from 45deg, transparent 0 17%, rgba(255,255,255,0.85) 18% 20%, transparent 21% 50%, rgba(255,95,220,0.82) 51% 54%, transparent 55%);
  filter: drop-shadow(0 0 18px #ff5fdc);
  animation: devils-clash-sigil 980ms ease-out forwards;
}
/* v2 layers: pink miasma wisps boiling up from below (the Devils' smoke
   identity) + a pair of horn arcs crowning the ring + a crossing counter-
   slash - unmistakably THEIR ambush, not a generic wipe. */
.devils-battle-start__smoke {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.devils-battle-start__smoke span {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  bottom: -14%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 220, 0.42), rgba(120, 40, 160, 0.24) 55%, transparent 78%);
  filter: blur(7px);
  opacity: 0;
  animation: devils-smoke-rise 900ms ease-out calc(var(--d, 0) * 1ms) forwards;
}

@keyframes devils-smoke-rise {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-52vh) scale(1.5); }
}

.devils-battle-start__horns {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  height: 100px;
  transform: translate(-50%, -108%);
  pointer-events: none;
  animation: devils-horns 980ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}

.devils-battle-start__horns::before,
.devils-battle-start__horns::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 52px;
  height: 96px;
  border: 8px solid transparent;
  filter: drop-shadow(0 0 12px rgba(255, 95, 220, 0.85));
}

.devils-battle-start__horns::before {
  left: 6px;
  border-left-color: rgba(255, 170, 235, 0.95);
  border-radius: 100% 0 0 0 / 130% 0 0 0;
  transform: rotate(-10deg);
}

.devils-battle-start__horns::after {
  right: 6px;
  border-right-color: rgba(255, 170, 235, 0.95);
  border-radius: 0 100% 0 0 / 0 130% 0 0;
  transform: rotate(10deg);
}

@keyframes devils-horns {
  0% { opacity: 0; transform: translate(-50%, -78%) scale(0.5); }
  30% { opacity: 1; transform: translate(-50%, -108%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -116%) scale(1.12); }
}

.devils-battle-start__slash--rev {
  animation-name: devils-clash-slash-rev;
  animation-delay: 120ms;
}

@keyframes devils-clash-slash-rev {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(28deg) scaleX(0.08); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(28deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(28deg) scaleX(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .devils-battle-start__smoke span,
  .devils-battle-start__horns { animation: none; opacity: 0; }
}

.devils-battle-start__label {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 2;
  max-width: calc(100% - 40px);
  overflow: hidden;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(6, 5, 12, 0.64);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-shadow: 0 0 12px rgba(255, 80, 220, 0.9), 0 2px 8px rgba(0,0,0,0.7);
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 22px rgba(255, 62, 190, 0.34);
  animation: devils-clash-label 980ms ease-out forwards;
}
.devils-battle-start--malraux {
  background:
    radial-gradient(circle at 50% 46%, rgba(206, 36, 92, 0.32), transparent 27%),
    radial-gradient(circle at 50% 52%, rgba(38, 7, 55, 0.92), rgba(5, 5, 11, 0.98) 68%);
}
.devils-battle-start--malraux::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(206, 36, 92, 0.18) 16px 18px),
    linear-gradient(120deg, transparent 0 35%, rgba(255, 227, 250, 0.15) 48%, transparent 62%);
}
.devils-battle-start--malraux::after {
  background: radial-gradient(circle, rgba(255,255,255,0.92), rgba(206,36,92,0.46) 13%, rgba(84,34,160,0.25) 27%, transparent 40%);
}
.devils-battle-start--malraux .devils-battle-start__ring {
  border-color: rgba(255, 214, 238, 0.78);
  box-shadow: 0 0 32px rgba(206, 36, 92, 0.82), inset 0 0 34px rgba(84, 34, 160, 0.54);
}
.devils-battle-start--malraux .devils-battle-start__slash {
  background: linear-gradient(90deg, transparent, #ffffff 16%, #ce245c 48%, #5422a0 82%, transparent);
  box-shadow: 0 0 24px rgba(206, 36, 92, 0.92);
}
.devils-battle-start--malraux .devils-battle-start__sigil {
  background:
    radial-gradient(circle, #fff 0 8%, #ffd6ee 9% 16%, transparent 17%),
    conic-gradient(from 45deg, transparent 0 17%, rgba(255,255,255,0.88) 18% 20%, transparent 21% 50%, rgba(206,36,92,0.86) 51% 54%, transparent 55%);
  filter: drop-shadow(0 0 18px rgba(206, 36, 92, 0.95));
}

.modal.devils-battle-start-modal {
  padding: 12px;
  background: radial-gradient(circle at 50% 46%, rgba(113, 18, 93, 0.32), rgba(5, 5, 10, 0.92));
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal.devils-battle-start-modal {
    padding: 0;
    background: #05050a;
    backdrop-filter: none;
  }
  html.is-touch .modal.devils-battle-start-modal .devils-battle-start {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  html.is-touch .modal.devils-battle-start-modal .devils-battle-start__ring {
    width: 128px;
    height: 128px;
  }
  html.is-touch .modal.devils-battle-start-modal .devils-battle-start__slash {
    width: min(420px, 78vw);
    height: 10px;
  }
  html.is-touch .modal.devils-battle-start-modal .devils-battle-start__sigil {
    width: 54px;
    height: 54px;
  }
  html.is-touch .modal.devils-battle-start-modal .devils-battle-start__label {
    bottom: 18px;
    font-size: 0.92rem;
  }
}
@keyframes devils-clash-card {
  0% { opacity: 0; transform: scale(0.92); }
  16% { opacity: 1; transform: scale(1); }
  74% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes devils-clash-scan {
  0% { transform: rotate(-18deg) translateX(-48%); opacity: 0; }
  24%, 72% { opacity: 1; }
  100% { transform: rotate(-18deg) translateX(42%); opacity: 0; }
}
@keyframes devils-clash-flash {
  0%, 52% { opacity: 0; transform: scale(0.4); }
  66% { opacity: 0.88; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes devils-clash-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
  34% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(120deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(260deg); }
}
@keyframes devils-clash-slash {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-28deg) scaleX(0.08); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(-28deg) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-28deg) scaleX(1.25); }
}
@keyframes devils-clash-sigil {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(180deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(360deg); }
}
@keyframes devils-clash-label {
  0%, 18% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  34%, 76% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* evolution scene + result — preserved verbatim */
.devils-movie-card {
  --movie-accent: #ff5d77;
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #060409;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: devils-movie-card-enter 640ms ease both;
}

.devils-movie-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #060409;
}

.devils-movie-frame,
.devils-movie-mist,
.devils-movie-vignette {
  position: absolute;
  inset: 0;
}

.devils-movie-frame {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: saturate(1.06) contrast(1.04);
  transition: filter 240ms ease;
}

.devils-movie-mist {
  pointer-events: none;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255, 73, 154, 0.12) 39px 42px),
    linear-gradient(90deg, transparent, rgba(71, 19, 54, 0.18), transparent);
  mix-blend-mode: screen;
  opacity: 0.26;
  transform: translateX(-12%);
  animation: devils-movie-mist 5.4s linear infinite;
}

.devils-movie-vignette {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 3, 8, 0.4), transparent 16%),
    radial-gradient(ellipse at 50% 44%, transparent 54%, rgba(3, 3, 8, 0.5) 100%);
}

/* film grain — coprime dot tilings jittered in discrete steps */
.devils-movie-stage::after {
  content: "";
  position: absolute;
  inset: -90px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 24% 36%, rgba(255, 255, 255, 0.85) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 68% 74%, rgba(255, 255, 255, 0.6) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 1.4px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  mix-blend-mode: overlay;
  animation: devils-movie-grain 900ms steps(1, end) infinite;
}

.devils-movie-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3.4vw, 44px);
  align-items: end;
  min-height: 0;
  padding:
    clamp(14px, 2.6vh, 26px)
    calc(clamp(18px, 4.2vw, 58px) + env(safe-area-inset-right, 0px))
    calc(clamp(16px, 3vh, 30px) + env(safe-area-inset-bottom, 0px))
    calc(clamp(18px, 4.2vw, 58px) + env(safe-area-inset-left, 0px));
}

.devils-movie-caption::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: max(100%, 36vh);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 10, 0) 0%, rgba(5, 4, 10, 0.4) 34%, rgba(4, 3, 9, 0.82) 72%, rgba(3, 2, 7, 0.93) 100%);
}

.devils-movie-caption > * {
  position: relative;
  z-index: 1;
}

.reedbun-return-card {
  width: min(1040px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 12px;
  overflow: auto;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(10, 18, 24, 0.96), rgba(5, 9, 14, 0.98));
  border-color: rgba(134, 226, 255, 0.28);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.reedbun-return-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(3, 8, 13, 0.18)),
    var(--reed-return-bg) center / cover no-repeat,
    #101013;
}

.reedbun-return-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 58%, rgba(85, 220, 255, 0.20), transparent 23%),
    radial-gradient(circle at 76% 52%, rgba(255, 244, 194, 0.14), transparent 24%),
    linear-gradient(180deg, transparent 56%, rgba(2, 5, 9, 0.46) 100%);
}

.reedbun-return-light {
  position: absolute;
  z-index: 3;
  left: 27%;
  bottom: 15%;
  width: 28%;
  height: 38%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(118, 230, 255, 0.22), rgba(118, 230, 255, 0) 68%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: reedbun-return-light 8800ms ease forwards;
}

.reedbun-return-sprite {
  position: absolute;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 256px 256px;
  z-index: 4;
}

.reedbun-return-reed {
  left: 10.5%;
  bottom: 11%;
  background-image: var(--reed-sheet);
  background-position: 0 0;
  transform: scale(2.25);
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 12px rgba(0, 0, 0, 0.36));
}

.reedbun-return-player {
  left: 74%;
  bottom: 34%;
  background-image: var(--player-sheet);
  background-size: 512px 256px;
  background-position: 0 -64px;
  transform: scale(2.22);
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 12px rgba(0, 0, 0, 0.36));
}

.reedbun-return-luminhare {
  position: absolute;
  z-index: 5;
  width: 240px;
  left: 22.5%;
  bottom: 20%;
  transform: translate(-50%, 0) scale(0.34);
  transform-origin: center bottom;
  animation: reedbun-return-hop 8800ms cubic-bezier(0.28, 0.72, 0.22, 1) forwards;
  filter:
    drop-shadow(0 16px 12px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 12px rgba(105, 226, 255, 0.22));
  isolation: isolate;
}

.reedbun-return-luminhare::before,
.reedbun-return-luminhare::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.reedbun-return-luminhare::before {
  inset: 8% 5% 5%;
  border-radius: 999px;
  opacity: 0.86;
  mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 32% 34%, rgba(75, 14, 106, 0.8), transparent 24%),
    radial-gradient(circle at 62% 42%, rgba(37, 5, 58, 0.68), transparent 28%),
    radial-gradient(circle at 48% 70%, rgba(142, 46, 188, 0.54), transparent 30%),
    linear-gradient(135deg, rgba(22, 8, 38, 0.22), rgba(166, 72, 212, 0.18));
  filter: blur(1px);
  animation: reedbun-return-poison-aura 8800ms ease forwards;
}

.reedbun-return-luminhare::after {
  left: 12%;
  top: 2%;
  width: 74%;
  height: 60%;
  opacity: 0.8;
  background:
    radial-gradient(circle at 18% 70%, rgba(155, 58, 225, 0.88) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 30%, rgba(82, 15, 116, 0.76) 0 5%, transparent 6%),
    radial-gradient(circle at 62% 64%, rgba(168, 70, 232, 0.82) 0 4%, transparent 5%),
    radial-gradient(circle at 82% 36%, rgba(50, 8, 74, 0.74) 0 5%, transparent 6%);
  filter: blur(0.5px) drop-shadow(0 0 7px rgba(151, 54, 225, 0.7));
  animation: reedbun-return-poison-specks 8800ms ease forwards;
}

.reedbun-return-luminhare img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  transform: scaleX(-1);
  animation: reedbun-return-luminhare-recover 8800ms ease forwards;
}

.reedbun-return-devil-signs {
  position: absolute;
  inset: -3% -6% -2%;
  z-index: 3;
  pointer-events: none;
  background: url("assets/npcs/tainted-overlay.png?v=devils-assets-1") center / 118% 118% no-repeat;
  -webkit-mask: var(--luminhare-mask) center center / contain no-repeat;
  mask: var(--luminhare-mask) center center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  transform: scaleX(-1) scale(0.98);
  transform-origin: center center;
  filter:
    brightness(1.38)
    contrast(1.18)
    saturate(1.55)
    drop-shadow(0 0 5px rgba(116, 255, 116, 0.62))
    drop-shadow(0 0 15px rgba(110, 64, 255, 0.48));
  animation: reedbun-return-devil-signs 8800ms ease forwards;
}

.reedbun-return-devil-signs::after {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 52% 58%, rgba(118, 255, 104, 0.28), transparent 28%),
    radial-gradient(circle at 45% 42%, rgba(126, 74, 255, 0.28), transparent 46%),
    conic-gradient(from 0deg, transparent, rgba(106, 255, 124, 0.22), transparent, rgba(116, 70, 255, 0.20), transparent);
  -webkit-mask: var(--luminhare-mask) center center / contain no-repeat;
  mask: var(--luminhare-mask) center center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: reedbun-return-devil-signs-swirl 8800ms linear forwards;
}

.reedbun-return-cradle {
  position: absolute;
  z-index: 4;
  left: 22.5%;
  bottom: 18%;
  width: 112px;
  height: 42px;
  transform: translate(-50%, 0) rotate(-5deg);
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(160, 236, 255, 0.36), rgba(160, 236, 255, 0) 68%),
    linear-gradient(90deg, rgba(210, 250, 255, 0), rgba(210, 250, 255, 0.64), rgba(210, 250, 255, 0));
  border: 1px solid rgba(203, 251, 255, 0.52);
  box-shadow: 0 0 20px rgba(97, 219, 255, 0.34);
  animation: reedbun-return-cradle 8800ms ease forwards;
}

.reedbun-return-taint {
  position: absolute;
  z-index: 4;
  left: 22.5%;
  bottom: 19%;
  width: 168px;
  height: 128px;
  transform: translate(-50%, 0);
  border-radius: 999px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 74%, rgba(72, 10, 104, 0.88), rgba(72, 10, 104, 0) 54%),
    radial-gradient(circle at 32% 44%, rgba(183, 70, 255, 0.58), rgba(183, 70, 255, 0) 34%),
    radial-gradient(circle at 66% 38%, rgba(31, 4, 58, 0.72), rgba(31, 4, 58, 0) 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 103, 231, 0.24), rgba(255, 103, 231, 0) 62%);
  filter: blur(2px) drop-shadow(0 0 12px rgba(168, 54, 255, 0.5));
  animation: reedbun-return-taint 8800ms ease forwards;
}

.reedbun-return-antidote {
  position: absolute;
  z-index: 8;
  left: 14.5%;
  bottom: 36%;
  width: 74px;
  height: 74px;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.42) rotate(-8deg);
  transform-origin: center center;
  pointer-events: none;
  background: var(--antidote-img) center / contain no-repeat;
  filter:
    drop-shadow(0 12px 10px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 12px rgba(96, 230, 255, 0.54));
  animation: reedbun-return-antidote 8800ms ease forwards;
}

.reedbun-return-antidote::after {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 999px;
  opacity: 0.64;
  background: radial-gradient(circle, rgba(117, 237, 255, 0.42), transparent 66%);
  animation: reedbun-return-antidote-glow 8800ms ease forwards;
}

.reedbun-return-cleanse {
  position: absolute;
  z-index: 7;
  left: 31%;
  bottom: 8%;
  width: 260px;
  height: 260px;
  transform: translate(-50%, 0);
  background-image: var(--cleanse-sheet);
  background-repeat: no-repeat;
  background-size: 3072px 256px;
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    reedbun-return-cleanse-frames 1250ms steps(11, end) 2350ms 1 forwards,
    reedbun-return-cleanse-show 8800ms ease forwards;
}

.reedbun-return-paw {
  position: absolute;
  z-index: 3;
  width: 28px;
  height: 20px;
  opacity: 0;
  transform: translate(-50%, 0) rotate(8deg) scale(0.9);
  filter: drop-shadow(0 0 8px rgba(104, 230, 255, 0.7));
  background:
    radial-gradient(ellipse at 78% 35%, rgba(164, 242, 255, 0.78) 0 12%, transparent 13%),
    radial-gradient(ellipse at 62% 20%, rgba(164, 242, 255, 0.72) 0 10%, transparent 11%),
    radial-gradient(ellipse at 46% 22%, rgba(164, 242, 255, 0.72) 0 10%, transparent 11%),
    radial-gradient(ellipse at 28% 36%, rgba(164, 242, 255, 0.68) 0 11%, transparent 12%),
    radial-gradient(ellipse at 47% 70%, rgba(164, 242, 255, 0.82) 0 20%, transparent 21%);
  animation: reedbun-return-paw-show 3000ms ease calc(4950ms + var(--d)) forwards;
}

.reedbun-return-paw.right {
  transform: translate(-50%, 0) rotate(-7deg) scale(0.9);
}

.reedbun-return-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 4px 2px;
}

.reedbun-return-caption h2 {
  margin: 0 0 4px;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  letter-spacing: 0;
  color: #f4fbff;
}

.reedbun-return-caption p {
  margin: 0;
  color: rgba(230, 245, 255, 0.76);
  line-height: 1.45;
}

.reedbun-return-caption button.ready {
  box-shadow: 0 0 22px rgba(91, 220, 255, 0.28);
}

@keyframes reedbun-return-light {
  0%, 20% { opacity: 0; transform: scale(0.82); }
  34%, 53% { opacity: 1; transform: scale(1.08); }
  70%, 100% { opacity: 0.28; transform: scale(1.18); }
}

@keyframes reedbun-return-luminhare-recover {
  0%, 22% {
    filter: saturate(0.48) brightness(0.64) contrast(1.24) hue-rotate(42deg);
  }
  34% {
    filter: saturate(0.72) brightness(0.82) contrast(1.12) hue-rotate(22deg);
  }
  47%, 100% {
    filter: saturate(1.02) brightness(1) contrast(1) hue-rotate(0deg);
  }
}

@keyframes reedbun-return-devil-signs {
  0%, 12% {
    opacity: 0.78;
    background-position: 50% 54%;
    transform: scaleX(-1) scale(0.985);
  }
  22% {
    opacity: 0.94;
    background-position: 56% 48%;
    transform: scaleX(-1) scale(1.045);
  }
  34% {
    opacity: 0.56;
    background-position: 58% 46%;
    transform: scaleX(-1) scale(1.08);
  }
  46%, 100% {
    opacity: 0;
    background-position: 60% 44%;
    transform: scaleX(-1) scale(1.16);
  }
}

@keyframes reedbun-return-devil-signs-swirl {
  0%, 11% { opacity: 0.42; transform: rotate(0deg) scale(0.96); }
  25% { opacity: 0.66; transform: rotate(160deg) scale(1.02); }
  42% { opacity: 0.24; transform: rotate(290deg) scale(1.08); }
  50%, 100% { opacity: 0; transform: rotate(360deg) scale(1.12); }
}

@keyframes reedbun-return-poison-aura {
  0%, 22% { opacity: 0.9; transform: scale(1) rotate(-3deg); }
  34% { opacity: 0.58; transform: scale(1.06) rotate(2deg); }
  45%, 100% { opacity: 0; transform: scale(1.22) rotate(7deg); }
}

@keyframes reedbun-return-poison-specks {
  0%, 23% { opacity: 0.86; transform: translate(0, 0) scale(1); }
  35% { opacity: 0.44; transform: translate(4px, -6px) scale(1.08); }
  45%, 100% { opacity: 0; transform: translate(12px, -18px) scale(1.18); }
}

@keyframes reedbun-return-antidote {
  0%, 10% {
    opacity: 0;
    left: 10.5%;
    bottom: 35%;
    transform: translate(-50%, 0) scale(0.38) rotate(-10deg);
  }
  16%, 24% {
    opacity: 1;
    left: 14.5%;
    bottom: 34%;
    transform: translate(-50%, -6px) scale(0.54) rotate(-5deg);
  }
  34% {
    opacity: 1;
    left: 25.5%;
    bottom: 25%;
    transform: translate(-50%, -14px) scale(0.64) rotate(6deg);
  }
  43% {
    opacity: 0;
    left: 30.5%;
    bottom: 17%;
    transform: translate(-50%, -2px) scale(0.3) rotate(14deg);
  }
  100% {
    opacity: 0;
    left: 30.5%;
    bottom: 17%;
    transform: translate(-50%, -2px) scale(0.3) rotate(14deg);
  }
}

@keyframes reedbun-return-antidote-glow {
  0%, 12% { opacity: 0; transform: scale(0.75); }
  18%, 35% { opacity: 0.68; transform: scale(1); }
  43%, 100% { opacity: 0; transform: scale(1.35); }
}

@keyframes reedbun-return-hop {
  0%, 17% { left: 22.5%; bottom: 20%; transform: translate(-50%, 0) scale(0.34); }
  23%, 45% { left: 31%; bottom: 11%; transform: translate(-50%, 0) scale(0.36); }
  55% { left: 40%; bottom: 22%; transform: translate(-50%, -12px) scale(0.36) rotate(-3deg); }
  66% { left: 54%; bottom: 27%; transform: translate(-50%, 0) scale(0.35) rotate(2deg); }
  78% { left: 66%; bottom: 35%; transform: translate(-50%, -14px) scale(0.34) rotate(-4deg); }
  91%, 100% { left: 72.6%; bottom: 37%; transform: translate(-50%, 0) scale(0.33) rotate(-7deg); }
}

@keyframes reedbun-return-cradle {
  0%, 17% { left: 22.5%; bottom: 18%; opacity: 0.88; transform: translate(-50%, 0) rotate(-5deg) scale(1); }
  23% { left: 31%; bottom: 10%; opacity: 0.28; transform: translate(-50%, 0) rotate(0deg) scale(1.16); }
  33%, 100% { left: 31%; bottom: 10%; opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(1.24); }
}

@keyframes reedbun-return-taint {
  0%, 17% { left: 22.5%; bottom: 19%; opacity: 0.88; transform: translate(-50%, 0) scale(0.62); }
  23%, 37% { left: 31%; bottom: 10%; opacity: 0.9; transform: translate(-50%, 0) scale(1.04); }
  50% { left: 31%; bottom: 11%; opacity: 0; transform: translate(-50%, -12px) scale(1.42); }
  100% { left: 31%; bottom: 11%; opacity: 0; transform: translate(-50%, -12px) scale(1.42); }
}

@keyframes reedbun-return-cleanse-frames {
  from { background-position: 0 0; }
  to { background-position: -2816px 0; }
}

@keyframes reedbun-return-cleanse-show {
  0%, 22% { opacity: 0; transform: translate(-50%, 0) scale(0.76); }
  30%, 46% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  58%, 100% { opacity: 0; transform: translate(-50%, 0) scale(1.18); }
}

@keyframes reedbun-return-paw-show {
  0% { opacity: 0; }
  12%, 68% { opacity: 0.95; }
  100% { opacity: 0.12; }
}

@media (max-width: 560px) {
  .reedbun-return-card {
    width: calc(100vw - 16px);
    padding: 10px;
  }

  .reedbun-return-caption {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;
  }

  .reedbun-return-caption h2 {
    font-size: 1.22rem;
    line-height: 1.15;
  }

  .reedbun-return-caption button {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal .reedbun-return-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 12px);
    padding: 8px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  html.is-touch .modal .reedbun-return-stage {
    height: min(62dvh, calc(100dvh - 108px));
    min-height: 224px;
    aspect-ratio: auto;
    border-radius: 6px;
  }

  html.is-touch .modal .reedbun-return-caption {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 2px 0;
  }

  html.is-touch .modal .reedbun-return-caption h2 {
    margin-bottom: 2px;
    font-size: 1.08rem;
    line-height: 1.1;
  }

  html.is-touch .modal .reedbun-return-caption p {
    font-size: 0.82rem;
    line-height: 1.25;
  }

  html.is-touch .modal .reedbun-return-caption button {
    align-self: center;
    min-height: 42px;
    padding: 0 14px;
    white-space: nowrap;
  }
}

@media (max-width: 720px) and (max-height: 480px) and (orientation: landscape) {
  html.is-touch .modal .reedbun-return-stage {
    height: calc(100dvh - 88px);
    min-height: 188px;
  }

  html.is-touch .modal .reedbun-return-caption {
    gap: 8px;
    padding-top: 6px;
  }

  html.is-touch .modal .reedbun-return-caption h2 {
    font-size: 0.98rem;
  }

  html.is-touch .modal .reedbun-return-caption p {
    font-size: 0.75rem;
    line-height: 1.18;
  }

  html.is-touch .modal .reedbun-return-caption button {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

.devils-movie-copy {
  min-width: 0;
  max-width: 70ch;
}

.devils-movie-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(6px, 1.2vh, 12px);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

.devils-movie-kicker::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06));
}

.devils-movie-kicker-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.devils-movie-count {
  flex: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}

.devils-movie-copy h2 {
  margin: 0 0 clamp(4px, 1vh, 10px);
  color: #ffd8df;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.4rem, 2.9vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.78);
}

.devils-movie-copy p {
  margin: 0;
  max-width: 62ch;
  min-height: 3em;
  max-height: 34vh;
  overflow-y: auto;
  color: rgba(244, 240, 246, 0.93);
  font-size: clamp(0.92rem, 1.25vw, 1.08rem);
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.82);
}

.devils-movie-controls {
  display: grid;
  justify-items: end;
  gap: clamp(10px, 1.8vh, 16px);
}

.devils-movie-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(5, 4, 8, 0.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.devils-movie-dots span {
  width: 20px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.devils-movie-dots span.active {
  width: 38px;
  background: #ff5d77;
  box-shadow: 0 0 12px rgba(255, 93, 119, 0.7);
}

.devils-movie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.devils-movie-controls button {
  min-width: 132px;
  min-height: 46px;
  padding: 10px 24px;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff7fb;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, rgba(166, 40, 64, 0.96), rgba(78, 18, 39, 0.98));
  border: 1px solid rgba(255, 174, 190, 0.42);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: filter 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.devils-movie-controls button:hover {
  border-color: rgba(255, 220, 226, 0.74);
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.devils-movie-controls button:active {
  filter: brightness(0.98);
  transform: translateY(0);
}

.devils-movie-controls button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.devils-movie-controls button[disabled] {
  cursor: default;
  opacity: 0.4;
  filter: none;
  transform: none;
}

/* Skip and Back stay quiet glass buttons under every theme skin — the one
 * themed gradient button is Next. Attribute selectors outrank the skins'
 * .x-movie-card .devils-movie-controls button overrides. */
.devils-movie-card .devils-movie-buttons button[data-devils-movie-skip],
.devils-movie-card .devils-movie-buttons button[data-devils-movie-prev] {
  min-width: 0;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(12, 10, 14, 0.4);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.devils-movie-card .devils-movie-buttons button[data-devils-movie-skip]:hover,
.devils-movie-card .devils-movie-buttons button[data-devils-movie-prev]:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.52);
  filter: none;
}

.devils-movie-card--voice-only .devils-movie-caption {
  inset: auto 0 0 auto;
  grid-template-columns: auto;
  width: max-content;
  max-width: calc(100% - 20px);
  min-height: 0;
  padding: 0 calc(clamp(18px, 4.2vw, 58px) + env(safe-area-inset-right, 0px)) calc(clamp(16px, 3vh, 30px) + env(safe-area-inset-bottom, 0px)) 18px;
}

.devils-movie-card--voice-only .devils-movie-caption::before {
  display: none;
}

.devils-movie-card--voice-only .devils-movie-copy {
  display: none;
}

.devils-movie-card--voice-only .devils-movie-controls {
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.devils-movie-card--voice-only .devils-movie-buttons {
  flex-wrap: nowrap;
}

.safari-lore-movie-card,
.thicket-release-movie-card {
  border-color: rgba(222, 181, 89, 0.38);
  background:
    linear-gradient(180deg, rgba(20, 31, 18, 0.96), rgba(7, 12, 8, 0.98));
}

.safari-lore-movie-card .devils-movie-copy h2,
.thicket-release-movie-card .devils-movie-copy h2 {
  color: #ffe2a1;
}

.safari-lore-movie-card .devils-movie-frame,
.thicket-release-movie-card .devils-movie-frame {
  filter: saturate(1.12) contrast(1.05) brightness(0.98);
}

.safari-lore-movie-card .devils-movie-mist,
.thicket-release-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(196, 226, 118, 0.10) 37px 40px),
    radial-gradient(circle at 52% 42%, rgba(194, 142, 48, 0.20), transparent 58%),
    linear-gradient(90deg, transparent, rgba(42, 83, 30, 0.20), transparent);
}

.safari-lore-movie-card .devils-movie-dots span.active,
.thicket-release-movie-card .devils-movie-dots span.active {
  background: #e5b85a;
  box-shadow: 0 0 14px rgba(229, 184, 90, 0.78);
}

.safari-lore-movie-card .devils-movie-controls button,
.thicket-release-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(142, 103, 37, 0.98), rgba(58, 62, 28, 0.98));
  border-color: rgba(246, 222, 160, 0.48);
}

.devils-safari-movie-card {
  border-color: rgba(138, 214, 120, 0.34);
  background:
    linear-gradient(180deg, rgba(15, 30, 18, 0.96), rgba(6, 10, 8, 0.98));
}

.devils-safari-movie-card .devils-movie-frame {
  filter: saturate(1.12) contrast(1.06) brightness(0.97);
}

.devils-safari-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(143, 225, 108, 0.12) 37px 40px),
    radial-gradient(circle at 52% 42%, rgba(108, 70, 24, 0.20), transparent 58%),
    linear-gradient(90deg, transparent, rgba(34, 76, 24, 0.22), transparent);
}

.devils-safari-movie-card .devils-movie-dots span.active {
  background: #8dde75;
  box-shadow: 0 0 14px rgba(141, 222, 117, 0.78);
}

.devils-safari-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(64, 116, 46, 0.98), rgba(29, 57, 28, 0.98));
  border-color: rgba(205, 242, 174, 0.48);
}

.lina-farewell-movie-card,
.lina-dreams-movie-card,
.heartroot-beyond-reunion-embrace-movie-card,
.honeydew-rescue-movie-card {
  border-color: rgba(245, 205, 126, 0.38);
  background:
    linear-gradient(180deg, rgba(31, 25, 18, 0.96), rgba(8, 11, 9, 0.98));
}

.lina-farewell-movie-card .devils-movie-copy h2,
.lina-dreams-movie-card .devils-movie-copy h2,
.heartroot-beyond-reunion-embrace-movie-card .devils-movie-copy h2,
.honeydew-rescue-movie-card .devils-movie-copy h2 {
  color: #ffe4a6;
}

.lina-farewell-movie-card .devils-movie-mist,
.lina-dreams-movie-card .devils-movie-mist,
.heartroot-beyond-reunion-embrace-movie-card .devils-movie-mist,
.honeydew-rescue-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(255, 220, 128, 0.10) 37px 40px),
    radial-gradient(circle at 48% 42%, rgba(110, 176, 91, 0.18), transparent 60%),
    linear-gradient(90deg, transparent, rgba(78, 112, 52, 0.20), transparent);
}

.lina-farewell-movie-card .devils-movie-dots span.active,
.lina-dreams-movie-card .devils-movie-dots span.active,
.heartroot-beyond-reunion-embrace-movie-card .devils-movie-dots span.active,
.honeydew-rescue-movie-card .devils-movie-dots span.active {
  background: #f0c86e;
  box-shadow: 0 0 14px rgba(240, 200, 110, 0.78);
}

.lina-farewell-movie-card .devils-movie-controls button,
.lina-dreams-movie-card .devils-movie-controls button,
.heartroot-beyond-reunion-embrace-movie-card .devils-movie-controls button,
.honeydew-rescue-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(132, 105, 46, 0.98), rgba(46, 75, 43, 0.98));
  border-color: rgba(250, 226, 164, 0.48);
}

.modal.lina-aeon-release-modal {
  z-index: 46;
}

.lina-aeon-release-card {
  width: min(720px, calc(100vw - 28px));
  border-color: rgba(255, 255, 255, 0.42);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(14, 18, 24, 0.98), rgba(5, 7, 11, 0.99));
  color: #f6f8ff;
}

.lina-aeon-release-stage {
  position: relative;
  overflow: hidden;
  height: 320px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.24), transparent 22%),
    radial-gradient(circle at 50% 74%, rgba(125, 202, 255, 0.13), transparent 48%),
    linear-gradient(180deg, #141923 0%, #080b10 100%);
}

.lina-aeon-release-light {
  position: absolute;
  inset: -24% -20%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.72), transparent 9%),
    radial-gradient(circle at 50% 48%, rgba(255, 232, 172, 0.34), transparent 24%),
    radial-gradient(circle at 50% 48%, rgba(142, 222, 255, 0.16), transparent 44%);
  animation: lina-aeon-light 5.8s ease-in-out infinite;
}

.lina-aeon-seal-stone {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 112px;
  height: 148px;
  transform: translateX(-50%);
  border-radius: 46px 46px 14px 14px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(18, 21, 29, 0.86) 48% 52%, transparent 53%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.82), rgba(157, 174, 190, 0.92) 52%, rgba(77, 89, 110, 0.96));
  box-shadow: 0 0 48px rgba(255, 255, 255, 0.26), inset 0 0 26px rgba(10, 14, 22, 0.32);
  animation: lina-aeon-stone-crack 4.8s ease forwards;
}

.lina-aeon-lina {
  position: absolute;
  left: calc(50% - 18px);
  bottom: 46px;
  width: 36px;
  height: 86px;
  border-radius: 18px 18px 10px 10px;
  background:
    radial-gradient(circle at 50% 12%, #ffe0bd 0 16px, transparent 17px),
    linear-gradient(180deg, #f8c971 20%, #f4f7ff 52%, #49606f 100%);
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.42);
  animation: lina-aeon-lina-become 5.8s ease forwards;
}

.lina-aeon-wings::before,
.lina-aeon-wings::after {
  content: "";
  position: absolute;
  bottom: 86px;
  width: 86px;
  height: 54px;
  border-radius: 70% 18% 70% 22%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(182, 228, 255, 0.24));
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.28);
  transform-origin: 100% 80%;
  animation: lina-aeon-wings-fade 5.8s ease forwards;
}

.lina-aeon-wings::before {
  left: calc(50% - 108px);
  transform: rotate(-20deg);
}

.lina-aeon-wings::after {
  right: calc(50% - 108px);
  transform: scaleX(-1) rotate(-20deg);
}

.lina-aeon-release-path {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 220px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.46), transparent 72%);
  animation: lina-aeon-path 6.2s ease forwards;
}

.lina-aeon-release-card--release .lina-aeon-lina {
  animation: lina-aeon-walk-away 6.2s ease forwards;
}

.lina-aeon-release-card--release .lina-aeon-wings::before,
.lina-aeon-release-card--release .lina-aeon-wings::after {
  animation: lina-aeon-release-wings 6.2s ease forwards;
}

.lina-aeon-release-copy {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.lina-aeon-release-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.35rem;
}

.lina-aeon-release-copy p {
  margin: 0;
  color: rgba(246, 248, 255, 0.84);
  line-height: 1.45;
}

.lina-aeon-release-card--seal .lina-aeon-release-copy button,
.lina-aeon-release-card--release .lina-aeon-release-copy button {
  justify-self: end;
  opacity: 0.46;
  pointer-events: none;
}

.lina-aeon-release-card--seal.is-ready .lina-aeon-release-copy button,
.lina-aeon-release-card--release.is-ready .lina-aeon-release-copy button {
  opacity: 1;
  pointer-events: auto;
}

@keyframes lina-aeon-light {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes lina-aeon-stone-crack {
  0% { filter: brightness(0.82); transform: translateX(-50%) scale(1); }
  52% { filter: brightness(1.18); transform: translateX(-50%) scale(1.04); }
  100% { filter: brightness(1.4); transform: translateX(-50%) scale(0.92); opacity: 0.28; }
}

@keyframes lina-aeon-lina-become {
  0%, 42% { opacity: 0; transform: translateY(18px) scale(0.92); }
  58% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0.92; transform: translateY(-6px) scale(1.14); filter: saturate(0.55) brightness(1.4); }
}

@keyframes lina-aeon-wings-fade {
  0%, 48% { opacity: 0; }
  62% { opacity: 0.92; }
  100% { opacity: 0.18; filter: blur(2px); }
}

@keyframes lina-aeon-path {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
  24% { opacity: 0.8; transform: translateX(-50%) scaleX(0.74); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(1.4); }
}

@keyframes lina-aeon-walk-away {
  0% { opacity: 1; transform: translate(0, 0) scale(1); filter: none; }
  38% { opacity: 1; transform: translate(52px, -18px) scale(0.88); filter: saturate(0.7) brightness(1.18); }
  72% { opacity: 0.72; transform: translate(122px, -54px) scale(0.58); filter: saturate(0.3) brightness(1.8); }
  100% { opacity: 0; transform: translate(184px, -86px) scale(0.28); filter: blur(3px) brightness(2.4); }
}

@keyframes lina-aeon-release-wings {
  0% { opacity: 0.86; filter: none; }
  44% { opacity: 0.58; filter: saturate(0.45) brightness(1.35); }
  100% { opacity: 0; filter: blur(5px) brightness(2.2); }
}

.panda-gateway-movie-card {
  border-color: rgba(129, 239, 188, 0.36);
  background:
    linear-gradient(180deg, rgba(10, 28, 25, 0.96), rgba(5, 10, 10, 0.98));
}

.panda-gateway-movie-card .devils-movie-copy h2 {
  color: #c9ffe0;
}

.panda-gateway-movie-card .devils-movie-frame {
  filter: saturate(1.1) contrast(1.05) brightness(0.98);
}

.panda-gateway-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(117, 245, 187, 0.11) 37px 40px),
    radial-gradient(circle at 56% 42%, rgba(102, 232, 168, 0.2), transparent 58%),
    linear-gradient(90deg, transparent, rgba(20, 92, 68, 0.22), transparent);
}

.panda-gateway-movie-card .devils-movie-dots span.active {
  background: #81efbc;
  box-shadow: 0 0 14px rgba(129, 239, 188, 0.78);
}

.panda-gateway-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(54, 139, 95, 0.98), rgba(18, 62, 49, 0.98));
  border-color: rgba(191, 255, 222, 0.5);
}

.heartroot-shrine-movie-card {
  border-color: rgba(139, 255, 186, 0.38);
  background:
    radial-gradient(circle at 50% 20%, rgba(116, 255, 174, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(5, 20, 13, 0.96), rgba(2, 8, 6, 0.98));
}

.heartroot-shrine-movie-card .devils-movie-copy h2 {
  color: #d7ffd4;
}

.heartroot-shrine-movie-card .devils-movie-frame {
  filter: saturate(1.08) contrast(1.05) brightness(0.98);
}

.heartroot-shrine-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(139, 255, 186, 0.11) 37px 40px),
    radial-gradient(circle at 50% 42%, rgba(88, 255, 145, 0.20), transparent 58%),
    linear-gradient(90deg, transparent, rgba(10, 85, 48, 0.23), transparent);
}

.heartroot-shrine-movie-card .devils-movie-dots span.active {
  background: #8cffbc;
  box-shadow: 0 0 14px rgba(140, 255, 188, 0.78);
}

.heartroot-shrine-movie-card .devils-movie-controls button {
  color: #06150d;
  background: linear-gradient(180deg, rgba(147, 255, 184, 0.98), rgba(58, 139, 86, 0.98));
  border-color: rgba(214, 255, 225, 0.58);
}

.panda-orb-sky-movie-card {
  border-color: rgba(255, 231, 146, 0.42);
  background:
    linear-gradient(180deg, rgba(23, 28, 17, 0.96), rgba(6, 10, 7, 0.98));
}

.panda-orb-sky-movie-card .devils-movie-copy h2 {
  color: #fff2af;
}

.panda-orb-sky-movie-card .devils-movie-frame {
  filter: saturate(1.13) contrast(1.06) brightness(1.02);
}

.panda-orb-sky-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(255, 231, 146, 0.13) 37px 40px),
    radial-gradient(circle at 50% 40%, rgba(255, 247, 190, 0.22), transparent 58%),
    linear-gradient(90deg, transparent, rgba(74, 130, 58, 0.22), transparent);
}

.panda-orb-sky-movie-card .devils-movie-dots span.active {
  background: #ffe792;
  box-shadow: 0 0 14px rgba(255, 231, 146, 0.82);
}

.panda-orb-sky-movie-card .devils-movie-controls button {
  color: #191506;
  background: linear-gradient(180deg, rgba(255, 231, 146, 0.98), rgba(163, 125, 42, 0.98));
  border-color: rgba(255, 246, 197, 0.58);
}

.devils-final-movie-card {
  border-color: rgba(177, 126, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(18, 8, 34, 0.96), rgba(5, 6, 12, 0.98));
}

.devils-final-movie-card .devils-movie-frame {
  filter: saturate(1.12) contrast(1.08) brightness(0.96);
}

.devils-final-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 34px, rgba(166, 96, 255, 0.16) 35px 38px),
    radial-gradient(circle at 50% 45%, rgba(125, 60, 190, 0.22), transparent 58%),
    linear-gradient(90deg, transparent, rgba(39, 12, 72, 0.24), transparent);
}

.devils-final-movie-card .devils-movie-dots span.active {
  background: #b17eff;
  box-shadow: 0 0 14px rgba(177, 126, 255, 0.78);
}

.devils-final-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(113, 54, 180, 0.98), rgba(37, 15, 74, 0.98));
  border-color: rgba(211, 187, 255, 0.48);
}

.devils-post-don-movie-card {
  border-color: rgba(196, 116, 255, 0.38);
  background:
    radial-gradient(circle at 50% 26%, rgba(126, 42, 190, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(16, 7, 30, 0.97), rgba(4, 5, 10, 0.99));
}

.devils-post-don-movie-card .devils-movie-frame {
  filter: saturate(1.12) contrast(1.09) brightness(0.95);
}

.devils-post-don-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 32px, rgba(190, 110, 255, 0.16) 33px 37px),
    radial-gradient(circle at 50% 43%, rgba(158, 72, 245, 0.25), transparent 58%),
    linear-gradient(90deg, transparent, rgba(34, 10, 64, 0.30), transparent);
}

.devils-post-don-movie-card .devils-movie-dots span.active {
  background: #c98cff;
  box-shadow: 0 0 14px rgba(201, 140, 255, 0.82);
}

.devils-post-don-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(139, 62, 210, 0.98), rgba(35, 12, 67, 0.98));
  border-color: rgba(226, 199, 255, 0.52);
}

.divine-shadow-battle-movie-card {
  border-color: rgba(222, 206, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(19, 13, 34, 0.96), rgba(5, 6, 12, 0.98));
}

.divine-shadow-battle-movie-card .devils-movie-copy h2 {
  color: #efe6ff;
}

.divine-shadow-battle-movie-card .devils-movie-frame {
  filter: saturate(1.1) contrast(1.07) brightness(0.98);
}

.divine-shadow-battle-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 36px, rgba(197, 170, 255, 0.12) 37px 40px),
    radial-gradient(circle at 34% 34%, rgba(255, 229, 150, 0.16), transparent 46%),
    radial-gradient(circle at 72% 34%, rgba(133, 70, 255, 0.20), transparent 52%),
    linear-gradient(90deg, transparent, rgba(46, 23, 82, 0.23), transparent);
}

.divine-shadow-battle-movie-card .devils-movie-dots span.active {
  background: #d4b8ff;
  box-shadow: 0 0 14px rgba(212, 184, 255, 0.78);
}

.divine-shadow-battle-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(124, 76, 185, 0.98), rgba(35, 20, 73, 0.98));
  border-color: rgba(227, 211, 255, 0.5);
}

.umbrael-truth-movie-card .devils-movie-frame {
  animation: story-frame-breathe 5.8s ease-in-out infinite;
}

.umbrael-gate-reason-movie-card,
.lina-sacrifice-movie-card,
.lina-false-sacrifice-movie-card {
  border-color: rgba(198, 174, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(21, 18, 27, 0.97), rgba(5, 6, 10, 0.99));
}

.prestige-memory-movie-card {
  border-color: rgba(156, 224, 208, 0.36);
  background:
    linear-gradient(180deg, rgba(14, 28, 28, 0.96), rgba(6, 8, 11, 0.99));
}

.lina-aeon-release-movie-card {
  border-color: rgba(245, 248, 255, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.16), transparent 40%),
    linear-gradient(180deg, rgba(16, 19, 27, 0.97), rgba(5, 6, 10, 0.99));
}

.beyond-tier7-sacrifice-movie-card {
  border-color: rgba(255, 236, 190, 0.48);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 247, 224, 0.2), transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(178, 30, 36, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(32, 16, 18, 0.97), rgba(5, 6, 10, 0.99));
}

.excalibur-awakening-movie-card {
  border-color: rgba(255, 230, 150, 0.62);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 242, 188, 0.24), transparent 42%),
    radial-gradient(circle at 50% 48%, rgba(72, 164, 255, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(20, 25, 43, 0.98), rgba(5, 7, 14, 0.99));
  box-shadow:
    0 28px 96px rgba(0, 0, 0, 0.76),
    0 0 42px rgba(255, 215, 122, 0.16),
    inset 0 0 0 1px rgba(136, 207, 255, 0.16);
}

.excalibur-awakening-movie-card .devils-movie-copy h2 {
  color: #fff0b9;
  text-shadow: 0 0 18px rgba(255, 216, 112, 0.38);
}

.excalibur-awakening-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.4s ease-in-out infinite;
  filter: saturate(1.08) contrast(1.06) brightness(1.03);
}

.excalibur-awakening-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 44px, rgba(255, 239, 176, 0.1) 45px 48px),
    radial-gradient(circle at 50% 42%, rgba(255, 223, 128, 0.24), transparent 54%),
    radial-gradient(circle at 50% 62%, rgba(72, 170, 255, 0.18), transparent 64%);
  mix-blend-mode: screen;
  opacity: 0.34;
}

.beyond-tier7-sacrifice-movie-card .devils-movie-copy h2 {
  color: #fff2cd;
}

.beyond-tier7-sacrifice-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.2s ease-in-out infinite;
  filter: saturate(1.06) contrast(1.04) brightness(1.03);
}

.umbrael-gate-reason-movie-card .devils-movie-frame,
.lina-sacrifice-movie-card .devils-movie-frame,
.lina-false-sacrifice-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.2s ease-in-out infinite;
}

.lina-aeon-release-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.4s ease-in-out infinite;
  filter: saturate(1.04) contrast(1.05) brightness(1.02);
}

.prestige-memory-movie-card .devils-movie-frame {
  animation: story-rift-pulse 5.2s ease-in-out infinite;
}

.umbrael-truth-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 46px, rgba(255, 245, 210, 0.10) 47px 49px),
    linear-gradient(90deg, transparent, rgba(78, 48, 118, 0.22), transparent);
  opacity: 0.28;
}

.umbrael-gate-reason-movie-card .devils-movie-mist,
.lina-sacrifice-movie-card .devils-movie-mist,
.lina-false-sacrifice-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(210, 190, 255, 0.12) 43px 46px),
    radial-gradient(circle at 52% 46%, rgba(86, 44, 126, 0.24), transparent 57%),
    linear-gradient(90deg, transparent, rgba(69, 44, 103, 0.28), transparent);
  opacity: 0.32;
}

.prestige-memory-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 38px, rgba(180, 236, 222, 0.11) 39px 42px),
    radial-gradient(circle at 45% 44%, rgba(92, 183, 168, 0.20), transparent 56%),
    radial-gradient(circle at 70% 38%, rgba(220, 190, 120, 0.16), transparent 48%);
  opacity: 0.34;
}

.lina-aeon-release-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 42px, rgba(245, 248, 255, 0.10) 43px 46px),
    radial-gradient(circle at 52% 44%, rgba(214, 230, 255, 0.22), transparent 58%),
    linear-gradient(90deg, transparent, rgba(116, 158, 210, 0.18), transparent);
  opacity: 0.36;
}

.beyond-tier7-sacrifice-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(112deg, transparent 0 42px, rgba(255, 246, 210, 0.11) 43px 46px),
    radial-gradient(circle at 50% 42%, rgba(255, 235, 170, 0.24), transparent 56%),
    radial-gradient(circle at 50% 70%, rgba(154, 24, 35, 0.2), transparent 62%);
  opacity: 0.34;
}

.umbrael-gate-reason-movie-card .devils-movie-dots span.active,
.lina-sacrifice-movie-card .devils-movie-dots span.active,
.lina-false-sacrifice-movie-card .devils-movie-dots span.active {
  background: #cdbbff;
  box-shadow: 0 0 14px rgba(205, 187, 255, 0.72);
}

.beyond-tier7-sacrifice-movie-card .devils-movie-dots span.active {
  background: #fff2cd;
  box-shadow: 0 0 14px rgba(255, 235, 180, 0.76);
}

.lina-aeon-release-movie-card .devils-movie-copy h2 {
  color: #f8fbff;
}

.lina-aeon-release-movie-card .devils-movie-dots span.active {
  background: #f8fbff;
  box-shadow: 0 0 14px rgba(248, 251, 255, 0.76);
}

.prestige-memory-movie-card .devils-movie-dots span.active {
  background: #9fe3d7;
  box-shadow: 0 0 14px rgba(159, 227, 215, 0.72);
}

.umbrael-gate-reason-movie-card .devils-movie-controls button,
.lina-sacrifice-movie-card .devils-movie-controls button,
.lina-false-sacrifice-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(97, 70, 141, 0.98), rgba(31, 24, 55, 0.98));
  border-color: rgba(221, 210, 255, 0.48);
}

.beyond-tier7-sacrifice-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(126, 55, 47, 0.98), rgba(36, 24, 30, 0.98));
  border-color: rgba(255, 231, 188, 0.5);
}

.prestige-memory-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(42, 111, 101, 0.98), rgba(24, 53, 61, 0.98));
  border-color: rgba(198, 241, 233, 0.48);
}

.lina-aeon-release-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(108, 126, 160, 0.98), rgba(30, 35, 52, 0.98));
  border-color: rgba(238, 246, 255, 0.50);
}

/* ===== ANIM-03 — themed skins for the previously untreated movie classNames.
 * Heaven pair = white-gold dawn; return-abyss = abyss teal/gold (echoes
 * .lina-abyss-boss-intro); aeon-orb-door = drowned white-gold/teal.
 * lina-false-sacrifice joins the violet gate-reason/sacrifice selector lists
 * and thicket-release joins the green safari-lore lists elsewhere in this
 * file; devils-rabbit-kidnap intentionally keeps the base Devils theme. */

.lina-heaven-life-movie-card,
.lina-heaven-reunion-movie-card {
  border-color: rgba(255, 241, 200, 0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 244, 214, 0.20), transparent 42%),
    linear-gradient(180deg, rgba(32, 28, 20, 0.96), rgba(10, 9, 8, 0.99));
}

.lina-heaven-life-movie-card .devils-movie-copy h2,
.lina-heaven-reunion-movie-card .devils-movie-copy h2 {
  color: #fff4d6;
}

.lina-heaven-life-movie-card .devils-movie-frame,
.lina-heaven-reunion-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.4s ease-in-out infinite;
  filter: saturate(1.04) contrast(1.03) brightness(1.04);
}

.lina-heaven-life-movie-card .devils-movie-mist,
.lina-heaven-reunion-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 44px, rgba(255, 240, 196, 0.12) 45px 48px),
    radial-gradient(circle at 50% 30%, rgba(255, 226, 150, 0.20), transparent 56%),
    linear-gradient(90deg, transparent, rgba(214, 186, 120, 0.16), transparent);
  opacity: 0.36;
}

.lina-heaven-life-movie-card .devils-movie-dots span.active,
.lina-heaven-reunion-movie-card .devils-movie-dots span.active {
  background: #ffe9b0;
  box-shadow: 0 0 14px rgba(255, 233, 176, 0.78);
}

.lina-heaven-life-movie-card .devils-movie-controls button,
.lina-heaven-reunion-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(168, 138, 70, 0.98), rgba(74, 58, 30, 0.98));
  border-color: rgba(255, 238, 190, 0.52);
}

.lina-return-abyss-movie-card {
  border-color: rgba(255, 228, 136, 0.30);
  background:
    radial-gradient(circle at 50% 8%, rgba(125, 240, 255, 0.10), transparent 44%),
    linear-gradient(180deg, rgba(10, 12, 24, 0.97), rgba(4, 5, 12, 0.99));
}

.lina-return-abyss-movie-card .devils-movie-copy h2 {
  color: #fff8df;
  text-shadow: 0 0 18px rgba(125, 240, 255, 0.22);
}

.lina-return-abyss-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.2s ease-in-out infinite;
  filter: saturate(1.08) contrast(1.06) brightness(0.98);
}

.lina-return-abyss-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 42px, rgba(125, 240, 255, 0.10) 43px 46px),
    radial-gradient(circle at 52% 42%, rgba(246, 214, 111, 0.16), transparent 54%),
    linear-gradient(90deg, transparent, rgba(26, 60, 84, 0.26), transparent);
  opacity: 0.34;
}

.lina-return-abyss-movie-card .devils-movie-dots span.active {
  background: #ffe78d;
  box-shadow: 0 0 14px rgba(125, 240, 255, 0.62);
}

.lina-return-abyss-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(34, 84, 102, 0.98), rgba(16, 32, 48, 0.98));
  border-color: rgba(255, 231, 141, 0.44);
}

.aeon-orb-door-movie-card {
  border-color: rgba(214, 240, 244, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(226, 246, 248, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(12, 22, 26, 0.97), rgba(4, 8, 11, 0.99));
}

.aeon-orb-door-movie-card .devils-movie-copy h2 {
  color: #eafdff;
}

.aeon-orb-door-movie-card .devils-movie-frame {
  animation: story-frame-breathe 6.4s ease-in-out infinite;
  filter: saturate(1.02) contrast(1.05) brightness(1.0);
}

.aeon-orb-door-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 44px, rgba(214, 244, 248, 0.10) 45px 48px),
    radial-gradient(circle at 48% 40%, rgba(150, 214, 222, 0.18), transparent 56%),
    radial-gradient(circle at 64% 34%, rgba(244, 226, 156, 0.12), transparent 46%);
  opacity: 0.34;
}

.aeon-orb-door-movie-card .devils-movie-dots span.active {
  background: #cdeef2;
  box-shadow: 0 0 14px rgba(205, 238, 242, 0.74);
}

.aeon-orb-door-movie-card .devils-movie-controls button {
  background: linear-gradient(180deg, rgba(86, 128, 134, 0.98), rgba(28, 48, 54, 0.98));
  border-color: rgba(226, 246, 248, 0.5);
}

/* ===== ANIM-01 — story-movie player: two stacked frame layers, 460ms
 * crossfade, alternating Ken Burns drift, caption rise, dot polish. ALL new
 * layer CSS is scoped under .devils-movie-stage--xfade (only emitted by
 * showStoryMovieSheet) so the legacy single-div player markup keeps rendering
 * untouched — an unscoped opacity: 0 default would blank it. */

.devils-movie-stage--xfade .devils-movie-frame {
  opacity: 0;
  transition: opacity 460ms ease, filter 240ms ease;
  will-change: opacity, transform;
}

.devils-movie-stage--xfade .devils-movie-frame.is-front {
  opacity: 1;
}

.devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards;
}

.devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards;
}

/* Compose the themed cards' breathe/pulse loops INTO the Ken Burns animation
 * list — a bare `animation:` shorthand would otherwise replace them. */
.umbrael-truth-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards, story-frame-breathe 5.8s ease-in-out infinite;
}

.umbrael-truth-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards, story-frame-breathe 5.8s ease-in-out infinite;
}

.umbrael-gate-reason-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.lina-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.lina-false-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.beyond-tier7-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.lina-return-abyss-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards, story-frame-breathe 6.2s ease-in-out infinite;
}

.umbrael-gate-reason-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.lina-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.lina-false-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.beyond-tier7-sacrifice-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.lina-return-abyss-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards, story-frame-breathe 6.2s ease-in-out infinite;
}

.lina-aeon-release-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.lina-heaven-life-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.lina-heaven-reunion-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.aeon-orb-door-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
.excalibur-awakening-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards, story-frame-breathe 6.4s ease-in-out infinite;
}

.lina-aeon-release-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.lina-heaven-life-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.lina-heaven-reunion-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.aeon-orb-door-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd,
.excalibur-awakening-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards, story-frame-breathe 6.4s ease-in-out infinite;
}

.prestige-memory-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards, story-rift-pulse 5.2s ease-in-out infinite;
}

.prestige-memory-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards, story-rift-pulse 5.2s ease-in-out infinite;
}

.rift-explanation-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even {
  animation: devils-movie-kenburns-even 9s ease-out forwards, story-rift-pulse 4.4s ease-in-out infinite;
}

.rift-explanation-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
  animation: devils-movie-kenburns-odd 9s ease-out forwards, story-rift-pulse 4.4s ease-in-out infinite;
}

/* The eternal-binding art began as six portrait panels in one generated strip.
 * Its repaired frames must replace each other cleanly: no outgoing layer and no
 * camera drift that can make the previous panel look as if it is still attached. */
.lina-sacrifice-movie-card .devils-movie-stage--cut .devils-movie-frame {
  transition: none;
}

.lina-sacrifice-movie-card .devils-movie-stage--cut .devils-movie-frame.kb-even,
.lina-sacrifice-movie-card .devils-movie-stage--cut .devils-movie-frame.kb-odd {
  animation: none;
  transform: none;
}

/* Caption rise — reaches the caption through the stage's sibling combinator so
 * it stays scoped to the crossfade player. */
.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy h2,
.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy p {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy p {
  transition-delay: 70ms;
}

.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy.is-in h2,
.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy.is-in p {
  opacity: 1;
  transform: translateY(0);
}

/* Dot polish */
.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-dots span {
  transition: transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-dots span.active {
  transform: scale(1.35);
}

@keyframes devils-movie-kenburns-even {
  0% { transform: scale(1.07) translate(0.9%, 0.6%); }
  100% { transform: scale(1.01) translate(0, 0); }
}

@keyframes devils-movie-kenburns-odd {
  0% { transform: scale(1.07) translate(-0.9%, -0.6%); }
  100% { transform: scale(1.01) translate(0, 0); }
}

/* ===== story-movie AAA fullscreen — motion + responsive ===== */
.modal:has(> .devils-movie-card) {
  padding: 0;
  background: #060409;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@keyframes devils-movie-card-enter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes devils-movie-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-24px, 16px); }
  50% { transform: translate(14px, -20px); }
  75% { transform: translate(-8px, -10px); }
  100% { transform: translate(0, 0); }
}

/* progress segments animate width, never scale */
.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-dots span {
  transition: width 300ms ease, background 300ms ease, box-shadow 300ms ease;
}

.devils-movie-stage--xfade + .devils-movie-caption .devils-movie-dots span.active {
  transform: none;
}

/* compact landscape phones */
@media (max-width: 1024px) and (max-height: 500px) {
  .devils-movie-caption {
    gap: 16px;
    padding:
      10px
      max(24px, env(safe-area-inset-right, 0px))
      max(20px, env(safe-area-inset-bottom, 0px))
      max(24px, env(safe-area-inset-left, 0px));
  }

  .devils-movie-caption::before {
    height: max(100%, 50vh);
    background: linear-gradient(180deg, rgba(8, 6, 10, 0) 0%, rgba(8, 6, 10, 0.28) 26%, rgba(8, 6, 10, 0.55) 52%, rgba(8, 6, 10, 0.9) 100%);
  }

  .devils-movie-kicker {
    margin-bottom: 4px;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .devils-movie-copy h2 {
    margin-bottom: 4px;
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  }

  .devils-movie-copy p {
    max-width: 52ch;
    min-height: 2.9em;
    max-height: 30vh;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .devils-movie-controls {
    gap: 8px;
  }

  .devils-movie-controls button {
    min-width: 0;
    min-height: 44px;
    padding: 9px 18px;
    font-size: 0.84rem;
  }

  .devils-movie-dots {
    gap: 5px;
    padding: 5px 8px;
  }

  .devils-movie-dots span {
    width: 14px;
    height: 3px;
  }

  .devils-movie-dots span.active {
    width: 26px;
  }
}

/* portrait safety: stack copy above full-width controls */
@media (orientation: portrait) and (max-width: 700px) {
  .devils-movie-caption {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
  }

  .devils-movie-copy {
    max-width: none;
  }

  .devils-movie-controls {
    justify-items: stretch;
  }

  .devils-movie-dots {
    justify-content: center;
  }

  .devils-movie-buttons {
    flex-wrap: nowrap;
  }

  .devils-movie-buttons button {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .devils-movie-card {
    animation: none;
  }

  .devils-movie-stage::after {
    animation: none;
  }
}

/* ===== story-movie AAA — run 3: one accent per theme drives title tint,
 * progress fill, Next chrome, armed skip, and focus glow ===== */
.safari-lore-movie-card { --movie-accent: #e5b85a; }
.thicket-release-movie-card { --movie-accent: #e5b85a; }
.devils-safari-movie-card { --movie-accent: #8dde75; }
.lina-farewell-movie-card { --movie-accent: #f0c86e; }
.lina-dreams-movie-card { --movie-accent: #f0c86e; }
.heartroot-beyond-reunion-embrace-movie-card { --movie-accent: #f0c86e; }
.honeydew-rescue-movie-card { --movie-accent: #f0c86e; }
.panda-gateway-movie-card { --movie-accent: #81efbc; }
.heartroot-shrine-movie-card { --movie-accent: #8cffbc; }
.panda-orb-sky-movie-card { --movie-accent: #ffe792; }
.devils-final-movie-card { --movie-accent: #b17eff; }
.devils-post-don-movie-card { --movie-accent: #c98cff; }
.divine-shadow-battle-movie-card { --movie-accent: #d4b8ff; }
.umbrael-gate-reason-movie-card { --movie-accent: #cdbbff; }
.lina-sacrifice-movie-card { --movie-accent: #cdbbff; }
.lina-false-sacrifice-movie-card { --movie-accent: #cdbbff; }
.beyond-tier7-sacrifice-movie-card { --movie-accent: #fff2cd; }
.lina-aeon-release-movie-card { --movie-accent: #f8fbff; }
.prestige-memory-movie-card { --movie-accent: #9fe3d7; }
.lina-heaven-life-movie-card { --movie-accent: #ffe9b0; }
.lina-heaven-reunion-movie-card { --movie-accent: #ffe9b0; }
.lina-return-abyss-movie-card { --movie-accent: #ffe78d; }
.aeon-orb-door-movie-card { --movie-accent: #cdeef2; }

.devils-movie-card .devils-movie-copy h2 {
  color: color-mix(in oklch, var(--movie-accent) 60%, white);
  letter-spacing: -0.01em;
}

.devils-movie-card .devils-movie-dots span {
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.devils-movie-card .devils-movie-dots span.active {
  background: var(--movie-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--movie-accent) 62%, transparent);
}

.devils-movie-card .devils-movie-buttons button[data-devils-movie-next] {
  background: linear-gradient(180deg,
    var(--movie-btn-top, color-mix(in srgb, var(--movie-accent) 74%, #33241b)),
    var(--movie-btn-bottom, color-mix(in srgb, var(--movie-accent) 48%, #171009)));
  border-color: color-mix(in srgb, var(--movie-accent) 50%, rgba(255, 255, 255, 0.5));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 22px color-mix(in srgb, var(--movie-accent) 32%, transparent);
  color: var(--movie-btn-ink, #fff);
  text-shadow: var(--movie-btn-ink-shadow, 0 1px 2px rgba(0, 0, 0, 0.4));
}

.devils-movie-card .devils-movie-buttons button[data-devils-movie-next]:hover {
  border-color: color-mix(in srgb, var(--movie-accent) 40%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 1px color-mix(in srgb, var(--movie-accent) 60%, transparent),
    0 6px 26px color-mix(in srgb, var(--movie-accent) 42%, transparent);
}

.devils-movie-card .devils-movie-buttons button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--movie-accent) 75%, #fff),
    0 4px 18px color-mix(in srgb, var(--movie-accent) 35%, transparent);
}

/* destructive action sits apart from the advance cluster */
.devils-movie-card .devils-movie-buttons button[data-devils-movie-skip] {
  margin-right: 6px;
}

/* armed skip must read as armed at a glance */
.devils-movie-card .devils-movie-buttons button[data-devils-movie-skip].is-armed {
  color: color-mix(in srgb, var(--movie-accent) 55%, #fff);
  border-color: color-mix(in srgb, var(--movie-accent) 70%, rgba(255, 255, 255, 0.4));
  background: color-mix(in srgb, var(--movie-accent) 16%, rgba(12, 10, 14, 0.5));
  animation: devils-movie-skip-pulse 1.2s ease-in-out infinite;
}

@keyframes devils-movie-skip-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 color-mix(in srgb, var(--movie-accent) 45%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 16px color-mix(in srgb, var(--movie-accent) 42%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* disabled Back keeps its glass container, only the affordance dims */
.devils-movie-card .devils-movie-buttons button[data-devils-movie-prev][disabled] {
  opacity: 1;
  color: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(12, 10, 14, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* voice-only: same anchor point as the full caption, controls in one capsule */
.devils-movie-card--voice-only .devils-movie-controls {
  padding: 10px 14px;
  border-radius: 26px;
  background: rgba(10, 8, 12, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .devils-movie-card .devils-movie-buttons button[data-devils-movie-skip].is-armed {
    animation: none;
  }
}

/* ===== story-movie AAA — run 4: cumulative progress, shared rails,
 * stable lower-third rhythm ===== */

/* desktop lower-third sits at 5%+ title-safe */
.devils-movie-caption {
  padding-bottom: calc(clamp(24px, 4.4vh, 40px) + env(safe-area-inset-bottom, 0px));
}

/* body ink hugs a constant bottom line; the reserved 2-line box keeps the
 * title fixed, so neither edge moves between 1- and 2-line frames */
.devils-movie-copy p {
  display: grid;
  align-content: end;
}

/* full-width segmented track: flush with the button rail by construction */
.devils-movie-card .devils-movie-dots {
  width: 100%;
  gap: 6px;
  padding: 5px 7px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.devils-movie-card .devils-movie-dots span {
  width: auto;
  flex: 1 1 0;
  height: 4px;
}

/* progress reads cumulatively: past 55% accent, current full + glow */
.devils-movie-card .devils-movie-dots span.done {
  background: color-mix(in srgb, var(--movie-accent) 62%, rgba(255, 255, 255, 0.2));
  box-shadow: none;
}

/* voice-only capsule: one padding box, both rows end on the same rail;
 * the capsule itself is the glass, the track drops its own chrome */
.devils-movie-card--voice-only .devils-movie-controls {
  padding: 12px 16px 12px;
  gap: 9px;
}

.devils-movie-card--voice-only .devils-movie-dots {
  padding: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 1024px) and (max-height: 500px) {
  .devils-movie-caption {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px));
  }

  .devils-movie-controls button {
    min-height: 46px;
  }

  .devils-movie-card .devils-movie-dots span {
    height: 3px;
  }
}

/* ===== story-movie AAA — run 5: track width floor, CTA ink contrast,
 * bigger touch pills ===== */
.devils-movie-controls {
  min-width: 300px;
}

.safari-lore-movie-card { --movie-btn-ink: color-mix(in srgb, #e5b85a 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #e5b85a 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #e5b85a 72%, #241708); }
.thicket-release-movie-card { --movie-btn-ink: color-mix(in srgb, #e5b85a 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #e5b85a 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #e5b85a 72%, #241708); }
.devils-safari-movie-card { --movie-btn-ink: color-mix(in srgb, #8dde75 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #8dde75 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #8dde75 72%, #241708); }
.lina-farewell-movie-card { --movie-btn-ink: color-mix(in srgb, #f0c86e 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #f0c86e 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #f0c86e 72%, #241708); }
.lina-dreams-movie-card { --movie-btn-ink: color-mix(in srgb, #f0c86e 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #f0c86e 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #f0c86e 72%, #241708); }
.heartroot-beyond-reunion-embrace-movie-card { --movie-btn-ink: color-mix(in srgb, #f0c86e 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #f0c86e 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #f0c86e 72%, #241708); }
.honeydew-rescue-movie-card { --movie-btn-ink: color-mix(in srgb, #f0c86e 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #f0c86e 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #f0c86e 72%, #241708); }
.panda-gateway-movie-card { --movie-btn-ink: color-mix(in srgb, #81efbc 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #81efbc 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #81efbc 72%, #241708); }
.heartroot-shrine-movie-card { --movie-btn-ink: color-mix(in srgb, #8cffbc 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #8cffbc 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #8cffbc 72%, #241708); }
.panda-orb-sky-movie-card { --movie-btn-ink: color-mix(in srgb, #ffe792 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #ffe792 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #ffe792 72%, #241708); }
.divine-shadow-battle-movie-card { --movie-btn-ink: color-mix(in srgb, #d4b8ff 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #d4b8ff 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #d4b8ff 72%, #241708); }
.umbrael-gate-reason-movie-card { --movie-btn-ink: color-mix(in srgb, #cdbbff 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #cdbbff 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #cdbbff 72%, #241708); }
.lina-sacrifice-movie-card { --movie-btn-ink: color-mix(in srgb, #cdbbff 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #cdbbff 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #cdbbff 72%, #241708); }
.lina-false-sacrifice-movie-card { --movie-btn-ink: color-mix(in srgb, #cdbbff 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #cdbbff 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #cdbbff 72%, #241708); }
.beyond-tier7-sacrifice-movie-card { --movie-btn-ink: color-mix(in srgb, #fff2cd 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #fff2cd 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #fff2cd 72%, #241708); }
.lina-aeon-release-movie-card { --movie-btn-ink: color-mix(in srgb, #f8fbff 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #f8fbff 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #f8fbff 72%, #241708); }
.prestige-memory-movie-card { --movie-btn-ink: color-mix(in srgb, #9fe3d7 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #9fe3d7 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #9fe3d7 72%, #241708); }
.lina-heaven-life-movie-card { --movie-btn-ink: color-mix(in srgb, #ffe9b0 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #ffe9b0 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #ffe9b0 72%, #241708); }
.lina-heaven-reunion-movie-card { --movie-btn-ink: color-mix(in srgb, #ffe9b0 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #ffe9b0 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #ffe9b0 72%, #241708); }
.lina-return-abyss-movie-card { --movie-btn-ink: color-mix(in srgb, #ffe78d 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #ffe78d 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #ffe78d 72%, #241708); }
.aeon-orb-door-movie-card { --movie-btn-ink: color-mix(in srgb, #cdeef2 12%, #201507); --movie-btn-ink-shadow: none; --movie-btn-top: color-mix(in srgb, #cdeef2 88%, #fff2cf); --movie-btn-bottom: color-mix(in srgb, #cdeef2 72%, #241708); }

@media (max-width: 1024px) and (max-height: 500px) {
  .devils-movie-controls {
    min-width: 220px;
  }

  .devils-movie-controls button {
    min-height: 48px;
  }
}

.rift-explanation-movie-card .devils-movie-frame {
  animation: story-rift-pulse 4.4s ease-in-out infinite;
}

.rift-explanation-movie-card .devils-movie-mist {
  background:
    repeating-linear-gradient(105deg, transparent 0 34px, rgba(166, 99, 255, 0.14) 35px 38px),
    radial-gradient(circle at 50% 44%, rgba(190, 108, 255, 0.22), transparent 55%);
  opacity: 0.34;
}

.lina-abyss-boss-intro {
  width: min(780px, 94vw);
  padding: 0;
  overflow: hidden;
  background: #070812;
  border: 1px solid rgba(255, 228, 136, 0.26);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.68), inset 0 0 0 1px rgba(125, 240, 255, 0.08);
}
/* dawn-toned variant for the Heaven angel bosses (no art, gold light) */
.lina-heaven-boss-intro {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 250, 226, 0.14), transparent 62%),
    linear-gradient(180deg, #2a2410 0%, #1a1608 60%, #120f06 100%);
  border: 1px solid rgba(255, 232, 154, 0.42);
  box-shadow: 0 24px 72px rgba(40, 26, 4, 0.66), inset 0 0 0 1px rgba(255, 232, 154, 0.14);
}
.lina-heaven-boss-intro .lina-abyss-boss-intro-copy span { color: #ffe9a8; }
.lina-heaven-boss-intro .lina-abyss-boss-intro-copy h2 {
  color: #fff6dc;
  text-shadow: 0 0 18px rgba(255, 224, 138, 0.5);
}
/* The fight CTA must read as THE button: big, gold, breathing - "Stell dich
   dem Morgen" was too easy to miss as a quiet default button. */
.lina-heaven-boss-intro .dialogue-actions button {
  min-width: min(320px, 78%);
  padding: 14px 26px;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe9a8, #f3d488);
  color: #3a2c0c;
  border-color: rgba(255, 244, 200, 0.85);
  box-shadow: 0 0 22px rgba(255, 224, 138, 0.45), 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  animation: heaven-cta-breathe 2s ease-in-out infinite;
}

.lina-heaven-boss-intro .dialogue-actions button:hover {
  filter: brightness(1.06);
}

@keyframes heaven-cta-breathe {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 224, 138, 0.35), 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.65); transform: scale(1); }
  50% { box-shadow: 0 0 30px rgba(255, 224, 138, 0.65), 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.65); transform: scale(1.025); }
}

@media (prefers-reduced-motion: reduce) {
  .lina-heaven-boss-intro .dialogue-actions button { animation: none; }
}
.lina-abyss-boss-intro-art {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #03040a;
}
.lina-abyss-boss-intro-copy {
  padding: 18px 22px 8px;
  text-align: center;
}
.lina-abyss-boss-intro-copy span {
  display: block;
  margin-bottom: 6px;
  color: #ffe78d;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lina-abyss-boss-intro-copy h2 {
  margin: 0 0 8px;
  color: #fff8df;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: 0;
  text-shadow: 0 0 20px rgba(125, 240, 255, 0.22);
}
.lina-abyss-boss-intro-copy p {
  margin: 0 auto;
  max-width: 58ch;
  color: rgba(244, 247, 255, 0.84);
  line-height: 1.48;
}
.lina-abyss-boss-intro .dialogue-actions {
  padding: 14px 18px 20px;
}

.lina-eternity-pain-boss-intro {
  border-color: rgba(238, 246, 255, 0.30);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.72), inset 0 0 0 1px rgba(238, 246, 255, 0.08);
}

.lina-eternity-pain-boss-intro .lina-abyss-boss-intro-copy span {
  color: #e8f2ff;
}

.lina-eternity-pain-boss-intro .lina-abyss-boss-intro-copy h2 {
  color: #f8fbff;
  text-shadow: 0 0 22px rgba(219, 232, 255, 0.24);
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal .lina-abyss-boss-intro {
    width: min(100vw, calc(100dvh * 16 / 9));
    max-height: 100dvh;
    border-radius: 0;
  }

  html.is-touch .modal .lina-abyss-boss-intro-art {
    aspect-ratio: 16 / 9;
    max-height: 56dvh;
    object-fit: contain;
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy {
    padding: 10px 14px 6px;
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy span {
    margin-bottom: 4px;
    font-size: clamp(0.62rem, 1.45vw, 0.76rem);
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy h2 {
    margin-bottom: 5px;
    font-size: clamp(1.02rem, 2.55vw, 1.34rem);
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy p {
    max-height: 18dvh;
    overflow: auto;
    font-size: clamp(0.72rem, 1.65vw, 0.88rem);
    line-height: 1.32;
  }

  html.is-touch .modal .lina-abyss-boss-intro .dialogue-actions {
    padding: 8px 12px 10px;
  }
}

.modal.lina-loop-finale-modal {
  padding: 0;
  place-items: stretch;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.lina-loop-finale {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #000;
}

.lina-loop-memory-stage,
.lina-loop-blackout,
.lina-loop-memory-frame,
.lina-loop-memory-spark,
.lina-loop-memory-vignette {
  position: absolute;
  inset: 0;
}

.lina-loop-memory-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(195, 232, 220, 0.10), transparent 42%),
    #000;
  transition: opacity 900ms ease, transform 1800ms cubic-bezier(0.12, 0.84, 0.22, 1), filter 1200ms ease;
}

.lina-loop-memory-frame {
  background-repeat: no-repeat;
  background-position: 0 center;
  filter: saturate(1.12) contrast(1.06) brightness(0.98);
  transform: scale(1.04);
  transition: filter 90ms ease, transform 140ms ease;
}

.lina-loop-memory-frame[data-flash="1"],
.lina-loop-memory-frame[data-flash="3"] {
  filter: saturate(1.28) contrast(1.14) brightness(1.12);
  transform: scale(1.075);
}

.lina-loop-memory-frame[data-flash="2"] {
  filter: saturate(0.92) contrast(1.2) brightness(0.82);
  transform: scale(1.02);
}

.lina-loop-memory-spark {
  pointer-events: none;
  background:
    repeating-linear-gradient(108deg, transparent 0 32px, rgba(255, 235, 168, 0.13) 33px 35px),
    repeating-linear-gradient(75deg, transparent 0 46px, rgba(123, 236, 214, 0.12) 47px 49px);
  mix-blend-mode: screen;
  opacity: 0.36;
  animation: lina-loop-memory-spark 1.25s linear infinite;
}

.lina-loop-memory-vignette {
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 36%, rgba(0, 0, 0, 0.44) 76%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.52), transparent 26%, transparent 74%, rgba(0, 0, 0, 0.56));
}

.lina-loop-finale.is-portal .lina-loop-memory-stage {
  transform: scale(1.24);
  filter: saturate(1.35) contrast(1.22) brightness(1.1);
}

.lina-loop-finale.is-portal .lina-loop-memory-frame {
  animation: lina-loop-portal-draw 1.8s ease-in forwards;
}

.lina-loop-finale.is-black .lina-loop-memory-stage {
  opacity: 0;
  transform: scale(1.72);
}

.lina-loop-blackout {
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  padding: 36px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.lina-loop-finale.is-black .lina-loop-blackout {
  opacity: 1;
  pointer-events: auto;
}

.lina-loop-reveal-lines {
  width: min(920px, 100%);
  min-height: clamp(96px, 20dvh, 180px);
  display: grid;
  place-items: center;
}

.lina-loop-reveal-line {
  max-width: 100%;
  color: #fff;
  font-size: 1.24rem;
  line-height: 1.45;
  font-weight: 650;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.28);
  animation: lina-loop-line-pop 880ms ease forwards;
}

.lina-loop-reveal-line.is-leaving {
  animation: lina-loop-line-vanish 960ms ease forwards;
}

.lina-loop-reveal-line.major {
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 850;
}

.lina-loop-continue {
  min-width: min(360px, 100%);
  border-color: rgba(255, 255, 255, 0.44);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(190, 213, 219, 0.96));
  color: #030507;
  box-shadow: 0 0 34px rgba(190, 230, 222, 0.32);
  opacity: 0;
  animation: lina-loop-button-in 620ms ease forwards;
}

.lina-loop-continue:hover {
  border-color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, #fff, #d8f1ee);
}

/* ANIM-10: subtle idle tap hint for the loop-memory reveal */
.lina-loop-tap-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 6dvh, 44px);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.lina-loop-tap-hint.is-visible {
  opacity: 1;
  animation: lina-loop-tap-hint-pulse 2.4s ease-in-out infinite;
}

@keyframes devils-movie-mist {
  0% { transform: translateX(-12%); opacity: 0.18; }
  45% { opacity: 0.38; }
  100% { transform: translateX(12%); opacity: 0.18; }
}

@keyframes lina-loop-memory-spark {
  0% { transform: translateX(-9%) translateY(0); opacity: 0.18; }
  50% { opacity: 0.45; }
  100% { transform: translateX(9%) translateY(-3%); opacity: 0.18; }
}

@keyframes lina-loop-portal-draw {
  0% { transform: scale(1.04); filter: saturate(1.1) brightness(1); }
  54% { transform: scale(1.18); filter: saturate(1.42) brightness(1.16); }
  100% { transform: scale(1.42); filter: saturate(0.3) brightness(0.18); }
}

@keyframes lina-loop-line-pop {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes lina-loop-line-vanish {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-12px) scale(0.985); filter: blur(3px); }
}

@keyframes lina-loop-button-in {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes lina-loop-tap-hint-pulse {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.9; }
}

@keyframes story-frame-breathe {
  0%, 100% { filter:saturate(1.02) contrast(1.02) brightness(0.96); }
  50% { filter:saturate(1.14) contrast(1.06) brightness(1.06); }
}

@keyframes story-rift-pulse {
  0%, 100% { filter:saturate(1.06) contrast(1.04) brightness(0.98); }
  48% { filter:saturate(1.26) contrast(1.08) brightness(1.08); }
}

/* ===== ANIM-02 — story-sequence reduced-motion safety block ==============
 * Infinite ambience loops stop outright; one-shot reveals jump to their final
 * frame (1ms); long stage transitions become instant. The loop-finale flash
 * filters are already disabled JS-side via STORY_REDUCED_MOTION.
 * EXTENSIBLE: later animation items append here (ANIM-07 --flash one-shots,
 * ANIM-08 screen-transition variants inherit the existing transition reduce
 * rule, ANIM-01 movie crossfade/Ken Burns layers). */
@media (prefers-reduced-motion: reduce) {
  .devils-movie-mist,
  .lina-loop-memory-spark,
  .lina-loop-tap-hint.is-visible,
  .lina-aeon-release-light,
  #speechBubble .speech-art.story-art-omen img,
  #speechBubble .speech-art.story-art-schematic::after,
  #speechBubble .speech-art.story-art-schematic img,
  #speechBubble .speech-art.story-art-gate::before,
  #speechBubble .speech-art.story-art-gate img,
  #speechBubble .speech-art.story-art-gate--flash::before,
  #speechBubble .speech-art.story-art-gate--flash img,
  .umbrael-truth-movie-card .devils-movie-frame,
  .umbrael-gate-reason-movie-card .devils-movie-frame,
  .lina-sacrifice-movie-card .devils-movie-frame,
  .lina-false-sacrifice-movie-card .devils-movie-frame,
  .beyond-tier7-sacrifice-movie-card .devils-movie-frame,
  .lina-aeon-release-movie-card .devils-movie-frame,
  .lina-heaven-life-movie-card .devils-movie-frame,
  .lina-heaven-reunion-movie-card .devils-movie-frame,
  .lina-return-abyss-movie-card .devils-movie-frame,
  .aeon-orb-door-movie-card .devils-movie-frame,
  .prestige-memory-movie-card .devils-movie-frame,
  .rift-explanation-movie-card .devils-movie-frame {
    animation: none;
  }

  .lina-aeon-seal-stone,
  .lina-aeon-lina,
  .lina-aeon-wings::before,
  .lina-aeon-wings::after,
  .lina-aeon-release-path,
  .lina-aeon-release-card--release .lina-aeon-lina,
  .lina-aeon-release-card--release .lina-aeon-wings::before,
  .lina-aeon-release-card--release .lina-aeon-wings::after,
  .lina-loop-finale.is-portal .lina-loop-memory-frame,
  .lina-loop-reveal-line,
  .lina-loop-reveal-line.is-leaving,
  .lina-loop-continue {
    animation-duration: 1ms;
  }

  .lina-loop-memory-stage,
  .lina-loop-memory-frame,
  .lina-loop-blackout,
  .lina-loop-tap-hint {
    transition-duration: 1ms;
  }

  /* ANIM-01: crossfade becomes an instant swap; Ken Burns drift is stilled.
   * The .devils-movie-card prefix keeps these at the same specificity as the
   * themed kb-composition rules so this later block wins. */
  .devils-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-even,
  .devils-movie-card .devils-movie-stage--xfade .devils-movie-frame.kb-odd {
    animation: none;
  }

  .devils-movie-stage--xfade .devils-movie-frame,
  .devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy h2,
  .devils-movie-stage--xfade + .devils-movie-caption .devils-movie-copy p,
  .devils-movie-stage--xfade + .devils-movie-caption .devils-movie-dots span {
    transition-duration: 1ms;
  }
}

@media (max-width: 560px) {
  .lina-loop-blackout {
    padding: 22px;
    gap: 18px;
  }

  .lina-loop-reveal-lines {
    min-height: clamp(88px, 22dvh, 132px);
  }

  .lina-loop-reveal-line {
    font-size: 1.02rem;
    line-height: 1.36;
  }

  .lina-loop-reveal-line.major {
    font-size: 1.42rem;
  }

  .lina-loop-continue {
    min-width: 0;
    width: 100%;
  }

}

@media (max-height: 620px) {
  .lina-loop-blackout {
    padding: 16px;
    gap: 12px;
  }

  .lina-loop-reveal-lines {
    min-height: clamp(76px, 24dvh, 118px);
  }

  .lina-loop-reveal-line {
    font-size: 0.96rem;
    line-height: 1.28;
  }

  .lina-loop-reveal-line.major {
    font-size: 1.34rem;
  }

}

.evolution-prompt {
  text-align: center;
}

.evolution-choice-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.evolution-choice-preview img {
  --monster-box-aspect: 1;
  width: min(calc(190px * var(--monster-box-aspect)), 100%);
  aspect-ratio: var(--monster-box-aspect) / 1;
  object-fit: contain;
  justify-self: center;
  filter: drop-shadow(0 16px 18px rgba(25, 35, 42, 0.18));
}

/* The evolved form stays a secret until the ceremony: the prompt shows it
   only as a black contour with a faint warm rim so it still reads on the
   dark preview plate. !important intentionally beats the vendor drop-shadow
   and holo filter variants - nothing may ever un-silhouette this image. */
.evolution-choice-preview img.evo-choice-mystery {
  filter:
    brightness(0)
    drop-shadow(0 0 1px rgba(255, 236, 197, 0.9))
    drop-shadow(0 0 16px rgba(255, 214, 140, 0.42)) !important;
}

.evolution-choice-preview span {
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #d79b28, #fff7a8);
  position: relative;
}

.evolution-choice-preview span::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -7px;
  border-left: 15px solid #fff7a8;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.evolution-scene {
  position: relative;
  width: min(980px, 100%);
  height: min(720px, calc(100vh - 48px));
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96), rgba(var(--evo-heat, 255, 245, 168), 0.38) 18%, rgba(82, 120, 180, 0.32) 42%, rgba(16, 23, 42, 0.95) 78%),
    #10172a;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
}

.evo-bg,
.evo-light-column,
.evo-rings,
.evo-burst,
.evo-orbit,
.evo-monster-wrap,
.evo-caption {
  position: absolute;
  inset: 0;
}

.evo-bg {
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.22) 0 8deg, transparent 8deg 18deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.35), transparent 48%);
  animation: evo-spin 4.4s linear infinite, evo-flare 4.4s ease-in-out forwards;
}

.evo-light-column {
  left: 50%;
  width: 180px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--evo-heat, 255, 255, 255), 0.82), transparent);
  filter: blur(10px);
  opacity: 0;
  animation: evo-column 4.4s ease-in-out forwards;
}

.evo-monster-wrap {
  display: grid;
  place-items: center;
}

.evo-monster {
  --monster-box-aspect: 1;
  position: absolute;
  width: min(calc(430px * var(--monster-box-aspect)), 78vw);
  height: min(430px, 60vw);
  object-fit: contain;
  filter: brightness(1.12) drop-shadow(0 28px 30px rgba(0, 0, 0, 0.32));
}

.evo-before {
  animation: evo-before 4.4s ease-in-out forwards;
}

.evo-after {
  opacity: 0;
  animation: evo-after 4.4s ease-in-out forwards;
}

.evo-rings span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(140px + var(--ring-extra, 0px));
  height: calc(140px + var(--ring-extra, 0px));
  border: 4px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  box-shadow: 0 0 28px rgba(var(--evo-heat, 255, 247, 168), 0.75);
  animation: evo-ring 1.25s ease-out infinite;
}

.evo-rings span:nth-child(2) { --ring-extra: 90px; animation-delay: 0.32s; }
.evo-rings span:nth-child(3) { --ring-extra: 180px; animation-delay: 0.64s; }
.evo-rings span:nth-child(4) { --ring-extra: 270px; animation-delay: 0.96s; }

.evo-burst span,
.evo-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff7a8;
  box-shadow: 0 0 22px #fff7a8;
  opacity: 0;
}

.evo-burst span {
  --angle: calc(var(--i) * 12.857deg);
  animation: evo-burst 1.65s ease-out infinite;
  animation-delay: calc(var(--i) * 38ms);
}

.evo-orbit span {
  --angle: calc(var(--i) * 20deg);
  width: 9px;
  height: 24px;
  border-radius: 999px;
  background: #98f2d2;
  box-shadow: 0 0 18px #98f2d2;
  animation: evo-orbit 4.4s ease-in-out forwards;
  animation-delay: calc(var(--i) * 26ms);
}

.evo-caption {
  inset: auto 0 22px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #fffef8;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

.evo-caption h2 {
  margin: 0;
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: 0;
}

.evo-caption p {
  margin: 0;
  color: #fff7c8;
  font-weight: 800;
}

/* ===== Stone-evolution fusion act =========================================
   The evolution stone rises, orbits the monster faster and tighter, then
   slams in (flash + shock ring + whiteout) before the regular morph, which
   is shifted back 2.4s purely via animation-delay so the holo / black-holo
   sprite variants keep their own keyframes. */
.evolution-scene--stone {
  --orb-r: min(280px, 32vw);
}

.evolution-scene--stone .evo-bg { animation-delay: 2.4s, 2.4s; }
.evolution-scene--stone .evo-light-column { animation-delay: 2.4s; }
.evolution-scene--stone .evo-before,
.evolution-scene--stone .evo-after { animation-delay: 2.4s; }
.evolution-scene--stone .evo-rings span { animation-delay: 2.4s; }
.evolution-scene--stone .evo-rings span:nth-child(2) { animation-delay: 2.72s; }
.evolution-scene--stone .evo-rings span:nth-child(3) { animation-delay: 3.04s; }
.evolution-scene--stone .evo-rings span:nth-child(4) { animation-delay: 3.36s; }
.evolution-scene--stone .evo-burst span { animation-delay: calc(var(--i) * 38ms + 2400ms); }
.evolution-scene--stone .evo-orbit span { animation-delay: calc(var(--i) * 26ms + 2400ms); }

.evolution-scene--stone .evo-monster-wrap {
  /* fusion anticipation for the stone act, then the SAME heartbeat + Ken
     Burns the level-up scene runs (styles.css evo-heartbeat-v3), shifted
     +2.4s. Both use `forwards` fill: with `both`, their backwards fill
     (scale(1), later in the list) would flatten the anticipate pulse for
     the whole stone act. Handoffs are continuous - every boundary frame
     is scale(1). */
  animation:
    evo-stone-anticipate 2.4s ease-in-out,
    evo-heartbeat-v3 3.83s ease-in-out 2.4s forwards,
    evo-kenburns-v3 2.77s cubic-bezier(0.25, 1, 0.5, 1) 6.23s forwards;
}
@keyframes evo-stone-anticipate {
  0%, 30% { transform: scale(1); filter: none; }
  70% { transform: scale(1.012); filter: drop-shadow(0 0 26px var(--stone)); }
  90% { transform: scale(0.99); filter: brightness(1.18) drop-shadow(0 0 48px var(--stone)); }
  100% { transform: scale(1); filter: none; }
}

.evo-stone-fusion {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.evo-stone-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 22px var(--stone)) drop-shadow(0 0 44px var(--stone));
  animation: evo-stone-orbit 2400ms linear forwards;
}
.evo-stone-trail {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stone2, #fff);
  box-shadow: 0 0 14px var(--stone);
  opacity: 0;
  mix-blend-mode: screen;
  animation: evo-stone-orbit 2400ms linear forwards;
  animation-delay: calc(var(--i) * 34ms);
}
/* Acceleration is encoded in the keyframe spacing: each segment covers more
   degrees than the last while the radius tightens to zero. */
@keyframes evo-stone-orbit {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) translateX(var(--orb-r)) rotate(-90deg) scale(0.9); }
  8%   { opacity: 1; }
  20%  { transform: translate(-50%, -50%) rotate(210deg) translateX(calc(var(--orb-r) * 0.86)) rotate(-210deg) scale(0.84); }
  42%  { transform: translate(-50%, -50%) rotate(420deg) translateX(calc(var(--orb-r) * 0.68)) rotate(-420deg) scale(0.74); }
  62%  { transform: translate(-50%, -50%) rotate(690deg) translateX(calc(var(--orb-r) * 0.5)) rotate(-690deg) scale(0.62); }
  78%  { transform: translate(-50%, -50%) rotate(1010deg) translateX(calc(var(--orb-r) * 0.34)) rotate(-1010deg) scale(0.5); }
  90%  { opacity: 1; transform: translate(-50%, -50%) rotate(1330deg) translateX(calc(var(--orb-r) * 0.14)) rotate(-1330deg) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(1440deg) translateX(0px) rotate(-1440deg) scale(0.16); }
}

.evo-stone-impact {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%) scale(0.2);
  border: 4px solid color-mix(in srgb, var(--stone) 75%, #fff);
  border-radius: 50%;
  box-shadow: 0 0 40px var(--stone), inset 0 0 30px var(--stone);
  opacity: 0;
  mix-blend-mode: screen;
  animation: evo-stone-impact 700ms cubic-bezier(0.17, 0.84, 0.3, 1) 2300ms forwards;
}
@keyframes evo-stone-impact {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}

.evo-stone-whiteout {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0%, color-mix(in srgb, var(--stone) 60%, #fff) 35%, transparent 75%);
  opacity: 0;
  mix-blend-mode: screen;
  animation: evo-stone-whiteout 620ms ease-out 2280ms forwards;
}
@keyframes evo-stone-whiteout {
  0% { opacity: 0; }
  30% { opacity: 0.95; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .evo-stone-img, .evo-stone-trail, .evo-stone-impact, .evo-stone-whiteout {
    animation: none;
    opacity: 0;
  }
  .evolution-scene--stone .evo-monster-wrap { animation: none; }
}

.evolution-result {
  text-align: center;
}

.evolution-result h2 {
  margin: 0;
  max-width: min(42rem, 92%);
  line-height: 1.08;
}

.evolution-result .dialogue-actions {
  margin-top: clamp(8px, 1.6vh, 16px);
}

.evolution-result img {
  --monster-box-aspect: 1;
  width: min(calc(340px * var(--monster-box-aspect)), 92vw);
  height: min(340px, 82vw);
  object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(25, 35, 42, 0.22));
}

.modal.evolution-map-modal {
  display: block;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.modal.evolution-map-modal .evolution-prompt,
.modal.evolution-map-modal .evolution-scene,
.modal.evolution-map-modal .evolution-result {
  position: fixed;
  left: var(--map-modal-left);
  top: var(--map-modal-top);
  width: var(--map-modal-width);
  height: var(--map-modal-height);
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 8px;
}

.modal.evolution-map-modal .evolution-prompt,
.modal.evolution-map-modal .evolution-result {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 12px);
  overflow: hidden;
  padding: clamp(14px, 3vw, 24px);
}

.modal.evolution-map-modal .evolution-result {
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(8px, 1.6vh, 14px);
}

.modal.evolution-map-modal .evolution-prompt h2 {
  font-size: clamp(1.35rem, 3.3vw, 2.35rem);
}

.modal.evolution-map-modal .evolution-result h2 {
  font-size: 2rem;
}

.modal.evolution-map-modal .evolution-prompt p,
.modal.evolution-map-modal .evolution-result p {
  max-width: 44rem;
}

.modal.evolution-map-modal .evolution-choice-preview {
  width: min(520px, 88%);
  margin: clamp(10px, 2vh, 18px) 0;
}

.modal.evolution-map-modal .evolution-choice-preview img {
  width: min(calc(160px * var(--monster-box-aspect)), 100%);
}

.modal.evolution-map-modal .evolution-scene {
  height: var(--map-modal-height);
}

.modal.evolution-map-modal .evo-monster {
  width: min(calc(280px * var(--monster-box-aspect)), 70%);
  height: min(280px, 42%);
}

.modal.evolution-map-modal .evo-caption {
  bottom: clamp(12px, 2.8vw, 22px);
}

.modal.evolution-map-modal .evo-caption h2 {
  font-size: clamp(1.4rem, 4vw, 2.75rem);
}

.modal.evolution-map-modal .evolution-result img {
  align-self: end;
  width: min(560px, 88%, calc(var(--map-modal-height) * 0.72 * var(--monster-box-aspect)));
  height: min(560px, 88%, calc(var(--map-modal-height) * 0.72));
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 720px), (max-height: 520px), (pointer: coarse) {
  .modal.evolution-map-modal .evolution-prompt--remote h2 {
    max-width: 96%;
    font-size: clamp(0.8rem, 3.6vw, 1.1rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .modal.evolution-map-modal .evolution-result {
    padding: clamp(10px, 2.6vw, 18px);
  }

  .modal.evolution-map-modal .evolution-result h2 {
    font-size: 1.35rem;
    max-width: min(36rem, 94%);
  }

  .modal.evolution-map-modal .evolution-result img {
    width: min(560px, 92%, calc(var(--map-modal-height) * 0.74 * var(--monster-box-aspect)));
    height: min(560px, 92%, calc(var(--map-modal-height) * 0.74));
  }
}

/* ---- Capture showcase — a framed catch reveal (kin to the evo scene,
   but a presentation, not a morph). --c1/--c2 = the charm colours. ---- */
.catch-scene {
  position: relative;
  width: min(900px, 100%);
  height: min(660px, calc(100vh - 48px));
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92), rgba(255, 247, 168, 0.32) 20%, rgba(40, 90, 70, 0.34) 48%, rgba(8, 13, 22, 0.96) 80%),
    #0b1220;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5);
  /* revealed mid-settle as the hand-off plate thins - the camera easing onto
     the ceremony stage instead of a card that is suddenly just THERE. The
     CTA/dialogue-actions stay position:absolute on every breakpoint, so the
     transform cannot orphan them. */
  animation: catch-scene-settle 760ms cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

@keyframes catch-scene-settle {
  0% { transform: scale(1.045); }
  100% { transform: scale(1); }
}
.catch-bg,
.catch-rings,
.catch-burst,
.catch-frame,
.catch-caption {
  position: absolute;
  inset: 0;
}
.catch-bg {
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.16) 0 7deg, transparent 7deg 17deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 46%);
  animation: catch-spin 5s linear infinite, catch-fade 900ms ease-out both;
}
@keyframes catch-spin { to { transform: rotate(360deg); } }
@keyframes catch-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.32; } }
.catch-frame { display: grid; place-items: center; }

/* white bloom the scene opens on - carries over from the battle's seal flash.
   280ms delay ('both' fill holds it FULL through the delay): the body-level
   fx-catch-handoff plate covers the first ~400ms of the scene, and undelayed
   the bloom was half spent before the card was even visible. Now the plate
   thins into a card still glowing from inside - one continuous light. */
.catch-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, #ffffff, rgba(255, 249, 214, 0.85) 34%, rgba(255, 255, 255, 0.5) 60%, transparent 100%);
  animation: catch-flash-out 760ms ease-out 280ms both;
}
@keyframes catch-flash-out {
  0% { opacity: 1; }
  55% { opacity: 0.5; }
  100% { opacity: 0; }
}

/* rising light pillar behind the monster */
.catch-beam {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: min(300px, 42%);
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--c1, #fff7a8) 34%, transparent) 30%,
    color-mix(in srgb, var(--c2, #5fe08b) 26%, transparent) 62%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  transform-origin: 50% 100%;
  animation: catch-beam-in 900ms cubic-bezier(0.2, 0.9, 0.3, 1) both, catch-beam-breathe 4.2s ease-in-out 1.1s infinite;
}
@keyframes catch-beam-in {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0.1); }
  100% { opacity: 0.9; transform: translateX(-50%) scaleY(1); }
}
@keyframes catch-beam-breathe {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.62; }
}

/* breathing halo pinned behind the sprite */
.catch-halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(460px, 72vw);
  height: min(460px, 72vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--c1, #fff7a8) 42%, transparent),
    color-mix(in srgb, var(--c2, #5fe08b) 20%, transparent) 46%,
    transparent 70%);
  animation: catch-halo-breathe 3.8s ease-in-out both infinite;
}
@keyframes catch-halo-breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.08); }
}

/* soft ground shadow that breathes against the sprite's idle float */
.catch-shadow {
  position: absolute;
  left: 50%;
  top: calc(46% + min(172px, 27vw));
  width: min(230px, 38vw);
  height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 68%);
  animation: catch-shadow-breathe 4.6s ease-in-out 950ms infinite;
}
@keyframes catch-shadow-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.72; }
}

.catch-sprite {
  width: min(360px, 56vw);
  height: min(360px, 56vw);
  object-fit: contain;
  filter: brightness(1.1) drop-shadow(0 22px 28px rgba(0, 0, 0, 0.45));
  border-radius: 28px;
  background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
  box-shadow: 0 0 0 3px var(--c1, #fff7a8), 0 0 36px var(--c2, #5fe08b), inset 0 0 40px rgba(0, 0, 0, 0.35);
  padding: 10px;
  animation: catch-pop 720ms cubic-bezier(0.18, 1.5, 0.35, 1) both, catch-idle 4.6s ease-in-out 950ms infinite;
}
@keyframes catch-idle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.012); }
}

/* ambient motes drifting up for as long as the card is open */
.catch-motes { pointer-events: none; }
.catch-motes span {
  position: absolute;
  left: calc(var(--x, 50) * 1%); /* --x/--d are scrambled per index in the markup */
  bottom: -3%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c1, #fff7a8);
  box-shadow: 0 0 10px var(--c2, #5fe08b);
  mix-blend-mode: screen;
  opacity: 0;
  animation: catch-mote-rise 6.4s linear infinite;
  animation-delay: calc(var(--d, 0) * -10ms);
}
.catch-motes span:nth-child(even) {
  width: 3px;
  height: 3px;
  animation-duration: 8.2s;
  background: #ffffff;
}
.catch-motes span:nth-child(3n) { animation-duration: 5.4s; }
@keyframes catch-mote-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.7); }
  12% { opacity: 0.85; }
  62% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(14px, min(-58vh, -320px)) scale(1.1); }
}

/* one celebratory confetti fall as the card opens */
.catch-confetti { pointer-events: none; }
.catch-confetti span {
  position: absolute;
  left: calc(var(--x, 50) * 1%); /* --x/--d/--r are scrambled per index in the markup */
  top: -6%;
  width: 8px;
  height: 13px;
  border-radius: 2px;
  background: var(--c1, #fff7a8);
  opacity: 0;
  animation: catch-confetti-fall calc(2400ms + var(--r, 0) * 70ms) ease-in both;
  animation-delay: calc(240ms + var(--d, 0) * 1.6ms);
}
.catch-confetti span:nth-child(3n) { background: var(--c2, #5fe08b); width: 6px; height: 10px; }
.catch-confetti span:nth-child(3n + 1) { background: #ffffff; }
@keyframes catch-confetti-fall {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateY(min(76vh, 560px)) translateX(26px) rotate(300deg); }
}
.catch-sprite.missing {
  background: radial-gradient(circle at 50% 36%, #3a2b56, #1a1030 60%, #0a0714);
  color: rgba(201, 160, 255, 0.55);
}
@keyframes catch-pop {
  0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
  55% { opacity: 1; }
  72% { transform: scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.catch-rings span {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 150px;
  height: 150px;
  border: 4px solid var(--c1, #fff7a8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  box-shadow: 0 0 26px var(--c2, #5fe08b);
  animation: catch-ring 1.3s ease-out forwards;
}
.catch-rings span:nth-child(2) { width: 240px; height: 240px; animation-delay: 0.18s; }
.catch-rings span:nth-child(3) { width: 340px; height: 340px; animation-delay: 0.36s; }
@keyframes catch-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}
.catch-burst span {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--c1, #fff7a8);
  box-shadow: 0 0 18px var(--c2, #5fe08b);
  opacity: 0;
  --angle: calc(var(--i) * 16.36deg);
  animation: catch-burst 1.5s ease-out forwards;
  animation-delay: calc(var(--i) * 30ms);
}
@keyframes catch-burst {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(330px); }
}
.catch-seal {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 7px 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe79a, #f0a93a);
  color: #3a2406;
  font-weight: 900;
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: catch-seal-in 620ms cubic-bezier(0.2, 1.6, 0.3, 1) both;
}
.catch-seal::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -45%;
  width: 34%;
  height: 140%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: catch-seal-shine 3.4s ease-in-out 1s infinite;
}
@keyframes catch-seal-shine {
  0% { left: -45%; }
  34% { left: 118%; }
  100% { left: 118%; }
}
@keyframes catch-seal-in {
  0% { opacity: 0; transform: translate(-50%, -22px) scale(0.6); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.catch-caption {
  inset: auto 0 84px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #fffef8;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
/* the caption builds up line by line under the reveal */
.catch-caption > * { animation: catch-rise 560ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.catch-caption h2 { animation-delay: 160ms; }
.catch-caption p { animation-delay: 290ms; }
.catch-caption .catch-meta { animation-delay: 430ms; }
.catch-caption .catch-dv { animation-delay: 560ms; }
.catch-scene .dialogue-actions button { animation: catch-rise 560ms cubic-bezier(0.2, 0.9, 0.3, 1) 700ms both; }
@keyframes catch-rise {
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}
.catch-caption h2 {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 3.2rem);
}
.catch-caption p {
  margin: 0;
  color: #fff7c8;
  font-weight: 800;
}
.catch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 4px;
}
.catch-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-weight: 800;
  font-size: 0.85rem;
}
.catch-pill.dv { background: rgba(95, 224, 139, 0.22); border-color: rgba(120, 240, 170, 0.5); }
.catch-chip {
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.82rem;
}
.catch-chip.holo,
.catch-chip.shiny { background: linear-gradient(180deg, #c9b6ff, #8a6fe0); color: #fff; }
.catch-chip.black-holo {
  color: #ffffff;
  background: linear-gradient(180deg, #f7f7f2 0%, #343842 45%, #05060a 100%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.54);
}
.catch-chip.tier { background: linear-gradient(180deg, #ffe79a, #e0a13a); color: #3a2406; }
.catch-dv {
  font-size: 0.82rem;
  color: #cfe6ff;
  letter-spacing: 0.01em;
}
.catch-dv b { color: #fff; font-weight: 800; }
.catch-scene .dialogue-actions {
  position: absolute;
  inset: auto 0 22px;
  z-index: 5;
  display: flex;
  justify-content: center;
}

@media (max-width: 960px), (pointer: coarse){
  html.is-touch .modal.catch-showcase-modal {
    padding: 0;
    background: #000;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.is-touch .modal.catch-showcase-modal .catch-scene {
    width: min(100vw, calc(100dvh * 4 / 3));
    height: min(100dvh, calc(100vw * 3 / 4));
    max-width: 100vw;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal.catch-showcase-modal .catch-seal {
    top: max(7px, env(safe-area-inset-top));
    padding: 4px 16px;
    font-size: clamp(0.95rem, 5dvh, 1.5rem);
    line-height: 1;
  }

  html.is-touch .modal.catch-showcase-modal .catch-frame {
    inset: clamp(38px, 10dvh, 54px) 8px clamp(118px, 30dvh, 138px);
  }

  html.is-touch .modal.catch-showcase-modal .catch-sprite {
    width: clamp(118px, 40dvh, 210px);
    height: clamp(118px, 40dvh, 210px);
    padding: 7px;
    border-radius: 18px;
  }

  html.is-touch .modal.catch-showcase-modal .catch-rings span,
  html.is-touch .modal.catch-showcase-modal .catch-burst span {
    top: 43%;
  }

  html.is-touch .modal.catch-showcase-modal .catch-caption {
    inset: auto max(8px, env(safe-area-inset-right)) clamp(45px, 11dvh, 58px) max(8px, env(safe-area-inset-left));
    gap: 3px;
  }

  html.is-touch .modal.catch-showcase-modal .catch-caption h2 {
    max-width: 96%;
    font-size: clamp(1.05rem, 5.6dvh, 1.75rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  html.is-touch .modal.catch-showcase-modal .catch-caption p {
    font-size: clamp(0.66rem, 2.9dvh, 0.88rem);
    line-height: 1;
  }

  html.is-touch .modal.catch-showcase-modal .catch-meta {
    gap: 4px;
    margin-top: 1px;
  }

  html.is-touch .modal.catch-showcase-modal .catch-pill,
  html.is-touch .modal.catch-showcase-modal .catch-chip {
    padding: 2px 7px;
    font-size: clamp(0.56rem, 2.35dvh, 0.72rem);
    line-height: 1.15;
  }

  html.is-touch .modal.catch-showcase-modal .catch-dv {
    max-width: 96%;
    font-size: clamp(0.52rem, 2.08dvh, 0.66rem);
    line-height: 1.18;
    overflow-wrap: anywhere;
  }

  html.is-touch .modal.catch-showcase-modal .dialogue-actions {
    inset: auto 0 max(7px, env(safe-area-inset-bottom));
    margin: 0;
  }

  html.is-touch .modal.catch-showcase-modal .dialogue-actions button {
    min-height: 34px;
    padding: 6px 20px;
    font-size: clamp(0.72rem, 3dvh, 0.92rem);
    line-height: 1;
  }
}

/* ---- Starter / shop / detail / moves ------------------------------------- */
/* First partner selection — frosted glass, no stat clutter */
.starter-scene {
  width: min(900px, 100%);
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(255, 255, 255, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(34, 44, 68, 0.72), rgba(19, 25, 39, 0.84));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.starter-scene h2 { text-align: center; }
.starter-scene > p {
  text-align: center;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 54ch;
}
.starter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.shop-row {
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--panel-2);
  padding: 16px;
  transition: transform 0.12s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.world-modal-close {
  display: none;
}

.starter-card {
  --accent: #f0b440;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.28);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0.015));
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.starter-card--flame { --accent: #ff8a3a; }
.starter-card--water { --accent: #46b6f0; }
.starter-card--leaf { --accent: #6fce6a; }
.starter-card__glow {
  position: absolute;
  inset: -42% 0 auto 0;
  height: 72%;
  background: radial-gradient(60% 70% at 50% 32%, color-mix(in srgb, var(--accent), transparent 55%), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.starter-card__art {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}
.starter-card__art::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 60%;
  height: 14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  filter: blur(7px);
}
.starter-card__art {
  min-height: 150px;
}
.starter-card__art img {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
  transition: transform 0.22s ease, opacity 0.35s ease;
  opacity: 0;
}
.starter-card__art img.is-loaded {
  opacity: 1;
}
.starter-card h3 {
  margin: 10px 0 8px;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.starter-type {
  display: inline-block;
  padding: 4px 15px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--accent), transparent 38%);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 28%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent), transparent 62%);
}
.starter-flavor {
  margin: 13px 6px 18px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  min-height: 2.6em;
}
.starter-card button {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 32%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent), transparent 52%), color-mix(in srgb, var(--accent), transparent 76%));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent), transparent 70%);
  transition: filter 0.15s ease, transform 0.12s ease;
}
.starter-card button:hover { filter: brightness(1.16); }
.starter-card button:active { transform: translateY(1px); }
.starter-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent), transparent 32%);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px color-mix(in srgb, var(--accent), transparent 48%), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.starter-card:hover .starter-card__glow { opacity: 0.92; }
.starter-card:hover .starter-card__art img { transform: translateY(-4px) scale(1.035); }

.stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}

.stat-chips span {
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--panel-line);
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
}

.power-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

.power-badges--center {
  justify-content: center;
  margin-top: 3px;
}

.power-badge.power-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 21px;
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid rgba(126, 231, 255, 0.34);
  border-radius: 999px;
  color: #e9fbff;
  background: linear-gradient(180deg, rgba(68, 182, 255, 0.22), rgba(40, 83, 152, 0.2));
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.power-badge b {
  font-weight: 950;
}

.power-badge em {
  font-style: normal;
  color: #ffdc79;
}

.power-badge--base.power-badge {
  border-color: rgba(255, 218, 112, 0.42);
  background: linear-gradient(180deg, rgba(255, 201, 74, 0.24), rgba(134, 76, 16, 0.18));
}

.power-badge--current.power-badge {
  border-color: rgba(87, 232, 184, 0.38);
  background: linear-gradient(180deg, rgba(65, 214, 168, 0.22), rgba(23, 109, 91, 0.18));
}

.shop-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.shop-row.bag-stone-row {
  grid-template-columns: 48px minmax(0, 1fr);
  justify-content: start;
}

/* ===== Vendor polish: shop item glyphs, locked stock, casino, tutor ====== */
.shop-row.shop-row--item {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.shop-item-icon {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%), rgba(8, 12, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.avalon-ascendant-hud {
  position: absolute;
  z-index: 60;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 36px);
  padding: 8px 13px;
  border: 1px solid rgba(255, 230, 147, 0.76);
  border-radius: 999px;
  color: #fff8d6;
  background: linear-gradient(135deg, rgba(9, 29, 60, 0.91), rgba(47, 34, 82, 0.9));
  box-shadow: 0 0 22px rgba(117, 192, 255, 0.34), inset 0 0 12px rgba(255, 233, 157, 0.13);
  font-size: clamp(10px, 1.4vw, 13px);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.avalon-ascendant-hud strong {
  color: #fff2ad;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.avalon-ascendant-hud span + span {
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.avalon-ascendant-hud.failed {
  border-color: rgba(255, 126, 143, 0.8);
  color: #ffd3d8;
  box-shadow: 0 0 20px rgba(255, 72, 103, 0.28);
}

body.tactics-active .avalon-ascendant-hud {
  top: 70px;
}

@media (max-width: 700px) {
  .avalon-ascendant-hud {
    top: 10px;
    gap: 7px;
    padding: 7px 10px;
  }

  body.tactics-active .avalon-ascendant-hud {
    top: 58px;
  }
}

.shop-item-image {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.42));
}

.shop-item-icon::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--item-color, #cfe6ff);
  -webkit-mask: var(--item-glyph) center / contain no-repeat;
  mask: var(--item-glyph) center / contain no-repeat;
  filter: drop-shadow(0 0 6px var(--item-color, #cfe6ff));
}

/* glyph shapes */
.shop-item-icon[data-item="ball"], .shop-item-icon[data-item="azureBall"],
.shop-item-icon[data-item="hyperBall"], .shop-item-icon[data-item="gigaBall"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2l9.5 7.2-3.7 12.3H6.2L2.5 9.2z'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="potion"], .shop-item-icon[data-item="topPotion"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 2h5M10.5 2v5.2L5.6 16a4.2 4.2 0 0 0 3.8 6h5.2a4.2 4.2 0 0 0 3.8-6l-4.9-8.8V2'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="revive"], .shop-item-icon[data-item="topRevive"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.6 12 20l-7.5-7.4a5 5 0 1 1 7.5-6.6 5 5 0 1 1 7.5 6.6z'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="repel"], .shop-item-icon[data-item="maxRepel"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8 3.5v6c0 4.8-3.4 8.3-8 9.5-4.6-1.2-8-4.7-8-9.5V6z'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="candy"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8.4 9.8 4 7v10l4.4-2.8M15.6 9.8 20 7v10l-4.4-2.8'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="dv"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2.5l2.1 7.4 7.4 2.1-7.4 2.1L12 21.5l-2.1-7.4-7.4-2.1 7.4-2.1z'/%3E%3C/svg%3E");
}
.shop-item-icon[data-item="tm"] {
  --item-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H8a3 3 0 0 1-3-3V7a3 3 0 0 1 2-2.8M9.5 9.5h7M9.5 13.5h7'/%3E%3C/svg%3E");
}

/* glyph colors */
.shop-item-icon[data-item="ball"] { --item-color: #78ead7; }
.shop-item-icon[data-item="azureBall"] { --item-color: #77ddff; }
.shop-item-icon[data-item="hyperBall"] { --item-color: #ffb35c; }
.shop-item-icon[data-item="gigaBall"] { --item-color: #c9a0ff; }
.shop-item-icon[data-item="potion"] { --item-color: #7de08a; }
.shop-item-icon[data-item="topPotion"] { --item-color: #ffd36a; }
.shop-item-icon[data-item="revive"] { --item-color: #ff8f9a; }
.shop-item-icon[data-item="topRevive"] { --item-color: #ffd36a; }
.shop-item-icon[data-item="repel"] { --item-color: #9fb6d0; }
.shop-item-icon[data-item="maxRepel"] { --item-color: #6fa8ff; }
.shop-item-icon[data-item="candy"] { --item-color: #ff9ff3; }
.shop-item-icon[data-item="dv"] { --item-color: #9be7ff; }
.shop-item-icon[data-item="tm"] { --item-color: #d9b8ff; }

.shop-row--locked {
  opacity: 0.62;
}

.shop-row--locked .shop-item-icon::after {
  background: #93a0ad;
  filter: none;
}

.shop-lock-chip {
  justify-self: end;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- Casino: three flippable glass cards + the dealer's pot ------------- */
.casino-card {
  width: min(560px, 100%);
}

.casino-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

.casino-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(10, 16, 26, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
}

.casino-chip--pot.has-pot {
  border-color: rgba(255, 211, 106, 0.6);
  background: rgba(64, 46, 12, 0.55);
  box-shadow: 0 0 14px rgba(255, 211, 106, 0.22);
}

.casino-stakes {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 10px 0 2px;
}

.casino-stakes-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.casino-stakes button {
  padding: 6px 13px;
  border-radius: 999px;
}

.casino-stakes button.is-active {
  border-color: rgba(255, 211, 106, 0.75);
  background: linear-gradient(180deg, rgba(84, 62, 18, 0.9), rgba(46, 32, 8, 0.9));
  color: #ffe9ad;
}

.casino-rules {
  font-size: 0.86rem;
}

.casino-table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 2px 6px;
}

.casino-playing-card {
  aspect-ratio: 5 / 7;
  perspective: 640px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  min-height: 0;
}

.casino-playing-card:disabled { cursor: default; }

.casino-playing-card .cc-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(0.3, 0.8, 0.3, 1);
}

.casino-playing-card:not(:disabled):not(.revealed):hover .cc-inner {
  transform: translateY(-5px) rotateY(0deg);
}

.casino-playing-card.revealed .cc-inner {
  transform: rotateY(180deg);
}

.casino-playing-card .cc-back,
.casino-playing-card .cc-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 13px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-weight: 900;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
}

.casino-playing-card .cc-back {
  color: rgba(255, 231, 154, 0.9);
  background:
    radial-gradient(90% 70% at 50% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
    conic-gradient(from 40deg, rgba(120, 234, 215, 0.18), rgba(255, 159, 243, 0.18), rgba(255, 211, 106, 0.18), rgba(120, 234, 215, 0.18)),
    linear-gradient(180deg, rgba(24, 30, 46, 0.98), rgba(8, 11, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 4px rgba(255, 255, 255, 0.05);
}

.casino-playing-card .cc-face {
  transform: rotateY(180deg);
  color: rgba(233, 240, 247, 0.5);
  background: linear-gradient(180deg, rgba(16, 20, 32, 0.98), rgba(6, 8, 15, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.casino-playing-card.revealed.is-lucky .cc-face {
  color: #ffe27a;
  border-color: rgba(255, 211, 106, 0.85);
  background:
    radial-gradient(70% 60% at 50% 42%, rgba(255, 211, 106, 0.30), transparent 75%),
    linear-gradient(180deg, rgba(44, 34, 10, 0.98), rgba(18, 13, 4, 0.98));
  box-shadow: 0 0 22px rgba(255, 211, 106, 0.5);
  text-shadow: 0 0 14px rgba(255, 211, 106, 0.9);
}

.casino-playing-card.revealed.is-picked:not(.is-lucky) .cc-face {
  border-color: rgba(255, 122, 107, 0.6);
  color: rgba(255, 122, 107, 0.75);
}

/* ---- Move tutor: scroll tiles + seal-locked tiers ------------------------ */
.tutor-card { width: min(760px, 100%); }

.tutor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tutor-tile {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--panel-2);
}

.tutor-tile .move-tag { margin: 0; }

.tutor-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tutor-owned {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold, #ffd36a);
}

.tutor-tile--locked {
  opacity: 0.58;
  filter: saturate(0.55);
}

/* hidden vault techniques: gold-framed, faint inner glow */
.tutor-tile--secret {
  border-color: rgba(255, 211, 106, 0.55);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 211, 106, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(64, 46, 12, 0.35), transparent), var(--panel-2);
  box-shadow: 0 0 14px rgba(255, 211, 106, 0.14), inset 0 1px 0 rgba(255, 231, 154, 0.22);
}

.tutor-vault-intro {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffe9ad;
  text-shadow: 0 0 12px rgba(255, 211, 106, 0.35);
}

/* ---- Dig scene kicks + result entrance ----------------------------------- */
.dig-scene.dig-strike { animation: dig-strike-kick 240ms ease-out; }

@keyframes dig-strike-kick {
  0% { translate: 0 0; }
  25% { translate: 0 5px; }
  55% { translate: -2px 1px; }
  100% { translate: 0 0; }
}

.dig-scene.dig-burst-kick { animation: dig-burst-kick 540ms cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes dig-burst-kick {
  0% { translate: 0 0; scale: 1; }
  16% { translate: 0 -8px; scale: 1.014; }
  42% { translate: 0 4px; }
  70% { translate: 0 -2px; }
  100% { translate: 0 0; scale: 1; }
}

.dig-result {
  animation: dig-result-in 420ms cubic-bezier(0.2, 0.95, 0.3, 1.16) both;
}

@keyframes dig-result-in {
  0% { opacity: 0; translate: 0 18px; scale: 0.92; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

/* ---- Trade: the offered monster as a gold hero tile ---------------------- */
.trade-offer {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 211, 106, 0.55);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 211, 106, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(64, 46, 12, 0.35), transparent), var(--panel-2);
  box-shadow: 0 0 14px rgba(255, 211, 106, 0.14), inset 0 1px 0 rgba(255, 231, 154, 0.22);
}

.trade-offer-frame {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 66%), rgba(8, 12, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.trade-offer-frame img {
  max-width: 74px;
  max-height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 211, 106, 0.45));
  animation: gem-bob 2.6s ease-in-out infinite;
}

.trade-offer-info { display: grid; gap: 2px; }
.trade-offer-info strong { font-size: 1.1rem; }
.trade-pick-line { margin: 10px 0 2px; font-weight: 700; }

/* ---- Appraiser: DV bars --------------------------------------------------- */
.appraiser-row { align-items: start; }
.appraiser-row-main { min-width: 0; display: grid; gap: 4px; }

.dv-bars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 2px;
}

.dv-bar {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.dv-bar b { text-align: right; color: var(--ink); }

.dv-bar-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.dv-bar-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #78ead7, #9be7ff 55%, #ffd36a);
}

.dv-bar--top b { color: #ffd36a; text-shadow: 0 0 8px rgba(255, 211, 106, 0.6); }

.appraiser-tune-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 10px 0 2px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 211, 106, 0.55);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 211, 106, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(64, 46, 12, 0.35), transparent), var(--panel-2);
}

/* ---- Party heal beat: green-gold shimmer sweeps the rows ------------------ */
.mini-hp span, .mini-exp span { transition: width 600ms cubic-bezier(0.2, 0.8, 0.3, 1); }

.party-panel.party-heal-pulse .party-item {
  position: relative;
  overflow: hidden;
}

.party-panel.party-heal-pulse .party-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, rgba(140, 255, 180, 0.4) 46%, rgba(255, 240, 170, 0.32) 54%, transparent 72%);
  transform: translateX(-130%);
  animation: party-heal-sweep 950ms ease-out both;
  animation-delay: calc(var(--heal-i, 0) * 110ms);
}

.party-panel.party-heal-pulse .party-item:nth-child(2)::after { --heal-i: 1; }
.party-panel.party-heal-pulse .party-item:nth-child(3)::after { --heal-i: 2; }
.party-panel.party-heal-pulse .party-item:nth-child(4)::after { --heal-i: 3; }
.party-panel.party-heal-pulse .party-item:nth-child(5)::after { --heal-i: 4; }
.party-panel.party-heal-pulse .party-item:nth-child(6)::after { --heal-i: 5; }

@keyframes party-heal-sweep {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}

/* Health Center heal ceremony: visible over the map after the nurse dialogue
   closes, including on touch layouts where the party panel is very compact. */
.health-center-heal {
  position: absolute;
  inset: 10px;
  z-index: 18;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--radius) - 5px);
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
  transition: opacity 180ms ease;
}

.health-center-heal.is-finished { opacity: 0; }

.health-center-heal__wash {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 54%, rgba(223, 255, 223, 0.48) 0 12%, rgba(104, 242, 173, 0.24) 28%, transparent 62%),
    linear-gradient(180deg, rgba(236, 255, 240, 0.05), rgba(76, 211, 153, 0.13));
  opacity: 0;
  animation: health-center-heal-wash 1600ms ease-out both;
}

.health-center-heal__rings {
  position: absolute;
  left: 50%;
  top: 53%;
  width: clamp(118px, 24%, 210px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.health-center-heal__rings span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(189, 255, 211, 0.88);
  border-radius: 50%;
  box-shadow:
    0 0 12px rgba(101, 255, 171, 0.7),
    inset 0 0 12px rgba(255, 245, 174, 0.38);
  opacity: 0;
  animation: health-center-heal-ring 1050ms cubic-bezier(0.16, 0.76, 0.22, 1) both;
}

.health-center-heal__rings span:nth-child(2) { animation-delay: 150ms; }
.health-center-heal__rings span:nth-child(3) { animation-delay: 300ms; }

.health-center-heal__sigil {
  position: absolute;
  left: 50%;
  top: 53%;
  width: clamp(56px, 10%, 86px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.3) rotate(-12deg);
  border: 2px solid rgba(246, 255, 218, 0.94);
  border-radius: 24%;
  background: radial-gradient(circle, rgba(250, 255, 223, 0.97), rgba(92, 229, 156, 0.84) 58%, rgba(25, 130, 99, 0.82));
  box-shadow:
    0 0 18px rgba(221, 255, 171, 0.92),
    0 0 48px rgba(76, 240, 163, 0.68);
  animation: health-center-heal-sigil 1400ms cubic-bezier(0.18, 0.8, 0.2, 1) both;
}

.health-center-heal__sigil::before,
.health-center-heal__sigil::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 14%;
  border-radius: 999px;
  background: #fffde2;
  box-shadow: 0 0 8px rgba(255, 255, 218, 0.95);
  transform: translate(-50%, -50%);
}

.health-center-heal__sigil::after { transform: translate(-50%, -50%) rotate(90deg); }

.health-center-heal__sigil span {
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(255, 239, 154, 0.72);
  border-radius: 30%;
  animation: health-center-heal-sigil-orbit 900ms linear 160ms both;
}

.health-center-heal__motes {
  position: absolute;
  left: 50%;
  top: 53%;
  width: 1px;
  height: 1px;
}

.health-center-heal__motes i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--heal-size);
  height: var(--heal-size);
  border-radius: 50%;
  background: #eaffc5;
  box-shadow: 0 0 8px #8dffc1, 0 0 15px rgba(255, 235, 143, 0.8);
  opacity: 0;
  transform: rotate(var(--heal-angle)) translateX(18px) scale(0.2);
  animation: health-center-heal-mote 1050ms ease-out var(--heal-delay) both;
}

.health-center-heal > strong {
  position: absolute;
  left: 50%;
  top: calc(53% + clamp(62px, 13%, 112px));
  padding: 6px 12px;
  border: 1px solid rgba(213, 255, 224, 0.62);
  border-radius: 999px;
  background: rgba(8, 43, 34, 0.7);
  color: #f3ffe9;
  font-size: clamp(0.68rem, 1.8vw, 0.94rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(118, 255, 179, 0.92);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 10px);
  animation: health-center-heal-label 1300ms ease-out 180ms both;
}

@keyframes health-center-heal-wash {
  0% { opacity: 0; }
  18%, 58% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes health-center-heal-ring {
  0% { opacity: 0; transform: scale(0.25); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(2.15); }
}

@keyframes health-center-heal-sigil {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -62%) scale(0.86) rotate(8deg); }
}

@keyframes health-center-heal-sigil-orbit {
  0% { opacity: 0; transform: rotate(0deg) scale(0.72); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: rotate(180deg) scale(1.32); }
}

@keyframes health-center-heal-mote {
  0% { opacity: 0; transform: rotate(var(--heal-angle)) translateX(18px) scale(0.2); }
  20% { opacity: 1; }
  72% { opacity: 0.9; }
  100% { opacity: 0; transform: rotate(var(--heal-angle)) translateX(var(--heal-distance)) scale(1); }
}

@keyframes health-center-heal-label {
  0% { opacity: 0; transform: translate(-50%, 10px); }
  24%, 72% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

@media (prefers-reduced-motion: reduce) {
  .dig-scene.dig-strike, .dig-scene.dig-burst-kick, .dig-result { animation: none; }
  .party-panel.party-heal-pulse .party-item::after { animation: none; opacity: 0; }
  .mini-hp span, .mini-exp span { transition: none; }
  .health-center-heal__rings,
  .health-center-heal__motes,
  .health-center-heal__sigil span { display: none; }
  .health-center-heal__wash { animation: health-center-heal-wash 800ms ease-out both; }
  .health-center-heal__sigil {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  .health-center-heal > strong {
    animation: health-center-heal-label 800ms ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .casino-playing-card .cc-inner { transition: none; }
}

.shop-row.gear-row {
  grid-template-columns: 50px minmax(0, 1fr) auto;
}

.gear-row-main {
  min-width: 0;
}

.gear-icon-slot {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.12), transparent 66%),
    rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.gear-icon-slot:empty {
  opacity: 0.32;
}

.gear-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.34));
}

@media (max-width: 640px) {
  .shop-row.gear-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .shop-row.gear-row > button,
  .shop-row.gear-row > .qty-control {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
  .shop-row.gear-row > button {
    width: 100%;
  }
  .gear-icon-slot {
    width: 44px;
    height: 44px;
  }
  .gear-icon {
    width: 40px;
    height: 40px;
  }
}

.bag-stone-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}

.bag-stone-grid .shop-row { margin-top: 0; }

.bag-stone-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.34));
}

/* ---- Bag ---------------------------------------------------------------- */
.bag-card .bag-intro {
  font-size: 0.84rem;
  margin: 0 0 6px;
}
.bag-section { margin-top: 20px; }
.bag-section:first-of-type { margin-top: 14px; }
.bag-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bag-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--panel-line), transparent);
}
.bag-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), rgba(255, 255, 255, 0.014);
}
.bag-row:first-of-type { margin-top: 0; }
.bag-info strong { font-weight: 800; }
.bag-info .monster-meta { margin-top: 3px; }
.bag-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.bag-text { min-width: 0; }
.bag-row-icon {
  width: 42px;
  height: 42px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.42));
}
/* Shop glyph tiles reused as bag row icons */
.bag-row .bag-item-glyph {
  width: 42px;
  height: 42px;
  flex: none;
}

.inline-item-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.38));
}
.land-item-line {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
}
.land-item-icon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.34));
}
.land-recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 1px 4px 1px 0;
  color: #e08a8a;
}
.land-recipe-chip.is-ok {
  color: #8ee07a;
}
.land-recipe-icon {
  width: 20px;
  height: 20px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.bag-row--prism { row-gap: 0; }
.bag-prism-strip {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.bag-prism-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.bag-prism-cell img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.bag-prism-cell span {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.bag-prism-cell.found {
  border-color: rgba(155, 135, 240, 0.40);
  background: rgba(155, 135, 240, 0.10);
}
.bag-prism-cell.found img {
  filter: drop-shadow(0 0 10px rgba(155, 135, 240, 0.55)) drop-shadow(0 4px 7px rgba(0, 0, 0, 0.40));
}
.bag-prism-cell.found span { color: var(--ink); }
.bag-prism-cell.missing img {
  filter: grayscale(1) brightness(0.5);
  opacity: 0.34;
}
.bag-prism-cell.missing span { opacity: 0.55; }

/* Rift Materials: each shard/clear is a chip that wraps in a full-width strip
   (was one long nowrap pill that overflowed the row box on mobile landscape). */
.bag-row--rift { row-gap: 0; }
.bag-rift-strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.bag-rift-strip .bag-have { white-space: nowrap; }

.bag-right {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.bag-qty {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.82rem;
}
.bag-have {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid rgba(67, 197, 176, 0.45);
  background: rgba(67, 197, 176, 0.14);
  border-radius: 999px;
  padding: 5px 11px;
}
.bag-have.champ {
  color: var(--gold);
  border-color: rgba(240, 180, 64, 0.5);
  background: rgba(240, 180, 64, 0.16);
}
.bag-have.locked {
  color: var(--muted);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.055);
}
.bag-row--relic.earned {
  border-color: rgba(125, 240, 255, 0.28);
  background:
    radial-gradient(circle at 7% 50%, rgba(125, 240, 255, 0.11), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent),
    rgba(255, 255, 255, 0.014);
}
.prestige-sigil-detail-row.passive {
  border-color: rgba(67, 197, 176, 0.5);
  background: rgba(67, 197, 176, 0.08);
}
.prestige-sigil-detail-row .bag-have,
.battle-sigil-detail-row .bag-have {
  justify-self: end;
  white-space: nowrap;
}
.battle-sigil-detail-row.equipped {
  border-color: rgba(240, 180, 64, 0.5);
  background: rgba(240, 180, 64, 0.08);
}
.battle-sigil-detail-row [data-detail-battle-sigil].is-equipped {
  border-color: rgba(240, 180, 64, 0.72);
  background: rgba(240, 180, 64, 0.18);
  color: var(--gold);
}
.bag-row--relic.locked .bag-row-icon {
  filter: grayscale(1) brightness(0.54) drop-shadow(0 6px 9px rgba(0, 0, 0, 0.36));
  opacity: 0.46;
}
.bag-section .bag-stone-grid { margin: 0; }
.bag-empty {
  margin-top: 18px;
  padding: 22px 16px;
  text-align: center;
  border: 1px dashed var(--panel-line);
  border-radius: var(--radius-sm);
}

/* ---- Bag v2: searchable, category-filtered, landscape-friendly ---------- */
/* The card becomes a fixed flex column (pinned header + chips, a scrolling
   body, pinned footer) instead of one long scroll, mirroring the Codex. */
.bag-card--v2 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal.world-map-modal .shop-card.bag-card--v2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bag-modal-head {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}
.bag-modal-head h2 { margin: 0; }
.bag-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#bagSearch {
  flex: 1 1 160px;
  min-width: 130px;
  padding: 7px 12px;
  border: 1px solid rgba(8, 8, 8, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #080808;
  font: inherit;
  font-size: 12.5px;
}
#bagSearch::placeholder { color: rgba(8, 8, 8, 0.4); }
#bagSearch:focus { outline: none; border-color: rgba(170, 130, 30, 0.65); }
.bag-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bag-filter button {
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid rgba(8, 8, 8, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  color: #080808;
}
.bag-filter button.is-selected,
.modal.clean-world-modal .bag-filter button.is-selected {
  color: #fff;
  background: #111;
  border-color: #111;
}
.bag-hidden { display: none !important; }
.bag-section-hidden { display: none !important; }
.bag-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.bag-noresult { margin-top: 18px; }

.qty-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-control button {
  min-height: 36px;
  min-width: 40px;
  padding: 0;
  font-size: 1.1rem;
}

.qty-control strong {
  min-width: 28px;
  text-align: center;
  font-size: 1.1rem;
}

.detail-head {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.detail-head img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.08), transparent 70%);
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.5));
}

/* Lumenox uses the same near-black transparent portrait in classic Heartroot
   and Beyond. Carry Beyond's luminous portrait well into the classic details
   panel so the dragon stays readable instead of disappearing into the dark
   Shadow / Light type background. */
.detail-head img.species-lumenox {
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 36%, rgba(156, 236, 255, 0.58) 0 24%, rgba(89, 101, 121, 0.3) 52%, rgba(4, 9, 16, 0.3) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.14));
  box-shadow:
    inset 0 0 0 1px rgba(223, 250, 255, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.detail-head img.species-aethlet.stage-1,
.detail-head img.species-aethletfire.stage-1,
.detail-head img.species-aethletstone.stage-1,
.detail-head img.species-aethletastral.stage-1 {
  scale: 1.3;
}

.monster-detail h3,
.box-card h3 {
  margin: 18px 0 8px;
  font-weight: 800;
}

.move-grid,
.move-list,
.box-list {
  display: grid;
  gap: 8px;
}

.move-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.move-row,
.box-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: 10px;
}

.box-row[hidden],
.box-empty-search[hidden] {
  display: none !important;
}

.box-row { grid-template-columns: 54px minmax(0, 1fr) max-content; }

.box-row img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.box-row img.species-aethlet.stage-1,
.box-row img.species-aethletfire.stage-1,
.box-row img.species-aethletstone.stage-1,
.box-row img.species-aethletastral.stage-1 {
  scale: 1.4;
}

.box-row > div:not(.box-actions) {
  min-width: 0;
}

.box-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.box-actions button {
  min-height: 30px;
  min-width: 0;
  padding: 0 9px;
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

.bag-amount-card {
  width: min(520px, 94vw);
}

.bag-target-card {
  width: min(760px, 94vw);
  max-height: min(760px, calc(100dvh - 32px));
}

.bag-target-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.bag-target-row {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  min-height: 72px;
}

.bag-target-row img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.bag-target-info {
  min-width: 0;
}

.bag-target-info strong,
.bag-target-info .monster-meta {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.bag-target-row button {
  min-width: 68px;
}

.box-card--scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.box-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.box-scroll--monster-box h3:first-child {
  margin-top: 0;
}

.box-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 6px 0 10px;
}

.box-toolbar-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: end;
}

.box-search {
  min-width: 0;
}

.box-sort {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: var(--ink);
  font-weight: 800;
}

.box-sort span,
.box-search span {
  font-size: 0.72rem;
}

.box-sort select {
  min-height: 38px;
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font: inherit;
  font-weight: 800;
}

.box-filter-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 3px;
}

.box-filter-chip {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.box-filter-chip em {
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.25;
}

.box-result-count {
  min-height: 1.1em;
  font-size: 0.72rem;
  font-weight: 800;
}

.box-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.box-name-line strong {
  min-width: 0;
}

.box-source-pill,
.box-seal,
.box-seals .rarity-seal {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.box-seals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 3px 0 2px;
}

.box-seal--duplicate {
  color: #143842;
  background: rgba(116, 235, 255, 0.26);
  border: 1px solid rgba(37, 140, 166, 0.2);
}

.box-seal--mutation {
  color: #432c00;
  background: linear-gradient(90deg, rgba(255, 220, 118, 0.72), rgba(255, 176, 120, 0.58));
  border: 1px solid rgba(145, 92, 8, 0.2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.box-fav-btn {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  line-height: 1;
  font-size: 1rem;
}

.box-row--collection .box-actions {
  grid-column: 1 / -1;
}

.nursery-card {
  width: min(1180px, 96vw);
}

.nursery-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(340px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.nursery-overview,
.nursery-picker {
  min-width: 0;
  min-height: 0;
}

.nursery-overview {
  display: flex;
  flex-direction: column;
}

.nursery-overview > p {
  margin-bottom: 10px;
}

.nursery-guide,
.nursery-preview {
  border: 1px solid rgba(255, 224, 160, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 224, 160, 0.07);
}

.nursery-guide {
  margin-bottom: 10px;
}

.nursery-guide summary,
.nursery-preview summary {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
}

.tactics-unit-meta-compact {
  display: none;
}

.nursery-guide ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 12px 10px 28px;
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.35;
}

.nursery-pens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.nursery-pen {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 224, 160, 0.16);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 232, 160, 0.12), transparent 60%),
    rgba(255, 255, 255, 0.045);
}

.nursery-pen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.nursery-pen-head h3 {
  margin: 0;
}

.nursery-pen-head span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.nursery-picker {
  display: flex;
  flex-direction: column;
}

.nursery-slots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0;
}

.nursery-slot {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 82px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 232, 160, 0.13), transparent 58%),
    rgba(255, 255, 255, 0.055);
}

.nursery-slot.empty {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  color: var(--ink-soft);
  border-style: dashed;
}

.nursery-slot img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.nursery-slot span,
.nursery-status span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.nursery-slot-info {
  min-width: 0;
}

.nursery-slot .nursery-traits,
.nursery-candidate-row .nursery-traits {
  color: #ffe49a;
  font-weight: 800;
}

.nursery-training {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
  margin-top: 6px;
}

.nursery-training > span {
  grid-column: 1;
  font-size: 0.7rem;
}

.nursery-training > button {
  grid-column: 2;
  grid-row: 1 / 3;
  min-height: 28px;
  padding: 0 7px;
  font-size: 0.66rem;
}

.nursery-training-bar {
  grid-column: 1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
}

.nursery-training-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #62d8ff, #8ff2bc);
}

.nursery-training.paused .nursery-training-bar i {
  background: #aab2bd;
}

.nursery-training.stalled > span {
  color: #ffd47a;
}

.nursery-status {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(255, 224, 160, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(255, 224, 160, 0.07);
}

.nursery-preview {
  margin: 8px 0;
}

.nursery-preview > p {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.35;
}

.nursery-dv-preview {
  display: grid;
  gap: 2px;
  margin: 0 10px 8px;
}

.nursery-dv-preview > div {
  display: grid;
  grid-template-columns: minmax(42px, 1fr) repeat(3, minmax(34px, 0.7fr));
  gap: 4px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.14);
  font-size: 0.7rem;
  text-align: center;
}

.nursery-dv-preview > div > :first-child {
  text-align: left;
}

.nursery-dv-preview .head {
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.08);
}

.nursery-candidate-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.nursery-candidate-head h3 {
  margin-bottom: 0;
}

.monster-search {
  display: grid;
  gap: 4px;
  min-width: min(260px, 48%);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.monster-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--ink);
  background: rgba(5, 8, 14, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  outline: none;
}

.monster-search.box-search {
  min-width: 0;
}

.monster-search input:focus {
  border-color: rgba(127, 231, 255, 0.56);
  box-shadow: 0 0 0 3px rgba(127, 231, 255, 0.16);
}

.nursery-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
}

.nursery-candidates .box-row {
  grid-template-columns: 54px minmax(0, 1fr) max-content;
}

.nursery-candidate-dvs {
  overflow-wrap: anywhere;
}

.nursery-deposit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(56px, 1fr));
  gap: 5px;
}

.nursery-empty-search {
  margin: 10px 0 0;
}

@media (max-width: 860px) {
  .nursery-body {
    grid-template-columns: 1fr;
  }

  .nursery-slots {
    grid-template-columns: 1fr;
  }

  .nursery-pens {
    grid-template-columns: 1fr;
  }

  .nursery-slot {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .nursery-slot button {
    grid-column: 2;
    justify-self: start;
  }

  .nursery-candidates .box-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .nursery-candidate-head {
    display: grid;
    gap: 8px;
  }

  .monster-search {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .box-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px 10px;
  }

  .box-row img {
    width: 46px;
    height: 46px;
  }

  .box-actions {
    grid-column: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }
}

.move-tag {
  min-width: 0;
  border-left: 5px solid #5b6675;
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
}

.move-tag.active {
  border-left-color: var(--gold);
  background: rgba(240, 180, 64, 0.12);
}

.move-tag strong,
.move-tag span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.move-tag span,
.empty-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.move-ability {
  display: block;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1.42;
  overflow-wrap: anywhere;
}
.move-tag.active .move-ability { color: var(--ink); }

.dialogue-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.modal.adventure-name-modal {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  color: #080808;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.adventure-name-modal .adventure-name-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  max-height: none;
  box-sizing: border-box;
  overflow: auto;
  display: grid;
  place-items: center;
  padding:
    max(82px, env(safe-area-inset-top))
    max(34px, env(safe-area-inset-right))
    max(44px, env(safe-area-inset-bottom))
    max(34px, env(safe-area-inset-left));
  color: #080808;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.adventure-name-card::before,
.adventure-name-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.adventure-name-card::before {
  background-image: var(--adventure-name-overlay);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.9;
  animation: adventure-name-art-in 1100ms ease-out both;
}

.adventure-name-card::after {
  z-index: -1;
  background:
    radial-gradient(ellipse 38% 44% at 50% 50%, rgba(255, 255, 255, 0.99) 0 54%, rgba(255, 255, 255, 0.72) 78%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.16));
}

.adventure-name-brand {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  color: #171717;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  line-height: 1;
  opacity: 0.66;
  transform: translateX(-50%);
  white-space: nowrap;
}

.adventure-name-brand img {
  width: 39px;
  height: 27px;
  margin-right: -8px;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: multiply;
}

.adventure-name-brand span {
  transform: translateY(1px);
}

.adventure-name-shell {
  width: min(650px, 100%);
  display: grid;
  gap: clamp(30px, 5vh, 48px);
  text-align: center;
  animation: adventure-name-content-in 720ms 120ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
}

.adventure-name-copy {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.adventure-name-star {
  position: relative;
  width: 68px;
  height: 1px;
  margin-bottom: 3px;
  background: linear-gradient(90deg, transparent, rgba(8, 8, 8, 0.38), transparent);
}

.adventure-name-star::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1px solid rgba(8, 8, 8, 0.52);
  transform: translate(-50%, -50%) rotate(45deg);
}

.adventure-name-card .adventure-name-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.35rem, 7.4vw, 6.4rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.adventure-name-card .adventure-name-copy p {
  max-width: 460px;
  margin: 0;
  color: #3e3e3e;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.98rem, 1.55vw, 1.12rem);
  font-style: italic;
  line-height: 1.55;
  text-wrap: balance;
}

.adventure-name-form {
  width: min(480px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.adventure-name-field {
  display: grid;
  gap: 9px;
}

.adventure-name-form label {
  color: #474747;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.adventure-name-input-wrap {
  position: relative;
  border-bottom: 1px solid rgba(8, 8, 8, 0.72);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.adventure-name-input-wrap:focus-within {
  border-color: #050505;
  box-shadow: 0 2px 0 #050505;
}

.adventure-name-form input {
  width: 100%;
  min-height: 62px;
  box-sizing: border-box;
  padding: 9px 58px 10px;
  color: #080808;
  background: rgba(255, 255, 255, 0.78);
  border: 0;
  border-radius: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.2vw, 2.18rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  caret-color: #080808;
  -webkit-appearance: none;
  appearance: none;
}

.adventure-name-form input::placeholder {
  color: #a0a0a0;
  font-style: italic;
  opacity: 1;
}

.adventure-name-form input:focus {
  outline: none;
}

.adventure-name-count {
  position: absolute;
  right: 0;
  bottom: 12px;
  color: #777;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.adventure-name-form .dialogue-actions {
  justify-content: center;
  margin-top: 0;
}

.adventure-name-form .adventure-name-submit {
  min-width: 210px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 25px;
  color: #fff;
  background: #0b0b0b;
  border: 1px solid #0b0b0b;
  border-radius: 1px;
  box-shadow: 0 11px 28px rgba(0, 0, 0, 0.14);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.adventure-name-form .adventure-name-submit:hover {
  color: #080808;
  background: #fff;
  border-color: #080808;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.adventure-name-form .adventure-name-submit:focus-visible {
  outline: 1px solid #080808;
  outline-offset: 4px;
  border-color: #080808;
  box-shadow: 0 11px 28px rgba(0, 0, 0, 0.14);
}

.adventure-name-form .adventure-name-submit:active {
  transform: translateY(0);
}

@keyframes adventure-name-art-in {
  from { opacity: 0; transform: scale(1.018); }
  to { opacity: 0.9; transform: scale(1); }
}

@keyframes adventure-name-content-in {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .modal.adventure-name-modal .adventure-name-card {
    min-height: 100svh;
    height: 100dvh;
    padding:
      max(70px, env(safe-area-inset-top))
      max(20px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }

  .adventure-name-card::before {
    background-image: var(--adventure-name-mobile-overlay);
    background-position: center;
    background-size: cover;
    opacity: 0.82;
  }

  .adventure-name-card::after {
    background:
      radial-gradient(ellipse 78% 39% at 50% 49%, rgba(255, 255, 255, 0.99) 0 54%, rgba(255, 255, 255, 0.64) 78%, transparent 100%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.08));
  }

  .adventure-name-brand {
    top: max(20px, env(safe-area-inset-top));
    font-size: 0.9rem;
    opacity: 0.68;
  }

  .adventure-name-brand img {
    width: 35px;
    height: 24px;
  }

  .adventure-name-shell {
    width: min(370px, 100%);
    gap: clamp(24px, 4.5dvh, 36px);
  }

  .adventure-name-copy {
    gap: 13px;
  }

  .adventure-name-card .adventure-name-copy h2 {
    max-width: 350px;
    font-size: clamp(2.9rem, 14.2vw, 4.25rem);
    line-height: 0.92;
  }

  .adventure-name-card .adventure-name-copy p {
    max-width: 300px;
    font-size: clamp(0.88rem, 4vw, 1rem);
    line-height: 1.42;
  }

  .adventure-name-form {
    width: min(340px, 100%);
    gap: 24px;
  }

  .adventure-name-form input {
    min-height: 58px;
    padding-right: 48px;
    padding-left: 48px;
    font-size: clamp(1.58rem, 7vw, 1.95rem);
  }

  .adventure-name-form .dialogue-actions {
    display: grid;
    width: 100%;
  }

  .adventure-name-form .adventure-name-submit {
    width: 100%;
    min-height: 54px;
  }
}

@media (max-width: 960px) and (orientation: landscape) {
  .modal.adventure-name-modal .adventure-name-card {
    min-height: 100dvh;
    height: 100dvh;
    padding:
      max(48px, env(safe-area-inset-top))
      max(48px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(48px, env(safe-area-inset-left));
  }

  .adventure-name-card::before {
    background-image: var(--adventure-name-overlay);
    opacity: 0.74;
  }

  .adventure-name-card::after {
    background: radial-gradient(ellipse 48% 72% at 50% 50%, rgba(255, 255, 255, 0.98) 0 48%, rgba(255, 255, 255, 0.7) 76%, transparent 100%);
  }

  .adventure-name-brand {
    top: max(13px, env(safe-area-inset-top));
    font-size: 0.86rem;
  }

  .adventure-name-brand img {
    width: 34px;
    height: 23px;
  }

  .adventure-name-shell {
    width: min(820px, 100%);
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 1.05fr);
    align-items: center;
    gap: clamp(32px, 6vw, 72px);
  }

  .adventure-name-copy {
    justify-items: start;
    gap: 11px;
    text-align: left;
  }

  .adventure-name-card .adventure-name-copy h2 {
    max-width: 350px;
    font-size: clamp(2.35rem, 6.3vw, 4rem);
    line-height: 0.94;
  }

  .adventure-name-card .adventure-name-copy p {
    max-width: 320px;
    font-size: clamp(0.82rem, 1.8vw, 0.98rem);
    line-height: 1.4;
  }

  .adventure-name-star {
    width: 54px;
  }

  .adventure-name-form {
    gap: 19px;
  }

  .adventure-name-form input {
    min-height: 54px;
    font-size: clamp(1.4rem, 3.2vw, 1.86rem);
  }

  .adventure-name-form .dialogue-actions {
    display: grid;
  }

  .adventure-name-form .adventure-name-submit {
    width: 100%;
    min-height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adventure-name-card::before,
  .adventure-name-shell {
    animation: none;
  }
}

.mom-reward-card {
  position: relative;
  width: min(720px, 100%);
  padding: 0;
  overflow: hidden;
  text-align: center;
  background: #0b0d11;
  border-color: rgba(240, 201, 117, 0.38);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(255, 232, 176, 0.08) inset;
}
.mom-reward-scene {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.mom-reward-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 4, 9, 0.08), transparent 38%, rgba(2, 3, 7, 0.18) 66%, rgba(2, 3, 7, 0.76) 100%),
    radial-gradient(circle at 50% 57%, transparent 0 32%, rgba(1, 3, 7, 0.2) 84%);
}
.mom-reward-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(255, 233, 177, 0.22);
  border-radius: inherit;
  box-shadow:
    0 0 34px rgba(255, 187, 75, 0.12) inset,
    0 -1px 0 rgba(120, 224, 216, 0.12) inset;
}
.mom-reward-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.mom-reward-prizes {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 2;
  width: min(88%, 610px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 22px);
}
.mom-reward-prizes::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 86%;
  height: 115%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 40% 55%, rgba(79, 241, 225, 0.24), transparent 55%),
    radial-gradient(ellipse at 78% 58%, rgba(255, 202, 78, 0.22), transparent 48%);
  filter: blur(10px);
}
.mom-reward-charms {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-right: -8px;
}
.mom-reward-charm,
.mom-reward-token {
  display: block;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 86%;
  will-change: transform, opacity;
}
.mom-reward-charm {
  --reward-rotate: 0deg;
  --reward-y: 0px;
  width: clamp(80px, 15vw, 116px);
  margin-inline: clamp(-15px, -1.7vw, -8px);
  filter:
    drop-shadow(0 14px 11px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 12px rgba(91, 244, 226, 0.5));
  animation: mom-reward-charm-pop 780ms cubic-bezier(0.18, 0.82, 0.22, 1.16) both;
}
.mom-reward-charm-left {
  --reward-rotate: -8deg;
  --reward-y: 7px;
}
.mom-reward-charm-center {
  --reward-y: -7px;
  animation-delay: 90ms;
}
.mom-reward-charm-right {
  --reward-rotate: 8deg;
  --reward-y: 7px;
  animation-delay: 180ms;
}
.mom-reward-token {
  width: clamp(104px, 17vw, 136px);
  margin-bottom: -3px;
  filter:
    drop-shadow(0 14px 12px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 12px rgba(255, 198, 65, 0.34));
  animation: mom-reward-token-pop 820ms 260ms cubic-bezier(0.18, 0.82, 0.22, 1.16) both;
}
.mom-reward-copy {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 56px 24px 18px;
  color: #fffaf0;
  background: linear-gradient(180deg, transparent, rgba(4, 7, 12, 0.82) 44%, rgba(3, 5, 9, 0.96));
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.92);
}
.mom-reward-copy h2,
.mom-reward-copy p {
  margin-left: auto;
  margin-right: auto;
}
.mom-reward-copy h2 {
  margin-top: 0;
  margin-bottom: 5px;
  color: #fff5d5;
  font-size: clamp(1.4rem, 3.5vw, 1.9rem);
  letter-spacing: 0.025em;
}
.mom-reward-copy p {
  margin-top: 0;
  margin-bottom: 0;
  color: rgba(245, 250, 255, 0.9);
}
.mom-reward-copy .dialogue-actions {
  margin-top: 12px;
}
@keyframes mom-reward-charm-pop {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.42) rotate(var(--reward-rotate));
  }
  64% {
    opacity: 1;
    transform: translateY(calc(var(--reward-y) - 8px)) scale(1.08) rotate(var(--reward-rotate));
  }
  100% {
    opacity: 1;
    transform: translateY(var(--reward-y)) scale(1) rotate(var(--reward-rotate));
  }
}
@keyframes mom-reward-token-pop {
  0% { opacity: 0; transform: translateY(40px) scale(0.42) rotate(8deg); }
  64% { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

/* ---- Battle -------------------------------------------------------------- */
.battle {
  --battle-frame-width: 640px;
  --battle-frame-height: 480px;
  --battle-scale-x: 1;
  --battle-scale-y: 1;
  --battle-stage-left: 0px;
  --battle-stage-top: 0px;
  --battle-stage-width-px: 640px;
  --battle-stage-height-px: 480px;
  --battle-card-top-gap: 10px;
  --battle-console-top: 391px;
  --battle-console-left: 132px;
  --battle-console-width: 376px;
  --battle-console-base-height: 79px;
  --battle-console-gap: 8px;
  --battle-touch-edge: 8px;
  --battle-touch-left-width: 112px;
  --battle-touch-right-width: 160px;
  --battle-info-card-edge-gap: 34px;
  --battle-enemy-stack-right: 42px;
  --battle-player-stack-left: 42px;
  position: absolute;
  inset: 10px;
  display: block;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #060911, #090d18);
  animation: battle-pop 0.18s ease;
  transform: translateZ(0);
  /* Rapid taps can outlive a button rerender and land on the battle log or
     combat cards. Keep Chrome from turning those taps into Touch to Search. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.battle.fx-overflow {
  overflow: visible;
}

.battle.fx-overflow-test,
.battle.fx-overflow-test .battle-stage,
.battle.fx-overflow-test .fx-layer {
  overflow: visible;
}

html.is-touch .battle.fx-overflow-test,
html.is-touch .battle.fx-overflow-test .battle-stage,
html.is-touch .battle.fx-overflow-test .fx-layer {
  overflow: visible;
}

.battle.fx-effects-on-top .fx-layer {
  z-index: 9;
}

@keyframes battle-pop {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Registered so the ground-pad fade can transition; 0 = pad fully shown,
   1 = faded to transparent (monster fainting). */
@property --pad-e-hide { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --pad-p-hide { syntax: "<number>"; inherits: true; initial-value: 0; }

.battle-stage {
  transition: --pad-e-hide 420ms ease, --pad-p-hide 420ms ease;
  --battle-fallback: linear-gradient(#8fd0e6 0 52%, #d8c98e 52%);
  --battle-pad-player: rgba(248, 244, 214, 0.44);
  --battle-pad-enemy: rgba(248, 244, 214, 0.36);
  --battle-pad-edge: rgba(13, 17, 24, 0.42);
  position: absolute;
  left: var(--battle-stage-left);
  top: var(--battle-stage-top);
  width: var(--battle-frame-width);
  height: var(--battle-frame-height);
  flex: 0 0 auto;
  margin: 0;
  transform: scale(var(--battle-scale-x), var(--battle-scale-y));
  transform-origin: left top;
  border-radius: 0;
  overflow: hidden;
  border: 0;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.3);
  background-color: #182033;
  background-image: var(--battle-bg, var(--battle-fallback));
  background-position: center bottom;
  background-size: cover;
}

.battle-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* No ground pad / contact shadow under battle monsters (removed per
     request). Dark themes reuse this layer for an ambient wash only. */
  background: none;
  opacity: 0.74;
}

/* ---- Short encounter intro (~0.6s) ---- */
.battle.battle-intro .battle-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  background-size: 260% 100%;
  animation: battle-sweep 560ms ease-out both;
}

@keyframes battle-sweep {
  0% { opacity: 1; background-position: 150% 0; box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.55); }
  45% { box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0); }
  100% { opacity: 0; background-position: -70% 0; box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0); }
}

.battle.battle-intro .combatant.enemy img { animation: enc-enemy 520ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.battle.battle-intro .combatant.player img { animation: enc-player 520ms cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.battle.battle-intro .combat-card { animation: enc-card 440ms ease-out 110ms both; }

@keyframes enc-enemy {
  0% { opacity: 0; transform: translate(64px, -48px) scale(0.35); filter: brightness(2.2); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) scale(1); filter: brightness(1); }
}

@keyframes enc-player {
  /* X negated to read correctly through the player's scaleX(-1) wrapper. */
  0% { opacity: 0; transform: translate(64px, 50px) scale(0.45); }
  100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

@keyframes enc-card {
  0% { opacity: 0; transform: translateY(12px) scale(0.95); }
  100% { opacity: 1; transform: none; }
}

/* ---- Wild-encounter banner: a quick "a wild X appeared!" pop (~1s) ---- */
.encounter-banner {
  position: absolute;
  left: 50%;
  top: 13%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  max-width: 92%;
  padding: 9px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(28, 36, 58, 0.96), rgba(12, 16, 26, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fdf6e3;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.3vw, 1.25rem);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  animation: enc-banner 1050ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.encounter-banner strong { color: #ffe79a; }
.encounter-banner em { color: #a9f0ff; font-style: normal; }
@keyframes enc-banner {
  0% { opacity: 0; transform: translate(-50%, -26px) scale(0.82); }
  16% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
  26% { transform: translate(-50%, 0) scale(1); }
  78% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .battle.battle-intro .battle-stage::after,
  .battle.battle-intro .combatant.enemy img,
  .battle.battle-intro .combatant.player img,
  .battle.battle-intro .combat-card,
  .encounter-transition,
  .encounter-transition::before,
  .encounter-transition::after,
  .encounter-transition__stripes span,
  .encounter-transition__ring,
  .encounter-transition__slash,
  .encounter-transition__sigil,
  .encounter-banner,
  .mom-reward-charm,
  .mom-reward-token,
  .catch-bg, .catch-sprite, .catch-rings span, .catch-burst span, .catch-seal { animation: none; }
  .catch-seal::after,
  .catch-flash,
  .catch-beam,
  .catch-halo,
  .catch-shadow,
  .catch-motes span,
  .catch-confetti span,
  .catch-caption > *,
  .catch-scene,
  .catch-scene .dialogue-actions button { animation: none; }
  .fx-capture-dim,
  .fx-capture-flash,
  .fx-capture-starfall,
  .fx-catch-handoff { animation: none; opacity: 0; }
  /* static dark cover: the animated iris never runs under reduced motion */
  .encounter-transition.is-playing { opacity: 1; background: rgba(4, 6, 12, 0.92); }
  .enc-particles span, .enc-mon, .enc-flash { animation: none; opacity: 0; }
  #speechBubble .speech-bubble { animation: none; }
  .encounter-banner { opacity: 1; }
  .catch-burst span { opacity: 0; }
  .catch-bg { opacity: 0.3; }
  .catch-flash, .catch-confetti span, .catch-motes span { opacity: 0; }
  .catch-beam { opacity: 0.35; transform: translateX(-50%) scaleY(1); }
  .catch-halo { opacity: 0.4; }
}

/* ---- Defeat: black-out before reviving at a nurse ---- */
.battle.defeat { overflow: hidden !important; }
.battle.defeat .battle-stage { filter: grayscale(1) brightness(0.6); transition: filter 700ms ease; }

.battle.defeat::after {
  content: "Everything fades to black...";
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  color: #c9d2dc;
  font-weight: 800;
  font-size: clamp(1rem, 3.4vw, 1.6rem);
  letter-spacing: 0.06em;
  background: #05070b;
  opacity: 0;
  pointer-events: none;
  animation: defeat-out 1400ms ease-in forwards;
}

html[lang="de"] .battle.defeat::after {
  content: "Alles wird schwarz ...";
}

@keyframes defeat-out {
  0% { opacity: 0; }
  45% { opacity: 0.92; }
  78% { opacity: 0.96; }
  100% { opacity: 1; }
}

/* ---- Heartroot Wildside defeat: collapse, rootlight rescue, return home. -- */
.battle.heartroot-defeat-active {
  pointer-events: none;
}

.battle.heartroot-defeat-active .battle-stage {
  animation: heartrootDefeatField 2100ms cubic-bezier(0.32, 0.06, 0.38, 1) both;
}

.battle.heartroot-defeat-active .combatant.player {
  transform-origin: 44% 88%;
  animation: heartrootDefeatPlayer 1250ms cubic-bezier(0.42, 0, 0.58, 1) both;
}

.battle.heartroot-defeat-active .combatant.enemy {
  transform-origin: 58% 82%;
  animation: heartrootDefeatVictor 1500ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.battle.heartroot-defeat-active .combat-card,
.battle.heartroot-defeat-active .team-dots,
.battle.heartroot-defeat-active .battle-console {
  animation: heartrootDefeatHud 680ms ease-in both;
}

.heartroot-defeat-scene {
  position: absolute;
  inset: 0;
  z-index: 34;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  color: #fff7dc;
  text-align: center;
  opacity: 1;
  transition: opacity 160ms ease-in;
}

.heartroot-defeat-scene.is-complete {
  opacity: 0;
}

.heartroot-defeat-scene__dark {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 74%, rgba(124, 236, 154, 0.2), transparent 12%),
    radial-gradient(circle at 52% 42%, rgba(126, 25, 34, 0.42), transparent 43%),
    linear-gradient(180deg, rgba(5, 7, 10, 0.18), rgba(2, 4, 5, 0.98));
  opacity: 0;
  animation: heartrootDefeatCurtain 5200ms linear both;
}

.heartroot-defeat-scene__fracture {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  animation: heartrootDefeatFractureFade 1500ms ease-out 180ms both;
}

.heartroot-defeat-scene__fracture span {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 72%;
  height: 2px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 245, 224, 0.96), rgba(239, 79, 76, 0.72), transparent 72%);
  box-shadow: 0 0 11px rgba(255, 88, 78, 0.74), 0 0 26px rgba(167, 28, 40, 0.48);
  clip-path: polygon(0 22%, 15% 0, 27% 70%, 42% 18%, 61% 80%, 100% 42%, 100% 64%, 60% 100%, 42% 45%, 26% 100%, 14% 34%, 0 78%);
  animation: heartrootDefeatCrack 820ms cubic-bezier(0.14, 0.82, 0.18, 1) both;
}

.heartroot-defeat-scene__fracture span:nth-child(1) { transform: rotate(-18deg); }
.heartroot-defeat-scene__fracture span:nth-child(2) { transform: rotate(148deg); animation-delay: 90ms; }
.heartroot-defeat-scene__fracture span:nth-child(3) { transform: rotate(74deg); animation-delay: 170ms; }

.heartroot-defeat-scene__fall,
.heartroot-defeat-scene__rescue {
  position: absolute;
  left: 50%;
  z-index: 4;
  width: min(780px, calc(100% - 28px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vw, 12px);
  padding: clamp(16px, 3.4vw, 34px) clamp(14px, 4vw, 42px);
  transform: translateX(-50%);
  text-shadow: 0 3px 18px #000, 0 0 28px rgba(255, 78, 72, 0.32);
}

.heartroot-defeat-scene__fall {
  top: 50%;
  opacity: 0;
  transform: translate(-50%, -36%) scale(1.08);
  animation: heartrootDefeatFallCopy 2450ms cubic-bezier(0.18, 0.8, 0.22, 1) 300ms both;
}

.heartroot-defeat-scene__fall::before,
.heartroot-defeat-scene__fall::after {
  content: "";
  position: absolute;
  top: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 116, 105, 0.82));
}

.heartroot-defeat-scene__fall::before { left: 4%; }
.heartroot-defeat-scene__fall::after { right: 4%; transform: scaleX(-1); }

.heartroot-defeat-scene small {
  font-size: clamp(0.62rem, 1.5vw, 0.9rem);
  font-weight: 950;
  letter-spacing: 0.18em;
  color: rgba(255, 229, 210, 0.8);
}

.heartroot-defeat-scene strong {
  display: block;
  max-width: 100%;
  font-size: clamp(1.65rem, 6.6vw, 4.8rem);
  line-height: 0.94;
  font-weight: 1000;
  letter-spacing: 0.035em;
}

.heartroot-defeat-scene em {
  display: block;
  font-size: clamp(0.76rem, 1.9vw, 1.08rem);
  line-height: 1.28;
  font-style: normal;
  font-weight: 800;
  color: rgba(243, 237, 225, 0.82);
}

.heartroot-defeat-scene__motes {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.heartroot-defeat-scene__motes i {
  position: absolute;
  left: var(--hr-x);
  bottom: -4%;
  width: var(--hr-size);
  height: var(--hr-size);
  border-radius: 50%;
  background: radial-gradient(circle, #f8ffca 0 28%, #78ec9b 52%, transparent 76%);
  box-shadow: 0 0 10px rgba(110, 238, 151, 0.8);
  opacity: 0;
  animation: heartrootDefeatMote 1750ms ease-out calc(2380ms + var(--hr-delay)) both;
}

.heartroot-defeat-scene__roots {
  position: absolute;
  left: 50%;
  bottom: 14%;
  z-index: 2;
  width: 86%;
  height: 44%;
  transform: translateX(-50%);
}

.heartroot-defeat-scene__roots i {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--root-length);
  height: 5px;
  border-radius: 999px;
  transform-origin: 0 50%;
  transform: rotate(var(--root-r)) scaleX(0);
  background: linear-gradient(90deg, rgba(230, 255, 187, 0.84), rgba(91, 205, 126, 0.58) 30%, rgba(38, 98, 62, 0.12) 82%, transparent);
  clip-path: polygon(0 38%, 12% 4%, 23% 58%, 35% 20%, 48% 64%, 61% 18%, 74% 54%, 88% 28%, 100% 46%, 100% 72%, 87% 56%, 74% 82%, 61% 48%, 48% 90%, 35% 52%, 23% 88%, 11% 42%, 0 68%);
  box-shadow: 0 0 5px rgba(120, 237, 151, 0.38);
  animation: heartrootDefeatRootGrow 1320ms cubic-bezier(0.15, 0.84, 0.24, 1) calc(2260ms + var(--root-delay)) both;
}

.heartroot-defeat-scene__sigil {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 3;
  width: clamp(82px, 18vmin, 148px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(226, 255, 177, 0.84);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(136, 245, 164, 0.68), inset 0 0 26px rgba(105, 225, 141, 0.28);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.22);
  animation: heartrootDefeatSigil 1750ms cubic-bezier(0.14, 0.82, 0.18, 1) 2360ms both;
}

.heartroot-defeat-scene__sigil::before,
.heartroot-defeat-scene__sigil::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(195, 255, 183, 0.54);
  border-radius: 50%;
}

.heartroot-defeat-scene__sigil::after {
  inset: 27%;
  transform: rotate(45deg);
  border-radius: 18%;
}

.heartroot-defeat-scene__sigil span {
  width: 18%;
  height: 34%;
  border-radius: 70% 15% 70% 15%;
  transform: rotate(45deg);
  background: #f0ffd5;
  box-shadow: 0 0 18px #9bf6ae;
}

.heartroot-defeat-scene__rescue {
  top: 49%;
  opacity: 0;
  transform: translate(-50%, -40%) scale(0.94);
  text-shadow: 0 3px 18px #000, 0 0 30px rgba(118, 239, 151, 0.42);
  animation: heartrootDefeatRescueCopy 2450ms cubic-bezier(0.16, 0.84, 0.22, 1) 2700ms both;
}

.heartroot-defeat-scene__rescue small { color: rgba(210, 255, 200, 0.84); }
.heartroot-defeat-scene__rescue strong { font-size: clamp(1.25rem, 4.7vw, 3.35rem); color: #f4ffd8; }
.heartroot-defeat-scene__rescue em { color: rgba(213, 246, 210, 0.82); }

@keyframes heartrootDefeatField {
  0% { filter: saturate(1) brightness(1); }
  42% { filter: saturate(0.52) brightness(0.62) contrast(1.08); }
  100% { filter: saturate(0.18) brightness(0.28) contrast(1.15); }
}

@keyframes heartrootDefeatPlayer {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); filter: brightness(1); }
  18% { transform: translate(-5px, 1px) rotate(-2deg) scale(0.985); filter: brightness(1.7); }
  46% { opacity: 0.82; transform: translate(3px, 12px) rotate(4deg) scale(0.96); filter: grayscale(0.72) brightness(0.7); }
  100% { opacity: 0.12; transform: translate(-12px, 46px) rotate(-10deg) scale(0.82); filter: grayscale(1) brightness(0.35); }
}

@keyframes heartrootDefeatVictor {
  0% { filter: brightness(1); transform: translateY(0) scale(1); }
  36% { filter: brightness(1.48) saturate(1.2); transform: translateY(-5px) scale(1.045); }
  100% { filter: brightness(0.38) saturate(0.35); transform: translateY(-2px) scale(1.02); }
}

@keyframes heartrootDefeatHud { to { opacity: 0; filter: blur(5px); } }

@keyframes heartrootDefeatCurtain {
  0% { opacity: 0; }
  16% { opacity: 0.28; }
  34% { opacity: 0.96; }
  56% { opacity: 1; filter: saturate(0.55); }
  76% { opacity: 1; filter: saturate(1.2); }
  94% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes heartrootDefeatCrack {
  0% { opacity: 0; scale: 0 1; }
  22% { opacity: 1; }
  100% { opacity: 0; scale: 1 1; }
}

@keyframes heartrootDefeatFractureFade {
  0%, 74% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes heartrootDefeatFallCopy {
  0% { opacity: 0; transform: translate(-50%, -28%) scale(1.12); filter: blur(8px); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(0.97); filter: blur(4px); }
}

@keyframes heartrootDefeatRootGrow {
  0% { opacity: 0; transform: rotate(var(--root-r)) scaleX(0); }
  24% { opacity: 1; }
  100% { opacity: 0.82; transform: rotate(var(--root-r)) scaleX(1); }
}

@keyframes heartrootDefeatSigil {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.22) rotate(-25deg); }
  36% { opacity: 0.94; }
  72% { opacity: 0.72; transform: translate(-50%, -50%) scale(1) rotate(3deg); }
  100% { opacity: 0.18; transform: translate(-50%, -50%) scale(1.32) rotate(9deg); }
}

@keyframes heartrootDefeatMote {
  0% { opacity: 0; transform: translateY(0) scale(0.55); }
  22% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-68vh) scale(1.2); }
}

@keyframes heartrootDefeatRescueCopy {
  0% { opacity: 0; transform: translate(-50%, -34%) scale(0.9); filter: blur(7px); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -52%) scale(1.01); filter: blur(0); }
}

.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__dark { animation: none; opacity: 1; }
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__fall,
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__fracture,
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__motes { display: none; }
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__roots i { animation: none; opacity: 0.7; transform: rotate(var(--root-r)) scaleX(1); }
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__sigil { animation: none; opacity: 0.36; transform: translate(-50%, -50%) scale(1); }
.heartroot-defeat-scene.is-reduced .heartroot-defeat-scene__rescue { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- Perfect-DV (>=90) wild monster: rainbow frame = great catch ---- */
.battle.dv-perfect .battle-stage {
  animation: dv-rainbow 2.2s linear infinite;
}

@keyframes dv-rainbow {
  0%   { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #ff5d8f, 0 0 28px 4px #ff5d8f; }
  17%  { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #ffb14e, 0 0 28px 4px #ffb14e; }
  34%  { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #f7e733, 0 0 28px 4px #f7e733; }
  50%  { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #4ade80, 0 0 28px 4px #4ade80; }
  67%  { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #38bdf8, 0 0 28px 4px #38bdf8; }
  84%  { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #a78bfa, 0 0 28px 4px #a78bfa; }
  100% { box-shadow: var(--shadow), inset 0 0 80px rgba(0,0,0,0.3), 0 0 0 4px #ff5d8f, 0 0 28px 4px #ff5d8f; }
}

.battle.dv-perfect .battle-console {
  border-color: transparent;
  animation: dv-rainbow-border 2.2s linear infinite;
}

@keyframes dv-rainbow-border {
  0%, 100% { box-shadow: 0 0 0 2px #ff5d8f; }
  25% { box-shadow: 0 0 0 2px #f7e733; }
  50% { box-shadow: 0 0 0 2px #4ade80; }
  75% { box-shadow: 0 0 0 2px #38bdf8; }
}

@media (prefers-reduced-motion: reduce) {
  .battle.defeat::after { animation-duration: 1400ms; }
  .battle.dv-perfect .battle-stage,
  .battle.dv-perfect .battle-console { animation: none; box-shadow: var(--shadow), 0 0 0 4px #f7e733; }
}

/* Battle backdrop matched to the locale's theme */
.battle[data-theme="town"] .battle-stage,
.battle[data-theme="meadow"] .battle-stage { --battle-fallback: linear-gradient(#bfe3f2 0 50%, #f0d99a 50%); }
.battle[data-theme="amber"] .battle-stage { --battle-fallback: linear-gradient(#f3e2b6 0 50%, #d9b463 50%); }
.battle[data-theme="marsh"] .battle-stage,
.battle[data-theme="tide"] .battle-stage { --battle-fallback: linear-gradient(#bfe6e6 0 50%, #3f9bb5 50%); }
.battle[data-theme="stone"] .battle-stage,
.battle[data-theme="granite"] .battle-stage { --battle-fallback: linear-gradient(#dad3c2 0 50%, #9a9082 50%); }
.battle[data-theme="dusk"] .battle-stage,
.battle[data-theme="eclipse"] .battle-stage { --battle-fallback: linear-gradient(#3a3556 0 50%, #211f33 50%); }
.battle[data-theme="frost"] .battle-stage,
.battle[data-theme="prism"] .battle-stage { --battle-fallback: linear-gradient(#e6f4f9 0 50%, #c2dce6 50%); }
.battle[data-theme="aether"] .battle-stage,
.battle[data-theme="aetherCrown"] .battle-stage { --battle-fallback: linear-gradient(#2a2552 0 50%, #161232 50%); }
.battle[data-theme="voidtide"] .battle-stage { --battle-fallback: linear-gradient(#0c1330 0 50%, #111a3f 50%); }
.battle[data-theme="abyss"] .battle-stage { --battle-fallback: linear-gradient(#05040a 0 50%, #13091d 50%); }
.battle[data-theme="sanctum"] .battle-stage { --battle-fallback: linear-gradient(#fff4d2 0 50%, #f3e0b0 50%); }

.battle[data-theme="town"] .battle-stage,
.battle[data-theme="meadow"] .battle-stage { --battle-pad-player: rgba(214, 238, 168, 0.5); --battle-pad-enemy: rgba(214, 238, 168, 0.42); }
.battle[data-theme="amber"] .battle-stage { --battle-pad-player: rgba(255, 222, 140, 0.5); --battle-pad-enemy: rgba(255, 222, 140, 0.42); }
.battle[data-theme="marsh"] .battle-stage,
.battle[data-theme="tide"] .battle-stage { --battle-pad-player: rgba(185, 240, 230, 0.48); --battle-pad-enemy: rgba(185, 240, 230, 0.4); }
.battle[data-theme="stone"] .battle-stage,
.battle[data-theme="granite"] .battle-stage { --battle-pad-player: rgba(232, 220, 192, 0.48); --battle-pad-enemy: rgba(232, 220, 192, 0.4); }
.battle[data-theme="dusk"] .battle-stage,
.battle[data-theme="eclipse"] .battle-stage { --battle-pad-player: rgba(185, 166, 255, 0.42); --battle-pad-enemy: rgba(185, 166, 255, 0.34); }
.battle[data-theme="frost"] .battle-stage,
.battle[data-theme="prism"] .battle-stage { --battle-pad-player: rgba(235, 250, 255, 0.5); --battle-pad-enemy: rgba(235, 250, 255, 0.42); }
.battle[data-theme="aether"] .battle-stage,
.battle[data-theme="aetherCrown"] .battle-stage,
.battle[data-theme="voidtide"] .battle-stage { --battle-pad-player: rgba(169, 199, 255, 0.42); --battle-pad-enemy: rgba(169, 199, 255, 0.34); }
.battle[data-theme="abyss"] .battle-stage { --battle-pad-player: rgba(163, 95, 255, 0.42); --battle-pad-enemy: rgba(163, 95, 255, 0.34); }
.battle[data-theme="sanctum"] .battle-stage { --battle-pad-player: rgba(255, 245, 205, 0.62); --battle-pad-enemy: rgba(255, 245, 205, 0.52); }

.battle[data-theme="dusk"] .battle-stage::before,
.battle[data-theme="eclipse"] .battle-stage::before,
.battle[data-theme="aether"] .battle-stage::before,
.battle[data-theme="aetherCrown"] .battle-stage::before,
.battle[data-theme="voidtide"] .battle-stage::before,
.battle[data-theme="abyss"] .battle-stage::before {
  /* dark-theme ambient wash only - no pad, no under-monster shadow */
  background: radial-gradient(circle at 52% 46%, rgba(155, 135, 240, 0.22), transparent 56%);
}

.fx-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.battle-stage.fx-overflow,
.battle-stage.fx-overflow .fx-layer {
  overflow: visible;
}

.fx-layer span {
  position: absolute;
  display: block;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, left, top;
}

.fx-layer img.fx-safari-item {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  z-index: 16;
  width: var(--throw-size, 64px);
  height: var(--throw-size, 64px);
  display: block;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.68) rotate(-24deg);
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 235, 160, 0.22));
  will-change: left, top, transform, opacity;
  animation: safari-item-throw var(--throw-ms, 780ms) cubic-bezier(0.16, 0.78, 0.18, 1) forwards;
}

.fx-layer img.fx-safari-mud {
  --throw-size: 70px;
  filter: drop-shadow(0 7px 9px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(180, 130, 76, 0.35));
}

@keyframes safari-item-throw {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-30deg);
  }
  12% {
    opacity: 1;
  }
  56% {
    left: var(--mx);
    top: var(--my);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(95deg);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82) rotate(210deg);
  }
}

.combatant {
  --sprite-size: var(--sprite-size-desktop, 188px);
  --sprite-width: var(--sprite-width-desktop, var(--sprite-size));
  --sprite-drop: var(--sprite-drop-desktop, 0px);
  position: absolute;
  z-index: 3;
  /* Box and monster are STACKED vertically with a clear gap between them
     (enemy: box on top; ally: box beneath) — cleaner & more immersive. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.combatant .combat-card { width: 264px; max-width: 76vw; }

.combatant.enemy {
  /* Foe up top: its box ABOVE the monster, near the stage top — capped so a
     big legendary's whole stack still fits fully on-stage. */
  top: clamp(10px, 22px, calc(100% - var(--sprite-size) - 192px));
  right: 60px;
}
/* Trainer battles show the red team tracker just above the enemy box; drop
   the whole enemy stack a little so the tracker sits clear of the Lv pill
   (and never clips the stage top). Wild battles hide it -> unaffected. */
.combatant.enemy:has(.team-dots:not(.hidden)) {
  top: clamp(42px, 54px, calc(100% - var(--sprite-size) - 198px));
}

.combatant.player {
  --sprite-size: var(--sprite-size-desktop, 194px);
  --sprite-fx-rise: 0px;
  left: 60px;
  /* Ally down low: monster ABOVE its box, near the stage bottom — capped so
     the whole stack stays on-stage. */
  bottom: clamp(10px, 20px, calc(100% - var(--sprite-size) - 218px));
}

.combatant.raid-buddy {
  --sprite-size: var(--sprite-size-desktop, 150px);
  --sprite-fx-rise: 0px;
  right: 70px;
  bottom: clamp(10px, 22px, calc(100% - var(--sprite-size) - 196px));
}

.combatant.raid-buddy.hidden { display: none; }
.combatant.raid-buddy .sprite-flip { transform: none; }
.combatant.raid-buddy .combat-card {
  width: 220px;
  max-width: 70vw;
  border-color: rgba(255, 112, 86, 0.34);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.44), 0 0 18px rgba(208, 54, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.combatant.raid-buddy.hit img { animation: hit-shake 360ms ease-in-out; }
.combatant.raid-buddy.fainting img { animation: faint-drop 720ms ease-in forwards; }
.battle:not(.battle-raid) .combatant.raid-buddy { display: none; }

.combatant.enemy.boss-aura {
  isolation: isolate;
}

.combatant.enemy.boss-aura .sprite-flip,
.combatant.enemy.boss-aura .combat-card,
.combatant.enemy.boss-aura .team-dots {
  position: relative;
  z-index: 1;
}

.combatant.enemy.boss-aura[data-boss-aura="rimeglass"]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 0;
  width: calc(var(--sprite-width) + 94px);
  height: calc(var(--sprite-size) + 58px);
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.9;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 255, 255, 0.38) 0 7%, rgba(151, 230, 255, 0.3) 13%, rgba(123, 140, 255, 0.18) 36%, transparent 68%),
    conic-gradient(from -16deg at 50% 56%, transparent 0 18deg, rgba(255, 255, 255, 0.28) 18deg 22deg, transparent 22deg 56deg, rgba(127, 240, 255, 0.22) 56deg 60deg, transparent 60deg 100deg),
    radial-gradient(ellipse at 50% 60%, transparent 0 39%, rgba(199, 245, 255, 0.25) 41%, transparent 45% 100%);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.24),
    0 0 22px rgba(126, 205, 255, 0.36),
    0 0 46px rgba(119, 112, 255, 0.24);
  mix-blend-mode: screen;
  animation: boss-rimeglass-aura 3.2s ease-in-out infinite;
}

@keyframes boss-rimeglass-aura {
  0%, 100% {
    opacity: 0.78;
    filter: saturate(1.08) brightness(1);
    transform: translateX(-50%) scale(0.97) rotate(-2deg);
  }
  50% {
    opacity: 0.96;
    filter: saturate(1.24) brightness(1.14);
    transform: translateX(-50%) scale(1.04) rotate(2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .combatant.enemy.boss-aura[data-boss-aura="rimeglass"]::before {
    animation: none;
    opacity: 0.86;
  }
}

.combatant img {
  width: var(--sprite-width);
  height: var(--sprite-size);
  object-fit: contain;
  object-position: center bottom;
}

.combatant img.sprite-loading {
  opacity: 0;
}

/* While the sprite is still downloading (slow connections) the img above is
   invisible; breathe a soft silhouette in the same box so the monster slot
   never reads as empty. Vanishes the moment the real art decodes because the
   img drops .sprite-loading. */
.combatant .sprite-flip:has(> img.sprite-loading)::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: calc(var(--sprite-size, 150px) * 0.86);
  height: calc(var(--sprite-size, 150px) * 0.72);
  transform: translateX(-50%);
  border-radius: 48% 52% 55% 45% / 68% 62% 38% 32%;
  background: radial-gradient(ellipse 62% 74% at 50% 64%, rgba(236, 244, 255, 0.2), rgba(236, 244, 255, 0.07) 56%, transparent 76%);
  animation: sprite-loading-breathe 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sprite-loading-breathe {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.96); }
  50% { opacity: 0.9; transform: translateX(-50%) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .combatant .sprite-flip:has(> img.sprite-loading)::before {
    animation: none;
    opacity: 0.55;
  }
}

/* The foe is top-anchored: drop smaller sprites so their feet meet the same
   ground line a max-size monster sits on (big monsters get ~0px and stay put).
   margin-top is used (not transform) so it never fights the hit/intro anims. */
.combatant.enemy img {
  margin-top: var(--sprite-drop, 0px);
}

.combatant.player img {
  width: var(--sprite-width);
  height: var(--sprite-size);
  grid-column: 2;
  grid-row: 1;
  /* Mirror of the enemy drop: the ally stack is bottom-anchored, so lift a
     SMALL sprite UP (off the HP box) until its top meets the same line a
     max-size monster reaches. Big monsters get ~0px and don't move. */
  margin-bottom: var(--sprite-drop, 0px);
}

/* Sprites are drawn facing LEFT. That's correct for the enemy (top-right,
   looking down-left toward you) and for party/box/dex thumbnails. But the
   player's battle monster sits bottom-left and must look UP-RIGHT at the foe,
   so its sprite is mirrored. The flip lives on a wrapper that is never
   animated, so it composes cleanly with every lunge/hit/morph animation on
   the inner <img> (those keep targeting `.combatant.player ... img`). */
.combatant .sprite-flip {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.combatant.player .sprite-flip {
  order: 0;
  transform: scaleX(-1);
}
.combatant.enemy .sprite-flip { order: 1; }
/* A monster whose source art faces RIGHT is the mirror of the usual
   convention: don't flip it as the player, DO flip it as the enemy, so it
   always looks toward its opponent. */
.combatant.enemy.face-right .sprite-flip { transform: scaleX(-1); }
.combatant.player.face-right .sprite-flip { transform: none; }

.combatant .sprite-flip.battle-anim {
  width: var(--sprite-width, var(--sprite-size));
  height: var(--sprite-size);
  overflow: hidden;
  justify-content: flex-start;
}

.combatant.enemy .sprite-flip.battle-anim { margin-top: var(--sprite-drop, 0px); }
.combatant.player .sprite-flip.battle-anim { margin-bottom: var(--sprite-drop, 0px); }

.combatant .sprite-flip.battle-anim img {
  width: var(--battle-anim-sheet-width, var(--sprite-width, var(--sprite-size)));
  max-width: none;
  height: var(--sprite-size);
  flex: 0 0 auto;
  object-fit: fill;
  object-position: left bottom;
  margin: 0;
  animation: battle-sheet-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) infinite;
}

@keyframes battle-sheet-play {
  from { margin-left: 0; }
  to { margin-left: var(--battle-anim-shift, 0px); }
}

/* A separate animation name is intentional. Reusing battle-sheet-play lets a
   long-running idle animation donate its elapsed timeline to the one-shot,
   which can make an attack begin already finished on its recovery frame. */
@keyframes battle-sheet-attack-play {
  from { margin-left: 0; }
  to { margin-left: var(--battle-anim-shift, 0px); }
}
/* Missing monster art → a dark silhouette placeholder, so a not-yet-drawn
   sprite (e.g. a new legendary) never shows a broken-image glyph. */
.battle.final-ko-cinematic .battle-stage {
  filter: saturate(1.12) contrast(1.05);
}

.battle.final-ko-cinematic .combatant .sprite-flip,
.battle.final-ko-cinematic .fx-layer > * {
  animation-duration: calc(var(--battle-anim-duration, 1000ms) * 1.35);
}

.battle.final-ko-cinematic .combatant.fainting .sprite-flip {
  transition-duration: 0.95s;
}

.tactics-layer.tactics-final-ko canvas {
  filter: saturate(1.1) contrast(1.04);
}

.tactics-layer.tactics-shake canvas {
  animation: tactics-cam-shake 340ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.tactics-layer.tactics-shake-hard canvas {
  animation: tactics-cam-shake-hard 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes tactics-cam-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4px, 2px, 0); }
  45% { transform: translate3d(3px, -3px, 0); }
  70% { transform: translate3d(-2px, 2px, 0); }
  88% { transform: translate3d(2px, -1px, 0); }
}

@keyframes tactics-cam-shake-hard {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  12% { transform: translate3d(-8px, 4px, 0) scale(1.01); }
  30% { transform: translate3d(7px, -6px, 0) scale(1); }
  48% { transform: translate3d(-6px, 5px, 0) scale(1.008); }
  66% { transform: translate3d(5px, -3px, 0) scale(1); }
  84% { transform: translate3d(-3px, 2px, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tactics-layer.tactics-shake canvas,
  .tactics-layer.tactics-shake-hard canvas { animation: none; }
}

.sprite-flip.missing-sprite {
  width: var(--sprite-size-desktop, 180px);
  height: var(--sprite-size-desktop, 180px);
  opacity: 0;
}
.sprite-flip.missing-sprite::after {
  content: none;
  display: none;
}

/* Lingering affinity trace shown while the new elemental status is active. */
.affinity-status-aura {
  --affinity-status-size: calc(var(--sprite-size) * 1.24);
  --affinity-status-glow: rgba(255, 244, 190, 0.12);
  --affinity-status-sheet: url("assets/effects/affinity-status-daze-sheet.png?v=affinity-status-4");
  position: absolute;
  left: 50%;
  top: 30%;
  width: var(--affinity-status-size);
  height: var(--affinity-status-size);
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, -50%);
  background-image:
    radial-gradient(ellipse at 50% 62%, var(--affinity-status-glow), transparent 52%),
    var(--affinity-status-sheet);
  background-repeat: no-repeat;
  background-position: center, 0 0;
  background-size: 100% 100%, calc(var(--affinity-status-size) * 12) var(--affinity-status-size);
  mix-blend-mode: screen;
  will-change: background-position, transform, opacity;
  animation:
    affinity-status-sheet 1320ms steps(11, end) infinite,
    affinity-status-presence 2420ms ease-in-out infinite;
}
.affinity-status-burn {
  --affinity-status-glow: rgba(255, 82, 32, 0.16);
  --affinity-status-sheet: url("assets/effects/affinity-status-burn-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(255, 82, 32, 0.85));
}
.affinity-status-chill {
  --affinity-status-glow: rgba(141, 227, 255, 0.14);
  --affinity-status-sheet: url("assets/effects/affinity-status-chill-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(174, 236, 255, 0.85));
}
.affinity-status-shock {
  --affinity-status-glow: rgba(255, 232, 82, 0.16);
  --affinity-status-sheet: url("assets/effects/affinity-status-shock-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(255, 232, 82, 0.9));
}
.affinity-status-sap {
  --affinity-status-glow: rgba(98, 216, 104, 0.14);
  --affinity-status-sheet: url("assets/effects/affinity-status-sap-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(98, 216, 104, 0.8));
}
.affinity-status-venom {
  --affinity-status-glow: rgba(122, 226, 78, 0.12);
  --affinity-status-sheet: url("assets/effects/affinity-status-venom-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(122, 226, 78, 0.78));
}
.affinity-status-crack {
  --affinity-status-glow: rgba(202, 174, 122, 0.12);
  --affinity-status-sheet: url("assets/effects/affinity-status-crack-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 16px rgba(202, 174, 122, 0.75));
}
.affinity-status-drench {
  --affinity-status-glow: rgba(72, 190, 246, 0.14);
  --affinity-status-sheet: url("assets/effects/affinity-status-drench-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(72, 190, 246, 0.82));
}
.affinity-status-expose {
  --affinity-status-glow: transparent;
  --affinity-status-sheet: url("assets/effects/affinity-status-expose-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(255, 246, 172, 0.86));
}
.affinity-status-curse {
  --affinity-status-glow: rgba(128, 87, 206, 0.14);
  --affinity-status-sheet: url("assets/effects/affinity-status-curse-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(128, 87, 206, 0.82));
}
.affinity-status-rattle {
  --affinity-status-glow: rgba(154, 170, 255, 0.13);
  --affinity-status-sheet: url("assets/effects/affinity-status-rattle-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(154, 170, 255, 0.8));
}
.affinity-status-daze {
  --affinity-status-glow: rgba(245, 224, 160, 0.13);
  --affinity-status-sheet: url("assets/effects/affinity-status-daze-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 16px rgba(245, 224, 160, 0.78));
}
.affinity-status-reverence {
  --affinity-status-glow: rgba(255, 242, 178, 0.16);
  --affinity-status-sheet: url("assets/effects/affinity-status-expose-sheet.png?v=affinity-status-4");
  filter: drop-shadow(0 0 18px rgba(255, 242, 178, 0.84));
}
@keyframes affinity-status-sheet {
  from { background-position: center, 0 0; }
  to { background-position: center, calc(var(--affinity-status-size) * -11) 0; }
}
@keyframes affinity-status-presence {
  0%, 100% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.98); }
  45% { opacity: 0.58; transform: translate(-50%, -52%) scale(1.04); }
}

.combatant.asleep .sprite-flip { animation: sleep-breathe 3.6s ease-in-out infinite; }
.combatant.asleep .sprite-flip::before,
.combatant.asleep .sprite-flip::after {
  content: "Z";
  position: absolute; left: 58%; top: 6%;
  font: 800 22px/1 var(--font, "Segoe UI", system-ui, sans-serif);
  color: #eef6ff;
  text-shadow: 0 0 7px rgba(150,200,255,0.9), 0 1px 1px rgba(20,40,80,0.55);
  opacity: 0; pointer-events: none; z-index: 6;
  animation: zsleep 3.2s ease-in-out infinite;
}
/* leading, smaller "z" */
.combatant.asleep .sprite-flip::before {
  content: "z"; font-size: 15px; left: 55%; top: 12%;
  animation-delay: 0s;
}
/* trailing, larger "Z" */
.combatant.asleep .sprite-flip::after { animation-delay: 1.6s; }
/* The player's sprite wrapper is mirrored (scaleX(-1)); a text glyph would
   render backwards, so the player gets counter-flipped keyframes that keep
   the "Z" upright and drifting the same way on screen. */
.combatant.player.asleep .sprite-flip::before,
.combatant.player.asleep .sprite-flip::after { animation-name: zsleep-mir; }

@keyframes zsleep {
  0%   { opacity: 0;    transform: translate(0, 8px) scale(0.55) rotate(-8deg); }
  14%  { opacity: 0.95; }
  50%  { opacity: 0.9;  transform: translate(11px, -26px) scale(1) rotate(5deg); }
  78%  { opacity: 0.5;  transform: translate(6px, -44px) scale(1.14) rotate(-3deg); }
  100% { opacity: 0;    transform: translate(15px, -64px) scale(1.28) rotate(3deg); }
}
@keyframes zsleep-mir {
  0%   { opacity: 0;    transform: translate(0, 8px) scale(0.55) rotate(8deg) scaleX(-1); }
  14%  { opacity: 0.95; }
  50%  { opacity: 0.9;  transform: translate(-11px, -26px) scale(1) rotate(-5deg) scaleX(-1); }
  78%  { opacity: 0.5;  transform: translate(-6px, -44px) scale(1.14) rotate(3deg) scaleX(-1); }
  100% { opacity: 0;    transform: translate(-15px, -64px) scale(1.28) rotate(-3deg) scaleX(-1); }
}
@keyframes sleep-breathe {
  0%, 100% { filter: brightness(0.92) saturate(0.9); }
  50%      { filter: brightness(1) saturate(0.96); }
}
.combatant.frozen .sprite-flip { filter: saturate(0.82) brightness(1.05); }
.combatant.frozen .sprite-flip::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 134%; height: 154%; transform: translate(-50%, -50%);
  background: url("assets/effects/prism-ice-block-overlay.png?v=prism-ice-block-realistic-1") center / contain no-repeat;
  opacity: 0.78;
  filter:
    drop-shadow(0 0 16px rgba(189,239,255,0.62))
    drop-shadow(0 0 28px rgba(127,200,240,0.42))
    saturate(1.08)
    brightness(1.06);
  pointer-events: none; z-index: 5;
  animation: ice-shimmer 2.4s ease-in-out infinite;
}
@keyframes ice-shimmer {
  0%, 100% { opacity: 0.74; transform: translate(-50%, -50%) scale(0.995); }
  50% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.01); }
}
/* Lingering "voidbound": the foe is held inside a swirling black hole for as
   long as Black Hole's seal lasts. */
/* Sealed by Black Hole: the monster is dragged INTO the singularity and is
   gone for good — only the swirling hole remains until it is released. */
.combatant.voidbound .sprite-flip { filter: none; }
.combatant.voidbound .sprite-flip img {
  animation: void-suck 660ms cubic-bezier(0.55, 0, 0.75, 0) forwards;
}
@keyframes void-suck {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  38%  { opacity: 1; transform: translate(0, 3%) scale(0.8) rotate(-130deg); }
  76%  { opacity: 0.5; transform: translate(0, 5%) scale(0.24) rotate(-470deg); filter: brightness(0.5); }
  100% { opacity: 0; transform: translate(0, 7%) scale(0) rotate(-660deg); filter: brightness(0.3); }
}
/* released: spat back out of the collapsing hole */
.combatant.void-release .sprite-flip img {
  animation: void-return 720ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
@keyframes void-return {
  0%   { opacity: 0; transform: translate(0, 7%) scale(0) rotate(440deg); filter: brightness(2); }
  46%  { opacity: 1; transform: translate(0, -2%) scale(1.12) rotate(38deg); filter: brightness(1.5); }
  72%  { transform: translate(0, 1%) scale(0.95) rotate(-8deg); filter: brightness(1.1); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); filter: brightness(1); }
}
.combatant.void-release .sprite-flip::after {
  content: ""; position: absolute; left: 50%; top: 54%;
  width: 72%; height: 72%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 4;
  background: radial-gradient(circle, #000 0%, rgba(26,15,46,0.82) 50%, transparent 78%);
  box-shadow: 0 0 28px rgba(122,63,176,0.72), inset 0 0 16px #000;
  animation: void-collapse 560ms cubic-bezier(0.6, 0, 0.4, 1) forwards;
}
@keyframes void-collapse {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  55%  { opacity: 1;    transform: translate(-50%, -50%) scale(1.16) rotate(180deg); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0) rotate(320deg); }
}
.combatant.voidbound .sprite-flip::before {
  content: ""; position: absolute; left: 50%; top: 54%;
  width: 116%; height: 116%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 5;
  background: conic-gradient(from 0deg,
    rgba(122,63,176,0) 0deg, rgba(122,63,176,0.5) 90deg,
    rgba(0,0,0,0.62) 180deg, rgba(201,160,255,0.42) 300deg, rgba(122,63,176,0) 360deg);
  mix-blend-mode: screen;
  animation: voidbound-swirl 2.4s linear infinite;
}
.combatant.voidbound .sprite-flip::after {
  content: ""; position: absolute; left: 50%; top: 54%;
  width: 54%; height: 54%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, #000 0%, rgba(26,15,46,0.8) 55%, transparent 80%);
  box-shadow: 0 0 22px rgba(122,63,176,0.7), inset 0 0 16px #000;
  animation: voidbound-pulse 2.4s ease-in-out infinite;
}
@keyframes voidbound-swirl {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes voidbound-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.85; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

/* Gravecrack pulls the whole rendered monster wrapper below ground, so idle
   sheets, Black Holo layers, and ordinary PNGs all vanish together. The hole
   is a dedicated combatant sibling; mounting it on .sprite-flip would crop it
   to one horizontal-sheet frame. */
.combatant.gravebound .sprite-flip {
  z-index: 2;
  animation: noxavyr-grave-sink 720ms cubic-bezier(0.55, 0, 0.78, 0.2) forwards !important;
}
.combatant.grave-release .sprite-flip {
  z-index: 2;
  animation: noxavyr-grave-rise 720ms cubic-bezier(0.2, 1.5, 0.35, 1) both !important;
}
.combatant:is(.gravebound, .grave-release) .combat-card {
  position: relative;
  z-index: 6;
}
.combatant:is(.gravebound, .grave-release).shiny-combatant::before,
.combatant:is(.gravebound, .grave-release).shiny-combatant::after,
.combatant:is(.gravebound, .grave-release).black-holo-combatant::before,
.combatant:is(.gravebound, .grave-release).black-holo-combatant .black-holo-aura {
  opacity: 0 !important;
  animation: none !important;
}
.noxavyr-grave-trap {
  position: absolute;
  left: 50%;
  top: 76%;
  width: min(calc(var(--sprite-size, 158px) * 1.62), 360px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  isolation: isolate;
  background: url("assets/effects/noxavyr-abyssal-gravecrack-sheet.png?v=noxavyr-signatures-1") 100% 50% / 800% 100% no-repeat;
  filter: saturate(1.16) contrast(1.08) drop-shadow(0 0 18px rgba(107, 25, 138, 0.82)) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.76));
  -webkit-mask-image: radial-gradient(ellipse at 50% 52%, #000 0 62%, rgba(0, 0, 0, 0.94) 76%, transparent 98%);
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0 62%, rgba(0, 0, 0, 0.94) 76%, transparent 98%);
  animation: noxavyr-grave-hold 2.2s ease-in-out infinite;
}
.noxavyr-grave-trap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 53%;
  width: 58%;
  height: 32%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.98) 0 23%, rgba(18, 0, 29, 0.82) 43%, transparent 72%);
  box-shadow: 0 0 18px rgba(91, 22, 115, 0.78);
  animation: noxavyr-grave-mouth 2.2s ease-in-out infinite;
}
.noxavyr-grave-trap.is-releasing {
  animation: noxavyr-grave-collapse 700ms cubic-bezier(0.55, 0, 0.72, 0.24) forwards;
}
@keyframes noxavyr-grave-sink {
  0% { opacity: 1; translate: 0 0; scale: 1; filter: brightness(1); }
  48% { opacity: 0.92; translate: 0 15%; scale: 0.82 0.7; filter: brightness(0.72); }
  78% { opacity: 0.48; translate: 0 34%; scale: 0.52 0.3; filter: brightness(0.45); }
  100% { opacity: 0; translate: 0 48%; scale: 0.32 0.08; filter: brightness(0.22); }
}
@keyframes noxavyr-grave-rise {
  0% { opacity: 0; translate: 0 48%; scale: 0.32 0.08; filter: brightness(1.8); }
  58% { opacity: 1; translate: 0 -5%; scale: 1.1 1.04; filter: brightness(1.35); }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: brightness(1); }
}
@keyframes noxavyr-grave-hold {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.97) rotate(-1deg); }
  50% { opacity: 1; transform: translate(-50%, -51.5%) scale(1.045) rotate(1deg); }
}
@keyframes noxavyr-grave-mouth {
  0%, 100% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.9, 0.78); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08, 1); }
}
@keyframes noxavyr-grave-collapse {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  56% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.08, 0.76) rotate(6deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.12, 0.04) rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .combatant.gravebound .sprite-flip {
    animation: none !important;
    opacity: 0;
    translate: 0 48%;
    scale: 0.32 0.08;
  }
  .combatant.grave-release .sprite-flip {
    animation: none !important;
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  .noxavyr-grave-trap,
  .noxavyr-grave-trap::after {
    animation: none;
  }
  .noxavyr-grave-trap.is-releasing {
    opacity: 0;
  }
}

/* Blackwing Oblivion leaves the caster concealed by its generated living
   smoke for three later turns. It is hidden, but remains targetable; the
   defender's separate blind counter supplies the 50% miss chance. */
.combatant.smoke-veiled .sprite-flip img {
  opacity: 0.34;
  filter: brightness(0.46) saturate(0.68) contrast(1.16);
  transition: opacity 240ms ease, filter 240ms ease;
}
.combatant.blackwing-blinded:not(.gravebound):not(.voidbound) .sprite-flip img {
  filter: brightness(0.46) saturate(0.42) contrast(1.12);
}
.combatant.smoke-veiled .sprite-flip {
  z-index: 2;
}
.combatant.smoke-veiled .combat-card {
  position: relative;
  z-index: 6;
}
/* The hold cloud cannot live on .sprite-flip: Noxavyr uses a horizontal idle
   sheet and that wrapper must stay overflow-clipped to one monster frame.
   Mount this dedicated sibling on the combatant instead, where the complete
   feathered cloud can surround the silhouette without exposing the sheet. */
.noxavyr-smoke-veil {
  position: absolute;
  left: 50%;
  top: calc(var(--sprite-size) * 0.5);
  width: min(calc(var(--sprite-size) * 1.38), 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 4;
  isolation: isolate;
  animation: noxavyr-smoke-veil 3.2s ease-in-out infinite;
}
.combatant.enemy .noxavyr-smoke-veil {
  top: calc(100% - var(--sprite-size) * 0.5);
}
.noxavyr-smoke-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("assets/effects/noxavyr-blackwing-oblivion-sheet.png?v=noxavyr-signatures-1") 100% 50% / 800% 100% no-repeat;
  filter: brightness(1.18) contrast(1.22) saturate(1.16) drop-shadow(0 0 22px rgba(31, 10, 45, 0.96)) drop-shadow(0 0 34px rgba(111, 42, 164, 0.58));
  -webkit-mask-image: radial-gradient(circle at 50% 52%, #000 0 58%, rgba(0, 0, 0, 0.92) 72%, transparent 94%);
  mask-image: radial-gradient(circle at 50% 52%, #000 0 58%, rgba(0, 0, 0, 0.92) 72%, transparent 94%);
}
.noxavyr-smoke-eye {
  position: absolute;
  top: 41%;
  left: 39%;
  width: 6.5%;
  height: 2.8%;
  z-index: 2;
  border-radius: 72% 28% 68% 32%;
  background: radial-gradient(ellipse at 58% 50%, #ffffff 0 9%, #ffb2a9 12%, #ff294d 31%, #8f001b 58%, transparent 72%);
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px #ff163d) drop-shadow(0 0 18px rgba(255, 0, 50, 0.96));
  transform: rotate(7deg);
  animation: noxavyr-smoke-eye-pulse 1.65s ease-in-out infinite;
}
.noxavyr-smoke-eye + .noxavyr-smoke-eye {
  left: 61%;
  transform: translateX(-100%) scaleX(-1) rotate(7deg);
  animation-delay: -0.11s;
}
@keyframes noxavyr-smoke-veil {
  0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.96) rotate(-1deg); }
  50% { opacity: 1; transform: translate(-50%, -51.5%) scale(1.045) rotate(1deg); }
}
@keyframes noxavyr-smoke-eye-pulse {
  0%, 100% { opacity: 0.82; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #ff163d) drop-shadow(0 0 16px rgba(255, 0, 50, 0.9)); }
  46% { opacity: 1; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #ff163d) drop-shadow(0 0 24px rgba(255, 0, 50, 1)); }
  54% { opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .noxavyr-smoke-veil,
  .noxavyr-smoke-eye {
    animation: none;
  }
}

.fx-sheet-noxavyr-signature {
  filter: drop-shadow(0 0 18px rgba(15, 3, 24, 0.92));
}
.fx-sheet-noxavyr-crimson-twinbeam {
  filter: saturate(1.28) contrast(1.12) drop-shadow(0 0 20px rgba(255, 20, 58, 0.9));
}
.fx-sheet-noxavyr-violet-ruinflare {
  filter: saturate(1.18) brightness(1.08) drop-shadow(0 0 28px rgba(192, 54, 255, 0.94));
}

/* Aurevyr's signatures are intentionally brighter and larger than ordinary
   classic effects. The dawn-horn strip carries a broad bloom so its peak
   reads as a whole-stage flash even when touch devices keep the stage clipped. */
.fx-sheet-aurevyr-signature {
  mix-blend-mode: screen;
  filter: saturate(1.16) brightness(1.08)
    drop-shadow(0 0 22px rgba(255, 239, 177, 0.96))
    drop-shadow(0 0 42px rgba(255, 126, 192, 0.48));
}
.fx-sheet-aurevyr-heavenfire-wingfall {
  filter: saturate(1.24) brightness(1.1)
    drop-shadow(0 0 28px rgba(255, 188, 61, 0.98))
    drop-shadow(0 0 56px rgba(255, 255, 255, 0.7));
}
.fx-sheet-aurevyr-dawnspike-revelation {
  box-shadow: 0 0 110px 52px rgba(255, 255, 244, 0.46), 0 0 210px 96px rgba(255, 213, 108, 0.28);
  filter: brightness(1.2) saturate(1.08)
    drop-shadow(0 0 34px rgba(255, 255, 255, 1))
    drop-shadow(0 0 72px rgba(255, 216, 102, 0.9));
}
.fx-sheet-aurevyr-eternal-white-sun {
  filter: brightness(1.16) saturate(1.1)
    drop-shadow(0 0 36px rgba(255, 255, 255, 1))
    drop-shadow(0 0 82px rgba(255, 203, 77, 0.96));
}
.fx-sheet-aurevyr-roseflame-salvo {
  filter: brightness(1.12) saturate(1.28)
    drop-shadow(0 0 30px rgba(255, 113, 188, 0.98))
    drop-shadow(0 0 56px rgba(255, 255, 255, 0.76));
}

/* :where() keeps the holo-twin exclusions at zero specificity so this base
   lunge stays BELOW the sheet-monster rules that follow: the idle-sheet
   freeze (.battle-anim img) and the dedicated attack sheets must win, or the
   lunge translates the multi-frame strip inside its overflow window and the
   neighboring frame slides into view (frozen sprite + ghost double). */
.combatant.player.attacking .sprite-flip > img:where(:not(.holo-sprite):not(.black-holo-sprite):not(.holo-rim-twin)) { animation: player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1); }
.combatant.enemy.attacking .sprite-flip > img:where(:not(.holo-sprite):not(.black-holo-sprite):not(.holo-rim-twin)) { animation: enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1); }
.combatant.raid-buddy.attacking .sprite-flip > img:where(:not(.holo-sprite):not(.black-holo-sprite):not(.holo-rim-twin)) { animation: player-lunge 480ms cubic-bezier(0.3, 1.4, 0.4, 1); }
.combatant.player.attacking .sprite-flip.battle-anim img,
.combatant.enemy.attacking .sprite-flip.battle-anim img,
.combatant.raid-buddy.attacking .sprite-flip.battle-anim img,
.combatant.duo-enemy.attacking .sprite-flip.battle-anim img {
  animation: none;
  margin-left: 0;
}
/* ...but a DEDICATED attack-state sheet (battle-anim-attack, e.g. Glovemaw's
   punch cycle) must step once through the lunge and hold the release pose -
   the freeze above is only for idle-sheet monsters whose cycle would look
   wrong mid-attack. */
.combatant.player.attacking .sprite-flip.battle-anim.battle-anim-attack img,
.combatant.enemy.attacking .sprite-flip.battle-anim.battle-anim-attack img,
.combatant.raid-buddy.attacking .sprite-flip.battle-anim.battle-anim-attack img,
.combatant.duo-enemy.attacking .sprite-flip.battle-anim.battle-anim-attack img {
  animation: battle-sheet-attack-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) 1 forwards;
}

.combatant.black-holo-combatant.player.attacking img.black-holo-sprite,
.combatant.black-holo-combatant.enemy.attacking img.black-holo-sprite,
.combatant.black-holo-combatant.raid-buddy.attacking img.black-holo-sprite {
  animation:
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.player.attacking .sprite-flip:not(.battle-anim),
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking .sprite-flip:not(.battle-anim) {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking .sprite-flip:not(.battle-anim) {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.enemy.attacking .sprite-flip:not(.battle-anim) {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

/* Holo/Black-Holo attacks move the composed monster visual, not just its
   painting. The silhouette rim and sheen live on .sprite-flip; the ambient
   motes, event-horizon vignette and corona live at combatant level, so those
   outer layers receive the exact same lunge while the HP card stays still. */
.combatant.holo-combatant.player.attacking .sprite-flip:not(.battle-anim),
.combatant.holo-combatant.raid-buddy.duo-player.attacking .sprite-flip:not(.battle-anim) {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-frame-aura 2.2s ease-in-out infinite;
}

.combatant.holo-combatant.raid-buddy:not(.duo-player).attacking .sprite-flip:not(.battle-anim) {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-frame-aura 2.2s ease-in-out infinite;
}

.combatant.holo-combatant.enemy.attacking .sprite-flip:not(.battle-anim) {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-frame-aura 2.2s ease-in-out infinite;
}

.combatant.holo-combatant.player.attacking::after,
.combatant.holo-combatant.raid-buddy.duo-player.attacking::after {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.holo-combatant.raid-buddy:not(.duo-player).attacking::after {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.holo-combatant.enemy.attacking::after {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.black-holo-combatant.player.attacking::before,
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking::before {
  animation: effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking::before {
  animation: black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.enemy.attacking::before {
  animation: black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.player.attacking .black-holo-aura,
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking .black-holo-aura {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking .black-holo-aura {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.enemy.attacking .black-holo-aura {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.player.attacking .sprite-flip.battle-anim,
.combatant.enemy.attacking .sprite-flip.battle-anim,
.combatant.raid-buddy.attacking .sprite-flip.battle-anim,
.combatant.duo-enemy.attacking .sprite-flip.battle-anim {
  animation: battle-anim-attack-wobble 560ms cubic-bezier(0.28, 1.25, 0.42, 1);
}

/* Glovemaw follows the jab/cross frames with a full-body boxer's weight
   transfer instead of ending the generic 560ms wobble before either punch. */
.combatant.player.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.enemy.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.raid-buddy.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.duo-enemy.attacking .sprite-flip.battle-anim.battle-anim-boxer {
  animation: battle-anim-boxer-combo var(--battle-anim-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1;
}

/* Noxavyr's generated attack sheet has a long grounded cast: brace, rear the
   dinosaur maw and smoke wings, drive the signature forward, then recoil. */
.combatant.player.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.enemy.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.raid-buddy.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.duo-enemy.attacking .sprite-flip.battle-anim.battle-anim-legendary {
  animation: battle-anim-noxavyr-cast var(--battle-anim-duration, 2050ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1;
}

/* Attack-sheet monsters use wrapper choreography instead of the directional
   lunge. Mirror that choreography onto the combatant-level Holo layers too. */
.combatant.holo-combatant.attacking:has(.sprite-flip.battle-anim)::after {
  animation:
    battle-anim-attack-wobble 560ms cubic-bezier(0.28, 1.25, 0.42, 1),
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.black-holo-combatant.player.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary))::before,
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary))::before {
  animation: effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary))::before {
  animation: black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.enemy.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary))::before {
  animation: black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1);
}

.combatant.black-holo-combatant.player.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary)) .black-holo-aura,
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary)) .black-holo-aura {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary)) .black-holo-aura {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.enemy.attacking:has(.sprite-flip.battle-anim:not(.battle-anim-boxer):not(.battle-anim-legendary)) .black-holo-aura {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.holo-combatant.attacking:has(.sprite-flip.battle-anim-boxer)::after {
  animation:
    battle-anim-boxer-combo var(--battle-anim-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.black-holo-combatant:is(.player, .enemy, .raid-buddy).attacking:has(.sprite-flip.battle-anim-boxer)::before {
  animation: battle-anim-boxer-combo var(--battle-anim-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1;
}

.combatant.black-holo-combatant:is(.player, .enemy, .raid-buddy).attacking:has(.sprite-flip.battle-anim-boxer) .black-holo-aura {
  animation:
    battle-anim-boxer-combo var(--battle-anim-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    black-holo-corona 7.2s ease-in-out infinite;
}

.combatant.holo-combatant.attacking:has(.sprite-flip.battle-anim-legendary)::after {
  animation:
    battle-anim-noxavyr-cast var(--battle-anim-duration, 2050ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    shiny-motes 1.7s ease-in-out infinite;
}

.combatant.black-holo-combatant:is(.player, .enemy, .raid-buddy).attacking:has(.sprite-flip.battle-anim-legendary)::before {
  animation: battle-anim-noxavyr-cast var(--battle-anim-duration, 2050ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1;
}

.combatant.black-holo-combatant:is(.player, .enemy, .raid-buddy).attacking:has(.sprite-flip.battle-anim-legendary) .black-holo-aura {
  animation:
    battle-anim-noxavyr-cast var(--battle-anim-duration, 2050ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    black-holo-corona 7.2s ease-in-out infinite;
}

@keyframes battle-anim-boxer-combo {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  20% { translate: 4px 3px; rotate: 1.5deg; scale: 0.98; }
  43% { translate: -7px -3px; rotate: -2deg; scale: 1.03; }
  54% { translate: 2px 1px; rotate: 1deg; scale: 1; }
  72% { translate: -12px -5px; rotate: -4deg; scale: 1.07; }
  86% { translate: -4px -1px; rotate: -1deg; scale: 1.02; }
}

@keyframes battle-anim-noxavyr-cast {
  0%, 100% { translate: 0 0; rotate: 0deg; scale: 1; }
  18% { translate: 3px 5px; rotate: 1deg; scale: 0.98 0.96; }
  38% { translate: -5px -8px; rotate: -2deg; scale: 1.025; }
  58% { translate: -12px -4px; rotate: -3deg; scale: 1.06 1.02; }
  76% { translate: -18px 1px; rotate: -4deg; scale: 1.085 1.015; }
  90% { translate: -5px -1px; rotate: -1deg; scale: 1.02; }
}

/* Wrapper-level movement uses screen coordinates, unlike the original inner
   image lunge whose X axis was mirrored by the player's facing wrapper. */
@keyframes effect-player-lunge {
  0% { translate: 0 0; scale: 1; }
  18% { translate: -12px 9px; scale: 0.95; }
  42% { translate: 38px -28px; scale: 1.1; }
  62% { translate: 22px -16px; scale: 1.04; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes black-holo-player-lunge {
  0% { translate: 0 0; scale: 1; }
  18% { translate: 12px 9px; scale: 0.95; }
  42% { translate: -38px -28px; scale: 1.1; }
  62% { translate: -22px -16px; scale: 1.04; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes black-holo-enemy-lunge {
  0% { translate: 0 0; scale: 1; }
  18% { translate: 12px -9px; scale: 0.95; }
  42% { translate: -34px 26px; scale: 1.1; }
  62% { translate: -20px 15px; scale: 1.04; }
  100% { translate: 0 0; scale: 1; }
}

@keyframes battle-anim-attack-wobble {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  18% { translate: 0 -7px; rotate: -2deg; }
  34% { translate: 0 3px; rotate: 2deg; }
  52% { translate: 0 -4px; rotate: -1deg; }
  70% { translate: 0 1px; rotate: 1deg; }
}

/* a glow gathers during the wind-up */
.combatant.winding img { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.55)); }
.combatant.channeling img,
.combatant.buffed img { animation: channel-pulse 620ms ease-in-out; }

@keyframes channel-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: drop-shadow(0 0 18px rgba(180, 245, 200, 0.95)) brightness(1.18); transform: scale(1.05); }
}

.combatant.hit img {
  animation: hit-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
  filter: brightness(1.7) saturate(1.35) contrast(1.1);
}

.combatant.fainting img { animation: faint-drop 720ms ease-in forwards; }

/* Filter lists kept compatible (grayscale -> brightness, same order at
   every stop) so they interpolate smoothly as the monster drops away. */
@keyframes faint-drop {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: grayscale(0) brightness(1); }
  35% { transform: translateY(6px) scale(1.02); filter: grayscale(0.4) brightness(1.1); }
  100% { opacity: 0; transform: translateY(46px) scale(0.55) rotate(-8deg); filter: grayscale(1) brightness(0.6); }
}

.combatant.enemy .combat-card { order: 0; }
.combatant.player .combat-card { order: 1; }

.combat-card {
  position: relative;
  overflow: hidden;
  /* Frosted dark glass: the battle scene blurs softly through it. */
  background:
    linear-gradient(180deg, rgba(24, 30, 48, 0.46), rgba(10, 14, 24, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.34);
  border-radius: 14px;
  padding: 12px 14px;
  min-width: 0;
  color: var(--ink);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(15px) saturate(1.35);
  backdrop-filter: blur(15px) saturate(1.35);
}

/* Clean diagonal specular glare + a soft top bloom — the polished-glass look */
.combat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 15%, transparent 42%),
    radial-gradient(120% 58% at 50% -12%, rgba(255, 255, 255, 0.09), transparent 60%);
}

.battle-stage,
.battle-stage * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.combat-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.combat-name strong {
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.lv-pill {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #ffe7a8;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 224, 150, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bar-row + small { margin-top: 3px; }

.bar-tag {
  flex: 0 0 auto;
  width: 30px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #9fb0c4;
  text-align: right;
}

.bar-tag.exp { color: #7fc7ec; }

.combat-card small {
  color: var(--ink-soft);
  display: block;
  margin: 4px 0 8px 38px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.combat-card small:last-child { margin-bottom: 0; }
.combat-card .exp-text { color: #7fc7ec; }

.combat-card .battle-boss-status {
  margin: -2px 0 8px;
  padding: 4px 7px;
  border: 1px solid rgba(152, 112, 255, 0.34);
  border-radius: 7px;
  color: #e7dcff;
  background: linear-gradient(90deg, rgba(80, 38, 130, 0.36), rgba(18, 25, 52, 0.42));
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.025em;
  text-transform: none;
}

.hp-bar {
  flex: 1 1 auto;
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.42);
}

.hp-bar span {
  width: 100%;
  position: relative;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(95, 227, 154, 0.4);
}

/* a single clean gloss highlight (no busy ticks) */
.hp-bar span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 52%);
}

.exp-bar {
  flex: 1 1 auto;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.exp-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #9fefff, #2f8fd8);
  box-shadow: 0 0 8px rgba(127, 199, 236, 0.6);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.evo-line {
  margin: 4px 0 0 !important;
  color: var(--teal) !important;
  font-weight: 700;
}

.battle-console {
  position: absolute;
  left: calc(var(--battle-stage-left) + var(--battle-console-left));
  top: var(--battle-console-top);
  z-index: 8;
  width: var(--battle-console-width);
  height: var(--battle-console-base-height);
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px;
  gap: 8px;
  align-items: stretch;
  transform: scale(var(--battle-scale-x), var(--battle-scale-y));
  transform-origin: left top;
  background: linear-gradient(180deg, rgba(24, 30, 48, 0.46), rgba(10, 14, 24, 0.62));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(15px) saturate(1.35);
  backdrop-filter: blur(15px) saturate(1.35);
}

#battleLog {
  margin: 0;
  min-height: 54px;
  display: flex;
  align-items: center;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 600;
  padding-right: 6px;
  border-right: 1px solid var(--panel-line);
}

.move-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.move-buttons button { min-height: 44px; }

.move-button {
  position: relative;
  display: grid;
  gap: 1px;
  align-content: center;
  text-align: left;
  border-left: 4px solid #7a8696;
  padding: 5px 7px 5px 24px;
}

.move-button::before,
.battle-actions button::before {
  content: attr(data-hotkey);
  position: absolute;
  left: 6px;
  top: 6px;
  width: 13px;
  height: 13px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: rgba(246, 251, 255, 0.78);
  background: rgba(5, 8, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1;
}

.move-button span {
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1.18;
  font-weight: 800;
  font-size: 0.74rem;
}

.move-button small {
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.move-flame { border-left-color: #ff7b3d; }
.move-leaf { border-left-color: #5fc06a; }
.move-water { border-left-color: #4fb0e0; }
.move-volt { border-left-color: #f0cd3a; }
.move-stone { border-left-color: #b09775; }
.move-light { border-left-color: #f0d45c; }
.move-shadow { border-left-color: #8a7ad0; }
.move-frost { border-left-color: #74cdee; }
.move-bug { border-left-color: #a7b53e; }
.move-dragon { border-left-color: #8f8ee8; }
.move-astral { border-left-color: #b9a6ff; }
.move-abyssal { border-left-color: #4b3cff; }
.move-runic { border-left-color: #ffd27a; }
.move-holy { border-left-color: #fff3b8; }
.move-eternal { border-left-color: #ffffff; }
/* Dinosaurus — primal apex class (amber/bone). Safari Bait/Mud buttons reuse
   the existing .move-leaf / .move-stone tints, so no extra rules needed. */
.move-dinosaurus { border-left-color: #c89b3c; }
.move-button.move-status {
  border-left-color: #9fb0c4;
  border-left-style: dashed;
}
.move-button.move-status small { color: #9fb0c4; }

/* ---- Type-effectiveness cue: the player's moves light up vs the foe ---- */
.move-button.move-good,
.move-button.move-great {
  position: relative;
  border-left-width: 6px;
  transition: box-shadow 0.18s ease, transform 0.14s ease;
}
/* Effectiveness is colour-only now (seal removed) — no name padding. */
.move-button.move-good > span,
.move-button.move-great > span { padding-right: 0; }

.move-button.move-good {
  border-left-color: #ffce4d !important;
  box-shadow: 0 0 0 1px rgba(255,196,64,0.55),
              0 0 14px 2px rgba(255,190,60,0.55),
              inset 0 0 16px rgba(255,196,64,0.22);
  animation: moveGlowGold 1.5s ease-in-out infinite;
}
.move-button.move-great {
  border-left-color: #ff5236 !important;
  box-shadow: 0 0 0 1px rgba(255,86,54,0.6),
              0 0 18px 3px rgba(255,68,42,0.62),
              inset 0 0 18px rgba(255,72,46,0.26);
  animation: moveGlowRed 1.15s ease-in-out infinite;
}
.move-button.move-good:hover,
.move-button.move-great:hover { transform: translateY(-1px); }

.move-button.tutorial-target,
.battle-actions button.tutorial-target {
  position: relative;
  outline: 3px solid rgba(255, 255, 255, 0.86);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(255, 238, 150, 0.85),
              0 0 24px rgba(255, 220, 94, 0.82),
              inset 0 0 18px rgba(255, 238, 150, 0.24);
  animation: tutorialTargetPulse 0.9s ease-in-out infinite;
}

.move-button.tutorial-muted,
.battle-actions button.tutorial-muted {
  opacity: 0.48;
  filter: saturate(0.55) brightness(0.82);
}

@keyframes tutorialTargetPulse {
  0%, 100% { outline-offset: 3px; }
  50% { outline-offset: 6px; }
}

@keyframes moveGlowGold {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,196,64,0.42),
                          0 0 10px 1px rgba(255,190,60,0.40),
                          inset 0 0 12px rgba(255,196,64,0.16); }
  50%      { box-shadow: 0 0 0 1px rgba(255,212,96,0.72),
                          0 0 22px 4px rgba(255,200,72,0.74),
                          inset 0 0 18px rgba(255,208,84,0.30); }
}
@keyframes moveGlowRed {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,86,54,0.50),
                          0 0 12px 2px rgba(255,68,42,0.50),
                          inset 0 0 14px rgba(255,72,46,0.20); }
  50%      { box-shadow: 0 0 0 1px rgba(255,116,76,0.90),
                          0 0 28px 6px rgba(255,82,52,0.88),
                          inset 0 0 22px rgba(255,100,64,0.38); }
}

.move-eff {
  position: absolute;
  top: 5px;
  right: 6px;
  font-style: normal;
  font-weight: 900;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}
.move-eff-good {
  color: #3a2600;
  background: linear-gradient(180deg, #ffe071, #ffb52e);
  box-shadow: 0 0 8px rgba(255,193,60,0.85);
  text-shadow: 0 1px 0 rgba(255,255,255,0.30);
}
.move-eff-great {
  color: #fff3ec;
  background: linear-gradient(180deg, #ff8a5c, #ff3b25);
  box-shadow: 0 0 10px rgba(255,70,42,0.95);
  text-shadow: 0 1px 2px rgba(120,16,0,0.70);
}

@media (prefers-reduced-motion: reduce) {
  .move-button.move-good,
  .move-button.move-great { animation: none; }
}

.battle-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.battle-actions button {
  position: relative;
  min-height: 44px;
  padding: 5px 6px 5px 23px;
  display: grid;
  align-content: center;
  gap: 1px;
  border-radius: 8px;
  font-size: 0.68rem;
  line-height: 1.05;
}

.battle-actions button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}

.battle-actions button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(205, 216, 231, 0.78);
  font-size: 0.54rem;
  font-weight: 800;
}

/* ============================================================================
 * Battle effect particles + keyframes — preserved verbatim
 * ========================================================================== */
.fx-projectile,
.fx-dust-ball,
.fx-fireball,
.fx-bubble-shot,
.fx-shadow-orb,
.fx-star-shot,
.fx-starter-sig-shot,
/* :not(.fx-layer) - the layer carries fx-<pattern> classes (e.g. "fx-layer
   fx-comet" for the comet pattern), which must never pick up the projectile
   element styling or the whole layer collapses to a 30px flying box. */
.fx-comet:not(.fx-layer) {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px currentColor);
  animation: projectile-move 680ms cubic-bezier(0.22, 0.7, 0.25, 1) forwards;
}

/* glowing comet/projectile trail */
.fx-projectile::before,
.fx-fireball::before,
.fx-shadow-orb::before,
.fx-star-shot::before,
.fx-starter-sig-shot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.55;
}

.fx-starter-sig-shot {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 11px currentColor) drop-shadow(0 0 22px var(--sig-core, currentColor));
  animation: projectile-move 720ms cubic-bezier(0.18, 0.82, 0.2, 1) forwards;
}
.fx-starter-sig-shot::after {
  content: "";
  position: absolute;
  inset: -12px 8px -12px -44px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor 72%, transparent);
  opacity: 0.45;
  filter: blur(7px);
  transform: rotate(-5deg);
}

.fx-prism-nova-orb {
  z-index: 12;
  width: 36px;
  height: 36px;
  background: transparent !important;
  border-color: transparent !important;
  color: #fff7a8;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 8px currentColor)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.74))
    drop-shadow(0 0 28px rgba(182, 156, 255, 0.5));
  animation: prism-nova-orb-flight var(--pno-ms, 620ms) cubic-bezier(0.16, 0.76, 0.2, 1) forwards;
}

.fx-prism-nova-orb svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fx-prism-nova-orb .pno-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: prism-nova-ring-spin 620ms linear infinite;
}

.fx-prism-nova-orb .pno-ring-inner {
  opacity: 0.8;
  animation-direction: reverse;
  animation-duration: 520ms;
}

.fx-prism-nova-orb .pno-core {
  animation: prism-nova-core-pulse 420ms ease-in-out infinite alternate;
  filter: drop-shadow(0 0 7px #ffffff) drop-shadow(0 0 13px currentColor);
}

.fx-capture-ball {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: projectile-move 680ms cubic-bezier(0.25, 0.8, 0.2, 1) forwards;
}

/* Launch (muzzle) bloom + impact flare */
.fx-muzzle,
.fx-impact {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 45%, transparent 72%) !important;
  mix-blend-mode: screen;
}

.fx-muzzle { animation: flash-pop 320ms ease-out forwards; }
.fx-impact { width: 46px; height: 46px; animation: impact-flare 460ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }

.fx-aurora-hit-circle {
  z-index: 7;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: transparent !important;
  border: 3px solid currentColor;
  box-shadow:
    0 0 22px currentColor,
    0 0 46px rgba(152, 242, 210, 0.68),
    inset 0 0 18px currentColor;
  mix-blend-mode: screen;
  animation: aurora-hit-circle 680ms cubic-bezier(0.14, 0.72, 0.2, 1) forwards;
}

/* Ultimate finisher: a screen-spanning shockwave ring for every monster's
   last/strongest move. */
.fx-bigwave {
  width: 40px; height: 40px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: transparent;
  border: 6px solid currentColor;
  box-shadow: 0 0 34px currentColor, inset 0 0 34px currentColor;
  opacity: 0; mix-blend-mode: screen; pointer-events: none; z-index: 6;
  animation: bigwave 640ms cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}
.fx-bigwave.fx-bigwave-2 { border-width: 4px; animation-duration: 760ms; }
.fx-devour-wave {
  z-index: 18;
  border-width: 5px;
  filter: drop-shadow(0 0 18px currentColor);
  animation-duration: 620ms;
}
.fx-devour-wave-2 { border-width: 4px; animation-delay: 90ms !important; }
.fx-devour-wave-3 { border-width: 5px; animation-delay: 140ms !important; }
.fx-devour-wave-4 { border-width: 4px; animation-delay: 210ms !important; }
.fx-devour-impact-pulse {
  z-index: 18;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.68) 0 14%, currentColor 15% 24%, transparent 56%),
    radial-gradient(circle, rgba(255, 243, 194, 0.28), transparent 66%) !important;
  mix-blend-mode: screen;
  animation: devour-impact-pulse 520ms cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}
@keyframes bigwave {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0); }
  14%  { opacity: 0.95; }
  60%  { opacity: 0.5;  }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(34); }
}

@keyframes devour-impact-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24); }
  18% { opacity: 0.9; }
  64% { opacity: 0.48; transform: translate(-50%, -50%) scale(4.8); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(7.2); }
}

@keyframes flash-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

@keyframes impact-flare {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  55% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.55); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

/* Camera punch on impact */
.battle-stage.shake { animation: cam-shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.battle-stage.shake-hard { animation: cam-shake-hard 440ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes cam-shake {
  0%, 100% { transform: translate(0, 0) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  20% { transform: translate(-4px, 2px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  45% { transform: translate(3px, -3px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  70% { transform: translate(-2px, 2px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  88% { transform: translate(2px, -1px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
}

@keyframes cam-shake-hard {
  0%, 100% { transform: translate(0, 0) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  12% { transform: translate(-8px, 4px) scale(calc(var(--battle-scale-x) * 1.01), calc(var(--battle-scale-y) * 1.01)); }
  30% { transform: translate(7px, -6px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  48% { transform: translate(-6px, 5px) scale(calc(var(--battle-scale-x) * 1.008), calc(var(--battle-scale-y) * 1.008)); }
  66% { transform: translate(5px, -3px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
  84% { transform: translate(-3px, 2px) scale(var(--battle-scale-x), var(--battle-scale-y)); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-stage.shake,
  .battle-stage.shake-hard { animation: none; }
}

.fx-capture-ball {
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(255, 232, 142, 0.9);
  border-radius: 7px;
  clip-path: polygon(50% 0%, 100% 36%, 82% 100%, 18% 100%, 0% 36%);
  background:
    linear-gradient(135deg, rgba(255, 238, 166, 0.95) 0 18%, transparent 19%),
    linear-gradient(150deg, #78ead7 0%, #245d68 54%, #071b22 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 0 16px rgba(83, 234, 215, 0.86),
    0 0 24px rgba(255, 211, 106, 0.38);
}

.fx-capture-ball::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 7px;
  height: 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.46);
  transform: rotate(28deg);
}

.fx-capture-prism-projectile {
  z-index: 16;
  width: var(--capture-prism-size, 44px);
  height: var(--capture-prism-size, 44px);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  filter: var(--capture-art-filter, drop-shadow(0 0 16px rgba(120, 234, 215, 0.86)) drop-shadow(0 0 24px rgba(255, 211, 106, 0.42)));
  mix-blend-mode: normal;
  /* The prism sheet's painted halo fills its square cell - fade it out
     radially so the drop-shadow glow can't light up the cell's edges. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 92%);
  animation:
    projectile-move 780ms cubic-bezier(0.22, 0.7, 0.25, 1) forwards,
    capture-prism-projectile-play 780ms steps(5, end) forwards;
}

.fx-capture-prism-projectile::before {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 68%);
  opacity: 0.42;
  filter: blur(8px);
}

@keyframes capture-prism-projectile-play {
  from { background-position: 0 0; }
  to { background-position: var(--capture-prism-travel, -220px) 0; }
}

/* ---- Capture sequence (longer, suspenseful, clear result) ---- */
.fx-catch-ball {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  clip-path: polygon(50% 0%, 100% 36%, 82% 100%, 18% 100%, 0% 36%);
  border: 1.5px solid rgba(255, 232, 142, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 238, 166, 0.95) 0 18%, transparent 19%),
    linear-gradient(150deg, #78ead7 0%, #245d68 54%, #071b22 100%) !important;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(83, 234, 215, 0.76),
    0 0 26px rgba(255, 211, 106, 0.36);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform 0.18s ease;
  animation: catch-bob 0.72s ease-in-out infinite;
}

.fx-catch-ball::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 6px;
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  transform: rotate(28deg);
}

.fx-catch-ball-art {
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-image: var(--catch-prism-art) !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  box-shadow: none;
  filter: var(--capture-art-filter, drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 18px rgba(120, 234, 215, 0.78)) drop-shadow(0 0 28px rgba(255, 211, 106, 0.34)));
  /* Same cell-wash fade as the projectile: the settled-charm frame paints a
     halo to its square edge, which showed as a bright square on the grass. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 50%, #000 52%, transparent 92%);
  z-index: 16;
}

.fx-catch-ball-art::after {
  display: none;
}

.fx-capture::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 78% 42%, rgba(120, 234, 215, 0.18), transparent 30%),
    radial-gradient(circle at 24% 64%, rgba(255, 255, 255, 0.12), transparent 34%);
  animation: capture-stage-glow 900ms ease-out forwards;
}

.fx-capture-tier-azure::before {
  background:
    radial-gradient(circle at 78% 42%, rgba(155, 243, 255, 0.2), transparent 31%),
    radial-gradient(circle at 24% 64%, rgba(205, 233, 255, 0.13), transparent 34%);
}

.fx-capture-tier-hyper::before {
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 229, 138, 0.2), transparent 31%),
    radial-gradient(circle at 24% 64%, rgba(216, 106, 42, 0.13), transparent 34%);
}

.fx-capture-tier-giga::before,
.fx-capture-tier-master::before {
  background:
    radial-gradient(circle at 78% 42%, rgba(131, 245, 255, 0.2), transparent 31%),
    radial-gradient(circle at 24% 64%, rgba(159, 108, 255, 0.15), transparent 36%);
}

.fx-capture-gate,
.fx-capture-core,
.fx-capture-shard,
.fx-capture-tether,
.fx-capture-pulse,
.fx-capture-vortex {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  z-index: 5;
}

.fx-capture-gate {
  width: var(--gate-size, 96px);
  height: var(--gate-size, 96px);
  border: 2px solid var(--c1, currentColor);
  border-radius: 50%;
  background:
    conic-gradient(from 20deg,
      transparent 0 9%,
      var(--c1, currentColor) 10% 12%,
      transparent 13% 24%,
      var(--c2, currentColor) 25% 28%,
      transparent 29% 42%,
      var(--c3, currentColor) 43% 46%,
      transparent 47% 100%);
  box-shadow:
    0 0 var(--gate-glow, 24px) var(--c1, currentColor),
    inset 0 0 22px rgba(255, 255, 255, 0.16);
  animation: capture-gate 900ms cubic-bezier(0.15, 0.8, 0.2, 1) forwards;
}

.fx-capture-gate::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 18%;
  box-shadow: 0 0 18px var(--c2, currentColor);
  transform: rotate(45deg);
}

.fx-capture-gate::after {
  content: "";
  position: absolute;
  inset: 28%;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: radial-gradient(circle at 35% 25%, #fff 0 8%, var(--c1, currentColor) 28%, var(--c2, currentColor) 78%);
  filter: drop-shadow(0 0 14px var(--c1, currentColor));
  opacity: 0.9;
}

.fx-capture-core {
  width: var(--core-size, 24px);
  height: var(--core-size, 24px);
  border-radius: 50%;
  background: #fff !important;
  box-shadow:
    0 0 18px #fff,
    0 0 34px var(--c1, currentColor),
    0 0 52px var(--c2, currentColor);
  animation: capture-core 680ms ease-out forwards;
}

.fx-capture-vortex {
  width: var(--vortex-size, 130px);
  height: var(--vortex-size, 130px);
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, var(--c1, currentColor), transparent, var(--c2, currentColor), transparent, var(--c3, currentColor), transparent) !important;
  filter: blur(0.4px) drop-shadow(0 0 18px var(--c1, currentColor));
  opacity: 0;
  animation: capture-vortex 1120ms cubic-bezier(0.16, 0.78, 0.24, 1) forwards;
}

.fx-capture-tether {
  width: 4px;
  height: var(--len, 42px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, #fff 20%, var(--c1, currentColor) 52%, transparent) !important;
  box-shadow: 0 0 14px var(--c1, currentColor);
  opacity: 0;
  animation: capture-tether 760ms cubic-bezier(0.18, 0.74, 0.2, 1) forwards;
}

.fx-capture-shard {
  width: 10px;
  height: 22px;
  clip-path: polygon(50% 0%, 100% 35%, 70% 100%, 30% 100%, 0% 35%);
  background: linear-gradient(180deg, #fff, var(--c1, currentColor) 40%, var(--c2, currentColor)) !important;
  box-shadow: 0 0 14px var(--c1, currentColor);
  opacity: 0;
  animation: capture-shard 820ms ease-out forwards;
}

.fx-capture-pulse {
  width: var(--pulse-size, 90px);
  height: var(--pulse-size, 90px);
  border: 2px solid var(--c1, currentColor);
  border-radius: 50%;
  box-shadow:
    0 0 22px var(--c1, currentColor),
    inset 0 0 24px var(--c2, currentColor);
  opacity: 0;
  animation: capture-pulse 620ms ease-out forwards;
}

.fx-capture-tier-giga .fx-capture-gate,
.fx-capture-tier-master .fx-capture-gate {
  border-width: 3px;
}

.fx-capture-tier-master .fx-capture-pulse {
  border-color: #fff4b8;
  box-shadow:
    0 0 28px #fff4b8,
    0 0 44px var(--c2, currentColor),
    inset 0 0 26px var(--c1, currentColor);
}

@keyframes capture-stage-glow {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes capture-gate {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.28) rotate(-60deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24) rotate(145deg); }
}

@keyframes capture-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
}

@keyframes capture-vortex {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(0deg); }
  20% { opacity: 0.9; }
  72% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.92) rotate(430deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.18) rotate(620deg); }
}

@keyframes capture-tether {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scaleY(0.4);
  }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot)) scaleY(0.08);
  }
}

@keyframes capture-shard {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.2); }
  22% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1.15);
  }
}

@keyframes capture-pulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  25% { opacity: 0.92; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.26); }
}

@keyframes catch-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}

/* the charm drops onto the field and bounces once before the wobbles */
.fx-catch-ball.drop-in { animation: catch-drop 430ms cubic-bezier(0.24, 0.86, 0.3, 1.12) both; }

@keyframes catch-drop {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 54px)) scale(0.72); filter: brightness(1.8); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.05, 0.92); filter: brightness(1.2); }
  70% { transform: translate(-50%, calc(-50% - 9px)) scale(0.99); }
  88% { transform: translate(-50%, -50%) scale(1.03, 0.95); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

/* under-glow that breathes with each wobble (the charm straining) */
.fx-catch-ball::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 184, 0.6), rgba(120, 234, 215, 0.24) 46%, transparent 66%);
  opacity: 0;
  pointer-events: none;
}

.fx-catch-ball.wob-l::before,
.fx-catch-ball.wob-r::before { animation: catch-wob-glow 700ms ease-out; }

@keyframes catch-wob-glow {
  0% { opacity: 0; }
  24% { opacity: 1; }
  100% { opacity: 0; }
}

/* keyframed rocking with a fading counter-swing; --wob escalates per shake */
.fx-catch-ball.wob-l { animation: catch-wob-l 700ms cubic-bezier(0.36, 0.04, 0.22, 1) forwards; }
.fx-catch-ball.wob-r { animation: catch-wob-r 700ms cubic-bezier(0.36, 0.04, 0.22, 1) forwards; }
.fx-catch-ball.settled { transform: translate(-50%, -50%) rotate(0deg); animation: none; }

@keyframes catch-wob-l {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  26% { transform: translate(calc(-50% - 3px), calc(-50% - 3px)) rotate(calc(-24deg * var(--wob, 1))) scale(1.03, 0.96); }
  52% { transform: translate(calc(-50% + 2px), -50%) rotate(calc(15deg * var(--wob, 1))); }
  76% { transform: translate(-50%, calc(-50% - 1px)) rotate(calc(-6deg * var(--wob, 1))); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

@keyframes catch-wob-r {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  26% { transform: translate(calc(-50% + 3px), calc(-50% - 3px)) rotate(calc(24deg * var(--wob, 1))) scale(1.03, 0.96); }
  52% { transform: translate(calc(-50% - 2px), -50%) rotate(calc(-15deg * var(--wob, 1))); }
  76% { transform: translate(-50%, calc(-50% - 1px)) rotate(calc(6deg * var(--wob, 1))); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}

.fx-catch-ball.locked {
  animation: catch-lock 640ms cubic-bezier(0.2, 1.1, 0.3, 1) forwards;
  box-shadow: 0 0 22px #ffe79a, 0 0 36px rgba(95, 224, 139, 0.7);
}

@keyframes catch-lock {
  0% { transform: translate(-50%, -50%) scale(1); }
  28% { transform: translate(-50%, calc(-50% - 13px)) scale(1.22); filter: brightness(1.95); }
  58% { transform: translate(-50%, -50%) scale(0.97, 0.92); filter: brightness(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1.08); }
}

/* Full-stage capture overlays: must out-specify the generic
   `.fx-layer span { transform: translate(-50%, -50%) }` rule, or the
   inset:0 box gets shifted half a stage up-left. */
.fx-layer span.fx-capture-dim,
.fx-layer span.fx-capture-flash { transform: none; }

/* stage spotlight while the seal wobbles - dark falls everywhere but the charm */
.fx-capture-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    transparent 46px,
    rgba(3, 6, 11, 0.26) 132px,
    rgba(3, 6, 11, 0.74) 58%);
  opacity: 0;
  animation: capture-dim-in 720ms ease-out 140ms forwards;
}

.fx-capture-dim.release { animation: capture-dim-out 600ms ease-out forwards; }

@keyframes capture-dim-in { to { opacity: 1; } }

@keyframes capture-dim-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* verdict light pop - warm for a lock, red-tinged for a shattered seal */
.fx-capture-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 18;
  mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    rgba(255, 255, 255, 0.96),
    rgba(255, 247, 190, 0.5) 24%,
    transparent 58%);
  opacity: 0;
  animation: capture-flash 560ms ease-out forwards;
}

.fx-capture-flash.break {
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    rgba(255, 236, 222, 0.92),
    rgba(255, 122, 96, 0.42) 26%,
    transparent 56%);
  animation-duration: 440ms;
}

@keyframes capture-flash {
  0% { opacity: 0; }
  14% { opacity: 1; }
  100% { opacity: 0; }
}

/* celebration stars raining around the sealed charm */
.fx-capture-starfall {
  position: absolute;
  width: var(--star-size, 9px);
  height: var(--star-size, 9px);
  clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);
  background: linear-gradient(180deg, #fff, var(--c1, #ffe79a)) !important;
  box-shadow: 0 0 12px var(--c1, #ffe79a);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 17;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: capture-starfall 1150ms cubic-bezier(0.3, 0.1, 0.42, 1) forwards;
}

@keyframes capture-starfall {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% - var(--fall, 80px))) rotate(0deg) scale(0.5); }
  14% { opacity: 1; }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px) + var(--sway, 0px)), calc(-50% + var(--fall, 80px) * 0.45)) rotate(var(--spin, 160deg)) scale(1.05); }
}

.fx-catch-ball.crack {
  animation: catch-crack 320ms ease-in forwards;
}

.fx-bastimaw-capture .fx-capture-ball {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 18px rgba(125, 240, 255, 0.85), 0 0 30px rgba(211, 189, 139, 0.52);
}

.fx-bastimaw-capture .fx-catch-ball {
  width: 34px;
  height: 34px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.56),
    0 0 18px rgba(125, 240, 255, 0.72),
    0 0 30px rgba(211, 189, 139, 0.42);
}

@keyframes catch-crack {
  0% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.15) rotate(-12deg); }
  100% { transform: translate(-50%, -50%) scale(1.7) rotate(18deg); opacity: 0; filter: brightness(2); }
}

/* ---- Failed-catch break-out: strain -> shatter -> re-emerge -------------- */
/* Phase 1: the shell fights the seal. Escalating micro-vibration + hot glow. */
.fx-catch-ball.strain {
  animation: catch-strain 660ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(255, 116, 84, 0.9),
    0 0 30px rgba(255, 70, 40, 0.5);
  --capture-art-filter:
    drop-shadow(0 6px 9px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 12px rgba(255, 116, 84, 0.95))
    drop-shadow(0 0 26px rgba(255, 70, 40, 0.6));
}

@keyframes catch-strain {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  9% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) rotate(-3deg); }
  18% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) rotate(3deg); }
  28% { transform: translate(calc(-50% - 3px), calc(-50% + 2px)) rotate(-4deg); }
  38% { transform: translate(calc(-50% + 3px), calc(-50% - 3px)) rotate(4deg); }
  48% { transform: translate(calc(-50% - 4px), calc(-50% + 3px)) rotate(-6deg); }
  58% { transform: translate(calc(-50% + 4px), calc(-50% - 3px)) rotate(6deg); }
  68% { transform: translate(calc(-50% - 5px), calc(-50% + 4px)) rotate(-7deg) scale(1.02); }
  78% { transform: translate(calc(-50% + 5px), calc(-50% - 4px)) rotate(7deg) scale(1.04); }
  88% { transform: translate(calc(-50% - 5px), calc(-50% + 4px)) rotate(-9deg) scale(1.05); }
  100% { transform: translate(calc(-50% + 5px), calc(-50% - 3px)) rotate(9deg) scale(1.08); }
}

/* pulsing red-hot halo behind the straining shell */
.fx-break-heat {
  position: absolute;
  z-index: 14;
  pointer-events: none;
  mix-blend-mode: screen;
  width: var(--heat-size, 90px);
  height: var(--heat-size, 90px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 70, 0.55), rgba(255, 70, 40, 0.25) 45%, transparent 70%);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  animation: catch-break-heat 660ms ease-in forwards;
}

@keyframes catch-break-heat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30% { opacity: 0.7; }
  55% { opacity: 0.5; }
  75% { opacity: 0.95; }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* glowing crack veins popping across the shell in three staggered stages */
.fx-break-crack {
  position: absolute;
  z-index: 17;
  pointer-events: none;
  mix-blend-mode: screen;
  width: var(--crack-size, 44px);
  height: var(--crack-size, 44px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 24l7-10 1.6-5.4M31 14l4.8-2M24 24l-10-4-5.4 1.6M14 20l-2.4-4.6M24 24l4 11-1.4 5.6M28 35l4.8 2.4'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px var(--c1, #ffd6a0)) drop-shadow(0 0 11px rgba(255, 116, 76, 0.85));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--crack-rot, 0deg)) scale(0.5);
  animation: catch-crack-pop 190ms cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}

@keyframes catch-crack-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--crack-rot, 0deg)) scale(0.5); }
  45% { opacity: 1; }
  100% { opacity: 0.95; transform: translate(-50%, -50%) rotate(var(--crack-rot, 0deg)) scale(1); }
}

/* thin light beams escaping through the cracks */
.fx-break-leak {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  mix-blend-mode: screen;
  width: 3px;
  height: var(--leak-len, 26px);
  border-radius: 999px;
  background: linear-gradient(0deg, rgba(255, 244, 214, 0.98), transparent);
  transform: translate(-50%, -100%) rotate(var(--leak-rot, 0deg));
  transform-origin: 50% 100%;
  opacity: 0;
  animation: catch-break-leak 430ms ease-out forwards;
}

@keyframes catch-break-leak {
  0% { opacity: 0; scale: 1 0.2; }
  30% { opacity: 1; }
  70% { opacity: 0.85; scale: 1 1; }
  100% { opacity: 0; scale: 1 1.15; }
}

/* the spotlight fights too: flickers under strain, then SNAPS off */
.fx-capture-dim.strain-flicker { animation: capture-dim-flicker 620ms steps(1, end) forwards; }

@keyframes capture-dim-flicker {
  0% { opacity: 1; }
  18% { opacity: 0.66; }
  26% { opacity: 1; }
  47% { opacity: 0.58; }
  58% { opacity: 1; }
  82% { opacity: 0.7; }
  100% { opacity: 1; }
}

.fx-capture-dim.snap { animation: capture-dim-snap 300ms linear forwards; }

@keyframes capture-dim-snap {
  0% { opacity: 1; }
  30% { opacity: 0.12; }
  52% { opacity: 0.66; }
  100% { opacity: 0; }
}

/* Phase 2: the shell splits - each half is a clipped clone keeping the
   charm's painted skin, launched apart with spin and gravity. */
.fx-catch-ball-half {
  position: absolute;
  z-index: 17;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.fx-catch-ball-half .fx-catch-ball {
  animation: none;
  transition: none;
}

.fx-half-top {
  clip-path: inset(-70% -40% 46% -40%);
  animation: catch-half-top 780ms cubic-bezier(0.18, 0.72, 0.4, 1) forwards;
}

.fx-half-bottom {
  clip-path: inset(46% -40% -70% -40%);
  animation: catch-half-bottom 740ms cubic-bezier(0.22, 0.7, 0.44, 1) forwards;
}

@keyframes catch-half-top {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); filter: brightness(1.75); }
  22% { filter: brightness(1.08); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% - 36px), calc(-50% - 44px)) rotate(-128deg) scale(0.9); }
}

@keyframes catch-half-bottom {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); filter: brightness(1.75); }
  22% { filter: brightness(1.08); }
  56% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + 32px), calc(-50% + 42px)) rotate(102deg) scale(0.88); }
}

/* white-hot core pop at the instant of failure */
.fx-break-core {
  position: absolute;
  z-index: 18;
  pointer-events: none;
  mix-blend-mode: screen;
  width: var(--core-size, 40px);
  height: var(--core-size, 40px);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 34%, rgba(255, 214, 160, 0.85) 58%, transparent 76%);
  box-shadow: 0 0 30px rgba(255, 226, 190, 0.9);
  transform: translate(-50%, -50%) scale(0.2);
  animation: catch-break-core 300ms cubic-bezier(0.2, 0.9, 0.36, 1) forwards;
}

@keyframes catch-break-core {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.24); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

/* double shockwave - crisp white ring, then a hot red-orange chaser */
.fx-break-ring {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  mix-blend-mode: screen;
  width: var(--ring-size, 130px);
  height: var(--ring-size, 130px);
  border-radius: 50%;
  border: 4px solid var(--c1, #ffffff);
  box-shadow: 0 0 26px var(--c1, #ffffff), inset 0 0 20px var(--c2, #ffd6a0);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.22);
  animation: catch-break-ring 620ms cubic-bezier(0.16, 0.84, 0.38, 1) forwards;
}

@keyframes catch-break-ring {
  0% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.22); border-width: 6px; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); border-width: 1px; }
}

/* glass shards - elongated slivers spinning out with gravity fall */
.fx-break-shard {
  position: absolute;
  z-index: 16;
  pointer-events: none;
  mix-blend-mode: screen;
  width: var(--shard-w, 7px);
  height: var(--shard-h, 18px);
  clip-path: polygon(50% 0%, 92% 78%, 50% 100%, 8% 78%);
  background: linear-gradient(180deg, #ffffff, var(--c1, #78ead7) 46%, var(--c2, #245d68)) !important;
  box-shadow: 0 0 12px var(--c1, #78ead7);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: catch-break-shard 860ms cubic-bezier(0.16, 0.64, 0.4, 1) forwards;
}

@keyframes catch-break-shard {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot0, 0deg)) scale(0.6); }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--bx, 40px)), calc(-50% + var(--by, 0px) + var(--fall, 26px))) rotate(var(--rot1, 240deg)) scale(1); }
}

.fx-catch-result {
  position: absolute;
  left: 50% !important;
  top: 30% !important;
  transform: translate(-50%, -50%) !important;
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.7);
  animation: catch-result 1500ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
  pointer-events: none;
}

.fx-catch-result.ok { color: #ffe27a; -webkit-text-stroke: 1px #4caf6f; }
.fx-catch-result.no { color: #ff7a6b; -webkit-text-stroke: 1px #7a1f17; }

@keyframes catch-result {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  30% { transform: translate(-50%, -50%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* Floating stat-change / heal indicator */
.fx-stat-pop {
  position: absolute;
  z-index: 6;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  animation: stat-pop 1200ms ease-out forwards;
}

.fx-stat-pop.buff { color: #6df0a8; }
.fx-stat-pop.debuff { color: #ff7a6b; }
.fx-stat-pop.damage {
  color: #fff2e9;
  font-size: 1.28rem;
  -webkit-text-stroke: 1px #8f251d;
  text-shadow: 0 2px 4px rgba(74, 7, 4, 0.9), 0 0 12px rgba(255, 77, 58, 0.8);
}
.fx-stat-pop.heal { color: #76ffba; }
.fx-stat-pop.neutral {
  color: #edf2ff;
  font-size: 1.18rem;
  font-style: italic;
  -webkit-text-stroke: 1px #30394e;
}
.fx-stat-pop.ko {
  z-index: 18;
  color: #fff3a4;
  font-size: 1.62rem;
  letter-spacing: 0.12em;
  -webkit-text-stroke: 1px #7c2d18;
  text-shadow: 0 3px 5px rgba(47, 8, 3, 0.9), 0 0 18px rgba(255, 91, 54, 0.9);
}

@keyframes stat-pop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  35% { transform: translate(-50%, -55%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

.combatant.enemy.in-ball img {
  animation: catch-absorb 520ms cubic-bezier(0.18, 0.74, 0.2, 1) forwards;
}

.combatant.enemy.in-ball .sprite-flip {
  animation: catch-absorb-wrapper 520ms cubic-bezier(0.18, 0.74, 0.2, 1) forwards;
  transform-origin: 50% 68%;
  -webkit-mask-image: radial-gradient(circle at 50% 58%, #000 0 56%, rgba(0, 0, 0, 0.72) 70%, transparent 86%);
  mask-image: radial-gradient(circle at 50% 58%, #000 0 56%, rgba(0, 0, 0, 0.72) 70%, transparent 86%);
}

.combatant.enemy.in-ball .sprite-flip img {
  animation: none;
  margin-left: 0;
}

.combatant.enemy.in-ball.shiny-combatant::before,
.combatant.enemy.in-ball.shiny-combatant::after,
.combatant.enemy.bastimaw-in-ball.shiny-combatant::before,
.combatant.enemy.bastimaw-in-ball.shiny-combatant::after,
.combatant.enemy.in-ball.black-holo-combatant::before,
.combatant.enemy.bastimaw-in-ball.black-holo-combatant::before,
.combatant.enemy.in-ball.black-holo-combatant .black-holo-aura,
.combatant.enemy.bastimaw-in-ball.black-holo-combatant .black-holo-aura,
.combatant.enemy.in-ball.black-holo-combatant .sprite-flip::before,
.combatant.enemy.in-ball.black-holo-combatant .sprite-flip::after,
.combatant.enemy.bastimaw-in-ball.black-holo-combatant .sprite-flip::before,
.combatant.enemy.bastimaw-in-ball.black-holo-combatant .sprite-flip::after {
  opacity: 0;
  animation: none;
}

.combatant.enemy.bastimaw-in-ball .sprite-flip {
  animation: bastimaw-catch-absorb 560ms cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
  transform-origin: 50% 68%;
}

.combatant.enemy.bastimaw-in-ball .sprite-flip.battle-anim img {
  animation: none;
  margin-left: 0;
}

@keyframes catch-absorb {
  0% { opacity: 1; transform: scale(1); filter: none; }
  38% { opacity: 0.9; filter: brightness(1.6) saturate(0.45) sepia(0.45) hue-rotate(-20deg); }
  70% { opacity: 0.32; transform: scale(0.38) rotate(8deg); filter: brightness(2.15) sepia(0.9) hue-rotate(-24deg) blur(0.4px); }
  100% { opacity: 0; transform: scale(0.08) rotate(14deg); filter: brightness(2.55) sepia(1) hue-rotate(-25deg) blur(1px); }
}

@keyframes catch-absorb-wrapper {
  0% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: none; }
  38% { opacity: 0.88; translate: 0 -3px; scale: 0.84; filter: brightness(1.62) saturate(0.45) sepia(0.45) hue-rotate(-20deg); }
  70% { opacity: 0.28; translate: 0 -8px; scale: 0.34; rotate: 8deg; filter: brightness(2.15) sepia(0.9) hue-rotate(-24deg) blur(0.4px); }
  100% { opacity: 0; translate: 0 -14px; scale: 0.08; rotate: 14deg; filter: brightness(2.55) sepia(1) hue-rotate(-25deg) blur(1px); }
}

@keyframes bastimaw-catch-absorb {
  0% { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  32% {
    opacity: 1;
    translate: 0 -3px;
    scale: 1.03;
    filter: brightness(1.45) saturate(0.86) drop-shadow(0 0 18px rgba(125, 240, 255, 0.82));
  }
  68% {
    opacity: 0.72;
    translate: 0 -9px;
    scale: 0.76;
    filter: brightness(1.9) saturate(0.74) drop-shadow(0 0 24px rgba(211, 189, 139, 0.78));
  }
  100% {
    opacity: 0;
    translate: 0 -18px;
    scale: 0.42;
    filter: brightness(2.35) saturate(0.62) drop-shadow(0 0 34px rgba(125, 240, 255, 0.96));
  }
}

.combatant.enemy.escape img {
  animation: catch-escape 460ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

.combatant.enemy.escape .sprite-flip {
  animation: catch-escape-wrapper 460ms cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
  transform-origin: 50% 68%;
}

.combatant.enemy.escape .sprite-flip img {
  animation: none;
  margin-left: 0;
}

.combatant.enemy.aethervane-feather-escape .sprite-flip,
.combatant.enemy.aethervane-feather-escape .sprite-flip.battle-anim {
  animation: aethervane-feather-body-rise 1500ms cubic-bezier(0.18, 0.72, 0.2, 1) forwards;
  transform-origin: 50% 68%;
}

.combatant.enemy.aethervane-feather-escape .sprite-flip img {
  animation: none;
  margin-left: 0;
}

.combatant.enemy.aethervane-feather-escape::before,
.combatant.enemy.aethervane-feather-escape::after,
.combatant.enemy.aethervane-feather-escape .black-holo-aura,
.combatant.enemy.aethervane-feather-escape .black-holo-rim,
.combatant.enemy.aethervane-feather-escape .black-holo-sprinkles {
  animation: aethervane-feather-aura-fade 1120ms ease-in forwards !important;
}

@keyframes aethervane-feather-body-rise {
  0%, 16% { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  46% { opacity: 0.62; translate: 0 -15px; scale: 0.96; filter: brightness(1.36) saturate(0.82); }
  72% { opacity: 0.14; translate: 0 -42px; scale: 0.82; filter: brightness(1.9) saturate(0.6) blur(2px); }
  100% { opacity: 0; translate: 0 -76px; scale: 0.56; filter: brightness(2.3) saturate(0.42) blur(5px); }
}

@keyframes aethervane-feather-aura-fade {
  to { opacity: 0; }
}

.combatant.enemy.lochness-bubble-escape .sprite-flip,
.combatant.enemy.lochness-bubble-escape .sprite-flip.battle-anim {
  animation: lochness-bubble-body-sink 1480ms cubic-bezier(0.2, 0.7, 0.22, 1) forwards;
  transform-origin: 50% 74%;
}

.combatant.enemy.lochness-bubble-escape .sprite-flip img {
  animation: none;
  margin-left: 0;
}

.combatant.enemy.lochness-bubble-escape::before,
.combatant.enemy.lochness-bubble-escape::after,
.combatant.enemy.lochness-bubble-escape .black-holo-aura,
.combatant.enemy.lochness-bubble-escape .black-holo-rim,
.combatant.enemy.lochness-bubble-escape .black-holo-sprinkles {
  animation: lochness-bubble-aura-fade 1080ms ease-in forwards !important;
}

@keyframes lochness-bubble-body-sink {
  0%, 14% { opacity: 1; translate: 0 0; scale: 1; filter: none; }
  42% { opacity: 0.68; translate: 0 10px; scale: 0.96; filter: brightness(1.28) saturate(0.86); }
  72% { opacity: 0.18; translate: 0 34px; scale: 0.8; filter: brightness(1.72) saturate(0.62) blur(2px); }
  100% { opacity: 0; translate: 0 58px; scale: 0.58; filter: brightness(2.08) saturate(0.48) blur(5px); }
}

@keyframes lochness-bubble-aura-fade {
  to { opacity: 0; }
}

.combatant.enemy.bastimaw-escape .sprite-flip {
  animation: bastimaw-catch-escape 500ms cubic-bezier(0.2, 1.2, 0.34, 1) forwards;
  transform-origin: 50% 68%;
}

.combatant.enemy.bastimaw-escape .sprite-flip.battle-anim img {
  animation: none;
  margin-left: 0;
}

@keyframes catch-escape {
  0% { opacity: 0; transform: scale(0.15); filter: brightness(2.2); }
  55% { opacity: 1; transform: scale(1.14); filter: brightness(1.2); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes catch-escape-wrapper {
  0% { opacity: 0; translate: 0 0; scale: 0.15; rotate: 0deg; filter: brightness(2.2); }
  55% { opacity: 1; translate: 0 0; scale: 1.14; rotate: 0deg; filter: brightness(1.2); }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: none; }
}

@keyframes bastimaw-catch-escape {
  0% { opacity: 0; translate: 0 -18px; scale: 0.42; filter: brightness(2.3) saturate(0.65); }
  54% {
    opacity: 1;
    translate: 0 -4px;
    scale: 1.08;
    filter: brightness(1.25) saturate(1.08) drop-shadow(0 0 18px rgba(125, 240, 255, 0.8));
  }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}

.fx-fireball {
  width: 32px;
  height: 32px;
  border-radius: 58% 42% 56% 44%;
  background: radial-gradient(circle at 42% 38%, #fff, currentColor 55%, rgba(0, 0, 0, 0.2) 100%) !important;
  filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 22px currentColor);
}

.fx-fireball::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 65%);
  opacity: 0.5;
  animation: ember-flicker 140ms steps(2) infinite;
}

@keyframes ember-flicker {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.12); opacity: 0.32; }
}

.fx-comet:not(.fx-layer) {
  width: 30px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 50%, #fff, currentColor 60%) !important;
  filter: drop-shadow(0 0 12px currentColor);
}

.fx-comet:not(.fx-layer)::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 1px;
  width: 90px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor);
  filter: blur(2px);
  opacity: 0.7;
}

.fx-aeon-tempest-orb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  z-index: 13;
  background:
    radial-gradient(circle at 35% 28%, #fff 0 18%, var(--c2, currentColor) 36%, currentColor 58%, transparent 76%) !important;
  box-shadow:
    0 0 14px #fff,
    0 0 28px var(--c2, currentColor),
    0 0 46px var(--c3, currentColor);
  filter: saturate(1.35) brightness(1.28);
  animation: aeon-tempest-orb var(--orb-ms, 560ms) cubic-bezier(0.2, 0.78, 0.16, 1) forwards;
}

.fx-aeon-tempest-orb::before {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 74px;
  height: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c3, currentColor), #fff);
  filter: blur(2px);
  opacity: 0.82;
  transform: translateY(-50%);
}

.fx-aeon-tempest-orb::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 18px var(--c2, currentColor);
  opacity: 0.65;
}

.fx-aeon-tempest-mote {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, currentColor 58%, transparent 80%) !important;
  filter: drop-shadow(0 0 8px currentColor);
  animation: aeon-tempest-mote var(--orb-ms, 500ms) cubic-bezier(0.18, 0.82, 0.16, 1) forwards;
}

.fx-hyperbeam-origin {
  z-index: 40;
  width: var(--cap-size, 84px);
  height: var(--cap-size, 84px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, #fff 0 20%, var(--c1, #dffaff) 22% 38%, var(--c2, #8ee8ff) 50%, var(--c3, #1768ff) 74%, #082e91 100%) !important;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.98),
    0 0 38px var(--c2, #8ee8ff),
    0 0 70px var(--c3, #1768ff),
    inset 0 0 18px rgba(255, 255, 255, 0.78);
  filter: saturate(1.18) brightness(1.08);
  mix-blend-mode: screen;
  animation: hyperbeam-origin-cap var(--cap-ms, 1500ms) cubic-bezier(0.16, 0.76, 0.2, 1) forwards;
}

.fx-hyperbeam-origin::before,
.fx-hyperbeam-origin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.fx-hyperbeam-origin::before {
  inset: -18%;
  border: 3px solid rgba(255, 255, 255, 0.74);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.78),
    0 0 44px var(--c2, #8ee8ff),
    inset 0 0 24px var(--c3, #1768ff);
  opacity: 0.45;
}

.fx-hyperbeam-origin::after {
  inset: 24%;
  background: radial-gradient(circle, #fff 0 28%, rgba(255,255,255,0.72) 42%, transparent 70%);
  filter: blur(1px);
  opacity: 0.72;
}

.fx-astral-rift-seed {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 13;
  background:
    radial-gradient(circle at 36% 30%, #fff 0 14%, var(--c2, #c7f0ff) 32%, currentColor 56%, transparent 78%) !important;
  box-shadow:
    0 0 16px #fff,
    0 0 34px var(--c2, currentColor),
    0 0 54px var(--c3, currentColor);
  filter: saturate(1.36) brightness(1.28);
  animation: astral-rift-seed 620ms cubic-bezier(0.18, 0.78, 0.16, 1) forwards;
}

.fx-astral-rift-seed::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 92px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c3, currentColor), var(--c2, currentColor), #fff);
  filter: blur(2.5px);
  opacity: 0.88;
  transform: translateY(-50%);
}

.fx-astral-rift-seed::after {
  content: "";
  position: absolute;
  inset: -13px;
  clip-path: polygon(50% 0, 60% 36%, 100% 50%, 60% 64%, 50% 100%, 40% 64%, 0 50%, 40% 36%);
  background: radial-gradient(circle, rgba(255,255,255,0.95), transparent 68%);
  filter: drop-shadow(0 0 16px var(--c2, currentColor));
  opacity: 0.82;
}

.fx-astral-rift-shard {
  width: 30px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff 30%, currentColor 64%, transparent) !important;
  box-shadow: 0 0 12px currentColor;
  animation: astral-rift-shard 560ms cubic-bezier(0.5, 0, 0.8, 0.3) forwards;
}

.fx-meteor-coil-projectile {
  width: 46px;
  height: 34px;
  border-radius: 58% 46% 54% 42%;
  z-index: 13;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 10%, var(--c2, #ffd24a) 22%, currentColor 52%, var(--c3, #ff3b18) 78%) !important;
  box-shadow:
    0 0 18px #fff,
    0 0 34px var(--c2, #ffd24a),
    0 0 58px var(--c3, #ff3b18);
  filter: saturate(1.32) brightness(1.18);
  animation: meteor-coil-projectile 720ms cubic-bezier(0.18, 0.74, 0.18, 1) forwards;
}

.fx-meteor-coil-projectile::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 132px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--c3, #ff3b18), var(--c2, #ffd24a), #fff);
  filter: blur(4px);
  opacity: 0.86;
  transform: translateY(-50%);
}

.fx-meteor-coil-projectile::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 3px solid rgba(255, 210, 74, 0.58);
  box-shadow: 0 0 26px var(--c3, #ff3b18);
  opacity: 0.72;
}

.fx-meteor-coil-ember {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff, currentColor 55%, transparent 82%) !important;
  filter: drop-shadow(0 0 10px currentColor);
  animation: meteor-coil-ember 640ms cubic-bezier(0.2, 0.76, 0.2, 1) forwards;
}

.fx-bubble-shot,
.fx-bubble-pop {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), transparent 45%) !important;
  border: 3px solid;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.85), 0 0 12px currentColor;
}

.fx-wave {
  width: 80px;
  height: 30px;
  border-radius: 999px 999px 12px 12px;
  opacity: 0;
  animation: wave-crash 760ms cubic-bezier(0.25, 0.8, 0.2, 1) forwards;
}

/* A surge that travels source -> target and crashes onto the defender,
   without the spinning of projectile-move (which placed it off-target). */
@keyframes wave-crash {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4, 0.7) rotate(-4deg);
  }
  20% { opacity: 0.95; }
  70% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1, 1) rotate(2deg);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5, 1.2) rotate(6deg);
  }
}

@keyframes aurora-hit-circle {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.36);
  }
  18% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.92);
  }
  72% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(2.75);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.35);
  }
}

.fx-needle {
  width: 58px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor 30%, #fff 60%, currentColor) !important;
  box-shadow: 0 0 12px currentColor;
  animation: projectile-move 600ms cubic-bezier(0.15, 0.9, 0.2, 1) forwards;
  transform-origin: center;
}

.fx-slash {
  width: 124px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor 25%, #fff 50%, currentColor 75%, transparent) !important;
  box-shadow: 0 0 20px currentColor;
  opacity: 0;
  animation: slash-flash 460ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}

.fx-ring {
  width: var(--ring-size);
  height: var(--ring-size);
  border: 4px solid;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: 0 0 18px currentColor, inset 0 0 14px currentColor;
  animation: ring-pulse 700ms cubic-bezier(0.2, 0.75, 0.25, 1) forwards;
}

.fx-burst-piece,
.fx-dust,
.fx-ember,
.fx-leaf,
.fx-leaf-shot,
.fx-splash,
.fx-bubble-pop,
.fx-spark,
.fx-rock,
.fx-star,
.fx-shadow,
.fx-ice,
.fx-snow,
.fx-web,
.fx-swarm:not(.fx-layer),
.fx-scale {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  filter: drop-shadow(0 0 5px currentColor);
  animation: burst-out 780ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

.fx-dust {
  width: 17px;
  height: 9px;
  border-radius: 999px;
  opacity: 0.72;
  filter: blur(1px);
}

.fx-ember {
  width: 13px;
  height: 20px;
  border-radius: 52% 48% 48% 52%;
  background: radial-gradient(circle at 50% 28%, #fff, currentColor 58%, transparent 92%) !important;
  filter: drop-shadow(0 0 8px currentColor);
}

.fx-leaf {
  width: 18px;
  height: 11px;
  border-radius: 100% 0 100% 0;
}

.fx-leaf-shot {
  width: 26px;
  height: 15px;
  border-radius: 100% 0 100% 0;
  filter: drop-shadow(0 0 6px currentColor);
  animation: projectile-move 680ms cubic-bezier(0.25, 0.8, 0.2, 1) forwards;
}

.fx-splash,
.fx-snow {
  background: transparent !important;
  border: 3px solid;
  box-shadow: 0 0 12px currentColor, inset 0 0 8px currentColor;
}

.fx-spark {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff 35%, currentColor 65%, transparent) !important;
  box-shadow: 0 0 12px currentColor;
}

.fx-rock {
  width: 16px;
  height: 14px;
  border-radius: 5px 8px 4px 9px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.fx-star {
  clip-path: polygon(50% 0, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
  background: radial-gradient(circle, #fff 0%, currentColor 60%) !important;
  filter: drop-shadow(0 0 7px currentColor);
}

.fx-shadow {
  width: 19px;
  height: 19px;
  border-radius: 42% 58% 36% 64%;
  filter: blur(1px) drop-shadow(0 0 10px currentColor);
}

.fx-ice,
.fx-scale {
  width: 16px;
  height: 20px;
  clip-path: polygon(50% 0, 100% 48%, 50% 100%, 0 48%);
  background: linear-gradient(135deg, #fff, currentColor 70%) !important;
  filter: drop-shadow(0 0 7px currentColor);
}

.fx-web {
  width: 48px;
  height: 2px;
  border-radius: 999px;
  box-shadow: 0 0 6px currentColor;
}

.fx-swarm:not(.fx-layer) {
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  filter: drop-shadow(0 0 4px currentColor);
}

.fx-layer.fx-quake {
  animation: stage-rumble 500ms linear;
}

.fx-layer.fx-aurora::before,
.fx-layer.fx-snowBlast::before,
.fx-layer.fx-rush::before,
.fx-layer.fx-embers::before,
.fx-layer.fx-astralrift::before,
.fx-layer.fx-comet::before,
.fx-layer.fx-quake::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: soft-flash 820ms ease-out;
}

.fx-layer.fx-aurora::before {
  background: linear-gradient(115deg, transparent 25%, rgba(152, 242, 210, 0.22), rgba(182, 156, 255, 0.2), transparent 72%);
}

.fx-layer.fx-snowBlast::before { background: rgba(230, 249, 255, 0.28); }
.fx-layer.fx-rush::before,
.fx-layer.fx-embers::before { background: radial-gradient(circle at 60% 45%, rgba(255, 150, 70, 0.26), transparent 60%); }
.fx-layer.fx-comet::before { background: radial-gradient(circle at 60% 45%, rgba(170, 200, 255, 0.26), transparent 62%); }
.fx-layer.fx-astralrift::before {
  background:
    radial-gradient(circle at 62% 44%, rgba(199, 240, 255, 0.32), transparent 36%),
    radial-gradient(circle at 58% 50%, rgba(141, 123, 255, 0.24), transparent 58%);
}
.fx-layer.fx-astralrift::after {
  content: "";
  position: absolute;
  inset: -12%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(128deg, transparent 22%, rgba(7, 16, 39, 0.42) 45%, rgba(199, 240, 255, 0.38) 50%, rgba(141, 123, 255, 0.28) 56%, transparent 78%);
  mix-blend-mode: screen;
  animation: astral-rift-stage 1700ms cubic-bezier(0.18, 0.78, 0.2, 1) forwards;
}
.fx-layer.fx-quake::before { background: rgba(120, 90, 50, 0.22); }

@keyframes projectile-move {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(40deg); }
  78% { opacity: 1; }
  88% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.5) rotate(180deg); /* impact swell */
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(210deg);
  }
}

@keyframes prism-nova-orb-flight {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.86);
  }
  54% {
    left: var(--mx);
    top: var(--my);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  86% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.03);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes prism-nova-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes prism-nova-core-pulse {
  from { opacity: 0.88; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes hyperbeam-origin-cap {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38);
    filter: saturate(1.05) brightness(1);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.94);
    filter: saturate(1.28) brightness(1.32);
  }
  46% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
    filter: saturate(1.42) brightness(1.55);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }
  92% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
    filter: saturate(1.15) brightness(1.08);
  }
}

@keyframes aeon-tempest-orb {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--orb-flip, 1)) scale(0.28) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--orb-flip, 1)) scale(0.9) rotate(50deg);
  }
  76% {
    opacity: 1;
    filter: saturate(1.45) brightness(1.45);
  }
  92% {
    left: var(--tx);
    top: var(--ty);
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--orb-flip, 1)) scale(1.55) rotate(190deg);
    filter: saturate(1.7) brightness(1.95);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--orb-flip, 1)) scale(2.5) rotate(240deg);
    filter: saturate(1.8) brightness(2.4);
  }
}

@keyframes aeon-tempest-mote {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.35);
  }
  18% { opacity: 0.8; }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }
}

@keyframes astral-rift-seed {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--rift-flip, 1)) scale(0.28) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--rift-flip, 1)) scale(0.86) rotate(48deg);
  }
  78% {
    opacity: 1;
    filter: saturate(1.46) brightness(1.48);
  }
  92% {
    left: var(--tx);
    top: var(--ty);
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--rift-flip, 1)) scale(1.4) rotate(160deg);
    filter: saturate(1.7) brightness(2);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--rift-flip, 1)) scale(2.35) rotate(220deg);
    filter: saturate(1.9) brightness(2.5);
  }
}

@keyframes astral-rift-shard {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42) rotate(var(--rift-rot, 0deg));
  }
  20% { opacity: 0.96; }
  82% { opacity: 0.9; }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1) rotate(var(--rift-rot, 0deg));
  }
}

@keyframes astral-rift-stage {
  0% { opacity: 0; transform: translateX(-18%) scaleX(0.55); }
  16% { opacity: 0.95; }
  54% { opacity: 0.82; transform: translateX(0) scaleX(1.08); }
  100% { opacity: 0; transform: translateX(18%) scaleX(1.24); }
}

@keyframes meteor-coil-projectile {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--meteor-flip, 1)) scale(0.42) rotate(var(--meteor-rot, 18deg));
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--meteor-flip, 1)) scale(0.86) rotate(var(--meteor-rot, 18deg));
  }
  78% {
    opacity: 1;
    filter: saturate(1.42) brightness(1.35);
  }
  92% {
    left: var(--tx);
    top: var(--ty);
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(var(--meteor-flip, 1)) scale(1.32) rotate(var(--meteor-rot, 18deg));
    filter: saturate(1.6) brightness(1.7);
  }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(var(--meteor-flip, 1)) scale(1.95) rotate(var(--meteor-rot, 18deg));
    filter: saturate(1.7) brightness(2.2);
  }
}

@keyframes meteor-coil-ember {
  0% {
    left: var(--sx);
    top: var(--sy);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.34) rotate(var(--meteor-rot, 18deg));
  }
  20% { opacity: 0.9; }
  84% { opacity: 0.9; }
  100% {
    left: var(--tx);
    top: var(--ty);
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.2) rotate(var(--meteor-rot, 18deg));
  }
}

@keyframes burst-out {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15) rotate(0deg);
  }
  16% { opacity: 1; }
  55% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.72), calc(-50% + var(--dy) * 0.72 - 6px)) scale(calc(var(--scale) * 1.05)) rotate(calc(var(--rot) * 0.6));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 12px)) scale(calc(var(--scale) * 0.7)) rotate(var(--rot));
  }
}

@keyframes slash-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.1) scaleY(0.5) rotate(calc(var(--rot) - 14deg));
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1.15) scaleY(1.15) rotate(var(--rot));
  }
  55% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1) rotate(var(--rot)); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(1.25) scaleY(0.4) rotate(calc(var(--rot) + 10deg));
  }
}

@keyframes ring-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.15);
  }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(0.6); }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.95);
  }
}

/* anticipation crouch -> snap forward -> settle */
/* X is negated because the player sprite sits inside a scaleX(-1) wrapper:
   under that mirror these values read as a lunge UP-RIGHT, toward the foe. */
@keyframes player-lunge {
  0% { transform: translate(0, 0) scale(1); }
  18% { transform: translate(12px, 9px) scale(0.95); }
  42% { transform: translate(-38px, -28px) scale(1.1); }
  62% { transform: translate(-22px, -16px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes enemy-lunge {
  0% { transform: translate(0, 0) scale(1); }
  18% { transform: translate(12px, -9px) scale(0.95); }
  42% { transform: translate(-34px, 26px) scale(1.1); }
  62% { transform: translate(-20px, 15px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes hit-shake {
  0% { transform: translate(0, 0) scale(1); }
  10% { transform: translate(0, 0) scale(0.93); }
  25% { transform: translate(-10px, 3px) scale(0.97); }
  42% { transform: translate(9px, -3px); }
  58% { transform: translate(-7px, 2px); }
  74% { transform: translate(5px, -1px); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes stage-rumble {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(3px, -1px); }
}

@keyframes soft-flash {
  0%, 100% { opacity: 0; }
  38% { opacity: 1; }
}

@keyframes evo-spin {
  to { transform: rotate(360deg) scale(1.1); }
}

@keyframes evo-flare {
  0% { opacity: 0.2; filter: blur(1px) brightness(1); }
  35% { opacity: 0.8; filter: blur(0) brightness(1.2); }
  58% { opacity: 1; filter: blur(0) brightness(2.2); }
  100% { opacity: 0.45; filter: blur(2px) brightness(1.1); }
}

@keyframes evo-column {
  0%, 18% { opacity: 0; transform: translateX(-50%) scaleX(0.25); }
  42% { opacity: 0.75; transform: translateX(-50%) scaleX(0.8); }
  58% { opacity: 1; transform: translateX(-50%) scaleX(1.5); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(2.1); }
}

@keyframes evo-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  25% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes evo-burst {
  0%, 42% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(0.3);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(360px) scale(1.15);
  }
}

@keyframes evo-orbit {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(80px) rotate(0deg) scale(0.25);
  }
  24% {
    opacity: 1;
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 260deg)) translateX(150px) rotate(360deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--angle) + 620deg)) translateX(280px) rotate(720deg) scale(0.5);
  }
}

.crab-reward-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff4dd;
  background: #05070b;
}
.crab-reward-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(208, 54, 58, 0.34), transparent 28%),
    radial-gradient(circle at 44% 66%, rgba(255, 214, 154, 0.16), transparent 26%),
    linear-gradient(180deg, #080b12, #25090d 55%, #06070b);
}
.crab-reward-mist {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 30% 65%, rgba(240, 106, 90, 0.22), transparent 34%),
    radial-gradient(ellipse at 70% 58%, rgba(255, 242, 192, 0.14), transparent 32%);
  filter: blur(20px);
  animation: crab-mist 4s ease-in-out infinite alternate;
}
.crab-reward-baby {
  position: relative;
  z-index: 2;
  width: min(46vw, 280px);
  height: min(46vw, 280px);
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(240, 106, 90, 0.44));
  animation: crab-approach 2200ms cubic-bezier(0.16, 0.84, 0.22, 1) both;
}
.crab-reward-rings {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
}
.crab-reward-rings span {
  position: absolute;
  left: 0;
  top: 0;
  width: min(70vw, 460px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 224, 170, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  animation: crab-ring 2400ms ease-out calc(var(--i) * 220ms) infinite;
}
.crab-reward-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(92vw, 540px);
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(5, 8, 14, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  text-align: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
}
.crab-reward-copy h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 4vw, 2rem); }
.crab-reward-copy p { margin: 0 0 14px; color: #f2dccb; }
.crab-reward-copy button {
  min-width: 160px;
  border: 1px solid rgba(255, 224, 170, 0.42);
  background: linear-gradient(180deg, #d84640, #7f1820);
  color: #fff7e5;
  font-weight: 800;
}
.crablet-reward-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(46vw, 280px);
  height: min(46vw, 280px);
  opacity: 0;
  transition: opacity 120ms ease;
}
.crablet-reward-stage .crab-reward-baby {
  width: 100%;
  height: 100%;
}
.crablet-reward-scene.is-monster-visible .crablet-reward-stage { opacity: 1; }
.crablet-reward-scene:not(.is-monster-visible) .crab-reward-baby {
  animation-play-state: paused;
}
.crablet-reward-scene .crab-reward-copy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition:
    opacity 380ms ease-out,
    transform 380ms ease-out,
    visibility 0s linear 380ms;
}
.crablet-reward-scene.is-copy-visible .crab-reward-copy {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.crablet-reward-scene .crab-reward-copy button:disabled {
  opacity: 0.55;
  cursor: wait;
}
@media (max-height: 540px) and (orientation: landscape) {
  .crablet-reward-scene.is-copy-visible {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 46vw);
    grid-template-rows: minmax(0, 1fr);
    gap: clamp(8px, 2vw, 20px);
    align-items: center;
    justify-items: stretch;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .crablet-reward-scene.is-copy-visible .crablet-reward-stage {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: min(43vw, calc(100dvh - 24px), 360px);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
  }
  .crablet-reward-scene.is-copy-visible .crab-reward-copy {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(10px, 3vh, 14px);
  }
  .crablet-reward-scene .crab-reward-copy h2 {
    margin-bottom: 6px;
    font-size: clamp(1.05rem, 4.2vh, 1.35rem);
  }
  .crablet-reward-scene .crab-reward-copy p {
    margin-bottom: 10px;
    font-size: clamp(0.74rem, 3vh, 0.9rem);
    line-height: 1.3;
  }
  .crablet-reward-scene .crab-reward-copy button {
    min-width: min(160px, 100%);
    min-height: 40px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .crablet-reward-scene .crab-reward-baby {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .crablet-reward-scene .crab-reward-copy { transition-duration: 1ms; }
}
@keyframes crab-approach {
  0% { opacity: 0; transform: translateY(70px) scale(0.24); filter: blur(6px) brightness(2); }
  42% { opacity: 1; filter: blur(0) brightness(1.35); }
  100% { opacity: 1; transform: translateY(-18px) scale(1); filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(240, 106, 90, 0.44)); }
}
@keyframes crab-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  20% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes crab-mist {
  from { transform: translateX(-3%) scale(1); }
  to { transform: translateX(3%) scale(1.08); }
}

/* ---- Holo, Black Holo & rare ------------------------------------------- */
.holo-sprite,
.shiny-sprite {
  animation: shiny-glow 2.4s ease-in-out infinite;
  will-change: filter, transform;
}
.noxavyr-reward-scene {
  color: #f6e8ff;
  background: #020104;
}
.noxavyr-reward-scene .crab-reward-bg {
  background:
    radial-gradient(circle at 50% 42%, rgba(145, 44, 210, 0.38), transparent 30%),
    radial-gradient(circle at 48% 62%, rgba(255, 34, 70, 0.2), transparent 24%),
    linear-gradient(180deg, #020104, #13071c 58%, #010102);
}
.noxavyr-reward-scene .crab-reward-mist {
  background:
    radial-gradient(ellipse at 30% 65%, rgba(20, 10, 27, 0.92), transparent 36%),
    radial-gradient(ellipse at 70% 55%, rgba(126, 42, 170, 0.28), transparent 34%);
}
.noxavyr-reward-scene .crab-reward-baby {
  width: min(72vw, 580px);
  height: min(66vh, 580px);
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 34px rgba(162, 66, 230, 0.5));
}
.noxavyr-reward-scene .crab-reward-copy button {
  border-color: rgba(238, 207, 255, 0.5);
  background: linear-gradient(180deg, #742a9a, #260b35);
}
.aurevyr-reward-scene {
  color: #fff9df;
  background: #120a02;
}
.aurevyr-reward-scene .crab-reward-bg {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 238, 0.66), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255, 194, 72, 0.48), transparent 40%),
    radial-gradient(circle at 48% 66%, rgba(255, 113, 184, 0.26), transparent 28%),
    linear-gradient(180deg, #241002, #6d2a12 58%, #160603);
}
.aurevyr-reward-scene .crab-reward-mist {
  background:
    radial-gradient(ellipse at 30% 65%, rgba(255, 192, 70, 0.42), transparent 38%),
    radial-gradient(ellipse at 70% 55%, rgba(255, 140, 196, 0.34), transparent 36%);
}
.aurevyr-reward-scene .crab-reward-baby {
  width: min(76vw, 620px);
  height: min(70vh, 620px);
  filter: drop-shadow(0 28px 34px rgba(34, 10, 0, 0.72)) drop-shadow(0 0 42px rgba(255, 224, 130, 0.82));
}
.aurevyr-reward-scene .crab-reward-copy button {
  color: #251002;
  border-color: rgba(255, 250, 218, 0.76);
  background: linear-gradient(180deg, #fff4b0, #e7a52e);
}

@property --bh-hue { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --bh-sat { syntax: "<number>"; inherits: false; initial-value: 1.45; }
@property --bh-holo-bright { syntax: "<number>"; inherits: false; initial-value: 1.12; }
@property --bh-gray { syntax: "<number>"; inherits: false; initial-value: 0.2; }
@property --bh-dark { syntax: "<number>"; inherits: false; initial-value: 0.76; }
@property --bh-contrast { syntax: "<number>"; inherits: false; initial-value: 1.34; }

.black-holo-sprite {
  --bh-hue: 0deg;
  --bh-sat: 1.45;
  --bh-holo-bright: 1.12;
  --bh-gray: 0.2;
  --bh-dark: 0.76;
  --bh-contrast: 1.34;
  filter:
    saturate(var(--bh-sat))
    hue-rotate(var(--bh-hue))
    grayscale(var(--bh-gray))
    contrast(var(--bh-contrast))
    brightness(var(--bh-holo-bright))
    brightness(var(--bh-dark))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 3px rgba(174, 132, 255, 0.46))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.62));
  animation:
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite;
  will-change: filter, transform;
}

.mutation-azure:not(.holo-sprite):not(.black-holo-sprite) {
  --mut-glow-color: rgba(56, 160, 255, 0.85);
  filter: hue-rotate(168deg) saturate(1.28) brightness(1.05) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 var(--mut-glow-size, 0px) var(--mut-glow-color, transparent));
}

.mutation-crimson:not(.holo-sprite):not(.black-holo-sprite) {
  --mut-glow-color: rgba(255, 84, 64, 0.85);
  filter: hue-rotate(-36deg) saturate(1.36) brightness(1.04) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 var(--mut-glow-size, 0px) var(--mut-glow-color, transparent));
}

.mutation-emerald:not(.holo-sprite):not(.black-holo-sprite) {
  --mut-glow-color: rgba(64, 224, 124, 0.85);
  filter: hue-rotate(86deg) saturate(1.3) brightness(1.06) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 var(--mut-glow-size, 0px) var(--mut-glow-color, transparent));
}

.mutation-violet:not(.holo-sprite):not(.black-holo-sprite) {
  --mut-glow-color: rgba(178, 102, 255, 0.85);
  filter: hue-rotate(230deg) saturate(1.24) brightness(1.04) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 var(--mut-glow-size, 0px) var(--mut-glow-color, transparent));
}

.mutation-gold:not(.holo-sprite):not(.black-holo-sprite) {
  --mut-glow-color: rgba(255, 204, 64, 0.85);
  filter: sepia(0.34) hue-rotate(12deg) saturate(1.42) brightness(1.1) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 var(--mut-glow-size, 0px) var(--mut-glow-color, transparent));
}

/* Pure Line grades: deeper mutations earn a visible colored bloom on top of
   the body tint (non-holo sprites; holo grades show via the label stars). */
.mutation-grade-2 { --mut-glow-size: calc(var(--sprite-size, 168px) * 0.05); }
.mutation-grade-3 { --mut-glow-size: calc(var(--sprite-size, 168px) * 0.09); }

/* Holo + Mutation: the body tint belongs to the holo shimmer (animated filter),
   so the mutation shows as the COLOR of the holo aura instead - regular Holo
   glows in the mutation color (white peak kept), Black Holo "whispers" in it. */
.holo-sprite.mutation-azure, .shiny-sprite.mutation-azure, .black-holo-sprite.mutation-azure {
  --holo-aura: rgba(56, 160, 255, 0.95); --holo-aura-soft: rgba(56, 160, 255, 0.6);
}
.holo-sprite.mutation-crimson, .shiny-sprite.mutation-crimson, .black-holo-sprite.mutation-crimson {
  --holo-aura: rgba(255, 84, 64, 0.95); --holo-aura-soft: rgba(255, 84, 64, 0.6);
}
.holo-sprite.mutation-emerald, .shiny-sprite.mutation-emerald, .black-holo-sprite.mutation-emerald {
  --holo-aura: rgba(64, 224, 124, 0.95); --holo-aura-soft: rgba(64, 224, 124, 0.6);
}
.holo-sprite.mutation-violet, .shiny-sprite.mutation-violet, .black-holo-sprite.mutation-violet {
  --holo-aura: rgba(178, 102, 255, 0.95); --holo-aura-soft: rgba(178, 102, 255, 0.6);
}
.holo-sprite.mutation-gold, .shiny-sprite.mutation-gold, .black-holo-sprite.mutation-gold {
  --holo-aura: rgba(255, 204, 64, 0.95); --holo-aura-soft: rgba(255, 204, 64, 0.6);
}

/* ============================================================
   Prismatic Mutation - the breeding crown jewel. The monster keeps its TRUE
   colors (unlike holo); instead a full-spectrum prism aura orbits the hue
   wheel around it, with two phase-offset rims for a chromatic-refraction
   look and a slow crystal breathing pulse. Registered --prism-hue animates
   smoothly; browsers without @property animation hold the violet initial.
   ============================================================ */
@property --prism-hue { syntax: "<angle>"; inherits: false; initial-value: 285deg; }

@keyframes prism-hue-spin {
  from { --prism-hue: 0deg; }
  to { --prism-hue: 360deg; }
}

@keyframes prism-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.mutation-prismatic:not(.holo-sprite):not(.black-holo-sprite):not(.shiny-sprite) {
  animation: prism-hue-spin 5.2s linear infinite, prism-breathe 2.6s ease-in-out infinite;
  will-change: filter, transform;
  filter: saturate(1.32) brightness(1.07)
    drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.04) hsl(var(--prism-hue) 100% 74% / 0.95))
    drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.1) hsl(calc(var(--prism-hue) + 80deg) 100% 70% / 0.6))
    drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) hsl(calc(var(--prism-hue) + 160deg) 100% 68% / 0.35))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42));
}

/* Prismatic + Holo: the holo shimmer plays as usual while its aura colors
   ride the spinning prism hue - the rarest look in the game. */
.holo-sprite.mutation-prismatic, .shiny-sprite.mutation-prismatic {
  --holo-aura: hsl(var(--prism-hue) 100% 72% / 0.95);
  --holo-aura-soft: hsl(calc(var(--prism-hue) + 70deg) 100% 70% / 0.6);
  animation: shiny-glow 2.4s ease-in-out infinite, prism-hue-spin 4.4s linear infinite;
}
.black-holo-sprite.mutation-prismatic {
  --holo-aura: hsl(var(--prism-hue) 100% 72% / 0.9);
  --holo-aura-soft: hsl(calc(var(--prism-hue) + 70deg) 100% 70% / 0.55);
  animation:
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite,
    prism-hue-spin 7.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mutation-prismatic:not(.holo-sprite):not(.black-holo-sprite):not(.shiny-sprite) {
    animation: none; /* static violet-tinted prism aura via --prism-hue initial */
  }
  .holo-sprite.mutation-prismatic, .shiny-sprite.mutation-prismatic { animation: shiny-glow 2.4s ease-in-out infinite; }
  .black-holo-sprite.mutation-prismatic {
    animation:
      black-holo-color-cycle 2.4s ease-in-out infinite,
      black-holo-glow 7.2s ease-in-out infinite;
  }
}

.evolution-choice-preview img.holo-sprite,
.evolution-choice-preview img.black-holo-sprite {
  --sprite-size: 160px;
}

.evolution-result img.holo-sprite,
.evolution-result img.black-holo-sprite {
  --sprite-size: min(340px, 82vw);
}

.evo-before.holo-sprite {
  --sprite-size: min(430px, 60vw);
  animation: evo-before-holo 4.4s ease-in-out forwards;
}

.evo-after.holo-sprite {
  --sprite-size: min(430px, 60vw);
  animation: evo-after-holo 4.4s ease-in-out forwards;
}

.evo-before.black-holo-sprite {
  --sprite-size: min(430px, 60vw);
  animation: evo-before-black-holo 4.4s ease-in-out forwards;
}

.evo-after.black-holo-sprite {
  --sprite-size: min(430px, 60vw);
  animation: evo-after-black-holo 4.4s ease-in-out forwards;
}

.combatant.shiny-combatant {
  isolation: isolate;
}

.combatant.black-holo-combatant {
  isolation: isolate;
}

.combatant.black-holo-combatant .sprite-flip,
.combatant.black-holo-combatant .combat-card,
.combatant.black-holo-combatant .team-dots {
  position: relative;
  z-index: 2;
}

.combatant.black-holo-combatant .sprite-flip {
  border-radius: 0;
  background: none;
  animation: black-holo-frame-aura 2.2s ease-in-out infinite;
}

@keyframes black-holo-frame-aura {
  0%, 100% {
    filter:
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.055) rgba(2, 3, 8, 0.42))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.16) rgba(5, 7, 14, 0.2));
  }
  45% {
    filter:
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.075) rgba(2, 3, 8, 0.5))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.22) rgba(5, 7, 14, 0.25));
  }
}

.combatant.black-holo-combatant .combat-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(2, 3, 6, 0.92)),
    radial-gradient(110% 70% at 16% 0%, rgba(255, 255, 255, 0.16), transparent 58%),
    radial-gradient(96% 72% at 86% 12%, rgba(120, 128, 146, 0.18), transparent 60%),
    radial-gradient(100% 76% at 50% 100%, rgba(0, 0, 0, 0.62), transparent 66%);
  border-color: rgba(232, 236, 244, 0.72);
  border-top-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.68),
    0 0 20px rgba(255, 255, 255, 0.18),
    0 0 34px rgba(90, 96, 112, 0.22),
    0 0 52px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.combatant.black-holo-combatant .combat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, #ffffff 0%, #c5ccda 9%, #05060a 22%, #ffffff 34%, #7df0ff 41%, #05060a 52%, #ffffff 60%, #ff9bf0 67%, #05060a 80%, #e8ecf4 91%, #ffffff 100%);
  background-size: 420% 100%;
  opacity: 0.96;
  animation: black-holo-card-border 4.6s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.combatant.black-holo-combatant .lv-pill {
  color: #ffffff;
  border-color: rgba(232, 236, 244, 0.82);
  background: rgba(8, 12, 20, 0.58);
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.18),
    0 0 22px rgba(88, 94, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* Black holo = "event horizon": a soft void vignette behind everything, plus a
   JS-injected .black-holo-aura element carrying three layers — the blazing
   eclipse corona (element), a tilted spinning iridescent accretion ring
   (::before) and stardust spiralling INTO the monster (::after). All ambient
   loops share the 7.2s cycle so the once-per-cycle "totality flash" on the
   sprite, the corona burst and the ring flare hit together. */
.combatant.black-holo-combatant::before {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--sprite-size, 168px) * 1.74);
  height: calc(var(--sprite-size, 168px) * 1.6);
  pointer-events: none;
  z-index: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side at 50% 54%, rgba(4, 6, 14, 0.24), rgba(4, 6, 14, 0.1) 46%, transparent 78%);
  opacity: 0.45;
  animation: none;
}

.combatant.enemy.black-holo-combatant::before {
  bottom: calc(var(--sprite-size, 168px) * -0.16);
}

.combatant.player.black-holo-combatant::before,
.combatant.raid-buddy.black-holo-combatant::before {
  top: calc(var(--sprite-fx-rise, 0px) + var(--sprite-size, 168px) * -0.28);
}

.black-holo-aura {
  position: absolute;
  left: 50%;
  width: calc(var(--sprite-size, 168px) * 1.36);
  height: calc(var(--sprite-size, 168px) * 1.36);
  pointer-events: none;
  z-index: 1;
  transform: translateX(-50%);
}

.combatant.enemy .black-holo-aura {
  bottom: calc(var(--sprite-size, 168px) * -0.04);
}

.combatant.player .black-holo-aura,
.combatant.raid-buddy .black-holo-aura {
  top: calc(var(--sprite-fx-rise, 0px) + var(--sprite-size, 168px) * -0.16);
}

/* The eclipse corona: dark occlusion disc, razor-thin blazing ring and a
   four-point lens flare, breathing with the cycle and bursting at totality. */
.combatant.black-holo-combatant .black-holo-aura {
  background:
    radial-gradient(circle closest-side at 50% 54%, rgba(3, 4, 10, 0.32) 0 29%, rgba(5, 7, 16, 0.12) 37%, transparent 47%),
    radial-gradient(circle closest-side at 50% 54%, transparent 0 30%, rgba(255, 255, 255, 0.18) 32%, rgba(255, 255, 255, 0.97) 34%, rgba(208, 222, 255, 0.5) 36.5%, rgba(140, 158, 215, 0.16) 41%, transparent 48%),
    radial-gradient(ellipse 46% 1.5% at 50% 54%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2) 55%, transparent 100%),
    radial-gradient(ellipse 1.3% 30% at 50% 54%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 55%, transparent 100%),
    radial-gradient(circle closest-side at 50% 54%, transparent 0 40%, rgba(150, 170, 255, 0.12) 52%, transparent 72%);
  filter:
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.32))
    drop-shadow(0 0 18px rgba(170, 190, 255, 0.2));
  opacity: 0.78;
  animation: black-holo-corona 7.2s ease-in-out infinite;
}

/* The accretion ring: an iridescent arc band, masked to a thin ring and
   squashed into a tilted orbit that slowly precesses around the monster. */
.combatant.black-holo-combatant .black-holo-aura::before {
  content: "";
  position: absolute;
  inset: -7%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg at 50% 54%,
      transparent 0deg,
      rgba(125, 240, 255, 0.72) 28deg,
      rgba(255, 255, 255, 1) 52deg,
      rgba(255, 150, 250, 0.66) 84deg,
      rgba(8, 10, 18, 0.55) 120deg,
      transparent 150deg,
      rgba(255, 226, 140, 0.56) 196deg,
      rgba(255, 255, 255, 0.95) 232deg,
      rgba(150, 170, 255, 0.7) 262deg,
      rgba(8, 10, 18, 0.5) 300deg,
      transparent 330deg);
  -webkit-mask: radial-gradient(circle closest-side at 50% 54%, transparent 0 62%, #000 68% 82%, rgba(0, 0, 0, 0.35) 89%, transparent 95%);
  mask: radial-gradient(circle closest-side at 50% 54%, transparent 0 62%, #000 68% 82%, rgba(0, 0, 0, 0.35) 89%, transparent 95%);
  transform-origin: 50% 54%;
  transform: scaleY(0.44) rotate(0deg);
  filter: blur(0.5px) drop-shadow(0 0 7px rgba(255, 255, 255, 0.45));
  opacity: 0.9;
  will-change: transform, opacity, filter;
  animation:
    black-holo-disk-spin 14.4s linear infinite,
    black-holo-disk-flare 7.2s ease-in-out infinite;
}

/* Stardust falling INTO the event horizon: a ring of motes spirals inward,
   shrinking as it is devoured, three waves per totality cycle. */
.combatant.black-holo-combatant .black-holo-aura::after {
  content: "";
  display: none;
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.98) 0 2px, transparent 4px),
    radial-gradient(circle at 30% 8%, rgba(159, 216, 255, 0.95) 0 1.7px, transparent 3.6px),
    radial-gradient(circle at 68% 5%, rgba(255, 255, 255, 0.9) 0 2.2px, transparent 4.4px),
    radial-gradient(circle at 90% 26%, rgba(224, 179, 255, 0.95) 0 1.8px, transparent 3.8px),
    radial-gradient(circle at 95% 58%, rgba(255, 255, 255, 0.95) 0 1.7px, transparent 3.6px),
    radial-gradient(circle at 82% 86%, rgba(255, 233, 168, 0.9) 0 2px, transparent 4.2px),
    radial-gradient(circle at 52% 96%, rgba(255, 255, 255, 0.96) 0 2.1px, transparent 4.2px),
    radial-gradient(circle at 18% 88%, rgba(159, 216, 255, 0.9) 0 1.8px, transparent 3.8px),
    radial-gradient(circle at 4% 60%, rgba(255, 255, 255, 0.85) 0 1.7px, transparent 3.6px),
    radial-gradient(circle at 40% 18%, rgba(255, 255, 255, 0.78) 0 1.5px, transparent 3.2px),
    radial-gradient(circle at 78% 42%, rgba(208, 222, 255, 0.8) 0 1.5px, transparent 3.2px),
    radial-gradient(circle at 24% 56%, rgba(255, 255, 255, 0.72) 0 1.4px, transparent 3px);
  transform-origin: 50% 54%;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
  opacity: 0;
  will-change: transform, opacity;
  animation: black-holo-stardust 2.4s linear infinite;
}

/* A lightning crown wraps the monster for ~0.4s right at the totality flash —
   once per cycle, frame-stepped through the eclipse bolt sheet. */
.combatant.black-holo-combatant .black-holo-aura .black-holo-aura-bolt {
  position: absolute;
  inset: 2%;
  background: url("assets/effects/black-holo-eclipse-lightning-sheet.png?v=black-holo-eclipse-bolts-1") 0% 50% / 600% 100% no-repeat;
  mix-blend-mode: screen;
  filter:
    brightness(1.5)
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 14px rgba(190, 205, 255, 0.5));
  opacity: 0;
  pointer-events: none;
  animation: black-holo-aura-bolt 7.2s linear infinite;
}

.combatant.shiny-combatant .sprite-flip,
.combatant.shiny-combatant .combat-card,
.combatant.shiny-combatant .team-dots {
  position: relative;
  z-index: 2;
}

.combatant.shiny-combatant .sprite-flip {
  animation: shiny-frame-aura 2.2s ease-in-out infinite;
}

.combatant.shiny-combatant .combat-card {
  background:
    linear-gradient(180deg, rgba(32, 39, 62, 0.62), rgba(10, 14, 24, 0.76)),
    radial-gradient(120% 70% at 14% 0%, rgba(255, 244, 166, 0.2), transparent 58%),
    radial-gradient(110% 74% at 86% 8%, rgba(122, 240, 255, 0.16), transparent 58%);
  border-color: rgba(255, 241, 166, 0.48);
  border-top-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 228, 122, 0.2),
    0 0 34px rgba(122, 240, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.combatant.shiny-combatant .combat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, #fff7a8, #7df0ff, #ff9be8, #b6ffd0, #fff7a8);
  background-size: 290% 100%;
  opacity: 0.9;
  animation: shiny-card-border 2.15s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.combatant.shiny-combatant .lv-pill {
  color: #fff7c6;
  border-color: rgba(255, 242, 168, 0.7);
  background: rgba(255, 247, 168, 0.13);
  box-shadow:
    0 0 12px rgba(255, 242, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* The old rotating aura DISC is gone: it was a fixed circle centered on the
   combatant's layout box, but the visible monster is rarely centered in its
   sprite frame (transparent padding, poses, tails), so it read off-center on
   many species. The aura is now the fluid silhouette RIM on .sprite-flip
   below; only the floating sparkle motes remain on the combatant box. */
.combatant.shiny-combatant::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--sprite-size, 168px) * 1.2);
  height: calc(var(--sprite-size, 168px) * 1.2);
  pointer-events: none;
  z-index: 1;
  transform: translateX(-50%);
}

.combatant.enemy.shiny-combatant::after {
  bottom: calc(var(--sprite-size, 168px) * -0.06);
}

.combatant.player.shiny-combatant::after,
.combatant.raid-buddy.shiny-combatant::after {
  top: calc(var(--sprite-fx-rise, 0px) + var(--sprite-size, 168px) * -0.05);
}

.combatant.shiny-combatant::after {
  background:
    radial-gradient(circle at 18% 28%, #fff7a8 0 1.5px, transparent 2.8px),
    radial-gradient(circle at 73% 20%, #a9f0ff 0 1.8px, transparent 3.2px),
    radial-gradient(circle at 90% 56%, #ffb6f0 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 34% 84%, #b6ffd0 0 1.7px, transparent 3px),
    radial-gradient(circle at 58% 68%, #ffffff 0 1.3px, transparent 2.8px);
  filter: drop-shadow(0 0 7px rgba(255, 247, 168, 0.9)) drop-shadow(0 0 12px rgba(169, 240, 255, 0.6));
  opacity: 0.9;
  animation: shiny-motes 1.7s ease-in-out infinite;
}

@keyframes shiny-frame-aura {
  0%, 100% {
    filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.055) rgba(255, 247, 168, 0.9))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.16) rgba(169, 240, 255, 0.48));
  }
  45% {
    filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.075) rgba(255, 255, 255, 1))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.23) rgba(255, 182, 240, 0.62));
  }
}

/* Fluid holo rim: the monster's OWN silhouette (--shiny-mon, the same mask
   the sheen glint uses), dilated a few percent and filled with slow-cycling
   rainbow light. It hugs every edge exactly - it CANNOT sit off-center -
   and breathes outward like liquid. Anchored center-bottom so the dilation
   grows up/sideways and the base stays grounded. */
.combatant.shiny-combatant .sprite-flip img,
.combatant:has(.shiny-sprite) .sprite-flip img {
  position: relative;
  z-index: 2;
}

.combatant.shiny-combatant .sprite-flip::before,
.combatant:has(.shiny-sprite) .sprite-flip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--shiny-y, 0px);
  /* The box is 34% LARGER than the sprite while the mask percentages shrink
     by the same factor: the rim looks identical, but the dilated silhouette
     now has headroom on every side instead of being cut at the box edge. */
  width: calc(var(--sprite-size, 168px) * 1.34);
  height: calc(var(--sprite-size, 168px) * 1.34);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from 20deg,
    #fff7a8, #a9f0ff 26%, #ffb6f0 52%, #b6ffd0 76%, #fff7a8);
  filter: blur(calc(var(--sprite-size, 168px) * 0.012)) brightness(1.18) hue-rotate(0deg);
  opacity: 0.9;
  -webkit-mask: var(--shiny-mon) center bottom / 84% no-repeat;
  mask: var(--shiny-mon) center bottom / 84% no-repeat;
  animation: holo-rim 3.6s ease-in-out infinite;
}

@keyframes holo-rim {
  0% {
    -webkit-mask-size: 82%;
    mask-size: 82%;
    filter: blur(calc(var(--sprite-size, 168px) * 0.012)) brightness(1.18) hue-rotate(0deg);
    opacity: 0.82;
  }
  50% {
    -webkit-mask-size: 87.5%;
    mask-size: 87.5%;
    filter: blur(calc(var(--sprite-size, 168px) * 0.016)) brightness(1.4) hue-rotate(180deg);
    opacity: 1;
  }
  100% {
    -webkit-mask-size: 82%;
    mask-size: 82%;
    filter: blur(calc(var(--sprite-size, 168px) * 0.012)) brightness(1.18) hue-rotate(360deg);
    opacity: 0.82;
  }
}

/* Sleeping shiny (Hypnose etc.): the sleep "z" glyph ALSO targets
   .sprite-flip::before and its `top: 12%` leaks into the rim (the rim rule
   never sets `top`, so the leaked value re-anchors the silhouette from the
   top and it visibly slides DOWN). While asleep the rim owns ::before again;
   the sleep state keeps its big trailing "Z" on ::after. */
.combatant.asleep.shiny-combatant .sprite-flip::before,
.combatant.asleep:has(.shiny-sprite) .sprite-flip::before {
  content: "";
  top: auto;
}

/* Sheet-animated (idle) monsters: the static-silhouette rim above cannot
   follow the sheet frames (the mask is one still pose), so in battle-anim
   mode it is hidden and replaced by the rim TWIN - a second copy of the same
   sheet <img> behind the sprite (inserted by ensureHoloRimTwinImg in
   game.js) running the SAME battle-sheet-play animation, colorized into
   slow-cycling rainbow light. Frame-perfect: same sheet, same steps, same
   start frame. */
.combatant.shiny-combatant .sprite-flip.battle-anim::before,
.combatant:has(.shiny-sprite) .sprite-flip.battle-anim::before {
  display: none;
}

.combatant .sprite-flip img.holo-rim-twin {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.combatant .sprite-flip.battle-anim img.holo-rim-twin {
  display: block;
  animation:
    battle-sheet-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) infinite,
    holo-rim-twin-glow 3.6s ease-in-out infinite;
}

.combatant.shiny-combatant .sprite-flip.battle-anim img.holo-rim-twin,
.combatant:has(.shiny-sprite) .sprite-flip.battle-anim img.holo-rim-twin {
  opacity: 1;
}

/* No opacity in these keyframes on purpose: visibility is gated ONLY by the
   shiny-combatant rules above, so non-holo twins stay fully invisible. */
@keyframes holo-rim-twin-glow {
  0% {
    filter: sepia(1) saturate(7) hue-rotate(0deg) brightness(1.5)
      blur(calc(var(--sprite-size, 168px) * 0.02));
  }
  50% {
    filter: sepia(1) saturate(8) hue-rotate(180deg) brightness(1.75)
      blur(calc(var(--sprite-size, 168px) * 0.027));
  }
  100% {
    filter: sepia(1) saturate(7) hue-rotate(360deg) brightness(1.5)
      blur(calc(var(--sprite-size, 168px) * 0.02));
  }
}

@keyframes shiny-motes {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) rotate(-6deg) scale(0.92); }
  50% { opacity: 1; transform: translateX(-50%) rotate(8deg) scale(1.08); }
}

@keyframes shiny-card-border {
  to { background-position: 290% 0; }
}

/* The shiny aura: two stacked drop-shadows (tight bright core + wide colored
   bloom) hug the sprite's exact silhouette — effectively halo AND glow in one.
   Being a filter on the <img>, it tracks the monster perfectly at every stage
   size, --sprite-drop position and flip (replaces the old fixed halo). */
@keyframes shiny-glow {
  /* Blur scales with --sprite-size so the aura stays boldly visible at every
     stage size (not a thin rim on the big sprites). Aura colors route through
     --holo-aura/--holo-aura-soft so a Mutation can tint the shimmer (the
     defaults below ARE the classic rainbow cycle); the 50% white peak stays
     white on purpose. */
  0%   { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.05) var(--holo-aura, rgba(255, 238, 150, 0.95))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--holo-aura-soft, rgba(255, 238, 150, 0.6))) saturate(1.45) hue-rotate(0deg) brightness(1.12); transform: scale(1); }
  25%  { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.065) var(--holo-aura, rgba(150, 235, 255, 1))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) var(--holo-aura-soft, rgba(150, 235, 255, 0.7))) saturate(1.8) hue-rotate(70deg) brightness(1.26); }
  50%  { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.085) rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) var(--holo-aura-soft, rgba(190, 245, 255, 0.72))) saturate(2.1) hue-rotate(170deg) brightness(1.5); transform: scale(1.055); }
  72%  { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.065) var(--holo-aura, rgba(255, 180, 240, 1))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.19) var(--holo-aura-soft, rgba(180, 255, 205, 0.68))) saturate(1.8) hue-rotate(265deg) brightness(1.26); }
  100% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.05) var(--holo-aura, rgba(255, 238, 150, 0.95))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--holo-aura-soft, rgba(255, 238, 150, 0.6))) saturate(1.45) hue-rotate(360deg) brightness(1.12); transform: scale(1); }
}

.combatant .sprite-flip.battle-anim img.shiny-sprite {
  animation:
    battle-sheet-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) infinite,
    shiny-sheet-glow 2.1s ease-in-out infinite;
}

/* Black Holo keeps the filtered element frame-sized. Animating object-position
   avoids asking the compositor to filter the entire 5x/8x sheet at once. */
@keyframes black-holo-sheet-object-play {
  from { object-position: 0% 100%; }
  to { object-position: var(--battle-anim-object-shift, 100%) 100%; }
}

@keyframes black-holo-sheet-object-attack-play {
  from { object-position: 0% 100%; }
  to { object-position: var(--battle-anim-object-shift, 100%) 100%; }
}

.combatant.black-holo-combatant .sprite-flip.battle-anim img.black-holo-sprite {
  width: var(--sprite-width, var(--sprite-size));
  height: var(--sprite-size);
  max-width: none;
  object-fit: cover;
  object-position: 0% 100%;
  margin-left: 0;
  animation:
    black-holo-sheet-object-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) infinite,
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.attacking .sprite-flip.battle-anim img.black-holo-sprite {
  animation:
    black-holo-sheet-object-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) infinite,
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.attacking .sprite-flip.battle-anim.battle-anim-attack img.black-holo-sprite {
  animation:
    black-holo-sheet-object-attack-play var(--battle-anim-duration, 1000ms) steps(var(--battle-anim-steps, 1), end) 1 forwards,
    black-holo-color-cycle 2.4s ease-in-out infinite,
    black-holo-glow 7.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.player.attacking .sprite-flip.battle-anim,
.combatant.black-holo-combatant.raid-buddy.duo-player.attacking .sprite-flip.battle-anim {
  animation:
    effect-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.raid-buddy:not(.duo-player).attacking .sprite-flip.battle-anim {
  animation:
    black-holo-player-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.enemy.attacking .sprite-flip.battle-anim,
.combatant.black-holo-combatant.duo-enemy.attacking .sprite-flip.battle-anim {
  animation:
    black-holo-enemy-lunge 600ms cubic-bezier(0.3, 1.4, 0.4, 1),
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

/* Preserve Glovemaw's full two-punch weight transfer while the charcoal aura
   continues to breathe around the animated sheet. */
.combatant.black-holo-combatant.player.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.black-holo-combatant.enemy.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.black-holo-combatant.raid-buddy.attacking .sprite-flip.battle-anim.battle-anim-boxer,
.combatant.black-holo-combatant.duo-enemy.attacking .sprite-flip.battle-anim.battle-anim-boxer {
  animation:
    battle-anim-boxer-combo var(--battle-anim-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

.combatant.black-holo-combatant.player.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.black-holo-combatant.enemy.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.black-holo-combatant.raid-buddy.attacking .sprite-flip.battle-anim.battle-anim-legendary,
.combatant.black-holo-combatant.duo-enemy.attacking .sprite-flip.battle-anim.battle-anim-legendary {
  animation:
    battle-anim-noxavyr-cast var(--battle-anim-duration, 2050ms) cubic-bezier(0.2, 0.72, 0.25, 1) 1,
    black-holo-frame-aura 2.2s ease-in-out infinite;
}

@keyframes shiny-sheet-glow {
  0%   { filter: saturate(1.55) hue-rotate(0deg) brightness(1.14); }
  25%  { filter: saturate(1.9) hue-rotate(75deg) brightness(1.28); }
  50%  { filter: saturate(2.25) hue-rotate(170deg) brightness(1.48); }
  72%  { filter: saturate(1.95) hue-rotate(270deg) brightness(1.3); }
  100% { filter: saturate(1.55) hue-rotate(360deg) brightness(1.14); }
}

@keyframes black-holo-sheet-glow {
  0%, 100% { --bh-gray: 0.2; --bh-dark: 0.76; --bh-contrast: 1.34; }
  14% { --bh-gray: 0.05; --bh-dark: 0.94; --bh-contrast: 1.24; }
  26% { --bh-gray: 0.18; --bh-dark: 0.8; --bh-contrast: 1.36; }
  38% { --bh-gray: 0.08; --bh-dark: 0.88; --bh-contrast: 1.29; }
  52% { --bh-gray: 0.3; --bh-dark: 0.72; --bh-contrast: 1.42; }
  59% { --bh-gray: 0.06; --bh-dark: 1.03; --bh-contrast: 1.22; }
  66% { --bh-gray: 0.16; --bh-dark: 0.84; --bh-contrast: 1.34; }
  84% { --bh-gray: 0.06; --bh-dark: 0.92; --bh-contrast: 1.26; }
}

/* Where the sprite's base sits inside .sprite-flip: flush for the
   (top-anchored) enemy, raised by --sprite-drop for the (bottom-anchored)
   ally. Shiny FX key off this so they track the monster at every stage
   size & position (which now vary a lot). */
.combatant.shiny-combatant .sprite-flip,
.combatant:has(.shiny-sprite) .sprite-flip { --shiny-y: 0px; }
.combatant.player.shiny-combatant .sprite-flip,
.combatant.player:has(.shiny-sprite) .sprite-flip { --shiny-y: var(--sprite-drop, 0px); }

/* A bright specular glint that sweeps across the monster's OWN shape
   (masked by its sprite, set live via --shiny-mon). */
.combatant.shiny-combatant .sprite-flip::after,
.combatant:has(.shiny-sprite) .sprite-flip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: var(--shiny-y, 0px);
  width: var(--sprite-size, 168px);
  height: var(--sprite-size, 168px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
  -webkit-mask: var(--shiny-mon) center bottom / contain no-repeat;
  mask: var(--shiny-mon) center bottom / contain no-repeat;
  background: linear-gradient(112deg,
    transparent 38%, rgba(255, 255, 255, 0.9) 49%,
    rgba(190, 245, 255, 0.7) 53%, transparent 64%);
  background-size: 250% 100%;
  background-position: 130% 0;
  mix-blend-mode: screen;
  animation: shiny-sheen 2.8s ease-in-out infinite;
}

@keyframes shiny-sheen {
  0%, 100% { background-position: 130% 0; opacity: 0; }
  30% { opacity: 1; }
  62% { background-position: -45% 0; opacity: 0.45; }
  74%, 100% { opacity: 0; }
}

.combatant.black-holo-combatant .sprite-flip { --holo-y: 0px; }
.combatant.player.black-holo-combatant .sprite-flip,
.combatant.raid-buddy.black-holo-combatant .sprite-flip { --holo-y: var(--sprite-drop, 0px); }

.combatant.black-holo-combatant .sprite-flip img {
  position: relative;
  z-index: 2;
  image-rendering: auto;
}

/* Spectral foil sheen masked to the monster's own silhouette — a gentle pass
   mid-cycle, then a hard brilliant pass right after the totality flash, like
   light flowing back over the dark body. */
.combatant.black-holo-combatant .sprite-flip::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: var(--holo-y, 0px);
  width: var(--sprite-size, 168px);
  height: var(--sprite-size, 168px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3;
  -webkit-mask: var(--holo-color-mask, var(--holo-mon)) center bottom / contain no-repeat;
  mask: var(--holo-color-mask, var(--holo-mon)) center bottom / contain no-repeat;
  background: linear-gradient(115deg, transparent 30%, rgba(125, 240, 255, 0.5) 41%, rgba(255, 255, 255, 0.95) 47%, rgba(255, 150, 250, 0.5) 53%, rgba(255, 226, 140, 0.32) 58%, transparent 68%);
  background-size: 300% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: black-holo-foil 7.2s ease-in-out infinite;
}

/* The old full-body oil slick flattened the painting. Black Holo now keeps the
   real sprite colors and uses a separate, translucent silhouette behind it. */
.combatant.black-holo-combatant .sprite-flip::after {
  content: none;
  display: none;
}

.black-holo-rim {
  position: absolute;
  left: 50%;
  bottom: var(--holo-y, 0px);
  width: calc(var(--sprite-size, 168px) * 1.34);
  height: calc(var(--sprite-size, 168px) * 1.34);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
  background: #03040a;
  -webkit-mask: var(--holo-mon) center bottom / 84% no-repeat;
  mask: var(--holo-mon) center bottom / 84% no-repeat;
  animation: black-holo-soft-rim 3.6s ease-in-out infinite;
}

@keyframes black-holo-soft-rim {
  0%, 100% {
    -webkit-mask-size: 82%;
    mask-size: 82%;
    filter: blur(calc(var(--sprite-size, 168px) * 0.012));
    opacity: 0.2;
  }
  50% {
    -webkit-mask-size: 87.5%;
    mask-size: 87.5%;
    filter: blur(calc(var(--sprite-size, 168px) * 0.016));
    opacity: 0.3;
  }
}

.black-holo-sprinkles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  image-rendering: auto;
}

.combatant.black-holo-combatant .sprite-flip.battle-anim::before,
.combatant.black-holo-combatant .sprite-flip.battle-anim .black-holo-rim {
  display: none;
}

.combatant.black-holo-combatant .sprite-flip.battle-anim img.holo-rim-twin {
  /* The filtered twin can become an opaque compositor panel on wide sheets.
     The frame-sized main sprite plus wrapper drop-shadows supplies the same
     soft charcoal depth without covering the painting. */
  display: none;
  width: var(--sprite-width, var(--sprite-size));
  height: var(--sprite-size);
  max-width: none;
  object-fit: cover;
  object-position: 0% 100%;
  margin-left: 0;
  z-index: 1;
  pointer-events: none;
  animation: none;
}

.combatant.black-holo-combatant .sprite-flip.battle-anim.battle-anim-attack img.holo-rim-twin {
  animation: none;
}

@keyframes black-holo-rim-twin-soft {
  0%, 100% {
    opacity: 0.2;
    filter:
      brightness(0)
      blur(calc(var(--sprite-size, 168px) * 0.012))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.055) rgba(2, 3, 8, 0.42))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.16) rgba(5, 7, 14, 0.2));
  }
  50% {
    opacity: 0.3;
    filter:
      brightness(0)
      blur(calc(var(--sprite-size, 168px) * 0.016))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.075) rgba(2, 3, 8, 0.5))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.22) rgba(5, 7, 14, 0.25));
  }
}

.combatant:has(.black-holo-sprite) { isolation: isolate; }

.combatant.black-holo-combatant.fainting .sprite-flip {
  background: none;
}

.combatant.black-holo-combatant.in-ball .black-holo-rim,
.combatant.black-holo-combatant.in-ball .black-holo-sprinkles,
.combatant.black-holo-combatant.bastimaw-in-ball .black-holo-rim,
.combatant.black-holo-combatant.bastimaw-in-ball .black-holo-sprinkles,
.combatant.black-holo-combatant.escape .black-holo-rim,
.combatant.black-holo-combatant.escape .black-holo-sprinkles,
.combatant.black-holo-combatant.bastimaw-escape .black-holo-rim,
.combatant.black-holo-combatant.bastimaw-escape .black-holo-sprinkles,
.combatant.black-holo-combatant.voidbound .black-holo-rim,
.combatant.black-holo-combatant.voidbound .black-holo-sprinkles,
.combatant.black-holo-combatant.void-release .black-holo-rim,
.combatant.black-holo-combatant.void-release .black-holo-sprinkles {
  opacity: 0;
  animation: none;
}

/* Sheet sprites need their special states on the clipped wrapper. Otherwise
   the later Black-Holo color tracks win the cascade and the wide strip keeps
   idling through hits, capture, fainting, or a void transition. */
.combatant.black-holo-combatant.hit .sprite-flip.battle-anim {
  animation: black-holo-sheet-hit 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.combatant.black-holo-combatant.fainting .sprite-flip.battle-anim {
  animation: black-holo-sheet-faint 720ms ease-in forwards;
}

.combatant.black-holo-combatant.voidbound .sprite-flip.battle-anim {
  animation: black-holo-sheet-void-suck 660ms cubic-bezier(0.55, 0, 0.75, 0) forwards;
}

.combatant.black-holo-combatant.void-release .sprite-flip.battle-anim {
  animation: black-holo-sheet-void-return 720ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}

/* Individual transform properties preserve the wrapper's scaleX facing. */
@keyframes black-holo-sheet-hit {
  0%, 100% { translate: 0 0; scale: 1; }
  10% { translate: 0 0; scale: 0.93; }
  25% { translate: -10px 3px; scale: 0.97; }
  42% { translate: 9px -3px; scale: 1; }
  58% { translate: -7px 2px; scale: 1; }
  74% { translate: 5px -1px; scale: 1; }
}

@keyframes black-holo-sheet-faint {
  0% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: grayscale(0) brightness(1); }
  35% { translate: 0 6px; scale: 1.02; rotate: 0deg; filter: grayscale(0.4) brightness(1.1); }
  100% { opacity: 0; translate: 0 46px; scale: 0.55; rotate: -8deg; filter: grayscale(1) brightness(0.6); }
}

@keyframes black-holo-sheet-void-suck {
  0% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: brightness(1); }
  38% { opacity: 1; translate: 0 3%; scale: 0.8; rotate: -130deg; filter: brightness(1); }
  76% { opacity: 0.5; translate: 0 5%; scale: 0.24; rotate: -470deg; filter: brightness(0.5); }
  100% { opacity: 0; translate: 0 7%; scale: 0; rotate: -660deg; filter: brightness(0.3); }
}

@keyframes black-holo-sheet-void-return {
  0% { opacity: 0; translate: 0 7%; scale: 0; rotate: 440deg; filter: brightness(2); }
  46% { opacity: 1; translate: 0 -2%; scale: 1.12; rotate: 38deg; filter: brightness(1.5); }
  72% { opacity: 1; translate: 0 1%; scale: 0.95; rotate: -8deg; filter: brightness(1.1); }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: brightness(1); }
}

.combatant.black-holo-combatant:is(.hit, .fainting, .in-ball, .bastimaw-in-ball, .escape, .bastimaw-escape, .voidbound, .void-release)
  .sprite-flip.battle-anim img.black-holo-sprite {
  animation: none;
  margin-left: 0;
}

.combatant.black-holo-combatant.hit .sprite-flip.battle-anim img.black-holo-sprite {
  filter: brightness(1.7) saturate(1.35) contrast(1.1);
}

.combatant.black-holo-combatant:is(.hit, .in-ball, .bastimaw-in-ball, .escape, .bastimaw-escape, .voidbound, .void-release):not(.fainting)
  :is(.black-holo-rim, .black-holo-sprinkles) {
  opacity: 0;
  animation: none;
}

.combatant.black-holo-combatant:is(.hit, .in-ball, .bastimaw-in-ball, .escape, .bastimaw-escape, .voidbound, .void-release):not(.fainting)
  .sprite-flip.battle-anim img.holo-rim-twin {
  display: none;
  opacity: 0;
  animation: none;
}

/* Tainted Devil monsters: the existing corruption texture is masked to the
   monster silhouette, so the effect stays on the sprite instead of becoming a
   square screen overlay. */
.combatant.tainted-combatant {
  isolation: isolate;
}

.combatant.tainted-combatant .sprite-flip {
  --tainted-y: 0px;
}

.combatant.player.tainted-combatant .sprite-flip,
.combatant.raid-buddy.tainted-combatant .sprite-flip {
  --tainted-y: var(--sprite-drop, 0px);
}

.combatant.tainted-combatant .sprite-flip img {
  position: relative;
  z-index: 2;
}

.combatant img.tainted-sprite:not(.holo-sprite):not(.black-holo-sprite) {
  filter:
    saturate(0.78)
    contrast(1.16)
    brightness(0.72)
    drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.055) rgba(92, 255, 122, 0.55))
    drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) rgba(121, 66, 255, 0.38));
}

.combatant.tainted-combatant .sprite-flip.battle-anim img.tainted-sprite:not(.holo-sprite):not(.black-holo-sprite) {
  /* Animated battle sheets are one wide strip; strip-level shadows bleed into the clipped frame. */
  filter:
    saturate(0.78)
    contrast(1.16)
    brightness(0.72);
}

.tainted-sprite-aura {
  position: absolute;
  left: 50%;
  bottom: calc(var(--tainted-y, 0px) + var(--sprite-size, 168px) * 0.01);
  width: var(--sprite-size, 168px);
  height: var(--sprite-size, 168px);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  background: url("assets/npcs/tainted-overlay.png?v=devils-assets-1") center / 116% 116% no-repeat;
  -webkit-mask: var(--tainted-mon) center bottom / contain no-repeat;
  mask: var(--tainted-mon) center bottom / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.66;
  filter:
    brightness(1.32)
    contrast(1.18)
    saturate(1.55)
    drop-shadow(0 0 4px rgba(116, 255, 116, 0.6))
    drop-shadow(0 0 14px rgba(110, 64, 255, 0.48));
  animation:
    tainted-corruption-pulse 2.35s ease-in-out infinite,
    tainted-corruption-drift 4.8s linear infinite;
}

.tainted-sprite-aura::after {
  content: "";
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 52% 58%, rgba(118, 255, 104, 0.28), transparent 28%),
    radial-gradient(circle at 45% 42%, rgba(126, 74, 255, 0.28), transparent 46%),
    conic-gradient(from 0deg, transparent, rgba(106, 255, 124, 0.22), transparent, rgba(116, 70, 255, 0.20), transparent);
  -webkit-mask: var(--tainted-mon) center bottom / contain no-repeat;
  mask: var(--tainted-mon) center bottom / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: tainted-corruption-swirl 3.6s linear infinite;
}

@keyframes tainted-corruption-pulse {
  0%, 100% {
    opacity: 0.48;
    transform: translateX(-50%) scale(0.985);
    filter:
      brightness(1.18)
      contrast(1.16)
      saturate(1.4)
      drop-shadow(0 0 3px rgba(116, 255, 116, 0.42))
      drop-shadow(0 0 11px rgba(110, 64, 255, 0.34));
  }
  46% {
    opacity: 0.84;
    transform: translateX(-50%) scale(1.045);
    filter:
      brightness(1.48)
      contrast(1.24)
      saturate(1.75)
      drop-shadow(0 0 6px rgba(126, 255, 116, 0.78))
      drop-shadow(0 0 19px rgba(124, 80, 255, 0.62));
  }
}

@keyframes tainted-corruption-drift {
  0% { background-position: 50% 54%; }
  100% { background-position: 58% 46%; }
}

@keyframes tainted-corruption-swirl {
  0% { transform: rotate(0deg) scale(0.96); opacity: 0.42; }
  50% { opacity: 0.66; }
  100% { transform: rotate(360deg) scale(1.04); opacity: 0.42; }
}

/* Defeat owns the whole sprite wrapper for effect-bearing monsters. This
   makes the Devil Examiner's tainted Noctivy, Holo, and Black Holo fade as one
   composited unit instead of leaving a corruption/rim/corona layer behind. */
.combatant:is(.tainted-combatant, .holo-combatant, .black-holo-combatant).fainting .sprite-flip,
.combatant:is(.tainted-combatant, .holo-combatant, .black-holo-combatant).fainting .sprite-flip.battle-anim {
  animation: effect-bearing-monster-faint 720ms ease-in forwards;
}

/* Stop the child's idle/color tracks while the wrapper performs the KO. The
   wrapper preserves the existing scaleX facing through individual transforms. */
.combatant:is(.tainted-combatant, .holo-combatant, .black-holo-combatant).fainting .sprite-flip img {
  animation: none;
}

/* Holo motes and Black Holo's two combatant-level layers live outside
   .sprite-flip, so give those the same fade clock as the monster wrapper. */
.combatant.holo-combatant.fainting::after {
  animation: holo-defeat-effect-fade 720ms ease-in forwards;
}

.combatant.black-holo-combatant.fainting::before {
  animation: black-holo-defeat-vignette-fade 720ms ease-in forwards;
}

.combatant.black-holo-combatant.fainting .black-holo-aura {
  animation: black-holo-defeat-corona-fade 720ms ease-in forwards;
}

@keyframes effect-bearing-monster-faint {
  0% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: grayscale(0) brightness(1); }
  35% { opacity: 1; translate: 0 6px; scale: 1.02; rotate: 0deg; filter: grayscale(0.4) brightness(1.1); }
  100% { opacity: 0; translate: 0 46px; scale: 0.55; rotate: -8deg; filter: grayscale(1) brightness(0.6); }
}

@keyframes holo-defeat-effect-fade {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

@keyframes black-holo-defeat-vignette-fade {
  from { opacity: 0.45; }
  to { opacity: 0; }
}

@keyframes black-holo-defeat-corona-fade {
  from { opacity: 0.78; }
  to { opacity: 0; }
}

/* Black Holo uses regular Holo's perfect color travel, with a second, slower
   charcoal depth track. Registered properties let both animations compose on
   the real painting without a flat overlay or a full-black totality frame. */
@keyframes black-holo-color-cycle {
  0% { --bh-hue: 0deg; --bh-sat: 1.45; --bh-holo-bright: 1.12; }
  25% { --bh-hue: 70deg; --bh-sat: 1.8; --bh-holo-bright: 1.26; }
  50% { --bh-hue: 170deg; --bh-sat: 2.1; --bh-holo-bright: 1.5; }
  72% { --bh-hue: 265deg; --bh-sat: 1.8; --bh-holo-bright: 1.26; }
  100% { --bh-hue: 360deg; --bh-sat: 1.45; --bh-holo-bright: 1.12; }
}

@keyframes black-holo-glow {
  0%, 100% { --bh-gray: 0.2; --bh-dark: 0.76; --bh-contrast: 1.34; transform: scale(1); }
  14% { --bh-gray: 0.05; --bh-dark: 0.94; --bh-contrast: 1.24; }
  26% { --bh-gray: 0.18; --bh-dark: 0.8; --bh-contrast: 1.36; }
  38% { --bh-gray: 0.08; --bh-dark: 0.88; --bh-contrast: 1.29; }
  52% { --bh-gray: 0.3; --bh-dark: 0.72; --bh-contrast: 1.42; transform: scale(1); }
  59% { --bh-gray: 0.06; --bh-dark: 1.03; --bh-contrast: 1.22; transform: scale(1.02); }
  66% { --bh-gray: 0.16; --bh-dark: 0.84; --bh-contrast: 1.34; transform: scale(1); }
  84% { --bh-gray: 0.06; --bh-dark: 0.92; --bh-contrast: 1.26; }
}

@keyframes evo-before-holo {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.12) saturate(1.45) hue-rotate(0deg)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.05) rgba(255, 238, 150, 0.95))
      drop-shadow(0 28px 30px rgba(0, 0, 0, 0.32));
  }
  30% {
    opacity: 1;
    transform: scale(1.06) rotate(-2deg);
    filter: brightness(2.05) saturate(1.85) hue-rotate(70deg) contrast(1.55)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) rgba(150, 235, 255, 0.95));
  }
  50% {
    opacity: 0.9;
    transform: scale(1.24) rotate(8deg);
    filter: brightness(5) saturate(1.85) hue-rotate(170deg) contrast(2)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) rgba(190, 245, 255, 0.95));
  }
  62%, 100% {
    opacity: 0;
    transform: scale(0.45) rotate(24deg);
    filter: brightness(8) blur(8px) saturate(2.1) hue-rotate(270deg);
  }
}

@keyframes evo-after-holo {
  0%, 48% {
    opacity: 0;
    transform: scale(0.35) rotate(-20deg);
    filter: brightness(8) blur(10px) saturate(2.1) hue-rotate(170deg);
  }
  62% {
    opacity: 1;
    transform: scale(1.22) rotate(4deg);
    filter: brightness(4.1) saturate(1.8) hue-rotate(210deg) contrast(1.8)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) rgba(255, 255, 255, 1));
  }
  78% {
    opacity: 1;
    transform: scale(0.94) rotate(-2deg);
    filter: brightness(1.58) saturate(1.75) hue-rotate(280deg)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) rgba(255, 180, 240, 0.92));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.18) saturate(1.55) hue-rotate(360deg)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) rgba(255, 238, 150, 0.62))
      drop-shadow(0 28px 30px rgba(0, 0, 0, 0.32));
  }
}

@keyframes evo-before-black-holo {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: grayscale(1) saturate(0) contrast(1.75) brightness(0.58)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.08) rgba(0, 0, 0, 0.95))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) rgba(255, 255, 255, 0.34))
      drop-shadow(0 28px 30px rgba(0, 0, 0, 0.42));
  }
  30% {
    opacity: 1;
    transform: scale(1.06) rotate(-2deg);
    filter: grayscale(1) saturate(0) contrast(2.2) brightness(1.72)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) rgba(255, 255, 255, 0.92))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) rgba(255, 255, 255, 0.5));
  }
  50% {
    opacity: 0.9;
    transform: scale(1.24) rotate(8deg);
    filter: grayscale(1) saturate(0) contrast(2.45) brightness(0.44)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.22) rgba(0, 0, 0, 1))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.22) rgba(255, 255, 255, 0.28));
  }
  62%, 100% {
    opacity: 0;
    transform: scale(0.45) rotate(24deg);
    filter: grayscale(1) saturate(0) contrast(2.6) brightness(0.36) blur(8px);
  }
}

@keyframes evo-after-black-holo {
  0%, 48% {
    opacity: 0;
    transform: scale(0.35) rotate(-20deg);
    filter: grayscale(1) saturate(0) contrast(2.5) brightness(0.34) blur(10px);
  }
  62% {
    opacity: 1;
    transform: scale(1.22) rotate(4deg);
    filter: grayscale(1) saturate(0) contrast(2.2) brightness(1.74)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.28) rgba(255, 255, 255, 0.54));
  }
  78% {
    opacity: 1;
    transform: scale(0.94) rotate(-2deg);
    filter: grayscale(1) saturate(0) contrast(2.35) brightness(0.48)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) rgba(0, 0, 0, 0.96))
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) rgba(255, 255, 255, 0.32));
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: grayscale(1) saturate(0) contrast(1.82) brightness(0.62)
      drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.15) rgba(255, 255, 255, 0.42))
      drop-shadow(0 28px 30px rgba(0, 0, 0, 0.38));
  }
}

@keyframes black-holo-vignette {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  52% { opacity: 0.85; transform: translateX(-50%) scale(0.97); }
  59% { opacity: 0.55; transform: translateX(-50%) scale(1.04); }
  70% { opacity: 0.72; transform: translateX(-50%) scale(1); }
}

@keyframes black-holo-corona {
  0%, 100% {
    opacity: 0.68;
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 0 6px rgba(255, 255, 255, 0.2))
      drop-shadow(0 0 18px rgba(120, 135, 185, 0.14));
  }
  52% {
    opacity: 0.62;
    transform: translateX(-50%) scale(0.985);
    filter:
      drop-shadow(0 0 5px rgba(255, 255, 255, 0.16))
      drop-shadow(0 0 14px rgba(120, 135, 185, 0.1));
  }
  59% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.025);
    filter:
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.34))
      drop-shadow(0 0 22px rgba(150, 165, 215, 0.2));
  }
  68% {
    opacity: 0.72;
    transform: translateX(-50%) scale(1);
    filter:
      drop-shadow(0 0 7px rgba(255, 255, 255, 0.22))
      drop-shadow(0 0 19px rgba(120, 135, 185, 0.14));
  }
}

@keyframes black-holo-disk-spin {
  from { transform: scaleY(0.44) rotate(0deg); }
  to { transform: scaleY(0.44) rotate(360deg); }
}

@keyframes black-holo-disk-flare {
  0%, 100% {
    opacity: 0.84;
    filter: blur(0.5px) drop-shadow(0 0 7px rgba(255, 255, 255, 0.42));
  }
  52% {
    opacity: 0.9;
    filter: blur(0.5px) drop-shadow(0 0 8px rgba(255, 255, 255, 0.48));
  }
  59% {
    opacity: 1;
    filter: blur(0.4px) brightness(1.5) drop-shadow(0 0 14px rgba(255, 255, 255, 0.75)) drop-shadow(0 0 26px rgba(170, 190, 255, 0.55));
  }
  70% {
    opacity: 0.86;
    filter: blur(0.5px) drop-shadow(0 0 8px rgba(255, 255, 255, 0.46));
  }
}

@keyframes black-holo-stardust {
  0% { opacity: 0; transform: rotate(0deg) scale(1.06); }
  12% { opacity: 0.9; }
  70% { opacity: 0.95; }
  100% { opacity: 0; transform: rotate(170deg) scale(0.05); }
}

@keyframes black-holo-card-border {
  to { background-position: 420% 0; }
}

/* Two sheen passes per cycle: a soft one mid-idle, a brilliant one riding the
   wave of light that returns right after the totality flash (59%). */
@keyframes black-holo-foil {
  0% { background-position: 130% 0; opacity: 0; }
  8% { background-position: 112% 0; opacity: 0.55; }
  24% { background-position: -18% 0; opacity: 0.5; }
  30% { background-position: -50% 0; opacity: 0; }
  58% { background-position: 130% 0; opacity: 0; }
  60% { background-position: 118% 0; opacity: 1; }
  72% { background-position: -26% 0; opacity: 0.9; }
  78%, 100% { background-position: -50% 0; opacity: 0; }
}

@keyframes black-holo-iridesce {
  0% { background-position: 0% 0, 0% 0; opacity: 0.13; }
  28% { opacity: 0.28; }
  50% { background-position: 170% 0, -110% 0; opacity: 0.18; }
  76% { opacity: 0.3; }
  100% { background-position: 340% 0, -220% 0; opacity: 0.13; }
}

/* step-end per segment = the bolt sheet frame-steps (and the flicker snaps)
   instead of cross-fading; the strike window rides the totality flash. */
@keyframes black-holo-aura-bolt {
  0%, 55.4% { opacity: 0; background-position: 0% 50%; animation-timing-function: step-end; }
  56% { opacity: 0.95; background-position: 0% 50%; animation-timing-function: step-end; }
  57.2% { opacity: 0.8; background-position: 20% 50%; animation-timing-function: step-end; }
  58.4% { opacity: 1; background-position: 40% 50%; animation-timing-function: step-end; }
  59.6% { opacity: 0.75; background-position: 60% 50%; animation-timing-function: step-end; }
  60.8% { opacity: 0.5; background-position: 80% 50%; animation-timing-function: step-end; }
  62%, 100% { opacity: 0; background-position: 100% 50%; }
}

.combatant.voidbound.shiny-combatant::before,
.combatant.voidbound.shiny-combatant::after,
.combatant.voidbound.black-holo-combatant::before,
.combatant.voidbound.black-holo-combatant .black-holo-aura,
.combatant.voidbound.black-holo-combatant .black-holo-aura::before,
.combatant.voidbound.black-holo-combatant .black-holo-aura::after,
.combatant.voidbound.black-holo-combatant .black-holo-aura .black-holo-aura-bolt {
  opacity: 0;
  animation: none;
}

.combatant.voidbound .sprite-flip img {
  animation: void-suck 660ms cubic-bezier(0.55, 0, 0.75, 0) forwards;
}

.combatant.voidbound .sprite-flip img.shiny-sprite,
.combatant.voidbound .sprite-flip img.black-holo-sprite {
  filter: none;
}

.combatant.voidbound .sprite-flip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  width: 116%;
  height: 116%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: conic-gradient(from 0deg,
    rgba(122,63,176,0) 0deg, rgba(122,63,176,0.5) 90deg,
    rgba(0,0,0,0.62) 180deg, rgba(201,160,255,0.42) 300deg, rgba(122,63,176,0) 360deg);
  mix-blend-mode: screen;
  opacity: 1;
  animation: voidbound-swirl 2.4s linear infinite;
  -webkit-mask: none;
  mask: none;
}

.combatant.voidbound .sprite-flip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  bottom: auto;
  width: 54%;
  height: 54%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, #000 0%, rgba(26,15,46,0.8) 55%, transparent 80%);
  box-shadow: 0 0 22px rgba(122,63,176,0.7), inset 0 0 16px #000;
  opacity: 0.85;
  animation: voidbound-pulse 2.4s ease-in-out infinite;
  -webkit-mask: none;
  mask: none;
}

.combatant.void-release .sprite-flip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  bottom: auto;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle, #000 0%, rgba(26,15,46,0.82) 50%, transparent 78%);
  box-shadow: 0 0 28px rgba(122,63,176,0.72), inset 0 0 16px #000;
  opacity: 0.95;
  animation: void-collapse 560ms cubic-bezier(0.6, 0, 0.4, 1) forwards;
  -webkit-mask: none;
  mask: none;
}

.combatant:has(.shiny-sprite) { isolation: isolate; }

/* The old rotating halo + glyph sparkle motes were anchored to the whole
   combatant STACK (fixed 220px / full-box) — once sprites gained the
   per-side --sprite-drop shift and much larger, variable --sprite-size they
   no longer lined up with the monster, and CSS can't derive the sprite's
   offset inside the stack. They're replaced by the enriched, sprite-locked
   `shiny-glow` aura below (a drop-shadow on the <img> itself, so it tracks
   the silhouette at any size/position) plus the masked sheen above. */

/* (shiny no longer recolours the name — the ✦ sign is enough) */

.holo-star,
.shiny-star {
  display: inline-block;
  margin-left: 4px;
  color: #fff2a8;
  text-shadow: 0 0 8px #ffd76b, 0 0 14px #a9f0ff;
  animation: shiny-star-spin 1.5s ease-in-out infinite;
}

.black-holo-star {
  display: inline-block;
  margin-left: 5px;
  color: transparent;
  background: linear-gradient(135deg, #ffffff, #c8ced8 34%, #05060a 58%, #f6f7fb 78%, #ffffff);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 3px #000,
    0 0 9px rgba(255, 255, 255, 0.74),
    0 0 16px rgba(160, 166, 178, 0.52),
    0 0 20px rgba(0, 0, 0, 0.92);
  animation: black-holo-star-pulse 1.45s ease-in-out infinite;
}

@keyframes shiny-star-spin {
  0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.25) rotate(180deg); opacity: 1; }
}

@keyframes black-holo-star-pulse {
  0%, 100% { transform: scale(0.9) rotate(0deg); background-position: 0% 30%; filter: brightness(0.92); opacity: 0.76; }
  46% { transform: scale(1.28) rotate(45deg); background-position: 100% 70%; filter: brightness(1.46) saturate(0); opacity: 1; }
}

.rare-name,
.ultra-name,
.legendary-name {
  font-weight: 900;
  letter-spacing: 0;
}

.rare-name {
  color: #13715f;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 9px rgba(19, 113, 95, 0.18);
}

.ultra-name {
  display: inline-block;
  background: linear-gradient(95deg, #4f46e5 0%, #0f766e 44%, #7c3aed 72%, #4f46e5 100%);
  background-size: 190% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 7px rgba(79, 70, 229, 0.22));
  animation: ultra-name-sheen 5.8s ease-in-out infinite;
}

.legendary-name {
  display: inline-block;
  background: linear-gradient(96deg, #2b2112 0%, #7c4f12 26%, #d6a83d 48%, #fff0aa 58%, #9a6517 76%, #2b2112 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 8px rgba(214, 168, 61, 0.24));
  animation: legendary-name-sheen 6.5s ease-in-out infinite;
}

.rarity-seal {
  display: inline-flex;
  align-items: center;
  vertical-align: 0.08em;
  margin-left: 6px;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.rarity-seal--rare {
  color: #13715f;
  border-color: rgba(19, 113, 95, 0.38);
  background: rgba(19, 113, 95, 0.08);
}

.rarity-seal--ultra {
  color: #4338ca;
  border-color: rgba(67, 56, 202, 0.34);
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.12), rgba(15, 118, 110, 0.1));
}

.rarity-seal--legendary {
  color: #7c4f12;
  border-color: rgba(124, 79, 18, 0.34);
  background: linear-gradient(90deg, rgba(214, 168, 61, 0.16), rgba(255, 240, 170, 0.26));
}

@keyframes ultra-name-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

@keyframes legendary-name-sheen {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.fainted-tag { color: var(--danger); font-weight: 800; }

/* Cinematic shiny entrance (spawned into the battle fx layer) */
.fx-holo-flash,
.fx-shiny-flash {
  position: absolute;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100%;
  transform: none !important;
  background:
    radial-gradient(circle at 58% 42%, rgba(255, 255, 255, 0.95),
      rgba(170, 235, 255, 0.55) 38%, rgba(255, 180, 240, 0.3) 62%, transparent 80%);
  opacity: 0;
  pointer-events: none;
  animation: shiny-flash 900ms ease-out forwards;
}

/* Black holo reveal: a white-hot core blink that collapses into a dark iris
   over the whole arena (normal blend so the darkness actually lands). */
.fx-black-holo-flash {
  position: absolute;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100%;
  height: 100%;
  transform: none !important;
  background:
    radial-gradient(circle var(--bh-flash-radius, 70vmax) at var(--bh-flash-x, 58%) var(--bh-flash-y, 42%), rgba(255, 255, 255, 0.98), rgba(220, 232, 255, 0.6) 14%, rgba(8, 10, 18, 0.72) 34%, rgba(4, 5, 10, 0.46) 56%, transparent 82%),
    radial-gradient(circle var(--bh-flash-radius, 70vmax) at var(--bh-flash-x, 58%) var(--bh-flash-y, 42%), transparent 0 16%, rgba(255, 255, 255, 0.85) 17.5%, rgba(190, 205, 255, 0.36) 20%, transparent 25%),
    conic-gradient(from 132deg at var(--bh-flash-x, 58%) var(--bh-flash-y, 42%), rgba(255, 255, 255, 0.14), rgba(125, 240, 255, 0.1), rgba(255, 255, 255, 0.02), rgba(255, 150, 250, 0.1), rgba(255, 255, 255, 0.15), rgba(150, 170, 255, 0.08), rgba(255, 255, 255, 0.14));
  opacity: 0;
  pointer-events: none;
  animation: black-holo-flash 1300ms ease-out forwards;
}

@keyframes shiny-flash {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-holo-orbit,
.fx-shiny-orbit {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor, 0 0 4px #fff;
  animation: shiny-orbit 1350ms ease-out forwards;
}

.fx-black-holo-orbit {
  width: 11px;
  height: 11px;
  background: currentColor;
  border-radius: 3px;
  box-shadow: 0 0 16px currentColor, 0 0 8px #ffffff, 0 0 12px #aab0bc, 0 0 4px #fff, 0 0 3px #000;
  animation: black-holo-orbit 860ms cubic-bezier(0.5, 0, 0.82, 0.44) forwards;
}

/* The reveal's gravitational collapse: rings crush inward onto the monster. */
.fx-black-holo-implode-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent !important;
  border: 2px solid currentColor;
  box-shadow: 0 0 16px currentColor, inset 0 0 9px rgba(255, 255, 255, 0.55);
  animation: black-holo-implode-ring 740ms cubic-bezier(0.55, 0, 0.8, 0.42) forwards;
}

/* One single dramatic lightning strike when the collapse detonates (the old
   constant lightning storm is gone — the sheet now fires exactly once). */
.fx-black-holo-bolt {
  width: 260px;
  height: 260px;
  background: url("assets/effects/black-holo-eclipse-lightning-sheet.png?v=black-holo-eclipse-bolts-1") 0% 50% / 600% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  filter:
    brightness(1.6)
    contrast(1.12)
    drop-shadow(0 0 6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 20px rgba(190, 205, 255, 0.65));
  animation:
    black-holo-bolt-flash 480ms ease-out forwards,
    black-holo-bolt-sheet 480ms steps(5, end) forwards;
}

.fx-diamond {
  width: 9px;
  height: 9px;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 0 12px currentColor, 0 0 4px #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: burst-out 780ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

@keyframes shiny-orbit {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(8px) scale(0.4); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--a) + 320deg)) translateX(82px) scale(1.15); }
}

@keyframes black-holo-flash {
  0% { opacity: 0; filter: brightness(1.5) contrast(1); }
  9% { opacity: 1; filter: brightness(1.9) contrast(1.25); }
  24% { opacity: 0.92; filter: brightness(1.15) contrast(1.45) saturate(1.25); }
  48% { opacity: 0.68; filter: grayscale(1) brightness(0.66) contrast(1.85); }
  72% { opacity: 0.32; filter: grayscale(0.6) brightness(0.85) contrast(1.4); }
  100% { opacity: 0; filter: brightness(1) contrast(1); }
}

/* Reveal particles spiral INTO the monster (light being devoured), instead of
   the usual outward sparkle — the detonation afterwards throws the rest out. */
@keyframes black-holo-orbit {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(134px) rotate(45deg) scale(1.25); }
  14%  { opacity: 1; }
  74%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--a) - 300deg)) translateX(3px) rotate(390deg) scale(0.16); }
}

@keyframes black-holo-implode-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(10.5); }
  16% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.22); }
}

@keyframes black-holo-bolt-flash {
  0% { opacity: 0; }
  8% { opacity: 1; }
  68% { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes black-holo-bolt-sheet {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

/* Kept: the online prestige-max remote-player aura still steps through the
   lightning sheet with these keyframes. */
@keyframes black-holo-lightning-sheet {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .shiny-sprite,
  .holo-sprite,
  .black-holo-sprite,
  .shiny-star,
  .holo-star,
  .black-holo-star,
  .ultra-name,
  .rare-name,
  .legendary-name,
  .shiny-sprite,
  .combatant.shiny-combatant .sprite-flip,
  .combatant.shiny-combatant .combat-card::before,
  .combatant.shiny-combatant::before,
  .combatant.shiny-combatant::after,
  .combatant.shiny-combatant .sprite-flip::before,
  .combatant:has(.shiny-sprite) .sprite-flip::before,
  .combatant.black-holo-combatant .sprite-flip,
  .combatant.black-holo-combatant .combat-card::before,
  .combatant.black-holo-combatant::before,
  .combatant.black-holo-combatant .black-holo-aura,
  .combatant.black-holo-combatant .black-holo-aura::before,
  .combatant.black-holo-combatant .black-holo-aura::after,
  .combatant.black-holo-combatant .black-holo-aura .black-holo-aura-bolt,
  .combatant:has(.shiny-sprite) .sprite-flip::after,
  .combatant.black-holo-combatant .sprite-flip::before,
  .combatant.black-holo-combatant .sprite-flip::after,
  .black-holo-rim,
  .tainted-sprite-aura,
  .tainted-sprite-aura::after { animation: none; }
  .combatant:is(.tainted-combatant, .holo-combatant, .black-holo-combatant).fainting .sprite-flip,
  .combatant:is(.tainted-combatant, .holo-combatant, .black-holo-combatant).fainting .sprite-flip.battle-anim {
    animation: effect-bearing-monster-faint-reduced 320ms ease-out forwards;
  }
  .combatant.holo-combatant.fainting::after,
  .combatant.black-holo-combatant.fainting::before,
  .combatant.black-holo-combatant.fainting .black-holo-aura {
    animation: effect-bearing-monster-faint-reduced 320ms ease-out forwards;
  }
  .combatant.shiny-combatant::before { opacity: 0.82; }
  .combatant.shiny-combatant::after,
  .combatant:has(.shiny-sprite) .sprite-flip::after,
  .tainted-sprite-aura { opacity: 0.58; }
  .tainted-sprite-aura::after { opacity: 0.42; }
  .combatant.black-holo-combatant::before { opacity: 0.45; }
  .combatant.black-holo-combatant .black-holo-aura { opacity: 0.68; }
  .combatant.black-holo-combatant .black-holo-aura::before { opacity: 0.45; }
  .combatant.black-holo-combatant .black-holo-aura::after { opacity: 0; }
  .black-holo-rim { opacity: 0.24; }
}

@keyframes effect-bearing-monster-faint-reduced {
  to { opacity: 0; }
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .shell {
    min-height: auto;
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .side-panel { grid-template-columns: 1fr; }

  .combatant { --sprite-size: var(--sprite-size-mobile, 120px); --sprite-width: var(--sprite-width-mobile, var(--sprite-size)); --sprite-drop: var(--sprite-drop-mobile, 0px); gap: 16px; }

  .combatant .combat-card { width: min(220px, 70vw); }

  .combatant.enemy {
    top: clamp(8px, 16px, calc(100% - var(--sprite-size) - 154px));
    right: 16px;
  }
  .combatant.enemy:has(.team-dots:not(.hidden)) {
    top: clamp(30px, 46px, calc(100% - var(--sprite-size) - 160px));
  }
  .combatant.player {
    left: 16px;
    bottom: clamp(8px, 14px, calc(100% - var(--sprite-size) - 172px));
  }
  .combatant.raid-buddy {
    right: 16px;
    bottom: clamp(8px, 14px, calc(100% - var(--sprite-size) - 172px));
  }

  .combatant img,
  .combatant.player img,
  .combatant.raid-buddy img {
    width: var(--sprite-width);
    height: var(--sprite-size);
  }

  .battle-console { grid-template-columns: 1fr; }

  #battleLog {
    border-right: none;
    border-bottom: 1px solid var(--panel-line);
    padding: 0 0 10px;
    min-height: 44px;
  }
}

/* Battle framing uses a fixed 640x480 layout scaled onto the map viewport, so
   the scene and controls keep the same proportions as the map grows/shrinks. */
.battle .combatant {
  --sprite-size: var(--sprite-size-desktop, 158px);
  --sprite-width: var(--sprite-width-desktop, var(--sprite-size));
  --sprite-drop: 0px;
  gap: 16px;
}
.battle .battle-console {
  width: var(--battle-console-width);
  height: var(--battle-console-base-height);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 0;
  padding: 0;
  overflow: visible;
}

.fx-layer.fx-black-holo .fx-spark {
  display: none !important;
}
.battle .live-battle-roster {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 10;
  box-sizing: border-box;
  width: 600px;
  max-width: calc(var(--battle-frame-width) - 24px);
  display: grid;
  gap: 2px;
  padding: 5px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18, 27, 43, 0.9), rgba(8, 13, 24, 0.94));
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.3);
  color: #f5f8ff;
  font-size: 0.55rem;
  line-height: 1.25;
  pointer-events: none;
}
.battle .live-battle-roster span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.battle .live-battle-turn-banner {
  --live-turn-accent: #8bd6ff;
  --live-turn-progress: 1;
  --live-turn-card-width: 188px;
  --live-turn-card-gutter: 6px;
  position: absolute;
  top: var(--battle-card-top-gap);
  left: calc(var(--battle-info-card-edge-gap) + var(--live-turn-card-width) + var(--live-turn-card-gutter));
  right: calc(var(--battle-info-card-edge-gap) + var(--live-turn-card-width) + var(--live-turn-card-gutter));
  z-index: 32;
  box-sizing: border-box;
  width: auto;
  min-height: 48px;
  padding: 7px 43px 8px 10px;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--live-turn-accent) 72%, white 12%);
  border-radius: 8px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--live-turn-accent) 20%, transparent), transparent 48%),
    linear-gradient(180deg, rgba(9, 17, 31, 0.96), rgba(4, 9, 18, 0.94));
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.46),
    0 0 16px color-mix(in srgb, var(--live-turn-accent) 26%, transparent),
    inset 3px 0 0 var(--live-turn-accent);
  color: #f8fbff;
  font-family: var(--font-ui, inherit);
  line-height: 1.08;
  pointer-events: none;
  animation: live-turn-banner-in 180ms ease-out both;
}
.battle .live-battle-turn-banner.is-your-turn { --live-turn-accent: #6fffc4; }
.battle .live-battle-turn-banner.is-ally-turn { --live-turn-accent: #6cc8ff; }
.battle .live-battle-turn-banner.is-enemy-turn { --live-turn-accent: #ff8a77; }
.battle .live-battle-turn-banner.is-resolving { --live-turn-accent: #ffd36f; }
.battle .live-battle-turn-kicker {
  color: var(--live-turn-accent);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.battle .live-battle-turn-banner strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}
.battle .live-battle-turn-timer {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 32px;
  padding: 5px 1px;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--live-turn-accent) 58%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--live-turn-accent) 14%, rgba(3, 7, 14, 0.88));
  color: var(--live-turn-accent);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.02em;
  text-align: center;
}
.battle .live-battle-turn-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  transform: scaleX(var(--live-turn-progress));
  transform-origin: left center;
  background: var(--live-turn-accent);
  box-shadow: 0 0 8px var(--live-turn-accent);
  transition: transform 180ms linear;
}
.battle.live-battle-your-turn .battle-stage {
  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, 0.3),
    inset 0 0 0 3px rgba(111, 255, 196, 0.78),
    inset 0 0 34px rgba(111, 255, 196, 0.15);
}
.battle.live-battle-resolving .live-battle-turn-banner {
  animation: live-turn-banner-in 180ms ease-out both, live-turn-resolving-pulse 900ms ease-in-out infinite alternate;
}
@keyframes live-turn-banner-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes live-turn-resolving-pulse {
  from { filter: brightness(0.94); }
  to { filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .battle .live-battle-turn-banner,
  .battle.live-battle-resolving .live-battle-turn-banner {
    animation: none;
  }
}
.battle #battleLog {
  display: none;
}
.battle .combatant .combat-card {
  width: 188px;
  max-width: 188px;
  padding: 7px 9px;
}
.battle .combatant.enemy .combat-card {
  position: absolute;
  top: calc(var(--sprite-size) - 390px + var(--battle-card-top-gap) + var(--enemy-stage-bottom-extra, 0px));
  right: calc(var(--battle-info-card-edge-gap) - var(--battle-enemy-stack-right) - var(--enemy-stage-right-extra, 0px));
}
.battle .combat-name {
  gap: 6px;
  margin-bottom: 5px;
}
.battle .combat-name strong {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: normal;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.battle .lv-pill {
  padding: 2px 7px;
  font-size: 0.58rem;
}
.battle .combat-card small {
  margin: 2px 0 4px 30px;
  font-size: 0.58rem;
}
.battle .hp-bar { height: 8px; }
.battle .exp-bar { height: 4px; }
.battle .combatant.player .combat-card .exp-text { display: none; }
.battle .bar-tag {
  width: 23px;
  font-size: 0.52rem;
}
.battle .combatant.enemy {
  top: auto;
  right: calc(var(--battle-enemy-stack-right) + var(--enemy-stage-right-extra, 0px));
  bottom: calc(90px + var(--enemy-stage-bottom-extra, 0px));
}
.battle .combatant.enemy:has(.team-dots:not(.hidden)) {
  top: auto;
  bottom: calc(90px + var(--enemy-stage-bottom-extra, 0px));
}
.battle .combatant.enemy .team-dots {
  top: calc(var(--sprite-size) - 308px);
  right: 0;
}
.battle .combatant.player {
  --sprite-size: var(--sprite-size-desktop, 158px);
  --sprite-fx-rise: -30px;
  left: calc(var(--battle-player-stack-left) + var(--player-stage-left-extra, 0px));
  bottom: 90px;
}
.battle .combatant.raid-buddy {
  --sprite-size: var(--sprite-size-desktop, 132px);
  --sprite-fx-rise: -30px;
  right: var(--battle-player-stack-left);
  bottom: 86px;
}
.battle .combatant.player .combat-card {
  position: absolute;
  top: calc(var(--sprite-size) + var(--sprite-drop, 0px) - 390px + var(--battle-card-top-gap));
  left: calc(var(--battle-info-card-edge-gap) - var(--battle-player-stack-left) - var(--player-stage-left-extra, 0px));
}
.battle .combatant.raid-buddy .combat-card {
  position: absolute;
  top: calc(var(--sprite-size) - 382px + var(--battle-card-top-gap));
  right: calc(var(--battle-info-card-edge-gap) - var(--battle-player-stack-left));
}
.battle.battle-raid-group .combatant.player {
  --sprite-size: min(var(--sprite-size-desktop, 132px), 132px);
  left: calc(32px + var(--player-stage-left-extra, 0px));
  bottom: 78px;
}
.battle.battle-raid-group .combatant.raid-buddy {
  --sprite-size: min(var(--sprite-size-desktop, 96px), 96px);
  right: auto;
  left: 176px;
  bottom: 76px;
  z-index: 2;
}
.battle.battle-raid-group .combatant.raid-buddy-2 {
  left: 266px;
  bottom: 116px;
}
.battle.battle-raid-group .combatant.raid-buddy-3 {
  left: 356px;
  bottom: 84px;
}
.battle.battle-raid-group .combatant.raid-buddy .combat-card {
  display: none;
}
.battle.battle-raid-group .combatant.raid-buddy .sprite-flip {
  top: -18px;
  transform: scaleX(-1);
}
.battle.battle-raid-group .combatant.raid-buddy.face-right .sprite-flip {
  transform: none;
}
.battle.battle-raid-group.battle-raid-pair .combatant.player,
.battle.battle-raid-group.battle-raid-pair .combatant.raid-buddy {
  --sprite-size: min(var(--sprite-size-desktop, 132px), 132px);
  --sprite-width: min(var(--sprite-width-desktop, 132px), 148px);
  bottom: 90px;
}
.battle.battle-raid-group.battle-raid-pair .combatant.player {
  left: calc(var(--battle-player-stack-left) + var(--player-stage-left-extra, 0px));
}
.battle.battle-raid-group.battle-raid-pair .combatant.raid-buddy { left: 202px; }
.battle.battle-raid-group.battle-raid-pair .combatant.raid-buddy .sprite-flip {
  top: -30px;
}
/* Stone Crown's oversized Noxavyr silhouette reaches far into the friendly
   half of the two-player stage. Lower only the two friendly sprites, leaving
   their status cards and every other raid layout on the shared baseline. */
.battle.battle-raid-group.battle-raid-pair:has(#enemyImg[alt="Noxavyr"]) .combatant.player .sprite-flip,
.battle.battle-raid-group.battle-raid-pair:has(#enemyImg[alt="Noxavyr"]) .combatant.raid-buddy .sprite-flip {
  top: 0;
}
.battle.battle-colosseum-duo {
  --duo-card-edge: 16px;
  --duo-card-gap: 8px;
  --duo-card-width: 148px;
  --duo-enemy-card-top: 38px;
  --duo-player-card-bottom: 16px;
}
.battle.battle-colosseum-duo .live-battle-turn-banner {
  top: var(--duo-enemy-card-top);
  right: auto;
  left: var(--duo-card-edge);
  width: calc(var(--duo-card-width) * 2 + var(--duo-card-gap) - var(--live-turn-card-gutter));
}
.battle.battle-colosseum-duo .combatant.player,
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy),
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player,
.battle.battle-colosseum-duo .combatant.duo-enemy:not(.hidden) {
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  display: block;
  gap: 0;
}
.battle.battle-colosseum-duo .combatant.player {
  --sprite-size: min(var(--sprite-size-desktop, 136px), 150px);
  --sprite-width: min(var(--sprite-width-desktop, 136px), 158px);
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player {
  --sprite-size: min(var(--sprite-size-desktop, 118px), 124px);
  --sprite-width: min(var(--sprite-width-desktop, 118px), 132px);
  z-index: 2;
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy) {
  --sprite-size: min(var(--sprite-size-desktop, 136px), 150px);
  --sprite-width: min(var(--sprite-width-desktop, 136px), 158px);
}
.battle.battle-colosseum-duo .combatant.duo-enemy {
  --sprite-size: min(var(--sprite-size-desktop, 118px), 124px);
  --sprite-width: min(var(--sprite-width-desktop, 118px), 132px);
  z-index: 2;
}
.battle.battle-colosseum-duo .combatant .sprite-flip {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
.battle.battle-colosseum-duo .combatant.player .sprite-flip {
  left: calc(34px + var(--player-stage-left-extra, 0px));
  bottom: 78px;
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player .sprite-flip {
  left: 194px;
  bottom: 70px;
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy) .sprite-flip {
  top: calc(var(--duo-enemy-card-top) + 48px);
  right: var(--duo-card-edge);
  left: auto;
  width: var(--duo-card-width);
}
.battle.battle-colosseum-duo .combatant.duo-enemy .sprite-flip {
  top: calc(var(--duo-enemy-card-top) + 48px);
  right: calc(var(--duo-card-edge) + var(--duo-card-width) + var(--duo-card-gap));
  left: auto;
  width: var(--duo-card-width);
}
.battle.battle-colosseum-duo .combatant .combat-card {
  width: var(--duo-card-width);
  max-width: var(--duo-card-width);
  padding: 5px 7px;
  border-radius: 7px;
}
.battle.battle-colosseum-duo .combatant .combat-name {
  gap: 4px;
  margin-bottom: 4px;
  min-width: 0;
}
.battle.battle-colosseum-duo .combatant .combat-name strong {
  min-width: 0;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}
.battle.battle-colosseum-duo .combatant .lv-pill {
  padding: 1px 5px;
  font-size: 0.52rem;
}
.battle.battle-colosseum-duo .combatant .bar-tag {
  width: 18px;
  font-size: 0.48rem;
}
.battle.battle-colosseum-duo .combatant .hp-bar {
  height: 6px;
}
.battle.battle-colosseum-duo .combatant .combat-card small {
  display: none;
}
.battle.battle-colosseum-duo .combatant.player .combat-card .bar-row:has(.bar-tag.exp) {
  display: none;
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player .sprite-flip {
  transform: scaleX(-1);
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player.face-right .sprite-flip {
  transform: none;
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player .combat-card {
  top: auto;
  right: auto;
  bottom: var(--duo-player-card-bottom);
  left: calc(var(--duo-card-edge) + var(--duo-card-width) + var(--duo-card-gap));
}
.battle.battle-colosseum-duo .combatant.player .combat-card {
  top: auto;
  bottom: var(--duo-player-card-bottom);
  left: var(--duo-card-edge);
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy) .combat-card {
  top: var(--duo-enemy-card-top);
  right: var(--duo-card-edge);
}
.battle.battle-colosseum-duo .combatant.duo-enemy .combat-card {
  top: var(--duo-enemy-card-top);
  right: calc(var(--duo-card-edge) + var(--duo-card-width) + var(--duo-card-gap));
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy) .team-dots {
  top: 6px;
  right: var(--duo-card-edge);
}
.battle.battle-colosseum-duo .combatant.player.shiny-combatant::before,
.battle.battle-colosseum-duo .combatant.player.shiny-combatant::after {
  left: calc(34px + var(--player-stage-left-extra, 0px) + var(--sprite-size) * 0.5);
  bottom: calc(78px - var(--sprite-size) * 0.11);
  top: auto;
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player.shiny-combatant::before,
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player.shiny-combatant::after {
  left: calc(194px + var(--sprite-size) * 0.5);
  bottom: calc(70px - var(--sprite-size) * 0.11);
  top: auto;
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy).shiny-combatant::before,
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy).shiny-combatant::after {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.11);
  bottom: auto;
}
.battle.battle-colosseum-duo .combatant.duo-enemy.shiny-combatant::before,
.battle.battle-colosseum-duo .combatant.duo-enemy.shiny-combatant::after {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) - var(--duo-card-gap) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.11);
  bottom: auto;
}
.battle.battle-colosseum-duo .combatant.player.black-holo-combatant::before {
  left: calc(34px + var(--player-stage-left-extra, 0px) + var(--sprite-size) * 0.5);
  top: auto;
  bottom: calc(78px - var(--sprite-size) * 0.16);
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player.black-holo-combatant::before {
  left: calc(194px + var(--sprite-size) * 0.5);
  top: auto;
  bottom: calc(70px - var(--sprite-size) * 0.16);
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy).black-holo-combatant::before {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.16);
  bottom: auto;
}
.battle.battle-colosseum-duo .combatant.duo-enemy.black-holo-combatant::before {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) - var(--duo-card-gap) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.16);
  bottom: auto;
}
.battle.battle-colosseum-duo .combatant.player .black-holo-aura {
  left: calc(34px + var(--player-stage-left-extra, 0px) + var(--sprite-size) * 0.5);
  top: auto;
  bottom: calc(78px - var(--sprite-size) * 0.16);
}
.battle.battle-colosseum-duo .combatant.raid-buddy.duo-player .black-holo-aura {
  left: calc(194px + var(--sprite-size) * 0.5);
  top: auto;
  bottom: calc(70px - var(--sprite-size) * 0.16);
}
.battle.battle-colosseum-duo .combatant.enemy:not(.duo-enemy) .black-holo-aura {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.04);
  bottom: auto;
}
.battle.battle-colosseum-duo .combatant.duo-enemy .black-holo-aura {
  left: calc(100% - var(--duo-card-edge) - var(--duo-card-width) - var(--duo-card-gap) - var(--duo-card-width) * 0.5);
  top: calc(var(--duo-enemy-card-top) + 48px - var(--sprite-size) * 0.04);
  bottom: auto;
}
.battle .combatant .sprite-flip {
  top: -30px;
}
.battle .combatant.enemy .sprite-flip {
  top: -30px;
  left: 0;
}
.battle .combatant img,
.battle .combatant.player img,
.battle .combatant.raid-buddy img {
  width: var(--sprite-width);
  height: var(--sprite-size);
}
.battle .combatant .sprite-flip.battle-anim img {
  width: var(--battle-anim-sheet-width, var(--sprite-width, var(--sprite-size)));
  max-width: none;
  height: var(--sprite-size);
}

.battle .battle-console {
  background: linear-gradient(180deg, rgba(22, 28, 44, 0.58), rgba(8, 12, 22, 0.72));
  border-color: rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
}
.battle .move-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 9px 0 0 9px;
}
.battle.battle-safari .move-buttons {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.battle .move-button:nth-child(1) { grid-column: 1; grid-row: 1; }
.battle .move-button:nth-child(2) { grid-column: 1; grid-row: 2; }
.battle .move-button:nth-child(3) { grid-column: 2; grid-row: 1; }
.battle .move-button:nth-child(4) { grid-column: 2; grid-row: 2; }
.battle.battle-safari .move-button {
  grid-column: auto;
  grid-row: auto;
}
.battle.battle-safari .move-button {
  padding-right: 7px;
}
.battle.battle-safari .move-button span {
  font-size: 0.62rem;
}
.battle.battle-safari .move-button small {
  display: block;
  white-space: normal;
  overflow: visible;
  line-height: 1.12;
}
.battle .move-buttons button {
  min-height: 0;
}
.battle-console button,
.battle-console button * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
.battle-console button {
  touch-action: manipulation;
}
.battle .move-button {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: center;
  gap: 3px;
  align-content: center;
  padding: 4px 9px 4px 18px;
  border-left-width: 2px;
  border-left-style: solid;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
.battle .move-button + .move-button {
  border-top: 0;
}
.battle .move-button:nth-child(1),
.battle .move-button:nth-child(2) {
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}
.battle .move-button:nth-child(2),
.battle .move-button:nth-child(4) {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.battle.battle-safari .move-button {
  border-right: 0;
}
.battle.battle-safari .move-button + .move-button {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.battle .move-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.055);
  transform: none;
}
.battle .move-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.battle .move-button:active {
  transform: none;
}
.battle .move-button::before {
  left: 5px;
  top: 50%;
  width: auto;
  height: auto;
  transform: translateY(-50%);
  color: rgba(246, 251, 255, 0.66);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.46rem;
  font-weight: 800;
  line-height: 1;
}
.battle .move-button span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1;
}
.battle .move-button small {
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  color: rgba(214, 224, 238, 0.76);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}
.battle .move-button small em,
.battle .move-button small b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
}
.battle .move-button small em {
  max-width: 58px;
  color: rgba(255, 255, 255, 0.72);
  font-style: normal;
}
.battle .move-button small b {
  color: rgba(255, 255, 255, 0.56);
}
.battle .move-button.move-good,
.battle .move-button.move-great {
  border-left-width: 3px;
  animation: none;
  transform: none;
}
.battle .move-button.move-good {
  background: linear-gradient(90deg, rgba(255, 199, 68, 0.14), transparent 62%);
  box-shadow: inset 0 0 12px rgba(255, 199, 68, 0.13);
}
.battle .move-button.move-great {
  background: linear-gradient(90deg, rgba(255, 82, 54, 0.16), transparent 62%);
  box-shadow: inset 0 0 12px rgba(255, 82, 54, 0.15);
}
.battle .move-button.move-target-all {
  background:
    linear-gradient(90deg, rgba(67, 197, 176, 0.16), transparent 66%),
    radial-gradient(80% 120% at 100% 50%, rgba(255, 255, 255, 0.08), transparent 62%);
}
.battle .move-button.move-target-all small em {
  max-width: none;
  padding: 1px 5px;
  border-radius: 4px;
  color: #a9fff0;
  background: rgba(127, 244, 220, 0.13);
  box-shadow: inset 0 0 0 1px rgba(127, 244, 220, 0.34);
  line-height: 1;
}
.battle .move-buttons.battle-utility-grid .battle-utility-button {
  border-left-color: rgba(180, 205, 235, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}
.battle .move-buttons.battle-utility-grid .battle-utility-button span {
  font-size: 0.66rem;
}
.battle .move-buttons.battle-utility-grid .battle-utility-button small {
  font-size: 0.5rem;
}
.battle .move-buttons.battle-utility-grid .battle-utility-button small b {
  display: none;
}
.battle .move-buttons.battle-utility-grid .battle-utility-button:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.075);
}
.battle .battle-actions {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  min-width: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 0 9px 9px 0;
  overflow: hidden;
}
.battle #battleBugBtn {
  position: absolute;
  left: calc(var(--battle-touch-edge, 8px) + env(safe-area-inset-left, 0px));
  bottom: max(var(--battle-touch-edge, 8px), env(safe-area-inset-bottom));
  z-index: 18;
  display: none;
  width: min(var(--battle-touch-left-width, 112px), 132px);
  height: 42px;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.88);
  background: linear-gradient(180deg, rgba(22, 28, 44, 0.72), rgba(8, 12, 22, 0.82));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
}
.battle .battle-actions #switchBtn,
.battle .battle-actions #runBtn {
  display: none;
}
.battle .battle-actions button {
  min-height: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.battle .battle-actions #catchBtn,
.battle .battle-actions #potionBtn,
.battle .battle-actions #switchBtn,
.battle .battle-actions #runBtn {
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border: 0;
}
.battle .battle-actions button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.battle .battle-actions #potionBtn {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.battle .battle-actions button:hover:not(:disabled),
.battle .battle-actions button.is-open {
  background: rgba(255, 255, 255, 0.07);
}
.battle .battle-actions #catchBtn:hover:not(:disabled),
.battle .battle-actions #potionBtn:hover:not(:disabled),
.battle .battle-actions #catchBtn.is-open,
.battle .battle-actions #potionBtn.is-open,
.battle #battleBugBtn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
}
.battle .battle-actions button:active {
  transform: none;
}
.battle .battle-actions button span,
.battle .battle-actions button small,
.battle #battleBugBtn span,
.battle #battleBugBtn small {
  display: none;
}
.battle .battle-actions button::before,
.battle #battleBugBtn::before {
  content: "";
  position: static;
  width: 18px;
  height: 18px;
  display: block;
  border: 1.5px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}
.battle .battle-actions #catchBtn::before {
  background: linear-gradient(
    to bottom,
    transparent calc(50% - 0.75px),
    rgba(255, 255, 255, 0.72) calc(50% - 0.75px),
    rgba(255, 255, 255, 0.72) calc(50% + 0.75px),
    transparent calc(50% + 0.75px)
  );
}
.battle .battle-actions #catchBtn::after,
.battle .battle-actions #potionBtn::after,
.battle #battleBugBtn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}
.battle .battle-actions #catchBtn::after {
  width: 6px;
  height: 6px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(10, 14, 24, 0.88);
  transform: translate(-50%, -50%);
  box-shadow: none;
  border-radius: 50%;
}
.battle .battle-actions #potionBtn::after {
  width: 9px;
  height: 9px;
  background:
    linear-gradient(to right, transparent calc(50% - 0.7px), rgba(255, 255, 255, 0.76) calc(50% - 0.7px), rgba(255, 255, 255, 0.76) calc(50% + 0.7px), transparent calc(50% + 0.7px)),
    linear-gradient(to bottom, transparent calc(50% - 0.7px), rgba(255, 255, 255, 0.76) calc(50% - 0.7px), rgba(255, 255, 255, 0.76) calc(50% + 0.7px), transparent calc(50% + 0.7px));
  transform: translate(-50%, -50%);
}
.battle .battle-actions #potionBtn.is-open::after {
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  transform: translate(-50%, -50%);
}
.battle #battleBugBtn::before {
  border-radius: 45% 45% 38% 38%;
  background:
    radial-gradient(circle at 35% 38%, rgba(255, 255, 255, 0.84) 0 1.5px, transparent 2px),
    radial-gradient(circle at 65% 38%, rgba(255, 255, 255, 0.84) 0 1.5px, transparent 2px),
    linear-gradient(to bottom, transparent calc(50% - 0.7px), rgba(255, 255, 255, 0.74) calc(50% - 0.7px), rgba(255, 255, 255, 0.74) calc(50% + 0.7px), transparent calc(50% + 0.7px));
}
.battle #battleBugBtn::after {
  width: 16px;
  height: 12px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.72);
  border-right: 1.5px solid rgba(255, 255, 255, 0.72);
  transform: translate(-50%, -50%);
}
.battle #battleBugBtn.is-recording {
  background: linear-gradient(180deg, rgba(242, 93, 101, 0.88), rgba(168, 21, 35, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 18px rgba(255, 92, 105, 0.36);
}
.battle-action-menu {
  position: absolute;
  right: -104px;
  bottom: 0;
  z-index: 14;
  width: 96px;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(22, 28, 44, 0.78), rgba(8, 12, 22, 0.86));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.battle-action-menu button {
  min-height: 28px;
  padding: 3px 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(245, 249, 255, 0.92);
  text-align: left;
}
.battle-action-menu button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.battle-action-menu button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}
.battle-action-menu span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.58rem;
  font-weight: 850;
}
.battle-action-menu small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.48rem;
  font-weight: 800;
}

html:not(.is-touch) .playfield:has(#battle:not(.hidden)) {
  overflow: visible;
}

html:not(.is-touch) .battle {
  overflow: visible;
  background: transparent;
}

html:not(.is-touch) .battle-stage {
  border-radius: 8px;
}

html:not(.is-touch) .battle .battle-console {
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  grid-template-rows: 1fr;
  gap: 5px;
  overflow: visible;
  border-radius: 8px;
}

html:not(.is-touch) .battle .move-buttons,
html:not(.is-touch) .battle .move-buttons.battle-utility-grid {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 1fr;
  border-radius: 7px;
}

html:not(.is-touch) .battle.battle-safari .move-buttons {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

html:not(.is-touch) .battle .move-button:nth-child(1),
html:not(.is-touch) .battle .move-button:nth-child(2),
html:not(.is-touch) .battle .move-button:nth-child(3),
html:not(.is-touch) .battle .move-button:nth-child(4) {
  grid-column: auto;
  grid-row: 1;
  border-top: 0;
}

html:not(.is-touch) .battle .move-button:nth-child(1),
html:not(.is-touch) .battle .move-button:nth-child(2),
html:not(.is-touch) .battle .move-button:nth-child(3) {
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

html:not(.is-touch) .battle.battle-safari .move-button:nth-child(1) {
  border-right: 1px solid rgba(255, 255, 255, 0.09);
}

html:not(.is-touch) .battle.battle-safari .move-button:nth-child(2) {
  border-right: 0;
}

html:not(.is-touch) .battle .move-button {
  padding-left: 17px;
}

html:not(.is-touch) .battle .move-button span {
  font-size: 0.6rem;
}

html:not(.is-touch) .battle .move-button small {
  font-size: 0.47rem;
}

html:not(.is-touch) .battle .battle-actions {
  display: contents;
  border-left: 0;
  border-radius: 0;
  overflow: visible;
}

html:not(.is-touch) .battle .battle-actions #catchBtn,
html:not(.is-touch) .battle .battle-actions #potionBtn {
  width: 34px;
  height: 100%;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

html:not(.is-touch) .battle .battle-actions #catchBtn {
  grid-column: 1;
  grid-row: 1;
}

html:not(.is-touch) .battle .battle-actions #potionBtn {
  grid-column: 3;
  grid-row: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

html:not(.is-touch) .battle .battle-actions button + button {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

html:not(.is-touch) .battle .battle-action-menu {
  right: 0;
  bottom: calc(100% + 6px);
  width: 108px;
}

@media (max-width: 560px) {
  .starter-grid,
  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .combat-card { padding: 9px; }
  .combatant { gap: 14px; }
  .detail-head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ---- Arena seal gallery ---- */
.seal-modal { max-width: 640px; }

.seal-award {
  position: relative;
  overflow: hidden;
  max-width: 430px;
  text-align: center;
  border-color: rgba(240, 212, 106, 0.38);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 233, 168, 0.24), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--panel);
}

.seal-award-rays {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    rgba(255, 233, 168, 0.16), transparent 16deg,
    rgba(125, 240, 255, 0.12) 30deg, transparent 46deg);
  opacity: 0.9;
  animation: seal-award-spin 8s linear infinite;
}

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

.seal-award-icon {
  position: relative;
  width: 172px;
  height: 172px;
  object-fit: contain;
  margin: 4px auto 8px;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 18px rgba(255, 233, 168, 0.55));
  animation: seal-award-pop 780ms cubic-bezier(0.2, 1.45, 0.34, 1) both, seal-award-float 2.8s ease-in-out 800ms infinite;
}

@keyframes seal-award-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.5) rotate(-16deg); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes seal-award-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

.seal-award-kicker {
  position: relative;
  margin: 0 0 4px;
  color: #ffe9a8;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seal-award h2,
.seal-award p,
.seal-award .dialogue-actions { position: relative; }

.seal-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 6px;
}

.seal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  background: rgba(13, 17, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease;
}

.seal-card.earned {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(20, 26, 36, 0.86);
}

.seal-card.earned:hover { transform: translateY(-3px); }

.seal-card.locked { filter: saturate(0.5); }

.seal-no {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}

.seal-medal {
  width: 112px;
  height: 112px;
  image-rendering: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.38));
}

.seal-card.locked .seal-medal {
  filter: grayscale(1) brightness(0.42) opacity(0.45);
}

.seal-card strong {
  font-size: 14px;
  font-weight: 800;
  margin-top: 2px;
}

.seal-card.locked strong { color: rgba(233, 240, 247, 0.55); }

.seal-arena {
  font-size: 11.5px;
  color: rgba(233, 240, 247, 0.62);
}

.seal-state {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.35);
}

.seal-card.earned .seal-state { color: #6fd6a8; }

.prestige-seal-heading {
  margin-top: 20px;
}

.prestige-seal-gallery {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.prestige-seal-card {
  border-radius: 8px;
  background:
    radial-gradient(110px 90px at 50% 8%, rgba(255, 229, 132, 0.16), transparent 64%),
    rgba(8, 10, 15, 0.82);
}

.prestige-seal-card.current {
  border-color: rgba(255, 236, 156, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px rgba(255, 211, 78, 0.22);
}

.prestige-seal-medal {
  width: 92px;
  height: 92px;
}

@media (max-width: 560px) {
  .seal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prestige-seal-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bag-stone-grid { grid-template-columns: 1fr; }
}

/* ---- Victory sequence ---- */
.victory-modal {
  position: relative;
  overflow: hidden;
  max-width: 680px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, #2a2348 0%, #141022 60%, #0c0a16 100%);
  border: 1px solid rgba(240, 212, 106, 0.35);
}

.victory-rays {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  background: conic-gradient(from 0deg, rgba(240,212,106,0.12), rgba(240,212,106,0) 22%, rgba(240,212,106,0.12) 50%, rgba(240,212,106,0) 75%, rgba(240,212,106,0.12));
  animation: victory-spin 14s linear infinite;
  pointer-events: none;
}

@keyframes victory-spin { to { transform: rotate(360deg); } }

.victory-title {
  position: relative;
  margin: 6px 0 2px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 4px;
  color: #ffe9a8;
  text-shadow: 0 0 18px rgba(240, 212, 106, 0.7);
  animation: victory-pop 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.victory-sub { position: relative; color: rgba(233, 240, 247, 0.82); margin-bottom: 12px; }

.victory-team {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 14px 0;
}

.victory-mon {
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(240, 212, 106, 0.22);
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  animation: victory-pop 620ms cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}

.victory-mon img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.victory-mon strong { font-size: 13px; }
.victory-mon .vmeta { font-size: 11px; color: rgba(233, 240, 247, 0.6); }
.victory-mon .vpow { font-size: 11px; font-weight: 800; color: #ffd23f; }

@keyframes victory-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.victory-total { position: relative; margin-top: 8px; font-weight: 700; }
.victory-total strong { color: #ffd23f; font-size: 18px; }
.victory-credits { position: relative; color: rgba(233, 240, 247, 0.6); font-size: 12.5px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .victory-rays { animation: none; }
  .victory-title, .victory-mon { animation: none; opacity: 1; transform: none; }
}

/* ---- Fly travel map ---- */
.fly-modal { max-width: 560px; }

.fly-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 6px;
  max-height: 50vh;
  overflow: auto;
}

.fly-dest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.fly-dest:hover {
  transform: translateY(-2px);
  border-color: rgba(125, 240, 255, 0.55);
  background: rgba(125, 240, 255, 0.1);
}

.fly-name { font-weight: 800; font-size: 14px; }
.fly-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: rgba(233, 240, 247, 0.5);
}

@media (max-width: 560px) {
  .fly-grid { grid-template-columns: 1fr; }
}

/* ---- Region Atlas (world map / fly screen / monster locator) ---- */
.atlas-modal { max-width: 880px; }

body.has-online-players #mapBtn {
  position: relative;
  padding-right: 24px;
}

body.has-online-players #mapBtn::after,
body.has-online-players .atlas-modal > h2::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 999px;
  background: #40e270;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 0 10px rgba(64, 226, 112, 0.64);
}

body.has-online-players #mapBtn::after {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-left: 0;
  transform: translateY(-50%);
}

.atlas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
}
.atlas-find,
.atlas-map-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.atlas-find {
  flex: 0 1 310px;
}
.atlas-map-search {
  flex: 1 1 210px;
}
.atlas-find select,
.atlas-map-search input {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--panel-line);
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 240px;
}
.atlas-map-search input {
  flex: 1 1 150px;
  min-width: 0;
}
.atlas-all {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(125, 240, 255, 0.12);
  border: 1px solid rgba(125, 240, 255, 0.4);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}
.atlas-all:hover { background: rgba(125, 240, 255, 0.22); }

.atlas-legend {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(233, 240, 247, 0.5);
}

.atlas-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 56vh;
  overflow: auto;
  padding-right: 4px;
}

.atlas-region-title {
  margin: 0 0 8px;
  padding-bottom: 5px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--panel-line);
}

.atlas-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.atlas-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: inherit;
  text-align: left;
  font: inherit;
  overflow: hidden;
}
button.atlas-chip {
  cursor: pointer;
  transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
}
button.atlas-chip:hover { transform: translateY(-2px); }
/* Visited-but-not-flyable places are buttons too now (tap = the reason why). */
button.atlas-chip.been { cursor: pointer; }

.atlas-chip-name { font-weight: 800; font-size: 13px; line-height: 1.2; }
.atlas-chip-meta { display: flex; align-items: center; gap: 8px; }
.atlas-chip-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: rgba(233, 240, 247, 0.45);
}
.atlas-chip-mark { font-size: 11px; font-weight: 700; color: rgba(233, 240, 247, 0.7); }
.atlas-leg { color: var(--gold); margin-left: 5px; }
.atlas-seal {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #7df0ff;
}
.atlas-chip.aethervane-tracked {
  border-color: rgba(255, 226, 103, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 226, 103, 0.12), rgba(125, 240, 255, 0.07)),
    rgba(255, 255, 255, 0.05);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 18px rgba(125, 240, 255, 0.24);
}
.atlas-chip.aethervane-tracked::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #ff5a5f, #ffd166, #55efc4, #7df0ff, #b990ff, #ff5a5f);
  pointer-events: none;
  animation: atlas-aethervane-ring 1.5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.atlas-aethervane-tracker {
  display: inline-flex;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  color: #10141a;
  background: linear-gradient(90deg, #ffd166, #7df0ff, #c9a0ff);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@keyframes atlas-aethervane-ring {
  to { transform: rotate(1turn); }
}

/* Receiver forecast: one row per roamer - exact map + live countdown. */
.atlas-roam-forecast {
  display: grid;
  gap: 4px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(125, 240, 255, 0.28);
  background: rgba(10, 18, 26, 0.35);
}
.atlas-roam-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.9fr) minmax(90px, 1.2fr) minmax(96px, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.35;
}
.atlas-roam-row.has-fly {
  grid-template-columns: minmax(72px, 0.9fr) minmax(90px, 1.2fr) minmax(96px, 1fr) auto;
  align-items: center;
}
.atlas-roam-fly {
  min-height: 26px;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  border: 1px solid rgba(64, 226, 112, 0.52);
  background: rgba(64, 226, 112, 0.14);
}
.atlas-roam-fly:hover { background: rgba(64, 226, 112, 0.24); }
.atlas-roam-fly:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}
.atlas-roam-row b { font-weight: 800; }
.atlas-roam-map { opacity: 0.92; }
.atlas-roam-when strong { font-variant-numeric: tabular-nums; }
.atlas-roam-row.is-landed .roam-now {
  color: #10141a;
  background: linear-gradient(90deg, #ffd166, #7df0ff);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 900;
  animation: atlas-roam-now-pulse 0.9s ease-in-out infinite;
}
.atlas-roam-row.is-resolved { opacity: 0.55; }
@keyframes atlas-roam-now-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
.atlas-player-fly {
  border-color: rgba(64, 226, 112, 0.52);
  background: rgba(64, 226, 112, 0.14);
}
.atlas-player-fly:hover {
  background: rgba(64, 226, 112, 0.24);
}
.atlas-player-fly:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.atlas-chip.has-player {
  border-color: rgba(64, 226, 112, 0.56);
  background: linear-gradient(180deg, rgba(64, 226, 112, 0.13), transparent), rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 0 0 1px rgba(64, 226, 112, 0.16);
}
.atlas-player-markers {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 14px;
}
.atlas-player-dot,
.atlas-player-row-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #40e270;
  border: 2px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.34), 0 0 10px rgba(64, 226, 112, 0.52);
}
.atlas-player-more {
  font-size: 10px;
  font-weight: 900;
  color: rgba(160, 255, 186, 0.86);
}
.atlas-player-modal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.atlas-player-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}
.atlas-player-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
}
.atlas-player-row:not(:disabled) {
  cursor: pointer;
}
.atlas-player-row:not(:disabled):hover {
  transform: translateY(-1px);
}
.atlas-player-row:disabled {
  cursor: default;
  opacity: 0.82;
}
.atlas-player-row-dot {
  width: 16px;
  height: 16px;
}
.atlas-player-row-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.atlas-player-row-copy strong {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.1;
}
.atlas-bot-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  border-radius: 4px;
  color: #041509;
  background: #40e270;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.atlas-player-row-copy small,
.atlas-player-status {
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(233, 240, 247, 0.58);
}
.atlas-player-status {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.fusion-card {
  width: min(1120px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #182436;
  background:
    linear-gradient(135deg, rgba(222, 229, 237, 0.96), rgba(199, 210, 223, 0.94)),
    linear-gradient(180deg, rgba(232, 238, 245, 0.86), rgba(176, 189, 205, 0.9)),
    url("assets/ui/fusion-dex-reactor-bg.png?v=fusion-dex-bg-1") center / cover no-repeat,
    #d7e0ea;
  border-color: rgba(78, 96, 118, 0.42);
  box-shadow:
    0 22px 70px rgba(26, 43, 66, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}
.fusion-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fusion-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #145d78;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.fusion-head h2,
.fusion-section h3 {
  margin: 0;
  color: #111a28;
}
.fusion-head p,
.fusion-toolbar span,
.fusion-slot-copy p,
.fusion-slot-copy span,
.fusion-dex-card span,
.fusion-dex-card small,
.fusion-dex-parent span,
.fusion-parent-row span {
  color: #35485e;
}
.fusion-head p {
  max-width: 62ch;
}
.fusion-requirements {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.fusion-resource {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 9px;
  padding: 9px;
  border: 1px solid rgba(104, 129, 158, 0.26);
  border-radius: 8px;
  background: rgba(232, 238, 245, 0.9);
}
.fusion-resource img,
.fusion-resource i,
.fusion-resource b {
  width: 38px;
  height: 38px;
  grid-row: span 2;
}
.fusion-resource img {
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(115, 234, 255, 0.52));
}
.fusion-resource i,
.fusion-resource b {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
  color: #081018;
  font-weight: 950;
}
.fusion-resource i {
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0 8%, transparent 9%),
    conic-gradient(from 18deg, #57e8ff, #9b6cff, #ffd66a, #4fd4b7, #57e8ff);
}
.fusion-resource b {
  background: linear-gradient(135deg, #73eaff, #ffd66a);
  font-size: 0.78rem;
}
.fusion-resource strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #132033;
  line-height: 1.1;
}
.fusion-resource small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #40536a;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.fusion-resource.ready { border-color: rgba(31, 148, 121, 0.42); }
.fusion-resource.missing { border-color: rgba(183, 70, 62, 0.5); background: rgba(255, 238, 236, 0.86); }
.fusion-resource.warning { border-color: rgba(178, 132, 24, 0.42); }
.fusion-toolbar,
.fusion-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(104, 129, 158, 0.25);
  background: rgba(229, 236, 244, 0.92);
  border-radius: 8px;
}
.fusion-toolbar button,
.fusion-selected button,
.fusion-slot-actions button,
.fusion-parent-actions button {
  min-height: 38px;
}
.fusion-start-note {
  margin: -4px 2px 0;
  color: #35485e;
  font-size: 0.88rem;
  font-weight: 700;
}
.fusion-start-note.ready { color: #08795c; }
.fusion-start-note.missing { color: #a73f35; }
.fusion-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.fusion-trait {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid rgba(104, 129, 158, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #273951;
  font-size: 0.69rem;
  font-weight: 900;
  line-height: 1.2;
}
.fusion-trait--holo {
  border-color: rgba(24, 152, 171, 0.48);
  background: linear-gradient(110deg, rgba(211, 252, 255, 0.94), rgba(246, 226, 255, 0.94));
}
.fusion-trait--mutation {
  border-color: rgba(139, 92, 246, 0.44);
  background: rgba(242, 235, 255, 0.94);
}
.fusion-genetics-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(246, 240, 255, 0.96), rgba(229, 247, 250, 0.92));
}
.fusion-genetics-preview > div,
.fusion-genetics-copy {
  display: grid;
  align-content: start;
  gap: 6px;
}
.fusion-genetics-preview strong { color: #452c75; }
.fusion-genetics-preview span,
.fusion-genetics-preview small {
  color: #35485e;
  font-weight: 750;
  line-height: 1.35;
}
.fusion-section {
  display: grid;
  gap: 10px;
}
.fusion-slot-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.fusion-slot-card,
.fusion-dex-card,
.fusion-parent-row {
  border: 1px solid rgba(104, 129, 158, 0.26);
  background:
    linear-gradient(180deg, rgba(238, 243, 248, 0.96), rgba(214, 224, 235, 0.92)),
    rgba(222, 231, 240, 0.94);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(32, 52, 78, 0.12);
}
.fusion-slot-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
}
.fusion-slot-art {
  width: 92px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(55, 178, 210, 0.16), transparent 54%),
    radial-gradient(circle at 60% 62%, rgba(197, 151, 31, 0.1), transparent 50%),
    rgba(207, 218, 230, 0.9);
}
.fusion-mystery-art {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #dffaff;
  font-size: 2.25rem;
  font-weight: 900;
  text-shadow: 0 0 14px rgba(24, 12, 48, 0.72);
  background:
    linear-gradient(180deg, rgba(10, 17, 31, 0.18), rgba(7, 10, 20, 0.82)),
    url("assets/ui/fusion-dex-reactor-bg.png?v=fusion-dex-bg-1") center / cover no-repeat,
    #0b1220;
}
.fusion-slot-art img,
.fusion-dex-art img,
.fusion-parent-row img,
.fusion-selected img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.fusion-slot-copy {
  min-width: 0;
}
.fusion-slot-copy h3 {
  margin: 4px 0;
  font-size: 1.02rem;
  color: #142033;
}
.fusion-kicker {
  display: inline-flex;
  color: #176f89;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.fusion-slot-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.fusion-dex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fusion-dex-card {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px;
  padding: 9px;
  align-items: start;
}
.fusion-dex-art {
  width: 94px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.fusion-dex-art img {
  width: 94px;
  aspect-ratio: 1;
  object-fit: contain;
}
.fusion-dex-art > .fusion-mystery-art {
  width: 94px;
  aspect-ratio: 1;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  font-size: 1.8rem;
}
.fusion-dex-main,
.fusion-dex-detail,
.fusion-parent-row div {
  min-width: 0;
}
.fusion-dex-card strong,
.fusion-parent-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #142033;
}
.fusion-dex-card span,
.fusion-dex-card small,
.fusion-parent-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}
.fusion-dex-detail {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}
.fusion-dex-label {
  color: #145d78;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fusion-dex-parents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.fusion-dex-parent {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(104, 129, 158, 0.2);
  border-radius: 8px;
  background: rgba(231, 238, 245, 0.78);
}
.fusion-dex-parent img,
.fusion-dex-parent-missing {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.fusion-dex-parent-missing {
  border-radius: 50%;
  background: rgba(104, 129, 158, 0.18);
}
.fusion-dex-parent b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #142033;
  font-size: 0.82rem;
}
.fusion-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}
.fusion-stat-grid span {
  padding: 5px 4px;
  border: 1px solid rgba(104, 129, 158, 0.2);
  border-radius: 7px;
  background: rgba(233, 239, 246, 0.84);
  text-align: center;
  color: #142033;
  font-weight: 900;
  line-height: 1.15;
}
.fusion-stat-grid b {
  display: block;
  color: #50647d;
  font-size: 0.62rem;
}
.fusion-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
.fusion-selected > div {
  min-height: 72px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(104, 129, 158, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}
.fusion-selected > div > img {
  width: 58px;
  height: 58px;
}
.fusion-search {
  margin: 0;
}
.fusion-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: end;
}
.fusion-duplicate-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fusion-duplicate-toggle em {
  min-width: 1.5em;
  padding: 1px 6px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1.25;
  background: rgba(255, 255, 255, 0.46);
}
.fusion-duplicate-toggle.active {
  color: #071018;
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #73eaff, #ffd66a);
}
.fusion-parent-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.fusion-parent-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
}
.fusion-parent-row > img {
  width: 64px;
  height: 64px;
}
.fusion-parent-actions {
  display: grid;
  grid-template-columns: 40px 40px;
  gap: 6px;
}
.fusion-parent-actions .selected {
  color: #071018;
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, #73eaff, #ffd66a);
  box-shadow: 0 0 0 2px rgba(115, 234, 255, 0.28);
}
.fusion-card .empty-note,
.fusion-card .monster-search span {
  color: #31455c;
}
.fusion-card .fusion-search input {
  color: #162338;
  border-color: rgba(104, 129, 158, 0.28);
  background: rgba(238, 243, 248, 0.92);
}
.fusion-card .fusion-search input::placeholder {
  color: #5d7188;
}

@media (max-width: 760px), (max-height: 520px) {
  .fusion-card {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    gap: 10px;
  }
  .fusion-head,
  .fusion-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .fusion-requirements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fusion-slot-list,
  .fusion-dex-grid,
  .fusion-parent-list {
    grid-template-columns: 1fr;
  }
  .fusion-dex-parents {
    grid-template-columns: 1fr;
  }
  .fusion-stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fusion-selected {
    grid-template-columns: 1fr;
  }
  .fusion-picker-tools {
    grid-template-columns: 1fr;
  }
  .fusion-duplicate-toggle {
    justify-content: center;
  }
  .fusion-parent-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 7px;
  }
  .fusion-parent-row > img {
    width: 52px;
    height: 52px;
  }
}

.rift-card {
  width: min(1040px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(16px, 1.8vw, 22px);
  background:
    radial-gradient(135% 90% at 8% -10%, rgba(78, 227, 255, 0.13), transparent 44%),
    radial-gradient(135% 90% at 94% -8%, rgba(150, 96, 255, 0.16), transparent 48%),
    linear-gradient(165deg, rgba(17, 23, 39, 0.975), rgba(9, 12, 22, 0.985) 58%, rgba(6, 8, 15, 0.99));
  border-color: rgba(120, 150, 200, 0.3);
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.6),
    0 0 34px rgba(78, 227, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.rift-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(140, 168, 214, 0.18);
}
.rift-head-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.rift-head h2 {
  margin: 0;
  font-size: clamp(1.2rem, 1.1rem + 0.7vw, 1.5rem);
  line-height: 1.08;
  color: #fbfdff;
  letter-spacing: 0.01em;
}
.rift-head-text p {
  margin: 0;
  overflow-wrap: anywhere;
}
.rift-head p,
.rift-copy,
.rift-tier p,
.rift-tier small {
  color: rgba(231, 238, 252, 0.82);
}
#closeRiftTiers {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(140, 168, 214, 0.34);
  border-radius: 8px;
  background: rgba(13, 19, 33, 0.72);
  color: #eaf1ff;
  font-weight: 800;
}
.rift-intro-copy {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.rift-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.rift-status-copy {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 224, 118, 0.2);
  border-radius: 8px;
  background: rgba(255, 224, 118, 0.08);
  font-size: 0.8rem;
  line-height: 1.35;
}
.rift-lobby {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(115, 234, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(115, 234, 255, 0.07), rgba(169, 108, 255, 0.04)),
    rgba(8, 13, 24, 0.7);
}
.rift-lobby-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.rift-lobby-main {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 4px;
}
.rift-lobby-main h3 {
  margin: 0;
  color: #fffdf8;
  font-size: 1.14rem;
  line-height: 1.12;
}
.rift-lobby-main p {
  margin: 0;
  color: rgba(238, 242, 255, 0.7);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.rift-private-row,
.rift-size-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(6, 10, 20, 0.58);
}
.rift-private-row span,
.rift-size-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.rift-private-row strong,
.rift-size-row strong {
  color: #fffdf8;
  font-size: 0.84rem;
}
.rift-private-row small,
.rift-size-row small {
  color: rgba(238, 242, 255, 0.6);
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 850;
}
.rift-private-row em {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #73eaff, #a96cff);
  color: #06111d;
  font-style: normal;
  font-weight: 950;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.rift-size-buttons {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 5px;
}
.rift-size-buttons button {
  width: 36px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(115, 234, 255, 0.28);
  background: rgba(10, 15, 28, 0.8);
  color: #eafcff;
  font-weight: 950;
}
.rift-size-buttons button.active {
  background: linear-gradient(135deg, #73eaff, #a96cff);
  color: #06111d;
}
.rift-size-buttons button:disabled {
  opacity: 0.35;
}
.rift-team {
  display: grid;
  gap: 8px;
}
.rift-team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.rift-team-head .fusion-eyebrow {
  margin-bottom: 0;
}
.rift-team-head small {
  flex: 0 0 auto;
  color: rgba(231, 238, 252, 0.6);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rift-tier-section {
  min-width: 0;
  display: grid;
  gap: 8px;
}
.rift-section-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.rift-section-head .fusion-eyebrow {
  margin-bottom: 0;
}
.rift-section-head small {
  flex: 0 0 auto;
  color: rgba(231, 238, 252, 0.6);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rift-team-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 7px;
}
.rift-team-pick {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 11, 22, 0.78);
  color: #eef2ff;
  text-align: left;
}
.rift-team-pick.selected {
  border-color: rgba(115, 234, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(115, 234, 255, 0.16), rgba(169, 108, 255, 0.12)),
    rgba(7, 11, 22, 0.86);
}
.rift-team-pick.fainted {
  opacity: 0.55;
}
.rift-team-pick img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.rift-team-pick span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.rift-team-pick strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fffdf8;
  font-size: 0.82rem;
}
.rift-team-pick small {
  overflow-wrap: anywhere;
  color: rgba(238, 242, 255, 0.64);
  font-size: 0.68rem;
  line-height: 1.2;
}
#riftStartPrivate {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 224, 118, 0.62);
  border-radius: 9px;
  background: linear-gradient(135deg, #ffe176, #62eaff 48%, #a96cff);
  color: #06111d;
  font-weight: 950;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 22px rgba(98, 234, 255, 0.16);
}
#riftStartPrivate:disabled {
  opacity: 0.55;
  box-shadow: none;
}
.rift-rule-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.rift-rule-grid span,
.rift-tier {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)),
    rgba(7, 10, 18, 0.72);
}
.rift-rule-grid span {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 10px;
}
.rift-rule-grid strong {
  color: #fffdf8;
  font-size: 1.08rem;
}
.rift-rule-grid small,
.rift-tier span,
.rift-tier small {
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
}
.rift-rule-grid small {
  color: rgba(238, 242, 255, 0.66);
}
.rift-tier-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.rift-tier {
  min-width: 0;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.rift-tier.playable {
  border-color: rgba(115, 234, 255, 0.42);
  box-shadow: inset 0 0 0 1px rgba(115, 234, 255, 0.08), 0 0 22px rgba(115, 234, 255, 0.08);
}
.rift-tier.selected {
  border-color: rgba(255, 224, 118, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 118, 0.16),
    0 0 24px rgba(255, 224, 118, 0.1);
}
.rift-tier.locked {
  opacity: 0.72;
}
.rift-tier div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.rift-tier strong {
  color: #73eaff;
  font-size: 1.05rem;
}
.rift-tier span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #150c22;
  background: linear-gradient(135deg, #73eaff, #a96cff);
}
.rift-tier h3 {
  margin: 0;
  color: #fffdf8;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}
.rift-tier p,
.rift-tier small {
  margin: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rift-tier button {
  width: 100%;
  margin-top: 3px;
  min-height: 34px;
  border: 1px solid rgba(115, 234, 255, 0.38);
  background: linear-gradient(135deg, rgba(32, 223, 235, 0.92), rgba(156, 102, 255, 0.92));
  color: #06111d;
  font-weight: 950;
}
.rift-reward-card {
  --chest-cine-glow: #73eaff;
  --chest-cine-spark: #d9f9ff;
  position: relative;
  width: min(820px, calc(100vw - 28px));
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(115, 234, 255, 0.26), transparent 34%),
    linear-gradient(145deg, rgba(13, 17, 32, 0.98), rgba(6, 8, 16, 0.98));
  border-color: rgba(115, 234, 255, 0.24);
}
.rift-reward-card--summary {
  width: min(960px, calc(100vw - 28px));
}
.rift-reward-opening-card {
  width: min(900px, calc(100vw - 28px));
  text-align: center;
}
.rift-reward-stage {
  --rift-reward-frame: clamp(310px, 50vw, 460px);
  --chest-cine-rise: min(52vh, 480px);
  position: relative;
  height: clamp(300px, 48vh, 430px);
  margin: -12px -12px 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 10, 20, 0.18), rgba(7, 10, 20, 0.76)),
    var(--rift-reward-map, url("assets/maps/rift-t1-boss-map.webp?v=rift-reward-hook-1")) center / cover no-repeat;
}
.rift-reward-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 10, 20, 0.76), transparent 24%, transparent 76%, rgba(7, 10, 20, 0.76)),
    linear-gradient(180deg, rgba(7, 10, 20, 0.18), transparent 45%, rgba(7, 10, 20, 0.74));
  pointer-events: none;
}
/* Grid-sheet chest. The summary card paints the final (open) frame straight
 * from the CSS vars; the opening card's frames are JS-driven, so its inline
 * background-position/size win over these. */
.rift-reward-chest-wrap {
  --chest-cine-size: var(--rift-reward-frame, 320px);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}
.fusion-selected > div > .fusion-traits {
  grid-column: 2;
  margin-top: -3px;
}

.rift-reward-chest-trigger,
.rift-reward-chest-trigger:hover,
.rift-reward-chest-trigger:active,
.rift-reward-chest-trigger:disabled {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--rift-reward-frame);
  height: var(--rift-reward-frame);
  min-height: 0;
  padding: 0;
  overflow: visible;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.rift-reward-opening-card.is-waiting .rift-reward-chest-trigger {
  cursor: pointer;
}

.rift-reward-opening-card:not(.is-waiting) .rift-reward-chest-trigger {
  cursor: default;
  pointer-events: none;
}

.rift-reward-chest-trigger:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: -10px;
  border-color: transparent;
  box-shadow: 0 0 0 7px rgba(115, 234, 255, 0.34);
}

.rift-reward-burst {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--rift-reward-frame);
  height: var(--rift-reward-frame);
  background-image: var(--rift-reward-chest-sheet, url("assets/effects/rift-reward-chest-ancient-low-imagegen-grid.webp?v=rift-reward-chests-grid-20260703-1"));
  background-repeat: no-repeat;
  background-position: var(--rift-reward-chest-final-pos, 100% 100%);
  background-size: var(--rift-reward-chest-size, 800% 600%);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.46)) drop-shadow(0 0 28px rgba(78, 226, 255, 0.42));
  animation: rift-reward-hover 2200ms ease-in-out infinite alternate;
}
.rift-reward-card[data-rift-chest-variant^="ancient"] {
  --chest-cine-glow: #c08bff;
  --chest-cine-spark: #ffe2a8;
}

.rift-reward-card[data-rift-chest-variant="crystal"] {
  --chest-cine-glow: #7df3ff;
  --chest-cine-spark: #ffffff;
}

.rift-reward-card[data-rift-chest-variant^="ancient"] .rift-reward-burst {
  filter:
    drop-shadow(0 20px 28px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 22px rgba(177, 108, 255, 0.42))
    drop-shadow(0 0 18px rgba(255, 214, 106, 0.28));
}
.rift-reward-card[data-rift-chest-variant="ancient"] .rift-reward-burst {
  filter:
    drop-shadow(0 22px 30px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 30px rgba(177, 108, 255, 0.56))
    drop-shadow(0 0 24px rgba(255, 214, 106, 0.42));
}
.rift-reward-card[data-rift-chest-variant="crystal"] .rift-reward-burst {
  filter:
    drop-shadow(0 24px 32px rgba(0, 0, 0, 0.58))
    drop-shadow(0 0 34px rgba(53, 242, 255, 0.58))
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.34));
}
.rift-reward-opening-card .rift-reward-stage {
  --rift-reward-frame: clamp(380px, 66vw, 620px);
  height: clamp(390px, 70vh, 660px);
  margin: -12px;
}
/* Opening cinematic: hidden until the sheet is decoded (is-live), then the
 * JS animator steps the frames while CSS handles the entrance punch. */
.rift-reward-opening-card .rift-reward-burst {
  opacity: 0;
  animation: none;
}
.rift-reward-opening-card.is-waiting .rift-reward-burst,
.rift-reward-opening-card.is-armed .rift-reward-burst {
  opacity: 1;
  background-position: 0 0;
}
.rift-reward-opening-card.is-waiting .rift-reward-burst {
  animation: rift-reward-ready-pulse 1650ms ease-in-out infinite alternate;
}
.rift-reward-opening-card.is-armed .rift-reward-burst {
  animation: rift-reward-armed-pulse 720ms ease-in-out infinite alternate;
}
.rift-reward-opening-card.is-live .rift-reward-burst {
  opacity: 1;
  animation: rift-reward-chest-punch 6200ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}
.rift-reward-opening-card.is-settled .rift-reward-burst {
  animation: rift-reward-hover 2200ms ease-in-out infinite alternate;
}
.rift-reward-tap-ring {
  position: absolute;
  z-index: 2;
  inset: 18%;
  border: 3px solid rgba(255, 245, 190, 0.76);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 22px rgba(255, 223, 122, 0.5),
    inset 0 0 18px rgba(115, 234, 255, 0.28);
}
.rift-reward-opening-card.is-waiting .rift-reward-tap-ring {
  animation: rift-reward-tap-ring 1650ms ease-out infinite;
}
.rift-reward-sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.18) 42%, transparent 58%);
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: rift-reward-sheen 6200ms 440ms cubic-bezier(0.18, 0.78, 0.18, 1) both;
}
.rift-reward-opening-card .rift-reward-sheen {
  animation: none;
}
.rift-reward-opening-card.is-burst .rift-reward-sheen {
  animation: rift-reward-sheen 1500ms 60ms cubic-bezier(0.18, 0.78, 0.18, 1) both;
}
.rift-reward-open-flash {
  position: absolute;
  inset: 8%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 249, 183, 0.72), rgba(115, 234, 255, 0.28) 26%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: none;
}
.rift-reward-opening-card.is-burst .rift-reward-open-flash {
  animation: rift-reward-open-flash 980ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}
.rift-reward-opening-card.is-burst .rift-reward-opening-title h2 {
  animation: chestCineTitlePunch 620ms cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
}
.rift-reward-card[data-rift-chest-variant^="ancient"] .rift-reward-open-flash {
  background: radial-gradient(circle, rgba(255, 244, 183, 0.78), rgba(181, 113, 255, 0.32) 24%, rgba(96, 238, 255, 0.18) 42%, transparent 62%);
}
.rift-reward-card[data-rift-chest-variant="crystal"] .rift-reward-open-flash {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.86), rgba(53, 242, 255, 0.42) 24%, rgba(169, 108, 255, 0.2) 46%, transparent 64%);
}
.rift-reward-opening-title {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 20px;
  display: grid;
  gap: 5px;
  justify-items: center;
  color: #fffdf8;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.88), 0 0 18px rgba(115, 234, 255, 0.42);
  pointer-events: none;
}
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-opening-title h2 {
  margin: 0;
  color: #fffdf8 !important;
  font-size: clamp(1.35rem, 4.6vw, 2.4rem);
  line-height: 1.04;
}
.rift-reward-tap-hint {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  font-weight: 850;
  letter-spacing: 0.04em;
  transition: opacity 280ms ease;
}
.rift-reward-opening-card.is-burst .rift-reward-tap-hint {
  opacity: 0;
}
.rift-rare-reveal-card {
  width: min(760px, calc(100vw - 28px));
  text-align: center;
}
.estate-elephant-bike-unlock-card {
  border-color: rgba(241, 205, 112, 0.58);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.68),
    0 0 48px rgba(120, 211, 136, 0.16);
}
.rift-rare-reveal-stage.estate-elephant-bike-unlock-stage {
  background:
    linear-gradient(180deg, rgba(4, 13, 10, 0.04), rgba(4, 13, 10, 0.76)),
    radial-gradient(circle at 50% 36%, rgba(255, 233, 153, 0.42), transparent 27%),
    radial-gradient(circle at 50% 74%, rgba(95, 203, 123, 0.34), transparent 44%),
    linear-gradient(135deg, #182d22, #527047 50%, #101b17);
}
.estate-elephant-bike-unlock-stage .rift-rare-reveal-bg {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 246, 197, 0.3), transparent 25%),
    linear-gradient(90deg, rgba(5, 13, 10, 0.78), transparent 28%, transparent 72%, rgba(5, 13, 10, 0.78));
}
.rift-rare-reveal-art.estate-elephant-bike-unlock-art {
  --rift-reveal-frame: clamp(220px, 38vw, 310px);
  filter:
    drop-shadow(0 0 24px rgba(255, 226, 132, 0.34))
    drop-shadow(0 24px 28px rgba(0, 0, 0, 0.5));
}
.estate-elephant-bike-unlock-art .rift-rare-reveal-ring {
  border-color: rgba(255, 226, 132, 0.66);
  box-shadow:
    0 0 30px rgba(102, 225, 133, 0.35),
    inset 0 0 24px rgba(255, 246, 197, 0.18);
}
.estate-elephant-bike-unlock-copy h2 {
  color: #fff2b7;
  text-shadow: 0 0 20px rgba(123, 230, 146, 0.24);
}
.rift-rare-reveal-stage {
  position: relative;
  height: clamp(330px, 58vh, 500px);
  margin: -12px -12px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 10, 20, 0.1), rgba(7, 10, 20, 0.7)),
    var(--rift-reward-map, url("assets/maps/rift-t1-boss-map.webp?v=rift-reward-hook-1")) center / cover no-repeat;
}
.rift-rare-reveal-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 242, 161, 0.36), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(115, 234, 255, 0.36), transparent 42%),
    linear-gradient(90deg, rgba(7, 10, 20, 0.78), transparent 28%, transparent 72%, rgba(7, 10, 20, 0.78));
  pointer-events: none;
}
.rift-rare-reveal-art {
  --rift-reveal-frame: clamp(150px, 28vw, 218px);
  position: relative;
  z-index: 2;
  width: var(--rift-reveal-frame);
  height: var(--rift-reveal-frame);
  display: grid;
  place-items: center;
  filter:
    drop-shadow(0 0 24px rgba(115, 234, 255, 0.4))
    drop-shadow(0 20px 24px rgba(0, 0, 0, 0.42));
  animation: rift-rare-reveal-pop 760ms cubic-bezier(0.18, 0.82, 0.2, 1.16) both;
}
.rift-rare-reveal-ring {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 2px solid rgba(255, 242, 161, 0.52);
  box-shadow:
    0 0 28px rgba(115, 234, 255, 0.42),
    inset 0 0 22px rgba(255, 255, 255, 0.16);
  animation: rift-rare-reveal-ring 1800ms ease-out infinite;
}
.rift-rare-travel-sprite {
  width: var(--rift-reveal-frame);
  height: var(--rift-reveal-frame);
  background-image: var(--rift-reveal-sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--rift-reveal-frame) * 8) calc(var(--rift-reveal-frame) * 4);
  background-position: 0 calc(var(--rift-reveal-frame) * var(--rift-reveal-row, 1) * -1);
  image-rendering: auto;
  animation:
    rift-rare-travel-cycle 820ms steps(7, end) infinite,
    rift-rare-travel-bob 1380ms ease-in-out infinite alternate;
}
.rift-rare-reveal-art--egg {
  --rift-reveal-frame: clamp(160px, 30vw, 230px);
}
.aethervane-gift-card {
  width: min(780px, calc(100vw - 28px));
}
.aethervane-gift-stage {
  background:
    linear-gradient(180deg, rgba(4, 9, 18, 0.08), rgba(4, 9, 18, 0.72)),
    radial-gradient(circle at 50% 32%, rgba(255, 246, 185, 0.42), transparent 25%),
    linear-gradient(135deg, #172337, #516778 48%, #101621);
}
.aethervane-gift-art {
  --rift-reveal-frame: clamp(190px, 32vw, 270px);
}
.aethervane-gift-img {
  position: relative;
  z-index: 2;
  width: 138%;
  height: 138%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 20px rgba(255, 242, 161, 0.45))
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.5));
  animation: aethervane-gift-float 1800ms ease-in-out infinite alternate;
}
.lumenox-gift-card {
  border-color: rgba(225, 248, 255, 0.5);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68), 0 0 46px rgba(154, 226, 255, 0.15);
}
.lumenox-gift-stage {
  background:
    linear-gradient(180deg, rgba(0, 0, 5, 0.04), rgba(0, 0, 8, 0.78)),
    radial-gradient(circle at 50% 34%, rgba(226, 249, 255, 0.36), transparent 25%),
    linear-gradient(135deg, #010207, #111a29 48%, #020307);
}
.lumenox-gift-stage::after {
  content: "";
  position: absolute;
  inset: 8%;
  pointer-events: none;
  opacity: 0.74;
  background:
    linear-gradient(28deg, transparent 48.8%, rgba(232, 251, 255, 0.44) 49.5%, rgba(232, 251, 255, 0.44) 50.2%, transparent 50.9%),
    linear-gradient(151deg, transparent 49%, rgba(132, 211, 255, 0.26) 49.6%, rgba(132, 211, 255, 0.26) 50.2%, transparent 50.8%);
  clip-path: polygon(5% 72%, 24% 42%, 44% 59%, 61% 23%, 78% 51%, 95% 30%, 83% 79%, 56% 70%, 35% 88%);
  filter: drop-shadow(0 0 8px rgba(220, 249, 255, 0.65));
}
.lumenox-gift-art .rift-rare-reveal-ring {
  border-color: rgba(231, 251, 255, 0.78);
  box-shadow: 0 0 28px rgba(144, 220, 255, 0.42), inset 0 0 28px rgba(144, 220, 255, 0.18);
}
.lumenox-gift-img {
  width: 146%;
  height: 146%;
  filter:
    drop-shadow(0 0 18px rgba(226, 249, 255, 0.5))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.74));
}
.rift-rare-egg-aura {
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(255, 242, 161, 0.38) 22%, rgba(115, 234, 255, 0.24) 54%, transparent 72%);
  filter: blur(2px);
  animation: rift-rare-egg-aura 2350ms ease-out forwards;
}
.rift-rare-egg-img {
  position: relative;
  z-index: 2;
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  animation:
    rift-rare-egg-wobble 2350ms ease-in-out forwards,
    rift-rare-egg-glow 760ms ease-in-out infinite alternate;
}
.rift-rare-egg-crack {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  width: 78px;
  height: 116px;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0;
  pointer-events: none;
  animation: rift-rare-egg-crack 2350ms ease-in forwards;
}
.rift-rare-egg-crack::before,
.rift-rare-egg-crack::after {
  content: "";
  position: absolute;
  left: 38px;
  top: 6px;
  width: 4px;
  height: 108px;
  border-radius: 99px;
  background:
    linear-gradient(180deg, transparent 0 9%, rgba(255,255,255,0.94) 9% 18%, transparent 18% 28%, rgba(255,255,255,0.94) 28% 48%, transparent 48% 58%, rgba(255,255,255,0.94) 58% 74%, transparent 74% 100%);
  box-shadow: 0 0 16px rgba(255,255,255,0.86), 0 0 30px rgba(115, 234, 255,0.46);
}
.rift-rare-egg-crack::after {
  transform: rotate(34deg);
  transform-origin: 50% 44%;
  opacity: 0.72;
}
.rift-rare-reveal-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 18px 18px 20px;
}
.rift-rare-reveal-copy h2 {
  margin: 0;
  color: #fffdf8;
  font-size: clamp(1.45rem, 4.6vw, 2.45rem);
  line-height: 1.04;
}
.rift-rare-reveal-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(238, 242, 255, 0.78);
}
.rift-reward-head {
  position: relative;
  z-index: 3;
}
.rift-reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.rift-reward-grid article {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(9, 13, 27, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 28px rgba(0, 0, 0, 0.2);
  animation: rift-reward-card-pop 620ms cubic-bezier(0.2, 0.9, 0.18, 1.18) both;
}
.rift-reward-grid article.is-rare {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(9, 13, 27, 0.9), rgba(12, 10, 31, 0.9)) padding-box,
    conic-gradient(from 20deg, #ff4fd8, #ffe76d, #62f7a1, #57d8ff, #a96cff, #ff4fd8) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 18px rgba(115, 234, 255, 0.26),
    0 16px 32px rgba(0, 0, 0, 0.24);
}
.rift-reward-grid article.is-muted {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(7, 10, 18, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.rift-reward-grid article.is-muted img,
.rift-reward-grid article.is-muted strong {
  opacity: 0.52;
  filter: grayscale(1) brightness(0.58);
}
.rift-reward-grid article.is-muted span {
  color: rgba(238, 242, 255, 0.66);
}
.rift-reward-grid article.is-muted em {
  color: rgba(203, 213, 225, 0.56);
}
.rift-reward-grid article.is-owned {
  border-color: rgba(125, 232, 200, 0.35);
  background: rgba(9, 23, 24, 0.7);
}
.rift-reward-grid article:nth-child(2) { animation-delay: 70ms; }
.rift-reward-grid article:nth-child(3) { animation-delay: 140ms; }
.rift-reward-grid article:nth-child(4) { animation-delay: 210ms; }
.rift-reward-grid article:nth-child(5) { animation-delay: 280ms; }
.rift-reward-grid article:nth-child(6) { animation-delay: 350ms; }
.rift-reward-card #riftRewardAgain {
  border-color: rgba(255, 224, 118, 0.62);
  background: linear-gradient(135deg, #ffe176, #62eaff 48%, #a96cff);
  color: #06111d;
}
.rift-reward-grid img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(115, 234, 255, 0.32));
}
.rift-reward-grid strong {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #73eaff, #a96cff);
  color: #06111d;
}
.rift-reward-grid span {
  color: #fffdf8;
  font-weight: 900;
}
.rift-reward-grid em {
  color: rgba(238, 242, 255, 0.72);
  font-size: 0.78rem;
  font-style: normal;
  text-align: center;
}
@keyframes rift-reward-hover {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-5px) scale(1.015); }
}
@keyframes rift-reward-ready-pulse {
  from { transform: translateY(2px) scale(0.98); filter: brightness(0.94) saturate(1.02) drop-shadow(0 20px 28px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 22px var(--chest-cine-glow)); }
  to { transform: translateY(-7px) scale(1.035); filter: brightness(1.12) saturate(1.12) drop-shadow(0 22px 30px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 36px var(--chest-cine-glow)); }
}
@keyframes rift-reward-armed-pulse {
  from { transform: scale(1); filter: brightness(1) drop-shadow(0 20px 28px rgba(0, 0, 0, 0.54)) drop-shadow(0 0 24px var(--chest-cine-glow)); }
  to { transform: scale(1.025); filter: brightness(1.16) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.58)) drop-shadow(0 0 42px var(--chest-cine-glow)); }
}
@keyframes rift-reward-tap-ring {
  0% { opacity: 0; transform: scale(0.72); }
  28% { opacity: 0.78; }
  100% { opacity: 0; transform: scale(1.34); }
}
@keyframes rift-reward-chest-punch {
  0% { transform: translateY(16px) scale(0.88); }
  18% { transform: translateY(6px) scale(0.94); }
  32% { transform: translateY(0) scale(1.02); }
  42% { transform: translateY(-9px) scale(1.13); }
  56% { transform: translateY(-3px) scale(1.07); }
  100% { transform: translateY(0) scale(1.02); }
}
@keyframes rift-reward-sheen {
  0% { transform: translateX(-120%); opacity: 0; }
  16% { opacity: 0.82; }
  54% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(120%); opacity: 0; }
}
@keyframes rift-reward-open-flash {
  0% { opacity: 0; transform: scale(0.62); }
  16% { opacity: 0.92; transform: scale(1.02); }
  46% { opacity: 0.24; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(1.42); }
}
@keyframes rift-reward-card-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rift-reward-opening-card.is-waiting .rift-reward-burst,
  .rift-reward-opening-card.is-armed .rift-reward-burst,
  .rift-reward-opening-card.is-waiting .rift-reward-tap-ring {
    animation: none;
  }
  .rift-reward-opening-card.is-waiting .rift-reward-tap-ring {
    opacity: 0.56;
  }
}
@keyframes rift-rare-reveal-pop {
  0% { opacity: 0; transform: translateY(20px) scale(0.68); }
  58% { opacity: 1; transform: translateY(-8px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aethervane-gift-float {
  from { transform: translateY(6px) rotate(-1deg); }
  to { transform: translateY(-8px) rotate(1deg); }
}
@keyframes rift-rare-reveal-ring {
  0% { opacity: 0.2; transform: scale(0.74) rotate(0deg); }
  46% { opacity: 0.78; transform: scale(1) rotate(120deg); }
  100% { opacity: 0.2; transform: scale(1.18) rotate(260deg); }
}
@keyframes rift-rare-travel-cycle {
  to { background-position: calc(var(--rift-reveal-frame) * -7) calc(var(--rift-reveal-frame) * var(--rift-reveal-row, 1) * -1); }
}
@keyframes rift-rare-travel-bob {
  from { transform: translateY(2px) scale(1); }
  to { transform: translateY(-8px) scale(1.04); }
}
@keyframes rift-rare-egg-aura {
  0%, 12% { opacity: 0; transform: scale(0.42); }
  48% { opacity: 0.72; transform: scale(0.88); }
  78% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.54; transform: scale(1.2); }
}
@keyframes rift-rare-egg-wobble {
  0% { opacity: 0; transform: translateY(18px) scale(0.7) rotate(-4deg); }
  16% { opacity: 1; transform: translateY(4px) scale(0.9) rotate(3deg); }
  34% { transform: translateY(0) scale(0.96) rotate(-4deg); }
  48% { transform: translateY(-4px) scale(1.02) rotate(5deg); }
  62% { transform: translateY(-8px) scale(1.08) rotate(-3deg); }
  82% { transform: translateY(-11px) scale(1.14) rotate(2deg); }
  100% { opacity: 1; transform: translateY(-9px) scale(1.08) rotate(0deg); }
}
@keyframes rift-rare-egg-glow {
  from { filter: drop-shadow(0 0 14px rgba(255, 242, 161, 0.42)) drop-shadow(0 16px 20px rgba(0,0,0,0.45)); }
  to { filter: drop-shadow(0 0 28px rgba(115, 234, 255, 0.52)) drop-shadow(0 20px 22px rgba(0,0,0,0.45)); }
}
@keyframes rift-rare-egg-crack {
  0%, 42% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  60% { opacity: 0.86; transform: translate(-50%, -50%) scale(0.84); }
  82% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
.fusion-stone-t3-img,
.fusion-stone-t3-result {
  object-fit: contain;
}
@media (max-width: 860px), (max-height: 560px) {
  .rift-card {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .rift-head {
    align-items: stretch;
    flex-direction: column;
  }
  .rift-lobby {
    grid-template-columns: 1fr;
  }
  .rift-rule-grid,
  .rift-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rift-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rift-reward-stage {
    height: clamp(260px, 44vh, 370px);
  }
  .rift-rare-reveal-stage {
    height: clamp(250px, 46vh, 340px);
  }
  .rift-rare-reveal-art {
    --rift-reveal-frame: clamp(138px, 36vw, 190px);
  }
  .rift-reward-stage {
    --rift-reward-frame: clamp(260px, 68vw, 370px);
  }
}
@media (max-width: 520px) {
  .modal-card.rift-reward-card,
  .rift-reward-card {
    width: calc(100vw - 28px);
    max-width: calc(100vw - 28px);
    min-width: 0;
    max-height: calc(100dvh - 16px);
    padding: 12px;
  }
  .rift-reward-stage {
    height: clamp(190px, 32vh, 250px);
    margin: -4px -4px 10px;
  }
  .rift-rare-reveal-stage {
    height: clamp(208px, 42vh, 280px);
    margin: -4px -4px 0;
  }
  .rift-rare-reveal-art {
    --rift-reveal-frame: clamp(132px, 46vw, 174px);
  }
  .rift-rare-reveal-art.estate-elephant-bike-unlock-art {
    --rift-reveal-frame: clamp(172px, 58vw, 224px);
  }
  .rift-rare-reveal-copy {
    gap: 4px;
    padding: 12px 8px 4px;
  }
  .rift-rare-reveal-copy h2 {
    font-size: 1.35rem;
    line-height: 1.06;
  }
  .rift-rare-reveal-copy p {
    font-size: 0.8rem;
    line-height: 1.28;
  }
  .rift-reward-stage {
    --rift-reward-frame: clamp(210px, 64vw, 270px);
  }
  .rift-reward-opening-card {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding: 10px;
  }
  .rift-reward-opening-card .rift-reward-stage {
    --rift-reward-frame: clamp(250px, 72vw, 340px);
    width: 100%;
    height: clamp(270px, 72vw, 360px);
    margin: 0;
    border-radius: 10px;
  }
  .rift-reward-opening-card .rift-reward-opening-title {
    bottom: 14px;
  }
  .rift-reward-opening-card .rift-reward-opening-title h2 {
    font-size: clamp(1.18rem, 6vw, 1.65rem);
  }
  .rift-reward-head {
    align-items: flex-start;
    padding-right: 76px;
  }
  .rift-reward-head h2 {
    font-size: 1.34rem;
    line-height: 1.08;
  }
  .rift-reward-head p {
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .rift-reward-head > button {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 34px;
    padding: 0 12px;
  }
  .rift-reward-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .rift-reward-grid article {
    grid-template-columns: 38px 1fr;
    justify-items: start;
    align-items: center;
    padding: 8px 6px;
    gap: 2px 10px;
    min-height: 50px;
  }
  .rift-reward-grid img,
  .rift-reward-grid strong {
    width: 34px;
    height: 34px;
    grid-row: 1 / span 2;
  }
  .rift-reward-grid span {
    font-size: 0.8rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .rift-reward-grid em {
    font-size: 0.67rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .rift-reward-card .rift-copy {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .rift-reward-card .dialogue-actions {
    gap: 8px;
    margin-top: 10px;
  }
  .rift-reward-card .dialogue-actions button {
    flex: 1 1 100%;
    min-height: 34px;
    padding: 0 10px;
  }
  .rift-reward-card #riftRewardAgain {
    flex-basis: 100%;
  }
  .rift-private-row,
  .rift-size-row {
    align-items: stretch;
    flex-direction: column;
  }
  .rift-size-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .rift-size-buttons button {
    width: 100%;
  }
  .rift-team-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .rift-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding:
      max(8px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
    gap: 8px;
    border-radius: 0;
    overflow: hidden;
  }
  html.is-touch .rift-head {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
  }
  html.is-touch .rift-head h2 {
    font-size: 1.06rem;
  }
  html.is-touch .rift-head-text p,
  html.is-touch .rift-intro-copy {
    display: none;
  }
  html.is-touch #closeRiftTiers {
    min-height: 34px;
    padding: 0 10px;
  }
  html.is-touch .rift-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(250px, 0.95fr) minmax(300px, 1.1fr);
    gap: 8px;
    min-height: 0;
  }
  html.is-touch .rift-lobby,
  html.is-touch .rift-tier-section {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.is-touch .rift-lobby {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 9px;
    border-radius: 8px;
    overflow: hidden;
  }
  html.is-touch .rift-lobby-main h3 {
    font-size: 0.98rem;
  }
  html.is-touch .rift-lobby-main p {
    display: none;
  }
  html.is-touch .rift-lobby-meta {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  html.is-touch .rift-private-row,
  html.is-touch .rift-size-row {
    padding: 7px;
    gap: 6px;
  }
  html.is-touch .rift-private-row small,
  html.is-touch .rift-size-row small {
    font-size: 0.58rem;
  }
  html.is-touch .rift-private-row em {
    padding: 4px 7px;
    font-size: 0.64rem;
  }
  html.is-touch .rift-size-buttons {
    width: 100%;
    grid-template-columns: repeat(4, minmax(30px, 1fr));
  }
  html.is-touch .rift-size-buttons button {
    width: 100%;
    height: 32px;
  }
  html.is-touch .rift-team {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
  }
  html.is-touch .rift-team-head small,
  html.is-touch .rift-section-head small {
    font-size: 0.62rem;
  }
  html.is-touch .rift-section-head small {
    display: none;
  }
  html.is-touch .rift-team-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    max-height: none;
    overflow: auto;
    padding-right: 2px;
  }
  html.is-touch .rift-team-pick {
    min-height: 44px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
    padding: 5px;
  }
  html.is-touch .rift-team-pick img {
    width: 34px;
    height: 34px;
  }
  html.is-touch .rift-team-pick strong {
    font-size: 0.74rem;
  }
  html.is-touch .rift-team-pick small {
    font-size: 0.58rem;
    line-height: 1.15;
  }
  html.is-touch #riftStartPrivate {
    position: relative;
    bottom: auto;
    z-index: 2;
    min-height: 36px;
    font-size: 0.82rem;
  }
  html.is-touch .rift-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  html.is-touch .rift-tier {
    padding: 7px;
    gap: 4px;
  }
  html.is-touch .rift-tier div {
    gap: 5px;
  }
  html.is-touch .rift-tier strong {
    font-size: 0.84rem;
  }
  html.is-touch .rift-tier span {
    padding: 2px 5px;
    font-size: 0.58rem;
  }
  html.is-touch .rift-tier h3 {
    font-size: 0.76rem;
    line-height: 1.08;
  }
  html.is-touch .rift-tier p,
  html.is-touch .rift-tier small {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.14;
  }
  html.is-touch .rift-tier button {
    min-height: 32px;
    margin-top: 0;
    padding: 0 8px;
    font-size: 0.72rem;
  }
  html.is-touch .rift-card > .dialogue-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-top: 0;
    padding-top: 0;
  }
  html.is-touch .rift-card > .dialogue-actions button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
  }
}
@media (max-width: 720px) and (orientation: landscape) {
  html.is-touch .rift-body {
    grid-template-columns: minmax(220px, 0.95fr) minmax(240px, 1.05fr);
  }
  html.is-touch .rift-lobby-meta {
    grid-template-columns: 1fr;
  }
  html.is-touch .rift-team-list {
    grid-template-columns: 1fr;
  }
  html.is-touch .rift-tier p {
    display: none;
  }
}

.fusion-reactor-start-scene {
  position: relative;
  width: min(960px, calc(100vw - 28px));
  height: min(680px, calc(100vh - 28px));
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(4, 7, 13, 0.1), rgba(3, 5, 10, 0.72)),
    url("assets/maps/fusion-reactor-map.webp?v=fusion-reactor-1") center / cover no-repeat,
    #050912;
  border: 1px solid rgba(115, 234, 255, 0.28);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62);
}
.fusion-reactor-start-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 36%, rgba(115, 234, 255, 0.22), transparent 30%),
    radial-gradient(circle at 58% 42%, rgba(255, 214, 106, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.56));
}
.fusion-reactor-start-machine {
  position: absolute;
  left: 50%;
  top: 5%;
  width: min(620px, 76%);
  transform: translateX(-50%);
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.42));
}
.fusion-reactor-start-stage {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(300px, 34vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  overflow: hidden;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 18px rgba(115, 234, 255, 0.7)) drop-shadow(0 0 30px rgba(255, 214, 106, 0.48));
}
.fusion-reactor-start-sheet {
  width: var(--fusion-reactor-frame);
  height: var(--fusion-reactor-frame);
  background-image: var(--fusion-reactor-sheet);
  background-repeat: no-repeat;
  background-size: var(--fusion-reactor-strip) var(--fusion-reactor-frame);
  transform-origin: top left;
  scale: calc(min(300px, 34vw) / var(--fusion-reactor-frame));
  animation: fusion-reactor-sheet var(--fusion-reactor-duration) steps(11, end) forwards;
}
@keyframes fusion-reactor-sheet {
  to { background-position: var(--fusion-reactor-travel) 0; }
}
.fusion-reactor-start-scene .dig-caption {
  left: 50%;
  right: auto;
  bottom: 28px;
  width: min(520px, calc(100% - 36px));
  transform: translateX(-50%);
}
.fusion-start-result {
  width: min(460px, calc(100vw - 28px));
}

.atlas-chip.here {
  border-color: rgba(240, 180, 64, 0.6);
  background: linear-gradient(180deg, rgba(240, 180, 64, 0.16), transparent), var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(240, 180, 64, 0.2);
  animation: atlas-here-pulse 2.2s ease-in-out infinite;
}
.atlas-chip.fly { border-color: rgba(125, 240, 255, 0.4); }
.atlas-chip.fly:hover { border-color: rgba(125, 240, 255, 0.75); background: rgba(125, 240, 255, 0.12); }
.atlas-chip.been { opacity: 0.85; }
.atlas-chip.locked { opacity: 0.42; border-style: dashed; }
.atlas-chip.locked .atlas-chip-mark { color: rgba(233, 240, 247, 0.45); }
.atlas-chip.locked.has-player,
.atlas-chip.dim.has-player,
.atlas-chip.player-match {
  opacity: 0.95;
}
.atlas-chip.match {
  border-color: rgba(125, 240, 255, 0.7);
  background: linear-gradient(180deg, rgba(125, 240, 255, 0.14), transparent), var(--panel-2);
}
.atlas-chip.dim { opacity: 0.32; }
.atlas-chip.map-search-hidden { display: none; }

@keyframes atlas-here-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(240, 180, 64, 0.2); }
  50% { box-shadow: inset 0 0 0 1px rgba(240, 180, 64, 0.5), 0 0 12px rgba(240, 180, 64, 0.25); }
}

@media (max-width: 720px) {
  .atlas-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .atlas-chips { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-chip.here { animation: none; }
  button.atlas-chip:hover { transform: none; }
}

/* ---- Enemy team tracker (team icons) ---- */
/* Sits as a pill ABOVE the enemy combat card (over the container), not under
   the name. Absolute relative to .combatant.enemy (position: absolute). */
.combatant.enemy .team-dots {
  position: absolute;
  top: -32px;
  right: 0;
  display: flex;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(13, 17, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  z-index: 4;
}
.team-dots.hidden { display: none !important; }

.team-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 18%, #e8443a 19% 50%, #b9302a 51% 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  position: relative;
}
.team-dot::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgba(20, 22, 28, 0.7);
}
.team-dot.down {
  background: radial-gradient(circle at 34% 30%, #aeb4bd 0 18%, #6b7079 19% 50%, #44474e 51% 100%);
  border-color: rgba(255, 255, 255, 0.25);
  opacity: 0.55;
}
.team-dot.active {
  box-shadow: 0 0 8px 1px #ffd23f, 0 1px 2px rgba(0, 0, 0, 0.45);
  border-color: #ffe9a8;
  transform: scale(1.12);
}

/* ---- Codex ---- */
.dex-modal { max-width: 820px; }

/* ---- Codex header: title + progress chips + search/filter --------------- */
.dex-head {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}
.dex-head h2 { margin: 0; }
.dex-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.dex-chip {
  padding: 3px 9px;
  border: 1px solid rgba(8, 8, 8, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 10.5px;
  font-weight: 700;
  color: #2c2c2c;
  white-space: nowrap;
}
.dex-chip.on {
  color: #7a5a10;
  border-color: rgba(170, 130, 30, 0.5);
  background: rgba(240, 200, 90, 0.22);
}
.dex-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#dexSearch {
  flex: 1 1 160px;
  min-width: 130px;
  padding: 7px 12px;
  border: 1px solid rgba(8, 8, 8, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #080808;
  font: inherit;
  font-size: 12.5px;
}
#dexSearch::placeholder { color: rgba(8, 8, 8, 0.4); }
#dexSearch:focus { outline: none; border-color: rgba(170, 130, 30, 0.65); }
.dex-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.dex-filter button {
  min-height: 0;
  padding: 6px 11px;
  border: 1px solid rgba(8, 8, 8, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: none;
  font-size: 11px;
  font-weight: 800;
  color: #080808;
}
.dex-filter button.is-selected {
  color: #fff;
  background: #111;
  border-color: #111;
}
.dex-hidden { display: none !important; }

.dex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: stretch;
  gap: 12px;
  margin: 14px 0 6px;
  max-height: 58vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 4px 10px 2px;
}

.dex-art-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  min-height: 92px;
  flex-wrap: nowrap;
}
.dex-arrow {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 900;
  font-size: 16px;
  line-height: 1;
}

.dex-form-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 82px;
  display: grid;
  grid-template-rows: auto 18px;
  gap: 3px;
  justify-items: stretch;
}

.dex-form-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 11px;
  background: rgba(4, 8, 14, 0.3);
}

/* Per-form reveal: locked -> grey (seen) -> colour (owned). */
.dex-form {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  flex: 0 0 auto;
}
.dex-form.face-right { transform: scaleX(-1); }
.dex-form.species-aethlet.stage-1,
.dex-form.species-aethletfire.stage-1,
.dex-form.species-aethletstone.stage-1,
.dex-form.species-aethletastral.stage-1 {
  scale: 1.4;
}
.dex-form.caught { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
.dex-form.seen { filter: brightness(0.42) grayscale(0.85) contrast(0.9); }
.dex-form.locked {
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  color: rgba(255, 255, 255, 0.14);
  font-size: 26px;
  font-weight: 900;
}

.dex-form-mark {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 26, 35, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dex-form-slot.is-caught .dex-form-mark {
  border-color: #b9f6da;
  background: #39b77a;
  box-shadow: 0 0 0 2px rgba(57, 183, 122, 0.16), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.dex-form-slot.is-seen .dex-form-mark {
  border-color: rgba(225, 232, 241, 0.75);
  background: #8793a2;
}
.dex-form-slot.is-locked .dex-form-mark {
  opacity: 0.38;
}

.dex-form-name {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: rgba(233, 240, 247, 0.78);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dex-form-slot.is-locked .dex-form-name { color: rgba(233, 240, 247, 0.3); }

.dex-card {
  --dex-line-accent: #8aa0b8;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  min-height: 190px;
  height: 100%;
  padding: 10px;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(13, 17, 24, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  content-visibility: auto;
  contain-intrinsic-size: auto 190px;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.dex-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--dex-line-accent);
  opacity: 0.78;
}
.dex-card.clickable:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
}
.dex-card.clickable:focus-visible {
  outline: 3px solid rgba(238, 190, 70, 0.58);
  outline-offset: 1px;
}
.dex-card.caught { border-color: rgba(111, 214, 168, 0.48); background: rgba(20, 30, 26, 0.88); }
.dex-card.partial { border-color: rgba(232, 190, 82, 0.35); background: rgba(30, 27, 19, 0.84); }
.dex-card.seen { border-color: rgba(255, 255, 255, 0.12); }
.dex-card.unknown { color: rgba(233, 240, 247, 0.4); }

.dex-line-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dex-no {
  position: static;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.35);
}

.dex-line-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dex-type { font-size: 10.5px; color: rgba(233, 240, 247, 0.6); }
.dex-line-meta {
  min-width: 0;
  min-height: 23px;
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.dex-line-meta .dex-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dex-line-meta .power-badges {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin: 0;
}
.dex-ability {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dex-lore {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.28;
  color: rgba(233, 240, 247, 0.64);
}
.dex-state {
  position: static;
  justify-self: end;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.dex-card.caught .dex-state { color: #6fd6a8; background: rgba(111, 214, 168, 0.14); }
.dex-card.partial .dex-state { color: #c89222; background: rgba(218, 171, 62, 0.14); }
.dex-card.unknown::before { opacity: 0.2; }

@media (max-width: 700px) {
  .dex-grid { grid-template-columns: 1fr; }
}

/* ---- Journal ---- */
.journal-modal {
  width: min(1180px, calc(100vw - 36px));
  max-width: 1180px;
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  color: #11151b;
}

.journal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.journal-head > div:first-child {
  min-width: 0;
}

.journal-kicker {
  display: block;
  margin-bottom: 3px;
  color: rgba(17, 21, 27, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journal-head h2 {
  margin-bottom: 4px;
}

.journal-head p {
  margin: 0;
  max-width: 760px;
  color: rgba(17, 21, 27, 0.72);
  line-height: 1.42;
}

.journal-stats {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 7px;
  flex: 0 0 auto;
}

.journal-stats span,
.journal-tags span,
.journal-loc,
.journal-panel-title span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(17, 21, 27, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 21, 27, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}

.journal-stats strong {
  margin-right: 3px;
  color: #11151b;
}

.journal-search {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.journal-search span {
  color: rgba(17, 21, 27, 0.66);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.journal-search input {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 7px;
  font: inherit;
}

.journal-dashboard {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(320px, 1.15fr);
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}

.journal-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 248, 250, 0.72)),
    rgba(255, 255, 255, 0.76);
}

.journal-panel h3 {
  margin: 0;
  color: #11151b;
  font-size: 0.93rem;
  line-height: 1.1;
}

.journal-panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.journal-scroll {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 2px;
}

.monster-finder-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) max-content;
  align-items: stretch;
  gap: 10px;
}

.journal-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.journal-filter-tabs button {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 7px;
  color: rgba(17, 21, 27, 0.72);
  background: rgba(17, 21, 27, 0.06);
  border-color: rgba(17, 21, 27, 0.12);
  box-shadow: none;
  font-size: 0.72rem;
  font-weight: 900;
}

.journal-filter-tabs button.active,
.journal-filter-tabs button:hover {
  color: #0f1720;
  background: rgba(94, 201, 167, 0.22);
  border-color: rgba(22, 132, 98, 0.3);
}

.monster-finder-panel {
  flex: 1 1 auto;
}

.worker-finder-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 120;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #11151b;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(17, 21, 27, 0.18);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  font-size: 1.34rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
}

.worker-finder-close:hover {
  color: #05070a;
  background: #fff;
  border-color: rgba(17, 21, 27, 0.32);
}

.monster-finder-modal .world-modal-close {
  display: none !important;
}

.monster-finder-scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-content: normal;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.monster-finder-scroll .journal-monster-card {
  flex: 0 0 auto;
  width: 100%;
}

.worker-finder-modal {
  min-height: 0;
}

.worker-finder-modal .journal-head,
.worker-finder-modal .journal-panel-title {
  flex: 0 0 auto;
}

.worker-finder-modal .monster-finder-panel {
  flex: 1 1 0;
  min-height: 0;
}

.worker-finder-modal .monster-finder-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.journal-quest-card,
.journal-note,
.journal-monster-card {
  min-width: 0;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: none;
}

.journal-quest-card {
  padding: 10px;
}

.journal-quest-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.84rem;
}

.journal-quest-card p {
  margin: 0;
  color: rgba(17, 21, 27, 0.72);
  font-size: 0.82rem;
  line-height: 1.38;
}

.journal-anchor-card {
  display: grid;
  gap: 8px;
}

.journal-anchor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.journal-anchor-head strong {
  margin-bottom: 0;
}

.journal-anchor-head span {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(39, 46, 58, 0.1);
  color: rgba(17, 21, 27, 0.76);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.journal-anchor-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.journal-anchor-cell {
  min-width: 0;
  min-height: 58px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background: rgba(247, 249, 252, 0.92);
}

.journal-anchor-cell img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.journal-anchor-cell span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(17, 21, 27, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
}

.journal-anchor-cell.found {
  border-color: rgba(94, 201, 167, 0.55);
  background: rgba(232, 255, 247, 0.95);
}

.journal-anchor-cell.missing {
  opacity: 0.58;
}

.journal-anchor-cell.missing img {
  filter: grayscale(1);
}

.journal-area-summary {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.journal-area-summary span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgba(17, 21, 27, 0.055);
  color: rgba(17, 21, 27, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

.journal-area-list {
  display: grid;
  gap: 5px;
}

.journal-area-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 8px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
}

.journal-area-row span,
.journal-area-row em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal-area-row em {
  color: rgba(17, 21, 27, 0.58);
  font-style: normal;
  font-weight: 750;
}

.journal-note {
  padding: 9px 10px;
}

.journal-row-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 9px;
  min-width: 0;
}

.journal-row-title strong,
.journal-row-title span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.journal-row-title strong {
  color: #11151b;
  font-size: 0.86rem;
}

.journal-row-title span {
  color: rgba(17, 21, 27, 0.56);
  font-size: 0.72rem;
  font-weight: 850;
}

.journal-note p {
  margin: 6px 0 8px;
  color: rgba(17, 21, 27, 0.74);
  font-size: 0.8rem;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.journal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.journal-tags span {
  min-height: 20px;
  padding: 2px 6px;
  font-size: 0.66rem;
}

.journal-monster-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  min-height: 82px;
  height: auto;
  padding: 8px;
  overflow: visible;
}

.journal-monster-card img {
  align-self: center;
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(17, 21, 27, 0.18));
}

.journal-monster-card.is-uncaught img {
  opacity: 0.92;
  filter: brightness(0) saturate(0) drop-shadow(0 4px 8px rgba(17, 21, 27, 0.28));
}

.journal-monster-main {
  min-width: 0;
  align-self: stretch;
  display: grid;
  gap: 5px;
}

.journal-locs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
}

.journal-loc {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
  max-width: 170px;
  min-height: 32px;
  border-radius: 8px;
  white-space: normal;
}

.journal-loc.visited {
  border-color: rgba(23, 122, 92, 0.26);
  background: rgba(232, 248, 241, 0.82);
}

.journal-loc.locked {
  border-color: rgba(118, 92, 23, 0.24);
  background: rgba(255, 246, 220, 0.78);
  color: rgba(77, 58, 20, 0.74);
}

.journal-loc strong,
.journal-loc em {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.journal-loc strong {
  color: #11151b;
  font-size: 0.68rem;
}

.journal-loc em {
  color: rgba(17, 21, 27, 0.56);
  font-style: normal;
  font-size: 0.64rem;
}

.journal-loc.more {
  justify-content: center;
  align-items: center;
  min-height: 32px;
}

.journal-monster-card button {
  align-self: center;
  min-width: 64px;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 900;
}

.journal-monster-card button:disabled {
  opacity: 0.48;
}

.journal-empty,
.journal-muted {
  padding: 12px;
  border: 1px dashed rgba(17, 21, 27, 0.18);
  border-radius: 8px;
  color: rgba(17, 21, 27, 0.56);
  background: rgba(255, 255, 255, 0.48);
  font-size: 0.8rem;
  font-weight: 750;
}

.journal-empty.compact {
  padding: 8px;
  font-size: 0.74rem;
}

.journal-modal .dialogue-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

@media (max-width: 820px) {
  .journal-modal {
    width: calc(100vw - 18px);
    max-height: calc(100dvh - 18px);
  }

  .journal-head {
    flex-direction: column;
    gap: 9px;
  }

  .journal-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .journal-dashboard {
    grid-template-columns: 1fr;
    overflow: auto;
    padding-right: 2px;
  }

  .monster-finder-controls {
    grid-template-columns: 1fr;
  }

  .journal-filter-tabs {
    justify-content: flex-start;
  }

  .journal-panel {
    min-height: 220px;
  }

  .journal-monster-card {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .journal-monster-card button {
    grid-column: 2;
    justify-self: start;
  }
}

/* ---- Epic Water FX ---- */
.fx-droplet {
  width: 13px;
  height: 17px;
  border-radius: 52% 52% 50% 50% / 64% 64% 42% 42%;
  background: radial-gradient(circle at 42% 30%, #fff, currentColor 62%, transparent 92%) !important;
  filter: drop-shadow(0 0 6px currentColor);
  animation: burst-out 820ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

.fx-foam {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent !important;
  border: 3px solid;
  box-shadow: 0 0 12px currentColor, inset 0 0 9px rgba(255, 255, 255, 0.85);
  animation: burst-out 860ms cubic-bezier(0.2, 0.7, 0.25, 1) forwards;
}

.fx-vortex {
  width: var(--vsize, 150px);
  height: var(--vsize, 150px);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  animation: vortex-spin 900ms cubic-bezier(0.3, 0.6, 0.2, 1) forwards;
}

@keyframes vortex-spin {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  25% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.15) rotate(220deg); }
  60% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.7) rotate(620deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(1000deg); }
}

/* Full-screen water wash for the heavy moves */
.fx-layer.fx-tsunami::before,
.fx-layer.fx-maelstrom::before,
.fx-layer.fx-surge::before,
.fx-layer.fx-torrent::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 62% 42%, rgba(120, 210, 255, 0.30), rgba(20, 110, 175, 0.16) 55%, transparent 75%);
  animation: water-wash 1080ms ease-out forwards;
}
.fx-layer.fx-maelstrom::before { animation-duration: 1280ms; background: radial-gradient(circle at 60% 42%, rgba(150, 225, 255, 0.38), rgba(12, 80, 140, 0.22) 55%, transparent 78%); }
.fx-layer.fx-surge::before { animation-duration: 860ms; }

@keyframes water-wash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Prismarch — affinity-shift morph + four signature move FX ========= */

/* The caster blows out to a point of pure light, then re-materialises in its
   new affinity form. The src is swapped at ~41% — inside the white-out — so
   the eye reads it as a true transformation. */
.combatant.morphing img {
  animation: prism-morph 1250ms cubic-bezier(0.3, 0.6, 0.2, 1) both;
  filter: drop-shadow(0 0 18px #9be7ff) drop-shadow(0 0 30px #ff5db1);
}
@keyframes prism-morph {
  0%   { transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1) contrast(1); }
  14%  { transform: scale(1.14) rotate(-5deg); filter: brightness(1.7) saturate(1.5); }
  30%  { transform: scale(0.66) rotate(7deg); filter: brightness(5.5) saturate(0.15) contrast(0.3); }
  41%  { transform: scale(0.34) rotate(0deg); filter: brightness(11) saturate(0) contrast(0.1); opacity: 0.9; }
  52%  { transform: scale(1.22) rotate(5deg); filter: brightness(3) saturate(1.7); opacity: 1; }
  68%  { transform: scale(0.94) rotate(-2deg); filter: brightness(1.35) saturate(1.3); }
  84%  { transform: scale(1.06); filter: brightness(1.12) saturate(1.12); }
  100% { transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1) contrast(1); }
}

/* A spinning prismatic refraction over the whole stage during the shift. */
.fx-layer.fx-morph::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(155, 231, 255, 0.30), rgba(255, 233, 168, 0.30), rgba(255, 107, 58, 0.28),
    rgba(189, 239, 255, 0.30), rgba(201, 160, 255, 0.30), rgba(155, 231, 255, 0.30));
  mix-blend-mode: screen;
  animation: morph-refract 1250ms ease-in-out forwards;
}
@keyframes morph-refract {
  0% { opacity: 0; transform: rotate(0deg) scale(0.6); }
  30% { opacity: 1; }
  70% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(260deg) scale(1.25); }
}

/* The rising pillar of light the new form steps out of. */
.fx-morph-column {
  width: 56px; height: 150px;
  border-radius: 50% 50% 14px 14px;
  transform-origin: 50% 100%;
  opacity: 0; mix-blend-mode: screen;
  filter: blur(2px);
  animation: morph-column 1250ms cubic-bezier(0.25, 0.7, 0.2, 1) forwards;
}
@keyframes morph-column {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleY(0.1) scaleX(0.5); }
  30% { opacity: 0.95; transform: translate(-50%, -64%) scaleY(1) scaleX(1); }
  60% { opacity: 0.9; transform: translate(-50%, -64%) scaleY(1.05) scaleX(1.1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scaleY(1.2) scaleX(0.7); }
}

/* ===== "Schaufeln" — the buried magic-stone dig reveal ==================== */
.dig-scene {
  position: relative;
  width: min(560px, 92vw); height: min(440px, 74vh);
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #5a4631, #2c2014 60%, #160f08);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  display: grid; place-items: center;
}
.dig-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 64%, rgba(0, 0, 0, 0.45), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 22px);
}
.dig-rays {
  position: absolute; left: 50%; top: 56%;
  width: 460px; height: 460px; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0 8deg, color-mix(in srgb, var(--stone) 70%, transparent) 8deg 14deg, transparent 14deg 30deg);
  opacity: 0; mix-blend-mode: screen;
  animation: dig-rays 2700ms ease-in forwards;
}
@keyframes dig-rays {
  0%, 48% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  64% { opacity: 0.85; }
  100% { opacity: 0.95; transform: translate(-50%, -50%) rotate(140deg) scale(1.1); }
}
.dig-mound {
  position: absolute; left: 50%; top: 58%;
  width: 200px; height: 96px; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 100%, #6b5436, #3a2c19 70%, transparent 72%);
}
.dig-shovel-img {
  position: absolute;
  left: 58%;
  top: -76px;
  z-index: 3;
  width: 178px;
  height: 178px;
  object-fit: contain;
  transform-origin: 60% 80%;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.42));
  animation: dig-shovel 540ms cubic-bezier(0.32, 0.02, 0.28, 1) 4;
}
@keyframes dig-shovel {
  0% { transform: translate(-50%, -4px) rotate(-42deg); }
  36% { transform: translate(-22%, 24px) rotate(15deg) scale(1.03); }
  52% { transform: translate(-20%, 30px) rotate(19deg) scale(0.98); }
  100% { transform: translate(-52%, -6px) rotate(-36deg); }
}
.dig-clod {
  position: absolute; left: 50%; top: 50%;
  z-index: 4;
  width: 9px; height: 9px; border-radius: 40%;
  background: #6b5436; opacity: 0;
  animation: dig-clod 560ms ease-out calc(var(--i) * 90ms) 3;
}
@keyframes dig-clod {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + (var(--i) - 6) * 26px), -120px) scale(0.4) rotate(220deg);
  }
}
.dig-stone-img {
  position: absolute; left: 50%; top: 56%;
  z-index: 2;
  width: 104px; height: 104px; object-fit: contain;
  transform: translate(-50%, 60px) scale(0.3);
  filter: drop-shadow(0 0 18px var(--stone)) drop-shadow(0 0 34px var(--stone));
  opacity: 0;
  animation: dig-stone 2700ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes dig-stone {
  0%, 50% { opacity: 0; transform: translate(-50%, 60px) scale(0.3); }
  64% { opacity: 1; transform: translate(-50%, -70px) scale(1.12); }
  78% { transform: translate(-50%, -58px) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -58px) scale(1) rotate(0deg); }
}
.dig-flash {
  position: absolute; left: 50%; top: 44%;
  width: 40px; height: 40px; transform: translate(-50%, -50%);
  border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, var(--stone) 45%, transparent 72%);
  animation: dig-flash 700ms ease-out 1500ms forwards;
}
@keyframes dig-flash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}
.dig-sparks span {
  position: absolute; left: 50%; top: 46%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--stone2); box-shadow: 0 0 10px var(--stone);
  opacity: 0;
  animation: dig-spark 900ms ease-out calc(1500ms + var(--i) * 22ms) forwards;
}
@keyframes dig-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + cos(var(--i) * 18deg + var(--sj, 0deg)) * var(--sr, 150px)),
                calc(-50% + sin(var(--i) * 18deg + var(--sj, 0deg)) * var(--sr, 150px))) scale(0.3);
  }
}
.dig-caption {
  position: absolute; left: 0; right: 0; bottom: 20px; text-align: center;
  color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.dig-caption h2 { margin: 0 0 4px; font-size: 1.2rem; }
.dig-caption p { margin: 0; opacity: 0.85; font-size: 0.92rem; }

/* ===== Epic dig rework ====================================================
   3 readable shovel strikes (thud + clods + dust + jolt, hole/pile grow) ->
   glowing fissures glint -> eruption (flash, shock ring, rays, sparks,
   falling debris) -> stone settles. Scoped to .dig-scene--epic so the many
   scenes reusing the base dig classes are unaffected. */
.dig-scene--epic {
  animation: dig-quake 1900ms linear;
}
@keyframes dig-quake {
  0%, 12%, 18%, 45%, 52%, 78%, 86%, 100% { transform: translate(0, 0); }
  14% { transform: translate(0, 2px); }
  15% { transform: translate(-1px, 1px); }
  47% { transform: translate(0, 4px); }
  48% { transform: translate(-2px, 2px); }
  80% { transform: translate(-3px, 8px) scale(1.012); }
  82% { transform: translate(2px, 3px); }
}

.dig-scene--epic .dig-motes span {
  position: absolute;
  left: calc(7% + var(--i) * 10.5%);
  top: calc(16% + var(--i) * 6.5%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 233, 188, 0.5);
  filter: blur(1px);
  opacity: 0;
  animation: dig-mote-epic 3200ms ease-in-out calc(var(--i) * 260ms) infinite;
}
@keyframes dig-mote-epic {
  0%, 100% { opacity: 0; transform: translateY(6px); }
  35% { opacity: 0.4; }
  60% { opacity: 0.22; transform: translateY(-12px); }
}

.dig-scene--epic .dig-x {
  position: absolute; left: 50%; top: 44%;
  width: 58px; height: 42px;
  transform: translate(-50%, -50%) rotate(-5deg);
  background:
    linear-gradient(45deg, transparent 45%, rgba(238, 218, 174, 0.85) 45% 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(238, 218, 174, 0.85) 45% 55%, transparent 55%);
  opacity: 0.55;
  animation: dig-x-fade 480ms ease-out 260ms forwards;
}
@keyframes dig-x-fade {
  to { opacity: 0; transform: translate(-50%, -62%) rotate(-5deg) scale(1.18); }
}

.dig-scene--epic .dig-hole {
  position: absolute; left: 50%; top: 52%;
  width: 104px; height: 46px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, #07050a 0 55%, #1c1208 78%, transparent 80%);
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.85);
  animation: dig-hole-epic 1900ms ease-out forwards;
}
@keyframes dig-hole-epic {
  0%, 13% { transform: translate(-50%, -50%) scale(0); }
  20%, 46% { transform: translate(-50%, -50%) scale(0.45); }
  53%, 79% { transform: translate(-50%, -50%) scale(0.72); }
  86%, 100% { transform: translate(-50%, -50%) scale(1); }
}

.dig-scene--epic .dig-pile {
  position: absolute; left: 76%; top: 34%;
  width: 92px; height: 46px;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: 50% 100%;
  border-radius: 48% 52% 30% 30% / 90% 88% 22% 24%;
  background: radial-gradient(ellipse at 50% 100%, #7d6440, #4a3820 72%, #33240f);
  box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.4);
  animation: dig-pile-epic 1900ms ease-out forwards;
}
@keyframes dig-pile-epic {
  0%, 15% { transform: translate(-50%, -50%) scale(0); }
  22%, 48% { transform: translate(-50%, -50%) scale(0.5); }
  55%, 81% { transform: translate(-50%, -50%) scale(0.78); }
  88%, 100% { transform: translate(-50%, -50%) scale(1); }
}

/* Three full strike cycles in one timeline, then the shovel rests and is
   pulled aside just before the eruption. */
.dig-scene--epic .dig-shovel-img {
  animation:
    dig-shovel-epic 1900ms cubic-bezier(0.4, 0.05, 0.3, 1) both,
    dig-shovel-exit 320ms cubic-bezier(0.3, 0.5, 0.5, 1) 2560ms forwards;
}
@keyframes dig-shovel-epic {
  0% { transform: translate(-52%, -10px) rotate(-42deg); }
  6% { transform: translate(-55%, -14px) rotate(-48deg); }
  14% { transform: translate(-20%, 24px) rotate(16deg) scale(1.02); }
  20% { transform: translate(-15%, 26px) rotate(20deg) scale(0.99); }
  27% { transform: translate(-40%, 2px) rotate(-22deg); }
  33% { transform: translate(-52%, -14px) rotate(-46deg); }
  39% { transform: translate(-58%, -24px) rotate(-58deg); }
  47% { transform: translate(-16%, 32px) rotate(23deg) scale(1.03); }
  53% { transform: translate(-11%, 34px) rotate(28deg) scale(0.99); }
  60% { transform: translate(-40%, -2px) rotate(-26deg); }
  66% { transform: translate(-54%, -18px) rotate(-50deg); }
  70% { transform: translate(-60%, -34px) rotate(-70deg); }
  74% { transform: translate(-61%, -36px) rotate(-72deg) scale(1.01); }
  80% { transform: translate(-12%, 40px) rotate(30deg) scale(1.06); }
  86% { transform: translate(-7%, 42px) rotate(34deg) scale(1.0); }
  100% { transform: translate(-58%, -6px) rotate(-52deg); }
}
@keyframes dig-shovel-exit {
  to { transform: translate(-130%, -64px) rotate(-140deg); opacity: 0; }
}

.dig-scene--epic .dig-clod {
  top: 46%;
  width: calc(7px + var(--j) * 2px);
  height: calc(6px + var(--j) * 2px);
  border-radius: 62% 38% 55% 45%;
  background: linear-gradient(140deg, #87703f, #5a4426 60%, #3c2c14);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  animation: dig-clod-epic 680ms cubic-bezier(0.18, 0.62, 0.45, 1) calc(var(--s) * 633ms + var(--k, var(--j)) * 34ms + 230ms) forwards;
}
@keyframes dig-clod-epic {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  42% { opacity: 1; transform: translate(calc(-50% + (var(--j) - 1.5) * (46px + var(--s) * 14px)), calc((-50% - 88px - var(--j) * 10px) * (1 + var(--s) * 0.35))) scale(0.9) rotate(160deg); }
  100% { opacity: 0; transform: translate(calc(-50% + (var(--j) - 1.5) * (64px + var(--s) * 18px)), calc(-50% + 30px)) scale(0.55) rotate(320deg); }
}

.dig-scene--epic .dig-dust {
  position: absolute; left: 50%; top: 48%;
  width: 90px; height: 36px;
  transform: translate(-50%, -50%) scale(0.2);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214, 188, 142, 0.5), rgba(150, 122, 80, 0.22) 55%, transparent 75%);
  opacity: 0;
  filter: blur(2px);
  animation: dig-dust-epic 620ms ease-out calc(var(--s) * 633ms + 250ms) both;
}
@keyframes dig-dust-epic {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  22% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1.7); }
}

.dig-scene--epic .dig-glow {
  position: absolute; left: 50%; top: 54%;
  width: 150px; height: 70px;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--stone) 80%, #fff) 0%, color-mix(in srgb, var(--stone) 45%, transparent) 45%, transparent 70%);
  opacity: 0;
  visibility: hidden;
  mix-blend-mode: screen;
  animation: dig-glow-epic 720ms ease-in-out 2150ms forwards, dig-glow-swell 520ms ease-in 3780ms forwards;
}
@keyframes dig-glow-epic {
  0% { opacity: 0; visibility: visible; transform: translate(-50%, -50%) scale(0.3); }
  55% { opacity: 0.45; transform: translate(-50%, -50%) scale(0.95); }
  100% { opacity: 0.34; visibility: visible; transform: translate(-50%, -50%) scale(0.78); }
}
@keyframes dig-glow-swell {
  to { opacity: 0.65; visibility: visible; transform: translate(-50%, -50%) scale(1.6); }
}

.dig-scene--epic .dig-fissures span {
  position: absolute; left: 50%; top: 58%;
  width: 96px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stone), transparent);
  box-shadow: 0 0 12px var(--stone), 0 0 26px color-mix(in srgb, var(--stone) 60%, transparent);
  transform-origin: 0 50%;
  transform: translate(-2px, -50%) rotate(calc(var(--i) * 86deg + 22deg)) scaleX(0);
  opacity: 0;
  mix-blend-mode: screen;
  animation:
    dig-fissure-epic 700ms cubic-bezier(0.2, 0.7, 0.3, 1) calc(1900ms + var(--i) * 90ms) forwards,
    dig-fissure-out 240ms linear 2620ms forwards;
}
@keyframes dig-fissure-epic {
  0% { opacity: 0; transform: translate(-2px, -50%) rotate(calc(var(--i) * 86deg + 22deg)) scaleX(0); }
  45% { opacity: 1; }
  100% { opacity: 0.95; transform: translate(-2px, -50%) rotate(calc(var(--i) * 86deg + 22deg)) scaleX(1); }
}
@keyframes dig-fissure-out {
  to { opacity: 0; }
}

.dig-scene--epic .dig-shock {
  position: absolute; left: 50%; top: 50%;
  margin-top: -72px;
  width: 34vmin; height: 34vmin;
  border: 0;
  background: radial-gradient(circle,
    transparent 0 54%,
    color-mix(in srgb, var(--stone) 50%, #fff) 63%,
    color-mix(in srgb, var(--stone) 26%, transparent) 69%,
    transparent 76%);
  filter: blur(6px);
  transform: translate(-50%, -50%) scale(0.2);
  border: 3px solid color-mix(in srgb, var(--stone) 80%, #fff);
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: screen;
  animation: dig-shock-epic 760ms cubic-bezier(0.16, 0.8, 0.3, 1) 2620ms forwards, dig-shock-epic-b 620ms cubic-bezier(0.16, 0.8, 0.3, 1) 3800ms forwards;
}
@keyframes dig-shock-epic {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.1); }
}
@keyframes dig-shock-epic-b {
  0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

.dig-scene--epic .dig-flash {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  mix-blend-mode: normal;
  will-change: opacity;
  transform: translateZ(0);
  background: radial-gradient(circle at 50% 44%, #fffdf6 0%, rgba(255, 243, 216, 0.85) 40%, rgba(236, 223, 192, 0.55) 72%, rgba(236, 223, 192, 0.3) 100%);
  animation: dig-flash-epic 620ms cubic-bezier(0.2, 0.6, 0.3, 1) 2600ms forwards;
}
@keyframes dig-flash-epic {
  0% { opacity: 0; }
  16% { opacity: 1; }
  100% { opacity: 0; }
}

.dig-scene--epic .dig-rays {
  top: 50%;
  margin-top: -72px;
  animation: dig-rays-epic 2200ms cubic-bezier(0.16, 0.85, 0.3, 1) 2620ms forwards;
}
@keyframes dig-rays-epic {
  0% { opacity: 0; transform: rotate(0deg) scale(0.35); }
  9% { opacity: 0.95; transform: rotate(5deg) scale(1.05); }
  100% { opacity: 0.7; transform: rotate(14deg) scale(1.12); }
}

.dig-scene--epic .dig-sparks span {
  animation: dig-spark 900ms ease-out calc(2620ms + var(--i) * 22ms) forwards;
}
.dig-scene--epic .dig-sparks span:nth-child(2n) { --sr: 118px; --sj: 7deg; }
.dig-scene--epic .dig-sparks span:nth-child(3n) { --sr: 196px; --sj: -6deg; width: 5px; height: 5px; }
.dig-scene--epic .dig-sparks span:nth-child(5n) { --sr: 236px; --sj: 3deg; }

.dig-scene--epic .dig-stone-img {
  top: 50%;
  animation: dig-stone-epic 4400ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes dig-stone-epic {
  0%, 58% { opacity: 0; visibility: hidden; transform: translate(-50%, 64px) scale(0.3) rotate(0deg); }
  61% { opacity: 1; visibility: visible; }
  68% { opacity: 1; transform: translate(-50%, -96px) scale(1.22) rotate(9deg); }
  76% { transform: translate(-50%, -66px) scale(0.98) rotate(-4deg); }
  84% { transform: translate(-50%, -78px) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translate(-50%, -72px) scale(1.03) rotate(0deg); }
}

.dig-scene--epic .dig-fall span {
  position: absolute; left: 50%; top: 46%;
  width: 6px; height: 6px; border-radius: 40%;
  background: #6b5436;
  opacity: 0;
  animation: dig-fall-epic 900ms cubic-bezier(0.5, 0, 0.8, 0.4) calc(2650ms + var(--i) * 34ms) forwards;
}
@keyframes dig-fall-epic {
  0% { opacity: 1; transform: translate(calc(-50% + (var(--i) - 4.5) * 12px), -40px) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + (var(--i) - 4.5) * 30px), 90px) scale(0.5) rotate(200deg); }
}

.lina-anchor-scene {
  background: #050712;
}
.lina-anchor-scene-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}
.lina-anchor-scene .dig-bg {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(2, 4, 12, 0.12), rgba(2, 4, 12, 0.72));
}
.lina-anchor-scene .dig-rays,
.lina-anchor-scene .dig-stone-img,
.lina-anchor-scene .dig-flash,
.lina-anchor-scene .dig-sparks,
.lina-anchor-scene .dig-caption {
  z-index: 2;
}
.lina-anchor-scene .dig-caption {
  padding: 0 22px;
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal .lina-anchor-scene {
    width: min(calc(100vw - 40px), calc((100dvh - 40px) * 16 / 9));
    height: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 40px);
    aspect-ratio: 16 / 9;
    justify-self: center;
    align-self: center;
    border-radius: 8px;
  }

  html.is-touch .modal .lina-anchor-scene-art {
    transform: none;
  }

  html.is-touch .modal .lina-anchor-scene .dig-stone-img {
    width: clamp(72px, 17dvh, 118px);
    height: clamp(72px, 17dvh, 118px);
  }

  html.is-touch .modal .lina-anchor-scene .dig-caption {
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 0 14px;
  }

  html.is-touch .modal .lina-anchor-scene .dig-caption h2 {
    font-size: clamp(0.98rem, 2.35vw, 1.18rem);
  }

  html.is-touch .modal .lina-anchor-scene .dig-caption p {
    font-size: clamp(0.7rem, 1.65vw, 0.86rem);
    line-height: 1.28;
  }
}

.dig-result { text-align: center; }
.dig-result-gem {
  position: relative; width: 96px; height: 96px; margin: 6px auto 10px;
}

.dig-result-stone {
  position: absolute;
  inset: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px var(--stone)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.3));
  animation: gem-bob 2.4s ease-in-out infinite;
}

.dig-result-gem::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  box-shadow: 0 0 30px var(--stone);
  opacity: 0.62;
  animation: gem-halo 2.4s ease-in-out infinite;
}

.dig-result-gem span {
  position: absolute; inset: 0; margin: auto;
  width: 64px; height: 78px;
  border-radius: 46% 46% 40% 40% / 52% 52% 48% 48%;
  background: linear-gradient(160deg, var(--stone2), var(--stone) 60%, color-mix(in srgb, var(--stone) 50%, #000));
  box-shadow: 0 0 22px var(--stone), inset 0 0 16px rgba(255, 255, 255, 0.8);
  animation: gem-bob 2.4s ease-in-out infinite;
}
.dig-result-gem span:nth-child(2) { opacity: 0.5; animation-delay: 0.2s; filter: blur(4px); }
.dig-result-gem span:nth-child(3) {
  width: 110px; height: 110px; border-radius: 50%; background: none;
  box-shadow: 0 0 30px var(--stone); animation: gem-halo 2.4s ease-in-out infinite;
}
@keyframes gem-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes gem-halo { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 0.85; transform: scale(1.05); } }

.prestige-relic-scene {
  background: radial-gradient(circle at 50% 42%, #19445a, #151326 58%, #070812);
}
.prestige-relic-scene .dig-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(125, 240, 255, 0.18), transparent 52%),
    repeating-linear-gradient(120deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
}
.prestige-relic-scene .dig-rays {
  top: 48%;
  width: 520px;
  height: 520px;
}
.prestige-relic-unlock-img {
  width: 154px;
  height: 154px;
  top: 47%;
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.95))
    drop-shadow(0 0 36px rgba(255, 231, 122, 0.45))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38));
}
.prestige-relic-result-gem {
  width: 112px;
  height: 112px;
}
.prestige-relic-result .dig-result-stone {
  width: 112px;
  height: 112px;
}

.reed-apex-charm-scene {
  background:
    radial-gradient(circle at 50% 34%, rgba(248, 216, 138, 0.3), transparent 36%),
    radial-gradient(circle at 50% 64%, rgba(125, 92, 255, 0.24), transparent 52%),
    linear-gradient(180deg, #15111e, #070812 68%, #03040a);
}
.reed-apex-charm-scene .dig-bg {
  background:
    radial-gradient(circle at 50% 50%, rgba(248, 216, 138, 0.16), transparent 48%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 28px);
}
.reed-apex-charm-scene .dig-rays,
.reed-apex-charm-scene .riptalon-stone-ring {
  top: 48%;
}
.reed-apex-charm-img {
  width: 160px;
  height: 160px;
  top: 47%;
  filter:
    drop-shadow(0 0 18px rgba(248, 216, 138, 0.92))
    drop-shadow(0 0 34px rgba(125, 92, 255, 0.54))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.38));
}
.reed-apex-charm-result {
  max-width: 470px;
}
.reed-apex-charm-result-gem,
.reed-apex-charm-result .dig-result-stone {
  width: 116px;
  height: 116px;
}

/* ELECTRO — Prism Storm: a relentless barrage of huge jagged bolts that
   rain straight down onto the foe, ending in one colossal strike. */
/* Riptalon Stone pickup reveal in the Fallen Sanctum. */
.riptalon-stone-scene {
  background:
    radial-gradient(circle at 50% 42%, rgba(35, 215, 255, 0.2), transparent 46%),
    radial-gradient(circle at 50% 70%, #101827, #080711 60%, #02030a);
}
.riptalon-stone-scene .dig-rays {
  top: 50%;
  animation-duration: 3000ms;
}
.riptalon-stone-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(223, 250, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(35, 215, 255, 0), rgba(35, 215, 255, 0.12) 50%, rgba(6, 16, 31, 0));
  opacity: 0;
  mix-blend-mode: screen;
  animation: riptalon-stone-veil 2700ms ease-out forwards;
}
@keyframes riptalon-stone-veil {
  0%, 28% { opacity: 0; transform: scaleY(0.7); }
  52% { opacity: 0.9; transform: scaleY(1.04); }
  100% { opacity: 0.38; transform: scaleY(1.12); }
}
.riptalon-stone-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(66deg) scale(0.2);
  border: 3px solid var(--stone);
  box-shadow: 0 0 22px var(--stone), inset 0 0 28px var(--stone2);
  opacity: 0;
  animation: riptalon-stone-ring 2700ms cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
@keyframes riptalon-stone-ring {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotateX(66deg) scale(0.2) rotate(0deg); }
  54% { opacity: 0.95; transform: translate(-50%, -50%) rotateX(66deg) scale(0.88) rotate(150deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotateX(66deg) scale(1.35) rotate(360deg); }
}
.riptalon-stone-img {
  width: 132px;
  height: 132px;
  animation: riptalon-stone-rise 2700ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes riptalon-stone-rise {
  0%, 18% { opacity: 0; transform: translate(-50%, 22px) scale(0.3) rotate(-12deg); }
  48% { opacity: 1; transform: translate(-50%, -42px) scale(1.15) rotate(5deg); }
  72% { opacity: 1; transform: translate(-50%, -52px) scale(1) rotate(-3deg); }
  100% { opacity: 1; transform: translate(-50%, -50px) scale(1.04) rotate(0deg); }
}

.della-reward-scene {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 243, 162, 0.24), transparent 42%),
    radial-gradient(circle at 50% 72%, #2f5b37, #102316 62%, #07110b);
}

.della-reward-items {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 4;
  width: 360px;
  height: 176px;
  transform: translate(-50%, -50%);
}

.della-reward-scene .dig-rays,
.della-reward-scene .riptalon-stone-ring {
  top: 46%;
}

.della-reward-scene .dig-flash,
.della-reward-scene .dig-sparks span {
  top: 42%;
}

.della-reward-items img {
  position: absolute;
  width: 130px;
  height: 130px;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 18px var(--stone2)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.36));
  animation: della-reward-pop 2700ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}

.della-reward-key {
  left: 20px;
  top: 20px;
  transform-origin: 56% 58%;
}

.della-reward-egg {
  right: 20px;
  top: 8px;
  animation-delay: 120ms;
}

@keyframes della-reward-pop {
  0%, 22% { opacity: 0; transform: translateY(38px) scale(0.42) rotate(-12deg); }
  50% { opacity: 1; transform: translateY(-14px) scale(1.15) rotate(5deg); }
  72% { opacity: 1; transform: translateY(-6px) scale(1) rotate(-2deg); }
  100% { opacity: 1; transform: translateY(-4px) scale(1.04) rotate(0deg); }
}

.della-reward-result { max-width: 470px; }

.della-reward-result-items {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: -10px 0 28px;
  transform: translateY(-10px);
}

.della-reward-result-items .dig-result-gem {
  margin: 0;
}

.egg-hatch-scene {
  --stone: #42d8f2;
  --stone2: #fff3a2;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 243, 162, 0.28), transparent 36%),
    radial-gradient(circle at 50% 64%, rgba(66, 216, 242, 0.22), transparent 54%),
    linear-gradient(180deg, #153022, #0a1721 62%, #060a12);
}

.egg-hatch-scene .dig-rays {
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0 10deg,
    color-mix(in srgb, var(--stone) 58%, transparent) 10deg 12deg,
    transparent 12deg 24deg
  );
  opacity: 0.48;
  animation-duration: var(--egg-hatch-duration, 3300ms);
}

.egg-hatch-premium-scene .dig-rays {
  display: none;
}

.egg-hatch-aura {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.45);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.62), rgba(255, 243, 162, 0.34) 22%, rgba(66, 216, 242, 0.2) 48%, transparent 70%);
  filter: blur(1px) drop-shadow(0 0 28px rgba(66, 216, 242, 0.48));
  opacity: 0;
  animation: egg-hatch-aura var(--egg-hatch-duration, 3300ms) ease-out forwards;
}

.egg-hatch-scene .dig-flash {
  animation-delay: var(--egg-hatch-impact-delay, 1500ms);
}

.egg-hatch-scene .dig-sparks span {
  animation-delay: calc(var(--egg-hatch-impact-delay, 1500ms) + var(--i) * 22ms);
}

@keyframes egg-hatch-aura {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) scale(0.28); }
  46% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.82); }
  72% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.12); }
}

.egg-hatch-stage {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: var(--egg-hatch-frame, 384px);
  height: var(--egg-hatch-frame, 384px);
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 18px rgba(255, 243, 162, 0.4))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
}

.egg-hatch-sheet {
  width: var(--egg-hatch-frame, 384px);
  height: var(--egg-hatch-frame, 384px);
  background-image: var(--egg-hatch-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:
    var(--egg-hatch-strip, 4608px)
    var(--egg-hatch-frame, 384px);
  animation:
    egg-hatch-sheet-play var(--egg-hatch-duration, 3300ms) steps(11, end) forwards,
    egg-hatch-stage-pop var(--egg-hatch-duration, 3300ms) cubic-bezier(0.2, 0.8, 0.22, 1) forwards;
}

.egg-hatch-static-stage {
  width: 360px;
  height: 360px;
}

.egg-hatch-premium-stage {
  filter: none;
}

.egg-hatch-static {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: egg-hatch-static-pop var(--egg-hatch-duration, 2700ms) cubic-bezier(0.2, 0.8, 0.22, 1) forwards;
}

.egg-hatch-static img {
  position: relative;
  z-index: 1;
  width: min(82%, 300px);
  height: min(82%, 300px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.36))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.46));
  animation:
    egg-hatch-static-fade var(--egg-hatch-duration, 2700ms) ease-in forwards,
    egg-hatch-static-shake var(--egg-hatch-duration, 2700ms) ease-in-out forwards;
}

.egg-hatch-premium-fx {
  position: absolute;
  left: calc((100% - var(--egg-hatch-fx-frame, 384px)) / 2);
  top: calc((100% - var(--egg-hatch-fx-frame, 384px)) / 2);
  z-index: 2;
  width: var(--egg-hatch-fx-frame, 384px);
  height: var(--egg-hatch-fx-frame, 384px);
  background-image: var(--egg-hatch-fx-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:
    var(--egg-hatch-fx-strip, 4608px)
    var(--egg-hatch-fx-frame, 384px);
  filter:
    drop-shadow(0 0 10px var(--stone2, #fff3a2))
    drop-shadow(0 0 24px var(--stone, #42d8f2));
  pointer-events: none;
  animation:
    egg-hatch-premium-fx-play var(--egg-hatch-duration, 2700ms) steps(11, end) forwards,
    egg-hatch-premium-fx-fade var(--egg-hatch-duration, 2700ms) linear forwards;
}

@keyframes egg-hatch-premium-fx-play {
  to { background-position: var(--egg-hatch-fx-travel, -4224px) 0; }
}

@keyframes egg-hatch-premium-fx-fade {
  0%, 84% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes egg-hatch-static-pop {
  0% { opacity: 0; transform: translateY(24px) scale(0.62) rotate(-3deg); }
  12% { opacity: 1; transform: translateY(8px) scale(0.82) rotate(3deg); }
  38% { transform: translateY(0) scale(0.94) rotate(-3deg); }
  68% { transform: translateY(-8px) scale(1.08) rotate(2deg); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.34) rotate(0deg); }
}

@keyframes egg-hatch-static-shake {
  0%, 22% { filter: none; }
  34% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.4)); transform: translateY(0) scale(0.94) rotate(-5deg); }
  42% { transform: translateY(-2px) scale(0.98) rotate(5deg); }
  50% { transform: translateY(-4px) scale(1.02) rotate(-4deg); }
  62% { transform: translateY(-7px) scale(1.06) rotate(4deg); }
  75%, 100% { filter: drop-shadow(0 0 26px rgba(255,255,255,0.72)); }
}

@keyframes egg-hatch-static-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes egg-hatch-sheet-play {
  to { background-position: var(--egg-hatch-travel, -4224px) 0; }
}

@keyframes egg-hatch-stage-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.72) rotate(-2deg); }
  10% { opacity: 1; transform: translateY(10px) scale(0.88) rotate(2deg); }
  28% { transform: translateY(0) scale(0.96) rotate(-2deg); }
  44% { transform: translateY(-4px) scale(1.02) rotate(2deg); }
  72% { transform: translateY(-8px) scale(1.05) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(-8px) scale(1.04) rotate(0deg); }
}

.nursery-collect-scene {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 239, 153, 0.28), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(111, 220, 255, 0.18), transparent 52%),
    linear-gradient(180deg, #173025, #0a1721 62%, #060a12);
}

.nursery-collect-stage {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: min(520px, 88vw);
  height: 330px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nursery-collect-glow {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(420px, 82vw);
  height: 178px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.48), rgba(255, 240, 156, 0.28) 24%, rgba(111, 220, 255, 0.12) 52%, transparent 72%);
  filter: blur(3px) drop-shadow(0 0 28px rgba(255, 239, 153, 0.36));
  opacity: 0;
  animation: nursery-collect-glow var(--egg-duration, 2360ms) ease-out forwards;
}

.nursery-collect-egg {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--egg-z, 10);
  width: var(--egg-size, 168px);
  height: var(--egg-size, 168px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform:
    translate(calc(-50% + var(--egg-start-x, 0px)), calc(-50% + var(--egg-start-y, 96px)))
    scale(0.44)
    rotate(calc(var(--egg-rot, 0deg) - 14deg));
  animation: nursery-collect-egg-arrive var(--egg-duration, 2360ms) cubic-bezier(0.16, 0.82, 0.22, 1) forwards;
  animation-delay: var(--egg-delay, 0ms);
}

.nursery-collect-egg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.42))
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.46));
  animation: nursery-collect-egg-breathe 920ms ease-in-out infinite alternate;
}

@keyframes nursery-collect-glow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.48); }
  28% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.86); }
  70% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.03); }
  100% { opacity: 0.58; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes nursery-collect-egg-arrive {
  0% {
    opacity: 0;
    filter: blur(3px) brightness(1.22);
    transform:
      translate(calc(-50% + var(--egg-start-x, 0px)), calc(-50% + var(--egg-start-y, 96px)))
      scale(0.44)
      rotate(calc(var(--egg-rot, 0deg) - 14deg));
  }
  18% {
    opacity: 1;
  }
  46% {
    opacity: 1;
    filter: blur(0) brightness(1.12);
    transform:
      translate(calc(-50% + var(--egg-x, 0px)), calc(-50% + var(--egg-mid-y, -28px)))
      scale(1.08)
      rotate(calc(var(--egg-rot, 0deg) + 5deg));
  }
  68% {
    transform:
      translate(calc(-50% + var(--egg-x, 0px)), calc(-50% + var(--egg-y, 0px) + 7px))
      scale(0.96)
      rotate(calc(var(--egg-rot, 0deg) - 3deg));
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform:
      translate(calc(-50% + var(--egg-x, 0px)), calc(-50% + var(--egg-y, 0px)))
      scale(1)
      rotate(var(--egg-rot, 0deg));
  }
}

@keyframes nursery-collect-egg-breathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-4px) scale(1.035); }
}

.egg-hatch-result {
  max-width: 540px;
  text-align: center;
}

.egg-hatch-result-monster {
  display: grid;
  place-items: center;
  height: 226px;
  margin-bottom: 8px;
  background:
    radial-gradient(circle at 50% 64%, rgba(66, 216, 242, 0.22), transparent 50%),
    radial-gradient(circle at 50% 42%, rgba(255, 243, 162, 0.2), transparent 48%);
}

.egg-hatch-result-monster img {
  max-width: 250px;
  max-height: 220px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 243, 162, 0.45))
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42));
  animation: egg-hatch-result-rise 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.nursery-collect-result-eggs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: 10px;
  min-height: 226px;
  height: auto;
  padding: 20px 8px;
}

.nursery-collect-result-eggs img.nursery-collect-result-egg {
  width: var(--egg-result-size, 156px);
  height: var(--egg-result-size, 156px);
  max-width: var(--egg-result-size, 156px);
  max-height: var(--egg-result-size, 156px);
  animation: nursery-collect-result-pop 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
  animation-delay: var(--egg-delay, 0ms);
}

@keyframes nursery-collect-result-pop {
  0% { opacity: 0; transform: translateY(18px) scale(0.72) rotate(-5deg); }
  68% { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.phoenix-egg-scene {
  --stone: #ff8a2a;
  --stone2: #fff2a8;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 242, 168, 0.36), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(255, 111, 32, 0.26), transparent 52%),
    linear-gradient(180deg, #3b1512, #170c12 58%, #070608);
}

.phoenix-egg-scene .dig-rays {
  opacity: 0.9;
  filter: sepia(0.24) saturate(1.3);
}

.phoenix-egg-scene .egg-hatch-aura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(255, 242, 168, 0.42) 22%, rgba(255, 111, 32, 0.22) 50%, transparent 72%);
  filter:
    blur(1px)
    drop-shadow(0 0 28px rgba(255, 202, 84, 0.62))
    drop-shadow(0 0 48px rgba(255, 89, 35, 0.36));
}

.phoenix-egg-result .egg-hatch-result-monster {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 139, 46, 0.2), transparent 48%),
    radial-gradient(circle at 50% 38%, rgba(255, 242, 168, 0.24), transparent 50%);
}

.phoenix-egg-result .egg-hatch-result-monster img {
  max-width: 270px;
  max-height: 230px;
  filter:
    drop-shadow(0 0 22px rgba(255, 242, 168, 0.54))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
}

.generic-egg-scene {
  --stone: #f6f1d4;
  --stone2: #ffffff;
}

.colosseum-egg-scene {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.32), transparent 35%),
    radial-gradient(circle at 50% 66%, rgba(126, 200, 255, 0.22), transparent 54%),
    linear-gradient(180deg, #111928, #080b12 62%, #030407);
}

.colosseum-egg-receive-scene .riptalon-stone-ring {
  top: 47%;
}

.colosseum-egg-receive-items {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 4;
  width: 170px;
  height: 170px;
  transform: translate(-50%, -50%);
}

.colosseum-egg-receive-item {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter:
    drop-shadow(0 0 20px var(--stone2))
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42));
  animation: della-reward-pop 2600ms cubic-bezier(0.2, 0.82, 0.22, 1) forwards;
}

.valor-egg-scene .colosseum-egg-receive-items {
  width: 210px;
  height: 210px;
}

.colosseum-egg-result-gem {
  width: 128px;
  height: 128px;
  margin-bottom: 12px;
}

.colosseum-egg-result-gem::before {
  inset: -18px;
  box-shadow: 0 0 34px var(--stone);
}

.colosseum-egg-result-gem .dig-result-stone {
  width: 128px;
  height: 128px;
}

.colosseum-egg-receive-result {
  max-width: 430px;
}

.valor-egg-scene {
  --stone: #ffffff;
  --stone2: #7ec8ff;
}

.valor-egg-scene .egg-hatch-aura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.76), rgba(126, 200, 255, 0.4) 24%, rgba(255, 222, 106, 0.2) 52%, transparent 73%);
  filter:
    blur(1px)
    drop-shadow(0 0 28px rgba(126, 200, 255, 0.58))
    drop-shadow(0 0 48px rgba(255, 222, 106, 0.34));
}

.grace-egg-scene {
  --stone: #b06cff;
  --stone2: #ffd9ff;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 217, 255, 0.32), transparent 35%),
    radial-gradient(circle at 50% 66%, rgba(176, 108, 255, 0.24), transparent 54%),
    linear-gradient(180deg, #1c1028, #0c0714 62%, #030207);
}

.grace-egg-scene .egg-hatch-aura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.72), rgba(255, 217, 255, 0.38) 24%, rgba(176, 108, 255, 0.26) 54%, transparent 74%);
  filter:
    blur(1px)
    drop-shadow(0 0 30px rgba(196, 118, 255, 0.62))
    drop-shadow(0 0 48px rgba(255, 170, 240, 0.32));
}

.valor-egg-result .egg-hatch-result-monster {
  background:
    radial-gradient(circle at 50% 62%, rgba(126, 200, 255, 0.22), transparent 48%),
    radial-gradient(circle at 50% 38%, rgba(255, 222, 106, 0.22), transparent 50%);
}

.grace-egg-result .egg-hatch-result-monster {
  background:
    radial-gradient(circle at 50% 62%, rgba(176, 108, 255, 0.24), transparent 48%),
    radial-gradient(circle at 50% 38%, rgba(255, 217, 255, 0.2), transparent 50%);
}

.egg-hatch-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: min(460px, 100%);
  margin: 4px auto 2px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.9);
}

.egg-hatch-stats span {
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.egg-hatch-stats .wide {
  grid-column: 1 / -1;
}

.egg-hatch-stats .egg-hatch-mutation {
  color: #fff0a8;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-weight: 800;
}

@keyframes egg-hatch-result-rise {
  from { opacity: 0; transform: translateY(24px) scale(0.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 430px), (max-height: 620px) {
  .egg-hatch-stage {
    transform: translate(-50%, -50%) scale(0.82);
  }
}

.umbrael-relic-burst-scene,
.umbrael-relic-impact-scene,
.umbrael-stone-cut-scene,
.honeydew-stoneblade-awakening-scene {
  --stone: #9d55ff;
  --stone2: #f3eaff;
  background:
    radial-gradient(circle at 50% 36%, rgba(185, 119, 255, 0.24), transparent 34%),
    radial-gradient(circle at 50% 65%, rgba(20, 0, 32, 0.7), transparent 58%),
    linear-gradient(180deg, #130b1b, #08050d 64%, #030205);
}

.honeydew-stoneblade-awakening-scene {
  --stone: #7df0ff;
  --stone2: #f3eaff;
  background:
    radial-gradient(circle at 50% 36%, rgba(125, 240, 255, 0.22), transparent 34%),
    radial-gradient(circle at 50% 60%, rgba(154, 84, 255, 0.22), transparent 48%),
    radial-gradient(circle at 50% 66%, rgba(8, 0, 28, 0.72), transparent 60%),
    linear-gradient(180deg, #0d101c, #07050f 64%, #030205);
}

.aurevyr-dawn-seal-cut-scene {
  --stone: #ffd768;
  --stone2: #fff8dc;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 248, 210, 0.32), transparent 31%),
    radial-gradient(circle at 50% 58%, rgba(255, 188, 53, 0.22), transparent 48%),
    radial-gradient(circle at 50% 64%, rgba(61, 20, 89, 0.42), transparent 61%),
    linear-gradient(180deg, #171424, #0c0914 66%, #040307);
}

.rubicrust-crimson-seal-cut-scene {
  --stone: #ff5b45;
  --stone2: #ffd0a0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 97, 65, 0.34), transparent 31%),
    radial-gradient(circle at 50% 59%, rgba(132, 12, 23, 0.34), transparent 50%),
    radial-gradient(circle at 50% 66%, rgba(78, 20, 91, 0.34), transparent 62%),
    linear-gradient(180deg, #210d12, #0e070b 66%, #040204);
}

.glovemaw-champion-seal-cut-scene {
  --stone: #47d7bd;
  --stone2: #f4d983;
  background:
    radial-gradient(circle at 50% 38%, rgba(71, 215, 189, 0.29), transparent 31%),
    radial-gradient(circle at 50% 58%, rgba(210, 170, 66, 0.2), transparent 48%),
    radial-gradient(circle at 50% 65%, rgba(31, 28, 75, 0.42), transparent 61%),
    linear-gradient(180deg, #071b1d, #071013 66%, #020506);
}

.noxavyr-blackwing-seal-cut-scene {
  --stone: #b054ff;
  --stone2: #ff7354;
  background:
    radial-gradient(circle at 50% 38%, rgba(176, 84, 255, 0.3), transparent 31%),
    radial-gradient(circle at 50% 57%, rgba(167, 35, 23, 0.2), transparent 47%),
    radial-gradient(circle at 50% 66%, rgba(0, 0, 0, 0.72), transparent 62%),
    linear-gradient(180deg, #100b16, #07060a 66%, #010102);
}

.heartroot-living-seal-cut-scene {
  --stone: #c9e568;
  --stone2: #ffd76a;
  background:
    radial-gradient(circle at 50% 38%, rgba(197, 231, 96, 0.27), transparent 31%),
    radial-gradient(circle at 50% 58%, rgba(255, 203, 73, 0.2), transparent 49%),
    radial-gradient(circle at 50% 65%, rgba(46, 41, 83, 0.38), transparent 61%),
    linear-gradient(180deg, #101b10, #09110b 66%, #030503);
}

.umbrael-relic-burst-scene .dig-rays,
.umbrael-relic-impact-scene .dig-rays,
.umbrael-stone-cut-scene .dig-rays,
.honeydew-stoneblade-awakening-scene .dig-rays {
  opacity: 0.78;
  filter: hue-rotate(52deg) saturate(1.5) brightness(0.82);
}

.aurevyr-dawn-seal-cut-scene .dig-rays {
  opacity: 0.9;
  filter: hue-rotate(12deg) saturate(1.25) brightness(1.2);
}

.rubicrust-crimson-seal-cut-scene .dig-rays {
  opacity: 0.86;
  filter: hue-rotate(314deg) saturate(1.7) brightness(0.95);
}

.glovemaw-champion-seal-cut-scene .dig-rays {
  opacity: 0.84;
  filter: hue-rotate(112deg) saturate(1.3) brightness(0.95);
}

.noxavyr-blackwing-seal-cut-scene .dig-rays {
  opacity: 0.78;
  filter: hue-rotate(32deg) saturate(1.75) brightness(0.72);
}

.heartroot-living-seal-cut-scene .dig-rays {
  opacity: 0.86;
  filter: hue-rotate(75deg) saturate(1.2) brightness(1.02);
}

.umbrael-effect-stage {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 4;
  width: var(--umbrael-frame-w);
  height: var(--umbrael-frame-h);
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 22px rgba(157, 85, 255, 0.5))
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
}

.umbrael-effect-sheet {
  width: var(--umbrael-frame-w);
  height: var(--umbrael-frame-h);
  background-image: var(--umbrael-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--umbrael-strip) var(--umbrael-frame-h);
  animation: umbrael-effect-play var(--umbrael-duration) steps(11, end) forwards;
}

.umbrael-relic-burst-stage {
  top: 47%;
  filter:
    drop-shadow(0 0 34px rgba(182, 86, 255, 0.68))
    drop-shadow(0 0 58px rgba(96, 20, 155, 0.46))
    drop-shadow(0 22px 24px rgba(0, 0, 0, 0.58));
}

.umbrael-relic-burst-stage .umbrael-effect-sheet {
  animation-timing-function: steps(23, end);
}

.honeydew-stoneblade-awakening-stage {
  top: 45%;
  transform: translate(-50%, -50%) scale(0.58);
  filter:
    drop-shadow(0 0 30px rgba(125, 240, 255, 0.58))
    drop-shadow(0 0 58px rgba(154, 84, 255, 0.48))
    drop-shadow(0 22px 24px rgba(0, 0, 0, 0.58));
}

.honeydew-stoneblade-awakening-stage .umbrael-effect-sheet {
  animation-timing-function: steps(23, end);
}

.umbrael-stone-cut-stage .umbrael-effect-sheet {
  animation-timing-function: steps(9, end);
}

.boss-stone-seal-cut-stage {
  top: 45%;
  transform: translate(-50%, -50%) scale(0.9);
  filter:
    drop-shadow(0 0 30px rgba(172, 92, 255, 0.66))
    drop-shadow(0 0 58px rgba(75, 25, 118, 0.48))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.62));
}

.boss-stone-seal-cut-stage .umbrael-effect-sheet {
  animation-timing-function: steps(9, end);
}

.boss-stone-seal-preload-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: boss-stone-seal-preload-pulse 820ms ease-in-out infinite alternate;
}

@keyframes boss-stone-seal-preload-pulse {
  from { opacity: 0.68; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1.025); }
}

.rubicrust-crimson-seal-cut-stage {
  filter:
    drop-shadow(0 0 30px rgba(255, 83, 57, 0.72))
    drop-shadow(0 0 58px rgba(135, 18, 34, 0.52))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.66));
}

.glovemaw-champion-seal-cut-stage {
  filter:
    drop-shadow(0 0 30px rgba(71, 215, 189, 0.62))
    drop-shadow(0 0 54px rgba(222, 184, 75, 0.42))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.64));
}

.noxavyr-blackwing-seal-cut-stage {
  filter:
    drop-shadow(0 0 30px rgba(176, 84, 255, 0.68))
    drop-shadow(0 0 56px rgba(182, 42, 27, 0.32))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.74));
}

.heartroot-living-seal-cut-stage {
  filter:
    drop-shadow(0 0 30px rgba(196, 229, 104, 0.64))
    drop-shadow(0 0 56px rgba(255, 199, 72, 0.42))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.62));
}

.aurevyr-dawn-seal-cut-stage {
  top: 45%;
  transform: translate(-50%, -50%) scale(0.9);
  filter:
    drop-shadow(0 0 30px rgba(255, 232, 150, 0.7))
    drop-shadow(0 0 58px rgba(147, 66, 224, 0.52))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.62));
}

.aurevyr-dawn-seal-cut-stage .umbrael-effect-sheet {
  animation-timing-function: steps(9, end);
}

.umbrael-relic-impact-stage .umbrael-effect-sheet {
  animation-timing-function: steps(7, end);
}

@keyframes umbrael-effect-play {
  to { background-position: var(--umbrael-travel) 0; }
}

.umbrael-relic-result,
.umbrael-relic-found,
.umbrael-stone-result {
  max-width: 540px;
  text-align: center;
}

.umbrael-relic-circle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.umbrael-relic-token {
  display: grid;
  place-items: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 6px;
  border-radius: 8px;
  border: 1px solid rgba(197, 155, 255, 0.22);
  background: radial-gradient(circle at 50% 20%, rgba(139, 64, 219, 0.18), rgba(0, 0, 0, 0.18));
}

.umbrael-relic-token img,
.umbrael-relic-found img,
.umbrael-stone-result img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(157, 85, 255, 0.42))
    drop-shadow(0 12px 15px rgba(0, 0, 0, 0.45));
}

.umbrael-relic-token strong {
  max-width: 100%;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umbrael-relic-found img,
.umbrael-stone-result img {
  width: 128px;
  height: 128px;
  margin-bottom: 6px;
}

.aurevyr-dawn-seal-result img {
  width: 176px;
  height: 176px;
  filter:
    drop-shadow(0 0 22px rgba(255, 218, 103, 0.58))
    drop-shadow(0 0 26px rgba(144, 74, 218, 0.42))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.48));
}

.boss-stone-seal-result img {
  width: 176px;
  height: 176px;
}

.rubicrust-crimson-seal-result img {
  filter:
    drop-shadow(0 0 22px rgba(255, 91, 69, 0.6))
    drop-shadow(0 0 26px rgba(126, 22, 39, 0.42))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.glovemaw-champion-seal-result img {
  filter:
    drop-shadow(0 0 22px rgba(71, 215, 189, 0.56))
    drop-shadow(0 0 24px rgba(220, 180, 72, 0.4))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

.noxavyr-blackwing-seal-result img {
  filter:
    drop-shadow(0 0 22px rgba(176, 84, 255, 0.6))
    drop-shadow(0 0 26px rgba(180, 45, 29, 0.34))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.58));
}

.heartroot-living-seal-result img {
  filter:
    drop-shadow(0 0 22px rgba(197, 229, 104, 0.58))
    drop-shadow(0 0 25px rgba(255, 200, 75, 0.4))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.5));
}

@media (max-width: 430px), (max-height: 620px) {
  .umbrael-effect-stage {
    transform: translate(-50%, -50%) scale(0.82);
  }
  .honeydew-stoneblade-awakening-stage {
    transform: translate(-50%, -50%) scale(0.46);
  }
  .aurevyr-dawn-seal-cut-stage {
    transform: translate(-50%, -50%) scale(0.62);
  }
  .boss-stone-seal-cut-stage {
    transform: translate(-50%, -50%) scale(0.62);
  }
  .umbrael-relic-circle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.companion-join-scene {
  --stone: #ffe08d;
  --stone2: #9ee88c;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 224, 141, 0.24), transparent 35%),
    radial-gradient(circle at 50% 66%, rgba(85, 186, 115, 0.2), transparent 55%),
    linear-gradient(180deg, #182c21, #0b1712 64%, #060a09);
}

.companion-join-pawluma {
  --stone: #ffe08d;
  --stone2: #8de88e;
}

.companion-join-sylvopup {
  --stone: #dfffc8;
  --stone2: #8df0a2;
}

.companion-join-runebeak {
  --stone: #7df0ff;
  --stone2: #ffd978;
  background:
    radial-gradient(circle at 48% 36%, rgba(255, 240, 166, 0.26), transparent 32%),
    radial-gradient(circle at 52% 62%, rgba(125, 240, 255, 0.22), transparent 55%),
    linear-gradient(180deg, #172943, #10162d 62%, #080911);
}

.companion-join-scene .dig-rays {
  opacity: 0.72;
  animation-duration: var(--companion-join-duration, 1900ms);
}

.companion-join-aura {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.36);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.55), color-mix(in srgb, var(--stone) 42%, transparent) 22%, color-mix(in srgb, var(--stone2) 28%, transparent) 54%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 24px color-mix(in srgb, var(--stone) 48%, transparent));
  opacity: 0;
  animation: companion-join-aura var(--companion-join-duration, 1900ms) ease-out forwards;
}

@keyframes companion-join-aura {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.32); }
  44% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.82); }
  78% { opacity: 0.84; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0.36; transform: translate(-50%, -50%) scale(1.1); }
}

.companion-join-stage {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: var(--companion-join-frame, 384px);
  height: var(--companion-join-frame, 384px);
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--stone) 52%, transparent))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
}

.companion-join-sheet {
  width: var(--companion-join-frame, 384px);
  height: var(--companion-join-frame, 384px);
  background-image: var(--companion-join-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:
    var(--companion-join-strip, 1920px)
    var(--companion-join-frame, 384px);
  animation:
    companion-join-sheet-play var(--companion-join-duration, 1900ms) steps(4, end) forwards,
    companion-join-stage-arrive var(--companion-join-duration, 1900ms) cubic-bezier(0.2, 0.8, 0.22, 1) forwards;
}

@keyframes companion-join-sheet-play {
  to { background-position: var(--companion-join-travel, -1536px) 0; }
}

@keyframes companion-join-stage-arrive {
  0% { opacity: 0; transform: translateY(18px) scale(0.92); }
  14% { opacity: 1; transform: translateY(8px) scale(0.96); }
  58% { transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(-8px) scale(1.04); }
}

.companion-join-result {
  max-width: 540px;
  text-align: center;
  border-color: color-mix(in srgb, var(--stone, #ffe08d) 42%, rgba(255, 255, 255, 0.18));
}

.companion-join-result-monster {
  display: grid;
  place-items: center;
  height: 226px;
  margin-bottom: 8px;
  background:
    radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--stone2, #8de88e) 22%, transparent), transparent 50%),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--stone, #ffe08d) 22%, transparent), transparent 48%);
}

.companion-join-result-monster img {
  max-width: 250px;
  max-height: 220px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px color-mix(in srgb, var(--stone, #ffe08d) 46%, transparent))
    drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42));
  animation: egg-hatch-result-rise 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@media (max-width: 430px), (max-height: 620px) {
  .companion-join-stage {
    transform: translate(-50%, -50%) scale(0.82);
  }
}

.crownlight-picker-card {
  border-color: rgba(255, 217, 120, 0.34);
}

.crownlight-target-row.is-disabled {
  opacity: 0.62;
}

.crownlight-blessing-scene {
  --stone: #7df0ff;
  --stone2: #ffd978;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 243, 178, 0.34), transparent 34%),
    radial-gradient(circle at 50% 60%, rgba(125, 240, 255, 0.22), transparent 58%),
    linear-gradient(180deg, #132842, #0a1326 58%, #060811);
}

.modal.evolution-map-modal .crownlight-blessing-scene,
.modal.evolution-map-modal .crownlight-blessing-result {
  position: fixed;
  left: var(--map-modal-left);
  top: var(--map-modal-top);
  width: var(--map-modal-width);
  height: var(--map-modal-height);
  max-width: none;
  max-height: none;
  margin: 0;
  border-radius: 8px;
}

.modal.evolution-map-modal .crownlight-blessing-result {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 1.4vh, 12px);
  overflow: hidden;
  padding: clamp(14px, 3vw, 24px);
  text-align: center;
}

.crownlight-blessing-scene .dig-rays {
  opacity: 0.78;
  animation-duration: var(--crownlight-duration, 3600ms);
}

.crownlight-blessing-aura {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 1;
  width: min(390px, 74vw);
  height: min(390px, 74vw);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.32);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.48), rgba(255, 217, 120, 0.28) 20%, rgba(125, 240, 255, 0.2) 46%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 34px rgba(125, 240, 255, 0.42));
  opacity: 0;
  animation: crownlight-aura var(--crownlight-duration, 3600ms) ease-out forwards;
}

@keyframes crownlight-aura {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(0.28); }
  38% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.86); }
  70% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.28; transform: translate(-50%, -50%) scale(1.16); }
}

.crownlight-blessing-stage {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: var(--crownlight-frame, 384px);
  height: var(--crownlight-frame, 384px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.crownlight-blessing-monster {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 2;
  width: min(220px, 48vw);
  height: min(220px, 48vw);
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 16px rgba(255, 217, 120, 0.5))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
  animation: crownlight-monster-rise var(--crownlight-duration, 3600ms) cubic-bezier(0.2, 0.8, 0.22, 1) forwards;
}

@keyframes crownlight-monster-rise {
  0% { opacity: 0.72; transform: translate(-50%, -45%) scale(0.88); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(0.98); }
  52% { transform: translate(-50%, -56%) scale(1.12); }
  72% { filter: drop-shadow(0 0 32px rgba(255, 245, 196, 0.82)) drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42)); }
  100% { opacity: 1; transform: translate(-50%, -52%) scale(1.04); }
}

.crownlight-blessing-sheet {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: var(--crownlight-frame, 384px);
  height: var(--crownlight-frame, 384px);
  background-image: var(--crownlight-sheet);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:
    var(--crownlight-strip, 4608px)
    var(--crownlight-frame, 384px);
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.46))
    drop-shadow(0 0 24px rgba(255, 217, 120, 0.32));
  mix-blend-mode: screen;
  animation: crownlight-sheet-play var(--crownlight-duration, 3600ms) steps(11, end) forwards;
}

@keyframes crownlight-sheet-play {
  to { background-position: var(--crownlight-travel, -4224px) 0; }
}

.crownlight-blessing-result {
  border-color: rgba(255, 217, 120, 0.38);
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 217, 120, 0.24), transparent 38%),
    radial-gradient(circle at 50% 54%, rgba(125, 240, 255, 0.18), transparent 54%),
    linear-gradient(180deg, rgba(16, 28, 48, 0.96), rgba(8, 11, 20, 0.98));
}

.crownlight-blessing-result h2 {
  margin: 0;
  max-width: min(44rem, 94%);
  line-height: 1.08;
}

.crownlight-blessing-result p {
  max-width: min(42rem, 94%);
  margin: 0;
  color: rgba(233, 240, 247, 0.82);
}

.crownlight-result-monster {
  display: grid;
  place-items: center;
  width: min(260px, 66vw);
  height: min(210px, 44vh);
  background:
    radial-gradient(circle at 50% 62%, rgba(125, 240, 255, 0.22), transparent 52%),
    radial-gradient(circle at 50% 42%, rgba(255, 217, 120, 0.22), transparent 48%);
}

.crownlight-result-monster img {
  max-width: min(230px, 58vw);
  max-height: min(200px, 38vh);
  object-fit: contain;
  filter:
    drop-shadow(0 0 22px rgba(255, 217, 120, 0.52))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.42));
  animation: egg-hatch-result-rise 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.crownlight-dv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(460px, 92%);
}

.crownlight-dv-grid span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(233, 240, 247, 0.8);
  font-size: 0.78rem;
  font-weight: 800;
}

.crownlight-dv-grid span.rose {
  color: #fff3b8;
  border-color: rgba(255, 217, 120, 0.34);
  background: rgba(255, 217, 120, 0.1);
}

.crownlight-dv-grid strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.66rem;
  letter-spacing: 0;
}

@media (max-width: 430px), (max-height: 620px) {
  .crownlight-blessing-stage {
    transform: translate(-50%, -50%) scale(0.8);
  }
  .crownlight-dv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Aether Echo Wall: tune reveal + wardens' level blessing (crownlight chassis,
   aether palette). The tune scene is fully procedural; the blessing scene also
   plays an optional effect sheet when the asset exists. */
.echo-wall-tune-scene,
.echo-wall-blessing-scene {
  --stone: #9fe8ff;
  --stone2: #a483ff;
  background:
    radial-gradient(circle at 50% 34%, rgba(164, 131, 255, 0.3), transparent 36%),
    radial-gradient(circle at 50% 62%, rgba(159, 232, 255, 0.22), transparent 58%),
    linear-gradient(180deg, #101c3a, #0a1026 58%, #05070f);
}

.echo-wall-blessing-scene .crownlight-blessing-aura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.46), rgba(159, 232, 255, 0.3) 22%, rgba(164, 131, 255, 0.22) 48%, transparent 72%);
  filter: blur(1px) drop-shadow(0 0 34px rgba(164, 131, 255, 0.44));
}

.echo-tune-runes {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
}

.echo-tune-rune {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: var(--c, #9fe8ff);
  box-shadow: 0 0 14px var(--c, #9fe8ff), 0 0 30px var(--c, #9fe8ff);
  opacity: 0;
  animation: echo-rune-converge-2 var(--crownlight-duration, 2400ms) cubic-bezier(0.3, 0.7, 0.2, 1) forwards;
}

.echo-tune-rune:nth-child(1) { animation-name: echo-rune-converge-1; }
.echo-tune-rune:nth-child(3) { animation-name: echo-rune-converge-3; }

/* One keyframe track per rune: custom-property offsets inside @keyframes
   interpolate unreliably, so the three flight paths are spelled out. */
@keyframes echo-rune-converge-1 {
  0% { opacity: 0; transform: translate(-170px, -30px) rotate(45deg) scale(0.6); }
  16% { opacity: 1; transform: translate(-153px, -27px) rotate(65deg) scale(1.1); }
  62% { opacity: 1; transform: translate(0, 0) rotate(225deg) scale(1.2); }
  74% { opacity: 0.9; transform: translate(0, 0) rotate(265deg) scale(0.5); }
  100% { opacity: 0; transform: translate(0, 0) rotate(305deg) scale(0.2); }
}

@keyframes echo-rune-converge-2 {
  0% { opacity: 0; transform: translate(0, -180px) rotate(45deg) scale(0.6); }
  16% { opacity: 1; transform: translate(0, -162px) rotate(65deg) scale(1.1); }
  62% { opacity: 1; transform: translate(0, 0) rotate(225deg) scale(1.2); }
  74% { opacity: 0.9; transform: translate(0, 0) rotate(265deg) scale(0.5); }
  100% { opacity: 0; transform: translate(0, 0) rotate(305deg) scale(0.2); }
}

@keyframes echo-rune-converge-3 {
  0% { opacity: 0; transform: translate(170px, -30px) rotate(45deg) scale(0.6); }
  16% { opacity: 1; transform: translate(153px, -27px) rotate(65deg) scale(1.1); }
  62% { opacity: 1; transform: translate(0, 0) rotate(225deg) scale(1.2); }
  74% { opacity: 0.9; transform: translate(0, 0) rotate(265deg) scale(0.5); }
  100% { opacity: 0; transform: translate(0, 0) rotate(305deg) scale(0.2); }
}

.echo-tune-core {
  position: absolute;
  left: -55px;
  top: -55px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(159, 232, 255, 0.55) 38%, rgba(164, 131, 255, 0.3) 62%, transparent 75%);
  opacity: 0;
  animation: echo-core-wake var(--crownlight-duration, 2400ms) ease-out forwards;
}

@keyframes echo-core-wake {
  0%, 40% { opacity: 0.12; transform: scale(0.4); }
  62% { opacity: 0.7; transform: scale(0.7); }
  76% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0.85; transform: scale(1); }
}

.echo-level-rings {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.echo-level-rings span {
  position: absolute;
  left: -110px;
  top: -110px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid rgba(159, 232, 255, 0.65);
  box-shadow: 0 0 22px rgba(159, 232, 255, 0.4), inset 0 0 18px rgba(164, 131, 255, 0.3);
  opacity: 0;
  animation: echo-level-ring 1400ms ease-out infinite;
}

.echo-level-rings span:nth-child(2) { animation-delay: 430ms; border-color: rgba(164, 131, 255, 0.6); }
.echo-level-rings span:nth-child(3) { animation-delay: 860ms; border-color: rgba(255, 225, 119, 0.55); }

@keyframes echo-level-ring {
  0% { opacity: 0; transform: scale(1.25); }
  22% { opacity: 0.85; }
  100% { opacity: 0; transform: scale(0.32); }
}

.echo-wall-result {
  border-color: rgba(159, 232, 255, 0.38);
  background:
    radial-gradient(circle at 50% 26%, rgba(164, 131, 255, 0.22), transparent 40%),
    radial-gradient(circle at 50% 54%, rgba(159, 232, 255, 0.18), transparent 54%),
    linear-gradient(180deg, rgba(13, 23, 44, 0.96), rgba(7, 10, 20, 0.98));
}

.echo-wall-reward-grid {
  width: min(520px, 94%);
}

.echo-wall-level-grid {
  grid-template-columns: minmax(0, 1fr);
  width: min(220px, 80%);
}

.echo-wall-level-grid span.rose {
  color: #dff7ff;
  border-color: rgba(159, 232, 255, 0.4);
  background: rgba(159, 232, 255, 0.1);
  font-size: 1rem;
}

.stinky-fish-scene {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(144, 221, 198, 0.18), transparent 34%),
    radial-gradient(circle at 54% 65%, rgba(81, 116, 79, 0.28), transparent 52%),
    linear-gradient(180deg, #172515, #0a130d 66%, #050806);
}

.stinky-fish-art {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 4;
  width: min(42vw, 310px);
  max-width: 74%;
  transform: translate(-50%, -50%) scale(0.78) rotate(-6deg);
  filter:
    drop-shadow(0 0 18px rgba(147, 245, 195, 0.42))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.5));
  animation: stinky-fish-pop 1420ms cubic-bezier(0.16, 0.78, 0.22, 1) both;
}

.stinky-fish-stink {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.stinky-fish-stink span {
  position: absolute;
  left: calc(50% + (var(--i) - 2.5) * 23px);
  top: calc(48% - 98px + var(--i) * 4px);
  width: 22px;
  height: 66px;
  border-left: 4px solid rgba(174, 239, 171, 0.68);
  border-radius: 50%;
  opacity: 0;
  filter: blur(0.2px) drop-shadow(0 0 8px rgba(174, 239, 171, 0.42));
  transform: translateY(18px) rotate(calc(-18deg + var(--i) * 8deg));
  animation: stinky-fish-wisp 1500ms ease-out infinite;
  animation-delay: calc(var(--i) * 120ms + 240ms);
}

.stinky-fish-continue {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 8;
  transform: translateX(-50%);
  min-width: 150px;
  padding: 10px 20px;
  border: 1px solid rgba(255, 240, 180, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff2a4, #d9aa43);
  color: #251609;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.34);
}

@keyframes stinky-fish-pop {
  0% { opacity: 0; transform: translate(-50%, -44%) scale(0.48) rotate(-16deg); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(5deg); }
  64% { transform: translate(-50%, -50%) scale(0.98) rotate(-4deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
}

@keyframes stinky-fish-wisp {
  0% { opacity: 0; transform: translateY(26px) scaleY(0.62) rotate(calc(-18deg + var(--i) * 8deg)); }
  28% { opacity: 0.82; }
  100% { opacity: 0; transform: translateY(-58px) scaleY(1.18) rotate(calc(-2deg + var(--i) * 10deg)); }
}

/* Prism Storm lightning bolts. */
.fx-bolt {
  width: var(--w, 6px); height: var(--len, 40%);
  transform: translate(-50%, 0);
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 14%, currentColor 46%, rgba(255, 255, 255, 0) 100%);
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px currentColor) drop-shadow(0 0 34px currentColor);
  clip-path: polygon(42% 0, 60% 0, 50% 30%, 72% 30%, 40% 60%, 58% 60%, 30% 100%, 50% 56%, 34% 56%, 52% 28%, 34% 28%);
  opacity: 0; mix-blend-mode: screen;
  animation: bolt-strike 360ms steps(2, end) forwards;
}
.fx-bolt.mega {
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 28px currentColor) drop-shadow(0 0 56px currentColor);
}
.fx-bolt.colossal {
  z-index: 4;
  animation: bolt-colossal 640ms cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
@keyframes bolt-strike {
  0% { opacity: 0; transform: translate(-50%, -10%) scaleY(0.35); }
  16% { opacity: 1; transform: translate(-50%, 0) scaleY(1); }
  28% { transform: translate(-51%, 0) scaleY(1.03); }
  44% { opacity: 1; transform: translate(-49%, 0) scaleY(1); }
  70% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, 0) scaleY(1); }
}
@keyframes bolt-colossal {
  0% { opacity: 0; transform: translate(-50%, -16%) scaleY(0.3) scaleX(0.55); }
  14% { opacity: 1; transform: translate(-50%, 0) scaleY(1) scaleX(1.3); }
  32% { transform: translate(-50%, 0) scaleY(1) scaleX(0.85); }
  56% { opacity: 1; transform: translate(-50%, 0) scaleX(1.15); }
  100% { opacity: 0; transform: translate(-50%, 0) scaleX(1); }
}
/* the white-hot pop where each bolt slams into the foe */
.fx-bolt-head {
  width: calc(34px * var(--hs, 1)); height: calc(34px * var(--hs, 1));
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, currentColor 40%, rgba(255, 255, 255, 0) 72%);
  filter: drop-shadow(0 0 14px currentColor);
  opacity: 0; mix-blend-mode: screen;
  animation: bolt-head 340ms ease-out forwards;
}
@keyframes bolt-head {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
/* scorched ground shock under the foe on the finale */
.fx-thunderground {
  width: var(--gw, 60%); height: 26px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, #fff 0%, currentColor 38%, rgba(255, 255, 255, 0) 78%);
  filter: drop-shadow(0 0 20px currentColor);
  opacity: 0; mix-blend-mode: screen;
  animation: thunderground 560ms ease-out forwards;
}
@keyframes thunderground {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.5); }
  26% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.3) scaleY(0.7); }
}
/* the sky itself: a charged dim, brilliant strobing, then the colossal flash */
.fx-layer.fx-thunderstorm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(210, 235, 255, 0);
  animation: storm-flash 1240ms ease-out forwards;
}
@keyframes storm-flash {
  0% { background: rgba(18, 24, 46, 0); }
  10% { background: rgba(18, 24, 46, 0.34); }
  20%, 34%, 50%, 64% { background: rgba(232, 244, 255, 0.5); }
  26%, 42%, 58% { background: rgba(130, 160, 255, 0.14); }
  82% { background: rgba(245, 250, 255, 0.62); }
  100% { background: rgba(210, 235, 255, 0); }
}
/* wind-up vignette while the storm gathers over the foe */
.fx-layer.fx-storm-charge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 72% 32%, rgba(155, 231, 255, 0.22), rgba(18, 24, 46, 0.32) 70%);
  animation: storm-charge 520ms ease-in forwards;
}
@keyframes storm-charge {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

/* LIGHT — a disco ball + rainbow tiles spin over the whole battleground. */
.fx-disco-ball {
  width: 46px; height: 46px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, #fff 0 12deg, #9be7ff 12deg 24deg, #ff5db1 24deg 36deg, #ffe14f 36deg 48deg);
  box-shadow: 0 0 26px #fff, 0 0 60px #ff5db1;
  opacity: 0; mix-blend-mode: screen;
  animation: disco-ball 1320ms ease-in-out forwards;
}
@keyframes disco-ball {
  0% { opacity: 0; transform: translate(-50%, -120%) scale(0.4) rotate(0deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(180deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(900deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(1160deg); }
}
.fx-disco-tile {
  width: 26px; height: 26px; border-radius: 5px;
  background: currentColor; opacity: 0; mix-blend-mode: screen;
  box-shadow: 0 0 16px currentColor;
  animation: disco-tile 760ms ease-in-out infinite alternate;
}
@keyframes disco-tile {
  0% { opacity: 0.15; transform: translate(-50%, -50%) scale(calc(var(--scale, 1) * 0.6)); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scale(var(--scale, 1)); }
}
.fx-layer.fx-disco::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(255, 93, 177, 0.22), rgba(255, 225, 79, 0.22), rgba(95, 208, 255, 0.22),
    rgba(125, 240, 168, 0.22), rgba(201, 160, 255, 0.22), rgba(255, 93, 177, 0.22));
  animation: disco-floor 1320ms linear forwards;
}
@keyframes disco-floor {
  0% { opacity: 0; transform: rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(300deg); }
}

/* FIRE — a full-width flame wall climbs the whole field bottom→top. */
.fx-firewall {
  position: absolute; left: 0; right: 0; bottom: -40%;
  height: 150%; width: 100%;
  opacity: 0; mix-blend-mode: screen;
  filter: blur(2px) drop-shadow(0 0 22px #ff5a1f);
  animation: firewave-rise 1320ms cubic-bezier(0.3, 0.6, 0.2, 1) forwards;
}
@keyframes firewave-rise {
  0% { opacity: 0; transform: translateY(60%) scaleY(0.5); }
  20% { opacity: 1; }
  78% { opacity: 1; transform: translateY(-70%) scaleY(1.1); }
  100% { opacity: 0; transform: translateY(-110%) scaleY(1.15); }
}
.fx-layer.fx-firewave::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 70, 25, 0.34), rgba(255, 150, 50, 0.12) 55%, transparent 80%);
  animation: water-wash 1320ms ease-out forwards;
}

/* ICE — a frost pane seals the foe; weaker hit, but it freezes. */
.fx-ice-pane {
  width: 78px; height: 78px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(234, 253, 255, 0.85), rgba(127, 200, 240, 0.5));
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 24px #bdefff, inset 0 0 18px #ffffff;
  opacity: 0; mix-blend-mode: screen;
  animation: ice-pane 900ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes ice-pane {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); }
  35% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
  75% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
}
.fx-layer.fx-deepfreeze::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 42%, rgba(189, 239, 255, 0.34), rgba(79, 134, 198, 0.16) 55%, transparent 78%);
  animation: water-wash 1200ms ease-out forwards;
}

/* Blurred-rect SVG mask: opaque core, smooth feather to zero at every cell
   edge (viewBox stretches with the element, so the feather stays
   proportional for any sheet cell size/aspect). */
:root {
  --fx-cell-feather-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><filter id="f" x="-30%25" y="-30%25" width="160%25" height="160%25"><feGaussianBlur stdDeviation="4.5"/></filter><rect x="8" y="8" width="84" height="84" fill="%23fff" filter="url(%23f)"/></svg>');
}

/* ===== UMBRAEL — Black Hole (the Fallen's signature) ==================== */
.fx-sprite-sheet {
  width: var(--fx-sheet-width, var(--fx-sheet-size, 300px));
  height: var(--fx-sheet-height, var(--fx-sheet-size, 300px));
  z-index: 10;
  background-repeat: no-repeat;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0;
  /* NO `contain: paint` here: paint containment hard-clips the drop-shadow
     glow stacks at the element's rectangle, which showed as a bright SQUARE /
     straight crop line around bright sheet frames (charm throws, big attack
     sheets). The glow must be free to fade past the cell box. */
  backface-visibility: hidden;
  will-change: background-position, transform, opacity;
  /* Generated sheet frames carry a faint ambient wash that fills the whole
     rectangular cell; unmasked, the cell's straight edges read as a visible
     "square"/hard crop over the battle art (worst on bright scenes and with
     drop-shadow filters). A blurred-rect SVG mask feathers all four cell
     edges (single layer - no mask-composite needed) so the wash and any art
     touching the cell border fade out instead of cutting off. */
  -webkit-mask-image: var(--fx-cell-feather-mask);
  -webkit-mask-size: 100% 100%;
  mask-image: var(--fx-cell-feather-mask);
  mask-size: 100% 100%;
}
.fx-sprite-line-wrap {
  z-index: 10;
  pointer-events: none;
  overflow: visible;
  transform-origin: 50% 50%;
}
.fx-sprite-travel-sheet {
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
  /* Same cell-edge feather as .fx-sprite-sheet (see comment there). */
  -webkit-mask-image: var(--fx-cell-feather-mask);
  -webkit-mask-size: 100% 100%;
  mask-image: var(--fx-cell-feather-mask);
  mask-size: 100% 100%;
}
/* Zero-specificity renderer defaults: every registered sheet steps and fades
   even when its family has no dedicated CSS. Named move/family selectors
   below have normal class specificity and therefore override these safely. */
:where(.fx-sprite-sheet) {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-generic-impact-presence var(--fx-sheet-duration, 1100ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
:where(.fx-sprite-line-direction > .fx-sprite-sheet) {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-generic-line-presence var(--fx-sheet-duration, 1100ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
:where(.fx-sprite-line-direction > .fx-sprite-travel-sheet) {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-generic-travel-presence var(--fx-sheet-duration, 1100ms) linear forwards;
}
/* Cold selected sheets can take a moment to decode on mobile. Show an
   unmistakable stage-local activity ring while the classic turn is locked,
   instead of making the battle look frozen during the bounded wait. */
.fx-layer.fx-classic-sheet-preparing::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  z-index: 30;
  pointer-events: none;
  border: 4px solid rgba(255, 255, 255, 0.24);
  border-top-color: rgba(255, 255, 255, 0.96);
  border-right-color: rgba(125, 240, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(125, 240, 255, 0.72), inset 0 0 12px rgba(255, 255, 255, 0.12);
  animation: fx-classic-sheet-preparing-spin 720ms linear infinite;
}
.fx-sheet-capture-prism {
  z-index: 14;
  mix-blend-mode: normal;
  filter: var(--capture-art-filter, drop-shadow(0 0 18px rgba(120, 234, 215, 0.82)) drop-shadow(0 0 28px rgba(255, 211, 106, 0.42)) saturate(1.12) brightness(1.08));
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1450ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    capture-prism-sheet-presence var(--fx-sheet-duration, 1450ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-capture-vortex {
  z-index: 13;
  mix-blend-mode: screen;
  filter: var(--capture-art-filter, drop-shadow(0 0 22px rgba(125, 240, 255, 0.9)) drop-shadow(0 0 36px rgba(255, 230, 150, 0.28)) saturate(1.18) brightness(1.1));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 78%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 78%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1420ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    capture-vortex-sheet-presence var(--fx-sheet-duration, 1420ms) cubic-bezier(0.14, 0.76, 0.24, 1) forwards;
}
.fx-sheet-capture-pulse {
  z-index: 15;
  mix-blend-mode: screen;
  filter: var(--capture-art-filter, drop-shadow(0 0 20px rgba(125, 240, 255, 0.92)) drop-shadow(0 0 30px rgba(255, 230, 150, 0.35)) saturate(1.16) brightness(1.12));
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, transparent 100%);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 740ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    capture-pulse-sheet-presence var(--fx-sheet-duration, 740ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-capture-art-normal {
  --capture-art-filter: drop-shadow(0 0 18px rgba(120, 234, 215, 0.82)) drop-shadow(0 0 28px rgba(255, 211, 106, 0.42)) saturate(1.12) brightness(1.08);
}
.fx-capture-art-safari {
  --capture-art-filter: drop-shadow(0 0 20px rgba(160, 236, 112, 0.9)) drop-shadow(0 0 30px rgba(73, 142, 60, 0.5)) saturate(1.16) brightness(1.08);
}
.fx-capture-art-azure {
  --capture-art-filter: drop-shadow(0 0 20px rgba(155, 243, 255, 0.94)) drop-shadow(0 0 34px rgba(35, 100, 168, 0.48)) saturate(1.2) brightness(1.12);
}
.fx-capture-art-hyper {
  --capture-art-filter: drop-shadow(0 0 22px rgba(255, 216, 122, 0.95)) drop-shadow(0 0 34px rgba(216, 106, 42, 0.52)) saturate(1.18) brightness(1.08);
}
.fx-capture-art-giga {
  --capture-art-filter: drop-shadow(0 0 22px rgba(131, 245, 255, 0.98)) drop-shadow(0 0 38px rgba(159, 108, 255, 0.72)) saturate(1.18) brightness(1.1);
}
.fx-capture-art-master {
  --capture-art-filter: drop-shadow(0 0 24px rgba(255, 220, 132, 0.98)) drop-shadow(0 0 42px rgba(73, 49, 128, 0.82)) saturate(1.08) brightness(1.03);
}
.fx-sheet-realistic-line,
.fx-sheet-realistic-impact {
  mix-blend-mode: normal;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-impact-presence var(--fx-sheet-duration, 1100ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-realistic-line {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 1100ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-legendary-line {
  z-index: 20;
  mix-blend-mode: screen;
}
.fx-sheet-legendary-line.fx-sheet-crown-verdict {
  filter:
    drop-shadow(0 0 16px rgba(255, 246, 214, 0.92))
    drop-shadow(0 0 30px rgba(255, 183, 74, 0.7))
    drop-shadow(0 0 44px rgba(149, 105, 255, 0.38))
    saturate(1.12)
    brightness(1.08);
}
.fx-sheet-legendary-line.fx-sheet-origin-pulse {
  filter:
    drop-shadow(0 0 16px rgba(227, 251, 255, 0.94))
    drop-shadow(0 0 32px rgba(38, 181, 255, 0.72))
    drop-shadow(0 0 46px rgba(102, 82, 255, 0.42))
    saturate(1.18)
    brightness(1.08);
}
/* Glovemaw signature punches: painted line sheets (glove -> target). The base
   .fx-sprite-sheet starts at opacity 0 - without this family class providing
   the play/presence animations the punches render invisible. */
.fx-sheet-glovemaw-signature {
  z-index: 18;
  mix-blend-mode: normal;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1240ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 1240ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-glovemaw-flare-jab {
  filter:
    drop-shadow(0 0 24px rgba(255, 90, 30, 0.9))
    drop-shadow(0 0 48px rgba(255, 179, 71, 0.6))
    saturate(1.24) contrast(1.06) brightness(1.08);
}
.fx-sheet-glovemaw-eternal-cross {
  filter:
    drop-shadow(0 0 24px rgba(255, 245, 190, 0.92))
    drop-shadow(0 0 50px rgba(56, 213, 242, 0.55))
    saturate(1.2) contrast(1.06) brightness(1.12);
}
.fx-sheet-glovemaw-root-hook {
  filter:
    drop-shadow(0 0 24px rgba(214, 163, 58, 0.85))
    drop-shadow(0 0 46px rgba(255, 241, 194, 0.5))
    saturate(1.22) contrast(1.06) brightness(1.06);
}
.fx-sheet-glovemaw-abyss-haymaker {
  filter:
    drop-shadow(0 0 26px rgba(109, 40, 217, 0.9))
    drop-shadow(0 0 52px rgba(35, 215, 255, 0.55))
    saturate(1.26) contrast(1.08) brightness(1.08);
}
.fx-sheet-cannonail-bomb,
.fx-sheet-cannonail-cluster,
.fx-sheet-cannonail-mortar,
.fx-sheet-cannonail-nova {
  filter:
    drop-shadow(0 0 24px rgba(255, 132, 42, 0.96))
    drop-shadow(0 0 48px rgba(255, 205, 96, 0.72))
    saturate(1.24)
    contrast(1.06)
    brightness(1.1);
}
.fx-sheet-cannonail-nova {
  filter:
    drop-shadow(0 0 34px rgba(255, 126, 38, 1))
    drop-shadow(0 0 76px rgba(255, 216, 112, 0.86))
    saturate(1.32)
    contrast(1.08)
    brightness(1.14);
}
.fx-sheet-realistic-stone {
  filter:
    drop-shadow(0 0 16px rgba(226, 198, 142, 0.74))
    drop-shadow(0 0 30px rgba(45, 35, 26, 0.74))
    saturate(1.08)
    brightness(1.06);
}
.fx-sheet-granite-roll {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1040ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-granite-roll-travel-presence var(--fx-sheet-duration, 1040ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-tectonic-charge {
  z-index: 16;
  filter:
    saturate(1.14)
    contrast(1.06)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1680ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tectonic-charge-line-presence var(--fx-sheet-duration, 1680ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-rune-fault {
  z-index: 13;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(255, 217, 120, 0.9))
    drop-shadow(0 0 42px rgba(125, 240, 255, 0.66))
    drop-shadow(0 0 36px rgba(22, 17, 12, 0.86))
    saturate(1.18)
    contrast(1.08)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1640ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-rune-fault-presence var(--fx-sheet-duration, 1780ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-realistic-bone {
  filter:
    drop-shadow(0 0 18px rgba(255, 232, 184, 0.82))
    drop-shadow(0 0 34px rgba(92, 72, 48, 0.68))
    saturate(1.08)
    brightness(1.08);
}
.fx-sheet-realistic-normal {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(255, 247, 204, 0.92))
    drop-shadow(0 0 30px rgba(214, 182, 106, 0.58))
    saturate(1.1)
    brightness(1.12);
}
.fx-sheet-nudge-vertical {
  z-index: 12;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 14px rgba(255, 239, 190, 0.92))
    drop-shadow(0 0 26px rgba(154, 139, 120, 0.58))
    saturate(1.08)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 720ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-nudge-vertical-presence var(--fx-sheet-duration, 720ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-quick-jab-vertical {
  z-index: 13;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 28px rgba(174, 184, 192, 0.72))
    saturate(1.05)
    brightness(1.18);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 700ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-quick-jab-vertical-presence var(--fx-sheet-duration, 700ms) cubic-bezier(0.12, 0.82, 0.18, 1) forwards;
}
.fx-sheet-realistic-flame {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 90, 34, 0.94))
    drop-shadow(0 0 36px rgba(255, 177, 58, 0.72))
    saturate(1.24)
    brightness(1.12);
}
.fx-sheet-coal-tail {
  filter:
    drop-shadow(0 0 18px rgba(255, 88, 28, 0.96))
    drop-shadow(0 0 34px rgba(255, 197, 74, 0.78))
    drop-shadow(0 0 30px rgba(70, 22, 10, 0.7))
    saturate(1.28)
    contrast(1.06)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 980ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-coal-tail-presence var(--fx-sheet-duration, 980ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-kiln-rush {
  z-index: 12;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(255, 85, 28, 0.95))
    drop-shadow(0 0 42px rgba(255, 176, 46, 0.78))
    drop-shadow(0 0 18px rgba(45, 14, 8, 0.78))
    saturate(1.22)
    contrast(1.08)
    brightness(1.08);
}
.fx-sheet-realistic-shadow {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(154, 104, 226, 0.88))
    drop-shadow(0 0 40px rgba(18, 12, 30, 0.9))
    saturate(1.18)
    brightness(1.08);
}
.fx-sheet-dusk-dive {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 22px rgba(154, 72, 255, 0.9))
    drop-shadow(0 0 42px rgba(9, 4, 18, 0.92))
    saturate(1.22)
    contrast(1.08)
    brightness(1.05);
}
.fx-sheet-night-rake-shadow-bomb {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(165, 70, 255, 0.9))
    drop-shadow(0 0 42px rgba(13, 6, 24, 0.92))
    saturate(1.2)
    contrast(1.08)
    brightness(1.06);
}
.fx-sheet-realistic-bug {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(247, 216, 75, 0.9))
    drop-shadow(0 0 32px rgba(62, 50, 48, 0.64))
    saturate(1.16)
    brightness(1.08);
}
.fx-sheet-venom-jab {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(173, 255, 42, 0.94))
    drop-shadow(0 0 38px rgba(49, 84, 20, 0.78))
    saturate(1.24)
    contrast(1.06)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1120ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-venom-jab-presence var(--fx-sheet-duration, 1120ms) cubic-bezier(0.14, 0.8, 0.22, 1) forwards;
}
.fx-sheet-realistic-water {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.92))
    drop-shadow(0 0 34px rgba(31, 134, 200, 0.68))
    saturate(1.18)
    brightness(1.08);
}
.fx-sheet-tide-crash-epic {
  z-index: 16;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.96))
    drop-shadow(0 0 46px rgba(31, 134, 200, 0.74))
    drop-shadow(0 0 66px rgba(7, 63, 107, 0.54))
    saturate(1.24)
    contrast(1.06)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1560ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tide-crash-epic-presence var(--fx-sheet-duration, 1560ms) cubic-bezier(0.15, 0.78, 0.2, 1) forwards;
}
.fx-sheet-current-dash-epic {
  z-index: 15;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 16px rgba(158, 236, 255, 0.94))
    drop-shadow(0 0 28px rgba(40, 164, 220, 0.62))
    drop-shadow(0 0 38px rgba(22, 104, 160, 0.42))
    saturate(1.2)
    contrast(1.08)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1080ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-current-dash-epic-presence var(--fx-sheet-duration, 1080ms) cubic-bezier(0.12, 0.8, 0.2, 1) forwards;
}
.fx-sheet-aethervane-firstdraft {
  z-index: 16;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.94))
    drop-shadow(0 0 36px rgba(125, 240, 255, 0.72))
    drop-shadow(0 0 52px rgba(141, 123, 255, 0.44))
    saturate(1.22)
    contrast(1.08)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1420ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aethervane-firstdraft-presence var(--fx-sheet-duration, 1420ms) cubic-bezier(0.13, 0.8, 0.2, 1) forwards;
}
.fx-sheet-aethervane-feather-vanish {
  z-index: 24;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 38px rgba(125, 240, 255, 0.68))
    drop-shadow(0 0 52px rgba(255, 217, 120, 0.42))
    saturate(1.16)
    contrast(1.06)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1840ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aethervane-feather-vanish-presence var(--fx-sheet-duration, 1840ms) cubic-bezier(0.16, 0.74, 0.2, 1) forwards;
}
.fx-sheet-lochness-bubble-vanish {
  z-index: 24;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(238, 253, 255, 0.96))
    drop-shadow(0 0 36px rgba(79, 207, 255, 0.72))
    drop-shadow(0 0 52px rgba(88, 97, 255, 0.34))
    saturate(1.12)
    contrast(1.06)
    brightness(1.06);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1880ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-lochness-bubble-vanish-presence var(--fx-sheet-duration, 1880ms) cubic-bezier(0.16, 0.74, 0.2, 1) forwards;
}
.fx-sheet-aethervane-slipstream-rise {
  z-index: 17;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 38px rgba(159, 230, 255, 0.74))
    drop-shadow(0 0 54px rgba(125, 240, 255, 0.5))
    saturate(1.22)
    contrast(1.08)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1480ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aethervane-slipstream-rise-presence var(--fx-sheet-duration, 1480ms) cubic-bezier(0.13, 0.78, 0.22, 1) forwards;
}
.fx-sheet-aethervane-gale-lance {
  z-index: 17;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 42px rgba(125, 240, 255, 0.78))
    drop-shadow(0 0 58px rgba(255, 217, 120, 0.34))
    saturate(1.28)
    contrast(1.1)
    brightness(1.16);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1520ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aethervane-gale-lance-presence var(--fx-sheet-duration, 1520ms) cubic-bezier(0.12, 0.8, 0.2, 1) forwards;
}
.fx-sheet-aethervane-aether-tempest,
.fx-sheet-aethervane-skyflame,
.fx-sheet-aethervane-basalt,
.fx-sheet-aethervane-comet {
  z-index: 19;
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1980ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aethervane-ultimate-presence var(--fx-sheet-duration, 1980ms) cubic-bezier(0.14, 0.76, 0.2, 1) forwards;
}
.fx-sheet-aethervane-aether-tempest {
  filter:
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 52px rgba(125, 240, 255, 0.78))
    drop-shadow(0 0 78px rgba(255, 217, 120, 0.42))
    saturate(1.32)
    contrast(1.08)
    brightness(1.18);
}
.fx-sheet-aethervane-skyflame {
  filter:
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 52px rgba(255, 122, 42, 0.78))
    drop-shadow(0 0 72px rgba(255, 217, 120, 0.5))
    saturate(1.28)
    contrast(1.08)
    brightness(1.14);
}
.fx-sheet-aethervane-basalt {
  filter:
    drop-shadow(0 0 24px rgba(228, 211, 170, 0.9))
    drop-shadow(0 0 44px rgba(125, 240, 255, 0.72))
    drop-shadow(0 0 62px rgba(75, 66, 56, 0.58))
    saturate(1.14)
    contrast(1.08)
    brightness(1.08);
}
.fx-sheet-aethervane-comet {
  filter:
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 54px rgba(125, 240, 255, 0.78))
    drop-shadow(0 0 78px rgba(201, 160, 255, 0.56))
    saturate(1.34)
    contrast(1.08)
    brightness(1.18);
}
.fx-sheet-stormcurrent-break {
  filter:
    drop-shadow(0 0 22px rgba(95, 208, 255, 0.98))
    drop-shadow(0 0 38px rgba(255, 240, 106, 0.72))
    drop-shadow(0 0 58px rgba(18, 63, 136, 0.68))
    saturate(1.28)
    contrast(1.06)
    brightness(1.12);
}
.fx-sheet-glyph-tide-mandate {
  filter:
    drop-shadow(0 0 22px rgba(125, 240, 255, 0.98))
    drop-shadow(0 0 38px rgba(255, 217, 120, 0.72))
    drop-shadow(0 0 58px rgba(49, 79, 159, 0.68))
    saturate(1.22)
    contrast(1.08)
    brightness(1.12);
}
.fx-sheet-eclipse-undertow {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 26px rgba(111, 91, 255, 0.9))
    drop-shadow(0 0 44px rgba(35, 215, 255, 0.74))
    drop-shadow(0 0 70px rgba(7, 17, 31, 0.94))
    saturate(1.34)
    contrast(1.1)
    brightness(1.08);
}
.fx-sheet-lunar-abyss-cannon {
  z-index: 14;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 30px rgba(35, 215, 255, 0.98))
    drop-shadow(0 0 54px rgba(111, 91, 255, 0.92))
    drop-shadow(0 0 86px rgba(7, 17, 31, 0.96))
    saturate(1.42)
    contrast(1.12)
    brightness(1.14);
}
.fx-sprite-sheet.fx-sheet-starfall-deluge {
  z-index: 18;
  mix-blend-mode: screen;
  -webkit-mask-image: none;
  mask-image: none;
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.84))
    drop-shadow(0 0 46px rgba(185, 166, 255, 0.68))
    drop-shadow(0 0 70px rgba(7, 26, 63, 0.48))
    saturate(1.24)
    contrast(1.04)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2400ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-starfall-deluge-presence var(--fx-sheet-duration, 2400ms) cubic-bezier(0.16, 0.76, 0.2, 1) forwards;
}
.fx-sheet-reed-harpoon {
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.96))
    drop-shadow(0 0 30px rgba(208, 190, 132, 0.58))
    saturate(1.18)
    contrast(1.05)
    brightness(1.1);
}
.fx-sheet-moonveil-lunge {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(184, 122, 255, 0.9))
    drop-shadow(0 0 42px rgba(12, 6, 24, 0.92))
    saturate(1.22)
    contrast(1.08)
    brightness(1.08);
}
.fx-sheet-pressure-bloom {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(35, 215, 255, 0.96))
    drop-shadow(0 0 46px rgba(4, 18, 35, 0.82))
    saturate(1.2)
    contrast(1.06)
    brightness(1.08);
}
.fx-sheet-basalt-broadside {
  filter:
    drop-shadow(0 0 22px rgba(255, 111, 36, 0.96))
    drop-shadow(0 0 38px rgba(255, 194, 82, 0.72))
    drop-shadow(0 0 28px rgba(16, 12, 10, 0.76))
    saturate(1.28)
    contrast(1.08)
    brightness(1.08);
}
.fx-sheet-realistic-frost {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(223, 248, 255, 0.96))
    drop-shadow(0 0 36px rgba(85, 136, 194, 0.68))
    saturate(1.15)
    brightness(1.12);
}
.fx-sheet-glacier-howl {
  z-index: 13;
  filter:
    drop-shadow(0 0 24px rgba(238, 253, 255, 0.98))
    drop-shadow(0 0 46px rgba(99, 196, 255, 0.78))
    drop-shadow(0 0 58px rgba(33, 79, 155, 0.48))
    saturate(1.24)
    contrast(1.08)
    brightness(1.15);
}
.fx-sheet-frost-bite {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(232, 251, 255, 0.98))
    drop-shadow(0 0 42px rgba(118, 204, 255, 0.82))
    drop-shadow(0 0 58px rgba(46, 94, 178, 0.5))
    saturate(1.22)
    contrast(1.07)
    brightness(1.14);
}
.fx-sheet-realistic-light {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 247, 168, 0.96))
    drop-shadow(0 0 38px rgba(159, 230, 255, 0.62))
    saturate(1.2)
    brightness(1.14);
}
.fx-sheet-beacon-howl {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 247, 168, 0.96))
    drop-shadow(0 0 34px rgba(142, 240, 215, 0.72))
    drop-shadow(0 0 42px rgba(255, 255, 255, 0.52))
    saturate(1.22)
    brightness(1.12);
}
.fx-sheet-realistic-dragon {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(169, 199, 255, 0.92))
    drop-shadow(0 0 34px rgba(123, 122, 216, 0.7))
    saturate(1.18)
    brightness(1.1);
}
.fx-sheet-realistic-leaf {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(121, 194, 103, 0.9))
    drop-shadow(0 0 32px rgba(214, 239, 138, 0.58))
    saturate(1.18)
    brightness(1.08);
}
.fx-sheet-affinity-hyperbeam {
  filter: drop-shadow(0 0 20px rgba(142, 232, 255, 0.98)) drop-shadow(0 0 38px rgba(23, 104, 255, 0.72)) saturate(1.18) brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2000ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-hyperbeam-presence var(--fx-sheet-duration, 2000ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-affinity-eldergrove {
  filter: drop-shadow(0 0 18px rgba(82, 217, 120, 0.9)) drop-shadow(0 0 30px rgba(217, 255, 138, 0.58)) saturate(1.2) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1458ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-eldergrove-presence var(--fx-sheet-duration, 1458ms) cubic-bezier(0.22, 0.72, 0.24, 1) forwards;
}
.fx-sheet-held-item-aura {
  z-index: 12;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(9, 0, 18, 0.9))
    drop-shadow(0 0 30px rgba(129, 42, 219, 0.52))
    saturate(1.1)
    brightness(1.04);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 940ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-held-item-aura-presence var(--fx-sheet-duration, 940ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-line-grove {
  mix-blend-mode: normal;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1660ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-line-grove-presence var(--fx-sheet-duration, 1660ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-sylvan-sovereign-line {
  z-index: 16;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(156, 255, 105, 0.98))
    drop-shadow(0 0 48px rgba(217, 255, 138, 0.72))
    drop-shadow(0 0 64px rgba(72, 128, 36, 0.54))
    saturate(1.22)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1860ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-sylvan-sovereign-line-presence var(--fx-sheet-duration, 1860ms) cubic-bezier(0.14, 0.78, 0.2, 1) forwards;
}

@keyframes fx-sheet-held-item-aura-presence {
  0% { opacity: 0; transform: translate(-50%, -45%) scale(0.58); }
  10% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.82); }
  36% { opacity: 1; transform: translate(-50%, -52%) scale(1.02); }
  70% { opacity: 0.82; transform: translate(-50%, -54%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1.18); }
}
.fx-sheet-affinity-tectonic {
  filter: drop-shadow(0 0 18px rgba(255, 242, 192, 0.88)) drop-shadow(0 0 30px rgba(111, 98, 85, 0.62)) saturate(1.12) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1512ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-tectonic-presence var(--fx-sheet-duration, 1512ms) cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}
.fx-sheet-affinity-blizzard {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(244, 253, 255, 0.98))
    drop-shadow(0 0 44px rgba(121, 207, 255, 0.82))
    drop-shadow(0 0 72px rgba(54, 112, 220, 0.46))
    saturate(1.2)
    contrast(1.05)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1620ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-blizzard-presence var(--fx-sheet-duration, 1620ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-affinity-swarm {
  filter: drop-shadow(0 0 18px rgba(247, 216, 75, 0.9)) drop-shadow(0 0 30px rgba(255, 241, 160, 0.58)) saturate(1.22) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1458ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-swarm-presence var(--fx-sheet-duration, 1458ms) cubic-bezier(0.2, 0.74, 0.25, 1) forwards;
}
.fx-sheet-affinity-rift {
  filter: drop-shadow(0 0 18px rgba(199, 240, 255, 0.92)) drop-shadow(0 0 32px rgba(201, 160, 255, 0.72)) saturate(1.22) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1566ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-rift-presence var(--fx-sheet-duration, 1566ms) cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}
.fx-sheet-astral-rift {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 28px rgba(215, 248, 255, 0.98))
    drop-shadow(0 0 54px rgba(154, 123, 255, 0.9))
    drop-shadow(0 0 82px rgba(29, 41, 120, 0.58))
    saturate(1.48)
    brightness(1.24);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-astral-rift-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-affinity-nova {
  z-index: 18;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(176, 94, 255, 0.98))
    drop-shadow(0 0 34px rgba(35, 215, 255, 0.82))
    drop-shadow(0 0 52px rgba(5, 3, 12, 0.9))
    saturate(1.32)
    brightness(1.12)
    contrast(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1900ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-nova-presence var(--fx-sheet-duration, 1900ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-affinity-abyss {
  z-index: 17;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 22px rgba(35, 215, 255, 0.96))
    drop-shadow(0 0 40px rgba(123, 80, 255, 0.86))
    drop-shadow(0 0 58px rgba(5, 3, 10, 0.9))
    saturate(1.34)
    contrast(1.12)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1880ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-abyss-presence var(--fx-sheet-duration, 1880ms) cubic-bezier(0.14, 0.78, 0.2, 1) forwards;
}
.fx-sheet-affinity-rune {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(255, 242, 192, 0.96))
    drop-shadow(0 0 32px rgba(138, 223, 242, 0.82))
    drop-shadow(0 0 46px rgba(201, 160, 255, 0.72))
    saturate(1.28)
    brightness(1.14)
    contrast(1.06);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1820ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-affinity-rune-presence var(--fx-sheet-duration, 1820ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-glyph-gale-line {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(125, 240, 255, 0.96))
    drop-shadow(0 0 36px rgba(255, 217, 120, 0.72))
    saturate(1.2)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1380ms) steps(var(--fx-sheet-steps, 15), end) forwards,
    fx-sheet-glyph-gale-line-presence var(--fx-sheet-duration, 1380ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-runic-featherfall {
  mix-blend-mode: screen;
  transform-origin: 50% 62%;
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.96))
    drop-shadow(0 0 40px rgba(255, 217, 120, 0.7))
    saturate(1.18)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1500ms) steps(var(--fx-sheet-steps, 15), end) forwards,
    fx-sheet-runic-featherfall-presence var(--fx-sheet-duration, 1500ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-second-attack {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1040ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-second-presence var(--fx-sheet-duration, 1040ms) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}
.fx-sheet-second-normal { filter: drop-shadow(0 0 18px rgba(255, 242, 166, 0.9)) saturate(1.12) brightness(1.1); }
.fx-sheet-second-flame { filter: drop-shadow(0 0 20px rgba(255, 82, 28, 0.95)) drop-shadow(0 0 34px rgba(255, 209, 102, 0.64)) saturate(1.3) brightness(1.1); }
.fx-sheet-ember-snap {
  mix-blend-mode: screen;
  transform-origin: 50% 68%;
  filter:
    drop-shadow(0 0 22px rgba(255, 86, 26, 0.98))
    drop-shadow(0 0 38px rgba(255, 214, 92, 0.72))
    saturate(1.34)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 920ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-ember-snap-presence var(--fx-sheet-duration, 920ms) cubic-bezier(0.17, 0.78, 0.22, 1) forwards;
}
.fx-sheet-second-leaf { filter: drop-shadow(0 0 18px rgba(121, 194, 103, 0.9)) drop-shadow(0 0 30px rgba(214, 239, 138, 0.58)) saturate(1.18) brightness(1.08); }
.fx-sheet-leaf-flick-line {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(183, 220, 96, 0.94))
    drop-shadow(0 0 32px rgba(95, 191, 99, 0.72))
    saturate(1.2)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 900ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-leaf-flick-line-presence var(--fx-sheet-duration, 900ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-spark-pounce-line {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 20px rgba(255, 228, 81, 0.98))
    drop-shadow(0 0 34px rgba(116, 215, 255, 0.8))
    drop-shadow(0 0 42px rgba(123, 100, 217, 0.58))
    saturate(1.28)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 860ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-spark-pounce-line-presence var(--fx-sheet-duration, 860ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-second-water { filter: drop-shadow(0 0 20px rgba(95, 202, 245, 0.94)) drop-shadow(0 0 34px rgba(31, 134, 200, 0.66)) saturate(1.18) brightness(1.08); }
.fx-sheet-second-volt { filter: drop-shadow(0 0 20px rgba(255, 228, 81, 0.96)) drop-shadow(0 0 32px rgba(116, 215, 255, 0.74)) saturate(1.24) brightness(1.12); }
.fx-sheet-second-stone { filter: drop-shadow(0 0 18px rgba(211, 189, 139, 0.86)) drop-shadow(0 0 30px rgba(95, 81, 69, 0.62)) saturate(1.12) brightness(1.06); }
.fx-sheet-void-rend {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.92))
    drop-shadow(0 0 32px rgba(123, 80, 255, 0.78))
    drop-shadow(0 0 42px rgba(5, 3, 12, 0.82))
    saturate(1.26)
    contrast(1.08)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1040ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-void-rend-presence var(--fx-sheet-duration, 1040ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-bastimaw-roll {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.82))
    drop-shadow(0 0 30px rgba(211, 189, 139, 0.72))
    drop-shadow(0 0 42px rgba(17, 24, 39, 0.74))
    saturate(1.16)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1120ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-bastimaw-roll-presence var(--fx-sheet-duration, 1120ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-bastimaw-fist {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(125, 240, 255, 0.9))
    drop-shadow(0 0 34px rgba(211, 189, 139, 0.78))
    drop-shadow(0 0 52px rgba(17, 24, 39, 0.78))
    saturate(1.18)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-bastimaw-fist-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.15, 0.78, 0.18, 1) forwards;
}
.fx-sheet-bastimaw-crush {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.94))
    drop-shadow(0 0 44px rgba(211, 189, 139, 0.68))
    drop-shadow(0 0 58px rgba(17, 24, 39, 0.82))
    saturate(1.22)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1380ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-bastimaw-crush-presence var(--fx-sheet-duration, 1380ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-quake-horn-line {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(255, 239, 185, 0.96))
    drop-shadow(0 0 34px rgba(188, 122, 42, 0.78))
    drop-shadow(0 0 48px rgba(69, 48, 30, 0.72))
    saturate(1.24)
    brightness(1.12)
    contrast(1.06);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-quake-horn-line-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-second-light { filter: drop-shadow(0 0 20px rgba(255, 247, 168, 0.94)) drop-shadow(0 0 34px rgba(182, 156, 255, 0.72)) saturate(1.26) brightness(1.14); }
.fx-sheet-second-shadow { mix-blend-mode: normal; filter: drop-shadow(0 0 20px rgba(138, 107, 173, 0.9)) drop-shadow(0 0 34px rgba(17, 19, 28, 0.76)) saturate(1.2) brightness(1.08); }
.fx-sheet-eclipse-maul {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(196, 154, 255, 0.9))
    drop-shadow(0 0 36px rgba(72, 35, 132, 0.82))
    drop-shadow(0 0 52px rgba(0, 0, 0, 0.9))
    saturate(1.28)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1120ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-eclipse-maul-presence var(--fx-sheet-duration, 1120ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-eclipsora-moon-silk-requiem {
  z-index: 18;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(248, 242, 255, 0.98))
    drop-shadow(0 0 42px rgba(195, 156, 255, 0.86))
    drop-shadow(0 0 64px rgba(95, 42, 168, 0.7))
    saturate(1.26)
    contrast(1.08)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2100ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-eclipsora-moon-silk-requiem-presence var(--fx-sheet-duration, 2100ms) cubic-bezier(0.16, 0.76, 0.2, 1) forwards;
}
.fx-sheet-shade-nibble-imagegen {
  z-index: 15;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 18px rgba(168, 88, 255, 0.9))
    drop-shadow(0 0 36px rgba(60, 22, 105, 0.86))
    drop-shadow(0 0 48px rgba(0, 0, 0, 0.84))
    saturate(1.24)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 940ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-shade-nibble-imagegen-presence var(--fx-sheet-duration, 940ms) cubic-bezier(0.15, 0.78, 0.2, 1) forwards;
}
.fx-sheet-crunch-hex-imagegen {
  z-index: 15;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(178, 86, 255, 0.94))
    drop-shadow(0 0 40px rgba(85, 30, 150, 0.86))
    drop-shadow(0 0 56px rgba(10, 4, 22, 0.9))
    saturate(1.28)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1040ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-crunch-hex-imagegen-presence var(--fx-sheet-duration, 1040ms) cubic-bezier(0.14, 0.78, 0.2, 1) forwards;
}
.fx-sheet-second-frost { filter: drop-shadow(0 0 20px rgba(223, 248, 255, 0.95)) drop-shadow(0 0 34px rgba(85, 136, 194, 0.68)) saturate(1.16) brightness(1.12); }
.fx-sheet-second-bug { filter: drop-shadow(0 0 18px rgba(247, 216, 75, 0.92)) drop-shadow(0 0 30px rgba(62, 50, 48, 0.58)) saturate(1.16) brightness(1.08); }
.fx-sheet-second-dragon { filter: drop-shadow(0 0 20px rgba(169, 199, 255, 0.94)) drop-shadow(0 0 32px rgba(123, 122, 216, 0.7)) saturate(1.18) brightness(1.1); }
.fx-sheet-comet-roar-epic {
  z-index: 16;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 26px rgba(169, 199, 255, 0.98))
    drop-shadow(0 0 54px rgba(123, 122, 216, 0.82))
    drop-shadow(0 0 72px rgba(125, 220, 255, 0.54))
    saturate(1.28)
    brightness(1.16);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1620ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-comet-roar-epic-presence var(--fx-sheet-duration, 1620ms) cubic-bezier(0.14, 0.78, 0.2, 1) forwards;
}
.fx-sheet-thunder-crown-epic {
  z-index: 17;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 28px rgba(255, 228, 81, 0.98))
    drop-shadow(0 0 56px rgba(116, 215, 255, 0.84))
    drop-shadow(0 0 74px rgba(122, 101, 216, 0.54))
    saturate(1.32)
    brightness(1.18);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1760ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-thunder-crown-epic-presence var(--fx-sheet-duration, 1760ms) cubic-bezier(0.12, 0.82, 0.2, 1) forwards;
}
.fx-sheet-second-astral { filter: drop-shadow(0 0 20px rgba(159, 230, 255, 0.9)) drop-shadow(0 0 34px rgba(185, 166, 255, 0.72)) saturate(1.18) brightness(1.12); }
.fx-sheet-second-abyssal { mix-blend-mode: normal; filter: drop-shadow(0 0 20px rgba(125, 240, 255, 0.9)) drop-shadow(0 0 34px rgba(91, 74, 160, 0.78)) saturate(1.2) brightness(1.08); }
.fx-sheet-second-runic { filter: drop-shadow(0 0 20px rgba(255, 217, 120, 0.94)) drop-shadow(0 0 32px rgba(125, 240, 255, 0.72)) saturate(1.16) brightness(1.12); }
.fx-sheet-trade-signature {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-trade-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-trade-line {
  transform-origin: 50% 50%;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-trade-line-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-heaven-signature {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 235, 166, 0.96))
    drop-shadow(0 0 42px rgba(126, 235, 255, 0.66))
    saturate(1.18)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-trade-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-heaven-line {
  transform-origin: 50% 50%;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-trade-line-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-heaven-vertical,
.fx-sheet-heaven-boss {
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.82) 91%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.82) 91%, transparent 100%);
}
.fx-sheet-heaven-boss {
  filter:
    drop-shadow(0 0 28px rgba(255, 236, 170, 0.98))
    drop-shadow(0 0 52px rgba(126, 235, 255, 0.78))
    saturate(1.24)
    brightness(1.16);
}
.fx-sheet-trade-runic {
  filter:
    drop-shadow(0 0 24px rgba(255, 217, 120, 0.98))
    drop-shadow(0 0 42px rgba(125, 240, 255, 0.84))
    saturate(1.24)
    brightness(1.16);
}
.fx-sheet-trade-abyssal {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 24px rgba(35, 215, 255, 0.96))
    drop-shadow(0 0 42px rgba(91, 74, 160, 0.9))
    saturate(1.26)
    brightness(1.1);
}
.fx-sheet-voidscale-rend {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(35, 215, 255, 0.98))
    drop-shadow(0 0 46px rgba(111, 91, 255, 0.9))
    drop-shadow(0 0 56px rgba(6, 8, 18, 0.88))
    saturate(1.34)
    contrast(1.1)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1480ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-voidscale-rend-presence var(--fx-sheet-duration, 1480ms) cubic-bezier(0.14, 0.78, 0.2, 1) forwards;
}
.fx-sheet-trade-frost {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(223, 250, 255, 0.98))
    drop-shadow(0 0 42px rgba(125, 240, 255, 0.82))
    drop-shadow(0 0 50px rgba(91, 74, 160, 0.55))
    saturate(1.2)
    brightness(1.13);
}
.fx-sheet-trade-astral {
  filter:
    drop-shadow(0 0 24px rgba(255, 228, 81, 0.98))
    drop-shadow(0 0 42px rgba(116, 215, 255, 0.86))
    drop-shadow(0 0 50px rgba(123, 100, 217, 0.64))
    saturate(1.3)
    brightness(1.16);
}
.fx-sheet-trade-stone {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(255, 242, 192, 0.92))
    drop-shadow(0 0 38px rgba(125, 240, 255, 0.68))
    drop-shadow(0 0 48px rgba(17, 24, 39, 0.75))
    saturate(1.12)
    brightness(1.08);
}
.fx-sheet-trade-light {
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.98))
    drop-shadow(0 0 42px rgba(255, 233, 168, 0.82))
    drop-shadow(0 0 50px rgba(201, 160, 255, 0.62))
    saturate(1.22)
    brightness(1.2);
}
.fx-sheet-trade-void {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 28px rgba(35, 215, 255, 0.96))
    drop-shadow(0 0 52px rgba(111, 91, 255, 0.9))
    drop-shadow(0 0 62px rgba(2, 7, 19, 0.95))
    saturate(1.3)
    brightness(1.12);
}
.fx-sheet-crab-signature {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1360ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-crab-presence var(--fx-sheet-duration, 1360ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-crab-line {
  transform-origin: 50% 50%;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1240ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-crab-line-presence var(--fx-sheet-duration, 1240ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-crab-buff {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-crab-buff-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-crab-smash {
  filter:
    drop-shadow(0 0 24px rgba(255, 242, 192, 0.94))
    drop-shadow(0 0 48px rgba(208, 69, 62, 0.86))
    drop-shadow(0 0 64px rgba(20, 12, 14, 0.92))
    saturate(1.24)
    brightness(1.1);
}
.fx-sheet-crab-tidal {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.9))
    drop-shadow(0 0 44px rgba(216, 54, 58, 0.84))
    drop-shadow(0 0 58px rgba(83, 16, 24, 0.82))
    saturate(1.28)
    brightness(1.12);
}
.fx-sheet-crab-quake {
  filter:
    drop-shadow(0 0 26px rgba(255, 243, 194, 0.9))
    drop-shadow(0 0 52px rgba(240, 106, 90, 0.88))
    drop-shadow(0 0 72px rgba(16, 10, 12, 0.92))
    saturate(1.22)
    brightness(1.08);
}
.fx-sheet-crab-carapace {
  filter:
    drop-shadow(0 0 22px rgba(255, 242, 192, 0.86))
    drop-shadow(0 0 46px rgba(208, 69, 62, 0.88))
    drop-shadow(0 0 56px rgba(54, 10, 16, 0.9))
    saturate(1.22)
    brightness(1.1);
}
.fx-sheet-starter-signature {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1080ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-starter-presence var(--fx-sheet-duration, 1080ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-starter-fire { filter: drop-shadow(0 0 22px rgba(255, 91, 34, 0.96)) drop-shadow(0 0 38px rgba(255, 210, 106, 0.68)) saturate(1.32) brightness(1.12); }
.fx-sheet-starter-water { mix-blend-mode: normal; filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.96)) drop-shadow(0 0 38px rgba(223, 250, 255, 0.72)) saturate(1.24) brightness(1.1); }
.fx-sheet-starter-leaf { mix-blend-mode: normal; filter: drop-shadow(0 0 22px rgba(88, 199, 107, 0.94)) drop-shadow(0 0 36px rgba(220, 242, 139, 0.64)) saturate(1.22) brightness(1.08); }
.fx-sheet-starter-volt { mix-blend-mode: normal; filter: drop-shadow(0 0 22px rgba(75, 214, 255, 0.96)) drop-shadow(0 0 38px rgba(87, 92, 255, 0.68)) saturate(1.28) brightness(1.1); }
.fx-sheet-starter-frost { mix-blend-mode: normal; filter: drop-shadow(0 0 22px rgba(205, 246, 255, 0.96)) drop-shadow(0 0 38px rgba(111, 154, 255, 0.7)) saturate(1.18) brightness(1.1); }
.fx-sheet-starter-stone { mix-blend-mode: normal; filter: drop-shadow(0 0 20px rgba(225, 165, 77, 0.82)) drop-shadow(0 0 36px rgba(91, 59, 34, 0.62)) saturate(1.16) brightness(1.06); }
.fx-sheet-starter-panda { mix-blend-mode: screen; filter: drop-shadow(0 0 22px rgba(255, 231, 138, 0.98)) drop-shadow(0 0 38px rgba(98, 201, 108, 0.64)) saturate(1.18) brightness(1.12); }
.fx-sheet-rootlight-bark { mix-blend-mode: screen; filter: drop-shadow(0 0 22px rgba(224, 255, 170, 0.98)) drop-shadow(0 0 40px rgba(95, 196, 111, 0.68)) saturate(1.18) brightness(1.14); }
.fx-sheet-heartroot-genesis {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(224, 255, 170, 0.98))
    drop-shadow(0 0 44px rgba(99, 255, 150, 0.76))
    drop-shadow(0 0 54px rgba(255, 216, 111, 0.56))
    saturate(1.22)
    brightness(1.16)
    contrast(1.04);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1900ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-starter-presence var(--fx-sheet-duration, 1900ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-status {
  mix-blend-mode: screen;
}
.fx-sheet-erholung {
  filter: drop-shadow(0 0 20px rgba(131, 232, 255, 0.94)) drop-shadow(0 0 36px rgba(255, 232, 157, 0.7)) saturate(1.18) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1260ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-erholung-presence var(--fx-sheet-duration, 1260ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-hypnose {
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 18px rgba(172, 128, 255, 0.82)) drop-shadow(0 0 40px rgba(24, 12, 48, 0.72)) saturate(1.08) contrast(1.06) brightness(1.02);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-hypnose-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}
.fx-sheet-pollen-sting {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-granite-roll-travel-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-aether-wingfall {
  filter:
    drop-shadow(0 0 28px rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 56px rgba(141, 123, 255, 0.58))
    drop-shadow(0 0 68px rgba(255, 217, 120, 0.44))
    saturate(1.22)
    contrast(1.06)
    brightness(1.13);
}
.fx-sheet-super-prestige-aura {
  z-index: 19;
  filter:
    drop-shadow(0 0 28px rgba(255, 248, 190, 0.96))
    drop-shadow(0 0 58px rgba(125, 240, 255, 0.62))
    drop-shadow(0 0 74px rgba(255, 154, 61, 0.38))
    saturate(1.26)
    contrast(1.07)
    brightness(1.16);
}
.fx-sheet-status-golden-carapace,
.fx-sheet-status-iron-guard,
.fx-sheet-status-mist-veil,
.fx-sheet-status-battle-roar,
.fx-sheet-status-focus-chant,
.fx-sheet-status-swift-wind,
.fx-sheet-status-recover,
.fx-sheet-status-bask,
.fx-sheet-status-scary-roar,
.fx-sheet-status-screech,
.fx-sheet-status-acid-spray,
.fx-sheet-status-mud-toss,
.fx-sheet-status-hex-gaze {
  transform-origin: 50% 58%;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.54))
    drop-shadow(0 0 34px rgba(125, 240, 255, 0.28))
    saturate(1.14)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 820ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-status-imagegen-presence var(--fx-sheet-duration, 820ms) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}
.fx-sheet-status-scary-roar,
.fx-sheet-status-hex-gaze {
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(185, 166, 255, 0.72))
    drop-shadow(0 0 38px rgba(26, 22, 38, 0.72))
    saturate(1.18)
    brightness(1.06);
}
.fx-sheet-status-acid-spray {
  filter:
    drop-shadow(0 0 20px rgba(154, 209, 79, 0.84))
    drop-shadow(0 0 38px rgba(79, 111, 42, 0.62))
    saturate(1.2)
    brightness(1.1);
}
.fx-sheet-mid-attack {
  mix-blend-mode: screen;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 980ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-mid-presence var(--fx-sheet-duration, 980ms) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}
.fx-sheet-mid-vertical {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 980ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-mid-vertical-presence var(--fx-sheet-duration, 980ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-mid-light { filter: drop-shadow(0 0 20px rgba(255, 247, 168, 0.9)) drop-shadow(0 0 34px rgba(152, 242, 210, 0.68)) saturate(1.2) brightness(1.12); }
.fx-sheet-aurora-bark {
  filter:
    drop-shadow(0 0 22px rgba(255, 248, 190, 0.96))
    drop-shadow(0 0 38px rgba(134, 188, 255, 0.78))
    drop-shadow(0 0 46px rgba(178, 151, 255, 0.62))
    saturate(1.28)
    brightness(1.14)
    contrast(1.04);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1180ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-aurora-bark-presence var(--fx-sheet-duration, 1180ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-mid-volt { filter: drop-shadow(0 0 20px rgba(255, 228, 81, 0.96)) drop-shadow(0 0 34px rgba(116, 215, 255, 0.78)) saturate(1.24) brightness(1.12); }
.fx-sheet-static-purr {
  mix-blend-mode: screen;
  transform-origin: 50% 58%;
  filter:
    drop-shadow(0 0 22px rgba(255, 228, 81, 0.98))
    drop-shadow(0 0 38px rgba(116, 215, 255, 0.78))
    drop-shadow(0 0 42px rgba(123, 100, 217, 0.58))
    saturate(1.26)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 980ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-static-purr-presence var(--fx-sheet-duration, 980ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-storm-needle-line {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 22px rgba(255, 228, 81, 0.98))
    drop-shadow(0 0 36px rgba(116, 215, 255, 0.86))
    drop-shadow(0 0 44px rgba(123, 100, 217, 0.66))
    saturate(1.3)
    brightness(1.16);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1080ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-storm-needle-line-presence var(--fx-sheet-duration, 1080ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-mid-flame { filter: drop-shadow(0 0 20px rgba(255, 77, 31, 0.94)) drop-shadow(0 0 32px rgba(255, 176, 46, 0.64)) saturate(1.26) brightness(1.1); }
.fx-sheet-mid-water { filter: drop-shadow(0 0 20px rgba(95, 202, 245, 0.92)) drop-shadow(0 0 32px rgba(31, 127, 184, 0.66)) saturate(1.16) brightness(1.08); }
.fx-sheet-mid-dragon { filter: drop-shadow(0 0 20px rgba(147, 165, 255, 0.92)) drop-shadow(0 0 32px rgba(123, 122, 216, 0.72)) saturate(1.18) brightness(1.1); }
.fx-sheet-mid-shadow { mix-blend-mode: normal; filter: drop-shadow(0 0 20px rgba(138, 107, 173, 0.88)) drop-shadow(0 0 32px rgba(29, 32, 45, 0.74)) saturate(1.18) brightness(1.08); }
.fx-sheet-mid-stone { filter: drop-shadow(0 0 18px rgba(201, 184, 152, 0.86)) drop-shadow(0 0 30px rgba(59, 51, 45, 0.64)) saturate(1.1) brightness(1.06); }
.fx-sheet-cinder-eruption {
  filter: drop-shadow(0 0 20px rgba(255, 90, 42, 0.96)) drop-shadow(0 0 36px rgba(255, 210, 74, 0.68)) saturate(1.3) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1360ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-cinder-eruption-presence var(--fx-sheet-duration, 1360ms) cubic-bezier(0.25, 0.68, 0.22, 1) forwards;
}
.fx-sheet-cinder-meteor {
  transform-origin: 50% 68%;
  filter: drop-shadow(0 0 24px rgba(255, 122, 42, 0.94)) drop-shadow(0 0 44px rgba(255, 59, 24, 0.58)) saturate(1.22) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1760ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-cinder-meteor-presence var(--fx-sheet-duration, 1760ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-cinder-lash {
  filter: drop-shadow(0 0 18px rgba(255, 92, 34, 0.96)) drop-shadow(0 0 28px rgba(255, 179, 71, 0.62)) saturate(1.28) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 900ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-cinder-lash-presence var(--fx-sheet-duration, 900ms) cubic-bezier(0.18, 0.8, 0.24, 1) forwards;
}
.fx-sheet-cinder-infernal {
  transform-origin: 50% 78%;
  filter: drop-shadow(0 0 24px rgba(255, 131, 48, 0.92)) drop-shadow(0 0 42px rgba(255, 210, 74, 0.58)) saturate(1.2) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1580ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-cinder-infernal-presence var(--fx-sheet-duration, 1580ms) cubic-bezier(0.2, 0.74, 0.25, 1) forwards;
}
/* T1-T5 special VFX rebuilds use verified transparent source borders, so they
   can render without the legacy emergency feather mask. Their own alpha and
   open internal silhouettes keep the combatant visible beneath the art. */
.fx-sheet-crimson-tidal-special,
.fx-sheet-magma-lash-special,
.fx-sheet-prism-nova-special,
.fx-sheet-hive-arc-special,
.fx-sheet-blizzard-crown-special,
.fx-sheet-rift-special-rebuild {
  z-index: 18;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.fx-sheet-crimson-tidal-special,
.fx-sheet-magma-lash-special,
.fx-sheet-hive-arc-special {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1240ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-rift-special-line-presence var(--fx-sheet-duration, 1240ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-prism-nova-special,
.fx-sheet-blizzard-crown-special,
.fx-sheet-rift-special-rebuild {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1780ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-rift-special-impact-presence var(--fx-sheet-duration, 1780ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-prism-nova-special,
.fx-sheet-blizzard-crown-special,
.fx-sheet-rift-special-rebuild.fx-sheet-reactornox-meltdown {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1780ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-rift-glass-impact-presence var(--fx-sheet-duration, 1780ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-rift-special-rebuild.fx-sheet-reactornox-meltdown {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2050ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-rift-meltdown-presence var(--fx-sheet-duration, 2050ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-crimson-tidal-special {
  filter:
    drop-shadow(0 0 16px rgba(125, 240, 255, 0.72))
    drop-shadow(0 0 30px rgba(216, 54, 58, 0.58))
    saturate(1.12) contrast(1.04) brightness(1.04);
}
.fx-sheet-magma-lash-special {
  filter:
    drop-shadow(0 0 16px rgba(255, 179, 71, 0.72))
    drop-shadow(0 0 30px rgba(255, 68, 24, 0.56))
    saturate(1.14) contrast(1.05) brightness(1.04);
}
.fx-sheet-hive-arc-special {
  filter:
    drop-shadow(0 0 15px rgba(255, 241, 160, 0.76))
    drop-shadow(0 0 28px rgba(247, 180, 48, 0.54))
    saturate(1.12) contrast(1.04) brightness(1.04);
}
.fx-sheet-prism-nova-special {
  filter:
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.62))
    drop-shadow(0 0 28px rgba(165, 132, 255, 0.44))
    saturate(1.06) contrast(1.03) brightness(1);
}
.fx-sheet-blizzard-crown-special {
  filter:
    drop-shadow(0 0 16px rgba(244, 253, 255, 0.66))
    drop-shadow(0 0 30px rgba(90, 176, 255, 0.46))
    saturate(1.04) contrast(1.03) brightness(0.98);
}
.fx-sheet-reactornox-meltdown {
  filter:
    drop-shadow(0 0 17px rgba(255, 170, 70, 0.64))
    drop-shadow(0 0 32px rgba(255, 54, 18, 0.46))
    saturate(1.08) contrast(1.05) brightness(1);
}
.fx-sheet-thundrocore-storm {
  filter:
    drop-shadow(0 0 19px rgba(255, 247, 190, 0.7))
    drop-shadow(0 0 38px rgba(139, 92, 246, 0.56))
    saturate(1.1) contrast(1.05) brightness(1.04);
}

/* 2026-08-26 attack refinement. Every installed cell already has generous
   transparent margins and intentional open areas around the combatant. Bypass
   the legacy rectangular feather so those authored alpha shapes stay crisp. */
.fx-sprite-sheet.fx-sheet-attack-refinement {
  z-index: 18;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Cometcore's generated ring already carries soft alpha in its star-script.
   A restrained runtime glow preserves those gaps instead of blooming them
   back into the opaque white disc used by the legacy sheet. */
.fx-sprite-sheet.fx-sheet-cometcore-rewrite-remaster {
  filter:
    drop-shadow(0 0 18px rgba(255, 228, 81, 0.76))
    drop-shadow(0 0 34px rgba(116, 215, 255, 0.62))
    drop-shadow(0 0 42px rgba(123, 100, 217, 0.38))
    saturate(1.14)
    contrast(1.04)
    brightness(1.05);
}

/* T6-T13 remasters. These sheets were rebuilt or repacked with verified alpha
   borders, so their real transparency can replace the legacy cell feather.
   The restrained peak opacity keeps the combatant readable inside open rings,
   cages, fractures and crowns without weakening the impact silhouette. */
.fx-sprite-sheet.fx-sheet-rift-tuned,
.fx-sprite-sheet.fx-sheet-rift-tune-only,
.fx-sprite-sheet.fx-sheet-rift-generated {
  z-index: 18;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}
.fx-sprite-sheet.fx-sheet-rift-tuned,
.fx-sprite-sheet.fx-sheet-rift-tune-only {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2200ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-rift-tuned-presence var(--fx-sheet-duration, 2200ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sprite-sheet.fx-sheet-rift-generated {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1900ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-rift-generated-presence var(--fx-sheet-duration, 1900ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sprite-sheet.fx-sheet-umbra-open-core {
  -webkit-mask-image: radial-gradient(ellipse at 50% 51%, rgba(0, 0, 0, 0.3) 0 17%, rgba(0, 0, 0, 0.72) 30%, #000 46% 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 51%, rgba(0, 0, 0, 0.3) 0 17%, rgba(0, 0, 0, 0.72) 30%, #000 46% 82%, transparent 100%);
}
.fx-sprite-sheet.fx-sheet-glyph-brand-remaster {
  filter: drop-shadow(0 0 17px rgba(255, 217, 120, 0.72)) drop-shadow(0 0 30px rgba(125, 240, 255, 0.48)) saturate(1.08) contrast(1.04);
}
.fx-sprite-sheet.fx-sheet-rune-cataclysm-remaster {
  filter: drop-shadow(0 0 15px rgba(255, 224, 126, 0.7)) drop-shadow(0 0 26px rgba(125, 240, 255, 0.5)) saturate(1.08) contrast(1.06);
}
.fx-sprite-sheet.fx-sheet-umbrael-black-hole-remaster {
  filter: drop-shadow(0 0 20px rgba(173, 106, 255, 0.72)) drop-shadow(0 0 34px rgba(125, 220, 255, 0.42)) saturate(1.08) contrast(1.08);
}
.fx-sprite-sheet.fx-sheet-astral-rift-remaster {
  filter: drop-shadow(0 0 18px rgba(206, 244, 255, 0.76)) drop-shadow(0 0 34px rgba(141, 123, 255, 0.52)) saturate(1.06) contrast(1.05);
}
.fx-sprite-sheet.fx-sheet-prism-storm-remaster {
  filter: drop-shadow(0 0 16px rgba(255, 232, 126, 0.68)) drop-shadow(0 0 30px rgba(137, 224, 255, 0.52)) saturate(1.08) contrast(1.04);
}
.fx-sprite-sheet.fx-sheet-nullaeon-paradox-remaster {
  filter: drop-shadow(0 0 17px rgba(255, 224, 154, 0.66)) drop-shadow(0 0 31px rgba(125, 240, 255, 0.5)) saturate(1.04) contrast(1.05);
}
.fx-sprite-sheet.fx-sheet-nerothane-eye {
  filter: drop-shadow(0 0 18px rgba(255, 48, 56, 0.72)) drop-shadow(0 0 34px rgba(149, 68, 255, 0.44)) saturate(1.08) contrast(1.08);
}
.fx-sprite-sheet.fx-sheet-nerothane-coffin,
.fx-sprite-sheet.fx-sheet-nerothane-throne {
  filter: drop-shadow(0 0 18px rgba(129, 66, 255, 0.66)) drop-shadow(0 0 32px rgba(214, 34, 68, 0.4)) saturate(1.06) contrast(1.08);
}
@keyframes fx-sheet-rift-tuned-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.84); }
  7% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.94); }
  48% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 0.76; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes fx-sheet-rift-generated-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
  6% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.95); }
  46% { opacity: 0.94; transform: translate(-50%, -50%) scale(1); }
  82% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.015); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.045); }
}
@keyframes fx-sheet-rift-special-line-presence {
  0% { opacity: 0.48; transform: translate(-50%, -50%) scaleX(0.82) scaleY(0.9); }
  6% { opacity: 0.98; transform: translate(-50%, -50%) scaleX(0.94) scaleY(0.97); }
  70% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.03) scaleY(1.02); }
  92% { opacity: 0.86; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.9); }
}
@keyframes fx-sheet-rift-special-impact-presence {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  6% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.97); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  92% { opacity: 0.86; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes fx-sheet-rift-glass-impact-presence {
  0% { opacity: 0.38; transform: translate(-50%, -50%) scale(0.9); }
  6% { opacity: 0.76; transform: translate(-50%, -50%) scale(0.97); }
  70% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.02); }
  92% { opacity: 0.66; transform: translate(-50%, -50%) scale(1.01); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes fx-sheet-rift-meltdown-presence {
  0% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.9); }
  6% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.97); }
  70% { opacity: 0.46; transform: translate(-50%, -50%) scale(1.02); }
  92% { opacity: 0.34; transform: translate(-50%, -50%) scale(1.01); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}
.fx-sheet-phoenix-signature {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 106, 36, 0.96))
    drop-shadow(0 0 42px rgba(255, 216, 111, 0.7))
    saturate(1.26) brightness(1.12);
}
.fx-sheet-phoenix-feather-line {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1120ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-phoenix-line-presence var(--fx-sheet-duration, 1120ms) cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}
.fx-sheet-phoenix-sunflare {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-phoenix-bloom-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-phoenix-rebirth {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 216, 111, 0.96))
    drop-shadow(0 0 42px rgba(255, 106, 36, 0.64))
    saturate(1.18) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-phoenix-rebirth-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}
.fx-sheet-phoenix-solar {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1880ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-phoenix-solar-presence var(--fx-sheet-duration, 1880ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-tempestide-maelstrom {
  filter: drop-shadow(0 0 24px rgba(125, 240, 255, 0.98)) drop-shadow(0 0 42px rgba(47, 111, 176, 0.82)) drop-shadow(0 0 56px rgba(234, 253, 255, 0.42)) saturate(1.34) brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1740ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tempestide-maelstrom-presence var(--fx-sheet-duration, 1740ms) cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}
.fx-sheet-tempestide-stormfall {
  filter: drop-shadow(0 0 20px rgba(95, 208, 255, 0.96)) drop-shadow(0 0 32px rgba(255, 255, 255, 0.58)) saturate(1.22) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tempestide-stormfall-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}
.fx-sheet-tempestide-tsunami {
  filter: drop-shadow(0 0 20px rgba(125, 240, 255, 0.9)) drop-shadow(0 0 36px rgba(10, 47, 85, 0.74)) saturate(1.2) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1360ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tempestide-tsunami-presence var(--fx-sheet-duration, 1360ms) cubic-bezier(0.23, 0.7, 0.22, 1) forwards;
}
.fx-sheet-tempestide-riptide {
  filter: drop-shadow(0 0 22px rgba(125, 240, 255, 0.98)) drop-shadow(0 0 38px rgba(47, 111, 176, 0.78)) drop-shadow(0 0 44px rgba(189, 239, 255, 0.42)) saturate(1.3) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1280ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-tempestide-riptide-presence var(--fx-sheet-duration, 1280ms) cubic-bezier(0.2, 0.74, 0.25, 1) forwards;
}
.fx-sheet-maelstrom-vault {
  transform-origin: 50% 94%;
  filter: drop-shadow(0 0 22px rgba(125, 240, 255, 0.96)) drop-shadow(0 0 38px rgba(7, 63, 107, 0.78)) saturate(1.24) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1728ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-maelstrom-vault-presence var(--fx-sheet-duration, 1728ms) cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}
.fx-sheet-aeon-hypnos {
  filter: drop-shadow(0 0 20px rgba(185, 166, 255, 0.96)) drop-shadow(0 0 34px rgba(123, 100, 217, 0.72)) saturate(1.22) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1500ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-aeon-hypnos-presence var(--fx-sheet-duration, 1500ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-aeon-glaciate {
  filter: drop-shadow(0 0 20px rgba(223, 250, 255, 0.96)) drop-shadow(0 0 34px rgba(95, 159, 224, 0.72)) saturate(1.2) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1500ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-aeon-glaciate-presence var(--fx-sheet-duration, 1500ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-aeon-ascend {
  filter:
    drop-shadow(0 0 22px rgba(255, 233, 168, 0.98))
    drop-shadow(0 0 42px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 56px rgba(185, 166, 255, 0.54))
    saturate(1.24)
    brightness(1.18);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2000ms) steps(var(--fx-sheet-steps, 31), end) forwards,
    fx-sheet-aeon-ascend-presence var(--fx-sheet-duration, 2000ms) cubic-bezier(0.18, 0.76, 0.22, 1) forwards;
}
.fx-sheet-aeon-tempest {
  filter: drop-shadow(0 0 20px rgba(95, 208, 255, 0.94)) drop-shadow(0 0 34px rgba(201, 160, 255, 0.72)) saturate(1.22) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1500ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-aeon-tempest-presence var(--fx-sheet-duration, 1500ms) cubic-bezier(0.18, 0.78, 0.24, 1) forwards;
}
.fx-sheet-prismarch-storm {
  filter: drop-shadow(0 0 18px rgba(255, 242, 122, 0.96)) drop-shadow(0 0 30px rgba(155, 231, 255, 0.74)) saturate(1.28) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-prismarch-storm-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}
.fx-sheet-prismarch-disco {
  filter: drop-shadow(0 0 18px rgba(255, 93, 177, 0.92)) drop-shadow(0 0 30px rgba(95, 208, 255, 0.74)) saturate(1.34) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-prismarch-disco-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-prismarch-pyre {
  transform-origin: 50% 64%;
  filter: drop-shadow(0 0 20px rgba(255, 110, 40, 0.96)) drop-shadow(0 0 34px rgba(255, 215, 106, 0.62)) saturate(1.32) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1320ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-prismarch-pyre-presence var(--fx-sheet-duration, 1320ms) cubic-bezier(0.25, 0.7, 0.22, 1) forwards;
}
.fx-sheet-prismarch-freeze {
  filter: drop-shadow(0 0 18px rgba(189, 239, 255, 0.96)) drop-shadow(0 0 32px rgba(127, 200, 240, 0.72)) saturate(1.22) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1200ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-prismarch-freeze-presence var(--fx-sheet-duration, 1200ms) cubic-bezier(0.18, 0.76, 0.25, 1) forwards;
}
.fx-sheet-umbrael-blackhole {
  filter: drop-shadow(0 0 24px rgba(201, 160, 255, 0.96)) saturate(1.22) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1680ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-blackhole-presence var(--fx-sheet-duration, 1680ms) cubic-bezier(0.3, 0, 0.35, 1) forwards;
}
.fx-sheet-umbrael-nightfall {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1040ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-nightfall-presence var(--fx-sheet-duration, 1040ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-umbrael-dreadbeam {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1780ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-dreadbeam-presence var(--fx-sheet-duration, 1780ms) cubic-bezier(0.2, 0.7, 0.28, 1) forwards;
}
.fx-sheet-umbrael-wing {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1180ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-wing-presence var(--fx-sheet-duration, 1180ms) cubic-bezier(0.22, 0.74, 0.26, 1) forwards;
}
.fx-sheet-umbrael-nightfall {
  filter: drop-shadow(0 0 20px rgba(138, 79, 208, 0.96)) saturate(1.2) brightness(1.08);
}
.fx-sheet-umbrael-dreadbeam {
  filter: drop-shadow(0 0 24px rgba(201, 160, 255, 0.96)) saturate(1.22) brightness(1.1);
}
.fx-sheet-umbrael-wing {
  filter: drop-shadow(0 0 22px rgba(185, 166, 255, 0.94)) saturate(1.2) brightness(1.08);
}
.fx-sheet-riptalon-sailstorm {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(125, 240, 255, 0.96)) drop-shadow(0 0 44px rgba(33, 183, 212, 0.74)) saturate(1.24) brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1480ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-riptalon-sailstorm-presence var(--fx-sheet-duration, 1480ms) cubic-bezier(0.18, 0.78, 0.22, 1) forwards;
}
.fx-sheet-riptalon-beam {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 22px rgba(223, 250, 255, 0.96)) drop-shadow(0 0 48px rgba(35, 215, 255, 0.82)) saturate(1.3) brightness(1.16);
  transform-origin: 50% 50%;
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1740ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-riptalon-beam-presence var(--fx-sheet-duration, 1740ms) cubic-bezier(0.18, 0.76, 0.2, 1) forwards;
}
.fx-sheet-riptalon-crownfall {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(125, 240, 255, 0.96)) drop-shadow(0 0 52px rgba(6, 16, 31, 0.9)) saturate(1.28) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1860ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-riptalon-crownfall-presence var(--fx-sheet-duration, 1860ms) cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}
.fx-sheet-dino-signature {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1500ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1500ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-sky {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 22px rgba(191, 227, 255, 0.96)) drop-shadow(0 0 38px rgba(127, 169, 200, 0.72)) saturate(1.2) brightness(1.1);
}
.fx-sheet-dino-frost {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(205, 238, 255, 0.96)) drop-shadow(0 0 42px rgba(143, 208, 240, 0.72)) saturate(1.18) brightness(1.12);
}
.fx-sheet-dino-thagomizer {
  filter: drop-shadow(0 0 22px rgba(255, 242, 192, 0.9)) drop-shadow(0 0 36px rgba(183, 192, 122, 0.64)) saturate(1.16) brightness(1.08);
}
.fx-sheet-dino-apexdevour {
  z-index: 19;
  mix-blend-mode: normal;
  transform-origin: 50% 54%;
  filter:
    drop-shadow(0 0 26px rgba(255, 243, 194, 0.9))
    saturate(1.24)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1800ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-dino-apexdevour-presence var(--fx-sheet-duration, 1800ms) cubic-bezier(0.15, 0.78, 0.2, 1) forwards;
}
.fx-sheet-dino-abyssal {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(191, 240, 255, 0.94)) drop-shadow(0 0 44px rgba(31, 127, 184, 0.78)) saturate(1.2) brightness(1.08);
}
.fx-sheet-dino-world {
  filter: none;
}
.fx-sheet-dino-trihorn {
  filter: drop-shadow(0 0 24px rgba(255, 242, 192, 0.92)) drop-shadow(0 0 40px rgba(201, 180, 138, 0.72)) saturate(1.14) brightness(1.08);
}
.fx-sheet-dino-pack {
  filter: drop-shadow(0 0 22px rgba(216, 194, 122, 0.92)) drop-shadow(0 0 36px rgba(138, 111, 58, 0.64)) saturate(1.16) brightness(1.08);
}
.fx-sheet-dino-stomp {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(220, 232, 240, 0.96)) drop-shadow(0 0 42px rgba(159, 196, 216, 0.72)) saturate(1.18) brightness(1.12);
}
.fx-sheet-dino-club {
  filter: drop-shadow(0 0 24px rgba(255, 242, 192, 0.92)) drop-shadow(0 0 40px rgba(169, 176, 122, 0.72)) saturate(1.14) brightness(1.08);
}
.fx-sheet-dino-riptide {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 22px rgba(191, 240, 255, 0.96)) drop-shadow(0 0 38px rgba(127, 208, 232, 0.72)) saturate(1.2) brightness(1.1);
}
.fx-sheet-dino-leviathan {
  z-index: 18;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 34px rgba(189, 238, 255, 1))
    drop-shadow(0 0 78px rgba(31, 111, 176, 0.92))
    saturate(1.34)
    contrast(1.08)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2500ms) steps(var(--fx-sheet-steps, 23), end) forwards,
    fx-sheet-dino-leviathan-presence var(--fx-sheet-duration, 2500ms) cubic-bezier(0.14, 0.74, 0.2, 1) forwards;
}
.fx-sheet-dino-scythe-lock {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(244, 224, 170, 0.96)) drop-shadow(0 0 48px rgba(95, 69, 32, 0.72)) saturate(1.22) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-pressure-maw {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgba(125, 240, 255, 0.96)) drop-shadow(0 0 56px rgba(11, 63, 109, 0.84)) saturate(1.24) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1760ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1760ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-titan-canopy-quake {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255, 220, 118, 0.96)) drop-shadow(0 0 58px rgba(91, 65, 24, 0.78)) saturate(1.22) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1780ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1780ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-venom-frill-nova {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 28px rgba(255, 76, 232, 0.94)) drop-shadow(0 0 54px rgba(255, 126, 31, 0.72)) saturate(1.3) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1740ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1740ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-domebreaker-meteor {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255, 201, 94, 0.96)) drop-shadow(0 0 58px rgba(106, 78, 38, 0.78)) saturate(1.18) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1800ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1800ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-jurassic-rend {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(255, 72, 45, 0.94)) drop-shadow(0 0 48px rgba(18, 9, 8, 0.86)) saturate(1.24) brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-dino-cinder-horn-rush {
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 30px rgba(255, 106, 31, 0.96)) drop-shadow(0 0 58px rgba(255, 209, 102, 0.72)) saturate(1.28) brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1660ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-dino-signature-presence var(--fx-sheet-duration, 1660ms) cubic-bezier(0.18, 0.76, 0.24, 1) forwards;
}
.fx-sheet-oathwyrm-signature {
  z-index: 16;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 26px rgba(255, 229, 128, 0.98))
    drop-shadow(0 0 54px rgba(255, 169, 36, 0.86))
    drop-shadow(0 0 78px rgba(114, 230, 255, 0.42))
    saturate(1.28)
    contrast(1.08)
    brightness(1.14);
}
.fx-sheet-vowring-rupture {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1760ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-impact-presence var(--fx-sheet-duration, 1760ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-oathbreaker-beam {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 2100ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 2100ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-ultra-rare {
  z-index: 18;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(245, 253, 255, 0.94))
    drop-shadow(0 0 48px rgba(142, 213, 240, 0.78))
    drop-shadow(0 0 68px rgba(23, 40, 95, 0.46))
    saturate(1.24)
    contrast(1.08)
    brightness(1.12);
}
.fx-sheet-ultra-line {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-runegate-crash {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(245, 253, 255, 0.96))
    drop-shadow(0 0 46px rgba(125, 240, 255, 0.86))
    drop-shadow(0 0 56px rgba(214, 163, 58, 0.48))
    saturate(1.28)
    contrast(1.1)
    brightness(1.14);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1960ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-runegate-crash-presence var(--fx-sheet-duration, 1960ms) cubic-bezier(0.14, 0.8, 0.18, 1) forwards;
}
.fx-sheet-mirrorice-lance {
  filter:
    drop-shadow(0 0 28px rgba(245, 253, 255, 0.98))
    drop-shadow(0 0 56px rgba(109, 226, 255, 0.9))
    drop-shadow(0 0 72px rgba(61, 110, 210, 0.58))
    saturate(1.34)
    contrast(1.12)
    brightness(1.16);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-mirrorice-lance-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-biome-ultra-signature {
  z-index: 17;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.64))
    drop-shadow(0 0 48px rgba(75, 214, 255, 0.5))
    saturate(1.26)
    contrast(1.06)
    brightness(1.1);
}
.fx-sheet-biome-ultra-line {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1740ms) steps(var(--fx-sheet-steps, 7), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 1740ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-biome-ultra-impact {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1900ms) steps(var(--fx-sheet-steps, 7), end) forwards,
    fx-sheet-realistic-impact-presence var(--fx-sheet-duration, 1900ms) cubic-bezier(0.16, 0.78, 0.22, 1) forwards;
}
.fx-sheet-listed-signature {
  z-index: 18;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.62))
    drop-shadow(0 0 46px rgba(125, 240, 255, 0.42))
    saturate(1.2)
    contrast(1.06)
    brightness(1.08);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 17), end) forwards,
    fx-sheet-listed-signature-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-listed-light {
  filter:
    drop-shadow(0 0 26px rgba(255, 245, 190, 0.96))
    drop-shadow(0 0 52px rgba(125, 240, 255, 0.58))
    saturate(1.22)
    contrast(1.06)
    brightness(1.14);
}
.fx-sheet-listed-flame {
  filter:
    drop-shadow(0 0 26px rgba(255, 98, 32, 0.96))
    drop-shadow(0 0 52px rgba(255, 209, 102, 0.74))
    drop-shadow(0 0 62px rgba(125, 240, 255, 0.3))
    saturate(1.28)
    contrast(1.08)
    brightness(1.12);
}
.fx-sheet-listed-water {
  filter:
    drop-shadow(0 0 24px rgba(125, 240, 255, 0.96))
    drop-shadow(0 0 48px rgba(31, 134, 200, 0.76))
    drop-shadow(0 0 56px rgba(255, 217, 120, 0.28))
    saturate(1.22)
    contrast(1.06)
    brightness(1.1);
}
.fx-sheet-listed-runic {
  filter:
    drop-shadow(0 0 26px rgba(125, 240, 255, 0.95))
    drop-shadow(0 0 50px rgba(141, 123, 255, 0.7))
    drop-shadow(0 0 42px rgba(255, 217, 120, 0.38))
    saturate(1.26)
    contrast(1.08)
    brightness(1.12);
}
.fx-sheet-listed-leaf {
  filter:
    drop-shadow(0 0 24px rgba(190, 255, 120, 0.84))
    drop-shadow(0 0 48px rgba(255, 232, 138, 0.5))
    saturate(1.18)
    contrast(1.06)
    brightness(1.08);
}
.fx-sheet-listed-stone,
.fx-sheet-listed-shadow {
  mix-blend-mode: normal;
}
.fx-sheet-listed-stone {
  filter:
    drop-shadow(0 0 22px rgba(255, 238, 184, 0.84))
    drop-shadow(0 0 38px rgba(70, 52, 34, 0.68))
    saturate(1.1)
    contrast(1.08)
    brightness(1.06);
}
.fx-sheet-listed-shadow {
  filter:
    drop-shadow(0 0 24px rgba(150, 76, 255, 0.88))
    drop-shadow(0 0 46px rgba(7, 5, 14, 0.9))
    saturate(1.22)
    contrast(1.08)
    brightness(1.05);
}
.fx-sheet-prestige-extra {
  z-index: 18;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 48px rgba(125, 240, 255, 0.58))
    drop-shadow(0 0 64px rgba(255, 217, 120, 0.32))
    saturate(1.24)
    contrast(1.06)
    brightness(1.12);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1800ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-prestige-extra-presence var(--fx-sheet-duration, 1800ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
.fx-sheet-prestige-extra.fx-sheet-prestige-line {
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1800ms) steps(var(--fx-sheet-steps, 11), end) forwards,
    fx-sheet-realistic-line-presence var(--fx-sheet-duration, 1800ms) cubic-bezier(0.14, 0.8, 0.2, 1) forwards;
}
.fx-sheet-prestige-third {
  z-index: 18;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.72))
    drop-shadow(0 0 46px rgba(125, 240, 255, 0.58))
    saturate(1.22)
    contrast(1.04)
    brightness(1.1);
  animation:
    fx-sheet-play var(--fx-sheet-duration, 1700ms) steps(var(--fx-sheet-steps, 5), end) forwards,
    fx-sheet-prestige-third-presence var(--fx-sheet-duration, 1700ms) cubic-bezier(0.16, 0.76, 0.22, 1) forwards;
}
@keyframes fx-sheet-prestige-extra-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.66) rotate(-2deg); }
  12% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.96) rotate(0deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
}
@keyframes fx-sheet-prestige-third-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.68) rotate(-3deg); }
  14% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.96) rotate(0deg); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(3deg); }
}
@keyframes fx-sheet-play {
  from { background-position: 0 0; }
  to { background-position: var(--fx-sheet-travel, 100%) 0; }
}
@keyframes fx-sheet-generic-impact-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.9); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes fx-sheet-generic-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.72) scaleY(0.86); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.9) scaleY(0.96); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.82); }
}
@keyframes fx-sheet-generic-travel-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) translateX(0) scale(0.82); }
  12% { opacity: 0.96; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-12, 40px)) scale(0.94); }
  52% { opacity: 1; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-56, 190px)) scale(1); }
  84% { opacity: 0.94; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-86, 290px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel, 340px)) scale(0.92); }
}
@keyframes fx-classic-sheet-preparing-spin {
  to { transform: rotate(360deg); }
}
@keyframes fx-sheet-listed-signature-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.68) rotate(-2deg); }
  12% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.96) rotate(0deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16) rotate(2deg); }
}
@keyframes capture-prism-sheet-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62) rotate(-8deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.95) rotate(0deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86) rotate(3deg); }
}
@keyframes capture-vortex-sheet-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58) rotate(-10deg); }
  16% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.92) rotate(0deg); }
  74% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(8deg); }
}
@keyframes capture-pulse-sheet-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62); }
  12% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.95); }
  72% { opacity: 0.88; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes fx-sheet-realistic-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.58) scaleY(0.72); }
  10% { opacity: 0.88; transform: translate(-50%, -50%) scaleX(0.82) scaleY(0.9); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.02); }
  78% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(1.06) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.78); }
}
@keyframes fx-sheet-coal-tail-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.5) scaleY(0.62) rotate(-1deg); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.86) scaleY(0.9) rotate(0deg); }
  46% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.02) rotate(1deg); }
  76% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.96) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.72) rotate(1deg); }
}
@keyframes fx-sheet-mirrorice-lance-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.42) scaleY(0.58); }
  8% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.86); }
  28% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1); }
  52% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.16); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.14) scaleY(0.72); }
}
@keyframes fx-sheet-runegate-crash-presence {
  0% { opacity: 0; transform: translate(-50%, -60%) scale(0.7); }
  10% { opacity: 0.94; transform: translate(-50%, -57%) scale(0.92); }
  34% { opacity: 1; transform: translate(-50%, -53%) scale(1.06); }
  56% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  78% { opacity: 0.96; transform: translate(-50%, -49%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
}
@keyframes fx-sheet-granite-roll-travel-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) translateX(0) scale(0.86); }
  10% { opacity: 0.96; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-12, 43px)) scale(0.96); }
  48% { opacity: 1; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-56, 202px)) scale(1); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel-86, 310px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(var(--fx-projectile-travel, 360px)) scale(0.92); }
}
@keyframes fx-sheet-tide-crash-epic-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.72) scaleY(0.7); }
  8% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.92) scaleY(0.9); }
  36% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.08); }
  62% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.02); }
  82% { opacity: 0.9; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.76); }
}
@keyframes fx-sheet-void-rend-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.62) rotate(-3deg); }
  12% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.9) rotate(-1deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
  72% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.02) rotate(1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86) rotate(2deg); }
}
@keyframes fx-sheet-current-dash-epic-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.38) scaleY(0.46); }
  8% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(0.7) scaleY(0.58); }
  32% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.05) scaleY(0.68); }
  58% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.62); }
  82% { opacity: 0.7; transform: translate(-50%, -50%) scaleX(1.15) scaleY(0.52); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.18) scaleY(0.38); }
}
@keyframes fx-sheet-aethervane-firstdraft-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.45) scaleY(0.58); }
  9% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(0.72) scaleY(0.76); }
  34% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  58% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.94); }
  82% { opacity: 0.86; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.78); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.54); }
}
@keyframes fx-sheet-aethervane-feather-vanish-presence {
  0% { opacity: 0.72; transform: translate(-50%, calc(-50% + 10px)) scale(0.82); }
  14% { opacity: 0.96; transform: translate(-50%, calc(-50% + 5px)) scale(0.92); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1.02); }
  78% { opacity: 0.94; transform: translate(-50%, calc(-50% - 9px)) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(1.06); }
}
@keyframes fx-sheet-lochness-bubble-vanish-presence {
  0% { opacity: 0.76; transform: translate(-50%, calc(-50% + 10px)) scale(0.82); }
  16% { opacity: 0.96; transform: translate(-50%, calc(-50% + 6px)) scale(0.92); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  78% { opacity: 0.92; transform: translate(-50%, calc(-50% - 8px)) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 16px)) scale(1.04); }
}
@keyframes aethervane-feather-body-fade-reduced {
  to { opacity: 0; }
}
@keyframes lochness-bubble-body-fade-reduced {
  to { opacity: 0; }
}
@keyframes fx-sheet-aethervane-feather-vanish-reduced-presence {
  0% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.96); }
  18%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes fx-sheet-lochness-bubble-vanish-reduced-presence {
  0% { opacity: 0.76; transform: translate(-50%, -50%) scale(0.96); }
  18%, 78% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
  .combatant.enemy.aethervane-feather-escape .sprite-flip,
  .combatant.enemy.aethervane-feather-escape .sprite-flip.battle-anim {
    animation: aethervane-feather-body-fade-reduced 900ms ease-out forwards;
  }
  .fx-sheet-aethervane-feather-vanish {
    animation:
      fx-sheet-play var(--fx-sheet-duration, 1840ms) steps(var(--fx-sheet-steps, 11), end) forwards,
      fx-sheet-aethervane-feather-vanish-reduced-presence var(--fx-sheet-duration, 1840ms) ease-out forwards;
  }
  .combatant.enemy.lochness-bubble-escape .sprite-flip,
  .combatant.enemy.lochness-bubble-escape .sprite-flip.battle-anim {
    animation: lochness-bubble-body-fade-reduced 900ms ease-out forwards;
  }
  .fx-sheet-lochness-bubble-vanish {
    animation:
      fx-sheet-play var(--fx-sheet-duration, 1880ms) steps(var(--fx-sheet-steps, 11), end) forwards,
      fx-sheet-lochness-bubble-vanish-reduced-presence var(--fx-sheet-duration, 1880ms) ease-out forwards;
  }
}
@keyframes fx-sheet-aethervane-slipstream-rise-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.66); }
  10% { opacity: 0.9; transform: translate(-50%, calc(-50% + 10px)) scale(0.8); }
  34% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(0.98); }
  62% { opacity: 1; transform: translate(-50%, calc(-50% - 5px)) scale(1.04); }
  84% { opacity: 0.82; transform: translate(-50%, calc(-50% - 9px)) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 12px)) scale(0.82); }
}
@keyframes fx-sheet-aethervane-gale-lance-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.5) scaleY(0.62); }
  8% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.82); }
  36% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.05) scaleY(1.04); }
  62% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.1) scaleY(1); }
  84% { opacity: 0.86; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.14) scaleY(0.58); }
}
@keyframes fx-sheet-aethervane-ultimate-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 22px)) scale(0.62); }
  10% { opacity: 0.9; transform: translate(-50%, calc(-50% + 12px)) scale(0.82); }
  36% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(1.02); }
  64% { opacity: 1; transform: translate(-50%, calc(-50% - 6px)) scale(1.08); }
  84% { opacity: 0.92; transform: translate(-50%, calc(-50% - 10px)) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 14px)) scale(0.84); }
}
@keyframes fx-sheet-tectonic-charge-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.42) scaleY(0.72); }
  9% { opacity: 0.86; transform: translate(-50%, -50%) scaleX(0.74) scaleY(0.88); }
  34% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1.04); }
  62% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.02); }
  84% { opacity: 0.82; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.18) scaleY(0.72); }
}
@keyframes fx-sheet-realistic-impact-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 26px)) scale(0.42); }
  14% { opacity: 0.9; transform: translate(-50%, calc(-50% + 14px)) scale(0.72); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(1.06); }
  80% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.86); }
}
@keyframes fx-sheet-nudge-vertical-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scaleX(0.78) scaleY(0.62); }
  18% { opacity: 0.9; transform: translate(-50%, calc(-50% + 8px)) scaleX(0.92) scaleY(0.86); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scaleX(1.04) scaleY(1.06); }
  74% { opacity: 0.9; transform: translate(-50%, calc(-50% + 2px)) scaleX(0.98) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scaleX(0.86) scaleY(0.78); }
}
@keyframes fx-sheet-quick-jab-vertical-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 30px)) scaleX(0.72) scaleY(0.7); }
  10% { opacity: 0.96; transform: translate(-50%, calc(-50% - 16px)) scaleX(0.86) scaleY(0.9); }
  34% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scaleX(1) scaleY(1.08); }
  64% { opacity: 0.96; transform: translate(-50%, calc(-50% + 4px)) scaleX(0.94) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scaleX(0.78) scaleY(0.72); }
}
@keyframes fx-sheet-rune-fault-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 34px)) scale(0.46); }
  12% { opacity: 0.94; transform: translate(-50%, calc(-50% + 24px)) scale(0.82); }
  38% { opacity: 1; transform: translate(-50%, calc(-50% + 10px)) scale(1.08); }
  58% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(1.18); }
  82% { opacity: 0.94; transform: translate(-50%, calc(-50% + 12px)) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 24px)) scale(0.86); }
}
@keyframes fx-sheet-venom-jab-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 28px)) scale(0.72); }
  12% { opacity: 0.78; transform: translate(-50%, calc(-50% - 18px)) scale(0.88); }
  38% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1.02); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  82% { opacity: 0.82; transform: translate(-50%, calc(-50% + 2px)) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.84); }
}
@keyframes fx-sheet-trade-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.44) rotate(-2deg); }
  12% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.72) rotate(1deg); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.12) rotate(1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22) rotate(0deg); }
}
@keyframes fx-sheet-trade-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.56) scaleY(0.62); }
  10% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(0.84) scaleY(0.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.05) scaleY(1.02); }
  80% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.16) scaleY(1.04); }
}
@keyframes fx-sheet-voidscale-rend-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.52) scaleY(0.58); }
  10% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.82) scaleY(0.82); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.02); }
  72% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.82); }
}
@keyframes fx-sheet-crab-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.46) rotate(-2deg); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.78) rotate(1deg); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  78% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.13) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
}
@keyframes fx-sheet-crab-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.5) scaleY(0.56); }
  10% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.84) scaleY(0.82); }
  42% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06) scaleY(1.04); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.2) scaleY(1.02); }
}
@keyframes fx-sheet-crab-buff-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.54) rotate(-4deg); }
  14% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.8) rotate(2deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
  78% { opacity: 0.88; transform: translate(-50%, -50%) scale(1.02) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
}
@keyframes fx-sheet-second-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  14% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.82); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.16); }
}
@keyframes fx-sheet-comet-roar-epic-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.5) scaleY(0.62); }
  9% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.82) scaleY(0.86); }
  40% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06) scaleY(1.08); }
  72% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.1) scaleY(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.22) scaleY(0.94); }
}
@keyframes fx-sheet-thunder-crown-epic-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 34px)) scale(0.42); }
  13% { opacity: 0.9; transform: translate(-50%, calc(-50% + 18px)) scale(0.68); }
  35% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(1.04); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.94); }
}
@keyframes fx-sheet-ember-snap-presence {
  0% { opacity: 0; transform: translate(-50%, -82%) scale(0.58); }
  12% { opacity: 0.92; transform: translate(-50%, -76%) scale(0.72); }
  42% { opacity: 1; transform: translate(-50%, -69%) scale(0.96); }
  64% { opacity: 1; transform: translate(-50%, -66%) scale(1.1); }
  82% { opacity: 0.96; transform: translate(-50%, -66%) scale(1.14); }
  100% { opacity: 0; transform: translate(-50%, -66%) scale(1.02); }
}
@keyframes fx-sheet-quake-horn-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.46) scaleY(0.72); }
  10% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.9); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.03) scaleY(1.02); }
  70% { opacity: 0.98; transform: translate(-50%, -50%) scaleX(1.05) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.86); }
}
@keyframes fx-sheet-aurora-bark-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.36); }
  12% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.64); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  68% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.26); }
}
@keyframes fx-sheet-eclipse-maul-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.52); }
  14% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.84); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes fx-sheet-eclipsora-moon-silk-requiem-presence {
  0% { opacity: 0; transform: translate(-50%, -48%) scale(0.72); }
  8% { opacity: 0.76; transform: translate(-50%, -49%) scale(0.88); }
  34% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.98); }
  56% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  72% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.03); }
  90% { opacity: 0.62; transform: translate(-50%, -49%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -48%) scale(1.08); }
}
@keyframes fx-sheet-shade-nibble-imagegen-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.46) rotate(-5deg); }
  16% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.8) rotate(-2deg); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
  70% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.02) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.74) rotate(4deg); }
}
@keyframes fx-sheet-crunch-hex-imagegen-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.44) rotate(-6deg); }
  15% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.78) rotate(-2deg); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(1deg); }
  68% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.04) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(5deg); }
}
@keyframes fx-sheet-starter-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(-3deg); }
  12% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.74) rotate(0deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  76% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.02) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(4deg); }
}
@keyframes fx-sheet-riptalon-sailstorm-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 34px)) scale(0.42); }
  14% { opacity: 0.96; transform: translate(-50%, calc(-50% + 12px)) scale(0.78); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  76% { opacity: 0.98; transform: translate(-50%, calc(-50% - 6px)) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 16px)) scale(1.2); }
}
@keyframes fx-sheet-riptalon-beam-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.55) scaleY(0.72); }
  12% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.86) scaleY(0.9); }
  46% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.08); }
  78% { opacity: 0.98; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.06) scaleY(0.82); }
}
@keyframes fx-sheet-riptalon-crownfall-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 22px)) scale(0.38) rotate(-8deg); }
  15% { opacity: 0.95; transform: translate(-50%, calc(-50% - 10px)) scale(0.78) rotate(-2deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  78% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.04) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22) rotate(7deg); }
}
@keyframes fx-sheet-dino-signature-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scale(0.42); }
  14% { opacity: 0.95; transform: translate(-50%, calc(-50% + 8px)) scale(0.78); }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  76% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 8px)) scale(1.2); }
}
@keyframes fx-sheet-dino-leviathan-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 72px), calc(-50% + 58px)) scale(0.62); }
  12% { opacity: 0.94; transform: translate(calc(-50% - 38px), calc(-50% + 32px)) scale(0.82); }
  34% { opacity: 1; transform: translate(calc(-50% - 10px), calc(-50% + 6px)) scale(1.04); }
  56% { opacity: 1; transform: translate(-50%, calc(-50% - 6px)) scale(1.16); }
  76% { opacity: 0.98; transform: translate(calc(-50% + 18px), calc(-50% - 14px)) scale(1.1); }
  100% { opacity: 0; transform: translate(calc(-50% + 42px), calc(-50% - 22px)) scale(0.84); }
}
@keyframes fx-sheet-dino-apexdevour-presence {
  0% { opacity: 0; transform: translate(calc(-50% + 98px), calc(-50% - 84px)) scale(0.48) rotate(4deg); }
  12% { opacity: 0.94; transform: translate(calc(-50% + 66px), calc(-50% - 58px)) scale(0.72) rotate(2deg); }
  32% { opacity: 1; transform: translate(calc(-50% + 22px), calc(-50% - 18px)) scale(1.02) rotate(0deg); }
  54% { opacity: 1; transform: translate(-50%, -50%) scale(1.22) rotate(-1deg); }
  68% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.16) rotate(1deg); }
  84% { opacity: 0.82; transform: translate(calc(-50% - 10px), calc(-50% + 6px)) scale(0.98) rotate(2deg); }
  100% { opacity: 0; transform: translate(calc(-50% - 20px), calc(-50% + 14px)) scale(0.78) rotate(4deg); }
}
@keyframes fx-sheet-erholung-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(0.58); }
  12% { opacity: 0.96; transform: translate(-50%, calc(-50% + 10px)) scale(0.82); }
  56% { opacity: 1; transform: translate(-50%, calc(-50% - 4px)) scale(1.08); }
  78% { opacity: 0.98; transform: translate(-50%, calc(-50% - 10px)) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 24px)) scale(0.8); }
}
@keyframes fx-sheet-hypnose-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.48) rotate(-10deg); }
  18% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.82) rotate(-4deg); }
  54% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(5deg); }
  82% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.02) rotate(10deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(18deg); }
}
@keyframes fx-sheet-status-imagegen-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(0.5); }
  16% { opacity: 0.94; transform: translate(-50%, calc(-50% + 8px)) scale(0.82); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  78% { opacity: 0.94; transform: translate(-50%, calc(-50% - 8px)) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(0.82); }
}
@keyframes fx-sheet-mid-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.54); }
  16% { opacity: 0.92; transform: translate(-50%, -50%) scale(0.84); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  78% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.02); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes fx-sheet-mid-vertical-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scaleY(0.58) scaleX(0.82); }
  14% { opacity: 0.94; transform: translate(-50%, calc(-50% - 8px)) scaleY(0.9) scaleX(0.96); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.08) scaleX(1.04); }
  78% { opacity: 0.95; transform: translate(-50%, calc(-50% + 4px)) scaleY(1) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scaleY(0.72) scaleX(0.92); }
}
@keyframes fx-sheet-affinity-hyperbeam-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(0.58); }
  14% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(1) scaleY(0.88); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleX(1) scaleY(1.06); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1) scaleY(0.72); }
}
@keyframes fx-sheet-affinity-eldergrove-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 30px)) scale(0.38); }
  18% { opacity: 0.94; transform: translate(-50%, calc(-50% + 18px)) scale(0.82); }
  52% { opacity: 1; transform: translate(-50%, calc(-50% + 4px)) scale(1.1); }
  82% { opacity: 0.94; transform: translate(-50%, calc(-50% - 2px)) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.74); }
}
@keyframes fx-sheet-line-grove-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.96) scaleY(0.78); }
  10% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(1) scaleY(0.92); }
  68% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1); }
  86% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.86); }
}
@keyframes fx-sheet-sylvan-sovereign-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.86) scaleY(0.72); }
  10% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.98) scaleY(0.9); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.08); }
  72% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.06) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.82); }
}
@keyframes fx-sheet-leaf-flick-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.55) scaleY(0.72); }
  12% { opacity: 0.9; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.86); }
  46% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1); }
  72% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.78); }
}
@keyframes fx-sheet-spark-pounce-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.42) scaleY(0.58); }
  10% { opacity: 0.94; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.82); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1.02); }
  72% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.74); }
}
@keyframes fx-sheet-static-purr-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 18px)) scaleY(0.62) scaleX(0.78); }
  14% { opacity: 0.9; transform: translate(-50%, calc(-50% + 6px)) scaleY(0.86) scaleX(0.9); }
  46% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.08) scaleX(1.02); }
  72% { opacity: 0.96; transform: translate(-50%, calc(-50% - 2px)) scaleY(1.02) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 8px)) scaleY(0.76) scaleX(0.9); }
}
@keyframes fx-sheet-storm-needle-line-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.46) scaleY(0.52); }
  10% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(0.8) scaleY(0.72); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.9); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.72); }
}
@keyframes fx-sheet-bastimaw-roll-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.62) scaleY(0.66); }
  10% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.86) scaleY(0.84); }
  54% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.04) scaleY(1); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.74); }
}
@keyframes fx-sheet-bastimaw-fist-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.48) scaleY(0.58); }
  8% { opacity: 0.98; transform: translate(-50%, -50%) scaleX(0.72) scaleY(0.72); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(0.9); }
  68% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.02); }
  86% { opacity: 0.92; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.86); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) scaleY(0.58); }
}
@keyframes fx-sheet-bastimaw-crush-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 26px)) scale(0.5); }
  14% { opacity: 0.92; transform: translate(-50%, calc(-50% + 14px)) scale(0.76); }
  50% { opacity: 1; transform: translate(-50%, calc(-50% + 2px)) scale(1.04); }
  82% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 8px)) scale(0.78); }
}
@keyframes fx-sheet-affinity-tectonic-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 42px)) scaleX(0.5) scaleY(0.42); }
  18% { opacity: 0.94; transform: translate(-50%, calc(-50% + 32px)) scaleX(0.84) scaleY(0.82); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% + 22px)) scaleX(1.18) scaleY(1.06); }
  78% { opacity: 0.96; transform: translate(-50%, calc(-50% + 18px)) scaleX(1.08) scaleY(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scaleX(1.2) scaleY(0.62); }
}
@keyframes fx-sheet-affinity-blizzard-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(-8deg); }
  20% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.86) rotate(-3deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(2deg); }
  80% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.08) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(7deg); }
}
@keyframes fx-sheet-affinity-swarm-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(-18deg); }
  20% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.82) rotate(-6deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
  82% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.04) rotate(14deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.68) rotate(24deg); }
}
@keyframes fx-sheet-affinity-rift-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.46) rotate(-6deg); }
  18% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.84) rotate(-3deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(2deg); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.04) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(7deg); }
}
@keyframes fx-sheet-astral-rift-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.36) rotate(-14deg); }
  12% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.88) rotate(-7deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.1) rotate(7deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.78) rotate(14deg); }
}
@keyframes fx-sheet-starfall-deluge-presence {
  0% { opacity: 0; transform: translate(-50%, -47%) scale(0.72); }
  8% { opacity: 0.74; transform: translate(-50%, -49%) scale(0.9); }
  26% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.98); }
  54% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.06); }
  72% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.03); }
  90% { opacity: 0.68; transform: translate(-50%, -49%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -48%) scale(1.12); }
}
@keyframes fx-sheet-affinity-nova-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 18px)) scale(0.62); }
  14% { opacity: 0.96; transform: translate(-50%, calc(-50% - 10px)) scale(0.86); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  78% { opacity: 0.98; transform: translate(-50%, calc(-50% + 4px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 14px)) scale(0.9); }
}
@keyframes fx-sheet-affinity-abyss-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.48) scaleY(0.68); }
  8% { opacity: 0.9; transform: translate(-50%, -50%) scaleX(0.78) scaleY(0.88); }
  28% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1); }
  54% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.08); }
  76% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.16) scaleY(0.72); }
}
@keyframes fx-sheet-affinity-rune-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.42) scaleY(0.78); }
  12% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(0.74) scaleY(0.92); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.02) scaleY(1.02); }
  74% { opacity: 0.98; transform: translate(-50%, -50%) scaleX(1.04) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.1) scaleY(0.82); }
}
@keyframes fx-sheet-glyph-gale-line-presence {
  0% { opacity: 0; transform: translateY(4px) scaleX(0.78) scaleY(0.92); }
  12% { opacity: 0.94; }
  66% { opacity: 1; transform: translateY(0) scaleX(1.04) scaleY(1); }
  100% { opacity: 0; transform: translateY(-3px) scaleX(1.08) scaleY(0.96); }
}
@keyframes fx-sheet-runic-featherfall-presence {
  0% { opacity: 0; transform: translateY(-18px) scale(0.9); }
  14% { opacity: 0.95; }
  66% { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 0; transform: translateY(18px) scale(0.98); }
}
@keyframes fx-sheet-cinder-eruption-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 56px)) scale(0.42); }
  18% { opacity: 0.94; transform: translate(-50%, calc(-50% + 24px)) scale(0.86); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% - 18px)) scale(1.18); }
  78% { opacity: 0.96; transform: translate(-50%, calc(-50% - 34px)) scale(1.22); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 54px)) scale(0.9); }
}
@keyframes fx-sheet-cinder-meteor-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.84); }
  12% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.94); }
  44% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes fx-sheet-cinder-lash-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 64px), calc(-50% + 18px)) scale(0.48) rotate(-34deg); }
  20% { opacity: 0.94; transform: translate(calc(-50% - 24px), calc(-50% + 4px)) scale(0.9) rotate(-16deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(8deg); }
  76% { opacity: 0.94; transform: translate(calc(-50% + 42px), calc(-50% - 12px)) scale(1.08) rotate(26deg); }
  100% { opacity: 0; transform: translate(calc(-50% + 70px), calc(-50% - 22px)) scale(0.76) rotate(42deg); }
}
@keyframes fx-sheet-cinder-infernal-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.74); }
  14% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.88); }
  38% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
}
@keyframes fx-sheet-phoenix-line-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 72px), calc(-50% + 10px)) scale(0.56) rotate(-8deg); }
  16% { opacity: 0.96; transform: translate(calc(-50% - 30px), calc(-50% + 4px)) scale(0.86) rotate(-4deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
  78% { opacity: 0.96; transform: translate(calc(-50% + 42px), calc(-50% - 8px)) scale(1.04) rotate(7deg); }
  100% { opacity: 0; transform: translate(calc(-50% + 82px), calc(-50% - 14px)) scale(0.72) rotate(10deg); }
}
@keyframes fx-sheet-phoenix-bloom-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.44); }
  16% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.78); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
}
@keyframes fx-sheet-phoenix-rebirth-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.38) rotate(-20deg); }
  18% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.82) rotate(-8deg); }
  46% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(6deg); }
  74% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.16) rotate(14deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.92) rotate(22deg); }
}
@keyframes fx-sheet-phoenix-solar-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.28) rotate(-80deg); }
  14% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.72) rotate(-28deg); }
  44% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(80deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.32) rotate(180deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.86) rotate(280deg); }
}
@keyframes fx-sheet-tempestide-maelstrom-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
  18% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.88); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.16); }
  80% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}
@keyframes fx-sheet-tempestide-stormfall-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.52) scaleY(0.64); }
  18% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(0.84) scaleY(0.98); }
  48% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.18); }
  76% { opacity: 0.96; transform: translate(-50%, -50%) scaleX(1) scaleY(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.18) scaleY(0.72); }
}
@keyframes fx-sheet-tempestide-tsunami-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 84px), calc(-50% + 46px)) scale(0.48); }
  20% { opacity: 0.94; transform: translate(calc(-50% - 42px), calc(-50% + 18px)) scale(0.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.2) scaleY(1.08); }
  78% { opacity: 0.96; transform: translate(calc(-50% + 36px), calc(-50% - 8px)) scaleX(1.28) scaleY(1); }
  100% { opacity: 0; transform: translate(calc(-50% + 72px), calc(-50% - 20px)) scale(0.86); }
}
@keyframes fx-sheet-tempestide-riptide-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.44); }
  20% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  80% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.76); }
}
@keyframes fx-sheet-maelstrom-vault-presence {
  0% { opacity: 0; transform: translate(-50%, -100%) scaleX(0.46) scaleY(0.22); }
  12% { opacity: 0.92; transform: translate(-50%, -100%) scaleX(0.72) scaleY(0.72); }
  34% { opacity: 1; transform: translate(-50%, -100%) scaleX(0.96) scaleY(1.08); }
  58% { opacity: 1; transform: translate(-50%, -100%) scaleX(1.14) scaleY(1.14); }
  82% { opacity: 0.94; transform: translate(-50%, -100%) scaleX(1.02) scaleY(0.98); }
  100% { opacity: 0; transform: translate(-50%, -100%) scaleX(0.82) scaleY(0.66); }
}
@keyframes fx-sheet-aeon-hypnos-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.26) rotate(-180deg); }
  20% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.82) rotate(-50deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(120deg); }
  82% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.04) rotate(260deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.54) rotate(420deg); }
}
@keyframes fx-sheet-aeon-glaciate-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.32) rotate(-10deg); }
  20% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.86) rotate(-3deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(2deg); }
  78% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.2) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72) rotate(8deg); }
}
@keyframes fx-sheet-aeon-ascend-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 76px)) scaleX(0.36) scaleY(0.38); }
  16% { opacity: 0.96; transform: translate(-50%, calc(-50% + 28px)) scaleX(0.78) scaleY(0.92); }
  48% { opacity: 1; transform: translate(-50%, calc(-50% - 18px)) scaleX(1.08) scaleY(1.22); }
  76% { opacity: 0.98; transform: translate(-50%, calc(-50% - 38px)) scaleX(1.16) scaleY(1.08); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 72px)) scaleX(0.78) scaleY(0.66); }
}
@keyframes fx-sheet-aeon-tempest-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(-28deg); }
  8% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.9) rotate(-8deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(8deg); }
  78% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08) rotate(18deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(34deg); }
}
@keyframes fx-sheet-prismarch-storm-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 58px)) scaleX(0.42) scaleY(0.62); }
  16% { opacity: 0.94; transform: translate(-50%, calc(-50% - 28px)) scaleX(0.78) scaleY(1); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.12) scaleY(1.2); }
  74% { opacity: 0.96; transform: translate(-50%, calc(-50% + 10px)) scaleX(0.96) scaleY(1.08); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 28px)) scaleX(1.26) scaleY(0.62); }
}
@keyframes fx-sheet-prismarch-disco-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.34) rotate(-90deg); }
  18% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.84) rotate(-25deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(110deg); }
  82% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.04) rotate(240deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) rotate(320deg); }
}
@keyframes fx-sheet-prismarch-pyre-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 54px)) scale(0.42); }
  20% { opacity: 0.94; transform: translate(-50%, calc(-50% + 28px)) scale(0.86); }
  52% { opacity: 1; transform: translate(-50%, calc(-50% - 14px)) scale(1.15); }
  80% { opacity: 0.96; transform: translate(-50%, calc(-50% - 30px)) scale(1.22); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 54px)) scale(0.88); }
}
@keyframes fx-sheet-prismarch-freeze-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-10deg); }
  24% { opacity: 0.94; transform: translate(-50%, -50%) scale(0.9) rotate(-3deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(2deg); }
  72% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.18) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(6deg); }
}
@keyframes fx-sheet-nightfall-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 96px), calc(-50% - 34px)) scale(0.38) rotate(-24deg); }
  18% { opacity: 1; transform: translate(calc(-50% - 48px), calc(-50% - 16px)) scale(0.88) rotate(-10deg); }
  42% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(4deg); }
  70% { opacity: 0.94; transform: translate(calc(-50% + 54px), calc(-50% + 18px)) scale(1.22) rotate(18deg); }
  100% { opacity: 0; transform: translate(calc(-50% + 86px), calc(-50% + 28px)) scale(0.82) rotate(28deg); }
}
@keyframes fx-sheet-dreadbeam-presence {
  0% { opacity: 0; transform: translate(-50%, calc(-50% - 44px)) scaleX(0.34) scaleY(0.55); }
  16% { opacity: 0.96; transform: translate(-50%, calc(-50% - 18px)) scaleX(0.7) scaleY(0.92); }
  44% { opacity: 1; transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.22); }
  70% { opacity: 0.96; transform: translate(-50%, calc(-50% + 12px)) scaleX(0.88) scaleY(1.06); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 34px)) scaleX(1.26) scaleY(0.62); }
}
@keyframes fx-sheet-wing-presence {
  0% { opacity: 0; transform: translate(calc(-50% - 62px), calc(-50% + 28px)) scale(0.48) rotate(-38deg); }
  20% { opacity: 0.95; transform: translate(calc(-50% - 22px), calc(-50% + 8px)) scale(0.92) rotate(-18deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(8deg); }
  76% { opacity: 0.92; transform: translate(calc(-50% + 46px), calc(-50% - 16px)) scale(1.06) rotate(28deg); }
  100% { opacity: 0; transform: translate(calc(-50% + 78px), calc(-50% - 26px)) scale(0.76) rotate(42deg); }
}
@keyframes fx-sheet-blackhole-presence {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24) rotate(-140deg); }
  18% { opacity: 0.98; transform: translate(-50%, -50%) scale(0.78) rotate(-30deg); }
  48% { opacity: 1; transform: translate(-50%, -50%) scale(1.16) rotate(145deg); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(0.58) rotate(290deg); }
  82% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.32) rotate(440deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.18) rotate(620deg); }
}
.fx-void-shard {
  width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 55%, transparent 78%) !important;
  filter: drop-shadow(0 0 7px currentColor);
  animation: projectile-move 560ms cubic-bezier(0.55, 0, 0.85, 0.35) forwards;
}
.fx-blackhole-core {
  width: 16px; height: 16px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none; z-index: 6;
  animation: blackhole-core 1500ms cubic-bezier(0.4, 0, 0.5, 1) forwards;
}
@keyframes blackhole-core {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(2.4) rotate(120deg); }
  46%  { opacity: 1; transform: translate(-50%, -50%) scale(3) rotate(420deg); }
  64%  { opacity: 1; transform: translate(-50%, -50%) scale(0.5) rotate(820deg); }
  74%  { opacity: 1; transform: translate(-50%, -50%) scale(7) rotate(900deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(1000deg); }
}
.fx-layer.fx-blackhole::before {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    rgba(0, 0, 0, 0.62) 0%, rgba(26, 15, 46, 0.5) 30%, rgba(122, 63, 176, 0.26) 52%, transparent 76%);
  mix-blend-mode: multiply;
  animation: blackhole-dim 1500ms cubic-bezier(0.4, 0, 0.5, 1) forwards;
}
@keyframes blackhole-dim {
  0% { opacity: 0; transform: scale(0.4); }
  26% { opacity: 1; }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ===== THE AEON — four ultimate full-stage techniques ===================== */
/* HYPNOS — a hypnotic violet vortex swallows the whole field. */
.fx-layer.fx-voidlull::before {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(123, 100, 217, 0.05), rgba(185, 166, 255, 0.34), rgba(42, 34, 56, 0.42),
    rgba(185, 166, 255, 0.34), rgba(123, 100, 217, 0.05));
  mix-blend-mode: screen;
  animation: aeon-vortex 1500ms cubic-bezier(0.3, 0.6, 0.2, 1) forwards;
}
@keyframes aeon-vortex {
  0% { opacity: 0; transform: rotate(0deg) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(520deg) scale(1.4); }
}
/* GLACIATE — the screen flash-freezes white-blue. */
.fx-layer.fx-absolutezero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 62% 42%, rgba(223, 250, 255, 0.55), rgba(95, 159, 224, 0.30) 50%, rgba(20, 30, 60, 0.12) 80%);
  animation: aeon-freeze 1500ms ease-out forwards;
}
@keyframes aeon-freeze {
  0% { opacity: 0; }
  18% { opacity: 1; }
  60% { opacity: 0.9; }
  100% { opacity: 0; }
}
/* ASCEND — towering radiant pillars rise across the field. */
.fx-aeon-pillar {
  position: absolute; bottom: -10%; width: 9%; height: 130%;
  opacity: 0; mix-blend-mode: screen;
  filter: blur(2px) drop-shadow(0 0 22px #ffe9a8);
  animation: aeon-pillar 1500ms cubic-bezier(0.25, 0.7, 0.2, 1) forwards;
}
@keyframes aeon-pillar {
  0% { opacity: 0; transform: translateY(60%) scaleY(0.2); }
  28% { opacity: 1; transform: translateY(0) scaleY(1); }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-20%) scaleY(1.1); }
}
.fx-layer.fx-ascension::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 233, 168, 0.40), rgba(255, 247, 214, 0.14) 55%, transparent 82%);
  animation: water-wash 1500ms ease-out forwards;
}
/* TEMPEST — a blinding speed-storm sweeps the stage. */
.fx-layer.fx-tempest::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(95, 208, 255, 0.30) 45%, rgba(159, 255, 224, 0.34) 55%, transparent 100%);
  animation: aeon-sweep 1500ms ease-in-out forwards;
}
.fx-layer.fx-hyperbeam::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(23,104,255,0.24) 36%, rgba(255,255,255,0.58) 50%, rgba(142,232,255,0.34) 64%, transparent 100%);
  mix-blend-mode: screen;
  animation: hyperbeam-blast 1500ms cubic-bezier(0.2,0.7,0.25,1) forwards;
}
@keyframes hyperbeam-blast {
  0% { opacity: 0; transform: scaleX(0.15) scaleY(0.6); }
  20% { opacity: 1; transform: scaleX(1.15) scaleY(1); }
  60% { opacity: 0.92; }
  100% { opacity: 0; transform: scaleX(1.35) scaleY(1.05); }
}
@keyframes aeon-sweep {
  0% { opacity: 0; transform: translateX(-60%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-aeon-pillar { animation-duration: 1ms; }
  .fx-layer.fx-voidlull::before,
  .fx-layer.fx-absolutezero::before,
  .fx-layer.fx-ascension::before,
  .fx-layer.fx-tempest::before,
  .fx-layer.fx-hyperbeam::before { animation: none; opacity: 0; }
  .fx-vortex, .fx-droplet, .fx-foam { animation-duration: 1ms; }
  .fx-layer.fx-tsunami::before,
  .fx-layer.fx-maelstrom::before,
  .fx-layer.fx-surge::before,
  .fx-layer.fx-torrent::before { animation: none; opacity: 0; }
  .combatant.morphing img { animation: none; }
  .fx-bolt, .fx-bolt-head, .fx-thunderground, .fx-disco-ball, .fx-disco-tile, .fx-firewall, .fx-ice-pane { animation-duration: 1ms; }
  .fx-layer.fx-storm-charge::after { animation: none; opacity: 0; }
  .fx-morph-column { animation: none; opacity: 0; }
  .fx-bigwave { animation: none; opacity: 0; }
  .fx-void-shard, .fx-blackhole-core { animation-duration: 1ms; }
  .fx-layer.fx-blackhole::before { animation: none; opacity: 0; }
  .combatant.voidbound .sprite-flip::before,
  .combatant.voidbound .sprite-flip::after { animation: none; }
  .combatant.voidbound .sprite-flip img { animation: none; opacity: 0; }
  .combatant.void-release .sprite-flip img { animation: none; opacity: 1; }
  .combatant.void-release .sprite-flip::after { animation: none; opacity: 0; }
  .combatant.frozen .sprite-flip::after { animation: none; }
  .combatant.asleep .sprite-flip { animation: none; }
  .combatant.asleep .sprite-flip::before,
  .combatant.asleep .sprite-flip::after {
    animation: none; opacity: 0.85; transform: translate(8px, -26px) scale(1);
  }
  .combatant.player.asleep .sprite-flip::before,
  .combatant.player.asleep .sprite-flip::after { transform: translate(-8px, -26px) scale(1) scaleX(-1); }
  .fx-layer.fx-thunderstorm::before,
  .fx-layer.fx-disco::before,
  .fx-layer.fx-firewave::before,
  .fx-layer.fx-deepfreeze::before,
  .fx-layer.fx-morph::before { animation: none; opacity: 0; }
  .dig-clod, .dig-rays, .dig-flash, .dig-sparks span { animation: none; opacity: 0; }
  .dig-shovel-img {
    animation: none;
    opacity: 1;
    transform: translate(-50%, 0) rotate(-24deg);
  }
  .dig-result-gem span, .dig-result-stone, .dig-result-gem::before { animation: none; }
  .dig-stone-img {
    animation: none; opacity: 1;
    transform: translate(-50%, -58px) scale(1);
  }
  /* The --epic selectors out-rank the base kills above, so re-assert. */
  .dig-scene--epic { animation: none; }
  .dig-scene--epic .dig-x, .dig-scene--epic .dig-dust, .dig-scene--epic .dig-motes span,
  .dig-scene--epic .dig-fissures span, .dig-scene--epic .dig-glow, .dig-scene--epic .dig-shock,
  .dig-scene--epic .dig-fall span, .dig-scene--epic .dig-clod, .dig-scene--epic .dig-rays,
  .dig-scene--epic .dig-flash, .dig-scene--epic .dig-sparks span { animation: none; opacity: 0; }
  .dig-scene--epic .dig-hole, .dig-scene--epic .dig-pile {
    animation: none; transform: translate(-50%, -50%) scale(1);
  }
  .dig-scene--epic .dig-shovel-img {
    animation: none; opacity: 1;
    transform: translate(-50%, 0) rotate(-24deg);
  }
  .dig-scene--epic .dig-stone-img {
    animation: none; opacity: 1;
    transform: translate(-50%, -58px) scale(1);
  }
  .della-reward-items img {
    animation: none;
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }
}

/* ===== Title / start screen - clean black on white ======================= */
.boot-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  will-change: transform;
}

.boot-curtain-content {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(360px, 76vw);
}

.boot-curtain-mark {
  width: min(300px, 34vw, 52vh);
  height: auto;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
  mix-blend-mode: normal;
  opacity: 0.96;
  transform: translateY(-2px) scale(0.94);
  animation: boot-mark-pulse 1800ms ease-in-out infinite;
}

.boot-curtain-status {
  min-height: 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.boot-curtain-bar {
  width: min(280px, 68vw);
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.boot-curtain-bar span {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0.08);
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), #ffffff);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.28);
  transition: transform 260ms ease;
}

.boot-curtain.is-lifting {
  animation: boot-curtain-lift 760ms cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

.boot-curtain.is-lifting .boot-curtain-content {
  animation: boot-mark-exit 560ms ease forwards;
}

@keyframes boot-mark-pulse {
  0%, 100% { opacity: 0.74; transform: translateY(-2px) scale(0.92); }
  50% { opacity: 1; transform: translateY(-2px) scale(1); }
}

@keyframes boot-mark-exit {
  to { opacity: 0; transform: translateY(-18px) scale(1.08); }
}

@keyframes boot-curtain-lift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

body.boot-ready .boot-curtain {
  display: none;
}

.modal.title-modal {
  place-items: stretch;
  padding: 0;
  color: #080808;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.title-modal .title-screen {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100dvh;
  max-height: none;
  overflow: auto;
  display: grid;
  justify-items: center;
  color: #080808;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
}

.title-home-screen {
  align-content: center;
  gap: 42px;
  padding: 44px 24px;
}

.title-home-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--title-home-overlay);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
}

.title-home-screen > * {
  position: relative;
  z-index: 1;
}

.title-hero { padding: 0; }

.title-wordmark {
  display: grid;
  justify-items: center;
  gap: 0.02em;
  margin: 0;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7rem;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: 0;
  opacity: 0.75;
  transform: translateX(0.04em);
}

.title-wordmark-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
}

.title-wordmark-row--top {
  transform: translateX(-0.03em);
}

.title-wordmark-row--bottom {
  display: inline-flex;
  transform: translateY(-0.04em);
}

.title-m-mark {
  width: 2.05em;
  height: 1.28em;
  object-fit: contain;
  object-position: center bottom;
  margin-right: -0.1em;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.title-wordmark-text {
  position: relative;
  z-index: 1;
  transform: translateX(-0.18em);
}

.title-wordmark-text--vale {
  transform: none;
}

.title-primary-actions {
  display: grid;
  gap: 16px;
  width: min(280px, calc(100vw - 56px));
}

.title-primary-actions button,
.title-subtle,
.title-back,
.title-intro-actions button {
  min-height: 44px;
  padding: 0 10px;
  color: #080808;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  font-weight: 400;
  letter-spacing: 0;
}

.title-primary-actions button {
  font-size: 1.34rem;
  /* Twin outlined boxes like the landing's Local/Online pair; New Game keeps
     the stronger ink frame as the emphasized action. */
  border: 1px solid rgba(8, 8, 8, 0.3);
}

.title-primary-actions button:hover,
.title-subtle:hover,
.title-back:hover,
.title-intro-actions button:hover {
  color: #000;
  background: transparent;
  border-color: #080808;
  transform: none;
}

.title-primary-actions button:focus-visible,
.title-subtle:focus-visible,
.title-back:focus-visible,
.title-intro-actions button:focus-visible,
.title-save:focus-visible {
  outline: 1px solid #080808;
  outline-offset: 3px;
  box-shadow: none;
}

.title-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.title-mode-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.title-home-screen .title-public-safety {
  position: fixed;
  z-index: 2;
  right: 12px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 8px;
  width: fit-content;
  max-width: calc(100vw - 24px);
  margin: 0 auto;
  padding: 6px 10px;
  color: #292929;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(8, 8, 8, 0.14);
  border-radius: 4px;
  font: 600 0.75rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.title-public-safety a {
  color: #151515;
  text-underline-offset: 0.15em;
}

.title-public-safety a:focus-visible {
  outline: 2px solid #080808;
  outline-offset: 2px;
}

/* The public-local title card fully covers the world shell. Do not make a new
   visitor download the overworld's large paper textures behind that card;
   the normal backgrounds resume as soon as gameplay starts. */
body.mongame-public-local:has(#modal.title-modal:not(.hidden)) {
  background: #fff;
}
body.mongame-public-local:has(#modal.title-modal:not(.hidden)) .playfield,
body.mongame-public-local:has(#modal.title-modal:not(.hidden)) .side-panel {
  background-image: none;
  background-color: #fff;
}

.title-settings-screen {
  align-content: start;
  gap: 28px;
  padding: 42px 24px 56px;
}

.title-settings-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--title-home-overlay);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
}

.title-settings-head h2 {
  margin: 4vh 0 0;
  color: #080808;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0;
}

.title-settings-panel {
  width: min(680px, 100%);
  display: grid;
  gap: 18px;
  text-align: left;
}

.title-settings-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(8, 8, 8, 0.18);
}

.title-settings-row > span {
  color: #181818;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
}

.title-settings-segment {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 8px;
}

.title-settings-note {
  margin: -8px 0 0;
  color: #3a3a3a;
  font-size: 0.86rem;
  font-style: italic;
}

.title-settings-segment button {
  min-height: 38px;
  padding: 0 14px;
  color: #080808;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(8, 8, 8, 0.22);
  border-radius: 4px;
  box-shadow: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0;
}

.title-settings-segment button.is-selected {
  color: #fff;
  background: #111;
  border-color: #111;
}

@media (max-width: 620px) {
  .title-settings-screen {
    padding: 34px 18px 44px;
  }

  .title-settings-row {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 10px;
    min-width: 0;
  }

  .title-settings-segment {
    display: grid;
    width: 100%;
    grid-auto-flow: initial;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .title-settings-segment button {
    min-width: 0;
    width: 100%;
  }
}

.title-load-screen {
  align-content: start;
  gap: 28px;
  padding: 42px 24px 56px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* With no saves the short content centers instead of hugging the top. */
.title-load-screen:has(.title-empty) {
  align-content: center;
  padding-top: 24px;
}

/* The Load screen keeps the same framed ink world as the title home so
   navigating between them never changes the page's identity. The old sparse
   load art remains the fallback where the overlay variable is absent. */
.title-load-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--title-home-overlay, var(--title-load-bg));
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.92;
  -webkit-mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
  mask-image: radial-gradient(ellipse 34% 31% at 50% 50%, transparent 0 67%, rgba(0, 0, 0, 0.28) 76%, #000 100%);
}

.title-load-screen .title-empty {
  color: #6b6b66;
}

/* Empty Load screens still offer the obvious next step. */
.title-empty-new {
  justify-self: center;
  min-height: 48px;
  width: min(280px, 100%);
  margin-top: 6px;
  padding: 0 24px;
  color: #080808;
  background: transparent;
  border: 1px solid #080808;
  border-radius: 0;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 400;
}

.title-empty-new:hover,
.title-empty-new:focus-visible {
  color: #fbfaf7;
  background: #080808;
  outline: none;
}

.title-back {
  justify-self: start;
  margin-left: min(7vw, 72px);
}

/* Back keeps one consistent top-left slot on every load-screen size instead
   of drifting with the centered content column. */
.title-load-screen .title-back {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  margin-left: 0;
}

.title-load-head h2,
.title-intro-copy h2 {
  margin: 0;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.7rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.title-save-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: min(720px, calc(100vw - 48px));
}

.title-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  min-height: 96px;
  padding: 16px 20px;
  color: #080808;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.97)),
    var(--save-line-bg, none) center / cover no-repeat,
    rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-left: 3px solid #080808;
  border-radius: 2px;
  box-shadow: none;
  letter-spacing: 0;
}

.title-save-main {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.title-save-main:hover,
.title-save-main:focus-visible {
  outline: none;
}

.title-save-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.title-save-action {
  min-height: 28px;
  padding: 0 9px;
  color: #333;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.title-save-action:hover,
.title-save-action:focus-visible {
  color: #000;
  background: #fff;
  border-color: rgba(0, 0, 0, 0.32);
  outline: none;
}

.title-save-action.danger {
  color: #8a2f26;
  border-color: rgba(138, 47, 38, 0.3);
}

.title-save-action.repair {
  color: #090909;
  background: #f5d35e;
  border-color: rgba(0, 0, 0, 0.38);
}

.title-save:hover {
  color: #000;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.83), rgba(255, 255, 255, 0.98)),
    var(--save-line-bg, none) center / cover no-repeat,
    #fff;
  border-color: #000;
  box-shadow: none;
  transform: translateY(-1px);
}

.ts-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ts-name {
  color: #080808;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  font-weight: 400;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.ts-load-main {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 10px;
  flex-wrap: wrap;
}

.ts-name-inline {
  min-width: 0;
}

.ts-save-meta {
  color: #666;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ts-when {
  flex: 0 0 auto;
  color: #555;
  font-size: 0.76rem;
  font-weight: 500;
  text-align: right;
}

.ts-repair-notice {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  color: #17120a;
  background: rgba(245, 211, 94, 0.26);
  border: 1px solid rgba(128, 88, 12, 0.34);
  border-radius: 4px;
  font-size: 0.76rem;
  line-height: 1.35;
}

.ts-repair-notice strong {
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ts-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px;
}

.ts-stat {
  display: grid;
  gap: 4px;
  padding: 8px 0 7px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ts-stat span {
  color: #666;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ts-stat strong {
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.ts-splits {
  display: grid;
  gap: 7px;
  padding-top: 4px;
}

.ts-splits-title {
  color: #666;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ts-split-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px 10px;
}

.ts-split {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #222;
  font-size: 0.72rem;
  font-weight: 500;
}

.ts-split span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ts-split strong {
  flex: 0 0 auto;
  color: #050505;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.76rem;
  font-weight: 400;
}

.ts-split-empty {
  justify-content: flex-start;
  color: #666;
}

.title-screen .ss-chip,
.ts-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  color: #111;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0;
}

.title-empty {
  margin: 34px 0;
  color: #444;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  text-align: center;
}

.title-intro-screen {
  align-content: center;
  gap: 12px;
  padding: clamp(18px, 3vh, 28px) 24px clamp(20px, 4vh, 30px);
}

.title-intro-screen--image-only {
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 28px;
}

.title-intro-art {
  width: min(1020px, calc(100vw - 48px), calc((100dvh - 196px) * 1.5));
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.title-intro-art--wide {
  width: min(1200px, calc(100vw - 48px), calc((100dvh - 224px) * 1.7778));
  aspect-ratio: 16 / 9;
}

.title-intro-screen--image-only .title-intro-art--wide {
  width: min(1200px, calc(100vw - 48px), calc((100dvh - 118px) * 1.7778));
}

.title-intro-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.title-intro-copy {
  width: min(720px, calc(100vw - 48px));
  display: grid;
  gap: 6px;
  padding: 10px 16px 12px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.title-intro-copy h2 {
  font-size: clamp(1.85rem, 4.8vh, 2.35rem);
}

.title-intro-copy p {
  margin: 0;
  color: #202020;
  font-size: 0.98rem;
  line-height: 1.42;
}

.title-intro-count {
  color: #555;
  font-size: 0.76rem;
  font-weight: 700;
}

.title-intro-actions {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.intro-cloud-transition {
  position: fixed;
  inset: 0;
  z-index: 130;
  overflow: hidden;
  pointer-events: auto;
  background: transparent;
}

.intro-cloud-transition.hidden {
  display: none;
}

.intro-cloud-layer,
.intro-cloud-haze,
.intro-rotate-prompt {
  position: absolute;
  pointer-events: none;
}

.intro-cloud-haze {
  inset: -12%;
  background:
    radial-gradient(ellipse 96% 72% at 50% 50%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.68) 58%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.88) 22%, rgba(255, 255, 255, 0.94) 76%, rgba(255, 255, 255, 0));
  opacity: 0;
}

.intro-cloud-layer {
  left: 50%;
  top: 50%;
  width: max(168vw, 231vh);
  aspect-ratio: 1672 / 941;
  background-image: var(--intro-cloud-img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  transform: translate(-50%, -50%) translateX(118%) scale(var(--cloud-scale, 1.04));
  transform-origin: center;
  will-change: transform, opacity;
}

.intro-cloud-layer--rear {
  --cloud-scale: 1.16;
  --cloud-wait-scale: 1.18;
  --cloud-breathe-scale: 1.2;
  opacity: 0.72;
  filter: blur(9px) brightness(1.08) saturate(0.92);
}

.intro-cloud-layer--front {
  --cloud-scale: 1.04;
  --cloud-wait-scale: 1.07;
  --cloud-breathe-scale: 1.1;
  opacity: 0.98;
  filter:
    drop-shadow(0 32px 36px rgba(25, 38, 54, 0.2))
    saturate(0.96)
    contrast(1.04);
}

.intro-rotate-prompt {
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(10px);
}

.intro-cloud-loading-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  display: none;
  width: max-content;
  max-width: calc(100vw - 48px);
  padding: 9px 13px;
  color: rgba(25, 42, 57, 0.78);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(25, 42, 57, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(25, 42, 57, 0.12);
  text-shadow: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.intro-cloud-transition.is-loading .intro-cloud-loading-indicator {
  display: block;
}

.intro-phone-icon {
  position: relative;
  width: 58px;
  height: 92px;
  border: 5px solid #050505;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  transform: rotate(-90deg);
  animation: intro-phone-turn 1800ms ease-in-out infinite;
}

.intro-phone-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #050505;
  transform: translateX(-50%);
}

.intro-phone-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -31px;
  width: 68px;
  height: 68px;
  border: 5px solid #050505;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-16deg);
}

.intro-cloud-transition.is-covering .intro-cloud-layer {
  animation: intro-cloud-cover 2600ms cubic-bezier(0.16, 0.78, 0.2, 1) forwards;
}

.intro-cloud-transition.is-covering .intro-cloud-haze {
  animation: intro-cloud-haze-in 2600ms ease-out forwards;
}

.intro-cloud-transition.is-waiting .intro-cloud-layer {
  transform: translate(-50%, -50%) translateX(0) scale(var(--cloud-wait-scale, 1.08));
  animation: intro-cloud-breathe 5200ms ease-in-out infinite;
}

.intro-cloud-transition.is-waiting .intro-cloud-haze {
  opacity: 0.92;
}

.intro-cloud-transition.is-waiting .intro-rotate-prompt {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 420ms ease;
}

.intro-cloud-transition.is-clearing .intro-cloud-layer {
  animation: intro-cloud-clear-left 2600ms cubic-bezier(0.2, 0.78, 0.28, 1) forwards;
}

.intro-cloud-transition.is-clearing-back .intro-cloud-layer {
  animation: intro-cloud-clear-right 2600ms cubic-bezier(0.2, 0.78, 0.28, 1) forwards;
}

.intro-cloud-transition.is-clearing .intro-cloud-haze,
.intro-cloud-transition.is-clearing-back .intro-cloud-haze {
  animation: intro-cloud-haze-out 2600ms ease-in forwards;
}

.intro-cloud-transition.is-clearing .intro-rotate-prompt,
.intro-cloud-transition.is-clearing-back .intro-rotate-prompt {
  opacity: 0;
}

@keyframes intro-cloud-cover {
  0% { transform: translate(-50%, -50%) translateX(118%) scale(var(--cloud-scale, 1.04)); opacity: 0.96; }
  72% { transform: translate(-50%, -50%) translateX(8%) scale(var(--cloud-wait-scale, 1.08)); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(0) scale(var(--cloud-wait-scale, 1.08)); opacity: 1; }
}

@keyframes intro-cloud-breathe {
  0%, 100% { transform: translate(-50%, -50%) translateX(0) translateY(0) scale(var(--cloud-wait-scale, 1.08)); }
  50% { transform: translate(-50%, -50%) translateX(-1.4%) translateY(-1.1%) scale(var(--cloud-breathe-scale, 1.1)); }
}

@keyframes intro-cloud-clear-left {
  0% { transform: translate(-50%, -50%) translateX(0) scale(var(--cloud-wait-scale, 1.08)); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(-118%) scale(var(--cloud-scale, 1.04)); opacity: 0.94; }
}

@keyframes intro-cloud-clear-right {
  0% { transform: translate(-50%, -50%) translateX(0) scale(var(--cloud-wait-scale, 1.08)); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateX(118%) scale(var(--cloud-scale, 1.04)); opacity: 0.94; }
}

@keyframes intro-cloud-haze-in {
  0% { opacity: 0; }
  62% { opacity: 0.58; }
  100% { opacity: 0.92; }
}

@keyframes intro-cloud-haze-out {
  0% { opacity: 0.92; }
  42% { opacity: 0.48; }
  100% { opacity: 0; }
}

@keyframes intro-phone-turn {
  0%, 100% { transform: rotate(0deg); }
  45%, 70% { transform: rotate(-90deg); }
}

.screen-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: #080808;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.screen-transition.hidden { display: none; }

.screen-transition span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  font-weight: 400;
  letter-spacing: 0;
}

.screen-transition.is-running {
  animation: title-transition-fade 1260ms cubic-bezier(0.22, 0.76, 0.22, 1) both;
}

@keyframes title-transition-fade {
  0% { opacity: 0; }
  28% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; }
}

/* ANIM-08 — realm-entry variants. Both keep .screen-transition.is-running, so
 * they inherit the existing prefers-reduced-motion rule (1ms) unchanged. */
.screen-transition--dawn {
  color: #4a3812;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.96), transparent 60%),
    linear-gradient(180deg, #fffdf4 0%, #ffeec2 48%, #f3d488 100%);
}
/* a sun that rises + swells behind the title as the card runs */
.screen-transition--dawn::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 44vmin;
  height: 44vmin;
  transform: translate(-50%, -50%) scale(0.4);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.98) 0%, rgba(255,236,170,0.85) 38%, rgba(255,214,120,0) 72%);
  filter: blur(2px);
  opacity: 0;
}
.screen-transition--dawn.is-running::before {
  animation: dawn-sun-rise 1260ms cubic-bezier(0.22, 0.76, 0.22, 1) both;
}
/* faint upward light rays sweeping past the title */
.screen-transition--dawn::after {
  content: "";
  position: absolute;
  inset: -20% -10% 30% -10%;
  background:
    repeating-conic-gradient(from 90deg at 50% 120%,
      rgba(255,255,255,0.0) 0deg,
      rgba(255,247,214,0.22) 3deg,
      rgba(255,255,255,0.0) 8deg);
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 50% 120%;
}
.screen-transition--dawn.is-running::after {
  animation: dawn-rays 1260ms ease-out both;
}
@keyframes dawn-sun-rise {
  0% { opacity: 0; transform: translate(-50%, 12%) scale(0.4); }
  35% { opacity: 1; }
  100% { opacity: 0.9; transform: translate(-50%, -58%) scale(1.25); }
}
@keyframes dawn-rays {
  0% { opacity: 0; transform: rotate(-6deg) scale(1.05); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: rotate(6deg) scale(1.15); }
}

.screen-transition--echo {
  color: #e6ecf4;
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 142, 162, 0.35), transparent 64%),
    linear-gradient(180deg, #232a33 0%, #45505d 52%, #1d232c 100%);
}

.journey-load-transition {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: block;
  overflow: hidden;
  background: #000;
  opacity: 0;
  pointer-events: all;
  isolation: isolate;
}

.journey-load-transition.hidden { display: none; }

.journey-load-transition.is-running:not(.is-revealing) {
  animation: journey-load-cover-in 340ms cubic-bezier(0.22, 0.76, 0.22, 1) both;
}

.journey-load-transition.is-revealing {
  animation: journey-load-cover-out 620ms cubic-bezier(0.5, 0, 0.2, 1) both;
}

.journey-load-transition::before,
.journey-load-transition::after,
.journey-load-wash,
.journey-load-brush,
.journey-load-art {
  position: absolute;
  pointer-events: none;
}

.journey-load-transition::before {
  content: "";
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 18%, transparent 78%, rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 38px);
  opacity: 0.62;
  animation: journey-load-grain 1380ms steps(3, end) infinite;
}

.journey-load-transition::after {
  content: "";
  inset: -8% -6%;
  z-index: 4;
  background:
    linear-gradient(90deg, #000 0%, transparent 18%, transparent 82%, #000 100%),
    linear-gradient(180deg, #000 0%, transparent 30%, transparent 74%, #000 100%);
}

.journey-load-wash {
  inset: auto -10% 0 -10%;
  z-index: 1;
  height: 44%;
  background:
    linear-gradient(96deg, transparent 0 16%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.16) 49%, transparent 68%),
    linear-gradient(5deg, rgba(255, 255, 255, 0.11), transparent 48%);
  filter: blur(10px);
  opacity: 0.42;
  transform: translateX(-16%) skewX(-12deg);
  animation: journey-load-wash 4800ms cubic-bezier(0.18, 0.72, 0.18, 1) infinite alternate;
}

.journey-load-brush {
  z-index: 3;
  height: 22%;
  left: -18%;
  right: -18%;
  bottom: 10%;
  background:
    linear-gradient(100deg, transparent 0 26%, rgba(255, 255, 255, 0.08) 39%, rgba(255, 255, 255, 0.3) 48%, rgba(255, 255, 255, 0.08) 58%, transparent 76%),
    repeating-linear-gradient(102deg, transparent 0 34px, rgba(255, 255, 255, 0.08) 35px 37px, transparent 38px 78px);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1.2px);
  transform: skewX(-13deg) translateX(-38%);
}

.journey-load-brush--rear {
  z-index: 1;
  bottom: 4%;
  opacity: 0.18;
  animation: journey-load-brush-rear 4800ms cubic-bezier(0.16, 0.72, 0.16, 1) infinite alternate;
}

.journey-load-brush--front {
  z-index: 7;
  bottom: 16%;
  opacity: 0.4;
  animation: journey-load-brush-front 4800ms cubic-bezier(0.16, 0.72, 0.16, 1) infinite;
}

.journey-load-art {
  z-index: 6;
  left: 50%;
  bottom: max(5vh, 28px);
  width: min(29vh, 24vw, 258px);
  aspect-ratio: 256 / 420;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  transform-origin: center bottom;
  animation: journey-load-art-run 4800ms linear infinite;
}

.journey-load-art::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2400%;
  height: 100%;
  background: var(--journey-load-art) 0 0 / 100% 100% no-repeat;
  animation: journey-load-sprite 1200ms steps(24, end) infinite;
  will-change: transform;
}

@keyframes journey-load-cover-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes journey-load-cover-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes journey-load-grain {
  0%, 100% { transform: translate(0, 0); opacity: 0.48; }
  33% { transform: translate(-8px, 3px); opacity: 0.62; }
  66% { transform: translate(6px, -2px); opacity: 0.52; }
}

@keyframes journey-load-wash {
  0% { opacity: 0; transform: translateX(-34%) skewX(-12deg); }
  18% { opacity: 0.36; }
  72% { opacity: 0.48; }
  100% { opacity: 0.2; transform: translateX(20%) skewX(-12deg); }
}

@keyframes journey-load-brush-rear {
  0% { opacity: 0; transform: skewX(-13deg) translateX(-46%); }
  18% { opacity: 0.16; }
  100% { opacity: 0.08; transform: skewX(-13deg) translateX(28%); }
}

@keyframes journey-load-brush-front {
  0% { opacity: 0; transform: skewX(-13deg) translateX(-64%); }
  36% { opacity: 0.38; }
  100% { opacity: 0; transform: skewX(-13deg) translateX(52%); }
}

@keyframes journey-load-art-run {
  0% { opacity: 0; transform: translateX(calc(-50% - 62vw)) translateY(6%) scale(0.96); }
  8% { opacity: 1; }
  24% { opacity: 1; transform: translateX(calc(-50% - 30vw)) translateY(1%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.02); }
  76% { opacity: 1; transform: translateX(calc(-50% + 30vw)) translateY(-1%) scale(1.03); }
  94% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(-50% + 62vw)) translateY(-1.5%) scale(1.04); }
}

@keyframes journey-load-sprite {
  to { transform: translateX(-100%); }
}

@media (max-width: 720px) {
  .journey-load-art {
    bottom: max(8vh, 42px);
    width: min(34vh, 44vw, 236px);
  }
  .journey-load-wash {
    height: 36%;
  }
  .boot-curtain-mark {
    width: min(220px, 38vw, 48vh);
  }
  .title-wordmark {
    font-size: 4.15rem;
    gap: 0;
  }
  .title-m-mark {
    width: 2.1em;
    height: 1.32em;
    margin-right: -0.14em;
  }
  .title-load-screen {
    gap: 18px;
    padding: 24px 14px 28px;
  }
  .title-load-head h2,
  .title-intro-copy h2 { font-size: 2.1rem; }
  .title-intro-screen {
    gap: 12px;
    padding: 20px 14px 24px;
  }
  .title-intro-art {
    width: min(calc(100vw - 28px), calc((100dvh - 196px) * 1.5));
  }
  .title-intro-art--wide {
    width: min(calc(100vw - 28px), calc((100dvh - 210px) * 1.7778));
  }
  .title-intro-screen--image-only .title-intro-art--wide {
    width: min(calc(100vw - 28px), calc((100dvh - 96px) * 1.7778));
  }
  .title-intro-copy {
    width: min(100%, calc(100vw - 28px));
    padding: 9px 12px 11px;
  }
  .title-intro-copy p {
    font-size: 0.92rem;
    line-height: 1.35;
  }
  .title-back {
    margin-left: 0;
  }
  .title-save-list {
    width: min(100%, calc(100vw - 24px));
    gap: 8px;
  }
  .title-save {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px 14px 15px;
  }
  .title-save-actions {
    justify-content: flex-start;
  }
  .ts-row {
    display: grid;
    gap: 7px;
  }
  .ts-load-main {
    gap: 7px;
  }
  .ts-name {
    font-size: 1.02rem;
  }
  .ts-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
  .ts-stat {
    padding: 7px 0 6px;
  }
  .ts-stat strong {
    font-size: 0.92rem;
  }
  .ts-split-list {
    grid-template-columns: 1fr;
  }
  .ts-when {
    white-space: normal;
    text-align: left;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal.title-intro-modal {
    padding: 0;
    background: #000;
  }

  html.is-touch .modal.title-intro-modal .title-intro-screen {
    min-height: 100dvh;
    height: 100dvh;
    width: 100vw;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    display: grid;
    align-content: start;
    justify-content: stretch;
    gap: 10px;
    overflow: hidden;
    background: #000;
  }

  html.is-touch .modal.title-intro-modal .title-intro-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    background: #000;
  }

  html.is-touch .modal.title-intro-modal .title-intro-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.16) 44%, rgba(0, 0, 0, 0.48) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.12) 52%, rgba(0, 0, 0, 0.36) 100%);
    pointer-events: none;
  }

  html.is-touch .modal.title-intro-modal .title-intro-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #000;
  }

  html.is-touch .modal.title-intro-modal .title-intro-copy {
    position: absolute;
    z-index: 1;
    top: max(10px, env(safe-area-inset-top));
    left: max(154px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    max-width: 560px;
    max-height: calc(100dvh - 24px);
    margin: 0 auto;
    padding: 10px 14px;
    gap: 5px;
    overflow: hidden;
    text-align: center;
    color: #050505;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.42);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  html.is-touch .modal.title-intro-modal .title-intro-copy h2 {
    font-size: clamp(1.35rem, 4.7vw, 2.05rem);
    line-height: 1;
  }

  html.is-touch .modal.title-intro-modal .title-intro-copy p {
    color: #080808;
    font-size: clamp(0.78rem, 2.35vw, 0.98rem);
    line-height: 1.33;
  }

  html.is-touch .modal.title-intro-modal .title-intro-count {
    color: #333;
    font-size: 0.66rem;
  }

  html.is-touch .modal.title-intro-modal .title-intro-actions {
    position: absolute;
    left: max(12px, env(safe-area-inset-left));
    top: max(12px, env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 132px;
  }

  html.is-touch .modal.title-intro-modal .title-intro-actions button {
    min-height: 40px;
    padding: 0 10px;
    color: #050505;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.32);
  }
}

@media (max-width: 420px) {
  .title-wordmark {
    font-size: 3.1rem;
  }
  .title-wordmark-row--top {
    transform: translateX(-0.24em);
  }
}

@media (max-width: 390px) {
  .title-wordmark {
    font-size: 2.55rem;
  }
  .title-wordmark-row--top {
    transform: translateX(-0.08em);
  }
}

@media (max-height: 520px) {
  .title-home-screen {
    gap: 28px;
    padding: 24px;
  }

  .title-wordmark {
    font-size: 4.4rem;
  }
}

/* Public local has a third footer action plus age/legal guidance. On a phone
   in landscape the fixed guidance bar used to sit on top of Settings and the
   mode switch. Keep every title action in the card's normal scroll flow and
   compact the vertical rhythm enough for common 360-390px-tall viewports. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  body.mongame-public-local .modal.title-home-modal .title-home-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100dvh;
    gap: clamp(5px, 1.8dvh, 10px);
    padding:
      max(8px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(20px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  body.mongame-public-local .modal.title-home-modal .title-wordmark {
    font-size: clamp(2.55rem, 15dvh, 3.6rem);
  }

  body.mongame-public-local .modal.title-home-modal .title-primary-actions {
    gap: 8px;
    width: min(260px, calc(100vw - 32px));
  }

  body.mongame-public-local .modal.title-home-modal .title-primary-actions button {
    min-height: 44px;
    font-size: 1.08rem;
  }

  body.mongame-public-local .modal.title-home-modal .title-primary-actions .title-action-primary {
    min-height: 48px;
  }

  body.mongame-public-local .modal.title-home-modal .title-foot {
    gap: 3px 12px;
  }

  body.mongame-public-local .modal.title-home-modal .title-subtle {
    min-height: 42px;
    padding-inline: 9px;
    font-size: 0.92rem;
  }

  body.mongame-public-local .modal.title-home-modal .title-public-safety {
    position: static;
    inset: auto;
    max-width: min(760px, 100%);
    margin: auto auto 0;
    padding: 4px 8px;
    font-size: 0.68rem;
  }
}

/* Landscape phones, ALL builds (the block above is public-local only): keep
   the wordmark from eating a third of the viewport, hold 48px touch targets,
   and keep the last control row clear of home-indicator/gesture bands. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  .modal.title-modal .title-home-screen {
    gap: clamp(8px, 2.6dvh, 18px);
    padding:
      max(10px, env(safe-area-inset-top))
      24px
      max(24px, env(safe-area-inset-bottom));
  }

  .modal.title-modal .title-wordmark {
    font-size: clamp(2.55rem, 15dvh, 3.6rem);
  }

  .modal.title-modal .title-primary-actions button,
  .modal.title-modal .title-primary-actions .title-action-primary {
    min-height: 48px;
  }

  .modal.title-modal .title-load-screen {
    gap: 16px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .modal.title-modal .title-load-head h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 390px) {
  .title-load-screen {
    gap: 14px;
    padding: 18px 10px 22px;
  }
  .title-load-head h2 {
    font-size: 1.85rem;
  }
  .title-save-list {
    width: min(100%, calc(100vw - 16px));
  }
  .title-save {
    padding: 12px 11px 13px;
    border-left-width: 2px;
  }
  .ts-load-main {
    display: grid;
    gap: 5px;
  }
  .ts-name {
    font-size: 0.98rem;
  }
  .ts-pill {
    width: fit-content;
  }
  .ts-stats {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .ts-stat {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
  }
  .ts-stat strong {
    text-align: right;
  }
  .ts-split {
    font-size: 0.68rem;
  }
  .ts-split strong {
    font-size: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen-transition.is-running { animation-duration: 1ms; opacity: 1; }
  .screen-transition--dawn.is-running::before,
  .screen-transition--dawn.is-running::after { animation-duration: 1ms; }
  .journey-load-transition.is-running,
  .journey-load-transition.is-revealing,
  .journey-load-transition::before,
  .journey-load-wash,
  .journey-load-brush,
  .journey-load-art,
  .journey-load-art::before {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .journey-load-art {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ===== Save screen — clean tabbed slot manager ========================== */
/* ---- Save interface ---------------------------------------------------- *
 * Restyled: a cool BLUE primary accent (replaces the game-wide gold here),
 * and run autosaves get their own GREEN identity so they clearly stand apart.
 * All palette overrides are scoped to .save-screen — the rest of the game's
 * gold theme is untouched. */
.save-screen {
  width: min(700px, 100%);
  --sv: #5ab0f0;            /* primary action (blue) */
  --sv-deep: #3577bd;
  --sv-glow: rgba(90, 176, 240, 0.34);
  --sv-q: #4cd79e;          /* run autosave (green) */
  --sv-q-deep: #239c6c;
  --sv-q-glow: rgba(76, 215, 158, 0.36);
  --sv-line: rgba(255, 255, 255, 0.10);
}

.save-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sv-line);
}
.save-head h2 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

.save-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid var(--sv-line);
}
.save-tab {
  padding: 8px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.save-tab:hover { color: var(--ink); }
.save-tab.active {
  background: linear-gradient(180deg, var(--sv), var(--sv-deep));
  color: #04121f;
  box-shadow: 0 4px 16px var(--sv-glow);
}

.save-hint {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.save-create {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.save-create input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.34);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.save-create input::placeholder { color: var(--muted); }
.save-create input:focus {
  outline: none;
  border-color: var(--sv);
  box-shadow: 0 0 0 3px var(--sv-glow);
}

.save-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 54vh;
  overflow-y: auto;
  padding: 3px;
  margin: 0 -3px;
}

.save-slot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 14px 18px;
  border-radius: 15px;
  border: 1px solid var(--sv-line);
  background:
    linear-gradient(180deg, rgba(9, 13, 21, 0.88), rgba(9, 13, 21, 0.76)),
    var(--save-line-bg, none) center / cover no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012));
  transition: border-color 0.16s ease, transform 0.12s ease, box-shadow 0.16s ease;
}
/* a thin accent rail on the left of every slot */
.save-slot::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.16s ease;
}
.save-slot:hover {
  border-color: rgba(90, 176, 240, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
}
.save-slot:hover::before { background: var(--sv); }

/* Run autosave — distinct green-tinted card that visibly pops. */
.save-slot.quick {
  border-color: rgba(76, 215, 158, 0.45);
  background:
    linear-gradient(180deg, rgba(7, 26, 21, 0.84), rgba(7, 14, 20, 0.75)),
    var(--save-line-bg, none) center / cover no-repeat,
    linear-gradient(180deg, rgba(76, 215, 158, 0.14), rgba(76, 215, 158, 0.025)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  box-shadow: 0 0 0 1px rgba(76, 215, 158, 0.22), 0 10px 26px rgba(0, 0, 0, 0.30);
}
.save-slot.quick::before { background: linear-gradient(180deg, var(--sv-q), var(--sv-q-deep)); }
.save-slot.quick:hover { border-color: rgba(76, 215, 158, 0.7); }
.save-slot.quick:hover::before { background: var(--sv-q); }

.slot-main { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.slot-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 1.04rem;
  letter-spacing: 0.01em;
}
.slot-tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #04121f;
  background: linear-gradient(180deg, var(--sv), var(--sv-deep));
}
.slot-tag--current {
  color: #111;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.save-slot.quick .slot-tag {
  color: #04140d;
  background: linear-gradient(180deg, var(--sv-q), var(--sv-q-deep));
  box-shadow: 0 2px 10px var(--sv-q-glow);
}
.save-slot.quick .slot-tag--current {
  color: #111;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: none;
}
.slot-sub { color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; }
.slot-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-chip {
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-soft, #cdd6e4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ss-chip.lead { color: #bfe4ff; border-color: rgba(90, 176, 240, 0.4); }
.ss-chip.win {
  color: #04140d;
  font-weight: 800;
  background: linear-gradient(180deg, var(--sv-q), var(--sv-q-deep));
  border-color: transparent;
}
/* The ultimate accolade — beat Professor Reed's all-legendary team. */
.ss-chip.eternal {
  color: #1a0f2e;
  font-weight: 900;
  background: linear-gradient(180deg, #ffe27a, #c9a0ff);
  border-color: transparent;
  box-shadow: 0 2px 12px rgba(201, 160, 255, 0.5);
}
.slot-when { color: var(--muted); font-size: 0.72rem; opacity: 0.82; }

.slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ss-btn {
  padding: 9px 17px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.1s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.ss-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.ss-btn:active { transform: none; }
.ss-btn.primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--sv), var(--sv-deep));
  color: #04121f;
  box-shadow: 0 6px 16px var(--sv-glow);
}
.ss-btn.primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px var(--sv-glow); }
/* Autosave's own button: green, a touch larger, clearly the highlight. */
.save-slot.quick .ss-btn.primary {
  background: linear-gradient(180deg, var(--sv-q), var(--sv-q-deep));
  color: #04140d;
  padding: 10px 22px;
  font-size: 0.86rem;
  box-shadow: 0 6px 18px var(--sv-q-glow);
}
.ss-btn.ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--muted);
}
.ss-btn.ghost:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
.ss-btn.danger {
  background: transparent;
  border-color: rgba(224, 89, 74, 0.45);
  color: #ff8a7a;
}
.ss-btn.danger:hover {
  background: rgba(224, 89, 74, 0.16);
  border-color: var(--danger, #e0594a);
  color: #ff9e90;
}

.save-empty {
  text-align: center;
  padding: 30px 16px;
  border-radius: 15px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.save-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--sv-line);
}

@media (max-width: 560px) {
  .save-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .save-tabs { width: 100%; }
  .save-tab { flex: 1 1 0; }
  .save-slot { grid-template-columns: minmax(0, 1fr); }
  .slot-actions { justify-content: stretch; }
  .slot-actions .ss-btn { flex: 1 1 auto; text-align: center; }
}

/* "Too strong for your seals" warning on the monster Details screen */
.disobey-line {
  color: var(--danger);
  font-weight: 800;
}

/* ===== Charm tiers - faceted crystal variants ============================ */
.fx-capture-ball.azure,
.fx-catch-ball.azure {
  border-color: rgba(190, 236, 255, 0.94);
  background:
    linear-gradient(135deg, rgba(219, 248, 255, 0.95) 0 18%, transparent 19%),
    linear-gradient(150deg, #9bf3ff 0%, #2364a8 54%, #102541 100%) !important;
  box-shadow: 0 0 16px rgba(120, 216, 255, 0.88), 0 0 24px rgba(35, 100, 168, 0.38);
}
.fx-capture-ball.master,
.fx-catch-ball.master {
  border-color: rgba(255, 225, 143, 0.96);
  background:
    linear-gradient(135deg, rgba(255, 226, 143, 0.96) 0 18%, transparent 19%),
    linear-gradient(150deg, #f8d88a 0%, #171222 42%, #030407 100%) !important;
  box-shadow: 0 0 20px rgba(255, 219, 116, 0.82), 0 0 32px rgba(70, 48, 120, 0.62);
}
.fx-capture-ball.hyper,
.fx-catch-ball.hyper {
  border-color: rgba(255, 222, 121, 0.94);
  background:
    linear-gradient(135deg, rgba(255, 240, 171, 0.96) 0 18%, transparent 19%),
    linear-gradient(150deg, #ffe58a 0%, #d86a2a 52%, #5a2d14 100%) !important;
  box-shadow: 0 0 18px rgba(255, 190, 90, 0.9), 0 0 26px rgba(216, 106, 42, 0.38);
}
.fx-capture-ball.giga,
.fx-catch-ball.giga {
  border-color: rgba(229, 218, 255, 0.96);
  background:
    linear-gradient(135deg, rgba(243, 238, 255, 0.98) 0 18%, transparent 19%),
    linear-gradient(150deg, #83f5ff 0%, #9f6cff 48%, #142b4f 100%) !important;
  box-shadow: 0 0 20px rgba(105, 220, 255, 0.95), 0 0 18px rgba(190, 120, 255, 0.76);
}
.fx-catch-ball.azure::after,
.fx-catch-ball.hyper::after,
.fx-catch-ball.giga::after,
.fx-catch-ball.master::after { background: rgba(255, 255, 255, 0.44); }

.fx-catch-ball.fx-catch-ball-art {
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: var(--catch-prism-art) !important;
  background-repeat: no-repeat !important;
  background-position: var(--catch-prism-frame, 0 0) !important;
  background-size: var(--catch-prism-total, auto) var(--catch-prism-size, auto) !important;
  box-shadow: none !important;
}

.fx-catch-ball.fx-catch-ball-art::after {
  display: none !important;
}

/* little colour chips in the charm picker */
.ball-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 4px;
  clip-path: polygon(50% 0%, 100% 36%, 82% 100%, 18% 100%, 0% 36%);
  vertical-align: -1px;
  border: 1.5px solid #1f2733;
}
.ball-dot.normal { background: linear-gradient(150deg, #78ead7, #245d68 62%, #ffd36a); }
.ball-dot.safari { background: linear-gradient(150deg, #c4f280, #56a64c 62%, #122c12); }
.ball-dot.azure { background: linear-gradient(150deg, #9bf3ff, #2364a8 62%, #cde9ff); }
.ball-dot.master { background: linear-gradient(150deg, #f8d88a, #171222 48%, #030407); }
.ball-dot.hyper { background: linear-gradient(150deg, #ffe58a, #d86a2a 62%, #5a2d14); }
.ball-dot.giga { background: linear-gradient(150deg, #83f5ff, #9f6cff 58%, #142b4f); }

.ball-picker-card {
  width: min(470px, calc(100vw - 44px));
  padding: 16px;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(24, 31, 50, 0.66), rgba(9, 13, 23, 0.58));
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

.ball-picker-card h2 {
  margin-bottom: 10px;
  font-size: 1.25rem;
}

.ball-picker-card p {
  margin: 10px 0 0;
  font-size: 0.78rem;
}

.ball-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ball-choice {
  position: relative;
  min-height: 104px;
  padding: 10px 9px 9px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  border-radius: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.026));
}

.ball-choice:hover:not(:disabled),
.ball-choice:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(127, 231, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.34),
    0 0 0 2px rgba(127, 231, 255, 0.18);
}

.ball-choice-key {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: rgba(246, 251, 255, 0.8);
  background: rgba(5, 8, 14, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.58rem;
  font-weight: 900;
}

.ball-choice-orb {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  clip-path: polygon(50% 0%, 100% 36%, 82% 100%, 18% 100%, 0% 36%);
  border: 2px solid rgba(255, 232, 142, 0.58);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.35);
}

.ball-choice-orb::after {
  content: "";
  display: block;
  width: 8px;
  height: 23px;
  margin: 8px auto 0;
  border-radius: 999px;
  transform: rotate(28deg);
  background: rgba(255, 255, 255, 0.42);
}

.ball-choice-normal { background: linear-gradient(150deg, #78ead7 0%, #245d68 54%, #071b22 100%); }
.ball-choice-safari { background: linear-gradient(150deg, #c4f280 0%, #56a64c 54%, #122c12 100%); }
.ball-choice-azure { background: linear-gradient(150deg, #9bf3ff 0%, #2364a8 54%, #102541 100%); }
.ball-choice-hyper { background: linear-gradient(150deg, #ffe58a 0%, #d86a2a 54%, #5a2d14 100%); }
.ball-choice-giga { background: linear-gradient(150deg, #83f5ff 0%, #9f6cff 50%, #142b4f 100%); }
.ball-choice-prismatic { background: linear-gradient(150deg, #c8fff8 0%, #9f72ff 43%, #274a8a 72%, #f9d77b 100%); }
.ball-choice-master { background: linear-gradient(150deg, #f8d88a 0%, #171222 46%, #030407 100%); }

.ball-choice-orb.is-art {
  clip-path: none;
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 232, 142, 0.82);
  border-radius: 10px;
  background-image:
    var(--ball-choice-art),
    radial-gradient(circle at 50% 44%, rgba(255, 232, 142, 0.16), rgba(8, 12, 20, 0.12) 58%, rgba(5, 8, 14, 0.48)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--ball-choice-frame, 0 0), center !important;
  background-size: var(--ball-choice-total, auto) var(--ball-choice-size, 42px), 100% 100% !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(96, 62, 14, 0.58),
    0 8px 16px rgba(0, 0, 0, 0.35),
    0 0 15px rgba(255, 211, 106, 0.2);
}

.ball-choice-orb.is-art::after {
  display: none;
}

.ball-choice strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.ball-choice small,
.ball-choice em {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(205, 216, 231, 0.82);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 800;
}

.ball-choice em {
  color: rgba(159, 176, 196, 0.86);
  font-size: 0.58rem;
}

/* ---- "Caught" mark: a single crystal charm glyph on a wild foe you already own
   (no text - the mark is enough). ---- */
.name-tags { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.owned-tag {
  display: inline-flex;
  align-items: center;
  animation: owned-pop 260ms cubic-bezier(0.2, 1.5, 0.35, 1) both;
}
.owned-ball {
  width: 16px;
  height: 18px;
  flex: 0 0 auto;
  position: relative;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='4' y1='2' x2='20' y2='26' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff2bb'/%3E%3Cstop offset='.45' stop-color='%2378ead7'/%3E%3Cstop offset='1' stop-color='%23d6a53d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2.2 21 9.4 18 25 6 25 3 9.4Z' fill='none' stroke='url(%23g)' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter:
    drop-shadow(0 0 2px rgba(255, 242, 187, 0.8))
    drop-shadow(0 0 6px rgba(120, 234, 215, 0.58));
}
.owned-ball::after {
  display: none;
}
@keyframes owned-pop {
  0% { opacity: 0; transform: translateY(-3px) scale(0.6); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .owned-tag { animation: none; } }

/* ===========================================================================
   Mobile landscape: on-screen joystick + actions, slide-over menu drawer.
   Everything here is gated on `html.is-touch` (set by mobile.js only when the
   PRIMARY pointer is a finger), so desktop — and touch laptops with a mouse —
   are never affected. The map view itself is unchanged: same fixed 640x480
   camera, just scaled to fill the screen (letterboxed to keep 4:3).
   =========================================================================== */
#touchControls,
#menuScrim { display: none; }

html.is-touch #touchControls {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 15;                 /* under .battle (20) and .modal (40) */
  pointer-events: none;        /* empty centre lets taps reach the canvas */
  touch-action: none;
}
/* Hit-testing belongs to the CONTROLS, not the .tc-actions layout box: the
   empty parts of that 152px cluster were swallowing taps meant for whatever
   sits underneath (e.g. the debug panel's Copy Gateway/Object/Erase rows). */
html.is-touch #touchControls .tc-pad,
html.is-touch #touchControls .tc-btn,
html.is-touch #touchControls #rotateHint { pointer-events: auto; }
html.is-touch #touchControls .tc-actions { pointer-events: none; }

/* Joystick — bottom-left, thumb reach, safe-area aware */
html.is-touch #touchControls .tc-pad {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle, rgba(26, 28, 34, 0.96), rgba(0, 0, 0, 0.92) 70%);
  border: 2px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 2px 7px rgba(255, 255, 255, 0.18),
    inset 0 -18px 26px rgba(0, 0, 0, 0.72),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(0, 0, 0, 0.52);
  touch-action: none;
}
html.is-touch #touchControls .tc-pad::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 34deg,
      rgba(255, 255, 255, 0.5) 58deg,
      rgba(210, 225, 255, 0.18) 78deg,
      transparent 116deg 178deg,
      rgba(255, 255, 255, 0.38) 218deg,
      transparent 258deg 360deg
    );
  filter: blur(5px);
  opacity: 0.68;
  animation: touch-cloud-ring 5.8s linear infinite;
  pointer-events: none;
}
html.is-touch #touchControls .tc-pad::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.22), transparent 22%),
    radial-gradient(circle at 66% 72%, rgba(255, 255, 255, 0.09), transparent 30%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
html.is-touch #touchControls .tc-stick {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f9fbff, #434852 46%, #050505 100%);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.34),
    inset 0 -10px 15px rgba(0, 0, 0, 0.72),
    0 5px 14px rgba(0, 0, 0, 0.55);
  transition: transform 60ms ease-out;
}

/* Actions — bottom-right (A = talk/confirm, ☰ = menu) */
html.is-touch #touchControls .tc-actions {
  --tc-a-size: 78px;
  --tc-menu-size: 60px;
  --tc-gap: 14px;
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: calc(var(--tc-a-size) + var(--tc-menu-size) + var(--tc-gap));
  height: calc(var(--tc-a-size) + var(--tc-menu-size) + var(--tc-gap));
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
html.is-touch #touchControls .tc-btn {
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  color: #fff;
  width: 78px;
  height: 78px;
  font-size: 1.25rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: radial-gradient(circle at 36% 28%, #f7f9ff 0 8%, #333842 32%, #050505 100%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    inset 0 -15px 20px rgba(0, 0, 0, 0.76),
    0 0 0 2px rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.52);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.9);
}
html.is-touch #touchControls .tc-menu {
  width: 60px;
  height: 60px;
  font-size: 1.35rem;
  color: #eef2ff;
  background: radial-gradient(circle at 36% 28%, #dfe6ff 0 7%, #242936 36%, #030303 100%);
}
html.is-touch #touchControls .tc-bike {
  position: absolute;
  left: calc(var(--tc-a-size) - 18px);
  bottom: calc(var(--tc-a-size) + var(--tc-gap));
  width: var(--tc-menu-size);
  height: var(--tc-menu-size);
  min-height: 0;
  display: none;
  padding: 0;
  place-items: center;
  font-size: 0.96rem;
  color: #f8fbff;
  background: radial-gradient(circle at 36% 28%, #f7f9ff 0 7%, #2b313c 34%, #030303 100%);
}
html.is-touch #touchControls .tc-actions.has-bike .tc-bike {
  display: grid;
}
html.is-touch #touchControls .tc-bike.is-riding {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.34),
    inset 0 -14px 20px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 0 20px rgba(190, 240, 255, 0.26),
    0 8px 18px rgba(0, 0, 0, 0.58);
}
html.is-touch #touchControls .tc-bike.is-land-build {
  border-color: transparent;
  background:
    linear-gradient(#111722, #030303) padding-box,
    conic-gradient(from 0deg, #ff5a8a, #ffd36a, #5dff9a, #54d9ff, #a66cff, #ff5a8a) border-box;
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.28),
    inset 0 -14px 20px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(118, 230, 255, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.58);
  animation: landBuildPulse 1.15s linear infinite;
  font-size: 0.72rem;
}
@keyframes landBuildPulse {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(150deg) brightness(1.16); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}
html.is-touch #touchControls .tc-btn:active { transform: scale(0.94); }

html.is-touch body.mobile-menu-open #touchControls {
  z-index: 45;
}

html.is-touch body.mobile-menu-open #touchControls .tc-pad,
html.is-touch body.mobile-menu-open #touchControls .tc-a,
html.is-touch body.mobile-menu-open #touchControls .tc-bike {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none !important;
  transition: opacity 120ms ease, transform 120ms ease;
}

html.is-touch body.mobile-menu-open #touchControls .tc-actions {
  opacity: 1;
  transform: none;
  pointer-events: none !important;
}

html.is-touch body.mobile-menu-open #touchControls .tc-stick {
  pointer-events: none !important;
}

html.is-touch body.mobile-menu-open #touchControls .tc-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto !important;
  position: relative;
  z-index: 46;
  border-color: rgba(255, 255, 255, 0.86);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.34),
    inset 0 -14px 20px rgba(0, 0, 0, 0.78),
    0 0 0 2px rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.58);
}

@keyframes touch-cloud-ring {
  to { transform: rotate(360deg); }
}

/* "Rotate your device" — only small screens held portrait */
html.is-touch #touchControls #rotateHint { display: none; }
@media (max-width: 960px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait){
  html.is-touch #touchControls #rotateHint {
    display: grid;
    position: fixed;
    inset: 0;
    z-index: 70;
    place-items: center;
    background: radial-gradient(circle at 50% 38%, #141a28, #06080e);
  }
  html.is-touch #touchControls .tc-pad,
  html.is-touch #touchControls .tc-actions { display: none; }
}
html.is-touch #touchControls .rh-card { text-align: center; color: #eef2ff; padding: 24px; }
html.is-touch #touchControls .rh-phone {
  width: 52px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 11px;
  border: 3px solid #eef2ff;
  animation: rh-tilt 1.9s ease-in-out infinite;
}
@keyframes rh-tilt { 0%, 38% { transform: rotate(0); } 70%, 100% { transform: rotate(-90deg); } }
html.is-touch #touchControls .rh-card p { margin: 0; font-weight: 900; font-size: 1.25rem; }
html.is-touch #touchControls .rh-card small { color: #9fb0d0; }
@media (prefers-reduced-motion: reduce) {
  html.is-touch #touchControls .rh-phone { animation: none; transform: rotate(-90deg); }
  html.is-touch #touchControls .tc-pad::before { animation: none; }
}

/* Small touch screens: map fills the screen, side panel becomes a drawer */
@media (max-width: 960px), (pointer: coarse){
  html.is-touch .shell {
    grid-template-columns: 1fr;
    min-height: 100vh;
    padding: 0;
    gap: 0;
  }
  html.is-touch .playfield {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
  /* Same fixed camera, just scaled — letterboxed so 4:3 is preserved */
  html.is-touch #game {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Keep mobile toasts low and out of the map center. */
  html.is-touch .toast {
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: max-content;
    max-width: min(52vw, 420px);
    min-height: 34px;
    padding: 8px 12px;
    font-size: 0.74rem;
    line-height: 1.18;
    text-align: center;
    justify-content: center;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 12;
  }

  /* The existing .side-panel, re-presented as an organised slide-over.
     All its buttons keep their original handlers — nothing rewired. */
  html.is-touch .side-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    max-height: none;
    width: min(360px, 86vw);
    margin: 0;
    z-index: 16;                 /* still under .battle (20) / .modal (40) */
    overflow-y: auto;
    padding: 18px;
    gap: 14px;
    background: linear-gradient(180deg, rgba(18, 24, 38, 0.98), rgba(9, 12, 20, 0.98));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-left: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.14));
    box-shadow: -16px 0 50px rgba(0, 0, 0, 0.55);
    transform: translateX(100%);
    transition: transform 240ms ease;
  }
  html.is-touch body.mobile-menu-open .side-panel { transform: translateX(0); }
  html.is-touch #menuScrim {
    z-index: 14;
    background: rgba(4, 6, 12, 0.5);
  }
  html.is-touch body.mobile-menu-open #menuScrim {
    display: block;
    position: fixed;
    inset: 0;
  }
  /* Organised landscape menu: actions in a tidy 2-column grid */
  html.is-touch .side-panel .actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  html.is-touch .side-panel .status-grid { grid-template-columns: 1fr 1fr; }

  /* Battle uses the same 4:3 combat stage, with touch controls placed in the
     empty landscape side rails instead of over the monsters. */
  html.is-touch .battle {
    inset: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: #070b13;
  }
  html.is-touch .battle-stage {
    border-radius: 6px;
  }
  html.is-touch .battle-console {
    position: absolute;
    inset: 0;
    z-index: 9;
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    display: block;
    transform: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  html.is-touch #battleLog,
  html.is-touch .encounter-banner {
    display: none !important;
  }
  html.is-touch .battle-actions,
  html.is-touch .move-buttons {
    position: absolute;
    top: 50%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    transform: translateY(-50%);
    pointer-events: auto;
  }
  html.is-touch .battle-actions {
    left: var(--battle-touch-edge);
    width: var(--battle-touch-left-width);
  }
  html.is-touch .battle .battle-actions {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  html.is-touch .battle #battleBugBtn {
    display: grid;
  }
  html.is-touch .move-buttons {
    right: var(--battle-touch-edge);
    width: var(--battle-touch-right-width);
  }
  html.is-touch .battle .move-buttons {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  html.is-touch .battle .move-button,
  html.is-touch .battle .move-button:nth-child(1),
  html.is-touch .battle .move-button:nth-child(2),
  html.is-touch .battle .move-button:nth-child(3),
  html.is-touch .battle .move-button:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
  html.is-touch .battle .move-button:first-child {
    border-top: 0;
  }
  html.is-touch .modal-card,
  html.is-touch .shop-card { max-height: calc(100dvh - 16px); padding: 18px; }
  html.is-touch .move-buttons button,
  html.is-touch .battle-actions button {
    min-height: 46px;
    padding: 8px 9px;
  }
  html.is-touch .move-button::before {
    display: none;
  }
  html.is-touch .battle-actions button::before {
    display: block;
  }
  html.is-touch .move-button {
    gap: 1px;
    border-left-width: 4px;
    padding-left: 9px;
  }
  html.is-touch .move-button span {
    font-size: 0.76rem;
    line-height: 1.12;
  }
  html.is-touch .move-button small {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
  }
  html.is-touch .battle-action-menu {
    left: calc(var(--battle-touch-edge) + var(--battle-touch-left-width) + 6px);
    right: auto;
    top: 50%;
    bottom: auto;
    width: 96px;
    transform: translateY(-50%);
    pointer-events: auto;
  }
}

/* On-screen controls/drawer must never sit over a battle or a modal card.
   (Z-order already keeps them behind; this also disables their hit-testing.) */
body:has(#battle:not(.hidden)) #touchControls,
body:has(#battle:not(.hidden)) #menuScrim,
body:has(#modal:not(.hidden)) #touchControls,
body:has(#modal:not(.hidden)) #menuScrim,
html.is-touch body.speech-wide-art-open #touchControls,
html.is-touch body.speech-wide-art-open #menuScrim { display: none !important; }

body:has(#battle:not(.hidden)) .online-hud,
body:has(#modal:not(.hidden)) .online-hud,
body:has(#battle:not(.hidden)) .online-players-layer,
body:has(#modal:not(.hidden)) .online-players-layer { display: none !important; }

/* Kill the tap-zoom delay / rubber-banding without breaking canvas taps.
   pan-x pan-y (not `manipulation`): panning/scrolling stays native, but the
   browser may never PINCH-ZOOM the page — that zoomed the game past its own
   UI so the menus were unreachable. In-game zoom (tactics board) is JS-driven
   pointer handling and keeps working. */
html.is-touch,
html.is-touch body { overscroll-behavior: none; touch-action: pan-x pan-y; }

/* ---- Clean overworld menu and map-bound panels -------------------------- */
.side-panel {
  padding: 18px;
  align-self: center;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(242, 245, 249, 0.88)),
    var(--clean-world-menu-bg-image) center / cover no-repeat;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  color: #080808;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.side-panel .brand,
.side-panel .status-grid,
.side-panel .party-panel,
.side-panel .dpad,
.side-panel .journal {
  display: none;
}

.side-panel .actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.side-panel .actions::after { display: none; }

.side-panel .menu-toggle,
.side-panel .actions button {
  justify-content: flex-start;
  min-height: 43px;
  padding: 0 3px;
  color: #080808;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 0;
  box-shadow: none;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
}

.side-panel .menu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom-color: rgba(0, 0, 0, 0.22);
}

.side-panel .menu-toggle::after {
  content: "v";
  font-size: 0.82rem;
  line-height: 1;
  transform: translateY(1px);
}

.side-panel .menu-toggle[aria-expanded="false"]::after {
  transform: rotate(-90deg);
}

.side-panel.menu-collapsed .actions {
  display: none;
}

.side-panel .actions button:hover,
.side-panel .actions button:focus-visible,
.side-panel .menu-toggle:hover,
.side-panel .menu-toggle:focus-visible {
  color: #000;
  background: rgba(0, 0, 0, 0.045);
  outline: none;
}

.side-panel .actions button.is-open {
  color: #000;
  background: rgba(0, 0, 0, 0.07);
  box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.42);
}

.side-panel .actions button[hidden] { display: none; }

html.is-touch .side-panel {
  background:
    radial-gradient(420px 240px at 24% 0%, rgba(255, 255, 255, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(12, 12, 14, 0.98), rgba(0, 0, 0, 0.99));
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

html.is-touch .side-panel .actions {
  grid-template-columns: 1fr;
}

html.is-touch .side-panel .menu-toggle,
html.is-touch .side-panel .actions button {
  color: #fff;
  background: linear-gradient(180deg, rgba(20, 21, 24, 0.92), rgba(2, 2, 3, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -9px 14px rgba(0, 0, 0, 0.58),
    0 6px 14px rgba(0, 0, 0, 0.28);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

html.is-touch .side-panel .actions button:hover,
html.is-touch .side-panel .actions button:focus-visible,
html.is-touch .side-panel .menu-toggle:hover,
html.is-touch .side-panel .menu-toggle:focus-visible,
html.is-touch .side-panel .actions button.is-open {
  color: #fff;
  background: linear-gradient(180deg, rgba(42, 44, 49, 0.96), rgba(0, 0, 0, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -9px 14px rgba(0, 0, 0, 0.64),
    0 0 0 2px rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.36);
}

.modal.clean-world-modal {
  color-scheme: light;
  color: #080808;
  animation: none;
}

.modal.world-map-modal {
  display: block;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  /* Desktop world menus only occupy the playfield.  Let pointer and wheel
     input reach the still-visible side rail everywhere else; the actual menu
     card opts back in below. */
  pointer-events: none;
}

.modal.world-map-modal .modal-card,
.modal.world-map-modal .shop-card {
  position: fixed;
  left: var(--map-modal-left);
  top: var(--map-modal-top);
  width: var(--map-modal-width);
  height: var(--map-modal-height);
  max-width: none;
  max-height: none;
  overflow: auto;
  pointer-events: auto;
}

.modal.land-context-modal .land-context-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.land-farm-card {
  align-content: start;
  gap: 8px;
}
.land-farm-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.land-farm-title {
  min-width: 0;
}
.land-farm-title h2 {
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.05;
}
.land-farm-stats {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.land-farm-stats span {
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 999px;
  color: rgba(17, 21, 27, 0.68);
  background: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}
.land-farm-claim {
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  white-space: nowrap;
  font-size: 0.76rem;
}
.land-farm-worker-bar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(17, 21, 27, 0.10);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}
.land-farm-worker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.land-farm-worker-copy span {
  color: rgba(17, 21, 27, 0.56);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.land-farm-worker-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #11151b;
  font-size: 0.82rem;
  line-height: 1.12;
}
.land-farm-worker-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.land-farm-worker-actions button {
  min-width: 0;
  min-height: 32px;
  padding: 5px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}
.land-farm-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.2;
}
.land-mine-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.land-mine-actions button {
  min-width: 0;
  width: 100%;
  padding-inline: 8px;
  white-space: nowrap;
}
.land-mine-shaft-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 12px 14px;
}
.land-mine-shaft-copy {
  min-width: 0;
  padding-right: 2px;
}
.land-mine-shaft-copy strong {
  display: block;
  line-height: 1.12;
}
.land-mine-shaft-copy .monster-meta {
  margin-top: 3px;
  line-height: 1.28;
  overflow-wrap: normal;
  word-break: normal;
}
.land-mine-pick-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0.82;
  font-size: 0.7rem;
}
.land-mine-pick-meta span {
  min-width: 0;
}
.land-mine-pick-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.land-mine-shaft-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.land-mine-shaft-actions button {
  min-width: 0;
  padding-inline: 10px;
  white-space: nowrap;
}
.land-plot-selector-card {
  display: grid;
  gap: 12px;
  color: #101820;
}
.land-plot-selector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  margin-top: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(16, 24, 32, 0.12);
  border-radius: 8px;
}
.land-plot-selector-row[role="button"],
.land-plot-card[role="button"] {
  cursor: pointer;
}
.land-plot-selector-row[role="button"]:hover,
.land-plot-selector-row[role="button"]:focus-visible,
.land-plot-card[role="button"]:hover,
.land-plot-card[role="button"]:focus-visible {
  border-color: rgba(42, 157, 99, 0.62);
  background:
    linear-gradient(180deg, rgba(247, 255, 250, 1), rgba(229, 244, 234, 0.96)),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 2px rgba(42, 157, 99, 0.14);
  outline: none;
}
.land-plot-selector-summary {
  min-width: 0;
}
.land-plot-selector-summary strong {
  display: block;
  color: #101820;
  font-size: 1rem;
  line-height: 1.15;
}
.land-plot-destination-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.land-plot-destination-btn {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px 7px;
  color: #101820;
  text-align: center;
  border: 1px solid rgba(16, 24, 32, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 239, 0.94)),
    #fff;
  box-shadow: inset 0 -2px 0 rgba(16, 24, 32, 0.05);
}
.land-plot-destination-btn strong,
.land-plot-destination-btn small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #101820;
}
.land-plot-destination-btn strong {
  font-size: 0.92rem;
  line-height: 1.05;
}
.land-plot-destination-btn small {
  color: #44515d;
  font-size: 0.68rem;
  line-height: 1.05;
}
.land-plot-destination-btn:hover,
.land-plot-destination-btn:focus-visible {
  border-color: rgba(42, 157, 99, 0.62);
  box-shadow:
    inset 0 -2px 0 rgba(42, 157, 99, 0.18),
    0 0 0 2px rgba(42, 157, 99, 0.16);
  outline: none;
}
@media (max-width: 720px) {
  .land-plot-destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.land-context-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.land-context-tabs button,
.land-seed-choice {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}
.land-context-tabs button.active,
.land-seed-choice.active {
  border-color: rgba(126, 240, 180, 0.76);
  box-shadow: 0 0 0 1px rgba(126, 240, 180, 0.20), 0 0 18px rgba(126, 240, 180, 0.13);
}
.land-seed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.land-seed-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  text-align: left;
}
.land-seed-choice span,
.land-seed-choice strong,
.land-seed-choice small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.land-seed-choice small {
  display: block;
  margin-top: 2px;
  opacity: 0.76;
  font-size: 0.74rem;
}

html.is-touch .modal.world-map-modal.land-field-modal {
  pointer-events: none;
}
html.is-touch .modal.world-map-modal.land-field-modal .land-context-card {
  pointer-events: auto;
  left: max(10px, env(safe-area-inset-left));
  right: auto;
  top: max(10px, env(safe-area-inset-top));
  width: min(320px, 44vw);
  height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  max-height: none;
}
html.is-touch .modal.world-map-modal.land-estate-modal .land-context-card {
  left: max(10px, env(safe-area-inset-left));
  right: auto;
  top: max(10px, env(safe-area-inset-top));
  width: min(640px, calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right))));
  height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  max-height: none;
}
/* Mobile landscape: land cards get compact headers and controls that never
   truncate — every label stays readable at 390px height. */
html.is-touch .land-context-card h2 {
  margin: 0;
  font-size: clamp(1.02rem, 5.2dvh, 1.3rem);
  line-height: 1.1;
}
html.is-touch .land-context-card > p {
  margin: 2px 0;
  font-size: 0.76rem;
  line-height: 1.3;
}
html.is-touch .land-farm-worker-actions button {
  white-space: normal;
  line-height: 1.12;
  min-height: 38px;
}
html.is-touch .land-context-card .dialogue-actions button {
  min-height: 40px;
}

.modal.world-map-modal.land-workshop-modal {
  pointer-events: auto;
}
.modal.world-map-modal.land-workshop-modal .world-modal-close,
.modal.world-map-modal.land-estate-modal .world-modal-close {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 44;
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #080808;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.modal.world-map-modal.land-estate-modal .world-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
}
.modal.world-map-modal.land-workshop-modal .land-workshop-card {
  left: max(10px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
  width: calc(100vw - max(20px, env(safe-area-inset-left) + env(safe-area-inset-right)));
  height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(10px, 1.45vw, 16px);
  overflow: auto;
}
.land-workshop-card h2 {
  margin: 0;
  padding-right: 46px;
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  line-height: 1.1;
}
.land-workshop-titlebar {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-right: 58px;
}
.land-workshop-titlebar h2 {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}
.land-estate-titlebar h2 {
  margin: 0;
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.08;
}
.land-estate-titlebar h2 .monster-meta {
  display: block;
  margin-top: 3px;
}
.land-workshop-titlebar-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.land-workshop-card > p,
.land-workshop-card .monster-meta {
  margin-top: 0;
  font-size: clamp(0.68rem, 0.9vw, 0.8rem);
  line-height: 1.25;
}
.land-workshop-card .shop-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
}
.land-workshop-card .shop-row.gear-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}
.land-workshop-card .shop-row.gear-row > .qty-control {
  justify-self: end;
}
.land-workshop-card .gear-icon-slot {
  width: 38px;
  height: 38px;
}
.land-workshop-card .gear-icon {
  width: 34px;
  height: 34px;
}
.land-workshop-card .land-item-line,
.land-workshop-card .gear-row {
  min-width: 0;
}
.land-workshop-card .gear-row-main strong,
.land-workshop-card .gear-row-main .monster-meta,
.land-workshop-card .land-item-line strong,
.land-workshop-card .land-item-line .monster-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}
.land-gear-forge-entry {
  border-color: rgba(30, 108, 75, 0.22);
  background:
    linear-gradient(180deg, rgba(60, 155, 112, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.76);
}
.land-gear-tier-selector {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.land-gear-tier-button {
  min-width: 0;
  min-height: 43px;
  padding: 6px 7px;
  display: grid;
  align-content: center;
  gap: 2px;
  color: #2a2417;   /* light parchment button: dark ink */
  line-height: 1.05;
  text-align: center;
  border: 1px solid rgba(82, 72, 52, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(230, 226, 214, 0.74)),
    rgba(255, 255, 255, 0.72);
}
.land-gear-tier-button strong,
.land-gear-tier-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.land-gear-tier-button strong {
  font-size: 0.84rem;
  font-weight: 900;
}
.land-gear-tier-button span {
  font-size: 0.64rem;
  opacity: 0.76;
}
.land-gear-tier-button.is-active {
  color: #23190e;
  border-color: rgba(201, 119, 40, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 218, 118, 0.92), rgba(205, 143, 65, 0.72)),
    rgba(255, 239, 176, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(92, 56, 22, 0.14);
}
.land-gear-tier-button.is-locked:not(.is-active) {
  opacity: 0.62;
  filter: saturate(0.76);
}
.land-gear-tier-summary {
  margin: 0;
}
.land-gear-tier-inline {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 6px;
  margin-right: 4px;
  color: #3a260d;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  border: 1px solid rgba(194, 130, 44, 0.34);
  border-radius: 999px;
  background: rgba(255, 224, 141, 0.58);
}
.land-station-progress {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(30, 108, 75, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(236, 241, 238, 0.76)),
    rgba(255, 255, 255, 0.74);
}
.land-station-progress-head {
  min-width: 0;
  display: grid;
  gap: 2px;
  color: #16202a;   /* light card: never the global dark-theme ink */
  font-size: 0.74rem;
  line-height: 1.15;
}
.land-station-progress-head strong,
.land-station-progress-head span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.land-station-progress-head strong {
  color: #16202a;
  font-weight: 950;
}
.land-station-progress-head span {
  color: rgba(22, 32, 42, 0.66);
  text-align: left;
  font-size: 0.68rem;
  font-weight: 800;
}
.land-station-progress-bar {
  height: 8px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(12, 20, 18, 0.12);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.land-station-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(38, 159, 108, 0.92), rgba(198, 151, 53, 0.9));
}
.land-estate-station-progress {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.land-station-progress-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 7px;
}
.land-workshop-card .land-item-icon {
  width: 32px;
  height: 32px;
}
.land-workshop-card .shop-row strong {
  line-height: 1.12;
}
.land-workshop-card .qty-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.land-workshop-card .qty-control button,
.land-workshop-card .dialogue-actions button,
.land-workshop-card .land-workshop-titlebar-actions button,
.land-estate-card .land-workshop-titlebar-actions button,
.land-workshop-card .shop-row > button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.76rem;
}
.land-workshop-card .dialogue-actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin-top: auto;
  padding-top: 7px;
  background: linear-gradient(180deg, transparent, rgba(248, 250, 252, 0.94) 28%);
}
.land-production-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.land-production-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.land-production-main,
.land-production-side,
.land-production-section {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}
.land-production-section-title {
  margin-top: 2px;
  color: rgba(22, 32, 42, 0.62);   /* light card: readable slate, not pale theme ink */
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
}
.land-production-workers {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(40, 62, 48, 0.16);
}
.land-production-empty,
.land-worker-empty {
  min-height: 36px;
  align-items: center;
}
.land-production-empty {
  padding: 8px 10px;
  color: rgba(22, 32, 42, 0.6);
  border: 1px dashed rgba(22, 32, 42, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}
.land-production-card .shop-row > div,
.land-worker-row > div {
  min-width: 0;
}
.land-production-card .monster-meta {
  overflow-wrap: anywhere;
}
.land-production-row-actions {
  min-width: 0;
}
.land-worker-find-actions {
  position: static;
  margin-top: 0;
  padding-top: 0;
  background: none;
}
@media (min-width: 980px) {
  .land-workshop-card {
    align-content: start;
  }
  .land-workshop-card .shop-row {
    grid-template-columns: minmax(0, 1fr) max-content;
  }
}
@media (max-width: 720px), (max-height: 520px) {
  .modal.world-map-modal.land-workshop-modal .land-workshop-card {
    padding: 9px;
    gap: 6px;
  }
  .land-workshop-titlebar {
    gap: 6px;
    margin-right: 54px;
  }
  .land-workshop-card .shop-row {
    padding: 7px 8px;
    gap: 6px;
  }
  .land-workshop-card .shop-row:not(.gear-row) {
    grid-template-columns: minmax(0, 1fr);
  }
  .land-workshop-card .shop-row.gear-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .land-workshop-card .shop-row > .qty-control,
  .land-workshop-card .shop-row > button {
    width: 100%;
    justify-self: stretch;
  }
  /* Full-width, evenly-shared action buttons that stay inside the card and
     never spill or crush the title (matches the landscape card grid below). */
  .land-workshop-card .shop-row:not(.gear-row) > .qty-control {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .land-workshop-card .shop-row:not(.gear-row) > .qty-control button {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .land-workshop-card .shop-row.gear-row > button {
    grid-column: 1 / -1;
  }
  .land-workshop-card .shop-row.gear-row > .qty-control {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .land-workshop-card .shop-row.gear-row > .qty-control button {
    flex: 1 1 0;
  }
  .land-workshop-card .land-item-icon {
    width: 28px;
    height: 28px;
  }
  .land-workshop-card .gear-icon-slot {
    width: 34px;
    height: 34px;
  }
  .land-workshop-card .gear-icon {
    width: 30px;
    height: 30px;
  }
  .land-workshop-card .qty-control button,
  .land-workshop-card .dialogue-actions button,
  .land-workshop-card .land-workshop-titlebar-actions button,
  .land-estate-card .land-workshop-titlebar-actions button,
  .land-workshop-card .shop-row > button {
    min-height: 31px;
    padding: 5px 7px;
    font-size: 0.7rem;
  }
  .land-gear-tier-selector {
    gap: 4px;
  }
  .land-gear-tier-button {
    min-height: 38px;
    padding: 5px 4px;
  }
  .land-gear-tier-button strong {
    font-size: 0.74rem;
  }
  .land-gear-tier-button span {
    font-size: 0.58rem;
  }
}
@media (orientation: landscape) and (max-height: 560px) {
  .modal.world-map-modal.land-workshop-modal .land-workshop-card:not(.land-production-card) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-content: start;
    gap: 6px;
    overflow: auto;
  }
  .land-workshop-card:not(.land-production-card) > h2,
  .land-workshop-card:not(.land-production-card) > .land-workshop-titlebar,
  .land-workshop-card:not(.land-production-card) > p,
  .land-workshop-card:not(.land-production-card) > .monster-meta,
  .land-workshop-card:not(.land-production-card) > .land-gear-tier-selector,
  .land-workshop-card:not(.land-production-card) > .land-gear-tier-summary,
  .land-workshop-card:not(.land-production-card) > .land-gear-forge-entry,
  .land-workshop-card:not(.land-production-card) > .dialogue-actions {
    grid-column: 1 / -1;
  }
  .land-workshop-card:not(.land-production-card) h2 {
    font-size: 0.96rem;
  }
  .land-workshop-card:not(.land-production-card) > p,
  .land-workshop-card:not(.land-production-card) .monster-meta {
    font-size: 0.66rem;
    line-height: 1.16;
  }
  .land-workshop-card:not(.land-production-card) .shop-row {
    margin-top: 0;
    padding: 6px 7px;
  }
  /* Landscape multi-column station cards are narrow (~230px). A row carrying
     BOTH an Enter button and a long "Upgrade to Lv N (cost)" button used to
     balloon the button track, shove Enter/Upgrade outside the card and crush
     the title to one letter per line. Stack every station row into a title
     block + a full-width action row so the buttons always sit inside the
     object's own card. (The gear-forge row keeps its own inline layout.) */
  .land-workshop-card:not(.land-production-card) .shop-row:not(.gear-row) {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 6px;
  }
  .land-workshop-card:not(.land-production-card) .shop-row:not(.gear-row) > .qty-control {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .land-workshop-card:not(.land-production-card) .shop-row:not(.gear-row) > .qty-control button {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .land-workshop-card:not(.land-production-card) .land-gear-forge-entry {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
  .land-workshop-card:not(.land-production-card) .land-gear-forge-entry > .qty-control {
    grid-column: auto;
    width: auto;
    justify-self: end;
    justify-content: flex-end;
  }
  .land-workshop-card:not(.land-production-card) .land-gear-forge-entry > .qty-control button {
    flex: 0 0 auto;
  }
  .land-workshop-card:not(.land-production-card) .land-item-line {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }
  .land-workshop-card:not(.land-production-card) .land-item-icon,
  .land-workshop-card:not(.land-production-card) .gear-icon-slot {
    width: 30px;
    height: 30px;
  }
  .land-workshop-card:not(.land-production-card) .gear-icon {
    width: 27px;
    height: 27px;
  }
  .land-workshop-card:not(.land-production-card) .qty-control {
    gap: 4px;
  }
  .land-workshop-card:not(.land-production-card) .qty-control button,
  .land-workshop-card:not(.land-production-card) .dialogue-actions button,
  .land-workshop-card:not(.land-production-card) .land-workshop-titlebar-actions button,
  .land-estate-card .land-workshop-titlebar-actions button,
  .land-workshop-card:not(.land-production-card) .shop-row > button {
    min-height: 29px;
    padding: 4px 7px;
    font-size: 0.66rem;
    line-height: 1.08;
  }
  .land-workshop-card:not(.land-production-card) .dialogue-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
  }
  .modal.world-map-modal.land-workshop-modal .land-workshop-card:has(> .land-gear-tier-selector) {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    gap: 5px;
    overflow: auto;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) > * {
    flex-shrink: 0;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) > h2 {
    padding-right: 48px;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) > p {
    margin-bottom: 0;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .shop-row.gear-row {
    min-height: 42px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 5px 7px;
    padding: 5px 7px;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .gear-row-main {
    min-width: 0;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .gear-row-main > strong {
    font-size: 0.74rem;
    line-height: 1.05;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .gear-row-main .monster-meta {
    margin-top: 1px;
    overflow-wrap: anywhere;
    font-size: 0.6rem;
    line-height: 1.18;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .land-recipe-chip {
    max-width: 100%;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .land-recipe-chip span {
    min-width: 0;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .shop-row.gear-row > button {
    grid-column: 1 / -1;
    min-height: 28px;
    padding: 4px 7px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .dialogue-actions {
    flex-wrap: wrap;
    margin-top: 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.98) 18%, rgba(248, 250, 252, 0.98));
    box-shadow: 0 -10px 18px rgba(16, 24, 32, 0.08);
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .dialogue-actions button {
    flex: 1 1 136px;
  }
  .modal.world-map-modal.land-workshop-modal .land-production-card {
    grid-template-rows: auto auto auto minmax(0, 1fr);
    overflow: auto;
  }
  .land-production-card h2 {
    font-size: 0.98rem;
  }
  .land-production-card > p {
    margin-bottom: 0;
    font-size: 0.68rem;
    line-height: 1.18;
  }
  .land-production-grid {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .land-production-main,
  .land-production-side {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
  .land-production-card .shop-row {
    padding: 6px 7px;
  }
  .land-production-card .land-item-icon {
    width: 26px;
    height: 26px;
  }
}
@media (orientation: landscape) and (max-height: 560px) and (min-width: 860px) {
  .land-workshop-card:has(> .land-gear-tier-selector) .shop-row.gear-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(118px, max-content);
  }
  .land-workshop-card:has(> .land-gear-tier-selector) .shop-row.gear-row > button {
    grid-column: auto;
    width: auto;
    max-width: 190px;
    justify-self: end;
  }
}
@media (max-width: 640px), (orientation: portrait) {
  .land-production-grid {
    grid-template-columns: 1fr;
  }
}
/* Quantity picker stays a single row; a queued job's "Processing" is a quiet
   status pill, not a dead full-width button. (Placed after the media blocks
   above so it wins their width:100% stretch at equal specificity.) */
.land-workshop-card .land-production-quantity .shop-row:not(.gear-row) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.land-workshop-card .land-production-quantity .shop-row > .qty-control {
  width: auto;
  grid-column: auto;
  justify-self: end;
}
.land-workshop-card .land-production-queue .land-production-row:not(.gear-row) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.land-workshop-card .land-production-queue .land-production-row > button.land-queue-cancel {
  width: auto;
  grid-column: auto;
  justify-self: end;
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 999px;
  opacity: 1;
  color: #7a2f22;
  border: 1px solid rgba(150, 60, 40, 0.4);
  background: rgba(255, 240, 235, 0.8);
  font-size: 0.68rem;
  font-weight: 800;
}
.land-workshop-card .land-production-queue .land-production-row > button.land-queue-cancel:hover,
.land-workshop-card .land-production-queue .land-production-row > button.land-queue-cancel:focus-visible {
  border-color: rgba(150, 60, 40, 0.7);
  background: rgba(255, 231, 224, 0.95);
}
/* Locked rows: let taps pass THROUGH disabled buttons so the row can toast
   the lock reason (mobile has no hover tooltips). */
[data-lock-reason] button:disabled {
  pointer-events: none;
}
[data-lock-reason] {
  cursor: help;
}

.modal.clean-world-modal .modal-card,
.modal.clean-world-modal .shop-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)),
    var(--clean-world-menu-bg-image) center / cover no-repeat,
    #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  color: #080808;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.clean-world-modal .colosseum-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  padding: clamp(14px, 2vw, 22px);
  overflow: auto;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(13, 13, 16, 0.96), rgba(1, 1, 2, 0.98)),
    #050506;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 50px rgba(0, 0, 0, 0.34);
}

.colosseum-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(168, 25, 25, 0.34), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-kicker {
  margin: 0 0 2px;
  color: #ffcf73;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.modal.clean-world-modal .colosseum-card h2,
.modal.clean-world-modal .colosseum-card h3,
.modal.clean-world-modal .colosseum-card p,
.modal.clean-world-modal .colosseum-card small,
.modal.clean-world-modal .colosseum-card strong {
  color: inherit;
}

.modal.clean-world-modal .colosseum-card h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem);
}

.modal.clean-world-modal .colosseum-card p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
}

.colosseum-score {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 2px 10px;
  min-width: 230px;
  padding: 8px 10px;
  text-align: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-score div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.colosseum-score span {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 950;
}

.colosseum-score small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.62rem;
  font-weight: 800;
}

.colosseum-active-run {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 207, 115, 0.12);
  border: 1px solid rgba(255, 207, 115, 0.32);
}

.colosseum-cups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.colosseum-cup,
.colosseum-round {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
}

.colosseum-cup {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 0;
  padding: 10px;
}

.colosseum-cup.is-locked {
  opacity: 0.62;
}

.colosseum-prize {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.colosseum-prize.compact {
  grid-template-columns: 54px minmax(0, 1fr);
  min-width: min(240px, 36vw);
}

.colosseum-prize.victory {
  grid-template-columns: 116px minmax(0, 1fr);
}

.colosseum-prize img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.44));
}

.colosseum-prize h3 {
  margin: 0;
  font-size: 1.05rem;
}

.colosseum-prize strong,
.colosseum-prize small {
  display: block;
}

.colosseum-bracket {
  display: grid;
  gap: 8px;
  min-height: 0;
}

.colosseum-bracket.is-run {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.colosseum-round {
  position: relative;
  padding: 8px 9px;
}

.colosseum-round.is-active {
  border-color: rgba(255, 207, 115, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 207, 115, 0.18);
}

.colosseum-round.is-done {
  border-color: rgba(125, 232, 200, 0.46);
}

.colosseum-round strong,
.colosseum-round small {
  display: block;
}

.colosseum-round small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
}

.colosseum-team {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.colosseum-team span {
  padding: 3px 6px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal.clean-world-modal .colosseum-card button {
  color: #050505;
  background: linear-gradient(180deg, #fff7d6, #e7a62f);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -7px 10px rgba(93, 47, 0, 0.24),
    0 8px 20px rgba(0, 0, 0, 0.24);
}

.modal.clean-world-modal .colosseum-card button:not(:disabled) {
  color: #050505 !important;
  background: linear-gradient(180deg, #fff7d6, #e7a62f) !important;
}

.modal.clean-world-modal .colosseum-card button:disabled {
  color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.colosseum-victory {
  justify-content: center;
}

.colosseum-movie-card .devils-movie-caption::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 36%, rgba(0, 0, 0, 0.9) 100%);
}

.modal.clean-world-modal .colosseum-board-card {
  overflow: hidden;
  padding: clamp(8px, 1.2vw, 12px);
}

.colosseum-board-stage,
.colosseum-victory-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 30px rgba(0, 0, 0, 0.36);
}

.colosseum-board-stage {
  flex: 1 1 auto;
  align-self: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42)),
    var(--colosseum-board-bg) center / 100% 100% no-repeat,
    #08080a;
}

.colosseum-board-vignette,
.colosseum-victory-stage::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 240, 172, 0.18), transparent 24%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.42)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.44));
}

.colosseum-board-route {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 185, 82, 0.36));
}

.colosseum-board-route polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.colosseum-board-route .route-full {
  stroke: rgba(255, 255, 255, 0.26);
  stroke-width: 3;
}

.colosseum-board-route .route-active {
  stroke: #ffce68;
  stroke-width: 5;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: colosseumRouteDraw 900ms ease-out forwards;
}

.colosseum-board-route .route-rival-full {
  stroke: rgba(210, 225, 255, 0.2);
}

.colosseum-board-route .route-rival-active {
  stroke: #8fd4ff;
  animation-delay: 140ms;
}

.colosseum-bracket-route {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(255, 190, 80, 0.22));
}

.colosseum-bracket-route polyline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.colosseum-bracket-route polyline.is-player-line {
  stroke: rgba(255, 210, 97, 0.92);
  stroke-width: 2.8;
}

.colosseum-bracket-box {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  z-index: 3;
  width: var(--slot-w);
  height: var(--slot-h);
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: clamp(3px, 0.48vw, 7px);
  overflow: hidden;
  color: #fff;
  transform: translate(-50%, -50%);
  border-radius: 7px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(16, 17, 22, 0.96), rgba(0, 0, 0, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.32);
  opacity: 0;
  animation: colosseumSlotIn 340ms ease-out forwards;
  animation-delay: var(--slot-delay);
}

.colosseum-bracket-box small,
.colosseum-bracket-box strong,
.colosseum-bracket-box span {
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-bracket-box small {
  color: #ffcf73;
  font-size: clamp(0.36rem, 0.54vw, 0.58rem);
  font-weight: 950;
  text-transform: uppercase;
}

.colosseum-bracket-box strong {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: clamp(0.48rem, 0.74vw, 0.82rem);
}

.colosseum-bracket-seed strong {
  display: block;
}

.colosseum-bracket-box .is-loser,
.colosseum-bracket-box.is-eliminated strong,
.colosseum-victory-entrant.is-eliminated strong {
  color: rgba(255, 255, 255, 0.58);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.colosseum-bracket-box .is-winner,
.colosseum-bracket-box.is-player strong,
.colosseum-bracket-box .is-player-name,
.colosseum-victory-entrant.is-player strong {
  color: #fff2b6;
}

.colosseum-bracket-box.is-player,
.colosseum-bracket-box.is-player-path {
  border-color: rgba(255, 216, 111, 0.82);
}

.colosseum-bracket-box.is-active {
  border-color: rgba(255, 234, 153, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 0 2px rgba(255, 220, 120, 0.16),
    0 0 20px rgba(255, 190, 80, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.32);
}

.colosseum-bracket-box.is-done {
  background:
    linear-gradient(180deg, rgba(13, 42, 35, 0.96), rgba(0, 14, 12, 0.92));
  border-color: rgba(124, 238, 203, 0.62);
}

.colosseum-bracket-box.just-won {
  animation:
    colosseumSlotIn 220ms ease-out forwards,
    colosseumWinPulse 1000ms ease-out 220ms 1;
}

.colosseum-board-slot {
  position: absolute;
  left: var(--slot-x);
  top: var(--slot-y);
  z-index: 3;
  width: var(--slot-w);
  height: var(--slot-h);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: min(0.55vw, 8px);
  align-items: center;
  padding: clamp(4px, 0.62vw, 8px);
  color: #fff;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(15, 16, 20, 0.96), rgba(0, 0, 0, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  opacity: 0;
  animation: colosseumSlotIn 480ms ease-out forwards;
  animation-delay: var(--slot-delay);
}

.colosseum-board-monster {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.42));
  clip-path: inset(0 round 7px);
}

.colosseum-board-monster img {
  width: 124%;
  height: 124%;
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.58));
}

.colosseum-board-slot-copy {
  min-width: 0;
}

.colosseum-board-slot-copy small,
.colosseum-board-slot-copy strong,
.colosseum-board-slot-copy em {
  display: block;
}

.colosseum-board-slot-copy small {
  color: #ffcf73;
  font-size: clamp(0.44rem, 0.56vw, 0.62rem);
  font-weight: 950;
  text-transform: uppercase;
}

.colosseum-board-slot-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.58rem, 0.8vw, 0.92rem);
}

.colosseum-board-slot-copy em {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.48rem, 0.58vw, 0.68rem);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-board-team {
  display: none;
  gap: 3px;
  margin-top: 5px;
  overflow: hidden;
}

.colosseum-board-team span {
  min-width: 0;
  max-width: 54px;
  overflow: hidden;
  padding: 2px 4px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.52rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.colosseum-board-slot.is-active {
  border-color: rgba(255, 220, 120, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 2px rgba(255, 220, 120, 0.18),
    0 0 24px rgba(255, 190, 80, 0.42),
    0 12px 24px rgba(0, 0, 0, 0.34);
}

.colosseum-board-slot.is-done {
  border-color: rgba(124, 238, 203, 0.72);
  background:
    linear-gradient(180deg, rgba(12, 43, 36, 0.96), rgba(0, 14, 12, 0.92));
}

.colosseum-board-slot.is-rival-side {
  border-color: rgba(145, 210, 255, 0.44);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(11, 22, 34, 0.95), rgba(0, 5, 12, 0.91));
}

.colosseum-board-slot.is-rival-side.is-done {
  border-color: rgba(145, 210, 255, 0.78);
  background:
    linear-gradient(180deg, rgba(9, 39, 58, 0.96), rgba(0, 12, 18, 0.92));
}

.colosseum-board-slot.is-hidden-opponent {
  border-color: rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(19, 19, 24, 0.86), rgba(0, 0, 0, 0.84));
}

.colosseum-board-secret {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 226, 148, 0.94);
  font-size: clamp(1.1rem, 2.3vw, 2rem);
  font-weight: 950;
  text-shadow: 0 0 16px rgba(255, 206, 104, 0.5);
}

.colosseum-board-slot.just-won {
  animation:
    colosseumSlotIn 260ms ease-out forwards,
    colosseumWinPulse 1200ms ease-out 260ms 1;
}

.colosseum-board-slot.is-final {
  grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
}

.colosseum-player-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  z-index: 5;
  width: 58px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #050505;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff9db, #ffbf35);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 205, 93, 0.72),
    0 9px 16px rgba(0, 0, 0, 0.38);
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.colosseum-board-card.is-advance .colosseum-player-marker {
  animation: colosseumMarkerAdvance 900ms cubic-bezier(0.19, 0.91, 0.28, 1.08) both;
}

.colosseum-board-summary {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 3%;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.colosseum-board-summary > div:first-child {
  max-width: min(44%, 380px);
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.colosseum-board-summary .colosseum-prize {
  width: min(30%, 250px);
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(255, 207, 115, 0.24);
}

.colosseum-board-actions {
  position: static;
  align-self: flex-end;
  z-index: 8;
  flex: 0 0 auto;
  margin: 0;
}

.colosseum-watch-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 7px;
  max-width: 100%;
  overflow-x: auto;
  padding: 1px 2px 3px;
  scrollbar-width: thin;
}

.modal.clean-world-modal .colosseum-watch-strip button {
  min-height: 34px;
  white-space: nowrap;
}

.colosseum-victory-card {
  overflow: hidden;
}

.modal.colosseum-full-modal {
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 28px);
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal.colosseum-full-modal .colosseum-card {
  position: relative;
  left: auto;
  top: auto;
  width: min(1280px, calc(100vw - clamp(24px, 5vw, 56px)));
  height: min(780px, calc(100dvh - clamp(24px, 5vw, 56px)));
  max-width: none;
  max-height: none;
}

.modal.colosseum-full-modal .world-modal-close {
  z-index: 12;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  font-size: 1.35rem;
}

.colosseum-victory-stage {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.5)),
    var(--colosseum-victory-bg) center / cover no-repeat,
    #08080a;
}

.colosseum-victory-rays {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 0deg at 50% 46%, rgba(255, 230, 143, 0), rgba(255, 230, 143, 0.22), rgba(255, 230, 143, 0), rgba(255, 230, 143, 0.18), rgba(255, 230, 143, 0));
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: colosseumRaySpin 8s linear infinite;
}

/* Boxless prize row: bare item art floating over the podium (the old boxed
 * cards read as UI chrome on top of the arena painting). */
.colosseum-victory-rewards {
  position: relative;
  z-index: 3;
  width: min(58%, 620px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
}

.colosseum-victory-reward {
  position: relative;
  display: grid;
  place-items: center;
  animation:
    colosseumPrizePop 700ms calc(260ms + var(--reward-i, 0) * 150ms) cubic-bezier(0.18, 0.85, 0.25, 1.2) both,
    colosseumPrizeFloat 2400ms calc(1000ms + var(--reward-i, 0) * 340ms) ease-in-out infinite;
}

.colosseum-reward-qty {
  position: absolute;
  right: -6px;
  bottom: -2px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  color: #1c1204;
  font-size: clamp(0.66rem, 1vw, 0.8rem);
  font-style: normal;
  font-weight: 950;
  background: linear-gradient(180deg, #fff3c2, #eeb23a);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 10px rgba(0, 0, 0, 0.45);
  text-shadow: none;
}

.colosseum-reward-icon {
  width: clamp(58px, 7vw, 82px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  font-size: clamp(0.78rem, 1.2vw, 1rem);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.76);
  background: linear-gradient(145deg, #6f7687, #252a34);
  border: 2px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 7px 12px rgba(255, 255, 255, 0.2),
    inset 0 -8px 14px rgba(0, 0, 0, 0.34),
    0 8px 18px rgba(0, 0, 0, 0.38);
}

.colosseum-reward-icon img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.colosseum-victory-reward.is-egg-prize {
  width: clamp(128px, 16vw, 184px);
  min-height: clamp(132px, 17vw, 190px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.colosseum-victory-reward.is-egg-prize .colosseum-reward-icon {
  width: clamp(112px, 14vw, 158px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.colosseum-victory-reward.is-egg-prize .colosseum-reward-icon img {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 18px rgba(255, 242, 168, 0.58))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.48));
}

.colosseum-victory-reward.is-dv-tonic .colosseum-reward-icon {
  border-radius: 8px;
  background: linear-gradient(180deg, #82f3d8, #175d7c);
}

.colosseum-victory-reward.is-max-dv .colosseum-reward-icon {
  border-radius: 8px;
  background: linear-gradient(135deg, #ffffff, #60e4ff 42%, #8d6cff 74%, #1c1d33);
}

/* Prizes with real art become clean floating item tiles (the art itself is
 * a square card, so a soft radius + glow instead of the old double box).
 * Text-token prizes (DV, MX) keep their small gem chip above; egg prizes
 * keep their transparent-art treatment via the more specific rules. */
.colosseum-victory-reward .colosseum-reward-icon:has(img) {
  width: clamp(84px, 10vw, 126px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 22%;
  background: transparent;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.52),
    0 0 26px rgba(255, 218, 120, 0.42);
}

.colosseum-victory-reward .colosseum-reward-icon:has(img) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.colosseum-victory-copy {
  position: absolute;
  left: 4%;
  top: 5%;
  z-index: 4;
  max-width: min(42%, 410px);
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-board-summary h2,
.colosseum-board-summary p,
.colosseum-victory-copy h2,
.colosseum-victory-copy p {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.82);
}

.colosseum-board-summary h2,
.colosseum-victory-copy h2 {
  margin: 0 0 4px;
  line-height: 1.05;
}

.colosseum-board-summary p,
.colosseum-victory-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 700;
}

.colosseum-victory-slots {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 4%;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.colosseum-victory-slots .colosseum-board-slot {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  min-height: 60px;
  min-width: 0;
  grid-template-columns: 40px minmax(0, 1fr);
  transform: none;
}

.colosseum-victory-slots .colosseum-board-monster {
  width: 40px;
  height: 40px;
}

.colosseum-victory-slots .colosseum-board-team {
  display: none;
}

.colosseum-victory-bracket-list {
  left: 4%;
  right: auto;
  top: 25%;
  bottom: auto;
  width: min(38%, 430px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* Only the fighters the player actually beat (one per round). */
.colosseum-victory-beaten {
  width: min(30%, 300px);
  grid-template-columns: minmax(0, 1fr);
}

.colosseum-victory-entrant {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-victory-entrant.is-beaten {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  animation: colosseumVictoryEntrantIn 460ms calc(600ms + var(--entrant-i, 0) * 170ms) ease-out both;
}

.colosseum-victory-beaten-mark {
  align-self: center;
  padding-right: 2px;
  color: #ff8f7a;
  font-size: 0.92rem;
  font-weight: 950;
  text-shadow: 0 0 10px rgba(255, 96, 64, 0.55);
}

.colosseum-victory-portrait {
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 207, 115, 0.3);
}

.colosseum-victory-entrant small,
.colosseum-victory-entrant strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-victory-entrant small {
  color: #ffcf73;
  font-size: 0.54rem;
  font-weight: 950;
  text-transform: uppercase;
}

.colosseum-victory-entrant strong {
  font-size: 0.72rem;
}

.colosseum-streak-card {
  --chest-cine-glow: #ffd06a;
  --chest-cine-spark: #ffe9a0;
  overflow: hidden;
}

.colosseum-streak-card.is-silver {
  --chest-cine-glow: #9adcff;
  --chest-cine-spark: #dbf3ff;
}

.colosseum-streak-card.is-gold {
  --chest-cine-glow: #ffd76a;
  --chest-cine-spark: #fff3b8;
}

/* Single centered cell: the chest owns the whole stage during the opening;
 * the loot copy is an overlay that slides in at the burst while the chest
 * glides aside (no reserved empty column during the cinematic). */
.colosseum-streak-stage {
  --colosseum-streak-frame: min(560px, 58vh, 44vw);
  --chest-cine-rise: min(60vh, 520px);
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.5vw, 28px);
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 241, 172, 0.32), transparent 28%),
    linear-gradient(145deg, rgba(42, 14, 12, 0.96), rgba(5, 5, 7, 0.98));
  border: 1px solid rgba(255, 214, 118, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 42px rgba(0, 0, 0, 0.42);
}

.colosseum-streak-card.is-silver .colosseum-streak-stage {
  background:
    radial-gradient(circle at 50% 24%, rgba(209, 238, 255, 0.34), transparent 28%),
    linear-gradient(145deg, rgba(17, 28, 42, 0.96), rgba(4, 5, 8, 0.98));
  border-color: rgba(197, 232, 255, 0.34);
}

.colosseum-streak-card.is-gold .colosseum-streak-stage {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 247, 187, 0.42), transparent 30%),
    linear-gradient(145deg, rgba(56, 13, 10, 0.97), rgba(4, 4, 6, 0.98));
  border-color: rgba(255, 223, 128, 0.46);
}

.colosseum-streak-rays {
  position: absolute;
  inset: -34%;
  background:
    conic-gradient(from 18deg at 50% 46%, transparent, rgba(255, 233, 149, 0.25), transparent, rgba(255, 255, 255, 0.16), transparent);
  mix-blend-mode: screen;
  opacity: 0.55;
  transition: opacity 700ms ease, filter 700ms ease;
  animation: colosseumRaySpin 9s linear infinite;
}

.colosseum-streak-card.is-burst .colosseum-streak-rays {
  opacity: 1;
  filter: brightness(1.4) saturate(1.15);
}

.colosseum-streak-chest-wrap {
  --chest-cine-size: var(--colosseum-streak-frame, 320px);
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 0;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.colosseum-streak-card.is-burst .colosseum-streak-chest-wrap {
  transform: translateX(-46%);
}

/* The frame stepping itself is JS-driven (animateChestSheet) so it can wait
 * for the grid WebP to decode; CSS only carries entrance/float/burst FX. */
.colosseum-streak-chest-sheet {
  width: var(--colosseum-streak-frame);
  height: var(--colosseum-streak-frame);
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter:
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 26px rgba(255, 213, 110, 0.46));
  transform-origin: 50% 68%;
  opacity: 0;
}

.colosseum-streak-card.is-live .colosseum-streak-chest-sheet {
  opacity: 1;
  animation: colosseumStreakChestOpen 6200ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.colosseum-streak-card.is-settled .colosseum-streak-chest-sheet {
  animation: colosseumStreakChestFloat 2200ms ease-in-out infinite alternate;
}

.colosseum-streak-card.is-silver .colosseum-streak-chest-sheet {
  filter:
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 26px rgba(179, 232, 255, 0.48));
}

.colosseum-streak-card.is-gold .colosseum-streak-chest-sheet {
  filter:
    drop-shadow(0 24px 30px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 34px rgba(255, 218, 110, 0.58));
}

.colosseum-streak-open-flash {
  position: absolute;
  inset: 12%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.88), rgba(255, 220, 112, 0.42) 25%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
}

.colosseum-streak-card.is-burst .colosseum-streak-open-flash {
  animation: colosseumStreakOpenFlash 1050ms cubic-bezier(0.16, 0.82, 0.2, 1) both;
}

.colosseum-streak-copy {
  position: absolute;
  z-index: 4;
  right: clamp(16px, 3vw, 40px);
  top: 50%;
  width: min(46%, 480px);
  min-width: 0;
  max-height: calc(100% - 24px);
  overflow: hidden auto;
  display: grid;
  gap: 12px;
  align-content: center;
  padding: clamp(12px, 1.8vw, 18px);
  border-radius: 10px;
  background: rgba(4, 4, 7, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.36);
  opacity: 0;
  transform: translateY(-50%) translateX(44px);
}

.colosseum-streak-card.is-burst .colosseum-streak-copy {
  animation: colosseumStreakCopyIn 820ms 1550ms ease-out both;
}

.colosseum-streak-copy h2 {
  margin: 0;
  color: #fff !important;
  font-size: clamp(1.55rem, 3.2vw, 2.65rem);
  line-height: 1.02;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.82);
}

.colosseum-streak-card.is-burst .colosseum-streak-copy h2 {
  animation: chestCineTitlePunch 620ms 2050ms cubic-bezier(0.2, 0.9, 0.24, 1.2) both;
}

/* Keep the exit visible before the show starts (slow connections), hide it
 * during the cinematic, then pop it back once the chest has burst open. */
.colosseum-streak-card .dialogue-actions {
  transition: opacity 400ms ease;
}

.colosseum-streak-card.is-live:not(.is-burst) .dialogue-actions {
  opacity: 0;
  pointer-events: none;
}

.colosseum-streak-card.is-burst .dialogue-actions {
  opacity: 1;
  transition-delay: 1400ms;
}

.colosseum-streak-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 800;
}

.colosseum-streak-loot {
  display: grid;
  gap: 9px;
}

.colosseum-streak-loot-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 10px;
  padding: 10px;
  overflow: hidden;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 220, 120, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 224, 142, 0.28);
}

.colosseum-streak-card.is-burst .colosseum-streak-loot-item {
  animation: colosseumStreakLootPop 720ms 1950ms cubic-bezier(0.18, 0.82, 0.2, 1.14) both;
}

.colosseum-streak-card.is-burst .colosseum-streak-loot-item + .colosseum-streak-loot-item {
  animation-delay: 2200ms;
}

.colosseum-streak-loot-item span {
  grid-row: 1 / 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: #150d05;
  font-size: 0.92rem;
  font-weight: 950;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff7cf, #eba62d);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 0 18px rgba(255, 204, 90, 0.34);
}

.colosseum-streak-loot-item.is-tm span {
  background: linear-gradient(180deg, #fffef0, #8cd9ff 46%, #6d5dff);
}

.colosseum-streak-loot-item strong,
.colosseum-streak-loot-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-streak-loot-item strong {
  color: #fff !important;
  font-size: clamp(0.92rem, 1.5vw, 1.14rem);
}

.colosseum-streak-loot-item small {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.72rem;
  font-weight: 800;
}

/* --- Chest reward cinematic FX (colosseum streak + rift boss chests) ------
 * Layer markup comes from chestCineSparksHtml/chestCineEmbersHtml in game.js;
 * the is-live/is-burst/is-settled classes are driven by animateChestSheet so
 * every effect stays in sync with the actual sheet frames even on slow
 * connections. --chest-cine-size is the chest frame edge length. */
.chest-cine-whiteout {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.98), rgba(255, 244, 199, 0.6) 34%, transparent 74%);
  mix-blend-mode: screen;
}

:is(.colosseum-streak-card, .rift-reward-opening-card).is-burst .chest-cine-whiteout {
  animation: chestCineWhiteout 860ms cubic-bezier(0.12, 0.8, 0.24, 1) both;
}

.chest-cine-shockwave {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 5;
  width: calc(var(--chest-cine-size, 320px) * 0.6);
  height: calc(var(--chest-cine-size, 320px) * 0.6);
  margin: calc(var(--chest-cine-size, 320px) * -0.3) 0 0 calc(var(--chest-cine-size, 320px) * -0.3);
  border-radius: 50%;
  border: 3px solid var(--chest-cine-glow, #ffe28a);
  box-shadow:
    0 0 34px var(--chest-cine-glow, #ffe28a),
    inset 0 0 26px var(--chest-cine-glow, #ffe28a);
  opacity: 0;
  pointer-events: none;
}

:is(.colosseum-streak-card, .rift-reward-opening-card).is-burst .chest-cine-shockwave {
  animation: chestCineShockwave 900ms cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

:is(.colosseum-streak-card, .rift-reward-opening-card).is-burst .chest-cine-shockwave--late {
  border-width: 2px;
  animation-duration: 1150ms;
  animation-delay: 180ms;
}

.chest-cine-sparks {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.chest-cine-sparks i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 12px;
  height: 4px;
  margin: -2px 0 0 -6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #fff, var(--chest-cine-spark, #ffe9a0));
  box-shadow: 0 0 10px var(--chest-cine-spark, #ffe9a0);
  opacity: 0;
  transform: rotate(var(--sa, 0deg)) translateX(0) scale(var(--ss, 1));
}

:is(.colosseum-streak-card, .rift-reward-opening-card).is-burst .chest-cine-sparks i {
  animation: chestCineSpark 1150ms var(--st, 0ms) cubic-bezier(0.14, 0.85, 0.3, 1) both;
}

.chest-cine-embers {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.chest-cine-embers i {
  position: absolute;
  left: var(--ex, 50%);
  bottom: -3%;
  width: var(--es, 5px);
  height: var(--es, 5px);
  border-radius: 50%;
  background: var(--chest-cine-spark, #ffe9a0);
  box-shadow: 0 0 12px var(--chest-cine-glow, #ffe28a);
  opacity: 0;
}

:is(.colosseum-streak-card, .rift-reward-opening-card).is-burst .chest-cine-embers i {
  animation: chestCineEmber var(--et, 5200ms) var(--ed, 0ms) linear infinite;
}

@keyframes chestCineWhiteout {
  0% { opacity: 0; transform: scale(0.86); }
  14% { opacity: 0.96; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes chestCineShockwave {
  0% { opacity: 0.9; transform: scale(0.22); }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(2.5); }
}

@keyframes chestCineSpark {
  0% {
    opacity: 0;
    transform: rotate(var(--sa, 0deg)) translateX(calc(var(--chest-cine-size, 320px) * 0.08)) scale(var(--ss, 1));
  }
  10% { opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(var(--sa, 0deg)) translateX(calc(var(--chest-cine-size, 320px) * var(--sd, 0.5))) scale(calc(var(--ss, 1) * 0.4));
  }
}

@keyframes chestCineEmber {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 0.9; }
  62% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(var(--edr, 0px), calc(var(--chest-cine-rise, 420px) * -1)); }
}

@keyframes chestCineTitlePunch {
  0% { transform: scale(0.92); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.colosseum-watch-card {
  overflow: hidden;
}

.colosseum-watch-head {
  padding: 10px 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(168, 25, 25, 0.26), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.colosseum-watch-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 1.8vw, 18px);
  padding: clamp(12px, 2vw, 24px);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 207, 115, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(40, 22, 12, 0.92), rgba(5, 5, 6, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-watch-fighter {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(68px, 10vw, 118px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: clamp(10px, 1.7vw, 16px);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.colosseum-watch-portrait {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 207, 115, 0.24);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.colosseum-watch-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.colosseum-watch-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.colosseum-watch-fighter strong,
.colosseum-watch-fighter small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-watch-fighter strong {
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
}

.colosseum-watch-fighter small {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.colosseum-watch-hp {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.colosseum-watch-hp span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6cf0a0, #ffe374);
  transition: width 360ms ease;
}

.colosseum-watch-versus {
  color: #ffcf73;
  font-size: clamp(1rem, 3vw, 1.8rem);
  font-weight: 950;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.colosseum-watch-stage p {
  grid-column: 1 / -1;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 800;
}

.colosseum-team-select-card {
  overflow: hidden;
}

.colosseum-team-select-head {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 207, 115, 0.2), rgba(255, 255, 255, 0.06)),
    rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.colosseum-team-select-head h2,
.colosseum-team-select-head p {
  margin: 0;
}

.colosseum-team-select-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-content: start;
  gap: 9px;
  overflow: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.colosseum-duo-note {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.colosseum-duo-note.is-ready {
  border-color: rgba(97, 232, 159, 0.52);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px rgba(97, 232, 159, 0.12);
}

.colosseum-duo-note strong,
.colosseum-duo-note span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-duo-note strong {
  flex: 0 0 auto;
  color: #ffcf73;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.colosseum-duo-note span {
  font-size: 0.76rem;
  font-weight: 800;
}

.modal.clean-world-modal .colosseum-card button.colosseum-team-pick,
.modal.clean-world-modal .colosseum-card button.colosseum-team-pick:not(:disabled) {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 3px 9px;
  padding: 9px 9px 13px;
  overflow: hidden;
  color: #fff !important;
  text-align: left;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(31, 33, 40, 0.96), rgba(7, 7, 10, 0.94)) !important;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.3);
}

.modal.clean-world-modal .colosseum-card button.colosseum-team-pick.is-selected,
.modal.clean-world-modal .colosseum-card button.colosseum-team-pick.is-selected:not(:disabled) {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 226, 138, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(55, 43, 18, 0.98), rgba(13, 9, 3, 0.96)) !important;
  border-color: rgba(255, 214, 111, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px rgba(255, 214, 111, 0.16),
    0 10px 20px rgba(0, 0, 0, 0.34);
}

.colosseum-team-pick-art {
  grid-row: 1 / 3;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.44));
}

.colosseum-team-pick-art img {
  width: 116%;
  height: 116%;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.48));
}

.colosseum-team-pick strong,
.colosseum-team-pick small {
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-team-pick strong {
  font-size: 0.86rem;
}

.colosseum-team-pick small {
  color: rgba(255, 226, 157, 0.9);
  font-size: 0.68rem;
  font-weight: 900;
}

.colosseum-vs-card {
  overflow: hidden;
  isolation: isolate;
  background: #07080b;
}

.colosseum-vs-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 225, 146, 0.24), transparent 28%),
    linear-gradient(90deg, rgba(17, 42, 61, 0.98), rgba(14, 8, 7, 0.98) 48%, rgba(67, 28, 18, 0.98)),
    #07080b;
}

.colosseum-vs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 50% 50%, transparent 0 35%, rgba(0, 0, 0, 0.42) 78%);
  background-size: 34px 100%, auto;
  opacity: 0.3;
  mix-blend-mode: screen;
}

.colosseum-vs-card.is-final .colosseum-vs-bg {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.42)),
    var(--final-vs-sheet) 0% 50% / 400% 100% no-repeat,
    #07080b;
  animation: colosseumFinalVsSheet 2800ms steps(3, end) infinite;
}

.colosseum-vs-card.is-final .colosseum-vs-bg::after {
  opacity: 0.18;
}

.colosseum-vs-portrait {
  position: absolute;
  top: 11%;
  bottom: 22%;
  z-index: 1;
  width: min(36%, 410px);
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 38px rgba(0, 0, 0, 0.48);
}

.colosseum-vs-portrait.is-player {
  left: 5%;
  animation: colosseumVsPlayerIn 700ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.colosseum-vs-portrait.is-opponent {
  right: 5%;
  animation: colosseumVsOpponentIn 700ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.colosseum-vs-card.is-duo .colosseum-vs-portrait {
  width: min(25%, 288px);
}

.colosseum-vs-card.is-duo .colosseum-vs-portrait.is-player-main {
  left: 3%;
  top: 10%;
  bottom: 34%;
}

.colosseum-vs-card.is-duo .colosseum-vs-portrait.is-player-ally {
  left: 17%;
  top: 36%;
  bottom: 11%;
  z-index: 2;
}

.colosseum-vs-card.is-duo .colosseum-vs-portrait.is-opponent-main {
  right: 3%;
  top: 10%;
  bottom: 34%;
}

.colosseum-vs-card.is-duo .colosseum-vs-portrait.is-opponent-ally {
  right: 17%;
  top: 36%;
  bottom: 11%;
  z-index: 2;
}

.colosseum-vs-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.colosseum-vs-portrait div {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 0;
  padding: 10px 12px;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.88));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.84);
}

.colosseum-vs-portrait small,
.colosseum-vs-portrait strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.colosseum-vs-portrait small {
  color: #ffcf73;
  font-size: clamp(0.56rem, 1.1vw, 0.78rem);
  font-weight: 950;
  text-transform: uppercase;
}

.colosseum-vs-portrait strong {
  font-size: clamp(1rem, 2.3vw, 1.6rem);
  line-height: 1;
}

.colosseum-vs-mark {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(74px, 11vw, 132px);
  aspect-ratio: 1;
  color: #090909;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 34%, #fff9d2, #ffbf35 62%, #bd5d18);
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 0 26px rgba(255, 194, 69, 0.66),
    0 18px 34px rgba(0, 0, 0, 0.48);
  font-size: clamp(1.2rem, 3.6vw, 2.6rem);
  font-weight: 950;
  animation: colosseumVsMarkPop 720ms cubic-bezier(0.19, 0.91, 0.28, 1.08) 180ms both;
}

.colosseum-vs-teams {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 74px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 18px);
}

.colosseum-vs-teams > div {
  min-width: 0;
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.colosseum-vs-teams > div:last-child {
  justify-content: flex-end;
}

.colosseum-vs-teams span {
  min-width: 0;
  max-width: 148px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  padding: 4px 7px;
  color: #fff;
  font-size: clamp(0.56rem, 1.2vw, 0.72rem);
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.colosseum-vs-teams img {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.modal.clean-world-modal .colosseum-card #colosseumVsSkip {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  width: min(260px, 46%);
  transform: translateX(-50%);
}

@keyframes colosseumRouteDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes colosseumSlotIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px)) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes colosseumWinPulse {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.75); box-shadow: 0 0 34px rgba(125, 238, 203, 0.72), 0 12px 24px rgba(0, 0, 0, 0.34); }
  100% { filter: brightness(1); }
}

@keyframes colosseumMarkerAdvance {
  0% {
    left: var(--marker-from-x);
    top: var(--marker-from-y);
    transform: translate(-50%, -50%) scale(0.88);
  }
  65% {
    left: var(--marker-x);
    top: var(--marker-y);
    transform: translate(-50%, -64%) scale(1.12);
  }
  100% {
    left: var(--marker-x);
    top: var(--marker-y);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes colosseumVsPlayerIn {
  from { opacity: 0; transform: translateX(-34px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes colosseumVsOpponentIn {
  from { opacity: 0; transform: translateX(34px) scale(0.96); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes colosseumVsMarkPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-12deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(3deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}

@keyframes colosseumFinalVsSheet {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes colosseumRaySpin {
  to { transform: rotate(360deg); }
}

@keyframes colosseumEggRise {
  from { opacity: 0; transform: translateY(42px) scale(0.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes colosseumPrizeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes colosseumPrizePop {
  0% { opacity: 0; transform: translateY(28px) scale(0.5); }
  62% { opacity: 1; transform: translateY(-7px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes colosseumVictoryEntrantIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes colosseumStreakChestOpen {
  0% {
    opacity: 0;
    transform: translateY(36px) scale(0.74) rotateX(14deg);
  }
  12% {
    opacity: 1;
    transform: translateY(10px) scale(0.9) rotateX(0deg);
  }
  30% {
    opacity: 1;
    transform: translateY(0) scale(0.98) rotateX(0deg);
  }
  42% {
    transform: translateY(-12px) scale(1.12) rotateX(-2deg);
  }
  58% {
    transform: translateY(-6px) scale(1.06) rotateX(0deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes colosseumStreakChestFloat {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px) scale(1.012); }
}

@keyframes colosseumStreakOpenFlash {
  0% { opacity: 0; transform: scale(0.64); }
  16% { opacity: 0.95; transform: scale(1.04); }
  46% { opacity: 0.24; transform: scale(1.22); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes colosseumStreakCopyIn {
  from { opacity: 0; transform: translateY(-50%) translateX(44px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes colosseumStreakCopyInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes colosseumStreakLootPop {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal.dex-full-modal {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    url("assets/ui/clean-dex-bg.webp?v=clean-ui-2") center / cover no-repeat,
    #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.dex-full-modal .dex-modal {
  width: min(1260px, calc(100vw - 48px));
  height: calc(100dvh - 48px);
  max-width: none;
  max-height: none;
  background: rgba(255, 255, 255, 0.93);
}

.modal.dex-full-modal .dex-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  max-height: calc(100dvh - 240px);
}

.modal.journal-full-modal {
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(241, 245, 249, 0.94), rgba(229, 236, 232, 0.9)),
    #f4f7f5;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.clean-world-modal.journal-full-modal .journal-modal {
  width: min(1280px, calc(100vw - 40px));
  height: calc(100dvh - 40px);
  max-width: none;
  max-height: none;
  padding: clamp(14px, 1.7vw, 22px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 248, 250, 0.9)),
    #ffffff;
}

.modal.party-full-modal {
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.22), transparent 46%),
    url("assets/ui/party-menu-bg.webp?v=party-bg-2") center / cover no-repeat,
    #f7f8fb;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.modal.clean-world-modal.party-full-modal .party-modal {
  display: flex;
  flex-direction: column;
  width: min(1280px, calc(100vw - clamp(20px, 4vw, 48px)));
  height: calc(100dvh - clamp(20px, 4vw, 48px));
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: clamp(16px, 2.2vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)),
    url("assets/ui/party-menu-bg.webp?v=party-bg-2") center / cover no-repeat,
    #ffffff;
}

.modal.party-full-modal .party-modal h2 {
  font-size: clamp(1.7rem, 2.2vw, 2.45rem);
}

.modal.party-full-modal .party-modal > p {
  margin-bottom: 8px;
  font-size: clamp(0.92rem, 1vw, 1.08rem);
}

.modal.clean-world-modal.party-full-modal .party-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  align-content: start;
  gap: clamp(10px, 1.45vw, 18px);
  padding: 2px 2px 8px;
}

.modal.clean-world-modal.party-full-modal .party-item {
  grid-template-columns: clamp(82px, 8vw, 116px) minmax(0, 1fr);
  align-items: center;
  min-height: clamp(142px, 19vh, 188px);
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(12px, 1.55vw, 18px);
}

.modal.clean-world-modal.party-full-modal .party-item img {
  width: clamp(82px, 8vw, 116px);
  height: clamp(82px, 8vw, 116px);
}

.modal.party-full-modal .party-name-row {
  gap: 10px;
}

.modal.party-full-modal .party-item strong {
  font-size: clamp(0.98rem, 1.12vw, 1.18rem);
  line-height: 1.16;
}

.modal.clean-world-modal.party-full-modal .party-modal .monster-meta {
  margin-top: 4px;
  font-size: clamp(0.72rem, 0.86vw, 0.9rem);
  line-height: 1.35;
}

.modal.clean-world-modal.party-full-modal .party-modal .mini-hp {
  height: 9px;
  margin-top: 10px;
}

.modal.clean-world-modal.party-full-modal .party-modal .mini-exp {
  height: 5px;
  margin-top: 5px;
}

.modal.clean-world-modal.party-full-modal .party-modal .party-controls {
  gap: 7px;
  margin-top: 11px;
}

.modal.clean-world-modal.party-full-modal .party-modal .party-controls button {
  min-height: 34px;
  padding: 0 10px;
  font-size: clamp(0.72rem, 0.82vw, 0.84rem);
}

.modal.party-full-modal .party-modal .dialogue-actions {
  flex: 0 0 auto;
  margin-top: 12px;
}

.modal.party-full-modal .party-modal .dialogue-actions button {
  min-width: 132px;
  min-height: 42px;
  font-size: 0.92rem;
}

.modal.clean-world-modal .modal-card h2,
.modal.clean-world-modal .shop-card h2 {
  color: #080808;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0;
}

.modal.clean-world-modal .modal-card p,
.modal.clean-world-modal .shop-card p,
.modal.clean-world-modal .monster-meta,
.modal.clean-world-modal .dex-type,
.modal.clean-world-modal .dex-lore,
.modal.clean-world-modal .atlas-find,
.modal.clean-world-modal .atlas-map-search,
.modal.clean-world-modal .atlas-legend,
.modal.clean-world-modal .atlas-chip-tag,
.modal.clean-world-modal .atlas-chip-mark,
.modal.clean-world-modal .save-screen,
.modal.clean-world-modal .ss-muted,
.modal.clean-world-modal .ss-summary,
.modal.clean-world-modal .empty-note {
  color: #2d2d2d !important;
}

.modal.clean-world-modal .modal-card.colosseum-card,
.modal.clean-world-modal .modal-card.colosseum-card h2,
.modal.clean-world-modal .modal-card.colosseum-card h3,
.modal.clean-world-modal .modal-card.colosseum-card strong {
  color: #fff !important;
  font-family: inherit;
  font-weight: 900;
}

.modal.clean-world-modal .modal-card.colosseum-card p,
.modal.clean-world-modal .modal-card.colosseum-card small,
.modal.clean-world-modal .modal-card.colosseum-card em {
  color: rgba(255, 255, 255, 0.82) !important;
}

.modal.clean-world-modal .modal-card.colosseum-card .colosseum-kicker {
  color: #ffcf73 !important;
  font-family: inherit;
  font-weight: 900;
}

.modal.clean-world-modal button,
.modal.clean-world-modal input,
.modal.clean-world-modal select {
  color: #080808;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

.modal.clean-world-modal button:hover,
.modal.clean-world-modal button:focus-visible {
  background: rgba(0, 0, 0, 0.055);
  outline: none;
}

.modal.clean-world-modal .shop-row,
.modal.clean-world-modal .bag-row,
.modal.clean-world-modal .box-row,
.modal.clean-world-modal .party-item,
.modal.clean-world-modal .save-slot,
.modal.clean-world-modal .dex-card,
.modal.clean-world-modal .atlas-chip,
.modal.clean-world-modal .seal-card,
.modal.clean-world-modal .monster-detail {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(0, 0, 0, 0.13);
  color: #080808;
  box-shadow: none;
}

.modal.clean-world-modal .land-plot-selector-card,
.modal.clean-world-modal .land-plot-menu-card {
  display: grid;
  align-content: start;
  /* Content-sized rows: the plot rows clip their glow (overflow: hidden), which
     zeroes their grid minimum — without this, a 4th+ plot makes the fixed-height
     card COMPRESS the rows instead of scrolling (mobile landscape broke first). */
  grid-auto-rows: max-content;
  gap: 12px;
  height: 100%;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  color: #101820;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 247, 244, 0.92)),
    #ffffff;
  border-color: rgba(16, 24, 32, 0.16);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.modal.clean-world-modal .land-plot-selector-card h2,
.modal.clean-world-modal .land-plot-menu-card h2 {
  margin: 2px 0 0;
  color: #101820;
  font-family: inherit;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
}

.land-plot-selector-hero,
.land-plot-menu-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(42, 157, 99, 0.12), rgba(240, 180, 64, 0.11)),
    rgba(255, 255, 255, 0.72);
}

.land-plot-selector-hero span,
.land-plot-menu-head span,
.land-plot-card-main > span {
  color: #5d6872;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.land-plot-selector-hero > strong,
.land-plot-menu-head > strong {
  min-width: 54px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #101820;
  text-align: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(16, 24, 32, 0.12);
}

.land-plot-stat-strip,
.land-plot-skill-line {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.land-plot-stat-strip span,
.land-plot-skill-line span {
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid rgba(16, 24, 32, 0.11);
  border-radius: 8px;
  color: #24313d;
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}

.land-skill-progress-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.land-skill-progress-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 6px;
  margin: 6px 0 8px;
}

.land-skill-progress {
  --land-skill-accent: #2a9d63;
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 249, 247, 0.78)),
    rgba(255, 255, 255, 0.72);
}

.land-skill-progress--farm {
  --land-skill-accent: #2a9d63;
}

.land-skill-progress--breeding {
  --land-skill-accent: #b56a27;
}

.land-skill-progress--mining {
  --land-skill-accent: #4d7f9d;
}

.land-skill-progress-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.land-skill-progress-head strong,
.land-skill-progress-head span,
.land-skill-progress small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.land-skill-progress-head strong {
  color: #16202a;
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1.12;
}

.land-skill-progress-head span {
  color: rgba(22, 32, 42, 0.68);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
}

.land-skill-progress-bar {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(16, 24, 32, 0.12);
  box-shadow: inset 0 1px 2px rgba(16, 24, 32, 0.12);
}

.land-skill-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--land-skill-accent), color-mix(in srgb, var(--land-skill-accent) 72%, #ffffff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--land-skill-accent) 42%, transparent);
}

.land-skill-progress small {
  color: rgba(22, 32, 42, 0.56);
  font-size: 0.64rem;
  font-weight: 800;
  line-height: 1.1;
}

.land-plot-card-grid {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.land-plot-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.land-plot-selector-row,
.land-plot-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.land-plot-selector-row.is-attention-ready,
.land-plot-card.is-attention-ready {
  border-color: rgba(255, 190, 66, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82) inset,
    0 0 22px rgba(255, 120, 66, 0.22),
    0 0 34px rgba(80, 176, 255, 0.18);
}

.modal.clean-world-modal .land-plot-selector-row.is-attention-ready,
.modal.clean-world-modal .land-plot-card.is-attention-ready {
  border-color: rgba(255, 190, 66, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.82) inset,
    0 0 22px rgba(255, 120, 66, 0.22),
    0 0 34px rgba(80, 176, 255, 0.18);
}

@property --land-plot-rainbow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.land-plot-selector-row.is-attention-ready::before,
.land-plot-card.is-attention-ready::before {
  --land-plot-rainbow-angle: 0deg;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--land-plot-rainbow-angle), #ff4f6d, #ffbf3d, #5ce06f, #39c8ff, #8b5cff, #ff4f6d);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: landPlotRainbowAttention 2.35s linear infinite;
}

.land-plot-selector-row.is-attention-ready > *,
.land-plot-card.is-attention-ready > * {
  position: relative;
  z-index: 1;
}

@keyframes landPlotRainbowAttention {
  to { --land-plot-rainbow-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .land-plot-selector-row.is-attention-ready::before,
  .land-plot-card.is-attention-ready::before {
    animation: none;
  }
}

.land-plot-card-main,
.land-plot-card-main strong {
  min-width: 0;
}

.land-plot-card-main strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #101820;
  font-size: 1rem;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.land-plot-card > button {
  min-width: 96px;
  min-height: 40px;
  border-color: rgba(42, 157, 99, 0.34);
  color: #0d2d1d;
  background: linear-gradient(180deg, rgba(236, 249, 241, 0.98), rgba(214, 239, 223, 0.94));
  font-weight: 900;
}

.land-plot-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.land-plot-dashboard-stats div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(16, 24, 32, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.land-plot-dashboard-stats span {
  display: block;
  color: #5d6872;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.land-plot-dashboard-stats strong {
  display: block;
  margin-top: 5px;
  color: #101820;
  font-size: 1.22rem;
  font-weight: 900;
  line-height: 1;
}

.land-plot-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.modal.clean-world-modal .land-plot-destination-btn,
.modal.clean-world-modal .land-plot-action-grid button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 8px;
  border-color: rgba(16, 24, 32, 0.16);
  border-radius: 8px;
  color: #101820;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 243, 240, 0.96)),
    #ffffff;
}

.modal.clean-world-modal .land-plot-destination-btn:hover,
.modal.clean-world-modal .land-plot-destination-btn:focus-visible,
.modal.clean-world-modal .land-plot-action-grid button:hover,
.modal.clean-world-modal .land-plot-action-grid button:focus-visible {
  border-color: rgba(42, 157, 99, 0.62);
  background:
    linear-gradient(180deg, rgba(247, 255, 250, 1), rgba(225, 243, 231, 0.96)),
    #ffffff;
  box-shadow: 0 0 0 2px rgba(42, 157, 99, 0.16);
}

.modal.clean-world-modal .land-plot-destination-btn strong,
.modal.clean-world-modal .land-plot-action-grid button strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #101820;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.08;
}

.modal.clean-world-modal .land-plot-destination-btn small,
.modal.clean-world-modal .land-plot-action-grid button small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #4d5964;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.08;
}

.modal.clean-world-modal .land-plot-menu-card .dialogue-actions {
  margin-top: 2px;
}

.modal.clean-world-modal .land-plot-menu-card .dialogue-actions button {
  min-width: 118px;
  color: #101820;
  font-weight: 900;
}

@media (max-width: 720px) {
  .land-plot-card,
  .land-plot-selector-hero,
  .land-plot-menu-head {
    grid-template-columns: 1fr;
  }

  .land-plot-card > button {
    width: 100%;
  }

  .land-plot-dashboard-stats,
  .land-plot-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .land-plot-dashboard-stats,
  .land-plot-destination-grid,
  .land-plot-action-grid {
    grid-template-columns: 1fr;
  }
}

.modal.clean-world-modal .save-slot {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.92)),
    var(--save-line-bg, none) center / cover no-repeat,
    rgba(255, 255, 255, 0.76);
}

.modal.clean-world-modal .party-modal {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.86)),
    url("assets/ui/party-menu-bg.webp?v=party-bg-2") center / cover no-repeat,
    #ffffff;
}

.modal.clean-world-modal .party-list {
  margin-top: 12px;
  gap: 7px;
}

.modal.clean-world-modal .party-item {
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 74px;
  gap: 10px;
  padding: 8px 10px;
}

.modal.clean-world-modal .party-item.lead {
  border-color: rgba(0, 0, 0, 0.24);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: inset 3px 0 0 #111;
}

.modal.clean-world-modal .party-item img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.16));
}

.modal.clean-world-modal .party-modal .monster-meta {
  font-size: 0.64rem;
}

.modal.clean-world-modal .party-modal .mini-hp {
  height: 6px;
  margin-top: 5px;
}

.modal.clean-world-modal .party-modal .mini-exp {
  height: 3px;
  margin-top: 3px;
}

.modal.clean-world-modal .party-modal .party-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 5px;
  margin-top: 6px;
}

.modal.clean-world-modal .party-modal .party-controls button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 0.68rem;
}

.modal.clean-world-modal .box-card {
  padding: 18px;
}

.modal.clean-world-modal .box-card--scroll {
  overflow: hidden;
}

.modal.clean-world-modal .box-card > p {
  max-width: 540px;
}

.modal.clean-world-modal .box-card h3 {
  margin: 12px 0 6px;
  font-size: 0.96rem;
}

.modal.clean-world-modal .box-list {
  gap: 7px;
}

.modal.clean-world-modal .box-scroll {
  min-width: 0;
  padding-right: 6px;
}

.modal.clean-world-modal .monster-search {
  color: #2d2d2d;
}

.modal.clean-world-modal .monster-search input {
  color: #080808;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.18);
}

.modal.clean-world-modal .nursery-slot,
.modal.clean-world-modal .nursery-status,
.modal.clean-world-modal .nursery-guide,
.modal.clean-world-modal .nursery-preview {
  color: #080808;
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(0, 0, 0, 0.13);
}

.modal.clean-world-modal .nursery-slot span,
.modal.clean-world-modal .nursery-status span,
.modal.clean-world-modal .nursery-guide li,
.modal.clean-world-modal .nursery-preview > p {
  color: #2d2d2d;
}

.modal.clean-world-modal .nursery-slot .nursery-traits,
.modal.clean-world-modal .nursery-candidate-row .nursery-traits {
  color: #744a00;
}

.modal.clean-world-modal .nursery-dv-preview > div {
  background: rgba(0, 0, 0, 0.06);
}

.modal.clean-world-modal .box-list--monster-box {
  grid-template-columns: repeat(auto-fill, minmax(218px, 258px));
  align-items: start;
  justify-content: start;
  min-width: 0;
  max-width: 100%;
}

.modal.clean-world-modal .box-row--compact {
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 0;
  gap: 6px 8px;
  padding: 8px;
  align-items: center;
}

.modal.clean-world-modal .box-row--compact img {
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.16));
}

.modal.clean-world-modal .box-row--compact .box-info {
  min-width: 0;
}

.modal.clean-world-modal .box-row--compact .box-info strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.modal.clean-world-modal .box-row--compact .monster-meta {
  font-size: 0.64rem;
}

.modal.clean-world-modal .box-row--compact .box-dv-line {
  margin-top: 1px;
}

.modal.clean-world-modal .box-row--compact .mini-hp {
  height: 6px;
  margin-top: 5px;
}

.modal.clean-world-modal .box-row--compact .mini-exp {
  height: 3px;
  margin-top: 3px;
}

.modal.clean-world-modal .box-row--compact .box-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  margin-top: 0;
}

.modal.clean-world-modal .box-row--compact .box-actions button {
  min-height: 26px;
  padding: 0 8px;
  font-size: 0.68rem;
}

.modal.clean-world-modal .box-card--manager {
  gap: 0;
}

.modal.clean-world-modal .box-toolbar {
  margin: 0 0 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.90));
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.modal.clean-world-modal .box-sort,
.modal.clean-world-modal .box-search {
  color: #2d2d2d;
}

.modal.clean-world-modal .box-sort select {
  color: #080808;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.modal.clean-world-modal .box-filter-chip {
  color: #080808;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(0, 0, 0, 0.14);
}

.modal.clean-world-modal .box-filter-chip.active {
  color: #073447;
  background: linear-gradient(180deg, rgba(191, 240, 255, 0.92), rgba(126, 214, 236, 0.78));
  border-color: rgba(25, 119, 148, 0.38);
}

.modal.clean-world-modal .box-filter-chip em {
  color: #21303a;
  background: rgba(0, 0, 0, 0.08);
}

.modal.clean-world-modal .box-result-count {
  color: #4c4c4c;
}

.modal.clean-world-modal .box-row--collection {
  position: relative;
  grid-template-columns: 28px 46px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.modal.clean-world-modal .box-row--collection.box-row--favorite {
  border-color: rgba(211, 154, 37, 0.42);
  background: linear-gradient(180deg, rgba(255, 252, 235, 0.86), rgba(255, 255, 255, 0.78));
}

.modal.clean-world-modal .box-row--collection .box-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.modal.clean-world-modal .box-row--collection .box-info,
.modal.clean-world-modal .box-row--collection .mini-hp,
.modal.clean-world-modal .box-row--collection .mini-exp {
  min-width: 0;
  max-width: 100%;
}

.modal.clean-world-modal .box-row--collection .box-actions button {
  width: 100%;
}

.modal.clean-world-modal .box-fav-btn {
  color: #8b6b16;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.14);
}

.modal.clean-world-modal .box-fav-btn.active {
  color: #4a3200;
  background: linear-gradient(180deg, #fff1a8, #e0b83e);
  border-color: rgba(149, 101, 4, 0.35);
}

.modal.clean-world-modal .box-name-line {
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
}

.modal.clean-world-modal .box-source-pill {
  color: #1c3341;
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.modal.clean-world-modal .box-source-pill--party {
  color: #113858;
  background: rgba(111, 194, 238, 0.24);
}

.modal.clean-world-modal .box-source-pill--reserve {
  color: #355230;
  background: rgba(126, 194, 112, 0.22);
}

.modal.clean-world-modal .box-source-pill--prestigeVault {
  color: #4b3708;
  background: rgba(255, 210, 92, 0.26);
  border-color: rgba(174, 127, 23, 0.2);
}

.box-row--prestigeVault {
  border-color: rgba(255, 214, 94, 0.22);
}

.box-vault-note {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  color: #5b4100;
  background: rgba(255, 219, 111, 0.28);
  border: 1px solid rgba(149, 100, 0, 0.18);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 900;
}

.modal.clean-world-modal .box-seal {
  color: #172331;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.modal.clean-world-modal .box-seal--holo {
  background: linear-gradient(90deg, rgba(156, 223, 255, 0.75), rgba(222, 178, 255, 0.72), rgba(255, 238, 151, 0.76));
}

.modal.clean-world-modal .box-seal--black-holo {
  color: #f7fbff;
  background: linear-gradient(90deg, #080a11, #2d2348, #07080d);
  border-color: rgba(255, 255, 255, 0.16);
}

.modal.clean-world-modal .box-seal--mutation {
  color: #432c00;
  background: linear-gradient(90deg, rgba(255, 223, 122, 0.78), rgba(255, 176, 120, 0.68));
}

.modal.clean-world-modal .box-seals .rarity-seal {
  margin: 0;
  padding: 1px 6px;
  font-size: 0.58rem;
}

.modal.clean-world-modal .box-empty-search {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .modal.clean-world-modal .box-list--monster-box {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

@media (max-width: 520px) {
  .modal.clean-world-modal .box-list--monster-box,
  .modal.world-map-modal .box-list--monster-box {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .modal.clean-world-modal .box-card--manager,
  .modal.world-map-modal .box-card--manager {
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal.clean-world-modal .box-row--collection,
  .modal.world-map-modal .box-row--collection {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  .modal.clean-world-modal .box-row--collection .box-actions,
  .modal.world-map-modal .box-row--collection .box-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.modal.clean-world-modal .monster-detail {
  --detail-bg-left: none;
  --detail-bg-right: none;
  color-scheme: dark;
  padding: 18px;
  color: #f7fbff;
  background-color: #070b11;
  background-image:
    linear-gradient(90deg,
      rgba(5, 8, 13, 0.88) 0%,
      rgba(5, 8, 13, 0.72) 22%,
      rgba(5, 8, 13, 0.96) 50%,
      rgba(5, 8, 13, 0.72) 78%,
      rgba(5, 8, 13, 0.88) 100%),
    radial-gradient(90% 74% at 50% 28%, rgba(255, 255, 255, 0.08), transparent 62%),
    var(--detail-bg-left),
    var(--detail-bg-right);
  background-position: center, center, left center, right center;
  background-size: cover, cover, 60% 100%, 60% 100%;
  background-repeat: no-repeat;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 52px rgba(0, 0, 0, 0.32);
}

.modal.clean-world-modal .monster-detail .detail-head {
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(5, 8, 13, 0.62);
}

.modal.clean-world-modal .monster-detail .detail-head img {
  width: 136px;
  height: 136px;
}

.modal.clean-world-modal .monster-detail h2,
.modal.clean-world-modal .monster-detail h3,
.modal.clean-world-modal .monster-detail strong,
.modal.clean-world-modal .monster-detail .detail-meta-line,
.modal.clean-world-modal .monster-detail .evo-line,
.modal.clean-world-modal .monster-detail .move-tag span,
.modal.clean-world-modal .monster-detail .move-ability,
.modal.clean-world-modal .monster-detail .empty-note,
.modal.clean-world-modal .monster-detail p {
  color: #f7fbff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.66);
}

.modal.clean-world-modal .monster-detail .detail-meta-line,
.modal.clean-world-modal .monster-detail .evo-line,
.modal.clean-world-modal .monster-detail .move-tag span,
.modal.clean-world-modal .monster-detail .move-ability {
  color: rgba(238, 246, 255, 0.82) !important;
}

.modal.clean-world-modal .monster-detail .disobey-line {
  color: #ffb4b4 !important;
}

.modal.clean-world-modal .monster-detail h2 {
  margin-bottom: 6px;
  font-size: clamp(1.24rem, 2.7vw, 1.72rem);
  font-family: inherit;
  font-weight: 900;
}

.modal.clean-world-modal .monster-detail h3 {
  margin: 12px 0 6px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.modal.clean-world-modal .monster-detail .rare-name { color: #7de8c8; }

.modal.clean-world-modal .monster-detail .ultra-name,
.modal.clean-world-modal .monster-detail .legendary-name {
  filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.78));
}

.modal.clean-world-modal .monster-detail .rarity-seal {
  color: #f7fbff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.modal.clean-world-modal .monster-detail .rarity-seal--rare {
  color: #7de8c8;
  border-color: rgba(125, 232, 200, 0.42);
  background: rgba(21, 143, 114, 0.16);
}

.modal.clean-world-modal .monster-detail .rarity-seal--ultra {
  color: #bfc4ff;
  border-color: rgba(164, 172, 255, 0.46);
  background: linear-gradient(90deg, rgba(91, 100, 255, 0.18), rgba(48, 210, 181, 0.12));
}

.modal.clean-world-modal .monster-detail .rarity-seal--legendary {
  color: #ffdf85;
  border-color: rgba(255, 223, 133, 0.5);
  background: linear-gradient(90deg, rgba(255, 200, 86, 0.18), rgba(255, 240, 170, 0.11));
}

.modal.clean-world-modal .monster-detail .stat-chips {
  margin: 8px 0 0;
  gap: 4px;
}

.modal.clean-world-modal .monster-detail .stat-chips span {
  padding: 4px 7px;
  color: rgba(247, 251, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  font-size: 0.66rem;
}

.modal.clean-world-modal .monster-detail .move-grid,
.modal.clean-world-modal .monster-detail .move-list {
  gap: 6px;
}

.modal.clean-world-modal .monster-detail .move-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal.clean-world-modal .monster-detail .move-row {
  gap: 7px;
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(5, 8, 13, 0.6);
}

.modal.clean-world-modal .monster-detail .move-tag {
  min-height: 0;
  padding: 6px 8px;
  border-left-width: 3px;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.045);
}

.modal.clean-world-modal .monster-detail .move-tag.active {
  border-left-color: rgba(255, 216, 116, 0.95);
  background: rgba(255, 216, 116, 0.1);
}

.modal.clean-world-modal .monster-detail .move-tag strong {
  font-size: 0.78rem;
  line-height: 1.16;
}

.modal.clean-world-modal .monster-detail .move-tag span {
  margin-top: 2px;
  font-size: 0.63rem;
  line-height: 1.18;
}

.modal.clean-world-modal .monster-detail .move-ability {
  margin-top: 4px;
  padding-top: 4px;
  border-top-color: rgba(255, 255, 255, 0.09);
  font-size: 0.62rem;
  line-height: 1.24;
}

.modal.clean-world-modal .monster-detail .move-row button,
.modal.clean-world-modal .monster-detail .dialogue-actions button {
  min-height: 28px;
  padding: 0 9px;
  color: #f7fbff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  font-size: 0.67rem;
}

.modal.clean-world-modal .monster-detail .move-row button:hover,
.modal.clean-world-modal .monster-detail .dialogue-actions button:hover,
.modal.clean-world-modal .monster-detail .move-row button:focus-visible,
.modal.clean-world-modal .monster-detail .dialogue-actions button:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}

.modal.world-map-modal .party-modal {
  left: calc(var(--map-modal-left) + var(--map-modal-width) / 2);
  top: calc(var(--map-modal-top) + var(--map-modal-height) / 2);
  width: min(600px, calc(var(--map-modal-width) - 36px));
  height: auto;
  max-height: calc(var(--map-modal-height) - 36px);
  transform: translate(-50%, -50%);
}

@media (max-width: 640px) {
  .modal.party-full-modal {
    padding: 8px;
  }
  .modal.clean-world-modal.party-full-modal .party-modal {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    padding: 12px;
  }
  .modal.clean-world-modal.party-full-modal .party-list {
    gap: 8px;
  }
  .modal.clean-world-modal.party-full-modal .party-item {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 132px;
    gap: 8px;
    padding: 9px;
  }
  .modal.clean-world-modal.party-full-modal .party-item img {
    width: 64px;
    height: 64px;
  }
  .modal.clean-world-modal.party-full-modal .party-modal .party-controls {
    gap: 4px;
  }
  .modal.clean-world-modal.party-full-modal .party-modal .party-controls button {
    min-height: 29px;
    padding: 0 6px;
    font-size: 0.66rem;
  }
  .modal.clean-world-modal .monster-detail {
    padding: 12px;
    background-size: cover, cover, 100% 100%, 100% 100%;
  }

  .modal.clean-world-modal .monster-detail .detail-head {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    padding: 9px;
  }

  .modal.clean-world-modal .monster-detail .detail-head img {
    width: 94px;
    height: 94px;
  }

  .modal.clean-world-modal .monster-detail .detail-head--gatewyrm {
    grid-template-columns: 1fr;
  }

  .modal.clean-world-modal .monster-detail .detail-head--gatewyrm > img {
    width: 100%;
    height: min(44vw, 190px);
    max-height: 190px;
    padding: 2px 8px;
  }

  .modal.clean-world-modal .monster-detail .move-grid,
  .modal.clean-world-modal .monster-detail .move-list {
    grid-template-columns: 1fr;
  }
}

.modal.clean-world-modal .mini-hp,
.modal.clean-world-modal .mini-exp {
  background: rgba(0, 0, 0, 0.12);
}

.modal.clean-world-modal .lead-chip {
  color: #fff;
  background: #111;
}

.modal.clean-world-modal .bag-head {
  color: #5e6674;
}

.modal.clean-world-modal .bag-head::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent);
}

.modal.clean-world-modal .bag-qty,
.modal.clean-world-modal .bag-have,
.modal.clean-world-modal .ss-chip,
.modal.clean-world-modal .slot-sub,
.modal.clean-world-modal .slot-when,
.modal.clean-world-modal .save-empty {
  color: #5e6674;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.14);
}

.modal.clean-world-modal .bag-have.champ {
  color: #111;
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.84);
}

.modal.clean-world-modal .bag-empty {
  border-color: rgba(0, 0, 0, 0.14);
}

.modal.clean-world-modal .dex-line-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 249, 0.9)),
    rgba(255, 255, 255, 0.9);
  border-color: rgba(36, 48, 62, 0.16);
  box-shadow: 0 8px 22px rgba(36, 49, 65, 0.09);
}
.modal.clean-world-modal .dex-line-card.clickable:hover {
  border-color: rgba(36, 48, 62, 0.3);
  box-shadow: 0 12px 28px rgba(36, 49, 65, 0.15);
}
.modal.clean-world-modal .dex-form-frame {
  border-color: rgba(35, 48, 63, 0.12);
  background: rgba(225, 231, 237, 0.54);
}
.modal.clean-world-modal .dex-form-slot.is-caught .dex-form-frame {
  border-color: rgba(48, 150, 96, 0.22);
  background: rgba(226, 243, 235, 0.62);
}
.modal.clean-world-modal .dex-form-name { color: #2b3440; }
.modal.clean-world-modal .dex-form-slot.is-locked .dex-form-name { color: rgba(43, 52, 64, 0.36); }
.modal.clean-world-modal .dex-line-meta { border-top-color: rgba(35, 48, 63, 0.11); }

.modal.clean-world-modal .dex-card.caught,
.modal.clean-world-modal .atlas-chip.here,
.modal.clean-world-modal .save-slot.quick {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 0, 0, 0.22);
}
.modal.clean-world-modal .dex-card.caught {
  background: linear-gradient(180deg, rgba(250, 255, 252, 0.97), rgba(235, 248, 241, 0.92));
  border-color: rgba(48, 150, 96, 0.32);
}
.modal.clean-world-modal .dex-card.partial {
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.97), rgba(250, 244, 226, 0.92));
  border-color: rgba(185, 139, 35, 0.3);
}

.modal.clean-world-modal .dex-card.unknown,
.modal.clean-world-modal .atlas-chip.locked {
  color: rgba(0, 0, 0, 0.42);
}

.modal.clean-world-modal .atlas-region-title {
  color: #222;
  border-bottom-color: rgba(0, 0, 0, 0.14);
}

.modal.clean-world-modal .atlas-chip.locked {
  opacity: 0.72;
}

.modal.clean-world-modal .atlas-chip.dim {
  opacity: 0.46;
}
.modal.clean-world-modal .atlas-chip.locked.has-player,
.modal.clean-world-modal .atlas-chip.dim.has-player,
.modal.clean-world-modal .atlas-chip.player-match {
  opacity: 0.95;
}

.modal.clean-world-modal .atlas-chip-name,
.modal.clean-world-modal .seal-card strong,
.modal.clean-world-modal .dex-card strong,
.modal.clean-world-modal .slot-title {
  color: #080808;
}

.modal.clean-world-modal .atlas-chip.locked .atlas-chip-name,
.modal.clean-world-modal .seal-card.locked strong {
  color: #5e6674;
}

.modal.clean-world-modal .seal-card.locked {
  filter: none;
}

.modal.clean-world-modal .seal-card.locked .seal-medal {
  filter: grayscale(1) brightness(1.12) opacity(0.46);
}

.modal.clean-world-modal .seal-arena,
.modal.clean-world-modal .seal-state {
  color: #5e6674;
}

.modal.clean-world-modal .seal-card.locked .seal-state,
.modal.clean-world-modal .seal-card.locked .seal-arena {
  color: #7a8190;
}

.modal.clean-world-modal .dex-no,
.modal.clean-world-modal .dex-state,
.modal.clean-world-modal .dex-arrow {
  color: rgba(0, 0, 0, 0.44);
}

.modal.clean-world-modal .dex-card.caught .dex-state,
.modal.clean-world-modal .seal-card.earned .seal-state,
.modal.clean-world-modal .atlas-seal,
.modal.clean-world-modal .atlas-leg {
  color: #111;
}
.modal.clean-world-modal .atlas-player-more,
.modal.clean-world-modal .atlas-player-row-copy small,
.modal.clean-world-modal .atlas-player-status {
  color: #5e6674;
}
.modal.clean-world-modal .atlas-player-row {
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(0, 0, 0, 0.13);
  color: #080808;
}
.modal.clean-world-modal .atlas-player-row-copy strong {
  color: #080808;
}

.modal.clean-world-modal .dex-form.locked {
  background: transparent;
  border: 0;
  color: rgba(0, 0, 0, 0.24);
}
.modal.clean-world-modal .dex-form-slot.is-locked .dex-form-mark {
  border-color: rgba(0, 0, 0, 0.25);
  background: rgba(255, 255, 255, 0.7);
}

/* Codex state chip on the light world panel (cards turn white here) */
.modal.clean-world-modal .dex-state {
  background: rgba(8, 8, 8, 0.08);
  color: rgba(8, 8, 8, 0.55);
}
.modal.clean-world-modal .dex-card.caught .dex-state {
  color: #1d6f43;
  background: rgba(48, 150, 96, 0.16);
}
.modal.clean-world-modal .dex-card.partial .dex-state {
  color: #815b08;
  background: rgba(218, 171, 62, 0.2);
}
/* The gold power badge was designed for dark cards - on the white codex
   cards its pale text needs dark ink. */
.modal.clean-world-modal .dex-card .power-badge.power-badge {
  color: #4a3a10;
  border-color: rgba(170, 130, 30, 0.45);
  background: linear-gradient(180deg, rgba(255, 218, 112, 0.4), rgba(240, 190, 80, 0.26));
}
.modal.clean-world-modal .dex-card .power-badge em { color: #8a5d0a; }

.modal.clean-world-modal .save-screen {
  --sv: #111;
  --sv-deep: #111;
  --sv-glow: rgba(0, 0, 0, 0.08);
  --sv-q: #111;
  --sv-q-deep: #111;
  --sv-q-glow: rgba(0, 0, 0, 0.08);
  --sv-line: rgba(0, 0, 0, 0.13);
  color: #080808 !important;
}

.modal.clean-world-modal .save-head,
.modal.clean-world-modal .save-foot {
  border-color: rgba(0, 0, 0, 0.13);
}

.modal.clean-world-modal .save-tabs {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(0, 0, 0, 0.18);
}

.modal.clean-world-modal .save-tab {
  color: #555;
  background: transparent;
  border: 0;
}

.modal.clean-world-modal .save-tab:hover {
  color: #080808;
}

.modal.clean-world-modal .save-tab.active {
  color: #080808;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 -2px 0 #111;
}

.modal.clean-world-modal .save-create input {
  color: #080808;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.18);
}

.modal.clean-world-modal .save-create input::placeholder {
  color: #8791a3;
}

.modal.clean-world-modal .save-slot::before,
.modal.clean-world-modal .save-slot.quick::before {
  background: rgba(0, 0, 0, 0.18);
}

.modal.clean-world-modal .save-slot:hover {
  border-color: rgba(0, 0, 0, 0.24);
  box-shadow: none;
}

.modal.clean-world-modal .save-slot.quick {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.94)),
    var(--save-line-bg, none) center / cover no-repeat,
    rgba(255, 255, 255, 0.86);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

.modal.clean-world-modal .slot-tag,
.modal.clean-world-modal .save-slot.quick .slot-tag {
  color: #080808;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

.modal.clean-world-modal .save-slot.quick .slot-tag:not(.slot-tag--current) {
  color: #080808;
  background: rgba(230, 255, 242, 0.92);
}

.modal.clean-world-modal .ss-btn,
.modal.clean-world-modal .ss-btn.primary,
.modal.clean-world-modal .save-slot.quick .ss-btn.primary,
.modal.clean-world-modal .ss-btn.ghost {
  color: #080808;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: none;
}

.modal.clean-world-modal .ss-btn:hover,
.modal.clean-world-modal .ss-btn.primary:hover,
.modal.clean-world-modal .save-slot.quick .ss-btn.primary:hover,
.modal.clean-world-modal .ss-btn.ghost:hover {
  color: #000;
  background: rgba(0, 0, 0, 0.055);
  filter: none;
  box-shadow: none;
}

.modal.clean-world-modal .ss-btn.danger {
  color: #8a2f26;
  border-color: rgba(138, 47, 38, 0.32);
}

@media (max-width: 640px) {
  .modal.dex-full-modal { padding: 10px; }
  .modal.dex-full-modal .dex-modal {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
  }
  .modal.dex-full-modal .dex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100dvh - 230px);
  }
}

.online-players-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.online-hud {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: Inter, system-ui, sans-serif;
  pointer-events: none;
}

.online-topline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 30px;
  max-width: calc(100vw - 20px);
  padding: 6px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 10px 24px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.online-status-toggle {
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: 900 12px Inter, system-ui, sans-serif;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

#onlineStatusText {
  display: block;
  max-width: 104px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-status-toggle:hover,
.online-status-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.online-hud-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.78);
  border-bottom: 2px solid rgba(255, 255, 255, 0.78);
  transform: rotate(45deg) translateY(-1px);
  transition: transform 160ms ease;
}

.online-hud-expanded .online-hud-chevron {
  transform: rotate(-135deg) translateY(-1px);
}

.online-hud-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.online-hud-collapsed .online-hud-actions {
  display: none;
}

.online-dot {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b9b9b9;
  box-shadow: 0 0 0 3px rgba(185, 185, 185, 0.18);
}

.online-dot[data-online-count]::after {
  content: attr(data-online-count);
  position: absolute;
  top: -10px;
  left: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(164, 255, 214, 0.82);
  border-radius: 999px;
  color: #eafff5;
  background: linear-gradient(180deg, #14784d, #063524);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.72), 0 0 8px rgba(71, 224, 139, 0.32);
  font: 900 8px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.online-hud.is-online .online-dot {
  background: #47e08b;
  box-shadow: 0 0 0 3px rgba(71, 224, 139, 0.2), 0 0 12px rgba(71, 224, 139, 0.65);
}

.online-chat-toggle {
  position: relative;
  color: #fff;
  background: linear-gradient(180deg, #2a2b2f, #020202);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 6px;
  padding: 5px 8px;
  font: 800 11px Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -7px 11px rgba(0, 0, 0, 0.58),
    0 6px 14px rgba(0, 0, 0, 0.24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

.online-gift-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  color: #07110d;
  background: #8affc6;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
  box-shadow: 0 0 12px rgba(138, 255, 198, 0.52);
}

.online-chat-panel {
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100vw - 28px));
  max-height: min(680px, calc(100dvh - 112px));
  padding: 10px;
  overflow: hidden;
  color: #f4fff8;
  background:
    radial-gradient(circle at 16% -12%, rgba(139, 230, 168, 0.2), transparent 38%),
    linear-gradient(160deg, rgba(13, 31, 37, 0.97), rgba(3, 10, 16, 0.985) 68%);
  border: 1px solid rgba(183, 242, 198, 0.34);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -22px 40px rgba(0, 0, 0, 0.24),
    0 22px 46px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(27, 72, 61, 0.4);
  backdrop-filter: blur(14px) saturate(1.12);
  pointer-events: auto;
}

.online-chat-panel.is-preview {
  width: min(300px, calc(100vw - 28px));
  padding: 7px;
  pointer-events: none;
}

.online-chat-panel.is-preview .online-chat-head,
.online-chat-panel.is-preview .online-chat-catalog,
.online-chat-panel.is-preview .online-chat-status {
  display: none;
}

.online-chat-panel.is-preview .online-chat-messages {
  max-height: 128px;
  margin: 0;
}

.online-chat-panel.is-preview .online-flight-follow {
  display: none;
}

.online-chat-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 4px 4px 9px;
  border-bottom: 1px solid rgba(181, 242, 196, 0.14);
}

.online-chat-head-glyph {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  background:
    radial-gradient(circle at 38% 28%, #d8ffd9, #63c58f 42%, #173b39 70%, #07151d);
  border: 1px solid rgba(221, 255, 225, 0.52);
  border-radius: 12px 12px 12px 4px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35), 0 5px 14px rgba(0, 0, 0, 0.36);
}

.online-chat-head-glyph::before,
.online-chat-head-glyph::after,
.online-chat-head-glyph i {
  position: absolute;
  display: block;
  content: "";
  background: #071819;
  border-radius: 50%;
}

.online-chat-head-glyph::before {
  width: 5px;
  height: 5px;
  transform: translate(-8px, -2px);
}

.online-chat-head-glyph::after {
  width: 5px;
  height: 5px;
  transform: translate(8px, -2px);
}

.online-chat-head-glyph i {
  width: 15px;
  height: 4px;
  transform: translateY(8px);
  border-radius: 0 0 8px 8px;
}

.online-chat-head-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.online-chat-head-copy small {
  color: rgba(161, 226, 182, 0.76);
  font: 900 10px/1.1 Inter, system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.online-chat-head-copy strong {
  overflow: hidden;
  color: #f2fff5;
  font: 950 15px/1.15 Georgia, "Times New Roman", serif;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.online-chat-fixed-badge {
  padding: 5px 7px;
  color: #c8f4d5;
  background: rgba(64, 135, 91, 0.18);
  border: 1px solid rgba(136, 224, 164, 0.27);
  border-radius: 999px;
  font: 900 10px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.online-chat-messages {
  flex: 0 1 142px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 142px;
  overflow-y: auto;
  margin: 7px 0 2px;
  padding: 1px 3px 1px 0;
  scrollbar-color: rgba(128, 215, 154, 0.45) transparent;
}

.online-chat-messages:empty {
  display: none;
}

.online-chat-message {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 5px 8px 5px 5px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 30%, rgba(102, 203, 135, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(25, 43, 43, 0.92), rgba(6, 15, 21, 0.94));
  border: 1px solid rgba(183, 240, 196, 0.15);
  border-radius: 11px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 5px 12px rgba(0, 0, 0, 0.2);
}

.online-chat-message.own {
  background:
    radial-gradient(circle at 12% 30%, rgba(211, 239, 166, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(49, 64, 43, 0.94), rgba(9, 20, 20, 0.96));
  border-color: rgba(213, 247, 176, 0.24);
}

.online-chat-message strong {
  overflow: hidden;
  color: rgba(217, 245, 224, 0.78);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92);
}

.online-chat-message-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.online-chat-message-label {
  overflow: hidden;
  color: #f4fff6;
  font: 900 11px/1.15 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-chat-message-phrase {
  overflow: hidden;
  color: rgba(208, 232, 216, 0.65);
  font: 700 11px/1.25 Inter, system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-chat-catalog {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 7px;
  margin-top: 8px;
}

.online-chat-catalog-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: rgba(1, 8, 12, 0.65);
  border: 1px solid rgba(174, 230, 188, 0.13);
  border-radius: 10px;
}

.online-chat-catalog-tabs button {
  min-height: 44px;
  padding: 5px 8px;
  color: rgba(210, 237, 218, 0.66);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 900 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.online-chat-catalog-tabs button.is-active {
  color: #effff3;
  background: linear-gradient(180deg, rgba(76, 143, 99, 0.42), rgba(23, 63, 54, 0.64));
  border-color: rgba(169, 239, 186, 0.28);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 3px 9px rgba(0, 0, 0, 0.2);
}

.online-chat-catalog-tabs button:focus-visible,
.online-chat-emote-button:focus-visible {
  outline: 2px solid rgba(206, 255, 216, 0.86);
  outline-offset: 2px;
}

.online-chat-emote-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  max-height: min(350px, 46dvh);
  min-height: 0;
  padding: 1px 3px 2px 1px;
  overflow-y: auto;
  scrollbar-color: rgba(128, 215, 154, 0.45) transparent;
}

.online-chat-emote-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 96px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 5px 3px 4px;
  overflow: hidden;
  color: #effff3;
  background:
    radial-gradient(circle at 50% 22%, rgba(145, 230, 168, 0.18), transparent 52%),
    linear-gradient(155deg, rgba(28, 61, 60, 0.96), rgba(7, 20, 27, 0.98));
  border: 1px solid rgba(157, 228, 178, 0.22);
  border-radius: 12px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 5px 12px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 120ms ease, filter 120ms ease, transform 120ms ease;
}

.online-chat-emote-button:hover {
  z-index: 1;
  border-color: rgba(207, 255, 216, 0.62);
  filter: brightness(1.09);
  transform: translateY(-2px);
}

.online-chat-emote-button:active {
  filter: brightness(0.96);
  transform: translateY(0) scale(0.97);
}

.online-chat-emote-button-label {
  display: -webkit-box;
  width: 100%;
  min-height: 23px;
  overflow: hidden;
  color: rgba(225, 246, 231, 0.86);
  font: 850 10px/1.15 Inter, system-ui, sans-serif;
  text-align: center;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.online-chat-emote-tier {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  min-width: 20px;
  padding: 3px 4px;
  color: #eaffd9;
  background: rgba(5, 17, 21, 0.84);
  border: 1px solid rgba(204, 255, 191, 0.3);
  border-radius: 999px;
  font: 950 10px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.online-chat-emote-art {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 48% 38%, rgba(137, 215, 158, 0.2), rgba(5, 19, 26, 0.72));
  border: 1px solid rgba(198, 244, 207, 0.18);
  border-radius: 11px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09), 0 3px 8px rgba(0, 0, 0, 0.24);
}

.online-chat-emote-art img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.34));
  transition: opacity 100ms ease;
}

.online-chat-emote-art.is-loaded img {
  opacity: 1;
}

.online-chat-emote-art.is-fallback img {
  opacity: 0;
}

.online-chat-emote-fallback {
  position: absolute;
  inset: 3px;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 2px;
  color: #efffd8;
  background: radial-gradient(circle at 35% 28%, #6f962b, #214c34 68%, #102c2d);
  border-radius: 8px;
  font: 950 10px/1 Inter, system-ui, sans-serif;
  text-align: center;
}

.online-chat-emote-art.is-loaded .online-chat-emote-fallback {
  opacity: 0;
}

.online-chat-message-art {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.online-chat-status,
.online-chat-catalog-unavailable {
  margin: 7px 2px 0;
  color: rgba(194, 224, 204, 0.64);
  font: 750 11px/1.35 Inter, system-ui, sans-serif;
  text-align: center;
}

@media (max-width: 360px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; }
  .online-chat-head { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  .online-chat-fixed-badge { grid-column: 1 / -1; width: 100%; text-align: center; }
  .online-chat-emote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.online-chat-status.is-success {
  color: #a8efbd;
}

.online-chat-status.is-error,
.online-chat-catalog-unavailable {
  color: #ffb7af;
}

.online-flight-notice {
  border-color: rgba(126, 200, 255, 0.38);
}

.online-flight-notice .online-flight-follow {
  justify-self: start;
  margin-top: 2px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #04121d;
  background: linear-gradient(180deg, #8fd8ff, #4fb1ef);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
}

.online-flight-notice .online-flight-follow:hover {
  filter: brightness(1.08);
}

.online-remote-player {
  --remote-frame: 64px;
  --remote-row: 0;
  position: absolute;
  width: var(--remote-frame);
  height: var(--remote-frame);
  left: 0;
  top: 0;
  transition: transform 150ms linear;
  transform-origin: 50% 100%;
  will-change: transform;
  pointer-events: none;
  cursor: default;
}

.online-speech-bubble {
  --online-bubble-shift-x: 0px;
  position: absolute;
  left: 50%;
  /* 1.22 frames keeps the bubble tail clear of the nameplate and hair
     (was 1.12, which let the tail touch the head - bubble probe verified). */
  bottom: calc(var(--remote-frame, 64px) * 1.22);
  z-index: 4;
  max-width: 170px;
  min-width: 36px;
  padding: 7px 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -9px 14px rgba(0, 0, 0, 0.58),
    0 8px 20px rgba(0, 0, 0, 0.36);
  font: 800 11px/1.22 Inter, system-ui, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translateX(calc(-50% + var(--online-bubble-shift-x)));
  pointer-events: none;
  animation: onlineBubblePop 150ms ease-out;
}

.online-speech-bubble::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--online-bubble-shift-x));
  top: 100%;
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.9);
  border-right: 2px solid rgba(255, 255, 255, 0.62);
  border-bottom: 2px solid rgba(255, 255, 255, 0.62);
  transform: translate(-50%, -5px) rotate(45deg);
}

.online-remote-player .online-speech-bubble.is-below {
  top: calc(var(--remote-frame, 64px) * 1.14);
  bottom: auto;
}

.online-speech-bubble.is-below::after {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, 5px) rotate(225deg);
}

.online-speech-bubble.is-emote {
  width: clamp(62px, calc(var(--remote-frame, 64px) * 1.1), 76px);
  min-width: 62px;
  max-width: 76px;
  aspect-ratio: 1;
  padding: 4px;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 28%, rgba(58, 105, 70, 0.98), rgba(5, 20, 27, 0.985));
  border: 1px solid rgba(204, 255, 194, 0.68);
  border-radius: 18px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 10px 25px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(105, 232, 155, 0.2);
}

.online-speech-bubble.is-emote::after {
  width: 9px;
  height: 9px;
  background: rgba(6, 22, 28, 0.98);
  border-color: rgba(204, 255, 194, 0.68);
  border-width: 1px;
}

.online-chat-bubble-art {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

.online-local-speech {
  --online-bubble-translate-y: -100%;
  left: 0;
  top: 0;
  bottom: auto;
  z-index: 11;
}

.online-local-speech.is-below {
  --online-bubble-translate-y: 10px;
}

@keyframes onlineBubblePop {
  from { opacity: 0; }
  to { opacity: 1; }
}

.online-remote-sprite {
  position: absolute;
  inset: 0;
  background-image: url("assets/player/hero-foot-sheet.png?v=movement-sidelegs-1");
  background-repeat: no-repeat;
  background-size: calc(var(--remote-frame) * 8) calc(var(--remote-frame) * 4);
  background-position: 0 calc(var(--remote-frame) * var(--remote-row) * -1);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.28));
  image-rendering: pixelated;
  pointer-events: none;
}

/* Fly travel: remote players lift off / touch down instead of popping in and
 * out. Position lives in the element's inline transform, so the vertical
 * motion animates the sprite child and only opacity animates the element. */
.online-remote-player.is-fly-takeoff {
  animation: onlineFlyOut 760ms ease-in forwards;
  pointer-events: none;
}

.online-remote-player.is-fly-takeoff .online-remote-sprite {
  animation: onlineFlyOutSprite 760ms ease-in forwards;
}

.online-remote-player.is-fly-landing {
  animation: onlineFlyIn 700ms ease-out;
}

.online-remote-player.is-fly-landing .online-remote-sprite {
  animation: onlineFlyInSprite 700ms cubic-bezier(0.22, 0.85, 0.35, 1.1);
}

@keyframes onlineFlyOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes onlineFlyOutSprite {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(calc(var(--remote-frame) * -0.55)) scale(0.8); }
}

@keyframes onlineFlyIn {
  from { opacity: 0; }
  55% { opacity: 1; }
  to { opacity: 1; }
}

@keyframes onlineFlyInSprite {
  from { transform: translateY(calc(var(--remote-frame) * -0.7)) scale(0.85); }
  to { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .online-remote-player.is-fly-takeoff,
  .online-remote-player.is-fly-takeoff .online-remote-sprite,
  .online-remote-player.is-fly-landing,
  .online-remote-player.is-fly-landing .online-remote-sprite {
    animation: none;
  }

  .online-remote-player.is-fly-takeoff {
    opacity: 0;
  }
}

.online-remote-player.prestige-max::before {
  content: "";
  position: absolute;
  inset: calc(var(--remote-frame) * -0.18);
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 238, 0.34) 0%, rgba(255, 218, 74, 0.22) 42%, transparent 72%);
  filter: drop-shadow(0 0 12px rgba(255, 228, 96, 0.5));
  animation: prestigeRemoteAura 920ms ease-in-out infinite alternate;
  pointer-events: none;
}

.online-remote-player.prestige-overcap::before {
  filter:
    drop-shadow(0 0 10px rgba(255, 247, 180, 0.76))
    drop-shadow(0 0 18px rgba(25, 25, 25, 0.58));
}

.online-remote-player.prestige-max::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  top: -10%;
  bottom: 8%;
  z-index: 1;
  background: url("assets/effects/black-holo-eclipse-lightning-sheet.png?v=black-holo-eclipse-bolts-1") 0% 50% / 600% 100% no-repeat;
  filter:
    contrast(1.08)
    brightness(1.14)
    drop-shadow(0 0 2px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 7px rgba(232, 238, 255, 0.42));
  mix-blend-mode: normal;
  opacity: 0.74;
  animation:
    prestigeRemoteLightning 960ms steps(5, end) infinite,
    black-holo-lightning-sheet 840ms steps(5, end) infinite;
  pointer-events: none;
}

.online-remote-prestige {
  position: absolute;
  left: 50%;
  bottom: calc(var(--remote-frame) * 1.06);
  z-index: 5;
  width: var(--remote-prestige-size, 24px);
  height: var(--remote-prestige-size, 24px);
  padding: 0;
  object-fit: contain;
  transform: translateX(-50%);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.68));
  image-rendering: auto;
  pointer-events: none;
}

.online-remote-player.prestige-overcap .online-remote-prestige {
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 1px rgba(255, 226, 96, 0.55));
}

@keyframes prestigeRemoteAura {
  from { opacity: 0.62; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1.04); }
}

@keyframes prestigeRemoteLightning {
  0%, 42%, 100% { opacity: 0.34; transform: rotate(-8deg) scale(0.86); }
  43%, 63% { opacity: 0.78; transform: rotate(8deg) scale(1.02); }
  75% { opacity: 0.52; transform: rotate(-2deg) scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .online-remote-player.prestige-max::before,
  .online-remote-player.prestige-max::after {
    animation: none !important;
  }

  .online-remote-player.prestige-max::before {
    opacity: 0.78;
    transform: none;
  }

  .online-remote-player.prestige-max::after {
    background-position: 0% 50%;
    opacity: 0.32;
    transform: none;
  }
}

.online-remote-player[data-facing="down"] { --remote-row: 0; }
.online-remote-player[data-facing="left"] { --remote-row: 1; }
.online-remote-player[data-facing="right"] { --remote-row: 2; }
.online-remote-player[data-facing="up"] { --remote-row: 3; }

.online-remote-player.is-moving .online-remote-sprite {
  animation: onlineRemoteHeroWalk 360ms steps(8) infinite;
}

@keyframes onlineRemoteHeroWalk {
  from { background-position: 0 calc(var(--remote-frame) * var(--remote-row) * -1); }
  to { background-position: calc(var(--remote-frame) * -8) calc(var(--remote-frame) * var(--remote-row) * -1); }
}

.online-remote-name {
  position: absolute;
  left: 50%;
  bottom: calc(var(--remote-frame) * 0.74);
  max-width: 88px;
  transform: translateX(-50%);
  padding: 2px 6px;
  overflow: hidden;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 7px;
  font: 800 10px Inter, system-ui, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.online-remote-player.is-bot .online-remote-name {
  max-width: 104px;
  border: 1px solid rgba(64, 226, 112, 0.42);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 12px rgba(64, 226, 112, 0.22);
}

.online-remote-player.is-bot .online-remote-name::before {
  content: "BOT";
  display: inline-block;
  margin-right: 4px;
  padding: 1px 3px;
  border-radius: 3px;
  color: #031408;
  background: #40e270;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.4px;
  vertical-align: 1px;
}

.online-remote-battle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--remote-frame) * 0.98);
  width: calc(var(--remote-frame) * 0.39);
  height: calc(var(--remote-frame) * 0.39);
  transform: translateX(-50%) scale(0.8);
  opacity: 0;
  border-radius: 50%;
  background: rgba(12, 12, 14, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 0 12px rgba(255, 255, 255, 0.28);
  transition: opacity 120ms ease, transform 120ms ease;
}

.online-remote-player.has-prestige .online-remote-battle {
  left: calc(50% + var(--remote-frame) * 0.22);
  bottom: calc(var(--remote-frame) * 1.0);
  width: calc(var(--remote-frame) * 0.28);
  height: calc(var(--remote-frame) * 0.28);
}

.online-remote-player.in-battle .online-remote-battle {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: onlineBattlePulse 0.72s ease-in-out infinite;
}

.online-remote-battle::before,
.online-remote-battle::after {
  content: "";
  position: absolute;
  left: 44%;
  top: 16%;
  width: 12%;
  height: 64%;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.48);
}

.online-remote-battle::before {
  transform: rotate(42deg);
}

.online-remote-battle::after {
  transform: rotate(-42deg);
}

.online-remote-battle span::before,
.online-remote-battle span::after {
  content: "";
  position: absolute;
  left: 32%;
  top: 52%;
  width: 36%;
  height: 8%;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.42);
}

.online-remote-battle span::before {
  transform: rotate(42deg);
}

.online-remote-battle span::after {
  transform: rotate(-42deg);
}

@keyframes onlineBattlePulse {
  50% { transform: translateX(-50%) scale(1.08); }
}

.online-trade-overlay,
.online-player-action-overlay,
.online-duel-overlay,
.online-profile-overlay,
.online-gift-overlay,
.online-leaderboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  font-family: Inter, system-ui, sans-serif;
  pointer-events: auto;
}

.online-trade-overlay.hidden,
.online-player-action-overlay.hidden,
.online-duel-overlay.hidden,
.online-profile-overlay.hidden,
.online-gift-overlay.hidden,
.online-leaderboard-overlay.hidden {
  display: none;
}

.online-player-action-card,
.online-duel-card,
.online-profile-card,
.online-gift-card,
.online-leaderboard-card {
  width: min(420px, 100%);
  max-height: min(520px, calc(100dvh - 32px));
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(28, 29, 33, 0.96), rgba(0, 0, 0, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 26px 70px rgba(0, 0, 0, 0.58);
}

.online-duel-card--small {
  width: min(380px, 100%);
}

.online-profile-card {
  width: min(920px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.online-leaderboard-card {
  width: min(980px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.online-gift-card {
  width: min(760px, 100%);
  max-height: min(740px, calc(100dvh - 32px));
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.online-profile-card--small,
.online-leaderboard-card--small {
  width: min(420px, 100%);
  grid-template-rows: auto auto;
}

.online-player-action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.online-group-members {
  min-height: 0;
  display: grid;
  gap: 7px;
}

.online-group-member {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
}

.online-group-member strong,
.online-group-member span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-group-member strong {
  color: #fff;
  font-size: 13px;
}

.online-group-member span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-group-member small {
  flex: 0 0 100%;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-group-member.is-ready {
  background: rgba(73, 210, 119, 0.12);
  border-color: rgba(100, 235, 148, 0.32);
}

.online-group-member.is-ready span {
  color: #9dffb8;
}

.online-group-member.is-pending {
  opacity: 0.74;
}

.online-profile-updated {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.online-player-prestige {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #ffe7a5;
  font-size: 12px;
  font-weight: 900;
}

.online-player-prestige img,
.online-profile-prestige-seal {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
}

.online-profile-prestige-seal {
  margin-left: auto;
  margin-right: 8px;
}

.online-profile-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.online-profile-stat {
  min-width: 0;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
}

.online-profile-stat span {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-profile-stat strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-profile-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(280px, 1.15fr);
  gap: 10px;
}

.online-profile-section--prestige {
  grid-column: 1 / -1;
}

.online-profile-section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
}

.online-profile-section h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1;
}

.online-profile-splits,
.online-profile-dex,
.online-profile-prestige-runs {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

.online-profile-splits {
  display: grid;
  align-content: start;
  gap: 6px;
}

.online-profile-prestige-runs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  align-content: start;
  gap: 6px;
  max-height: 184px;
}

.online-profile-prestige-run {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px;
  color: #fff;
  background: rgba(255, 213, 94, 0.08);
  border: 1px solid rgba(255, 225, 132, 0.18);
  border-radius: 7px;
}

.online-profile-prestige-run img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
}

.online-profile-prestige-run strong,
.online-profile-prestige-run small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-profile-prestige-run strong {
  color: #fff;
  font-size: 12px;
}

.online-profile-prestige-run small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 10px;
}

.online-profile-split,
.online-profile-empty {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 12px;
}

.online-profile-split span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-profile-split strong {
  white-space: nowrap;
}

.online-profile-dex {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  align-content: start;
  gap: 6px;
}

.online-profile-dex-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
}

.online-profile-dex-row.is-seen {
  opacity: 0.68;
}

.online-profile-dex-row img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  image-rendering: auto;
}

.online-profile-dex-row strong,
.online-profile-dex-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-profile-dex-row strong {
  font-size: 12px;
}

.online-profile-dex-row small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

/* ============================================================
   Player Profile v2 - premium trainer dashboard
   Shared by the local Player Profile (game.js) and the online
   player profile overlay (mongame-online.js). Keeps every legacy
   hook (.online-profile-stats/-body/-section/-splits/-dex/
   -prestige-runs, .local-profile-card) and layers a richer look
   on top via the .profile-card-v2 scope.
   ============================================================ */
.profile-card-v2 {
  --profile-accent: 255, 224, 150;
  --profile-journey: 122, 198, 255;
  --profile-collection: 132, 234, 178;
  --profile-prestige: 255, 210, 122;
  --profile-world: 198, 168, 255;
  gap: 12px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--profile-accent), 0.08), transparent 60%),
    linear-gradient(180deg, rgba(28, 29, 33, 0.97), rgba(0, 0, 0, 0.97));
}

/* ---- Hero band ---- */
.profile-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-hero__seal {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 26%, rgba(var(--profile-accent), 0.36), rgba(255, 255, 255, 0.04) 72%),
    rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(var(--profile-accent), 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 26px rgba(0, 0, 0, 0.42);
}

.profile-hero__seal .online-profile-prestige-seal {
  margin: 0;
  width: 60px;
  height: 60px;
}

.profile-hero__seal--empty {
  flex-direction: column;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
}

.profile-hero__seal-label {
  color: #fff;
  font-size: 24px;
  font-weight: 1000;
  line-height: 1;
}

.profile-hero__seal-tag {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.profile-hero__id {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-hero__eyebrow {
  color: rgba(var(--profile-accent), 0.92);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.profile-hero__name {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 30px);
  line-height: 1.06;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.profile-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-tag--prestige {
  background: rgba(var(--profile-prestige), 0.16);
  border-color: rgba(var(--profile-prestige), 0.42);
  color: #ffe9b0;
}

.profile-tag--boost {
  background: rgba(var(--profile-journey), 0.14);
  border-color: rgba(var(--profile-journey), 0.36);
  color: #c5e4ff;
}

.profile-hero__updated {
  margin-top: 2px;
}

.profile-hero__close {
  align-self: start;
}

.profile-card-v2 .world-modal-close,
html.is-touch .profile-card-v2 .world-modal-close {
  display: none;
}

/* ---- Headline progress rail ---- */
.profile-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.profile-rail__metric {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.profile-rail__label {
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-rail__value {
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-rail__sub {
  color: rgba(var(--profile-accent), 0.92);
  font-size: 10px;
  font-weight: 850;
}

/* ---- Grouped stat panels ---- */
.online-profile-stats.profile-stat-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
}

.profile-stat-group {
  --g: 255, 255, 255;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px 10px 11px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid rgba(var(--g), 0.55);
}

.profile-stat-group[data-accent="journey"] { --g: var(--profile-journey); }
.profile-stat-group[data-accent="collection"] { --g: var(--profile-collection); }
.profile-stat-group[data-accent="prestige"] { --g: var(--profile-prestige); }
.profile-stat-group[data-accent="world"] { --g: var(--profile-world); }

.profile-stat-group__title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: rgba(var(--g), 0.96);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.profile-stat-group__title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgba(var(--g), 0.92);
  box-shadow: 0 0 8px rgba(var(--g), 0.6);
}

.profile-stat-group__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 6px;
}

.profile-card-v2 .online-profile-stat {
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.online-profile-stat--wide {
  grid-column: 1 / -1;
}

.profile-card-v2 .online-profile-stat strong {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  white-space: normal;
  font-size: 14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* ---- Body sections ---- */
.profile-card-v2 .online-profile-section {
  padding: 11px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

.profile-card-v2 .online-profile-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.profile-card-v2 .online-profile-section h3::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--profile-accent), 0.95), rgba(255, 168, 88, 0.7));
}

.profile-card-v2 .online-profile-split {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(var(--profile-journey), 0.55);
  border-radius: 7px;
}

.profile-card-v2 .online-profile-split strong {
  color: #cfe6ff;
}

.profile-card-v2 .online-profile-dex-row {
  gap: 8px;
  padding: 7px;
  border-left: 3px solid rgba(var(--profile-collection), 0.55);
}

.profile-card-v2 .online-profile-dex-row.is-seen {
  opacity: 1;
  border-left-color: rgba(255, 255, 255, 0.16);
}

.profile-card-v2 .online-profile-dex-row.is-seen strong {
  color: rgba(255, 255, 255, 0.72);
}

.profile-card-v2 .online-profile-dex-row.is-seen img {
  opacity: 0.62;
  filter: grayscale(0.35);
}

/* ---- Prestige run cards ---- */
.profile-card-v2 .online-profile-prestige-run {
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px;
}

.online-profile-prestige-run__seal {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: rgba(255, 213, 94, 0.1);
  border: 1px solid rgba(255, 225, 132, 0.24);
}

.online-profile-prestige-run__seal img {
  width: 42px;
  height: 42px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42));
}

.online-profile-prestige-run__badge {
  color: #ffe9b0;
  font-size: 15px;
  font-weight: 1000;
}

.online-profile-prestige-run__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.online-profile-prestige-run__title {
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-profile-prestige-run__seal-name {
  color: #ffe9b0;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.online-profile-prestige-run__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.84);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* ---- Footer actions ---- */
.profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- Intentional loading / error state ---- */
.profile-state-card {
  width: min(440px, 100%);
  max-height: none;
  display: grid;
  grid-template-rows: auto;
  gap: 14px;
  align-content: start;
}

.profile-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 18px 14px 6px;
  text-align: center;
}

.profile-state__orb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, rgba(var(--profile-accent), 0.34), rgba(255, 255, 255, 0.04) 70%);
  border: 1px solid rgba(var(--profile-accent), 0.4);
  color: #ffe9b0;
  font-size: 26px;
  font-weight: 1000;
}

.profile-state--error .profile-state__orb {
  background: radial-gradient(circle at 50% 30%, rgba(255, 138, 138, 0.3), rgba(255, 255, 255, 0.04) 70%);
  border-color: rgba(255, 138, 138, 0.42);
  color: #ffc4c4;
}

.profile-state__orb.is-spinning {
  animation: profileOrbPulse 1.4s ease-in-out infinite;
}

@keyframes profileOrbPulse {
  50% { transform: scale(1.08); box-shadow: 0 0 22px rgba(var(--profile-accent), 0.4); }
}

.profile-state__title {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.profile-state__copy {
  margin: 0;
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

/* ---- Responsive: narrow desktop / tablet ---- */
@media (max-width: 820px) {
  .online-profile-stats.profile-stat-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .profile-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Touch: the whole card becomes one clean scroll region with a
   pinned hero so Close never overlaps content and the footer action
   is always reachable. Scoped to .profile-card-v2 so the leaderboard
   card keeps its own grid layout. ---- */
@media (max-width: 960px), (pointer: coarse){
  html.is-touch .online-profile-card.profile-card-v2 {
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
    gap: 9px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  html.is-touch .profile-card-v2 > * {
    flex: 0 0 auto;
  }

  html.is-touch .profile-card-v2 .profile-hero {
    position: sticky;
    top: 0;
    z-index: 4;
    gap: 11px;
    padding-top: 2px;
    padding-bottom: 9px;
    background: linear-gradient(180deg, rgba(20, 21, 24, 0.99) 78%, rgba(20, 21, 24, 0.86));
  }

  html.is-touch .profile-card-v2 .profile-hero__seal {
    width: 60px;
    height: 60px;
    border-radius: 13px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal .online-profile-prestige-seal {
    width: 46px;
    height: 46px;
  }

  html.is-touch .profile-card-v2 .online-profile-stats.profile-stat-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  html.is-touch .profile-card-v2 .profile-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  /* Sections grow with content; the card itself is the only scroller. */
  html.is-touch .profile-card-v2 .online-profile-body {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  html.is-touch .profile-card-v2 .online-profile-splits,
  html.is-touch .profile-card-v2 .online-profile-dex,
  html.is-touch .profile-card-v2 .online-profile-prestige-runs {
    overflow: visible;
    max-height: none;
  }

  html.is-touch .profile-card-v2 .dialogue-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-top: 8px;
    background: linear-gradient(0deg, rgba(16, 17, 20, 0.99) 70%, rgba(16, 17, 20, 0));
  }
}

/* ---- Mobile landscape / Querformat: short, wide touch screens.
   Use the horizontal room (2-up rail, 2-up sections) while keeping the
   single-scroll card + pinned hero, and shrink the hero so the first
   stats are visible without scrolling. ---- */
@media (max-width: 960px) and (max-height: 560px) and (orientation: landscape), (pointer: coarse) and (max-height: 560px) and (orientation: landscape){
  html.is-touch .profile-card-v2 .profile-hero {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal {
    width: 50px;
    height: 50px;
    border-radius: 11px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal .online-profile-prestige-seal {
    width: 38px;
    height: 38px;
  }

  html.is-touch .profile-card-v2 .profile-hero__name {
    font-size: 18px;
  }

  html.is-touch .profile-card-v2 .profile-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html.is-touch .profile-card-v2 .online-profile-stats.profile-stat-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.is-touch .profile-card-v2 .online-profile-body {
    grid-template-columns: 1fr 1fr;
  }

  html.is-touch .profile-card-v2 .online-profile-section--prestige {
    grid-column: 1 / -1;
  }
}

.online-leaderboard-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.online-leaderboard-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.online-leaderboard-section {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.online-leaderboard-section p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
}

.online-leaderboard-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow: auto;
  scrollbar-width: thin;
}

.online-leaderboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
}

.online-leaderboard-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #111;
  background: linear-gradient(180deg, #fff4bc, #d7a12a);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 1000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.34);
}

.online-leaderboard-main {
  min-width: 0;
}

.online-leaderboard-main strong,
.online-leaderboard-main small {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-leaderboard-main strong {
  font-size: 12px;
}

.online-leaderboard-main small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.online-leaderboard-row em {
  color: #ffe9a8;
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  white-space: nowrap;
}

.online-trade-overlay {
  --trade-cyan: 107, 240, 224;
  --trade-blue: 92, 151, 255;
  --trade-violet: 177, 123, 255;
  --trade-gold: 255, 218, 132;
  isolation: isolate;
  overflow: hidden;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 16% 18%, rgba(var(--trade-cyan), 0.14), transparent 38%),
    radial-gradient(circle at 86% 82%, rgba(var(--trade-violet), 0.16), transparent 42%),
    linear-gradient(145deg, rgba(2, 9, 19, 0.9), rgba(3, 5, 13, 0.96));
  -webkit-backdrop-filter: blur(13px) saturate(1.18);
  backdrop-filter: blur(13px) saturate(1.18);
}

.online-trade-overlay::before,
.online-trade-overlay::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(56vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  pointer-events: none;
}

.online-trade-overlay::before {
  left: -22vw;
  top: -34vw;
  box-shadow:
    0 0 0 56px rgba(var(--trade-cyan), 0.018),
    0 0 0 118px rgba(var(--trade-cyan), 0.012);
}

.online-trade-overlay::after {
  right: -26vw;
  bottom: -38vw;
  box-shadow:
    0 0 0 64px rgba(var(--trade-violet), 0.018),
    0 0 0 132px rgba(var(--trade-violet), 0.012);
}

.online-trade-card {
  position: relative;
  isolation: isolate;
  width: min(960px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: 17px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(var(--trade-cyan), 0.055), transparent 28%),
    linear-gradient(300deg, rgba(var(--trade-violet), 0.055), transparent 32%),
    linear-gradient(180deg, rgba(17, 26, 41, 0.98), rgba(4, 8, 17, 0.99));
  border: 1px solid rgba(178, 224, 255, 0.24);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    0 34px 96px rgba(0, 0, 0, 0.66),
    0 0 80px rgba(var(--trade-blue), 0.08);
}

.online-trade-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.15;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.online-trade-card > :not(.online-trade-ambient) {
  position: relative;
  z-index: 2;
}

.online-trade-card--small {
  width: min(420px, 100%);
  grid-template-rows: auto auto auto;
  gap: 15px;
  padding: 20px;
}

.online-trade-ambient,
.online-trade-ambient i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.online-trade-ambient i {
  inset: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(205, 255, 249, 0.9);
  box-shadow: 0 0 14px rgba(var(--trade-cyan), 0.76);
  animation: onlineTradeMote 5.8s ease-in-out infinite;
}

.online-trade-ambient i:nth-child(1) { left: 6%; top: 33%; }
.online-trade-ambient i:nth-child(2) { right: 9%; top: 18%; animation-delay: -2.1s; }
.online-trade-ambient i:nth-child(3) { right: 38%; bottom: 13%; animation-delay: -3.6s; }

.online-trade-head,
.online-trade-offer-head,
.online-trade-picker-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.online-trade-title,
.online-trade-head > div,
.online-trade-picker-head > div {
  min-width: 0;
}

.online-trade-title > span,
.online-trade-head > div > span,
.online-trade-offer-head > div > span,
.online-trade-picker-head > div > span {
  display: block;
  color: rgb(var(--trade-cyan));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.online-bot-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 4px;
  color: #041509;
  background: #40e270;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.5px;
}

.online-trade-head h2,
.online-trade-picker h3 {
  max-width: 100%;
  margin: 4px 0 0;
  overflow: hidden;
  color: #f8fbff;
  font-size: clamp(21px, 3vw, 30px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-head button,
.profile-hero__close,
.online-trade-buttons button,
.online-player-action-buttons button,
.online-trade-monster-actions button,
.online-trade-picker-head button,
.online-trade-pick-row,
.online-gift-tabs button,
.online-gift-head-actions button,
.online-gift-code button,
.online-gift-lookup button,
.online-gift-row-actions button,
.online-gift-address,
.online-trade-primary,
.online-duel-primary {
  min-height: 36px;
  padding: 0 12px;
  color: #f8fbff;
  background: linear-gradient(180deg, rgba(43, 54, 72, 0.96), rgba(10, 15, 25, 0.98));
  border: 1px solid rgba(190, 218, 244, 0.22);
  border-radius: 10px;
  font: 800 12px Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 7px 17px rgba(0, 0, 0, 0.24);
  -webkit-tap-highlight-color: transparent;
}

.online-trade-head button:hover,
.online-trade-buttons button:hover,
.online-trade-monster-actions button:hover,
.online-trade-picker-head button:hover,
.online-trade-pick-row:hover {
  border-color: rgba(var(--trade-cyan), 0.48);
  background: linear-gradient(180deg, rgba(55, 72, 92, 0.98), rgba(12, 20, 31, 0.98));
}

.online-trade-primary,
.online-duel-primary {
  color: #03110f;
  background:
    linear-gradient(180deg, #d9fff9, #72eadb 48%, #2aa899);
  border-color: rgba(210, 255, 249, 0.76);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -8px 16px rgba(0, 78, 72, 0.22),
    0 10px 28px rgba(var(--trade-cyan), 0.18);
}

.online-trade-primary:disabled,
.online-trade-head button:disabled,
.online-player-action-buttons button:disabled,
.online-trade-monster-actions button:disabled,
.online-gift-head-actions button:disabled,
.online-gift-lookup button:disabled,
.online-gift-row-actions button:disabled {
  opacity: 0.44;
  cursor: default;
  filter: grayscale(0.46);
}

.online-trade-copy {
  margin: 0;
  color: rgba(235, 244, 255, 0.8);
  font-size: 14px;
  line-height: 1.5;
}

.online-trade-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.online-trade-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
}

.online-trade-close > span {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}

.online-trade-close > small {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 900;
}

.online-trade-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(280px, 1.28fr);
  align-items: center;
  gap: 12px;
}

.online-trade-steps {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.online-trade-steps > span {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(220, 233, 246, 0.44);
}

.online-trade-steps > span:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 31px;
  right: 7px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.online-trade-steps i {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: currentColor;
  background: #111b2a;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}

.online-trade-steps b {
  position: relative;
  z-index: 1;
  padding-right: 7px;
  overflow: hidden;
  background: #111b2a;
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.online-trade-steps .is-active {
  color: rgb(var(--trade-cyan));
}

.online-trade-steps .is-active i {
  color: #03110f;
  background: rgb(var(--trade-cyan));
  border-color: rgba(224, 255, 251, 0.84);
  box-shadow: 0 0 18px rgba(var(--trade-cyan), 0.34);
}

.online-trade-steps .is-complete {
  color: rgba(196, 255, 239, 0.78);
}

.online-trade-steps .is-complete i {
  color: #d9fff7;
  background: rgba(var(--trade-cyan), 0.18);
  border-color: rgba(var(--trade-cyan), 0.42);
}

.online-trade-status {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  color: rgba(235, 244, 255, 0.83);
  background: rgba(104, 157, 220, 0.075);
  border: 1px solid rgba(143, 193, 239, 0.13);
  border-radius: 11px;
  font-size: 11px;
  line-height: 1.3;
}

.online-trade-status > i {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--trade-cyan));
  box-shadow: 0 0 12px rgba(var(--trade-cyan), 0.68);
  animation: onlineTradeStatusPulse 1.8s ease-in-out infinite;
}

.online-trade-status--muted {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
}

.online-trade-grid {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--trade-cyan), 0.34) transparent;
}

.online-trade-offer {
  position: relative;
  min-width: 0;
  min-height: 220px;
  display: grid;
  grid-template-rows: auto minmax(112px, 1fr) auto;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--trade-cyan), 0.075), transparent 44%),
    linear-gradient(160deg, rgba(23, 38, 52, 0.9), rgba(8, 14, 24, 0.96));
  border: 1px solid rgba(var(--trade-cyan), 0.22);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 16px 36px rgba(0, 0, 0, 0.24);
}

.online-trade-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.03) 44%, transparent 68%);
}

.online-trade-offer--their {
  background:
    radial-gradient(circle at 82% 20%, rgba(var(--trade-violet), 0.095), transparent 44%),
    linear-gradient(200deg, rgba(31, 27, 49, 0.91), rgba(10, 12, 24, 0.97));
  border-color: rgba(var(--trade-violet), 0.24);
}

.online-trade-offer.is-ready {
  border-color: rgba(var(--trade-cyan), 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(var(--trade-cyan), 0.08),
    0 16px 42px rgba(var(--trade-cyan), 0.08);
}

.online-trade-offer.is-confirmed {
  border-color: rgba(var(--trade-gold), 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 0 1px rgba(var(--trade-gold), 0.11),
    0 18px 48px rgba(var(--trade-gold), 0.1);
}

.online-trade-offer-head > div {
  min-width: 0;
}

.online-trade-offer-head strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: rgba(230, 240, 250, 0.64) !important;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 9px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.is-ready .online-trade-state {
  color: rgb(var(--trade-cyan)) !important;
  background: rgba(var(--trade-cyan), 0.09);
  border-color: rgba(var(--trade-cyan), 0.22);
}

.is-confirmed .online-trade-state {
  color: rgb(var(--trade-gold)) !important;
  background: rgba(var(--trade-gold), 0.09);
  border-color: rgba(var(--trade-gold), 0.25);
}

.online-trade-monster {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(100px, 0.42fr) minmax(0, 0.58fr);
  align-items: center;
  gap: 11px;
  padding: 11px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 50%, rgba(var(--trade-blue), 0.16), transparent 38%),
    rgba(3, 9, 17, 0.56);
  border: 1px solid rgba(195, 225, 255, 0.1);
  border-radius: 14px;
}

.online-trade-monster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, 0.045) 45%, transparent 68%);
  transform: translateX(-100%);
}

.online-trade-monster.is-holo::after,
.online-trade-monster.is-black-holo::after {
  animation: onlineTradeShimmer 3.8s ease-in-out infinite;
}

.online-trade-monster.is-holo {
  border-color: rgba(156, 214, 255, 0.26);
}

.online-trade-monster.is-black-holo {
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 255, 255, 0.13), transparent 37%),
    linear-gradient(145deg, rgba(27, 31, 42, 0.8), rgba(1, 3, 8, 0.86));
  border-color: rgba(225, 234, 255, 0.32);
}

.online-trade-monster.empty {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  place-content: center;
  justify-items: center;
  gap: 9px;
  color: rgba(219, 232, 245, 0.5);
  text-align: center;
}

.online-trade-monster.empty strong {
  font-size: 12px;
  font-weight: 850;
}

.online-trade-monster-art {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 92px;
  display: grid;
  place-items: center;
}

.online-trade-monster-art::before {
  content: "";
  position: absolute;
  width: min(88px, 88%);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--trade-cyan), 0.18);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--trade-cyan), 0.1), transparent 68%);
  box-shadow: 0 0 28px rgba(var(--trade-blue), 0.1);
}

.online-trade-monster img,
.online-trade-pick-row img {
  position: relative;
  z-index: 1;
  width: min(108px, 100%);
  height: min(108px, 100%);
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 9px 11px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 12px rgba(var(--trade-blue), 0.12));
}

.online-trade-monster-copy,
.online-trade-pick-copy {
  min-width: 0;
}

.online-trade-monster strong,
.online-trade-pick-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #f9fbff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-monster-copy > span,
.online-trade-pick-row small {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: rgba(220, 234, 248, 0.62);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-monster-sigil {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  border: 1px dashed rgba(var(--trade-cyan), 0.35);
  border-radius: 50%;
  box-shadow:
    inset 0 0 16px rgba(var(--trade-cyan), 0.08),
    0 0 18px rgba(var(--trade-cyan), 0.06);
}

.online-trade-monster-sigil::before,
.online-trade-monster-sigil::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(var(--trade-cyan), 0.46);
}

.online-trade-monster-sigil::before { transform: translate(-50%, -50%) rotate(45deg); }
.online-trade-monster-sigil::after { transform: translate(-50%, -50%) rotate(-45deg); }

.online-trade-tag {
  display: inline-flex !important;
  width: fit-content;
  margin-top: 7px !important;
  padding: 3px 7px;
  color: #02100f !important;
  background: linear-gradient(90deg, #7fe9ff, #b5a2ff, #ffe097);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;
  font-size: 8px !important;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.online-trade-tag--black-holo {
  color: #fff !important;
  background: linear-gradient(180deg, #5c6373 0%, #171b24 47%, #020308 100%);
  border-color: rgba(255, 255, 255, 0.56);
  box-shadow: 0 0 13px rgba(255, 255, 255, 0.18);
}

.online-trade-offer-foot {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.online-trade-token-pill {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  color: rgba(228, 238, 249, 0.62);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.online-trade-token-pill i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 245, 191, 0.75);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9d8, #e5bd57 42%, #7d4f16 78%);
  box-shadow: 0 0 9px rgba(var(--trade-gold), 0.26);
}

.online-trade-token-pill span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-token-pill strong {
  color: rgb(var(--trade-gold));
  font-size: 11px;
}

.online-trade-monster-actions {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.online-trade-monster-actions .online-trade-choose {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border-color: rgba(var(--trade-cyan), 0.25);
}

.online-trade-choose > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-choose-icon {
  flex: 0 0 auto;
  color: rgb(var(--trade-cyan));
  font-size: 18px;
  font-weight: 500;
}

.online-trade-monster-actions .online-trade-remove {
  flex: 0 0 36px;
  width: 36px;
  padding: 0;
  color: rgba(255, 205, 205, 0.86);
  border-color: rgba(255, 151, 151, 0.2);
}

.online-trade-bridge {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: rgb(var(--trade-cyan));
}

.online-trade-bridge i {
  width: 1px;
  height: 34px;
  background: linear-gradient(transparent, rgba(var(--trade-cyan), 0.5), transparent);
}

.online-trade-bridge span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: rgba(var(--trade-cyan), 0.08);
  border: 1px solid rgba(var(--trade-cyan), 0.28);
  border-radius: 50%;
  font-size: 18px;
  box-shadow:
    inset 0 0 15px rgba(var(--trade-cyan), 0.08),
    0 0 22px rgba(var(--trade-cyan), 0.1);
}

.online-trade-commit {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(176px, 250px) minmax(130px, 1fr) minmax(190px, 252px);
  align-items: center;
  gap: 12px;
  padding: 11px;
  background: rgba(2, 8, 16, 0.72);
  border: 1px solid rgba(184, 219, 248, 0.12);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 -12px 30px rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.online-trade-money {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(82px, 108px);
  align-items: center;
  gap: 9px;
}

.online-trade-money > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.online-trade-money b,
.online-trade-money small,
.online-trade-available span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-money b {
  color: rgba(239, 246, 255, 0.88);
  font-size: 11px;
  font-weight: 900;
}

.online-trade-money small,
.online-trade-available span {
  color: rgba(221, 233, 246, 0.47);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.online-trade-money input {
  width: 100%;
  height: 48px;
  padding: 0 9px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(var(--trade-cyan), 0.22);
  border-radius: 10px;
  font: 900 16px Inter, system-ui, sans-serif;
  outline: none;
  text-align: right;
}

.online-trade-money input:focus {
  border-color: rgba(var(--trade-cyan), 0.68);
  box-shadow: 0 0 0 3px rgba(var(--trade-cyan), 0.1);
}

.online-trade-money input:disabled {
  opacity: 0.54;
}

.online-trade-available {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.online-trade-available strong {
  max-width: 100%;
  overflow: hidden;
  color: rgb(var(--trade-gold));
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-commit .online-trade-primary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
}

.online-trade-commit .online-trade-primary.is-confirm {
  color: #1a1000;
  background: linear-gradient(180deg, #fff3c9, #f2ca67 50%, #a86b24);
  border-color: rgba(255, 238, 181, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 11px 30px rgba(var(--trade-gold), 0.2);
}

.online-trade-action-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.online-trade-action-mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.online-trade-picker-backdrop {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--trade-cyan), 0.09), transparent 46%),
    rgba(1, 5, 12, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.online-trade-picker {
  width: min(820px, 100%);
  height: min(680px, calc(100dvh - 32px));
  max-height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 11px;
  padding: 15px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(var(--trade-cyan), 0.045), transparent 36%),
    linear-gradient(180deg, rgba(18, 29, 45, 0.99), rgba(4, 8, 17, 0.995));
  border: 1px solid rgba(179, 222, 255, 0.24);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 28px 90px rgba(0, 0, 0, 0.68),
    0 0 72px rgba(var(--trade-cyan), 0.065);
}

.online-trade-picker h3 {
  font-size: 23px;
}

.online-trade-picker-count {
  margin-left: auto;
  padding: 5px 9px;
  color: rgba(226, 239, 252, 0.65);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.online-trade-icon-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 21px !important;
}

.online-trade-search {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 8px 0 14px;
  background: rgba(2, 7, 14, 0.72);
  border: 1px solid rgba(var(--trade-cyan), 0.2);
  border-radius: 14px;
}

.online-trade-search:focus-within {
  border-color: rgba(var(--trade-cyan), 0.62);
  box-shadow: 0 0 0 3px rgba(var(--trade-cyan), 0.09);
}

.online-trade-search-icon {
  position: relative;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(var(--trade-cyan), 0.68);
  border-radius: 50%;
}

.online-trade-search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--trade-cyan), 0.68);
  transform: rotate(45deg);
  transform-origin: left center;
}

.online-trade-search input {
  min-width: 0;
  width: 100%;
  height: 46px;
  padding: 0 4px;
  color: #f8fbff;
  background: transparent;
  border: 0;
  outline: 0;
  font: 750 15px Inter, system-ui, sans-serif;
}

.online-trade-search input::placeholder {
  color: rgba(217, 232, 246, 0.42);
}

.online-trade-search input::-webkit-search-cancel-button {
  display: none;
}

.online-trade-search button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
}

.online-trade-search button[hidden] {
  display: none;
}

.online-trade-picker-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content: start;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 5px 10px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--trade-cyan), 0.38) transparent;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.online-trade-pick-row {
  position: relative;
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 8px;
  overflow: hidden;
  text-align: left;
  touch-action: pan-y;
  user-select: none;
}

.online-trade-pick-row[hidden] {
  display: none;
}

.online-trade-pick-row::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px transparent;
}

.online-trade-pick-row:active {
  transform: scale(0.985);
}

.online-trade-pick-row.is-selected {
  background:
    linear-gradient(140deg, rgba(var(--trade-cyan), 0.17), rgba(14, 27, 38, 0.96));
  border-color: rgba(var(--trade-cyan), 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 24px rgba(var(--trade-cyan), 0.1);
}

.online-trade-pick-art {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(var(--trade-blue), 0.12), transparent 70%);
  border-radius: 12px;
}

.online-trade-pick-row img {
  width: 58px;
  height: 58px;
}

.online-trade-pick-row em {
  align-self: start;
  padding: 4px 6px;
  color: #03110f;
  background: rgb(var(--trade-cyan));
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.online-trade-pick-none {
  grid-column: 1 / -1;
  min-height: 58px;
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  border-style: dashed;
}

.online-trade-pick-none-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: rgba(255, 196, 196, 0.72);
  background: rgba(255, 120, 120, 0.06);
  border: 1px solid rgba(255, 140, 140, 0.12);
  border-radius: 50%;
  font-size: 18px;
}

.online-trade-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 26px 12px;
  color: rgba(221, 234, 248, 0.52);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.online-trade-empty[hidden] {
  display: none;
}

@keyframes onlineTradeMote {
  0%, 100% { opacity: 0.18; transform: translate3d(0, 10px, 0) scale(0.7); }
  50% { opacity: 0.9; transform: translate3d(11px, -16px, 0) scale(1); }
}

@keyframes onlineTradeStatusPulse {
  50% { opacity: 0.42; transform: scale(0.78); }
}

@keyframes onlineTradeShimmer {
  0%, 22% { transform: translateX(-110%); }
  58%, 100% { transform: translateX(110%); }
}

.online-gift-head-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.online-gift-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.online-gift-tabs button.active {
  color: #08110f;
  background: linear-gradient(180deg, #d9fff1, #6fd3b0 52%, #163f34);
  border-color: rgba(190, 255, 232, 0.76);
}

.online-gift-code {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(111, 211, 176, 0.08);
  border: 1px solid rgba(111, 211, 176, 0.24);
  border-radius: 7px;
}

.online-gift-code span,
.online-gift-confirm span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-gift-code strong,
.online-gift-confirm strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-gift-notice,
.online-gift-loading {
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(111, 211, 176, 0.1);
  border: 1px solid rgba(111, 211, 176, 0.28);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.25;
}

.online-gift-body {
  min-height: 0;
  display: grid;
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.online-gift-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
}

.online-gift-row-main {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.online-gift-row-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.online-gift-row-head strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-gift-status {
  flex: 0 0 auto;
  padding: 3px 7px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-gift-status--claimed {
  background: rgba(101, 220, 142, 0.15);
  border-color: rgba(101, 220, 142, 0.36);
}

.online-gift-status--declined,
.online-gift-status--cancelled,
.online-gift-status--expired {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.64);
}

.online-gift-meta,
.online-gift-row-hint,
.online-gift-empty {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.online-gift-row-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-self: center;
}

.online-gift-lookup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.online-gift-lookup input,
.online-gift-field input,
.online-gift-field select {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  font: 800 12px Inter, system-ui, sans-serif;
}

.online-gift-address-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.online-gift-limit {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  font-weight: 800;
}

.online-gift-limit--empty {
  color: rgba(255, 218, 116, 0.9);
}

.online-gift-address {
  min-width: 0;
  display: grid;
  justify-items: start;
  text-align: left;
  gap: 2px;
  height: auto;
  min-height: 44px;
  padding: 8px 10px;
}

.online-gift-address strong,
.online-gift-address span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-gift-address span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.online-gift-empty--inline {
  align-self: center;
}

.online-gift-send-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
}

.online-gift-recipient,
.online-gift-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.online-gift-recipient span,
.online-gift-field span,
.online-gift-check span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-gift-recipient strong {
  min-width: 0;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.online-gift-recipient small {
  color: rgba(255, 218, 116, 0.88);
}

.online-gift-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.online-gift-check input {
  width: 16px;
  height: 16px;
}

.online-gift-preview {
  min-width: 0;
}

.online-gift-confirm {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}

.online-gift-confirm > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.online-gift-row-actions--inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body.online-trade-open #touchControls {
  pointer-events: none;
  opacity: 0.08;
}

body.online-player-action-open #touchControls,
body.online-duel-open #touchControls,
body.online-profile-open #touchControls,
body.online-gift-open #touchControls,
body.online-leaderboard-open #touchControls {
  pointer-events: none;
  opacity: 0.08;
}

.online-trade-fx-overlay {
  position: fixed;
  inset: 0;
  z-index: 125;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 18% 24%, rgba(71, 232, 217, 0.13), transparent 36%),
    radial-gradient(circle at 84% 76%, rgba(154, 104, 255, 0.16), transparent 40%),
    linear-gradient(145deg, rgba(1, 8, 17, 0.96), rgba(1, 2, 9, 0.985));
  font-family: Inter, system-ui, sans-serif;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(16px) saturate(1.16);
  backdrop-filter: blur(16px) saturate(1.16);
  animation: tradeFxOverlayIn 540ms ease-out both;
}

.online-trade-fx-overlay.hidden {
  display: none;
}

.online-trade-fx-scene {
  --trade-fx-cyan: 102, 244, 225;
  --trade-fx-blue: 91, 159, 255;
  --trade-fx-violet: 183, 122, 255;
  --trade-fx-gold: 255, 219, 130;
  --trade-fx-card: clamp(142px, 20vw, 194px);
  --trade-fx-edge: 3%;
  position: relative;
  isolation: isolate;
  width: min(980px, 100%);
  height: min(660px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  padding: 20px;
  background:
    linear-gradient(120deg, rgba(var(--trade-fx-cyan), 0.055), transparent 31%),
    linear-gradient(300deg, rgba(var(--trade-fx-violet), 0.06), transparent 34%),
    linear-gradient(180deg, rgba(13, 24, 39, 0.97), rgba(2, 6, 14, 0.99));
  border: 1px solid rgba(185, 230, 255, 0.24);
  border-radius: 26px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -34px 70px rgba(0, 0, 0, 0.36),
    0 36px 110px rgba(0, 0, 0, 0.7),
    0 0 90px rgba(var(--trade-fx-blue), 0.07);
}

.online-trade-fx-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.14;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 74%);
}

.online-trade-fx-depth {
  position: absolute;
  inset: 8% 10%;
  z-index: -1;
  border-radius: 50%;
  opacity: 0.84;
  background:
    radial-gradient(ellipse, rgba(var(--trade-fx-blue), 0.12), rgba(var(--trade-fx-violet), 0.05) 42%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
}

.online-trade-fx-rays {
  position: absolute;
  inset: -45%;
  z-index: -1;
  opacity: 0.34;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(var(--trade-fx-cyan), 0.15) 9deg,
      transparent 20deg,
      transparent 42deg,
      rgba(var(--trade-fx-violet), 0.14) 53deg,
      transparent 67deg,
      transparent 98deg,
      rgba(255, 255, 255, 0.1) 112deg,
      transparent 128deg,
      transparent 360deg);
  animation: tradeFxSpin 24s linear infinite;
  pointer-events: none;
}

.online-trade-fx-runes,
.online-trade-fx-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.online-trade-fx-runes span,
.online-trade-fx-sparks i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.online-trade-fx-runes span {
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(194, 244, 255, 0.48);
  transform: rotate(45deg);
  box-shadow: 0 0 15px rgba(var(--trade-fx-cyan), 0.24);
  animation: tradeFxRune 3.4s ease-in-out infinite;
}

.online-trade-fx-runes span:nth-child(1) { left: 7%; top: 24%; animation-delay: 0ms; }
.online-trade-fx-runes span:nth-child(2) { right: 8%; top: 19%; animation-delay: -0.7s; }
.online-trade-fx-runes span:nth-child(3) { left: 13%; bottom: 20%; animation-delay: -1.4s; }
.online-trade-fx-runes span:nth-child(4) { right: 13%; bottom: 17%; animation-delay: -2.1s; }
.online-trade-fx-runes span:nth-child(5) { left: 43%; top: 10%; animation-delay: -2.8s; }
.online-trade-fx-runes span:nth-child(6) { right: 38%; bottom: 8%; animation-delay: -1.1s; }

.online-trade-fx-title {
  position: relative;
  z-index: 8;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.72);
  animation: tradeFxTitleIn 1.2s 180ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.online-trade-fx-title span {
  color: rgb(var(--trade-fx-cyan));
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.online-trade-fx-title strong {
  color: #f9fcff;
  font-size: clamp(25px, 4.2vw, 46px);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.online-trade-fx-title small {
  max-width: min(70vw, 480px);
  overflow: hidden;
  color: rgba(222, 235, 248, 0.58);
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-fx-stage {
  position: relative;
  z-index: 4;
  min-height: 0;
  isolation: isolate;
}

.online-trade-fx-owners {
  position: absolute;
  inset: 0 0 auto;
  z-index: 8;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.online-trade-fx-owner {
  min-width: 0;
  width: min(30%, 210px);
  display: grid;
  gap: 2px;
  padding: 7px 11px;
  background: rgba(4, 11, 21, 0.56);
  border: 1px solid rgba(179, 219, 247, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.online-trade-fx-owner--partner {
  justify-items: end;
  text-align: right;
}

.online-trade-fx-owner span {
  color: rgba(218, 233, 247, 0.42);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.online-trade-fx-owner strong {
  max-width: 100%;
  overflow: hidden;
  color: rgba(249, 252, 255, 0.88);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-fx-owner--you {
  animation: tradeFxOwnerArrival 7.2s ease both;
}

.online-trade-fx-owner--partner {
  animation: tradeFxOwnerArrival 7.2s 100ms ease both;
}

.online-trade-fx-gate {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 5;
  width: clamp(104px, 22vmin, 180px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.online-trade-fx-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(181, 244, 255, 0.6);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(231, 255, 252, 0.2), rgba(var(--trade-fx-blue), 0.08) 34%, transparent 65%);
  box-shadow:
    inset 0 0 28px rgba(var(--trade-fx-cyan), 0.1),
    0 0 26px rgba(var(--trade-fx-cyan), 0.18),
    0 0 70px rgba(var(--trade-fx-violet), 0.16);
  animation: tradeFxGate 7.2s ease-in-out both;
}

.online-trade-fx-ring::before,
.online-trade-fx-ring::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px dashed rgba(206, 247, 255, 0.44);
  border-radius: inherit;
  animation: tradeFxSpin 7.8s linear infinite reverse;
}

.online-trade-fx-ring::after {
  inset: -12%;
  border-style: solid;
  border-color: rgba(var(--trade-fx-violet), 0.28);
  opacity: 0.66;
  animation-direction: normal;
}

.online-trade-fx-path {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 55%;
  z-index: 1;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}

.online-trade-fx-path--top {
  background: linear-gradient(90deg, transparent, rgba(var(--trade-fx-cyan), 0.82), rgba(var(--trade-fx-violet), 0.82), transparent);
  box-shadow: 0 0 16px rgba(var(--trade-fx-cyan), 0.42);
  transform: translateY(-34px);
  animation: tradeFxPath 7.2s ease-out both;
}

.online-trade-fx-path--bottom {
  background: linear-gradient(90deg, transparent, rgba(var(--trade-fx-violet), 0.82), rgba(var(--trade-fx-cyan), 0.82), transparent);
  box-shadow: 0 0 16px rgba(var(--trade-fx-violet), 0.42);
  transform: translateY(34px);
  animation: tradeFxPath 7.2s 120ms ease-out both;
}

.online-trade-fx-dock {
  position: absolute;
  top: 55%;
  z-index: 0;
  width: calc(var(--trade-fx-card) + 24px);
  height: calc(var(--trade-fx-card) * 0.8);
  border: 1px solid rgba(187, 226, 249, 0.1);
  border-radius: 50%;
  opacity: 0.48;
  transform: translateY(-50%) perspective(320px) rotateX(67deg);
  box-shadow:
    inset 0 0 28px rgba(var(--trade-fx-blue), 0.08),
    0 0 26px rgba(var(--trade-fx-blue), 0.05);
  animation: tradeFxDockArrival 7.2s ease both;
}

.online-trade-fx-dock--left { left: calc(var(--trade-fx-edge) - 12px); }
.online-trade-fx-dock--right { right: calc(var(--trade-fx-edge) - 12px); animation-delay: 100ms; }

.online-trade-fx-dock::before {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px dashed rgba(var(--trade-fx-cyan), 0.18);
  border-radius: inherit;
}

.online-trade-fx-item {
  position: absolute;
  top: 55%;
  z-index: 7;
  width: var(--trade-fx-card);
  min-width: 0;
  display: grid;
  justify-items: center;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 10px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(35, 53, 70, 0.86), rgba(5, 12, 22, 0.92));
  border: 1px solid rgba(186, 227, 250, 0.2);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 42px rgba(0, 0, 0, 0.46),
    0 0 32px rgba(var(--trade-fx-blue), 0.08);
  transform-origin: 50% 55%;
  will-change: left, right, opacity, transform, filter;
}

.online-trade-fx-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.08) 48%, transparent 70%);
  transform: translateX(-120%);
  animation: tradeFxCardShimmer 7.2s ease both;
}

.online-trade-fx-item.is-holo {
  border-color: rgba(141, 219, 255, 0.42);
}

.online-trade-fx-item.is-black-holo {
  background: linear-gradient(145deg, rgba(42, 47, 61, 0.9), rgba(1, 3, 8, 0.96));
  border-color: rgba(235, 241, 255, 0.42);
}

.online-trade-fx-item--sent {
  left: var(--trade-fx-edge);
  animation: tradeFxSent 7.2s cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.online-trade-fx-item--received {
  right: var(--trade-fx-edge);
  animation: tradeFxReceived 7.2s 100ms cubic-bezier(0.22, 0.68, 0.18, 1) both;
}

.online-trade-fx-object {
  position: relative;
  width: 100%;
  min-height: 94px;
  display: grid;
  place-items: center;
}

.online-trade-fx-aura {
  position: absolute;
  width: min(104px, 78%);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--trade-fx-cyan), 0.22);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--trade-fx-cyan), 0.16), rgba(var(--trade-fx-blue), 0.05) 48%, transparent 70%);
  box-shadow:
    inset 0 0 22px rgba(var(--trade-fx-cyan), 0.08),
    0 0 28px rgba(var(--trade-fx-blue), 0.1);
  animation: tradeFxAura 2.4s ease-in-out infinite;
}

.online-trade-fx-item img {
  position: relative;
  z-index: 1;
  width: min(122px, 22vmin);
  height: min(122px, 22vmin);
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 15px rgba(var(--trade-fx-blue), 0.2));
  animation: tradeFxFloat 2.2s ease-in-out infinite;
}

.online-trade-fx-label {
  position: relative;
  z-index: 2;
  padding: 4px 7px;
  color: rgb(var(--trade-fx-cyan));
  background: rgba(var(--trade-fx-cyan), 0.075);
  border: 1px solid rgba(var(--trade-fx-cyan), 0.14);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.online-trade-fx-item-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 2px;
}

.online-trade-fx-item-copy strong {
  max-width: 100%;
  overflow: hidden;
  color: #f9fcff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-fx-item-copy small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(221, 235, 248, 0.59);
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-fx-money {
  margin-top: 3px;
  padding: 3px 7px;
  color: #1c1100;
  background: linear-gradient(180deg, #fff4c9, #e9bc52);
  border: 1px solid rgba(255, 246, 203, 0.72);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  box-shadow: 0 0 14px rgba(var(--trade-fx-gold), 0.18);
}

.online-trade-fx-coin {
  position: relative;
  z-index: 1;
  width: min(82px, 16vmin);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 9%, transparent 10%),
    radial-gradient(circle, rgba(67, 41, 5, 0.1) 0 34%, rgba(67, 41, 5, 0.5) 35% 42%, transparent 43%),
    conic-gradient(from 18deg, #fff3b2, #d79731, #fff2ac, #b56c20, #fff3b2);
  border: 2px solid rgba(255, 246, 206, 0.8);
  box-shadow:
    inset 0 7px 10px rgba(255, 255, 255, 0.46),
    inset 0 -9px 12px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(var(--trade-fx-gold), 0.28),
    0 0 44px rgba(var(--trade-fx-gold), 0.13);
  animation: tradeFxCoin 2s ease-in-out infinite;
}

.online-trade-fx-seal {
  position: absolute;
  inset: 24%;
  z-index: 2;
  border-radius: 50%;
  border: 2px double rgba(224, 255, 250, 0.88);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 4%, rgba(var(--trade-fx-cyan), 0.16) 5% 44%, rgba(1, 9, 17, 0.24) 45% 100%);
  box-shadow:
    0 0 24px rgba(var(--trade-fx-cyan), 0.42),
    0 0 58px rgba(var(--trade-fx-violet), 0.26);
  transform: scale(0);
  animation: tradeFxSeal 7.2s ease-out both;
}

.online-trade-fx-seal::before,
.online-trade-fx-seal::after {
  content: "";
  position: absolute;
  left: 18%;
  top: 47%;
  width: 64%;
  height: 7%;
  border-radius: 999px;
  background: #e9fffc;
  box-shadow: 0 0 14px rgba(var(--trade-fx-cyan), 0.66);
}

.online-trade-fx-seal::before {
  transform: rotate(35deg);
}

.online-trade-fx-seal::after {
  transform: rotate(-35deg);
}

.online-trade-fx-sparks i {
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: #eafffc;
  box-shadow: 0 0 14px rgba(var(--trade-fx-cyan), 0.76);
  opacity: 0;
  transform-origin: 50% 72px;
  animation: tradeFxSpark 7.2s ease-out both;
}

.online-trade-fx-sparks i:nth-child(1) { --spark-angle: 0deg; }
.online-trade-fx-sparks i:nth-child(2) { --spark-angle: 45deg; }
.online-trade-fx-sparks i:nth-child(3) { --spark-angle: 90deg; }
.online-trade-fx-sparks i:nth-child(4) { --spark-angle: 135deg; }
.online-trade-fx-sparks i:nth-child(5) { --spark-angle: 180deg; }
.online-trade-fx-sparks i:nth-child(6) { --spark-angle: 225deg; }
.online-trade-fx-sparks i:nth-child(7) { --spark-angle: 270deg; }
.online-trade-fx-sparks i:nth-child(8) { --spark-angle: 315deg; }

.online-trade-fx-phases {
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 10;
  min-width: min(220px, 70%);
  min-height: 26px;
  transform: translateX(-50%);
  pointer-events: none;
}

.online-trade-fx-phase {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6px 12px;
  color: rgba(229, 241, 251, 0.76);
  background: rgba(3, 9, 17, 0.6);
  border: 1px solid rgba(185, 225, 249, 0.12);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.13em;
  opacity: 0;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.online-trade-fx-phase--lock { animation: tradeFxPhaseLock 7.2s ease both; }
.online-trade-fx-phase--cross { animation: tradeFxPhaseCross 7.2s ease both; }
.online-trade-fx-phase--arrive {
  color: rgb(var(--trade-fx-gold));
  border-color: rgba(var(--trade-fx-gold), 0.22);
  animation: tradeFxPhaseArrive 7.2s ease both;
}

.online-trade-fx-footer {
  position: relative;
  z-index: 12;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.online-trade-fx-summary {
  margin: 0;
  padding: 9px 12px;
  color: rgba(232, 243, 253, 0.76);
  background: rgba(3, 9, 17, 0.56);
  border: 1px solid rgba(184, 222, 246, 0.11);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  overflow-wrap: anywhere;
  animation: tradeFxFooterReveal 7.2s ease both;
}

.online-trade-fx-footer button {
  min-width: 108px;
  min-height: 42px;
  padding: 0 18px;
  color: #03110f;
  background: linear-gradient(180deg, #d8fff8, #71e9da 50%, #2ea89a);
  border: 1px solid rgba(218, 255, 250, 0.76);
  border-radius: 12px;
  font: 900 11px Inter, system-ui, sans-serif;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 9px 24px rgba(var(--trade-fx-cyan), 0.16);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

.online-trade-fx-footer button:disabled {
  opacity: 0.2;
  cursor: default;
  filter: grayscale(0.8);
}

.online-trade-fx-footer button.is-ready {
  animation: tradeFxContinueReady 680ms ease both;
}

body.online-trade-fx-open #touchControls {
  pointer-events: none;
  opacity: 0.02;
}

@keyframes tradeFxOverlayIn {
  from { opacity: 0; filter: blur(8px); }
  to { opacity: 1; }
}

@keyframes tradeFxSpin {
  to { transform: rotate(360deg); }
}

@keyframes tradeFxRune {
  0%, 100% { opacity: 0.16; transform: translateY(5px) rotate(45deg) scale(0.78); }
  50% { opacity: 0.7; transform: translateY(-7px) rotate(135deg) scale(1.02); }
}

@keyframes tradeFxTitleIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes tradeFxGate {
  0%, 16% { opacity: 0; transform: scale(0.55) rotate(-16deg); }
  30% { opacity: 0.48; transform: scale(0.84) rotate(0deg); }
  46%, 64% { opacity: 1; transform: scale(1.04) rotate(0deg); }
  74% { opacity: 0.7; transform: scale(0.9) rotate(8deg); }
  100% { opacity: 0.28; transform: scale(0.78) rotate(12deg); }
}

@keyframes tradeFxPath {
  0%, 22% { opacity: 0; clip-path: inset(0 100% 0 0); }
  38% { opacity: 0.8; clip-path: inset(0 0 0 0); }
  66% { opacity: 1; clip-path: inset(0 0 0 0); }
  84%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes tradeFxSent {
  0% {
    left: var(--trade-fx-edge);
    opacity: 0;
    filter: brightness(0.8);
    transform: translateY(calc(-50% + 18px)) scale(0.82);
  }
  11%, 25% {
    left: var(--trade-fx-edge);
    opacity: 1;
    filter: brightness(1);
    transform: translateY(-50%) scale(1);
  }
  46% {
    left: calc(50% - (var(--trade-fx-card) / 2));
    opacity: 1;
    filter: brightness(1.15);
    transform: translateY(calc(-50% - 34px)) scale(1.04) rotate(3deg);
  }
  56% {
    left: calc(50% - (var(--trade-fx-card) / 2));
    opacity: 0.22;
    filter: brightness(2.3) blur(1px);
    transform: translateY(calc(-50% - 34px)) scale(0.54) rotate(8deg);
  }
  66% {
    left: calc(100% - var(--trade-fx-card) - var(--trade-fx-edge));
    opacity: 0.58;
    filter: brightness(1.5);
    transform: translateY(calc(-50% - 8px)) scale(0.86);
  }
  80%, 100% {
    left: calc(100% - var(--trade-fx-card) - var(--trade-fx-edge));
    opacity: 1;
    filter: brightness(1);
    transform: translateY(-50%) scale(1);
  }
}

@keyframes tradeFxReceived {
  0% {
    right: var(--trade-fx-edge);
    opacity: 0;
    filter: brightness(0.8);
    transform: translateY(calc(-50% + 18px)) scale(0.82);
  }
  11%, 25% {
    right: var(--trade-fx-edge);
    opacity: 1;
    filter: brightness(1);
    transform: translateY(-50%) scale(1);
  }
  46% {
    right: calc(50% - (var(--trade-fx-card) / 2));
    opacity: 1;
    filter: brightness(1.15);
    transform: translateY(calc(-50% + 34px)) scale(1.04) rotate(-3deg);
  }
  56% {
    right: calc(50% - (var(--trade-fx-card) / 2));
    opacity: 0.22;
    filter: brightness(2.3) blur(1px);
    transform: translateY(calc(-50% + 34px)) scale(0.54) rotate(-8deg);
  }
  66% {
    right: calc(100% - var(--trade-fx-card) - var(--trade-fx-edge));
    opacity: 0.58;
    filter: brightness(1.5);
    transform: translateY(calc(-50% + 8px)) scale(0.86);
  }
  80%, 100% {
    right: calc(100% - var(--trade-fx-card) - var(--trade-fx-edge));
    opacity: 1;
    filter: brightness(1);
    transform: translateY(-50%) scale(1);
  }
}

@keyframes tradeFxFloat {
  50% { transform: translateY(-5px) scale(1.025); }
}

@keyframes tradeFxAura {
  0%, 100% { opacity: 0.45; transform: scale(0.92) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.05) rotate(22deg); }
}

@keyframes tradeFxCoin {
  50% { transform: rotateY(36deg) translateY(-4px); }
}

@keyframes tradeFxSeal {
  0%, 38% { transform: scale(0) rotate(-55deg); opacity: 0; }
  50% { transform: scale(1.18) rotate(0deg); opacity: 1; }
  61% { transform: scale(0.8) rotate(18deg); opacity: 0.28; }
  100% { transform: scale(0.62) rotate(28deg); opacity: 0; }
}

@keyframes tradeFxSpark {
  0%, 45% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(-40px) scaleY(0.2);
  }
  54% {
    opacity: 1;
    transform: rotate(var(--spark-angle)) translateY(-66px) scaleY(1);
  }
  68%, 100% {
    opacity: 0;
    transform: rotate(var(--spark-angle)) translateY(-88px) scaleY(0.4);
  }
}

@keyframes tradeFxDockArrival {
  0%, 62% { opacity: 0.16; filter: brightness(0.7); }
  78% { opacity: 0.9; filter: brightness(1.65); }
  100% { opacity: 0.5; filter: brightness(1); }
}

@keyframes tradeFxOwnerArrival {
  0%, 64% {
    border-color: rgba(179, 219, 247, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  80% {
    border-color: rgba(var(--trade-fx-gold), 0.42);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 24px rgba(var(--trade-fx-gold), 0.13);
  }
  100% {
    border-color: rgba(var(--trade-fx-cyan), 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

@keyframes tradeFxCardShimmer {
  0%, 58% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

@keyframes tradeFxPhaseLock {
  0%, 5% { opacity: 0; transform: translateY(5px); }
  12%, 27% { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes tradeFxPhaseCross {
  0%, 30% { opacity: 0; transform: translateY(5px); }
  39%, 66% { opacity: 1; transform: translateY(0); }
  74%, 100% { opacity: 0; transform: translateY(-5px); }
}

@keyframes tradeFxPhaseArrive {
  0%, 70% { opacity: 0; transform: translateY(5px); }
  80%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes tradeFxFooterReveal {
  0%, 72% { opacity: 0; transform: translateY(8px); }
  86%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes tradeFxContinueReady {
  0% { opacity: 0.2; transform: scale(0.94); }
  64% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
  html:not(.is-touch) .online-hud {
    top: 8px;
    right: max(8px, env(safe-area-inset-right));
    left: max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
    width: calc(100% - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
    min-width: 0;
    max-width: calc(100% - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
  }

  html:not(.is-touch) .online-chat-panel {
    box-sizing: border-box;
    width: min(390px, 100%);
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 960px), (pointer: coarse){
  html.is-touch .online-hud {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 18;
  }

  html.is-touch .online-topline {
    min-height: 28px;
    max-width: calc(100vw - max(16px, env(safe-area-inset-right)) - max(8px, env(safe-area-inset-left)));
    padding: 5px 7px;
    font-size: 11px;
  }

  html.is-touch .online-status-toggle {
    min-height: 26px;
    font-size: 11px;
  }

  html.is-touch .online-hud-actions {
    max-width: min(330px, calc(100vw - 16px));
    gap: 6px;
  }

  html.is-touch .online-chat-toggle {
    min-height: 30px;
    padding: 5px 7px;
  }

  html.is-touch .online-chat-panel {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(96px, env(safe-area-inset-bottom));
    width: min(420px, max(280px, calc(100vw - 20px)));
    max-height: min(680px, calc(100dvh - 124px));
    transform: translateX(-50%);
  }

  html.is-touch .online-chat-messages {
    max-height: min(116px, 20dvh);
  }

  html.is-touch .online-chat-emote-button {
    min-height: 96px;
  }

  html.is-touch .online-chat-emote-grid {
    max-height: min(330px, 42dvh);
  }

  @media (orientation: landscape) {
    html.is-touch .online-chat-panel {
      left: auto;
      right: max(10px, env(safe-area-inset-right));
      top: max(48px, calc(env(safe-area-inset-top) + 46px));
      bottom: max(92px, calc(env(safe-area-inset-bottom) + 92px));
      width: clamp(300px, 42vw, 390px);
      max-height: none;
      display: flex;
      flex-direction: column;
      padding: 7px;
      transform: none;
      overflow: hidden;
    }

    html.is-touch .online-chat-messages {
      flex: 0 1 72px;
      min-height: 0;
      max-height: 72px;
      gap: 5px;
    }

    html.is-touch .online-chat-message {
      padding: 5px 6px;
      font-size: 10px;
      line-height: 1.2;
    }

    html.is-touch .online-chat-message strong {
      font-size: 11px;
    }

    html.is-touch .online-chat-catalog {
      min-height: 0;
    }

    html.is-touch .online-chat-emote-grid {
      max-height: min(245px, 46dvh);
    }

    html.is-touch .online-chat-emote-button {
      min-height: 88px;
    }
  }

  html.is-touch .online-speech-bubble {
    max-width: 136px;
    padding: 6px 8px;
    font-size: 10px;
  }

  html.is-touch .online-speech-bubble.is-emote {
    width: clamp(58px, calc(var(--remote-frame, 64px) * 1.05), 70px);
    min-width: 58px;
    max-width: 70px;
    padding: 4px;
  }

  html.is-touch .online-trade-overlay,
  html.is-touch .online-player-action-overlay,
  html.is-touch .online-duel-overlay,
  html.is-touch .online-profile-overlay,
  html.is-touch .online-gift-overlay,
  html.is-touch .online-leaderboard-overlay {
    place-items: stretch;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  html.is-touch .online-trade-card {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
    border-radius: 15px;
  }

  html.is-touch .online-trade-card--small {
    align-self: center;
    justify-self: center;
    width: min(380px, 100%);
    height: auto;
    grid-template-rows: auto auto auto;
    padding: 14px;
    border-radius: 16px;
  }

  html.is-touch .online-player-action-card,
  html.is-touch .online-duel-card {
    align-self: center;
    justify-self: center;
    width: min(380px, 100%);
    max-height: calc(100dvh - 12px);
    height: auto;
    gap: 9px;
    padding: 10px;
    border-radius: 8px;
  }

  html.is-touch .online-player-action-buttons {
    grid-template-columns: 1fr;
  }

  html.is-touch .online-profile-card,
  html.is-touch .online-gift-card,
  html.is-touch .online-leaderboard-card {
    width: 100%;
    height: 100%;
    max-height: none;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    border-radius: 0;
  }

  html.is-touch .online-profile-card--small,
  html.is-touch .online-leaderboard-card--small {
    align-self: center;
    justify-self: center;
    width: min(420px, 100%);
    height: auto;
    border-radius: 8px;
  }

  html.is-touch .online-profile-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .online-profile-stat {
    padding: 6px 6px;
  }

  html.is-touch .online-profile-stat span {
    font-size: 8px;
  }

  html.is-touch .online-profile-stat strong {
    font-size: 10px;
  }

  html.is-touch .online-gift-row {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-touch .online-gift-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  html.is-touch .online-gift-lookup {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-touch .online-gift-code,
  html.is-touch .online-gift-confirm {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-touch .online-profile-body {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 6px;
  }

  html.is-touch .online-leaderboard-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    overflow: auto;
  }

  html.is-touch .online-leaderboard-section {
    min-height: 180px;
  }

  html.is-touch .online-leaderboard-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px;
  }

  html.is-touch .online-profile-section {
    padding: 7px;
    gap: 5px;
  }

  html.is-touch .online-profile-section h3 {
    font-size: 12px;
  }

  html.is-touch .online-profile-dex {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
    gap: 5px;
  }

  html.is-touch .online-profile-dex-row {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }

  html.is-touch .online-profile-dex-row img {
    width: 36px;
    height: 36px;
  }

  html.is-touch .online-profile-split,
  html.is-touch .online-profile-empty {
    padding: 6px;
    font-size: 10px;
  }

  html.is-touch .online-trade-head h2 {
    margin-top: 2px;
    font-size: 18px;
  }

  html.is-touch .online-trade-title > span,
  html.is-touch .online-trade-head > div > span,
  html.is-touch .online-trade-offer-head > div > span,
  html.is-touch .online-trade-picker-head > div > span {
    font-size: 8px;
  }

  html.is-touch .online-trade-close {
    min-width: 40px;
    min-height: 40px !important;
    padding: 0 10px !important;
  }

  html.is-touch .online-trade-close > small {
    display: none;
  }

  html.is-touch .online-trade-meta {
    grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
    gap: 7px;
  }

  html.is-touch .online-trade-steps > span {
    gap: 4px;
  }

  html.is-touch .online-trade-steps i {
    width: 20px;
    height: 20px;
    font-size: 8px;
  }

  html.is-touch .online-trade-steps b {
    padding-right: 4px;
    font-size: 8px;
  }

  html.is-touch .online-trade-status {
    gap: 6px;
    padding: 6px 8px;
    border-radius: 9px;
    font-size: 9px;
  }

  html.is-touch .online-trade-grid {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 7px;
    padding: 1px;
  }

  html.is-touch .online-trade-offer {
    min-height: 0;
    grid-template-rows: auto minmax(72px, 1fr) auto;
    gap: 6px;
    padding: 7px;
    border-radius: 12px;
  }

  html.is-touch .online-trade-offer-head strong {
    font-size: 11px;
  }

  html.is-touch .online-trade-state {
    padding: 4px 6px;
    font-size: 7px !important;
  }

  html.is-touch .online-trade-bridge {
    gap: 3px;
  }

  html.is-touch .online-trade-bridge i {
    height: 22px;
  }

  html.is-touch .online-trade-bridge span {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  html.is-touch .online-trade-commit {
    grid-template-columns: minmax(160px, 0.84fr) minmax(116px, 1fr) minmax(160px, 0.9fr);
    gap: 7px;
    padding: 7px;
    border-radius: 12px;
  }

  html.is-touch .online-trade-money {
    grid-template-columns: minmax(0, 1fr) minmax(74px, 96px);
    gap: 6px;
  }

  html.is-touch .online-trade-commit .online-trade-primary {
    min-height: 42px;
    padding: 0 8px;
    font-size: 10px;
  }

  html.is-touch .online-trade-money input {
    height: 38px;
    font-size: 16px;
  }

  html.is-touch .online-trade-available strong {
    font-size: 10px;
  }

  html.is-touch .online-trade-monster {
    min-height: 70px;
    grid-template-columns: minmax(62px, 0.38fr) minmax(0, 0.62fr);
    gap: 6px;
    padding: 5px;
    border-radius: 10px;
  }

  html.is-touch .online-trade-monster-art {
    min-height: 62px;
  }

  html.is-touch .online-trade-monster img,
  html.is-touch .online-trade-pick-row img {
    width: min(72px, 100%);
    height: min(72px, 100%);
  }

  html.is-touch .online-trade-monster strong,
  html.is-touch .online-trade-pick-row strong {
    font-size: 11px;
  }

  html.is-touch .online-trade-monster-copy > span,
  html.is-touch .online-trade-pick-row small {
    margin-top: 2px;
    font-size: 8px;
  }

  html.is-touch .online-trade-tag {
    margin-top: 4px !important;
    padding: 2px 5px;
    font-size: 7px !important;
  }

  html.is-touch .online-trade-offer-foot {
    gap: 5px;
  }

  html.is-touch .online-trade-token-pill {
    grid-template-columns: auto auto;
    gap: 4px;
    padding: 5px 7px;
  }

  html.is-touch .online-trade-token-pill span {
    display: none;
  }

  html.is-touch .online-trade-token-pill i {
    width: 12px;
    height: 12px;
  }

  html.is-touch .online-trade-monster-actions {
    flex: 1 1 auto;
    gap: 4px;
  }

  html.is-touch .online-trade-monster-actions button,
  html.is-touch .online-trade-head button,
  html.is-touch .online-player-action-buttons button,
  html.is-touch .online-trade-buttons button {
    min-height: 38px;
    padding: 0 7px;
    font-size: 9px;
  }

  html.is-touch .online-trade-monster-actions .online-trade-remove {
    flex-basis: 38px;
    width: 38px;
  }

  html.is-touch .online-trade-picker-backdrop {
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  html.is-touch .online-trade-picker {
    width: 100%;
    height: 100%;
    max-height: none;
    gap: 7px;
    padding: 8px;
    border-radius: 13px;
  }

  html.is-touch .online-trade-picker h3 {
    margin-top: 2px;
    font-size: 18px;
  }

  html.is-touch .online-trade-icon-button {
    min-width: 40px;
    width: 40px;
    height: 40px;
  }

  html.is-touch .online-trade-search {
    min-height: 42px;
    border-radius: 11px;
  }

  html.is-touch .online-trade-search input {
    height: 40px;
    font-size: 16px;
  }

  html.is-touch .online-trade-picker-list {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 6px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }

  html.is-touch .online-trade-pick-row {
    min-height: 68px;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 5px;
  }

  html.is-touch .online-trade-pick-art {
    width: 50px;
    height: 50px;
  }

  html.is-touch .online-trade-pick-row img {
    width: 48px;
    height: 48px;
  }

  html.is-touch .online-trade-pick-none {
    min-height: 50px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  html.is-touch .online-trade-fx-overlay {
    place-items: stretch;
    padding: 0;
    background:
      radial-gradient(circle at 18% 24%, rgba(71, 232, 217, 0.12), transparent 36%),
      radial-gradient(circle at 84% 76%, rgba(154, 104, 255, 0.14), transparent 40%),
      rgba(0, 2, 9, 0.96);
  }

  html.is-touch .online-trade-fx-scene {
    --trade-fx-card: clamp(102px, 23vw, 142px);
    --trade-fx-edge: 2%;
    width: 100%;
    height: 100%;
    max-height: none;
    gap: 4px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
  }

  html.is-touch .online-trade-fx-title strong {
    font-size: clamp(20px, 6.5vmin, 32px);
  }

  html.is-touch .online-trade-fx-title span {
    font-size: 8px;
  }

  html.is-touch .online-trade-fx-title small {
    font-size: 9px;
  }

  html.is-touch .online-trade-fx-stage {
    min-height: 0;
  }

  html.is-touch .online-trade-fx-item {
    width: var(--trade-fx-card);
    gap: 2px;
    padding: 5px;
    border-radius: 12px;
  }

  html.is-touch .online-trade-fx-object {
    min-height: 70px;
  }

  html.is-touch .online-trade-fx-item img {
    width: min(82px, 20vmin);
    height: min(82px, 20vmin);
  }

  html.is-touch .online-trade-fx-coin {
    width: min(60px, 16vmin);
  }

  html.is-touch .online-trade-fx-item-copy strong {
    font-size: 9px;
  }

  html.is-touch .online-trade-fx-item-copy small,
  html.is-touch .online-trade-fx-money {
    font-size: 7px;
  }

  html.is-touch .online-trade-fx-label {
    padding: 3px 5px;
    font-size: 6px;
  }

  html.is-touch .online-trade-fx-owner {
    width: min(32%, 160px);
    padding: 4px 7px;
  }

  html.is-touch .online-trade-fx-owner span {
    font-size: 6px;
  }

  html.is-touch .online-trade-fx-owner strong {
    font-size: 9px;
  }

  html.is-touch .online-trade-fx-gate {
    width: clamp(82px, 21vmin, 132px);
  }

  html.is-touch .online-trade-fx-phases {
    bottom: 2px;
    min-height: 22px;
  }

  html.is-touch .online-trade-fx-phase {
    padding: 4px 8px;
    font-size: 7px;
  }

  html.is-touch .online-trade-fx-footer {
    gap: 6px;
  }

  html.is-touch .online-trade-fx-summary {
    padding: 6px 9px;
    border-radius: 8px;
    font-size: 8px;
  }

  html.is-touch .online-trade-fx-footer button {
    min-width: 86px;
    min-height: 38px;
    padding: 0 11px;
    font-size: 9px;
  }

  html.is-touch .online-trade-fx-runes span {
    width: 10px;
    height: 10px;
  }

  html.is-touch .online-trade-fx-path {
    left: 10%;
    right: 10%;
  }
}

/* Tauschen is primarily played on phones held sideways. Keep the two offers
   visible together, reserve the bottom rail for deliberate actions, and let
   only the central offer area and reserve box consume scroll gestures. */
@media (max-height: 520px) and (orientation: landscape) {
  html.is-touch .online-trade-overlay {
    padding: max(3px, env(safe-area-inset-top)) max(3px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
  }

  html.is-touch .online-trade-card {
    gap: 5px;
    padding: 5px;
    border-radius: 11px;
  }

  html.is-touch .online-trade-head h2 {
    font-size: 16px;
  }

  html.is-touch .online-trade-close {
    min-width: 36px;
    min-height: 36px !important;
    height: 36px;
  }

  html.is-touch .online-trade-meta {
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
    gap: 5px;
  }

  html.is-touch .online-trade-status {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 8px;
  }

  html.is-touch .online-trade-grid {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 5px;
  }

  html.is-touch .online-trade-offer {
    grid-template-rows: auto minmax(62px, 1fr) auto;
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
  }

  html.is-touch .online-trade-monster {
    min-height: 62px;
    grid-template-columns: minmax(52px, 0.34fr) minmax(0, 0.66fr);
    padding: 3px;
  }

  html.is-touch .online-trade-monster-art {
    min-height: 52px;
  }

  html.is-touch .online-trade-monster img {
    width: min(62px, 100%);
    height: min(62px, 100%);
  }

  html.is-touch .online-trade-offer-foot {
    min-height: 34px;
  }

  html.is-touch .online-trade-monster-actions button {
    min-height: 34px;
  }

  html.is-touch .online-trade-commit {
    grid-template-columns: minmax(142px, 0.88fr) minmax(96px, 1fr) minmax(144px, 0.9fr);
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
  }

  html.is-touch .online-trade-money {
    grid-template-columns: minmax(0, 1fr) minmax(68px, 88px);
  }

  html.is-touch .online-trade-money input {
    height: 36px;
  }

  html.is-touch .online-trade-commit .online-trade-primary {
    min-height: 38px;
  }

  html.is-touch .online-trade-picker {
    gap: 5px;
    padding: 6px;
    border-radius: 10px;
  }

  html.is-touch .online-trade-picker-head {
    min-height: 36px;
  }

  html.is-touch .online-trade-picker h3 {
    font-size: 16px;
  }

  html.is-touch .online-trade-search {
    min-height: 38px;
  }

  html.is-touch .online-trade-search input {
    height: 36px;
  }

  html.is-touch .online-trade-picker-list {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 5px;
  }

  html.is-touch .online-trade-pick-row {
    min-height: 60px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  html.is-touch .online-trade-pick-art {
    width: 44px;
    height: 44px;
  }

  html.is-touch .online-trade-pick-row img {
    width: 42px;
    height: 42px;
  }

  html.is-touch .online-trade-fx-scene {
    --trade-fx-card: clamp(96px, 20vw, 128px);
    padding: max(5px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }

  html.is-touch .online-trade-fx-title {
    gap: 1px;
  }

  html.is-touch .online-trade-fx-title strong {
    font-size: clamp(18px, 6vmin, 24px);
  }

  html.is-touch .online-trade-fx-title small {
    font-size: 8px;
  }

  html.is-touch .online-trade-fx-owner {
    padding: 3px 6px;
  }

  html.is-touch .online-trade-fx-object {
    min-height: 58px;
  }

  html.is-touch .online-trade-fx-item img {
    width: min(68px, 18vmin);
    height: min(68px, 18vmin);
  }

  html.is-touch .online-trade-fx-gate {
    width: clamp(72px, 19vmin, 104px);
  }

  html.is-touch .online-trade-fx-summary {
    padding: 5px 7px;
    font-size: 7px;
  }

  html.is-touch .online-trade-fx-footer button {
    min-height: 34px;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  html.is-touch .online-trade-meta {
    grid-template-columns: 1fr;
  }

  html.is-touch .online-trade-steps b {
    font-size: 7px;
  }

  html.is-touch .online-trade-grid {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }

  html.is-touch .online-trade-offer {
    min-height: 196px;
  }

  html.is-touch .online-trade-bridge {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html.is-touch .online-trade-bridge i {
    width: 42px;
    height: 1px;
  }

  html.is-touch .online-trade-bridge span {
    transform: rotate(90deg);
  }

  html.is-touch .online-trade-commit {
    grid-template-columns: minmax(0, 1fr) minmax(136px, 0.8fr);
  }

  html.is-touch .online-trade-available {
    display: none;
  }

  html.is-touch .online-trade-picker-list {
    grid-template-columns: 1fr;
  }

  html.is-touch .online-trade-fx-scene {
    --trade-fx-card: clamp(118px, 38vw, 158px);
  }

  html.is-touch .online-trade-fx-owner {
    width: 38%;
  }

  html.is-touch .online-trade-fx-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-touch .online-trade-fx-footer button {
    justify-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-trade-ambient i,
  .online-trade-status > i,
  .online-trade-monster::after,
  .online-trade-fx-overlay,
  .online-trade-fx-rays,
  .online-trade-fx-runes span,
  .online-trade-fx-title,
  .online-trade-fx-owner,
  .online-trade-fx-ring,
  .online-trade-fx-path,
  .online-trade-fx-dock,
  .online-trade-fx-item,
  .online-trade-fx-item::before,
  .online-trade-fx-aura,
  .online-trade-fx-item img,
  .online-trade-fx-coin,
  .online-trade-fx-seal,
  .online-trade-fx-sparks i,
  .online-trade-fx-phase,
  .online-trade-fx-summary,
  .online-trade-fx-footer button.is-ready {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Mobile landscape hard lock: keep the game pinned to the visible viewport,
   with every menu taking the full available screen instead of becoming a
   cramped floating panel. */
@media (max-width: 960px), (pointer: coarse){
  html.is-touch,
  html.is-touch body {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.is-touch body {
    position: fixed;
    inset: 0;
    margin: 0;
    background: #000;
  }

  html.is-touch .shell,
  html.is-touch .playfield {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    overflow: hidden;
  }

  html.is-touch .shell {
    display: block;
    background: #000;
  }

  html.is-touch .playfield {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #000;
  }

  html.is-touch #game {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100vw, calc(100dvh * 4 / 3));
    height: min(100dvh, calc(100vw * 3 / 4));
    object-fit: fill;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translate(-50%, -50%);
    backface-visibility: visible;
    opacity: 1;
    background: #000;
    touch-action: none;
  }

  html.is-touch .debug-tile-tools {
    display: none !important;
  }

  html.is-touch .lv-pill {
    color: #fff;
    background: linear-gradient(180deg, rgba(32, 34, 39, 0.94), rgba(0, 0, 0, 0.94));
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -5px 8px rgba(0, 0, 0, 0.58);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  }

  html.is-touch .side-panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(520px 260px at 24% 0%, rgba(255, 255, 255, 0.12), transparent 58%),
      linear-gradient(180deg, rgba(11, 11, 13, 0.99), #000);
    color: #fff;
    z-index: 40;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    pointer-events: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  html.is-touch body.mobile-menu-open #menuScrim {
    z-index: 30;
    background: transparent;
    pointer-events: none;
  }

  html.is-touch .side-panel .actions {
    min-height: calc(100dvh - 28px);
    align-content: center;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  html.is-touch .side-panel .menu-toggle {
    display: none !important;
  }

  html.is-touch .side-panel.menu-collapsed .actions {
    display: grid;
  }

  html.is-touch .side-panel .actions button {
    min-height: 54px;
    color: #fff;
    background: linear-gradient(180deg, rgba(21, 22, 25, 0.96), rgba(0, 0, 0, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 7px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      inset 0 -9px 14px rgba(0, 0, 0, 0.62),
      0 6px 14px rgba(0, 0, 0, 0.3);
  }

  html.is-touch .modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    place-items: stretch;
    touch-action: none;
  }

  html.is-touch .modal.catch-showcase-modal {
    display: grid;
    place-items: center;
    place-content: center;
  }

  html.is-touch .modal > .dig-scene:not(.lina-anchor-scene) {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  html.is-touch .dig-caption {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.48);
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }

  html.is-touch .dig-caption h2 {
    margin-bottom: 2px;
    font-size: clamp(0.9rem, 4.6dvh, 1.2rem);
    line-height: 1.05;
  }

  html.is-touch .dig-caption p {
    font-size: clamp(0.66rem, 3.1dvh, 0.86rem);
    line-height: 1.18;
  }

  html.is-touch .stinky-fish-continue {
    bottom: calc(env(safe-area-inset-bottom) + 18px);
    min-height: 42px;
  }

  html.is-touch .dig-rays {
    width: min(112vmin, 520px);
    height: min(112vmin, 520px);
  }

  html.is-touch .dig-mound {
    width: clamp(150px, 46dvh, 210px);
    height: clamp(72px, 22dvh, 96px);
  }

  html.is-touch .dig-shovel-img {
    width: clamp(132px, 42dvh, 178px);
    height: clamp(132px, 42dvh, 178px);
  }

  html.is-touch .dig-stone-img {
    width: clamp(86px, 26dvh, 124px);
    height: clamp(86px, 26dvh, 124px);
  }

  html.is-touch .riptalon-stone-img {
    width: clamp(104px, 30dvh, 144px);
    height: clamp(104px, 30dvh, 144px);
  }

  html.is-touch .riptalon-stone-ring {
    width: clamp(142px, 43dvh, 202px);
    height: clamp(142px, 43dvh, 202px);
  }

  html.is-touch .della-reward-items {
    width: min(360px, calc(100% - 28px));
    height: clamp(138px, 38dvh, 180px);
  }

  html.is-touch .della-reward-items img {
    width: clamp(92px, 24dvh, 122px);
    height: clamp(92px, 24dvh, 122px);
  }

  html.is-touch .della-reward-key {
    left: 8px;
  }

  html.is-touch .della-reward-egg {
    right: 8px;
  }

  html.is-touch .colosseum-egg-receive-items {
    width: clamp(116px, 35dvh, 168px);
    height: clamp(116px, 35dvh, 168px);
  }

  html.is-touch .valor-egg-scene .colosseum-egg-receive-items {
    width: clamp(138px, 41dvh, 198px);
    height: clamp(138px, 41dvh, 198px);
  }

  html.is-touch .egg-hatch-stage,
  html.is-touch .companion-join-stage {
    top: 44%;
    transform: translate(-50%, -50%) scale(0.82);
  }

  html.is-touch .modal-card,
  html.is-touch .shop-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  html.is-touch .modal-card,
  html.is-touch .shop-card {
    position: relative;
  }

  html.is-touch .modal-card.seal-award {
    width: min(430px, calc(100vw - 20px));
    height: auto;
    max-width: min(430px, calc(100vw - 20px));
    max-height: calc(100dvh - 16px);
    justify-self: center;
    align-self: center;
    border-radius: var(--radius);
    padding:
      max(12px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow: auto;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(3px, 1.2dvh, 8px);
  }

  html.is-touch .seal-award-rays {
    top: 38%;
    width: clamp(230px, 74dvh, 360px);
    height: clamp(230px, 74dvh, 360px);
  }

  html.is-touch .seal-award-icon {
    width: clamp(82px, 28dvh, 132px);
    height: clamp(82px, 28dvh, 132px);
    margin: 0 auto clamp(1px, 1dvh, 6px);
  }

  html.is-touch .seal-award-kicker {
    margin: 0;
    font-size: clamp(0.58rem, 2.2dvh, 0.72rem);
    letter-spacing: 0;
  }

  html.is-touch .seal-award h2 {
    margin: 0;
    font-size: clamp(1.08rem, 5.2dvh, 1.5rem);
    line-height: 1.08;
    letter-spacing: 0;
  }

  html.is-touch .seal-award p:not(.seal-award-kicker) {
    margin: 0;
    font-size: clamp(0.72rem, 2.7dvh, 0.9rem);
    line-height: 1.28;
  }

  html.is-touch .seal-award .dialogue-actions {
    width: 100%;
    margin-top: clamp(4px, 1.6dvh, 10px);
    display: grid;
    grid-template-columns: 1fr;
  }

  html.is-touch .seal-award .dialogue-actions button {
    width: 100%;
    min-height: clamp(34px, 8dvh, 44px);
    padding: 7px 10px;
    font-size: clamp(0.76rem, 2.9dvh, 0.92rem);
  }

  html.is-touch .rift-reward-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  html.is-touch .rift-reward-stage {
    --rift-reward-frame: clamp(210px, 64vw, 270px);
    --chest-cine-rise: 60dvh;
    height: clamp(190px, 32dvh, 250px);
    margin: 0 0 10px;
  }

  html.is-touch .rift-reward-opening-card {
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background:
      radial-gradient(circle at 50% 44%, rgba(177, 108, 255, 0.18), transparent 36%),
      linear-gradient(180deg, #080b14, #03050a);
    border-radius: 0;
    border: 0;
  }

  html.is-touch .rift-reward-opening-card .rift-reward-stage {
    --rift-reward-frame: min(78dvh, 74vw);
    --chest-cine-rise: 82dvh;
    width: min(calc(100vw - 20px), 720px);
    height: min(calc(100dvh - 20px), 92dvh);
    max-height: calc(100dvh - 20px);
    margin: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 244, 183, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 22px 46px rgba(0, 0, 0, 0.52);
  }

  html.is-touch .rift-reward-opening-card .rift-reward-opening-title {
    bottom: clamp(12px, 4vw, 20px);
  }

  html.is-touch .rift-reward-opening-card .rift-reward-opening-title h2 {
    font-size: clamp(1.18rem, 5.6vw, 1.8rem);
  }

  html.is-touch .world-modal-close {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    z-index: 44;
    width: 38px;
    height: 38px;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #080808;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.22);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
    font-size: 1.32rem;
    font-weight: 900;
    line-height: 1;
  }

  html.is-touch .mobile-bottom-close {
    display: none !important;
  }

  html.is-touch .dialogue-actions:has(> .mobile-bottom-close:only-child),
  html.is-touch .save-foot:has(> .mobile-bottom-close:only-child) {
    display: none !important;
  }

  html.is-touch .dig-result,
  html.is-touch .della-reward-result,
  html.is-touch .egg-hatch-result,
  html.is-touch .companion-join-result {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: clamp(6px, 2dvh, 12px);
    overflow: hidden;
    text-align: center;
    padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  html.is-touch .mom-reward-scene {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  html.is-touch .mom-reward-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  html.is-touch .mom-reward-background {
    object-position: 50% 50%;
  }

  html.is-touch .mom-reward-prizes {
    top: 49%;
    width: min(94vw, 610px);
    gap: clamp(3px, 2vw, 16px);
  }

  html.is-touch .mom-reward-charms {
    margin-right: -5px;
  }

  html.is-touch .mom-reward-charm {
    width: clamp(68px, 22vw, 112px);
    margin-inline: clamp(-14px, -3.2vw, -8px);
  }

  html.is-touch .mom-reward-token {
    width: clamp(88px, 27vw, 134px);
  }

  html.is-touch .mom-reward-copy {
    width: 100%;
    padding:
      clamp(44px, 11dvh, 76px)
      max(16px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  html.is-touch .dig-result h2,
  html.is-touch .mom-reward-card h2,
  html.is-touch .mom-reward-copy h2,
  html.is-touch .egg-hatch-result h2,
  html.is-touch .companion-join-result h2 {
    margin: 0;
    max-width: min(620px, calc(100vw - 32px));
    font-size: clamp(1rem, 5dvh, 1.55rem);
    line-height: 1.06;
  }

  html.is-touch .dig-result p,
  html.is-touch .mom-reward-card p,
  html.is-touch .mom-reward-copy p,
  html.is-touch .egg-hatch-result p,
  html.is-touch .companion-join-result p {
    margin: 0;
    max-width: min(620px, calc(100vw - 32px));
    font-size: clamp(0.68rem, 3.1dvh, 0.9rem);
    line-height: 1.2;
  }

  html.is-touch .egg-hatch-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(3px, 0.9dvh, 5px);
    width: min(94vw, 620px);
    margin: 0;
    font-size: clamp(0.56rem, 2.4dvh, 0.72rem);
  }

  html.is-touch .egg-hatch-stats span {
    padding: clamp(3px, 0.9dvh, 5px) 5px;
    border-radius: 6px;
  }

  html.is-touch .dig-result-gem {
    width: clamp(66px, 21dvh, 100px);
    height: clamp(66px, 21dvh, 100px);
    margin: 0 auto;
  }

  html.is-touch .dig-result-stone {
    width: 100%;
    height: 100%;
  }

  html.is-touch .della-reward-result-items {
    gap: clamp(42px, 9dvh, 60px);
    margin: -8px 0 24px;
  }

  html.is-touch .egg-hatch-result-monster,
  html.is-touch .companion-join-result-monster {
    width: min(68vw, 360px);
    height: clamp(116px, 37dvh, 210px);
    margin-bottom: 0;
  }

  html.is-touch .egg-hatch-result-monster img,
  html.is-touch .companion-join-result-monster img {
    max-width: min(54vw, 250px);
    max-height: clamp(108px, 34dvh, 198px);
  }

  html.is-touch .dig-result .dialogue-actions,
  html.is-touch .mom-reward-card .dialogue-actions,
  html.is-touch .egg-hatch-result .dialogue-actions,
  html.is-touch .companion-join-result .dialogue-actions {
    margin-top: clamp(2px, 1dvh, 8px);
  }

  html.is-touch .dig-result .dialogue-actions button,
  html.is-touch .mom-reward-card .dialogue-actions button,
  html.is-touch .egg-hatch-result .dialogue-actions button,
  html.is-touch .companion-join-result .dialogue-actions button {
    min-height: clamp(34px, 9dvh, 44px);
    padding: 0 16px;
    font-size: clamp(0.72rem, 3.1dvh, 0.92rem);
  }

  html.is-touch .modal.world-map-modal .modal-card,
  html.is-touch .modal.world-map-modal .shop-card {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
  }

  html.is-touch .modal.dex-full-modal,
  html.is-touch .modal.party-full-modal,
  html.is-touch .modal.clean-world-modal {
    padding: 0;
    place-items: stretch;
  }

  html.is-touch .modal.dex-full-modal .dex-modal,
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal,
  html.is-touch .modal.world-map-modal .party-modal {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    transform: none;
    border-radius: 0;
  }

  html.is-touch .modal.dex-full-modal .dex-modal {
    display: flex;
    flex-direction: column;
    padding: 8px;
    overflow: hidden;
  }

  html.is-touch .modal.dex-full-modal .dex-modal > p,
  html.is-touch .modal.dex-full-modal .dialogue-actions,
  html.is-touch .modal.dex-full-modal .dex-ability,
  html.is-touch .modal.dex-full-modal .dex-lore {
    display: none;
  }

  /* Compact two-row header: [Codex | chips] then [search | filters]. */
  html.is-touch .modal.dex-full-modal .dex-head {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
    row-gap: 5px;
    margin: 2px 44px 4px 2px;
  }
  html.is-touch .modal.dex-full-modal .dex-head h2 {
    display: block;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
  }
  html.is-touch .modal.dex-full-modal .dex-stats {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 5px;
  }
  html.is-touch .modal.dex-full-modal .dex-stats::-webkit-scrollbar { display: none; }
  html.is-touch .modal.dex-full-modal .dex-chip {
    padding: 2px 7px;
    font-size: clamp(0.5rem, 1.7dvh, 0.62rem);
  }
  html.is-touch .modal.dex-full-modal .dex-tools {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 5px;
  }
  html.is-touch .modal.dex-full-modal #dexSearch {
    flex: 1 1 120px;
    min-width: 90px;
    padding: 5px 10px;
    font-size: 0.72rem;
  }
  html.is-touch .modal.dex-full-modal .dex-filter { flex-wrap: nowrap; }
  html.is-touch .modal.dex-full-modal .dex-filter button {
    padding: 5px 9px;
    font-size: 0.6rem;
  }
  html.is-touch .modal.dex-full-modal .dex-state {
    position: static;
    padding: 1px 5px;
    font-size: 0.48rem;
  }

  html.is-touch .modal.dex-full-modal .dex-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0 2px 8px;
  }

  html.is-touch .modal.dex-full-modal .dex-card {
    grid-template-rows: auto auto auto;
    gap: 4px;
    min-height: 146px;
    padding: 7px;
    border-radius: 10px;
    contain-intrinsic-size: auto 146px;
  }

  html.is-touch .modal.dex-full-modal .dex-art-row {
    min-height: 78px;
    gap: 3px;
  }

  html.is-touch .modal.dex-full-modal .dex-form-slot {
    max-width: 68px;
    grid-template-rows: auto 15px;
    gap: 2px;
  }

  html.is-touch .modal.dex-full-modal .dex-arrow {
    margin-top: 26px;
    font-size: 0.82rem;
  }

  html.is-touch .modal.dex-full-modal .dex-form-name {
    font-size: clamp(0.48rem, 1.8dvh, 0.6rem);
    line-height: 1.05;
  }

  html.is-touch .modal.dex-full-modal .dex-form.locked {
    font-size: clamp(1rem, 4dvh, 1.35rem);
    border-radius: 6px;
  }

  html.is-touch .modal.dex-full-modal .dex-line-name {
    max-width: 100%;
    font-size: clamp(0.62rem, 2.2dvh, 0.78rem);
    line-height: 1.05;
  }

  html.is-touch .modal.dex-full-modal .dex-line-meta {
    min-height: 20px;
    padding-top: 3px;
    gap: 5px;
  }

  html.is-touch .modal.dex-full-modal .dex-line-meta .dex-type {
    display: block;
    font-size: clamp(0.5rem, 1.8dvh, 0.62rem);
  }

  html.is-touch .modal.dex-full-modal .dex-line-meta .power-badge.power-badge {
    min-height: 17px;
    padding: 1px 5px;
    font-size: clamp(0.48rem, 1.65dvh, 0.58rem);
  }

  /* Bag v2 on touch / landscape: a fixed flex column whose scrolling body tiles
     each section's rows into responsive columns, so the short-but-wide landscape
     viewport shows 2-3 items per line instead of one long single-column scroll. */
  html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: hidden;
  }
  html.is-touch .modal.world-map-modal .bag-modal-head {
    flex: 0 0 auto;
    gap: 5px;
    margin: 2px 44px 5px 2px;
  }
  html.is-touch .modal.world-map-modal .bag-modal-head h2 {
    margin: 0;
    font-size: clamp(1rem, 4.4dvh, 1.36rem);
    line-height: 1.05;
  }
  html.is-touch .modal.world-map-modal .bag-tools {
    flex-wrap: nowrap;
    gap: 5px;
  }
  html.is-touch .modal.world-map-modal #bagSearch {
    flex: 1 1 100px;
    min-width: 84px;
    padding: 5px 10px;
    font-size: 0.72rem;
  }
  html.is-touch .modal.world-map-modal .bag-filter {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  html.is-touch .modal.world-map-modal .bag-filter::-webkit-scrollbar { display: none; }
  html.is-touch .modal.world-map-modal .bag-filter button {
    padding: 5px 9px;
    font-size: 0.6rem;
    white-space: nowrap;
  }
  html.is-touch .modal.world-map-modal .bag-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 2px 2px 8px;
  }
  html.is-touch .modal.world-map-modal .bag-section {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 30vw, 280px), 1fr));
    gap: 5px;
    align-content: start;
  }
  html.is-touch .modal.world-map-modal .bag-section[data-bag-cat="recovery"] {
    grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 42vw, 360px), 1fr));
  }
  html.is-touch .modal.world-map-modal .bag-head {
    grid-column: 1 / -1;
    margin: 2px 0 1px;
    font-size: clamp(0.58rem, 1.9dvh, 0.7rem);
  }
  html.is-touch .modal.world-map-modal .bag-row {
    margin-top: 0;
    padding: 9px 11px;
  }
  html.is-touch .modal.world-map-modal .bag-row--recovery {
    grid-template-columns: minmax(0, 1fr) minmax(88px, auto);
    column-gap: 10px;
  }
  html.is-touch .modal.world-map-modal .bag-row--recovery .bag-right {
    justify-content: flex-end;
    gap: 6px;
    min-width: 88px;
  }
  html.is-touch .modal.world-map-modal .bag-row--recovery .bag-qty {
    padding-inline: 8px;
  }
  html.is-touch .modal.world-map-modal .bag-row--recovery .monster-meta {
    letter-spacing: 0.04em;
    line-height: 1.12;
  }
  html.is-touch .modal.world-map-modal .bag-row--prism,
  html.is-touch .modal.world-map-modal .bag-row--rift,
  html.is-touch .modal.world-map-modal .bag-stone-grid {
    grid-column: 1 / -1;
  }
  html.is-touch .modal.world-map-modal .bag-row button {
    min-height: clamp(30px, 8dvh, 40px);
  }
  html.is-touch .modal.world-map-modal .bag-row-icon,
  html.is-touch .modal.world-map-modal .bag-row .bag-item-glyph {
    width: clamp(30px, 9dvh, 40px);
    height: clamp(30px, 9dvh, 40px);
  }
  html.is-touch .modal.world-map-modal .bag-card--v2 .dialogue-actions {
    flex: 0 0 auto;
    margin: 5px 0 0;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: auto;
    gap: 10px;
    padding: 2px 2px 12px;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-item {
    grid-template-columns: clamp(54px, 12dvh, 72px) minmax(0, 1fr);
    align-items: start;
    min-height: 132px;
    gap: 8px;
    padding: 9px;
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-item img {
    width: clamp(54px, 12dvh, 72px);
    height: clamp(54px, 12dvh, 72px);
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-info {
    min-width: 0;
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-name-row {
    align-items: start;
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-item strong {
    font-size: clamp(0.78rem, 2.65dvh, 0.96rem);
    line-height: 1.08;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .lead-chip {
    padding: 2px 6px;
    font-size: 0.52rem;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .monster-meta {
    margin-top: 3px;
    font-size: clamp(0.55rem, 1.95dvh, 0.66rem);
    line-height: 1.16;
    overflow-wrap: anywhere;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .mini-hp {
    height: 6px;
    margin-top: 5px;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .mini-exp {
    height: 3px;
    margin-top: 3px;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 7px;
    width: 100%;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button {
    min-width: 0;
    min-height: 28px;
    padding: 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.56rem, 2.1dvh, 0.68rem);
    line-height: 1;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button[data-party-action="walk"] {
    grid-column: 1 / -1;
  }

  html.is-touch .modal.clean-world-modal .box-card--scroll,
  html.is-touch .modal.world-map-modal .box-card--scroll {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal .box-card--scroll h2,
  html.is-touch .modal.world-map-modal .box-card--scroll h2 {
    margin: 0;
    padding-right: 44px;
    font-size: clamp(1rem, 4.6dvh, 1.42rem);
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal .box-card--scroll > p,
  html.is-touch .modal.world-map-modal .box-card--scroll > p {
    display: none;
  }

  html.is-touch .modal.clean-world-modal .box-card--scroll .dialogue-actions,
  html.is-touch .modal.world-map-modal .box-card--scroll .dialogue-actions {
    flex: 0 0 auto;
    margin: 5px 0 0;
  }

  html.is-touch .modal.clean-world-modal .box-scroll,
  html.is-touch .modal.world-map-modal .box-scroll {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding-right: 3px;
    overflow: auto;
  }

  html.is-touch .modal.clean-world-modal .bag-target-card,
  html.is-touch .modal.world-map-modal .bag-target-card {
    width: 100vw;
    height: 100dvh;
  }

  html.is-touch .modal.clean-world-modal .bag-target-list,
  html.is-touch .modal.world-map-modal .bag-target-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding-bottom: 4px;
  }

  html.is-touch .modal.clean-world-modal .bag-target-row,
  html.is-touch .modal.world-map-modal .bag-target-row {
    grid-template-columns: clamp(36px, 9dvh, 46px) minmax(0, 1fr);
    gap: 5px 7px;
    min-height: 0;
    padding: 6px;
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal .bag-target-row img,
  html.is-touch .modal.world-map-modal .bag-target-row img {
    width: clamp(36px, 9dvh, 46px);
    height: clamp(36px, 9dvh, 46px);
  }

  html.is-touch .modal.clean-world-modal .bag-target-info strong,
  html.is-touch .modal.world-map-modal .bag-target-info strong {
    font-size: clamp(0.64rem, 2.1dvh, 0.78rem);
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal .bag-target-info .monster-meta,
  html.is-touch .modal.world-map-modal .bag-target-info .monster-meta {
    font-size: clamp(0.5rem, 1.65dvh, 0.6rem);
    line-height: 1.12;
  }

  html.is-touch .modal.clean-world-modal .bag-target-row button,
  html.is-touch .modal.world-map-modal .bag-target-row button {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 26px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.54rem, 1.8dvh, 0.64rem);
  }

  html.is-touch .modal.clean-world-modal .box-card--scroll h3,
  html.is-touch .modal.world-map-modal .box-card--scroll h3 {
    margin: 6px 0 4px;
    font-size: clamp(0.76rem, 2.8dvh, 0.92rem);
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal .box-list--monster-box,
  html.is-touch .modal.world-map-modal .box-list--monster-box {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 4px;
  }

  html.is-touch .modal.clean-world-modal .box-row--compact,
  html.is-touch .modal.world-map-modal .box-row--compact {
    grid-template-columns: clamp(38px, 10.5dvh, 48px) minmax(0, 1fr);
    gap: 5px 7px;
    padding: 6px;
    min-height: 0;
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal .box-row--compact img,
  html.is-touch .modal.world-map-modal .box-row--compact img {
    width: clamp(38px, 10.5dvh, 48px);
    height: clamp(38px, 10.5dvh, 48px);
  }

  html.is-touch .modal.clean-world-modal .box-row--compact .box-info strong,
  html.is-touch .modal.world-map-modal .box-row--compact .box-info strong {
    font-size: clamp(0.66rem, 2.2dvh, 0.78rem);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  html.is-touch .modal.clean-world-modal .box-row--compact .monster-meta,
  html.is-touch .modal.world-map-modal .box-row--compact .monster-meta {
    font-size: clamp(0.5rem, 1.65dvh, 0.6rem);
    line-height: 1.12;
  }

  html.is-touch .modal.clean-world-modal .box-list--monster-box .mini-hp,
  html.is-touch .modal.clean-world-modal .box-list--monster-box .mini-exp,
  html.is-touch .modal.clean-world-modal .box-list--monster-box .power-badge--current,
  html.is-touch .modal.world-map-modal .box-list--monster-box .mini-hp,
  html.is-touch .modal.world-map-modal .box-list--monster-box .mini-exp,
  html.is-touch .modal.world-map-modal .box-list--monster-box .power-badge--current {
    display: none;
  }

  html.is-touch .modal.clean-world-modal .box-row--compact .box-actions,
  html.is-touch .modal.world-map-modal .box-row--compact .box-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
  }

  html.is-touch .modal.clean-world-modal .box-actions button,
  html.is-touch .modal.world-map-modal .box-actions button {
    min-width: 0;
    min-height: 26px;
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.54rem, 1.8dvh, 0.64rem);
  }

  html.is-touch .modal.clean-world-modal .box-toolbar,
  html.is-touch .modal.world-map-modal .box-toolbar {
    gap: 5px;
    padding: 4px 0 7px;
  }

  html.is-touch .modal.clean-world-modal .box-toolbar-main,
  html.is-touch .modal.world-map-modal .box-toolbar-main {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 34%);
    gap: 6px;
  }

  html.is-touch .modal.clean-world-modal .box-filter-chips,
  html.is-touch .modal.world-map-modal .box-filter-chips {
    gap: 4px;
  }

  html.is-touch .modal.clean-world-modal .box-filter-chip,
  html.is-touch .modal.world-map-modal .box-filter-chip {
    min-height: 28px;
    padding: 0 8px;
    font-size: clamp(0.56rem, 1.85dvh, 0.68rem);
  }

  html.is-touch .modal.clean-world-modal .box-filter-chip em,
  html.is-touch .modal.world-map-modal .box-filter-chip em {
    padding: 1px 5px;
    font-size: clamp(0.5rem, 1.55dvh, 0.58rem);
  }

  html.is-touch .modal.clean-world-modal .box-sort,
  html.is-touch .modal.world-map-modal .box-sort {
    min-width: 0;
  }

  html.is-touch .modal.clean-world-modal .box-sort select,
  html.is-touch .modal.world-map-modal .box-sort select,
  html.is-touch .modal.clean-world-modal .box-search input,
  html.is-touch .modal.world-map-modal .box-search input {
    min-height: 32px;
    font-size: clamp(0.62rem, 2dvh, 0.74rem);
  }

  html.is-touch .modal.clean-world-modal .box-row--collection,
  html.is-touch .modal.world-map-modal .box-row--collection {
    grid-template-columns: 28px clamp(38px, 10.5dvh, 48px) minmax(0, 1fr);
  }

  html.is-touch .modal.clean-world-modal .box-fav-btn,
  html.is-touch .modal.world-map-modal .box-fav-btn {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: clamp(0.86rem, 2.6dvh, 1rem);
  }

  html.is-touch .modal.clean-world-modal .box-row--collection .box-actions,
  html.is-touch .modal.world-map-modal .box-row--collection .box-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    min-width: 0;
    width: 100%;
  }

  html.is-touch .modal.clean-world-modal .box-source-pill,
  html.is-touch .modal.world-map-modal .box-source-pill,
  html.is-touch .modal.clean-world-modal .box-seal,
  html.is-touch .modal.world-map-modal .box-seal,
  html.is-touch .modal.clean-world-modal .box-seals .rarity-seal,
  html.is-touch .modal.world-map-modal .box-seals .rarity-seal {
    min-height: 16px;
    padding: 1px 5px;
    font-size: clamp(0.48rem, 1.45dvh, 0.56rem);
  }

  html.is-touch .modal.clean-world-modal .box-result-count,
  html.is-touch .modal.world-map-modal .box-result-count {
    font-size: clamp(0.52rem, 1.7dvh, 0.62rem);
  }

  html.is-touch .nursery-card .nursery-slots {
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 5px 0;
  }

  html.is-touch .nursery-card .nursery-pens {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.is-touch .nursery-card .nursery-pen {
    padding: 6px;
  }

  html.is-touch .nursery-card .nursery-pen-head {
    margin-bottom: 4px;
  }

  html.is-touch .nursery-card .nursery-pen-head h3 {
    font-size: clamp(0.72rem, 2.35dvh, 0.84rem);
  }

  html.is-touch .nursery-card .nursery-pen-head span {
    font-size: clamp(0.5rem, 1.6dvh, 0.6rem);
  }

  html.is-touch .nursery-card .nursery-body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding-right: 2px;
  }

  html.is-touch .nursery-card .nursery-overview,
  html.is-touch .nursery-card .nursery-picker {
    flex: 0 0 auto;
    overflow: visible;
  }

  html.is-touch .nursery-card .nursery-overview > p {
    margin: 3px 0 5px;
    font-size: clamp(0.56rem, 1.85dvh, 0.66rem);
    line-height: 1.18;
  }

  html.is-touch .nursery-card .nursery-slot {
    grid-template-columns: clamp(38px, 10dvh, 46px) minmax(0, 1fr) auto;
    min-height: 0;
    gap: 6px;
    padding: 6px;
  }

  html.is-touch .nursery-card .nursery-slot.empty {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  html.is-touch .nursery-card .nursery-slot img {
    width: clamp(38px, 10dvh, 46px);
    height: clamp(38px, 10dvh, 46px);
  }

  html.is-touch .nursery-card .nursery-slot strong {
    font-size: clamp(0.66rem, 2.25dvh, 0.78rem);
    line-height: 1.05;
  }

  html.is-touch .nursery-card .nursery-slot span,
  html.is-touch .nursery-card .nursery-status span {
    font-size: clamp(0.5rem, 1.7dvh, 0.62rem);
    line-height: 1.12;
  }

  html.is-touch .nursery-card .nursery-slot button {
    min-height: 26px;
    padding: 0 7px;
  }

  html.is-touch .nursery-card .nursery-status {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
    margin: 5px 0;
    padding: 6px 8px;
    font-size: clamp(0.58rem, 1.95dvh, 0.7rem);
  }

  html.is-touch .nursery-card .nursery-candidate-head {
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr);
    align-items: end;
    gap: 8px;
    margin-top: 4px;
  }

  html.is-touch .nursery-card .monster-search {
    min-width: 0;
    gap: 2px;
    font-size: clamp(0.48rem, 1.55dvh, 0.58rem);
  }

  html.is-touch .nursery-card .monster-search input {
    min-height: 28px;
    padding: 0 8px;
    font-size: clamp(0.58rem, 1.9dvh, 0.7rem);
  }

  html.is-touch .nursery-card .nursery-scroll {
    flex: 0 1 auto;
    min-height: 138px;
    max-height: min(42dvh, 280px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .nursery-card .nursery-candidates {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
  }

  html.is-touch .nursery-card .nursery-candidates .box-row {
    grid-template-columns: clamp(36px, 9.5dvh, 44px) minmax(0, 1fr) max-content;
    gap: 5px 7px;
    padding: 6px;
    min-height: 0;
  }

  html.is-touch .nursery-card .nursery-candidates .box-row img {
    width: clamp(36px, 9.5dvh, 44px);
    height: clamp(36px, 9.5dvh, 44px);
  }

  html.is-touch .nursery-card .nursery-candidates .box-actions {
    grid-column: auto;
    display: flex;
  }

  html.is-touch .nursery-card .nursery-candidates .nursery-deposit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(42px, 1fr));
    gap: 4px;
  }

  @media (orientation: landscape) {
    html.is-touch .nursery-card .nursery-pens {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.is-touch .nursery-card .nursery-scroll {
      max-height: min(38dvh, 190px);
    }
  }

  @media (max-width: 620px) {
    html.is-touch .nursery-card .nursery-candidate-head {
      grid-template-columns: 1fr;
    }

    html.is-touch .nursery-card .nursery-candidates {
      grid-template-columns: 1fr;
    }

    html.is-touch .nursery-card .nursery-candidates .box-row {
      grid-template-columns: clamp(36px, 9.5dvh, 44px) minmax(0, 1fr);
    }

    html.is-touch .nursery-card .nursery-candidates .box-actions {
      grid-column: 1 / -1;
      display: grid;
    }
  }

  html.is-touch .modal.battle-switch-modal {
    padding: 0;
    place-items: center;
    place-content: center;
    background:
      radial-gradient(circle at 50% 46%, rgba(122, 210, 255, 0.16), transparent 42%),
      rgba(4, 7, 13, 0.66);
  }

  html.is-touch .battle-switch-card {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    overflow: hidden;
  }

  html.is-touch .battle-switch-grid {
    height: 100%;
    align-content: center;
    justify-content: center;
  }

  html.is-touch .battle-switch-close {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }

  html.is-touch .battle-switch-tile:hover:not(:disabled),
  html.is-touch .battle-switch-tile:focus-visible:not(:disabled) {
    transform: none;
  }

  html.is-touch .battle-action-menu {
    left: calc(var(--battle-touch-edge) + var(--battle-touch-left-width) + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    width: clamp(118px, 20vw, 156px);
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 18;
  }

  html.is-touch .battle-action-menu button,
  html.is-touch .battle-side-choice {
    min-height: 42px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    text-align: left;
  }

  html.is-touch .battle-side-choice span,
  html.is-touch .battle-action-menu span {
    font-size: 0.68rem;
    line-height: 1.05;
  }

  html.is-touch .battle-side-choice small,
  html.is-touch .battle-action-menu small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.54rem;
    color: rgba(229, 238, 250, 0.72);
  }

  html.is-touch .battle-action-menu.is-ball-menu {
    width: clamp(132px, 23vw, 176px);
  }

  html.is-touch .battle-side-choice::before {
    content: attr(data-hotkey);
    position: absolute;
    left: 6px;
    top: 6px;
    width: 13px;
    height: 13px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    color: rgba(246, 251, 255, 0.78);
    background: rgba(5, 8, 14, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;
  }

  html.is-touch .battle-side-choice {
    position: relative;
    padding-left: 24px;
  }
}

@media (max-width: 960px) and (max-height: 360px), (pointer: coarse) and (max-height: 360px){
  html.is-touch .egg-hatch-stage,
  html.is-touch .companion-join-stage {
    top: 42%;
    transform: translate(-50%, -50%) scale(0.7);
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal.world-map-modal .atlas-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding:
      max(15px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  html.is-touch .modal.world-map-modal .atlas-modal > h2,
  html.is-touch .modal.world-map-modal .atlas-modal > p,
  html.is-touch .modal.world-map-modal .atlas-toolbar,
  html.is-touch .modal.world-map-modal .atlas-legend {
    flex: 0 0 auto;
    overflow: hidden;
    transition:
      max-height 170ms ease,
      margin 170ms ease,
      opacity 130ms ease,
      transform 170ms ease;
  }

  html.is-touch .modal.world-map-modal .atlas-modal > h2 {
    max-height: 34px;
    margin: 0 44px 4px 0;
    font-size: clamp(1rem, 5dvh, 1.35rem);
    line-height: 1.05;
  }

  html.is-touch .modal.world-map-modal .atlas-modal > p {
    max-height: 38px;
    margin: 0 44px 5px 0;
    font-size: clamp(0.56rem, 2.45dvh, 0.72rem);
    line-height: 1.18;
  }

  html.is-touch .modal.world-map-modal .atlas-toolbar {
    max-height: 34px;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0 44px 4px 0;
  }

  html.is-touch .modal.world-map-modal .atlas-find,
  html.is-touch .modal.world-map-modal .atlas-map-search {
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    font-size: clamp(0.52rem, 2.25dvh, 0.66rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-find select,
  html.is-touch .modal.world-map-modal .atlas-map-search input,
  html.is-touch .modal.world-map-modal .atlas-all {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 7px;
    font-size: clamp(0.52rem, 2.25dvh, 0.66rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-find select,
  html.is-touch .modal.world-map-modal .atlas-map-search input {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  html.is-touch .modal.world-map-modal .atlas-legend {
    max-height: 18px;
    margin: 0 44px 4px 0;
    font-size: clamp(0.48rem, 2dvh, 0.58rem);
    line-height: 1;
    white-space: nowrap;
  }

  html.is-touch .modal.world-map-modal .atlas-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    gap: 8px;
    padding: 2px 3px max(8px, env(safe-area-inset-bottom)) 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .modal.world-map-modal .atlas-region-title {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 5px;
    padding: 5px 2px 4px;
    background: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.58rem, 2.35dvh, 0.72rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  html.is-touch .modal.world-map-modal .atlas-chip {
    min-height: clamp(42px, 17dvh, 56px);
    gap: 3px;
    padding: 6px 7px;
    border-radius: 7px;
  }

  html.is-touch .modal.world-map-modal .atlas-chip-name {
    font-size: clamp(0.58rem, 2.45dvh, 0.78rem);
    line-height: 1.05;
  }

  html.is-touch .modal.world-map-modal .atlas-chip-meta {
    gap: 5px;
  }

  html.is-touch .modal.world-map-modal .atlas-player-markers {
    gap: 3px;
  }

  html.is-touch .modal.world-map-modal .atlas-player-dot {
    width: 10px;
    height: 10px;
    border-width: 1px;
  }

  html.is-touch .modal.world-map-modal .atlas-player-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 2px 3px max(8px, env(safe-area-inset-bottom)) 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .modal.world-map-modal .atlas-player-row {
    min-height: clamp(42px, 17dvh, 56px);
    gap: 6px;
    padding: 6px 7px;
    border-radius: 7px;
  }

  html.is-touch .modal.world-map-modal .atlas-player-row-dot {
    width: 13px;
    height: 13px;
    border-width: 1px;
  }

  html.is-touch .modal.world-map-modal .atlas-player-row-copy strong {
    font-size: clamp(0.58rem, 2.45dvh, 0.78rem);
  }

  html.is-touch .modal.world-map-modal .atlas-player-row-copy small,
  html.is-touch .modal.world-map-modal .atlas-player-status {
    font-size: clamp(0.43rem, 1.85dvh, 0.55rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-chip-tag,
  html.is-touch .modal.world-map-modal .atlas-chip-mark,
  html.is-touch .modal.world-map-modal .atlas-seal {
    font-size: clamp(0.43rem, 1.85dvh, 0.55rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-modal.atlas-scrolled > h2,
  html.is-touch .modal.world-map-modal .atlas-modal.atlas-scrolled > p,
  html.is-touch .modal.world-map-modal .atlas-modal.atlas-scrolled .atlas-toolbar,
  html.is-touch .modal.world-map-modal .atlas-modal.atlas-scrolled .atlas-legend {
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }

  /* Receiver forecast on touch landscape: compact rows, thumb-sized Fly
     buttons, and its own internal scroll so five signals never crowd the
     chip list off a short viewport. It deliberately does NOT collapse with
     the header - the countdowns + Fly are the whole point of the view. */
  html.is-touch .modal.world-map-modal .atlas-roam-forecast {
    flex: 0 0 auto;
    max-height: 51dvh; /* all five signals fit uncut on a 390px-tall phone */
    overflow: auto;
    margin: 0 0 5px;
    padding: 6px 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.is-touch .modal.world-map-modal .atlas-roam-row {
    font-size: clamp(0.56rem, 2.35dvh, 0.74rem);
  }
  html.is-touch .modal.world-map-modal .atlas-roam-fly {
    min-height: clamp(30px, 8dvh, 40px);
    padding: 2px 14px;
  }

  html.is-touch .battle-switch-card {
    display: grid;
    place-items: center;
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  html.is-touch .battle-switch-grid {
    --switch-gap: clamp(7px, 2dvh, 11px);
    --switch-tile: min(29dvw, calc((100dvh - 36px - var(--switch-gap)) / 2));
    width: min(calc(100vw - 24px), calc(var(--switch-tile) * 3 + var(--switch-gap) * 2));
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--switch-tile));
    gap: var(--switch-gap);
    height: auto;
    max-height: calc(100dvh - 20px);
  }

  html.is-touch .battle-switch-tile {
    width: var(--switch-tile);
    height: var(--switch-tile);
    padding: 7px 7px 16px;
    border-radius: 12px;
  }

  html.is-touch .battle-switch-art {
    inset: 5px 6px 21px;
  }

  html.is-touch .battle-switch-name {
    left: 5px;
    right: 5px;
    bottom: 6px;
    font-size: clamp(0.54rem, 2.25dvh, 0.72rem);
    line-height: 1;
  }

  html.is-touch .battle-switch-hp {
    left: 7px;
    right: 7px;
    bottom: 3px;
    height: 3px;
  }
}

/* Final mobile debug override: this must stay after the mobile hard-lock rules. */
html.is-touch .debug-tile-tools {
  display: none !important;
}

html.is-touch .debug-tile-tools.is-open {
  display: grid !important;
  position: fixed;
  inset: 0;
  --debug-pad-left: max(16px, env(safe-area-inset-left));
  --debug-pad-bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 46;
  pointer-events: none;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-toolbar {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: calc(max(8px, env(safe-area-inset-right)) + clamp(112px, 23vw, 164px) + 8px);
  z-index: 48;
  display: flex;
  gap: 0;
  pointer-events: auto;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-dock {
  display: none;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-toggle,
html.is-touch .debug-tile-tools.is-open .debug-tile-panel button {
  min-height: 34px;
  padding: 4px 6px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, rgba(32, 33, 36, 0.96), rgba(0, 0, 0, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -7px 10px rgba(0, 0, 0, 0.62),
    0 4px 10px rgba(0, 0, 0, 0.32);
  font-size: 0.62rem;
  line-height: 1;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-toggle {
  min-width: 68px;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-panel {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(86px, env(safe-area-inset-bottom));
  width: clamp(112px, 23vw, 164px);
  max-height: none;
  padding: 8px;
  gap: 6px;
  display: grid;
  /* Natural row heights so every tool (incl. Erase at the bottom) is part of
     the scrollable content instead of being squeezed into the leftover row. */
  grid-auto-rows: max-content;
  align-content: start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  pointer-events: auto;
  touch-action: pan-y;
  border-radius: 8px;
  background:
    radial-gradient(180px 160px at 28% 0%, rgba(255, 255, 255, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(12, 13, 15, 0.98), rgba(0, 0, 0, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

html.is-touch .debug-tile-tools.is-open .debug-tile-readout {
  min-height: 0;
  padding: 5px 6px;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-color: rgba(255, 255, 255, 0.18);
  font-size: 0.54rem;
  line-height: 1.2;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 5px;
}

html.is-touch .debug-tile-tools.is-open .debug-tile-actions [data-debug-erase] {
  grid-column: auto;
  border-color: rgba(255, 125, 125, 0.68);
}

html.is-touch .debug-tile-tools.is-open .debug-tile-actions button.is-selected {
  color: #000;
  background: linear-gradient(180deg, #fff, #bfc7d3);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 3px rgba(127, 231, 255, 0.7);
}

html.is-touch .debug-tile-tools.is-open .debug-tile-file-actions {
  position: static;
  width: 100%;
  transform: none;
  display: contents;
  pointer-events: auto;
}

html.is-touch .debug-tile-tools.is-open #debugTileFileBtn,
html.is-touch .debug-tile-tools.is-open #debugTileExportBtn,
html.is-touch .debug-tile-tools.is-open #debugTileCopyBtn {
  display: none;
}

html.is-touch .debug-tile-tools.is-open #debugBugBtn,
html.is-touch .debug-tile-tools.is-open #debugHeartrootTacticsBtn,
html.is-touch .debug-tile-tools.is-open #debugTileSaveBtn {
  display: none;
}

html.is-touch .debug-tile-tools.is-open .debug-mobile-actions {
  position: fixed;
  left: var(--debug-pad-left);
  bottom: calc(var(--debug-pad-bottom) + 142px);
  z-index: 49;
  width: 132px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  pointer-events: auto;
}

html.is-touch .debug-tile-tools.is-open .debug-mobile-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 4px 5px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, rgba(32, 33, 36, 0.96), rgba(0, 0, 0, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -7px 10px rgba(0, 0, 0, 0.62),
    0 4px 10px rgba(0, 0, 0, 0.32);
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

html.is-touch body.mobile-debug-open #touchControls {
  z-index: 44;
}

html.is-touch body.mobile-debug-open #touchControls .tc-a,
html.is-touch body.mobile-debug-open #touchControls .tc-bike {
  opacity: 0;
  pointer-events: none;
}

html.is-touch body.mobile-debug-open #touchControls .tc-pad {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

html.is-touch body.mobile-debug-open #touchControls .tc-menu {
  opacity: 1;
  pointer-events: auto;
}

html.is-touch .starter-scene > p {
  display: none;
}

html.is-touch .starter-scene .starter-grid {
  margin-top: 8px;
}

html.is-touch .modal.clean-world-modal .colosseum-card {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  gap: 8px;
}

html.is-touch .colosseum-hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
}

html.is-touch .modal.clean-world-modal .colosseum-card h2 {
  font-size: clamp(1rem, 5dvh, 1.45rem);
}

html.is-touch .modal.clean-world-modal .colosseum-card p {
  font-size: clamp(0.66rem, 2.5dvh, 0.84rem);
  line-height: 1.2;
}

html.is-touch .colosseum-score {
  grid-template-columns: repeat(5, auto);
  justify-content: start;
  min-width: 0;
  padding: 5px 7px;
}

html.is-touch .colosseum-active-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 8px;
}

html.is-touch .colosseum-active-run .dialogue-actions {
  grid-column: 1 / -1;
}

html.is-touch .colosseum-cups,
html.is-touch .colosseum-bracket.is-run {
  grid-template-columns: 1fr;
}

html.is-touch .colosseum-cups {
  flex: 0 0 auto;
  align-content: start;
  min-height: max-content;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}

html.is-touch .colosseum-cup {
  grid-template-rows: auto auto auto;
  gap: 7px;
  padding: 8px;
  overflow: visible;
}

html.is-touch .colosseum-prize {
  grid-template-columns: 48px minmax(0, 1fr);
}

html.is-touch .colosseum-prize.compact,
html.is-touch .colosseum-prize.victory {
  grid-template-columns: 52px minmax(0, 1fr);
  min-width: 0;
}

html.is-touch .colosseum-bracket {
  gap: 5px;
  overflow: visible;
}

html.is-touch .colosseum-round {
  padding: 6px 7px;
}

html.is-touch .colosseum-round small,
html.is-touch .colosseum-team span {
  font-size: clamp(0.52rem, 2dvh, 0.66rem);
}

html.is-touch .modal.clean-world-modal .colosseum-card .dialogue-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 7px;
}

html.is-touch .modal.clean-world-modal .colosseum-card button {
  min-height: 36px;
  padding: 6px 8px;
  font-size: clamp(0.62rem, 2.35dvh, 0.82rem);
}

html.is-touch .modal.clean-world-modal .colosseum-board-card,
html.is-touch .modal.clean-world-modal .colosseum-victory-card,
html.is-touch .modal.clean-world-modal .colosseum-streak-card {
  overflow: hidden;
}

html.is-touch .modal.clean-world-modal .colosseum-board-card {
  display: flex;
  flex-direction: column;
}

html.is-touch .modal.colosseum-full-modal {
  padding: 0;
}

html.is-touch .modal.colosseum-full-modal .colosseum-card {
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}

html.is-touch .modal.colosseum-full-modal .world-modal-close {
  top: max(7px, env(safe-area-inset-top));
  right: max(7px, env(safe-area-inset-right));
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  font-size: 1.35rem;
}

html.is-touch .colosseum-board-stage,
html.is-touch .colosseum-victory-stage,
html.is-touch .colosseum-streak-stage {
  flex: 1 1 0;
  min-height: 0;
}

html.is-touch .colosseum-streak-stage {
  --colosseum-streak-frame: min(360px, 76vw, 44dvh);
  --chest-cine-rise: 82dvh;
  padding: 9px;
}

/* Portrait: the loot copy rises from the bottom edge as a sheet while the
 * chest nudges up; landscape swaps this for a right-side panel below. */
html.is-touch .colosseum-streak-copy {
  left: 10px;
  right: 10px;
  top: auto;
  bottom: 10px;
  width: auto;
  max-height: min(46dvh, calc(100% - 20px));
  gap: 7px;
  padding: 9px;
  transform: translateY(30px);
}

html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-copy {
  animation: colosseumStreakCopyInUp 820ms 1550ms ease-out both;
}

html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-chest-wrap {
  transform: translateY(calc(var(--colosseum-streak-frame) * -0.3));
}

html.is-touch .colosseum-streak-copy h2 {
  font-size: clamp(1.08rem, 5dvh, 1.55rem);
}

html.is-touch .colosseum-streak-loot {
  gap: 6px;
}

html.is-touch .colosseum-streak-loot-item {
  grid-template-columns: 40px minmax(0, 1fr);
  padding: 7px;
}

html.is-touch .colosseum-streak-loot-item span {
  width: 40px;
  height: 40px;
}

html.is-touch .colosseum-board-stage {
  aspect-ratio: auto;
}

html.is-touch .colosseum-board-actions {
  position: static;
  right: auto;
  bottom: auto;
  z-index: 10;
  width: 100%;
  align-self: stretch;
  flex: 0 0 auto;
  margin: 0;
}

html.is-touch .modal.clean-world-modal .colosseum-board-actions button {
  color: #050505;
  background: linear-gradient(180deg, #fff7d6, #e7a62f) !important;
  border-color: rgba(255, 255, 255, 0.62);
}

html.is-touch .colosseum-watch-strip {
  gap: 5px;
  padding-bottom: 2px;
}

html.is-touch .colosseum-team-select-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.is-touch .colosseum-team-select-head {
  padding: 7px 8px;
}

html.is-touch .colosseum-team-select-head p:not(.colosseum-kicker) {
  display: none;
}

html.is-touch .colosseum-team-select-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.is-touch .modal.clean-world-modal .colosseum-card .colosseum-team-pick {
  min-height: 74px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 7px 7px 11px;
  gap: 2px 7px;
}

html.is-touch .colosseum-team-pick-art {
  width: 48px;
  height: 48px;
}

html.is-touch .colosseum-team-pick strong {
  font-size: clamp(0.58rem, 2.2dvh, 0.76rem);
}

html.is-touch .colosseum-team-pick small {
  font-size: clamp(0.48rem, 1.9dvh, 0.62rem);
}

html.is-touch .colosseum-duo-note {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}

html.is-touch .colosseum-duo-note strong,
html.is-touch .colosseum-duo-note span {
  max-width: 100%;
  white-space: normal;
}

html.is-touch .colosseum-vs-card {
  overflow: hidden;
}

html.is-touch .colosseum-vs-portrait {
  top: 12%;
  bottom: 28%;
  width: 36%;
  border-radius: 7px;
}

html.is-touch .colosseum-vs-portrait.is-player {
  left: max(8px, env(safe-area-inset-left));
}

html.is-touch .colosseum-vs-portrait.is-opponent {
  right: max(8px, env(safe-area-inset-right));
}

html.is-touch .colosseum-vs-card.is-duo .colosseum-vs-portrait {
  width: 31%;
}

html.is-touch .colosseum-vs-card.is-duo .colosseum-vs-portrait.is-player-main {
  left: max(6px, env(safe-area-inset-left));
  top: 10%;
  bottom: 41%;
}

html.is-touch .colosseum-vs-card.is-duo .colosseum-vs-portrait.is-player-ally {
  left: 16%;
  top: 40%;
  bottom: 15%;
}

html.is-touch .colosseum-vs-card.is-duo .colosseum-vs-portrait.is-opponent-main {
  right: max(6px, env(safe-area-inset-right));
  top: 10%;
  bottom: 41%;
}

html.is-touch .colosseum-vs-card.is-duo .colosseum-vs-portrait.is-opponent-ally {
  right: 16%;
  top: 40%;
  bottom: 15%;
}

html.is-touch .colosseum-vs-portrait div {
  padding: 7px 8px;
}

html.is-touch .colosseum-vs-portrait small {
  font-size: clamp(0.42rem, 1.65dvh, 0.56rem);
}

html.is-touch .colosseum-vs-portrait strong {
  font-size: clamp(0.72rem, 3dvh, 1rem);
}

html.is-touch .colosseum-vs-mark {
  top: 40%;
  width: clamp(58px, 15dvh, 92px);
  font-size: clamp(0.95rem, 4.4dvh, 1.8rem);
}

html.is-touch .colosseum-vs-teams {
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  bottom: max(56px, calc(env(safe-area-inset-bottom) + 46px));
  gap: 7px;
}

html.is-touch .colosseum-vs-teams > div {
  gap: 4px;
}

html.is-touch .colosseum-vs-teams span {
  max-width: 96px;
  padding: 3px 5px;
  font-size: clamp(0.46rem, 1.8dvh, 0.6rem);
}

html.is-touch .colosseum-vs-teams img {
  width: clamp(18px, 4.6dvh, 24px);
  height: clamp(18px, 4.6dvh, 24px);
}

html.is-touch .modal.clean-world-modal .colosseum-card #colosseumVsSkip {
  bottom: max(8px, env(safe-area-inset-bottom));
  width: min(230px, 48vw);
}

html.is-touch .colosseum-board-summary {
  left: 2%;
  right: 2%;
  top: 2%;
  gap: 7px;
}

html.is-touch .colosseum-board-summary > div:first-child {
  max-width: 48%;
  padding: 7px 8px;
}

html.is-touch .colosseum-board-summary .colosseum-prize {
  width: 32%;
  min-width: 118px;
  padding: 6px;
}

html.is-touch .colosseum-board-summary .colosseum-prize img {
  width: 42px;
}

html.is-touch .colosseum-board-slot {
  width: var(--slot-w);
  height: var(--slot-h);
  min-height: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px;
  padding: 5px;
}

html.is-touch .colosseum-bracket-box {
  width: var(--slot-w);
  height: var(--slot-h);
  padding: 3px;
  border-radius: 6px;
  gap: 1px;
}

html.is-touch .colosseum-bracket-box small {
  font-size: clamp(0.25rem, 1.08dvh, 0.38rem);
}

html.is-touch .colosseum-bracket-box strong {
  font-size: clamp(0.32rem, 1.35dvh, 0.48rem);
}

html.is-touch .colosseum-bracket-route polyline {
  stroke-width: 1.25;
}

html.is-touch .colosseum-bracket-route polyline.is-player-line {
  stroke-width: 2.2;
}

html.is-touch .colosseum-board-monster {
  width: 34px;
  height: 34px;
}

html.is-touch .colosseum-board-slot-copy small {
  font-size: clamp(0.38rem, 1.55dvh, 0.48rem);
  line-height: 1;
  white-space: nowrap;
}

html.is-touch .colosseum-board-slot-copy strong {
  font-size: clamp(0.48rem, 1.85dvh, 0.62rem);
  line-height: 1.05;
}

html.is-touch .colosseum-board-slot-copy em {
  display: none;
}

html.is-touch .colosseum-board-team {
  display: none;
}

html.is-touch .colosseum-board-monster img {
  width: 110%;
  height: 110%;
  filter: none;
}

html.is-touch .colosseum-player-marker {
  width: 46px;
  height: 28px;
  font-size: 0.58rem;
}

html.is-touch .colosseum-victory-copy {
  left: 3%;
  top: 4%;
  max-width: 48%;
  padding: 8px 9px;
}

html.is-touch .colosseum-victory-rewards {
  width: min(52vw, 420px);
  gap: clamp(10px, 3vw, 20px);
}

html.is-touch .colosseum-reward-icon {
  width: clamp(42px, 9vw, 58px);
}

html.is-touch .colosseum-victory-reward .colosseum-reward-icon:has(img) {
  width: clamp(64px, 16dvh, 96px);
}

html.is-touch .colosseum-victory-reward.is-egg-prize {
  width: clamp(102px, 22vw, 136px);
  min-height: clamp(108px, 24vw, 142px);
  padding: 0;
}

html.is-touch .colosseum-victory-reward.is-egg-prize .colosseum-reward-icon {
  width: clamp(88px, 19vw, 120px);
}

html.is-touch .colosseum-victory-slots {
  left: 3%;
  right: 3%;
  bottom: 3%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

html.is-touch .colosseum-victory-slots.colosseum-victory-bracket-list {
  left: max(8px, env(safe-area-inset-left));
  right: auto;
  top: max(106px, 27%);
  bottom: auto;
  width: min(42vw, 350px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

html.is-touch .colosseum-victory-slots.colosseum-victory-beaten {
  width: min(44vw, 250px);
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

html.is-touch .colosseum-victory-entrant {
  padding: 5px 6px;
}

html.is-touch .colosseum-victory-entrant small {
  font-size: clamp(0.38rem, 1.45dvh, 0.5rem);
}

html.is-touch .colosseum-victory-entrant strong {
  font-size: clamp(0.52rem, 2dvh, 0.68rem);
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot {
  min-height: 44px;
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal.clean-world-modal .colosseum-card {
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    gap: 6px;
  }

  html.is-touch .colosseum-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 8px;
    padding-right: max(62px, calc(env(safe-area-inset-right) + 62px));
  }

  html.is-touch .colosseum-hero p:not(.colosseum-kicker) {
    display: none;
  }

  html.is-touch .modal.clean-world-modal .colosseum-card h2 {
    font-size: clamp(0.98rem, 4.5dvh, 1.28rem);
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal .colosseum-card p {
    margin-top: 2px;
  }

  html.is-touch .colosseum-kicker {
    font-size: clamp(0.52rem, 2.05dvh, 0.66rem);
  }

  /* Streak chest cinematic in landscape: the chest opens centered at near
   * full screen height, then glides left while the loot panel slides in on
   * the right - the portrait bottom-sheet layout doesn't fit here. */
  html.is-touch .colosseum-streak-stage {
    --colosseum-streak-frame: min(76dvh, 44vw);
    padding: clamp(8px, 1.8dvh, 14px) clamp(10px, 2.4vw, 18px);
  }

  html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-chest-wrap {
    transform: translateX(-44%);
  }

  html.is-touch .colosseum-streak-copy {
    left: auto;
    right: 10px;
    top: 50%;
    bottom: auto;
    width: min(50%, 430px);
    max-height: calc(100% - 16px);
    overflow: hidden auto;
    gap: clamp(5px, 1.6dvh, 8px);
    padding: clamp(7px, 2dvh, 10px) clamp(8px, 1.6vw, 12px);
    transform: translateY(-50%) translateX(36px);
  }

  html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-copy {
    animation: colosseumStreakCopyIn 820ms 1550ms ease-out both;
  }

  html.is-touch .colosseum-streak-copy h2 {
    font-size: clamp(1.05rem, 6.5dvh, 1.6rem);
  }

  html.is-touch .colosseum-streak-copy p {
    font-size: clamp(0.6rem, 2.6dvh, 0.8rem);
  }

  html.is-touch .colosseum-streak-loot {
    gap: clamp(4px, 1.4dvh, 7px);
  }

  html.is-touch .colosseum-streak-loot-item {
    grid-template-columns: clamp(30px, 9dvh, 38px) minmax(0, 1fr);
    padding: clamp(4px, 1.6dvh, 7px) 8px;
  }

  html.is-touch .colosseum-streak-loot-item span {
    width: clamp(30px, 9dvh, 38px);
    height: clamp(30px, 9dvh, 38px);
    font-size: clamp(0.7rem, 2.6dvh, 0.9rem);
  }

  html.is-touch .colosseum-streak-loot-item strong {
    font-size: clamp(0.78rem, 3.2dvh, 1rem);
  }

  html.is-touch .colosseum-streak-loot-item small {
    font-size: clamp(0.56rem, 2.2dvh, 0.68rem);
  }

  html.is-touch .colosseum-score {
    grid-template-columns: repeat(5, auto);
    gap: 0 7px;
    min-width: 230px;
    padding: 4px 7px;
  }

  html.is-touch .colosseum-score span {
    font-size: clamp(0.86rem, 4dvh, 1.12rem);
  }

  html.is-touch .colosseum-score small {
    font-size: clamp(0.48rem, 1.9dvh, 0.58rem);
  }

  html.is-touch .colosseum-active-run {
    grid-template-columns: minmax(0, 1fr) auto minmax(170px, 32%);
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
  }

  html.is-touch .colosseum-active-run .dialogue-actions {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.is-touch .colosseum-cups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  html.is-touch .colosseum-cup {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 5px;
    padding: 7px;
    overflow: hidden;
  }

  html.is-touch .colosseum-prize {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 7px;
  }

  html.is-touch .colosseum-prize h3 {
    font-size: clamp(0.76rem, 3.1dvh, 0.92rem);
    line-height: 1.05;
  }

  html.is-touch .colosseum-prize p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: clamp(0.56rem, 2.05dvh, 0.68rem);
  }

  html.is-touch .colosseum-prize small {
    font-size: clamp(0.5rem, 1.9dvh, 0.62rem);
  }

  html.is-touch .colosseum-bracket {
    gap: 4px;
    overflow: hidden;
  }

  html.is-touch .colosseum-round {
    padding: 4px 5px;
  }

  html.is-touch .colosseum-round strong {
    font-size: clamp(0.58rem, 2.25dvh, 0.7rem);
    line-height: 1.05;
  }

  html.is-touch .colosseum-round small {
    margin-top: 1px;
    font-size: clamp(0.48rem, 1.85dvh, 0.58rem);
    line-height: 1.05;
  }

  html.is-touch .colosseum-team {
    display: none;
  }

  html.is-touch .colosseum-team-select-head {
    display: none;
  }

  html.is-touch .colosseum-team-select-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal .colosseum-card .colosseum-team-pick {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 5px 5px 9px;
  }

  html.is-touch .colosseum-team-pick-art {
    width: 38px;
    height: 38px;
  }

  html.is-touch .colosseum-watch-head {
    padding: 6px 8px;
  }

  html.is-touch .colosseum-watch-stage {
    grid-template-columns: minmax(0, 1fr) clamp(38px, 9dvh, 54px) minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }

  html.is-touch .colosseum-watch-fighter {
    grid-template-columns: clamp(58px, 18dvh, 82px) minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
  }

  html.is-touch .colosseum-watch-portrait img {
    object-fit: contain;
    object-position: center bottom;
    background: radial-gradient(circle at 50% 32%, rgba(255, 207, 115, 0.18), rgba(0, 0, 0, 0.64) 72%);
  }

  html.is-touch .colosseum-watch-fighter strong {
    font-size: clamp(0.68rem, 2.65dvh, 0.9rem);
  }

  html.is-touch .colosseum-watch-fighter small {
    font-size: clamp(0.48rem, 1.9dvh, 0.62rem);
  }

  html.is-touch .colosseum-watch-stage p {
    min-height: 34px;
    padding: 6px 8px;
    font-size: clamp(0.52rem, 2dvh, 0.68rem);
  }

  html.is-touch .colosseum-vs-portrait {
    top: max(8px, env(safe-area-inset-top));
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 68px));
    width: min(31vw, 238px);
    background:
      radial-gradient(circle at 50% 30%, rgba(255, 222, 154, 0.18), transparent 44%),
      linear-gradient(180deg, rgba(22, 23, 29, 0.96), rgba(4, 5, 8, 0.98));
  }

  html.is-touch .colosseum-vs-portrait img {
    object-fit: contain;
    object-position: center bottom;
    box-sizing: border-box;
    padding: 4px 4px 0;
  }

  html.is-touch .colosseum-vs-portrait div {
    padding: 5px 7px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.92));
  }

  html.is-touch .colosseum-vs-mark {
    top: 39%;
    width: clamp(52px, 15dvh, 78px);
  }

  html.is-touch .colosseum-vs-teams {
    bottom: max(42px, calc(env(safe-area-inset-bottom) + 38px));
  }

  html.is-touch .colosseum-vs-teams span {
    max-width: 84px;
  }

  html.is-touch .modal.clean-world-modal .colosseum-card #colosseumVsSkip {
    bottom: max(5px, env(safe-area-inset-bottom));
  }

  html.is-touch .modal.clean-world-modal .colosseum-card button {
    min-height: 32px;
    padding: 5px 7px;
    font-size: clamp(0.58rem, 2.15dvh, 0.74rem);
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal .colosseum-board-card {
    gap: 5px;
  }

  html.is-touch .colosseum-board-summary {
    left: 1.5%;
    right: max(72px, calc(env(safe-area-inset-right) + 72px));
    top: 1.5%;
  }

  html.is-touch .colosseum-board-summary > div:first-child {
    max-width: 42%;
    padding: 5px 6px;
  }

  html.is-touch .colosseum-board-summary h2 {
    font-size: clamp(0.74rem, 3.1dvh, 0.98rem);
    line-height: 1.05;
  }

  html.is-touch .colosseum-board-summary p:not(.colosseum-kicker) {
    display: none;
  }

  html.is-touch .colosseum-board-summary .colosseum-prize {
    width: auto;
    min-width: 96px;
    max-width: 190px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 5px;
  }

  html.is-touch .colosseum-board-summary .colosseum-prize strong {
    font-size: clamp(0.58rem, 2.2dvh, 0.74rem);
    line-height: 1.05;
  }

  html.is-touch .colosseum-board-summary .colosseum-prize img {
    width: 34px;
  }

  html.is-touch .colosseum-board-actions {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  html.is-touch .colosseum-board-slot {
    width: max(var(--slot-w), 88px);
    height: max(var(--slot-h), 30px);
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
  }

  html.is-touch .colosseum-board-monster {
    width: 28px;
    height: 28px;
  }

  html.is-touch .colosseum-board-slot-copy small {
    font-size: clamp(0.36rem, 1.45dvh, 0.44rem);
  }

  html.is-touch .colosseum-board-slot-copy strong {
    font-size: clamp(0.44rem, 1.75dvh, 0.56rem);
  }

  html.is-touch .colosseum-player-marker {
    width: 40px;
    height: 24px;
    font-size: 0.52rem;
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  html.is-touch .colosseum-prize p,
  html.is-touch .colosseum-board-summary .colosseum-prize {
    display: none;
  }

  html.is-touch .colosseum-board-summary > div:first-child {
    max-width: 56%;
  }

  html.is-touch .colosseum-board-actions {
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal .colosseum-card button {
    min-height: 30px;
  }
}

html.is-touch .colosseum-victory-copy {
  left: max(8px, env(safe-area-inset-left));
  top: max(8px, env(safe-area-inset-top));
  width: min(48vw, 230px);
  max-width: calc(100% - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
  box-sizing: border-box;
  padding: 7px 8px;
}

html.is-touch .colosseum-victory-copy h2 {
  font-size: clamp(0.86rem, 3.3dvh, 1.08rem);
  line-height: 1.04;
}

html.is-touch .colosseum-victory-copy p:not(.colosseum-kicker) {
  margin-top: 3px;
  font-size: clamp(0.56rem, 2.1dvh, 0.68rem);
  line-height: 1.12;
}

html.is-touch .colosseum-victory-rewards {
  justify-self: center;
  align-self: center;
  margin: 0;
  width: min(42vw, 300px);
  max-width: min(42vw, 300px);
  min-height: clamp(86px, 20dvh, 124px);
}

html.is-touch .colosseum-victory-slots {
  left: max(8px, env(safe-area-inset-left));
  right: auto;
  top: calc(max(8px, env(safe-area-inset-top)) + clamp(172px, 29dvh, 212px));
  bottom: auto;
  width: min(48vw, 230px);
  max-width: calc(100% - max(8px, env(safe-area-inset-left)) - max(8px, env(safe-area-inset-right)));
  max-height: calc(100dvh - 164px - env(safe-area-inset-bottom));
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot {
  position: relative;
  left: auto;
  top: auto;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: clamp(26px, 7dvh, 34px) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  opacity: 1;
  animation: none;
  transform: none !important;
}

html.is-touch .colosseum-victory-slots .colosseum-board-monster {
  width: clamp(26px, 7dvh, 34px);
  height: clamp(26px, 7dvh, 34px);
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot-copy small,
html.is-touch .colosseum-victory-slots .colosseum-board-slot-copy strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot-copy small {
  font-size: clamp(0.38rem, 1.55dvh, 0.48rem);
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot-copy strong {
  font-size: clamp(0.46rem, 1.8dvh, 0.58rem);
  line-height: 1.04;
}

html.is-touch .colosseum-victory-slots .colosseum-board-slot-copy em,
html.is-touch .colosseum-victory-slots .colosseum-board-team {
  display: none;
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .colosseum-victory-slots {
    left: 50%;
    right: auto;
    top: calc(max(8px, env(safe-area-inset-top)) + clamp(172px, 29dvh, 212px));
    width: min(52vw, 250px);
    max-width: calc(100vw - max(18px, env(safe-area-inset-left)) - max(18px, env(safe-area-inset-right)));
    transform: translateX(-50%);
  }

  html.is-touch .colosseum-victory-slots.colosseum-victory-bracket-list {
    left: max(8px, env(safe-area-inset-left));
    top: max(106px, 27%);
    width: min(42vw, 350px);
    max-width: min(42vw, 350px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: none;
  }

  /* Beaten-fighters list: 3 compact rows under the title copy, clamped so
   * the last row can never fall off the bottom edge. */
  html.is-touch .colosseum-victory-slots.colosseum-victory-beaten {
    top: calc(max(8px, env(safe-area-inset-top)) + clamp(96px, 30dvh, 128px));
    width: min(44vw, 240px);
    max-width: min(44vw, 240px);
    max-height: calc(100dvh - clamp(96px, 30dvh, 128px) - max(8px, env(safe-area-inset-top)) - 54px);
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    overflow: hidden;
  }

  html.is-touch .colosseum-victory-beaten .colosseum-victory-entrant {
    grid-template-columns: clamp(24px, 6.5dvh, 30px) minmax(0, 1fr) auto;
    gap: 5px;
    padding: 4px 6px;
  }

  html.is-touch .colosseum-victory-beaten .colosseum-victory-portrait {
    width: clamp(24px, 6.5dvh, 30px);
    height: clamp(24px, 6.5dvh, 30px);
  }
}

@media (max-width: 960px), (pointer: coarse){
  html.is-touch .modal.journal-full-modal {
    display: grid;
    place-items: stretch;
    padding: 0;
  }

  html.is-touch .modal.clean-world-modal.journal-full-modal .journal-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    gap: 7px;
  }

  html.is-touch .journal-head {
    align-items: center;
    flex-direction: row;
    gap: 8px;
    padding-right: 50px;
  }

  html.is-touch .journal-kicker,
  html.is-touch .journal-head p {
    display: none;
  }

  html.is-touch .journal-head h2 {
    margin: 0;
    color: #fff8df;
    font-size: clamp(1rem, 4.2dvh, 1.38rem);
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.72);
  }

  html.is-touch .journal-stats {
    width: auto;
    grid-template-columns: repeat(3, max-content);
    gap: 4px;
  }

  html.is-touch .journal-stats span {
    min-height: 20px;
    padding: 2px 6px;
    font-size: clamp(0.52rem, 1.95dvh, 0.68rem);
  }

  html.is-touch .journal-search {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 6px;
    padding: 5px 7px;
  }

  html.is-touch .journal-search span {
    font-size: clamp(0.52rem, 1.9dvh, 0.64rem);
  }

  html.is-touch .journal-search input {
    min-height: clamp(28px, 7.5dvh, 36px);
    padding: 0 8px;
    font-size: clamp(0.68rem, 2.55dvh, 0.86rem);
  }

  html.is-touch .journal-dashboard {
    grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
    gap: 7px;
    overflow: hidden;
  }

  html.is-touch .monster-finder-controls {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px;
  }

  html.is-touch .monster-finder-controls .journal-search {
    min-width: 0;
  }

  html.is-touch .journal-filter-tabs {
    max-width: min(46vw, 340px);
    gap: 4px;
    padding: 5px;
  }

  html.is-touch .journal-filter-tabs button {
    min-height: clamp(28px, 7dvh, 34px);
    padding: 0 7px;
    font-size: clamp(0.52rem, 1.9dvh, 0.66rem);
  }

  html.is-touch .journal-panel {
    min-height: 0;
    gap: 6px;
    padding: 7px;
  }

  html.is-touch .journal-panel h3 {
    font-size: clamp(0.66rem, 2.45dvh, 0.82rem);
  }

  html.is-touch .journal-panel-title span {
    min-height: 19px;
    padding: 2px 6px;
    font-size: clamp(0.48rem, 1.8dvh, 0.62rem);
  }

  html.is-touch .journal-scroll {
    gap: 5px;
  }

  html.is-touch .monster-finder-panel {
    min-height: 0;
    flex: 1 1 auto;
  }

  html.is-touch .monster-finder-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .journal-quest-card,
  html.is-touch .journal-note {
    padding: 6px 7px;
  }

  html.is-touch .journal-quest-card strong,
  html.is-touch .journal-row-title strong {
    font-size: clamp(0.62rem, 2.25dvh, 0.78rem);
  }

  html.is-touch .journal-quest-card p,
  html.is-touch .journal-note p {
    font-size: clamp(0.54rem, 1.95dvh, 0.68rem);
    line-height: 1.2;
  }

  html.is-touch .journal-area-summary {
    gap: 4px;
    margin-bottom: 5px;
  }

  html.is-touch .journal-area-summary span,
  html.is-touch .journal-area-row {
    padding: 4px 6px;
    font-size: clamp(0.5rem, 1.85dvh, 0.64rem);
  }

  html.is-touch .journal-monster-card {
    grid-template-columns: clamp(36px, 9dvh, 48px) minmax(0, 1fr) clamp(46px, 11dvh, 62px);
    min-height: 0;
    gap: 6px;
    padding: 5px;
  }

  html.is-touch .journal-monster-card img {
    width: clamp(34px, 8.6dvh, 46px);
    height: clamp(34px, 8.6dvh, 46px);
  }

  html.is-touch .journal-monster-main {
    gap: 3px;
  }

  html.is-touch .journal-row-title {
    gap: 5px;
  }

  html.is-touch .journal-row-title span,
  html.is-touch .journal-loc strong,
  html.is-touch .journal-loc em,
  html.is-touch .journal-tags span {
    font-size: clamp(0.46rem, 1.7dvh, 0.58rem);
  }

  html.is-touch .journal-tags {
    gap: 3px;
  }

  html.is-touch .journal-tags span {
    min-height: 17px;
    padding: 1px 5px;
  }

  html.is-touch .journal-locs {
    gap: 3px;
  }

  html.is-touch .journal-loc {
    max-width: 124px;
    min-height: 26px;
    padding: 2px 5px;
  }

  html.is-touch .journal-monster-card button {
    min-width: 0;
    min-height: clamp(26px, 6.5dvh, 32px);
    padding: 0 5px;
    font-size: clamp(0.5rem, 1.85dvh, 0.62rem);
  }

  html.is-touch .journal-empty,
  html.is-touch .journal-muted {
    padding: 7px;
    font-size: clamp(0.54rem, 1.95dvh, 0.68rem);
  }

  html.is-touch .journal-modal .dialogue-actions {
    display: none;
  }
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape), (pointer: coarse) and (max-height: 520px) and (orientation: landscape){
  html.is-touch .journal-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  html.is-touch .journal-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  html.is-touch .journal-dashboard {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: auto;
    padding-right: 3px;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .journal-panel {
    min-height: 178px;
  }

  html.is-touch .journal-panel-monsters {
    min-height: 260px;
  }

  html.is-touch .worker-finder-modal .journal-panel-monsters {
    min-height: 0;
  }

  html.is-touch .journal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 1px;
    -webkit-overflow-scrolling: touch;
  }

  html.is-touch .journal-monster-card {
    grid-template-columns: clamp(44px, 11dvh, 54px) minmax(0, 1fr) minmax(72px, auto);
    gap: 8px;
    padding: 7px;
  }

  html.is-touch .journal-monster-card img {
    width: clamp(40px, 10dvh, 52px);
    height: clamp(40px, 10dvh, 52px);
  }

  html.is-touch .journal-monster-card button {
    grid-column: auto;
    justify-self: stretch;
    min-width: 72px;
    padding: 0 7px;
  }

  html.is-touch .journal-loc {
    max-width: min(190px, 46vw);
    padding: 3px 6px;
  }

  html.is-touch .journal-row-title span,
  html.is-touch .journal-loc strong,
  html.is-touch .journal-loc em,
  html.is-touch .journal-tags span {
    font-size: clamp(0.52rem, 2dvh, 0.66rem);
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  html.is-touch .modal.clean-world-modal.journal-full-modal .journal-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  html.is-touch .journal-head {
    align-items: flex-start;
    flex-direction: column;
  }

  html.is-touch .journal-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  html.is-touch .journal-dashboard {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  html.is-touch .journal-panel {
    min-height: auto;
  }

  html.is-touch .journal-panel-quest {
    order: -1;
  }

  html.is-touch .journal-scroll {
    max-height: none;
    overflow: visible;
  }

  html.is-touch .journal-monster-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  html.is-touch .journal-monster-card button {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 520px) {
  html.is-touch .modal.clean-world-modal .box-list--monster-box,
  html.is-touch .modal.world-map-modal .box-list--monster-box {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  html.is-touch .modal.clean-world-modal .box-card--manager,
  html.is-touch .modal.world-map-modal .box-card--manager {
    padding-left: 10px;
    padding-right: 10px;
  }

  html.is-touch .modal.clean-world-modal .box-row--collection,
  html.is-touch .modal.world-map-modal .box-row--collection {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  html.is-touch .modal.clean-world-modal .box-row--collection .box-actions,
  html.is-touch .modal.world-map-modal .box-row--collection .box-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .colosseum-board-route .route-active,
  .colosseum-board-slot,
  .colosseum-board-slot.just-won,
  .colosseum-board-card.is-advance .colosseum-player-marker,
  .colosseum-victory-rays,
  .colosseum-victory-rewards {
    animation: none !important;
  }

  .colosseum-board-slot {
    opacity: 1;
  }
}

.modal.clean-world-modal .modal-card.rift-card {
  color: #eaf1ff;
  background:
    radial-gradient(135% 90% at 8% -10%, rgba(78, 227, 255, 0.13), transparent 44%),
    radial-gradient(135% 90% at 94% -8%, rgba(150, 96, 255, 0.16), transparent 48%),
    linear-gradient(165deg, rgba(17, 23, 39, 0.975), rgba(9, 12, 22, 0.985) 58%, rgba(6, 8, 15, 0.99));
  border-color: rgba(120, 150, 200, 0.3);
  box-shadow:
    0 24px 78px rgba(0, 0, 0, 0.6),
    0 0 34px rgba(78, 227, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.modal.clean-world-modal .modal-card.rift-card .world-modal-close {
  display: none;
}

.modal.clean-world-modal .modal-card.rift-card h2,
.modal.clean-world-modal .modal-card.rift-card h3,
.modal.clean-world-modal .modal-card.rift-card strong {
  color: #fffdf8;
}

.modal.clean-world-modal .modal-card.rift-card p,
.modal.clean-world-modal .modal-card.rift-card small,
.modal.clean-world-modal .modal-card.rift-card .rift-copy,
.modal.clean-world-modal .modal-card.rift-card .rift-tier p,
.modal.clean-world-modal .modal-card.rift-card .rift-tier small,
.modal.clean-world-modal .modal-card.rift-card .rift-team-pick small {
  color: rgba(231, 238, 252, 0.78);
}

.modal.clean-world-modal .modal-card.rift-card .fusion-eyebrow,
.modal.clean-world-modal .modal-card.rift-card .rift-tier strong {
  color: #73eaff;
}

.modal.clean-world-modal .modal-card.rift-card #closeRiftTiers,
.modal.clean-world-modal .modal-card.rift-card .dialogue-actions button {
  color: #eaf1ff;
  border-color: rgba(140, 168, 214, 0.34);
  background: rgba(13, 19, 33, 0.72);
}

.modal.clean-world-modal .modal-card.rift-card .rift-team-pick,
.modal.clean-world-modal .modal-card.rift-card .rift-size-buttons button {
  color: #eef2ff;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(7, 11, 22, 0.78);
}

.modal.clean-world-modal .modal-card.rift-card .rift-team-pick.selected,
.modal.clean-world-modal .modal-card.rift-card .rift-size-buttons button.active {
  border-color: rgba(115, 234, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(115, 234, 255, 0.16), rgba(169, 108, 255, 0.12)),
    rgba(7, 11, 22, 0.86);
}

.modal.clean-world-modal .modal-card.rift-card .rift-private-row em,
.modal.clean-world-modal .modal-card.rift-card .rift-tier span,
.modal.clean-world-modal .modal-card.rift-card .rift-size-buttons button.active {
  color: #06111d;
}

.modal.clean-world-modal .modal-card.rift-card .rift-size-buttons button.active {
  background: linear-gradient(135deg, #73eaff, #a96cff);
}

.modal.clean-world-modal .modal-card.rift-card #riftStartPrivate,
.modal.clean-world-modal .modal-card.rift-card .rift-tier button:not(:disabled) {
  color: #06111d;
  border-color: rgba(255, 224, 118, 0.62);
  background: linear-gradient(135deg, #ffe176, #62eaff 48%, #a96cff);
}

@media (max-width: 960px) and (max-height: 480px) and (orientation: landscape), (pointer: coarse) and (max-height: 480px) and (orientation: landscape){
  html.is-touch .modal.clean-world-modal:has(.profile-card-v2),
  html.is-touch .modal.clean-world-modal:has(.rift-card),
  html.is-touch .online-profile-overlay {
    padding: 0;
    place-items: stretch;
  }

  html.is-touch .modal.clean-world-modal .online-profile-card.profile-card-v2,
  html.is-touch .online-profile-overlay .online-profile-card.profile-card-v2 {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  html.is-touch .profile-card-v2 .profile-hero {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 8px;
    padding-top: 0;
    padding-bottom: 6px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal {
    width: 50px;
    height: 50px;
    border-radius: 11px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal .online-profile-prestige-seal {
    width: 38px;
    height: 38px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal-label {
    font-size: 20px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal-tag {
    display: none;
  }

  html.is-touch .profile-card-v2 .profile-hero__id {
    gap: 2px;
  }

  html.is-touch .profile-card-v2 .profile-hero__eyebrow,
  html.is-touch .profile-card-v2 .profile-hero__updated {
    font-size: 9px;
  }

  html.is-touch .profile-card-v2 .profile-hero__name {
    font-size: 16px;
    line-height: 1.08;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  html.is-touch .profile-card-v2 .profile-hero__tags {
    gap: 4px;
    margin-top: 1px;
  }

  html.is-touch .profile-card-v2 .profile-tag {
    max-width: min(34vw, 190px);
    padding: 2px 6px;
    font-size: 9px;
  }

  html.is-touch .profile-card-v2 .profile-hero__close {
    min-height: 30px;
    padding: 0 8px;
    font-size: 10px;
  }

  html.is-touch .profile-card-v2 .profile-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .profile-card-v2 .profile-rail__metric {
    padding: 5px 7px;
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .profile-rail__label,
  html.is-touch .profile-card-v2 .profile-rail__sub {
    font-size: 8px;
  }

  html.is-touch .profile-card-v2 .profile-rail__value {
    font-size: 13px;
  }

  html.is-touch .profile-card-v2 .online-profile-stats.profile-stat-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group {
    gap: 5px;
    padding: 6px;
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group__title {
    gap: 4px;
    font-size: 9px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group__title::before {
    width: 6px;
    height: 6px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group__grid {
    gap: 4px;
  }

  html.is-touch .profile-card-v2 .online-profile-stat {
    padding: 5px 6px;
  }

  html.is-touch .profile-card-v2 .online-profile-stat span {
    font-size: 8px;
  }

  html.is-touch .profile-card-v2 .online-profile-stat strong {
    margin-top: 2px;
    font-size: 10px;
    -webkit-line-clamp: 1;
  }

  html.is-touch .profile-card-v2 .online-profile-body {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 6px;
  }

  html.is-touch .profile-card-v2 .online-profile-section {
    padding: 6px;
    gap: 5px;
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .online-profile-section h3 {
    gap: 5px;
    font-size: 10px;
  }

  html.is-touch .profile-card-v2 .online-profile-section h3::before {
    height: 11px;
  }

  html.is-touch .profile-card-v2 .online-profile-dex {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  html.is-touch .profile-card-v2 .online-profile-dex-row {
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 4px;
  }

  html.is-touch .profile-card-v2 .online-profile-dex-row img {
    width: 30px;
    height: 30px;
  }

  html.is-touch .profile-card-v2 .online-profile-prestige-run {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 6px;
  }

  html.is-touch .profile-card-v2 .online-profile-prestige-run__seal {
    width: 40px;
    height: 40px;
  }

  html.is-touch .profile-card-v2 .online-profile-prestige-run__seal img {
    width: 32px;
    height: 32px;
  }

  html.is-touch .profile-card-v2 .online-profile-prestige-run__chips {
    gap: 4px;
  }

  html.is-touch .profile-card-v2 .profile-chip {
    padding: 1px 5px;
    font-size: 8px;
  }

  html.is-touch .profile-card-v2 .dialogue-actions {
    padding-top: 5px;
  }

  html.is-touch .profile-card-v2 .dialogue-actions button {
    min-height: 32px;
    padding: 0 10px;
    font-size: 10px;
  }

  html.is-touch .modal.clean-world-modal .modal-card.rift-card {
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    gap: 6px;
    overflow: hidden;
  }

  html.is-touch .modal.clean-world-modal .rift-head {
    gap: 7px;
    padding-bottom: 6px;
  }

  html.is-touch .modal.clean-world-modal .rift-head h2 {
    font-size: 0.98rem;
    line-height: 1.05;
  }

  html.is-touch .modal.clean-world-modal #closeRiftTiers {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.7rem;
  }

  html.is-touch .modal.clean-world-modal .rift-body {
    grid-template-columns: minmax(260px, 0.92fr) minmax(310px, 1.08fr);
    gap: 6px;
  }

  html.is-touch .modal.clean-world-modal .rift-lobby {
    grid-template-rows: auto auto minmax(76px, 1fr) auto;
    gap: 5px;
    padding: 7px;
  }

  html.is-touch .modal.clean-world-modal .rift-lobby-meta {
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal .rift-private-row,
  html.is-touch .modal.clean-world-modal .rift-size-row {
    padding: 5px;
  }

  html.is-touch .modal.clean-world-modal .rift-size-buttons button {
    height: 28px;
    min-height: 28px;
    font-size: 0.64rem;
  }

  html.is-touch .modal.clean-world-modal .rift-team-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal .rift-team-pick {
    min-height: 38px;
    grid-template-columns: 30px minmax(0, 1fr);
    padding: 4px;
  }

  html.is-touch .modal.clean-world-modal .rift-team-pick img {
    width: 30px;
    height: 30px;
  }

  html.is-touch .modal.clean-world-modal .rift-team-pick strong {
    font-size: 0.66rem;
  }

  html.is-touch .modal.clean-world-modal .rift-team-pick small {
    font-size: 0.52rem;
  }

  html.is-touch .modal.clean-world-modal #riftStartPrivate,
  html.is-touch .modal.clean-world-modal .rift-tier button {
    min-height: 30px;
    padding: 0 7px;
    font-size: 0.66rem;
  }

  html.is-touch .modal.clean-world-modal .rift-tier-grid {
    gap: 5px;
  }

  html.is-touch .modal.clean-world-modal .rift-tier {
    padding: 6px;
    gap: 3px;
  }

  html.is-touch .modal.clean-world-modal .rift-tier strong {
    font-size: 0.78rem;
  }

  html.is-touch .modal.clean-world-modal .rift-tier h3 {
    font-size: 0.68rem;
  }

  html.is-touch .modal.clean-world-modal .rift-tier p {
    -webkit-line-clamp: 1;
  }

  html.is-touch .modal.clean-world-modal .rift-tier small {
    display: none;
  }
}

@media (max-width: 720px) and (max-height: 480px) and (orientation: landscape) {
  html.is-touch .profile-card-v2 .online-profile-stats.profile-stat-groups,
  html.is-touch .profile-card-v2 .online-profile-body {
    grid-template-columns: 1fr 1fr;
  }

  html.is-touch .profile-card-v2 .profile-stat-group {
    min-height: 0;
  }

  html.is-touch .modal.clean-world-modal .rift-body {
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1.1fr);
  }
}

@media (max-height: 560px) and (min-width: 640px) {
  .modal.clean-world-modal .modal-card.rift-reward-card.rift-reward-card--summary,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card.rift-reward-card--summary,
  html.is-touch .rift-reward-card.rift-reward-card--summary {
    width: min(1000px, calc(100vw - 12px));
    height: auto;
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(206px, 0.78fr) minmax(410px, 1.22fr);
    grid-template-areas:
      "stage head"
      "stage rewards"
      "stage log"
      "stage actions";
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    overflow: hidden;
  }

  .rift-reward-card--summary .world-modal-close {
    display: none;
  }

  .rift-reward-card--summary .rift-reward-stage,
  html.is-touch .rift-reward-card--summary .rift-reward-stage {
    grid-area: stage;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 8px;
  }

  .rift-reward-card--summary .rift-reward-stage,
  html.is-touch .rift-reward-card--summary .rift-reward-stage {
    --rift-reward-frame: clamp(168px, 42dvh, 236px);
  }

  .rift-reward-card--summary .rift-reward-head,
  html.is-touch .rift-reward-card--summary .rift-reward-head {
    grid-area: head;
    min-width: 0;
    margin: 0;
    padding-right: 48px;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
  }

  .rift-reward-card--summary .rift-reward-head h2 {
    font-size: clamp(0.92rem, 4.2dvh, 1.14rem);
    line-height: 1.05;
  }

  .rift-reward-card--summary .rift-reward-head p {
    max-height: 2.4em;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.18;
  }

  .rift-reward-card--summary .rift-reward-head > button,
  html.is-touch .rift-reward-card--summary .rift-reward-head > button {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.64rem;
  }

  .rift-reward-card--summary .rift-reward-grid,
  html.is-touch .rift-reward-card--summary .rift-reward-grid {
    grid-area: rewards;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
  }

  .rift-reward-card--summary .rift-reward-grid article,
  html.is-touch .rift-reward-card--summary .rift-reward-grid article {
    min-height: 58px;
    padding: 5px 4px;
    gap: 2px;
  }

  .rift-reward-card--summary .rift-reward-grid img,
  .rift-reward-card--summary .rift-reward-grid strong,
  html.is-touch .rift-reward-card--summary .rift-reward-grid img,
  html.is-touch .rift-reward-card--summary .rift-reward-grid strong {
    width: 30px;
    height: 30px;
    font-size: 0.82rem;
  }

  .rift-reward-card--summary .rift-reward-grid span {
    font-size: 0.62rem;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .rift-reward-card--summary .rift-reward-grid em {
    font-size: 0.54rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .rift-reward-card--summary .rift-copy,
  html.is-touch .rift-reward-card--summary .rift-copy {
    grid-area: log;
    max-height: 30px;
    margin: 0;
    overflow: hidden;
    font-size: 0.58rem;
    line-height: 1.15;
  }

  .rift-reward-card--summary .dialogue-actions,
  html.is-touch .rift-reward-card--summary .dialogue-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.85fr;
    gap: 6px;
    margin: 0;
  }

  .rift-reward-card--summary .dialogue-actions button,
  html.is-touch .rift-reward-card--summary .dialogue-actions button {
    min-height: 30px;
    padding: 0 6px;
    font-size: 0.62rem;
  }

  .rift-reward-card--summary #riftRewardAgain,
  html.is-touch .rift-reward-card--summary #riftRewardAgain {
    min-height: 32px;
    font-size: 0.68rem;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape){
  html.is-touch .modal .lina-anchor-scene {
    width: min(calc(100vw - 40px), calc((100dvh - 40px) * 16 / 9));
    height: auto;
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 40px);
    aspect-ratio: 16 / 9;
    justify-self: center;
    align-self: center;
    border-radius: 8px;
  }

  html.is-touch .modal .lina-abyss-boss-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(calc(100vw - 40px), 900px);
    height: calc(100dvh - 40px);
    max-width: calc(100vw - 40px);
    max-height: calc(100dvh - 40px);
    justify-self: center;
    align-self: center;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
  }

  html.is-touch .modal .lina-abyss-boss-intro-art {
    grid-row: 1 / 3;
    align-self: stretch;
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy {
    align-self: end;
    min-height: 0;
    padding: 10px 12px 4px;
    overflow: hidden;
  }

  html.is-touch .modal .lina-abyss-boss-intro-copy p {
    max-height: 26dvh;
    overflow: auto;
  }

  html.is-touch .modal .lina-abyss-boss-intro .dialogue-actions {
    padding: 8px 10px 10px;
  }
}


/* ===========================================================================
   2026-06-11 menu rework: grouped world menu (Team / World / Online / System),
   desktop hotkey hints + compact party/status strip, mobile fullscreen menu
   with status band + party HP strip + icons + isolated Main Menu, explicit
   close button, and the Main-Menu confirm card.
   =========================================================================== */

/* ---- menu groups (shared) ------------------------------------------------ */
.side-panel .actions .menu-group {
  display: grid;
  gap: 0;
  min-width: 0;
}
.side-panel .actions .menu-group:empty { display: none; }

#mapBtn[data-nursery-ready] {
  position: relative;
}

#mapBtn[data-nursery-ready]::after {
  content: "🥚 " attr(data-nursery-ready);
  position: absolute;
  top: 3px;
  right: 4px;
  min-width: 20px;
  min-height: 17px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  color: #281900;
  background: #ffe291;
  border: 1px solid rgba(86, 50, 0, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

/* ---- desktop: separators, hotkey hints, exit row, compact panels --------- */
html:not(.is-touch) .side-panel .actions .menu-group + .menu-group {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 0, 0, 0.16);
}

html:not(.is-touch) .side-panel .actions button {
  display: flex;
  align-items: center;
  gap: 8px;
}
html:not(.is-touch) .side-panel .actions button[data-hotkey]::after {
  content: attr(data-hotkey);
  margin-left: auto;
  padding: 1px 7px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.45);
  background: rgba(255, 255, 255, 0.55);
}

html:not(.is-touch) #mainMenuBtn { color: #87201c; }
html:not(.is-touch) #mainMenuBtn:hover,
html:not(.is-touch) #mainMenuBtn:focus-visible {
  color: #6d1512;
  background: rgba(135, 32, 28, 0.06);
}

/* status row, paper style (base rules hide it; re-enable compact) */
html:not(.is-touch) .side-panel .status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:not(.is-touch) .side-panel .status-grid::after { display: none; }
html:not(.is-touch) .side-panel .status-grid div {
  background: transparent;
  padding: 2px 3px;
}
html:not(.is-touch) .side-panel .status-grid span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.6rem;
}
html:not(.is-touch) .side-panel .status-grid strong {
  margin-top: 3px;
  color: #14110a;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not(.is-touch) .side-panel #money { color: #8a6d1a; }
html:not(.is-touch) .side-panel #money::before {
  width: 13px;
  height: 13px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
html:not(.is-touch) .side-panel #seal { color: #1d6f63; font-size: 0.9rem; }

/* party at a glance, paper style */
html:not(.is-touch) .side-panel .party-panel {
  display: block;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html:not(.is-touch) .side-panel .party-panel::after { display: none; }
html:not(.is-touch) .side-panel .panel-title { margin-bottom: 5px; }
html:not(.is-touch) .side-panel .panel-title h2 {
  color: rgba(0, 0, 0, 0.5);
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html:not(.is-touch) .side-panel .party-list { gap: 2px; }
html:not(.is-touch) .side-panel .party-item {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 0;
  padding: 3px 4px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: background 0.12s ease;
}
html:not(.is-touch) .side-panel .party-item:hover {
  transform: none;
  background: rgba(0, 0, 0, 0.045);
}
html:not(.is-touch) .side-panel .party-item.lead {
  background: rgba(176, 138, 38, 0.08);
  box-shadow: inset 2px 0 0 #b08a26;
}
html:not(.is-touch) .side-panel .party-item img {
  width: 28px;
  height: 28px;
  filter: none;
}
html:not(.is-touch) .side-panel .party-item .party-controls,
html:not(.is-touch) .side-panel .party-item .monster-meta,
html:not(.is-touch) .side-panel .party-item .mini-exp,
html:not(.is-touch) .side-panel .party-item .power-badges,
html:not(.is-touch) .side-panel .party-item .lead-chip { display: none; }
html:not(.is-touch) .side-panel .party-item strong {
  color: #14110a;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html:not(.is-touch) .side-panel .party-item .mini-hp {
  height: 5px;
  margin-top: 3px;
  background: rgba(0, 0, 0, 0.14);
  box-shadow: none;
}

/* ---- mobile fullscreen menu: band + strip + grouped grid ----------------- */
html.is-touch .side-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: 10px;
}
html.is-touch .side-panel .actions {
  flex: 0 0 auto;
  min-height: 0;
  align-content: start;
}
html.is-touch .side-panel .actions button { min-height: 50px; }
html.is-touch .side-panel .menu-group { display: contents; }

/* status chips */
html.is-touch .side-panel .status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.is-touch .side-panel .status-grid::after { display: none; }
html.is-touch .side-panel .status-grid div {
  background: linear-gradient(180deg, rgba(20, 21, 24, 0.92), rgba(2, 2, 3, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  padding: 5px 4px;
}
html.is-touch .side-panel .status-grid span { font-size: 0.54rem; }
html.is-touch .side-panel .status-grid strong {
  margin-top: 2px;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tokens chip: the coin IS the label - icon centered on top, amount under
   it, so the chip stacks like its CHARMS / POTIONS neighbours. */
html.is-touch .side-panel .status-grid div:has(#money) > span { display: none; }
html.is-touch .side-panel #money {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 0;
}
html.is-touch .side-panel #money::before { width: 14px; height: 14px; }

/* party HP strip */
html.is-touch .side-panel .party-panel {
  display: block;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.is-touch .side-panel .party-panel::after { display: none; }
html.is-touch .side-panel .panel-title { display: none; }
html.is-touch .side-panel .party-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}
html.is-touch .side-panel .party-item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2px;
  min-height: 0;
  padding: 5px 5px 6px;
  background: linear-gradient(180deg, rgba(20, 21, 24, 0.92), rgba(2, 2, 3, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
}
html.is-touch .side-panel .party-item.lead {
  background: linear-gradient(180deg, rgba(38, 32, 16, 0.94), rgba(8, 6, 1, 0.97));
  border-color: rgba(240, 180, 64, 0.55);
  box-shadow: none;
}
html.is-touch .side-panel .party-item img { width: 32px; height: 32px; }
html.is-touch .side-panel .party-item .party-info { width: 100%; min-width: 0; }
html.is-touch .side-panel .party-item .party-name-row,
html.is-touch .side-panel .party-item .monster-meta,
html.is-touch .side-panel .party-item .mini-exp,
html.is-touch .side-panel .party-item .power-badges,
html.is-touch .side-panel .party-item .party-controls { display: none; }
html.is-touch .side-panel .party-item .mini-hp { height: 5px; margin-top: 2px; }

/* Masked glyph per button instead of colored tick bars (CSS-only so
   localization can rewrite labels freely). The group color survives as the
   tint of the glyph; the grouping itself is drawn by the hairline rules on
   the .menu-group pseudo-elements below. */
html.is-touch .side-panel .actions button::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2.5px;
  background: rgba(255, 255, 255, 0.6);
  -webkit-mask: var(--menu-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z'/%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--menu-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.5 12a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0z'/%3E%3C/svg%3E")) center / contain no-repeat;
}
html.is-touch .side-panel #healBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.6 12 20l-7.5-7.4a5 5 0 1 1 7.5-6.6 5 5 0 1 1 7.5 6.6z'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #boxBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8v13h18V8M1 3h22v5H1zM10 12h4'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #bagBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4zM3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #mapBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6.5v13L9 17l6 2.5 6-2.5v-13L15 6.5 9 4zM9 4v13M15 6.5v13'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #dexBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v13a3 3 0 0 0-3-3H2zM22 4h-6a4 4 0 0 0-4 4v13a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #journalBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #finderBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 10.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0zM15.3 15.3 21 21'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #sealsBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.7 8a5.7 5.7 0 1 1-11.4 0 5.7 5.7 0 0 1 11.4 0zM15.4 12.7 17 22l-5-3-5 3 1.6-9.3'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #flyBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 3.8a4.6 4.6 0 0 0-6.5 0L4 13.5V20h6.5l9.7-9.7a4.6 4.6 0 0 0 0-6.5zM15.5 8.5 3.5 20.5M17.5 15H9'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #fusionBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l2.1 7.4 7.4 2.1-7.4 2.1L12 21.5l-2.1-7.4-7.4-2.1 7.4-2.1z'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #onlineGroupMenuBtn,
html.is-touch body.beyond-land-menu .side-panel #healBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 21v-2a4 4 0 0 0-4-4h-5a4 4 0 0 0-4 4v2M13.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zM21.5 21v-2a4 4 0 0 0-3-3.9M16 3.1a3.5 3.5 0 0 1 0 6.8'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #onlineLeaderboardMenuBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 3h10v7a5 5 0 0 1-10 0zM7 4H4v2a3 3 0 0 0 3 3M17 4h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #onlineGiftsMenuBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12v9H4v-9M2 7h20v5H2zM12 7v14M12 7s-1.6-4.5-4.2-4.5a2.25 2.25 0 0 0 0 4.5M12 7s1.6-4.5 4.2-4.5a2.25 2.25 0 0 1 0 4.5'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #mainMenuBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
html.is-touch .side-panel #mobileDebugBtn { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
html.is-touch .side-panel .menu-group[data-group="team"] button::before { background: rgba(242, 194, 108, 0.95); }
html.is-touch .side-panel .menu-group[data-group="world"] button::before { background: rgba(148, 224, 208, 0.9); }
html.is-touch .side-panel .menu-group[data-group="online"] button::before { background: rgba(146, 182, 255, 0.92); }
html.is-touch .side-panel .menu-group[data-group="system"] button::before { background: rgba(255, 148, 138, 0.92); }

/* Each group starts on its own grid row behind a faint hairline, so the
   grouping reads from layout instead of accent bars. (Pseudo-elements of a
   display:contents element become grid items of .actions.) */
html.is-touch .side-panel .actions .menu-group:not([data-group="team"])::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  margin: 3px 10px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
/* No orphan hairline while progressive disclosure hides the team group. */
html.is-touch .side-panel .actions:not(:has(.menu-group[data-group="team"] button:not([hidden]))) .menu-group[data-group="world"]::before { display: none; }
/* display:contents on .menu-group would defeat the UA's [hidden] rule. */
html.is-touch .side-panel .menu-group[hidden] { display: none; }

/* Main Menu isolated on its own full-width bottom row, visually an exit */
html.is-touch .side-panel .actions #mainMenuBtn {
  grid-column: 1 / -1;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(48, 17, 15, 0.94), rgba(10, 2, 1, 0.97));
  border-color: rgba(255, 128, 118, 0.38);
}

/* explicit close button for the fullscreen menu */
#mobileMenuClose { display: none; }
html.is-touch body.mobile-menu-open #mobileMenuClose {
  display: grid;
  place-items: center;
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 46px;
  height: 46px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, rgba(30, 31, 35, 0.95), rgba(0, 0, 0, 0.97));
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 45; /* above the fullscreen .side-panel (40) - it's a body child now */
}

/* ---- Main-Menu confirm card ---------------------------------------------- */
.modal .modal-card.main-menu-confirm {
  width: min(440px, 92vw);
  max-height: none;
  padding: 26px 24px 22px;
  text-align: center;
}
.modal .modal-card.main-menu-confirm h2 { margin: 0 0 8px; }
.modal .modal-card.main-menu-confirm p { margin: 0 0 18px; opacity: 0.85; }
.modal .modal-card.main-menu-confirm .dialogue-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal .modal-card.main-menu-confirm #mainMenuConfirmGo {
  color: #87201c;
  border-color: rgba(135, 32, 28, 0.4);
}
html.is-touch .modal .modal-card.main-menu-confirm {
  width: min(440px, 92vw);
  height: auto;
  max-height: none;
  margin: auto;
  border-radius: 12px;
}

.modal .modal-card.land-upgrade-confirm-card {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: grid;
  gap: 12px;
  padding: 24px;
  overflow: auto;
  color: #11151b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    #ffffff;
  border-color: rgba(178, 132, 24, 0.34);
}
.land-upgrade-confirm-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #7a3b00;
  background: linear-gradient(180deg, #fff2bd, #ffd36a);
  border: 1px solid rgba(178, 132, 24, 0.36);
  font-weight: 950;
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
.land-upgrade-confirm-card h2 {
  margin: 0;
  padding-right: 42px;
  color: #11151b;
}
.land-upgrade-confirm-card p {
  margin: 0;
  color: rgba(17, 21, 27, 0.74);
}
.land-upgrade-confirm-meta {
  display: grid;
  gap: 8px;
}
.land-upgrade-confirm-meta div,
.land-upgrade-reset-list {
  padding: 10px 12px;
  border: 1px solid rgba(17, 21, 27, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}
.land-upgrade-confirm-meta span {
  display: block;
  margin-bottom: 3px;
  color: rgba(17, 21, 27, 0.56);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.land-upgrade-confirm-meta strong {
  display: block;
  color: #11151b;
  line-height: 1.2;
}
.land-upgrade-confirm-meta em {
  color: #7a3b00;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}
.land-upgrade-reset-list ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: rgba(17, 21, 27, 0.74);
}
.land-upgrade-reset-list li {
  margin: 3px 0;
}
.land-upgrade-reset-list small {
  display: block;
  margin-top: 8px;
  color: rgba(17, 21, 27, 0.56);
  font-weight: 800;
}
.land-upgrade-confirm-card .dialogue-actions {
  margin-top: 2px;
  justify-content: flex-end;
}
.land-upgrade-confirm-card #landUpgradeConfirmGo {
  color: #7a3b00;
  border-color: rgba(178, 132, 24, 0.46);
}
html.is-touch .modal .modal-card.land-upgrade-confirm-card {
  width: min(560px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px);
  padding: 16px;
  gap: 9px;
  border-radius: 12px;
}
html.is-touch .land-upgrade-confirm-card .dialogue-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ---- touch modal polish --------------------------------------------------- */
html.is-touch .world-modal-close {
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
}
html.is-touch .bag-intro { display: none; }

/* hidden menu entries (Fly/Fusion before unlock) must stay hidden - the
   desktop flex rule above would otherwise out-rank the [hidden] rule */
html:not(.is-touch) .side-panel .actions button[hidden] { display: none; }

/* phone-height fullscreen menu: keep the status chips clear of the close button */
@media (pointer: coarse) and (max-height: 500px) {
  html.is-touch .side-panel .status-grid { margin-right: 54px; }
}

/* party strip: cap card width so small parties do not stretch into one
   huge card; the grid centers the capped tracks */
html.is-touch .side-panel .party-list {
  grid-auto-columns: minmax(0, 150px);
  justify-content: center;
}

/* desktop density: fit status + party + full menu (incl. Main Menu) without
   scrolling at common window heights */
html:not(.is-touch) .side-panel { gap: 10px; }
html:not(.is-touch) .side-panel .menu-toggle,
html:not(.is-touch) .side-panel .actions button { min-height: 38px; }

/* debug panel on touch: the dark touch button skin out-ranked .is-pending /
   .is-marked, so a picked Copy/Move source never lit up its tool button.
   Re-assert both states at touch specificity. */
html.is-touch .debug-tile-tools.is-open .debug-tile-actions button.is-marked,
html.is-touch .debug-tile-tools.is-open .debug-tile-actions button.is-pending {
  color: #071018;
  background: linear-gradient(180deg, #b7f4ff, #63c8f3);
  border-color: rgba(255, 255, 255, 0.9);
}
html.is-touch .debug-tile-tools.is-open .debug-tile-actions button.is-pending {
  animation: debug-tool-pending-pulse 1.1s ease-in-out infinite;
}

/* debug Undo button: amber accent, distinct from Erase */
.debug-tile-actions #debugTileUndoBtn { border-color: rgba(255, 214, 111, 0.62); }


/* ============================================================
   Pollen Sting - clean realistic pollen cloud
   (stinger darts -> backlit haze -> drifting motes + glints)
   ============================================================ */
.fx-pollen-stinger {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, currentColor 30%, #8a743c 60%, #fffdf2 86%, #fff) !important;
  box-shadow: 0 0 10px rgba(255, 233, 163, 0.95), 0 0 26px rgba(244, 207, 77, 0.55);
  opacity: 0;
  animation: pollen-stinger-move 540ms cubic-bezier(0.3, 0.1, 0.3, 1) forwards;
}
@keyframes pollen-stinger-move {
  0% { left: var(--sx); top: var(--sy); opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(0.5); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(1); }
  86% { opacity: 1; }
  100% { left: var(--tx); top: var(--ty); opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(1.18); }
}

.fx-pollen-haze {
  width: 150px;
  height: 122px;
  border-radius: 50%;
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: pollen-haze 980ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes pollen-haze {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  22% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.9); }
  58% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(1.3); }
}

.fx-pollen-mote {
  width: var(--msize, 7px);
  height: var(--msize, 7px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fffdf2 0%, currentColor 52%, transparent 80%) !important;
  filter: blur(0.4px) drop-shadow(0 0 4px currentColor);
  mix-blend-mode: screen;
  opacity: 0;
  animation: pollen-mote-drift 760ms cubic-bezier(0.18, 0.65, 0.4, 1) forwards;
}
@keyframes pollen-mote-drift {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  14% { opacity: var(--mo, 0.9); }
  42% { opacity: var(--mo, 0.9); transform: translate(calc(-50% + var(--dx1)), calc(-50% + var(--dy1))) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx2)), calc(-50% + var(--dy2))) scale(0.7); }
}

.fx-pollen-glint {
  width: 11px;
  height: 11px;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  background: radial-gradient(circle, #fff 0%, currentColor 65%) !important;
  filter: drop-shadow(0 0 6px currentColor);
  opacity: 0;
  animation: pollen-glint 420ms ease-out forwards;
}
@keyframes pollen-glint {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1) rotate(0deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(28deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(55deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-pollen-stinger, .fx-pollen-haze, .fx-pollen-mote, .fx-pollen-glint { animation-duration: 1ms; }
}

/* Glovemaw punch impact - inline-SVG shock wheel over the signature sheets */
.fx-glove-impact {
  position: absolute;
  width: 236px;
  height: 236px;
  border: none;
  background: transparent !important;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: glove-impact-wrap 760ms cubic-bezier(0.16, 0.85, 0.3, 1) forwards;
}
.fx-glove-impact svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-glove-impact svg * { transform-box: view-box; transform-origin: 50% 50%; }
@keyframes glove-impact-wrap {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42); }
  10% { opacity: 1; }
  62% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
.fx-glove-impact .gp-ring { stroke-dasharray: 352; stroke-dashoffset: 352; animation: gp-ring-draw 520ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
@keyframes gp-ring-draw {
  0% { stroke-dashoffset: 352; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.25; }
}
.fx-glove-impact .gp-core { animation: gp-core-flash 460ms ease-out forwards; }
@keyframes gp-core-flash {
  0% { opacity: 1; transform: scale(0.4); }
  55% { opacity: 0.9; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.3); }
}
.fx-glove-impact .gp-line { opacity: 0; animation: gp-line-out 430ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes gp-line-out {
  0% { opacity: 0; transform: scale(0.35); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.35); }
}
.fx-glove-impact .gp-cross { opacity: 0; animation: gp-cross-flare 560ms cubic-bezier(0.2, 0.75, 0.3, 1) 60ms forwards; }
@keyframes gp-cross-flare {
  0% { opacity: 0; transform: rotate(24deg) scale(0.5); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: rotate(0deg) scale(1.18); }
}
.fx-glove-impact .gp-hook { stroke-dasharray: 420; stroke-dashoffset: 420; animation: gp-hook-sweep 540ms cubic-bezier(0.25, 0.8, 0.3, 1) 40ms forwards; }
@keyframes gp-hook-sweep {
  0% { stroke-dashoffset: 420; opacity: 1; }
  78% { stroke-dashoffset: 40; opacity: 0.95; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.fx-glove-impact .gp-outer { opacity: 0; animation: gp-outer-boom 620ms cubic-bezier(0.16, 0.85, 0.3, 1) 50ms forwards; }
@keyframes gp-outer-boom {
  0% { opacity: 0; transform: scale(0.5); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.28); }
}
.fx-glove-impact .gp-jab rect { opacity: 0; animation: gp-jab-streak 380ms cubic-bezier(0.3, 0.85, 0.25, 1) forwards; animation-delay: calc(60ms + var(--i, 0) * 55ms); }
@keyframes gp-jab-streak {
  0% { opacity: 0; transform: translateX(96px) scaleX(0.3); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-60px) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-glove-impact,
  .fx-glove-impact .gp-ring,
  .fx-glove-impact .gp-core,
  .fx-glove-impact .gp-line,
  .fx-glove-impact .gp-cross,
  .fx-glove-impact .gp-hook,
  .fx-glove-impact .gp-outer,
  .fx-glove-impact .gp-jab rect { animation-duration: 1ms; }
}

.profile-card-v2.profile-card--oathlight {
  border-color: rgba(255, 229, 137, 0.66);
  box-shadow: 0 0 34px rgba(88, 178, 255, 0.2), 0 0 18px rgba(255, 218, 102, 0.16);
}

.profile-card--oathlight .profile-hero {
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 239, 166, 0.2), transparent 34%),
    radial-gradient(circle at 82% 72%, rgba(102, 196, 255, 0.18), transparent 40%);
}

/* Oathbreaker Verdict: SVG ground explosion layered over the weapon sheet. */
.fx-oathbreaker-impact {
  position: absolute;
  z-index: 22;
  width: 320px;
  height: 320px;
  border: none;
  background: transparent !important;
  color: #f8e7a4;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 34px rgba(214, 166, 79, 0.86))
    drop-shadow(0 0 48px rgba(120, 240, 223, 0.42));
  animation: oathbreaker-impact-wrap 780ms cubic-bezier(0.13, 0.86, 0.24, 1) forwards;
}
.fx-oathbreaker-impact svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fx-oathbreaker-impact svg * {
  transform-box: view-box;
  transform-origin: 50% 60%;
}
@keyframes oathbreaker-impact-wrap {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.42) rotate(-2deg); }
  10% { opacity: 1; }
  48% { opacity: 0.98; transform: translate(-50%, -50%) scale(1.08) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.34) rotate(1deg); }
}
.fx-oathbreaker-impact .obg-glow {
  animation: oathbreaker-ground-glow 520ms ease-out forwards;
}
@keyframes oathbreaker-ground-glow {
  0% { opacity: 0; transform: scale(0.25); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.65); }
}
.fx-oathbreaker-impact .obg-ring {
  opacity: 0;
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  animation: oathbreaker-ground-ring 680ms cubic-bezier(0.16, 0.8, 0.24, 1) forwards;
}
.fx-oathbreaker-impact .obg-ring-b {
  animation-delay: 70ms;
}
@keyframes oathbreaker-ground-ring {
  0% { opacity: 0; stroke-dashoffset: 360; transform: scale(0.42); }
  18% { opacity: 0.92; }
  72% { opacity: 0.72; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; transform: scale(1.18); }
}
.fx-oathbreaker-impact .obg-cracks {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: oathbreaker-ground-cracks 620ms cubic-bezier(0.12, 0.82, 0.22, 1) forwards;
}
@keyframes oathbreaker-ground-cracks {
  0% { opacity: 0; stroke-dashoffset: 420; }
  18% { opacity: 1; }
  72% { opacity: 0.9; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.fx-oathbreaker-impact .obg-ray {
  opacity: 0;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: oathbreaker-ground-ray 470ms cubic-bezier(0.12, 0.78, 0.22, 1) forwards;
  animation-delay: calc(var(--i, 0) * 11ms);
}
@keyframes oathbreaker-ground-ray {
  0% { opacity: 0; stroke-dashoffset: 90; }
  24% { opacity: 0.95; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}
.fx-oathbreaker-impact .obg-shard {
  opacity: 0;
  animation: oathbreaker-ground-shard 640ms cubic-bezier(0.12, 0.82, 0.22, 1) forwards;
  animation-delay: calc(28ms + var(--i, 0) * 18ms);
}
@keyframes oathbreaker-ground-shard {
  0% { opacity: 0; }
  24% { opacity: 0.95; }
  100% { opacity: 0; }
}
.fx-oathbreaker-impact .obg-core {
  animation: oathbreaker-ground-core 460ms ease-out forwards;
}
@keyframes oathbreaker-ground-core {
  0% { opacity: 1; transform: scale(0.36); }
  48% { opacity: 0.95; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.9); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-oathbreaker-impact,
  .fx-oathbreaker-impact .obg-glow,
  .fx-oathbreaker-impact .obg-ring,
  .fx-oathbreaker-impact .obg-cracks,
  .fx-oathbreaker-impact .obg-ray,
  .fx-oathbreaker-impact .obg-shard,
  .fx-oathbreaker-impact .obg-core { animation-duration: 1ms; }
}

/* ===========================================================================
   OPENING POLISH 2026-06-11 - the first sixty seconds decide retention.
   Pure presentation: title entrance choreography, living ink overlay,
   wordmark sheen, primary-action hierarchy, intro-slide Ken Burns, and a
   soft page vignette. All motion is disabled under prefers-reduced-motion.
   =========================================================================== */

/* A quiet vignette so the play area sits on a page, not in a void. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 78% 72% at 50% 44%, transparent 58%, rgba(36, 32, 26, 0.05) 82%, rgba(36, 32, 26, 0.11) 100%);
}
body.title-booting::after { display: none; }

.monstar-pwa-install {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1300;
  min-height: 34px;
  max-width: min(190px, calc(100vw - 24px));
  padding: 7px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #080808;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(8, 8, 8, 0.24);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font: 800 12px Inter, system-ui, sans-serif;
}
.monstar-pwa-install[hidden] {
  display: none;
}
/* Any open modal owns the top-right corner (close/back buttons live there);
   the floating install pill must never cover it. Battles and tactics fights
   are overlays, not modals — cover them too (the pill sat on the command bar). */
html:has(.modal:not(.hidden)) .monstar-pwa-install,
html:has(#tacticsLayer:not(.hidden)) .monstar-pwa-install,
html:has(.battle:not(.hidden)) .monstar-pwa-install {
  display: none;
}
/* First-run opening plays clean: until the first partner exists (same gate
   as the journey tools) neither the install pill nor the debug tile tools
   may sit on top of mom's walk-in, the town tour, or the starter choice. */
body.pre-partner-run .monstar-pwa-install,
body.pre-partner-run .debug-tile-tools {
  display: none !important;
}
.monstar-pwa-install:hover,
.monstar-pwa-install:focus-visible {
  background: #fff;
  border-color: rgba(8, 8, 8, 0.44);
  outline: none;
}

/* --- Title screen: staggered ink entrance ------------------------------- */
@keyframes titleInkSettle {
  from { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes titleNewBeckon {
  0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(8, 8, 8, 0); }
  93% { box-shadow: 0 0 0 5px rgba(8, 8, 8, 0.07); }
}
.title-home-screen .title-hero {
  animation: titleInkSettle 0.95s cubic-bezier(0.22, 0.8, 0.3, 1) 0.05s both;
}
.title-home-screen .title-primary-actions {
  animation: titleInkSettle 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) 0.42s both;
}
.title-home-screen .title-foot {
  animation: titleInkSettle 0.85s cubic-bezier(0.22, 0.8, 0.3, 1) 0.62s both;
}


/* The primary title action (New Game on a fresh device, Load when saves exist):
   a thin ink frame, a fill on hover, a rare beckon. */
.title-primary-actions .title-action-primary {
  min-height: 50px;
  border: 1px solid #080808;
  transition: background-color 0.22s ease, color 0.22s ease, letter-spacing 0.25s ease;
  animation: titleNewBeckon 7s ease-in-out 2.4s infinite;
}
.title-primary-actions .title-action-primary:hover,
.title-primary-actions .title-action-primary:focus-visible {
  background: #080808;
  color: #fbfaf7;
  letter-spacing: 0.05em;
}
.title-primary-actions button,
.title-subtle,
.title-back {
  transition: letter-spacing 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}
.title-primary-actions button:hover { letter-spacing: 0.04em; }

/* --- Intro slides: slow breath into each painting ------------------------ */
@keyframes introKenBurns {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}
@keyframes introCopyRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.title-intro-art { overflow: hidden; }
.title-intro-art img {
  animation: introKenBurns 9.5s cubic-bezier(0.2, 0.6, 0.35, 1) both;
  transform-origin: 50% 38%;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.title-intro-art img.is-loaded { opacity: 1; }
.title-intro-art img.kb-origin-high { transform-origin: 50% 30%; }
.title-intro-art img.kb-origin-low { transform-origin: 50% 64%; }
.title-intro-copy { animation: introCopyRise 0.7s ease-out 0.25s both; }
.title-intro-actions { animation: introCopyRise 0.7s ease-out 0.5s both; }

/* --- Respect reduced motion completely ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .title-home-screen .title-hero,
  .title-home-screen .title-primary-actions,
  .title-home-screen .title-foot,
  .title-primary-actions .title-action-primary,
  .title-wordmark-text,
  .title-intro-art img,
  .title-intro-copy,
  .title-intro-actions {
    animation: none !important;
  }
}

/* Arc arrival veil: a held color that lifts over the next world (Abyss fall,
   Dawnward rise). Created/removed by playArcArrivalVeil. */
.arc-arrival-veil {
  position: fixed;
  inset: 0;
  z-index: 1200;
  opacity: 1;
  pointer-events: none;
  transition-property: opacity;
  transition-timing-function: ease;
}
.arc-arrival-veil.is-lifting { opacity: 0; }

/* Heartroot Beyond class menu */
body.beyond-land-menu .side-panel {
  background:
    linear-gradient(180deg, rgba(23, 22, 19, 0.96), rgba(8, 9, 8, 0.98)),
    var(--clean-world-menu-bg-image) center / cover no-repeat;
  color: #f8f2df;
  border-color: rgba(226, 191, 104, 0.28);
}
body.beyond-land-menu .side-panel .actions button,
body.beyond-land-menu .side-panel .menu-toggle {
  color: #f8f2df;
  border-bottom-color: rgba(226, 191, 104, 0.22);
}
body.beyond-land-menu .side-panel .actions button:hover,
body.beyond-land-menu .side-panel .actions button:focus-visible,
body.beyond-land-menu .side-panel .actions button.is-open {
  background: rgba(226, 191, 104, 0.12);
  color: #fff8df;
}
body.beyond-land-menu .side-panel .status-grid,
body.beyond-land-menu .side-panel .party-panel {
  border-bottom-color: rgba(226, 191, 104, 0.22);
}
body.beyond-land-menu .side-panel .status-grid span,
body.beyond-land-menu .side-panel .panel-title h2 {
  color: rgba(248, 242, 223, 0.62);
}
body.beyond-land-menu .side-panel .status-grid strong,
body.beyond-land-menu .side-panel .party-item strong,
body.beyond-land-menu .side-panel #seal {
  color: #f8f2df;
}
body.beyond-land-menu .side-panel #money {
  color: #e2bf68;
}

/* Heartroot's dark rail follows the parchment skin in source order. Keep this
   explicit treatment strong enough to win that legacy cascade. The token
   amount is compact in updateHud, while its exact balance remains available
   through the title and accessible name. */
body.beyond-land-menu .side-panel .status-grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 2px;
}
body.beyond-land-menu .side-panel .status-grid div {
  min-width: 0;
  overflow: hidden;
  padding-inline: 2px;
}
body.beyond-land-menu .side-panel .status-grid span,
body.beyond-land-menu .side-panel .party-panel .panel-title h2 {
  color: rgba(248, 242, 223, 0.82) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}
body.beyond-land-menu .side-panel .status-grid span {
  display: block;
  overflow: hidden;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.beyond-land-menu .side-panel .status-grid strong {
  max-width: 100%;
}
body.beyond-land-menu .side-panel #money {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  gap: 4px;
}
body.beyond-land-menu .side-panel #money::before {
  flex: 0 0 13px;
}
body.beyond-land-menu #onlineGroupMenuBtn {
  display: none !important;
}
.modal.beyond-menu-modal .beyond-menu-card {
  width: min(1040px, 94vw);
  height: min(90vh, 920px);
  max-height: min(90vh, 920px);
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px;
  color: #fff8df;
  border-color: rgba(255, 242, 204, 0.22);
  background:
    radial-gradient(circle at 18% 0%, rgba(226, 191, 104, 0.17), transparent 42%),
    linear-gradient(180deg, rgba(9, 12, 16, 0.985), rgba(3, 5, 8, 0.995));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.modal.beyond-menu-modal .world-modal-close {
  color: #fff8df;
  background: rgba(4, 5, 7, 0.9);
  border-color: rgba(255, 242, 204, 0.32);
}
.beyond-menu-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}
.beyond-menu-head small,
.beyond-release-card small,
.beyond-tree-node small,
.beyond-class-preview small,
.beyond-squad-row small {
  color: rgba(255, 255, 255, 0.66);
}
.beyond-menu-head h2,
.beyond-menu-head small,
.beyond-menu-head strong {
  margin: 0;
}
.modal.beyond-menu-modal .monster-meta {
  color: rgba(255, 248, 223, 0.66) !important;
}
.beyond-menu-head strong {
  color: #e2bf68;
  font-size: 0.86rem;
}
.beyond-menu-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  overflow: hidden;
}
.beyond-squad-list {
  display: grid;
  gap: 8px;
}
.beyond-squad-row,
.beyond-release-card,
.beyond-class-preview,
.beyond-tree-node,
.beyond-loot-grid section,
.beyond-retreat-card {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}
.beyond-squad-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(110px, auto);
  gap: 12px;
  align-items: center;
  padding: 10px;
}
.beyond-class-swatch,
.beyond-class-badge {
  --class-color: #e2bf68;
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  color: #101010;
  background: var(--class-color);
  font-weight: 900;
}
.beyond-class-badge {
  width: fit-content;
  grid-auto-flow: column;
  gap: 6px;
  color: #12100b;
}
.beyond-class-badge.locked {
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.09);
}
.beyond-class-badge.mastered {
  box-shadow: 0 0 0 2px rgba(226, 191, 104, 0.35);
}
.beyond-squad-row strong,
.beyond-squad-row em,
.beyond-squad-row small {
  display: block;
  min-width: 0;
}
.beyond-squad-row em {
  color: #e2bf68;
  font-style: normal;
  font-size: 0.82rem;
}
.beyond-squad-meta {
  display: grid;
  justify-items: end;
  gap: 4px;
  font-size: 0.82rem;
}
.beyond-group-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}
/* ---- FFT-style group stage: members stand on lit discs, tap to manage ---- */
.beyond-group-stage {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  align-content: start;
  gap: 10px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px 3px 6px 2px;
}
.beyond-stage-head {
  display: grid;
  gap: 3px;
  padding: 8px 52px 8px 10px;   /* right pad clears the round close button */
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(226, 191, 104, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(9, 11, 15, 0.72);
}
.beyond-stage-head strong {
  color: #fff8df;
  font-size: 0.92rem;
}
.beyond-stage-head small,
.beyond-stage-head em {
  display: block;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.25;
}
.beyond-stage-platform {
  position: relative;
  padding: 18px 10px 12px;
  border: 1px solid rgba(226, 191, 104, 0.22);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 118%, rgba(226, 191, 104, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(12, 16, 22, 0.6), rgba(6, 9, 13, 0.9));
  overflow: hidden;
}
.beyond-stage-platform::after {
  /* the platform edge the group stands on */
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(226, 191, 104, 0.2), rgba(226, 191, 104, 0.04));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.beyond-stage-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(104px, 138px);
  justify-content: center;
  justify-content: safe center;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.beyond-stage-member {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}
.modal.clean-world-modal .beyond-stage-figure {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.modal.clean-world-modal .beyond-stage-figure:disabled {
  cursor: default;
}
.beyond-stage-disc {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 78%;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--class-color) 52%, transparent), color-mix(in srgb, var(--class-color) 14%, transparent) 62%, transparent 76%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--class-color) 30%, transparent);
  pointer-events: none;
}
.beyond-stage-figure .beyond-wheel-figure.stage {
  width: 78px;
  height: 94px;
}
.modal.clean-world-modal .beyond-stage-figure:hover .beyond-wheel-figure.stage,
.modal.clean-world-modal .beyond-stage-figure:focus-visible .beyond-wheel-figure.stage {
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--class-color) 66%, white 8%)) drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5));
}
.beyond-stage-member strong {
  max-width: 100%;
  color: #fff8df;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-stage-member.is-lead strong::after {
  content: " \2605";   /* star marks the lead */
  color: #e2bf68;
}
.beyond-stage-member small {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-stage-member.is-special .beyond-stage-disc {
  box-shadow:
    0 0 16px color-mix(in srgb, var(--class-color) 52%, transparent),
    0 0 34px color-mix(in srgb, var(--class-color) 26%, transparent);
}
.beyond-stage-row.bench-row {
  justify-content: start;
  grid-auto-columns: minmax(78px, auto);
  opacity: 0.86;
}
.beyond-stage-row.bench-row .beyond-wheel-figure.stage {
  width: 58px;
  height: 72px;
}
.beyond-stage-row.candidate-row {
  justify-content: start;
  grid-auto-columns: minmax(96px, auto);
}
.beyond-stage-row.candidate-row .beyond-stage-disc {
  background:
    radial-gradient(ellipse at center, rgba(126, 226, 132, 0.5), rgba(126, 226, 132, 0.14) 62%, transparent 76%);
  box-shadow: 0 0 14px rgba(126, 226, 132, 0.32);
}
.beyond-stage-row-label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}
.beyond-stage-row-label strong {
  color: #fff4cc;
  font-size: 0.74rem;
}
.beyond-stage-row-label small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.62rem;
}
.beyond-stage-row-label.is-candidate {
  border-color: rgba(126, 226, 132, 0.3);
  background: rgba(126, 226, 132, 0.07);
}
.modal.clean-world-modal .beyond-stage-row-label button {
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 0.66rem;
  font-weight: 900;
}
.modal.clean-world-modal .beyond-stage-action {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 7px;
  font-size: 0.64rem;
  font-weight: 900;
}
.modal.clean-world-modal .beyond-stage-action:not(:disabled) {
  color: #0d1409;
  background: linear-gradient(180deg, #a9e78f, #6fbf59);
  border-color: rgba(211, 255, 190, 0.62);
}
/* ---- Comrade market: the same stage figures, one card per daily offer ---- */
.beyond-market-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}
.beyond-market-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px;
  align-content: start;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 2px 3px 6px 2px;
}
.beyond-market-shell--armory {
  grid-template-rows: auto minmax(0, 1fr);
}
.beyond-market-grid--armory {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.beyond-market-card {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 10px 8px 9px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--class-color) 30%, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--class-color) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(14, 18, 24, 0.72), rgba(6, 9, 13, 0.92));
}
.beyond-market-card--armory {
  --class-color: #e2bf68;
  position: relative;
}
.beyond-market-card--armory.is-locked {
  opacity: 0.55;
}
.beyond-market-tag {
  justify-self: center;
  max-width: 100%;
  padding: 2px 6px;
  color: #120f08;
  background: linear-gradient(180deg, #fff2bd, #d7af55);
  border: 1px solid rgba(255, 244, 205, 0.54);
  border-radius: 999px;
  font-size: 0.52rem;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-market-copy {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
}
.beyond-market-boost-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: #120f08;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, 0.86), transparent 18%),
    conic-gradient(from 26deg, #f7d886, #70d7d0, #9b8cff, #f7d886);
  border: 1px solid rgba(255, 245, 210, 0.72);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32), 0 0 16px rgba(226, 191, 104, 0.24);
  font-size: 1.1rem;
  font-weight: 950;
}
.beyond-market-card .beyond-stage-figure {
  padding: 4px 8px 12px;
}
.beyond-market-card strong {
  max-width: 100%;
  color: #fff8df;
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-market-card small,
.beyond-market-card em {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.6rem;
  font-style: normal;
  line-height: 1.2;
}
.modal.clean-world-modal .beyond-market-card > button {
  min-height: 30px;
  margin-top: 3px;
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 900;
}
.modal.clean-world-modal .beyond-market-card > button:not(:disabled) {
  color: #12100b;
  background: linear-gradient(180deg, #f2d287, #d9ae4f);
  border-color: rgba(255, 236, 178, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 4px 10px rgba(0, 0, 0, 0.26);
}
.beyond-member-portrait {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(var(--team-rgb, 94, 216, 255), 0.68);
  background-color: rgba(var(--class-rgb, 255, 255, 255), 0.13);
  background-image:
    var(--portrait-image),
    radial-gradient(circle at 50% 36%, rgba(var(--class-rgb, 255, 255, 255), 0.62) 0 25%, rgba(var(--class-rgb, 255, 255, 255), 0.18) 54%, rgba(4, 9, 16, 0.94) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.14));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: var(--portrait-size, contain), 100% 100%, 100% 100%;
  background-position: var(--portrait-position, center), center, center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 16px rgba(0, 0, 0, 0.28);
  position: relative;
  overflow: hidden;
}
.beyond-member-portrait::after {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 250, 230, 0.88);
  font-size: 0.72rem;
  font-weight: 950;
  opacity: var(--portrait-initial-opacity, 0);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}
.beyond-member-portrait.large {
  width: 84px;
  height: 84px;
  border-radius: 10px;
}
.beyond-group-detail {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
  padding-right: 2px;
}
.beyond-group-hero {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--class-color) 16%, transparent), rgba(255, 255, 255, 0.045)),
    rgba(9, 11, 15, 0.72);
}
.modal.clean-world-modal .beyond-group-back {
  align-self: center;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  color: #fff7dc;
  background: linear-gradient(180deg, rgba(24, 27, 32, 0.96), rgba(7, 9, 13, 0.98));
  border-color: rgba(255, 242, 204, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 10px rgba(0, 0, 0, 0.22);
}
.beyond-group-detail.is-special .beyond-group-hero {
  border-color: color-mix(in srgb, var(--class-color) 48%, rgba(255, 255, 255, 0.16));
  box-shadow:
    inset 0 0 22px color-mix(in srgb, var(--class-color) 14%, transparent),
    0 0 18px color-mix(in srgb, var(--class-color) 18%, transparent);
}
.beyond-group-lead-chip {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(226, 191, 104, 0.5);
  border-radius: 7px;
  color: #e2bf68;
  background: rgba(226, 191, 104, 0.1);
  font-size: 0.66rem;
  font-weight: 950;
}
.modal.clean-world-modal .beyond-group-membership[data-beyond-join-unit]:not(:disabled) {
  color: #12100b;
  background: linear-gradient(180deg, #f2d287, #d9ae4f);
  border-color: rgba(255, 236, 178, 0.62);
}
.beyond-group-hero strong,
.beyond-group-hero small,
.beyond-group-hero em {
  display: block;
  min-width: 0;
}
.beyond-group-hero > div:nth-of-type(1) {
  display: grid;
  gap: 4px;
}
.beyond-group-hero > div:nth-of-type(1) > strong {
  color: #fff8df;
  font-size: 1rem;
}
.beyond-group-hero small,
.beyond-group-hero em {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-style: normal;
}
.beyond-group-hero-actions {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 34px;
}
.beyond-gender-marker {
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--class-color) 62%, #ffffff 12%);
  font-size: 0.74rem;
  font-weight: 950;
  line-height: 1;
  color: #12100b;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-color) 62%, #ffffff 16%), color-mix(in srgb, var(--class-color) 82%, #000000 6%)),
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px rgba(0, 0, 0, 0.28);
}
.beyond-gender-marker.female {
  border-color: color-mix(in srgb, var(--class-color) 72%, #ffffff 10%);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-color) 52%, #ffffff 24%), color-mix(in srgb, var(--class-color) 72%, #181018 8%)),
    rgba(255, 255, 255, 0.08);
  color: #14100d;
}
.modal.clean-world-modal .beyond-group-hero-actions button,
.modal.clean-world-modal .beyond-group-row button,
.modal.clean-world-modal .beyond-group-slot button,
.modal.clean-world-modal .beyond-group-gear-row button {
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 0.68rem;
}
.modal.clean-world-modal .beyond-group-class-badge-button {
  justify-self: start;
  position: relative;
  min-height: 34px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 6px;
  padding: 2px 30px 2px 2px;
  border: 1px solid color-mix(in srgb, var(--class-color) 54%, rgba(255, 255, 255, 0.18));
  border-radius: 7px;
  color: #fff8df;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-color) 14%, rgba(255, 255, 255, 0.06)), rgba(0, 0, 0, 0.18)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}
.modal.clean-world-modal .beyond-group-class-badge-button::after {
  content: ">";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #12100b;
  background: color-mix(in srgb, var(--class-color) 78%, white 14%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--class-color) 65%, transparent);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  transform: translateY(-50%);
}
.modal.clean-world-modal .beyond-group-class-badge-button.is-fixed {
  padding-right: 2px;
  cursor: default;
}
.modal.clean-world-modal .beyond-group-class-badge-button.is-fixed::after {
  display: none;
}
.modal.clean-world-modal .beyond-group-class-badge-button:hover,
.modal.clean-world-modal .beyond-group-class-badge-button:focus-visible {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-color) 26%, rgba(255, 255, 255, 0.08)), rgba(0, 0, 0, 0.2)),
    rgba(255, 255, 255, 0.06);
  outline: 2px solid color-mix(in srgb, var(--class-color) 58%, rgba(255, 255, 255, 0.2));
  outline-offset: 2px;
}
.modal.clean-world-modal .beyond-group-class-badge-button .beyond-class-badge {
  box-shadow: 0 0 0 1px rgba(18, 16, 11, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22);
}
.beyond-group-hero-tabs {
  grid-column: 1 / -1;
  min-width: 0;
}
.beyond-group-detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-height: 34px;
}
.modal.clean-world-modal .beyond-group-detail-tabs button {
  min-height: 34px;
  padding: 6px 5px;
  border-radius: 7px;
  font-size: 0.7rem;
  font-weight: 900;
  color: #fff7dc;
  background:
    linear-gradient(180deg, rgba(24, 27, 32, 0.96), rgba(7, 9, 13, 0.98));
  border-color: rgba(255, 242, 204, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 10px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
.modal.clean-world-modal .beyond-group-detail-tabs button.is-active {
  color: #12100b;
  background: var(--class-color);
  border-color: color-mix(in srgb, var(--class-color) 80%, white 12%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 0 0 1px color-mix(in srgb, var(--class-color) 48%, transparent),
    0 8px 18px rgba(0, 0, 0, 0.26);
  text-shadow: none;
}
.beyond-group-panel-scroll {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding-right: 3px;
}
.beyond-group-statline,
.beyond-gear-rule {
  display: block;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.68rem;
  line-height: 1.25;
}
.beyond-group-statchips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.beyond-group-statchips span {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: baseline;
  gap: 4px;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 242, 204, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff8df;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}
.beyond-group-statchips span b {
  color: rgba(255, 248, 223, 0.55);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.beyond-group-statchips span.dv {
  border-color: color-mix(in srgb, var(--class-color) 38%, rgba(255, 255, 255, 0.12));
  background: color-mix(in srgb, var(--class-color) 11%, rgba(255, 255, 255, 0.04));
}
.beyond-statchip-divider {
  margin-left: 2px;
  color: rgba(226, 191, 104, 0.78);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.08em;
}
.beyond-compact-section {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}
.beyond-compact-section h3 {
  margin: 0;
  color: #e2bf68;
  font-size: 0.78rem;
  letter-spacing: 0;
}
.beyond-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.beyond-group-row:first-of-type,
.beyond-group-slots + .beyond-group-row {
  border-top: 0;
}
.beyond-group-row strong,
.beyond-group-row small,
.beyond-group-row em {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.beyond-group-row strong {
  color: #fff8df;
  font-size: 0.78rem;
}
.beyond-group-row small,
.beyond-group-row em {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.64rem;
  font-style: normal;
  line-height: 1.2;
}
.beyond-group-row.released strong {
  color: #e2bf68;
}
/* Actionable release/equip buttons read as the golden CTA; an unlocked row's
   "Ready" reads as a quiet owned-tag, not a dead button. */
.modal.clean-world-modal .beyond-group-row button:not(:disabled),
.modal.clean-world-modal .beyond-group-gear-row button:not(:disabled) {
  color: #12100b;
  background: linear-gradient(180deg, #f2d287, #d9ae4f);
  border-color: rgba(255, 236, 178, 0.62);
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 4px 10px rgba(0, 0, 0, 0.26);
}
.modal.clean-world-modal .beyond-group-row.released button:disabled {
  opacity: 1;
  color: #9fe6b0;
  background: rgba(66, 160, 92, 0.12);
  border-color: rgba(126, 240, 180, 0.32);
}
.modal.clean-world-modal .beyond-group-row.released button:disabled::before {
  content: "\2713 ";
}
.beyond-group-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.beyond-group-slot {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 6px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.beyond-group-slot span,
.beyond-group-slot strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-group-slot span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.58rem;
  text-transform: uppercase;
  font-weight: 900;
}
.beyond-group-slot strong {
  color: #fff8df;
  font-size: 0.68rem;
}
/* Equipment slot tabs: Weapon/Armor/Charm double as filter tabs. Tapping one
   lists only the items THIS class can equip for that slot (highest tier first). */
.beyond-group-slot-pick {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  cursor: pointer;
}
.beyond-group-slot.is-active {
  border-color: rgba(255, 214, 128, 0.85);
  background: rgba(255, 210, 120, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 214, 128, 0.4) inset;
}
.beyond-group-slot.is-active span { color: rgba(255, 226, 158, 0.9); }
.beyond-group-slot-clear { justify-self: start; margin-top: 4px; }
/* Passive slot tabs: Reaction/Support/Movement as tappable cards; the open
   slot filters the list below to just its own passives. */
.beyond-passive-slot-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}
.beyond-passive-slot-tabs + .beyond-group-row {
  border-top: 0;
}
.modal.clean-world-modal .beyond-passive-slot {
  display: grid;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  border-radius: 7px;
  text-align: left;
  color: #fff8df;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: pointer;
}
.modal.clean-world-modal .beyond-passive-slot:hover,
.modal.clean-world-modal .beyond-passive-slot:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  outline: none;
}
.modal.clean-world-modal .beyond-passive-slot.is-open,
.modal.clean-world-modal .beyond-passive-slot.is-open:hover,
.modal.clean-world-modal .beyond-passive-slot.is-open:focus-visible {
  background: rgba(226, 191, 104, 0.12);
  border-color: rgba(255, 236, 178, 0.55);
}
.beyond-passive-slot span,
.beyond-passive-slot strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.beyond-passive-slot span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.58rem;
  text-transform: uppercase;
  font-weight: 900;
}
.beyond-passive-slot span i {
  font-style: normal;
  color: rgba(255, 255, 255, 0.4);
}
.beyond-passive-slot strong {
  color: #fff8df;
  font-size: 0.68rem;
}
.modal.clean-world-modal .beyond-passive-slot.is-open span {
  color: rgba(255, 236, 178, 0.78);
}
.modal.clean-world-modal .beyond-passive-slot.is-open strong {
  color: #e2bf68;
}
.beyond-group-gear-list {
  display: grid;
  gap: 5px;
  margin-top: 5px;
}
.beyond-group-gear-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.beyond-group-gear-row strong,
.beyond-group-gear-row small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.beyond-group-gear-row small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.62rem;
}
.beyond-group-gear-row.equipped strong {
  color: #e2bf68;
}
.modal.clean-world-modal.beyond-menu-modal .beyond-group-panel-scroll .monster-meta,
.modal.clean-world-modal.beyond-menu-modal .beyond-group-gear-list .monster-meta {
  color: rgba(255, 248, 223, 0.66) !important;
}
.beyond-class-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
  gap: 12px;
}
.beyond-assign-row {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.beyond-assign-row header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.beyond-assign-grid,
.beyond-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 6px;
}
.modal.clean-world-modal .beyond-assign-grid button {
  min-height: 48px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 7px;
}
.beyond-assign-grid button b {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: 6px;
  color: #12100b;
  background: var(--class-color);
}
.beyond-assign-grid button span,
.beyond-class-preview p,
.beyond-class-preview small,
.beyond-tree-node small,
.beyond-release-ability small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.beyond-assign-grid button.is-active {
  border-color: rgba(226, 191, 104, 0.7);
  box-shadow: inset 0 0 0 1px rgba(226, 191, 104, 0.35);
}
.beyond-class-preview {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.beyond-class-preview.locked {
  opacity: 0.6;
}
.beyond-release-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px;
}
.beyond-release-card {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.beyond-release-card.locked {
  opacity: 0.68;
}
.beyond-release-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.beyond-release-card header > span:last-child {
  color: #e2bf68;
  font-size: 0.82rem;
  text-align: right;
}
.beyond-release-ability {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86px;
  gap: 8px;
  align-items: center;
  min-height: 50px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.modal.clean-world-modal .beyond-release-ability button {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.74rem;
}
.beyond-release-ability.released strong {
  color: #e2bf68;
}
.beyond-skills-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
  gap: 12px;
  align-items: start;
}
.beyond-skill-units {
  display: grid;
  gap: 10px;
  position: sticky;
  top: 0;
}
.beyond-skill-unit,
.beyond-gear-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}
.beyond-skill-unit header,
.beyond-gear-row {
  align-items: center;
}
.beyond-skill-unit header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #e2bf68;
}
.beyond-skill-slots {
  display: grid;
  gap: 6px;
}
.beyond-skill-slot {
  display: grid;
  grid-template-columns: minmax(76px, auto) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.beyond-skill-slot span,
.beyond-gear-row small {
  min-width: 0;
  color: rgba(255, 255, 255, 0.68);
  overflow-wrap: anywhere;
}
.beyond-skill-equip-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.modal.clean-world-modal .beyond-skill-equip-buttons button,
.modal.clean-world-modal .beyond-skill-slot button {
  min-height: 30px;
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 0.68rem;
}
.beyond-gear-list {
  display: grid;
  gap: 8px;
}
.beyond-gear-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.modal.beyond-class-picker-modal .beyond-class-picker-card {
  position: relative;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--class-color) 16%, transparent), transparent 46%),
    linear-gradient(180deg, rgba(9, 12, 17, 0.96), rgba(3, 5, 8, 0.98));
  box-shadow: none;
}
.modal.beyond-class-picker-modal .beyond-class-picker-card .world-modal-close,
/* "Back to group" is a labeled pill — a second bare ✕ next to the world close
   button read as a duplicate close. */
.modal.beyond-class-picker-modal .beyond-class-picker-return {
  position: absolute;
  z-index: 240;
  top: max(10px, env(safe-area-inset-top));
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff8df;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}
.modal.beyond-class-picker-modal .beyond-class-picker-card .world-modal-close {
  right: max(10px, env(safe-area-inset-right));
}
.modal.beyond-class-picker-modal .beyond-class-picker-return {
  left: max(10px, env(safe-area-inset-left));
}
.beyond-class-picker-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--class-color) 18%, transparent), rgba(255, 255, 255, 0.04)),
    rgba(8, 10, 14, 0.8);
}
.beyond-class-picker-head h2,
.beyond-class-picker-head small,
.beyond-class-picker-head strong,
.beyond-class-picker-head span {
  display: block;
  margin: 0;
  min-width: 0;
}
.beyond-class-picker-head small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}
.beyond-class-picker-head h2 {
  color: #fff8df;
  font-size: 1.05rem;
}
.beyond-class-picker-head strong {
  color: #e2bf68;
  font-size: 0.86rem;
}
.beyond-class-picker-head span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
}
.beyond-class-wheel-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  flex: 1 1 auto;
}
.beyond-class-wheel-scroll {
  min-height: 0;
  overflow: hidden;
  touch-action: pan-x pan-y;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 0;
  background: transparent;
}
.beyond-class-wheel {
  position: relative;
  width: min(1020px, 96vw);
  min-width: 0;
  height: min(760px, calc(100dvh - 130px));
  min-height: 420px;
  margin: 0 auto;
}
.beyond-wheel-ring {
  display: none;
}
.modal.clean-world-modal .beyond-wheel-job {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: var(--z, 120);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  width: 110px;
  min-height: 116px;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 0;
  border-radius: 0;
  color: #fff8df;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  text-align: center;
  white-space: normal;
}
/* Locked classes: pure black silhouette over a faint halo - the class's look
   stays hidden until it is unlocked. Applies to every unit's wheel, including
   the special allies' exclusive classes. */
.modal.clean-world-modal .beyond-wheel-job.locked {
  background: transparent;
}
.beyond-wheel-job.locked .beyond-wheel-figure,
.beyond-wheel-figure.is-locked {
  background: radial-gradient(ellipse at 50% 56%, rgba(148, 163, 205, 0.2), transparent 70%);
}
.beyond-wheel-job.locked .beyond-wheel-figure::after,
.beyond-wheel-figure.is-locked::after {
  filter: brightness(0);
  opacity: 0.9;
}
.beyond-wheel-job.locked b,
.beyond-wheel-job.locked small {
  color: rgba(255, 255, 255, 0.55);
}
.modal.clean-world-modal .beyond-wheel-job.is-selected {
  border-color: transparent;
  box-shadow: none;
}
.modal.clean-world-modal .beyond-wheel-job.is-current .beyond-wheel-figure {
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--class-color) 70%, white 10%)) drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5));
}
.beyond-wheel-figure {
  position: relative;
  width: 74px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: #11100d;
  box-shadow: none;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.5));
}
/* Sheet frames draw the character flush to the frame's bottom edge (white-mage
   robes hit the last pixel row), so an edge-to-edge map reads as "cut off".
   The art lives on an inset pseudo-element: uniform shrink keeps the frame
   aspect and lifts the feet clear of the box bottom / stage disc. */
.beyond-wheel-figure::after {
  content: "";
  position: absolute;
  inset: 0 3.5% 7%;
  background: var(--beyond-class-art, none);
  background-repeat: no-repeat;
  background-size: var(--beyond-class-art-size, contain);
  background-position: var(--beyond-class-art-pos, center);
  pointer-events: none;
}
.beyond-wheel-figure i {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 950;
  opacity: var(--beyond-class-label-opacity, 1);
}
.beyond-wheel-job b,
.beyond-wheel-job small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* dark pill backdrop: side-of-wheel cards overlap, labels must stay legible */
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(4, 6, 10, 0.62);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.86);
}
.beyond-wheel-job b {
  font-size: 0.66rem;
}
.beyond-wheel-job small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.58rem;
}
.beyond-wheel-job.unlocked b {
  color: #fff4cc;
}
.beyond-wheel-job.is-current b {
  color: #12100b;
  background: linear-gradient(180deg, #f2d287, #d9ae4f);
}
.beyond-wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 230px;
  min-height: 238px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 0;
  border-radius: 0;
  color: #fff8df;
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
  z-index: 190;
}
.beyond-wheel-center .beyond-wheel-figure.large {
  width: 128px;
  height: 154px;
  border-radius: 0;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--class-color) 42%, transparent)) drop-shadow(0 16px 14px rgba(0, 0, 0, 0.56));
}
.beyond-wheel-center strong,
.beyond-wheel-center small,
.beyond-wheel-center span {
  display: block;
  min-width: 0;
}
.beyond-wheel-center strong {
  font-size: 1rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.86);
}
.beyond-wheel-center small {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.64rem;
}
.beyond-wheel-requirements {
  max-width: 184px;
  color: #fff8df;
  font-size: 0.68rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.beyond-class-picker-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.beyond-class-picker-meta {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.beyond-class-picker-meta small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.beyond-class-picker-footer .dialogue-actions {
  display: grid;
  grid-template-columns: minmax(92px, 1fr);
  gap: 8px;
  margin: 0;
}
.beyond-class-picker-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  overflow: auto;
}
.beyond-class-picker-info p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
}
.beyond-class-picker-info small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.68rem;
  line-height: 1.28;
}
.beyond-class-picker-info .dialogue-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.beyond-tree {
  display: grid;
  gap: 12px;
}
.beyond-tree-tier h3,
.beyond-loot-grid h3,
.beyond-retreat-card h3 {
  margin: 0 0 8px;
  color: #e2bf68;
  font-size: 0.9rem;
}
.beyond-tree-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.beyond-tree-node {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 10px;
  border-left: 4px solid var(--class-color);
}
.beyond-tree-node.locked {
  opacity: 0.55;
}
.beyond-tree-node.mastered {
  background: rgba(226, 191, 104, 0.12);
}
.beyond-tree-node.angel {
  border-color: rgba(255, 255, 255, 0.78);
}
.beyond-loot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding: 2px 6px 14px 2px;
}
.beyond-loot-shell {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  overflow: hidden;
}
.beyond-loot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 44px 0 2px;
}
.beyond-loot-head > div:first-child {
  display: grid;
  gap: 3px;
}
.beyond-loot-head > div:first-child > strong {
  color: #fff4cf;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
}
.beyond-loot-head > div:first-child > small {
  color: rgba(255, 255, 255, 0.64);
}
.beyond-loot-summary {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.beyond-loot-summary span {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: baseline;
  padding: 5px 8px;
  border: 1px solid rgba(226, 191, 104, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(226, 191, 104, 0.07);
  font-size: 0.7rem;
}
.beyond-loot-summary b {
  color: #e2bf68;
  font-size: 0.82rem;
}
.beyond-loot-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.beyond-loot-grid section {
  min-width: 0;
  padding: 10px;
  align-self: start;
  overflow: hidden;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}
.beyond-loot-grid section.is-class-jp {
  grid-column: 1 / -1;
}
.beyond-loot-grid h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(226, 191, 104, 0.18);
}
.beyond-loot-grid h3 em {
  min-width: 24px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #18130a;
  background: #e2bf68;
  font-size: 0.68rem;
  font-style: normal;
  text-align: center;
}
.beyond-loot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.beyond-loot-row:first-of-type {
  border-top: 0;
}
.beyond-loot-row span {
  min-width: 42px;
  padding: 3px 7px;
  border-radius: 6px;
  color: #e2bf68;
  background: rgba(226, 191, 104, 0.08);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.beyond-loot-row strong,
.beyond-loot-row small {
  min-width: 0;
  overflow-wrap: anywhere;
}
.beyond-loot-row.is-class > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.beyond-loot-row.is-class small {
  color: rgba(255, 255, 255, 0.66);
}
.beyond-loot-row.empty {
  opacity: 0.62;
}
.beyond-retreat-card {
  width: min(460px, 100%);
  margin: 16px auto;
  padding: 18px;
  text-align: center;
}
.beyond-retreat-card p {
  margin: 0 0 14px;
}
@media (max-width: 760px) {
  .modal.beyond-menu-modal,
  .modal.beyond-class-picker-modal {
    padding: 0;
  }
  .modal.beyond-menu-modal .beyond-menu-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    box-sizing: border-box;
    border-radius: 0;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .beyond-group-shell,
  .beyond-class-wheel-layout {
    grid-template-columns: 1fr;
  }
  .beyond-stage-row {
    justify-content: start;
  }
  .beyond-stage-figure .beyond-wheel-figure.stage {
    width: 64px;
    height: 78px;
  }
  .beyond-market-grid {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  }
  .beyond-member-portrait.large {
    width: 64px;
    height: 64px;
  }
  .beyond-group-hero {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    padding: 8px;
  }
  .beyond-group-hero-actions {
    grid-column: auto;
    grid-template-columns: 1fr;
    align-self: start;
    min-width: 32px;
  }
  .beyond-group-detail-tabs {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1px;
  }
  .beyond-group-slots {
    grid-template-columns: 1fr;
  }
  .beyond-group-row,
  .beyond-group-gear-row {
    grid-template-columns: minmax(0, 1fr) 68px;
  }
  .beyond-group-gear-row .gear-icon-slot {
    display: none;
  }
  .modal.beyond-class-picker-modal .beyond-class-picker-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    box-sizing: border-box;
    border-radius: 0;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .beyond-class-wheel {
    min-width: 0;
    min-height: 360px;
    width: min(96vw, 560px);
    height: min(64dvh, 560px);
  }
  .modal.clean-world-modal .beyond-wheel-job {
    width: 94px;
    min-height: 96px;
    padding: 0;
  }
  .beyond-wheel-center {
    width: 176px;
    min-height: 194px;
    padding: 12px;
  }
  .beyond-wheel-center .beyond-wheel-figure.large {
    width: 104px;
    height: 124px;
  }
  .beyond-class-picker-footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .beyond-class-picker-footer .dialogue-actions {
    grid-template-columns: 1fr;
  }
  .beyond-squad-row,
  .beyond-class-layout,
  .beyond-skills-layout,
  .beyond-gear-row,
  .beyond-release-ability {
    grid-template-columns: 1fr;
  }
  .beyond-skill-units {
    position: static;
  }
  .beyond-skill-slot {
    grid-template-columns: 1fr;
  }
  .beyond-skill-equip-buttons {
    justify-content: flex-start;
  }
  .beyond-squad-row {
    justify-items: start;
  }
  .beyond-squad-meta {
    justify-items: start;
  }
  .beyond-release-card header {
    align-items: start;
    flex-direction: column;
  }
  .beyond-release-card header > span:last-child {
    text-align: left;
  }
}

@media (max-width: 960px), (pointer: coarse) {
  html.is-touch .modal.beyond-menu-modal {
    display: grid;
    place-items: stretch;
    padding: 0;
    background: #05070b;
  }

  html.is-touch .modal.beyond-menu-modal .beyond-menu-card {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    color: #fff8df;
    background:
      radial-gradient(circle at 22% 0%, rgba(226, 191, 104, 0.16), transparent 42%),
      linear-gradient(180deg, rgba(9, 12, 16, 0.98), rgba(3, 5, 8, 0.99));
    overflow: hidden;
  }

  html.is-touch .modal.beyond-menu-modal .world-modal-close {
    color: #fff8df;
    background: rgba(4, 5, 7, 0.9);
    border-color: rgba(255, 242, 204, 0.32);
  }

  html.is-touch .modal.clean-world-modal .beyond-group-class-badge-button {
    min-height: 32px;
    padding: 2px 29px 2px 2px;
    border-color: color-mix(in srgb, var(--class-color) 60%, rgba(255, 255, 255, 0.24));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--class-color) 18%, rgba(255, 255, 255, 0.06)), rgba(0, 0, 0, 0.2)),
      rgba(0, 0, 0, 0.18);
  }

  html.is-touch .modal.clean-world-modal .beyond-group-class-badge-button::after {
    right: 8px;
    width: 15px;
    height: 15px;
    font-size: 0.68rem;
  }

  html.is-touch .beyond-group-shell {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 6px;
  }

  html.is-touch .beyond-group-detail {
    gap: 6px;
  }

  html.is-touch .beyond-group-hero {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 7px 46px 7px 7px;
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--class-color) 18%, transparent), rgba(255, 255, 255, 0.055)),
      rgba(9, 11, 15, 0.9);
  }

  html.is-touch .beyond-member-portrait.large {
    width: clamp(46px, 12dvh, 64px);
    height: clamp(46px, 12dvh, 64px);
  }

  html.is-touch .beyond-group-hero > div:nth-of-type(1) {
    gap: 3px;
  }

  html.is-touch .beyond-group-hero > div:nth-of-type(1) > strong {
    font-size: clamp(0.78rem, 2.7dvh, 1rem);
    line-height: 1.05;
  }

  html.is-touch .beyond-group-hero small,
  html.is-touch .beyond-group-hero em {
    font-size: clamp(0.58rem, 2dvh, 0.72rem);
    line-height: 1.18;
  }

  html.is-touch .beyond-gender-marker {
    min-width: clamp(28px, 7.2dvh, 32px);
    height: clamp(28px, 7.2dvh, 32px);
    font-size: clamp(0.64rem, 2dvh, 0.74rem);
  }

  html.is-touch .beyond-group-detail-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    min-height: clamp(36px, 9dvh, 44px);
    overflow: visible;
  }

  html.is-touch .modal.clean-world-modal .beyond-group-detail-tabs button {
    min-width: 0;
    min-height: clamp(36px, 9dvh, 44px);
    padding: 0 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(0.62rem, 2.35dvh, 0.78rem);
    color: #fff8df;
    background:
      linear-gradient(180deg, rgba(34, 38, 45, 0.98), rgba(7, 9, 13, 0.99));
    border-color: rgba(255, 242, 204, 0.34);
  }

  html.is-touch .modal.clean-world-modal .beyond-group-detail-tabs button.is-active {
    color: #12100b;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--class-color) 74%, white 16%), color-mix(in srgb, var(--class-color) 92%, black 8%));
    border-color: color-mix(in srgb, var(--class-color) 70%, white 18%);
  }

  html.is-touch .beyond-group-panel-scroll {
    gap: 6px;
    padding-right: 2px;
  }

  html.is-touch .beyond-group-statline,
  html.is-touch .beyond-gear-rule {
    font-size: clamp(0.55rem, 1.9dvh, 0.66rem);
    line-height: 1.18;
  }

  html.is-touch .beyond-group-statchips {
    gap: 3px;
  }

  html.is-touch .beyond-group-statchips span {
    min-height: clamp(18px, 5dvh, 22px);
    padding: 1px 6px;
    font-size: clamp(0.56rem, 1.9dvh, 0.68rem);
  }

  html.is-touch .beyond-compact-section {
    gap: 4px;
    padding: 7px;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 242, 204, 0.16);
  }

  html.is-touch .beyond-compact-section h3 {
    font-size: clamp(0.68rem, 2.2dvh, 0.8rem);
  }

  html.is-touch .beyond-group-row,
  html.is-touch .beyond-group-gear-row {
    grid-template-columns: minmax(0, 1fr) clamp(60px, 16vw, 74px);
    gap: 6px;
    min-height: clamp(34px, 8.6dvh, 42px);
    padding: 5px 0;
  }

  /* Gear rows carry an icon as a third child — keep all three columns so the
     text never lands in the button column and the button never wraps away. */
  html.is-touch .beyond-group-gear-row {
    grid-template-columns: auto minmax(0, 1fr) clamp(60px, 16vw, 74px);
  }

  html.is-touch .beyond-group-gear-row .gear-icon-slot {
    display: grid;   /* the ≤760px rule hides it; at 34px it fits every phone */
    width: clamp(34px, 9dvh, 44px);
    height: clamp(34px, 9dvh, 44px);
  }

  html.is-touch .beyond-group-gear-row .gear-icon {
    width: clamp(30px, 8dvh, 38px);
    height: clamp(30px, 8dvh, 38px);
  }

  html.is-touch .beyond-group-row strong,
  html.is-touch .beyond-group-gear-row strong {
    font-size: clamp(0.66rem, 2.15dvh, 0.78rem);
    line-height: 1.12;
  }

  html.is-touch .beyond-group-row small,
  html.is-touch .beyond-group-row em,
  html.is-touch .beyond-group-gear-row small {
    font-size: clamp(0.52rem, 1.75dvh, 0.62rem);
    line-height: 1.14;
  }

  html.is-touch .modal.clean-world-modal .beyond-group-row button,
  html.is-touch .modal.clean-world-modal .beyond-group-slot button,
  html.is-touch .modal.clean-world-modal .beyond-group-gear-row button {
    min-height: clamp(28px, 7.2dvh, 34px);
    padding: 0 6px;
    font-size: clamp(0.56rem, 1.8dvh, 0.68rem);
  }

  html.is-touch .beyond-group-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .beyond-group-slot {
    padding: 5px;
  }

  html.is-touch .beyond-group-slot strong {
    font-size: clamp(0.58rem, 1.9dvh, 0.68rem);
  }

  html.is-touch .modal.clean-world-modal .beyond-passive-slot {
    padding: 5px;
    min-height: 40px;
  }

  html.is-touch .beyond-passive-slot strong {
    font-size: clamp(0.58rem, 1.9dvh, 0.68rem);
  }

  /* Stage view on touch: the platform row scrolls sideways, figures scale
     with the viewport height so mobile landscape keeps everything visible. */
  html.is-touch .beyond-group-stage {
    gap: 6px;
  }

  html.is-touch .beyond-stage-head {
    padding: 6px 48px 6px 8px;
    gap: 2px;
  }

  html.is-touch .beyond-stage-head strong {
    font-size: clamp(0.76rem, 2.6dvh, 0.92rem);
  }

  html.is-touch .beyond-stage-head small {
    font-size: clamp(0.54rem, 1.85dvh, 0.68rem);
  }

  html.is-touch .beyond-stage-platform {
    padding: 10px 8px 10px;
  }

  html.is-touch .beyond-stage-row {
    gap: 10px;
  }

  html.is-touch .beyond-stage-row.bench-row,
  html.is-touch .beyond-stage-row.candidate-row {
    justify-content: start;
  }

  html.is-touch .beyond-stage-figure .beyond-wheel-figure.stage {
    width: clamp(52px, 15dvh, 78px);
    height: clamp(64px, 19dvh, 94px);
  }

  html.is-touch .beyond-stage-row.bench-row .beyond-wheel-figure.stage {
    width: clamp(40px, 11dvh, 58px);
    height: clamp(50px, 14dvh, 72px);
  }

  html.is-touch .beyond-stage-member strong {
    font-size: clamp(0.6rem, 2dvh, 0.72rem);
  }

  html.is-touch .beyond-stage-member small {
    font-size: clamp(0.5rem, 1.7dvh, 0.6rem);
  }

  html.is-touch .beyond-member-portrait {
    width: clamp(30px, 8dvh, 38px);
    height: clamp(30px, 8dvh, 38px);
  }

  html.is-touch .modal.clean-world-modal .beyond-group-back {
    padding: 4px 7px;
    font-size: clamp(0.58rem, 2dvh, 0.7rem);
  }

  html.is-touch .beyond-market-grid {
    grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 24vw, 172px), 1fr));
    gap: 6px;
  }
  .beyond-loot-head {
    display: grid;
    gap: 8px;
    padding-right: 38px;
  }
  .beyond-loot-summary {
    justify-content: start;
  }
  .beyond-loot-grid {
    grid-template-columns: 1fr;
    padding-right: 3px;
  }
  .beyond-loot-grid section.is-class-jp {
    grid-column: auto;
  }

  html.is-touch .beyond-market-grid--armory {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.is-touch .beyond-market-card {
    padding: 7px 6px;
  }

  html.is-touch .beyond-market-card--armory {
    grid-template-columns: clamp(40px, 10dvh, 48px) minmax(0, 1fr) minmax(62px, auto);
    grid-template-areas:
      "tag tag buy"
      "icon copy buy";
    justify-items: start;
    align-items: center;
    gap: 3px 8px;
    min-height: 64px;
    text-align: left;
  }

  html.is-touch .beyond-market-card--armory .beyond-market-tag {
    grid-area: tag;
    justify-self: start;
    max-width: 100%;
    font-size: clamp(0.46rem, 1.55dvh, 0.56rem);
  }

  html.is-touch .beyond-market-card--armory .gear-icon-slot,
  html.is-touch .beyond-market-card--armory .beyond-market-boost-icon {
    grid-area: icon;
    width: clamp(38px, 9.5dvh, 46px);
    height: clamp(38px, 9.5dvh, 46px);
  }

  html.is-touch .beyond-market-card--armory .gear-icon {
    width: clamp(34px, 8.5dvh, 42px);
    height: clamp(34px, 8.5dvh, 42px);
  }

  html.is-touch .beyond-market-card--armory .beyond-market-copy {
    grid-area: copy;
    justify-items: start;
  }

  html.is-touch .beyond-market-card--armory strong {
    font-size: clamp(0.66rem, 2.2dvh, 0.78rem);
    text-align: left;
  }

  html.is-touch .beyond-market-card--armory small {
    font-size: clamp(0.52rem, 1.75dvh, 0.62rem);
    text-align: left;
  }

  html.is-touch .modal.clean-world-modal .beyond-market-card--armory > button {
    grid-area: buy;
    justify-self: end;
    min-width: clamp(62px, 16vw, 78px);
    min-height: clamp(34px, 8.6dvh, 42px);
    padding: 0 8px;
    font-size: clamp(0.6rem, 1.95dvh, 0.72rem);
  }

  html.is-touch .modal.beyond-class-picker-modal {
    display: grid;
    place-items: stretch;
    padding: 0;
    background: #05070b;
  }

  html.is-touch .modal.beyond-class-picker-modal .beyond-class-picker-card {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    box-sizing: border-box;
    gap: 6px;
    padding: max(7px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  html.is-touch .beyond-class-wheel-layout {
    min-height: 0;
  }

  html.is-touch .beyond-class-wheel-scroll {
    min-height: 0;
    touch-action: none;
    cursor: grab;
    user-select: none;
  }

  html.is-touch .beyond-class-wheel-scroll:active {
    cursor: grabbing;
  }

  html.is-touch .beyond-class-wheel {
    width: min(100%, 680px);
    height: min(580px, calc(100dvh - 80px));
    min-height: 260px;
  }

  html.is-touch .modal.clean-world-modal .beyond-wheel-job {
    width: clamp(78px, 18dvh, 96px);   /* label pills need ~11 chars before ellipsis */
    min-height: clamp(70px, 16dvh, 96px);
  }

  html.is-touch .beyond-wheel-figure {
    width: clamp(44px, 11dvh, 62px);
    height: clamp(54px, 14dvh, 76px);
  }

  html.is-touch .beyond-wheel-job b {
    font-size: clamp(0.52rem, 1.85dvh, 0.64rem);
  }

  html.is-touch .beyond-wheel-job small {
    font-size: clamp(0.48rem, 1.7dvh, 0.58rem);
  }

  html.is-touch .beyond-wheel-center {
    width: clamp(156px, 38dvh, 210px);
    min-height: clamp(168px, 42dvh, 224px);
    gap: 5px;
  }

  html.is-touch .beyond-wheel-center .beyond-wheel-figure.large {
    width: clamp(92px, 24dvh, 124px);
    height: clamp(110px, 30dvh, 148px);
  }

  html.is-touch .beyond-wheel-center strong {
    font-size: clamp(0.82rem, 2.8dvh, 1rem);
  }

  html.is-touch .beyond-wheel-center small,
  html.is-touch .beyond-wheel-requirements,
  html.is-touch .beyond-class-picker-meta small {
    font-size: clamp(0.56rem, 1.9dvh, 0.68rem);
    line-height: 1.16;
  }

  html.is-touch .beyond-class-picker-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  html.is-touch .beyond-class-picker-footer .dialogue-actions {
    grid-template-columns: minmax(74px, auto);
  }
}

@media (max-width: 960px) and (max-height: 520px) and (orientation: landscape), (pointer: coarse) and (max-height: 520px) and (orientation: landscape) {
  html.is-touch .beyond-group-hero {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  html.is-touch .beyond-group-statline {
    display: none;
  }

  /* short landscape phones: platform + one bench row must fit one screen */
  html.is-touch .beyond-stage-figure .beyond-wheel-figure.stage {
    width: clamp(46px, 13dvh, 62px);
    height: clamp(56px, 16dvh, 76px);
  }

  html.is-touch .beyond-stage-platform {
    padding: 6px 8px;
  }

  html.is-touch .beyond-class-wheel {
    width: min(100%, 620px);
    height: calc(100dvh - 72px);
    min-height: 248px;
  }

  html.is-touch .beyond-class-picker-footer {
    min-height: 38px;
  }

  html.is-touch .beyond-class-picker-footer .dialogue-actions button {
    min-height: 34px;
    padding: 0 10px;
  }
}

/* ===== Seal award ceremony (arena badge) ==================================
   Staged stamp: seal slams in (flash + shock ring + gold sparks + card jolt),
   a sheen sweeps the medal, text cascades, and the collection pip row shows
   progress with the new seal pinging. Scoped to .is-staged. */
.seal-award-stage {
  position: relative;
  width: 172px;
  height: 172px;
  margin: 4px auto 8px;
}

.seal-award.is-staged {
  animation: seal-award-slam 980ms cubic-bezier(0.2, 0.85, 0.3, 1) both;
}

/* The card itself now POPS UP first (rise + overshoot + fade) before the
   stamp jolt lands - the container is part of the ceremony. */
@keyframes seal-award-slam {
  0% { opacity: 0; transform: translateY(30px) scale(0.9); }
  22% { opacity: 1; transform: translateY(-4px) scale(1.02); }
  34% { transform: translateY(0) scale(1); }
  56%, 82%, 100% { transform: translate(0, 0); }
  64% { transform: translate(0, 5px); }
  72% { transform: translate(-3px, 2px); }
  78% { transform: translate(2px, -1px); }
}

.seal-award.is-staged .seal-award-icon {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  /* stamp choreography waits ~260ms for the card's own pop-up to land */
  animation:
    seal-award-stamp 640ms cubic-bezier(0.22, 0.9, 0.24, 1.18) 260ms both,
    seal-award-float 2.8s ease-in-out 1210ms infinite;
}

@keyframes seal-award-stamp {
  0% { opacity: 0; transform: translateY(-64px) scale(2.3) rotate(-14deg); }
  55% { opacity: 1; transform: translateY(3px) scale(0.9) rotate(2deg); }
  72% { transform: translateY(-2px) scale(1.07) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

.seal-award-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(255, 249, 214, 0.95), rgba(255, 233, 168, 0.4) 45%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  animation: seal-award-flash 900ms ease-out 260ms both;
}

@keyframes seal-award-flash {
  0%, 38% { opacity: 0; }
  50% { opacity: 0.9; }
  100% { opacity: 0; }
}

.seal-award-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  border: 4px solid rgba(255, 233, 168, 0.95);
  box-shadow: 0 0 26px rgba(255, 233, 168, 0.8);
  opacity: 0;
  animation: seal-award-ringout 820ms ease-out 620ms both;
}

@keyframes seal-award-ringout {
  0% { opacity: 0.95; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(2.3); }
}

.seal-award-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 12px #ffe9a8;
  opacity: 0;
  animation: seal-award-spark 780ms ease-out calc(640ms + var(--i) * 14ms) both;
}

@keyframes seal-award-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + cos(var(--i) * 30deg) * 128px),
                calc(-50% + sin(var(--i) * 30deg) * 128px)) scale(0.3);
  }
}

.seal-award-shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--seal-award-mask);
  mask-image: var(--seal-award-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.seal-award-shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-18deg) translateX(0);
  mix-blend-mode: screen;
  animation: seal-award-sheen 1150ms ease-in-out 1310ms both;
}

@keyframes seal-award-sheen {
  to { transform: skewX(-18deg) translateX(400%); }
}

.seal-award.is-staged .seal-award-kicker,
.seal-award.is-staged h2,
.seal-award.is-staged > p,
.seal-award.is-staged .seal-award-progress,
.seal-award.is-staged .dialogue-actions {
  opacity: 0;
  animation: seal-award-rise 460ms cubic-bezier(0.2, 0.8, 0.24, 1) both;
}

.seal-award.is-staged .seal-award-kicker { animation-delay: 520ms; }
.seal-award.is-staged h2 { animation-delay: 620ms; }
.seal-award.is-staged > p { animation-delay: 720ms; }
.seal-award.is-staged .seal-award-progress { animation-delay: 830ms; }
.seal-award.is-staged .dialogue-actions { animation-delay: 950ms; }

@keyframes seal-award-rise {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.seal-award-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 2px;
}

.seal-award-progress i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.seal-award-progress i.lit {
  background: linear-gradient(135deg, #ffe9a8, #d79b28);
  border-color: rgba(255, 233, 168, 0.85);
  box-shadow: 0 0 10px rgba(255, 233, 168, 0.65);
}

.seal-award-progress i.is-new {
  animation: seal-award-pip 900ms ease-out 1150ms both;
}

@keyframes seal-award-pip {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 233, 168, 0.65); }
  40% { transform: scale(1.75); box-shadow: 0 0 22px rgba(255, 233, 168, 1); }
  100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 233, 168, 0.65); }
}

.seal-award-progress span {
  margin-left: 4px;
  color: #ffe9a8;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* ===== Evolution scene: silhouette flicker + reveal punch =================
   Added layers only - the base evo-before/evo-after morph keyframes and all
   holo / black-holo sprite variants are untouched. Timings are percentages
   of the same 4.4s scene; stone scenes shift everything by the 2.4s act. */
.evolution-scene:not(.evolution-scene--stone) .evo-monster-wrap {
  animation: evo-heartbeat 2.05s ease-in-out both;
}

@keyframes evo-heartbeat {
  0%, 24% { transform: scale(1); }
  32% { transform: scale(1.018); }
  40% { transform: scale(1); }
  52% { transform: scale(1.03); }
  62% { transform: scale(1); }
  74% { transform: scale(1.045); }
  84% { transform: scale(0.995); }
  100% { transform: scale(1); }
}

.evo-sil {
  z-index: 2;
  opacity: 0;
  filter:
    brightness(0)
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 34px rgba(255, 247, 168, 0.6));
}

.evo-sil-before { animation: evo-sil-before 4.4s linear forwards; }
.evo-sil-after { animation: evo-sil-after 4.4s linear forwards; }

@keyframes evo-sil-before {
  0%, 41.9% { opacity: 0; }
  42%, 44.4% { opacity: 1; }
  44.5%, 46.9% { opacity: 0; }
  47%, 48.9% { opacity: 1; }
  49%, 51.4% { opacity: 0; }
  51.5%, 52.7% { opacity: 1; }
  52.8%, 100% { opacity: 0; }
}

@keyframes evo-sil-after {
  0%, 44.4% { opacity: 0; }
  44.5%, 46.9% { opacity: 1; }
  47%, 48.9% { opacity: 0; }
  49%, 51.4% { opacity: 1; }
  51.5%, 52.7% { opacity: 0; }
  52.8%, 56.5% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.evo-shockwave {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 40px rgba(255, 247, 168, 0.9), inset 0 0 30px rgba(255, 247, 168, 0.6);
  opacity: 0;
  pointer-events: none;
  animation: evo-shockwave 4.4s linear forwards;
}

@keyframes evo-shockwave {
  0%, 61% { opacity: 0; transform: scale(0.2); }
  63% { opacity: 0.95; }
  80%, 100% { opacity: 0; transform: scale(3.4); }
}

.evo-reveal-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.98), rgba(255, 247, 168, 0.55) 40%, transparent 75%);
  opacity: 0;
  pointer-events: none;
  animation: evo-reveal-flash 4.4s linear forwards;
}

@keyframes evo-reveal-flash {
  0%, 58% { opacity: 0; }
  63% { opacity: 0.95; }
  74%, 100% { opacity: 0; }
}

.evolution-scene {
  animation: evo-scene-shake 4.4s linear both;
}

@keyframes evo-scene-shake {
  0%, 62%, 70.5%, 100% { transform: translate(0, 0); }
  63% { transform: translate(-6px, 3px); }
  64.5% { transform: translate(5px, -4px); }
  66% { transform: translate(-4px, -2px); }
  67.5% { transform: translate(3px, 3px); }
  69% { transform: translate(-2px, 1px); }
}

.evolution-scene--stone,
.evolution-scene--stone .evo-sil-before,
.evolution-scene--stone .evo-sil-after,
.evolution-scene--stone .evo-shockwave,
.evolution-scene--stone .evo-reveal-flash {
  animation-delay: 2.4s;
}

/* Result card: halo + rising sprite so the payoff frame lands too. */
.evolution-result {
  position: relative;
  overflow: hidden;
}

.evolution-result::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 0;
  width: min(420px, 80vw);
  height: min(320px, 60vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 247, 168, 0.28), rgba(125, 240, 255, 0.12) 55%, transparent 75%);
  pointer-events: none;
}

.evolution-result > * {
  position: relative;
}

.evolution-result img {
  animation: egg-hatch-result-rise 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .seal-award.is-staged,
  .seal-award-flash,
  .seal-award-ring,
  .seal-award-burst span,
  .seal-award-shine::before,
  .seal-award.is-staged .seal-award-icon,
  .seal-award-progress i.is-new {
    animation: none;
  }
  .seal-award-flash,
  .seal-award-ring,
  .seal-award-burst span {
    opacity: 0;
  }
  .seal-award.is-staged .seal-award-icon { opacity: 1; }
  .seal-award.is-staged .seal-award-kicker,
  .seal-award.is-staged h2,
  .seal-award.is-staged > p,
  .seal-award.is-staged .seal-award-progress,
  .seal-award.is-staged .dialogue-actions {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
  .evolution-scene,
  .evo-sil-before,
  .evo-sil-after,
  .evo-shockwave,
  .evo-reveal-flash,
  .evolution-scene:not(.evolution-scene--stone) .evo-monster-wrap {
    animation: none;
  }
  .evo-sil-before,
  .evo-sil-after,
  .evo-shockwave,
  .evo-reveal-flash {
    opacity: 0;
  }
}

/* ===== Echo Wall ceremony (fullscreen chassis) ============================
   The tune + blessing scenes and their cards run under .modal.echo-cine-modal
   (same pattern as the dig/hatch cinematics): scenes are fixed inset:0, cards
   center on the real viewport. The old evolution-map-modal path pinned them
   to the map-canvas rect, which sits off-center on landscape phones. */
.echo-wall-tune-scene,
.echo-wall-blessing-scene {
  cursor: pointer;
}

.echo-cine-scene {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
}

/* The base .dig-rays gradient is a single wedge (the dig scene adds spans);
   the vault gets a soft twelve-spoke wheel instead. */
.echo-cine-scene .dig-rays {
  width: min(720px, 120vmin);
  height: min(720px, 120vmin);
  background: repeating-conic-gradient(from 0deg, transparent 0deg 9deg, rgba(159, 232, 255, 0.28) 13deg 17deg, transparent 21deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 62%);
  mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 30%, transparent 62%);
  filter: blur(2px);
}

/* The base dig backdrop is striped earth; the vault is open night. */
.echo-cine-scene .dig-bg {
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(25, 38, 74, 0.65), transparent 70%),
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, 0.25), transparent 62%);
}

/* Broad ambient halo behind the subject, so the center reads as the focus
   even before the effects arrive. */
.echo-cine-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 0;
  width: min(560px, 90vmin);
  height: min(560px, 90vmin);
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(164, 131, 255, 0.24), rgba(159, 232, 255, 0.1) 40%, transparent 70%);
  animation: echo-card-aura-breathe 5.2s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Tune scene: the crack in the wall is the subject - a lit fissure the runes
   fly into, ringed by a slow warden orbit. */
.echo-tune-fissure {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 2;
  width: 16px;
  height: 260px;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(159, 232, 255, 0.7) 22%, #ffffff 50%, rgba(164, 131, 255, 0.7) 78%, transparent);
  clip-path: polygon(50% 0, 62% 14%, 40% 30%, 70% 46%, 38% 58%, 64% 72%, 46% 88%, 52% 100%, 44% 88%, 30% 72%, 56% 58%, 26% 46%, 58% 30%, 36% 14%);
  filter: drop-shadow(0 0 8px rgba(159, 232, 255, 0.8)) drop-shadow(0 0 24px rgba(164, 131, 255, 0.6));
  opacity: 0;
  animation: echo-fissure-wake var(--crownlight-duration, 2400ms) ease-out forwards;
  pointer-events: none;
}

@keyframes echo-fissure-wake {
  0% { opacity: 0.25; transform: translate(-50%, -50%) scaleY(0.7); }
  50% { opacity: 0.5; transform: translate(-50%, -50%) scaleY(0.9); }
  66% { opacity: 1; transform: translate(-50%, -50%) scaleY(1.06) scaleX(1.6); }
  100% { opacity: 0.85; transform: translate(-50%, -50%) scaleY(1); }
}

.echo-tune-ring {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 1px dashed rgba(159, 232, 255, 0.34);
  box-shadow: 0 0 30px rgba(159, 232, 255, 0.12), inset 0 0 40px rgba(164, 131, 255, 0.12);
  /* `translate` property, not transform: the spin uses `rotate`, and a
     translate inside `transform` would be applied in the rotated frame -
     the ring would orbit the anchor instead of turning in place. */
  translate: -50% -50%;
  opacity: 0;
  animation: echo-ring-in 900ms ease-out 120ms forwards, echo-ring-spin 18s linear infinite;
  pointer-events: none;
}

.echo-tune-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255, 225, 119, 0.55) 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 2px) 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 2px) 50%, transparent 51%);
}

@keyframes echo-ring-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes echo-ring-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.echo-cine-stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.2px 1.2px at 24px 36px, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1px 1px at 96px 14px, rgba(159, 232, 255, 0.8), transparent 60%),
    radial-gradient(1.6px 1.6px at 66px 82px, rgba(255, 225, 119, 0.7), transparent 60%),
    radial-gradient(1px 1px at 150px 58px, rgba(214, 229, 247, 0.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 41px 118px, rgba(164, 131, 255, 0.75), transparent 60%);
  background-size: 190px 130px, 230px 170px, 270px 210px, 320px 240px, 360px 280px;
  animation: echo-stars-twinkle 5.4s ease-in-out infinite alternate;
}

@keyframes echo-stars-twinkle {
  from { opacity: 0.5; }
  to { opacity: 0.95; }
}

.echo-cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 92% at 50% 44%, transparent 46%, rgba(2, 5, 12, 0.78) 100%);
}

.echo-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 140px 140px;
}

.echo-cine-caption {
  z-index: 10;
  display: grid;
  gap: 4px;
  justify-items: center;
  bottom: clamp(20px, 6vh, 56px);
}

.echo-cine-kicker,
.echo-card-kicker {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: rgba(223, 247, 255, 0.62);
}

.echo-cine-caption h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.45rem, 4.6vmin, 2.3rem);
  letter-spacing: 0.04em;
  color: #f3fbff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 26px rgba(159, 232, 255, 0.4);
}

.echo-cine-caption h2::before,
.echo-cine-caption h2::after {
  content: "";
  width: clamp(26px, 6vw, 54px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 119, 0.75));
}

.echo-cine-caption h2::after {
  background: linear-gradient(90deg, rgba(255, 225, 119, 0.75), transparent);
}

.echo-cine-caption p {
  margin: 0;
  color: rgba(233, 243, 255, 0.82);
}

/* Touch layouts give .dig-caption a heavy black pill; the ceremony caption
   fades up from the vignette instead. */
html.is-touch .echo-cine-caption {
  left: 0;
  right: 0;
  padding: 18px 14px 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(2, 5, 12, 0.66) 40%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.echo-skip-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  animation: echo-skip-hint-in 700ms ease-out 900ms both;
}

@keyframes echo-skip-hint-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Rising gold echo motes while the blessing pours in. */
.echo-level-motes {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.echo-level-motes span {
  position: absolute;
  left: calc((var(--i) - 6.5) * 17px);
  top: 56px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe177;
  box-shadow: 0 0 10px rgba(255, 225, 119, 0.8);
  opacity: 0;
  animation: echo-mote-rise 1700ms ease-in infinite;
  animation-delay: calc(var(--i) * 130ms);
}

.echo-level-motes span:nth-child(3n) { background: #dffaff; box-shadow: 0 0 10px rgba(159, 232, 255, 0.8); }
.echo-level-motes span:nth-child(4n) { width: 3px; height: 3px; }

@keyframes echo-mote-rise {
  0% { opacity: 0; transform: translateY(28px) scale(0.6); }
  22% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-128px) scale(1.1); }
}

/* ---- Ceremony cards (rewards / picker / result) ------------------------- */
.modal.echo-cine-modal .modal-card.echo-wall-card {
  position: relative;
  overflow: hidden;
  width: min(600px, 96vw);
  max-height: min(92dvh, 720px);
  padding: clamp(18px, 3.4vh, 28px) clamp(18px, 3.5vw, 30px);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(8px, 1.6vh, 14px);
  text-align: center;
  color: #e9f3ff;
  border: 1px solid rgba(159, 232, 255, 0.32);
  border-top-color: rgba(223, 247, 255, 0.5);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(164, 131, 255, 0.24), transparent 44%),
    radial-gradient(circle at 50% 88%, rgba(159, 232, 255, 0.14), transparent 52%),
    linear-gradient(180deg, rgba(15, 25, 48, 0.97), rgba(6, 9, 19, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(16, 28, 58, 0.5);
  height: auto;
  min-height: 0;
  animation: echo-card-in 460ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

.modal.echo-cine-modal .modal-card.echo-wall-card > * {
  position: relative;
  z-index: 1;
}

/* The aura must stay out of grid flow or it becomes an empty first row. */
.modal.echo-cine-modal .modal-card.echo-wall-card > .echo-card-aura {
  position: absolute;
  z-index: 0;
}

/* Touch layouts stretch generic modal cards to the viewport; the ceremony
   cards hug their content and sit centered instead. */
html.is-touch .modal.echo-cine-modal .modal-card.echo-wall-card {
  height: auto;
  min-height: 0;
  margin: auto;
}

@keyframes echo-card-in {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.echo-card-aura {
  position: absolute;
  inset: -30% -14%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 12%, rgba(164, 131, 255, 0.2), transparent 42%),
    radial-gradient(circle at 74% 84%, rgba(159, 232, 255, 0.16), transparent 46%);
  animation: echo-card-aura-breathe 6.4s ease-in-out infinite alternate;
}

@keyframes echo-card-aura-breathe {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 1; transform: scale(1.05); }
}

.echo-card-title {
  margin: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vmin, 1.7rem);
  letter-spacing: 0.03em;
  color: #f3fbff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 22px rgba(159, 232, 255, 0.3);
}

.echo-card-sub {
  margin: 0;
  max-width: 54ch;
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(214, 229, 247, 0.82);
}

.echo-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(2px, 1vh, 8px);
}

.echo-cta-primary,
.echo-cta-ghost {
  font: inherit;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  min-height: 46px;
  padding: 11px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.echo-cta-primary {
  border: 1px solid rgba(255, 231, 166, 0.7);
  background: linear-gradient(180deg, #ffe9a8, #e3b054);
  color: #251906;
  box-shadow: 0 10px 26px rgba(227, 176, 84, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.echo-cta-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(227, 176, 84, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.echo-cta-ghost {
  border: 1px solid rgba(159, 232, 255, 0.36);
  background: rgba(159, 232, 255, 0.08);
  color: #cfe9ff;
}

.echo-cta-ghost:hover {
  border-color: rgba(159, 232, 255, 0.6);
  background: rgba(159, 232, 255, 0.14);
}

/* Reward tiles: staggered arrival, gold shimmer on the rare tile. */
.echo-wall-reward-grid > article:nth-child(n) {
  border-color: rgba(159, 232, 255, 0.24);
  background: linear-gradient(180deg, rgba(22, 36, 66, 0.72), rgba(11, 17, 34, 0.85));
  animation: echo-tile-in 480ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
  animation-delay: var(--d, 0ms);
}

.echo-wall-reward-grid article.is-rare {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 225, 119, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 225, 119, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(38, 33, 18, 0.85), rgba(16, 13, 8, 0.9));
}

.echo-wall-reward-grid article.is-rare strong {
  background: linear-gradient(180deg, #ffe9a8, #e3b054);
  color: #251906;
  box-shadow: 0 0 18px rgba(255, 225, 119, 0.45);
}

.echo-wall-reward-grid article.is-rare::after {
  content: "";
  position: absolute;
  inset: -40% -70%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 244, 199, 0.32) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: echo-rare-shimmer 3.2s ease-in-out 1s infinite;
  pointer-events: none;
}

@keyframes echo-rare-shimmer {
  0%, 55% { transform: translateX(-70%); }
  85%, 100% { transform: translateX(70%); }
}

@keyframes echo-tile-in {
  0% { opacity: 0; transform: translateY(12px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Partner picker ----------------------------------------------------- */
.modal.echo-cine-modal .modal-card.echo-picker-card {
  width: min(940px, 96vw);
  max-height: min(92dvh, 700px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
}

.echo-picker-head {
  display: grid;
  gap: 5px;
  justify-items: center;
  width: 100%;
}

/* Hairline between the ceremony header and the party row. */
.echo-picker-head::after {
  content: "";
  width: min(420px, 80%);
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 225, 119, 0.5) 30%, rgba(159, 232, 255, 0.6) 50%, rgba(255, 225, 119, 0.5) 70%, transparent);
}

.echo-picker-runes {
  display: flex;
  gap: 12px;
  margin-bottom: 3px;
}

.echo-picker-runes i {
  width: 11px;
  height: 11px;
  rotate: 45deg;
  border-radius: 2.5px;
  background: var(--c, #9fe8ff);
  box-shadow: 0 0 10px var(--c, #9fe8ff), 0 0 22px var(--c, #9fe8ff);
  animation: echo-rune-bob 2.8s ease-in-out infinite;
}

.echo-picker-runes i:nth-child(2) { animation-delay: 460ms; }
.echo-picker-runes i:nth-child(3) { animation-delay: 920ms; }

@keyframes echo-rune-bob {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-4px); opacity: 1; }
}

.echo-picker-scroll {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 4px 10px;
}

/* Fixed-width cards centered as a row: a full party of six sits on one line
   on desktop and on landscape phones, smaller parties stay centered. */
.echo-picker-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.echo-bless-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 136px;
  padding: 14px 8px 12px;
  overflow: hidden;
  border: 1px solid rgba(159, 232, 255, 0.22);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 36, 66, 0.85), rgba(10, 16, 32, 0.92));
  color: #e9f3ff;
  font: inherit;
  text-align: center;
  cursor: pointer;
  animation: echo-tile-in 460ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
  animation-delay: var(--d, 0ms);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 220ms ease, filter 220ms ease;
}

.echo-bless-card:hover:not(:disabled),
.echo-bless-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 225, 119, 0.55);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(159, 232, 255, 0.18);
  outline: none;
}

.echo-bless-halo {
  position: absolute;
  top: 4px;
  left: 50%;
  translate: -50% 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 232, 255, 0.28), rgba(164, 131, 255, 0.12) 55%, transparent 72%);
  opacity: 0.7;
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.echo-bless-card:hover:not(:disabled) .echo-bless-halo {
  opacity: 1;
  transform: scale(1.12);
}

.echo-bless-portrait {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
}

.echo-bless-portrait img {
  max-width: 84px;
  max-height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(159, 232, 255, 0.28)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
}

.echo-bless-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.92rem;
}

.echo-bless-levels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.8rem;
  color: #cfe9ff;
}

.echo-bless-card.is-capped .echo-bless-levels {
  white-space: normal;
  line-height: 1.2;
  font-size: 0.72rem;
}

.echo-bless-gain {
  padding: 1px 7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a8, #e3b054);
  color: #251906;
  font-size: 0.72rem;
  font-weight: 900;
  font-style: normal;
}

.echo-bless-hp {
  width: 72%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.echo-bless-hp i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7fe6a0, #4ecb73);
}

.echo-bless-hp.is-mid i { background: linear-gradient(90deg, #ffd97a, #f0b445); }
.echo-bless-hp.is-low i { background: linear-gradient(90deg, #ff9a62, #ef6d3f); }
.echo-bless-hp.is-fainted { background: rgba(239, 92, 92, 0.28); }

.echo-bless-cta {
  margin-top: 2px;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 4px 18px;
  border: 1px solid rgba(159, 232, 255, 0.4);
  border-radius: 999px;
  background: rgba(159, 232, 255, 0.1);
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #dff4ff;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.echo-bless-card:hover:not(:disabled) .echo-bless-cta {
  border-color: rgba(255, 231, 166, 0.7);
  background: linear-gradient(180deg, #ffe9a8, #e3b054);
  color: #251906;
}

.echo-bless-card.is-capped {
  opacity: 0.5;
  cursor: default;
  filter: saturate(0.5);
}

.echo-bless-card.is-capped .echo-bless-cta {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
}

/* Confirm flourish: the chosen card lights gold, the rest step back. */
.echo-picker-card.is-choosing .echo-bless-card:not(.is-chosen) {
  opacity: 0.32;
  filter: saturate(0.55);
  transform: scale(0.97);
}

.echo-bless-card.is-chosen {
  border-color: rgba(255, 225, 119, 0.85);
  box-shadow: 0 0 0 2px rgba(255, 225, 119, 0.35), 0 0 36px rgba(255, 225, 119, 0.4);
  animation: echo-chosen-pop 430ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes echo-chosen-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.echo-picker-foot {
  margin-top: 4px;
}

/* ---- Blessing result ---------------------------------------------------- */
.echo-result-portrait {
  position: relative;
  width: min(230px, 60vw);
  height: min(150px, 26vh);
  display: grid;
  place-items: center;
}

.echo-result-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  /* `translate` stays independent of the breathe animation's transform. */
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 244, 199, 0.3), rgba(159, 232, 255, 0.2) 46%, transparent 72%);
  animation: echo-card-aura-breathe 4.6s ease-in-out infinite alternate;
  pointer-events: none;
}

.echo-result-portrait img {
  position: relative;
  max-width: min(200px, 52vw);
  max-height: min(144px, 24vh);
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 225, 119, 0.4)) drop-shadow(0 14px 16px rgba(0, 0, 0, 0.5));
  animation: echo-result-rise 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@keyframes echo-result-rise {
  0% { opacity: 0; transform: translateY(16px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.echo-level-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border: 1px solid rgba(159, 232, 255, 0.38);
  border-radius: 999px;
  background: rgba(159, 232, 255, 0.09);
  font-weight: 900;
}

.echo-level-chip strong {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: rgba(223, 247, 255, 0.6);
}

.echo-level-before {
  font-size: 1rem;
  color: rgba(223, 247, 255, 0.6);
}

.echo-level-arrow { color: #ffe177; }

.echo-level-after {
  font-size: 1.3rem;
  color: #ffe177;
  text-shadow: 0 0 14px rgba(255, 225, 119, 0.5);
  animation: echo-after-pop 620ms cubic-bezier(0.2, 0.9, 0.3, 1.4) 260ms both;
}

@keyframes echo-after-pop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

.modal.echo-cine-modal .modal-card.echo-wall-result {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Landscape-phone compaction: every control stays reachable ---------- */
@media (max-height: 520px) {
  .modal.echo-cine-modal { padding: 10px; }

  .modal.echo-cine-modal .modal-card.echo-wall-card {
    align-content: start;
    gap: 6px;
    padding: 12px 14px;
    max-height: calc(100dvh - 20px);
  }

  .echo-card-title { font-size: 1.08rem; }
  .echo-card-sub { font-size: 0.8rem; }
  .echo-card-kicker { font-size: 0.58rem; }

  .echo-wall-reward-grid {
    gap: 6px;
    width: min(440px, 96%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .echo-wall-reward-grid article {
    padding: 6px 4px;
    gap: 3px;
  }

  .echo-wall-reward-grid img,
  .echo-wall-reward-grid strong {
    width: 30px;
    height: 30px;
  }

  .echo-wall-reward-grid span { font-size: 0.72rem; }
  .echo-wall-reward-grid em { font-size: 0.64rem; }

  .echo-card-actions { gap: 8px; }

  .echo-cta-primary,
  .echo-cta-ghost {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 0.88rem;
  }

  .modal.echo-cine-modal .modal-card.echo-picker-card { max-height: calc(100dvh - 20px); }

  /* Six party slots fit one row on a landscape phone - no scrolling needed. */
  .echo-picker-grid { gap: 8px; }
  .echo-picker-head { gap: 3px; }
  .echo-picker-runes { margin-bottom: 0; }
  .echo-picker-runes i { width: 9px; height: 9px; }
  .echo-picker-card .echo-card-title { font-size: 1rem; }
  .echo-picker-card .echo-card-sub { font-size: 0.72rem; max-width: none; white-space: nowrap; }
  .echo-picker-scroll { padding: 3px 2px 4px; }
  .echo-bless-card { width: 114px; padding: 8px 6px 7px; gap: 3px; }
  .echo-bless-portrait { width: 54px; height: 54px; }
  .echo-bless-portrait img { max-width: 54px; max-height: 54px; }
  .echo-bless-gain { display: none; }
  .echo-picker-foot { margin-top: 0; }
  .echo-bless-portrait { width: 58px; height: 58px; }
  .echo-bless-portrait img { max-width: 58px; max-height: 58px; }
  .echo-bless-halo { width: 66px; height: 66px; }
  .echo-bless-name { font-size: 0.82rem; }
  .echo-bless-levels { font-size: 0.74rem; }
  .echo-bless-cta { min-height: 26px; padding: 3px 12px; font-size: 0.7rem; }

  .echo-result-portrait { height: min(96px, 30vh); }
  .echo-result-portrait img { max-height: min(92px, 28vh); }
  .echo-result-halo { width: 104px; height: 104px; }
  .echo-level-chip { padding: 5px 14px; gap: 8px; }
  .echo-level-after { font-size: 1.1rem; }

  /* Cinematic layers shrink into the short viewport. */
  .echo-tune-runes { transform: scale(0.62); }
  .echo-level-rings { transform: scale(0.62); }
  .echo-level-motes { transform: scale(0.62); }

  .echo-wall-tune-scene .crownlight-blessing-aura,
  .echo-wall-blessing-scene .crownlight-blessing-aura {
    width: min(240px, 62vh);
    height: min(240px, 62vh);
  }

  .echo-wall-blessing-scene .crownlight-blessing-stage {
    transform: translate(-50%, -50%) scale(0.66);
  }

  .echo-wall-blessing-scene .crownlight-blessing-monster {
    width: min(170px, 44vh);
    height: min(170px, 44vh);
  }

  .echo-tune-fissure { transform: translate(-50%, -50%) scale(0.62); }
  .echo-tune-ring { width: 200px; height: 200px; }

  .echo-cine-caption h2 { font-size: 1.05rem; gap: 10px; }
  .echo-cine-caption p { font-size: 0.78rem; }
  .echo-cine-caption { bottom: 8px; }
  .echo-cine-kicker { font-size: 0.56rem; }

  .echo-skip-hint {
    margin-top: 2px;
    font-size: 0.62rem;
  }
}

/* ===== Skyfeather ceremony: Warden Mira's Aethervane gift ===============
   Fullscreen on the echo-cine chassis. Twilight over the Aether Crown, wind
   streaks and drifting feathers; Aethervane descends into a gold ring, the
   panel at the bottom carries the copy and the only exit. */
.skyfeather-cine {
  cursor: default;
  background: #0b1330;
}

.skyfeather-cine::before {
  top: 44%;
  background: radial-gradient(circle, rgba(255, 232, 170, 0.32), rgba(120, 190, 255, 0.14) 42%, transparent 70%);
}

.sky-cine-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(242, 196, 107, 0.5), transparent 70%),
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(120, 190, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #070c1f 0%, #10214a 38%, #1f3f78 66%, #5a6d9a 88%, #b98c5a 100%);
  animation: hatch-cine-fadein 480ms ease-out both;
}

.sky-cine-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-cine-aurora span {
  position: absolute;
  left: -20%;
  top: 18%;
  width: 140%;
  height: 26%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(126, 224, 255, 0.22), rgba(190, 150, 255, 0.2), transparent);
  filter: blur(26px);
  transform: rotate(-6deg);
  animation: sky-aurora-drift 9s ease-in-out infinite alternate;
}

.sky-cine-aurora span:nth-child(2) {
  top: 34%;
  height: 18%;
  transform: rotate(5deg);
  background: linear-gradient(90deg, transparent, rgba(255, 225, 150, 0.16), rgba(126, 224, 255, 0.18), transparent);
  animation-delay: -4s;
}

@keyframes sky-aurora-drift {
  from { translate: -6% 0; opacity: 0.7; }
  to { translate: 6% -2%; opacity: 1; }
}

.sky-cine-clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.sky-cine-clouds span {
  position: absolute;
  top: calc(52% + (var(--i) - 2) * 9%);
  left: calc(-20% + var(--i) * 28%);
  width: 42vmin;
  height: 12vmin;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226, 236, 255, 0.34), rgba(226, 236, 255, 0.06) 60%, transparent 72%);
  filter: blur(10px);
  opacity: 0.8;
  animation: sky-cloud-drift 22s linear infinite;
  animation-delay: calc(var(--i) * -5s);
}

.sky-cine-clouds span:nth-child(2) { width: 56vmin; height: 15vmin; opacity: 0.95; filter: blur(14px); }
.sky-cine-clouds span:nth-child(4) { width: 34vmin; height: 9vmin; opacity: 0.6; filter: blur(7px); animation-duration: 30s; }
.sky-cine-clouds span:nth-child(5) { top: 74%; width: 70vmin; height: 16vmin; opacity: 0.5; filter: blur(18px); }

@keyframes sky-cloud-drift {
  from { translate: -18vw 0; }
  to { translate: 18vw 0; }
}

.skyfeather-cine .dig-rays {
  top: 44%;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 9deg, rgba(255, 232, 170, 0.3) 13deg 17deg, transparent 21deg 30deg);
  animation: sky-rays 2600ms ease-out forwards;
}

@keyframes sky-rays {
  0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.5); }
  60% { opacity: 0.9; }
  100% { opacity: 0.85; transform: translate(-50%, -50%) rotate(70deg) scale(1.05); }
}

.skyfeather-cine .echo-tune-ring {
  top: 44%;
  width: min(360px, 78vmin);
  height: min(360px, 78vmin);
  border-color: rgba(255, 232, 170, 0.4);
  box-shadow: 0 0 30px rgba(255, 225, 150, 0.16), inset 0 0 40px rgba(255, 225, 150, 0.1);
  animation-delay: 900ms, 0ms;
}

.skyfeather-cine .echo-tune-ring::before {
  inset: -2px;
  background: conic-gradient(from 0deg, transparent 0 74%, rgba(255, 236, 180, 0.9) 92%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 3px) 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 3px) 50%, transparent 51%);
  filter: drop-shadow(0 0 6px rgba(255, 232, 170, 0.8));
}

.sky-cine-streaks {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.sky-cine-streaks span {
  position: absolute;
  top: calc(22% + var(--i) * 6.2%);
  left: -30%;
  width: 46%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0;
  animation: sky-streak 2800ms cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * 260ms);
}

.sky-cine-streaks span:nth-child(2n) {
  width: 30%;
  height: 1px;
}

@keyframes sky-streak {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: 0.8; }
  60% { opacity: 0.4; }
  100% { translate: 160vw 0; opacity: 0; }
}

.sky-cine-stage {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 4;
  width: min(300px, 62vmin);
  height: min(300px, 62vmin);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: sky-arrive 1300ms cubic-bezier(0.16, 0.8, 0.24, 1) both;
}

@keyframes sky-arrive {
  0% { opacity: 0; transform: translateY(-160px) scale(0.5); }
  55% { opacity: 1; transform: translateY(14px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.sky-cine-monster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 232, 170, 0.5)) drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5));
  animation: sky-float 2600ms ease-in-out 1300ms infinite alternate;
}

/* Five-frame idle sheet: percentage positioning lands exactly on frames
   (0/25/50/75/100% of a 500%-wide image), no frame size needed. */
.sky-cine-sheet {
  width: 100%;
  height: 100%;
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: calc(var(--frames, 5) * 100%) 100%;
  background-position: 0 0;
  filter: drop-shadow(0 0 22px rgba(255, 232, 170, 0.5)) drop-shadow(0 24px 26px rgba(0, 0, 0, 0.5));
  animation:
    sky-sheet-cycle var(--dur, 760ms) steps(5, jump-none) infinite,
    sky-float 2600ms ease-in-out 1300ms infinite alternate;
}

@keyframes sky-sheet-cycle {
  to { background-position: 100% 0; }
}

/* Landing beat: shockwave ring + radial gold burst, synced to the flash. */
.sky-cine-shock {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 3;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  translate: -50% -50%;
  border: 3px solid rgba(255, 244, 210, 0.9);
  box-shadow: 0 0 30px rgba(255, 232, 170, 0.7), inset 0 0 24px rgba(255, 232, 170, 0.4);
  opacity: 0;
  animation: sky-shock 900ms cubic-bezier(0.1, 0.7, 0.2, 1) 1150ms both;
  pointer-events: none;
}

@keyframes sky-shock {
  0% { opacity: 0; transform: scale(0.3); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: scale(5); }
}

.sky-cine-burst {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Each spark carries its angle as an inline `rotate`; only translateX is
   animated, so the burst is radial without var() inside the keyframes. */
.sky-cine-burst span {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 12px rgba(255, 232, 170, 0.9);
  opacity: 0;
  animation: sky-burst 1100ms cubic-bezier(0.1, 0.7, 0.2, 1) 1180ms both;
}

.sky-cine-burst span:nth-child(2n) { width: 4px; height: 4px; animation-duration: 1350ms; }
.sky-cine-burst span:nth-child(3n) { background: #9fe8ff; box-shadow: 0 0 12px rgba(159, 232, 255, 0.9); }

@keyframes sky-burst {
  0% { opacity: 0; transform: translateX(12px) scale(0.6); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateX(200px) scale(0.2); }
}

.sky-cine-horizon {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 68%;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.55) 30%, rgba(255, 240, 200, 0.75) 50%, rgba(255, 214, 140, 0.55) 70%, transparent);
  box-shadow: 0 0 18px 4px rgba(255, 214, 140, 0.18);
  opacity: 0;
  animation: echo-ring-in 1200ms ease-out 400ms forwards;
  pointer-events: none;
}

@keyframes sky-float {
  from { transform: translateY(6px) rotate(-1.5deg); }
  to { transform: translateY(-10px) rotate(1.5deg); }
}

.sky-cine-feathers {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 5;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sky-cine-feathers span {
  position: absolute;
  left: calc((var(--i) - 4) * 44px);
  top: -120px;
  width: 6px;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #fff8e6, rgba(255, 232, 170, 0.6));
  box-shadow: 0 0 10px rgba(255, 232, 170, 0.6);
  opacity: 0;
  animation: sky-feather-fall 3600ms ease-in-out infinite;
  animation-delay: calc(1100ms + var(--i) * 330ms);
}

/* Quill line down each feather. */
.sky-cine-feathers span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 1px;
  height: 84%;
  translate: -50% 0;
  background: linear-gradient(180deg, rgba(214, 170, 90, 0.2), rgba(214, 170, 90, 0.85));
}

.sky-cine-feathers span:nth-child(2n) { top: -80px; width: 5px; height: 13px; animation-duration: 4200ms; }
.sky-cine-feathers span:nth-child(3n) { top: -150px; left: calc((var(--i) - 4) * 44px + 18px); }
.sky-cine-feathers span:nth-child(4n + 1) { top: -104px; left: calc((var(--i) - 4) * 44px - 22px); animation-duration: 3100ms; }

@keyframes sky-feather-fall {
  0% { opacity: 0; transform: translateY(0) rotate(-20deg); }
  12% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(30px, 240px) rotate(50deg); }
}

.sky-cine-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, rgba(255, 252, 240, 0.95), rgba(255, 244, 200, 0.35) 38%, transparent 70%);
  animation: hatch-cine-flash 760ms ease-out 900ms both;
}

.sky-cine-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 40px 18px max(18px, env(safe-area-inset-bottom));
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(4, 8, 20, 0.5) 42%, rgba(4, 8, 20, 0.88));
  animation: echo-card-in 600ms cubic-bezier(0.18, 0.82, 0.22, 1) 1000ms both;
}

/* Nothing in the panel may exceed the viewport on a portrait phone. */
.sky-cine-panel > * {
  max-width: 100%;
  min-width: 0;
}

.skyfeather-cine .echo-cine-kicker {
  color: rgba(255, 240, 200, 0.72);
  white-space: normal;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .skyfeather-cine .echo-cine-kicker {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
  }
}

.sky-cine-panel h2 {
  margin: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 4.4vmin, 2.2rem);
  letter-spacing: 0.03em;
  color: #fff8e6;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 26px rgba(255, 225, 150, 0.35);
}

.sky-cine-panel p {
  margin: 0;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(240, 244, 255, 0.85);
}

.sky-cine-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sky-cine-chips span {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sky-cine-chips span.is-gold {
  border-color: rgba(255, 231, 166, 0.7);
  background: linear-gradient(180deg, #ffe9a8, #e3b054);
  color: #251906;
}

@media (max-height: 520px) {
  .skyfeather-cine::before,
  .skyfeather-cine .dig-rays,
  .skyfeather-cine .echo-tune-ring,
  .sky-cine-stage,
  .sky-cine-shock,
  .sky-cine-burst,
  .sky-cine-feathers { top: 37%; }

  .sky-cine-horizon { top: 60%; }

  .sky-cine-stage {
    width: min(190px, 46vh);
    height: min(190px, 46vh);
  }

  .skyfeather-cine .echo-tune-ring {
    width: 196px;
    height: 196px;
  }

  .sky-cine-feathers { transform: scale(0.7); }

  .sky-cine-panel {
    gap: 3px;
    padding: 26px 12px 8px;
  }

  .sky-cine-panel h2 { font-size: 1.1rem; }
  .sky-cine-panel p { font-size: 0.74rem; line-height: 1.3; max-width: 76ch; }
  .sky-cine-chips { gap: 6px; }
  .sky-cine-chips span { padding: 2px 9px; font-size: 0.62rem; }
  .sky-cine-panel .echo-card-actions { margin-top: 2px; }
}

/* ---- Beyond sacrifice finale: end-of-game credits ---- */
.beyond-finale-credits {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 4vh, 40px);
  background: radial-gradient(120% 90% at 50% 30%, #14110c 0%, #070707 62%, #000 100%);
  color: #f6efdd; text-align: center;
  padding: clamp(24px, 6vh, 64px) 20px; overflow-y: auto;
  animation: bfcFadeIn 1600ms ease both; -webkit-font-smoothing: antialiased;
}
.bfc-rays {
  position: absolute; inset: -25%;
  background: conic-gradient(from 0deg at 50% 42%, rgba(255,226,150,0.07), transparent 18%, rgba(255,226,150,0.05) 40%, transparent 62%, rgba(255,226,150,0.07) 82%, transparent);
  filter: blur(3px); opacity: 0.7; pointer-events: none;
  animation: bfcRays 72s linear infinite;
}
.bfc-scroll {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 3.2vh, 34px); max-width: 640px;
  animation: bfcRise 1800ms cubic-bezier(0.2,0.7,0.2,1) 200ms both;
}
.bfc-title { margin: 0; font-size: clamp(2rem, 7vw, 3.6rem); font-weight: 1000; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 34px rgba(255,222,140,0.45); }
.bfc-tag { margin: 0; font-size: clamp(0.95rem, 2.4vw, 1.2rem); font-style: italic; color: rgba(246,239,221,0.72); }
.bfc-block { display: flex; flex-direction: column; gap: 4px; }
.bfc-block h3 { margin: 0 0 6px; font-size: clamp(0.7rem, 1.6vw, 0.82rem); font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,222,140,0.72); }
.bfc-name { margin: 0; font-size: clamp(1.05rem, 3vw, 1.5rem); font-weight: 800; color: #fff; }
.bfc-role { font-size: 0.6em; font-weight: 600; opacity: 0.62; letter-spacing: 0.02em; }
.bfc-thanks { margin: clamp(10px,2vh,20px) 0 0; font-size: clamp(0.95rem, 2.4vw, 1.15rem); color: rgba(246,239,221,0.85); }
.bfc-done {
  position: relative; z-index: 1; margin-top: clamp(8px, 2vh, 20px);
  padding: 12px 28px; border-radius: 999px; border: 1px solid rgba(255,222,140,0.5);
  background: rgba(255,222,140,0.1); color: #fff; font-weight: 800; letter-spacing: 0.04em; cursor: pointer;
  animation: bfcFadeIn 900ms ease 2400ms both;
}
.bfc-done:hover { background: rgba(255,222,140,0.22); }
@keyframes bfcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfcRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bfcRays { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beyond-finale-credits, .bfc-scroll, .bfc-done { animation-duration: 1ms; } .bfc-rays { animation: none; } }

/* ========================================================================
   Player Profile v3 - trophy-first dashboard
   Final scoped overrides intentionally live at the end of the stylesheet:
   the local profile is also a clean-world modal, whose generic light theme
   otherwise outranks the shared online profile skin by specificity.
   ======================================================================== */
.online-profile-card.profile-card-v2,
.modal.clean-world-modal .modal-card.profile-card-v2 {
  --profile-accent: 255, 220, 132;
  --profile-journey: 92, 198, 255;
  --profile-collection: 111, 239, 180;
  --profile-prestige: 255, 199, 89;
  --profile-world: 183, 151, 255;
  position: relative;
  isolation: isolate;
  width: min(1040px, 100%);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 15px;
  overflow: hidden;
  color: #f9fbff;
  color-scheme: dark;
  background:
    radial-gradient(75% 68% at 6% -5%, rgba(255, 203, 94, 0.18), transparent 62%),
    radial-gradient(64% 56% at 96% 6%, rgba(76, 178, 255, 0.14), transparent 64%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(155deg, #171920 0%, #0b0d12 44%, #030406 100%) !important;
  background-size: auto, auto, 28px 28px, 28px 28px, auto !important;
  border: 1px solid rgba(255, 222, 137, 0.44) !important;
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 70px rgba(0, 0, 0, 0.36),
    0 28px 80px rgba(0, 0, 0, 0.68) !important;
  font-family: Inter, system-ui, sans-serif;
}

.online-profile-card.profile-card-v2::before,
.modal.clean-world-modal .modal-card.profile-card-v2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.035) 48%, transparent 54%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 34%);
}

.modal.clean-world-modal .modal-card.profile-card-v2 h2,
.modal.clean-world-modal .modal-card.profile-card-v2 h3,
.modal.clean-world-modal .modal-card.profile-card-v2 h4,
.profile-card-v2 h2,
.profile-card-v2 h3,
.profile-card-v2 h4 {
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
}

.profile-card-v2 .profile-hero {
  grid-template-areas: "seal identity meter actions";
  grid-template-columns: 76px minmax(0, 1fr) auto auto;
  gap: 13px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom-color: rgba(255, 221, 137, 0.28);
  border-radius: 13px;
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 219, 124, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-card-v2 .profile-hero__seal { grid-area: seal; }
.profile-card-v2 .profile-hero__id { grid-area: identity; }
.profile-card-v2 .profile-codex-meter { grid-area: meter; }
.profile-card-v2 .profile-hero__actions { grid-area: actions; }

.profile-card-v2 .profile-hero__seal {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 230, 158, 0.34), rgba(255, 255, 255, 0.035) 68%),
    rgba(0, 0, 0, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 4px rgba(255, 218, 116, 0.055),
    0 12px 24px rgba(0, 0, 0, 0.48);
}

.profile-card-v2 .profile-hero__seal .online-profile-prestige-seal {
  width: 58px;
  height: 58px;
}

.profile-card-v2 .profile-hero__name {
  color: #fff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.profile-card-v2 .profile-hero__eyebrow {
  color: rgb(var(--profile-accent));
  font-size: 10px;
  letter-spacing: 1.25px;
}

.profile-card-v2 .profile-hero__updated {
  color: rgba(235, 241, 250, 0.48);
  font-size: 10px;
}

.profile-card-v2 .profile-tag {
  padding: 3px 9px;
  color: rgba(247, 250, 255, 0.86);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.profile-card-v2 .profile-tag--prestige {
  color: #ffe7a2;
  background: rgba(255, 199, 89, 0.13);
  border-color: rgba(255, 213, 111, 0.34);
}

.profile-codex-meter {
  min-width: 150px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 7px;
  border: 1px solid rgba(105, 229, 189, 0.24);
  border-radius: 999px;
  background: rgba(2, 9, 11, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.profile-codex-meter__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #0b1013 0 55%, transparent 57%),
    conic-gradient(#78efbd var(--profile-dex-progress), rgba(255, 255, 255, 0.09) 0);
  box-shadow: 0 0 18px rgba(94, 232, 183, 0.12);
}

.profile-codex-meter__ring::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: inherit;
}

.profile-codex-meter__ring strong {
  position: relative;
  z-index: 1;
  color: #f5fff9;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
}

.profile-codex-meter__ring small {
  margin-left: 1px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 7px;
}

.profile-codex-meter__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.profile-codex-meter__copy b {
  overflow: hidden;
  color: #c9fbe4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.45px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-codex-meter__copy small {
  color: rgba(255, 255, 255, 0.63);
  font-size: 11px;
  font-weight: 850;
}

.profile-hero__actions {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-card-v2 .profile-hero__actions button,
.modal.clean-world-modal .profile-card-v2 .profile-hero__actions button {
  min-height: 36px;
  margin: 0;
  padding: 0 11px;
  color: rgba(250, 252, 255, 0.88);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 850;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.profile-card-v2 .profile-hero__actions button:hover,
.profile-card-v2 .profile-hero__actions button:focus-visible,
.modal.clean-world-modal .profile-card-v2 .profile-hero__actions button:hover,
.modal.clean-world-modal .profile-card-v2 .profile-hero__actions button:focus-visible {
  color: #fff;
  border-color: rgba(255, 220, 132, 0.46);
  background: rgba(255, 220, 132, 0.12);
}

.profile-card-v2 .profile-hero__actions .profile-hero__close {
  color: #fff;
  border-color: rgba(255, 223, 143, 0.32);
  background: linear-gradient(180deg, rgba(255, 220, 128, 0.17), rgba(255, 255, 255, 0.055));
}

.profile-card-v2 .profile-rail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.profile-card-v2 .profile-rail__metric {
  position: relative;
  overflow: hidden;
  min-height: 62px;
  align-content: center;
  padding: 8px 11px 8px 14px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.105);
}

.profile-card-v2 .profile-rail__metric::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgba(var(--profile-journey), 0.88);
  box-shadow: 0 0 10px rgba(var(--profile-journey), 0.42);
}

.profile-card-v2 .profile-rail__metric[data-tone="prestige"]::before,
.profile-card-v2 .profile-rail__metric[data-tone="champion"]::before {
  background: rgba(var(--profile-prestige), 0.9);
  box-shadow: 0 0 10px rgba(var(--profile-prestige), 0.46);
}

.profile-card-v2 .profile-rail__metric[data-tone="black-holo"] {
  background:
    radial-gradient(circle at 88% 12%, rgba(177, 201, 255, 0.13), transparent 42%),
    linear-gradient(145deg, rgba(3, 4, 8, 0.96), rgba(18, 20, 29, 0.8));
  border-color: rgba(224, 231, 255, 0.24);
}

.profile-card-v2 .profile-rail__metric[data-tone="black-holo"]::before {
  background: #f5f7ff;
  box-shadow: 0 0 12px rgba(206, 221, 255, 0.72);
}

.profile-card-v2 .profile-rail__label { font-size: 9px; }
.profile-card-v2 .profile-rail__value { font-size: 17px; }
.profile-card-v2 .profile-rail__sub {
  overflow: hidden;
  color: rgba(255, 235, 181, 0.7);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-v2 .online-profile-stats.profile-stat-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.profile-card-v2 .profile-stat-group {
  gap: 6px;
  padding: 8px 9px 9px;
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(0, 0, 0, 0.42), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.095);
  border-top-color: rgba(var(--g), 0.54);
}

.profile-card-v2 .profile-stat-group__title { font-size: 9px; }
.profile-card-v2 .profile-stat-group__title::before { width: 6px; height: 6px; }
.profile-card-v2 .profile-stat-group__grid { gap: 5px; }

.profile-card-v2 .online-profile-stat {
  min-height: 42px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.075);
}

.profile-card-v2 .online-profile-stat span { font-size: 8px; }
.profile-card-v2 .online-profile-stat strong {
  margin-top: 3px;
  color: #f7f9fd;
  font-size: 12px;
  -webkit-line-clamp: 1;
}

.profile-card-v2 .online-profile-body {
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.72fr);
  grid-template-rows: minmax(205px, 1fr) auto;
  gap: 8px;
}

.profile-card-v2 .online-profile-section {
  overflow: hidden;
  padding: 10px;
  border-radius: 11px;
  background: linear-gradient(155deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.025));
  border-color: rgba(255, 255, 255, 0.1);
}

.profile-card-v2 .profile-showcase-section {
  border-color: rgba(207, 219, 255, 0.18);
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(137, 163, 255, 0.075), transparent 68%),
    linear-gradient(155deg, rgba(0, 0, 0, 0.68), rgba(255, 255, 255, 0.025));
}

.profile-section-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.profile-section-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.profile-card-v2 .profile-section-heading h3 { margin: 0; }

.profile-section-kicker {
  overflow: hidden;
  color: rgba(201, 214, 255, 0.56);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.65px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.profile-showcase-total {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 29px;
  height: 24px;
  padding: 0 7px;
  color: #f7f9ff;
  font-size: 10px;
  font-weight: 950;
  border: 1px solid rgba(219, 227, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.profile-card-v2 .profile-showcase-section .online-profile-dex {
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 7px;
  padding: 1px;
}

.profile-card-v2 .profile-holo-card {
  position: relative;
  isolation: isolate;
  min-height: 104px;
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left-width: 1px;
  border-radius: 11px;
  background: rgba(8, 10, 15, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 9px 20px rgba(0, 0, 0, 0.3);
}

.profile-card-v2 .profile-holo-card.is-black-holo {
  border-color: rgba(222, 231, 255, 0.28);
  background:
    radial-gradient(circle at 14% 42%, rgba(205, 219, 255, 0.1), transparent 29%),
    linear-gradient(135deg, #020305, #10131c 58%, #05060a);
}

.profile-card-v2 .profile-holo-card.is-holo {
  border-color: rgba(119, 240, 220, 0.22);
  background:
    radial-gradient(circle at 10% 30%, rgba(110, 245, 210, 0.1), transparent 34%),
    linear-gradient(135deg, #071319, #101223 58%, #071016);
}

.profile-holo-card__art {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.11), transparent 48%),
    rgba(0, 0, 0, 0.26);
}

.profile-holo-card__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(224, 231, 255, 0.32);
  border-radius: 50%;
  box-shadow:
    0 0 0 7px rgba(180, 199, 255, 0.025),
    0 0 25px rgba(177, 196, 255, 0.14),
    inset 0 0 18px rgba(207, 220, 255, 0.08);
}

.is-holo .profile-holo-card__art::before {
  border-color: rgba(113, 247, 218, 0.42);
  box-shadow:
    0 0 0 7px rgba(119, 240, 220, 0.035),
    0 0 25px rgba(92, 226, 211, 0.16),
    inset 0 0 18px rgba(117, 176, 255, 0.1);
}

.profile-holo-card__orbit {
  position: absolute;
  z-index: -1;
  width: 86px;
  height: 30px;
  border: 1px solid rgba(235, 239, 255, 0.34);
  border-radius: 50%;
  transform: rotate(-14deg);
  animation: profileHoloOrbit 6.8s linear infinite;
}

.is-holo .profile-holo-card__orbit {
  border-color: rgba(100, 242, 220, 0.42);
  animation-duration: 4.8s;
}

.profile-card-v2 .profile-holo-card__art img {
  --sprite-size: 82px;
  z-index: 1;
  width: 82px;
  height: 82px;
  object-fit: contain;
  image-rendering: auto;
}

.profile-holo-card__tier {
  position: absolute;
  z-index: 2;
  left: 5px;
  right: 5px;
  bottom: 5px;
  overflow: hidden;
  padding: 3px 5px;
  color: #f8faff;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.5px;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(238, 242, 255, 0.24);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.74);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
}

.is-holo .profile-holo-card__tier {
  color: #caffef;
  border-color: rgba(121, 244, 213, 0.28);
  background: rgba(3, 28, 29, 0.76);
}

.profile-holo-card__body {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 10px;
}

.profile-card-v2 .profile-holo-card__body > strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-card-v2 .profile-holo-card__body > small {
  overflow: hidden;
  color: rgba(230, 236, 248, 0.56);
  font-size: 9px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-holo-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.profile-holo-card__facts > * {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 0 6px;
  color: rgba(242, 246, 255, 0.72);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.045);
}

.profile-holo-card__facts > b {
  color: #e7edff;
  border-color: rgba(205, 218, 255, 0.2);
}

.is-holo .profile-holo-card__facts > b {
  color: #bfffea;
  border-color: rgba(107, 240, 205, 0.2);
}

.profile-card-v2 .profile-showcase-empty {
  grid-column: 1 / -1;
  min-height: 126px;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: stretch;
  gap: 6px;
  padding: 15px;
  color: rgba(241, 246, 255, 0.7);
  text-align: center;
  border: 1px dashed rgba(207, 219, 255, 0.17);
  background: radial-gradient(circle at 50% 0%, rgba(161, 181, 255, 0.07), transparent 66%);
}

.profile-showcase-empty strong { color: rgba(255, 255, 255, 0.84); font-size: 11px; }
.profile-showcase-empty small { max-width: 48ch; color: rgba(255, 255, 255, 0.45); font-size: 9px; }

.profile-showcase-empty__orbs {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
}

.profile-showcase-empty__orbs i {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(224, 232, 255, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.65));
  box-shadow: 0 0 12px rgba(160, 182, 255, 0.08);
}

.profile-showcase-empty__orbs i:nth-child(2) { width: 25px; height: 25px; }

.profile-card-v2 .profile-checkpoint-section .online-profile-splits {
  align-content: start;
}

.profile-card-v2 .profile-checkpoint-section .online-profile-split {
  border-left-color: rgba(var(--profile-journey), 0.56);
}

.profile-card-v2 .online-profile-section--prestige {
  grid-column: 1 / -1;
}

.profile-card-v2 .online-profile-prestige-runs {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-height: 150px;
}

@keyframes profileHoloOrbit {
  to { transform: rotate(346deg); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .profile-card-v2 .profile-hero {
    grid-template-areas:
      "seal identity actions"
      "meter meter meter";
    grid-template-columns: 62px minmax(0, 1fr) auto;
  }

  .profile-card-v2 .profile-codex-meter {
    width: 100%;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    border-radius: 10px;
  }

  .profile-card-v2 .profile-codex-meter__ring { width: 40px; height: 40px; }
  .profile-card-v2 .profile-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-card-v2 .online-profile-stats.profile-stat-groups { grid-template-columns: 1fr; }
  .profile-card-v2 .online-profile-body { grid-template-columns: 1fr; grid-template-rows: auto; }
  .profile-card-v2 .profile-showcase-section .online-profile-dex { grid-template-columns: 1fr; }
}

/* Mobile landscape / Querformat. The profile becomes a full-bleed dashboard,
   keeps one vertical scroller, and brings the Holo trophies above checkpoints. */
@media (orientation: landscape) and (max-height: 560px) and (max-width: 960px) {
  html.is-touch .modal.clean-world-modal:has(.profile-card-v2),
  html.is-touch .online-profile-overlay {
    place-items: stretch;
    padding: 0;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.profile-card-v2,
  html.is-touch .online-profile-overlay .online-profile-card.profile-card-v2 {
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    border: 0 !important;
    border-radius: 0;
  }

  html.is-touch .profile-card-v2 > * { flex: 0 0 auto; }

  html.is-touch .profile-card-v2 .profile-hero {
    grid-template-areas: "seal identity meter actions";
    grid-template-columns: 48px minmax(0, 1fr) auto auto;
    gap: 7px;
    padding: 5px 6px;
    border-radius: 9px;
    background:
      radial-gradient(circle at 7% 20%, rgba(255, 219, 124, 0.12), transparent 34%),
      linear-gradient(180deg, rgba(18, 20, 27, 0.99), rgba(10, 12, 17, 0.97));
  }

  html.is-touch .profile-card-v2 .profile-hero__seal {
    width: 46px;
    height: 46px;
    border-radius: 11px;
  }

  html.is-touch .profile-card-v2 .profile-hero__seal .online-profile-prestige-seal {
    width: 36px;
    height: 36px;
  }

  html.is-touch .profile-card-v2 .profile-hero__id { gap: 1px; }
  html.is-touch .profile-card-v2 .profile-hero__eyebrow { font-size: 8px; }
  html.is-touch .profile-card-v2 .profile-hero__name { font-size: 16px; line-height: 1.02; }
  html.is-touch .profile-card-v2 .profile-hero__updated { display: none; }
  html.is-touch .profile-card-v2 .profile-hero__tags { flex-wrap: nowrap; gap: 3px; margin-top: 1px; }
  html.is-touch .profile-card-v2 .profile-tag { max-width: 120px; padding: 1px 5px; font-size: 8px; }
  html.is-touch .profile-card-v2 .profile-hero__tags > :nth-child(n + 3) { display: none; }

  html.is-touch .profile-card-v2 .profile-codex-meter {
    min-width: 116px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 7px 3px 4px;
  }

  html.is-touch .profile-card-v2 .profile-codex-meter__ring { width: 38px; height: 38px; }
  html.is-touch .profile-card-v2 .profile-codex-meter__ring strong { font-size: 11px; }
  html.is-touch .profile-card-v2 .profile-codex-meter__copy b { font-size: 7px; }
  html.is-touch .profile-card-v2 .profile-codex-meter__copy small { font-size: 9px; }

  html.is-touch .profile-card-v2 .profile-hero__actions button,
  html.is-touch .modal.clean-world-modal .profile-card-v2 .profile-hero__actions button {
    min-height: 38px;
    padding: 0 9px;
    font-size: 9px;
  }

  html.is-touch .profile-card-v2 .profile-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  html.is-touch .profile-card-v2 .profile-rail__metric {
    min-height: 47px;
    gap: 1px;
    padding: 5px 6px 5px 9px;
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .profile-rail__label,
  html.is-touch .profile-card-v2 .profile-rail__sub { font-size: 8px; }
  html.is-touch .profile-card-v2 .profile-rail__value { font-size: 13px; }

  html.is-touch .profile-card-v2 .online-profile-stats.profile-stat-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group {
    gap: 4px;
    padding: 5px 6px 6px;
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .profile-stat-group__title { font-size: 8px; }
  html.is-touch .profile-card-v2 .profile-stat-group__grid { gap: 3px; }
  html.is-touch .profile-card-v2 .online-profile-stat { min-height: 33px; padding: 4px 5px; }
  html.is-touch .profile-card-v2 .online-profile-stat span { font-size: 7px; }
  html.is-touch .profile-card-v2 .online-profile-stat strong { margin-top: 1px; font-size: 9px; }

  html.is-touch .profile-card-v2 .online-profile-body {
    grid-template-columns: minmax(0, 1.5fr) minmax(190px, 0.68fr);
    grid-template-rows: auto;
    gap: 5px;
  }

  html.is-touch .profile-card-v2 .online-profile-section {
    padding: 6px;
    gap: 4px;
    border-radius: 8px;
  }

  html.is-touch .profile-card-v2 .online-profile-section h3 { font-size: 10px; }
  html.is-touch .profile-card-v2 .profile-section-kicker { font-size: 7px; }
  html.is-touch .profile-card-v2 .profile-showcase-total { min-width: 24px; height: 20px; font-size: 8px; }

  html.is-touch .profile-card-v2 .profile-showcase-section .online-profile-dex {
    grid-template-columns: repeat(2, minmax(178px, 1fr));
    gap: 4px;
    overflow: visible;
  }

  html.is-touch .profile-card-v2 .profile-holo-card {
    min-height: 72px;
    grid-template-columns: 66px minmax(0, 1fr);
    border-radius: 7px;
  }

  html.is-touch .profile-card-v2 .profile-holo-card__art img {
    --sprite-size: 55px;
    width: 55px;
    height: 55px;
  }

  html.is-touch .profile-card-v2 .profile-holo-card__art::before { width: 48px; height: 48px; }
  html.is-touch .profile-card-v2 .profile-holo-card__orbit { width: 57px; height: 20px; }
  html.is-touch .profile-card-v2 .profile-holo-card__tier { left: 3px; right: 3px; bottom: 3px; padding: 2px 3px; font-size: 5.5px; }
  html.is-touch .profile-card-v2 .profile-holo-card__body { gap: 2px; padding: 5px 6px; }
  html.is-touch .profile-card-v2 .profile-holo-card__body > strong { font-size: 10px; }
  html.is-touch .profile-card-v2 .profile-holo-card__body > small { font-size: 7px; }
  html.is-touch .profile-card-v2 .profile-holo-card__facts { gap: 2px; margin-top: 1px; }
  html.is-touch .profile-card-v2 .profile-holo-card__facts > * { min-height: 15px; padding: 0 4px; font-size: 6px; }

  html.is-touch .profile-card-v2 .online-profile-splits,
  html.is-touch .profile-card-v2 .online-profile-dex,
  html.is-touch .profile-card-v2 .online-profile-prestige-runs {
    max-height: none;
    overflow: visible;
  }

  html.is-touch .profile-card-v2 .online-profile-prestige-runs {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
  }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 700px) {
  html.is-touch .profile-card-v2 .profile-codex-meter { min-width: 48px; grid-template-columns: 38px; padding-right: 4px; }
  html.is-touch .profile-card-v2 .profile-codex-meter__copy { display: none; }
  html.is-touch .profile-card-v2 .online-profile-body { grid-template-columns: minmax(0, 1.35fr) minmax(170px, 0.65fr); }
  html.is-touch .profile-card-v2 .online-profile-prestige-runs { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 600px) {
  html.is-touch .profile-card-v2 .profile-hero__actions .profile-hero__back { display: none; }
  html.is-touch .profile-card-v2 .online-profile-body { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 560px) and (max-width: 500px) {
  html.is-touch .profile-card-v2 .profile-showcase-section .online-profile-dex { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-holo-card__orbit { animation: none; }
}

/* Heartroot Beyond companion join reveal ---------------------------------- */
.modal.beyond-companion-join-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  background: #03040b;
  backdrop-filter: none;
  transition: opacity 0.26s ease, filter 0.26s ease;
}

.modal.beyond-companion-join-modal.hidden { display: none; }
.modal.beyond-companion-join-modal--closing { opacity: 0; filter: brightness(1.4); }

.beyond-companion-join {
  --join-accent: #ffe7a2;
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  color: #fffdf2;
  background: #080817;
}

.beyond-companion-join__backdrop,
.beyond-companion-join__rays,
.beyond-companion-join__motes,
.beyond-companion-join__stage,
.beyond-companion-join__copy,
.beyond-companion-join__crest {
  position: absolute;
  inset: 0;
}

.beyond-companion-join__backdrop {
  z-index: -4;
  background-image: var(--join-backdrop);
  background-size: cover;
  background-position: center 72%;
  filter: saturate(1.08) contrast(1.04) brightness(0.78);
  transform: scale(1.08);
  animation: beyond-companion-backdrop-in 1.8s cubic-bezier(.2,.78,.18,1) both;
}

.beyond-companion-join::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(2, 3, 12, 0.82) 0%, rgba(7, 6, 22, 0.12) 33%, rgba(4, 4, 13, 0.1) 62%, rgba(2, 3, 10, 0.86) 100%),
    radial-gradient(circle at 50% 57%, color-mix(in srgb, var(--join-accent) 28%, transparent), transparent 33%);
}

.beyond-companion-join__rays {
  z-index: -2;
  left: 50%;
  top: 57%;
  width: min(92vw, 900px);
  height: min(92vw, 900px);
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 4deg, color-mix(in srgb, var(--join-accent) 20%, transparent) 0 2deg, transparent 2deg 13deg);
  mask-image: radial-gradient(circle, #000 0 30%, transparent 70%);
  animation: beyond-companion-rays 18s linear infinite, beyond-companion-bloom 1.15s ease-out both;
}

.beyond-companion-join__motes {
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle, var(--join-accent) 0 1.5px, transparent 2px),
    radial-gradient(circle, #a8eaff 0 1px, transparent 1.8px),
    radial-gradient(circle, #fff 0 1px, transparent 1.7px);
  background-size: 83px 97px, 137px 119px, 61px 79px;
  background-position: 11px 20px, 42px 70px, 8px 9px;
  mix-blend-mode: screen;
  animation: beyond-companion-motes 4.8s ease-out 0.35s infinite;
}

.beyond-companion-join__crest {
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.beyond-companion-join__crest span {
  position: absolute;
  top: 58%;
  width: clamp(270px, 40vw, 540px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--join-accent) 78%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 28px color-mix(in srgb, var(--join-accent) 34%, transparent), inset 0 0 34px color-mix(in srgb, var(--join-accent) 18%, transparent);
  transform: translateY(-50%) scale(0.1);
  opacity: 0;
  animation: beyond-companion-ring 1.4s cubic-bezier(.1,.72,.13,1) both;
}

.beyond-companion-join__crest span:nth-child(2) { width: clamp(210px, 31vw, 420px); animation-delay: 0.16s; }
.beyond-companion-join__crest span:nth-child(3) { width: clamp(150px, 23vw, 310px); animation-delay: 0.3s; }

.beyond-companion-join__stage {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(74px, 9vh, 118px) 18px clamp(168px, 24vh, 260px);
  pointer-events: none;
}

.beyond-companion-join__character {
  display: block;
  position: relative;
  z-index: 2;
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 19px color-mix(in srgb, var(--join-accent) 42%, transparent));
  animation: beyond-companion-character-in 1.05s cubic-bezier(.08,.86,.16,1.04) both;
}

.beyond-companion-join__character--sheet {
  width: clamp(230px, 31vw, 390px);
  aspect-ratio: 4 / 5;
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: 0% 0%;
  animation:
    beyond-companion-character-in 1.05s cubic-bezier(.08,.86,.16,1.04) both,
    beyond-companion-sheet-idle 1.08s steps(1, end) 1.05s infinite;
}

.beyond-companion-join__character--static {
  width: auto;
  height: min(64vh, 680px);
  max-width: min(86vw, 760px);
  object-fit: contain;
}

.beyond-companion-join__character--monster {
  height: min(59vh, 620px);
  transform-origin: 50% 82%;
}

.beyond-companion-join__copy {
  z-index: 5;
  top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  text-shadow: 0 2px 12px #03030c, 0 0 24px #03030c;
  animation: beyond-companion-copy-in 0.72s ease-out 0.62s both;
}

.beyond-companion-join__copy small {
  color: var(--join-accent);
  font-size: clamp(0.68rem, 1.6vw, 0.9rem);
  font-weight: 950;
  letter-spacing: 0.34em;
}

.beyond-companion-join__copy h2 {
  margin: 5px 0 0;
  color: #fff;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(2.15rem, 7vw, 5.7rem);
  line-height: 0.98;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.beyond-companion-join__copy p {
  margin: 8px 0 0;
  color: var(--join-accent);
  font-size: clamp(1rem, 2.3vw, 1.5rem);
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.beyond-companion-join__copy em {
  margin-top: 3px;
  color: rgba(245, 247, 255, 0.82);
  font-size: 0.9rem;
  font-style: normal;
  letter-spacing: 0.05em;
}

.beyond-companion-join__copy button {
  min-width: min(320px, 78vw);
  margin-top: 15px;
  padding: 12px 26px;
  border: 1px solid color-mix(in srgb, var(--join-accent) 82%, #fff 18%);
  border-radius: 999px;
  color: #10101a;
  background: linear-gradient(135deg, #fffbe7, var(--join-accent));
  box-shadow: 0 0 0 1px rgba(5, 5, 15, 0.7), 0 10px 34px color-mix(in srgb, var(--join-accent) 25%, transparent);
  font: 900 0.92rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.16s ease, filter 0.16s ease;
}

.beyond-companion-join__copy button:hover,
.beyond-companion-join__copy button:focus-visible { transform: translateY(-2px) scale(1.02); filter: brightness(1.08); }

@keyframes beyond-companion-backdrop-in {
  from { opacity: 0; transform: scale(1.23); filter: saturate(0.7) brightness(1.2); }
  to { opacity: 1; transform: scale(1.08); filter: saturate(1.08) contrast(1.04) brightness(0.78); }
}

@keyframes beyond-companion-bloom {
  from { opacity: 0; transform: scale(0.25) rotate(-14deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes beyond-companion-rays { to { rotate: 360deg; } }

@keyframes beyond-companion-motes {
  0% { opacity: 0; transform: translateY(80px) scale(0.9); }
  18% { opacity: 0.9; }
  75% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-170px) scale(1.08); }
}

@keyframes beyond-companion-ring {
  0% { opacity: 0; transform: translateY(-50%) scale(0.08); }
  36% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-50%) scale(1.24); }
}

@keyframes beyond-companion-character-in {
  0% { opacity: 0; transform: translateY(84px) scale(0.72); filter: brightness(4) blur(9px); }
  52% { opacity: 1; filter: brightness(1.5) blur(0); }
  78% { transform: translateY(-8px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 19px color-mix(in srgb, var(--join-accent) 42%, transparent)); }
}

@keyframes beyond-companion-sheet-idle {
  0%, 23% { background-position: 0% 0%; }
  25%, 48% { background-position: 33.333% 0%; }
  50%, 73% { background-position: 66.666% 0%; }
  75%, 100% { background-position: 100% 0%; }
}

@keyframes beyond-companion-copy-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .beyond-companion-join__backdrop { background-position: center 72%; }
  .beyond-companion-join__stage { padding-top: 68px; padding-bottom: 215px; }
  .beyond-companion-join__character--sheet { width: min(78vw, 330px); }
  .beyond-companion-join__character--static { height: min(55vh, 520px); max-width: 92vw; }
  .beyond-companion-join__copy h2 { font-size: clamp(2rem, 12vw, 4rem); }
}

@media (orientation: landscape) and (max-height: 620px) {
  .beyond-companion-join__stage { align-items: center; justify-content: flex-start; padding: 18px 48% 18px 8%; }
  .beyond-companion-join__character--sheet { width: min(42vh, 250px); }
  .beyond-companion-join__character--static { height: 76vh; max-width: 45vw; }
  .beyond-companion-join__copy { inset: 0 4% 0 48%; justify-content: center; padding: 12px; }
  .beyond-companion-join__copy h2 { font-size: clamp(2rem, 6vw, 4rem); }
}

.beyond-companion-join.is-reduced-motion * {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .beyond-companion-join *,
  .beyond-companion-join::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; }
}

/* ================================================================
   PREMIUM ONLINE SOCIAL SUITE
   Player hub, Gifts, Groups and Leaderboards share one restrained
   mobile-first visual language. Internal panels own their scrolling so
   touch gestures never leak into the game canvas behind them.
   ================================================================ */

.online-player-action-overlay,
.online-gift-overlay,
.online-group-overlay,
.online-leaderboard-overlay {
  --social-ink: #f4f8ff;
  --social-muted: rgba(218, 229, 248, 0.62);
  --social-line: rgba(175, 212, 255, 0.16);
  --social-panel: rgba(12, 20, 36, 0.76);
  --social-cyan: #6de9ff;
  --social-violet: #a88cff;
  --social-gold: #ffd889;
  --social-green: #79f2b0;
  z-index: 124;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(72, 214, 255, 0.17), transparent 34%),
    radial-gradient(circle at 84% 78%, rgba(147, 102, 255, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(2, 8, 17, 0.9), rgba(5, 7, 20, 0.96));
  backdrop-filter: blur(20px) saturate(1.18);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
}

.online-social-shell {
  position: relative;
  isolation: isolate;
  min-width: 0;
  color: var(--social-ink);
  background:
    linear-gradient(145deg, rgba(18, 29, 51, 0.98), rgba(5, 10, 23, 0.985) 58%, rgba(11, 8, 28, 0.99)),
    #07101e;
  border: 1px solid rgba(173, 222, 255, 0.25);
  border-radius: 28px;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(6, 12, 27, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 80px rgba(62, 158, 255, 0.035);
}

.online-social-shell::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(rgba(111, 213, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 213, 255, 0.035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.online-social-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: calc(28px - 1px);
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.online-social-shell > :not(.online-social-ambient) { position: relative; z-index: 1; }

.online-social-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.online-social-ambient::before,
.online-social-ambient::after {
  content: "";
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.16;
}

.online-social-ambient::before { top: -28%; left: -9%; background: var(--social-cyan); }
.online-social-ambient::after { right: -12%; bottom: -42%; background: var(--social-violet); }

.online-social-ambient > i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(119, 231, 255, 0.9);
  animation: socialMote 8s ease-in-out infinite;
}

.online-social-ambient > i:nth-child(1) { left: 12%; top: 72%; animation-delay: -1s; }
.online-social-ambient > i:nth-child(2) { left: 74%; top: 21%; animation-delay: -4s; }
.online-social-ambient > i:nth-child(3) { left: 89%; top: 66%; animation-delay: -6s; }

@keyframes socialMote {
  0%, 100% { opacity: 0.12; transform: translateY(9px) scale(0.7); }
  50% { opacity: 0.72; transform: translateY(-12px) scale(1.25); }
}

.online-social-head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--social-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}

.online-social-head-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(119, 224, 255, 0.34);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(91, 220, 255, 0.17), rgba(137, 91, 255, 0.11));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.25);
}

.online-social-head-copy { min-width: 0; }

.online-social-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--social-cyan);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.online-social-kicker > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 11px currentColor;
}

.online-social-head-copy h2 {
  min-width: 0;
  margin: 5px 0 0;
  overflow: hidden;
  color: #fff;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-social-head-copy > small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--social-muted);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-social-close {
  width: 50px;
  min-width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  color: rgba(233, 241, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.online-social-close > span { font-size: 25px; font-weight: 300; line-height: 0.7; }
.online-social-close > small { font-size: 7px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.online-social-close:hover,
.online-social-close:focus-visible { color: #fff; border-color: rgba(118, 226, 255, 0.48); background: rgba(93, 207, 255, 0.1); }

.online-player-action-card.online-social-shell {
  width: min(880px, calc(100vw - 24px));
  max-height: min(680px, calc(100dvh - 24px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.online-player-dashboard-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--social-line);
  background:
    radial-gradient(circle at 10% 45%, rgba(83, 221, 255, 0.16), transparent 28%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.04), transparent 62%);
}

.online-player-dashboard-avatar {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 226, 255, 0.4);
  border-radius: 26px;
  color: #dffbff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.2), transparent 24%),
    linear-gradient(145deg, rgba(52, 197, 235, 0.25), rgba(93, 66, 203, 0.25));
  box-shadow: inset 0 0 24px rgba(91, 221, 255, 0.1), 0 15px 36px rgba(0, 0, 0, 0.34);
}

.online-player-dashboard-avatar::before,
.online-player-dashboard-avatar::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(115, 223, 255, 0.15);
  border-radius: 31px;
  transform: rotate(8deg);
}

.online-player-dashboard-avatar::after { inset: -12px; opacity: 0.45; transform: rotate(-7deg); }
.online-player-dashboard-avatar > span { font-family: "Cinzel", Georgia, serif; font-size: 25px; font-weight: 900; letter-spacing: 0.05em; }

.online-player-dashboard-avatar > img {
  position: absolute;
  right: -12px;
  bottom: -11px;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 8px rgba(255, 210, 114, 0.42));
}

.online-player-dashboard-id { min-width: 0; }

.online-player-dashboard-id h2 {
  margin: 6px 0 7px;
  overflow: hidden;
  color: #fff;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(25px, 3.4vw, 39px);
  line-height: 1;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-player-dashboard-badges { display: flex; flex-wrap: wrap; gap: 7px; }

.online-player-presence,
.online-player-party-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 4px 9px;
  color: rgba(232, 241, 255, 0.76);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.online-player-presence > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.online-player-presence[data-tone="ready"] { color: var(--social-green); border-color: rgba(99, 239, 169, 0.25); background: rgba(70, 211, 143, 0.08); }
.online-player-presence[data-tone="busy"] { color: #ff9a9f; border-color: rgba(255, 115, 124, 0.25); background: rgba(255, 78, 92, 0.08); }
.online-player-presence[data-tone="bot"] { color: var(--social-gold); border-color: rgba(255, 210, 125, 0.25); background: rgba(255, 193, 77, 0.08); }

.online-player-prestige {
  width: fit-content;
  max-width: 100%;
  min-height: 23px;
  margin-top: 8px;
  padding: 3px 9px 3px 5px;
  border: 1px solid rgba(255, 210, 119, 0.24);
  border-radius: 999px;
  background: rgba(255, 191, 72, 0.07);
}

.online-player-prestige img { width: 18px; height: 18px; }
.online-player-prestige span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.online-player-dashboard-body {
  min-height: 0;
  padding: 18px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(105, 219, 255, 0.35) transparent;
}

.online-player-dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.online-player-dashboard-heading > div { display: grid; gap: 2px; }
.online-player-dashboard-heading span { color: var(--social-cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.17em; text-transform: uppercase; }
.online-player-dashboard-heading strong { color: #fff; font-size: 16px; font-weight: 900; }
.online-player-dashboard-heading > small { color: var(--social-muted); font-size: 10px; font-weight: 700; text-align: right; }

.online-player-action-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.online-player-action-buttons > button {
  --action-accent: var(--social-cyan);
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 13px;
  color: var(--social-ink);
  text-align: left;
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--action-accent) 15%, transparent), transparent 52%),
    rgba(255, 255, 255, 0.038);
  border: 1px solid color-mix(in srgb, var(--action-accent) 25%, rgba(255, 255, 255, 0.06));
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.online-player-action-buttons > button[data-tone="profile"] { --action-accent: #ffd685; }
.online-player-action-buttons > button[data-tone="trade"] { --action-accent: #6cecff; }
.online-player-action-buttons > button[data-tone="gift"] { --action-accent: #ff91ce; }
.online-player-action-buttons > button[data-tone="group"] { --action-accent: #81f0ae; }
.online-player-action-buttons > button[data-tone="duo"] { --action-accent: #b69aff; }
.online-player-action-buttons > button[data-tone="duel"] { --action-accent: #ff9b82; }
.online-player-action-buttons > button[data-tone="mute"] { --action-accent: #9fb9d8; }
.online-player-action-buttons > button[data-tone="block"] { --action-accent: #ff746f; }

.online-player-action-buttons > button:hover:not(:disabled),
.online-player-action-buttons > button:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--action-accent) 58%, transparent);
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--action-accent) 23%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.065);
}

.online-player-action-buttons > button:disabled { opacity: 0.37; filter: saturate(0.35); cursor: not-allowed; }

.online-player-action-buttons > button > i {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--action-accent);
  font-style: normal;
  background: color-mix(in srgb, var(--action-accent) 11%, rgba(4, 9, 20, 0.8));
  border: 1px solid color-mix(in srgb, var(--action-accent) 32%, transparent);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 18px color-mix(in srgb, var(--action-accent) 8%, transparent);
}

.online-player-action-buttons > button > i::before { font-size: 19px; font-weight: 900; line-height: 1; }
.online-player-action-buttons > button > i[data-icon="profile"]::before { content: "✦"; }
.online-player-action-buttons > button > i[data-icon="trade"]::before { content: "⇄"; }
.online-player-action-buttons > button > i[data-icon="gift"]::before { content: "◇"; font-size: 25px; }
.online-player-action-buttons > button > i[data-icon="group"]::before { content: "+"; font-size: 27px; font-weight: 500; }
.online-player-action-buttons > button > i[data-icon="duo"]::before { content: "2×2"; font-size: 11px; letter-spacing: -0.05em; }
.online-player-action-buttons > button > i[data-icon="duel"]::before { content: "⚔"; }
.online-player-action-buttons > button > i[data-icon="mute"]::before { content: "◇"; font-size: 22px; text-decoration: line-through; text-decoration-thickness: 2px; }
.online-player-action-buttons > button > i[data-icon="block"]::before { content: "⊘"; font-size: 24px; }

.online-player-block-confirm {
  position: absolute;
  border-radius: inherit;
}

.online-private-social-person-actions > button.is-waiting {
  color: rgba(181, 211, 225, 0.8);
  background: linear-gradient(135deg, rgba(117, 160, 185, 0.12), rgba(84, 122, 151, 0.08));
  border-color: rgba(145, 193, 219, 0.2);
}

.online-player-action-buttons > button > span { min-width: 0; display: grid; gap: 4px; }
.online-player-action-buttons > button > span > strong { overflow: hidden; color: #fff; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-player-action-buttons > button > span > small { overflow: hidden; color: var(--social-muted); font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.online-player-action-buttons > button > b { color: color-mix(in srgb, var(--action-accent) 78%, #fff); font-size: 23px; font-weight: 300; }

.online-player-dashboard-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 11px;
  padding: 10px 12px;
  color: rgba(231, 240, 255, 0.76);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  background: rgba(255, 194, 89, 0.07);
  border: 1px solid rgba(255, 206, 116, 0.17);
  border-radius: 13px;
}

.online-player-dashboard-notice > i { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: var(--social-gold); box-shadow: 0 0 9px rgba(255, 213, 129, 0.65); }
.online-player-dashboard-notice.is-muted { color: var(--social-muted); background: rgba(255, 255, 255, 0.025); border-color: rgba(255, 255, 255, 0.08); }

/* Gifts ----------------------------------------------------------- */

.online-gift-card.online-social-shell {
  width: min(1120px, calc(100vw - 24px));
  height: min(760px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.online-social-head-icon--gift::before,
.online-social-head-icon--gift::after {
  content: "";
  position: absolute;
  background: linear-gradient(145deg, #ffd3ea, #ff83c7);
  box-shadow: 0 0 13px rgba(255, 119, 192, 0.35);
}

.online-social-head-icon--gift::before { width: 25px; height: 18px; bottom: 10px; border-radius: 3px 3px 6px 6px; }
.online-social-head-icon--gift::after { width: 29px; height: 7px; top: 13px; border-radius: 4px; }
.online-social-head-icon--gift > i { position: absolute; z-index: 2; width: 5px; height: 28px; background: #fff5d4; border-radius: 3px; }
.online-social-head-icon--gift > i::before,
.online-social-head-icon--gift > i::after { content: ""; position: absolute; bottom: 20px; width: 11px; height: 8px; border: 3px solid #ffd8ec; border-radius: 9px 9px 2px 9px; }
.online-social-head-icon--gift > i::before { right: 3px; transform: rotate(18deg); }
.online-social-head-icon--gift > i::after { left: 3px; transform: scaleX(-1) rotate(18deg); }

.online-gift-head-actions { display: flex; align-items: center; gap: 8px; }

.online-gift-refresh {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: rgba(230, 242, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 13px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.online-gift-refresh > i { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; }
.online-gift-refresh:hover:not(:disabled), .online-gift-refresh:focus-visible:not(:disabled) { color: #fff; border-color: rgba(105, 224, 255, 0.42); }
.online-gift-refresh:disabled { opacity: 0.4; }

.online-gift-tabs {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 8px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  border-bottom: 1px solid var(--social-line);
  background: rgba(3, 8, 19, 0.42);
}

.online-gift-tabs::-webkit-scrollbar { display: none; }

.online-gift-tabs > button {
  position: relative;
  min-width: 132px;
  min-height: 40px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  place-items: center start;
  gap: 8px;
  padding: 6px 10px;
  color: rgba(218, 231, 250, 0.56);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.online-gift-tabs > button > i { position: relative; width: 23px; height: 23px; display: grid; place-items: center; color: currentColor; font-style: normal; border-radius: 7px; background: rgba(255, 255, 255, 0.045); }
.online-gift-tabs > button > i::before { font-size: 13px; font-weight: 900; }
.online-gift-tabs > button > i[data-tab-icon="inbox"]::before { content: "↓"; }
.online-gift-tabs > button > i[data-tab-icon="sent"]::before { content: "↗"; }
.online-gift-tabs > button > i[data-tab-icon="send"]::before { content: "+"; font-size: 17px; }
.online-gift-tabs > button > b { min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; color: inherit; background: rgba(255, 255, 255, 0.065); font-size: 9px; }

.online-gift-tabs > button.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 113, 190, 0.17), rgba(108, 226, 255, 0.1));
  border-color: rgba(255, 143, 205, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.18);
}

.online-gift-tabs > button.active::after { content: ""; position: absolute; right: 13px; bottom: -9px; left: 13px; height: 2px; background: linear-gradient(90deg, transparent, #ff8fcf, transparent); box-shadow: 0 0 9px rgba(255, 128, 201, 0.68); }

.online-gift-notice,
.online-gift-loading {
  margin: 8px 14px 0;
  padding: 8px 11px;
  color: rgba(237, 244, 255, 0.78);
  background: rgba(91, 205, 255, 0.07);
  border: 1px solid rgba(105, 218, 255, 0.17);
  border-radius: 11px;
  font-size: 10px;
  font-weight: 750;
}

.online-gift-loading { display: flex; align-items: center; gap: 9px; }
.online-gift-loading > i { width: 12px; height: 12px; border: 2px solid rgba(112, 225, 255, 0.25); border-top-color: var(--social-cyan); border-radius: 50%; animation: socialSpin 0.8s linear infinite; }
@keyframes socialSpin { to { transform: rotate(360deg); } }

.online-gift-body {
  min-height: 0;
  padding: 12px 14px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 221, 255, 0.34) transparent;
}

.online-gift-body:not(.online-gift-body--send) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  align-content: start;
  gap: 10px;
}

.online-gift-body:not(.online-gift-body--send) > .online-gift-empty:only-child {
  grid-column: 1 / -1;
}

.online-gift-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 9px;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(106, 223, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(155, 204, 246, 0.13);
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.online-gift-row--sent { background: radial-gradient(circle at 0 0, rgba(255, 137, 204, 0.08), transparent 42%), rgba(255, 255, 255, 0.035); }
.online-gift-row[data-status="pending"] { border-color: rgba(255, 211, 123, 0.2); }

.online-gift-row-head { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; }

.online-gift-row-avatar,
.online-gift-address-avatar,
.online-gift-recipient-avatar {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #e9fbff;
  background: linear-gradient(145deg, rgba(97, 220, 255, 0.2), rgba(145, 91, 255, 0.2));
  border: 1px solid rgba(127, 222, 255, 0.25);
  border-radius: 12px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 900;
}

.online-gift-row-person { min-width: 0; display: grid; gap: 2px; }
.online-gift-row-person > span { color: var(--social-muted); font-size: 8px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.online-gift-row-person > strong { overflow: hidden; color: #fff; font-size: 12px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }

.online-gift-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  color: var(--social-gold);
  background: rgba(255, 197, 91, 0.075);
  border: 1px solid rgba(255, 204, 105, 0.16);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.online-gift-status > i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.online-gift-status--claimed { color: var(--social-green); background: rgba(87, 222, 151, 0.07); border-color: rgba(102, 236, 165, 0.16); }
.online-gift-status--declined, .online-gift-status--cancelled, .online-gift-status--expired { color: rgba(222, 229, 241, 0.52); background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.08); }

.online-gift-row-main { min-width: 0; }
.online-gift-row-main .online-trade-monster { min-height: 82px; grid-template-columns: 74px minmax(0, 1fr); padding: 7px; border-radius: 13px; }
.online-gift-row-main .online-trade-monster > div:only-child { grid-column: 1 / -1; }
.online-gift-row-main .online-trade-monster-art { min-height: 66px; border-radius: 10px; }
.online-gift-row-main .online-trade-monster-copy strong { font-size: 12px; }
.online-gift-row-main .online-trade-monster-copy > span { font-size: 9px; }

.online-gift-row-footer { min-width: 0; display: flex; align-items: end; justify-content: space-between; gap: 9px; }
.online-gift-row-footer > div:first-child { min-width: 0; display: grid; gap: 3px; }
.online-gift-meta, .online-gift-row-hint { overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-row-hint { color: #ffbf90; }
.online-gift-row-actions { display: flex; justify-content: flex-end; gap: 6px; }

.online-gift-row-actions > button,
.online-gift-confirm button,
.online-gift-submit > button {
  min-height: 32px;
  padding: 0 11px;
  color: rgba(234, 242, 255, 0.82);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.online-gift-row-actions > .online-trade-primary,
.online-gift-confirm .online-trade-primary,
.online-gift-submit > .online-trade-primary {
  color: #07141a;
  background: linear-gradient(135deg, #eaffff, #73e9ff 58%, #8ecbff);
  border-color: rgba(155, 240, 255, 0.64);
  box-shadow: 0 7px 20px rgba(54, 196, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.online-gift-empty {
  min-height: 70px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 14px;
  color: var(--social-muted);
  text-align: center;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(159, 204, 244, 0.14);
  border-radius: 14px;
  font-size: 10px;
  font-weight: 750;
}

.online-gift-send-layout {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(360px, 1.14fr);
  gap: 11px;
}

.online-gift-recipient-panel,
.online-gift-send-panel {
  min-width: 0;
  min-height: 0;
  padding: 13px;
  background: var(--social-panel);
  border: 1px solid rgba(151, 206, 248, 0.12);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.online-gift-recipient-panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) minmax(0, 1fr);
  align-content: start;
  gap: 9px;
  overflow: hidden;
}

.online-gift-send-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.online-gift-panel-heading { min-width: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; }
.online-gift-panel-heading > span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--social-cyan); background: rgba(83, 211, 242, 0.08); border: 1px solid rgba(100, 220, 251, 0.18); border-radius: 10px; font-size: 9px; font-weight: 900; }
.online-gift-panel-heading > div { min-width: 0; display: grid; gap: 1px; }
.online-gift-panel-heading small { color: var(--social-muted); font-size: 8px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.online-gift-panel-heading h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 900; }

.online-gift-code { min-width: 0; min-height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; padding: 8px 10px; background: linear-gradient(135deg, rgba(255, 139, 204, 0.1), rgba(134, 98, 255, 0.08)); border: 1px solid rgba(255, 146, 207, 0.18); border-radius: 12px; }
.online-gift-code > span { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-gift-code > strong { overflow: hidden; color: #fff; font-family: ui-monospace, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-code > button { grid-column: 2; grid-row: 1 / 3; min-height: 29px; align-self: center; padding: 0 9px; color: #ffd5ed; background: rgba(255, 128, 196, 0.08); border: 1px solid rgba(255, 143, 205, 0.19); border-radius: 9px; font-size: 8px; font-weight: 900; text-transform: uppercase; }

.online-gift-lookup,
.online-gift-monster-search,
.online-leaderboard-search {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 5px 5px 5px 11px;
  background: rgba(2, 8, 18, 0.66);
  border: 1px solid rgba(148, 205, 247, 0.15);
  border-radius: 12px;
}

.online-gift-lookup input,
.online-gift-monster-search input,
.online-leaderboard-search input {
  min-width: 0;
  height: 30px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  font: 750 10px/1 Inter, system-ui, sans-serif;
}

.online-gift-lookup input::placeholder,
.online-gift-monster-search input::placeholder,
.online-leaderboard-search input::placeholder { color: rgba(211, 224, 243, 0.38); }

.online-gift-lookup > button,
.online-gift-monster-search > button,
.online-leaderboard-search > button {
  min-width: 34px;
  height: 31px;
  padding: 0 9px;
  color: #dffaff;
  background: rgba(93, 214, 246, 0.1);
  border: 1px solid rgba(109, 225, 255, 0.2);
  border-radius: 9px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.online-gift-limit { display: grid; gap: 6px; padding: 8px 10px; background: rgba(105, 225, 255, 0.045); border: 1px solid rgba(114, 222, 255, 0.12); border-radius: 12px; }
.online-gift-limit > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.online-gift-limit small { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.online-gift-limit strong { color: #dffbff; font-size: 8px; font-weight: 900; }
.online-gift-limit > i { height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.07); border-radius: 999px; }
.online-gift-limit > i > b { display: block; width: var(--gift-limit); height: 100%; background: linear-gradient(90deg, #65e5ff, #9a93ff); border-radius: inherit; box-shadow: 0 0 8px rgba(91, 222, 255, 0.55); }
.online-gift-limit--empty { border-color: rgba(255, 117, 130, 0.2); background: rgba(255, 82, 97, 0.05); }
.online-gift-limit--empty > i > b { background: #ff7883; }

.online-gift-address-section { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
.online-gift-address-section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.online-gift-address-section > header h4 { margin: 0; color: rgba(232, 241, 255, 0.72); font-size: 8px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.online-gift-address-section > header span { min-width: 20px; height: 18px; display: grid; place-items: center; color: var(--social-muted); background: rgba(255, 255, 255, 0.045); border-radius: 999px; font-size: 8px; font-weight: 900; }

.online-gift-address-list { min-height: 0; display: grid; align-content: start; gap: 5px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(103, 221, 255, 0.27) transparent; }

.online-gift-address {
  min-width: 0;
  min-height: 46px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 11px;
}

.online-gift-address:hover, .online-gift-address:focus-visible { background: rgba(105, 220, 255, 0.075); border-color: rgba(111, 224, 255, 0.24); }
.online-gift-address--own { background: rgba(162, 122, 255, 0.045); }
.online-gift-address-avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 9px; }
.online-gift-address-copy { min-width: 0; display: grid; gap: 2px; }
.online-gift-address-copy strong, .online-gift-address-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-address-copy strong { color: #fff; font-size: 9px; font-weight: 900; }
.online-gift-address-copy small { color: var(--social-muted); font-size: 7px; font-weight: 700; }
.online-gift-address > i { color: rgba(122, 225, 255, 0.68); font-size: 17px; font-style: normal; }
.online-gift-address-list > .online-gift-empty--inline { min-height: 42px; }

.online-gift-recipient { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; background: linear-gradient(135deg, rgba(97, 222, 255, 0.08), rgba(151, 100, 255, 0.055)); border: 1px solid rgba(117, 220, 255, 0.15); border-radius: 13px; }
.online-gift-recipient-avatar { width: 42px; height: 42px; border-radius: 13px; }
.online-gift-recipient > span:last-child { min-width: 0; display: grid; gap: 2px; }
.online-gift-recipient small { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-gift-recipient strong { overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-recipient em { color: #ffb78e; font-size: 7px; font-style: normal; font-weight: 700; }

.online-gift-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 0.65fr); gap: 7px; }
.online-gift-field, .online-gift-check { min-width: 0; }
.online-gift-field { display: grid; gap: 5px; }
.online-gift-field > span, .online-gift-check > span { color: var(--social-muted); font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.online-gift-field input, .online-gift-field select { min-width: 0; width: 100%; height: 38px; padding: 0 10px; color: #fff; background: rgba(2, 8, 18, 0.72); border: 1px solid rgba(149, 206, 248, 0.15); border-radius: 10px; outline: 0; font: 750 10px/1 Inter, system-ui, sans-serif; }
.online-gift-field select { color-scheme: dark; }
.online-gift-field input:focus, .online-gift-field select:focus { border-color: rgba(103, 224, 255, 0.42); box-shadow: 0 0 0 2px rgba(74, 200, 233, 0.08); }
.online-gift-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; min-height: 24px; }
.online-gift-check input { width: 15px; height: 15px; accent-color: #69dff8; }

.online-gift-monster-picker { min-width: 0; min-height: 0; flex: 1 1 220px; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 7px; }
.online-gift-monster-search { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.online-gift-monster-count, #onlineLeaderboardCount { min-width: 28px; color: var(--social-muted); font-size: 8px; font-weight: 900; text-align: center; }

.online-gift-monster-list { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 6px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(102, 220, 255, 0.28) transparent; }

.online-gift-monster-option {
  min-width: 0;
  min-height: 65px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px;
  color: #fff;
  text-align: left;
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.online-gift-monster-option:hover, .online-gift-monster-option:focus-visible { border-color: rgba(104, 226, 255, 0.3); background: rgba(93, 215, 247, 0.07); }
.online-gift-monster-option.is-selected { border-color: rgba(116, 237, 255, 0.55); background: linear-gradient(135deg, rgba(82, 218, 249, 0.14), rgba(145, 105, 255, 0.08)); box-shadow: inset 0 0 0 1px rgba(125, 233, 255, 0.12), 0 0 18px rgba(73, 207, 239, 0.08); }
.online-gift-monster-option.is-holo { border-color: rgba(255, 201, 112, 0.28); }
.online-gift-monster-option.is-black-holo { border-color: rgba(198, 151, 255, 0.38); background: radial-gradient(circle at 0 0, rgba(192, 128, 255, 0.12), transparent 54%), rgba(255, 255, 255, 0.032); }
.online-gift-monster-option[hidden] { display: none; }

.online-gift-monster-option-art { position: relative; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(116, 220, 255, 0.13), rgba(1, 7, 16, 0.68) 72%); border-radius: 10px; }
.online-gift-monster-option-art img { width: 92%; height: 92%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.58)); }
.online-gift-monster-option-copy { min-width: 0; display: grid; gap: 3px; }
.online-gift-monster-option-copy strong, .online-gift-monster-option-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-monster-option-copy strong { color: #fff; font-size: 10px; font-weight: 900; }
.online-gift-monster-option-copy small { color: var(--social-muted); font-size: 7px; font-weight: 700; }
.online-gift-monster-option > em { position: absolute; top: 4px; right: 4px; padding: 3px 5px; color: #dffcff; background: rgba(13, 35, 51, 0.82); border: 1px solid rgba(107, 226, 255, 0.27); border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.online-gift-monster-option { position: relative; }
.online-gift-monster-list > .online-gift-empty { grid-column: 1 / -1; }

.online-gift-preview .online-trade-monster { min-height: 82px; grid-template-columns: 78px minmax(0, 1fr); padding: 7px; }
.online-gift-preview .online-trade-monster-art { min-height: 67px; }

.online-gift-submit,
.online-gift-confirm {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: linear-gradient(135deg, rgba(106, 229, 255, 0.08), rgba(255, 132, 201, 0.055));
  border: 1px solid rgba(114, 225, 255, 0.16);
  border-radius: 13px;
}

.online-gift-submit > div, .online-gift-confirm > div:first-child { min-width: 0; display: grid; gap: 2px; }
.online-gift-submit span, .online-gift-confirm span { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-gift-submit strong, .online-gift-confirm strong { overflow: hidden; color: #fff; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-gift-submit > button { min-width: 120px; height: 38px; }
.online-gift-submit > button:disabled { color: rgba(227, 237, 247, 0.36); background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.online-gift-confirm .online-gift-row-actions--inline { display: flex; gap: 6px; }

/* Groups ---------------------------------------------------------- */

.online-group-card.online-social-shell {
  width: min(920px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.online-social-head-icon--group { border-color: rgba(118, 240, 172, 0.3); background: linear-gradient(145deg, rgba(91, 231, 155, 0.15), rgba(89, 188, 255, 0.1)); }
.online-social-head-icon--group::before,
.online-social-head-icon--group::after,
.online-social-head-icon--group > i { content: ""; position: absolute; border: 2px solid #8af4ba; border-radius: 50%; box-shadow: 0 0 10px rgba(104, 235, 165, 0.22); }
.online-social-head-icon--group::before { width: 15px; height: 15px; top: 10px; left: 11px; }
.online-social-head-icon--group::after { width: 12px; height: 12px; top: 14px; right: 10px; opacity: 0.72; }
.online-social-head-icon--group > i { width: 27px; height: 14px; bottom: 9px; left: 8px; border-radius: 14px 14px 7px 7px; }
.online-social-head-icon--group > b { position: absolute; right: -6px; bottom: -5px; min-width: 23px; height: 23px; display: grid; place-items: center; color: #092018; background: linear-gradient(135deg, #d9ffe9, #74eaae); border: 2px solid #102038; border-radius: 50%; font-size: 9px; font-weight: 950; }

.online-group-dashboard { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 11px; padding: 12px; overflow: hidden; }

.online-group-roster-panel,
.online-group-command-panel { min-width: 0; min-height: 0; background: var(--social-panel); border: 1px solid rgba(151, 207, 248, 0.12); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }

.online-group-roster-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 12px; overflow: hidden; }
.online-group-roster-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 10px; }
.online-group-roster-panel > header > span { color: rgba(231, 241, 255, 0.72); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-group-roster-panel > header > b { min-width: 33px; height: 23px; display: grid; place-items: center; color: var(--social-green); background: rgba(87, 223, 151, 0.07); border: 1px solid rgba(100, 235, 162, 0.16); border-radius: 999px; font-size: 9px; font-weight: 900; }

.online-group-members { min-height: 0; display: grid; align-content: start; gap: 7px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(103, 223, 255, 0.3) transparent; }

.online-group-member {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  color: var(--social-ink);
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: socialMemberIn 0.35s calc(var(--member-index, 0) * 45ms) ease both;
}

@keyframes socialMemberIn { from { opacity: 0; transform: translateX(-9px); } to { opacity: 1; transform: translateX(0); } }

.online-group-member.is-ready { background: linear-gradient(135deg, rgba(84, 222, 147, 0.1), rgba(83, 194, 255, 0.035)); border-color: rgba(101, 238, 164, 0.21); }
.online-group-member.is-pending { opacity: 0.68; border-style: dashed; }

.online-group-member-avatar { width: 43px; height: 43px; display: grid; place-items: center; color: #e8fbff; background: linear-gradient(145deg, rgba(105, 220, 255, 0.16), rgba(145, 102, 255, 0.17)); border: 1px solid rgba(126, 223, 255, 0.22); border-radius: 13px; font-family: "Cinzel", Georgia, serif; font-size: 12px; font-weight: 900; }
.online-group-member.is-ready .online-group-member-avatar { color: #ddffeb; background: linear-gradient(145deg, rgba(85, 231, 155, 0.18), rgba(82, 199, 255, 0.11)); border-color: rgba(101, 237, 165, 0.26); }

.online-group-member-main { min-width: 0; display: grid; gap: 5px; }
.online-group-member-name { min-width: 0; display: flex; align-items: center; gap: 5px; }
.online-group-member-name > strong { min-width: 0; overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-group-member-name > span { flex: 0 0 auto; padding: 3px 5px; color: var(--social-cyan); background: rgba(92, 216, 246, 0.07); border: 1px solid rgba(105, 224, 255, 0.14); border-radius: 999px; font-size: 6px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.online-group-member-name > span.is-leader { color: var(--social-gold); background: rgba(255, 197, 84, 0.06); border-color: rgba(255, 208, 108, 0.15); }
.online-group-member-main > small { overflow: hidden; color: var(--social-muted); font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

.online-group-member-mute,
.online-group-member-block {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: 150ms ease;
}

.online-group-member-mute {
  color: rgba(185, 226, 255, 0.82);
  background: rgba(91, 191, 255, 0.06);
  border: 1px solid rgba(112, 204, 255, 0.17);
}

.online-group-member-mute.is-muted {
  color: rgba(255, 216, 142, 0.88);
  background: rgba(255, 184, 75, 0.075);
  border-color: rgba(255, 198, 100, 0.22);
}

.online-group-member-block {
  color: rgba(255, 192, 192, 0.78);
  background: rgba(255, 100, 111, 0.055);
  border: 1px solid rgba(255, 120, 129, 0.15);
}

.online-group-member-mute:hover,
.online-group-member-mute:focus-visible {
  color: #fff;
  background: rgba(91, 191, 255, 0.14);
  border-color: rgba(126, 216, 255, 0.42);
  box-shadow: 0 0 0 2px rgba(92, 202, 255, 0.1), 0 7px 18px rgba(6, 31, 55, 0.24);
  transform: translateY(-1px);
}

.online-group-member-block:hover,
.online-group-member-block:focus-visible {
  color: #fff;
  background: rgba(255, 91, 108, 0.14);
  border-color: rgba(255, 131, 140, 0.42);
  box-shadow: 0 0 0 2px rgba(255, 102, 119, 0.11), 0 7px 18px rgba(56, 8, 16, 0.22);
  transform: translateY(-1px);
}

.online-group-member-state { display: inline-flex; align-items: center; gap: 6px; color: rgba(221, 230, 244, 0.47); font-size: 8px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.online-group-member-state > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.online-group-member.is-ready .online-group-member-state { color: var(--social-green); }
.online-group-member.is-ready .online-group-member-state > i { box-shadow: 0 0 9px currentColor; }
.online-group-member.is-pending .online-group-member-state { color: var(--social-gold); }

.online-group-command-panel { display: flex; flex-direction: column; gap: 10px; padding: 12px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }

.online-group-readiness { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; background: radial-gradient(circle at 16% 50%, rgba(100, 236, 165, 0.1), transparent 42%), rgba(255, 255, 255, 0.025); border: 1px solid rgba(106, 234, 167, 0.14); border-radius: 15px; }
.online-group-ready-ring { width: 70px; height: 70px; display: grid; place-items: center; padding: 5px; border-radius: 50%; background: conic-gradient(var(--social-green) var(--group-ready-progress), rgba(255, 255, 255, 0.07) 0); box-shadow: 0 0 24px rgba(86, 221, 150, 0.08); }
.online-group-ready-ring > i { width: 100%; height: 100%; display: flex; align-items: baseline; justify-content: center; padding-top: 18px; color: #fff; background: #0b1723; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 50%; font-style: normal; }
.online-group-ready-ring strong { font-size: 20px; font-weight: 950; }
.online-group-ready-ring small { color: var(--social-muted); font-size: 9px; font-weight: 900; }
.online-group-readiness > div { min-width: 0; display: grid; gap: 3px; }
.online-group-readiness > div > span { color: var(--social-muted); font-size: 8px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-group-readiness > div > strong { color: #fff; font-size: 12px; font-weight: 900; }

.online-group-notice,
.online-group-reward-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 10px; color: rgba(229, 239, 253, 0.73); background: rgba(93, 211, 245, 0.05); border: 1px solid rgba(109, 222, 255, 0.12); border-radius: 13px; }
.online-group-notice > i { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--social-cyan); box-shadow: 0 0 8px rgba(105, 231, 255, 0.55); }
.online-group-notice p, .online-group-reward-note p { margin: 0; font-size: 9px; font-weight: 700; line-height: 1.45; }
.online-group-reward-note { color: rgba(255, 233, 188, 0.74); background: rgba(255, 193, 86, 0.05); border-color: rgba(255, 205, 112, 0.13); }
.online-group-reward-note > i { color: var(--social-gold); font-style: normal; }

.online-group-actions { display: grid; grid-template-columns: minmax(110px, 0.35fr) minmax(180px, 0.65fr); justify-content: end; gap: 9px; padding: 10px 12px; border-top: 1px solid var(--social-line); background: rgba(3, 8, 18, 0.62); }
.online-group-actions > button { min-height: 45px; padding: 0 18px; color: rgba(229, 238, 252, 0.72); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 13px; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.online-group-actions > .online-duel-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #071812; background: linear-gradient(135deg, #e6fff0, #73edaa 58%, #70d8d0); border-color: rgba(143, 247, 192, 0.64); box-shadow: 0 8px 23px rgba(68, 210, 139, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.online-group-actions > .online-duel-primary > i { width: 7px; height: 7px; border-radius: 50%; background: #0c6b42; box-shadow: 0 0 7px rgba(11, 112, 66, 0.4); }
.online-group-actions > .online-duel-primary.is-ready { color: #eafff3; background: rgba(74, 213, 139, 0.1); border-color: rgba(100, 237, 164, 0.28); box-shadow: none; }

.online-group-invite-card.online-social-shell {
  width: min(760px, calc(100vw - 24px));
  height: auto;
  min-height: 400px;
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(340px, 1.1fr);
  grid-template-rows: 1fr;
  overflow: hidden;
}

.online-group-invite-visual { position: relative; min-height: 400px; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--social-line); background: radial-gradient(circle, rgba(91, 232, 160, 0.19), transparent 28%), radial-gradient(circle at 40% 46%, rgba(96, 205, 255, 0.14), transparent 47%), rgba(4, 12, 22, 0.45); }
.online-group-invite-visual::before { content: ""; position: absolute; width: 64%; aspect-ratio: 1; border: 1px solid rgba(103, 239, 169, 0.22); border-radius: 50%; box-shadow: 0 0 42px rgba(82, 219, 148, 0.08), inset 0 0 42px rgba(74, 206, 255, 0.05); animation: groupInviteOrbit 12s linear infinite; }
.online-group-invite-visual > i { position: absolute; width: 54%; aspect-ratio: 1; border: 1px solid rgba(111, 229, 255, 0.15); border-radius: 50%; }
.online-group-invite-visual > i:nth-child(2) { width: 78%; border-style: dashed; animation: groupInviteOrbit 18s linear reverse infinite; }
.online-group-invite-visual > i:nth-child(3) { width: 91%; opacity: 0.32; }
.online-group-invite-visual > span { position: relative; z-index: 2; width: 108px; height: 108px; display: grid; place-items: center; color: #e7fff1; background: linear-gradient(145deg, rgba(94, 231, 158, 0.24), rgba(85, 177, 255, 0.2)); border: 1px solid rgba(122, 241, 177, 0.39); border-radius: 35px; font-family: "Cinzel", Georgia, serif; font-size: 31px; font-weight: 900; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 0 35px rgba(85, 220, 151, 0.13); }
@keyframes groupInviteOrbit { to { transform: rotate(360deg); } }

.online-group-invite-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.online-group-invite-copy h2 { margin: 8px 0 12px; color: #fff; font-family: "Cinzel", Georgia, serif; font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.online-group-invite-copy > p { margin: 0; color: rgba(230, 239, 252, 0.69); font-size: 12px; font-weight: 700; line-height: 1.5; }
.online-group-invite-copy > p strong { color: #fff; }
.online-group-invite-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.online-group-invite-stats > span { min-width: 0; min-height: 76px; display: grid; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 9px; padding: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; }
.online-group-invite-stats i { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; align-self: center; color: var(--social-green); background: rgba(79, 217, 143, 0.08); border: 1px solid rgba(96, 232, 160, 0.15); border-radius: 10px; font-style: normal; }
.online-group-invite-stats i::before { font-size: 14px; font-weight: 900; }
.online-group-invite-stats i[data-icon="members"]::before { content: "++"; letter-spacing: -0.25em; transform: translateX(-1px); }
.online-group-invite-stats i[data-icon="coop"]::before { content: "✦"; }
.online-group-invite-stats b { overflow: hidden; color: #fff; font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-group-invite-stats small { color: var(--social-muted); font-size: 8px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.online-group-invite-actions { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 9px; margin-top: 20px; }
.online-group-invite-actions > button { min-height: 47px; color: rgba(229, 238, 252, 0.72); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 13px; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.online-group-invite-actions > .online-duel-primary { display: flex; align-items: center; justify-content: center; gap: 8px; color: #071911; background: linear-gradient(135deg, #e5ffef, #71ecaa 60%, #78ddd2); border-color: rgba(137, 245, 188, 0.62); box-shadow: 0 9px 26px rgba(68, 212, 140, 0.17); }
.online-group-invite-actions > .online-duel-primary > span { font-size: 17px; font-weight: 400; }

/* Compact invitation cockpit: identity, prestige and decision controls stay
   visible together. The old orbit artwork is intentionally not rendered. */
.online-group-invite-card.online-social-shell {
  width: min(680px, calc(100vw - 24px));
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.online-group-invite-head { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(158px, 190px); align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--social-line); background: linear-gradient(105deg, rgba(80, 226, 149, 0.08), rgba(87, 183, 255, 0.045) 55%, rgba(154, 112, 255, 0.07)); }
.online-group-invite-avatar { position: relative; width: 54px; height: 54px; display: grid; place-items: center; color: #ecfff4; background: linear-gradient(145deg, rgba(91, 232, 160, 0.22), rgba(80, 172, 255, 0.16)); border: 1px solid rgba(123, 241, 180, 0.34); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(0, 0, 0, 0.24), 0 0 24px rgba(74, 218, 151, 0.08); }
.online-group-invite-avatar > b { font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: 900; }
.online-group-invite-avatar > i { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border: 3px solid #09121f; border-radius: 50%; background: var(--social-green); box-shadow: 0 0 9px rgba(105, 240, 169, 0.6); }
.online-group-invite-avatar.is-outgoing > i { background: var(--social-gold); box-shadow: 0 0 9px rgba(255, 216, 137, 0.55); }
.online-group-invite-identity { min-width: 0; }
.online-group-invite-identity .online-social-kicker { margin: 0 0 3px; }
.online-group-invite-identity h2 { overflow: hidden; margin: 0; color: #fff; font-family: "Cinzel", Georgia, serif; font-size: clamp(20px, 3.4vw, 28px); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.online-group-invite-identity > small { display: block; margin-top: 4px; color: var(--social-muted); font-size: 8px; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }

.online-group-invite-prestige { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; color: #fff5d7; background: linear-gradient(135deg, rgba(255, 205, 103, 0.11), rgba(164, 112, 255, 0.09)); border: 1px solid rgba(255, 218, 139, 0.2); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.online-group-invite-prestige-mark { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; color: #fff0b4; background: radial-gradient(circle, rgba(255, 217, 127, 0.2), rgba(106, 69, 159, 0.18)); border: 1px solid rgba(255, 220, 142, 0.23); border-radius: 11px; font-family: "Cinzel", Georgia, serif; font-size: 10px; font-weight: 900; }
.online-group-invite-prestige-mark img { width: 100%; height: 100%; object-fit: contain; }
.online-group-invite-prestige-copy { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 5px; }
.online-group-invite-prestige-copy > small { color: rgba(255, 225, 166, 0.58); font-size: 6px; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; }
.online-group-invite-prestige-copy > strong { color: #ffe2a0; font-size: 11px; font-weight: 950; }
.online-group-invite-prestige-copy > span { grid-column: 1 / -1; overflow: hidden; margin-top: 1px; color: rgba(239, 231, 255, 0.69); font-size: 7px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.online-group-invite-prestige > em { padding: 3px 5px; color: #fff0c4; background: rgba(255, 211, 119, 0.1); border: 1px solid rgba(255, 219, 144, 0.16); border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 900; white-space: nowrap; }

.online-group-invite-copy { min-width: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr); align-items: center; gap: 14px; padding: 14px 16px 12px; }
.online-group-invite-copy > div:first-child { min-width: 0; }
.online-group-invite-copy > div:first-child > span { display: block; margin-bottom: 4px; color: var(--social-green); font-size: 7px; font-weight: 950; letter-spacing: 0.11em; text-transform: uppercase; }
.online-group-invite-copy h3 { margin: 0 0 6px; color: #fff; font-family: "Cinzel", Georgia, serif; font-size: clamp(23px, 4vw, 31px); line-height: 1; }
.online-group-invite-copy p { margin: 0; color: rgba(230, 239, 252, 0.68); font-size: 9px; font-weight: 700; line-height: 1.45; }
.online-group-invite-stats { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 0; }
.online-group-invite-stats > span { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 27px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 7px; padding: 7px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 11px; }
.online-group-invite-stats i { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; align-self: center; color: var(--social-green); background: rgba(79, 217, 143, 0.08); border: 1px solid rgba(96, 232, 160, 0.15); border-radius: 8px; font-style: normal; }
.online-group-invite-stats i::before { font-size: 11px; font-weight: 950; }
.online-group-invite-stats i[data-icon="members"]::before { content: "++"; letter-spacing: -0.25em; transform: translateX(-1px); }
.online-group-invite-stats i[data-icon="capacity"]::before { content: "4"; }
.online-group-invite-stats i[data-icon="coop"]::before { content: "✦"; }
.online-group-invite-stats b { overflow: hidden; color: #fff; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-group-invite-stats small { overflow: hidden; color: var(--social-muted); font-size: 5px; font-weight: 900; letter-spacing: 0.06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.online-group-invite-actions { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 8px; margin: 0; padding: 10px 14px 12px; border-top: 1px solid var(--social-line); background: rgba(3, 8, 18, 0.57); }
.online-group-invite-actions.is-single { grid-template-columns: 1fr; }
.online-group-invite-actions > button { min-height: 44px; color: rgba(229, 238, 252, 0.72); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.online-group-invite-actions > .online-duel-primary { display: flex; align-items: center; justify-content: center; gap: 8px; color: #071911; background: linear-gradient(135deg, #e5ffef, #71ecaa 60%, #78ddd2); border-color: rgba(137, 245, 188, 0.62); box-shadow: 0 9px 26px rgba(68, 212, 140, 0.17); }
.online-group-invite-actions > .online-duel-primary > span { font-size: 16px; font-weight: 400; }

@media (max-width: 520px) {
  .online-group-invite-head { grid-template-columns: 50px minmax(0, 1fr); gap: 9px; padding: 11px 12px; }
  .online-group-invite-avatar { width: 47px; height: 47px; border-radius: 15px; }
  .online-group-invite-prestige { grid-column: 1 / -1; min-height: 43px; }
  .online-group-invite-copy { display: block; padding: 11px 12px 9px; }
  .online-group-invite-stats { margin-top: 9px; }
}

@media (max-width: 370px) {
  .online-group-invite-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .online-group-invite-stats > span:last-child { grid-column: 1 / -1; }
}

/* Leaderboards ---------------------------------------------------- */

.online-leaderboard-card.online-social-shell {
  width: min(1160px, calc(100vw - 24px));
  height: min(780px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.online-leaderboard-card--small.online-social-shell { width: min(560px, calc(100vw - 24px)); height: auto; min-height: 260px; grid-template-rows: auto minmax(150px, 1fr); }

.online-social-head-icon--leaderboard { border-color: rgba(255, 214, 128, 0.31); background: linear-gradient(145deg, rgba(255, 200, 95, 0.17), rgba(149, 105, 255, 0.11)); }
.online-social-head-icon--leaderboard::before { content: ""; position: absolute; width: 25px; height: 27px; bottom: 8px; border: 2px solid #ffd887; border-top: 0; border-radius: 3px 3px 12px 12px; box-shadow: 0 0 13px rgba(255, 206, 110, 0.2); }
.online-social-head-icon--leaderboard::after { content: "★"; position: absolute; top: 8px; color: #fff0bc; font-size: 15px; text-shadow: 0 0 9px rgba(255, 211, 118, 0.55); }
.online-social-head-icon--leaderboard > i::before, .online-social-head-icon--leaderboard > i::after { content: ""; position: absolute; top: 14px; width: 10px; height: 13px; border: 2px solid rgba(255, 214, 131, 0.73); }
.online-social-head-icon--leaderboard > i::before { right: 7px; border-left: 0; border-radius: 0 10px 10px 0; }
.online-social-head-icon--leaderboard > i::after { left: 7px; border-right: 0; border-radius: 10px 0 0 10px; }

.online-leaderboard-updated { max-width: 210px; overflow: hidden; padding: 6px 9px; color: var(--social-muted); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 999px; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.online-leaderboard-loading { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 17px; color: rgba(230, 239, 252, 0.7); }
.online-leaderboard-loading > span { display: flex; gap: 7px; }
.online-leaderboard-loading > span > i { width: 9px; height: 9px; border-radius: 50%; background: var(--social-gold); box-shadow: 0 0 11px rgba(255, 213, 127, 0.55); animation: leaderboardLoad 1.1s ease-in-out infinite; }
.online-leaderboard-loading > span > i:nth-child(2) { animation-delay: 0.14s; }
.online-leaderboard-loading > span > i:nth-child(3) { animation-delay: 0.28s; }
.online-leaderboard-loading > strong { font-size: 11px; font-weight: 850; }
@keyframes leaderboardLoad { 0%, 100% { opacity: 0.25; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-4px); } }

.online-leaderboard-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); align-items: end; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--social-line); background: rgba(3, 8, 18, 0.48); }
.online-leaderboard-category-wrap { min-width: 0; display: grid; gap: 5px; }
.online-leaderboard-category-wrap > span { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.online-leaderboard-categories { min-width: 0; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
.online-leaderboard-categories::-webkit-scrollbar { display: none; }
.online-leaderboard-categories > button { min-width: 142px; height: 35px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 8px 0 11px; color: rgba(218, 230, 248, 0.55); background: rgba(255, 255, 255, 0.027); border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; text-align: left; }
.online-leaderboard-categories > button > span { overflow: hidden; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-leaderboard-categories > button > b { min-width: 22px; height: 19px; display: grid; place-items: center; padding: 0 5px; color: inherit; background: rgba(255, 255, 255, 0.05); border-radius: 999px; font-size: 7px; }
.online-leaderboard-categories > button.active { color: #fff3cc; background: linear-gradient(135deg, rgba(255, 204, 103, 0.13), rgba(153, 112, 255, 0.08)); border-color: rgba(255, 211, 122, 0.28); }
.online-leaderboard-categories > button.active > b { color: #161106; background: #f9d37f; }

.online-leaderboard-search { min-height: 35px; height: 35px; grid-template-columns: auto minmax(0, 1fr) auto auto; }

.online-leaderboard-content { min-height: 0; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(104, 220, 255, 0.3) transparent; }
.online-leaderboard-focus { min-width: 0; display: grid; gap: 9px; }
.online-leaderboard-focus > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.online-leaderboard-focus > header > div { min-width: 0; display: grid; gap: 2px; }
.online-leaderboard-focus > header > div > span { color: var(--social-gold); font-size: 8px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.online-leaderboard-focus > header h3 { margin: 0; overflow: hidden; color: #fff; font-family: "Cinzel", Georgia, serif; font-size: clamp(18px, 2.3vw, 27px); text-overflow: ellipsis; white-space: nowrap; }
.online-leaderboard-focus > header > span { min-width: 58px; display: grid; justify-items: end; }
.online-leaderboard-focus > header > span > strong { color: #fff0be; font-size: 18px; line-height: 1; }
.online-leaderboard-focus > header > span > small { color: var(--social-muted); font-size: 7px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.online-leaderboard-focus > p { margin: 0; color: var(--social-muted); font-size: 9px; font-weight: 700; line-height: 1.45; }

.online-leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.online-leaderboard-podium.is-empty, .online-leaderboard-list.is-empty { display: none; }

.online-leaderboard-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px 39px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--social-ink);
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
}

.online-leaderboard-row[hidden] { display: none; }
.online-leaderboard-row--podium { min-height: 128px; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; padding: 12px; background: radial-gradient(circle at 10% 0, rgba(255, 210, 117, 0.12), transparent 47%), rgba(255, 255, 255, 0.035); border-color: rgba(255, 210, 119, 0.18); }
.online-leaderboard-row--podium.is-top-1 { background: radial-gradient(circle at 10% 0, rgba(255, 220, 127, 0.2), transparent 51%), linear-gradient(145deg, rgba(255, 189, 70, 0.07), rgba(255, 255, 255, 0.03)); border-color: rgba(255, 217, 137, 0.34); box-shadow: inset 0 1px 0 rgba(255, 245, 207, 0.11), 0 10px 26px rgba(0, 0, 0, 0.18); }
.online-leaderboard-row--podium.is-top-2 { border-color: rgba(194, 224, 255, 0.25); }
.online-leaderboard-row--podium.is-top-3 { border-color: rgba(226, 157, 111, 0.25); }

.online-leaderboard-rank { min-width: 0; display: grid; gap: 1px; }
.online-leaderboard-rank > small { color: var(--social-muted); font-size: 6px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.online-leaderboard-rank > strong { color: #dbeaff; font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 900; }
.online-leaderboard-row--podium .online-leaderboard-rank > strong { color: #ffe09a; font-size: 22px; }

.online-leaderboard-avatar { width: 39px; height: 39px; display: grid; place-items: center; color: #ecfaff; background: linear-gradient(145deg, rgba(111, 222, 255, 0.17), rgba(151, 109, 255, 0.17)); border: 1px solid rgba(133, 222, 255, 0.21); border-radius: 12px; font-family: "Cinzel", Georgia, serif; font-size: 10px; font-weight: 900; }
.online-leaderboard-row--podium .online-leaderboard-avatar { width: 44px; height: 44px; border-radius: 14px; }

.online-leaderboard-main { min-width: 0; display: grid; gap: 4px; }
.online-leaderboard-main > strong { overflow: hidden; color: #fff; font-size: 10px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.online-leaderboard-main > small { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.online-leaderboard-main > small > span { max-width: 100%; overflow: hidden; padding: 3px 5px; color: var(--social-muted); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 999px; font-size: 6px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.online-leaderboard-time { min-width: 79px; display: grid; justify-items: end; gap: 2px; }
.online-leaderboard-time > small { color: var(--social-muted); font-size: 6px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.online-leaderboard-time > em { color: #fff0bb; font-family: ui-monospace, monospace; font-size: 11px; font-style: normal; font-weight: 900; }

.online-leaderboard-row--podium .online-leaderboard-rank { align-self: start; }
.online-leaderboard-row--podium .online-leaderboard-main { align-self: start; }
.online-leaderboard-row--podium .online-leaderboard-time { grid-column: 1 / -1; width: 100%; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.online-leaderboard-row--podium .online-leaderboard-time > em { font-size: 14px; }
.online-leaderboard-row--podium .online-leaderboard-avatar { display: none; }

.online-leaderboard-list { display: grid; gap: 6px; }
.online-leaderboard-no-results { min-height: 86px; }
.online-leaderboard-no-results[hidden] { display: none !important; }
.online-leaderboard-note { margin: 0; padding: 8px 14px 10px; color: rgba(214, 226, 245, 0.45); background: rgba(2, 7, 16, 0.54); border-top: 1px solid var(--social-line); font-size: 7px; font-weight: 700; line-height: 1.4; text-align: center; }

/* Social suite: phone landscape is the primary play surface. */
@media (max-height: 620px) and (orientation: landscape) {
  html.is-touch .online-player-action-overlay,
  html.is-touch .online-gift-overlay,
  html.is-touch .online-group-overlay,
  html.is-touch .online-leaderboard-overlay {
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  html.is-touch .online-social-shell { border-radius: 19px; }
  html.is-touch .online-social-shell::after { border-radius: 18px; }

  html.is-touch .online-social-head {
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    gap: 8px;
    min-height: 50px;
    padding: 6px 9px;
  }

  html.is-touch .online-social-head-icon { width: 38px; height: 38px; border-radius: 12px; transform: scale(0.86); }
  html.is-touch .online-social-head-copy h2 { margin-top: 3px; font-size: 17px; }
  html.is-touch .online-social-head-copy > small { margin-top: 2px; font-size: 7px; }
  html.is-touch .online-social-kicker { font-size: 7px; }
  html.is-touch .online-social-close { width: 39px; min-width: 39px; height: 39px; border-radius: 12px; }
  html.is-touch .online-social-close > span { font-size: 20px; }
  html.is-touch .online-social-close > small { font-size: 5px; }

  html.is-touch .online-player-action-card.online-social-shell,
  html.is-touch .online-gift-card.online-social-shell,
  html.is-touch .online-group-card.online-social-shell,
  html.is-touch .online-leaderboard-card.online-social-shell {
    width: calc(100vw - max(8px, env(safe-area-inset-left) + env(safe-area-inset-right)));
    height: calc(100dvh - max(8px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    max-height: none;
  }

  html.is-touch .online-player-dashboard-hero { gap: 11px; padding: 8px 11px; }
  html.is-touch .online-player-dashboard-avatar { width: 55px; height: 55px; border-radius: 18px; }
  html.is-touch .online-player-dashboard-avatar::before { inset: -4px; border-radius: 21px; }
  html.is-touch .online-player-dashboard-avatar::after { display: none; }
  html.is-touch .online-player-dashboard-avatar > span { font-size: 18px; }
  html.is-touch .online-player-dashboard-avatar > img { right: -7px; bottom: -6px; width: 28px; height: 28px; }
  html.is-touch .online-player-dashboard-id h2 { margin: 3px 0 4px; font-size: 19px; }
  html.is-touch .online-player-dashboard-badges { gap: 4px; }
  html.is-touch .online-player-presence,
  html.is-touch .online-player-party-state { min-height: 18px; padding: 2px 6px; font-size: 6px; }
  html.is-touch .online-player-prestige { min-height: 18px; margin-top: 4px; padding-block: 1px; }
  html.is-touch .online-player-prestige img { width: 14px; height: 14px; }
  html.is-touch .online-player-prestige span { font-size: 6px; }

  html.is-touch .online-player-dashboard-body { padding: 7px 9px 9px; }
  html.is-touch .online-player-dashboard-heading { align-items: center; margin-bottom: 6px; }
  html.is-touch .online-player-dashboard-heading span { font-size: 6px; }
  html.is-touch .online-player-dashboard-heading strong { font-size: 11px; }
  html.is-touch .online-player-dashboard-heading > small { max-width: 42%; font-size: 6px; }
  html.is-touch .online-player-action-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  html.is-touch .online-player-action-buttons > button { min-height: 65px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 7px; padding: 7px; border-radius: 11px; }
  html.is-touch .online-player-action-buttons > button > i { width: 32px; height: 32px; border-radius: 9px; }
  html.is-touch .online-player-action-buttons > button > i::before { font-size: 14px; }
  html.is-touch .online-player-action-buttons > button > i[data-icon="duo"]::before { font-size: 8px; }
  html.is-touch .online-player-action-buttons > button > span { gap: 2px; }
  html.is-touch .online-player-action-buttons > button > span > strong { font-size: 8px; }
  html.is-touch .online-player-action-buttons > button > span > small { font-size: 6px; }
  html.is-touch .online-player-action-buttons > button > b { font-size: 16px; }
  html.is-touch .online-player-dashboard-notice { margin-top: 5px; padding: 6px 8px; font-size: 7px; }

  html.is-touch .online-gift-card.online-social-shell { grid-template-rows: 50px 40px auto minmax(0, 1fr); }
  html.is-touch .online-gift-head-actions { gap: 5px; }
  html.is-touch .online-gift-refresh { min-height: 36px; padding-inline: 9px; border-radius: 11px; font-size: 6px; }
  html.is-touch .online-gift-refresh > i { width: 10px; height: 10px; }
  html.is-touch .online-gift-tabs { gap: 5px; padding: 4px 7px; }
  html.is-touch .online-gift-tabs > button { min-width: 105px; min-height: 31px; grid-template-columns: 19px minmax(0, 1fr) auto; gap: 5px; padding: 3px 6px; border-radius: 9px; font-size: 7px; }
  html.is-touch .online-gift-tabs > button > i { width: 18px; height: 18px; border-radius: 6px; }
  html.is-touch .online-gift-tabs > button > b { min-width: 18px; height: 16px; font-size: 6px; }
  html.is-touch .online-gift-notice,
  html.is-touch .online-gift-loading { margin: 4px 7px 0; padding: 5px 7px; font-size: 7px; }
  html.is-touch .online-gift-body { padding: 5px 7px 7px; }
  html.is-touch .online-gift-send-layout { grid-template-columns: minmax(195px, 0.77fr) minmax(290px, 1.23fr); gap: 6px; }
  html.is-touch .online-gift-recipient-panel,
  html.is-touch .online-gift-send-panel { gap: 6px; padding: 7px; border-radius: 12px; overflow-y: auto; }
  html.is-touch .online-gift-recipient-panel { display: flex; flex-direction: column; }
  html.is-touch .online-gift-panel-heading { grid-template-columns: 25px minmax(0, 1fr); gap: 6px; }
  html.is-touch .online-gift-panel-heading > span { width: 25px; height: 25px; border-radius: 8px; font-size: 6px; }
  html.is-touch .online-gift-panel-heading small { font-size: 5px; }
  html.is-touch .online-gift-panel-heading h3 { font-size: 9px; }
  html.is-touch .online-gift-code { min-height: 38px; padding: 5px 7px; }
  html.is-touch .online-gift-code > span { font-size: 5px; }
  html.is-touch .online-gift-code > strong { font-size: 7px; }
  html.is-touch .online-gift-lookup,
  html.is-touch .online-gift-monster-search { min-height: 34px; padding-block: 2px; }
  html.is-touch .online-gift-lookup input,
  html.is-touch .online-gift-monster-search input { height: 27px; font-size: 7px; }
  html.is-touch .online-gift-limit { padding: 5px 7px; }
  html.is-touch .online-gift-limit small,
  html.is-touch .online-gift-limit strong { font-size: 5px; }
  html.is-touch .online-gift-address-section { flex: 0 0 auto; min-height: 0; }
  html.is-touch .online-gift-address-list { max-height: 70px; }
  html.is-touch .online-gift-address { min-height: 37px; grid-template-columns: 25px minmax(0, 1fr) auto; gap: 5px; padding: 4px 5px; border-radius: 8px; }
  html.is-touch .online-gift-address-avatar { width: 25px; height: 25px; border-radius: 7px; font-size: 7px; }
  html.is-touch .online-gift-address-copy strong { font-size: 7px; }
  html.is-touch .online-gift-address-copy small { font-size: 5px; }
  html.is-touch .online-gift-recipient { grid-template-columns: 31px minmax(0, 1fr); gap: 6px; padding: 5px 7px; border-radius: 9px; }
  html.is-touch .online-gift-recipient-avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 8px; }
  html.is-touch .online-gift-recipient small { font-size: 5px; }
  html.is-touch .online-gift-recipient strong { font-size: 7px; }
  html.is-touch .online-gift-recipient em { font-size: 5px; }
  html.is-touch .online-gift-field-grid { grid-template-columns: minmax(0, 1fr) minmax(105px, 0.65fr); gap: 5px; }
  html.is-touch .online-gift-field { gap: 3px; }
  html.is-touch .online-gift-field > span,
  html.is-touch .online-gift-check > span { font-size: 5px; }
  html.is-touch .online-gift-field input,
  html.is-touch .online-gift-field select { height: 30px; padding-inline: 7px; font-size: 7px; border-radius: 8px; }
  html.is-touch .online-gift-check { min-height: 17px; }
  html.is-touch .online-gift-check input { width: 12px; height: 12px; }
  html.is-touch .online-gift-monster-picker { flex: 0 0 135px; min-height: 135px; }
  html.is-touch .online-gift-monster-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  html.is-touch .online-gift-monster-option { min-height: 49px; grid-template-columns: 38px minmax(0, 1fr); gap: 5px; padding: 4px; border-radius: 8px; }
  html.is-touch .online-gift-monster-option-art { width: 38px; height: 38px; border-radius: 7px; }
  html.is-touch .online-gift-monster-option-copy strong { font-size: 7px; }
  html.is-touch .online-gift-monster-option-copy small { font-size: 5px; }
  html.is-touch .online-gift-submit,
  html.is-touch .online-gift-confirm { gap: 6px; padding: 5px 7px; border-radius: 9px; }
  html.is-touch .online-gift-submit span,
  html.is-touch .online-gift-confirm span { font-size: 5px; }
  html.is-touch .online-gift-submit strong,
  html.is-touch .online-gift-confirm strong { font-size: 7px; }
  html.is-touch .online-gift-submit > button { min-width: 92px; height: 31px; min-height: 31px; font-size: 6px; }
  html.is-touch .online-gift-body:not(.online-gift-body--send) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  html.is-touch .online-gift-row { gap: 5px; padding: 7px; border-radius: 11px; }
  html.is-touch .online-gift-row-avatar { width: 29px; height: 29px; border-radius: 9px; font-size: 8px; }
  html.is-touch .online-gift-row-person > span { font-size: 5px; }
  html.is-touch .online-gift-row-person > strong { font-size: 8px; }
  html.is-touch .online-gift-status { padding: 3px 5px; font-size: 5px; }
  html.is-touch .online-gift-row-main .online-trade-monster { min-height: 58px; grid-template-columns: 52px minmax(0, 1fr); }
  html.is-touch .online-gift-row-main .online-trade-monster-art { min-height: 47px; }
  html.is-touch .online-gift-row-footer { align-items: center; }
  html.is-touch .online-gift-meta,
  html.is-touch .online-gift-row-hint { font-size: 5px; }
  html.is-touch .online-gift-row-actions > button { min-height: 27px; padding-inline: 7px; font-size: 5px; }

  html.is-touch .online-group-card.online-social-shell { grid-template-rows: 50px minmax(0, 1fr) 47px; }
  html.is-touch .online-group-dashboard { grid-template-columns: minmax(0, 1.25fr) minmax(205px, 0.75fr); gap: 6px; padding: 6px; }
  html.is-touch .online-group-roster-panel,
  html.is-touch .online-group-command-panel { padding: 7px; border-radius: 12px; }
  html.is-touch .online-group-roster-panel > header { padding-bottom: 5px; }
  html.is-touch .online-group-roster-panel > header > span { font-size: 6px; }
  html.is-touch .online-group-member { min-height: 48px; grid-template-columns: 31px minmax(0, 1fr) auto auto auto; gap: 5px; padding: 5px 6px; border-radius: 9px; }
  html.is-touch .online-group-member-avatar { width: 31px; height: 31px; border-radius: 9px; font-size: 8px; }
  html.is-touch .online-group-member-name > strong { font-size: 8px; }
  html.is-touch .online-group-member-name > span { padding: 2px 4px; font-size: 4px; }
  html.is-touch .online-group-member-main > small { font-size: 5px; }
  html.is-touch .online-group-member-state { gap: 4px; font-size: 5px; }
  html.is-touch .online-group-member-mute,
  html.is-touch .online-group-member-block { min-height: 24px; padding-inline: 6px; border-radius: 7px; font-size: 5px; }
  html.is-touch .online-group-readiness { gap: 7px; padding: 6px; border-radius: 10px; }
  html.is-touch .online-group-ready-ring { width: 48px; height: 48px; padding: 4px; }
  html.is-touch .online-group-ready-ring > i { padding-top: 10px; }
  html.is-touch .online-group-ready-ring strong { font-size: 14px; }
  html.is-touch .online-group-ready-ring small { font-size: 6px; }
  html.is-touch .online-group-readiness > div > span { font-size: 5px; }
  html.is-touch .online-group-readiness > div > strong { font-size: 8px; }
  html.is-touch .online-group-notice,
  html.is-touch .online-group-reward-note { gap: 5px; padding: 6px; border-radius: 9px; }
  html.is-touch .online-group-notice p,
  html.is-touch .online-group-reward-note p { font-size: 6px; line-height: 1.35; }
  html.is-touch .online-group-actions { grid-template-columns: minmax(90px, 0.35fr) minmax(150px, 0.65fr); gap: 6px; padding: 5px 7px; }
  html.is-touch .online-group-actions > button { min-height: 36px; border-radius: 10px; font-size: 6px; }

  html.is-touch .online-group-invite-card.online-social-shell { min-height: 0; grid-template-columns: minmax(190px, 0.76fr) minmax(300px, 1.24fr); grid-template-rows: 1fr; }
  html.is-touch .online-group-invite-visual { min-height: 0; }
  html.is-touch .online-group-invite-visual > span { width: 72px; height: 72px; border-radius: 23px; font-size: 21px; }
  html.is-touch .online-group-invite-copy { padding: 12px 16px; }
  html.is-touch .online-group-invite-copy h2 { margin: 5px 0 7px; font-size: 25px; }
  html.is-touch .online-group-invite-copy > p { font-size: 8px; }
  html.is-touch .online-group-invite-stats { gap: 5px; margin-top: 9px; }
  html.is-touch .online-group-invite-stats > span { min-height: 52px; grid-template-columns: 24px minmax(0, 1fr); column-gap: 6px; padding: 6px; border-radius: 9px; }
  html.is-touch .online-group-invite-stats i { width: 24px; height: 24px; border-radius: 7px; }
  html.is-touch .online-group-invite-stats b { font-size: 8px; }
  html.is-touch .online-group-invite-stats small { font-size: 5px; }
  html.is-touch .online-group-invite-actions { gap: 6px; margin-top: 9px; }
  html.is-touch .online-group-invite-actions > button { min-height: 36px; border-radius: 9px; font-size: 6px; }

  html.is-touch .online-group-invite-card.online-social-shell { width: min(680px, calc(100vw - 12px)); height: auto; max-height: calc(100dvh - 12px); grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 0; padding: 0; overflow: hidden; }
  html.is-touch .online-group-invite-head { grid-template-columns: 44px minmax(0, 1fr) minmax(128px, 0.68fr); gap: 7px; padding: 7px 9px; }
  html.is-touch .online-group-invite-avatar { width: 41px; height: 41px; border-radius: 13px; }
  html.is-touch .online-group-invite-avatar > b { font-size: 10px; }
  html.is-touch .online-group-invite-avatar > i { width: 10px; height: 10px; border-width: 2px; }
  html.is-touch .online-group-invite-identity .online-social-kicker { margin-bottom: 2px; }
  html.is-touch .online-group-invite-identity h2 { font-size: 15px; }
  html.is-touch .online-group-invite-identity > small { margin-top: 2px; font-size: 5px; }
  html.is-touch .online-group-invite-prestige { min-height: 40px; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 5px; padding: 4px 5px; border-radius: 10px; }
  html.is-touch .online-group-invite-prestige-mark { width: 28px; height: 28px; border-radius: 8px; font-size: 7px; }
  html.is-touch .online-group-invite-prestige-copy > small,
  html.is-touch .online-group-invite-prestige > em { font-size: 4px; }
  html.is-touch .online-group-invite-prestige-copy > strong { font-size: 8px; }
  html.is-touch .online-group-invite-prestige-copy > span { font-size: 5px; }
  html.is-touch .online-group-invite-copy { display: grid; grid-template-columns: minmax(150px, 0.78fr) minmax(260px, 1.22fr); align-items: center; gap: 8px; padding: 7px 9px; }
  html.is-touch .online-group-invite-copy > div:first-child > span { margin-bottom: 2px; font-size: 4px; }
  html.is-touch .online-group-invite-copy h3 { margin-bottom: 4px; font-size: 17px; }
  html.is-touch .online-group-invite-copy p { font-size: 6px; line-height: 1.35; }
  html.is-touch .online-group-invite-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
  html.is-touch .online-group-invite-stats > span { min-height: 40px; grid-template-columns: 21px minmax(0, 1fr); column-gap: 4px; padding: 4px; border-radius: 8px; }
  html.is-touch .online-group-invite-stats i { width: 21px; height: 21px; border-radius: 6px; }
  html.is-touch .online-group-invite-stats i::before { font-size: 8px; }
  html.is-touch .online-group-invite-stats b { font-size: 6px; }
  html.is-touch .online-group-invite-stats small { font-size: 4px; }
  html.is-touch .online-group-invite-actions { gap: 6px; margin: 0; padding: 6px 9px 7px; }
  html.is-touch .online-group-invite-actions > button { min-height: 34px; }

  html.is-touch .online-leaderboard-card.online-social-shell { grid-template-rows: 50px 45px minmax(0, 1fr) auto; }
  html.is-touch .online-leaderboard-updated { max-width: 130px; padding: 4px 6px; font-size: 5px; }
  html.is-touch .online-leaderboard-toolbar { grid-template-columns: minmax(0, 1fr) minmax(160px, 0.46fr); gap: 6px; padding: 5px 7px; }
  html.is-touch .online-leaderboard-category-wrap { gap: 2px; }
  html.is-touch .online-leaderboard-category-wrap > span { display: none; }
  html.is-touch .online-leaderboard-categories > button { min-width: 110px; min-height: 30px; height: 30px; padding-inline: 7px; border-radius: 8px; }
  html.is-touch .online-leaderboard-categories > button > span { font-size: 6px; }
  html.is-touch .online-leaderboard-categories > button > b { min-width: 18px; height: 16px; font-size: 5px; }
  html.is-touch .online-leaderboard-search { min-height: 30px; height: 30px; padding-block: 2px; }
  html.is-touch .online-leaderboard-search input { height: 25px; font-size: 6px; }
  html.is-touch .online-leaderboard-search > button { min-width: 28px; min-height: 26px; height: 26px; padding-inline: 6px; }
  html.is-touch .online-leaderboard-content { padding: 5px 7px; }
  html.is-touch .online-leaderboard-focus { gap: 5px; }
  html.is-touch .online-leaderboard-focus > header > div > span { font-size: 5px; }
  html.is-touch .online-leaderboard-focus > header h3 { font-size: 13px; }
  html.is-touch .online-leaderboard-focus > header > span > strong { font-size: 12px; }
  html.is-touch .online-leaderboard-focus > header > span > small { font-size: 5px; }
  html.is-touch .online-leaderboard-focus > p { display: none; }
  html.is-touch .online-leaderboard-podium { gap: 5px; }
  html.is-touch .online-leaderboard-row--podium { min-height: 88px; padding: 7px; border-radius: 9px; }
  html.is-touch .online-leaderboard-row--podium .online-leaderboard-rank > strong { font-size: 14px; }
  html.is-touch .online-leaderboard-main > strong { font-size: 7px; }
  html.is-touch .online-leaderboard-main > small { gap: 2px; }
  html.is-touch .online-leaderboard-main > small > span { padding: 2px 3px; font-size: 4px; }
  html.is-touch .online-leaderboard-row--podium .online-leaderboard-time { padding-top: 4px; }
  html.is-touch .online-leaderboard-row--podium .online-leaderboard-time > em { font-size: 9px; }
  html.is-touch .online-leaderboard-list { gap: 4px; }
  html.is-touch .online-leaderboard-row { grid-template-columns: 33px 29px minmax(0, 1fr) auto; gap: 5px; padding: 5px 7px; border-radius: 9px; }
  html.is-touch .online-leaderboard-avatar { width: 29px; height: 29px; border-radius: 8px; font-size: 7px; }
  html.is-touch .online-leaderboard-rank > small,
  html.is-touch .online-leaderboard-time > small { font-size: 4px; }
  html.is-touch .online-leaderboard-rank > strong { font-size: 8px; }
  html.is-touch .online-leaderboard-time { min-width: 60px; }
  html.is-touch .online-leaderboard-time > em { font-size: 7px; }
  html.is-touch .online-leaderboard-note { padding: 4px 8px 5px; font-size: 5px; }
}

/* Portrait phones stack the work surfaces but keep the card fixed and the
   content independently scrollable. */
@media (max-width: 700px) and (orientation: portrait) {
  html.is-touch .online-player-action-overlay,
  html.is-touch .online-gift-overlay,
  html.is-touch .online-group-overlay,
  html.is-touch .online-leaderboard-overlay { padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }

  html.is-touch .online-player-action-card.online-social-shell,
  html.is-touch .online-gift-card.online-social-shell,
  html.is-touch .online-group-card.online-social-shell,
  html.is-touch .online-leaderboard-card.online-social-shell { width: calc(100vw - 12px); height: calc(100dvh - 12px); max-height: none; border-radius: 22px; }

  html.is-touch .online-social-head { grid-template-columns: 43px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
  html.is-touch .online-social-head-icon { width: 43px; height: 43px; border-radius: 14px; transform: scale(0.9); }
  html.is-touch .online-social-head-copy h2 { font-size: 20px; }
  html.is-touch .online-social-close { width: 43px; min-width: 43px; height: 43px; border-radius: 13px; }

  html.is-touch .online-player-dashboard-hero { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; padding: 13px 11px; }
  html.is-touch .online-player-dashboard-avatar { width: 58px; height: 58px; border-radius: 19px; }
  html.is-touch .online-player-dashboard-avatar::after { display: none; }
  html.is-touch .online-player-dashboard-id h2 { font-size: 21px; }
  html.is-touch .online-player-prestige { max-width: 96%; }
  html.is-touch .online-player-dashboard-body { padding: 10px; }
  html.is-touch .online-player-dashboard-heading { align-items: center; }
  html.is-touch .online-player-dashboard-heading > small { max-width: 48%; font-size: 7px; }
  html.is-touch .online-player-action-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  html.is-touch .online-player-action-buttons > button { min-height: 84px; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; padding: 9px; border-radius: 13px; }
  html.is-touch .online-player-action-buttons > button > i { width: 38px; height: 38px; border-radius: 11px; }
  html.is-touch .online-player-action-buttons > button > b { display: none; }
  html.is-touch .online-player-action-buttons > button > span > strong { font-size: 10px; }
  html.is-touch .online-player-action-buttons > button > span > small { font-size: 7px; }

  html.is-touch .online-gift-head { grid-template-columns: 43px minmax(0, 1fr) auto; }
  html.is-touch .online-gift-head-actions { gap: 5px; }
  html.is-touch .online-gift-refresh { width: 43px; min-width: 43px; height: 43px; justify-content: center; padding: 0; border-radius: 13px; }
  html.is-touch .online-gift-refresh > span { display: none; }
  html.is-touch .online-gift-tabs { padding: 6px 8px; }
  html.is-touch .online-gift-tabs > button { min-width: 104px; }
  html.is-touch .online-gift-body { padding: 8px; }
  html.is-touch .online-gift-body:not(.online-gift-body--send) { grid-template-columns: 1fr; }
  html.is-touch .online-gift-send-layout { display: flex; flex-direction: column; min-height: 0; }
  html.is-touch .online-gift-recipient-panel,
  html.is-touch .online-gift-send-panel { flex: 0 0 auto; overflow: visible; padding: 10px; border-radius: 15px; }
  html.is-touch .online-gift-recipient-panel { display: flex; flex-direction: column; }
  html.is-touch .online-gift-address-list { max-height: 150px; }
  html.is-touch .online-gift-monster-picker { min-height: 330px; flex-basis: 330px; }
  html.is-touch .online-gift-monster-list { grid-template-columns: 1fr; }
  html.is-touch .online-gift-field-grid { grid-template-columns: 1fr; }

  html.is-touch .online-group-card.online-social-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
  html.is-touch .online-group-dashboard { display: block; padding: 8px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  html.is-touch .online-group-roster-panel { min-height: 300px; margin-bottom: 8px; }
  html.is-touch .online-group-command-panel { overflow: visible; }
  html.is-touch .online-group-actions { grid-template-columns: 0.7fr 1.3fr; padding: 8px; }
  html.is-touch .online-group-invite-card.online-social-shell { width: calc(100vw - 12px); height: auto; min-height: 0; max-height: calc(100dvh - 12px); grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow: hidden; }
  html.is-touch .online-group-invite-head { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 9px 10px; }
  html.is-touch .online-group-invite-avatar { width: 45px; height: 45px; border-radius: 14px; }
  html.is-touch .online-group-invite-identity h2 { font-size: 18px; }
  html.is-touch .online-group-invite-prestige { grid-column: 1 / -1; min-height: 41px; }
  html.is-touch .online-group-invite-copy { display: block; padding: 9px 10px 8px; }
  html.is-touch .online-group-invite-copy h3 { font-size: 20px; }
  html.is-touch .online-group-invite-stats { margin-top: 8px; }
  html.is-touch .online-group-invite-actions { padding: 7px 9px 9px; }

  html.is-touch .online-leaderboard-head { grid-template-columns: 43px minmax(0, 1fr) auto; }
  html.is-touch .online-leaderboard-updated { display: none; }
  html.is-touch .online-leaderboard-toolbar { grid-template-columns: 1fr; gap: 7px; padding: 7px 9px; }
  html.is-touch .online-leaderboard-categories > button { min-width: 128px; }
  html.is-touch .online-leaderboard-content { padding: 9px; }
  html.is-touch .online-leaderboard-podium { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 82%); grid-template-columns: none; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; }
  html.is-touch .online-leaderboard-podium::-webkit-scrollbar { display: none; }
  html.is-touch .online-leaderboard-row--podium { min-height: 120px; }
  html.is-touch .online-leaderboard-row { grid-template-columns: 42px 35px minmax(0, 1fr); }
  html.is-touch .online-leaderboard-row:not(.online-leaderboard-row--podium) .online-leaderboard-time { grid-column: 3; justify-items: start; margin-top: 3px; }
  html.is-touch .online-leaderboard-note { font-size: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .online-social-ambient > i,
  .online-group-member,
  .online-group-invite-visual::before,
  .online-group-invite-visual > i,
  .online-gift-loading > i,
  .online-leaderboard-loading > span > i { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* Earlier touch rules collapse lookup forms into a single column. The social
   composer keeps its icon, field and explicit action on one stable row. */
html.is-touch .online-gift-lookup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

html.is-touch .online-gift-lookup > button {
  width: auto;
  min-width: 48px;
  height: 31px;
  margin: 0;
}

html.is-touch .online-leaderboard-row--podium {
  grid-template-columns: auto minmax(0, 1fr);
}

/* Gift performance + containment pass. The status slot owns a stable grid
   row so the main scroller never jumps into an auto-sized track after load. */
.online-gift-card.online-social-shell {
  grid-template-areas:
    "gift-head"
    "gift-tabs"
    "gift-status"
    "gift-body";
}

.online-gift-head {
  grid-area: gift-head;
  width: 100%;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  box-sizing: border-box;
  overflow: hidden;
}

.online-gift-head > .online-gift-refresh,
.online-gift-head > .online-social-close {
  position: relative;
  z-index: 1;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.online-gift-tabs { grid-area: gift-tabs; }
.online-gift-status-slot { grid-area: gift-status; min-width: 0; min-height: 0; overflow: hidden; }
.online-gift-body { grid-area: gift-body; min-width: 0; }

.online-gift-refresh.is-syncing > i { animation: socialSpin 0.75s linear infinite; }

.online-gift-skeleton {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
}

.online-gift-skeleton > i {
  min-height: 170px;
  border: 1px solid rgba(151, 206, 248, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.07) 46%, transparent 62%) 180% 0 / 220% 100% no-repeat,
    linear-gradient(135deg, rgba(106, 223, 255, 0.055), rgba(255, 137, 204, 0.035)),
    rgba(255, 255, 255, 0.025);
  animation: giftSkeletonSweep 1.45s ease-in-out infinite;
}

@keyframes giftSkeletonSweep { to { background-position: -80% 0, 0 0, 0 0; } }

.online-gift-lookup {
  width: 100%;
  max-width: 100%;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  box-sizing: border-box;
  overflow: hidden;
}

.online-gift-lookup input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.online-gift-lookup > button {
  width: auto;
  min-width: 48px;
  max-width: 72px;
  justify-self: end;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-gift-monster-option {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 65px;
}

.online-gift-monster-option-art img:not([src]) { opacity: 0; }
.online-gift-monster-option-art img[src] { opacity: 1; transition: opacity 0.2s ease; }

.online-gift-monster-more {
  grid-column: 1 / -1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #dffaff;
  background: rgba(93, 214, 246, 0.07);
  border: 1px solid rgba(109, 225, 255, 0.16);
  border-radius: 11px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.online-gift-monster-more > small {
  min-width: 25px;
  padding: 3px 6px;
  color: var(--social-cyan);
  background: rgba(109, 233, 255, 0.09);
  border-radius: 999px;
  font-size: 7px;
}

@media (max-height: 620px) and (orientation: landscape) {
  html.is-touch .online-gift-head {
    grid-template-columns: 40px minmax(0, 1fr) auto 39px;
  }

  html.is-touch .online-gift-lookup {
    grid-template-columns: 11px minmax(0, 1fr) 48px;
    gap: 5px;
    padding-inline: 8px 3px;
  }

  html.is-touch .online-gift-lookup > button {
    width: 48px;
    min-width: 0;
    max-width: 48px;
    padding-inline: 4px;
  }

  html.is-touch .online-gift-skeleton { gap: 6px; }
  html.is-touch .online-gift-skeleton > i { min-height: 115px; border-radius: 11px; }
  html.is-touch .online-gift-monster-more { min-height: 30px; border-radius: 8px; font-size: 6px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  html.is-touch .online-gift-head {
    grid-template-columns: 43px minmax(0, 1fr) 43px 43px;
    gap: 6px;
  }

  html.is-touch .online-gift-head > .online-social-close > small {
    max-width: 35px;
    overflow: hidden;
    font-size: 5px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  html.is-touch .online-gift-skeleton { grid-template-columns: 1fr; gap: 8px; }
  html.is-touch .online-gift-skeleton > i { min-height: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  .online-gift-refresh.is-syncing > i,
  .online-gift-skeleton > i { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .online-gift-monster-option-art img { transition: none; }
}

/* Party Rift portal ------------------------------------------------------- */
.rift-card--group {
  width: min(1120px, calc(100vw - 28px));
}

.rift-card--group .rift-head-text {
  flex: 1 1 auto;
}

.rift-card--group .rift-body {
  display: grid;
  grid-template-columns: minmax(330px, 0.92fr) minmax(430px, 1.08fr);
  align-items: stretch;
}

.rift-card--group .rift-lobby,
.rift-card--group .rift-tier-section {
  min-height: 0;
}

.rift-card--group .rift-tier-section {
  overflow: hidden;
}

.rift-card--group .rift-tier-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: min(510px, calc(100dvh - 255px));
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.rift-lobby-clock {
  --rift-lobby-progress: 0%;
  position: relative;
  flex: 0 0 min(235px, 28vw);
  min-width: 175px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  overflow: hidden;
  padding: 8px 10px 11px;
  border: 1px solid rgba(115, 234, 255, 0.26);
  border-radius: 10px;
  background: rgba(6, 12, 24, 0.78);
}

.rift-lobby-clock::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--rift-lobby-progress);
  height: 3px;
  background: linear-gradient(90deg, #73eaff, #a96cff);
  transition: width 0.25s linear, background 0.2s ease;
}

.rift-lobby-clock > span {
  color: rgba(231, 238, 252, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rift-lobby-clock > strong {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-width: 3.25ch;
  color: #dffcff;
  font-size: 1.42rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rift-lobby-clock > small {
  overflow-wrap: anywhere;
  color: rgba(231, 238, 252, 0.58);
  font-size: 0.61rem;
  line-height: 1.15;
}

.rift-lobby-clock:has(.is-urgent)::after,
.rift-lobby-clock:has(.is-expired)::after {
  background: linear-gradient(90deg, #ffce68, #ff647c);
}

.rift-lobby-clock .is-urgent {
  color: #ffd47a;
  animation: rift-lobby-urgent 0.8s ease-in-out infinite alternate;
}

.rift-lobby-clock .is-expired {
  color: #ff8fa1;
}

@keyframes rift-lobby-urgent {
  to { filter: drop-shadow(0 0 7px rgba(255, 100, 124, 0.72)); }
}

.rift-party-status {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(169, 108, 255, 0.22);
  border-radius: 9px;
  background: rgba(9, 10, 24, 0.58);
}

.rift-party-status ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rift-party-status li {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(5, 9, 18, 0.68);
}

.rift-party-status li > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(115, 234, 255, 0.24), rgba(169, 108, 255, 0.3));
  color: #f8fdff;
  font-weight: 950;
}

.rift-party-status li > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.rift-party-status li > div strong,
.rift-party-status li > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rift-party-status li > div strong {
  font-size: 0.72rem;
}

.rift-party-status li > div small {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rift-party-status li > em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(231, 238, 252, 0.68);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.rift-party-status li > em i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd36e;
  box-shadow: 0 0 6px rgba(255, 211, 110, 0.42);
}

.rift-party-status li.is-ready > em,
.rift-party-status li.is-auto > em {
  color: #bff8dc;
}

.rift-party-status li.is-ready > em i,
.rift-party-status li.is-auto > em i {
  background: #6af0b0;
  box-shadow: 0 0 7px rgba(106, 240, 176, 0.5);
}

.rift-team-pick {
  grid-template-columns: 42px minmax(0, 1fr) 22px;
}

.rift-team-check {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(115, 234, 255, 0.28);
  border-radius: 50%;
  color: transparent;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 950;
}

.rift-team-pick.selected .rift-team-check {
  border-color: rgba(115, 234, 255, 0.72);
  background: linear-gradient(135deg, #73eaff, #a96cff);
  color: #06111d;
}

.rift-lobby-actions {
  display: flex;
  gap: 8px;
}

.rift-lobby-actions > button {
  min-height: 44px;
}

.rift-lobby-actions #riftChangeSquad {
  flex: 0 0 auto;
  padding-inline: 14px;
  border: 1px solid rgba(115, 234, 255, 0.3);
  background: rgba(9, 17, 31, 0.82);
  color: #eafcff;
  font-weight: 900;
}

.rift-lobby-actions #riftStartPrivate {
  flex: 1 1 auto;
}

.rift-footer-actions {
  position: sticky;
  bottom: -1px;
  z-index: 4;
  margin: 0 -4px -4px;
  padding: 8px 4px 4px;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 18, 0.96) 30%);
}

.rift-footer-actions button,
.rift-tier button,
#closeRiftTiers {
  min-height: 44px;
}

.modal.clean-world-modal .modal-card.rift-card .rift-footer-actions .danger {
  margin-right: auto;
  border-color: rgba(255, 100, 124, 0.42);
  background: rgba(112, 25, 44, 0.34);
  color: #ffdce2;
}

.rift-card button:focus-visible {
  outline: 3px solid rgba(255, 224, 118, 0.92);
  outline-offset: 2px;
}

@media (max-width: 860px), (orientation: portrait) {
  .rift-card--group .rift-body {
    grid-template-columns: 1fr;
  }

  .rift-card--group .rift-tier-section,
  .rift-card--group .rift-tier-grid {
    overflow: visible;
    max-height: none;
  }

  .rift-lobby-clock {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .rift-party-status ul {
    grid-template-columns: 1fr;
  }

  .rift-lobby-actions {
    flex-direction: column;
  }

  .rift-footer-actions button {
    flex: 1 1 100%;
  }
}

@media (max-width: 960px) and (max-height: 480px) and (orientation: landscape), (pointer: coarse) and (max-height: 480px) and (orientation: landscape) {
  html.is-touch .modal.clean-world-modal .rift-card--group .rift-head {
    align-items: stretch;
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-head-text p,
  html.is-touch .modal.clean-world-modal .rift-card--group > .rift-intro-copy {
    display: none;
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-lobby-clock {
    flex: 0 0 180px;
    min-width: 160px;
    padding: 5px 8px 8px;
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-lobby-clock > strong {
    font-size: 1.12rem;
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-body {
    grid-template-columns: minmax(300px, 0.96fr) minmax(340px, 1.04fr);
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-lobby {
    display: flex;
    overflow: auto;
  }

  html.is-touch .modal.clean-world-modal .rift-card--group .rift-party-status ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html.is-touch .modal.clean-world-modal #closeRiftTiers,
  html.is-touch .modal.clean-world-modal #riftStartPrivate,
  html.is-touch .modal.clean-world-modal .rift-lobby-actions > button,
  html.is-touch .modal.clean-world-modal .rift-tier button,
  html.is-touch .modal.clean-world-modal .rift-footer-actions button,
  html.is-touch .modal.clean-world-modal .rift-team-pick {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rift-lobby-clock .is-urgent {
    animation: none;
  }
}

/* ===== Armory: contained equipment manager ================================
   The generic workshop landscape grid shrinks its implicit rows to the fixed
   modal height. Armory action bars then paint outside those rows and collide
   with the cards below. Keep the two Armory collections in their own scrolling
   panels so every row contributes its real height at every mobile ratio. */
.modal.clean-world-modal .land-armory-card {
  --armory-ink: #17231d;
  --armory-muted: #5f6f66;
  --armory-line: rgba(32, 73, 54, 0.16);
  --armory-green: #2f7256;
  --armory-green-dark: #20513d;
  --armory-gold: #b67a2d;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.7fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  color: var(--armory-ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(113, 181, 142, 0.17), transparent 34%),
    linear-gradient(145deg, rgba(253, 254, 251, 0.98), rgba(238, 244, 239, 0.97));
  border-color: rgba(30, 67, 51, 0.2);
}

.modal.world-map-modal.land-workshop-modal .land-armory-card.land-workshop-card {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.7fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  padding: clamp(9px, 1.25vw, 14px);
  overflow: hidden;
}

.land-armory-header {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 1px 54px 1px 3px;
}

.land-armory-heading {
  min-width: 0;
}

.modal.clean-world-modal .land-armory-heading h2,
.land-workshop-card.land-armory-card .land-armory-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--armory-ink);
  font-family: inherit;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.025em;
}

.modal.clean-world-modal .land-armory-heading > p,
.land-workshop-card.land-armory-card .land-armory-heading > p {
  margin: 4px 0 0;
  color: var(--armory-muted) !important;
  font-size: clamp(0.68rem, 0.85vw, 0.78rem);
  line-height: 1.2;
}

.land-armory-summary {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.land-armory-summary > span {
  min-width: 76px;
  display: grid;
  align-content: center;
  gap: 1px;
  padding: 5px 9px;
  color: var(--armory-muted);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--armory-line);
  border-radius: 9px;
  font-size: 0.61rem;
  font-weight: 850;
  line-height: 1.05;
  text-align: center;
}

.land-armory-summary strong {
  color: var(--armory-green-dark);
  font-size: 0.85rem;
  font-weight: 950;
}

.land-armory-section {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--armory-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.57);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 7px 20px rgba(28, 58, 44, 0.07);
}

.land-armory-section--equipped {
  grid-column: 1;
}

.land-armory-section--owned {
  grid-column: 2;
}

.land-armory-section-heading {
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--armory-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(234, 242, 236, 0.7));
}

.land-armory-section-heading h3 {
  margin: 0;
  color: var(--armory-green-dark);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.085em;
  line-height: 1;
  text-transform: uppercase;
}

.land-armory-section-heading > span {
  padding: 2px 7px;
  color: var(--armory-muted);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--armory-line);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
}

.land-armory-slots,
.land-armory-inventory {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 114, 86, 0.42) transparent;
}

.land-armory-slots {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  padding: 8px;
}

.land-armory-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  padding: 8px;
}

.modal.clean-world-modal .land-armory-card .shop-row.gear-row {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-color: rgba(33, 73, 55, 0.14);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 245, 0.9)),
    #fff;
  box-shadow: 0 3px 10px rgba(25, 54, 41, 0.055);
}

.modal.clean-world-modal .land-armory-card .gear-icon-slot {
  width: 36px;
  height: 36px;
  border-color: rgba(41, 88, 66, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), transparent 68%),
    rgba(224, 236, 228, 0.78);
}

.modal.clean-world-modal .land-armory-card .gear-icon {
  width: 32px;
  height: 32px;
}

.modal.clean-world-modal .land-armory-card .gear-row-main {
  min-width: 0;
}

.modal.clean-world-modal .land-armory-card .gear-row-main > strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--armory-ink);
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal.clean-world-modal .land-armory-card .gear-row-main > .monster-meta {
  min-width: 0;
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--armory-muted) !important;
  font-size: 0.63rem;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal.clean-world-modal .land-armory-card .land-armory-slot {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px;
}

.modal.clean-world-modal .land-armory-card .land-armory-slot.is-empty {
  opacity: 0.72;
  border-style: dashed;
}

.modal.clean-world-modal .land-armory-card .land-armory-slot > button {
  min-width: 66px;
  min-height: 32px;
  padding: 5px 8px;
  color: #45534b;
  background: rgba(239, 243, 240, 0.92);
  border-color: rgba(45, 69, 57, 0.18);
  font-size: 0.66rem;
  line-height: 1.05;
  white-space: normal;
}

.modal.clean-world-modal .land-armory-card .land-armory-item {
  align-self: start;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 8px;
  padding: 8px;
}

.modal.clean-world-modal .land-armory-card .land-armory-item.is-equipped {
  border-color: rgba(47, 114, 86, 0.37);
  background:
    linear-gradient(135deg, rgba(242, 253, 247, 0.98), rgba(232, 244, 236, 0.94)),
    #fff;
  box-shadow: inset 3px 0 0 var(--armory-green), 0 4px 12px rgba(25, 78, 51, 0.08);
}

.land-armory-item-tags {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

.land-armory-item-tags > span {
  max-width: 100%;
  padding: 2px 5px;
  overflow: hidden;
  color: #59675f;
  background: rgba(225, 232, 227, 0.8);
  border-radius: 999px;
  font-size: 0.54rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.land-armory-item-tags > span.is-equipped {
  color: #194d36;
  background: rgba(103, 190, 142, 0.24);
}

.modal.clean-world-modal .land-armory-card .land-armory-actions {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
  justify-self: stretch;
}

.modal.clean-world-modal .land-armory-card .land-armory-actions button {
  min-width: 0;
  min-height: 32px;
  height: auto;
  padding: 5px 4px;
  overflow: hidden;
  color: #33453b;
  background: rgba(239, 244, 240, 0.94);
  border-color: rgba(45, 77, 61, 0.18);
  font-size: 0.61rem;
  font-weight: 900;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.modal.clean-world-modal .land-armory-card .land-armory-actions [data-equip] {
  color: #fff;
  background: linear-gradient(180deg, var(--armory-green), var(--armory-green-dark));
  border-color: var(--armory-green-dark);
}

.modal.clean-world-modal .land-armory-card .land-armory-actions [data-awaken] {
  color: #4b2e0b;
  background: linear-gradient(180deg, #f4d78c, #dfad53);
  border-color: rgba(148, 94, 25, 0.4);
}

.modal.clean-world-modal .land-armory-card .land-armory-actions [data-fuse] {
  color: #17433b;
  background: linear-gradient(180deg, #d9f0e9, #b8dfd1);
  border-color: rgba(31, 103, 83, 0.28);
}

.modal.clean-world-modal .land-armory-card .land-armory-actions button:disabled {
  filter: saturate(0.25);
  opacity: 0.58;
}

.land-armory-empty {
  grid-column: 1 / -1;
  align-self: start;
  margin: 0;
  padding: 18px;
  text-align: center;
}

.modal.clean-world-modal .land-armory-card .land-armory-footer,
.land-workshop-card.land-armory-card .land-armory-footer {
  grid-column: 1 / -1;
  position: static;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

.modal.clean-world-modal .land-armory-card .land-armory-footer button {
  min-width: 112px;
  min-height: 34px;
  padding: 6px 12px;
  color: #34463c;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(40, 75, 57, 0.22);
  font-size: 0.7rem;
}

.modal.clean-world-modal .land-armory-card .land-armory-footer #armoryForge {
  color: #fff;
  background: linear-gradient(180deg, var(--armory-green), var(--armory-green-dark));
  border-color: var(--armory-green-dark);
}

@media (max-width: 720px) and (orientation: portrait) {
  .modal.clean-world-modal .land-armory-card,
  .modal.world-map-modal.land-workshop-modal .land-armory-card.land-workshop-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(260px, 1fr) auto;
    gap: 8px;
    overflow: hidden;
  }

  .land-armory-section--equipped,
  .land-armory-section--owned {
    grid-column: 1;
  }

  .land-armory-section--equipped {
    max-height: 210px;
  }

  .land-armory-header {
    align-items: flex-start;
    gap: 8px;
  }

  .land-armory-summary > span {
    min-width: 64px;
    padding: 4px 6px;
  }

  .land-armory-inventory {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) and (orientation: portrait) {
  .land-armory-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-right: 46px;
  }

  .land-armory-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal.clean-world-modal .land-armory-card .land-armory-slot {
    grid-template-columns: 36px minmax(0, 1fr) 70px;
  }

  .modal.clean-world-modal .land-armory-card .land-armory-footer button {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .modal.clean-world-modal .land-armory-card,
  .modal.world-map-modal.land-workshop-modal .land-armory-card.land-workshop-card {
    grid-template-columns: minmax(215px, 0.72fr) minmax(0, 1.75fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 7px;
    padding: 8px;
  }

  .land-armory-header {
    gap: 8px;
    padding-right: 52px;
  }

  .modal.clean-world-modal .land-armory-heading h2,
  .land-workshop-card.land-armory-card .land-armory-heading h2 {
    font-size: 1.08rem;
  }

  .modal.clean-world-modal .land-armory-heading > p,
  .land-workshop-card.land-armory-card .land-armory-heading > p {
    max-width: 68ch;
    margin-top: 2px;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .land-armory-summary > span {
    min-width: 68px;
    padding: 3px 7px;
  }

  .land-armory-section-heading {
    min-height: 29px;
    padding: 5px 8px;
  }

  .land-armory-slots,
  .land-armory-inventory {
    gap: 5px;
    padding: 6px;
  }

  .land-armory-inventory {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .modal.clean-world-modal .land-armory-card .land-armory-slot,
  .modal.clean-world-modal .land-armory-card .land-armory-item {
    padding: 6px;
  }

  .modal.clean-world-modal .land-armory-card .land-armory-footer button {
    min-height: 31px;
    padding: 5px 10px;
  }
}

/* ===== Holo state continuity: roster, hatch, and evolution ===============
   Generic Party/Box/detail rules set their own filter later in the cascade.
   Rebind Black Holo's live filter at the two UI roots so it remains visibly
   Black Holo outside battle without affecting ordinary monster images. */
#partyList img.black-holo-sprite,
#modal img.black-holo-sprite {
  filter:
    saturate(var(--bh-sat, 1.45))
    hue-rotate(var(--bh-hue, 0deg))
    grayscale(var(--bh-gray, 0.2))
    contrast(var(--bh-contrast, 1.34))
    brightness(var(--bh-holo-bright, 1.12))
    brightness(var(--bh-dark, 0.76))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 0 3px rgba(174, 132, 255, 0.46))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.62));
}

/* The egg remains hidden inside its shell, so the whole hatch chamber carries
   the tier until the actual Holo/Black Holo monster is revealed. */
.egg-hatch-scene.is-holo {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.5), transparent 26%),
    radial-gradient(circle at 36% 58%, rgba(108, 234, 255, 0.3), transparent 48%),
    radial-gradient(circle at 66% 60%, rgba(255, 117, 225, 0.25), transparent 48%),
    linear-gradient(180deg, #182f3a, #10142d 62%, #070914);
}

.egg-hatch-scene.is-black-holo {
  background:
    radial-gradient(circle at 50% 43%, rgba(238, 235, 255, 0.17), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(55, 31, 88, 0.44), transparent 44%),
    radial-gradient(circle at 50% 62%, rgba(7, 2, 14, 0.96), transparent 67%),
    linear-gradient(180deg, #08070d, #020205 66%, #000);
}

.egg-hatch-scene.is-holo .egg-hatch-aura {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(143, 238, 255, 0.4) 24%, rgba(255, 123, 225, 0.25) 50%, transparent 72%);
  filter:
    blur(1px)
    drop-shadow(0 0 26px rgba(120, 232, 255, 0.66))
    drop-shadow(0 0 48px rgba(255, 127, 230, 0.34));
}

.egg-hatch-scene.is-black-holo .egg-hatch-aura {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.98) 0 28%, rgba(255, 255, 255, 0.84) 29% 31%, rgba(116, 73, 174, 0.34) 34% 48%, transparent 72%);
  filter:
    blur(0.5px)
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.48))
    drop-shadow(0 0 48px rgba(126, 75, 193, 0.5));
}

.egg-hatch-scene:is(.is-holo, .is-black-holo) .egg-hatch-aura::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.78) rgba(115, 226, 255, 0.42) rgba(255, 132, 232, 0.5) rgba(174, 130, 255, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(184, 143, 255, 0.34);
  animation: holo-scene-orbit 2.8s linear infinite;
}

@keyframes holo-scene-orbit {
  to { rotate: 360deg; }
}

.egg-hatch-result.is-holo .egg-hatch-result-monster {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.28), transparent 24%),
    radial-gradient(circle at 38% 62%, rgba(102, 226, 255, 0.28), transparent 52%),
    radial-gradient(circle at 64% 60%, rgba(255, 119, 226, 0.22), transparent 52%);
}

.egg-hatch-result.is-black-holo .egg-hatch-result-monster {
  background:
    radial-gradient(circle at 50% 52%, rgba(0, 0, 0, 0.82) 0 25%, rgba(255, 255, 255, 0.16) 27%, rgba(98, 54, 153, 0.2) 42%, transparent 70%);
}

.evolution-scene.is-holo {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96), rgba(139, 237, 255, 0.42) 18%, rgba(213, 104, 255, 0.3) 44%, rgba(13, 23, 53, 0.97) 78%),
    #0a1730;
}

.evolution-scene.is-black-holo {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.72), rgba(11, 9, 17, 0.96) 13%, rgba(89, 47, 134, 0.34) 35%, rgba(2, 2, 5, 0.99) 74%),
    #010103;
}

.evolution-scene.is-holo .evo-bg {
  background:
    repeating-conic-gradient(from 0deg, rgba(142, 236, 255, 0.28) 0 8deg, rgba(255, 132, 232, 0.08) 8deg 13deg, transparent 13deg 20deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.38), transparent 50%);
}

.evolution-scene.is-black-holo .evo-bg {
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.12) 0 5deg, rgba(91, 51, 139, 0.13) 5deg 11deg, transparent 11deg 22deg),
    radial-gradient(circle, rgba(0, 0, 0, 0.72) 0 25%, rgba(123, 73, 184, 0.2) 42%, transparent 66%);
}

.evolution-scene.is-holo .evo-rings span {
  border-color: rgba(179, 244, 255, 0.9);
  box-shadow: 0 0 30px rgba(255, 135, 231, 0.68);
}

.evolution-scene.is-black-holo .evo-rings span {
  border-color: rgba(245, 241, 255, 0.78);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.38), 0 0 42px rgba(102, 57, 158, 0.56);
}

.evolution-scene.is-holo .evo-orbit span {
  background: #c7f8ff;
  box-shadow: 0 0 20px #ff9ee9;
}

.evolution-scene.is-black-holo .evo-orbit span {
  background: #f7f2ff;
  box-shadow: 0 0 18px #7449a6;
}

.evolution-scene.is-black-holo .evo-light-column {
  background: linear-gradient(90deg, transparent, rgba(235, 225, 255, 0.66), rgba(3, 2, 6, 0.92), rgba(235, 225, 255, 0.66), transparent);
}

.evolution-prompt.is-holo,
.evolution-result.is-holo,
.egg-hatch-result.is-holo {
  box-shadow: 0 0 0 1px rgba(145, 235, 255, 0.28), 0 22px 58px rgba(122, 69, 180, 0.24);
}

.evolution-prompt.is-black-holo,
.evolution-result.is-black-holo,
.egg-hatch-result.is-black-holo {
  box-shadow: 0 0 0 1px rgba(226, 215, 255, 0.2), 0 22px 64px rgba(0, 0, 0, 0.7), 0 0 42px rgba(91, 51, 139, 0.2);
}

.evolution-result.is-holo::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.32), rgba(108, 229, 255, 0.2) 42%, rgba(255, 121, 227, 0.13) 62%, transparent 76%);
}

.evolution-result.is-black-holo::before {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.88) 0 27%, rgba(255, 255, 255, 0.15) 29%, rgba(96, 53, 150, 0.2) 46%, transparent 74%);
}

/* The reveal rise and the persistent rarity animation use separate properties:
   translate/opacity for entry, transform/filter variables for the live Holo. */
@keyframes holo-result-enter {
  0% { opacity: 0; translate: 0 24px; }
  72% { opacity: 1; translate: 0 -4px; }
  100% { opacity: 1; translate: 0 0; }
}

#modal .egg-hatch-result-monster img.holo-sprite,
#modal .evolution-result > img.holo-sprite {
  animation:
    holo-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    shiny-glow 2.4s ease-in-out 560ms infinite;
}

#modal .egg-hatch-result-monster img.black-holo-sprite,
#modal .evolution-result > img.black-holo-sprite {
  animation:
    holo-result-enter 560ms cubic-bezier(0.18, 0.82, 0.22, 1) both,
    black-holo-color-cycle 2.4s ease-in-out 560ms infinite,
    black-holo-glow 7.2s ease-in-out 560ms infinite;
}

@media (prefers-reduced-motion: reduce) {
  .egg-hatch-scene:is(.is-holo, .is-black-holo) .egg-hatch-aura::before,
  #modal .egg-hatch-result-monster img.holo-sprite,
  #modal .egg-hatch-result-monster img.black-holo-sprite,
  #modal .evolution-result > img.holo-sprite,
  #modal .evolution-result > img.black-holo-sprite {
    animation: none;
  }

  #modal .egg-hatch-result-monster img,
  #modal .evolution-result > img {
    opacity: 1;
    translate: 0 0;
  }
}

/* Final-cascade mutation bindings: the clean-world skin and Holo continuity
   intentionally sit at the end of this stylesheet, so trait-specific variants
   bind here as well instead of being flattened back to their generic styles. */
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-azure { color: #082b55; background: linear-gradient(90deg, rgba(107, 195, 255, 0.82), rgba(204, 235, 255, 0.72)); }
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-crimson { color: #4d1009; background: linear-gradient(90deg, rgba(255, 130, 111, 0.82), rgba(255, 207, 183, 0.72)); }
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-emerald { color: #063d22; background: linear-gradient(90deg, rgba(99, 231, 145, 0.82), rgba(202, 255, 218, 0.72)); }
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-violet { color: #32104f; background: linear-gradient(90deg, rgba(195, 132, 255, 0.82), rgba(237, 207, 255, 0.74)); }
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-gold { color: #4a3100; background: linear-gradient(90deg, rgba(255, 214, 91, 0.86), rgba(255, 241, 183, 0.74)); }
.modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-prismatic {
  color: white;
  border-color: rgba(255, 255, 255, 0.55);
  background: linear-gradient(100deg, #492078, var(--mutation-a), var(--mutation-b), #12628b, #492078);
  background-size: 280% 100%;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  box-shadow: 0 0 12px color-mix(in srgb, var(--mutation-a) 48%, transparent);
  animation: prismatic-seal-flow 4.2s linear infinite;
}

.egg-hatch-result.has-mutation-cue:is(.is-holo, .is-black-holo) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mutation-a) 35%, rgba(255,255,255,0.2)), 0 22px 62px rgba(0,0,0,0.52), 0 0 34px color-mix(in srgb, var(--mutation-b) 24%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.holo-sprite.mutation-prismatic,
  #modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.shiny-sprite.mutation-prismatic,
  #modal .egg-hatch-result.is-prismatic-mutation .egg-hatch-result-monster img.black-holo-sprite.mutation-prismatic {
    animation: none !important;
    opacity: 1;
    translate: 0 0;
  }

  .modal.clean-world-modal .box-seal.box-seal--mutation.box-seal--mutation-prismatic {
    animation: none;
    background-position: 50% 0;
  }
}

/* Fusion Registry: phone landscape needs a dense, horizontal workspace.
   The generic short-screen breakpoint above deliberately stacks modal grids,
   which is right for portrait but turns Fusion into a 1,700px-tall page on a
   390px-high phone. Keep the full-screen shell and compact the actual work. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1100px) {
  html.is-touch .modal.world-map-modal .fusion-card {
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    max-width: none;
    max-height: none;
    gap: 6px;
    padding:
      max(7px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0;
    scrollbar-gutter: stable;
  }

  html.is-touch .modal.world-map-modal .fusion-card .world-modal-close {
    top: max(6px, env(safe-area-inset-top));
    right: max(6px, env(safe-area-inset-right));
    width: 34px;
    height: 34px;
    font-size: 1.18rem;
  }

  html.is-touch .fusion-card .fusion-head {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding-right: 38px;
  }

  html.is-touch .fusion-card--registry .fusion-head > #closeFusionDex {
    display: none;
  }

  html.is-touch .fusion-card .fusion-head > div {
    min-width: 0;
  }

  html.is-touch .fusion-card .fusion-eyebrow {
    margin: 0 0 1px;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    line-height: 1;
  }

  html.is-touch .fusion-card .fusion-head h2 {
    overflow: hidden;
    margin: 0;
    font-size: clamp(1rem, 4.8dvh, 1.28rem);
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card .fusion-head p {
    max-width: none;
    overflow: hidden;
    margin: 2px 0 0;
    font-size: clamp(0.58rem, 2.25dvh, 0.72rem);
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card .fusion-head > button {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.68rem;
  }

  html.is-touch .fusion-card .fusion-requirements {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  html.is-touch .fusion-card .fusion-resource {
    min-height: 38px;
    grid-template-columns: 27px minmax(0, 1fr);
    column-gap: 5px;
    padding: 4px 6px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card .fusion-resource img,
  html.is-touch .fusion-card .fusion-resource i,
  html.is-touch .fusion-card .fusion-resource b {
    width: 27px;
    height: 27px;
  }

  html.is-touch .fusion-card .fusion-resource i,
  html.is-touch .fusion-card .fusion-resource b {
    font-size: 0.58rem;
  }

  html.is-touch .fusion-card .fusion-resource strong {
    font-size: 0.67rem;
  }

  html.is-touch .fusion-card .fusion-resource small {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
  }

  html.is-touch .fusion-card .fusion-toolbar {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
  }

  html.is-touch .fusion-card .fusion-toolbar button,
  html.is-touch .fusion-card .fusion-slot-actions button,
  html.is-touch .fusion-card .fusion-parent-actions button,
  html.is-touch .fusion-card .fusion-selected button {
    min-height: 30px;
    padding: 4px 8px;
    font-size: 0.65rem;
  }

  html.is-touch .fusion-card .fusion-toolbar span {
    min-width: 0;
    overflow: hidden;
    font-size: 0.62rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card .fusion-section {
    gap: 4px;
  }

  html.is-touch .fusion-card .fusion-section > h3 {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.08;
  }

  html.is-touch .fusion-card .fusion-slot-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .fusion-card .fusion-slot-card {
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card .fusion-slot-art {
    width: 50px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card .fusion-mystery-art {
    font-size: 1.3rem;
  }

  html.is-touch .fusion-card .fusion-slot-copy h3 {
    margin: 1px 0;
    font-size: 0.72rem;
    line-height: 1.05;
  }

  html.is-touch .fusion-card .fusion-slot-copy p,
  html.is-touch .fusion-card .fusion-slot-copy span {
    overflow: hidden;
    margin: 1px 0;
    font-size: 0.56rem;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card .fusion-kicker {
    font-size: 0.54rem;
  }

  html.is-touch .fusion-card .fusion-traits {
    gap: 3px;
    margin-top: 2px;
  }

  html.is-touch .fusion-card .fusion-trait {
    padding: 2px 5px;
    font-size: 0.5rem;
  }

  html.is-touch .fusion-card .fusion-slot-actions {
    gap: 4px;
  }

  html.is-touch .fusion-card .fusion-dex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  html.is-touch .fusion-card .fusion-dex-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card .fusion-dex-art,
  html.is-touch .fusion-card .fusion-dex-art img,
  html.is-touch .fusion-card .fusion-dex-art > .fusion-mystery-art {
    width: 58px;
  }

  html.is-touch .fusion-card .fusion-dex-card strong,
  html.is-touch .fusion-card .fusion-dex-card span,
  html.is-touch .fusion-card .fusion-dex-card small {
    font-size: 0.58rem;
    line-height: 1.12;
  }

  html.is-touch .fusion-card .fusion-dex-detail {
    gap: 3px;
  }

  html.is-touch .fusion-card .fusion-dex-label {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  html.is-touch .fusion-card .fusion-dex-parents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  html.is-touch .fusion-card .fusion-dex-parent {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
  }

  html.is-touch .fusion-card .fusion-dex-parent img,
  html.is-touch .fusion-card .fusion-dex-parent-missing {
    width: 28px;
    height: 28px;
  }

  html.is-touch .fusion-card .fusion-dex-parent b,
  html.is-touch .fusion-card .fusion-dex-parent span {
    font-size: 0.52rem;
  }

  html.is-touch .fusion-card .fusion-stat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }

  html.is-touch .fusion-card .fusion-stat-grid span {
    padding: 2px 1px;
    border-radius: 5px;
    font-size: 0.54rem;
  }

  html.is-touch .fusion-card .fusion-stat-grid b {
    font-size: 0.43rem;
  }

  html.is-touch .modal.world-map-modal .fusion-card--picker {
    display: grid;
    grid-template-columns: minmax(205px, 0.78fr) minmax(0, 1.45fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 5px;
    overflow: hidden;
  }

  html.is-touch .fusion-card--picker > .fusion-head {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  html.is-touch .fusion-card--picker > .fusion-requirements {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  html.is-touch .fusion-card--picker > .fusion-selected {
    grid-column: 1;
    grid-row: 3 / 5;
  }

  html.is-touch .fusion-card--picker > .fusion-genetics-preview {
    grid-column: 2;
    grid-row: 3;
  }

  html.is-touch .fusion-card--picker > .fusion-start-note {
    grid-column: 1;
    grid-row: 5;
    align-self: start;
  }

  html.is-touch .fusion-card--picker > .fusion-picker-tools {
    grid-column: 2;
    grid-row: 4;
  }

  html.is-touch .fusion-card--picker > .fusion-parent-list,
  html.is-touch .fusion-card--picker > .fusion-empty-search {
    grid-column: 2;
    grid-row: 5;
  }

  html.is-touch .fusion-card--picker .fusion-selected {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
    padding: 5px;
  }

  html.is-touch .fusion-card--picker .fusion-selected > div {
    min-height: 48px;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 5px;
    padding: 4px;
  }

  html.is-touch .fusion-card--picker .fusion-selected > div > img {
    width: 38px;
    height: 38px;
    grid-row: 1 / span 2;
  }

  html.is-touch .fusion-card--picker .fusion-selected > div > strong,
  html.is-touch .fusion-card--picker .fusion-selected > div > span,
  html.is-touch .fusion-card--picker .fusion-selected > div > .fusion-traits {
    min-width: 0;
    grid-column: 2;
  }

  html.is-touch .fusion-card--picker .fusion-selected > div > strong {
    overflow: hidden;
    font-size: 0.65rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card--picker .fusion-selected > div > span {
    overflow: hidden;
    font-size: 0.53rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .fusion-card--picker .fusion-selected > button {
    width: 100%;
  }

  html.is-touch .fusion-card--picker .fusion-genetics-preview {
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    align-items: start;
    gap: 5px;
    padding: 5px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card--picker .fusion-genetics-preview > div,
  html.is-touch .fusion-card--picker .fusion-genetics-copy {
    gap: 3px;
  }

  html.is-touch .fusion-card--picker .fusion-genetics-preview strong {
    font-size: 0.6rem;
    line-height: 1.08;
  }

  html.is-touch .fusion-card--picker .fusion-genetics-preview span,
  html.is-touch .fusion-card--picker .fusion-genetics-preview small {
    font-size: 0.51rem;
    line-height: 1.08;
  }

  html.is-touch .fusion-card--picker .fusion-start-note {
    margin: 0;
    padding: 6px;
    border: 1px solid currentColor;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.57rem;
    line-height: 1.18;
  }

  html.is-touch .fusion-card--picker .fusion-picker-tools {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 5px;
    align-items: center;
  }

  html.is-touch .fusion-card--picker .fusion-search {
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    font-size: 0.5rem;
  }

  html.is-touch .fusion-card--picker .fusion-search input {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.66rem;
  }

  html.is-touch .fusion-card--picker .fusion-duplicate-toggle {
    min-height: 30px;
    justify-content: center;
    padding: 4px 8px;
    font-size: 0.62rem;
  }

  html.is-touch .fusion-card--picker .fusion-parent-list {
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(48px, auto);
    align-content: start;
    gap: 4px;
    padding-right: 3px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  html.is-touch .fusion-card--picker .fusion-parent-row {
    min-height: 48px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 5px;
    padding: 4px;
    border-radius: 7px;
  }

  html.is-touch .fusion-card--picker .fusion-parent-row > img {
    width: 40px;
    height: 40px;
  }

  html.is-touch .fusion-card--picker .fusion-parent-row strong {
    font-size: 0.6rem;
    line-height: 1.08;
  }

  html.is-touch .fusion-card--picker .fusion-parent-row span {
    font-size: 0.48rem;
    line-height: 1.1;
  }

  html.is-touch .fusion-card--picker .fusion-parent-actions {
    grid-template-columns: 28px 28px;
    gap: 3px;
  }

  html.is-touch .fusion-card--picker .fusion-parent-actions button {
    width: 28px;
    min-height: 28px;
    padding: 0;
  }
}

@media (orientation: landscape) and (max-height: 620px) and (max-width: 700px) {
  html.is-touch .fusion-card--picker .fusion-parent-list {
    grid-template-columns: 1fr;
  }
}

/* Trade completion V2: a short, server-verified exchange that keeps both
   offers readable while the carrier layers cross on GPU-friendly transforms. */
body.online-trade-fx-open .online-trade-fx-overlay {
  overscroll-behavior: contain;
  touch-action: none;
  background:
    radial-gradient(circle at 15% 24%, rgba(65, 244, 222, 0.17), transparent 34%),
    radial-gradient(circle at 84% 72%, rgba(144, 92, 255, 0.19), transparent 38%),
    radial-gradient(circle at 50% 52%, rgba(74, 136, 255, 0.1), transparent 48%),
    linear-gradient(145deg, rgba(0, 7, 17, 0.975), rgba(1, 2, 10, 0.99));
}

.online-trade-fx-scene.trade-fx-v2 {
  --trade-fx-cyan: 91, 245, 222;
  --trade-fx-blue: 82, 153, 255;
  --trade-fx-violet: 176, 113, 255;
  --trade-fx-gold: 255, 215, 112;
  --trade-fx-accent: var(--trade-fx-cyan);
  --trade-fx-accent-two: var(--trade-fx-violet);
  --trade-fx-duration: 5600ms;
  --trade-fx-travel: 560px;
  --trade-fx-travel-back: -560px;
  --trade-fx-half: 280px;
  --trade-fx-half-back: -280px;
  --trade-fx-card: clamp(148px, 19vw, 190px);
  --trade-fx-edge: 3%;
  width: min(1040px, 100%);
  height: min(680px, calc(100dvh - 28px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  padding: clamp(14px, 2.2vmin, 22px);
  outline: none;
  background:
    linear-gradient(112deg, rgba(var(--trade-fx-accent), 0.075), transparent 28%),
    linear-gradient(292deg, rgba(var(--trade-fx-accent-two), 0.08), transparent 32%),
    radial-gradient(ellipse at 50% 56%, rgba(var(--trade-fx-blue), 0.13), transparent 53%),
    linear-gradient(180deg, rgba(13, 26, 43, 0.975), rgba(2, 6, 15, 0.995));
  border-color: rgba(185, 230, 255, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -40px 82px rgba(0, 0, 0, 0.4),
    0 38px 120px rgba(0, 0, 0, 0.76),
    0 0 110px rgba(var(--trade-fx-accent), 0.09);
  touch-action: manipulation;
}

.online-trade-fx-scene.trade-fx-v2.is-receiving-holo {
  --trade-fx-accent: 108, 218, 255;
  --trade-fx-accent-two: 255, 199, 101;
}

.online-trade-fx-scene.trade-fx-v2.is-receiving-black-holo {
  --trade-fx-accent: 226, 241, 255;
  --trade-fx-accent-two: 145, 106, 255;
}

.online-trade-fx-scene.trade-fx-v2.is-receiving-tokens {
  --trade-fx-accent: 255, 218, 118;
  --trade-fx-accent-two: 76, 231, 213;
}

.online-trade-fx-scene.trade-fx-v2::before {
  opacity: 0.17;
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse at center, #000 12%, transparent 78%);
}

.online-trade-fx-scene.trade-fx-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--trade-fx-accent), 0.06), transparent 18% 82%, rgba(var(--trade-fx-accent-two), 0.06)),
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.4) 100%);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-depth {
  inset: 10% 7%;
  opacity: 0.94;
  filter: blur(22px);
  background: radial-gradient(ellipse, rgba(var(--trade-fx-accent), 0.14), rgba(var(--trade-fx-accent-two), 0.065) 43%, transparent 74%);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-rays {
  opacity: 0.3;
  animation: tradeFxV2SlowSpin 32s linear infinite;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-runes span {
  animation: tradeFxV2Rune 3.8s ease-in-out infinite;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified {
  position: absolute;
  left: clamp(12px, 2vmin, 20px);
  top: clamp(12px, 2vmin, 20px);
  z-index: 20;
  min-width: max-content;
  max-width: min(240px, 31%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 7px;
  color: rgb(var(--trade-fx-accent));
  background: rgba(3, 20, 24, 0.76);
  border: 1px solid rgba(var(--trade-fx-accent), 0.3);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px rgba(var(--trade-fx-accent), 0.1);
  opacity: 0;
  transform: translateY(-8px);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified i {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  color: #041614;
  background: rgb(var(--trade-fx-accent));
  border-radius: 50%;
  font: 950 12px/1 Inter, system-ui, sans-serif;
  box-shadow: 0 0 16px rgba(var(--trade-fx-accent), 0.34);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified span {
  min-width: 0;
  overflow: hidden;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sync-warning {
  position: absolute;
  left: 50%;
  bottom: 76px;
  z-index: 24;
  width: min(560px, 72%);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  color: #ffe5ad;
  background: rgba(48, 27, 4, 0.94);
  border: 1px solid rgba(255, 195, 79, 0.5);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 183, 66, 0.1);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sync-warning i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #2b1800;
  background: #ffd06b;
  border-radius: 50%;
  font: 950 12px/1 Inter, system-ui, sans-serif;
}

.online-trade-fx-scene.trade-fx-v2.has-sync-warning .online-trade-fx-phases {
  display: none;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-verified {
  animation: tradeFxV2Verified 620ms 120ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title {
  min-height: 58px;
  gap: 2px;
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title > span {
  color: rgb(var(--trade-fx-accent));
  font-size: 10px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-cycle {
  position: relative;
  min-width: min(520px, 68%);
  min-height: 36px;
  display: grid;
  place-items: center;
  font-size: clamp(25px, 4.2vmin, 39px);
  line-height: 1;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-cycle b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: inherit;
  white-space: nowrap;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-start {
  opacity: 1;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-final {
  color: #fff;
  opacity: 0;
  text-shadow: 0 0 22px rgba(var(--trade-fx-accent), 0.28), 0 4px 18px rgba(0, 0, 0, 0.72);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-title-start {
  animation: tradeFxV2TitleStart var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-title-final {
  animation: tradeFxV2TitleFinal var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title small {
  font-size: 10px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-stage {
  min-height: 250px;
  overflow: visible;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner {
  width: min(29%, 205px);
  padding: 6px 10px;
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner span {
  font-size: 8px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner strong {
  font-size: 12px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier {
  position: absolute;
  top: 54%;
  z-index: 9;
  width: var(--trade-fx-card);
  opacity: 0;
  transform: translate3d(0, calc(-50% + 10px), 0) scale(0.92);
  transform-origin: 50% 55%;
  will-change: transform, opacity;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier--sent {
  left: var(--trade-fx-edge);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier--received {
  right: var(--trade-fx-edge);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-carrier--sent {
  animation: tradeFxV2Sent var(--trade-fx-duration) cubic-bezier(0.2, 0.68, 0.18, 1) both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-carrier--received {
  animation: tradeFxV2Received var(--trade-fx-duration) cubic-bezier(0.2, 0.68, 0.18, 1) both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 5px;
  padding: 9px;
  overflow: visible;
  animation: none;
  transform: none;
  will-change: auto;
  background:
    linear-gradient(145deg, rgba(37, 57, 76, 0.94), rgba(5, 12, 24, 0.97));
  border-color: rgba(190, 231, 255, 0.29);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 18px 44px rgba(0, 0, 0, 0.52),
    0 0 34px rgba(var(--trade-fx-accent), 0.09);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item::before {
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-item::before {
  animation: tradeFxV2CardSheen var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier--received .online-trade-fx-item {
  border-color: rgba(var(--trade-fx-accent), 0.4);
}

.online-trade-fx-scene.trade-fx-v2.is-receiving-black-holo .online-trade-fx-carrier--received .online-trade-fx-item {
  background:
    linear-gradient(132deg, rgba(65, 70, 88, 0.94), rgba(4, 5, 12, 0.985) 54%, rgba(43, 26, 72, 0.92));
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-object {
  min-height: clamp(86px, 18vmin, 118px);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-aura,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item img,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-coin {
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-aura {
  animation: tradeFxV2Aura 2.2s ease-in-out infinite;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-item img {
  animation: tradeFxV2Float 2.4s ease-in-out infinite;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-coin {
  animation: tradeFxV2Coin 2.2s ease-in-out infinite;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item img {
  width: min(124px, 22vmin);
  height: min(124px, 22vmin);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-label {
  padding: 4px 7px;
  font-size: 8px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item-copy strong {
  font-size: 13px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item-copy small,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-money {
  font-size: 9px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-monster-sigil {
  position: relative;
  z-index: 1;
  width: clamp(62px, 12vmin, 92px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--trade-fx-accent), 0.42);
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 38% 36%, rgba(255, 255, 255, 0.8) 0 5%, transparent 6%),
    radial-gradient(circle, rgba(var(--trade-fx-accent), 0.36), rgba(var(--trade-fx-blue), 0.12) 58%, transparent 60%);
  box-shadow: inset 0 0 24px rgba(var(--trade-fx-accent), 0.18), 0 0 26px rgba(var(--trade-fx-accent), 0.18);
  transform: rotate(45deg);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-monster-sigil::after {
  content: "✦";
  color: rgba(236, 255, 252, 0.92);
  font-size: 26px;
  transform: rotate(-45deg);
  text-shadow: 0 0 14px rgba(var(--trade-fx-accent), 0.66);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-monster-sigil--fallback {
  display: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-object.has-image-error .online-trade-fx-monster-sigil--fallback {
  display: grid;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-empty-mark {
  position: relative;
  width: clamp(58px, 11vmin, 82px);
  aspect-ratio: 1;
  border: 1px dashed rgba(190, 224, 244, 0.26);
  border-radius: 50%;
  background: rgba(6, 16, 27, 0.42);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-empty-mark::before,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-empty-mark::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 48%;
  width: 52%;
  height: 2px;
  background: rgba(198, 225, 242, 0.32);
  transform: rotate(45deg);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-empty-mark::after {
  transform: rotate(-45deg);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-arrival {
  position: absolute;
  right: 5px;
  top: 35px;
  z-index: 5;
  padding: 5px 8px;
  color: #04140f;
  background: linear-gradient(180deg, #ecfff9, rgb(var(--trade-fx-accent)));
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
  opacity: 0;
  text-transform: uppercase;
  transform: translateY(6px) scale(0.86);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.36), 0 0 18px rgba(var(--trade-fx-accent), 0.24);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-arrival {
  animation: tradeFxV2Arrival var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-path {
  left: calc(var(--trade-fx-edge) + (var(--trade-fx-card) * 0.5));
  right: calc(var(--trade-fx-edge) + (var(--trade-fx-card) * 0.5));
  top: 54%;
  opacity: 0;
  animation: none;
  transform: scaleX(0);
  transform-origin: center;
  will-change: transform, opacity;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-path--top {
  transform: translateY(-50px) scaleX(0);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-path--bottom {
  transform: translateY(50px) scaleX(0);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-path--top {
  animation: tradeFxV2PathTop var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-path--bottom {
  animation: tradeFxV2PathBottom var(--trade-fx-duration) 80ms ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-dock {
  top: 54%;
  width: calc(var(--trade-fx-card) + 20px);
  height: calc(var(--trade-fx-card) * 0.72);
  opacity: 0.38;
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-gate {
  top: 54%;
  z-index: 12;
  width: clamp(106px, 21vmin, 174px);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring::before,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring::after {
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring {
  inset: 8%;
  opacity: 0.46;
  border-color: rgba(var(--trade-fx-accent), 0.66);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(var(--trade-fx-accent), 0.11) 35%, transparent 67%);
  box-shadow: inset 0 0 30px rgba(var(--trade-fx-accent), 0.15), 0 0 34px rgba(var(--trade-fx-accent), 0.2), 0 0 76px rgba(var(--trade-fx-accent-two), 0.18);
  transform: scale(0.72);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring::before {
  inset: 13%;
  border-color: rgba(var(--trade-fx-accent), 0.55);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-ring::after {
  inset: -14%;
  border-color: rgba(var(--trade-fx-accent-two), 0.34);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-ring {
  animation: tradeFxV2Gate var(--trade-fx-duration) ease-in-out both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-ring::before {
  animation: tradeFxV2SlowSpin 8s linear infinite reverse;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-ring::after {
  animation: tradeFxV2SlowSpin 12s linear infinite;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-orbit {
  position: absolute;
  inset: -5%;
  border: 1px solid rgba(var(--trade-fx-accent-two), 0.22);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-orbit--inner {
  inset: 18%;
  border-color: rgba(var(--trade-fx-accent), 0.3);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-orbit i {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  background: #efffff;
  border-radius: 50%;
  box-shadow: 0 0 13px rgba(var(--trade-fx-accent), 0.9);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-orbit i:nth-child(2) { left: 12%; top: 72%; }
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-orbit i:nth-child(3) { left: auto; right: 9%; top: 68%; }

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-orbit--outer {
  animation: tradeFxV2Orbit var(--trade-fx-duration) linear both, tradeFxV2SlowSpin 9s linear infinite;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-orbit--inner {
  animation: tradeFxV2Orbit var(--trade-fx-duration) linear both, tradeFxV2SlowSpin 5.5s linear infinite reverse;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core {
  position: absolute;
  inset: 29%;
  z-index: 4;
  display: grid;
  place-items: center;
  color: rgba(232, 255, 251, 0.9);
  background: radial-gradient(circle, rgba(var(--trade-fx-accent), 0.32), rgba(4, 16, 27, 0.88) 64%);
  border: 1px solid rgba(var(--trade-fx-accent), 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 18px rgba(var(--trade-fx-accent), 0.2), 0 0 28px rgba(var(--trade-fx-accent), 0.2);
  opacity: 0;
  transform: scale(0.65);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core span,
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core b {
  position: absolute;
  font: 950 clamp(18px, 4vmin, 30px)/1 Inter, system-ui, sans-serif;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core b {
  color: #071a15;
  opacity: 0;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-core {
  animation: tradeFxV2Core var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-core span {
  animation: tradeFxV2Arrow var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-core b {
  animation: tradeFxV2Check var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-seal {
  display: none;
  animation: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-wave {
  position: absolute;
  inset: 14%;
  z-index: 1;
  border: 2px solid rgba(var(--trade-fx-accent), 0.7);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-wave--one {
  animation: tradeFxV2Wave var(--trade-fx-duration) ease-out both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-wave--two {
  animation: tradeFxV2WaveTwo var(--trade-fx-duration) ease-out both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sparks i {
  animation: none;
  transform-origin: 50% clamp(48px, 11vmin, 78px);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-sparks i {
  animation: tradeFxV2Spark var(--trade-fx-duration) ease-out both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets i {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 5px;
  height: 5px;
  background: #eafffc;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(var(--trade-fx-accent), 0.8);
  opacity: 0;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets i:nth-child(2) { margin-top: -28px; }
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets i:nth-child(3) { margin-top: 28px; }
.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets i:nth-child(4) { width: 3px; height: 3px; }

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-packets i:nth-child(1) { animation: tradeFxV2PacketRight var(--trade-fx-duration) ease both; }
.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-packets i:nth-child(2) { animation: tradeFxV2PacketLeft var(--trade-fx-duration) 80ms ease both; }
.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-packets i:nth-child(3) { animation: tradeFxV2PacketRight var(--trade-fx-duration) 150ms ease both; }
.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-packets i:nth-child(4) { animation: tradeFxV2PacketLeft var(--trade-fx-duration) 220ms ease both; }

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-flash {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 13;
  width: clamp(100px, 25vmin, 190px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.92), rgba(var(--trade-fx-accent), 0.32) 28%, transparent 68%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.25);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-flash {
  animation: tradeFxV2Flash var(--trade-fx-duration) ease-out both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation {
  position: absolute;
  left: 50%;
  top: calc(54% + clamp(50px, 11vmin, 78px));
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 5px;
  color: rgb(var(--trade-fx-accent));
  background: rgba(3, 18, 24, 0.9);
  border: 1px solid rgba(var(--trade-fx-accent), 0.38);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.88);
  white-space: nowrap;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #051712;
  background: rgb(var(--trade-fx-accent));
  border-radius: 50%;
  font: 950 11px/1 Inter, system-ui, sans-serif;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation span {
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-confirmation {
  animation: tradeFxV2Confirmation var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phases {
  bottom: 2px;
  min-height: 25px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phase {
  padding: 5px 10px;
  font-size: 8px;
  animation: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-phase--lock {
  animation: tradeFxV2PhaseLock var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-phase--cross {
  animation: tradeFxV2PhaseCross var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-phase--arrive {
  animation: tradeFxV2PhaseArrive var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer {
  min-height: 50px;
  gap: 10px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt {
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: rgba(232, 244, 253, 0.78);
  background: rgba(3, 10, 19, 0.68);
  border: 1px solid rgba(183, 224, 248, 0.14);
  border-radius: 13px;
  opacity: 0;
  transform: translateY(8px);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt > span.is-received {
  color: rgb(var(--trade-fx-accent));
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt small {
  color: rgba(198, 219, 235, 0.52);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt > i {
  color: rgb(var(--trade-fx-accent));
  font-style: normal;
  font-weight: 950;
  text-shadow: 0 0 12px rgba(var(--trade-fx-accent), 0.48);
}

.online-trade-fx-scene.trade-fx-v2.is-running .online-trade-fx-receipt {
  animation: tradeFxV2Receipt var(--trade-fx-duration) ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer button {
  min-width: 116px;
  min-height: 46px;
  padding: 0 18px;
  font-size: 11px;
  touch-action: manipulation;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(var(--trade-fx-accent), 0.34), 0 10px 28px rgba(var(--trade-fx-accent), 0.22);
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer button.is-ready {
  animation: tradeFxV2Continue 620ms ease both;
}

.online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes tradeFxV2Verified {
  0% { opacity: 0; transform: translateY(-8px) scale(0.96); }
  70%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tradeFxV2TitleStart {
  0%, 67% { opacity: 1; transform: translateY(0); }
  74%, 100% { opacity: 0; transform: translateY(-7px); }
}

@keyframes tradeFxV2TitleFinal {
  0%, 69% { opacity: 0; transform: translateY(8px) scale(0.97); }
  78%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tradeFxV2Sent {
  0% { opacity: 0; transform: translate3d(0, calc(-50% + 12px), 0) scale(0.9); }
  10%, 23% { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
  43% { opacity: 0.86; transform: translate3d(calc(var(--trade-fx-half) - 24px), calc(-50% - 66px), 0) scale(0.8); }
  53% { opacity: 0.84; transform: translate3d(calc(var(--trade-fx-half) + 24px), calc(-50% - 62px), 0) scale(0.8); }
  70% { opacity: 1; transform: translate3d(var(--trade-fx-travel), -50%, 0) scale(0.96); }
  78%, 100% { opacity: 0.74; transform: translate3d(var(--trade-fx-travel), -50%, 0) scale(0.92); }
}

@keyframes tradeFxV2Received {
  0% { opacity: 0; transform: translate3d(0, calc(-50% + 12px), 0) scale(0.9); }
  11%, 23% { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); }
  43% { opacity: 0.86; transform: translate3d(calc(var(--trade-fx-half-back) + 24px), calc(-50% + 66px), 0) scale(0.8); }
  53% { opacity: 0.84; transform: translate3d(calc(var(--trade-fx-half-back) - 24px), calc(-50% + 62px), 0) scale(0.8); }
  70% { opacity: 1; transform: translate3d(var(--trade-fx-travel-back), -50%, 0) scale(1.02); }
  78%, 100% { opacity: 1; transform: translate3d(var(--trade-fx-travel-back), -50%, 0) scale(1.055); }
}

@keyframes tradeFxV2CardSheen {
  0%, 26% { transform: translateX(-130%); opacity: 0; }
  42% { opacity: 0.7; }
  58% { transform: translateX(130%); opacity: 0; }
  100% { transform: translateX(130%); opacity: 0; }
}

@keyframes tradeFxV2PathTop {
  0%, 18% { opacity: 0; transform: translateY(-50px) scaleX(0); }
  33%, 60% { opacity: 0.8; transform: translateY(-50px) scaleX(1); }
  76%, 100% { opacity: 0.18; transform: translateY(-50px) scaleX(1); }
}

@keyframes tradeFxV2PathBottom {
  0%, 18% { opacity: 0; transform: translateY(50px) scaleX(0); }
  33%, 60% { opacity: 0.8; transform: translateY(50px) scaleX(1); }
  76%, 100% { opacity: 0.18; transform: translateY(50px) scaleX(1); }
}

@keyframes tradeFxV2Gate {
  0%, 15% { opacity: 0; transform: scale(0.62); }
  30% { opacity: 0.62; transform: scale(0.92); }
  43%, 58% { opacity: 1; transform: scale(1.05); }
  67% { opacity: 0.92; transform: scale(0.96); }
  78%, 100% { opacity: 0.48; transform: scale(0.8); }
}

@keyframes tradeFxV2Orbit {
  0%, 17% { opacity: 0; }
  33%, 62% { opacity: 0.9; }
  80%, 100% { opacity: 0.28; }
}

@keyframes tradeFxV2Core {
  0%, 22% { opacity: 0; transform: scale(0.65); background-color: transparent; }
  38%, 59% { opacity: 1; transform: scale(1); }
  66% { opacity: 1; transform: scale(1.12); background-color: rgba(var(--trade-fx-accent), 0.96); }
  75%, 100% { opacity: 1; transform: scale(0.92); background-color: rgba(var(--trade-fx-accent), 0.86); }
}

@keyframes tradeFxV2Arrow {
  0%, 56% { opacity: 1; transform: rotate(0); }
  65%, 100% { opacity: 0; transform: rotate(180deg) scale(0.6); }
}

@keyframes tradeFxV2Check {
  0%, 60% { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  68%, 100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes tradeFxV2Wave {
  0%, 55% { opacity: 0; transform: scale(0.55); }
  58% { opacity: 0.88; }
  72%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes tradeFxV2WaveTwo {
  0%, 59% { opacity: 0; transform: scale(0.55); }
  63% { opacity: 0.68; }
  78%, 100% { opacity: 0; transform: scale(2.35); }
}

@keyframes tradeFxV2Spark {
  0%, 56% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(0) scaleY(0.2); }
  61% { opacity: 1; }
  75%, 100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-42px) scaleY(0.7); }
}

@keyframes tradeFxV2PacketRight {
  0%, 29% { opacity: 0; transform: translate3d(-95px, -24px, 0) scale(0.6); }
  38% { opacity: 0.9; }
  56% { opacity: 0.9; transform: translate3d(80px, 20px, 0) scale(1); }
  70%, 100% { opacity: 0; transform: translate3d(150px, 28px, 0) scale(0.4); }
}

@keyframes tradeFxV2PacketLeft {
  0%, 29% { opacity: 0; transform: translate3d(95px, 22px, 0) scale(0.6); }
  38% { opacity: 0.9; }
  56% { opacity: 0.9; transform: translate3d(-80px, -18px, 0) scale(1); }
  70%, 100% { opacity: 0; transform: translate3d(-150px, -28px, 0) scale(0.4); }
}

@keyframes tradeFxV2Flash {
  0%, 57% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  61% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  69%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

@keyframes tradeFxV2Confirmation {
  0%, 66% { opacity: 0; transform: translate(-50%, 8px) scale(0.88); }
  75%, 100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes tradeFxV2PhaseLock {
  0%, 10% { opacity: 0; transform: translateY(4px); }
  17%, 29% { opacity: 1; transform: translateY(0); }
  36%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes tradeFxV2PhaseCross {
  0%, 31% { opacity: 0; transform: translateY(4px); }
  39%, 60% { opacity: 1; transform: translateY(0); }
  68%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes tradeFxV2PhaseArrive {
  0%, 64% { opacity: 0; transform: translateY(4px); }
  73%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes tradeFxV2Receipt {
  0%, 68% { opacity: 0; transform: translateY(8px); }
  78%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes tradeFxV2Arrival {
  0%, 67% { opacity: 0; transform: translateY(6px) scale(0.86); }
  76%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes tradeFxV2Continue {
  0% { opacity: 0.34; transform: scale(0.96); filter: saturate(0.5); }
  58% { opacity: 1; transform: scale(1.04); filter: saturate(1.15); }
  100% { opacity: 1; transform: scale(1); filter: none; }
}

@keyframes tradeFxV2Aura {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 0.96; transform: scale(1.06); }
}

@keyframes tradeFxV2Float {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-5px); }
}

@keyframes tradeFxV2Coin {
  0%, 100% { transform: translateY(2px) rotateY(0); }
  50% { transform: translateY(-4px) rotateY(18deg); }
}

@keyframes tradeFxV2SlowSpin {
  to { transform: rotate(360deg); }
}

@keyframes tradeFxV2Rune {
  0%, 100% { opacity: 0.14; transform: translateY(5px) rotate(45deg) scale(0.78); }
  50% { opacity: 0.62; transform: translateY(-7px) rotate(135deg) scale(1.02); }
}

@keyframes tradeFxV2OverlayOpacity {
  from { opacity: 0; }
  to { opacity: 1; }
}

.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-rays,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-runes span,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-orbit,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-ring::before,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-ring::after,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-aura,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-item img,
.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-coin {
  animation-play-state: paused;
}

.online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-carrier {
  will-change: auto;
}

@media (orientation: landscape) {
  .online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-verified,
  .online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-verified span {
    opacity: 1;
    transform: none;
  }

  .online-trade-fx-scene.trade-fx-v2.is-settled .online-trade-fx-verified span {
    display: block;
  }
}

html.is-touch body.online-trade-fx-open .online-trade-fx-overlay {
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: tradeFxV2OverlayOpacity 240ms ease-out both;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 {
  --trade-fx-card: clamp(112px, 32vmin, 148px);
  --trade-fx-edge: max(2%, env(safe-area-inset-left));
  width: 100%;
  height: 100%;
  max-height: none;
  gap: 4px;
  padding: max(7px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title {
  min-height: 46px;
  gap: 1px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title > span {
  font-size: 9px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-cycle {
  min-height: 27px;
  font-size: clamp(20px, 5.5vmin, 29px);
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title small {
  font-size: 10px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-stage {
  min-height: 0;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner {
  width: min(30%, 172px);
  padding: 4px 7px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner span {
  font-size: 7px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-owner strong {
  font-size: 10px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item {
  gap: 3px;
  padding: 7px;
  border-radius: 14px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-object {
  min-height: clamp(68px, 20vmin, 92px);
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item img {
  width: clamp(68px, 20vmin, 92px);
  height: clamp(68px, 20vmin, 92px);
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-coin {
  width: clamp(54px, 16vmin, 72px);
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-label {
  padding: 3px 6px;
  font-size: 8px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item-copy strong {
  font-size: 11px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-item-copy small,
html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-money {
  font-size: 9px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-gate {
  width: clamp(78px, 22vmin, 112px);
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phases {
  bottom: 0;
  min-height: 23px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phase {
  padding: 4px 8px;
  font-size: 8px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer {
  min-height: 46px;
  gap: 7px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt {
  min-height: 44px;
  gap: 6px;
  padding: 5px 7px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt small {
  font-size: 8px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt strong {
  font-size: 10px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer button {
  min-width: 104px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 10px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified {
  left: max(7px, env(safe-area-inset-left));
  top: max(7px, env(safe-area-inset-top));
  max-width: 29%;
  gap: 5px;
  padding: 4px 7px 4px 4px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified i {
  width: 18px;
  height: 18px;
  font-size: 10px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified span {
  font-size: 8px;
}

html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sync-warning {
  bottom: 55px;
  width: min(560px, calc(100% - 122px));
  padding: 7px 10px;
  font-size: 9px;
}

@media (max-height: 440px) and (orientation: landscape) {
  html.is-touch .online-trade-fx-scene.trade-fx-v2 {
    gap: 2px;
    padding: max(5px, env(safe-area-inset-top)) max(7px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-runes,
  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets {
    display: none;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title {
    min-height: 40px;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-cycle {
    min-height: 24px;
    font-size: clamp(19px, 5.4vmin, 24px);
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title small {
    font-size: 9px;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation {
    top: calc(54% + 42px);
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer {
    min-height: 44px;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt {
    min-height: 42px;
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  html.is-touch .online-trade-fx-scene.trade-fx-v2 {
    --trade-fx-card: clamp(108px, 32vw, 126px);
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-footer button {
    justify-self: center;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified {
    max-width: none;
    padding-right: 4px;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified span {
    display: none;
  }

  html.is-touch .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sync-warning {
    bottom: 112px;
    width: calc(100% - 20px);
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.online-trade-fx-open .online-trade-fx-overlay,
  .online-trade-fx-scene.trade-fx-v2,
  .online-trade-fx-scene.trade-fx-v2 *,
  .online-trade-fx-scene.trade-fx-v2 *::before,
  .online-trade-fx-scene.trade-fx-v2 *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-arrival,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phase--arrive {
    opacity: 1;
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-verified,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-receipt,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-arrival {
    transform: none;
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-confirmation {
    transform: translate(-50%, 0);
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier--sent {
    opacity: 0.74;
    transform: translate3d(var(--trade-fx-travel), -50%, 0) scale(0.92);
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-carrier--received {
    opacity: 1;
    transform: translate3d(var(--trade-fx-travel-back), -50%, 0) scale(1.055);
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-start,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core span,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phase--lock,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-phase--cross,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-packets,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-sparks,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-wave,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-flash {
    display: none;
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-title-final,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core,
  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core b {
    opacity: 1;
    transform: none;
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-core {
    background-color: rgba(var(--trade-fx-accent), 0.86);
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-path--top {
    opacity: 0.18;
    transform: translateY(-50px) scaleX(1);
  }

  .online-trade-fx-scene.trade-fx-v2 .online-trade-fx-path--bottom {
    opacity: 0.18;
    transform: translateY(50px) scaleX(1);
  }
}

/* World-space Health Center ceremony: healer -> trainer -> ground bloom. */
.health-center-heal {
  inset: 0;
  border-radius: var(--radius);
  transition: opacity 220ms ease;
}
.health-center-heal__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 24% 20% at var(--heal-target-x) var(--heal-target-y), rgba(233,255,216,.4) 0%, rgba(103,238,164,.17) 42%, transparent 76%),
    radial-gradient(ellipse 15% 12% at var(--heal-source-x) var(--heal-source-y), rgba(255,242,164,.24), transparent 74%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: health-center-heal-veil 2200ms ease-out both;
}
.health-center-heal__stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.health-center-heal__stream-glow,
.health-center-heal__stream-core {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.health-center-heal__stream-glow {
  stroke: rgba(87,255,175,.35);
  stroke-width: 13;
  filter: blur(4px);
  animation: health-center-heal-stream 1500ms cubic-bezier(.2,.72,.22,1) 120ms both;
}
.health-center-heal__stream-core {
  stroke: url("#healthCenterHealGradient");
  stroke-width: 2.5;
  filter: url("#healthCenterHealGlow");
  animation: health-center-heal-stream 1420ms cubic-bezier(.2,.72,.22,1) 190ms both;
}
.health-center-heal__stream-orb {
  fill: #f7ffd2;
  stroke: #8effc3;
  stroke-width: 1.5;
  opacity: 0;
  animation: health-center-heal-orb 1050ms ease-out both;
}
.health-center-heal__stream-orb--one { animation-delay: 220ms; }
.health-center-heal__stream-orb--two { animation-delay: 450ms; }
.health-center-heal__source {
  position: absolute;
  left: var(--heal-source-x);
  top: var(--heal-source-y);
  width: clamp(30px,6%,48px);
  aspect-ratio: 1.55;
  border: 1px solid rgba(255,246,175,.88);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(255,236,137,.85), 0 0 24px rgba(103,245,166,.48), inset 0 0 13px rgba(242,255,207,.55);
  opacity: 0;
  transform: translate(-50%,-50%) scale(.38);
  animation: health-center-heal-source 1050ms cubic-bezier(.16,.8,.22,1) both;
}
.health-center-heal__source::before,
.health-center-heal__source::after,
.health-center-heal__source span {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(183,255,207,.58);
  border-radius: 50%;
  opacity: 0;
  animation: health-center-heal-source-ring 880ms ease-out 120ms both;
}
.health-center-heal__source::after { animation-delay: 270ms; }
.health-center-heal__source span {
  inset: 34%;
  border: 0;
  background: #fffbd0;
  box-shadow: 0 0 10px #eaffb6;
  animation: health-center-heal-source-core 900ms ease-out both;
}
.health-center-heal__ground {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  width: clamp(58px,12%,100px);
  aspect-ratio: 2.15;
  transform: translate(-50%,-50%);
}
.health-center-heal__ground > span {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(178,255,204,.92);
  border-radius: 50%;
  box-shadow: 0 0 11px rgba(89,255,170,.62), inset 0 0 13px rgba(255,246,178,.4);
  opacity: 0;
  transform: scale(.25);
  animation: health-center-heal-ground-ring 980ms cubic-bezier(.16,.76,.2,1) 760ms both;
}
.health-center-heal__ground > span:nth-child(2) { animation-delay: 930ms; }
.health-center-heal__ground b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 65% 8% 65% 8%;
  background: radial-gradient(circle at 35% 30%,#fffbd0,#77f0ad 55%,#279c75);
  box-shadow: 0 0 9px rgba(235,255,190,.94), 0 0 24px rgba(62,239,155,.78);
  opacity: 0;
  transform: translate(-50%,-50%) rotate(45deg) scale(.2);
  animation: health-center-heal-bloom 1040ms cubic-bezier(.16,.8,.2,1) 780ms both;
}
.health-center-heal__petals {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  width: 1px;
  height: 1px;
}
.health-center-heal__petals i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--heal-size);
  height: calc(var(--heal-size) * 1.65);
  border-radius: 80% 8% 80% 8%;
  background: linear-gradient(145deg,#fff8bc,#79f2ac 70%);
  box-shadow: 0 0 7px rgba(113,255,180,.78);
  opacity: 0;
  transform: rotate(var(--heal-angle)) translateX(8px) scale(.2);
  animation: health-center-heal-petal 780ms ease-out var(--heal-delay) both;
}
.health-center-heal__status {
  position: absolute;
  left: var(--heal-target-x);
  top: var(--heal-target-y);
  display: grid;
  grid-template-columns: 7px auto;
  align-items: center;
  column-gap: 7px;
  min-width: clamp(138px,25%,204px);
  padding: 6px 10px 8px;
  color: #f4ffe9;
  background: linear-gradient(90deg,transparent,rgba(8,48,36,.72) 17%,rgba(8,48,36,.72) 83%,transparent);
  text-shadow: 0 1px 8px rgba(112,255,178,.92);
  opacity: 0;
  transform: translate(-50%,40px);
  animation: health-center-heal-status 960ms ease-out 1120ms both;
}
.health-center-heal__status span {
  width: 7px;
  height: 7px;
  background: #dfffb3;
  box-shadow: 0 0 8px rgba(126,255,178,.95);
  transform: rotate(45deg);
}
.health-center-heal__status strong {
  font-size: clamp(.58rem,1.45vw,.76rem);
  font-weight: 900;
  letter-spacing: .17em;
  line-height: 1;
  white-space: nowrap;
}
.health-center-heal__status i {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 1px;
  background: linear-gradient(90deg,transparent,#9dffc3 18%,#fff2a8 82%,transparent);
  box-shadow: 0 0 6px rgba(107,255,176,.75);
  transform: scaleX(0);
  animation: health-center-heal-status-line 620ms ease-out 1210ms both;
}
@keyframes health-center-heal-veil {
  0%,8% { opacity: 0; }
  35%,66% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes health-center-heal-stream {
  0% { opacity: 0; stroke-dashoffset: 1; }
  15% { opacity: 1; }
  58% { opacity: 1; stroke-dashoffset: 0; }
  76% { opacity: .78; stroke-dashoffset: 0; }
  100% { opacity: 0; stroke-dashoffset: -1; }
}
@keyframes health-center-heal-orb {
  0%,8% { opacity: 0; }
  24%,72% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes health-center-heal-source {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.38); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  62% { opacity: .88; transform: translate(-50%,-50%) scale(.92); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.68); }
}
@keyframes health-center-heal-source-ring {
  0% { opacity: 0; transform: scale(.35); }
  24% { opacity: .85; }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes health-center-heal-source-core {
  0% { opacity: 0; transform: scale(.2); }
  25%,68% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.5); }
}
@keyframes health-center-heal-ground-ring {
  0% { opacity: 0; transform: scale(.25); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.75); }
}
@keyframes health-center-heal-bloom {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(45deg) scale(.2); }
  30% { opacity: 1; transform: translate(-50%,-50%) rotate(135deg) scale(1.15); }
  70% { opacity: .9; transform: translate(-50%,-54%) rotate(185deg) scale(.92); }
  100% { opacity: 0; transform: translate(-50%,-80%) rotate(225deg) scale(.45); }
}
@keyframes health-center-heal-petal {
  0% { opacity: 0; transform: rotate(var(--heal-angle)) translateX(8px) scale(.2); }
  20%,66% { opacity: .95; }
  100% { opacity: 0; transform: rotate(calc(var(--heal-angle) + 32deg)) translateX(var(--heal-distance)) translateY(-16px) scale(.9); }
}
@keyframes health-center-heal-status {
  0% { opacity: 0; transform: translate(-50%,46px); }
  22%,74% { opacity: 1; transform: translate(-50%,40px); }
  100% { opacity: 0; transform: translate(-50%,34px); }
}
@keyframes health-center-heal-status-line {
  0% { opacity: 0; transform: scaleX(0); }
  35%,82% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .health-center-heal__stream,
  .health-center-heal__source::before,
  .health-center-heal__source::after,
  .health-center-heal__petals { display: none; }
  .health-center-heal__source,
  .health-center-heal__ground > span,
  .health-center-heal__ground b {
    animation-duration: 360ms;
    animation-delay: 0ms;
  }
  .health-center-heal__status { animation: health-center-heal-status 800ms ease-out both; }
}

/* Final tactics legibility pass: large desktop camera controls, an explicit
   portrait-roster continuation badge, and a slimmer landscape HUD that gives
   the diorama a true play lane without sacrificing 42px touch targets. */
@media (min-width: 761px) and (pointer: fine) {
  .tactics-layer .tactics-topbar {
    height: 48px;
  }

  .tactics-layer .tactics-camera-button,
  .tactics-layer .tactics-facing-button {
    width: 48px;
    height: 48px;
  }

  .tactics-layer .tactics-camera-button {
    font-size: 0.72rem;
  }

  .tactics-layer .tactics-facing-button {
    font-size: 0.68rem;
  }
}

@media (max-width: 760px) and (orientation: portrait), (pointer: coarse) and (orientation: portrait) {
  .tactics-turn-card[data-more-turns]::after {
    content: attr(data-more-turns) " \203A";
    position: absolute;
    right: -2px;
    bottom: -1px;
    z-index: 4;
    min-width: 24px;
    padding: 3px 5px;
    border: 1px solid rgba(168, 238, 255, 0.76);
    border-radius: 999px;
    background: rgba(4, 15, 25, 0.94);
    color: #eaffff;
    font-size: 0.58rem;
    font-weight: 950;
    line-height: 1;
    text-align: center;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.58), 0 0 10px rgba(86, 218, 255, 0.28);
    pointer-events: none;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .tactics-turn-order {
    right: max(124px, calc(env(safe-area-inset-right) + 124px));
  }

  html.is-touch .tactics-panel {
    width: clamp(146px, 18.5vw, 150px);
  }

  html.is-touch .tactics-panel .tactics-unit-panel {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 5px;
  }

  html.is-touch .tactics-panel .tactics-panel-portrait,
  html.is-touch .tactics-panel .tactics-panel-portrait.small {
    width: 32px;
    height: 32px;
  }

  html.is-touch .tactics-panel .tactics-stat-row {
    grid-template-columns: 18px minmax(36px, 1fr) 32px;
    gap: 3px;
  }

  html.is-touch .tactics-panel .tactics-unit-heading em {
    overflow: visible;
    white-space: normal;
  }

  html.is-touch .tactics-panel .tactics-unit-meta-full {
    display: none;
  }

  html.is-touch .tactics-panel .tactics-unit-meta-compact {
    display: block;
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  html.is-touch .tactics-panel .tactics-unit-foot {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  html.is-touch .tactics-right-dock {
    width: clamp(102px, 12.4vw, 106px);
  }

  .tactics-layer:has(.tactics-right-dock.has-ability-detail) .tactics-panel {
    display: none;
  }

  html.is-touch .tactics-actions button {
    font-size: 0.66rem;
  }

  html.is-touch .tactics-inspect-dock {
    width: clamp(146px, 18.5vw, 150px);
  }

  html.is-touch .tactics-inspect-dock .tactics-unit-panel.compact {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 4px;
  }

  html.is-touch .tactics-inspect-dock .tactics-panel-portrait,
  html.is-touch .tactics-inspect-dock .tactics-panel-portrait.small {
    width: 32px;
    height: 32px;
  }

  html.is-touch .tactics-inspect-dock .tactics-unit-panel.compact .tactics-stat-row {
    grid-template-columns: 16px minmax(28px, 1fr) 28px;
    gap: 2px;
  }

  html.is-touch .tactics-tutorial-banner {
    right: max(132px, calc(env(safe-area-inset-right) + 132px));
  }
}

/* Narrow portrait webviews reserve enough rhythm for all five original status
   labels. Keep this after the legacy desktop skin so the 320px override wins. */
@media (max-width: 360px) {
  html:not(.is-touch) .side-panel .status-grid {
    grid-template-columns: minmax(0, 1.36fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.84fr);
    column-gap: 1px;
  }

  html:not(.is-touch) .side-panel .status-grid div {
    padding-inline: 1px;
  }

  html:not(.is-touch) .side-panel .status-grid span {
    font-size: 0.5rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  html:not(.is-touch) .side-panel .status-grid strong {
    font-size: 0.74rem;
  }

  html:not(.is-touch) .side-panel #money {
    gap: 3px;
  }

  html:not(.is-touch) .side-panel #money::before {
    flex-basis: 12px;
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   AAA cinematic layer v3 — evolution scene + capture verdict + catch showcase
   Appended layer: every rule below intentionally wins the cascade over the
   base skin (9106-9486 / 14635-15497 / 9490-9925) and the 48342 append layer.
   Non-stone evolution timeline is retimed 4.4s -> 6.6s; the stone act still
   shifts everything +2.4s via animation-delay, and the holo sprite variants
   keep their own keyframes (duration-only overrides below).
   Beat map (percent of 6.6s): hush/anticipation 0-22, charge 22-42, silhouette
   strobe 42-57.5, hit-stop hold 57.5-60.5, white-out 60.5-62, reveal 62-100.
   ========================================================================== */

/* ---- evolution: stage + camera ---------------------------------------- */

.evolution-scene {
  --conv-r: min(250px, 30vw);
  --burst-r: min(320px, 38vw);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 245, 205, 0.16), rgba(56, 74, 116, 0.22) 34%, rgba(8, 12, 24, 0.97) 78%),
    #070b16;
  animation: evo-scene-cam-v3 6.6s linear both, evo-scene-bg-v3 6.6s linear both;
}

/* hold act: the stage itself cuts to near-black so the silhouette-on-rim is
   the only thing alive, then the white-out detonates against real darkness */
@keyframes evo-scene-bg-v3 {
  0%, 57.4% { background-image: radial-gradient(circle at 50% 46%, rgba(255, 245, 205, 0.16), rgba(56, 74, 116, 0.22) 34%, rgba(8, 12, 24, 0.97) 78%), linear-gradient(#070b16, #070b16); }
  57.5%, 60.4% { background-image: radial-gradient(circle at 50% 46%, rgba(255, 236, 190, 0.05), rgba(24, 30, 48, 0.3) 30%, rgba(4, 6, 12, 0.99) 72%), linear-gradient(#04060c, #04060c); }
  60.5%, 100% { background-image: radial-gradient(circle at 50% 46%, rgba(255, 245, 205, 0.16), rgba(56, 74, 116, 0.22) 34%, rgba(8, 12, 24, 0.97) 78%), linear-gradient(#070b16, #070b16); }
}

@keyframes evo-scene-cam-v3 {
  0% { transform: scale(1) translate(0, 0); }
  22% { transform: scale(1.008) translate(0, 0); }
  42% { transform: scale(1.028) translate(0, 0); }
  47% { transform: scale(1.03) translate(1.4px, -1px); }
  50% { transform: scale(1.033) translate(-1.8px, 1.2px); }
  53% { transform: scale(1.036) translate(1.6px, 1.4px); }
  56% { transform: scale(1.039) translate(-2.2px, -1.6px); }
  57.6%, 60.5% { transform: scale(1.042) translate(0, 0); }
  62% { transform: scale(1.09) translate(0, 0); }
  63.2% { transform: scale(1.024) translate(-9px, 5px); }
  64.4% { transform: scale(1.02) translate(7px, -5px); }
  65.6% { transform: scale(1.012) translate(-4px, -2.5px); }
  67% { transform: scale(1.007) translate(2.5px, 1.5px); }
  68.6% { transform: scale(1.003) translate(-1px, 0.5px); }
  70%, 100% { transform: scale(1) translate(0, 0); }
}

.evolution-scene--stone {
  /* forwards, NOT both, on the two delayed animations: with `both` their
     backwards fill applies the 0% frame DURING the 2.4s delay, and - being
     later in the list - that identity transform overrode evo-stone-cam-v3
     entirely, so the slam's camera kick never rendered at all. */
  animation: evo-stone-cam-v3 2.4s linear both, evo-scene-cam-v3 6.6s linear 2.4s forwards, evo-scene-bg-v3 6.6s linear 2.4s forwards;
}

@keyframes evo-stone-cam-v3 {
  0%, 94.5% { transform: scale(1) translate(0, 0); }
  95.5% { transform: scale(1.018) translate(-6px, 4px); }
  97% { transform: scale(1.022) translate(5px, -4px); }
  98.4% { transform: scale(1.02) translate(-3px, 2px); }
  /* settle back to scale(1): evo-scene-cam-v3 takes over at exactly 2.4s
     from ITS 0% frame, scale(1) - ending held at 1.02 was a 2% jump cut */
  100% { transform: scale(1) translate(0, 0); }
}

/* ---- evolution: framing (letterbox + vignette + grade) ------------------ */

.evo-letterbox {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.evo-letterbox::before,
.evo-letterbox::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(26px, 9%, 62px);
  background: #04060b;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.65);
}

.evo-letterbox::before {
  top: 0;
  animation: evo-lb-top-v3 6.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.evo-letterbox::after {
  bottom: 0;
  animation: evo-lb-bottom-v3 6.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes evo-lb-top-v3 {
  0% { transform: translateY(-102%); }
  7%, 57% { transform: translateY(0); }
  57.6%, 60.5% { transform: translateY(12%); }
  62%, 88% { transform: translateY(0); }
  97%, 100% { transform: translateY(-102%); }
}

@keyframes evo-lb-bottom-v3 {
  0% { transform: translateY(102%); }
  7%, 57% { transform: translateY(0); }
  57.6%, 60.5% { transform: translateY(-12%); }
  62%, 88% { transform: translateY(0); }
  97%, 100% { transform: translateY(102%); }
}

.evo-vignette {
  position: absolute;
  inset: -3%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(2, 4, 9, 0.9) 94%);
  opacity: 0;
  animation: evo-vig-v3 6.6s linear both;
}

@keyframes evo-vig-v3 {
  0% { opacity: 0; transform: scale(1.22); }
  10% { opacity: 0.85; transform: scale(1.08); }
  42% { opacity: 0.95; transform: scale(0.9); }
  57.6%, 60.5% { opacity: 1; transform: scale(0.82); }
  63% { opacity: 0.55; transform: scale(1.3); }
  78% { opacity: 0.4; transform: scale(1.24); }
  100% { opacity: 0.5; transform: scale(1.18); }
}

.evo-grade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: soft-light;
  animation: evo-grade-v3 6.6s linear both;
}

/* The warm half of this wash is what made EVERY line in the game evolve in the
   same gold. Each warm stop is now a variable the morph fills with the SAME
   value and saturation at the pair's own measured hue (game.js,
   EVO_MORPH_GRADE_STOPS), so only the colour moves and the exposure ramp is
   untouched; the cold blue opening and the black hit-stop are left alone. The
   fallbacks are the authored hexes verbatim, so a scene whose morph never armed
   - or a pair with no chroma of its own - grades exactly as it always did.
   NOT a filter: filter animates on the compositor, which snapshots its keyframe
   values when the animation starts and does not reliably re-resolve a custom
   property the morph sets a beat later (measured: the grade kept its amber on
   one capture in two). background-color runs on the main thread and does. */
@keyframes evo-grade-v3 {
  0%, 12% { background-color: #22365c; opacity: 0.92; }
  30% { background-color: var(--evo-grade-a, #4a3a20); opacity: 0.75; }
  46% { background-color: var(--evo-grade-b, #8a5a1e); opacity: 0.8; }
  57.4% { background-color: var(--evo-grade-c, #b98a3a); opacity: 0.85; }
  58.4%, 60.4% { background-color: #0c1220; opacity: 0.94; }
  62% { background-color: #ffffff; opacity: 0; }
  70% { background-color: var(--evo-grade-d, #d8c07a); opacity: 0.5; }
  100% { background-color: var(--evo-grade-e, #caa85f); opacity: 0.4; }
}

/* ---- evolution: retimed base layers ------------------------------------ */

.evo-bg {
  animation: evo-spin 6.6s linear infinite, evo-flare-v3 6.6s ease-in-out forwards;
}

@keyframes evo-flare-v3 {
  0% { opacity: 0.05; filter: blur(2px) brightness(0.7) saturate(0.7); }
  22% { opacity: 0.13; filter: blur(1.5px) brightness(0.85) saturate(0.85); }
  42% { opacity: 0.4; filter: blur(1px) brightness(1.05); }
  57.4% { opacity: 0.8; filter: blur(0) brightness(1.6); }
  58.4%, 60.4% { opacity: 0.16; filter: blur(0) brightness(0.85); }
  62% { opacity: 1; filter: blur(0) brightness(2.4); }
  74% { opacity: 0.55; filter: blur(0) brightness(1.35); }
  100% { opacity: 0.38; filter: blur(1px) brightness(1.05); }
}

.evo-light-column {
  animation: evo-column-v3 6.6s ease-in-out forwards;
}

@keyframes evo-column-v3 {
  0%, 20% { opacity: 0; transform: translateX(-50%) scaleX(0.2); }
  42% { opacity: 0.5; transform: translateX(-50%) scaleX(0.55); }
  57.4% { opacity: 0.95; transform: translateX(-50%) scaleX(1.35); }
  58.4%, 60.4% { opacity: 0.06; transform: translateX(-50%) scaleX(1.1); }
  62% { opacity: 1; transform: translateX(-50%) scaleX(2.2); }
  76%, 100% { opacity: 0; transform: translateX(-50%) scaleX(2.6); }
}

.evo-before { animation: evo-before 6.6s ease-in-out forwards; }
.evo-after { opacity: 0; animation: evo-after 6.6s ease-in-out forwards; }

.evo-before.holo-sprite,
.evo-after.holo-sprite,
.evo-before.black-holo-sprite,
.evo-after.black-holo-sprite { animation-duration: 6.6s; }

/* rings now CONVERGE during the charge (was: infinite outward pulse) */
.evo-rings span {
  border-width: 3px;
  animation: evo-ring-v3 1.5s ease-in 2;
}

.evo-rings span:nth-child(2) { --ring-extra: 90px; animation-delay: 0.45s; }
.evo-rings span:nth-child(3) { --ring-extra: 180px; animation-delay: 0.9s; }
.evo-rings span:nth-child(4) { --ring-extra: 270px; animation-duration: 1.2s; animation-delay: 1.35s; }

.evolution-scene--stone .evo-rings span { animation-delay: 2.85s; }
.evolution-scene--stone .evo-rings span:nth-child(2) { animation-delay: 3.3s; }
.evolution-scene--stone .evo-rings span:nth-child(3) { animation-delay: 3.75s; }
.evolution-scene--stone .evo-rings span:nth-child(4) { animation-delay: 4.2s; }

@keyframes evo-ring-v3 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
  30% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.24); }
}

/* burst sparks: fire ONLY at the blowout, as elongated streaks */
.evo-burst span {
  width: 5px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #ffd76a);
  box-shadow: 0 0 12px rgba(255, 220, 130, 0.9);
  animation: evo-burst-v3 6.6s linear both;
  animation-delay: calc(var(--i) * 6ms);
}

@keyframes evo-burst-v3 {
  0%, 61.9% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-6px) scaleY(0.5); }
  63% { opacity: 1; }
  67% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--burst-r, 300px))) scaleY(2.2); }
  74%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1.25 * var(--burst-r, 300px))) scaleY(1); }
}

.evolution-scene--stone .evo-burst span { animation-delay: calc(var(--i) * 6ms + 2400ms); }

/* orbit pips -> accelerating light streaks spiralling INTO the monster */
.evo-orbit span {
  width: 4px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, #dff6ff, rgba(150, 242, 210, 0.08));
  box-shadow: 0 0 14px rgba(152, 242, 210, 0.75);
  filter: blur(0.4px);
  animation: evo-orbit-v3 6.6s cubic-bezier(0.55, 0.1, 0.6, 0.9) forwards;
  animation-delay: calc(var(--i) * 26ms);
}

/* RETIRED BEFORE THE FLOW ACT. These are opaque hard-edged bars, and the old
   stops kept them alive to 59.5% of 6.6s (3927ms) - plus up to 442ms of the
   per-pip stagger, so the last of them died at 4369ms. That put them INSIDE the
   morph: they bunched into a parallel comb beside the creature at ~3.2-3.4s,
   exactly while the head was dissolving, and on a short pair they were still
   hanging in black space during the hit-stop hold, reading as a UI graphic
   pasted over the cinematic.
   The whole spiral is now the same shape on a shorter clock: the last pip
   (--i 17, delay 442ms) is at opacity 0 by 27.5% + 442ms = 2257ms, which is
   3ms under EVO_MORPH_PARTICLES.flowStart (2260). The charge act still ends
   with light being swallowed by the creature - it is just swallowed on the
   frame the body starts coming apart instead of over the top of it. */
@keyframes evo-orbit-v3 {
  0%, 6% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(240px) rotate(8deg) scaleY(0.6); }
  12% { opacity: 0.9; }
  20% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 300deg)) translateX(150px) rotate(14deg) scaleY(1.5); }
  25% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 760deg)) translateX(52px) rotate(20deg) scaleY(2.1); }
  27.5% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 900deg)) translateX(8px) rotate(20deg) scaleY(0.8); }
  28%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 900deg)) translateX(0) scaleY(0.8); }
}

/* ---- evolution: new light + particle layers ---------------------------- */

.evo-groundglow {
  position: absolute;
  left: 50%;
  top: 63%;
  width: min(420px, 58%);
  height: min(150px, 24%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* --evo-heat / --evo-heat2 are "r, g, b" triplets the morph measures off THIS
     pair of sprites (see evolutionMorphHeat in game.js). The fallbacks are the
     amber this always was, so a scene whose morph never armed - reduced motion,
     no canvas, a greyscale sprite - is byte-identical to before. */
  background: radial-gradient(ellipse, rgba(var(--evo-heat, 255, 214, 138), 0.75), rgba(var(--evo-heat2, 255, 178, 80), 0.22) 55%, transparent 75%);
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  animation: evo-ground-v3 6.6s ease-in-out both;
}

@keyframes evo-ground-v3 {
  0%, 6% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.85); }
  42% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  57.4% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  58.4%, 60.4% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  80% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.2); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}

.evo-converge {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.evo-converge span {
  --angle: calc(var(--i) * 18deg);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(150, 220, 255, 0.12));
  box-shadow: 0 0 10px rgba(170, 225, 255, 0.8);
  opacity: 0;
  animation: evo-converge-v3 6.6s linear both;
  animation-delay: calc(var(--i) * 47ms);
}

/* four inward waves, each one shorter than the last (speed ramp) */
@keyframes evo-converge-v3 {
  0%, 4% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--conv-r, 250px))) scaleY(0.4); }
  10% { opacity: 0.9; }
  20% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-30px) scaleY(1.4); }
  22% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 40deg)) translateY(calc(-1 * var(--conv-r, 250px))) scaleY(0.4); }
  30% { opacity: 0.95; }
  36% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 40deg)) translateY(-26px) scaleY(1.5); }
  38% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 80deg)) translateY(calc(-1 * var(--conv-r, 250px))) scaleY(0.4); }
  44% { opacity: 1; }
  48% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 80deg)) translateY(-22px) scaleY(1.6); }
  50% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 120deg)) translateY(calc(-0.88 * var(--conv-r, 250px))) scaleY(0.5); }
  54.5% { opacity: 1; }
  57.5%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--angle) + 120deg)) translateY(-18px) scaleY(1.7); }
}

.evo-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 8deg, transparent 0 4.4deg, rgba(var(--evo-heat, 255, 236, 180), 0.15) 6deg, transparent 9.2deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 42%, transparent 68%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4) 42%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: evo-rays-in-v3 6.6s linear both;
}

@keyframes evo-rays-in-v3 {
  0%, 61.5% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
  64% { opacity: 0.78; }
  82% { opacity: 0.55; }
  100% { opacity: 0.45; transform: translate(-50%, -50%) rotate(26deg); }
}

.evo-speedlines {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 200%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1.45);
  background: repeating-conic-gradient(from 3deg, transparent 0 1.1deg, rgba(255, 255, 255, 0.55) 1.45deg, transparent 2.6deg);
  -webkit-mask-image: radial-gradient(circle, transparent 26%, rgba(0, 0, 0, 0.85) 46%, rgba(0, 0, 0, 0.9) 62%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 26%, rgba(0, 0, 0, 0.85) 46%, rgba(0, 0, 0, 0.9) 62%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: evo-lines-v3 6.6s linear both;
}

@keyframes evo-lines-v3 {
  0%, 61.8% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
  62.3% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.12); }
  65% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  67.5%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
}

/* ---- evolution: silhouette strobe (accelerating) + hit-stop hold ------- */

.evo-sil {
  filter:
    brightness(0)
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 40px rgba(255, 247, 168, 0.65));
}

.evo-sil-before { animation: evo-sil-before-v3 6.6s linear forwards; }
.evo-sil-after { animation: evo-sil-after-v3 6.6s linear forwards; }

/* swap cadence: 224/198/172/145/119/92/73ms, ending held on the NEW form */
@keyframes evo-sil-before-v3 {
  0%, 41.9% { opacity: 0; transform: scale(1); filter: brightness(0) invert(0) drop-shadow(0 0 14px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 40px rgba(255, 247, 168, 0.65)); }
  42%, 45.3% { opacity: 1; }
  45.4%, 48.3% { opacity: 0; }
  48.4%, 50.9% { opacity: 1; transform: scale(1.006); }
  51%, 53.1% { opacity: 0; }
  53.2%, 54.9% { opacity: 1; transform: scale(1.012); }
  55%, 56.3% { opacity: 0; }
  56.4%, 57.4% { opacity: 1; transform: scale(1.018); }
  57.5%, 100% { opacity: 0; }
}

@keyframes evo-sil-after-v3 {
  0%, 45.3% { opacity: 0; transform: scale(1); filter: brightness(0) invert(0.04) drop-shadow(0 0 14px rgba(255, 255, 255, 0.92)) drop-shadow(0 0 42px rgba(255, 247, 168, 0.7)); }
  45.4%, 48.3% { opacity: 1; }
  48.4%, 50.9% { opacity: 0; }
  51%, 53.1% { opacity: 1; transform: scale(1.008); }
  53.2%, 54.9% { opacity: 0; }
  55%, 56.3% { opacity: 1; transform: scale(1.014); }
  56.4%, 57.4% { opacity: 0; }
  /* hit-stop hold: flat-BLACK new silhouette on a white-hot rim - the
     darkest, stillest frame, right before the white-out detonates */
  57.5%, 60.4% { opacity: 1; transform: scale(1.02); filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 30px rgba(255, 236, 170, 0.5)); }
  /* ...and out at 62.6%, not 61.9%: between the two white impact plates
     (61.4-61.9%) nothing else is on stage, and a silhouette still dissolving
     through that beat is what stops it reading as a dropped frame. By the
     time the second plate lights it is under 0.21 and the plate swallows it.
     BOTH the plain and the .evo-morphing keyframes carry it. */
  62.6%, 100% { opacity: 0; transform: scale(1.02); }
}

/* ---- evolution: impact frame + chroma + shockwaves --------------------- */

.evo-impact {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: evo-impact-v3 6.6s steps(1, end) both;
}

/* The second plate used to fire at 62.6% (4132ms), which left 4100-4117ms with
   the silhouette already ended, .evo-after not yet started and only the reveal
   flash at 0.49 on stage - an empty half-lit frame in the middle of the punch,
   read as a dropped frame rather than a beat. Firing it at 61.9% (4085ms)
   closes that hole. NOTE the timing function is steps(1, end): the value holds
   from each keyframe to the NEXT one, so it is the 61.9% stop - not the 0-stop
   before it - that decides when the plate lights. */
@keyframes evo-impact-v3 {
  0%, 60.4% { opacity: 0; }
  60.5%, 61.4% { opacity: 0.98; }
  61.5%, 61.8% { opacity: 0; }
  61.9%, 63% { opacity: 0.88; }
  63.1%, 100% { opacity: 0; }
}

.evo-chroma {
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: evo-chroma-v3 6.6s linear both;
}

.evo-chroma-r { --cx: 6px; --cy: -3px; filter: sepia(1) saturate(9) hue-rotate(-45deg) brightness(1.25) contrast(1.35); }
.evo-chroma-c { --cx: -6px; --cy: 3px; filter: sepia(1) saturate(9) hue-rotate(150deg) brightness(1.25) contrast(1.35); }

@keyframes evo-chroma-v3 {
  0%, 61.9% { opacity: 0; transform: translate(0, 0) scale(1.22); }
  62% { opacity: 0.85; transform: translate(var(--cx), var(--cy)) scale(1.22); }
  63.2% { opacity: 0.5; transform: translate(calc(var(--cx) * 0.5), calc(var(--cy) * 0.5)) scale(1.08); }
  65.5%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

.evo-shockwave { animation: evo-shockwave-v3 6.6s cubic-bezier(0, 0.55, 0.45, 1) forwards; }

.evo-shockwave--late {
  border-color: rgba(255, 196, 120, 0.85);
  box-shadow: 0 0 34px rgba(255, 178, 96, 0.8), inset 0 0 26px rgba(255, 178, 96, 0.5);
  animation-delay: 90ms;
}

.evolution-scene--stone .evo-shockwave--late { animation-delay: 2490ms; }

@keyframes evo-shockwave-v3 {
  0%, 61.9% { opacity: 0; transform: scale(0.16); border-width: 7px; }
  63.4% { opacity: 0.95; }
  71%, 100% { opacity: 0; transform: scale(3.6); border-width: 1px; }
}

.evo-reveal-flash { animation: evo-reveal-flash-v3 6.6s linear forwards; }

@keyframes evo-reveal-flash-v3 {
  0%, 60% { opacity: 0; }
  63% { opacity: 0.9; }
  74%, 100% { opacity: 0; }
}

/* ---- stone act: shift the v3-added layers too --------------------------
   Every 6.6s layer runs on the scene clock and a stone scene prepends a 2.4s
   fusion act, but only the pre-v3 layers were ever given the 2.4s shift
   (styles.css:9616 and :49094). Un-shifted, these layers play their reveal
   beats mid-CHARGE - measured at 3.85-4.5s: the grade slams near-black then
   white, the groundglow blinks 1.0->0.1->1.0, both white impact plates
   strobe, translucent chroma ghosts of the NEW form flash over the old one,
   the speedlines fire and the ray wheel parks early - and the real blow-out
   at ~6.4s then plays with none of them. One delay each puts the whole
   charge/reveal exactly back on the level-up scene's beats. */
.evolution-scene--stone .evo-grade,
.evolution-scene--stone .evo-groundglow,
.evolution-scene--stone .evo-rays,
.evolution-scene--stone .evo-speedlines,
.evolution-scene--stone .evo-impact,
.evolution-scene--stone .evo-chroma { animation-delay: 2.4s; }

/* Letterbox + vignette must NOT simply be delayed: the bars and the framing
   already dress the fusion act from 0ms. Same stops on the 9s stone clock
   instead - entry unchanged, every later beat shifted +2.4s. */
.evolution-scene--stone .evo-letterbox::before { animation: evo-lb-top-stone 9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.evolution-scene--stone .evo-letterbox::after { animation: evo-lb-bottom-stone 9s cubic-bezier(0.16, 1, 0.3, 1) both; }
.evolution-scene--stone .evo-vignette { animation: evo-vig-stone 9s linear both; }

@keyframes evo-lb-top-stone {
  0% { transform: translateY(-102%); }
  5.1%, 68.5% { transform: translateY(0); }
  68.9%, 71% { transform: translateY(12%); }
  72.1%, 91.2% { transform: translateY(0); }
  97.8%, 100% { transform: translateY(-102%); }
}

@keyframes evo-lb-bottom-stone {
  0% { transform: translateY(102%); }
  5.1%, 68.5% { transform: translateY(0); }
  68.9%, 71% { transform: translateY(-12%); }
  72.1%, 91.2% { transform: translateY(0); }
  97.8%, 100% { transform: translateY(102%); }
}

@keyframes evo-vig-stone {
  0% { opacity: 0; transform: scale(1.22); }
  7.3% { opacity: 0.85; transform: scale(1.08); }
  57.5% { opacity: 0.95; transform: scale(0.9); }
  68.9%, 71% { opacity: 1; transform: scale(0.82); }
  72.9% { opacity: 0.55; transform: scale(1.3); }
  83.9% { opacity: 0.4; transform: scale(1.24); }
  100% { opacity: 0.5; transform: scale(1.18); }
}

/* ---- evolution: monster-wrap (heartbeat + dip, then Ken Burns) --------- */

.evolution-scene:not(.evolution-scene--stone) .evo-monster-wrap {
  animation:
    evo-heartbeat-v3 3.83s ease-in-out both,
    evo-kenburns-v3 2.77s cubic-bezier(0.25, 1, 0.5, 1) 3.83s both;
}

@keyframes evo-heartbeat-v3 {
  0%, 14% { transform: scale(1); }
  20% { transform: scale(1.015); }
  26% { transform: scale(1); }
  38% { transform: scale(1.03); }
  46% { transform: scale(1.004); }
  58% { transform: scale(1.05); }
  64% { transform: scale(1.008); }
  /* anticipation dip right before the strobe */
  70% { transform: scale(1.06, 0.94) translateY(7px); }
  76% { transform: scale(0.99, 1.03) translateY(-3px); }
  84% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes evo-kenburns-v3 {
  0%, 10% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.035) translateY(-4px); }
}

/* ---- evolution: caption + name reveal ---------------------------------- */

.evo-caption {
  z-index: 7;
  inset: auto 0 clamp(14px, 4%, 30px);
  animation: evo-caption-duck-v3 6.6s linear both;
}

@keyframes evo-caption-duck-v3 {
  0%, 38% { opacity: 1; }
  44%, 62% { opacity: 0.25; }
  67%, 100% { opacity: 1; }
}

.evolution-scene--stone .evo-caption { animation-delay: 2.4s; }

.evo-caption h2 {
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  letter-spacing: 0.04em;
  color: #ffedb8;
  text-shadow:
    0 2px 0 rgba(96, 58, 10, 0.65),
    0 5px 16px rgba(0, 0, 0, 0.65),
    0 0 30px rgba(255, 214, 120, 0.4);
}

.evo-caption--reveal h2 {
  animation: evo-name-in-v3 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes evo-name-in-v3 {
  0% { opacity: 0; letter-spacing: 0.4em; transform: translateY(14px) scale(0.92); }
  60% { opacity: 1; letter-spacing: 0.1em; }
  100% { opacity: 1; letter-spacing: 0.05em; transform: translateY(0) scale(1); }
}

/* ---- evolution: result card as a designed object ----------------------- */

.evolution-result {
  border: 1px solid rgba(255, 222, 150, 0.5);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26, 32, 52, 0.97), rgba(10, 14, 26, 0.98));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -50px 90px rgba(255, 190, 90, 0.09);
}

.evo-result-rays {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 160%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, transparent 0 5deg, rgba(255, 226, 160, 0.09) 7.4deg, transparent 12deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), transparent 62%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), transparent 62%);
  opacity: 0.65;
  pointer-events: none;
  animation: evo-result-rays-v3 42s linear infinite;
}

@keyframes evo-result-rays-v3 { to { transform: translate(-50%, -50%) rotate(360deg); } }

.evolution-result img {
  animation: evo-result-pop-v3 620ms cubic-bezier(0.34, 1.56, 0.64, 1) 120ms both;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 34px rgba(255, 214, 130, 0.45));
}

@keyframes evo-result-pop-v3 {
  0% { opacity: 0; transform: scale(0.72) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.evolution-result h2 {
  background: linear-gradient(180deg, #fffdf4, #ffe9ad 60%, #dcb05c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
  animation: evo-result-caption-v3 480ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}

.evolution-result .dialogue-actions {
  animation: evo-result-caption-v3 480ms cubic-bezier(0.16, 1, 0.3, 1) 620ms both;
}

@keyframes evo-result-caption-v3 {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- evolution: mobile landscape (844x390-class viewports) -------------- */

@media (orientation: landscape) and (max-height: 520px) {
  .evolution-scene { --conv-r: 150px; --burst-r: 200px; }

  .evo-letterbox::before,
  .evo-letterbox::after { height: clamp(18px, 7.5%, 34px); }

  .evo-caption { inset: auto 0 4px; gap: 1px; }
  .evo-caption h2 { font-size: clamp(1.25rem, 7.5vh, 2.1rem); }
  .evo-caption p { font-size: 0.72rem; }

  .evo-groundglow { top: 60%; }
}

/* ==========================================================================
   Capture verdict — hit-stop, impact frame, god rays, dimensional BOUND!
   ========================================================================== */

/* freeze-frame before the verdict: every FX span pauses mid-flight */
.fx-layer.fx-verdict-hold span { animation-play-state: paused !important; }

/* the held frame is also the darkest frame of the sequence */
.fx-capture-dim.presnap {
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    transparent 28px,
    rgba(2, 4, 8, 0.6) 86px,
    rgba(2, 4, 8, 0.94) 50%);
}

/* new full-stage overlays must dodge the .fx-layer span centring rule */
.fx-layer span.fx-capture-impact,
.fx-layer span.fx-capture-rays,
.fx-layer span.fx-capture-speedlines,
.fx-layer span.fx-capture-blackout { transform: none; }

/* anime double white-out at the seal moment — hard on/off, no fade */
.fx-capture-impact {
  position: absolute;
  inset: 0;
  z-index: 19;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: fx-cap-impact-v3 460ms steps(1, end) forwards;
}

@keyframes fx-cap-impact-v3 {
  0%, 13% { opacity: 0.98; }
  14%, 36% { opacity: 0; }
  37%, 45% { opacity: 0.85; }
  46%, 100% { opacity: 0; }
}

/* god rays bursting from the sealed charm */
.fx-capture-rays {
  position: absolute;
  inset: 0;
  z-index: 16;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 4deg at var(--fx, 70%) var(--fy, 42%), transparent 0 5deg, rgba(255, 240, 190, 0.3) 7deg, transparent 11deg);
  -webkit-mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.35) 30%, transparent 56%);
  mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.35) 30%, transparent 56%);
  animation: fx-cap-rays-v3 1600ms ease-out forwards;
}

@keyframes fx-cap-rays-v3 {
  0% { opacity: 0; }
  10% { opacity: 1; }
  68% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* radial speed lines: one sharp 400ms pop, then gone */
.fx-capture-speedlines {
  position: absolute;
  inset: -8%;
  z-index: 17;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transform-origin: var(--fx, 70%) var(--fy, 42%);
  background: repeating-conic-gradient(from 2deg at var(--fx, 70%) var(--fy, 42%), transparent 0 1.2deg, rgba(255, 255, 255, 0.5) 1.55deg, transparent 2.9deg);
  -webkit-mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 12%, rgba(0, 0, 0, 0.9) 34%, transparent 62%);
  mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 12%, rgba(0, 0, 0, 0.9) 34%, transparent 62%);
  animation: fx-cap-lines-v3 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fx-cap-lines-v3 {
  0% { opacity: 0.95; transform: scale(1.18); }
  60% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1); }
}

/* full-viewport focus veil: dims chrome/HUD around the stage for the beat */
.fx-capture-blackout {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 50% 45%, rgba(2, 5, 10, 0) 26%, rgba(2, 5, 10, 0.6) 100%);
  opacity: 0;
  pointer-events: none;
  animation: fx-cap-blackout-v3 1500ms ease-out forwards;
}

@keyframes fx-cap-blackout-v3 {
  0% { opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

/* starfall stars leave streaks now */
.fx-capture-starfall {
  filter: drop-shadow(0 -7px 7px rgba(255, 240, 180, 0.55));
  animation: capture-starfall-v3 1150ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes capture-starfall-v3 {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% - var(--fall, 80px))) rotate(0deg) scale(0.4); }
  12% { opacity: 1; }
  78% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sx, 0px) + var(--sway, 0px)), calc(-50% + var(--fall, 80px) * 0.5)) rotate(var(--spin, 160deg)) scale(1.1); }
}

/* wobble swings get faster as they escalate (driven by --wob-ms from JS) */
.fx-catch-ball.wob-l { animation: catch-wob-l var(--wob-ms, 700ms) cubic-bezier(0.36, 0.04, 0.22, 1) forwards; }
.fx-catch-ball.wob-r { animation: catch-wob-r var(--wob-ms, 700ms) cubic-bezier(0.36, 0.04, 0.22, 1) forwards; }
.fx-catch-ball.wob-l::before,
.fx-catch-ball.wob-r::before { animation: catch-wob-glow var(--wob-ms, 700ms) ease-out; }

/* ---- "BOUND!" — dimensional per-letter slam ---------------------------- */

.fx-catch-result {
  left: 50% !important;
  top: 31% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20;
  display: flex;
  align-items: baseline;
  gap: 0.015em;
  font-size: clamp(2.3rem, 7vw, 4.3rem);
  font-weight: 900;
  letter-spacing: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
  animation: fx-result-wrap-v3 1750ms linear forwards;
}

@keyframes fx-result-wrap-v3 {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-catch-result .l {
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  background: linear-gradient(178deg, #fffdf2 12%, #ffe9a0 38%, #f7b733 58%, #b4741f 78%, #ffedb0 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(122, 66, 10, 0.9)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
  opacity: 0;
  animation: fx-letter-slam-v3 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--li, 0) * 32ms);
}

.fx-catch-result.no .l {
  background: linear-gradient(178deg, #fff2ec 10%, #ff9d84 40%, #e8543f 62%, #7a1f14 84%, #ffc9b8 96%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(84, 16, 8, 0.9)) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6));
}

@keyframes fx-letter-slam-v3 {
  0% { opacity: 0; transform: scale(2.05) translateY(-16px); filter: drop-shadow(0 0 18px rgba(255, 244, 200, 0.95)); }
  55% { opacity: 1; transform: scale(0.94) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* shine sweep across the settled word */
.fx-catch-result::after {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: fx-result-shine-v3 620ms ease-out 760ms forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes fx-result-shine-v3 {
  0% { opacity: 0; transform: translateX(-130%); }
  18% { opacity: 0.85; }
  82% { opacity: 0.85; }
  100% { opacity: 0; transform: translateX(130%); }
}

/* ==========================================================================
   Catch showcase — layered depth, perspective entrance, designed card
   ========================================================================== */

.catch-vignette {
  position: absolute;
  inset: -2%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 44%, rgba(3, 6, 12, 0.85) 96%);
  animation: catch-vig-v3 5.2s ease-out both;
}

@keyframes catch-vig-v3 {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0.85; }
}

.catch-godrays {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 170%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 5deg, transparent 0 4.6deg, rgba(255, 240, 190, 0.12) 6.6deg, transparent 10deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 40%, transparent 66%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 40%, transparent 66%);
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: catch-godrays-in-v3 1400ms ease-out 260ms both, catch-godrays-spin-v3 44s linear infinite;
}

@keyframes catch-godrays-in-v3 { to { opacity: 0.9; } }
@keyframes catch-godrays-spin-v3 { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* card frame arrives with perspective, not just opacity; sits above the godray shine */
.catch-frame {
  animation: catch-frame-in-v3 640ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
  z-index: 2;
}

@keyframes catch-frame-in-v3 {
  0% { opacity: 0; transform: perspective(900px) rotateY(-14deg) translateY(20px) scale(0.93); }
  100% { opacity: 1; transform: perspective(900px) rotateY(0deg) translateY(0) scale(1); }
}

/* rim-lit silhouette copy behind the sprite */
.catch-sprite-rim {
  position: absolute;
  width: min(360px, 56vw);
  max-height: 62%;
  object-fit: contain;
  filter: brightness(0) invert(1) blur(8px);
  opacity: 0.5;
  transform: scale(1.05);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: catch-rim-breathe-v3 4.6s ease-in-out 950ms infinite;
}

@keyframes catch-rim-breathe-v3 {
  0%, 100% { opacity: 0.42; transform: scale(1.045) translateY(0); }
  50% { opacity: 0.6; transform: scale(1.06) translateY(-9px); }
}

/* sprite gets a slow Ken Burns on top of its float */
.catch-sprite { animation: catch-pop 720ms cubic-bezier(0.18, 1.5, 0.35, 1) both, catch-idle-v3 4.6s ease-in-out 950ms infinite; }

@keyframes catch-idle-v3 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-9px) scale(1.022); }
}

/* metallic seal badge */
.catch-seal {
  background: linear-gradient(180deg, #ffe9a8, #f3b93e 55%, #c98a1e);
  border: 1px solid rgba(255, 244, 208, 0.9);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -8px 14px rgba(140, 84, 10, 0.55);
  color: #4a2c05;
  text-shadow: 0 1px 0 rgba(255, 250, 225, 0.75);
}

/* richer confetti: varied shapes, spin, horizontal drift */
.catch-confetti span {
  width: 7px;
  height: 11px;
  border-radius: 1.5px;
  animation: catch-confetti-fall-v3 calc(2500ms + var(--r, 0) * 80ms) cubic-bezier(0.3, 0, 0.6, 1) calc(240ms + var(--d, 0) * 1.6ms) both;
}

.catch-confetti span:nth-child(3n) { width: 5px; height: 13px; background: var(--c2, #5fe08b); }
.catch-confetti span:nth-child(3n + 1) { background: #fff; width: 6px; height: 6px; border-radius: 50%; }
.catch-confetti span:nth-child(4n) { background: #ffd76a; }
.catch-confetti span:nth-child(5n) { background: var(--c1, #fff7a8); }

@keyframes catch-confetti-fall-v3 {
  0% { opacity: 0; transform: translate(0, -8%) rotate(0deg) rotateX(0deg); }
  8% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(18px - var(--r, 0) * 3px), 104vh) rotate(calc(240deg + var(--r, 0) * 40deg)) rotateX(320deg); }
}

/* caption typography */
.catch-caption h2 {
  background: linear-gradient(180deg, #fffdf4, #ffeebc 58%, #e3b968);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

/* ---- mobile landscape mirrors for the new showcase layers -------------- */

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  .catch-sprite-rim { width: clamp(118px, 40dvh, 210px); max-height: 46dvh; }
  .catch-godrays { top: 43%; }
}

/* ==========================================================================
   Reduced motion: disable every layer this file added or retimed
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .evolution-scene,
  .evolution-scene--stone,
  .evo-letterbox::before,
  .evo-letterbox::after,
  .evolution-scene--stone .evo-letterbox::before,
  .evolution-scene--stone .evo-letterbox::after,
  .evolution-scene--stone .evo-vignette,
  .evo-vignette,
  .evo-grade,
  .evo-groundglow,
  .evo-converge span,
  .evo-rays,
  .evo-speedlines,
  .evo-impact,
  .evo-chroma,
  .evo-shockwave,
  .evo-shockwave--late,
  .evo-reveal-flash,
  .evo-sil-before,
  .evo-sil-after,
  .evo-burst span,
  .evo-orbit span,
  .evo-rings span,
  .evolution-scene:not(.evolution-scene--stone) .evo-monster-wrap,
  .evo-caption,
  .evo-caption--reveal h2,
  .evo-result-rays,
  .evolution-result img,
  .evolution-result h2,
  .evolution-result .dialogue-actions {
    animation: none;
  }

  .evo-letterbox,
  .evo-vignette,
  .evo-grade,
  .evo-groundglow,
  .evo-converge,
  .evo-rays,
  .evo-speedlines,
  .evo-impact,
  .evo-chroma,
  .evo-shockwave--late,
  .evo-result-rays {
    opacity: 0;
  }

  .evolution-result img,
  .evolution-result h2,
  .evolution-result .dialogue-actions { opacity: 1; }

  .fx-capture-impact,
  .fx-capture-rays,
  .fx-capture-speedlines,
  .fx-capture-blackout,
  .fx-catch-result::after {
    animation: none;
    opacity: 0;
  }

  .fx-catch-result .l {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .catch-vignette,
  .catch-godrays,
  .catch-sprite-rim,
  .catch-frame,
  .catch-confetti span {
    animation: none;
  }

  .catch-godrays,
  .catch-sprite-rim,
  .catch-confetti span { opacity: 0; }

  .catch-frame { opacity: 1; }

  .catch-sprite { animation: none; }
}

/* ==========================================================================
   AAA cinematic layer v3.1 — critic round-1 punch list
   (D1 HUD suppression, D3 charm scale, D4 stone spinner, D7 backdrop blur,
    D11 shake tear, D12 depth, D14 double sunburst, M1/M2/M5 mobile layouts)
   ========================================================================== */

/* ---- D11: battle-stage shake overscans instead of tearing the edge ----- */

.battle-stage.shake,
.battle-stage.shake-hard { scale: 1.025; }

/* ---- D7: evolution modal backdrop = darkened world, not blurred grey --- */

.modal.evolution-map-modal {
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: brightness(0.45) saturate(0.55);
  -webkit-backdrop-filter: brightness(0.45) saturate(0.55);
}

/* ---- D12: foreground occluders — soft bokeh drifting in front ---------- */

.evo-motes {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.evo-motes span {
  position: absolute;
  left: calc(6% + var(--i) * 12.5%);
  top: calc(18% + (var(--i) - 4) * (var(--i) - 4) * 1.9%);
  width: calc(22px + var(--i) * 5px);
  height: calc(22px + var(--i) * 5px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 190, 0.5), rgba(255, 236, 190, 0.06) 70%);
  filter: blur(7px);
  opacity: 0;
  animation: evo-mote-drift-v3 6.6s linear both;
  animation-delay: calc(var(--i) * 120ms);
}

.evolution-scene--stone .evo-motes span { animation-delay: calc(var(--i) * 120ms + 2400ms); }

@keyframes evo-mote-drift-v3 {
  0%, 8% { opacity: 0; transform: translate(0, 24px) scale(0.8); }
  22% { opacity: 0.4; }
  56% { opacity: 0.34; transform: translate(14px, -18px) scale(0.95); }
  60% { opacity: 0; }
  66% { opacity: 0.42; }
  100% { opacity: 0.3; transform: translate(30px, -52px) scale(1.06); }
}

/* ---- D5: rim ignite during anticipation (before the strobe) ------------ */

.evo-sil-before { animation: evo-sil-before-v3 6.6s linear forwards, evo-rim-ignite-v3 6.6s ease-in-out forwards; }

@keyframes evo-rim-ignite-v3 {
  0%, 8% { opacity: 0; transform: scale(1.028); filter: brightness(0) invert(1) blur(6px) drop-shadow(0 0 10px rgba(190, 225, 255, 0.4)); }
  22% { opacity: 0.22; }
  41.8% { opacity: 0.4; transform: scale(1.034); filter: brightness(0) invert(1) blur(5px) drop-shadow(0 0 18px rgba(255, 224, 150, 0.7)); }
  41.9%, 100% { opacity: 0; }
}

/* ---- D4: stone orbit — comet trails, not spinner dots ------------------ */

.evo-stone-trail {
  width: 5px !important;
  height: 22px !important;
  border-radius: 999px !important;
  filter: blur(0.5px);
  box-shadow: 0 0 12px var(--stone, #ffe07a);
}

/* stone impact becomes a real blowout */
.evo-stone-whiteout { animation: evo-stone-whiteout-v3 620ms steps(1, end) 2280ms forwards; }

@keyframes evo-stone-whiteout-v3 {
  0%, 9% { opacity: 0; }
  10%, 20% { opacity: 0.97; }
  21%, 34% { opacity: 0; }
  35%, 42% { opacity: 0.8; }
  43%, 100% { opacity: 0; }
}

/* ---- D3/D9: capture — bigger presence, deeper spotlight ---------------- */

/* CSS fallback charm (art-less) grows with the art charm */
.fx-catch-ball { width: 46px; height: 46px; }

/* deeper spotlight tuned for the bigger charm */
.fx-capture-dim {
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    transparent 64px,
    rgba(3, 6, 11, 0.34) 168px,
    rgba(3, 6, 11, 0.8) 58%);
}

.fx-capture-dim.presnap {
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    transparent 40px,
    rgba(2, 4, 8, 0.62) 120px,
    rgba(2, 4, 8, 0.95) 50%);
}

/* the focus veil now lives for the whole capture (absorb -> post-verdict) */
.fx-capture-blackout { animation: fx-cap-blackout-long-v3 6400ms linear forwards; }

@keyframes fx-cap-blackout-long-v3 {
  0% { opacity: 0; }
  7% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}

/* capture-scoped star bursts become elongated sparks, not clip-art glyphs */
.fx-layer.fx-capture span.fx-star {
  clip-path: none;
  width: 5px;
  height: 17px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, var(--c1, #ffe79a) 65%, transparent) !important;
  box-shadow: 0 0 10px var(--c1, #ffe79a);
}

/* ---- D14/A15: showcase — one light system, material card --------------- */

/* kill the flat grey sunburst; the god-ray layer is the only ray system */
.catch-bg { display: none; }

/* portrait tile: material border instead of lime focus ring */
.catch-sprite {
  border: 1px solid rgba(255, 228, 165, 0.6) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 44px color-mix(in srgb, var(--c2, #5fe08b) 40%, transparent) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 244, 214, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(22, 30, 48, 0.92), rgba(8, 12, 24, 0.96)) !important;
}

/* stat line gets hierarchy */
.catch-dv { letter-spacing: 0.04em; opacity: 0.92; }
.catch-dv b { color: #ffe2a0; font-weight: 800; }

/* ==========================================================================
   Mobile landscape (844x390-class): full-bleed evolution + 2-column layouts
   ========================================================================== */

@media (orientation: landscape) and (max-height: 520px) {
  /* M1: evolution goes full-bleed — cinema, not a pillarboxed picture frame */
  .modal.evolution-map-modal .evolution-scene {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    border: none;
    border-radius: 0;
  }

  .modal.evolution-map-modal {
    background: rgba(2, 4, 9, 0.9);
  }

  /* monster scales up on the full-bleed stage */
  .modal.evolution-map-modal .evo-monster {
    width: min(calc(300px * var(--monster-box-aspect, 1)), 64vw);
    height: min(300px, 62dvh);
  }

  /* M5: evolution result becomes a landscape card: portrait | text */
  .modal.evolution-map-modal .modal-card.evolution-result {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    column-gap: 14px;
    text-align: left;
    padding: 12px 18px;
  }

  .modal.evolution-map-modal .evolution-result img {
    width: 100%;
    max-height: 62dvh;
    object-fit: contain;
  }

  .modal.evolution-map-modal .evolution-result h2 {
    font-size: clamp(1.05rem, 4.6dvh, 1.5rem);
    margin: 0 0 8px;
  }

  .modal.evolution-map-modal .evolution-result .dialogue-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  /* M2: showcase becomes two columns — portrait left, identity right.
     Selectors must match the html.is-touch skin at 9843-9925 to win. */
  html.is-touch .modal.catch-showcase-modal .catch-scene { width: 100vw; height: 100dvh; }

  html.is-touch .modal.catch-showcase-modal .catch-frame {
    inset: max(30px, 9dvh) 50% max(30px, 10dvh) max(10px, env(safe-area-inset-left));
  }

  html.is-touch .modal.catch-showcase-modal .catch-sprite {
    width: clamp(140px, 56dvh, 270px);
    height: clamp(140px, 56dvh, 270px);
  }

  html.is-touch .modal.catch-showcase-modal .catch-sprite-rim {
    width: clamp(140px, 56dvh, 270px);
    max-height: 64dvh;
  }

  html.is-touch .modal.catch-showcase-modal .catch-seal {
    left: auto;
    right: max(14px, env(safe-area-inset-right));
    top: max(10px, env(safe-area-inset-top));
    transform: none;
  }

  html.is-touch .modal.catch-showcase-modal .catch-caption {
    inset: max(44px, 14dvh) max(12px, env(safe-area-inset-right)) max(52px, 16dvh) 52%;
    justify-items: start;
    text-align: left;
    align-content: center;
    gap: clamp(2px, 1.2dvh, 8px);
  }

  html.is-touch .modal.catch-showcase-modal .catch-meta { justify-content: flex-start; }

  html.is-touch .modal.catch-showcase-modal .catch-scene .dialogue-actions {
    inset: auto max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) 52%;
    justify-content: flex-start;
  }

  /* light system follows the portrait column */
  html.is-touch .modal.catch-showcase-modal .catch-halo,
  html.is-touch .modal.catch-showcase-modal .catch-beam { left: 26%; }

  html.is-touch .modal.catch-showcase-modal .catch-godrays { left: 26%; top: 46%; }

  html.is-touch .modal.catch-showcase-modal .catch-rings span,
  html.is-touch .modal.catch-showcase-modal .catch-burst span { left: 26%; top: 46%; }
}

/* ---- reduced motion for the v3.1 layers -------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .evo-motes span,
  .evo-sil-before,
  .evo-stone-whiteout {
    animation: none;
  }

  .evo-motes { opacity: 0; }

  .battle-stage.shake,
  .battle-stage.shake-hard { scale: 1; }
}

/* ==========================================================================
   AAA cinematic layer v3.2 — self-review fixes after round 3
   ========================================================================== */

/* gradient-clip titles: inherited text-shadow paints BEHIND the transparent
   glyphs and turns them muddy-dark - kill it wherever text is clipped */
.evolution-result h2,
.catch-caption h2 { text-shadow: none; }

/* converge particles: break the lockstep ring into layered streams */
.evo-converge span:nth-child(3n) {
  --conv-r: min(190px, 23vw);
  height: 11px;
  animation-delay: calc(var(--i) * 47ms + 260ms);
}

.evo-converge span:nth-child(3n + 1) {
  --conv-r: min(305px, 36vw);
  height: 22px;
  animation-delay: calc(var(--i) * 47ms + 130ms);
}

.evo-converge span:nth-child(4n) { filter: blur(1px); opacity: 0.8; }

.evolution-scene--stone .evo-converge span:nth-child(3n) { animation-delay: calc(var(--i) * 47ms + 2660ms); }
.evolution-scene--stone .evo-converge span:nth-child(3n + 1) { animation-delay: calc(var(--i) * 47ms + 2530ms); }
/* ...and the plain (3n+2) spans, which the two rules above do not reach -
   un-shifted they flew their converge waves during the stone orbit act.
   Lower specificity, so 3n / 3n+1 keep their stream offsets. */
.evolution-scene--stone .evo-converge span { animation-delay: calc(var(--i) * 47ms + 2400ms); }

/* BOUND!: the legacy green/red text-stroke leaks onto the gradient letters */
.fx-catch-result.ok,
.fx-catch-result.no { -webkit-text-stroke: 0; }

/* focus veil sits on <body> now - above game chrome, below modals */
.fx-capture-blackout { z-index: 30; }

/* desktop showcase: darken the world behind, never blur-to-grey.
   animation: none kills the generic 220ms toast-in for THIS modal - measured
   (tools/_catch_handoff_probe.js): under the mount stall the fade started
   ~200ms late and the whole card ghost-dissolved over the still-lit BOUND!
   stage. The scene now appears instantly UNDER the fx-catch-handoff plate. */
.modal.catch-showcase-modal {
  background: rgba(4, 8, 16, 0.6);
  backdrop-filter: brightness(0.4) saturate(0.5);
  -webkit-backdrop-filter: brightness(0.4) saturate(0.5);
  animation: none;
}

/* Charm-tinted white plate that carries the battle -> showcase cut. Mounted
   on <body> by playCatchShowcase, above the modal (40): swells to full in
   ~150ms (or is already full on first paint after the mount stall), holds
   while the modal materialises beneath it, then thins out. Solid cover -
   no blend mode - so nothing of the cut can read through it. */
.fx-catch-handoff {
  position: fixed;
  inset: 0;
  z-index: 44;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%,
    #ffffff 0%,
    #ffffff 30%,
    color-mix(in srgb, var(--c1, #fff7a8) 42%, #fff) 56%,
    color-mix(in srgb, var(--c2, #ffe9a0) 26%, #fff) 78%,
    #fffdf4 100%);
  animation: fx-catch-handoff 950ms linear both;
}

@keyframes fx-catch-handoff {
  /* 0.82 floor, not 0: under the mount stall the first painted frame holds
     the 0% value for ~140ms (measured), and it must already read as a white
     cut - the swell to full is only for machines that never stalled */
  0% { opacity: 0.82; }
  16% { opacity: 1; }
  42% { opacity: 1; }
  70% { opacity: 0.42; }
  100% { opacity: 0; }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  /* halo follows the portrait column and stops washing the text column */
  html.is-touch .modal.catch-showcase-modal .catch-halo {
    width: min(340px, 78dvh);
    height: min(340px, 78dvh);
    opacity: 0.7;
  }
}

/* ==========================================================================
   AAA cinematic layer v3.4 — critic round-2 MUST-FIX set
   (MF-1 chrome dim, MF-2 slab bugs, MF-3 result cards, MF-4 dark hold,
    MF-5/8/9 mobile geometry, MF-6 spotlight afterglow, MF-7 vignette seam)
   ========================================================================== */

/* MF-1: the focus veil dims EVERYTHING evenly - chrome, rails, move bar.
   The old radial was transparent to ~55% radius, so mid-screen UI stayed lit. */
.fx-capture-blackout {
  background: radial-gradient(circle at 50% 45%, rgba(2, 5, 10, 0.44) 0%, rgba(2, 5, 10, 0.56) 46%, rgba(2, 5, 10, 0.72) 100%);
}

/* MF-2a: speedlines box must not hang outside the stage (fx-overflow) */
.fx-capture-speedlines {
  inset: 0;
  -webkit-mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 12%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.5) 44%, transparent 56%);
  mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 12%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.5) 44%, transparent 56%);
}

.fx-capture-rays {
  -webkit-mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3) 26%, transparent 50%);
  mask-image: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.3) 26%, transparent 50%);
}

/* MF-2b: the shine bar was parked at full opacity through its 760ms delay
   ('forwards' fill leaves base styles active) - park it invisible */
.fx-catch-result::after { opacity: 0; }

/* MF-7: the vignette's scaled box edge dipped inside the stage and drew a
   1px seam - overdraw so the edge can never enter the frame */
.evo-vignette { inset: -12%; }

/* MF-4: the base morph sprites must be GONE before the hit-stop hold, so the
   hold is black-silhouette-on-rim, not a white bloom. Reveal punches in
   only after the white-out.

   These two are now the ONLY definitions of evo-before / evo-after. They used
   to be redeclarations of an earlier pair further up the file, which the
   cascade silently discarded - so an engineer tuning the sprite fade would find
   the dead pair first, edit it, see nothing change, and blame the morph canvas.
   The dead pair has been deleted; keep it that way. */
@keyframes evo-before {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.05) drop-shadow(0 28px 30px rgba(0, 0, 0, 0.32));
  }
  30% {
    opacity: 1;
    transform: scale(1.05) rotate(-2deg);
    filter: brightness(1.7) saturate(0.6) contrast(1.5) drop-shadow(0 0 24px rgba(255, 255, 255, 0.85));
  }
  46% {
    opacity: 0.55;
    transform: scale(1.12) rotate(4deg);
    filter: brightness(3) saturate(0.2) drop-shadow(0 0 30px rgba(255, 247, 168, 0.9));
  }
  56%, 100% {
    opacity: 0;
    transform: scale(1.16) rotate(8deg);
    filter: brightness(4) blur(6px);
  }
}

@keyframes evo-after {
  0%, 61.8% {
    opacity: 0;
    transform: scale(0.42) rotate(-14deg);
    filter: brightness(6) blur(10px);
  }
  62.5% {
    opacity: 1;
    transform: scale(1.24) rotate(3deg);
    filter: brightness(3.4) saturate(0.4) drop-shadow(0 0 52px rgba(255, 255, 255, 0.95));
  }
  70% {
    opacity: 1;
    transform: scale(0.96) rotate(-1.5deg);
    filter: brightness(1.4) drop-shadow(0 0 26px rgba(255, 247, 168, 0.85));
  }
  76% {
    opacity: 1;
    transform: scale(1.005) rotate(0.5deg);
    filter: brightness(1.2) drop-shadow(0 0 22px rgba(255, 247, 168, 0.6));
  }
  82%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1.1) drop-shadow(0 28px 30px rgba(0, 0, 0, 0.32));
  }
}

/* MF-6: after the verdict the spotlight relaxes to an afterglow instead of
   snapping back to daylight - BOUND! lands on a dark plate, release follows */
.fx-capture-dim.afterglow {
  background: radial-gradient(circle at var(--fx, 70%) var(--fy, 42%),
    transparent 80px,
    rgba(2, 5, 10, 0.5) 190px,
    rgba(2, 5, 10, 0.88) 56%);
}

/* MF-3: gradient-clip text is flaky under animated ancestors (result title
   randomly failed to paint) - solid gold + layered shadow is deterministic */
.evolution-result h2,
.catch-caption h2 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffedb8;
  text-shadow:
    0 2px 0 rgba(96, 58, 10, 0.6),
    0 4px 14px rgba(0, 0, 0, 0.6),
    0 0 26px rgba(255, 214, 120, 0.35);
}

/* MF-3: result card meta pills + a designed Continue */
.evo-result-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 2px;
  animation: evo-result-caption-v3 480ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

.evo-result-pill {
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 222, 150, 0.4);
  background: rgba(10, 14, 26, 0.85);
  color: #ffedb8;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.evolution-result .dialogue-actions button {
  border: 1px solid rgba(255, 222, 150, 0.55);
  background: linear-gradient(180deg, rgba(64, 52, 24, 0.9), rgba(30, 24, 12, 0.95));
  color: #ffedb8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* N-2: burst streaks vary distance and length so the ring breaks up */
.evo-burst span:nth-child(3n) { --burst-r: min(240px, 29vw); }
.evo-burst span:nth-child(4n + 1) { --burst-r: min(390px, 46vw); width: 4px; height: 24px; }

/* ---- mobile landscape geometry (MF-5, MF-8, MF-9, N-7) ------------------ */

@media (orientation: landscape) and (max-height: 520px) {
  /* N-7: real letterbox proportions on the phone */
  .evo-letterbox::before,
  .evo-letterbox::after { height: clamp(30px, 9.5%, 40px); }

  /* MF-9: keep clear air between the sprite's feet and the name */
  .modal.evolution-map-modal .evo-monster {
    width: min(calc(272px * var(--monster-box-aspect, 1)), 60vw);
    height: min(272px, 56dvh);
  }

  .evo-caption h2 { font-size: clamp(1.2rem, 7dvh, 1.9rem); }

  /* MF-8: tighter stone orbit so the gem never sweeps over the caption
     and the trail keeps visible curvature on a wide-short viewport */
  .evolution-scene--stone { --orb-r: min(200px, 26dvh); }

  /* MF-3 mobile: result card keeps breathing room and a reachable Continue */
  .modal.evolution-map-modal .modal-card.evolution-result {
    max-height: calc(100dvh - 48px);
    margin: 24px 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  /* MF-5: verdict pill joins the portrait column, 24px+ from every edge */
  html.is-touch .modal.catch-showcase-modal .catch-seal {
    left: max(24px, env(safe-area-inset-left));
    right: auto;
    top: max(24px, env(safe-area-inset-top));
    transform: none;
  }

  html.is-touch .modal.catch-showcase-modal .catch-caption {
    inset: max(44px, 14dvh) max(24px, env(safe-area-inset-right)) max(60px, 18dvh) 52%;
  }

  html.is-touch .modal.catch-showcase-modal .catch-scene .dialogue-actions {
    inset: auto max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 52%;
  }
}

/* ---- reduced motion for v3.4 additions ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .evo-result-meta { animation: none; opacity: 1; }
  .fx-catch-result::after { opacity: 0; }
}

/* ==========================================================================
   AAA cinematic layer v3.5 - final round-3 polish
   ========================================================================== */

/* the shine sweep cannot be clipped to the glyphs and reads as a grey slab
   over the dark verdict plate - the per-letter slam carries the beat alone */
.fx-catch-result::after { content: none; }

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  /* seal pill: its entry animation fills translateX(-50%), which shoved the
     left-anchored pill half off-screen - give it a translate-free entry */
  html.is-touch .modal.catch-showcase-modal .catch-seal {
    animation: catch-seal-in-left-v3 620ms cubic-bezier(0.2, 1.6, 0.3, 1) both;
  }

  /* halo + beam must follow the portrait column, whatever else competes */
  html.is-touch .modal.catch-showcase-modal .catch-halo,
  html.is-touch .modal.catch-showcase-modal .catch-beam { left: 26% !important; }
}

@keyframes catch-seal-in-left-v3 {
  0% { opacity: 0; transform: scale(0.6) translateY(-10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html.is-touch .modal.catch-showcase-modal .catch-seal { animation: none; }
}

/* v3.5b: the scene's own white-core radial must follow the portrait column in
   the two-column landscape layout - it was orphaned in the empty middle */
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .modal.catch-showcase-modal .catch-scene {
    background:
      radial-gradient(circle at 26% 44%, rgba(255, 255, 255, 0.85), rgba(255, 247, 168, 0.3) 18%, rgba(40, 90, 70, 0.32) 44%, rgba(8, 13, 22, 0.96) 78%),
      #0b1220;
  }
}

/* =========================================================================
   Monstar Vale look for the ONLINE social surfaces (private + shared chips).
   Matches the parchment/ink re-voice shipped for the public Authority HUD:
   canvas chips as ink plates (like the map-name plate), opened cards as
   paper with the save-line-art watermark. The dark glass/neon originals
   above stay untouched; these later rules win the cascade.
   ========================================================================= */

.online-chat-toggle {
  color: #f3ead8;
  background: linear-gradient(180deg, rgba(24, 26, 22, 0.93), rgba(10, 11, 9, 0.95));
  border: 1px solid rgba(243, 234, 216, 0.3);
  border-radius: 10px;
  font: 700 11px/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

/* Echo Prestige setup is a real one-run readiness card rather than a
   destructive lore confirmation. Keep native labels/selects visible and
   keyboard/touch reachable; the summary updates without relying on color. */
.prestige-setup-card {
  width: min(760px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  overflow: auto;
}

.prestige-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 16px 0;
  text-align: left;
}

.prestige-setup-grid label {
  display: grid;
  gap: 6px;
  color: var(--ink, #f6f1df);
  font-weight: 800;
}

.prestige-setup-grid select {
  width: 100%;
  min-height: 44px;
  padding: 8px 34px 8px 10px;
  border: 2px solid rgba(231, 245, 255, 0.48);
  border-radius: 8px;
  background: #172536;
  color: #fff;
  font: inherit;
}

.prestige-setup-grid select:focus-visible,
.prestige-setup-card button:focus-visible {
  outline: 3px solid #ffe884;
  outline-offset: 3px;
}

.prestige-setup-grid select:disabled {
  opacity: 0.62;
}

.prestige-setup-note {
  min-height: 1.5em;
  padding: 10px 12px;
  border-left: 4px solid #9ee8ff;
  background: rgba(8, 23, 38, 0.72);
}

@media (max-width: 680px) {
  .prestige-setup-grid { grid-template-columns: 1fr; }
}

.online-chat-toggle:hover {
  border-color: rgba(243, 234, 216, 0.55);
  background: linear-gradient(180deg, rgba(34, 36, 31, 0.95), rgba(16, 17, 14, 0.96));
}

.online-status-toggle {
  font: 700 12px/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.online-social-shell {
  color: #171410;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.985), rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.975)),
    url("assets/ui/save-line-art-bg.webp?v=mva-online-title-1") center / cover no-repeat,
    #fff;
  border: 1px solid rgba(0, 0, 0, 0.24);
  border-left: 3px solid #080808;
  border-radius: 2px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.online-social-shell::before,
.online-social-shell::after {
  content: none;
}

.online-private-social-card.online-social-shell {
  --social-ink: #171410;
  --social-muted: rgba(23, 20, 16, 0.62);
  --social-line: rgba(0, 0, 0, 0.16);
  --social-panel: rgba(255, 255, 255, 0.9);
  --social-cyan: #8a6a2f;
  --social-violet: #6b5a86;
  --social-gold: #a07d2a;
  --social-green: #1d7a3a;
  color: #171410;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.985), rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.975)),
    url("assets/ui/save-line-art-bg.webp?v=mva-online-title-1") center / cover no-repeat,
    #fff;
  border-color: rgba(0, 0, 0, 0.24);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.online-private-social-card .online-social-ambient {
  display: none;
}

.online-private-social-head-icon,
.online-private-social-avatar {
  color: #f3ead8;
  background: linear-gradient(180deg, rgba(24, 26, 22, 0.95), rgba(10, 11, 9, 0.96));
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 8px;
}

.online-private-social-tabs {
  background: rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.online-private-social-code-card,
.online-private-social-add,
.online-private-social-list,
.online-private-social-invitations,
.online-private-social-privacy,
.online-private-social-safety,
.online-private-social-person {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 2px;
}

.online-private-social-person.is-online {
  background: rgba(29, 122, 58, 0.06);
  border-color: rgba(29, 122, 58, 0.28);
}

.online-private-social-person.is-grouped {
  border-color: rgba(29, 122, 58, 0.4);
  box-shadow: inset 3px 0 0 rgba(29, 122, 58, 0.55);
}

.online-private-social-invitations {
  background: rgba(160, 125, 42, 0.07);
  border-color: rgba(160, 125, 42, 0.3);
}

/* ==========================================================================
   Evolution morph — pixel reassembly
   --------------------------------------------------------------------------
   The canvas replaces exactly one beat: the silhouette strobe between the
   charge act and the hit-stop hold. Everything the review called good — the
   ring build-up, the hold, the name swap that lands on it, the caption change
   and the confirm card — is untouched CSS and untouched JS.
   ========================================================================== */

.evo-morph {
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}

/* .evo-morphing is set by JS ONLY after the canvas has proven it can size and
   buffer itself, so a missing 2D context, an undecoded sprite or a stalled rAF
   all leave the original cinematic completely intact. */
.evolution-scene.evo-morphing .evo-sil-before { opacity: 0 !important; }

/* animation-NAME only: the `animation` shorthand would reset the stone scene's
   2.4s animation-delay (styles.css:48446) and desync the whole opening act. */
.evolution-scene.evo-morphing .evo-sil-after { animation-name: evo-sil-after-morph; }

/* the strobe is gone; the hit-stop HOLD it ended on is kept byte for byte */
@keyframes evo-sil-after-morph {
  0%, 57.4% {
    opacity: 0;
    transform: scale(1.02);
    filter: brightness(0) drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 9px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 30px rgba(255, 236, 170, 0.5));
  }
  57.5%, 60.4% { opacity: 1; transform: scale(1.02); }
  62.6%, 100% { opacity: 0; transform: scale(1.02); }
}

/* ---- reduced motion: the morph STAYS, the spinning stage does not --------
   This block used to be `.evo-morph { display: none; }`, which had it exactly
   backwards. A reduced-motion player lost the particle transport - a slow,
   centre-anchored beat that never moves the frame - and was handed back the old
   silhouette strobe, while the repeating-conic-gradient behind it kept spinning
   for the whole 6.6s. The hostile layer was the background, not the morph.
   startEvolutionMorph now runs a calm profile instead of refusing to arm (see
   `calm` in game.js: longer flights, ~1800 motes, no canvas scale/rotate). */
@media (prefers-reduced-motion: reduce) {
  /* evo-spin frozen at 0deg; evo-flare-v3 is an exposure ramp, not motion, and
     is left running so the scene still has its light cues. animation-play-state
     is a LIST and pairs with the animation-name list on .evo-bg. */
  .evo-bg { animation-play-state: paused, running; }

  /* the rings are already held static by the block above (animation: none over
     a base opacity of 0) - stated here so the intent is not re-litigated */
  .evo-rings span { animation: none; opacity: 0; }

  /* ...and the hit-stop hold has to survive, because the canvas hands the stage
     to it at 3795ms. Killed outright (as the general reduce block does) the
     scene goes empty between the canvas fading out and .evo-after arriving at
     62.5%. It is an opacity cut on a silhouette that never moves - the delay is
     re-anchored inline by the same JS that sets .evo-morphing. */
  .evolution-scene.evo-morphing .evo-sil-after {
    animation: evo-sil-after-morph 6.6s linear both;
  }
}

/* ==========================================================================
   capture-light-v4 — ONE light model, charm-anchored, 3 review variants
   The charm is the key light. All darkness lives on the body-level veil as a
   single radial field around a transparent "light well" pinned to the charm
   (--bx/--by from JS). The stage dim is now only a per-variant color grade.
   Variants: fx-capvar-gold | fx-capvar-eclipse | fx-capvar-prism
   ========================================================================== */

@property --well-core { syntax: "<length>"; inherits: false; initial-value: 74px; }
@property --well-soft { syntax: "<length>"; inherits: false; initial-value: 150px; }

.fx-capture-blackout {
  --well-core: 74px;
  --well-soft: 150px;
  transition: --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1), --well-soft 340ms cubic-bezier(0.2, 0.8, 0.3, 1);
  background: radial-gradient(circle at var(--bx, 62vw) var(--by, 40vh),
    transparent var(--well-core, 74px),
    var(--well-mid, rgba(4, 6, 12, 0.55)) calc(var(--well-core, 74px) + var(--well-soft, 150px)),
    var(--well-deep, rgba(3, 5, 10, 0.82)) 58%,
    var(--well-edge, rgba(2, 4, 8, 0.9)) 100%);
}

/* variant color scripts for the darkness itself */
.fx-capture-blackout.fx-capvar-gold {
  --well-mid: rgba(20, 11, 3, 0.52);
  --well-deep: rgba(14, 8, 2, 0.84);
  --well-edge: rgba(10, 6, 2, 0.92);
}

.fx-capture-blackout.fx-capvar-eclipse {
  --well-core: 56px;
  --well-soft: 110px;
  --well-mid: rgba(3, 6, 14, 0.62);
  --well-deep: rgba(2, 4, 10, 0.9);
  --well-edge: rgba(1, 2, 6, 0.96);
}

.fx-capture-blackout.fx-capvar-prism {
  --well-mid: rgba(11, 8, 27, 0.5);
  --well-deep: rgba(8, 6, 22, 0.8);
  --well-edge: rgba(6, 4, 18, 0.88);
}

/* held-breath frame: the well collapses to a tight core (transitions smoothly) */
.fx-capture-blackout.presnap { --well-core: 34px; --well-soft: 90px; }
.fx-capture-blackout.fx-capvar-gold.presnap { --well-mid: rgba(12, 6, 1, 0.8); --well-deep: rgba(8, 4, 1, 0.94); --well-edge: rgba(6, 3, 1, 0.97); }
.fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 26px; --well-soft: 64px; --well-mid: rgba(1, 2, 6, 0.88); --well-deep: rgba(0, 1, 4, 0.97); --well-edge: rgba(0, 0, 2, 0.99); }
.fx-capture-blackout.fx-capvar-prism.presnap { --well-mid: rgba(7, 5, 18, 0.78); --well-deep: rgba(5, 3, 14, 0.93); --well-edge: rgba(3, 2, 10, 0.97); }

/* verdict landed: the well relaxes wide, the finale FX read through */
.fx-capture-blackout.afterglow { --well-core: 190px; --well-soft: 240px; }
.fx-capture-blackout.fx-capvar-gold.afterglow { --well-mid: rgba(20, 11, 3, 0.4); --well-deep: rgba(14, 8, 2, 0.62); --well-edge: rgba(10, 6, 2, 0.72); }
.fx-capture-blackout.fx-capvar-eclipse.afterglow { --well-mid: rgba(3, 6, 14, 0.46); --well-deep: rgba(2, 4, 10, 0.68); --well-edge: rgba(1, 2, 6, 0.78); }
.fx-capture-blackout.fx-capvar-prism.afterglow { --well-mid: rgba(11, 8, 27, 0.38); --well-deep: rgba(8, 6, 22, 0.6); --well-edge: rgba(6, 4, 18, 0.7); }

/* fail states + release mirror the stage dim's opacity envelopes */
.fx-capture-blackout.strain-flicker { animation: capture-dim-flicker 620ms steps(1, end) forwards; }
.fx-capture-blackout.snap { animation: capture-dim-snap 300ms linear forwards; }
.fx-capture-blackout.release { animation: capture-dim-out 600ms ease-out forwards; }

/* ---- stage dim -> variant color grade (the veil owns the darkness now) --- */

.fx-capvar-gold .fx-capture-dim {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(255, 186, 100, 0.26), rgba(255, 150, 60, 0.1) 26%, transparent 48%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 52%, rgba(26, 12, 0, 0.32) 100%);
}

.fx-capvar-gold .fx-capture-dim.presnap {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(255, 186, 100, 0.3), rgba(255, 150, 60, 0.1) 13%, transparent 27%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 40%, rgba(20, 9, 0, 0.42) 100%);
}

.fx-capvar-gold .fx-capture-dim.afterglow {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(255, 196, 120, 0.22), rgba(255, 160, 70, 0.08) 32%, transparent 58%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 62%, rgba(26, 12, 0, 0.22) 100%);
}

.fx-capvar-eclipse .fx-capture-dim {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(150, 205, 255, 0.2), rgba(90, 140, 220, 0.08) 22%, transparent 42%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 48%, rgba(2, 5, 14, 0.4) 100%);
}

.fx-capvar-eclipse .fx-capture-dim.presnap {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(170, 215, 255, 0.26), rgba(90, 140, 220, 0.08) 10%, transparent 22%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 34%, rgba(1, 3, 10, 0.5) 100%);
}

.fx-capvar-eclipse .fx-capture-dim.afterglow {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(170, 215, 255, 0.18), rgba(100, 150, 230, 0.06) 30%, transparent 54%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 58%, rgba(2, 5, 14, 0.28) 100%);
}

.fx-capvar-prism .fx-capture-dim {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(196, 170, 255, 0.22), rgba(150, 140, 255, 0.08) 24%, transparent 46%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 50%, rgba(10, 6, 26, 0.36) 100%);
}

.fx-capvar-prism .fx-capture-dim.presnap {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(208, 186, 255, 0.28), rgba(150, 140, 255, 0.08) 12%, transparent 25%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 38%, rgba(8, 5, 20, 0.46) 100%);
}

.fx-capvar-prism .fx-capture-dim.afterglow {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(208, 186, 255, 0.18), rgba(160, 150, 255, 0.06) 32%, transparent 58%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 60%, rgba(10, 6, 26, 0.24) 100%);
}

/* prism: faint drifting starfield in the dark */
.fx-capvar-prism .fx-capture-dim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 11% 18%, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 64%, rgba(220, 230, 255, 0.7), transparent 100%),
    radial-gradient(1.8px 1.8px at 41% 12%, rgba(255, 250, 235, 0.8), transparent 100%),
    radial-gradient(1.1px 1.1px at 55% 78%, rgba(210, 220, 255, 0.65), transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(240, 240, 255, 0.7), transparent 100%),
    radial-gradient(1.3px 1.3px at 88% 24%, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.7px 1.7px at 93% 70%, rgba(225, 230, 255, 0.7), transparent 100%),
    radial-gradient(1.2px 1.2px at 70% 8%, rgba(255, 245, 230, 0.65), transparent 100%);
  opacity: 0;
  animation: capprism-twinkle 2600ms ease-in-out 300ms infinite alternate;
}

@keyframes capprism-twinkle {
  0% { opacity: 0.35; }
  100% { opacity: 0.85; }
}

/* ---- charm key light: breathing halo + ground light pool ----------------- */

.fx-cap-keylight {
  width: var(--keyl-size, 170px);
  height: var(--keyl-size, 170px);
  border-radius: 50%;
  z-index: 12;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(circle, var(--keyl-c, rgba(255, 214, 130, 0.5)), var(--keyl-c2, rgba(255, 170, 80, 0.22)) 42%, transparent 70%);
  animation: cap-keylight-breathe 1500ms ease-in-out infinite alternate;
}

.fx-cap-keylight::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 82%;
  width: 130%;
  height: 36%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--keyl-c2, rgba(255, 170, 80, 0.26)), transparent 68%);
}

@keyframes cap-keylight-breathe {
  0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.08); }
}

.fx-capvar-gold .fx-cap-keylight { --keyl-c: rgba(255, 208, 120, 0.5); --keyl-c2: rgba(255, 160, 66, 0.22); }
.fx-capvar-eclipse .fx-cap-keylight { --keyl-c: rgba(190, 228, 255, 0.44); --keyl-c2: rgba(110, 160, 230, 0.17); animation-duration: 1150ms; }
.fx-capvar-prism .fx-cap-keylight { --keyl-c: rgba(214, 192, 255, 0.46); --keyl-c2: rgba(150, 190, 255, 0.18); }

/* ---- per-wobble light beats --------------------------------------------- */

/* gold: warm shockwave ring */
.fx-capgold-wave {
  width: var(--wave-size, 220px);
  height: var(--wave-size, 220px);
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 130, 0.95);
  box-shadow: 0 0 22px rgba(255, 176, 84, 0.75), inset 0 0 20px rgba(255, 176, 84, 0.45);
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  animation: capgold-wave 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes capgold-wave {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.22); border-width: 6px; }
  60% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); border-width: 1px; }
}

/* gold: embers rising off the seal */
.fx-capgold-ember {
  width: var(--esize, 4px);
  height: var(--esize, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d8, var(--c1, #ffca6a) 55%, transparent 80%) !important;
  box-shadow: 0 0 8px rgba(255, 190, 100, 0.9);
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  animation: capgold-ember 1150ms cubic-bezier(0.3, 0.4, 0.4, 1) forwards;
}

@keyframes capgold-ember {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ex, 20px)), calc(-50% + var(--ey, -80px))) scale(1); }
}

/* eclipse: a cold binding arc irises down onto the charm */
.fx-capbind-ring {
  width: var(--bind-from, 150px);
  height: var(--bind-from, 150px);
  border-radius: 50%;
  border: 2px solid rgba(190, 230, 255, 0.9);
  border-top-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 16px rgba(140, 200, 255, 0.45);
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  animation: capbind-ring 760ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}

@keyframes capbind-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--bind-rot, 0deg)) scale(1.15); }
  22% { opacity: 0.95; }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--bind-rot, 0deg) + 140deg)) scale(0.42); }
}

/* prism: chromatic ripple ring */
.fx-capprism-ripple {
  width: var(--ripple-size, 240px);
  height: var(--ripple-size, 240px);
  border-radius: 50%;
  background: conic-gradient(from 20deg,
    rgba(255, 130, 190, 0.55), rgba(255, 220, 130, 0.55), rgba(140, 255, 190, 0.55),
    rgba(130, 190, 255, 0.55), rgba(210, 140, 255, 0.55), rgba(255, 130, 190, 0.55)) !important;
  -webkit-mask-image: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 3px) 50%, transparent calc(50% + 1px));
  mask-image: radial-gradient(circle, transparent calc(50% - 5px), #000 calc(50% - 3px) 50%, transparent calc(50% + 1px));
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(200, 180, 255, 0.5));
  animation: capprism-ripple 820ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes capprism-ripple {
  0% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(40deg); }
}

/* prism: starlight streaks falling INTO the seal */
.fx-capprism-streak {
  width: 2.5px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--c1, #cdb8ff) 60%, #ffffff) !important;
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  animation: capprism-streak 620ms cubic-bezier(0.5, 0, 0.75, 0.6) forwards;
}

@keyframes capprism-streak {
  0% { opacity: 0; transform: translate(calc(-50% + var(--sx, 90px)), calc(-50% + var(--sy, -60px))) rotate(var(--srot, 0deg)) scale(1); }
  25% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--srot, 0deg)) scale(0.4); }
}

/* ---- verdict above the darkness ----------------------------------------- */

/* body-level white-out: never greyed by the veil (z 30) below it */
.fx-capture-impact-global {
  position: fixed;
  inset: 0;
  z-index: 31;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  animation: fx-cap-impact-v3 460ms steps(1, end) forwards;
}

/* the verdict word mounts on <body>: fixed at the stage anchor, above veil
   and white-out */
.fx-catch-result.fx-catch-result--global {
  position: fixed !important;
  left: var(--rx, 50vw) !important;
  top: var(--ry, 31vh) !important;
  z-index: 32;
}

/* ---- mobile landscape: tighter well radii for the small stage ------------ */

@media (orientation: landscape) and (max-height: 520px) {
  .fx-capture-blackout { --well-core: 56px; --well-soft: 104px; }
  .fx-capture-blackout.fx-capvar-eclipse { --well-core: 44px; --well-soft: 84px; }
  .fx-capture-blackout.presnap { --well-core: 26px; --well-soft: 62px; }
  .fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 20px; --well-soft: 48px; }
  .fx-capture-blackout.afterglow { --well-core: 140px; --well-soft: 170px; }
  .fx-cap-keylight { width: calc(var(--keyl-size, 170px) * 0.78); height: calc(var(--keyl-size, 170px) * 0.78); }
}

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .fx-capture-blackout,
  .fx-capture-impact-global,
  .fx-cap-keylight,
  .fx-capgold-wave,
  .fx-capgold-ember,
  .fx-capbind-ring,
  .fx-capprism-ripple,
  .fx-capprism-streak,
  .fx-capvar-prism .fx-capture-dim::after { animation: none; opacity: 0; }
  .fx-capture-blackout { transition: none; }
}

/* ---- Della reward result -------------------------------------------------
   This cinematic card carries the evolution-result scope guard so the global
   vendor-paper skin cannot turn it into a tall, scrollable shop ledger. Keep
   its own payoff compact: two readable rewards, one short explanation, and a
   single centered continuation action. */
#modal > .della-reward-result.evolution-result {
  width: min(520px, calc(100vw - 32px));
  height: auto;
  min-height: 0;
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 28px 30px 24px;
  border: 1px solid rgba(255, 235, 158, 0.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 242, 164, 0.18), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(73, 184, 106, 0.16), transparent 52%),
    linear-gradient(160deg, rgba(26, 53, 38, 0.98), rgba(8, 18, 16, 0.99));
  box-shadow:
    0 28px 78px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(111, 211, 125, 0.08);
  text-align: center;
}

#modal > .della-reward-result.evolution-result::before {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.035) 50%, transparent 58%),
    repeating-radial-gradient(circle at 50% 0%, rgba(255, 244, 180, 0.035) 0 1px, transparent 1px 26px);
  opacity: 0.8;
}

#modal > .della-reward-result.evolution-result .della-reward-result-items {
  width: 100%;
  height: auto;
  min-height: 112px;
  align-items: center;
  gap: 54px;
  margin: 0 0 2px;
  transform: none;
}

#modal > .della-reward-result.evolution-result .dig-result-gem {
  width: 104px;
  height: 104px;
  margin: 0;
  border: 1px solid rgba(255, 238, 169, 0.22);
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255, 246, 194, 0.13), rgba(57, 137, 79, 0.08) 64%, transparent 66%);
}

#modal > .della-reward-result.evolution-result .dig-result-gem::before {
  inset: 5px;
  border-radius: 20px;
  box-shadow: 0 0 24px rgba(144, 226, 139, 0.28);
  opacity: 0.72;
}

#modal > .della-reward-result.evolution-result .dig-result-stone {
  position: absolute;
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 244, 180, 0.3)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  animation: gem-bob 3.1s ease-in-out infinite;
}

#modal > .della-reward-result.evolution-result h2 {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: #fff1b3;
  background: none;
  font-size: clamp(1.42rem, 3vw, 1.72rem);
  line-height: 1.12;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58);
  filter: none;
  animation: none;
}

#modal > .della-reward-result.evolution-result p {
  max-width: 44ch;
  margin: 0;
  color: rgba(237, 245, 235, 0.86);
  font-size: 0.94rem;
  line-height: 1.48;
}

#modal > .della-reward-result.evolution-result .della-reward-quote {
  display: grid;
  gap: 3px;
  max-width: 46ch;
}

#modal > .della-reward-result.evolution-result .della-reward-quote strong {
  color: #ffe99a;
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#modal > .della-reward-result.evolution-result .della-reward-quote span {
  font-style: italic;
}

#modal > .della-reward-result.evolution-result .dialogue-actions {
  width: 100%;
  justify-content: center;
  margin: 6px 0 0;
  padding: 0;
  animation: none;
}

#modal > .della-reward-result.evolution-result .dialogue-actions button {
  min-width: 172px;
  min-height: 46px;
  padding: 9px 24px;
  border: 1px solid rgba(255, 239, 169, 0.54);
  border-radius: 10px;
  color: #fff4bd;
  background: linear-gradient(180deg, rgba(69, 139, 82, 0.98), rgba(31, 84, 50, 0.98));
  font-size: 1rem;
  font-weight: 850;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.48);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#modal > .della-reward-result.evolution-result .dialogue-actions button:hover:not(:disabled) {
  border-color: rgba(255, 242, 186, 0.82);
  background: linear-gradient(180deg, #579c64, #28603d);
  transform: translateY(-1px);
}

#modal > .della-reward-result.evolution-result .dialogue-actions button:focus-visible {
  outline: 2px solid #fff1a8;
  outline-offset: 3px;
}

@media (max-width: 560px), (max-height: 500px) {
  #modal > .della-reward-result.evolution-result {
    width: min(500px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    gap: 9px;
    padding: 20px 18px 18px;
    border-radius: 16px;
  }

  #modal > .della-reward-result.evolution-result .della-reward-result-items {
    min-height: 86px;
    gap: clamp(24px, 10vw, 42px);
  }

  #modal > .della-reward-result.evolution-result .dig-result-gem {
    width: 82px;
    height: 82px;
    border-radius: 19px;
  }

  #modal > .della-reward-result.evolution-result h2 {
    font-size: clamp(1.18rem, 5.3vw, 1.42rem);
  }

  #modal > .della-reward-result.evolution-result p {
    font-size: clamp(0.78rem, 3.25vw, 0.9rem);
    line-height: 1.38;
  }

  #modal > .della-reward-result.evolution-result .dialogue-actions {
    margin-top: 4px;
  }

  #modal > .della-reward-result.evolution-result .dialogue-actions button {
    width: min(260px, 100%);
    min-height: 44px;
  }
}

/* ==========================================================================
   capture-light-v4-1 — round-2 critic fixes
   Staircase darkness, chrome floor, held verdict plate, true variant grades,
   veil-level starfield, seal arcs, escalating wobble FX, camera impulses.
   ========================================================================== */

@property --soft-base { syntax: "<length>"; inherits: false; initial-value: 150px; }
@property --well-mid { syntax: "<color>"; inherits: false; initial-value: rgba(4, 6, 12, 0.55); }
@property --well-deep { syntax: "<color>"; inherits: false; initial-value: rgba(3, 5, 10, 0.82); }
@property --well-edge { syntax: "<color>"; inherits: false; initial-value: rgba(2, 4, 8, 0.9); }

/* the darkness breathes very slowly between beats (never a static PNG), and
   every radius/color state change is transitioned */
.fx-capture-blackout {
  --soft-base: 150px;
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --well-mid 420ms ease, --well-deep 420ms ease, --well-edge 420ms ease;
  animation:
    fx-cap-blackout-long-v3 6400ms linear forwards,
    cap-well-breathe 3400ms ease-in-out 1500ms infinite alternate;
}

@keyframes cap-well-breathe {
  0% { --well-soft: var(--soft-base, 150px); }
  100% { --well-soft: calc(var(--soft-base, 150px) * 0.85); }
}

/* ---- variant grades: real hue, not a neutral scrim ----------------------- */

/* gold: forge ramp - amber mid, brown-red deep, red-black edge */
.fx-capture-blackout.fx-capvar-gold {
  --well-mid: rgba(52, 24, 8, 0.46);
  --well-deep: rgba(26, 11, 4, 0.68);
  --well-edge: rgba(12, 4, 2, 0.78);
}

/* eclipse: cold blue-black with a lifted blue toe */
.fx-capture-blackout.fx-capvar-eclipse {
  --soft-base: 110px;
  --well-mid: rgba(16, 30, 66, 0.52);
  --well-deep: rgba(9, 18, 44, 0.74);
  --well-edge: rgba(4, 9, 26, 0.84);
}

/* prism: genuine indigo (B/R skew, green suppressed) */
.fx-capture-blackout.fx-capvar-prism {
  --well-mid: rgba(44, 28, 92, 0.48);
  --well-deep: rgba(28, 17, 64, 0.7);
  --well-edge: rgba(16, 10, 42, 0.8);
}

/* ---- absorb: one light source (tight well until the charm settles) ------- */
.fx-capture-blackout.absorb { --well-core: 46px; --soft-base: 96px; }
.fx-capture-blackout.fx-capvar-eclipse.absorb { --well-core: 38px; --soft-base: 82px; }

/* ---- staircase: every wobble settles darker ------------------------------ */
.fx-capture-blackout.fx-capvar-gold.wstep-1 { --well-mid: rgba(52, 24, 8, 0.52); --well-deep: rgba(26, 11, 4, 0.74); --well-edge: rgba(12, 4, 2, 0.83); }
.fx-capture-blackout.fx-capvar-gold.wstep-2 { --well-mid: rgba(50, 22, 7, 0.58); --well-deep: rgba(24, 10, 4, 0.79); --well-edge: rgba(11, 4, 2, 0.87); }
.fx-capture-blackout.fx-capvar-gold.wstep-3 { --well-mid: rgba(46, 20, 6, 0.65); --well-deep: rgba(22, 9, 3, 0.84); --well-edge: rgba(10, 3, 1, 0.91); }
.fx-capture-blackout.fx-capvar-gold.wstep-4 { --well-mid: rgba(42, 18, 6, 0.72); --well-deep: rgba(20, 8, 3, 0.88); --well-edge: rgba(9, 3, 1, 0.94); }

.fx-capture-blackout.fx-capvar-eclipse.wstep-1 { --soft-base: 102px; --well-mid: rgba(15, 28, 62, 0.58); --well-deep: rgba(8, 17, 42, 0.79); --well-edge: rgba(4, 8, 24, 0.88); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-2 { --soft-base: 94px; --well-mid: rgba(14, 26, 58, 0.64); --well-deep: rgba(8, 16, 40, 0.84); --well-edge: rgba(3, 7, 22, 0.91); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-3 { --soft-base: 86px; --well-mid: rgba(13, 24, 54, 0.7); --well-deep: rgba(7, 14, 36, 0.88); --well-edge: rgba(3, 6, 20, 0.94); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-4 { --soft-base: 78px; --well-mid: rgba(12, 22, 50, 0.76); --well-deep: rgba(6, 13, 33, 0.92); --well-edge: rgba(2, 5, 17, 0.965) ; }

.fx-capture-blackout.fx-capvar-prism.wstep-1 { --well-mid: rgba(44, 28, 92, 0.54); --well-deep: rgba(28, 17, 64, 0.75); --well-edge: rgba(16, 10, 42, 0.84); }
.fx-capture-blackout.fx-capvar-prism.wstep-2 { --well-mid: rgba(42, 26, 88, 0.6); --well-deep: rgba(26, 16, 60, 0.8); --well-edge: rgba(15, 9, 40, 0.88); }
.fx-capture-blackout.fx-capvar-prism.wstep-3 { --well-mid: rgba(40, 25, 84, 0.66); --well-deep: rgba(24, 15, 56, 0.85); --well-edge: rgba(14, 9, 38, 0.92); }
.fx-capture-blackout.fx-capvar-prism.wstep-4 { --well-mid: rgba(38, 23, 80, 0.72); --well-deep: rgba(22, 14, 52, 0.89); --well-edge: rgba(13, 8, 34, 0.95); }

/* ---- presnap: darkest step; core wide enough that the charm's own art is
   never clipped by the ramp -------------------------------------------------- */
.fx-capture-blackout.presnap { --well-core: 50px; --soft-base: 64px; }
.fx-capture-blackout.fx-capvar-gold.presnap { --well-mid: rgba(30, 12, 4, 0.84); --well-deep: rgba(14, 5, 2, 0.95); --well-edge: rgba(7, 2, 1, 0.985); }
.fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 46px; --soft-base: 56px; --well-mid: rgba(8, 14, 34, 0.88); --well-deep: rgba(4, 8, 22, 0.965); --well-edge: rgba(1, 3, 10, 0.99); }
.fx-capture-blackout.fx-capvar-prism.presnap { --well-mid: rgba(26, 16, 56, 0.85); --well-deep: rgba(15, 9, 36, 0.95); --well-edge: rgba(8, 5, 22, 0.985); }

/* ---- afterglow: cinematic dark held while the finale reads --------------- */
.fx-capture-blackout.afterglow { --well-core: 190px; --soft-base: 240px; }
.fx-capture-blackout.fx-capvar-gold.afterglow { --well-mid: rgba(52, 24, 8, 0.36); --well-deep: rgba(26, 11, 4, 0.56); --well-edge: rgba(12, 4, 2, 0.68); }
.fx-capture-blackout.fx-capvar-eclipse.afterglow { --well-mid: rgba(16, 30, 66, 0.4); --well-deep: rgba(9, 18, 44, 0.6); --well-edge: rgba(4, 9, 26, 0.72); }
.fx-capture-blackout.fx-capvar-prism.afterglow { --well-mid: rgba(44, 28, 92, 0.34); --well-deep: rgba(28, 17, 64, 0.54); --well-edge: rgba(16, 10, 42, 0.66); }

/* ---- chrome floor: no UI pixel may outshine the scene -------------------- */
.fx-capture-blackout::after {
  content: "";
  position: fixed;
  left: var(--sl, 2vw);
  top: var(--st, 9vh);
  width: var(--sw, 66vw);
  height: var(--sh, 78vh);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 26px 200vmax var(--chrome-floor, rgba(3, 5, 9, 0.5));
}

.fx-capture-blackout.fx-capvar-gold::after { --chrome-floor: rgba(10, 5, 2, 0.52); }
.fx-capture-blackout.fx-capvar-eclipse::after { --chrome-floor: rgba(3, 7, 18, 0.58); }
.fx-capture-blackout.fx-capvar-prism::after { --chrome-floor: rgba(9, 6, 22, 0.52); }
.fx-capture-blackout.presnap::after { --chrome-floor: rgba(2, 3, 6, 0.76); }
.fx-capture-blackout.afterglow::after { --chrome-floor: rgba(3, 5, 9, 0.32); }

/* ---- prism starfield lives ON the veil now (above the darkness) ---------- */
.fx-capvar-prism .fx-capture-dim::after { content: none; }

.fx-capture-blackout.fx-capvar-prism::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 8vw 12vh, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 21vw 32vh, rgba(226, 234, 255, 0.85), transparent 100%),
    radial-gradient(2.2px 2.2px at 15vw 68vh, rgba(255, 250, 238, 0.9), transparent 100%),
    radial-gradient(1.3px 1.3px at 31vw 84vh, rgba(214, 224, 255, 0.8), transparent 100%),
    radial-gradient(1.8px 1.8px at 42vw 8vh, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 55vw 90vh, rgba(230, 236, 255, 0.75), transparent 100%),
    radial-gradient(2px 2px at 68vw 6vh, rgba(255, 246, 230, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 84vw 16vh, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2.2px 2.2px at 93vw 48vh, rgba(238, 242, 255, 0.9), transparent 100%),
    radial-gradient(1.4px 1.4px at 88vw 78vh, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.7px 1.7px at 74vw 92vh, rgba(226, 232, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 5vw 45vh, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.9px 1.9px at 48vw 22vh, rgba(244, 240, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 63vw 70vh, rgba(255, 255, 255, 0.7), transparent 100%);
  -webkit-mask-image: radial-gradient(circle at var(--bx, 62vw) var(--by, 40vh), transparent 130px, rgba(0, 0, 0, 0.85) 320px, #000 55%);
  mask-image: radial-gradient(circle at var(--bx, 62vw) var(--by, 40vh), transparent 130px, rgba(0, 0, 0, 0.85) 320px, #000 55%);
  opacity: 0;
  animation: capprism-twinkle-v2 2200ms ease-in-out 900ms infinite alternate;
}

@keyframes capprism-twinkle-v2 {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}

/* ---- keylight v2: bigger, soft-edged, inner core, per-wobble boost ------- */
.fx-cap-keylight {
  background: radial-gradient(circle, var(--keyl-c, rgba(255, 214, 130, 0.5)), var(--keyl-c2, rgba(255, 170, 80, 0.22)) 36%, transparent 62%);
}

.fx-cap-keylight::before {
  content: "";
  position: absolute;
  inset: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5), var(--keyl-c, rgba(255, 214, 130, 0.5)) 46%, transparent 76%);
}

@keyframes cap-keylight-breathe {
  0% { opacity: calc(0.5 * var(--keyl-boost, 1)); transform: translate(-50%, -50%) scale(0.94); }
  100% { opacity: calc(0.92 * var(--keyl-boost, 1)); transform: translate(-50%, -50%) scale(1.06); }
}

/* gold's ground pool is the warmest and widest of the three */
.fx-capvar-gold .fx-cap-keylight::after {
  width: 165%;
  height: 44%;
  background: radial-gradient(ellipse, rgba(255, 170, 70, 0.34), transparent 66%);
}

/* ---- gold wobble FX: readable rings, real embers ------------------------- */
.fx-capgold-wave {
  border-width: 3.5px;
  background: radial-gradient(circle, transparent 52%, rgba(255, 186, 90, 0.18) 74%, transparent 92%);
  filter: drop-shadow(0 0 10px rgba(255, 180, 88, 0.8));
  animation: capgold-wave-v2 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes capgold-wave-v2 {
  0% { opacity: calc(0.62 + var(--wstep, 1) * 0.09); transform: translate(-50%, -50%) scale(0.22); border-width: 7px; }
  60% { opacity: calc(0.36 + var(--wstep, 1) * 0.09); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); border-width: 2px; }
}

.fx-capgold-ember {
  box-shadow: 0 0 12px rgba(255, 190, 100, 0.95);
  animation: capgold-ember-v2 1250ms cubic-bezier(0.3, 0.4, 0.4, 1) forwards;
}

@keyframes capgold-ember-v2 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14% { opacity: 1; }
  60% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ex, 20px)), calc(-50% + var(--ey, -90px))) scale(1.05); }
}

/* ---- eclipse: segmented counter-rotating seal ---------------------------- */
.fx-capbind-ring {
  border: 0;
  background: repeating-conic-gradient(from 0deg,
    var(--bind-c, rgba(236, 246, 255, 0.95)) 0deg 24deg,
    transparent 24deg 42deg,
    var(--bind-c, rgba(236, 246, 255, 0.75)) 42deg 58deg,
    transparent 58deg 90deg) !important;
  -webkit-mask-image: radial-gradient(circle, transparent calc(50% - var(--bind-w, 3px) - 3px), #000 calc(50% - var(--bind-w, 3px)) calc(50% - 1px), transparent 50%);
  mask-image: radial-gradient(circle, transparent calc(50% - var(--bind-w, 3px) - 3px), #000 calc(50% - var(--bind-w, 3px)) calc(50% - 1px), transparent 50%);
  box-shadow: none;
  filter: drop-shadow(0 0 7px rgba(150, 205, 255, 0.75));
  animation: capbind-ring-v2 820ms cubic-bezier(0.2, 0.85, 0.3, 1) forwards;
}

@keyframes capbind-ring-v2 {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--bind-rot, 0deg)) scale(1.18) scaleY(0.94); }
  18% { opacity: calc(0.5 + var(--wstep, 1) * 0.12); }
  70% { opacity: calc(0.4 + var(--wstep, 1) * 0.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(calc(var(--bind-rot, 0deg) + var(--bind-dir, 150deg))) scale(0.4) scaleY(0.94); }
}

.fx-capbind-ring.inner { --bind-c: rgba(186, 198, 255, 0.85); animation-duration: 700ms; }

/* the last wobble leaves a ring that contracts INTO the presnap pinhole */
.fx-capbind-final {
  width: var(--bind-from, 190px);
  height: var(--bind-from, 190px);
  border-radius: 50%;
  border: 2px solid rgba(220, 234, 255, 0.9);
  box-shadow: 0 0 14px rgba(150, 205, 255, 0.6), inset 0 0 10px rgba(150, 205, 255, 0.4);
  mix-blend-mode: screen;
  z-index: 15;
  opacity: 0;
  animation: capbind-final 520ms cubic-bezier(0.55, 0, 0.75, 0.5) forwards;
}

@keyframes capbind-final {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  20% { opacity: 0.9; }
  85% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.16); }
}

/* ---- prism: real chroma in ripple + streaks ------------------------------ */
.fx-capprism-ripple {
  background: conic-gradient(from 20deg,
    rgba(255, 110, 185, 0.8), rgba(255, 216, 110, 0.8), rgba(120, 255, 185, 0.8),
    rgba(110, 185, 255, 0.8), rgba(205, 120, 255, 0.8), rgba(255, 110, 185, 0.8)) !important;
  -webkit-mask-image: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 7px) calc(50% - 1px), transparent 50%);
  mask-image: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 7px) calc(50% - 1px), transparent 50%);
  filter: saturate(1.3) drop-shadow(0 0 10px rgba(205, 180, 255, 0.65));
  animation: capprism-ripple-v2 860ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes capprism-ripple-v2 {
  0% { opacity: calc(0.7 + var(--wstep, 1) * 0.07); transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
  70% { opacity: calc(0.42 + var(--wstep, 1) * 0.07); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(46deg); }
}

.fx-capprism-streak {
  width: 3.5px;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--c1, #cdb8ff) 45%, #ffffff 88%) !important;
  filter: drop-shadow(0 0 6px rgba(210, 190, 255, 0.8));
}

/* ---- fail-path FX inherit the variant's light ---------------------------- */
.fx-capvar-eclipse .fx-break-heat { background: radial-gradient(circle, rgba(140, 190, 255, 0.55), rgba(80, 130, 230, 0.25) 45%, transparent 70%); }
.fx-capvar-eclipse .fx-break-crack { filter: drop-shadow(0 0 4px #cfe4ff) drop-shadow(0 0 11px rgba(120, 170, 255, 0.85)); }
.fx-capvar-eclipse .fx-break-leak { background: linear-gradient(0deg, rgba(214, 236, 255, 0.95), transparent); }
.fx-capvar-prism .fx-break-heat { background: radial-gradient(circle, rgba(200, 150, 255, 0.5), rgba(140, 100, 240, 0.24) 45%, transparent 70%); }
.fx-capvar-prism .fx-break-crack { filter: drop-shadow(0 0 4px #e6d8ff) drop-shadow(0 0 11px rgba(180, 130, 255, 0.85)); }
.fx-capvar-prism .fx-break-leak { background: linear-gradient(0deg, rgba(236, 224, 255, 0.95), transparent); }

/* ---- verdict typography: white-hot top, dark plate behind the word ------- */
.fx-catch-result::before {
  content: "";
  position: absolute;
  inset: -55% -16%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(2, 4, 9, 0.58), rgba(2, 4, 9, 0.3) 55%, transparent 78%);
}

.fx-catch-result .l {
  background: linear-gradient(178deg, #ffffff 8%, #ffe9a0 36%, #f7b733 58%, #b4741f 78%, #ffedb0 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

.fx-catch-result.no .l {
  background: linear-gradient(178deg, #ffffff 8%, #ff9d84 38%, #e8543f 60%, #6f1c12 82%, #ffc9b8 96%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(60, 10, 4, 0.95)) drop-shadow(0 6px 16px rgba(0, 0, 0, 0.75));
}

/* ---- camera impulses ----------------------------------------------------- */
/* held breath: a barely-there push-in while every FX span is frozen */
.battle-stage:has(.fx-layer.fx-verdict-hold) {
  scale: 1.012;
  transition: scale 180ms ease-out;
}

/* success slam: the whole stage kicks with the white-out */
.battle-stage:has(.fx-capture-impact) {
  animation: cap-verdict-slam 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cap-verdict-slam {
  0% { scale: 1.024; }
  100% { scale: 1; }
}

/* ---- the absorbed monster's nameplate falls dark with it ----------------- */
.battle:has(.fx-layer.fx-capture) .combatant.enemy .combat-card {
  opacity: 0.22;
  transition: opacity 700ms ease 500ms;
}

/* ---- mobile landscape: retuned radii ------------------------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  .fx-capture-blackout { --soft-base: 104px; }
  .fx-capture-blackout.fx-capvar-eclipse { --soft-base: 84px; }
  .fx-capture-blackout.absorb { --well-core: 36px; --soft-base: 72px; }
  .fx-capture-blackout.presnap { --well-core: 42px; --soft-base: 50px; }
  .fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 38px; --soft-base: 44px; }
  .fx-capture-blackout.afterglow { --well-core: 140px; --soft-base: 170px; }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx-capture-blackout::before,
  .fx-capbind-final { animation: none; opacity: 0; }
  .fx-capture-blackout::after { box-shadow: none; }
  .battle-stage:has(.fx-layer.fx-verdict-hold) { scale: none; }
  .battle-stage:has(.fx-capture-impact) { animation: none; }
}

/* ==========================================================================
   capture-light-v4-2 — round-3 consolidated critic fixes
   One graded white-out, deterministic verdict type, fail-path parity,
   deeper eclipse, feathered keylight, safer flicker.
   ========================================================================== */

/* ---- verdict flash: ONE detonation with a graded decay ------------------- */
/* the body-level flash is the only flash and sits above word + veil + floor,
   so nothing composites inside it; single square-to-decay = no strobe pair */
.fx-capture-impact-global {
  z-index: 33;
  animation: fx-cap-impact-v4 480ms cubic-bezier(0.3, 0, 0.55, 1) forwards;
}

@keyframes fx-cap-impact-v4 {
  0%, 17% { opacity: 0.98; }
  40% { opacity: 0.42; }
  100% { opacity: 0; }
}

/* the stage-level white-out is retired for captures - one flash, one source */
.fx-layer.fx-capture .fx-capture-impact { animation: none; opacity: 0; }

/* ---- verdict type: solid gold + layered shadow (deterministic) ----------- */
/* gradient-clip text fails to paint on animated letters (known project
   gotcha) - mid-flight glyphs rendered as dark cut-outs. Solid fill + bevel
   shadows reads premium at every animation stage. */
.fx-catch-result .l {
  background: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #ffd97e;
  filter: none;
  text-shadow:
    0 -1px 0 rgba(255, 248, 220, 0.9),
    0 1px 0 rgba(150, 86, 16, 0.95),
    0 3px 0 rgba(104, 58, 10, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(255, 206, 96, 0.5);
}

.fx-catch-result.no .l {
  background: none !important;
  color: #ff9878;
  filter: none;
  text-shadow:
    0 -1px 0 rgba(255, 232, 220, 0.9),
    0 1px 0 rgba(140, 32, 14, 0.95),
    0 3px 0 rgba(96, 20, 8, 0.85),
    0 6px 16px rgba(0, 0, 0, 0.65),
    0 0 26px rgba(255, 120, 84, 0.45);
}

/* subtler word plate - it doubles with the held veil */
.fx-catch-result::before {
  background: radial-gradient(ellipse, rgba(2, 4, 9, 0.42), rgba(2, 4, 9, 0.2) 55%, transparent 76%);
}

/* ---- fail path ----------------------------------------------------------- */
/* the veil holds a presnap-level plate through strain -> shatter -> word */
.fx-capture-blackout.fail-hold { --well-core: 54px; --soft-base: 74px; }
.fx-capture-blackout.fx-capvar-gold.fail-hold { --well-mid: rgba(30, 12, 4, 0.8); --well-deep: rgba(14, 5, 2, 0.93); --well-edge: rgba(7, 2, 1, 0.97); }
.fx-capture-blackout.fx-capvar-eclipse.fail-hold { --well-core: 50px; --soft-base: 64px; --well-mid: rgba(8, 14, 34, 0.86); --well-deep: rgba(4, 8, 22, 0.95); --well-edge: rgba(1, 3, 10, 0.985); }
.fx-capture-blackout.fx-capvar-prism.fail-hold { --well-mid: rgba(26, 16, 56, 0.82); --well-deep: rgba(15, 9, 36, 0.93); --well-edge: rgba(8, 5, 22, 0.975); }
.fx-capture-blackout.fail-hold::after { --chrome-floor: rgba(2, 3, 6, 0.72); }

/* strain flicker: two gentle eased dips, not three square reversals */
.fx-capture-dim.strain-flicker,
.fx-capture-blackout.strain-flicker { animation: capture-dim-flicker-v2 620ms ease-in-out forwards; }

@keyframes capture-dim-flicker-v2 {
  0% { opacity: 1; }
  30% { opacity: 0.84; }
  48% { opacity: 1; }
  74% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* capture shakes must not scale the stage past its chrome - the held veil
   already masks the backdrop edge the scale was covering */
.battle:has(.fx-layer.fx-capture) .battle-stage.shake,
.battle:has(.fx-layer.fx-capture) .battle-stage.shake-hard { scale: 1; }

/* crack veins: tapered crystal fractures (butt caps, miter joins, thick
   trunks thinning to fine tips) instead of rounded-cap twigs */
.fx-break-crack {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.7' d='M24 24l6-8 1-5M24 24l-8-3-5 1M24 24l3 9-2 6M24 24l-5 6-6 3'/%3E%3Cpath stroke-width='0.9' d='M30 16l4-3M31 11l3-4M16 21l-4-2M11 22l-4 1M27 33l3 3M25 39l2 4M19 30l-4 5M13 33l-4 2'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: catch-crack-pop-v2 190ms cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}

@keyframes catch-crack-pop-v2 {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--crack-rot, 0deg)) scale(0.55); }
  45% { opacity: 0.82; }
  100% { opacity: 0.78; transform: translate(-50%, -50%) rotate(var(--crack-rot, 0deg)) scale(1); }
}

/* light leaks: finer, shorter - no more long tail below the charm */
.fx-break-leak {
  width: 2px;
  max-height: 44px;
  background: linear-gradient(0deg, rgba(255, 244, 214, 0.9), rgba(255, 244, 214, 0.25) 70%, transparent);
}

/* ---- eclipse: the whole first half ~15pts deeper; true pinhole hold ------ */
.fx-capture-blackout.fx-capvar-eclipse {
  --well-mid: rgba(13, 24, 54, 0.68);
  --well-deep: rgba(7, 14, 36, 0.86);
  --well-edge: rgba(3, 7, 20, 0.94);
}

.fx-capture-blackout.fx-capvar-eclipse.absorb { --well-mid: rgba(12, 22, 50, 0.7); --well-deep: rgba(7, 13, 34, 0.87); --well-edge: rgba(3, 6, 18, 0.945); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-1 { --soft-base: 100px; --well-mid: rgba(12, 22, 50, 0.73); --well-deep: rgba(6, 12, 32, 0.89); --well-edge: rgba(3, 6, 17, 0.95); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-2 { --soft-base: 92px; --well-mid: rgba(11, 21, 47, 0.77); --well-deep: rgba(6, 11, 30, 0.91); --well-edge: rgba(2, 5, 15, 0.96); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-3 { --soft-base: 84px; --well-mid: rgba(10, 19, 44, 0.8); --well-deep: rgba(5, 10, 28, 0.925); --well-edge: rgba(2, 5, 14, 0.97); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-4 { --soft-base: 76px; --well-mid: rgba(9, 18, 41, 0.83); --well-deep: rgba(5, 9, 26, 0.94); --well-edge: rgba(2, 4, 12, 0.975); }
.fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 46px; --soft-base: 54px; --well-mid: rgba(7, 12, 30, 0.9); --well-deep: rgba(3, 7, 19, 0.975); --well-edge: rgba(1, 2, 8, 0.992); }

/* pinhole held breath: the keylight pool shrinks with the well (eclipse) */
.fx-layer.fx-verdict-hold.fx-capvar-eclipse .fx-cap-keylight {
  animation: none;
  opacity: 0.32;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* ---- keylight: feathered edge (no readable disc boundary) ---------------- */
.fx-cap-keylight {
  filter: blur(7px);
  background: radial-gradient(circle, var(--keyl-c, rgba(255, 214, 130, 0.5)), var(--keyl-c2, rgba(255, 170, 80, 0.22)) 30%, rgba(0, 0, 0, 0) 58%);
}

/* ---- god rays arrive WITH the afterglow, not under the held plate -------- */
.fx-layer.fx-capture .fx-capture-rays { animation-delay: 380ms; }

/* ---- gold: warmer near-field spill (fight the chartreuse cast) ----------- */
.fx-capvar-gold .fx-capture-dim {
  background:
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), rgba(255, 158, 66, 0.28), rgba(255, 132, 44, 0.1) 24%, transparent 46%),
    radial-gradient(circle at var(--fx, 70%) var(--fy, 42%), transparent 52%, rgba(26, 12, 0, 0.32) 100%);
}

/* ---- prism: denser starfield --------------------------------------------- */
.fx-capture-blackout.fx-capvar-prism::before {
  background-image:
    radial-gradient(2px 2px at 8vw 12vh, rgba(255, 255, 255, 0.95), transparent 100%),
    radial-gradient(1.4px 1.4px at 21vw 32vh, rgba(226, 234, 255, 0.85), transparent 100%),
    radial-gradient(2.2px 2.2px at 15vw 68vh, rgba(255, 250, 238, 0.9), transparent 100%),
    radial-gradient(1.3px 1.3px at 31vw 84vh, rgba(214, 224, 255, 0.8), transparent 100%),
    radial-gradient(1.8px 1.8px at 42vw 8vh, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(1.2px 1.2px at 55vw 90vh, rgba(230, 236, 255, 0.75), transparent 100%),
    radial-gradient(2px 2px at 68vw 6vh, rgba(255, 246, 230, 0.9), transparent 100%),
    radial-gradient(1.5px 1.5px at 84vw 16vh, rgba(255, 255, 255, 0.9), transparent 100%),
    radial-gradient(2.2px 2.2px at 93vw 48vh, rgba(238, 242, 255, 0.9), transparent 100%),
    radial-gradient(1.4px 1.4px at 88vw 78vh, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.7px 1.7px at 74vw 92vh, rgba(226, 232, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 5vw 45vh, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.9px 1.9px at 48vw 22vh, rgba(244, 240, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 63vw 70vh, rgba(255, 255, 255, 0.7), transparent 100%),
    radial-gradient(1.6px 1.6px at 12vw 26vh, rgba(255, 255, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 27vw 6vh, rgba(232, 238, 255, 0.8), transparent 100%),
    radial-gradient(2px 2px at 36vw 44vh, rgba(255, 252, 240, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 58vw 14vh, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.5px 1.5px at 77vw 30vh, rgba(238, 244, 255, 0.85), transparent 100%),
    radial-gradient(1.2px 1.2px at 96vw 8vh, rgba(255, 255, 255, 0.75), transparent 100%),
    radial-gradient(1.8px 1.8px at 90vw 62vh, rgba(244, 240, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 44vw 94vh, rgba(230, 236, 255, 0.75), transparent 100%),
    radial-gradient(1.5px 1.5px at 18vw 90vh, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(1.2px 1.2px at 66vw 40vh, rgba(255, 250, 240, 0.75), transparent 100%),
    radial-gradient(1.7px 1.7px at 3vw 66vh, rgba(238, 242, 255, 0.85), transparent 100%),
    radial-gradient(1.3px 1.3px at 52vw 60vh, rgba(255, 255, 255, 0.7), transparent 100%);
}

/* ---- the darkness never fully freezes: slightly deeper breathe ----------- */
@keyframes cap-well-breathe {
  0% { --well-soft: var(--soft-base, 150px); }
  100% { --well-soft: calc(var(--soft-base, 150px) * 0.8); }
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx-break-crack { animation: none; opacity: 0; }
}

/* ==========================================================================
   capture-light-v4-3 — round-4 final fixes
   ========================================================================== */

/* CASCADE FIX: these must out-rank the flicker rule above (equal specificity,
   later wins) or a failed capture never releases its darkness. */
.fx-capture-dim.snap,
.fx-capture-blackout.snap { animation: capture-dim-snap 300ms linear forwards; }

/* white-out: 1-2 frames of pure white, then a true graded decay to the floor.
   The reclaimed time belongs to the held dark plate under the verdict word. */
.fx-capture-impact-global { animation: fx-cap-impact-v5 440ms cubic-bezier(0.3, 0, 0.55, 1) forwards; }

@keyframes fx-cap-impact-v5 {
  0%, 10% { opacity: 0.98; }
  26% { opacity: 0.55; }
  55% { opacity: 0.24; }
  82% { opacity: 0.09; }
  100% { opacity: 0; }
}

/* afterglow: slightly tighter well + darker chrome floor - the wide well was
   painting a bright lobe on the chrome past the stage edge once the floor
   stopped hiding it. Theatre framing holds through the finale instead. */
.fx-capture-blackout.afterglow { --well-core: 150px; --soft-base: 190px; }
.fx-capture-blackout.afterglow::after { --chrome-floor: rgba(3, 5, 9, 0.58); }

/* verdict letters: metallic depth via layered two-tone shadows (top sheen,
   double bevel, ambient) - deterministic, no clip gradients */
.fx-catch-result .l {
  text-shadow:
    0 -2px 1px rgba(255, 252, 232, 0.85),
    0 -1px 0 rgba(255, 248, 220, 0.9),
    0 1px 0 rgba(150, 86, 16, 0.95),
    0 3px 0 rgba(104, 58, 10, 0.85),
    0 5px 2px rgba(70, 38, 6, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(255, 206, 96, 0.55);
}

.fx-catch-result.no .l {
  text-shadow:
    0 -2px 1px rgba(255, 240, 230, 0.85),
    0 -1px 0 rgba(255, 232, 220, 0.9),
    0 1px 0 rgba(140, 32, 14, 0.95),
    0 3px 0 rgba(96, 20, 8, 0.85),
    0 5px 2px rgba(60, 14, 6, 0.55),
    0 8px 18px rgba(0, 0, 0, 0.65),
    0 0 26px rgba(255, 120, 84, 0.5);
}

/* capture-light-v4-3b: afterglow lobe kill - the well must not read past the
   stage frame. Tighter afterglow well + a floor dark enough that the crossing
   reads as a faint spill, never a crescent on the menu. */
.fx-capture-blackout.afterglow { --well-core: 130px; --soft-base: 160px; }
.fx-capture-blackout.afterglow::after { --chrome-floor: rgba(3, 5, 9, 0.72); }

/* ==========================================================================
 * Evolution prompt - cinematic fullscreen rebuild (.evolution-prompt--cine)
 * The confirm beat stages the decision like the ceremony it precedes: a dark
 * stage filling the playfield rect, the title in white on top, the sprite
 * pair as the biggest thing on screen, question + Yes/No on the bottom rail.
 * The parchment card chrome is gone on purpose (markup no longer carries
 * .modal-card). Everything after Yes (.evolution-scene, .evolution-result)
 * is untouched. DOM order stays h2, p, preview, actions - the grid `order`
 * properties move the question down next to the buttons.
 * ========================================================================== */
.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(4px, 1.2vh, 10px);
  padding: clamp(8px, 2vh, 18px) clamp(10px, 2.4vw, 22px) clamp(10px, 2.2vh, 20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 240, 196, 0.26), rgba(126, 100, 46, 0.14) 32%, rgba(24, 30, 48, 0.42) 60%, rgba(8, 10, 18, 0.97) 88%),
    #0a0f1c;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.45);
  animation: evo-prompt-cine-enter 260ms ease-out both;
}

@keyframes evo-prompt-cine-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine > h2 {
  order: 0;
  margin: 0;
  max-width: min(94%, 60rem);
  color: #fff;
  font-size: clamp(1.25rem, 2.6vh + 1vw, 2.4rem);
  line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 4px rgba(0, 0, 0, 0.6);
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine > p {
  order: 1;
  margin: 0;
  max-width: min(94%, 46rem);
  color: rgba(255, 252, 244, 0.94);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine .dialogue-actions {
  order: 2;
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vw, 24px);
  margin: 0;
  padding: 0;
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine .dialogue-actions button {
  min-width: clamp(7.5rem, 22vw, 11rem);
  min-height: clamp(34px, 6.5vh, 48px);
  font-size: clamp(0.95rem, 2.4vh, 1.15rem);
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine .evolution-choice-preview {
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  grid-template-columns: minmax(0, 1fr) clamp(34px, 6vw, 64px) minmax(0, 1fr);
  gap: clamp(6px, 1.6vw, 16px);
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine .evolution-choice-preview img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55));
}

.modal.evolution-map-modal .evolution-prompt.evolution-prompt--cine .evolution-choice-preview span {
  justify-self: center;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, 0.9) 30%, rgba(255, 240, 200, 0.9) 70%, transparent);
}

/* long remote titles ("... aus Parzelle 3 versucht, sich zu entwickeln!")
   keep the small-screen shrink they had before the rebuild */
@media (max-width: 720px), (max-height: 520px), (pointer: coarse) {
  .modal.evolution-map-modal .evolution-prompt--remote.evolution-prompt--cine > h2 {
    max-width: 96%;
    font-size: clamp(0.85rem, 3.6vw, 1.15rem);
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
}

/* ==========================================================================
   capture-light-v4-4 — monster clarity + prism identity push
   ========================================================================== */

/* ---- ally light well: the player's monster stays readable ---------------- */
/* A mask lift at the ally's position thins the veil there - a soft secondary
   well. It crushes to near-full darkness for the held breath and the fail
   plate (the world's LAST light belongs to the charm alone). */
@property --ally-lift { syntax: "<number>"; inherits: false; initial-value: 0.42; }

.fx-capture-blackout {
  --ally-lift: 0.42;
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --well-mid 420ms ease, --well-deep 420ms ease, --well-edge 420ms ease,
    --ally-lift 420ms ease;
  -webkit-mask-image: radial-gradient(circle at var(--ax, 18vw) var(--ay, 62vh),
    rgba(0, 0, 0, var(--ally-lift, 0.42)) 74px,
    rgba(0, 0, 0, calc(0.55 + var(--ally-lift, 0.42) * 0.45)) 158px,
    #000 250px);
  mask-image: radial-gradient(circle at var(--ax, 18vw) var(--ay, 62vh),
    rgba(0, 0, 0, var(--ally-lift, 0.42)) 74px,
    rgba(0, 0, 0, calc(0.55 + var(--ally-lift, 0.42) * 0.45)) 158px,
    #000 250px);
}

.fx-capture-blackout.presnap { --ally-lift: 0.9; }
.fx-capture-blackout.fail-hold { --ally-lift: 0.86; }
.fx-capture-blackout.afterglow { --ally-lift: 0.36; }

/* ---- prism: chromatic diffraction fringe on the well rim ----------------- */
/* the light/dark boundary refracts - a thin spectral ring that breathes,
   tightens and collapses WITH the well through the whole staircase */
.fx-capture-blackout.fx-capvar-prism {
  background:
    radial-gradient(circle at var(--bx, 62vw) var(--by, 40vh),
      transparent calc(var(--well-core, 74px) - 10px),
      rgba(150, 255, 235, 0.16) calc(var(--well-core, 74px) - 4px),
      rgba(185, 155, 255, 0.2) calc(var(--well-core, 74px) + 4px),
      rgba(255, 145, 225, 0.13) calc(var(--well-core, 74px) + 12px),
      transparent calc(var(--well-core, 74px) + 20px)),
    radial-gradient(circle at var(--bx, 62vw) var(--by, 40vh),
      transparent var(--well-core, 74px),
      var(--well-mid, rgba(4, 6, 12, 0.55)) calc(var(--well-core, 74px) + var(--well-soft, 150px)),
      var(--well-deep, rgba(3, 5, 10, 0.82)) 58%,
      var(--well-edge, rgba(2, 4, 8, 0.9)) 100%);
}

/* held breath: the sky answers - stars twinkle faster and brighter */
.fx-capture-blackout.fx-capvar-prism.presnap::before {
  animation: capprism-twinkle-v2 900ms ease-in-out infinite alternate;
}

/* prism fail: crack strokes are violet crystal, not plain white */
.fx-capvar-prism .fx-break-crack {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23dcc8ff' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath stroke-width='1.7' d='M24 24l6-8 1-5M24 24l-8-3-5 1M24 24l3 9-2 6M24 24l-5 6-6 3'/%3E%3Cpath stroke-width='0.9' d='M30 16l4-3M31 11l3-4M16 21l-4-2M11 22l-4 1M27 33l3 3M25 39l2 4M19 30l-4 5M13 33l-4 2'/%3E%3C/svg%3E");
}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fx-capture-blackout { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   capture-light-v4-5 — concentric light: the well anchor is a registered
   length pair, so re-anchoring (ball box -> painted crystal core at settle,
   back to the monster at fail re-emerge) glides instead of jumping.
   ========================================================================== */
@property --bx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --by { syntax: "<length>"; inherits: false; initial-value: 0px; }

.fx-capture-blackout {
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --bx 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --by 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --well-mid 420ms ease, --well-deep 420ms ease, --well-edge 420ms ease,
    --ally-lift 420ms ease;
}

/* ==========================================================================
   capture-light-v4-6 — prism 9.5 push (round A)
   ========================================================================== */

/* ---- ally lift clamped to the stage -------------------------------------- */
/* Additive mask layers: the ally radial lift + four opaque bands covering
   everything OUTSIDE the stage rect (feathered 16px). Sum: outside the stage
   the veil is always full strength - the lift exists only inside the frame. */
.fx-capture-blackout {
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --bx 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --by 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --well-mid 420ms ease, --well-deep 420ms ease, --well-edge 420ms ease,
    --ally-lift 260ms ease;
  -webkit-mask-image:
    radial-gradient(circle at var(--ax, 18vw) var(--ay, 62vh),
      rgba(0, 0, 0, var(--ally-lift, 0.42)) 74px,
      rgba(0, 0, 0, calc(0.55 + var(--ally-lift, 0.42) * 0.45)) 158px,
      #000 250px),
    linear-gradient(to right, #000 calc(var(--sl, 0px) - 8px), transparent calc(var(--sl, 0px) + 8px)),
    linear-gradient(to left, #000 calc(100% - var(--sl, 0px) - var(--sw, 100vw) - 8px), transparent calc(100% - var(--sl, 0px) - var(--sw, 100vw) + 8px)),
    linear-gradient(to bottom, #000 calc(var(--st, 0px) - 8px), transparent calc(var(--st, 0px) + 8px)),
    linear-gradient(to top, #000 calc(100% - var(--st, 0px) - var(--sh, 100vh) - 8px), transparent calc(100% - var(--st, 0px) - var(--sh, 100vh) + 8px));
  mask-image:
    radial-gradient(circle at var(--ax, 18vw) var(--ay, 62vh),
      rgba(0, 0, 0, var(--ally-lift, 0.42)) 74px,
      rgba(0, 0, 0, calc(0.55 + var(--ally-lift, 0.42) * 0.45)) 158px,
      #000 250px),
    linear-gradient(to right, #000 calc(var(--sl, 0px) - 8px), transparent calc(var(--sl, 0px) + 8px)),
    linear-gradient(to left, #000 calc(100% - var(--sl, 0px) - var(--sw, 100vw) - 8px), transparent calc(100% - var(--sl, 0px) - var(--sw, 100vw) + 8px)),
    linear-gradient(to bottom, #000 calc(var(--st, 0px) - 8px), transparent calc(var(--st, 0px) + 8px)),
    linear-gradient(to top, #000 calc(100% - var(--st, 0px) - var(--sh, 100vh) - 8px), transparent calc(100% - var(--st, 0px) - var(--sh, 100vh) + 8px));
  -webkit-mask-composite: source-over, source-over, source-over, source-over, source-over;
  mask-composite: add, add, add, add, add;
}

/* ---- ally crush: the frame belongs to the charm at the held breath ------- */
.fx-capture-blackout.wstep-3 { --ally-lift: 0.52; }
.fx-capture-blackout.wstep-4 { --ally-lift: 0.64; }
.fx-capture-blackout.presnap { --ally-lift: 0.92; }
.fx-capture-blackout.fail-hold { --ally-lift: 0.88; }
.fx-capture-blackout.afterglow { --ally-lift: 0.36; }

/* ---- prism staircase: a real first step, monotonic spacing --------------- */
.fx-capture-blackout.fx-capvar-prism.wstep-1 { --well-mid: rgba(42, 27, 88, 0.58); --well-deep: rgba(26, 16, 60, 0.78); --well-edge: rgba(15, 9, 40, 0.87); }
.fx-capture-blackout.fx-capvar-prism.wstep-2 { --well-mid: rgba(41, 26, 85, 0.63); --well-deep: rgba(25, 15, 58, 0.82); --well-edge: rgba(14, 9, 39, 0.9); }
.fx-capture-blackout.fx-capvar-prism.wstep-3 { --well-mid: rgba(40, 25, 84, 0.68); --well-deep: rgba(24, 15, 56, 0.87); --well-edge: rgba(14, 9, 38, 0.93); }
.fx-capture-blackout.fx-capvar-prism.wstep-4 { --well-mid: rgba(38, 23, 80, 0.74); --well-deep: rgba(22, 14, 52, 0.91); --well-edge: rgba(13, 8, 34, 0.955); }
.fx-capture-blackout.fx-capvar-prism.presnap { --well-mid: rgba(26, 16, 56, 0.85); --well-deep: rgba(15, 9, 36, 0.95); --well-edge: rgba(8, 5, 22, 0.985); }
.fx-capture-blackout.fx-capvar-prism.fail-hold { --well-mid: rgba(26, 16, 56, 0.82); --well-deep: rgba(15, 9, 36, 0.93); --well-edge: rgba(8, 5, 22, 0.975); }

/* ---- strain flicker: half the amplitude, same nerves --------------------- */
.fx-capture-dim.strain-flicker,
.fx-capture-blackout.strain-flicker { animation: capture-dim-flicker-v3 620ms ease-in-out forwards; }

@keyframes capture-dim-flicker-v3 {
  0% { opacity: 1; }
  32% { opacity: 0.9; }
  52% { opacity: 1; }
  78% { opacity: 0.88; }
  100% { opacity: 1; }
}

/* cascade order: snap must always beat flicker (both classes are present) */
.fx-capture-dim.snap,
.fx-capture-blackout.snap { animation: capture-dim-snap 300ms linear forwards; }

/* ==========================================================================
   capture-light-v4-7 — five-level staircase (step 1 arms at charm drop),
   snappier step transitions, ally crush that outruns the floor.
   ========================================================================== */

/* steps land fast enough to read within the beat even if jank delays the
   transition start */
.fx-capture-blackout.stair-armed {
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --bx 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --by 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --well-mid 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-deep 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-edge 280ms cubic-bezier(0.3, 0, 0.4, 1),
    --ally-lift 220ms ease;
}

/* ---- gold staircase, 5 levels ------------------------------------------- */
.fx-capture-blackout.fx-capvar-gold.wstep-1 { --well-mid: rgba(52, 24, 8, 0.51); --well-deep: rgba(26, 11, 4, 0.73); --well-edge: rgba(12, 4, 2, 0.82); }
.fx-capture-blackout.fx-capvar-gold.wstep-2 { --well-mid: rgba(50, 23, 7, 0.56); --well-deep: rgba(25, 10, 4, 0.77); --well-edge: rgba(11, 4, 2, 0.86); }
.fx-capture-blackout.fx-capvar-gold.wstep-3 { --well-mid: rgba(48, 21, 7, 0.62); --well-deep: rgba(23, 10, 3, 0.81); --well-edge: rgba(11, 4, 1, 0.89); }
.fx-capture-blackout.fx-capvar-gold.wstep-4 { --well-mid: rgba(46, 20, 6, 0.67); --well-deep: rgba(22, 9, 3, 0.85); --well-edge: rgba(10, 3, 1, 0.92); }
.fx-capture-blackout.fx-capvar-gold.wstep-5 { --well-mid: rgba(42, 18, 6, 0.73); --well-deep: rgba(20, 8, 3, 0.89); --well-edge: rgba(9, 3, 1, 0.945); }

/* ---- eclipse staircase, 5 levels ----------------------------------------- */
.fx-capture-blackout.fx-capvar-eclipse.wstep-1 { --soft-base: 104px; --well-mid: rgba(12, 22, 50, 0.72); --well-deep: rgba(7, 13, 33, 0.88); --well-edge: rgba(3, 6, 17, 0.945); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-2 { --soft-base: 97px; --well-mid: rgba(12, 21, 48, 0.75); --well-deep: rgba(6, 12, 31, 0.9); --well-edge: rgba(3, 6, 16, 0.953); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-3 { --soft-base: 90px; --well-mid: rgba(11, 20, 46, 0.78); --well-deep: rgba(6, 11, 30, 0.915); --well-edge: rgba(2, 5, 15, 0.961); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-4 { --soft-base: 83px; --well-mid: rgba(10, 19, 44, 0.81); --well-deep: rgba(5, 10, 28, 0.93); --well-edge: rgba(2, 5, 13, 0.968); }
.fx-capture-blackout.fx-capvar-eclipse.wstep-5 { --soft-base: 76px; --well-mid: rgba(9, 18, 41, 0.84); --well-deep: rgba(5, 9, 26, 0.945); --well-edge: rgba(2, 4, 12, 0.976); }

/* ---- prism staircase, 5 levels ------------------------------------------- */
.fx-capture-blackout.fx-capvar-prism.wstep-1 { --well-mid: rgba(43, 27, 90, 0.56); --well-deep: rgba(27, 16, 62, 0.76); --well-edge: rgba(15, 9, 41, 0.855); }
.fx-capture-blackout.fx-capvar-prism.wstep-2 { --well-mid: rgba(42, 27, 88, 0.61); --well-deep: rgba(26, 16, 60, 0.8); --well-edge: rgba(15, 9, 40, 0.885); }
.fx-capture-blackout.fx-capvar-prism.wstep-3 { --well-mid: rgba(41, 26, 85, 0.66); --well-deep: rgba(25, 15, 58, 0.84); --well-edge: rgba(14, 9, 39, 0.912); }
.fx-capture-blackout.fx-capvar-prism.wstep-4 { --well-mid: rgba(40, 25, 84, 0.7); --well-deep: rgba(24, 15, 56, 0.875); --well-edge: rgba(14, 9, 38, 0.935); }
.fx-capture-blackout.fx-capvar-prism.wstep-5 { --well-mid: rgba(38, 23, 80, 0.75); --well-deep: rgba(22, 14, 52, 0.915); --well-edge: rgba(13, 8, 34, 0.958); }

/* ---- ally crush outruns the floor (held breath belongs to the charm) ----- */
.fx-capture-blackout.wstep-3 { --ally-lift: 0.56; }
.fx-capture-blackout.wstep-4 { --ally-lift: 0.66; }
.fx-capture-blackout.wstep-5 { --ally-lift: 0.76; }
.fx-capture-blackout.presnap { --ally-lift: 0.96; }
.fx-capture-blackout.fail-hold { --ally-lift: 0.94; }

/* presnap/fail-hold must stay the deepest state (cascade after wstep-5) */
.fx-capture-blackout.fx-capvar-gold.presnap { --well-mid: rgba(30, 12, 4, 0.84); --well-deep: rgba(14, 5, 2, 0.95); --well-edge: rgba(7, 2, 1, 0.985); }
.fx-capture-blackout.fx-capvar-gold.fail-hold { --well-mid: rgba(30, 12, 4, 0.8); --well-deep: rgba(14, 5, 2, 0.93); --well-edge: rgba(7, 2, 1, 0.97); }
.fx-capture-blackout.fx-capvar-eclipse.presnap { --well-core: 46px; --soft-base: 54px; --well-mid: rgba(7, 12, 30, 0.9); --well-deep: rgba(3, 7, 19, 0.975); --well-edge: rgba(1, 2, 8, 0.992); }
.fx-capture-blackout.fx-capvar-eclipse.fail-hold { --well-core: 50px; --soft-base: 64px; --well-mid: rgba(8, 14, 34, 0.86); --well-deep: rgba(4, 8, 22, 0.95); --well-edge: rgba(1, 3, 10, 0.985); }
.fx-capture-blackout.fx-capvar-prism.presnap { --well-mid: rgba(26, 16, 56, 0.85); --well-deep: rgba(15, 9, 36, 0.95); --well-edge: rgba(8, 5, 22, 0.985); }
.fx-capture-blackout.fx-capvar-prism.fail-hold { --well-mid: rgba(26, 16, 56, 0.82); --well-deep: rgba(15, 9, 36, 0.93); --well-edge: rgba(8, 5, 22, 0.975); }

/* ==========================================================================
   capture-light-v4-8 — anchor correction snap: the last few px onto the
   crystal at rest, fast (cascades after .stair-armed).
   ========================================================================== */
.fx-capture-blackout.anchor-snap {
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --bx 120ms ease-out,
    --by 120ms ease-out,
    --well-mid 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-deep 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-edge 280ms cubic-bezier(0.3, 0, 0.4, 1),
    --ally-lift 220ms ease;
}

/* ==========================================================================
   capture-light-v4-10 — faster sway tracking: the well follows the rocking
   charm with less lag (cascades after .stair-armed and .anchor-snap).
   ========================================================================== */
.fx-capture-blackout.stair-armed {
  transition:
    --well-core 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --soft-base 340ms cubic-bezier(0.2, 0.8, 0.3, 1),
    --bx 180ms cubic-bezier(0.25, 0.6, 0.35, 1),
    --by 180ms cubic-bezier(0.25, 0.6, 0.35, 1),
    --well-mid 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-deep 280ms cubic-bezier(0.3, 0, 0.4, 1), --well-edge 280ms cubic-bezier(0.3, 0, 0.4, 1),
    --ally-lift 220ms ease;
}


/* ===========================================================================
   SEAL CEREMONY (fullscreen arena badge award) - replaces the old .seal-award
   modal card, which stays in the sheet only for the vendor-css contract.
   Mounted by showSealAward() on #modal.clean-world-modal.seal-cine-modal so
   the vendor Ledger&Seal sheet never touches it. Variant switch:
   window.__sealCineVariant / localStorage sealCineVariant
   (sanctum | spotlight | triumph). Critic-reviewed over 4 rounds 2026-08-18.
   =========================================================================== */
/* =========================================================================
   SEAL CEREMONY — fullscreen arena badge award (candidate rework, round 4)
   Class family: .seal-cine   Variants: --sanctum | --spotlight | --triumph
   ========================================================================= */
.seal-cine {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f4f0e6;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- backdrop ---- */
.seal-cine-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 50% 32%, var(--sa-deep) 0%, #030409 72%),
    #030409;
  animation: seal-cine-bg-in 480ms ease-out both;
}
@keyframes seal-cine-bg-in { from { opacity: 0; } to { opacity: 1; } }

.seal-cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(ellipse 118% 90% at 50% 40%, transparent 40%, rgba(0, 0, 0, 0.72) 100%);
}

/* film grain — kills gradient banding, reads as photographed light */
.seal-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 140px 140px;
}

/* ---- core stack ---- */
.seal-cine-core {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 12px 20px;
  max-width: min(92vw, 800px);
  translate: 0 -1.2vh;
}

/* medal PNGs carry ~15% transparent padding — the stage box is sized so the
   PAINTED circle, not the file, hits the intended presence */
.seal-cine-stage {
  position: relative;
  width: clamp(150px, 48vmin, 384px);
  height: clamp(150px, 48vmin, 384px);
  margin-bottom: clamp(4px, 1.4vmin, 12px);
}

.seal-cine-medal {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 24px var(--sa-glow));
  animation:
    seal-cine-stamp 700ms cubic-bezier(0.22, 0.9, 0.24, 1.16) 420ms both,
    seal-cine-float 4.6s ease-in-out 1400ms infinite;
}
@keyframes seal-cine-stamp {
  0% { opacity: 0; transform: translateY(-9vh) scale(2.05) rotate(-11deg); }
  58% { opacity: 1; transform: translateY(4px) scale(0.94) rotate(1.5deg); }
  76% { transform: translateY(-2px) scale(1.05) rotate(-0.6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes seal-cine-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.6%); }
}

/* grounding: contact shadow under the medal (above halo, below medal) */
.seal-cine-ground {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -8%;
  width: 70%;
  height: 8%;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(7px);
  opacity: 0;
  animation: seal-cine-ground-in 700ms ease-out 900ms both;
}
@keyframes seal-cine-ground-in { to { opacity: 0.85; } }
@keyframes seal-cine-fade-in { to { opacity: 1; } }

/* impact flash */
.seal-cine-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255, 252, 240, 0.9), rgba(255, 244, 200, 0.3) 40%, transparent 70%);
  opacity: 0;
  animation: seal-cine-flash 780ms ease-out 640ms both;
}
@keyframes seal-cine-flash {
  0%, 42% { opacity: 0; }
  52% { opacity: 0.8; }
  100% { opacity: 0; }
}

/* impact shock ring + sparks */
.seal-cine-ring {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 46%;
  height: 46%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid var(--sa-soft);
  box-shadow: 0 0 30px var(--sa-glow), inset 0 0 22px var(--sa-glow);
  opacity: 0;
  animation: seal-cine-ringout 900ms cubic-bezier(0.16, 0.8, 0.3, 1) 780ms both;
}
@keyframes seal-cine-ringout {
  0% { opacity: 0.95; scale: 0.4; }
  100% { opacity: 0; scale: 2.6; }
}

.seal-cine-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.seal-cine-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sa-soft);
  box-shadow: 0 0 12px var(--sa-glow);
  opacity: 0;
  animation: seal-cine-spark 860ms cubic-bezier(0.14, 0.7, 0.3, 1) calc(790ms + var(--i) * 12ms) both;
}
@keyframes seal-cine-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + cos(var(--i) * 30deg + 8deg) * 19vmin),
                calc(-50% + sin(var(--i) * 30deg + 8deg) * 19vmin)) scale(0.25);
  }
}

/* sheen sweep across the medal art */
.seal-cine-shine {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--seal-mask);
  mask-image: var(--seal-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.seal-cine-shine::before {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -70%;
  width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-18deg);
  mix-blend-mode: screen;
  animation: seal-cine-sheen 1200ms ease-in-out 1500ms both;
}
@keyframes seal-cine-sheen { to { transform: skewX(-18deg) translateX(430%); } }

/* ---- typography cascade ---- */
.seal-cine-kicker,
.seal-cine-title,
.seal-cine-sub,
.seal-cine-progress,
.seal-cine-actions {
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: seal-cine-rise 520ms cubic-bezier(0.2, 0.8, 0.24, 1) both;
}
.seal-cine-kicker  { animation-delay: 1050ms; }
.seal-cine-title   { animation-delay: 1170ms; }
.seal-cine-sub     { animation-delay: 1290ms; }
.seal-cine-progress{ animation-delay: 1420ms; }
.seal-cine-actions { animation-delay: 1560ms; }
@keyframes seal-cine-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.seal-cine-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 10px;
  color: var(--sa);
  opacity: 0;
  font-size: max(11px, min(0.78rem, 2vmin));
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
/* soft-ended light dashes, not hard stubs */
.seal-cine-kicker::before,
.seal-cine-kicker::after {
  content: "";
  height: 1px;
  width: clamp(34px, 8vmin, 76px);
  background: linear-gradient(90deg, transparent, var(--sa) 62%, transparent);
  opacity: 0.85;
}

.seal-cine-title {
  margin: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vmin, 3.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: #fdf7e3;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.65),
    0 0 34px var(--sa-glow);
}

.seal-cine-sub {
  margin: 14px 0 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: max(14px, min(1rem, 2.3vmin));
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

/* ---- collection progress ---- */
.seal-cine-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vmin, 13px);
  margin-top: clamp(18px, 3.6vmin, 28px);
}
/* empty state is theme-aware: light fill + dark inner stroke reads on both
   cool-dark and warm-mid fields */
.seal-cine-progress i {
  width: clamp(11px, 2vmin, 13px);
  height: clamp(11px, 2vmin, 13px);
  rotate: 45deg;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.seal-cine-progress i.lit {
  background: linear-gradient(135deg, #fff2c8, var(--sa));
  border-color: var(--sa-soft);
  box-shadow: 0 0 12px var(--sa-glow);
}
.seal-cine-progress i.is-new { animation: seal-cine-pip 1000ms ease-out 1750ms both; }
@keyframes seal-cine-pip {
  0% { scale: 1; }
  40% { scale: 1.9; box-shadow: 0 0 26px var(--sa-glow), 0 0 4px #fff; }
  100% { scale: 1; }
}
/* count hangs OFF the flex flow so the diamonds center on the page axis */
.seal-cine-progress span {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 5px;
  color: var(--sa);
  font-size: max(11px, min(0.8rem, 2vmin));
  font-weight: 800;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* full-set moment: kicker, pips and count go gold — one coherent ceremony */
.seal-cine.is-complete .seal-cine-progress i.lit {
  background: linear-gradient(135deg, #fff6d8, #ffd76a 55%, #dfa42e);
  border-color: #ffe9a8;
  box-shadow: 0 0 14px rgba(255, 215, 106, 0.85);
}
.seal-cine.is-complete .seal-cine-progress span { color: #ffd76a; text-shadow: 0 0 12px rgba(255, 215, 106, 0.6); }
.seal-cine.is-complete .seal-cine-kicker { color: #ffd76a; }
.seal-cine.is-complete .seal-cine-kicker::before,
.seal-cine.is-complete .seal-cine-kicker::after { background: linear-gradient(90deg, transparent, #ffd76a 62%, transparent); }
.seal-cine.is-complete .seal-cine-title {
  color: #ffeec2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 0 40px rgba(255, 215, 106, 0.5);
}
.seal-cine.is-complete .seal-cine-laurel { color: #d9b969; }
.seal-cine.is-complete .seal-cine-actions button { border-color: rgba(255, 215, 106, 0.55); color: #ffe9a8; }

/* ---- continue: accent glass — hue without luminance ---- */
.seal-cine-actions { margin-top: clamp(22px, 4.2vmin, 34px); }
.seal-cine .seal-cine-actions button {
  appearance: none;
  cursor: pointer;
  min-height: 54px;
  min-width: 210px;
  padding: 0 36px;
  color: var(--sa-soft);
  background:
    linear-gradient(180deg, var(--sa-btn-hi), var(--sa-btn-lo)),
    rgba(8, 10, 14, 0.55);
  border: 1.5px solid var(--sa-border);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: background 150ms ease, color 150ms ease, transform 140ms ease, box-shadow 150ms ease;
}
.seal-cine .seal-cine-actions button:hover,
.seal-cine .seal-cine-actions button:focus-visible {
  color: #171106;
  background: linear-gradient(180deg, var(--sa-soft), var(--sa));
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 14px var(--sa-glow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}
.seal-cine .seal-cine-actions button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; }
.seal-cine .seal-cine-actions button:active { transform: translateY(1px) scale(0.97); }
/* touch has no hover: idle borrows part of the hover state and breathes */
@media (hover: none) {
  .seal-cine-actions button {
    background:
      linear-gradient(180deg, var(--sa-btn-hi), var(--sa-btn-lo)),
      rgba(255, 255, 255, 0.1);
    box-shadow:
      0 0 0 1.5px rgba(255, 255, 255, 0.4),
      0 6px 22px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: seal-cine-rise 520ms cubic-bezier(0.2, 0.8, 0.24, 1) 1560ms both,
               seal-cine-cta-breathe 3.2s ease-in-out 2200ms infinite;
  }
  .seal-cine-actions button:active {
    background: linear-gradient(180deg, var(--sa-soft), var(--sa));
    color: #171106;
  }
}
@keyframes seal-cine-cta-breathe {
  50% {
    box-shadow:
      0 0 0 1.5px rgba(255, 255, 255, 0.65),
      0 0 20px var(--sa-glow),
      0 6px 22px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* =========================================================================
   VARIANT A — SANCTUM: irregular god-rays arriving AT the medal
   ========================================================================= */
.seal-cine--sanctum .seal-cine-rays {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 165vmax;
  height: 165vmax;
  translate: -50% -50%;
  pointer-events: none;
  /* seven shafts, uneven angles, three intensity tiers — no sunburst grid */
  background: conic-gradient(from 0deg,
    transparent 4deg,  var(--sa-ray) 10deg, var(--sa-ray) 15deg, transparent 24deg,
    transparent 55deg, var(--sa-ray-soft) 60deg, var(--sa-ray-soft) 62deg, transparent 68deg,
    transparent 88deg, var(--sa-ray) 97deg, var(--sa-ray) 106deg, transparent 116deg,
    transparent 152deg, var(--sa-ray-faint) 156deg, var(--sa-ray-faint) 158deg, transparent 163deg,
    transparent 183deg, var(--sa-ray) 190deg, var(--sa-ray) 196deg, transparent 205deg,
    transparent 238deg, var(--sa-ray-soft) 244deg, var(--sa-ray-soft) 247deg, transparent 254deg,
    transparent 286deg, var(--sa-ray) 294deg, var(--sa-ray) 302deg, transparent 312deg);
  filter: blur(7px);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, 0.5) 40%, transparent 67%);
  mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, 0.5) 40%, transparent 67%);
  opacity: 0;
  animation:
    seal-cine-fade-in 900ms ease-out 260ms both,
    seal-cine-rays-spin 90s linear 260ms infinite;
}
@keyframes seal-cine-rays-spin { to { rotate: 360deg; } }

/* tight bright core ON the medal + restrained outer breath */
.seal-cine--sanctum .seal-cine-halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 132%;
  height: 132%;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--sa-core) 0%, transparent 34%),
    radial-gradient(circle, var(--sa-glow) 8%, transparent 60%);
  animation: seal-cine-halo 5s ease-in-out 900ms infinite, seal-cine-fade-in 700ms ease-out 500ms both;
}
@keyframes seal-cine-halo { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.seal-cine--sanctum .seal-cine-ground {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.72), transparent 72%);
}

/* the lockup sits on quiet dark, not on the rays */
.seal-cine--sanctum .seal-cine-core::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -6%;
  width: 130%;
  height: 60%;
  translate: -50%;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 46% at 50% 62%, rgba(3, 10, 16, 0.6), transparent 74%);
}

/* motes: three depth layers; suppressed over the lockup only */
.seal-cine-motes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.3) 64%, rgba(0, 0, 0, 0.15) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.3) 64%, rgba(0, 0, 0, 0.15) 100%);
}
.seal-cine-motes span {
  position: absolute;
  left: var(--mx);
  bottom: -2vh;
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: var(--sa-soft);
  box-shadow: 0 0 8px var(--sa-glow);
  filter: blur(var(--mb));
  opacity: 0;
  animation: seal-cine-mote var(--md) linear var(--mdel) infinite;
}
@keyframes seal-cine-mote {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  12% { opacity: var(--mo); }
  80% { opacity: var(--mo); }
  100% { opacity: 0; transform: translateY(-104vh) translateX(var(--mdx)); }
}

/* =========================================================================
   VARIANT B — SPOTLIGHT: one cold shaft; the beam lands on a stage
   ========================================================================= */
.seal-cine--spotlight .seal-cine-bg {
  background:
    radial-gradient(90% 55% at 50% 112%, var(--sa-deep) 0%, transparent 58%),
    radial-gradient(ellipse 60% 44% at 50% 96%, rgba(120, 110, 160, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 35%, rgba(120, 110, 160, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, #07080c 0%, #030407 100%);
}
/* beam: enters dim, peaks at the medal band, spent before the button */
.seal-cine--spotlight .seal-cine-rays {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -12vh;
  width: min(74vh, 80vw);
  height: 118vh;
  translate: -50%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(244, 248, 255, 0.02) 10%,
    rgba(244, 248, 255, 0.17) 32%,
    rgba(244, 248, 255, 0.10) 46%,
    rgba(244, 248, 255, 0.03) 55%,
    transparent 65%);
  clip-path: polygon(45% 0, 55% 0, 88% 100%, 12% 100%);
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: 0;
  animation: seal-cine-shaft 1100ms ease-out 180ms both;
}
@keyframes seal-cine-shaft {
  from { opacity: 0; transform: scaleX(0.4); }
  to { opacity: 1; transform: scaleX(1); }
}
/* hot pool of light the medal sits in */
.seal-cine--spotlight .seal-cine-halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 46%;
  width: 165%;
  height: 130%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 40% at 50% 46%, rgba(214, 232, 255, 0.36), rgba(214, 232, 255, 0.1) 55%, transparent 72%);
  opacity: 0;
  animation: seal-cine-fade-in 900ms ease-out 700ms both;
}
/* the medal owns the hierarchy: accent bloom + top rim light */
.seal-cine--spotlight .seal-cine-medal {
  filter:
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 18px var(--sa-glow))
    drop-shadow(0 0 48px var(--sa-glow));
}
.seal-cine-rim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05) 34%, transparent 52%);
  -webkit-mask-image: var(--seal-mask);
  mask-image: var(--seal-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  animation: seal-cine-fade-in 800ms ease-out 950ms both;
}
/* slow dust falling inside the cone only */
.seal-cine-dust {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: -12vh;
  width: min(74vh, 80vw);
  height: 118vh;
  translate: -50%;
  pointer-events: none;
  clip-path: polygon(45% 0, 55% 0, 88% 100%, 12% 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, #000 50%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 20%, #000 50%, transparent 72%);
}
.seal-cine-dust span {
  position: absolute;
  left: var(--mx);
  top: -4vh;
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: rgba(240, 246, 255, 0.9);
  filter: blur(var(--mb));
  opacity: 0;
  animation: seal-cine-dustfall var(--md) linear var(--mdel) infinite;
}
@keyframes seal-cine-dustfall {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  10% { opacity: var(--mo); }
  85% { opacity: calc(var(--mo) * 0.5); }
  100% { opacity: 0; transform: translateY(70vh) translateX(var(--mdx)); }
}
/* the beam LANDS: bright pool at the medal base over a dark contact ellipse */
.seal-cine--spotlight .seal-cine-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9%;
  width: 170%;
  height: 18px;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(214, 232, 255, 0.30), rgba(200, 185, 245, 0.12) 55%, transparent 74%);
  filter: blur(5px);
  opacity: 0;
  animation: seal-cine-fade-in 800ms ease-out 900ms both;
}
.seal-cine-reflection {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 106%;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
  object-fit: contain;
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
  mask-image: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.55) 100%);
  filter: blur(2px) saturate(0.75);
  animation: seal-cine-refl 900ms ease-out 1000ms both;
}
@keyframes seal-cine-refl { to { opacity: 0.42; } }
/* dark scrim so the lockup sits on one even value */
.seal-cine--spotlight .seal-cine-core::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -6%;
  width: 130%;
  height: 62%;
  translate: -50%;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 48% at 50% 62%, rgba(2, 3, 6, 0.55), transparent 72%);
}
/* ceremony caps: serif, mass without glare */
.seal-cine--spotlight .seal-cine-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 6vmin, 3.4rem);
  max-width: 92vw;
  color: rgba(230, 230, 238, 0.94);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 0 30px rgba(190, 214, 255, 0.28);
}
.seal-cine--spotlight .seal-cine-kicker {
  color: rgba(235, 241, 255, 0.68);
  font-size: max(10px, min(0.68rem, 1.8vmin));
  letter-spacing: 0.36em;
  text-indent: 0.36em;
}
.seal-cine--spotlight .seal-cine-kicker::before,
.seal-cine--spotlight .seal-cine-kicker::after { background: linear-gradient(90deg, transparent, rgba(230, 238, 255, 0.55) 62%, transparent); }
.seal-cine--spotlight .seal-cine-sub { color: rgba(226, 232, 246, 0.78); }
/* museum ghost pill: visible surface + strong boundary, no glare */
.seal-cine--spotlight .seal-cine-actions button {
  color: #e6e2f5;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(226, 222, 255, 0.5);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.seal-cine--spotlight .seal-cine-actions button:hover,
.seal-cine--spotlight .seal-cine-actions button:focus-visible {
  color: #14141a;
  background: linear-gradient(180deg, #dde0ea, #b9c0d2);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.seal-cine--spotlight .seal-cine-progress i {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
}
.seal-cine--spotlight .seal-cine-progress i.lit {
  scale: 1.12;
  background: linear-gradient(135deg, #ffffff, var(--sa-soft));
  border-color: #fff;
  box-shadow: 0 0 12px rgba(220, 234, 255, 0.7);
}
.seal-cine--spotlight .seal-cine-progress span { color: rgba(230, 238, 255, 0.78); }
@media (hover: none) {
  .seal-cine--spotlight .seal-cine-actions button { background: rgba(255, 255, 255, 0.12); }
  .seal-cine--spotlight .seal-cine-actions button:active {
    background: linear-gradient(180deg, #dde0ea, #b9c0d2);
    color: #14141a;
  }
}

/* =========================================================================
   VARIANT C — TRIUMPH: light horizon the medal stands on, laurels
   ========================================================================= */
.seal-cine--triumph .seal-cine-bg {
  background:
    radial-gradient(130% 100% at 50% 118%, var(--sa-deep) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 30%, var(--sa-deep) 0%, #030409 80%),
    #030409;
}
/* band = horizon: symmetric feather, anchored to the stage */
.seal-cine--triumph .seal-cine-rays {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 52%;
  width: 165vw;
  height: 52%;
  translate: -50% -50%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 2%,
    var(--sa-band) 36%,
    var(--sa-band-hot) 50%,
    var(--sa-band) 64%,
    transparent 98%);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%);
  filter: blur(12px);
  opacity: 0;
  animation: seal-cine-banner 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 420ms both;
}
@keyframes seal-cine-banner {
  from { opacity: 0; scale: 0.1 1; }
  to { opacity: 1; scale: 1 1; }
}
/* dark halo keeps the medal silhouette off the light band */
.seal-cine--triumph .seal-cine-medal {
  filter:
    drop-shadow(0 0 26px rgba(5, 8, 18, 0.8))
    drop-shadow(0 20px 32px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 22px var(--sa-glow));
}
.seal-cine--triumph .seal-cine-halo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 165%;
  height: 165%;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg, transparent, var(--sa-glow) 90deg, transparent 180deg, var(--sa-glow) 270deg, transparent),
    radial-gradient(circle, var(--sa-glow) 0%, transparent 58%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85), transparent 68%);
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.85), transparent 68%);
  opacity: 0;
  animation: seal-cine-fade-in 700ms ease-out 700ms both, seal-cine-halo-spin 30s linear 700ms infinite;
}
@keyframes seal-cine-halo-spin { to { rotate: 360deg; } }
/* the medal stands ON the horizon: readable mirror + contact shadow */
.seal-cine--triumph .seal-cine-reflection {
  top: 100.5%;
  height: 100%;
  transform: scaleY(-0.35);
  transform-origin: top center;
  filter: blur(2.5px) saturate(0.7);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent 75%);
  animation: seal-cine-refl-triumph 900ms ease-out 1050ms both;
}
@keyframes seal-cine-refl-triumph { to { opacity: 0.18; } }
.seal-cine-laurel {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: clamp(54px, 14vmin, 104px);
  height: clamp(124px, 34vmin, 250px);
  translate: 0 -50%;
  color: var(--sa-laurel);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  opacity: 0;
}
.seal-cine-laurel--l { right: 93.5%; animation: seal-cine-laurel-l 700ms cubic-bezier(0.2, 0.8, 0.24, 1) 900ms both; }
.seal-cine-laurel--r { left: 93.5%; transform: scaleX(-1) translateY(5px) rotate(3deg); animation: seal-cine-laurel-r 700ms cubic-bezier(0.2, 0.8, 0.24, 1) 900ms both; }
@keyframes seal-cine-laurel-l { from { opacity: 0; translate: 16px -50%; } to { opacity: 1; translate: 0 -50%; } }
@keyframes seal-cine-laurel-r { from { opacity: 0; translate: -16px -50%; } to { opacity: 1; translate: 0 -50%; } }
.seal-cine--triumph .seal-cine-title {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 7.4vmin, 4.1rem);
  color: #fffaf0;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 4px 22px rgba(0, 0, 0, 0.7),
    0 0 42px var(--sa-glow);
}

/* =========================================================================
   short-viewport layout (landscape phones)
   ========================================================================= */
@media (max-height: 500px) {
  /* translate would make the core the containing block for the fixed CTA
     below — shift with margin instead */
  .seal-cine-core { padding: 4px 16px; translate: none; margin-top: -6px; }
  .seal-cine-stage {
    width: clamp(150px, 56vh, 232px);
    height: clamp(150px, 56vh, 232px);
    margin-bottom: 8px;
  }
  .seal-cine-kicker { margin-bottom: 7px; }
  .seal-cine-sub { margin-top: 8px; max-width: 70ch; }
  .seal-cine-progress { margin-top: 12px; }
  .seal-cine-laurel { display: none; }
  .seal-cine--triumph .seal-cine-rays { height: 46%; }
}
@media (max-height: 440px) {
  /* CTA rides the thumb corner; pips stay with the story they tell */
  .seal-cine-actions {
    position: fixed;
    right: max(20px, env(safe-area-inset-right, 0px));
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    margin: 0;
  }
  .seal-cine-actions button { min-height: 48px; min-width: 176px; padding: 0 28px; font-size: 14px; }
  .seal-cine--spotlight .seal-cine-core::after,
  .seal-cine--sanctum .seal-cine-core::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .seal-cine *, .seal-cine { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .seal-cine-flash, .seal-cine-ring, .seal-cine-burst, .seal-cine-shine, .seal-cine-motes, .seal-cine-dust { display: none; }
}


/* ===========================================================================
   EGG HATCH CEREMONY (fullscreen monster arrival) - replaces the old
   .egg-hatch-scene box + .egg-hatch-result card for the shared
   showAnimatedEggHatchAnimation path (nursery / reward / premium eggs).
   The Riptalon story egg, Phoenix egg and Nursery collect keep their bespoke
   scenes on the legacy classes. Variant switch: window.__hatchCineVariant /
   localStorage hatchCineVariant (sunrise | aurora | rootlight).
   =========================================================================== */
.modal.hatch-cine-modal, .modal.dig-cine-modal { padding: 0; }

.hatch-cine {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f4f0e6;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}

.hatch-cine-bg { position: absolute; inset: 0; animation: hatch-cine-fadein 480ms ease-out both; }
@keyframes hatch-cine-fadein { from { opacity: 0; } to { opacity: 1; } }

.hatch-cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse 118% 90% at 50% 42%, transparent 42%, rgba(0, 0, 0, 0.7) 100%);
}

.hatch-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 140px 140px;
}

.hatch-cine-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, rgba(255, 252, 240, 0.95), rgba(255, 244, 200, 0.32) 40%, transparent 72%);
  animation: hatch-cine-flash 760ms ease-out var(--egg-hatch-impact-delay, 1500ms) both;
}
.hatch-cine.is-revealed .hatch-cine-flash { animation: hatch-cine-flash 820ms ease-out both; }
@keyframes hatch-cine-flash { 0% { opacity: 0; } 18% { opacity: 0.85; } 100% { opacity: 0; } }

.hatch-cine-rays {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 1;
  width: 150vmax;
  height: 150vmax;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 8deg,
    transparent 0 9deg, var(--hc-ray, rgba(255, 233, 168, 0.1)) 9deg 12deg, transparent 12deg 26deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 6vmin, rgba(0, 0, 0, 0.85) 16vmin, transparent 44vmin);
  mask-image: radial-gradient(circle, transparent 0 6vmin, rgba(0, 0, 0, 0.85) 16vmin, transparent 44vmin);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hatch-cine-rays-in 1400ms ease-out 260ms both, hatch-cine-rays-spin 26s linear 260ms infinite;
}
@keyframes hatch-cine-rays-in { to { opacity: 0.5; } }
@keyframes hatch-cine-rays-spin { to { rotate: 14deg; } }

.hatch-cine-halo {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 1;
  width: clamp(280px, 74vmin, 620px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--hc-core, rgba(255, 240, 200, 0.4)),
    color-mix(in srgb, var(--hc) 26%, transparent) 40%,
    transparent 70%);
  filter: blur(6px);
  opacity: 0;
  animation: hatch-cine-halo-in 1200ms ease-out 200ms both;
}
@keyframes hatch-cine-halo-in { to { opacity: 0.85; } }
.hatch-cine.is-revealed .hatch-cine-halo { animation: hatch-cine-halo-swell 900ms cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes hatch-cine-halo-swell {
  0% { opacity: 0.5; scale: 0.9; }
  45% { opacity: 1; scale: 1.12; }
  100% { opacity: 0.9; scale: 1; }
}

.hatch-cine-spill {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: clamp(340px, 56vmin, 520px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--hc-spill, #ffd98f) 40%, transparent),
    color-mix(in srgb, var(--hc-spill, #ffd98f) 15%, transparent) 46%,
    transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hatch-cine-halo-in 1100ms ease-out 300ms both;
}
.hatch-cine-core::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 0;
  width: 130vmin;
  height: 74vmin;
  translate: -50% -30%;
  background: radial-gradient(60% 42% at 50% 40%, rgba(6, 10, 20, 0.5), transparent 75%);
  pointer-events: none;
}
.hatch-cine-bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: linear-gradient(0deg, var(--hc-base, rgba(30, 45, 70, 0.24)), transparent);
}
.hatch-cine-embers { position: absolute; inset: -6%; z-index: 5; pointer-events: none; }
.hatch-cine-embers span {
  position: absolute;
  left: calc(14% + var(--i) * 9%);
  bottom: 6%;
  width: calc(2px + mod(var(--i), 3) * 1px);
  height: calc(2px + mod(var(--i), 3) * 1px);
  border-radius: 50%;
  background: var(--hc-spill, #ffd98f);
  box-shadow: 0 0 8px var(--hc-spill, #ffd98f);
  mix-blend-mode: screen;
  opacity: 0;
}
.hatch-cine.is-revealed .hatch-cine-embers span {
  animation: hatch-cine-ember 3.4s ease-out calc(600ms + var(--i) * 380ms) infinite;
}
@keyframes hatch-cine-ember {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 0.8; }
  70% { opacity: 0.25; }
  100% { opacity: 0; translate: calc((var(--i) - 4) * 1.4vmin) -26vmin; }
}
.hatch-cine-glints { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hatch-cine-glints span {
  position: absolute;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, 0.9) 50%, transparent 56%),
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.9) 50%, transparent 56%);
  opacity: 0;
}
.hatch-cine-glints span:nth-child(1) { left: 16%; top: 22%; }
.hatch-cine-glints span:nth-child(2) { right: 12%; top: 38%; scale: 0.7; }
.hatch-cine-glints span:nth-child(3) { left: 26%; bottom: 12%; scale: 0.55; }
.hatch-cine.is-revealed .hatch-cine-glints span {
  animation: hatch-cine-glint 2.8s ease-in-out calc(900ms + var(--g, 0) * 500ms) infinite;
}
.hatch-cine-glints span:nth-child(2) { --g: 1; }
.hatch-cine-glints span:nth-child(3) { --g: 2; }
@keyframes hatch-cine-glint {
  0%, 100% { opacity: 0; rotate: 0deg; }
  50% { opacity: 0.85; rotate: 24deg; }
}
.hatch-cine-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hatch-cine-motes span {
  position: absolute;
  left: var(--mx);
  bottom: -2vh;
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: var(--hc-mote, #ffe9a8);
  box-shadow: 0 0 8px var(--hc-mote-glow, rgba(255, 233, 168, 0.5));
  filter: blur(var(--mb));
  opacity: 0;
  animation: seal-cine-mote var(--md) linear var(--mdel) infinite;
}

/* ---- core stack ---- */
.hatch-cine-core {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 12px 20px;
  max-width: min(94vw, 860px);
  max-height: 100dvh;
  translate: 0 -0.6vh;
}

.hatch-cine-stage {
  position: relative;
  grid-row: 1;
  width: clamp(190px, 46vmin, 384px);
  aspect-ratio: 1;
  margin-bottom: clamp(2px, 1.2vmin, 10px);
}

/* egg phase */
.hatch-cine-eggwrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: opacity 340ms ease, scale 340ms ease, filter 340ms ease;
  animation: hatch-cine-egg-pop var(--egg-hatch-duration, 2700ms) cubic-bezier(0.2, 0.8, 0.22, 1) both;
}
@keyframes hatch-cine-egg-pop { 0% { scale: 0.84; } 55% { scale: 1; } 100% { scale: 1.05; } }
.hatch-cine.is-revealed .hatch-cine-eggwrap { opacity: 0; scale: 1.24; filter: blur(4px); animation: none; }

.hatch-cine-egg-sheet {
  width: 100%;
  height: 100%;
  background-image: var(--egg-hatch-sheet);
  background-repeat: no-repeat;
  background-position: 0% 0;
  background-size: 1200% 100%;
  filter:
    drop-shadow(0 0 20px color-mix(in srgb, var(--hc) 45%, transparent))
    drop-shadow(0 20px 22px rgba(0, 0, 0, 0.5));
  animation: hatch-cine-sheet-play var(--egg-hatch-duration, 2700ms) steps(11, end) forwards;
}
@keyframes hatch-cine-sheet-play { from { background-position: 0% 0; } to { background-position: 100% 0; } }

.hatch-cine-egg-img {
  width: min(76%, 300px);
  height: min(76%, 300px);
  object-fit: contain;
  filter:
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.36))
    drop-shadow(0 18px 20px rgba(0, 0, 0, 0.46));
  animation: hatch-cine-egg-quiver var(--egg-hatch-duration, 2700ms) ease-in-out both;
}
@keyframes hatch-cine-egg-quiver {
  0%, 16% { rotate: 0deg; }
  22% { rotate: -4deg; }
  28% { rotate: 3.4deg; }
  34% { rotate: -2.6deg; }
  40% { rotate: 0deg; }
  53% { rotate: -5deg; }
  59% { rotate: 4.4deg; }
  65% { rotate: -3deg; }
  71% { rotate: 0deg; }
  81% { rotate: -6deg; }
  87% { rotate: 5deg; }
  93% { rotate: -3deg; }
  100% { rotate: 0deg; }
}

.hatch-cine-premium-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background-image: var(--egg-hatch-fx-sheet);
  background-repeat: no-repeat;
  background-position: 0% 0;
  background-size: 1200% 100%;
  animation: hatch-cine-sheet-play var(--egg-hatch-duration, 2700ms) steps(11, end) forwards;
}

/* monster reveal */
.hatch-cine-monsterwrap {
  position: absolute;
  inset: 4%;
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  translate: 0 26px;
  scale: 0.8;
  filter: blur(6px);
  transition:
    opacity 620ms cubic-bezier(0.16, 0.8, 0.3, 1),
    translate 620ms cubic-bezier(0.16, 0.8, 0.3, 1),
    scale 620ms cubic-bezier(0.16, 0.8, 0.3, 1),
    filter 480ms ease;
}
.hatch-cine.is-revealed .hatch-cine-monsterwrap { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
.hatch-cine-monster { max-width: 100%; max-height: 100%; object-fit: contain; }
.hatch-cine-monster:not(.holo-sprite):not(.black-holo-sprite):not(.shiny-sprite) {
  filter:
    drop-shadow(0 0 26px color-mix(in srgb, var(--hc) 55%, transparent))
    drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55));
}
.hatch-cine.is-revealed .hatch-cine-monsterwrap { animation: hatch-cine-monster-float 4.8s ease-in-out 1100ms infinite; }
@keyframes hatch-cine-monster-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6%; } }
.hatch-cine-monsterwrap .egg-hatch-mutation-seal { position: absolute; right: 4%; top: 4%; }

.hatch-cine-ground {
  position: absolute;
  left: 50%;
  bottom: -4%;
  z-index: 1;
  width: 64%;
  height: 7%;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(7px);
  opacity: 0;
  transition: opacity 600ms ease 200ms;
}
.hatch-cine.is-revealed .hatch-cine-ground { opacity: 0.85; }

.hatch-cine-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 46%;
  height: 46%;
  translate: -50% -50%;
  border-radius: 50%;
  border: 3px solid var(--hc2, #fff);
  box-shadow:
    0 0 30px color-mix(in srgb, var(--hc) 55%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--hc) 45%, transparent);
  opacity: 0;
}
.hatch-cine.is-revealed .hatch-cine-ring { animation: seal-cine-ringout 900ms cubic-bezier(0.16, 0.8, 0.3, 1) both; }

.hatch-cine-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hatch-cine-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hc2, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--hc) 60%, transparent);
  opacity: 0;
}
.hatch-cine.is-revealed .hatch-cine-burst span {
  animation: hatch-cine-spark 900ms cubic-bezier(0.14, 0.7, 0.3, 1) calc(var(--i) * 14ms) both;
}
@keyframes hatch-cine-spark {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + cos(var(--i) * 25.7deg + 6deg) * 21vmin),
                calc(-50% + sin(var(--i) * 25.7deg + 6deg) * 21vmin)) scale(0.25);
  }
}

/* ---- text: hatching caption <-> reveal cascade (same grid cell) ---- */
.hatch-cine-caption,
.hatch-cine-reveal {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  z-index: 3;
}

.hatch-cine-caption { transition: opacity 300ms ease, translate 300ms ease; }
.hatch-cine-caption h2 {
  margin: 0 0 6px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.4rem, 4.6vmin, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fdf7e3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 30px color-mix(in srgb, var(--hc) 40%, transparent);
}
.hatch-cine-caption p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: max(13px, min(0.95rem, 2.2vmin));
  letter-spacing: 0.02em;
}
.hatch-cine.is-revealed .hatch-cine-caption { opacity: 0; translate: 0 -10px; pointer-events: none; }

.hatch-cine-reveal { display: grid; justify-items: center; pointer-events: none; }
.hatch-cine.is-revealed .hatch-cine-reveal { pointer-events: auto; }
.hatch-cine-reveal > * {
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 520ms cubic-bezier(0.2, 0.8, 0.24, 1) var(--rd, 0ms),
    translate 520ms cubic-bezier(0.2, 0.8, 0.24, 1) var(--rd, 0ms);
}
.hatch-cine.is-revealed .hatch-cine-reveal > * { opacity: 1; translate: 0 0; }
.hatch-cine-reveal .hatch-cine-kicker { --rd: 120ms; }
.hatch-cine-reveal .hatch-cine-title { --rd: 240ms; }
.hatch-cine-reveal .hatch-cine-sub { --rd: 380ms; }
.hatch-cine-reveal .egg-hatch-stats { --rd: 540ms; }
.hatch-cine-reveal .hatch-cine-actions { --rd: 720ms; }

.hatch-cine-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  color: var(--hc-accent, #ffd98f);
  font-size: max(11px, min(0.78rem, 2vmin));
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
.hatch-cine-kicker::before,
.hatch-cine-kicker::after {
  content: "";
  height: 1px;
  width: clamp(30px, 7vmin, 68px);
  background: linear-gradient(90deg, transparent, var(--hc-accent, #ffd98f) 62%, transparent);
  opacity: 0.85;
}

.hatch-cine-title {
  margin: 0;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 6vmin, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: #fdf7e3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 0 34px color-mix(in srgb, var(--hc) 50%, transparent);
}

.hatch-cine-sub {
  margin: 10px 0 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: max(13px, min(0.98rem, 2.3vmin));
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

/* stat chips: dark glass over the scene */
.hatch-cine .egg-hatch-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin-top: clamp(12px, 2.6vmin, 20px);
  max-width: min(92vw, 640px);
}
.hatch-cine .egg-hatch-stats span {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  color: rgba(255, 252, 240, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 235, 200, 0.2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-size: max(11px, min(0.78rem, 2vmin));
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hatch-cine .egg-hatch-stats span.wide {
  flex-basis: 100%;
  justify-content: center;
  padding: 0;
  color: #aeb4c0;
  background: none;
  border: none;
  box-shadow: none;
  font-size: max(10px, min(0.72rem, 1.9vmin));
}
.hatch-cine .egg-hatch-stats span.egg-hatch-mutation { color: var(--hc-accent, #ffd98f); }

/* CTA: accent glass, mirrors the seal ceremony button */
.hatch-cine-actions { margin-top: clamp(16px, 3.4vmin, 28px); }
.hatch-cine .hatch-cine-actions button,
.dig-cine .dig-cine-actions button {
  appearance: none;
  cursor: pointer;
  min-height: 52px;
  min-width: 200px;
  padding: 0 34px;
  color: #ffeed2;
  background:
    linear-gradient(180deg, rgba(64, 76, 104, 0.5), rgba(18, 22, 36, 0.6)),
    rgba(10, 12, 18, 0.72);
  border: 1px solid color-mix(in srgb, var(--hc-accent, var(--stone, #ffd98f)) 55%, transparent);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 18px color-mix(in srgb, var(--hc-accent, var(--stone, #ffd98f)) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 150ms ease, color 150ms ease, transform 140ms ease, box-shadow 150ms ease;
}
.hatch-cine .hatch-cine-actions button:hover,
.hatch-cine .hatch-cine-actions button:focus-visible,
.dig-cine .dig-cine-actions button:hover,
.dig-cine .dig-cine-actions button:focus-visible {
  color: #171106;
  background: linear-gradient(180deg, #fff6dc, var(--hc, var(--stone)));
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.5),
    0 0 14px color-mix(in srgb, var(--hc, var(--stone)) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}
.hatch-cine .hatch-cine-actions button:focus-visible,
.dig-cine .dig-cine-actions button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; }
.hatch-cine .hatch-cine-actions button:active,
.dig-cine .dig-cine-actions button:active { transform: translateY(1px) scale(0.97); }

/* ---- variant: SUNRISE - dawn light well, warm horizon ---- */
.hatch-cine--sunrise {
  --hc-accent: #ffd98f;
  --hc-mote: #ffe9b8;
  --hc-mote-glow: rgba(255, 214, 140, 0.55);
  --hc-core: rgba(255, 190, 110, 0.24);
  --hc-ray: rgba(255, 206, 120, 0.09);
  --hc-base: rgba(70, 42, 16, 0.35);
}
.hatch-cine--sunrise .hatch-cine-bg {
  background: radial-gradient(130% 86% at 50% 96%, #35210b 0%, #1c0f05 48%, #0a0504 80%), #0a0504;
}
.hatch-cine--sunrise .hatch-cine-bg::after {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 34%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 178, 84, 0.4), rgba(255, 150, 60, 0.12) 55%, transparent 80%);
  mix-blend-mode: screen;
}
.hatch-cine--sunrise .hatch-cine-halo { mix-blend-mode: screen; }
.hatch-cine--sunrise .hatch-cine-rays { top: 56%; }

/* ---- variant: AURORA - night sky, drifting light ribbons ---- */
.hatch-cine--aurora {
  --hc-accent: #9be8d2;
  --hc-mote: #cfeee6;
  --hc-mote-glow: rgba(155, 232, 210, 0.5);
  --hc-core: rgba(150, 190, 255, 0.13);
  --hc-ray: rgba(150, 226, 255, 0.07);
  --hc-base: rgba(40, 70, 110, 0.25);
}
.hatch-cine--aurora .hatch-cine-halo { width: clamp(340px, 88vmin, 760px); }
.hatch-cine--aurora .hatch-cine-caption p { color: #c8cfdb; }
.hatch-cine--aurora .hatch-cine-bg::before {
  height: 30%;
  background:
    radial-gradient(2.6px 2.6px at 7% 44%, rgba(220, 240, 255, 0.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 13% 72%, rgba(220, 240, 255, 0.45), transparent 60%),
    radial-gradient(2.2px 2.2px at 91% 38%, rgba(220, 240, 255, 0.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 96% 66%, rgba(220, 240, 255, 0.4), transparent 60%),
    linear-gradient(24deg, transparent 42%, rgba(140, 200, 240, 0.07) 50%, transparent 58%),
    linear-gradient(-26deg, transparent 44%, rgba(140, 170, 255, 0.06) 51%, transparent 58%),
    linear-gradient(0deg, var(--hc-base), transparent);
  -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent 96%);
  mask-image: linear-gradient(0deg, #000 40%, transparent 96%);
}
.hatch-cine--aurora .hatch-cine-bg {
  background: radial-gradient(120% 90% at 50% 30%, #0d1830 0%, #070c1c 58%, #030510 100%), #030510;
}
.hatch-cine--aurora .hatch-cine-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.8;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 64% 12%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.6px 1.6px at 82% 34%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 38% 8%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 90% 66%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1px 1px at 8% 56%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 42%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 74% 52%, rgba(255, 255, 255, 0.4), transparent 60%);
}
.hatch-cine-ribbons {
  position: absolute;
  left: -14%;
  right: -14%;
  top: -4%;
  height: 44%;
  z-index: 1;
  pointer-events: none;
  filter: blur(18px);
  mix-blend-mode: screen;
}
.hatch-cine-ribbons span { position: absolute; left: 0; right: 0; height: 26vh; opacity: 0.85; }
.hatch-cine-ribbons span:nth-child(1) {
  top: 0;
  background: linear-gradient(100deg, transparent, rgba(80, 220, 180, 0.19) 30%, rgba(120, 160, 255, 0.14) 55%, transparent 80%);
  transform: rotate(-14deg) skewX(-18deg);
  animation: hatch-aurora-drift 12s ease-in-out infinite alternate;
}
.hatch-cine-ribbons span:nth-child(2) {
  top: 22%;
  background: linear-gradient(84deg, transparent 24%, rgba(130, 120, 255, 0.15) 52%, rgba(80, 220, 180, 0.12) 76%, transparent 96%);
  transform: rotate(9deg) skewX(14deg);
  animation: hatch-aurora-drift 15s ease-in-out 1s infinite alternate-reverse;
}
.hatch-cine-ribbons span:nth-child(3) {
  top: 46%;
  opacity: 0.55;
  background: linear-gradient(104deg, transparent 16%, rgba(90, 190, 255, 0.1) 46%, transparent 82%);
  transform: rotate(-16deg) skewX(-20deg);
  animation: hatch-aurora-drift 18s ease-in-out 2s infinite alternate;
}
@keyframes hatch-aurora-drift { from { translate: -2.5% 0; } to { translate: 2.5% -1.5%; } }

/* ---- variant: ROOTLIGHT - Heartroot glade, root-pulse rings ---- */
.hatch-cine--rootlight {
  --hc-accent: #cfe89b;
  --hc-mote: #e8ffc2;
  --hc-mote-glow: rgba(207, 232, 155, 0.55);
  --hc-core: rgba(226, 255, 190, 0.34);
  --hc-ray: rgba(198, 236, 140, 0.09);
  --hc-base: rgba(6, 18, 10, 0.55);
}
.hatch-cine--rootlight .hatch-cine-bg {
  background: radial-gradient(90% 66% at 50% 30%, #143523 0%, #071710 56%, #020805 100%), #020805;
}
.hatch-cine--rootlight .hatch-cine-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 26% at 22% 12%, rgba(4, 12, 7, 0.7), transparent 70%),
    radial-gradient(30% 22% at 80% 8%, rgba(4, 12, 7, 0.6), transparent 70%),
    radial-gradient(38% 26% at 55% 2%, rgba(4, 12, 7, 0.5), transparent 72%),
    radial-gradient(60% 38% at 50% 8%, rgba(220, 255, 170, 0.12), transparent 66%);
}
.hatch-cine--rootlight .hatch-cine-halo { top: 40%; mix-blend-mode: screen; }
.hatch-cine--rootlight .hatch-cine-rays { top: 40%; }
.hatch-cine-rings {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: clamp(230px, 54vmin, 470px);
  aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.hatch-cine-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(215, 255, 170, 0.34);
  box-shadow: 0 0 18px rgba(190, 240, 150, 0.2), inset 0 0 18px rgba(190, 240, 150, 0.14);
  opacity: 0;
  animation: hatch-root-ring 5.2s ease-out calc(var(--ri, 0) * 1.7s) infinite;
}
.hatch-cine-rings span:nth-child(2) { --ri: 1; }
.hatch-cine-rings span:nth-child(3) { --ri: 2; }
@keyframes hatch-root-ring {
  0% { opacity: 0; scale: 0.42; }
  18% { opacity: 0.55; }
  70% { opacity: 0.12; }
  100% { opacity: 0; scale: 1.16; }
}

/* ===========================================================================
   DIG - fullscreen staging. Phase 1 keeps the epic shovel cinematic but fills
   the screen (.dig-cine-scene wraps the legacy scene, .dig-cine-zoom scales
   the prop cluster). Phase 2 (.dig-cine) is the fullscreen unearth ceremony.
   Variant switch: window.__digCineVariant / localStorage digCineVariant
   (reliquary | geode | starfall).
   =========================================================================== */
.dig-cine-scene {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: auto;
  height: auto;
  border-radius: 0;
  --dig-cine-zoom: clamp(1.1, tan(atan2(100vmin, 520px)), 1.65);
  background: radial-gradient(120% 90% at 50% 85%, #3a2a18 0%, #241809 46%, #120b06 100%);
}
.dig-cine-scene .dig-bg {
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(90, 62, 30, 0.5), transparent 70%),
    radial-gradient(circle at 50% 60%, rgba(0, 0, 0, 0.45), transparent 64%);
}
.dig-cine-scene .dig-shovel-img {
  filter:
    sepia(0.75) saturate(0.55) hue-rotate(-24deg) brightness(0.88)
    drop-shadow(0 12px 8px rgba(0, 0, 0, 0.42));
}
.dig-cine-scene .dig-shovel-img,
.dig-scene--epic.dig-cine-scene .dig-shovel-img { width: 206px; height: 206px; }
.dig-cine-scene .dig-stone-img { width: 132px; height: 132px; }
.dig-cine-scene .dig-mound {
  width: 300px;
  height: 148px;
  top: 57%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 216, 164, 0.18), transparent 40%),
    radial-gradient(ellipse 50% 40% at 50% 56%, #56422a 0%, #4a3722 34%, #382a16 58%, rgba(34, 25, 13, 0.55) 66%, rgba(30, 22, 11, 0) 72%);
}
.dig-cine-scene .dig-mound::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: -1;
  width: 108%;
  height: 26%;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 64%);
  filter: blur(5px);
}
.dig-cine-scene .dig-hole {
  z-index: 1;
  background:
    radial-gradient(ellipse 44% 26% at 50% 86%, rgba(255, 214, 150, 0.1), transparent 55%),
    radial-gradient(ellipse at 50% 40%, #0a0603 0 38%, rgba(26, 17, 8, 0.9) 64%, rgba(26, 17, 8, 0) 84%);
  box-shadow: none;
}
.dig-cine-scene .dig-pile {
  z-index: 1;
  left: 73%;
  top: 47%;
  width: 104px;
  height: 56px;
  border-radius: 46% 54% 40% 42% / 74% 68% 30% 32%;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 214, 158, 0.2), transparent 38%),
    radial-gradient(ellipse 40% 48% at 32% 66%, #47341e 0%, rgba(52, 38, 21, 0) 70%),
    radial-gradient(ellipse 42% 52% at 66% 60%, #3f2e1a 0%, rgba(46, 33, 18, 0) 72%),
    radial-gradient(ellipse 62% 60% at 50% 76%, #362715 0%, #281b0d 60%, rgba(30, 21, 11, 0) 78%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.dig-cine-scene .dig-mound::after {
  content: "";
  position: absolute;
  inset: -4% -2%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 38% 20%, rgba(255, 226, 180, 0.18), transparent 44%);
  mix-blend-mode: screen;
}
.dig-cine-scene .dig-mound::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, transparent 26%, rgba(0, 0, 0, 0.34) 58%, transparent 71%);
}
.dig-cine-scene .dig-hole {
  box-shadow: 0 5px 16px 6px rgba(0, 0, 0, 0.4);
}
.dig-cine-scene .dig-hole::after {
  content: "";
  position: absolute;
  inset: -30% -12%;
  border-radius: 50%;
  background:
    linear-gradient(78deg, transparent 44%, color-mix(in srgb, var(--stone) 60%, transparent) 49% 51%, transparent 56%),
    linear-gradient(132deg, transparent 46%, color-mix(in srgb, var(--stone) 50%, transparent) 49.5% 50.5%, transparent 54%),
    linear-gradient(16deg, transparent 47%, color-mix(in srgb, var(--stone) 45%, transparent) 49.5% 50.5%, transparent 53%),
    radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--stone) 24%, transparent), transparent 55%);
  mix-blend-mode: screen;
  filter: blur(1.5px);
  opacity: 0.3;
  animation: dig-cine-crackpulse 1.6s ease-in-out infinite alternate;
}
@keyframes dig-cine-crackpulse { from { opacity: 0.16; } to { opacity: 0.6; } }
.dig-cine-scene .dig-glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--stone) 80%, #ffffff) 0%, color-mix(in srgb, var(--stone) 40%, transparent) 42%, transparent 70%);
  mix-blend-mode: screen;
}
.dig-cine-scene .dig-stone-img {
  filter:
    drop-shadow(0 0 22px var(--stone))
    drop-shadow(0 0 40px color-mix(in srgb, var(--stone) 55%, transparent))
    drop-shadow(0 24px 16px rgba(0, 0, 0, 0.5));
}
.dig-cine-zoom {
  position: absolute;
  inset: 0;
  transform: scale(var(--dig-cine-zoom));
  transform-origin: 50% 54%;
}
.dig-cine-scene .dig-rays {
  width: 0;
  height: 0;
  left: 50%;
  top: 56%;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.dig-cine-scene .dig-rays span {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(20px, 4.6vmin, 48px);
  height: 46vmax;
  translate: -50% 0;
  transform-origin: 50% 0;
  rotate: calc(var(--i) * 45deg + 7deg);
  background: linear-gradient(180deg,
    rgba(255, 214, 150, 0.5) 0%,
    rgba(255, 214, 150, 0.2) 30%,
    transparent 64%);
  filter: blur(10px);
  opacity: calc(0.16 + 0.14 * cos(var(--i) * 53deg));
  mix-blend-mode: screen;
}
.dig-cine-scene .dig-rays span:nth-child(3n) { width: clamp(36px, 8vmin, 84px); opacity: 0.12; }
.dig-cine-scene .dig-rays span:nth-child(n+9) { display: none; }
.dig-cine-scene .dig-caption { bottom: clamp(22px, 7vh, 64px); z-index: 5; }
.dig-cine-scene .dig-caption h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 5.4vmin, 2.8rem);
  letter-spacing: 0.05em;
  color: #fdf7e3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 30px color-mix(in srgb, var(--stone) 45%, transparent);
}
.dig-cine-scene .dig-caption h2::before,
.dig-cine-scene .dig-caption h2::after {
  content: "";
  height: 1px;
  width: clamp(30px, 7vmin, 68px);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--stone) 70%, #fff) 62%, transparent);
  opacity: 0.7;
}
.dig-cine-scene .dig-caption p {
  margin-top: 4px;
  min-height: 1.35em;
  font-size: max(13px, min(0.98rem, 2.3vmin));
  letter-spacing: 0.02em;
  opacity: 0.82;
}

.dig-cine-vignette {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 92% at 50% 44%, transparent 44%, rgba(0, 0, 0, 0.66) 100%);
}
.dig-cine-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: #fff6e4;
  opacity: 0;
  animation: dig-cine-wipe-in 200ms ease-in 4150ms forwards;
}
@keyframes dig-cine-wipe-in { to { opacity: 1; } }
.dig-cine-grain {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 140px 140px;
}

/* ---- unearth ceremony ---- */
.dig-cine {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #06060b;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f4f0e6;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
}
.dig-cine-bg { position: absolute; inset: 0; animation: hatch-cine-fadein 420ms ease-out both; }

.dig-cine-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  animation: dig-cine-rays-arrive 1400ms cubic-bezier(0.16, 0.85, 0.3, 1) 120ms both, hatch-cine-rays-spin 80s linear 200ms infinite;
}
@keyframes dig-cine-rays-arrive {
  0% { opacity: 0; scale: 0.6; }
  14% { opacity: 1; scale: 1.04; }
  100% { opacity: 0.72; scale: 1; }
}
.dig-cine-rays span {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(24px, 5.5vmin, 58px);
  height: 82vmax;
  translate: -50% 0;
  transform-origin: 50% 0;
  rotate: calc(var(--i) * 30deg + 4deg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--stone) 34%, transparent) 0%,
    color-mix(in srgb, var(--stone) 14%, transparent) 42%,
    transparent 76%);
  filter: blur(9px);
  opacity: calc(0.55 + 0.45 * cos(var(--i) * 47deg));
}
.dig-cine-rays span:nth-child(4n) {
  width: clamp(44px, 10vmin, 104px);
  opacity: 0.2;
}
.dig-cine-rays span:nth-child(1),
.dig-cine-rays span:nth-child(2),
.dig-cine-rays span:nth-child(11),
.dig-cine-rays span:nth-child(12) {
  height: 34vmin;
  opacity: 0.16;
}

.dig-cine-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dig-cine-motes span {
  position: absolute;
  left: var(--mx);
  bottom: -2vh;
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  background: var(--stone2);
  box-shadow: 0 0 8px color-mix(in srgb, var(--stone) 60%, transparent);
  filter: blur(var(--mb));
  opacity: 0;
  animation: seal-cine-mote var(--md) linear var(--mdel) infinite;
}

.dig-cine-core {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  padding: 12px 20px;
  max-width: min(94vw, 820px);
  translate: 0 1.5vh;
}

.dig-cine-stage {
  position: relative;
  width: clamp(180px, 44vmin, 320px);
  aspect-ratio: 1;
  margin-bottom: clamp(10px, 2.4vmin, 18px);
}

.dig-cine-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--stone) 38%, transparent),
    color-mix(in srgb, var(--stone) 14%, transparent) 46%,
    transparent 70%);
  filter: blur(8px);
  opacity: 0;
  animation: hatch-cine-halo-in 1000ms ease-out 260ms both, dig-cine-halo-breathe 3.4s ease-in-out 1400ms infinite;
}
@keyframes dig-cine-halo-breathe {
  0%, 100% { opacity: 0.75; scale: 1; }
  50% { opacity: 1; scale: 1.05; }
}

.dig-cine-ground {
  position: absolute;
  left: 50%;
  bottom: -7%;
  z-index: 1;
  width: 62%;
  height: 8%;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.58), transparent 70%);
  filter: blur(7px);
  opacity: 0;
  animation: dig-cine-fadeto 700ms ease-out 700ms both;
}
@keyframes dig-cine-fadeto { to { opacity: 0.85; } }

.dig-cine-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 50%;
  height: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 52%,
    color-mix(in srgb, var(--stone) 55%, #fff) 62%,
    color-mix(in srgb, var(--stone) 30%, transparent) 68%,
    transparent 76%);
  filter: blur(7px);
  opacity: 0;
  animation: dig-cine-ringout 1100ms cubic-bezier(0.16, 0.8, 0.3, 1) 380ms both;
}
@keyframes dig-cine-ringout {
  0% { opacity: 0.8; scale: 0.7; }
  55% { opacity: 0.3; }
  100% { opacity: 0; scale: 2.6; }
}

.dig-cine-burst { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dig-cine-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stone2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--stone) 60%, transparent);
  opacity: 0;
  animation: hatch-cine-spark 880ms cubic-bezier(0.14, 0.7, 0.3, 1) calc(560ms + var(--i) * 13ms) both;
}

.dig-cine-stone {
  position: relative;
  z-index: 3;
  width: 74%;
  height: 74%;
  margin: 13%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 22px var(--stone))
    drop-shadow(0 0 44px color-mix(in srgb, var(--stone) 55%, transparent))
    drop-shadow(0 20px 26px rgba(0, 0, 0, 0.55));
  animation:
    dig-cine-stone-in 760ms cubic-bezier(0.18, 0.85, 0.24, 1.12) both,
    dig-cine-stone-float 5.8s ease-in-out 1100ms infinite;
}
@keyframes dig-cine-stone-in {
  0% { opacity: 0.7; translate: 0 16%; scale: 0.86; rotate: -3deg; }
  62% { opacity: 1; translate: 0 -1.4%; scale: 1.06; rotate: 1.6deg; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes dig-cine-stone-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -4.5%; rotate: 1.2deg; } }

.dig-cine-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 1;
  background: radial-gradient(circle at 50% 40%, #fffdf6 0%, #fff3d8 46%, #ecdfc0 100%);
  animation: dig-cine-flash-hand 640ms cubic-bezier(0.25, 0.6, 0.35, 1) both;
}
@keyframes dig-cine-flash-hand {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dig-cine-kicker,
.dig-cine-title,
.dig-cine-sub,
.dig-cine-actions {
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: seal-cine-rise 520ms cubic-bezier(0.2, 0.8, 0.24, 1) both;
}
.dig-cine-kicker { animation-delay: 700ms; }
.dig-cine-title { animation-delay: 850ms; }
.dig-cine-sub { animation-delay: 1000ms; }
.dig-cine-actions { animation-delay: 1220ms; }

.dig-cine-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  color: var(--stone);
  font-size: max(11px, min(0.78rem, 2vmin));
  font-weight: 700;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-transform: uppercase;
}
.dig-cine-kicker::before,
.dig-cine-kicker::after {
  content: "";
  height: 1px;
  width: clamp(30px, 7vmin, 68px);
  background: linear-gradient(90deg, transparent, var(--stone) 62%, transparent);
  opacity: 0.85;
}

.dig-cine-title {
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 5.4vmin, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.04em;
  color: #fdf7e3;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65), 0 0 34px color-mix(in srgb, var(--stone) 50%, transparent);
}

.dig-cine-sub {
  margin: 12px 0 0;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: max(13px, min(0.98rem, 2.3vmin));
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.dig-cine-actions { margin-top: clamp(18px, 3.6vmin, 30px); }
.dig-cine .dig-cine-actions button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 0 16px color-mix(in srgb, var(--stone) 26%, transparent);
  animation: dig-cine-cta-breathe 2.4s ease-in-out 1800ms infinite;
}
@keyframes dig-cine-cta-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 6px 18px rgba(0, 0, 0, 0.45),
      0 0 14px color-mix(in srgb, var(--stone) 22%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 6px 20px rgba(0, 0, 0, 0.5),
      0 0 26px color-mix(in srgb, var(--stone) 46%, transparent);
  }
}
@media (min-width: 1200px) and (min-height: 700px) {
  .dig-cine-core { max-width: 940px; translate: 0 3vh; }
  .dig-cine-title { max-width: 32ch; }
}

/* ---- variant: RELIQUARY - one warm light shaft, museum dark ---- */
.dig-cine--reliquary .dig-cine-bg {
  background:
    radial-gradient(26% 70% at 2% 60%, rgba(58, 45, 28, 0.55), transparent 72%),
    radial-gradient(26% 70% at 98% 60%, rgba(58, 45, 28, 0.55), transparent 72%),
    radial-gradient(115% 85% at 50% 30%, #17120c 0%, #060404 74%), #060404;
}
.dig-cine--reliquary .dig-cine-bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    radial-gradient(34% 60% at 12% 100%, rgba(46, 34, 20, 0.85), transparent 72%),
    radial-gradient(30% 52% at 38% 104%, rgba(40, 29, 17, 0.8), transparent 70%),
    radial-gradient(36% 58% at 68% 102%, rgba(46, 34, 20, 0.75), transparent 72%),
    radial-gradient(30% 50% at 92% 100%, rgba(40, 29, 17, 0.8), transparent 70%);
  filter: blur(6px);
}
.dig-cine--reliquary .dig-cine-rays { display: none; }
.dig-cine--reliquary .dig-cine-motes {
  inset: auto;
  left: 50%;
  top: 0;
  bottom: 0;
  width: clamp(300px, 60vmin, 620px);
  translate: -50%;
  clip-path: polygon(42% 0, 58% 0, 96% 100%, 4% 100%);
}
.dig-cine--reliquary .dig-cine-motes span {
  background: #ffe6bc;
  box-shadow: 0 0 8px rgba(255, 214, 150, 0.55);
}
.dig-cine--reliquary .dig-cine-halo {
  inset: -12%;
  background: radial-gradient(closest-side, rgba(140, 220, 255, 0.5), rgba(140, 220, 255, 0.18) 48%, transparent 68%);
  mix-blend-mode: screen;
}
.dig-cine--reliquary .dig-cine-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2.6px 2.6px at 30% 30%, rgba(160, 225, 255, 0.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 24% 48%, rgba(160, 225, 255, 0.5), transparent 60%),
    radial-gradient(2.2px 2.2px at 72% 26%, rgba(160, 225, 255, 0.65), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 56%, rgba(160, 225, 255, 0.4), transparent 60%),
    radial-gradient(120% 100% at 50% 40%, rgba(140, 180, 255, 0.045), transparent 70%);
}
.dig-cine--reliquary .dig-cine-title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7), 0 0 24px rgba(150, 210, 255, 0.28);
}
.dig-cine-beam {
  position: absolute;
  left: 50%;
  top: -6%;
  z-index: 1;
  width: clamp(300px, 60vmin, 620px);
  height: 106%;
  translate: -50%;
  background: linear-gradient(180deg, rgba(255, 214, 150, 0.34), rgba(255, 212, 148, 0.17) 50%, rgba(255, 210, 145, 0.09) 78%, rgba(255, 208, 142, 0.04) 94%, rgba(255, 208, 142, 0.015));
  clip-path: polygon(44% 0, 56% 0, 96% 100%, 4% 100%);
  filter: blur(11px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dig-cine-beam-snap 280ms cubic-bezier(0.16, 0.9, 0.3, 1) 60ms both, dig-cine-beam-settle 600ms ease-out 340ms forwards;
}
.dig-cine-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 232, 190, 0.42), rgba(255, 226, 182, 0.12) 52%, rgba(255, 222, 176, 0.04) 86%, transparent);
  clip-path: polygon(47% 0, 53% 0, 74% 100%, 26% 100%);
  filter: blur(3px);
}
.dig-cine-pool {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: clamp(380px, 78vmin, 820px);
  height: 13vmin;
  translate: -50%;
  border-radius: 50%;
  background: radial-gradient(55% 60% at 50% 56%, rgba(255, 215, 165, 0.26), rgba(255, 205, 150, 0.1) 52%, transparent 74%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dig-cine-beam-in 900ms ease-out 500ms both;
}
@keyframes dig-cine-beam-in { to { opacity: 0.9; } }
@keyframes dig-cine-beam-snap { 0% { opacity: 0; } 100% { opacity: 0.9; } }
@keyframes dig-cine-beam-settle { to { opacity: 0.65; } }

.dig-cine--geode .dig-cine-flash { animation: dig-cine-flash-geode 1050ms cubic-bezier(0.45, 0.2, 0.4, 1) both; }
@keyframes dig-cine-flash-geode {
  0% { opacity: 0.85; }
  100% { opacity: 0; }
}
/* ---- variant: GEODE - amethyst cavern, crystal facets + glints ---- */
.dig-cine--geode .dig-cine-bg {
  background: radial-gradient(120% 90% at 50% 34%, #241844 0%, #140b2c 56%, #08051a 100%), #08051a;
}
.dig-cine--geode .dig-cine-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 18% 82%, rgba(120, 80, 220, 0.14), transparent 70%),
    radial-gradient(52% 36% at 84% 78%, rgba(70, 190, 220, 0.11), transparent 70%);
  mix-blend-mode: screen;
}
.dig-cine--geode .dig-cine-rays span:nth-child(2n) { rotate: calc(var(--i) * 30deg + 12deg); width: clamp(16px, 3.6vmin, 38px); }
.dig-cine--geode .dig-cine-rays span:nth-child(3n) { opacity: 0.14; }
.dig-cine--geode .dig-cine-rays span:nth-child(5n) { display: none; }
.dig-cine-shards { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dig-cine-shards span {
  position: absolute;
  opacity: 0;
  background:
    linear-gradient(118deg, transparent 46%, rgba(226, 206, 255, 0.85) 49.4%, rgba(226, 206, 255, 0.16) 50.8%, transparent 58%),
    linear-gradient(160deg, #43307a 0%, #2a1c56 46%, #17103a 100%);
  clip-path: polygon(50% 0, 100% 36%, 74% 100%, 8% 78%);
  filter: blur(0.4px) saturate(1.05);
  animation: dig-cine-facet-in 900ms ease-out calc(200ms + var(--i) * 90ms) both;
}
@keyframes dig-cine-facet-in { to { opacity: calc(var(--fo, 0.16) * 1.4); } }
.dig-cine-shards span:nth-child(1) { left: -6%; bottom: -12%; width: 34vmin; height: 44vmin; rotate: 14deg; --fo: 0.24; }
.dig-cine-shards span:nth-child(2) { right: -8%; bottom: -16%; width: 40vmin; height: 52vmin; rotate: -18deg; --fo: 0.22; }
.dig-cine-shards span:nth-child(3) { left: -4%; top: -10%; width: 24vmin; height: 30vmin; rotate: 158deg; --fo: 0.13; }
.dig-cine-shards span:nth-child(4) { right: -3%; top: -8%; width: 20vmin; height: 26vmin; rotate: -150deg; --fo: 0.13; }
.dig-cine-shards span:nth-child(5) { left: 10%; bottom: 30%; width: 12vmin; height: 18vmin; rotate: 40deg; --fo: 0.11; }
.dig-cine-shards span:nth-child(6) { right: 12%; bottom: 34%; width: 12vmin; height: 16vmin; rotate: -44deg; --fo: 0.11; }
.dig-cine-shards span:nth-child(7) { left: 30%; bottom: -8%; width: 18vmin; height: 22vmin; rotate: 8deg; --fo: 0.15; }
.dig-cine-shards span:nth-child(8) { right: 28%; bottom: -10%; width: 16vmin; height: 20vmin; rotate: -6deg; --fo: 0.15; }
.dig-cine-glints { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.dig-cine-glints span {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(240, 228, 255, 0.9) 0 14%, rgba(220, 200, 255, 0.35) 30%, transparent 52%),
    linear-gradient(0deg, transparent 44%, rgba(255, 250, 255, 0.95) 48% 52%, transparent 56%),
    linear-gradient(90deg, transparent 44%, rgba(255, 250, 255, 0.95) 48% 52%, transparent 56%);
  filter: blur(0.7px) drop-shadow(0 0 7px rgba(220, 200, 255, 0.85));
  animation: dig-cine-glint 3.4s ease-in-out calc(var(--i) * 460ms + 900ms) infinite;
}
@keyframes dig-cine-glint {
  0%, 100% { opacity: 0; scale: 0.4; rotate: 0deg; }
  8% { opacity: 0.9; scale: 1; rotate: 18deg; }
  16% { opacity: 0; scale: 0.5; rotate: 32deg; }
}
.dig-cine-glints span:nth-child(1) { left: 14%; top: 22%; }
.dig-cine-glints span:nth-child(2) { left: 82%; top: 18%; }
.dig-cine-glints span:nth-child(3) { left: 8%; top: 64%; }
.dig-cine-glints span:nth-child(4) { left: 88%; top: 58%; }
.dig-cine-glints span:nth-child(5) { left: 28%; top: 10%; }
.dig-cine-glints span:nth-child(6) { left: 82%; top: 84%; }

/* ---- variant: STARFALL - night sky, nebulae, comets, orbit glints ---- */
.dig-cine--starfall .dig-cine-bg {
  background: radial-gradient(120% 90% at 50% 26%, #0b1226 0%, #060912 56%, #05070f 100%), #05070f;
}
.dig-cine--starfall .dig-cine-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 34% at 22% 26%, rgba(42, 31, 82, 0.7), transparent 70%),
    radial-gradient(42% 32% at 80% 70%, rgba(18, 48, 71, 0.55), transparent 70%),
    radial-gradient(30% 22% at 64% 14%, rgba(42, 31, 82, 0.4), transparent 70%);
  mix-blend-mode: screen;
}
.dig-cine--starfall .dig-cine-rays span { opacity: calc(0.1 + 0.08 * cos(var(--i) * 47deg)); width: clamp(40px, 9vmin, 96px); }
.dig-cine-starfield { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dig-cine-starfield span {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}
.dig-cine-starfield .sf-twinkle { animation: dig-cine-twinkle 4.6s ease-in-out infinite; }
@keyframes dig-cine-twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.95; } }
.dig-cine-streaks { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dig-cine-streaks span {
  position: absolute;
  width: 20vmin;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(190, 220, 255, 0.3) 60%, rgba(255, 255, 255, 0.9) 94%, #ffffff);
  box-shadow: 0 0 8px rgba(190, 220, 255, 0.4);
  opacity: 0;
  animation: dig-cine-streak 4.6s linear var(--sd, 0s) infinite;
}
.dig-cine-streaks span::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0) 70%);
}
.dig-cine-streaks span:nth-child(1) { top: 8%; left: -4%; transform: rotate(14deg); --sd: 0.8s; }
.dig-cine-streaks span:nth-child(2) { top: 22%; left: 52%; transform: rotate(24deg); --sd: 3.1s; width: 14vmin; }
.dig-cine-streaks span:nth-child(3) { top: 4%; left: 28%; transform: rotate(-9deg); --sd: 5.2s; width: 16vmin; }
@keyframes dig-cine-streak {
  0% { opacity: 0; translate: 0 0; }
  4% { opacity: 0.9; }
  11% { opacity: 0; translate: 34vw 12vh; }
  100% { opacity: 0; translate: 34vw 12vh; }
}
.dig-cine-orbit {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.dig-cine-orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: #eaf2ff;
  box-shadow: 0 0 10px var(--stone);
  animation: dig-cine-orbit-path 8.4s linear infinite;
}
.dig-cine-orbit span:nth-child(2) { animation-delay: -4.2s; }
@keyframes dig-cine-orbit-path {
  0% { translate: -19vmin 2.4vmin; scale: 1.1; opacity: 0.95; }
  25% { translate: 0 8vmin; scale: 1.3; opacity: 1; }
  50% { translate: 19vmin 2.4vmin; scale: 1.05; opacity: 0.9; }
  75% { translate: 0 -9vmin; scale: 0.5; opacity: 0.22; }
  100% { translate: -19vmin 2.4vmin; scale: 1.1; opacity: 0.95; }
}

/* ---- motion & small-screen guards for both ceremonies ---- */
@media (prefers-reduced-motion: reduce) {
  .hatch-cine *, .hatch-cine *::before, .hatch-cine *::after,
  .dig-cine *, .dig-cine *::before, .dig-cine *::after,
  .dig-cine-scene .dig-cine-zoom * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-height: 500px) {
  .hatch-cine-stage { width: clamp(120px, 33vmin, 200px); margin-bottom: 0; }
  .hatch-cine-core { max-height: 100dvh; overflow-y: auto; translate: 0 0; padding: 8px 16px; }
  .hatch-cine-title { font-size: clamp(1.2rem, 5.4vmin, 1.9rem); }
  .hatch-cine-sub { margin-top: 4px; }
  .hatch-cine .egg-hatch-stats { gap: 4px 6px; margin-top: 8px; }
  .hatch-cine .egg-hatch-stats span { padding: 2px 9px; }
  .hatch-cine-actions { margin-top: 10px; }
  .hatch-cine .hatch-cine-actions button,
  .dig-cine .dig-cine-actions button { min-height: 42px; min-width: 160px; }
  .dig-cine-stage { width: clamp(110px, 30vmin, 170px); margin-bottom: 2px; }
  .hatch-cine-core, .dig-cine-core { scrollbar-width: none; }
  .hatch-cine-core::-webkit-scrollbar, .dig-cine-core::-webkit-scrollbar { display: none; }
  .dig-cine-core { max-height: none; overflow: visible; translate: 0 0; padding: 8px 16px; }
  .dig-cine-title { font-size: clamp(1.15rem, 5vmin, 1.7rem); }
  .dig-cine-actions { margin-top: 10px; }
}
@media (max-height: 400px) {
  .dig-cine-core { max-height: 100dvh; overflow-y: auto; }
  .dig-cine-stage { width: clamp(96px, 26vmin, 140px); }
}

/* ==========================================================================
   Catch showcase v4 — rarity ceremony frame + elemental affinity backdrop
   (round 2: materials ramp per rarity, luminance escalation, hard dual seam,
    glass portrait plate, motif rebuilds, dither pass)
   Scene carries .catch-r-common|rare|ultra|legendary (species rarity tier)
   plus inline --af1/2/3 (primary affinity trio) and --bf1/2/3 (secondary).
   ========================================================================== */

@property --catch-rf-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---- elemental backdrop -------------------------------------------------- */

.catch-aff-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

/* radiance crown — only the top tiers earn it (luminance must escalate) */
.catch-aff-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(72% 54% at 50% 26%, color-mix(in srgb, var(--af1, #fff) 30%, transparent), transparent 68%);
  mix-blend-mode: screen;
}

.catch-r-ultra .catch-aff-stage::before { opacity: 0.6; }

.catch-r-legendary .catch-aff-stage::before {
  opacity: 1;
  background: radial-gradient(72% 54% at 50% 26%,
    color-mix(in srgb, #ffd97a 36%, color-mix(in srgb, var(--af1, #fff) 42%, transparent)),
    transparent 68%);
}

.catch-aff {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 38%, color-mix(in srgb, var(--af2, #5fe08b) 38%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--af2, #5fe08b) 26%, #0a0f18) 0%, color-mix(in srgb, var(--af3, #10141c) 84%, #05070c) 100%);
  animation: catch-aff-in 1100ms ease-out both;
}

@keyframes catch-aff-in { 0% { opacity: 0; } 100% { opacity: 1; } }

/* rarity luminance ramp: commons stay quiet, legendaries burn brightest */
.catch-r-common .catch-aff { filter: brightness(0.9) saturate(0.9); }
.catch-r-ultra .catch-aff { filter: brightness(1.07) saturate(1.1); }
.catch-r-legendary .catch-aff { filter: brightness(1.2) saturate(1.16); }
.catch-r-legendary .catch-aff.aff-dragon,
.catch-r-legendary .catch-aff.aff-shadow,
.catch-r-legendary .catch-aff.aff-abyssal { filter: brightness(1.34) saturate(1.22); }
.catch-r-common .catch-motes { opacity: 0.4; }
.catch-r-rare .catch-motes { opacity: 0.7; }

.catch-aff::before,
.catch-aff::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* shared floor shade + dither grain (kills gradient banding on every field) */
.catch-aff::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(140% 110% at 50% 118%, color-mix(in srgb, var(--af3, #000) 72%, transparent), transparent 56%),
    radial-gradient(135% 135% at 50% 50%, transparent 60%, rgba(4, 6, 10, 0.42) 97%);
}

/* secondary affinity layer reads its own trio */
.catch-aff-b { --af1: var(--bf1); --af2: var(--bf2); --af3: var(--bf3); }

/* dual affinity: hard 118deg split — the split itself is the brand shape */
.catch-aff-stage.dual .catch-aff-a {
  -webkit-mask-image: linear-gradient(118deg, #000 0 48.6%, transparent 51.4%);
  mask-image: linear-gradient(118deg, #000 0 48.6%, transparent 51.4%);
}

.catch-aff-stage.dual .catch-aff-b {
  -webkit-mask-image: linear-gradient(118deg, transparent 48.6%, #000 51.4%);
  mask-image: linear-gradient(118deg, transparent 48.6%, #000 51.4%);
}

/* near-hue duals (violet-family pairs) separate on VALUE, not hue: the
   umbral half sinks, the starfield half lifts — deltaE target >= 18 */
.catch-aff-stage.dual .catch-aff.aff-shadow,
.catch-aff-stage.dual .catch-aff.aff-abyssal { filter: saturate(0.55) brightness(0.62); }

.catch-aff-stage.dual .catch-aff.aff-astral { filter: saturate(1.15) brightness(1.24); }

/* luminous seam: white core, twin element blooms, wide soft glow */
.catch-aff-seam {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, transparent 49.65%, rgba(255, 255, 255, 0.95) 49.88% 50.12%, transparent 50.35%),
    linear-gradient(118deg, transparent 47.4%, color-mix(in srgb, color-mix(in srgb, var(--af1, #fff) 65%, #fff) 74%, transparent) 49.6%, transparent 50%, color-mix(in srgb, color-mix(in srgb, var(--bf1, #fff) 65%, #fff) 74%, transparent) 50.4%, transparent 52.6%),
    linear-gradient(118deg, transparent 42%, color-mix(in srgb, var(--af2, #fff) 30%, transparent) 48%, color-mix(in srgb, var(--bf2, #fff) 30%, transparent) 52%, transparent 58%);
  mix-blend-mode: screen;
  animation: catch-aff-in 1100ms ease-out both, catch-seam-breathe 5.4s ease-in-out 1.1s infinite;
}

@keyframes catch-seam-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

/* ---- per-type motifs (colors always come from the --af trio) ------------- */

.catch-aff::before { mix-blend-mode: screen; opacity: 0.8; }

.aff-normal::before {
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--af1) 22%, transparent) 0%, transparent 44%),
    radial-gradient(90% 34% at 50% 96%, color-mix(in srgb, var(--af2) 30%, transparent), transparent 70%);
}

.aff-flame::before {
  background:
    radial-gradient(5px 5px at 22% 74%, var(--af1), transparent 72%),
    radial-gradient(3px 3px at 34% 52%, var(--af1), transparent 72%),
    radial-gradient(6px 6px at 68% 66%, color-mix(in srgb, var(--af1) 85%, #fff), transparent 72%),
    radial-gradient(3px 3px at 79% 40%, var(--af1), transparent 72%),
    radial-gradient(4px 4px at 12% 44%, color-mix(in srgb, var(--af2) 90%, #fff), transparent 72%),
    radial-gradient(3px 3px at 55% 30%, var(--af1), transparent 72%),
    radial-gradient(3px 3px at 44% 84%, var(--af1), transparent 72%),
    radial-gradient(2px 2px at 62% 18%, color-mix(in srgb, var(--af1) 80%, #fff), transparent 72%),
    radial-gradient(34% 30% at 24% 104%, color-mix(in srgb, var(--af2) 48%, transparent), transparent 70%),
    radial-gradient(34% 30% at 76% 104%, color-mix(in srgb, var(--af2) 48%, transparent), transparent 70%),
    radial-gradient(70% 60% at 50% 108%, color-mix(in srgb, var(--af2) 62%, transparent), transparent 66%);
  animation: catch-aff-flicker 3.4s ease-in-out infinite;
}

@keyframes catch-aff-flicker {
  0%, 100% { opacity: 0.82; }
  38% { opacity: 0.62; }
  62% { opacity: 0.9; }
}

.aff-leaf::before {
  background:
    radial-gradient(26% 18% at 24% 20%, color-mix(in srgb, var(--af1) 46%, transparent), transparent 74%),
    radial-gradient(20% 15% at 72% 14%, color-mix(in srgb, var(--af1) 38%, transparent), transparent 74%),
    radial-gradient(24% 16% at 84% 56%, color-mix(in srgb, var(--af2) 42%, transparent), transparent 74%),
    radial-gradient(18% 13% at 10% 62%, color-mix(in srgb, var(--af2) 34%, transparent), transparent 74%),
    repeating-linear-gradient(112deg, transparent 0 34px, color-mix(in srgb, var(--af1) 13%, transparent) 34px 44px, transparent 44px 86px);
}

.aff-water::before {
  background:
    repeating-radial-gradient(circle at 50% 135%, transparent 0 40px, color-mix(in srgb, var(--af1) 12%, transparent) 40px 44px, transparent 44px 88px),
    linear-gradient(188deg, color-mix(in srgb, var(--af1) 26%, transparent) 0%, transparent 36%),
    radial-gradient(60% 40% at 50% 112%, color-mix(in srgb, var(--af2) 44%, transparent), transparent 70%);
}

/* volt: dark storm base — the yellow belongs to the bolts, not the field */
.aff-volt {
  background:
    radial-gradient(120% 85% at 50% 38%, color-mix(in srgb, var(--af2) 18%, transparent), transparent 62%),
    linear-gradient(180deg, #262a31 0%, color-mix(in srgb, var(--af3) 88%, #05070c) 100%);
}

/* volt: thin crackling strokes + node sparks — crisp, high-chroma, no smear */
.aff-volt::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 150'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-20%25' width='220%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='1' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 2 L28 46 L38 54 L26 100 L31 103 L22 148' stroke='%23f5cf1b' stroke-width='5' filter='url(%23g)' opacity='.75'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffe14d' stroke-width='2.6'/%3E%3Cpath d='M38 54 L26 100 L31 103' stroke='%23ffe14d' stroke-width='1.7'/%3E%3Cpath d='M31 103 L22 148' stroke='%23ffe14d' stroke-width='1'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffffff' stroke-width='1.1'/%3E%3Cpath d='M38 54 L26 100' stroke='%23ffffff' stroke-width='.7'/%3E%3Cpath d='M28 46 L14 64 L10 78' stroke='%23ffe14d' stroke-width='1.3'/%3E%3Cpath d='M28 46 L14 64' stroke='%23ffffff' stroke-width='.6'/%3E%3Cpath d='M26 100 L40 116 L44 128' stroke='%23ffe14d' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") right 5% top 4% / auto 54% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 150'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-20%25' width='220%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='.6' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 2 L28 46 L38 54 L26 100 L31 103 L22 148' stroke='%23f5cf1b' stroke-width='5' filter='url(%23g)' opacity='.75'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffe14d' stroke-width='2.6'/%3E%3Cpath d='M38 54 L26 100 L31 103' stroke='%23ffe14d' stroke-width='1.7'/%3E%3Cpath d='M31 103 L22 148' stroke='%23ffe14d' stroke-width='1'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffffff' stroke-width='1.1'/%3E%3Cpath d='M38 54 L26 100' stroke='%23ffffff' stroke-width='.7'/%3E%3Cpath d='M28 46 L14 64 L10 78' stroke='%23ffe14d' stroke-width='1.3'/%3E%3Cpath d='M28 46 L14 64' stroke='%23ffffff' stroke-width='.6'/%3E%3Cpath d='M26 100 L40 116 L44 128' stroke='%23ffe14d' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") right 20% top 30% / auto 38% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 150'%3E%3Cdefs%3E%3Cfilter id='g' x='-60%25' y='-20%25' width='220%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3C/defs%3E%3Cg opacity='.35' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 2 L28 46 L38 54 L26 100 L31 103 L22 148' stroke='%23f5cf1b' stroke-width='5' filter='url(%23g)' opacity='.75'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffe14d' stroke-width='2.6'/%3E%3Cpath d='M38 54 L26 100 L31 103' stroke='%23ffe14d' stroke-width='1.7'/%3E%3Cpath d='M31 103 L22 148' stroke='%23ffe14d' stroke-width='1'/%3E%3Cpath d='M34 2 L28 46 L38 54' stroke='%23ffffff' stroke-width='1.1'/%3E%3Cpath d='M38 54 L26 100' stroke='%23ffffff' stroke-width='.7'/%3E%3Cpath d='M28 46 L14 64 L10 78' stroke='%23ffe14d' stroke-width='1.3'/%3E%3Cpath d='M28 46 L14 64' stroke='%23ffffff' stroke-width='.6'/%3E%3Cpath d='M26 100 L40 116 L44 128' stroke='%23ffe14d' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") right 1% top 52% / auto 30% no-repeat,
    radial-gradient(4px 4px at 27% 38%, #fff, transparent 72%),
    radial-gradient(3px 3px at 25.4% 62%, var(--af1), transparent 72%),
    radial-gradient(4px 4px at 76% 30%, #fff, transparent 72%),
    radial-gradient(3px 3px at 62% 74%, var(--af1), transparent 72%),
    radial-gradient(46% 34% at 50% -4%, color-mix(in srgb, var(--af2) 22%, transparent), transparent 64%);
  animation: catch-aff-flicker 2.6s ease-in-out infinite;
}

.aff-stone::before {
  background:
    linear-gradient(96deg,
      transparent 0 9%,
      color-mix(in srgb, var(--af1) 16%, transparent) 9% 9.4%,
      transparent 9.4% 20.5%,
      color-mix(in srgb, var(--af1) 7%, transparent) 20.5% 20.65%,
      transparent 20.65% 30.5%,
      color-mix(in srgb, var(--af1) 12%, transparent) 30.5% 30.95%,
      transparent 30.95% 46.5%,
      color-mix(in srgb, var(--af1) 6%, transparent) 46.5% 46.7%,
      transparent 46.7% 62.5%,
      color-mix(in srgb, var(--af1) 14%, transparent) 62.5% 62.9%,
      transparent 62.9% 77.5%,
      color-mix(in srgb, var(--af1) 6%, transparent) 77.5% 77.65%,
      transparent 77.65% 89.5%,
      color-mix(in srgb, var(--af1) 10%, transparent) 89.5% 89.8%,
      transparent 89.8%),
    radial-gradient(42% 30% at 30% 34%, color-mix(in srgb, var(--af1) 9%, transparent), transparent 72%),
    radial-gradient(38% 26% at 72% 68%, color-mix(in srgb, var(--af2) 12%, transparent), transparent 72%),
    radial-gradient(2px 2px at 24% 62%, color-mix(in srgb, var(--af1) 80%, transparent), transparent 72%),
    radial-gradient(2px 2px at 74% 38%, color-mix(in srgb, var(--af1) 70%, transparent), transparent 72%),
    radial-gradient(2px 2px at 48% 78%, color-mix(in srgb, var(--af1) 60%, transparent), transparent 72%),
    radial-gradient(80% 40% at 50% 106%, color-mix(in srgb, var(--af2) 42%, transparent), transparent 66%);
}

.aff-light::before {
  background:
    repeating-conic-gradient(from 173deg at 50% -12%, transparent 0 5deg, color-mix(in srgb, var(--af1) 20%, transparent) 7deg, transparent 9deg 14deg),
    radial-gradient(64% 44% at 50% -6%, color-mix(in srgb, var(--af1) 52%, transparent), transparent 68%);
}

.aff-shadow {
  background:
    radial-gradient(120% 85% at 50% 38%, color-mix(in srgb, var(--af2) 24%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--af2) 14%, #0c0a14) 0%, color-mix(in srgb, var(--af3) 92%, #04030a) 100%);
}

.aff-shadow::before {
  background:
    radial-gradient(34% 26% at 22% 74%, color-mix(in srgb, var(--af2) 66%, transparent), transparent 72%),
    radial-gradient(30% 22% at 78% 64%, color-mix(in srgb, var(--af2) 56%, transparent), transparent 72%),
    radial-gradient(24% 18% at 50% 30%, color-mix(in srgb, var(--af2) 40%, transparent), transparent 74%),
    radial-gradient(40% 30% at 52% 88%, color-mix(in srgb, var(--af3) 90%, transparent), transparent 74%),
    radial-gradient(2px 2px at 32% 30%, var(--af1), transparent 72%),
    radial-gradient(2px 2px at 70% 22%, color-mix(in srgb, var(--af1) 80%, transparent), transparent 72%),
    radial-gradient(2px 2px at 14% 18%, color-mix(in srgb, var(--af1) 60%, transparent), transparent 72%);
  opacity: 0.9;
}

.aff-frost::before {
  background:
    linear-gradient(58deg, transparent 40.2%, rgba(255, 255, 255, 0.46) 43%, transparent 45.4%),
    linear-gradient(118deg, transparent 60.2%, color-mix(in srgb, var(--af1) 78%, transparent) 63%, transparent 65.4%),
    linear-gradient(28deg, transparent 72%, rgba(255, 255, 255, 0.3) 74.5%, transparent 77%),
    linear-gradient(98deg, transparent 30%, rgba(255, 255, 255, 0.22) 32%, transparent 34.5%),
    radial-gradient(3px 3px at 26% 32%, #fff, transparent 72%),
    radial-gradient(2px 2px at 64% 24%, var(--af1), transparent 72%),
    radial-gradient(2px 2px at 80% 66%, #fff, transparent 72%),
    radial-gradient(2px 2px at 40% 58%, var(--af1), transparent 72%),
    radial-gradient(70% 44% at 50% 110%, color-mix(in srgb, var(--af1) 34%, transparent), transparent 66%);
}

.aff-bug::before {
  background:
    radial-gradient(2.5px 2.5px at 12px 10px, color-mix(in srgb, var(--af1) 52%, transparent), transparent 72%) 0 0 / 52px 44px,
    linear-gradient(126deg, color-mix(in srgb, var(--af2) 34%, transparent) 0%, transparent 48%),
    radial-gradient(60% 40% at 50% 108%, color-mix(in srgb, var(--af2) 42%, transparent), transparent 66%);
}

.aff-dragon::before {
  background:
    repeating-radial-gradient(110% 80% at 50% 132%, transparent 0 42px, color-mix(in srgb, var(--af1) 48%, transparent) 42px 47px, transparent 47px 96px),
    radial-gradient(3px 3px at 24% 30%, color-mix(in srgb, var(--af1) 90%, #fff), transparent 72%),
    radial-gradient(2px 2px at 74% 22%, var(--af1), transparent 72%),
    radial-gradient(2px 2px at 58% 44%, color-mix(in srgb, var(--af1) 70%, transparent), transparent 72%),
    radial-gradient(52% 40% at 50% -4%, color-mix(in srgb, var(--af1) 46%, transparent), transparent 66%);
}

.aff-dinosaurus::before {
  background:
    repeating-linear-gradient(176deg, transparent 0 38px, color-mix(in srgb, var(--af1) 15%, transparent) 38px 42px, transparent 42px 84px),
    radial-gradient(3px 3px at 28% 56%, color-mix(in srgb, var(--af1) 85%, transparent), transparent 72%),
    radial-gradient(2px 2px at 70% 70%, color-mix(in srgb, var(--af1) 70%, transparent), transparent 72%),
    radial-gradient(2px 2px at 52% 34%, color-mix(in srgb, var(--af1) 55%, transparent), transparent 72%),
    radial-gradient(76% 46% at 50% 110%, color-mix(in srgb, var(--af2) 48%, transparent), transparent 68%);
}

.aff-astral::before {
  background:
    linear-gradient(0deg, transparent 48%, rgba(255, 255, 255, 0.85) 49.6% 50.4%, transparent 52%) 18% 0 / 1.5px 26px no-repeat,
    linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.85) 49.6% 50.4%, transparent 52%) 0 24% / 26px 1.5px no-repeat,
    radial-gradient(3px 3px at 18% 24%, #fff, transparent 70%),
    radial-gradient(1.8px 1.8px at 36% 66%, #fff, transparent 70%),
    radial-gradient(2.4px 2.4px at 58% 16%, var(--af1), transparent 70%),
    radial-gradient(1.8px 1.8px at 72% 48%, #fff, transparent 70%),
    radial-gradient(3px 3px at 86% 26%, var(--af1), transparent 70%),
    radial-gradient(1.8px 1.8px at 12% 52%, var(--af1), transparent 70%),
    radial-gradient(2.2px 2.2px at 46% 38%, #fff, transparent 70%),
    radial-gradient(1.6px 1.6px at 64% 70%, #fff, transparent 70%),
    radial-gradient(30% 24% at 70% 74%, color-mix(in srgb, var(--af2) 54%, transparent), transparent 72%),
    radial-gradient(26% 20% at 22% 80%, color-mix(in srgb, var(--af2) 40%, transparent), transparent 72%);
  animation: catch-aff-twinkle 4.6s ease-in-out infinite;
}

@keyframes catch-aff-twinkle {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.55; }
}

.aff-abyssal::before {
  background:
    conic-gradient(from 40deg at 50% 58%,
      transparent 0deg,
      color-mix(in srgb, var(--af2) 34%, transparent) 80deg,
      transparent 150deg,
      color-mix(in srgb, var(--af1) 24%, transparent) 230deg,
      transparent 320deg),
    radial-gradient(50% 40% at 50% 60%, transparent 30%, color-mix(in srgb, var(--af3) 85%, transparent) 90%);
  animation: catch-aff-swirl 46s linear infinite;
  transform-origin: 50% 58%;
}

@keyframes catch-aff-swirl { to { transform: rotate(360deg) scale(1.001); } }

/* runic: arcane violet field, gold sigil ring + inner counter-ring */
.aff-runic::before {
  background:
    repeating-conic-gradient(from 0deg at 50% 44%, color-mix(in srgb, var(--af1) 85%, transparent) 0 0.9deg, transparent 0.9deg 12deg),
    repeating-conic-gradient(from 6deg at 50% 44%, color-mix(in srgb, var(--af1) 60%, transparent) 0 0.5deg, transparent 0.5deg 8deg),
    radial-gradient(2px 2px at 30% 76%, var(--af1), transparent 72%),
    radial-gradient(2px 2px at 68% 82%, color-mix(in srgb, var(--af1) 80%, transparent), transparent 72%),
    radial-gradient(2px 2px at 16% 28%, color-mix(in srgb, var(--af1) 65%, transparent), transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 44%, transparent 32%, #000 34.5%, #000 38.5%, transparent 41%, transparent 49%, #000 51.5%, #000 54%, transparent 56.5%);
  mask-image: radial-gradient(circle at 50% 44%, transparent 32%, #000 34.5%, #000 38.5%, transparent 41%, transparent 49%, #000 51.5%, #000 54%, transparent 56.5%);
  opacity: 0.62;
}

.aff-holy {
  background:
    radial-gradient(120% 85% at 50% 30%, color-mix(in srgb, var(--af1) 33%, transparent), transparent 66%),
    linear-gradient(180deg, color-mix(in srgb, var(--af2) 48%, #2e2410) 0%, color-mix(in srgb, var(--af3) 72%, #171106) 100%);
}

.aff-holy::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 52px, color-mix(in srgb, var(--af1) 9%, transparent) 60px 74px, transparent 82px 138px),
    radial-gradient(46% 8% at 50% 12%, color-mix(in srgb, var(--af1) 44%, transparent), transparent 72%),
    radial-gradient(70% 30% at 50% -8%, color-mix(in srgb, var(--af1) 46%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 56%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.4) 56%, transparent 88%);
}

.aff-eternal {
  background:
    radial-gradient(120% 85% at 50% 38%, rgba(255, 255, 255, 0.5), rgba(214, 228, 255, 0.16) 46%, transparent 66%),
    linear-gradient(180deg, #46536e 0%, #141a28 100%);
}

.aff-eternal::before {
  background:
    repeating-radial-gradient(circle at 50% 42%, transparent 0 34px, rgba(255, 255, 255, 0.18) 34px 36.5px, transparent 36.5px 78px),
    conic-gradient(from 210deg at 50% 42%,
      rgba(255, 208, 208, 0.16),
      rgba(255, 242, 194, 0.16),
      rgba(208, 255, 222, 0.16),
      rgba(198, 230, 255, 0.24),
      rgba(226, 208, 255, 0.16),
      rgba(255, 208, 208, 0.16)),
    radial-gradient(46% 36% at 50% 42%, rgba(255, 255, 255, 0.5), transparent 70%);
}

/* ---- environmental light follows the affinity ----------------------------- */

.catch-scene .catch-godrays {
  background: repeating-conic-gradient(from 5deg, transparent 0 4.6deg, color-mix(in srgb, var(--af1, #fff0be) 15%, transparent) 6.6deg, transparent 10deg);
}

.catch-scene .catch-beam {
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--af1, #fff7a8) 32%, transparent) 30%,
    color-mix(in srgb, var(--af2, #5fe08b) 24%, transparent) 62%,
    transparent 100%);
}

.catch-scene .catch-halo {
  background: radial-gradient(circle,
    color-mix(in srgb, var(--af1, #fff7a8) 40%, transparent),
    color-mix(in srgb, var(--af2, #5fe08b) 18%, transparent) 46%,
    transparent 70%);
}

/* glass portrait plate: the environment stays visible through the subject */
/* NOTE: the v3.1 layer at ~56437 pins the plate with !important — these
   declarations stay !important to win; the plate must TRANSMIT the scene. */
.catch-r-common .catch-sprite {
  border-color: rgba(196, 208, 224, 0.55) !important;
  box-shadow:
    0 0 0 2px rgba(160, 176, 196, 0.26),
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in srgb, var(--af2, #5fe08b) 15%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.catch-scene .catch-sprite {
  border: 1px solid color-mix(in srgb, var(--af1, #ffe4a5) 70%, rgba(255, 255, 255, 0.5)) !important;
  background:
    linear-gradient(to top, rgba(4, 8, 18, 0.82), rgba(4, 8, 18, 0.28) 20%, transparent 32%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), transparent 58%),
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(4, 8, 18, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(12, 18, 34, 0.42), rgba(7, 11, 22, 0.52)) !important;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--af1, #fff7a8) 50%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 40px color-mix(in srgb, var(--af2, #5fe08b) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.16);
  backdrop-filter: blur(9px) saturate(1.16);
  filter: brightness(1.06);
}

.catch-scene .catch-sprite.missing {
  background: radial-gradient(circle at 50% 36%, #3a2b56, #1a1030 60%, #0a0714);
}

/* ---- caption: reserved scrim band + systematic per-rarity name color ------ */

.catch-caption::before {
  content: "";
  position: absolute;
  inset: -64px -6% -104px;
  z-index: -1;
  pointer-events: none;
  border-radius: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 16, 0.5) 24%, rgba(4, 8, 16, 0.74) 58%, rgba(4, 8, 16, 0.56) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* solid rarity ink instead of clip-gradient text (clip text is flaky when the
   line itself animates — the gold/white lottery ends here) */
.catch-caption h2 {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentcolor;
  color: #eef3fa;
}

.catch-r-rare .catch-caption h2 { color: #aed6ff; }
.catch-r-ultra .catch-caption h2 { color: #e9d4ff; }
.catch-r-legendary .catch-caption h2 { color: #ffdf8f; }

/* ---- rarity ceremony frame ------------------------------------------------ */

.catch-rarity-frame {
  position: absolute;
  inset: clamp(9px, 1.6vw, 15px);
  z-index: 7;
  border-radius: 10px;
  pointer-events: none;
  animation: catch-rf-in 860ms cubic-bezier(0.2, 0.9, 0.3, 1) 240ms both;
}

@keyframes catch-rf-in {
  0% { opacity: 0; transform: scale(1.018); }
  100% { opacity: 1; transform: scale(1); }
}

.catch-rarity-frame .rf-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--rf-w, 1.5px);
  background: var(--rf-ring, linear-gradient(180deg, rgba(216, 228, 242, 0.5), rgba(124, 140, 162, 0.28) 55%, rgba(216, 228, 242, 0.4)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* inner hairline echo */
.catch-rarity-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 7px;
  border: 1px solid var(--rf-hairline, rgba(255, 255, 255, 0.10));
}

.catch-rarity-frame .rf-corner {
  position: absolute;
  width: var(--rf-c, 24px);
  height: var(--rf-c, 24px);
  border: 0 solid var(--rf-cc, rgba(222, 232, 244, 0.55));
  filter: drop-shadow(0 0 6px var(--rf-cg, transparent));
}

.catch-rarity-frame .rf-tl { top: -1px; left: -1px; border-top-width: var(--rf-cw, 2px); border-left-width: var(--rf-cw, 2px); border-top-left-radius: 10px; }
.catch-rarity-frame .rf-tr { top: -1px; right: -1px; border-top-width: var(--rf-cw, 2px); border-right-width: var(--rf-cw, 2px); border-top-right-radius: 10px; }
.catch-rarity-frame .rf-bl { bottom: -1px; left: -1px; border-bottom-width: var(--rf-cw, 2px); border-left-width: var(--rf-cw, 2px); border-bottom-left-radius: 10px; }
.catch-rarity-frame .rf-br { bottom: -1px; right: -1px; border-bottom-width: var(--rf-cw, 2px); border-right-width: var(--rf-cw, 2px); border-bottom-right-radius: 10px; }

/* -- common: clean brushed steel — visible, quiet, no glow ----------------- */

.catch-rf--common {
  --rf-w: 1.5px;
  --rf-cc: rgba(226, 236, 248, 0.66);
  --rf-cw: 2px;
  --rf-c: 22px;
  --rf-hairline: rgba(233, 240, 250, 0.15);
}

.catch-rf--common .rf-ring {
  background: linear-gradient(180deg, rgba(232, 240, 250, 0.66), rgba(148, 162, 182, 0.36) 45%, rgba(210, 222, 238, 0.6));
  filter: drop-shadow(0 0 1px rgba(8, 10, 14, 0.8));
}

/* -- rare: azure inlay, travelling glint, one layer more than common ------- */

.catch-rf--rare {
  --rf-cc: #bfe2ff;
  --rf-cw: 2.5px;
  --rf-cg: rgba(110, 180, 240, 0.75);
  --rf-hairline: rgba(150, 200, 245, 0.22);
}

.catch-rf--rare .rf-ring {
  --rf-w: 2px;
  background: conic-gradient(from var(--catch-rf-ang),
    #4a86b8, #d9efff 8%, #5d9ecf 18%, #4a86b8 40%,
    #eaf6ff 52%, #5d9ecf 64%, #bfe4ff 86%, #4a86b8);
  animation: catch-rf-spin 9s linear infinite;
  filter: drop-shadow(0 0 1px rgba(4, 10, 18, 0.85)) drop-shadow(0 0 8px rgba(120, 190, 240, 0.4));
}

@keyframes catch-rf-spin { to { --catch-rf-ang: 360deg; } }

/* -- ultra rare: spectral amethyst — hue shifts along the rule ------------- */

.catch-rf--ultra {
  --rf-cw: 0px;
  --rf-hairline: rgba(210, 160, 255, 0.24);
}

.catch-rf--ultra .rf-ring {
  --rf-w: 2.5px;
  background: conic-gradient(from var(--catch-rf-ang),
    #d9c4ff, #ffffff 8%, #a6f7ff 16%, #d9c4ff 30%, #ffa0e8 44%, #fff 50%,
    #e8d6ff 58%, #a6f7ff 72%, #ffbcf0 84%, #faf4ff 92%, #d9c4ff);
  animation: catch-rf-spin 7s linear infinite;
  filter: drop-shadow(0 0 1px rgba(14, 4, 24, 0.85)) drop-shadow(0 0 8px rgba(176, 108, 255, 0.5));
}

.catch-rf--ultra::before {
  inset: 6px;
  border-color: transparent;
  background: conic-gradient(from calc(180deg - var(--catch-rf-ang)),
    transparent, rgba(226, 184, 255, 0.55) 12%, transparent 24%, transparent 60%, rgba(108, 240, 255, 0.45) 74%, transparent 88%);
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: catch-rf-spin 7s linear infinite;
}

/* faceted gem corners, not brighter nubs */
.catch-rf--ultra .rf-corner::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(135deg, transparent 45%, rgba(24, 4, 46, 1) 48% 52%, transparent 55%),
    linear-gradient(315deg, #7a4fc4 0 46%, #e8d4ff 54% 100%);
  transform: rotate(45deg);
  box-shadow: inset 1.5px 1.5px 1px rgba(255, 255, 255, 0.95), 0 0 5px rgba(216, 160, 255, 0.55);
}

.catch-rf--ultra .rf-tl::before { top: -5px; left: -5px; }
.catch-rf--ultra .rf-tr::before { top: -5px; right: -5px; }
.catch-rf--ultra .rf-bl::before { bottom: -5px; left: -5px; }
.catch-rf--ultra .rf-br::before { bottom: -5px; right: -5px; }

/* -- legendary: triple-rule gold reliquary + filigree + drifting sparks ---- */

.catch-rf--legendary {
  --rf-cc: #ffe9a8;
  --rf-cw: 3px;
  --rf-c: 34px;
  --rf-cg: rgba(255, 200, 90, 0.9);
}

.catch-rf--legendary .rf-ring {
  --rf-w: 3px;
  background: conic-gradient(from var(--catch-rf-ang),
    #c9952e, #ffe9a8 8%, #e8b84a 18%, #fff6d8 26%, #d3a238 40%,
    #ffd97a 52%, #c9952e 62%, #ffedb5 74%, #e2ab35 84%, #fff2c9 94%, #c9952e);
  animation: catch-rf-spin 6s linear infinite;
  filter: drop-shadow(0 0 1px rgba(24, 14, 0, 0.9)) drop-shadow(0 0 10px rgba(255, 196, 90, 0.6));
}

/* rule 2: warm hairline with a dark separator so the golds stay legible */
.catch-rf--legendary::before {
  inset: 7px;
  border-radius: 6px;
  border: 1px solid rgba(255, 236, 180, 0.44);
  box-shadow: 0 0 0 1px rgba(56, 36, 6, 0.55), inset 0 0 20px rgba(255, 190, 84, 0.15);
}

/* rule 3: faint innermost echo — legendary carries the deepest frame */
.catch-rf--legendary::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 5px;
  border: 1px solid rgba(255, 244, 210, 0.2);
}

.catch-rf--legendary .rf-corner {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.catch-rf--legendary .rf-tl { border-bottom-right-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 0; }
.catch-rf--legendary .rf-tr { border-bottom-left-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 0; }
.catch-rf--legendary .rf-bl { border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 0; }
.catch-rf--legendary .rf-br { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 0; }

.catch-rf--legendary .rf-corner::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #fff8dd 10%, #ffd97a 52%, #b57a1a 100%);
  transform: rotate(45deg);
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 208, 110, 0.95);
}

.catch-rf--legendary .rf-tl::before { top: -5px; left: -5px; }
.catch-rf--legendary .rf-tr::before { top: -5px; right: -5px; }
.catch-rf--legendary .rf-bl::before { bottom: -5px; left: -5px; }
.catch-rf--legendary .rf-br::before { bottom: -5px; right: -5px; }

/* curved flourish: primary sweep + counter-curve + teardrop terminals */
.catch-rf--legendary .rf-corner::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%236b4409' stroke-linecap='round' opacity='.8'%3E%3Cpath d='M4 35 Q6 11 31 6' stroke-width='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ffdf95' stroke-linecap='round'%3E%3Cpath d='M4 35 Q6 11 31 6' stroke-width='2.2'/%3E%3Cpath d='M7 26 Q11 15 23 11' stroke-width='1.3' opacity='.85'/%3E%3Cpath d='M28 9 q6 -2 9 3' stroke-width='1.5'/%3E%3C/g%3E%3Ccircle cx='39' cy='13' r='2.4' fill='%23ffd97a'/%3E%3Ccircle cx='4' cy='39' r='2' fill='%23ffd97a'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(255, 200, 90, 0.55));
}

.catch-rf--legendary .rf-tl::after { top: 3px; left: 3px; }
.catch-rf--legendary .rf-tr::after { top: 3px; right: 3px; transform: scaleX(-1); }
.catch-rf--legendary .rf-bl::after { bottom: 3px; left: 3px; transform: scaleY(-1); }
.catch-rf--legendary .rf-br::after { bottom: 3px; right: 3px; transform: scale(-1, -1); }

/* gold motes drifting up the inner frame edge */
.catch-rf--legendary .rf-sparks b {
  position: absolute;
  left: calc(6% + var(--i) * 12%);
  bottom: 4%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 8px rgba(255, 200, 90, 0.9);
  opacity: 0;
  animation: catch-rf-spark 5.2s linear infinite;
  animation-delay: calc(var(--i) * -650ms);
}

.catch-rf--legendary .rf-sparks b:nth-child(even) { width: 3px; height: 3px; animation-duration: 6.4s; }

@keyframes catch-rf-spark {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  12% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(min(-46vh, -260px)) scale(1.05); }
}

/* ---- scene border, seal + tier chip follow the rarity -------------------- */

.catch-scene.catch-r-common { border-color: rgba(206, 218, 234, 0.4); }

.catch-scene.catch-r-rare {
  border-color: rgba(126, 190, 240, 0.6);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5), 0 0 44px rgba(64, 148, 220, 0.28);
}

.catch-scene.catch-r-ultra {
  border-color: rgba(198, 138, 255, 0.62);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5), 0 0 52px rgba(160, 84, 235, 0.32);
}

.catch-scene.catch-r-legendary {
  border-color: rgba(255, 210, 120, 0.68);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(230, 160, 52, 0.38);
}

.catch-r-rare .catch-chip.tier { background: linear-gradient(180deg, #cfe9ff, #5f9fd0); color: #0a2a44; }
.catch-r-ultra .catch-chip.tier { background: linear-gradient(180deg, #ecd4ff, #a55fd8); color: #300a52; }
.catch-r-legendary .catch-chip.tier { background: linear-gradient(180deg, #ffe79a, #e0a13a); color: #3a2406; box-shadow: 0 0 14px rgba(255, 196, 90, 0.45); }

/* black holo: an eclipse — dark core, thin corona, field drains to umbra */
.catch-scene:has(.black-holo-sprite) .catch-aff { filter: brightness(1.18) saturate(0.78); }

.catch-scene:has(.black-holo-sprite) .catch-aff-stage::before {
  opacity: 1;
  mix-blend-mode: normal;
  background:
    radial-gradient(circle at 50% 46%, rgba(4, 5, 9, 0.8) 0 19.6%, rgba(238, 230, 255, 0.95) 20.4% 20.9%, rgba(168, 140, 255, 0.5) 22.5%, rgba(4, 5, 9, 0.42) 26%, transparent 36%),
    radial-gradient(120% 120% at 50% 50%, transparent 52%, rgba(4, 5, 9, 0.66) 96%);
}

.catch-scene:has(.black-holo-sprite) .catch-sprite-rim { opacity: 0.26; }

.catch-scene:has(.black-holo-sprite) .catch-halo {
  background: radial-gradient(circle, rgba(214, 208, 255, 0.2), rgba(90, 70, 160, 0.12) 46%, transparent 70%);
}

/* holo chip: AA contrast; black holo: the rarest cosmetic shouts loudest */
.catch-scene .catch-chip.holo,
.catch-scene .catch-chip.shiny {
  background: linear-gradient(180deg, #6d4fc4, #4a2f96);
  color: #ffffff;
  border: 1px solid rgba(222, 200, 255, 0.55);
  text-shadow: 0 1px 2px rgba(20, 8, 46, 0.6);
}

.catch-scene .catch-chip.black-holo {
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.45), 0 0 6px rgba(190, 210, 255, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.54);
}

/* type pill wears the element halves at the seam angle — the data row
   teaches what the backdrop split means */
.catch-scene .catch-pill-type {
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--af2, #5fe08b) 46%, #0a1016) 0 47%,
    color-mix(in srgb, var(--bf2, #5fe08b) 46%, #0a1016) 53% 100%);
  border-color: color-mix(in srgb, var(--af1, #fff) 45%, rgba(255, 255, 255, 0.26));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

/* the one interactive element earns the rarity accent */
.catch-r-rare .dialogue-actions button {
  border-color: rgba(140, 198, 242, 0.75);
  color: #d8edff;
  box-shadow: 0 0 18px rgba(64, 148, 220, 0.4), inset 0 0 10px rgba(140, 198, 242, 0.1);
}

.catch-r-ultra .dialogue-actions button {
  border-color: rgba(206, 152, 255, 0.75);
  color: #eedcff;
  box-shadow: 0 0 18px rgba(160, 84, 235, 0.45), inset 0 0 10px rgba(206, 152, 255, 0.1);
}

.catch-r-legendary .dialogue-actions button {
  border-color: rgba(242, 193, 78, 0.85);
  color: #ffe9b0;
  box-shadow: 0 0 22px rgba(230, 160, 52, 0.55), inset 0 0 12px rgba(255, 214, 120, 0.14);
}

/* ---- mobile: fullscreen card keeps the ceremony frame inside safe areas -- */

@media (max-width: 960px), (pointer: coarse) {
  html.is-touch .modal.catch-showcase-modal .catch-rarity-frame {
    inset:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    --rf-c: 20px;
  }

  html.is-touch .modal.catch-showcase-modal .catch-rf--legendary { --rf-c: 26px; }

  html.is-touch .modal.catch-showcase-modal .catch-aff-stage { border-radius: 0; }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  /* the caption is the right-hand column here: it needs a full-height ink
     column, not the bottom-anchored desktop band (name sat at 1.63:1 on the
     seam highlight without this) */
  html.is-touch .modal.catch-showcase-modal .catch-caption::before {
    inset: -20px -16px -20px -30px;
    border-radius: 0;
    background: linear-gradient(90deg, rgba(6, 10, 20, 0), rgba(6, 10, 20, 0.34) 6%, rgba(6, 10, 20, 0.46) 26%);
    -webkit-backdrop-filter: blur(11px) brightness(0.48) saturate(1.12);
    backdrop-filter: blur(11px) brightness(0.48) saturate(1.12);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5) 5%, #000 12%);
    mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.5) 5%, #000 12%);
  }

  /* blur does the heavy lifting; the copy gets its own ink */
  html.is-touch .modal.catch-showcase-modal .catch-caption {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.6);
  }

  html.is-touch .modal.catch-showcase-modal .catch-dv {
    background: rgba(6, 10, 20, 0.55);
    padding: 2px 9px;
    border-radius: 7px;
  }

  /* backdrop streaks stop at the text column so bolts never cross the copy */
  html.is-touch .modal.catch-showcase-modal .catch-aff::before {
    -webkit-mask-image: linear-gradient(90deg, #000 0 44%, rgba(0, 0, 0, 0.3) 56% 100%);
    mask-image: linear-gradient(90deg, #000 0 44%, rgba(0, 0, 0, 0.3) 56% 100%);
  }

  html.is-touch .modal.catch-showcase-modal .catch-scene .dialogue-actions button {
    min-height: 44px;
    min-width: 132px;
    padding: 10px 26px;
  }
}

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .catch-aff,
  .catch-aff::before,
  .catch-aff-seam,
  .catch-rarity-frame,
  .catch-rf--rare .rf-ring,
  .catch-rf--ultra .rf-ring,
  .catch-rf--ultra::before,
  .catch-rf--legendary .rf-ring,
  .catch-rf--legendary .rf-sparks b {
    animation: none;
  }

  .catch-aff, .catch-aff-seam, .catch-rarity-frame { opacity: 1; }
  .catch-rf--legendary .rf-sparks b { opacity: 0; }
}









/* ==========================================================================
   Portrait prestige bezel v5 — painted PNG frames (assets/ui/catch-frame-*).
   The 2048px art carries the full ornament incl. the top crest; the window
   (x 345-1699, y 455-1641 of 2048) maps onto the plate with a slight inward
   overlap so the painted inner edge swallows the plate's affinity ring.
   The old CSS/SVG bezel children stay in the markup but are hidden — they
   remain the documented fallback if the PNGs are ever unavailable.
   ========================================================================== */

.catch-portrait {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.catch-portrait .catch-sprite-rim { inset: 0; margin: auto; }

.catch-pf {
  position: absolute;
  inset: -32.5% -20.6% -28.6%;
  pointer-events: none;
  z-index: 3;
  background: center / 100% 100% no-repeat;
}

/* painted art replaces the CSS rail + SVG ornaments */
.catch-pf::before,
.catch-pf i {
  display: none;
}

/* tier glow stays — it now breathes behind the painted metal */
.catch-pf::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 32px;
  box-shadow: var(--pf-glow, none);
}

.catch-pf--common {
  background-image: url("assets/ui/catch-frame-common.png?v=catch-prestige-frames-20260818-2");
}

/* the top rail's cartouche carried the seal before — set a forged pip in it */
.catch-pf--common::after {
  content: "";
  inset: auto;
  top: 12.6%;
  left: 50%;
  width: 19px;
  height: 19px;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
  background: linear-gradient(135deg, #f2f6fb 8%, #aeb9c8 48%, #45505e 100%);
  box-shadow: 0 0 0 1.5px rgba(16, 22, 30, 0.85), inset 1px 1px 1px rgba(255, 255, 255, 0.9), 1px 2px 3px rgba(8, 12, 18, 0.55);
}

.catch-pf--rare {
  --pf-glow: 0 0 26px rgba(64, 148, 220, 0.26);
  background-image: url("assets/ui/catch-frame-rare.png?v=catch-prestige-frames-20260818-2");
}

.catch-pf--ultra {
  --pf-glow: 0 0 30px rgba(160, 84, 235, 0.32);
  background-image: url("assets/ui/catch-frame-ultra.png?v=catch-prestige-frames-20260818-2");
}

.catch-pf--legendary {
  --pf-glow: 0 0 34px rgba(230, 160, 52, 0.4);
  background-image: url("assets/ui/catch-frame-legendary.png?v=catch-prestige-frames-20260818-2");
}

.catch-pf--legendary::after {
  animation: pf-glow-pulse 3.8s ease-in-out 1s infinite;
}

@keyframes pf-glow-pulse {
  0%, 100% { box-shadow: 0 0 34px rgba(230, 160, 52, 0.4); }
  50% { box-shadow: 0 0 46px rgba(255, 196, 90, 0.55); }
}

/* desktop: slightly smaller plate + lifted stage so the painted crest and
   the bottom band both live inside the card (the seal is gone — the crest
   owns the top now) */
html:not(.is-touch) .catch-scene .catch-sprite {
  width: min(340px, 52vw);
  height: min(340px, 52vw);
}

html:not(.is-touch) .catch-scene .catch-sprite-rim { width: min(340px, 52vw); }

html:not(.is-touch) .catch-scene .catch-frame { padding-bottom: 60px; }

html:not(.is-touch) .catch-scene.catch-r-legendary .catch-frame { padding-bottom: 40px; }

/* chips + CTA join the forged register so the chrome matches the frames */
.catch-scene .catch-pill,
.catch-scene .catch-chip {
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.26), inset 0 -3px 5px rgba(0, 0, 0, 0.52), 0 1px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.catch-scene .dialogue-actions button {
  background: linear-gradient(180deg, #1e2636, #131a2b 55%, #0d1322);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.42), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.catch-r-rare .dialogue-actions button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.42), 0 0 18px rgba(64, 148, 220, 0.4); }
.catch-r-ultra .dialogue-actions button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.42), 0 0 18px rgba(160, 84, 235, 0.45); }
.catch-r-legendary .dialogue-actions button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -3px 6px rgba(0, 0, 0, 0.42), 0 0 22px rgba(230, 160, 52, 0.55), inset 0 0 12px rgba(255, 214, 120, 0.12); }

/* ---- ONE ornamental carrier: keep the outer card frame architectural ----- */

.catch-rf--legendary .rf-corner::after { content: none; }
.catch-rf--legendary { --rf-c: 24px; --rf-cw: 2.5px; }
.catch-rf--legendary .rf-corner::before { width: 7px; height: 7px; }
.catch-rf--ultra .rf-corner::before { width: 9px; height: 9px; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.95), 0 0 4px rgba(216, 160, 255, 0.45); }

/* touch layouts caption in the side column — the window scrim buys nothing
   there, so the hero keeps its full lighting */
@media (max-width: 960px), (pointer: coarse) {
  html.is-touch .modal.catch-showcase-modal .catch-sprite {
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), transparent 58%),
      radial-gradient(ellipse 60% 55% at 50% 48%, rgba(4, 8, 18, 0.32), transparent 70%),
      linear-gradient(180deg, rgba(12, 18, 34, 0.42), rgba(7, 11, 22, 0.52)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catch-pf--legendary::after { animation: none; }
}

/* The portrait plate is stationary while the monster breathes inside it.
   Keeping the clipping window separate from the painted bezel lets oversized
   silhouettes (notably Nebulion) move without exposing the plate edges above
   or below the frame. */
.catch-portrait-window {
  position: relative;
  display: grid;
  place-items: center;
  width: min(360px, 56vw);
  height: min(360px, 56vw);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--af1, #ffe4a5) 70%, rgba(255, 255, 255, 0.5));
  border-radius: 28px;
  background:
    linear-gradient(to top, rgba(4, 8, 18, 0.82), rgba(4, 8, 18, 0.28) 20%, transparent 32%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), transparent 58%),
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(4, 8, 18, 0.32), transparent 70%),
    linear-gradient(180deg, rgba(12, 18, 34, 0.42), rgba(7, 11, 22, 0.52));
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--af1, #fff7a8) 50%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.42),
    0 0 40px color-mix(in srgb, var(--af2, #5fe08b) 42%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.16);
  backdrop-filter: blur(9px) saturate(1.16);
}

.catch-portrait-window > .catch-sprite {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.catch-portrait-window > .catch-sprite-rim {
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: auto;
}

/* Catch's pop/idle animation used to replace the Holo animation shorthand.
   Compose the filter-only Holo cycle with the portrait movement instead. */
.catch-portrait-window > .catch-sprite.holo-sprite,
.catch-portrait-window > .catch-sprite.shiny-sprite {
  animation:
    catch-pop 720ms cubic-bezier(0.18, 1.5, 0.35, 1) both,
    catch-idle-v3 4.6s ease-in-out 950ms infinite,
    shiny-glow-still 2.4s ease-in-out infinite;
}

@keyframes catch-black-holo-glow-still {
  0%, 100% { --bh-gray: 0.2; --bh-dark: 0.76; --bh-contrast: 1.34; }
  14% { --bh-gray: 0.05; --bh-dark: 0.94; --bh-contrast: 1.24; }
  26% { --bh-gray: 0.18; --bh-dark: 0.8; --bh-contrast: 1.36; }
  38% { --bh-gray: 0.08; --bh-dark: 0.88; --bh-contrast: 1.29; }
  52% { --bh-gray: 0.3; --bh-dark: 0.72; --bh-contrast: 1.42; }
  59% { --bh-gray: 0.06; --bh-dark: 1.03; --bh-contrast: 1.22; }
  66% { --bh-gray: 0.16; --bh-dark: 0.84; --bh-contrast: 1.34; }
  84% { --bh-gray: 0.06; --bh-dark: 0.92; --bh-contrast: 1.26; }
}

.catch-portrait-window > .catch-sprite.black-holo-sprite {
  animation:
    catch-pop 720ms cubic-bezier(0.18, 1.5, 0.35, 1) both,
    catch-idle-v3 4.6s ease-in-out 950ms infinite,
    black-holo-color-cycle 2.4s ease-in-out infinite,
    catch-black-holo-glow-still 7.2s ease-in-out infinite;
}

html:not(.is-touch) .catch-scene .catch-portrait-window {
  width: min(340px, 52vw);
  height: min(340px, 52vw);
}

@media (max-width: 960px), (pointer: coarse) {
  html.is-touch .modal.catch-showcase-modal .catch-portrait-window {
    background:
      radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.07), transparent 58%),
      radial-gradient(ellipse 60% 55% at 50% 48%, rgba(4, 8, 18, 0.32), transparent 70%),
      linear-gradient(180deg, rgba(12, 18, 34, 0.42), rgba(7, 11, 22, 0.52));
  }

  html.is-touch .modal.catch-showcase-modal .catch-portrait-window > .catch-sprite {
    background: none !important;
  }
}

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .modal.catch-showcase-modal .catch-portrait-window {
    width: clamp(118px, 40dvh, 210px);
    height: clamp(118px, 40dvh, 210px);
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catch-portrait-window > .catch-sprite,
  .catch-portrait-window > .catch-sprite-rim {
    animation: none;
  }
}

/* ==========================================================================
 * LEDGER WORLD MENUS · 2026-08-20
 * ==========================================================================
 * The clean-world families that never joined the "Ledger & Seal" document
 * skin (mongame-vendor-system.css) join it here: Party, Bag, Box, Seals,
 * Atlas and the Heartroot land context become bound ledger leaves - bone
 * paper, ink binding, one coloured thread per family - and the desktop side
 * panel becomes the ink rail the touch HUD already ships.
 *
 * Scope discipline:
 *   - Every rule is keyed to ONE of the family classes below. The shared
 *     `.modal.clean-world-modal .modal-card` base and every other clean-world
 *     card (colosseum, save screen, land plot selector, ...) are untouched.
 *   - Tokens are self-contained (--mw-*) and mirror the vendor sheet values,
 *     so this section survives even if that sheet is edited.
 *   - No rule emits text through content:"..." (localization contract).
 * Family threads: gold = team & goods (Party, Box, Bag) - verd = travel and
 * land certification (Atlas, Farm/Estate) - oxblood = arena ceremony (Seals).
 * ========================================================================== */
:root {
  --mw-leaf: #f6f2e7;
  --mw-leaf-bright: #fdfbf4;
  --mw-leaf-sunk: #ece7d8;
  --mw-ink: #14110c;
  --mw-ink-soft: #241f18;
  --mw-body: #37322a;
  --mw-mute: #5f584b;
  --mw-mute-strong: rgba(20, 17, 12, 0.68);
  --mw-hair: rgba(20, 17, 12, 0.10);
  --mw-rule: rgba(20, 17, 12, 0.20);
  --mw-rule-strong: rgba(20, 17, 12, 0.38);
  --mw-wash: rgba(20, 17, 12, 0.045);
  --mw-zebra: rgba(20, 17, 12, 0.028);
  --mw-gold: #a8801f;
  --mw-gold-deep: #6f5210;
  --mw-gold-pale: #e6d1a0;
  --mw-ox: #872019;
  --mw-ox-wash: rgba(135, 32, 25, 0.10);
  --mw-verd: #17614d;
  --mw-verd-wash: rgba(23, 97, 77, 0.10);
  --mw-felt: #15110e;
  --mw-felt-2: #1d1712;
  --mw-felt-hair: rgba(240, 232, 214, 0.14);
  --mw-felt-rule: rgba(240, 232, 214, 0.28);
  --mw-felt-ink: #f2ece0;
  --mw-felt-mute: rgba(242, 236, 224, 0.62);
  --mw-serif: Georgia, "Times New Roman", serif;
  /* Byte-identical query to the vendor sheet / index.html preload: one cache
     entry, no second download. */
  --mw-watermark: url("assets/ui/save-line-art-bg.webp?v=perfect-intro-mystery-1-duo-m-1");
}

/* ---- 1 - THE LEAF - shared bound-paper shell ----------------------------- */
.modal.clean-world-modal .modal-card.party-modal,
.modal.clean-world-modal .modal-card.seal-modal,
.modal.clean-world-modal .modal-card.atlas-modal,
.modal.clean-world-modal .modal-card.box-card,
.modal.clean-world-modal .shop-card.bag-card,
.modal.clean-world-modal .shop-card.land-context-card {
  --mw-accent: var(--mw-gold);
  color: var(--mw-ink);
  border: 1px solid var(--mw-rule-strong);
  border-radius: 0 8px 8px 0;
  background-color: var(--mw-leaf);
  background-image:
    linear-gradient(rgba(253, 251, 244, 0.93), rgba(253, 251, 244, 0.93)),
    var(--mw-watermark),
    linear-gradient(179deg, #fdfbf4 0%, #f3efe2 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, cover, 100% 100%;
  background-position: 0 0, 50% 12%, 0 0;
  background-blend-mode: normal, multiply, normal;
  box-shadow:
    inset 5px 0 0 var(--mw-ink),
    inset 8px 0 0 var(--mw-accent),
    inset 0 0 0 10px var(--mw-leaf),
    inset 0 0 0 11px var(--mw-rule),
    7px 7px 0 -1px var(--mw-leaf-sunk),
    7px 7px 0 0 rgba(20, 17, 12, 0.20),
    0 34px 78px rgba(5, 4, 3, 0.42);
  scrollbar-color: var(--mw-rule) transparent;
  scrollbar-width: thin;
}
.modal.clean-world-modal .modal-card.seal-modal { --mw-accent: var(--mw-ox); }
.modal.clean-world-modal .modal-card.atlas-modal,
.modal.clean-world-modal .shop-card.land-context-card { --mw-accent: var(--mw-verd); }

/* Backdrop for the full-height party/details layout: a warm graphite room
   (mirrors the vendor scrim) instead of the washed-out white photo veil. */
.modal.clean-world-modal.party-full-modal {
  background:
    radial-gradient(132% 100% at 50% 30%, rgba(34, 28, 21, 0.50), rgba(10, 8, 6, 0.80) 74%),
    #201a12;
  -webkit-backdrop-filter: blur(3px) saturate(0.78);
  backdrop-filter: blur(3px) saturate(0.78);
}
.modal.clean-world-modal.party-full-modal .party-modal {
  background-color: var(--mw-leaf);
  background-image:
    linear-gradient(rgba(253, 251, 244, 0.93), rgba(253, 251, 244, 0.93)),
    var(--mw-watermark),
    linear-gradient(179deg, #fdfbf4 0%, #f3efe2 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, cover, 100% 100%;
  background-position: 0 0, 50% 12%, 0 0;
  background-blend-mode: normal, multiply, normal;
}

/* ---- 2 - TYPOGRAPHY - the header carries the thread ---------------------- */
.modal.clean-world-modal .modal-card.party-modal > h2,
.modal.clean-world-modal .modal-card.seal-modal > h2,
.modal.clean-world-modal .modal-card.seal-modal .prestige-seal-heading,
.modal.clean-world-modal .modal-card.atlas-modal > h2,
.modal.clean-world-modal .modal-card.box-card > h2,
.modal.clean-world-modal .shop-card.bag-card .bag-modal-head h2,
.modal.clean-world-modal .shop-card.land-context-card .land-farm-title h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--mw-ink);
  font-family: var(--mw-serif);
  font-weight: 400;
  line-height: 1.06;
}
/* The fleuron is a mark, never a word. */
.modal.clean-world-modal .modal-card.party-modal > h2::before,
.modal.clean-world-modal .modal-card.seal-modal > h2::before,
.modal.clean-world-modal .modal-card.seal-modal .prestige-seal-heading::before,
.modal.clean-world-modal .modal-card.atlas-modal > h2::before,
.modal.clean-world-modal .modal-card.box-card > h2::before,
.modal.clean-world-modal .shop-card.bag-card .bag-modal-head h2::before,
.modal.clean-world-modal .shop-card.land-context-card .land-farm-title h2::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  align-self: center;
  background: var(--mw-accent);
  transform: rotate(45deg);
  box-shadow: inset -1px -1px 0 rgba(20, 17, 12, 0.35);
}
/* Short thread underline beneath the header line. */
.modal.clean-world-modal .modal-card.party-modal > h2,
.modal.clean-world-modal .modal-card.seal-modal > h2,
.modal.clean-world-modal .modal-card.atlas-modal > h2,
.modal.clean-world-modal .modal-card.box-card > h2,
.modal.clean-world-modal .shop-card.bag-card .bag-modal-head h2 {
  padding-bottom: 10px;
  background:
    linear-gradient(var(--mw-accent), var(--mw-accent)) 21px 100% / 56px 2px no-repeat,
    linear-gradient(var(--mw-hair), var(--mw-hair)) 0 100% / 100% 1px no-repeat;
}

.modal.clean-world-modal .modal-card.party-modal > p,
.modal.clean-world-modal .modal-card.seal-modal > p,
.modal.clean-world-modal .modal-card.atlas-modal > p,
.modal.clean-world-modal .modal-card.box-card > p,
.modal.clean-world-modal .shop-card.bag-card .bag-intro {
  color: var(--mw-body) !important;
}

/* ---- 3 - CONTROLS - ledger buttons, fields --------------------------------- */
.modal.clean-world-modal .modal-card.party-modal button,
.modal.clean-world-modal .modal-card.seal-modal button,
.modal.clean-world-modal .modal-card.atlas-modal button,
.modal.clean-world-modal .modal-card.box-card button,
.modal.clean-world-modal .shop-card.bag-card button,
.modal.clean-world-modal .shop-card.land-context-card button {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 4px;
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.16);
  font-weight: 800;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.modal.clean-world-modal .modal-card.party-modal button:hover:not(:disabled),
.modal.clean-world-modal .modal-card.seal-modal button:hover:not(:disabled),
.modal.clean-world-modal .modal-card.atlas-modal button:hover:not(:disabled),
.modal.clean-world-modal .modal-card.box-card button:hover:not(:disabled),
.modal.clean-world-modal .shop-card.bag-card button:hover:not(:disabled),
.modal.clean-world-modal .shop-card.land-context-card button:hover:not(:disabled) {
  background: #ffffff;
  border-color: var(--mw-rule-strong);
}
.modal.clean-world-modal .modal-card.party-modal button:active:not(:disabled),
.modal.clean-world-modal .modal-card.seal-modal button:active:not(:disabled),
.modal.clean-world-modal .modal-card.atlas-modal button:active:not(:disabled),
.modal.clean-world-modal .modal-card.box-card button:active:not(:disabled),
.modal.clean-world-modal .shop-card.bag-card button:active:not(:disabled),
.modal.clean-world-modal .shop-card.land-context-card button:active:not(:disabled) {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 rgba(20, 17, 12, 0.16);
}
.modal.clean-world-modal .modal-card.party-modal button:disabled,
.modal.clean-world-modal .modal-card.seal-modal button:disabled,
.modal.clean-world-modal .modal-card.atlas-modal button:disabled,
.modal.clean-world-modal .modal-card.box-card button:disabled,
.modal.clean-world-modal .shop-card.bag-card button:disabled,
.modal.clean-world-modal .shop-card.land-context-card button:disabled {
  color: var(--mw-mute);
  background: var(--mw-leaf-sunk);
  box-shadow: none;
}
.modal.clean-world-modal .modal-card.atlas-modal input,
.modal.clean-world-modal .modal-card.atlas-modal select,
.modal.clean-world-modal .modal-card.box-card input,
.modal.clean-world-modal .modal-card.box-card select,
.modal.clean-world-modal .shop-card.bag-card input {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 rgba(20, 17, 12, 0.05);
}

/* ---- 4 - PARTY - the team register ---------------------------------------- */
.modal.clean-world-modal .party-modal .party-item {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  box-shadow: 3px 3px 0 -1px var(--mw-leaf-sunk), 3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .party-modal .party-item:hover {
  transform: none;
  border-color: var(--mw-rule-strong);
}
.modal.clean-world-modal .party-modal .party-item.lead {
  border-color: rgba(168, 128, 31, 0.55);
  box-shadow:
    inset 3px 0 0 var(--mw-gold),
    3px 3px 0 -1px var(--mw-leaf-sunk),
    3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .party-modal .party-item strong { color: var(--mw-ink); }
.modal.clean-world-modal .party-modal .lead-chip {
  color: #3f2f08;
  background: var(--mw-gold-pale);
  border: 1px solid rgba(111, 82, 16, 0.45);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.modal.clean-world-modal .party-modal .mini-hp,
.modal.clean-world-modal .party-modal .mini-exp {
  background: rgba(20, 17, 12, 0.12);
}

/* Meta chips (partyRowsHtml emits .party-meta-chips instead of the pipe line) */
.party-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.party-meta-chips .pm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--mw-rule);
  border-radius: 999px;
  color: var(--mw-body);
  background: var(--mw-leaf-bright);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.party-meta-chips .pm-chip b {
  margin-right: 4px;
  color: var(--mw-gold-deep);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.party-meta-chips .pm-chip--type { color: var(--mw-ink); border-color: var(--mw-rule-strong); }

/* ---- 5 - POWER BADGES on paper - the unreadable pills, fixed --------------- */
.modal.clean-world-modal .party-modal .power-badge.power-badge,
.modal.clean-world-modal .box-card .power-badge.power-badge,
.modal.clean-world-modal .bag-card .power-badge.power-badge {
  color: var(--mw-body);
  border-color: rgba(111, 82, 16, 0.45);
  background: linear-gradient(180deg, rgba(168, 128, 31, 0.15), rgba(168, 128, 31, 0.06));
}
.modal.clean-world-modal .party-modal .power-badge.power-badge b,
.modal.clean-world-modal .box-card .power-badge.power-badge b,
.modal.clean-world-modal .bag-card .power-badge.power-badge b {
  color: var(--mw-gold-deep);
}
.modal.clean-world-modal .party-modal .power-badge.power-badge em,
.modal.clean-world-modal .box-card .power-badge.power-badge em,
.modal.clean-world-modal .bag-card .power-badge.power-badge em {
  color: var(--mw-ink);
  font-weight: 950;
}
.modal.clean-world-modal .party-modal .power-badge--current.power-badge,
.modal.clean-world-modal .box-card .power-badge--current.power-badge {
  border-color: rgba(23, 97, 77, 0.45);
  background: linear-gradient(180deg, rgba(23, 97, 77, 0.13), rgba(23, 97, 77, 0.05));
}
.modal.clean-world-modal .party-modal .power-badge--current.power-badge b,
.modal.clean-world-modal .box-card .power-badge--current.power-badge b {
  color: var(--mw-verd);
}

/* ---- 6 - BAG - the supplies ledger ----------------------------------------- */
.modal.clean-world-modal .bag-card .bag-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mw-gold-deep);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modal.clean-world-modal .bag-card .bag-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--mw-rule);
}
.modal.clean-world-modal .bag-card .bag-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mw-hair);
  border-radius: 0;
  box-shadow: none;
}
.modal.clean-world-modal .bag-card .bag-row:nth-child(even) { background: var(--mw-zebra); }
.modal.clean-world-modal .bag-card .bag-row-icon {
  background: var(--mw-wash);
  border: 1px solid var(--mw-rule);
  border-radius: 4px;
}
.modal.clean-world-modal .bag-card .bag-row strong { color: var(--mw-ink); }
.modal.clean-world-modal .bag-card .bag-row small { color: var(--mw-mute-strong); }
.modal.clean-world-modal .bag-card .bag-have {
  color: var(--mw-verd);
  background: var(--mw-verd-wash);
  border: 1px solid rgba(23, 97, 77, 0.4);
  border-radius: 999px;
  font-weight: 900;
}
.modal.clean-world-modal .bag-card .bag-filter button.is-selected,
.modal.clean-world-modal .bag-card .bag-filter button[aria-pressed="true"] {
  background: #ffffff;
  border-color: var(--mw-gold);
  box-shadow: inset 0 -2px 0 var(--mw-gold), 2px 2px 0 0 rgba(20, 17, 12, 0.16);
}
.modal.clean-world-modal .bag-card .bag-empty,
.modal.clean-world-modal .bag-card .bag-noresult { color: var(--mw-mute-strong) !important; }

/* ---- 7 - BOX - the reserve register ---------------------------------------- */
.modal.clean-world-modal .box-card .box-row {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  box-shadow: 3px 3px 0 -1px var(--mw-leaf-sunk), 3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .box-card .box-row strong { color: var(--mw-ink); }
.modal.clean-world-modal .box-card .box-row .monster-meta { color: var(--mw-body) !important; }
.modal.clean-world-modal .box-card .box-filter-chip {
  border-radius: 999px;
  font-weight: 800;
}
.modal.clean-world-modal .box-card .box-filter-chip.active {
  background: #ffffff;
  border-color: var(--mw-gold);
  box-shadow: inset 0 -2px 0 var(--mw-gold), 2px 2px 0 0 rgba(20, 17, 12, 0.16);
}
.modal.clean-world-modal .box-card .box-result-count { color: var(--mw-mute-strong); }
.modal.clean-world-modal .box-card .box-vault-note { color: var(--mw-mute-strong); }

/* ---- 8 - SEALS - certificates of the league path ---------------------------- */
.modal.clean-world-modal .seal-modal .seal-card {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 5px var(--mw-leaf-bright),
    inset 0 0 0 6px var(--mw-rule),
    3px 3px 0 -1px var(--mw-leaf-sunk),
    3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .seal-modal .seal-card strong { color: var(--mw-ink); }
.modal.clean-world-modal .seal-modal .seal-card .seal-arena { color: var(--mw-mute-strong); }
.modal.clean-world-modal .seal-modal .seal-card .seal-state {
  color: var(--mw-mute-strong);
  font-weight: 900;
  letter-spacing: 0.1em;
}
.modal.clean-world-modal .seal-modal .seal-card.earned .seal-state { color: var(--mw-verd); }
.modal.clean-world-modal .seal-modal .seal-card.earned {
  border-color: rgba(168, 128, 31, 0.5);
  box-shadow:
    inset 0 0 0 5px var(--mw-leaf-bright),
    inset 0 0 0 6px rgba(168, 128, 31, 0.55),
    3px 3px 0 -1px var(--mw-leaf-sunk),
    3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .seal-modal .seal-card.locked {
  background: var(--mw-leaf);
  filter: saturate(0.5);
}
.modal.clean-world-modal .seal-modal .seal-no { color: var(--mw-mute); font-family: var(--mw-serif); font-style: italic; }

/* ---- 9 - ATLAS - the traveler's ledger -------------------------------------- */
.modal.clean-world-modal .atlas-modal .atlas-region-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mw-ink);
  font-family: var(--mw-serif);
  font-weight: 400;
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.modal.clean-world-modal .atlas-modal .atlas-region-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--mw-rule);
}
.modal.clean-world-modal .atlas-modal .atlas-chip {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-hair);
  border-radius: 5px;
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
.modal.clean-world-modal .atlas-modal button.atlas-chip:hover {
  background: #ffffff;
  border-color: var(--mw-verd);
  box-shadow: inset 0 0 0 1px rgba(23, 97, 77, 0.35), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.here {
  border-color: rgba(135, 32, 25, 0.55);
  box-shadow: inset 3px 0 0 var(--mw-ox), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.fly {
  border-color: rgba(23, 97, 77, 0.4);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.locked {
  background: var(--mw-leaf);
  box-shadow: none;
}
.modal.clean-world-modal .atlas-modal .atlas-chip.locked .atlas-chip-name { color: var(--mw-mute-strong); }
.modal.clean-world-modal .atlas-modal .atlas-chip-name { color: var(--mw-ink); }
.modal.clean-world-modal .atlas-modal .atlas-chip-tag {
  padding: 1px 6px;
  border: 1px solid var(--mw-rule);
  border-radius: 3px;
  background: transparent;
  color: var(--mw-mute-strong) !important;
  font-weight: 900;
  letter-spacing: 0.09em;
}
.modal.clean-world-modal .atlas-modal .atlas-chip-mark {
  color: var(--mw-mute-strong) !important;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.modal.clean-world-modal .atlas-modal .atlas-chip.here .atlas-chip-mark { color: var(--mw-ox) !important; }
.modal.clean-world-modal .atlas-modal .atlas-chip.fly .atlas-chip-mark { color: var(--mw-verd) !important; }
.modal.clean-world-modal .atlas-modal .atlas-leg {
  color: #3f2f08;
  background: var(--mw-gold-pale);
  border: 1px solid rgba(111, 82, 16, 0.45);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.modal.clean-world-modal .atlas-modal .atlas-seal {
  color: var(--mw-verd);
  background: var(--mw-verd-wash);
  border: 1px solid rgba(23, 97, 77, 0.4);
  border-radius: 999px;
}

/* The ledger fills in as you travel: visited maps show their painting,
   unvisited entries stay an unmapped hatch. (Thumb markup from showAtlas.) */
.atlas-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 7 / 2.6;
  margin-bottom: 7px;
  overflow: hidden;
  border: 1px solid var(--mw-rule);
  border-radius: 3px;
  background:
    repeating-linear-gradient(-45deg, rgba(20, 17, 12, 0.05) 0 5px, transparent 5px 10px),
    var(--mw-leaf-sunk);
}
.atlas-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: saturate(0.94);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.locked .atlas-thumb { opacity: 0.55; }

/* ---- 10 - FARM / LAND CONTEXT - the field ledger ----------------------------- */
.modal.clean-world-modal .land-context-card .land-context-tabs button.active {
  background: #ffffff;
  border-color: var(--mw-verd);
  box-shadow: inset 0 -2px 0 var(--mw-verd), 2px 2px 0 0 rgba(20, 17, 12, 0.16);
}
.modal.clean-world-modal .land-context-card .land-farm-stats span {
  color: var(--mw-body);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  font-weight: 800;
}
.modal.clean-world-modal .land-context-card .land-farm-worker-bar {
  background: var(--mw-wash);
  border: 1px solid var(--mw-hair);
  border-radius: 6px;
}
.modal.clean-world-modal .land-context-card .land-farm-worker-copy span { color: var(--mw-mute-strong); }
.modal.clean-world-modal .land-context-card .land-farm-worker-copy strong { color: var(--mw-ink); }
.modal.clean-world-modal .land-context-card .land-farm-note { color: var(--mw-mute-strong) !important; }
.modal.clean-world-modal .land-context-card .land-farm-claim:not(:disabled) {
  color: #3f2f08;
  background: linear-gradient(180deg, #f3e3bd, var(--mw-gold-pale));
  border-color: rgba(111, 82, 16, 0.5);
}
.modal.clean-world-modal .land-context-card .land-seed-choice {
  color: var(--mw-ink);
  background: var(--mw-leaf-bright);
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
.modal.clean-world-modal .land-context-card .land-seed-choice.active {
  border-color: var(--mw-verd);
  box-shadow: inset 3px 0 0 var(--mw-verd), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .land-context-card .land-seed-choice img {
  width: 40px;
  height: 40px;
}
/* Locked crop rows: the lock reason must stay legible (was pale-on-white). */
.modal.clean-world-modal .land-context-card .land-seed-choice:disabled,
.modal.clean-world-modal .land-context-card .land-seed-choice[disabled] {
  color: var(--mw-mute);
  background: var(--mw-leaf-sunk);
  box-shadow: none;
  opacity: 1;
}
.modal.clean-world-modal .land-context-card .land-seed-choice:disabled strong,
.modal.clean-world-modal .land-context-card .land-seed-choice[disabled] strong { color: var(--mw-ink-soft); }
.modal.clean-world-modal .land-context-card .land-seed-choice:disabled span,
.modal.clean-world-modal .land-context-card .land-seed-choice[disabled] span { color: var(--mw-mute-strong); }

/* ---- 11 - DETAILS - partner progression joins the dark panel ----------------- */
.modal.clean-world-modal .monster-detail .mpx-progression-card {
  color: var(--mw-felt-ink);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 226, 170, 0.07), transparent 60%),
    linear-gradient(180deg, var(--mw-felt-2), var(--mw-felt));
  border: 1px solid var(--mw-felt-hair);
  border-radius: 8px;
  box-shadow: inset 3px 0 0 var(--mw-gold), inset 0 1px 0 rgba(240, 232, 214, 0.1);
}
.modal.clean-world-modal .monster-detail .mpx-progression-card::before { display: none; }
.modal.clean-world-modal .monster-detail .mpx-progression-card .mpx-kicker { color: var(--mw-gold-pale); }
.modal.clean-world-modal .monster-detail .mpx-progression-card h3 {
  color: var(--mw-felt-ink);
  font-family: var(--mw-serif);
  font-weight: 400;
}
.modal.clean-world-modal .monster-detail .mpx-rank-badge {
  color: var(--mw-felt-ink);
  background: rgba(168, 128, 31, 0.18);
  border: 1px solid rgba(230, 209, 160, 0.4);
}
.modal.clean-world-modal .monster-detail .mpx-stage-track {
  position: relative;
  gap: 10px;
}
.modal.clean-world-modal .monster-detail .mpx-stage-dot {
  color: var(--mw-felt-ink);
  background: rgba(240, 232, 214, 0.06);
  border: 1px solid var(--mw-felt-hair);
  border-radius: 6px;
}
.modal.clean-world-modal .monster-detail .mpx-stage-dot b { color: var(--mw-felt-ink); }
.modal.clean-world-modal .monster-detail .mpx-stage-dot small { color: var(--mw-felt-mute); }
.modal.clean-world-modal .monster-detail .mpx-stage-dot.mpx-stage-complete {
  border-color: rgba(230, 209, 160, 0.55);
  background: rgba(168, 128, 31, 0.2);
}
.modal.clean-world-modal .monster-detail .mpx-stage-dot.mpx-stage-complete b { color: var(--mw-gold-pale); }
.modal.clean-world-modal .monster-detail .mpx-stage-dot.mpx-stage-current {
  box-shadow: 0 0 0 2px rgba(230, 209, 160, 0.35);
}
.modal.clean-world-modal .monster-detail .mpx-progression-stats span {
  color: var(--mw-felt-mute);
  background: rgba(240, 232, 214, 0.05);
  border: 1px solid var(--mw-felt-hair);
  border-radius: 5px;
}
.modal.clean-world-modal .monster-detail .mpx-progression-stats strong { color: var(--mw-felt-ink); }
.modal.clean-world-modal .monster-detail .mpx-progression-card > p { color: var(--mw-felt-mute) !important; }
.modal.clean-world-modal .monster-detail .mpx-condense-open:not(:disabled) {
  color: #3f2f08;
  background: linear-gradient(180deg, #f3e3bd, var(--mw-gold-pale));
  border: 1px solid rgba(111, 82, 16, 0.5);
}
.modal.clean-world-modal .monster-detail .mpx-condense-open:disabled {
  color: var(--mw-felt-mute);
  background: rgba(240, 232, 214, 0.05);
  border: 1px solid var(--mw-felt-hair);
}
.modal.clean-world-modal .monster-detail .mpx-maxed { color: var(--mw-gold-pale); }

/* ---- 12 - DESKTOP SIDE PANEL - the ink rail ----------------------------------- */
html:not(.is-touch) .side-panel {
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(26, 21, 15, 0.97), rgba(13, 11, 8, 0.99)),
    var(--mw-watermark) center / cover no-repeat,
    var(--mw-felt);
  border: 1px solid rgba(230, 209, 160, 0.24);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 214, 0.08),
    0 18px 44px rgba(0, 0, 0, 0.35);
  scrollbar-color: var(--mw-felt-rule) transparent;
  scrollbar-width: thin;
}
html:not(.is-touch) .side-panel .status-grid { border-bottom-color: var(--mw-felt-hair); }
html:not(.is-touch) .side-panel .status-grid span { color: var(--mw-felt-mute); }
html:not(.is-touch) .side-panel .status-grid strong { color: var(--mw-felt-ink); }
html:not(.is-touch) .side-panel #money { color: var(--mw-gold-pale); }
html:not(.is-touch) .side-panel #seal { color: #9fd8c8; }
html:not(.is-touch) .side-panel .party-panel { border-bottom-color: var(--mw-felt-hair); }
html:not(.is-touch) .side-panel .panel-title h2 { color: var(--mw-felt-mute); }
html:not(.is-touch) .side-panel .party-item strong { color: var(--mw-felt-ink); }
html:not(.is-touch) .side-panel .party-item:hover { background: rgba(240, 232, 214, 0.07); }
html:not(.is-touch) .side-panel .party-item.lead {
  background: rgba(168, 128, 31, 0.14);
  box-shadow: inset 2px 0 0 var(--mw-gold-pale);
}
html:not(.is-touch) .side-panel .party-item .mini-hp { background: rgba(240, 232, 214, 0.16); }
html:not(.is-touch) .side-panel .menu-toggle,
html:not(.is-touch) .side-panel .actions button {
  color: var(--mw-felt-ink);
  border-bottom-color: var(--mw-felt-hair);
}
html:not(.is-touch) .side-panel .actions button:hover,
html:not(.is-touch) .side-panel .actions button:focus-visible,
html:not(.is-touch) .side-panel .actions button.is-open,
html:not(.is-touch) .side-panel .menu-toggle:hover,
html:not(.is-touch) .side-panel .menu-toggle:focus-visible {
  background: rgba(230, 209, 160, 0.1);
  box-shadow: inset 2px 0 0 var(--mw-gold-pale);
  color: #fff8df;
}
html:not(.is-touch) .side-panel .actions .menu-group + .menu-group { border-top-color: var(--mw-felt-hair); }
html:not(.is-touch) .side-panel .actions button[data-hotkey]::after {
  color: var(--mw-felt-mute);
  background: rgba(240, 232, 214, 0.07);
  border-color: var(--mw-felt-rule);
}
html:not(.is-touch) #mainMenuBtn { color: #e29a90; }
html:not(.is-touch) #mainMenuBtn:hover,
html:not(.is-touch) #mainMenuBtn:focus-visible {
  color: #f3b3a9;
  background: rgba(135, 32, 25, 0.22);
  box-shadow: inset 2px 0 0 #e29a90;
}
html:not(.is-touch) .side-panel .journal { color: var(--mw-felt-mute); }
html:not(.is-touch) .side-panel .journal h2 { color: var(--mw-felt-mute); }
html:not(.is-touch) .side-panel .journal p { color: var(--mw-felt-ink); }

/* ---- 13 - BATTLE CONTACT SHADOW - REJECTED after prototyping ------------------
   A fixed ellipse under .sprite-flip cannot sit on every species' feet: the
   art's empty margin below the paws varies per sheet, so the shadow floats
   for some monsters and reads as a pasted vector blob - worse than none.
   ::before on .sprite-flip is also already owned by the asleep / shiny /
   voidbound / black-holo FX. Deliberately not shipped. ------------------- */

/* ---- 14 - INSTALL OFFER, DOCKED - a menu row, never an overlay --------------- */
.side-panel .actions .monstar-pwa-install--docked {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 10px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mw-gold-deep, #6f5210);
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  font: 800 0.86rem/1.2 Inter, system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
}
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked {
  color: var(--mw-gold-pale, #e6d1a0);
}
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked:hover,
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked:focus-visible {
  background: rgba(230, 209, 160, 0.1);
  box-shadow: inset 2px 0 0 var(--mw-gold-pale, #e6d1a0);
  color: #fff8df;
}
html.is-touch .side-panel .actions .monstar-pwa-install--docked { color: #e6d1a0; }

/* ---- 15 - SWEEP FIXES (first visual pass) ------------------------------------ */

/* The side panel's at-a-glance party rows keep their one-line form: the full
   meta chips belong to the Party register only. (Mirrors the .monster-meta
   hide the paper/touch rails already ship.) */
html:not(.is-touch) .side-panel .party-item .party-meta-chips,
html.is-touch .side-panel .party-item .party-meta-chips {
  display: none;
}

/* Ink-rail HUD contrast: out-specify the vendor sheet's AA fixes (written for
   the paper rail) with the same measured intent on felt. */
html:not(:has(#modal .evolution-result)):not(.is-touch) .side-panel .status-grid span,
html:not(:has(#modal .evolution-result)):not(.is-touch) .side-panel .panel-title h2 {
  color: rgba(242, 236, 224, 0.66);            /* >=6:1 on the felt rail */
}
html:not(:has(#modal .evolution-result)):not(.is-touch) .side-panel .actions button[data-hotkey]::after {
  color: rgba(242, 236, 224, 0.8);
  background: rgba(240, 232, 214, 0.08);
  border-color: rgba(240, 232, 214, 0.36);
}

/* Details: the progression card's serif title and stage thresholds sank into
   the felt (clean-world paints h3 near-black at higher priority). */
.modal.clean-world-modal .monster-detail .mpx-progression-card h3 {
  color: #f2ece0 !important;
}
.modal.clean-world-modal .monster-detail .mpx-stage-dot b { color: #f2ece0 !important; }
.modal.clean-world-modal .monster-detail .mpx-stage-dot small { color: rgba(242, 236, 224, 0.72) !important; }
.modal.clean-world-modal .monster-detail .mpx-progression-stats strong { color: #f2ece0 !important; }
.modal.clean-world-modal .monster-detail .mpx-progression-stats span { color: rgba(242, 236, 224, 0.68) !important; }
.modal.clean-world-modal .monster-detail .mpx-condense-open:disabled {
  color: rgba(242, 236, 224, 0.66) !important;
  background: rgba(240, 232, 214, 0.06);
  border: 1px solid rgba(240, 232, 214, 0.2);
}

/* Farm: air between the crop plate and its copy. */
.modal.clean-world-modal .land-context-card .land-seed-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

/* Details felt card: the mpx sheet paints with var(--mpx-*) (!important in
   places), so retune the TOKENS inside the card instead of fighting the
   rules. (:where() scope in mpx css has zero specificity - this wins.) */
.modal.clean-world-modal .monster-detail .mpx-progression-card {
  --mpx-ink: #f2ece0;
  --mpx-soft: rgba(242, 236, 224, 0.74);
  --mpx-muted: rgba(242, 236, 224, 0.64);
  --mpx-line: rgba(240, 232, 214, 0.17);
  --mpx-line-strong: rgba(240, 232, 214, 0.32);
  --mpx-paper: rgba(240, 232, 214, 0.07);
  --mpx-paper-soft: rgba(240, 232, 214, 0.05);
  --mpx-gold: #e6d1a0;
  --mpx-gold-bright: #f1bd4f;
  --mpx-gold-wash: rgba(230, 209, 160, 0.14);
  --mpx-teal: #7fd6ba;
  --mpx-teal-bright: #9fe6cd;
  --mpx-teal-wash: rgba(127, 214, 186, 0.12);
  --mpx-shadow: none;
}

/* ---- 16 - FINAL POLISH (second visual pass) ---------------------------------- */

/* Rarity name tints were tuned for light ground; lift them on the felt rail
   so Rare/Ultra/Legendary partners stay as readable as plain names. */
html:not(.is-touch) .side-panel .party-item .rare-name { color: #74d9c4; }
html:not(.is-touch) .side-panel .party-item .ultra-name { color: #cdb9ff; }
html:not(.is-touch) .side-panel .party-item .legendary-name { color: #ffd98a; }

/* Inner scrollers inside ledger leaves: hairline scrollbars, not chrome-gray
   slabs, so the page reads as paper edge to edge. */
.modal.clean-world-modal .box-card .box-scroll,
.modal.clean-world-modal .bag-card .bag-scroll,
.modal.clean-world-modal .atlas-modal .atlas-scroll,
.modal.clean-world-modal.party-full-modal .party-list {
  scrollbar-width: thin;
  scrollbar-color: var(--mw-rule) transparent;
}
.modal.clean-world-modal .box-card .box-scroll::-webkit-scrollbar,
.modal.clean-world-modal .bag-card .bag-scroll::-webkit-scrollbar,
.modal.clean-world-modal .atlas-modal .atlas-scroll::-webkit-scrollbar,
.modal.clean-world-modal.party-full-modal .party-list::-webkit-scrollbar {
  width: 8px;
}
.modal.clean-world-modal .box-card .box-scroll::-webkit-scrollbar-thumb,
.modal.clean-world-modal .bag-card .bag-scroll::-webkit-scrollbar-thumb,
.modal.clean-world-modal .atlas-modal .atlas-scroll::-webkit-scrollbar-thumb,
.modal.clean-world-modal.party-full-modal .party-list::-webkit-scrollbar-thumb {
  background: var(--mw-rule);
  border-radius: 4px;
}
.modal.clean-world-modal .box-card .box-scroll::-webkit-scrollbar-track,
.modal.clean-world-modal .bag-card .bag-scroll::-webkit-scrollbar-track,
.modal.clean-world-modal .atlas-modal .atlas-scroll::-webkit-scrollbar-track,
.modal.clean-world-modal.party-full-modal .party-list::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
 * LEDGER WORLD MENUS · ITERATION 2 (judge pass 6.3/10 -> component layer)
 * The first pass skinned the PAGES; this pass re-inks the COMPONENTS the
 * graders called stock: meters, buttons, native controls, locked states,
 * rail hierarchy, and the Details dossier. Same scope discipline.
 * ========================================================================== */

/* ---- 17 - METERS - no candy green anywhere on paper or felt ------------------ */
.modal.clean-world-modal .party-modal .mini-hp {
  height: 7px;
  border-radius: 1px;
  background: #e6e1d4;
  box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.18), 0 1px 0 rgba(20, 17, 12, 0.22);
}
.modal.clean-world-modal .party-modal .mini-hp span {
  background: linear-gradient(180deg, #6f9159, #5c7f4e);
  border-radius: 0;
}
.modal.clean-world-modal .party-modal .mini-exp {
  height: 3px;
  border-radius: 1px;
  background: #e6e1d4;
  box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .party-modal .mini-exp span {
  background: #a8801f;
  border-radius: 0;
}
html:not(.is-touch) .side-panel .party-item .mini-hp {
  height: 5px;
  border-radius: 1px;
  background: rgba(240, 232, 214, 0.14);
  box-shadow: none;
}
html:not(.is-touch) .side-panel .party-item .mini-hp span {
  background: #7fa06b;
  border-radius: 0;
}
/* Farm level meter: same inked trough, verd fill. */
.modal.clean-world-modal .land-context-card .land-skill-progress-bar {
  height: 7px;
  border-radius: 1px;
  overflow: hidden;
  background: #e6e1d4;
  box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.18), 0 1px 0 rgba(20, 17, 12, 0.22);
}
.modal.clean-world-modal .land-context-card .land-skill-progress-bar > * {
  height: 100%;
  background: linear-gradient(180deg, #6f9159, #5c7f4e);
  border-radius: 0;
}

/* ---- 18 - CONTROL RANKING - one primary verb per screen ---------------------- */
/* Party: Details is the primary action - filled ink, bone label. */
.modal.clean-world-modal .party-modal .party-controls button[data-party-action="details"]:not(:disabled) {
  color: #f6f2e7;
  background: linear-gradient(180deg, #2a231a, var(--mw-ink));
  border-color: var(--mw-ink);
  box-shadow: 2px 2px 0 0 rgba(20, 17, 12, 0.28);
}
.modal.clean-world-modal .party-modal .party-controls button[data-party-action="details"]:hover:not(:disabled) {
  background: #2a231a;
  border-color: #2a231a;
  box-shadow: 2px 2px 0 0 var(--mw-gold);
}
/* Bag: Use is the primary verb when live. */
.modal.clean-world-modal .bag-card .bag-right button:not(:disabled) {
  color: #f6f2e7;
  background: linear-gradient(180deg, #2a231a, var(--mw-ink));
  border-color: var(--mw-ink);
  box-shadow: 2px 2px 0 0 rgba(20, 17, 12, 0.28);
}
.modal.clean-world-modal .bag-card .bag-right button:hover:not(:disabled) {
  background: #2a231a;
  box-shadow: 2px 2px 0 0 var(--mw-gold);
}
/* Box: Details leads, Store stays ghost. */
.modal.clean-world-modal .box-card .box-actions button:first-child:not(:disabled) {
  color: #f6f2e7;
  background: linear-gradient(180deg, #2a231a, var(--mw-ink));
  border-color: var(--mw-ink);
}
/* Touch targets: keep control rows comfortably tappable. */
.modal.clean-world-modal .party-modal .party-controls button,
.modal.clean-world-modal .box-card .box-actions button {
  min-height: 34px;
}

/* ---- 19 - NATIVE CONTROLS - selects and fields join the ledger --------------- */
.modal.clean-world-modal .modal-card.atlas-modal select,
.modal.clean-world-modal .modal-card.box-card select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 34px;
  padding: 4px 30px 4px 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2337322a' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-color: var(--mw-leaf-bright);
}
.modal.clean-world-modal .modal-card.atlas-modal .atlas-toolbar button,
.modal.clean-world-modal .modal-card.atlas-modal .atlas-toolbar input,
.modal.clean-world-modal .modal-card.atlas-modal .atlas-toolbar select {
  min-height: 34px;
}
/* Card-level scrollbars (webkit) for every leaf + the dark dossier. */
.modal.clean-world-modal .modal-card.party-modal::-webkit-scrollbar,
.modal.clean-world-modal .modal-card.seal-modal::-webkit-scrollbar,
.modal.clean-world-modal .modal-card.atlas-modal::-webkit-scrollbar,
.modal.clean-world-modal .modal-card.box-card::-webkit-scrollbar,
.modal.clean-world-modal .shop-card.bag-card::-webkit-scrollbar,
.modal.clean-world-modal .shop-card.land-context-card::-webkit-scrollbar,
.modal.clean-world-modal .monster-detail::-webkit-scrollbar {
  width: 8px;
}
.modal.clean-world-modal .modal-card.party-modal::-webkit-scrollbar-thumb,
.modal.clean-world-modal .modal-card.seal-modal::-webkit-scrollbar-thumb,
.modal.clean-world-modal .modal-card.atlas-modal::-webkit-scrollbar-thumb,
.modal.clean-world-modal .modal-card.box-card::-webkit-scrollbar-thumb,
.modal.clean-world-modal .shop-card.bag-card::-webkit-scrollbar-thumb,
.modal.clean-world-modal .shop-card.land-context-card::-webkit-scrollbar-thumb {
  background: var(--mw-rule);
  border-radius: 4px;
}
.modal.clean-world-modal .monster-detail::-webkit-scrollbar-thumb {
  background: #4a3f31;
  border-radius: 4px;
}
.modal.clean-world-modal .modal-card.party-modal::-webkit-scrollbar-track,
.modal.clean-world-modal .modal-card.seal-modal::-webkit-scrollbar-track,
.modal.clean-world-modal .modal-card.atlas-modal::-webkit-scrollbar-track,
.modal.clean-world-modal .modal-card.box-card::-webkit-scrollbar-track,
.modal.clean-world-modal .shop-card.bag-card::-webkit-scrollbar-track,
.modal.clean-world-modal .shop-card.land-context-card::-webkit-scrollbar-track,
.modal.clean-world-modal .monster-detail::-webkit-scrollbar-track {
  background: transparent;
}
.modal.clean-world-modal .monster-detail {
  scrollbar-width: thin;
  scrollbar-color: #4a3f31 transparent;
}

/* ---- 20 - FOCUS - the advertised keyboard gets a visible ring ---------------- */
.modal.clean-world-modal .modal-card.party-modal :is(button, input, select):focus-visible,
.modal.clean-world-modal .modal-card.seal-modal :is(button, input, select):focus-visible,
.modal.clean-world-modal .modal-card.atlas-modal :is(button, input, select):focus-visible,
.modal.clean-world-modal .modal-card.box-card :is(button, input, select):focus-visible,
.modal.clean-world-modal .shop-card.bag-card :is(button, input, select):focus-visible,
.modal.clean-world-modal .shop-card.land-context-card :is(button, input, select):focus-visible,
.modal.clean-world-modal .monster-detail :is(button, input, select):focus-visible {
  outline: 2px solid rgba(168, 128, 31, 0.85);
  outline-offset: 1px;
}
html:not(.is-touch) .side-panel :is(button):focus-visible {
  outline: 2px solid rgba(230, 209, 160, 0.75);
  outline-offset: -2px;
}

/* ---- 21 - PARTY - specimen wells, threads, chip hierarchy -------------------- */
.modal.clean-world-modal .party-modal .party-item img {
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.5), transparent 70%),
    var(--mw-wash);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.08);
  object-fit: contain;
  padding: 6px;
}
/* Every card carries a quiet family thread; the lead's burns full gold. */
.modal.clean-world-modal .party-modal .party-item {
  box-shadow:
    inset 3px 0 0 rgba(168, 128, 31, 0.22),
    3px 3px 0 -1px var(--mw-leaf-sunk),
    3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .party-modal .party-item.lead {
  box-shadow:
    inset 3px 0 0 var(--mw-gold),
    3px 3px 0 -1px var(--mw-leaf-sunk),
    3px 3px 0 0 rgba(20, 17, 12, 0.14);
}
/* Chip ranking: type = filled ink chip, labelled values = bright, the raw
   DV spread steps back a rank. */
.party-meta-chips .pm-chip--type {
  color: #f6f2e7;
  background: var(--mw-ink-soft);
  border-color: var(--mw-ink);
}
.party-meta-chips .pm-chip:last-child {
  color: var(--mw-mute);
  background: transparent;
  border-color: var(--mw-hair);
}

/* ---- 22 - BAG - the empty register still reads as paper ---------------------- */
.modal.clean-world-modal .bag-card .bag-scroll {
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(44, 38, 28, 0.045) 27px 28px);
}
.modal.clean-world-modal .bag-card .bag-row-icon,
.modal.clean-world-modal .bag-card .bag-item-glyph {
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.5), transparent 70%),
    var(--mw-wash);
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.08);
}

/* ---- 23 - BOX - grid discipline, wrapping chips, bigger specimens ------------ */
.modal.clean-world-modal .box-filter-chips {
  flex-wrap: wrap;
  row-gap: 6px;
  overflow-x: visible;
  padding-bottom: 0;
}
.modal.clean-world-modal .box-list {
  align-items: start;
  grid-auto-rows: max-content;
}
.modal.clean-world-modal .box-card .box-row {
  align-content: start;
}
.modal.clean-world-modal .box-card .box-name-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal.clean-world-modal .box-card .box-row img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.5), transparent 70%),
    var(--mw-wash);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.14);
  padding: 3px;
}

/* ---- 24 - SEALS - blind emboss + oxblood stamp + real hierarchy -------------- */
.modal.clean-world-modal .seal-modal .seal-card.locked .seal-medal {
  filter: grayscale(1) contrast(0.42) brightness(1.06);
  opacity: 0.9;
}
.modal.clean-world-modal .seal-modal .seal-card.locked {
  background: var(--mw-leaf);
  filter: none;
  box-shadow:
    inset 0 1px 2px rgba(44, 38, 28, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 5px var(--mw-leaf),
    inset 0 0 0 6px var(--mw-hair),
    2px 2px 0 0 rgba(20, 17, 12, 0.08);
}
/* "Not earned" becomes the promised oxblood stamp - a restriction mark. */
.modal.clean-world-modal .seal-modal .seal-card .seal-state {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border: 1px solid rgba(135, 32, 25, 0.55);
  box-shadow: inset 0 0 0 2px var(--mw-leaf), inset 0 0 0 3px rgba(135, 32, 25, 0.35);
  color: rgba(135, 32, 25, 0.82);
  transform: rotate(-3deg);
  font-weight: 900;
  letter-spacing: 0.12em;
}
.modal.clean-world-modal .seal-modal .seal-card.earned .seal-state {
  border-color: rgba(23, 97, 77, 0.55);
  box-shadow: inset 0 0 0 2px var(--mw-leaf-bright), inset 0 0 0 3px rgba(23, 97, 77, 0.32);
  color: var(--mw-verd);
  transform: rotate(-2deg);
}
/* Folio ordinal becomes a hanging ledger numeral. */
.modal.clean-world-modal .seal-modal .seal-no {
  font-size: 1.35rem;
  color: rgba(135, 32, 25, 0.5);
  font-style: normal;
}
/* Sub-section heading steps down: smaller, no fleuron, ruled full width. */
.modal.clean-world-modal .modal-card.seal-modal .prestige-seal-heading {
  font-size: 1.25rem;
  padding-bottom: 8px;
  background: linear-gradient(var(--mw-hair), var(--mw-hair)) 0 100% / 100% 1px no-repeat;
}
.modal.clean-world-modal .modal-card.seal-modal .prestige-seal-heading::before {
  display: none;
}

/* ---- 25 - ATLAS - deliberate terra incognita + framed plates + live states --- */
.atlas-thumb {
  background:
    repeating-linear-gradient(-45deg, rgba(44, 38, 28, 0.13) 0 3px, transparent 3px 9px),
    #ece5d4;
  position: relative;
}
/* Compass mark: an unmistakably deliberate cartographer's rose (a mark, not a word). */
.atlas-thumb:empty::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid rgba(44, 38, 28, 0.34);
  box-shadow: inset 0 0 0 3px #ece5d4, inset 0 0 0 4.5px rgba(44, 38, 28, 0.3);
  background: #ece5d4;
}
.atlas-thumb img {
  position: relative;
  border: 1px solid rgba(44, 38, 28, 0.35);
  box-shadow: inset 0 0 0 2px rgba(253, 251, 244, 0.85), 0 1px 2px rgba(44, 38, 28, 0.18);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.locked .atlas-chip-name { color: var(--mw-body); }
.modal.clean-world-modal .atlas-modal .atlas-chip.fly .atlas-chip-mark { color: var(--mw-verd) !important; }
.modal.clean-world-modal .atlas-modal .atlas-chip.locked .atlas-chip-mark { color: rgba(135, 32, 25, 0.78) !important; }
/* Legend keys carry their swatch (markup from showAtlas). */
.modal.clean-world-modal .atlas-modal .atlas-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: center;
}
.atlas-legend .atlas-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mw-mute-strong);
  font-size: 0.72rem;
  font-weight: 800;
}
.atlas-legend .atlas-key::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(44, 38, 28, 0.3);
  background: var(--mw-leaf-sunk);
}
.atlas-legend .atlas-key--here::before { background: var(--mw-ox); border-color: var(--mw-ox); }
.atlas-legend .atlas-key--fly::before { background: rgba(23, 97, 77, 0.75); border-color: var(--mw-verd); }
.atlas-legend .atlas-key--visited::before { background: rgba(120, 112, 96, 0.55); border-color: var(--mw-mute-strong); }
.atlas-legend .atlas-key--locked::before {
  background: repeating-linear-gradient(-45deg, rgba(44, 38, 28, 0.3) 0 2px, transparent 2px 4px), #ece5d4;
}
.atlas-legend .atlas-key--ultra::before { background: var(--mw-gold-pale); border-color: var(--mw-gold); }

/* ---- 26 - FARM - the header joins the family ------------------------------- */
.modal.clean-world-modal .shop-card.land-context-card .land-farm-title h2 {
  padding-bottom: 8px;
  background:
    linear-gradient(var(--mw-verd), var(--mw-verd)) 21px 100% / 56px 2px no-repeat,
    linear-gradient(var(--mw-hair), var(--mw-hair)) 0 100% / 100% 1px no-repeat;
}
.modal.clean-world-modal .land-context-card .land-farm-stats {
  margin-top: 8px;
}

/* ---- 27 - DETAILS - the dossier joins the ledger's dark verso ---------------- */
.modal.clean-world-modal .monster-detail {
  background-color: #17130f;
  background-image:
    linear-gradient(90deg,
      rgba(23, 19, 15, 0.9) 0%,
      rgba(23, 19, 15, 0.76) 22%,
      rgba(23, 19, 15, 0.96) 50%,
      rgba(23, 19, 15, 0.76) 78%,
      rgba(23, 19, 15, 0.9) 100%),
    linear-gradient(180deg, rgba(23, 19, 15, 0.55), rgba(23, 19, 15, 0.92)),
    var(--detail-bg-left),
    var(--detail-bg-right);
  background-position: center, center, left center, right center;
  background-size: cover, cover, 60% 100%, 60% 100%;
  background-repeat: no-repeat;
  border-color: rgba(240, 232, 214, 0.16);
  box-shadow:
    inset 3px 0 0 var(--mw-gold),
    inset 0 0 0 1px rgba(240, 232, 214, 0.07),
    0 18px 52px rgba(0, 0, 0, 0.32);
}
.modal.clean-world-modal .monster-detail .detail-head {
  border-color: rgba(240, 232, 214, 0.13);
  background: rgba(17, 13, 10, 0.66);
}
.modal.clean-world-modal .monster-detail h2 {
  font-family: var(--mw-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #f6f2e7 !important;
  padding-bottom: 8px;
  background:
    linear-gradient(var(--mw-gold), var(--mw-gold)) 0 100% / 56px 2px no-repeat,
    linear-gradient(rgba(240, 232, 214, 0.14), rgba(240, 232, 214, 0.14)) 0 100% / 100% 1px no-repeat;
}
.modal.clean-world-modal .monster-detail h3 {
  color: var(--mw-gold-pale) !important;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- 28 - INK RAIL - hierarchy, grouping, reserved keycap gutter ------------- */
/* The install offer is a quiet service row, never the brightest thing. */
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked {
  color: rgba(242, 236, 224, 0.6);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked:hover,
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked:focus-visible {
  color: var(--mw-gold-pale);
}
/* Main Menu: navigation voice with a restriction dot, not an error voice. */
html:not(.is-touch) #mainMenuBtn {
  color: var(--mw-felt-ink);
}
html:not(.is-touch) #mainMenuBtn::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0453c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}
html:not(.is-touch) #mainMenuBtn:hover,
html:not(.is-touch) #mainMenuBtn:focus-visible {
  color: #fff2ef;
  background: rgba(135, 32, 25, 0.24);
  box-shadow: inset 2px 0 0 #e29a90;
}
/* Family dot per menu group: gold = team, verd = world, gold-pale = online. */
html:not(.is-touch) .side-panel .actions .menu-group button::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(240, 232, 214, 0.2);
}
html:not(.is-touch) .side-panel .actions .menu-group[data-group="team"] button::before { background: rgba(230, 209, 160, 0.55); }
html:not(.is-touch) .side-panel .actions .menu-group[data-group="world"] button::before { background: rgba(127, 214, 186, 0.5); }
html:not(.is-touch) .side-panel .actions .menu-group[data-group="system"] button::before { background: rgba(240, 232, 214, 0.28); }
html:not(.is-touch) #mainMenuBtn::before { background: #b0453c; }
html:not(.is-touch) .side-panel .actions .monstar-pwa-install--docked::before { background: rgba(230, 209, 160, 0.4); }
/* Reserved keycap gutter: rows without a hotkey keep the column true. */
html:not(.is-touch) .side-panel .actions button:not([data-hotkey])::after {
  content: "";
  margin-left: auto;
  width: 24px;
}
/* Selected row: unmistakable. */
html:not(.is-touch) .side-panel .actions button.is-open {
  background: rgba(230, 209, 160, 0.16);
  box-shadow: inset 3px 0 0 var(--mw-gold-pale);
  color: #fff8df;
}

/* ---- 29 - BOX FOLLOW-UPS ----------------------------------------------------- */
/* Box rows carry the same inked meter as the Party register. */
.modal.clean-world-modal .box-card .mini-hp {
  height: 6px;
  border-radius: 1px;
  background: #e6e1d4;
  box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.18), 0 1px 0 rgba(20, 17, 12, 0.22);
}
.modal.clean-world-modal .box-card .mini-hp span {
  background: linear-gradient(180deg, #6f9159, #5c7f4e);
  border-radius: 0;
}
/* Rarity seals keep their game-wide hue semantics but go foil, not candy:
   deeper ink of the same family with a rimmed chip. */
.modal.clean-world-modal .box-card .rarity-seal,
.modal.clean-world-modal .party-modal .rarity-seal {
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.modal.clean-world-modal .box-card .rarity-seal--rare,
.modal.clean-world-modal .party-modal .rarity-seal--rare { color: #17614d; background: rgba(23, 97, 77, 0.08); }
.modal.clean-world-modal .box-card .rarity-seal--ultra,
.modal.clean-world-modal .party-modal .rarity-seal--ultra { color: #55407c; background: rgba(114, 88, 201, 0.09); }
.modal.clean-world-modal .box-card .rarity-seal--legendary,
.modal.clean-world-modal .party-modal .rarity-seal--legendary { color: #6f5210; background: rgba(168, 128, 31, 0.12); }

/* Box source tags (Party / Reserve / Vault) as quiet ledger chips. */
.modal.clean-world-modal .box-card .box-source-pill {
  color: #37322a;
  background: rgba(20, 17, 12, 0.045);
  border: 1px solid rgba(20, 17, 12, 0.2);
  border-radius: 3px;
  font-weight: 900;
  letter-spacing: 0.07em;
}

/* ==========================================================================
 * LEDGER WORLD MENUS · ITERATION 3 (judge pass 8.2 -> layout + cohesion)
 * ========================================================================== */

/* ---- 30 - ONE SCROLL CONTEXT PER LEAF (Box, Atlas) --------------------------- */
.modal.clean-world-modal .box-card .box-scroll {
  flex: none;
  min-height: auto;
  overflow: visible;
  padding-right: 0;
}
.modal.clean-world-modal .atlas-modal .atlas-scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* ---- 31 - WORLD CORNER - the action cluster joins the enamel family ---------- */
.desktop-land-action-btn {
  right: 16px;
  bottom: 16px;
  width: 64px;
  height: 64px;
  font-size: 1.1rem;
  color: #f2ece0;
  text-shadow: none;
  border: 1.5px solid rgba(230, 209, 160, 0.85);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 246, 225, 0.22), transparent 46%),
    linear-gradient(180deg, #241d15, #120e09);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 214, 0.3),
    inset 0 -10px 16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(20, 17, 12, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.45);
}
.desktop-land-action-btn:hover {
  border-color: #fff8df;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 246, 225, 0.3), transparent 46%),
    linear-gradient(180deg, #2c241a, #16110b);
}
.desktop-land-build-btn {
  right: 20px;
  bottom: 96px;
  width: 54px;
  height: 54px;
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2ece0;
  text-shadow: none;
  border: 1.5px solid rgba(230, 209, 160, 0.85);
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 246, 225, 0.22), transparent 46%),
    linear-gradient(180deg, #241d15, #120e09);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 214, 0.3),
    inset 0 -8px 14px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(20, 17, 12, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.45);
  animation: ledgerBuildPulse 1.6s ease-in-out infinite;
}
.desktop-land-build-btn:hover {
  border-color: #fff8df;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 246, 225, 0.3), transparent 46%),
    linear-gradient(180deg, #2c241a, #16110b);
}
@keyframes ledgerBuildPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(240, 232, 214, 0.3),
      inset 0 -8px 14px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(20, 17, 12, 0.6),
      0 0 0 0 rgba(230, 209, 160, 0.4),
      0 6px 14px rgba(0, 0, 0, 0.45);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(240, 232, 214, 0.3),
      inset 0 -8px 14px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(20, 17, 12, 0.6),
      0 0 0 6px rgba(230, 209, 160, 0.14),
      0 6px 14px rgba(0, 0, 0, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-land-build-btn { animation: none; }
}

/* ---- 32 - DETAILS - core numbers legible, CTA alive, tiles differentiated ---- */
.modal.clean-world-modal .monster-detail .stat-chips span {
  color: #f2e6d2;
  background: #3a3029;
  border: 1px solid rgba(212, 175, 92, 0.24);
  font-weight: 700;
}
/* Blocked rank CTA: an oxblood-threaded notice, not a near-invisible ghost. */
.modal.clean-world-modal .monster-detail .mpx-condense-open:disabled {
  color: rgba(242, 236, 224, 0.78) !important;
  background: rgba(240, 232, 214, 0.05);
  border: 1px solid rgba(240, 232, 214, 0.22);
  box-shadow: inset 3px 0 0 rgba(135, 32, 25, 0.7);
}
/* Target row: outlined ghosts with gold serif ordinals. Current-state row:
   filled tiles with the gold thread. Same data, two clearly different voices. */
.modal.clean-world-modal .monster-detail .mpx-stage-dot {
  background: transparent;
  border: 1px dashed rgba(240, 232, 214, 0.3);
}
.modal.clean-world-modal .monster-detail .mpx-stage-dot b {
  font-family: var(--mw-serif);
  font-size: 1.05rem;
  color: var(--mw-gold-pale) !important;
}
.modal.clean-world-modal .monster-detail .mpx-progression-stats span {
  background: rgba(240, 232, 214, 0.08);
  border: 1px solid rgba(240, 232, 214, 0.16);
  box-shadow: inset 3px 0 0 rgba(168, 128, 31, 0.6);
}
/* Bottom of the dossier: hold the scrim so attack sub-strips stay readable. */
.modal.clean-world-modal .monster-detail {
  background-image:
    linear-gradient(90deg,
      rgba(23, 19, 15, 0.9) 0%,
      rgba(23, 19, 15, 0.76) 22%,
      rgba(23, 19, 15, 0.96) 50%,
      rgba(23, 19, 15, 0.76) 78%,
      rgba(23, 19, 15, 0.9) 100%),
    linear-gradient(180deg, rgba(23, 19, 15, 0.55), rgba(23, 19, 15, 0.94) 82%, rgba(23, 19, 15, 0.96)),
    var(--detail-bg-left),
    var(--detail-bg-right);
}

/* ---- 33 - BOX - bigger specimens, star on the well, chip scale --------------- */
.modal.clean-world-modal .box-card .box-row {
  position: relative;
}
.modal.clean-world-modal .box-card .box-row img {
  width: 68px;
  height: 68px;
  padding: 5px;
}
.modal.clean-world-modal .box-card .box-fav-btn {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  min-height: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--mw-gold-deep);
  background: rgba(253, 251, 244, 0.92);
  border: 1px solid rgba(111, 82, 16, 0.4);
  box-shadow: 0 1px 2px rgba(20, 17, 12, 0.2);
  font-size: 0.9rem;
  line-height: 1;
}
.modal.clean-world-modal .box-card .box-fav-btn.active {
  color: #3f2f08;
  background: var(--mw-gold-pale);
}
.party-meta-chips--box .pm-chip {
  min-height: 18px;
  padding: 1px 6px;
  font-size: 0.62rem;
}
.party-meta-chips--box .pm-chip b { font-size: 0.56rem; }

/* ---- 34 - RANK PILLS - the two numerals get a ruled divider ------------------ */
.modal.clean-world-modal .party-modal .power-badge.power-badge em,
.modal.clean-world-modal .box-card .power-badge.power-badge em,
.modal.clean-world-modal .bag-card .power-badge.power-badge em {
  margin-left: 5px;
  padding-left: 6px;
  border-left: 1px solid rgba(44, 38, 28, 0.24);
  font-weight: 700;
}
.modal.clean-world-modal .monster-detail .power-badge em {
  margin-left: 5px;
  padding-left: 6px;
  border-left: 1px solid rgba(240, 232, 214, 0.3);
  font-weight: 700;
}

/* ---- 35 - PARTY - warm wells, real EXP measure, ruled body ------------------- */
.modal.clean-world-modal .party-modal .party-item img {
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.4), transparent 70%),
    #f4efe1;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.10);
  object-position: 50% 100%;
}
.modal.clean-world-modal .party-modal .mini-exp {
  height: 3px;
  margin-top: 5px;
  background: #e6e1d4;
  box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.14), 0 1px 0 rgba(20, 17, 12, 0.16);
}
.modal.clean-world-modal.party-full-modal .party-list {
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(44, 38, 28, 0.04) 27px 28px);
}

/* ---- 36 - SEALS - warm relief, hand-struck stamps, breathing sub-folio ------- */
.modal.clean-world-modal .seal-modal .seal-card.locked .seal-medal {
  filter: grayscale(1) sepia(0.25) contrast(0.46) brightness(1.16);
  opacity: 0.95;
  -webkit-filter: grayscale(1) sepia(0.25) contrast(0.46) brightness(1.16);
}
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 1) .seal-state { transform: rotate(-6deg) translateX(-2px); }
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 2) .seal-state { transform: rotate(-2deg) translateX(3px); }
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 3) .seal-state { transform: rotate(-5deg) translateX(1px); }
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 4) .seal-state { transform: rotate(-3deg) translateX(-3px); }
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 5) .seal-state { transform: rotate(-7deg) translateX(2px); }
.modal.clean-world-modal .seal-modal .seal-card:nth-child(6n + 6) .seal-state { transform: rotate(-4deg) translateX(-1px); }
.modal.clean-world-modal .modal-card.seal-modal .prestige-seal-heading {
  margin-top: 28px;
  padding-top: 12px;
  padding-bottom: 0;
  background: linear-gradient(var(--mw-hair), var(--mw-hair)) 0 0 / 100% 1px no-repeat;
}

/* ---- 37 - ATLAS - matted unmapped plates, gold HERE pin, live Players -------- */
.atlas-thumb {
  box-shadow: inset 0 0 0 2px rgba(253, 251, 244, 0.85), inset 0 0 0 3px rgba(44, 38, 28, 0.3), 0 1px 2px rgba(44, 38, 28, 0.14);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.here {
  border-color: rgba(111, 82, 16, 0.6);
  box-shadow: inset 3px 0 0 var(--mw-gold), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
}
.modal.clean-world-modal .atlas-modal .atlas-chip.here .atlas-chip-mark {
  color: #3f2f08 !important;
  background: var(--mw-gold-pale);
  border-radius: 3px;
  padding: 1px 6px;
}
.atlas-legend .atlas-key--here::before { background: var(--mw-gold-pale); border-color: var(--mw-gold); }
/* Deliberately-unavailable reads dashed, not broken. */
.modal.clean-world-modal .modal-card.party-modal button:disabled,
.modal.clean-world-modal .modal-card.seal-modal button:disabled,
.modal.clean-world-modal .modal-card.atlas-modal button:disabled,
.modal.clean-world-modal .modal-card.box-card button:disabled,
.modal.clean-world-modal .shop-card.bag-card button:disabled,
.modal.clean-world-modal .shop-card.land-context-card button:disabled {
  color: var(--mw-mute-strong);
  border-style: dashed;
  border-color: rgba(20, 17, 12, 0.3);
}

/* ---- 38 - FARM - a measure that exists at 0%, ranked worker controls --------- */
.modal.clean-world-modal .land-context-card .land-skill-progress-bar {
  border: 1px solid rgba(20, 17, 12, 0.26);
  background:
    linear-gradient(90deg, transparent calc(25% - 1px), rgba(20, 17, 12, 0.14) calc(25% - 1px) 25%, transparent 25%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(20, 17, 12, 0.14) calc(50% - 1px) 50%, transparent 50%),
    linear-gradient(90deg, transparent calc(75% - 1px), rgba(20, 17, 12, 0.14) calc(75% - 1px) 75%, transparent 75%),
    #e6e1d4;
}
.modal.clean-world-modal .land-context-card .land-farm-worker-actions button:first-child:not(:disabled) {
  color: #f6f2e7;
  background: linear-gradient(180deg, #2a231a, var(--mw-ink));
  border-color: var(--mw-ink);
}
.modal.clean-world-modal .shop-card.land-context-card {
  background-image:
    linear-gradient(rgba(253, 251, 244, 0.93), rgba(253, 251, 244, 0.93)),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(44, 38, 28, 0.05) 27px 28px),
    var(--mw-watermark),
    linear-gradient(179deg, #fdfbf4 0%, #f3efe2 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%, cover, 100% 100%;
  background-position: 0 0, 0 0, 50% 12%, 0 0;
  background-blend-mode: normal, normal, multiply, normal;
}

/* ---- 39 - RAIL - one numeral voice, flat coin, parchment rarity tints -------- */
html:not(.is-touch) .side-panel #seal { color: var(--mw-felt-ink); font-size: 0.9rem; }
html:not(.is-touch) .side-panel .status-grid strong { color: var(--mw-felt-ink); }
html:not(.is-touch) .side-panel #money { color: var(--mw-gold-pale); }
html:not(.is-touch) .side-panel #money::before {
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle at 38% 30%, #f7e7c2 0 22%, #c9a44d 60%, #8a6a1f 100%);
  box-shadow: inset 0 0 0 1px rgba(111, 82, 16, 0.75);
}
html:not(.is-touch) .side-panel .party-item .rare-name { color: #8fc9b8; font-weight: 600; }
html:not(.is-touch) .side-panel .party-item .ultra-name { color: #b6a8d8; font-weight: 600; }
html:not(.is-touch) .side-panel .party-item .legendary-name { color: #dcc08a; font-weight: 600; }

/* Box collection rows: explicit plate layout (the absolute favourite star
   removed a grid track, so the old implicit template collapsed). */
.modal.clean-world-modal .box-card .box-row--collection {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-areas: "img info" "actions actions";
  gap: 8px 12px;
  align-content: start;
  align-items: start;
}
.modal.clean-world-modal .box-card .box-row--collection > img {
  grid-area: img;
  width: 80px;
  height: 80px;
  margin: 0;
}
.modal.clean-world-modal .box-card .box-row--collection .box-info {
  grid-area: info;
  min-width: 0;
}
.modal.clean-world-modal .box-card .box-row--collection .box-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.modal.clean-world-modal .box-card .box-row--collection .box-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.modal.clean-world-modal .box-card .box-row--collection .box-name-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Box collection rows, equalized: names wrap instead of truncating, action
   pair sits side by side pinned to the plate bottom, plates stretch level. */
.modal.clean-world-modal .box-list { align-items: stretch; }
.modal.clean-world-modal .box-card .box-row--collection {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}
.modal.clean-world-modal .box-card .box-row--collection .box-name-line {
  flex-wrap: wrap;
  white-space: normal;
}
.modal.clean-world-modal .box-card .box-row--collection .box-name-line strong {
  overflow: visible;
}
.modal.clean-world-modal .box-card .box-row--collection .box-actions button {
  flex: 1 1 40%;
}

/* ==========================================================================
 * LEDGER WORLD MENUS · ITERATION 4 (judge pass 9.2 -> surgical finish)
 * ========================================================================== */

/* ---- 40 - ATLAS: HERE is the one INVERTED chip (fixes gold collision) -------- */
.modal.clean-world-modal .atlas-modal .atlas-chip.here .atlas-chip-mark {
  color: #2c261c !important;
  background: #c9a227;
  border: 0;
  border-radius: 3px;
  padding: 2px 7px;
}
.modal.clean-world-modal .atlas-modal .atlas-leg {
  color: var(--mw-gold-deep);
  background: transparent;
  border: 1px solid rgba(111, 82, 16, 0.5);
}
.atlas-legend .atlas-key--here::before {
  background: #c9a227;
  border-color: #c9a227;
  border-radius: 2px;
}
.atlas-legend .atlas-key--ultra::before {
  background: transparent;
  border-color: var(--mw-gold);
}
/* Terra-incognita compass: a few points more ink so it registers. */
.atlas-thumb:empty::after {
  border-color: rgba(44, 38, 28, 0.5);
  box-shadow: inset 0 0 0 3px #ece5d4, inset 0 0 0 4.5px rgba(44, 38, 28, 0.44);
}

/* ---- 41 - PARTY: specimen wells with normalized cap height ------------------- */
.modal.clean-world-modal .party-modal .party-specimen-well {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(82px, 8vw, 116px);
  height: clamp(82px, 8vw, 116px);
  padding: 7px;
  overflow: hidden;
  border-radius: 6px;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.4), transparent 70%),
    #f4efe1;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.10);
}
.modal.clean-world-modal .party-modal .party-specimen-well img,
.modal.clean-world-modal.party-full-modal .party-modal .party-specimen-well img {
  width: auto;
  height: 78%;
  max-width: 94%;
  object-fit: contain;
  object-position: 50% 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Footer joins the system: ruled top edge, ledger-sized Close. */
.modal.clean-world-modal .party-modal .dialogue-actions {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--mw-hair);
}
.modal.clean-world-modal .party-modal .dialogue-actions button {
  min-height: 34px;
  padding: 6px 18px;
  border-radius: 4px;
  font-size: 0.86rem;
}

/* ---- 42 - SEALS: one disc discipline for six medals -------------------------- */
.modal.clean-world-modal .seal-modal .seal-card { overflow: hidden; }
.modal.clean-world-modal .seal-modal .seal-card .seal-medal {
  display: block;
  width: 74%;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
}
.modal.clean-world-modal .seal-modal .seal-gallery:first-of-type .seal-card:nth-child(2) .seal-medal,
.modal.clean-world-modal .seal-modal .seal-gallery:first-of-type .seal-card:nth-child(5) .seal-medal {
  transform: scale(1.13);
}
.modal.clean-world-modal .seal-modal .seal-gallery:first-of-type .seal-card:nth-child(6) .seal-medal {
  transform: scale(0.92);
}

/* ---- 43 - SCROLLBARS: no steppers anywhere, felt thin on the dark layouts ---- */
.modal.clean-world-modal.party-full-modal {
  scrollbar-width: thin;
  scrollbar-color: #4a3f31 transparent;
}
.modal.clean-world-modal.party-full-modal::-webkit-scrollbar { width: 8px; }
.modal.clean-world-modal.party-full-modal::-webkit-scrollbar-thumb { background: #4a3f31; border-radius: 4px; }
.modal.clean-world-modal.party-full-modal::-webkit-scrollbar-track { background: transparent; }
.modal.clean-world-modal.party-full-modal::-webkit-scrollbar-button,
.modal.clean-world-modal .monster-detail::-webkit-scrollbar-button,
.modal.clean-world-modal .modal-card.party-modal::-webkit-scrollbar-button,
.modal.clean-world-modal .modal-card.seal-modal::-webkit-scrollbar-button,
.modal.clean-world-modal .modal-card.atlas-modal::-webkit-scrollbar-button,
.modal.clean-world-modal .modal-card.box-card::-webkit-scrollbar-button,
.modal.clean-world-modal .shop-card.bag-card::-webkit-scrollbar-button,
.modal.clean-world-modal .shop-card.land-context-card::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ---- 44 - BOX: fixed chip rhythm + warm wells -------------------------------- */
.party-meta-chips--box {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.party-meta-chips--box .pm-line {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}
.party-meta-chips--box .pm-line .pm-chip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.modal.clean-world-modal .box-card .box-row--collection > img {
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.4), transparent 70%),
    #f4efe1;
}

/* ---- 45 - FARM: the crop line becomes ruled columns -------------------------- */
.land-seed-choice .seed-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin-top: 3px;
  min-width: 0;
  width: 100%;
}
.land-seed-choice .seed-col {
  padding: 0 9px;
  border-right: 1px solid rgba(20, 17, 12, 0.16);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.land-seed-choice .seed-col:first-child { padding-left: 0; }
.land-seed-choice .seed-col:last-child { border-right: 0; }
.land-seed-choice .seed-col--gate {
  margin-left: auto;
  padding-right: 0;
  border-right: 0;
  color: rgba(135, 32, 25, 0.85);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal.clean-world-modal .land-context-card .land-seed-choice > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- 46 - WORLD CORNER: one disc discipline ---------------------------------- */
.desktop-land-action-btn {
  width: 62px;
  height: 62px;
}
.desktop-land-build-btn {
  width: 62px;
  height: 62px;
  right: 16px;
  bottom: 94px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* ---- 47 - SPECIMEN SCALE NORMALIZATION (alpha-bounds driven) ----------------- */
.modal.clean-world-modal .party-modal .party-specimen-well img,
.modal.clean-world-modal.party-full-modal .party-modal .party-specimen-well img {
  transform:
    translate(calc(var(--specimen-dx, 0) * 1%), calc(var(--specimen-seat, 0) * 1%))
    scale(var(--specimen-scale, 1));
  transform-origin: 50% 100%;
}
/* Box wells share the component (the well moved from the img to a wrapper). */
.modal.clean-world-modal .box-card .box-row--collection .party-specimen-well {
  grid-area: img;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 80px;
  height: 80px;
  padding: 6px;
  overflow: hidden;
  border-radius: 5px;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.4), transparent 70%),
    #f4efe1;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.14), inset 0 2px 6px rgba(44, 38, 28, 0.08);
}
.modal.clean-world-modal .box-card .box-row--collection .party-specimen-well img {
  width: auto;
  height: 76%;
  max-width: 94%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  object-fit: contain;
  object-position: 50% 100%;
  transform:
    translate(calc(var(--specimen-dx, 0) * 1%), calc(var(--specimen-seat, 0) * 1%))
    scale(var(--specimen-scale, 1));
  transform-origin: 50% 100%;
}
/* Details scroll channel: fully transparent track on the dark layout. */
.modal.clean-world-modal.party-full-modal::-webkit-scrollbar-track,
.modal.clean-world-modal .monster-detail::-webkit-scrollbar-track {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ==========================================================================
 * MOBILE LANDSCAPE - BOX / PARTY / ATLAS
 *
 * On a 844x390 phone the Ledger skin and the touch layout disagreed:
 *  - Ledger's "one scroll context per leaf" set the INNER scrollers to
 *    overflow:visible so the whole card scrolls. Landscape then clamps the
 *    card to overflow:hidden/height:100dvh - so the Atlas had 25,000px of
 *    regions and NO scroll context at all (the Fly list was unreachable).
 *  - The Box specimen well stayed a fixed 80x80 while the landscape grid
 *    track shrank to ~41px, so sprites painted over the name and pills.
 *  - Box chrome ate 190px of 390px, leaving a 191px list.
 *
 * The design rule for this block: vertical space is the scarce axis, so
 * every card has a FIXED internal rhythm (name / seals / meta / power all
 * get reserved slots). Cards in a row then share one baseline instead of
 * dumping their leftover into a variable hole above the buttons, and the
 * grid pitch is predictable enough to land the fold in a gutter.
 *
 * Deliberately last in the file: it needs the final word over both the
 * Ledger component layer and the older landscape layer.
 * ========================================================================== */

@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {

  /* ---- 0 - shared chrome ------------------------------------------------- */
  /* The close cross was the loudest object in the product (48x55 white plate,
     hard black X) and hung down into the controls row, which is what made the
     Box tally and the atlas toolbar crowd it. */
  html.is-touch .modal.world-map-modal .world-modal-close,
  html.is-touch .modal.party-full-modal .world-modal-close {
    top: max(11px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    border: 1px solid rgba(111, 82, 16, 0.35);
    color: #6b5a44;
    min-height: 0;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
  }

  /* ---- A - ATLAS: a picker, not a document -------------------------------- */
  /* The blurb and the legend were 33px of permanent chrome explaining states
     the cards already spell out in words. Gone, so the destinations start
     ~70px down instead of ~137px - two visible rows become four. */
  html.is-touch .modal.world-map-modal .atlas-modal > p,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-legend {
    display: none;
  }

  html.is-touch .modal.world-map-modal .atlas-modal > h2 {
    overflow: visible;
    max-height: 32px;
    margin: 0 46px 6px 0;
    padding-left: 4px;
    font-size: clamp(0.8rem, 3.9dvh, 1.04rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-toolbar {
    max-height: none;
    margin: 0 46px 5px 0;
  }

  /* "Locate a monster:" labelled a control whose value reads "- Show every
     region -", and "Search maps:" labelled a field already placeholdered
     "Map name". Both labels burned ~110px of an 844px bar saying nothing. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-find,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-map-search {
    flex: 0 1 auto;
    max-width: 224px;
    font-size: 0;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-find select {
    padding-right: 22px;
    text-overflow: ellipsis;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-find select,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-map-search input {
    font-size: clamp(0.52rem, 2.25dvh, 0.66rem);
  }

  /* Search is the whole point of a 200-map screen, so it must NOT scroll
     away - the collapse now takes the title only. */
  html.is-touch .modal.world-map-modal .atlas-modal.atlas-scrolled .atlas-toolbar {
    max-height: 34px;
    margin-top: 0;
    margin-bottom: 5px;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Card is the light figure, field is the tint - same polarity as the Box. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chips {
    padding: 5px;
    border-radius: 6px;
    background: #f3eee0;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip {
    background: #fdfbf4;
    border: 1px solid #dbd2bc;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked {
    background: #f7f3e8;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 4px;
  }

  /* The sticky region heading was transparent: outgoing rows slid visibly
     through the label and its rule. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-region-title {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 7px 4px 6px;
    /* The title itself is opaque. An upward opaque shadow would cover the
       preceding region's final map row before this heading becomes sticky. */
    min-height: 34px;
    background: #fdfbf4;
    background-clip: padding-box;
    box-shadow:
      0 1px 0 var(--mw-rule, rgba(44, 38, 28, 0.24)),
      0 2px 6px rgba(44, 38, 28, 0.07);
  }

  /* Rows dissolve into the paper as they pass under the heading rather than
     being guillotined by it. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-region-title::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 9px;
    pointer-events: none;
    background: linear-gradient(var(--mw-leaf, #fdfbf4), rgba(253, 251, 244, 0));
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-region-title {
    position: sticky;
  }

  /* The gap under the heading now lives inside the scrolling body, below the
     opaque plate, so nothing can thread between the toolbar and the rule. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chips {
    margin-top: 5px;
  }

  /* Compact destination chips: the desktop plate (full-width 7:2.6 painting
     over two text lines) is ~180px tall, so a short screen showed barely one
     row. Landscape turns the painting into a left-hand tile - same ledger
     language, ~5x more destinations reachable per screen. */
  html.is-touch .modal.world-map-modal .atlas-chips {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  /* At 740 a quarter-width card left ~100px for a three-token status row, so
     "HERE" sheared to "HERI" on the player's own location. Three columns
     below 800 - which also matches the Box's density there. */
  @media (max-width: 800px) {
    /* 3-up, not 4: a quarter-width card at 740 leaves ~120px of copy, and
       WORLD + ULTRA + VISITED needs ~135. Four columns only looked right while
       the third tag was being clipped off. */
    html.is-touch .modal.world-map-modal .atlas-chips {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
    }

    html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip {
      --atlas-tile: clamp(30px, 10dvh, 38px);
      column-gap: 5px;
      padding: 4px 5px;
    }
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip {
    --atlas-tile: clamp(36px, 11.5dvh, 46px);
    display: grid;
    grid-template-columns: var(--atlas-tile) minmax(0, 1fr);
    /* Explicit rows are load-bearing: the tile spans "1 / -1", and with an
       implicit-only grid -1 resolves to line 1, so the tile occupied a single
       row and the copy stacked BELOW it - chips came out 89px instead of 55. */
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    min-height: 0;
    column-gap: 7px;
    row-gap: 2px;
    padding: 5px 7px;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-thumb {
    grid-row: 1 / -1;
    grid-column: 1;
    width: var(--atlas-tile);
    height: var(--atlas-tile);
    margin: 0;
    aspect-ratio: auto;
    border-radius: 3px;
  }

  /* Everything that is not the tile stacks in the copy column - covers the
     name, meta, "Lives here" seal, tracker and player dots without naming
     each one (showAtlas appends conditionally). */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip > :not(.atlas-thumb) {
    grid-column: 2;
    min-width: 0;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-name {
    display: block;
    overflow: hidden;
    min-width: 0;
  }

  /* Group prefix sets as a caption so the leaf name - the only part that
     identifies the destination - gets the width and the weight. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-group {
    display: block;
    overflow: hidden;
    color: var(--mw-mute-strong, rgba(44, 38, 28, 0.66));
    font-size: clamp(0.4rem, 1.7dvh, 0.5rem);
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.1;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Reserving the caption BAND was not enough - an uncaptioned card centred
     its single line, so three titles in a row sat 7px above the fourth. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-name {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 30px;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-leaf {
    display: block;
    overflow: hidden;
    color: var(--mw-ink, #2c261c);
    font-size: clamp(0.58rem, 2.45dvh, 0.74rem);
    font-weight: 800;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "WORLD" was eliding to "W..." whenever a chip also carried Ultra and a
     state mark. The tags are short words - let the row wrap instead, which
     costs nothing because the tile is taller than the copy stack anyway. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    gap: 3px 5px;
    min-width: 0;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-tag {
    flex: 0 0 auto;
    max-width: none;
    white-space: nowrap;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-leg {
    flex: 0 0 auto;
    margin: 0;
    padding: 1px 4px;
    font-size: clamp(0.4rem, 1.7dvh, 0.5rem);
    letter-spacing: 0.04em;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-mark {
    flex: 0 0 auto;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-meta {
    gap: 4px;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-player-fly {
    min-height: 28px;
    border: 1px solid var(--mw-rule-strong, rgba(44, 38, 28, 0.34));
    border-style: solid;
    background: #fdfbf4;
    color: #3a342a;
    font-weight: 700;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-player-fly:disabled {
    border-style: solid;
    opacity: 0.45;
  }

  /* Colour marks what you CAN do. Twelve saturated red LOCKED words per
     screen pulled the eye to every place the player cannot go. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked {
    opacity: 1;
  }

  /* LOCKED was the only bare text in a row of pills, so every locked card
     ended ragged. Same container as its neighbours, quietest fill. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-mark {
    color: #5a574f !important;
    background: rgba(44, 38, 28, 0.06);
    border: 1px solid rgba(44, 38, 28, 0.12);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 700;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-leaf {
    color: #4a473f;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-group,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-tag {
    color: #5a574f;
  }

  /* An unmapped place keeps its SLOT - the rail is what makes a column of 24
     destinations scannable - but loses the repeated compass glyph. It reads as
     a debossed blank in the paper instead of 199 identical thumbnails. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-thumb:empty {
    background: #efe9db;
    border-color: rgba(44, 38, 28, 0.14);
    box-shadow: inset 0 1px 2px rgba(20, 17, 12, 0.09);
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-thumb:empty::after {
    width: 9px;
    height: 9px;
    border-color: rgba(44, 38, 28, 0.2);
    box-shadow: none;
    background: transparent;
  }

  /* The one thing you came here to do gets the only filled mark. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.here .atlas-chip-mark,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.been .atlas-chip-mark,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-mark,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip-tag,
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-leg {
    border-radius: 999px !important;
    /* Sized so WORLD + ULTRA + VISITED - the widest combination - stays on one
       line in a quarter-width card. Wrapping is kept as the safety net, but it
       should never actually trigger, because a wrapped card is a taller card
       and that makes the whole row ragged. */
    padding: 1px 5px !important;
    font-size: clamp(0.38rem, 1.6dvh, 0.47rem) !important;
    letter-spacing: 0.03em !important;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.fly .atlas-chip-mark {
    color: #123f33 !important;
    background: var(--mw-verd-wash, rgba(23, 97, 77, 0.14));
    border: 1px solid rgba(23, 97, 77, 0.45);
    border-radius: 3px;
    padding: 1px 6px;
    font-weight: 800;
  }

  /* With the filter on, locked places and any region left empty by it drop
     out, so what remains is only what you can actually fly to. */
  html.is-touch .modal.world-map-modal .atlas-modal.reachable-only .atlas-chip.locked {
    display: none;
  }

  html.is-touch .modal.world-map-modal .atlas-modal.reachable-only .atlas-region:not(:has(.atlas-chip:not(.locked))) {
    display: none;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-reachable {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 28px;
    border: 1px solid var(--mw-rule-strong, rgba(44, 38, 28, 0.34));
    background: #fdfbf4;
    color: #3a342a;
    font-weight: 700;
    white-space: nowrap;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-reachable em {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    color: var(--mw-mute-strong, rgba(44, 38, 28, 0.66));
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-reachable.active {
    color: #123f33;
    background: var(--mw-verd-wash, rgba(23, 97, 77, 0.14));
    border-color: rgba(23, 97, 77, 0.5);
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-reachable.active em {
    color: #1c6b55;
  }

  /* ---- A1/A2 - four controls, four jobs, four looks -------------------
   * Select, toggle, button and text field were the same cream rounded box at
   * the same height, so nothing said which one types and which one toggles -
   * and together they filled only half the row. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-toolbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fdfbf4;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-map-search {
    flex: 1 1 auto;
    max-width: none;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-map-search input {
    width: 100%;
    background: #fffefb;
    box-shadow: inset 0 1px 2px rgba(20, 17, 12, 0.08);
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-find {
    flex: 0 0 auto;
    max-width: 190px;
  }

  /* ---- A3 - status and taxonomy are different axes -------------------- */
  /* BESUCHT is a record, not a go-button: muted ink, no fly green. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.been .atlas-chip-mark {
    padding: 1px 6px;
    border: 1px solid rgba(70, 62, 48, 0.4);
    border-radius: 3px;
    background: rgba(70, 62, 48, 0.08);
    color: #5a5245 !important;
    font-weight: 700;
  }

  /* ---- A4 - undiscovered paper, not a dead control -------------------- */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-leaf {
    color: rgba(20, 17, 12, 0.72) !important;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-chip-mark {
    color: #5f5445 !important;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-chip.locked .atlas-thumb:empty {
    background:
      repeating-linear-gradient(45deg, rgba(20, 17, 12, 0.035) 0 2px, transparent 2px 8px),
      #efe9db;
    box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.05);
  }

  /* ---- A6 - one plate grade, so the thumbnails read as an atlas ------- */
  /* The hatch belongs to the EMPTY tile only; it was painting a grey mat
     around every loaded thumbnail, which made visited maps read half-locked. */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-thumb {
    position: relative;
    overflow: hidden;
    background: #efe9db;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: inherit;
    object-fit: cover;
    box-shadow:
      inset 0 0 0 1px rgba(253, 251, 244, 0.8),
      inset 0 0 0 2px rgba(44, 38, 28, 0.28);
    filter: sepia(0.32) saturate(0.78) contrast(1.05);
  }

  /* ---- A8 - no OS scrollbar in a ledger ------------------------------- */
  html.is-touch .modal.world-map-modal .atlas-modal .atlas-scroll {
    padding-inline: 4px;
    scrollbar-width: none;
  }

  html.is-touch .modal.world-map-modal .atlas-modal .atlas-scroll::-webkit-scrollbar {
    display: none;
  }

  /* ======================================================================
   * B - THE SPECIMEN CASE
   *
   * The Box was a spreadsheet about monsters: the creature was the smallest
   * object on the card and the loudest was a gold capsule printing a species
   * constant. This rebuilds the row as a mounted specimen - art is the tile,
   * element is the only hue, rarity is HOW the specimen is mounted, and the
   * filter index rotates onto the vertical axis (width is abundant, height is
   * scarce), which deletes the never-collapsing header structurally instead of
   * animating around it: 118px of permanent chrome becomes ~43px.
   *
   * CONTAINER LAW - one sentence, enforced everywhere below:
   *   6px radius  = you can press it        (the verb)
   *   2px radius  = it was printed here     (plates, rules, mounts)
   *   50% radius  = it is a mark ON the art (favourite disc, holo pip, type dot)
   * ====================================================================== */

  /* ---- B0 - element palette: the ONE hue budget on the page --------------
   * Warm-shifted so every swatch survives cream. The grade ladder deliberately
   * carries no cool hue at all - green belongs to the Atlas, and the indigo
   * that used to tint ultra-rare names is deleted from this screen entirely. */
  html.is-touch .modal.world-map-modal .box-row--collection {
    --type: #6b6154;
    --type2: var(--type);
  }
  html.is-touch .modal.world-map-modal [data-type="flame"] { --type: #a8391c; }
  html.is-touch .modal.world-map-modal [data-type="water"] { --type: #2c6a86; }
  html.is-touch .modal.world-map-modal [data-type="leaf"] { --type: #3d7a2a; }
  html.is-touch .modal.world-map-modal [data-type="frost"] { --type: #4f7d92; }
  html.is-touch .modal.world-map-modal [data-type="stone"] { --type: #7a6449; }
  html.is-touch .modal.world-map-modal [data-type="shadow"] { --type: #55465f; }
  html.is-touch .modal.world-map-modal [data-type="light"] { --type: #9a7b1f; }
  html.is-touch .modal.world-map-modal [data-type="bug"] { --type: #6d7f2a; }
  html.is-touch .modal.world-map-modal [data-type="normal"] { --type: #6b6154; }
  html.is-touch .modal.world-map-modal [data-type="metal"] { --type: #5c6670; }
  html.is-touch .modal.world-map-modal [data-type="spirit"] { --type: #6b4a6e; }
  html.is-touch .modal.world-map-modal [data-type="dinosaurus"] { --type: #6a4b2a; }

  /* Second type, so a dual-typed dot stops lying about half its identity. */
  html.is-touch .modal.world-map-modal [data-type2="flame"] { --type2: #a8391c; }
  html.is-touch .modal.world-map-modal [data-type2="water"] { --type2: #2c6a86; }
  html.is-touch .modal.world-map-modal [data-type2="leaf"] { --type2: #3d7a2a; }
  html.is-touch .modal.world-map-modal [data-type2="frost"] { --type2: #4f7d92; }
  html.is-touch .modal.world-map-modal [data-type2="stone"] { --type2: #7a6449; }
  html.is-touch .modal.world-map-modal [data-type2="shadow"] { --type2: #55465f; }
  html.is-touch .modal.world-map-modal [data-type2="light"] { --type2: #9a7b1f; }
  html.is-touch .modal.world-map-modal [data-type2="bug"] { --type2: #6d7f2a; }
  html.is-touch .modal.world-map-modal [data-type2="normal"] { --type2: #6b6154; }
  html.is-touch .modal.world-map-modal [data-type2="metal"] { --type2: #5c6670; }
  html.is-touch .modal.world-map-modal [data-type2="spirit"] { --type2: #6b4a6e; }
  html.is-touch .modal.world-map-modal [data-type2="dinosaurus"] { --type2: #6a4b2a; }

  /* ---- B1 - shell: masthead bar + [rail | case] ------------------------- */
  html.is-touch .modal.world-map-modal .box-card--manager > p { display: none; }

  /* An absolutely-positioned title against a fixed padding reserve can never
     win against a variable string - German "Monster-Box" overran every reserve
     tried. Two real grid columns make the collision impossible by
     construction, which is the lesson the verb column already taught. */
  html.is-touch .modal.world-map-modal .box-card--scroll {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "title tools"
      "body  body";
    align-items: stretch;
    padding: max(7px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
             6px max(8px, env(safe-area-inset-left));
  }

  /* The title stops owning a row of its own and joins the controls. Nothing
     collapses on scroll any more, so there is no yank and no hysteresis. */
  html.is-touch .modal.world-map-modal .box-card--manager > h2 {
    grid-area: title;
    position: static;
    align-self: center;
    white-space: nowrap;
    max-height: none;
    margin: 0;
    padding: 0 14px 3px 4px;
    background: linear-gradient(#a8801f, #a8801f) 4px 100% / 13px 2px no-repeat;
    font-size: clamp(0.86rem, 4.1dvh, 1.08rem);
    line-height: 1.15;
  }

  html.is-touch .modal.world-map-modal .box-card--manager.box-scrolled > h2 {
    max-height: none;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
  }

  html.is-touch .modal.world-map-modal .box-toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    grid-area: tools;
    padding: 0 0 5px;
    min-height: 56px;
    border-bottom: 1px solid rgba(20, 17, 12, 0.2);
    box-shadow: 0 3px 5px -4px rgba(20, 17, 12, 0.28);
    background: none;
  }

  html.is-touch .modal.world-map-modal .box-toolbar-main {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  html.is-touch .modal.world-map-modal .box-toolbar-main > label > span { display: none; }

  html.is-touch .modal.world-map-modal .box-search {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 420px;
  }

  html.is-touch .modal.world-map-modal .box-sort { flex: 0 0 auto; }

  html.is-touch .modal.world-map-modal .box-toolbar-main input,
  html.is-touch .modal.world-map-modal .box-toolbar-main select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: clamp(0.6rem, 2.55dvh, 0.7rem);
    line-height: 1;
  }

  html.is-touch .modal.world-map-modal .box-toolbar-main select { width: 118px; }

  /* The value alone read as a filter chip next to the search field. */
  html.is-touch .modal.world-map-modal .box-sort {
    position: relative;
  }

  html.is-touch .modal.world-map-modal .box-sort::before {
    content: "\2195";
    position: absolute;
    left: 9px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: #6b6355;
    font-size: 0.66rem;
    pointer-events: none;
  }

  html.is-touch .modal.world-map-modal .box-toolbar-main .box-sort select {
    padding-left: 24px;
  }

  /* An unfilled ledger field is a prompt in the margin, not a grey label. */
  html.is-touch .modal.world-map-modal .box-toolbar-main input::placeholder {
    color: #6f6d66;
    font-style: normal;
    font-weight: 400;
  }

  /* Carries the one fact that is NOT already on screen. When the party is full
     it states the rule the screen is enforcing - the reason every reserve verb
     is dead, which used to live only in a hover title. */
  html.is-touch .modal.world-map-modal .box-result-count {
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0 64px 0 auto;
    max-width: 46vw;
    color: #5f5445;
    font-size: clamp(0.55rem, 2.35dvh, 0.64rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .modal.world-map-modal .box-result-count.is-blocked {
    padding-left: 7px;
    box-shadow: inset 3px 0 0 #a8801f;
    color: #7a4a1f;
    font-weight: 700;
  }

  html.is-touch .modal.world-map-modal .box-card--manager .box-body {
    grid-area: body;
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: var(--rail-w, 104px) minmax(0, 1fr);
    min-height: 0;
  }

  /* ---- B2 - the index rail ---------------------------------------------
   * Rotating the filter list onto the vertical axis is the whole structural
   * move: it spends abundant width to buy scarce height, and it makes the
   * active filter permanently visible instead of hiding behind a scroll fade. */
  html.is-touch .modal.world-map-modal .box-filter-chips {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 3px 0 8px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 16px;
    background: #f0ebdd;
    border-right: 1px solid rgba(20, 17, 12, 0.2);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0 calc(100% - 14px), transparent 100%);
  }

  html.is-touch .modal.world-map-modal .box-filter-chips::-webkit-scrollbar { display: none; }

  html.is-touch .modal.world-map-modal .box-rail-head {
    position: sticky;
    top: 0;
    z-index: 4;
    flex: 0 0 auto;
    background: #f0ebdd;
    padding: 7px 8px 3px;
    color: #6b6355;
    font-size: clamp(9px, 2.2dvh, 10px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  html.is-touch .modal.world-map-modal .box-rail-head + .box-filter-chip { border-top: 0; }

  /* An index LINE, not a pill - so the rail cannot read as 13 buttons. */
  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(20, 17, 12, 0.07);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #37322a;
    font-size: clamp(0.58rem, 2.45dvh, 0.68rem);
    font-weight: 600;
    text-align: left;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip > span {
    overflow: hidden;
    text-transform: capitalize;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip em {
    flex: 0 0 auto;
    background: none;
    color: #6b6355;
    font-size: clamp(0.48rem, 2.05dvh, 0.56rem);
    font-style: normal;
    font-variant-numeric: tabular-nums;
  }

  /* The ledger's marginal "you are here". */
  html.is-touch .modal.world-map-modal .box-filter-chips {
    scroll-snap-type: y mandatory;
    scroll-padding-block: 44px 44px;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip,
  html.is-touch .modal.world-map-modal .box-rail-head {
    scroll-snap-align: start;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip.active em {
    color: #7a5a12;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip.active {
    background: #fdfbf4;
    box-shadow: inset 3px 0 0 #a8801f;
    color: #14110c;
    font-weight: 700;
  }

  /* Dimmed, never hidden: a filter must not change position between sessions. */
  /* 13 chips x 44px overruns a ~338px rail, and with the scrollbar hidden the
     tail had no affordance. Empty filters step out; the active one always
     stays so the current view can never vanish from its own index. */
  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip[data-count="0"]:not(.active) {
    display: none;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip.is-empty {
    opacity: 1;
    color: #6b6355;
    pointer-events: none;
  }

  html.is-touch .modal.world-map-modal .box-filter-chips > .box-filter-chip.is-empty em {
    color: #6b6355;
    opacity: 0.62;
  }

  /* ---- B3 - the case ---------------------------------------------------- */
  html.is-touch .modal.world-map-modal .box-scroll--monster-box {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 8px 6px 8px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: y proximity;
    scroll-padding-block: 0 8px;
    scrollbar-width: none;
    /* Bottom fade only. The old top ramp rendered the name of the row you had
       just scrolled to at 30-60% alpha - a contrast failure on real content.
       The opaque bar above plus its 4px lip shadow does that job instead. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    scroll-padding-block: 0 16px;
  }

  html.is-touch .modal.world-map-modal .box-scroll--monster-box::-webkit-scrollbar { display: none; }

  html.is-touch .modal.world-map-modal .box-list--monster-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    padding: 0;
  }

  /* ---- B4 - the tile ---------------------------------------------------- */
  html.is-touch .modal.world-map-modal .box-row--collection {
    --tile-h: clamp(118px, 34.5dvh, 158px);
    --cap-h: clamp(48px, 13.6dvh, 58px);
    --plate-h: calc(var(--tile-h) - var(--cap-h) - 1px);
    --plate-base: #f0ebdd;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 76px;
    --cap-gutter: 7px;
    grid-template-rows: var(--plate-h) 1px minmax(0, 1fr);
    grid-template-areas:
      "plate plate"
      "rule  rule"
      "cap   act";
    height: var(--tile-h);
    gap: 0;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    border-radius: 8px;
    scroll-snap-align: start;
    contain: layout paint;
  }

  html.is-touch .modal.world-map-modal .box-row--party { --plate-base: #fdfbf4; }

  /* Every card renders the slot - an instruction in the header with no control
     under it on two thirds of the grid is worse than a quiet control. */
  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button.is-blocked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 1;
    padding-inline: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #5f5a50;
    cursor: default;
    font-weight: 600;
    text-shadow: none;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button.is-blocked::before {
    content: "";
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f5d3a;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button:disabled,
  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button[aria-disabled="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    border: 1px dashed #8a8074;
    background: transparent;
    box-shadow: none;
    color: #6b6355;
    text-shadow: none;
  }

  /* Party membership is a gold spine + a lighter plate ground: two channels,
     neither of them hue-only, and it retires the naked PARTY/RESERVE text. */
  html.is-touch .modal.world-map-modal .box-row--party::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 3px;
    background: #a8801f;
    pointer-events: none;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .box-source-pill { display: none; }

  /* THE PLATE - the display-case glass. */
  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well[role="button"] {
    cursor: pointer;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well:focus-visible {
    outline: 2px solid #b08d2e;
    outline-offset: -3px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well {
    grid-area: plate;
    position: relative;
    align-self: stretch;
    width: auto;
    height: var(--plate-h);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background:
      radial-gradient(118% 96% at 50% 44%, color-mix(in srgb, var(--type) 13%, transparent) 0%, transparent 68%),
      var(--plate-base);
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 5px 6px 4px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: 50% 100%;
    filter: drop-shadow(0 2px 3px rgba(20, 17, 12, 0.22));
  }

  /* The rule between plate and caption: printed, so 0 radius. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-info::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: rgba(20, 17, 12, 0.12);
  }

  /* RARITY MOUNT - photo-corners on the plate. Four ranks, ONE warm ink
     family, zero vertical px and zero DOM. Common is the ABSENCE of a mount,
     so the reserved-but-empty seal band cannot exist. --mc:0 is the kill
     switch if the skeuomorphism ever reads as scrapbook. */
  html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well::after {
    content: "";
    position: absolute;
    inset: 5px;
    pointer-events: none;
    background-repeat: no-repeat;
    background-image:
      linear-gradient(135deg, var(--mount, transparent) 0 50%, transparent 50%),
      linear-gradient(225deg, var(--mount, transparent) 0 50%, transparent 50%),
      linear-gradient(45deg, var(--mount, transparent) 0 50%, transparent 50%),
      linear-gradient(315deg, var(--mount, transparent) 0 50%, transparent 50%);
    background-position: left top, right top, left bottom, right bottom;
    background-size: var(--mc, 0px) var(--mc, 0px);
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--rare) .party-specimen-well {
    box-shadow: inset 0 0 0 1px rgba(90, 72, 44, 0.3);
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--rare) {
    --mount: rgba(90, 72, 44, 0.9);
    --mc: 12px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--ultra) {
    --mount: #6f5210;
    --mc: 17px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--ultra) .party-specimen-well {
    box-shadow: inset 0 0 0 1px rgba(111, 82, 16, 0.55);
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--legendary) {
    --mount: #a8801f;
    --mc: 22px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection:has(.rarity-seal--legendary) .party-specimen-well {
    box-shadow: inset 0 0 0 2px #a8801f, inset 0 0 0 3px rgba(63, 47, 8, 0.45);
  }

  /* The seal words themselves are gone - the mount IS the grade. */
  /* The corner mount carries the grade. A text token was tried here and
     anchored to the caption rather than the plate (.box-info is the positioned
     ancestor), landing on the monster's name - putting it on the plate needs
     the seal moved into the meta row in markup, not another absolute guess. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-seals { display: none; }
  /* Micro marks on the art: holo pip + duplicate glyph, top-left of the plate. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-seal--holo,
  html.is-touch .modal.world-map-modal .box-row--collection .box-seal--black-holo,
  html.is-touch .modal.world-map-modal .box-row--collection .box-seal--duplicate {
    display: none;
  }

  /* A trailing enamel disc after the name - the same slot the mutation mark
     already uses, so the two read as a set and neither can land on a glyph. */
  html.is-touch .modal.world-map-modal .box-row--collection .holo-star,
  html.is-touch .modal.world-map-modal .box-row--collection .black-holo-star {
    display: block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    margin: 0 0 0 -1px;
    overflow: hidden;
    border-radius: 50%;
    background: conic-gradient(from 210deg, #7fd9e8, #b18cf0, #e8c76a, #7fd9e8);
    box-shadow: 0 0 0 1px #b59a4e;
    color: transparent;
    font-size: 0;
    vertical-align: baseline;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .black-holo-star {
    background: radial-gradient(#2a2440 40%, #6b4a8f);
  }

  /* Favourite: a mark ON the art, so 50% radius. Hit area clipped inside the
     tile so it can never steal a tap from a neighbour's verb. */
  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-fav-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(253, 251, 244, 0.72);
    box-shadow: inset 0 0 0 1px rgba(111, 82, 16, 0.45);
    color: #7a5a12;
    font-size: 0.78rem;
    text-shadow: none;
    font-size: 0.66rem;
    line-height: 1;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-fav-btn.active {
    background: #a8801f;
    box-shadow: inset 0 0 0 1px rgba(63, 47, 8, 0.45), 0 1px 1px rgba(20, 17, 12, 0.18);
    color: #3f2f08;
    text-shadow: none;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-fav-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  /* THE CAPTION */
  html.is-touch .modal.world-map-modal .box-row--collection .box-info {
    grid-area: cap;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 0;
    padding: 3px var(--cap-gutter, 7px) 4px 9px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .box-name-line {
    display: flex;
    /* the Ledger layer wraps this row; with the level now a sibling rather
       than part of the name, wrapping threw it onto a second line and pushed
       the stat run out of the caption entirely */
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* locked so a 10px mark cannot grow the line box and drop one card's stat
       row below its row-mates' */
    min-height: 20px;
    max-height: 20px;
  }

  /* Serif proper noun beside a sans tabular figure - the serif/sans rule made
     visible on the one string every player reads first. The name is the only
     element on the tile that is allowed to ellipsise. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-name-line strong {
    display: block;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    color: #14110c;
    font-family: var(--mw-serif, Georgia, "Times New Roman", serif);
    font-size: clamp(0.74rem, 3.3dvh, 0.9rem);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.16;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Rarity is the mount now, so names carry no tint at all. */
  html.is-touch .modal.world-map-modal .box-row--collection .rare-name,
  html.is-touch .modal.world-map-modal .box-row--collection .ultra-name,
  html.is-touch .modal.world-map-modal .box-row--collection .legendary-name {
    color: inherit !important;
    background: none;
    filter: none;
    text-shadow: none;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .mon-lv {
    flex: 0 0 auto;
    margin-left: 2px;
    white-space: nowrap;
    color: #4a453c;
    font-family: inherit;
    font-size: clamp(0.62rem, 2.75dvh, 0.74rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums lining;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .pm-line { display: contents; }

  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-chip {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    text-align: left;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #5a544a;
    font-size: clamp(10px, 2.4dvh, 11px);
    font-weight: 500;
    line-height: 1.2;
  }

  /* Slot and sex leave the caption: the rail names the location and the
     Details sheet carries the rest. */
  html.is-touch .modal.world-map-modal .box-row--collection .pm-line:first-child { display: none; }

  /* The type word is the designated yield token - the split dot carries the
     second type, and this is what buys the German fit at 844. */
  /* The designated yield token. min-width had a floor of 18px, which stopped it
     shrinking at all once the German compounds ("Flamme / Pflanze", "Pflanze /
     Insekt") pushed the run over - so DV lost its digits instead. It is the only
     shrinkable item in the row now, and it ellipsises rather than clipping. */
  /* Needs .party-meta-chips in the chain: the generic chip rule above carries
     one more class, so its flex:0 0 auto was outranking this and the type
     refused to yield - which is why DV kept losing its last digit in German. */
  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-chip--type {
    display: block;
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The denominator is the same constant on all 18 cards - 14px of repetition
     per row, and exactly the slack the German type names need. */
  html.is-touch .modal.world-map-modal .box-row--collection .dv-max.is-default {
    display: none;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips::before {
    content: "";
    flex: 0 0 6px;
    align-self: center;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--type) 0 50%, var(--type2) 50% 100%);
    box-shadow: 0 0 0 1px rgba(20, 17, 12, 0.16);
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-chip:not(.pm-chip--type) + .pm-chip::before,
  html.is-touch .modal.world-map-modal .box-row--collection .pm-line + .pm-line > .pm-chip:first-child:not(.pm-chip--type)::before {
    content: none;
    padding-right: 0;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-chip--type + .pm-chip::before {
    content: none;
    padding-right: 0;
  }

  /* HP is printed only when it is NOT full, in the single red on the page -
     so a hurt monster is the only tile in the case carrying the mark. */
  html.is-touch .modal.world-map-modal .box-row--collection .pm-chip--hp {
    color: #a8391c;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* display:contents keeps pm-line as the PARENT for :last-child, so a lone
     type chip in its own line matched this too and got pushed right by the
     auto margin - which is why the element dot landed at a different x on
     every tile instead of forming a column. Scope it to the DV line. */
  html.is-touch .modal.world-map-modal .box-row--collection .pm-chip {
    margin-left: 0;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .pm-line:last-child > .pm-chip:last-child {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 4px;
    font-variant-numeric: tabular-nums lining;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .pm-chip b {
    margin-right: 3px;
    color: #6f5210;
    font-size: 0.78em;
    font-weight: 700;
    font-variant-caps: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* A species constant, identical on every duplicate, printed as the loudest
     object on the card. Its whole band pays for the art. */
  html.is-touch .modal.world-map-modal .box-row--collection .power-badges,
  html.is-touch .modal.world-map-modal .box-row--collection .mini-hp,
  html.is-touch .modal.world-map-modal .box-row--collection .mini-exp {
    display: none;
  }

  /* THE VERB - the one pressable thing on the tile, so the only 6px radius. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-actions {
    grid-area: act;
    position: static;
    display: flex;
    align-self: center;
    justify-content: flex-end;
    margin-top: -2px;
    width: auto;
    gap: 4px;
    padding: 0 8px 0 0;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .box-actions button[data-box-detail] {
    display: none;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button {
    position: relative;
    /* Narrow enough that the caption column keeps room for a German name, wide
       enough to stay a comfortable target with the pseudo hit area below. */
    min-width: 56px;
    min-height: 44px;
    padding: 0 7px;
    border-radius: 6px;
    border: 1px solid #6f5210;
    background: linear-gradient(#d9b954, #c19f47);
    box-shadow: 0 1px 0 rgba(20, 17, 12, 0.18);
    color: #332604;
    font-size: clamp(0.6rem, 2.55dvh, 0.7rem);
    font-weight: 600;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(20, 17, 12, 0.16);
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-actions button::after {
    content: "";
    position: absolute;
    inset: -8px -4px -6px -4px;
    border-radius: 6px;
  }

  /* A verb nobody can press is not worth 56px of caption on 12 tiles, and the
     party-full reason is already stated once in the tally. Removing it also
     retires a dashed 6px outline that read as a drop target. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-vault-note { display: none; }

  /* ---- B5 - the case reacts to the finger ------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    html.is-touch .modal.world-map-modal .box-row--collection {
      animation: box-tile-in 180ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
      animation-delay: calc(var(--i, 0) * 18ms);
    }

    html.is-touch .modal.world-map-modal .box-row--collection .party-specimen-well img {
      transition: transform 90ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    html.is-touch .modal.world-map-modal .box-row--collection:active .party-specimen-well img {
      transform: translate(calc(var(--specimen-dx, 0) * 1%), calc(var(--specimen-seat, 0) * 1%))
                 scale(calc(var(--specimen-scale, 1) * 1.05));
    }

    html.is-touch .modal.world-map-modal .box-row--collection .box-actions button:active {
      transform: translateY(1px);
      box-shadow: none;
    }
  }

  @keyframes box-tile-in {
    from { opacity: 0; transform: translateY(5px) scale(0.985); }
  }

  html.is-touch .modal.world-map-modal .box-row--collection:focus-visible,
  html.is-touch .modal.world-map-modal .box-filter-chip:focus-visible,
  html.is-touch .modal.world-map-modal .box-row--collection .box-actions button:focus-visible,
  html.is-touch .modal.world-map-modal .box-row--collection .box-fav-btn:focus-visible {
    outline: 2px solid #b08d2e;
    outline-offset: 2px;
  }

  /* An empty case still reads as the case. */
  html.is-touch .modal.world-map-modal .box-scroll--monster-box .empty-note {
    display: grid;
    place-items: center;
    max-width: 340px;
    min-height: 120px;
    margin: 34px auto 0;
    color: #5f584b;
    font-size: clamp(0.6rem, 2.5dvh, 0.74rem);
    text-align: center;
  }

  /* 4-up needs ~200px of tile. At 844 that is 176, which fits English and does
     NOT fit German - "Boulderbru Stufe 21" plus a verb overruns and the name,
     the level and the DV digits all start losing characters. The spec's own
     844 German calculation was exact with zero slack; measured against real
     font metrics it does not hold, so the rung moves to 900. */
  @media (min-width: 800px) {
    html.is-touch .modal.world-map-modal .box-card--manager .box-body { --rail-w: 108px; }
  }

  @media (min-width: 1080px) {
    html.is-touch .modal.world-map-modal .box-list--monster-box {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ---- C - PARTY: six members, two rows, nothing sliced or elided -------- */
  html.is-touch .modal.party-full-modal .party-modal > h2,
  html.is-touch .modal.world-map-modal .box-card--manager > h2,
  html.is-touch .modal.world-map-modal .atlas-modal > h2 {
    width: calc(100% - 46px);
  }

  html.is-touch .modal.party-full-modal .party-modal > h2 {
    overflow: visible;
    max-height: 32px;
    margin: 0 130px 6px 0;
    padding-left: 4px;
    font-size: clamp(0.8rem, 3.9dvh, 1.04rem);
    line-height: 1;
  }

  /* The count was a lone sentence fragment on its own 22px row. It rides the
     title line instead - and Party then reads the way Box does. */
  html.is-touch .modal.party-full-modal .party-modal > p {
    position: absolute;
    top: 12px;
    right: 52px;
    z-index: 2;
    max-width: 120px;
    margin: 0;
    overflow: hidden;
    font-size: clamp(0.48rem, 2dvh, 0.6rem);
    line-height: 1.1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-list {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: 6px;
    min-height: 0;
    padding-bottom: 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-list::-webkit-scrollbar {
    display: none;
  }

  /* min-height:80px + a clipped box was what sliced the controls off the
     bottom of every card; height follows content here instead. */
  html.is-touch .modal.party-full-modal .party-modal .party-item {
    --party-well: clamp(46px, 13.4dvh, 58px);
    display: grid;
    grid-template-columns: var(--party-well) minmax(0, 1fr);
    align-items: start;
    min-height: 0;
    height: auto;
    gap: 4px 8px;
    padding: 6px 7px;
    overflow: visible;
  }

  /* The gold lead treatment was a real border, so it grew the border-box and
     pushed that one card's contents ~7px below its own row. */
  html.is-touch .modal.party-full-modal .party-modal .party-item.lead {
    border-color: transparent;
    box-shadow: inset 0 0 0 2px var(--mw-gold, #c9a227), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
  }

  html.is-touch .modal.party-full-modal .party-modal .party-specimen-well {
    width: var(--party-well);
    height: var(--party-well);
    padding: 4px;
    border-radius: 5px;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: visible;
    justify-content: flex-start;
  }

  /* Actions sit on the card's floor, not wherever the copy happens to end. */
  html.is-touch .modal.party-full-modal .party-modal .party-controls {
    margin-top: auto;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 19px;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-name-row strong {
    overflow: hidden;
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(0.66rem, 2.9dvh, 0.86rem);
    font-weight: 800;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.is-touch .modal.party-full-modal .party-modal .lead-chip {
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: clamp(0.42rem, 1.8dvh, 0.53rem);
    line-height: 1.25;
  }

  /* Same de-pilling as the Box card, same reason. */
  html.is-touch .modal.party-full-modal .party-modal .party-meta-chips {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    overflow: hidden;
    gap: 0 4px;
    min-height: 19px;
    max-height: 19px;
  }

  /* The raw IV string ("9/1/3/8/6/11") is a six-number blob carrying the same
     weight as HP, and it was the token forcing the meta run onto a second
     line. It belongs in Details, not on the roster card. */
  html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip:last-child {
    display: none;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--mw-body, rgba(44, 38, 28, 0.82));
    font-size: clamp(0.46rem, 1.95dvh, 0.57rem);
    font-weight: 600;
    line-height: 1.2;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip--type {
    color: var(--mw-ink, #2c261c);
    font-weight: 800;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip + .pm-chip::before {
    content: "·";
    padding-right: 4px;
    color: var(--mw-rule-strong, rgba(44, 38, 28, 0.4));
    font-weight: 400;
  }

  html.is-touch .modal.party-full-modal .party-modal .power-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
    min-height: 19px;
    max-height: 19px;
    align-items: center;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-info {
    gap: 1px;
  }

  html.is-touch .modal.party-full-modal .party-modal .party-info > * {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* Two unlabelled full-width bars cost 28px a card. Slimmed to meter rules
     that read as meters and not as content that failed to render. */
  html.is-touch .modal.party-full-modal .party-modal .mini-hp {
    height: 5px;
    margin: 1px 0 0;
    border-radius: 3px;
    background: #e6dfcc;
    box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16);
  }

  html.is-touch .modal.party-full-modal .party-modal .mini-exp {
    display: none;
  }

  /* A flat saturated capsule was the one element not drawn in this skin, and
     at full health it was also the widest, loudest mark on the card. */
  html.is-touch .modal.party-full-modal .party-modal .mini-hp > span {
    background: linear-gradient(#4f7f5e, #3f6a4c);
    border-radius: 2px;
  }

  /* Gold marks an action worth taking; a full-health Heal is a no-op. */
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-item:not(.is-hurt) .party-controls button[data-party-action="heal"] {
    color: var(--mw-ink, #2c261c);
    background: #fdfbf4;
    border-color: var(--mw-rule-strong, rgba(44, 38, 28, 0.34));
    box-shadow: none;
    font-weight: 700;
  }

  /* "Details" was eliding to "Det..." on all six cards because every button
     was forced to an equal share. They size to their own text now. */
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    /* Details is the longest label and Up the shortest; an equal split spent
       the same width on both and elided the only one that could not take it. */
    grid-template-columns: 1.55fr 1fr 0.72fr 1fr;
    gap: 5px;
    /* The row stays inside the copy column so its right edge squares with the
       HP meter above it. Reaching under the sprite gutter looked like free
       width but flex stretch would not honour the negative margin, so it only
       ever slid the row left and left a ragged edge. */
    padding-top: 3px;
  }

  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 3px 6px;
    color: var(--mw-ink, #2c261c);
    background: #fdfbf4;
    border: 1px solid var(--mw-rule-strong, rgba(44, 38, 28, 0.34));
    box-shadow: none;
    font-size: clamp(0.48rem, 2dvh, 0.6rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  /* The Ledger layer makes Details the filled-ink primary for Party only, so
     the same word was a hairline in the Box and a near-black slab here. One
     word, one weight, across both views. */
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button[data-party-action="details"]:not(:disabled) {
    color: var(--mw-ink, #2c261c);
    background: #fdfbf4;
    border-color: var(--mw-rule-strong, rgba(44, 38, 28, 0.34));
    box-shadow: none;
  }

  /* Heal earns the enamel only when there is damage to undo. */
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button[data-party-action="heal"]:not(:disabled),
  html.is-touch .modal.party-full-modal .party-modal .party-controls button[data-party-action="heal"]:not(:disabled) {
    color: #3a2b06;
    background: linear-gradient(#f2e3ac, #e7d492);
    border-color: rgba(111, 82, 16, 0.7);
    box-shadow: 1px 1px 0 0 rgba(20, 17, 12, 0.16);
    font-weight: 800;
  }

  /* ---- P1 - the grid fills its paper ----------------------------------
   * The cards ended a quarter of the way up the panel, leaving empty ruled
   * paper with hairlines dividing nothing beneath them. */
  /* Stretching the rows only relocated the dead space from under the grid to
     inside every card (the copy column would not take the extra height, so the
     actions floated mid-card). Cards keep their natural height; the leftover
     is spent on a bigger portrait and a clean bottom margin instead. */
  html.is-touch .modal.party-full-modal .party-modal .party-list {
    align-content: start;
  }

  /* NOT a bigger portrait: the well and the copy column share one width, and
     at 82px "Details" elided and the PWR values cropped again. The leftover
     stays as a clean bottom margin - clipped data is never worth filled space. */

  /* ---- P2 - a ledger lines its numbers up ------------------------------ */
  html.is-touch .modal.party-full-modal .party-modal .power-badge,
  html.is-touch .modal.world-map-modal .box-row--collection .power-badge {
    font-variant-numeric: tabular-nums;
  }

  /* ---- P3 - four equal actions ---------------------------------------- */
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* ---- P4 - a gauge that reads as full, not as a divider --------------- */
  html.is-touch .modal.party-full-modal .party-modal .mini-hp {
    height: 5px;
    padding: 1px;
    background: #e6ddc7;
    box-shadow: inset 0 1px 0 rgba(20, 17, 12, 0.06);
  }

  html.is-touch .modal.party-full-modal .party-modal .mini-hp > span {
    background: rgba(62, 107, 63, 0.88);
    border-radius: 2px;
  }

  /* ---- D0 - reach: the pills stay small, the targets do not -------------
   * Every card control was a ~26-30px visual against a 44px platform
   * minimum. A transparent pseudo grows the hit area without moving a
   * single pixel of layout; horizontal growth is kept small so neighbours
   * in the same row cannot steal each other's taps. */
  /* NOT the favourite star - it is already position:absolute, and repeating
     the selector here with position:relative put it back in flow and grew
     every card by 23px. */
  html.is-touch .modal.world-map-modal .box-row--collection .box-actions button,
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button,
  html.is-touch .modal.world-map-modal .box-filter-chips > * {
    position: relative;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .box-actions button::after,
  html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button::after,
  html.is-touch .modal.world-map-modal .box-filter-chips > *::after {
    content: "";
    position: absolute;
    inset: -9px -2px;
    border-radius: inherit;
  }

  html.is-touch .modal.clean-world-modal.world-map-modal .box-card .box-row--collection .box-fav-btn::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }

  /* ---- D - shared: caption the two rank/power numbers -------------------- */
  /* "Base #623 | 405" gave no clue that #623 is a rank and 405 a power
     score. The em carries the score, so it can caption itself. */
  html.is-touch .modal.world-map-modal .box-row--collection .power-badge,
  html.is-touch .modal.party-full-modal .party-modal .power-badge {
    flex: 0 1 auto;
    overflow: hidden;
    padding: 1px 6px;
    font-size: clamp(0.44rem, 1.85dvh, 0.55rem);
    line-height: 1.25;
    white-space: nowrap;
  }

  /* Party shows Base AND Current in the same width the Box gives one badge,
     so the pair needs its own (smaller) scale - at the shared size the second
     badge cropped mid-number and "PWR 405" read as "PWR 4". */
  html.is-touch .modal.party-full-modal .party-modal .power-badge {
    min-width: 0;
    padding: 1px 5px;
    font-size: clamp(0.4rem, 1.68dvh, 0.5rem);
    letter-spacing: 0;
  }

  html.is-touch .modal.party-full-modal .party-modal .power-badges {
    gap: 3px;
  }

  html.is-touch .modal.world-map-modal .box-row--collection .power-badge em::before,
  html.is-touch .modal.party-full-modal .party-modal .power-badge em::before {
    content: "PWR ";
    opacity: 0.72;
    font-weight: 700;
  }

  /* ---- E - the 740px class: degrade the STRING, never the glyph ----------
   * At 740 the info column loses ~35px and the runs used to clip mid-number
   * ("DV 38/", "PWR 4", "ULTRA RA"). Cutting a whole token is honest; cutting
   * a digit off a value is data loss that looks like a bug. */
  @media (max-width: 800px) {
    /* Three seals still overrun the ~121px text column here. The duplicate
       seal is the one whose fact is also a filter chip, so it steps out
       whole rather than every seal cropping. */
    html.is-touch .modal.world-map-modal .box-row--collection .box-seal--duplicate {
      display: none;
    }

    /* Details is the longest label and Up the shortest; an equal split spent
       the same width on both and elided the only one that could not take it. */
    html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls {
      grid-template-columns: 1.7fr 1fr 0.66fr 1fr;
      gap: 4px;
    }

    html.is-touch .modal.clean-world-modal.party-full-modal .party-modal .party-controls button {
      padding: 0 3px;
      font-size: clamp(0.5rem, 1.95dvh, 0.6rem);
      letter-spacing: -0.01em;
    }

    /* Sex is the cheapest token in the run and the one the seals/name do not
       already imply - it goes first so DV survives. */
    html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-line:first-child .pm-chip:nth-child(2) {
      display: none;
    }

    html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-line:nth-child(2) .pm-chip:first-child:not(.pm-chip--type)::before {
      content: none;
      padding-right: 0;
    }

  html.is-touch .modal.world-map-modal .box-row--collection .box-name-line strong {
      font-size: clamp(0.58rem, 2.5dvh, 0.72rem);
    }

    html.is-touch .modal.world-map-modal .box-row--collection .party-meta-chips .pm-chip,
    html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip {
      font-size: clamp(0.43rem, 1.85dvh, 0.53rem);
    }

    html.is-touch .modal.world-map-modal .box-row--collection .rarity-seal,
    html.is-touch .modal.world-map-modal .box-row--collection .box-source-pill {
      padding: 1px 4px;
      font-size: clamp(0.39rem, 1.7dvh, 0.48rem);
    }

    /* Party carries Base AND Current where the Box carries one. Base is the
       species baseline - it never changes and it is on the Box card already,
       so it is the one to drop rather than crop both. */
    html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip:nth-child(2) {
      display: none;
    }

    html.is-touch .modal.party-full-modal .party-modal .party-meta-chips .pm-chip:nth-child(3)::before {
      content: none;
      padding-right: 0;
    }

    /* Base vs Current IS the comparison this card exists for, so at 740 the
       pair stacks rather than the baseline being deleted outright. */
    /* Stacking the pair stopped the shearing but cost ~46px a card, which put
       the action row below the fold on a 360px screen. Dropping the "PWR"
       caption to a middot saves ~36px of run, so both numbers fit on ONE line
       again - no stack, no shear, no clipping, and the buttons come back up. */
    html.is-touch .modal.party-full-modal .party-modal .power-badges {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      min-height: 20px;
      max-height: none;
      overflow: visible;
    }

    html.is-touch .modal.party-full-modal .party-modal .power-badge em::before {
      content: none;
    }

    html.is-touch .modal.party-full-modal .party-modal .power-badge {
      padding: 1px 5px;
      font-size: clamp(0.4rem, 1.65dvh, 0.48rem);
      justify-self: start;
      max-width: 100%;
    }

    html.is-touch .modal.party-full-modal .party-modal .party-controls button {
      padding: 3px 6px;
      font-size: clamp(0.44rem, 1.9dvh, 0.55rem);
    }

    html.is-touch .modal.party-full-modal .party-modal .party-name-row strong,
  html.is-touch .modal.world-map-modal .box-row--collection .box-name-line strong {
      letter-spacing: -0.01em;
    }
  }

}

/* ---- specimen wells: shimmer must not eat the normalisation --------------
 * A CSS animation on `transform` REPLACES the element's own transform for as
 * long as it runs, so `shiny-glow`'s 1.0 -> 1.055 pulse was silently
 * discarding the well's scale/seat/centre correction - holo sprites rendered
 * unscaled, unseated and off-centre while every ordinary monster was fine.
 * Wells get the identical filter cycle with no transform stops; the pulse
 * belongs on a full-size battle sprite, not a 55px roster tile. */
@keyframes shiny-glow-still {
  0% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.05) var(--holo-aura, rgba(255, 238, 150, 0.95))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--holo-aura-soft, rgba(255, 238, 150, 0.6))) saturate(1.45) hue-rotate(0deg) brightness(1.12); }
  25% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.065) var(--holo-aura, rgba(150, 235, 255, 1))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.18) var(--holo-aura-soft, rgba(150, 235, 255, 0.7))) saturate(1.8) hue-rotate(70deg) brightness(1.26); }
  50% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.085) rgba(255, 255, 255, 1)) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.24) var(--holo-aura-soft, rgba(190, 245, 255, 0.72))) saturate(2.1) hue-rotate(170deg) brightness(1.5); }
  72% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.065) var(--holo-aura, rgba(255, 180, 240, 1))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.19) var(--holo-aura-soft, rgba(180, 255, 205, 0.68))) saturate(1.8) hue-rotate(265deg) brightness(1.26); }
  100% { filter: drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.05) var(--holo-aura, rgba(255, 238, 150, 0.95))) drop-shadow(0 0 calc(var(--sprite-size, 168px) * 0.14) var(--holo-aura-soft, rgba(255, 238, 150, 0.6))) saturate(1.45) hue-rotate(360deg) brightness(1.12); }
}

.party-specimen-well .holo-sprite,
.party-specimen-well .shiny-sprite,
.party-specimen-well .black-holo-sprite {
  animation-name: shiny-glow-still;
}

/* ---- Sunken Commons: first-arrival cinematic ----------------------------
   DOM overlay on the playfield (#commonsArrival). Phases via data-phase:
   enter (bars + place card) -> approach (card leaves, skip hint, tappable)
   -> talk (dialogue over the frame) -> leave (bars lift). The world light
   itself is on the canvas (drawSunkenCommonsArrivalFx). */
.commons-arrival {
  --ca-gold: #f2d27a;
  --ca-glow: rgba(242, 210, 122, 0.55);
  --ca-bar: clamp(22px, 8.5%, 58px);
  position: absolute;
  inset: 10px;
  z-index: 13;
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
  color: #fff6dc;
  font-family: "Cinzel", Georgia, serif;
  -webkit-tap-highlight-color: transparent;
}

.commons-arrival[data-phase="approach"] {
  pointer-events: auto;
  cursor: pointer;
}

/* the mobile playfield is inset from the screen edges - go full-bleed there,
   just under #touchControls (15) so the stick and buttons stay visible */
html.is-touch .commons-arrival {
  position: fixed;
  inset: 0;
  z-index: 14;
  border-radius: 0;
}

.commons-arrival .ca-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 68% at 50% 56%, transparent 42%, rgba(6, 8, 4, 0.58) 100%),
    linear-gradient(180deg, rgba(64, 46, 10, 0.2), transparent 32%, transparent 68%, rgba(64, 46, 10, 0.2));
  animation: ca-fade-in 760ms ease-out both;
}

.commons-arrival .ca-bars {
  position: absolute;
  inset: 0;
}

.commons-arrival .ca-bars::before,
.commons-arrival .ca-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--ca-bar);
  background: #04060b;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.65);
}

.commons-arrival .ca-bars::before {
  top: 0;
  border-bottom: 1px solid rgba(242, 210, 122, 0.28);
  animation: ca-bar-top-in 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.commons-arrival .ca-bars::after {
  bottom: 0;
  border-top: 1px solid rgba(242, 210, 122, 0.28);
  animation: ca-bar-bottom-in 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* slow rootlight dust across the whole frame */
.commons-arrival .ca-dust {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: ca-fade-in 1200ms ease-out 400ms both;
}

.commons-arrival .ca-dust span {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff3c4 0%, rgba(242, 210, 122, 0.8) 40%, transparent 72%);
  filter: blur(0.4px);
  opacity: 0;
  animation: ca-dust-rise var(--t) linear var(--d) infinite;
}

.commons-arrival .ca-card {
  position: absolute;
  left: 50%;
  top: 15%;
  width: min(92%, 640px);
  translate: -50% 0;
  text-align: center;
  pointer-events: none;
}

.commons-arrival .ca-kicker {
  margin: 0;
  font-size: clamp(0.58rem, 1.5vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--ca-gold);
  text-shadow: 0 0 16px var(--ca-glow);
  animation: ca-fade-up 560ms ease-out 300ms both;
}

.commons-arrival .ca-card h2 {
  margin: 4px 0 0;
  font-size: clamp(1.5rem, 4.6vw, 2.7rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.08;
  color: #fff6dc;
  text-shadow: 0 0 26px var(--ca-glow), 0 3px 14px rgba(0, 0, 0, 0.8);
  animation: ca-title-in 780ms cubic-bezier(0.2, 0.9, 0.28, 1) 460ms both;
}

.commons-arrival .ca-rule {
  display: block;
  width: min(280px, 46%);
  height: 1px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--ca-gold) 30%, #fff6dc 50%, var(--ca-gold) 70%, transparent);
  box-shadow: 0 0 10px var(--ca-glow);
  animation: ca-rule-in 720ms cubic-bezier(0.16, 1, 0.3, 1) 820ms both;
}

/* once she starts across the plaza the card yields the frame to her */
.commons-arrival[data-phase="approach"] .ca-card,
.commons-arrival[data-phase="talk"] .ca-card,
.commons-arrival[data-phase="leave"] .ca-card {
  animation: ca-card-out 520ms ease-in both;
}

.commons-arrival .ca-skip {
  position: absolute;
  right: 16px;
  bottom: calc(var(--ca-bar) + 10px);
  margin: 0;
  font: 600 0.7rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 246, 220, 0.78);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  opacity: 0;
}

.commons-arrival[data-phase="approach"] .ca-skip {
  animation: ca-skip-in 420ms ease-out 480ms both;
}

/* she has arrived - the hint slips away before the bubble opens */
.commons-arrival[data-phase="talk"] .ca-skip {
  animation: ca-fade-out 240ms ease-in both;
}

/* the phone playfield is small inside the full-bleed frame - keep the card
   proportionate to the screen, not the desktop column */
html.is-touch .commons-arrival .ca-card { top: 11%; }
html.is-touch .commons-arrival .ca-card h2 { font-size: clamp(1.25rem, 3.9vw, 2.2rem); }
html.is-touch .commons-arrival .ca-kicker { font-size: clamp(0.52rem, 1.3vw, 0.72rem); }

/* the ☰ / A cluster owns bottom-right on phones */
html.is-touch .commons-arrival .ca-skip {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(var(--ca-bar) + max(8px, env(safe-area-inset-bottom)));
}

.commons-arrival.is-leaving .ca-bars::before { animation: ca-bar-top-out 560ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.commons-arrival.is-leaving .ca-bars::after { animation: ca-bar-bottom-out 560ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.commons-arrival.is-leaving .ca-grade,
.commons-arrival.is-leaving .ca-dust { animation: ca-fade-out 520ms ease-in both; }

@keyframes ca-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ca-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ca-bar-top-in { from { transform: translateY(-102%); } to { transform: translateY(0); } }
@keyframes ca-bar-bottom-in { from { transform: translateY(102%); } to { transform: translateY(0); } }
@keyframes ca-bar-top-out { from { transform: translateY(0); } to { transform: translateY(-102%); } }
@keyframes ca-bar-bottom-out { from { transform: translateY(0); } to { transform: translateY(102%); } }
@keyframes ca-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ca-title-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes ca-rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ca-card-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes ca-skip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ca-dust-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  12% { opacity: 0.9; }
  60% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(6px, -46px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .commons-arrival { display: none; }
}
/* ---- Heartroot Beyond: door overture title slate ------------------------
   #beyondSlate, fixed above everything (the story movie card is z60; the
   slate sits over it so the hand-off is a dissolve, not a cut). Phases via
   data-phase: bloom -> reveal (backdrop through, title lifts) -> done (slate
   fades over the opened movie). is-fast = skipped. still = reduced motion. */
.beyond-slate {
  --bs-gold: #f3d283;
  --bs-glow: rgba(243, 210, 131, 0.6);
  --bs-green: #cdebb0;
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  background: #030405;
  color: #fff6dc;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.beyond-slate .bs-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.beyond-slate .bs-backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.08);
  filter: saturate(1.05) brightness(0.92);
}

/* light waking in the root mouth at the bottom, and a soft halo behind the title */
.beyond-slate .bs-mouth {
  position: absolute;
  left: 50%;
  bottom: -12vh;
  width: min(1400px, 160vw);
  height: 70vh;
  translate: -50% 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 224, 150, 0.34) 0%, rgba(214, 170, 76, 0.18) 24%, rgba(120, 130, 60, 0.07) 46%, transparent 68%);
  opacity: 0;
  animation: bs-fade-in 2200ms ease-out 200ms both, bs-mouth-breathe 4600ms ease-in-out 2400ms infinite alternate;
  pointer-events: none;
}

.beyond-slate .bs-glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(1200px, 150vmax);
  height: min(700px, 90vmax);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 226, 150, 0.16) 0%, rgba(214, 170, 76, 0.07) 30%, transparent 62%);
  opacity: 0;
  animation: bs-fade-in 1800ms ease-out 900ms both;
  pointer-events: none;
}

/* roots drawing upward out of the dark - lower half of the frame only */
.beyond-slate .bs-roots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62vh;
  opacity: 0.92;
  filter: drop-shadow(0 0 5px rgba(243, 210, 131, 0.5));
  pointer-events: none;
}

.beyond-slate .bs-roots path {
  fill: none;
  stroke: var(--bs-gold);
  stroke-width: calc(var(--w) * 1px);
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  opacity: 0;
  animation: bs-root-draw 2100ms cubic-bezier(0.25, 0.6, 0.2, 1) calc(240ms + var(--d)) both;
}

/* motes lifting the whole time */
.beyond-slate .bs-motes {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: bs-fade-in 1400ms ease-out 500ms both;
  pointer-events: none;
}

.beyond-slate .bs-motes span {
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: -3%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d2 0%, rgba(243, 210, 131, 0.9) 40%, transparent 72%);
  box-shadow: 0 0 6px rgba(243, 210, 131, 0.7);
  opacity: 0;
  animation: bs-mote-rise var(--t) linear var(--d) infinite;
}

/* the title block */
.beyond-slate .bs-title {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 96vw;
  translate: -50% -50%;
  text-align: center;
  pointer-events: none;
}

.beyond-slate .bs-kicker {
  margin: 0 0 clamp(8px, 1.6vh, 16px);
  font-size: clamp(0.6rem, 1.5vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-transform: uppercase;
  color: var(--bs-gold);
  text-shadow: 0 0 18px var(--bs-glow);
  animation: bs-fade-up 720ms ease-out 700ms both;
}

.beyond-slate .bs-name {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff8e6;
  line-height: 1;
}

.beyond-slate .bs-top {
  display: block;
  margin-bottom: clamp(2px, 0.8vh, 10px);
  font-size: clamp(0.95rem, 2.7vw, 1.9rem);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-shadow: 0 0 18px var(--bs-glow), 0 2px 12px rgba(0, 0, 0, 0.85);
}

.beyond-slate .bs-main {
  position: relative;
  display: inline-block;
  padding: 0 0.1em;
  font-size: clamp(2.6rem, 11.5vw, 8.6rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-shadow: 0 0 34px var(--bs-glow), 0 5px 26px rgba(0, 0, 0, 0.85);
}

.beyond-slate .bs-word { display: inline-block; white-space: nowrap; }

.beyond-slate .bs-letter,
.beyond-slate .bs-gap { display: inline-block; }

.beyond-slate .bs-top .bs-letter {
  opacity: 0;
  animation: bs-letter-bloom 800ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(900ms + var(--i) * 45ms) both;
}

.beyond-slate .bs-main .bs-letter {
  opacity: 0;
  animation: bs-letter-bloom-big 1100ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(1350ms + var(--i) * 95ms) both;
  will-change: transform, filter, opacity;
}

/* the light sweep across the finished word */
.beyond-slate .bs-sweep {
  position: absolute;
  inset: -10% -8%;
  background: linear-gradient(100deg, transparent 32%, rgba(255, 248, 220, 0) 42%, rgba(255, 248, 220, 0.6) 50%, rgba(255, 248, 220, 0) 58%, transparent 68%);
  mix-blend-mode: screen;
  transform: translateX(-70%);
  opacity: 0;
  animation: bs-sweep 1100ms cubic-bezier(0.4, 0, 0.2, 1) 2500ms both;
  pointer-events: none;
}

.beyond-slate .bs-rule {
  display: block;
  width: min(460px, 56%);
  height: 1px;
  margin: clamp(10px, 2.2vh, 22px) auto 0;
  background: linear-gradient(90deg, transparent, var(--bs-gold) 28%, #fff6dc 50%, var(--bs-gold) 72%, transparent);
  box-shadow: 0 0 12px var(--bs-glow);
  animation: bs-rule-in 820ms cubic-bezier(0.16, 1, 0.3, 1) 2750ms both;
}

.beyond-slate .bs-sub {
  margin: clamp(8px, 1.8vh, 18px) 0 0;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.36em;
  text-indent: 0.36em;
  text-transform: uppercase;
  color: var(--bs-green);
  text-shadow: 0 0 14px rgba(205, 235, 176, 0.5);
  animation: bs-fade-up 720ms ease-out 2980ms both;
}

.beyond-slate .bs-skip {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0;
  font: 600 0.7rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 246, 220, 0.6);
  opacity: 0;
  animation: bs-fade-in 500ms ease-out 1500ms both;
  pointer-events: none;
}

html.is-touch .beyond-slate .bs-skip {
  right: auto;
  left: max(16px, env(safe-area-inset-left));
}

/* --- reveal: black lets go, title lifts away --------------------------- */
.beyond-slate[data-phase="reveal"] .bs-backdrop { animation: bs-backdrop-in 1000ms ease-out both; }
.beyond-slate[data-phase="reveal"] .bs-backdrop img { animation: bs-backdrop-push 2400ms ease-out both; }
.beyond-slate[data-phase="reveal"] .bs-title { animation: bs-title-lift 820ms cubic-bezier(0.4, 0, 0.2, 1) 120ms both; }
.beyond-slate[data-phase="reveal"] .bs-roots,
.beyond-slate[data-phase="reveal"] .bs-mouth,
.beyond-slate[data-phase="reveal"] .bs-glow,
.beyond-slate[data-phase="reveal"] .bs-skip { animation: bs-fade-out 700ms ease-in both; }
.beyond-slate[data-phase="reveal"] .bs-motes { animation: bs-fade-out 900ms ease-in both; }

/* skipped: same reveal, everything already landed and compressed */
.beyond-slate.is-fast .bs-letter,
.beyond-slate.is-fast .bs-kicker,
.beyond-slate.is-fast .bs-rule,
.beyond-slate.is-fast .bs-sub,
.beyond-slate.is-fast .bs-roots path { animation-duration: 1ms; animation-delay: 0ms; }
.beyond-slate.is-fast .bs-sweep { animation: none; opacity: 0; }
.beyond-slate.is-fast[data-phase="reveal"] .bs-backdrop { animation-duration: 380ms; }
.beyond-slate.is-fast[data-phase="reveal"] .bs-title { animation-duration: 360ms; animation-delay: 0ms; }

/* --- done: the movie card is open underneath; fade over it ------------- */
.beyond-slate[data-phase="done"] { animation: bs-fade-out 560ms ease-in 60ms both; pointer-events: none; }

/* --- reduced motion: a still title, then straight to the movie --------- */
.beyond-slate[data-phase="still"] .bs-mouth,
.beyond-slate[data-phase="still"] .bs-glow,
.beyond-slate[data-phase="still"] .bs-kicker,
.beyond-slate[data-phase="still"] .bs-letter,
.beyond-slate[data-phase="still"] .bs-rule,
.beyond-slate[data-phase="still"] .bs-sub { animation: none; opacity: 1; }
.beyond-slate[data-phase="still"] .bs-roots path { animation: none; stroke-dashoffset: 0; opacity: 0.5; }
.beyond-slate[data-phase="still"] .bs-motes,
.beyond-slate[data-phase="still"] .bs-sweep,
.beyond-slate[data-phase="still"] .bs-skip { display: none; }

@keyframes bs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bs-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bs-mouth-breathe { from { opacity: 1; } to { opacity: 0.78; } }
@keyframes bs-root-draw {
  0% { stroke-dashoffset: 1200; opacity: 0; }
  10% { opacity: 0.62; }
  100% { stroke-dashoffset: 0; opacity: 0.5; }
}
@keyframes bs-mote-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: 0.95; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate3d(10px, -62vh, 0); }
}
@keyframes bs-letter-bloom {
  0% { opacity: 0; transform: translateY(10px) scale(1.18); filter: blur(10px) brightness(2.2); }
  55% { opacity: 1; filter: blur(0) brightness(1.5); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes bs-letter-bloom-big {
  0% { opacity: 0; transform: translateY(18px) scale(1.3); filter: blur(16px) brightness(2.4); }
  50% { opacity: 1; filter: blur(0) brightness(1.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes bs-sweep {
  0% { opacity: 0; transform: translateX(-70%); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); }
}
@keyframes bs-rule-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes bs-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-backdrop-push { from { transform: scale(1.08); } to { transform: scale(1.0); } }
@keyframes bs-title-lift {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-22px); filter: blur(6px); }
}

/* ==========================================================================
 * NURSERY DESK v2 · 2026-08-25
 * ==========================================================================
 * One breeding desk for the Monster Nursery (two pens) and the Bloomridge farm
 * (up to twelve). Fixed masthead (kicker, title, three status chips, help),
 * two scrolling panes (pens | parents), pen cards with a priority state chip,
 * two parent tiles side by side, an egg tray + cycle bar + Collect strip, an
 * overview strip when there are more than two pens, and a help sheet that
 * holds the rules and the Legacy Training desk. On touch every target is
 * >= 40px, the card is a flex column with explicit rows, and narrow phones
 * switch the panes with tabs. Tokens fall back to the Ledger leaf.
 * Deliberately last in the file: it must outrank the Ledger touch layer.
 * ========================================================================== */
.modal.clean-world-modal .modal-card.nursery-card--v2 {
  --nv-ink: var(--mw-ink, #14110c);
  --nv-body: var(--mw-body, #37322a);
  --nv-mute: #5a5346;
  --nv-hair: var(--mw-hair, rgba(20, 17, 12, 0.10));
  --nv-rule: var(--mw-rule, rgba(20, 17, 12, 0.20));
  --nv-rule-strong: var(--mw-rule-strong, rgba(20, 17, 12, 0.38));
  --nv-wash: var(--mw-wash, rgba(20, 17, 12, 0.045));
  --nv-paper: var(--mw-leaf-bright, #fdfbf4);
  --nv-paper-sunk: var(--mw-leaf-sunk, #ece7d8);
  --nv-gold: #c9a24a;
  --nv-gold-deep: var(--mw-gold-deep, #6f5210);
  --nv-gold-pale: var(--mw-gold-pale, #e6d1a0);
  --nv-gold-wash: rgba(201, 162, 74, 0.16);
  --nv-verd: var(--mw-verd, #17614d);
  --nv-verd-wash: rgba(23, 97, 77, 0.12);
  --nv-ox: var(--mw-ox, #872019);
  --nv-ox-wash: rgba(135, 32, 25, 0.10);
  --nv-serif: var(--mw-serif, Georgia, "Times New Roman", serif);
  --nv-radius: 6px;
  --nv-tap: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow: hidden;
  color: var(--nv-ink);
}

/* The Ledger leaf makes every .box-card one scroll context (inner .box-scroll
   overflow:visible, card overflow:auto). This desk scrolls its two panes and
   keeps the masthead fixed, so re-assert that at higher specificity. */
.modal.clean-world-modal .modal-card.nursery-card--v2,
.modal.world-map-modal .modal-card.nursery-card--v2 {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-right: 4px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-picker {
  min-height: 0;
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .box-scroll.nursery-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* ---- close: the game's own cross, shown on desktop too --------------------- */
.modal.clean-world-modal .modal-card.nursery-card--v2 > .world-modal-close {
  position: absolute;
  z-index: 6;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nv-rule-strong);
  border-radius: 4px;
  color: var(--nv-ink);
  background: var(--nv-paper);
  box-shadow: none;
  font: 400 1.3rem/1 var(--nv-serif);
  cursor: pointer;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 > .world-modal-close:hover,
.modal.clean-world-modal .modal-card.nursery-card--v2 > .world-modal-close:focus-visible {
  color: var(--nv-paper);
  background: var(--nv-ink);
  border-color: var(--nv-ink);
}

/* ---- masthead ----------------------------------------------------------- */
/* The masthead and tabs are flex items of a height-capped card: they must
   never shrink, or their content spills over the panes. */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs {
  flex: 0 0 auto;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  min-height: 44px;
  height: auto;
  max-height: none;
  padding: 0 58px 8px 0;
  border-bottom: 1px solid var(--nv-rule);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-main {
  display: grid;
  gap: 1px;
  min-width: 0;
  max-width: 300px;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-main > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-upgrade-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.68rem;
  line-height: 1.3;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-upgrade-link {
  font-size: inherit;
  color: var(--nv-gold-deep);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-upgrade-link:disabled {
  color: var(--nv-mute);
  border-bottom-color: transparent;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-kicker {
  color: var(--nv-gold-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head h2,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head h2 {
  margin: 0;
  padding: 0;
  background: none;
  font-family: var(--nv-serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-talents {
  display: block;
  margin: 2px 0 0;
  min-width: 0;
  color: var(--nv-mute);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-talents[hidden] { display: none; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-stats {
  container-type: inline-size;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

/* A chip label is never truncated: when the row cannot hold all three full
   labels, every chip collapses to dot + count (the Collect-all link stays). */
@container (max-width: 440px) {
  .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip > span { display: none; }
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-stats > .nursery-chip {
  flex: 0 0 auto;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip > u {
  margin-left: 2px;
  color: var(--nv-gold-deep);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-sub {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  min-width: 0;
  margin-top: -2px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-sub .nursery-talents {
  flex: 1 1 320px;
  margin: 0;
  white-space: normal;
  overflow: visible;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-sub .nursery-upgrade-line {
  flex: 0 0 auto;
  overflow: visible;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-stats::-webkit-scrollbar { display: none; }

/* chips: parchment, hairline, coloured dot + coloured count - one meaning each */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip {
  --chip: var(--nv-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  margin: 0;
  padding: 0 10px 0 8px;
  border: 1px solid var(--nv-rule);
  border-radius: 999px;
  color: var(--nv-body);
  background: var(--nv-paper);
  box-shadow: none;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip b {
  color: var(--chip);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-gold { --chip: var(--nv-gold-deep); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-verd { --chip: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-ox { --chip: var(--nv-ox); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-mute { --chip: var(--nv-mute); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-zero { color: var(--nv-mute); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-zero i { opacity: 0.35; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-zero b { color: var(--nv-mute); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-action {
  border-color: var(--nv-gold);
  background: var(--nv-gold-wash);
  cursor: pointer;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-action:hover {
  background: var(--nv-gold);
  color: var(--nv-ink);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip.is-action:hover b { color: var(--nv-ink); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- buttons: one family, four weights ------------------------------------ */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters > button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--nv-tap);
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--nv-rule-strong);
  border-radius: 4px;
  color: var(--nv-ink);
  background: var(--nv-paper);
  box-shadow: none;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn:hover:not(:disabled) {
  border-color: var(--nv-ink);
  background: var(--nv-wash);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 button:focus-visible {
  outline: 2px solid var(--nv-gold);
  outline-offset: 2px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  border-style: solid;
  box-shadow: none;
}

/* primary = ink with a gold hairline inside */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--primary:not(:disabled) {
  border-color: var(--nv-ink);
  color: var(--nv-paper);
  background: var(--nv-ink);
  box-shadow: inset 0 0 0 1px var(--nv-gold);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--primary:not(:disabled):hover {
  background: var(--nv-body);
  border-color: var(--nv-body);
}

/* gold = placing a parent */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--gold:not(:disabled) {
  border-color: var(--nv-gold-deep);
  color: var(--nv-ink);
  background: var(--nv-gold);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--gold:not(:disabled):hover {
  background: #d9b45f;
}

/* quiet = outlined secondary (Take out, Pause, help) */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--quiet {
  border-color: var(--nv-rule);
  background: transparent;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn--danger:not(:disabled) {
  border-color: var(--nv-ox);
  color: var(--nv-ox);
  background: var(--nv-paper);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-help {
  width: var(--nv-tap);
  padding: 0;
  border-color: var(--nv-rule-strong);
  background: var(--nv-paper);
  box-shadow: none;
  font-family: var(--nv-serif);
  font-size: 1.05rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-link {
  appearance: none;
  display: inline;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--nv-gold);
  border-radius: 0;
  color: var(--nv-gold-deep);
  background: none;
  box-shadow: none;
  font: inherit;
  font-size: inherit;
  font-weight: 800;
  cursor: pointer;
}

/* ---- section tabs (narrow touch only) ------------------------------------ */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs {
  display: none;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--nv-hair);
  border-radius: 6px;
  background: var(--nv-wash);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button {
  flex: 1 1 0;
  min-height: 40px;
  border-color: transparent;
  background: transparent;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button b {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--nv-gold-deep);
  background: var(--nv-paper);
  font-size: 0.66rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button.is-active {
  border-color: transparent;
  color: var(--nv-ink);
  background: #e8e0cf;
  box-shadow: inset 0 -2px 0 var(--nv-ink);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button.is-active b {
  color: var(--nv-gold-deep);
  background: var(--nv-paper);
}

/* ---- body: pens | parents ------------------------------------------------ */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  gap: 14px;
  min-height: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane {
  container-type: inline-size;
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding-right: 4px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-bar,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-target-note,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-banner {
  flex: 0 0 auto;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  min-height: 34px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-title,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-title {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--nv-serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-hint {
  flex: 1 1 auto;
  margin: 0;
  max-width: none;
  color: var(--nv-mute);
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: right;
}

/* ---- overview strip (farm) ---------------------------------------------- */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-strip {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile {
  --tile: var(--nv-mute);
  --p: 0%;
  position: relative;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 0 4px;
  border: 1px solid var(--nv-rule);
  border-radius: 6px;
  color: var(--nv-body);
  background: var(--nv-paper);
  box-shadow: none;
  font-family: var(--nv-serif);
  font-size: 0.92rem;
  cursor: pointer;
}

/* cycle progress as a hairline at the tile's foot */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 4px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tile) var(--p), rgba(20, 17, 12, 0.12) 0);
  pointer-events: none;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile b {
  font-weight: 400;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile em {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--nv-ink);
  background: var(--nv-gold);
  font-family: inherit;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-incubating { --tile: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-ready { --tile: var(--nv-gold-deep); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-full { --tile: var(--nv-ox); border-color: var(--nv-ox); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-blocked { --tile: var(--nv-ox); border-color: var(--nv-ox); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-empty,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-single { color: var(--nv-mute); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-target { box-shadow: 0 0 0 2px var(--nv-gold); border-color: var(--nv-gold-deep); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-full em { color: var(--nv-paper); background: var(--nv-ox); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile:hover { border-color: var(--nv-ink); }

/* ---- pen cards ----------------------------------------------------------- */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}

@container (min-width: 760px) {
  .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen {
  position: relative;
  display: grid;
  gap: 6px;
  scroll-margin-top: 0;
  margin: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--nv-rule);
  border-left-width: 3px;
  border-left-color: var(--nv-rule);
  border-radius: var(--nv-radius);
  background: var(--nv-paper);
  box-shadow: 0 1px 0 rgba(20, 17, 12, 0.06);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-incubating { border-left-color: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-ready { border-left-color: var(--nv-gold); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-full,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-blocked { border-left-color: var(--nv-ox); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-target {
  border-color: var(--nv-gold-deep);
  border-left-color: var(--nv-gold);
  box-shadow: 0 0 0 2px var(--nv-gold-pale), 0 1px 0 rgba(20, 17, 12, 0.06);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-pulse {
  animation: nursery-pen-pulse 0.9s ease-out 1;
}

@keyframes nursery-pen-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.9); }
  100% { box-shadow: 0 0 0 14px rgba(201, 162, 74, 0); }
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen[hidden] { display: none; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 30px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head h3,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head h3 {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--nv-serif);
  font-size: 1.02rem;
  font-weight: 400;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state {
  --chip: var(--nv-mute);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--chip);
  border-radius: 999px;
  color: var(--chip);
  background: var(--nv-paper);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state.is-verd { --chip: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state.is-gold { --chip: var(--nv-gold-deep); background: var(--nv-gold-wash); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state.is-ox { --chip: var(--nv-ox); background: var(--nv-ox-wash); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state.is-mute { --chip: var(--nv-mute); border-style: dashed; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-pick {
  margin-left: auto;
  border-color: var(--nv-gold-deep);
  color: var(--nv-gold-deep);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-pick.is-active {
  color: var(--nv-ink);
  background: var(--nv-gold);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-tag {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--nv-rule);
  border-radius: 999px;
  color: var(--nv-mute);
  font-size: 0.66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* two parent rows: sprite | name + sex + DV + training | Take out · Pause */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-parents {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 4px 10px;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--nv-hair);
  border-radius: 5px;
  background: var(--nv-paper-sunk);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot img {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-info {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info strong {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  color: var(--nv-ink);
  font-size: 0.88rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name em,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info strong em {
  color: var(--nv-mute);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-rarity {
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-rarity.is-rare { color: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-rarity.is-ultra { color: #4a3fa8; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-rarity.is-legendary { color: var(--nv-gold-deep); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-meta,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 6px;
  color: var(--nv-mute);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}

/* separators only between items that share a line */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-meta > * + *::before {
  content: "\00b7";
  margin-right: 6px;
  color: var(--nv-rule-strong);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-training {
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name > span { white-space: nowrap; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-gender {
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-gender.is-male { color: #2a5fb4; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-gender.is-female { color: #b8386a; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-traits {
  color: var(--nv-gold-deep);
  font-weight: 800;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-dvs {
  color: var(--nv-mute);
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training {
  display: grid;
  margin: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training-text {
  color: var(--nv-mute);
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training-text.stalled { color: var(--nv-gold-deep); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(20, 17, 12, 0.14);
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nv-verd);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training.paused .nursery-training-bar i { background: var(--nv-rule-strong); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-training.stalled .nursery-training-bar i { background: var(--nv-gold); }

/* Take out · Pause share one right edge */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-actions {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  gap: 6px;
  align-items: center;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-actions .nursery-btn {
  min-width: 62px;
  padding: 0 9px;
  font-size: 0.68rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-confirm {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 8px;
  border: 1px solid var(--nv-ox);
  border-radius: 4px;
  color: var(--nv-ox);
  background: var(--nv-ox-wash);
  font-size: 0.7rem;
  font-weight: 700;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-confirm[hidden] { display: none; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-confirm .nursery-btn { min-width: 64px; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle.is-idle { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label"; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle.is-idle .nursery-cycle-progress { display: none; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-confirm span { flex: 1 1 120px; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot.is-confirming .nursery-slot-actions { visibility: hidden; }

/* empty slot = the affordance for "add a parent" */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot--empty {
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto;
  justify-items: start;
  align-items: center;
  min-height: 62px;
  border: 1px dashed var(--nv-rule-strong);
  color: var(--nv-mute);
  background: transparent;
  box-shadow: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot--empty:hover,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot--empty:focus-visible {
  border-color: var(--nv-gold-deep);
  background: var(--nv-gold-wash);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-plus {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--nv-rule-strong);
  border-radius: 50%;
  color: var(--nv-gold-deep);
  font-size: 1.35rem;
  line-height: 1;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-empty-label {
  color: var(--nv-ink);
  font-size: 0.8rem;
  font-weight: 800;
}

/* cycle: egg tray + progress + preview + collect */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "eggs bar collect"
    "eggs label collect";
  align-items: center;
  gap: 3px 10px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--nv-hair);
  border-radius: 5px;
  background: var(--nv-wash);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-eggs {
  grid-area: eggs;
  display: flex;
  gap: 3px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-egg {
  display: grid;
  place-items: center;
  width: 20px;
  height: 24px;
  border: 1px solid var(--nv-rule);
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-egg.is-laid {
  border-color: var(--nv-gold-deep);
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 17, 12, 0.22);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-egg img {
  width: 20px;
  height: 24px;
  object-fit: contain;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle-progress {
  grid-area: bar;
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 17, 12, 0.14);
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--nv-verd);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-full .nursery-cycle-progress i,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-ready .nursery-cycle-progress i { background: var(--nv-gold-deep); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle-label {
  grid-area: label;
  color: var(--nv-mute);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-collect {
  grid-area: collect;
  white-space: nowrap;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-panel {
  margin: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-panel[hidden] { display: none; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-panel summary { display: none; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-panel .nursery-preview > p { padding-top: 8px; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-preview {
  margin-left: auto;
  min-height: 28px;
  padding: 0 9px;
  color: #1d1a15;
  font-size: 0.68rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-preview > span {
  color: #1d1a15;
  font-weight: 700;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chevron {
  width: 6px;
  height: 6px;
  border-right: 2px solid #b8902e;
  border-bottom: 2px solid #b8902e;
  transform: rotate(-45deg) translateY(-1px);
  transition: transform 0.15s;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-preview.is-open .nursery-chevron { transform: rotate(45deg) translateY(-2px); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-hide {
  justify-self: start;
  margin: 8px 0 0 10px;
  font-size: 0.72rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview-panel { display: grid; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-dv-parent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-dv-parent img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-preview + .nursery-pen-pick,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-preview + .nursery-pen-tag { margin-left: 8px; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview {
  margin: 0;
  border: 1px solid var(--nv-hair);
  border-radius: 5px;
  background: var(--nv-wash);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview summary {
  padding: 8px 10px;
  color: var(--nv-body);
  font-size: 0.74rem;
  font-weight: 800;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-preview > p {
  color: var(--nv-body);
  font-size: 0.72rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-dv-preview > div {
  background: rgba(20, 17, 12, 0.05);
  color: var(--nv-ink);
  font-size: 0.72rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-dv-preview .head {
  color: var(--nv-mute);
  background: rgba(20, 17, 12, 0.09);
}

/* ---- parents picker ------------------------------------------------------ */
.modal.clean-world-modal .modal-card.nursery-card--v2 .monster-search {
  flex: 1 1 180px;
  min-width: 0;
  max-width: none;
  color: var(--nv-mute);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .monster-search > span { display: none; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .monster-search input {
  min-height: var(--nv-tap);
  border: 1px solid var(--nv-rule-strong);
  border-radius: 4px;
  color: var(--nv-ink);
  background: var(--nv-paper);
  font-size: 0.8rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .monster-search input:focus {
  border-color: var(--nv-gold-deep);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.25);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters {
  display: flex;
  gap: 4px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters > button {
  min-height: 28px;
  padding: 0 9px;
  border-color: var(--nv-rule);
  background: transparent;
  font-size: 0.66rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters > button.is-active {
  border-color: var(--nv-rule);
  color: var(--nv-ink);
  background: #e8e0cf;
  box-shadow: inset 0 -2px 0 var(--nv-ink);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-target-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--nv-gold-pale);
  border-left: 3px solid var(--nv-gold);
  border-radius: 4px;
  color: var(--nv-body);
  background: rgba(201, 162, 74, 0.10);
  font-size: 0.8rem;
  font-weight: 700;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-target-note b { color: var(--nv-gold-deep); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-banner {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--nv-rule);
  border-left: 3px solid var(--nv-ox);
  border-radius: 4px;
  color: var(--nv-body);
  background: var(--nv-wash);
  font-size: 0.74rem;
  font-weight: 700;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidates {
  display: grid;
  gap: 6px;
  margin: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--nv-hair);
  border-radius: 5px;
  background: var(--nv-paper);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row[data-nursery-fit="ok"] { border-left: 3px solid var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row[hidden] { display: none; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row img {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-name > span { white-space: nowrap; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row .nursery-slot-dvs {
  grid-column: 2 / -1;
  grid-row: 2;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-source {
  padding: 1px 5px;
  border: 1px solid var(--nv-rule);
  border-radius: 3px;
  color: var(--nv-mute);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--nv-mute);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit.is-ok { color: var(--nv-verd); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit.is-no { color: var(--nv-ox); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit.is-free { color: var(--nv-gold-deep); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-deposit-actions {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-place {
  padding: 0 11px;
  font-size: 0.72rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-empty-search,
.modal.clean-world-modal .modal-card.nursery-card--v2 .empty-note {
  margin: 8px 0 0;
  color: var(--nv-mute);
}

/* ---- help sheet ---------------------------------------------------------- */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(20, 17, 12, 0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.modal.clean-world-modal .modal-card.nursery-card--v2:has([data-nursery-sheet]:not([hidden])) .nursery-help { visibility: hidden; }

.modal.clean-world-modal .modal-card.nursery-card--v2:has([data-nursery-sheet]:not([hidden])) > .world-modal-close { visibility: hidden; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet[hidden] { display: none; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-card {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: 88%;
  border: 1px solid var(--nv-rule-strong);
  border-radius: 8px;
  background: var(--nv-paper);
  box-shadow: 0 18px 50px rgba(20, 17, 12, 0.3);
  overflow: hidden;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--nv-rule);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-head h3,
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-head h3 {
  margin: 0;
  font-family: var(--nv-serif);
  font-size: 1.1rem;
  font-weight: 400;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-head .nursery-btn {
  width: 40px;
  padding: 0;
  font-family: var(--nv-serif);
  font-size: 1.3rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 22px;
  overflow: auto;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 24px), transparent);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-talents {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--nv-gold-pale);
  border-left: 3px solid var(--nv-gold);
  border-radius: 4px;
  background: rgba(201, 162, 74, 0.10);
  color: var(--nv-body);
  font-size: 0.76rem;
  line-height: 1.4;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-talents b { color: var(--nv-gold-deep); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-talents small { color: var(--nv-mute); font-size: 0.68rem; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-guide--open {
  border: 0;
  background: none;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-guide--open ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--nv-body);
  font-size: 0.78rem;
  line-height: 1.45;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-legend {
  margin: 0;
  color: var(--nv-mute);
  font-size: 0.72rem;
  font-weight: 700;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-actions {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--nv-rule);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-actions span {
  color: var(--nv-mute);
  font-size: 0.7rem;
}

/* ---- narrow desktop window ---------------------------------------------- */
@media (max-width: 760px) {
  html:not(.is-touch) .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

/* ==========================================================================
 * TOUCH (phones + tablets): vertical space is the scarce axis, thumbs are fat.
 * ========================================================================== */
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2,
html.is-touch .modal.world-map-modal .modal-card.nursery-card--v2 {
  --nv-tap: 40px;
  display: flex;
  flex-direction: column;
  grid-template-areas: none;
  gap: 6px;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  overflow: hidden;
}

/* the game's cross: 40x40 in the masthead band, never over the panes */
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 > .world-modal-close,
html.is-touch .modal.world-map-modal .modal-card.nursery-card--v2 > .world-modal-close {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--nv-rule-strong);
  color: var(--nv-ink);
  background: var(--nv-paper);
  font-size: 1.2rem;
  line-height: 1;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  gap: 4px 10px;
  min-height: 44px;
  padding: 0 58px 5px 0;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-main { gap: 0; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-kicker {
  font-size: clamp(0.5rem, 1.6dvh, 0.58rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head h2,
html.is-touch .modal.world-map-modal .modal-card.nursery-card--v2 .nursery-head h2 {
  margin: 0;
  padding: 0;
  font-size: clamp(0.95rem, 4dvh, 1.15rem);
  line-height: 1.05;
  white-space: nowrap;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-talents { display: none; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-stats {
  justify-content: flex-start;
  gap: 5px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip {
  min-height: 30px;
  padding: 0 9px 0 7px;
  font-size: clamp(0.58rem, 1.9dvh, 0.66rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip b { font-size: clamp(0.68rem, 2.2dvh, 0.78rem); }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-help {
  width: 40px;
  height: 40px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-btn {
  font-size: clamp(0.62rem, 2dvh, 0.72rem);
}

/* The older touch layer turns .nursery-body into a flex column and splits the
   pens into two landscape columns; both must lose here (higher specificity). */
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 8px;
  height: auto;
  padding: 0;
  overflow: visible;
  touch-action: auto;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-picker {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane {
  overflow: hidden;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-picker {
  overflow: hidden;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .box-scroll.nursery-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidates {
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

/* pane headings are redundant on touch: the position/tab already says it */
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-title { display: none; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-hint { display: none; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pens-pane > .nursery-pane-bar:not(:has([data-nursery-strip])) { display: none; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pane-bar {
  flex-wrap: nowrap;
  gap: 6px;
  min-height: 40px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-strip {
  gap: 3px;
  padding: 4px 0 0;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile:not(.is-locked)::before {
  content: "";
  position: absolute;
  inset: -4px -2px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile {
  height: 40px;
  font-size: 0.86rem;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen { gap: 6px; padding: 7px 7px 7px 8px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head h3,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head h3 {
  font-size: clamp(0.82rem, 2.9dvh, 0.95rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-head { min-height: 28px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-state {
  min-height: 22px;
  padding: 0 8px 0 6px;
  font-size: clamp(0.56rem, 1.85dvh, 0.64rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-pick {
  min-height: 36px;
  padding: 0 10px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-parents { gap: 6px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 5px 6px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot img {
  width: 40px;
  height: 40px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info strong { font-size: 0.875rem; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name > span,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-name > span { font-size: 0.875rem; font-weight: 800; color: var(--nv-ink); }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-name em,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info strong em { font-size: 0.75rem; font-weight: 700; color: var(--nv-mute); }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-meta,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-meta,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle-label {
  font-size: clamp(0.62rem, 2.05dvh, 0.7rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-dvs { font-size: clamp(0.6rem, 2dvh, 0.68rem); }

/* Placed parents: their DV line is reference, not a decision - the tile
   keeps name, sex, DV total and training. */
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot .nursery-slot-dvs { display: none; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-actions { gap: 8px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-actions .nursery-btn {
  min-width: 72px;
  min-height: 40px;
  padding: 0 8px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-confirm .nursery-btn { min-height: 40px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot--empty {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 56px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-plus { width: 36px; height: 36px; font-size: 1.15rem; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-empty-label { font-size: clamp(0.66rem, 2.2dvh, 0.76rem); }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-cycle {
  gap: 4px 8px;
  padding: 6px 8px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-egg,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-egg img { width: 18px; height: 22px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-collect { min-height: 40px; padding: 0 12px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .monster-search input {
  min-height: 40px;
  padding: 0 10px;
  font-size: clamp(0.66rem, 2.1dvh, 0.76rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters { flex: 0 0 auto; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters > button {
  min-height: 40px;
  padding: 0 9px;
  font-size: clamp(0.56rem, 1.85dvh, 0.64rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-target-note,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-banner {
  padding: 6px 9px;
  font-size: clamp(0.62rem, 2.05dvh, 0.7rem);
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 1px 8px;
  padding: 4px 7px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-info { gap: 0; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-name { line-height: 1.15; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-meta,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-fit,
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row .nursery-slot-dvs { font-size: 0.75rem; line-height: 14px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row .nursery-source { font-size: 0.56rem; padding: 0 4px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-name { font-size: 0.85rem; line-height: 17px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidates { gap: 4px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row img { width: 40px; height: 40px; }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-place {
  min-height: 40px;
  padding: 0 11px;
}

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet { padding: 8px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-sheet-body { padding: 10px 12px 12px; }
html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-guide--open ul { font-size: clamp(0.62rem, 2.05dvh, 0.72rem); gap: 6px; }

/* narrow touch: one pane at a time, switched by the section tabs */
@media (max-width: 720px) {
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip > span { display: none; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs { display: flex; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-head-stats .nursery-chip span,
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip { padding-right: 8px; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-body { grid-template-columns: minmax(0, 1fr); }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2[data-nursery-tab="pens"] .nursery-picker { display: none; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2[data-nursery-tab="parents"] .nursery-pens-pane { display: none; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-filters > button { padding: 0 7px; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tabs > button { min-height: 36px; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-target-note { min-height: 32px; padding: 2px 9px; }
}

/* very short landscape phones */
@media (max-height: 380px) {
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-slot-dvs { display: none; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-chip { min-height: 28px; }
  html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-candidate-row { padding: 3px 7px; }
}

/* ---- pen automation (farm desk): auto-collect / pause laying ------------- */
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle {
  gap: 7px;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.7rem;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--nv-rule-strong);
  border-radius: 50%;
  background: transparent;
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle b { color: var(--nv-mute); font-weight: 800; }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle.is-on {
  border-color: var(--nv-rule);
  color: var(--nv-ink);
  background: #e8e0cf;
  box-shadow: inset 0 -2px 0 var(--nv-ink);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle.is-on i {
  border-color: var(--nv-verd);
  background: var(--nv-verd);
}

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle.is-on b { color: var(--nv-verd); }

.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-paused { border-left-color: var(--nv-rule-strong); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-pen.is-paused .nursery-cycle-progress i { background: var(--nv-rule-strong); }
.modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-tile.is-paused { --tile: var(--nv-rule-strong); color: var(--nv-mute); }

html.is-touch .modal.clean-world-modal .modal-card.nursery-card--v2 .nursery-toggle {
  min-height: 40px;
  padding: 0 11px;
  font-size: clamp(0.6rem, 2dvh, 0.7rem);
}

/* ==========================================================================
 * BAG · MOBILE LANDSCAPE v2 (2026-08-25)
 * Masthead joins the controls ([Bag | search | Box] over a chip rail), the
 * sections tile two-up, long-copy rows (Training / Mounts / TM) go
 * full-width so their description keeps a real column, and every Bag picker
 * (recovery / candy / DV / mounts) gets its own flex shell: the Monster-Box
 * landscape grid ("B1 - shell", .box-card--scroll -> "title tools" areas)
 * used to swallow all of them, which put the title in a side column and
 * stretched Back into a slab. Selectors carry the family class so they win
 * the Ledger component layer on specificity, not on source order.
 * ========================================================================== */

/* ---- shared bits (all pointers) ------------------------------------------ */
.bag-head-box { display: none; }
.bag-mount-thumb,
.bag-target-thumb {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  color: var(--mw-gold-deep, #6f5210);
  font: 800 0.78rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
}
.bag-mount-thumb::after,
.bag-target-thumb::after {
  content: attr(data-glyph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.bag-mount-thumb[data-painted="1"]::after,
.bag-target-thumb[data-painted="1"]::after { content: none; }
.bag-mount-thumb > canvas,
.bag-target-thumb > canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.bag-target-thumb {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.5), transparent 70%),
    var(--mw-wash, rgba(20, 17, 12, 0.045));
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.08);
}
.bag-target-thumb.is-locked {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.22);
  border: 1px dashed rgba(44, 38, 28, 0.3);
  color: var(--mw-mute, #5f584b);
}
.bag-target-row.is-locked .bag-target-info strong,
.bag-target-row.is-locked .bag-target-info .monster-meta { color: var(--mw-mute, #5f584b) !important; }
.bag-tier {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px 0;
  border: 1px solid rgba(111, 82, 16, 0.45);
  border-radius: 3px;
  color: var(--mw-gold-deep, #6f5210);
  background: linear-gradient(180deg, rgba(168, 128, 31, 0.16), rgba(168, 128, 31, 0.06));
  font: 800 0.66em/1.35 Georgia, "Times New Roman", serif;
  letter-spacing: 0.06em;
  vertical-align: 0.12em;
}
.modal.clean-world-modal .box-card .bag-target-row.is-selected {
  border-color: var(--mw-gold, #a8801f);
  box-shadow:
    inset 0 0 0 1px var(--mw-gold, #a8801f),
    3px 3px 0 -1px var(--mw-leaf-sunk, #ece7d8),
    3px 3px 0 0 rgba(168, 128, 31, 0.35);
}
.bag-target-hp {
  height: 5px;
  margin-top: 5px;
  border-radius: 999px;
  background: rgba(20, 17, 12, 0.12);
  overflow: hidden;
}
.bag-target-hp > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mw-verd, #17614d);
}
.bag-target-hp[data-hp="mid"] > i { background: var(--mw-gold, #a8801f); }
.bag-target-hp[data-hp="low"] > i { background: var(--mw-ox, #872019); }
.bag-target-hp[data-hp="out"] { background: repeating-linear-gradient(90deg, rgba(135, 32, 25, 0.35) 0 4px, transparent 4px 7px); }

/* ---- BAG LEAF - touch landscape ------------------------------------------ */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 {
  padding:
    max(6px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-modal-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  margin: 6px 56px 7px 0;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-modal-head h2 {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
  padding: 3px 8px 8px 0;
  font-size: clamp(1.04rem, 4.9dvh, 1.34rem);
  line-height: 1.05;
  white-space: nowrap;
  background: linear-gradient(var(--mw-accent), var(--mw-accent)) 21px 100% / 48px 2px no-repeat;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-tools { display: contents; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: min(100%, 320px);
  min-width: 0;
  min-height: clamp(32px, 8.8dvh, 38px);
  margin: 0;
  padding: 0 14px;
  border-radius: 999px;
  font-size: clamp(0.66rem, 2.3dvh, 0.76rem);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-head-box {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: clamp(32px, 8.8dvh, 38px);
  margin: 0;
  padding: 0 14px;
  font-size: clamp(0.62rem, 2.2dvh, 0.7rem);
  white-space: nowrap;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-head-box::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-filter {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 1px 2px 3px 1px;
  overflow-x: auto;
  scrollbar-width: none;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-filter button {
  flex: 0 0 auto;
  min-height: clamp(28px, 8dvh, 34px);
  padding: 0 13px;
  border-radius: 999px;
  font-size: clamp(0.6rem, 2.1dvh, 0.68rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-card--v2 .dialogue-actions,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 > .dialogue-actions { display: none; }

html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-scroll {
  gap: 8px;
  padding: 2px 3px 10px 1px;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section[data-bag-cat="recovery"] {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 44vw, 460px), 1fr));
  gap: 6px;
  align-content: start;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-head {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  font-size: clamp(0.56rem, 1.9dvh, 0.66rem);
  letter-spacing: 0.14em;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row {
  margin: 0;
  padding: 7px 9px 7px 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  background: var(--mw-leaf-bright);
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--boost,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--tm,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--mount,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--prism,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--rift,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--relic,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-grid { grid-column: 1 / -1; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--recovery .bag-right { min-width: 0; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-info { gap: 9px; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row-icon,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row .bag-item-glyph {
  width: clamp(34px, 9.6dvh, 42px);
  height: clamp(34px, 9.6dvh, 42px);
  border-radius: 6px;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-info strong {
  display: block;
  font-size: clamp(0.8rem, 2.9dvh, 0.94rem);
  line-height: 1.08;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-info .monster-meta,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row--recovery .monster-meta {
  margin-top: 2px;
  font-size: clamp(0.58rem, 2.05dvh, 0.68rem);
  line-height: 1.22;
  letter-spacing: 0.01em;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-right { gap: 7px; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-qty {
  padding: 3px 9px;
  font-size: clamp(0.62rem, 2.2dvh, 0.74rem);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-have {
  padding: 4px 9px;
  font-size: clamp(0.5rem, 1.8dvh, 0.58rem);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row button {
  min-width: 0;
  min-height: clamp(32px, 8.6dvh, 38px);
  padding: 0 14px;
  font-size: clamp(0.62rem, 2.2dvh, 0.72rem);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-noresult,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-empty {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding: 14px 12px;
  font-size: clamp(0.64rem, 2.3dvh, 0.76rem);
}

/* ---- PICKERS - one flex shell for recovery / candy / DV / mounts ----------- */
html.is-touch .modal.world-map-modal .modal-card.bag-target-card {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  gap: 0;
  padding:
    max(6px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > h2 {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 3px 52px 5px 0;
  padding: 3px 0 7px;
  font-size: clamp(1.04rem, 4.9dvh, 1.34rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background:
    linear-gradient(var(--mw-accent), var(--mw-accent)) 21px 100% / 48px 2px no-repeat,
    linear-gradient(var(--mw-hair), var(--mw-hair)) 0 100% / 100% 1px no-repeat;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  flex: 0 0 auto;
  max-width: none;
  margin: 0 52px 7px 0;
  overflow: hidden;
  font-size: clamp(0.58rem, 2dvh, 0.66rem);
  line-height: 1.28;
  color: var(--mw-mute-strong) !important;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .box-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 3px 8px 1px;
  overflow: auto;
  overscroll-behavior: contain;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(236px, 30vw, 330px), 1fr));
  gap: 7px;
  padding: 0;
  max-width: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row {
  display: grid;
  grid-template-columns: clamp(40px, 11dvh, 50px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 5px 9px;
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 7px 8px 8px;
  border-radius: 6px;
  overflow: hidden;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > img,
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > .bag-target-thumb {
  grid-column: 1;
  grid-row: 1;
  width: clamp(40px, 11dvh, 50px);
  height: clamp(40px, 11dvh, 50px);
  object-fit: contain;
  border-radius: 6px;
  background:
    radial-gradient(90% 80% at 50% 40%, rgba(255, 255, 255, 0.5), transparent 70%),
    var(--mw-wash);
  box-shadow: inset 0 0 0 1px rgba(44, 38, 28, 0.16), inset 0 2px 6px rgba(44, 38, 28, 0.08);
  filter: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > .bag-target-thumb.is-locked {
  background: transparent;
  box-shadow: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-info {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-info strong {
  display: block;
  font-size: clamp(0.74rem, 2.7dvh, 0.88rem);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-info .monster-meta {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-top: 2px;
  overflow: hidden;
  overflow-wrap: normal;
  font-size: clamp(0.56rem, 1.95dvh, 0.64rem);
  line-height: 1.22;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > button {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  min-width: 0;
  min-height: clamp(32px, 8.8dvh, 38px);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.6rem, 2.2dvh, 0.7rem);
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > button:not(:disabled) {
  color: #f6f2e7;
  background: linear-gradient(180deg, #2a231a, var(--mw-ink));
  border-color: var(--mw-ink);
  box-shadow: 2px 2px 0 0 rgba(20, 17, 12, 0.28);
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row > button:disabled {
  border-style: dashed;
  box-shadow: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-selected > button:disabled {
  color: var(--mw-gold-deep);
  border-style: solid;
  border-color: rgba(168, 128, 31, 0.55);
  background: linear-gradient(180deg, rgba(168, 128, 31, 0.16), rgba(168, 128, 31, 0.06));
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .dialogue-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  margin: 6px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--mw-hair);
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .dialogue-actions button {
  width: auto;
  min-width: 0;
  min-height: clamp(32px, 8.8dvh, 36px);
  padding: 0 16px 0 12px;
  font-size: clamp(0.62rem, 2.2dvh, 0.7rem);
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .dialogue-actions button::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
}

/* ---- CANDY AMOUNT - the budget step ------------------------------------- */
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding:
    max(6px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow: hidden;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > h2 {
  flex: 0 0 auto;
  margin: 3px 52px 5px 0;
  padding: 3px 0 7px;
  font-size: clamp(1.04rem, 4.9dvh, 1.34rem);
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background:
    linear-gradient(var(--mw-accent), var(--mw-accent)) 21px 100% / 48px 2px no-repeat,
    linear-gradient(var(--mw-hair), var(--mw-hair)) 0 100% / 100% 1px no-repeat;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > p {
  flex: 0 0 auto;
  max-width: none;
  margin: 2px 52px 0 0;
  font-size: clamp(0.62rem, 2.25dvh, 0.74rem);
  line-height: 1.32;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 14vw, 150px), 1fr));
  align-content: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  min-height: 0;
  margin: 0 auto;
  padding: 8px 0;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button {
  min-width: 0;
  min-height: clamp(46px, 15dvh, 64px);
  padding: 0 10px;
  font-size: clamp(0.88rem, 3.6dvh, 1.12rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .dialogue-actions:not(.bag-amount-chips) {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--mw-hair);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .dialogue-actions:not(.bag-amount-chips) button {
  width: auto;
  min-width: 0;
  min-height: clamp(32px, 8.8dvh, 36px);
  padding: 0 16px 0 12px;
  font-size: clamp(0.62rem, 2.2dvh, 0.7rem);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .dialogue-actions:not(.bag-amount-chips) button::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
}

/* very short landscape phones */
@media (max-height: 360px) {
  html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-modal-head { row-gap: 4px; margin-bottom: 5px; }
  html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row { padding: 5px 8px; }
  html.is-touch .modal.world-map-modal .modal-card.bag-target-card > p { -webkit-line-clamp: 1; }
}

/* ---- BAG · MOBILE LANDSCAPE v2 · round 3 ---------------------------------- */
/* Stones: the shop-row tiles were desktop-sized (150px tall) - same card
   grammar as every other bag row. */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 32vw, 320px), 1fr));
  gap: 6px;
  margin: 0;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .shop-row.bag-stone-row {
  margin: 0;
  padding: 7px 9px 7px 8px;
  grid-template-columns: clamp(34px, 9.6dvh, 42px) minmax(0, 1fr);
  gap: 9px;
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  background: var(--mw-leaf-bright);
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-icon {
  width: clamp(34px, 9.6dvh, 42px);
  height: clamp(34px, 9.6dvh, 42px);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.28));
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-row strong {
  display: block;
  font-size: clamp(0.8rem, 2.9dvh, 0.94rem);
  line-height: 1.08;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-row .monster-meta {
  margin-top: 2px;
  font-size: clamp(0.58rem, 2.05dvh, 0.68rem);
  line-height: 1.22;
}

/* Desktop pickers: names ellipsize instead of breaking mid-word, tiles two-up
   so the 54px sprite + verb button leave the copy a real column. */
html:not(.is-touch) .modal.clean-world-modal .bag-target-card .bag-target-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
html:not(.is-touch) .modal.clean-world-modal .bag-target-card .bag-target-info strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
html:not(.is-touch) .modal.clean-world-modal .bag-target-card .bag-target-info .monster-meta {
  overflow-wrap: normal;
}
html:not(.is-touch) .modal.clean-world-modal .bag-target-card .bag-target-row > button {
  min-width: 0;
  padding-inline: 12px;
  white-space: nowrap;
}

/* ---- BAG · MOBILE LANDSCAPE v2 · round 4 (critic pass 8.0 -> component fixes) --
   Blank icon wells so every row shares one left margin, chapter-end ornament,
   masthead field meets the title, partner pickers two-up with a compact verb,
   locked mounts get a second voice, meta segments never orphan, scrollers fade. */

/* shared (all pointers) */
.bag-row-icon--blank {
  display: inline-grid;
  place-items: center;
  flex: none;
}
.modal.clean-world-modal .bag-card .bag-row-icon--blank {
  background: transparent;
  border: 1px dashed var(--mw-rule-strong);
  box-shadow: none;
}
.bag-row-icon--blank::after {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--mw-rule-strong, rgba(20, 17, 12, 0.38));
  transform: rotate(45deg);
}
.bag-end-mark {
  position: relative;
  width: 140px;
  height: 14px;
  margin: 16px auto 6px;
  background: linear-gradient(90deg, var(--mw-rule) 0 40%, transparent 40% 60%, var(--mw-rule) 60%) 50% 50% / 100% 1px no-repeat;
}
.bag-end-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--mw-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: inset -1px -1px 0 rgba(20, 17, 12, 0.35);
}
.bag-noresult:not([hidden]) + .bag-end-mark,
.bag-empty ~ .bag-end-mark { display: none; }
.bag-meta-seg { white-space: nowrap; }
.bag-amount-plate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--mw-rule);
  border-radius: 6px;
  background: var(--mw-leaf-bright);
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
.bag-amount-plate .bag-row-icon { width: 42px; height: 42px; }
.bag-amount-plate strong { display: block; }
.bag-amount-plate .monster-meta { margin-top: 3px; }
.bag-amount-chips button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bag-amount-chips button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.bag-target-row.is-locked .bag-tier { display: none; }
.modal.clean-world-modal .box-card .bag-target-row.is-locked .bag-target-info .monster-meta {
  color: var(--mw-mute) !important;
  font-weight: 600;
}
.bag-target-row--mount .bag-target-info .monster-meta::first-letter { text-transform: uppercase; }

/* ---- masthead: the field meets the title, the diamond sits on the x-height -- */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-modal-head h2::before {
  transform: rotate(45deg) translate(1.4px, 1.4px);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch {
  justify-self: start;
  width: 100%;
  max-width: 480px;
  margin-left: 12px;
  border-radius: 10px;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section[data-bag-cat="recovery"],
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-grid { gap: 8px; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-scroll {
  gap: 10px;
  padding-bottom: 30px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-scroll::-webkit-scrollbar { display: none; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-end-mark { margin: 10px auto 2px; }
/* second voice: descriptions at 600 / muted ink so name + pill carry the row */
html.is-touch .modal.clean-world-modal.world-map-modal .shop-card.bag-card--v2 .bag-row .monster-meta,
html.is-touch .modal.clean-world-modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-row .monster-meta {
  color: var(--mw-mute-strong) !important;
  font-weight: 600;
}
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .shop-row.bag-stone-row {
  grid-template-columns: clamp(34px, 9.6dvh, 42px) minmax(0, 1fr) auto;
}
.bag-stone-grid .shop-row.bag-stone-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-row-icon--blank::after { width: 6px; height: 6px; }

/* ---- pickers ------------------------------------------------------------- */
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .box-scroll {
  padding-bottom: 30px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .box-scroll::-webkit-scrollbar { display: none; }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-list { gap: 8px; }
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-info .monster-meta {
  color: var(--mw-mute-strong) !important;
  font-weight: 600;
}
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-locked .bag-target-info strong,
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-locked .bag-target-info .monster-meta {
  color: var(--mw-mute) !important;
}
/* partner pickers (recovery / candy / DV): two-up rows, compact verb at the right */
html.is-touch .modal.world-map-modal .modal-card.bag-target-card:not(.bag-target-card--mounts) .bag-target-list {
  grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 44vw, 460px), 1fr));
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card:not(.bag-target-card--mounts) .bag-target-row {
  grid-template-columns: clamp(40px, 11dvh, 48px) minmax(0, 1fr) auto;
  grid-template-rows: auto;
  padding: 7px 9px 7px 8px;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card:not(.bag-target-card--mounts) .bag-target-row > button {
  grid-column: 3;
  grid-row: 1;
  width: auto;
  min-width: 92px;
  padding: 0 14px;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .dialogue-actions {
  margin-top: 4px;
  padding-top: 4px;
}
html.is-touch .modal.world-map-modal .modal-card.bag-target-card > .dialogue-actions button,
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .dialogue-actions:not(.bag-amount-chips) button {
  min-height: clamp(30px, 8.4dvh, 34px);
}

/* ---- candy budget step: item plate + option cards, anchored to the top ------ */
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-plate {
  flex: 0 0 auto;
  margin: 2px 0 10px;
  padding: 7px 9px 7px 8px;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-plate .bag-row-icon {
  width: clamp(34px, 9.6dvh, 42px);
  height: clamp(34px, 9.6dvh, 42px);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-plate strong {
  font-size: clamp(0.8rem, 2.9dvh, 0.94rem);
  line-height: 1.08;
}
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-amount-card .bag-amount-plate .monster-meta {
  margin-top: 2px;
  font-size: clamp(0.58rem, 2.05dvh, 0.68rem);
  line-height: 1.22;
  color: var(--mw-mute-strong) !important;
  font-weight: 600;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips {
  flex: 1 1 auto;
  align-content: start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: none;
  margin: 0;
  padding: 0;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: clamp(66px, 22dvh, 92px);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: clamp(0.88rem, 3.6dvh, 1.12rem);
  background: var(--mw-leaf-bright);
  box-shadow: 2px 2px 0 -1px var(--mw-leaf-sunk), 2px 2px 0 0 rgba(20, 17, 12, 0.12);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button img {
  width: clamp(24px, 7dvh, 30px);
  height: clamp(24px, 7dvh, 30px);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button b { line-height: 1; }

/* ---- close disc seated on the masthead row (bag family only) ---------------- */
html.is-touch .modal.clean-world-modal.world-map-modal:is(:has(.bag-card--v2), :has(.bag-target-card), :has(.bag-amount-card)) .world-modal-close {
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}

/* ===========================================================================
   OATH TRAINER CINEMATIC
   Four recurring ascent trainers now introduce and answer their oath trials
   in a short, map-backed confrontation cut. No card chrome: the scene owns the
   full frame, while the rule, speaker and one required action stay readable.
   ========================================================================== */
.modal.clean-world-modal.oath-trainer-modal {
  display: block;
  padding: 0 !important;
  overflow: hidden;
  color: #f8fbff;
  background: #03040a !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.oath-trainer-cine {
  --oath-accent: #ffd66b;
  --oath-accent-2: #8fe8ff;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 420px;
  overflow: hidden;
  color: #f8fbff;
  background:
    radial-gradient(circle at 22% 52%, color-mix(in srgb, var(--oath-accent) 20%, transparent), transparent 34%),
    linear-gradient(118deg, #080a12 0%, #070812 48%, #030409 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.oath-trainer-cine__world,
.oath-trainer-cine__map,
.oath-trainer-cine__map-shade,
.oath-trainer-cine__horizon,
.oath-trainer-cine__motes,
.oath-trainer-cine__wipe,
.oath-trainer-cine__flash,
.oath-trainer-cine__grain,
.oath-trainer-cine__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.oath-trainer-cine__world {
  z-index: -5;
  overflow: hidden;
  background: #090b12;
}

.oath-trainer-cine__map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
  filter: saturate(0.72) contrast(1.1) brightness(0.52);
  transform: scale(1.1);
  animation: oath-trainer-map-arrive 6.5s cubic-bezier(0.18, 0.75, 0.2, 1) both;
}

.oath-trainer-cine__map-shade {
  background:
    linear-gradient(90deg, rgba(2, 3, 8, 0.18) 0%, rgba(2, 3, 8, 0.38) 42%, rgba(2, 3, 8, 0.96) 78%, #030409 100%),
    linear-gradient(180deg, rgba(2, 3, 8, 0.25), transparent 28%, rgba(2, 3, 8, 0.62) 84%, #030409),
    radial-gradient(circle at 28% 50%, color-mix(in srgb, var(--oath-accent) 18%, transparent), transparent 34%);
}

.oath-trainer-cine__horizon {
  inset: 48% -8% auto -8%;
  height: 2px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent, var(--oath-accent), var(--oath-accent-2), transparent);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--oath-accent) 72%, transparent),
    0 0 80px color-mix(in srgb, var(--oath-accent-2) 24%, transparent);
  transform: scaleX(0);
  animation: oath-trainer-horizon 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) 0.18s forwards;
}

.oath-trainer-cine__motes i {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  width: var(--ms);
  height: var(--ms);
  border-radius: 50%;
  opacity: 0;
  background: color-mix(in srgb, var(--oath-accent) 74%, #fff);
  box-shadow: 0 0 9px var(--oath-accent);
  animation: oath-trainer-mote var(--mt) linear var(--ml) infinite;
}

.oath-trainer-cine__wipe {
  z-index: 8;
  inset: -30% -18%;
  background:
    linear-gradient(108deg,
      transparent 38%,
      color-mix(in srgb, var(--oath-accent) 26%, transparent) 45%,
      rgba(255, 255, 255, 0.92) 49.4%,
      color-mix(in srgb, var(--oath-accent-2) 54%, transparent) 50.5%,
      transparent 57%);
  transform: translateX(-78%) rotate(-2deg);
  mix-blend-mode: screen;
  animation: oath-trainer-wipe 0.74s cubic-bezier(0.42, 0, 0.18, 1) 0.03s both;
}

.oath-trainer-cine__layout {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - clamp(40px, 7vw, 120px)));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: clamp(28px, 6vw, 100px);
}

.oath-trainer-cine__hero {
  position: relative;
  align-self: stretch;
  min-width: 0;
}

.oath-trainer-cine__sigil {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: clamp(280px, 38vw, 520px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--oath-accent) 35%, transparent);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.76) rotate(-24deg);
  animation: oath-trainer-sigil-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s forwards;
}

.oath-trainer-cine__sigil::before,
.oath-trainer-cine__sigil::after,
.oath-trainer-cine__sigil i {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid color-mix(in srgb, var(--oath-accent-2) 30%, transparent);
  transform: rotate(45deg);
}

.oath-trainer-cine__sigil::after {
  inset: 22%;
  border-color: color-mix(in srgb, var(--oath-accent) 52%, transparent);
  animation: oath-trainer-sigil-turn 18s linear infinite reverse;
}

.oath-trainer-cine__sigil i:nth-child(1) {
  inset: -5%;
  border-radius: 50%;
  border-style: dashed;
  transform: none;
  animation: oath-trainer-sigil-turn 28s linear infinite;
}

.oath-trainer-cine__sigil i:nth-child(2) {
  inset: 15%;
  border-radius: 50%;
  transform: none;
}

.oath-trainer-cine__sigil i:nth-child(3) {
  inset: 33%;
  transform: rotate(45deg);
  background: color-mix(in srgb, var(--oath-accent) 6%, transparent);
  box-shadow: 0 0 60px color-mix(in srgb, var(--oath-accent) 20%, transparent);
}

.oath-trainer-cine__sigil > span {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: color-mix(in srgb, var(--oath-accent) 54%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 12vw, 10rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.08em;
}

.oath-trainer-cine__portrait-aura {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 16%;
  width: min(70%, 420px);
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--oath-accent) 35%, transparent), transparent 66%);
  filter: blur(12px);
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  animation: oath-trainer-aura-in 1.1s ease-out 0.32s forwards, oath-trainer-aura-breathe 4s ease-in-out 1.4s infinite;
}

.oath-trainer-cine__portrait-shell {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12%;
  width: min(88%, 510px);
  height: min(72vh, 650px);
  transform: translateX(-50%);
  filter: drop-shadow(0 32px 30px rgba(0, 0, 0, 0.56));
}

.oath-trainer-cine__portrait-echo {
  position: absolute;
  inset: 14% 4% 3%;
  border: 1px solid color-mix(in srgb, var(--oath-accent) 34%, transparent);
  clip-path: polygon(50% 0, 100% 72%, 72% 100%, 28% 100%, 0 72%);
  opacity: 0;
  transform: scale(0.8);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--oath-accent) 9%, transparent), transparent 48%),
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--oath-accent-2) 8%, transparent) 24px 25px);
  animation: oath-trainer-echo-in 0.9s ease-out 0.4s forwards;
}

.oath-trainer-cine__portrait-sprite {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: min(100%, 510px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  opacity: 0;
  transform: translate3d(-58%, 42px, 0) scale(1.08);
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25))
    drop-shadow(0 0 28px color-mix(in srgb, var(--oath-accent) 32%, transparent));
  animation: oath-trainer-portrait-in 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards;
}

.oath-trainer-cine__portrait-sprite::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: no-repeat;
  opacity: 0.16;
  filter: blur(8px) saturate(1.8);
  transform: translateX(-12px) scale(1.04);
}

.oath-trainer-cine__portrait-sprite.has-sheet > span { display: none; }

.oath-trainer-cine__portrait-sprite > span {
  color: var(--oath-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(8rem, 23vw, 17rem);
  text-shadow: 0 0 40px color-mix(in srgb, var(--oath-accent) 48%, transparent);
}

.oath-trainer-cine__ground {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10%;
  width: min(92%, 550px);
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--oath-accent) 64%, transparent), transparent 68%);
  filter: blur(6px);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.45);
  animation: oath-trainer-ground-in 0.72s ease-out 0.52s forwards;
}

.oath-trainer-cine__copy {
  position: relative;
  min-width: 0;
  max-width: 610px;
  padding: clamp(32px, 5vh, 60px) 0;
}

.oath-trainer-cine__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  color: rgba(239, 246, 255, 0.62);
  font-size: clamp(0.66rem, 0.9vw, 0.78rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  animation: oath-trainer-copy-in 0.5s ease-out 0.34s forwards;
}

.oath-trainer-cine__eyebrow b {
  flex: 0 0 auto;
  color: var(--oath-accent);
  font-variant-numeric: tabular-nums;
}

.oath-trainer-cine__progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: clamp(22px, 3.6vh, 38px);
  opacity: 0;
  animation: oath-trainer-copy-in 0.5s ease-out 0.4s forwards;
}

.oath-trainer-cine__progress > i {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: visible;
}

.oath-trainer-cine__progress > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--oath-accent), var(--oath-accent-2));
  transform: scaleX(0);
  transform-origin: left;
}

.oath-trainer-cine__progress > i.is-cleared::after { transform: scaleX(1); }
.oath-trainer-cine__progress > i.is-current::after {
  transform: scaleX(1);
  box-shadow: 0 0 12px var(--oath-accent);
  animation: oath-trainer-progress-pulse 2.2s ease-in-out infinite;
}

.oath-trainer-cine__progress > i span {
  position: absolute;
  right: 0;
  bottom: 7px;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.oath-trainer-cine__progress > i.is-current span { color: var(--oath-accent); }

.oath-trainer-cine__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--oath-accent);
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(18px);
  animation: oath-trainer-copy-in 0.52s ease-out 0.46s forwards;
}

.oath-trainer-cine__kicker i,
.oath-trainer-cine__speaker i {
  display: block;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  box-shadow: 0 0 10px currentColor;
}

.oath-trainer-cine__oath-name {
  margin: 0 0 7px;
  color: rgba(231, 239, 251, 0.72);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.9rem, 1.35vw, 1.08rem);
  font-style: italic;
  letter-spacing: 0.035em;
  opacity: 0;
  animation: oath-trainer-copy-in 0.52s ease-out 0.5s forwards;
}

.oath-trainer-cine__copy h2 {
  margin: 0;
  max-width: 15ch;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.2vw, 5.4rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.72);
  opacity: 0;
  transform: translateX(26px);
  animation: oath-trainer-title-in 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.oath-trainer-cine--victory .oath-trainer-cine__copy h2 {
  text-shadow: 0 0 36px color-mix(in srgb, var(--oath-accent) 24%, transparent), 0 8px 36px rgba(0, 0, 0, 0.72);
}

.oath-trainer-cine__speaker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: clamp(20px, 3.2vh, 34px) 0 10px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.74rem, 1vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  animation: oath-trainer-copy-in 0.5s ease-out 0.64s forwards;
}

.oath-trainer-cine__speaker i {
  width: 6px;
  height: 6px;
  color: var(--oath-accent-2);
  box-shadow: none;
}

.oath-trainer-cine__copy blockquote {
  position: relative;
  margin: 0;
  padding: 0 0 0 19px;
  border-left: 1px solid color-mix(in srgb, var(--oath-accent) 58%, transparent);
  opacity: 0;
  transform: translateY(10px);
  animation: oath-trainer-copy-in 0.58s ease-out 0.7s forwards;
}

.oath-trainer-cine__copy blockquote::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 3px;
  height: 32%;
  background: var(--oath-accent);
  box-shadow: 0 0 13px var(--oath-accent);
}

.oath-trainer-cine__copy blockquote p { margin: 0; }

.oath-trainer-cine__primary {
  color: rgba(250, 252, 255, 0.96);
  font-size: clamp(0.98rem, 1.35vw, 1.18rem);
  font-weight: 650;
  line-height: 1.48;
  text-wrap: pretty;
}

.oath-trainer-cine__response {
  margin-top: 9px !important;
  color: rgba(223, 231, 242, 0.72);
  font-size: clamp(0.85rem, 1.08vw, 0.98rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.oath-trainer-cine__rule {
  display: grid;
  gap: 3px;
  width: fit-content;
  margin: clamp(18px, 3vh, 30px) 0 0;
  padding: 9px 13px 9px 15px;
  border: 1px solid color-mix(in srgb, var(--oath-accent) 34%, transparent);
  border-left: 3px solid var(--oath-accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--oath-accent) 12%, rgba(7, 9, 16, 0.72)), rgba(7, 9, 16, 0.48));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  animation: oath-trainer-copy-in 0.5s ease-out 0.8s forwards;
}

.oath-trainer-cine__rule span {
  color: rgba(225, 233, 245, 0.5);
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.oath-trainer-cine__rule strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.72rem, 0.92vw, 0.84rem);
  line-height: 1.24;
}

.modal.oath-trainer-modal .oath-trainer-cine__action {
  position: relative;
  min-width: min(100%, 248px);
  min-height: 50px;
  margin-top: clamp(19px, 3vh, 30px);
  padding: 0 17px 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--oath-accent) 60%, #fff 12%);
  border-radius: 2px;
  color: #080a0d;
  background: linear-gradient(110deg, var(--oath-accent), color-mix(in srgb, var(--oath-accent) 54%, var(--oath-accent-2)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 12px 34px color-mix(in srgb, var(--oath-accent) 20%, transparent);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  animation: oath-trainer-action-in 0.55s ease-out 0.88s forwards;
}

.modal.oath-trainer-modal .oath-trainer-cine__action::before {
  content: "";
  position: absolute;
  inset: -100% auto -100% -40%;
  width: 28%;
  background: rgba(255, 255, 255, 0.48);
  transform: rotate(18deg);
  filter: blur(4px);
  animation: oath-trainer-button-sheen 3.4s ease-in-out 1.4s infinite;
}

.modal.oath-trainer-modal .oath-trainer-cine__action:hover {
  color: #020306;
  border-color: rgba(255, 255, 255, 0.8);
  background: linear-gradient(110deg, color-mix(in srgb, var(--oath-accent) 82%, #fff), color-mix(in srgb, var(--oath-accent-2) 68%, #fff));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--oath-accent) 35%, transparent), 0 16px 44px color-mix(in srgb, var(--oath-accent) 29%, transparent);
  transform: translateY(-1px);
}

.modal.oath-trainer-modal .oath-trainer-cine__action:focus-visible {
  color: #080a0d;
  background: linear-gradient(110deg, var(--oath-accent), color-mix(in srgb, var(--oath-accent) 54%, var(--oath-accent-2)));
  border-color: #fff;
  outline: 2px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--oath-accent) 30%, transparent), 0 16px 44px color-mix(in srgb, var(--oath-accent) 26%, transparent);
}

.modal.oath-trainer-modal .oath-trainer-cine__action i {
  font-size: 1.2rem;
  font-style: normal;
  line-height: 1;
  transition: transform 0.18s ease;
}

.modal.oath-trainer-modal .oath-trainer-cine__action:hover i { transform: translateX(3px); }

.oath-trainer-cine__flash {
  z-index: 7;
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
  animation: oath-trainer-flash 0.62s ease-out both;
}

.oath-trainer-cine--victory .oath-trainer-cine__flash {
  background: radial-gradient(circle at 30% 52%, #fff, var(--oath-accent) 18%, transparent 58%);
  animation-duration: 0.82s;
}

.oath-trainer-cine__grain {
  z-index: 9;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: oath-trainer-grain 0.22s steps(2) infinite;
}

.oath-trainer-cine__vignette {
  z-index: 6;
  box-shadow: inset 0 0 150px 44px rgba(0, 0, 0, 0.7);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 15%, transparent 82%, rgba(0, 0, 0, 0.52)),
    radial-gradient(ellipse at 50% 48%, transparent 45%, rgba(1, 2, 6, 0.52) 100%);
}

@keyframes oath-trainer-map-arrive {
  from { transform: scale(1.1) translate3d(-1.5%, 0, 0); }
  to { transform: scale(1.02) translate3d(0, -1%, 0); }
}

@keyframes oath-trainer-horizon { to { transform: scaleX(1); } }

@keyframes oath-trainer-mote {
  0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.5); }
  18% { opacity: 0.56; }
  76% { opacity: 0.28; }
  100% { opacity: 0; transform: translate3d(var(--md), -70px, 0) scale(1.15); }
}

@keyframes oath-trainer-wipe {
  0% { transform: translateX(-78%) rotate(-2deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(82%) rotate(-2deg); opacity: 0; }
}

@keyframes oath-trainer-sigil-in {
  to { opacity: 0.82; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes oath-trainer-sigil-turn { to { transform: rotate(405deg); } }

@keyframes oath-trainer-aura-in {
  to { opacity: 0.72; transform: translateX(-50%) scale(1); }
}

@keyframes oath-trainer-aura-breathe {
  50% { opacity: 0.48; transform: translateX(-50%) scale(0.92); }
}

@keyframes oath-trainer-echo-in {
  to { opacity: 0.68; transform: scale(1); }
}

@keyframes oath-trainer-portrait-in {
  0% { opacity: 0; transform: translate3d(-58%, 42px, 0) scale(1.08); filter: brightness(3) saturate(0) drop-shadow(0 0 40px var(--oath-accent)); }
  54% { opacity: 1; filter: brightness(1.34) saturate(1.2) drop-shadow(0 0 30px var(--oath-accent)); }
  100% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.25)) drop-shadow(0 0 28px color-mix(in srgb, var(--oath-accent) 32%, transparent)); }
}

@keyframes oath-trainer-ground-in {
  to { opacity: 0.8; transform: translateX(-50%) scaleX(1); }
}

@keyframes oath-trainer-copy-in {
  to { opacity: 1; transform: translate(0, 0); }
}

@keyframes oath-trainer-title-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes oath-trainer-progress-pulse {
  50% { filter: brightness(1.5); box-shadow: 0 0 20px var(--oath-accent); }
}

@keyframes oath-trainer-action-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes oath-trainer-button-sheen {
  0%, 54% { left: -40%; opacity: 0; }
  60% { opacity: 0.66; }
  78%, 100% { left: 122%; opacity: 0; }
}

@keyframes oath-trainer-flash {
  0% { opacity: 0.82; }
  100% { opacity: 0; }
}

@keyframes oath-trainer-grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(2%, -3%, 0); }
  50% { transform: translate3d(-3%, 2%, 0); }
  75% { transform: translate3d(3%, 4%, 0); }
  100% { transform: translate3d(-2%, -2%, 0); }
}

@media (max-width: 760px) {
  .oath-trainer-cine {
    min-height: 0;
    overflow: hidden;
  }

  /* Keep the animated 2x film-grain plate from creating a phantom vertical
     scroll range on phones. The grain still drifts inside the viewport. */
  .oath-trainer-cine__grain,
  .oath-trainer-cine__wipe {
    inset: 0;
  }

  .oath-trainer-cine__grain {
    width: 100%;
    height: 100%;
  }

  .oath-trainer-cine__map-shade {
    background:
      linear-gradient(180deg, rgba(2, 3, 8, 0.18) 0%, rgba(2, 3, 8, 0.36) 29%, rgba(2, 3, 8, 0.94) 56%, #030409 100%),
      radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--oath-accent) 22%, transparent), transparent 35%);
  }

  .oath-trainer-cine__layout {
    width: min(100% - 34px, 620px);
    min-height: 0;
    height: 100%;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 37vh) auto;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: max(12px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
  }

  .oath-trainer-cine__layout::-webkit-scrollbar { display: none; }

  .oath-trainer-cine__hero { min-height: 220px; }
  .oath-trainer-cine__sigil { width: min(78vw, 330px); }
  .oath-trainer-cine__portrait-shell {
    bottom: -10%;
    width: min(78vw, 350px);
    height: min(42vh, 360px);
  }
  .oath-trainer-cine__ground { bottom: -4%; width: min(78vw, 380px); }
  .oath-trainer-cine__copy {
    max-width: none;
    padding: 18px 4px 10px;
  }
  .oath-trainer-cine__copy h2 { max-width: 16ch; font-size: clamp(2.35rem, 11vw, 4rem); }
  .oath-trainer-cine__eyebrow { font-size: 0.62rem; }
  .oath-trainer-cine__progress { margin-bottom: 19px; }
  .oath-trainer-cine__speaker { margin-top: 18px; }
  .oath-trainer-cine__primary { font-size: 0.96rem; }
  .oath-trainer-cine__response { font-size: 0.84rem; }
  .oath-trainer-cine__rule { margin-top: 17px; }
  .modal.oath-trainer-modal .oath-trainer-cine__action {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  .oath-trainer-cine { min-height: 360px; }
  .oath-trainer-cine__layout {
    width: min(1120px, calc(100% - 46px));
    grid-template-columns: minmax(210px, 0.72fr) minmax(420px, 1.16fr);
    gap: clamp(22px, 4vw, 60px);
  }
  .oath-trainer-cine__portrait-shell { bottom: 4%; height: min(82vh, 470px); }
  .oath-trainer-cine__sigil { width: min(35vw, 360px); }
  .oath-trainer-cine__ground { bottom: 5%; }
  .oath-trainer-cine__copy { padding: 16px 0; }
  .oath-trainer-cine__eyebrow { margin-bottom: 6px; font-size: 0.58rem; }
  .oath-trainer-cine__progress { margin-bottom: 13px; }
  .oath-trainer-cine__kicker { margin-bottom: 4px; font-size: 0.64rem; }
  .oath-trainer-cine__oath-name { margin-bottom: 3px; font-size: 0.78rem; }
  .oath-trainer-cine__copy h2 { max-width: 20ch; font-size: clamp(2rem, 7.8vh, 3.35rem); }
  .oath-trainer-cine__speaker { margin: 11px 0 6px; font-size: 0.64rem; }
  .oath-trainer-cine__primary { font-size: clamp(0.76rem, 2.65vh, 0.94rem); line-height: 1.34; }
  .oath-trainer-cine__response { margin-top: 5px !important; font-size: clamp(0.69rem, 2.25vh, 0.82rem); line-height: 1.34; }
  .oath-trainer-cine__rule {
    display: inline-grid;
    margin-top: 10px;
    padding: 6px 10px 6px 12px;
  }
  .modal.oath-trainer-modal .oath-trainer-cine__action {
    min-height: 40px;
    margin-top: 10px;
    font-size: 0.67rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oath-trainer-cine *,
  .oath-trainer-cine *::before,
  .oath-trainer-cine *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }
  .oath-trainer-cine__map { transform: scale(1.02); }
  .oath-trainer-cine__motes,
  .oath-trainer-cine__wipe,
  .oath-trainer-cine__flash,
  .oath-trainer-cine__grain { display: none; }
}

/* ---- BAG · MOBILE LANDSCAPE v2 · round 5: candy band fills its space ------- */
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips {
  flex: 0 0 auto;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button {
  min-height: clamp(76px, 27dvh, 112px);
  gap: 7px;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button img {
  width: clamp(28px, 8.5dvh, 36px);
  height: clamp(28px, 8.5dvh, 36px);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .bag-end-mark {
  flex: 0 0 auto;
  margin: 14px auto 0;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card > .dialogue-actions:not(.bag-amount-chips) {
  margin-top: auto;
}

/* ---- BAG · MOBILE LANDSCAPE v2 · round 6: re-grade 9.2 -> leftovers ---------- */
/* 1. masthead slack: the field fills between title and Box, gaps 30 / 16 */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch {
  max-width: none;
  margin-right: 6px;
}
/* 2. quest rows carry 60-80 char descriptions - one column, like Training */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section[data-bag-cat="quest"] {
  grid-template-columns: minmax(0, 1fr);
}
/* 3. designed empty / no-result state */
.bag-end-mark--lead { display: block; margin: 0 auto 14px; }
.bag-noresult .bag-end-mark--lead,
.bag-empty .bag-end-mark--lead { width: 140px; height: 14px; }
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-noresult,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-empty {
  margin: 34px auto 0;
  max-width: 520px;
  padding: 0 24px;
  border: 0;
  text-align: center;
  font-weight: 500;
  font-size: clamp(0.7rem, 2.5dvh, 0.82rem);
  line-height: 1.4;
}
/* 4. candy budget: the plate rests flat, only the options are raised */
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-plate {
  background: transparent;
  border: 1px solid var(--mw-hair);
  box-shadow: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button {
  min-height: clamp(70px, 23dvh, 88px);
  padding: 10px 8px;
  border: 1.5px solid rgba(20, 17, 12, 0.24);
  box-shadow: 3px 3px 0 -1px var(--mw-leaf-sunk), 3px 3px 0 0 rgba(20, 17, 12, 0.16);
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button img {
  width: clamp(26px, 8dvh, 32px);
  height: clamp(26px, 8dvh, 32px);
}
/* 5. AA contrast: the global button:disabled opacity multiplied every ghost
   label down to ~3:1 - explicit ink at full opacity instead */
html.is-touch .modal.clean-world-modal.world-map-modal .shop-card.bag-card--v2 button:disabled,
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card button:disabled,
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-amount-card button:disabled {
  opacity: 1;
  color: #6e6860;
}
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-selected > button:disabled {
  color: #6a4d0e;
}
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-locked .bag-target-info strong,
html.is-touch .modal.clean-world-modal.world-map-modal .modal-card.bag-target-card .bag-target-row.is-locked .bag-target-info .monster-meta {
  color: #625c55 !important;
}
/* 6. mount cards: the verb is a compact button under the copy, not a slab */
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-row > button {
  width: auto;
  min-width: 140px;
  justify-self: end;
}
/* 7. even gutters */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section,
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-section[data-bag-cat="recovery"],
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 .bag-stone-grid,
html.is-touch .modal.world-map-modal .modal-card.bag-target-card .bag-target-list { gap: 10px; }

/* ==========================================================================
   Catch checkpoint hold (Online) - 2026-08-25
   The public-online build confirms a catch with a canonical save reload
   (the new monster's temporary id becomes a server id). That reload raises
   the boundary lock, tears the battle down and exposes the world BEFORE
   the showcase can mount. game.js mountCatchCheckpointHold() raises this
   plate at the BOUND! -> card beat (the same beat the local build cuts on),
   above the boundary lock (z 2147482000) and below the Authority UI
   (2147483000). playCatchShowcase then adopts the very same element as its
   hand-off plate (.carry) - one gradient from the cut to the card, no seam.
   ========================================================================== */
.fx-catch-hold {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 44%,
    #ffffff 0%,
    #ffffff 30%,
    color-mix(in srgb, var(--c1, #fff7a8) 42%, #fff) 56%,
    color-mix(in srgb, var(--c2, #ffe9a0) 26%, #fff) 78%,
    #fffdf4 100%);
  opacity: 1;
  will-change: opacity;
}

/* The held light breathes, so a slow confirmation never reads as a freeze:
   the white core stays white-hot while a charm-tinted ring swells through
   the mid-field and settles again. */
.fx-catch-hold::after {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(circle at 50% 44%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 16%,
    color-mix(in srgb, var(--c1, #fff7a8) 30%, #fff) 42%,
    color-mix(in srgb, var(--c2, #ffe9a0) 20%, #fff) 58%,
    rgba(255, 255, 255, 0) 74%);
  opacity: 0;
  transform: scale(0.94);
  animation: fx-catch-hold-breathe 2400ms ease-in-out 260ms infinite;
}

@keyframes fx-catch-hold-breathe {
  0%, 100% { opacity: 0; transform: scale(0.94); }
  50% { opacity: 0.55; transform: scale(1.04); }
}

/* only when nothing arrives beneath it (failed / stalled confirmation) */
.fx-catch-hold.release {
  animation: fx-catch-hold-out 640ms ease-out both;
}

@keyframes fx-catch-hold-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* adopted by the showcase: thin out from full over the card's entry (the
   same shape as .fx-catch-handoff minus the 0.82 -> 1 swell) */
.fx-catch-hold.carry {
  animation: fx-catch-handoff-carry 950ms linear both;
}

@keyframes fx-catch-handoff-carry {
  0%, 42% { opacity: 1; }
  70% { opacity: 0.42; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* the plate itself stays: a hard white cut still beats the exposed reload */
  .fx-catch-hold::after { animation: none; }
  .fx-catch-hold.release,
  .fx-catch-hold.carry { animation-duration: 1ms; }
}

/* ---- BAG · MOBILE LANDSCAPE v2 · round 7: masthead gap, separators, candy outline -- */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch {
  margin-right: 12px;
  background: rgba(255, 255, 255, 0.65);
}
/* the middle dot belongs to the segment that follows it, so a wrap carries it down */
.bag-meta-dot { display: none; }
.bag-meta-dot + .bag-meta-seg::before { content: "· "; }
html.is-touch .modal.world-map-modal .modal-card.bag-amount-card .bag-amount-chips button {
  border: 1px solid rgba(20, 17, 12, 0.5);
}

/* ---- BAG · round 7b: empty stone meta collapses (section head already names the kind) ---- */
.bag-stone-row .monster-meta:empty { display: none; }

/* ---- BAG · round 7c: separator break opportunity - the hidden dot span still carries whitespace so segments can wrap; the visible dot is drawn by the following segment ---- */
.bag-meta-dot { display: inline; font-size: 0; line-height: 0; }

/* ---- BAG · round 7d: separator carrier is a zero-width atomic inline, so the visible " · " keeps its leading space mid-line and sheds it at a line start ---- */
.bag-meta-dot { display: inline-block; width: 0; overflow: hidden; font-size: 0; line-height: 0; vertical-align: baseline; }
.bag-meta-dot + .bag-meta-seg::before { content: " · "; }

/* ---- BAG · round 7e: masthead gap - width:100% + margin overflowed the grid column into the gutter; stretch respects margins ---- */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch {
  justify-self: stretch;
  width: auto;
  max-width: none;
  margin: 0 12px 0 12px;
}

/* ---- BAG · round 7f: masthead rhythm 12 / 12 / 15 ---- */
html.is-touch .modal.world-map-modal .shop-card.bag-card--v2 #bagSearch { margin: 0 2px; }

/* ---- BAG · round 8: mount cards - verb on the name row, copy runs beneath it, no empty quadrant ---- */
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-list { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 44vw, 460px), 1fr)); }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-row { grid-template-columns: clamp(40px, 11dvh, 48px) minmax(0, 1fr) auto; grid-template-rows: auto; align-items: start; padding: 7px 9px 7px 8px; }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-row > .bag-target-thumb { grid-row: 1; align-self: start; }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-info { grid-column: 2; grid-row: 1; }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-info .monster-meta { -webkit-line-clamp: 3; }
html.is-touch .modal.world-map-modal .modal-card.bag-target-card--mounts .bag-target-row > button { grid-column: 3; grid-row: 1; align-self: start; width: auto; min-width: 112px; margin: 0; justify-self: end; }

/* ---- HONEYDEW PRISM BOWER · Iri's early Mist Veil handoff -------------- */
.honeydew-iri-tm-scene {
  background:
    radial-gradient(circle at 50% 38%, rgba(159, 230, 255, 0.34), transparent 34%),
    radial-gradient(circle at 50% 70%, rgba(255, 247, 168, 0.15), transparent 54%),
    linear-gradient(180deg, #162b2b, #0c1717 62%, #070d0d);
  border: 1px solid rgba(196, 244, 255, 0.3);
  box-shadow: 0 24px 70px rgba(1, 10, 12, 0.7), inset 0 0 70px rgba(159, 230, 255, 0.08);
}

#modal > .honeydew-iri-tm-result.evolution-result {
  width: min(500px, calc(100vw - 42px));
  max-width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 24px 28px 22px;
  border-color: rgba(159, 230, 255, 0.5);
  background:
    radial-gradient(circle at 50% 21%, rgba(159, 230, 255, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(19, 42, 44, 0.98), rgba(8, 18, 22, 0.99));
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(255, 247, 168, 0.08);
}

#modal > .honeydew-iri-tm-result.evolution-result .dig-result-gem {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  margin: 0 auto 2px;
}

#modal > .honeydew-iri-tm-result.evolution-result img.dig-result-stone {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

#modal > .honeydew-iri-tm-result.evolution-result h2 {
  margin: 0;
  color: #fff3ba;
  text-align: center;
}

#modal > .honeydew-iri-tm-result.evolution-result p {
  max-width: 430px;
  margin: 0;
  color: rgba(238, 252, 255, 0.9);
  line-height: 1.42;
  text-align: center;
}

#modal > .honeydew-iri-tm-result.evolution-result p strong {
  color: #c7f4ff;
}

#modal > .honeydew-iri-tm-result.evolution-result .dialogue-actions {
  width: 100%;
  margin-top: 5px;
  justify-content: center;
}

@media (max-width: 560px), (orientation: landscape) and (max-height: 520px) {
  #modal > .honeydew-iri-tm-result.evolution-result {
    gap: 6px;
    padding: 15px 18px 14px;
  }

  #modal > .honeydew-iri-tm-result.evolution-result .dig-result-gem {
    width: 86px;
    height: 86px;
  }
}

/* ---- Reedfen: the residue briefing over the receiver -------------------
   DOM overlay on the playfield (#reedfenScan). Phases via data-phase:
   tune (bars + static + caller card) -> scan (the beam sweeps Reed's residue
   map into view) -> speak (his line types on over the scan) -> leave
   (CRT-off, bars lift). Full-bleed on phones, above the touch controls. */
.reedfen-scan {
  --rs-cyan: #8ae8ff;
  --rs-cyan-soft: rgba(138, 232, 255, 0.55);
  --rs-violet: #b48cff;
  --rs-paper: #eef8ff;
  --rs-ink: #04090f;
  --rs-bar: clamp(14px, 6.5%, 44px);
  --rs-pad: clamp(12px, 3.6vw, 40px);
  --rs-sweep: 1350ms;
  position: absolute;
  inset: 10px;
  z-index: 13;
  overflow: hidden;
  border-radius: 8px;
  color: var(--rs-paper);
  font-family: var(--font);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* phones: mounted on <body>, full-bleed, above the touch controls and the
   online dock (the stick and buttons are dead during the scan anyway) but
   under the public-online boundary lock */
html.is-touch .reedfen-scan {
  position: fixed;
  inset: 0;
  z-index: 2147482300;
  border-radius: 0;
}

/* the stick, the A / menu buttons and the online dock sleep under the frame */
body.reedfen-scan-open #touchControls,
body.reedfen-scan-open .online-topline {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 240ms ease;
}

/* ambient bleed: the scan itself, blurred and dimmed, fills the frame edges */
.reedfen-scan .rs-bleed {
  position: absolute;
  inset: -6%;
  background-position: center;
  background-size: cover;
  filter: blur(28px) saturate(1.2) brightness(0.42);
  opacity: 0;
  transform: scale(1.06);
}

.reedfen-scan[data-phase="scan"] .rs-bleed,
.reedfen-scan[data-phase="speak"] .rs-bleed { animation: rs-fade-in 900ms ease-out both; }

.reedfen-scan .rs-grade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 76% 70% at 50% 50%, rgba(4, 9, 15, 0.42) 30%, rgba(4, 9, 15, 0.82) 100%),
    linear-gradient(180deg, rgba(4, 9, 15, 0.55), rgba(4, 9, 15, 0.35) 40%, rgba(4, 9, 15, 0.35) 60%, rgba(4, 9, 15, 0.6));
  animation: rs-fade-in 640ms ease-out both;
}

/* receiver static while the signal tunes in */
.reedfen-scan .rs-static {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.85  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: screen;
  opacity: 0;
  animation: rs-static-in 420ms ease-out both, rs-static-jitter 140ms steps(2) infinite 420ms;
}

.reedfen-scan .rs-static::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18%;
  top: -18%;
  background: linear-gradient(180deg, transparent, rgba(138, 232, 255, 0.22), transparent);
  animation: rs-static-band 1500ms linear infinite;
}

.reedfen-scan[data-phase="scan"] .rs-static,
.reedfen-scan[data-phase="speak"] .rs-static,
.reedfen-scan[data-phase="leave"] .rs-static { animation: rs-static-out 480ms ease-in both; }

/* the caller card - centred while the signal tunes, gone once the scan lands */
.reedfen-scan .rs-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92%, 640px);
  translate: -50% -50%;
  text-align: center;
  pointer-events: none;
}

.reedfen-scan .rs-kicker {
  margin: 0;
  font: 700 clamp(0.56rem, 1.4vw, 0.76rem)/1 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--rs-cyan);
  text-shadow: 0 0 14px var(--rs-cyan-soft);
  animation: rs-fade-up 520ms ease-out 260ms both;
}

.reedfen-scan .rs-card h2 {
  margin: 6px 0 0;
  font-size: clamp(1.35rem, 4.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.08;
  color: var(--rs-paper);
  text-shadow: 0 0 26px var(--rs-cyan-soft), 0 3px 14px rgba(0, 0, 0, 0.8);
  animation: rs-title-in 760ms cubic-bezier(0.2, 0.9, 0.28, 1) 420ms both;
}

.reedfen-scan .rs-sub {
  margin: 10px 0 0;
  font-size: clamp(0.72rem, 1.7vw, 0.95rem);
  font-style: italic;
  color: rgba(238, 248, 255, 0.82);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  animation: rs-fade-up 520ms ease-out 760ms both;
}

.reedfen-scan[data-phase="scan"] .rs-card,
.reedfen-scan[data-phase="speak"] .rs-card,
.reedfen-scan[data-phase="leave"] .rs-card { animation: rs-card-out 360ms ease-in both; }

/* the scan: a 16:9 panel as large as the frame between the bars allows */
.reedfen-scan .rs-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--rs-bar);
  bottom: var(--rs-bar);
  display: grid;
  place-items: center;
  padding: 6px var(--rs-pad);
  container-type: size;
}

.reedfen-scan .rs-panel {
  position: relative;
  width: min(100%, calc((100cqh - 12px) * 16 / 9));
  max-height: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(4, 9, 15, 0.6);
  box-shadow: 0 0 0 1px rgba(138, 232, 255, 0.16), 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(138, 232, 255, 0.06);
  opacity: 0;
  transform: scale(0.965);
}

.reedfen-scan[data-phase="scan"] .rs-panel,
.reedfen-scan[data-phase="speak"] .rs-panel { animation: rs-panel-in 520ms cubic-bezier(0.2, 0.9, 0.28, 1) both; }

.reedfen-scan .rs-img,
.reedfen-scan .rs-vein {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* the map is hidden until the beam has passed over it */
.reedfen-scan .rs-img {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
}

.reedfen-scan[data-phase="scan"] .rs-img { animation: rs-reveal var(--rs-sweep) linear 120ms both; }
.reedfen-scan[data-phase="speak"] .rs-img,
.reedfen-scan[data-phase="leave"] .rs-img {
  clip-path: none;
  -webkit-clip-path: none;
  animation: none;
}

/* while he speaks the plate breathes - a slow push-in, never a still frame */
.reedfen-scan[data-phase="speak"] .rs-img,
.reedfen-scan[data-phase="speak"] .rs-vein {
  transform-origin: 50% 42%;
  animation-name: rs-breathe;
  animation-duration: 11000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* soft inner vignette so the plate sits in the frame instead of on it */
.reedfen-scan .rs-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 38px rgba(4, 9, 15, 0.6), inset 0 0 2px rgba(138, 232, 255, 0.25);
  border-radius: inherit;
}

/* the residue itself breathes: the same plate, screened and saturated, so the
   violet trace and the cyan hologram lines glow while everything else sinks */
.reedfen-scan .rs-vein {
  mix-blend-mode: screen;
  filter: saturate(3.2) contrast(1.75) brightness(0.55) blur(1.2px);
  opacity: 0;
}

.reedfen-scan[data-phase="speak"] .rs-vein { animation: rs-vein-pulse 2800ms ease-in-out 200ms infinite; }

.reedfen-scan .rs-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.reedfen-scan .rs-lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  top: -14%;
  background: linear-gradient(180deg, transparent, rgba(138, 232, 255, 0.1), transparent);
  animation: rs-roll 6400ms linear infinite;
}

/* the beam: a bright edge with a trail above it, timed to the reveal */
.reedfen-scan .rs-sweep {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(138, 232, 255, 0.08) 55%, rgba(138, 232, 255, 0.34) 100%);
  border-bottom: 2px solid #d9f7ff;
  box-shadow: 0 2px 18px rgba(138, 232, 255, 0.85), 0 0 46px rgba(138, 232, 255, 0.45);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.reedfen-scan[data-phase="scan"] .rs-sweep {
  animation: rs-sweep var(--rs-sweep) linear 120ms both, rs-sweep-fade var(--rs-sweep) linear 120ms both;
}

/* brief tear bands as the signal locks */
.reedfen-scan .rs-glitch {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(180deg, transparent 22%, rgba(138, 232, 255, 0.22) 22%, rgba(138, 232, 255, 0.22) 24%, transparent 24%),
    linear-gradient(180deg, transparent 61%, rgba(180, 140, 255, 0.2) 61%, rgba(180, 140, 255, 0.2) 62.5%, transparent 62.5%);
}

.reedfen-scan[data-phase="scan"] .rs-glitch { animation: rs-glitch 360ms steps(3) both; }
.reedfen-scan[data-phase="speak"] .rs-glitch { animation: rs-glitch 240ms steps(2) both; }

.reedfen-scan .rs-corner {
  position: absolute;
  width: clamp(14px, 3vw, 24px);
  height: clamp(14px, 3vw, 24px);
  border: 2px solid var(--rs-cyan);
  filter: drop-shadow(0 0 6px var(--rs-cyan-soft));
  opacity: 0;
  pointer-events: none;
}

.reedfen-scan .rs-tl { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.reedfen-scan .rs-tr { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.reedfen-scan .rs-bl { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.reedfen-scan .rs-br { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }

.reedfen-scan[data-phase="scan"] .rs-corner,
.reedfen-scan[data-phase="speak"] .rs-corner { animation: rs-corner-in 420ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both; }

/* HUD chrome lives in the letterbox bars, never over the art */
.reedfen-scan .rs-hud {
  position: absolute;
  right: var(--rs-pad);
  top: calc(var(--rs-bar) / 2);
  translate: 0 -50%;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 clamp(0.52rem, 1.25vw, 0.68rem)/1 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--rs-cyan);
  text-shadow: 0 0 10px var(--rs-cyan-soft), 0 1px 6px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
}

.reedfen-scan .rs-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rs-cyan);
  box-shadow: 0 0 8px var(--rs-cyan);
  animation: rs-blink 1100ms steps(2) infinite;
}

.reedfen-scan[data-phase="scan"] .rs-hud,
.reedfen-scan[data-phase="speak"] .rs-hud { animation: rs-fade-in 320ms ease-out 360ms both; }

.reedfen-scan[data-phase="speak"] .rs-hud-dot { background: var(--rs-violet); box-shadow: 0 0 8px var(--rs-violet); animation: none; }

/* the progress ticks light up under the beam and stay lit */
.reedfen-scan .rs-ticks {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  gap: 3px;
  pointer-events: none;
}

.reedfen-scan .rs-ticks i {
  flex: 1 1 0;
  height: 3px;
  border-radius: 1px;
  background: var(--rs-cyan);
  box-shadow: 0 0 6px var(--rs-cyan-soft);
  opacity: 0;
}

.reedfen-scan[data-phase="scan"] .rs-ticks i {
  animation: rs-tick-in 200ms ease-out both;
  animation-delay: calc(120ms + var(--i) * (var(--rs-sweep) / 28));
}

.reedfen-scan[data-phase="speak"] .rs-ticks i { opacity: 0.5; }

/* the words: a subtitle band across the foot of the frame */
.reedfen-scan .rs-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--rs-bar);
  max-height: calc(100% - var(--rs-bar) * 2 - 6px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px var(--rs-pad) 12px;
  background: linear-gradient(180deg, rgba(4, 9, 15, 0) 0%, rgba(4, 9, 15, 0.7) 28%, rgba(4, 9, 15, 0.9) 100%);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

.reedfen-scan[data-phase="speak"] .rs-band {
  animation: rs-band-in 460ms cubic-bezier(0.2, 0.9, 0.28, 1) 80ms both;
  pointer-events: auto;
}

.reedfen-scan .rs-band-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
}

.reedfen-scan .rs-name {
  font: 800 clamp(0.62rem, 1.5vw, 0.8rem)/1 var(--font);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rs-cyan);
  text-shadow: 0 0 12px var(--rs-cyan-soft), 0 1px 6px rgba(0, 0, 0, 0.9);
}

.reedfen-scan .rs-text {
  margin: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: clamp(0.82rem, 1.75vw, 1.02rem);
  line-height: 1.45;
  color: var(--rs-paper);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  text-wrap: pretty;
}

.reedfen-scan .rs-text .speech-highlight { color: var(--rs-cyan); }

.reedfen-scan .rs-band.speech-typing .rs-text::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: var(--rs-cyan);
  box-shadow: 0 0 8px var(--rs-cyan-soft);
  animation: rs-blink 800ms steps(2) infinite;
}

.reedfen-scan .rs-band--voice-only .rs-text { display: none; }

.reedfen-scan .rs-continue {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 16px;
  border: 1px solid rgba(138, 232, 255, 0.7);
  border-radius: 999px;
  background: rgba(138, 232, 255, 0.12);
  color: var(--rs-paper);
  font: 700 clamp(0.68rem, 1.5vw, 0.82rem)/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(138, 232, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.reedfen-scan.rs-ready .rs-continue {
  animation: rs-fade-up 360ms ease-out both;
  pointer-events: auto;
}

.reedfen-scan .rs-continue:hover,
.reedfen-scan .rs-continue:focus-visible {
  background: rgba(138, 232, 255, 0.24);
  box-shadow: 0 0 26px rgba(138, 232, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  outline: none;
}

.reedfen-scan .rs-continue:active { transform: translateY(1px); }

/* letterbox */
.reedfen-scan .rs-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reedfen-scan .rs-bars::before,
.reedfen-scan .rs-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rs-bar);
  background: var(--rs-ink);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
}

.reedfen-scan .rs-bars::before {
  top: 0;
  border-bottom: 1px solid rgba(138, 232, 255, 0.3);
  animation: rs-bar-top-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reedfen-scan .rs-bars::after {
  bottom: 0;
  border-top: 1px solid rgba(138, 232, 255, 0.3);
  animation: rs-bar-bottom-in 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.reedfen-scan .rs-skip {
  position: absolute;
  left: max(var(--rs-pad), env(safe-area-inset-left));
  bottom: calc(var(--rs-bar) / 2);
  translate: 0 50%;
  z-index: 2;
  margin: 0;
  font: 700 0.62rem/1 ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(238, 248, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  animation: rs-fade-in 420ms ease-out 900ms both;
}

.reedfen-scan[data-phase="speak"] .rs-skip,
.reedfen-scan[data-phase="leave"] .rs-skip { animation: rs-fade-out 200ms ease-in both; }

/* the phone frame is short: tighter bars, a tighter band */
html.is-touch .reedfen-scan { --rs-bar: clamp(12px, 5.5%, 30px); }
html.is-touch .reedfen-scan .rs-band { padding-top: 18px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 4px; }
html.is-touch .reedfen-scan .rs-text { font-size: clamp(0.78rem, 1.6vw, 0.92rem); line-height: 1.4; }
html.is-touch .reedfen-scan .rs-band-row { min-height: 26px; }
html.is-touch .reedfen-scan .rs-continue { min-height: 28px; padding: 5px 14px; }
html.is-touch .reedfen-scan .rs-card h2 { font-size: clamp(1.2rem, 3.8vw, 2.1rem); }

/* leave: the scan collapses like a tube switching off, the bars lift */
.reedfen-scan.is-leaving .rs-panel { animation: rs-crt-off 440ms cubic-bezier(0.55, 0, 0.9, 0.4) both; }
.reedfen-scan.is-leaving .rs-band { animation: rs-fade-out 220ms ease-in both; }
.reedfen-scan.is-leaving .rs-bars::before { animation: rs-bar-top-out 520ms cubic-bezier(0.4, 0, 0.2, 1) 160ms both; }
.reedfen-scan.is-leaving .rs-bars::after { animation: rs-bar-bottom-out 520ms cubic-bezier(0.4, 0, 0.2, 1) 160ms both; }
.reedfen-scan.is-leaving .rs-grade,
.reedfen-scan.is-leaving .rs-bleed { animation: rs-fade-out 520ms ease-in 160ms both; }

@keyframes rs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rs-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rs-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rs-title-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes rs-card-out {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(-6px); filter: blur(4px); }
}
@keyframes rs-static-in { from { opacity: 0; } to { opacity: 0.4; } }
@keyframes rs-static-out { from { opacity: 0.4; } to { opacity: 0; } }
@keyframes rs-static-jitter {
  0% { opacity: 0.4; background-position: 0 0; }
  50% { opacity: 0.28; background-position: 37px 19px; }
  100% { opacity: 0.44; background-position: -23px 41px; }
}
@keyframes rs-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes rs-static-band { from { transform: translateY(0); } to { transform: translateY(660%); } }
@keyframes rs-panel-in {
  from { opacity: 0; transform: scale(0.965); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rs-reveal {
  from { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
}
@keyframes rs-sweep { from { transform: translateY(-100%); } to { transform: translateY(384.6%); } }
@keyframes rs-sweep-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rs-vein-pulse {
  0% { opacity: 0.22; }
  50% { opacity: 0.58; }
  100% { opacity: 0.22; }
}
@keyframes rs-roll { from { transform: translateY(0); } to { transform: translateY(815%); } }
@keyframes rs-glitch {
  0% { opacity: 0.9; transform: translateX(-3%); }
  50% { opacity: 0.7; transform: translateX(2.5%); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes rs-corner-in {
  from { opacity: 0; transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rs-tick-in { from { opacity: 0; } to { opacity: 0.95; } }
@keyframes rs-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rs-band-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rs-bar-top-in { from { transform: translateY(-102%); } to { transform: translateY(0); } }
@keyframes rs-bar-bottom-in { from { transform: translateY(102%); } to { transform: translateY(0); } }
@keyframes rs-bar-top-out { from { transform: translateY(0); } to { transform: translateY(-102%); } }
@keyframes rs-bar-bottom-out { from { transform: translateY(0); } to { transform: translateY(102%); } }
@keyframes rs-crt-off {
  0% { opacity: 1; transform: scale(1, 1); filter: brightness(1); }
  55% { opacity: 1; transform: scale(1.02, 0.012); filter: brightness(2.6); }
  80% { opacity: 1; transform: scale(0.3, 0.008); filter: brightness(3); }
  100% { opacity: 0; transform: scale(0, 0.004); filter: brightness(3); }
}

@media (prefers-reduced-motion: reduce) {
  .reedfen-scan { display: none; }
}
/* ---- /Reedfen ---- */

/* ---- HONEYDEW PRISM BOWER · first-arrival frost skin over the letterbox shell ----
   #prismBowerArrival reuses .commons-arrival (bars, card, dust, skip, phases)
   and only re-colours it: ice instead of rootlight gold. The extra
   "intercept" phase keeps the card and skip hint away while the fawn lands. */
.prism-bower-arrival {
  --ca-gold: #a9ecff;
  --ca-glow: rgba(159, 230, 255, 0.55);
  color: #eefaff;
}
.prism-bower-arrival .ca-grade {
  background:
    radial-gradient(ellipse 78% 68% at 50% 56%, transparent 42%, rgba(3, 10, 14, 0.62) 100%),
    linear-gradient(180deg, rgba(18, 58, 78, 0.28), transparent 32%, transparent 68%, rgba(10, 42, 60, 0.28));
}
.prism-bower-arrival .ca-bars::before { border-bottom-color: rgba(159, 230, 255, 0.3); }
.prism-bower-arrival .ca-bars::after { border-top-color: rgba(159, 230, 255, 0.3); }
.prism-bower-arrival .ca-dust span {
  background: radial-gradient(circle, #f4fcff 0%, rgba(159, 230, 255, 0.85) 40%, transparent 72%);
}
.prism-bower-arrival .ca-card h2 { color: #f2fbff; }
.prism-bower-arrival .ca-skip { color: rgba(238, 250, 255, 0.8); }
.prism-bower-arrival[data-phase="intercept"] .ca-card { animation: ca-card-out 520ms ease-in both; }
.prism-bower-arrival[data-phase="intercept"] .ca-skip { animation: ca-fade-out 240ms ease-in both; }

/* ---- IRI · MIST VEIL hand-off ceremony -----------------------------------
   Full-frame over the bower art. Beats on data-beat:
   handoff (scroll travels from under her scarf to centre stage)
   -> veil (mist gathers and swallows it)
   -> reveal (it thins: flash, halo, ring, sparks, the TM is named)
   -> result (the card docks in over the settled scene).
   Layer order: world 0 · far mist 1 · Iri 2 · floor fog 3 · stage 4 ·
   near mist 5 · words/flash 6 · result 7 · vignette 8. */
.modal.clean-world-modal.mist-veil-modal {
  display: block;
  padding: 0 !important;
  overflow: hidden;
  color: #eefaff;
  background: #04090e !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.mist-veil-cine {
  --mv-ice: #9fe6ff;
  --mv-ice-soft: rgba(159, 230, 255, 0.55);
  --mv-gold: #fff1a8;
  --mv-hero-w: clamp(170px, 24vw, 330px);
  --mv-hero-l: 5%;
  --mv-col-l: calc(var(--mv-hero-l) + var(--mv-hero-w) + 2%);
  --mv-stage-x: calc(50% + var(--mv-hero-w) / 2);
  --mv-stage-y: 43%;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  min-height: 340px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #eefaff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at var(--mv-stage-x) var(--mv-stage-y), rgba(159, 230, 255, 0.2), transparent 38%),
    linear-gradient(180deg, #0c2230 0%, #081a24 55%, #050f16 100%);
}

.mv-world,
.mv-map-shade,
.mv-mist,
.mv-fog-floor,
.mv-frost,
.mv-flash,
.mv-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mv-world { z-index: 0; overflow: hidden; }
.mv-map {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) brightness(0.66) contrast(1.05) blur(1px);
  transform: scale(1.12);
  animation: mv-map-arrive 7s cubic-bezier(0.18, 0.75, 0.2, 1) both;
}
@keyframes mv-map-arrive {
  from { transform: scale(1.2) translateY(1.5%); }
  to { transform: scale(1.08) translateY(0); }
}
/* cool the warm bower and pool the light on the stage */
.mv-map-shade {
  background:
    radial-gradient(circle at var(--mv-stage-x) var(--mv-stage-y), rgba(190, 240, 255, 0.22), rgba(120, 200, 240, 0.08) 30%, transparent 52%),
    linear-gradient(180deg, rgba(6, 18, 26, 0.5), rgba(6, 18, 26, 0.12) 38%, rgba(6, 18, 26, 0.66) 100%),
    linear-gradient(180deg, rgba(24, 84, 116, 0.34), rgba(24, 84, 116, 0.26));
}

/* luminous mist: two drifting wisp layers, a breathing ground fog, and a
   near layer that only crosses the stage side so Iri stays crisp */
.mv-mist {
  z-index: 1;
  left: -30%;
  width: 160%;
  mix-blend-mode: screen;
  filter: blur(22px);
  opacity: 0;
  background:
    radial-gradient(ellipse 40% 20% at 22% 62%, rgba(214, 242, 255, 0.78), transparent 70%),
    radial-gradient(ellipse 46% 18% at 56% 72%, rgba(196, 236, 255, 0.72), transparent 70%),
    radial-gradient(ellipse 36% 16% at 82% 58%, rgba(224, 246, 255, 0.7), transparent 70%),
    radial-gradient(ellipse 58% 14% at 44% 88%, rgba(186, 230, 255, 0.66), transparent 70%);
  animation:
    mv-mist-in 1600ms ease-out both,
    mv-mist-drift var(--mv-drift, 26s) ease-in-out infinite alternate;
}
.mv-mist--far { --mv-mist-opacity: 0.5; --mv-drift: 34s; top: 4%; }
.mv-mist--mid { --mv-mist-opacity: 0.58; --mv-drift: 24s; top: 12%; animation-delay: 200ms, -9s; }
.mv-mist--near {
  --mv-mist-opacity: 0.5;
  --mv-drift: 18s;
  z-index: 5;
  left: 26%;
  width: 120%;
  top: 36%;
  filter: blur(26px);
  animation-delay: 400ms, -4s;
}
@keyframes mv-mist-in { from { opacity: 0; } to { opacity: var(--mv-mist-opacity, 0.5); } }
@keyframes mv-mist-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.mv-fog-floor {
  z-index: 3;
  top: auto;
  height: 30%;
  mix-blend-mode: screen;
  filter: blur(12px);
  background: linear-gradient(0deg, rgba(200, 236, 255, 0.5), rgba(200, 236, 255, 0.2) 48%, transparent);
  opacity: 0;
  animation: mv-fog-floor-in 1400ms ease-out 300ms both, mv-fog-floor-breathe 6s ease-in-out 1700ms infinite;
}
@keyframes mv-fog-floor-in { to { opacity: 0.85; } }
@keyframes mv-fog-floor-breathe {
  0%, 100% { opacity: 0.85; transform: translateY(0); }
  50% { opacity: 0.62; transform: translateY(2%); }
}

.mv-frost { z-index: 4; }
.mv-frost i {
  position: absolute;
  left: var(--fx);
  top: var(--fy);
  width: var(--fs);
  height: var(--fs);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(159, 230, 255, 0.9) 45%, transparent 72%);
  box-shadow: 0 0 8px rgba(159, 230, 255, 0.7);
  opacity: 0;
  animation: mv-frost-rise var(--ft) linear var(--fl) infinite;
}
@keyframes mv-frost-rise {
  0% { opacity: 0; transform: translate(0, 12px); }
  15% { opacity: 1; }
  85% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--fd), -70px); }
}

/* Iri, bottom-left, straight off her map sheet */
.mv-hero {
  position: absolute;
  z-index: 2;
  left: var(--mv-hero-l);
  bottom: 0;
  width: var(--mv-hero-w);
  height: 82%;
  pointer-events: none;
}
.mv-portrait-aura {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 230, 255, 0.34), rgba(159, 230, 255, 0.1) 40%, transparent 68%);
  filter: blur(12px);
  animation: mv-fade-in 900ms ease-out 200ms both;
}
.mv-portrait {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 100%;
  aspect-ratio: 1;
  translate: -50% 0;
  display: grid;
  place-items: center;
  background-repeat: no-repeat;
  background-position: 0 0;
  image-rendering: pixelated;
  opacity: 0;
  transform: translateY(40px) scale(1.06);
  transform-origin: 50% 100%;
  filter:
    drop-shadow(0 0 2px rgba(220, 245, 255, 0.55))
    drop-shadow(0 8px 0 rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 26px rgba(159, 230, 255, 0.4));
  animation: mv-portrait-in 820ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}
.mv-portrait.has-sheet > span { display: none; }
.mv-portrait > span {
  font: 700 clamp(6rem, 20vw, 14rem)/1 Georgia, "Times New Roman", serif;
  color: var(--mv-ice);
  text-shadow: 0 0 40px var(--mv-ice-soft);
}
@keyframes mv-portrait-in { to { opacity: 1; transform: translateY(0) scale(1); } }
.mv-ground {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 84%;
  height: 7%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
  animation: mv-fade-in 800ms ease-out 400ms both;
}

/* the stage is one point; everything on it is centred on that point */
.mv-stage {
  position: absolute;
  z-index: 4;
  left: var(--mv-stage-x);
  top: var(--mv-stage-y);
  width: 0;
  height: 0;
  pointer-events: none;
  transition: top 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mv-stagelight,
.mv-stagefloor,
.mv-halo,
.mv-ring,
.mv-scroll-wrap,
.mv-veil i,
.mv-shards b,
.mv-sparks span {
  position: absolute;
  left: 0;
  top: 0;
}
/* a cold light waits on the stage before the scroll arrives */
.mv-stagelight {
  width: 560px;
  height: 560px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 244, 255, 0.34) 0%, rgba(159, 230, 255, 0.16) 30%, rgba(159, 230, 255, 0.04) 52%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: mv-stagelight-in 1100ms ease-out 260ms forwards, mv-stagelight-breathe 4.2s ease-in-out 1400ms infinite;
}
@keyframes mv-stagelight-in { to { opacity: 1; } }
@keyframes mv-stagelight-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
.mv-stagefloor {
  width: 380px;
  height: 130px;
  translate: -50% 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(200, 240, 255, 0.42), rgba(159, 230, 255, 0.12) 50%, transparent 72%);
  mix-blend-mode: screen;
  filter: blur(6px);
  opacity: 0;
  animation: mv-fade-in 900ms ease-out 900ms forwards;
}
.mv-halo {
  width: 520px;
  height: 520px;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.58) 0%, rgba(178, 236, 255, 0.4) 18%, rgba(159, 230, 255, 0.12) 44%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scale(0.4);
}
.mv-ring {
  width: 250px;
  height: 250px;
  translate: -50% -50%;
  border-radius: 50%;
  border: 3px solid var(--mv-ice);
  box-shadow: 0 0 26px var(--mv-ice), inset 0 0 30px rgba(255, 247, 168, 0.55);
  opacity: 0;
  transform: rotateX(66deg) scale(0.2);
}
.mv-scroll-wrap {
  --mv-from-x: -34vw;
  --mv-from-y: 8vh;
  width: 156px;
  height: 156px;
  translate: -50% -50%;
  opacity: 0;
  transform: translate(var(--mv-from-x), var(--mv-from-y)) scale(0.18);
}
.is-aimed .mv-scroll-wrap {
  animation:
    mv-scroll-handoff 1300ms cubic-bezier(0.22, 0.9, 0.25, 1) 260ms forwards,
    mv-scroll-float 3.4s ease-in-out 1600ms infinite;
}
@keyframes mv-scroll-handoff {
  0% { opacity: 0; transform: translate(var(--mv-from-x), var(--mv-from-y)) scale(0.18) rotate(-14deg); }
  16% { opacity: 1; }
  58% { transform: translate(calc(var(--mv-from-x) * 0.32), calc(var(--mv-from-y) * 0.32 - 96px)) scale(0.72) rotate(7deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
}
@keyframes mv-scroll-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0, -7px); }
}
.mv-scroll {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(159, 230, 255, 0.7)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45));
}

/* the veil: three soft fog bodies gather on the scroll and two long wisps
   cross it; they hold, then everything dissolves outward */
.mv-veil i {
  width: 560px;
  height: 320px;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(32px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.6);
  background: radial-gradient(ellipse, rgba(236, 250, 255, 0.72), rgba(186, 232, 255, 0.46) 42%, transparent 70%);
}
.mv-veil i:nth-child(2) { width: 440px; height: 260px; filter: blur(26px); background: radial-gradient(ellipse, rgba(255, 255, 255, 0.78), rgba(200, 238, 255, 0.48) 40%, transparent 68%); }
.mv-veil i:nth-child(3) { width: 700px; height: 380px; filter: blur(44px); background: radial-gradient(ellipse, rgba(226, 246, 255, 0.72), rgba(180, 228, 255, 0.4) 44%, transparent 70%); }
.mv-veil i:nth-child(4),
.mv-veil i:nth-child(5) {
  width: 760px;
  height: 120px;
  filter: blur(18px);
  background: radial-gradient(ellipse, rgba(240, 252, 255, 0.7), rgba(200, 238, 255, 0.35) 46%, transparent 70%);
  transform: translate(-90%, -62%) scale(1);
}
.mv-veil i:nth-child(5) { height: 90px; transform: translate(-10%, -34%) scale(1); }
.mist-veil-cine[data-beat="veil"] .mv-veil i,
.mist-veil-cine[data-beat="reveal"] .mv-veil i,
.mist-veil-cine[data-beat="result"] .mv-veil i {
  animation: mv-veil-gather 1500ms cubic-bezier(0.3, 0, 0.2, 1) both;
}
.mist-veil-cine[data-beat] .mv-veil i:nth-child(2) { animation-delay: 90ms; }
.mist-veil-cine[data-beat] .mv-veil i:nth-child(3) { animation-delay: 170ms; }
.mist-veil-cine[data-beat="veil"] .mv-veil i:nth-child(4),
.mist-veil-cine[data-beat="reveal"] .mv-veil i:nth-child(4),
.mist-veil-cine[data-beat="result"] .mv-veil i:nth-child(4) { animation: mv-wisp-left 1600ms cubic-bezier(0.3, 0, 0.2, 1) both; }
.mist-veil-cine[data-beat="veil"] .mv-veil i:nth-child(5),
.mist-veil-cine[data-beat="reveal"] .mv-veil i:nth-child(5),
.mist-veil-cine[data-beat="result"] .mv-veil i:nth-child(5) { animation: mv-wisp-right 1600ms cubic-bezier(0.3, 0, 0.2, 1) 60ms both; }
@keyframes mv-veil-gather {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  54% { opacity: 1; transform: translate(-50%, -50%) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
@keyframes mv-wisp-left {
  0% { opacity: 0; transform: translate(-96%, -62%) scale(0.9); }
  28% { opacity: 0.9; }
  60% { opacity: 0.8; transform: translate(-40%, -56%) scale(1.05); }
  100% { opacity: 0; transform: translate(10%, -50%) scale(1.25); }
}
@keyframes mv-wisp-right {
  0% { opacity: 0; transform: translate(-4%, -34%) scale(0.9); }
  28% { opacity: 0.85; }
  60% { opacity: 0.75; transform: translate(-60%, -40%) scale(1.05); }
  100% { opacity: 0; transform: translate(-110%, -46%) scale(1.25); }
}
.mist-veil-cine[data-beat="veil"] .mv-scroll,
.mist-veil-cine[data-beat="reveal"] .mv-scroll,
.mist-veil-cine[data-beat="result"] .mv-scroll {
  animation: mv-scroll-veiled 1500ms ease-in-out both;
}
@keyframes mv-scroll-veiled {
  0% { opacity: 1; filter: blur(0) brightness(1) drop-shadow(0 0 16px rgba(159, 230, 255, 0.7)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
  32% { opacity: 0.1; filter: blur(8px) brightness(1.7) drop-shadow(0 0 16px rgba(159, 230, 255, 0.7)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
  54% { opacity: 0.08; filter: blur(8px) brightness(1.7) drop-shadow(0 0 16px rgba(159, 230, 255, 0.7)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
  100% { opacity: 1; filter: blur(0) brightness(1.06) drop-shadow(0 0 26px rgba(159, 230, 255, 0.95)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
}

/* reveal: a white snap, the halo blooms, the ring sweeps, sparks and ice shards */
.mv-flash {
  z-index: 6;
  background: radial-gradient(circle at var(--mv-stage-x) var(--mv-stage-y), rgba(255, 255, 255, 0.92), rgba(159, 230, 255, 0.55) 22%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
}
.mist-veil-cine[data-beat="reveal"] .mv-flash,
.mist-veil-cine[data-beat="result"] .mv-flash { animation: mv-flash 760ms ease-out 250ms both; }
@keyframes mv-flash {
  0% { opacity: 0; }
  22% { opacity: 1; }
  100% { opacity: 0; }
}
.mist-veil-cine[data-beat="reveal"] .mv-halo,
.mist-veil-cine[data-beat="result"] .mv-halo { animation: mv-halo-in 1300ms cubic-bezier(0.16, 1, 0.3, 1) 250ms forwards, mv-halo-breathe 3.6s ease-in-out 1550ms infinite; }
@keyframes mv-halo-in { to { opacity: 1; transform: scale(1); } }
@keyframes mv-halo-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.06); }
}
.mist-veil-cine[data-beat="reveal"] .mv-ring,
.mist-veil-cine[data-beat="result"] .mv-ring { animation: mv-ring 1500ms cubic-bezier(0.18, 0.78, 0.22, 1) 220ms forwards; }
@keyframes mv-ring {
  0% { opacity: 0; transform: rotateX(66deg) scale(0.2) rotate(0deg); }
  40% { opacity: 0.95; transform: rotateX(66deg) scale(0.9) rotate(150deg); }
  100% { opacity: 0; transform: rotateX(66deg) scale(1.5) rotate(360deg); }
}
.mv-sparks span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mv-gold);
  box-shadow: 0 0 10px var(--mv-ice);
  opacity: 0;
}
.mv-sparks span:nth-child(2n) { --sr: 118px; --sj: 7deg; background: #fff; }
.mv-sparks span:nth-child(3n) { --sr: 196px; --sj: -6deg; width: 4px; height: 4px; }
.mv-sparks span:nth-child(5n) { --sr: 236px; --sj: 3deg; }
.mist-veil-cine[data-beat="reveal"] .mv-sparks span,
.mist-veil-cine[data-beat="result"] .mv-sparks span { animation: dig-spark 1000ms ease-out calc(300ms + var(--i) * 18ms) forwards; }
.mv-shards b {
  width: 5px;
  height: 14px;
  translate: -50% -50%;
  background: linear-gradient(180deg, #fff, rgba(159, 230, 255, 0.85) 60%, transparent);
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
  filter: drop-shadow(0 0 6px rgba(159, 230, 255, 0.8));
  opacity: 0;
}
.mist-veil-cine[data-beat="reveal"] .mv-shards b,
.mist-veil-cine[data-beat="result"] .mv-shards b { animation: mv-shard-rise 2.8s ease-out calc(320ms + var(--k) * 110ms) both; }
@keyframes mv-shard-rise {
  0% { opacity: 0; transform: translate(calc((var(--k) - 4.5) * 14px), 20px) rotate(calc(var(--k) * 37deg)) scale(0.6); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc((var(--k) - 4.5) * 34px), -150px) rotate(calc(var(--k) * 37deg + 180deg)) scale(1); }
}

/* words: her name and line, then the TM's name and stat chips */
.mv-caption {
  position: absolute;
  z-index: 6;
  left: var(--mv-col-l);
  right: 4%;
  bottom: 7%;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.mv-kicker {
  margin: 0 0 6px;
  font: 700 clamp(0.6rem, 1.4vw, 0.78rem)/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: var(--mv-ice);
  text-shadow: 0 0 14px var(--mv-ice-soft);
  animation: mv-fade-up 560ms ease-out 240ms both;
}
.mv-caption h2 {
  margin: 0;
  font: 700 clamp(1.4rem, 3.6vw, 2.3rem)/1.1 "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: 0.06em;
  color: #f4fcff;
  text-shadow: 0 0 24px rgba(159, 230, 255, 0.55), 0 3px 14px rgba(0, 0, 0, 0.8);
  animation: mv-fade-up 700ms cubic-bezier(0.2, 0.9, 0.28, 1) 360ms both;
}
.mv-line {
  margin: 10px auto 0;
  max-width: 640px;
  font-size: clamp(0.88rem, 1.6vw, 1.05rem);
  line-height: 1.5;
  color: rgba(240, 251, 255, 0.96);
  animation: mv-fade-up 700ms ease-out 620ms both;
}
.mv-caption.is-swapped .mv-kicker { animation: mv-fade-up 480ms ease-out 0ms both; }
.mv-caption.is-swapped h2 { animation: mv-fade-up 620ms cubic-bezier(0.2, 0.9, 0.28, 1) 90ms both; }
.mv-caption.is-swapped .mv-line { animation: mv-fade-up 620ms ease-out 200ms both; }
.mist-veil-cine[data-beat="result"] .mv-caption { animation: mv-fade-out 360ms ease-in both; }
.mv-chips,
.mv-result-chips {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.mv-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(159, 230, 255, 0.5);
  background: rgba(8, 26, 36, 0.74);
  font-size: clamp(0.72rem, 1.3vw, 0.86rem);
  letter-spacing: 0.06em;
  color: #eefaff;
  text-shadow: none;
  box-shadow: 0 0 14px rgba(159, 230, 255, 0.14);
}
.mv-chip--type {
  border-color: rgba(255, 241, 168, 0.6);
  background: linear-gradient(180deg, rgba(159, 230, 255, 0.3), rgba(159, 230, 255, 0.12));
  color: #fff8d0;
}

/* the result docks in; the scroll lifts to make room */
.mist-veil-cine[data-beat="result"] .mv-stage { top: 31%; }
.mist-veil-cine .mv-result {
  position: absolute;
  z-index: 7;
  left: var(--mv-col-l);
  right: 4%;
  bottom: 6%;
  width: auto;
  max-width: 560px;
  max-height: none;
  margin: 0 auto;
  padding: 18px 24px 18px;
  overflow: visible;
  border-radius: 18px;
  border: 1px solid rgba(159, 230, 255, 0.45);
  background:
    radial-gradient(circle at 50% 0%, rgba(159, 230, 255, 0.2), transparent 46%),
    linear-gradient(180deg, rgba(10, 30, 40, 0.9), rgba(5, 16, 24, 0.94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 247, 168, 0.08), 0 0 44px rgba(159, 230, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
  color: #eefaff;
  opacity: 0;
  animation: mv-result-in 640ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@keyframes mv-result-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
.mist-veil-cine .mv-result-kicker {
  margin: 0 0 4px;
  font: 700 0.68rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--mv-ice);
}
.mist-veil-cine .mv-result h2 {
  margin: 0;
  font: 700 clamp(1.25rem, 2.6vw, 1.7rem)/1.15 "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
  color: #fff6cf;
  text-shadow: 0 0 18px rgba(255, 241, 168, 0.35);
}
.mist-veil-cine .mv-result-chips { margin: 10px 0 0; }
.mist-veil-cine .mv-result-copy {
  margin: 10px auto 0;
  max-width: 460px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(238, 250, 255, 0.88);
}
.mist-veil-cine .mv-result .dialogue-actions {
  display: flex;
  width: 100%;
  margin: 14px 0 0;
  justify-content: center;
}
.mist-veil-cine .mv-result .dialogue-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(159, 230, 255, 0.75);
  background: linear-gradient(180deg, rgba(159, 230, 255, 0.36), rgba(159, 230, 255, 0.14));
  color: #f4fcff;
  font: 700 0.86rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(159, 230, 255, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  cursor: pointer;
}
.mist-veil-cine .mv-result .dialogue-actions button:hover,
.mist-veil-cine .mv-result .dialogue-actions button:focus-visible {
  background: linear-gradient(180deg, rgba(159, 230, 255, 0.52), rgba(159, 230, 255, 0.24));
  box-shadow: 0 0 30px rgba(159, 230, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  outline: none;
}
.mist-veil-cine .mv-result .dialogue-actions button i { font-style: normal; }

.mv-vignette {
  z-index: 8;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, rgba(2, 7, 11, 0.66) 100%);
}

@keyframes mv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mv-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes mv-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* phones held sideways: the whole frame is short - Iri shrinks to a cameo,
   the stage sits higher, the copy tightens */
@media (orientation: landscape) and (max-height: 520px) {
  .mist-veil-cine { --mv-hero-w: clamp(130px, 38vh, 190px); --mv-hero-l: 3%; --mv-stage-y: 40%; }
  .mv-hero { height: 90%; }
  .mv-scroll-wrap { width: 106px; height: 106px; }
  .mv-stagelight { width: 380px; height: 380px; }
  .mv-stagefloor { width: 260px; height: 90px; translate: -50% 26px; }
  .mv-halo { width: 340px; height: 340px; }
  .mv-ring { width: 172px; height: 172px; }
  .mv-veil i { width: 400px; height: 220px; }
  .mv-veil i:nth-child(2) { width: 320px; height: 180px; }
  .mv-veil i:nth-child(3) { width: 480px; height: 260px; }
  .mv-veil i:nth-child(4), .mv-veil i:nth-child(5) { width: 520px; height: 80px; }
  .mv-caption { bottom: 4%; }
  .mv-caption h2 { font-size: 1.2rem; }
  .mv-kicker { margin-bottom: 4px; font-size: 0.58rem; }
  .mv-line { margin-top: 5px; font-size: 0.78rem; line-height: 1.35; }
  .mv-chip { padding: 3px 9px; font-size: 0.68rem; }
  .mist-veil-cine[data-beat="result"] .mv-stage { top: 24%; }
  .mist-veil-cine .mv-result { bottom: 3%; max-width: 540px; padding: 9px 14px 10px; border-radius: 14px; }
  .mist-veil-cine .mv-result-kicker { font-size: 0.56rem; margin-bottom: 2px; }
  .mist-veil-cine .mv-result h2 { font-size: 1.02rem; }
  .mist-veil-cine .mv-result-chips { margin-top: 6px; }
  .mist-veil-cine .mv-result-copy { margin-top: 6px; font-size: 0.74rem; line-height: 1.3; }
  .mist-veil-cine .mv-result .dialogue-actions { margin-top: 8px; }
  .mist-veil-cine .mv-result .dialogue-actions button { min-width: 150px; padding: 8px 18px; font-size: 0.76rem; }
}

/* phones held upright: stage on top, words beneath, Iri as a small cameo */
@media (max-width: 560px) and (orientation: portrait) {
  .mist-veil-cine { --mv-hero-w: 40vw; --mv-hero-l: 2%; --mv-col-l: 4%; --mv-stage-x: 50%; --mv-stage-y: 30%; }
  .mv-hero { height: 34%; }
  .mv-mist--near { left: -30%; width: 160%; top: 20%; }
  .mv-scroll-wrap { width: 128px; height: 128px; }
  .mv-caption { left: 4%; right: 4%; bottom: auto; top: 48%; }
  .mv-line { font-size: 0.88rem; }
  .mist-veil-cine[data-beat="result"] .mv-stage { top: 22%; }
  .mist-veil-cine[data-beat="result"] .mv-hero { animation: mv-fade-out 400ms ease-in both; }
  .mist-veil-cine .mv-result { left: 4%; right: 4%; bottom: 5%; padding: 16px 16px 16px; }
}

/* phones: the generic touch modal-card rule stretches cards full-screen;
   the docked result keeps its own footprint inside the ceremony frame */
html.is-touch .mist-veil-cine .mv-result {
  position: absolute;
  width: auto;
  height: auto;
  max-width: 540px;
  max-height: none;
  border-radius: 14px;
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .mist-veil-cine *,
  .mist-veil-cine *::before,
  .mist-veil-cine *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .mv-mist { opacity: 0.35; }
}
/* ---- end IRI · MIST VEIL ---------------------------------------------- */

/* ============================================================================
   Larkspur - Reed brings Luminhare home (2026-08-27)
   1) arrival overlay skin (.reed-lab-arrival on the .commons-arrival shell)
   2) the Luminhare return ceremony as a fullscreen cinematic (.reed-lab-cine)
   3) phone rail speech bubble: action row stays reachable on long art lines
   ============================================================================ */

/* --- 1) arrival overlay: warm lamp-light amber instead of rootlight gold --- */
.commons-arrival.reed-lab-arrival {
  --ca-gold: #ffd48a;
  --ca-glow: rgba(255, 212, 138, 0.5);
}
.commons-arrival.reed-lab-arrival .ca-grade {
  background:
    radial-gradient(ellipse 78% 68% at 50% 56%, transparent 42%, rgba(8, 6, 3, 0.56) 100%),
    linear-gradient(180deg, rgba(70, 44, 12, 0.22), transparent 32%, transparent 68%, rgba(70, 44, 12, 0.22));
}
.commons-arrival.reed-lab-arrival .ca-dust span {
  background: radial-gradient(circle, #fff3d6 0%, rgba(255, 212, 138, 0.8) 40%, transparent 72%);
}
.commons-arrival.reed-lab-arrival .rl-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease-in;
}
.commons-arrival.reed-lab-arrival[data-phase="inside"] .rl-fade { opacity: 1; }
.commons-arrival.reed-lab-arrival[data-phase="ceremony"] .rl-fade,
.commons-arrival.reed-lab-arrival[data-phase="handover"] .rl-fade,
.commons-arrival.reed-lab-arrival[data-phase="leave"] .rl-fade { opacity: 0; transition: none; }
/* the card yields the frame once he starts walking and stays away after */
.commons-arrival.reed-lab-arrival[data-phase="follow"] .ca-card,
.commons-arrival.reed-lab-arrival[data-phase="door"] .ca-card,
.commons-arrival.reed-lab-arrival[data-phase="inside"] .ca-card,
.commons-arrival.reed-lab-arrival[data-phase="ceremony"] .ca-card,
.commons-arrival.reed-lab-arrival[data-phase="handover"] .ca-card {
  animation: ca-card-out 520ms ease-in both;
}
/* the door opens: a warm breath across the whole frame */
.commons-arrival.reed-lab-arrival[data-phase="door"] .ca-grade {
  animation: rl-door-warm 640ms ease-out both;
}
@keyframes rl-door-warm {
  0% { box-shadow: inset 0 0 0 rgba(255, 212, 138, 0); }
  35% { box-shadow: inset 0 0 120px rgba(255, 212, 138, 0.38); }
  100% { box-shadow: inset 0 0 60px rgba(255, 212, 138, 0.16); }
}

/* --- 2) ceremony: fullscreen frame ---------------------------------------- */
.modal.clean-world-modal.reed-lab-modal {
  display: block;
  padding: 0 !important;
  overflow: hidden;
  color: #f4fbff;
  background: #06090d !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}
.reed-lab-cine {
  --rl-scale: 1;
  --rl-x: 0px;
  --rl-y: 0px;
  --rl-bar: 0px;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #06090d;
  color: #f4fbff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* the authored 1016x571 stage, scaled by JS to the viewport */
.reed-lab-cine .rl-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 1016px;
  height: 571px;
  transform-origin: 0 0;
  transform: translate(var(--rl-x), var(--rl-y)) scale(var(--rl-scale));
  will-change: transform;
}
.reed-lab-cine .rl-push {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  animation: rl-push 8800ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes rl-push {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
.reed-lab-cine .rl-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(3, 8, 13, 0.18)),
    var(--reed-return-bg) center / cover no-repeat,
    #101013;
  animation: rl-stage-in 900ms ease-out both;
}
@keyframes rl-stage-in {
  from { opacity: 0; filter: brightness(0.35); }
  to { opacity: 1; filter: brightness(1); }
}
.reed-lab-cine .rl-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 58%, rgba(85, 220, 255, 0.20), transparent 23%),
    radial-gradient(circle at 76% 52%, rgba(255, 244, 194, 0.14), transparent 24%),
    linear-gradient(180deg, transparent 56%, rgba(2, 5, 9, 0.46) 100%);
}
.reed-lab-cine .rl-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
}
.reed-lab-cine .rl-bars {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.reed-lab-cine .rl-bars::before,
.reed-lab-cine .rl-bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--rl-bar);
  background: #000;
}
.reed-lab-cine .rl-bars::before { top: 0; }
.reed-lab-cine .rl-bars::after { bottom: 0; }
.reed-lab-cine .rl-caption {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(18px, calc(var(--rl-bar) + 12px));
  transform: translateX(-50%);
  width: min(560px, 62vw);
  padding: 10px 16px 12px;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(4, 8, 12, 0.42), rgba(4, 8, 12, 0.76));
  border: 1px solid rgba(134, 226, 255, 0.16);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: rl-caption-in 700ms ease-out 500ms both;
}
@keyframes rl-caption-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.reed-lab-cine .rl-kicker {
  margin: 0;
  font: 700 0.62rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #8fe3ff;
  text-shadow: 0 0 12px rgba(91, 220, 255, 0.45);
}
.reed-lab-cine .rl-caption h2 {
  margin: 5px 0 4px;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: #f4fbff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  transition: text-shadow 600ms ease;
}
.reed-lab-cine[data-beat="home"] .rl-caption h2 {
  text-shadow: 0 0 18px rgba(120, 230, 255, 0.8), 0 2px 14px rgba(0, 0, 0, 0.7);
}
.reed-lab-cine .rl-line {
  margin: 0;
  font-size: clamp(0.72rem, 1.3vw, 0.92rem);
  line-height: 1.35;
  color: rgba(230, 245, 255, 0.82);
}
.reed-lab-cine .rl-continue {
  position: absolute;
  z-index: 6;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, calc(var(--rl-bar) + 12px), env(safe-area-inset-bottom));
  min-height: 40px;
  padding: 9px 18px;
  animation: rl-button-in 600ms ease-out 900ms both;
}
@keyframes rl-button-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.reed-lab-cine .rl-continue.ready {
  box-shadow: 0 0 22px rgba(91, 220, 255, 0.34);
}
/* landscape phones: the frame covers the screen from the floor up, the
   caption shrinks and sits clear of Reed, the cradle and the traveler */
.reed-lab-cine.is-wide .rl-caption {
  width: min(440px, 54vw);
  padding: 7px 12px 9px;
  bottom: max(10px, env(safe-area-inset-bottom));
}
.reed-lab-cine.is-wide .rl-caption h2 { font-size: clamp(0.98rem, 2.6vw, 1.3rem); margin: 3px 0 2px; }
.reed-lab-cine.is-wide .rl-line { font-size: 0.68rem; line-height: 1.3; }
.reed-lab-cine.is-wide .rl-kicker { font-size: 0.56rem; }
.reed-lab-cine.is-wide .rl-continue {
  min-height: 36px;
  padding: 7px 14px;
  bottom: max(10px, env(safe-area-inset-bottom));
}
@media (max-height: 360px) {
  .reed-lab-cine .rl-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reed-lab-cine .rl-push,
  .reed-lab-cine .rl-stage,
  .reed-lab-cine .rl-caption,
  .reed-lab-cine .rl-continue { animation: none; }
}

/* --- 3) phone rail bubble: sticky action row ------------------------------ */
html.is-touch #speechBubble .speech-bubble.speech-bubble-mobile-rail .speech-actions {
  position: sticky;
  bottom: -8px;
  z-index: 2;
  margin: 7px -10px -8px;
  padding: 8px 10px 8px;
  background: inherit;
  box-shadow: 0 -12px 12px -8px rgba(0, 0, 0, 0.28);
}

/* ---- THE WOUND IS BOUND - Hall-of-Bonds ceremony (2026-08-31) ---------------
   Fullscreen beats: title card -> one partner at a time -> whole team -> the
   white-on-black slate. Root is NOT a .modal-card, so the touch fullscreen
   hijack does not apply; every size is dvh/vw-clamped for landscape phones. */
.modal.hof-cine-modal {
  padding: 0;
  place-items: stretch;
  background: #000;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.hof-cine {
  --hof-gold: #f3dfae;
  --hof-gold-2: #c9a961;
  --hof-ink: #f6f1e8;
  --hof-mute: rgba(246, 241, 232, 0.68);
  --hof-serif: Georgia, "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  color: var(--hof-ink);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  isolation: isolate;
}

.hof-bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: 50% 42%;
  opacity: 0;
  transform: scale(1.02);
  filter: saturate(1.04) brightness(0.6);
  transition: opacity 1600ms ease, transform 18000ms linear;
  will-change: opacity, transform;
}
.hof-cine[data-beat="title"] .hof-bg--binding { opacity: 1; transform: scale(1.12); }
.hof-cine[data-beat="team"] .hof-bg--kneel { opacity: 1; transform: scale(1.1); }
/* a faint blurred residue of the binding painting stays under the partner
   beats and the slates, so the stage is never a flat black void */
.hof-cine[data-beat="mon"] .hof-bg--binding,
.hof-cine[data-beat="slate"] .hof-bg--binding { opacity: 0.07; transform: scale(1.16); filter: saturate(0.9) brightness(0.5) blur(7px); }
.hof-bg--kneel { filter: saturate(1) brightness(0.5) blur(1.2px); }
.hof-cine[data-beat="mon"] .hof-bg { transition: opacity 900ms ease, transform 18000ms linear; }

.hof-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(0, 0, 0, 0.52) 66%, rgba(0, 0, 0, 0.92) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 22%, transparent 72%, rgba(0, 0, 0, 0.74));
}

.hof-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.8; }
.hof-motes i {
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: -4%;
  width: calc(var(--s) * 3px);
  height: calc(var(--s) * 3px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 214, 0.95), rgba(255, 246, 214, 0) 70%);
  opacity: 0;
  animation: hof-mote-rise calc(15s + var(--d) * 0.7s) linear infinite;
  animation-delay: calc(var(--d) * -1.1s);
}
@keyframes hof-mote-rise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.75; }
  85% { opacity: 0.45; }
  100% { transform: translate3d(2.5vw, -108dvh, 0); opacity: 0; }
}

/* ---- layers ------------------------------------------------------------- */
.hof-layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 520ms ease, visibility 0s linear 520ms;
}
.hof-cine[data-beat="title"] .hof-title-layer,
.hof-cine[data-beat="mon"] .hof-mon-layer,
.hof-cine[data-beat="team"] .hof-team-layer,
.hof-cine[data-beat="slate"] .hof-slate-layer {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease;
}
.hof-cine[data-beat="slate"] .hof-slate-layer { transition: opacity 320ms ease; }
.hof-cine.is-switching .hof-layer { opacity: 0; transition: opacity 300ms ease; }

/* ---- 1. title ------------------------------------------------------------ */
.hof-title-stack {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(6px, 1.8dvh, 16px);
  max-width: min(940px, 94vw);
}
.hof-kicker {
  font-size: clamp(0.6rem, 2dvh, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hof-gold-2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  opacity: 0;
  animation: hof-rise 900ms ease 300ms forwards;
}
.hof-title {
  margin: 0;
  font-family: var(--hof-serif);
  font-weight: 400;
  /* 18 spaced serif capitals: 4.55vw keeps one line inside 94vw at any width */
  font-size: clamp(1.5rem, min(11.5dvh, 4.55vw), 5.4rem);
  line-height: 1;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--hof-gold);
  text-shadow:
    0 0 22px rgba(243, 223, 174, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 0 64px rgba(255, 214, 140, 0.2);
  opacity: 0;
  animation: hof-title-in 1500ms cubic-bezier(0.16, 0.8, 0.2, 1) 520ms forwards;
}
.hof-rule {
  position: relative;
  width: min(380px, 62vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hof-gold-2) 20%, var(--hof-gold) 50%, var(--hof-gold-2) 80%, transparent);
  opacity: 0;
  animation: hof-rule-in 1100ms ease 1150ms forwards;
}
.hof-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--hof-gold);
  box-shadow: 0 0 10px rgba(243, 223, 174, 0.85);
}
.hof-sub {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(0.82rem, 3dvh, 1.14rem);
  line-height: 1.5;
  color: rgba(246, 241, 232, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  opacity: 0;
  animation: hof-rise 1000ms ease 1550ms forwards;
}
@keyframes hof-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hof-title-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); letter-spacing: 0.3em; filter: blur(6px); }
  60% { filter: blur(0); }
  100% { opacity: 1; transform: none; letter-spacing: 0.12em; filter: blur(0); }
}
@keyframes hof-rule-in {
  from { opacity: 0; transform: scaleX(0.2); }
  to { opacity: 1; transform: scaleX(1); }
}

/* ---- 2. one partner at a time ------------------------------------------- */
.hof-mon-layer { grid-template-columns: minmax(0, 1fr); }
.hof-mon {
  --mc: #9fe8ff;
  --mc2: #ffffff;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4.5vw, 72px);
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hof-mon.is-out { z-index: 1; }
.hof-mon.is-in { z-index: 2; }
/* the orb: a type-tinted disc under the ring so it is never a black hole */
.hof-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(60dvh, 40vw, 470px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mc) 26%, transparent) 0%,
    color-mix(in srgb, var(--mc) 12%, transparent) 42%,
    color-mix(in srgb, var(--mc) 4%, transparent) 62%,
    transparent 71%);
  opacity: 0;
}
.hof-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  height: 100%;
  min-height: 0;
}
.hof-glow {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(72dvh, 46vw, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mc) 60%, #ffffff 10%) 0%,
    color-mix(in srgb, var(--mc) 42%, transparent) 20%,
    color-mix(in srgb, var(--mc) 16%, transparent) 42%,
    transparent 68%);
  filter: blur(16px);
  opacity: 0;
  mix-blend-mode: screen;
}
.hof-ring {
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(60dvh, 40vw, 470px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  border: 1px solid rgba(243, 223, 174, 0.3);
  box-shadow: inset 0 0 26px rgba(243, 223, 174, 0.12), 0 0 18px rgba(243, 223, 174, 0.08);
  opacity: 0;
  -webkit-mask-image: conic-gradient(from 20deg, #000 0 38%, transparent 44% 56%, #000 62% 100%);
  mask-image: conic-gradient(from 20deg, #000 0 38%, transparent 44% 56%, #000 62% 100%);
}
.hof-sprite-slot { position: relative; z-index: 2; line-height: 0; }
.hof-sprite {
  --hof-size: min(54dvh, 40vw, 380px);
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: var(--hof-size);
  height: var(--hof-size);
}
/* No CSS drop-shadow on the sprite: Chrome paints a faint rectangular wash
   over the image's content box for filtered, downscaled PNGs (visible on
   black). The glow lives in .hof-glow and the contact shadow in ::after. */
.hof-sprite img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  margin: 0;
  filter: none;
}
.hof-sprite-slot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.5%;
  width: 66%;
  height: 9%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.3) 45%, transparent 72%);
  z-index: -1;
}
/* holo shimmer without drop-shadow (same wash artifact): hue/brightness only,
   the colour aura comes from the hue-rotating .hof-glow behind it */
.hof-cine .holo-sprite,
.hof-cine .shiny-sprite {
  animation: hof-holo-breathe 2.6s ease-in-out infinite;
  filter: saturate(1.35) brightness(1.08);
  will-change: filter, transform;
}
@keyframes hof-holo-breathe {
  0%, 100% { filter: saturate(1.35) brightness(1.08); transform: scale(1); }
  50% { filter: saturate(1.75) brightness(1.24); transform: scale(1.03); }
}
.hof-mon.is-in.is-holo .hof-glow {
  animation: hof-fade-in 900ms ease 80ms forwards, hof-holo-hue 6s linear infinite, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate;
}
@keyframes hof-holo-hue {
  from { filter: blur(16px) hue-rotate(0deg); }
  to { filter: blur(16px) hue-rotate(360deg); }
}
.hof-sprite--sheet img {
  width: calc(var(--hof-frames) * 100%);
  object-fit: fill;
  object-position: left bottom;
  animation: hof-sheet-play var(--hof-duration, 900ms) steps(var(--hof-frames), end) infinite;
}
@keyframes hof-sheet-play {
  from { margin-left: 0; }
  to { margin-left: calc(var(--hof-frames) * -100%); }
}
.hof-reflect-slot {
  position: relative;
  z-index: 1;
  line-height: 0;
  margin-top: -2px;
  opacity: 0.18;
  filter: blur(1.4px);
  -webkit-mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28) 44%, transparent 64%);
  mask-image: radial-gradient(ellipse 58% 100% at 50% 0%, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.28) 44%, transparent 64%);
  pointer-events: none;
}
.hof-reflect-slot .hof-sprite {
  height: calc(var(--hof-size) * 0.2);
  transform: scaleY(-1);
}
.hof-reflect-slot .hof-sprite img {
  height: var(--hof-size);
  margin-top: calc(var(--hof-size) * -0.8);
  filter: none;
}

.hof-mon-text {
  display: grid;
  gap: clamp(4px, 1.5dvh, 10px);
  justify-items: start;
  text-align: left;
  max-width: 36ch;
  min-width: 0;
}
.hof-index {
  font-size: clamp(0.62rem, 2dvh, 0.8rem);
  letter-spacing: 0.32em;
  color: var(--hof-gold-2);
  font-weight: 700;
}
.hof-mon-name {
  --hof-name-avail: 44vw;
  margin: 0;
  font-family: var(--hof-serif);
  /* never break a name mid-word: the size is also capped by the character
     count (0.6em average serif advance incl. tracking) against the column */
  font-size: min(clamp(1.7rem, 9.4dvh, 3.6rem), calc(var(--hof-name-avail) / (var(--hof-name-chars, 10) * 0.6)));
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--hof-gold);
  text-shadow: 0 0 18px rgba(243, 223, 174, 0.3), 0 2px 10px rgba(0, 0, 0, 0.75);
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: balance;
}
/* names are one voice here: serif gold; rarity moves to the meta line */
.hof-cine .hof-mon-name .rare-name, .hof-cine .hof-mon-name .ultra-name, .hof-cine .hof-mon-name .legendary-name,
.hof-cine .hof-team-name .rare-name, .hof-cine .hof-team-name .ultra-name, .hof-cine .hof-team-name .legendary-name {
  display: inline;
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  filter: none;
  animation: none;
  font-weight: inherit;
  letter-spacing: inherit;
  text-shadow: inherit;
}
.hof-mon-name .holo-star,
.hof-mon-name .black-holo-star { font-size: 0.6em; vertical-align: 0.2em; margin-left: 0.15em; }
.hof-mon-meta {
  font-size: clamp(0.8rem, 2.9dvh, 1.06rem);
  color: var(--hof-mute);
  font-weight: 600;
}
.hof-mon-types { display: flex; gap: 6px; flex-wrap: wrap; }
.hof-type {
  --tc: #9aa7b8;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: clamp(0.58rem, 2dvh, 0.74rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--tc) 46%, rgba(0, 0, 0, 0.5));
  border: 1px solid color-mix(in srgb, var(--tc) 82%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tc) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
/* rarity name treatments were tuned for parchment cards; lift them for black */
.hof-cine .rare-name {
  color: #7ce8c9;
  text-shadow: 0 0 12px rgba(124, 232, 201, 0.4), 0 2px 10px rgba(0, 0, 0, 0.7);
}
.hof-cine .ultra-name {
  background-image: linear-gradient(95deg, #b4bdff 0%, #7ff0dc 44%, #d3bdff 72%, #b4bdff 100%);
  filter: drop-shadow(0 0 10px rgba(140, 150, 255, 0.4)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}
.hof-cine .legendary-name {
  background-image: linear-gradient(96deg, #c9964a 0%, #f0cc74 26%, #fff3c4 48%, #ffffff 58%, #f0cc74 76%, #c9964a 100%);
  filter: drop-shadow(0 0 10px rgba(255, 222, 130, 0.42)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}
.hof-type[data-type="Flame"] { --tc: #ff7a3d; }
.hof-type[data-type="Leaf"] { --tc: #62c86a; }
.hof-type[data-type="Water"] { --tc: #3fa9ff; }
.hof-type[data-type="Volt"] { --tc: #ffd53f; }
.hof-type[data-type="Stone"] { --tc: #c2a172; }
.hof-type[data-type="Light"] { --tc: #fff1a8; }
.hof-type[data-type="Shadow"] { --tc: #9a7dff; }
.hof-type[data-type="Frost"] { --tc: #9fe8ff; }
.hof-type[data-type="Bug"] { --tc: #a4d84a; }
.hof-type[data-type="Dragon"] { --tc: #ff5c8a; }
.hof-type[data-type="Dinosaurus"] { --tc: #d29c5a; }
.hof-type[data-type="Astral"] { --tc: #c48cff; }
.hof-type[data-type="Abyssal"] { --tc: #6b7cff; }
.hof-type[data-type="Runic"] { --tc: #ffb347; }
.hof-type[data-type="Holy"] { --tc: #ffe9a8; }
.hof-type[data-type="Eternal"] { --tc: #7dffd9; }
.hof-mon-power { display: grid; gap: 1px; margin-top: clamp(2px, 1dvh, 8px); }
.hof-mon-power b {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.5rem, 7dvh, 2.85rem);
  font-weight: 500;
  line-height: 1;
  color: #ffd76a;
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(255, 215, 106, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
}
.hof-mon-power small {
  font-size: clamp(0.58rem, 1.9dvh, 0.74rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--hof-gold-2);
  font-weight: 700;
}

/* partner enter / leave */
.hof-mon .hof-sprite-slot,
.hof-mon .hof-reflect-slot,
.hof-mon .hof-mon-text > * { opacity: 0; }
.hof-mon.is-in .hof-glow { animation: hof-fade-in 900ms ease 80ms forwards, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate; }
.hof-mon.is-in .hof-stage::before { animation: hof-fade-in 900ms ease 120ms forwards, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate; }
.hof-mon.is-in .hof-ring { animation: hof-fade-in 1000ms ease 200ms forwards, hof-ring-spin 26s linear infinite; }
.hof-mon.is-in .hof-sprite-slot { animation: hof-hero-in 720ms cubic-bezier(0.18, 0.9, 0.22, 1) forwards, hof-hero-breathe 4.8s ease-in-out 900ms infinite alternate; }
.hof-mon.is-in .hof-reflect-slot { animation: hof-fade-in 800ms ease 220ms forwards; }
/* everything readable by ~800 ms so a 3.6 s beat is mostly a held pose */
.hof-mon.is-in .hof-index { animation: hof-rise 320ms ease 120ms forwards; }
.hof-mon.is-in .hof-mon-name { animation: hof-rise 360ms ease 200ms forwards; }
.hof-mon.is-in .hof-mon-meta { animation: hof-rise 360ms ease 290ms forwards; }
.hof-mon.is-in .hof-mon-types { animation: hof-rise 340ms ease 360ms forwards; }
.hof-mon.is-in .hof-mon-power { animation: hof-rise 360ms ease 420ms forwards; }
.hof-mon.is-out .hof-sprite-slot { animation: hof-hero-out 400ms ease-in forwards; }
.hof-mon.is-out .hof-mon-text > * { animation: hof-text-out 300ms ease forwards; }
.hof-mon.is-out .hof-glow,
.hof-mon.is-out .hof-ring,
.hof-mon.is-out .hof-stage::before,
.hof-mon.is-out .hof-reflect-slot { animation: hof-fade-out 360ms ease forwards; }
@keyframes hof-glow-drift {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes hof-hero-breathe {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-4px) scale(1.018); }
}
@keyframes hof-fade-in { to { opacity: 1; } }
@keyframes hof-fade-out { to { opacity: 0; } }
@keyframes hof-text-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes hof-ring-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hof-hero-in {
  0% { opacity: 0; transform: translateX(14vw) scale(0.9); filter: brightness(2.4) blur(3px); }
  55% { filter: brightness(1.28) blur(0); }
  100% { opacity: 1; transform: none; filter: brightness(1) blur(0); }
}
@keyframes hof-hero-out {
  to { opacity: 0; transform: translateX(-10vw) scale(0.96); }
}

/* ---- 3. the whole team --------------------------------------------------- */
.hof-team-stack {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(4px, 1.5dvh, 12px);
  width: min(1120px, 100%);
}
.hof-team-layer .hof-kicker { animation-delay: 120ms; }
.hof-team-title {
  margin: 0;
  font-family: var(--hof-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 6.6dvh, 2.9rem);
  letter-spacing: 0.06em;
  color: var(--hof-gold);
  text-shadow: 0 0 18px rgba(243, 223, 174, 0.3), 0 2px 0 rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: hof-rise 900ms ease 240ms forwards;
}
.hof-team-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 1.6vw, 18px);
  width: 100%;
  margin-top: clamp(16px, 9dvh, 72px);
}
.hof-team-mon {
  --mc: #9fe8ff;
  display: grid;
  justify-items: center;
  gap: 2px;
  flex: 0 1 clamp(84px, 15vw, 164px);
  min-width: 0;
  opacity: 0;
  transform: translateY(24px);
  animation: hof-team-in 720ms cubic-bezier(0.18, 0.9, 0.22, 1) forwards;
  animation-delay: calc(420ms + var(--i) * 150ms);
}
.hof-sprite.hof-sprite--team { --hof-size: clamp(72px, 28dvh, 176px); }
.hof-team-mon { position: relative; }
.hof-team-mon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--hof-size, 120px) * 0.5);
  width: calc(var(--hof-size, 120px) * 1.25);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--mc) 46%, transparent) 0%,
    color-mix(in srgb, var(--mc) 18%, transparent) 38%,
    transparent 68%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
.hof-team-mon.is-holo::before { animation: hof-holo-hue-soft 6s linear infinite; }
@keyframes hof-holo-hue-soft {
  from { filter: blur(10px) hue-rotate(0deg); }
  to { filter: blur(10px) hue-rotate(360deg); }
}
.hof-team-mon .hof-sprite { position: relative; z-index: 1; }
.hof-team-mon .hof-sprite::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 8%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  z-index: -1;
}
.hof-team-mon .hof-sprite img { filter: none; }
.hof-team-name {
  font-family: var(--hof-serif);
  color: var(--hof-gold);
  letter-spacing: 0.03em;
  font-size: clamp(0.82rem, 3.1dvh, 1.14rem);
  font-weight: 400;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hof-team-meta { font-size: clamp(0.75rem, 2.3dvh, 0.84rem); color: var(--hof-mute); font-weight: 600; }
@keyframes hof-team-in { to { opacity: 1; transform: translateY(0); } }
.hof-team-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 3.4vw, 40px);
  margin-top: clamp(2px, 1.2dvh, 10px);
  padding: clamp(6px, 1.5dvh, 12px) clamp(14px, 3vw, 30px);
  border-top: 1px solid rgba(243, 223, 174, 0.24);
  border-bottom: 1px solid rgba(243, 223, 174, 0.24);
  opacity: 0;
  animation: hof-rise 800ms ease 1400ms forwards;
}
.hof-team-stats span { display: grid; justify-items: center; gap: 1px; }
.hof-team-stats small {
  font-size: clamp(0.54rem, 1.8dvh, 0.7rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--hof-gold-2);
  font-weight: 700;
}
.hof-team-stats b { font-size: clamp(0.9rem, 3.3dvh, 1.32rem); font-weight: 900; }
.hof-apex {
  margin: 0;
  font-size: clamp(0.7rem, 2.5dvh, 0.96rem);
  color: rgba(246, 241, 232, 0.82);
  opacity: 0;
  animation: hof-rise 800ms ease 1800ms forwards;
}
.hof-apex strong { color: #ffd76a; }

/* ---- 4. white on black --------------------------------------------------- */
.hof-slate-layer {
  background: transparent;
  align-content: center;
  gap: 0;
}
.hof-slate-lines {
  width: min(920px, 100%);
  min-height: 0;
  display: grid;
  place-items: start center;
}
.hof-rule--slate {
  width: min(300px, 50vw);
  margin-bottom: 30px;
  animation: hof-rule-in 900ms ease 160ms forwards;
}
.hof-slate-layer .hof-continue { margin-top: clamp(28px, 6dvh, 48px); }
.hof-slate-line {
  max-width: 38ch;
  text-wrap: balance;
}
.hof-slate-line.has-clauses { max-width: 44ch; text-wrap: normal; }
.hof-slate-clause { display: block; text-wrap: pretty; }
.hof-slate-line { /* continued */
  font-family: var(--hof-serif);
  color: rgba(232, 220, 192, 0.92);
  font-size: clamp(1.05rem, 4dvh, 1.75rem);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  text-shadow: none;
  animation: lina-loop-line-pop 880ms ease forwards;
}
.hof-slate-line.is-leaving { animation: lina-loop-line-vanish 960ms ease forwards; }
.hof-slate-line.major {
  font-size: clamp(1.45rem, 5.8dvh, 2.4rem);
  line-height: 1.25;
  color: var(--hof-gold);
}
.hof-continue {
  pointer-events: auto;
  cursor: pointer;
  min-width: 0;
  min-height: 46px;
  padding: 14px 40px;
  border: 1px solid rgba(232, 214, 160, 0.55);
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.22);
  color: var(--hof-gold);
  box-shadow: none;
  opacity: 0;
  animation: lina-loop-button-in 620ms ease forwards;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}
.hof-continue:hover,
.hof-continue:focus-visible {
  border-color: rgba(243, 223, 174, 0.95);
  background: rgba(243, 223, 174, 0.12);
  color: #fff8e6;
  outline: none;
}
.hof-continue.hidden { display: none; }

.hof-hint {
  position: absolute;
  left: 50%;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
.hof-hint.is-visible { opacity: 1; }

/* ---- portrait / narrow: stack stage over text ---------------------------- */
@media (max-aspect-ratio: 11/10) {
  .hof-layer { padding-bottom: max(56px, calc(env(safe-area-inset-bottom) + 48px)); }
  .hof-mon {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    height: auto;
    gap: clamp(10px, 3dvh, 28px);
  }
  .hof-stage { height: auto; }
  .hof-sprite { --hof-size: min(34dvh, 70vw, 320px); }
  .hof-glow { width: min(50dvh, 96vw, 500px); top: 44%; }
  .hof-ring, .hof-stage::before { width: min(42dvh, 82vw, 410px); top: 44%; }
  .hof-mon-text { justify-items: center; text-align: center; padding: 0 4vw; max-width: none; }
  .hof-mon-name { --hof-name-avail: 86vw; }
  .hof-mon-power { justify-items: center; }
  .hof-team-title { font-size: min(clamp(1.3rem, 6.6dvh, 2.9rem), 8vw); }
  .hof-sprite.hof-sprite--team { --hof-size: clamp(64px, 24vw, 130px); }
  .hof-team-row { flex-wrap: wrap; row-gap: clamp(6px, 1.4dvh, 12px); }
  .hof-team-mon { flex: 0 1 calc(33.33% - 12px); }
  .hof-team-stats { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: clamp(8px, 1.6dvh, 14px) clamp(18px, 8vw, 48px); }
}

/* short landscape phones */
@media (max-height: 480px) and (min-aspect-ratio: 11/10) {
  .hof-title-stack { gap: clamp(4px, 1.4dvh, 10px); }
  .hof-sub { max-width: 72ch; line-height: 1.4; }
  .hof-mon { gap: clamp(6px, 2.6vw, 30px); }
  .hof-mon-text { gap: clamp(3px, 1.2dvh, 8px); }
  .hof-team-stack { gap: clamp(2px, 1.1dvh, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hof-cine *, .hof-cine *::before {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
  .hof-motes { display: none; }
}

/* ==========================================================================
   reward-card-aaa-20260831 — the shared `.dig-result` reward plate on touch
   devices ("You found a Fusion Stone III!", Colosseum eggs, TMs, Prestige
   relics, Lina Memory Anchors, Della's key + egg).

   One family look for every variant: a dark cinematic plate lit by the item's
   own --stone / --stone2 accent. Landscape phones get a two-column
   composition (hero left, copy right, CTA pinned bottom-right); portrait
   stacks the same plate. Desktop keeps its existing cards.

   SPECIFICITY (measured with CSS.getMatchedStylesForNode, not guessed):
   three skins fight over this card -
     - the vendor-paper ledger in mongame-vendor-system.css
       `#modal:not(.clean-world-modal):not(.battle-switch-modal):not(.title-modal)
        > :is(.modal-card,.shop-card):not(.evolution-result)...` = (1, 6-9, 0-1)
       (cream paper, Georgia h2 with fleuron, sticky masthead + sticky footer);
     - the Ledger world-menu skin `.modal.clean-world-modal .modal-card` (0,3,0)
       and its `p { color: #2d2d2d !important }`;
     - the Della plate `#modal > .della-reward-result.evolution-result` (1,2,0).
   `html.is-touch #modal#modal > .modal-card.dig-result` = (2,3,1) outranks all
   of them without an !important storm; the only !important here answers the
   Ledger's own !important on <p> color.
   ========================================================================== */

html.is-touch #modal#modal > .modal-card.dig-result {
  --rc-stone: var(--stone, #7df0ff);
  --rc-stone2: var(--stone2, #fff3a2);
  --rc-ink: #f4f7fb;
  --rc-ink-soft: rgba(226, 234, 244, 0.82);
  --rc-safe-l: max(24px, env(safe-area-inset-left));
  --rc-safe-r: max(24px, env(safe-area-inset-right));
  --rc-safe-t: max(14px, env(safe-area-inset-top));
  --rc-safe-b: max(16px, env(safe-area-inset-bottom));
  position: fixed;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--rc-safe-t) var(--rc-safe-r) var(--rc-safe-b) var(--rc-safe-l);
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  color: var(--rc-ink);
  color-scheme: dark;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scrollbar-width: none;
  background:
    radial-gradient(70% 90% at 22% 52%, color-mix(in srgb, var(--rc-stone) 27%, transparent), transparent 62%),
    radial-gradient(55% 70% at 88% 100%, color-mix(in srgb, var(--rc-stone2) 13%, transparent), transparent 60%),
    radial-gradient(40% 40% at 70% 0%, color-mix(in srgb, var(--rc-stone) 8%, transparent), transparent 70%),
    linear-gradient(180deg, #0f1421 0%, #0a0e18 58%, #05070d 100%);
  background-blend-mode: normal;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  column-gap: clamp(18px, 4vw, 44px);
  row-gap: 0;
  align-items: center;
  align-content: stretch;
  justify-items: start;
  text-align: left;
  animation: rc-plate-in 460ms ease-out both;
}

/* Plate atmosphere: hairline grain, a diagonal sheen, a vignette and a few
   accent dust motes around the hero. All gradients, no filters. */
html.is-touch #modal#modal > .modal-card.dig-result::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(3px 3px at 15% 27%, color-mix(in srgb, var(--rc-stone2) 42%, transparent), transparent 70%),
    radial-gradient(2px 2px at 33% 21%, color-mix(in srgb, var(--rc-stone) 42%, transparent), transparent 70%),
    radial-gradient(2px 2px at 9% 62%, color-mix(in srgb, var(--rc-stone) 40%, transparent), transparent 70%),
    radial-gradient(3px 3px at 36% 74%, color-mix(in srgb, var(--rc-stone2) 40%, transparent), transparent 70%),
    radial-gradient(2px 2px at 26% 86%, color-mix(in srgb, var(--rc-stone) 37%, transparent), transparent 70%),
    radial-gradient(2px 2px at 40% 42%, color-mix(in srgb, var(--rc-stone2) 35%, transparent), transparent 70%),
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.035) 47%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.44) 100%);
  mix-blend-mode: normal;
  animation: rc-motes 6s ease-in-out infinite alternate;
}

/* Column divider: one hairline lit by the accent at the hero's height.
   (The vendor-paper skin uses the card's ::after as a sticky scroll fade -
   every one of its properties is restated here.) */
html.is-touch #modal#modal > .modal-card.dig-result::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: calc(var(--rc-safe-l) + (100vw - var(--rc-safe-l) - var(--rc-safe-r)) * 0.42 + clamp(9px, 2vw, 22px));
  top: 17%;
  bottom: 17%;
  right: auto;
  width: 1px;
  height: auto;
  margin: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc-stone) 58%, rgba(255, 255, 255, 0.5)) 50%, transparent);
  opacity: 0.6;
}

html.is-touch #modal#modal > .modal-card.dig-result > * {
  position: relative;
  z-index: 1;
}

/* ---- hero (gem / egg / scroll / anchor) -------------------------------- */
html.is-touch #modal#modal > .modal-card.dig-result > .dig-result-gem,
html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  transform: none;
}

html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem {
  position: relative;
  width: clamp(124px, 41dvh, 180px);
  height: clamp(124px, 41dvh, 180px);
  margin: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc-stone) 36%, transparent), color-mix(in srgb, var(--rc-stone) 10%, transparent) 46%, transparent 64%);
}

/* pedestal ring + light disc under the item */
html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--rc-stone) 44%, rgba(255, 255, 255, 0.28));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 42px color-mix(in srgb, var(--rc-stone) 40%, transparent),
    inset 0 0 36px color-mix(in srgb, var(--rc-stone) 22%, transparent);
  opacity: 0.85;
  animation:
    rc-ring-in 720ms cubic-bezier(0.2, 0.8, 0.24, 1) both,
    rc-ring-breathe 3.2s ease-in-out 720ms infinite;
}

html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(2px);
  opacity: 0.8;
  animation: rc-shadow-breathe 2.6s ease-in-out infinite;
}

html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem .dig-result-stone,
html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem img {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--rc-stone) 78%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--rc-stone2) 42%, transparent))
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.42));
  animation:
    rc-hero-in 620ms cubic-bezier(0.2, 0.9, 0.3, 1.18) 60ms both,
    gem-bob 2.6s ease-in-out 680ms infinite;
}

/* Della: two items side by side on the same pedestal grammar */
html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 26px);
  width: auto;
  height: auto;
  min-height: 0;
}

html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items .dig-result-gem {
  width: clamp(96px, 30dvh, 136px);
  height: clamp(96px, 30dvh, 136px);
}

/* ---- copy ------------------------------------------------------------- */
html.is-touch #modal#modal > .modal-card.dig-result > h2 {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  display: block;
  position: relative;
  top: auto;
  width: 100%;
  max-width: 24ch;
  margin: 0 0 clamp(6px, 1.6dvh, 12px);
  padding: clamp(14px, 3.4dvh, 22px) 0 0;
  color: var(--rc-ink);
  -webkit-text-fill-color: currentColor;
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: clamp(1.45rem, 6.6dvh, 2.15rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-align: left;
  text-wrap: balance;
  text-transform: none;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 0 26px color-mix(in srgb, var(--rc-stone) 34%, transparent);
  overflow-wrap: anywhere;
  background: none;
  box-shadow: none;
  filter: none;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 120ms both;
}

/* kicker: an accent rule with a small diamond - reads as "acquired" without
   words, so EN and DE are identical */
html.is-touch #modal#modal > .modal-card.dig-result > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  flex: none;
  align-self: auto;
  width: clamp(44px, 9vw, 72px);
  height: 3px;
  transform: none;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rc-stone2), var(--rc-stone) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rc-stone) 60%, transparent);
}

html.is-touch #modal#modal > .modal-card.dig-result > h2::after {
  content: "";
  position: absolute;
  left: clamp(50px, 10vw, 80px);
  top: -2px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
  background: var(--rc-stone2);
  box-shadow: 0 0 10px var(--rc-stone2);
}

html.is-touch #modal#modal > .modal-card.dig-result > p {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  width: 100%;
  max-width: 44ch;
  margin: 0;
  color: var(--rc-ink-soft) !important; /* the Ledger skin paints <p> #2d2d2d !important */
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: clamp(0.94rem, 3.6dvh, 1.08rem);
  font-weight: 500;
  line-height: 1.42;
  text-align: left;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 230ms both;
}

/* second paragraph (TM cards): the move summary sits above the instructions */
html.is-touch #modal#modal > .modal-card.dig-result > p + p {
  grid-row: 4;
  margin-top: clamp(6px, 1.6dvh, 12px);
  animation-delay: 320ms;
}

html.is-touch #modal#modal > .modal-card.dig-result > p strong {
  color: color-mix(in srgb, var(--rc-stone2) 72%, #fff);
  font-weight: 800;
  box-shadow: none;
}

/* Della's quote: speaker tag over the line */
html.is-touch #modal#modal > .modal-card.dig-result > p.della-reward-quote {
  display: grid;
  gap: 4px;
  max-width: 40ch;
}

html.is-touch #modal#modal > .modal-card.dig-result > p.della-reward-quote strong {
  color: color-mix(in srgb, var(--rc-stone2) 70%, #fff);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html.is-touch #modal#modal > .modal-card.dig-result > p.della-reward-quote span {
  font-style: italic;
}

/* ---- CTA: pinned bottom-right ------------------------------------------ */
html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions {
  position: absolute;
  top: auto;
  right: var(--rc-safe-r);
  bottom: var(--rc-safe-b);
  left: auto;
  z-index: 2;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 420ms both;
}

/* the vendor-paper skin paints a 22px cream dissolve strip above its sticky
   action band (`.dialogue-actions::before`) - it has no place on the plate */
html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions::before,
html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions::after {
  content: none;
  display: none;
}

html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions button {
  position: relative;
  min-width: 168px;
  min-height: 48px;
  padding: 0 26px 0 24px;
  border: 1px solid color-mix(in srgb, var(--rc-stone) 55%, rgba(255, 255, 255, 0.4));
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-stone) 26%, #182034), color-mix(in srgb, var(--rc-stone) 12%, #0c111d));
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: clamp(0.92rem, 3.6dvh, 1.02rem);
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transform: none;
  opacity: 1;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in srgb, var(--rc-stone) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 90ms ease;
}

html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions button:hover:not(:disabled),
html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions button:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--rc-stone2) 70%, #fff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-stone) 36%, #1a2438), color-mix(in srgb, var(--rc-stone) 18%, #0e1320));
  outline: none;
  outline-offset: 0;
  transform: none;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    0 0 0 3px color-mix(in srgb, var(--rc-stone) 34%, transparent),
    0 0 28px color-mix(in srgb, var(--rc-stone) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions button:active:not(:disabled) {
  transform: translateY(1px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-stone) 20%, #141b2c), color-mix(in srgb, var(--rc-stone) 10%, #0a0f19));
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ---- portrait: stack the same plate ----------------------------------- */
@media (orientation: portrait) {
  html.is-touch #modal#modal > .modal-card.dig-result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1.25fr);
    column-gap: 0;
    justify-items: center;
    text-align: center;
    background:
      radial-gradient(80% 50% at 50% 30%, color-mix(in srgb, var(--rc-stone) 27%, transparent), transparent 62%),
      radial-gradient(70% 40% at 50% 100%, color-mix(in srgb, var(--rc-stone2) 11%, transparent), transparent 60%),
      linear-gradient(180deg, #0f1421 0%, #0a0e18 58%, #05070d 100%);
  }

  html.is-touch #modal#modal > .modal-card.dig-result::before {
    background:
      radial-gradient(3px 3px at 22% 22%, color-mix(in srgb, var(--rc-stone2) 42%, transparent), transparent 70%),
      radial-gradient(2px 2px at 76% 18%, color-mix(in srgb, var(--rc-stone) 42%, transparent), transparent 70%),
      radial-gradient(2px 2px at 14% 44%, color-mix(in srgb, var(--rc-stone) 40%, transparent), transparent 70%),
      radial-gradient(3px 3px at 84% 40%, color-mix(in srgb, var(--rc-stone2) 40%, transparent), transparent 70%),
      radial-gradient(2px 2px at 30% 12%, color-mix(in srgb, var(--rc-stone) 37%, transparent), transparent 70%),
      linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.035) 47%, transparent 56%),
      repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
      radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.44) 100%);
  }

  html.is-touch #modal#modal > .modal-card.dig-result::after {
    display: none;
  }

  html.is-touch #modal#modal > .modal-card.dig-result > .dig-result-gem,
  html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-bottom: clamp(14px, 3dvh, 28px);
  }

  html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem {
    width: clamp(150px, 44vw, 210px);
    height: clamp(150px, 44vw, 210px);
  }

  html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items {
    gap: clamp(18px, 6vw, 34px);
  }

  html.is-touch #modal#modal > .modal-card.dig-result > .della-reward-result-items .dig-result-gem {
    width: clamp(104px, 28vw, 136px);
    height: clamp(104px, 28vw, 136px);
  }

  html.is-touch #modal#modal > .modal-card.dig-result > h2 {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    max-width: 15ch;
    padding-top: clamp(16px, 2.6dvh, 24px);
    font-size: clamp(1.6rem, 7.6vw, 2.3rem);
    text-align: center;
  }

  html.is-touch #modal#modal > .modal-card.dig-result > h2::before {
    left: 50%;
    width: clamp(120px, 44vw, 200px);
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--rc-stone) 30%, var(--rc-stone2) 50%, var(--rc-stone) 70%, transparent);
  }

  html.is-touch #modal#modal > .modal-card.dig-result > h2::after {
    left: 50%;
    top: -3px;
    transform: translateX(-50%) rotate(45deg);
  }

  html.is-touch #modal#modal > .modal-card.dig-result > p {
    grid-column: 1;
    grid-row: 4;
    max-width: 32ch;
    font-size: clamp(0.98rem, 4.2vw, 1.1rem);
    text-align: center;
  }

  html.is-touch #modal#modal > .modal-card.dig-result > p + p {
    grid-row: 5;
  }

  html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions {
    left: var(--rc-safe-l);
    right: var(--rc-safe-r);
    bottom: max(22px, env(safe-area-inset-bottom));
    justify-content: center;
  }

  html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions button {
    width: min(100%, 360px);
    min-height: 52px;
  }
}

/* ---- keyframes / reduced motion ----------------------------------------- */
@keyframes rc-plate-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rc-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes rc-ring-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 0.85; transform: scale(0.985); }
}

@keyframes rc-hero-in {
  from { opacity: 0; transform: translateY(10px) scale(0.84); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rc-ring-breathe {
  0%, 100% { opacity: 0.62; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.015); }
}

@keyframes rc-shadow-breathe {
  0%, 100% { transform: scaleX(1); opacity: 0.8; }
  50% { transform: scaleX(0.86); opacity: 0.55; }
}

@keyframes rc-motes {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 4px -10px, -6px -8px, 5px -12px, -4px -9px, 6px -11px, -5px -7px, 0 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-touch #modal#modal > .modal-card.dig-result,
  html.is-touch #modal#modal > .modal-card.dig-result::before,
  html.is-touch #modal#modal > .modal-card.dig-result > h2,
  html.is-touch #modal#modal > .modal-card.dig-result > p,
  html.is-touch #modal#modal > .modal-card.dig-result > .dialogue-actions,
  html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem::before,
  html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem::after,
  html.is-touch #modal#modal > .modal-card.dig-result .dig-result-gem img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   reward-card-aaa-20260831 — OPTIONAL desktop companion for the touch plate
   in _dig_result_landscape.css. NOT required by the mobile-landscape task;
   offered because the desktop reward card currently renders in THREE
   unrelated skins (vendor-paper ledger for stones/relics/anchors, Ledger
   parchment for Colosseum eggs, dark glass with the 340px `.evolution-result
   img` overlapping the copy for TMs). This gives every desktop variant the
   same two-column plate as a centred 860px card. Splice it only if wanted.
   ========================================================================== */

html:not(.is-touch) #modal#modal > .modal-card.dig-result {
  --rc-stone: var(--stone, #7df0ff);
  --rc-stone2: var(--stone2, #fff3a2);
  --rc-ink: #f4f7fb;
  --rc-ink-soft: rgba(226, 234, 244, 0.82);
  position: fixed;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
  width: min(860px, calc(100vw - 48px));
  height: fit-content;
  min-height: 0;
  max-width: none;
  max-height: calc(100vh - 48px);
  margin: auto;
  padding: 30px 34px 26px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  color: var(--rc-ink);
  color-scheme: dark;
  border: 1px solid color-mix(in srgb, var(--rc-stone) 34%, rgba(255, 255, 255, 0.16));
  border-radius: 22px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 60px color-mix(in srgb, var(--rc-stone) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scrollbar-width: none;
  background:
    radial-gradient(70% 100% at 22% 50%, color-mix(in srgb, var(--rc-stone) 26%, transparent), transparent 62%),
    radial-gradient(55% 70% at 90% 100%, color-mix(in srgb, var(--rc-stone2) 12%, transparent), transparent 60%),
    linear-gradient(180deg, #0f1421 0%, #0a0e18 58%, #05070d 100%);
  background-blend-mode: normal;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  grid-template-rows: auto auto auto auto;
  column-gap: 34px;
  row-gap: 0;
  align-items: center;
  justify-items: start;
  text-align: left;
  animation: rc-plate-in 460ms ease-out both;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 0;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(3px 3px at 15% 27%, color-mix(in srgb, var(--rc-stone2) 42%, transparent), transparent 70%),
    radial-gradient(2px 2px at 33% 21%, color-mix(in srgb, var(--rc-stone) 42%, transparent), transparent 70%),
    radial-gradient(2px 2px at 9% 62%, color-mix(in srgb, var(--rc-stone) 40%, transparent), transparent 70%),
    radial-gradient(3px 3px at 36% 74%, color-mix(in srgb, var(--rc-stone2) 40%, transparent), transparent 70%),
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, 0.035) 47%, transparent 56%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 7px),
    radial-gradient(120% 100% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.4) 100%);
  mix-blend-mode: normal;
  animation: rc-motes 6s ease-in-out infinite alternate;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  left: calc(34px + (100% - 68px) * 0.4 + 16px);
  top: 16%;
  bottom: 16%;
  right: auto;
  width: 1px;
  height: auto;
  margin: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--rc-stone) 58%, rgba(255, 255, 255, 0.5)) 50%, transparent);
  opacity: 0.6;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > * {
  position: relative;
  z-index: 1;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dig-result-gem,
html:not(.is-touch) #modal#modal > .modal-card.dig-result > .della-reward-result-items {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  transform: none;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc-stone) 36%, transparent), color-mix(in srgb, var(--rc-stone) 10%, transparent) 46%, transparent 64%);
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--rc-stone) 44%, rgba(255, 255, 255, 0.28));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 42px color-mix(in srgb, var(--rc-stone) 40%, transparent),
    inset 0 0 36px color-mix(in srgb, var(--rc-stone) 22%, transparent);
  opacity: 0.85;
  animation:
    rc-ring-in 720ms cubic-bezier(0.2, 0.8, 0.24, 1) both,
    rc-ring-breathe 3.2s ease-in-out 720ms infinite;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(2px);
  opacity: 0.8;
  animation: rc-shadow-breathe 2.6s ease-in-out infinite;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem .dig-result-stone,
html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem img {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--rc-stone) 78%, transparent))
    drop-shadow(0 0 34px color-mix(in srgb, var(--rc-stone2) 42%, transparent))
    drop-shadow(0 14px 14px rgba(0, 0, 0, 0.42));
  animation:
    rc-hero-in 620ms cubic-bezier(0.2, 0.9, 0.3, 1.18) 60ms both,
    gem-bob 2.6s ease-in-out 680ms infinite;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .della-reward-result-items {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: auto;
  height: auto;
  min-height: 0;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .della-reward-result-items .dig-result-gem {
  width: 132px;
  height: 132px;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > h2 {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  display: block;
  position: relative;
  top: auto;
  width: 100%;
  max-width: 24ch;
  margin: 0 0 10px;
  padding: 20px 0 0;
  color: var(--rc-ink);
  -webkit-text-fill-color: currentColor;
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-align: left;
  text-wrap: balance;
  text-transform: none;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.55),
    0 0 26px color-mix(in srgb, var(--rc-stone) 34%, transparent);
  overflow-wrap: anywhere;
  background: none;
  box-shadow: none;
  filter: none;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 120ms both;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  flex: none;
  align-self: auto;
  width: 64px;
  height: 3px;
  transform: none;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rc-stone2), var(--rc-stone) 70%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--rc-stone) 60%, transparent);
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > h2::after {
  content: "";
  position: absolute;
  left: 72px;
  top: -2px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1px;
  background: var(--rc-stone2);
  box-shadow: 0 0 10px var(--rc-stone2);
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  width: 100%;
  max-width: 46ch;
  margin: 0;
  color: var(--rc-ink-soft) !important;
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.46;
  text-align: left;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 230ms both;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p + p {
  grid-row: 3;
  margin-top: 10px;
  animation-delay: 320ms;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p strong {
  color: color-mix(in srgb, var(--rc-stone2) 72%, #fff);
  font-weight: 800;
  box-shadow: none;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p.della-reward-quote {
  display: grid;
  gap: 4px;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p.della-reward-quote strong {
  color: color-mix(in srgb, var(--rc-stone2) 70%, #fff);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > p.della-reward-quote span {
  font-style: italic;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions {
  grid-column: 2;
  grid-row: 4;
  position: relative;
  inset: auto;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  justify-self: stretch;
  gap: 10px;
  width: 100%;
  height: auto;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  animation: rc-rise 560ms cubic-bezier(0.2, 0.8, 0.24, 1) 420ms both;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions::before,
html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions::after {
  content: none;
  display: none;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions button {
  position: relative;
  min-width: 168px;
  min-height: 46px;
  padding: 0 26px 0 24px;
  border: 1px solid color-mix(in srgb, var(--rc-stone) 55%, rgba(255, 255, 255, 0.4));
  border-radius: 13px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-stone) 26%, #182034), color-mix(in srgb, var(--rc-stone) 12%, #0c111d));
  font-family: var(--font, "Inter", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transform: none;
  opacity: 1;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    0 0 22px color-mix(in srgb, var(--rc-stone) 26%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 90ms ease;
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions button:hover:not(:disabled),
html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions button:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--rc-stone2) 70%, #fff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--rc-stone) 36%, #1a2438), color-mix(in srgb, var(--rc-stone) 18%, #0e1320));
  outline: none;
  outline-offset: 0;
  transform: none;
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.42),
    0 0 0 3px color-mix(in srgb, var(--rc-stone) 34%, transparent),
    0 0 28px color-mix(in srgb, var(--rc-stone) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions button:active:not(:disabled) {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.is-touch) #modal#modal > .modal-card.dig-result,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result::before,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result > h2,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result > p,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result > .dialogue-actions,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem::before,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem::after,
  html:not(.is-touch) #modal#modal > .modal-card.dig-result .dig-result-gem img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* hof crossfade fix (2026-09-01): the out animations must START from the
   visible state. Without an explicit `from`, cancelling the forwards-filled
   in-animation snapped every element to its base opacity 0, so the leaving
   partner popped out instead of sliding, and each hand-off dipped to black.
   Declared last (0,4,0) so they win over the is-in and is-in.is-holo rules. */
@keyframes hof-hero-out { from { opacity: 1; transform: translateX(0) scale(1); } to { opacity: 0; transform: translateX(-10vw) scale(0.96); } }
@keyframes hof-text-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes hof-fade-out { from { opacity: 1; } to { opacity: 0; } }
.hof-cine .hof-mon.is-out .hof-sprite-slot { animation: hof-hero-out 480ms ease-in forwards; }
.hof-cine .hof-mon.is-out .hof-mon-text > * { animation: hof-text-out 360ms ease forwards; }
.hof-cine .hof-mon.is-out .hof-glow,
.hof-cine .hof-mon.is-out .hof-ring,
.hof-cine .hof-mon.is-out .hof-stage::before,
.hof-cine .hof-mon.is-out .hof-reflect-slot { animation: hof-fade-out 460ms ease forwards; }

/* hof carousel timing (2026-09-01, motion sign-off nits): the leaving text
   column drops in 150 ms so it never overlaps the incoming sprite (which takes
   ~300 ms to cross), and the incoming orb disc + glow arrive WITH the sprite
   instead of ~200 ms after it, so the monster lands inside its own light. */
.hof-cine .hof-mon.is-out .hof-mon-text > * { animation: hof-text-out 150ms ease-out forwards; }
.hof-cine .hof-mon.is-out .hof-sprite-slot { animation: hof-hero-out 400ms ease-in forwards; }
.hof-cine .hof-mon.is-in .hof-glow { animation: hof-fade-in 320ms ease 0ms forwards, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate; }
.hof-cine .hof-mon.is-in.is-holo .hof-glow { animation: hof-fade-in 320ms ease 0ms forwards, hof-holo-hue 6s linear infinite, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate; }
.hof-cine .hof-mon.is-in .hof-stage::before { animation: hof-fade-in 320ms ease 0ms forwards, hof-glow-drift 5.2s ease-in-out 900ms infinite alternate; }
.hof-cine .hof-mon.is-in .hof-ring { animation: hof-fade-in 480ms ease 80ms forwards, hof-ring-spin 26s linear infinite; }

/* ---- Atlas Fly refusal (2026-09-02) ----------------------------------------
   flyTo()'s reasons used to be toast-only and the toast paints under the open
   Atlas card. The reason now lands inside the card, under the title, and the
   refused chip gets an ox-red ring. */
.modal.clean-world-modal .atlas-modal .atlas-fly-refusal {
  flex: 0 0 auto;
  margin: 0 44px 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--mw-ox);
  background: rgba(135, 32, 25, 0.08);
  color: var(--mw-ox);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
}
.modal.clean-world-modal .atlas-modal .atlas-fly-refusal.is-fresh {
  animation: atlas-fly-refusal-in 320ms ease-out;
}
@keyframes atlas-fly-refusal-in {
  0% { transform: translateX(-6px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.modal.clean-world-modal .atlas-modal .atlas-chip.refused {
  border-color: rgba(135, 32, 25, 0.55);
  box-shadow: inset 0 0 0 1px rgba(135, 32, 25, 0.35), 2px 2px 0 0 rgba(20, 17, 12, 0.14);
}
html.is-touch .modal.world-map-modal .atlas-modal .atlas-fly-refusal {
  margin: 0 0 4px 0;
  font-size: 0.72rem;
}

/* =========================================================================
   ITEM RECEIVE CEREMONY (2026-09-02) - .item-cine
   One fullscreen reveal for every reward path (Beyond gear, Umbrael relics,
   keys, stones, TMs, eggs, charms, partners, sets). Fixed inset-0 root under
   .modal.item-cine-modal; never a .modal-card. Hero-art contract: the hero
   <img> carries NO filter: drop-shadow (a shadow of a haloed PNG paints a
   soft rectangle) - the glow lives in .ic-glow / .ic-ring / .ic-pool. No
   contain: paint anywhere (it clips glows into squares). Beats on data-beat:
   arrive -> reveal -> name -> item-hold (sets) -> row (sets) -> hold.
   ========================================================================= */
.modal.item-cine-modal {
  padding: 0;
  background: #05070f;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: none;
}

.item-cine {
  --ic-a: #ffd982;
  --ic-b: #ff9a4a;
  --ic-serif: "Cinzel", "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --ic-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ic-hero: clamp(220px, 34vh, 340px);
  --ic-row-base: clamp(96px, 16vh, 150px);
  --ic-hx: 31%;
  --ic-hy: 50%;
  --ic-bar: 7vh;
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  overflow: clip;
  background: #05070f;
  color: #fff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  animation: ic-root-in 260ms ease-out both;
}

.item-cine.is-leaving {
  animation: ic-root-out 200ms ease-in forwards;
  pointer-events: none;
}

@keyframes ic-root-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ic-root-out { to { opacity: 0; } }

/* ---- backdrop: blurred live map / scene painting / void ----------------- */
.ic-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, #141b3a, #070a16 70%);
}

.ic-backdrop-art {
  position: absolute;
  inset: -7%;
  width: 114%;
  height: 114%;
  object-fit: cover;
  filter: blur(16px) saturate(1.2) brightness(0.62);
  transform: translateZ(0);
  animation: ic-backdrop-in 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ic-backdrop-in {
  from { opacity: 0; scale: 1.08; }
  to { opacity: 1; scale: 1; }
}

.item-cine.is-void .ic-backdrop {
  background:
    radial-gradient(ellipse 60% 50% at var(--ic-hx) var(--ic-hy), color-mix(in srgb, var(--ic-b) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 100%, #10183a, transparent 70%),
    linear-gradient(180deg, #05070f, #0b1024 60%, #070a16);
}

/* dark wash so the map never competes, then the item's own light spilling
   from the hero point - the palette owns the frame from the first frame */
.ic-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 58% 68% at var(--ic-hx) var(--ic-hy), color-mix(in srgb, var(--ic-b) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 44% at var(--ic-hx) var(--ic-hy), color-mix(in srgb, var(--ic-a) 15%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(3, 5, 12, 0.66), rgba(3, 5, 12, 0.8));
  animation: ic-wash-in 900ms ease-out both;
  transition: background 600ms ease;
}

@keyframes ic-wash-in { from { opacity: 0; } to { opacity: 1; } }

.ic-letterbox::before,
.ic-letterbox::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: var(--ic-bar);
  background: #000;
  pointer-events: none;
}

.ic-letterbox::before { top: 0; animation: ic-bar-top 640ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.ic-letterbox::after { bottom: 0; animation: ic-bar-bottom 640ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@keyframes ic-bar-top { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes ic-bar-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---- optional intro caption during the arrive beat ---------------------- */
.ic-intro {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 11;
  width: min(72ch, 86vw);
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
}

.item-cine.has-intro .ic-intro { animation: ic-intro-in 520ms ease-out 160ms both; }
.item-cine:not(.has-intro) .ic-intro { animation: ic-intro-out 320ms ease-in both; }

.ic-intro strong {
  font: 700 clamp(1.2rem, 4vmin, 1.9rem) / 1.15 var(--ic-serif);
  letter-spacing: 0.03em;
  color: #fff8ea;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 0 26px color-mix(in srgb, var(--ic-a) 40%, transparent);
  text-wrap: balance;
}

.ic-intro span {
  font: 400 clamp(0.9rem, 2.3vmin, 1.05rem) / 1.5 var(--ic-sans);
  color: rgba(240, 244, 255, 0.86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

@keyframes ic-intro-in { from { opacity: 0; translate: -50% calc(-50% + 10px); } to { opacity: 1; translate: -50% -50%; } }
@keyframes ic-intro-out { from { opacity: 1; } to { opacity: 0; } }

/* ---- the composition: stage | text -------------------------------------- */
.ic-frame {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto fit-content(min(560px, 50vw));
  grid-template-areas: "stage text";
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: calc(var(--ic-bar) + 2vh) clamp(20px, 6vw, 90px);
  gap: clamp(28px, 5vw, 80px);
  box-sizing: border-box;
}

.ic-stage {
  position: relative;
  grid-area: stage;
  width: var(--ic-hero);
  height: var(--ic-hero);
  justify-self: center;
  align-self: center;
}

.ic-stage > * { position: absolute; pointer-events: none; }

/* light pool under the pedestal point */
.ic-pool {
  left: 50%;
  top: 100%;
  width: 150%;
  height: 36%;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--ic-a) 62%, transparent), color-mix(in srgb, var(--ic-b) 28%, transparent) 42%, transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transform: translateZ(0);
}

.ic-stage.is-hit .ic-pool {
  animation: ic-pool-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both, ic-pool-breathe 4.6s ease-in-out 960ms infinite;
}

@keyframes ic-pool-in { from { opacity: 0; scale: 0.3 0.6; } to { opacity: 1; scale: 1 1; } }
@keyframes ic-pool-breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; scale: 1.06 1.1; } }

/* ray fan: rotated blurred beam spans, never one conic wedge */
.ic-rays {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: ic-rays-spin 80s linear infinite, ic-rays-breathe 6s ease-in-out infinite;
}

@keyframes ic-rays-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ic-rays-breathe { 0%, 100% { opacity: 0.86; } 50% { opacity: 1; } }

.ic-rays i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 6px;
  height: calc(var(--ic-hero) * 1.05 * var(--l));
  margin-left: -3px;
  transform-origin: 50% 100%;
  transform: rotate(var(--r)) scaleY(0);
  background: linear-gradient(to top, #fff, color-mix(in srgb, var(--ic-a) 92%, #fff) 14%, color-mix(in srgb, var(--ic-a) 55%, transparent) 48%, transparent);
  filter: blur(2px);
  opacity: 0;
}

.ic-rays i:nth-child(3n) { width: 14px; margin-left: -7px; filter: blur(6px); }
.ic-rays i:nth-child(4n + 1) { width: 26px; margin-left: -13px; filter: blur(12px); background: linear-gradient(to top, color-mix(in srgb, var(--ic-b) 80%, #fff), color-mix(in srgb, var(--ic-b) 40%, transparent) 52%, transparent); }

.ic-stage.is-hit .ic-rays i {
  animation: ic-ray-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) calc(120ms + var(--k) * 26ms) both;
}

@keyframes ic-ray-in {
  from { opacity: 0; transform: rotate(var(--r)) scaleY(0.1); }
  55% { opacity: 0.82; }
  to { opacity: calc(var(--o) + 0.3); transform: rotate(var(--r)) scaleY(1); }
}

/* breathing ring + dashed outer orbit */
.ic-ring {
  left: 50%;
  top: 50%;
  width: 118%;
  height: 118%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ic-a) 62%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ic-a) 22%, transparent);
  translate: -50% -50%;
  opacity: 0;
  transform: translateZ(0);
}

.ic-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, color-mix(in srgb, var(--ic-a) 95%, #fff) 91%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 3px) 50%, transparent 51%);
  mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 3px) 50%, transparent 51%);
  animation: ic-ring-spin 22s linear infinite;
}

.ic-ring--outer {
  width: 142%;
  height: 142%;
  border: 1px dashed color-mix(in srgb, var(--ic-a) 32%, transparent);
  box-shadow: none;
}

.ic-ring--outer::before { display: none; }

.ic-stage.is-hit .ic-ring {
  animation: ic-ring-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both, ic-ring-breathe 4.2s ease-in-out 1040ms infinite;
}

.ic-stage.is-hit .ic-ring--outer {
  animation: ic-ring-in 1300ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both, ic-ring-outer-spin 46s linear infinite;
}

@keyframes ic-ring-in { from { opacity: 0; scale: 0.5; } to { opacity: 1; scale: 1; } }
@keyframes ic-ring-breathe { 0%, 100% { scale: 1; opacity: 0.9; } 50% { scale: 1.035; opacity: 1; } }
@keyframes ic-ring-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ic-ring-outer-spin { from { rotate: 0deg; opacity: 0.55; } 50% { opacity: 0.8; } to { rotate: -360deg; opacity: 0.55; } }

/* hero glow: a sibling layer, NOT a drop-shadow on the art */
.ic-glow {
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ic-a) 27%, transparent), color-mix(in srgb, var(--ic-b) 11%, transparent) 30%, color-mix(in srgb, var(--ic-b) 4%, transparent) 52%, transparent 74%);
  filter: blur(10px);
  opacity: 0;
  transform: translateZ(0);
}

.ic-stage.is-hit .ic-glow {
  animation: ic-glow-in 800ms ease-out 80ms both, ic-glow-breathe 3.8s ease-in-out 880ms infinite;
}

@keyframes ic-glow-in { from { opacity: 0; scale: 0.6; } to { opacity: 0.9; scale: 1; } }
@keyframes ic-glow-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 0.9; scale: 1.05; } }

/* analytic particle ring: burst outward on the hit, then twinkle in orbit */
.ic-orbit {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  animation: ic-orbit-spin 60s linear infinite;
}

@keyframes ic-orbit-spin { from { rotate: 0deg; } to { rotate: 360deg; } }

.ic-orbit i {
  --ang: calc(var(--i) * 12.857deg);
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  transform: rotate(var(--ang)) translateY(calc(var(--ic-hero) * -0.2));
}

.ic-orbit i b {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ic-a) 80%, #fff);
  box-shadow: 0 0 8px var(--ic-a), 0 0 16px color-mix(in srgb, var(--ic-b) 60%, transparent);
  transform: scale(var(--s));
}

.ic-orbit i:nth-child(2n) b { background: color-mix(in srgb, var(--ic-b) 70%, #fff); }

.ic-stage.is-hit .ic-orbit i {
  animation: ic-orbit-burst 1400ms cubic-bezier(0.16, 1, 0.3, 1) calc(140ms + var(--i) * 12ms) both;
}

.ic-stage.is-hit .ic-orbit i b {
  animation: ic-orbit-twinkle 3.4s ease-in-out calc(1500ms + var(--i) * -0.41s) infinite;
}

@keyframes ic-orbit-burst {
  from { opacity: 0; transform: rotate(var(--ang)) translateY(calc(var(--ic-hero) * -0.5)); }
  35% { opacity: 1; }
  to { opacity: var(--o); transform: rotate(var(--ang)) translateY(calc(var(--ic-hero) * -0.56 - var(--ic-hero) * 0.28 * var(--d))); }
}

@keyframes ic-orbit-twinkle {
  0%, 100% { opacity: 0.55; transform: scale(var(--s)) translateY(0); }
  50% { opacity: 1; transform: scale(calc(var(--s) * 1.4)) translateY(-3px); }
}

/* hero slots (double-buffered for sets) */
.ic-hero-slot {
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.ic-hero-slot.is-in { animation: ic-hero-rise 820ms cubic-bezier(0.16, 1, 0.3, 1) both; opacity: 1; }
.ic-hero-slot.is-out { animation: ic-hero-leave 420ms cubic-bezier(0.4, 0, 0.6, 1) both; }

@keyframes ic-hero-rise {
  from { opacity: 0; transform: translateY(14%) scale(0.72); }
  55% { opacity: 1; }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ic-hero-leave {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-10%) scale(0.9); }
}

.ic-hero {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* contract: no filter here - glow lives in the sibling layers */
  filter: none;
  animation: ic-hero-bob 4.4s ease-in-out 820ms infinite;
  image-rendering: auto;
}

@keyframes ic-hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.6%); } }

/* one flash on the hit (normal blend: an opacity-0 blend layer leaks) */
.ic-flash {
  left: 50%;
  top: 50%;
  width: 240%;
  height: 240%;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--ic-a) 90%, #fff) 14%, color-mix(in srgb, var(--ic-a) 40%, transparent) 30%, transparent 58%);
  opacity: 0;
  transform: translateZ(0);
}

.ic-stage.is-hit .ic-flash { animation: ic-flash 640ms ease-out 150ms both; }

@keyframes ic-flash {
  0% { opacity: 0; scale: 0.5; }
  18% { opacity: 0.96; scale: 0.9; }
  100% { opacity: 0; scale: 1.25; }
}

/* ---- text block ----------------------------------------------------------- */
.ic-text {
  grid-area: text;
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: start;
  text-align: left;
  min-width: 0;
  max-width: 100%;
  opacity: 0;
}

.item-cine[data-beat="name"] .ic-text,
.item-cine[data-beat="item-hold"] .ic-text,
.item-cine[data-beat="row"] .ic-text,
.item-cine[data-beat="hold"] .ic-text { opacity: 1; }

.ic-text > * { max-width: 100%; min-width: 0; }

.ic-kicker {
  font: 700 clamp(0.62rem, 1.55vmin, 0.8rem) / 1.35 var(--ic-serif);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--ic-a);
  text-shadow: 0 0 18px color-mix(in srgb, var(--ic-a) 55%, transparent), 0 1px 6px rgba(0, 0, 0, 0.7);
  opacity: 0;
}

.ic-title {
  margin: 0;
  font: 700 clamp(1.55rem, 5.8vmin, 2.8rem) / 1.06 var(--ic-serif);
  letter-spacing: 0.02em;
  color: #fff8ea;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72), 0 0 34px color-mix(in srgb, var(--ic-a) 38%, transparent);
  text-wrap: balance;
  opacity: 0;
}

.ic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 0;
}

.ic-chips[hidden] { display: none; }

.ic-chips span {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font: 800 0.68rem / 1.3 var(--ic-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #eef2ff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
}

.ic-chips span.is-gold {
  border-color: color-mix(in srgb, var(--ic-a) 80%, #fff);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ic-a) 90%, #fff), color-mix(in srgb, var(--ic-a) 72%, #6b4a10));
  color: #21170a;
  text-shadow: none;
}

.ic-copy {
  margin: 2px 0 0;
  max-width: 48ch;
  font: 400 clamp(0.86rem, 2.25vmin, 1rem) / 1.5 var(--ic-sans);
  color: rgba(240, 244, 255, 0.86);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
}

.ic-copy[hidden] { display: none; }

.ic-actions {
  margin-top: clamp(4px, 1.6vh, 14px);
  opacity: 0;
  pointer-events: none;
}

/* gold navy-glass CTA: the only exit */
.ic-cta {
  font: 800 0.92rem / 1 var(--ic-sans);
  letter-spacing: 0.05em;
  min-height: 46px;
  padding: 12px 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 228, 164, 0.8);
  background: linear-gradient(180deg, rgba(42, 58, 106, 0.94), rgba(12, 18, 46, 0.96));
  color: #ffe9b0;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 28px color-mix(in srgb, var(--ic-a) 30%, transparent);
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.ic-cta:hover,
.ic-cta:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.12);
  outline: none;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 36px color-mix(in srgb, var(--ic-a) 46%, transparent);
}

.ic-cta:active { transform: translateY(1px); }

/* text entrances: keyed on the name beat (the block is invisible during
   reveal) and re-run per item / for the set title through the .is-live toggle */
.item-cine[data-beat="name"] .ic-text.is-live .ic-kicker,
.item-cine[data-beat="item-hold"] .ic-text.is-live .ic-kicker,
.item-cine[data-beat="row"] .ic-text.is-live .ic-kicker,
.item-cine[data-beat="hold"] .ic-text.is-live .ic-kicker { animation: ic-text-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both; }

.item-cine[data-beat="name"] .ic-text.is-live .ic-title,
.item-cine[data-beat="item-hold"] .ic-text.is-live .ic-title,
.item-cine[data-beat="row"] .ic-text.is-live .ic-title,
.item-cine[data-beat="hold"] .ic-text.is-live .ic-title { animation: ic-title-in 640ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }

.item-cine[data-beat="name"] .ic-text.is-live .ic-chips span,
.item-cine[data-beat="item-hold"] .ic-text.is-live .ic-chips span,
.item-cine[data-beat="row"] .ic-text.is-live .ic-chips span,
.item-cine[data-beat="hold"] .ic-text.is-live .ic-chips span { animation: ic-chip-in 460ms cubic-bezier(0.16, 1, 0.3, 1) calc(300ms + var(--k) * 90ms) both; }

.item-cine[data-beat="name"] .ic-text.is-live .ic-copy,
.item-cine[data-beat="item-hold"] .ic-text.is-live .ic-copy,
.item-cine[data-beat="row"] .ic-text.is-live .ic-copy,
.item-cine[data-beat="hold"] .ic-text.is-live .ic-copy { animation: ic-text-in 560ms ease-out 520ms both; }

.item-cine[data-beat="hold"] .ic-actions {
  animation: ic-text-in 420ms ease-out 120ms both;
  pointer-events: auto;
}

@keyframes ic-text-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes ic-title-in {
  from { opacity: 0; translate: 0 12px; letter-spacing: 0.12em; }
  to { opacity: 1; translate: 0 0; letter-spacing: 0.02em; }
}
@keyframes ic-chip-in { from { opacity: 0; translate: 0 6px; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* ---- set variant: pedestal row ------------------------------------------ */
.ic-row {
  grid-area: row;
  display: none;
  justify-content: center;
  align-items: end;
  gap: clamp(6px, 1.6vw, 22px);
  width: 100%;
  min-width: 0;
}

.item-cine.is-row .ic-frame {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "row" "text";
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 3vh, 28px);
}

.item-cine.is-row .ic-stage { display: none; }
.item-cine.is-row .ic-row { display: flex; }

.item-cine.is-row .ic-text {
  justify-items: center;
  text-align: center;
}

.item-cine.is-row .ic-chips { justify-content: center; }

.item-cine[data-count="2"] { --ic-row-scale: 1.5; }
.item-cine[data-count="3"] { --ic-row-scale: 1.3; }
.item-cine[data-count="4"] { --ic-row-scale: 1.15; }

.ic-row-item {
  position: relative;
  --ic-row: calc(var(--ic-row-base) * var(--ic-row-scale, 1));
  width: var(--ic-row);
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  opacity: 0;
  animation: ic-row-in 700ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--k) * 95ms) both;
}

@keyframes ic-row-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.86); }
  60% { opacity: 1; transform: translateY(3px) scale(1.02); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ic-row-pool,
.ic-row-glow {
  position: absolute;
  left: 50%;
  pointer-events: none;
  transform: translateZ(0);
}

.ic-row-pool {
  top: calc(var(--ic-row) * 0.98);
  width: 130%;
  height: calc(var(--ic-row) * 0.3);
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ic-a) 60%, transparent), transparent 70%);
  filter: blur(8px);
  animation: ic-pool-breathe 4.6s ease-in-out calc(var(--k) * -0.7s) infinite;
}

.ic-row-glow {
  top: calc(var(--ic-row) * 0.5);
  width: 150%;
  height: 150%;
  max-height: calc(var(--ic-row) * 1.5);
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ic-a) 36%, transparent), transparent 62%);
  filter: blur(6px);
  animation: ic-glow-breathe 3.8s ease-in-out calc(var(--k) * -0.9s) infinite;
}

.ic-row-img {
  position: relative;
  display: block;
  width: var(--ic-row);
  height: var(--ic-row);
  object-fit: contain;
  filter: none;
  animation: ic-hero-bob 4.4s ease-in-out calc(var(--k) * -0.6s) infinite;
}

.ic-row-name {
  position: relative;
  font: 700 clamp(0.62rem, 1.5vmin, 0.78rem) / 1.3 var(--ic-serif);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: #fff3d6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
  text-align: center;
  max-width: 100%;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-wrap: balance;
}

/* ---- hint ----------------------------------------------------------------- */
.ic-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ic-bar) + 8px);
  z-index: 12;
  translate: -50%;
  font: 700 0.62rem / 1.3 var(--ic-sans);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 244, 214, 0.7);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.ic-hint.is-visible { opacity: 1; animation: ic-hint-pulse 2.4s ease-in-out infinite; }

@keyframes ic-hint-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ---- tap-skip: entrances collapse, loops keep breathing ------------------ */
.item-cine.is-fast .ic-backdrop-art,
.item-cine.is-fast .ic-wash,
.item-cine.is-fast .ic-letterbox::before,
.item-cine.is-fast .ic-letterbox::after,
.item-cine.is-fast .ic-hero-slot.is-in,
.item-cine.is-fast .ic-text .ic-kicker,
.item-cine.is-fast .ic-text .ic-title,
.item-cine.is-fast .ic-text .ic-chips span,
.item-cine.is-fast .ic-text .ic-copy,
.item-cine.is-fast .ic-actions,
.item-cine.is-fast .ic-row-item {
  animation-duration: 240ms;
  animation-delay: 0ms;
}

/* ---- layouts -------------------------------------------------------------- */
/* landscape phones (the primary layout): hero 50dvh, min 180px */
@media (max-height: 520px) and (orientation: landscape) {
  .item-cine {
    --ic-hero: clamp(180px, 50dvh, 300px);
    --ic-row-base: clamp(64px, 22dvh, 118px);
    --ic-bar: 5dvh;
    --ic-hx: 29%;
    --ic-hy: 50%;
  }

  .ic-frame {
    grid-template-columns: auto minmax(0, 1fr);
    justify-content: stretch;
    padding: calc(var(--ic-bar) + 1.5dvh) clamp(14px, 4vw, 40px) calc(var(--ic-bar) + 1.5dvh) clamp(24px, 7vw, 70px);
    gap: clamp(16px, 4vw, 40px);
  }

  .ic-text { gap: 6px; }
  .ic-title { font-size: clamp(1.4rem, 7.2dvh, 2.2rem); }
  .ic-copy { font-size: clamp(0.78rem, 3.6dvh, 0.92rem); max-width: 44ch; }
  .ic-chips span { padding: 4px 10px; font-size: 0.62rem; }
  .ic-cta { min-height: 42px; padding: 10px 26px; font-size: 0.86rem; }
  .ic-actions { margin-top: 4px; }
  .ic-intro strong { font-size: clamp(1.1rem, 6.2dvh, 1.6rem); }
  .ic-intro span { font-size: clamp(0.8rem, 3.8dvh, 0.95rem); }
  .ic-hint { bottom: calc(var(--ic-bar) + 4px); font-size: 0.56rem; }

  .item-cine.is-row .ic-frame { gap: clamp(6px, 2dvh, 14px); padding-top: calc(var(--ic-bar) + 1dvh); }
  .item-cine[data-count="2"] { --ic-row-scale: 1.3; }
  .item-cine[data-count="3"] { --ic-row-scale: 1.18; }
  .item-cine[data-count="4"] { --ic-row-scale: 1.08; }
  .item-cine.is-row .ic-title { font-size: clamp(1.2rem, 6dvh, 1.7rem); }
  .item-cine.is-row .ic-copy { max-width: 60ch; }
  .ic-row-name { font-size: 0.58rem; letter-spacing: 0.1em; text-indent: 0.1em; }
}

/* portrait: stack */
@media (orientation: portrait) {
  .item-cine {
    --ic-hero: clamp(160px, 36dvh, 300px);
    --ic-row-base: clamp(64px, 22vw, 110px);
    --ic-hx: 50%;
    --ic-hy: 34%;
    --ic-bar: 5dvh;
  }

  .ic-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "stage" "text";
    align-content: center;
    justify-items: center;
    padding: calc(var(--ic-bar) + 2vh) 20px;
    gap: clamp(14px, 4vh, 34px);
  }

  .ic-text { justify-items: center; text-align: center; }
  .ic-chips { justify-content: center; }
  .ic-row { flex-wrap: wrap; }
}

/* reduced motion: final states only */
@media (prefers-reduced-motion: reduce) {
  .item-cine,
  .item-cine *,
  .item-cine *::before,
  .item-cine *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .ic-stage.is-hit .ic-flash { opacity: 0; }
  .ic-hero-slot.is-in { opacity: 1; }
}

/* ==== Item-reveal polish (2026-09-02) ======================================
   #16 Colosseum streak chest, #20-22 rift chest opening / rare reveal /
   summary, #24 Nursery egg collect (output/item-audit/REPORT.md). Every rule
   here is an override appended after the originals on purpose: the scratch
   layer that proved it (tools/_ipol_inject.css) is this exact block. Touch
   variants repeat the full desktop selector behind html.is-touch so they
   always outrank it. */

/* ---- #16 Colosseum streak chest --------------------------------------------
   The imagegen sheets are opaque from the burst frame on, so the chest was a
   hard 446 px square with a painted throne room inside. A feathered radial
   mask hugs the chest and fades to nothing before the frame edge; the outer
   glow moves to a sibling layer (a masked drop-shadow would be cut too). The
   baked ring/speckle frames are skipped in game.js (animateChestSheet). */
.colosseum-streak-card .colosseum-streak-chest-sheet,
.colosseum-streak-card.is-silver .colosseum-streak-chest-sheet,
.colosseum-streak-card.is-gold .colosseum-streak-chest-sheet {
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse 48% 49% at 50% 52%, #000 56%, rgba(0, 0, 0, 0.74) 74%, rgba(0, 0, 0, 0.2) 91%, transparent 99.5%);
  mask-image: radial-gradient(ellipse 48% 49% at 50% 52%, #000 56%, rgba(0, 0, 0, 0.74) 74%, rgba(0, 0, 0, 0.2) 91%, transparent 99.5%);
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.4));
}
.colosseum-streak-card .colosseum-streak-chest-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: -1;
  width: calc(var(--colosseum-streak-frame) * 1.18);
  height: calc(var(--colosseum-streak-frame) * 1.06);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 110, 0.52), rgba(255, 190, 80, 0.22) 42%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 700ms ease;
  pointer-events: none;
}
.colosseum-streak-card.is-silver .colosseum-streak-chest-wrap::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(190, 236, 255, 0.5), rgba(120, 200, 255, 0.22) 42%, transparent 70%);
}
.colosseum-streak-card.is-live .colosseum-streak-chest-wrap::before { opacity: 0.72; }
.colosseum-streak-card.is-burst .colosseum-streak-chest-wrap::before { opacity: 1; }
/* Shockwave rings and sparks emanate from BEHIND the chest and only add light. */
.colosseum-streak-card .colosseum-streak-chest-wrap .chest-cine-shockwave,
.colosseum-streak-card .colosseum-streak-chest-wrap .chest-cine-sparks {
  z-index: -1;
  mix-blend-mode: screen;
}
.colosseum-streak-card.is-live .colosseum-streak-chest-sheet {
  animation-name: ipolStreakChestOpen;
}
@keyframes ipolStreakChestOpen {
  0% { opacity: 0; transform: translateY(36px) scale(0.74) rotateX(14deg); }
  12% { opacity: 1; transform: translateY(10px) scale(0.9) rotateX(0deg); }
  34% { opacity: 1; transform: translateY(0) scale(0.98) rotateX(0deg); }
  47% { transform: translateY(-12px) scale(1.11) rotateX(-2deg); }
  62% { transform: translateY(-6px) scale(1.05) rotateX(0deg); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* The copy no longer waits 1.55 s after the burst; loot pops right behind it. */
.colosseum-streak-card.is-burst .colosseum-streak-copy { animation-delay: 640ms; }
.colosseum-streak-card.is-burst .colosseum-streak-copy h2 { animation-delay: 1040ms; }
.colosseum-streak-card.is-burst .colosseum-streak-loot-item { animation-delay: 960ms; }
.colosseum-streak-card.is-burst .colosseum-streak-loot-item + .colosseum-streak-loot-item { animation-delay: 1140ms; }
.colosseum-streak-card.is-burst .dialogue-actions { transition-delay: 900ms; }
.colosseum-streak-copy .colosseum-kicker { letter-spacing: 0.18em; }
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .colosseum-streak-stage {
    --colosseum-streak-frame: min(62dvh, 40vw, 360px);
  }
  html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-chest-wrap {
    transform: translateX(-50%);
  }
  html.is-touch .colosseum-streak-copy {
    width: min(46%, 430px);
  }
  html.is-touch .colosseum-streak-card.is-burst .colosseum-streak-copy { animation-delay: 640ms; }
  /* One centred pill instead of a full-width bar under the cinematic. */
  html.is-touch .modal.clean-world-modal .colosseum-card.colosseum-streak-card .dialogue-actions {
    display: flex;
    justify-content: center;
  }
  html.is-touch .modal.clean-world-modal .colosseum-card.colosseum-streak-card .dialogue-actions button {
    min-width: 220px;
    max-width: 60vw;
    padding: 6px 30px;
    border-radius: 999px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/* ---- #20 Rift chest opening ------------------------------------------------
   The 620 px frame overflowed the 537 px stage (hard cuts top/bottom), the
   eyebrow + title sat on the art, the Ledger button skin painted a white puck
   behind the transparent chest, and the eyebrow colour was the Ledger teal
   on a dark stage. The stage now fills the Ledger card (which is pinned to
   the playfield box) as a two-row grid: chest, then title. */
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-stage {
  --rift-reward-frame: min(600px, 60vw, calc(var(--map-modal-height, 70vh) - 216px));
  box-sizing: border-box;
  height: calc(100% + 24px);
  min-height: 390px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  padding: 0 0 20px;
}
.rift-reward-opening-card .rift-reward-opening-title {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 3;
  padding: 0 18px;
}
.rift-reward-opening-card .rift-reward-opening-title .fusion-eyebrow {
  margin-bottom: 2px;
  color: rgba(255, 232, 160, 0.94);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-opening-title h2 {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger,
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger:hover,
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger:active,
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger:focus,
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger:disabled {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-chest-trigger:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.96);
  outline-offset: -10px;
  box-shadow: 0 0 0 7px rgba(115, 234, 255, 0.34);
}
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-opening-card .rift-reward-stage {
    --rift-reward-frame: min(calc(100dvh - 140px), 74vw);
    height: calc(100dvh - 20px);
    min-height: 0;
    padding: 0 0 8px;
  }
  html.is-touch .rift-reward-opening-card .rift-reward-opening-title {
    bottom: auto;
    gap: 2px;
  }
}

/* ---- #21 Rift rare reveal --------------------------------------------------
   One dark stage fills the Ledger frame (the white card stays as the frame),
   the copy sits on the stage, the ring is never cut, and a Continue CTA
   fades in once the 3.5 s minimum has passed (tap-to-continue in game.js).
   Scoped to [data-rift-rare-reveal]: the estate elephant-bike unlock card
   shares .rift-rare-reveal-card and keeps its buttons inside the copy. */
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] {
  width: min(820px, calc(100vw - 28px));
  cursor: pointer;
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-stage {
  box-sizing: border-box;
  height: calc(100% + 24px);
  min-height: 420px;
  margin: -12px;
  padding-bottom: clamp(120px, 22vh, 170px);
}
.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-art--egg {
  --rift-reveal-frame: clamp(170px, 30vw, 250px);
}
.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  gap: 4px;
  padding: 26px 18px 20px;
  background: linear-gradient(180deg, rgba(7, 10, 20, 0), rgba(7, 10, 20, 0.7) 34%, rgba(7, 10, 20, 0.9));
  pointer-events: none;
}
.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy .fusion-eyebrow {
  margin-bottom: 0;
  color: rgba(255, 232, 160, 0.94);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy h2 {
  color: #fffdf8;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4.2vw, 2.3rem);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.85), 0 0 26px rgba(115, 234, 255, 0.28);
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy p {
  color: rgba(238, 242, 255, 0.86) !important; /* the Ledger skin paints <p> #2d2d2d !important */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-cta {
  pointer-events: auto;
  cursor: pointer;
  min-width: 0;
  min-height: 42px;
  margin-top: 8px;
  padding: 0 34px;
  border: 1px solid rgba(255, 228, 150, 0.6);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffe9a8;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 340ms ease, transform 340ms ease, background 200ms ease, border-color 200ms ease;
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-cta:hover,
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-cta:focus-visible {
  border-color: rgba(255, 236, 180, 0.95);
  background: rgba(255, 228, 150, 0.14);
  color: #fff8e6;
  outline: none;
}
.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity 340ms ease 140ms;
}
.modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal].is-ready .rift-rare-reveal-cta { opacity: 1; transform: none; }
.rift-rare-reveal-card[data-rift-rare-reveal].is-ready .rift-rare-reveal-hint { opacity: 1; }
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding: 10px;
  }
  html.is-touch .modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-stage {
    height: calc(100dvh - 20px);
    min-height: 0;
    margin: 0;
    padding-bottom: 96px;
    border-radius: 10px;
  }
  html.is-touch .rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-art--egg {
    --rift-reveal-frame: min(30vw, 42dvh);
  }
  html.is-touch .rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-art {
    --rift-reveal-frame: min(28vw, 38dvh);
  }
  html.is-touch .rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 2px;
    padding: 18px 14px 12px;
    border-radius: 0 0 10px 10px;
  }
  html.is-touch .modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy h2 {
    font-size: clamp(1.15rem, 6dvh, 1.6rem);
  }
  html.is-touch .modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-copy p {
    font-size: clamp(0.66rem, 3dvh, 0.84rem);
  }
  html.is-touch .modal.clean-world-modal .modal-card.rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-cta {
    min-height: 36px;
    margin-top: 4px;
    padding: 0 26px;
    font-size: 0.7rem;
  }
  html.is-touch .rift-rare-reveal-card[data-rift-rare-reveal] .rift-rare-reveal-hint { display: none; }
}

/* ---- #22 Rift reward summary -----------------------------------------------
   The loot tiles (dark bordered rectangles, 40 px icons) become a row of
   pedestals: a soft pool and a thin ring under each item, no borders, larger
   icons. Run Again keeps its job but drops the rainbow bar for a Ledger-gold
   primary that no longer fights the reward. On desktop the card is pinned to
   the playfield box, so it becomes chest-left / loot-right and nothing falls
   below the fold any more. */
.rift-reward-card--summary .rift-reward-grid {
  gap: 12px 8px;
  align-items: end;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article {
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: 16px 6px 6px;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::before,
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::before {
  top: 66px;
  width: 106px;
  height: 44px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(20, 93, 120, 0.34), rgba(20, 93, 120, 0.1) 48%, transparent 72%);
  filter: blur(3px);
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::after {
  top: 78px;
  width: 88px;
  height: 22px;
  transform: translateX(-50%);
  border: 1.5px solid rgba(20, 93, 120, 0.42);
  background: radial-gradient(ellipse at 50% 50%, rgba(115, 234, 255, 0.22), rgba(115, 234, 255, 0.06) 60%, transparent 76%);
  box-shadow: 0 0 14px rgba(115, 234, 255, 0.28), inset 0 0 10px rgba(255, 255, 255, 0.35);
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-rare::after {
  border-color: transparent;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.3) 56%, transparent 76%) padding-box,
    conic-gradient(from 20deg, #ff4fd8, #ffe76d, #62f7a1, #57d8ff, #a96cff, #ff4fd8) border-box;
  box-shadow: 0 0 18px rgba(169, 108, 255, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.5);
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-muted::before,
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-muted::after {
  opacity: 0.38;
  box-shadow: none;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-owned::after {
  border-color: rgba(23, 97, 77, 0.5);
  background: radial-gradient(ellipse at 50% 50%, rgba(125, 232, 200, 0.26), transparent 74%);
  box-shadow: 0 0 12px rgba(125, 232, 200, 0.3);
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid img,
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong {
  width: 76px;
  height: 76px;
  margin-bottom: 8px;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.36)) drop-shadow(0 0 12px rgba(115, 234, 255, 0.3));
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong {
  width: 62px;
  height: 62px;
  margin: 7px 0 15px;
  font-size: 1.4rem;
  font-weight: 900;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-muted img,
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-muted strong {
  opacity: 0.4;
  filter: grayscale(1) brightness(0.72) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.2));
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid span {
  color: #14202e;
  font-size: 0.84rem;
  line-height: 1.1;
  text-align: center;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid em {
  color: rgba(20, 32, 46, 0.7);
  font-size: 0.74rem;
  font-weight: 700;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article.is-rare span {
  color: #5b2a9e;
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary #riftRewardAgain {
  border-color: rgba(176, 128, 40, 0.62);
  background: linear-gradient(180deg, #ffeab0, #f2c65e);
  color: #2a1c05;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.modal.clean-world-modal .modal-card.rift-reward-card--summary #riftRewardAgain:hover,
.modal.clean-world-modal .modal-card.rift-reward-card--summary #riftRewardAgain:focus-visible {
  background: linear-gradient(180deg, #fff1c4, #f7d070);
}
@media (min-height: 561px) {
  .modal.clean-world-modal .modal-card.rift-reward-card--summary {
    display: grid;
    grid-template-columns: minmax(324px, 0.74fr) minmax(0, 1.26fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "stage head"
      "stage rewards"
      "stage log"
      "stage actions";
    gap: 8px 18px;
    padding: 14px 16px;
    overflow: hidden;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-stage {
    --rift-reward-frame: min(300px, 32vw);
    grid-area: stage;
    height: auto;
    min-height: 0;
    margin: 0;
    border-radius: 10px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-head {
    grid-area: head;
    margin: 0;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid {
    grid-area: rewards;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: flex-end;
    gap: 4px 6px;
    min-height: 0;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article {
    flex: 0 0 calc(25% - 6px);
    max-width: 190px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-copy {
    grid-area: log;
    margin: 0;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .dialogue-actions {
    grid-area: actions;
    margin: 0;
  }
}
@media (max-height: 560px) and (min-width: 640px) {
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid {
    gap: 2px 6px;
    align-items: end;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article {
    min-height: 0;
    padding: 4px 3px 2px;
    gap: 1px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::before,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::before {
    top: 28px;
    width: 72px;
    height: 28px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::after,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid article::after {
    top: 35px;
    width: 58px;
    height: 15px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid img,
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid img,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong {
    width: 42px;
    height: 42px;
    margin-bottom: 4px;
    font-size: 0.9rem;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid strong {
    width: 36px;
    height: 36px;
    margin: 3px 0 7px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid span,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid span {
    font-size: 0.6rem;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid em,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-grid em {
    font-size: 0.52rem;
  }
  /* The head's Close pill used to sit under the fixed Ledger X once the
     pedestal rows grew; it now sits to the left of it. */
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-head,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-head {
    padding-right: 116px;
  }
  .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-head > button,
  html.is-touch .modal.clean-world-modal .modal-card.rift-reward-card--summary .rift-reward-head > button {
    right: 48px;
  }
}

/* ---- #24 Nursery egg collect -----------------------------------------------
   Flat teal conic sticks become a fan of rotated, blurred beams behind the
   eggs; the pinstripe wallpaper is gone; the caption band gets ceremony
   typography (Cinzel title, tracked subline, scrim instead of a box); and
   the result plate keeps the scene's frame and night palette instead of
   cutting to the cream vendor-paper card. */
.nursery-collect-scene .dig-bg {
  background:
    radial-gradient(circle at 50% 64%, rgba(0, 0, 0, 0.42), transparent 62%),
    radial-gradient(circle at 50% 28%, rgba(255, 240, 170, 0.1), transparent 42%);
}
/* The fan is a full-size layer masked by a circle that reaches zero alpha at
   the nearest card edge (closest-side), so the beams end in soft tips well
   inside the panel and the card background owns the edge; the circle is
   centred on the beam origin, so the slow spin cannot move it. */
.nursery-collect-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform-origin: 50% 47%;
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 47%, #000 50%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0.12) 90%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 47%, #000 50%, rgba(0, 0, 0, 0.55) 74%, rgba(0, 0, 0, 0.12) 90%, transparent 100%);
  animation:
    ipolNurseryRaysIn var(--egg-hatch-duration, 2600ms) ease-out forwards,
    ipolNurseryRaysSpin 34s linear infinite;
}
.nursery-collect-rays i {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(30px, 6vmin, 54px);
  height: min(60vh, 360px);
  margin-left: calc(clamp(30px, 6vmin, 54px) / -2);
  transform-origin: 50% 0;
  transform: rotate(calc(var(--ray, 0) * 25.7deg));
  background: linear-gradient(180deg, rgba(255, 246, 196, 0.8), rgba(255, 236, 150, 0.34) 36%, rgba(120, 220, 255, 0.1) 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  filter: blur(5px);
}
.nursery-collect-rays i:nth-child(odd) {
  height: min(46vh, 270px);
  opacity: 0.72;
}
.nursery-collect-rays i:nth-child(3n) {
  height: min(66vh, 400px);
  opacity: 0.9;
}
@keyframes ipolNurseryRaysIn {
  0%, 28% { opacity: 0; transform: scale(0.5); }
  58% { opacity: 0.95; transform: scale(1.02); }
  100% { opacity: 0.82; transform: scale(1); }
}
@keyframes ipolNurseryRaysSpin {
  to { rotate: 360deg; }
}
.nursery-collect-scene .dig-caption {
  bottom: 26px;
}
.nursery-collect-scene .dig-caption h2 {
  margin: 0 0 6px;
  color: #fff6dc;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 220, 120, 0.35);
}
.nursery-collect-scene .dig-caption p {
  color: rgba(255, 255, 255, 0.74);
  opacity: 1;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nursery-collect-result {
  position: relative;
  box-sizing: border-box;
  width: min(560px, 92vw);
  height: min(440px, 74vh);
  max-width: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 4px;
  padding: 16px 24px 20px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 239, 153, 0.24), transparent 34%),
    radial-gradient(circle at 50% 62%, rgba(111, 220, 255, 0.16), transparent 52%),
    linear-gradient(180deg, #173025, #0a1721 62%, #060a12);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}
.nursery-collect-result .nursery-collect-result-eggs {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 6px 8px 30px;
  align-items: flex-end;
  align-content: flex-end;
  background: none;
}
.nursery-collect-result .nursery-collect-result-eggs::before,
.nursery-collect-result .nursery-collect-result-eggs::after {
  content: "";
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
}
.nursery-collect-result .nursery-collect-result-eggs::before {
  bottom: 0;
  width: 74%;
  height: 28%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 170, 0.55), rgba(120, 220, 255, 0.16) 52%, transparent 74%);
  filter: blur(6px);
}
.nursery-collect-result .nursery-collect-result-eggs::after {
  bottom: 14px;
  width: 46%;
  height: 12%;
  border: 1.5px solid rgba(255, 236, 170, 0.5);
  box-shadow: 0 0 16px rgba(120, 220, 255, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.14);
}
.nursery-collect-result .nursery-collect-result-eggs img.nursery-collect-result-egg {
  /* the shared size table was tuned for the paper card; multi-egg rows get room here */
  width: min(calc(var(--egg-result-size, 156px) * 1.3), 156px);
  height: min(calc(var(--egg-result-size, 156px) * 1.3), 156px);
  max-width: none;
  max-height: 100%;
}
.nursery-collect-result h2 {
  margin: 0;
  color: #fff6dc;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85), 0 0 22px rgba(255, 220, 120, 0.35);
}
.nursery-collect-result p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nursery-collect-result .dialogue-actions {
  justify-content: center;
  margin-top: 10px;
}
.nursery-collect-result .dialogue-actions button {
  min-height: 44px;
  padding: 0 38px;
  border: 1px solid rgba(255, 228, 150, 0.6);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: #ffe9a8;
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
}
.nursery-collect-result .dialogue-actions button:hover,
.nursery-collect-result .dialogue-actions button:focus-visible {
  border-color: rgba(255, 236, 180, 0.95);
  background: rgba(255, 228, 150, 0.14);
  color: #fff8e6;
  outline: none;
}
@media (max-width: 960px) and (orientation: landscape), (pointer: coarse) and (orientation: landscape) {
  html.is-touch .nursery-collect-scene .dig-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 12px max(10px, env(safe-area-inset-bottom));
    border-radius: 0;
    background: linear-gradient(180deg, rgba(4, 8, 14, 0), rgba(4, 8, 14, 0.66));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.is-touch .nursery-collect-scene .dig-caption h2 {
    margin-bottom: 3px;
    font-size: clamp(1rem, 5.6dvh, 1.35rem);
  }
  html.is-touch .nursery-collect-scene .dig-caption p {
    font-size: clamp(0.58rem, 2.7dvh, 0.72rem);
  }
  html.is-touch .nursery-collect-rays i {
    height: min(64dvh, 260px);
  }
  html.is-touch .nursery-collect-rays i:nth-child(odd) {
    height: min(50dvh, 200px);
  }
  html.is-touch .nursery-collect-rays i:nth-child(3n) {
    height: min(72dvh, 300px);
  }
  html.is-touch .nursery-collect-result {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    grid-template-rows: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 2px;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
    border-radius: 0;
  }
  html.is-touch .nursery-collect-result .nursery-collect-result-eggs {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  html.is-touch .nursery-collect-result .nursery-collect-result-eggs img.nursery-collect-result-egg {
    max-height: min(100%, 44dvh);
  }
  html.is-touch .nursery-collect-result h2 {
    max-width: none;
    font-size: clamp(1rem, 5.6dvh, 1.35rem);
  }
  html.is-touch .nursery-collect-result p {
    max-width: none;
    font-size: clamp(0.58rem, 2.7dvh, 0.72rem);
  }
  html.is-touch .nursery-collect-result .dialogue-actions {
    margin-top: 6px;
  }
  html.is-touch .nursery-collect-result .dialogue-actions button {
    min-height: 38px;
    padding: 0 30px;
    font-size: 0.72rem;
  }
}
/* Reward presentation — landscape phones, 2026-09-05.
   One fixed artwork stage and a separate readable detail column. */
.crownlight-result-copy { display: grid; justify-items: center; gap: 12px; min-width: 0; }
.crownlight-blessing-result .crownlight-result-kicker {
  color: #e9cf8e; font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.crownlight-dv-grid .crownlight-dv-change {
  display: flex; align-items: baseline; justify-content: center; gap: 7px;
  padding: 0; border: 0; background: none; font-size: 16px;
}
.crownlight-dv-change i { font-style: normal; opacity: .45; }
.crownlight-dv-change b { color: #fff3c7; }
.crownlight-dv-change small { color: #a8e7d5; font-size: 10px; }
.catch-dv > span { display: inline-block; white-space: nowrap; margin-inline: 3px; }

/* A single low-luminance dissolve keeps the successful catch continuous.
   The old opaque white checkpoint plate created another full-screen flash. */
.fx-catch-hold, .fx-catch-handoff {
  background: radial-gradient(ellipse at 27% 46%, color-mix(in srgb, var(--c1, #fff7a8) 15%, #101721), #070d17 74%);
}
.fx-catch-hold::after {
  inset: 0;
  background: radial-gradient(ellipse at 27% 46%, color-mix(in srgb, var(--c1, #fff7a8) 17%, transparent), transparent 54%);
}
.modal.catch-showcase-modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal.catch-showcase-modal .catch-flash { display: none; }

@media (orientation: landscape) and (max-height: 600px) {
  /* The source bezel is square. Fit its actual opening (345,455–1699,1641)
     instead of stretching that source around a square monster image. */
  html.is-touch .modal.catch-showcase-modal .catch-frame {
    inset: max(8px, env(safe-area-inset-top)) 51% max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    padding: 0;
  }
  html.is-touch .modal.catch-showcase-modal .catch-portrait {
    width: min(44vw, 91dvh); height: min(44vw, 91dvh);
    flex: none;
  }
  html.is-touch .modal.catch-showcase-modal .catch-portrait-window {
    position: absolute; left: 16.85%; top: 22.22%;
    width: 66.1%; height: 57.9%; border-radius: 12%;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.is-touch .modal.catch-showcase-modal .catch-portrait-window > .catch-sprite {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    object-fit: contain; padding: 6%; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html.is-touch .modal.catch-showcase-modal .catch-sprite-rim { display: none; }
  html.is-touch .modal.catch-showcase-modal .catch-pf { inset: 0; background-size: contain; }
  html.is-touch .modal.catch-showcase-modal .catch-caption {
    left: 49%; right: max(30px, env(safe-area-inset-right)); top: 47%; bottom: auto;
    transform: translateY(-50%); align-items: flex-start; justify-items: start;
    gap: 7px; text-align: left; max-height: calc(100dvh - 112px); overflow: auto;
    padding: 10px 0;
  }
  html.is-touch .modal.catch-showcase-modal .catch-caption::before {
    inset: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(90deg, rgba(6,10,20,.58), rgba(6,10,20,.1));
    -webkit-mask-image: none; mask-image: none;
  }
  html.is-touch .modal.catch-showcase-modal .catch-caption h2 {
    font-size: clamp(22px, 7dvh, 36px); line-height: 1.08; max-width: 100%; text-wrap: balance;
  }
  html.is-touch .modal.catch-showcase-modal .catch-caption p { font-size: 13px; line-height: 1.25; }
  html.is-touch .modal.catch-showcase-modal .catch-meta { justify-content: flex-start; gap: 5px; }
  html.is-touch .modal.catch-showcase-modal .catch-pill,
  html.is-touch .modal.catch-showcase-modal .catch-chip { font-size: 11px; padding: 5px 8px; }
  html.is-touch .modal.catch-showcase-modal .catch-dv {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 14px; padding: 9px 11px; font-size: 12px; line-height: 1.2;
    background: rgba(4,9,16,.58); border: 1px solid rgba(255,255,255,.13);
  }
  html.is-touch .modal.catch-showcase-modal .catch-dv > span { margin: 0; }
  html.is-touch .modal.catch-showcase-modal .dialogue-actions {
    left: 49%; right: max(30px, env(safe-area-inset-right));
    top: auto; bottom: max(20px, env(safe-area-inset-bottom)); justify-content: flex-start;
  }
  html.is-touch .modal.catch-showcase-modal .catch-scene .dialogue-actions button {
    min-height: 44px; min-width: 156px; font-size: 13px;
  }
  /* Ambient blur and overlapping luminous particles consumed most of the
     first-paint budget on phones; the affinity backdrop carries the scene. */
  html.is-touch .modal.catch-showcase-modal .catch-godrays,
  html.is-touch .modal.catch-showcase-modal .catch-beam,
  html.is-touch .modal.catch-showcase-modal .catch-burst,
  html.is-touch .modal.catch-showcase-modal .catch-confetti,
  html.is-touch .modal.catch-showcase-modal .catch-rings { display: none; }

  .modal.evolution-map-modal .crownlight-blessing-scene,
  .modal.evolution-map-modal .crownlight-blessing-result {
    inset: 0; width: 100vw; height: 100dvh; border-radius: 0; box-sizing: border-box;
  }
  .modal.evolution-map-modal .crownlight-blessing-result {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(12px, 3vw, 38px);
    padding: max(18px, env(safe-area-inset-top)) max(30px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    background: radial-gradient(ellipse at 24% 48%, rgba(197,170,94,.18), transparent 42%), linear-gradient(115deg,#121c2b,#080d18 76%);
    text-align: left;
  }
  .crownlight-blessing-result .crownlight-result-monster { width: 100%; height: 80dvh; }
  .crownlight-blessing-result .crownlight-result-monster img { width: 100%; height: 100%; max-width: 36vw; max-height: 70dvh; padding: 8%; }
  .crownlight-blessing-result .crownlight-result-copy {
    justify-items: stretch; gap: clamp(7px, 2dvh, 12px); max-height: calc(100dvh - 36px); overflow: auto; padding: 2px;
  }
  .crownlight-blessing-result h2 { font: 700 clamp(24px, 7dvh, 36px)/1.1 Georgia,serif; color: #fff0c4; max-width: 100%; }
  .crownlight-blessing-result p { font-size: 12px; line-height: 1.45; max-width: 100%; }
  .crownlight-blessing-result .crownlight-result-kicker { font-size: 10px; }
  .crownlight-blessing-result .crownlight-dv-grid { grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; gap: 6px; }
  .crownlight-dv-grid > span { padding: 7px 8px; text-align: center; }
  .crownlight-blessing-result .dialogue-actions { margin: 1px 0 0; justify-content: flex-start; }
  .crownlight-blessing-result .dialogue-actions button { min-height: 44px; min-width: 156px; color: #fff0c4; background: #253249; border-color: #af945e; }
  .crownlight-blessing-scene .crownlight-blessing-stage { left: 29%; top: 47%; transform: translate(-50%,-50%) scale(.76); }
  .crownlight-blessing-scene .crownlight-blessing-aura { left: 29%; top: 47%; }
  .crownlight-blessing-scene .dig-caption { left: 53%; right: 6%; bottom: 40%; text-align: left; }
  .crownlight-blessing-scene .dig-caption h2 { font-size: clamp(22px,6dvh,34px); }
  .crownlight-blessing-scene .dig-caption p { font-size: 13px; line-height: 1.4; }

  .seal-cine .seal-cine-core {
    width: min(1040px, 94vw); max-width: none; height: calc(100dvh - 40px);
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto auto auto;
    align-content: center; justify-items: start; gap: 10px 26px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    translate: none; margin: 0; box-sizing: border-box; text-align: left;
  }
  .seal-cine .seal-cine-stage {
    grid-column: 1; grid-row: 1 / 6; align-self: center; justify-self: center;
    width: min(40vw, 78dvh); height: min(40vw,78dvh); margin: 0;
  }
  .seal-cine .seal-cine-kicker,
  .seal-cine .seal-cine-title,
  .seal-cine .seal-cine-sub,
  .seal-cine .seal-cine-progress,
  .seal-cine .seal-cine-actions { grid-column: 2; margin: 0; }
  .seal-cine .seal-cine-kicker { font-size: 10px; letter-spacing: .2em; gap: 8px; }
  .seal-cine .seal-cine-kicker::before { display: none; }
  .seal-cine .seal-cine-kicker::after { width: 34px; }
  .seal-cine .seal-cine-title { font-size: clamp(26px,8dvh,42px); line-height: 1.08; text-wrap: balance; }
  .seal-cine .seal-cine-sub { font-size: 13px; line-height: 1.5; max-width: 35ch; }
  .seal-cine .seal-cine-progress { gap: 12px; justify-content: flex-start; min-height: 30px; }
  .seal-cine .seal-cine-progress span { position: static; translate: none; margin-left: 8px; font-size: 11px; }
  .seal-cine .seal-cine-actions { position: static; padding-top: 4px; }
  .seal-cine .seal-cine-actions button { min-height: 44px; min-width: 156px; font-size: 13px; }
  .seal-cine .seal-cine-laurel { display: block; }
  .seal-cine .seal-cine-core::after { display: none; }
  .seal-cine .seal-cine-grain { display: none; }
}

/* Beyond companions use the same responsive ceremony as story equipment,
   with identity portraits and enough space for each person's combat role. */
.item-cine.is-company .ic-hero.beyond-company-portrait {
  object-fit: cover;
  border-radius: 50% 50% 42% 42%;
  border: 1px solid rgb(239 220 167 / .6);
  box-shadow: 0 0 0 8px rgb(9 20 27 / .56), 0 18px 70px rgb(0 0 0 / .44);
}
.item-cine.is-company .ic-row-img {
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgb(239 220 167 / .5);
}
.item-cine.is-company .ic-copy { max-width: 40ch; text-wrap: pretty; }
.item-cine.is-company .ic-row-name { text-transform: none; letter-spacing: .045em; font-size: clamp(11px, 2.8dvh, 14px); }
.beyond-tessen-strength-movie[data-frame="0"] .devils-movie-frame.is-front {
  transform-origin: 55% 40%;
}
.beyond-tessen-strength-movie[data-frame="1"] .devils-movie-frame.is-front {
  transform-origin: 50% 40%;
}
@media (max-height: 500px) and (orientation: landscape) {
  .item-cine.is-company .ic-copy { font-size: clamp(11px, 3.2dvh, 14px); line-height: 1.5; }
  .item-cine.is-company .ic-chips { gap: 5px; }
  .item-cine.is-company .ic-title { text-wrap: balance; }
}

/* Reward palette must outrank the shared clean-menu typography. */
#modal > .crownlight-blessing-result { color: #f5eedf; background: radial-gradient(ellipse at 24% 48%, rgba(197,170,94,.18), transparent 42%), linear-gradient(115deg,#121c2b,#080d18 76%); border-color: rgba(231,204,144,.22); }
#modal .crownlight-result-copy h2 { color: #fff0c4; }
#modal .crownlight-result-copy > p { color: #cad5e1 !important; }
#modal .crownlight-result-copy > .crownlight-result-kicker { color: #e9cf8e !important; }
.modal.catch-showcase-modal .catch-caption .rare-name { color: #b8e2fa; background: none; -webkit-text-fill-color: currentColor; }
.modal.catch-showcase-modal .catch-caption .ultra-name { color: #e9c8ff; background: none; -webkit-text-fill-color: currentColor; }
.modal.catch-showcase-modal .catch-caption .legendary-name { color: #ffdfa0; background: none; -webkit-text-fill-color: currentColor; }