/* =========================================================
   MARTIN SILES — PORTFOLIO
   Theme: Dark Cinematic iGaming / Casino Premium
   ========================================================= */

:root {
  /* Palette */
  --bg-0: #070912;
  --bg-1: #0A0E1A;
  --bg-2: #111627;
  --bg-3: #1A2035;
  --surface: rgba(20, 26, 48, 0.6);
  --surface-hi: rgba(30, 38, 64, 0.7);
  --border: rgba(255, 255, 255, 0.08);
  --border-hi: rgba(255, 209, 102, 0.35);

  /* Accents */
  --gold: #FFD166;
  --gold-deep: #E8A53A;
  --gold-glow: rgba(255, 209, 102, 0.18);
  --cyan: #00E5FF;
  --cyan-glow: rgba(0, 229, 255, 0.15);
  --magenta: #FF2E8E;
  --magenta-glow: rgba(255, 46, 142, 0.12);
  --green: #37E8A2;
  --violet: #A48CFF;

  /* Text */
  --text: #E8ECF5;
  --text-mute: #8A93AB;
  --text-dim: #5B6479;

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 0 60px rgba(255, 209, 102, 0.15);
  --shadow-cyan: 0 0 40px rgba(0, 229, 255, 0.15);

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Layout */
  --nav-h: 72px;
  --max-w: 1280px;
  --section-py: 140px;
  --radius: 16px;
  --radius-sm: 8px;
  --radius-lg: 24px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter: stable reserves space for the vertical scrollbar at all
   times (Chrome 94+, Firefox, Edge). overflow-y: scroll is the Safari-
   compatible fallback — forces the vertical scrollbar to always render so
   the viewport width never shifts when it appears/disappears mid-animation.
   Without this, any momentary document height bump (crash shake, wreckage,
   blackhole flash, images loading) caused the page to briefly narrow by
   ~15px and the crash widget to "snap" narrower mid-round. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-0);
  overflow-x: hidden;
  /* max-width: 100vw closes an edge case where an absolutely-positioned
     descendant with negative left/right could push the body past the
     viewport despite overflow-x: hidden. Combined with overflow-x hidden,
     this guarantees no element can make the page wider than the viewport. */
  max-width: 100vw;
  min-height: 100vh;
  cursor: none; /* use custom cursor */
}
/* Main + every section are also capped at 100vw with overflow-x clipped as
   a final belt-and-braces. Any child that tries to render wider than the
   viewport (long unbreakable text, rogue SVG, over-padded card) gets
   clipped right here rather than bleeding horizontally and making the page
   scroll sideways. */
main, .section {
  max-width: 100vw;
  overflow-x: clip;
}
@media (hover: none) { body { cursor: auto; } .cursor-dot, .cursor-ring { display: none; } }

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: none; }
a { color: inherit; text-decoration: none; }

/* Selection */
::selection { background: var(--gold); color: var(--bg-0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); border-radius: 10px; }

/* ---------- BACKGROUND LAYERS ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(0, 229, 255, 0.10), transparent 45%),
    radial-gradient(ellipse at 85% 20%, rgba(255, 46, 142, 0.08), transparent 40%),
    radial-gradient(ellipse at 50% 90%, rgba(255, 209, 102, 0.06), transparent 50%),
    var(--bg-0);
  z-index: -3;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: -2;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10002; /* above boot screen (10000) */
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  opacity: 0; /* hidden until mouse moves */
}
.cursor-dot.ready, .cursor-ring.ready { opacity: 1; }
/* While booting, give back the native cursor so buttons/links are usable */
body:not(.loaded),
body:not(.loaded) button,
body:not(.loaded) a,
#boot-screen, #boot-screen * { cursor: auto !important; }
#boot-screen .boot-start { cursor: pointer !important; }
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--gold);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  transition: transform 0.2s var(--ease-out), width 0.25s, height 0.25s, background 0.2s;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  background: rgba(255, 209, 102, 0.12);
  border-color: var(--gold);
}

/* ---------- BOOT SCREEN ---------- */
#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(ellipse at center, var(--bg-1) 0%, #000 100%);
  display: grid;
  place-items: center;
  transition: opacity 0.8s, visibility 0.8s;
}
#boot-screen.done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}
.boot-logo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
}
.boot-ms {
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px var(--gold-glow));
  animation: bootPulse 2s ease-in-out infinite;
}
.boot-year {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--cyan);
  letter-spacing: 0.3em;
}
.boot-status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.boot-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--green);
  animation: blink 1s ease-in-out infinite;
}
.boot-progress {
  width: min(320px, 70vw);
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.boot-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 10px var(--gold);
  animation: bootFill 1.8s ease-out forwards;
}
.boot-start {
  margin-top: 10px;
  padding: 14px 36px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  transform: translateY(10px);
  animation: bootBtnIn 0.6s 1.8s forwards;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.boot-start::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease-out);
  z-index: -1;
}
.boot-start:hover {
  color: var(--bg-0);
  box-shadow: 0 0 40px var(--gold-glow);
}
.boot-start:hover::before { transform: translateX(0); }

@keyframes bootPulse {
  0%, 100% { filter: drop-shadow(0 0 30px var(--gold-glow)); }
  50% { filter: drop-shadow(0 0 50px var(--gold)); }
}
@keyframes bootFill { to { width: 100%; } }
@keyframes bootBtnIn { to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--cyan), var(--gold), var(--magenta));
  box-shadow: 0 0 10px var(--gold);
  z-index: 999;
  transition: width 0.1s;
}

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  background: linear-gradient(180deg, rgba(7, 9, 18, 0.85) 0%, rgba(7, 9, 18, 0.6) 60%, transparent 100%);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: transform 0.3s, background 0.3s;
}
.nav.hidden { transform: translateY(-100%); }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-word-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.3s ease, filter 0.3s ease;
}
.nav-logo-word-link:hover { transform: translateY(-1px); filter: drop-shadow(0 4px 10px rgba(255, 209, 102, 0.25)); }

/* Header avatar button — Martin's photo in a circular gold-rim frame.
   Clicking opens the character card. Slightly smaller than the profile
   avatar (34px) but same mechanic. */
.nav-logo-mark {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  display: block;
  isolation: isolate;
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.nav-logo-mark:hover {
  transform: translateY(-1px) scale(1.06);
  filter: drop-shadow(0 4px 12px rgba(255, 209, 102, 0.45));
}
.nav-logo-mark:focus-visible { box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.55); }
.nav-logo-mark-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: conic-gradient(from 0deg, var(--gold), var(--magenta), var(--cyan), var(--gold)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate 5s linear infinite;
  z-index: 2;
  pointer-events: none;
}
.nav-logo-mark-img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: cover;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A2035, #0A0E1A);
  z-index: 1;
  display: block;
}
.nav-logo-word {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}
.nav-logo-word-first { color: var(--text); opacity: .9; }
.nav-logo-word-last {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}
.nav-logo-word-sep {
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold-glow);
  align-self: center;
}
@media (max-width: 640px) {
  /* Keep the MARTIN · SILES wordmark visible on mobile — just shrink it so
     it still fits alongside the nav actions. Hiding it entirely left the
     header looking like it had no text at all on phones. */
  .nav-logo-word { font-size: 11px; letter-spacing: 0.10em; gap: 3px; }
  .nav-logo-mark { width: 28px; height: 28px; }
}
@media (max-width: 360px) {
  .nav-logo-word { display: none; }
}
.nav-logo-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.4s ease-in-out infinite;
}

.nav-links {
  display: flex;
  gap: 36px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--text-mute);
  position: relative;
  transition: color 0.2s;
  padding: 4px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
  transition: width 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  transition: all 0.2s;
}
.lang-toggle .lang-flag { transition: color 0.2s; }
.lang-toggle .lang-flag.active { color: var(--gold); }
.lang-toggle:hover { border-color: var(--border-hi); }
.lang-sep { color: var(--text-dim); }

/* ---------- BUTTONS ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: all 0.25s var(--ease-out);
  overflow: hidden;
  white-space: nowrap;
}
.btn-primary {
  color: var(--bg-0);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  box-shadow: 0 4px 20px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--gold-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.btn-primary:hover::before { transform: translateX(100%); }

.btn-ghost {
  color: var(--text);
  border-color: var(--border-hi);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 209, 102, 0.05);
}

.btn-cv {
  color: var(--gold);
  border-color: var(--gold);
  padding: 8px 16px;
  font-size: 12px;
  background: rgba(255, 209, 102, 0.05);
}
.btn-cv:hover { background: var(--gold); color: var(--bg-0); }
.btn-cv svg { width: 13px; height: 13px; }

.btn-lg { padding: 16px 32px; font-size: 14px; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  margin-right: 20px;
  transition: all 0.2s;
}
.btn-text:hover { border-color: var(--gold); gap: 8px; }

/* ---------- SECTIONS BASE ---------- */
main { position: relative; z-index: 1; }

.section {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--section-py) 40px;
}
.section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 60px;
}
.section-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--cyan);
  text-transform: uppercase;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  background: linear-gradient(180deg, var(--text) 0%, var(--text-mute) 180%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-sub {
  color: var(--text-mute);
  font-size: 16px;
  max-width: 640px;
  margin: 10px 0 0;
}

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-grid {
  display: grid;
  /* minmax(0, 1fr) locks both columns to equal 50/50 tracks regardless of
     content. With plain `1fr` (which is minmax(auto, 1fr)), the crash
     widget's right column could grow when the player sidebar populated with
     long names or big stakes — squeezing the left column and shifting the
     crash frame width visibly after each round. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(55, 232, 162, 0.3);
  background: rgba(55, 232, 162, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 28px;
  width: fit-content;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.4s infinite;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
}
.hero-name-line { display: block; }
.hero-name-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 50%, var(--magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px var(--gold-glow));
}

.hero-role {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--cyan);
  margin-bottom: 28px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.hero-role-bracket { color: var(--text-dim); }

.hero-tagline {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 520px;
  margin: 0 0 36px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  width: fit-content;
}
.hero-stat {
  padding: 0 28px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  position: relative;
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; }
.hero-stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
  line-height: 1;
}
.hero-stat-num {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-stat-suffix {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--gold);
  margin-left: 2px;
  display: inline-block;
}
.hero-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-top: 6px;
}

.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: none;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.scroll-down:hover { opacity: 1; }
.scroll-down span {
  display: block;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  animation: scrollDown 1.6s var(--ease-in-out) infinite;
  opacity: 0.3;
}
.scroll-down span:nth-child(2) { animation-delay: 0.2s; opacity: 0.6; }
.scroll-down span:nth-child(3) { animation-delay: 0.4s; opacity: 1; }

@keyframes scrollDown {
  0% { transform: rotate(45deg) translate(-4px, -4px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: rotate(45deg) translate(4px, 4px); opacity: 0; }
}

/* ==========================================================
   HERO RIGHT PANEL (houses the Chicken Crash demo)
   ========================================================== */
.hero-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hero-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
  animation: blink 2s ease-in-out infinite;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.75;
  text-wrap: balance;          /* evenly distribute wrapped lines (modern browsers) */
  -webkit-text-wrap: balance;
  word-spacing: 0.04em;
}
.hero-hint .hero-hint-sep {
  display: inline-block;
  margin: 0 0.4em;
  color: var(--gold);
  opacity: 0.55;
}
.hero-hint .hero-hint-break { display: block; margin-top: 4px; opacity: 0.75; }


/* ==========================================================
   CHICKEN CRASH — live playable demo
   Replaces the old slot. Real-time curve, cash-out, history.
   ========================================================== */
.crash {
  position: relative;
  /* Explicit 100% width (not the default `auto` which can recompute from
     content) + max-width cap, so the crash widget always fills its column
     exactly regardless of internal content changes between rounds. */
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  font-family: var(--font-ui);
  transform: translateZ(0);
  /* contain: layout style isolates BOTH the layout and the style
     computation inside .crash. Any change to seed/hash text, player rows,
     wreckage, or canvas size cannot propagate up to recompute the parent
     hero-grid column widths. Combined with minmax(0, 1fr) on hero-grid
     and the explicit 100% width above, the crash frame locks to a
     constant size from round 1 onward. */
  contain: layout style;
}
/* Lock the inner frame's width too so it can't recalc from content either.
   .crash-stage has its own minmax(0, 1fr) 250px grid that handles the
   screen/sidebar split; this just pins the outer frame to its column. */
.crash-frame {
  width: 100%;
  box-sizing: border-box;
  contain: layout style;
}
.crash-stage {
  contain: layout style;
}
.crash::before {
  content: '';
  position: absolute;
  /* Keep the glow INSIDE the .crash container (inset 0) so the crash frame
     edge lines up precisely with the section's content edge. Previously we
     bled -16px horizontally, which made the crash look ~32px wider than the
     sections below on mobile — a big visual inconsistency. */
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255, 209, 102, 0.18), transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(0, 229, 255, 0.16), transparent 60%);
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
}

