/* ==================================================================
   Dirtbags :: shared "artemis_run" visual layer
   ------------------------------------------------------------------
   Brings the account pages onto the same palette, panel material and
   ambience as the roguelike so the two do not feel like different sites.
   Values are copied verbatim from the game's stylesheet - if those change
   there, change them here too.
   ================================================================== */

:root {
  /* Indigo void palette (mirrors artemis_run) */
  --bg-void: #0a0714;
  --bg-deep: #120b22;
  --bg-panel: #1a1030;
  --bg-elevated: #221741;
  --bg-input: #0d0820;

  --purple-900: #2a1a4a;
  --purple-700: #4c2a7a;
  --purple-500: #7b3fa0;
  --purple-400: #9d4edd;
  --purple-300: #c77dff;
  --purple-200: #e0aaff;

  --holo-cyan: #00e5ff;
  --holo-glow: #7df9ff;
  --holo-soft: #a8f0ff;

  --text-primary: #e0aaff;
  --text-bright: #f0d9ff;
  --text-dim: #9d7ab8;
  --text-faint: #5a4278;

  --panel-bg: rgba(18, 11, 34, 0.7);

  /* Re-point the shell's own tokens at the game palette so existing
     component rules pick up the new look without being rewritten. */
  --bg: var(--bg-void);
  --panel: var(--panel-bg);
  --line: rgba(157, 78, 221, 0.28);
  --text: var(--text-primary);
  --muted: var(--text-dim);
  --cyan: var(--holo-cyan);
  --amber: #ffb347;
  --green: var(--holo-glow);
  --red: #ff4d6d;
  --purple: var(--purple-300);
}

body {
  background-color: var(--bg-void);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(0, 229, 255, 0.07), transparent 60%),
    radial-gradient(ellipse 80% 60% at 85% 0%, rgba(157, 78, 221, 0.10), transparent 55%);
  color: var(--text-primary);
  font-family: 'Fira Code', 'Courier New', monospace;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------
   Ambient layers. Same stack order as the game: grid (0), scanlines (1),
   glow (1), particles (4), and page content above all of it (3).
   ------------------------------------------------------------------ */
.grid-overlay {
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(157, 78, 221, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(157, 78, 221, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
  animation: gridScroll 20s linear infinite;
  pointer-events: none;
}

@keyframes gridScroll {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );
  pointer-events: none;
  z-index: 1;
  animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
  0%   { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

.crt-glow {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(157, 78, 221, 0.06) 0%,
    rgba(0, 229, 255, 0.02) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
  animation: pulseGlow 4s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.particle {
  position: absolute;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--purple-200);
  box-shadow: 0 0 8px 1px var(--purple-300), 0 0 18px 3px rgba(157, 78, 221, 0.45);
  animation: floatParticle linear infinite;
  opacity: 0;
  will-change: transform, opacity;
}

.particle.cyan {
  background: var(--holo-glow);
  box-shadow: 0 0 10px 1px var(--holo-cyan), 0 0 22px 4px rgba(0, 229, 255, 0.5);
}

@keyframes floatParticle {
  0%   { opacity: 0; transform: translateY(112vh) scale(0.4); }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-9vh) scale(1.15); }
}

/* Content sits above the ambience. */
.shell {
  position: relative;
  z-index: 3;
}

/* ------------------------------------------------------------------
   Panel material: the game's ".alive-box" halo.
   ------------------------------------------------------------------ */
.topbar,
.panel {
  background: var(--panel-bg);
  border: 1px solid rgba(157, 78, 221, 0.28);
  box-shadow:
    0 0 2px rgba(0, 229, 255, 0.45),
    0 0 18px rgba(0, 229, 255, 0.16),
    0 0 42px rgba(0, 229, 255, 0.08),
    0 0 60px rgba(157, 78, 221, 0.14),
    inset 0 0 22px rgba(0, 229, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.brand {
  color: var(--holo-cyan);
  text-shadow: 0 0 8px var(--holo-cyan), 0 0 18px rgba(0, 229, 255, 0.45);
}

.brand span.dot { color: #ffb347; }

.panel h1,
.panel h2,
.panel h3 {
  color: var(--holo-cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
  border-bottom-color: rgba(0, 229, 255, 0.22);
}

/* Buttons follow .btn-alive */
.nav a,
.nav button,
.btn {
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.55);
  color: var(--holo-cyan);
  font-weight: 600;
  transition: all 0.15s ease-in-out;
}

.nav a:hover,
.nav button:hover,
.btn:hover {
  background: var(--holo-cyan);
  color: #06121a;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
  transform: translateY(-1px);
  text-decoration: none;
}

.stat {
  background: rgba(13, 8, 32, 0.6);
  border: 1px solid rgba(157, 78, 221, 0.28);
}

.stat .label { color: var(--text-dim); }

/* Inputs sit on the darker indigo input surface. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  background: var(--bg-input);
  border: 1px solid rgba(157, 78, 221, 0.35);
  color: var(--text-bright);
  border-radius: 7px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--holo-cyan);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.35), 0 0 14px rgba(0, 229, 255, 0.25);
}

/* Scrollbars, matched to the game. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track {
  background: rgba(13, 8, 32, 0.85);
  border: 1px solid rgba(157, 78, 221, 0.18);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.55), rgba(157, 78, 221, 0.65));
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 9999px;
  box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.35);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(125, 249, 255, 0.85), rgba(199, 125, 255, 0.9));
  border-color: var(--holo-cyan);
}
::-webkit-scrollbar-corner { background: transparent; }
* { scrollbar-color: rgba(0, 229, 255, 0.55) rgba(13, 8, 32, 0.85); }

/* Respect reduced motion for the decorative layers only. Particles keep
   drifting (just far slower) and that slowdown is applied in JS so the
   field cannot collapse into a band. */
@media (prefers-reduced-motion: reduce) {
  .grid-overlay,
  .scanlines,
  .crt-glow { animation: none; }
}