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

:root {
  --bg: #0b0b1a;
  --bg-2: #1a1a2e;
  --fg: #f4f4f8;
  --muted: #9aa0c0;
  --accent: #4ade80;
  --warn: #f59e0b;
  --danger: #ef4444;
  --radius: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; min-height: 100vh; }

body {
  background: var(--bg);
  /* Layered starfield: tiny dots at different densities */
  background-image:
    /* Bright stars */
    radial-gradient(1.5px 1.5px at 20% 15%, rgba(255,255,255,0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 8%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 70%, rgba(255,255,255,0.8) 50%, transparent 100%),
    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 92%, rgba(255,255,255,0.7) 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 25%, rgba(255,255,255,0.6) 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 50%, rgba(255,255,255,0.5) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 5% 45%, rgba(255,255,255,0.7) 50%, transparent 100%),
    /* Dim stars */
    radial-gradient(1px 1px at 15% 60%, rgba(150,170,230,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 40%, rgba(150,170,230,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 40% 10%, rgba(150,170,230,0.35) 50%, transparent 100%),
    radial-gradient(1px 1px at 85% 75%, rgba(150,170,230,0.3) 50%, transparent 100%),
    radial-gradient(1px 1px at 25% 85%, rgba(150,170,230,0.4) 50%, transparent 100%),
    radial-gradient(1px 1px at 95% 5%, rgba(150,170,230,0.3) 50%, transparent 100%),
    /* Subtle pixel grid overlay */
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px),
    /* Base gradient */
    linear-gradient(180deg, #0b0b1a 0%, #0d1130 40%, #12082a 100%);
  background-size:
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px,
    400px 400px, 400px 400px, 400px 400px,
    400px 400px, 400px 400px, 400px 400px,
    8px 8px, 8px 8px,
    100% 100%;
  background-attachment: fixed;
}

/* 8-bit brand header */
.brand-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-align: center;
  color: var(--accent);
  letter-spacing: 1px;
  padding: 18px 0 0;
  text-shadow: 0 0 12px rgba(74,222,128,0.4), 2px 2px 0 rgba(0,0,0,0.5);
  opacity: 0.7;
}

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 16px) 16px env(safe-area-inset-bottom, 16px);
}

header {
  text-align: center;
  padding: 24px 8px 16px;
}
header h1 {
  font-size: 28px;
  margin: 0 0 6px;
  font-weight: 600;
}
.status {
  color: var(--muted);
  font-size: 14px;
}

.card {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 2px 16px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(4px);
}
.card h2 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.hero { text-align: center; padding: 24px 16px; }
.big-btn {
  width: 100%;
  font-size: 22px;
  font-weight: 700;
  padding: 24px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: white;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(34,197,94,0.3);
  transition: transform 0.1s;
}
.big-btn:active { transform: scale(0.97); }
.big-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.big-btn.ok { background: linear-gradient(135deg, #14532d, #16a34a); }
.meta { color: var(--muted); margin: 12px 0 0; font-size: 14px; }

ul { list-style: none; padding: 0; margin: 0; }
li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
li:last-child { border-bottom: none; }
li.li-wrap { flex-wrap: wrap; }
.impostor-help-row {
  width: 100%;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 6px;
}
.impostor-help-row p { margin: 4px 0; }
.muted { color: var(--muted); font-size: 14px; }

.pwa-footer { margin-top: 16px; padding: 12px 4px; opacity: 0.85; }
.locale-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; }
.locale-select { background: var(--bg-2); color: var(--fg); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 4px 8px; font-size: 13px; text-transform: uppercase; }

.btn {
  background: rgba(255,255,255,0.08);
  color: var(--fg);
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn-warn { background: var(--warn); color: #1a1a2e; }
.btn-danger { background: var(--danger); color: white; }
.btn-small { padding: 6px 10px; font-size: 13px; }

.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  font-size: 13px;
  cursor: pointer;
  display: block;
  margin: 16px auto;
}

.map-link {
  display: block;
  text-align: center;
  padding: 10px 16px;
  margin: 8px 0;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s;
}
.map-link:active { background: rgba(255,255,255,0.1); }
.map-link-inline {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.map-link-inline:active { background: rgba(255,255,255,0.1); }
.guide-link, .guide-link-inline {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s;
}
.guide-link:active, .guide-link-inline:active { background: rgba(255,255,255,0.1); }
.impostor-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  margin: 8px 0 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.impostor-btn:active { background: rgba(255,255,255,0.12); }
.impostor-btn-inline {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.impostor-btn-inline:active { background: rgba(255,255,255,0.12); }
.helper-hint { font-size: 12px; margin: 4px 0 0; line-height: 1.4; }
.helper-hint p { margin: 4px 0; }
.impostor-path {
  font-family: monospace;
  font-size: 11px;
  background: rgba(255,255,255,0.08);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: all;
  overflow-wrap: anywhere;
  word-break: break-all;
}
.li-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.li-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.connect-row { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.connect-addr {
  font-family: monospace;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: all;
  overflow-wrap: anywhere;
}
.connect-ports { font-size: 12px; }
.map-icon { font-style: normal; }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
}
.dot.green { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dot.yellow { background: var(--warn); }
.dot.gray { background: var(--muted); }

.svc-summary { list-style: none; padding: 0; margin: 0 0 4px; }
.svc-summary-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 0; }
.svc-summary-item > span:last-of-type { font-size: 13px; color: var(--accent); font-weight: 600; }
.svc-summary-names { width: 100%; font-size: 13px; color: var(--muted); padding-left: 15px; }
.svc-players { font-style: italic; }
.active-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }

.svc-games-group { margin: 8px 0; }
.svc-games-title { font-size: 14px; color: var(--muted); margin: 6px 0 4px; font-weight: 500; }
.svc-games-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.game-item { padding: 6px 8px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.game-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.game-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.5px; background: var(--bg-2); padding: 2px 8px; border-radius: 4px; cursor: pointer; user-select: all; }
.game-code:hover { background: rgba(78, 222, 128, 0.15); }
.game-map { color: var(--muted); font-size: 13px; }
.game-players { margin-left: auto; font-size: 13px; color: var(--accent); font-weight: 600; }
.game-badge { font-size: 11px; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; }
.game-public { background: rgba(78, 222, 128, 0.15); color: var(--accent); }
.game-private { background: rgba(155, 155, 155, 0.15); color: var(--muted); }
.game-state { background: rgba(245, 158, 11, 0.15); color: var(--warn); }
.game-meta { font-size: 12px; margin-top: 2px; }

.week-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 60px;
  margin-top: 12px;
}
.week-bars .bar {
  flex: 1;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  position: relative;
  opacity: 0.6;
}
.week-bars .bar.today { opacity: 1; }
.week-bars .label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--muted);
}

