/* ================================================================
   LOOM — Design System
   Dark investigative aesthetic. Space Mono + Inter.
   ================================================================ */

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #090d13;
  --surface:      #111720;
  --surface-2:    #18202c;
  --surface-3:    #1f2a3a;
  --border:       #1e2d40;
  --border-dim:   #141e2a;

  --elias-bg:     #112035;
  --elias-border: #1a5fa0;
  --faiga-bg:     #2a1118;
  --faiga-border: #8b1a2a;
  --player-bg:    #0f2218;
  --player-border:#1a6b3a;
  --system-bg:    transparent;

  --green:        #27c96e;
  --green-dim:    #1a8a4a;
  --green-glow:   rgba(39, 201, 110, 0.12);
  --red:          #c0392b;
  --blue:         #3a7bd5;
  --amber:        #e8a422;

  --text:         #cdd9e8;
  --text-2:       #8b99ae;
  --text-3:       #4a5568;
  --text-green:   #27c96e;
  --text-red:     #e05555;

  --mono:         'Space Mono', monospace;
  --sans:         'Inter', system-ui, sans-serif;

  --nav-h:        52px;
  --input-h:      64px;
  --radius:       6px;
  --radius-lg:    10px;
}

html { font-size: 15px; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-green); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: 600; color: #e0eaf6; }
em { color: var(--text-2); font-style: italic; }

/* ── Logo ──────────────────────────────────────────────────── */
.l-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--text);
}
.l-logo__icon {
  width: 22px; height: 22px;
  color: var(--green);
  flex-shrink: 0;
}
.l-logo__text {
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-green);
}

/* ── Shared header ─────────────────────────────────────────── */
.l-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 1.5rem;
  background: rgba(9,13,19,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-dim);
}

.l-nav {
  display: flex; gap: 1rem;
  align-items: center;
  font-size: .7rem; font-family: var(--mono);
  letter-spacing: .04em;
}
.l-nav a { color: var(--text-2); }
.l-nav a:hover { color: var(--text-green); text-decoration: none; }

/* Locked during onboarding — greyed out, not clickable */
.l-nav a.nav-locked {
  color: var(--text-3);
  opacity: .45;
  pointer-events: none;
  cursor: default;
}

/* ── Loading dots (shared) ─────────────────────────────────── */
@keyframes blink {
  0%, 80%, 100% { opacity: .15; }
  40%           { opacity: 1; }
}
.dot, .play-loading span, .play-typing__dots span {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1.2s infinite;
}
.dot:nth-child(2), .play-loading span:nth-child(2), .play-typing__dots span:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3), .play-loading span:nth-child(3), .play-typing__dots span:nth-child(3) { animation-delay: .4s; }

/* ================================================================
   LANDING PAGE
   ================================================================ */

body.landing {
  overflow-x: hidden;
}

.l-hero {
  max-width: 680px;
  margin: 0 auto;
  padding: 5rem 1.5rem 6rem;
}

.l-hero__tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--green);
  margin-bottom: 1.5rem;
  opacity: .8;
}

.l-hero__title {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: #e8f0fc;
  margin-bottom: 1.5rem;
}
.l-hero__accent { color: var(--green); }

.l-hero__sub {
  font-size: 1rem;
  color: var(--text-2);
  margin-bottom: 1rem;
  max-width: 560px;
}
.l-hero__sub--dim { color: var(--text-3); font-size: .92rem; }

/* Start form */
.l-start-form {
  margin: 2.5rem 0 2rem;
}
.l-start-form__label {
  display: block;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--text-3);
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.l-start-form__row {
  display: flex; gap: .5rem;
}
.l-start-form__input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.l-start-form__input:focus { border-color: var(--green); }
.l-start-form__input::placeholder { color: var(--text-3); }

.l-start-form__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green);
  border: none; border-radius: var(--radius);
  padding: .75rem 1.25rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #050d0a;
  cursor: pointer;
  transition: background .2s, opacity .2s;
  text-decoration: none;
}
.l-start-form__btn:hover { background: #33e07d; text-decoration: none; }
.l-start-form__btn:disabled { opacity: .5; cursor: not-allowed; }

.l-start-form__hint {
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--text-3);
}
/* Fields that only appear for new registrations */
.l-start-form__input--key {
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* Password strength indicator */
.l-start-form__pw-hint {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  min-height: 1rem;
  margin-top: .25rem;
}
.l-start-form__pw-hint--weak { color: var(--text-red); }
.l-start-form__pw-hint--ok   { color: var(--amber); }
.l-start-form__pw-hint--good { color: var(--green); }

.l-start-form__note {
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--text-red);
  font-family: var(--mono);
}

.l-start-form__row--submit { margin-top: .1rem; }

