/* ══════════════════════════════════════════════════════════════════
   K14GAMES — Design System  ·  Portal A323 / Genese Creative
   Art direction: STRANGER THINGS × fliperama americano dos anos 80
   Vermelho neon assinatura + cyan frio + âmbar de gabinete sobre preto
   quente. Tipografia serifada retrô (logo) + Audiowide + Rajdhani.
   Caminhos relativos AO ARQUIVO CSS → funciona local e sob /games/
   ══════════════════════════════════════════════════════════════════ */

/* SLOT: dropar Benguiat-alike em assets/fonts/ e trocar aqui.
   A fonte real do logo Stranger Things (ITC Benguiat) é licenciada;
   por enquanto o logo usa Rozha One (serifa pesada retrô — ver abaixo).
@font-face {
  font-family: 'K14 Benguiat';
  src: url('../fonts/Benguiat-alike.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

/* Google Fonts (CSP libera fonts.googleapis / gstatic):
   - Rozha One   → logo (serifa pesada, contraste alto, ar Benguiat/ST)
   - Audiowide   → títulos / score (techno-arcade)
   - Rajdhani    → UI / corpo (condensada, legível, retrô-técnica) */
@import url('https://fonts.googleapis.com/css2?family=Rozha+One&family=Audiowide&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  /* ── Base (preto levemente quente) ── */
  --void:     #07060a;
  --black:    #050407;
  --abyss:    #0b0a10;
  --chamber:  #141019;

  /* ── PRIMÁRIO = VERMELHO NEON ST (cor-assinatura) ── */
  --red:        #e8121a;        /* vermelho neon principal */
  --red-core:   #ff2a35;        /* núcleo quente do neon */
  --red-deep:   #8c0a10;        /* vermelho profundo / sombra */

  /* alias de compatibilidade: o "signal" agora é VERMELHO (era lime) */
  --signal:     var(--red);
  --signal-dim: #a01018;

  /* ── Secundário frio ── */
  --cyan:     #18b6ff;
  --cyan-hot: #00d4ff;

  /* ── Âmbar de gabinete ── */
  --amber:    #ffae3b;

  /* ── Lime sobrevive só como detalhe pontual (não é mais a cor do hub) ── */
  --lime:     #c5f82a;

  /* ── Texto (off-white quente) ── */
  --pearl:    #ece6da;          /* off-white quente */
  --lavender: #8f8a93;          /* secundário */
  --shadow:   #5b5560;
  --label:    #7a7480;

  /* ── Sistema ── */
  --ease:     cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --gap:      8px;
  --maxw:     1600px;

  --font-display: 'Audiowide', 'Rajdhani', sans-serif;     /* títulos / score */
  --font-logo:    'K14 Benguiat', 'Rozha One', 'Playfair Display', serif; /* logo ST */
  --font-mono:    'Rajdhani', ui-sans-serif, sans-serif;   /* UI / corpo */
}

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

html, body {
  background:
    radial-gradient(ellipse 70% 45% at 50% -10%, rgba(232,18,26,.10), transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(24,182,255,.06), transparent 60%),
    var(--void);
  color: var(--pearl);
  font-family: var(--font-mono);
  min-height: 100vh;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
canvas { display: block; }

/* ── Tipografia utilitária ── */
.k14 { font-family: var(--font-display); letter-spacing: .02em; }
.mono { font-family: var(--font-mono); }
.signal { color: var(--red); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--red);
  text-shadow: 0 0 10px rgba(232,18,26,.45);
}

/* ── Wordmark "K14 GAMES" — letreiro de neon ao estilo Stranger Things ──
   Serifa pesada (Rozha One), vermelho, glow em camadas + contorno fino. */
.wordmark {
  font-family: var(--font-logo);
  font-weight: 400;                 /* Rozha One só tem 400, mas é display-heavy */
  font-size: clamp(28px, 6vw, 64px);
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-core);
  -webkit-text-stroke: 1px rgba(255,180,170,.55);   /* contorno fino claro */
  text-shadow:
    0 0 6px   rgba(255,42,53,.95),
    0 0 16px  rgba(232,18,26,.85),
    0 0 34px  rgba(232,18,26,.65),
    0 0 64px  rgba(232,18,26,.45),
    0 0 96px  rgba(140,10,16,.40);
}
.wordmark b {
  color: var(--pearl);
  font-weight: 400;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 8px rgba(236,230,218,.6),
    0 0 22px rgba(24,182,255,.35);   /* leve halo cyan no GAMES */
}

/* flicker sutil de neon (apagão→reacende), respeitando reduced-motion */
.neon-flicker { animation: neon-flicker 6.5s steps(1,end) infinite; }
@keyframes neon-flicker {
  0%, 100%   { opacity: 1; }
  41%        { opacity: 1; }
  42%        { opacity: .35; }
  43%        { opacity: 1; }
  68%        { opacity: 1; }
  69%        { opacity: .5; }
  70%        { opacity: 1; }
  70.5%      { opacity: .7; }
  71%        { opacity: 1; }
}

/* ── CRT scanlines (aplicar em body.crt ou .crt) — leve avermelhada ── */
.crt::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(180deg,
    transparent 0 1px, rgba(232,18,26,.035) 1px 2px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9000;
}

/* ── Cantos de assinatura (envolver com .brackets) ── */
.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  pointer-events: none; z-index: 2;
}
.brackets::before {
  top: 4px; left: 4px;
  border-top: 1px solid var(--red); border-left: 1px solid var(--red);
}
.brackets::after {
  bottom: 4px; right: 4px;
  border-bottom: 1px solid var(--red); border-right: 1px solid var(--red);
}

/* ── Botão padrão (marquise vermelha acesa) ── */
.btn {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--pearl);
  background: linear-gradient(180deg, var(--red-core), var(--red));
  border: none; padding: 13px 24px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
  box-shadow:
    0 0 0 1px rgba(255,180,170,.25) inset,
    0 0 22px -4px rgba(232,18,26,.7);
}
.btn:hover {
  transform: translateY(-1px); filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(255,180,170,.4) inset,
    0 8px 30px -6px rgba(232,18,26,.85);
}
.btn.ghost {
  background: transparent; color: var(--red-core);
  border: 1px solid rgba(232,18,26,.5);
  box-shadow: 0 0 18px -8px rgba(232,18,26,.6);
  text-shadow: 0 0 12px rgba(232,18,26,.55);
}
.btn.ghost:hover { background: rgba(232,18,26,.10); }

/* ── Barra de retorno (páginas de jogo) ── */
.k14-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 18px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--label);
  background: linear-gradient(180deg, rgba(7,6,10,.88), transparent);
  backdrop-filter: blur(2px);
}
.k14-bar a { color: var(--red); text-decoration: none; }
.k14-bar a:hover { text-shadow: 0 0 12px rgba(232,18,26,.8); }

/* ── HUD genérico ── */
.hud {
  font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pearl);
}
.hud .num { color: var(--red); font-variant-numeric: tabular-nums; }

/* ── Estados de carregamento / erro / unsupported ── */
.k14-overlay {
  position: fixed; inset: 0; z-index: 8000;
  display: grid; place-items: center; text-align: center;
  background: var(--void); color: var(--lavender);
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; font-size: 13px; gap: 14px;
  padding: 24px;
}
.k14-overlay .big {
  font-family: var(--font-logo); font-size: 26px;
  color: var(--red-core); letter-spacing: .05em;
  text-shadow: 0 0 18px rgba(232,18,26,.7), 0 0 46px rgba(232,18,26,.4);
}
.k14-overlay.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .neon-flicker { opacity: 1 !important; }
}