* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; overflow: hidden;
  background: #000; font-family: system-ui, sans-serif;
  user-select: none; -webkit-user-select: none;
}
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#load-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent; z-index: 6000;
  flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 20px; padding-top: 48vh; pointer-events: none;
}
#load-overlay.visible { display: flex; }
#load-overlay > * { pointer-events: auto; }

/* Canvas already draws the arcade title; keep this visually minimal + positioned below it. */
#load-overlay h2 { display: none; }
#load-overlay p { display: none; }

#load-overlay .input-group {
  display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 500px;
}
#load-overlay textarea, #load-overlay input[type=text] {
  background: #0f1a2e; border: 1px solid #1a3a6e; color: #e0e0e0;
  padding: 12px; font-size: 14px; font-family: monospace; border-radius: 6px;
  resize: vertical;
}
#load-overlay textarea { min-height: 80px; }
#load-overlay input[type=text] { height: 44px; }
#load-overlay textarea:focus, #load-overlay input[type=text]:focus {
  outline: none; border-color: #e94560;
}
#load-overlay .btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#load-overlay button {
  background: none; border: 2px solid #e94560; color: #e94560;
  padding: 10px 24px; font-size: 14px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s;
  letter-spacing: 0.5px;
}
#load-overlay button:hover { background: #e94560; color: #fff; }
#load-overlay .btn-paste { border-color: #ffd700; color: #ffd700; }
#load-overlay .btn-paste:hover { background: #ffd700; color: #000; }
#load-overlay .btn-cancel { border-color: #555; color: #555; }
#load-overlay .btn-feed { border-color: #ff4500; color: #ff4500; }
#load-overlay .btn-feed:hover { background: #ff4500; color: #fff; }
#load-overlay .btn-hn {
  border-color: #ff6600; color: #ff6600; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,102,0,0.55);
  box-shadow: 0 0 0 1px rgba(255,102,0,0.15) inset, 0 0 18px rgba(255,102,0,0.22);
  background: rgba(255,102,0,0.06);
}
#load-overlay .btn-hn:hover { background: #ff6600; color: #fff; text-shadow: none; }
#load-overlay .btn-x {
  border-color: #00ddff; color: #00ddff; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0,221,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,221,255,0.15) inset, 0 0 18px rgba(0,221,255,0.22);
  background: rgba(0,221,255,0.05);
}
#load-overlay .btn-x:hover { background: #00ddff; color: #000; text-shadow: none; }
#load-overlay .btn-mix {
  border-color: #ff1493; color: #ff1493; font-size: 17px; padding: 15px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,20,147,0.55);
  box-shadow: 0 0 0 1px rgba(255,20,147,0.18) inset, 0 0 22px rgba(255,20,147,0.28);
  background: rgba(255,20,147,0.07);
  font-weight: bold;
}
#load-overlay .btn-mix:hover { background: #ff1493; color: #fff; text-shadow: none; }
#load-overlay .btn-arxiv {
  border-color: #b31b1b; color: #ff5a5a; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(179,27,27,0.55);
  box-shadow: 0 0 0 1px rgba(179,27,27,0.18) inset, 0 0 18px rgba(179,27,27,0.28);
  background: rgba(179,27,27,0.08);
}
#load-overlay .btn-arxiv:hover { background: #b31b1b; color: #fff; text-shadow: none; }
#load-overlay .btn-pubmed {
  border-color: #1c8c5e; color: #4dffa1; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(28,140,94,0.55);
  box-shadow: 0 0 0 1px rgba(28,140,94,0.18) inset, 0 0 18px rgba(28,140,94,0.28);
  background: rgba(28,140,94,0.08);
}
#load-overlay .btn-pubmed:hover { background: #1c8c5e; color: #fff; text-shadow: none; }
/* === PODCAST BLASTAR === — orange-ish (matches the source badge color) */
#load-overlay .btn-podcast {
  border-color: #ff8a3a; color: #ffae72; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,138,58,0.55);
  box-shadow: 0 0 0 1px rgba(255,138,58,0.18) inset, 0 0 18px rgba(255,138,58,0.28);
  background: rgba(255,138,58,0.08);
}
#load-overlay .btn-podcast:hover { background: #ff8a3a; color: #fff; text-shadow: none; }
/* === END PODCAST BLASTAR === */
/* === BOOKMARK GUN + STUMBLE === — yellow/gold like a bookmark + spinning vortex */
#load-overlay .btn-stumble {
  border-color: #ffd23c; color: #ffd23c; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,210,60,0.55);
  box-shadow: 0 0 0 1px rgba(255,210,60,0.18) inset, 0 0 18px rgba(255,210,60,0.28);
  background: rgba(255,210,60,0.08);
}
#load-overlay .btn-stumble:hover { background: #ffd23c; color: #2a1a00; text-shadow: none; border-color: #ffea87; }
/* Bookmark Gun in-game elements use the bm-* prefix to keep them isolated. */
.bm-toast-extra { color: #ffd23c; font-weight: bold; }
/* === END BOOKMARK GUN + STUMBLE === */
#load-overlay .btn-battle {
  border-color: #55ff99; color: #55ff99; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(85,255,153,0.55);
  box-shadow: 0 0 0 1px rgba(85,255,153,0.18) inset, 0 0 18px rgba(85,255,153,0.28);
  background: rgba(85,255,153,0.07);
}
#load-overlay .btn-battle:hover { background: #55ff99; color: #000; text-shadow: none; }
#load-overlay .btn-creator {
  border-color: #ff66dd; color: #ff66dd; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,102,221,0.55);
  box-shadow: 0 0 0 1px rgba(255,102,221,0.2) inset, 0 0 18px rgba(255,102,221,0.32);
  background: rgba(255,102,221,0.08);
}
#load-overlay .btn-creator:hover { background: linear-gradient(135deg, #ff66dd, #aa44ff); color: #200a18; text-shadow: none; border-color: #ffaaee; }
#load-overlay .btn-stars {
  border-color: #ffd54a; color: #ffd54a; font-size: 16px; padding: 13px 28px;
  width: 100%; max-width: 440px; margin-top: 2px; letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255,213,74,0.55);
  box-shadow: 0 0 0 1px rgba(255,213,74,0.18) inset, 0 0 18px rgba(255,213,74,0.28);
  background: rgba(255,213,74,0.08);
}
#load-overlay .btn-stars:hover { background: linear-gradient(135deg, #ffd54a, #ff9500); color: #2a1a00; text-shadow: none; border-color: #ffea87; }
/* Follow-on-X link pinned at the bottom-center of the title overlay */
#load-overlay .game-x-link {
  margin-top: 16px;
  color: #5abff8;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  border: 1px solid rgba(90,191,248,0.35);
  padding: 6px 14px;
  border-radius: 20px;
  align-self: center;
}
#load-overlay .game-x-link:hover { opacity: 1; background: #5abff8; color: #000; border-color: #5abff8; }
#load-overlay .btn-porch {
  border-color: #8855ff; color: #cbaaff; font-size: 15px; padding: 12px 24px;
  width: 100%; max-width: 440px; margin-top: 6px; letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(136,85,255,0.4);
  box-shadow: 0 0 0 1px rgba(136,85,255,0.15) inset, 0 0 18px rgba(136,85,255,0.22);
  background: rgba(60,30,120,0.15);
}
#load-overlay .btn-porch:hover { background: #8855ff; color: #fff; text-shadow: none; }
#load-overlay .btn-porch-sub { font-size: 10px; color: #7a6a9f; margin-top: -2px; letter-spacing: 2px; text-align: center; }
#load-overlay .mix-step1 { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
#load-overlay .mix-step2 {
  display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%;
}
#load-overlay.mix-step2-active .mix-step1 { display: none; }
#load-overlay.mix-step2-active .mix-step2 { display: flex; }
#load-overlay.mix-step2-active .options-step { display: none; }
/* Options step (collapsed-by-default mode picker reachable via the OPTIONS button). */
#load-overlay .options-step {
  display: none; flex-direction: column; align-items: center; gap: 10px; width: 100%;
}
#load-overlay.options-active .mix-step1 { display: none; }
#load-overlay.options-active .options-step { display: flex; }
#load-overlay .options-header {
  font-family: monospace; font-size: 20px; color: #00eeff; letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(0,238,255,0.6); margin-top: 4px;
}
#load-overlay .options-sub {
  font-family: monospace; font-size: 11px; color: #8899a6; letter-spacing: 1px; margin-top: -2px; margin-bottom: 4px;
}
/* Featured-starters button group inside Options (moved from the legacy
   returning-block on the title screen, 2026-04-27). Single-column stack
   matching the OPTIONS menu rhythm. */
#load-overlay .ts-section-buttons {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; gap: 8px; width: 100%; max-width: 440px;
}
#load-overlay .ts-section-buttons > button { width: 100%; max-width: 440px; }
#load-overlay .ts-loading {
  font-family: monospace; font-size: 11px; color: #667; letter-spacing: 2px; padding: 14px;
}
#load-overlay .btn-options {
  border-color: #667; color: #aac; letter-spacing: 4px;
}
#load-overlay .btn-options:hover { background: #667; color: #fff; }
/* Title-screen primary block (BLAST THE TIMELINE + Level Selector). Without
   this rule the wrapper takes intrinsic content-width inside the centered
   .mix-step1 column, leaving the inner buttons (width:100% / max:440px)
   anchored to that narrower box and visually shifted left of the OPTIONS
   button below it. Forcing flex column + full width aligns the entire
   stack to the same horizontal center as its sibling .btn-options. */
#load-overlay #ts-default-block {
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%;
}
/* Level Selector dropdown — sits directly under the primary BLAST THE
   TIMELINE CTA on the title screen. Visual style mirrors .btn-options
   (cyan-grey border, monospace, full-width 440px) so it reads as part
   of the same button rhythm. v1: only Level 1 enabled. */
#load-overlay .tb-level-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: monospace; font-size: 14px; letter-spacing: 2px;
  width: 100%; max-width: 440px; padding: 12px 36px 12px 18px;
  margin-top: 2px;
  border: 2px solid #667; color: #aac;
  background: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, #aac 50%),
    linear-gradient(135deg, #aac 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: none;
  text-shadow: none;
  cursor: pointer; outline: none;
  transition: background 0.15s, color 0.15s;
}
#load-overlay .tb-level-select:hover { background-color: #667; color: #fff; }
#load-overlay .tb-level-select:focus { box-shadow: 0 0 0 1px rgba(170,170,204,0.4) inset; }
#load-overlay .tb-level-select option { background: #0a1418; color: #aac; }
#load-overlay .tb-level-select option:disabled { color: #445; }
/* Secondary buttons (garage / porch / universe map / account) styled to
   read as a different group from the mode buttons above. Same sizing as
   the top mode buttons (width 100% / max-width 440px / font-size 16px
   / padding 13px 28px) so the column reads as one consistent stack.
   Distinct accent colors per surface. */
#load-overlay .options-divider {
  width: 60%; height: 1px; margin: 8px auto 4px;
  background: linear-gradient(90deg, transparent, rgba(120, 140, 180, 0.35), transparent);
}
/* Section labels inside the Options panel — render as a horizontal rule
   with an inline ALL-CAPS label, in a deliberately subtle palette so
   they read as secondary structure (not bright cyan UI buttons).
   Matches the dimmed feel of `.options-sub`. */
#load-overlay .opt-section {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 440px;
  margin: 18px auto 4px;
  opacity: 0.7;
}
#load-overlay .opt-section::before,
#load-overlay .opt-section::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 140, 180, 0.45), transparent);
}
#load-overlay .opt-section span {
  font-family: monospace; font-size: 11px; letter-spacing: 3px;
  color: #88a; white-space: nowrap;
}
#load-overlay .opt-section:first-of-type { margin-top: 8px; }
#load-overlay .btn-garage,
#load-overlay .btn-porch,
#load-overlay .btn-universe,
#load-overlay .btn-account,
#load-overlay .btn-support {
  width: 100%; max-width: 440px;
  font-size: 16px; padding: 13px 28px;
  margin-top: 2px;
  letter-spacing: 2px;
}
#load-overlay .btn-garage {
  border-color: #6680ff; color: #aab8ff;
  text-shadow: 0 0 6px rgba(102, 128, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(102,128,255,0.15) inset, 0 0 18px rgba(102,128,255,0.22);
  background: rgba(102,128,255,0.06);
}
#load-overlay .btn-garage:hover { background: #6680ff; color: #fff; text-shadow: none; }
#load-overlay .btn-porch {
  border-color: #8855ff; color: #cbaaff;
  text-shadow: 0 0 8px rgba(136,85,255,0.4);
  box-shadow: 0 0 0 1px rgba(136,85,255,0.15) inset, 0 0 18px rgba(136,85,255,0.22);
  background: rgba(60,30,120,0.15);
}
#load-overlay .btn-porch:hover { background: #8855ff; color: #fff; text-shadow: none; }
#load-overlay .btn-universe {
  border-color: #00ccaa; color: #6fe7d2;
  text-shadow: 0 0 6px rgba(0, 204, 170, 0.35);
  box-shadow: 0 0 0 1px rgba(0,204,170,0.18) inset, 0 0 18px rgba(0,204,170,0.22);
  background: rgba(0,204,170,0.06);
}
#load-overlay .btn-universe:hover { background: #00ccaa; color: #00100c; text-shadow: none; }
#load-overlay .btn-account {
  border-color: #888; color: #bbb;
  background: rgba(255,255,255,0.03);
}
#load-overlay .btn-account:hover { background: #888; color: #fff; }
#load-overlay .btn-support {
  border-color: #4dffa1; color: #4dffa1;
  text-shadow: 0 0 6px rgba(77, 255, 161, 0.30);
  box-shadow: 0 0 0 1px rgba(77, 255, 161, 0.15) inset, 0 0 18px rgba(77, 255, 161, 0.18);
  background: rgba(77, 255, 161, 0.04);
}
#load-overlay .btn-support:hover { background: #4dffa1; color: #062012; text-shadow: none; }
/* Support pill in player menu (mirrors pm-coins-section visual rhythm) */
.pm-support-section {
  border: 1px solid #1a3a2a; border-radius: 6px; padding: 12px 14px;
  background: rgba(77, 255, 161, 0.04); margin: 10px 0 6px;
  text-align: center;
}
.pm-support-section .pm-support-btn {
  background: transparent; border: 1px solid #4dffa1; color: #4dffa1;
  padding: 9px 22px; font: 700 13px/1 ui-monospace, monospace;
  letter-spacing: 2px; cursor: pointer; border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.pm-support-section .pm-support-btn:hover { background: #4dffa1; color: #062012; }
.pm-support-section .pm-support-sub {
  margin-top: 6px; font-size: 11px; color: #6a8a78; font-family: monospace;
}
/* 🚪 Logout pill — quietest of the three (red-ish, low-contrast). */
.pm-logout-section {
  border: 1px solid #3a1a1a; border-radius: 6px; padding: 12px 14px;
  background: rgba(255, 90, 90, 0.04); margin: 10px 0 6px;
  text-align: center;
}
.pm-logout-section .pm-logout-btn {
  background: transparent; border: 1px solid #ff8899; color: #ff8899;
  padding: 9px 22px; font: 700 13px/1 ui-monospace, monospace;
  letter-spacing: 2px; cursor: pointer; border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.pm-logout-section .pm-logout-btn:hover { background: #ff8899; color: #200a0a; }
.pm-logout-section .pm-logout-sub {
  margin-top: 6px; font-size: 11px; color: #8a6a6a; font-family: monospace;
}
/* Support modal action buttons — stacked, equal prominence (no dark patterns) */
#support-modal .sup-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
#support-modal .sup-cta {
  display: inline-block; text-decoration: none; text-align: center;
}
#support-modal .sup-cta-x { background: #000 !important; color: #fff !important; border-color: #fff !important; }
#support-modal .sup-cta-x:hover { background: #d7dbdc !important; color: #0f1419 !important; border-color: #d7dbdc !important; }

/* Profile section at the bottom of the Options panel — only visible when
   X-connected; collapses to nothing when none of its children render. */
#load-overlay .options-profile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px dashed rgba(80, 100, 130, 0.35);
  width: 100%;
}
#load-overlay .options-profile:empty { display: none; }
#load-overlay .options-profile .x-status { margin: 0; }
#load-overlay .options-profile .game-x-link { margin: 0; }
/* When Options or Mix-sources panel is active, the WHOLE overlay becomes
   the scroll viewport (pointer-events on; vertical scroll). The base
   padding-top: 48vh stays so the canvas-rendered title + emoji row above
   are never covered by the BACK button. Extra bottom padding gives the
   last button breathing room on mobile.
   Solid 75%-black backdrop dims the gameplay/canvas behind so the menu
   reads cleanly and feels like its own surface (not floating on stars). */
#load-overlay.options-active, #load-overlay.mix-step2-active {
  overflow-y: auto;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#load-overlay .mix-step2-header {
  font-family: monospace; font-size: 20px; color: #ff1493; letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(255,20,147,0.6); margin-top: 4px;
}
#load-overlay .mix-step2-sub {
  font-family: monospace; font-size: 11px; color: #8899a6; letter-spacing: 1px; margin-top: -2px;
}
#load-overlay .btn-mix-back {
  background: transparent; border: none; color: #667; font-family: monospace;
  font-size: 12px; cursor: pointer; letter-spacing: 2px; margin-top: -2px; padding: 6px 10px;
}
#load-overlay .btn-mix-back:hover { color: #aac; }
/* Prominent variant — used at the TOP of the Options panel so users can always see "back". */
#load-overlay .btn-back-prominent {
  background: rgba(0, 238, 255, 0.08);
  border: 1px solid #00eeff;
  color: #00eeff;
  font-size: 12px;
  letter-spacing: 4px;
  padding: 8px 22px;
  border-radius: 4px;
  margin: 0 auto 4px;
  align-self: center;
  text-shadow: 0 0 8px rgba(0,238,255,0.4);
}
#load-overlay .btn-back-prominent:hover {
  background: #00eeff; color: #000; text-shadow: none;
}
#load-overlay .sources-block {
  width: 100%; max-width: 440px;
  border: 1px solid rgba(255,20,147,0.3); border-radius: 6px; padding: 12px 14px;
  background: rgba(40,10,30,0.35); font-family: monospace; font-size: 12px;
}
#load-overlay .sources-block .sources-grid {
  display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center;
}
#load-overlay .sources-block label {
  color: #ccc; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 0;
}
#load-overlay .sources-block input[type=checkbox] {
  accent-color: #ff1493; cursor: pointer;
}
#load-overlay .src-x      { color: #1d9bf0; }
#load-overlay .src-hn     { color: #ff6600; }
#load-overlay .src-bluesky{ color: #0085ff; }
#load-overlay .src-mastodon{ color: #6364ff; }
#load-overlay .src-rss    { color: #00cc55; }
#load-overlay .src-podcasts{ color: #ff3030; }
#load-overlay .src-arxiv  { color: #ff5a5a; }
#load-overlay .btn-x-logout { border-color: #666; color: #888; font-size: 11px; padding: 6px 14px; margin-top: 4px; letter-spacing: 0; }
#load-overlay .btn-x-logout:hover { background: #333; color: #fff; }
#load-overlay .x-status { color: #8899a6; font-size: 11px; font-family: monospace; margin-top: -2px; letter-spacing: 0.5px; }
#load-overlay .x-status strong { color: #fff; }

/* Post link during gameplay — right edge, below player-menu button */
#hn-link {
  display: none; position: fixed; top: 130px; right: 14px;
  z-index: 5000; background: rgba(255,102,0,0.15); border: 1px solid #ff6600;
  color: #ff6600; font-family: monospace; font-size: 11px; padding: 6px 10px;
  border-radius: 4px; cursor: pointer; text-decoration: none;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background 0.15s;
}
#hn-link:hover { background: rgba(255,102,0,0.35); }
#hn-link.visible { display: block; }

#load-overlay .or-divider { color: #444; font-size: 12px; font-family: monospace; }

#load-overlay .preview-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
#load-overlay .preview-img {
  max-width: 200px; max-height: 120px; border: 1px solid #1a3a6e; border-radius: 4px;
}

