:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161f;
  --bg-hover: #1e1e2a;
  --border: rgba(255, 255, 255, 0.08);
  --border-active: rgba(124, 58, 237, 0.5);
  --text-primary: #f1f1f5;
  --text-secondary: #8b8b9e;
  --text-muted: #5a5a6e;
  --purple: #7c3aed;
  --purple-light: #9d5cf7;
  --blue: #3b82f6;
  --green: #10b981;
  --red: #ef4444;
  --orange: #f59e0b;
  --glow-purple: rgba(124, 58, 237, 0.4);
  --glow-blue: rgba(59, 130, 246, 0.3);
  --navbar-bg: rgba(10, 10, 15, 0.95);
}

html[data-theme="light"] {
  --bg-primary: #f5f6fa;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #ecedf5;
  --border: rgba(20, 20, 40, 0.08);
  --border-active: rgba(124, 58, 237, 0.5);
  --text-primary: #1a1a2e;
  --text-secondary: #515276;
  --text-muted: #8b8da3;
  --glow-purple: rgba(124, 58, 237, 0.18);
  --glow-blue: rgba(59, 130, 246, 0.18);
  --navbar-bg: rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] .navbar { background: var(--navbar-bg); }
html[data-theme="light"] body { background: var(--bg-primary); }

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

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

/* === APP LAYOUT === */
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex: 1;
  margin-top: 64px;
}

.page-content {
  flex: 1;
  padding: 32px;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 64px;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
}

.brand-name {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: 3px;
  background: linear-gradient(135deg, #fff 0%, var(--purple-light) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Scrollable horizontal tabs — all screen sizes */
.navbar-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
}
.navbar-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-tab.active {
  background: rgba(124, 58, 237, 0.15);
  color: var(--purple-light);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* On desktop, hide text labels when space is tight (show icons only) */
@media (max-width: 1100px) and (min-width: 769px) {
  .nav-tab span { display: none; }
  .nav-tab.nav-dropdown-toggle span { display: inline; } /* keep "Games" label */
  .nav-tab { padding: 8px 10px; font-size: 16px; }
}

/* Games dropdown — single tab that opens a categorized menu, replacing the long
   row of 11 game tabs that wrapped/scrolled awkwardly on small screens. */
.nav-dropdown { position: relative; flex-shrink: 0; }
.nav-dropdown-toggle {
  background: none; border: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.nav-dropdown-toggle .nav-chev {
  font-size: 10px; opacity: 0.7; margin-left: 2px;
  transition: transform 0.18s ease;
}
.nav-dropdown.open .nav-dropdown-toggle { background: var(--bg-hover); color: var(--text-primary); }
.nav-dropdown.open .nav-dropdown-toggle .nav-chev { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 460px;
  max-width: 92vw;
  background: var(--card-bg, #1a1a26);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  z-index: 1000;
}
.nav-dropdown.open .nav-dropdown-menu { display: grid; }

.nav-dropdown-section { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dropdown-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted); margin: 4px 6px;
}
.nav-dropdown-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  min-height: 44px; /* WCAG touch target */
}
.nav-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-dropdown-item.active {
  background: rgba(124, 58, 237, 0.15);
  color: var(--purple-light);
}
.nav-dropdown-item i { width: 18px; text-align: center; }

@media (max-width: 768px) {
  .nav-dropdown-menu {
    min-width: 280px;
    grid-template-columns: 1fr;
    left: 0;
  }
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.profile-group-heading {
  font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--text-muted);
  margin: 24px 0 8px 4px;
  display: flex; align-items: center; gap: 8px;
}
.profile-group-heading:first-of-type { margin-top: 8px; }


.user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--text-secondary);
}

.online-dot { color: var(--green); font-size: 8px; }

.btn-logout {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-logout:hover { background: rgba(239, 68, 68, 0.1); color: var(--red); border-color: rgba(239, 68, 68, 0.3); }

.btn-login {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border: none;
}

/* === LOGIN PAGE === */
.login-page-wrapper {
  position: fixed;
  inset: 0;
  background: #0a0a0f;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(120,40,200,0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 20%, rgba(0,180,255,0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.login-container {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 48px;
  width: 400px;
  backdrop-filter: blur(20px);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.login-logo .icon {
  font-size: 48px;
  color: var(--purple);
}

.login-logo h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  color: #fff;
  margin-top: 8px;
  letter-spacing: 4px;
}

.login-logo p {
  color: #666;
  font-size: 14px;
  margin-top: 4px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #aaa;
  font-size: 13px;
  margin-bottom: 8px;
}

.login-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 14px 16px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.login-input:focus {
  border-color: var(--purple);
}

.btn-login-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 12px;
  padding: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.btn-login-submit:hover { opacity: 0.9; }
.btn-login-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.error-msg {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px;
  padding: 12px;
  color: #ef4444;
  font-size: 13px;
  margin-bottom: 16px;
}

/* === HOME PAGE === */
.home-page { padding-bottom: 48px; }

.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 280px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-title { font-size: 48px; font-weight: 800; margin-bottom: 12px; line-height: 1.1; }

.gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--purple-light) 50%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle { color: var(--text-secondary); font-size: 18px; margin-bottom: 32px; }

.hero-stats { display: flex; gap: 24px; }

.stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 24px;
  text-align: center;
}

.stat-number { display: block; font-size: 32px; font-weight: 700; color: var(--purple-light); }
.stat-label { font-size: 13px; color: var(--text-muted); }

.hero-graphic { flex-shrink: 0; }

.floating-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 180px;
  opacity: 0.3;
  transform: rotate(15deg);
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: rotate(15deg) translateY(0); }
  50% { transform: rotate(15deg) translateY(-10px); }
}

.mini-cell {
  width: 54px;
  height: 54px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--purple-light);
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.game-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.game-card:not(.coming-soon):hover {
  border-color: var(--border-active);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
}

.game-card.coming-soon { opacity: 0.5; cursor: not-allowed; }

.game-card-icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--purple-light);
}

.game-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.game-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }

.game-card-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.game-tag {
  padding: 4px 10px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 20px;
  font-size: 12px;
  color: var(--purple-light);
}

.game-tag.coming {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  color: var(--orange);
}

.btn-play {
  margin-left: auto;
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-play:hover { opacity: 0.9; }

/* === GAME PAGE === */
.game-page { max-width: 800px; margin: 0 auto; }

.game-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.game-header h2 { font-size: 28px; font-weight: 700; }

.game-lobby { display: flex; flex-direction: column; gap: 24px; }

.lobby-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.lobby-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px;
  text-align: center;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lobby-card:hover { border-color: var(--border-active); }

.lobby-card i { font-size: 48px; color: var(--purple-light); margin-bottom: 16px; }
.lobby-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.lobby-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 20px; }

.online-players-list { margin-bottom: 16px; text-align: left; width: 100%; }

