@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --hud-green: #39ff8f;
  --hud-green-dim: #1c8a52;
  --hud-orange: #ff9130;
  --hud-red: #ff4655;
  --bg-deep: #050b10;
  --bg-panel: rgba(12, 26, 22, 0.85);
  --panel-border: rgba(57, 255, 143, 0.35);
  --text-main: #d9fbe8;
  --text-dim: #7fa695;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  color: var(--text-main);
  background: radial-gradient(circle at 50% 0%, #0e2a22, var(--bg-deep) 65%);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- moving space backdrop ---- */
.starfield {
  position: fixed;
  inset: -400px;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 50% 40%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 55%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 85%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 90%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 92% 25%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 55%, #fff 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 340px;
  opacity: 0.8;
  will-change: transform;
  animation: starfield-fly 22s linear infinite;
}
@keyframes starfield-fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(-340px, 340px); }
}

.starfox-horizon {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.asteroid {
  position: absolute;
  left: -80px;
  width: var(--size, 40px);
  height: var(--size, 40px);
  opacity: var(--opacity, 0.4);
  animation: asteroid-drift var(--duration, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin {
  width: 100%;
  height: 100%;
  animation: asteroid-tumble var(--spin, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.asteroid-spin svg { display: block; width: 100%; height: 100%; }
.asteroid-spin polygon {
  fill: rgba(12, 26, 22, 0.6);
  stroke: var(--hud-green-dim);
  stroke-width: 1.4;
}
@keyframes asteroid-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 160px)); }
}
@keyframes asteroid-tumble {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(57, 255, 143, 0.03),
    rgba(57, 255, 143, 0.03) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ---- page layout ---- */
.page-wrap {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px 60px;
}

.hud-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--panel-border);
  padding: 36px 32px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 40px rgba(57, 255, 143, 0.08), inset 0 0 60px rgba(0,0,0,0.4);
}
.hud-panel.wide { max-width: 860px; }
.hud-panel.xwide { max-width: 1040px; }

.corner { position: absolute; width: 18px; height: 18px; border: 2px solid var(--hud-green); }
.corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.callsign-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }

.callsign {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  line-height: 1.6;
  color: var(--hud-orange);
  text-transform: uppercase;
  flex: 1;
}

.nav-links { display: flex; gap: 8px; flex-shrink: 0; }
.logout-link {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid var(--panel-border);
  padding: 5px 10px;
  flex-shrink: 0;
}
.logout-link:hover { color: var(--hud-green); border-color: var(--hud-green); }

h1 {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 1.15rem;
  line-height: 1.6;
  margin: 10px 0 8px;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  text-shadow: 0 0 12px rgba(57, 255, 143, 0.45);
}

.subtitle {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 22px;
  letter-spacing: 0.03em;
}

/* ---- filter tabs ---- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--panel-border);
}
.hud-tab {
  font-family: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--panel-border);
  padding: 6px 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hud-tab:hover { color: var(--hud-green); border-color: var(--hud-green-dim); }
.hud-tab.active {
  color: var(--hud-green);
  border-color: var(--hud-green);
  background: rgba(57, 255, 143, 0.12);
  box-shadow: 0 0 10px rgba(57,255,143,0.15);
}

/* ---- console grid / cards ---- */
.console-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.console-card {
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.console-card.hidden { display: none; }
.console-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 8px;
}
.console-name-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.console-icon { font-size: 1.1rem; flex-shrink: 0; }
.console-name {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--hud-green);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid currentColor;
  flex-shrink: 0;
  color: var(--hud-green-dim);
}
.card-blurb { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--text-main); flex-grow: 1; }
a.dl {
  align-self: flex-start;
  color: var(--hud-green);
  text-decoration: none;
  border: 1px solid var(--hud-green-dim);
  padding: 5px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
a.dl:hover { background: rgba(57, 255, 143, 0.14); }

/* ---- comm-link transmission window ---- */
.comm-window {
  margin-top: 28px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}
.comm-portrait {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57, 255, 143, 0.06);
  border-right: 1px solid var(--panel-border);
}
.comm-portrait svg { filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.comm-body { padding: 10px 12px; flex: 1; min-width: 0; }
.comm-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hud-orange);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.comm-label .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hud-red); flex-shrink: 0;
  animation: comm-blink 1s steps(1) infinite;
}
@keyframes comm-blink { 50% { opacity: 0; } }
.comm-body p { margin: 0; font-size: 0.78rem; font-style: italic; color: var(--text-main); line-height: 1.4; }