/* Resume block (shown when session already exists) */
.l-resume {
  margin-top: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.l-resume__text {
  color: var(--text-2);
  font-size: .92rem;
  margin-bottom: .85rem;
}
.l-resume__text strong { color: var(--text-green); }
.l-resume__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.l-resume__logout {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--text-3);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.l-resume__logout:hover { border-color: var(--text-red); color: var(--text-red); }

/* Stats strip */
.l-stats {
  display: flex; gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-dim);
}
.l-stats__num {
  display: block;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-green);
}
.l-stats__label {
  font-size: .75rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Ambient lines */
.l-ambient {
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.l-ambient__line {
  position: absolute;
  background: linear-gradient(to bottom, transparent, var(--green-glow), transparent);
  width: 1px; height: 60%;
  opacity: .4;
}
.l-ambient__line--1 { left: 15%; top: 10%; }
.l-ambient__line--3 { right: 20%; top: 5%; }

/* ================================================================
   PLAY PAGE
   ================================================================ */

body.play {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Play header */
.play-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  padding: 0 1rem 0 1.25rem;
  background: rgba(9,13,19,.95);
  border-bottom: 1px solid var(--border-dim);
  z-index: 50;
}
.play-header__left { display: flex; align-items: center; gap: .75rem; }
.play-header__sep {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-3);
}
.play-header__case {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--text-3);
  text-transform: uppercase;
}
.play-header__right {
  display: flex; align-items: center; gap: 1rem;
}
.play-header__level,
.play-header__xp {
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-2);
  letter-spacing: .06em;
}
.play-header__xp { color: var(--green); }
.play-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }

.play-input-bar__action--mute { margin-left: auto; }
.play-input-bar__action--mute[aria-pressed="true"] { opacity: .4; }
.play-logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }

/* Chat scrollable area */
.play-chat {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1rem 1rem;
  scroll-behavior: smooth;
}
.play-chat::-webkit-scrollbar { width: 4px; }
.play-chat::-webkit-scrollbar-track { background: transparent; }
.play-chat::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.play-loading {
  display: flex; gap: .3rem;
  justify-content: center;
  padding: 2rem;
}

/* ── Message bubbles ─────────────────────────────────────────── */
.msg {
  display: flex;
  gap: .65rem;
  margin-bottom: .85rem;
  max-width: 680px;
  animation: msgIn .25s ease-out both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg--player {
  flex-direction: row-reverse;
  margin-left: auto;
}
.msg--system {
  justify-content: center;
  max-width: 100%;
  margin: 1rem auto;
}

/* Avatar */
.msg__avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  align-self: flex-end;
  margin-bottom: 2px;
}
.msg__avatar--elias { background: var(--blue); }
.msg__avatar--faiga { background: var(--red); }
.msg__avatar--player { background: var(--green-dim); }

/* Bubble */
.msg__bubble {
  flex: 1;
  max-width: calc(100% - 44px);
}
.msg--player .msg__bubble { max-width: 70%; }

.msg__sender {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-3);
  margin-bottom: .25rem;
  text-transform: uppercase;
}
.msg--player .msg__sender { text-align: right; }

.msg__body {
  display: inline-block;
  padding: .6rem .85rem;
  border-radius: var(--radius-lg);
  border-left-width: 2px;
  border-left-style: solid;
  font-size: .93rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Hardcoded fallbacks for Elias and Faiga (used if registry hasn't loaded yet) */
.msg--elias  .msg__body { background: var(--elias-bg); border-left-color: var(--elias-border); border-top-left-radius: 2px; }
.msg--faiga  .msg__body { background: var(--faiga-bg); border-left-color: var(--faiga-border); border-top-left-radius: 2px; }
/* Dynamic character theming — higher specificity (.msg.msg--char) wins over fallbacks above */
.msg.msg--char .msg__body { background: var(--char-bg); border-left-color: var(--char-border); border-top-left-radius: 2px; }
.msg.msg--char .msg__avatar { background: var(--char-color); }
/* Avatar image (shown when character has an avatar file) */
.msg__avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.msg--player .msg__body { background: var(--player-bg); border-left-color: var(--player-border); border-top-right-radius: 2px; border-left: none; border-right: 2px solid var(--player-border); }
.msg--system .msg__body {
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--text-3);
  letter-spacing: .04em;
  padding: .25rem .5rem;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  text-align: center;
  display: block;
  width: 100%;
}

/* Bold/italic inside bubbles */
.msg__body b, .msg__body strong { color: #e8f0fc; }
.msg__body em { color: var(--text-2); }

/* Attachment card */
.msg__attachment {
  margin-top: .6rem;
}
.attachment-card {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .85rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  max-width: 280px;
  transition: border-color .15s;
}
.attachment-card:hover { border-color: var(--green); text-decoration: none; color: var(--text-green); }
.attachment-card__icon { font-size: 1.1rem; flex-shrink: 0; }
.attachment-card__name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); font-size: .78rem;
}
.attachment-card__type {
  font-size: .65rem; color: var(--text-3); font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .06em; margin-left: auto; flex-shrink: 0;
}

