/* =============================================
   DRIFT v2 — Cartoon / Nature style
   Bright greens, sky blue, warm sunshine
   ============================================= */

:root {
  --font-display: 'Fredoka One', 'Nunito', sans-serif;
  --font-body: 'Nunito', 'Fredoka One', sans-serif;

  --color-bg: #87CEEB;
  --color-surface: rgba(255,255,255,0.25);
  --color-border: rgba(255,255,255,0.5);
  --color-text: #2d5a1b;
  --color-text-light: #ffffff;
  --color-text-muted: rgba(45,90,27,0.65);
  --color-primary: #f9a825;
  --color-primary-dark: #e65100;
  --color-water: #2196F3;
  --color-water-light: #64B5F6;
  --color-grass: #4CAF50;
  --color-grass-dark: #2E7D32;

  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.35vw, 1.15rem);
  --text-lg: clamp(1.2rem, 1rem + 0.6vw, 1.6rem);
  --text-xl: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  --text-2xl: clamp(2.8rem, 1.5rem + 4vw, 5.5rem);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --shadow-fun: 0 6px 0 rgba(0,0,0,0.18);
  --shadow-card: 0 8px 32px rgba(0,0,0,0.15);
  --transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* =============================================
   SCREENS
   ============================================= */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(135, 206, 235, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
}

.screen.hidden {
  display: none;
}

.screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 340px;
  width: 90%;
  padding: var(--space-8);
  text-align: center;
}

/* Logo */
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.logo {
  width: 90px;
  height: 60px;
}

.game-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-grass-dark);
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 4px 0 rgba(0,0,0,0.12), 0 0 0 3px white;
  -webkit-text-stroke: 3px white;
  paint-order: stroke fill;
}

.tagline {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-grass-dark);
  opacity: 0.8;
}

/* Controls hint */
.controls-hint {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  background: rgba(255,255,255,0.7);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  width: 100%;
  box-shadow: var(--shadow-card);
  justify-content: center;
}

.hint-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  text-align: center;
  line-height: 1.3;
}

.key {
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 0 #e65100;
  padding: 8px 14px;
  font-size: var(--text-base);
  font-weight: 800;
  color: white;
  font-family: var(--font-display);
  white-space: nowrap;
  min-width: 64px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Buttons */
.btn-primary {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 0 #e65100, var(--shadow-card);
  padding: 16px 48px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  width: 100%;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 #e65100, var(--shadow-card);
}

.btn-primary:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #e65100;
}

.sub-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* =============================================
   GAME OVER SCREEN
   ============================================= */

.go-icon svg {
  width: 60px;
  height: 60px;
}

.go-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: #c62828;
  text-shadow: 0 3px 0 rgba(0,0,0,0.12);
  -webkit-text-stroke: 2px white;
  paint-order: stroke fill;
}

.go-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  background: rgba(255,255,255,0.75);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-card);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-grass-dark);
  font-variant-numeric: tabular-nums lining-nums;
}

/* =============================================
   HUD
   ============================================= */

.hud {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--space-3));
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 var(--space-4);
  pointer-events: none;
}

.hud.hidden { display: none; }

.hud-score, .hud-best {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  background: rgba(255,255,255,0.85);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: 4px 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}

.hud-best { align-items: flex-end; }

.hud-label {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hud-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-grass-dark);
  font-variant-numeric: tabular-nums lining-nums;
}

.speed-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
}

.speed-label {
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
  color: white;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.speed-bar {
  width: 70px;
  height: 8px;
  background: rgba(255,255,255,0.5);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid white;
}

.speed-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  width: 10%;
  transition: width 0.15s ease, background 0.2s ease;
}

/* =============================================
   DEBUG OVERLAY
   ============================================= */

.debug-overlay {
  position: fixed;
  bottom: var(--space-2);
  left: var(--space-2);
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  color: #00ff88;
  font: 10px/1.5 monospace;
  padding: 4px 8px;
  pointer-events: none;
  white-space: pre;
  border-radius: 4px;
}

/* =============================================
   HOME SCREEN
   ============================================= */

.home-inner {
  gap: var(--space-3);
  max-width: 360px;
}

.home-controls-hint {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  background: rgba(255,255,255,0.7);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4);
  width: 100%;
  box-shadow: var(--shadow-card);
  justify-content: center;
}

.home-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
}

.btn-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.75);
  border: 3px solid white;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 0 rgba(0,0,0,0.10), var(--shadow-card);
  padding: 12px 8px 10px;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 0.65rem + 0.3vw, 0.82rem);
  font-weight: 400;
  color: var(--color-grass-dark);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-menu:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.10); }
.btn-menu:hover  { transform: translateY(-2px); }

.btn-menu-icon { font-size: 1.5rem; line-height: 1; }

.home-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  justify-content: center;
}