/* Feed panel */
#feed-panel {
  display: none; width: 100%; max-width: 560px; max-height: 60vh; overflow-y: auto;
  flex-direction: column; gap: 0;
  border: 1px solid #1a3a6e; border-radius: 8px; background: #0a0f1e;
  scrollbar-width: thin; scrollbar-color: #1a3a6e #0a0f1e;
}
#feed-panel.visible { display: flex; }
#feed-panel .feed-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #1a3a6e; position: sticky; top: 0; background: #0a0f1e; z-index: 1;
}
#feed-panel .feed-header select {
  background: #0f1a2e; border: 1px solid #1a3a6e; color: #ff4500;
  padding: 6px 10px; font-size: 13px; font-family: monospace; border-radius: 4px; flex: 1;
}
#feed-panel .feed-loading { color: #555; font-size: 12px; padding: 20px; text-align: center; font-family: monospace; }
.feed-post {
  padding: 12px 14px; border-bottom: 1px solid #111828; cursor: pointer;
  transition: background 0.15s;
}
.feed-post:hover { background: #141e35; }
.feed-post .fp-meta {
  display: flex; gap: 8px; align-items: center; font-size: 11px; color: #657786; margin-bottom: 4px;
}
.feed-post .fp-source { color: #ff4500; font-weight: bold; }
.feed-post .fp-author { color: #7a8ba8; }
.feed-post .fp-score { color: #ffd700; }
.feed-post .fp-title { color: #e0e0e0; font-size: 14px; line-height: 1.4; margin-bottom: 4px; }
.feed-post .fp-text { color: #888; font-size: 12px; line-height: 1.3; max-height: 40px; overflow: hidden; }
.feed-post .fp-destroy {
  display: inline-block; margin-top: 6px; font-size: 11px; color: #e94560;
  font-family: monospace; font-weight: bold; opacity: 0; transition: opacity 0.15s;
}
.feed-post:hover .fp-destroy { opacity: 1; }

/* Share overlay */
#share-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.88); z-index: 7000;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
#share-overlay.visible { display: flex; }
#share-overlay h2 { color: #ffd700; font-family: monospace; font-size: 24px; }
#share-overlay p { color: #7a8ba8; font-size: 13px; }
#share-overlay .share-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
#share-overlay .share-btns button {
  background: none; border: 2px solid #e94560; color: #e94560;
  padding: 10px 24px; font-size: 14px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s;
}
#share-overlay .share-btns button:hover { background: #e94560; color: #fff; }
#share-overlay .share-btns .btn-continue { border-color: #4488ff; color: #4488ff; }
#share-overlay .share-btns .btn-continue:hover { background: #4488ff; color: #fff; }

/* Post-Kill Share Modal — pops up 5s after each boss kill */
/* Backdrop is transparent + pointer-events:none so the game canvas is visible & shootable.
   Only the .ksm-card re-enables pointer events for button clicks. */
#kill-share-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent; z-index: 8800;
  align-items: flex-end; justify-content: center; padding: 16px;
  pointer-events: none;
}
#kill-share-modal.visible { display: flex; }
#kill-share-modal .ksm-card {
  background: rgba(10,15,30,0.92); border: 2px solid #e94560; border-radius: 10px;
  max-width: 520px; width: 100%; padding: 18px;
  display: flex; flex-direction: column; gap: 12px; position: relative;
  box-shadow: 0 0 40px rgba(233,69,96,0.3);
  pointer-events: auto;
  margin-bottom: 8vh;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#kill-share-modal .ksm-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #888; font-size: 22px; cursor: pointer; font-family: monospace;
  line-height: 1; padding: 4px 8px;
}
#kill-share-modal .ksm-close:hover { color: #fff; }
#kill-share-modal h3 {
  color: #ffd700; font-family: monospace; font-size: 18px; margin: 0;
  letter-spacing: 1px;
}
#kill-share-modal .ksm-meta { color: #8899a6; font-size: 12px; font-family: monospace; }
#kill-share-modal .ksm-meta strong { color: #fff; }
#kill-share-modal video {
  width: 100%; border-radius: 6px; background: #000;
  max-height: 50vh; object-fit: contain;
}
#kill-share-modal .ksm-btns { display: flex; flex-direction: column; gap: 8px; }
#kill-share-modal .ksm-btns button {
  background: none; border: 2px solid #888; color: #ddd;
  padding: 10px 14px; font-size: 13px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 5px; transition: all 0.15s; text-align: left;
}
#kill-share-modal .ksm-btns button:hover { transform: translateX(2px); }
#kill-share-modal .ksm-btn-x { border-color: #fff; color: #fff; }
#kill-share-modal .ksm-btn-x:hover { background: #fff; color: #000; }
#kill-share-modal .ksm-btn-share { border-color: #4488ff; color: #4488ff; }
#kill-share-modal .ksm-btn-share:hover { background: #4488ff; color: #fff; }
#kill-share-modal .ksm-btn-save { border-color: #ffd700; color: #ffd700; }
#kill-share-modal .ksm-btn-save:hover { background: #ffd700; color: #000; }
#kill-share-modal .ksm-btn-skip { border-color: #555; color: #999; font-size: 12px; padding: 8px 14px; }
#kill-share-modal .ksm-btn-skip:hover { background: #333; color: #fff; }
#kill-share-modal .ksm-hint { color: #556; font-size: 11px; font-family: monospace; text-align: center; margin-top: 4px; }
#kill-share-modal .ksm-reply-text {
  background: #0f1a2e; border: 1px solid #2a3f55; color: #e0e0e0;
  padding: 8px 10px; font-size: 12px; font-family: monospace; border-radius: 4px;
  resize: none; width: 100%; box-sizing: border-box; margin-top: -4px;
}
#kill-share-modal .ksm-reply-text:focus { outline: none; border-color: #4488ff; }
#kill-share-modal .ksm-btn-x.posting { opacity: 0.65; cursor: wait; }
#kill-share-modal .ksm-btn-x.posting::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: #000;
  border-radius: 50%; animation: ksmSpin 0.7s linear infinite; vertical-align: middle;
}
@keyframes ksmSpin { to { transform: rotate(360deg); } }

/* Upload status line (Bug 2 — paused-during-upload + visible feedback). Sits
   below the hint row and reflects the in-flight state of the X reply pipeline:
   .uploading (cyan), .success (green), .error (red w/ wrapped detail). Hidden
   when empty so it doesn't push the modal layout. */
#kill-share-modal .ksm-status {
  font-family: monospace; font-size: 12px; text-align: center;
  padding: 6px 10px; border-radius: 4px; margin-top: 4px;
  white-space: pre-wrap; word-break: break-word; min-height: 0;
}
#kill-share-modal .ksm-status:empty { display: none; padding: 0; margin: 0; }
#kill-share-modal .ksm-status.uploading {
  color: #8fd3ff; background: rgba(143,211,255,0.08); border: 1px solid rgba(143,211,255,0.35);
}
#kill-share-modal .ksm-status.success {
  color: #7bff55; background: rgba(123,255,85,0.08); border: 1px solid rgba(123,255,85,0.35);
}
#kill-share-modal .ksm-status.error {
  color: #ff6b6b; background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.4);
}
#kill-share-modal .ksm-close[disabled] { opacity: 0.35; cursor: wait; pointer-events: none; }

/* --- Commentary capture (Feature 2) --- */
#kill-share-modal .ksm-comm-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
#kill-share-modal .ksm-btn-comm {
  background: none; border: 2px solid #7bff55; color: #7bff55;
  padding: 8px 12px; font-size: 12px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 5px; transition: all 0.15s; flex: 1; text-align: left;
}
#kill-share-modal .ksm-btn-comm:hover { background: #7bff55; color: #000; }
#kill-share-modal .ksm-btn-comm.active { background: #7bff55; color: #000; }
#kill-share-modal .ksm-comm-status { color: #7bff55; font-family: monospace; font-size: 11px; }
#kill-share-modal .ksm-comm-capture {
  display: none;
  border: 1px solid #334; border-radius: 6px; padding: 10px;
  background: rgba(0,0,0,0.5);
  flex-direction: column; gap: 8px;
}
#kill-share-modal .ksm-comm-capture.open { display: flex; }
#kill-share-modal .ksm-comm-notice {
  color: #aab; font-size: 11px; font-family: monospace;
  padding: 6px 8px; border-left: 2px solid #7bff55; background: rgba(123,255,85,0.05);
}
#kill-share-modal .ksm-comm-preview-wrap {
  position: relative; display: flex; justify-content: center; background: #000; border-radius: 4px;
}
#kill-share-modal #ksm-comm-canvas {
  width: 100%; max-width: 350px; height: auto; display: block; border-radius: 4px;
  background: #000;
}
#kill-share-modal .ksm-comm-timer {
  position: absolute; top: 6px; left: 8px; font-family: monospace; font-size: 12px;
  color: #7bff55; background: rgba(0,0,0,0.65); padding: 2px 6px; border-radius: 3px;
  display: none;
}
#kill-share-modal .ksm-comm-timer.visible { display: block; }
#kill-share-modal .ksm-comm-rec-dot {
  position: absolute; top: 8px; right: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: #ff3040; display: none; animation: ksmCommBlink 0.6s ease-in-out infinite alternate;
}
#kill-share-modal .ksm-comm-rec-dot.visible { display: block; }
@keyframes ksmCommBlink { from { opacity: 0.3; } to { opacity: 1; } }
#kill-share-modal .ksm-comm-controls {
  display: flex; gap: 6px; flex-wrap: wrap;
}
#kill-share-modal .ksm-comm-btn {
  background: none; border: 2px solid #666; color: #ccc;
  padding: 7px 12px; font-size: 12px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; flex: 1; min-width: 90px;
}
#kill-share-modal .ksm-comm-btn:hover { background: #222; color: #fff; }
#kill-share-modal .ksm-comm-btn-rec { border-color: #ff3040; color: #ff3040; }
#kill-share-modal .ksm-comm-btn-rec.recording { background: #ff3040; color: #fff; }
#kill-share-modal .ksm-comm-btn-keep { border-color: #7bff55; color: #7bff55; }
#kill-share-modal .ksm-comm-btn-redo { border-color: #ffd700; color: #ffd700; }
#kill-share-modal .ksm-comm-btn-remove { border-color: #888; color: #888; }
#kill-share-modal .ksm-comm-msg {
  color: #ff8080; font-family: monospace; font-size: 11px; min-height: 14px;
}
#kill-share-modal .ksm-comm-msg.ok { color: #7bff55; }

/* --- Reading Pause overlay (Discovery weapon → 20s study-pause) ---
   Small corner badge so the eyes stay on the paper, not on the UI. */
#reading-pause-overlay {
  display: none; position: fixed; bottom: 18px; left: 18px;
  z-index: 9150; pointer-events: none;
}
#reading-pause-overlay.visible { display: block; }
#reading-pause-overlay .rpo-card {
  background: rgba(15,25,55,0.78);
  border: 1px solid rgba(90,170,255,0.7);
  padding: 6px 12px 6px 10px;
  border-radius: 8px;
  font-family: monospace;
  color: #cce6ff;
  box-shadow: 0 0 18px rgba(90,170,255,0.35);
  display: inline-flex; align-items: center; gap: 8px;
}
#reading-pause-overlay h2 {
  margin: 0; font-size: 12px; letter-spacing: 2px; color: #fff;
  font-weight: normal;
}
#reading-pause-overlay .rpo-sub { font-size: 9px; color: #7a8ba8; letter-spacing: 1px; }
#reading-pause-overlay .rpo-counter {
  font-size: 16px; color: #5aaaff; text-shadow: 0 0 8px rgba(90,170,255,0.7);
  letter-spacing: 2px; font-weight: bold;
}

/* --- COINS Shop (insert-coin) button + modal — lives next to the 🪙 COINS badge on #load-overlay --- */
#load-overlay .btn-coins-shop {
  border-color: #ffd700; color: #ffd700; font-size: 13px; padding: 9px 18px;
  letter-spacing: 2px; margin-top: 6px; align-self: center;
  text-shadow: 0 0 10px rgba(255,215,0,0.45);
  box-shadow: 0 0 0 1px rgba(255,215,0,0.15) inset, 0 0 14px rgba(255,215,0,0.2);
  background: rgba(255,215,0,0.05);
}
#load-overlay .btn-coins-shop:hover { background: #ffd700; color: #000; text-shadow: none; }
#load-overlay #coins-badge {
  color: #ffd700; font-family: monospace; font-size: 12px; letter-spacing: 2px;
  margin-top: 8px; opacity: 0.9; text-shadow: 0 0 8px rgba(255,215,0,0.35);
  text-align: center; align-self: center;
}
#load-overlay #coins-badge .bb-num { color: #fff; font-weight: bold; }

#coins-shop-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.88); z-index: 9280;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#coins-shop-modal.visible { display: flex; }
#coins-shop-modal .bs-card {
  background: linear-gradient(180deg, #0e0a02 0%, #1e1406 100%);
  border: 2px solid #ffd700;
  border-radius: 14px;
  max-width: 640px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,215,0,0.3), 0 0 20px rgba(255,255,255,0.08);
  margin: auto;
}
#coins-shop-modal .bs-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #888; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
#coins-shop-modal .bs-close:hover { color: #fff; }
#bs-gate-banner {
  display: none; align-items: center; gap: 14px;
  background: linear-gradient(135deg, rgba(255, 80, 80, 0.18), rgba(255, 215, 0, 0.12));
  border: 1.5px solid rgba(255, 120, 120, 0.55);
  border-radius: 10px;
  padding: 14px 16px; margin-bottom: 4px;
  box-shadow: 0 0 24px rgba(255, 80, 80, 0.18) inset;
}
#bs-gate-banner .bs-gate-icon {
  font-size: 36px; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255, 213, 74, 0.7));
}
#bs-gate-banner .bs-gate-title {
  font: 700 15px/1.3 ui-monospace, monospace;
  color: #ffe6e6; letter-spacing: 0.04em;
}
#bs-gate-banner .bs-gate-detail {
  font: 12px/1.5 ui-monospace, monospace;
  color: #ffe082; margin-top: 4px;
}
#bs-gate-banner .bs-gate-detail b { color: #fff; }
#bs-gate-banner .bs-gate-cta {
  font: 12px/1.4 ui-monospace, monospace;
  color: #aab; margin-top: 4px;
}

/* ========================================================
 * Welcome / X-login soft-prep modal. Single CTA, no choice
 * paralysis — see hackend Wiki → UX Principles → cognitive
 * friction at crucial user-moments. Hidden by default; JS
 * toggles .visible. Same backdrop pattern as cc-modal so the
 * page reads as a layered system, not chaos.
 * ======================================================== */
.wlm {
  position: fixed; inset: 0; z-index: 15500;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 16px; box-sizing: border-box;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wlm.visible { display: flex; }
body.wlm-locked { overflow: hidden; }
.wlm .wlm-card {
  position: relative;
  background: linear-gradient(180deg, #0d1626 0%, #08111e 100%);
  color: #e6f0ff;
  border: 1px solid rgba(0, 238, 255, 0.32);
  border-radius: 14px;
  width: 100%; max-width: 460px;
  padding: 32px 28px 28px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0, 238, 255, 0.08),
    0 18px 70px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(0, 238, 255, 0.18) inset;
}
.wlm .wlm-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: 0; color: #6a7891;
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.wlm .wlm-close:hover { color: #c8d0e0; }
.wlm .wlm-emoji {
  font-size: 44px; margin-bottom: 6px;
  filter: drop-shadow(0 0 14px rgba(0, 238, 255, 0.45));
}
.wlm h2 {
  margin: 6px 0 10px; font-size: 24px; font-weight: 700;
  color: #ffd23c; letter-spacing: 0.5px;
}
.wlm p {
  margin: 0 0 8px; color: #c8d0e0; font-size: 15px;
}
.wlm .wlm-subtle {
  color: #8a93a6; font-size: 13px; margin-bottom: 18px;
}
.wlm .wlm-cta {
  display: inline-block; margin-top: 6px;
  background: #000; color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  padding: 14px 26px;
  font: 600 15px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(0, 238, 255, 0.0);
  transition: box-shadow 0.18s ease, transform 0.05s ease;
}
.wlm .wlm-cta:hover {
  box-shadow: 0 0 0 4px rgba(0, 238, 255, 0.22);
}
.wlm .wlm-cta:active { transform: translateY(1px); }

/* ========================================================
 * Cookie consent modal — Cookiebot-style: tabbed (Consent / Details /
 * About), Deny / Customize / Allow all on first tab, per-category
 * toggles (Necessary always on / Preferences / Statistics / Marketing)
 * on Details tab. GDPR + Google Consent Mode v2 compliant.
 * Hidden by default; JS adds .visible.
 * ======================================================== */
#cc-modal {
  position: fixed; inset: 0; z-index: 15000;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 16px; box-sizing: border-box;
  font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#cc-modal.visible { display: flex; }
body.cc-locked { overflow: hidden; }
/* X-style dark theme: pure-black card, #2f3336 dividers, #1d9bf0 accent. */
#cc-modal .cc-card {
  background: #000; color: #e7e9ea;
  border: 1px solid #2f3336;
  border-radius: 14px;
  width: 100%; max-width: 600px; max-height: 92vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.85);
}
#cc-modal .cc-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px 0;
}
#cc-modal .cc-logo { font-size: 22px; }
#cc-modal .cc-logo-sub {
  font-size: 13px; font-weight: 700; color: #e7e9ea; letter-spacing: 0.04em;
}
#cc-modal .cc-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #2f3336;
  margin: 14px 0 0;
}
#cc-modal .cc-tab {
  flex: 1; padding: 14px 16px;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  font: 600 14px/1 system-ui, sans-serif; color: #71767b;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#cc-modal .cc-tab:hover { color: #e7e9ea; background: rgba(231, 233, 234, 0.03); }
#cc-modal .cc-tab.active { color: #1d9bf0; border-bottom-color: #1d9bf0; }
#cc-modal .cc-pane {
  display: none; padding: 20px 22px 6px;
  overflow-y: auto; flex: 1;
}
#cc-modal .cc-pane.active { display: block; }
#cc-modal h2 {
  font-size: 18px; font-weight: 700; color: #e7e9ea; margin: 0 0 12px;
}
#cc-modal p { color: #c4c8cc; margin: 0 0 12px; }
#cc-modal ul { color: #c4c8cc; padding-left: 18px; margin: 6px 0 12px; }
#cc-modal a { color: #1d9bf0; text-decoration: none; }
#cc-modal a:hover { text-decoration: underline; }
#cc-modal .cc-fineprint { font-size: 12px; color: #71767b; }
#cc-modal .cc-cat {
  border-bottom: 1px solid #1f2226;
  padding: 14px 0;
}
#cc-modal .cc-cat:last-of-type { border-bottom: 0; }
#cc-modal .cc-cat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
#cc-modal .cc-cat-name { font-size: 15px; color: #e7e9ea; }
#cc-modal .cc-cat-name b { font-weight: 700; }
#cc-modal .cc-cat-count {
  display: inline-block; margin-left: 8px;
  background: rgba(29, 155, 240, 0.12); color: #1d9bf0;
  border-radius: 10px; padding: 1px 8px;
  font-size: 11px; letter-spacing: 0.02em;
}
#cc-modal .cc-cat-desc {
  color: #71767b; font-size: 13px; margin-top: 6px;
}
#cc-modal .cc-switch {
  position: relative; display: inline-block;
  width: 44px; height: 24px; flex-shrink: 0;
}
#cc-modal .cc-switch input {
  opacity: 0; width: 0; height: 0; pointer-events: none;
}
#cc-modal .cc-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #2f3336; border-radius: 24px;
  transition: background 0.15s;
}
#cc-modal .cc-slider::before {
  content: ""; position: absolute;
  height: 18px; width: 18px; left: 3px; top: 3px;
  background: #71767b; border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
#cc-modal .cc-switch input:checked + .cc-slider { background: #1d9bf0; }
#cc-modal .cc-switch input:checked + .cc-slider::before { transform: translateX(20px); background: #fff; }
#cc-modal .cc-switch input:disabled + .cc-slider { opacity: 0.55; cursor: not-allowed; }
#cc-modal .cc-actions {
  display: flex; gap: 10px;
  padding: 16px 22px 22px;
  border-top: 1px solid #2f3336;
  background: #000;
  margin: 16px -22px 0;
}
#cc-modal .cc-actions:first-child { margin-top: 16px; }
#cc-modal .cc-pane > .cc-actions:last-child { margin-bottom: -6px; }
/* GDPR fairness — every consent option must have equal visual prominence;
 * no dark patterns nudging users toward "Allow all". All three CTAs share
 * the same white-pill-on-dark style; only the label distinguishes them.
 * Per user 2026-04-29. */
#cc-modal .cc-btn {
  flex: 1; padding: 13px 12px;
  background: #fff; color: #0f1419;
  border: 1px solid #fff;
  border-radius: 9999px;
  font: 700 14px/1 system-ui, sans-serif; letter-spacing: 0.02em;
  cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
#cc-modal .cc-btn:hover { background: #d7dbdc; border-color: #d7dbdc; }
#cc-modal .cc-btn:active { transform: translateY(1px); }
@media (max-width: 540px) {
  #cc-modal .cc-tab { font-size: 13px; padding: 12px 8px; }
  #cc-modal .cc-actions { flex-direction: column; }
  #cc-modal .cc-btn { padding: 12px; }
}

/* Title-screen footer — legal links. Visible only on the title state. */
#title-footer {
  position: fixed; bottom: 6px; left: 0; right: 0;
  z-index: 50; text-align: center; pointer-events: none;
  font: 11px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #555;
}
#title-footer a {
  color: #788; text-decoration: none; margin: 0 10px;
  pointer-events: auto;
  transition: color 0.15s;
}
#title-footer a:hover { color: #c8d0e0; }
#title-footer a.tf-wiki {
  color: #ffd23c; border: 1px solid rgba(255,210,60,0.35); border-radius: 4px;
  padding: 4px 10px; font-weight: 600; letter-spacing: 0.4px;
  margin-right: 4px;
}
#title-footer a.tf-wiki:hover { color: #fff; background: rgba(255,210,60,0.10); }
/* Hide the legal footer once gameplay starts so it doesn't compete with HUD. */
body.in-game #title-footer,
body.porch-active #title-footer { display: none; }
#coins-shop-modal h3 {
  color: #ffd700; font-family: monospace; font-size: 20px; margin: 0 40px 0 0;
  letter-spacing: 3px; text-shadow: 0 0 14px rgba(255,215,0,0.5);
}
#coins-shop-modal .bs-sub {
  color: #c6b484; font-family: monospace; font-size: 12px; margin-top: -4px;
}
#coins-shop-modal .bs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-top: 6px;
}
#coins-shop-modal .bs-costs {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  font-family: monospace; font-size: 12px; color: #cfd8dc;
}
#coins-shop-modal .bs-costs-title {
  color: #ffd700; letter-spacing: 2px; font-size: 12px; font-weight: bold;
  margin-bottom: 8px; text-transform: uppercase;
}
#coins-shop-modal .bs-costs-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
#coins-shop-modal .bs-costs-row:last-of-type { border-bottom: none; }
#coins-shop-modal .bs-costs-row b { color: #ffd700; }
#coins-shop-modal .bs-costs-foot {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px; color: #8899a6; font-style: italic;
}
#coins-shop-modal .bs-costs-blurb {
  font-family: inherit; font-size: 13px; line-height: 1.55;
  color: #cfd8dc;
}
#coins-shop-modal .bs-ledger {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  font-family: monospace;
}
#coins-shop-modal .bs-ledger-title {
  color: #ffd700; letter-spacing: 2px; font-size: 12px; font-weight: bold;
  margin-bottom: 8px; text-transform: uppercase;
}
#coins-shop-modal .bs-ledger-empty { color: #8899a6; font-size: 12px; padding: 6px 0; }
#coins-shop-modal .bs-ledger-empty.err { color: #ff6b6b; }
#coins-shop-modal .bs-le-balance {
  padding: 6px 0 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 6px; font-size: 13px; color: #e7e9ea;
}
#coins-shop-modal .bs-le-balance b { color: #ffd700; }
#coins-shop-modal .bs-le-row {
  display: grid; grid-template-columns: 1fr 90px 60px; gap: 10px;
  padding: 5px 0; font-size: 12px; align-items: baseline;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
