/* ═══════════════════════════════════════════════════════════════ */
/*  AHORCADO MULTIJUGADOR — PREMIUM DESIGN SYSTEM v5.0          */
/*  Neuroscience + Psychology-driven UX Design                   */
/*  ─ Dopamine loops ─ Flow state ─ Cognitive ease ─             */
/* ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─── */
:root {
  --bg-void: #03000f;
  --bg-deep: #08041a;
  --surface-1: rgba(255,255,255,0.022);
  --surface-2: rgba(255,255,255,0.04);
  --surface-3: rgba(255,255,255,0.065);
  --glass: rgba(255,255,255,0.035);
  --glass-border: rgba(255,255,255,0.07);
  --glass-hover: rgba(255,255,255,0.09);
  --brand: #8b5cf6;
  --brand-light: #a78bfa;
  --brand-glow: rgba(139,92,246,0.25);
  --brand-glow-strong: rgba(139,92,246,0.5);
  --cyan: #06d6a0;
  --gold: #f59e0b;
  --rose: #f43f5e;
  --success: #10b981;
  --danger: #ef4444;
  --text-1: #f1f0ff;
  --text-2: rgba(255,255,255,0.55);
  --text-3: rgba(255,255,255,0.3);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── GLOBAL RESET OVERRIDES ─── */
* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg-void) !important;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

