/* ============================================================
   AMPERIA — THE CITY TERMINAL
   Golden Dark interface system. Amber phosphor on near-black,
   brass-framed panels, quiet scanlines. Gold is the light.
   ============================================================ */

@font-face {
  font-family: 'VT323';
  src: url('../fonts/vt323-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
/* Pixel Operator — CC0 by Jayvee Enaguas. One family, three intensities:
   regular (rare), bold cut (labels/buttons — single strike), heavy cut
   (wordmark/titles — triple strike). The strikes are size-relative. */
@font-face {
  font-family: 'PixelOperator';
  src: url('../fonts/pixel-operator-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}

:root {
  /* the Golden Dark, mirrored from shared/palette.ts */
  --void:      #070509;
  --umber-1:   #0d0b10;
  --umber-2:   #16141a;
  --umber-3:   #1f1c25;
  --brass:     #6b5334;
  --brass-hi:  #9a7b4f;
  --amber:     #ffa033;
  --amber-hi:  #ffd9a0;
  --amber-lo:  #b96f1e;
  --cream:     #ffe9c4;
  --ash:       #8d7f6b;
  --teal:      #2fd3b8;   /* interactables only */
  --rose:      #ff6f91;   /* rare accent */
  --ink-line:  rgba(255,160,51,0.16);

  --font-px:   'PixelOperator', monospace;  /* display / labels */
  --font-tty:  'VT323', monospace;          /* terminal body    */
  --strike-b:  0.055em 0 0 currentColor;    /* bold cut  */
}

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

html { background: var(--void); }
body {
  background: var(--void);
  color: var(--cream);
  font-family: var(--font-tty);
  font-size: 20px;
  line-height: 1.45;
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--amber-lo); color: var(--void); }

/* ---------- CRT atmosphere ---------- */
.crt-scan {
  pointer-events:none; position:fixed; inset:0; z-index:90;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode: multiply; opacity:.55;
}
.crt-vig {
  pointer-events:none; position:fixed; inset:0; z-index:89;
  background: radial-gradient(ellipse 120% 90% at 50% 45%,
    transparent 55%, rgba(4,3,7,0.55) 100%);
}

/* ---------- brass panel ---------- */
.panel {
  position:relative;
  background: linear-gradient(180deg, rgba(19,17,22,0.92), rgba(14,12,17,0.94));
  border:1px solid var(--brass);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,217,160,0.08),
    0 12px 40px rgba(0,0,0,0.55);
}
.panel::before, .panel::after {
  content:''; position:absolute; width:8px; height:8px;
  border:1px solid var(--brass-hi); background:var(--umber-3);
}
.panel::before { top:-4px; left:-4px; }
.panel::after  { bottom:-4px; right:-4px; }

.panel-head {
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  border-bottom:1px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(28,25,34,0.75), rgba(19,17,22,0.4));
  font-family: var(--font-px); font-size:14px; letter-spacing:1px;
  color: var(--amber-hi); text-transform:uppercase; text-shadow:var(--strike-b);
}
.panel-head .lamp {
  width:7px; height:7px; background:var(--amber);
  box-shadow:0 0 8px var(--amber), 0 0 2px var(--amber);
  animation: lampflicker 4.2s infinite;
}
@keyframes lampflicker {
  0%,93%,100% { opacity:1; } 94% { opacity:.55; } 96% { opacity:.9; } 97.5% { opacity:.6; }
}
.panel-body { padding:16px 18px; }

/* ---------- type ---------- */
.px    { font-family:var(--font-px); text-shadow:var(--strike-b); }
h1,h2,h3 { font-family:var(--font-px); color:var(--amber-hi); font-weight:400; }
h1 { font-size:32px; letter-spacing:2px;
  text-shadow: 0.05em 0 0 currentColor, 0 0.05em 0 currentColor,
               0.05em 0.05em 0 currentColor, 0 0 22px rgba(255,160,51,.45); }
h2 { font-size:21px; letter-spacing:1px; margin:0 0 10px; text-shadow:var(--strike-b); }
h3 { font-size:16px; letter-spacing:.5px; color:var(--amber); text-shadow:var(--strike-b); }
p  { color:var(--cream); }
.dim  { color:var(--ash); }
.amber{ color:var(--amber); }
.hi   { color:var(--amber-hi); }
a { color:var(--amber); text-decoration:none; }
a:hover { color:var(--amber-hi); text-shadow:0 0 10px rgba(255,160,51,.6); }

.kicker {
  font-family:var(--font-px); font-size:13px; letter-spacing:3px;
  color:var(--ash); text-transform:uppercase; text-shadow:var(--strike-b);
}

/* ---------- buttons ---------- */
.btn {
  display:inline-block; cursor:pointer;
  font-family:var(--font-px); font-size:15px; letter-spacing:1px;
  text-shadow:var(--strike-b);
  padding:10px 20px 9px; text-transform:uppercase;
  border:1px solid var(--amber-lo);
  background: linear-gradient(180deg, rgba(255,160,51,0.16), rgba(255,160,51,0.05));
  color: var(--amber-hi);
  box-shadow: inset 0 1px 0 rgba(255,217,160,0.15), 0 0 18px rgba(255,160,51,0.12);
  transition: box-shadow .15s, background .15s;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(255,160,51,0.28), rgba(255,160,51,0.10));
  box-shadow: inset 0 1px 0 rgba(255,217,160,0.2), 0 0 26px rgba(255,160,51,0.3);
  color:#fff3dd; text-shadow:var(--strike-b);
}
.btn.solid {
  background: linear-gradient(180deg, #ffb84d, #d98424);
  color:#221507; border-color:#ffd9a0;
  box-shadow: 0 0 26px rgba(255,160,51,0.4);
}
.btn.solid:hover { background: linear-gradient(180deg,#ffd9a0,#ffa033); color:#221507; }
.btn.ghost { border-color:var(--brass); color:var(--cream); background:rgba(19,17,22,.6); }

/* ---------- the city rail (taskbar) ---------- */
.rail {
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:flex; align-items:stretch; gap:0;
  background: linear-gradient(180deg, #17151b, #0d0b10);
  border-top:1px solid var(--brass);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.6);
  font-family:var(--font-px); font-size:13px; letter-spacing:1px;
  height:46px;
}
.rail a.tab, .rail .brand, .rail .meta { text-shadow:var(--strike-b); }
.rail a.tab {
  display:flex; align-items:center; padding:0 16px;
  color:var(--ash); border-right:1px solid rgba(107,83,52,0.35);
  text-transform:uppercase;
}
.rail a.tab:hover { color:var(--amber-hi); background:rgba(255,160,51,0.07); text-shadow:var(--strike-b); }
.rail a.tab.on {
  color:var(--amber-hi);
  background: linear-gradient(180deg, rgba(255,160,51,0.16), rgba(255,160,51,0.04));
  box-shadow: inset 0 2px 0 var(--amber);
}
.rail .spacer { flex:1; }
.rail .meta {
  display:flex; align-items:center; gap:14px; padding:0 16px; color:var(--ash);
}
.rail .meta .live { color:var(--amber); }
.rail .meta .dotlive {
  display:inline-block; width:6px; height:6px; background:var(--teal);
  box-shadow:0 0 8px var(--teal); margin-right:6px; vertical-align:1px;
}
.rail .brand {
  display:flex; align-items:center; padding:0 16px; gap:8px;
  color:var(--amber-hi); border-right:1px solid var(--brass);
  background: rgba(255,160,51,0.05);
}
.rail .brand .spk {
  width:8px; height:8px; background: var(--amber);
  transform: rotate(45deg);
  box-shadow:0 0 10px var(--amber);
}

@media (max-width: 900px) {
  .rail { overflow-x:auto; }
  .rail .meta .clock { display:none; }
}

/* ---------- misc ---------- */
.grid { display:grid; gap:16px; }
.tile-num {
  font-family:var(--font-px); font-size:28px; color:var(--amber-hi);
  text-shadow: 0.05em 0 0 currentColor, 0 0.05em 0 currentColor,
               0.05em 0.05em 0 currentColor, 0 0 16px rgba(255,160,51,.4);
}
.rule { border:0; border-top:1px solid var(--ink-line); margin:14px 0; }
.tag {
  display:inline-block; font-family:var(--font-px); font-size:12px; letter-spacing:1px;
  padding:3px 8px 2px; border:1px solid var(--brass); color:var(--ash);
  text-transform:uppercase; text-shadow:var(--strike-b);
}
.tag.gold { border-color:var(--amber-lo); color:var(--amber); }
.tag.teal { border-color:var(--teal); color:var(--teal); }

.shotframe { border:1px solid var(--brass); box-shadow:0 10px 34px rgba(0,0,0,.6); }
.shotframe img { display:block; width:100%; }

/* typing caret */
.caret::after {
  content:'▮'; color:var(--amber); animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity:0; } }