/* ═══════════════════════════════════════════════════════════════════════════
   SYNTAX SURVIVORS — Main Stylesheet
   Premium Dark Terminal UI · Code Aesthetic · Roguelite Grade
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

@font-face {
  font-family: "Road Rage";
  src: url("assets/fonts/Road_Rage.otf") format("opentype");
  font-display: swap;
}

/* ─── Tokens ────────────────────────────────────────────────────────────────*/
:root {
  /* Palette */
  --c-base:         #050609;
  --c-surface:      #0c0e18;
  --c-surface-2:    #121524;
  --c-surface-3:    #191d2e;
  --c-surface-4:    #1f2438;
  --c-border:       rgba(255,255,255,0.07);
  --c-border-2:     rgba(255,255,255,0.13);
  --c-border-3:     rgba(255,255,255,0.22);
  --c-text:         #e8e3d5;
  --c-text-2:       #a09baf;
  --c-text-3:       #6a6478;

  /* Accents */
  --c-signal:       #f4db00;   /* primary CTA / XP      */
  --c-signal-dim:   rgba(244,219,0,0.18);
  --c-green:        #58ffb4;   /* HP / positive          */
  --c-green-dim:    rgba(88,255,180,0.14);
  --c-cyan:         #5ce9ff;   /* info / kills           */
  --c-cyan-dim:     rgba(92,233,255,0.12);
  --c-red:          #ff4a2f;   /* danger / death         */
  --c-red-dim:      rgba(255,74,47,0.14);
  --c-purple:       #c063ff;

  /* Fonts */
  --f-ui:    "Montserrat","Segoe UI",system-ui,sans-serif;
  --f-mono:  "Cascadia Code","Consolas",monospace;
  --f-rage:  "Road Rage",Impact,sans-serif;

  /* Radii */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   22px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  /* Shadows */
  --sh-sm:  0 2px 10px rgba(0,0,0,0.45);
  --sh-md:  0 8px 28px rgba(0,0,0,0.55);
  --sh-lg:  0 18px 56px rgba(0,0,0,0.65);
  --sh-xl:  0 32px 80px rgba(0,0,0,0.75);
  --sh-glow-y:  0 0 22px rgba(244,219,0,0.28);
  --sh-glow-g:  0 0 22px rgba(88,255,180,0.22);

  /* Transitions */
  --t-fast:   100ms ease;
  --t-mid:    180ms ease;
  --t-panel:  280ms cubic-bezier(0.2,0.9,0.2,1);
}

/* ─── Reset ─────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }

/* ─── Body ──────────────────────────────────────────────────────────────────*/
body {
  background:
    radial-gradient(ellipse 900px 600px at 10% 8%,  rgba(244,219,0,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 750px 500px at 88% 12%, rgba(255,74,47,0.10) 0%, transparent 52%),
    radial-gradient(ellipse 600px 450px at 50% 98%, rgba(88,255,180,0.07) 0%, transparent 48%),
    linear-gradient(175deg, #100f1e 0%, #060508 100%);
  color: var(--c-text);
  font-family: var(--f-ui);
  font-size: 14px;
  line-height: 1.55;
  display: grid;
  place-items: stretch;
}

/* Perspective grid scanline */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* Vignette */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9001;
  background: radial-gradient(ellipse at center,
    transparent 55%, rgba(0,0,0,0.55) 100%);
}

/* ─── Film Grain ────────────────────────────────────────────────────────────*/
#grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9002;
  opacity: 0.038;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ─── Wrap + Canvas ─────────────────────────────────────────────────────────*/
#wrap {
  position: relative;
  width: 100vw; height: 100dvh;
  padding: clamp(8px, 1vw, 16px);
}

canvas {
  display: block; width: 100%; height: 100%;
  border-radius: clamp(14px, 1.6vw, 24px);
  background: linear-gradient(180deg, #060608 0%, #0a0b10 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    var(--sh-xl),
    inset 0 0 0 1px rgba(255,255,255,0.03),
    inset 0 0 120px rgba(0,0,0,0.38),
    0 0 80px rgba(0,0,0,0.6);
}
canvas.run-fadein {
  animation: canvasRunIn 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes canvasRunIn {
  from { opacity: 0; filter: brightness(2.2) saturate(0); }
  to   { opacity: 1; filter: brightness(1) saturate(1); }
}

/* ─── Screen Layers ─────────────────────────────────────────────────────────*/
.screen-layer {
  position: absolute; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: clamp(12px, 2vw, 28px);
  background: rgba(4,4,8,0.42);
  opacity: 0;
  transform: translateY(20px) scale(0.984);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.screen-open {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}


.hidden { display: none !important; }

/* ─── Title Stage (within #start) ──────────────────────────────────────────*/
.title-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}
.title-stage.stage-open { opacity: 1; pointer-events: auto; }

.intro-company-screen,
.intro-developed-screen {
  background: var(--c-base);
  z-index: 5;
}
body.intro-white .intro-company-screen,
body.intro-white .intro-developed-screen { background: #f0ede6; }

/* ─── Panel Base ────────────────────────────────────────────────────────────*/
.panel {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.035) 0%, transparent 28%),
    linear-gradient(180deg, #161926 0%, #0e1019 100%);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-xl);
  box-shadow:
    var(--sh-xl),
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 100px rgba(0,0,0,0.8),
    0 0 120px rgba(244,219,0,0.04),
    0 0 60px rgba(88,255,180,0.02);
  overflow: hidden;
  animation: panelIn 320ms var(--t-panel) both;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(32px) scale(0.952); filter: brightness(1.4); }
  to   { opacity: 1; transform: none; filter: brightness(1); }
}

/* Accent stripe */
.panel::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--c-signal) 0%, var(--c-green) 42%, var(--c-cyan) 72%, transparent 100%);
  opacity: 1;
}

/* Glass sheen */
.panel::after {
  content: "";
  position: absolute; inset: 2px 0 0;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 22%);
}

/* Sizes */
.level-panel   { width: min(920px, 100%); }
.meta-panel    { width: min(900px, 100%); max-height: 92dvh; display: flex; flex-direction: column; }
.options-panel { width: min(820px, 100%); max-height: 92dvh; display: flex; flex-direction: column; }
.survivor-panel{ width: min(940px,100%); max-height: 94dvh; display: flex; flex-direction: column; }

/* ─── Panel Components ──────────────────────────────────────────────────────*/
.wc {
  display: flex; gap: 7px;
  padding: 18px 22px 0;
  flex-shrink: 0;
}
.wc span {
  width: 12px; height: 12px; border-radius: var(--r-pill);
}
.wc span:nth-child(1) { background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,0.5); }
.wc span:nth-child(2) { background: #febc2e; box-shadow: 0 0 6px rgba(254,188,46,0.5); }
.wc span:nth-child(3) { background: #28c840; box-shadow: 0 0 6px rgba(40,200,64,0.4); }

.panel-header {
  padding: 18px 24px 0;
  display: flex; align-items: flex-start;
  justify-content: space-between;
  gap: 16px; flex-shrink: 0;
}

.panel-kicker {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-signal);
  margin-bottom: 5px;
}

.panel-title {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 5px;
  line-height: 1.15;
}

.panel-sub {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.5;
  max-width: 560px;
}

.panel-actions {
  display: grid; gap: 10px;
  padding: 18px 24px 24px;
  flex-shrink: 0;
}

.meta-actions { grid-template-columns: 1fr 1fr; }

/* Level-up panel layout */
.level-panel .wc          { padding: 16px 22px 0; }
.level-panel .panel-kicker { padding: 14px 24px 0; }
.level-panel .panel-title  { padding: 2px 24px 0; font-size: 1.5rem; }
.level-panel .panel-sub    { padding: 2px 24px 10px; }
.level-panel .choices      { padding: 0 24px 24px; }

/* ─── Pause Strip ───────────────────────────────────────────────────────────*/
.pause-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 24;
  background: linear-gradient(180deg, rgba(3,3,8,0.97) 0%, rgba(6,6,14,0.92) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 32px rgba(0,0,0,0.75);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 200ms ease, transform 260ms cubic-bezier(0.18,0.89,0.32,1.08);
  pointer-events: none;
}
.pause-strip.screen-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pause-strip-inner {
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 16px;
}

.pause-strip-kicker {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-text-3); white-space: nowrap; flex-shrink: 0;
}

