globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
  --crt-bg: #1a1d14;
  --crt-dim: #0d0f08;
  --crt-ink: #d9c9a3;
  --crt-amber: #c9a227;
  --crt-green: #6b8e5a;
  --crt-blood: #7a2828;
  --scan-strength: 0.22;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--crt-dim);
  color: var(--crt-ink);
  font-family: var(--font-vt323), "VT323", "Courier New", monospace;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

body {
  background-color: var(--crt-bg);
  background-image:
    radial-gradient(ellipse at center, rgba(201, 162, 39, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.35) 3px,
      rgba(0, 0, 0, 0) 4px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%231a1d14'/><circle cx='1' cy='1' r='0.6' fill='%238c7a4e' opacity='0.35'/><circle cx='5' cy='3' r='0.5' fill='%23c9a227' opacity='0.18'/><circle cx='3' cy='6' r='0.5' fill='%236b8e5a' opacity='0.2'/></svg>");
  background-size: auto, auto, 8px 8px;
  min-height: 100vh;
  position: relative;
}

/* Global CRT overlays: vignette, scanlines, noise, color fringe.
   pointer-events:none so they never intercept clicks. */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}

.crt-overlay--vignette {
  /* Softer vignette: smaller dark ring, falls off earlier. The edges should
     feel warm-dim, not light-crushed — nav and corner UI must stay legible. */
  box-shadow: inset 0 0 80px 10px rgba(0, 0, 0, 0.55),
    inset 0 0 260px 80px rgba(0, 0, 0, 0.35);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 68%,
    rgba(0, 0, 0, 0.35) 100%
  );
}

/* Burn-in: faint amber ghost at the top where old CRTs held a logo too long.
   This gives the corners *atmosphere* so softening the vignette doesn't
   leave them feeling empty and modern. */
.crt-overlay--burnin {
  background:
    radial-gradient(
      ellipse 80% 18% at 50% 0%,
      rgba(201, 162, 39, 0.12) 0%,
      rgba(201, 162, 39, 0) 70%
    ),
    radial-gradient(
      ellipse 40% 30% at 85% 100%,
      rgba(107, 142, 90, 0.08) 0%,
      rgba(107, 142, 90, 0) 70%
    );
  mix-blend-mode: screen;
}

.crt-overlay--scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, calc(var(--scan-strength) * 1)) 0px,
    rgba(0, 0, 0, calc(var(--scan-strength) * 1)) 1px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0) 3px
  );
  background-size: 100% 3px;
  mix-blend-mode: multiply;
  animation: scanshift 8s linear infinite;
}

.crt-overlay--noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.62  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  animation: noiseShift 0.18s steps(2) infinite;
}

.crt-overlay--fringe {
  background: linear-gradient(
    90deg,
    rgba(201, 40, 40, 0.05) 0%,
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 92%,
    rgba(40, 120, 200, 0.06) 100%
  );
  mix-blend-mode: screen;
}

@keyframes noiseShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-0.5%, -0.5%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 640px) {
  /* Mobile: drop the heavy scanlines, keep vignette + pixel fonts. */
  .crt-overlay--scanlines {
    display: none;
  }
  .crt-overlay--noise {
    opacity: 0.1;
  }
}

/* Scrollbar — chunky beige bevel, like a dead OS */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}
::-webkit-scrollbar-track {
  background: #2b2a1c;
  box-shadow: inset 2px 2px 0 #0d0f08, inset -2px -2px 0 #3e3a25;
}
::-webkit-scrollbar-thumb {
  background: #8c7a4e;
  box-shadow: inset 2px 2px 0 #d9c9a3, inset -2px -2px 0 #3a3528;
}
::-webkit-scrollbar-thumb:hover {
  background: #a89560;
}
::-webkit-scrollbar-corner {
  background: #2b2a1c;
}

/* Pixel selection */
::selection {
  background: var(--crt-amber);
  color: #171a12;
}

/* ---------- Component-ish utilities used across pages ---------- */

.pixel-title {
  font-family: var(--font-press-start), "Press Start 2P", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--crt-amber);
  text-shadow:
    0 0 1px #f2d06b,
    0 0 8px rgba(201, 162, 39, 0.55),
    2px 2px 0 #3a2a08,
    -1px 0 0 rgba(201, 40, 40, 0.45),
    1px 0 0 rgba(40, 120, 200, 0.45);
}

.pixel-title--flicker {
  animation: flicker 3.4s infinite steps(1);
}