#coins-shop-modal .bs-le-row:last-child { border-bottom: none; }
#coins-shop-modal .bs-le-label { color: #cfd8dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#coins-shop-modal .bs-le-time { color: #6b7680; font-size: 11px; text-align: right; }
#coins-shop-modal .bs-le-amt { font-weight: bold; text-align: right; }
#coins-shop-modal .bs-le-pos { color: #4dffa1; }
#coins-shop-modal .bs-le-neg { color: #ff6b6b; }
#coins-shop-modal .bs-pack {
  background: rgba(255,215,0,0.04); border: 1px solid rgba(255,215,0,0.3);
  border-radius: 10px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  font-family: monospace; cursor: pointer; transition: all 0.15s;
  text-align: center; position: relative;
}
#coins-shop-modal .bs-pack:hover {
  background: rgba(255,215,0,0.12); border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255,215,0,0.25);
}
#coins-shop-modal .bs-pack.buying { opacity: 0.55; cursor: wait; }
#coins-shop-modal .bs-pack-name {
  color: #ffd700; font-size: 14px; letter-spacing: 2px; font-weight: bold;
}
#coins-shop-modal .bs-pack-price {
  color: #fff; font-size: 22px; font-weight: bold; letter-spacing: 1px;
}
#coins-shop-modal .bs-pack-coins {
  color: #e0d090; font-size: 13px;
}
#coins-shop-modal .bs-pack-coins b { color: #fff; }
#coins-shop-modal .bs-pack-bonus {
  position: absolute; top: 6px; right: 6px;
  background: #ff1493; color: #fff; font-size: 10px; font-weight: bold;
  padding: 2px 6px; border-radius: 10px; letter-spacing: 1px;
}
#coins-shop-modal .bs-status {
  color: #ffc07a; font-family: monospace; font-size: 12px; min-height: 16px; text-align: center;
}
#coins-shop-modal .bs-status.err { color: #ff5555; }
#coins-shop-modal .bs-status.ok  { color: #7bff55; }
#coins-shop-modal .bs-note {
  color: #667; font-family: monospace; font-size: 10px; text-align: center; letter-spacing: 1px;
}
#coins-shop-modal .bs-disabled {
  color: #c6b484; font-family: monospace; font-size: 13px; text-align: center;
  padding: 18px; border: 1px dashed rgba(255,215,0,0.3); border-radius: 8px;
  background: rgba(255,215,0,0.03);
}

/* --- SHOOT THE STARS: handle-picker modal --- */
#stars-picker-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.88); z-index: 9290;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#stars-picker-modal.visible { display: flex; }
#stars-picker-modal .sp-card {
  background: linear-gradient(180deg, #0e0a02 0%, #1e1406 100%);
  border: 2px solid #ffd54a;
  border-radius: 14px;
  max-width: 720px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,213,74,0.3), 0 0 20px rgba(255,255,255,0.08);
  margin: auto;
}
#stars-picker-modal .sp-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #888; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
#stars-picker-modal .sp-close:hover { color: #fff; }
#stars-picker-modal h3 {
  color: #ffd54a; font-family: monospace; font-size: 20px; margin: 0 40px 0 0;
  letter-spacing: 3px; text-shadow: 0 0 14px rgba(255,213,74,0.5);
}
#stars-picker-modal .sp-sub {
  color: #c6b484; font-family: monospace; font-size: 12px; margin-top: -4px;
}
#stars-picker-modal .sp-section-title {
  color: #ffea87; font-family: monospace; font-size: 12px; letter-spacing: 2px;
  margin-top: 12px; margin-bottom: 4px; opacity: 0.85;
}
#stars-picker-modal .sp-section-note {
  color: #c6b484; font-size: 10px; letter-spacing: 1px;
  text-transform: none; opacity: 0.75; margin-left: 6px;
}
#stars-picker-modal .sp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
#stars-picker-modal .sp-card-handle {
  background: rgba(255,213,74,0.05); border: 1px solid rgba(255,213,74,0.3);
  border-radius: 10px; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-family: monospace; cursor: pointer; transition: all 0.15s;
  text-align: center; min-height: 110px; justify-content: center;
}
#stars-picker-modal .sp-card-handle:hover {
  background: rgba(255,213,74,0.15); border-color: #ffd54a;
  box-shadow: 0 0 14px rgba(255,213,74,0.3);
}
#stars-picker-modal .sp-card-handle.loading { opacity: 0.5; cursor: wait; }
#stars-picker-modal .sp-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #241806;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #ffd54a; border: 1px solid rgba(255,213,74,0.4);
  overflow: hidden;
}
#stars-picker-modal .sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
#stars-picker-modal .sp-handle-name {
  color: #ffea87; font-size: 11px; letter-spacing: 1px; font-weight: bold;
  word-break: break-all;
}
#stars-picker-modal .sp-handle-meta {
  color: #9a7e3a; font-size: 10px; letter-spacing: 0.5px;
}
#stars-picker-modal .sp-handle-err {
  color: #ff8866; font-size: 10px; letter-spacing: 0.5px;
}
#stars-picker-modal .sp-custom-row {
  display: flex; gap: 8px; margin-top: 4px;
}
#stars-picker-modal .sp-custom-row input[type=text] {
  flex: 1; background: #0a0f1e; border: 1px solid rgba(255,213,74,0.3);
  color: #fff; font-family: monospace; font-size: 13px; padding: 8px 10px;
  border-radius: 6px; outline: none;
}
#stars-picker-modal .sp-custom-row input[type=text]:focus { border-color: #ffd54a; }
#stars-picker-modal .sp-custom-row button {
  background: linear-gradient(135deg, #ffd54a, #ff9500); color: #2a1a00;
  border: none; font-family: monospace; font-weight: bold; letter-spacing: 2px;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
#stars-picker-modal .sp-custom-row button:hover { filter: brightness(1.1); }
#stars-picker-modal .sp-custom-row button:disabled { opacity: 0.6; cursor: wait; }
#stars-picker-modal .sp-status {
  color: #ffc07a; font-family: monospace; font-size: 11px; min-height: 14px; text-align: center;
}
#stars-picker-modal .sp-status.err { color: #ff5555; }

/* --- Custom-only mode (BLAST A CUSTOM HANDLE button) ---
   Hides the PRESET STARS section (title + grid) so the modal focuses
   on the @handle input + recent-handles row. The full SHOOTING STARS
   picker is unaffected (it never gets the .custom-only class). */
#stars-picker-modal.custom-only .sp-section-title:not(.sp-any-title),
#stars-picker-modal.custom-only #sp-presets { display: none; }

/* Recent custom handles row (only shown in custom-only mode). */
#stars-picker-modal .sp-recent-row {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
#stars-picker-modal .sp-recent-label {
  color: #00eeff; font-family: monospace; font-size: 10px;
  letter-spacing: 2px; opacity: 0.8;
}
#stars-picker-modal .sp-recent-empty {
  color: #6a7a8a; font-family: monospace; font-size: 11px;
  font-style: italic; padding: 2px 0;
}
#stars-picker-modal .sp-recent-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
#stars-picker-modal .sp-recent-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid #00eeff; border-radius: 999px;
  background: rgba(0,238,255,0.06);
  overflow: hidden;
}
#stars-picker-modal .sp-recent-go {
  background: transparent; border: none; color: #00eeff;
  font-family: monospace; font-size: 11px; letter-spacing: 0.5px;
  padding: 4px 10px; cursor: pointer;
}
#stars-picker-modal .sp-recent-go:hover { background: rgba(0,238,255,0.15); color: #fff; }
#stars-picker-modal .sp-recent-x {
  background: transparent; border: none; border-left: 1px solid rgba(0,238,255,0.4);
  color: #88aab8; font-family: monospace; font-size: 11px;
  padding: 4px 8px; cursor: pointer; line-height: 1;
}
#stars-picker-modal .sp-recent-x:hover { color: #ff5555; background: rgba(255,85,85,0.1); }

/* === PODCAST BLASTAR === — picker modal
   Same visual language as the stars-picker but with an orange palette so
   the source-tag color (also orange) matches the launcher chrome. */
#podcast-picker-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(8,4,2,0.88); z-index: 9290;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#podcast-picker-modal.visible { display: flex; }
#podcast-picker-modal .pp-card {
  background: linear-gradient(180deg, #14060a 0%, #20100a 100%);
  border: 2px solid #ff8a3a;
  border-radius: 14px;
  max-width: 760px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,138,58,0.32), 0 0 20px rgba(255,255,255,0.06);
  margin: auto;
}
#podcast-picker-modal .pp-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #886; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
#podcast-picker-modal .pp-close:hover { color: #fff; }
#podcast-picker-modal h3 {
  color: #ff8a3a; font-family: monospace; font-size: 20px; margin: 0 40px 0 0;
  letter-spacing: 3px; text-shadow: 0 0 14px rgba(255,138,58,0.55);
}
#podcast-picker-modal .pp-sub {
  color: #c8a48a; font-family: monospace; font-size: 12px; margin-top: -4px;
  line-height: 1.4;
}
#podcast-picker-modal .pp-section-title {
  color: #ffb37a; font-family: monospace; font-size: 12px; letter-spacing: 2px;
  margin-top: 12px; margin-bottom: 4px; opacity: 0.92;
}
#podcast-picker-modal .pp-section-note {
  color: #b89270; font-size: 10px; letter-spacing: 1px;
  text-transform: none; opacity: 0.78; margin-left: 6px;
}
#podcast-picker-modal .pp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  max-height: 360px; overflow-y: auto;
}
#podcast-picker-modal .pp-card[data-id] {
  background: rgba(255,138,58,0.06); border: 1px solid rgba(255,138,58,0.3);
  border-radius: 10px; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-family: monospace; cursor: pointer; transition: all 0.15s;
  text-align: center; min-height: 150px; justify-content: flex-start;
  color: #ffd0a0; font-size: 12px;
}
#podcast-picker-modal button.pp-card[data-id]:hover {
  background: rgba(255,138,58,0.15); border-color: #ff8a3a;
  box-shadow: 0 0 14px rgba(255,138,58,0.32);
}
#podcast-picker-modal .pp-card-err {
  background: rgba(80,40,30,0.4); border: 1px dashed rgba(255,100,80,0.3);
  border-radius: 10px; padding: 10px 8px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-family: monospace; opacity: 0.6;
  text-align: center; min-height: 110px; justify-content: center;
  color: #ffb09a; font-size: 11px;
}
#podcast-picker-modal .pp-art {
  width: 64px; height: 64px; border-radius: 8px; background: #1a0a06;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: #ff8a3a; border: 1px solid rgba(255,138,58,0.4);
  overflow: hidden; flex-shrink: 0;
}
#podcast-picker-modal .pp-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
#podcast-picker-modal .pp-art-fallback { background: rgba(255,138,58,0.1); }
#podcast-picker-modal .pp-name {
  color: #ffd6a8; font-size: 12px; letter-spacing: 0.5px; font-weight: bold;
  word-break: break-word; line-height: 1.2;
}
#podcast-picker-modal .pp-ep-title {
  color: #b88e6a; font-size: 10px; letter-spacing: 0.3px;
  word-break: break-word; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#podcast-picker-modal .pp-ep-meta {
  color: #8a6a4a; font-size: 9.5px; letter-spacing: 0.5px;
  margin-top: 2px;
}
#podcast-picker-modal .pp-meta-err {
  color: #ff8866; font-size: 10px; letter-spacing: 0.5px;
}
#podcast-picker-modal .pp-loading {
  color: #b88e6a; font-family: monospace; font-size: 12px;
  text-align: center; padding: 18px; opacity: 0.85;
  grid-column: 1 / -1;
}
#podcast-picker-modal .pp-empty {
  color: #c89870; font-family: monospace; font-size: 12px;
  text-align: center; padding: 18px;
  grid-column: 1 / -1;
  font-style: italic;
}
#podcast-picker-modal .pp-search-row {
  display: flex; gap: 8px; margin-top: 4px;
}
#podcast-picker-modal .pp-search-row input[type=text] {
  flex: 1; background: #0e0604; border: 1px solid rgba(255,138,58,0.3);
  color: #fff; font-family: monospace; font-size: 13px; padding: 8px 10px;
  border-radius: 6px; outline: none;
}
#podcast-picker-modal .pp-search-row input[type=text]:focus { border-color: #ff8a3a; }
#podcast-picker-modal .pp-search-row button {
  background: linear-gradient(135deg, #ff8a3a, #ff5a00); color: #1a0a00;
  border: none; font-family: monospace; font-weight: bold; letter-spacing: 2px;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
#podcast-picker-modal .pp-search-row button:hover { filter: brightness(1.1); }
#podcast-picker-modal .pp-search-results {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 240px; overflow-y: auto;
}
#podcast-picker-modal .pp-search-row[data-id], #podcast-picker-modal button.pp-search-row {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  background: rgba(255,138,58,0.04); border: 1px solid rgba(255,138,58,0.18);
  border-radius: 8px; cursor: pointer; transition: all 0.12s;
  text-align: left; color: #ffd0a0; font-family: monospace;
}
#podcast-picker-modal button.pp-search-row:hover {
  background: rgba(255,138,58,0.12); border-color: rgba(255,138,58,0.5);
}
#podcast-picker-modal .pp-search-art {
  width: 40px; height: 40px; border-radius: 6px; flex-shrink: 0;
  border: 1px solid rgba(255,138,58,0.3); object-fit: cover; background: #1a0a06;
}
#podcast-picker-modal div.pp-search-art {
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #ff8a3a;
}
#podcast-picker-modal .pp-search-text {
  flex: 1; min-width: 0;
}
#podcast-picker-modal .pp-search-name {
  color: #ffd6a8; font-size: 13px; font-weight: bold;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#podcast-picker-modal .pp-search-artist {
  color: #b88e6a; font-size: 11px; opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#podcast-picker-modal .pp-disclaimer {
  color: #8a6a4a; font-family: monospace; font-size: 10px;
  letter-spacing: 0.3px; line-height: 1.4; opacity: 0.78;
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid rgba(255,138,58,0.15);
}
/* === END PODCAST BLASTAR === */

/* --- BLAST A CUSTOM POST modal ---
   Mirrors the stars-picker visual language but with a cyan/blue palette
   (this is a URL-paste flow, not a handle picker — distinct color cue). */
#custom-post-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.88); z-index: 9290;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#custom-post-modal.visible { display: flex; }
#custom-post-modal .cp-card {
  background: linear-gradient(180deg, #02090e 0%, #06141e 100%);
  border: 2px solid #00eeff;
  border-radius: 14px;
  max-width: 640px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(0,238,255,0.3), 0 0 20px rgba(0,255,255,0.08);
  margin: auto;
}
#custom-post-modal .cp-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #688; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
#custom-post-modal .cp-close:hover { color: #fff; }
#custom-post-modal h3 {
  color: #00eeff; font-family: monospace; font-size: 20px; margin: 0 40px 0 0;
  letter-spacing: 3px; text-shadow: 0 0 14px rgba(0,238,255,0.5);
}
#custom-post-modal .cp-sub {
  color: #88bccd; font-family: monospace; font-size: 12px; margin-top: -4px;
}
#custom-post-modal .cp-input-row {
  display: flex; gap: 8px; margin-top: 4px;
}
#custom-post-modal .cp-input-row input[type=url] {
  flex: 1; background: #06121a; border: 1px solid rgba(0,238,255,0.3);
  color: #fff; font-family: monospace; font-size: 13px; padding: 8px 10px;
  border-radius: 6px; outline: none;
}
#custom-post-modal .cp-input-row input[type=url]:focus { border-color: #00eeff; }
#custom-post-modal .cp-input-row button {
  background: linear-gradient(135deg, #00eeff, #0095ff); color: #002030;
  border: none; font-family: monospace; font-weight: bold; letter-spacing: 2px;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
#custom-post-modal .cp-input-row button:hover { filter: brightness(1.1); }
#custom-post-modal .cp-input-row button:disabled { opacity: 0.6; cursor: wait; }
#custom-post-modal .cp-status {
  color: #aac; font-family: monospace; font-size: 11px; min-height: 14px; text-align: center;
}
#custom-post-modal .cp-status.err { color: #ff5555; }
#custom-post-modal .cp-recent-row {
  display: flex; flex-direction: column; gap: 6px; margin-top: 4px;
}
#custom-post-modal .cp-recent-label {
  color: #00eeff; font-family: monospace; font-size: 10px;
  letter-spacing: 2px; opacity: 0.8;
}
#custom-post-modal .cp-recent-empty {
  color: #6a7a8a; font-family: monospace; font-size: 11px;
  font-style: italic; padding: 2px 0;
}
#custom-post-modal .cp-recent-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
#custom-post-modal .cp-recent-pill {
  display: inline-flex; align-items: stretch;
  border: 1px solid #00eeff; border-radius: 999px;
  background: rgba(0,238,255,0.06);
  overflow: hidden;
}
#custom-post-modal .cp-recent-go {
  background: transparent; border: none; color: #00eeff;
  font-family: monospace; font-size: 11px; letter-spacing: 0.5px;
  padding: 4px 10px; cursor: pointer; max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#custom-post-modal .cp-recent-go:hover { background: rgba(0,238,255,0.15); color: #fff; }
#custom-post-modal .cp-recent-x {
  background: transparent; border: none; border-left: 1px solid rgba(0,238,255,0.4);
  color: #88aab8; font-family: monospace; font-size: 11px;
  padding: 4px 8px; cursor: pointer; line-height: 1;
}
#custom-post-modal .cp-recent-x:hover { color: #ff5555; background: rgba(255,85,85,0.1); }

/* --- Paper Share Modal (arxiv-only) --- */
#paper-share-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.85); z-index: 9260;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#paper-share-modal.visible { display: flex; }
#paper-share-modal .psm-card {
  background: linear-gradient(180deg, #18060a 0%, #240a0e 100%);
  border: 2px solid #b31b1b;
  border-radius: 14px;
  max-width: 520px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  box-shadow: 0 0 60px rgba(179,27,27,0.35), 0 0 20px rgba(255,255,255,0.1);
  margin: auto;
}
#paper-share-modal .psm-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #888; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
#paper-share-modal .psm-close:hover { color: #fff; }
#paper-share-modal h3 {
  color: #ff5555; font-family: monospace; font-size: 18px; margin: 0 40px 0 0;
  letter-spacing: 2px;
}
#paper-share-modal .psm-meta {
  color: #8899a6; font-size: 12px; font-family: monospace;
  padding: 8px 10px; border-left: 2px solid #b31b1b; background: rgba(179,27,27,0.07);
  max-height: 90px; overflow-y: auto;
}
#paper-share-modal .psm-meta strong { color: #fff; }
#paper-share-modal .psm-textarea {
  background: #0f0a0c; border: 1px solid #3a1a1e; color: #e7e9ea;
  padding: 10px 12px; font-size: 13px; font-family: monospace; line-height: 1.4;
  border-radius: 6px; resize: vertical; min-height: 120px;
  box-sizing: border-box; width: 100%;
}
#paper-share-modal .psm-textarea:focus { outline: none; border-color: #ff5555; }
#paper-share-modal .psm-counter {
  color: #8899a6; font-family: monospace; font-size: 11px; text-align: right; margin-top: -4px;
}
#paper-share-modal .psm-counter.over { color: #ff5555; }
#paper-share-modal .psm-status { color: #ffc07a; font-family: monospace; font-size: 11px; min-height: 14px; }
#paper-share-modal .psm-status.ok { color: #7bff55; }
#paper-share-modal .psm-status.err { color: #ff5555; }
#paper-share-modal .psm-btns { display: flex; gap: 8px; }
#paper-share-modal .psm-btn {
  background: none; border: 2px solid #666; color: #ccc;
  padding: 10px 14px; font-size: 13px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 5px; transition: all 0.15s; flex: 1; text-align: center;
}
#paper-share-modal .psm-btn-post { border-color: #fff; color: #fff; }
#paper-share-modal .psm-btn-post:hover { background: #fff; color: #000; }
#paper-share-modal .psm-btn-post.posting { opacity: 0.6; cursor: wait; }
#paper-share-modal .psm-btn-cancel { border-color: #555; color: #999; flex: 0 0 auto; padding-left: 20px; padding-right: 20px; }
#paper-share-modal .psm-btn-cancel:hover { background: #333; color: #fff; }
#paper-share-modal .psm-note { color: #556; font-size: 10px; font-family: monospace; text-align: center; }

/* Hide share-paper bar button except when an arxiv post is active */
#hn-bar #btn-share-paper { display: none; }
#hn-bar.arxiv-active #btn-share-paper { display: flex; }

/* Endscreen / Highscore Card modal (Feature 3) */
/* Comment Gun modal */
#comment-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.85); z-index: 9250;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#comment-modal.visible { display: flex; }
#comment-modal .cm-card {
  background: linear-gradient(180deg, #0a0f1e 0%, #0a1a24 100%);
  border: 2px solid #00eeff;
  border-radius: 14px;
  max-width: 520px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(0,238,255,0.35), 0 0 20px rgba(255,255,255,0.12);
  margin: auto;
}
#comment-modal .cm-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #888; font-size: 26px; cursor: pointer; font-family: monospace;
  line-height: 1; padding: 4px 8px; z-index: 2;
}
#comment-modal .cm-close:hover { color: #fff; }
#comment-modal h3 {
  color: #00eeff; font-family: monospace; font-size: 18px; margin: 0;
  letter-spacing: 2px; text-align: center;
  text-shadow: 0 0 18px rgba(0,238,255,0.6);
}
#comment-modal .cm-meta {
  color: #aaa; font-family: monospace; font-size: 12px; text-align: center;
}
#comment-modal .cm-post-preview {
  background: #0f1a2e; border: 1px solid #2a3f55;
  border-radius: 6px; padding: 10px 12px;
  color: #cfd3d8; font-family: monospace; font-size: 12px;
  max-height: 110px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