.pause-strip-btns {
  display: flex; gap: 6px; align-items: center; flex: 1;
}

.psbtn {
  padding: 6px 16px;
  border-radius: var(--r-sm);
  font-family: var(--f-ui); font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c-border-2);
  color: var(--c-text);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-mid), border-color var(--t-mid), transform var(--t-fast);
}
.psbtn:hover { background: rgba(255,255,255,0.11); border-color: var(--c-border-3); transform: translateY(-1px); }
.psbtn:active { transform: translateY(1px); }

.psbtn-primary {
  background: linear-gradient(140deg, #ffe800 0%, #d9aa00 100%);
  border-color: rgba(244,219,0,0.5);
  color: #0a0900;
  box-shadow: 0 4px 16px rgba(244,219,0,0.22);
}
.psbtn-primary:hover { filter: brightness(1.08); background: linear-gradient(140deg, #fff200 0%, #e8be00 100%); }

.psbtn-danger {
  background: rgba(255,74,47,0.08);
  border-color: rgba(255,74,47,0.25);
  color: rgba(255,130,110,0.9);
}
.psbtn-danger:hover { background: rgba(255,74,47,0.15); border-color: rgba(255,74,47,0.45); }

/* ─── Buttons ───────────────────────────────────────────────────────────────*/
button {
  appearance: none;
  cursor: pointer;
  font-family: var(--f-ui);
  font-size: inherit;
  border: none;
  border-radius: var(--r-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}

button:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

button:focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 3px;
}

/* Primary CTA */
.menu-action {
  position: relative;
  display: block; width: 100%;
  padding: 15px 18px;
  text-align: left;
  background: linear-gradient(140deg, #f6e200 0%, #e8c800 60%, #d4b400 100%);
  color: #0a0900;
  box-shadow: 0 6px 24px rgba(244,219,0,0.25), inset 0 1px 0 rgba(255,255,255,0.18);
  border: 1px solid rgba(244,219,0,0.4);
  overflow: hidden;
}

.menu-action::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 40%);
  pointer-events: none;
}

.menu-action:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.006);
  box-shadow: 0 10px 32px rgba(244,219,0,0.38), inset 0 1px 0 rgba(255,255,255,0.22);
  filter: brightness(1.06);
}
.menu-action:active:not(:disabled) { transform: translateY(1px) scale(0.997); }

/* Secondary ghost */
.menu-action.secondary {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 50%),
    rgba(18,21,36,0.9);
  color: var(--c-text);
  border: 1px solid var(--c-border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.menu-action.secondary::before { display: none; }
.menu-action.secondary:hover:not(:disabled) {
  border-color: var(--c-border-3);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 50%),
    rgba(24,28,44,0.95);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

/* Danger exit */
.menu-action.exit-btn {
  background: rgba(255,74,47,0.06);
  border-color: rgba(255,74,47,0.22);
  color: rgba(255,140,120,0.9);
  box-shadow: none;
}
.menu-action.exit-btn::before { display: none; }
.menu-action.exit-btn:hover:not(:disabled) {
  background: rgba(255,74,47,0.12);
  border-color: rgba(255,74,47,0.44);
  transform: translateY(-2px);
}

.compact-action { width: auto; padding: 10px 14px; white-space: nowrap; }

/* Label + note */
.action-label {
  display: block;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em;
  position: relative; z-index: 1;
}
.action-note {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px; margin-top: 3px;
  position: relative; z-index: 1;
  color: rgba(10,9,0,0.62);
}
.menu-action.secondary .action-note { color: var(--c-text-3); }
.menu-action.exit-btn .action-note   { color: rgba(255,140,120,0.5); }

/* ─── Tags & Pills ──────────────────────────────────────────────────────────*/
.tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--c-green-dim);
  border: 1px solid rgba(88,255,180,0.2);
  color: var(--c-green);
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: 0.04em;
  white-space: nowrap;
}

.wallet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: rgba(244,219,0,0.08);
  border: 1px solid rgba(244,219,0,0.26);
  color: var(--c-signal);
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 0 18px rgba(244,219,0,0.1);
}

/* ─── Main Menu ─────────────────────────────────────────────────────────────*/
.menu-shell { align-items: center; justify-content: center; }

.menu-layout {
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(300px, 420px);
  gap: clamp(32px, 5vw, 88px);
  width: min(1020px, 100%);
  align-items: center;
  background: radial-gradient(ellipse 110% 100% at 50% 50%, rgba(4,4,10,0.72) 40%, transparent 100%);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 4vw, 56px);
}

.menu-brand-col {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start;
}

/* Ambient glow aura behind brand column */
.menu-brand-col::before {
  content: "";
  position: absolute;
  inset: -80px -60px;
  background:
    radial-gradient(ellipse 420px 320px at 40% 40%, rgba(244,219,0,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 300px 260px at 70% 70%, rgba(88,255,180,0.05) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
  animation: brandAura 8s ease-in-out infinite alternate;
}
.menu-brand-col > * { position: relative; z-index: 1; }

@keyframes brandAura {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.1) translateY(-10px); }
}

.hero-logo {
  width: min(100%, 460px); height: auto;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.6)) drop-shadow(0 0 40px rgba(244,219,0,0.1));
  animation: logoFloat 9s ease-in-out infinite;
}

/* Restyle brand-title as a small system-kicker instead of big heading */
.brand-title {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-signal);
  opacity: 0.6;
}

.brand-sub {
  font-size: 13px; color: var(--c-text-2);
  line-height: 1.6; max-width: 400px;
  font-family: var(--f-mono);
  border-left: 2px solid rgba(244,219,0,0.25);
  padding-left: 12px;
}

.menu-nav-col { display: grid; gap: 10px; }

/* ─── Menu nav button stagger ────────────────────────────────────────────────*/
@keyframes btnSlideIn {
  from { opacity: 0; transform: translateX(30px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.menu-nav-col .menu-action {
  animation: btnSlideIn 420ms var(--t-panel) both;
}
.menu-nav-col .menu-action:nth-child(1) { animation-delay: 60ms;  }
.menu-nav-col .menu-action:nth-child(2) { animation-delay: 130ms; }
.menu-nav-col .menu-action:nth-child(3) { animation-delay: 200ms; }
.menu-nav-col .menu-action:nth-child(4) { animation-delay: 270ms; }

/* New Run: dominant primary CTA */
#btnStart {
  padding: 20px 22px;
  background: linear-gradient(140deg, #ffe800 0%, #f4c600 55%, #d9aa00 100%);
  box-shadow:
    0 8px 36px rgba(244,219,0,0.38),
    0 0 0 1px rgba(244,219,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24);
}
#btnStart .action-label {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
#btnStart:hover:not(:disabled) {
  box-shadow:
    0 14px 52px rgba(244,219,0,0.55),
    0 0 0 1px rgba(244,219,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.28);
  transform: translateY(-3px) scale(1.008);
}

/* ─── Intro Screens ─────────────────────────────────────────────────────────*/
.intro-company-logo  { max-width: min(340px,70vw); height: auto; }
.intro-developed-row { display: flex; align-items: center; gap: 16px; }
.intro-developed-copy { font-family: var(--f-mono); font-size: 14px; color: var(--c-text-2); }
.intro-developed-logo { height: 46px; width: auto; }

/* Splash */
.splash-screen { flex-direction: column; }
.splash-brand  { display: flex; flex-direction: column; align-items: center; gap: 28px; background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(4,4,10,0.65) 30%, transparent 100%); padding: 40px 60px; border-radius: var(--r-2xl); }
.splash-logo   { width: min(620px, 80vw); animation: logoFloat 7s ease-in-out infinite; }

@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.press-start {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 11px 28px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  animation: pressGlow 2.6s ease-in-out infinite;
}
@keyframes pressGlow {
  0%,100% { border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); }
  50%      { border-color: rgba(244,219,0,0.45); color: var(--c-signal); box-shadow: 0 0 18px rgba(244,219,0,0.12); }
}
.press-start:hover { border-color: var(--c-signal); color: var(--c-signal); box-shadow: var(--sh-glow-y); }
.press-start-label { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }
.press-start-note  { display: block; font-family: var(--f-mono); font-size: 11px; margin-top: 3px; opacity: 0.5; }

