/* FIXER PROTOCOL — shared stylesheet
   Tokens mirror docs/design.html so the login/debug scaffold and the
   living GDD read as the same product, not two different themes. */

:root {
  /* Terminal only — no light/paper theme in the app itself (that stays
     a design.html-only reading toggle). A future settings panel may add
     palette choices, but they'll all be terminal-style, not a paper mode. */
  --bg: #0c0b08;
  --bg-panel: #15130d;
  --bg-sunk: #080705;
  --ink: #ffcf7a;
  --ink-dim: #c9a65e;
  --line: #3a3018;
  --accent: #ffb000;
  --accent-ink: #0c0b08;
  --stamp: #ff6b3d;
  --danger: #ff6b3d;
  --ok: #7ada63;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif: 'Source Serif 4', Georgia, serif;
  --radius: 2px;
  /* How big the interface's text and panels are: the screen's step (--ui-vp, bigger on a big desktop screen so the
     panels don't sit small in it) times the player's UI text size setting (--ui-user, js/game/shell.js). The map's
     own zoom is its Map zoom setting, apart from this. */
  --ui-vp: 1;
  --ui-user: 0.85; /* the setting's default, small, until js/game/shell.js applies the saved one */
  --ui-scale: calc(var(--ui-vp) * var(--ui-user));
}
@media (min-width: 1500px) and (min-height: 800px) { :root { --ui-vp: 1.15; } }
@media (min-width: 1800px) and (min-height: 900px) { :root { --ui-vp: 1.25; } }
@media (min-width: 2400px) and (min-height: 1300px) { :root { --ui-vp: 1.6; } }
/* Chinese, Japanese and Korean (js/language.js sets the page's lang): the game's own fonts have no such characters, so they
   come from the system's own CJK fonts, picked for the language so the same character is drawn its way. */
:root:lang(zh-CN) {
  --mono: 'IBM Plex Mono', 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans SC', ui-monospace, monospace;
  --serif: 'Source Serif 4', 'Microsoft YaHei', 'PingFang SC', 'Noto Serif CJK SC', 'Noto Sans CJK SC', serif;
}
:root:lang(zh-TW) {
  --mono: 'IBM Plex Mono', 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans CJK TC', 'Noto Sans TC', ui-monospace, monospace;
  --serif: 'Source Serif 4', 'Microsoft JhengHei', 'PingFang TC', 'Noto Serif CJK TC', 'Noto Sans CJK TC', serif;
}
:root:lang(ko) {
  --mono: 'IBM Plex Mono', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Noto Sans KR', ui-monospace, monospace;
  --serif: 'Source Serif 4', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Serif CJK KR', 'Noto Sans CJK KR', serif;
}
:root:lang(ja) {
  --mono: 'IBM Plex Mono', 'Yu Gothic UI', 'Meiryo', 'Hiragino Sans', 'Noto Sans CJK JP', 'Noto Sans JP', ui-monospace, monospace;
  --serif: 'Source Serif 4', 'Yu Gothic UI', 'Meiryo', 'Hiragino Sans', 'Noto Serif CJK JP', 'Noto Sans CJK JP', serif;
}
/* A font picked in Settings, a pixel font or OpenDyslexic (js/fonts.js puts html.font-<id> on), for every line, the
   game's own fonts after it for any symbol it lacks. No faux bold: a pixel font without a bold face stays crisp. */
