/* ------------------------------------------------------------------
   FØRTHSP4CE theme for the "402: donation welcome" game.
   Design tokens, type and motifs taken from https://hackerspace.ge:
   pure black, white, #00ff00 accent, IBM Plex Mono + Unbounded,
   uppercase display headings with a 3px green bar, mono marquee strip.
   Loaded after the game's own stylesheet; overrides only.
   ------------------------------------------------------------------ */

:root {
  --hs-bg: #000;
  --hs-fg: #fff;
  --hs-accent: #00ff00;
  --hs-dim: #3f3f3f;
  --hs-fg-dim: #6e6e6e;
  --hs-line: #1a1a1a;
  --hs-light: #d9d9d9;
  --hs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hs-sans: "Unbounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { color-scheme: dark; }
html, body { background: var(--hs-bg) !important; color: var(--hs-fg); }
::selection { background: var(--hs-accent); color: #000; }

/* ---------- palette remap -------------------------------------- */

.game403 {
  --paper: #000;
  --surface: #000;
  --ink: #fff;
  --dim: #3f3f3f;
  --mute-ink: #6e6e6e;
  --cell: #0d0d0d;
  --brand: #00ff00;
  --danger: #ff3333;
  --danger-ink: #ff7070;
  --danger-bg: #1a0000;
  --grid: #0e0e0e;
  --grid-cell: 32px;

  font-family: var(--hs-mono);
  font-weight: 400;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 72px 16px 80px;
}

/* ---------- display type (Unbounded, uppercase, green bar) ------ */

.game403 .gate-glyph,
.game403 .gate-sub,
.game403 .brief-title,
.game403 .over-title,
.game403 .over-num,
.game403 .g403-modal-title,
.game403 .g403-raffle-title {
  font-family: var(--hs-sans);
  font-weight: 700;
  letter-spacing: .0225em;
  line-height: 1.24;
}

.game403 .gate-glyph { line-height: 1; }
.game403 .gate-glyph::first-letter { color: var(--brand); }
.game403 .gate-glyph::after {
  content: "";
  display: block;
  width: 3px;
  height: 38px;
  margin: 12px auto 0;
  background: var(--brand);
}
.game403 .gate-glyph.ok { color: #000; }
.game403 .gate-glyph.ok::first-letter { color: #000; }
.game403 .gate-glyph.ok::after { display: none; }

.game403 .gate-sub { letter-spacing: 0; }
.game403 .over-num { font-weight: 900; color: var(--brand); }

.game403 .over-eyebrow,
.game403 .over-turn,
.game403 .g403-modal-body,
.game403 .g403-modal-skip,
.game403 .bd-rank { color: var(--hs-fg-dim); }

/* ---------- frames, cells, panels ------------------------------- */

.game403 .cell { border-color: var(--dim); }
.game403 .cell.filled { border-color: var(--ink); }
.game403 .cell.dead { background: var(--hs-line); border-color: var(--dim); }
.game403 .cell.is-live .tag,
.game403 .cell.is-slack .tag { background: var(--danger); color: #fff; }
.game403 .fuse { border-bottom-color: #000; }

.game403 .frame { border-color: var(--ink); }

/* lives are hearts: full ones are green, a lost one goes dim */
.game403 .pip rect { fill: var(--brand); }
.game403 .pip.lit rect { fill: var(--dim); }
.game403 .score { border-color: var(--dim); }
.game403 .score-num { color: var(--brand); }

.game403 .board-row { border-bottom-color: var(--hs-line); }
.game403 .board-hdr,
.game403 .board-foot { background: var(--cell); color: var(--hs-fg-dim); }

.game403 .toast { border-color: var(--dim); }

.game403 .g403-modal-backdrop { background: rgba(0, 0, 0, .82); }
.game403 .g403-modal { border: 2px solid var(--brand); }

/* anything sitting on a green background must be black */
.game403 .gate-glyph.ok,
.game403 .credit-brand,
.game403 .gate-optional,
.game403 .brief-badge,
.game403 .brief-token,
.game403 .g403-modal-title,
.game403 .over-cta,
.game403 .board-row.me,
.game403 .board-row.me .bd-rank,
.game403 .token.is-ready,
.game403 .score-multiplier.active,
.game403 .points-pop { color: #000; }

.game403 .points-pop { border-color: var(--brand); }
.game403 .brief-row.danger .brief-badge { color: #fff; }

/* ---------- buttons ---------------------------------------------- */

.game403 .gate-button,
.game403 .bd-save,
.game403 .over-cta {
  background: var(--brand);
  color: #000;
  border-color: var(--brand);
}
.game403 .gate-button,
.game403 .brief-button,
.game403 .over-button {
  font-family: var(--hs-sans);
  font-weight: 700;
  letter-spacing: .02em;
  font-size: calc(.78 * var(--u));
}
.game403 .brief-button,
.game403 .over-button:not(.over-cta) {
  color: var(--brand);
  border-color: var(--brand);
}
.game403 .gate-button:hover,
.game403 .over-cta:hover,
.game403 .bd-save:hover { background: #000; color: var(--brand); }
.game403 .brief-button:hover,
.game403 .over-button:not(.over-cta):hover { background: var(--brand); color: #000; }

.game403 .token.is-active {
  background: var(--hs-line);
  color: var(--ink);
  border-color: var(--brand);
}

/* focus rings: white instead of the original grey */
.game403 .gate-button:focus-visible,
.game403 .brief-button:focus-visible,
.game403 .over-button:focus-visible,
.game403 .token:focus-visible,
.game403 .cell:focus-visible {
  box-shadow: inset 0 0 0 2px #000, 0 0 0 3px var(--ink);
}

/* ---------- inputs ----------------------------------------------- */

.game403 .gate-input,
.game403 .bd-input {
  border-color: var(--dim);
  caret-color: var(--brand);
}
.game403 .gate-input:focus-visible,
.game403 .bd-input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 2px var(--brand);
}
.game403 .gate-input::selection,
.game403 .bd-input::selection { background: var(--brand); color: #000; }

/* ---------- toggles (game sfx + background music) ---------------- */

.game403 .sound-toggle,
#bgm-toggle {
  position: fixed;
  right: 10px;
  z-index: 10;
  font: 400 11px/1 var(--hs-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 9px;
  min-width: 118px;
  text-align: center;
  cursor: pointer;
  color: var(--hs-fg);
  background: #000;
  border: 2px solid var(--hs-dim);
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: border-color .12s, color .12s;
}
.game403 .sound-toggle { top: 10px; }
#bgm-toggle { top: 44px; }
.game403 .sound-toggle:hover,
#bgm-toggle:hover { border-color: var(--hs-accent); color: var(--hs-accent); }
.game403 .sound-toggle.off,
#bgm-toggle[aria-pressed="true"] { color: var(--hs-fg-dim); }
#bgm-toggle:focus-visible,
.game403 .sound-toggle:focus-visible { outline: 2px solid var(--hs-accent); outline-offset: 2px; }

/* ---------- FØRTHSP4CE chrome: wordmark + marquee ---------------- */

#hs-bar {
  position: fixed;
  top: 10px;
  left: 14px;
  z-index: 10;
  display: flex;
  align-items: baseline;
  gap: 14px;
  pointer-events: none;
}
#hs-bar .hs-brand {
  pointer-events: auto;
  font-family: var(--hs-sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .0225em;
  line-height: 1.24;
  color: var(--hs-fg);
  text-decoration: none;
  white-space: nowrap;
}
#hs-bar .hs-brand:hover .accent { text-decoration: underline; text-underline-offset: .16em; }
#hs-bar .accent { color: var(--hs-accent); }
#hs-bar .hs-path {
  font-family: var(--hs-mono);
  font-weight: 300;
  font-size: 12px;
  color: var(--hs-fg-dim);
  white-space: nowrap;
}
#hs-bar .hs-path .accent { font-weight: 400; }

#hs-marquee {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  padding: 8px 0;
  background: #000;
  border-top: 1px solid var(--hs-line);
}
#hs-marquee:hover .hs-track,
#hs-marquee:focus-within .hs-track { animation-play-state: paused; }
#hs-marquee .hs-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hs-scroll 36s linear infinite;
  font-family: var(--hs-mono);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
#hs-marquee .dm { margin-right: 28px; white-space: nowrap; }
#hs-marquee .dm.g1 { color: var(--hs-fg-dim); }
#hs-marquee .dm.g2 { color: var(--hs-dim); }
#hs-marquee .dm.hl {
  color: var(--hs-accent);
  border: 2px solid var(--hs-accent);
  padding: 4px 10px;
  text-decoration: none;
  transition: background-color .12s, color .12s;
}
#hs-marquee .dm.hl:hover,
#hs-marquee .dm.hl:focus-visible {
  background: var(--hs-accent);
  color: #000;
  outline: none;
}
#hs-marquee .dm.sql { text-transform: none; color: var(--hs-fg-dim); }
#hs-marquee .dm.sql .kw { font-weight: 500; }
#hs-marquee .dm.sql .str { color: var(--hs-fg); }
#hs-marquee .dm.sql .accent { color: var(--hs-accent); }

@keyframes hs-scroll { to { transform: translateX(-50%); } }

/* ---------- small screens ---------------------------------------- */

@media (max-width: 640px) {
  .game403 { padding: 56px 12px 64px; }
  #hs-bar { left: 10px; gap: 10px; }
  #hs-bar .hs-brand { font-size: 14px; }
  #hs-bar .hs-path { display: none; }
  #hs-marquee .hs-track { font-size: 11px; }
  .game403 .sound-toggle,
  #bgm-toggle { min-width: 0; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #hs-marquee .hs-track { animation: none; }
}