/* Loading */
.loading-screen {
  background: var(--c-base);
  flex-direction: column;
  gap: 40px;
}
.loading-logo {
  width: min(300px, 55vw); height: auto;
  opacity: 0.85;
  filter: drop-shadow(0 0 24px rgba(244,219,0,0.18));
  animation: logoFloat 4s ease-in-out infinite;
}
.loading-mark svg {
  width: 52px; height: 52px;
  fill: none; stroke: var(--c-signal); stroke-width: 2.5;
  animation: spin 1.1s linear infinite;
  filter: drop-shadow(0 0 10px rgba(244,219,0,0.45));
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Level-Up Choices ──────────────────────────────────────────────────────*/

/* Level-up overlay ambient glow */
#overlay .panel {
  box-shadow: var(--sh-xl), 0 0 90px rgba(244,219,0,0.07), 0 0 30px rgba(88,255,180,0.05);
}

/* Kicker pulse for level-up moment */
#overlay .panel-kicker {
  animation: kickerPulse 2.2s ease-in-out infinite;
}
@keyframes kickerPulse {
  0%,100% { opacity: 0.7; letter-spacing: 0.14em; }
  50%      { opacity: 1; letter-spacing: 0.18em; color: #fff; }
}

.choices-fit-wrap {
  display: flex; gap: 16px;
}

/* Also ensure #choices itself is flex if JS doesn't wrap */
.choices { display: flex; gap: 16px; }

.choice {
  flex: 1;
  display: grid; gap: 10px;
  padding: 20px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 30%),
    color-mix(in srgb, var(--choice-accent, var(--c-signal)) 4%, rgba(14,16,26,0.98));
  border: 1px solid color-mix(in srgb, var(--choice-accent, var(--c-signal)) 22%, transparent);
  color: var(--c-text);
  text-align: left; cursor: pointer;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px color-mix(in srgb, var(--choice-accent, var(--c-signal)) 6%, transparent);
  transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
  animation: choiceIn 380ms var(--t-panel) both;
  animation-delay: calc(var(--choice-index,0) * 90ms);
  position: relative; overflow: hidden;
  min-height: 220px;
}

@keyframes choiceIn {
  from { opacity: 0; transform: translateY(18px) scale(0.95); }
  to   { opacity: 1; transform: none; }
}

.choice::before {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 3px;
  background: var(--choice-accent, var(--c-signal));
  opacity: 0.7;
}

.choice:hover {
  border-color: color-mix(in srgb, var(--choice-accent, var(--c-signal)) 70%, transparent);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05) 0%, transparent 30%),
    color-mix(in srgb, var(--choice-accent, var(--c-signal)) 8%, rgba(14,16,26,0.99));
  transform: translateY(-7px);
  box-shadow:
    0 24px 54px rgba(0,0,0,0.65),
    0 0 0 1px color-mix(in srgb, var(--choice-accent, var(--c-signal)) 60%, transparent),
    0 0 44px color-mix(in srgb, var(--choice-accent, var(--c-signal)) 20%, transparent);
}
.choice:active { transform: translateY(1px); }

.choice-head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}

.choice-kind {
  font-family: var(--f-mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--choice-accent, var(--c-signal));
}

.choice-frame {
  display: flex; align-items: center; justify-content: center;
  height: 72px;
}

.choice-icon {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--choice-accent, var(--c-signal)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--choice-accent, var(--c-signal)) 25%, transparent);
  font-size: 30px;
  box-shadow: 0 0 18px color-mix(in srgb, var(--choice-accent, var(--c-signal)) 14%, transparent);
  transition: transform var(--t-mid), box-shadow var(--t-mid);
}
.choice:hover .choice-icon {
  transform: scale(1.1);
  box-shadow: 0 0 28px color-mix(in srgb, var(--choice-accent, var(--c-signal)) 28%, transparent);
}

.title-copy { display: grid; gap: 5px; }

.upgrade-name {
  font-size: 15px; font-weight: 800;
  color: #fff; letter-spacing: -0.01em;
}

.upgrade-code {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--c-green);
  opacity: 0.85;
  word-break: break-word;
}

.desc {
  font-size: 12px; color: var(--c-text-2);
  line-height: 1.5;
}

.upgrade-foot {
  font-family: var(--f-mono); font-size: 10px;
  color: rgba(255,255,255,0.3);
}

.choice-cta {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--c-signal-dim);
  border: 1px solid rgba(244,219,0,0.3);
  color: var(--c-signal);
  font-size: 11px; font-weight: 700; font-family: var(--f-mono);
  letter-spacing: 0.04em;
}

/* ─── Character Select — Full-Screen 2XKO Style ─────────────────────────────*/
#survivorMenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  background: #04040a;
}

.cs-root {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-layout {
  flex: 1;
  display: grid;
  grid-template-rows: 56px 1fr 170px;
  position: relative;
  overflow: hidden;
}

/* Ambient background glow */
.cs-bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 80% at 25% 48%,
      color-mix(in srgb, var(--char-color, #f4db00) 16%, transparent),
      transparent 65%),
    radial-gradient(ellipse 38% 55% at 82% 58%,
      color-mix(in srgb, var(--char-color, #f4db00) 5%, transparent),
      transparent 60%);
  transition: background 0.5s ease;
}
.cs-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
}

/* Moving grid — diagonal drift in character color, GPU-composited via background-position */
.cs-bg-grid {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--char-color, #f4db00) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--char-color, #f4db00) 7%, transparent) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: cs-grid-drift 18s linear infinite;
  will-change: background-position;
}
@keyframes cs-grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 72px 72px; }
}

/* ── Header ── */
.cs-header {
  grid-row: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.cs-header-left { display: flex; align-items: center; gap: 10px; }
.cs-header-kicker {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-text-3);
}
.cs-header-title {
  font-family: var(--f-rage); font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text);
  position: absolute; left: 50%; transform: translateX(-50%);
}
.cs-header-controls {
  font-family: var(--f-mono); font-size: 9px;
  color: var(--c-text-3); letter-spacing: 0.06em;
}

/* ── Body split ── */
.cs-body {
  grid-row: 2;
  display: grid;
  grid-template-columns: 62fr 38fr;
  overflow: hidden;
  position: relative; z-index: 1;
}

/* ── Character side ── */
.cs-char-side {
  position: relative; overflow: hidden;
}
.cs-char-side::after {
  content: "";
  position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,255,255,0.07) 25%,
    rgba(255,255,255,0.07) 75%, transparent 100%);
}

