/* ============================================================
   KAIJU PROTOCOL — shared pixel/CRT theme
   Mood: deep navy-black, slate panels, kaiju-red primary.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Silkscreen:wght@400;700&display=swap');

:root {
  /* core palette */
  --kp-void:    #070a0f;   /* deepest bg */
  --kp-bg:      #0a0e14;   /* base bg */
  --kp-bg2:     #0e131c;   /* raised bg */
  --kp-panel:   #1b2735;   /* slate panel */
  --kp-panel2:  #2a3a4d;   /* lighter panel / borders */
  --kp-line:    #34465c;   /* hairline */

  /* sea + land (pixel scenes) */
  --kp-sea-d:   #0f2c40;
  --kp-sea:     #16384f;
  --kp-sea-l:   #1f5675;
  --kp-foam:    #4d8fb8;
  --kp-sand:    #b89a63;
  --kp-sand-d:  #8f7647;
  --kp-grass:   #2f5d44;
  --kp-grass-d: #234a36;

  /* accents — shared chroma, varied hue */
  --kp-red:     #d94f3d;   /* kaiju / primary */
  --kp-red-d:   #a83226;
  --kp-amber:   #f0a500;   /* alert / warning */
  --kp-green:   #4fd99a;   /* safe / radiation-clear */
  --kp-cyan:    #4fb8d9;   /* info */

  /* text */
  --kp-ink:     #e7eef5;
  --kp-ink-dim: #93a6bb;
  --kp-ink-mut: #5c6e83;

  /* type */
  --kp-display: 'Press Start 2P', monospace;
  --kp-term:    'VT323', monospace;
  --kp-label:   'Silkscreen', monospace;

  --kp-px: 4px; /* base pixel unit; tweakable */
}

* { box-sizing: border-box; }

/* crisp pixels everywhere */
.kp-pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- type helpers ---------- */
.kp-display { font-family: var(--kp-display); line-height: 1.35; letter-spacing: 0; }
.kp-term    { font-family: var(--kp-term); line-height: 1.05; }
.kp-label   { font-family: var(--kp-label); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- CRT scanline + vignette overlay ---------- */
.kp-crt { position: relative; }
.kp-crt::before {
  content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.16) 3px,
    rgba(0,0,0,0.16) 4px
  );
  mix-blend-mode: multiply;
}
.kp-crt::after {
  content: ""; position: absolute; inset: 0; z-index: 41; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* faint rolling-flicker — respects motion tweak via [data-motion] */
@keyframes kp-flicker {
  0%, 100% { opacity: 0.045; }
  50%      { opacity: 0.085; }
}
.kp-scan-roll { position: absolute; inset: 0; z-index: 42; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0));
  height: 18%; opacity: .05; animation: kp-flicker 4s steps(8) infinite; }

/* ---------- pixel-edge boxes (no rounded corners) ---------- */
.kp-box {
  background: var(--kp-panel);
  border: 3px solid var(--kp-panel2);
  box-shadow: 0 0 0 3px var(--kp-bg), 0 8px 0 0 rgba(0,0,0,0.35);
}

/* chunky pixel button */
.kp-btn {
  font-family: var(--kp-display); font-size: 13px; color: var(--kp-ink);
  background: var(--kp-red); border: 0; cursor: pointer;
  padding: 16px 22px; position: relative; display: inline-flex; align-items: center; gap: 12px;
  box-shadow:
    inset -4px -4px 0 0 var(--kp-red-d),
    inset 4px 4px 0 0 #e87b6b,
    0 6px 0 0 #5e1a12;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
  text-transform: uppercase;
}
.kp-btn:hover { transform: translateY(2px); }
.kp-btn:active { transform: translateY(6px);
  box-shadow: inset -4px -4px 0 0 var(--kp-red-d), inset 4px 4px 0 0 #e87b6b, 0 0 0 0 #5e1a12; }

.kp-btn--ghost {
  background: transparent; color: var(--kp-ink);
  box-shadow: inset 0 0 0 3px var(--kp-panel2); }
.kp-btn--ghost:hover { box-shadow: inset 0 0 0 3px var(--kp-line); transform: translateY(2px); }

/* tiny tag/chip */
.kp-chip {
  font-family: var(--kp-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kp-ink-dim); padding: 6px 10px; border: 2px solid var(--kp-line);
  display: inline-flex; align-items: center; gap: 7px; background: rgba(0,0,0,.25);
}
.kp-chip .dot { width: 7px; height: 7px; background: var(--kp-green); display: inline-block; }

/* blinking caret / cursor */
@keyframes kp-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.kp-caret { animation: kp-blink 1s steps(1) infinite; }

/* canvas pixel scene wrapper */
.kp-scene { image-rendering: pixelated; display: block; width: 100%; height: 100%; }