.dialog {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.dialog.open {
  display: flex;
}
.dialog-box {
  background: var(--bg-2);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 360px;
  width: 100%;
}
.dialog-box h3 { margin: 0 0 12px; }
.dialog-box p { margin: 0 0 16px; line-height: 1.5; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-2);
  color: var(--fg);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { background: var(--danger); color: white; }
.toast.success { background: #166534; color: white; }

/* ── 8-bit pixel ground / landscape at bottom ─────────────────────── */
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  pointer-events: none;
  z-index: 0;
  image-rendering: pixelated;
  background:
    /* Pixel "ground" blocks — grass-green on dark earth */
    linear-gradient(to right,
      transparent 0%, transparent 4%,
      #1a5c2a 4%, #1a5c2a 8%,
      #16502a 8%, #16502a 12%,
      #1a5c2a 12%, #1a5c2a 18%,
      transparent 18%, transparent 22%,
      #1a5c2a 22%, #1a5c2a 30%,
      #16502a 30%, #16502a 36%,
      transparent 36%, transparent 42%,
      #1a5c2a 42%, #1a5c2a 46%,
      #16502a 46%, #16502a 54%,
      #1a5c2a 54%, #1a5c2a 60%,
      transparent 60%, transparent 66%,
      #16502a 66%, #16502a 72%,
      #1a5c2a 72%, #1a5c2a 78%,
      transparent 78%, transparent 84%,
      #1a5c2a 84%, #1a5c2a 92%,
      #16502a 92%, #16502a 96%,
      transparent 96%
    ) 0 0 / 100% 8px no-repeat,
    /* Earth layer */
    linear-gradient(#12381a, #0a2010) 0 8px / 100% 40px no-repeat;
  opacity: 0.3;
}

/* Keep content above the decorations */
.wrap { position: relative; z-index: 1; }

/* ── Twinkling star animation ─────────────────────────────────────── */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes twinkle2 {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.15; }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(74,222,128,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 67% 12%, rgba(200,200,255,0.9) 50%, transparent 100%),
    radial-gradient(2px 2px at 88% 42%, rgba(74,222,128,0.7) 50%, transparent 100%),
    radial-gradient(2px 2px at 33% 67%, rgba(200,200,255,0.8) 50%, transparent 100%),
    radial-gradient(2px 2px at 52% 88%, rgba(74,222,128,0.6) 50%, transparent 100%);
  background-size: 500px 500px;
  animation: twinkle 4s ease-in-out infinite;
}

/* Second layer of twinkling stars offset in timing */
.wrap::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 42% 8%, rgba(255,220,100,0.9) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 28%, rgba(255,220,100,0.7) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 8% 52%, rgba(200,200,255,0.6) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 72%, rgba(255,220,100,0.8) 50%, transparent 100%);
  background-size: 600px 600px;
  animation: twinkle2 3s ease-in-out 1.5s infinite;
}