/* Diagonal accent strips */
.cs-diag-strips {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 72px; pointer-events: none; z-index: 2;
}
.cs-diag-strip {
  position: absolute; top: -20px; bottom: -20px;
  background: var(--char-color, #f4db00);
  transform: skewX(-8deg);
  transition: background 0.4s;
}
.cs-diag-strip:nth-child(1) { width: 4px; left: 20px; opacity: 0.85; }
.cs-diag-strip:nth-child(2) { width: 2px; left: 33px; opacity: 0.4; }
.cs-diag-strip:nth-child(3) { width: 1px; left: 44px; opacity: 0.18; }

/* ── Player sprites — each mirrors its in-game canvas shape ── */
.cs-player-sprite {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  pointer-events: none; user-select: none;
}

/* Base glow + inner void shared across characters */
.cs-player-sprite::before {
  content: "";
  width: var(--sprite-size, 48px); height: var(--sprite-size, 48px);
  background: var(--char-color, #f4db00);
  box-shadow:
    0 0 calc(var(--sprite-size, 48px) * 0.5) color-mix(in srgb, var(--char-color, #f4db00) 55%, transparent),
    0 0 calc(var(--sprite-size, 48px) * 1.0) color-mix(in srgb, var(--char-color, #f4db00) 22%, transparent);
  transition: background 0.4s, box-shadow 0.4s;
}
.cs-player-sprite::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  background: #040408;
}

/* Byte Runner — rotated rounded square (diamond) with rounded inner square */
.cs-player-sprite[data-char="byte-runner"]::before,
.cs-player-sprite:not([data-char])::before {
  border-radius: calc(var(--sprite-size, 48px) * 0.278);
  transform: rotate(45deg);
}
.cs-player-sprite[data-char="byte-runner"]::after,
.cs-player-sprite:not([data-char])::after {
  width: calc(var(--sprite-size, 48px) * 0.444); height: calc(var(--sprite-size, 48px) * 0.444);
  border-radius: calc(var(--sprite-size, 48px) * 0.111);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Firewall Ace — flat hexagon (solid, fortress feel) */
.cs-player-sprite[data-char="firewall-ace"]::before {
  clip-path: polygon(93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%, 50% 0%);
  border-radius: 0;
}
.cs-player-sprite[data-char="firewall-ace"]::after {
  width: calc(var(--sprite-size, 48px) * 0.4); height: calc(var(--sprite-size, 48px) * 0.4);
  clip-path: polygon(93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%, 50% 0%);
  transform: translate(-50%, -50%);
}

/* Async Oracle — upward triangle with circle void at centroid */
.cs-player-sprite[data-char="async-oracle"]::before {
  clip-path: polygon(50% 2%, 98% 92%, 2% 92%);
  border-radius: 0;
}
.cs-player-sprite[data-char="async-oracle"]::after {
  width: calc(var(--sprite-size, 48px) * 0.22); height: calc(var(--sprite-size, 48px) * 0.22);
  border-radius: 50%;
  /* centroid of triangle is at ~62% of height */
  transform: translate(-50%, calc(-50% + var(--sprite-size, 48px) * 0.12));
}

/* Splash sprite (large centered character display) */
.cs-splash-sprite {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-38%, -54%);
  pointer-events: none;
}

/* Character info overlay */
.cs-char-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 28px 36px 24px 52px;
  background: linear-gradient(0deg,
    rgba(4,4,10,0.98) 0%, rgba(4,4,10,0.84) 50%, transparent 100%);
}
.cs-char-class {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--char-color, var(--c-signal)); margin-bottom: 6px;
  transition: color 0.4s;
}
.cs-char-name {
  font-family: var(--f-rage); font-size: clamp(44px, 5.8vw, 78px);
  line-height: 0.92; color: #fff;
  text-shadow:
    0 0 50px color-mix(in srgb, var(--char-color, #f4db00) 55%, transparent),
    0 0 100px color-mix(in srgb, var(--char-color, #f4db00) 22%, transparent);
  margin-bottom: 10px; transition: text-shadow 0.4s;
}
.cs-char-desc {
  font-size: 12px; color: var(--c-text-2);
  line-height: 1.55; max-width: 540px; margin-bottom: 16px;
}
.cs-char-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.cs-stat { display: flex; flex-direction: column; gap: 3px; min-width: 44px; }
.cs-stat-lbl {
  font-family: var(--f-mono); font-size: 8px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-3);
}
.cs-stat-val {
  font-family: var(--f-ui); font-size: 18px; font-weight: 700; line-height: 1;
  color: var(--char-color, var(--c-signal)); transition: color 0.4s;
}

/* ── Settings side ── */
.cs-settings-side {
  display: flex; flex-direction: column;
  padding: 20px 22px 14px; gap: 8px;
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, transparent 100%);
}
.cs-settings-hd {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-3);
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.cs-settings-list { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }

.cs-run-card {
  display: grid;
  grid-template-areas: "label value" "kicker kicker";
  grid-template-columns: 1fr auto;
  gap: 1px 8px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid var(--setting-accent, rgba(255,255,255,0.15));
  border-radius: var(--r-sm);
  cursor: pointer; text-align: left; color: var(--c-text);
  transition: background 0.15s, transform 0.1s;
}
.cs-run-card:hover { background: rgba(255,255,255,0.05); transform: translateX(2px); }
.cs-run-label {
  grid-area: label; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3);
  align-self: center;
}
.cs-run-value {
  grid-area: value; font-family: var(--f-ui); font-size: 18px; font-weight: 700;
  line-height: 1; color: var(--setting-accent, var(--c-text)); text-align: right;
}
.cs-run-kicker {
  grid-area: kicker; font-size: 12px; color: var(--c-text-2); font-weight: 500;
}

.cs-settings-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
  margin-top: auto; padding-top: 8px;
}
.cs-sum-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 6px; text-align: center;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05); border-radius: var(--r-sm);
}
.cs-sum-card small {
  font-family: var(--f-mono); font-size: 7px;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-3);
}
.cs-sum-card b { font-family: var(--f-ui); font-size: 16px; font-weight: 700; line-height: 1.1; color: var(--c-text); }
.cs-sum-card span { font-size: 8px; color: var(--c-text-3); }

/* ── Character strip ── */
.cs-strip {
  grid-row: 3; display: flex; align-items: stretch;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(2,2,8,0.7);
  position: relative; z-index: 1; overflow: hidden;
}
.cs-strip-card {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  padding: 16px 12px 14px;
  cursor: pointer; border: none;
  border-right: 1px solid rgba(255,255,255,0.04);
  background: transparent; position: relative;
  transition: background 0.2s;
}
.cs-strip-card:hover { background: rgba(255,255,255,0.04); }
.cs-strip-card.is-active {
  background: color-mix(in srgb, var(--char-color) 8%, transparent);
}
.cs-strip-card.is-active::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--char-color);
  box-shadow: 0 0 18px var(--char-color);
}
.cs-strip-card.is-active .cs-player-sprite::before {
  box-shadow:
    0 0 calc(var(--sprite-size, 48px) * 0.7) color-mix(in srgb, var(--char-color, #f4db00) 70%, transparent),
    0 0 calc(var(--sprite-size, 48px) * 1.4) color-mix(in srgb, var(--char-color, #f4db00) 35%, transparent);
}
.cs-strip-info { text-align: center; }
.cs-strip-name {
  display: block; font-family: var(--f-rage); font-size: 14px;
  color: #fff; line-height: 1.15;
}
.cs-strip-role {
  display: block; font-family: var(--f-mono); font-size: 8px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-3); margin-top: 2px;
}
.cs-strip-selected {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--f-mono); font-size: 7px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--char-color);
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--char-color) 45%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--char-color) 10%, transparent);
}

/* ── Action bar ── */
.cs-action-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(4,4,10,0.88);
  backdrop-filter: blur(10px);
  flex-shrink: 0;
}
.cs-btn-back {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-sm);
  cursor: pointer; color: var(--c-text);
  transition: background 0.15s, border-color 0.15s;
}
.cs-btn-back:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
.cs-btn-back .action-label { font-size: 13px; font-weight: 700; }
.cs-btn-back .action-note { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-3); }

