@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'MaterialIcons';
  src: url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg-purple: #2D1B4E;
  --splash-bg: #1A1535;
  --accent-purple: #7C4DFF;
  --green: #00C853;
  --gold: #FFD700;
  --silver: #C0C0C0;
  --bronze: #CD7F32;
  --muted: #B0A8C0;
  --danger: #E53935;
  --card: #FFFFFF;
  --card-off: #F5F5F5;
  --setup-bg: #F3F4F6;
  --quiz-bg: #0056B3;
  --voting-bg: #3B1E7B;
  --reveal-card: #1A1535;
  --pass-teal: #004D4D;
  --text-dark: #1A1A2E;
  --font-scale: 1;
  --radius: 18px;
  --touch: 44px;
  --sidebar-width: 248px;
  --topbar-height: 72px;
  --content-max: 1440px;
  --surface: #F3F4F6;
  --surface-strong: #FFFFFF;
  --border: #ECECF2;
  --nav-inactive: #6B7280;
  --nav-active-bg: #EFE9FC;
  --heading: #1F1B2E;
  --subtle: #6B7280;
  --tile-lavender: #F1ECFC;
  --tile-mint: #E6F7EE;
  --tile-sky: #E8F1FE;
  --tile-cream: #FDF3E3;
  --challenge-bg: #F1ECFC;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: 'OpenSans', system-ui, sans-serif;
  background: var(--surface);
  color: var(--text-dark);
  -webkit-tap-highlight-color: transparent;
}

body.large-text { --font-scale: 1.2; }
body.large-text { font-size: calc(16px * var(--font-scale)); }

#app { min-height: 100vh; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  background: var(--surface);
}

.app-frame {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
}

.app-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 24px 18px 20px;
  color: var(--heading);
  background: #fff;
  border-right: 1px solid var(--border);
}

.sidebar-brand {
  display: block;
  padding: 0 8px 24px;
}
.sidebar-brand img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--nav-inactive);
  text-decoration: none;
  font-weight: 700;
  font-size: calc(14px * var(--font-scale));
  transition: background .18s ease, color .18s ease;
}
.sidebar-link:hover {
  background: rgba(124,77,255,.06);
  color: var(--accent-purple);
}
.sidebar-link.active {
  color: var(--accent-purple);
  background: var(--nav-active-bg);
}
.sidebar-link .material-icon {
  width: 24px;
  text-align: center;
  color: inherit;
}
.sidebar-challenge {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: var(--challenge-bg);
}
.sidebar-challenge img {
  display: block;
  margin-bottom: 4px;
}
.sidebar-challenge strong {
  color: var(--heading);
  font-size: calc(13px * var(--font-scale));
}
.sidebar-challenge span {
  color: var(--subtle);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.35;
}
.material-icon {
  font-family: MaterialIcons;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
}

.app-topbar {
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px clamp(20px, 3vw, 40px);
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(16px);
}
.topbar-context {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-context strong {
  color: var(--heading);
  font-size: calc(14px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-crumb-icon {
  color: #9CA3AF;
  font-size: 16px;
}
.topbar-crumb,
.topbar-crumb-sep {
  color: #9CA3AF;
  font-size: calc(14px * var(--font-scale));
  font-weight: 600;
}
.topbar-play {
  width: auto;
  min-height: 40px;
  margin-left: auto;
  padding-inline: 16px;
  border-radius: 10px;
  font-size: calc(13px * var(--font-scale));
  gap: 8px;
}
.topbar-menu, .topbar-brand, .nav-scrim { display: none; }
.app-content {
  flex: 1;
  display: flex;
  min-width: 0;
}
.app-shell.chrome-hidden { grid-template-columns: minmax(0, 1fr); }
.chrome-hidden .app-sidebar,
.chrome-hidden .app-topbar,
.chrome-hidden .nav-scrim { display: none; }
.chrome-hidden .page { min-height: 100vh; }

@media (max-width: 1023px) {
  .app-shell { display: block; }
  .app-sidebar {
    position: fixed;
    left: 0;
    width: min(var(--sidebar-width), calc(100vw - 48px));
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 20px 0 60px rgba(31, 27, 46, .18);
  }
  .nav-open .app-sidebar { transform: translateX(0); }
  .nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    border: 0;
    background: rgba(16,10,28,.5);
    cursor: pointer;
  }
  .nav-open .nav-scrim { display: block; }
  .topbar-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--bg-purple);
    background: #fff;
    cursor: pointer;
  }
  .topbar-brand { display: none; }
}

