/* ==========================================================================
   API NETWORK — Windows 95 / XP "Chicago" design system
   --------------------------------------------------------------------------
   A sober 1996 desktop: flat teal dithered desktop, gray beveled chrome,
   blue-gradient active title bars, black MS-DOS terminals with blinking
   block cursors, bitmap UI type. Square corners. Hard 1–2px bevels.
   No glows, no radii, no gradients except title bars.

   Type system:
     Silkscreen ......... UI chrome, headings, buttons, title bars, labels
     VT323 .............. terminals, boot screen, ticker, numeric readouts
     IBM Plex Mono ...... readable body paragraphs

   Sections:
     00 tokens & bevel recipes        08 chips / tags
     01 reset & global chrome         09 forms
     02 scrollbars / selection/focus  10 LED indicators
     03 keyframes                     11 hero (home sala)
     04 boot overlay                  12 section headers
     05 top menubar                   13 steps (border control)
     06 ticker                        14 ledger (bag unlocks)
     07 desktop icons / view root     15 protocol
        windows / terminals / btns    16 faq / passport / registry
                                      17 manifesto
                                      18 taskbar & start menu
                                      19 footer status bar
                                      20 responsive / reduced motion
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS & BEVEL RECIPES
   ========================================================================== */

:root {
  --teal: #008080;
  --teal-dark: #005f5f;
  --chrome: #c0c0c0;
  --chrome-hi: #dfdfdf;
  --white: #fff;
  --black: #000;
  --gray: #808080;
  --gray-dark: #0a0a0a;
  --navy: #000080;
  --blue: #1084d0;
  --link: #0000cc;
  --err: #cc0000;
  --ok: #008000;
  --term: #c0c0c0;
  --term-bright: #fff;
  --gold: #b8860b;

  /* Font stacks */
  --font-ui: 'Silkscreen', 'Courier New', monospace;
  --font-term: 'VT323', 'Courier New', monospace;
  --font-body: 'IBM Plex Mono', 'Courier New', monospace;

  /* Bevel recipes — the soul of the system.
     raised: light top-left, dark bottom-right (pops toward you)
     sunken: dark top-left, light bottom-right (pressed into the surface) */
  --bevel-raised:
    inset -1px -1px 0 var(--gray-dark),
    inset 1px 1px 0 var(--white),
    inset -2px -2px 0 var(--gray),
    inset 2px 2px 0 var(--chrome-hi);
  --bevel-sunken:
    inset -1px -1px 0 var(--white),
    inset 1px 1px 0 var(--gray-dark),
    inset -2px -2px 0 var(--chrome-hi),
    inset 2px 2px 0 var(--gray);

  /* Hard offset drop shadow for floating windows */
  --window-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
}


/* ==========================================================================
   01 · RESET & GLOBAL CHROME
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important; /* square corners, everywhere, no exceptions */
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #111;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  /* Flat teal desktop with a Win95-style 50% pixel-dither checkerboard */
  background-color: var(--teal);
  background-image: linear-gradient(45deg, rgba(0,95,95,.15) 25%, transparent 25%, transparent 75%, rgba(0,95,95,.15) 75%), linear-gradient(45deg, rgba(0,95,95,.15) 25%, transparent 25%, transparent 75%, rgba(0,95,95,.15) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.3;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

a { color: var(--link); }
a:hover { color: var(--navy); }

[hidden] { display: none !important; }

/* Defensive: neutralize any legacy vaporwave backdrop layers still in markup */
.bg, .bg-sky, .bg-stars, .bg-spark { display: none !important; }


/* ==========================================================================
   02 · SCROLLBARS / SELECTION / FOCUS
   ========================================================================== */

::selection {
  background: var(--navy);
  color: var(--white);
}

/* Win95 focus: a dotted 1px outline drawn inside the control */
:focus-visible {
  outline: 1px dotted var(--black);
  outline-offset: -4px;
}
/* White dotted outline where the surface is dark */
.btn--primary:focus-visible,
.start-menu__item:focus-visible,
.chip--navy:focus-visible {
  outline-color: var(--white);
}
.desktop-icon:focus-visible {
  outline-color: var(--white);
}

/* Square chrome scrollbars — WebKit */
::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: var(--chrome);
}
::-webkit-scrollbar-track {
  /* classic dithered track */
  background-image: repeating-conic-gradient(var(--white) 0 25%, var(--chrome) 0 50%);
  background-size: 2px 2px;
}
::-webkit-scrollbar-thumb {
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
}
::-webkit-scrollbar-corner {
  background: var(--chrome);
}

/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--chrome) var(--chrome-hi);
}


/* ==========================================================================
   03 · KEYFRAMES
   ========================================================================== */

/* DOS block cursor blink — hard on/off, no fade */
@keyframes blink {
  50% { opacity: 0; }
}

/* Ticker: content is duplicated 2× in HTML, so -50% loops seamlessly */
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Window mount: the 1996 "open" flourish, 160ms and done */
@keyframes window-open {
  from {
    transform: scale(.97) translateY(6px);
    opacity: 0;
  }
}

/* Status LED breathing */
@keyframes led-pulse {
  50% { opacity: .55; }
}

/* Boot lines materialize like phosphor hitting the screen */
@keyframes boot-in {
  from { opacity: 0; }
}


/* ==========================================================================
   04 · BOOT OVERLAY  (#bootScreen.boot)
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black);
  color: var(--term);
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1.5;
  padding: 48px;
  overflow: hidden;
  transition: opacity .45s;
}

.boot__inner {
  max-width: 860px;
}

.boot-line {
  display: block;
  white-space: pre;
  animation: boot-in .12s ease-out;
}
.boot-line--ok     { color: #00cc00; }
.boot-line--err    { color: #ff5555; }
.boot-line--dim    { color: var(--gray); }
.boot-line--bright { color: var(--term-bright); }

.boot__cursor {
  display: inline-block;
  width: 10px;
  height: 20px;
  background: var(--term-bright);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

.boot.is-done {
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   05 · TOP MENU BAR
   ========================================================================== */

.menubar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  font-family: var(--font-ui);
  font-size: 12px;
}

.menubar__logo {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  color: #111;
  text-decoration: none;
  padding: 2px 6px;
  white-space: nowrap;
}
.menubar__logo em {
  font-style: normal;
  color: var(--navy);
}

.menubar__menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.menubar__item {
  padding: 2px 8px;
  color: #111;
  cursor: pointer;
  white-space: nowrap;
}
.menubar__item:hover {
  background: var(--navy);
  color: var(--white);
}

/* Right-hand cluster pushed to the edge. When the status well is visible it
   takes the auto margin; when it's [hidden], the connect button takes over. */
