:root {
  --bg: #07090d;
  --surface: #0e1218;
  --raised: #141a23;
  --sunken: #0a0e14;
  --tile: #0c1018;
  --hero: #0b0f16;
  --line: rgba(255, 255, 255, 0.07);
  --hover: rgba(255, 255, 255, 0.04);
  --accent-line: rgba(255, 177, 61, 0.5);
  --accent-fill: rgba(255, 177, 61, 0.08);
  --text: #e8edf4;
  --dim: #8b97a8;
  --accent: #ffb13d;
  --accent2: #ff7847;
  --teal: #41e0c8;
  --danger: #ff5067;
  --bad: #eb4b4b;
  --good: #4ade80;
  --gold: #ffd24d;
  --font-display: 'Chakra Petch', 'Segoe UI Semibold', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-body: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --clip: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --clip-sm: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

  --sp-0: 2px;
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-2h: 10px;
  --sp-3: 12px;
  --sp-3h: 14px;
  --sp-4: 16px;
  --sp-4h: 18px;
  --sp-5: 22px;
  --sp-5h: 26px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 60px;
  --panel-pad: 18px;
  --panel-pad-tight: 14px;
  --topbar-h: 58px;
  --banner-h: 0px;

  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --fs-3xs: 8px;
  --fs-2xs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --fs-xl: 15px;
  --fs-2xl: 16px;
  --fs-3xl: 18px;
  --fs-4xl: 20px;
  --fs-5xl: 22px;
  --fs-6xl: 26px;
  --fs-7xl: 30px;
  --fs-8xl: 34px;
  --fs-9xl: 40px;
  --fs-hero: 56px;

  --lh-none: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-normal: 1.55;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 14px 34px rgba(0, 0, 0, 0.55);
  --shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 24px rgba(255, 154, 61, 0.35);

  --bw-hair: 1px;
  --bw-thick: 2px;
  --bw-frame: 3px;

  --dur-instant: 0.1s;
  --dur-fast: 0.12s;
  --dur-base: 0.15s;
  --dur-mid: 0.2s;
  --dur-slow: 0.25s;
  --dur-slower: 0.4s;
  --dur-slowest: 0.5s;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-out-soft: cubic-bezier(.25, .9, .3, 1);
  --ease-back: cubic-bezier(.2, .7, .3, 1.2);

  --z-behind: -1;
  --z-sticky: 50;
  --z-drawer-scrim: 55;
  --z-drawer: 60;
  --z-dropdown: 80;
  --z-popover: 90;
  --z-stage-fx-1: 94;
  --z-stage-fx-2: 95;
  --z-stage-fx-3: 96;
  --z-fullscreen: 100;
  --z-modal: 150;
  --z-toast: 200;
  --z-banner: 250;
  --z-spark: 300;
  --z-combobox: 500;
  --z-floattext: 9000;
  --z-reveal: 9500;
}

/* breakpoint ladder, media queries cannot read custom properties:
   400 480 560 640 720 860 900 1000 1280 */
:root {
  --r-mil: #4b69ff;
  --r-res: #8847ff;
  --r-cla: #d32ce6;
  --r-cov: #eb4b4b;
  --r-spe: #ffd24d;
  --r-con: #ff7847;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 122, 61, 0.07), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(65, 224, 200, 0.05), transparent 55%),
    repeating-linear-gradient(125deg, transparent 0 22px, rgba(255, 255, 255, 0.012) 22px 23px),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-user-select: none;
  user-select: none;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: 0.02em; line-height: var(--lh-tight); }
a { color: inherit; }
:focus-visible { outline: var(--bw-thick) solid var(--accent); outline-offset: 2px; }

.lp-ico { width: 1em; height: 1em; fill: currentColor; display: inline-block; flex-shrink: 0; }
.lp-ico-trail { margin-left: 0.45em; }
.lp-ico-lead { margin-right: 0.4em; vertical-align: -0.1em; }

.r-mil { color: var(--r-mil); }
.r-res { color: var(--r-res); }
.r-cla { color: var(--r-cla); }
.r-cov { color: var(--r-cov); }
.r-spe { color: var(--r-spe); }
.r-con { color: var(--r-con); }

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: var(--sp-3h) var(--sp-5h);
  clip-path: var(--clip-sm);
  transition: transform var(--dur-fast), box-shadow var(--dur-mid), background var(--dur-base);
  white-space: nowrap;
}
.lp-btn.sm { padding: var(--sp-2h) var(--sp-4); font-size: var(--fs-md); }
.lp-btn.big { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-2xl); }
.lp-btn.accent {
  background: linear-gradient(115deg, var(--accent), var(--accent2));
  color: #231502;
}
.lp-btn.accent:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(255, 145, 61, 0.35); }
.lp-btn.ghost {
  background: rgba(255, 255, 255, 0.04);
  border: var(--bw-hair) solid var(--line);
  color: var(--text);
}
.lp-btn.ghost:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }
.lp-btn:active { transform: translateY(0); }

.lp-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) clamp(var(--sp-4), 4vw, var(--sp-7));
  transition: background var(--dur-slow), border-color var(--dur-slow), backdrop-filter var(--dur-slow);
  border-bottom: var(--bw-hair) solid transparent;
}
.lp-top.scrolled {
  background: rgba(7, 9, 13, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.lp-logo { display: flex; align-items: center; gap: var(--sp-2h); text-decoration: none; }
.lp-logo-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: var(--fs-2xl);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #231502;
  /* same hex as the in-app .logo .mark */
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.lp-hmr { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.12em; flex-shrink: 0; }
.lp-hmr-inline { margin-right: 0.45em; }
.lp-logo-mark svg { width: 18px; height: 18px; display: block; vertical-align: 0; }
.lp-logo-word { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); letter-spacing: 0.05em; }
.lp-logo-word b { color: var(--accent); }
.lp-top-nav { display: flex; gap: var(--sp-1); margin-left: var(--sp-2); }
.lp-top-nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  transition: color var(--dur-base);
}
.lp-top-nav a:hover { color: var(--text); }
.lp-top-cta { margin-left: auto; display: flex; gap: var(--sp-2h); }

.lp-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 110px clamp(var(--sp-4), 5vw, 48px) 70px;
  overflow: hidden;
}
.lp-hero-inner { position: relative; max-width: 780px; }
.lp-word {
  font-size: clamp(46px, 11vw, 108px);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: var(--sp-6);
}
.lp-word span {
  background: linear-gradient(100deg, var(--accent2) 0%, var(--accent) 35%, #ffe3ae 50%, var(--accent) 65%, var(--accent2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lp-shine 5s linear infinite;
}
@keyframes lp-shine { from { background-position: 0 0; } to { background-position: 200% 0; } }
.lp-tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3h);
  margin-top: var(--sp-2h);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-md), 2.4vw, var(--fs-3xl));
  letter-spacing: 0.42em;
  color: var(--dim);
}
.lp-tagline b { font-weight: 600; color: var(--text); }
.lp-tagline i { color: var(--accent); font-style: normal; }
.lp-sub {
  max-width: 560px;
  margin: var(--sp-5) auto 0;
  color: var(--dim);
  font-size: clamp(var(--fs-lg), 1.8vw, var(--fs-2xl));
}
.lp-cta-row {
  display: flex;
  justify-content: center;
  gap: var(--sp-3h);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.lp-trust { margin-top: var(--sp-4h); font-size: var(--fs-md); color: var(--dim); letter-spacing: 0.04em; }

.lp-crate { position: relative; width: 170px; height: 168px; margin: 0 auto; }
.lp-crate-box { position: absolute; inset: 28px 10px 0; animation: lp-crate-seq 9s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.65)); }
@keyframes lp-crate-seq {
  0%, 10% { transform: translateY(0); }
  5% { transform: translateY(-6px); }
  12% { transform: translate(-2px, 1px) rotate(-1deg); }
  13.5% { transform: translate(2px, -1px) rotate(1.2deg); }
  15% { transform: translate(-3px, 0) rotate(-1.4deg); }
  16.5% { transform: translate(3px, 1px) rotate(1deg); }
  18% { transform: translate(-1px, 0); }
  19.5%, 46% { transform: translateY(2px); }
  50% { transform: translateY(3px) scale(1.06, 0.92); }
  54% { transform: translateY(0) scale(1); }
  75% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}
