/* ============================================================================
   HopLedger — Game Admin theme  ("Brutalist Mono")
   Shared by every /game-admin/* surface (signup · login · console) so they
   are visually identical: one file, one design language.

   Stark and on-chain-native: paper-white page, hard black rules, zero
   rounding, and offset block shadows with NO blur (8px 8px 0 #111). One
   pop color — hazard yellow (#ffe600) — marks money, chips, and secondary
   actions. Space Grotesk headlines the chrome; JetBrains Mono carries body,
   data, and inputs so every address and price reads like a terminal.

   Pages keep ONLY their structural rules (wizard rail, item tables, modal,
   …); every token and base component lives here so re-skinning is one edit.
   Legacy token names are aliased so page selectors resolve unchanged:
     --panel/--inset → white surfaces · --chip → the yellow highlight
     --gold/--gold-2 → black ink · --accent-2/--teal → black ink
     --pixel/--display → the Space Grotesk display stack (no bitmap font)
     --shadow(-dark/-light) → black; brutalist offset shadows are all #111
     --hi → the hazard-yellow pop; --line → the hard black rule
   ========================================================================== */
/* Fonts are loaded via <link rel="preconnect"> + <link rel="stylesheet"> in each
   page's <head> (before this file) — NOT an @import here. An @import chains a
   third-party round-trip after this sheet downloads, which flashes unstyled
   content on load/refresh. See home/login/console/signup heads. */

:root {
  /* Paper page, white panels, yellow chips. */
  --bg: #f4f4ef; --bg-2: #eae9e2;
  --panel: #ffffff; --panel-solid: #ffffff;
  --inset: #ffffff; --chip: #ffe600;
  /* Everything is black ink. */
  --ink: #111111; --text: #111111; --heading: #111111;
  --muted: #565656;
  /* No colored accent — the "accent" IS black; yellow is a separate pop. */
  --accent: #111111; --accent-strong: #000000;
  --gold: #111111; --gold-2: #111111;
  --accent-2: #111111; --teal: #111111;
  --hi: #ffe600;
  /* Hard black rules and hard black offset shadows (no blur, no color). */
  --line: #111111;
  --shadow: #111111; --shadow-dark: #111111; --shadow-light: #111111;
  --ok: #0a7d2c; --danger: #cc1f1f;
  /* Grotesk for chrome (--pixel/--display aliased to it), mono for everything else. */
  --sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --body: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --display: var(--sans); --pixel: var(--sans);
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center;
  font-family: var(--body); color: var(--ink); padding: 48px 16px; line-height: 1.6;
  background: var(--bg);
}

/* Hard-edged card: thick rule + solid offset shadow. */
.card {
  position: relative; width: min(600px, 94vw); background: var(--panel);
  border: 3px solid #111; border-radius: 0; padding: 30px;
  box-shadow: 8px 8px 0 0 #111;
}
.card::before, .card::after { content: none; }

/* Studio-facing surfaces (signup · login · console · home) head with the
   "HopLedger For Studios" wordmark logo served at /hopledger-logo-for-studios.svg. */
.brand-logo { display: block; width: 260px; max-width: 88%; height: auto; margin: 0 0 18px; }

/* Console label — a bordered yellow chip. */
.eyebrow { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700;
           letter-spacing: 1px; text-transform: uppercase; color: #111;
           background: var(--hi); padding: 5px 11px; border: 2px solid #111; border-radius: 0; }
.eyebrow b { color: #111; }

h1 { margin: 16px 0 6px; font-family: var(--sans); font-weight: 700; font-size: 27px; line-height: 1.2;
     letter-spacing: -.5px; text-transform: uppercase; color: var(--heading); word-break: break-word; }
/* A live game headlines the console on a bordered nameplate with a hard shadow. */
h1.game { display: inline-block; margin: 8px 0 6px; padding: 8px 16px; font-size: 22px; line-height: 1.25;
          color: #111; background: #fff; border: 2px solid #111; border-radius: 0;
          box-shadow: 5px 5px 0 0 #111; }

.sub { color: var(--muted); font-family: var(--mono); font-size: 12.5px; margin-bottom: 20px; line-height: 1.65; }
.sub b { color: #111; }

/* Section headers: uppercase, a thick black rule beneath. */
h2 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1px;
     text-transform: uppercase; color: var(--heading); margin: 28px 0 12px;
     padding-bottom: 8px; border-bottom: 2px solid #111; }
/* Money / identity sections get a bordered yellow bar with a hard shadow. */
h2.key { color: #111; border: 2px solid #111; padding: 10px 14px; border-radius: 0;
         display: flex; align-items: center; gap: 8px; background: var(--hi);
         box-shadow: 4px 4px 0 0 #111; }
h2.key::before { content: "\25A0"; font-size: 11px; }

label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; color: #111;
        margin: 16px 0 7px; letter-spacing: .6px; text-transform: uppercase; }

/* Hard-edged inputs — white, thick black border, mono. */
input, textarea, .field {
  font-family: var(--mono); width: 100%; padding: 12px 13px; font-size: 14px; color: #111;
  background: #fff; border: 2px solid #111; border-radius: 0; outline: none;
}
textarea.field { resize: vertical; min-height: 68px; line-height: 1.7; }
input::placeholder, textarea::placeholder { color: #8a8a8a; }
input:focus, textarea:focus, .field:focus { box-shadow: 4px 4px 0 0 #111; }

/* Solid black buttons that shove on click. */
button {
  font-family: var(--sans); cursor: pointer; border: 2px solid #111; border-radius: 0;
  font-size: 14px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  line-height: 1.4; padding: 13px; width: 100%; margin-top: 22px;
  color: #fff; background: #111; box-shadow: 4px 4px 0 0 #111;
  transition: transform .08s ease, box-shadow .08s ease;
}
button:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 #111; }
button:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 0 #111; }
button:disabled { background: #d7d7d2; color: #8a8a8a; border-color: #8a8a8a;
                  box-shadow: 4px 4px 0 0 #c4c4bd; cursor: default; }
/* Secondary action — yellow fill, black ink. */
button.secondary { background: var(--hi); color: #111; }

a { color: #111; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
a:hover { background: var(--hi); text-decoration: none; }
code { color: #111; font-family: var(--mono); font-weight: 700; word-break: break-all; }

.msg { font-family: var(--mono); font-size: 12px; line-height: 1.8; margin-top: 14px; min-height: 15px; }
.msg.ok { color: var(--ok); } .msg.fail, .msg.err { color: var(--danger); }

.hidden { display: none !important; }