.nav-status {
  margin-left: auto;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
  font-family: var(--font-term);
  font-size: 16px;
  line-height: 1.2;
  color: var(--navy);
  padding: 2px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
#navConnectBtn { margin-left: auto; }
.nav-status:not([hidden]) ~ #navConnectBtn { margin-left: 0; }


/* ==========================================================================
   06 · TICKER
   ========================================================================== */

.ticker {
  background: var(--chrome);
  height: 26px;
  overflow: hidden;
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
  box-shadow: var(--bevel-sunken);
}

.ticker__track {
  display: inline-flex;
  gap: 28px;
  white-space: nowrap;
  font-family: var(--font-term);
  font-size: 18px;
  line-height: 26px;
  padding-left: 14px;
  animation: ticker-scroll 40s linear infinite;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.tk-label { color: #4a4a4a; }
.tk-gold  { color: var(--gold); font-weight: bold; }
.tk-up    { color: var(--ok); }
.tk-down  { color: var(--err); }
.tk-sep   { color: var(--gray); }


/* ==========================================================================
   07 · DESKTOP ICONS / VIEW ROOT
   ========================================================================== */

.desktop-icons {
  position: fixed;
  left: 12px;
  top: 76px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 84px;
}

.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
}

.desktop-icon__img {
  font-size: 34px;
  line-height: 1;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .5));
  transition: transform .12s ease-out;
}
.desktop-icon:hover .desktop-icon__img {
  transform: translateY(-1px);
}

.desktop-icon__label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--white);
  text-shadow: 1px 1px 0 var(--black);
  padding: 1px 3px;
  text-align: center;
  line-height: 1.4;
}

.desktop-icon.is-active .desktop-icon__label {
  background: var(--navy);
  outline: 1px dotted var(--white);
}

/* View root — the desktop workspace */
#view-root {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 20px 120px;
}
#view-root > * + * {
  margin-top: 34px;
}
@media (min-width: 901px) {
  #view-root {
    padding-left: 110px;  /* clear the desktop icon column */
    padding-right: 24px;
  }
}


/* ==========================================================================
   WINDOWS — the core component
   ========================================================================== */

.window {
  background: var(--chrome);
  padding: 3px;
  box-shadow: var(--window-shadow), var(--bevel-raised);
  animation: window-open .16s ease-out;
}

.window__titlebar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px 0 4px;
  /* inactive: darker gray gradient so the light title text stays legible */
  background: linear-gradient(90deg, #6e6e6e, #949494);
  user-select: none;
}
.window--active > .window__titlebar {
  /* active: the iconic navy → blue sweep */
  background: linear-gradient(90deg, var(--navy), var(--blue));
}

.window__title-icon {
  font-size: 14px;
  line-height: 1;
}

.window__title-text {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--chrome);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.window--active > .window__titlebar .window__title-text {
  color: var(--white);
}

.window__controls {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.window__ctrl {
  width: 20px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  font-family: var(--font-ui);
  font-size: 10px;
  line-height: 1;
  color: #111;
  cursor: pointer;
}
.window__ctrl:hover { background: #cdcdcd; }
.window__ctrl:active {
  box-shadow: var(--bevel-sunken);
}
.window__ctrl:active > * {
  transform: translate(1px, 1px);
}

/* In-window menu strip (Notepad style) */
.window__menubar {
  display: flex;
  gap: 2px;
  padding: 2px 0;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #111;
}
.window__menubar span {
  padding: 2px 8px;
  cursor: pointer;
}
.window__menubar span:hover {
  background: var(--navy);
  color: var(--white);
}

.window__body {
  background: var(--white);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: #111;
}
.window__body--chrome {
  background: var(--chrome);
}
/* Terminal-bodied window: black glass, sunken into the chrome frame */
.window__body--terminal {
  background: var(--black);
  color: var(--term);
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.45;
  box-shadow: var(--bevel-sunken);
}
/* Flush-bodied window: content (tables, feeds) hugs the chrome frame */
.window__body--flush {
  padding: 0;
}

.window__statusbar {
  display: flex;
  gap: 3px;
  padding-top: 3px;
}
.status-cell {
  flex: none;
  box-shadow: var(--bevel-sunken);
  font-family: var(--font-ui);
  font-size: 10px;
  padding: 3px 8px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-cell--grow { flex: 1; }


/* ==========================================================================
   TERMINAL SURFACES — the MS-DOS Prompt nod
   ========================================================================== */

.terminal {
  background: var(--black);
  color: var(--term);
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.45;
  padding: 14px 16px;
  box-shadow: var(--bevel-sunken);
}

.terminal__line {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}

.terminal__prompt {
  color: var(--term-bright);
  font-weight: bold;
}

.terminal__cursor {
  display: inline-block;
  width: 9px;
  height: 17px;
  background: var(--term-bright);
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

.t-ok   { color: #00cc00; }
.t-err  { color: #ff5555; }
.t-dim  { color: var(--gray); }
.t-gold { color: var(--gold); }


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #111;
  background: var(--chrome);
  padding: 9px 18px;
  box-shadow: var(--bevel-raised);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.btn:hover:not(:disabled) { background: #cdcdcd; }

/* Pressed: bevel flips sunken and the content drops 1px right/down
   (padding shifts +1px top/left, −1px bottom/right) */
.btn:active:not(:disabled),
.btn.is-pressed {
  box-shadow: var(--bevel-sunken);
  padding: 10px 17px 8px 19px;
}
.btn:active:not(:disabled) > span,
.btn.is-pressed > span {
  transform: translate(1px, 1px);
}

.btn--primary {
  background: var(--navy);
  color: var(--white);
  text-shadow: none;
}
.btn--primary:hover:not(:disabled) { background: #0d0d9d; }
.btn--primary:active:not(:disabled),
.btn--primary.is-pressed {
  background: var(--navy);
}

.btn--danger { color: var(--err); }

.btn--sm {
  padding: 5px 10px;
  font-size: 10px;
}
.btn--sm:active:not(:disabled),
.btn--sm.is-pressed {
  padding: 6px 9px 4px 11px;
}

.btn:disabled {
  color: var(--gray);
  cursor: not-allowed;
  text-shadow: 1px 1px 0 var(--white); /* engraved ghost, classic disabled look */
}


/* ==========================================================================
   08 · CHIPS / TAGS
   ========================================================================== */

.chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
  padding: 3px 7px;
  color: #111;
  white-space: nowrap;
}

.chip--gold {
  background: #fff8dc;
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: none;
}

.chip--navy {
  background: var(--navy);
  color: var(--white);
  box-shadow: var(--bevel-raised);
}


/* ==========================================================================
   09 · FORMS
   ========================================================================== */

.field {
  width: 100%;
  border: none;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
  font-family: var(--font-body);
  font-size: 14px;
  color: #111;
  padding: 7px 9px;
  appearance: none;
  -webkit-appearance: none;
}
.field::placeholder { color: var(--gray); }

select.field {
  padding-right: 28px;
  cursor: pointer;
  /* square native feel with a custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23111'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
}

label {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #222;
  display: block;
  margin-bottom: 5px;
}


/* ==========================================================================
   10 · LED INDICATORS
   ========================================================================== */

.led {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--gray);
  border: 1px solid var(--gray-dark);
  vertical-align: middle;
}
.led--on {
  background: #00cc00;
  box-shadow: 0 0 4px #00cc00;
  animation: led-pulse 2s ease-in-out infinite;
}
.led--err { background: #ff3333; }


/* ==========================================================================
   11 · HERO — home sala
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 36px;
  align-items: start;
}

.hero__kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--white);
  background: var(--navy);
  padding: 5px 10px;
  box-shadow: var(--bevel-raised);
}

.hero__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 44px);
  line-height: 1.25;
  color: var(--white);
  text-shadow: 3px 3px 0 var(--black);
  margin: 18px 0;
}
.hero__title em {
  font-style: normal;
  color: #ffd24a;
}

.hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: #eafffa;
  max-width: 52ch;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
}
.hero__sub strong { color: #ffd24a; font-weight: 600; }
.hero__sub em     { color: #7fffd4; font-style: normal; }
.hero__sub a      { color: #7fffd4; }

.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.stats {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
}

.stat {
  background: var(--chrome);
  box-shadow: var(--bevel-sunken);
  padding: 10px 16px;
  min-width: 110px;
}
.stat__num {
  display: block;
  font-family: var(--font-term);
  font-size: 30px;
  line-height: 1.1;
  color: var(--navy);
}
.stat__label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #333;
}


/* ==========================================================================
   12 · SECTION HEADERS
   ========================================================================== */

.sec-kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--navy);
  background: var(--chrome-hi);
  padding: 4px 9px;
  box-shadow: var(--bevel-raised);
}

h2.sec-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(18px, 3vw, 26px);
  color: var(--white);
  text-shadow: 2px 2px 0 var(--black);
  margin: 12px 0 8px;
}
h2.sec-title em {
  font-style: normal;
  color: #ffd24a;
}

.sec-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: #e8fffe;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  max-width: 64ch;
}
.sec-sub a { color: #7fffd4; }


/* ==========================================================================
   13 · STEPS — border control (each step is a .window)
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.step-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 3px 8px;
  color: #111;
}

.status-on,
.status-off,
.status-err {
  font-family: var(--font-ui);
  font-size: 10px;
}
.status-on  { color: var(--ok); }
.status-off { color: var(--gray); }
.status-err { color: var(--err); }


/* ==========================================================================
   14 · LEDGER — bag unlocks
   ========================================================================== */

.ledger__row {
  display: grid;
  grid-template-columns: 64px 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  transition: background .1s ease-out;
}
.ledger__row:not(:last-child) {
  border-bottom: 1px solid #d5d5d5;
}
.ledger__row:hover {
  background: #f2f7ff;
}

.ledger__num {
  font-family: var(--font-term);
  font-size: 34px;
  line-height: 1;
  color: var(--gray);
}

.ledger__icon {
  font-size: 28px;
  line-height: 1;
}

.ledger__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #111;
}

.ledger__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: #444;
  margin-top: 4px;
}

.ledger__badge { /* carries .chip--gold / .chip--navy */ }


/* ==========================================================================
   15 · PROTOCOL — the four steps
   ========================================================================== */

.protocol { counter-reset: protocol; }

.protocol__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: transform .12s ease-out;
}
.protocol__step:hover {
  transform: translateX(3px);
}

.protocol__num {
  font-family: var(--font-term);
  font-size: 28px;
  line-height: 1;
  color: var(--navy);
  flex: none;
}


/* ==========================================================================
   16 · FAQ / PASSPORT / REGISTRY
   ========================================================================== */

/* --- FAQ --- */

.faq__item {
  background: var(--chrome);
  box-shadow: var(--bevel-sunken);
  margin-bottom: 8px;
}

.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #111;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}
.faq__q::after {
  content: '[+]';
  color: var(--navy);
  flex: none;
}
.faq__item.is-open .faq__q::after {
  content: '[−]';
}
.faq__q:hover { background: var(--chrome-hi); }

.faq__a {
  display: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: #222;
  padding: 0 14px 14px;
}
.faq__item.is-open .faq__a {
  display: block;
}

/* --- Passport --- */

.passport__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--gray);
}
.passport__row > :first-child { color: var(--gray); }
.passport__row > :last-child  { font-weight: 600; text-align: right; word-break: break-all; }