/* ---- back button ---- */
.hud-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(57,255,143,0.18), rgba(57,255,143,0.06));
  border: 1px solid var(--hud-green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -3px 0 rgba(0,0,0,0.35);
  color: var(--hud-green);
  font-family: "Press Start 2P", "Consolas", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.62rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
}
.hud-btn:hover { background: rgba(57, 255, 143, 0.28); }
.hud-btn:active { transform: translateY(2px); }

@media (max-width: 480px) {
  .page-wrap { padding: 24px 14px 40px; }
  .hud-panel { padding: 26px 18px; }
}

/* ---- tool page components ---- */
.tool-note { font-size: 0.72rem; color: var(--text-dim); margin: 0 0 18px; line-height: 1.5; }

.tool-field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tool-field-label {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.tool-textarea {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 12px;
  box-sizing: border-box;
}
.tool-textarea:focus { outline: none; border-color: var(--hud-green); }

.tool-text-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 10px 12px;
  box-sizing: border-box;
  width: 100%;
}
.tool-text-input:focus { outline: none; border-color: var(--hud-green); }

.tool-output {
  width: 100%;
  min-height: 90px;
  max-height: 420px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--hud-green);
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  box-sizing: border-box;
}
.tool-output.error-text { color: var(--hud-red); }

.tool-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }

.tool-btn {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hud-green);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hud-green-dim);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tool-btn:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }
.tool-btn:active { transform: translateY(1px); }
.tool-btn.ghost { color: var(--text-dim); border-color: var(--panel-border); }
.tool-btn.ghost:hover { color: var(--hud-green); border-color: var(--hud-green-dim); }
.tool-btn:disabled, .tool-btn:disabled:hover { opacity: 0.4; cursor: not-allowed; background: rgba(0, 0, 0, 0.3); border-color: var(--panel-border); color: var(--text-dim); }

.tool-checks { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 16px; }
.tool-check { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--text-main); }
.tool-check input { accent-color: var(--hud-green); width: 15px; height: 15px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

.md-preview {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  padding: 14px;
  min-height: 160px;
  max-height: 420px;
  overflow: auto;
  font-size: 0.85rem;
  line-height: 1.55;
  box-sizing: border-box;
}
.md-preview h1, .md-preview h2, .md-preview h3 { color: var(--hud-green); font-family: inherit; text-shadow: none; margin: 0.6em 0 0.3em; }
.md-preview h1:first-child, .md-preview h2:first-child, .md-preview h3:first-child { margin-top: 0; }
.md-preview code { background: rgba(57, 255, 143, 0.1); padding: 1px 5px; font-size: 0.9em; }
.md-preview pre { background: rgba(0, 0, 0, 0.4); padding: 10px; overflow-x: auto; border: 1px solid var(--panel-border); }
.md-preview pre code { background: none; padding: 0; }
.md-preview a { color: var(--hud-orange); }
.md-preview blockquote { border-left: 2px solid var(--hud-green-dim); margin: 0.5em 0; padding: 2px 12px; color: var(--text-dim); }
.md-preview ul, .md-preview ol { padding-left: 1.4em; }
.md-preview hr { border: none; border-top: 1px dashed var(--panel-border); margin: 1em 0; }
.md-preview p { margin: 0.6em 0; }

.password-display { display: flex; gap: 8px; margin-bottom: 16px; }
.password-display input {
  flex: 1;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--hud-green);
  font-family: "Consolas", monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  padding: 11px 12px;
  min-width: 0;
}

