:root {
  --bg-dark: #0b0f1a;
  --bg-card: rgba(18, 23, 41, 0.92);
  --bg-card-solid: rgb(18, 23, 41); /* --bg-card without its see-through, for cards over the arcade glow (#628) */
  --bg-card-border: #1f2640;
  --line-strong: #2a2f55;
  --surface-message: #151a30;
  --surface-input: #0a0d18;
  --surface-secondary: #161b2e;
  --accent-orange: #f97316;
  --accent-cyan-hover: #67dcf5;
  --headline-gradient: linear-gradient(90deg, #a78bfa 0%, #ff3b6b 55%, #fb923c 100%);
  --font-display: 'Archivo', 'Inter', sans-serif;
  --primary: #9333ea;
  --primary-hover: #7e22ce;
  --accent-gold: #ffce2e;
  --accent-cyan: #22c3e6;
  --accent-pink: #ff3b6b;
  --reversal-card-tint: rgba(255, 59, 107, 0.08);
  --text-main: #f3f4f6;
  --text-muted: #a3acc2;
  --text-subtle: #8b93aa;
  --success: #10b981;
  --danger: #ef4444;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  /* The in-game chain and the game-over list of played names share one spacing, so they stay alike (#637) */
  --played-list-gap: 6px;
  --played-row-padding: 8px 12px;
  --played-row-gap: 10px;
  --played-row-radius: var(--radius-sm);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  /* Text fields sit recessed into the card and buttons stand raised off it, so players can tell what
     they type into from what they tap (#550) */
  --field-bg: rgba(0, 0, 0, 0.35);
  --field-border: rgba(255, 255, 255, 0.16);
  --field-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  --field-focus: var(--accent-cyan);
  --raised-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 6px rgba(0, 0, 0, 0.35);
  /* Room left above the phone keyboard for a browser bar drawn over the page (#451): none by default */
  --keyboard-accessory-reserve: 0px;
}

/* Chrome on Android draws its password / card / address bar over the page above the keyboard, and no
   page API reports it (#451). On a real phone the bar measured about 62 CSS px, so 80 keeps Submit and
   Pass clear of it with a small gap (#456). Where the bar does not show, this leaves an empty band
   under the turn card */
html.android-keyboard-accessory {
  --keyboard-accessory-reserve: 80px;
}

/* Some turns Chrome takes its bars (64 CSS px) off the visual viewport itself, with the keyboard or a beat
   after it (#460), so the visible height already ends above them. 16 = 80 - 64 leaves the card where the full
   reserve puts it when Chrome does not count them: the same spot on every turn */
html.android-keyboard-accessory body.keyboard-bars-measured {
  --keyboard-accessory-reserve: 16px;
}

/* Safari 26+ on iPhone floats its form toolbar (˄ ˅ ✓) over the page on some openings, and no page API
   reports it (#477). In the iOS 27 simulator it covered the 58 CSS px above the keys (48 of toolbar,
   10 of gap), so 64 keeps Submit and Pass clear of it with a small gap */
html.ios-floating-keyboard-toolbar {
  --keyboard-accessory-reserve: 64px;
}

/* On the other openings Safari takes the toolbar and its address bubble off the visual viewport
   itself (100 CSS px more), so the visible height already ends above them */
html.ios-floating-keyboard-toolbar body.keyboard-bars-measured {
  --keyboard-accessory-reserve: 0px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  overflow-x: hidden;
  max-width: 100%;
  /* iOS Safari ignores user-scalable=no, so quick taps on reactions, Pass and Submit zoomed the page.
     Safari combines touch-action with every ancestor's, so the root's value covers the whole page;
     manipulation keeps scrolling and pinch zoom and only drops double-tap zoom (#288) */
  touch-action: manipulation;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(147, 51, 234, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 59, 107, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, #0b0f1a 0%, #0b0f1a 100%);
  color: var(--text-main);
  /* dvh is the visible height on iOS Safari, where 100vh runs under the toolbars; vh is the fallback */
  min-height: 100vh;
  min-height: 100dvh;
  /* With viewport-fit=cover the page reaches under the notch, home indicator and Safari's floating
     address bar; the insets keep the header and HUD clear of them (0 everywhere else, #229) */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: 100%;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  -webkit-font-smoothing: antialiased;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--bg-card-border);
  background: rgba(11, 15, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* The header is a stacking context (sticky, blurred), so its menu can rise no higher than the header
   itself. While the menu is open the whole header goes over every layer of the page (the last-second
   callout, prompts, dialogs, reactions, banners and confetti), so nothing draws over the menu or takes
   its taps (#575). Only the rotate-phone prompt stays above it */
.app-header.header-menu-open {
  z-index: 10000;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 1;
}

.logo-icon {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #9333ea, #ff3b6b);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(147, 51, 234, 0.35);
}

.logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.logo-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

@media (max-width: 440px) {
  .app-header {
    padding: 12px 14px;
  }
  .logo-area {
    gap: 8px;
  }
  .logo-icon {
    width: 32px;
    height: 32px;
    font-size: 1.3rem;
    flex-shrink: 0;
  }
  .logo-title {
    font-size: 0.88rem;
    letter-spacing: 0.2px;
  }
  .header-actions {
    gap: 6px;
  }
  .btn-icon {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
}

.btn-icon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--bg-card-border);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.2s ease;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

/* App Container */
.app-container {
  flex: 1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: flex;
  flex-direction: column;
}

/* Screens */
.screen-view {
  display: none;
  flex-direction: column;
  gap: 18px;
  animation: fadeIn 0.25s ease-out;
}

.screen-view.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.card-tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 6px;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* Hero Section */
.hero-section {
  text-align: center;
  padding: 20px 8px 10px;
}

.hero-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(147, 51, 234, 0.15);
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #a5b4fc;
  margin-bottom: 12px;
}

.hero-heading {
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 12px;
}

.gradient-text {
  background: var(--headline-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto;
}

/* Setup Card */
.profile-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.2);
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.avatar-selector {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.avatar-display {
  position: relative;
  font-size: 2rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 2px solid var(--primary);
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.avatar-display:active {
  transform: scale(0.94);
}

.avatar-display:hover {
  border-color: #a78bfa;
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.4);
}

.avatar-icon {
  line-height: 1;
}

/* CNC-06: Avatar Edit Badge */
.avatar-edit-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background: var(--primary);
  border: 2px solid #0f172a;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: transform 0.2s ease;
}

.avatar-display:hover .avatar-edit-badge {
  transform: scale(1.15) rotate(12deg);
}

/* CNC-06: Discoverability Hint Text */
.avatar-hint {
  font-size: 0.68rem;
  font-weight: 600;
  color: #a5b4fc;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  opacity: 0.9;
  user-select: none;
}

/* CNC-06: Gentle Initial Pulse Animation */
.avatar-pulse {
  animation: avatarSubtlePulse 2.4s ease-in-out infinite;
}

@keyframes avatarSubtlePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(147, 51, 234, 0.45);
    border-color: var(--primary);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(147, 51, 234, 0);
    border-color: #a78bfa;
  }
}

.avatar-grid {
  position: absolute;
  top: 72px;
  left: 0;
  background: #1e293b;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  z-index: 50;
  width: 200px;
}

.avatar-grid.hidden {
  display: none;
}

.av-opt,
.modal-av-opt {
  font-size: 1.5rem;
  cursor: pointer;
  text-align: center;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, transform 0.15s ease;
  user-select: none;
}

.av-opt:hover,
.modal-av-opt:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.18);
}

.av-opt:active,
.modal-av-opt:active {
  transform: scale(0.95);
}

.input-field-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.input-field-group label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.input-field-group input {
  padding: 10px 14px;
  font-size: 1rem;
  font-family: inherit;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* One look for every text field: recessed, never mistaken for the raised buttons beside it (#550) */
.input-field-group input,
.code-input {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  box-shadow: var(--field-shadow);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s ease;
}

.input-field-group input::placeholder,
.code-input::placeholder {
  color: var(--text-subtle);
  opacity: 1;
}

.input-field-group input:focus,
.input-field-group input:focus-visible,
.code-input:focus,
.code-input:focus-visible {
  border-color: var(--field-focus);
  outline: none;
}

/* Buttons */
.menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-primary {
  background: #9333ea;
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35);
}

.btn-primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: scale(0.98);
}

.btn-large {
  padding: 16px 24px;
  font-size: 1.1rem;
}

.btn-content {
  text-align: left;
  display: flex;
  flex-direction: column;
}

/* With no icon beside it (#549), the title and subtitle center under each other */
.btn-content:only-child {
  text-align: center;
}

.btn-content small {
  font-size: 0.74rem;
  font-weight: 500;
  opacity: 0.85;
}

.join-inline-group {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.code-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

/* The hint reads as a hint, not as a bold code on a button label */
.code-input::placeholder {
  font-weight: 500;
  letter-spacing: 1px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--raised-shadow);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Room Invite Banner */
.room-invite-banner {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.22), rgba(255, 59, 107, 0.16));
  border: 1px solid rgba(129, 140, 248, 0.38);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.25);
  animation: fadeIn 0.25s ease;
}

.invite-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #c7d2fe;
  background: rgba(147, 51, 234, 0.35);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}

.invite-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}

.highlight-code {
  color: var(--accent-gold);
  letter-spacing: 2px;
  font-family: monospace;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 206, 46, 0.45);
}

.invite-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
}

/* Welcome Error Banner */
.welcome-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
  animation: fadeIn 0.2s ease;
}