.online-player-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.online-player-row span { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.online-player-row span i { color: var(--green); font-size: 8px; }

.btn-invite {
  padding: 6px 14px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  color: var(--purple-light);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-invite:hover { background: var(--purple); color: #fff; }

.no-players { color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }

.waiting-rooms {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.waiting-rooms h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.waiting-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.btn-join {
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.status-message {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--green);
  text-align: center;
  font-size: 14px;
}

/* === GAME BOARD === */
.game-board-area { display: flex; flex-direction: column; align-items: center; gap: 24px; }

.game-info-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 32px;
  width: 100%;
  max-width: 500px;
  justify-content: center;
}

.player-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.3s;
}

.player-info.active {
  background: rgba(124, 58, 237, 0.15);
  color: var(--purple-light);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

.vs-divider {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
}

.tictactoe-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 360px;
}

.board-cell {
  width: 108px;
  height: 108px;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 48px;
  font-weight: 900;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.board-cell:not(.filled):hover {
  border-color: var(--border-active);
  background: rgba(124, 58, 237, 0.05);
}

.board-cell.winning {
  border-color: var(--green);
  background: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
  animation: pulse-win 1s ease-in-out infinite;
}

@keyframes pulse-win {
  0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.4); }
}

.cell-x {
  color: var(--purple-light);
  text-shadow: 0 0 20px var(--glow-purple);
  animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cell-o {
  color: var(--blue);
  text-shadow: 0 0 20px var(--glow-blue);
  animation: pop-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop-in {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.game-result {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 32px 48px;
  text-align: center;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.game-result.win { border-color: var(--green); background: rgba(16, 185, 129, 0.05); }
.game-result.lose { border-color: var(--red); background: rgba(239, 68, 68, 0.05); }
.game-result.draw { border-color: var(--orange); background: rgba(245, 158, 11, 0.05); }

.game-result i { font-size: 48px; margin-bottom: 12px; display: block; }
.game-result.win i { color: var(--green); }
.game-result.lose i { color: var(--red); }
.game-result.draw i { color: var(--orange); }
.game-result h3 { font-size: 28px; font-weight: 800; margin-bottom: 20px; }

.waiting-message {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.waiting-message i { font-size: 32px; color: var(--orange); }

.turn-indicator {
  font-size: 15px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 12px;
}

.your-turn {
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: pulse-text 1.5s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.waiting-turn { color: var(--text-muted); display: flex; align-items: center; gap: 8px; }

/* === CHAT SIDEBAR === */
.chat-sidebar {
  position: fixed;
  right: 0;
  top: 64px;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
}

/* When sound sidebar is open and chat is closed, float the chat tab
   at the left edge of the sound panel so the user can still open chat. */
.chat-sidebar.sound-open:not(.open) .chat-toggle { right: 280px; left: auto; }

.chat-toggle {
  position: absolute;
  left: -48px;
  top: 16px;
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.chat-toggle:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

.unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-panel {
  width: 300px;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-close-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 16px; padding: 4px 8px; border-radius: 6px; transition: all 0.2s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.online-count { color: var(--green); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.online-count i { font-size: 8px; }

.online-users-mini {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.online-user-chip {
  padding: 3px 10px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 20px;
  font-size: 11px;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 4px;
}

.online-user-chip i { font-size: 6px; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.chat-message {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 85%;
  align-self: flex-start;
}

.chat-message.own { align-self: flex-end; }

.msg-author { font-size: 11px; color: var(--text-muted); padding: 0 4px; }
.chat-message.own .msg-author { text-align: right; }

.msg-text {
  padding: 8px 12px;
  background: var(--bg-card);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
  border: 1px solid var(--border);
}

.chat-message.own .msg-text {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.3);
}

.msg-time { font-size: 10px; color: var(--text-muted); padding: 0 4px; }
.chat-message.own .msg-time { text-align: right; }

.chat-input-area {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.chat-input:focus { border-color: rgba(124, 58, 237, 0.5); }

.chat-send {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-disabled {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
}

.chat-disabled i { font-size: 32px; }

/* === INVITE TOAST === */
.invite-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid rgba(124, 58, 237, 0.4);
  border-radius: 16px;
  padding: 16px 20px;
  max-width: 320px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: slide-in-right 0.3s ease;
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.invite-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.invite-toast-content i { font-size: 24px; color: var(--purple-light); }
.invite-toast-content div { font-size: 14px; color: var(--text-secondary); }
.invite-toast-content strong { color: var(--text-primary); }

.invite-actions { display: flex; gap: 8px; }

.btn-accept {
  flex: 1;
  padding: 8px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.btn-decline {
  flex: 1;
  padding: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: var(--red);
  font-size: 13px;
  cursor: pointer;
}

/* === ADMIN PAGE === */
/* On large screens the admin tables + reports need the full viewport; on smaller
 * laptops we cap it to keep forms readable. Mobile is handled by the .is-mobile
 * overrides further down. */
.admin-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1600px) {
  .admin-page { max-width: 1600px; }
}

.admin-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.admin-header h2 { font-size: 28px; font-weight: 700; flex: 1; }

.role-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.role-badge.master { background: rgba(245, 158, 11, 0.15); color: var(--orange); border: 1px solid rgba(245, 158, 11, 0.3); }
.role-badge.reseller { background: rgba(59, 130, 246, 0.15); color: var(--blue); border: 1px solid rgba(59, 130, 246, 0.3); }

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-widget {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.stat-widget i { font-size: 24px; color: var(--purple-light); }
.stat-widget i.online { color: var(--green); }
.stat-val { font-size: 36px; font-weight: 800; }
.stat-lbl { font-size: 13px; color: var(--text-secondary); }

.admin-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}

.admin-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

.settings-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
}

.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 26px;
  cursor: pointer;
  transition: 0.3s;
}
.slider::before {
  content: '';
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .slider { background: rgba(124, 58, 237, 0.3); border-color: var(--purple); }
input:checked + .slider::before { transform: translateX(22px); background: var(--purple-light); }

.create-user-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-input {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
}

.form-input:focus { border-color: rgba(124, 58, 237, 0.5); }

.form-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  cursor: pointer;
  width: 100%;
}

.btn-primary {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  padding: 10px 20px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 10px;
  color: var(--purple-light);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover { background: rgba(124, 58, 237, 0.25); }

.form-message {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
}

.form-message.success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--green); }
.form-message.error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: var(--red); }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-header h3 { margin-bottom: 0; }

.users-table { display: flex; flex-direction: column; gap: 0; }

.table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  align-items: center;
  transition: background 0.2s;
}

.table-row:hover { background: rgba(255, 255, 255, 0.02); }

.role-chip {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

.role-chip.masteradmin { background: rgba(245, 158, 11, 0.15); color: var(--orange); }
.role-chip.reseller { background: rgba(59, 130, 246, 0.15); color: var(--blue); }
.role-chip.user { background: rgba(124, 58, 237, 0.15); color: var(--purple-light); }

.status-online { color: var(--green); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.status-online i { font-size: 8px; }
.status-offline { color: var(--text-muted); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.status-offline i { font-size: 8px; }

.btn-danger-sm {
  width: 32px;
  height: 32px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  color: var(--red);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-danger-sm:hover { background: rgba(239, 68, 68, 0.2); }

/* === LOADING === */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px;
  color: var(--text-secondary);
}

.loading-spinner i { font-size: 36px; color: var(--purple); }

/* === MISC === */
#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--red);
  color: #fff;
  padding: 12px 24px;
  z-index: 1000;
  text-align: center;
}

.not-found {
  color: var(--text-secondary);
  text-align: center;
  padding: 80px;
  font-size: 18px;
}

/* Scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* === CHESS === */
.chess-game-area { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.chess-board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  user-select: none;
}

.chess-coords-left {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: -20px;
  top: 0;
  height: 100%;
  justify-content: space-around;
}

.chess-board-wrapper { position: relative; }

.chess-coords-left span, .chess-coords-bottom span {
  font-size: 11px;
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}

.chess-coords-bottom {
  display: flex;
  gap: 0;
  margin-left: 20px;
}

.chess-coords-bottom span { width: 60px; text-align: center; }

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  grid-template-rows: repeat(8, 60px);
  border: 2px solid rgba(124, 58, 237, 0.4);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(124, 58, 237, 0.2);
  margin-left: 20px;
}

.chess-cell {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.chess-cell.light { background: #f0d9b5; }
.chess-cell.dark { background: #b58863; }
.chess-cell.selected { background: rgba(124, 58, 237, 0.6) !important; }
.chess-cell.last-move { background: rgba(255, 215, 0, 0.4) !important; }
.chess-cell.legal-target.light { background: rgba(100, 200, 100, 0.4); }
.chess-cell.legal-target.dark { background: rgba(100, 200, 100, 0.5); }

.legal-dot {
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.capture-ring {
  position: absolute;
  inset: 2px;
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  pointer-events: none;
}

.chess-piece {
  font-size: 44px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.1s;
}

.chess-piece.white-piece { color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.chess-piece.black-piece { color: #1a1a1a; filter: drop-shadow(0 1px 2px rgba(255,255,255,0.2)); }

.chess-message {
  padding: 10px 24px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--purple-light);
}

.chess-message.check-msg {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--red);
  animation: pulse-text 1s ease-in-out 3;
}

/* === BATTLESHIP === */
.bs-placement-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px;
  margin: 0 auto;
}

.placement-header h3 { font-size: 20px; font-weight: 700; }
.placement-header p { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

.bs-ships-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.bs-ship-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  color: var(--text-secondary);
}

.bs-ship-selector:hover { border-color: var(--purple); color: var(--purple-light); }
.bs-ship-selector.selected { border-color: var(--purple); background: rgba(124, 58, 237, 0.15); color: var(--purple-light); }
.bs-ship-selector.placed { opacity: 0.5; cursor: default; }

.ship-cells { display: flex; gap: 2px; }
.ship-cell-preview {
  width: 14px;
  height: 14px;
  background: var(--blue);
  border-radius: 2px;
}

.placement-actions { display: flex; gap: 8px; margin-left: auto; }

.bs-grid-labels-top {
  display: flex;
  margin-left: 28px;
  margin-bottom: 2px;
}
.bs-grid-labels-top span { width: 36px; text-align: center; font-size: 11px; color: var(--text-muted); }

.bs-grid-wrapper { display: flex; }
.bs-grid-labels-left { display: flex; flex-direction: column; width: 24px; }
.bs-grid-labels-left span { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-muted); }

.bs-grid {
  display: grid;
  grid-template-columns: repeat(10, 36px);
  grid-template-rows: repeat(10, 36px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 4px;
  overflow: hidden;
}

.bs-cell {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(59, 130, 246, 0.05);
  transition: all 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bs-cell.placement:hover { background: rgba(59, 130, 246, 0.15); cursor: pointer; }
.bs-cell.ship { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.4); }
.bs-cell.hover-valid { background: rgba(16, 185, 129, 0.3); cursor: pointer; }
.bs-cell.hover-invalid { background: rgba(239, 68, 68, 0.3); cursor: not-allowed; }
.bs-cell.hit { background: rgba(239, 68, 68, 0.5); border-color: rgba(239,68,68,0.6); }
.bs-cell.miss { background: rgba(255, 255, 255, 0.05); }
.bs-cell.targetable:hover { background: rgba(239, 68, 68, 0.2); cursor: crosshair; }
.bs-cell.enemy-cell { background: rgba(59, 130, 246, 0.03); }
.bs-ship-icon { font-size: 16px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.bs-hit-icon { font-size: 16px; line-height: 1; }
.bs-miss-icon { font-size: 18px; color: var(--text-muted); font-weight: 700; }
.bs-score-bar {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-size: 0.8em; margin-bottom: 6px; padding: 6px 12px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
}

.bs-battle-area { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.bs-boards-row {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.bs-board-section h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; text-align: center; color: var(--text-secondary); }

.bs-battle-message {
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hit-msg { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--red); }
.miss-msg { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text-secondary); }

/* === MOBILE RESPONSIVE === */
@media (max-width: 768px) {
  .page-content { padding: 16px; }

  .navbar { padding: 0 8px; gap: 6px; height: 50px; }
  .brand-name { display: none; }
  .nav-tab { padding: 6px 8px; font-size: 15px; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
  .nav-tab span { display: none; }
  .nav-tab.nav-dropdown-toggle span { display: inline; } /* keep "Games" label */
  .lang-switcher { gap: 2px; }
  .lang-btn { padding: 0 8px; font-size: 18px; border: none; min-height: 44px; min-width: 44px; }
  .navbar-actions { gap: 6px; margin-left: auto; }
  .user-badge { font-size: 12px; padding: 4px 8px; min-height: 44px; }
  .user-badge span:not(.online-dot) { display: none; }
  .btn-logout { padding: 6px 10px; font-size: 13px; min-height: 44px; min-width: 44px; }
  .main-wrapper { margin-top: 50px; }

  /* Form controls — meet WCAG 2.5.5 minimum 44×44 hit target on phones. */
  .form-input, .login-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
    min-height: 44px;
  }
  .btn-primary, .btn-secondary, .btn-login, .btn-login-submit, .btn-danger-sm, .btn-play, button.theme-pick, button.avatar-pick {
    min-height: 44px;
  }
  /* Lotería tabla cells & avatar picker tiles often used emoji-only — give them a real tap target. */
  .avatar-pick { min-width: 44px; }

  .hero-section { flex-direction: column; padding: 24px; min-height: auto; gap: 24px; }
  .hero-title { font-size: 28px; }
  .hero-subtitle { font-size: 15px; }
  .hero-graphic { display: none; }
  .hero-stats { gap: 12px; }
  .stat-card { padding: 12px 16px; }
  .stat-number { font-size: 24px; }

  .games-grid { grid-template-columns: 1fr; }

  .tictactoe-board { width: 300px; }
  .board-cell { width: 90px; height: 90px; font-size: 40px; }

  .chess-board { grid-template-columns: repeat(8, 42px); grid-template-rows: repeat(8, 42px); }
  .chess-cell { width: 42px; height: 42px; }
  .chess-piece { font-size: 32px; }
  .chess-coords-bottom span { width: 42px; }

  .lobby-options { grid-template-columns: 1fr; }

  .bs-grid { grid-template-columns: repeat(10, 30px); grid-template-rows: repeat(10, 30px); }
  .bs-cell { width: 30px; height: 30px; }
  .bs-grid-labels-top span { width: 30px; font-size: 10px; }
  .bs-grid-labels-left span { height: 30px; font-size: 10px; }
  .bs-boards-row { flex-direction: column; gap: 24px; }

  .chat-panel { width: 100vw; }
  .chat-sidebar.open .chat-toggle { display: none; }

  .admin-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .stat-widget { padding: 12px; }
  .stat-val { font-size: 24px; }
  .create-user-form { grid-template-columns: 1fr; }
  .table-header { display: none; }
  .table-row { grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }

  .game-info-bar { flex-direction: column; gap: 8px; padding: 12px; }

  /* Quiz mobile */
  .quiz-question-text { font-size: 22px !important; }
  .quiz-answers-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .quiz-answer-btn { min-height: 80px !important; font-size: 15px !important; }
  .quiz-podium { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  /* Chess: bump cells closer to the 44px WCAG touch target; drop the side coord rail's
     margin so the 8×40px board (320px) stays centered on a 360px viewport. */
  .chess-board {
    grid-template-columns: repeat(8, 40px);
    grid-template-rows: repeat(8, 40px);
    margin-left: 0;
  }
  .chess-cell { width: 40px; height: 40px; }
  .chess-piece { font-size: 28px; }
  .chess-coords-bottom { margin-left: 0; }
  .chess-coords-bottom span { width: 40px; }
  .tictactoe-board { width: 270px; }
  .board-cell { width: 80px; height: 80px; font-size: 36px; }
  /* Battleship: 32px cells (was 26px) give a 320px grid that fits 360px phones and is
     close to the WCAG 44px touch target without forcing horizontal scroll. */
  .bs-grid { grid-template-columns: repeat(10, 32px); grid-template-rows: repeat(10, 32px); }
  .bs-cell { width: 32px; height: 32px; }
  .bs-grid-labels-top span { width: 32px; }
  .bs-grid-labels-left span { height: 32px; }
}

/* Landscape phones (e.g. 740×360): the default 768px breakpoint keeps boards full-size,
   but vertical space is exhausted, hiding turn indicators and chat. Reflow paddings/nav
   so the game area stays usable without changing the desktop layout. */
@media (orientation: landscape) and (max-height: 480px) {
  .navbar { height: 44px; }
  .main-wrapper { margin-top: 44px; }
  .page-content { padding: 8px 12px; }
  .game-header { margin-bottom: 8px; }
  .game-header h2 { font-size: 18px; }
  .bs-boards-row { flex-direction: row !important; gap: 12px; }
  .turn-indicator, .turn-timer { font-size: 13px; padding: 4px 10px; }
  .quiz-room { padding: 8px; min-height: calc(100vh - 44px); }
  .quiz-question-text { font-size: 18px !important; }
  .quiz-answer-btn { min-height: 56px !important; font-size: 14px !important; }
}

/* iPad portrait (and similarly proportioned tablets): the existing 768px breakpoint
   doesn't fire on iPads in portrait (810px), but the right-rail chat/sound sidebars
   still steal width from game boards. Collapse them to overlays only when actually
   opened, keep the navbar wide. */
@media (max-width: 1024px) and (orientation: portrait) {
  .chat-sidebar:not(.open) .chat-panel,
  .sound-sidebar:not(.open) .sound-panel { display: none; }
  .games-grid { grid-template-columns: repeat(2, 1fr); }
  .drawing-main { grid-template-columns: 1fr; }
  .bs-boards-row { gap: 18px; }
}

/* Touch-device hover suppression: iOS Safari emulates hover after a tap, leaving cells
   "stuck" highlighted. Move hover-only feedback inside @media (hover: hover) so touch
   devices use only the explicit selected/targetable classes. */
@media (hover: none) {
  .board-cell:not(.filled):hover { background: var(--bg-card); }
  .bs-cell.placement:hover { background: rgba(59, 130, 246, 0.05); cursor: pointer; }
  .bs-cell.targetable:hover { background: rgba(59, 130, 246, 0.03); }
  .chat-toggle:hover, .sound-toggle:hover { background: transparent; color: inherit; border-color: var(--border); }
  /* Provide an explicit pressed-state instead. */
  .chat-toggle:active, .sound-toggle:active { background: var(--purple); color: #fff; }
}

/* === QUIZ / GENERAL KNOWLEDGE === */
.quiz-lobby-page { max-width: 800px; margin: 0 auto; }
.quiz-lobby-header { margin-bottom: 24px; }
.quiz-lobby-header h2 { font-size: 28px; font-weight: 700; }

.quiz-room {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

/* Background themes */
.bg-galaxy { background: radial-gradient(ellipse at center, #1a0533 0%, #0a0015 100%); }
.bg-ocean { background: linear-gradient(135deg, #001e3c 0%, #003d7a 50%, #006994 100%); }
.bg-forest { background: linear-gradient(135deg, #0a1a0a 0%, #1a3a1a 50%, #0d2b0d 100%); }
.bg-fire { background: linear-gradient(135deg, #1a0000 0%, #3d0000 50%, #7a1500 100%); }
.bg-neon { background: linear-gradient(135deg, #000020 0%, #0a0030 50%, #000020 100%); }

.quiz-waiting-room {
  width: 100%;
  max-width: 700px;
  text-align: center;
}

.quiz-room-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 30px rgba(124, 58, 237, 0.8);
  margin-bottom: 8px;
}

.quiz-room-code {
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  margin-bottom: 32px;
}

.quiz-players-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 32px;
}

.quiz-player-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 30px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.quiz-player-avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.quiz-host-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.quiz-upload-section { display: flex; align-items: center; gap: 12px; }

.quiz-csv-hint {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.6;
}

.quiz-create-form { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); }

/* Question screen */
.quiz-question-screen {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.quiz-progress {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
}

.quiz-timer-bar {
  width: 100%;
  max-width: 600px;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}

.quiz-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--orange), var(--red));
  animation: timer-countdown linear forwards;
  width: 100%;
}

@keyframes timer-countdown {
  from { width: 100%; }
  to { width: 0%; }
}

.quiz-question-text {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  line-height: 1.3;
  padding: 24px 32px;
  background: rgba(0,0,0,0.4);
  border-radius: 20px;
  width: 100%;
  max-width: 800px;
}

.quiz-answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 800px;
}

.tf-grid { grid-template-columns: 1fr 1fr; max-width: 500px; }

.quiz-answer-btn {
  min-height: 100px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: all 0.2s;
  padding: 16px 24px;
  position: relative;
  overflow: hidden;
}

.quiz-answer-btn:hover:not(:disabled) { transform: scale(1.03); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.quiz-answer-btn:disabled { cursor: default; }
.quiz-answer-btn.faded { opacity: 0.4; }
.quiz-answer-btn.chosen { outline: 4px solid #fff; outline-offset: 2px; }

.quiz-red { background: #e21b3c; }
.quiz-blue { background: #1368ce; }
.quiz-yellow { background: #d89e00; }
.quiz-green { background: #26890c; }

.quiz-answer-btn i { font-size: 22px; }

.quiz-answer-feedback {
  padding: 12px 32px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  animation: pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.correct-feedback { background: rgba(38, 137, 12, 0.3); border: 2px solid #26890c; color: #7fff6b; }
.wrong-feedback { background: rgba(226, 27, 60, 0.3); border: 2px solid #e21b3c; color: #ff8fa0; }

.quiz-next-btn { margin-top: 8px; }
.quiz-all-answered {
  margin-top: 8px;
  color: #4ade80;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.quiz-pending-hint {
  margin-top: 6px;
  color: #facc15;
  font-size: 13px;
  opacity: 0.85;
}

/* Results screen */
.quiz-results-screen {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.quiz-results-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}

.quiz-correct-answer {
  padding: 12px 24px;
  background: rgba(38, 137, 12, 0.2);
  border: 1px solid #26890c;
  border-radius: 12px;
  color: #7fff6b;
  font-size: 16px;
}

.quiz-round-scores {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quiz-score-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
}

.correct-row { background: rgba(38, 137, 12, 0.2); color: #7fff6b; }
.wrong-row { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); }

/* Podium */
.quiz-podium-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px 12px;
  box-sizing: border-box;
}

.quiz-podium-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
  color: #ffd700;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  text-align: center;
  margin: 0;
}

.quiz-podium {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: center;
  width: 100%;
  max-width: 520px;
}

.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 160px;
}

.podium-crown {
  font-size: 28px; color: #ffd700;
  animation: float 2s ease-in-out infinite;
}

.podium-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff;
  border: 3px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.podium-avatar.winner {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, #ffd700, #ff9500);
  border-color: #ffd700;
  font-size: 28px;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

.podium-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 0 4px;
}

.podium-score {
  color: #ffd700;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.podium-block {
  width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  font-size: 26px;
  font-weight: 900;
  color: rgba(255,255,255,0.5);
  box-sizing: border-box;
}

.p1 .podium-block { background: linear-gradient(180deg, rgba(255,215,0,0.35), rgba(255,215,0,0.08)); border-color: rgba(255,215,0,0.5); color: #ffd700; }
.p2 .podium-block { background: linear-gradient(180deg, rgba(192,192,192,0.35), rgba(192,192,192,0.08)); border-color: rgba(192,192,192,0.5); color: #e8e8e8; }
.p3 .podium-block { background: linear-gradient(180deg, rgba(205,127,50,0.35), rgba(205,127,50,0.08)); border-color: rgba(205,127,50,0.5); color: #e9a060; }

/* Standings table — appears below the podium */
.standings-table {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.standings-header {
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 12px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.standings-row {
  display: grid;
  grid-template-columns: 48px 1fr 80px;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  align-items: center;
  min-height: 40px;
}

.standings-row.me {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.55);
}

.standings-row.r1 { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.12); }
.standings-row.r2 { border-color: rgba(192,192,192,0.45); background: rgba(192,192,192,0.08); }
.standings-row.r3 { border-color: rgba(205,127,50,0.45); background: rgba(205,127,50,0.08); }

.standings-rank {
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,0.75);
  text-align: center;
}
.standings-row.r1 .standings-rank { color: #ffd700; }
.standings-row.r2 .standings-rank { color: #e8e8e8; }
.standings-row.r3 .standings-rank { color: #e9a060; }

.standings-name {
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standings-name .me-tag { color: rgba(255,255,255,0.55); font-size: 11px; margin-left: 6px; font-weight: 500; }

.standings-score {
  font-weight: 700;
  color: #ffd700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile tweaks for podium + standings */
@media (max-width: 480px) {
  .quiz-podium { gap: 6px; }
  .podium-avatar { width: 44px; height: 44px; font-size: 18px; border-width: 2px; }
  .podium-avatar.winner { width: 54px; height: 54px; font-size: 22px; }
  .podium-crown { font-size: 22px; }
  .podium-name { font-size: 12px; }
  .podium-score { font-size: 11px; }
  .podium-block { font-size: 20px; padding-top: 6px; }
  .podium-place { gap: 4px; }
  .standings-header, .standings-row { grid-template-columns: 36px 1fr 64px; gap: 8px; padding: 8px 10px; }
  .standings-rank { font-size: 14px; }
  .standings-name { font-size: 13px; }
}

/* Chat sidebar P2P updates */
.chat-user-list { flex: 1; overflow-y: auto; }
.chat-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--border);
}
.chat-user-row:hover { background: var(--bg-hover); }
.chat-user-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0;
}
.chat-user-name { flex: 1; font-size: 14px; font-weight: 500; }
.chat-user-status { font-size: 8px; color: var(--green); }
.chat-user-status.online { color: var(--green); }
.chat-unread-chip {
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.chat-back-btn {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 16px; padding: 4px 8px;
  transition: color 0.2s;
}
.chat-back-btn:hover { color: var(--text-primary); }
.chat-peer-name { flex: 1; font-size: 14px; font-weight: 600; }
.chat-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 48px 16px; color: var(--text-muted);
}
.chat-empty i { font-size: 32px; }

/* Login hint */
.login-hint { text-align: center; color: var(--text-muted); font-size: 12px; margin-top: 16px; }

.turn-timer {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 10px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  font-weight: 700;
  font-size: 14px;
  min-width: 40px;
  text-align: center;
}
.turn-timer.urgent {
  background: rgba(239,68,68,0.3);
  color: var(--red);
  animation: pulse-text 0.5s ease-in-out infinite;
}
.btn-remove-ship {
  background: rgba(239,68,68,0.2);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  color: var(--red);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 11px;
  margin-left: 4px;
}
.btn-remove-ship:hover { background: rgba(239,68,68,0.4); }

/* ===== MEMORY GAME ===== */
.memory-scores { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.memory-score-chip { padding: 8px 16px; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 20px; font-size: 14px; transition: all .2s; }
.memory-score-chip.active { border-color: var(--purple); background: rgba(124,58,237,.15); color: var(--purple); }
.memory-pairs-left { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.memory-turn { text-align: center; margin-bottom: 12px; color: var(--text-secondary); font-size: 15px; }
.memory-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 640px; margin: 0 auto; }
.memory-card { aspect-ratio: 1; perspective: 900px; cursor: default; }
.memory-card.clickable { cursor: pointer; }
.card-inner {
    position: relative; width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.memory-card.flipped .card-inner { transform: rotateY(180deg); }

.card-back, .card-front {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.2);
    overflow: hidden;
}

/* ── Card back: layered gradient + diagonal weave + logo ── */
.card-back {
    color: rgba(255,255,255,.85);
    background:
        radial-gradient(circle at 30% 22%, rgba(255,255,255,.18), transparent 45%),
        radial-gradient(circle at 80% 80%, rgba(0,0,0,.22), transparent 50%),
        linear-gradient(135deg, #7c3aed 0%, #5b21b6 45%, #1e40af 100%);
    border: 1px solid rgba(255,255,255,.14);
}
.card-back::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient( 45deg, transparent 0 10px, rgba(255,255,255,.05) 10px 11px),
        repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,255,.05) 10px 11px);
    pointer-events: none;
}
.card-back i {
    font-size: clamp(28px, 5vw, 44px);
    opacity: .85;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
    z-index: 1;
}

/* ── Card front: clean light face that makes the emoji pop ── */
.card-front {
    background: linear-gradient(180deg, #fafafa 0%, #e4e4e7 100%);
    border: 1px solid rgba(0,0,0,.08);
    transform: rotateY(180deg);
    /* Emojis render best with the native system emoji fonts. */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-size: clamp(38px, 7vw, 64px);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* Matched state: soft green wash + glow */
.memory-card.matched .card-front {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border-color: rgba(34,197,94,.6);
    box-shadow: 0 0 18px rgba(34,197,94,.35), 0 2px 6px rgba(0,0,0,.15);
}

/* Hover lift — only on devices that actually hover. Without this guard iOS Safari emulates
   :hover after a tap and leaves the card visually "stuck" until the next interaction. */
@media (hover: hover) {
    .memory-card.clickable:hover { transform: translateY(-2px); }
    .memory-card.clickable:hover .card-back {
        box-shadow: 0 10px 24px rgba(124,58,237,.45), 0 2px 6px rgba(0,0,0,.3);
        border-color: rgba(255,255,255,.35);
    }
    .memory-card.clickable:hover .card-back::before { opacity: .8; }
}
/* Tactile feedback for touch devices: press-state lift while the finger is down. */
@media (hover: none) {
    .memory-card.clickable:active { transform: translateY(-3px); }
}

@media (max-width: 480px) {
    .memory-grid { gap: 10px; max-width: 100%; }
    .card-front { font-size: clamp(28px, 9vw, 42px); }
}
.memory-result { text-align: center; padding: 24px; background: var(--bg-secondary); border-radius: 16px; border: 1px solid var(--border); margin-bottom: 20px; }
.result-win { font-size: 24px; color: #ffd700; font-weight: 700; }
.result-win span, .result-loss span, .result-draw span { display: block; font-size: 16px; color: var(--text-secondary); margin-top: 4px; }
.result-loss { font-size: 24px; color: var(--text-muted); font-weight: 700; }
.result-draw { font-size: 24px; color: var(--blue); font-weight: 700; }

/* ===== LEADERBOARD ===== */
.leaderboard-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-btn { padding: 6px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all .2s; }
.filter-btn.active { background: var(--purple); border-color: var(--purple); color: white; }
.filter-btn:hover:not(.active) { border-color: var(--purple); color: var(--purple); }
.leaderboard-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lb-header { display: grid; grid-template-columns: 50px 1fr 130px 100px 60px 60px 60px; gap: 0; padding: 12px 16px; background: var(--bg-tertiary); font-size: 12px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; letter-spacing: .5px; }
.lb-row { display: grid; grid-template-columns: 50px 1fr 130px 100px 60px 60px 60px; gap: 0; padding: 14px 16px; border-top: 1px solid var(--border); transition: background .2s; font-size: 14px; }
.lb-row:hover { background: var(--bg-hover); }
.lb-row.gold { background: rgba(255,215,0,.06); }
.lb-row.silver { background: rgba(192,192,192,.06); }
.lb-row.bronze { background: rgba(205,127,50,.06); }
.lb-rank { font-weight: 700; color: var(--text-muted); }
.lb-row.gold .lb-rank { color: #ffd700; }
.lb-row.silver .lb-rank { color: #c0c0c0; }
.lb-row.bronze .lb-rank { color: #cd7f32; }
.lb-name { font-weight: 600; }
.lb-points { font-weight: 700; color: var(--purple); }
.lb-wins { color: var(--green); }
.lb-losses { color: var(--red, #ef4444); }
.lb-draws { color: var(--text-muted); }

/* ===== SETUP OPTIONS ===== */
.setup-options { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-mode { padding: 10px 24px; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 8px; color: var(--text-secondary); cursor: pointer; font-size: 14px; transition: all .2s; }
.btn-mode.active { border-color: var(--purple); color: var(--purple); background: rgba(124,58,237,.1); }
.btn-mode:hover:not(.active) { border-color: var(--text-muted); }

/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher { display: flex; gap: 4px; align-items: center; }
.lang-btn { padding: 4px 8px; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); font-size: 12px; cursor: pointer; transition: all .2s; white-space: nowrap; }
.lang-btn.active { background: rgba(124,58,237,.2); border-color: var(--purple); color: var(--purple); }
.lang-btn:hover:not(.active) { border-color: var(--text-muted); color: var(--text-secondary); }
@media (max-width: 768px) {
  .lang-switcher { gap: 2px; }
  .lang-btn { padding: 2px 4px; font-size: 14px; border: none; }
  .lang-btn.active { background: rgba(124,58,237,.25); border: none; }
}

/* ===== QUIZ TEMPLATES ===== */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 300px; overflow-y: auto; }
.template-card { padding: 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .2s; }
.template-card:hover { border-color: var(--purple); background: rgba(124,58,237,.1); transform: translateY(-2px); }
.template-name { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.template-meta { font-size: 12px; color: var(--text-muted); }

/* ===== QUIZ TEMPLATE SOURCE BADGE ===== */
.template-source-badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.badge-kgame { background: rgba(124,58,237,.2); color: var(--purple); border: 1px solid rgba(124,58,237,.3); }
.badge-user { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }

/* ===== QUIZ TEMPLATE MEDIA BADGE (YouTube) ===== */
.template-card-media { border-color: rgba(239,68,68,.4); background: linear-gradient(180deg, rgba(239,68,68,.06), rgba(239,68,68,.02)); }
.template-card-media:hover { border-color: rgba(239,68,68,.8); background: linear-gradient(180deg, rgba(239,68,68,.12), rgba(239,68,68,.04)); }
.template-media-badge {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 6px; margin-right: 6px; padding: 3px 10px;
    border-radius: 20px; font-size: 11px; font-weight: 700;
    background: rgba(239,68,68,.18); color: #ef4444;
    border: 1px solid rgba(239,68,68,.4);
    letter-spacing: .3px;
}
.template-media-badge i { font-size: 13px; }

/* ===== QUIZ MEDIA PLAYER (YouTube embed) ===== */
.quiz-media-wrapper { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; }
.quiz-media-iframe { width: 100%; max-width: 480px; height: 270px; border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.quiz-media-frame { position: relative; width: 100%; max-width: 480px; }
.quiz-media-frame > iframe,
.quiz-media-frame > #yt-player-quiz { width: 100%; height: 270px; border: none; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.4); display: block; }
/* Opaque cover — visible whenever the YT player is NOT actively playing (pause,
   seek, restart, buffering). Masks the title/thumbnail flash that YouTube renders
   on top of the clip in those states. Sits below the blocker so clicks still hit
   the blocker; the cover itself is inert. */
/* No transition on show — a fade-in lets YouTube's title flash bleed through
   during the 120ms the cover is semi-transparent. Snap in/out instantly. */
.quiz-media-cover { position: absolute; inset: 0; border-radius: 12px; background: #000; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 48px; z-index: 1; pointer-events: none; }
.quiz-media-cover.hidden { opacity: 0; }
/* Transparent overlay — eats hover/click/right-click so YouTube's tooltip and
   context menu never appear (which would leak the song/answer). */
.quiz-media-blocker { position: absolute; inset: 0; border-radius: 12px; background: transparent; cursor: default; z-index: 2; }
.quiz-media-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.quiz-media-btn { padding: 6px 14px; font-size: 13px; min-width: 60px; }
.quiz-photo-img { max-width: 300px; max-height: 300px; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.5); border: 3px solid rgba(255,255,255,.1); object-fit: cover; }
@media (max-width: 600px) {
    .quiz-media-iframe { height: 200px; }
    .quiz-media-frame > iframe,
    .quiz-media-frame > #yt-player-quiz { height: 200px; }
}

/* ===== GEOGUESSER GAME ===== */
.geo-lobby-page { max-width: 800px; margin: 0 auto; }
/* Inline-scroll layout: the round page is a normal scrollable block. Photo on top,
 * map below — user scrolls up for the photo, down to focus on the map. */
.geo-room { min-height: 80vh; display: block; }

/* Round screen */
.geo-round-screen { display: block; position: relative; padding-bottom: 24px; }
.geo-round-header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.geo-clue-area { position: relative; margin: 0 12px; }
.geo-clue-container {
    width: 100%;
    /* Use viewport-relative height that's tall enough to show detail but short enough
     * that the map is visible when the user scrolls a little. */
    height: 60vh; min-height: 300px;
    background: var(--bg-secondary); border-radius: 12px; overflow: hidden;
    position: relative; display: flex; align-items: center; justify-content: center;
}
.geo-clue-img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.3s; user-select: none; -webkit-user-drag: none; }

/* Guess map — inline block below the photo, full width. No longer a floating overlay. */
.geo-guess-map-wrapper {
    margin: 16px 12px 0;
    height: 65vh; min-height: 340px;
    border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
    background: var(--bg-secondary);
    display: flex; flex-direction: column;
}
.geo-guess-map-inner { flex: 1; width: 100%; }

/* Search bar docked inside the map overlay, above the Leaflet canvas. */
.geo-map-search {
    display: flex; gap: 6px; padding: 6px 8px;
    background: rgba(10, 10, 15, 0.82);
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.geo-map-search-input {
    flex: 1; min-width: 0;
    padding: 6px 10px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05);
    color: #fff; font-size: 13px; outline: none;
}
.geo-map-search-input:focus { border-color: var(--purple); background: rgba(255,255,255,.08); }
.geo-map-search-input::placeholder { color: rgba(255,255,255,.45); }
.geo-map-search-btn {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 6px; cursor: pointer;
    background: var(--purple); color: #fff; border: none; font-size: 13px;
}
.geo-map-search-btn:hover:not(:disabled) { filter: brightness(1.1); }
.geo-map-search-btn:disabled { opacity: 0.6; cursor: wait; }
.geo-map-search-status {
    padding: 4px 10px; font-size: 11px;
    color: rgba(255,255,255,.75); background: rgba(10,10,15,.75);
    border-bottom: 1px solid rgba(255,255,255,.08);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-map-search-status.err { color: #fca5a5; }

/* Mobile: photo a bit shorter so players can still swipe to the map quickly.
 * Use `dvh` (dynamic viewport height) so iOS Safari's collapsing URL bar doesn't
 * trigger layout jumps mid-round; fall back to `vh` for browsers without dvh. */
@media (max-width: 600px) {
    .geo-clue-container { height: 48vh; height: 48dvh; min-height: 240px; }
    .geo-guess-map-wrapper { height: 55vh; height: 55dvh; min-height: 300px; }
    /* `manipulation` removes the 300ms tap delay and double-tap-zoom without
     * killing pinch-zoom for accessibility (we keep the standard viewport meta). */
    .geo-round-screen { touch-action: manipulation; }
    /* Don't let map drags scroll the page underneath. */
    .geo-guess-map-wrapper, .geo-clue-container { overscroll-behavior: contain; }
    /* Long nicknames used to push points off-screen; clip with ellipsis. */
    .geo-player-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
body.is-mobile .geo-clue-container { height: 48vh; height: 48dvh; min-height: 240px; }
body.is-mobile .geo-guess-map-wrapper { height: 55vh; height: 55dvh; min-height: 300px; }
body.is-mobile .geo-round-screen { touch-action: manipulation; }
body.is-mobile .geo-player-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Confirm button & footer */
.geo-round-footer { padding: 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.geo-confirm-btn { font-size: 1.1rem; padding: 12px 32px; }
.geo-guess-feedback { font-size: 1.1rem; padding: 10px 20px; background: rgba(0,0,0,.3); border-radius: 8px; }
.geo-auto-advance { text-align: center; padding: 8px; color: rgba(255,255,255,.6); font-size: 0.9rem; }

/* Results screen */
.geo-results-screen { max-width: 900px; margin: 0 auto; width: 100%; padding: 16px; }
.geo-result-location-name { font-size: 1.3rem; font-weight: 600; padding: 8px 16px; text-align: center; }
.geo-results-map-area { height: 350px; border-radius: 12px; overflow: hidden; margin: 12px 0; }
.geo-results-map-inner { width: 100%; height: 100%; }

/* Scores table */
.geo-scores-table { display: flex; flex-direction: column; gap: 6px; }
.geo-distance-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px;
    background: rgba(255,255,255,.05); border-radius: 8px;
}
.geo-player-name { flex: 1; font-weight: 500; }
.geo-dist { color: rgba(255,255,255,.6); min-width: 80px; text-align: right; }
.geo-pts { font-weight: 700; min-width: 80px; text-align: right; }
.geo-pts.pts-great { color: #22c55e; }
.geo-pts.pts-good { color: #f59e0b; }
.geo-pts.pts-low { color: #ef4444; }

/* Leaflet marker overrides */
.geo-marker-actual, .geo-marker-guess { background: none !important; border: none !important; }

/* Template card selected state */
.template-card.selected { border: 2px solid var(--purple); box-shadow: 0 0 12px rgba(124, 58, 237, 0.4); }

/* Responsive */
@media (max-width: 768px) {
    .geo-results-map-area { height: 250px; }
    .geo-clue-container { min-height: 40vh; }
}

/* ===== DRAWING GAME ===== */
.drawing-game-area { display: flex; flex-direction: column; gap: 12px; max-width: 1000px; margin: 0 auto; }
.drawing-secret-word { background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.4); border-radius: 10px; padding: 10px 18px; font-size: 16px; text-align: center; }
.drawing-hint { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; font-size: 15px; text-align: center; }
.drawing-main { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
@media (max-width: 768px) { .drawing-main { grid-template-columns: 1fr; } }

/* Toolbar */
.drawing-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px 10px 0 0; }
.color-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform .15s, border-color .15s; flex-shrink: 0; }
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--purple); }
.toolbar-sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }
.tool-btn { padding: 5px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; transition: all .2s; font-size: 13px; }
.tool-btn:hover { border-color: var(--purple); color: var(--text-primary); }
.tool-btn.active { background: rgba(124,58,237,.2); border-color: var(--purple); color: var(--purple); }

/* Canvas */
.drawing-canvas-area {
  display: flex;
  flex-direction: column;
  /* Block page-scroll/zoom gestures originating in the canvas region — without this iOS
     Safari can interpret the first finger-down as a scroll and the drawer's strokes get
     dropped. user-select disables the text-selection magnifier. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
}
.drawing-canvas { width: 100%; height: 420px; display: block; border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; cursor: crosshair; touch-action: none; }

/* Sidebar */
.drawing-sidebar { display: flex; flex-direction: column; gap: 12px; }
.drawing-players { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.drawing-players h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.drawing-player-row { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; }
.drawing-player-row:last-child { border-bottom: none; }
.drawing-player-row.guessed { color: #4ade80; }
.dp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawing-score { font-size: 13px; color: var(--text-muted); margin-left: auto; margin-right: 4px; }

/* Chat / Guess area */
.drawing-chat { display: flex; flex-direction: column; gap: 8px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.drawing-messages { flex: 1; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.drawing-msg { font-size: 13px; padding: 4px 6px; border-radius: 6px; word-break: break-word; }
.drawing-msg.correct-msg { background: rgba(34,197,94,.15); color: #4ade80; font-weight: 600; text-align: center; }
.drawing-guess-input { display: flex; gap: 6px; }
.drawing-guess-input .form-input { flex: 1; padding: 8px 12px; font-size: 14px; }
.drawing-guess-input .btn-primary { padding: 8px 12px; white-space: nowrap; }

/* ===== IMPOSTER GAME ===== */
.imposter-playing-screen { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 600px; margin: 0 auto; padding: 10px 0; }
.imposter-category-badge { padding: 6px 16px; background: rgba(124,58,237,.15); border: 1px solid rgba(124,58,237,.3); border-radius: 20px; font-size: 14px; color: var(--text-secondary); }
/* Role card */
.imposter-role-card { width: 100%; max-width: 360px; min-height: 200px; border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; transition: all .3s; user-select: none; padding: 24px; }
.role-hidden { background: var(--bg-secondary); border: 2px dashed var(--border); }
.role-hidden:hover { border-color: var(--purple); }
.role-imposter { background: rgba(231,76,60,.15); border: 2px solid rgba(231,76,60,.5); box-shadow: 0 0 20px rgba(231,76,60,.2); }
.role-citizen  { background: rgba(46,204,113,.1); border: 2px solid rgba(46,204,113,.4); box-shadow: 0 0 20px rgba(46,204,113,.1); }
.role-reveal-prompt { display: flex; flex-direction: column; align-items: center; color: var(--text-secondary); }
.role-content { display: flex; flex-direction: column; align-items: center; width: 100%; }
.role-title { font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.role-imposter .role-title { color: #e74c3c; }
.role-citizen  .role-title { color: #2ecc71; }
.role-word { font-size: 30px; font-weight: 900; color: #fff; margin-top: 8px; letter-spacing: 2px; }
/* Players in playing state */
.imposter-players-list { width: 100%; max-width: 500px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.imposter-players-list h4 { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.imposter-actions { display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Voting screen */
.imposter-voting-screen { max-width: 600px; margin: 0 auto; padding: 10px 0; }
.imposter-voted-msg { background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); border-radius: 12px; padding: 16px 20px; text-align: center; color: #2ecc71; font-size: 15px; line-height: 1.6; }
.imposter-vote-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin-top: 8px; }
.imposter-vote-card { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 12px; padding: 16px 12px; cursor: pointer; transition: all .2s; }
.imposter-vote-card:hover { border-color: var(--purple); background: rgba(124,58,237,.1); transform: translateY(-2px); }
.imposter-vote-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: #fff; }
.imposter-vote-name { font-size: 14px; font-weight: 600; text-align: center; }
/* Finished screen */
.imposter-reveal-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 20px 32px; text-align: center; margin: 0 auto 16px; max-width: 380px; }
.imposter-tally { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.imposter-tally-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; }
.imposter-tally-row:last-child { border-bottom: none; }
.imposter-tally-row.tally-imposter { color: #e74c3c; font-weight: 700; }

/* ===== TWO TRUTHS ONE LIE ===== */
.tt-writing-screen, .tt-guessing-screen { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tt-instruction { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); border-radius: 10px; padding: 12px 18px; font-size: 14px; text-align: center; width: 100%; }
.tt-submitted-msg { background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.3); border-radius: 12px; padding: 16px 20px; text-align: center; color: #2ecc71; font-size: 15px; line-height: 1.7; width: 100%; }
/* Writing form */
.tt-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.tt-statement-row { display: flex; align-items: center; gap: 10px; }
.tt-radio-col { flex-shrink: 0; }
.tt-lie-radio { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--border); background: var(--bg-secondary); transition: all .2s; user-select: none; font-size: 11px; font-weight: 700; color: var(--text-muted); }
.tt-lie-radio input { display: none; }
.tt-lie-radio:hover { border-color: #e74c3c; color: #e74c3c; }
.tt-lie-radio.selected-lie { border-color: #e74c3c; background: rgba(231,76,60,.15); color: #e74c3c; }
.tt-input-col { flex: 1; }
/* Progress */
.tt-progress { font-size: 13px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 20px; padding: 4px 14px; }
/* Player card in guessing */
.tt-player-card { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tt-player-avatar-lg { width: 56px; height: 56px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; }
.tt-player-name { font-size: 18px; font-weight: 700; }
/* Guess rows */
.tt-statements-list { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.tt-guess-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg-secondary); border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; transition: all .2s; }
.tt-guess-row:hover { border-color: var(--purple); }
.tt-guess-row.marked-lie { border-color: #e74c3c; background: rgba(231,76,60,.1); }
.tt-guess-text { flex: 1; font-size: 14px; line-height: 1.4; }
.tt-guess-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-truth { background: rgba(46,204,113,.15); color: #2ecc71; border: 1px solid rgba(46,204,113,.3); }
.badge-lie   { background: rgba(231,76,60,.2); color: #e74c3c; border: 1px solid rgba(231,76,60,.4); }
/* Chip waiting state */
.chip-waiting { opacity: .55; }
/* Finished reveal */
.tt-reveal-section { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 0 auto 20px; width: 100%; }
.tt-reveal-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.tt-reveal-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tt-reveal-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--purple); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0; }
.tt-reveal-name { font-size: 16px; font-weight: 700; }
.tt-reveal-statements { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tt-reveal-stmt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.tt-reveal-stmt.stmt-lie   { background: rgba(231,76,60,.1); color: #e74c3c; }
.tt-reveal-stmt.stmt-truth { background: rgba(46,204,113,.08); color: #aaa; }
.stmt-label { font-size: 10px; font-weight: 700; flex-shrink: 0; padding: 2px 6px; border-radius: 4px; margin-top: 1px; }
.stmt-lie   .stmt-label { background: rgba(231,76,60,.3); color: #e74c3c; }
.stmt-truth .stmt-label { background: rgba(255,255,255,.1); color: #888; }
.tt-reveal-stats { display: flex; gap: 16px; font-size: 13px; }

/* ===== COUP GAME ===== */

/* Rules bar on lobby */
.coup-rules-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-bottom: 20px; font-size: 12px; color: var(--text-secondary); }

/* Game layout: players | action | log */
.coup-game-layout { display: grid; grid-template-columns: 220px 1fr 240px; grid-template-rows: 1fr; gap: 14px; min-height: 540px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .coup-game-layout { grid-template-columns: 1fr; } }

/* ── Players panel ── */
.coup-players-panel { display: flex; flex-direction: column; gap: 10px; }
.coup-player-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; transition: border-color .2s; }
.coup-player-panel.cpp-current { border-color: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,.2); }
.coup-player-panel.cpp-mustlose { border-color: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,.2); animation: pulse-red 1s infinite; }
.coup-player-panel.cpp-eliminated { opacity: 0.45; filter: grayscale(0.5); }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 8px rgba(239,68,68,.2); } 50% { box-shadow: 0 0 18px rgba(239,68,68,.5); } }
.cpp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cpp-identity { display: flex; align-items: center; gap: 2px; }
.cpp-name { font-size: 13px; font-weight: 600; }
.cpp-coins { font-size: 13px; color: #fbbf24; display: flex; align-items: center; gap: 4px; }
.cpp-cards { display: flex; flex-wrap: wrap; gap: 5px; }

/* ── Action area ── */
.coup-action-area { display: flex; flex-direction: column; gap: 12px; }
.coup-status-bar { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.3); border-radius: 10px; padding: 8px 14px; font-size: 14px; text-align: center; }
.coup-phase-box { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.coup-phase-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; text-align: center; }
.coup-waiting-msg { text-align: center; color: var(--text-muted); padding: 20px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.coup-winner-banner { text-align: center; padding: 32px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Action grid */
.coup-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .coup-actions-grid { grid-template-columns: 1fr; } }
.coup-action-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; transition: all .2s; font-weight: 600; font-size: 14px; }
.coup-action-btn span { font-size: 13px; }
.coup-action-btn small { font-size: 10px; color: rgba(255,255,255,.6); font-weight: 400; }
.coup-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.coup-action-btn:not(:disabled):hover { transform: translateY(-2px); }
.btn-income      { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: #34d399; }
.btn-income:not(:disabled):hover { background: rgba(52,211,153,.25); }
.btn-foreignaid  { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.35); color: #60a5fa; }
.btn-foreignaid:not(:disabled):hover { background: rgba(96,165,250,.22); }
.btn-duke        { background: rgba(192,132,252,.15); border-color: rgba(192,132,252,.4); color: #c084fc; }
.btn-duke:not(:disabled):hover { background: rgba(192,132,252,.25); }
.btn-ambassador  { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); color: #34d399; }
.btn-ambassador:not(:disabled):hover { background: rgba(52,211,153,.22); }
.btn-captain     { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.35); color: #60a5fa; }
.btn-captain:not(:disabled):hover { background: rgba(96,165,250,.22); }
.btn-assassin    { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); color: #f87171; }
.btn-assassin:not(:disabled):hover { background: rgba(248,113,113,.22); }
.btn-coup        { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.4); color: #fbbf24; }
.btn-coup:not(:disabled):hover { background: rgba(251,191,36,.22); }
.coup-target-action { display: flex; flex-direction: column; gap: 5px; grid-column: span 2; }
@media (max-width: 600px) { .coup-target-action { grid-column: span 1; } }

/* Reaction buttons */
.coup-react-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.coup-react-btn { padding: 10px 20px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: all .2s; }
.coup-react-btn:hover { transform: translateY(-2px); }
.btn-challenge { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.5); color: #fbbf24; }
.btn-challenge:hover { background: rgba(251,191,36,.25); }
.btn-block     { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.5); color: #60a5fa; }
.btn-block:hover { background: rgba(96,165,250,.25); }
.btn-pass      { background: rgba(107,114,128,.15); border-color: rgba(107,114,128,.35); color: #9ca3af; }
.btn-pass:hover { background: rgba(107,114,128,.25); }

/* Card selector (lose influence / exchange) */
.coup-card-selector { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0; }

/* ── Log panel ── */
.coup-log-panel { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; max-height: 540px; }
.coup-log-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.coup-log-entries { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.coup-log-entry { font-size: 11px; color: var(--text-secondary); line-height: 1.4; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }

/* ═══════════════════════════════════════════
   COUP CARD ART
   ═══════════════════════════════════════════ */
.coup-card {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 81px; height: 122px; border-radius: 11px; padding: 6px 5px 5px; position: relative;
    border: 2px solid rgba(255,255,255,.2); box-shadow: 0 3px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
    flex-shrink: 0; overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.coup-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%;
    background: linear-gradient(to bottom, rgba(255,255,255,.12), transparent);
    pointer-events: none; border-radius: 7px 7px 0 0;
}

/* Card back */
.cc-back {
    background: radial-gradient(ellipse at center, #1e3a8a 0%, #0f172a 100%);
    background-image:
        repeating-linear-gradient(60deg, transparent, transparent 9px, rgba(255,255,255,.04) 9px, rgba(255,255,255,.04) 10px),
        repeating-linear-gradient(-60deg, transparent, transparent 9px, rgba(255,255,255,.04) 9px, rgba(255,255,255,.04) 10px),
        radial-gradient(ellipse at center, #1e3a8a 0%, #0f172a 100%);
    border-color: rgba(96,130,220,.35);
}
.cc-back-pattern { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); }

/* Card faces */
.cc-duke     { background: linear-gradient(155deg, #2d0060 0%, #7c3aed 55%, #4c1080 100%); border-color: rgba(216,180,254,.35); }
.cc-captain  { background: linear-gradient(155deg, #0a2a5e 0%, #1d6fc4 55%, #0d3a80 100%); border-color: rgba(147,197,253,.35); }
.cc-assassin { background: linear-gradient(155deg, #0f0a0a 0%, #3d1515 55%, #1a0808 100%); border-color: rgba(220,38,38,.35); }
.cc-contessa { background: linear-gradient(155deg, #5e0a0a 0%, #be1a1a 55%, #800a14 100%); border-color: rgba(252,165,165,.35); }
.cc-ambassador { background: linear-gradient(155deg, #0a3d1a 0%, #16a34a 55%, #0a4820 100%); border-color: rgba(134,239,172,.35); }

/* Revealed = dimmed */
.cc-revealed { opacity: .55; filter: grayscale(.4); }

/* Selectable hover */
.coup-card.selectable, .coup-card-lg { cursor: pointer; }
.coup-card-lg:hover { transform: translateY(-5px) scale(1.04); box-shadow: 0 10px 28px rgba(0,0,0,.7); }
.cc-selected { border-color: #fbbf24 !important; box-shadow: 0 0 18px rgba(251,191,36,.5) !important; transform: translateY(-4px) scale(1.03); }

/* Card internals */
.cc-corner { font-size: 12px; font-weight: 900; align-self: flex-start; line-height: 1; opacity: .8; }
.cc-icon { font-size: 31px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); flex-shrink: 0; }
.cc-name { font-size: 8.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; line-height: 1; text-align: center; }
.cc-ability { font-size: 7px; color: rgba(255,255,255,.65); text-align: center; line-height: 1.3; }

/* Icon colors per card */
.cc-duke .cc-icon, .cc-duke .cc-corner, .cc-duke .cc-name { color: #e9d5ff; }
.cc-captain .cc-icon, .cc-captain .cc-corner, .cc-captain .cc-name { color: #bfdbfe; }
.cc-assassin .cc-icon, .cc-assassin .cc-corner, .cc-assassin .cc-name { color: #fca5a5; }
.cc-contessa .cc-icon, .cc-contessa .cc-corner, .cc-contessa .cc-name { color: #fed7aa; }
.cc-ambassador .cc-icon, .cc-ambassador .cc-corner, .cc-ambassador .cc-name { color: #bbf7d0; }

/* Large card variant (for selection UIs) */
.coup-card-lg { width: 130px; height: 195px; border-radius: 14px; padding: 10px 8px 8px; }
.coup-card-lg .cc-corner { font-size: 18px; }
.coup-card-lg .cc-icon { font-size: 52px; }
.coup-card-lg .cc-name { font-size: 13px; }
.coup-card-lg .cc-ability { font-size: 11px; line-height: 1.4; }

/* ═══════════════════════════════════════════════════════════
   ROOM CODE DISPLAY (shown to hosts in lobby waiting rooms)
   ═══════════════════════════════════════════════════════════ */
.room-code-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 16px 0 8px;
    padding: 14px 24px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 14px;
}
.room-code-label {
    font-size: 12px;
    color: #a78bfa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.room-code {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: 10px;
    color: #fff;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.7);
    user-select: all;
}
.room-code-share-btns {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.room-code-share-btns .btn-chip {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}
.room-code-share-btns .btn-chip:hover {
    border-color: var(--purple);
    color: var(--purple);
}
.room-code-qr {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.25);
}
.room-code-qr svg {
    display: block;
    width: 160px;
    height: 160px;
}
.room-code-qr-hint {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.room-code-manual-copy {
    margin-top: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.room-code-manual-copy small {
    color: #fbbf24;
    font-size: 11px;
}
.room-code-manual-copy input {
    width: 100%;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   LOGIN TABS (Sign In / Join with Code)
   ═══════════════════════════════════════════════════════════ */
.login-tabs {
    display: flex;
    gap: 2px;
    margin: 0 0 20px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 4px;
}
.login-tab {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    transition: all 0.2s;
}
.login-tab:hover { color: #fff; background: rgba(255,255,255,0.08); }
.login-tab.active { background: rgba(139,92,246,0.35); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   GUEST TOP BAR (shown instead of full NavBar for guests)
   ═══════════════════════════════════════════════════════════ */
.guest-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    background: rgba(15, 10, 30, 0.92);
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    backdrop-filter: blur(12px);
}
.guest-topbar-brand {
    font-size: 18px;
    font-weight: 800;
    color: #c084fc;
    letter-spacing: 1px;
}
.guest-topbar-nick {
    flex: 1;
    font-size: 14px;
    color: #e2e8f0;
}
.guest-topbar-leave {
    padding: 7px 16px;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.4);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.guest-topbar-leave:hover {
    background: rgba(239,68,68,0.3);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   LOTERÍA MEXICANA
═══════════════════════════════════════════════════════ */
.loteria-card-theme {
  background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(245,158,11,0.08) 100%);
  border-color: rgba(245,158,11,0.3) !important;
}
.loteria-card-theme:hover {
  border-color: rgba(245,158,11,0.7) !important;
  box-shadow: 0 8px 32px rgba(245,158,11,0.2);
}
.loteria-current-card {
  background: linear-gradient(135deg, #1a0a00 0%, #2d1a00 100%);
  border: 3px solid #f59e0b;
  border-radius: 20px;
  margin: 0 auto 20px;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 0 40px rgba(245,158,11,0.25), 0 8px 32px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.loteria-current-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(245,158,11,0.04) 8px, rgba(245,158,11,0.04) 16px);
  pointer-events: none;
}
.loteria-game-layout {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 16px 16px;
}
.loteria-tabla-section { flex: 1; min-width: 0; max-width: 580px; }
.loteria-history-section { min-width: 160px; }
.loteria-tabla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 580px;
  width: 100%;
}
.loteria-cell {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 14px 6px 10px;
  text-align: center;
  background: linear-gradient(180deg, var(--card-bg) 0%, rgba(10,10,15,0.95) 100%);
  cursor: default;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.loteria-cell::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  pointer-events: none;
}
.loteria-cell.current {
  border-color: #f59e0b !important;
  background: linear-gradient(180deg, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.06) 100%) !important;
  box-shadow: 0 0 16px rgba(245,158,11,0.4), 0 2px 8px rgba(0,0,0,0.3);
  animation: loteria-pulse 0.6s ease;
}
.loteria-cell.callable {
  cursor: pointer;
}
.loteria-cell.callable:hover {
  transform: scale(1.03);
  border-color: var(--text-muted) !important;
}
@keyframes loteria-callable-glow {
  from { box-shadow: 0 0 6px rgba(245,158,11,0.2), 0 2px 8px rgba(0,0,0,0.3); }
  to   { box-shadow: 0 0 14px rgba(245,158,11,0.45), 0 2px 8px rgba(0,0,0,0.3); }
}
.loteria-cell.marked {
  border-color: #22c55e !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.18) 0%, rgba(34,197,94,0.06) 100%) !important;
}
.loteria-cell.marked::after {
  content: '\2713';
  position: absolute;
  bottom: 5px;
  right: 7px;
  font-size: 0.9em;
  color: #22c55e;
  font-weight: 700;
}
.loteria-cell-emoji { font-size: 2.4em; line-height: 1; display: block; }
.loteria-cell-name { font-size: 0.75em; color: var(--text-muted); line-height: 1.15; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.loteria-setting-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.85em;
  color: var(--text-muted);
}
.loteria-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
  min-width: 150px;
}
.loteria-history-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.83em;
}
.loteria-history-chip:first-child {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.1);
}
.loteria-winner-banner {
  font-size: 2.6em;
  font-weight: 900;
  color: #f59e0b;
  text-shadow: 0 0 30px rgba(245,158,11,0.6), 0 4px 8px rgba(0,0,0,0.4);
  animation: loteria-winner 0.8s ease infinite alternate;
  letter-spacing: 2px;
}
@keyframes loteria-winner {
  from { transform: scale(1);    text-shadow: 0 0 20px rgba(245,158,11,0.5); }
  to   { transform: scale(1.05); text-shadow: 0 0 50px rgba(245,158,11,0.9); }
}
@keyframes loteria-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@media (max-width: 600px) {
  .loteria-game-layout { flex-direction: column; gap: 12px; padding: 0 4px 12px; align-items: center; }
  .loteria-tabla-section { max-width: 100%; width: 100%; }
  .loteria-history-section { width: 100%; min-width: 0; }
  .loteria-tabla { max-width: 100%; gap: 4px; width: 100%; }
  .loteria-cell { padding: 6px 2px 5px; aspect-ratio: auto; min-height: 64px; border-radius: 8px; border-width: 1.5px; }
  .loteria-cell-emoji { font-size: 1.8em; }
  .loteria-cell-name { font-size: 0.65em; }
  .loteria-cell::before { display: none; }
  .loteria-current-card { padding: 12px 10px; max-width: 180px; aspect-ratio: auto; }
  .loteria-current-card .loteria-cell-emoji { font-size: 2.5em !important; }
  .loteria-history { max-height: 150px; min-width: 0; }
  .loteria-cell.marked::after { font-size: 0.85em; bottom: 2px; right: 3px; }
  .loteria-draw-controls { padding: 8px 12px; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE DEVICE OVERRIDES (body.is-mobile)
   JS-detected, works on all iOS/Android regardless of viewport
   ═══════════════════════════════════════════════════════ */

/* --- Mobile navbar: icons only, scrollable --- */
body.is-mobile .navbar { padding: 0 6px; gap: 4px; height: 50px; }
body.is-mobile .brand-name { display: none !important; }
body.is-mobile .nav-tab { padding: 6px 8px; font-size: 15px; }
body.is-mobile .nav-tab span { display: none !important; }
body.is-mobile .lang-switcher { gap: 2px; }
body.is-mobile .lang-btn { padding: 2px 4px; font-size: 14px; border: none; }
body.is-mobile .lang-btn.active { background: rgba(124,58,237,.25); border: none; }
body.is-mobile .navbar-actions { gap: 4px; margin-left: auto; }
body.is-mobile .user-badge { font-size: 11px; padding: 4px 6px; }
body.is-mobile .user-badge span:not(.online-dot) { display: none; }
body.is-mobile .main-wrapper { margin-top: 50px; }

/* --- LOTERIA: full-width cards only --- */
body.is-mobile .quiz-room { padding: 8px; }
body.is-mobile .loteria-current-card {
  max-width: 160px; padding: 10px 8px; aspect-ratio: auto;
  margin: 0 auto 8px;
}
body.is-mobile .loteria-current-card .loteria-cell-emoji { font-size: 2.5em !important; }
body.is-mobile .loteria-game-layout {
  flex-direction: column !important;
  gap: 8px; padding: 0 4px 8px;
  align-items: stretch;
}
body.is-mobile .loteria-tabla-section {
  max-width: 100% !important; width: 100% !important;
}
body.is-mobile .loteria-tabla {
  max-width: 100% !important; width: 100% !important; gap: 3px;
}
body.is-mobile .loteria-cell {
  padding: 4px 2px 3px; min-height: 60px;
  aspect-ratio: auto; border-radius: 8px; border-width: 1.5px;
}
body.is-mobile .loteria-cell::before { display: none; }
body.is-mobile .loteria-cell-emoji { font-size: 1.6em; }
body.is-mobile .loteria-cell-name { font-size: 0.6em; }
body.is-mobile .loteria-cell.marked::after { font-size: 0.8em; bottom: 1px; right: 2px; }
body.is-mobile .loteria-history-section { width: 100%; min-width: 0; }
body.is-mobile .loteria-history { max-height: 120px; }
body.is-mobile .loteria-draw-controls { padding: 6px 8px; }

/* --- General mobile layout --- */
body.is-mobile .page-content { padding: 12px 8px; }
body.is-mobile .chat-panel { width: 100vw; }
body.is-mobile .games-grid { grid-template-columns: 1fr; }
body.is-mobile .lobby-options { grid-template-columns: 1fr; }
body.is-mobile .hero-graphic { display: none; }
body.is-mobile .bs-boards-row { flex-direction: column; gap: 16px; }

/* === SOUND SIDEBAR === */
.sound-sidebar {
  position: fixed;
  right: 0;
  top: 64px;
  bottom: 0;
  z-index: 49;
  display: flex;
  align-items: flex-start;
  transition: right 0.25s ease;
}
/* When chat is open alongside, sound panel docks to the LEFT of chat (300px wide) so both are visible. */
.sound-sidebar.chat-open.open { right: 300px; }

.sound-toggle {
  position: absolute;
  left: -48px;
  top: 72px;
  width: 44px;
  height: 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: 12px 0 0 12px;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.sound-toggle:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.sound-sidebar.open .sound-toggle { display: none; }
/* When chat panel is open and sound is closed, shift the sound toggle tab so it floats on the left edge of the chat panel instead of disappearing behind it. */
.sound-sidebar.chat-open:not(.open) .sound-toggle { right: 300px; left: auto; }
.sound-panel {
  width: 280px;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sound-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.sound-section { padding: 16px 20px; }
.sound-divider { height: 1px; background: var(--border); margin: 0 20px; }
.sound-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sound-row-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.sound-row-vol input[type="range"] { flex: 1; accent-color: var(--purple); }
.sound-row-vol input[type="range"]:disabled { opacity: 0.4; }
.sound-row-vol i { color: var(--text-muted); font-size: 11px; }
.sound-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.sound-switch input { opacity: 0; width: 0; height: 0; }
.sound-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px;
  transition: .2s;
}
.sound-slider::before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 2px; top: 2px;
  background: var(--text-muted); border-radius: 50%; transition: .2s;
}
.sound-switch input:checked + .sound-slider { background: rgba(124,58,237,.25); border-color: var(--purple); }
.sound-switch input:checked + .sound-slider::before { transform: translateX(18px); background: var(--purple); }
.sound-preview-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sound-preview-row .btn-chip {
  padding: 4px 10px; font-size: 12px; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 14px; cursor: pointer;
}
.sound-preview-row .btn-chip:hover { border-color: var(--purple); color: var(--purple); }
.sound-track-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sound-track-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: .15s;
}
.sound-track-row:hover { border-color: var(--text-muted); }
.sound-track-row.active { border-color: var(--purple); background: rgba(124,58,237,.1); color: var(--purple); }
.sound-track-row input[type="radio"] { accent-color: var(--purple); }
.sound-hint {
  font-size: 11px; color: var(--text-muted); margin-top: 10px;
  display: flex; gap: 6px; align-items: flex-start;
}
.sound-hint code { background: var(--bg-card); padding: 1px 4px; border-radius: 3px; }
@media (max-width: 768px) {
  .sound-panel { width: 100vw; }
  .sound-toggle { top: 64px; }
}
body.is-mobile .sound-panel { width: 100vw; }
body.is-mobile .sound-toggle { top: 64px; }

/* === ADMIN TEMPLATES FILTER HELPERS === */
.filter-label {
  align-self: center;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  background: var(--bg-card);
}
.btn-row-action {
  padding: 4px 10px !important;
  font-size: 11px !important;
  white-space: nowrap;
}
.btn-row-action i { margin-right: 3px; }
.row-disabled { opacity: 0.55; }
.row-disabled span { color: var(--text-muted); }

/* === ADMIN CHARTS === */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.chart-card.chart-wide { grid-column: span 2; }
.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.chart-canvas-wrap {
  position: relative;
  height: 240px;
  width: 100%;
}
.chart-canvas-wrap.chart-tall { height: 280px; }
@media (max-width: 900px) {
  .chart-card.chart-wide { grid-column: span 1; }
}

/* === Avatars / Profile / Achievements / Touch targets — added with profile feature === */
.avatar-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-hover);
  border: 1px solid var(--border); flex-shrink: 0; line-height: 1;
}
.avatar-bubble.avatar-sm { width: 28px; height: 28px; font-size: 16px; }
.avatar-bubble.avatar-md { width: 44px; height: 44px; font-size: 24px; }
.avatar-bubble.avatar-xl { width: 80px; height: 80px; font-size: 44px; }

.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; max-height: 240px; overflow-y: auto; }
.avatar-pick {
  width: 48px; height: 48px; min-width: 44px; min-height: 44px;
  font-size: 24px; border-radius: 10px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s, border-color .12s;
}
.avatar-pick:hover { transform: scale(1.1); border-color: var(--purple); }
.avatar-pick.active { border-color: var(--purple); background: var(--bg-hover); box-shadow: 0 0 0 2px var(--glow-purple); }

.theme-pick {
  padding: 12px 18px; min-height: 44px; cursor: pointer; font-size: 14px;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px;
}
.theme-pick:hover { border-color: var(--purple); }
.theme-pick.active { border-color: var(--purple); background: var(--bg-hover); box-shadow: 0 0 0 2px var(--glow-purple); }

.profile-hero {
  display: flex; align-items: center; gap: 20px; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.profile-hero-left { display: flex; gap: 16px; align-items: center; flex: 1; min-width: 250px; }
.profile-hero-right { display: flex; gap: 8px; }
.profile-name-block { display: flex; flex-direction: column; gap: 4px; }
.profile-rank { font-weight: 600; display: flex; align-items: center; gap: 6px; }

.profile-stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.profile-stat-row > div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.profile-stat-row strong { font-size: 22px; }
.profile-stat-row span { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

.xp-bar { width: 100%; height: 12px; background: var(--bg-hover); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--blue)); transition: width .4s; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.badge-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); }
.badge-card.locked { opacity: .42; filter: grayscale(.7); }
.badge-card.unlocked { box-shadow: inset 0 0 0 1px var(--border-active); }
.badge-icon { font-size: 28px; width: 36px; text-align: center; }
.badge-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.badge-text strong { font-size: 14px; }
.badge-text small { color: var(--text-muted); font-size: 12px; }

/* Achievement toast popup (right-bottom, slides in) */
.achievement-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; min-width: 280px; max-width: 360px;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
  border: 1px solid var(--border-active); border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4), 0 0 30px var(--glow-purple);
  animation: achToastIn .35s ease-out, achToastOut .35s ease-in 5.2s forwards;
}
@keyframes achToastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes achToastOut { to { transform: translateX(120%); opacity: 0; } }
.achievement-toast .ach-icon { font-size: 30px; }
.achievement-toast .ach-text strong { display: block; font-size: 14px; }
.achievement-toast .ach-text small { color: var(--text-muted); font-size: 12px; }

/* === Touch targets (#13a) — ensure interactive elements meet 44×44 on touch devices === */
@media (max-width: 768px) {
  body.is-mobile button,
  body.is-mobile .btn-primary,
  body.is-mobile .btn-secondary,
  body.is-mobile .nav-tab,
  body.is-mobile .filter-btn,
  body.is-mobile .lang-btn,
  body.is-mobile .quiz-answer-btn,
  body.is-mobile .chat-user-row,
  body.is-mobile .lobby-card,
  body.is-mobile .lobby-action {
    min-height: 44px;
  }
  body.is-mobile .chess-square,
  body.is-mobile .battleship-cell,
  body.is-mobile .memory-card,
  body.is-mobile .ttt-cell {
    min-width: 44px; min-height: 44px;
  }
  body.is-mobile .avatar-pick { width: 52px; height: 52px; }
}

/* === Mobile fixes for score / standings / leaderboard / profile UIs === */

/* Leaderboard table — collapse 7-column grid into a card layout on phones.
   Each row becomes: avatar + name (top), then a stat strip below with W/L/D and points.
   The hidden header on mobile relies on color/icon cues for each stat. */
@media (max-width: 720px) {
  .lb-header { display: none; }
  .lb-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    grid-template-areas:
      "rank name      points"
      ".    ranktier  ranktier"
      ".    stats     stats";
    column-gap: 10px;
    row-gap: 4px;
    padding: 12px;
    align-items: center;
  }
  .lb-row .lb-rank { grid-area: rank; }
  .lb-row .lb-name { grid-area: name; min-width: 0; overflow: hidden; }
  .lb-row .lb-name a, .lb-row .lb-name { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
  /* Tier badge (3rd cell originally) */
  .lb-row > span:nth-of-type(3) { grid-area: ranktier; font-size: 12px; }
  /* Points (4th cell) */
  .lb-row > .lb-points { grid-area: points; font-weight: 700; color: var(--purple-light); justify-self: end; }
  /* W/L/D strip */
  .lb-row > .lb-wins,
  .lb-row > .lb-losses,
  .lb-row > .lb-draws { display: none; }
  .lb-row::after {
    grid-area: stats;
    content: "W " attr(data-w) " · L " attr(data-l) " · D " attr(data-d);
    color: var(--text-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .leaderboard-filters { gap: 6px; }
  .leaderboard-filters .filter-btn { padding: 8px 12px; font-size: 12px; min-height: 36px; }
}

/* Standings table — make rows tighter on very narrow phones */
@media (max-width: 380px) {
  .standings-header, .standings-row { grid-template-columns: 30px 1fr 56px; gap: 6px; padding: 8px; }
  .standings-name { font-size: 12px; }
  .standings-name .me-tag { display: none; }
  .quiz-podium { gap: 4px; }
  .podium-avatar { width: 38px; height: 38px; font-size: 16px; }
  .podium-avatar.winner { width: 46px; height: 46px; font-size: 18px; }
  .podium-block { font-size: 16px; }
}

/* Quiz / TwoTruths / Drawing per-round score rows — let names truncate so the
   row never pushes the right column off-screen. */
@media (max-width: 480px) {
  .quiz-score-row { padding: 9px 14px; font-size: 13px; gap: 8px; }
  .quiz-score-row > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
  }
  .quiz-score-row > span:last-child { flex-shrink: 0; }
  .quiz-results-title { font-size: 22px; }
  .tt-reveal-card { padding: 12px; }
  .tt-reveal-stmt { font-size: 12px; padding: 6px 8px; }
  .tt-reveal-stats { gap: 10px; font-size: 12px; }
}

/* Profile hero / stat row / badge grid — wrap properly on small screens */
@media (max-width: 600px) {
  .profile-hero { padding: 14px; gap: 12px; }
  .profile-hero-left { gap: 12px; min-width: 0; }
  .profile-hero-left h2 { font-size: 20px; }
  .profile-hero-right { width: 100%; }
  .profile-hero-right .btn-secondary { width: 100%; justify-content: center; }
  .avatar-bubble.avatar-xl { width: 64px; height: 64px; font-size: 32px; }

  .profile-stat-row { gap: 12px; justify-content: space-around; }
  .profile-stat-row strong { font-size: 18px; }
  .profile-stat-row span { font-size: 10px; }

  .badge-grid { grid-template-columns: 1fr; }
  .badge-card { padding: 10px; }
  .badge-text strong { font-size: 13px; }
  .badge-text small { font-size: 11px; }

  .achievement-toast {
    left: 12px; right: 12px; bottom: 12px;
    min-width: 0; max-width: none;
    padding: 12px 14px;
  }
}

/* ============================================================================
   Mobile / tablet fixes — additions only, no desktop side-effects.
   Each block is scoped to a small-screen media query so layout above the
   breakpoint stays identical to the previous design.
   ============================================================================ */

/* #46 — Sound and chat sidebars can both open at once and overlap on narrow
   screens. Below 640px, hide the sound sidebar while chat is open and vice
   versa so the user only ever sees one slide-over at a time. */
@media (max-width: 640px) {
    .sound-sidebar.chat-open.open { display: none; }
    .chat-panel.sound-open.open { display: none; }
}

/* #47 — Imposter vote grid: at 320px the auto-fill minmax(130px, 1fr) forces
   one card per row, which makes long lists tedious to scroll through. Drop the
   minimum based on viewport so two columns survive on small phones. */
@media (max-width: 480px) {
    .imposter-vote-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(130px, calc(50vw - 24px)), 1fr));
    }
}

/* #48 — Drawing canvas: respect iPhone notch / safe areas. The canvas uses
   touch-action: none, which means a user can't pan/zoom to escape the notch
   if the canvas extends under it. Padding the surrounding area with
   env(safe-area-inset-*) keeps the drawable region clear of the notch. */
@media (max-width: 768px) {
    .drawing-canvas-area {
        padding-top: env(safe-area-inset-top, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        box-sizing: border-box;
    }
}

/* #49 — Guest topbar reflows badly on phones <380px (button wraps awkwardly).
   Stack vertically with small gap so leave/lobby actions stay tappable. */
@media (max-width: 380px) {
    .guest-topbar { flex-direction: column; gap: 6px; align-items: stretch; }
    .guest-topbar > * { width: 100%; }
}

/* #50 — Chess piece glyphs: 28px in a 40px cell looks cramped. Use clamp so
   the piece scales with viewport width and breathes inside the cell, without
   touching the >480px desktop sizing. */
@media (max-width: 480px) {
    .chess-piece { font-size: clamp(20px, 7vw, 32px); }
}