/* ============================================================
   ELAK BEB! — Design System
   BMW principles adapted for dark game theme:
   · Inter 700 (display) / 300 (body) — BMW Type Next Latin substitute
   · BMW Blue #1c69d4 — sole primary CTA color
   · border-radius: 0px on all buttons, cards, inputs
   · 48px minimum touch targets (WCAG AAA)
   · 8px spacing grid
   · Dark navy surface palette (BMW surface-dark adapted)
   ============================================================ */

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

/* ==================== DESIGN TOKENS ==================== */
:root {
  /* BMW Brand */
  --primary:         #1c69d4;           /* BMW Blue — all primary CTAs */
  --primary-active:  #0653b6;           /* Press/active state */
  --on-primary:      #ffffff;

  /* Dark surfaces — BMW surface-dark adapted for game */
  --surface:         #0a0a1a;           /* Deepest dark — page canvas */
  --surface-card:    #12122a;           /* Card surface */
  --surface-elev:    #1a1a3a;           /* Elevated / hover */
  --surface-input:   rgba(255,255,255,0.03);

  /* BMW hairlines on dark */
  --hairline:        rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.16);

  /* Text on dark (BMW on-dark scale) */
  --on-dark:         #ffffff;
  --on-dark-soft:    rgba(255,255,255,0.60);
  --on-dark-muted:   rgba(255,255,255,0.35);

  /* Semantic */
  --success:  #22c55e;
  --error:    #dc2626;

  /* Game neon accents — kept for game canvas & live-score only */
  --neon-pink:   #ff2d7b;
  --neon-blue:   #00f0ff;
  --neon-purple: #b44dff;
  --neon-green:  #39ff14;
  --neon-orange: #ff8a2d;
  --neon-red:    #ff3344;

  /* Typography — Inter (BMW Type Next Latin open substitute) */
  --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 8px spacing grid (BMW tokens) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Radii — BMW rule: 0px dominant, full for icon circles only */
  --r-none: 0px;
  --r-full: 9999px;

  /* Touch target — BMW AAA: 48×48px */
  --touch: 48px;
}

/* ==================== BASE ==================== */
html { height: 100%; }

body {
  background: var(--surface);
  color: var(--on-dark);
  font-family: var(--font);
  font-weight: 300;           /* BMW body: Light 300 */
  line-height: 1.55;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;             /* Dynamic viewport — Android keyboard */
  width: 100vw;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ==================== BG PARTICLES ==================== */
.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: floatParticle linear infinite;
  opacity: 0.15;
}
@keyframes floatParticle {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.15; }
  90%  { opacity: 0.15; }
  100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}

/* ==================== GLOBAL ICON BUTTONS ==================== */
.global-mute-btn,
.global-settings-btn {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 12px));
  width: var(--touch);
  height: var(--touch);
  border-radius: var(--r-full);   /* Icon buttons only — BMW exception */
  border: 1px solid var(--hairline-strong);
  background: rgba(10,10,26,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--on-dark);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  z-index: 40;
  transition: background 0.15s, border-color 0.15s;
}
.global-settings-btn { right: calc(var(--touch) + 14px); }
.global-mute-btn     { right: 10px; }
.global-mute-btn:active,
.global-settings-btn:active {
  background: rgba(28,105,212,0.22);
  border-color: var(--primary);
}

/* ==================== SCREENS ==================== */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  transition: opacity 0.4s ease, transform 0.4s ease;

  /* Scrollable by default (except game screen) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: safe center;
  padding: max(72px, env(safe-area-inset-top, 72px)) var(--sp-4)
           max(var(--sp-5), env(safe-area-inset-bottom, var(--sp-5)));
  gap: var(--sp-4);
}
.screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
}

/* ==================== GAME TITLE ==================== */
.game-title {
  font-size: clamp(2.4rem, 9vw, 5rem);
  font-weight: 700;           /* BMW display: 700 */
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-align: center;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-blue), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255,45,123,0.4));
  animation: titlePulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes titlePulse {
  0%,100% { filter: drop-shadow(0 0 20px rgba(255,45,123,0.3)); }
  50%     { filter: drop-shadow(0 0 40px rgba(0,240,255,0.5)); }
}

.game-subtitle {
  font-size: clamp(0.8rem, 2.8vw, 1rem);
  font-weight: 300;           /* BMW body: Light 300 */
  color: var(--on-dark-soft);
  text-align: center;
  flex-shrink: 0;
  margin-top: calc(-1 * var(--sp-2));
}