.pixel-title[data-text]::before,
.pixel-title[data-text]::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.pixel-title[data-text]::before {
  color: #c9284040;
  transform: translate(-2px, 0);
  clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%);
  animation: glitch 3.2s infinite steps(1);
}
.pixel-title[data-text]::after {
  color: #2878c840;
  transform: translate(2px, 0);
  clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
  animation: glitch 2.6s infinite steps(1) reverse;
}

.retro-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-press-start), "Press Start 2P", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1710;
  background: repeating-linear-gradient(
      45deg,
      #c9a227 0 2px,
      #b48b1c 2px 4px
    ),
    #c9a227;
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #f2d06b,
    inset -2px -2px 0 #5a4210,
    inset 4px 4px 0 #d9b43a,
    inset -4px -4px 0 #3a2a08,
    0 2px 0 #0d0f08;
  cursor: pointer;
  user-select: none;
  transition: transform 80ms linear;
}

.retro-button:hover {
  filter: contrast(1.1) saturate(1.1);
}

.retro-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.0) 0 12px,
    rgba(255, 255, 255, 0.15) 12px 13px
  );
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}

.retro-button:hover::before {
  opacity: 1;
}

.retro-button:active {
  transform: translateY(2px);
  box-shadow:
    inset -2px -2px 0 #f2d06b,
    inset 2px 2px 0 #5a4210,
    inset -4px -4px 0 #d9b43a,
    inset 4px 4px 0 #3a2a08;
}

.retro-button:disabled {
  cursor: wait;
  opacity: 0.75;
  animation: glitch 0.9s infinite steps(1);
}

.retro-button--danger {
  background: repeating-linear-gradient(
      45deg,
      #8b3a2b 0 2px,
      #6a2a20 2px 4px
    ),
    #8b3a2b;
  color: #f5e1c4;
  box-shadow:
    inset 2px 2px 0 #c87a5e,
    inset -2px -2px 0 #2a1208,
    inset 4px 4px 0 #a35a40,
    inset -4px -4px 0 #1a0a04,
    0 2px 0 #0d0f08;
}

.retro-button--ghost {
  background: #1a1d14;
  color: var(--crt-ink);
  box-shadow:
    inset 2px 2px 0 #3a3528,
    inset -2px -2px 0 #0d0f08;
}

.retro-panel {
  position: relative;
  background: linear-gradient(180deg, #252418 0%, #1a1d14 100%);
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #6b5e38,
    inset -2px -2px 0 #0d0f08,
    inset 4px 4px 0 #3e3a25,
    inset -4px -4px 0 #06060a;
  padding: 1.25rem;
}

.retro-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
}

.retro-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-vt323), "VT323", monospace;
  font-size: 1.25rem;
  color: var(--crt-amber);
  background: #0d0f08;
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #0a0a04,
    inset -2px -2px 0 #3e3a25;
  outline: none;
  caret-color: var(--crt-amber);
}

.retro-input:focus {
  box-shadow:
    inset 2px 2px 0 #0a0a04,
    inset -2px -2px 0 #c9a227,
    0 0 0 2px rgba(201, 162, 39, 0.45);
}

/* Glitch decay for Hall-of-Fame names — applied via class, triggered at random */
.name-glitch {
  position: relative;
}
.name-glitch[data-glitch="1"] {
  animation: glitch 0.9s steps(1);
}
.name-glitch[data-glitch="1"]::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #c92840;
  transform: translate(-2px, 1px);
  clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.name-glitch[data-glitch="1"]::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: #2878c8;
  transform: translate(2px, -1px);
  clip-path: polygon(0 55%, 100% 55%, 100% 85%, 0 85%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Corner "display error" stripes */
.error-stripe {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    #c92840 0 6px,
    #c9a227 6px 12px,
    #2878c8 12px 18px,
    #6b8e5a 18px 24px
  );
  mix-blend-mode: screen;
  opacity: 0.35;
}

.error-stripe--tl {
  top: 8px;
  left: 8px;
  width: 90px;
  height: 6px;
}
.error-stripe--br {
  bottom: 8px;
  right: 8px;
  width: 120px;
  height: 6px;
}

/* Digit roller for the visitor counter */
.digit-reel {
  display: inline-block;
  width: 1ch;
  height: 1em;
  overflow: hidden;
  vertical-align: top;
}
.digit-reel > span {
  display: block;
  animation: rolldigit 0.45s steps(10) 1;
}