.strength-bar { height: 6px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--panel-border); margin-bottom: 6px; overflow: hidden; }
.strength-fill { height: 100%; width: 0%; background: var(--hud-red); transition: width 0.2s, background 0.2s; }
.strength-label { font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 18px; }

mark.regex-match { background: rgba(57, 255, 143, 0.3); color: var(--hud-green); padding: 0 1px; border-radius: 1px; }

.match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.match-list li { border: 1px solid var(--panel-border); background: rgba(0, 0, 0, 0.25); padding: 8px 10px; font-size: 0.78rem; }
.match-list .match-index { color: var(--hud-orange); margin-right: 8px; }

.copy-toast { font-size: 0.68rem; color: var(--hud-green); margin-left: 2px; opacity: 0; }
.copy-toast.show { opacity: 1; }

.tool-file-input {
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.8rem;
}
.tool-file-input::file-selector-button {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hud-green);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hud-green-dim);
  padding: 9px 16px;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.15s, border-color 0.15s;
}
.tool-file-input::file-selector-button:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }

.tool-select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 9px 10px;
}
.tool-select:focus { outline: none; border-color: var(--hud-green); }

.tool-dim-row { display: flex; gap: 12px; }
.tool-dim-row > div { flex: 1; }

.canvas-frame {
  border: 1px solid var(--panel-border);
  background: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  overflow: auto;
}
.canvas-frame canvas { max-width: 100%; height: auto; display: block; }
.canvas-frame img { max-width: 100%; display: block; }

.tool-video-preview {
  width: 100%;
  max-height: 340px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
  display: block;
}

.progress-bar { height: 8px; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--panel-border); overflow: hidden; margin: 4px 0 10px; }
.progress-fill { height: 100%; width: 0%; background: var(--hud-green); transition: width 0.15s; }

/* ---- Slippy TV ---- */
.tv-frame {
  background: linear-gradient(160deg, #10241c, #060e0b);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 24px rgba(57, 255, 143, 0.06);
}
.tv-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 2px solid var(--hud-green-dim);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}
.tv-screen video, .tv-screen #yt-player-wrap { width: 100%; height: 100%; display: block; position: relative; z-index: 1; background: #000; }
.tv-screen video { border: 0; }

/* ---- fullscreen viewer ---- */
/* The toggle button lives inside .tv-screen (not the external .tv-controls
   row) specifically so it's still reachable to exit fullscreen -- browser
   fullscreen only paints the fullscreened element's own subtree, so a
   sibling control outside .tv-frame would become permanently unclickable
   the moment fullscreen engages. */
.tv-fullscreen-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.55);
  color: var(--hud-green);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.tv-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.8); border-color: var(--hud-green); }
.tv-screen.tv-off .tv-fullscreen-btn { display: none; }

.tv-frame:fullscreen, .tv-frame:-webkit-full-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.tv-frame:fullscreen .tv-screen, .tv-frame:-webkit-full-screen .tv-screen {
  width: auto;
  height: 100%;
  max-width: 100%;
  border: none;
}
.tv-screen #yt-player-wrap iframe { width: 100%; height: 100%; display: block; border: 0; }

.tv-off-msg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: #000;
  color: var(--hud-green-dim);
  font-family: "Press Start 2P", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
}
.tv-screen.tv-off .tv-off-msg { opacity: 1; }
.tv-screen.tv-off iframe, .tv-screen.tv-off video { visibility: hidden; }

.tv-loading-msg {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--hud-green);
  font-family: "Press Start 2P", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(57, 255, 143, 0.5);
  opacity: 0;
  pointer-events: none;
}
.tv-screen.buffering .tv-loading-msg { opacity: 1; }
.tv-loading-msg .tv-loading-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hud-green);
  animation: comm-blink 0.9s steps(1) infinite;
}