/* Inline image */
.msg__image {
  margin-top: .6rem;
  max-width: 360px;
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
}

/* Audio player */
.msg__audio {
  margin-top: .6rem;
  width: 100%; max-width: 320px;
}
audio {
  width: 100%;
  filter: invert(1) sepia(1) saturate(2) hue-rotate(105deg);
  height: 36px;
}

/* Link pill */
.msg__link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--text-green);
  border: 1px solid var(--green-dim);
  border-radius: 3px;
  padding: .25rem .6rem;
  transition: background .15s;
}
.msg__link:hover { background: var(--green-glow); text-decoration: none; }

.msg__link--locked {
  color: var(--text-dim);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: .55;
}
.msg__link--locked:hover { background: transparent; }

/* ── Toast notification ───────────────────────────────────────── */
.loom-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(.6rem);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: .78rem;
  padding: .5rem 1.1rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 999;
}
.loom-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Typing indicator ────────────────────────────────────────── */
.play-typing {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 1rem .6rem;
  flex-shrink: 0;
}
.play-typing__avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .65rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.play-typing__avatar--elias { background: var(--blue); }
.play-typing__avatar--faiga { background: var(--red); }
.play-typing__dots { display: flex; gap: 3px; }
.play-typing__dots span { width: 5px; height: 5px; }
.play-typing__label {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-3);
  letter-spacing: .04em;
}

/* ── Continue bar ────────────────────────────────────────────── */
.play-continue {
  flex-shrink: 0;
  padding: .5rem 1rem;
  border-top: 1px solid var(--border-dim);
  background: var(--surface);
}
.play-continue__btn {
  width: 100%;
  background: var(--green);
  border: none; border-radius: var(--radius);
  padding: .7rem 1rem;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #050d0a;
  cursor: pointer;
  transition: background .15s;
}
.play-continue__btn:hover { background: #33e07d; }

/* ── Input bar ───────────────────────────────────────────────── */
.play-input-bar {
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: .4rem;
  padding: .55rem .75rem .75rem;
  background: var(--surface);
  border-top: 1px solid var(--border-dim);
}

.play-input-bar__actions {
  display: flex; gap: .4rem;
}
.play-input-bar__action {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .3rem .6rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-2);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.play-input-bar__action:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--text-green);
}
.play-input-bar__action--skip:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--amber);
}
.play-input-bar__action:disabled { opacity: .3; cursor: not-allowed; }

.play-input-bar__field {
  display: flex; gap: .4rem;
}
.play-input-bar__input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .65rem .9rem;
  font-family: var(--mono);
  font-size: .88rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s;
}
.play-input-bar__input:focus { border-color: var(--green); }
.play-input-bar__input::placeholder { color: var(--text-3); }
.play-input-bar__input:disabled { opacity: .4; cursor: not-allowed; }

.play-input-bar__send {
  background: var(--green);
  border: none; border-radius: var(--radius);
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: #050d0a;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.play-input-bar__send:hover:not(:disabled) { background: #33e07d; }
.play-input-bar__send:disabled { opacity: .4; cursor: not-allowed; }

/* Confirm-skip button */
.play-input-bar__action--confirm-skip {
  border-color: var(--amber) !important;
  color: var(--amber) !important;
  background: rgba(232, 164, 34, .08) !important;
}
.play-input-bar__action--confirm-skip:hover:not(:disabled) {
  background: rgba(232, 164, 34, .18) !important;
}

/* Char counter */
.play-input-bar__counter {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-3);
  align-self: center;
  flex-shrink: 0;
  min-width: 1.8rem;
  text-align: right;
  transition: color .15s;
}
.play-input-bar__counter--warn { color: var(--text-red); }

/* ── No-session overlay ──────────────────────────────────────── */
.play-overlay {
  position: fixed; inset: 0;
  background: rgba(9,13,19,.97);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.play-overlay[hidden] { display: none; }
.play-overlay__box {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.play-overlay__text { color: var(--text-2); font-size: .9rem; }
.play-overlay__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--green);
  border-radius: var(--radius);
  padding: .7rem 1.25rem;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  color: #050d0a;
  text-decoration: none;
}
.play-overlay__btn:hover { background: #33e07d; text-decoration: none; }


/* ================================================================
   ABOUT / LEADERBOARD PAGES
   ================================================================ */

body.about {
  min-height: 100dvh;
}

.about-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.about-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 2rem;
}
.about-hero__tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--green);
  opacity: .7;
  margin-bottom: .75rem;
}
.about-hero__title {
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: #e8f0fc;
  margin-bottom: .5rem;
}
.about-hero__sub { color: var(--text-2); }

.about-content { display: flex; flex-direction: column; gap: 2.5rem; }