/* Ambient background with animated gradient orbs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 15% 30%, rgba(139,92,246,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 15%, rgba(99,102,241,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(6,214,160,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 70% 60%, rgba(245,158,11,0.025) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: ambientShift 25s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle 600px at 30% 50%, rgba(139,92,246,0.04) 0%, transparent 70%),
    radial-gradient(circle 400px at 75% 30%, rgba(6,214,160,0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: ambientShift 30s ease-in-out infinite alternate-reverse;
}

@keyframes ambientShift {
  0% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.7; transform: scale(1); }
}

/* ─── CUSTOM SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.45); }

/* ─── THEME OVERRIDES ─── */
body.theme-default {
  background: #030014 !important;
}
body.theme-jo {
  background: linear-gradient(160deg, #020a28 0%, #0c1a48 50%, #020a28 100%) !important;
  --brand: #4090ff; --brand-glow: rgba(64,144,255,0.25);
}
body.theme-lu {
  background: linear-gradient(160deg, #10031a 0%, #28082e 50%, #10031a 100%) !important;
  --brand: #e070b0; --brand-glow: rgba(224,112,176,0.25);
}
body.theme-santi {
  background: linear-gradient(160deg, #021208 0%, #0a2e14 50%, #021208 100%) !important;
  --brand: #40dd60; --brand-glow: rgba(64,221,96,0.25);
}
body.theme-andrea {
  background: linear-gradient(160deg, #12021a 0%, #2e0822 50%, #12021a 100%) !important;
  --brand: #ff69b4; --brand-glow: rgba(255,105,180,0.25);
}
body.theme-morocho {
  background: linear-gradient(160deg, #120a02 0%, #2e1a08 50%, #120a02 100%) !important;
  --brand: #e8923a; --brand-glow: rgba(232,146,58,0.25);
}
body.theme-angie {
  background: linear-gradient(160deg, #0a0218 0%, #1e0a32 50%, #0a0218 100%) !important;
  --brand: #a78bfa; --brand-glow: rgba(167,139,250,0.25);
}

/* ─── SCOREBOARD ─── */
.scoreboard {
  background: rgba(8,4,26,0.85) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid rgba(139,92,246,0.1) !important;
  padding: 10px 16px !important;
  gap: 8px !important;
  position: relative;
  z-index: 10;
}
.score-item {
  background: var(--surface-1) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 24px !important;
  padding: 6px 14px !important;
  font-size: 0.88em !important;
  transition: all 0.3s var(--ease-out) !important;
  backdrop-filter: blur(10px);
}
.score-item.active {
  border-color: var(--brand) !important;
  box-shadow: 0 0 16px var(--brand-glow), inset 0 0 12px rgba(139,92,246,0.05) !important;
  background: rgba(139,92,246,0.06) !important;
}
.score-pts { font-weight: 800 !important; }
.score-streak { color: #ff8800 !important; font-weight: 700 !important; }

/* ─── CONTAINER ─── */
.container {
  position: relative;
  z-index: 1;
  max-width: 860px !important;
  padding: 20px 16px !important;
}

/* ─── SCREEN TRANSITIONS ─── */
.screen {
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.screen.active {
  animation: screenEnter 0.5s var(--ease-out) both;
}
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════ */
/*          LOBBY — FIRST IMPRESSION      */
/* ═══════════════════════════════════════ */

/* Hero Section — Creates awe & emotional resonance */
.lobby-hero {
  padding-top: 28px !important;
  margin-bottom: 20px !important;
  position: relative;
}
.lobby-hero::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(60px);
  animation: heroGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGlow {
  0% { opacity: 0.4; transform: translateX(-50%) scale(0.9); }
  100% { opacity: 0.7; transform: translateX(-50%) scale(1.1); }
}
.lobby-hero-icon {
  font-size: 5em !important;
  filter: drop-shadow(0 8px 32px var(--brand-glow-strong)) !important;
  animation: heroFloat 4s ease-in-out infinite !important;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
  50% { transform: translateY(-18px) rotate(3deg) scale(1.05); }
}
.lobby-hero-title {
  font-size: 3.8em !important;
  font-weight: 900 !important;
  letter-spacing: 4px !important;
  margin: 10px 0 4px !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 25%, #c4b5fd 50%, #8b5cf6 75%, #6366f1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  background-size: 200% 200% !important;
  animation: titleShimmer 4s ease-in-out infinite !important;
  text-shadow: none !important;
}
@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Theme-specific title colors */
.theme-jo .lobby-hero-title {
  background: linear-gradient(135deg, #4090ff, #60b0ff, #80d0ff, #4090ff, #2060cc) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  background-size: 200% 200% !important;
}
.theme-lu .lobby-hero-title {
  background: linear-gradient(135deg, #e070b0, #ff90cc, #ffb0dd, #e070b0, #cc3399) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  background-size: 200% 200% !important;
}
.theme-santi .lobby-hero-title {
  background: linear-gradient(135deg, #40dd60, #60ff80, #90ffaa, #40dd60, #20bb40) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  background-size: 200% 200% !important;
}

.lobby-hero-sub {
  font-size: 0.82em !important;
  letter-spacing: 6px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  opacity: 0.3 !important;
  margin-bottom: 10px !important;
}

.lobby-version {
  background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(99,102,241,0.08)) !important;
  border: 1px solid rgba(139,92,246,0.2) !important;
  color: #a78bfa !important;
  font-weight: 700 !important;
  font-size: 0.7em !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  letter-spacing: 1px;
}

/* ─── FLOATING PARTICLES — Enhanced ─── */
.lobby-particles { z-index: 0 !important; }
.lobby-particle {
  background: rgba(139,92,246,0.35) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(139,92,246,0.3);
}

/* ─── PICK LABEL ─── */
.lobby-pick-label {
  font-size: 0.78em !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  opacity: 0.35 !important;
  margin-bottom: 20px !important;
}

/* ═══════════════════════════════════════ */
/*       PLAYER CARDS — Dopamine UI       */
/* ═══════════════════════════════════════ */

.player-buttons {
  gap: 14px !important;
  max-width: 460px !important;
  position: relative;
  z-index: 1;
}

.player-btn {
  padding: 22px 10px 18px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  transition: all 0.4s var(--ease-out) !important;
  position: relative;
  overflow: hidden !important;
  cursor: pointer;
}

/* Subtle gradient overlay on hover */
.player-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, currentColor, transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.4s var(--ease-out) !important;
  height: auto !important;
  border-radius: inherit;
}
.player-btn:hover::before { opacity: 0.04 !important; }

/* Glow ring on hover */
.player-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, currentColor 50%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  z-index: -1;
  filter: blur(4px);
}
.player-btn:hover::after { opacity: 0.15; }

.player-btn:hover {
  transform: translateY(-8px) scale(1.03) !important;
  border-color: currentColor !important;
  box-shadow:
    0 12px 40px rgba(0,0,0,0.5),
    0 0 30px var(--brand-glow) !important;
}
.player-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.1s !important;
}

.player-btn .btn-emoji {
  font-size: 2.4em !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)) !important;
  transition: transform 0.4s var(--ease-spring);
}
.player-btn:hover .btn-emoji { transform: scale(1.15) rotate(-5deg); }

.player-btn .btn-name {
  font-size: 0.82em !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s;
}
.player-btn:hover .btn-name { opacity: 1 !important; }

.player-btn .btn-lock {
  font-size: 0.65em !important;
  opacity: 0.35 !important;
  transition: opacity 0.3s;
}
.player-btn:hover .btn-lock { opacity: 0.7 !important; }

/* Player-specific accent colors — Glass cards */
.player-btn.lu {
  color: #e88cc4 !important;
  border-color: rgba(232,140,196,0.12) !important;
  background: linear-gradient(160deg, rgba(232,140,196,0.06) 0%, rgba(232,140,196,0.01) 100%) !important;
}
.player-btn.lu:hover { border-color: rgba(232,140,196,0.4) !important; box-shadow: 0 12px 40px rgba(232,140,196,0.15), 0 0 40px rgba(232,140,196,0.1) !important; }

.player-btn.jo {
  color: #6ca0ff !important;
  border-color: rgba(108,160,255,0.12) !important;
  background: linear-gradient(160deg, rgba(108,160,255,0.06) 0%, rgba(108,160,255,0.01) 100%) !important;
}
.player-btn.jo:hover { border-color: rgba(108,160,255,0.4) !important; box-shadow: 0 12px 40px rgba(108,160,255,0.15), 0 0 40px rgba(108,160,255,0.1) !important; }

.player-btn.santi {
  color: #55e875 !important;
  border-color: rgba(85,232,117,0.12) !important;
  background: linear-gradient(160deg, rgba(85,232,117,0.06) 0%, rgba(85,232,117,0.01) 100%) !important;
}
.player-btn.santi:hover { border-color: rgba(85,232,117,0.4) !important; box-shadow: 0 12px 40px rgba(85,232,117,0.15), 0 0 40px rgba(85,232,117,0.1) !important; }

.player-btn.andrea {
  color: #ff7ec4 !important;
  border-color: rgba(255,126,196,0.12) !important;
  background: linear-gradient(160deg, rgba(255,126,196,0.06) 0%, rgba(255,126,196,0.01) 100%) !important;
}
.player-btn.andrea:hover { border-color: rgba(255,126,196,0.4) !important; box-shadow: 0 12px 40px rgba(255,126,196,0.15), 0 0 40px rgba(255,126,196,0.1) !important; }

.player-btn.morocho {
  color: #f0a44e !important;
  border-color: rgba(240,164,78,0.12) !important;
  background: linear-gradient(160deg, rgba(240,164,78,0.06) 0%, rgba(240,164,78,0.01) 100%) !important;
}
.player-btn.morocho:hover { border-color: rgba(240,164,78,0.4) !important; box-shadow: 0 12px 40px rgba(240,164,78,0.15), 0 0 40px rgba(240,164,78,0.1) !important; }

.player-btn.angie {
  color: #b89dfc !important;
  border-color: rgba(184,157,252,0.12) !important;
  background: linear-gradient(160deg, rgba(184,157,252,0.06) 0%, rgba(184,157,252,0.01) 100%) !important;
}
.player-btn.angie:hover { border-color: rgba(184,157,252,0.4) !important; box-shadow: 0 12px 40px rgba(184,157,252,0.15), 0 0 40px rgba(184,157,252,0.1) !important; }

.player-btn.create-btn {
  color: rgba(255,255,255,0.4) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
.player-btn.create-btn:hover {
  color: rgba(255,255,255,0.7) !important;
  border-color: rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.02) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
}
.player-btn.custom {
  color: #ffb84d !important;
  border-color: rgba(255,184,77,0.12) !important;
  background: linear-gradient(160deg, rgba(255,184,77,0.06) 0%, rgba(255,184,77,0.01) 100%) !important;
}
.player-btn.custom:hover { border-color: rgba(255,184,77,0.4) !important; }

/* ═══════════════════════════════════════ */
/*         AUTH SECTION — Social Login     */
/* ═══════════════════════════════════════ */

.auth-divider-line {
  opacity: 0.2 !important;
  font-size: 0.72em !important;
  letter-spacing: 2px !important;
  margin: 28px auto 0 !important;
}

.auth-buttons-row {
  margin-top: 16px !important;
  gap: 10px !important;
}

.auth-btn-std {
  border-radius: 14px !important;
  padding: 13px 16px !important;
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06) !important;
  font-weight: 600 !important;
  font-size: 0.85em !important;
  transition: all 0.35s var(--ease-out) !important;
  color: var(--text-2) !important;
}
.auth-btn-std:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.05) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3) !important;
  color: var(--text-1) !important;
}
.auth-btn-std.google-btn:hover { border-color: rgba(66,133,244,0.4) !important; box-shadow: 0 8px 24px rgba(66,133,244,0.15) !important; }
.auth-btn-std.email-btn:hover { border-color: rgba(245,158,11,0.4) !important; box-shadow: 0 8px 24px rgba(245,158,11,0.15) !important; }
.auth-btn-std.phone-btn:hover { border-color: rgba(16,185,129,0.4) !important; box-shadow: 0 8px 24px rgba(16,185,129,0.15) !important; }

/* Auth expand panels */
.auth-expand-inner {
  border: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.02) !important;
  backdrop-filter: blur(16px);
  border-radius: 18px !important;
}