#comment-modal .cm-textarea {
  background: #0f1a2e; border: 1px solid #2a3f55; color: #e0e0e0;
  padding: 10px 12px; font-size: 13px; font-family: monospace; border-radius: 6px;
  resize: vertical; width: 100%; box-sizing: border-box; min-height: 80px;
}
#comment-modal .cm-textarea:focus { outline: none; border-color: #00eeff; }
#comment-modal .cm-status {
  min-height: 16px; color: #e94560; font-family: monospace; font-size: 12px;
  text-align: center;
}
#comment-modal .cm-status.ok { color: #00ff88; }
#comment-modal .cm-status.err { color: #e94560; }
#comment-modal .cm-status a { color: #00eeff; text-decoration: underline; }
#comment-modal .cm-btns { display: flex; flex-direction: row; gap: 10px; }
#comment-modal .cm-btn-post,
#comment-modal .cm-btn-cancel {
  flex: 1;
  background: none; padding: 14px 16px;
  font-size: 14px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 6px; transition: all 0.15s;
  letter-spacing: 1px; min-height: 44px;
}
#comment-modal .cm-btn-post {
  border: 2px solid #00eeff; color: #00eeff;
  background: rgba(0,238,255,0.08);
  box-shadow: 0 0 18px rgba(0,238,255,0.28);
}
#comment-modal .cm-btn-post:not(:disabled):hover { background: #00eeff; color: #000; }
#comment-modal .cm-btn-post:disabled { opacity: 0.55; cursor: wait; }
#comment-modal .cm-btn-cancel { border: 2px solid #555; color: #aaa; }
#comment-modal .cm-btn-cancel:hover { background: #333; color: #fff; }
@media (max-width: 500px) {
  #comment-modal .cm-card { padding: 16px; border-radius: 10px; }
  #comment-modal h3 { font-size: 15px; }
  #comment-modal .cm-btns { flex-direction: column; }
}

#endscreen-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.85); z-index: 9200;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#endscreen-modal.visible { display: flex; }
#endscreen-modal .es-card {
  background: linear-gradient(180deg, #0a0f1e 0%, #120a24 100%);
  border: 2px solid #ffd700;
  border-radius: 14px;
  max-width: 560px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,215,0,0.35), 0 0 20px rgba(0,238,255,0.25);
  margin: auto;
}
#endscreen-modal .es-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #888; font-size: 26px; cursor: pointer; font-family: monospace;
  line-height: 1; padding: 4px 8px; z-index: 2;
}
#endscreen-modal .es-close:hover { color: #fff; }
#endscreen-modal h2 {
  color: #ffd700; font-family: monospace; font-size: 22px; margin: 0;
  letter-spacing: 2px; text-align: center;
  text-shadow: 0 0 18px rgba(255,215,0,0.6);
}
#endscreen-modal .es-preview-wrap {
  position: relative;
  width: 100%;
  display: flex; justify-content: center; align-items: center;
  background: #000; border-radius: 8px;
  padding: 8px;
  border: 1px solid rgba(0,238,255,0.35);
}
#endscreen-modal #endscreen-preview {
  width: 85vw; max-width: 420px; height: auto; aspect-ratio: 1 / 1;
  border-radius: 6px;
  image-rendering: auto;
  transition: opacity 0.25s;
}
#endscreen-modal .es-spinner {
  position: absolute; color: #00eeff; font-family: monospace; font-size: 13px;
  letter-spacing: 2px; animation: esPulse 1.2s ease-in-out infinite;
}
@keyframes esPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
#endscreen-modal #endscreen-tweet {
  background: #0f1a2e; border: 1px solid #2a3f55; color: #e0e0e0;
  padding: 10px 12px; font-size: 12px; font-family: monospace; border-radius: 6px;
  resize: vertical; width: 100%; box-sizing: border-box; min-height: 70px;
}
#endscreen-modal #endscreen-tweet:focus { outline: none; border-color: #ffd700; }
#endscreen-modal .es-status {
  min-height: 16px; color: #e94560; font-family: monospace; font-size: 12px;
  text-align: center;
}
#endscreen-modal .es-btns { display: flex; flex-direction: column; gap: 10px; }
#endscreen-modal .es-btn {
  background: none; border: 2px solid #888; color: #ddd;
  padding: 14px 16px; font-size: 14px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 6px; transition: all 0.15s; text-align: center;
  letter-spacing: 1px; min-height: 44px;
}
#endscreen-modal .es-btn:not(:disabled):hover { transform: translateY(-1px); }
#endscreen-modal .es-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#endscreen-modal .es-btn-x {
  border-color: #00eeff; color: #00eeff; font-size: 16px;
  background: rgba(0,238,255,0.08);
  box-shadow: 0 0 18px rgba(0,238,255,0.28);
}
#endscreen-modal .es-btn-x:not(:disabled):hover { background: #00eeff; color: #000; }
#endscreen-modal .es-btn-x.posting { opacity: 0.7; cursor: wait; }
#endscreen-modal .es-x-sub {
  color: #7a8ba8; font-family: monospace; font-size: 11px;
  text-align: center; margin-top: -4px;
}
#endscreen-modal .es-btn-share { border-color: #4488ff; color: #4488ff; }
#endscreen-modal .es-btn-share:hover { background: #4488ff; color: #fff; }
#endscreen-modal .es-btn-save { border-color: #ffd700; color: #ffd700; }
#endscreen-modal .es-btn-save:hover { background: #ffd700; color: #000; }
#endscreen-modal .es-btn-back { border-color: #555; color: #999; font-size: 12px; padding: 10px 14px; }
#endscreen-modal .es-btn-back:hover { background: #333; color: #fff; }
@media (max-width: 500px) {
  #endscreen-modal .es-card { padding: 16px; border-radius: 10px; }
  #endscreen-modal h2 { font-size: 18px; }
  #endscreen-modal .es-btn { padding: 12px 10px; font-size: 13px; }
  #endscreen-modal .es-btn-x { font-size: 14px; }
}

/* Peek card — small floating share hint top-right */
#kill-peek {
  display: none; position: fixed; top: 230px; right: 14px; z-index: 8850;
  width: 280px; background: rgba(10,15,30,0.92); border: 1px solid #00eeff;
  border-radius: 8px; padding: 10px 12px; color: #e0e0e0;
  font-family: monospace; font-size: 12px;
  box-shadow: 0 4px 20px rgba(0,238,255,0.2);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0; transform: translateX(12px);
  pointer-events: none;
}
#kill-peek.visible { display: block; opacity: 1; transform: translateX(0); pointer-events: auto; }
#kill-peek.pulse { animation: peekPulse 0.6s ease-out 2; }
@keyframes peekPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,238,255,0.2); }
  50% { box-shadow: 0 4px 30px rgba(0,238,255,0.6); }
}
#kill-peek .kp-close {
  position: absolute; top: 4px; right: 6px;
  background: transparent; border: 0;
  color: #667; font-size: 18px; line-height: 1;
  padding: 2px 6px; cursor: pointer;
  font-family: inherit;
}
#kill-peek .kp-close:hover { color: #fff; }
#kill-peek .kp-header { color: #00eeff; font-weight: bold; font-size: 12px; margin-bottom: 6px; padding-right: 18px; }
#kill-peek .kp-meta { color: #7a8ba8; font-size: 10px; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kill-peek .kp-btns { display: flex; gap: 4px; }
#kill-peek .kp-btns button {
  flex: 1; background: rgba(0,0,0,0.4); border: 1px solid #3a4a5f;
  color: #ddd; padding: 6px 4px; font-size: 14px; border-radius: 4px; cursor: pointer;
  transition: all 0.12s;
}
#kill-peek .kp-btns button:hover { background: #00eeff; color: #000; border-color: #00eeff; }
#kill-peek .kp-btns button.kp-skip { font-size: 11px; color: #666; }
#kill-peek .kp-btns button.kp-skip:hover { background: #333; color: #fff; border-color: #555; }
#kill-peek .kp-hint { display: none; font-size: 11px; color: #00eeff; margin-bottom: 6px; animation: kpHintBlink 1s steps(2) infinite; text-align: center; }
#kill-peek .kp-hint.visible { display: block; }
#kill-peek .kp-hint kbd { background: #00eeff; color: #000; padding: 1px 5px; border-radius: 3px; font-weight: bold; font-size: 10px; }
@keyframes kpHintBlink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0.35; } }

/* Killer mode HUD */
#killer-hud {
  display: none; position: fixed; top: 10px; right: 14px; z-index: 5100;
  font-family: monospace; color: #ff4466; font-size: 13px; text-align: right;
  pointer-events: none; text-shadow: 0 0 8px rgba(255,68,102,0.5);
}
#killer-hud.visible { display: block; }
#killer-hud .kh-hearts { font-size: 20px; letter-spacing: 2px; }
#killer-hud .kh-wave { font-size: 11px; color: #ffd700; margin-top: 2px; }

/* Game Over overlay (killer mode) */
#killer-gameover {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,15,0.92); z-index: 8900;
  align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#killer-gameover.visible { display: flex; }
#killer-gameover .ko-card {
  background: #0a0f1e; border: 3px solid #ff4466; border-radius: 12px;
  max-width: 500px; width: 100%; padding: 20px; text-align: center;
  font-family: monospace; color: #e0e0e0;
  box-shadow: 0 0 60px rgba(255,68,102,0.4);
  max-height: 92vh; overflow-y: auto;
}
#killer-gameover h2 {
  color: #ff4466; font-size: 28px; margin: 0 0 8px; letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255,68,102,0.6);
}
#killer-gameover .ko-total { color: #00eeff; font-size: 18px; margin: 6px 0 4px; }
#killer-gameover .ko-preview-wrap {
  position: relative;
  display: inline-flex; justify-content: center; align-items: center;
  background: #000; border: 2px solid #00eeff; border-radius: 8px;
  padding: 6px; margin: 12px auto;
  box-shadow: 0 0 20px rgba(0,238,255,0.25);
}
#killer-gameover #ko-preview {
  display: block; width: 100%; max-width: 380px; height: auto;
  aspect-ratio: 1 / 1; image-rendering: auto; border-radius: 4px;
}
#killer-gameover .ko-spinner {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #7a8ba8; font: 13px monospace; letter-spacing: 1px;
  animation: koSpin 1.2s ease-in-out infinite;
}
@keyframes koSpin {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
#killer-gameover #ko-tweet {
  width: 100%; box-sizing: border-box;
  background: #0d1521; color: #e4e8f0; border: 1px solid #2a3a52;
  border-radius: 6px; padding: 8px; font: 12px monospace; resize: none;
  margin: 6px 0;
}
#killer-gameover #ko-tweet:focus { outline: none; border-color: #ffd700; }
#killer-gameover .ko-status {
  font-size: 11px; text-align: center; color: #ff6688;
  margin: 4px 0; min-height: 14px;
}
#killer-gameover .ko-btns { display: flex; flex-direction: column; gap: 4px; }
#killer-gameover .ko-btn-x {
  width: 100%; padding: 14px; background: transparent;
  border: 2px solid #00eeff; color: #00eeff;
  font: bold 14px monospace; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.15s;
  box-shadow: 0 0 18px rgba(0,238,255,0.28);
}
#killer-gameover .ko-btn-x:disabled { opacity: 0.45; cursor: not-allowed; }
#killer-gameover .ko-btn-x:not(:disabled):hover { background: #00eeff; color: #000; }
#killer-gameover .ko-btn-x.posting { opacity: 0.7; cursor: wait; }
#killer-gameover .ko-x-sub {
  font-size: 10px; color: #7a8ba8; text-align: center; margin: 4px 0;
}
#killer-gameover .ko-stats-row {
  display: flex; justify-content: space-around;
  font: 11px monospace; color: #7a8ba8;
  margin: 12px 0 10px; flex-wrap: wrap; gap: 8px;
}
#killer-gameover .ko-stats-row b { color: #ffd700; margin-left: 4px; }
#killer-gameover .ko-btns-secondary {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
#killer-gameover .ko-btns-secondary button {
  background: none; border: 2px solid #ff4466; color: #ff4466;
  padding: 10px 18px; font-size: 13px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 5px; transition: all 0.15s;
}
#killer-gameover .ko-btns-secondary button:hover { background: #ff4466; color: #fff; }
#killer-gameover .ko-btns-secondary .ko-sec {
  padding: 8px 12px; font-size: 12px; background: transparent;
  border: 1px solid #4488ff; color: #4488ff; border-radius: 5px;
}
#killer-gameover .ko-btns-secondary .ko-sec:hover { background: #4488ff; color: #fff; }
#killer-gameover .ko-btns-secondary .ko-quit { border-color: #555; color: #888; }
#killer-gameover .ko-btns-secondary .ko-quit:hover { background: #333; color: #fff; }
#killer-gameover .ko-fullrec {
  display: block; margin: 12px auto 0; width: 100%; max-width: 440px;
  background: none; border: 2px solid #ffd700; color: #ffd700;
  padding: 12px 18px; font-size: 13px; font-family: monospace; font-weight: bold;
  letter-spacing: 1px; cursor: pointer; border-radius: 5px; transition: all 0.15s;
}
#killer-gameover .ko-fullrec:hover:not(:disabled) { background: #ffd700; color: #000; }
#killer-gameover .ko-fullrec:disabled { opacity: 0.55; cursor: default; border-color: #5a5; color: #5a5; }
#endscreen-modal .es-btn-fullrec { border-color: #ffd700; color: #ffd700; grid-column: 1 / -1; }
#endscreen-modal .es-btn-fullrec:not(:disabled):hover { background: #ffd700; color: #000; }
#endscreen-modal .es-btn-fullrec:disabled { opacity: 0.55; cursor: default; border-color: #5a5; color: #5a5; }
@media (max-width: 500px) {
  #killer-gameover .ko-card { padding: 12px; }
  #killer-gameover #ko-preview { max-width: 320px; }
  #killer-gameover .ko-btn-x { font-size: 12px; padding: 12px; }
}

/* Mode tabs on title screen load-overlay — arcade cabinet look */
#mode-tabs {
  display: flex; gap: 0; margin-bottom: 4px; border-radius: 4px; overflow: hidden;
  border: 1px solid #2a3f55; background: linear-gradient(180deg, #0a1224, #050914);
  width: 100%; max-width: 440px;
  box-shadow: 0 0 0 1px rgba(0,221,255,0.08) inset, 0 0 14px rgba(0,221,255,0.12);
}
#mode-tabs button {
  flex: 1; background: none; border: none; color: #556677;
  padding: 11px 14px; font-size: 13px; font-family: monospace; font-weight: bold;
  cursor: pointer; transition: all 0.15s; letter-spacing: 2px;
  position: relative;
}
#mode-tabs button::before {
  content: "\25CF"; display: inline-block; margin-right: 8px; font-size: 9px;
  color: #222; vertical-align: middle; transform: translateY(-1px);
  text-shadow: none; transition: all 0.15s;
}
#mode-tabs button.active {
  background: linear-gradient(180deg, #1a3a6e, #0f2040);
  color: #00ddff; text-shadow: 0 0 8px rgba(0,221,255,0.7);
}
#mode-tabs button.active::before {
  color: #00ddff; text-shadow: 0 0 6px #00ddff, 0 0 12px #00ddff;
  animation: ledPulse 1.6s ease-in-out infinite;
}
#mode-tabs button.active.killer {
  background: linear-gradient(180deg, #4a1820, #2a0810);
  color: #ff4466; text-shadow: 0 0 10px rgba(255,68,102,0.7);
}
#mode-tabs button.active.killer::before {
  color: #ff4466; text-shadow: 0 0 6px #ff4466, 0 0 12px #ff4466;
}
#mode-tabs button:hover:not(.active) { color: #aac; background: rgba(255,255,255,0.04); }
@keyframes ledPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

#mode-sub {
  color: #7a8ba8; font-size: 11px; font-family: monospace; text-align: center;
  margin: 2px 0 4px; max-width: 440px; width: 100%; letter-spacing: 0.5px;
}
.mode-badge {
  display: inline-block; margin-left: 6px; font-size: 12px;
  color: #ff4466; vertical-align: middle;
}

/* CRT scanlines + vignette — subtle arcade atmosphere on title screen */
#crt-fx {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 5500; pointer-events: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.18) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,0.55) 100%
    );
  mix-blend-mode: multiply;
}
#crt-fx.visible { display: block; }

/* Reconnect X banner */
.x-reconnect-banner {
  background: rgba(255,68,102,0.12); border: 1px solid #ff4466; color: #ff7aa0;
  padding: 10px 14px; border-radius: 6px; font-size: 12px; font-family: monospace;
  margin-bottom: 8px; text-align: center; max-width: 500px; width: 100%;
}
.x-reconnect-banner button {
  background: none; border: 1px solid #ff4466; color: #ff4466;
  padding: 6px 14px; font-size: 12px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; margin-left: 8px; transition: all 0.15s;
}
.x-reconnect-banner button:hover { background: #ff4466; color: #fff; }

/* Three-way segmented selector for autosave popup mode */
.pm-seg3 { display: inline-flex; border: 1px solid #2a3f55; border-radius: 4px; overflow: hidden; }
.pm-seg3 button {
  background: none; border: none; color: #7a8ba8;
  padding: 6px 10px; font-size: 11px; font-family: monospace; font-weight: bold;
  cursor: pointer; transition: all 0.15s; border-right: 1px solid #2a3f55;
}
.pm-seg3 button:last-child { border-right: none; }
.pm-seg3 button.active { background: #1a3a6e; color: #fff; }
.pm-seg3 button:hover:not(.active) { background: rgba(255,255,255,0.04); color: #ddd; }

/* HN action bar - minimal icons during gameplay */
#hn-bar {
  display: none; position: fixed; bottom: 12px; right: 12px; z-index: 5500;
  flex-direction: row; gap: 8px; align-items: center;
}
#hn-bar.visible { display: flex; }
#hn-bar button {
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 22px; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
#hn-bar button:active { transform: scale(0.9); background: rgba(255,255,255,0.15); }
#hn-bar .hn-toast {
  background: rgba(0,0,0,0.7); border: 1px solid #0f8; color: #0f8;
  font-family: monospace; font-size: 11px; padding: 4px 10px; border-radius: 12px;
  pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
#hn-bar .hn-toast.visible { opacity: 1; }

/* Music toggle button */
#btn-music {
  position: fixed; top: 10px; left: 48px; z-index: 9999;
  font-size: 22px; cursor: pointer; opacity: 0.75;
  background: none; border: none; padding: 0 2px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s, filter 0.15s;
}
#btn-music:hover { opacity: 1; }
#btn-music.muted { filter: grayscale(1) brightness(0.7); opacity: 0.45; }
#btn-music.muted::after {
  content: "🔇"; position: absolute; right: -9px; bottom: -4px; font-size: 11px;
  filter: none;
}

/* Music Menu popup */
#music-menu {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 9900; background: rgba(5,5,16,0.25);
  align-items: flex-start; justify-content: flex-start; padding: 48px 0 0 16px;
}
#music-menu.visible { display: flex; }
#music-menu .mm-card {
  width: 260px; background: linear-gradient(180deg, #0a0f1e 0%, #0a1a24 100%);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; padding: 12px 12px 10px 12px;
  font-family: monospace; color: #e7e9ea;
  box-shadow: 0 0 24px rgba(0,0,0,0.6), 0 0 12px rgba(0,238,255,0.12);
  display: flex; flex-direction: column; gap: 6px;
}
#music-menu .mm-head {
  color: #ffd700; font-size: 13px; letter-spacing: 3px; padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 2px;
}
#music-menu .mm-sub { color: #8899a6; font-size: 10px; letter-spacing: 1px; }
#music-menu .mm-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 2px 0; }
#music-menu .mm-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; padding: 4px 0; cursor: pointer; user-select: none;
}
#music-menu .mm-row input[type=checkbox] { accent-color: #00eeff; cursor: pointer; }
#music-menu .mm-mute-row { border-bottom: 1px dashed rgba(255,255,255,0.08); padding-bottom: 6px; }
#music-menu .mm-tracks { display: flex; flex-direction: column; gap: 0; max-height: 220px; overflow-y: auto; }
#music-menu .mm-label { flex: 1; color: #ddd; font-size: 12px; }
#music-menu .mm-row.mm-current .mm-label { color: #00eeff; font-weight: bold; }
#music-menu .mm-play {
  background: none; border: 1px solid #334; color: #aab; padding: 2px 6px;
  font-size: 10px; font-family: monospace; border-radius: 3px; cursor: pointer;
  transition: all 0.12s;
}
#music-menu .mm-play:hover { background: #00eeff; color: #000; border-color: #00eeff; }
#music-menu .mm-now {
  color: #7a8ba8; font-size: 10px; letter-spacing: 1px; padding: 4px 0 2px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
#music-menu .mm-btn-row { display: flex; gap: 6px; margin-top: 4px; }
#music-menu .mm-skip, #music-menu .mm-close-btn {
  flex: 1; background: none; border: 1px solid #556; color: #aab;
  padding: 6px 8px; font-size: 11px; font-family: monospace; letter-spacing: 1px;
  border-radius: 4px; cursor: pointer; transition: all 0.12s;
}
#music-menu .mm-skip:hover { background: #ffd700; color: #000; border-color: #ffd700; }
#music-menu .mm-close-btn:hover { background: #555; color: #fff; }

/* Player menu button */
#btn-player-menu {
  display: none; position: fixed; top: 80px; right: 14px; z-index: 6500;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 20px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
#btn-player-menu.visible { display: flex; }
#btn-player-menu:hover { background: rgba(255,255,255,0.15); }
#btn-player-menu:active { transform: scale(0.92); }

/* Help button — top-right column, below player menu + post-link */
#btn-help {
  display: none; position: fixed; top: 180px; right: 14px; z-index: 6500;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
#btn-help.visible { display: flex; }
#btn-help:hover { background: rgba(255,255,255,0.15); }
#btn-help:active { transform: scale(0.92); }

/* Pause button — top-right column, below help */
#btn-pause {
  display: none; position: fixed; top: 230px; right: 14px; z-index: 6500;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 18px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
#btn-pause.visible { display: flex; }
#btn-pause:hover { background: rgba(255,255,255,0.15); }
#btn-pause:active { transform: scale(0.92); }
#btn-pause.paused { background: rgba(255,215,0,0.22); border-color: #ffd700; color: #ffd700; }