.tv-static-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0px, rgba(255, 255, 255, 0.12) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(57, 255, 143, 0.06) 0px, transparent 2px);
}
.tv-screen.flicker .tv-static-overlay { animation: tv-flicker-anim 0.35s steps(6) forwards; }
@keyframes tv-flicker-anim {
  0% { opacity: 0.9; } 25% { opacity: 0.25; } 50% { opacity: 0.75; } 75% { opacity: 0.15; } 100% { opacity: 0; }
}

.tv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }

.tv-power-btn {
  padding: 9px 14px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.tv-power-btn:hover { border-color: var(--hud-green-dim); color: var(--hud-green); }
.tv-power-btn.on {
  background: rgba(57, 255, 143, 0.16);
  border-color: var(--hud-green);
  color: var(--hud-green);
  box-shadow: 0 0 10px rgba(57, 255, 143, 0.3);
}

.channel-readout {
  font-family: "Press Start 2P", monospace;
  font-size: 0.8rem;
  color: var(--hud-green);
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--panel-border);
  padding: 10px 14px;
  text-shadow: 0 0 8px rgba(57, 255, 143, 0.5);
  min-width: 140px;
  text-align: center;
  flex-shrink: 0;
}

.tv-nav-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--hud-green-dim);
  background: rgba(0, 0, 0, 0.3);
  color: var(--hud-green);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.tv-nav-btn:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }

.volume-row { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; }
.volume-row input[type="range"] { flex: 1; accent-color: var(--hud-green); }

.mute-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-main);
  font-size: 1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.mute-btn:hover { border-color: var(--hud-green); }

/* ---- calculators (Simple Calculator, Tip Calculator) ---- */
/* Numeric displays use a plain monospace font, never "Press Start 2P" —
   that pixel font draws 8 as S and 0 as O at small sizes. */
.calc-display {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--hud-green);
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 2.1rem;
  text-align: right;
  padding: 20px 16px 14px;
  margin-bottom: 4px;
  overflow-x: auto;
  white-space: nowrap;
  box-sizing: border-box;
}
.calc-subdisplay {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: right;
  min-height: 1.1em;
  padding: 0 16px;
  margin-bottom: 16px;
}

.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.calc-key {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1.15rem;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  padding: 16px 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.calc-key:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }
.calc-key:active { transform: translateY(1px); }
.calc-key.calc-op { color: var(--hud-orange); border-color: rgba(255, 145, 48, 0.35); }
.calc-key.calc-op:hover { background: rgba(255, 145, 48, 0.14); border-color: var(--hud-orange); }
.calc-key.calc-op.active { background: rgba(255, 145, 48, 0.22); border-color: var(--hud-orange); }
.calc-key.calc-equals { color: var(--hud-green); border-color: var(--hud-green-dim); grid-column: span 2; }
.calc-key.calc-clear, .calc-key.calc-back { color: var(--hud-red); border-color: rgba(255, 70, 85, 0.35); }
.calc-key.calc-clear:hover, .calc-key.calc-back:hover { background: rgba(255, 70, 85, 0.14); border-color: var(--hud-red); }
.calc-key.calc-zero { grid-column: span 2; }

.calc-result-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.calc-result-tile { border: 1px solid var(--panel-border); background: rgba(0, 0, 0, 0.25); padding: 14px 12px; text-align: center; }
.calc-result-tile .calc-result-value {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1.25rem;
  color: var(--hud-green);
  display: block;
  margin-bottom: 8px;
}
.calc-result-tile .calc-result-label { font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); }
.calc-result-tile.highlight { border-color: var(--hud-green-dim); background: rgba(57, 255, 143, 0.06); }
.calc-result-tile.highlight .calc-result-value { font-size: 1.55rem; }

.calc-slider-value {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.9rem;
  color: var(--hud-green);
  min-width: 44px;
  text-align: right;
}

.tip-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.tip-quick-btn {
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-main);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tip-quick-btn:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }
.tip-quick-btn.active { color: var(--hud-green); border-color: var(--hud-green); background: rgba(57, 255, 143, 0.14); }

