/* =========================================================
   DNBKompilacija#009 — Design Tokens
   Underground D&B + pixel-arcade aesthetic.
   Source of truth for all CSS variables, fonts, and the
   handful of utility classes shared across every page.
   ========================================================= */

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

:root {
  /* ---------- Palette ---------- */
  --color-bg:           #0b1410;   /* deep green-black field          */
  --color-surface:      #142420;   /* card / panel                    */
  --color-surface-alt:  #1d3530;   /* hover, secondary panel          */
  --color-primary:      #3dff9a;   /* Space Invaders neon green       */
  --color-primary-dim:  #1fa863;   /* pressed / disabled primary      */
  --color-accent:       #7a1fff;   /* purple organic accent           */
  --color-accent-deep:  #4b00b3;   /* shadow side of accent           */
  --color-text:         #f4efe6;   /* bone-white                      */
  --color-text-dim:     #8a8c83;   /* muted gray                      */
  --color-danger:       #ff2e4d;   /* warning red                     */
  --color-line:         #2a463f;   /* hairline / divider              */

  /* ---------- Type ---------- */
  --font-display: 'Press Start 2P', monospace;   /* hero, scores, LED   */
  --font-mono:    'Space Mono', ui-monospace, monospace; /* body / UI   */
  --font-alt:     'VT323', monospace;            /* big arcade numerals */

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   20px;
  --fs-xl:   28px;
  --fs-2xl:  40px;
  --fs-3xl:  64px;

  --lh-tight: 1.1;
  --lh-body:  1.5;

  /* ---------- Spacing (4-8-16-24-40-64) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 40px;
  --sp-6: 64px;

  /* ---------- Radii (pixel-flat) ---------- */
  --r-0: 0;
  --r-1: 2px;

  /* ---------- Hard pixel shadows ---------- */
  --sh-pixel-sm: 2px 2px 0 0 var(--color-accent-deep);
  --sh-pixel-md: 4px 4px 0 0 var(--color-accent-deep);
  --sh-pixel-lg: 6px 6px 0 0 var(--color-accent-deep);
  --sh-pixel-primary: 4px 4px 0 0 var(--color-primary-dim);
  --sh-pixel-danger:  4px 4px 0 0 #8a0019;
  --sh-inset-led: inset 0 0 0 2px var(--color-bg),
                  inset 0 0 0 4px var(--color-primary);

  /* ---------- z-index scale ---------- */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-invader: 9000; /* the corner mini-game floats above everything   */
}

/* ---------- Reset-ish + base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--color-bg); }

body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  /* Layered background — composited from cheap CSS layers, no ::before:
       1. Drifting Space Invaders fleet (inlined SVG, tiles)
       2. Pixel grid x/y (graph-paper texture)
       3. Two soft purple radial glows
       4. Deep base color
     Single fixed background means no stacking-context interaction with
     position: fixed descendants (the invader PLAY FAB had been getting
     bumped down on iOS Safari when a ::before was layered behind it). */
  background:
    /* Drifting invader silhouettes — opacity is intentionally low (0.10) so
       the pattern reads as a faded warehouse-poster backdrop, not as content
       competing with the foreground panels and cards. */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='32' viewBox='0 0 11 8' shape-rendering='crispEdges'><g fill='%233dff9a' fill-opacity='0.10'><rect x='1' y='0' width='2' height='1'/><rect x='8' y='0' width='2' height='1'/><rect x='2' y='1' width='2' height='1'/><rect x='7' y='1' width='2' height='1'/><rect x='2' y='2' width='7' height='1'/><rect x='1' y='3' width='3' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='7' y='3' width='3' height='1'/><rect x='0' y='4' width='11' height='1'/><rect x='0' y='5' width='1' height='1'/><rect x='2' y='5' width='7' height='1'/><rect x='10' y='5' width='1' height='1'/><rect x='0' y='6' width='1' height='1'/><rect x='2' y='6' width='1' height='1'/><rect x='8' y='6' width='1' height='1'/><rect x='10' y='6' width='1' height='1'/><rect x='3' y='7' width='2' height='1'/><rect x='6' y='7' width='2' height='1'/></g></svg>") 0 0 / 88px 64px repeat,
    repeating-linear-gradient(0deg,  rgba(61,255,154,0.035) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(61,255,154,0.035) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 20% 30%, rgba(122,31,255,0.22), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(122,31,255,0.18), transparent 50%),
    var(--color-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Phosphor glow on display headings — gives them a soft CRT halo without
   touching the body text. Targets only h1/h2 styled by the display font. */
h1, h2 {
  text-shadow:
    0 0 6px rgba(61,255,154,0.45),
    0 0 18px rgba(61,255,154,0.18);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  margin: 0 0 var(--sp-3);
  color: var(--color-text);
  overflow-wrap: anywhere;
}
/* Press Start 2P is ~1.2× the width of a normal monospace at the same size,
   so headings that don't set their own font-size still need viewport-based
   shrinking on narrow phones. Per-page rules can still override. */
h1 { font-size: clamp(1rem, 4.5vw, 2rem); }
h2 { font-size: clamp(0.9rem, 3.5vw, 1.5rem); }
h3 { font-size: clamp(0.85rem, 3vw, 1.25rem); }

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- Utilities ---------- */

/* Chunky pixel border: doubled offset shadow = looks stacked / arcade-cabinet */
.px-border {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--r-0);
  box-shadow: var(--sh-pixel-md);
}