/* ═══════════════════════════════════════ */
/*        CREATE PROFILE SECTION          */
/* ═══════════════════════════════════════ */

.create-input {
  background: rgba(255,255,255,0.03) !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  transition: all 0.3s var(--ease-out) !important;
  color: #fff !important;
}
.create-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow), 0 0 20px var(--brand-glow) !important;
  background: rgba(139,92,246,0.03) !important;
  outline: none !important;
}
.create-input::placeholder { color: rgba(255,255,255,0.2); }

.emoji-opt {
  border: 2px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.02) !important;
  transition: all 0.25s var(--ease-spring) !important;
}
.emoji-opt:hover {
  border-color: rgba(255,255,255,0.2) !important;
  transform: scale(1.15) !important;
  background: rgba(255,255,255,0.04) !important;
}
.emoji-opt.selected {
  border-color: var(--brand) !important;
  background: rgba(139,92,246,0.1) !important;
  box-shadow: 0 0 12px var(--brand-glow) !important;
  transform: scale(1.1);
}

.action-btn {
  border-radius: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  transition: all 0.35s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.action-btn.gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,0.2);
}
.action-btn.gold:hover:not(:disabled) {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 32px rgba(245,158,11,0.3) !important;
}

/* ═══════════════════════════════════════ */
/*        ROOMS SCREEN — Selection Hub    */
/* ═══════════════════════════════════════ */