/* Leaderboard + Hall of Fame sections (Player Menu) */
.lb-section, .hof-section {
  border: 1px solid #2a3f55; border-radius: 6px; padding: 6px 10px 10px;
  background: rgba(10,15,30,0.35); margin: 4px 0 10px;
}
.lb-section .lb-title, .hof-section .hof-title {
  color: #ffd700; font-size: 14px; letter-spacing: 1px; margin: 0 0 2px;
  border-bottom: none; padding-bottom: 4px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.lb-section .lb-title:hover, .hof-section .hof-title:hover { color: #fff3a0; }
.lb-caret, .hof-caret { display: inline-block; width: 12px; transition: transform 0.15s; color: #ffd700; font-size: 11px; }
.lb-section.open .lb-caret, .hof-section.open .hof-caret { transform: rotate(90deg); }
.lb-body, .hof-body { display: none; padding-top: 4px; max-height: 40vh; overflow-y: auto; }
.lb-section.open .lb-body, .hof-section.open .hof-body { display: block; }
.lb-tabs { display: flex; gap: 4px; margin: 6px 0 8px; }
.lb-tabs button {
  flex: 1; background: none; border: 1px solid #2a3f55; color: #7a8ba8;
  padding: 6px 8px; font-size: 11px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s; letter-spacing: 1px;
}
.lb-tabs button.active { background: #ffd700; color: #000; border-color: #ffd700; }
.lb-tabs button:hover:not(.active) { border-color: #ffd700; color: #ffd700; }
.lb-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center;
  padding: 5px 6px; border-bottom: 1px solid #111828; font-size: 12px;
  font-family: monospace;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.mine { background: rgba(255,215,0,0.12); border-radius: 4px; }
.lb-rank { color: #7a8ba8; font-weight: bold; }
.lb-name { color: #e0e0e0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #ffd700; font-weight: bold; }
.lb-meta { color: #556; font-size: 10px; margin-left: 4px; }
.lb-loading, .hof-loading, .lb-empty, .hof-empty {
  color: #555; font-size: 12px; padding: 16px 8px; font-style: italic;
  text-align: center;
}
.hof-note {
  color: #7a8ba8; font-size: 11px; font-style: italic;
  padding: 4px 0 8px; border-bottom: 1px dashed #2a3f55; margin-bottom: 6px;
}
.hof-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px; border-bottom: 1px solid #111828;
  font-size: 12px; font-family: monospace;
}
.hof-row:last-child { border-bottom: none; }
.hof-row .hof-pair { color: #e0e0e0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-row .hof-pair strong { color: #4488ff; }
.hof-row a {
  color: #00eeff; text-decoration: none; font-size: 11px; padding: 3px 8px;
  border: 1px solid #00eeff; border-radius: 3px; margin-left: 6px;
  flex-shrink: 0;
}
.hof-row a:hover { background: #00eeff; color: #000; }

/* Title-screen bottom ticker — disabled */
#title-ticker { display: none !important; }
/* Tooltip to the left of the button on hover */
#btn-help .help-tt {
  position: absolute; right: 46px; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.85); color: #fff; font-family: monospace;
  font-size: 11px; padding: 4px 10px; border-radius: 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  border: 1px solid rgba(255,255,255,0.15);
}
#btn-help:hover .help-tt { opacity: 1; }

/* Help modal */
#help-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.88); z-index: 8700;
  align-items: flex-start; justify-content: center; padding: 16px 16px 40px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#help-overlay.visible { display: flex; }
#help-overlay .help-card {
  background: #0a0f1e; border: 2px solid #4488ff; border-radius: 10px;
  max-width: 620px; width: 100%; max-height: 88vh; padding: 20px 22px;
  position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; min-height: 0;
  margin: auto;
  box-shadow: 0 0 40px rgba(68,136,255,0.2);
  font-family: system-ui, sans-serif; color: #d8dde8; font-size: 13px; line-height: 1.55;
}
@media (max-height: 600px) {
  #help-overlay .help-card { max-height: calc(100vh - 32px); }
}
#help-overlay h2 {
  color: #4488ff; font-family: monospace; font-size: 20px; margin: 0 0 4px;
  letter-spacing: 2px;
}
#help-overlay .help-sub { color: #7a8ba8; font-size: 12px; margin-bottom: 16px; }
#help-overlay .help-wiki-cta {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(255,210,60,0.06); border: 1px solid rgba(255,210,60,0.32);
  border-radius: 6px; padding: 12px 14px; margin-bottom: 18px;
}
#help-overlay .help-wiki-cta a {
  color: #ffd23c; font-weight: 700; font-size: 14px; text-decoration: none;
  letter-spacing: 0.5px;
}
#help-overlay .help-wiki-cta a:hover { color: #fff; }
#help-overlay .help-wiki-sub { color: #aac; font-size: 11px; }
#help-overlay h3 {
  color: #ffd700; font-family: monospace; font-size: 14px; margin: 14px 0 6px;
  letter-spacing: 1px;
}
#help-overlay .help-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 4px 0;
}
#help-overlay kbd {
  background: #1a2030; border: 1px solid #334; border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 7px; font-family: monospace; font-size: 11px;
  color: #fff;
}
#help-overlay .help-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: #888; font-size: 22px; cursor: pointer; font-family: monospace;
  line-height: 1; padding: 10px 14px; min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
#help-overlay .help-close:hover { color: #fff; }
#help-overlay ul { margin: 4px 0 4px 18px; padding: 0; }
#help-overlay li { margin: 2px 0; }

/* Player menu modal */
#player-menu-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 8000;
  align-items: center; justify-content: center; padding: 20px;
}
#player-menu-overlay.visible { display: flex; }
#player-menu {
  background: #0a0f1e; border: 2px solid #e94560; border-radius: 10px;
  max-width: 540px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 20px; position: relative;
  font-family: monospace; color: #e0e0e0;
  scrollbar-width: thin; scrollbar-color: #1a3a6e #0a0f1e;
}
#player-menu h2 {
  color: #e94560; font-size: 20px; letter-spacing: 2px; margin-bottom: 16px;
  padding-right: 36px;
}
#player-menu h3 {
  color: #ffd700; font-size: 14px; letter-spacing: 1px; margin: 16px 0 8px;
  border-bottom: 1px solid #2a3f55; padding-bottom: 6px;
}
#player-menu .pm-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: #7a8ba8; font-size: 26px;
  cursor: pointer; padding: 0; line-height: 1; font-family: inherit;
}
#player-menu .pm-close:hover { color: #e94560; }
#player-menu .pm-empty {
  color: #555; font-size: 12px; padding: 10px 0; font-style: italic;
}
#player-menu .pm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; border-bottom: 1px solid #111828;
  font-size: 13px;
}
#player-menu .pm-row:last-child { border-bottom: none; }
#player-menu .pm-handle { color: #e0e0e0; }
#player-menu .pm-row button {
  background: none; border: 1px solid #2ecc71; color: #2ecc71;
  padding: 3px 10px; font-size: 11px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s;
}
#player-menu .pm-row button:hover { background: #2ecc71; color: #000; }
#player-menu .pm-reset-btn {
  background: none; border: 1px solid #e94560; color: #e94560;
  padding: 6px 14px; font-size: 12px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s; margin-top: 8px;
}
#player-menu .pm-reset-btn:hover { background: #e94560; color: #fff; }

/* Voice mic button */
#btn-voice {
  display: none; position: fixed; bottom: 64px; right: 12px; z-index: 5500;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 22px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.1s;
}
#btn-voice.visible { display: flex; }
#btn-voice:active { transform: scale(0.92); }
#btn-voice.recording {
  background: rgba(255,40,40,0.35); border-color: #ff4444;
  box-shadow: 0 0 0 0 rgba(255,68,68,0.6);
  animation: voicePulseRing 1s ease-out infinite;
}
@keyframes voicePulseRing {
  0% { box-shadow: 0 0 0 0 rgba(255,68,68,0.7); }
  100% { box-shadow: 0 0 0 18px rgba(255,68,68,0); }
}

/* Selected-weapon label — sits to the LEFT of the hotbar at the same
   bottom-center anchor. Always shows the active slot's display name. */
#hotbar-label {
  display: none; position: fixed; bottom: 18px; left: 50%;
  transform: translate(calc(-50% - 235px), 0); z-index: 5500;
  pointer-events: none;
  color: #ffd23c; font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 1.5px;
  background: rgba(0,0,0,0.55); padding: 7px 12px;
  border: 1px solid rgba(255,210,60,0.35); border-radius: 4px;
  text-shadow: 0 0 10px rgba(255,210,60,0.4);
  white-space: nowrap;
}
#hotbar-label.visible { display: block; }

/* Current LEVEL NAME — top-center chip with the active mode/feed name. */
#level-label {
  display: none; position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 5500; pointer-events: none;
  color: #00eeff; font: 700 14px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 2.5px; text-transform: uppercase;
  background: rgba(0,0,0,0.6); padding: 8px 18px;
  border: 1px solid rgba(0,238,255,0.35); border-radius: 4px;
  text-shadow: 0 0 10px rgba(0,238,255,0.5);
  white-space: nowrap;
  max-width: min(70vw, 700px); overflow: hidden; text-overflow: ellipsis;
}
#level-label.visible { display: block; }

/* Hotbar (Minecraft-style) */
#hotbar {
  display: none; position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 5500; flex-direction: row; gap: 2px;
  padding: 3px; background: rgba(0,0,0,0.45); border: 1px solid rgba(0,0,0,0.9);
  border-radius: 3px;
  -webkit-tap-highlight-color: transparent;
}
#hotbar.visible { display: flex; }
.hb-slot {
  width: 48px; height: 48px; background: rgba(42,42,42,0.7);
  border: 2px solid #1a1a1a;
  border-top-color: #555; border-left-color: #555;
  position: relative; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
  user-select: none; -webkit-user-select: none;
}
.hb-slot.selected {
  border: 3px solid #ffffff;
  margin: -1px; /* bleed 2px outside */
  box-shadow: 0 0 0 1px #000, 0 0 12px rgba(255,255,255,0.5);
  z-index: 2;
}
.hb-slot .hb-count {
  position: absolute; right: 2px; bottom: 1px; font-size: 12px;
  color: #fff; font-family: monospace; font-weight: bold;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none;
}
.hb-slot .hb-key, #inventory .inv-slot .hb-key {
  position: absolute; left: 3px; bottom: 1px; font-size: 10px;
  font-family: monospace; color: rgba(255,255,255,0.38);
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  pointer-events: none; line-height: 1;
}
.hb-slot.empty { font-size: 20px; opacity: 0.35; }

/* Inventory modal (E) */
#inventory-overlay {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 8500;
  align-items: center; justify-content: center; padding: 20px;
}
#inventory-overlay.visible { display: flex; }
#inventory {
  background: linear-gradient(#c6c6c6,#8b8b8b);
  border: 4px solid #555; border-radius: 2px;
  padding: 12px; font-family: monospace;
  box-shadow: 0 0 0 1px #000, 6px 6px 0 rgba(0,0,0,0.35);
  max-width: 540px; width: 100%;
}
#inventory h2 {
  color: #222; font-size: 18px; letter-spacing: 2px; margin-bottom: 12px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}
#inventory .inv-grid {
  display: grid; grid-template-columns: repeat(9, 44px); gap: 2px;
  padding: 4px; background: #555; border-radius: 2px; margin-bottom: 10px;
}
#inventory .inv-slot {
  width: 44px; height: 44px; background: #8b8b8b;
  border-top: 2px solid #373737; border-left: 2px solid #373737;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; position: relative;
}
#inventory .inv-slot .hb-count {
  position: absolute; right: 1px; bottom: 0; font-size: 11px;
  color: #fff; font-weight: bold;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}
#inventory .inv-slot.selected {
  outline: 2px solid #fff; outline-offset: -1px;
  box-shadow: 0 0 8px rgba(255,255,255,0.7);
}
#inventory .inv-slot[draggable="true"] { cursor: grab; }
#inventory .inv-slot.dragging {
  cursor: grabbing; opacity: 0.45;
  outline: 2px dashed rgba(255,255,255,0.6); outline-offset: -2px;
}
#inventory .inv-slot.drag-over {
  outline: 3px solid #ffd54a; outline-offset: -2px;
  box-shadow: 0 0 12px rgba(255,213,74,0.85);
}

/* ============================================================
 * HALL OF FAME — fullscreen demoscene-style highscore page.
 * Triggered by the 🏆 button in OPTIONS or after 30s of title-screen
 * inactivity. Closes on any input. ui/hall-of-fame.js owns the JS.
 * ============================================================ */
#hof-overlay {
  position: fixed; inset: 0; z-index: 12000;
  display: none; background: #000;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #fff; overflow: hidden;
  cursor: pointer;
}
#hof-overlay.visible { display: block; }
/* Back-to-arcade button — top-left joystick. Per user 2026-04-30: HoF
   no longer closes on any keypress; explicit return path = this button
   or ESC. Mirrors the home-btn placement on the title screen. */
#hof-back-btn {
  position: fixed; top: 14px; left: 14px; z-index: 12010;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 215, 0, 0.45);
  color: #ffd700;
  font-size: 22px; line-height: 1;
  padding: 8px 12px; border-radius: 6px;
  cursor: pointer; pointer-events: auto;
  transition: background 0.12s, border-color 0.12s;
}
#hof-back-btn:hover { background: rgba(255, 215, 0, 0.18); border-color: #ffd700; }
#hof-stars {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
}
.hof-copper {
  position: absolute; top: 0; bottom: 0; width: 14px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    #ff0066 0%, #ff9900 14%, #ffee00 28%, #00ee88 42%,
    #00aaff 56%, #6622ff 70%, #ff00aa 84%, #ff0066 100%
  );
  background-size: 100% 220%;
  animation: hofCopperShift 6s linear infinite;
  filter: blur(0.4px) brightness(1.1);
  box-shadow: 0 0 24px rgba(255, 102, 200, 0.55);
}
#hof-copper-l { left: 0; }
#hof-copper-r { right: 0; }
@keyframes hofCopperShift {
  0%   { background-position: 0 0%; }
  100% { background-position: 0 220%; }
}
#hof-content {
  position: relative; z-index: 2;
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; padding: 28px 50px 90px;
  box-sizing: border-box;
}
#hof-title-wrap { text-align: center; margin-bottom: 18px; }
#hof-title {
  font-size: clamp(36px, 8vw, 96px); font-weight: 900;
  letter-spacing: 0.18em;
  background: linear-gradient(
    90deg, #ff2266, #ff9900, #ffee00, #00ee88, #00aaff, #6622ff, #ff00aa, #ff2266
  );
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(255, 0, 170, 0.18);
  filter: drop-shadow(0 0 18px rgba(255, 102, 200, 0.45));
  animation: hofTitleHue 5s linear infinite, hofTitlePulse 2.4s ease-in-out infinite;
}
@keyframes hofTitleHue {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes hofTitlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
#hof-subtitle {
  font-size: clamp(11px, 1.6vw, 16px); letter-spacing: 0.32em;
  color: #88ddff; margin-top: 6px; opacity: 0.9;
  text-shadow: 0 0 8px rgba(136, 221, 255, 0.7);
}
#hof-list {
  width: 100%; max-width: 880px;
  flex: 1; overflow-y: auto;
  border: 2px solid rgba(255, 102, 200, 0.35);
  border-radius: 8px;
  background: rgba(8, 0, 24, 0.55);
  box-shadow:
    0 0 30px rgba(255, 0, 170, 0.18),
    inset 0 0 60px rgba(60, 0, 90, 0.45);
  padding: 14px 18px;
}
.hof-loading, .hof-empty {
  text-align: center; padding: 48px 12px;
  font-size: 14px; letter-spacing: 0.32em; color: #88ddff;
}
.hof-row {
  display: grid;
  grid-template-columns: 56px 50px 1fr auto 80px;
  align-items: center; gap: 14px;
  padding: 9px 6px; border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 17px;
}
.hof-row:last-child { border-bottom: none; }
.hof-rank {
  font-weight: 900; font-size: 22px; letter-spacing: 0.05em;
  color: #88ddff;
  text-shadow: 0 0 10px rgba(136, 221, 255, 0.5);
}
.hof-row.hof-r1 .hof-rank { color: #ffd700; text-shadow: 0 0 16px rgba(255, 215, 0, 0.85); }
.hof-row.hof-r2 .hof-rank { color: #c0c0c0; text-shadow: 0 0 16px rgba(192, 192, 192, 0.85); }
.hof-row.hof-r3 .hof-rank { color: #cd7f32; text-shadow: 0 0 16px rgba(205, 127, 50, 0.85); }
.hof-row.hof-r1 { background: linear-gradient(90deg, rgba(255, 215, 0, 0.10), transparent 70%); }
.hof-row.hof-r2 { background: linear-gradient(90deg, rgba(192, 192, 192, 0.08), transparent 70%); }
.hof-row.hof-r3 { background: linear-gradient(90deg, rgba(205, 127, 50, 0.08), transparent 70%); }
.hof-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  background: #222;
}
.hof-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hof-av-fallback {
  font-weight: 800; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, #ff2266, #6622ff);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hof-name {
  font-weight: 700; color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.25);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hof-row.hof-r1 .hof-name { color: #fff8c8; }
.hof-score {
  font-weight: 900; font-size: 22px; letter-spacing: 0.04em;
  color: #ffee00; text-shadow: 0 0 10px rgba(255, 238, 0, 0.6);
  font-variant-numeric: tabular-nums;
}
.hof-row.hof-r1 .hof-score { color: #ffd700; text-shadow: 0 0 18px rgba(255, 215, 0, 0.9); }
.hof-meta { text-align: right; }
.hof-mode {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-size: 10px; letter-spacing: 0.12em; font-weight: 800;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cce6ff;
}
.hof-mode-killer { background: rgba(255, 32, 96, 0.20); color: #ff8db1; border-color: rgba(255, 32, 96, 0.45); }
.hof-mode-chiller { background: rgba(0, 200, 180, 0.18); color: #6ff0d8; border-color: rgba(0, 200, 180, 0.45); }
#hof-footer {
  margin-top: 18px;
  font-size: 11px; letter-spacing: 0.3em; color: rgba(255,255,255,0.55);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}
#hof-scroller {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  overflow: hidden; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.0));
  display: flex; align-items: center;
  border-top: 2px solid rgba(255, 102, 200, 0.55);
  box-shadow: 0 -8px 30px rgba(255, 0, 170, 0.25);
}
#hof-scroller-text {
  display: inline-block; white-space: nowrap;
  font-size: 26px; font-weight: 900; letter-spacing: 0.18em;
  color: #ffee00;
  text-shadow:
    0 0 6px #ff9900,
    0 0 14px rgba(255, 153, 0, 0.6);
  padding-left: 100vw;
  will-change: transform;
}
#inventory .inv-craft-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 10px;
  padding: 6px; background: #555; border-radius: 2px;
}
#inventory .inv-craft-grid {
  display: grid; grid-template-columns: repeat(2, 44px); gap: 2px;
}
#inventory .inv-arrow { color: #222; font-size: 22px; }
#inventory .inv-output-slot {
  width: 48px; height: 48px; background: #8b8b8b;
  border: 3px solid #373737;
  display: flex; align-items: center; justify-content: center;
}
#inventory .inv-section-label {
  color: #222; font-size: 11px; letter-spacing: 1px; margin: 8px 0 4px;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.35);
}

/* Ship Config section */
.pm-config-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 6px 0; font-size: 12px;
}
.pm-config-row label {
  color: #e0e0e0; font-size: 12px; cursor: pointer;
  padding: 4px 8px; border: 1px solid #2a3f55; border-radius: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.pm-config-row label.active { border-color: #2ecc71; color: #2ecc71; background: rgba(46,204,113,0.08); }
.pm-config-row input[type=radio] { accent-color: #2ecc71; }
.pm-tint-swatches { display: flex; gap: 4px; flex-wrap: wrap; }
.pm-tint-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.2); transition: transform 0.1s;
}
.pm-tint-swatch.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.pm-file-btn {
  background: none; border: 1px solid #ffd700; color: #ffd700;
  padding: 6px 12px; font-size: 11px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px;
}
.pm-file-btn:hover { background: #ffd700; color: #000; }

/* Video Config section in Player Menu */
.pm-video-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; margin: 4px 0;
  border: 1px solid #2a3f55; border-radius: 4px;
  font-size: 12px;
}
.pm-video-row .pm-video-label { color: #e0e0e0; flex: 1; min-width: 160px; }
.pm-video-row .pm-video-note {
  color: #7a8ba8; font-size: 10px; margin-top: 2px; display: block;
}
.pm-toggle-btn {
  background: none; border: 1px solid #555; color: #888;
  padding: 4px 12px; font-size: 11px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s; min-width: 58px;
}
.pm-toggle-btn:hover { border-color: #2ecc71; color: #2ecc71; }
.pm-toggle-btn.active {
  background: rgba(46,204,113,0.12); border-color: #2ecc71; color: #2ecc71;
}
.pm-toggle-btn.off {
  background: rgba(233,69,96,0.08); border-color: #8a3a46; color: #a85566;
}
.pm-select {
  background: #0f1a2e; border: 1px solid #2a3f55; color: #e0e0e0;
  padding: 4px 10px; font-size: 11px; font-family: monospace;
  border-radius: 4px; cursor: pointer;
}
.pm-select:focus { outline: none; border-color: #2ecc71; }

/* Full-session recording indicator (pulsing red dot) */
#fullrec-indicator {
  display: none; position: fixed; top: 14px; right: 60px; z-index: 5600;
  align-items: center; gap: 6px;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,68,68,0.5);
  border-radius: 14px; padding: 4px 10px;
  font-family: monospace; font-size: 11px; color: #ff4444;
  pointer-events: none;
}
#fullrec-indicator.visible { display: flex; }
#fullrec-indicator .fri-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff2020;
  box-shadow: 0 0 0 0 rgba(255,32,32,0.6);
  animation: friPulse 1.1s ease-out infinite;
}
@keyframes friPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,32,32,0.75); opacity: 1; }
  100% { box-shadow: 0 0 0 10px rgba(255,32,32,0); opacity: 0.6; }
}

/* Resume-countdown overlay */
#resume-countdown {
  display: none; position: fixed; inset: 0; z-index: 9200;
  background: rgba(4,8,16,0.72); backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  font-family: monospace; pointer-events: none;
}
#resume-countdown.visible { display: flex; }
#resume-countdown .rc-inner { text-align: center; }
#resume-countdown .rc-label {
  color: #00eeff; letter-spacing: 6px; font-size: 14px;
  text-shadow: 0 0 10px rgba(0,238,255,0.5); margin-bottom: 12px;
}
#resume-countdown .rc-number {
  color: #ffd700; font-size: 180px; font-weight: bold;
  text-shadow: 0 0 40px rgba(255,215,0,0.8), 0 0 80px rgba(255,215,0,0.4);
  animation: rcPulse 1s ease-out;
}
#resume-countdown.rc-go .rc-number {
  color: #44ff88; font-size: 140px;
  text-shadow: 0 0 50px rgba(68,255,136,0.9), 0 0 100px rgba(68,255,136,0.5);
  letter-spacing: 4px;
}
@keyframes rcPulse {
  0%   { transform: scale(0.3); opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* Full-session save modal */
#fullrec-save-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.82); z-index: 8900;
  align-items: center; justify-content: center; padding: 16px;
}
#fullrec-save-modal.visible { display: flex; }
#fullrec-save-modal .frsm-card {
  background: #0a0f1e; border: 2px solid #ffd700; border-radius: 10px;
  max-width: 420px; width: 100%; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: monospace; color: #e0e0e0;
}
#fullrec-save-modal h3 {
  color: #ffd700; font-size: 16px; letter-spacing: 1px; margin: 0;
}
#fullrec-save-modal p { color: #8899a6; font-size: 12px; }
#fullrec-save-modal .frsm-btns {
  display: flex; gap: 8px; flex-wrap: wrap;
}
#fullrec-save-modal button {
  background: none; border: 2px solid #ffd700; color: #ffd700;
  padding: 8px 14px; font-size: 12px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 5px; flex: 1;
}
#fullrec-save-modal button:hover { background: #ffd700; color: #000; }
#fullrec-save-modal .frsm-skip { border-color: #555; color: #999; }
#fullrec-save-modal .frsm-skip:hover { background: #333; color: #fff; }