.passport__stamp {
  width: max-content;
  margin: 14px auto 4px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--err);
  border: 3px double var(--err);
  padding: 8px 14px;
  transform: rotate(-7deg);
  opacity: .85;
}
.passport__stamp--ok {
  color: var(--ok);
  border-color: var(--ok);
}

/* --- Registry table --- */

.registry-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
.registry-table th {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.registry-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #ddd;
  color: #111;
}
.registry-table tr:hover td {
  background: #eef4ff;
}

.rank-1, .rank-2, .rank-3 {
  font-family: var(--font-term);
  font-weight: bold;
  font-size: 18px;
}
.rank-1 { color: var(--gold); }
.rank-2 { color: #708090; }
.rank-3 { color: #8b5a2b; }


/* ==========================================================================
   17 · MANIFESTO
   ========================================================================== */

/* --- MANIFESTO.TXT — Notepad --- */

.manifesto .window__body {
  font-size: 15px;
  line-height: 1.8;
}
.manifesto .window__body > * {
  max-width: 70ch;
}
.manifesto blockquote {
  margin: 14px 0;
  border-left: 3px solid var(--navy);
  background: #f4f4f4;
  padding: 10px 14px;
}
.manifesto h3 {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--navy);
  margin: 18px 0 8px;
}


/* ==========================================================================
   18 · TASKBAR & START MENU
   ========================================================================== */

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
}

.taskbar__start {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #111;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 6px 12px;
  cursor: pointer;
  flex: none;
}
.taskbar__start:hover { background: #cdcdcd; }
.taskbar__start.is-active {
  box-shadow: var(--bevel-sunken);
}
.taskbar__start .start-glyph,
.taskbar__start > .glyph {
  color: var(--navy);
}

/* --- Start menu --- */

.start-menu {
  position: fixed;
  bottom: 48px;
  left: 6px;
  z-index: 300;
  display: none;
  width: 230px;
  padding: 3px;
  background: var(--chrome);
  box-shadow: var(--window-shadow), var(--bevel-raised);
}
.start-menu.is-open {
  display: flex;
  animation: window-open .14s ease-out;
}

.start-menu__banner {
  width: 34px;
  flex: none;
  background: linear-gradient(180deg, var(--navy), var(--blue));
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  display: grid;
  place-items: center;
  padding: 8px 0;
}

.start-menu__items {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.start-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #111;
  text-decoration: none;
  padding: 9px 12px;
  cursor: pointer;
}
.start-menu__item:hover {
  background: var(--navy);
  color: var(--white);
}

.start-menu__sep {
  height: 1px;
  background: var(--gray);
  box-shadow: 0 1px 0 var(--white);
  margin: 3px 6px;
}

/* --- Running tasks --- */

.taskbar__tasks {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow: hidden;
}

.taskbar__btn {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #111;
  text-decoration: none;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 6px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  cursor: pointer;
}
.taskbar__btn:hover { background: #cdcdcd; }
.taskbar__btn.is-active {
  box-shadow: var(--bevel-sunken);
  font-weight: 700;
  /* classic dithered "current window" texture */
  background-image: repeating-conic-gradient(var(--chrome-hi) 0 25%, var(--white) 0 50%);
  background-size: 4px 4px;
}

/* --- System tray --- */

.taskbar__tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  box-shadow: var(--bevel-sunken);
  flex: none;
}
#trayClock {
  font-family: var(--font-term);
  font-size: 17px;
  color: #111;
  line-height: 1;
}


/* ==========================================================================
   19 · FOOTER STATUS BAR
   ========================================================================== */

.footer {
  max-width: 1060px;
  margin: 0 auto 52px;
  padding: 0 20px;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
}