@media (max-width: 639px) {
  :root { --topbar-height: 64px; }
  .app-topbar { padding: 10px 14px; gap: 10px; }
  .topbar-context { display: none; }
  .topbar-brand {
    display: block;
    margin-right: auto;
  }
  .topbar-brand img { display: block; width: 118px; height: auto; }
  .topbar-play {
    min-width: 44px;
    width: 44px;
    padding: 0;
    font-size: 0;
  }
  .topbar-play .material-icon { font-size: 24px; }
}

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: calc(100vh - var(--topbar-height));
  padding: clamp(20px, 3vw, 48px);
  position: relative;
  box-sizing: border-box;
  background: var(--bg-purple);
  color: #fff;
}

.page.light { background: var(--setup-bg); color: var(--bg-purple); }
.page.light .muted { color: #6E6679; }
.page.light .btn-light { border: 1px solid var(--border); }
.page.splash { background: var(--splash-bg); justify-content: center; align-items: center; text-align: center; }
.page.quiz { background: var(--quiz-bg); }
.page.voting { background: var(--voting-bg); }
.page.pass { background: var(--pass-teal); }
.page.reveal, .page.results { background: var(--bg-purple); }

.brand-logo { max-width: 320px; width: min(70%, 320px); height: auto; }
.tagline { color: var(--muted); margin-top: 8px; font-size: calc(14px * var(--font-scale)); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 12px 16px;
  border: none;
  border-radius: 13px;
  font-family: inherit;
  font-weight: 600;
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn, .menu-tile, .icon-btn, .key, .tab, .switch, .stepper-btn, .dashed-btn, .emoji-btn {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.app-topbar .topbar-play {
  width: auto;
  min-width: 150px;
}
.btn:focus-visible, .menu-tile:focus-visible, .icon-btn:focus-visible, .key:focus-visible,
.tab:focus-visible, .switch:focus-visible, .stepper-btn:focus-visible, .dashed-btn:focus-visible,
.emoji-btn:focus-visible, .sidebar-link:focus-visible, .topbar-menu:focus-visible {
  outline: 3px solid #FFD54F;
  outline-offset: 3px;
}
.btn-green { background: var(--green); }
.btn-purple { background: var(--accent-purple); }
.btn-outline {
  background: transparent;
  border: 2px solid #fff;
}
.btn-danger { background: var(--danger); }
.btn-light {
  background: #fff;
  color: var(--bg-purple);
}
.btn-mas { background: var(--green); font-size: calc(22px * var(--font-scale)); min-height: 72px; border-radius: 28px; }
.btn-menos { background: var(--accent-purple); font-size: calc(22px * var(--font-scale)); min-height: 72px; border-radius: 28px; }
.btn-pill { border-radius: 28px; }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.menu-tile {
  background: var(--card-off);
  color: var(--bg-purple);
  border-radius: var(--radius);
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: calc(12px * var(--font-scale));
}
.menu-tile img { width: 28px; height: 28px; }

.card {
  background: var(--card);
  color: var(--bg-purple);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(45,27,78,.08);
  box-shadow: 0 10px 30px rgba(35,24,55,.08);
}
.card.dark {
  background: var(--reveal-card);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
}

@keyframes skeleton-shimmer {
  0% { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
.skeleton-block {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--card-off) 25%, var(--border) 50%, var(--card-off) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-title {
  height: 22px;
  width: min(220px, 50%);
}
.skeleton-card {
  gap: 14px;
}
.skeleton-line {
  height: 14px;
  width: 100%;
}
.skeleton-line-short {
  width: 60%;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stepper-btn {
  width: var(--touch);
  height: var(--touch);
  border-radius: 50%;
  border: none;
  background: #E8E8EC;
  color: var(--bg-purple);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}
.stepper-value {
  font-size: calc(28px * var(--font-scale));
  font-weight: 700;
  min-width: 80px;
  text-align: center;
}
.stepper-value.green { color: var(--green); }

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.player-row:last-child { border-bottom: none; }
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  overflow: hidden;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.player-name {
  flex: 1;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: calc(16px * var(--font-scale));
  color: var(--bg-purple);
  min-height: var(--touch);
}
.icon-btn {
  width: var(--touch);
  height: var(--touch);
  border: none;
  background: transparent;
  color: var(--accent-purple);
  font-size: 20px;
  cursor: pointer;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.header-bar h1, .page-title {
  font-size: calc(18px * var(--font-scale));
  margin: 0;
  text-align: center;
  flex: 1;
}
.round-label { font-weight: 700; letter-spacing: .04em; }

.timer-pill {
  background: #fff;
  color: var(--text-dark);
  border-radius: 20px;
  padding: 6px 12px;
  font-weight: 700;
  min-width: 64px;
  text-align: center;
}
.timer-pill.warn { color: #B71C1C; background: #FFC107; }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.key {
  min-height: 56px;
  border: none;
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-dark);
  font-size: calc(22px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}
.key.back { background: #D1D5DB; font-family: MaterialIcons; }

.guess-display {
  background: #fff;
  color: var(--text-dark);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-size: calc(36px * var(--font-scale));
  font-weight: 700;
  text-align: center;
  min-width: 120px;
  align-self: center;
}

.question-text {
  font-size: calc(20px * var(--font-scale));
  font-weight: 600;
  text-align: center;
  margin: 16px 0;
  line-height: 1.35;
}

.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.muted { color: var(--muted); }
.center { text-align: center; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.full { width: 100%; }

.gauge {
  width: 100%;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--accent-purple), var(--green));
  position: relative;
  margin: 20px 0;
}
.gauge-marker {
  position: absolute;
  top: -8px;
  width: 12px;
  height: 44px;
  border-radius: 6px;
  transform: translateX(-50%);
}
.gauge-marker.guess { background: var(--accent-purple); border: 2px solid #fff; }
.gauge-marker.actual { background: var(--green); border: 2px solid #fff; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
}
.overlay-card {
  background: #fff;
  color: var(--bg-purple);
  border-radius: 24px;
  padding: 32px 28px 24px;
  width: min(100%, 540px);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 28px 80px rgba(10,5,20,.35);
}
.overlay-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: MaterialIcons;
  font-size: 28px;
}

.pause-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--touch);
  border: none;
  background: transparent;
  color: var(--bg-purple);
  font-weight: 700;
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.pause-item.danger { color: var(--danger); }

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.rank { width: 28px; font-weight: 700; color: var(--gold); }
.medal { width: 28px; height: 28px; }

.progress-bar {
  width: min(240px, 80%);
  height: 8px;
  background: rgba(255,255,255,.2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 20px;
}
.progress-bar > span {
  display: block;
  height: 100%;
  background: var(--green);
  transition: width .2s ease;
}

.tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 12px;
}
.tab {
  flex: 1;
  min-width: 70px;
  min-height: 40px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.tab.active { background: var(--accent-purple); }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.stat-card {
  background: var(--reveal-card);
  border-radius: var(--radius);
  padding: 14px 12px;
  text-align: center;
}
.stat-card .value { font-size: calc(22px * var(--font-scale)); font-weight: 700; color: var(--gold); }
.stat-card .label { font-size: calc(12px * var(--font-scale)); color: var(--muted); margin-top: 4px; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.emoji-btn {
  min-height: var(--touch);
  border: none;
  border-radius: 12px;
  background: var(--card-off);
  font-size: 22px;
  cursor: pointer;
}

.switch-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--touch);
  gap: 12px;
}
.switch {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #ccc;
  border: none;
  position: relative;
  cursor: pointer;
}
.switch.on { background: var(--accent-purple); }
.switch::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: left .15s ease;
}
.switch.on::after { left: 23px; }

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
  padding-top: 8px;
}
.chart-bar {
  flex: 1;
  background: var(--accent-purple);
  border-radius: 6px 6px 0 0;
  min-height: 4px;
}
.chart-labels {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.chart-labels span { flex: 1; text-align: center; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.live-region[aria-live] { position: absolute; left: -9999px; }

.dashed-btn {
  border: 2px dashed var(--accent-purple);
  background: transparent;
  color: var(--accent-purple);
  border-radius: var(--radius);
  min-height: 52px;
  width: 100%;
  font-weight: 700;
  cursor: pointer;
}
.dashed-btn.delete {
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(229,57,53,.06);
}

.winner-banner {
  background: var(--gold);
  color: var(--bg-purple);
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 700;
  display: inline-block;
}

.tutorial-card img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* Desktop page compositions */
.page > :where(.header-bar, .card, .stack, .tabs, .stat-grid, .tutorial-grid, .setup-options,
  .settings-grid, .question-workspace, .voting-workspace, .reveal-workspace) {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.page > .spacer { min-height: 24px; }
.page > .btn {
  max-width: 360px;
  align-self: center;
}
.header-bar {
  min-height: 48px;
  margin-bottom: 24px;
}
.header-bar h1, .page-title {
  font-size: calc(24px * var(--font-scale));
}
.game-header {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}
.game-header-action {
  color: #fff;
  border-radius: 11px;
  background: rgba(255,255,255,.1);
}
.game-header-action:hover { background: rgba(255,255,255,.18); }
.setup-section {
  font-weight: 700;
  color: var(--bg-purple);
}
.game-kicker {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.compact-btn {
  width: auto;
  min-height: 38px;
  padding: 7px 13px;
}
.settings-notice { font-size: calc(12px * var(--font-scale)); }

.home-page {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .95fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 28px);
  overflow: auto;
  background:
    radial-gradient(circle at 8% 92%, rgba(124,77,255,.08), transparent 28%),
    radial-gradient(circle at 96% 88%, rgba(0,200,83,.07), transparent 24%),
    var(--surface);
}
.home-page > * { max-width: none; }

.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border-radius: 28px;
  color: #fff;
  box-shadow: 0 18px 40px rgba(45, 27, 78, .18);
}
.home-hero-bg {
  position: absolute;
  inset: 0;
  background:
    url('../images/bg_confetti.png') center / cover no-repeat,
    linear-gradient(160deg, #3A2266 0%, #2D1B4E 100%);
}
.home-hero-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(28px, 4vw, 48px);
  box-sizing: border-box;
}
.home-hero-logo {
  width: min(70%, 220px);
  margin-bottom: 10px;
}
.home-welcome {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.home-hero-title {
  margin: 8px 0 0;
  max-width: 18ch;
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
}
.home-hero-subtitle {
  margin: 12px 0 0;
  max-width: 34ch;
  color: rgba(255,255,255,.78);
  font-size: calc(14px * var(--font-scale));
  line-height: 1.45;
}
.home-percent-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}
.percent-tile {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  font-size: calc(20px * var(--font-scale));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.percent-tile-purple {
  background: var(--accent-purple);
  transform: rotate(-8deg) translateY(6px);
}
.percent-tile-green {
  width: 88px;
  height: 88px;
  background: var(--green);
  transform: translateY(-10px);
  font-size: calc(24px * var(--font-scale));
}
.percent-tile-gold {
  background: #F5A623;
  transform: rotate(8deg) translateY(4px);
}

.home-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 0 8px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: calc(13px * var(--font-scale));
  text-align: center;
}
.app-footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-footer-links a {
  color: var(--subtle);
  text-decoration: none;
}
.app-footer-links a:hover {
  color: var(--accent-purple);
}
.ready-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 27, 46, .06);
}
.ready-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ready-card-header h2 {
  margin: 0;
  color: var(--heading);
  font-size: calc(18px * var(--font-scale));
}
.ready-card-header p {
  margin: 4px 0 0;
  color: var(--subtle);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
}
.ready-start {
  justify-content: flex-start;
  width: 100%;
  min-height: 64px;
  border-radius: 14px;
  text-align: left;
}
.ready-start span:not(.material-icon) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.ready-start .button-title {
  font-size: calc(15px * var(--font-scale));
}
.ready-start small {
  opacity: .9;
  font-weight: 500;
  font-size: calc(12px * var(--font-scale));
}
.ready-chevron {
  margin-left: auto;
  font-size: 26px;
}
.home-continue-row .btn {
  width: 100%;
  min-height: 56px;
  justify-content: flex-start;
  text-align: left;
}
.home-continue-row .button-title,
.home-continue-row small {
  display: block;
}
.home-continue-row small {
  margin-top: 2px;
  opacity: .85;
  font-weight: 400;
}

.more-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.more-options-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--subtle);
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.more-options-divider::before,
.more-options-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.option-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 132px;
  padding: 16px;
  border: 0;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}
.option-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(31, 27, 46, .08);
}
.option-tile img {
  width: 36px;
  height: 36px;
  margin-bottom: 4px;
}
.option-tile strong {
  color: var(--heading);
  font-size: calc(14px * var(--font-scale));
}
.option-tile > span:not(.material-icon) {
  color: var(--subtle);
  font-size: calc(11px * var(--font-scale));
  line-height: 1.35;
  padding-right: 18px;
}
.option-tile .material-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(31, 27, 46, .35);
  font-size: 20px;
}
.option-tile-lavender { background: var(--tile-lavender); }
.option-tile-mint { background: var(--tile-mint); }
.option-tile-sky { background: var(--tile-sky); }
.option-tile-cream { background: var(--tile-cream); }