.lobby-title {
  font-size: 2.6em !important;
  font-weight: 900 !important;
  letter-spacing: 2px;
  background: linear-gradient(135deg, var(--brand), #c4b5fd) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.lobby-sub {
  font-size: 0.92em !important;
  opacity: 0.5 !important;
}

.rooms-action-btn {
  border: 1.5px solid rgba(255,255,255,0.06) !important;
  border-radius: 22px !important;
  background: var(--surface-1) !important;
  backdrop-filter: blur(12px);
  padding: 24px 14px !important;
  transition: all 0.4s var(--ease-out) !important;
}
.rooms-action-btn:hover {
  transform: translateY(-5px) !important;
  border-color: var(--brand) !important;
  background: rgba(139,92,246,0.04) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px var(--brand-glow) !important;
}
.rooms-action-btn .rooms-action-icon { font-size: 2.2em !important; }
.rooms-action-btn .rooms-action-label { font-weight: 800 !important; }

.active-rooms-item {
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 16px !important;
  background: var(--surface-1) !important;
  backdrop-filter: blur(8px);
  padding: 14px 18px !important;
  transition: all 0.3s var(--ease-out) !important;
}
.active-rooms-item:hover {
  border-color: rgba(139,92,246,0.25) !important;
  background: rgba(139,92,246,0.04) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.room-code-badge {
  background: rgba(139,92,246,0.1) !important;
  color: var(--brand-light);
  border-radius: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 3px !important;
}

.room-phase-badge {
  font-weight: 700 !important;
  font-size: 0.72em !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
}
.room-phase-badge.lobby { background: rgba(16,185,129,0.12) !important; color: #34d399 !important; }
.room-phase-badge.playing { background: rgba(245,158,11,0.12) !important; color: #fbbf24 !important; }

/* ═══════════════════════════════════════ */
/*         ROOM & MODALS — Glass UI       */
/* ═══════════════════════════════════════ */

.room-modal-bg, .aon-modal-bg, .pwd-modal-bg, .report-modal-bg {
  background: rgba(3,0,15,0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.room-modal, .aon-modal, .report-modal {
  background: linear-gradient(160deg, rgba(20,12,40,0.98), rgba(12,8,28,0.98)) !important;
  border: 1.5px solid rgba(139,92,246,0.15) !important;
  border-radius: 24px !important;
  padding: 32px 28px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 40px var(--brand-glow) !important;
  animation: modalEnter 0.4s var(--ease-spring) both !important;
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.room-name-input, .word-input, .cat-custom-input {
  background: rgba(255,255,255,0.03) !important;
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: all 0.3s var(--ease-out) !important;
}
.room-name-input:focus, .word-input:focus, .cat-custom-input:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-glow), 0 0 20px var(--brand-glow) !important;
  outline: none;
}

/* Room code display */
.room-code-big {
  font-size: 2.6em !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
  border: 2px solid rgba(139,92,246,0.15) !important;
  background: rgba(139,92,246,0.04) !important;
  border-radius: 18px !important;
  padding: 12px 28px !important;
  transition: all 0.3s var(--ease-out) !important;
  color: var(--brand-light);
  position: relative;
}
.room-code-big:hover {
  border-color: rgba(139,92,246,0.4) !important;
  background: rgba(139,92,246,0.08) !important;
  box-shadow: 0 0 30px var(--brand-glow) !important;
}
.room-code-big.copied {
  border-color: var(--success) !important;
  box-shadow: 0 0 24px rgba(16,185,129,0.3) !important;
  color: var(--success);
}

/* ─── VOTING / CONNECTED PLAYERS ─── */
.connected-card {
  border: 1.5px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  background: var(--surface-1) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease-out) !important;
}
.connected-card.me {
  border-color: rgba(139,92,246,0.2) !important;
  background: rgba(139,92,246,0.04) !important;
  box-shadow: 0 2px 12px rgba(139,92,246,0.08) !important;
}
.connected-badge {
  background: rgba(255,255,255,0.06) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
}

.vote-divider {
  opacity: 0.2 !important;
  font-size: 0.78em !important;
  letter-spacing: 3px !important;
}

.vote-btn {
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  padding: 14px 24px !important;
  font-weight: 700 !important;
  background: var(--surface-1) !important;
  transition: all 0.3s var(--ease-out) !important;
}
.vote-btn:hover:not(:disabled) {
  border-color: rgba(139,92,246,0.3) !important;
  background: rgba(139,92,246,0.04) !important;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.vote-btn.voted {
  border-color: var(--success) !important;
  background: rgba(16,185,129,0.06) !important;
  box-shadow: 0 0 16px rgba(16,185,129,0.15) !important;
}

.start-game-btn {
  border-radius: 18px !important;
  padding: 16px 52px !important;
  font-size: 1.2em !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  transition: all 0.4s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
.start-game-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.start-game-btn:hover:not(:disabled)::before { transform: translateX(100%); }
.start-game-btn:hover:not(:disabled) {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 30px var(--brand-glow) !important;
}
.start-game-btn.ready {
  animation: readyPulse 2s ease-in-out infinite !important;
}
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 0 8px var(--brand-glow); }
  50% { box-shadow: 0 0 24px var(--brand-glow-strong), 0 0 48px var(--brand-glow); }
}

/* ═══════════════════════════════════════ */
/*     GAME SCREEN — Flow State Design    */
/* ═══════════════════════════════════════ */

/* Turn Indicator — Clarity & urgency cues */
.turn-indicator {
  font-size: 1.15em !important;
  padding: 12px 28px !important;
  border-radius: 32px !important;
  font-weight: 700 !important;
  border: 2px solid rgba(139,92,246,0.2) !important;
  background: rgba(139,92,246,0.04) !important;
  backdrop-filter: blur(12px);
  transition: all 0.4s var(--ease-out) !important;
  letter-spacing: 0.3px;
}
.theme-jo .turn-indicator { border-color: rgba(64,144,255,0.25) !important; background: rgba(64,144,255,0.04) !important; }
.theme-lu .turn-indicator { border-color: rgba(224,112,176,0.25) !important; background: rgba(224,112,176,0.04) !important; }
.theme-santi .turn-indicator { border-color: rgba(64,221,96,0.25) !important; background: rgba(64,221,96,0.04) !important; }
.turn-indicator.myturn {
  border-color: var(--brand) !important;
  background: rgba(139,92,246,0.08) !important;
  box-shadow: 0 0 24px var(--brand-glow) !important;
  animation: myTurnPulse 1.8s ease-in-out infinite !important;
}
@keyframes myTurnPulse {
  0%, 100% { box-shadow: 0 0 12px var(--brand-glow); transform: scale(1); }
  50% { box-shadow: 0 0 32px var(--brand-glow-strong); transform: scale(1.02); }
}

/* Turn Timer */
.turn-timer {
  height: 5px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  overflow: hidden;
  max-width: 420px !important;
}
.turn-timer-bar {
  transition: width 0.8s linear, background 0.5s !important;
  border-radius: 10px !important;
}
.turn-timer-bar { background: linear-gradient(90deg, #10b981, #34d399) !important; }
.turn-timer-bar.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.turn-timer-bar.danger { background: linear-gradient(90deg, #ef4444, #f87171) !important; animation: timerDanger 0.5s ease infinite; }
@keyframes timerDanger { 50% { opacity: 0.7; } }

/* Category bar */
.cat-bar {
  background: var(--surface-2) !important;
  border: 1px solid var(--glass-border);
  border-radius: 24px !important;
  padding: 8px 18px !important;
  font-size: 0.88em !important;
  backdrop-filter: blur(8px);
}

/* ─── HANGMAN SVG ─── */
.hangman-container { margin: 16px 0 !important; }
.hangman-svg {
  width: 190px !important;
  height: 210px !important;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}
.hangman-svg .base { stroke: rgba(255,255,255,0.12) !important; stroke-width: 2.5 !important; }
.hangman-svg .hpart { stroke: #ef4444 !important; stroke-width: 3 !important; }
.hangman-part { transition: opacity 0.4s var(--ease-out) !important; }
.hangman-part.show { filter: drop-shadow(0 0 6px rgba(239,68,68,0.4)); }

/* ─── WORD DISPLAY — Revelation feels rewarding ─── */
.word-display {
  gap: 10px !important;
  margin: 24px 0 !important;
  min-height: 65px !important;
}
.letter-slot {
  width: 48px !important;
  height: 60px !important;
  font-size: 2.1em !important;
  font-weight: 900 !important;
  border-bottom-width: 3px !important;
  border-bottom-style: solid !important;
  border-color: rgba(139,92,246,0.3) !important;
  transition: all 0.35s var(--ease-spring) !important;
  position: relative;
}
.theme-jo .letter-slot { border-color: rgba(64,144,255,0.3) !important; }
.theme-lu .letter-slot { border-color: rgba(224,112,176,0.3) !important; }
.theme-santi .letter-slot { border-color: rgba(64,221,96,0.3) !important; }

.letter-slot.revealed {
  border-color: var(--brand) !important;
  color: #fff !important;
  animation: letterReveal 0.5s var(--ease-spring) both !important;
  text-shadow: 0 0 20px var(--brand-glow);
}
@keyframes letterReveal {
  0% { transform: rotateX(90deg) scale(0.5); opacity: 0; }
  60% { transform: rotateX(-10deg) scale(1.1); opacity: 1; }
  100% { transform: rotateX(0) scale(1); opacity: 1; }
}
.letter-slot.hint {
  color: #f59e0b !important;
  text-shadow: 0 0 16px rgba(245,158,11,0.4) !important;
  border-color: rgba(245,158,11,0.4) !important;
}

/* Error display */
.error-display { margin: 12px 0 !important; }
.error-label { font-weight: 700 !important; opacity: 0.6 !important; font-size: 0.92em !important; }
.incorrect-letter {
  background: rgba(239,68,68,0.08) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: 8px !important;
  color: #f87171 !important;
  font-weight: 800 !important;
  transition: all 0.2s;
}

/* ─── KEYBOARD — Satisfying tactile feedback ─── */
.keyboard {
  margin: 20px 0 75px !important;
  gap: 7px !important;
}
.keyboard-row { gap: 6px !important; }

.key-btn {
  width: 42px !important;
  height: 48px !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.025) !important;
  backdrop-filter: blur(6px);
  transition: all 0.2s var(--ease-out) !important;
  position: relative;
  overflow: hidden;
}
/* Ripple pseudo on hover */
.key-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.key-btn:hover:not(.disabled):not(.correct):not(.incorrect)::after { opacity: 1; }

.key-btn:hover:not(.disabled):not(.correct):not(.incorrect) {
  transform: translateY(-3px) scale(1.08) !important;
  border-color: rgba(139,92,246,0.4) !important;
  background: rgba(139,92,246,0.08) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 12px var(--brand-glow) !important;
}
.key-btn:active:not(.disabled):not(.correct):not(.incorrect) {
  transform: translateY(1px) scale(0.95) !important;
  transition-duration: 0.08s !important;
}

.key-btn.correct {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.4) !important;
  color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16,185,129,0.15) !important;
}
.key-btn.incorrect {
  background: rgba(239,68,68,0.06) !important;
  border-color: rgba(239,68,68,0.2) !important;
  color: rgba(248,113,113,0.4) !important;
  opacity: 0.35 !important;
}
.key-btn.disabled { opacity: 0.15 !important; }

/* ─── GAME ACTION BUTTONS ─── */
.hint-btn {
  border: 1.5px solid rgba(245,158,11,0.25) !important;
  border-radius: 24px !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  padding: 8px 20px !important;
  transition: all 0.3s var(--ease-out) !important;
  background: rgba(245,158,11,0.04) !important;
}
.hint-btn:hover:not(:disabled) {
  background: rgba(245,158,11,0.1) !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.2) !important;
  transform: translateY(-2px);
}

.allornothing-btn {
  border: 2px solid rgba(244,63,94,0.25) !important;
  border-radius: 24px !important;
  color: #fb7185 !important;
  font-weight: 800 !important;
  padding: 8px 20px !important;
  transition: all 0.3s var(--ease-out) !important;
  background: rgba(244,63,94,0.04) !important;
}
.allornothing-btn:hover:not(:disabled) {
  background: rgba(244,63,94,0.1) !important;
  box-shadow: 0 0 20px rgba(244,63,94,0.2) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

.report-btn {
  border: 1px solid rgba(245,158,11,0.2) !important;
  border-radius: 20px !important;
  transition: all 0.3s var(--ease-out) !important;
}
.report-btn:hover:not(:disabled) {
  background: rgba(245,158,11,0.08) !important;
  transform: translateY(-1px);
}

/* ─── HOST SECTION ─── */
.host-section h2 { font-weight: 900 !important; }
.host-section p { opacity: 0.5 !important; font-size: 0.92em !important; }

.cat-chip {
  border: 1.5px solid rgba(255,255,255,0.08) !important;
  border-radius: 24px !important;
  background: var(--surface-1) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  transition: all 0.3s var(--ease-out) !important;
}
.cat-chip:hover { border-color: rgba(255,255,255,0.2) !important; transform: translateY(-2px); }
.cat-chip.selected {
  border-color: var(--success) !important;
  background: rgba(16,185,129,0.08) !important;
  color: #34d399 !important;
  box-shadow: 0 0 10px rgba(16,185,129,0.15);
}

.submit-word-btn {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all 0.35s var(--ease-out) !important;
  letter-spacing: 0.5px;
}
.submit-word-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.3), 0 0 20px var(--brand-glow) !important;
}

.word-input {
  font-size: 1.3em !important;
  padding: 16px 20px !important;
  border-radius: 16px !important;
  letter-spacing: 4px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 2px solid rgba(255,255,255,0.1) !important;
  font-weight: 800 !important;
}

/* ═══════════════════════════════════════ */
/*      ROUND END — Celebration Design    */
/* ═══════════════════════════════════════ */

.round-end-section {
  padding: 28px 20px !important;
}
.round-result {
  font-size: 1.6em !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px;
}
.round-result.win {
  color: #34d399 !important;
  text-shadow: 0 0 30px rgba(16,185,129,0.3);
}
.round-result.lose {
  color: #f87171 !important;
  text-shadow: 0 0 30px rgba(239,68,68,0.3);
}
.revealed-word {
  font-size: 2.2em !important;
  font-weight: 900 !important;
  letter-spacing: 8px !important;
  padding: 16px 24px !important;
  border-radius: 16px !important;
  background: var(--surface-2) !important;
  border: 2px solid rgba(139,92,246,0.15) !important;
  box-shadow: 0 0 30px var(--brand-glow);
}
.round-points {
  font-size: 0.95em !important;
  line-height: 1.8;
}
.next-round-btn {
  border-radius: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  padding: 16px 48px !important;
  transition: all 0.4s var(--ease-out) !important;
}
.next-round-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.4), 0 0 30px var(--brand-glow) !important;
}

/* ═══════════════════════════════════════ */
/*     HISTORY / STATS — Data Display     */
/* ═══════════════════════════════════════ */

.tabs {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  background: var(--surface-1);
  overflow: hidden !important;
}
.tab-btn {
  font-weight: 700 !important;
  padding: 12px 22px !important;
  opacity: 0.4 !important;
  transition: all 0.3s var(--ease-out) !important;
  border: none !important;
}
.tab-btn.active {
  opacity: 1 !important;
  background: rgba(139,92,246,0.08) !important;
}
.tab-btn:hover:not(.active) { opacity: 0.7 !important; }

.history-table th {
  font-size: 0.72em !important;
  letter-spacing: 1px !important;
  opacity: 0.35 !important;
}
.history-table td { font-size: 0.88em !important; }
.history-table th, .history-table td {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 10px 12px !important;
}
.history-table tr:hover { background: rgba(139,92,246,0.03) !important; }

.stat-card {
  border-radius: 16px !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  padding: 18px !important;
  transition: all 0.3s var(--ease-out);
  backdrop-filter: blur(8px);
}
.stat-card:hover {
  border-color: rgba(139,92,246,0.15);
  transform: translateY(-2px);
}
.stat-value { font-weight: 900 !important; font-size: 1.8em !important; }
.stat-label { font-weight: 600 !important; opacity: 0.4 !important; text-transform: uppercase; font-size: 0.7em !important; letter-spacing: 1px; }

.logro-item {
  border-radius: 12px !important;
  background: var(--surface-1) !important;
  border: 1px solid rgba(255,255,255,0.04);
  padding: 10px 14px !important;
  transition: all 0.2s;
}
.logro-item:hover { background: var(--surface-2) !important; }

/* ═══════════════════════════════════════ */
/*      BOTTOM BAR — Floating Glass Bar   */
/* ═══════════════════════════════════════ */

.bottom-bar {
  background: rgba(8,4,26,0.82) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border-top: 1px solid rgba(139,92,246,0.08);
  padding: 10px 16px !important;
  gap: 6px !important;
}
.bar-btn {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  padding: 7px 14px !important;
  font-weight: 600 !important;
  font-size: 0.78em !important;
  transition: all 0.25s var(--ease-out) !important;
  opacity: 0.55 !important;
}
.bar-btn:hover {
  opacity: 1 !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.15) !important;
  transform: translateY(-2px);
}
.bar-btn.danger:hover {
  border-color: rgba(239,68,68,0.35) !important;
  color: #f87171 !important;
  background: rgba(239,68,68,0.05) !important;
}

/* Reaction buttons */
.reaction-btn {
  font-size: 1.15em !important;
  border-radius: 10px !important;
  padding: 4px 6px !important;
  transition: all 0.2s var(--ease-spring) !important;
}
.reaction-btn:hover {
  transform: scale(1.35) !important;
  background: rgba(255,255,255,0.06) !important;
}
.reaction-btn:active { transform: scale(1.6) !important; }

/* Floating reactions */
.reaction-float {
  font-size: 2.6em !important;
  animation: reactionRise 3s ease-out forwards !important;
}
.reaction-float .reaction-sender {
  font-size: 0.28em !important;
  background: rgba(0,0,0,0.5);
  padding: 2px 8px;
  border-radius: 8px;
  backdrop-filter: blur(8px);
}
@keyframes reactionRise {
  0% { opacity: 0; transform: translateY(0) scale(0.3); }
  15% { opacity: 1; transform: translateY(-20px) scale(1.3); }
  35% { opacity: 1; transform: translateY(-50px) scale(1); }
  100% { opacity: 0; transform: translateY(-180px) scale(0.7); }
}

/* ═══════════════════════════════════════ */
/*         ACHIEVEMENT TOASTS             */
/* ═══════════════════════════════════════ */

.achievement-toast {
  background: linear-gradient(135deg, rgba(20,12,40,0.95), rgba(30,18,50,0.95)) !important;
  backdrop-filter: blur(20px);
  border: 2px solid rgba(245,158,11,0.3) !important;
  border-radius: 18px !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
  padding: 16px 24px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(245,158,11,0.15) !important;
  animation: toastEnter 0.5s var(--ease-spring) both !important;
}
@keyframes toastEnter {
  from { transform: translateX(120%) scale(0.8); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
.achievement-toast.hide { animation: toastExit 0.4s var(--ease-out) forwards !important; }
@keyframes toastExit {
  to { transform: translateX(120%) scale(0.8); opacity: 0; }
}

/* ─── CONFETTI ─── */
.confetti { border-radius: 2px !important; }

/* ─── EXPIRY WARNING ─── */
.expiry-warning {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  color: #f87171 !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px);
  font-weight: 700 !important;
}

/* ─── PENDING REQUEST ─── */
.pending-overlay h2 { font-weight: 900 !important; }
.pending-dots { color: var(--brand-light); }
.pending-cancel {
  border: 1.5px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  transition: all 0.3s var(--ease-out) !important;
  font-weight: 600;
}
.pending-cancel:hover {
  border-color: rgba(255,255,255,0.25) !important;
  background: rgba(255,255,255,0.03) !important;
}

.pending-item {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  background: var(--surface-1) !important;
  padding: 12px 16px !important;
}
.pending-item .approve-btn {
  background: var(--success) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  transition: all 0.2s var(--ease-out) !important;
}
.pending-item .approve-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.pending-item .deny-btn {
  background: var(--danger) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  transition: all 0.2s var(--ease-out) !important;
}
.pending-item .deny-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(239,68,68,0.3); }

/* ─── PROFILE SETTINGS ─── */
.profile-save {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all 0.35s var(--ease-out) !important;
  letter-spacing: 0.5px;
}
.profile-save:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(16,185,129,0.2) !important;
}

/* ─── AUTH / FIREBASE UI ─── */
.auth-user-bar {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px);
  margin: 8px 16px !important;
  padding: 10px 16px !important;
}