/* Save-last-blast button in hn-bar (shows only when autosave popup is OFF) */
#hn-bar #btn-save-last-blast { display: none; }
#hn-bar.autosave-off #btn-save-last-blast { display: flex; }
#hn-bar #btn-save-last-blast.disabled { opacity: 0.35; cursor: default; }

/* Kill Reputation: PROFILE section in Player Menu */
.profile-section {
  border: 1px solid #2a3a52; border-radius: 6px; padding: 10px 12px 12px;
  background: #1a2438; margin: 4px 0 12px;
}
.profile-section .ps-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.profile-section .ps-avatar {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  background: #0f1a2e; border: 1px solid #2a3a52; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #8fa4c2;
}
.profile-section .ps-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-section .ps-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profile-section .ps-handle { color: #e0e7f0; font-size: 14px; font-family: monospace; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-section .ps-sub { color: #8fa4c2; font-size: 11px; font-style: italic; margin-top: 2px; }
.profile-section .ps-rank-row {
  display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px;
}
.profile-section .ps-rank-name {
  font-family: monospace; font-weight: bold; font-size: 20px; letter-spacing: 1px;
  text-shadow: 0 0 8px currentColor;
}
.profile-section .ps-rank-progress {
  color: #8fa4c2; font-size: 11px; font-family: monospace;
}
.profile-section .ps-bar {
  height: 8px; background: #0f1a2e; border: 1px solid #2a3a52; border-radius: 4px;
  overflow: hidden; margin: 4px 0 10px;
}
.profile-section .ps-bar-fill {
  height: 100%; background: linear-gradient(90deg, #ffd700, #ff8800);
  transition: width 0.3s ease;
}
.profile-section .ps-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px;
}
.profile-section .ps-stat {
  background: #0f1a2e; border: 1px solid #2a3a52; border-radius: 4px;
  padding: 8px 6px; min-height: 44px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.profile-section .ps-stat-val {
  color: #e0e7f0; font-family: monospace; font-weight: bold; font-size: 16px;
}
.profile-section .ps-stat-label {
  color: #8fa4c2; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-top: 2px;
}
.profile-section .ps-share {
  width: 100%; min-height: 44px; padding: 10px; border: 1px solid #3a2a55;
  background: #0f1a2e; color: #6b7a92; font-family: monospace; font-size: 12px;
  border-radius: 6px; cursor: not-allowed; opacity: 0.55;
}
@media (max-width: 480px) {
  .profile-section .ps-stats { grid-template-columns: repeat(3, 1fr); }
  .profile-section .ps-rank-name { font-size: 18px; }
}

/* Space Garage section in Player Menu */
.sg-section {
  border: 1px solid #2a3a52; border-radius: 6px; padding: 8px 10px 10px;
  background: #1a2438; margin: 4px 0 12px;
}
.sg-section h3.sg-title {
  color: #00eeff; font-size: 14px; letter-spacing: 1px; margin: 0 0 4px;
  border-bottom: none; padding-bottom: 4px; font-family: monospace;
}
.sg-section .sg-sub {
  color: #8fa4c2; font-size: 11px; font-style: italic; margin-bottom: 10px;
}
.sg-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.sg-card {
  background: #0f1a2e; border: 1px solid #2a3a52; border-radius: 6px;
  padding: 8px 6px 10px; cursor: pointer; transition: all 0.15s;
  display: flex; flex-direction: column; align-items: center;
  min-height: 140px; position: relative; user-select: none;
}
.sg-card:hover { border-color: #4a6080; background: #142238; }
.sg-card.active {
  border-color: #00eeff; background: #102838;
  box-shadow: 0 0 14px rgba(0,238,255,0.3), inset 0 0 0 1px rgba(0,238,255,0.4);
}
.sg-card canvas {
  width: 92px; height: 76px; display: block; margin: 2px 0 4px;
}
.sg-card .sg-name {
  color: #e0e7f0; font-family: monospace; font-weight: bold;
  font-size: 12px; letter-spacing: 1px; margin-top: 2px;
}
.sg-card.active .sg-name { color: #00eeff; text-shadow: 0 0 6px rgba(0,238,255,0.7); }
.sg-card .sg-stats {
  color: #8fa4c2; font-family: monospace; font-size: 10px;
  margin-top: 4px; display: flex; gap: 6px;
}
.sg-card .sg-equipped {
  position: absolute; top: -7px; right: -6px;
  background: #00eeff; color: #001018; font-family: monospace;
  font-size: 9px; font-weight: bold; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 3px;
  box-shadow: 0 0 8px rgba(0,238,255,0.6);
}
.sg-card .sg-desc {
  color: #6b7a92; font-size: 10px; font-style: italic;
  margin-top: 4px; text-align: center; line-height: 1.25;
}
.sg-card .sg-reroll {
  margin-top: 8px; background: transparent; border: 1px solid #ff66cc;
  color: #ff66cc; font-family: monospace; font-size: 10px;
  letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; cursor: pointer;
  transition: all 0.15s;
}
.sg-card .sg-reroll:hover {
  background: #ff66cc; color: #1a0014;
  box-shadow: 0 0 10px rgba(255,102,204,0.6);
}
@media (max-width: 700px) {
  .sg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Space Garage: equipped ship preview row */
.sg-equipped-row {
  display: flex; align-items: center; gap: 10px;
  background: #0f1a2e; border: 1px solid #2a3a52; border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px;
}
.sg-equipped-preview { display: block; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; flex-shrink: 0; width: 90px; height: 100px; max-width: 90px; max-height: 100px; }
.sg-equipped-swatch {
  width: 36px; height: 36px; border-radius: 6px;
  box-shadow: 0 0 10px currentColor; flex-shrink: 0;
}
.sg-equipped-info { flex: 1; min-width: 0; }
.sg-equipped-name { color: #e0e7f0; font-family: monospace; font-weight: bold; font-size: 12px; letter-spacing: 1px; }
.sg-equipped-stats { color: #8fa4c2; font-family: monospace; font-size: 10px; margin-top: 2px; }
.sg-open-btn {
  background: transparent; border: 1px solid #00eeff; color: #00eeff;
  font-family: monospace; font-size: 10px; padding: 6px 10px;
  border-radius: 4px; cursor: pointer; letter-spacing: 1px;
}
.sg-open-btn:hover { background: #00eeff; color: #001018; }

/* Space Porch entry section in Player Menu */
.sp-section {
  border: 1px solid #3a2a55; border-radius: 6px; padding: 10px 12px;
  background: linear-gradient(135deg, rgba(60,30,120,0.25), rgba(20,10,40,0.5));
  margin: 4px 0 12px; text-align: center;
}
.sp-section h3 {
  color: #cbaaff; font-size: 14px; letter-spacing: 1px; margin: 0 0 4px;
  border-bottom: none; padding-bottom: 0; font-family: monospace;
}
.sp-section .sp-sub {
  color: #9f8fc5; font-size: 11px; font-style: italic; margin-bottom: 10px;
}
.sp-enter-btn {
  background: rgba(60,30,120,0.4); color: #e0d0ff;
  border: 1px solid #8855ff; border-radius: 6px;
  padding: 10px 20px; font-family: monospace; font-size: 13px;
  letter-spacing: 2px; cursor: pointer; width: 100%;
  text-shadow: 0 0 8px rgba(136,85,255,0.4);
  transition: all 0.15s;
}
.sp-enter-btn:hover { background: #8855ff; color: #fff; text-shadow: none; box-shadow: 0 0 18px rgba(136,85,255,0.5); }

/* Collapsible "Advanced Settings" + collapsible Nukelist sections */
.as-section, .nl-section {
  border: 1px solid #2a3a52; border-radius: 6px; padding: 6px 10px 10px;
  background: rgba(20,30,50,0.4); margin: 4px 0 10px;
}
.as-title, .nl-title {
  color: #9fb4d2; font-size: 13px; letter-spacing: 1px; margin: 0 0 2px;
  border-bottom: none; padding-bottom: 4px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px; font-family: monospace;
}
.as-title:hover, .nl-title:hover { color: #e0e8f2; }
.as-caret, .nl-caret { display: inline-block; width: 12px; transition: transform 0.15s; color: #8fa4c2; font-size: 11px; }
.as-section.open .as-caret, .nl-section.open .nl-caret { transform: rotate(90deg); }
.as-body, .nl-body { display: none; padding-top: 6px; }
.as-section.open .as-body, .nl-section.open .nl-body { display: block; }

/* Space Porch overlay — full screen chill scene.
   The overlay itself is pointer-events:none so clicks reach the game canvas
   behind it (which we render the porch into). The YouTube iframe and dim
   layer are below the canvas z-index and don't receive clicks. Only the
   close/mute buttons capture clicks via pointer-events:auto. */
#space-porch-overlay {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: #000;
  pointer-events: none;
}
#space-porch-overlay.visible { display: block; }
#space-porch-overlay iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; pointer-events: none;
}
#space-porch-overlay .sp-dim {
  position: absolute; inset: 0; background: rgba(0,0,0,0.62);
  pointer-events: none;
}
/* When porch is active, lift the game canvas above the overlay so the
   porch render (rocking chair, falling posts) appears on top and clicks
   register on it. */
body.porch-active #c {
  position: fixed; inset: 0; z-index: 61;
}
/* Keep the 4 chrome buttons (joystick, music, account, help) visible on
 * the porch — per user 2026-04-28 request — while still hiding gameplay
 * elements. Buttons get z-index high enough to sit above the porch dim
 * layer so they're actually clickable. */
body.porch-active #hn-link,
body.porch-active #hotbar,
body.porch-active #load-overlay {
  display: none !important;
}
body.porch-active #home-btn,
body.porch-active #btn-music,
body.porch-active #btn-player-menu,
body.porch-active #btn-help {
  z-index: 10500 !important;
}

/* ===========================================================
 * Space Porch — arcade cabinet drop-in.
 * Spawn after 30s on porch. Click → spawn coin. Drag coin onto
 * the cabinet's coin-slot → zoom anim → exitSpacePorch + back to title.
 * Pure CSS art so no extra asset.
 * =========================================================== */
#sp-arcade-cabinet {
  position: fixed;
  left: 50%; top: -360px;
  transform: translateX(-50%);
  width: 160px; height: 230px;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transition: top 1.6s cubic-bezier(.5,.05,.55,1.6),
              opacity 0.3s ease,
              transform 0.6s ease;
  /* Cabinet body */
  background:
    linear-gradient(to bottom, #2a1a4a 0%, #1a0e30 100%);
  border: 3px solid #ff66cc;
  border-radius: 14px 14px 6px 6px;
  box-shadow:
    0 0 0 2px #000,
    0 8px 24px rgba(0,0,0,.6),
    0 0 30px rgba(255, 102, 200, 0.45),
    inset 0 0 18px rgba(255, 102, 200, 0.18);
  cursor: pointer;
}
#sp-arcade-cabinet.visible { opacity: 1; pointer-events: auto; }
#sp-arcade-cabinet.landed {
  top: calc(100vh - 290px);
  animation: spArcadeBob 3.2s ease-in-out infinite;
}
@keyframes spArcadeBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
#sp-arcade-cabinet:hover { box-shadow:
  0 0 0 2px #000,
  0 8px 24px rgba(0,0,0,.6),
  0 0 36px rgba(255, 213, 74, 0.85),
  inset 0 0 18px rgba(255, 102, 200, 0.18);
}
.sp-arcade-screen {
  position: absolute; top: 14px; left: 14px; right: 14px;
  height: 96px; background: #000;
  border: 2px solid #444; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.sp-arcade-screen-inner {
  font: 900 14px/1.15 ui-monospace, monospace;
  color: #ffee00; text-align: center; letter-spacing: 0.08em;
  text-shadow: 0 0 6px rgba(255, 238, 0, .8);
  animation: spArcadeFlicker 2.8s ease-in-out infinite;
}
@keyframes spArcadeFlicker {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.78; }
}
.sp-arcade-controls {
  position: absolute; top: 122px; left: 14px; right: 14px;
  height: 36px;
  display: flex; align-items: center; justify-content: space-around;
}
.sp-arcade-stick {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff5577, #aa1a44);
  border: 2px solid #2a0e1a;
  box-shadow: 0 -10px 0 -3px #444;
}
.sp-arcade-buttons { display: flex; gap: 6px; }
.sp-arcade-buttons i {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd700, #aa7700);
  border: 1px solid #2a1a00;
}
.sp-arcade-coin-slot {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 6px;
  background: #000; border: 1.5px solid #888; border-radius: 1px;
  box-shadow: inset 0 1px 2px #000;
}
#sp-arcade-cabinet.coin-target .sp-arcade-coin-slot {
  background: #ffd54a;
  box-shadow: 0 0 12px #ffd54a;
}
.sp-arcade-base {
  position: absolute; bottom: -2px; left: 0; right: 0;
  text-align: center; color: #ff66cc; font-size: 22px;
  letter-spacing: 12px;
  text-shadow: 0 0 4px #ff66cc;
}
/* Cabinet zoom-in transition before returning to title */
#sp-arcade-cabinet.zooming {
  animation: spArcadeZoom 1.2s cubic-bezier(.55,.06,.68,.19) forwards;
}
@keyframes spArcadeZoom {
  0%   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  60%  { transform: translateX(-50%) translateY(-50px) scale(2.4); opacity: 1; }
  100% { transform: translateX(-50%) translateY(-160px) scale(8); opacity: 0; }
}

/* The coin */
#sp-coin {
  position: fixed;
  left: 30px; top: calc(100vh - 130px);
  width: 56px; height: 56px;
  z-index: 75;
  display: none;
  font-size: 48px;
  text-align: center; line-height: 56px;
  cursor: grab;
  user-select: none;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
  animation: spCoinSpin 2s linear infinite, spCoinAppear .55s ease-out;
}
#sp-coin.visible { display: block; }
#sp-coin.dragging { cursor: grabbing; opacity: .8; transform: scale(1.1); }
@keyframes spCoinSpin {
  0%   { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}
@keyframes spCoinAppear {
  0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(20deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Universe Map mode: hide the loading overlay + hotbar so the map fills the view */
body.universe-active #load-overlay,
body.universe-active #hotbar,
body.universe-active #btn-pause,
body.universe-active #hn-bar,
body.universe-active #hn-link {
  display: none !important;
}
#space-porch-overlay .sp-ctrl {
  position: absolute; top: 14px; z-index: 62;
  background: rgba(20,10,40,0.75); color: #e0d0ff;
  border: 1px solid #8855ff; border-radius: 6px;
  width: 42px; height: 42px; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  pointer-events: auto;
}
#space-porch-overlay .sp-ctrl:hover { background: #8855ff; color: #fff; }
#space-porch-overlay .sp-mute { right: 64px; }
#space-porch-overlay .sp-close { right: 14px; font-size: 22px; }
/* Bottom-center screen-name reminder. Per user 2026-04-30: surface the
 * screen's name so the player remembers where they are.
 *
 * IMPORTANT (re-fix 2026-04-30): position MUST be `fixed` (not
 * `absolute`) — the parent #space-porch-overlay establishes a
 * stacking context at z-index 60, and body.porch-active #c (the
 * game canvas) sits at z-index 61 which paints OVER any descendant
 * of the overlay no matter how high its local z-index. Hoisting the
 * label to position:fixed escapes the parent's stacking context and
 * lets z-index 70 actually stack above the canvas. Display gated by
 * body.porch-active so the label never bleeds into the title screen. */
/* User reported the label still not showing post-fix. Brute-forcing
   with !important + a simpler, higher-specificity selector
   (body.porch-active .sp-title, no middle #space-porch-overlay) so any
   stray rule can't override it. The label MUST be visible during the
   porch state — it's the screen-name reminder. */
.sp-title { display: none; }
body.porch-active .sp-title {
  display: block !important;
  position: fixed !important;
  left: 50% !important; bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  color: #cbaaff !important;
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-weight: 700 !important; font-size: 14px !important;
  letter-spacing: 4px !important;
  text-shadow: 0 0 12px rgba(136,85,255,0.8), 0 0 26px rgba(136,85,255,0.35) !important;
  pointer-events: none !important;
  background: rgba(10, 5, 25, 0.65) !important;
  padding: 8px 18px !important;
  border: 1px solid rgba(136, 85, 255, 0.45) !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}

/* COINS section at the bottom of the Player Menu — quiet by design. */
.pm-coins-section {
  border: 1px solid #3a3a1a; border-radius: 6px; padding: 12px 14px;
  background: rgba(255,210,60,0.04); margin: 10px 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pm-coins-section .pm-coins-btn {
  background: transparent; border: 1px solid #ffd700; color: #ffd700;
  font-family: monospace; font-size: 13px; letter-spacing: 3px; padding: 8px 22px;
  border-radius: 4px; cursor: pointer; transition: all 0.15s;
  text-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.pm-coins-section .pm-coins-btn:hover { background: #ffd700; color: #000; text-shadow: none; }
.pm-coins-section .pm-coins-sub {
  color: #8870b5; font-size: 10px; letter-spacing: 1px; font-style: italic;
}

/* Custom Blast Targets section in Player Menu (moved from load overlay) */
.cbt-section {
  border: 1px solid #3a2a55; border-radius: 6px; padding: 6px 10px 10px;
  background: rgba(90,40,140,0.06); margin: 4px 0 10px;
}
.cbt-section .cbt-title {
  color: #c29bff; font-size: 14px; letter-spacing: 1px; margin: 0 0 2px;
  border-bottom: none; padding-bottom: 4px; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.cbt-section .cbt-title:hover { color: #e0c8ff; }
#cbt-caret { display: inline-block; width: 12px; transition: transform 0.15s; color: #8870b5; font-size: 11px; }
.cbt-section.open #cbt-caret { transform: rotate(90deg); }
.cbt-subheader {
  color: #8870b5; font-size: 11px; font-style: italic; margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px dashed #2a1f3f;
}
.cbt-body { display: none; padding-top: 4px; }
.cbt-section.open .cbt-body { display: block; }
#player-menu .input-group {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
#player-menu .input-group textarea,
#player-menu .input-group input[type=text] {
  background: #0f1a2e; border: 1px solid #1a3a6e; color: #e0e0e0;
  padding: 10px; font-size: 13px; font-family: monospace; border-radius: 6px;
  resize: vertical; width: 100%; box-sizing: border-box;
}
#player-menu .input-group textarea { min-height: 70px; }
#player-menu .input-group input[type=text] { height: 38px; }
#player-menu .input-group textarea:focus,
#player-menu .input-group input[type=text]:focus {
  outline: none; border-color: #c29bff;
}
#player-menu .preview-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
#player-menu .preview-img {
  max-width: 180px; max-height: 100px; border: 1px solid #1a3a6e; border-radius: 4px;
}
.cbt-hint { color: #666; font-size: 11px; font-family: monospace; font-style: italic; }
.cbt-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cbt-btn {
  background: none; border: 2px solid #e94560; color: #e94560;
  padding: 9px 16px; font-size: 13px; font-family: monospace; font-weight: bold;
  cursor: pointer; border-radius: 4px; transition: all 0.15s; flex: 1; min-width: 140px;
}
.cbt-btn:hover { background: #e94560; color: #fff; }
.cbt-btn.cbt-btn-random { border-color: #888; color: #bbb; }
.cbt-btn.cbt-btn-random:hover { background: #444; color: #fff; }
.cbt-btn.cbt-btn-feed {
  border-color: #ff4500; color: #ff4500; width: 100%; flex: none;
}
.cbt-btn.cbt-btn-feed:hover { background: #ff4500; color: #fff; }
.cbt-separator {
  border-top: 1px solid #2a1f3f; margin: 12px 0 10px;
}
/* Feed panel styling when inside the player menu */
#player-menu #feed-panel {
  display: none; width: 100%; max-height: 40vh; overflow-y: auto;
  flex-direction: column; gap: 0;
  border: 1px solid #1a3a6e; border-radius: 8px; background: #0a0f1e;
  margin-top: 10px;
  scrollbar-width: thin; scrollbar-color: #1a3a6e #0a0f1e;
}
#player-menu #feed-panel.visible { display: flex; }
#player-menu #feed-panel .feed-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid #1a3a6e; position: sticky; top: 0; background: #0a0f1e; z-index: 1;
}
#player-menu #feed-panel .feed-header select {
  background: #0f1a2e; border: 1px solid #1a3a6e; color: #ff4500;
  padding: 6px 10px; font-size: 13px; font-family: monospace; border-radius: 4px; flex: 1;
}
#player-menu #feed-panel .feed-loading {
  color: #555; font-size: 12px; padding: 20px; text-align: center; font-family: monospace;
}

/* --- BLAST BATTLE overlay --------------------------------------- */
#battle-overlay {
  display: none; position: fixed; inset: 0; z-index: 20000;
  background: #0a0f1e; color: #e7e9ea;
  font-family: monospace; flex-direction: column; align-items: center; justify-content: center;
}
#battle-overlay.visible { display: flex; }
#battle-overlay .bo-title {
  color: #55ff99; font-size: 26px; letter-spacing: 4px; margin-bottom: 12px;
  text-shadow: 0 0 14px rgba(85,255,153,0.6);
}
#battle-overlay .bo-sub {
  color: #8899a6; font-size: 12px; letter-spacing: 2px; margin-bottom: 20px;
}
#battle-overlay .bo-hpbars {
  display: flex; width: 1280px; max-width: 96vw; gap: 20px;
  justify-content: space-between; margin-bottom: 8px;
}
#battle-overlay .bo-hpbar {
  flex: 1; max-width: 560px;
  display: flex; flex-direction: column; gap: 4px;
}
#battle-overlay .bo-hpbar .bo-label {
  font-size: 12px; letter-spacing: 2px;
}
#battle-overlay .bo-hpbar.p1 .bo-label { color: #4499ff; text-align: left; }
#battle-overlay .bo-hpbar.p2 .bo-label { color: #ff4466; text-align: right; }
#battle-overlay .bo-hpbar .bo-bar {
  height: 14px; background: #1a2033; border: 1px solid #2a3352; border-radius: 4px;
  overflow: hidden; position: relative;
}
#battle-overlay .bo-hpbar .bo-fill {
  height: 100%; width: 100%; transition: width 0.1s linear, background 0.1s linear;
  background: linear-gradient(90deg, #22cc44 0%, #ffcc22 60%, #cc2222 100%);
}
#battle-overlay .bo-hpbar.p2 .bo-fill {
  background: linear-gradient(270deg, #22cc44 0%, #ffcc22 60%, #cc2222 100%);
}
#battle-overlay .bo-canvas-wrap {
  width: 1280px; max-width: 96vw; aspect-ratio: 640 / 360;
  border: 2px solid #2a3352; box-shadow: 0 0 40px rgba(85,255,153,0.15);
  position: relative;
}
#battle-overlay canvas#battle-canvas {
  width: 100%; height: 100%; image-rendering: pixelated; display: block;
}
#battle-overlay .bo-banner {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  font-size: 60px; letter-spacing: 8px; text-shadow: 0 0 20px rgba(0,0,0,0.7);
  pointer-events: none;
}
#battle-overlay .bo-banner.visible { display: flex; }
#battle-overlay .bo-banner.victory { color: #55ff99; }
#battle-overlay .bo-banner.defeat  { color: #ff4466; }
#battle-overlay .bo-banner.draw    { color: #ffcc22; font-size: 48px; }
#battle-overlay .bo-footer {
  margin-top: 12px; font-size: 11px; color: #667; letter-spacing: 2px;
}
#battle-overlay .bo-esc {
  position: absolute; top: 14px; right: 14px; background: transparent; border: 1px solid #444;
  color: #888; font-family: monospace; font-size: 11px; padding: 6px 12px; cursor: pointer;
  letter-spacing: 2px; border-radius: 4px;
}
#battle-overlay .bo-esc:hover { background: #333; color: #fff; }