.cs-btn-launch {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding: 10px 26px;
  background: color-mix(in srgb, var(--char-color, #f4db00) 16%, rgba(4,4,10,0.8));
  border: 1px solid color-mix(in srgb, var(--char-color, #f4db00) 55%, transparent);
  border-radius: var(--r-sm); cursor: pointer; color: var(--c-text);
  box-shadow: 0 0 24px color-mix(in srgb, var(--char-color, #f4db00) 16%, transparent);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.cs-btn-launch:hover {
  background: color-mix(in srgb, var(--char-color, #f4db00) 26%, rgba(4,4,10,0.8));
  box-shadow: 0 0 36px color-mix(in srgb, var(--char-color, #f4db00) 30%, transparent);
}
.cs-btn-launch .action-label {
  font-family: var(--f-rage); font-size: 20px; line-height: 1;
  color: var(--char-color, #f4db00);
}
.cs-btn-launch .action-note { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-2); }

/* ─── Options ───────────────────────────────────────────────────────────────*/
.options-panel { padding: 0; }
.options-panel .wc { padding: 18px 22px 0; }
.options-panel .panel-header { padding: 14px 22px 0; }

.options-tabs {
  display: flex; gap: 5px; flex-wrap: wrap;
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}

.options-tab {
  padding: 8px 14px; border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
  cursor: pointer; text-align: left;
  transition: all var(--t-mid);
}
.options-tab:hover { border-color: var(--c-border-2); color: var(--c-text); }
.options-tab.is-active { background: var(--c-surface-3); border-color: var(--c-signal); color: var(--c-signal); }
.options-tab-label { display: block; font-size: 12px; font-weight: 700; }
.options-tab-note  { display: block; font-size: 10px; font-family: var(--f-mono); opacity: 0.55; margin-top: 1px; }

.options-content {
  flex: 1; overflow: auto; padding: 14px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.options-content::-webkit-scrollbar { width: 5px; }
.options-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.options-fit-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 8px;
}

.option-card {
  display: grid; gap: 5px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  text-align: left; color: var(--c-text);
  cursor: pointer;
  transition: border-color var(--t-mid), transform var(--t-mid);
}
.option-card:hover { border-color: var(--c-signal); transform: translateY(-2px); }
.option-impact { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.option-label  { font-size: 13px; font-weight: 700; color: var(--c-text); }
.option-value  { font-size: 15px; font-weight: 800; color: var(--c-signal); font-family: var(--f-mono); }
.option-desc   { font-size: 11px; color: var(--c-text-2); line-height: 1.4; }
.option-note   { font-size: 10px; color: rgba(255,255,255,0.28); font-family: var(--f-mono); }

/* ── Custom slider option card ───────────────────────────────────────────────*/
.opt-slider-card { cursor: default; user-select: none; }
.opt-slider-card:hover { border-color: var(--c-border-2); transform: none; }
.opt-slider-card.is-dragging { border-color: var(--c-signal); }

.opt-slider-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.opt-slider-value {
  font-family: var(--f-mono); font-size: 18px; font-weight: 800;
  color: var(--c-signal); line-height: 1; flex-shrink: 0;
}

/* Track */
.opt-slider-track {
  position: relative;
  height: 6px; margin: 14px 0 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-pill);
  cursor: crosshair;
  touch-action: none;
}
.opt-slider-card.is-dragging .opt-slider-track { cursor: grabbing; }

/* Colored fill */
.opt-slider-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, var(--c-signal) 0%, rgba(244,219,0,0.7) 100%);
  border-radius: var(--r-pill);
  pointer-events: none;
  transition: width 0.04s linear;
}

/* Draggable thumb */
.opt-slider-thumb {
  position: absolute; top: 50%;
  width: 16px; height: 16px;
  background: var(--c-signal);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow:
    0 0 0 3px rgba(244,219,0,0.18),
    0 0 12px rgba(244,219,0,0.45);
  transition: left 0.04s linear, box-shadow 0.15s;
}
.opt-slider-card.is-dragging .opt-slider-thumb {
  box-shadow:
    0 0 0 5px rgba(244,219,0,0.22),
    0 0 22px rgba(244,219,0,0.65);
  width: 18px; height: 18px;
}

/* Tick marks + labels */
.opt-ticks { position: absolute; inset: 0; pointer-events: none; }
.opt-tick {
  position: absolute; top: -3px; bottom: -3px;
  width: 1px; background: rgba(255,255,255,0.18);
  transform: translateX(-50%);
}
.opt-tick span {
  position: absolute; top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 8px;
  color: var(--c-text-3); letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ─── In-Game Strip (redeploy shop, future in-game overlays) ────────────────*/
.ingame-strip {
  position: absolute; inset: 0; z-index: 23;
  display: flex; flex-direction: column;
  background: rgba(4,5,12,0.98);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
.ingame-strip.screen-open { opacity: 1; pointer-events: auto; }

.ingame-strip-head {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 14px;
  min-height: 54px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(3,3,8,0.99) 0%, rgba(6,6,14,0.96) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 4px 32px rgba(0,0,0,0.75);
}

.ingame-strip-sub {
  flex: 1; margin: 0;
  font-size: 11px; color: var(--c-text-3);
  font-family: var(--f-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ingame-strip-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.ingame-strip-body::-webkit-scrollbar { width: 5px; }
.ingame-strip-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.ingame-strip-foot {
  flex-shrink: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 10px 16px;
  background: linear-gradient(0deg, rgba(3,3,8,0.99) 0%, rgba(6,6,14,0.92) 100%);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ingame-strip-foot .menu-action { flex: 1; }

/* Redeploy layout inside the strip body */
.redeploy-layout {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1.7fr);
  gap: 10px;
  align-items: start;
  height: 100%;
}
.redeploy-col { display: flex; flex-direction: column; gap: 8px; }

/* Meta / Redeploy Shop ──────────────────────────────────────────────────────*/

.redeploy-shell { display: grid; gap: 10px; }
.redeploy-shell-fixed { /* same as redeploy-shell */ }

.redeploy-panel {
  padding: 10px 12px;
  border-radius: var(--r-xs);
  background: rgba(8,10,18,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid rgba(255,255,255,0.14);
}
.redeploy-panel h2 {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.3);
  margin-bottom: 6px;
  font-family: var(--f-mono);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.redeploy-grid { display: grid; gap: 8px; }
.redeploy-grid-cells { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }

.redeploy-card {
  padding: 10px 12px 9px;
  border-radius: var(--r-xs);
  background: rgba(12,14,24,0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 2px solid var(--card-accent, rgba(255,255,255,0.2));
  display: grid; gap: 4px;
  transition: border-color var(--t-mid), background var(--t-mid);
}
.redeploy-card:hover {
  border-left-color: var(--card-accent, var(--c-border-3));
  background: rgba(16,19,32,0.7);
}

.redeploy-kicker {
  font-family: var(--f-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--card-accent, var(--c-text-3));
}
.redeploy-card h3 { font-size: 13px; font-weight: 800; color: #fff; }
.redeploy-card p  { font-size: 11.5px; color: var(--c-text-2); line-height: 1.45; }

.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding-top: 3px;
}

.meta-level, .meta-cost {
  font-family: var(--f-mono); font-size: 10px;
  padding: 3px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border);
  color: var(--c-text-2);
}

.redeploy-loadout-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 6px;
}
.redeploy-loadout-slot {
  padding: 9px 10px; border-radius: var(--r-sm);
  background: var(--c-surface-3); border: 1px solid var(--c-border);
}
.redeploy-loadout-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.redeploy-loadout-head b { font-size: 11px; color: var(--c-text); }
.redeploy-loadout-head small { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-3); }
.redeploy-loadout-items { display: flex; flex-direction: column; gap: 2px; }
.redeploy-loadout-items span { font-size: 10px; color: var(--c-text-2); }
.redeploy-loadout-items em { font-size: 10px; color: var(--c-text-3); font-style: normal; opacity: 0.6; }

/* Run Summary Stats */
.redeploy-stat-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 5px 0;
}
.redeploy-stat-grid > div {
  padding: 7px 8px;
  border-radius: var(--r-xs);
  background: rgba(6,8,14,0.6); border: 1px solid rgba(255,255,255,0.05);
}
.redeploy-stat-grid small { display: block; font-size: 8px; color: var(--c-text-3); font-family: var(--f-mono); margin-bottom: 1px; text-transform: uppercase; letter-spacing: 0.07em; }
.redeploy-stat-grid b { font-size: 15px; font-weight: 800; color: var(--c-text); }

/* Meta shop buttons */
.redeploy-card .menu-action { font-size: 12px; padding: 8px 12px; margin-top: 2px; }

/* Run history */
.meta-card {
  padding: 16px; border-radius: var(--r-md);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
}
.meta-card h3 { font-size: 14px; font-weight: 800; color: var(--c-text); margin-bottom: 10px; }
.card-kicker {
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--c-signal); margin-bottom: 4px; display: block;
}
.meta-card .meta-row { border-top: 1px solid var(--c-border); padding-top: 6px; margin-top: 4px; }

/* ─── Unified Bottom HUD Bar ─────────────────────────────────────────────────*/
.hb {
  position: absolute;
  bottom: clamp(10px,1.3vw,18px);
  left: clamp(10px,1.3vw,18px);
  right: clamp(10px,1.3vw,18px);
  z-index: 4;
  display: flex; align-items: center;
  height: 58px;
  background:
    linear-gradient(180deg, rgba(10,11,20,0.95) 0%, rgba(6,7,13,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(244,219,0,0.18);
  border-radius: var(--r-md);
  box-shadow:
    var(--sh-xl),
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 -8px 28px rgba(244,219,0,0.05),
    inset 0 1px 0 rgba(244,219,0,0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: visible;
  pointer-events: auto;
  user-select: none;
}

/* ── Stats section ── */
.hb-stats {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; width: 220px; flex-shrink: 0;
  font-family: var(--f-mono);
}

.hb-lv { display: flex; flex-direction: column; align-items: center; gap: 1px; flex-shrink: 0; }
.hb-lv-label { font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-text-3); }
.hb-lv-num {
  font-family: var(--f-rage); font-size: 22px; font-weight: 400;
  color: var(--c-signal); line-height: 1;
  text-shadow: 0 0 14px rgba(244,219,0,0.45);
}
@keyframes lvPunch {
  0%   { transform: scale(1.7); color: #fff; text-shadow: 0 0 28px rgba(244,219,0,1), 0 0 56px rgba(244,219,0,0.55); }
  55%  { transform: scale(0.88); }
  100% { transform: scale(1);   color: var(--c-signal); text-shadow: 0 0 14px rgba(244,219,0,0.45); }
}
.hb-lv-num.punch { animation: lvPunch 420ms cubic-bezier(0.34,1.56,0.64,1) both; }

.hb-bars { display: grid; gap: 5px; flex: 1; min-width: 0; }

.hb-bar-row { display: flex; align-items: center; gap: 6px; }

.hb-track {
  flex: 1; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08); overflow: hidden; min-width: 0;
}
.hb-fill {
  height: 100%; width: 0%; border-radius: 3px;
  transition: width 200ms ease, background 300ms ease;
}
.hb-track-hp .hb-fill { background: var(--c-green); box-shadow: 0 0 10px rgba(88,255,180,0.75), 0 0 22px rgba(88,255,180,0.3); }
.hb-track-xp .hb-fill { background: var(--c-signal); box-shadow: 0 0 8px rgba(244,219,0,0.6), 0 0 18px rgba(244,219,0,0.25); }

.hb-hp-val {
  font-size: 11px; font-weight: 700; color: #fff;
  white-space: nowrap; min-width: 58px; text-align: right;
}
.hb-xp-val {
  font-size: 9px; color: var(--c-text-3);
  white-space: nowrap; min-width: 26px; text-align: right;
}

.hb-meta-row { display: flex; align-items: center; gap: 5px; }
.hb-meta-item { font-size: 9px; color: var(--c-text-3); cursor: default; }
.hb-meta-item b { color: rgba(255,255,255,0.55); font-weight: 600; }
.hb-meta-dot { font-size: 9px; color: rgba(255,255,255,0.15); }

/* ── Section divider ── */
.hb-sep {
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.06); flex-shrink: 0;
}

/* ── Skills center section ── */
.hb-skills {
  flex: 1; display: flex; align-items: center;
  justify-content: center; gap: 5px;
  padding: 0 10px; min-width: 0; overflow: visible;
}

/* ── Items section ── */
.hb-items {
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px; flex-shrink: 0;
}

/* ── Buffs section ── */
.hb-buffs {
  display: flex; align-items: center; gap: 4px;
  padding: 0 4px 0 0; flex: 1; min-width: 0; overflow: hidden;
}

/* ── Controls ── */
.hb-ctrl-group {
  display: flex; align-items: center; gap: 4px;
  padding: 0 10px; flex-shrink: 0;
  border-left: 1px solid rgba(255,255,255,0.06); height: 100%;
}
.hb-ctrl-btn {
  border-radius: var(--r-xs);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--c-text-2); cursor: pointer;
  transition: all var(--t-mid);
}
.hb-ctrl-btn:hover { background: rgba(255,255,255,0.1); border-color: var(--c-border-2); }

.hb-pause {
  width: 34px; height: 34px;
  display: grid; grid-auto-flow: column; place-items: center; gap: 4px;
}
.hb-pause span { width: 3px; height: 12px; border-radius: 2px; background: currentColor; }

.hb-aim { padding: 4px 8px; display: grid; gap: 1px; text-align: center; }
.hb-aim-label { font-family: var(--f-mono); font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-3); }
.hb-aim b { font-size: 10px; font-weight: 800; color: var(--c-green); }

/* ── Upgrade chips inside HUD bar (compact pills) ── */
.hb-buffs .upgrade-chip {
  position: relative;
  display: flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 7px;
  height: 28px; border-radius: 14px;
  background: rgba(10,12,22,0.9);
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 2px solid var(--chip-accent, rgba(88,255,180,0.6));
  color: inherit; cursor: default;
  flex-shrink: 0;
  transition: border-color var(--t-mid), transform var(--t-mid);
  width: auto;
  backdrop-filter: none;
}
.hb-buffs .upgrade-chip:hover { transform: translateY(-2px); border-color: var(--chip-accent, var(--c-green)); }
.hb-buffs .upgrade-chip-tag { display: none; }
.hb-buffs .upgrade-chip-name { font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; }
.hb-buffs .upgrade-chip-level { font-family: var(--f-mono); font-size: 9px; color: var(--chip-accent, var(--c-green)); white-space: nowrap; }
.hb-buffs .upgrade-chip.empty { display: none; }

/* Buff chip hover tooltip */
.hb-buffs .upgrade-chip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(6,7,14,0.98);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 10px; line-height: 1.4; color: var(--c-text-2);
  white-space: nowrap; pointer-events: none;
  box-shadow: var(--sh-md);
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 50;
}
.hb-buffs .upgrade-chip:hover::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Item slots inside HUD bar (compact) ── */
.hb-items .item-slot {
  display: grid; gap: 1px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  background: rgba(8,9,16,0.9);
  border: 1px solid var(--c-border-2);
  text-align: left; color: var(--c-text); cursor: pointer;
  min-width: 64px; max-width: 90px;
  height: 42px;
  transition: border-color var(--t-mid), transform var(--t-mid);
  backdrop-filter: none;
}
.hb-items .item-slot:hover { border-color: var(--c-signal); transform: translateY(-2px); }
.hb-items .item-slot.empty { opacity: 0.35; }
.hb-items .item-slot.empty:hover { border-color: var(--c-border-2); transform: none; }

/* ── Skill slots inside HUD bar (horizontal/flat) ── */
.hb-skills .skill-slot {
  width: 62px; height: 42px;
  padding: 3px 6px 9px;
}
.hb-skills .skill-icon { width: 22px; height: 22px; font-size: 12px; }
.hb-skills .skill-rank { font-size: 7px; padding: 1px 3px; }
.hb-skills .skill-time { font-size: 7px; margin-top: 1px; }
.hb-skills .skill-slot:hover { transform: translateY(-3px); }
.hb-skills .skill-key { font-size: 7px; top: 2px; left: 3px; }

/* Skill key binding number */
.skill-key {
  position: absolute; top: 3px; left: 4px;
  font-family: var(--f-mono); font-size: 7px; font-weight: 700;
  color: rgba(255,255,255,0.25); line-height: 1; pointer-events: none;
}

/* ─── Skill Bar base (layout provided by .hb-skills) ────────────────────────*/
.skill-bar { display: flex; gap: 6px; pointer-events: auto; overflow: visible; }

.skill-slot {
  position: relative;
  width: 80px;
  padding: 9px 9px 14px;
  border-radius: var(--r-md);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04) 0%, transparent 40%),
    rgba(7,8,14,0.92);
  border: 1px solid var(--c-border-2);
  overflow: hidden; cursor: help;
  transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(8px);
}

/* Cooldown fill */
.skill-slot::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 4px;
  background: var(--slot-accent, var(--c-signal));
  transform-origin: left;
  transform: scaleX(var(--skill-fill, 1));
  opacity: 0.85;
  transition: transform 80ms linear;
  border-radius: 0 2px 0 0;
}

.skill-slot.ready {
  border-color: rgba(88,255,180,0.48);
  animation: readyPulse 1.9s ease-in-out infinite;
}
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(88,255,180,0.18), inset 0 0 8px rgba(88,255,180,0.04); }
  50%      { box-shadow: 0 0 26px rgba(88,255,180,0.36), inset 0 0 14px rgba(88,255,180,0.08); }
}
.skill-slot.ready::after { background: var(--c-green); }

.skill-slot:hover {
  transform: translateY(-5px);
  border-color: var(--c-signal);
  box-shadow: 0 14px 30px rgba(0,0,0,0.5), 0 0 0 1px rgba(244,219,0,0.2);
}

.skill-slot-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; margin-bottom: 6px;
}

.skill-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: rgba(244,219,0,0.1);
  border: 1px solid rgba(244,219,0,0.15);
  color: var(--c-signal); font-size: 18px;
}