@keyframes rolldigit {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.55; }
}

@keyframes glitch {
  0%, 92%, 100% { transform: translate(0, 0) skew(0); }
  93% { transform: translate(-2px, 1px) skew(-0.8deg); }
  94% { transform: translate(2px, -1px) skew(0.6deg); }
  95% { transform: translate(-1px, 0) skew(0); }
}

/* ---------- Control strip (header) ---------- */

/* A brushed-aluminum strip screwed to the top bezel. Exists to make the nav
   visible without breaking the "physical object" illusion. */
.control-strip {
  position: relative;
  background:
    linear-gradient(180deg, #4a4432 0%, #2e2a1c 48%, #1f1b12 52%, #2a2518 100%),
    #2a2518;
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #8c7a4e,
    inset -2px -2px 0 #0d0f08,
    inset 4px 4px 0 #5a4e30,
    inset -4px -4px 0 #06060a,
    0 3px 0 rgba(0, 0, 0, 0.5);
  padding: 0.45rem 1rem;
}

/* Brushed metal texture + horizontal grain */
.control-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      rgba(0, 0, 0, 0) 1px 3px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0 1px,
      rgba(0, 0, 0, 0) 1px 2px
    );
  mix-blend-mode: overlay;
}

/* Screws in the corners to sell the "screwed to the bezel" conceit */
.control-strip-screw {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9c9a3 0%, #8c7a4e 40%, #3a3528 100%);
  box-shadow: inset 0 0 0 1px #0d0f08, 0 1px 0 rgba(0, 0, 0, 0.5);
}
.control-strip-screw::after {
  /* minus-head slot */
  content: "";
  position: absolute;
  inset: 4px 1.5px;
  background: #1a1710;
  transform: rotate(calc(var(--screw-rot, 25) * 1deg));
  box-shadow: 0 0 1px #000;
}

/* A new chip style just for the nav — reads clearly on the metal strip.
   Same bevel vocabulary as retro-button but with a glassy illuminated face. */
.nav-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-press-start), "Press Start 2P", monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2e4a8;
  background:
    linear-gradient(180deg, #2e3624 0%, #1a1d14 100%);
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #6b8e5a,
    inset -2px -2px 0 #0d0f08,
    inset 4px 4px 0 rgba(107, 142, 90, 0.35),
    0 0 10px rgba(201, 162, 39, 0.15);
  text-shadow: 0 0 6px rgba(201, 162, 39, 0.65), 0 1px 0 #000;
  cursor: pointer;
  user-select: none;
  transition: filter 120ms, transform 80ms;
}

.nav-chip:hover {
  filter: brightness(1.25) saturate(1.15);
}

.nav-chip:active {
  transform: translateY(1px);
}

/* A blinking "power on" LED beside each nav chip */
.nav-chip-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9a227;
  box-shadow: 0 0 6px #c9a227, 0 0 10px rgba(201, 162, 39, 0.5);
  animation: led-pulse 2.8s steps(1) infinite;
}
.nav-chip-led--green {
  background: #9bc47a;
  box-shadow: 0 0 6px #6b8e5a, 0 0 10px rgba(107, 142, 90, 0.5);
}

@keyframes led-pulse {
  0%, 70%, 100% { opacity: 1; }
  72%, 76% { opacity: 0.35; }
}