#battle-search-overlay {
  display: none; position: fixed; inset: 0; z-index: 19500;
  background: rgba(10,15,30,0.93); color: #55ff99;
  font-family: monospace; flex-direction: column; align-items: center; justify-content: center;
}
#battle-search-overlay.visible { display: flex; }
#battle-search-overlay .bs-title {
  font-size: 22px; letter-spacing: 3px; margin-bottom: 12px;
  text-shadow: 0 0 14px rgba(85,255,153,0.5);
}
#battle-search-overlay .bs-dots {
  font-size: 32px; letter-spacing: 6px; color: #55ff99; margin: 8px 0;
}
#battle-search-overlay .bs-sub {
  color: #8899a6; font-size: 12px; letter-spacing: 2px;
}
#battle-search-overlay .bs-cancel {
  margin-top: 22px; background: transparent; border: 1px solid #555;
  color: #999; font-family: monospace; font-size: 12px; padding: 8px 18px;
  cursor: pointer; letter-spacing: 2px; border-radius: 4px;
}
#battle-search-overlay .bs-cancel:hover { background: #333; color: #fff; }

/* --- COINS balance badge (start screen) --- */
#coins-badge {
  display: none; margin-top: 8px; padding: 5px 12px; border: 1px solid rgba(255,210,60,0.5);
  border-radius: 20px; color: #ffd23c; font-family: monospace; font-size: 11px;
  letter-spacing: 2px; background: rgba(255,210,60,0.05); align-self: center;
}
#coins-badge strong { color: #fff; font-size: 13px; margin: 0 4px; }

/* --- Earn toast: small yellow slide-up bottom-right --- */
#coins-earn-toast {
  position: fixed; right: 20px; bottom: 24px; z-index: 10000;
  background: linear-gradient(135deg, rgba(255,210,60,0.95), rgba(255,160,40,0.95));
  color: #1a1000; font-family: monospace; font-weight: bold; letter-spacing: 1.5px;
  padding: 10px 18px; border-radius: 8px; box-shadow: 0 4px 20px rgba(255,210,60,0.5);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
#coins-earn-toast.show { opacity: 1; transform: translateY(0); }

/* --- Profile edit modal --- */
#profile-edit-modal {
  display: none; position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,10,0.85); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
#profile-edit-modal.visible { display: flex; }
#profile-edit-modal .pem-card {
  background: linear-gradient(180deg, #0a0f24 0%, #0a1a28 100%);
  border: 2px solid #b31b1b; border-radius: 12px; padding: 28px;
  max-width: 480px; width: 100%; position: relative;
  box-shadow: 0 0 60px rgba(179,27,27,0.35);
  max-height: 90vh; overflow-y: auto;
}
#profile-edit-modal h3 { color: #ff5a5a; margin: 0 0 16px; letter-spacing: 2px; font-size: 16px; }
#profile-edit-modal .pem-close {
  position: absolute; top: 8px; right: 12px; background: none; border: 0;
  color: #8899a6; font-size: 20px; cursor: pointer;
}
#profile-edit-modal label {
  display: block; color: #8899a6; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; margin: 14px 0 4px;
}
#profile-edit-modal input, #profile-edit-modal textarea {
  width: 100%; background: #0a0f1e; border: 1px solid #1a3a6e;
  color: #fff; font-family: monospace; font-size: 13px; padding: 8px 10px;
  border-radius: 4px; outline: none;
}
#profile-edit-modal textarea { resize: vertical; min-height: 60px; max-height: 160px; }
#profile-edit-modal input:focus, #profile-edit-modal textarea:focus { border-color: #ff5a5a; }
#profile-edit-modal .pem-save {
  margin-top: 18px; width: 100%; padding: 10px;
  background: #b31b1b; color: #fff; border: 0; border-radius: 6px;
  font-family: monospace; font-weight: bold; letter-spacing: 2px; cursor: pointer;
}
#profile-edit-modal .pem-save:hover { background: #d02020; }
#profile-edit-modal .pem-save:disabled { opacity: 0.5; cursor: not-allowed; }
#profile-edit-modal .pem-msg {
  margin-top: 10px; min-height: 14px; font-size: 11px; color: #8899a6; text-align: center;
}
#profile-edit-modal .pem-msg.err { color: #ff5a5a; }
#profile-edit-modal .pem-msg.ok  { color: #4dffa1; }
#profile-edit-modal .pem-hint { color: #556; font-size: 10px; margin-top: 3px; }
#profile-edit-modal .pem-linked-row {
  display: grid; grid-template-columns: 80px 1fr; gap: 6px; align-items: center;
  margin-top: 6px;
}
#profile-edit-modal .pem-linked-row label { margin: 0; }

/* ============================================================
   STUDY GUNS — Grok action menu + Memetic analysis overlay.
   Both follow the existing modal idiom (display:none default, .visible
   to show, click backdrop to close, dark card on rgba backdrop).
   ============================================================ */

/* 💡 Grok action menu (floating mini-modal anchored center). */
#grok-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 9450;
  align-items: center; justify-content: center;
}
#grok-menu.visible { display: flex; }
#grok-menu .grok-card {
  position: relative;
  background: linear-gradient(180deg, #2a210a 0%, #14110a 100%);
  border: 1.5px solid rgba(255,217,80,0.7);
  border-radius: 14px;
  padding: 22px 24px 20px; min-width: 320px; max-width: 460px;
  color: #fff066; font-family: system-ui, sans-serif;
  box-shadow: 0 0 32px rgba(255,217,80,0.35), 0 0 0 1px rgba(0,0,0,0.5) inset;
}
#grok-menu .grok-card h3 {
  margin: 0 0 6px; font-size: 18px; letter-spacing: 2px; color: #fff066;
  text-shadow: 0 0 12px rgba(255,217,80,0.6);
}
#grok-menu .grok-sub { font-size: 12px; color: #d6c780; margin-bottom: 14px; opacity: 0.9; }
#grok-menu .grok-actions { display: flex; flex-direction: column; gap: 8px; }
#grok-menu .grok-action {
  background: rgba(50, 40, 12, 0.85);
  border: 1px solid rgba(255,217,80,0.4);
  border-radius: 8px; padding: 10px 14px;
  color: #ffe066; font-family: system-ui, sans-serif; font-size: 13px;
  text-align: left; cursor: pointer; transition: all 0.12s;
}
#grok-menu .grok-action:hover {
  background: rgba(80, 60, 20, 0.95);
  border-color: rgba(255,217,80,0.85);
  transform: translateX(2px);
}
#grok-menu .grok-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; color: #fff066;
  font-size: 20px; cursor: pointer; line-height: 1;
  padding: 4px 8px;
}

/* 🧠 Memetic analysis overlay — bigger, more readable, paused-game style. */
#memetic-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.7); z-index: 9460;
  align-items: center; justify-content: center;
}
#memetic-overlay.visible { display: flex; }
#memetic-overlay .mem-card {
  position: relative;
  background: linear-gradient(180deg, #1a0e2e 0%, #0a0a1a 100%);
  border: 1.5px solid rgba(255,122,232,0.6);
  border-radius: 16px;
  padding: 26px 28px 22px;
  min-width: 360px; max-width: 640px; width: min(640px, 92vw);
  max-height: 82vh; overflow-y: auto;
  color: #fff; font-family: system-ui, sans-serif;
  box-shadow: 0 0 40px rgba(255,122,232,0.4), 0 0 0 1px rgba(0,0,0,0.5) inset;
}
#memetic-overlay .mem-card h3 {
  margin: 0 0 4px; font-size: 22px; letter-spacing: 3px; color: #ff7ae8;
  text-shadow: 0 0 16px rgba(255,122,232,0.55);
}
#memetic-overlay .mem-counter {
  font-size: 11px; color: #b3aacc; letter-spacing: 1px;
  margin-bottom: 16px;
}
#memetic-overlay .mem-counter span { color: #ffd97a; font-weight: bold; }
#memetic-overlay .mem-body { font-size: 14px; line-height: 1.55; }
#memetic-overlay .mem-row {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 6px;
}
#memetic-overlay .mem-tag {
  display: inline-block;
  background: rgba(255,122,232,0.18);
  border: 1px solid rgba(255,122,232,0.5);
  border-radius: 4px;
  padding: 2px 8px;
  color: #ff7ae8; font-weight: bold; font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
}
#memetic-overlay .mem-span {
  color: #fff066; font-style: italic;
  background: rgba(255,217,122,0.08);
  border-left: 2px solid #fff066;
  padding: 4px 10px;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
}
#memetic-overlay .mem-why {
  color: #cfd; margin-top: 8px;
  background: rgba(0,0,0,0.3);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
}
#memetic-overlay .mem-hint {
  margin-top: 14px; padding: 8px 12px;
  background: rgba(255,217,122,0.08);
  border: 1px dashed rgba(255,217,122,0.4);
  border-radius: 6px;
  color: #ffd97a; font-size: 12px;
  text-align: center;
}
#memetic-overlay .mem-device {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,122,232,0.15);
}
#memetic-overlay .mem-device:last-child { border-bottom: 0; }
#memetic-overlay .mem-device .mem-tag { margin-bottom: 6px; }
#memetic-overlay .mem-device .mem-span {
  display: block; margin-top: 4px;
}
#memetic-overlay .mem-explanation {
  color: #cfd; font-size: 12px; margin-top: 6px;
}
#memetic-overlay .mem-btns {
  display: flex; gap: 10px; margin-top: 20px;
}
#memetic-overlay .mem-btn {
  flex: 1; padding: 10px 14px;
  background: rgba(255,122,232,0.12);
  border: 1px solid rgba(255,122,232,0.5);
  border-radius: 8px;
  color: #ff7ae8; font-family: system-ui, sans-serif; font-size: 13px;
  font-weight: bold; cursor: pointer;
  letter-spacing: 1px; transition: all 0.12s;
}
#memetic-overlay .mem-btn:hover {
  background: rgba(255,122,232,0.24);
  color: #fff;
}
#memetic-overlay .mem-btn-save {
  border-color: rgba(255,217,122,0.6);
  color: #ffd97a;
}
#memetic-overlay .mem-btn-save:hover {
  background: rgba(255,217,122,0.18);
  color: #fff066;
}
#memetic-overlay .mem-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: 0; color: #ff7ae8;
  font-size: 22px; cursor: pointer; line-height: 1;
  padding: 4px 8px;
}
@media (max-width: 600px) {
  #memetic-overlay .mem-card { padding: 18px 18px 16px; border-radius: 12px; }
  #memetic-overlay .mem-card h3 { font-size: 18px; }
  #grok-menu .grok-card { padding: 18px 18px 16px; min-width: 280px; }
}

/* ============================================================
   Creator Zone v1 — editor / my-levels / marketplace modals.
   Pink/magenta palette to distinguish from coins (gold), stars
   (yellow), custom-post (cyan), battle (green).
   ============================================================ */
#cz-editor-modal,
#cz-mylevels-modal,
#cz-marketplace-modal {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(5,5,16,0.88); z-index: 9290;
  align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#cz-editor-modal.visible,
#cz-mylevels-modal.visible,
#cz-marketplace-modal.visible { display: flex; }

.cz-card {
  background: linear-gradient(180deg, #160316 0%, #28063a 100%);
  border: 2px solid #ff66dd;
  border-radius: 14px;
  max-width: 720px; width: 100%;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  box-shadow: 0 0 60px rgba(255,102,221,0.32), 0 0 20px rgba(170,68,255,0.12);
  margin: auto;
}
.cz-card-list { max-width: 820px; }

.cz-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: #aa6691; font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.cz-close:hover { color: #fff; }

.cz-card h3 {
  color: #ff66dd; font-family: monospace; font-size: 20px; margin: 0 40px 0 0;
  letter-spacing: 3px; text-shadow: 0 0 14px rgba(255,102,221,0.5);
}
.cz-sub {
  color: #d2a4d2; font-family: monospace; font-size: 12px; margin-top: -4px;
  line-height: 1.5;
}
.cz-sub strong { color: #ffd54a; }

.cz-field {
  display: flex; flex-direction: column; gap: 6px;
}
.cz-field label {
  color: #ffaaee; font-family: monospace; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; opacity: 0.95;
}
.cz-field .cz-hint {
  color: #c490c4; font-size: 10px; letter-spacing: 1px; margin-left: 8px;
  text-transform: none; opacity: 0.75;
}
.cz-field input[type="text"],
.cz-field textarea,
.cz-field select {
  background: #0a020a; border: 1px solid rgba(255,102,221,0.32);
  color: #ffe0fa; font-family: monospace; font-size: 13px; padding: 8px 10px;
  border-radius: 6px; outline: none; resize: vertical;
}
.cz-field input[type="text"]:focus,
.cz-field textarea:focus,
.cz-field select:focus { border-color: #ff66dd; box-shadow: 0 0 8px rgba(255,102,221,0.3); }

.cz-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.cz-tab {
  background: rgba(255,102,221,0.06); border: 1px solid rgba(255,102,221,0.32);
  color: #d2a4d2; font-family: monospace; font-size: 11px; letter-spacing: 1px;
  padding: 6px 10px; border-radius: 6px 6px 0 0; cursor: pointer;
}
.cz-tab.active { background: rgba(255,102,221,0.18); color: #fff; border-bottom-color: #ff66dd; }
.cz-tab:hover { color: #fff; }

.cz-tab-pane {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid rgba(255,102,221,0.18);
  border-radius: 0 6px 6px 6px; padding: 10px;
}

.cz-search-row {
  display: flex; gap: 6px;
}
.cz-search-row input {
  flex: 1; background: #0a020a; border: 1px solid rgba(255,102,221,0.32);
  color: #ffe0fa; font-family: monospace; font-size: 12px; padding: 6px 8px;
  border-radius: 4px; outline: none;
}
.cz-search-row button {
  background: rgba(255,102,221,0.18); border: 1px solid #ff66dd; color: #fff;
  font-family: monospace; font-size: 11px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.cz-search-row button:hover { background: #ff66dd; color: #200a18; }

.cz-search-results {
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.cz-search-row-empty,
.cz-empty {
  color: #b48cb4; font-family: monospace; font-size: 11px; padding: 8px 4px;
  font-style: italic;
}

.cz-post-row {
  display: flex; gap: 6px; align-items: flex-start;
  background: rgba(255,102,221,0.04); border: 1px solid rgba(255,102,221,0.18);
  border-radius: 6px; padding: 6px 8px;
  font-family: monospace; font-size: 12px;
}
.cz-post-row .cz-post-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #2a1530;
  flex-shrink: 0; overflow: hidden; display: flex;
  align-items: center; justify-content: center;
}
.cz-post-row .cz-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cz-post-row .cz-post-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
}
.cz-post-row .cz-post-handle { color: #ffaaee; font-size: 11px; }
.cz-post-row .cz-post-text { color: #ffe0fa; font-size: 11px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-post-row .cz-post-action {
  background: rgba(255,102,221,0.18); color: #fff; border: 1px solid #ff66dd;
  padding: 4px 8px; font-size: 10px; border-radius: 4px; cursor: pointer;
  white-space: nowrap;
}
.cz-post-row .cz-post-action:hover { background: #ff66dd; color: #200a18; }
.cz-post-row .cz-post-remove {
  background: transparent; border: 1px solid rgba(255,85,85,0.4); color: #ff8888;
  padding: 4px 8px; font-size: 10px; border-radius: 4px; cursor: pointer;
}
.cz-post-row .cz-post-remove:hover { background: rgba(255,85,85,0.18); color: #ff5555; }

.cz-selected {
  max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
  border: 1px dashed rgba(255,102,221,0.18); border-radius: 6px; padding: 8px;
  min-height: 60px;
}
.cz-selected:empty::before {
  content: "No posts added yet — paste URLs or search corpus above.";
  color: #b48cb4; font-family: monospace; font-size: 11px; font-style: italic;
}

.cz-status {
  color: #ffaaee; font-family: monospace; font-size: 11px; min-height: 14px;
  text-align: center; line-height: 1.5;
}
.cz-status.err { color: #ff5555; }
.cz-status.ok { color: #88ffaa; }

.cz-actions {
  display: flex; gap: 8px; margin-top: 6px;
}
.cz-btn-primary,
.cz-btn-secondary {
  flex: 1; font-family: monospace; font-weight: bold; letter-spacing: 2px;
  font-size: 12px; padding: 10px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid;
}
.cz-btn-primary {
  background: linear-gradient(135deg, #ff66dd, #aa44ff); color: #200a18;
  border-color: #ffaaee; text-shadow: none;
}
.cz-btn-primary:hover { filter: brightness(1.1); }
.cz-btn-primary:disabled { opacity: 0.5; cursor: wait; }
.cz-btn-secondary {
  background: rgba(255,102,221,0.06); color: #ffaaee; border-color: rgba(255,102,221,0.32);
}
.cz-btn-secondary:hover { background: rgba(255,102,221,0.18); color: #fff; border-color: #ff66dd; }

.cz-mylevels-list,
.cz-marketplace-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 50vh; overflow-y: auto;
  border: 1px dashed rgba(255,102,221,0.18); border-radius: 6px; padding: 8px;
}

.cz-level-row {
  display: flex; gap: 10px; align-items: center;
  background: rgba(255,102,221,0.05); border: 1px solid rgba(255,102,221,0.22);
  border-radius: 8px; padding: 10px;
  font-family: monospace;
}
.cz-level-thumb {
  width: 48px; height: 48px; border-radius: 8px; background: #2a1530;
  flex-shrink: 0; overflow: hidden; display: flex;
  align-items: center; justify-content: center; color: #ff66dd;
  font-size: 22px;
  border: 1px solid rgba(255,102,221,0.3);
}
.cz-level-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cz-level-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cz-level-name { color: #fff; font-size: 13px; font-weight: bold; letter-spacing: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cz-level-meta { color: #d2a4d2; font-size: 10px; letter-spacing: 1px; }
.cz-level-meta .cz-level-handle { color: #ffaaee; }
.cz-level-meta .cz-level-status-draft { color: #ffaa33; }
.cz-level-meta .cz-level-status-published { color: #88ffaa; }
.cz-level-actions {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
.cz-level-actions button {
  background: rgba(255,102,221,0.1); border: 1px solid rgba(255,102,221,0.4);
  color: #ffaaee; font-family: monospace; font-size: 10px; letter-spacing: 1px;
  padding: 5px 8px; border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.cz-level-actions button:hover { background: #ff66dd; color: #200a18; border-color: #ffaaee; }
.cz-level-actions .cz-action-play {
  background: linear-gradient(135deg, #88ffaa, #44dd88); color: #002218; border-color: #aaffcc;
  font-weight: bold;
}
.cz-level-actions .cz-action-play:hover { filter: brightness(1.1); }
.cz-level-actions .cz-action-delete { color: #ff8888; border-color: rgba(255,85,85,0.4); }
.cz-level-actions .cz-action-delete:hover { background: rgba(255,85,85,0.2); color: #ff5555; border-color: #ff5555; }

.cz-sort-row {
  display: flex; gap: 8px; align-items: center;
}
.cz-sort-row label {
  color: #ffaaee; font-family: monospace; font-size: 11px; letter-spacing: 2px;
}
.cz-sort-row select {
  background: #0a020a; border: 1px solid rgba(255,102,221,0.32);
  color: #ffe0fa; font-family: monospace; font-size: 12px; padding: 6px 8px;
  border-radius: 4px; outline: none;
}

@media (max-width: 600px) {
  .cz-card { padding: 16px; border-radius: 12px; }
  .cz-card h3 { font-size: 16px; letter-spacing: 2px; }
  .cz-tabs { gap: 4px; }
  .cz-tab { font-size: 10px; padding: 5px 8px; }
  .cz-actions { flex-direction: column; }
  .cz-level-row { flex-wrap: wrap; }
  .cz-level-actions { width: 100%; justify-content: stretch; }
  .cz-level-actions button { flex: 1; }
}
/* === RABBITHOLE BEAMER === full-screen overlay: dice roll → warpspeed → land */
#rb-overlay {
  position: fixed; inset: 0;
  display: none;
  z-index: 9999;
  background: radial-gradient(circle at center, rgba(0,0,30,0.86) 0%, rgba(0,0,0,0.96) 80%);
  pointer-events: none;
  overflow: hidden;
}
#rb-overlay.rb-visible {
  display: block;
  animation: rb-fadein 0.18s ease-out;
}
@keyframes rb-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#rb-overlay .rb-stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
#rb-overlay .rb-die {
  font-size: 144px;
  line-height: 1;
  display: inline-block;
  text-shadow: 0 0 30px rgba(255,255,255,0.55), 0 0 60px rgba(120,200,255,0.3);
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.65));
  transition: transform 0.06s ease-out;
}
#rb-overlay .rb-result {
  display: block;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: 0;
  line-height: 1;
  margin-top: 14px;
  letter-spacing: 4px;
  transition: font-size 0.4s cubic-bezier(0.16,1,0.3,1), text-shadow 0.4s ease-out;
  text-shadow: none;
}
#rb-overlay.rb-visible .rb-result {
  font-size: 200px;
}
#rb-overlay .rb-result.rb-cyan {
  color: #6cf6ff;
  text-shadow:
    0 0 20px #6cf6ff,
    0 0 50px #2bd0ff,
    0 0 100px #1289c7;
  animation: rb-cyan-pulse 0.8s infinite alternate;
}
@keyframes rb-cyan-pulse {
  from { text-shadow: 0 0 20px #6cf6ff, 0 0 50px #2bd0ff, 0 0 100px #1289c7; }
  to   { text-shadow: 0 0 30px #6cf6ff, 0 0 70px #2bd0ff, 0 0 140px #6cf6ff; }
}
#rb-overlay .rb-result.rb-yellow {
  color: #ffe066;
  text-shadow: 0 0 20px #ffe066, 0 0 50px #ffaa00;
}
#rb-overlay .rb-subtitle {
  margin-top: 18px;
  font-family: system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  color: #fff;
  text-shadow: 0 0 12px rgba(120,200,255,0.7);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}
#rb-overlay.rb-visible .rb-stage .rb-subtitle:not(:empty) {
  opacity: 1;
  transform: translateY(0);
}

/* --- Warpspeed tunnel --- */
#rb-overlay .rb-tunnel {
  position: absolute;
  inset: 0;
  perspective: 800px;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
#rb-overlay.rb-warping .rb-tunnel {
  opacity: 1;
}
/* While warping: spin the whole stage + suppress the dice sprite. */
#rb-overlay.rb-warping .rb-stage {
  animation: rb-warp-spin 1.6s ease-in;
}
#rb-overlay.rb-warping .rb-die {
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 0.3s, transform 0.3s;
}
#rb-overlay.rb-warping .rb-result {
  font-size: 60px;
  opacity: 0.35;
  transition: font-size 0.6s ease-in, opacity 0.6s ease-in;
}
@keyframes rb-warp-spin {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); filter: blur(0px); }
  to   { transform: translate(-50%, -50%) rotate(220deg) scale(0.4); filter: blur(2px); }
}
#rb-overlay .rb-star {
  position: absolute;
  width: 4px; height: 4px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #6cf6ff, 0 0 18px #6cf6ff;
  transform: translate(-50%, -50%) translateZ(-200px);
  animation: rb-star-zoom 1.8s linear forwards;
}
@keyframes rb-star-zoom {
  0%   { transform: translate(-50%, -50%) translateZ(-1200px) scale(0.05); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateZ(900px) scale(6); opacity: 1; }
}
/* Mobile: drop the 3D tunnel, fall back to a radial fade for performance. */
#rb-overlay.rb-mobile.rb-warping .rb-tunnel {
  opacity: 1;
  background: radial-gradient(circle at center, rgba(108,246,255,0.0) 0%, rgba(108,246,255,0.6) 50%, rgba(0,0,0,0.95) 100%);
  animation: rb-mobile-fade 1.6s ease-in;
}
#rb-overlay.rb-mobile.rb-warping .rb-stage {
  animation: rb-mobile-stage-fade 1.6s ease-in;
}
#rb-overlay.rb-mobile.rb-warping .rb-star {
  display: none;
}
@keyframes rb-mobile-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rb-mobile-stage-fade {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
}
/* --- Final crossfade hatch (overlays everything, drives the .rb-fade
       div from JS by tweaking opacity in _tickWarp()) --- */
#rb-overlay .rb-fade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s linear;
}

/* Don't dim while rolling — keep dice readable */
#rb-overlay.rb-rolling .rb-tunnel {
  opacity: 0;
}
/* === END RABBITHOLE BEAMER === */

/* === SPACE GARAGE STANDALONE PAGE (TOS §3 carve-out 2026-04-29) === */
#space-garage-page-overlay {
  display: none;
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  /* Title-screen sticky icons (#btn-music, #btn-help, #btn-player-menu) sit
     at z-index 9999. We need to be above them. */
  z-index: 11000;
  overflow-y: auto;
  background: #03030a;
  font-family: monospace;
}
#space-garage-page-overlay.visible { display: block; }
/* When garage is open, lock body scroll AND hide every title-screen layer.
   Mirrors the body.porch-active / body.universe-active hide-pattern, since
   simply z-stacking above 9999 still leaves the OPTIONS modal + load-overlay
   chrome bleeding through tiny pixel gaps. */