.tool-number-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--panel-border);
  color: var(--hud-green);
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1rem;
  padding: 11px 12px;
  box-sizing: border-box;
}
.tool-number-input:focus { outline: none; border-color: var(--hud-green); }

/* ---- World Internet Radio ---- */
.radio-now-playing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
  margin: 20px 0;
}
.radio-now-playing-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.radio-now-playing-info .console-name { max-width: 220px; }

/* Station names run longer than typical project-card titles — wrap instead
   of ellipsizing, so the full name is always readable. Some tags (country/
   network labels) are also long, so name and tag are stacked in separate
   rows here rather than sharing the homepage cards' single side-by-side
   row — no flex-basis/shrink combination keeps two long, independently-
   wrapping strings from colliding when they share one line. */
.station-card .console-name { white-space: normal; overflow: visible; text-overflow: clip; }
.station-card .console-card-head { flex-direction: column; align-items: flex-start; gap: 4px; }

.radio-transport { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.radio-play-btn {
  width: 42px;
  height: 42px;
  font-size: 1.1rem;
  color: var(--hud-green);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--hud-green-dim);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.radio-play-btn:hover { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }
.radio-play-btn.playing {
  background: rgba(57, 255, 143, 0.16);
  border-color: var(--hud-green);
  box-shadow: 0 0 10px rgba(57, 255, 143, 0.3);
}

.radio-status {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.radio-status.tuning { color: var(--hud-orange); }
.radio-status.on-air { color: var(--hud-green); text-shadow: 0 0 8px rgba(57, 255, 143, 0.5); }
.radio-status.paused { color: var(--text-dim); }
.radio-status.error { color: var(--hud-red); }

.radio-volume { flex: 1 1 200px; min-width: 160px; }

.region-heading {
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--hud-orange);
  border-bottom: 1px dashed var(--panel-border);
  padding-bottom: 6px;
  margin: 28px 0 12px;
}
.region-heading:first-of-type { margin-top: 8px; }

.station-card.playing {
  border-color: var(--hud-green);
  background: rgba(57, 255, 143, 0.04);
  box-shadow: 0 0 10px rgba(57, 255, 143, 0.12);
}

.station-tune-btn {
  align-self: flex-start;
  color: var(--hud-green);
  background: none;
  border: 1px solid var(--hud-green-dim);
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.station-tune-btn:hover { background: rgba(57, 255, 143, 0.14); }
.station-tune-btn.playing { background: rgba(57, 255, 143, 0.22); border-color: var(--hud-green); color: var(--hud-green); }

/* ---- search bar (project archive) ---- */
.search-bar { position: relative; margin-bottom: 18px; }
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  opacity: 0.5;
  pointer-events: none;
}
.search-input { padding-left: 34px; }
.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, color 0.15s;
}
.search-bar.has-query .search-clear-btn { opacity: 1; pointer-events: auto; }
.search-clear-btn:hover { color: var(--hud-green); }
.search-empty-msg {
  display: none;
  color: var(--text-dim);
  font-size: 0.82rem;
  padding: 18px 4px;
  text-align: center;
}
.search-empty-msg.show { display: block; }

/* ---- generic show/hide utility (mode tabs, etc.) ---- */
.hidden { display: none; }

/* ---- SlipCord: text chat (ported from the gambling.slippylabs.com casino chat) ---- */
.chat-box {
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.3);
  margin: 14px 0;
  display: flex;
  flex-direction: column;
}
.chat-log {
  height: 320px;
  overflow-y: auto;
  padding: 8px 10px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 720px) { .chat-log { height: 220px; } }