/* Active nav chip — deeper seat, amber glow */
.nav-chip[data-active="true"] {
  color: #1a1710;
  background: linear-gradient(180deg, #d9b43a 0%, #a88418 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow:
    inset -2px -2px 0 #f2d06b,
    inset 2px 2px 0 #5a4210,
    inset -4px -4px 0 #d9b43a,
    inset 4px 4px 0 #3a2a08,
    0 0 12px rgba(201, 162, 39, 0.5);
}

/* ---------- DIP-switch language toggle ---------- */

/* A two-position slide switch, like you'd find on a 1998 motherboard for
   jumper settings. The slider physically moves between EN and 中. */
.dip-switch {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  background: linear-gradient(180deg, #1a1710 0%, #2a2518 100%);
  border: 2px solid #0d0f08;
  box-shadow:
    inset 2px 2px 0 #0a0a04,
    inset -2px -2px 0 #3e3a25,
    0 1px 0 rgba(0, 0, 0, 0.5);
  user-select: none;
  cursor: pointer;
  font-family: var(--font-press-start), "Press Start 2P", monospace;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}

.dip-switch-label {
  padding: 6px 9px;
  color: #5a4e30;
  text-shadow: 0 1px 0 #000;
  transition: color 200ms;
  z-index: 1;
  position: relative;
  min-width: 2.4em;
  text-align: center;
}

.dip-switch-label[data-active="true"] {
  color: #1a1710;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* The physical slider — moves via transform, engraved with dots */
.dip-switch-slider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  background:
    linear-gradient(180deg, #d9c9a3 0%, #8c7a4e 50%, #5a4e30 100%);
  border: 1px solid #0d0f08;
  box-shadow:
    inset 1px 1px 0 #f2e4a8,
    inset -1px -1px 0 #3a3528,
    0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 200ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.dip-switch-slider::before {
  /* engraved grip dots */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 35% 50%, rgba(0, 0, 0, 0.45) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.45) 1px, transparent 1.5px),
    radial-gradient(circle at 65% 50%, rgba(0, 0, 0, 0.45) 1px, transparent 1.5px);
}

.dip-switch[data-pos="1"] .dip-switch-slider {
  transform: translateX(calc(100% + 3px));
}

/* ---------- Custom pixel cursor ---------- */

/* The cursor is a real DOM element driven by pointermove. We hide the native
   cursor only when the custom one is active (it enables itself on pointer
   devices and disables on touch / reduced-motion). */
html[data-pixel-cursor="1"],
html[data-pixel-cursor="1"] * {
  cursor: none !important;
}

.pixel-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 200;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  /* No CSS transition — JS lerps the position so it feels heavy but
     responsive. Transition here would fight the animation loop. */
}

/* A pixel-drawn reticle (inner dot + crosshair arms + outer box) built
   entirely from pseudo-elements so there are zero image requests. */
.pixel-cursor-dot {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  background: #c9a227;
  box-shadow: 0 0 3px #c9a227, 0 0 6px rgba(201, 162, 39, 0.8);
}

.pixel-cursor-arm {
  position: absolute;
  background: #c9a227;
  box-shadow: 0 0 3px #c9a227;
}
.pixel-cursor-arm--n { top: 0; left: 50%; width: 2px; height: 5px; margin-left: -1px; }
.pixel-cursor-arm--s { bottom: 0; left: 50%; width: 2px; height: 5px; margin-left: -1px; }
.pixel-cursor-arm--w { left: 0; top: 50%; width: 5px; height: 2px; margin-top: -1px; }
.pixel-cursor-arm--e { right: 0; top: 50%; width: 5px; height: 2px; margin-top: -1px; }

.pixel-cursor-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 162, 39, 0.4);
  transition: border-color 120ms, transform 120ms, opacity 120ms;
}

/* Over interactive elements: ring tightens and turns green (phosphor LOCK) */
html[data-cursor-state="hover"] .pixel-cursor-ring {
  border-color: #9bc47a;
  transform: scale(1.3) rotate(45deg);
  box-shadow: 0 0 8px rgba(107, 142, 90, 0.7);
}
html[data-cursor-state="hover"] .pixel-cursor-dot {
  background: #9bc47a;
  box-shadow: 0 0 4px #9bc47a, 0 0 10px rgba(107, 142, 90, 0.8);
}

/* Mouse-down: ring collapses like a shutter */
html[data-cursor-state="down"] .pixel-cursor-ring {
  transform: scale(0.6);
  border-color: #c92840;
}

/* Phosphor trail — a second, lagging cursor with lower opacity */
.pixel-cursor-ghost {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  pointer-events: none;
  z-index: 199;
  transform: translate3d(-100px, -100px, 0);
  background: radial-gradient(circle, rgba(201, 162, 39, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Respect reduced-motion users: no custom cursor, no trail */
@media (prefers-reduced-motion: reduce) {
  html[data-pixel-cursor="1"],
  html[data-pixel-cursor="1"] * {
    cursor: auto !important;
  }
  .pixel-cursor,
  .pixel-cursor-ghost {
    display: none;
  }
}

/* Mobile / touch: also skip the cursor — the JS won't enable it anyway,
   but this is belt-and-braces for hybrid touch+mouse Windows tablets. */
@media (hover: none) {
  html[data-pixel-cursor="1"],
  html[data-pixel-cursor="1"] * {
    cursor: auto !important;
  }
  .pixel-cursor,
  .pixel-cursor-ghost {
    display: none;
  }
}