/* ============================================================
   CATBACK base — reset, typography, layout, global chrome.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--terminal-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  min-height: 100vh;
}

::selection { background: var(--terminal); color: var(--ink); }

img { max-width: 100%; display: block; }
#atm-img, .nav-brand-note { image-rendering: pixelated; image-rendering: crisp-edges; }

canvas { display: block; }

/* #bg-canvas is THE ROOM — js/bank.js paints the CATBACK bank branch onto
   it (walls, trim, floor, windows, decor, reception). It is fixed and out
   of flow, so it can never move a single pixel of page layout; the cream
   body colour stays underneath as the fallback if bank.js is absent.
   The two later world layers (ambient life, weather) were built for the
   old dark canvas — on a lit branch interior they read as dirt, so they
   stay off. */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-bg);
  pointer-events: none;
}
#life-canvas,
#weather-canvas {
  display: none;
}

/* ---- links / focus ---------------------------------------- */
a { color: var(--terminal); text-decoration: none; }
a:hover { color: var(--sol-cyan); }

:focus-visible {
  outline: 2px solid var(--terminal);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--glow-terminal);
}

.skip-link {
  position: fixed; top: -48px; left: 12px;
  z-index: var(--z-toast);
  padding: 10px 14px;
  background: var(--forest); color: var(--terminal);
  font-family: var(--font-pixel); font-size: 10px;
  transition: top var(--dur-fast) var(--ease-snap);
}
.skip-link:focus { top: 10px; }

/* ============================================================
   DEPARTMENTS
   Every section is a FIXTURE bolted to the branch wall, not a
   separate web page: an opaque plate, a stepped bezel, four
   screw heads, a mounting rail behind it, a cast shadow on the
   stone, and a department nameplate straddling the top edge.

   Legibility beats transparency — the plate face is fully
   opaque so black type on cream stays black type on cream no
   matter how detailed the room behind it gets.
   ============================================================ */
.site-section {
  --sec-pad-y: clamp(80px, 12vh, 150px);    /* roomier — the page breathes */
  position: relative;
  padding: var(--sec-pad-y) 24px;
  z-index: var(--z-content);
}

/* the mounting rail the fixture hangs from (paints BEHIND the plate) */
.site-section::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(var(--sec-pad-y) - 9px);
  width: min(1084px, calc(100% - 24px));
  height: 15px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(180deg,
      var(--forest-2) 0 3px,
      var(--charcoal) 3px 6px,
      var(--forest-2) 6px 9px,
      var(--shade) 9px 15px);
  box-shadow: 0 0 0 var(--px) var(--shade-soft);
}

.section-inner {
  --dept: 'CATBACK BRANCH';
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(30px, 3.4vw, 44px) clamp(16px, 2.4vw, 30px) clamp(24px, 2.8vw, 34px);

  /* OPAQUE fixture face: warm-white plate, a soft fall of ceiling light
     across the top, a faint tooth, and a shaded lower edge */
  background-color: var(--ink-3);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0, rgba(255, 255, 255, 0) 110px),
    repeating-linear-gradient(0deg, transparent 0 3px, var(--scanline) 3px 6px),
    linear-gradient(180deg, var(--ink-3) 0 64%, var(--ink-2) 100%);

  border: var(--px) solid var(--sec, var(--c-green));
  box-shadow: var(--bezel), var(--cast-shadow);
}

/* department nameplate — screwed onto the top rail of the fixture */
.section-inner::before {
  content: var(--dept);
  position: absolute;
  top: 0;
  left: clamp(14px, 2.2vw, 28px);
  z-index: 2;
  transform: translateY(-52%);
  padding: 6px 11px 5px;
  font-family: var(--font-pixel);
  font-size: 8px;
  line-height: 1;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--sec, var(--c-green));
  box-shadow:
    0 0 0 var(--px) var(--ink-3),
    0 0 0 calc(2 * var(--px)) var(--forest-2),
    0 calc(2 * var(--px)) 0 0 var(--shade-soft);
  pointer-events: none;
}