.crash-frame {
  position: relative;
  padding: 20px 22px 18px;
  background:
    linear-gradient(180deg, rgba(26, 32, 53, 0.9), rgba(10, 14, 26, 0.95));
  border: 1px solid rgba(255, 209, 102, 0.22);
  border-radius: 22px;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
}
.crash-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%);
  border-radius: 22px;
  pointer-events: none;
}

/* HEAD — title left, meta right (chip + mute). Flex-wraps on narrow. */
.crash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.crash-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.crash-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.28);
  color: var(--cyan);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.14em;
}
.crash-chip-dot {
  width: 6px; height: 6px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--cyan);
  animation: crashLivePulse 1.4s ease-in-out infinite;
}
@keyframes crashLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.crash-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
.crash-title-icon { width: 17px; height: 17px; display: block; flex-shrink: 0; }

.crash-mute {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 209, 102, 0.16);
  color: var(--gold);
  background: rgba(255, 209, 102, 0.06);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.crash-mute:hover { background: rgba(255, 209, 102, 0.14); }
.crash-mute.is-muted { color: var(--text-mute); border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }

/* STAGE — screen + players panel side by side (stacked on narrow).
   Sidebar is intentionally narrow (250px) because the stats footer is now
   inline pills — the game screen gets the remaining real estate. */
.crash-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 16px;
  align-items: stretch;
}

/* SCREEN */
.crash-screen {
  position: relative;
  height: 420px;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 209, 102, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(8, 12, 22, 0.98) 0%, rgba(18, 26, 48, 0.96) 60%, rgba(10, 14, 26, 0.98) 100%);
  border: 1px solid rgba(255, 209, 102, 0.14);
  border-radius: 14px;
  overflow: hidden;
  contain: paint;
}
/* Starfield background — subtle parallax twinkle */
.crash-stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 28% 48%, rgba(0,229,255,0.5), transparent),
    radial-gradient(1px 1px at 46% 18%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.3px 1.3px at 64% 62%, rgba(255,209,102,0.45), transparent),
    radial-gradient(1px 1px at 78% 26%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 88% 52%, rgba(0,229,255,0.45), transparent),
    radial-gradient(1.2px 1.2px at 18% 72%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 54% 78%, rgba(255,209,102,0.35), transparent),
    radial-gradient(1.3px 1.3px at 82% 86%, rgba(255,255,255,0.5), transparent);
  opacity: 0.7;
  animation: crashStarsTwinkle 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes crashStarsTwinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}
.crash-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
}
/* Sky — four stacked tiers, each a full-cover gradient. JS sets --alt-ground,
   --alt-mid, --alt-high, --alt-space on .crash (0-1) based on the current
   multiplier so the sky transitions from a twilight horizon at 1× through
   upper atmosphere and into deep space at 10×+. */
.crash-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #05070F;
}
.crash-sky-tier {
  position: absolute;
  inset: 0;
  transition: opacity 280ms linear;
  pointer-events: none;
}
/* Ground / low-atmosphere — warm horizon, turquoise dusk sky above */
.crash-sky-ground {
  background:
    radial-gradient(ellipse 130% 60% at 50% 108%, rgba(255, 170, 90, 0.45) 0%, rgba(255, 90, 140, 0.2) 28%, transparent 58%),
    linear-gradient(180deg, #2C4374 0%, #3B5D92 32%, #5E86B8 62%, #D7A477 92%, #F0B88A 100%);
  opacity: var(--alt-ground, 1);
}
/* Mid atmosphere — deep blue with a last sliver of horizon glow */
.crash-sky-mid {
  background:
    radial-gradient(ellipse 120% 50% at 50% 115%, rgba(255, 120, 100, 0.25) 0%, rgba(180, 90, 200, 0.12) 35%, transparent 65%),
    linear-gradient(180deg, #0A1A3A 0%, #122C58 45%, #20427C 80%, #33589A 100%);
  opacity: var(--alt-mid, 0);
}
/* Upper atmosphere — indigo, stars starting to show */
.crash-sky-high {
  background:
    radial-gradient(ellipse 100% 40% at 50% 120%, rgba(120, 80, 200, 0.2) 0%, transparent 60%),
    linear-gradient(180deg, #050714 0%, #0B0E2E 45%, #15143A 75%, #1F1A4A 100%);
  opacity: var(--alt-high, 0);
}
/* Deep space — near black with a purple nebula wash */
.crash-sky-space {
  background:
    radial-gradient(ellipse 60% 40% at 75% 28%, rgba(180, 120, 255, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 20% 60%, rgba(90, 50, 180, 0.14) 0%, transparent 60%),
    linear-gradient(180deg, #02020A 0%, #07081A 50%, #0B0820 100%);
  opacity: var(--alt-space, 0);
}
/* Crash-phase bleed — subtle red wash over whatever sky is showing */
.crash[data-phase="crashed"] .crash-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(255, 59, 92, 0.3) 0%, rgba(255, 46, 142, 0.1) 35%, transparent 65%);
  pointer-events: none;
  animation: crashSkyRed 400ms ease-out forwards;
}
@keyframes crashSkyRed {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Distant planet — sits in the upper-left area, only visible at high altitudes */
.crash-planet {
  position: absolute;
  top: 10%;
  left: 6%;
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 0;
  opacity: var(--alt-planet, 0);
  transition: opacity 500ms linear;
  filter: drop-shadow(0 0 14px rgba(179, 132, 255, 0.4));
}
.crash-planet svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: crashPlanetFloat 18s ease-in-out infinite;
}
@keyframes crashPlanetFloat {
  0%, 100% { transform: translateY(0)   rotate(0deg);    }
  50%      { transform: translateY(-4px) rotate(2deg);   }
}
/* Scrolling clouds — parallax across the sky */
.crash-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.crash-cloud {
  position: absolute;
  left: var(--x, 10%);
  top: var(--y, 70%);
  width: calc(80px * var(--s, 1));
  height: calc(28px * var(--s, 1));
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.10) 40%, transparent 70%);
  border-radius: 40px;
  filter: blur(2px);
  opacity: 0.8;
  animation: crashCloudDrift 14s linear infinite;
  animation-delay: var(--d, 0s);
}
.crash-cloud:nth-child(even) { animation-duration: 18s; }
.crash[data-phase="running"] .crash-cloud { animation-duration: 3.2s; }
.crash[data-phase="running"] .crash-cloud:nth-child(even) { animation-duration: 4.1s; }
.crash[data-phase="crashed"] .crash-cloud { animation-play-state: paused; }
/* Clouds fade as the rocket rises above the low atmosphere */
.crash-clouds { opacity: var(--alt-clouds, 1); transition: opacity 320ms linear; }
@keyframes crashCloudDrift {
  from { transform: translate3d(20vw, 0, 0); opacity: 0; }
  8%   { opacity: 0.85; }
  90%  { opacity: 0.75; }
  to   { transform: translate3d(-140%, 0, 0); opacity: 0; }
}
.crash-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Terrain — green grass ground at the bottom of the screen. Rendered inside
   crash-screen so it clips properly. Fades out as the rocket climbs past
   low altitude (crossfades with mid/high/space sky tiers). */
.crash-terrain {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  z-index: 2;
  opacity: var(--alt-ground, 1);
  transition: opacity 280ms linear;
}
.crash-terrain-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* --pad-b is the vertical offset (from screen bottom) where the rocket's
   centre rests on the pad. It's read by the JS draw() loop so the canvas
   curve starts from the exact same pixel — this keeps the rocket aligned
   with the pad regardless of viewport size.
   The rocket SVG artwork occupies roughly the top 80% of its 92px inner
   box (the lower 20% is padding below the nozzle), so the rocket's
   perceived visual bottom ends ~12px above the inner's bottom edge. To
   stop the rocket from floating visually, we subtract ~10px across all
   breakpoints so the artwork sits flush with the pad platform surface. */
.crash-screen { --pad-b: 75px; }
@media (max-width: 820px) { .crash-screen { --pad-b: 58px; } }
@media (max-width: 560px) { .crash-screen { --pad-b: 48px; } }
@media (max-width: 420px) { .crash-screen { --pad-b: 42px; } }

/* Launch tower — proper scaffolding + concrete pad SVG, anchored under the
   rocket's start position. Visible during IDLE/LOBBY/BETTING, fades out as
   soon as RUNNING starts so the rocket visibly lifts off. Scales down with
   the viewport via breakpoints so the platform always sits just below the
   rocket's flame regardless of screen height. */
.crash-launchpad {
  position: absolute;
  left: 9px;
  bottom: 20px;
  width: 90px;
  height: 70px;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
/* The pad's trench (SVG x=33 out of 90 viewBox) must align with the rocket
   at screen x=42 on every breakpoint. Formula: left = 42 - (33/90)*width.
   Bigger platforms on mobile so the concrete base extends well beyond the
   rocket body on both sides — reads as a solid pad, not a small pedestal. */
@media (max-width: 820px) {
  .crash-launchpad { left: 5px; bottom: 4px; width: 104px; height: 74px; }
}
@media (max-width: 560px) {
  .crash-launchpad { left: 9px; bottom: 0; width: 92px; height: 64px; }
}
@media (max-width: 420px) {
  .crash-launchpad { left: 13px; bottom: 0; width: 80px; height: 56px; }
}
.crash-launchpad-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.crash[data-phase="idle"] .crash-launchpad,
.crash[data-phase="lobby"] .crash-launchpad,
.crash[data-phase="waiting"] .crash-launchpad,
.crash[data-phase="betting"] .crash-launchpad {
  opacity: 1;
}

/* Rocket sprite — follows the curve tip. Centered at (left,top) via the inner translate(-50%,-50%). */
.crash-sprite {
  position: absolute;
  left: 42px;
  top: calc(100% - 44px);
  width: 0; height: 0;
  pointer-events: none;
  z-index: 4;
  transition: filter 0.25s;
}
/* The launch window is now handled purely in JS: the pad position is
   co-located with the curve's first-draw point (padL=42, padB=80 in CSS px),
   so left/top snap is zero. The tilt is interpolated frame-by-frame in
   placeSprite() over LAUNCH_MS. No CSS position transitions needed here —
   they only fought the 60 fps JS updates during flight. */
.crash-sprite-inner {
  position: absolute;
  left: 0; top: 0;
  width: 64px; height: 92px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 0.08s ease-out;
  filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.5)) drop-shadow(0 0 20px rgba(255, 149, 73, 0.28));
}
.crash-sprite-svg {
  position: relative;
  width: 64px;
  height: 92px;
  display: block;
  z-index: 2;
}
.crash-sprite-flame {
  position: absolute;
  left: 50%;
  top: 70px; /* emerges from nozzle area of the 92px-tall inner */
  width: 48px;
  height: 66px;
  transform: translateX(-50%);
  transform-origin: top center;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s;
  pointer-events: none;
}
.crash[data-phase="betting"] .crash-sprite-flame { opacity: 0.35; }
.crash[data-phase="betting"][data-bet="true"] .crash-sprite-flame { opacity: 0.6; animation: crashFlameFlicker 0.2s steps(2) infinite; }
.crash[data-phase="running"] .crash-sprite-flame { opacity: 1; animation: crashFlameFlicker 0.14s steps(2) infinite; }
.crash-flame-outer { transform-origin: 18px 8px; }
.crash-flame-inner { transform-origin: 18px 10px; }
.crash[data-phase="running"] .crash-flame-inner { animation: crashFlameInner 0.09s steps(2) infinite; }
@keyframes crashFlameFlicker {
  0%   { transform: translateX(-50%) scaleY(1)    scaleX(1);    }
  50%  { transform: translateX(-50%) scaleY(1.18) scaleX(0.92); }
  100% { transform: translateX(-50%) scaleY(0.94) scaleX(1.08); }
}
@keyframes crashFlameInner {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.2) translateY(-2px); }
}
.crash[data-phase="running"] .crash-sprite-inner {
  animation: crashRocketBob 1.2s ease-in-out infinite;
}
@keyframes crashRocketBob {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 209, 102, 0.55)) drop-shadow(0 0 18px rgba(255, 149, 73, 0.3)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.75)) drop-shadow(0 0 26px rgba(255, 149, 73, 0.45)); }
}
/* Default rocket-fall death (classic / engine): feels like a stalled rocket
   rather than a spinning top. The shape is (roughly):
     • 0–12%  — engine sputter: small shake + reddening glow, thrust cuts out
     • 12–30% — stall: nose pitches up as momentum carries it, then tips over
     • 30–60% — nose-over: slow rotation past horizontal, gravity engaging
     • 60–72% — mid-fall explosion puff (filter flash, brief scale pop)
     • 72–100% — accelerating nosedive + tumbling spin off the bottom edge
   cubic-bezier is front-loaded so the stall feels heavy, then the nosedive
   kicks in hard. Combined with the smoke trail (::before) and the
   explosion flash (::after) it reads as a real mechanical failure. */