.chat-msg { color: var(--text-main); word-break: break-word; }
.chat-msg .who { color: var(--hud-orange); font-weight: bold; margin-right: 6px; }
.chat-input-row { display: flex; border-top: 1px dashed var(--panel-border); }
.chat-input-row input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.4);
  border: none;
  color: var(--text-main);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.82rem;
}
.chat-input-row input:focus { outline: none; }
.chat-input-row button {
  border: none;
  border-left: 1px dashed var(--panel-border);
  background: transparent;
  color: var(--hud-green);
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
.chat-input-row button:hover { background: rgba(57,255,143,0.12); }
.chat-input-row { position: relative; }
.emoji-picker-btn { border: none; border-left: 1px dashed var(--panel-border); background: transparent; color: var(--text-main); padding: 8px 10px; cursor: pointer; font-family: inherit; font-size: 0.95rem; line-height: 1; }
.emoji-picker-btn:hover { background: rgba(57,255,143,0.12); }
.emoji-picker-btn.active { background: rgba(57,255,143,0.18); }
.emoji-picker-popup { display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 4px; width: 210px; max-width: calc(100vw - 20px); max-height: 180px; overflow-y: auto; background: var(--bg-panel); border: 1px solid var(--panel-border); box-shadow: 0 4px 16px rgba(0,0,0,0.5); padding: 6px; z-index: 50; }
.emoji-picker-popup.open { display: block; }
.emoji-picker-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.emoji-picker-grid button { border: none; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 6px 0; border-radius: 2px; display: flex; align-items: center; justify-content: center; }
.emoji-picker-grid button:hover { background: rgba(57,255,143,0.18); }
@media (max-width: 480px) { .emoji-picker-popup { left: 0; right: 0; width: auto; } }

/* ---- SlipCord: per-person volume slider in the member list ---- */
#member-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.member-volume-slider { width: 80px; accent-color: var(--hud-green); flex-shrink: 0; }

/* ---- SlipCord: chat is first in the right column (see index.html) so it's
   visible near the top of the room view without scrolling, instead of being
   buried below the Mic and Member cards. ---- */
#member-list { max-height: 220px; overflow-y: auto; }

/* =======================================================================
   Karaoke additions on top of the shared Star Fox HUD theme.
   ======================================================================= */

/* ---- song picker ---- */
.song-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.song-card {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(8, 20, 17, 0.72);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.song-card.selected {
  border-color: var(--hud-green);
  box-shadow: 0 0 0 1px var(--hud-green), 0 0 18px rgba(57, 255, 143, 0.25);
}
.song-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.song-title { color: var(--hud-green); font-weight: 700; line-height: 1.3; }
.song-meta { margin: 0; font-size: 0.82rem; color: var(--text-main); }
.song-credit { margin: 0; font-size: 0.7rem; color: var(--text-dim); line-height: 1.5; }
.song-duet { margin: 0; font-size: 0.74rem; color: var(--hud-orange); }
.song-best { margin: 0; font-size: 0.76rem; color: var(--text-dim); }
.song-card .hud-btn { margin-top: auto; }

.tag.diff-easy { border-color: rgba(57, 255, 143, 0.5); color: var(--hud-green); }
.tag.diff-medium { border-color: rgba(255, 145, 48, 0.6); color: var(--hud-orange); }
.tag.diff-hard { border-color: rgba(255, 70, 85, 0.6); color: var(--hud-red); }

/* ---- room bar ---- */
.room-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(57, 255, 143, 0.18);
  margin-bottom: 14px;
}
.room-bar-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.room-bar-right { display: flex; align-items: center; gap: 10px; }
.room-code-label { color: var(--hud-green); letter-spacing: 0.08em; }
.stage-song-title { color: var(--hud-green); font-size: 1.05rem; font-weight: 700; }
.stage-song-sub { color: var(--text-dim); font-size: 0.78rem; }

/* ---- stage HUD ----
   Numeric readouts deliberately use the body monospace face, never
   Press Start 2P: in that pixel font 8 is indistinguishable from S and
   0 from O, which makes a score unreadable at a glance. */
.stage-hud {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.stage-readout { display: flex; align-items: baseline; gap: 8px; }
.readout-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.readout-value {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--hud-green);
  font-variant-numeric: tabular-nums;
}
.readout-small {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}
.accuracy-bar {
  flex: 1 1 200px;
  height: 12px;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}
.accuracy-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--hud-green-dim), var(--hud-green));
  transition: width 0.12s linear;
}
.countdown {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--hud-orange);
  font-variant-numeric: tabular-nums;
}