.footer__cell {
  box-shadow: var(--bevel-sunken);
  font-family: var(--font-ui);
  font-size: 9px;
  padding: 5px 10px;
  color: #222;
  display: flex;
  align-items: center;
  gap: 6px;
}
.footer__cell--grow { flex: 1 1 260px; }

/* X / Twitter link button — Win95 chrome with pixel X icon */
.btn--x,
.footer__x {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.btn--x:hover,
.footer__x:hover {
  background: #cdcdcd;
}
.btn--x .pix-icon,
.footer__x .pix-icon {
  flex-shrink: 0;
}

#footerCA {
  font-family: var(--font-term);
  font-size: 15px;
  line-height: 1;
}

.footer__legal {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  color: #dff5f5;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  padding: 10px 4px 0;
}
.footer__legal a { color: #eafffa; }


/* ==========================================================================
   20b · REAL DITHERING / SECTION SPACING / STEP STATES / DRAG / MENUS / ICONS
   ========================================================================== */

/* 1. REAL DITHERING on body background — Win95 50% pixel-dither checkerboard
   (overlaid above the body rule in §01 for explicit per-element overrides) */

/* 2. SECTION SPACING — breathing room between home sections */
.sec { margin: 32px 0; }
.sec + .sec { margin-top: 48px; }

/* 3. STEP PROGRESSION STATES — visual progression of the 3 step windows */
.step--active .window__titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  opacity: 1;
}
.step--done .window__titlebar {
  background: linear-gradient(90deg, #008000, #006600);
}
.window.step--locked { opacity: .55; }
.step--locked .window__titlebar {
  background: linear-gradient(90deg, #555, #333);
}
.step--locked .window__body { filter: grayscale(.6); }

/* 4. DRAGGABLE WINDOW */
.window--draggable { position: relative; cursor: grab; }
.window--dragging {
  cursor: grabbing;
  box-shadow: 5px 5px 0 rgba(0,0,0,.4) !important;
  z-index: 1000;
}

/* 5. MENUBAR DROPDOWN */
.menubar__item { position: relative; }
.menubar__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--chrome);
  border: 1px solid var(--white);
  box-shadow: var(--bevel-sunken);
  min-width: 120px;
  display: none;
  z-index: 500;
}
.menubar__item:hover .menubar__dropdown { display: block; }
.menubar__dropdown-item {
  display: block;
  padding: 4px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
}
.menubar__dropdown-item:hover {
  background: var(--navy);
  color: var(--white);
}

/* 6. PIXEL-ART ICON BASE */
.pix-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.pix-icon--lg { width: 32px; height: 32px; }


/* ==========================================================================
   21 · CTA ACCENTS / BOOT SKIP / SIM TAGS / MOBILE NAV
   ========================================================================== */

/* B) Solana-green accent layered on .btn--primary (CONNECT WALLET).
   Green border + subtle glow makes the CTA pop in the gray Win95 env
   without destroying the raised-bevel aesthetic. Cascade merges with the
   navy base defined in §07. */
.btn--primary {
  border: 2px solid #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, .3);
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 0 10px rgba(0, 255, 136, .5);
}
.btn--primary:active:not(:disabled),
.btn--primary.is-pressed {
  box-shadow: 0 0 3px rgba(0, 255, 136, .2);
}

/* C) Boot screen skip button — top-right of #bootScreen, Win95-styled.
   Lets returning visitors dismiss the BIOS intro. */
#bootSkip {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10000;
  font-family: var(--font-ui);
  font-size: 10px;
  color: #111;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
#bootSkip:hover { background: #cdcdcd; }
#bootSkip:active {
  box-shadow: var(--bevel-sunken);
  padding: 7px 11px 5px 13px;
}

/* E) SIMULATED badge — tiny gray pill for sim/demo labels. */
.sim-tag {
  display: inline-block;
  background: #c0c0c0;
  border: 1px solid #808080;
  font-size: 9px;
  font-family: var(--font-ui);
  padding: 1px 4px;
  color: #404040;
  border-radius: 0;
  vertical-align: middle;
  line-height: 1.4;
}

/* F) Mobile bottom-nav — hidden on desktop, shown on mobile (<900px).
   Fixed above the 44px taskbar; 4 sala buttons as alternative to
   desktop icons. Base (desktop) state is display:none. */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 44px;
  left: 0;
  right: 0;
  z-index: 199;
  height: 52px;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  gap: 2px;
  padding: 4px;
}
.mobile-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-ui);
  font-size: 8px;
  color: #111;
  text-decoration: none;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 4px 2px;
  cursor: pointer;
}
.mobile-nav__btn:hover { background: #cdcdcd; }
.mobile-nav__btn.is-active {
  box-shadow: var(--bevel-sunken);
  font-weight: 700;
}
.mobile-nav__icon { font-size: 16px; line-height: 1; }


/* ==========================================================================
   22 · PRICING TABLE — tier comparison (MARKET sala)
   ========================================================================== */

.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing__col {
  display: flex;
  flex-direction: column;
  transition: transform .12s ease-out;
}
.pricing__col:hover { transform: translateY(-2px); }

/* Ambassador tier gets the gold-plate treatment */
.pricing__col--featured { position: relative; }
.pricing__col--featured .window__titlebar {
  background: linear-gradient(90deg, var(--gold), #d9a520);
}
.pricing__col--featured .window__title-text { color: var(--black); }
.pricing__col--featured .window__titlebar .window__title-text { color: var(--black); }

.pricing__ribbon {
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  background: var(--err);
  box-shadow: var(--bevel-raised);
  padding: 3px 8px;
}

.pricing__name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--navy);
}

.pricing__price {
  font-family: var(--font-term);
  font-size: 34px;
  line-height: 1.1;
  color: var(--navy);
  margin-top: 2px;
}
.pricing__price small {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--gray);
  letter-spacing: .5px;
}

.pricing__min {
  font-family: var(--font-body);
  font-size: 12px;
  color: #444;
  margin-top: 6px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--gray);
}
.pricing__min strong { color: var(--gold); }

.pricing__list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.pricing__list li {
  font-family: var(--font-body);
  font-size: 13px;
  color: #222;
  padding-left: 16px;
  position: relative;
}
.pricing__list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--ok);
}
.pricing__list li.is-off { color: var(--gray); }
.pricing__list li.is-off::before {
  content: '✕';
  color: var(--err);
}

.pricing__cta { width: 100%; }

/* Comparison table — full-width breakdown */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 13px;
}
.pricing-table th {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}
.pricing-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #ddd;
  color: #111;
}
.pricing-table tr:hover td { background: #eef4ff; }
.pricing-table td:first-child {
  font-family: var(--font-ui);
  font-size: 10px;
  color: #444;
  white-space: nowrap;
}
.pricing-table .pricing-table__yes { color: var(--ok); font-weight: 700; }
.pricing-table .pricing-table__no  { color: var(--err); }
.pricing-table tr.pricing-table__row--featured td {
  background: #fff8dc;
}
.pricing-table tr.pricing-table__row--featured:hover td {
  background: #fdf0c0;
}


/* ==========================================================================
   23 · EMBASSY — referral room
   ========================================================================== */

/* Ref link console — a sunken white well with a dotted selection box */
.ref-link {
  display: flex;
  gap: 8px;
  align-items: stretch;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
  padding: 8px;
}
.ref-link__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-term);
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  outline: none;
}
.ref-link__input:focus {
  outline: 1px dotted var(--navy);
  outline-offset: 2px;
}