.crash[data-phase="crashed"] .crash-sprite-inner {
  animation: crashRocketFall 1.7s cubic-bezier(0.55, 0.05, 0.72, 0.98) forwards;
  filter: drop-shadow(0 0 10px rgba(255, 59, 92, 0.65)) drop-shadow(0 0 22px rgba(255, 149, 73, 0.35));
}
/* Engine failure reuses classic rocket-fall but with a cooler red/grey glow
   (classic = generic crash orange, engine = electrical red). */
.crash[data-phase="crashed"][data-death="engine"] .crash-sprite-inner {
  filter: drop-shadow(0 0 10px rgba(255, 85, 100, 0.75)) drop-shadow(0 0 24px rgba(180, 30, 70, 0.4));
}
/* Meteor death: hide the live rocket the instant the wreckage tableau takes
   over, so we don't see a ghost rocket tumbling past the impact scene. */
.crash[data-phase="crashed"][data-death="meteor"] .crash-sprite-inner {
  animation: crashRocketVanish 200ms ease-out forwards;
}
/* Blackhole death: rocket is pulled in with a tight spiral + shrink to point. */
.crash[data-phase="crashed"][data-death="blackhole"] .crash-sprite-inner {
  animation: crashRocketSpiralIn 900ms cubic-bezier(0.65, 0, 0.9, 0.55) forwards;
  filter: drop-shadow(0 0 14px rgba(160, 120, 255, 0.7)) drop-shadow(0 0 28px rgba(90, 40, 200, 0.45));
}
@keyframes crashRocketVanish {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
}
@keyframes crashRocketFall {
  /* Engine sputter — small shake as thrust cuts out */
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1);    opacity: 1; }
  5%   { transform: translate(-51%, -52%) rotate(-4deg)  scale(1);    opacity: 1; }
  10%  { transform: translate(-49%, -48%) rotate(4deg)   scale(1);    opacity: 1; }
  /* Stall — momentum carries nose up, rocket pitches over sideways */
  22%  { transform: translate(-50%, -58%) rotate(24deg)  scale(0.98); opacity: 1; }
  32%  { transform: translate(-48%, -52%) rotate(70deg)  scale(0.96); opacity: 1; }
  /* Nose-over — gravity takes over, rotation through horizontal */
  50%  { transform: translate(-44%, -24%) rotate(160deg) scale(0.92); opacity: 0.98; }
  /* Mid-fall explosion puff — brief glow + pop */
  60%  { transform: translate(-42%, 0%)   rotate(240deg) scale(1.02); opacity: 0.95;
         filter: drop-shadow(0 0 22px rgba(255, 180, 90, 0.95)) drop-shadow(0 0 44px rgba(255, 70, 60, 0.7)); }
  68%  { transform: translate(-40%, 22%)  rotate(320deg) scale(0.86); opacity: 0.9; }
  /* Accelerating nosedive + fast spin */
  82%  { transform: translate(-36%, 78%)  rotate(480deg) scale(0.7);  opacity: 0.72; }
  100% { transform: translate(-26%, 190%) rotate(820deg) scale(0.3);  opacity: 0; }
}
@keyframes crashRocketSpiralIn {
  /* Brief stretch-toward-event-horizon then tight spiral into singularity.
     Origin of the rocket transform is (-50%,-50%) of its wrapper, so
     translate offsets pull it toward the blackhole (fixed a bit above). */
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1);    opacity: 1; }
  15%  { transform: translate(-52%, -58%) rotate(-15deg) scale(1.05); opacity: 1; }
  40%  { transform: translate(-46%, -78%) rotate(200deg) scale(0.7);  opacity: 0.95; }
  70%  { transform: translate(-48%, -95%) rotate(500deg) scale(0.35); opacity: 0.8; }
  100% { transform: translate(-50%, -108%) rotate(880deg) scale(0);   opacity: 0; }
}
.crash[data-phase="cashed"] .crash-sprite-inner {
  filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.75)) drop-shadow(0 0 24px rgba(0, 229, 255, 0.4));
}
.crash-sprite-trail {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  pointer-events: none;
}

/* Cashout badge — pinned top-center of the screen while multiplier keeps growing behind */
.crash-cashout-badge {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%) scale(0.6);
  display: none;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px 9px;
  background: linear-gradient(180deg, rgba(39, 255, 143, 0.22), rgba(10, 80, 50, 0.35));
  border: 1px solid rgba(39, 255, 143, 0.5);
  border-radius: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(220, 255, 235, 0.95);
  text-transform: uppercase;
  z-index: 5;
  box-shadow:
    0 0 0 1px rgba(39, 255, 143, 0.35) inset,
    0 10px 30px rgba(39, 255, 143, 0.35),
    0 0 20px rgba(39, 255, 143, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
}
.crash[data-cashed="true"] .crash-cashout-badge {
  display: grid;
  opacity: 1;
  animation: crashCashoutBadgeIn 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}
@keyframes crashCashoutBadgeIn {
  0%   { transform: translateX(-50%) scale(0.4) translateY(-20px); opacity: 0; }
  60%  { transform: translateX(-50%) scale(1.08) translateY(0); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}
.crash-cashout-badge-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  opacity: 0.75;
}
.crash-cashout-badge-mul {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #27FF8F;
  text-shadow: 0 0 12px rgba(39, 255, 143, 0.6);
  letter-spacing: -0.01em;
}
.crash-cashout-badge-amt {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #E8FFE8;
  letter-spacing: 0;
}

/* Sparks layer — emits small particle bursts when fake players cash out */
.crash-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.crash-spark {
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 4px;
  background: var(--sc, #27FF8F);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--sc, #27FF8F), 0 0 14px rgba(39, 255, 143, 0.6);
  transform: translate(-50%, -50%);
  animation: crashSparkFly 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes crashSparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
  80%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.3); }
}
.crash-spark-float {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: #27FF8F;
  text-shadow: 0 0 10px rgba(39, 255, 143, 0.6);
  letter-spacing: 0.02em;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  animation: crashSparkFloat 1.2s ease-out forwards;
}
@keyframes crashSparkFloat {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.8); }
  25%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

/* Skydiver ejection — fires on cashout. Stick-figure with orange parachute
   ejects from the rocket tip and floats down off-screen with a sway. */
.crash-skydivers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.crash-skydiver {
  position: absolute;
  left: 0; top: 0;
  width: 60px; height: 86px;
  transform: translate(calc(var(--sd-x0, 0px) - 50%), calc(var(--sd-y0, 0px) - 80%));
  animation: crashSkydiverJourney 2.8s cubic-bezier(0.34, 0.12, 0.5, 1) forwards;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  will-change: transform, opacity;
}
.crash-skydiver-svg {
  width: 60px;
  height: 86px;
  display: block;
  transform-origin: 30px 6px;
  animation: crashSkydiverSway 1.6s ease-in-out infinite;
}
/* Canopy unfolds from nothing in the first 0.3s */
.crash-skydiver-canopy {
  transform-origin: 30px 34px;
  animation: crashChuteOpen 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes crashChuteOpen {
  0%   { transform: scaleY(0.05) scaleX(0.55); opacity: 0; }
  45%  { transform: scaleY(0.6)  scaleX(0.85); opacity: 1; }
  80%  { transform: scaleY(1.08) scaleX(1.03); }
  100% { transform: scaleY(1)    scaleX(1);    }
}
@keyframes crashSkydiverSway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate( 6deg); }
}
@keyframes crashSkydiverJourney {
  0% {
    transform: translate(calc(var(--sd-x0, 0px) - 50%), calc(var(--sd-y0, 0px) - 80%)) scale(0.35);
    opacity: 0;
  }
  8% {
    transform: translate(calc(var(--sd-x0, 0px) - 50%), calc(var(--sd-y0, 0px) - 95%)) scale(0.55);
    opacity: 1;
  }
  35% {
    transform: translate(
      calc(var(--sd-x0, 0px) + var(--sd-drift, 0px) * 0.4 - 50%),
      calc(var(--sd-y0, 0px) + 60px)
    ) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(var(--sd-x0, 0px) + var(--sd-drift, 0px) - 50%),
      calc(var(--sd-y0, 0px) + 340px)
    ) scale(1);
    opacity: 0.95;
  }
}

/* Atmosphere — altitude-triggered parallax drifters (plane, balloon,
   satellite, UFO). One spawner per altitude tier per round, each flies a
   single horizontal pass across the screen. Pointer events off; low z so
   the rocket, curve, meteor, and wreckage all render on top. */
