/*
 * main-cyberpunk.css — Direction 1: Cyberpunk Refined
 * Hex values lifted verbatim from design/directions/cyberpunk.jsx:6-19.
 * Loaded ONLY when body[data-redesign-theme="cyberpunk"]; main-redesign-base.css
 * provides the legacy-token bridge.
 */

body[data-redesign-theme="cyberpunk"] {
  --rd-bg:                 #0a0e1f;
  --rd-bg-elevated:        #060814;
  --rd-panel:              #141a30;
  --rd-panel-hi:           #1c2440;

  --rd-ink:                #e8ecff;
  --rd-ink-dim:            #8891b8;
  --rd-line:               rgba(126, 142, 200, 0.18);

  --rd-accent:             oklch(70% 0.22 340);   /* magenta */
  --rd-accent-hi:          oklch(78% 0.15 200);   /* cyan */
  --rd-accent-dim:         oklch(45% 0.15 340);

  --rd-success:            oklch(78% 0.18 150);
  --rd-warning:            oklch(82% 0.18 75);    /* amber */
  --rd-danger:             oklch(65% 0.22 25);

  --rd-font-display:       'Rajdhani', system-ui, sans-serif;
  --rd-font-body:          'Inter', system-ui, sans-serif;
  --rd-font-mono:          'JetBrains Mono', ui-monospace, monospace;

  --rd-radius-sm:          2px;
  --rd-radius-md:          6px;
  --rd-radius-lg:          8px;

  --rd-border-style:       1px solid var(--rd-line);
  --rd-shadow-card:        0 0 24px color-mix(in oklab, var(--rd-accent) 25%, transparent);

  --rd-text-display-case:    uppercase;
  --rd-text-display-tracking: 0.04em;
}

/* Backdrop: deep navy gradient + faint grid + subtle scanlines.
 * Mirrors directions/cyberpunk.jsx:22-50 (CpBackdrop). */
body[data-redesign-theme="cyberpunk"]::before {
  background:
    radial-gradient(ellipse at 20% 10%, oklch(45% 0.18 340 / 0.25), transparent 50%),
    radial-gradient(ellipse at 90% 90%, oklch(55% 0.15 200 / 0.18), transparent 50%),
    linear-gradient(180deg, #0a0e1f 0%, #060814 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.03) 2px 3px),
    repeating-linear-gradient(0deg, rgba(126, 142, 200, 0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(126, 142, 200, 0.06) 0 1px, transparent 1px 48px);
  background-image: url("/pictures/pixel-art.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  }

/* A ready scene replaces the static art without changing content stacking.
 * The body background paints behind negative-z decorative layers. */
body[data-redesign-theme="cyberpunk"] .rd-cyberpunk-city {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
  pointer-events: none;
}
body[data-redesign-theme="cyberpunk"][data-cyberpunk-city-ready]::before {
  background-image: none;
  background-color: transparent;
}

/* ---- XP gain cards (public/scripts/plugins/player/xpDisplay.js) ----
 * Streak tier colors, read by the cards through --xp-tier-*. Accent is the
 * border and glow; -ink, when set, is the text. Neon on every tier. */
body[data-redesign-theme="cyberpunk"] {
  --xp-tier-base:          var(--rd-accent);
  --xp-tier-green:         var(--rd-success);
  --xp-tier-blue:          var(--rd-accent-hi);
  --xp-tier-purple:        oklch(72% 0.22 295);   /* electric violet */
  --xp-tier-gold:          oklch(86% 0.17 88);
  --xp-tier-gold-shine:    oklch(96% 0.07 95);
  --xp-tier-max:           oklch(64% 0.25 28);
  --xp-tier-max-ink:       oklch(84% 0.15 62);
  --xp-tier-max-bright:    oklch(80% 0.19 55);
  --xp-tier-elimination:   var(--rd-danger);
  --xp-tier-elimination-ink: oklch(72% 0.19 25);
  --xp-flame-core:         oklch(97% 0.06 95);
  --xp-flame-body:         oklch(78% 0.19 60);
  --xp-flame-edge:         oklch(64% 0.26 350);   /* magenta-edged fire */
  --xp-text-glow-size:     16px;                  /* strong neon */
}
body[data-redesign-theme="cyberpunk"] :is(
  .xp-gain-card--streak-green,
  .xp-gain-card--streak-blue,
  .xp-gain-card--streak-purple
) {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 12px var(--xp-gain-glow);
}

/* Native hit target for the canvas turtle. It stays transparent so the scene
 * owns the artwork; its label is revealed for pointer/keyboard discoverability. */
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-control {
  position: fixed;
  z-index: 0;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: none;
  animation: none;
  cursor: pointer;
  color: var(--rd-ink);
  touch-action: manipulation;
}
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-control[hidden] {
  display: none;
}
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-control[data-obscured="true"] {
  pointer-events: none;
}
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-control:is(:hover, :focus-visible) {
  border-color: var(--rd-accent-hi);
  outline: 2px solid var(--rd-accent-hi);
  outline-offset: 3px;
  background: transparent;
  transform: none;
  box-shadow: 0 0 16px color-mix(in oklab, var(--rd-accent-hi) 40%, transparent);
}
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-label {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(240px, calc(100vw - 32px));
  padding: 7px 10px;
  border: 1px solid var(--rd-accent-hi);
  border-radius: 3px;
  background: var(--rd-bg-elevated);
  color: var(--rd-ink);
  font: 600 12px var(--rd-font-mono);
  text-align: left;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
}
body[data-redesign-theme="cyberpunk"] .rd-city-turtle-control:is(:hover, :focus-visible) .rd-city-turtle-label {
  opacity: 1;
}