:root.font-vt323 { --mono: 'VT323', 'IBM Plex Mono', monospace; --serif: 'VT323', 'Source Serif 4', serif; }
:root.font-pixelify { --mono: 'Pixelify Sans', 'IBM Plex Mono', monospace; --serif: 'Pixelify Sans', 'Source Serif 4', serif; }
:root.font-silkscreen { --mono: 'Silkscreen', 'IBM Plex Mono', monospace; --serif: 'Silkscreen', 'Source Serif 4', serif; }
:root.font-dotgothic { --mono: 'DotGothic16', 'IBM Plex Mono', monospace; --serif: 'DotGothic16', 'Source Serif 4', serif; }
:root.font-fusion { --mono: 'Fusion Pixel', 'IBM Plex Mono', monospace; --serif: 'Fusion Pixel', 'Source Serif 4', serif; }
:root.font-opendyslexic { --mono: 'OpenDyslexic', 'IBM Plex Mono', monospace; --serif: 'OpenDyslexic', 'Source Serif 4', serif; }
:root.font-fusion-sc { --mono: 'Fusion Pixel SC', 'IBM Plex Mono', 'Microsoft YaHei', monospace; --serif: 'Fusion Pixel SC', 'Source Serif 4', 'Microsoft YaHei', serif; }
:root.font-fusion-tc { --mono: 'Fusion Pixel TC', 'IBM Plex Mono', 'Microsoft JhengHei', monospace; --serif: 'Fusion Pixel TC', 'Source Serif 4', 'Microsoft JhengHei', serif; }
:root.font-galmuri { --mono: 'Galmuri11', 'IBM Plex Mono', 'Malgun Gothic', monospace; --serif: 'Galmuri11', 'Source Serif 4', 'Malgun Gothic', serif; }
:root[class*="font-"] { font-synthesis-weight: none; }

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable;
  /* Touch browsers paint a translucent flash over whatever is tapped, and on a full-screen game canvas that
     is most of the screen. Every control here has its own pressed and hover styling, so the default is not
     needed. It inherits, so this covers every page. */
  -webkit-tap-highlight-color: transparent;
  /* The mouse's pointers are the palette's (js/cursors.js); the cursor inherits, so the arrow covers every page.
     The hand, drag arrow, barred arrow and text bar are set where the native pointer, move, not-allowed and text were. */
  cursor: var(--cursor-arrow, default);
}
a[href] { cursor: var(--cursor-hand, pointer); }
label, select, option, input[type="range"] { cursor: inherit; } /* the browser gives these its own default */
/* A dropdown's list is drawn in the page (a customizable select), not by the system, so its pointer and colors are
   the palette's too; a browser without it keeps the system's list. */
select, ::picker(select) { appearance: base-select; }
::picker(select) {
  color: var(--ink);
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2px 0;
}
option { padding: 3px 8px; }
option:hover, option:focus-visible { color: var(--accent-ink); background: var(--accent); outline: none; }
option:checked { color: var(--accent); }
option:checked:hover, option:checked:focus-visible { color: var(--accent-ink); }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], textarea { cursor: var(--cursor-text, text); }

/* Themed scrollbars everywhere in the app (not just game.html's comms
   panel) -- otherwise every scroll area falls back to the OS's native
   scrollbar, which clashes hard against this dark terminal palette (a
   plain white track/thumb on Windows, for instance). Firefox only supports
   a thumb + track color pair (scrollbar-color) with no border/inset
   control; WebKit/Chromium (::-webkit-scrollbar-*) gets the fuller
   treatment below. Thumb uses --accent, the same token the Settings-panel
   palette picker (js/game.js's applyPalette) already live-updates -- so
   changing that color recolors scrollbar thumbs too, with no extra wiring
   needed, since both just read the one custom property. Track/border use
   --bg-sunk, which the picker does NOT touch (only --accent/--ink/--ink-dim
   are wired to it), matching every other background token in the app. */
* {
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, var(--bg-sunk)) var(--bg-sunk);
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-sunk);
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 55%, var(--bg-sunk));
  border: 2px solid var(--bg-sunk);
  border-radius: var(--radius);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
::-webkit-scrollbar-corner {
  background: var(--bg-sunk);
}

/* Checkboxes drawn by the game, not the browser, so an unchecked one is a dark box instead of a white one.
   Each use still sets its own size (css/game.css); checked, the box fills with the accent and shows a dark tick. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  grid-template: 1fr / 1fr; /* the tick below fills the box, less its margin */
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 0;
  background: var(--bg-sunk);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--bg-sunk));
  border-radius: var(--radius);
  cursor: var(--cursor-hand, pointer);
}
input[type="checkbox"]::before {
  content: "";
  margin: 20%;
  background: var(--bg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  transform: scale(0);
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  transition: background .25s ease, color .25s ease;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: calc(640px * var(--ui-scale));
  margin: 0 auto;
  padding: 48px clamp(20px, 5vw, 40px) 80px;
}

.container.wide { max-width: calc(980px * var(--ui-scale)); }

header.masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 30px;
}

