@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; }

.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; }
.toad-avatar-wrap { position: relative; flex-shrink: 0; width: 46px; height: 46px; }
.toad-avatar { filter: drop-shadow(0 0 6px rgba(57, 255, 143, 0.5)); }
.lock-reticle {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(57, 255, 143, 0.5);
  border-radius: 50%;
  animation: reticle-spin 6s linear infinite;
}
.lock-reticle::before, .lock-reticle::after {
  content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--hud-green);
}
.lock-reticle::before { top: -3px; left: -3px; border-right: none; border-bottom: none; }
.lock-reticle::after { bottom: -3px; right: -3px; border-left: none; border-top: none; }
@keyframes reticle-spin { to { transform: rotate(360deg); } }

.login-btn {
  margin-left: auto;
  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;
}
.login-btn:hover { color: var(--hud-green); border-color: var(--hud-green); }

.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); }

.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;
}

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 14px;
  letter-spacing: 0.03em;
}

.earn-banner {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-main);
  background: rgba(57,255,143,0.06);
  border: 1px solid var(--panel-border);
  padding: 10px 14px;
  margin: 0 0 16px;
}
.earn-banner strong { color: var(--hud-green); }

/* ---- 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;
  overflow: hidden; /* clips the screenshot's negative margin and hover zoom */
}
.console-card.hidden { display: none; }

/* ---- screenshot banner (bleeds to the card edges) ---- */
.card-shot {
  display: block;
  margin: -16px -16px 0;
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: var(--bg-deep); /* matches the letterbox bars baked into the shots */
  border-bottom: 1px solid var(--panel-border);
}
.card-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}
/* keep the CRT feel of the rest of the page over the captured frames */
.card-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}
.console-card:hover .card-shot img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card-shot img { transition: none; }
  .console-card:hover .card-shot img { transform: none; }
}
.console-card:has(.tag.offline) { opacity: 0.6; }
.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);
}
.tag.stable { color: var(--hud-green); }
.tag.beta { color: var(--hud-orange); }
.tag.unstable { color: var(--hud-red); animation: blip-pulse 1.6s ease-in-out infinite; }
.tag.archived { color: var(--text-dim); }
.tag.offline { color: var(--text-dim); border-style: dashed; opacity: 0.7; }
.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); }

.hidden { display: none !important; }

/* ---- extra card links (e.g. highscores) ---- */
.card-links { display: flex; flex-wrap: wrap; gap: 8px; }
a.dl.secondary { color: var(--hud-orange); border-color: var(--hud-orange); }

/* ---- leaderboard ---- */
.field-hint {
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
  padding: 20px 0;
}
.leaderboard-list {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard-row {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 14px;
}
.leaderboard-row:nth-child(1) { border-color: rgba(255, 209, 102, 0.6); box-shadow: 0 0 12px rgba(255, 209, 102, 0.12); }
.lb-rank { font-size: 1rem; color: var(--hud-orange); text-align: center; }
.lb-name {
  font-weight: bold;
  color: var(--hud-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score { font-weight: bold; color: var(--text-main); }
.lb-date { font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; }

@media (max-width: 480px) {
  .page-wrap { padding: 24px 14px 40px; }
  .hud-panel { padding: 26px 18px; }
  .leaderboard-row { grid-template-columns: 32px 1fr auto; }
  .lb-date { display: none; }
}

/* ---- casino: wallet badge (plain monospace, never Press Start 2P -- balance/countdown contain digits) ---- */
.wallet-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 16px;
  margin: 0 0 20px;
  font-size: 0.85rem;
}
.wallet-badge .balance { color: var(--hud-green); font-weight: bold; font-size: 1rem; }
.wallet-badge .next-grant { color: var(--text-dim); font-size: 0.78rem; }
.wallet-badge .logged-out { color: var(--text-dim); font-style: italic; }
.wallet-badge .guest-tag { color: var(--hud-orange); font-size: 0.74rem; }

/* ---- casino: bet controls ---- */
.bet-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.bet-chip {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--panel-border);
  padding: 8px 14px;
  cursor: pointer;
}
.bet-chip:hover { color: var(--hud-green); border-color: var(--hud-green-dim); }
.bet-chip.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);
}
.game-btn {
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--hud-green);
  background: rgba(57,255,143,0.1);
  border: 1px solid var(--hud-green-dim);
  padding: 10px 18px;
  cursor: pointer;
}
.game-btn:hover { background: rgba(57, 255, 143, 0.2); border-color: var(--hud-green); }
.game-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.game-btn.secondary { color: var(--hud-orange); border-color: var(--hud-orange); background: rgba(255,145,48,0.08); }

/* ---- casino: mode tabs (solo / friends) ---- */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 18px; }