.px-border--accent {
  border-color: var(--color-accent);
  box-shadow: 4px 4px 0 0 var(--color-accent-deep);
}

.px-border--danger {
  border-color: var(--color-danger);
  box-shadow: var(--sh-pixel-danger);
}

/* Big arcade button */
.px-btn {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-bg);
  background: var(--color-primary);
  border: 2px solid var(--color-bg);
  border-radius: var(--r-0);
  box-shadow: var(--sh-pixel-md);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.px-btn:hover  { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 0 var(--color-accent-deep); }
.px-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--color-accent-deep); }
.px-btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.px-btn--danger{ background: var(--color-danger); color: var(--color-text); }

/* LED segmented score readout */
.px-led {
  display: inline-grid;
  grid-auto-flow: column;
  gap: var(--sp-1);
  padding: var(--sp-2);
  background: var(--color-bg);
  border: 2px solid var(--color-primary);
  font-family: var(--font-alt);
  font-size: var(--fs-xl);
  color: var(--color-primary);
}
.px-led__cell {
  width: 14px; height: 22px;
  background: var(--color-surface-alt);
}
.px-led__cell--on { background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-bg) inset; }

/* Mono caption / label */
.px-label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.px-divider {
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-primary) 0 8px,
    transparent 8px 16px
  );
  border: 0;
  margin: var(--sp-4) 0;
}

/* Scanline overlay (optional, apply to <body> or hero) */
.px-scanlines {
  position: relative;
}
.px-scanlines::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0 2px,
    transparent 2px 4px
  );
  mix-blend-mode: multiply;
}

/* ---------- Mobile / narrow-viewport overrides ----------
   Single global breakpoint that shrinks the design tokens so titles, big
   numerics, and spacing all scale down at once. Page-specific layout
   adjustments live in the route files near their grids/flex containers. */
@media (max-width: 640px) {
  :root {
    --fs-3xl: 32px;
    --fs-2xl: 20px;
    --fs-xl:  18px;
    --fs-lg:  15px;
    --sp-5: 24px;
    --sp-6: 40px;
  }
  body { font-size: 15px; }
  /* NOTE intentionally NOT setting overflow-x:hidden on body/html — that
     breaks position: fixed in iOS Safari (the invader PLAY FAB scrolls with
     the page instead of pinning to the viewport bottom-right). If a specific
     element is overflowing, fix that element directly. */
  /* Smaller compact button for narrow screens — same shape, less padding. */
  .px-btn { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); }
  /* Forms reading edge-to-edge feel more natural on phones. */
  input[type=text], input[type=number], input[type=url], input[type=password], input[type=email] {
    width: 100%; max-width: 100%;
  }
}