/* ═══════════════════════════════════════════════
   SpaceGuessr — Base Styles
   Global variables, reset, typography, utilities
   ═══════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Colours */
  --bg:          #06060f;
  --surface:     #0e0e22;
  --surface2:    #161630;
  --border:      #2a2a50;
  --accent:      #7c6fff;
  --accent-dim:  #5c4fff;
  --accent2:     #ff6b9d;
  --correct:     #2ecc71;
  --wrong:       #e74c3c;
  --warn:        #f39c12;
  --text:        #e8e8ff;
  --muted:       #6a6a98;

  /* Type colours */
  --galaxy-bg:   rgba(124,111,255,.25);
  --galaxy-fg:   #c4baff;
  --galaxy-bdr:  rgba(124,111,255,.5);

  --nebula-bg:   rgba(255,107,157,.22);
  --nebula-fg:   #ffb3cf;
  --nebula-bdr:  rgba(255,107,157,.45);

  --cluster-bg:  rgba(255,214,51,.2);
  --cluster-fg:  #ffe680;
  --cluster-bdr: rgba(255,214,51,.38);

  --planet-bg:   rgba(46,204,113,.2);
  --planet-fg:   #8effc8;
  --planet-bdr:  rgba(46,204,113,.38);

  --const-bg:    rgba(52,195,235,.2);
  --const-fg:    #9ae8ff;
  --const-bdr:   rgba(52,195,235,.38);

  --messier-bg:   rgba(180,130,255,.2);
  --messier-fg:   #d4aaff;
  --messier-bdr:  rgba(180,130,255,.4);

  --beginner-bg:  rgba(255,196,60,.18);
  --beginner-fg:  #ffd97a;
  --beginner-bdr: rgba(255,196,60,.4);

  /* Sizing */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 99px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Starfield canvas (shared) ── */
#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Shared button styles ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  padding: 14px 32px;
  min-height: 48px;
  transition: transform .15s, box-shadow .15s, opacity .15s, background .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #fff;
  box-shadow: 0 4px 20px rgba(124,111,255,.4);
}
.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(124,111,255,.6);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--border);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* ── Type badge ── */
.type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.type-Galaxy      { background: var(--galaxy-bg);  color: var(--galaxy-fg);  border: 1px solid var(--galaxy-bdr); }
.type-Nebula      { background: var(--nebula-bg);  color: var(--nebula-fg);  border: 1px solid var(--nebula-bdr); }
.type-Star-Cluster { background: var(--cluster-bg); color: var(--cluster-fg); border: 1px solid var(--cluster-bdr); }
.type-Planet      { background: var(--planet-bg);  color: var(--planet-fg);  border: 1px solid var(--planet-bdr); }
.type-Constellation { background: var(--const-bg); color: var(--const-fg);   border: 1px solid var(--const-bdr); }
.type-Messier      { background: var(--messier-bg);  color: var(--messier-fg);  border: 1px solid var(--messier-bdr); }
.type-Beginner     { background: var(--beginner-bg); color: var(--beginner-fg); border: 1px solid var(--beginner-bdr); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* ── Debug launch button (fixed, bottom-right of home page) ── */
.debug-launch-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999;
  background: rgba(30,30,60,.85);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color .15s, border-color .15s;
  letter-spacing: .05em;
}
.debug-launch-btn:hover { color: var(--text); border-color: var(--muted); }