.about-section h2 {
  font-family: var(--mono);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-green);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.about-section p {
  color: var(--text-2);
  margin-bottom: .75rem;
  line-height: 1.7;
}
.about-section p:last-child { margin-bottom: 0; }

.about-callout {
  margin-top: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-2);
}
.about-callout__tag {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--amber);
  display: block;
  margin-bottom: .3rem;
}

.about-mechanic {
  display: flex; flex-direction: column; gap: .75rem;
  margin-top: 1rem;
}
.about-mechanic__item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.about-mechanic__icon { font-size: 1.3rem; flex-shrink: 0; padding-top: 1px; }
.about-mechanic__item strong {
  display: block;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--text);
  margin-bottom: .25rem;
}
.about-mechanic__item p { margin: 0; font-size: .85rem; }

.about-table {
  width: 100%; border-collapse: collapse; margin-top: .75rem;
  font-size: .85rem;
}
.about-table th, .about-table td {
  padding: .6rem .85rem;
  border: 1px solid var(--border);
  text-align: left;
}
.about-table th {
  background: var(--surface);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-3);
  text-transform: uppercase;
}
.about-table td { background: var(--surface-2); color: var(--text-2); }
.about-table td:last-child { color: var(--text-green); font-family: var(--mono); }

.about-tools, .about-tips {
  list-style: none;
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: .75rem;
}
.about-tools li, .about-tips li {
  color: var(--text-2);
  padding-left: 1.2rem;
  position: relative;
  font-size: .9rem;
  line-height: 1.6;
}
.about-tools li::before, .about-tips li::before {
  content: '→';
  position: absolute; left: 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: .8rem;
}
.about-tools strong { color: var(--text); }

.about-cta { padding-top: 1rem; }

/* ── Personal stats block ────────────────────────────────────── */
.lb-mystats {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  overflow: hidden;
}

/* Toggle button — acts as the collapsed header */
.lb-mystats__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: .85rem 1.25rem;
  background: none; border: none; cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.lb-mystats__toggle:hover { background: var(--surface-2); }
.lb-mystats__toggle-left  { display: flex; flex-direction: column; gap: .1rem; }
.lb-mystats__toggle-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

.lb-mystats__rank {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--text-green);
}
.lb-mystats__name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.lb-mystats__xp {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-green);
}
.lb-mystats__chevron {
  font-size: .65rem;
  color: var(--text-3);
  transition: transform .2s ease;
}

/* Expanded body */
.lb-mystats__body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border-dim);
}

.lb-breakdown {
  width: 100%; border-collapse: collapse; font-size: .83rem; margin-top: .25rem;
}
.lb-breakdown th, .lb-breakdown td {
  padding: .45rem .75rem;
  border: 1px solid var(--border-dim);
  text-align: left;
}
.lb-breakdown th {
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-3);
  text-transform: uppercase;
}
.lb-breakdown td { background: var(--surface-2); color: var(--text-2); }
.lb-breakdown td:nth-child(3) { color: var(--text); }
.lb-breakdown td:nth-child(4) { color: var(--text-green); }
.lb-breakdown tfoot td { background: var(--surface-3); font-size: .85rem; border-top: 1px solid var(--border); }

/* ── Leaderboard table ───────────────────────────────────────── */
.lb-table-wrap { overflow-x: auto; }
.lb-table {
  width: 100%; border-collapse: collapse; font-size: .88rem;
}
.lb-table th, .lb-table td {
  padding: .7rem .9rem;
  border: 1px solid var(--border);
  text-align: left;
}
.lb-table th {
  background: var(--surface);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--text-3);
  text-transform: uppercase;
}
.lb-table td { background: var(--surface-2); color: var(--text-2); }
.lb-table .lb-top td { background: var(--surface-3); }
.lb-table .lb-top td strong { color: var(--text); }
.lb-loading { text-align: center; color: var(--text-3); font-family: var(--mono); font-size: .8rem; }

.lb-status {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  padding: .2rem .4rem;
  border-radius: 3px;
}
.lb-status--done { background: rgba(39,201,110,.12); color: var(--green); }
.lb-status--active { background: rgba(58,123,213,.12); color: var(--blue); }

/* ── Image lightbox ──────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
  max-width: 95vw; max-height: 92dvh;
  border-radius: var(--radius);
  box-shadow: 0 0 60px rgba(0,0,0,.6);
  cursor: default;
}
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none;
  color: var(--text-2); font-size: 1.5rem; cursor: pointer;
  line-height: 1;
}

/* ── Utility ─────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Site footer ─────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 1.5rem 1rem 1.75rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--text-3);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover { opacity: .8; }

/* Active nav link */
.l-nav__active { color: var(--text-green) !important; }
.l-nav--compact { font-size: .7rem; gap: 1rem; }

/* code element in about page */
code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: .1em .4em;
  color: var(--text-green);
}