h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
  line-height: 1.05;
}

.subhead {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-dim);
  font-size: calc(15px * var(--ui-scale));
  margin: 0;
}

.credit {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: calc(10px * var(--ui-scale));
  line-height: 1.5;
  margin: 8px 0 0 0;
}

.stamp {
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  padding: 6px 10px;
  transform: rotate(-3deg);
  white-space: nowrap;
  border-radius: var(--radius);
}

h2 {
  font-family: var(--mono);
  font-size: calc(16px * var(--ui-scale));
  font-weight: 600;
  margin: 0 0 14px 0;
}

h3 {
  font-family: var(--mono);
  font-size: calc(13px * var(--ui-scale));
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px 0;
}

p { line-height: 1.6; font-size: calc(15px * var(--ui-scale)); }

.panel {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 0 0 18px 0;
}

.hidden { display: none; }

.link-line {
  font-family: var(--mono);
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--ink-dim);
  margin: 0;
}
.link-line a { color: var(--accent); }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  color: var(--ink-dim);
  margin: 18px 0;
}
.divider[hidden] { display: none; }
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

label {
  display: block;
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  color: var(--ink-dim);
  margin-bottom: 6px;
}

input[type="email"],
input[type="text"] {
  width: 100%;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: calc(14px * var(--ui-scale));
  padding: 10px 12px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
input[type="email"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.panel-note {
  margin-top: -6px;
  color: var(--ink-dim);
  font-size: calc(13px * var(--ui-scale));
}

::placeholder { color: var(--ink-dim); opacity: 1; }

.btn {
  font-family: var(--mono);
  font-size: calc(12.5px * var(--ui-scale));
  color: var(--ink);
  background: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); /* brighter than a card's rule, so a button never reads as the card it sits in */
  padding: 10px 16px;
  cursor: var(--cursor-hand, pointer);
  border-radius: var(--radius);
  transition: border-color .15s ease, color .15s ease;
}
.btn:hover { color: var(--ink); border-color: var(--accent); }
/* The Discord link at the foot of SYS and the sign-in page, drawn as a button. */
a.discord-link { display: flex; align-items: center; justify-content: center; gap: .65em; box-sizing: border-box; text-align: center; text-decoration: none; margin-top: 16px; }
.discord-icon { width: 1.5em; height: 1.125em; flex: none; }
a.discord-link > span { min-width: 0; overflow-wrap: anywhere; }

.btn-primary {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 700;
}
.btn-primary:hover { opacity: .9; }

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

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-block { width: 100%; display: block; text-align: center; }

.status-msg {
  font-family: var(--mono);
  font-size: calc(12.5px * var(--ui-scale));
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-bottom: 16px;
  display: none;
}
.status-msg.visible { display: block; }
.status-msg.error { border-color: var(--danger); color: var(--danger); }
.status-msg.success { border-color: var(--ok); color: var(--ok); }

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 2px 8px;
  border-radius: var(--radius);
}
.tag.guest { color: var(--ink-dim); }
.tag.registered { color: var(--ok); border-color: var(--ok); }

.field-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: calc(12.5px * var(--ui-scale));
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
}
.field-row .k { color: var(--ink-dim); }
.field-row .v { color: var(--ink); text-align: right; overflow-wrap: anywhere; }

footer.foot {
  font-family: var(--mono);
  font-size: calc(11px * var(--ui-scale));
  color: var(--ink-dim);
  border-top: 1px dashed var(--line);
  padding-top: 16px;
  margin-top: 30px;
}

/* The code from a sign-in or claim email (FIX-200), typed where its link would open in the wrong place. */
.code-entry { margin-top: 14px; }
input.code-input { letter-spacing: .3em; font-size: calc(18px * var(--ui-scale)); }

/* The page while js/boot.js loads the language and the page's own script: held invisible, so nothing shows before the
   script has decided what should. */
html.booting .container { visibility: hidden; }

/* The title sprite in place of the typed heading, kept on its pixel grid. */
.masthead-logo {
  display: block;
  width: min(406px, 100%);
  height: auto;
  image-rendering: pixelated;
}