.skill-rank {
  font-size: 10px; font-weight: 700;
  color: var(--c-green);
  padding: 2px 5px; border-radius: var(--r-pill);
  background: var(--c-green-dim);
  border: 1px solid rgba(88,255,180,0.2);
  line-height: 1; white-space: nowrap;
}

.skill-time {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--c-text-3); text-align: center;
}
.skill-slot.ready .skill-time { color: var(--c-green); font-weight: 700; }

/* ─── Base item/upgrade classes (used in shop/meta too) ─────────────────────*/
.item-bar { display: flex; gap: 4px; pointer-events: auto; }

.item-slot {
  display: grid; gap: 1px; padding: 5px 8px;
  border-radius: var(--r-sm);
  background: rgba(8,9,16,0.9);
  border: 1px solid var(--c-border-2);
  text-align: left; color: var(--c-text);
  cursor: pointer; min-width: 64px; max-width: 90px;
  transition: border-color var(--t-mid), transform var(--t-mid);
}
.item-slot:hover { border-color: var(--c-signal); transform: translateY(-2px); }
.item-slot.empty { opacity: 0.35; }
.item-slot.empty:hover { border-color: var(--c-border-2); transform: none; }

.item-hotkey { font-size: 8px; font-weight: 700; color: var(--c-signal); line-height: 1; }
.item-name   { font-size: 10px; font-weight: 700; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-detail { font-family: var(--f-mono); font-size: 8px; color: var(--c-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upgrade-sidebar { display: flex; flex-direction: column; gap: 5px; pointer-events: auto; overflow: visible; }
.upgrade-chip {
  appearance: none; color: inherit; font: inherit;
  display: grid; gap: 2px; padding: 7px 10px;
  border-radius: var(--r-sm);
  background: rgba(8,9,16,0.9);
  border: 1px solid var(--c-border-2);
  border-left: 2px solid var(--chip-accent, rgba(88,255,180,0.6));
  text-align: left; cursor: help; width: 100%;
  transition: border-color var(--t-mid);
}
.upgrade-chip:hover { border-color: var(--chip-accent, var(--c-green)); }
.upgrade-chip.empty { opacity: 0.45; cursor: default; }
.upgrade-chip-tag   { font-family: var(--f-mono); font-size: 8px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--chip-accent, var(--c-green)); }
.upgrade-chip-name  { font-size: 11px; font-weight: 700; color: #fff; }
.upgrade-chip-level { font-family: var(--f-mono); font-size: 9px; color: var(--c-text-3); }

/* ─── Skill Tooltip ─────────────────────────────────────────────────────────*/
.skill-tooltip {
  position: absolute; z-index: 30;
  width: min(290px, calc(100vw - 20px));
  padding: 14px 16px; border-radius: var(--r-lg);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.05) 0%, transparent 30%),
    rgba(9,10,18,0.98);
  border: 1px solid var(--c-border-2);
  box-shadow: var(--sh-lg);
  pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 140ms ease, transform 140ms ease;
}
.skill-tooltip.is-open { opacity: 1; transform: none; }
.skill-tooltip.hidden  { display: block !important; opacity: 0 !important; pointer-events: none !important; }
.skill-tooltip strong  { display: block; font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.skill-tooltip span    { display: block; font-size: 12.5px; color: var(--c-text); line-height: 1.45; }
.skill-tooltip small   { display: block; margin-top: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--c-text-3); }

/* ─── Toast ─────────────────────────────────────────────────────────────────*/
.toast {
  position: absolute; z-index: 25;
  top: 62px; left: 50%; transform: translateX(-50%);
  max-width: min(460px,88vw); white-space: nowrap;
  padding: 8px 18px; border-radius: var(--r-pill);
  background: rgba(10,12,22,0.97);
  border: 1px solid rgba(244,219,0,0.22);
  color: var(--c-text);
  font-family: var(--f-mono); font-size: 12px;
  box-shadow: var(--sh-md), 0 0 28px rgba(244,219,0,0.07);
  backdrop-filter: blur(8px);
}
.toast.toast-pop { animation: toastIn 220ms var(--t-panel); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Scrollbar global ──────────────────────────────────────────────────────*/
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ─── Survivor panel padding ────────────────────────────────────────────────*/
.survivor-panel { padding: 0; }
.survivor-panel .wc            { padding: 14px 20px 0; }
.survivor-panel .panel-header  { padding: 10px 20px 0; }
.survivor-panel .panel-actions {
  padding: 12px 20px 20px;
  grid-template-columns: 1fr auto;
}
.survivor-panel .panel-actions .menu-action.secondary {
  white-space: nowrap;
  min-width: 120px;
}

/* ─── Legacy class aliases (layout.js scale targets) ───────────────────────*/
.bottom-dock { display: contents; }

/* ─── Responsive ────────────────────────────────────────────────────────────*/
body[data-viewport-mode="sm"] .menu-layout,
body[data-viewport-mode="md"] .menu-layout {
  grid-template-columns: 1fr; gap: 22px;
}
body[data-viewport-mode="sm"] .hero-logo,
body[data-viewport-mode="md"] .hero-logo { width: min(100%,340px); }
body[data-viewport-mode="sm"] .meta-actions,
body[data-viewport-mode="md"] .meta-actions { grid-template-columns: 1fr; }
body[data-viewport-mode="sm"] .choices-fit-wrap { flex-direction: column; }
body[data-viewport-mode="sm"] .redeploy-grid-cells { grid-template-columns: 1fr; }
body[data-viewport-mode="sm"] .item-bar { display: none; }
body[data-viewport-mode="sm"] .upgrade-sidebar { display: none; }

/* ─── Game-over state ───────────────────────────────────────────────────────*/
#start.is-game-over .hero-logo { filter: drop-shadow(0 16px 40px rgba(0,0,0,0.5)) saturate(0.6); }

/* ─── Level-Up Sidebar ──────────────────────────────────────────────────────*/
.lvlup-sidebar {
  position: absolute;
  top: 8%; right: 0; bottom: 10%;
  z-index: 22;
  width: clamp(260px, 28vw, 310px);
  background: linear-gradient(180deg, rgba(4,4,10,0.97) 0%, rgba(6,6,14,0.94) 100%);
  border: 1px solid rgba(244,219,0,0.26);
  border-right: none;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow:
    -6px 0 40px rgba(0,0,0,0.7),
    0 0 80px rgba(244,219,0,0.08),
    -4px 0 40px rgba(244,219,0,0.05);
  animation: sidebarSlideIn 280ms cubic-bezier(0.18,0.89,0.32,1.08) both;
  display: flex; flex-direction: column;
}
@keyframes sidebarSlideIn {
  from { transform: translateX(100%); opacity: 0; filter: brightness(1.8); }
  40%  { filter: brightness(1.2); }
  to   { transform: none; opacity: 1; filter: brightness(1); }
}

.lvlup-sidebar-inner {
  display: flex; flex-direction: column;
  height: 100%; padding: 14px 12px 12px;
  gap: 10px; overflow: hidden;
}

.lvlup-sidebar-head {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
  flex-shrink: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.lvlup-kicker {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-signal); opacity: 0.9;
  animation: kickerPulse 2.2s ease-in-out infinite;
}

.lvlup-choices {
  display: flex; flex-direction: column;
  gap: 8px; flex: 1; overflow: hidden;
}

/* Card chip — full vertical layout in sidebar */
.lvlup-chip {
  position: relative;
  display: grid;
  grid-template:
    "icon body" auto
    "desc desc" 1fr
    / 40px 1fr;
  gap: 6px 12px;
  align-items: start;
  flex: 1;
  padding: 13px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--chip-accent, var(--c-signal)) 5%, rgba(10,12,22,0.98));
  border: 1px solid var(--c-border-2);
  border-left: 3px solid color-mix(in srgb, var(--chip-accent, var(--c-signal)) 55%, transparent);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
  color: var(--c-text); cursor: pointer; text-align: left;
  transition: border-color var(--t-mid), transform 120ms ease, box-shadow var(--t-mid), background var(--t-mid);
  animation: sidebarChipIn 300ms var(--t-panel) both;
  animation-delay: calc(var(--chip-index, 0) * 70ms);
  min-height: 0;
}
@keyframes sidebarChipIn {
  from { opacity: 0; transform: translateX(18px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.lvlup-chip:hover {
  border-color: color-mix(in srgb, var(--chip-accent, var(--c-signal)) 70%, transparent);
  border-left-color: var(--chip-accent, var(--c-signal));
  background: color-mix(in srgb, var(--chip-accent, var(--c-signal)) 9%, rgba(14,16,28,0.99));
  transform: translateX(-4px);
  box-shadow:
    5px 0 0 0 var(--chip-accent, var(--c-signal)),
    0 8px 28px rgba(0,0,0,0.55),
    0 0 36px color-mix(in srgb, var(--chip-accent, var(--c-signal)) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.lvlup-chip:active { transform: translateX(-1px) scale(0.99); }

.lvlup-chip-icon {
  grid-area: icon;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--chip-accent, var(--c-signal)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-accent, var(--c-signal)) 24%, transparent);
  font-size: 18px; flex-shrink: 0;
}

.lvlup-chip-body {
  grid-area: body;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0;
}

.lvlup-chip-name {
  font-size: 13px; font-weight: 800;
  color: #fff; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lvlup-chip-meta {
  display: flex; align-items: center; gap: 5px;
}

.lvlup-chip-type {
  font-family: var(--f-mono);
  font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--chip-accent, var(--c-signal));
}

.lvlup-chip-rank {
  font-family: var(--f-mono);
  font-size: 9px; color: var(--c-text-3);
}

/* Description — always visible in sidebar (not a hover tooltip) */
.lvlup-chip-tt {
  grid-area: desc;
  display: block !important;
  position: static !important;
  background: none; border: none; box-shadow: none;
  padding: 0; min-width: 0; max-width: none;
  white-space: normal; text-align: left;
}

.lvlup-chip-tt-title { display: none; }

.lvlup-chip-tt-desc {
  font-size: 11px; color: var(--c-text-2); line-height: 1.5;
}

.lvlup-chip-tt-foot {
  font-family: var(--f-mono); font-size: 9.5px;
  color: var(--c-text-3); margin-top: 4px;
  line-height: 1.4;
}

/* Freeze button — full-width, bottom of sidebar */
.lvlup-freeze-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--c-border-2);
  color: var(--c-text-2);
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  cursor: pointer;
  transition: all var(--t-mid);
}
.lvlup-freeze-btn:hover {
  border-color: var(--c-signal); color: var(--c-signal);
  background: rgba(244,219,0,0.07);
}
.lvlup-freeze-btn.frozen {
  background: rgba(244,219,0,0.12);
  border-color: rgba(244,219,0,0.45);
  color: var(--c-signal);
}
.lvlup-freeze-icon { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSITION VEIL
   All screen transitions run through a single fixed overlay.
   Only opacity and clip-path are animated — both GPU-composited.
   ═══════════════════════════════════════════════════════════════════════════ */

#veil {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  /* no display:none — zero size when classless, animations swap in */
}