/* About page: rules sub-headings */
.about-section--rules h3 {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text);
  text-transform: uppercase;
  margin: 1.25rem 0 .4rem;
}
.about-section--rules h3:first-of-type { margin-top: .5rem; }

/* About CTA block */
.about-cta__text {
  font-size: 1rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}
.about-cta__links {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.about-cta__skip {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-3);
  letter-spacing: .04em;
}
.about-cta__skip:hover { color: var(--text-2); }

/* ================================================================
   INTRO PAGE
   ================================================================ */

body.intro { min-height: 100dvh; }

.intro-main {
  max-width: 660px;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
}

/* Author header */
.intro-header {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--border-dim);
  margin-bottom: 2.5rem;
}
.intro-header__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.intro-header__name {
  font-weight: 600;
  color: var(--text);
  font-size: 1rem;
}
.intro-header__sub {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-3);
  letter-spacing: .05em;
  margin-top: .15rem;
}

/* Feed */
.intro-feed {
  display: flex; flex-direction: column; gap: 2.5rem;
}

/* Single message card */
.intro-msg {
  display: flex; flex-direction: column; gap: .7rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-dim);
  animation: msgIn .3s ease both;
}
.intro-msg:last-child { border-bottom: none; }

.intro-msg__time {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--text-3);
  letter-spacing: .05em;
}

.intro-msg__text {
  color: var(--text-2);
  line-height: 1.75;
  font-size: .97rem;
}

.intro-msg__image {
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: block;
  cursor: zoom-in;
  margin-top: .25rem;
}

.intro-msg__audio {
  margin-top: .25rem;
}
.intro-msg__audio audio {
  width: 100%; max-width: 360px;
}

/* Intro CTA */
.intro-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-dim);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
}
.intro-cta p {
  color: var(--text-2);
  font-size: .95rem;
}

/* ================================================================
   PLAY PAGE: auth overlay (wider, with form)
   ================================================================ */

.play-overlay__box--auth {
  width: min(480px, 92vw);
  text-align: left;
}

.play-overlay__prep {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-dim);
}
.play-overlay__prep p {
  font-size: .82rem;
  color: var(--text-3);
  font-family: var(--mono);
  letter-spacing: .04em;
  margin-bottom: .6rem;
}
.play-overlay__prep-links {
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.play-overlay__prep-links a {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-green);
  border: 1px solid var(--green-dim);
  border-radius: 3px;
  padding: .2rem .6rem;
  transition: background .15s;
}
.play-overlay__prep-links a:hover {
  background: var(--green-glow); text-decoration: none;
}

.play-overlay__auth { width: 100%; }

.play-overlay__inputs {
  display: flex; flex-direction: column; gap: .5rem;
  margin: .6rem 0 .75rem;
}
.play-overlay__inputs .l-start-form__input {
  width: 100%;
}

/* ================================================================
   CONTACTS PANEL
   ================================================================ */

.contacts-panel {
  position: fixed;
  top: calc(var(--nav-h) + .6rem);
  right: .75rem;
  z-index: 45;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .5rem .65rem .6rem;
  min-width: 150px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  pointer-events: auto;
}

.contacts-panel__label {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.contacts-panel__list {
  display: flex; flex-direction: column; gap: .3rem;
}

.contact {
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer;
  border-radius: var(--radius);
  padding: .2rem .35rem;
  margin: -.2rem -.35rem;
  transition: background .12s;
}
.contact:hover { background: rgba(255,255,255,.06); }

.contact__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background .4s;
}
.contact--online  .contact__dot { background: var(--green); box-shadow: 0 0 4px var(--green); }
.contact--offline .contact__dot { background: var(--text-3); }

.contact__name {
  font-size: .75rem;
  color: var(--text-2);
  white-space: nowrap;
}
.contact--offline .contact__name { color: var(--text-3); }

/* ================================================================
   INTERCEPT / PURGE / ENDING messages
   ================================================================ */

/* Intercept: before the purge */
.msg--intercept .msg__body {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-3);
  letter-spacing: .04em;
  text-align: center;
  padding: .35rem .5rem;
  display: block;
  width: 100%;
}

/* Purge progress bar */
.purge-bar {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: 1.25rem 0;
  width: 100%;
}
.purge-bar__label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--text-red);
  text-transform: uppercase;
  animation: purge-blink .6s step-end infinite;
}
@keyframes purge-blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.purge-bar__track {
  width: min(260px, 80%);
  height: 3px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.purge-bar__fill {
  height: 100%;
  background: var(--text-red);
  border-radius: 2px;
  transition: width .12s linear;
}

/* Player dot colour in contacts */
.contact__dot--player { background: var(--player-border); }

/* ================================================================
   PROFILE CARD OVERLAY
   ================================================================ */

.profile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
}
.profile-overlay[hidden] { display: none !important; }