/* Input Error State */
.input-error {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3) !important;
}

/* Invite Join Button */
.btn-invite-join {
  background: linear-gradient(135deg, #10b981, #22c3e6);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}

.btn-invite-join:hover {
  background: linear-gradient(135deg, #059669, #1aa7c7);
}

.divider-text {
  text-align: center;
  position: relative;
  margin: 6px 0;
}

.divider-text::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.divider-text span {
  position: relative;
  background: #131b2e;
  padding: 0 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-subtle);
}

.quick-play-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
}

.btn-subtle {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-main);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--raised-shadow);
}

.btn-subtle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary);
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: center;
}

.btn-ghost:hover {
  color: var(--text-main);
}

/* LOBBY SCREEN */
.room-code-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255, 255, 255, 0.2);
}

.code-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.code-val {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--accent-cyan);
}

.btn-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-chip:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Selected chip in a toggle group (leaderboard timeframes) */
.btn-chip.active,
.btn-chip.active:hover {
  background: linear-gradient(135deg, #9333ea, #9333ea);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35);
}

/* The Popular Names window (#508) */
.popular-names-subtitle {
  margin: 0 0 14px;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* One row of Popular Names: a long name is cut short so its play count always shows */
.popular-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.popular-name-rank {
  flex: 0 0 26px;
  text-align: center;
  font-weight: 700;
  color: var(--gold, #f59e0b);
}

.popular-name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #fff;
}

.popular-name-plays {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--accent-light, #38bdf8);
}

.btn-chip:disabled,
.btn-chip.btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-ai-chip {
  background: rgba(147, 51, 234, 0.2);
  border-color: rgba(147, 51, 234, 0.4);
  color: #c7d2fe;
}

.lobby-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 10px;
  text-align: center;
}

.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.player-chips-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.player-lobby-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 14px;
  border-radius: var(--radius-md);
}

.player-lobby-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.player-lobby-avatar {
  font-size: 1.4rem;
}

.player-lobby-name {
  font-weight: 700;
  font-size: 0.95rem;
}