/* ── Sweep — diagonal wipe for char select enter / back ── */
/* Band sweeps L→R in character color: covers at 44%, holds, exits at 56% */
#veil.veil-sweep {
  background: var(--veil-color, #f4db00);
  animation: veil-sweep 580ms linear forwards;
  will-change: clip-path, opacity;
}
@keyframes veil-sweep {
  0%   { clip-path: polygon(-22% 0%, -7% 0%, -2% 100%, -17% 100%); opacity: 1; }
  44%  { clip-path: polygon(-22% 0%, 113% 0%, 118% 100%, -17% 100%); opacity: 1; }
  56%  { clip-path: polygon(-22% 0%, 113% 0%, 118% 100%, -17% 100%); opacity: 1; }
  76%  { opacity: 1; }
  100% { clip-path: polygon(108% 0%, 113% 0%, 118% 100%, 103% 100%); opacity: 0; }
}

/* ── Deploy — radial burst for launching a run ── */
/* Circle expands from center to full coverage, then fades — canvas fades in beneath */
/* ── Deploy — character shape zooms in to fill screen, then zooms out to game scale ──
   Each character gets its own clip-path shape matching the in-game sprite exactly.
   Timing: 0–38% punch in | 38–46% hold (game loads) | 46–96% zoom out | 96–100% fade */