.profile-card {
  background: var(--surface-2, #151c2c);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: min(360px, 92vw);
  padding: 1.5rem;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,.55);
  animation: profile-in .15s ease;
}
@keyframes profile-in {
  from { opacity: 0; transform: scale(.96) translateY(6px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

.profile-card__close {
  position: absolute; top: .75rem; right: .75rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 1rem; line-height: 1;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.profile-card__close:hover { color: var(--text); background: rgba(255,255,255,.05); }

.profile-card__head {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1rem; padding-right: 2rem;
}
.profile-card__avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--surface-3, #1e2a3a);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 700;
  color: var(--text-2); overflow: hidden;
}
.profile-card__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.profile-card__avatar--player { color: var(--text-3); }

.profile-card__name {
  font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--text);
  margin-bottom: .25rem;
}
.profile-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.profile-card__tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .15rem .4rem; border-radius: 3px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); color: var(--text-3);
}

.profile-card__bio {
  font-size: .875rem; color: var(--text-2); line-height: 1.55;
  border-top: 1px solid var(--border); padding-top: .85rem;
}
.profile-card__bio--empty { color: var(--text-3); font-style: italic; }

/* Player-editable profile */
.profile-card__name-input {
  width: 100%;
  background: var(--surface-3, #1e2a3a);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--mono); font-size: .95rem; font-weight: 700;
  padding: .3rem .5rem;
}
.profile-card__name-input:focus { outline: none; border-color: var(--blue); }

.profile-card__bio-edit { border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .5rem; }
.profile-card__bio-textarea {
  width: 100%; min-height: 80px; resize: vertical;
  background: var(--surface-3, #1e2a3a);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-2); font-size: .875rem; line-height: 1.5;
  padding: .5rem .65rem; font-family: inherit; box-sizing: border-box;
}
.profile-card__bio-textarea:focus { outline: none; border-color: var(--blue); }
.profile-card__bio-textarea::placeholder { color: var(--text-3); }

.profile-card__avatar-note {
  font-size: .72rem; color: var(--text-3); margin-top: .65rem; font-style: italic;
}
.profile-card__save-row {
  display: flex; align-items: center; gap: .75rem; margin-top: .85rem;
}
.profile-card__save {
  background: var(--blue); border: none; border-radius: var(--radius);
  color: #fff; font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; padding: .45rem 1rem; cursor: pointer; text-transform: uppercase;
  transition: filter .15s;
}
.profile-card__save:hover:not(:disabled) { filter: brightness(1.15); }
.profile-card__save:disabled { opacity: .5; cursor: not-allowed; }
.profile-card__status { font-size: .78rem; color: var(--text-3); }

/* Ending splash */
.msg--ending {
  justify-content: center;
  max-width: 100%;
  margin: 2rem auto 1rem;
}
.msg--ending .msg__body {
  background: transparent;
  border: none;
  text-align: center;
  padding: 1.75rem 1rem;
  display: block;
  width: 100%;
  border-top: 1px solid var(--border-dim);
  border-bottom: 1px solid var(--border-dim);
}
.ending__status {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.ending__hr {
  width: 40px;
  height: 1px;
  background: var(--border);
  margin: 0 auto 1.25rem;
}
.ending__title {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 700;
  color: #e8f0fc;
  margin-bottom: .3rem;
}
.ending__case {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--text-2);
  margin-bottom: 1.5rem;
}
.ending__links {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.ending__link {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text-green);
  border: 1px solid var(--green-dim);
  border-radius: 3px;
  padding: .3rem .75rem;
  transition: background .15s;
}
.ending__link:hover { background: var(--green-glow); text-decoration: none; }

/* ── Nanneke glitch intrusion ────────────────────────────────── */
.glitch-noise {
  font-family: 'Courier New', Courier, monospace;
  font-size: .72rem;
  line-height: 1.45;
  white-space: pre;
  letter-spacing: .04em;
  color: rgba(39, 201, 110, .45);
  padding: .5rem 1rem .4rem;
  user-select: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity .18s ease;
}
.glitch-noise--fade { opacity: 0; }

.msg--nanneke-flicker {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .35rem 1rem;
  opacity: 0;
  transition: opacity .12s ease;
}
.msg--nanneke-flicker--in  { opacity: 1; }
.msg--nanneke-flicker--out { opacity: 0; transition: opacity .26s ease; }

.msg__avatar--nanneke {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(39,201,110,.08);
  border: 1px solid rgba(39,201,110,.3);
  color: var(--green);
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: blur(.4px);
}
.msg--nanneke-flicker .msg__bubble {
  background: rgba(39,201,110,.05);
  border: 1px solid rgba(39,201,110,.2);
  border-radius: var(--radius);
  padding: .45rem .7rem;
  max-width: 480px;
}
.msg--nanneke-flicker .msg__sender {
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .1em;
  color: rgba(39,201,110,.55);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.msg--nanneke-flicker .msg__body {
  font-size: .9rem;
  color: rgba(39,201,110,.8);
  font-style: italic;
}

.msg--signal-noise {
  text-align: center;
  padding: .25rem 1rem;
  pointer-events: none;
}
.msg--signal-noise span {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Message deletion animation */
@keyframes msgDelete {
  0%   { opacity: 1; transform: translateX(0); max-height: 200px; }
  60%  { opacity: 0; transform: translateX(20px); }
  100% { opacity: 0; max-height: 0; margin: 0; padding: 0; }
}
.msg--deleting {
  animation: msgDelete .15s ease forwards;
  overflow: hidden;
}

/* ── Panosphere collapsible panel (levels 2–6) ──────────────── */
.pano-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: var(--input-h);
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #000;
}

.pano-panel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem .75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .14em;
}

.pano-panel__title { color: var(--text-muted, #666); }

.pano-panel__collapse-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted, #666);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .62rem;
  padding: .15rem .5rem;
  letter-spacing: .1em;
}
.pano-panel__collapse-btn:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.pano-panel__iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  display: block;
}

/* ── Pano badge (collapsed state, right side — left of zip badge) */
.pano-badge {
  position: fixed;
  z-index: 400;
  /* right and bottom set dynamically in JS */
}

.pano-badge__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted, #777);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .13em;
  padding: .38rem .5rem;
  line-height: 1.2;
  transition: border-color .2s, color .2s;
}
.pano-badge__btn:hover,
.pano-badge--open .pano-badge__btn {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.pano-badge__title { font-size: .55rem; letter-spacing: .14em; font-weight: 700; }
.pano-badge__icon  { font-size: .9rem; line-height: 1; }
.pano-badge__label { font-size: .58rem; letter-spacing: .14em; }

/* ── Zipcracker collapsible panel (levels 5–8) ──────────────── */
.zip-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: var(--input-h);
  z-index: 50;   /* above contacts (45), below badge (400) */
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
}

.zip-panel__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem .75rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .65rem;
  letter-spacing: .14em;
}