/* four charcoal screw heads with a 2px highlight — the fixture is bolted on */
.section-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--ink-3) 0 0), linear-gradient(var(--ink-3) 0 0),
    linear-gradient(var(--ink-3) 0 0), linear-gradient(var(--ink-3) 0 0),
    linear-gradient(var(--charcoal) 0 0), linear-gradient(var(--charcoal) 0 0),
    linear-gradient(var(--charcoal) 0 0), linear-gradient(var(--charcoal) 0 0);
  background-size:
    2px 2px, 2px 2px, 2px 2px, 2px 2px,
    6px 6px, 6px 6px, 6px 6px, 6px 6px;
  background-position:
    11px 11px, calc(100% - 11px) 11px, 11px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px),
    9px 9px,   calc(100% - 9px) 9px,   9px calc(100% - 9px),   calc(100% - 9px) calc(100% - 9px);
}

/* Headings are BLACK — the colour lives in the icons and accents. */
.section-title {
  font-family: var(--font-pixel);
  color: var(--terminal);
  font-size: clamp(16px, 3.2vw, 26px);
  letter-spacing: 2px;
  margin: 0 0 38px;
  text-shadow: none;
}
/* the caret carries the section's hue — a small spot of colour */
.section-title::before { content: '> '; color: var(--sec, var(--c-green)); }

/* Each department keeps a hue for its icons, rules and accents, plus the
   name on its plate. Five distinct branch hues — emerald, gold, olive,
   deep forest, charcoal-brown — never a rainbow, never monotone. */
#trades      { --sec: var(--c-emerald); }
#leaderboard { --sec: var(--c-gold); }
#tokenomics  { --sec: var(--c-olive); }
#howtobuy    { --sec: var(--c-forest); }
#faq         { --sec: var(--c-brown); }

#trades      .section-inner { --dept: 'DESK 01 · TRADING FLOOR'; }
#leaderboard .section-inner { --dept: 'DESK 02 · CLIENT STANDINGS'; }
#tokenomics  .section-inner { --dept: 'DESK 03 · TREASURY & RESERVES'; }
#howtobuy    .section-inner { --dept: 'DESK 04 · NEW ACCOUNTS'; }
#faq         .section-inner { --dept: 'DESK 05 · CUSTOMER SERVICE'; }

/* narrow screens: the plate keeps its presence but loses the wide rail */
@media (max-width: 560px) {
  .site-section { padding-left: 12px; padding-right: 12px; }
  .site-section::before { width: calc(100% - 12px); }
  .section-inner::before { font-size: 7px; letter-spacing: 1px; }
}

/* ---- footer ------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  border-top: var(--px) solid var(--forest-2);
  background-color: var(--ink-2);            /* opaque over the room */
  background-image: linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: 36px 16px 90px;
  text-align: center;
}
.footer-brand {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--c-emerald);                   /* branch ink, ≥4.5:1 on cream */
  letter-spacing: 2px;
  margin: 0 0 14px;
}
.footer-note, .footer-sim {
  max-width: 640px;
  margin: 8px auto;
  font-family: var(--font-term);
  font-size: 17px;
  color: var(--terminal-dim);
}
.footer-sim { color: var(--amber); }

/* ---- audio toggle ------------------------------------------ */
.audio-toggle {
  position: fixed;
  left: 14px; bottom: calc(12px + var(--ticker-h, 0px)); /* clears the status ticker */
  z-index: var(--z-toast);
  display: flex; gap: 7px; align-items: center;
  background: var(--ink-3);
  color: var(--terminal);
  border: var(--px) solid var(--forest-2);
  font-family: var(--font-pixel); font-size: 9px;
  padding: 9px 11px;
  cursor: pointer;
  box-shadow: 0 0 10px var(--glow-soft);
  transition: transform var(--dur-fast) var(--ease-snap), box-shadow var(--dur-fast);
}
.audio-toggle:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--glow-terminal); }
.audio-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--moss); }

/* ---- generic pixel button ----------------------------------- */
.px-btn {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink);
  /* buttons stay coloured — the black is for type, not for fills */
  background: var(--sec, var(--c-green));
  border: 0;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 var(--px) 0 var(--px) var(--forest-2), inset 0 calc(-2 * var(--px)) 0 rgba(0,0,0,0.25);
  transition: transform var(--dur-fast) var(--ease-snap), filter var(--dur-fast);
}
.px-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.px-btn:active { transform: translateY(1px); box-shadow: 0 0 0 var(--px) var(--forest-2), inset 0 calc(-1 * var(--px)) 0 rgba(0,0,0,0.25); }

/* ---- reduced motion global gate ------------------------------ */
body[data-motion="reduce"] *,
body[data-motion="reduce"] *::before,
body[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ---- scrollbar (webkit) -------------------------------------- */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb {
  background: var(--forest-2);
  border: 3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover { background: var(--moss); }