.btn-icon {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.btn-icon:hover { opacity: 1; }

/* =============================================
   SECONDARY BUTTON (blue)
   ============================================= */

.btn-secondary {
  background: #2196F3;
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 6px 0 #1565C0, var(--shadow-card);
  padding: 14px 40px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  width: 100%;
  text-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.btn-secondary:hover  { transform: translateY(-3px); box-shadow: 0 9px 0 #1565C0, var(--shadow-card); }
.btn-secondary:active { transform: translateY(3px);  box-shadow: 0 3px 0 #1565C0; }

.btn-secondary-sm {
  background: #2196F3;
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 #1565C0;
  padding: 10px 28px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.btn-secondary-sm:active { transform: translateY(2px); box-shadow: 0 2px 0 #1565C0; }

.btn-danger-sm {
  background: #e53935;
  color: white;
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 0 #b71c1c;
  padding: 10px 28px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  margin-top: 8px;
}
.btn-danger-sm:active { transform: translateY(2px); box-shadow: 0 2px 0 #b71c1c; }

/* =============================================
   SHARED SCREEN PARTS
   ============================================= */

.screen-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-2);
}

.screen-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-grass-dark);
  -webkit-text-stroke: 1.5px white;
  paint-order: stroke fill;
  flex: 1;
  text-align: center;
  margin-right: 36px; /* balance the back button width */
}

.btn-back {
  background: rgba(255,255,255,0.75);
  border: 2px solid white;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  color: var(--color-grass-dark);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.btn-back:active { transform: translateY(2px); }

/* =============================================
   LEADERBOARD / LEAGUE SCREENS
   ============================================= */

.lb-inner {
  max-width: 400px;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  max-height: 90vh;
  overflow-y: auto;
}

.tab-bar {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  background: rgba(255,255,255,0.4);
  border-radius: var(--radius-full);
  padding: 4px;
}

.tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--color-grass-dark);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tab.active {
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.tab-panel { display: none; width: 100%; }
.tab-panel.active { display: block; }

.lb-table-wrap {
  width: 100%;
  background: rgba(255,255,255,0.75);
  border: 3px solid white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-height: 45vh;
  overflow-y: auto;
}

.lb-table {
  width: 100%;
  border-collapse: collapse;
}

.lb-table th {
  background: rgba(46,125,50,0.12);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  text-align: left;
}

.lb-table td {
  padding: 9px 10px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  border-top: 1px solid rgba(255,255,255,0.6);
}

.lb-table tr:first-child td { border-top: none; }
.lb-rank { font-family: var(--font-display); color: var(--color-grass-dark); width: 28px; }
.lb-score { font-family: var(--font-display); text-align: right; }
.lb-date  { font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; }

.lb-table tr.is-me td { background: rgba(249,168,37,0.15); }
.lb-table tr:nth-child(1) .lb-rank { color: #F9A825; }
.lb-table tr:nth-child(2) .lb-rank { color: #90A4AE; }
.lb-table tr:nth-child(3) .lb-rank { color: #A1662F; }

.leagues-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.league-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.75);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform var(--transition);
}
.league-card:active { transform: translateY(2px); }
.league-card-name { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-grass-dark); }
.league-card-meta { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 700; }
.league-card-arrow { opacity: 0.4; font-size: 1.1rem; }

.league-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

.league-code-label {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.league-code-pill {
  background: rgba(255,255,255,0.85);
  border: 2px solid white;
  border-radius: var(--radius-full);
  padding: 5px 14px;
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-grass-dark);
  cursor: pointer;
  letter-spacing: 0.12em;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.league-code-pill:active { transform: translateY(1px); }

/* =============================================
   WRECKED — league submit
   ============================================= */

.league-submit-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.league-submit-wrap.hidden { display: none; }

.league-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 3px solid white;
  background: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.submit-feedback {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-grass-dark);
  min-height: 16px;
}

/* =============================================
   FORMS
   ============================================= */

.form-hint {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
}

.form-group {
  width: 100%;
}

.text-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 3px solid white;
  background: rgba(255,255,255,0.9);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  outline: none;
  box-shadow: var(--shadow-card);
  transition: border-color var(--transition);
}
.text-input:focus { border-color: var(--color-primary); }
.text-input--code {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  font-size: var(--text-lg);
}

.form-error {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #c62828;
  text-align: center;
}
.form-error.hidden { display: none; }

/* =============================================
   INVITE SCREEN
   ============================================= */

.invite-code-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.85);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  width: 100%;
  box-shadow: var(--shadow-card);
}

.invite-code-label {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invite-code-big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw + 1rem, 3.2rem);
  color: var(--color-grass-dark);
  letter-spacing: 0.18em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  line-height: 1.1;
}

.invite-code-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 700;
}

.copied-toast {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-grass-dark);
  background: rgba(255,255,255,0.9);
  border-radius: var(--radius-full);
  padding: 2px 10px;
}
.copied-toast.hidden { display: none; }

.invite-msg-wrap {
  width: 100%;
}
.invite-msg-label {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-align: left;
}
.invite-msg-box {
  background: rgba(255,255,255,0.75);
  border: 3px solid white;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  box-shadow: var(--shadow-card);
  word-break: break-all;
}

.invite-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

/* =============================================
   EMPTY STATE
   ============================================= */

.empty-state {
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}