/* ---- pitch ribbon ---- */
.pitch-ribbon {
  display: block;
  width: 100%;
  height: 260px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(10, 30, 24, 0.9), rgba(4, 12, 10, 0.95));
  box-shadow: inset 0 0 40px rgba(57, 255, 143, 0.08);
}

/* ---- lyrics ---- */
.lyric-board {
  margin-top: 14px;
  text-align: center;
  min-height: 84px;
}
.lyric-current {
  font-size: clamp(1.1rem, 3.4vw, 1.9rem);
  line-height: 1.5;
  color: var(--text-dim);
  word-break: break-word;
}
.lyric-next {
  margin-top: 8px;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: rgba(127, 166, 149, 0.6);
}
.lyric-syl { transition: color 0.1s linear, text-shadow 0.1s linear; }
.lyric-syl.sung { color: var(--hud-green-dim); }
.lyric-syl.now {
  color: var(--hud-green);
  text-shadow: 0 0 12px rgba(57, 255, 143, 0.8);
}

.stage-singers { margin-top: 12px; text-align: center; min-height: 22px; }
.singer-live { color: var(--text-main); font-size: 0.9rem; }
.singer-live strong { color: var(--hud-green); font-variant-numeric: tabular-nums; }
.singer-combo { color: var(--hud-orange); }

/* ---- results ---- */
.result-card {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 20, 17, 0.8);
  padding: 22px;
  text-align: center;
  margin-bottom: 16px;
}
.result-grade {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hud-green);
  text-shadow: 0 0 30px rgba(57, 255, 143, 0.55);
}
.result-accuracy {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 1.8rem;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.result-blurb { color: var(--text-dim); margin: 10px 0 16px; }
.result-stats {
  list-style: none;
  padding: 0;
  margin: 0 auto 18px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.result-stats li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  border-bottom: 1px dashed rgba(57, 255, 143, 0.16);
  padding-bottom: 5px;
}
.stat-key { color: var(--text-dim); }
.stat-val { color: var(--text-main); font-variant-numeric: tabular-nums; }

/* ---- queue, members, scoreboard ---- */
.queue-list, .member-list, .scoreboard, .leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.queue-item, .member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(57, 255, 143, 0.16);
  border-radius: 6px;
  font-size: 0.85rem;
}
.queue-item.is-me { border-color: var(--hud-green); }
.queue-pos {
  color: var(--hud-orange);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
}
.queue-name, .member-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.queue-empty, .leaderboard-empty { color: var(--text-dim); font-size: 0.8rem; padding: 6px 2px; }
.member-tag {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hud-orange);
}
.member-mute { font-size: 0.7rem; color: var(--hud-red); }
.member-volume { width: 90px; }

.scoreboard li, .leaderboard-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  padding: 5px 8px;
  border-bottom: 1px dashed rgba(57, 255, 143, 0.14);
}
.lb-rank { color: var(--hud-orange); min-width: 34px; font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lb-score { color: var(--hud-green); font-variant-numeric: tabular-nums; }

.room-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.room-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.room-count { color: var(--text-dim); font-size: 0.75rem; }
.room-now { color: var(--hud-orange); font-size: 0.75rem; }
.room-full { color: var(--hud-red); font-size: 0.7rem; }

/* ---- mic strip ---- */
.mic-strip {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(6, 16, 14, 0.7);
}
.mic-strip-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mic-level {
  flex: 1 1 140px;
  height: 10px;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
}
.mic-level-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--hud-green-dim), var(--hud-green));
  transition: width 0.06s linear;
}
.tool-field-inline { display: flex; align-items: center; gap: 8px; }
.tool-field-inline .hud-range { width: 130px; }

#yt-player-wrap { position: relative; padding-bottom: 56.25%; height: 0; margin-top: 12px; }
#yt-player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#local-audio-player { width: 100%; margin-top: 12px; }