.setup-options {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}
.setup-options .card { min-height: 190px; }
.setup-page > .btn { margin-top: 32px; }

.setup-header {
  position: relative;
  text-align: center;
  padding: 8px 0 4px;
  margin-bottom: 28px;
}
.setup-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--tile-lavender);
  color: var(--accent-purple);
  font-size: 28px;
}
.setup-header h1 {
  margin: 0;
  color: var(--bg-purple);
  font-size: calc(30px * var(--font-scale));
}
.setup-header-subtitle {
  margin: 8px 0 0;
  color: var(--subtle);
  font-size: calc(15px * var(--font-scale));
}
.decor-shape {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-purple);
  opacity: .12;
  pointer-events: none;
}
.decor-shape-1 { width: 34px; height: 34px; top: 4px; left: 6%; }
.decor-shape-2 { width: 20px; height: 20px; top: 44px; right: 10%; background: var(--green); }
.decor-shape-3 { width: 16px; height: 16px; bottom: -4px; left: 40%; background: #F5A623; }

.setup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
}
.setup-card-title {
  color: var(--heading);
  font-weight: 700;
  font-size: calc(17px * var(--font-scale));
}
.setup-card-desc {
  margin: 0;
  color: var(--subtle);
  font-size: calc(12.5px * var(--font-scale));
  line-height: 1.4;
}
.setup-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
}
.setup-icon-badge .material-icon { font-size: 26px; }
.setup-icon-badge.icon-green { background: var(--tile-mint); color: var(--green); }
.setup-icon-badge.icon-purple { background: var(--tile-lavender); color: var(--accent-purple); }
.setup-icon-badge.icon-orange { background: var(--tile-cream); color: #F5A623; }
.setup-card-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
}