.crash-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  container-type: inline-size;
}
.crash-drifter {
  position: absolute;
  left: 0;
  top: var(--dy, 40%);
  display: block;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.crash-drifter svg { display: block; }

/* All drifter animations use cqw (container query width) so each sprite
   enters from one edge of the crash-screen and exits the other regardless
   of screen size. The -20cqw / 120cqw ranges guarantee off-screen bookends. */

/* Airplane — low/mid altitude, crosses fast (left → right).
   Descends visibly as rocket climbs past it (closer object = more parallax). */
.crash-drifter-plane {
  width: 82px;
  height: 30px;
  animation: crashDriftPlane 6.8s linear forwards;
}
/* Hot air balloon — mid altitude, slow drift. Moderate parallax descent. */
.crash-drifter-balloon {
  width: 54px;
  height: 74px;
  animation: crashDriftBalloon 9.5s linear forwards;
}
/* Satellite — high altitude, far from rocket so small parallax descent. */
.crash-drifter-satellite {
  width: 74px;
  height: 42px;
  animation: crashDriftSatellite 8s linear forwards;
}
/* UFO — deep space, zig-zag weave (right → left), faint teal glow. */
.crash-drifter-ufo {
  width: 78px;
  height: 46px;
  animation: crashDriftUfo 7.2s cubic-bezier(0.45, 0, 0.55, 1) forwards;
  filter: drop-shadow(0 0 10px rgba(120, 255, 220, 0.55)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.3));
}
/* SVG cloud drifter — closest layer, biggest parallax descent. */
.crash-drifter-cloud {
  width: 120px;
  height: 44px;
  animation: crashDriftCloud 9s linear forwards;
  opacity: 0.9;
}

/* Parallax descent: each drifter translates downward over its lifetime so
   the screen feels like it's scrolling upward as the rocket climbs past.
   Magnitude scales with perceived closeness — clouds fall most, UFO/satellite
   least. Horizontal bookends keep sprites fully off-screen at start/end. */
/* Rocket travels UP-RIGHT, so from the rocket's frame of reference every
   stationary sky object should drift DOWN-LEFT. All drifters enter from the
   right/top edge and exit through the left/bottom edge. */
@keyframes crashDriftCloud {
  0%   { transform: translate(120cqw, -120px); opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { transform: translate(-20cqw, 280px);  opacity: 0; }
}
@keyframes crashDriftPlane {
  0%   { transform: translate(120cqw, -90px) scaleX(-1); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate(-20cqw, 220px) scaleX(-1);  opacity: 0; }
}
@keyframes crashDriftBalloon {
  0%   { transform: translate(120cqw, -70px) rotate(2deg); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(50cqw,  48px)  rotate(-1deg);  }
  90%  { opacity: 1; }
  100% { transform: translate(-20cqw, 180px) rotate(1deg); opacity: 0; }
}
@keyframes crashDriftSatellite {
  0%   { transform: translate(120cqw, -55px) rotate(0deg) scaleX(-1); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-20cqw, 140px) rotate(3deg) scaleX(-1); opacity: 0.9; }
}
@keyframes crashDriftUfo {
  0%   { transform: translate(120cqw, -60px) scale(0.85); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: translate(80cqw,  10px)  scale(0.95); }
  55%  { transform: translate(50cqw,  70px)  scale(1);    }
  80%  { transform: translate(20cqw,  110px) scale(0.95); }
  95%  { opacity: 1; }
  100% { transform: translate(-20cqw, 160px) scale(0.9);  opacity: 0; }
}

/* UFO glow pulse on the body */
.crash-ufo-dome { animation: crashUfoDome 1.6s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes crashUfoDome {
  0%, 100% { filter: brightness(1);    }
  50%      { filter: brightness(1.25); }
}
/* Pause all drifter animations during crashed so the scene freezes */
.crash[data-phase="crashed"] .crash-drifter { animation-play-state: paused; }

/* Meteor strike — diagonal streak across the sky that impacts the rocket.
   Triggered on ~25% of crash rounds where deathType === 'meteor'. */
.crash-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.crash-meteor {
  position: absolute;
  left: 0; top: 0;
  width: 200px; height: 40px;
  /* The SVG head (rock) sits at x≈178, so the meteor "impact point" is at
     ~89% of width. We translate so that 89% lines up with the target coord,
     and rotate around that same point. */
  transform-origin: 89% 50%;
  transform:
    translate(calc(var(--mx0, 0px) - 89%), calc(var(--my0, 0px) - 50%))
    rotate(var(--mrot, 30deg));
  /* Total 300ms: 75% dive (~225ms) + 25% impact burst (~75ms). Matches the
     220ms pre-launch window in tick() so the player sees a fast streak with
     no time to cash out — meteor becomes a reflex check, not a telegraph. */
  animation: crashMeteorDive 300ms cubic-bezier(0.35, 0.0, 0.75, 0.5) forwards;
  filter:
    drop-shadow(0 0 16px rgba(255, 170, 80, 0.85))
    drop-shadow(0 0 42px rgba(255, 100, 60, 0.5));
  will-change: transform, opacity;
}
.crash-meteor-svg {
  width: 200px;
  height: 40px;
  display: block;
}
@keyframes crashMeteorDive {
  0% {
    transform:
      translate(calc(var(--mx0, 0px) - 89%), calc(var(--my0, 0px) - 50%))
      rotate(var(--mrot, 30deg))
      scale(0.9);
    opacity: 0;
  }
  10% { opacity: 1; }
  /* Fast dive from start to impact — the eased timing function accelerates
     through the middle so the streak reads as a lightning strike, not a cruise */
  75% {
    transform:
      translate(calc(var(--mx1, 0px) - 89%), calc(var(--my1, 0px) - 50%))
      rotate(var(--mrot, 30deg))
      scale(1.2);
    opacity: 1;
  }
  /* Impact burst — scale up and fade out in a single frame-feeling flash */
  100% {
    transform:
      translate(calc(var(--mx1, 0px) - 89%), calc(var(--my1, 0px) - 50%))
      rotate(var(--mrot, 30deg))
      scale(2.8);
    opacity: 0;
  }
}
/* Wreckage scene — a frozen final tableau of the meteor fused into the crashed
   rocket. Spawned at impact time and persists until the next lobby. It sits at
   the impact point on top of all other sprites so it reads as the ending frame. */
.crash-wreckage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.crash-wreckage-scene {
  position: absolute;
  width: 200px;
  height: 220px;
  /* --wx / --wy are the impact point; translate so scene centers there */
  transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px));
  animation: crashWreckSettle 2400ms linear forwards;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
}
.crash-wreckage-scene svg {
  width: 200px;
  height: 220px;
  display: block;
  overflow: visible;
}
@keyframes crashWreckSettle {
  /* Gravity-driven fall with no jumps. Y deltas between keyframes grow
     quadratically (2, 4, 7, 11, 16, 22, 29, 37 px) so the wreck visibly
     accelerates downward like a real object pulled by gravity, with no
     stalls or jitter. Rotation is linear (tumble stays constant). */
  0%   { opacity: 0;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 0px))  scale(0.82) rotate(0deg);   }
  8%   { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 0px))  scale(1.05) rotate(0.5deg); }
  18%  { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 2px))  scale(1.00) rotate(1deg);   }
  30%  { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 6px))  scale(1.00) rotate(1.6deg); }
  44%  { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 13px)) scale(1.00) rotate(2.2deg); }
  58%  { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 24px)) scale(1.00) rotate(3deg);   }
  72%  { opacity: 1;    transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 40px)) scale(1.00) rotate(3.8deg); }
  86%  { opacity: 0.98; transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 62px)) scale(1.00) rotate(4.8deg); }
  100% { opacity: 0.95; transform: translate(calc(var(--wx, 50%) - 100px), calc(var(--wy, 50%) - 110px + 92px)) scale(1.00) rotate(6deg);   }
}

/* Impact flash — a brief bright halo over the wreckage the instant it appears */
.crash-wreck-flash {
  transform-origin: 100px 110px;
  animation: crashWreckFlash 520ms ease-out forwards;
}
@keyframes crashWreckFlash {
  0%   { opacity: 0;    transform: scale(0.4); }
  20%  { opacity: 0.95; transform: scale(1.4); }
  70%  { opacity: 0.35; transform: scale(2.1); }
  100% { opacity: 0;    transform: scale(2.6); }
}

/* Smoke puffs — rising and dissipating */
.crash-wreck-smoke {
  transform-origin: 100px 110px;
  animation: crashWreckSmoke 2200ms ease-out forwards;
}
.crash-wreck-smoke.s1 { animation-delay: 0ms;   }
.crash-wreck-smoke.s2 { animation-delay: 180ms; }
.crash-wreck-smoke.s3 { animation-delay: 360ms; }
.crash-wreck-smoke.s4 { animation-delay: 560ms; }
@keyframes crashWreckSmoke {
  0%   { opacity: 0;    transform: translate(0, 0)    scale(0.35); }
  15%  { opacity: 0.75; transform: translate(-2px, -10px) scale(0.7); }
  55%  { opacity: 0.55; transform: translate(-8px, -40px) scale(1.15); }
  100% { opacity: 0;    transform: translate(-16px, -70px) scale(1.55); }
}

/* Ember sparks drifting up from the meteor core */
.crash-wreck-ember {
  transform-origin: 100px 92px;
  animation: crashWreckEmber 1600ms ease-out forwards;
}
.crash-wreck-ember.e1 { animation-delay: 100ms; }
.crash-wreck-ember.e2 { animation-delay: 280ms; }
.crash-wreck-ember.e3 { animation-delay: 460ms; }
.crash-wreck-ember.e4 { animation-delay: 640ms; }
.crash-wreck-ember.e5 { animation-delay: 820ms; }
@keyframes crashWreckEmber {
  0%   { opacity: 0;   transform: translate(0, 0)   scale(0.6); }
  20%  { opacity: 1;   transform: translate(-1px, -8px) scale(1); }
  100% { opacity: 0;   transform: translate(-14px, -60px) scale(0.25); }
}

/* Meteor core keeps a faint pulse — still cooling */
.crash-wreck-core-glow {
  transform-origin: 100px 92px;
  animation: crashWreckPulse 1400ms ease-in-out infinite;
}
@keyframes crashWreckPulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 0.85; transform: scale(1.12); }
}

/* Brief screen-shake already fires on crash — we just layer the meteor
   impact glow on top for the meteor death variant. */
.crash[data-death="meteor"][data-phase="crashed"] .crash-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255, 149, 73, 0.5), transparent 55%);
  animation: crashMeteorFlash 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 6;
}
@keyframes crashMeteorFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Blackhole death variant — a singularity materialises at the rocket tip and
   sucks the ship in with a spiral. Pre-launched ~250ms before crash (similar
   to the meteor) so there's no reaction window. The sprite is its own div
   positioned via --bhx/--bhy at the rocket tip, slightly above it. */