.zip-panel__title { color: var(--text-muted, #666); }

.zip-panel__collapse-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted, #666);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .62rem;
  padding: .15rem .5rem;
  letter-spacing: .1em;
}
.zip-panel__collapse-btn:hover {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.zip-panel__iframe {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: none;
  display: block;
}

/* ── Zip badge (collapsed state, top-right) ─────────────────── */
.zip-badge {
  position: fixed;
  right: .8rem;
  z-index: 400;
  /* bottom set dynamically in JS based on actual #inputBar height */
}

.zip-badge__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted, #777);
  cursor: pointer;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .13em;
  padding: .38rem .5rem;
  line-height: 1.2;
  transition: border-color .2s, color .2s;
}
.zip-badge__btn:hover,
.zip-badge--open .zip-badge__btn {
  border-color: var(--accent, #3b82f6);
  color: var(--accent, #3b82f6);
}

.zip-badge__title { font-size: .55rem; letter-spacing: .14em; font-weight: 700; }
.zip-badge__icon  { font-size: .9rem; line-height: 1; }
.zip-badge__label { font-size: .58rem; letter-spacing: .14em; }

/* ── Support popup (hint while archon overlay is open) ─────── */
.support-popup {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: #050505;
  border: 2px solid var(--accent, #3b82f6);
  padding: 1rem 1.1rem 1rem;
  z-index: 9500;
  max-width: min(500px, 92vw);
  min-width: 260px;
  box-shadow: 0 0 30px rgba(59,130,246,0.18);
  font-size: .85rem;
  line-height: 1.55;
  animation: support-popup-in .25s ease;
}

@keyframes support-popup-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

.support-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .65rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--border, #2a2a2a);
  font-size: .68rem;
  letter-spacing: .18em;
  color: var(--text-muted, #666);
}

.support-popup__close {
  background: none;
  border: 1px solid var(--border, #2a2a2a);
  color: var(--text-muted, #666);
  cursor: pointer;
  font-size: .85rem;
  padding: 1px 6px;
  font-family: inherit;
  line-height: 1.3;
}
.support-popup__close:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); }

.support-popup__body { color: var(--text, #ccc); }
.support-popup__line { margin: 0 0 .45rem; }
.support-popup__line:last-child { margin-bottom: 0; }

/* ── Archon alignment overlay (level 9) ────────────────────── */
.archon-overlay {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 0;
  background: #000;
}

.archon-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.intsys-overlay {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 0;
  background: #000;
}

.intsys-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ── Camera feed overlay (level 11) ────────────────────────── */
.cam-overlay {
  flex: 1;
  position: relative;
  display: flex;
  min-height: 0;
  background: #000;
}

.cam-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.cam-map-btn {
  position: absolute;
  bottom: .6rem;
  left: .7rem;
  z-index: 10;
  background: rgba(0,0,0,.75);
  border: 1px solid #00ff41;
  color: #00ff41;
  font-family: 'Courier New', monospace;
  font-size: .7rem;
  letter-spacing: .1em;
  padding: .3rem .6rem;
  cursor: pointer;
  text-transform: uppercase;
}
.cam-map-btn:hover { background: #00ff41; color: #000; }

/* Terminal boot text in chat before overlay appears */
.msg--terminal {
  font-family: var(--mono);
  font-size: .75rem;
  color: #00ff41;
  white-space: pre;
  padding: .15rem 1rem;
  opacity: .85;
  pointer-events: none;
}

@media (max-width: 600px) {
  .l-hero { padding: 3rem 1rem 4rem; }
  .l-start-form__row { flex-direction: column; }
  .l-stats { gap: 1rem; }
  .play-header__case { display: none; }
  .l-nav--compact { display: none; }
  .l-nav__lkg--compact { display: none; }
  .msg { max-width: 100%; }
  .msg--player .msg__bubble { max-width: 85%; }
  .intro-main { padding: 1.5rem 1rem 4rem; }
  .contacts-panel { display: none; }
}

/* ── Logo as popup trigger ───────────────────────────────── */
button.l-logo,
button.play-logo {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ── Lockkeeper Games exit link in nav ───────────────────── */
.l-nav__lkg {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--text-3) !important;
  border: 1px solid var(--border-dim);
  padding: .22rem .65rem;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: color .15s, background .15s;
  text-decoration: none;
}
.l-nav__lkg:hover { color: var(--text-2) !important; background: var(--surface); text-decoration: none; }

/* ── About Loom modal ────────────────────────────────────── */
.loom-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 4rem 1.5rem;
}
.loom-modal-overlay[hidden] { display: none !important; }
.loom-modal {
  position: relative;
  background: #0c1220;
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.5rem 3rem;
  max-width: 660px;
  width: 100%;
  margin: auto;
}
.loom-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: 1px solid var(--border-dim);
  cursor: pointer;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: .72rem;
  padding: .25rem .55rem;
  border-radius: var(--radius);
  transition: color .15s, background .15s;
  letter-spacing: .06em;
}
.loom-modal__close:hover { color: var(--text); background: var(--surface); }
.loom-modal__tag {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .5rem;
}
.loom-modal__title {
  font-family: var(--mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .5rem;
}
.loom-modal__intro {
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-dim);
}
.loom-modal h2 {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
  margin: 1.75rem 0 .65rem;
}
.loom-modal p {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: .6rem;
}
.loom-modal ul {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: .75rem;
}
.loom-modal ul li {
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.65;
  padding-left: 1.1rem;
  position: relative;
}
.loom-modal ul li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: var(--green);
  font-family: var(--mono);
}
.loom-modal ul li strong { color: var(--text); }
.loom-modal__cta {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-dim);
  font-size: .875rem;
  color: var(--text-2);
  line-height: 1.75;
}
.loom-modal__cta em {
  color: var(--green);
  font-style: normal;
  font-family: var(--mono);
}

/* ── Trailer player (shared: home.html + case1.html) ─────────── */
.loom-trailer {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.loom-trailer__video {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  background: #000;
  cursor: pointer;
}
.loom-trailer__controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem .6rem .5rem;
}
.loom-trailer__controls::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75) 55%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
/* Play/pause, stop, scrub and time fade in on hover/focus; mute and
   fullscreen (siblings of this group, not inside it) stay always visible. */
.loom-trailer__fade {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.loom-trailer:hover .loom-trailer__controls::before,
.loom-trailer:hover .loom-trailer__fade,
.loom-trailer__controls:focus-within::before,
.loom-trailer__controls:focus-within .loom-trailer__fade {
  opacity: 1;
  pointer-events: auto;
}
.loom-trailer__btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .3rem;
  flex-shrink: 0;
  transition: color .15s;
}
.loom-trailer__btn:hover { color: var(--green); }
.loom-trailer__btn svg { width: 14px; height: 14px; }
.loom-trailer__btn [hidden] { display: none; }
.loom-trailer__scrub {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  background: rgba(255,255,255,.3);
  border-radius: 2px;
  cursor: pointer;
  outline: none;
  min-width: 0;
}
.loom-trailer__scrub::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: transparent; }
.loom-trailer__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  margin-top: -4px;
}
.loom-trailer__scrub::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255,255,255,.3); }
.loom-trailer__scrub::-moz-range-thumb {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  cursor: pointer;
}
.loom-trailer__time {
  font-family: var(--mono);
  font-size: .65rem;
  color: rgba(255,255,255,.85);
  flex-shrink: 0;
  min-width: 5ch;
  text-align: right;
}
.loom-trailer:fullscreen { display: flex; }
.loom-trailer:fullscreen .loom-trailer__video { width: 100%; height: 100%; aspect-ratio: auto; }