.advanced-toggle-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.advanced-toggle-icon {
  display: inline-flex;
  transition: transform .2s ease;
  color: var(--subtle);
}
.advanced-toggle-icon.open { transform: rotate(90deg); }
.advanced-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #EFEFF4;
}
.advanced-row:first-of-type { border-top: none; }
.advanced-row-label { color: var(--heading); font-weight: 600; }
.advanced-row-steppers {
  display: flex;
  align-items: center;
  gap: 16px;
}
.advanced-stepper-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.advanced-stepper-unit {
  min-width: 34px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 4px 0;
  border-radius: 3px;
  background: #E8E8EC;
  cursor: pointer;
}
.range-slider:disabled { opacity: .5; cursor: not-allowed; }
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
}
.range-slider::-moz-range-track { height: 6px; border-radius: 3px; background: #E8E8EC; }
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-purple);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  cursor: pointer;
}
.range-green::-webkit-slider-thumb, .range-green::-moz-range-thumb { border-color: var(--green); }
.range-purple::-webkit-slider-thumb, .range-purple::-moz-range-thumb { border-color: var(--accent-purple); }
.range-orange::-webkit-slider-thumb, .range-orange::-moz-range-thumb { border-color: #F5A623; }
.range-labels {
  display: flex;
  justify-content: space-between;
  color: #6E6E6E;
  font-size: 12px;
}

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--tile-lavender);
}
.info-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-purple);
  font-size: 22px;
}
.info-banner strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading);
  font-size: calc(15px * var(--font-scale));
}
.info-banner p {
  margin: 0;
  color: var(--subtle);
  font-size: calc(13px * var(--font-scale));
  line-height: 1.45;
}