/* Stats row — reuse .stat sizing, gold numbers for the bounty feel */
.ref-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ref-stats .stat__num { color: var(--gold); }

/* Leaderboard rows — chrome beveled strips */
.ref-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ref-board__row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 8px 12px;
  transition: transform .12s ease-out;
}
.ref-board__row:hover { transform: translateX(3px); }
.ref-board__rank {
  font-family: var(--font-term);
  font-size: 24px;
  line-height: 1;
  color: var(--gray);
}
.ref-board__row--top .ref-board__rank { color: var(--gold); }
.ref-board__addr {
  font-family: var(--font-body);
  font-size: 13px;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ref-board__count {
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1;
  color: var(--navy);
}
.ref-board__label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--gray);
}

/* Bounty ledger stats — sunken chrome wells with a gold payout readout */
.ref-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: var(--chrome);
  box-shadow: var(--bevel-sunken);
  padding: 10px 12px;
  margin-bottom: 8px;
  transition: transform .12s ease-out;
}
.ref-stat:hover { transform: translateX(3px); }
.ref-stat__label {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  color: #404040;
  flex: 1;
}
.ref-stat__value {
  font-family: var(--font-term);
  font-size: 26px;
  line-height: 1;
  color: var(--gold);
}
.ref-stat__value small {
  font-size: 14px;
  color: var(--gray);
}

/* Bounty tier ladder — raised strips; the current tier lights up gold */
.bounty-tiers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.bounty-tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  background: var(--chrome);
  box-shadow: var(--bevel-raised);
  padding: 8px 12px;
  transition: transform .12s ease-out, background .12s ease-out;
}
.bounty-tier:hover { transform: translateX(3px); }
.bounty-tier__range {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 1px;
  color: #222;
}
.bounty-tier__pay {
  font-family: var(--font-term);
  font-size: 20px;
  line-height: 1;
  color: var(--navy);
}
.bounty-tier__rank {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--gray);
}
.bounty-tier--current {
  background: #fff8dc;
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}
.bounty-tier--current .bounty-tier__pay { color: var(--gold); }
.bounty-tier--current .bounty-tier__rank {
  color: var(--gold);
  font-weight: 700;
}
.bounty-tier--current .bounty-tier__range::after {
  content: '◂ YOU ARE HERE';
  margin-left: 8px;
  color: var(--gold);
  font-weight: 700;
}

/* Claim status toast — fixed bottom-right, above the taskbar */
.ref-toast {
  position: fixed;
  right: 12px;
  bottom: 56px;
  z-index: 400;
  min-width: 240px;
  max-width: 340px;
  background: var(--chrome);
  box-shadow: var(--window-shadow), var(--bevel-raised);
  padding: 3px;
  animation: window-open .16s ease-out;
}
.ref-toast__titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(90deg, var(--navy), var(--blue));
  padding: 3px 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  color: var(--white);
}
.ref-toast__body {
  background: var(--white);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: #111;
}
.ref-toast--ok .ref-toast__body   { border-left: 4px solid var(--ok); }
.ref-toast--err .ref-toast__body  { border-left: 4px solid var(--err); }
.ref-toast--wait .ref-toast__body { border-left: 4px solid var(--gold); }


/* ==========================================================================
   20 · RESPONSIVE / REDUCED MOTION
   ========================================================================== */