.crash-blackhole {
  position: absolute;
  left: 0; top: 0;
  width: 180px; height: 180px;
  /* The blackhole centre is anchored on the rocket tip, shifted up ~60px so
     the rocket visibly gets pulled upward into it. */
  transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(0);
  pointer-events: none;
  will-change: transform, opacity;
  animation: crashBlackholeBirth 900ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
  filter: drop-shadow(0 0 24px rgba(140, 80, 255, 0.7)) drop-shadow(0 0 48px rgba(80, 30, 180, 0.5));
}
.crash-blackhole-svg {
  width: 180px;
  height: 180px;
  display: block;
}
/* Accretion disk rotates while the blackhole is visible */
.crash-blackhole-disk {
  transform-origin: 90px 90px;
  animation: crashBlackholeSpin 1.2s linear infinite;
}
.crash-blackhole-disk-inner {
  transform-origin: 90px 90px;
  animation: crashBlackholeSpin 0.7s linear infinite reverse;
}
@keyframes crashBlackholeSpin {
  to { transform: rotate(360deg); }
}
@keyframes crashBlackholeBirth {
  /* Pops into existence, grows to full size, pulses, then implodes to a point */
  0%   { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(0);    opacity: 0; }
  12%  { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(0.4);  opacity: 0.9; }
  35%  { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(1);    opacity: 1; }
  70%  { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(1.08); opacity: 1; }
  /* Implosion — collapse to singularity, brief flash via filter */
  90%  { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(0.35); opacity: 1;
         filter: drop-shadow(0 0 36px rgba(200, 140, 255, 0.95)) drop-shadow(0 0 72px rgba(120, 40, 220, 0.7)); }
  100% { transform: translate(calc(var(--bhx, 50%) - 50%), calc(var(--bhy, 50%) - 50% - 60px)) scale(0);    opacity: 0; }
}
/* Purple aura flash on the screen right at the implosion */
.crash[data-death="blackhole"][data-phase="crashed"] .crash-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(170, 110, 255, 0.45), transparent 58%);
  animation: crashBlackholeFlash 0.9s ease-out forwards;
  pointer-events: none;
  z-index: 6;
}
@keyframes crashBlackholeFlash {
  0%   { opacity: 0; }
  30%  { opacity: 0; }
  60%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .crash-skydiver, .crash-meteor, .crash-blackhole { display: none; }
}

.crash-center {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 2;
  padding: 14px 28px;
}
/* Soft radial darkening behind the multi so the trajectory can't swallow it */
.crash-center::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 130px;
  background: radial-gradient(ellipse at center,
    rgba(6, 12, 20, 0.72) 0%,
    rgba(6, 12, 20, 0.42) 45%,
    transparent 72%);
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.crash-multi {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 700;
  color: var(--gold);
  text-shadow:
    0 0 8px rgba(6, 12, 20, 0.9),
    0 0 20px rgba(255, 209, 102, 0.55),
    0 0 42px rgba(255, 209, 102, 0.3);
  letter-spacing: -0.02em;
  line-height: 1;
  transition: color 0.25s, text-shadow 0.25s;
}
.crash-multi span {
  font-size: 34px;
  font-weight: 500;
  margin-left: 2px;
  opacity: 0.8;
}
.crash[data-phase="crashed"] .crash-multi {
  color: var(--magenta);
  text-shadow: 0 0 18px rgba(255, 59, 92, 0.5), 0 0 36px rgba(255, 59, 92, 0.25);
}
.crash[data-phase="cashed"] .crash-multi {
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(0, 229, 255, 0.5), 0 0 36px rgba(0, 229, 255, 0.25);
}
.crash-state {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.crash[data-phase="running"] .crash-state { color: var(--gold); }
.crash[data-phase="crashed"] .crash-state { color: var(--magenta); }
.crash[data-phase="cashed"] .crash-state { color: var(--cyan); }
.crash[data-phase="betting"] .crash-state { color: var(--text); }
.crash[data-phase="idle"] .crash-state { color: var(--gold); }
.crash[data-phase="idle"] .crash-multi { opacity: 0.4; }
/* Betting: hide the big multiplier readout so the countdown owns the center */
.crash[data-phase="betting"] .crash-center { opacity: 0; transition: opacity 0.2s; }

.crash-countdown {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  place-items: center;
  width: 100px; height: 100px;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 209, 102, 0.6);
  z-index: 3;
}
.crash-countdown.pulse {
  animation: crashCountPulse 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes crashCountPulse {
  0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.7; }
}

/* Burst on cashout */
.crash-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 4;
}
.crash-particle {
  position: absolute;
  left: 0; top: 0;
  width: 6px; height: 6px;
  background: var(--pc, #FFD166);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--pc, #FFD166);
  animation: crashParticleFly 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform: translate(-50%, -50%);
}
@keyframes crashParticleFly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.4);
  }
}

/* Screen shake on crash */
.crash.is-shake .crash-frame { animation: crashShake 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes crashShake {
  10%, 90% { transform: translate3d(-1.5px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* PLAYERS PANEL — live fake players to the right of the screen.
   Fixed max-height matches .crash-screen's 420px exactly. Without this cap the
   aside could natural-size past the screen height (state rows + head + foot
   combined), stretch the grid row, grow the page past the viewport, and
   summon the vertical scrollbar mid-crash — which the user perceived as the
   game area "suddenly becoming narrower". */
.crash-players {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 420px;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0.88), rgba(6, 10, 20, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--font-mono);
}
.crash-players-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}
.crash-players-title {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--text);
  text-transform: uppercase;
  font-weight: 700;
}
.crash-players-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 0.1em;
  font-weight: 600;
}
.crash-players-count-dot {
  width: 6px; height: 6px;
  background: #27FF8F;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(39, 255, 143, 0.75);
  animation: crashLivePulse 1.4s ease-in-out infinite;
}
.crash-players-list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 6px 4px 6px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  min-height: 0;
  /* No max-height cap on desktop — let the list flex-grow to fill ALL the
     available space between head and foot. Previously the 320 cap left a
     gap of ~29px of dead black background below the foot, which made the
     'IN FLIGHT / CASHED / BUSTED' labels look off-centre within the band. */
  scroll-behavior: smooth;
}
.crash-players-list::-webkit-scrollbar { width: 4px; }
.crash-players-list::-webkit-scrollbar-track { background: transparent; }
.crash-players-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.crash-player {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  margin-bottom: 3px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.25;
  animation: crashPlayerIn 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  /* Longer cross-fade on bg/border so waiting→ready reads as a gentle
     shift rather than a pop. opacity joins the transition so busted rows
     fade their dimming smoothly too. */
  transition: background 0.45s ease, border-color 0.45s ease, opacity 0.45s ease;
}
@keyframes crashPlayerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.crash-player-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--bg-0);
  background: var(--avc, #9AA6C2);
  letter-spacing: 0;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(10, 14, 26, 0.7);
}
.crash-player-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.crash-player-name {
  color: var(--text);
  font-weight: 600;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.03em;
}
.crash-player-stake {
  color: var(--text-mute);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  font-family: var(--font-display);
}
.crash-player-result {
  /* Stack all state spans on top of each other in the same grid cell so
     switching between states is a crossfade instead of a layout swap. */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-items: end;
  align-items: center;
  min-width: 78px;
  min-height: 30px;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.crash-player-state {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
}
/* Reveal only the state matching the row's data-status. All others stay
   layered underneath at opacity 0 — no innerHTML swap, no pop. */
.crash-player[data-status="waiting"] .crash-player-state-waiting,
.crash-player[data-status="ready"]   .crash-player-state-ready,
.crash-player[data-status="cashed"]  .crash-player-state-cashed,
.crash-player[data-status="busted"]  .crash-player-state-busted,
.crash-player[data-status="idle"]    .crash-player-state-idle,
.crash-player[data-status="pending"] .crash-player-state-pending {
  opacity: 1;
  pointer-events: auto;
}
.crash-player-result-mul {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  display: block;
  line-height: 1.1;
}
.crash-player-result-amt {
  display: block;
  font-size: 9.5px;
  color: var(--text-mute);
  letter-spacing: 0.04em;
  margin-top: 1px;
  font-family: var(--font-display);
}

/* Pending player — animated dots next to the pending row */
.crash-player-state-pending {
  color: var(--text-mute);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.2em;
}
.crash-player-state-pending::after {
  content: '···';
  animation: crashPlayerDots 1.2s steps(3, end) infinite;
}
@keyframes crashPlayerDots {
  0%   { content: '·  '; }
  33%  { content: '·· '; }
  66%  { content: '···'; }
  100% { content: '   '; }
}

/* Cashed player */
.crash-player[data-status="cashed"] {
  background: rgba(39, 255, 143, 0.07);
  border-color: rgba(39, 255, 143, 0.22);
}
.crash-player[data-status="cashed"] .crash-player-result-mul { color: #27FF8F; text-shadow: 0 0 6px rgba(39, 255, 143, 0.3); }
.crash-player[data-status="cashed"] .crash-player-result-amt { color: rgba(39, 255, 143, 0.75); }

/* Busted player */
.crash-player[data-status="busted"] {
  background: rgba(255, 59, 92, 0.05);
  border-color: rgba(255, 59, 92, 0.16);
  opacity: 0.6;
}
.crash-player[data-status="busted"] .crash-player-result-mul { color: var(--magenta); }

/* Lobby-waiting player — gold tint + soft animated dots */
.crash-player[data-status="waiting"] {
  background: rgba(255, 209, 102, 0.05);
  border-color: rgba(255, 209, 102, 0.16);
}
.crash-player-wait-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.28);
  color: var(--gold);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-mono);
}
.crash-player-wait-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  opacity: 0.55;
  animation: crashWaitDot 1.1s ease-in-out infinite;
}
.crash-player-wait-dot:nth-child(2) { animation-delay: 0.18s; }
.crash-player-wait-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes crashWaitDot {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

/* Lobby-ready player — a soft green tint that transitions in over 0.2s
   (via the base .crash-player `transition` rule). No keyframe animation so
   the switch is a smooth cross-fade of background+border, never a flash.
   The underlying DOM node is also reused across renders now (renderPlayers
   diffs instead of wiping), so the row does not get re-created when a fake
   player flips from waiting → ready. */
.crash-player[data-status="ready"] {
  background: rgba(39, 255, 143, 0.06);
  border-color: rgba(39, 255, 143, 0.18);
}
.crash-player-ready-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(39, 255, 143, 0.1);
  border: 1px solid rgba(39, 255, 143, 0.26);
  color: #27FF8F;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-mono);
}
.crash-player-ready-chip svg { flex-shrink: 0; }

/* Idle user row — faded "—" result */
.crash-player-result-idle {
  color: var(--text-dim) !important;
  text-shadow: none !important;
  opacity: 0.5;
}

/* "You" marker */
.crash-player.is-you {
  background: rgba(0, 229, 255, 0.07);
  border-color: rgba(0, 229, 255, 0.28);
}
.crash-player.is-you .crash-player-name::after {
  content: ' · YOU';
  color: var(--cyan);
  font-size: 8px;
  letter-spacing: 0.16em;
  margin-left: 4px;
}