.players-page > .card,
.players-page > .dashed-btn,
.edit-scores-page > .card,
.edit-scores-page > .stack,
.in-game-settings-page > .card {
  max-width: 980px;
}
.players-page > .dashed-btn { align-self: center; }
.player-row { padding: 13px 4px; }
.player-name {
  padding-inline: 10px;
  border-radius: 9px;
}
.player-name:focus {
  outline: 2px solid var(--accent-purple);
  background: #F4F0FF;
}

.room-code {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 10px;
  color: var(--bg-purple);
}
.room-code-input {
  width: 100%;
  margin-top: 8px;
  padding: 14px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 8px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 12px;
  border: 2px solid var(--border, #E2E2E2);
}
.room-code-input:focus {
  outline: 2px solid var(--accent-purple);
}
.reconnecting-banner {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--danger, #D32F2F);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.waiting-turn-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.tutorial-grid {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.tutorial-card {
  display: flex;
  flex-direction: column;
}
.tutorial-card h3 { margin-bottom: 4px; }
.tutorial-card p { line-height: 1.55; }
.tutorial-page > .btn { margin-top: 28px; }

.statistics-page .tabs {
  position: sticky;
  top: calc(var(--topbar-height) + 12px);
  z-index: 10;
  max-width: 820px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(26,21,53,.9);
  backdrop-filter: blur(12px);
}
.statistics-page .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.statistics-page .stat-card {
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statistics-page .stat-card .value {
  font-size: calc(30px * var(--font-scale));
}
.statistics-page > .card,
.statistics-page > .stack,
.statistics-page > p {
  max-width: 1080px;
}

.settings-grid {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.settings-grid .card { min-height: 220px; }
.settings-grid h3 { margin: 4px 0 6px; }

/* Plan pill in the Account card. */
.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--subtle);
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  white-space: nowrap;
}
.tier-badge-plus {
  background: var(--tile-lavender);
  border-color: var(--accent-purple);
  color: var(--accent-purple);
}
.about-card {
  width: min(100%, 720px);
  margin: auto;
  align-items: center;
  padding: clamp(28px, 5vw, 64px);
}

.focused-page {
  justify-content: center;
}
.focused-page > .header-bar { position: absolute; top: clamp(20px, 3vw, 48px); }
.focused-page > .center {
  width: min(100%, 680px);
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: rgba(26,21,53,.38);
  box-shadow: 0 22px 60px rgba(8,4,18,.2);
}
.focused-page > .spacer { display: none; }
.focused-page > .btn { margin-top: 24px; }
.round-intro-page .avatar { width: 72px; height: 72px; font-size: 26px; }

.question-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
}
.question-prompt-panel, .answer-panel {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 26px;
  background: rgba(0,0,0,.13);
}
.question-prompt-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 5vw, 72px);
}
.question-prompt-panel .question-text {
  max-width: 820px;
  margin: 28px auto 40px;
  font-size: clamp(24px, 3vw, 42px);
}
.answer-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(20px, 3vw, 36px);
}
.answer-panel .keypad { margin-top: 0; }
.answer-panel .key {
  min-height: 62px;
  box-shadow: 0 5px 14px rgba(0,0,0,.12);
}