/* ==================== CARD (BMW model-card adapted) ==================== */
.card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-none);  /* BMW: 0px rectangular */
  padding: var(--sp-5);          /* BMW card padding: 24px */
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  flex-shrink: 0;
}

/* ==================== UPLOAD ZONE ==================== */
.upload-zone {
  width: 140px;
  height: 140px;
  border-radius: var(--r-full);  /* Circle — avatar exception */
  border: 2px dashed var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: rgba(28,105,212,0.05);
  transition: border-color 0.25s, background 0.25s;
  flex-shrink: 0;
}
.upload-zone:active {
  border-color: var(--neon-blue);
  background: rgba(0,240,255,0.05);
}
.upload-zone.has-photo {
  border-style: solid;
  border-color: var(--neon-green);
  box-shadow: 0 0 20px rgba(57,255,20,0.18);
}
.upload-zone__icon { font-size: 2.2rem; }
.upload-zone__text {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--on-dark-muted);
  text-align: center;
  padding: 0 8px;
  margin-top: 4px;
}
.upload-zone img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#photo-input { display: none; }

/* ==================== CROP CONTROLS ==================== */
.crop-controls {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}
.crop-controls.visible { display: flex; }
.crop-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-dark-muted);
}
.crop-slider {
  width: 86%;
  height: 4px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ==================== TEXT INPUTS (BMW text-input) ==================== */
.text-input {
  width: 100%;
  height: var(--touch);         /* BMW: 48px */
  padding: 0 var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-none); /* BMW: 0px rectangular */
  background: var(--surface-input);
  color: var(--on-dark);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.text-input:focus { border-color: var(--primary); }
.text-input::placeholder {
  color: var(--on-dark-muted);
  font-weight: 300;
}
.text-input--code {
  font-size: 1.8rem;
  letter-spacing: 10px;
  text-transform: uppercase;
  max-width: 220px;
}

/* ==================== BUTTONS (BMW button-primary) ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--touch);         /* BMW: 48px */
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-none); /* BMW: 0px — MANDATORY */
  font-family: var(--font);
  font-size: 0.875rem;          /* BMW button: 14px */
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* BMW Blue primary */
.btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.btn--primary:active:not(:disabled) { background: var(--primary-active); border-color: var(--primary-active); }

/* Green success */
.btn--success {
  background: var(--success);
  border-color: var(--success);
  color: #0a0a1a;
}
.btn--success:active:not(:disabled) { background: #16a34a; border-color: #16a34a; }

/* Outline / secondary — white outline on dark (BMW button-secondary-on-dark) */
.btn--outline {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--on-dark-soft);
}
.btn--outline:active:not(:disabled) {
  border-color: var(--primary);
  color: var(--on-dark);
}

/* Ghost — text only */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--on-dark-muted);
}
.btn--ghost:active:not(:disabled) { color: var(--on-dark); }

/* Modifier: full width */
.btn--full { width: 100%; }

/* ==================== INLINE LINK BUTTON (BMW button-text-link) ==================== */
/* BMW: UPPERCASE, letter-spacing 1.5px, no background */
.btn-link {
  background: none;
  border: none;
  color: var(--on-dark-muted);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  padding: var(--sp-3) 0;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.btn-link:active { color: var(--on-dark); }

/* Row of 2 buttons */
.btn-row {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
}
.btn-row > .btn { flex: 1; }

/* ==================== DIVIDER ==================== */
.divider {
  width: 100%;
  position: relative;
  text-align: center;
  color: var(--on-dark-muted);
  font-size: 0.72rem;
  font-weight: 300;
  padding: var(--sp-1) 0;
}
.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%; width: 38%; height: 1px;
  background: var(--hairline);
}
.divider::before { left: 0; }
.divider::after  { right: 0; }

/* ==================== CARD TITLE ==================== */
.card-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--on-dark);
  text-align: center;
}