/* Footer stats — slim inline dot-pills, transparent so the list edge stays clean */
.crash-players-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  /* Balanced vertical padding so the labels sit visually centred within
     the footer strip's black background. Previously had 8px top + 6px
     bottom which pushed the labels upward. */
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  background: transparent;
  flex-wrap: nowrap;
  min-height: 36px;
}
.crash-players-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 2px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.crash-players-stat::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255, 209, 102, 0.5);
  flex-shrink: 0;
}
.crash-players-stat.cashed::before { background: #27FF8F; box-shadow: 0 0 6px rgba(39, 255, 143, 0.5); }
.crash-players-stat.busted::before { background: var(--magenta); box-shadow: 0 0 6px rgba(255, 46, 142, 0.5); }
.crash-players-stat-label { opacity: 0.7; }
.crash-players-stat-val {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  margin-left: 2px;
}
.crash-players-stat.cashed .crash-players-stat-val { color: #27FF8F; }
.crash-players-stat.busted .crash-players-stat-val { color: var(--magenta); }

/* CONTROLS — wallet (balance + bet) / chip-row stake picker / action button */
.crash-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.crash-wallet-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.crash-wallet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 0;
}
.crash-wallet-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.crash-wallet-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crash-wallet-bet { color: var(--gold); }

/* Chip row: preset stake picker */
.crash-chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.crash-chip-stake {
  position: relative;
  padding: 9px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  user-select: none;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
}
.crash-chip-stake:hover:not(:disabled) {
  background: rgba(255, 209, 102, 0.08);
  border-color: rgba(255, 209, 102, 0.35);
  color: var(--gold);
  transform: translateY(-1px);
}
.crash-chip-stake:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.crash-chip-stake.is-active {
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.22), rgba(255, 149, 73, 0.18));
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.5) inset, 0 6px 18px rgba(255, 209, 102, 0.28);
}
.crash-chip-stake:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.crash-chip-stake[data-kind="fn"] {
  background: rgba(0, 229, 255, 0.05);
  border-color: rgba(0, 229, 255, 0.2);
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.crash-chip-stake[data-kind="fn"]:hover:not(:disabled) {
  background: rgba(0, 229, 255, 0.12);
  border-color: rgba(0, 229, 255, 0.45);
  color: var(--cyan);
}

.crash-action {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 8px 20px;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--bg-0);
  border: none;
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.2s, filter 0.2s, background 0.2s;
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.55),
    0 8px 24px rgba(255, 209, 102, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  min-height: 58px;
  text-align: center;
  line-height: 1.1;
}
.crash-action::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-120%);
  transition: transform 0.7s;
  pointer-events: none;
}
.crash-action:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.crash-action:hover:not(:disabled)::before { transform: translateX(120%); }
.crash-action:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.crash-action:disabled {
  filter: grayscale(0.55) brightness(0.72);
  cursor: not-allowed;
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* State-based action button skin */
.crash-action[data-mode="bet"] {
  background: linear-gradient(180deg, #00E5FF, #0099B2);
  color: var(--bg-0);
  box-shadow: 0 0 0 1px var(--cyan), 0 8px 24px rgba(0, 229, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.crash-action[data-mode="cashout"] {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--bg-0);
  box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(255, 209, 102, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: crashActionPulse 1s ease-in-out infinite;
}
@keyframes crashActionPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 8px 24px rgba(255, 209, 102, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
  50%      { box-shadow: 0 0 0 1px var(--gold), 0 10px 32px rgba(255, 209, 102, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}
.crash-action[data-mode="cancel"] {
  background: linear-gradient(180deg, rgba(255, 59, 92, 0.22), rgba(140, 20, 50, 0.22));
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(255, 59, 92, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none;
}
.crash-action[data-mode="waiting"],
.crash-action[data-mode="placed"] {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-mute);
  box-shadow: 0 0 0 1px var(--border), inset 0 1px 0 rgba(255,255,255,0.04);
  animation: none;
}

/* LOBBY — the ready-up call-to-action. Gold pulse echoes the ready chip. */
.crash-action[data-mode="ready-up"] {
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  color: var(--bg-0);
  box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(255, 209, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: crashActionReadyPulse 1.4s ease-in-out infinite;
}
@keyframes crashActionReadyPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 8px 22px rgba(255, 209, 102, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.42); }
  50%      { box-shadow: 0 0 0 1px var(--gold), 0 10px 34px rgba(255, 209, 102, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
}

/* Lobby-waiting action — user has readied up, waiting for the round. Steady, non-flashing. */
.crash-action[data-mode="waiting-lobby"] {
  background: rgba(255, 209, 102, 0.06);
  color: var(--gold);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: none;
}
.crash-action-label {
  font-size: 10.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.2em;
  opacity: 0.92;
  display: block;
  line-height: 1.2;
}
.crash-action-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--font-display);
  line-height: 1.1;
  display: block;
  min-height: 1em;
  visibility: visible;
}
.crash-action-val:empty { visibility: hidden; min-height: 0; display: none; }

/* IDLE state — primary orange gradient to prompt start */
.crash-action[data-mode="start"] {
  background: linear-gradient(180deg, #FFD166, #FF8A3D);
  color: var(--bg-0);
  box-shadow: 0 0 0 1px var(--gold), 0 10px 26px rgba(255, 149, 73, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: crashActionPulse 1.6s ease-in-out infinite;
}

/* HISTORY — single-row chip strip with graceful fade on overflow */
.crash-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-mono);
  min-width: 0;
}
.crash-history-label {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-mute);
  text-transform: uppercase;
  flex-shrink: 0;
}
.crash-history {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
}
.crash-chip-mul {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  animation: crashChipIn 0.4s ease-out both;
}
.crash-chip-mul.low    { color: var(--magenta); border-color: rgba(255, 46, 142, 0.3); }
.crash-chip-mul.ok     { color: var(--text); }
.crash-chip-mul.big    { color: var(--gold); border-color: rgba(255, 209, 102, 0.4); box-shadow: 0 0 10px rgba(255, 209, 102, 0.25); }
.crash-chip-mul.won    { color: var(--cyan); border-color: rgba(0, 229, 255, 0.4); background: rgba(0, 229, 255, 0.07); }
@keyframes crashChipIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* META — compact provably-fair strip */
.crash-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding: 4px 2px;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crash-meta-seed, .crash-meta-hash {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 960px) {
  .crash-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .crash-players {
    min-height: 0;
    max-height: 180px;
  }
  .crash-players-list { max-height: 120px; }
}
@media (max-width: 820px) {
  .crash-frame { padding: 16px 14px 14px; border-radius: 18px; }
  .crash-screen { height: 300px; border-radius: 12px; }
  .crash-multi { font-size: 52px; }
  .crash-multi span { font-size: 26px; }
  .crash-title { font-size: 11px; letter-spacing: 0.18em; }
  .crash-title-icon { width: 14px; height: 14px; }
  .crash-sprite-inner { width: 54px; height: 78px; }
  .crash-sprite-svg { width: 54px; height: 78px; }
  .crash-sprite-flame { width: 40px; height: 56px; top: 58px; }
  .crash-action-val { font-size: 16px; }
  .crash-action-label { font-size: 10px; letter-spacing: 0.18em; }
}
/* Phones — compact but still readable. Stack players panel beneath the screen. */
@media (max-width: 560px) {
  .crash { max-width: 100%; }
  .crash-frame { padding: 12px 12px 12px; border-radius: 16px; }
  .crash-screen { height: 260px; }
  .crash-multi { font-size: 44px; }
  .crash-multi span { font-size: 22px; }
  .crash-head { gap: 8px; margin-bottom: 10px; }
  .crash-title { font-size: 10px; letter-spacing: 0.14em; }
  .crash-title-icon { width: 13px; height: 13px; }
  .crash-chip { font-size: 8.5px; padding: 3px 7px; letter-spacing: 0.12em; }
  .crash-mute { width: 24px; height: 24px; }
  .crash-sprite-inner { width: 46px; height: 66px; }
  .crash-sprite-svg { width: 46px; height: 66px; }
  .crash-sprite-flame { width: 34px; height: 46px; top: 50px; }
  .crash-players { max-height: 160px; padding: 10px 10px 8px; }
  .crash-players-head { padding-bottom: 6px; }
  .crash-players-title { font-size: 9px; letter-spacing: 0.16em; }
  .crash-players-list { max-height: 100px; }
  .crash-player-avatar { width: 22px; height: 22px; font-size: 10px; }
  .crash-player-name { font-size: 11px; }
  .crash-player-stake { font-size: 9.5px; }
  .crash-player-result-mul { font-size: 11.5px; }
  .crash-player-result-amt { font-size: 9.5px; }
  .crash-players-foot { padding: 8px 8px; gap: 6px; min-height: 32px; }
  .crash-players-stat { padding: 4px 6px; }
  .crash-players-stat-val { font-size: 11px; }
  .crash-players-stat-label { font-size: 7.5px; letter-spacing: 0.14em; }
  .crash-controls { gap: 10px; margin-top: 10px; }
  .crash-wallet-row { gap: 8px; }
  .crash-wallet { padding: 8px 10px; border-radius: 10px; }
  .crash-wallet-label { font-size: 8.5px; letter-spacing: 0.18em; }
  .crash-wallet-val { font-size: 17px; }
  .crash-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .crash-chip-stake { font-size: 12px; padding: 9px 4px; border-radius: 9px; }
  .crash-action { min-height: 52px; padding: 6px 12px; border-radius: 10px; }
  .crash-action-label { font-size: 11px; letter-spacing: 0.14em; }
  .crash-action-val { font-size: 17px; }
  .crash-history-row { gap: 6px; margin-top: 10px; }
  .crash-history-label { font-size: 9px; letter-spacing: 0.14em; }
  .crash-history { gap: 5px; }
  .crash-chip-mul { font-size: 10px; padding: 4px 7px; }
  .crash-countdown { width: 80px; height: 80px; font-size: 44px; }
  .crash-cashout-badge { top: 12px; padding: 6px 12px 7px; gap: 6px; }
  .crash-cashout-badge-label { font-size: 8px; letter-spacing: 0.16em; }
  .crash-cashout-badge-mul { font-size: 15px; }
  .crash-cashout-badge-amt { font-size: 12px; }
  .crash-meta { font-size: 8px; margin-top: 8px; }
}
@media (max-width: 420px) {
  .crash-screen { height: 230px; }
  .crash-multi { font-size: 38px; }
  .crash-multi span { font-size: 19px; }
  .crash-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .crash-chip-stake { font-size: 11px; padding: 8px 3px; }
  .crash-wallet-val { font-size: 15px; }
  .crash-action { min-height: 48px; }
  .crash-action-val { font-size: 15px; }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 60px;
  align-items: flex-start;
}

.profile-card {
  position: relative;
  padding: 32px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.55) 0%, rgba(14, 18, 34, 0.7) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
}
.profile-card-glow {
  position: absolute;
  top: -50%; right: -30%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--gold-glow), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.profile-head {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--border);
}
/* Profile avatar — now a clickable button with Martin's photo + subtle hint
   icon. On click, opens the character card modal. */
.profile-avatar {
  position: relative;
  width: 88px; height: 88px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  display: block;
  isolation: isolate;
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.profile-avatar:hover {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(255, 209, 102, 0.35));
}
.profile-avatar:active { transform: translateY(0) scale(1.01); }
.profile-avatar:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.55);
}
.profile-avatar-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, var(--gold), var(--magenta), var(--cyan), var(--gold)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate 4s linear infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.profile-avatar-img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  object-fit: cover;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A2035, #0A0E1A);
  z-index: 1;
  display: block;
}
.profile-avatar-hint {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  color: var(--bg-0);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg-1), 0 4px 10px rgba(255, 209, 102, 0.4);
  z-index: 3;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}
.profile-avatar:hover .profile-avatar-hint,
.profile-avatar:focus-visible .profile-avatar-hint {
  opacity: 1;
  transform: scale(1);
}

.profile-meta { display: flex; flex-direction: column; gap: 4px; }
.profile-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.profile-class {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.profile-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-mute);
}

.profile-highlights {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.profile-highlights li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.profile-highlights li:first-child { border-top: 0; padding-top: 0; }
.profile-highlight-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.profile-highlight-val {
  font-family: var(--font-sans, var(--font-display));
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.45;
}
@media (max-width: 520px) {
  .profile-highlights li { grid-template-columns: 1fr; gap: 2px; }
}

.about-content {
  padding-top: 8px;
}
.about-quote {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gold);
  margin: 0 0 28px;
}
.about-quote-mark {
  color: var(--text-dim);
  font-weight: 700;
  margin: 0 4px;
}
.about-content p {
  color: var(--text-mute);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}
.badge {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  transition: all 0.2s;
}
.badge:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(255, 209, 102, 0.06);
}

/* ==========================================================
   EXPERIENCE — CAREER PATH
   ========================================================== */
.path {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.path::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40px; bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cyan), var(--gold), var(--magenta), transparent);
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--cyan-glow);
  opacity: 0.6;
}