@media (max-width: 900px) {
  .desktop-icons { display: none; }
  /* F) Show mobile bottom-nav below 900px */
  .mobile-nav { display: flex; }
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 1000px) {
  .pricing { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .steps { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .ref-board__row { grid-template-columns: 28px 1fr auto; }
  .ref-board__label { display: none; }
}

@media (max-width: 640px) {
  .hero__title { font-size: 24px; }

  .menubar__item:not(:last-child) { display: none; }

  .window { padding: 2px; }
  .window__body { padding: 12px; }
  .window__body--flush { padding: 0; }

  .taskbar__btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 8px;
    max-width: none;
  }
  .taskbar__start { padding: 6px 8px; }

  .ledger__row {
    grid-template-columns: 44px 40px 1fr auto;
    gap: 10px;
    padding: 12px;
  }
  .ledger__num { font-size: 26px; }
  .ledger__icon { font-size: 22px; }

  .boot { padding: 24px; font-size: 17px; }

  .footer__cell--grow { flex-basis: 100%; }
}

/* Respect users who opt out of motion: freeze the ticker, cursors, LEDs */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════
   XP / POINTS SYSTEM
   ══════════════════════════════════════════ */

/* ── Taskbar XP bar ── */
.xp-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 180px;
  height: 18px;
  background: var(--silver, #c0c0c0);
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  margin-right: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.xp-bar__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    var(--navy, #000080) 0px,
    var(--navy, #000080) 4px,
    #1a1aaa 4px,
    #1a1aaa 8px
  );
  transition: width .6s ease;
}
.xp-bar__label {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #000;
  text-shadow: 0 0 2px rgba(255,255,255,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* ── XP Progress (DESKTOP sala) ── */
.xp-hero {
  text-align: center;
  padding: 20px 16px 16px;
}
.xp-hero__level {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--navy, #000080);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.xp-hero__sub {
  font-size: 11px;
  color: #808080;
  margin-bottom: 14px;
}
.xp-progress {
  position: relative;
  width: 100%;
  height: 22px;
  background: var(--silver, #c0c0c0);
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  overflow: hidden;
  margin-bottom: 8px;
}
.xp-progress__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: repeating-linear-gradient(
    90deg,
    var(--navy, #000080) 0px,
    var(--navy, #000080) 6px,
    #1a1aaa 6px,
    #1a1aaa 12px
  );
  transition: width .8s ease;
}
.xp-progress__text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  font-weight: 700;
  color: #000;
  text-shadow: 0 0 3px rgba(255,255,255,.7);
}
.xp-streak {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.xp-streak__count {
  font-size: 14px;
  font-weight: 900;
  color: var(--gold, #b8860b);
}
.xp-streak__label {
  font-size: 10px;
  color: #808080;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── Quest table ── */
.quest-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.quest-table th {
  text-align: left;
  padding: 6px 10px;
  background: var(--navy, #000080);
  color: #fff;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.quest-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #dfdfdf;
}
.quest-table tr:hover td {
  background: #f0f0ff;
}
.quest-status {
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  width: 36px;
}
.quest-status--done { color: #008000; }
.quest-status--pending { color: #c0c0c0; }
.quest-name {
  font-weight: 700;
  font-size: 12px;
}
.quest-desc {
  font-size: 10px;
  color: #808080;
  margin-top: 2px;
}
.quest-xp {
  font-weight: 900;
  color: var(--gold, #b8860b);
  white-space: nowrap;
  text-align: right;
}
.quest-progress {
  padding: 10px 12px;
  font-size: 11px;
  color: #808080;
  border-top: 2px solid #dfdfdf;
}
.quest-progress strong {
  color: var(--navy, #000080);
}

/* ── Badge grid ── */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
}
.badge-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  background: var(--silver, #c0c0c0);
  text-align: center;
  min-height: 80px;
  justify-content: center;
}
.badge-slot--earned {
  border-color: var(--gold, #b8860b) #ffe680 #ffe680 var(--gold, #b8860b);
  background: #fffde6;
}
.badge-slot--locked {
  opacity: .45;
  filter: grayscale(1);
}
.badge-slot__icon {
  width: 24px;
  height: 24px;
}
.badge-slot__name {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1.2;
}
.badge-slot--earned .badge-slot__name {
  color: var(--navy, #000080);
}
.badge-slot--locked .badge-slot__name {
  color: #808080;
}

/* ── Activity feed ── */
.activity-feed {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 0;
}
.activity-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 12px;
  font-size: 11px;
  border-bottom: 1px solid #f0f0f0;
}
.activity-item:last-child { border-bottom: none; }
.activity-time {
  font-size: 9px;
  color: #808080;
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
  min-width: 36px;
}
.activity-text {
  color: #333;
  line-height: 1.4;
}
.activity-text strong {
  color: var(--navy, #000080);
}
.activity-placeholder {
  padding: 20px;
  text-align: center;
  font-size: 11px;
  color: #808080;
  font-family: 'Courier New', monospace;
}

/* ── Checkin button ── */
.btn--checkin {
  background: var(--gold, #b8860b);
  color: #fff;
  border: 2px solid;
  border-color: #ffe680 #806000 #806000 #ffe680;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 10px;
  padding: 6px 16px;
  cursor: pointer;
}
.btn--checkin:hover {
  background: #d4a017;
}
.btn--checkin:active {
  border-color: #806000 #ffe680 #ffe680 #806000;
}
.btn--checkin:disabled {
  opacity: .5;
  cursor: default;
}

/* ── XP toast (floating notification) ── */
.xp-toast {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 9999;
  min-width: 220px;
  max-width: 300px;
  background: var(--silver, #c0c0c0);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 3px 3px 0 rgba(0,0,0,.3);
  animation: xpToastIn .3s ease;
  font-size: 12px;
}
.xp-toast__titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--navy, #000080);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}
.xp-toast__body {
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.5;
}
.xp-toast__body strong {
  color: var(--gold, #b8860b);
  font-size: 14px;
}
@keyframes xpToastIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.xp-toast--out {
  animation: xpToastOut .3s ease forwards;
}
@keyframes xpToastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

/* ── Level-up flash ── */
.levelup-flash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,128,.6);
  animation: flashIn .4s ease;
}
.levelup-flash__card {
  background: var(--silver, #c0c0c0);
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 30px 40px;
  text-align: center;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
}
.levelup-flash__title {
  font-size: 12px;
  letter-spacing: 3px;
  color: #808080;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.levelup-flash__level {
  font-size: 32px;
  font-weight: 900;
  color: var(--navy, #000080);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.levelup-flash__sub {
  font-size: 11px;
  color: #808080;
  margin-top: 8px;
}
@keyframes flashIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Responsive: badge grid ── */
@media (max-width: 600px) {
  .badge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 10px;
  }
  .xp-bar { width: 120px; }
  .xp-hero__level { font-size: 22px; }
  .quest-table td, .quest-table th { padding: 6px 8px; }
}

/* ══════════════════════════════════════════
   NOTIFICATION CENTER
   ══════════════════════════════════════════ */

.notif-bell {
  position: relative;
  background: var(--btn-face, #c0c0c0);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  width: 28px;
  height: 24px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  image-rendering: pixelated;
}
.notif-bell:active {
  border-color: #808080 #fff #fff #808080;
}
.notif-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #c00;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 12px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  border-radius: 0;
  font-family: inherit;
}
.notif-dropdown {
  position: fixed;
  bottom: 36px;
  right: 8px;
  width: 280px;
  max-height: 320px;
  background: var(--btn-face, #c0c0c0);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notif-dropdown__header {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 6px;
  letter-spacing: .5px;
}
.notif-dropdown__list {
  overflow-y: auto;
  max-height: 270px;
  padding: 2px;
}
.notif-dropdown__empty {
  padding: 16px 8px;
  text-align: center;
  color: #808080;
  font-size: 10px;
}
.notif-item {
  display: flex;
  gap: 6px;
  padding: 4px 6px;
  font-size: 10px;
  border-bottom: 1px solid #dfdfdf;
  align-items: baseline;
}
.notif-item--new {
  background: #ffffcc;
}
.notif-item__time {
  color: #808080;
  flex-shrink: 0;
  font-size: 9px;
}
.notif-item__text {
  color: #000;
}

/* ══════════════════════════════════════════
   HOME ACTIVITY FEED
   ══════════════════════════════════════════ */

.activity-feed--home {
  max-height: 240px;
}
.activity-item__wallet {
  color: #000080;
  font-weight: 700;
  font-size: 9px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   STREAK CALENDAR
   ══════════════════════════════════════════ */

.streak-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 6px;
}
.streak-cal__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  border: 1px solid #dfdfdf;
  background: #fff;
  color: #808080;
}
.streak-cal__day--active {
  background: #000080;
  color: #fff;
  border-color: #000060;
}
.streak-cal__day--today {
  border: 2px solid #c00;
  color: #c00;
}
.streak-cal__day--today.streak-cal__day--active {
  color: #fff;
  border-color: #ff0;
}
.streak-cal__label {
  font-size: 8px;
  color: #808080;
  text-align: center;
  padding: 1px 0;
}
.streak-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid #dfdfdf;
}
.streak-info__count {
  font-size: 18px;
  font-weight: 700;
  color: #000080;
}
.streak-info__label {
  font-size: 9px;
  color: #808080;
  text-transform: uppercase;
}
.streak-info__bonus {
  margin-left: auto;
  font-size: 9px;
  color: #008000;
  font-weight: 700;
}

/* ══════════════════════════════════════════
   REFERRAL DASHBOARD (EMBASSY)
   ══════════════════════════════════════════ */

.recruit-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.recruit-table th {
  background: var(--win-title, #000080); color: #fff;
  text-align: left; padding: 6px 10px; font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
}
.recruit-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--bevel-light, #dfdfdf);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
}
.recruit-table tr:hover td { background: rgba(0,0,128,.06); }
.recruit-table tr.recruit-table__me td {
  background: rgba(0,128,128,.12); font-weight: 700;
}
.recruit-table .recruit-rank { color: var(--win-title, #000080); font-weight: 700; }
.recruit-table .recruit-rank--1 { color: #b8860b; }
.recruit-table .recruit-rank--2 { color: #808080; }
.recruit-table .recruit-rank--3 { color: #8b4513; }

.bounty-tiers { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bounty-tier {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  border: 1px solid var(--bevel-dark, #808080);
  background: var(--win-face, #c0c0c0);
  box-shadow: inset 1px 1px 0 var(--bevel-light, #dfdfdf);
}
.bounty-tier--active {
  background: var(--win-title, #000080); color: #fff;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.3);
}
.bounty-tier__label { letter-spacing: 1px; text-transform: uppercase; font-size: 10px; }
.bounty-tier__amount { font-weight: 700; }

/* ══════════════════════════════════════════
   LOOT CRATE
   ══════════════════════════════════════════ */

.toast--loot { border-color: #b8860b !important; }
.toast--loot .toast__title { color: #b8860b; }

.loot-history { display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.loot-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  border: 1px solid var(--bevel-dark, #808080);
  background: var(--win-face, #c0c0c0);
}
.loot-item__tier { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 10px; }
.loot-item__tier--common { color: #808080; }
.loot-item__tier--rare { color: #000080; }
.loot-item__tier--epic { color: #800080; }
.loot-item__tier--legendary { color: #b8860b; }
.loot-item__xp { font-weight: 700; }
.loot-item__time { color: #808080; font-size: 10px; }

/* ==========================================================================
   30 · OFFER — SALA 00 · EXECUTIVE DECREE № 051 (THE CITIZEN'S BARGAIN)
   ========================================================================== */

/* --- Giant banner — the decree in one line of VT323 --- */

.offer-banner {
  text-align: center;
  padding: 14px 10px 12px;
}

.offer-banner__line {
  margin: 4px 0 8px;
  font-family: var(--font-term);
  font-size: clamp(30px, 5.4vw, 54px);
  line-height: 1;
  color: var(--navy);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .12);
}

.offer-banner__sub {
  margin: 0 0 8px;
  font-family: var(--font-term);
  font-size: clamp(19px, 3.2vw, 30px);
  line-height: 1.05;
  color: var(--gold);
}

.offer-banner__note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .5px;
  color: #444;
}

/* --- Tier cards — plan-card grid, reuses .pricing__* inside each window --- */

.offer-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 18px 0;
}

.offer-tier {
  display: flex;
  flex-direction: column;
  min-width: 0; /* let grid tracks shrink; titlebar ellipsizes */
  transition: transform .12s ease-out;
}
.offer-tier:hover { transform: translateY(-2px); }

/* equal-height windows, footer pinned to the bottom of each card */
.offer-tier > .window {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.offer-tier > .window > .window__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* DIAMOND gets the gold-plate treatment, same recipe as MARKET featured */
.offer-tier--featured { position: relative; }
.offer-tier--featured .window__titlebar {
  background: linear-gradient(90deg, var(--gold), #d9a520);
}
.offer-tier--featured .window__title-text { color: var(--black); }
.offer-tier--featured .window__titlebar .window__title-text { color: var(--black); }

.offer-ribbon {
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
  background: var(--err);
  box-shadow: var(--bevel-raised);
  padding: 3px 8px;
}

.offer-tier__foot {
  margin: auto 0 0; /* pinned to card bottom by the flex body above */
  font-family: var(--font-ui);
  font-size: 9px;
  color: #444;
  border-top: 1px dotted var(--gray);
  padding-top: 8px;
}

/* --- Savings calculator --- */

.offer-calc__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #111;
  margin-bottom: 10px;
}

.offer-calc__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.offer-calc__spend {
  flex: none;
  min-width: 92px;
  text-align: right;
  font-family: var(--font-term);
  font-size: 26px;
  line-height: 1;
  color: var(--navy);
}

/* Win95 slider — sunken white track, raised chrome thumb */
.offer-calc__range {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.offer-calc__range:focus { outline: 1px dotted var(--black); outline-offset: 2px; }
.offer-calc__range::-webkit-slider-runnable-track {
  height: 8px;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
}
.offer-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 24px;
  margin-top: -8px;
  background: var(--chrome);
  border: 1px solid var(--black);
  box-shadow: var(--bevel-raised);
}
.offer-calc__range::-moz-range-track {
  height: 8px;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
}
.offer-calc__range::-moz-range-thumb {
  width: 12px;
  height: 22px;
  background: var(--chrome);
  border: 1px solid var(--black);
  border-radius: 0;
  box-shadow: var(--bevel-raised);
}

.offer-calc__term { margin-top: 4px; }

.offer-calc__note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  color: #444;
}

/* --- Anti-scam FAQ — native details/summary in Win95 chrome --- */

.offer-faq__item {
  background: var(--chrome);
  box-shadow: var(--bevel-sunken);
  margin: 8px;
}

.offer-faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: #111;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.offer-faq__item summary::-webkit-details-marker { display: none; }
.offer-faq__item summary::after {
  content: '[+]';
  color: var(--navy);
  flex: none;
}
.offer-faq__item[open] summary::after { content: '[−]'; }
.offer-faq__item summary:hover { background: var(--chrome-hi); }
.offer-faq__item[open] summary { box-shadow: inset 0 -1px 0 var(--gray); }

.offer-faq__a {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: #222;
  padding: 12px 14px 14px;
}
.offer-faq__a a { color: var(--link); }

/* --- Responsive --- */

@media (max-width: 1000px) {
  .offer-tiers { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .offer-tiers { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .offer-calc__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .offer-calc__spend { text-align: left; }
}

/* ==========================================================================
   31 · REGISTRY — CITIZEN LEDGER blocks
   The registry view's onMount injects .reg-stat / .reg-tiers / .rtier /
   .reg-feed markup into #registryGrid; these rules frame it (previously
   undefined, so the window rendered as an unstyled stack of divs).
   ========================================================================== */

/* #registryGrid carries .registry-table: make it a padded grid —
   3 stat boxes up top, tier distribution + feed full-width below. */
.registry-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px;
}

.registry-loading {
  grid-column: 1 / -1;
  padding: 12px 6px;
  font-family: var(--font-term);
  font-size: 19px;
  color: var(--gray);
}
.registry-loading--err { color: var(--err); }

/* stat boxes — same recipe as .stat (sunken chrome, VT323 number) */
.reg-stat {
  background: var(--chrome);
  box-shadow: var(--bevel-sunken);
  padding: 10px 16px;
  min-width: 0;
}
.reg-stat__num {
  display: block;
  font-family: var(--font-term);
  font-size: 30px;
  line-height: 1.1;
  color: var(--navy);
}
.reg-stat__label {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #333;
}

.reg-tiers,
.reg-feed { grid-column: 1 / -1; min-width: 0; }

.reg-block__title {
  margin: 4px 0 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--navy);
}

/* tier distribution — label row + sunken bar track with a colored fill */
.rtier { margin-bottom: 10px; }
.rtier:last-child { margin-bottom: 0; }
.rtier__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  margin-bottom: 4px;
}
.rtier__head span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rtier__bar {
  height: 10px;
  background: var(--white);
  box-shadow: var(--bevel-sunken);
}
.rtier__bar span {
  display: block;
  height: 100%;
  min-width: 2px;
}

/* latest naturalizations — feed rows like .activity-item */
.reg-feed__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f0f0;
}
.reg-feed__row:last-child { border-bottom: none; }
.reg-feed__avatar {
  flex: none;
  width: 10px;
  height: 10px;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
}
.reg-feed__tier {
  font-family: var(--font-ui);
  font-size: 10px;
}
.reg-feed__spacer { flex: 1; }
.reg-feed__time {
  font-family: var(--font-ui);
  font-size: 9px;
  color: var(--gray);
}
.reg-feed__empty {
  margin: 0;
  font-family: var(--font-term);
  font-size: 17px;
  color: var(--gray);
}

@media (max-width: 640px) {
  .registry-table { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   CITIZEN ID CARD
   ══════════════════════════════════════════ */

.idcard-wrap { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.idcard-canvas {
  width: 100%; max-width: 560px; height: auto;
  display: block; margin: 0 auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
  border: 2px solid #808080;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.idcard-canvas:hover {
  transform: translate(-2px, -2px) rotate(-.4deg);
  box-shadow: 7px 7px 0 rgba(0,0,0,.4);
}
.idcard-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.idcard-actions .btn { min-width: 150px; }

/* ═══════════════════════════════════════════════════════
   SALA 08 — DOCS · Win95 Help Viewer
   ═══════════════════════════════════════════════════════ */
.sala--docs { padding: 24px 16px 40px; }

.docs-layout {
  display: flex;
  min-height: 560px;
  background: #fff;
}

/* ── sidebar (tree view) ── */
.docs-nav {
  width: 230px;
  min-width: 230px;
  background: #c0c0c0;
  border-right: 2px solid #808080;
  display: flex;
  flex-direction: column;
  box-shadow: inset -1px 0 0 #fff;
}
.docs-nav__header {
  background: #000080;
  color: #fff;
  padding: 8px 10px;
  border-bottom: 2px solid #000;
}
.docs-nav__title {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.docs-nav__list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.docs-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font-family: 'VT323', monospace;
  font-size: 17px;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.docs-nav__item:hover {
  background: #d4d0c8;
}
.docs-nav__item.is-active {
  background: #000080;
  color: #fff;
  border-left-color: #b8860b;
}
.docs-nav__item.is-active .pix-icon { filter: brightness(1.3); }
.docs-nav__icon { display: flex; flex-shrink: 0; }
.docs-nav__label { line-height: 1.2; }
.docs-nav__footer {
  padding: 8px 10px;
  border-top: 2px solid #808080;
  box-shadow: inset 0 1px 0 #fff;
  font-family: 'VT323', monospace;
  font-size: 14px;
  color: #404040;
  display: flex;
  justify-content: space-between;
}

/* ── content pane ── */
.docs-content {
  flex: 1;
  overflow-y: auto;
  max-height: 70vh;
  padding: 24px 28px 40px;
  background: #fff;
  color: #000;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.65;
}
.docs-h {
  font-family: 'Silkscreen', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  color: #000080;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #000080;
}
.docs-h4 {
  font-family: 'Silkscreen', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #000;
  margin: 24px 0 10px;
  text-transform: uppercase;
}
.docs-p { margin: 0 0 12px; }
.docs-p strong { color: #000080; }
.docs-ol, .docs-ul { margin: 0 0 14px; padding-left: 22px; }
.docs-ol li, .docs-ul li { margin-bottom: 6px; }
.docs-ol li::marker { font-family: 'VT323', monospace; color: #000080; font-weight: 700; }
.docs-ul li::marker { color: #000080; }
.docs-content a { color: #000080; text-decoration: underline; }
.docs-content a:hover { color: #b8860b; }

/* inline code */
.docs-code {
  font-family: 'VT323', monospace;
  font-size: 16px;
  background: #e8e8e0;
  border: 1px solid #c0c0c0;
  padding: 1px 5px;
  color: #000080;
  white-space: nowrap;
}

/* ── tables ── */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 13px;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #c0c0c0;
}
.docs-table th {
  background: #000080;
  color: #fff;
  font-family: 'Silkscreen', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid #000050;
}
.docs-table td {
  padding: 7px 10px;
  border: 1px solid #c0c0c0;
  vertical-align: top;
}
.docs-table tbody tr:nth-child(even) { background: #f4f4ee; }
.docs-table tbody tr:hover { background: #e8e8ff; }
.docs-table--api td:nth-child(2) { white-space: nowrap; }

/* tier chips */
.docs-tier {
  font-family: 'Silkscreen', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border: 1px solid #000;
  display: inline-block;
  white-space: nowrap;
}
.docs-tier--stateless { background: #808080; color: #fff; }
.docs-tier--resident { background: #c0c0c0; color: #000; }
.docs-tier--citizen { background: #000080; color: #fff; }
.docs-tier--senator { background: #b8860b; color: #fff; }
.docs-tier--ambassador { background: #ffd700; color: #000; border-color: #b8860b; }

/* loot chips */
.docs-loot {
  font-family: 'Silkscreen', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border: 1px solid #000;
  display: inline-block;
}
.docs-loot--common { background: #c0c0c0; color: #000; }
.docs-loot--rare { background: #000080; color: #fff; }
.docs-loot--epic { background: #800080; color: #fff; }
.docs-loot--legendary { background: #ffd700; color: #000; border-color: #b8860b; }

/* HTTP method chips */
.docs-method {
  font-family: 'Silkscreen', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 7px;
  border: 1px solid #000;
  display: inline-block;
}
.docs-method--get { background: #000080; color: #fff; }
.docs-method--post { background: #008000; color: #fff; }

/* ── note callout ── */
.docs-note {
  background: #ffffcc;
  border: 2px solid #b8860b;
  border-left: 6px solid #b8860b;
  padding: 10px 14px;
  margin: 16px 0;
  font-size: 13px;
}
.docs-note__tag {
  font-family: 'Silkscreen', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  background: #b8860b;
  color: #fff;
  padding: 2px 6px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}
.docs-note--blue {
  background: #e8f0ff;
  border-color: #000080;
  border-left-color: #000080;
}
.docs-note__tag--blue { background: #000080; }

/* ── FAQ accordion ── */
.docs-faq { display: flex; flex-direction: column; gap: 8px; }
.docs-faq__item {
  border: 2px solid #000;
  background: #fff;
  box-shadow: 2px 2px 0 #c0c0c0;
  transition: box-shadow .15s;
}
.docs-faq__item:hover { box-shadow: 3px 3px 0 #808080; }
.docs-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: #c0c0c0;
  border: none;
  border-bottom: 2px solid #808080;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: background .1s;
}
.docs-faq__q::after {
  content: '+';
  font-family: 'Silkscreen', monospace;
  font-size: 12px;
  color: #000080;
  flex-shrink: 0;
  margin-left: 10px;
  transition: transform .15s;
}
.docs-faq__q:hover { background: #d4d0c8; }
.docs-faq__item.is-open .docs-faq__q { background: #000080; color: #fff; border-bottom-color: #000050; }
.docs-faq__item.is-open .docs-faq__q::after { content: '−'; color: #ffd700; transform: rotate(180deg); }
.docs-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease;
}
.docs-faq__item.is-open .docs-faq__a { max-height: 300px; }
.docs-faq__a p { margin: 0; padding: 12px 14px; font-size: 13px; }

/* ── responsive ── */
@media (max-width: 720px) {
  .docs-layout { flex-direction: column; }
  .docs-nav {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 2px solid #808080;
  }
  .docs-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }
  .docs-nav__item {
    width: auto;
    border-left: none;
    border: 1px solid #808080;
    padding: 5px 10px;
    font-size: 15px;
  }
  .docs-nav__item.is-active { border-color: #ffd700; }
  .docs-nav__footer { display: none; }
  .docs-content { padding: 18px 16px 32px; max-height: none; }
  .docs-table { font-size: 12px; }
  .docs-table th, .docs-table td { padding: 5px 7px; }
  .docs-table--api td:nth-child(2) { white-space: normal; word-break: break-all; }
}