/* ─── ROOM SCORES ─── */
.room-score-chip {
  background: var(--surface-2) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 0.8em !important;
}

/* ─── REPORT VOTE ─── */
.report-vote-box {
  background: rgba(245,158,11,0.04) !important;
  border: 1px solid rgba(245,158,11,0.15) !important;
  border-radius: 16px !important;
}
.report-reason-btn {
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  background: var(--surface-1) !important;
  transition: all 0.25s var(--ease-out) !important;
  font-weight: 600;
}
.report-reason-btn:hover {
  border-color: rgba(245,158,11,0.3) !important;
  background: rgba(245,158,11,0.05) !important;
  transform: translateX(4px);
}

/* ─── PROFILE SECTION ─── */
.profile-field label {
  font-weight: 600 !important;
  letter-spacing: 0.5px;
}
.profile-section h2 { font-weight: 900 !important; }

/* ─── XP BADGE ─── */
.xp-badge {
  background: rgba(245,158,11,0.1) !important;
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* ─── AD CONTAINERS — Minimal visual impact ─── */
.lobby-ad, .ad-container {
  opacity: 0.7;
  border-radius: 14px !important;
  overflow: hidden;
}

/* ─── BACK LINK ─── */
.back-link {
  opacity: 0.35 !important;
  font-weight: 600 !important;
  transition: all 0.25s var(--ease-out) !important;
  font-size: 0.9em !important;
}
.back-link:hover {
  opacity: 0.8 !important;
  transform: translateX(-4px);
}

/* ─── WAITING SCREEN ─── */
.waiting-section h2 { font-weight: 900 !important; }
.waiting-dots {
  color: var(--brand-light) !important;
  font-size: 2em !important;
}

/* ═══════════════════════════════════════ */
/*       ENHANCED ANIMATIONS              */
/* ═══════════════════════════════════════ */

/* Smooth bounce-in */
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  40% { transform: scale(1.08); opacity: 1; }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}