.badge-host {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(255, 206, 46, 0.2);
  color: var(--accent-gold);
  border: 1px solid rgba(255, 206, 46, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Reporting another player's name as offensive (#197, #228) */
.player-lobby-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.is-reportable {
  cursor: pointer;
}

.is-reportable:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

/* Muted, so a report reads as information rather than an alarm */
.badge-name-flags {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.player-turn-badge .badge-name-flags {
  margin-left: auto;
}

.player-menu {
  position: fixed;
  z-index: 900;
  min-width: 200px;
  max-width: min(300px, calc(100vw - 16px));
  padding: 8px;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}

.player-menu.hidden {
  display: none;
}

.player-menu-title {
  padding: 4px 8px 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.player-menu-item {
  display: block;
  width: 100%;
  padding: 10px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-main);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.player-menu-item:hover,
.player-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

.player-menu-text {
  margin: 4px 4px 10px;
  font-size: 0.85rem;
  line-height: 1.35;
}

.player-menu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-chip-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
}

.badge-ai {
  font-size: 0.65rem;
  font-weight: 800;
  background: rgba(147, 51, 234, 0.2);
  color: #a5b4fc;
  border: 1px solid rgba(147, 51, 234, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.lobby-settings-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  user-select: none;
}

.lobby-settings-header:focus-visible {
  outline: 2px solid var(--accent-cyan, #22c3e6);
  outline-offset: 4px;
  border-radius: var(--radius-sm, 6px);
}

.lobby-settings-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lobby-settings-header .card-tag {
  margin-bottom: 0;
}

.lobby-settings-chevron {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  line-height: 1;
}

.lobby-settings.collapsed {
  padding-bottom: 14px;
}

.lobby-settings.collapsed .lobby-settings-header {
  margin-bottom: 0;
}

.lobby-settings.collapsed .lobby-settings-chevron {
  transform: rotate(-90deg);
}

.lobby-settings.collapsed .lobby-settings-body {
  height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.lobby-settings.collapsed .lobby-settings-summary {
  display: inline-block !important;
}

.lobby-settings-summary {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  white-space: nowrap;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.setting-item label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.setting-item select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.lobby-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* GAME SCREEN HUD */
/* A compact status row (#336): each box stacks a small label above its value, the labels and the
   clocks each sharing one line across the row */
.game-hud {
  --hud-value-line: 1.5rem;
  /* The clocks' bar below their value: the space the letter fills instead (#409) */
  --hud-bar-gap: 3px;
  --hud-bar-height: 4px;
  --hud-letter-line: calc(var(--hud-value-line) + var(--hud-bar-gap) + var(--hud-bar-height));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 8px;
}

.hud-item {
  background: rgba(18, 24, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned, so LETTER (which has no bar) keeps its label and letter level with the timers' */
  justify-content: flex-start;
  text-align: center;
  box-shadow: var(--shadow-lg);
  min-width: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hud-letter .prev-move-chain-flow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: var(--hud-letter-line);
}

.hud-letter .prev-init-chip {
  width: 26px;
  height: 26px;
  font-size: 0.9rem;
  font-weight: 800;
  border-radius: 6px;
  background: rgba(18, 23, 41, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hud-letter .prev-flow-arrow {
  font-size: 0.85rem;
  color: #22c3e6;
  font-weight: 900;
  margin: 0 1px;
  flex-shrink: 0;
}

.hud-letter .glow-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--hud-letter-line);
  line-height: var(--hud-letter-line);
  font-weight: 900;
  color: #ffce2e;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.hud-letter .prev-target-chip {
  width: auto;
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  color: #ffce2e;
  font-size: inherit;
  line-height: inherit;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
  display: inline-block;
}

/* In arcade mode, the HUD letter flow shows strictly two letters (previous letter -> target letter) (#629) */
html.arcade-ready .hud-letter .prev-init-dot {
  display: none !important;
}

html.arcade-ready .hud-letter #prev-init-first:not(.hidden) ~ #prev-init-last {
  display: none !important;
}

/* Animations for HUD chain letter transitions */
@keyframes hud-chip-pop {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  60% {
    transform: scale(1.18);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes hud-chip-slide-left {
  0% {
    transform: translateX(16px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.chip-pop-in {
  animation: hud-chip-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.chip-slide-in {
  animation: hud-chip-slide-left 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .chip-pop-in,
  .chip-slide-in {
    animation: none !important;
  }
}

.hud-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-subtle);
  line-height: 1;
  margin-bottom: 2px;
  white-space: nowrap;
}

/* Both clocks sit in a line of the same height, so they share one line */
.timer-display {
  line-height: var(--hud-value-line);
}

/* The current letter is the largest value, with its gold glow. It has no bar, so it fills its box
   from the label down to where the clocks' bar ends, and the box stays as tall as theirs (#409) */
.glow-letter {
  font-size: var(--hud-letter-line);
  line-height: var(--hud-letter-line);
  font-weight: 900;
  color: #ffce2e;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.timer-display {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--text-main);
}

.match-timer-num {
  font-family: var(--font-family);
  font-size: 1.2rem;
  font-weight: 900;
  color: #60a5fa;
  letter-spacing: 0.5px;
}

.match-timer-urgent {
  color: #f87171 !important;
  animation: pulseUrgentMatch 1s infinite alternate;
}

@keyframes pulseUrgentMatch {
  from { transform: scale(1); text-shadow: 0 0 4px rgba(239, 68, 68, 0.4); }
  to { transform: scale(1.05); text-shadow: 0 0 12px rgba(239, 68, 68, 0.9); }
}

.timer-bar-track {
  width: 100%;
  max-width: 90px;
  height: var(--hud-bar-height);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  margin-top: var(--hud-bar-gap);
  overflow: hidden;
}

.timer-bar-fill {
  height: 100%;
  background: var(--accent-cyan);
  width: 100%;
  border-radius: 9999px;
  transition: width 1s linear, background-color 0.3s ease;
}

.match-timer-bar-fill {
  background: #3b82f6;
}

.gameover-reason-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  margin: -6px auto 12px;
  width: fit-content;
  text-transform: uppercase;
}

.direction-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.dir-forward {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.dir-reverse {
  background: rgba(255, 59, 107, 0.2);
  color: #ff3b6b;
  border: 1px solid rgba(255, 59, 107, 0.4);
  animation: pulseReverse 1s infinite alternate;
}

@keyframes pulseReverse {
  from { box-shadow: 0 0 4px rgba(255, 59, 107, 0.4); }
  to { box-shadow: 0 0 12px rgba(255, 59, 107, 0.8); }
}

/* Read by screen readers, never seen (the arcade's reversal announcement, #629) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PLAYERS CAROUSEL */
.players-carousel-container {
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}

.players-carousel {
  display: flex;
  gap: 10px;
}

.player-turn-badge {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.player-turn-badge.active-turn {
  border-color: var(--accent-gold);
  background: rgba(255, 206, 46, 0.12);
  box-shadow: 0 0 14px rgba(255, 206, 46, 0.3);
  transform: translateY(-2px);
}

.player-turn-badge.eliminated {
  opacity: 0.45;
  filter: grayscale(1);
}

.turn-badge-avatar {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.turn-badge-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.turn-badge-name {
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-badge-lives {
  font-size: 0.72rem;
  letter-spacing: 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* CHAIN STATUS SUB-BAR (Direction + Initials Flow) */
.chain-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px;
}

.chain-status-dir {
  display: flex;
  align-items: center;
}

/* TURN ACTION CARD */
.turn-action-card {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(18, 24, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  padding: 18px 16px;
  position: relative;
}

/* My own turn (#523): a gold ring and glow around the card, and a "Your turn!" tag on its top edge.
   Both sit outside the layout (a pseudo-element and an absolutely placed tag), so the card keeps its
   exact size and place, which the phone keyboard layout measures (#408, #460, #482). The pulse fades
   the ring's opacity only, which the compositor animates without repainting the card */
.turn-action-card.is-my-turn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent-gold);
  border-radius: inherit;
  box-shadow: 0 0 18px rgba(255, 206, 46, 0.55), 0 0 40px rgba(255, 206, 46, 0.22);
  pointer-events: none;
  animation: my-turn-glow-pulse 1.6s ease-in-out infinite;
}

@keyframes my-turn-glow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.my-turn-tag {
  display: none;
}

/* Centered on the card's top edge; 16px tall, so it never reaches the HUD 8px above the card on a phone */
.turn-action-card.is-my-turn .my-turn-tag {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 2px 12px;
  border-radius: var(--radius-full);
  background: var(--accent-gold);
  color: var(--bg-dark);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(255, 206, 46, 0.6);
  pointer-events: none;
}

.turn-action-card.is-my-turn {
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .turn-action-card.is-my-turn::after { animation: none; }
}

/* Same gold treatment as the active player's badge in the carousel */
.turn-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  background: rgba(255, 206, 46, 0.12);
  box-shadow: 0 0 14px rgba(255, 206, 46, 0.3);
}

/* On your own turn the input form says it all: keep the heading for screen readers only.
   The Previous Play card's full sentence is for screen readers only too (#335) */
.turn-prompt.is-own-turn,
.prev-move-summary {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.turn-player-avatar {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.turn-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.turn-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -0.3px;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3em;
  /* A long nickname with no space breaks inside the box instead of running under the typing bubble (#267) */
  overflow-wrap: anywhere;
}

.active-player-name {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--text-main);
}

.turn-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: var(--text-main);
}

.instruction-lead {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.turn-up-next {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffce2e;
  letter-spacing: 0.2px;
  animation: fadeIn 0.25s ease;
}

/* Typing indicator: a chat-style bubble with three dots bouncing in a wave (#137, #143),
   at the right end of the heading row (#267) */
.turn-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(34, 195, 230, 0.16);
  border: 1px solid rgba(34, 195, 230, 0.4);
}

/* Hidden but still holding its space, so the heading doesn't reflow when typing starts or stops */
.turn-typing.is-idle { visibility: hidden; }

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-cyan);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dot { animation: none; opacity: 0.8; }
}

.letter-pill {
  display: inline-block;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #ffce2e;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 1.1rem;
  font-weight: 900;
}

/* PREVIOUS MOVE BANNER (Full Width Streamlined Row) */
.previous-move-banner {
  background: rgba(10, 14, 24, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.25s ease;
}

.previous-move-banner.is-first-turn {
  background: rgba(147, 51, 234, 0.08);
  border-color: rgba(147, 51, 234, 0.25);
  padding: 10px 14px;
}

.prev-first-turn-msg {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.prev-first-turn-msg strong {
  color: var(--accent-gold);
  font-weight: 800;
}

.prev-played-view {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.prev-move-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  font-size: 0.95rem;
}

/* One row: avatar, short muted player name, the played name, its icons and the points (#335) */
.prev-move-player {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.25;
}

.prev-player-avatar,
.prev-name-separator,
.prev-move-icon {
  flex-shrink: 0;
  line-height: 1;
}

.prev-player-avatar {
  font-size: 1rem;
}

.prev-move-icon {
  font-size: 0.8rem;
}

/* The player name gives way first, down to a few letters, so the played name keeps its space */
.prev-player-name {
  flex: 0 100 auto;
  min-width: 2.5em;
  max-width: 6.5em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The played name carries neutral styling so it doesn't distract from the active turn (#629) */
.prev-celeb-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-main);
  text-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-prompt.is-own-turn {
  cursor: pointer;
}

/* A waiting player taps the played name to see who it is (#360) */
.prev-celeb-name.can-open-overview {
  cursor: pointer;
}

.prev-celeb-name.can-open-overview:focus-visible {
  outline: 2px solid var(--accent-cyan-hover);
  outline-offset: 1px;
  border-radius: 4px;
}

/* CHAIN FLOW INITIAL CHIPS */
.prev-move-chain-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.prev-init-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(18, 23, 41, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-main);
}

.prev-init-chip.highlight-letter {
  background: rgba(255, 206, 46, 0.15);
  border-color: rgba(255, 206, 46, 0.6);
  color: #ffce2e;
}

.prev-init-dot {
  color: var(--text-subtle);
  font-size: 1rem;
}

.prev-flow-arrow {
  color: #22c3e6;
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 1px;
}

.prev-target-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: #9333ea;
  border-radius: 10px;
  font-weight: 900;
  font-size: 1.05rem;
  color: white;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}

.submit-name-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.2s ease;
}

.input-letter-lock {
  display: flex;
  align-items: center;
  background: rgba(10, 14, 24, 0.85);
  border: 2px solid rgba(147, 51, 234, 0.5);
  border-radius: var(--radius-md);
  padding: 6px 12px 6px 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 0 16px rgba(147, 51, 234, 0.2);
}

.input-letter-lock:focus-within {
  border-color: rgba(147, 51, 234, 0.9);
  box-shadow: 0 0 22px rgba(147, 51, 234, 0.4);
  background: rgba(10, 14, 24, 0.95);
}

.lock-letter {
  background: linear-gradient(135deg, #ffce2e, #ffce2e);
  color: #0b0f19;
  font-weight: 900;
  font-size: 1.45rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 12px;
  box-shadow: 0 2px 10px rgba(255, 206, 46, 0.4);
  flex-shrink: 0;
}

.input-letter-lock input {
  flex: 1;
  /* A text input's default min width is its intrinsic size (~20 characters); without this it
     overflows the box on phones and pushes the clear button outside (#237) */
  min-width: 0;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 1.15rem;
  font-weight: 600;
  font-family: inherit;
  outline: none;
}

.input-letter-lock input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}

.btn-clear {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}

.btn-clear:hover {
  color: var(--text-main);
}

.turn-buttons-row {
  display: flex;
  gap: 10px;
}

/* The box and buttons show only on your own turn (#226); fade them in rather than pop */
.submit-name-form .input-letter-lock {
  animation: inputLockFadeIn 0.2s ease;
}

@keyframes inputLockFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.turn-buttons-row {
  animation: fadeIn 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .submit-name-form .input-letter-lock,
  .turn-buttons-row {
    animation: none;
  }
}

.btn-submit {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.btn-danger-outline {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.btn-submit.loading {
  opacity: 0.85;
  cursor: wait;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  animation: btnSpin 0.7s linear infinite;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* #329: the welcome and join buttons while the server checks the player's name */
.menu-actions button:disabled,
#btn-modal-submit-join:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

button.btn-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: wait;
}

.btn-danger-outline {
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
}

.turn-feedback {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
}

.turn-feedback.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.turn-feedback.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.turn-feedback.warning {
  background: rgba(255, 206, 46, 0.15);
  border: 1px solid rgba(255, 206, 46, 0.3);
  color: #fcd34d;
}

/* OVERRIDE CARD */
.override-card {
  background: rgba(255, 206, 46, 0.12);
  border: 1px solid rgba(255, 206, 46, 0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.override-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.override-icon {
  font-size: 1.3rem;
}

.override-text {
  display: flex;
  flex-direction: column;
}

.override-text small {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.btn-accept-chip {
  background: #10b981;
  color: white;
  border: none;
}

.btn-ghost-chip {
  background: transparent;
  color: var(--text-muted);
}

/* CHAIN TIMELINE */
.chain-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  min-height: 26px;
}

.chain-header .turn-up-next {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffce2e;
  letter-spacing: 0.2px;
  animation: fadeIn 0.25s ease;
}

.chain-header .turn-your-turn {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffce2e;
  letter-spacing: 0.2px;
  animation: pulseYourTurn 1.6s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255, 206, 46, 0.6);
}

.chain-header .turn-your-turn.hidden {
  display: none !important;
}

@keyframes pulseYourTurn {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.04);
  }
}

.chain-header h3,
.chain-header .chain-count-heading {
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.chain-subtitle {
  display: none;
}

.chain-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--played-list-gap);
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

.empty-chain-hint {
  text-align: center;
  padding: 24px;
  color: var(--text-subtle);
  font-size: 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.chain-card {
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--played-row-radius);
  padding: var(--played-row-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--played-row-gap);
  /* The photo is no taller than the game-over row's two-line name block, so a card is no taller than that row (#637) */
  --chain-thumb-size: 36px;
  transition: background 0.5s ease, border-color 0.5s ease;
}

#chain-timeline .chain-card:first-child {
  animation: slideInDown 0.25s ease-out;
}

.chain-card.is-latest {
  border-color: rgba(212, 0, 255, 0.35);
}

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* A reversal keeps its faint tint but not a pink outline: its arrows icon already marks it (#637) */
.chain-card.is-reverse {
  background: var(--reversal-card-tint);
}

.chain-card.is-voted {
  border-color: rgba(255, 206, 46, 0.35);
}

.chain-card.is-reverse.is-voted {
  box-shadow: 0 0 10px rgba(255, 206, 46, 0.15);
}

.chain-card.is-voted {
  border-color: rgba(255, 206, 46, 0.35);
}

.chain-card-left {
  display: flex;
  align-items: center;
  gap: var(--played-row-gap);
  flex: 1;
  /* Lets the description line shrink and cut off instead of pushing the card wider (#637) */
  min-width: 0;
}

.chain-thumb {
  width: var(--chain-thumb-size);
  height: var(--chain-thumb-size);
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.chain-thumb-placeholder {
  width: var(--chain-thumb-size);
  height: var(--chain-thumb-size);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.chain-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.chain-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chain-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-main);
}

.chain-voted-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #ffce2e;
  background: rgba(255, 206, 46, 0.15);
  border: 1px solid rgba(255, 206, 46, 0.4);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* One line, so a long description never makes the card taller than a game-over row (#637); the full
   text stays in the card for screen readers, in its title, and in the overview a tap opens */
.chain-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The answer time sits beside the initials, so the right column is one row and never makes the card taller (#637) */
.chain-card-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* How long the player took to answer (#119); a set line height keeps the emoji from adding to the row */
.chain-response-time {
  font-size: 0.7rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chain-response-time.is-last-second {
  color: var(--accent-pink);
  text-shadow: 0 0 8px rgba(255, 59, 107, 0.45);
}

.chain-response-time.is-speed-bonus {
  color: var(--accent-gold);
  text-shadow: 0 0 8px rgba(255, 206, 46, 0.45);
}

/* A reversal's arrows lead the initials on their row, so every card's right column is two rows (#407) */
.initials-badge {
  display: flex;
  align-items: center;
  gap: 3px;
}

.init-box {
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.init-box.double-match {
  background: linear-gradient(135deg, #ff3b6b, #9333ea);
  color: white;
}

/* The reversal arrows alone: the card's reversal highlight and doubled initials already say what happened */
.reverse-tag {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
}

/* REACTIONS DOCK */
.reactions-dock {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(11, 16, 26, 0.75);
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.react-label {
  display: none;
}

.btn-react {
  background: transparent;
  border: none;
  /* Buttons don't inherit text color, so without it the reversal arrows (currentColor) draw black (#570) */
  color: var(--text-main);
  font-size: 1.35rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-react:active {
  transform: scale(1.3);
}

/* FLOATING REACTION */
.floating-reaction {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 15, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 9998;
  animation: floatUp 2.2s forwards cubic-bezier(0.1, 0.8, 0.3, 1);
}

.react-emoji {
  font-size: 1.4rem;
}

.react-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-main);
}

@keyframes floatUp {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateY(-30px) scale(1.1); }
  75% { opacity: 1; transform: translateY(-160px) scale(1); }
  100% { opacity: 0; transform: translateY(-220px) scale(0.8); }
}

/* REVERSE BANNER OVERLAY */
.reverse-banner {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(11, 15, 26, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  padding: 20px;
  box-sizing: border-box;
}

.reverse-banner.hidden {
  display: none;
}

.reverse-banner-content {
  background: linear-gradient(135deg, #ff3b6b, #9333ea, #3b82f6);
  padding: 28px 40px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 10px 40px rgba(255, 59, 107, 0.6);
  color: white;
  max-width: 90vw;
  box-sizing: border-box;
}

.reverse-icon-spin {
  font-size: 3.5rem;
  animation: spinSlow 1.5s infinite linear;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.reverse-banner-text {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.reverse-banner-sub {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.95;
  margin-top: 6px;
}

.reverse-banner-multiplier {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 12px;
  border-radius: 999px;
  background: rgba(255, 206, 46, 0.25);
  color: #fde68a;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 1px;
}

.banner-pop {
  animation: bannerPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes bannerPop {
  0% { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.fade-out {
  animation: fadeOut 0.4s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* GAME OVER SCREEN */
.gameover-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 20px;
}

.trophy-banner {
  display: none;
}

.gameover-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-main);
  margin: 0;
}

.winner-box {
  background: rgba(255, 206, 46, 0.1);
  border: 1px solid rgba(255, 206, 46, 0.3);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.winner-avatar {
  font-size: 3rem;
}

.winner-name {
  font-size: 1.5rem;
  font-weight: 800;
}

.winner-tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--accent-gold);
}

.winner-score {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-muted);
}

.winner-bonus {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent-gold);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}

.stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.stat-lbl {
  font-size: 0.72rem;
  color: var(--text-subtle);
  font-weight: 600;
}

.gameover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gameover-host-wait {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-subtle);
}

/* Who asked the host for a rematch (#521): names wrap, never widen the screen */
.gameover-rematch-requests {
  margin: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent-cyan);
  overflow-wrap: anywhere;
}

/* The guest's request, once made, reads as a pressed toggle */
#btn-request-rematch[aria-pressed="true"] {
  filter: saturate(0.6);
  opacity: 0.85;
}

/* Names played in the match (#256): a fixed-height box that scrolls on its own, so a long
   chain never pushes the action buttons below it further down */
.gameover-played-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gameover-played-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--played-list-gap);
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gameover-played-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--played-row-gap);
  padding: var(--played-row-padding);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--played-row-radius);
  color: var(--text-main);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gameover-played-item:hover,
.gameover-played-item:focus-visible {
  border-color: var(--accent-cyan-hover);
  outline: none;
}

.gameover-played-number {
  flex-shrink: 0;
  min-width: 1.6em;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-subtle);
}

.gameover-played-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gameover-played-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.gameover-played-meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
  overflow-wrap: anywhere;
}

.gameover-played-initials {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent-cyan);
}

.gameover-played-reverse {
  flex-shrink: 0;
  font-size: 0.9rem;
}

.chain-card.can-open-overview {
  cursor: pointer;
}

.chain-card.can-open-overview:hover,
.chain-card.can-open-overview:focus-visible {
  border-color: var(--accent-cyan-hover);
  outline: none;
}

/* MODAL */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(11, 15, 26, 0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-card {
  background: #172033;
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
}

.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Played name overview (#168) */
.played-name-card {
  max-width: 360px;
}

.played-name-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.played-name-heading h3 {
  overflow-wrap: anywhere;
}

.played-name-photo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: rgba(255, 255, 255, 0.05);
}

.played-name-photo.hidden {
  display: none;
}

.played-name-desc {
  color: var(--text-subtle);
  line-height: 1.5;
}

.rule-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rule-num {
  background: var(--primary);
  color: white;
  font-weight: 800;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.rule-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.rule-text strong {
  color: var(--text-main);
}

.rule-text code {
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  color: #ffce2e;
}

.rule-text em {
  color: #a5b4fc;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-footer button {
  width: 100%;
}

/* Join Room Invitation Modal */
.modal-join-card {
  max-width: 440px;
  overflow: visible;
}

.modal-join-card .modal-body {
  overflow: visible;
  max-height: none;
}

.join-modal-profile {
  position: relative;
  z-index: 20;
  margin-bottom: 0;
}

.join-modal-profile .avatar-selector {
  position: relative;
  z-index: 25;
}

.join-modal-profile .avatar-grid {
  z-index: 100;
}

.join-modal-desc {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.join-modal-footer {
  position: relative;
  z-index: 10;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hidden {
  display: none !important;
}

/* The SVG sprite only holds symbols for <use>; it takes no space. Not display: none, which some
   browsers also apply to what the symbols draw */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* The reversal arrows (#548): the size of the emoji they replace, in the surrounding text color */
.icon-reversal {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.125em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Mobile Keyboard Optimized Viewport Mode
   Triggered when virtual keyboard is active during gameplay on mobile
   ========================================================================== */
@media (max-width: 768px) {
  /* The header stays while typing so the menu is in reach during a turn (#266): one slim row around the
     full-size menu button, which keeps its tap target */
  body.keyboard-open .app-header {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  body.keyboard-open .logo-icon {
    width: 26px;
    height: 26px;
    font-size: 1rem;
  }

  body.keyboard-open .logo-title {
    font-size: 0.78rem;
  }

  /* The keyboard covers the bottom of the dynamic viewport on iOS, so the menu sizes to what is still
     visible (set from the visual viewport in app.js) less what lies above the menu (48 px: the slim
     header's menu button and the menu's 8 px offset) and an 8 px gap. It takes no room for a browser bar
     that may float over the page (--keyboard-accessory-reserve): with that room cut off on a phone whose
     bar sat outside the visible screen, the menu stopped at the turn card and hid its Connection row (#575) */
  body.keyboard-open .header-menu {
    max-height: calc(var(--visible-viewport-height, 100dvh) - 56px);
  }

  body.keyboard-open .app-container {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  body.keyboard-open #screen-game {
    gap: 8px;
  }

  /* Hide carousels, sub-bars, and history timeline so the HUD and turn card fit above the keyboard */
  body.keyboard-open .players-carousel-container,
  body.keyboard-open .chain-status-bar,
  body.keyboard-open .chain-section {
    display: none !important;
  }

  /* Compact HUD: single sleek row at top */
  body.keyboard-open .game-hud {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    margin-bottom: 0;
  }

  body.keyboard-open .hud-item {
    padding: 6px 10px;
    flex-direction: row;
    gap: 6px;
  }

  body.keyboard-open .hud-label {
    display: none;
  }

  body.keyboard-open .hud-letter {
    padding: 4px 10px;
  }

  body.keyboard-open .hud-letter::before {
    content: "LETTER";
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
  }

  body.keyboard-open .hud-letter .prev-move-chain-flow {
    gap: 4px;
    min-height: var(--hud-value-line);
  }

  body.keyboard-open .hud-letter .prev-init-chip {
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    border-radius: 5px;
  }

  body.keyboard-open .hud-letter .prev-flow-arrow {
    font-size: 0.75rem;
  }

  body.keyboard-open .glow-letter,
  body.keyboard-open .hud-letter .prev-target-chip {
    font-size: 1.35rem;
    line-height: var(--hud-value-line);
  }

  body.keyboard-open .hud-timer {
    flex-direction: column;
    padding: 4px 12px;
  }

  body.keyboard-open .timer-display {
    font-size: 1.15rem;
    line-height: 1;
  }

  body.keyboard-open .timer-bar-track {
    margin-top: 3px;
    height: 3px;
  }

  body.keyboard-open .hud-direction {
    padding: 4px 8px;
  }

  body.keyboard-open .direction-badge {
    padding: 2px 6px;
    font-size: 0.65rem;
    gap: 4px;
  }

  /* Lock page scrolling while the phone keyboard is open so the HUD stays pinned at the top
     and the user cannot accidentally scroll the name input or buttons off screen */
  html:has(body.keyboard-open) {
    height: var(--visible-viewport-height, 100dvh);
    max-height: var(--visible-viewport-height, 100dvh);
    overflow: hidden;
  }

  body.keyboard-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Once app.js has measured the space left above the keyboard (keyboard-height-known), the page
     fills exactly that space and the turn card sits at its foot, a short reach from the keys (#408).
     The HUD stays at the top. The keyboard covers the home indicator, so its inset is dropped; on
     Android and on iPhone Safari 26+ the card stays clear of the browser's bar over the keys (#451, #477) */
  body.keyboard-open.keyboard-height-known {
    height: var(--visible-viewport-height, 100dvh);
    max-height: var(--visible-viewport-height, 100dvh);
    min-height: var(--visible-viewport-height, 100dvh);
    overflow: hidden;
    padding-bottom: var(--keyboard-accessory-reserve);
  }

  body.keyboard-open.keyboard-height-known #screen-game {
    flex: 1;
  }

  body.keyboard-open.keyboard-height-known .turn-action-card {
    margin-top: auto;
  }

  /* A rejected name's message and the dispute card grow the card upward, above the name box,
     so the box and buttons stay put over the keyboard */
  body.keyboard-open.keyboard-height-known .submit-name-form {
    order: 1;
  }

  /* Compact Turn Card */
  body.keyboard-open .turn-action-card {
    padding: 10px 14px;
    gap: 8px;
    background: rgba(11, 15, 26, 0.96);
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
    /* Fade opacity without transform: translateY to prevent iOS Safari caret displacement (#629) */
    animation: keyboardCardFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  body.keyboard-open .submit-name-form .input-letter-lock {
    animation: none;
  }

  body.keyboard-open .turn-prompt {
    gap: 6px;
    padding: 4px 8px;
    box-shadow: none;
  }

  body.keyboard-open .turn-player-avatar {
    font-size: 1rem;
  }

  body.keyboard-open .turn-prompt-text {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }

  body.keyboard-open .turn-title {
    font-size: 0.88rem;
  }

  body.keyboard-open .instruction-lead {
    font-size: 0.78rem;
  }

  body.keyboard-open .letter-pill {
    font-size: 0.85rem;
    padding: 1px 6px;
  }

  body.keyboard-open .previous-move-banner {
    padding: 4px 8px;
    gap: 2px;
  }

  body.keyboard-open .prev-first-turn-msg {
    font-size: 0.76rem;
  }

  body.keyboard-open .prev-move-content {
    gap: 6px;
  }

  body.keyboard-open .prev-player-name {
    font-size: 0.75rem;
  }

  body.keyboard-open .prev-celeb-name {
    font-size: 1.05rem;
  }

  body.keyboard-open .prev-init-chip {
    width: 20px;
    height: 20px;
    font-size: 0.72rem;
  }

  body.keyboard-open .prev-target-chip {
    width: 22px;
    height: 22px;
    font-size: 0.78rem;
  }

  body.keyboard-open .submit-name-form {
    gap: 8px;
  }

  body.keyboard-open .lock-letter {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    margin-right: 6px;
  }

  body.keyboard-open #input-celebrity-name {
    font-size: 1rem;
    height: 38px;
  }

  body.keyboard-open .turn-buttons-row {
    gap: 6px;
  }

  body.keyboard-open .btn-submit,
  body.keyboard-open .btn-danger-outline {
    padding: 9px 12px;
    font-size: 0.86rem;
  }

  /* No breakdown chips while typing: they would grow and then shrink the card under the
     player's thumbs. The play's total stays beside it (#408) */
  body.keyboard-open #turn-score-toast {
    display: none;
  }

  body.keyboard-open .prev-move-points {
    font-size: 0.85rem;
  }

  body.keyboard-open .turn-feedback {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  body.keyboard-open .override-card {
    padding: 8px 10px;
    gap: 6px;
  }

  /* Reverse Banner Mobile Adjustments: a smaller card, still centered on the visible screen like on
     desktop; showReverseBanner closes the keyboard first, so it need not sit above it (#474) */
  .reverse-banner-content {
    max-width: 90vw;
    padding: 18px 24px;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(255, 59, 107, 0.55);
  }

  .reverse-icon-spin {
    font-size: 2.4rem;
  }

  .reverse-banner-text {
    font-size: 2rem;
    letter-spacing: 1.5px;
  }

  .reverse-banner-sub {
    font-size: 0.88rem;
    line-height: 1.35;
    margin-top: 4px;
  }
}

/* ==========================================================================
   iPhone Safari page zoom (aA menu) (#223)
   Zoom narrows the layout width: a 390px iPhone lays out at 312px (125%),
   260px (150%) and 195px (200%). Shrink rather than stack so the header
   items stay apart, the HUD keeps one row and the next letter stays visible.
   ========================================================================== */
@media (max-width: 360px) {
  .app-header {
    padding: 10px clamp(8px, 3vw, 14px);
  }
  .logo-area {
    gap: 6px;
  }
  .logo-icon {
    width: clamp(26px, 10vw, 32px);
    height: clamp(26px, 10vw, 32px);
    font-size: clamp(0.95rem, 5vw, 1.3rem);
  }
  .logo-title {
    font-size: 0.78rem;
  }
  .header-actions {
    gap: clamp(3px, 1.2vw, 6px);
  }
  .btn-icon {
    width: clamp(26px, 10vw, 34px);
    height: clamp(26px, 10vw, 34px);
    font-size: clamp(0.75rem, 4vw, 0.95rem);
  }

  .app-container {
    padding-left: clamp(8px, 3vw, 16px);
    padding-right: clamp(8px, 3vw, 16px);
  }

  /* One compact row, as in the keyboard-open HUD */
  .game-hud {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    --hud-value-line: clamp(1.05rem, 7vw, 1.5rem);
  }
  .hud-item {
    padding: 5px 4px;
  }
  .hud-label {
    font-size: 0.6rem;
    letter-spacing: 0.3px;
  }
  .timer-display {
    font-size: clamp(1rem, 6vw, 1.3rem);
  }
  .match-timer-num {
    font-size: clamp(1rem, 6vw, 1.2rem);
  }

  /* Wrap the direction badge above the chain so the next letter is never cut off */
  .chain-status-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .direction-badge {
    padding: 4px 10px;
    font-size: 0.72rem;
  }
  .prev-move-chain-flow {
    gap: 4px;
  }
  .prev-init-chip,
  .prev-target-chip {
    width: clamp(26px, 11vw, 34px);
    height: clamp(26px, 11vw, 34px);
    font-size: 0.85rem;
  }

  .lobby-settings {
    padding: 14px clamp(10px, 4vw, 20px);
  }
  .setting-item select {
    padding: 8px;
    font-size: 0.78rem;
  }
}

/* 150% zoom and beyond: drop the title, which no longer fits */
@media (max-width: 280px) {
  .logo-text {
    display: none;
  }
  .card,
  .turn-action-card {
    padding: 12px 10px;
  }
  .turn-prompt {
    padding: 8px 10px;
  }
  .turn-title {
    font-size: 1.15rem;
  }
  .setting-item select {
    font-size: 0.72rem;
  }
}

@keyframes keyboardCardFadeIn {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUpFast {
  from {
    opacity: 0.8;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Majority Dispute Voting Modal (CNC-01)
   ========================================================================== */
.modal-dispute-card {
  max-width: 440px;
  border: 1px solid rgba(255, 206, 46, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 206, 46, 0.15);
  animation: slideUpFast 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.dispute-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dispute-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 206, 46, 0.15);
  border: 1px solid rgba(255, 206, 46, 0.4);
  color: #ffce2e;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.dispute-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: all 0.2s ease;
}

.dispute-timer-pill.urgent {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  animation: pulseDisputeTimer 1s infinite alternate;
}

.dispute-modal-body {
  padding: 18px 20px 14px;
}

.dispute-submitter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.dispute-submitter-avatar {
  font-size: 1.25rem;
}

.dispute-candidate-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  margin-bottom: 18px;
}

.dispute-candidate-name {
  font-size: 1.55rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  word-break: break-word;
}

.dispute-explainer {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.dispute-tally-container {
  margin-bottom: 4px;
}

.dispute-tally-bar-wrapper {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
}

.dispute-tally-bar {
  height: 100%;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dispute-tally-accept {
  background: linear-gradient(90deg, #10b981, #059669);
}

.dispute-tally-reject {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}

.dispute-tally-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
}

.dispute-stat-accept {
  color: #34d399;
}

.dispute-stat-reject {
  color: #f87171;
}

.dispute-stat-target {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.dispute-vote-feedback {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  animation: fadeIn 0.2s ease;
}

.dispute-vote-feedback.success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.dispute-vote-feedback.error {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.dispute-submitter-notice {
  padding: 0 20px 20px 20px;
  box-sizing: border-box;
  animation: fadeIn 0.2s ease;
}

.submitter-notice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-sizing: border-box;
  width: 100%;
}

.submitter-notice-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  animation: pulseDisputeTimer 1.2s infinite alternate ease-in-out;
}

.submitter-notice-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.submitter-notice-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #ffce2e;
}

.submitter-notice-desc {
  font-size: 0.76rem;
  color: var(--text-subtle);
  line-height: 1.35;
}

.dispute-modal-actions {
  display: flex;
  gap: 12px;
  padding: 0 20px 20px;
}

.btn-vote {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-vote:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-vote-accept {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.btn-vote-accept:not(:disabled):hover {
  background: rgba(16, 185, 129, 0.28);
  border-color: #10b981;
  transform: translateY(-1px);
}

.btn-vote-accept.selected {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
  opacity: 1;
}

.btn-vote-reject {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.btn-vote-reject:not(:disabled):hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
  transform: translateY(-1px);
}

.btn-vote-reject.selected {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  opacity: 1;
}

@keyframes pulseDisputeTimer {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0.85; }
}

/* ==========================================================================
   CNC-02: ENHANCED MULTI-TIER SCORING & COMBO SYSTEM STYLES
   ========================================================================== */

/* 1. Custom Scoring Expansion Panel (Lobby) */
.custom-scoring-panel {
  background: rgba(11, 15, 26, 0.65);
  border: 1px solid rgba(147, 51, 234, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: fadeInDown 0.25s ease-out;
}

.custom-scoring-panel.hidden {
  display: none;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.custom-scoring-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.custom-scoring-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #a5b4fc;
  letter-spacing: 0.5px;
}

.custom-scoring-hint {
  font-size: 0.68rem;
  color: var(--text-subtle);
}

.custom-scoring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.custom-scoring-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-scoring-field label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
}

.custom-scoring-field input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s;
}

/* iOS zooms the page when a field under 16px gets focus (#288) */
@media (max-width: 768px) {
  .custom-scoring-field input {
    font-size: 1rem;
  }
}

.custom-scoring-field input:focus {
  border-color: var(--primary);
  background: rgba(147, 51, 234, 0.1);
}

/* 2. Carousel Player Score & Streak Indicators. A slimmer streak badge and wider gaps give the
   name, badge, hearts and points room on a phone without making the card wider or taller (#539) */
.turn-badge-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.turn-badge-streak {
  font-size: 0.66rem;
  font-weight: 800;
  background: rgba(255, 206, 46, 0.12);
  border: 1px solid rgba(255, 206, 46, 0.35);
  color: #ffce2e;
  padding: 0 5px;
  border-radius: var(--radius-full);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1.2;
  /* One line of text and the border: the height #539 gave the pill, kept now that its glyphs' boxes are trimmed */
  height: calc(1lh + 2px);
  flex-shrink: 0;
}

/* A full-size colour emoji stands half again as tall as the bold count and hangs below it, so the
   flame is drawn smaller (#547) */
.turn-badge-streak-flame {
  font-size: 0.75em;
}

/* Each engine sets the flame and the bold digits at its own height in their line boxes, and Chromium
   sets them high, leaving the pill emptier below them. Trimmed to the text's cap height and baseline,
   both boxes hug their glyphs, so the pill centers what is drawn (#547) */
.turn-badge-streak-flame,
.turn-badge-streak-count {
  text-box: trim-both cap alphabetic;
}

.turn-badge-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  white-space: nowrap;
}

.turn-badge-score {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent-gold);
  background: rgba(255, 206, 46, 0.12);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 3. Animated Turn Score Breakdown, in the Previous Play card under the celebrity name (#263) */
.turn-score-toast {
  display: flex;
  width: 100%;
  animation: scoreToastPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.turn-score-toast.hidden {
  display: none;
}

@keyframes scoreToastPop {
  0% { opacity: 0; transform: scale(0.85) translateY(10px); }
  70% { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.prev-move-points {
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  background: linear-gradient(135deg, #fcd34d, #ffce2e, #ff3b6b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 206, 46, 0.3);
}

.score-toast-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-start;
}

/* Compact chips (#334): icon and points only, so a play's chips fit one row on a phone */
.score-chip {
  font-size: 0.66rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* A flex chip drops the space after its icon, so the reversal arrows keep a space's width (#548) */
.score-chip .icon-reversal {
  margin-right: 0.3em;
}

.score-chip.chip-base {
  background: rgba(147, 51, 234, 0.2);
  color: #c7d2fe;
  border: 1px solid rgba(147, 51, 234, 0.35);
}

.score-chip.chip-reversal {
  background: rgba(255, 59, 107, 0.2);
  color: #fbcfe8;
  border: 1px solid rgba(255, 59, 107, 0.45);
}

.score-chip.chip-reversal-chain {
  background: rgba(255, 59, 107, 0.32);
  color: #fde68a;
  border: 1px solid rgba(255, 206, 46, 0.55);
}

.score-chip.chip-mononym {
  background: rgba(255, 206, 46, 0.2);
  color: #fef3c7;
  border: 1px solid rgba(255, 206, 46, 0.5);
}

/* Header menu (#249): one button holds the header actions, the connection status and, in a match, Leave and End match */
/* The menu hangs from the right edge of the header, so it never runs off a narrow screen */
.header-actions { position: relative; }

.btn-header-menu { position: relative; font-size: 1.2rem; }

/* A connection problem shows on the closed menu button as a small dot */
.menu-status-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark);
}

.btn-header-menu[data-state="connected"] .menu-status-dot { display: none; }
.btn-header-menu[data-state="limited"] .menu-status-dot { background: var(--accent-gold); }
.btn-header-menu[data-state="disconnected"] .menu-status-dot { background: #ef4444; animation: connection-blink 1s ease-in-out infinite; }

.header-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 960;
  width: 260px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: 8px;
  /* Opaque: the header's own backdrop blur keeps a nested one from blurring the page behind, and any
     see-through lets the turn card's glow and text show through the menu on a phone (#575) */
  background: rgb(15, 20, 32);
  border: 1px solid var(--bg-card-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.header-menu.hidden { display: none; }

.player-menu-item-danger { color: #fca5a5; }

.player-menu-item-danger:hover,
.player-menu-item-danger:focus-visible { background: rgba(239, 68, 68, 0.15); }

/* Connection status (#139): one collapsible row at the bottom of the header menu (#260) */
.connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}

.connection-status[data-state="connected"] .connection-dot { background: #22c55e; box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
.connection-status[data-state="limited"] .connection-dot { background: var(--accent-gold); box-shadow: 0 0 8px rgba(255, 206, 46, 0.6); }
.connection-status[data-state="disconnected"] .connection-dot { background: #ef4444; animation: connection-blink 1s ease-in-out infinite; }

@keyframes connection-blink { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .connection-status[data-state="disconnected"] .connection-dot,
  .btn-header-menu[data-state="disconnected"] .menu-status-dot { animation: none; }
}

.connection-panel {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--bg-card-border);
}

/* Dot, label and chevron on one line; any note on what is wrong goes under the label, where it fits a phone in full */
.connection-toggle {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: 100%;
  padding: 10px 8px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.connection-toggle:hover,
.connection-toggle:focus-visible { background: rgba(255, 255, 255, 0.08); }

.connection-summary {
  grid-column: 2 / 4;
  grid-row: 2;
  margin-top: 2px;
  font-weight: 600;
}

.connection-status[data-state="limited"] .connection-summary { color: #fcd34d; }
.connection-status[data-state="disconnected"] .connection-summary { color: #fca5a5; }

.connection-chevron {
  padding-left: 8px;
  transition: transform 0.2s ease;
}

.connection-toggle[aria-expanded="true"] .connection-chevron { transform: rotate(180deg); }

.connection-rows { padding: 0 8px 4px; }

.connection-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0;
  font-size: 0.85rem;
}

.connection-row + .connection-row { border-top: 1px solid var(--bg-card-border); }
.connection-row-name { font-weight: 700; }
.connection-row-state { color: #86efac; }
.connection-row[data-state="down"] .connection-row-state { color: #fcd34d; }
.connection-row[data-service="server"][data-state="down"] .connection-row-state { color: #fca5a5; }

/* Only bots are left: end-the-match prompt (#138) */
.bots-only-prompt {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 14, 24, 0.6);
  backdrop-filter: blur(4px);
}

.bots-only-prompt.hidden { display: none; }

.bots-only-card {
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.bots-only-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 6px;
}

.bots-only-text {
  color: var(--text-muted);
  margin: 0 0 16px;
}

.bots-only-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Last-second save (#120) */
.score-chip.chip-last-second {
  background: rgba(255, 59, 107, 0.2);
  color: #fbcfe8;
  border: 1px solid rgba(255, 59, 107, 0.45);
}

.last-second-callout {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 59, 107, 0.6);
  background: rgba(20, 12, 30, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(255, 59, 107, 0.3);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.last-second-callout.hidden { display: none; }
.last-second-callout.fade-out { opacity: 0; }

.last-second-callout.callout-pop {
  animation: callout-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.last-second-callout-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent-pink);
}

.last-second-callout-details {
  font-size: 0.85rem;
  color: var(--text-muted);
}

@keyframes callout-pop {
  from { transform: translateX(-50%) scale(0.6); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .last-second-callout.callout-pop { animation: none; }
}

.score-chip.chip-speed {
  background: rgba(34, 195, 230, 0.2);
  color: #a5f3fc;
  border: 1px solid rgba(34, 195, 230, 0.45);
}

.score-chip.chip-streak {
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

/* 4. Match Leaderboard & Detailed Scoring Breakdown (Game Over) */
.leaderboard-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

/* Each Game Over section's yellow label is its heading (#389). .gameover-card centers its text;
   a label that wraps on a phone fills the row, so it would center its lines instead of starting
   at the cards' left edge like a one-line label (#358) */
.leaderboard-tag {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--accent-gold);
  text-align: left;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leaderboard-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}

.leaderboard-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.leaderboard-card.rank-1 {
  background: linear-gradient(135deg, rgba(255, 206, 46, 0.12), rgba(18, 23, 41, 0.9));
  border-color: rgba(255, 206, 46, 0.4);
  box-shadow: 0 4px 16px rgba(255, 206, 46, 0.15);
}

/* The header row is a button that opens the score breakdown (#330); it keeps the card's own
   look instead of a button's background, border, font and centered text */
.leaderboard-card-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.leaderboard-card-main:focus-visible {
  outline: 2px solid var(--accent-cyan-hover);
  outline-offset: 4px;
}

/* The points and chevron never wrap or shrink, so the chevron sits at the card's right edge,
   centered, on every card; a long name wraps on the left instead (#353) */
.leaderboard-player-right {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  column-gap: 8px;
}

.leaderboard-expand-chevron {
  font-size: 0.85rem;
  color: var(--text-subtle);
  transition: transform 0.2s ease;
}

.leaderboard-card-main[aria-expanded="true"] .leaderboard-expand-chevron {
  transform: rotate(180deg);
}

.leaderboard-player-left {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.leaderboard-rank-badge {
  font-size: 1.15rem;
  font-weight: 900;
  width: 32px;
  height: 32px;
  /* A long name must not squeeze the tile, so every rank lines up card to card */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

/* Ranks shown as text (4th and below) are wider than a medal emoji, so a smaller size gives
   them the same space inside the tile (#337) */
.leaderboard-rank-badge--text {
  font-size: 0.75rem;
}

.leaderboard-card.rank-1 .leaderboard-rank-badge {
  background: rgba(255, 206, 46, 0.25);
}

.leaderboard-avatar {
  font-size: 1.35rem;
}

.leaderboard-name-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  /* .gameover-card centers its text; a standings name starts with the line under it (#332) */
  text-align: left;
}

/* The status and Top Score icons stay right of the name, even when a long name wraps (#353) */
.leaderboard-player-name {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 800;
}

.leaderboard-player-name-text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* A little smaller than the name, so a short name and its icons fit on one line at 375px */
.leaderboard-name-icons {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  font-size: 0.8rem;
}

.leaderboard-player-sub {
  font-size: 0.7rem;
  color: var(--text-subtle);
  white-space: nowrap;
}

.leaderboard-total-pts {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* On a phone the one-line points leave the name room for itself and its icons (#353) */
@media (max-width: 440px) {
  .leaderboard-total-pts {
    font-size: 1rem;
  }
}

/* display: flex would otherwise show a closed breakdown */
.breakdown-chips-row[hidden] {
  display: none;
}

.breakdown-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.stat-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.stat-pill strong {
  color: var(--text-main);
}

/* Shown in place of the chips when a player scored nothing (#384) */
.breakdown-no-points {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Highest score of the match, shown on the champion card (#103) */
.top-score-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Near-miss teaser: urges a player who just missed the win to play again (#117) */
.near-miss-teaser {
  margin: 12px auto 0;
  padding: 10px 14px;
  max-width: 420px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--accent-gold);
  color: var(--accent-gold);
  font-weight: 700;
  text-align: center;
  animation: near-miss-pulse 1.6s ease-in-out 2;
}

@keyframes near-miss-pulse {
  50% { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .near-miss-teaser { animation: none; }
}

/* Starter Player Anticipation Roulette (CNC-15) */
.starter-anticipation-overlay {
  z-index: 9999;
  background: rgba(10, 14, 24, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.starter-anticipation-overlay.hidden {
  display: none !important;
}

.anticipation-card {
  background: linear-gradient(135deg, rgba(18, 23, 41, 0.95), rgba(11, 15, 26, 0.98));
  border: 2px solid rgba(255, 206, 46, 0.5);
  box-shadow: 0 0 40px rgba(255, 206, 46, 0.25), 0 20px 50px rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-lg, 18px);
  padding: 32px 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.anticipation-tag {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent-gold);
  text-transform: uppercase;
}

.anticipation-roulette-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  width: 100%;
  box-sizing: border-box;
  min-height: 140px;
  transition: all 0.15s ease;
}

.anticipation-roulette-display.landing {
  border-color: var(--accent-gold);
  background: rgba(255, 206, 46, 0.15);
  box-shadow: 0 0 25px rgba(255, 206, 46, 0.4);
  transform: scale(1.04);
}

.anticipation-avatar {
  font-size: 3.5rem;
  line-height: 1;
  display: inline-block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  transition: transform 0.1s ease;
}

.anticipation-roulette-display.landing .anticipation-avatar {
  animation: pulseAvatarContour 0.8s infinite alternate ease-in-out;
}

@keyframes pulseAvatarContour {
  from {
    filter: drop-shadow(0 0 4px rgba(255, 59, 107, 0.5));
  }
  to {
    filter: drop-shadow(0 0 14px rgba(255, 59, 107, 0.95)) drop-shadow(0 0 25px rgba(255, 59, 107, 0.45));
  }
}

.anticipation-name {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.3px;
}

.anticipation-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffce2e;
  animation: fadeIn 0.3s ease;
}

.announcement-sparkle {
  font-size: 1.2rem;
}


/* First-visit onboarding carousel (#149) */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 11, 20, 0.78);
  backdrop-filter: blur(6px);
}

.onboarding-overlay.hidden { display: none; }

#onboarding { --onboarding-card-max: 700px; }

/* One height for every step, so the card does not jump between steps (#172). dvh is the visible
   height on iOS Safari, where 100vh runs under the toolbars; the vh line is the fallback */
.onboarding-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: min(var(--onboarding-card-max), calc(100vh - 32px));
  height: min(var(--onboarding-card-max), calc(100dvh - 32px));
  overflow-y: auto;
  padding: 24px 20px;
  border-radius: 24px;
  border: 1px solid var(--bg-card-border);
  background: #121729;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.onboarding-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.onboarding-heading {
  display: inline-block;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: 33px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent-pink);
  background: var(--headline-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.onboarding-skip,
.onboarding-rules-link {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 2px;
  font-size: 14px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.onboarding-skip:hover,
.onboarding-rules-link:hover { color: var(--accent-cyan-hover); }

.onboarding-track {
  display: flex;
  flex: 1;
  min-height: 0;
}

.onboarding-step {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  animation: onboarding-in 0.25s ease;
}
.onboarding-step[hidden] { display: none; }

/* The space left under the text; each picture shrinks to fit it and keeps its shape */
.onboarding-media {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin-top: 14px;
  container-type: size;
}

.onboarding-shot {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--bg-card-border);
}

/* Sized from the media box, so the highlight rings (placed in %) stay on the picture */
.onboarding-shot img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100cqw - 2px);
  max-height: calc(100cqh - 2px);
}

/* Rings drawn over the screenshot where the player acts; positioned from highlights.json */
.onboarding-highlight {
  position: absolute;
  border: 3px solid var(--accent-pink);
  border-radius: 14px;
  box-shadow: 0 0 10px rgba(255, 59, 107, 0.7), 0 0 28px rgba(255, 59, 107, 0.45);
  pointer-events: none;
  animation: onboarding-pulse 1.6s ease-in-out infinite;
}

.onboarding-step-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-orange);
}

.onboarding-step h3 {
  margin: 8px 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.onboarding-step strong { color: var(--accent-gold); }

.onboarding-step p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.5;
  font-size: 17px;
}

.onboarding-top-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 14px;
  white-space: nowrap;
}

.onboarding-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.onboarding-nav button { width: 120px; height: 52px; padding: 0 8px; border-radius: 16px; font-size: 18px; white-space: nowrap; }
#btn-onboarding-next,
#btn-onboarding-done { background: var(--accent-cyan); color: var(--bg-dark); font-weight: 800; box-shadow: none; }
#btn-onboarding-back { background: var(--surface-secondary); border: 1px solid var(--bg-card-border); color: #6b7280; }
.onboarding-nav button:disabled { opacity: 0.4; cursor: default; }
.onboarding-nav .hidden { display: none; }

.onboarding-dots { display: flex; gap: 8px; }

.onboarding-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a4058;
  transition: background 0.2s ease, transform 0.2s ease;
}

.onboarding-dot.active {
  background: var(--accent-cyan);
}

/* Step 1: the turn drawn from the design canvas */
.onboarding-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.onboarding-demo-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-message);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.4;
}

.onboarding-demo-message svg { flex-shrink: 0; margin-top: 2px; color: var(--text-subtle); }
.onboarding-demo-message strong { color: var(--accent-gold); font-weight: 800; }

.onboarding-demo-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: -2px;
}

.onboarding-demo-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-full);
  background: var(--accent-pink);
  color: #1a0a08;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  box-shadow: 0 0 14px rgba(255, 59, 107, 0.5);
}

.onboarding-demo-pointer { margin: -1px 0 0 21px; fill: var(--accent-pink); }

.onboarding-demo-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 3px solid var(--accent-pink);
  border-radius: 14px;
  background: var(--surface-input);
  box-shadow: 0 0 10px rgba(255, 59, 107, 0.7), 0 0 28px rgba(255, 59, 107, 0.45), 0 0 56px rgba(255, 59, 107, 0.25);
}

.onboarding-demo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-gold);
  color: #111827;
  font-size: 20px;
  font-weight: 900;
}

.onboarding-demo-answer {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

.onboarding-demo-caret {
  display: inline-block;
  width: 2px;
  height: 22px;
  margin-left: 2px;
  border-radius: 1px;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(34, 195, 230, 0.7);
  animation: onboarding-blink 1.1s steps(1) infinite;
}

.onboarding-demo-clear { flex-shrink: 0; margin: 0 8px; color: var(--text-subtle); }

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

.onboarding-demo-submit,
.onboarding-demo-pass {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 12px;
  font-weight: 700;
}

.onboarding-demo-submit { flex: 1; background: var(--primary); color: #ffffff; font-size: 16px; }

.onboarding-demo-pass {
  gap: 6px;
  padding: 0 14px;
  border: 1px solid #40221f;
  background: #1c1215;
  color: #fca5a5;
  font-size: 15px;
}

.onboarding-demo-pass svg { fill: var(--danger); }

/* Step 4: hearts and points in place of a picture, at the same type as the other steps (#406).
   Each way to score is a tile with its value on the line below, two to a row, so the step fits the
   shared card height on a phone (#173, #191) */
.onboarding-scoring { margin-top: 8px; text-align: left; }
.onboarding-scoring-heading { margin: 0 0 4px; font-size: 15px; font-weight: 800; color: #ffffff; }
.onboarding-step .onboarding-scoring-hearts { margin-bottom: 12px; }
.onboarding-scoring-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 0;
}
.onboarding-scoring-points > div {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}
.onboarding-scoring-label { font-size: 15px; line-height: 1.2; color: var(--text-muted); white-space: nowrap; }
.onboarding-scoring-value { margin: 0; font-size: 17px; line-height: 1.2; font-weight: 800; color: var(--accent-gold); white-space: nowrap; }

/* Short phones (iPhone SE): tighter text and spacing leave room for the step's picture (#172) */
@media (max-height: 640px) {
  .onboarding-card { padding: 14px 16px; }
  .onboarding-top { margin-bottom: 4px; }
  .onboarding-heading { margin-bottom: 8px; font-size: 22px; }
  .onboarding-step h3 { margin: 4px 0; font-size: 18px; }
  .onboarding-step p { font-size: 15px; line-height: 1.4; }
  .onboarding-media { margin-top: 10px; }
  .onboarding-nav { margin-top: 10px; }
  .onboarding-nav button { height: 44px; font-size: 16px; }
  .onboarding-scoring { margin-top: 4px; }
  .onboarding-scoring-heading { margin-bottom: 2px; font-size: 13px; }
  .onboarding-scoring-points > div { padding: 3px 8px; }
  .onboarding-scoring-label { font-size: 13px; }
  .onboarding-scoring-value { font-size: 15px; }
}

@keyframes onboarding-blink {
  50% { opacity: 0; }
}

@keyframes onboarding-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes onboarding-pulse {
  50% { box-shadow: 0 0 14px rgba(255, 59, 107, 0.85), 0 0 56px rgba(255, 59, 107, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-step,
  .onboarding-highlight,
  .onboarding-demo-caret { animation: none; }
}

/* Phones are portrait only (#291). Above every other layer (banners, the roulette and confetti sit
   at 9999, the header with its menu open at 10000), so nothing on the page shows through or takes
   a tap while the phone is sideways */
.rotate-phone-prompt {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px))
    max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(11, 15, 26, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* A swipe on the prompt must not scroll the page underneath */
  touch-action: none;
}

.rotate-phone-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 360px;
  padding: 24px 28px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--bg-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.rotate-phone-icon {
  color: var(--accent-cyan);
  margin-bottom: 4px;
  animation: rotate-phone-hint 2.4s ease-in-out infinite;
}

.rotate-phone-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-main);
}

.rotate-phone-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Starts sideways, as the phone is held, and turns upright */
@keyframes rotate-phone-hint {
  0%, 20% { transform: rotate(-90deg); }
  50%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-phone-icon { animation: none; }
}

/* Arcade (#611): the PixiJS stage is one full-screen layer behind the whole page, drawn only while the game
   screen is up. z-index -1 puts it above the page background and under every card, so the page's controls,
   focus and the phone keyboard work exactly as in classic; it never takes a tap */
#arcade-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
}

#arcade-stage.is-active {
  display: block;
}

#arcade-stage canvas {
  display: block;
}

/* The stage's glow moves behind the page, so a see-through chain card would wash out and change colour with it
   (#628). Each card paints an opaque base: the normal card its own colour, the reversal card classic's tint
   layered over the page's dark, so it looks as it does on classic's still background */
html.arcade .chain-card {
  background-color: var(--bg-card-solid);
}

html.arcade .chain-card.is-reverse {
  background-color: var(--bg-dark);
  background-image: linear-gradient(var(--reversal-card-tint), var(--reversal-card-tint));
}

html.arcade .chain-card.is-latest {
  background-color: #0e0f10;
  background-image: linear-gradient(120deg, rgba(212, 0, 255, 0.28) 0%, rgba(168, 85, 247, 0.08) 45%, transparent 80%);
  border-color: rgba(212, 0, 255, 0.35);
}

html.arcade .chain-card.is-reverse.is-latest {
  background-color: var(--bg-dark);
  background-image: linear-gradient(120deg, rgba(212, 0, 255, 0.28) 0%, rgba(168, 85, 247, 0.08) 45%, transparent 80%), linear-gradient(var(--reversal-card-tint), var(--reversal-card-tint));
  border-color: rgba(255, 59, 107, 0.5);
}

html.arcade .chain-card.is-latest .chain-thumb-placeholder {
  background: rgba(212, 0, 255, 0.08);
  border: 1px solid rgba(212, 0, 255, 0.15);
}

/* Under the game's name in the header, so testers can tell which version they are playing */
.arcade-beta-tag {
  align-self: flex-start;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--headline-gradient);
  color: var(--bg-dark);
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Arcade table (#612): the players sit around a PixiJS table in the player row. It sits in the page's flow,
   so it scrolls with the page and hides with the row while the phone keyboard is open; the table sets its
   own height from its seats. The page's player cards stay in the DOM for screen readers, keyboards and
   tests, but out of sight */
#arcade-table {
  display: none;
  width: 100%;
}

html.arcade-ready #arcade-table {
  display: block;
}

#arcade-table canvas {
  display: block;
  /* A swipe over the table scrolls the page; a tap is never held back for a double-tap zoom */
  touch-action: manipulation;
}

html.arcade-ready #screen-game .players-carousel-container {
  position: relative;
  overflow: visible;
  padding: 0;
}

html.arcade-ready #game-players-carousel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arcade (#629): the rotating 3D ring and animated chevrons show direction, so the direction pill is
   removed from view; it stays in the DOM for screen readers and classic tests */
html.arcade-ready .chain-status-bar,
html.arcade-ready .chain-status-dir,
html.arcade-ready #hud-direction-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arcade (#629): the ring shows whose turn it is and the active seat shows their typing, so the yellow
   turn box goes. Its heading and typing status stay for screen readers; "You're up next" still shows,
   as a plain line, and with nothing to show the box takes no space at all */
html.arcade-ready .turn-prompt {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html.arcade-ready .turn-player-avatar,
html.arcade-ready .turn-title,
html.arcade-ready .turn-typing,
html.arcade-ready .turn-prompt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arcade (#629): a play's points rise in the table's ring instead, so the last-move box keeps who played
   what. The points and their chips stay for screen readers, out of sight */
html.arcade-ready #prev-move-points,
html.arcade-ready #turn-score-toast {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Arcade (#629): the name played section is redundant with the first card in the chain timeline below */
html.arcade-ready #prev-played-view,
html.arcade-ready #previous-move-banner:not(.is-first-turn) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: none !important;
  box-shadow: none !important;
}

/* In arcade, the turn card shows only when it has active content (your turn form, first turn, or dispute) */
html.arcade-ready .turn-action-card:not(.is-my-turn):not(:has(#override-card:not(.hidden))):not(:has(#previous-move-banner.is-first-turn:not(.hidden))) {
  display: none;
}

/* Fix mobile background gradient flicker and keep table, list and reactions in view */
html.arcade body {
  background-attachment: fixed;
}

/* Arcade layout: full-height board, flexible chain timeline, reaction bar pinned to bottom.
   While the phone keyboard is open (.keyboard-open), the page yields to the keyboard layout
   (#408, #451, #477) so the turn card sits directly above the keys rather than at the foot of 100dvh */
html.arcade body:has(#screen-game.active):not(.keyboard-open) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html.arcade body:has(#screen-game.active):not(.keyboard-open) .app-container {
  height: calc(100dvh - 65px);
  max-height: calc(100dvh - 65px);
  padding-top: 8px;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html.arcade body:not(.keyboard-open) #screen-game.active {
  flex: 1;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 10px;
}

html.arcade .turn-action-card {
  flex-shrink: 0;
}

html.arcade .chain-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

html.arcade #chain-timeline {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

html.arcade .reactions-dock {
  margin-top: auto;
  flex-shrink: 0;
}