/* ============================================================================
   Mos AIsley · shared theme
   ============================================================================
   Design tokens, typography, CRT atmospherics, and the top nav. Linked from
   cantina.html, play.html, and mockups.html. Page-specific layout styles stay
   inline in each page.

   Palette intent:
     · deep warm-black background (Tatooine night)
     · sodium amber primary  — sodium street-lamp glow, neon sign
     · console cyan secondary — Neuromancer ICE / data
     · magenta accent        — sparing, for warnings + flair
     · phosphor green        — live/OK status only

   Typography:
     · JetBrains Mono dominant — terminal-y, sets the agent-native register
     · Space Grotesk for display headings
     · VT323 reserved for retro pixel-font moments (e.g., SVG zone labels)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --bg:        #08070a;
  --bg-warm:   #0e0a07;
  --surface:   #14100b;
  --surface-2: #1c1610;
  --surface-3: #261d14;

  /* Ink */
  --ink:       #ede4d0;
  --ink-dim:   #a39682;
  --muted:     #6b6150;
  --rule:      #2a2218;
  --rule-dim:  #1e1810;

  /* Accents */
  --amber:     #ffa838;
  --amber-2:   #d97a1f;
  --amber-3:   #6e3f10;
  --cyan:      #6fe9ff;
  --cyan-2:    #3aa9c4;
  --cyan-dim:  #1e4f5c;
  --magenta:   #ff5db1;
  --green:     #9fd864;
  --red:       #ff6b56;

  /* Type stacks */
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display: "Space Grotesk", var(--mono);
  --crt:     "VT323", var(--mono);
}

/* ---------- Reset + base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(255,168,56,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 100%, rgba(111,233,255,0.04) 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Subtle screen flicker — irregular, not headache-inducing */
  animation: theme-flicker 7s infinite;
}

a { color: var(--cyan); text-decoration: none; border-bottom: 1px dashed var(--cyan-dim); }
a:hover { color: #fff; border-bottom-color: var(--cyan); }
::selection { background: var(--amber); color: var(--bg); }

@keyframes theme-flicker {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.78; }
  98%           { opacity: 1; }
  99%           { opacity: 0.86; }
}

/* ---------- CRT atmospherics ----------
   Three stacked overlays:
     body::before — heavy horizontal scanlines + faint sub-pixel color hatch
     body::after  — radial vignette (off-center hot spot at top-right)
     .grain (DOM) — animated SVG turbulence noise, jitters every 1.6s
     .roll  (DOM) — slow vertical scanline drift (CRT vertical-hold tick)
*/
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0)    0px,
      rgba(0,0,0,0)    2px,
      rgba(0,0,0,0.32) 3px,
      rgba(0,0,0,0)    4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,168,56,0)     0px,
      rgba(255,168,56,0.025) 1px,
      rgba(0,0,0,0)          2px,
      rgba(111,233,255,0.025) 3px,
      rgba(0,0,0,0)          4px
    );
  mix-blend-mode: multiply;
  opacity: 0.7;
}

body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 101;
  background:
    radial-gradient(ellipse 100% 70% at 65% 35%, transparent 30%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.78) 100%);
}

.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 102;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.7' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.7   0 0 0 0 0.4   0 0 0 0.85 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  background-size: 220px 220px;
  animation: grain 1.6s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%,  1%); }
  40%  { transform: translate( 1%, -2%); }
  60%  { transform: translate(-1%,  2%); }
  80%  { transform: translate( 2%,  1%); }
  100% { transform: translate(0, 0); }
}

.roll {
  position: fixed; left: 0; right: 0;
  height: 110px; pointer-events: none; z-index: 103;
  background: linear-gradient(
    180deg,
    rgba(255,168,56,0)     0%,
    rgba(255,168,56,0.04)  45%,
    rgba(255,255,255,0.06) 50%,
    rgba(111,233,255,0.04) 55%,
    rgba(0,0,0,0)          100%
  );
  mix-blend-mode: screen;
  animation: roll 9s linear infinite;
}

@keyframes roll {
  0%   { top: -110px; }
  100% { top: 100vh; }
}

/* Lived-in color smudges (large blurred radial blooms positioned through the
   page). Use as <div class="smudge s1"></div> through s4. Optional. */
.smudge {
  position: fixed; pointer-events: none; z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}
.smudge.s1 { top: 10vh;  left: -8vw;  width: 36vw; height: 36vw; background: rgba(217,122,31,0.18); }
.smudge.s2 { top: 70vh;  right: -6vw; width: 28vw; height: 28vw; background: rgba(58,169,196,0.12); }
.smudge.s3 { top: 140vh; left: 30vw;  width: 40vw; height: 40vw; background: rgba(255,93,177,0.06); }
.smudge.s4 { top: 220vh; right: 5vw;  width: 32vw; height: 32vw; background: rgba(217,122,31,0.14); }

/* Slight desaturation/warmth shift for a 'lived-in' tint */
main, header, section, footer { filter: saturate(0.92) contrast(1.04); }

/* ---------- Layout helpers ---------- */
.wrap   { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 820px;  margin: 0 auto; padding: 0 28px; }

/* ---------- Top nav (shared across cantina/play/mockups) ---------- */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 7, 10, 0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
nav.top .inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 12px 28px;
  font-family: var(--mono); font-size: 12px;
}
nav.top .brand {
  font-family: var(--display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); border: none;
  transition: text-shadow 0.12s;
}
nav.top .brand .a { color: var(--amber); }
nav.top .brand::before { content: "▮ "; color: var(--amber); }
nav.top .brand:hover {
  text-shadow:
    -1px 0 0 var(--cyan),
     1px 0 0 var(--magenta);
}
nav.top .right { display: flex; align-items: center; gap: 24px; }
nav.top ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
nav.top ul a {
  color: var(--ink-dim); border: none;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px;
}
nav.top ul a:hover, nav.top ul a.active { color: var(--amber); }

/* Door status badge (open · N inside) — used in cantina nav */
.door-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 5px 10px;
  border: 1px solid var(--rule);
  background: var(--surface);
}
.door-status .dot {
  width: 7px; height: 7px;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: door-blink 1.4s steps(2) infinite;
}
.visitor-count {
  display: inline-block;
  transition: color 0.5s ease-out;
  min-width: 1.2em;
  text-align: center;
  color: var(--ink);
}
.visitor-count.flash { color: var(--amber); }

@keyframes door-blink { 50% { opacity: 0.25; } }

/* ---------- Distressed corner brackets ----------
   Add to any framed element with `position: relative` to get the
   amber registration-mark corner brackets seen on cantina sections.
*/
.brackets {
  position: relative;
}
.brackets::before, .brackets::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--amber);
  opacity: 0.55;
}
.brackets::before { top: -4px; left: -4px;  border-right: none; border-bottom: none; }
.brackets::after  { bottom: -4px; right: -4px; border-left: none; border-top: none; }