.path-node {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  align-items: center;
  gap: 20px;
}
.path-node:nth-child(even) .path-card-wrap { grid-column: 3; }
.path-node:nth-child(even) .path-card { transform-origin: left; }
.path-node:nth-child(odd) .path-card-wrap { grid-column: 1; }
.path-node:nth-child(odd) .path-card { transform-origin: right; }

.path-center {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.path-marker {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1A2035, #0A0E1A);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px var(--gold-glow), 0 0 0 8px rgba(10, 14, 26, 0.8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
  transition: all 0.3s;
}
.path-marker::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed var(--gold);
  opacity: 0.3;
  animation: rotate 10s linear infinite;
}
.path-marker.current {
  box-shadow: 0 0 40px var(--gold), 0 0 0 8px rgba(255, 209, 102, 0.1);
}
.path-date {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  white-space: nowrap;
  /* Date sits at the SAME vertical position as the Roman-numeral marker
     (centre-aligned), pulled out to the opposite side of the card so long
     strings never overlap the card text. top: 50% + translateY(-50%)
     centres it on the marker row; the 60px marker is 30px from centre so
     the date aligns with the mid-line of the Roman numeral. */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* Odd rows: card on LEFT, date offset to the RIGHT of the marker */
.path-node:nth-child(odd) .path-date {
  left: calc(100% + 14px);
  text-align: left;
}
/* Even rows: card on RIGHT, date offset to the LEFT of the marker */
.path-node:nth-child(even) .path-date {
  right: calc(100% + 14px);
  text-align: right;
}

.path-card {
  padding: 28px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.4) 0%, rgba(14, 18, 34, 0.6) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s var(--ease-out);
  position: relative;
  overflow: hidden;
}
.path-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--gold-glow), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.path-card:hover {
  border-color: var(--border-hi);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--gold-glow);
}
.path-card:hover::before { opacity: 1; }

.path-company {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.path-company-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.01em;
}
.path-company-tag {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid rgba(0, 229, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-transform: uppercase;
}
.path-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.path-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0 0 16px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.path-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* legacy fallback */
.path-stack > span:not(.tech-chip) {
  padding: 3px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
}

/* ----------- Shared tech-chip (icon + label) ----------- */
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1;
  transition: border-color 0.2s, background 0.2s;
}
.tech-chip:hover {
  border-color: var(--gold);
  background: rgba(255, 209, 102, 0.06);
}
.tech-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.tech-chip-icon:empty { display: none; }
.tech-chip-icon + .tech-chip-label { padding-left: 0; }
.tech-chip-label { white-space: nowrap; }
.tech-chip-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
}
.tech-chip-img.invert { filter: invert(1) brightness(1.05); }
.tech-chip.badge { padding: 6px 14px 6px 8px; font-size: 11.5px; }
.tech-chip.badge .tech-chip-icon,
.tech-chip.badge .tech-chip-img { width: 14px; height: 14px; flex-basis: 14px; }

@media (max-width: 820px) {
  .path::before { left: 30px; }
  .path-node { grid-template-columns: 60px 1fr; gap: 20px; align-items: start; }
  .path-node:nth-child(even) .path-card-wrap,
  .path-node:nth-child(odd) .path-card-wrap { grid-column: 2; grid-row: 1; }
  .path-node .path-card-wrap:empty { display: none; }
  .path-center { grid-column: 1; grid-row: 1; padding-top: 8px; }
  .path-center .path-date { display: none; }
  /* Keep the date on the card instead */
  .path-card::after {
    content: attr(data-date);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--text-mute);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
  }
  .path-card:not([data-date])::after { display: none; }
}

/* ==========================================================
   TECH STACK
   ========================================================== */
.tech-filter {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.tech-filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  transition: all 0.2s;
}
.tech-filter-btn:hover { border-color: var(--border-hi); color: var(--gold); }
.tech-filter-btn.active {
  background: var(--gold);
  color: var(--bg-0);
  border-color: var(--gold);
  font-weight: 600;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.tech-card {
  position: relative;
  padding: 22px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.5) 0%, rgba(14, 18, 34, 0.5) 100%);
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
  cursor: none;
}
.tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, var(--tech-glow) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.tech-card:hover {
  transform: translateY(-4px);
  border-color: var(--tech-color);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--tech-glow);
}
.tech-card:hover::before { opacity: 0.4; }

.tech-card.legendary { --tech-color: var(--gold);    --tech-glow: rgba(255, 209, 102, 0.18); }
.tech-card.epic      { --tech-color: var(--cyan);    --tech-glow: rgba(0, 229, 255, 0.18); }
.tech-card.rare      { --tech-color: var(--text-mute); --tech-glow: rgba(120, 140, 180, 0.12); }

.tech-icon.svg-icon {
  font-size: 0;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  color: var(--tech-color);
}
.tech-icon.svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tech-icon.brand {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-icon.brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tech-icon.brand.invert img {
  filter: invert(1) brightness(1.05);
}
.tech-icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--tech-color);
  margin-bottom: 8px;
  line-height: 1;
}
.tech-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.tech-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--tech-color);
  text-transform: uppercase;
  opacity: 0.75;
}

.tech-card.hidden { display: none; }

/* ==========================================================
   SHOWCASE iGAMING
   ========================================================== */
.showcase {
  position: relative;
}
.showcase-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255, 46, 142, 0.1), transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255, 209, 102, 0.08), transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.showcase-stat {
  position: relative;
  padding: 32px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.4), rgba(14, 18, 34, 0.5));
  border: 1px solid var(--border);
  text-align: center;
  overflow: hidden;
}
.showcase-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.showcase-stat-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  letter-spacing: -0.03em;
}
.showcase-stat-percent {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  display: inline-block;
}
.showcase-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-top: 8px;
}

.showcase-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.showcase-card {
  position: relative;
  padding: 36px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.55), rgba(14, 18, 34, 0.7));
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.3s var(--ease-out);
}
.showcase-card::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, var(--gold-glow), transparent 60%);
  filter: blur(40px);
  opacity: 0.3;
  transition: opacity 0.4s;
}
.showcase-card:hover::before { opacity: 0.7; }
.showcase-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}
.showcase-card-tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 209, 102, 0.1);
  border: 1px solid rgba(255, 209, 102, 0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 18px;
}
.showcase-card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.showcase-card-desc {
  color: var(--text-mute);
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 20px;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.showcase-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.showcase-card-tags > span:not(.tech-chip) {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0, 229, 255, 0.06);
  border: 1px solid rgba(0, 229, 255, 0.15);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cyan);
}

/* ==========================================================
   ACHIEVEMENTS / CERTIFICATIONS
   ========================================================== */
.trophies {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .trophies { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .trophies { grid-template-columns: 1fr; }
}
.trophy {
  position: relative;
  padding: 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.4), rgba(14, 18, 34, 0.55));
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
}
.trophy::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-glow), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.trophy:hover { transform: translateY(-3px); border-color: var(--border-hi); }
.trophy:hover::before { opacity: 1; }

.trophy-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.trophy-icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: grid;
  place-items: center;
  color: var(--bg-0);
  font-size: 18px;
  box-shadow: 0 4px 14px var(--gold-glow);
}
.trophy-icon.svg-icon svg { width: 22px; height: 22px; display: block; color: var(--bg-0); }
.trophy-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  line-height: 1.3;
}
.trophy-meta {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.trophy-meta span { display: flex; align-items: center; gap: 4px; }
.trophy-source { color: var(--cyan); }
.trophy-hours { color: var(--gold); }

/* ==========================================================
   TESTIMONIALS
   ========================================================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.testimonial {
  position: relative;
  padding: 30px 28px 26px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.4), rgba(14, 18, 34, 0.5));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  /* Grid stretches cards to match row height — inside, use flex so the foot pins to bottom */
  display: flex;
  flex-direction: column;
}
.testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 209, 102, 0.35);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 209, 102, 0.08);
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: 6px; left: 18px;
  font-family: var(--font-display);
  font-size: 100px;
  line-height: 1;
  color: var(--gold);
  opacity: 0.15;
  pointer-events: none;
}
.testimonial-stars {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 14px;
  filter: drop-shadow(0 0 4px var(--gold-glow));
}
.testimonial blockquote {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
  flex: 1 0 auto; /* push the foot to the bottom on short testimonials */
}
.testimonial-surface {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  color: inherit;
  text-decoration: none;
}
.testimonial-linked { cursor: pointer; }
.testimonial-linked:hover .testimonial-avatar.has-photo { transform: scale(1.05); }
.testimonial-linked:hover .testimonial-linkedin { color: var(--cyan); transform: translateY(-2px); }

.testimonial-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #0A0E1A;
  background:
    radial-gradient(circle at 30% 30%, #FFE6A2 0%, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, 0.25),
    0 6px 18px -6px rgba(255, 209, 102, 0.45),
    inset 0 -6px 12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: transform 0.3s ease;
}
.testimonial-avatar.has-photo {
  background: #1a2240;
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, 0.3),
    0 8px 22px -8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 0;
}
.testimonial-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.testimonial:nth-child(3n+2) .testimonial-avatar:not(.has-photo) {
  background: radial-gradient(circle at 30% 30%, #BFF7FF 0%, var(--cyan) 45%, #0093A6 100%);
  box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25), 0 6px 18px -6px rgba(0, 229, 255, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.35);
}
.testimonial:nth-child(3n+3) .testimonial-avatar:not(.has-photo) {
  background: radial-gradient(circle at 30% 30%, #FFB2DA 0%, var(--magenta) 45%, #8A0D4B 100%);
  box-shadow: 0 0 0 2px rgba(255, 46, 142, 0.25), 0 6px 18px -6px rgba(255, 46, 142, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.35);
}
.testimonial-meta { min-width: 0; flex: 1; }
.testimonial-linkedin {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  color: var(--text-mute);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  text-decoration: none;
}
.testimonial-linkedin:hover {
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.08);
  border-color: rgba(0, 229, 255, 0.25);
}
.testimonial-name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold);
  font-size: 15px;
}
.testimonial-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  margin-top: 2px;
  text-transform: uppercase;
}

/* ==========================================================
   FEATURED GAMES
   ========================================================== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.game-card {
  position: relative;
  padding: 22px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.5), rgba(14, 18, 34, 0.7));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.game-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255, 209, 102, 0.0) 0%, rgba(255, 209, 102, 0.3) 50%, rgba(0, 229, 255, 0.0) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.game-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 209, 102, 0.25);
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, 0.7);
}
.game-card:hover::before { opacity: 1; }

.game-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.game-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-size: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 209, 102, 0.12), rgba(255, 209, 102, 0.02));
  border: 1px solid rgba(255, 209, 102, 0.2);
  box-shadow: inset 0 0 20px rgba(255, 209, 102, 0.05);
  color: var(--gold);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.game-icon svg {
  width: 40px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(255, 209, 102, 0.35));
}
.game-card:hover .game-icon {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(0, 229, 255, 0.55);
  color: var(--cyan);
}
.game-card:nth-child(3n+2) .game-icon { color: var(--cyan); border-color: rgba(0, 229, 255, 0.28); background: linear-gradient(180deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.02)); }
.game-card:nth-child(3n+2) .game-icon svg { filter: drop-shadow(0 2px 5px rgba(0, 229, 255, 0.4)); }
.game-card:nth-child(3n+3) .game-icon { color: var(--magenta); border-color: rgba(255, 46, 142, 0.28); background: linear-gradient(180deg, rgba(255, 46, 142, 0.1), rgba(255, 46, 142, 0.02)); }
.game-card:nth-child(3n+3) .game-icon svg { filter: drop-shadow(0 2px 5px rgba(255, 46, 142, 0.4)); }
.game-titles { min-width: 0; }
.game-title {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.game-studio {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
}
.game-category {
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  text-transform: uppercase;
}
.game-desc {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dim);
}
.game-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.game-tech > span:not(.tech-chip) {
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
}

/* ==========================================================
   CONTACT
   ========================================================== */