#veil.veil-deploy {
  background: var(--veil-color, #f4db00);
  animation: veil-deploy-diamond 960ms forwards; /* fallback */
  will-change: clip-path, opacity;
}
#veil.veil-deploy[data-char="byte-runner"]  { animation-name: veil-deploy-diamond; }
#veil.veil-deploy[data-char="firewall-ace"] { animation-name: veil-deploy-hex; }
#veil.veil-deploy[data-char="async-oracle"] { animation-name: veil-deploy-tri; }

/* Byte Runner — rotated square (diamond). Full-screen diamond uses overextended points
   so all four screen corners are covered. Final state ≈ 36px game sprite size. */
@keyframes veil-deploy-diamond {
  0% {
    clip-path: polygon(50% 48%, 52% 50%, 50% 52%, 48% 50%);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 1;
  }
  38% {
    clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
    animation-timing-function: linear;
    opacity: 1;
  }
  46% {
    clip-path: polygon(50% -60%, 160% 50%, 50% 160%, -60% 50%);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
  }
  96% { clip-path: polygon(50% 48%, 52% 50%, 50% 52%, 48% 50%); opacity: 1; }
  100% { clip-path: polygon(50% 48%, 52% 50%, 50% 52%, 48% 50%); opacity: 0; }
}

/* Firewall Ace — hexagon (pointy top/bottom). Overextended to cover screen corners. */
@keyframes veil-deploy-hex {
  0% {
    clip-path: polygon(50% 48%, 51.7% 49%, 51.7% 51%, 50% 52%, 48.3% 51%, 48.3% 49%);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 1;
  }
  38% {
    clip-path: polygon(50% -30%, 130% 25%, 130% 75%, 50% 130%, -30% 75%, -30% 25%);
    animation-timing-function: linear;
    opacity: 1;
  }
  46% {
    clip-path: polygon(50% -30%, 130% 25%, 130% 75%, 50% 130%, -30% 75%, -30% 25%);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
  }
  96% { clip-path: polygon(50% 48%, 51.7% 49%, 51.7% 51%, 50% 52%, 48.3% 51%, 48.3% 49%); opacity: 1; }
  100% { clip-path: polygon(50% 48%, 51.7% 49%, 51.7% 51%, 50% 52%, 48.3% 51%, 48.3% 49%); opacity: 0; }
}

/* Async Oracle — upward triangle. Overextended base so bottom corners are covered. */
@keyframes veil-deploy-tri {
  0% {
    clip-path: polygon(50% 47.5%, 52% 52.5%, 48% 52.5%);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    opacity: 1;
  }
  38% {
    clip-path: polygon(50% -40%, 130% 115%, -30% 115%);
    animation-timing-function: linear;
    opacity: 1;
  }
  46% {
    clip-path: polygon(50% -40%, 130% 115%, -30% 115%);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
  }
  96% { clip-path: polygon(50% 47.5%, 52% 52.5%, 48% 52.5%); opacity: 1; }
  100% { clip-path: polygon(50% 47.5%, 52% 52.5%, 48% 52.5%); opacity: 0; }
}

/* ── Death — red slam for player death ── */
/* Fast opacity slam (0→1 in first 22%), holds through midpoint, then slow reveal */
#veil.veil-death {
  background: radial-gradient(ellipse 90% 60% at 50% 50%,
    #ff1a2e 0%, #770010 55%, #0c0006 100%);
  animation: veil-death 860ms linear forwards;
  will-change: opacity;
}
@keyframes veil-death {
  0%   { opacity: 0; }
  22%  { opacity: 1; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Reboot — horizontal scanline for respawn ── */
/* Scanline sweeps top→bottom in character color, holds, then fades out */
#veil.veil-reboot {
  background: var(--veil-color, #58ffb4);
  animation: veil-reboot 480ms linear forwards;
  will-change: clip-path, opacity;
}
@keyframes veil-reboot {
  0%   { clip-path: inset(0% 0% 100% 0%); opacity: 1; }
  44%  { clip-path: inset(0% 0% 0%   0%); opacity: 1; }
  56%  { clip-path: inset(0% 0% 0%   0%); opacity: 1; }
  100% { clip-path: inset(0% 0% 0%   0%); opacity: 0; }
}