.lp-crate-box .lid {
  position: absolute;
  inset: 0 0 56% 0;
  background: linear-gradient(180deg, #ffb13d, #c46a17);
  clip-path: polygon(8% 32%, 50% 0, 92% 32%, 92% 100%, 8% 100%);
  animation: lp-lid 9s ease-in-out infinite;
  z-index: 2;
}
@keyframes lp-lid {
  0%, 19% { transform: none; }
  22.5% { transform: translateY(-52px) rotate(-9deg); }
  24.5% { transform: translateY(-46px) rotate(-7deg); }
  44% { transform: translateY(-46px) rotate(-7deg); }
  48% { transform: translateY(2px); }
  49.5% { transform: none; }
  100% { transform: none; }
}
.lp-crate-box .body {
  position: absolute;
  inset: 46% 0 0 0;
  background: linear-gradient(180deg, #2a323f, #151a22);
  clip-path: polygon(8% 0, 92% 0, 100% 78%, 50% 100%, 0 78%);
}
.lp-crate-box .lock {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -30%) rotate(45deg);
  background: linear-gradient(135deg, #ffd98f, var(--accent2));
  animation: lp-lock 9s ease-in-out infinite;
}
@keyframes lp-lock {
  0%, 8% { box-shadow: 0 0 14px rgba(255, 177, 61, 0.45); }
  14% { box-shadow: 0 0 26px rgba(255, 122, 71, 0.85); }
  19% { box-shadow: 0 0 40px rgba(255, 230, 160, 1); }
  46% { box-shadow: 0 0 30px rgba(255, 210, 120, 0.8); }
  54%, 100% { box-shadow: 0 0 14px rgba(255, 177, 61, 0.45); }
}
.lp-beam {
  position: absolute;
  left: 50%;
  bottom: 58px;
  width: 74px;
  height: 190px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  background: linear-gradient(180deg, transparent, rgba(255, 220, 140, 0.16) 30%, rgba(255, 200, 100, 0.42));
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  opacity: 0;
  animation: lp-beam 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lp-beam {
  0%, 20% { transform: translateX(-50%) scaleY(0); opacity: 0; }
  24% { transform: translateX(-50%) scaleY(1); opacity: 1; }
  42% { transform: translateX(-50%) scaleY(1); opacity: 0.8; }
  47%, 100% { transform: translateX(-50%) scaleY(0); opacity: 0; }
}
.lp-rise {
  position: absolute;
  left: 50%;
  bottom: 78px;
  width: 116px;
  height: 44px;
  margin-left: -58px;
  z-index: 4;
  fill: var(--r-spe);
  filter: drop-shadow(0 0 14px rgba(255, 210, 77, 0.75));
  opacity: 0;
  transform: translateY(26px) scale(0.25) rotate(-50deg);
  animation: lp-rise 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lp-rise {
  0%, 21% { opacity: 0; transform: translateY(34px) scale(0.3) rotate(-40deg); filter: drop-shadow(0 0 14px rgba(255, 210, 77, 0.75)) brightness(1); }
  24% { opacity: 1; transform: translateY(14px) scale(0.75) rotate(-20deg); filter: drop-shadow(0 0 22px rgba(255, 230, 160, 1)) brightness(2); }
  30% { transform: translateY(-2px) scale(1) rotate(-5deg); filter: drop-shadow(0 0 18px rgba(255, 210, 77, 0.85)) brightness(1.15); }
  36% { transform: translateY(3px) scale(1.03) rotate(4deg); }
  42% { transform: translateY(-2px) scale(1) rotate(-2deg); }
  45% { opacity: 1; transform: translateY(1px) scale(0.97) rotate(0deg); }
  48.5% { opacity: 0; transform: translateY(30px) scale(0.3) rotate(20deg); }
  49%, 100% { opacity: 0; transform: translateY(34px) scale(0.3) rotate(-40deg); }
}
.lp-rise-halo {
  position: absolute;
  left: 50%;
  bottom: 42px;
  width: 138px;
  height: 138px;
  margin-left: -69px;
  z-index: 3;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(255, 210, 77, 0.38), rgba(255, 177, 61, 0.12) 45%, transparent 70%);
  opacity: 0;
  transform: translateY(26px) scale(0.2);
  animation: lp-halo 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lp-halo {
  0%, 21% { opacity: 0; transform: translateY(26px) scale(0.2); }
  26% { opacity: 0.9; transform: translateY(0) scale(1); }
  40% { opacity: 0.75; transform: translateY(0) scale(0.96); }
  47%, 100% { opacity: 0; transform: translateY(14px) scale(0.3); }
}
.lp-burst { position: absolute; left: 50%; top: 52%; pointer-events: none; }
.lp-burst i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-circle);
  background: #ffd98f;
  opacity: 0;
  animation: lp-spark 9s ease-out infinite;
}
.lp-burst i:nth-child(1) { --dx: -66px; --dy: -58px; }
.lp-burst i:nth-child(2) { --dx: 62px; --dy: -66px; background: var(--accent2); }
.lp-burst i:nth-child(3) { --dx: -84px; --dy: -8px; }
.lp-burst i:nth-child(4) { --dx: 88px; --dy: -14px; background: var(--accent); }
.lp-burst i:nth-child(5) { --dx: -48px; --dy: -90px; background: var(--accent); }
.lp-burst i:nth-child(6) { --dx: 44px; --dy: -94px; }
.lp-burst i:nth-child(7) { --dx: -20px; --dy: -104px; background: var(--accent2); }
.lp-burst i:nth-child(8) { --dx: 24px; --dy: -100px; }
@keyframes lp-spark {
  0%, 20% { opacity: 0; transform: translate(0, 0) scale(1); }
  22% { opacity: 1; }
  34% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.lp-forge {
  position: absolute;
  inset: -78px;
  pointer-events: none;
  animation: lp-forge-surge 9s ease-in-out infinite;
}
@keyframes lp-forge-surge {
  0%, 16% { transform: scale(1); opacity: 0.75; }
  24%, 42% { transform: scale(1.09); opacity: 1; }
  54%, 100% { transform: scale(1); opacity: 0.75; }
}
.lp-forge .glow {
  position: absolute;
  inset: 12%;
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle at 50% 58%, rgba(255, 140, 60, 0.28), rgba(255, 122, 71, 0.1) 42%, transparent 68%);
  animation: lp-forge-breathe 4.5s ease-in-out infinite;
}
@keyframes lp-forge-breathe { 50% { filter: brightness(1.4); } }
.lp-forge .swirl {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  filter: blur(16px) saturate(1.15);
  -webkit-mask-image: radial-gradient(circle, transparent 34%, #000 46% 66%, transparent 76%);
  mask-image: radial-gradient(circle, transparent 34%, #000 46% 66%, transparent 76%);
}
.lp-forge .swirl.a {
  background: conic-gradient(from 20deg,
    transparent 0 6%, rgba(255, 177, 61, 0.5) 14%, transparent 30%,
    rgba(255, 90, 40, 0.42) 44%, transparent 58%,
    rgba(255, 210, 77, 0.45) 72%, transparent 88%, transparent 100%);
  animation: lp-swirl 13s linear infinite;
}
.lp-forge .swirl.b {
  inset: -14px;
  filter: blur(24px) saturate(1.15);
  background: conic-gradient(from 190deg,
    transparent 0 10%, rgba(255, 122, 71, 0.36) 24%, transparent 42%,
    rgba(255, 177, 61, 0.3) 60%, transparent 74%,
    rgba(255, 60, 46, 0.3) 86%, transparent 100%);
  animation: lp-swirl-rev 19s linear infinite;
}
@keyframes lp-swirl { to { transform: rotate(360deg); } }
@keyframes lp-swirl-rev { to { transform: rotate(-360deg); } }
.lp-forge .ring {
  position: absolute;
  inset: 6%;
  border-radius: var(--radius-circle);
  background: repeating-conic-gradient(rgba(255, 200, 120, 0.5) 0 1.1deg, transparent 1.1deg 12deg);
  -webkit-mask-image: radial-gradient(circle, transparent 70.5%, #000 71.5% 73.5%, transparent 74.5%);
  mask-image: radial-gradient(circle, transparent 70.5%, #000 71.5% 73.5%, transparent 74.5%);
  opacity: 0.55;
  animation: lp-swirl-rev 46s linear infinite;
}
@keyframes lp-spin { to { rotate: 360deg; } }
.lp-crate-shadow {
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 140px;
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(0, 0, 0, 0.6), transparent 75%);
  animation: lp-shadow 9s ease-in-out infinite;
}
@keyframes lp-shadow {
  0%, 46% { transform: translateX(-50%) scaleX(1); opacity: 1; }
  50% { transform: translateX(-50%) scaleX(1.25); opacity: 1.2; }
  54%, 100% { transform: translateX(-50%) scaleX(1); opacity: 1; }
}

.lp-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lp-embers i {
  position: absolute;
  bottom: -12px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  opacity: 0;
  animation: lp-ember 9s linear infinite;
}
.lp-embers i:nth-child(1) { left: 6%; animation-duration: 10s; animation-delay: -2s; }
.lp-embers i:nth-child(2) { left: 15%; width: 3px; height: 3px; animation-duration: 8s; animation-delay: -6s; background: var(--accent2); }
.lp-embers i:nth-child(3) { left: 24%; animation-duration: 12s; animation-delay: -4s; }
.lp-embers i:nth-child(4) { left: 33%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: -1s; background: #ffd24d; }
.lp-embers i:nth-child(5) { left: 42%; animation-duration: 11s; animation-delay: -8s; }
.lp-embers i:nth-child(6) { left: 51%; width: 3px; height: 3px; animation-duration: 7.5s; animation-delay: -3s; background: var(--accent2); }
.lp-embers i:nth-child(7) { left: 60%; animation-duration: 10.5s; animation-delay: -7s; }
.lp-embers i:nth-child(8) { left: 69%; width: 5px; height: 5px; animation-duration: 8.5s; animation-delay: -5s; }
.lp-embers i:nth-child(9) { left: 78%; animation-duration: 12.5s; animation-delay: -9s; background: #ffd24d; }
.lp-embers i:nth-child(10) { left: 86%; width: 3px; height: 3px; animation-duration: 9.5s; animation-delay: -2.5s; }
.lp-embers i:nth-child(11) { left: 93%; animation-duration: 11.5s; animation-delay: -6.5s; background: var(--accent2); }
.lp-embers i:nth-child(12) { left: 98%; animation-duration: 8s; animation-delay: -4.5s; }
@keyframes lp-ember {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  60% { opacity: 0.5; }
  100% { transform: translateY(-105vh) translateX(26px); opacity: 0; }
}

.lp-ticker {
  display: flex;
  align-items: stretch;
  border-top: var(--bw-hair) solid var(--line);
  border-bottom: var(--bw-hair) solid var(--line);
  background: rgba(14, 18, 24, 0.7);
}
.lp-ticker-label {
  flex: none;
  display: grid;
  place-items: center;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  border-right: var(--bw-hair) solid var(--line);
  background: rgba(255, 177, 61, 0.05);
  white-space: nowrap;
}
.lp-ticker-clip { overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: center; }
.lp-ticker-track {
  display: flex;
  gap: var(--sp-7);
  padding-left: var(--sp-7);
  white-space: nowrap;
  animation: lp-marquee 36s linear infinite;
}
@keyframes lp-marquee { to { transform: translateX(-50%); } }
.lp-ticker-track span { font-size: var(--fs-md); color: var(--dim); }
.lp-ticker-track b { font-weight: 700; }
.lp-ticker-track em { font-style: normal; color: var(--good); font-weight: 600; margin-left: var(--sp-1); }

.lp-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(var(--sp-8), 9vw, 110px) clamp(var(--sp-4), 4vw, var(--sp-7)) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.lp-h2 {
  font-size: clamp(var(--fs-6xl), 5vw, var(--fs-9xl));
  text-align: center;
}
.lp-h2 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lp-lede {
  text-align: center;
  color: var(--dim);
  max-width: 620px;
  margin: var(--sp-3h) auto 0;
}
.lp-lede.left { text-align: left; margin-left: 0; }

.lp-show-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.lp-tv {
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lp-tv-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-1h);
  padding: var(--sp-2h) var(--sp-3);
  border-bottom: var(--bw-hair) solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.lp-tv-bar i { width: 8px; height: 8px; border-radius: var(--radius-circle); background: #2b3442; }
.lp-tv-bar i:first-child { background: rgba(255, 80, 103, 0.7); }
.lp-tv-bar i:nth-child(2) { background: rgba(255, 177, 61, 0.7); }
.lp-tv-bar i:nth-child(3) { background: rgba(74, 222, 128, 0.6); }
.lp-tv-bar span {
  margin-left: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.lp-tv-screen {
  position: relative;
  height: 200px;
  overflow: hidden;
  background:
    radial-gradient(90% 90% at 50% 10%, rgba(255, 255, 255, 0.03), transparent 60%),
    #0a0e14;
}
.lp-tv figcaption {
  padding: var(--sp-3h) var(--sp-4) var(--sp-4);
  font-size: var(--fs-md);
  color: var(--dim);
  border-top: var(--bw-hair) solid var(--line);
}

[data-demo] * { animation-play-state: paused !important; }
[data-demo].run * { animation-play-state: running !important; }

.d-reel-marker {
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  transform: translateX(-1px);
  background: linear-gradient(180deg, transparent, var(--accent) 30% 70%, transparent);
  z-index: 2;
  box-shadow: 0 0 12px rgba(255, 177, 61, 0.6);
}
.d-reel-strip {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  gap: var(--sp-2h);
  transform: translate(-160px, -50%);
  animation: d-reel-spin 7s cubic-bezier(0.16, 0.84, 0.22, 1) infinite;
  will-change: transform;
}
@keyframes d-reel-spin {
  0%, 6% { transform: translate(-160px, -50%); }
  68%, 100% { transform: translate(-1270px, -50%); }
}
.d-reel-strip span {
  flex: none;
  width: 92px;
  height: 132px;
  padding: var(--sp-3) var(--sp-2) var(--sp-2h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-0);
  background: linear-gradient(180deg, #161d27, #10151d);
  border: var(--bw-hair) solid var(--line);
  border-top: var(--bw-frame) solid currentColor;
  border-radius: var(--radius-sm);
  min-width: 0;
}
.d-reel-strip svg {
  width: 72px;
  height: 40px;
  fill: currentColor;
  opacity: 0.9;
  margin-bottom: auto;
  margin-top: var(--sp-1);
}
.d-reel-strip b {
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-reel-strip em {
  max-width: 100%;
  font-style: normal;
  font-size: var(--fs-2xs);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-reel-win { animation: d-reel-win 7s ease infinite; }
@keyframes d-reel-win {
  0%, 66% { box-shadow: none; }
  72% { box-shadow: 0 0 0 2px var(--r-spe), 0 0 34px rgba(255, 210, 77, 0.65); transform: scale(1.07); }
  88% { box-shadow: 0 0 0 1px var(--r-spe), 0 0 18px rgba(255, 210, 77, 0.4); transform: scale(1.04); }
  97%, 100% { box-shadow: none; transform: scale(1); }
}

.d-crash-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-crash-mult {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-7xl);
  color: var(--accent);
  text-shadow: 0 2px 14px rgba(255, 177, 61, 0.35);
  font-variant-numeric: tabular-nums;
}
.d-crash-mult.bust { color: var(--danger); text-shadow: 0 2px 14px rgba(255, 80, 103, 0.4); }

.d-mines { display: grid; place-items: center; }
.d-mines-grid {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: var(--sp-1h);
  animation: d-mines-shake 7s linear infinite;
}
@keyframes d-mines-shake {
  0%, 57.9% { transform: translate(0, 0); }
  58.6% { transform: translate(-3px, 2px); }
  59.3% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  60.7%, 100% { transform: translate(0, 0); }
}
.d-mines-grid span {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: #161d27;
  border: var(--bw-hair) solid var(--line);
  display: grid;
  place-items: center;
  position: relative;
}
.d-mines-grid .g::before {
  content: '';
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2341e0c8' fill-rule='evenodd' d='M7 3.5 H17 L21.5 9 L12 21 L2.5 9 Z M9.2 5.5 L14.8 5.5 L12 8.8 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.2);
}
.g1::before { animation: d-gem 7s ease infinite; }
.g2::before { animation: d-gem2 7s ease infinite; }
.g3::before { animation: d-gem3 7s ease infinite; }
.g4::before { animation: d-gem4 7s ease infinite; }
.g5::before { animation: d-gem5 7s ease infinite; }
@keyframes d-gem { 0%, 10% { opacity: 0; transform: scale(0.2); } 14% { opacity: 1; transform: scale(1.25); } 17%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes d-gem2 { 0%, 18% { opacity: 0; transform: scale(0.2); } 22% { opacity: 1; transform: scale(1.25); } 25%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes d-gem3 { 0%, 26% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; transform: scale(1.25); } 33%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes d-gem4 { 0%, 34% { opacity: 0; transform: scale(0.2); } 38% { opacity: 1; transform: scale(1.25); } 41%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.2); } }
@keyframes d-gem5 { 0%, 42% { opacity: 0; transform: scale(0.2); } 46% { opacity: 1; transform: scale(1.25); } 49%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.2); } }
.d-mines-grid .boom { animation: d-boom-tile 7s ease infinite; }
@keyframes d-boom-tile {
  0%, 50% { background: #161d27; }
  54% { background: #2a1c14; }
  58% { background: var(--accent2); box-shadow: 0 0 30px rgba(255, 122, 71, 0.9); }
  66% { background: #3a1410; box-shadow: 0 0 10px rgba(255, 122, 71, 0.35); }
  80%, 100% { background: #161d27; box-shadow: none; }
}
.d-mines-grid .boom::before {
  content: '';
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffd9a8' fill-rule='evenodd' d='M12 1.5 L13.76 7.75 L19.42 4.58 L16.25 10.24 L22.5 12 L16.25 13.76 L19.42 19.42 L13.76 16.25 L12 22.5 L10.24 16.25 L4.58 19.42 L7.75 13.76 L1.5 12 L7.75 10.24 L4.58 4.58 L10.24 7.75 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: d-boom-glyph 7s ease infinite;
}
@keyframes d-boom-glyph {
  0%, 56% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  59% { opacity: 1; transform: scale(1.5) rotate(40deg); }
  70% { opacity: 0.8; transform: scale(1) rotate(60deg); }
  82%, 100% { opacity: 0; }
}
.d-mines-grid .boom::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-circle);
  border: var(--bw-thick) solid rgba(255, 122, 71, 0.8);
  opacity: 0;
  animation: d-boom-ring 7s ease-out infinite;
}
@keyframes d-boom-ring {
  0%, 57% { opacity: 0; transform: scale(0.4); }
  59% { opacity: 1; transform: scale(1); }
  72% { opacity: 0; transform: scale(3.4); }
  100% { opacity: 0; transform: scale(3.4); }
}

.d-war-score {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(7, 9, 13, 0.8);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  white-space: nowrap;
}
.d-war-score .t1 { color: var(--accent); }
.d-war-score .t2 { color: var(--teal); }
.d-war-round {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
  background: rgba(7, 9, 13, 0.7);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-xs);
  padding: var(--sp-0) var(--sp-2);
}
.d-war-map {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.03), transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255, 255, 255, 0.025) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 255, 255, 0.025) 27px 28px),
    #0b1016;
}
.d-war-map .zone { position: absolute; border-radius: var(--radius-md); display: grid; place-items: center; }
.d-war-map .za { right: 6%; top: 22%; width: 26%; height: 34%; background: rgba(255, 177, 61, 0.06); border: var(--bw-hair) dashed rgba(255, 177, 61, 0.3); }
.d-war-map .zb { left: 5%; top: 48%; width: 22%; height: 32%; background: rgba(65, 224, 200, 0.05); border: var(--bw-hair) dashed rgba(65, 224, 200, 0.25); }
.d-war-map .zone b {
  font-family: var(--font-display);
  font-size: var(--fs-7xl);
  font-weight: 700;
  line-height: var(--lh-none);
  opacity: 0.16;
}
.d-war-map .za b { color: var(--accent); }
.d-war-map .zb b { color: var(--teal); }
.d-war-map .wall { position: absolute; background: #1d2733; border-radius: var(--radius-xs); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
.d-war-map .w1 { left: 12%; top: 26%; width: 24%; height: 6px; }
.d-war-map .w2 { left: 55%; top: 16%; width: 6px; height: 30%; }
.d-war-map .w3 { left: 32%; top: 58%; width: 6px; height: 28%; }
.d-war-map .w4 { left: 66%; top: 68%; width: 22%; height: 6px; }
.d-war-map .w5 { left: 6%; top: 40%; width: 14%; height: 6px; }
.d-war-map .w6 { left: 44%; top: 40%; width: 18%; height: 6px; }
.d-war-map .w7 { left: 78%; top: 30%; width: 6px; height: 22%; }
.d-war-map .crate { position: absolute; width: 13px; height: 13px; background: #232f3d; border: var(--bw-hair) solid #31405166; border-radius: var(--radius-xs); transform: rotate(12deg); }
.d-war-map .c1 { left: 40%; top: 30%; }
.d-war-map .c2 { left: 24%; top: 70%; transform: rotate(-9deg); }
.d-war-map .c3 { left: 70%; top: 52%; }
.d-war-map .dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  z-index: 2;
  will-change: transform;
}
.d-war-map .dot.o { background: var(--accent); box-shadow: 0 0 8px rgba(255, 177, 61, 0.8); }
.d-war-map .dot.t { background: var(--teal); box-shadow: 0 0 8px rgba(65, 224, 200, 0.8); }
.d-war-map .o1 { left: 10%; top: 12%; animation: d-orbitA 7s ease-in-out infinite alternate; }
.d-war-map .t3 { left: 84%; top: 82%; animation: d-orbitB 6.4s ease-in-out infinite alternate; }
@keyframes d-orbitA { 40% { transform: translate(14px, 8px); } 100% { transform: translate(-4px, 12px); } }
@keyframes d-orbitB { 45% { transform: translate(-12px, -8px); } 100% { transform: translate(6px, -12px); } }
/* Shooters run on the shared 12s clock and are parked on their base spot
   whenever they fire, so the kill shots always leave from the dot. */
.d-war-map .o2 { left: 46%; top: 50%; animation: d-war-o2 12s ease-in-out infinite; }
@keyframes d-war-o2 {
  0% { transform: translate(0, 0); }
  12% { transform: translate(13px, -6px); }
  21%, 28% { transform: translate(0, 0); }
  48% { transform: translate(-11px, 7px); }
  72% { transform: translate(9px, 5px); }
  100% { transform: translate(0, 0); }
}
.d-war-map .t1 { left: 88%; top: 16%; animation: d-war-t1 12s ease-in-out infinite; }
@keyframes d-war-t1 {
  0% { transform: translate(0, 0); }
  18% { transform: translate(-14px, 6px); }
  36% { transform: translate(-4px, 12px); }
  50%, 58% { transform: translate(0, 0); }
  80% { transform: translate(-10px, 4px); }
  100% { transform: translate(0, 0); }
}
.d-war-map .o4 { left: 12%; top: 33%; animation: d-war-o4 12s ease-in-out infinite; }
@keyframes d-war-o4 {
  0% { transform: translate(0, 0); }
  25% { transform: translate(10px, -5px); }
  55% { transform: translate(14px, 3px); }
  77%, 100% { transform: translate(0, 0); }
}
.d-war-map .t4 { left: 68%; top: 58%; animation: d-war-t4 12s ease-in-out infinite; }
@keyframes d-war-t4 {
  0% { transform: translate(0, 0); box-shadow: 0 0 8px rgba(65, 224, 200, 0.8); }
  30% { transform: translate(8px, -8px); }
  60% { transform: translate(-8px, 6px); }
  76%, 86% { transform: translate(0, 0); }
  81% { transform: translate(0, 0); box-shadow: 0 0 18px rgba(255, 255, 255, 1); }
  100% { transform: translate(0, 0); box-shadow: 0 0 8px rgba(65, 224, 200, 0.8); }
}
/* Scripted pushes animate map coordinates, so the routes hug the lanes and
   deaths land on exact spots the kill shots can target. */
.d-war-map .o3 { left: 6%; top: 88%; animation: d-war-o3 12s linear infinite; }
@keyframes d-war-o3 {
  0%, 8% { left: 6%; top: 88%; opacity: 1; }
  20% { left: 30%; top: 88%; opacity: 1; }
  32% { left: 50%; top: 80%; opacity: 1; }
  42% { left: 64%; top: 58%; opacity: 1; }
  52%, 54.9% { left: 70%; top: 32%; opacity: 1; }
  55% { left: 70%; top: 32%; opacity: 0; }
  96% { left: 70%; top: 32%; opacity: 0; }
  97%, 100% { left: 6%; top: 88%; opacity: 1; }
}
.d-war-map .t2 { left: 88%; top: 60%; animation: d-war-t2 12s linear infinite; }
@keyframes d-war-t2 {
  0%, 5% { left: 88%; top: 60%; opacity: 1; }
  13% { left: 92%; top: 74%; opacity: 1; }
  19% { left: 60%; top: 80%; opacity: 1; }
  24.5%, 24.9% { left: 37%; top: 72%; opacity: 1; }
  25% { left: 37%; top: 72%; opacity: 0; }
  96% { left: 37%; top: 72%; opacity: 0; }
  97%, 100% { left: 88%; top: 60%; opacity: 1; }
}
/* Kill shots live in percentage space (SVG stretched to the map), so every
   line starts on its shooter and ends on its victim at any tile size. */
.d-war-fire { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.d-war-fire line { stroke: #ffd24d; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: 0; }
.d-war-fire .f1 { animation: d-fire1 12s linear infinite; }
.d-war-fire .f2 { animation: d-fire2 12s linear infinite; }
.d-war-fire .f3 { animation: d-fire3 12s linear infinite; }
@keyframes d-fire1 { 0%, 24.2% { opacity: 0; } 24.6% { opacity: 1; } 25.6% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-fire2 { 0%, 54.2% { opacity: 0; } 54.6% { opacity: 1; } 55.6% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-fire3 { 0%, 80.4% { opacity: 0; } 80.8% { opacity: 1; } 81.8% { opacity: 0; } 100% { opacity: 0; } }
.d-war-map .muzzle {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -2px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, #fff8e0, rgba(255, 210, 77, 0.4) 55%, transparent 75%);
  opacity: 0;
  z-index: 2;
}
.d-war-map .m1 { left: 46%; top: 50%; animation: d-fire1 12s linear infinite; }
.d-war-map .m2 { left: 88%; top: 16%; animation: d-fire2 12s linear infinite; }
.d-war-map .m3 { left: 12%; top: 33%; animation: d-fire3 12s linear infinite; }
.d-war-map .kill {
  position: absolute;
  z-index: 2;
  font-style: normal;
  opacity: 0;
}
.d-war-map .kill::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff5067' fill-rule='evenodd' d='M5.4 3.8 L12 10.4 L18.6 3.8 L20.2 5.4 L13.6 12 L20.2 18.6 L18.6 20.2 L12 13.6 L5.4 20.2 L3.8 18.6 L10.4 12 L3.8 5.4 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(255, 80, 103, 0.7));
}
.d-war-map .k1 { left: 35.5%; top: 66%; animation: d-kill1 12s ease infinite; }
.d-war-map .k2 { left: 68.5%; top: 26%; animation: d-kill2 12s ease infinite; }
@keyframes d-kill1 { 0%, 24.6% { opacity: 0; transform: scale(1.6); } 26% { opacity: 1; transform: scale(1); } 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes d-kill2 { 0%, 54.6% { opacity: 0; transform: scale(1.6); } 56% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 80%, 100% { opacity: 0; } }
.d-war-map .hitspark {
  position: absolute;
  left: calc(68% - 3px);
  top: calc(58% - 3px);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-circle);
  border: var(--bw-thick) solid rgba(255, 255, 255, 0.9);
  opacity: 0;
  z-index: 2;
  animation: d-hitspark 12s ease-out infinite;
}
@keyframes d-hitspark { 0%, 80.6% { opacity: 0; transform: scale(0.3); } 81.2% { opacity: 1; transform: scale(1); } 83.5%, 100% { opacity: 0; transform: scale(2.1); } }
.d-war-map .smoke {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(150, 165, 185, 0.5), rgba(150, 165, 185, 0.12) 60%, transparent 75%);
  filter: blur(3px);
  opacity: 0;
  z-index: 1;
}
.d-war-map .s1 { left: 42%; top: 34%; animation: d-smoke 12s ease infinite; }
.d-war-map .s2 { left: 16%; top: 52%; animation: d-smoke2 12s ease infinite; }
@keyframes d-smoke { 0%, 30% { opacity: 0; transform: scale(0.3); } 36% { opacity: 0.85; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.15) translate(6px, -4px); } 58%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes d-smoke2 { 0%, 58% { opacity: 0; transform: scale(0.3); } 64% { opacity: 0.8; transform: scale(1); } 76% { opacity: 0.55; transform: scale(1.2) translate(-5px, -6px); } 84%, 100% { opacity: 0; transform: scale(1.3); } }
.d-war-map .plant {
  position: absolute;
  right: 16%;
  top: 36%;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: rgba(255, 80, 103, 0.9);
  z-index: 2;
  animation: d-plant 2s ease-in-out infinite;
}
@keyframes d-plant { 50% { box-shadow: 0 0 0 12px rgba(255, 80, 103, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 80, 103, 0); } }
.d-war-banner {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #ffb9c4;
  background: rgba(120, 12, 30, 0.85);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  opacity: 0;
  animation: d-war-banner 12s ease infinite;
  white-space: nowrap;
}
@keyframes d-war-banner {
  0%, 60% { opacity: 0; transform: translate(-50%, 8px); }
  63% { opacity: 1; transform: translate(-50%, 0); }
  68% { opacity: 0.55; }
  72% { opacity: 1; }
  76% { opacity: 0.55; }
  80% { opacity: 1; transform: translate(-50%, 0); }
  86%, 100% { opacity: 0; transform: translate(-50%, 8px); }
}

.d-bj { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3h); }
.d-bj-row { display: flex; gap: var(--sp-2); }
.d-bj-row span {
  width: 34px;
  height: 48px;
  clip-path: var(--clip-sm);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.022) 7px 8px),
    linear-gradient(158deg, #262f3b, #161c25 62%, #10151c);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16);
  color: #e9f0f8;
  font-weight: 700;
  font-size: var(--fs-xl);
  display: grid;
  place-items: center;
  opacity: 0;
  box-shadow: var(--shadow-md);
}
.d-bj-row .red { color: #ff7183; }
.d-bj-row .back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 177, 61, 0.14) 0 5px, transparent 5px 10px),
    linear-gradient(158deg, #1b222c, #0d1218);
  border-color: var(--accent-line);
}
.d-bj-row .back { animation: d-bj-c 7s ease infinite; }
.d-bj-row .c1 { animation: d-bj-c1 7s ease infinite; }
.d-bj-row .c2 { animation: d-bj-c2 7s ease infinite; }
.d-bj-row .c3 { animation: d-bj-c3 7s ease infinite; }
@keyframes d-bj-c { 0%, 4% { opacity: 0; transform: translate(30px, -20px) rotate(9deg); } 9%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-bj-c1 { 0%, 11% { opacity: 0; transform: translate(30px, -20px) rotate(9deg); } 16%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-bj-c2 { 0%, 19% { opacity: 0; transform: translate(30px, -26px) rotate(9deg); } 24%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-bj-c3 { 0%, 27% { opacity: 0; transform: translate(30px, -26px) rotate(9deg); } 32%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.d-bj-chips { position: absolute; left: 24px; bottom: 22px; display: flex; }
.d-bj-chips i {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  clip-path: var(--clip-sm);
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 177, 61, 0.16) 4px 5px),
    linear-gradient(180deg, rgba(255, 177, 61, 0.3), #10151c);
  border: var(--bw-hair) solid var(--accent-line);
  box-shadow: inset 0 -3px 0 var(--accent);
  opacity: 0;
}
.d-bj-chips i:nth-child(1) { animation: d-bj-chip 7s ease infinite; }
.d-bj-chips i:nth-child(2) { animation: d-bj-chip2 7s ease infinite; }
.d-bj-chips i:nth-child(3) { animation: d-bj-chip3 7s ease infinite; }
@keyframes d-bj-chip { 0%, 46% { opacity: 0; transform: translateX(110px); } 54%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes d-bj-chip2 { 0%, 49% { opacity: 0; transform: translateX(110px); } 57%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes d-bj-chip3 { 0%, 52% { opacity: 0; transform: translateX(110px); } 60%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.d-bj-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg) scale(2.2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: 0.2em;
  color: #231502;
  background: linear-gradient(115deg, #ffd24d, var(--accent2));
  padding: var(--sp-1h) var(--sp-4);
  box-shadow: 0 8px 26px rgba(255, 177, 61, 0.45);
  opacity: 0;
  animation: d-bj-banner 7s ease infinite;
  white-space: nowrap;
  z-index: 2;
}
@keyframes d-bj-banner {
  0%, 36% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(2.2); }
  40% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
  42.5% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.06); }
  45%, 84% { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
  90%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
}

.d-rl { display: grid; place-items: center; }
.d-rl-wheel {
  position: relative;
  width: 148px;
  height: 148px;
  border-radius: var(--radius-circle);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(0, 0, 0, 0.35) 35% 100%),
    repeating-conic-gradient(#a3122a 0 15deg, #10151d 15deg 30deg);
  animation: d-rl-spin 7s cubic-bezier(0.16, 0.7, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes d-rl-spin { 0%, 4% { transform: rotate(0deg); } 66%, 100% { transform: rotate(1650deg); } }
.d-rl-wheel .rim {
  position: absolute;
  inset: -7px;
  border-radius: var(--radius-circle);
  border: 4px solid #3b444f;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7), 0 0 22px rgba(0, 0, 0, 0.5);
}
.d-rl-wheel .hub {
  position: absolute;
  inset: 33%;
  border-radius: var(--radius-circle);
  background: linear-gradient(145deg, #2a323f, #10151d);
  border: var(--bw-thick) solid #3b444f;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: var(--fs-2xl);
  color: var(--accent);
}
.d-rl-orbit {
  position: absolute;
  width: 148px;
  height: 148px;
  animation: d-rl-orbit 7s cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
  will-change: transform;
}
@keyframes d-rl-orbit { 0%, 4% { transform: rotate(0deg); } 66%, 100% { transform: rotate(-1260deg); } }
.d-rl-orbit .ball {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at 35% 30%, #ffffff, #b9c4d4);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  animation: d-rl-drop 7s ease infinite;
}
@keyframes d-rl-drop { 0%, 30% { transform: translateY(4px); } 62% { transform: translateY(14px); } 66%, 100% { transform: translateY(17px); } }
.d-rl-result {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ffb9c4;
  background: rgba(120, 12, 30, 0.9);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3h);
  opacity: 0;
  animation: d-rl-result 7s ease infinite;
  white-space: nowrap;
}
@keyframes d-rl-result {
  0%, 68% { opacity: 0; transform: translate(-50%, 8px); }
  72%, 92% { opacity: 1; transform: translate(-50%, 0); }
  97%, 100% { opacity: 0; }
}

.d-plinko-pegs {
  position: absolute;
  inset: 18px 24px 48px;
  background-image: radial-gradient(circle 2.5px, #35404f 99%, transparent 100%);
  background-size: 34px 26px;
  background-position: 50% 0;
}
.d-plinko-ball {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at 35% 30%, #ffe4b8, var(--accent) 60%, var(--accent2));
  box-shadow: 0 0 12px rgba(255, 177, 61, 0.65);
  animation: d-ball 3.6s cubic-bezier(0.5, 0.05, 0.9, 0.6) infinite;
  will-change: transform;
}
@keyframes d-ball {
  0% { transform: translate(0, 0); opacity: 1; }
  16% { transform: translate(15px, 24px); }
  32% { transform: translate(-4px, 52px); }
  48% { transform: translate(16px, 80px); }
  64% { transform: translate(4px, 108px); }
  78% { transform: translate(22px, 132px); }
  86% { transform: translate(18px, 148px); opacity: 1; }
  96%, 100% { transform: translate(18px, 148px); opacity: 0; }
}
.d-plinko-buckets {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  gap: var(--sp-1h);
}
.d-plinko-buckets span {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--sp-1h) 0;
  border-radius: var(--radius-sm);
  background: #161d27;
  border: var(--bw-hair) solid var(--line);
  color: var(--dim);
}
.d-plinko-buckets span:first-child, .d-plinko-buckets span:last-child { color: var(--r-spe); }
.d-plinko-buckets .hit { animation: d-bucket 3.6s ease infinite; }
@keyframes d-bucket {
  0%, 84% { background: #161d27; color: var(--dim); transform: translateY(0); }
  88% { background: rgba(255, 177, 61, 0.25); color: var(--accent); transform: translateY(3px); box-shadow: 0 0 18px rgba(255, 177, 61, 0.45); }
  97%, 100% { background: #161d27; color: var(--dim); transform: translateY(0); }
}

.d-sl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3h); }
.d-sl-frame {
  position: relative;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2h);
  background: linear-gradient(180deg, #1b232f, #10151d);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.55);
}
.d-sl-reel {
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #0a0e14;
  border: var(--bw-hair) solid var(--line);
}
.d-sl-reel .strip {
  color: var(--dim);
  will-change: transform;
}
.d-sl-reel .strip i {
  height: 46px;
  display: grid;
  place-items: center;
  font-size: var(--fs-6xl);
}
.d-sl-reel .strip .jp { color: var(--accent); }
.d-sl-reel .strip.s1 { animation: d-sl-s1 7s ease-out infinite; }
.d-sl-reel .strip.s2 { animation: d-sl-s2 7s ease-out infinite; }
.d-sl-reel .strip.s3 { animation: d-sl-s3 7s ease-out infinite; }
@keyframes d-sl-s1 {
  0%, 4% { transform: translateY(0); filter: blur(0); }
  8% { filter: blur(2px); }
  26% { filter: blur(2px); }
  30% { transform: translateY(-414px); filter: blur(0); }
  33% { transform: translateY(-406px); }
  36%, 100% { transform: translateY(-414px); }
}
@keyframes d-sl-s2 {
  0%, 4% { transform: translateY(0); filter: blur(0); }
  8% { filter: blur(2px); }
  40% { filter: blur(2px); }
  44% { transform: translateY(-414px); filter: blur(0); }
  47% { transform: translateY(-406px); }
  50%, 100% { transform: translateY(-414px); }
}
@keyframes d-sl-s3 {
  0%, 4% { transform: translateY(0); filter: blur(0); }
  8% { filter: blur(2px); }
  44% { filter: blur(2px); }
  48% { transform: translateY(-276px); filter: blur(0); }
  52% { transform: translateY(-276px); }
  55% { transform: translateY(-322px); }
  60% { transform: translateY(-322px); }
  63% { transform: translateY(-368px); }
  68% { transform: translateY(-368px); }
  71% { transform: translateY(-414px); }
  74% { transform: translateY(-406px); }
  77%, 100% { transform: translateY(-414px); }
}
.d-sl-line {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--r-spe), transparent);
  opacity: 0;
  animation: d-sl-line 7s ease infinite;
}
@keyframes d-sl-line { 0%, 76% { opacity: 0; } 79% { opacity: 1; } 83% { opacity: 0.4; } 87% { opacity: 1; } 94%, 100% { opacity: 0; } }
.d-sl-banner {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--r-spe);
  text-shadow: 0 0 16px rgba(255, 210, 77, 0.55);
  opacity: 0;
  animation: d-sl-banner 7s ease infinite;
}
@keyframes d-sl-banner {
  0%, 76% { opacity: 0; transform: scale(0.6); }
  80% { opacity: 1; transform: scale(1.12); }
  83%, 95% { opacity: 1; transform: scale(1); }
  99%, 100% { opacity: 0; }
}
.d-cf { display: flex; align-items: center; justify-content: center; gap: var(--sp-4h); }
.d-cf-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2h) var(--sp-3h);
  background: rgba(255, 255, 255, 0.03);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
  min-width: 74px;
}
.d-cf-side b { font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: 0.08em; }
.d-cf-side em { font-style: normal; font-size: var(--fs-sm); color: var(--dim); }
.d-cf-side.left { animation: d-cf-win 6s ease infinite; }
.d-cf-side.right { animation: d-cf-lose 6s ease infinite; }
@keyframes d-cf-win {
  0%, 64% { border-color: var(--line); box-shadow: none; }
  70%, 90% { border-color: rgba(255, 177, 61, 0.7); box-shadow: 0 0 22px rgba(255, 177, 61, 0.3); }
  98%, 100% { border-color: var(--line); box-shadow: none; }
}
@keyframes d-cf-lose { 0%, 64% { opacity: 1; } 70%, 90% { opacity: 0.45; } 98%, 100% { opacity: 1; } }
.d-cf-stage { perspective: 520px; }
.d-cf-coin {
  position: relative;
  width: 76px;
  height: 76px;
  transform-style: preserve-3d;
  animation: d-cf-flip 6s cubic-bezier(0.2, 0.7, 0.25, 1) infinite;
  will-change: transform;
}
@keyframes d-cf-flip {
  0%, 6% { transform: translateY(0) rotateY(0); }
  30% { transform: translateY(-26px) rotateY(900deg); }
  62%, 100% { transform: translateY(0) rotateY(1800deg); }
}
.d-cf-coin .face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: var(--fs-7xl);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.d-cf-coin .a {
  background: radial-gradient(circle at 35% 30%, #ffe4b8, var(--accent) 60%, #9c5c14);
  color: #231502;
  border: var(--bw-frame) solid #ffd98f;
}
.d-cf-coin .b {
  background: radial-gradient(circle at 35% 30%, #b8fff1, var(--teal) 60%, #14705e);
  color: #04241d;
  border: var(--bw-frame) solid #9ff0e0;
  transform: rotateY(180deg);
}
.d-cf-result {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #231502;
  background: linear-gradient(115deg, #ffd24d, var(--accent2));
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  opacity: 0;
  animation: d-cf-result 6s ease infinite;
  white-space: nowrap;
}
@keyframes d-cf-result {
  0%, 66% { opacity: 0; transform: translate(-50%, 8px); }
  70%, 92% { opacity: 1; transform: translate(-50%, 0); }
  98%, 100% { opacity: 0; }
}

.d-up { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
.d-up-item { width: 78px; height: 42px; fill: var(--dim); opacity: 0.8; flex: none; }
.d-up-item.from { animation: d-up-from 7s ease infinite; }
@keyframes d-up-from { 0%, 60% { opacity: 0.8; transform: none; } 66%, 90% { opacity: 0.25; transform: scale(0.9); } 97%, 100% { opacity: 0.8; transform: none; } }
.d-up-item.to { fill: var(--r-cov); animation: d-up-to 7s ease infinite; }
@keyframes d-up-to {
  0%, 60% { opacity: 0.45; filter: none; transform: none; }
  64% { opacity: 1; filter: drop-shadow(0 0 16px rgba(235, 75, 75, 0.8)); transform: scale(1.14); }
  68%, 90% { opacity: 1; filter: drop-shadow(0 0 10px rgba(235, 75, 75, 0.55)); transform: scale(1.06); }
  97%, 100% { opacity: 0.45; filter: none; transform: none; }
}
.d-up-gauge {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, #0a0e14 0 56%, transparent 57%), #1b232f;
  border: var(--bw-hair) solid var(--line);
  display: grid;
  place-items: center;
  flex: none;
}
/* win arc as an SVG stroke: conic hard stops leave an antipodal rendering
   artifact on the ring, a dashed circle stroke does not */
.d-up-gauge .arc { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.d-up-gauge .arc circle { fill: none; stroke: rgba(74, 222, 128, 0.75); stroke-width: 10.4; stroke-dasharray: 28 100; }
.d-up-gauge b {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  color: var(--good);
}
.d-up-gauge .needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 52px;
  margin-left: -1.5px;
  border-radius: var(--radius-xs);
  background: linear-gradient(180deg, #fff, var(--accent));
  transform-origin: bottom center;
  box-shadow: 0 0 8px rgba(255, 177, 61, 0.7);
  animation: d-up-needle 7s cubic-bezier(0.18, 0.7, 0.2, 1) infinite;
  will-change: transform;
}
@keyframes d-up-needle { 0%, 6% { transform: rotate(0deg); } 60%, 100% { transform: rotate(1112deg); } }
.d-up-banner {
  position: absolute;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #052613;
  background: linear-gradient(115deg, #7bf0a8, var(--good));
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3h);
  opacity: 0;
  animation: d-up-banner 7s ease infinite;
}
@keyframes d-up-banner {
  0%, 62% { opacity: 0; transform: translate(-50%, 8px); }
  66%, 92% { opacity: 1; transform: translate(-50%, 0); }
  98%, 100% { opacity: 0; }
}

.d-cb { display: flex; align-items: stretch; justify-content: center; gap: var(--sp-3h); padding: var(--sp-4) var(--sp-3h); }
.d-cb-col {
  flex: 1;
  max-width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1h);
  padding: var(--sp-2h) var(--sp-2);
  background: rgba(255, 255, 255, 0.025);
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
  min-width: 0;
}
.d-cb-col.right { animation: d-cb-wincol 8s ease infinite; }
.d-cb-col.left { animation: d-cb-losecol 8s ease infinite; }
@keyframes d-cb-wincol {
  0%, 60% { border-color: var(--line); box-shadow: none; }
  66%, 90% { border-color: rgba(255, 210, 77, 0.75); box-shadow: 0 0 24px rgba(255, 210, 77, 0.25); }
  98%, 100% { border-color: var(--line); box-shadow: none; }
}
@keyframes d-cb-losecol { 0%, 60% { opacity: 1; } 66%, 90% { opacity: 0.5; } 98%, 100% { opacity: 1; } }
.d-cb-name { font-family: var(--font-display); font-size: var(--fs-base); letter-spacing: 0.1em; }
.d-cb-col .hit {
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  padding: var(--sp-1) 0;
  border-radius: var(--radius-sm);
  background: #10151d;
  border: var(--bw-hair) solid var(--line);
  border-left: var(--bw-frame) solid currentColor;
  opacity: 0;
}
.d-cb-col .total {
  margin-top: var(--sp-0);
  font-style: normal;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  opacity: 0;
  animation: d-cb-total 8s ease infinite;
}
@keyframes d-cb-total { 0%, 52% { opacity: 0; } 57%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.h1 { animation: d-cb-h1 8s ease infinite; }
.h2 { animation: d-cb-h2 8s ease infinite; }
.h3 { animation: d-cb-h3 8s ease infinite; }
.h4 { animation: d-cb-h4 8s ease infinite; }
.h5 { animation: d-cb-h5 8s ease infinite; }
.h6 { animation: d-cb-h6 8s ease infinite; }
@keyframes d-cb-h1 { 0%, 8% { opacity: 0; transform: scale(0.6); } 12%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d-cb-h4 { 0%, 14% { opacity: 0; transform: scale(0.6); } 18%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d-cb-h2 { 0%, 24% { opacity: 0; transform: scale(0.6); } 28%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d-cb-h5 { 0%, 30% { opacity: 0; transform: scale(0.6); } 34%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d-cb-h3 { 0%, 40% { opacity: 0; transform: scale(0.6); } 44%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d-cb-h6 { 0%, 46% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.15); } 53%, 92% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } }
.d-cb-bolt {
  align-self: center;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--accent);
  background: rgba(255, 177, 61, 0.08);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.3);
  border-radius: var(--radius-circle);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
}
.d-cb-winner {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #231502;
  background: linear-gradient(115deg, #ffd24d, var(--accent2));
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  opacity: 0;
  animation: d-cb-winner 8s ease infinite;
  white-space: nowrap;
}
@keyframes d-cb-winner {
  0%, 62% { opacity: 0; transform: translate(-50%, 8px); }
  66%, 92% { opacity: 1; transform: translate(-50%, 0); }
  98%, 100% { opacity: 0; }
}

.d-holdem { display: grid; place-items: center; }
.d-hd-felt {
  position: relative;
  width: 86%;
  height: 78%;
  border-radius: var(--radius-pill);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(255, 255, 255, 0.02) 11px 12px),
    radial-gradient(80% 90% at 50% 40%, #1b2431 0%, #131a24 55%, #0b1017 100%);
  border: 5px solid #262f3b;
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2h);
}
.d-hd-pot {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b7c6b0;
  background: rgba(0, 0, 0, 0.4);
  border: var(--bw-hair) solid rgba(255, 210, 77, 0.35);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-2h);
  animation: d-hd-pot 7s ease infinite;
}
.d-hd-pot b { color: var(--r-spe); font-size: var(--fs-base); margin-left: var(--sp-1); }
@keyframes d-hd-pot {
  0%, 63% { transform: scale(1); box-shadow: none; }
  68% { transform: scale(1.12); box-shadow: 0 0 22px rgba(255, 210, 77, 0.5); }
  74%, 100% { transform: scale(1); box-shadow: none; }
}
.d-hd-board, .d-hd-holes { display: flex; gap: var(--sp-1h); }
.d-hd-board span, .d-hd-holes span {
  width: 26px;
  height: 36px;
  clip-path: var(--clip-sm);
  background:
    repeating-linear-gradient(135deg, transparent 0 7px, rgba(255, 255, 255, 0.022) 7px 8px),
    linear-gradient(158deg, #262f3b, #161c25 62%, #10151c);
  border: var(--bw-hair) solid rgba(255, 255, 255, 0.16);
  color: #e9f0f8;
  font-weight: 700;
  font-size: var(--fs-base);
  display: grid;
  place-items: center;
  opacity: 0;
}
.d-hd-board .red, .d-hd-holes .red { color: #ff7183; }
.d-hd-board .b1 { animation: d-hd-c1 7s ease infinite; }
.d-hd-board .b2 { animation: d-hd-c2 7s ease infinite; }
.d-hd-board .b3 { animation: d-hd-c3 7s ease infinite; }
.d-hd-board .b4 { animation: d-hd-c4 7s ease infinite; }
.d-hd-board .b5 { animation: d-hd-c5 7s ease infinite; }
.d-hd-holes span:first-child { animation: d-hd-h1 7s ease infinite; }
.d-hd-holes span:last-child { animation: d-hd-h2 7s ease infinite; }
@keyframes d-hd-h1 { 0%, 6% { opacity: 0; transform: translateY(8px) rotateY(90deg); } 10%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-h2 { 0%, 9% { opacity: 0; transform: translateY(8px) rotateY(90deg); } 13%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-c1 { 0%, 22% { opacity: 0; transform: translateY(-8px) scale(0.7); } 26%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-c2 { 0%, 27% { opacity: 0; transform: translateY(-8px) scale(0.7); } 31%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-c3 { 0%, 32% { opacity: 0; transform: translateY(-8px) scale(0.7); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-c4 { 0%, 44% { opacity: 0; transform: translateY(-8px) scale(0.7); } 48%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes d-hd-c5 { 0%, 56% { opacity: 0; transform: translateY(-8px) scale(0.7); } 60%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.d-hd-ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: var(--sp-1) var(--sp-4h);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.28em;
  color: #fff;
  background: linear-gradient(100deg, #a80f28, #e2334c);
  box-shadow: 0 6px 24px rgba(226, 51, 76, 0.5);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-9deg) scale(2.4);
  animation: d-hd-ribbon 7s ease infinite;
}
@keyframes d-hd-ribbon {
  0%, 14% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(2.4); }
  17% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
  19% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.06); }
  21%, 58% { opacity: 1; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
  64%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}

.lp-feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4h);
  margin-top: var(--sp-7);
}
.lp-feat {
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
  padding: var(--sp-5) var(--sp-5);
  transition: transform var(--dur-mid), border-color var(--dur-mid);
  min-width: 0;
}
.lp-feat:hover { transform: translateY(-4px); border-color: rgba(255, 177, 61, 0.35); }
.lp-feat-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: var(--fs-5xl);
  color: var(--accent);
  background: rgba(255, 177, 61, 0.08);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.2);
  clip-path: var(--clip-sm);
  margin-bottom: var(--sp-3h);
}
.lp-feat h3 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.lp-feat p { font-size: var(--fs-md); color: var(--dim); }

.lp-legion-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--sp-5h), 4vw, 56px);
  align-items: center;
  margin-top: var(--sp-5);
}
.lp-legion .lp-h2 { text-align: left; }
.lp-legion-list { list-style: none; margin: var(--sp-5) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3h); }
.lp-legion-list li {
  position: relative;
  padding-left: var(--sp-5h);
  font-size: var(--fs-lg);
  color: var(--dim);
}
.lp-legion-list li b { color: var(--text); }
.lp-legion-list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.lp-legion-demo {
  position: relative;
  height: 400px;
  background:
    radial-gradient(90% 70% at 70% 45%, rgba(255, 122, 71, 0.06), transparent 60%),
    #0a0e14;
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  overflow: hidden;
}
.d-hvt-chip {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent);
  background: rgba(7, 9, 13, 0.8);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.3);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.d-hvt-hp {
  position: absolute;
  top: 44px;
  left: 10%;
  right: 10%;
  height: 9px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: var(--bw-hair) solid var(--line);
  z-index: 3;
  overflow: hidden;
}
.d-hvt-hp i {
  display: block;
  height: 100%;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  animation: d-hvt-hp 10s linear infinite;
}
@keyframes d-hvt-hp {
  0%, 10% { width: 92%; }
  14%, 28% { width: 76%; }
  32%, 46% { width: 61%; }
  50%, 60% { width: 42%; background: linear-gradient(90deg, #d92038, var(--accent2)); }
  62%, 80% { width: 33%; background: linear-gradient(90deg, #d92038, var(--accent2)); }
  86%, 96% { width: 12%; background: linear-gradient(90deg, #d92038, var(--accent2)); }
  99%, 100% { width: 92%; }
}
.d-hvt-scene { position: absolute; inset: 60px 0 52px; }
.d-hvt-target {
  position: absolute;
  right: 12%;
  top: 50%;
  width: 128px;
  height: 128px;
  transform: translateY(-50%);
  animation: d-hvt-target 10s ease infinite;
}
@keyframes d-hvt-target {
  0%, 13% { transform: translateY(-50%); filter: none; }
  14.5% { transform: translateY(-50%) translateX(5px); }
  16% { transform: translateY(-50%); }
  31.5% { transform: translateY(-50%) translateX(5px); }
  33% { transform: translateY(-50%); }
  49.5% { transform: translateY(-50%) translateX(7px) scale(0.98); }
  51% { transform: translateY(-50%); }
  62% { filter: drop-shadow(0 0 26px rgba(255, 60, 60, 0.7)) hue-rotate(-18deg); transform: translateY(-50%) scale(1.06); }
  70% { filter: drop-shadow(0 0 20px rgba(255, 60, 60, 0.55)) hue-rotate(-18deg); transform: translateY(-50%) scale(1.03); }
  78% { filter: none; transform: translateY(-50%); }
  83.5% { transform: translateY(-52%) translateX(9px) scale(0.95); }
  86% { transform: translateY(-50%); }
  100% { transform: translateY(-50%); filter: none; }
}
.d-hvt-target .shell {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #2a323f, #10151d);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  border: none;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6);
}
.d-hvt-target .core {
  position: absolute;
  inset: 30%;
  background: radial-gradient(circle at 40% 35%, #ffd98f, var(--accent2) 70%);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  animation: d-hvt-core 2.4s ease-in-out infinite;
}
@keyframes d-hvt-core { 50% { filter: brightness(1.45); } }
.d-hvt-target .weakring {
  position: absolute;
  inset: -16px;
  animation: lp-spin 7s linear infinite;
}
.d-hvt-target .weak {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: var(--radius-circle);
  background: var(--teal);
  box-shadow: 0 0 12px rgba(65, 224, 200, 0.9);
  animation: d-hvt-weak 2s ease-in-out infinite;
}
@keyframes d-hvt-weak { 50% { box-shadow: 0 0 22px rgba(65, 224, 200, 1); transform: scale(1.25); } }
.d-hvt-scene .operator {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 177, 61, 0.8);
  will-change: transform;
}
.d-hvt-scene .o1 { left: 10%; top: 22%; animation: d-hvt-op1 10s ease-in-out infinite; }
.d-hvt-scene .o2 { left: 7%; top: 48%; animation: d-hvt-op2 10s ease-in-out infinite; }
.d-hvt-scene .o3 { left: 12%; top: 74%; animation: d-hvt-op3 10s ease-in-out infinite; }
.d-hvt-scene .o4 { left: 18%; top: 36%; animation: d-hvt-op4 10s ease-in-out infinite; }
@keyframes d-hvt-op1 { 0%, 8% { transform: none; } 13% { transform: translate(190px, 32px); } 18% { transform: translate(30px, 8px); } 100% { transform: none; } }
@keyframes d-hvt-op2 { 0%, 26% { transform: none; } 31% { transform: translate(210px, 6px); } 36% { transform: translate(36px, -6px); } 100% { transform: none; } }
@keyframes d-hvt-op3 { 0%, 44% { transform: none; } 49% { transform: translate(196px, -38px); } 54% { transform: translate(28px, -10px); } 100% { transform: none; } }
@keyframes d-hvt-op4 { 0%, 78% { transform: none; } 83% { transform: translate(178px, 20px); } 88% { transform: translate(24px, 6px); } 100% { transform: none; } }
.d-hvt-scene .tracer {
  position: absolute;
  right: 24%;
  width: 34px;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #fff8e0, transparent);
  opacity: 0;
  z-index: 2;
}
.d-hvt-scene .t1 { top: 36%; transform: rotate(24deg); animation: d-hvt-tracer1 10s ease infinite; }
.d-hvt-scene .t2 { top: 50%; transform: rotate(-14deg); animation: d-hvt-tracer2 10s ease infinite; }
.d-hvt-scene .t3 { top: 62%; transform: rotate(38deg); animation: d-hvt-tracer3 10s ease infinite; }
.d-hvt-scene .t4 { top: 44%; transform: rotate(-30deg); animation: d-hvt-tracer4 10s ease infinite; }
@keyframes d-hvt-tracer1 { 0%, 12.5% { opacity: 0; } 14% { opacity: 1; } 16.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-hvt-tracer2 { 0%, 30.5% { opacity: 0; } 32% { opacity: 1; } 34.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-hvt-tracer3 { 0%, 48.5% { opacity: 0; } 50% { opacity: 1; } 52.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes d-hvt-tracer4 { 0%, 82.5% { opacity: 0; } 84% { opacity: 1; } 86.5% { opacity: 0; } 100% { opacity: 0; } }
.d-hvt-scene .dmg {
  position: absolute;
  right: 20%;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: #ffd9a8;
  text-shadow: 0 0 10px rgba(255, 177, 61, 0.5);
  opacity: 0;
  white-space: nowrap;
  z-index: 2;
}
.d-hvt-scene .d1 { top: 34%; animation: d-hvt-dmg1 10s ease infinite; }
.d-hvt-scene .d2 { top: 46%; animation: d-hvt-dmg2 10s ease infinite; }
.d-hvt-scene .d3 { top: 56%; font-size: var(--fs-lg); color: var(--r-spe); animation: d-hvt-dmg3 10s ease infinite; }
@keyframes d-hvt-dmg1 { 0%, 13.5% { opacity: 0; transform: none; } 15.5% { opacity: 1; } 24% { opacity: 0; transform: translateY(-26px); } 100% { opacity: 0; } }
@keyframes d-hvt-dmg2 { 0%, 31.5% { opacity: 0; transform: none; } 33.5% { opacity: 1; } 42% { opacity: 0; transform: translateY(-26px); } 100% { opacity: 0; } }
@keyframes d-hvt-dmg3 { 0%, 49.5% { opacity: 0; transform: scale(0.7); } 51.5% { opacity: 1; transform: scale(1.15); } 54% { transform: scale(1); } 62% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 0; } }
.d-hvt-scene .strike-beam {
  position: absolute;
  left: 4%;
  right: 22%;
  top: 49%;
  height: 6px;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, rgba(255, 220, 140, 0), #fff4d6 30%, #ffffff 85%, rgba(255, 255, 255, 0));
  box-shadow: 0 0 26px rgba(255, 220, 140, 0.9);
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  animation: d-hvt-strike 10s ease infinite;
  z-index: 2;
}
@keyframes d-hvt-strike {
  0%, 82% { opacity: 0; transform: scaleX(0.2); }
  83.5% { opacity: 1; transform: scaleX(1); }
  86% { opacity: 1; }
  88%, 100% { opacity: 0; transform: scaleX(1); }
}
.d-hvt-threat {
  position: absolute;
  right: 12%;
  top: 12%;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffb9c4;
  background: rgba(120, 12, 30, 0.85);
  border: var(--bw-hair) solid rgba(255, 80, 103, 0.5);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2h);
  opacity: 0;
  animation: d-hvt-threat 10s ease infinite;
  z-index: 3;
  white-space: nowrap;
}
@keyframes d-hvt-threat {
  0%, 60% { opacity: 0; transform: scale(1.6); }
  62% { opacity: 1; transform: scale(1); }
  66% { opacity: 0.55; }
  70% { opacity: 1; }
  74% { opacity: 0.55; }
  78%, 100% { opacity: 0; transform: scale(1); }
}
.d-hvt-pressure {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-2h);
  z-index: 3;
}
.d-hvt-pressure span {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
  white-space: nowrap;
}
.d-hvt-pressure .meter {
  flex: 1;
  height: 7px;
  border-radius: var(--radius-xs);
  background: rgba(255, 255, 255, 0.06);
  border: var(--bw-hair) solid var(--line);
  overflow: hidden;
  min-width: 0;
}
.d-hvt-pressure .meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #7bd8ff, #d8f3ff);
  animation: d-hvt-pressure 10s linear infinite;
}
@keyframes d-hvt-pressure {
  0% { width: 4%; }
  80% { width: 100%; }
  83% { width: 100%; filter: brightness(1.6); }
  86% { width: 8%; filter: none; }
  100% { width: 4%; }
}
.lp-fair-panel {
  margin-top: var(--sp-7);
  background: var(--surface);
  border: var(--bw-hair) solid var(--line);
  clip-path: var(--clip);
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
}
.lp-fair-hash {
  display: flex;
  align-items: center;
  gap: var(--sp-3h);
  flex-wrap: wrap;
  background: #0a0e14;
  border: var(--bw-hair) solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--sp-3h) var(--sp-4);
}
.lp-hash-text {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: clamp(var(--fs-xs), 1.6vw, var(--fs-md));
  color: var(--teal);
  word-break: break-all;
  min-width: 0;
  flex: 1;
}
.lp-hash-ok {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--good);
  border: var(--bw-hair) solid rgba(74, 222, 128, 0.4);
  border-radius: var(--radius-sm);
  padding: var(--sp-1h) var(--sp-2h);
  opacity: 0.25;
  transition: opacity var(--dur-slower);
}
.lp-hash-ok.on { opacity: 1; }
.lp-fair-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4h);
  margin-top: var(--sp-5h);
}
.lp-fair-steps > div { display: flex; gap: var(--sp-3h); align-items: flex-start; min-width: 0; }
.lp-fair-steps i {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-style: normal;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent);
  background: rgba(255, 177, 61, 0.08);
  border: var(--bw-hair) solid rgba(255, 177, 61, 0.25);
  clip-path: var(--clip-sm);
}
.lp-fair-steps p { font-size: var(--fs-md); color: var(--dim); }
.lp-fair-steps b { color: var(--text); }

.lp-final {
  position: relative;
  text-align: center;
  padding: clamp(80px, 12vw, 150px) var(--sp-5);
  margin-top: clamp(var(--sp-8), 9vw, 110px);
  background:
    radial-gradient(600px 320px at 50% 100%, rgba(255, 122, 61, 0.12), transparent 70%),
    linear-gradient(180deg, transparent, rgba(255, 177, 61, 0.03));
  border-top: var(--bw-hair) solid var(--line);
  overflow: hidden;
}
.lp-final .lp-h2 { margin-bottom: var(--sp-6); }
.lp-final .lp-trust { margin-top: var(--sp-4h); }

.lp-foot {
  border-top: var(--bw-hair) solid var(--line);
  padding: var(--sp-6) clamp(var(--sp-4), 4vw, var(--sp-7)) var(--sp-7);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.lp-foot-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; }
.lp-foot-brand b { color: var(--accent); }
.lp-foot nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.lp-foot nav a {
  color: var(--dim);
  text-decoration: none;
  font-size: var(--fs-md);
  padding: var(--sp-1h) var(--sp-2h);
}
.lp-foot nav a:hover { color: var(--text); }
.lp-foot-note { width: 100%; font-size: var(--fs-base); color: #55606e; }

html.cf-banner-on { --banner-h: calc(56px + env(safe-area-inset-top, 0px)); }

.cf-banner {
  --bnr: var(--teal);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--banner-h);
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding:
    env(safe-area-inset-top, 0px)
    max(var(--sp-4), env(safe-area-inset-right))
    0
    max(var(--sp-4), env(safe-area-inset-left));
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--bnr) 7%, transparent) 9px 10px),
    linear-gradient(90deg,
      color-mix(in srgb, var(--bnr) 20%, var(--sunken)),
      color-mix(in srgb, var(--bnr) 7%, var(--sunken)) 45%,
      var(--sunken));
  border-bottom: var(--bw-thick) solid var(--bnr);
  box-shadow: var(--shadow-md);
}
.cf-banner-warning { --bnr: var(--accent); }
.cf-banner-alert { --bnr: var(--accent2); }
.cf-banner-danger { --bnr: var(--danger); }

.cf-banner-ico {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--bnr);
  background: color-mix(in srgb, var(--bnr) 15%, transparent);
  border: var(--bw-hair) solid color-mix(in srgb, var(--bnr) 45%, transparent);
  clip-path: var(--clip-sm);
}
.cf-banner-ico .cf-ico { width: 15px; height: 15px; }

.cf-banner-tag {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bnr);
}
.cf-banner-sep {
  flex: none;
  width: var(--bw-hair);
  height: 18px;
  background: color-mix(in srgb, var(--bnr) 40%, transparent);
}

.cf-banner-msg {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cf-banner-x { flex: none; color: var(--dim); }
.cf-banner-x:hover { color: var(--text); }

.cf-banner-preview {
  position: static;
  height: auto;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  z-index: auto;
  box-shadow: none;
  border-top: var(--bw-hair) solid var(--line);
  clip-path: var(--clip-sm);
}

.sb-controls { display: flex; align-items: center; gap: var(--sp-2h); flex-wrap: wrap; }
.sb-controls input[type='text'] { flex: 1; min-width: 220px; }
.sb-preview { display: flex; flex-direction: column; }

@media (max-width: 860px) {
  html.cf-banner-on { --banner-h: calc(72px + env(safe-area-inset-top, 0px)); }
  .cf-banner { gap: var(--sp-2h); padding-left: max(var(--sp-3), env(safe-area-inset-left)); padding-right: max(var(--sp-3), env(safe-area-inset-right)); }
  .cf-banner-msg { font-size: var(--fs-sm); -webkit-line-clamp: 3; }
}

@media (max-width: 560px) {
  .cf-banner-tag,
  .cf-banner-sep { display: none; }
}
body { padding-top: var(--banner-h); }

.lp-top { top: var(--banner-h); bottom: auto; }

.icon-btn {
  background: none;
  border: var(--bw-hair) solid var(--line);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
  clip-path: var(--clip-sm);
  color: var(--dim);
  transition: color var(--dur-base), border-color var(--dur-base);
}
.icon-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); }
.icon-btn .cf-ico { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .lp-legion-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-legion-demo { height: 320px; }
  .lp-top-nav { display: none; }
}
@media (max-width: 400px) {
  /* both topbar buttons lead to /play; the ghost one is the first to go */
  .lp-top-cta .ghost { display: none; }
}
@media (max-width: 560px) {
  .lp-tagline { letter-spacing: 0.26em; gap: var(--sp-2h); }
  .lp-cta-row .lp-btn.big { width: 100%; }
  .lp-crate { width: 150px; height: 150px; }
  .lp-show-grid { grid-template-columns: minmax(0, 1fr); }
  .d-cb { gap: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .lp-embers, .lp-beam, .lp-burst, .lp-rise, .lp-rise-halo, .lp-forge .swirl { display: none; }
  .d-reel-strip { transform: translate(-1270px, -50%); }
  .d-reel-win { box-shadow: 0 0 0 2px var(--r-spe), 0 0 24px rgba(255, 210, 77, 0.5); }
  .d-hd-board span, .d-hd-holes span, .d-bj-row span, .d-cb-col .hit, .d-cb-col .total { opacity: 1; }
  .d-mines-grid .g::before { opacity: 1; transform: scale(1); }
  .d-sl-reel .strip { transform: translateY(-414px); }
  .d-sl-banner, .d-cf-result, .d-up-banner, .d-cb-winner { opacity: 1; }
  .d-up-needle, .d-up-gauge .needle { transform: rotate(1112deg); }
  .d-rl-wheel { transform: rotate(1650deg); }
  .d-rl-orbit { transform: rotate(-1260deg); }
  .d-rl-orbit .ball { transform: translateY(17px); }
  .d-rl-result { opacity: 1; }
  .d-hvt-hp i { width: 42%; }
  .d-hvt-pressure .meter i { width: 60%; }
  .lp-hash-ok { opacity: 1; }
}