body.garage-active { overflow: hidden; }
body.garage-active #c,
body.garage-active #load-overlay,
body.garage-active #title-footer,
body.garage-active #btn-music,
body.garage-active #btn-help,
body.garage-active #btn-player-menu,
body.garage-active #home-btn,
body.garage-active #hn-link,
body.garage-active #hotbar,
body.garage-active #hotbar-label,
body.garage-active #level-label,
body.garage-active #music-menu,
body.garage-active #player-menu-overlay,
body.garage-active #space-porch-overlay,
body.garage-active #empires-overlay,
body.garage-active #universe-overlay {
  display: none !important;
}
#space-garage-page-overlay .sgp-bg {
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 0, 200, 0.18), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(0, 220, 255, 0.16), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(180, 80, 255, 0.10), transparent 60%),
    #03030a;
  pointer-events: none;
}
#space-garage-page-overlay .sgp-scanlines {
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  mix-blend-mode: screen;
}
#space-garage-page-overlay .sgp-close {
  position: fixed; top: 14px; right: 16px;
  width: 38px; height: 38px;
  background: transparent;
  border: 1px solid rgba(255, 0, 200, 0.55);
  color: #ff66c8;
  font-size: 20px; font-family: monospace; cursor: pointer;
  border-radius: 50%;
  z-index: 11005;
  box-shadow: 0 0 12px rgba(255, 0, 200, 0.35);
  transition: all 0.18s ease;
}
#space-garage-page-overlay .sgp-close:hover {
  background: rgba(255, 0, 200, 0.18);
  color: #fff;
  box-shadow: 0 0 22px rgba(255, 0, 200, 0.7);
}
#space-garage-page-overlay .sgp-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  z-index: 1;
}
#space-garage-page-overlay .sgp-neon-wrap {
  text-align: center;
  margin: 0 0 36px;
}
#space-garage-page-overlay .sgp-neon-sign {
  display: inline-block;
  font-family: "Bebas Neue", "Arial Black", "Impact", monospace;
  font-size: clamp(48px, 11vw, 110px);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  position: relative;
  text-shadow:
    0 0 6px #fff,
    0 0 14px #ff2bd6,
    0 0 28px #ff2bd6,
    0 0 56px #b300ff,
    0 0 96px #5500ff;
  animation: sgp-neon-flicker 5s infinite;
}
#space-garage-page-overlay .sgp-neon-sign::before {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0, 230, 255, 0.55);
  text-shadow: 0 0 18px rgba(0, 230, 255, 0.55);
  z-index: -1;
  transform: translate(2px, 2px);
}
@keyframes sgp-neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 6px #fff,
      0 0 14px #ff2bd6,
      0 0 28px #ff2bd6,
      0 0 56px #b300ff,
      0 0 96px #5500ff;
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    text-shadow: none;
    opacity: 0.78;
  }
}
#space-garage-page-overlay .sgp-neon-sub {
  margin-top: 14px;
  color: #6efaff;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-shadow: 0 0 6px rgba(110, 250, 255, 0.55);
}
#space-garage-page-overlay .sg-section {
  margin: 0 0 24px;
  padding: 0;
  border: none;
}
#space-garage-page-overlay .sg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
#space-garage-page-overlay .sgp-config {
  margin-top: 18px;
  padding: 18px;
  background: rgba(8, 12, 28, 0.72);
  border: 1px solid rgba(0, 230, 255, 0.35);
  border-radius: 10px;
  box-shadow:
    inset 0 0 18px rgba(0, 230, 255, 0.08),
    0 0 24px rgba(0, 230, 255, 0.10);
}
#space-garage-page-overlay .sgp-section-h {
  margin: 0 0 12px;
  color: #6efaff;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-shadow: 0 0 8px rgba(110, 250, 255, 0.5);
  border-bottom: 1px solid rgba(0, 230, 255, 0.22);
  padding-bottom: 6px;
}
#space-garage-page-overlay .pm-config-row {
  display: flex; align-items: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}
#space-garage-page-overlay .pm-file-btn {
  background: transparent;
  border: 1px solid rgba(255, 0, 200, 0.55);
  color: #ff66c8;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}
#space-garage-page-overlay .pm-file-btn:hover {
  background: rgba(255, 0, 200, 0.18);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 0, 200, 0.6);
}
@media (max-width: 480px) {
  #space-garage-page-overlay .sgp-inner { padding: 40px 14px 80px; }
  #space-garage-page-overlay .sg-grid { grid-template-columns: 1fr; }
}

/* Player-menu link button (replaces in-modal sg-section). */
.pm-garage-link-row {
  margin: 18px 0;
  text-align: center;
  padding: 14px;
  border: 1px dashed rgba(255, 0, 200, 0.45);
  border-radius: 8px;
  background: rgba(20, 8, 32, 0.5);
}
.pm-garage-link-btn {
  background: transparent;
  border: 1px solid #ff66c8;
  color: #ff66c8;
  padding: 10px 22px;
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(255, 102, 200, 0.6);
  box-shadow: 0 0 10px rgba(255, 102, 200, 0.25);
  transition: all 0.18s ease;
}
.pm-garage-link-btn:hover {
  background: rgba(255, 102, 200, 0.15);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 102, 200, 0.7);
}
.pm-garage-link-sub {
  margin-top: 6px;
  color: #7a8ba8;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 1.5px;
}

/* DONE button at the bottom of the garage page — big neon-cyan CTA. */
#space-garage-page-overlay .sgp-done-row {
  margin: 28px 0 16px;
  text-align: center;
}
#space-garage-page-overlay .sgp-done-btn {
  display: inline-block;
  background: transparent;
  border: 2px solid #6efaff;
  color: #6efaff;
  padding: 14px 64px;
  font-family: monospace;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.32em;
  cursor: pointer;
  border-radius: 6px;
  text-shadow: 0 0 8px rgba(110, 250, 255, 0.65);
  box-shadow:
    0 0 14px rgba(110, 250, 255, 0.35),
    inset 0 0 14px rgba(110, 250, 255, 0.10);
  transition: all 0.18s ease;
}
#space-garage-page-overlay .sgp-done-btn:hover {
  background: rgba(110, 250, 255, 0.14);
  color: #fff;
  border-color: #fff;
  box-shadow:
    0 0 28px rgba(110, 250, 255, 0.85),
    inset 0 0 18px rgba(110, 250, 255, 0.25);
}
#space-garage-page-overlay .sgp-done-btn:active {
  transform: translateY(1px);
}
/* === END SPACE GARAGE STANDALONE PAGE === */

/* === MEMETIC MAP info-card popup === */
.umap-info-card {
  position: fixed;
  width: 260px;
  z-index: 12000;
  background: rgba(8, 12, 28, 0.96);
  border: 1px solid rgba(110, 250, 255, 0.55);
  border-radius: 8px;
  padding: 12px 14px 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #e0e6f0;
  box-shadow:
    0 0 18px rgba(110, 250, 255, 0.30),
    0 6px 20px rgba(0, 0, 0, 0.55),
    inset 0 0 14px rgba(110, 250, 255, 0.06);
  animation: umc-pop 0.16s ease-out;
}
.umap-info-card.is-blocked {
  border-color: rgba(255, 80, 100, 0.55);
  box-shadow:
    0 0 18px rgba(255, 80, 100, 0.28),
    0 6px 20px rgba(0, 0, 0, 0.55);
}
@keyframes umc-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.umap-info-card .umc-close {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px;
  background: transparent; border: none;
  color: #6efaff; font-size: 18px; line-height: 1;
  cursor: pointer; opacity: 0.7;
  font-family: monospace;
}
.umap-info-card .umc-close:hover { opacity: 1; color: #fff; }
.umap-info-card .umc-h {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(110, 250, 255, 0.18);
}
.umap-info-card.is-blocked .umc-h { border-bottom-color: rgba(255, 80, 100, 0.18); }
.umap-info-card .umc-dot {
  display: inline-block; width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}
.umap-info-card .umc-name {
  color: #fff; font-weight: bold; font-size: 13px;
  letter-spacing: 0.16em;
}
.umap-info-card .umc-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  margin-bottom: 8px;
}
.umap-info-card .umc-stat {
  font-size: 10.5px;
}
.umap-info-card .umc-stat span {
  color: #7a8ba8;
  display: block;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9px;
}
.umap-info-card .umc-stat b {
  color: #e0e6f0;
  font-weight: 600;
  font-size: 11px;
}
.umap-info-card .umc-blurb {
  color: #a8b8c8;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.umap-info-card .umc-foot {
  margin-top: 6px;
}
.umap-info-card .umc-pull-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid #6efaff;
  color: #6efaff;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: bold;
  cursor: pointer;
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(110, 250, 255, 0.5);
  transition: all 0.15s ease;
}
.umap-info-card .umc-pull-btn:hover {
  background: rgba(110, 250, 255, 0.15);
  color: #fff;
  box-shadow: 0 0 14px rgba(110, 250, 255, 0.7);
}
.umap-info-card .umc-blocked {
  color: #ff7080;
  font-size: 11px;
  text-align: center;
  padding: 6px;
  background: rgba(255, 80, 100, 0.08);
  border-radius: 4px;
}
.umap-info-card .umc-soon {
  color: #7a8ba8;
  font-size: 11px;
  text-align: center;
  font-style: italic;
}
/* === END MEMETIC MAP info-card popup === */

/* === MEMETIC EMPIRES === (turn-based hex strategy spinoff, v0.1) */
.empires-overlay {
  position: fixed; inset: 0;
  display: none;
  background: #06090f;
  color: #e0e6ef;
  font-family: monospace;
  z-index: 9000;
  user-select: none;
}
.empires-overlay.visible { display: block; }
.empires-overlay .empires-topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: rgba(10,15,30,0.92);
  border-bottom: 1px solid #1a3a6e;
  z-index: 10;
}
.empires-overlay .emp-tb-left, .empires-overlay .emp-tb-right { display: flex; align-items: center; gap: 10px; }
.empires-overlay .emp-tb-mid  { display: flex; align-items: center; gap: 6px; }
.empires-overlay .emp-sep { color: #1a3a6e; }
.empires-overlay #emp-energy { color: #ffd700; letter-spacing: 1px; }
.empires-overlay #emp-faction { color: #67e8f9; }
.empires-overlay .emp-tab {
  background: transparent; color: #67e8f9; border: 1px solid #1a3a6e;
  padding: 4px 12px; cursor: pointer; font-family: monospace; letter-spacing: 1px;
}
.empires-overlay .emp-tab.is-active { background: #1a3a6e; color: #fff; }
.empires-overlay .emp-tab[data-locked="1"] { opacity: 0.45; cursor: not-allowed; }
.empires-overlay .emp-tb-right button {
  background: transparent; color: #4dffa1; border: 1px solid #1a3a6e;
  padding: 4px 12px; cursor: pointer; font-family: monospace; letter-spacing: 1px;
}
.empires-overlay .emp-tb-right button:hover { background: #1a3a6e; color: #fff; }
.empires-overlay .emp-tb-right .emp-primary { background: #14532d; color: #4dffa1; border-color: #4dffa1; }
.empires-overlay .emp-tb-right .emp-primary:hover { background: #4dffa1; color: #06090f; }
.empires-overlay .emp-canvas {
  position: absolute; top: 44px; left: 0; right: 280px; bottom: 0;
  display: block;
  background: #06090f;
  cursor: crosshair;
}
.empires-overlay .emp-sidebar {
  position: absolute; top: 44px; right: 0; width: 280px; bottom: 0;
  background: rgba(10,15,30,0.94);
  border-left: 1px solid #1a3a6e;
  padding: 12px;
  overflow-y: auto;
  z-index: 5;
}
.empires-overlay .emp-side-title { color: #67e8f9; letter-spacing: 2px; margin-bottom: 8px; font-size: 11px; }
.empires-overlay .emp-side-row { padding: 4px 0; border-bottom: 1px solid #122443; font-size: 12px; }
.empires-overlay .emp-side-h { color: #ffd700; margin-top: 12px; margin-bottom: 4px; font-size: 11px; letter-spacing: 1px; }
.empires-overlay .emp-side-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.empires-overlay .emp-side-btn {
  background: #1a3a6e; color: #fff; border: 1px solid #4dffa1;
  padding: 6px 10px; cursor: pointer; font-family: monospace; letter-spacing: 1px;
}
.empires-overlay .emp-side-btn:hover { background: #4dffa1; color: #06090f; }
.empires-overlay .emp-log {
  position: absolute; bottom: 6px; left: 6px; max-width: 50%;
  font-size: 11px; color: #94a3b8;
  pointer-events: none;
  z-index: 4;
}
.empires-overlay .emp-log-line { padding: 2px 6px; background: rgba(10,15,30,0.7); margin-top: 2px; transition: opacity 0.6s; }
.empires-overlay .emp-toast {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  background: rgba(20,40,80,0.96); color: #fff;
  padding: 10px 18px; border: 1px solid #4dffa1; letter-spacing: 1px;
  z-index: 20; pointer-events: none;
  transition: opacity 0.5s;
}
.empires-overlay .emp-toast-out { opacity: 0; }

/* Modals */
.empires-overlay .emp-modal-host { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.empires-overlay .emp-modal-bg {
  position: absolute; inset: 0;
  background: rgba(6,9,15,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.empires-overlay .emp-modal {
  background: #0c1428; border: 1px solid #4dffa1;
  padding: 22px 28px;
  max-width: 720px; min-width: 420px;
  max-height: 80vh; overflow-y: auto;
  box-shadow: 0 0 30px rgba(0,238,255,0.18);
}
.empires-overlay .emp-modal-wide { max-width: 1080px; }
.empires-overlay .emp-modal-h { color: #4dffa1; letter-spacing: 3px; font-size: 18px; margin-bottom: 6px; }
.empires-overlay .emp-modal-sub { color: #94a3b8; font-size: 12px; margin-bottom: 14px; }
.empires-overlay .emp-modal-foot { margin-top: 16px; display: flex; justify-content: flex-end; gap: 6px; }
.empires-overlay .emp-btn-secondary {
  background: transparent; color: #94a3b8; border: 1px solid #1a3a6e;
  padding: 6px 12px; cursor: pointer; font-family: monospace; letter-spacing: 1px;
}
.empires-overlay .emp-btn-secondary:hover { background: #1a3a6e; color: #fff; }

/* Faction picker grid */
.empires-overlay .emp-faction-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.empires-overlay .emp-faction-card {
  background: #0a1226; border: 2px solid #1a3a6e;
  padding: 14px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.empires-overlay .emp-faction-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(77,255,161,0.25);
}
.empires-overlay .emp-faction-sigil { display: block; margin: 0 auto 8px; background: transparent; }
.empires-overlay .emp-faction-name { color: #fff; font-size: 14px; letter-spacing: 1px; text-align: center; }
.empires-overlay .emp-faction-tag  { color: #67e8f9; font-size: 11px; text-align: center; margin-top: 4px; }
.empires-overlay .emp-faction-doctrine { color: #94a3b8; font-size: 10px; text-align: center; margin-top: 2px; }

/* List rows (build / meme picker / tech) */
.empires-overlay .emp-list { display: flex; flex-direction: column; gap: 4px; }
.empires-overlay .emp-list-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #0a1226; border: 1px solid #1a3a6e;
  padding: 10px 14px; cursor: pointer;
  transition: background 0.1s;
}
.empires-overlay .emp-list-row:hover { background: #163057; }
.empires-overlay .emp-list-row.is-locked { opacity: 0.4; cursor: not-allowed; }
.empires-overlay .emp-list-name { color: #fff; }
.empires-overlay .emp-list-stat { color: #ffd700; font-size: 12px; }

.empires-overlay .emp-meme-list .emp-list-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.empires-overlay .emp-meme-text { color: #67e8f9; font-size: 12px; }
.empires-overlay .emp-meme-body { color: #cbd5e1; }
.empires-overlay .emp-meme-stats { color: #ffd700; font-size: 11px; letter-spacing: 1px; }

/* Tech tree grid */
.empires-overlay .emp-tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.empires-overlay .emp-tech-col { display: flex; flex-direction: column; gap: 4px; }
.empires-overlay .emp-tech-cat { color: #4dffa1; letter-spacing: 2px; font-size: 11px; padding: 4px 0; border-bottom: 1px solid #1a3a6e; }
.empires-overlay .emp-tech-card {
  background: #0a1226; border: 1px solid #1a3a6e;
  padding: 8px 10px; cursor: default;
}
.empires-overlay .emp-tech-card.is-avail { cursor: pointer; border-color: #4dffa1; }
.empires-overlay .emp-tech-card.is-avail:hover { background: #163057; }
.empires-overlay .emp-tech-card.is-done  { border-color: #22c55e; opacity: 0.7; }
.empires-overlay .emp-tech-card.is-locked { opacity: 0.45; }
.empires-overlay .emp-tech-name { color: #fff; font-size: 12px; }
.empires-overlay .emp-tech-cost { color: #ffd700; font-size: 10px; }
.empires-overlay .emp-tech-desc { color: #94a3b8; font-size: 10px; margin-top: 4px; line-height: 1.4; }

/* === END MEMETIC EMPIRES === */