.voting-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  align-items: stretch;
  gap: clamp(20px, 3vw, 40px);
}
.voting-question-panel, .voting-controls-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 52px);
}
.voting-question-panel .question-text {
  color: var(--bg-purple);
  font-size: clamp(19px, 2vw, 28px);
  text-align: left;
}
.voting-guess {
  margin: 10px 0;
  color: var(--accent-purple);
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 700;
}
.voting-controls-panel { text-align: center; }
.vote-actions { display: grid; gap: 16px; margin: 20px 0; }
.vote-actions .btn { min-height: 84px; }

.reveal-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, .9fr);
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
}
.reveal-answer-panel, .reveal-score-panel .card {
  padding: clamp(24px, 3vw, 38px);
}
.reveal-answer {
  margin: 8px 0 18px;
  color: var(--green);
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 700;
  text-align: center;
}
.reveal-comparison { justify-content: space-between; }
.reveal-score-panel h2 { margin-top: 0; }
.reveal-page > .spacer { min-height: 20px; }

.results-page {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr);
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  gap: 18px 32px;
}
.results-page > .center {
  grid-column: 1;
  grid-row: 1 / 4;
  padding: 40px 24px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  background: rgba(26,21,53,.55);
}
.results-page > h2 { grid-column: 2; margin: 0; }
.results-page > .card { grid-column: 2; }
.results-page > .stat-grid {
  grid-column: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.results-page > .stack {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.in-game-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: clamp(24px, 3vw, 36px);
}
.edit-scores-page > .stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 1100px) {
  .home-page { grid-template-columns: 1fr; }
  .home-hero,
  .home-hero-content { min-height: 360px; }
  .home-hero-title { max-width: none; }
  .tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .page { padding: 22px; }
  .setup-options,
  .question-workspace,
  .voting-workspace,
  .reveal-workspace,
  .results-page {
    display: flex;
    flex-direction: column;
  }
  .setup-options { display: grid; grid-template-columns: 1fr 1fr; }
  .results-page > .center { padding: 28px 20px; }
  .results-page > .stack { width: 100%; }
  .statistics-page .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .page {
    min-height: calc(100vh - var(--topbar-height));
    padding: 16px;
  }
  .app-topbar .topbar-play {
    min-width: 44px;
    width: 44px;
  }
  .header-bar { margin-bottom: 12px; }
  .header-bar h1, .page-title { font-size: calc(18px * var(--font-scale)); }
  .page > .btn { max-width: none; }
  .home-page { gap: 16px; }
  .home-hero,
  .home-hero-content {
    min-height: 280px;
  }
  .home-hero { border-radius: 22px; }
  .home-hero-content { padding: 24px 20px; }
  .home-hero-title { font-size: 28px; }
  .home-percent-row { margin-top: 24px; gap: 12px; }
  .percent-tile { width: 58px; height: 58px; font-size: 16px; }
  .percent-tile-green { width: 70px; height: 70px; font-size: 18px; }
  .ready-card { padding: 16px; border-radius: 20px; }
  .option-grid { grid-template-columns: 1fr; }
  .option-tile { min-height: 108px; }
  .setup-options,
  .tutorial-grid,
  .settings-grid,
  .in-game-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .setup-options > .card { min-width: 0; box-sizing: border-box; }
  .setup-options .stepper-value {
    min-width: 0;
    font-size: calc(22px * var(--font-scale));
    overflow-wrap: anywhere;
  }
  .setup-options .card { min-height: 0; }
  .setup-header { margin-bottom: 20px; }
  .setup-header h1 { font-size: calc(22px * var(--font-scale)); }
  .decor-shape { display: none; }
  .info-banner { flex-direction: column; align-items: flex-start; }
  .tutorial-grid { gap: 12px; }
  .settings-grid .card { min-height: 0; }
  .focused-page { justify-content: flex-start; }
  .focused-page > .header-bar { position: static; }
  .focused-page > .spacer { display: block; }
  .focused-page > .center {
    margin: auto;
    padding: 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .question-workspace, .voting-workspace, .reveal-workspace { gap: 14px; }
  .question-prompt-panel, .answer-panel,
  .voting-question-panel, .voting-controls-panel {
    padding: 18px;
    border-radius: 20px;
  }
  .question-prompt-panel .question-text {
    margin: 16px auto;
    font-size: calc(20px * var(--font-scale));
  }
  .answer-panel .key { min-height: 52px; }
  .vote-actions .btn { min-height: 68px; }
  .reveal-comparison { align-items: flex-start; flex-direction: column; }
  .results-page > .stat-grid,
  .results-page > .stack,
  .edit-scores-page > .stack {
    grid-template-columns: 1fr;
  }
  .overlay {
    align-items: flex-end;
    padding: 12px;
  }
  .overlay-card {
    width: 100%;
    padding: 28px 20px 18px;
    border-radius: 24px 24px 18px 18px;
  }
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0,0,0,.2);
  display: none;
  left: 0;
  padding: .6rem 1.25rem .7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  color: #000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem;
}
.loading-progress circle {
  fill: none;
  stroke: #e0e0e0;
  stroke-width: .6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--green);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text {
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Loading");
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}