@media (max-width: 640px) {
  .pitch-ribbon { height: 190px; }
  .result-grade { font-size: 3.4rem; }
  .mic-strip-row { gap: 10px; }
  .tool-field-inline .hud-range { width: 100px; }
}

/* ---- button + layout variants the karaoke markup relies on ---- */
.hud-btn.small {
  /* .hud-btn is display:block/width:100% for the big landing buttons; the
     small variant always sits inline in a flex row, so it has to opt out of
     both or it forces its own line. */
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 7px 14px;
  font-size: 0.68rem;
}
.hud-btn.ghost {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--panel-border);
  color: var(--text-dim);
}
.hud-btn.ghost:hover { background: rgba(57, 255, 143, 0.12); color: var(--hud-green); }
.hud-btn:disabled, .hud-btn:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--panel-border);
  color: var(--text-dim);
}

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

.tool-divider {
  height: 1px;
  background: rgba(57, 255, 143, 0.18);
  margin: 16px 0;
}

.tool-error {
  color: var(--hud-red);
  font-size: 0.8rem;
  border: 1px solid rgba(255, 70, 85, 0.45);
  border-radius: 6px;
  background: rgba(255, 70, 85, 0.08);
  padding: 9px 12px;
  margin: 12px 0;
}

.match-index { color: var(--hud-green-dim); margin-right: 4px; }

.chat-log {
  border: 1px solid rgba(57, 255, 143, 0.18);
  border-radius: 6px;
  padding: 8px;
  height: 150px;
  overflow-y: auto;
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.chat-row { display: flex; gap: 8px; align-items: center; }
.chat-row .tool-text-input { flex: 1; min-width: 0; }
.chat-msg .who { color: var(--hud-green); margin-right: 6px; }

/* The two-column room layout has to stack before the columns get too narrow
   to hold a member row plus its volume slider. */
@media (max-width: 760px) {
  .two-col { grid-template-columns: 1fr; }
}

.solo-points {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solo-points li {
  position: relative;
  padding-left: 18px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.solo-points li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--hud-green-dim);
}

/* ---- perf-lite -------------------------------------------------------------
   Toggled on <html> by the inline perf-lite snippet (low-power devices) or by
   the user's "reduce effects" preference. The starfield itself stays: it is a
   compositor transform now and costs essentially nothing. What this drops are
   the two effects that force full-viewport work every frame -- mix-blend-mode
   compositing and backdrop-filter blur. */
.perf-lite { --bg-panel: rgba(12, 26, 22, 0.95); }
.perf-lite .scanlines { mix-blend-mode: normal; opacity: 0.4; }
.perf-lite .starfield,
.perf-lite .asteroid,
.perf-lite .asteroid-spin { animation: none; }
.perf-lite *,
.perf-lite *::before,
.perf-lite *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ---- phone-sized touch targets: header nav chips (2026-08-21) --------------
   These chips render 24-30px tall, well under the ~44px a thumb reliably hits.
   The tool subdomains have carried this since 2026-08-13; the games, casino
   and hub pages never picked it up. Scoped to the phone breakpoint, so the
   desktop layout is untouched. Keep this block in sync across subdomains. */
.login-btn, .logout-link, .home-link, .rules-link, .back-home-link {
  touch-action: manipulation;
}
@media (max-width: 560px) {
  .login-btn, .logout-link, .home-link, .rules-link, .back-home-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The header is one nowrap flex line, so the chips run off the right edge on
     a narrow phone -- and once signed in the label grows to "Logout (username)"
     and pushes the last chip out of reach on every one of these pages. Let the
     row wrap instead; where it already fits, wrap changes nothing. */
  .callsign-row, .nav-links { flex-wrap: wrap; }
  /* .nav-links is flex-shrink:0, so it holds its max-content width and the
     last chip lands past the right edge -- wrapping cannot help until the row
     is allowed to shrink below that width. */
  .nav-links { flex-shrink: 1; min-width: 0; max-width: 100%; }
  .login-btn, .logout-link {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}