/* ==================== ROOM CODE DISPLAY ==================== */
.room-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-6);
  min-height: var(--touch);
  border: 1px solid rgba(57,255,20,0.3);
  border-radius: var(--r-none);
  background: rgba(57,255,20,0.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.room-code-display:active { background: rgba(57,255,20,0.10); }
.room-code-display__code {
  font-size: clamp(2.2rem, 9vw, 3.5rem);
  font-weight: 700;
  letter-spacing: 12px;
  color: var(--neon-green);
  text-shadow: 0 0 24px rgba(57,255,20,0.5);
}
.room-code-display__hint {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.room-members {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--on-dark-soft);
  text-align: center;
}

.error-msg {
  color: var(--error);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  display: none;
}
.error-msg.visible { display: block; }

/* ==================== GAME SCREEN ==================== */
#game-screen {
  padding: 0;
  overflow: hidden;
  justify-content: flex-start;
}
#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* ==================== HUD ==================== */
.game-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}
.hud-score {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 20px));
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 700;
  color: var(--on-dark);
  text-shadow: 0 0 20px rgba(0,240,255,0.8), 0 2px 4px rgba(0,0,0,0.5);
}
.hud-name {
  position: absolute;
  top: max(60px, calc(env(safe-area-inset-top,0px) + 40px));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.hud-room {
  position: absolute;
  top: max(15px, env(safe-area-inset-top, 15px));
  left: max(15px, env(safe-area-inset-left, 15px));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--neon-green);
  background: rgba(57,255,20,0.10);
  border: 1px solid rgba(57,255,20,0.20);
  border-radius: var(--r-none);
  padding: 4px 10px;
}

/* ==================== BOSS WARNING ==================== */
.boss-warning {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  color: #ff3333;
  text-shadow: 0 0 40px rgba(255,0,0,0.8);
  z-index: 20;
  white-space: nowrap;
  animation: none;
  pointer-events: none;
}
.boss-warning.active { animation: bossWarn 1.5s ease-out forwards; }
@keyframes bossWarn {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(-10deg); opacity: 0; }
  20%  { transform: translate(-50%,-50%) scale(1.3) rotate(3deg);  opacity: 1; }
  40%  { transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
  80%  { transform: translate(-50%,-50%) scale(1) rotate(0);      opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.5) rotate(0);    opacity: 0; }
}

/* ==================== COUNTDOWN ==================== */
.countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 25;
  background: rgba(10,10,26,0.70);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.countdown-overlay.active { opacity: 1; pointer-events: all; }
.countdown-number {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 700;
  color: var(--neon-blue);
  text-shadow: 0 0 60px rgba(0,240,255,0.6);
  animation: countPop 0.8s ease-out;
}
@keyframes countPop {
  0%   { transform: scale(2);   opacity: 0; }
  50%  { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ==================== TOUCH HINTS ==================== */
.touch-hints {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom, 28px));
  left: 0; width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  pointer-events: none;
  opacity: 0.28;
  z-index: 16;
}
.touch-hint {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--on-dark-soft);
}

/* ==================== GAME OVER ==================== */
#gameover-screen {
  background: rgba(10,10,26,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: var(--sp-3);
}

.gameover-face {
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 3px solid var(--neon-pink);
  object-fit: cover;
  animation: deadFace 2s ease-in-out infinite;
  box-shadow: 0 0 28px rgba(255,45,123,0.4);
  flex-shrink: 0;
}
@keyframes deadFace {
  0%,100% { transform: rotate(-3deg) scale(1); }
  50%     { transform: rotate(3deg) scale(1.05); }
}

.gameover-title {
  font-size: clamp(1.8rem, 7vw, 3rem);
  font-weight: 700;
  color: var(--neon-pink);
  text-shadow: 0 0 28px rgba(255,45,123,0.5);
}

.gameover-killed-by {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--on-dark-muted);
}

.roast-message {
  font-size: clamp(0.9rem, 3.5vw, 1.1rem);
  font-weight: 300;
  font-style: italic;
  color: var(--neon-blue);
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
  min-height: 1.5em;
}
.roast-loading {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--on-dark-muted);
  font-style: normal;
}
.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--on-dark-muted);
  border-top-color: var(--neon-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.score-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.score-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--on-dark-muted);
}
.final-score {
  font-size: clamp(2.2rem, 8vw, 3.5rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--neon-blue), var(--neon-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.high-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--neon-purple);
}

.gameover-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(340px, 92vw);
}

/* ==================== LEADERBOARD ==================== */
#leaderboard-screen {
  background: var(--surface);
  padding: 0;
  justify-content: flex-start;
  overflow: hidden;
}