/* Pulse glow */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px var(--brand-glow); }
  50% { box-shadow: 0 0 24px var(--brand-glow-strong), 0 0 48px var(--brand-glow); }
}

/* Subtle shake */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px) rotate(-1deg); }
  30% { transform: translateX(7px) rotate(1deg); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ═══════════════════════════════════════ */
/*       RESPONSIVE — Mobile First        */
/* ═══════════════════════════════════════ */

@media (max-width: 500px) {
  .lobby-hero-title { font-size: 2.8em !important; letter-spacing: 2px !important; }
  .lobby-hero-icon { font-size: 3.5em !important; }
  .lobby-hero::before { width: 200px; height: 200px; }
  .player-buttons { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  .player-btn { padding: 16px 6px 14px !important; }
  .player-btn .btn-emoji { font-size: 1.9em !important; }
  .auth-buttons-row { flex-direction: column !important; }
  .letter-slot { width: 36px !important; height: 46px !important; font-size: 1.6em !important; }
  .letter-slot.space { width: 18px !important; min-width: 18px !important; }
  .key-btn { width: 34px !important; height: 40px !important; font-size: 0.9em !important; }
  .score-item { font-size: 0.8em !important; padding: 5px 10px !important; }
  .hangman-svg { width: 150px !important; height: 170px !important; }
  .room-code-big { font-size: 2em !important; letter-spacing: 6px !important; }
  .stat-card { flex: 1 1 100px !important; }
  .turn-indicator { font-size: 1em !important; padding: 10px 20px !important; }
  .revealed-word { font-size: 1.6em !important; letter-spacing: 4px !important; }
  .bottom-bar { gap: 4px !important; padding: 8px 10px !important; }
  .bar-btn { padding: 6px 10px !important; font-size: 0.72em !important; }
  .reaction-btn { font-size: 1em !important; padding: 3px 4px !important; }
}

@media (min-width: 768px) {
  .lobby-hero-title { font-size: 4.5em !important; letter-spacing: 6px !important; }
  .lobby-hero-icon { font-size: 5.5em !important; }
  .lobby-hero::before { width: 400px; height: 400px; }
  .player-buttons { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; max-width: 560px !important; }
  .auth-buttons-row { max-width: 460px !important; }
  .letter-slot { width: 54px !important; height: 68px !important; font-size: 2.5em !important; }
  .key-btn { width: 50px !important; height: 56px !important; font-size: 1.15em !important; }
  .container { padding: 24px 20px !important; }
}

@media (min-width: 1024px) {
  .lobby-hero-title { font-size: 5em !important; }
  .container { max-width: 900px !important; }
}

/* ─── SELECTION HIGHLIGHT ─── */
::selection {
  background: rgba(139,92,246,0.3);
  color: #fff;
}
::-moz-selection {
  background: rgba(139,92,246,0.3);
  color: #fff;
}

/* ─── FOCUS VISIBLE ─── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── PRINT HIDDEN ─── */
@media print {
  .bottom-bar, .lobby-particles, .confetti-container, .reaction-container { display: none !important; }
}

/* ═══════════════════════════════════════ */
/*       LIVEKIT VOICE/VIDEO UI           */
/* ═══════════════════════════════════════ */

#livekit-container {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: rgba(8,4,26,0.85);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom-left-radius: 16px;
  border-left: 1px solid rgba(139,92,246,0.12);
  border-bottom: 1px solid rgba(139,92,246,0.12);
  max-width: 280px;
}
.lk-video-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.lk-video-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.6em;
  font-weight: 700;
  text-align: center;
  padding: 3px 6px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  color: #fff;
  letter-spacing: 0.3px;
}

/* LiveKit bar buttons in bottom bar */
.livekit-bar {
  display: flex;
  gap: 4px;
  align-items: center;
}
.lk-mic-btn, .lk-cam-btn {
  font-size: 1.1em !important;
  padding: 6px 10px !important;
  border-radius: 50% !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s var(--ease-spring) !important;
}
.lk-mic-btn:hover, .lk-cam-btn:hover {
  background: rgba(139,92,246,0.12) !important;
  border-color: rgba(139,92,246,0.4) !important;
  transform: scale(1.12) !important;
}

/* Reaction bar spacing */
.reaction-bar {
  display: flex;
  gap: 2px;
  align-items: center;
}