/* =========================================================
   base.css  |  shared by EVERY page
   (variables, reset, typography, CRT effects, header/nav,
   panels, buttons, hero, section shell, footer)
   ========================================================= */

:root{
  --bg:#050403;
  --panel:rgba(255,176,0,0.035);
  --amber:#ffb000;
  --amber-bright:#ffe9a8;
  --amber-soft:#c99a52;
  --amber-dim:#5a3f10;
  --alert:#ff4d2e;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; font-size:112.5%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--amber-soft);
  font-family:"IBM Plex Mono", monospace;
  font-size:15px;
  line-height:1.7;
  overflow-x:hidden;
}
::selection{background:var(--amber); color:#000;}

h1,h2{
  font-family:"Press Start 2P", monospace;
  font-weight:400;
  color:var(--amber);
  margin:0;
  line-height:1.5;
}

a{color:inherit;}

.prompt{
  display:block;
  color:var(--amber-dim);
  font-size:0.8rem;
  margin-bottom:14px;
}
.prompt::before{content:"$ "; color:var(--amber-soft);}

.text-link{
  color:var(--amber);
  text-decoration:underline;
}
.text-link:hover,
.text-link:focus-visible{
  color:var(--amber-bright);
}

/* ---------- CRT OVERLAY ---------- */
#scanlines{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.22) 0px,
    rgba(0,0,0,0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode:multiply;
}
#vignette{
  position:fixed; inset:0; z-index:151; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
#flicker{
  position:fixed; inset:0; z-index:152; pointer-events:none;
  background:rgba(255,200,120,0.015);
  animation:flicker 6s infinite;
}
@keyframes flicker{
  0%,100%{opacity:1;}
  45%{opacity:0.4;}
  46%{opacity:1;}
  72%{opacity:0.6;}
  73%{opacity:1;}
}

/* ---------- EMBER BACKGROUND ---------- */
#ember-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

header, main, footer{position:relative; z-index:1;}

.wrap{max-width:920px; margin:0 auto; padding:0 28px;}

/* ---------- HEADER / NAV ---------- */
header{
  position:sticky; top:0; z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:920px;
  margin:0 auto;
  padding:26px 28px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--amber);
  font-size:0.92rem;
  letter-spacing:0.02em;
}
.cursor{
  width:9px; height:16px;
  background:var(--amber);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}

nav{display:flex; gap:26px; font-size:0.86rem;}
nav a{text-decoration:none; color:var(--amber-soft); transition:color 0.15s ease;}
nav a:hover{color:var(--amber-bright);}
nav a b{color:var(--amber); font-weight:500;}

/* ---------- NAV DROPDOWN ---------- */
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;
  top:100%;
  right:0;
  min-width:190px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 16px;
  background:var(--bg);
  border:1px solid var(--amber-dim);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.15s ease, visibility 0.15s ease;
}
.dropdown-menu a{white-space:nowrap;}
.dropdown-menu a::before{content:"> "; color:var(--amber-dim);}
.dropdown-menu a:hover::before,
.dropdown-menu a:focus-visible::before{color:var(--amber);}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{
  opacity:1;
  visibility:visible;
}

/* ---------- PANEL / HUD BOX ---------- */
.panel{
  position:relative;
  border:1px solid var(--amber-dim);
  background:var(--panel);
  padding:26px;
}
.panel::before,
.panel::after{
  content:"";
  position:absolute;
  width:10px; height:10px;
}
.panel::before{top:-1px; left:-1px; border-top:2px solid var(--amber); border-left:2px solid var(--amber);}
.panel::after{bottom:-1px; right:-1px; border-bottom:2px solid var(--amber); border-right:2px solid var(--amber);}

/* panel with a floating tag in the corner */
.media-panel{position:relative;}
.media-panel .prompt{margin-bottom:16px;}
.media-panel .tag{
  position:absolute;
  top:-11px; right:18px;
  background:var(--bg);
  padding:0 8px;
  color:var(--alert);
  font-size:0.7rem;
  letter-spacing:0.02em;
}

/* ---------- HERO ---------- */
.hero{
  max-width:920px;
  margin:0 auto;
  padding:56px 28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:center;
}
@media (min-width:801px){
  .hero{min-height:calc(100svh - 97px);}
}
.hero h1{
  font-size:clamp(1.5rem, 3.4vw, 2.2rem);
  margin:6px 0 22px;
}
.hero p{
  max-width:42ch;
  color:var(--amber-soft);
  font-size:0.95rem;
}
.hero-actions{margin-top:26px; display:flex; flex-wrap:wrap; gap:14px;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  background:transparent;
  border:1px solid var(--amber);
  color:var(--amber);
  padding:12px 18px;
  text-decoration:none;
  font-size:0.85rem;
  font-family:"IBM Plex Mono", monospace;
  transition:background 0.15s ease, color 0.15s ease;
}
.btn:hover{background:var(--amber); color:#000;}
.btn-ghost{border-color:var(--amber-dim); color:var(--amber-soft);}
.btn-ghost:hover{background:var(--amber-dim); color:var(--amber-bright);}
.btn kbd{font-family:inherit;}

/* ---------- SECTION SHELL ---------- */
section{padding:80px 28px; border-top:1px solid var(--amber-dim);}
.section-inner{max-width:920px; margin:0 auto;}
.section-head{margin-bottom:44px; max-width:56ch;}
.section-head h2{font-size:clamp(1.15rem, 2.2vw, 1.5rem); margin-bottom:16px;}
.section-head p{color:var(--amber-soft); margin:0; font-size:0.95rem;}

/* ---------- FOOTER ---------- */
footer{padding:36px 28px; border-top:1px solid var(--amber-dim);}
.footer-inner{
  max-width:920px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:14px; font-size:0.82rem;
}
.footer-prompt{color:var(--amber-dim);}
/* .footer-prompt::before{content:"guest@firstfire:~$ ";} */

/* ---------- SHARED RESPONSIVE ---------- */
@media (max-width:800px){
  .hero{grid-template-columns:1fr;}
  nav{display:none;}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}