.lb-header {
  width: 100%;
  padding: max(var(--sp-4), env(safe-area-inset-top, var(--sp-4))) var(--sp-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.lb-title {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--neon-blue);
}
.lb-close {
  background: none;
  border: none;
  color: var(--on-dark-soft);
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
  width: var(--touch);
  height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.lb-close:active { color: var(--neon-pink); }

/* BMW category-tab pattern */
.lb-tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lb-tabs::-webkit-scrollbar { display: none; }

.lb-tab {
  flex: 1;
  min-width: 78px;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-2);
  background: none;
  border: none;
  border-bottom: 2px solid transparent; /* BMW: 2px active underline */
  color: var(--on-dark-muted);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, border-color 0.2s;
}
.lb-tab.active                   { color: var(--neon-blue);   border-bottom-color: var(--neon-blue); }
.lb-tab[data-tab="shame"].active  { color: var(--neon-pink);   border-bottom-color: var(--neon-pink); }
.lb-tab[data-tab="roasted"].active{ color: var(--neon-orange); border-bottom-color: var(--neon-orange); }

.lb-content {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-4) var(--sp-5);
  padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom, var(--sp-5)));
}
.lb-loading {
  text-align: center;
  padding: var(--sp-7);
  color: var(--on-dark-muted);
}
.lb-loading .spinner {
  width: 24px; height: 24px;
  border-width: 3px;
  margin: 0 auto var(--sp-2);
}
.lb-empty {
  text-align: center;
  padding: var(--sp-7);
  color: var(--on-dark-muted);
  font-size: 0.9rem;
  font-weight: 300;
}

.lb-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--hairline);
  border-radius: var(--r-none);
  margin-bottom: var(--sp-2);
}
.lb-entry.shame {
  border-color: rgba(255,45,123,0.15);
  background: rgba(255,45,123,0.03);
}
.lb-rank {
  font-size: 1rem;
  font-weight: 700;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
}
.lb-face {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--neon-pink);
  background: var(--surface-card);
  flex-shrink: 0;
}
.lb-info   { flex: 1; min-width: 0; }
.lb-name   { font-weight: 700; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-score-val { font-size: 0.72rem; font-weight: 300; color: var(--neon-blue); }
.lb-roast-text{ font-size: 0.68rem; font-weight: 300; color: var(--on-dark-muted); font-style: italic; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-deaths { font-size: 0.72rem; font-weight: 700; color: var(--neon-orange); }

/* ==================== TOAST ==================== */
.toast {
  position: fixed;
  bottom: max(80px, calc(env(safe-area-inset-bottom,0px) + 60px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-card);
  border: 1px solid var(--neon-green);
  border-radius: var(--r-none);
  padding: var(--sp-3) var(--sp-5);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--neon-green);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 200;
  pointer-events: none;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ==================== SETTINGS OVERLAY ==================== */
#settings-screen {
  background: rgba(10,10,26,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 150;
}

.settings-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-none);
  padding: var(--sp-5);
  width: min(400px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4);
  max-height: 90vh;
  overflow-y: auto;
}

.settings-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--on-dark);
  text-align: center;
}
.settings-subtitle {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--on-dark-muted);
  text-align: center;
  margin-top: calc(-1 * var(--sp-2));
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.settings-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--on-dark-muted);
}
.settings-section--toggles {
  border-top: 1px solid var(--hairline);
  padding-top: var(--sp-4);
  gap: 0;
}
.settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--touch);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-2) 0;
}
.settings-toggle:last-child { border-bottom: none; }
.settings-toggle__label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--on-dark);
}
#setting-vibrate,
#setting-sound {
  width: 22px; height: 22px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* ==================== CONTROL OPTION BUTTONS ==================== */
.ctrl-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  height: var(--touch);
  width: 100%;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-none);
  color: var(--on-dark-soft);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ctrl-opt__icon { font-size: 1.1rem; flex-shrink: 0; }
.ctrl-opt__text { flex: 1; margin: 0 var(--sp-2); }
.ctrl-opt__check { font-size: 0.85rem; }

/* Active states */
.ctrl-opt.active { border-color: var(--primary); color: var(--on-dark); background: rgba(28,105,212,0.08); }
.ctrl-opt.active[data-mode="tap"]  { border-color: var(--neon-pink);   color: var(--neon-pink);   background: rgba(255,45,123,0.06); }
.ctrl-opt.active[data-mode="tilt"] { border-color: var(--neon-green);  color: var(--neon-green);  background: rgba(57,255,20,0.06); }

/* ==================== RESPONSIVE ==================== */
@media (max-height: 580px) {
  .screen:not(#game-screen) { gap: var(--sp-3); }
  .game-title  { font-size: clamp(1.8rem, 6vw, 2.8rem); }
  .card        { padding: var(--sp-4); gap: var(--sp-3); }
  .upload-zone { width: 110px; height: 110px; }
  .gameover-face { width: 80px; height: 80px; }
  #gameover-screen { gap: var(--sp-2); }
  .gameover-title { font-size: 1.6rem; }
  .roast-message  { font-size: 0.85rem; }
}

@media (min-width: 480px) {
  .card { padding: var(--sp-6); }
}