/* ---- casino: message/status line ---- */
.game-msg {
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--text-main);
  margin: 10px 0;
}
.game-msg.win { color: var(--hud-green); }
.game-msg.lose { color: var(--hud-red); }

/* ---- casino: room code box ---- */
.room-code-box {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--panel-border);
  background: rgba(0,0,0,0.25);
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 0.85rem;
}
.room-code-box .code { color: var(--hud-orange); font-weight: bold; letter-spacing: 0.15em; font-size: 1.1rem; }
.room-code-box input {
  font-family: inherit;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  padding: 8px 10px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  width: 90px;
  text-transform: uppercase;
}

/* ---- casino: playing card ---- */
.pcard {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 54px;
  height: 76px;
  background: #f4f1e8;
  border-radius: 5px;
  padding: 4px 5px;
  font-family: "Consolas", monospace;
  font-weight: bold;
  font-size: 0.85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.pcard.red { color: #c62828; }
.pcard.black { color: #1a1a1a; }
.pcard.back {
  background: repeating-linear-gradient(45deg, #1c8a52, #1c8a52 4px, #0e5c33 4px, #0e5c33 8px);
  border: 1px solid rgba(57,255,143,0.4);
}
.hand-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

.hand-label { font-size: 0.75rem; color: var(--text-dim); margin: 10px 0 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.hand-total { color: var(--hud-green); font-weight: bold; }

/* ---- casino: seats grid (blackjack/roulette friends tables) ---- */
.seats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.seat-box {
  border: 1px solid var(--panel-border);
  background: rgba(0,0,0,0.25);
  padding: 10px;
  font-size: 0.78rem;
}
.seat-box.you { border-color: var(--hud-green); box-shadow: 0 0 8px rgba(57,255,143,0.15); }
.seat-box.current-turn { border-color: var(--hud-orange); box-shadow: 0 0 8px rgba(255,145,48,0.2); }
.seat-box.empty { color: var(--text-dim); font-style: italic; opacity: 0.6; }
.seat-name { color: var(--hud-green); font-weight: bold; display: block; margin-bottom: 4px; }

/* ---- casino: roulette wheel + board ---- */
.wheel-wrap { display: flex; justify-content: center; margin: 16px 0; }
.bet-board { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.bet-row { display: flex; flex-wrap: wrap; gap: 6px; }
.bet-cell {
  font-family: "Consolas", monospace;
  font-size: 0.75rem;
  color: var(--text-main);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--panel-border);
  padding: 6px 4px;
  min-width: 30px;
  text-align: center;
  cursor: pointer;
}
.bet-cell.red { background: rgba(198,40,40,0.35); }
.bet-cell.black { background: rgba(20,20,20,0.5); }
.bet-cell.green { background: rgba(28,138,82,0.4); }
.bet-cell.outside { min-width: 70px; }
.bet-cell.selected { outline: 2px solid var(--hud-orange); }
.bet-cell .stake-pip {
  display: block;
  font-size: 0.65rem;
  color: var(--hud-orange);
}
.current-bets { font-size: 0.78rem; color: var(--text-dim); margin: 8px 0; }

/* ---- casino: slot machine ---- */
.reels-frame {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: rgba(0,0,0,0.45);
  border: 2px solid var(--hud-green-dim);
  padding: 14px;
  margin: 16px 0;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}
.reel-col { display: flex; flex-direction: column; gap: 4px; }
.reel-cell {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(57,255,143,0.15);
}
.reel-cell.win-cell { background: rgba(57,255,143,0.22); border-color: var(--hud-green); }
.win-feed { margin-top: 16px; }
.win-feed-item { font-size: 0.78rem; color: var(--text-dim); padding: 4px 0; border-bottom: 1px dashed var(--panel-border); }
.win-feed-item .who { color: var(--hud-orange); font-weight: bold; }

/* ---- prize shop ---- */
.shop-msg {
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--hud-green);
  margin: 4px 0 14px;
}
.shop-msg.error { color: var(--hud-red); }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.shop-item {
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.shop-item .pcard.back { width: 72px; height: 100px; }
.shop-item-info { display: flex; flex-direction: column; gap: 2px; }
.shop-item-name {
  font-weight: bold;
  color: var(--hud-green);
  font-size: 0.85rem;
}
.shop-item-price {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.78rem;
  color: var(--text-dim);
}
.shop-item button { width: 100%; }
.shop-item button[disabled] { opacity: 0.55; cursor: default; }

.rarity-badge {
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  align-self: flex-start;
}
.rarity-badge.rarity-common { color: #8a9a92; border: 1px solid rgba(138,154,146,0.5); background: rgba(138,154,146,0.08); }
.rarity-badge.rarity-uncommon { color: var(--hud-green); border: 1px solid rgba(57,255,143,0.5); background: rgba(57,255,143,0.08); }
.rarity-badge.rarity-rare { color: #4dd0ff; border: 1px solid rgba(77,208,255,0.5); background: rgba(77,208,255,0.08); }
.rarity-badge.rarity-epic { color: #a066ff; border: 1px solid rgba(160,102,255,0.5); background: rgba(160,102,255,0.08); }
.rarity-badge.rarity-legendary { color: #ffcf40; border: 1px solid rgba(255,207,64,0.5); background: rgba(255,207,64,0.08); }

.guest-shop-banner {
  font-size: 0.8rem;
  color: var(--hud-orange);
  border: 1px solid rgba(255,145,48,0.4);
  background: rgba(255,145,48,0.08);
  padding: 8px 12px;
  margin: 0 0 14px;
}
.guest-shop-banner[hidden] { display: none; }

/* ---- 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;
}

/* ---- header row wrapping ---------------------------------------------------
   .callsign-row never wrapped and .callsign carried the default min-width:auto,
   so the row could not shrink below the callsign's longest word. On a 390px
   phone that pushed the nav past the right edge: "Report Issue" was clipped
   mid-word and the Home button sat entirely off-screen with no way to reach it
   (the page itself does not scroll sideways). Letting the callsign shrink and
   the row wrap drops the nav onto its own line instead. No effect on desktop,
   where the row still fits on one line and never wraps. */
.callsign-row { flex-wrap: wrap; }
.callsign { min-width: 0; }
.nav-links { flex-wrap: wrap; }

/* ---- tournaments: calendar + event lists ---------------------------------
   Reuses the existing .leaderboard-* rows for standings rather than adding a
   second table style. Digits never go near Press Start 2P here (see the
   wallet-badge note above) -- dates, pots and countdowns are all monospace. */

.tourney-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.tourney-toolbar .spacer { flex: 1 1 auto; }
.hud-btn.inline {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 10px 16px;
  min-height: 44px;
}
.hud-btn.inline.ghost {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--panel-border);
  color: var(--text-main);
}
.hud-btn.inline.danger { border-color: var(--hud-red); color: var(--hud-red); background: rgba(255,70,85,0.08); }
.hud-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* .hud-btn is Press Start 2P, which renders 8 as S and 0 as O. Any money
   figure inside a button has to drop back to the body monospace or a $80
   refund reads as $SO. Same rule as the wallet badge. */
.hud-btn .amt {
  font-family: "Consolas", "SFMono-Regular", Menlo, Monaco, "Courier New", monospace;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- month grid ---- */
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cal-month {
  font-size: 0.95rem;
  color: var(--hud-green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal-nav { display: flex; gap: 8px; }
.cal-nav button {
  min-width: 44px;
  min-height: 44px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.cal-nav button:hover { color: var(--hud-green); border-color: var(--hud-green); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 22px;
}
.cal-dow {
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 0;
}
.cal-day {
  position: relative;
  min-height: 62px;
  padding: 4px 5px 18px;
  border: 1px solid rgba(57, 255, 143, 0.14);
  background: rgba(0, 0, 0, 0.22);
  text-align: left;
  font-family: inherit;
  color: var(--text-main);
  cursor: default;
}
.cal-day.has-events { cursor: pointer; border-color: var(--panel-border); }
.cal-day.has-events:hover { background: rgba(57, 255, 143, 0.08); }
.cal-day.other-month { opacity: 0.35; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--hud-orange); }
.cal-day.selected { background: rgba(57, 255, 143, 0.14); border-color: var(--hud-green); }
.cal-daynum { font-size: 0.72rem; color: var(--text-dim); }
.cal-day.today .cal-daynum { color: var(--hud-orange); font-weight: bold; }
.cal-dots {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hud-green-dim);
  border: 1px solid var(--hud-green);
}
.cal-dot.official { background: var(--hud-orange); border-color: var(--hud-orange); }
.cal-dot.running { background: var(--hud-red); border-color: var(--hud-red); animation: blip-pulse 1.6s ease-in-out infinite; }
.cal-dot.over { background: transparent; border-color: var(--text-dim); }

/* ---- event rows ---- */
.tourney-section-title {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(57, 255, 143, 0.18);
}
.event-list { display: flex; flex-direction: column; gap: 8px; }
.event-row {
  display: grid;
  grid-template-columns: 168px 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.event-row:hover { background: rgba(57, 255, 143, 0.07); }
.event-row.official { border-color: rgba(255, 145, 48, 0.55); }
.event-row.over { opacity: 0.6; }
/* "Sat, Aug 22" over "8:42 AM - in 2 days": the relative phrase must not be
   allowed to break across lines mid-unit ("in 2" / "days"). */
.event-when { font-size: 0.74rem; color: var(--text-dim); line-height: 1.5; }
.event-when .rel { white-space: nowrap; }
.event-when strong { display: block; color: var(--text-main); font-size: 0.8rem; }
.event-main { min-width: 0; }
.event-name {
  color: var(--hud-green);
  font-weight: bold;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.event-meta .sep { opacity: 0.4; }
.event-side { text-align: right; font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; }
.event-side .pot { display: block; color: var(--hud-green); font-weight: bold; font-size: 0.9rem; }

.tourney-tag {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid currentColor;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tourney-tag.official { color: var(--hud-orange); }
.tourney-tag.registering { color: var(--hud-green); }
.tourney-tag.running { color: var(--hud-red); animation: blip-pulse 1.6s ease-in-out infinite; }
.tourney-tag.scheduled { color: var(--text-dim); }
.tourney-tag.finished, .tourney-tag.cancelled, .tourney-tag.abandoned { color: var(--text-dim); border-style: dashed; }
.tourney-tag.entered { color: var(--hud-green); background: rgba(57, 255, 143, 0.12); }

/* ---- create form / modal ---- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(2, 8, 6, 0.82);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 14px;
}
.modal-card {
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--hud-green);
  background: #08150f;
  padding: 22px 20px 24px;
  position: relative;
}
.modal-card h2 {
  font-family: "Press Start 2P", "Consolas", monospace;
  font-size: 0.8rem;
  color: var(--hud-green);
  margin: 0 0 14px;
  letter-spacing: 0.04em;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.modal-close:hover { color: var(--hud-green); }
.form-row { margin-bottom: 12px; }
.form-row > label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--panel-border);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
}
.form-row textarea { min-height: 68px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--hud-green);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { font-size: 0.7rem; color: var(--text-dim); margin: 4px 0 0; line-height: 1.5; }
/* This stylesheet has no generic anchor rule, so a link inside dim body copy
   renders as browser-default blue on a near-black panel -- effectively
   invisible. Every place these pages put a link in prose needs its own rule. */
.form-note a, .field-hint a, .event-when a { color: var(--hud-green); text-decoration: underline; }
.form-note a:hover, .field-hint a:hover { color: var(--text-main); }
.form-msg { font-size: 0.78rem; margin: 10px 0 0; min-height: 1.2em; }
.form-msg.error { color: var(--hud-red); }
.form-msg.ok { color: var(--hud-green); }

/* ---- event detail ---- */
.tourney-hero { border: 1px solid var(--panel-border); background: rgba(0,0,0,0.25); padding: 16px; margin-bottom: 18px; }
.tourney-hero .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.tourney-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.fact { border: 1px solid rgba(57,255,143,0.18); background: rgba(0,0,0,0.3); padding: 9px 11px; }
.fact .k { display: block; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.fact .v { display: block; margin-top: 4px; font-size: 0.92rem; color: var(--text-main); }
.fact .v.green { color: var(--hud-green); font-weight: bold; }

.lb-score.up { color: var(--hud-green); }
.lb-score.down { color: var(--hud-red); }
.leaderboard-row.you { border-color: var(--hud-green); box-shadow: 0 0 10px rgba(57,255,143,0.15); }

/* ---- bracket ---- */
.bracket-scroll { overflow-x: auto; padding-bottom: 8px; }
.bracket-rounds { display: flex; gap: 18px; min-width: min-content; }
.bracket-round { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; min-width: 190px; }
.bracket-round h4 {
  margin: 0 0 2px;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.bracket-match { border: 1px solid var(--panel-border); background: rgba(0,0,0,0.28); }
.bracket-match.live { border-color: var(--hud-red); }
.bracket-side {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  font-size: 0.8rem;
}
.bracket-side + .bracket-side { border-top: 1px solid rgba(57,255,143,0.18); }
.bracket-side.won { color: var(--hud-green); font-weight: bold; }
.bracket-side.lost { color: var(--text-dim); text-decoration: line-through; }
.bracket-side.bye { font-style: italic; color: var(--text-dim); }

@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr; gap: 8px; }
  .event-side { text-align: left; }
  .cal-day { min-height: 52px; padding: 3px 3px 15px; }
  .cal-daynum { font-size: 0.66rem; }
}

/* blip-pulse is referenced by .tag.unstable in every one of these stylesheets
   (and by the live-event markers on the hub) but was never actually defined
   anywhere on the estate, so all of it has been silently static. Defining it
   here is what makes those pulses real. A gentler curve than comm-blink's hard
   50%-opacity blink: this marks "live", it should not flicker. */
@keyframes blip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}


/* ---- 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;
  }
}