.contact-panel {
  position: relative;
  padding: 60px;
  background: linear-gradient(180deg, rgba(30, 38, 64, 0.6), rgba(14, 18, 34, 0.8));
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  overflow: hidden;
  text-align: center;
}
.contact-panel-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, var(--gold-glow), transparent 50%),
    radial-gradient(ellipse at 80% 100%, var(--cyan-glow), transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel .section-kicker { display: block; margin-bottom: 16px; }
.contact-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.contact-sub {
  color: var(--text-mute);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 40px;
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 620px;
  margin: 0 auto 40px;
  text-align: left;
}
.contact-link {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  color: var(--text);
}
.contact-link:hover {
  border-color: var(--gold);
  background: rgba(255, 209, 102, 0.04);
  transform: translateY(-2px);
}
.contact-link svg { color: var(--gold); flex-shrink: 0; }
.contact-link-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-link-val {
  font-size: 13px;
  font-weight: 500;
  word-break: break-all;
}

.contact-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  padding: 32px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

/* Konami toast removed */
.konami-toast { display: none !important; }
.footer-right a { color: var(--text); text-decoration: none; }
.footer-right a:hover { color: var(--gold); }

/* ==========================================================
   POKECARD — vertical trading-card modal
   460px-wide vertical card: header (name + HP) → art (photo over SVG
   background + rarity tag) → 3-stat row → 4 ability rows → traits footer
   → edition line. Wide enough that long tech stacks never wrap.
   Mobile: near-full-screen with outer margin for tap-to-close.
   ========================================================== */
.pokecard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 7, 14, 0.78);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out);
}
.pokecard-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.pokecard {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  padding: 18px 18px 14px;
  border-radius: 22px;
  background:
    linear-gradient(165deg, rgba(48, 38, 18, 0.92) 0%, rgba(22, 16, 8, 0.96) 55%, rgba(10, 14, 26, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 209, 102, 0.35),
    0 24px 80px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(255, 209, 102, 0.18);
  color: var(--text);
  font-family: var(--font-ui);
  overflow-y: auto;
  overflow-x: hidden;
  transform: scale(0.9) translateY(14px) rotateX(4deg);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1.2, 0.36, 1),
              opacity 0.3s var(--ease-out);
  transform-style: preserve-3d;
  perspective: 900px;
  isolation: isolate;
}
.pokecard-backdrop.open .pokecard {
  opacity: 1;
  transform: scale(1) translateY(0) rotateX(0);
}
/* Double-gold-rim for depth */
.pokecard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, #FFE6A3 0%, #FFD166 35%, #8E6114 70%, #FFD166 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.pokecard-holo {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 30%),
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 209, 102, 0.06) 18%,
    rgba(0, 229, 255, 0.05) 36%,
    transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
  z-index: 1;
}

.pokecard-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(8, 12, 20, 0.85);
  border: 1px solid rgba(255, 209, 102, 0.45);
  color: var(--gold);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.pokecard-close:hover {
  transform: rotate(90deg) scale(1.05);
  background: rgba(255, 209, 102, 0.18);
  border-color: var(--gold);
}

.pokecard-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 42px 10px 4px;
}
.pokecard-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pokecard-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.1;
}
.pokecard-role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}
.pokecard-hp {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  background: linear-gradient(180deg, rgba(255, 46, 142, 0.22), rgba(255, 46, 142, 0.08));
  border: 1px solid rgba(255, 46, 142, 0.5);
  border-radius: 999px;
  flex-shrink: 0;
  margin-top: 3px;
}
.pokecard-hp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--magenta);
  letter-spacing: 0.18em;
}
.pokecard-hp-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #FFB3D0;
  line-height: 1;
}

.pokecard-art {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 209, 102, 0.38);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.5);
  background: #0A0E1A;
  margin-bottom: 12px;
}
.pokecard-art-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}
.pokecard-art-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  z-index: 1;
  filter: contrast(1.04) saturate(1.05);
  mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0,0,0,0.85) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, rgba(0,0,0,0.85) 100%);
}
.pokecard-rarity {
  position: absolute;
  bottom: 8px; left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.95), rgba(232, 165, 58, 0.95));
  color: #1A1204;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.4);
  white-space: nowrap;
}
.pokecard-rarity-star { display: inline-flex; color: #1A1204; }

.pokecard-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 4px;
  background: rgba(6, 10, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 12px;
}
.pokecard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pokecard-stat + .pokecard-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.pokecard-stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pokecard-stat-plus {
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--gold);
  font-size: 18px;
  font-weight: 700;
  margin-left: 1px;
}
.pokecard-stat-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.pokecard-moves {
  position: relative;
  z-index: 2;
  margin-bottom: 12px;
}
.pokecard-moves-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-left: 2px;
}
.pokecard-moves-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pokecard-move {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  background: rgba(20, 26, 48, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 9px;
}
.pokecard-move-type {
  display: inline-block;
  padding: 3px 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  border-radius: 5px;
  border: 1px solid;
  text-transform: uppercase;
}
.pokecard-move-type-front { color: #FFD166; border-color: rgba(255, 209, 102, 0.45); background: rgba(255, 209, 102, 0.1); }
.pokecard-move-type-back  { color: #00E5FF; border-color: rgba(0, 229, 255, 0.45);    background: rgba(0, 229, 255, 0.1); }
.pokecard-move-type-cloud { color: #A48CFF; border-color: rgba(164, 140, 255, 0.45);  background: rgba(164, 140, 255, 0.1); }
.pokecard-move-type-data  { color: #FF2E8E; border-color: rgba(255, 46, 142, 0.45);   background: rgba(255, 46, 142, 0.1); }
.pokecard-move-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pokecard-footer {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.pokecard-trait {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.pokecard-edition {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  padding: 6px 2px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* Mobile (≤520px): near-full-screen modal, card fills the viewport
   with ~10px margin on each side. Body proportions slightly reduced. */
@media (max-width: 520px) {
  .pokecard-backdrop { padding: 14px; }
  .pokecard {
    width: 100%;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    padding: 16px 14px 12px;
  }
  .pokecard-header { padding-right: 44px; padding-bottom: 8px; }
  .pokecard-name { font-size: 20px; }
  .pokecard-role { font-size: 9.5px; }
  .pokecard-hp { padding: 3px 9px; }
  .pokecard-hp-val { font-size: 14px; }
  .pokecard-art { aspect-ratio: 5 / 4.2; margin-bottom: 10px; }
  .pokecard-stats { margin-bottom: 10px; padding: 8px 4px; }
  .pokecard-stat-num { font-size: 22px; }
  .pokecard-move { grid-template-columns: 62px minmax(0, 1fr); padding: 7px 10px; gap: 8px; }
  .pokecard-move-name { font-size: 11px; }
  .pokecard-close { top: 10px; right: 10px; width: 32px; height: 32px; }
}
@media (max-width: 360px) {
  .pokecard-backdrop { padding: 10px; }
  .pokecard { padding: 14px 12px 10px; border-radius: 18px; }
  .pokecard-name { font-size: 18px; }
  .pokecard-move { grid-template-columns: 58px minmax(0, 1fr); gap: 7px; }
  .pokecard-move-name { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pokecard { transition: opacity 0.18s ease; transform: none; }
  .pokecard-backdrop.open .pokecard { transform: none; }
  .pokecard-holo { display: none; }
}

/* ==========================================================
   REVEAL ANIMATIONS
   ========================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal][data-reveal-delay="1"].visible { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="2"].visible { transition-delay: 0.2s; }
[data-reveal][data-reveal-delay="3"].visible { transition-delay: 0.3s; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  /* CRITICAL: minmax(0, 1fr) not plain 1fr. Plain 1fr is minmax(auto, 1fr)
     where auto == min-content of the widest cell child, and the crash
     widget's min-content (wallet row, chip grid, player sidebar) was ~520px
     — blowing the grid column out past the viewport and overflowing the
     hero-left + hero-right + crash all the way off-screen right. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-name { font-size: clamp(48px, 14vw, 88px); }
  .hero-left, .hero-right { min-width: 0; }
  /* Centre the hero content on mobile — on a single-column layout the bio
     tag + name + role + tagline + CTAs were all left-hugging which felt
     visually displaced. Centring matches the rest of the sections below
     and the crash widget that naturally centres in its column. */
  .hero-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-name { align-items: center; }
  .hero-role { justify-content: center; }
  .hero-tagline { margin-left: auto; margin-right: auto; }
  .hero-ctas { justify-content: center; width: 100%; }
  .hero-stats { justify-self: center; }
  /* Section heads also centred on mobile for uniform vertical rhythm. */
  .section-head { text-align: center; align-items: center; }
  .section-sub { margin-left: auto; margin-right: auto; }

  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-cards { grid-template-columns: minmax(0, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-links { grid-template-columns: minmax(0, 1fr); }
  /* The crash widget's own children must also accept 0 min-width so they
     can shrink with the parent column instead of forcing it to grow. */
  .crash, .crash-frame { min-width: 0; max-width: 100%; }
}

@media (max-width: 640px) {
  :root { --section-py: 80px; --nav-h: 60px; }
  .nav { padding: 0 16px; }
  .nav-actions { gap: 10px; }
  .btn-cv span { display: none; }

  /* Sections get the same 14px gutter. The hero keeps its original child
     layout (which was working) — the aggressive reset only targets sections
     BELOW the hero, because that's where the narrowing was happening. */
  .section { padding: var(--section-py) 14px; width: 100%; box-sizing: border-box; }
  #about > *,
  #experience > *,
  #games > *,
  #tech > *,
  #showcase > *,
  #achievements > *,
  #testimonials > *,
  #contact > * {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }
  .about-grid,
  .about-grid > *,
  .games-grid,
  .tech-grid,
  .testimonials-grid,
  .showcase-grid,
  .showcase-cards,
  .cert-grid,
  .contact-links,
  .path,
  .path-node,
  .profile-card,
  .about-content,
  .contact-panel {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .hero-stat { padding: 0 14px; }
  .hero-stat-num, .hero-stat-suffix { font-size: 28px; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1; justify-content: center; }

  /* Reduce card paddings so the inner content has more breathing room on
     narrow phones without leaving huge wasted margins. */
  .profile-card { padding: 18px; }
  .about-quote { font-size: 22px; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .testimonials-grid { grid-template-columns: minmax(0, 1fr); }
  .games-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-stat { padding: 18px 16px; }
  .showcase-stat-num { font-size: 36px; }
  .showcase-card { padding: 20px; }
  .contact-panel { padding: 24px 16px; }
  .footer { padding: 24px 14px; flex-direction: column; text-align: center; }
  .path::before { left: 22px; }
  .path-node { grid-template-columns: 44px 1fr; gap: 14px; }
  .path-marker { width: 44px; height: 44px; font-size: 15px; }
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .cursor-dot, .cursor-ring { display: none; }
  body { cursor: auto; }
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Light theme override (optional) */
[data-theme="light"] {
  --bg-0: #F7F6F1;
  --bg-1: #EDEBE2;
  --text: #101625;
  --text-mute: #4B5676;
  --text-dim: #8A93AB;
  --border: rgba(10, 14, 26, 0.08);
  --surface: rgba(255, 255, 255, 0.6);
}