/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-black-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0f172a;
  --panel: rgba(15, 23, 42, 0.95);
  --card: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.10);
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #f59e0b;
  --accent-2: #38bdf8;
  --accent-3: #34d399;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 10px 30px rgba(0, 0, 0, 0.25);
  --radius: 12px;
  --card-bg: rgba(30, 41, 59, 0.80);
  --card-border: rgba(255, 255, 255, 0.08);
  --captcha-label-color: #dbeafe;
  --captcha-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  --captcha-slider-bg: #334155;
}

/* Tema claro */
.theme-light {
  --bg: #e8ecf1;
  --panel: rgba(235, 240, 248, 0.97);
  --card: rgba(0, 0, 0, 0.04);
  --line: rgba(0, 0, 0, 0.10);
  --text: #1e293b;
  --muted: #64748b;
  --accent: #d97706;
  --accent-2: #0284c7;
  --accent-3: #059669;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.10);
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(0, 0, 0, 0.10);
  --captcha-label-color: #334155;
  --captcha-label-shadow: 0 1px 1px rgba(255, 255, 255, 0.55);
  --captcha-slider-bg: #e2e8f0;
}

.captcha-slider-label {
  color: var(--captcha-label-color) !important;
  text-shadow: var(--captcha-label-shadow);
  letter-spacing: 0.2px;
}

#clubCaptchaSlider,
#captchaSlider {
  background: var(--captcha-slider-bg) !important;
}

.theme-light body,
.theme-light .panel {
  background: var(--bg) !important;
  color: var(--text);
}

.theme-light .panel {
  background: var(--panel) !important;
}

.theme-light .top-bar {
  background: rgba(255, 255, 255, 0.80);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

.theme-light .menu-toggle-btn span {
  background: #334155;
}

.theme-light .sound-toggle-btn {
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.25);
  background: rgba(2, 132, 199, 0.08);
}

.theme-light .theme-toggle-top-btn {
  color: #ca8a04;
  border-color: rgba(202, 138, 4, 0.28);
  background: rgba(202, 138, 4, 0.10);
}

.theme-light .announcer-top-next-btn {
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.10);
}

.theme-light .mic-toggle-top-btn {
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.28);
  background: rgba(100, 116, 139, 0.08);
}

.theme-light .mic-toggle-top-btn.is-active {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.10);
}

.theme-light .sound-toggle-btn.is-muted {
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
  background: rgba(220, 38, 38, 0.08);
}

.theme-light .info-bar {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.theme-light .info-item {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

.theme-light .info-item em {
  color: #1e293b;
}

.theme-light .flip-digit {
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 49.9%, #e2e8f0 50%, #cbd5e1 100%);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}

.theme-light .flip-digit::after {
  background: rgba(0, 0, 0, 0.15);
}

.theme-light .countdown-text {
  color: #475569;
}

.theme-light .num-cell {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #64748b;
}

.theme-light .num-cell.drawn {
  color: #fff;
}

.theme-light .number-grid {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.theme-light .best-card-head {
  color: #475569;
}

.theme-light .best-card {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

.theme-light .best-col.cupom {
  color: var(--accent);
}

.theme-light .best-col.owner {
  color: #334155;
}

.theme-light .best-col.missing {
  color: #f9fafb;
}

.theme-light .best-card-head .best-col.missing {
  color: #1e293b;
}

.theme-light .best-col.missing.miss-high {
  color: #f9fafb;
}

.theme-light .best-col.missing.miss-near {
  color: #f9fafb;
}

.theme-light .best-col.numbers {
  color: #475569;
}

.theme-light .best-card {
  background: rgba(255, 255, 255, 0.70);
}

.theme-light .best-card:hover {
  background: rgba(255, 255, 255, 0.90);
}

.theme-light .best-card-head {
  background: #e0f2fe;
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284c7;
}

.theme-light .missing-cell {
  background: #0ea5e9;
  border-color: #0284c7;
  color: #f9fafb;
}

.theme-light .draw-balls-count {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
  color: #0284c7;
}

.theme-light .draw-state {
  color: var(--accent-3);
}

.theme-light .balls-track {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.theme-light .side-drawer {
  background: #f8fafc;
  color: #1e293b;
}

.theme-light .drawer-item {
  color: #1e293b;
}

.theme-light .drawer-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.theme-light .drawer-section {
  border-top-color: rgba(0, 0, 0, 0.08);
}

html.theme-light .drawer-input,
html.theme-light .replay-controls input {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}

html.theme-light .drawer-input:focus,
html.theme-light .replay-controls input:focus {
  border-color: var(--accent);
}

html.theme-light .drawer-input::placeholder,
html.theme-light .replay-controls input::placeholder {
  color: #94a3b8;
}

html.theme-light .replay-controls button {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}

html.theme-light .replay-controls button:hover {
  border-color: var(--accent-2);
  background: rgba(2, 132, 199, 0.06);
}

html.theme-light .drawer-btn {
  background: rgba(2, 132, 199, 0.10);
  border-color: rgba(2, 132, 199, 0.30);
  color: #0284c7;
}

html.theme-light .drawer-btn:hover {
  background: rgba(2, 132, 199, 0.18);
}

html.theme-light .drawer-error {
  color: #dc2626;
}

html.theme-light .replay-status {
  color: #475569;
}

html.theme-light .consult-modal-overlay {
  background: rgba(148, 163, 184, 0.85);
}

html.theme-light .consult-modal-overlay .consult-modal-box {
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 100%);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
  color: #1e293b;
}

html.theme-light .consult-modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.theme-light .consult-modal-close {
  color: #64748b;
}

html.theme-light .consult-chip {
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.22);
  color: #0284c7;
}

html.theme-light .consult-chip strong {
  color: #0f172a;
}

html.theme-light .consult-balls {
  background: rgba(0, 0, 0, 0.05);
}

html.theme-light .consult-winners h3 {
  color: #b45309;
}

html.theme-light .consult-winner-item {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(180, 83, 9, 0.18);
  color: #1e293b;
}

html.theme-light .consult-winner-item .prize-tag {
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
}

html.theme-light .consult-stat-chip {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.22);
  color: #047857;
}

html.theme-light .drawer-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

html.theme-light .drawer-close-btn {
  color: #64748b;
}

.theme-light .consult-card-cell {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #334155;
}

.theme-light .consult-card-cell.hit {
  color: #fff;
}

/* Club modal (replay disponível, login) — modo claro */
.theme-light .club-modal-overlay {
  background: rgba(226, 232, 240, 0.94);
}

.theme-light .club-modal-box {
  background: linear-gradient(160deg, #ffffff, #f1f5f9);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.theme-light .club-modal-subtitle {
  color: #64748b;
}

.theme-light .club-modal-input {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  color: #1e293b;
}

/* Winners modal — modo claro */
.theme-light .winners-modal-overlay {
  background: rgba(226, 232, 240, 0.95);
}

.theme-light .winners-modal-box {
  background: linear-gradient(160deg, #ffffff 0%, #f1f5f9 60%, #e8ecf1 100%);
  border-color: rgba(217, 119, 6, 0.30);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.theme-light .winners-modal-header {
  border-bottom-color: rgba(217, 119, 6, 0.15);
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.06) 0%, transparent 60%);
}

.theme-light .winners-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #334155;
}

.theme-light .winners-modal-close:hover {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.30);
}

.theme-light .wm-prize-group {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.theme-light .wm-prize-group:hover {
  border-color: rgba(217, 119, 6, 0.20);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 100%;
  margin: 0;
}

body {
  width: 100vw;
  min-height: 100dvh;
  font-family: "Space Grotesk", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(56, 189, 248, 0.10), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(245, 158, 11, 0.08), transparent 50%),
    linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  display: grid;
  place-items: stretch;
  padding: 0;
  overflow-x: hidden;
}

.bg-shape {
  position: fixed;
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.bg-shape-a {
  width: 300px;
  height: 300px;
  border-radius: 48% 52% 58% 42% / 44% 58% 42% 56%;
  background: rgba(56, 189, 248, 0.08);
  top: -80px;
  right: -40px;
  animation: drift 12s ease-in-out infinite;
}

.bg-shape-b {
  width: 340px;
  height: 340px;
  border-radius: 43% 57% 51% 49% / 64% 50% 50% 36%;
  background: rgba(245, 158, 11, 0.06);
  bottom: -100px;
  left: -60px;
  animation: drift 14s ease-in-out infinite reverse;
}

.panel {
  position: relative;
  z-index: 1;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
  background: var(--panel);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: panelEnter 0.5s ease-out both;
  overflow: hidden;
}

.panel-header {
  margin-bottom: 18px;
}

.tag {
  margin: 0;
  color: var(--accent-2);
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 700;
}

h1 {
  margin: 6px 0 0;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-family: "Archivo Black", sans-serif;
  line-height: 1.1;
}

.subtitle {
  margin-top: 8px;
  color: var(--muted);
}

/* ---- Flip-clock countdown ---- */
.flip-clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.flip-digit {
  flex: 1;
  max-width: 120px;
  height: clamp(70px, 22vw, 120px);
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 49.9%, #1e293b 50%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #f1f5f9;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2.4rem, 10vw, 4.5rem);
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}

.flip-digit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 49.5%;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
}

.flip-sep {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2rem, 8vw, 3.5rem);
  color: var(--accent);
  font-weight: 900;
  flex-shrink: 0;
  animation: pulseText 1.4s ease-in-out infinite;
}

/* ---- Phase visibility: hide panels during countdown ---- */
.panel:not(.is-drawing-mode) .number-panel,
.panel:not(.is-drawing-mode) .best-cards {
  display: none !important;
}

/* No modo grade, so mostrar melhores cartelas no aguardo quando houver
   cartelas compradas carregadas via fallback. */
.panel.view-best-cards.has-best-fallback-cards:not(.is-drawing-mode) .best-cards {
  display: flex !important;
}

/* Quando estiver exibindo cartelas fallback no countdown, usar ancoragem no topo
   para evitar sobreposicao e cortes dos blocos superiores. */
@media (max-width: 768px) {
  .panel:not(.is-drawing-mode).has-best-fallback-cards {
    justify-content: flex-start;
    overflow-y: auto;

  /* Cabecalho dentro de .best-cards nao deve encolher */
  .best-cards .player-cards-header {
    flex-shrink: 0;
  }

  @media (max-width: 768px) {
    .panel.view-best-cards.has-best-fallback-cards:not(.is-drawing-mode) .best-cards {
      flex-direction: column;
    }
    .panel.view-best-cards.has-best-fallback-cards:not(.is-drawing-mode) #bestCardsItems {
      height: auto;
      overflow-y: auto;
    }
  }
  }
}

/* ---- Waiting mode: anchor content at top to avoid empty space when alert bubble is hidden ---- */
.panel:not(.is-drawing-mode) {
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
}

/* Quando cartelas do jogador estao visiveis no countdown, nao centralizar
   verticalmente — impede que premios/top-bar sejam cortados pelo overflow */
.panel:not(.is-drawing-mode).has-pcards {
  justify-content: flex-start;
  overflow-y: auto;
}

.panel:not(.is-drawing-mode) .player-cards-track {
  max-height: 40dvh;
}

.panel:not(.is-drawing-mode) .prize-list {
  /* no-op anchor */
}

.panel:not(.is-drawing-mode) #prizeItems li {
  padding: 8px 14px;
  font-size: 0.92rem;
  border-radius: 12px;
}

.panel:not(.is-drawing-mode) .prize-value {
  font-size: 1rem;
}

.panel:not(.is-drawing-mode) #prizeItems {
  gap: 6px;
}

.panel:not(.is-drawing-mode) .info-bar {
  padding: 10px 12px;
  gap: 8px;
}

.panel:not(.is-drawing-mode) .info-item {
  padding: 8px 10px;
  gap: 4px;
}

.panel:not(.is-drawing-mode) .info-item b {
  font-size: 0.68rem;
}

.panel:not(.is-drawing-mode) .info-item em {
  font-size: 1rem;
}

.panel:not(.is-drawing-mode) .flip-digit {
  height: clamp(90px, 28vw, 140px);
  font-size: clamp(3rem, 12vw, 5.5rem);
  max-width: 140px;
  border-radius: 14px;
}

.panel:not(.is-drawing-mode) .flip-sep {
  font-size: clamp(2.4rem, 10vw, 4.5rem);
}

.panel:not(.is-drawing-mode) .flip-clock {
  gap: 12px;
}

.panel:not(.is-drawing-mode) .countdown-area {
  padding: 12px 8px;
}

.panel:not(.is-drawing-mode) .countdown-text {
  font-size: 1rem;
  margin-top: 10px;
}

/* ---- Drawing mode: info-bar vertical + bola grande lado a lado ---- */
.panel.is-drawing-mode .info-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px 6px;
  order: 0;
}

.panel.is-drawing-mode .info-item {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.panel.is-drawing-mode .info-item b {
  min-width: 42px;
  text-align: left;
}

/* Grid wrapper: info-bar ao lado da bola grande */
.panel.is-drawing-mode {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto auto 1fr 1fr;
  grid-template-areas:
    "topbar topbar"
    "prizes prizes"
    "info   draw"
    "nums   nums"
    "cards  cards"
    "pcards pcards";
  gap: 4px;
  height: 100dvh !important;
  max-height: 100dvh;
  overflow: hidden;
}

/* Quando nao tem cartelas do jogador, best-cards ocupa as 2 ultimas rows */
.panel.is-drawing-mode .best-cards {
  grid-area: cards;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel.is-drawing-mode:not(.has-pcards) .best-cards {
  grid-row: 5 / 7;
}

.panel.is-drawing-mode .top-bar {
  grid-area: topbar;
}

.panel.is-drawing-mode .prize-list {
  grid-area: prizes;
}

.panel.is-drawing-mode .info-bar {
  grid-area: info;
  align-self: center;
}

.panel.is-drawing-mode .draw-center {
  grid-area: draw;
  align-self: center;
  justify-self: center;
}

.panel.is-drawing-mode .number-panel {
  grid-area: nums;
}

.panel.is-drawing-mode .player-cards-panel {
  grid-area: pcards;
  min-height: 0;
  overflow: hidden;
}

.panel.is-drawing-mode .winner-spotlight {
  grid-column: 1 / -1;
  grid-row: 3 / 5;
  align-self: start;
  z-index: 10;
  max-height: 50dvh;
  overflow-y: auto;
}

/* Camadas do sorteio: apenas frase e ganhadores devem sobrepor */
.panel.is-drawing-mode .top-bar,
.panel.is-drawing-mode .prize-list,
.panel.is-drawing-mode .info-bar,
.panel.is-drawing-mode .draw-center,
.panel.is-drawing-mode .balls-section,
.panel.is-drawing-mode .number-panel,
.panel.is-drawing-mode .best-cards,
.panel.is-drawing-mode .player-cards-panel,
.panel.is-drawing-mode .start-alert-bubble {
  position: relative;
  z-index: 1;
}

.panel.is-drawing-mode .winner-spotlight {
  z-index: 60;
}

.panel.is-drawing-mode .winner-spotlight.is-hidden {
  display: none;
}

.panel.is-drawing-mode .start-alert-bubble {
  grid-area: draw;
}

/* Durante sorteio/replay, manter compra visivel no rodape para proximas rodadas */
.panel.is-drawing-mode .buy-inline-bar {
  display: flex !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5100;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(7, 12, 24, 0.08) 0%, rgba(7, 12, 24, 0.92) 35%, rgba(7, 12, 24, 0.98) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px);
}

.panel.is-drawing-mode .buy-inline-bar.is-hidden {
  display: none !important;
}

.panel.is-drawing-mode.is-purchase-ui-enabled .best-cards {
  margin-bottom: 86px;
}

.panel.is-drawing-mode:not(.is-purchase-ui-enabled) .best-cards {
  margin-bottom: 0;
}

/* countdown-card replaced by draw-center + countdown-area */

.countdown {
  margin-top: 6px;
  font-size: clamp(2.2rem, 10vw, 4rem);
  font-family: "Archivo Black", sans-serif;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #f0fdf4;
  text-shadow: 0 0 30px rgba(46, 204, 113, 0.35), 0 2px 8px rgba(0,0,0,0.5);
}

.draw-center.is-replay .countdown {
  letter-spacing: 0.08em;
  color: #fef3c7;
  text-shadow: 0 0 30px rgba(212, 168, 67, 0.40), 0 2px 8px rgba(0,0,0,0.5);
}

.draw-center.is-replay .countdown-text {
  margin-top: 4px;
  color: #fffbeb;
  font-weight: 700;
  font-size: 0.85rem;
}

.countdown-text {
  margin: 6px 0 0;
  color: rgba(248, 250, 252, 0.85);
  font-size: 0.88rem;
}

/* ---- Info bar compacta ---- */
.info-bar {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 4px;
  padding: 6px 8px;
  min-height: 40px;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.info-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  line-height: 1.2;
  transition: background 0.2s;
}

.info-item b {
  font-size: 0.58rem;
  color: var(--accent-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 1;
}

.info-item em {
  font-style: normal;
  font-weight: 800;
  color: #f1f5f9;
  font-size: 0.85rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---- Draw center (countdown OU bola grande) ---- */
.draw-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 0;
  width: 100%;
}

/* Por padrao: countdown visivel, bola grande escondida */
.draw-center .draw-big-ball-area {
  display: none;
}

/* Quando sorteando ou replay: esconde countdown, mostra bola grande */
.draw-center.is-drawing .countdown-area,
.draw-center.is-replay .countdown-area {
  display: none;
}

.draw-center.is-drawing .draw-big-ball-area,
.draw-center.is-replay .draw-big-ball-area {
  display: flex;
}

.countdown-area {
  text-align: center;
  padding: 8px;
  width: 100%;
}

/* ---- Balls section ---- */
.balls-section {
  flex-shrink: 0;
}

.draw-live-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0;
}

.draw-live {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.draw-big-ball-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 0;
}

.draw-big-ball-wrap {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.big-ball {
  width: clamp(110px, 28vw, 170px);
  height: clamp(110px, 28vw, 170px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #fef3c7, #f59e0b 55%, #d97706 90%);
  color: #1a1000;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 900;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.50), inset 0 2px 0 rgba(255,255,255,0.45);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.15s;
}

.big-ball-pop {
  animation: bigBallPop 0.35s ease-out;
}

@keyframes bigBallPop {
  0%   { transform: scale(0.7); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Filar a bola — interrogacao que revela o numero */
.big-ball-mystery {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -2px;
  width: clamp(110px, 28vw, 170px);
  height: clamp(110px, 28vw, 170px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 28%, #e0e7ff, #6366f1 55%, #4338ca 90%);
  color: #fff;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(3.2rem, 8vw, 5rem);
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.55), inset 0 2px 0 rgba(255,255,255,0.40);
  z-index: 2;
  pointer-events: none;
}

.big-ball-mystery.is-hidden {
  display: none;
}

.big-ball-mystery.is-revealing {
  animation: mysteryReveal 15s ease-in-out forwards;
}

@keyframes mysteryReveal {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  10%  { transform: translate(-50%, -50%) scale(0.97) rotate(3deg); opacity: 0.97; }
  20%  { transform: translate(-50%, -50%) scale(0.90) rotate(-4deg); opacity: 0.92; }
  33%  { transform: translate(-50%, -50%) scale(0.75) rotate(6deg); opacity: 0.80; }
  50%  { transform: translate(-50%, -50%) scale(0.55) rotate(-10deg); opacity: 0.60; }
  65%  { transform: translate(-50%, -50%) scale(0.35) rotate(15deg); opacity: 0.40; }
  80%  { transform: translate(-50%, -50%) scale(0.18) rotate(-25deg); opacity: 0.20; }
  90%  { transform: translate(-50%, -50%) scale(0.08) rotate(40deg); opacity: 0.08; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(180deg); opacity: 0; }
}

/* Chuva de moedas no bingo */
.coin-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.coin-rain-container .coin {
  position: absolute;
  top: -50px;
  font-size: 1.8rem;
  animation: coinFall linear forwards;
  will-change: transform;
}

@keyframes coinFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Confetti burst para Quadra */
.confetti-burst-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  bottom: -30px;
  animation: confettiBurst ease-out forwards;
  will-change: transform;
}

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

.confetti-ribbon {
  opacity: 0.9;
}

@keyframes confettiBurst {
  0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(0.3); opacity: 0; }
  10%  { opacity: 1; transform: translateY(-30vh) translateX(var(--confetti-x, 0px)) rotate(90deg) scale(1); }
  30%  { opacity: 1; transform: translateY(-60vh) translateX(calc(var(--confetti-x, 0px) * 1.2)) rotate(270deg) scale(1); }
  100% { transform: translateY(20vh) translateX(calc(var(--confetti-x, 0px) * 0.5)) rotate(720deg) scale(0.4); opacity: 0; }
}

/* Fogos de artifício para Quina */
.fireworks-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.firework-burst {
  position: absolute;
  width: 0;
  height: 0;
}

.firework-spark {
  position: absolute;
  top: 0;
  left: 0;
  animation: fireworkExplode ease-out forwards;
  will-change: transform;
}

.firework-emoji {
  font-size: 1.2rem;
}

.firework-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

@keyframes fireworkExplode {
  0%   { transform: translate(0, 0) scale(0); opacity: 1; }
  20%  { transform: translate(
            calc(cos(var(--fw-angle)) * var(--fw-dist) * 0.6),
            calc(sin(var(--fw-angle)) * var(--fw-dist) * 0.6)
         ) scale(1.2); opacity: 1; }
  100% { transform: translate(
            calc(cos(var(--fw-angle)) * var(--fw-dist)),
            calc(sin(var(--fw-angle)) * var(--fw-dist) + 30px)
         ) scale(0.3); opacity: 0; }
}

/* Fallback para browsers sem cos()/sin() */
@supports not (transform: translate(calc(cos(0deg) * 1px), 0)) {
  @keyframes fireworkExplode {
    0%   { transform: translate(0, 0) scale(0); opacity: 1; }
    20%  { transform: translate(var(--fw-dist), calc(var(--fw-dist) * -0.5)) scale(1.2); opacity: 1; }
    100% { transform: translate(calc(var(--fw-dist) * 0.7), calc(var(--fw-dist) * 0.3 + 30px)) scale(0.3); opacity: 0; }
  }
}

/* ============================
   ANIMAÇÕES TEMÁTICAS
   ============================ */

/* 1. Filar a bola — emojis temáticos explodindo ao redor */
.filar-theme-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.filar-burst-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.6rem;
  animation: filarBurst ease-out infinite;
  will-change: transform;
  opacity: 0;
}

@keyframes filarBurst {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.3); opacity: 0; }
  15%  { opacity: 0.9; transform: translate(calc(-50% + cos(var(--burst-angle)) * 60px), calc(-50% + sin(var(--burst-angle)) * 60px)) rotate(120deg) scale(1.2); }
  50%  { opacity: 0.7; transform: translate(calc(-50% + cos(var(--burst-angle)) * 100px), calc(-50% + sin(var(--burst-angle)) * 100px)) rotate(240deg) scale(0.9); }
  80%  { opacity: 0.3; }
  100% { transform: translate(calc(-50% + cos(var(--burst-angle)) * 140px), calc(-50% + sin(var(--burst-angle)) * 140px)) rotate(360deg) scale(0.4); opacity: 0; }
}

/* Fallback: animação circular simples para browsers sem suporte a cos/sin */
@supports not (transform: translate(calc(cos(0deg) * 1px), 0)) {
  @keyframes filarBurst {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    15%  { opacity: 0.9; transform: translate(calc(-50% + 40px), calc(-50% - 40px)) scale(1.2); }
    50%  { opacity: 0.6; transform: translate(calc(-50% + 80px), calc(-50% - 80px)) scale(0.9); }
    100% { transform: translate(calc(-50% + 120px), calc(-50% - 120px)) scale(0.3); opacity: 0; }
  }
}

/* Texto de suspense temático no filar */
.filar-suspense-text {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fef08a;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
  z-index: 4;
  animation: filarSuspensePulse 1.5s ease-in-out infinite;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.75);
  padding: 2px 12px;
  border-radius: 6px;
}

@keyframes filarSuspensePulse {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.theme-light .filar-suspense-text {
  color: #b45309;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* 2. Spotlight — emojis temáticos flutuando */
.spotlight-theme-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.spotlight-burst-emoji {
  position: absolute;
  bottom: -1.5rem;
  font-size: 1.3rem;
  animation: spotlightEmojiRise linear infinite;
  will-change: transform;
  opacity: 0.5;
}

@keyframes spotlightEmojiRise {
  0%   { transform: translateY(0) rotate(0deg) scale(0.6); opacity: 0; }
  10%  { opacity: 0.5; }
  50%  { transform: translateY(-50%) rotate(180deg) scale(1); opacity: 0.4; }
  100% { transform: translateY(-120%) rotate(360deg) scale(0.5); opacity: 0; }
}

/* Texto de parabéns temático no spotlight */
.spotlight-congrats-text {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #a5f3fc;
  margin-top: 6px;
  z-index: 2;
  position: relative;
  animation: congratsPulse 2s ease-in-out infinite;
}

@keyframes congratsPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}

.theme-light .spotlight-congrats-text {
  color: #0369a1;
}

/* 3. Bola nova — glow temático ao aparecer */
.ball-themed-glow {
  animation: ballThemedGlow 1.5s ease-out both;
}

@keyframes ballThemedGlow {
  0%   { transform: scale(0.5); opacity: 0; box-shadow: 0 0 12px 4px rgba(250, 204, 21, 0.7), 0 2px 8px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255,255,255,0.40); }
  30%  { transform: scale(1.15); opacity: 1; box-shadow: 0 0 18px 6px rgba(250, 204, 21, 0.5), 0 2px 8px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255,255,255,0.40); }
  100% { transform: scale(1); opacity: 1; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255,255,255,0.40); }
}

/* Modal sem-vendas */
.sem-vendas-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.sem-vendas-modal > .sem-vendas-body {
  pointer-events: auto;
}
.sem-vendas-modal.is-hidden { display: none; }
.sem-vendas-body {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #f59e0b;
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 400px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 0 60px rgba(245, 158, 11, 0.25);
  animation: semVendasIn 0.4s ease;
}
@keyframes semVendasIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.sem-vendas-icon { font-size: 3rem; display: block; margin-bottom: 12px; }
.sem-vendas-msg  { font-family: "Archivo Black", sans-serif; font-size: 1.15rem; color: #fbbf24; margin: 0 0 8px; }
.sem-vendas-sub  { font-size: 0.95rem; color: #94a3b8; margin: 0 0 16px; }
.sem-vendas-countdown { font-family: "Archivo Black", sans-serif; font-size: 1.5rem; color: #fff; letter-spacing: 0.05em; min-height: 2rem; }

/* Modal pagamento de premios pos-bingo */
.premios-pagamento-modal {
  position: fixed;
  inset: 0;
  z-index: 6100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(6px);
}
.premios-pagamento-modal.is-hidden { display: none; }
.premios-pagamento-body {
  background: linear-gradient(135deg, #1a2a10 0%, #0f1a07 100%);
  border: 2px solid #4ade80;
  border-radius: 20px;
  padding: 36px 40px;
  max-width: 440px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 0 60px rgba(74, 222, 128, 0.25);
  animation: premiosPagamentoIn 0.4s ease;
}
@keyframes premiosPagamentoIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.premios-pagamento-icon  { font-size: 3.5rem; display: block; margin-bottom: 12px; }
.premios-pagamento-title { font-family: "Archivo Black", sans-serif; font-size: 1.35rem; color: #4ade80; margin: 0 0 12px; }
.premios-pagamento-msg   { font-size: 1rem; color: #d1fae5; margin: 0 0 20px; line-height: 1.5; }
.premios-pagamento-countdown { font-family: "Archivo Black", sans-serif; font-size: 1.1rem; color: #86efac; letter-spacing: 0.04em; min-height: 1.5rem; }

/* Overlay preparando sorteio */
.preparing-overlay {
  left: 0;
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 80%, transparent 100%);
  z-index: 5000;
  overflow: hidden;
  animation: preparingPulse 2s ease-in-out infinite;
}

.preparing-overlay.is-hidden {
  display: none;
}

.preparing-emojis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.preparing-emoji {
  position: absolute;
  font-size: 2.2rem;
  animation: emojiFloat linear infinite;
  will-change: transform;
  opacity: 0.9;
}

.preparing-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fef08a;
  text-align: center;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: preparingBounce 1.5s ease-in-out infinite;
}

.preparing-sub {
  font-size: 0.9rem;
  color: #94a3b8;
  text-align: center;
  z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.preparing-big-emoji {
  font-size: 7rem;
  line-height: 1;
  z-index: 2;
  min-height: 1em;
  animation: preparingBounce 1.2s ease-in-out infinite;
}

@keyframes preparingPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(56, 189, 248, 0.2); }
  50%      { box-shadow: 0 0 50px rgba(250, 204, 21, 0.3); }
}

@keyframes preparingBounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

@keyframes emojiFloat {
  0%   { transform: translateY(100%) rotate(0deg) scale(0.5); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: translateY(10%) rotate(120deg) scale(1.3); opacity: 1; }
  70%  { transform: translateY(-40%) rotate(240deg) scale(1); opacity: 0.8; }
  100% { transform: translateY(-100%) rotate(360deg) scale(0.4); opacity: 0; }
}

.theme-light .preparing-overlay {
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(226, 232, 240, 0.9) 80%, transparent 100%);
}

.theme-light .preparing-text {
  color: #b45309;
}

.theme-light .preparing-sub {
  color: #475569;
}

/* Partículas ambientes durante o sorteio */
.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.ambient-emoji {
  position: absolute;
  bottom: -2rem;
  animation: ambientFloat linear infinite;
  will-change: transform;
  opacity: 0.35;
  filter: blur(0.5px);
}

@keyframes ambientFloat {
  0%   { transform: translateY(0) rotate(0deg) scale(0.7); opacity: 0; }
  10%  { opacity: 0.35; }
  50%  { transform: translateY(-50vh) rotate(180deg) scale(1); opacity: 0.3; }
  100% { transform: translateY(-100vh) rotate(360deg) scale(0.5); opacity: 0; }
}

.big-ball-order {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  order: -1;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  white-space: nowrap;
}

@media (min-width: 901px) {
  .big-ball-order {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--text);
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}

.recent-balls {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.recent-ball {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #e2e8f0, #94a3b8 60%, #64748b 90%);
  color: #1e293b;
  font-weight: 800;
  font-size: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  opacity: 0.85;
}

.recent-ball:first-child {
  opacity: 1;
}

.recent-ball:nth-child(2) {
  opacity: 0.7;
  transform: scale(0.9);
}

.recent-ball:nth-child(3) {
  opacity: 0.55;
  transform: scale(0.8);
}

/* draw-live-head removed — see .draw-live-foot */

.draw-balls-count {
  margin: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: rgba(56, 189, 248, 0.08);
  color: #7dd3fc;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.draw-state {
  margin: 0;
  color: var(--accent-3);
  font-weight: 700;
  animation: pulseText 1.4s ease-in-out infinite;
}

.balls-section {
  display: none;
}

.balls-track {
  margin-top: 4px;
  min-height: 30px;
  max-height: 80px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 5px 8px;
}

.ball {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 28% 28%, #fef3c7, #f59e0b 60%, #d97706 90%);
  color: #2a1e00;
  font-weight: 800;
  font-size: 0.7rem;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255,255,255,0.40);
  animation: ballPop 0.25s ease-out both;
}

.balls-track.dense {
  gap: 6px;
}

.balls-track.dense .ball {
  width: 30px;
  height: 30px;
  font-size: 0.78rem;
}

.balls-track.ultra-dense {
  gap: 4px;
}

.balls-track.ultra-dense .ball {
  width: 25px;
  height: 25px;
  font-size: 0.68rem;
}

/* ---- Painel de números sorteados ---- */
.number-panel {
  flex-shrink: 0;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0px;
  padding: 1px;
  background: #0a0e1a;
  border: 1px solid #1e293b;
  border-radius: 4px;
}

.num-cell {
  display: grid;
  place-items: center;
  padding: 2px 0;
  border-radius: 0;
  background: #111827;
  border: 1px solid #0a0e1a;
  color: rgba(148, 163, 184, 0.6);
  font-weight: 700;
  font-size: 0.6rem;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  transition: all 0.25s ease;
}

.num-cell.drawn {
  background: linear-gradient(135deg, #15803d, #16a34a);
  border-color: #22c55e;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.35);
  animation: numPop 0.3s ease-out both, drawnGlow 2.5s ease-in-out infinite 0.4s;
}

.num-cell.drawn.latest {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  border-color: #f87171;
  color: #fff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
  animation: numPop 0.3s ease-out both, pulseLatest 1.2s ease-in-out infinite 0.3s;
}

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

@keyframes drawnGlow {
  0%, 100% {
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.35);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.65), 0 0 2px rgba(255, 255, 255, 0.15);
    filter: brightness(1.15);
  }
}

@keyframes pulseLatest {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.6); }
  50%      { box-shadow: 0 0 14px rgba(239, 68, 68, 0.9); }
}

.winner-spotlight {
  position: relative;
  z-index: 10;
  border: 2px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius);
  padding: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.96));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(245, 158, 11, 0.10);
  animation: riseIn 0.35s ease-out both;
  max-height: none;
  overflow: visible;
  width: auto;
  left: auto;
  top: auto;
  transform: none;
}

body.spotlight-open::before {
  display: none;
}

.winner-spotlight.is-hidden {
  display: none;
}

.winner-spotlight h2 {
  margin: 0;
  color: #fef08a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
}

.winner-spotlight.is-fullscreen {
  position: relative;
  inset: auto;
  transform: none;
  width: auto;
  max-height: none;
  height: auto;
  border-radius: var(--radius);
  border: 2px solid rgba(245, 158, 11, 0.45);
  padding: 12px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.97));
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: visible;
  animation: riseIn 0.35s ease-out both;
}

.winner-spotlight.is-quadra-modal {
  --prize-accent-a: #fde047;
  --prize-accent-b: #38bdf8;
  --prize-accent-c: #f59e0b;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  max-height: none;
  border: 2px solid rgba(245, 158, 11, 0.55);
  border-radius: var(--radius);
  padding: 12px;
}

.winner-spotlight.is-big-prize-modal {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: auto;
  max-height: none;
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  padding: 12px;
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) {
  top: auto;
  width: auto;
  max-height: none;
  padding: 12px;
}

.winner-spotlight.is-big-prize-modal h2 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin: 0 0 8px;
  min-width: auto;
  padding: 6px 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #145a32, #0b3d21);
  border: 1px solid rgba(245, 158, 11, 0.55);
  text-align: center;
  color: #fde047;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: 0.03em;
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) h2 {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
}

.winner-spotlight.is-quadra-modal h2 {
  font-size: clamp(0.95rem, 2vw, 1.2rem);
}

.winner-spotlight.is-big-prize-modal .spotlight-name {
  margin: 0;
  width: 100%;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #166534, #14532d);
  text-align: center;
  text-transform: uppercase;
  color: #fef08a;
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  line-height: 1.2;
  padding: 5px 8px;
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) .spotlight-name {
  width: 100%;
  font-size: clamp(0.82rem, 1.6vw, 1rem);
}

.winner-spotlight.is-big-prize-modal .spotlight-card {
  margin: 0;
  width: 100%;
  border: 1px solid rgba(245, 158, 11, 0.55);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: rgba(2, 26, 10, 0.70);
  text-align: center;
  color: #f8fafc;
  font-size: clamp(1rem, 1.9vw, 1.55rem);
  padding: 6px 10px;
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) .spotlight-card {
  width: 100%;
  font-size: clamp(0.82rem, 1.4vw, 1rem);
}

.winner-spotlight.is-big-prize-modal .spotlight-numbers {
  margin: 8px 0 0;
  width: 100%;
  gap: 3px;
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) .spotlight-numbers {
  width: 100%;
}

.winner-spotlight.is-big-prize-modal .spotlight-numbers span {
  min-height: clamp(28px, 4vh, 42px);
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  border-width: 1px;
  border-radius: 6px;
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
}

.winner-spotlight.is-big-prize-modal .spotlight-numbers span.hit {
  background: #16a34a;
  border-color: #4ade80;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}

.winner-spotlight.is-big-prize-modal .spotlight-numbers span.prize-hit {
  background: #0e7490;
  border-color: #67e8f9;
  color: #f0fdff;
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.30);
}

.winner-spotlight.is-big-prize-modal .spotlight-numbers span.winning-ball {
  background: #dc2626;
  border-color: #fca5a5;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.50);
}

.winner-spotlight.is-big-prize-modal:not(.is-quadra-modal) .spotlight-numbers span {
  min-height: clamp(24px, 3.5vh, 36px);
  font-size: clamp(0.8rem, 1.8vw, 1.1rem);
}

.winner-spotlight.is-big-prize-modal .spotlight-timer {
  margin-top: 6px;
  font-size: clamp(0.82rem, 1.6vw, 1.1rem);
  text-align: center;
  color: #fef08a;
}

.winner-spotlight.is-prize-quadra {
  --prize-accent-a: #fde047;
  --prize-accent-b: #ef4444;
  --prize-accent-c: #d4a843;
}

.winner-spotlight.is-prize-quina {
  --prize-accent-a: #a3e635;
  --prize-accent-b: #06b6d4;
  --prize-accent-c: #22c55e;
}

.winner-spotlight.is-prize-bingo {
  --prize-accent-a: #f472b6;
  --prize-accent-b: #a855f7;
  --prize-accent-c: #ec4899;
}

.winner-spotlight.is-prize-acumulado {
  --prize-accent-a: #facc15;
  --prize-accent-b: #f97316;
  --prize-accent-c: #eab308;
}

/* Efeito especial ACUMULADO — brilho dourado intenso pulsante */
.winner-spotlight.is-prize-acumulado.is-prize-animated::before {
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(250, 204, 21, 0.25) 30deg,
      transparent 60deg,
      rgba(249, 115, 22, 0.20) 120deg,
      transparent 170deg,
      rgba(234, 179, 8, 0.28) 220deg,
      transparent 280deg,
      rgba(250, 204, 21, 0.22) 330deg,
      transparent 360deg
    );
  animation: prizeSpin 2.8s linear infinite;
  opacity: 1;
}

.winner-spotlight.is-prize-acumulado.is-prize-animated::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.35), transparent 50%),
    radial-gradient(circle at 20% 30%, rgba(249, 115, 22, 0.30), transparent 35%),
    radial-gradient(circle at 80% 25%, rgba(234, 179, 8, 0.30), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(250, 204, 21, 0.25), transparent 30%),
    radial-gradient(circle at 75% 75%, rgba(249, 115, 22, 0.25), transparent 30%);
  animation: acumuladoPulse 0.8s ease-in-out infinite;
  opacity: 0.7;
}

.winner-spotlight.is-prize-acumulado h2 {
  text-shadow: 0 0 20px rgba(250, 204, 21, 0.8), 0 0 40px rgba(249, 115, 22, 0.5);
  animation: acumuladoTitleGlow 1.2s ease-in-out infinite;
}

@keyframes acumuladoPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

@keyframes acumuladoTitleGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(250, 204, 21, 0.8), 0 0 40px rgba(249, 115, 22, 0.5);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 30px rgba(250, 204, 21, 1), 0 0 60px rgba(249, 115, 22, 0.8), 0 0 80px rgba(234, 179, 8, 0.4);
    transform: scale(1.05);
  }
}

/* Explosão dourada de partículas do acumulado */
.acumulado-gold-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  overflow: hidden;
}

.acumulado-gold-particle {
  position: absolute;
  font-size: 2rem;
  animation: acumuladoParticleFly linear forwards;
  will-change: transform;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.7));
}

@keyframes acumuladoParticleFly {
  0%   { transform: translateY(0) translateX(0) rotate(0deg) scale(0.3); opacity: 0; }
  8%   { opacity: 1; transform: scale(1.2); }
  20%  { transform: translateY(calc(var(--acum-dy, -40vh))) translateX(var(--acum-dx, 0px)) rotate(180deg) scale(1); opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translateY(calc(var(--acum-dy, -40vh) + 30vh)) translateX(calc(var(--acum-dx, 0px) * 0.6)) rotate(720deg) scale(0.3); opacity: 0; }
}

/* Pulso dourado na borda do spotlight do acumulado */
.winner-spotlight.is-prize-acumulado.is-prize-animated {
  box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), 0 0 60px rgba(249, 115, 22, 0.2);
  animation: acumuladoBorderPulse 1.5s ease-in-out infinite;
}

@keyframes acumuladoBorderPulse {
  0%, 100% { box-shadow: 0 0 30px rgba(250, 204, 21, 0.4), 0 0 60px rgba(249, 115, 22, 0.2); }
  50% { box-shadow: 0 0 50px rgba(250, 204, 21, 0.7), 0 0 100px rgba(249, 115, 22, 0.4), 0 0 140px rgba(234, 179, 8, 0.2); }
}

.winner-spotlight.is-prize-animated {
  overflow: hidden;
}

.winner-spotlight.is-prize-animated::before,
.winner-spotlight.is-prize-animated::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

.winner-spotlight.is-prize-animated::before {
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.08) 40deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.12) 150deg,
      transparent 230deg,
      rgba(255, 255, 255, 0.09) 300deg,
      transparent 360deg
    );
  animation: prizeSpin 5.8s linear infinite;
  opacity: 0.85;
}

.winner-spotlight.is-prize-animated::after {
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--prize-accent-a) 42%, transparent), transparent 38%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--prize-accent-b) 35%, transparent), transparent 34%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, var(--prize-accent-c) 38%, transparent), transparent 40%);
  animation: prizePulse 1.25s ease-in-out infinite;
  opacity: 0.5;
}

.winner-spotlight.is-prize-animated > * {
  position: relative;
  z-index: 2;
}

.winner-spotlight.is-quadra-modal h2 {
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
  padding: 5px 12px;
}

.winner-spotlight.is-quadra-modal .spotlight-name {
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
}

.winner-spotlight.is-quadra-modal .spotlight-card {
  font-size: clamp(0.82rem, 1.6vw, 1rem);
}

.winner-spotlight.is-quadra-modal .spotlight-numbers {
  margin-top: 8px;
  gap: 3px;
}

.winner-spotlight.is-quadra-modal .spotlight-numbers span {
  min-height: clamp(28px, 4vh, 42px);
  font-size: clamp(0.9rem, 2vw, 1.3rem);
  border-width: 1px;
}

.winner-spotlight.is-quadra-modal .spotlight-timer {
  margin-top: 6px;
  font-size: clamp(0.82rem, 1.6vw, 1.1rem);
  text-align: center;
}

.winner-spotlight.is-fullscreen h2 {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  letter-spacing: 0.04em;
  text-align: center;
}

.winner-spotlight.is-fullscreen .spotlight-name {
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  text-align: center;
  color: #fef08a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winner-spotlight.is-fullscreen .spotlight-card {
  font-size: clamp(0.78rem, 1.3vw, 1rem);
  text-align: center;
  color: #bae6fd;
}

.winner-spotlight.is-fullscreen .spotlight-numbers {
  overflow-y: auto;
  max-height: 40vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr));
  gap: 8px;
  align-content: start;
  padding: 4px 2px;
  margin: 0;
}

.winner-spotlight.is-fullscreen .spotlight-numbers > span {
  min-height: clamp(30px, 5vh, 48px);
  border-radius: 8px;
  font-size: clamp(1rem, 2vw, 1.5rem);
  border-width: 1px;
}

.winner-spotlight.is-fullscreen .spotlight-winner-slot {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 10px;
  padding: 8px;
}

.winner-spotlight.is-fullscreen .spotlight-slot-label {
  margin: 0 0 4px;
  font-size: clamp(0.68rem, 0.9vw, 0.82rem);
  font-weight: 700;
  color: #fde047;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spotlight-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(3px, 0.4vw, 5px);
}

.spotlight-card-grid span {
  display: grid;
  place-items: center;
  border-radius: 6px;
  padding: 3px 0;
  min-height: clamp(26px, 3.5vh, 46px);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-weight: 800;
  font-size: clamp(0.8rem, 1.4vw, 1.05rem);
  color: #f8fafc;
}

.spotlight-card-grid span.hit {
  background: #16a34a;
  border-color: #4ade80;
  color: #fff;
}

.spotlight-card-grid span.prize-hit {
  background: #0e7490;
  border-color: #67e8f9;
  color: #f0fdff;
}

.spotlight-card-grid span.winning-ball {
  background: #dc2626;
  border-color: #fca5a5;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.45);
}

.spotlight-card-grid span.empty {
  background: rgba(148, 163, 184, 0.20);
  border-color: rgba(148, 163, 184, 0.35);
  color: transparent;
}

.winner-spotlight.is-fullscreen .spotlight-timer {
  margin-top: 4px;
  font-size: clamp(0.82rem, 1.5vw, 1.2rem);
  text-align: center;
  color: #fef08a;
}

.start-alert-bubble {
  position: relative;
  z-index: auto;
  display: grid;
  place-items: center;
  text-align: center;
  margin: 12px auto 0;
  width: clamp(110px, 28vw, 160px);
  height: clamp(110px, 28vw, 160px);
  border-radius: 999px;
  border: 3px solid rgba(245, 158, 11, 0.90);
  background: radial-gradient(circle at 30% 30%, #fff8e1, rgba(245, 158, 11, 0.95));
  box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.20), 0 8px 28px rgba(0, 0, 0, 0.35);
  color: #111827;
  pointer-events: none;
  animation: pulseStartAlert 0.95s ease-in-out infinite;
}

.start-alert-bubble.is-hidden {
  display: none;
}

.start-alert-value {
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
}

.start-alert-text {
  margin: 8px 0 0;
  max-width: 85%;
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.spotlight-name {
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: #e2e8f0;
}

.spotlight-card {
  margin: 6px 0 0;
  color: #a8b4c8;
  font-weight: 700;
}

.spotlight-numbers {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.spotlight-numbers span {
  display: grid;
  place-items: center;
  border-radius: 10px;
  padding: 6px 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-weight: 800;
  font-size: 1.35rem;
  color: #f8fafc;
}

.spotlight-numbers span.empty {
  color: transparent;
  background: rgba(148, 163, 184, 0.25);
  border-color: rgba(148, 163, 184, 0.45);
}

.spotlight-numbers span.hit {
  background: #16a34a;
  border-color: #4ade80;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.30);
}

.spotlight-numbers span.prize-hit {
  background: #0e7490;
  border-color: #67e8f9;
  color: #f0fdff;
  box-shadow: 0 0 0 2px rgba(103, 232, 249, 0.30);
}

.spotlight-numbers span.winning-ball {
  background: #dc2626;
  border-color: #fca5a5;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.50);
}

.spotlight-timer {
  margin: 10px 0 0;
  color: #fef9c3;
  font-size: 0.88rem;
  font-weight: 700;
}

.spotlight-winner-slot {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}

.spotlight-winner-slot:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.spotlight-slot-label {
  margin: 0 0 4px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fde047;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.info-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--card-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  animation: riseIn 0.45s ease-out both;
}

.info-card h2 {
  margin: 0;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}

.info-card p {
  margin: 4px 0 0;
  font-size: clamp(0.92rem, 1.8vw, 1.15rem);
  font-weight: 700;
  color: #e2e8f0;
}

.prize-list {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: transparent;
  overflow: visible;
  flex-shrink: 0;
}

.prize-list h2 {
  display: none;
}

#prizeItems {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#prizeItems li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 10px;
  border-bottom: none;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Cores das barras de prêmio — degradê por posição */
#prizeItems li:nth-child(1) {
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
}
#prizeItems li:nth-child(2) {
  background: linear-gradient(90deg, #15803d 0%, #16a34a 100%);
}
#prizeItems li:nth-child(3) {
  background: linear-gradient(90deg, #166534 0%, #15803d 100%);
}
/* Acumulado — dourado */
#prizeItems li:nth-child(n+4) {
  background: linear-gradient(90deg, #b45309 0%, #d97706 60%, #f59e0b 100%);
}

#prizeItems li.revealed {
  box-shadow: 0 0 0 2px rgba(134, 239, 172, 0.5), 0 2px 12px rgba(46, 204, 113, 0.25);
}

#prizeItems li.prize-quadra.revealed .prize-name,
#prizeItems li.prize-quadra.revealed .prize-value {
  color: #1e293b !important;
}

#prizeItems li.prize-quina.revealed .prize-name,
#prizeItems li.prize-quina.revealed .prize-value {
  color: #fde047 !important;
}

#prizeItems li.prize-bingo.revealed .prize-name,
#prizeItems li.prize-bingo.revealed .prize-value {
  color: #f87171 !important;
}

#prizeItems li.prize-acumulado.revealed .prize-name,
#prizeItems li.prize-acumulado.revealed .prize-value {
  color: #1e293b !important;
}

#prizeItems li:last-child {
  border-bottom: 0;
}

.prize-name {
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.prize-value {
  font-weight: 800;
  color: #fff;
  font-size: 1rem;
  white-space: nowrap;
}

.prize-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
}

.prize-winners {
  display: inline-block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

/* Linha de info do acumulado (segunda linha abaixo do nome/valor) */
#prizeItems li.prize-acumulado {
  flex-wrap: wrap;
}

.prize-jackpot-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-top: 1px;
}

.prize-jackpot-limit {
  font-weight: 700;
  color: #fff;
}

.prize-jackpot-sep {
  color: rgba(255,255,255,0.55);
  padding: 0 4px;
}

.prize-jackpot-remaining {
  font-weight: 800;
  color: #fff;
}

/* Mantido para compatibilidade */
.prize-limit {
  display: none;
}

.prize-split {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: #111827;
  margin-top: 2px;
}

.winner-prize-split {
  font-size: 0.82rem;
  font-weight: 500;
  color: #bae6fd;
}

.best-cards {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 4px 6px;
  background: var(--card-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.replay-box {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--card-bg);
  flex-shrink: 0;
}

.replay-box h2 {
  display: none;
}

.replay-help {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.35;
}

.replay-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.replay-controls input,
.replay-controls button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.80);
  color: var(--text);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
}

.replay-controls button {
  cursor: pointer;
  font-weight: 700;
}

.replay-controls button:hover {
  border-color: rgba(56, 189, 248, 0.5);
}

.replay-status {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.replay-status:empty {
  display: none;
}

.winner-boards {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--card-bg);
}

.winner-boards h2 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

#winnerBoards {
  display: grid;
  gap: 10px;
}

.winner-prize {
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: var(--radius);
  padding: 10px;
  background: rgba(15, 23, 42, 0.90);
}

.winner-prize h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--accent-2);
}

.winner-card {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  margin-top: 8px;
  background: rgba(15, 23, 42, 0.85);
}

.winner-card strong {
  display: block;
  color: #fef08a;
  font-size: 0.88rem;
}

.winner-card span {
  color: #bae6fd;
  font-size: 0.8rem;
}

.winner-numbers {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.replay-box {
  grid-area: replay;
}

.winner-spotlight {
  grid-area: spotlight;
}

.prize-list {
  grid-area: prizes;
}

.winner-boards {
  grid-area: winners;
}

.best-cards {
  grid-area: cards;
}

.best-cards h2 {
  margin: 0 0 2px;
  font-size: 0.78rem;
  flex-shrink: 0;
}

@keyframes oneAwayTitleBlink {
  0%, 49.9% { color: #000; }
  50%, 100% { color: var(--accent); }
}
.best-cards h2.is-one-away {
  color: var(--accent);
  animation: none;
}

.best-cards-summary {
  margin-left: 6px;
  font-size: 0.7rem;
  color: var(--accent-2);
  white-space: nowrap;
  font-weight: 600;
  flex-shrink: 0;
}

#bestCardsItems {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

#bestCardsItems.own-cards-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 2px;
}

#bestCardsItems.own-cards-layout .best-card-own {
  display: block;
  border: none;
  background: transparent;
  padding: 0;
}

#bestCardsItems.own-cards-layout .best-card-own:hover {
  background: transparent;
}

#bestCardsItems.own-cards-layout .best-card-own .pcard {
  height: 100%;
}

@media (max-width: 600px) {
  #bestCardsItems.own-cards-layout {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  #bestCardsItems.own-cards-layout {
    grid-template-columns: 1fr;
  }
}

.best-card-head,
.best-card {
  display: grid;
  grid-template-columns: 50px 36px minmax(60px, 1.5fr) minmax(120px, 2fr);
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 5px 8px;
}

.best-card {
  border: 1px solid var(--card-border);
  background: rgba(30, 41, 59, 0.50);
  transition: background 0.15s;
}

.best-card:hover {
  background: rgba(30, 41, 59, 0.75);
}

.best-card-head {
  border: 1px solid rgba(56, 189, 248, 0.25);
  background: #1e293b;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7dd3fc;
  position: sticky;
  top: 0;
  z-index: 2;
}

.best-card-head .best-col.owner {
  white-space: normal;
  line-height: 1.15;
}

.best-card-empty {
  display: block;
}

.best-card-empty strong {
  color: #3498db;
}

.best-card-empty span {
  color: var(--muted);
  font-size: 0.9rem;
}

.best-col {
  font-size: 0.8rem;
  line-height: 1.2;
  min-width: 0;
}

.best-col.cupom {
  color: #fef08a;
  font-weight: 800;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.best-col.owner {
  color: #e2e8f0;
  font-weight: 700;
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  text-align: left;
  line-height: 1.1;
}

.best-col.missing {
  text-align: center;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  border: 1px solid #22c55e;
  border-radius: 4px;
  padding: 0 2px;
  min-width: 28px;
  height: 18px;
  color: #f9fafb;
  font-size: 0.7rem;
}

/* Mobile/padrao: mostrar FT curto; no desktop o media query troca para FALTAM */
.ft-full { display: none; }
.ft-short { display: inline; }
.cupom-short { display: none; }
.cupom-full { display: inline; }
.numbers-label-full { display: inline; }
.numbers-label-short { display: none; }

.best-col.missing.miss-high {
  color: #f9fafb;
}

.best-col.missing.miss-near {
  color: #f9fafb;
}

.best-col.missing.miss-zero {
  color: #f9fafb;
}

.best-col.numbers {
  white-space: normal;
  overflow: visible;
  color: #cbd5e1;
}

.missing-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
}

.missing-grid.missing-grid-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}


.missing-cell {
  min-height: 22px;
  border: 1px solid #0284c7;
  background: #0ea5e9;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #f9fafb;
}

.missing-cell.empty {
  color: transparent;
  background: rgba(14, 165, 233, 0.25);
  border-color: rgba(2, 132, 199, 0.7);
}

.missing-cell.blink {
  animation: missingBlink 0.7s steps(2, end) infinite;
}

.missing-cell.blink-bingo-two {
  animation: missingBlinkBingoTwo 0.55s linear infinite;
}

.missing-cell.hit {
  background: #16a34a !important;
  border-color: #22c55e !important;
  color: #fff !important;
  animation: hitFlash 0.6s ease-out;
}

@keyframes hitFlash {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); background: #15803d; }
  100% { transform: scale(1); background: #16a34a; }
}

.missing-cell.completed {
  background: #0f766e;
  border-color: #5eead4;
  color: #f0fdfa;
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.30);
}

.missing-cell.row-tag {
  position: relative;
}

.missing-cell .row-tag-badge {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 0.46rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fde68a;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.missing-cell .row-tag-badge.row-tag-alone {
  position: static;
  font-size: 0.62rem;
  color: #fef3c7;
}

/* Anuncio de premio centralizado */
.prize-announcement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  z-index: 70;
  font-family: "Archivo Black", sans-serif;
  font-size: clamp(1.1rem, 4.5vw, 3.5rem);
  font-weight: 900;
  color: #fbbf24;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.6), 0 4px 8px rgba(0,0,0,0.5);
  background: rgba(0, 0, 0, 0.85);
  padding: 16px 20px;
  border-radius: 20px;
  border: 3px solid #fbbf24;
  box-shadow: 0 0 60px rgba(251, 191, 36, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  max-width: 90vw;
  white-space: normal;
  word-break: break-word;
}

.prize-announcement.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

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

@keyframes spotlightEnter {
  from {
    transform: translate(-50%, -46%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

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

@keyframes drift {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(14px) rotate(8deg);
  }
}

@keyframes pulseText {
  0%,
  100% {
    opacity: 0.85;
  }
  50% {
    opacity: 1;
  }
}

@keyframes ballPop {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes prizeReveal {
  from {
    transform: translateX(-6px);
    opacity: 0.5;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulseStartAlert {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes missingBlink {
  0%,
  100% {
    background: rgba(20, 34, 68, 0.92);
    color: #d4a843;
    border-color: rgba(52, 152, 219, 0.45);
  }
  50% {
    background: #dc2626;
    color: #fff;
    border-color: #fca5a5;
  }
}

@keyframes missingBlinkBingoTwo {
  0%,
  100% {
    background: #991b1b;
    color: #fff7ed;
    border-color: #fecaca;
    box-shadow: 0 0 0 1px rgba(254, 202, 202, 0.25);
  }
  50% {
    background: #facc15;
    color: #111827;
    border-color: #fde68a;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.28);
  }
}

@keyframes prizeSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prizePulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.7;
  }
}

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

/* Mobile: aplica em viewports estreitos OU em qualquer dispositivo touch
   (cobre "Solicitar site para desktop" no Chrome Android) */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  body {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .bg-shape {
    display: none;
  }

  .panel {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    padding: 4px 6px;
    gap: 3px;
    background: rgba(15, 23, 42, 0.98);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  /* Top bar mobile */
  .top-bar {
    border-radius: 0;
    padding: 2px 6px;
  }

  /* Premios compactos */
  #prizeItems {
    gap: 2px;
  }

  #prizeItems li {
    padding: 3px 8px;
    font-size: 0.72rem;
    border-radius: 6px;
  }

  .prize-value {
    font-size: 0.75rem;
  }

  .prize-badge {
    font-size: 0.55rem;
    padding: 1px 5px;
  }

  /* Info bar compacta */
  .info-bar {
    padding: 4px 4px;
    gap: 3px;
  }

  .info-item {
    padding: 3px 4px;
    border-radius: 6px;
  }

  .info-item b {
    font-size: 0.52rem;
  }

  .info-item em {
    font-size: 0.78rem;
  }

  /* Draw center - bola grande */
  .draw-center {
    padding: 2px 0;
  }

  .big-ball {
    width: 90px;
    height: 90px;
    font-size: 2.4rem;
  }

  .big-ball-order {
    font-size: 0.58rem;
  }

  .recent-ball {
    width: 26px;
    height: 26px;
    font-size: 0.6rem;
  }

  .draw-big-ball-area {
    gap: 8px;
    padding: 4px 0;
  }

  /* Countdown */
  .countdown {
    font-size: clamp(1.6rem, 10vw, 2.5rem);
    margin-top: 4px;
  }

  .countdown-text {
    font-size: 0.75rem;
    margin-top: 4px;
  }

  .countdown-area {
    padding: 6px 4px;
    width: 100%;
  }

  /* Flip-clock mobile — ocupa toda a largura */
  .flip-clock {
    gap: 6px;
    width: 100%;
    padding: 0 2px;
  }

  .flip-digit {
    flex: 1;
    height: clamp(60px, 20vw, 100px);
    font-size: clamp(2rem, 9vw, 3.5rem);
    border-radius: 8px;
  }

  .flip-sep {
    font-size: clamp(1.8rem, 7vw, 3rem);
  }

  /* Waiting mode mobile: bigger elements */
  .panel:not(.is-drawing-mode) {
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
  }

  .panel:not(.is-drawing-mode) #prizeItems li {
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 8px;
  }

  .panel:not(.is-drawing-mode) .prize-value {
    font-size: 0.9rem;
  }

  .panel:not(.is-drawing-mode) #prizeItems {
    gap: 5px;
  }

  .panel:not(.is-drawing-mode) .info-bar {
    padding: 8px 8px;
    gap: 6px;
  }

  .panel:not(.is-drawing-mode) .info-item {
    padding: 6px 8px;
  }

  .panel:not(.is-drawing-mode) .info-item b {
    font-size: 0.62rem;
  }

  .panel:not(.is-drawing-mode) .info-item em {
    font-size: 0.92rem;
  }

  .panel:not(.is-drawing-mode) .flip-digit {
    height: clamp(80px, 25vw, 120px);
    font-size: clamp(2.6rem, 11vw, 4.5rem);
    border-radius: 12px;
  }

  .panel:not(.is-drawing-mode) .flip-sep {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
  }

  .panel:not(.is-drawing-mode) .flip-clock {
    gap: 10px;
  }

  .panel:not(.is-drawing-mode) .countdown-area {
    padding: 10px 6px;
  }

  .panel:not(.is-drawing-mode) .countdown-text {
    font-size: 0.9rem;
    margin-top: 8px;
  }

  /* Drawing mode mobile: info à esquerda, bola à direita */
  .panel.is-drawing-mode {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto 1fr 1fr;
    grid-template-areas:
      "topbar topbar"
      "prizes prizes"
      "info   draw"
      "nums   nums"
      "cards  cards"
      "pcards pcards";
    gap: 3px;
    padding: 4px 6px;
  }

  /* Sem cartelas do jogador: best-cards ocupa as 2 ultimas rows */
  .panel.is-drawing-mode:not(.has-pcards) .best-cards {
    grid-row: 5 / 7;
  }

  /* Com cartelas do jogador no mobile: player-cards row 5, best-cards row 6 */
  .panel.is-drawing-mode.has-pcards .player-cards-panel {
    grid-row: 5;
    grid-column: 1 / -1;
    min-height: 0;
    overflow: hidden;
  }

  .panel.is-drawing-mode.has-pcards .best-cards {
    grid-row: 6;
    grid-column: 1 / -1;
    min-height: 0;
    overflow: hidden;
  }

  .panel.is-drawing-mode.view-my-cards.has-pcards .best-cards {
    display: none;
  }

  .panel.is-drawing-mode.view-my-cards.has-pcards .player-cards-panel {
    grid-row: 5 / 7;
    grid-column: 1 / -1;
  }

  .panel.is-drawing-mode .info-bar {
    padding: 2px 4px;
    gap: 1px;
    border-radius: 6px;
    min-width: 0;
    width: auto;
  }

  .panel.is-drawing-mode .info-item {
    font-size: 0.58rem;
    gap: 2px;
  }

  .panel.is-drawing-mode .info-item b {
    font-size: 0.45rem;
    min-width: 32px;
  }

  .panel.is-drawing-mode .info-item em {
    font-size: 0.6rem;
  }

  /* Track de bolas */
  .balls-track {
    min-height: 20px;
    max-height: 50px;
    gap: 2px;
    padding: 3px 4px;
  }

  .ball {
    width: 20px;
    height: 20px;
    font-size: 0.58rem;
  }

  .draw-live-foot {
    padding: 1px 0;
  }

  .draw-balls-count,
  .draw-state {
    font-size: 0.65rem;
  }

  /* Painel de numeros mobile */
  .number-grid {
    gap: 0px;
    padding: 1px;
    border-radius: 3px;
  }

  .num-cell {
    font-size: 0.66rem;
    padding: 2px 0;
  }

  /* Best cards - preenche o resto com scroll interno */
  .best-cards {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 2px 4px;
    border-radius: 8px;
  }

  .best-cards h2 {
    font-size: 0.7rem;
    margin: 0 0 1px;
  }

  .best-card-head,
  .best-card {
    /* Colunas: Cupom | FT | Ponto/Online | Números faltantes */
    grid-template-columns: 50px 26px minmax(60px, 1.5fr) minmax(70px, 1.3fr);
    gap: 2px;
    padding: 2px 3px;
    line-height: 1.05;
  }

  .best-card-head {
    font-size: 0.52rem;
  }

  /* No mobile, o titulo FT aparece como texto simples sem badge */
  .best-card-head .best-col.missing {
    background: transparent;
    border: none;
    color: #fef08a;
    font-size: 0.60rem;
    font-weight: 700;
    height: auto;
    min-width: auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .best-col {
    font-size: 0.64rem;
  }

  .missing-grid {
    gap: 2px;
  }

  .missing-cell {
    min-height: 14px;
    font-size: 0.58rem;
  }

  /* Replay compacto */
  .replay-box {
    padding: 3px 6px;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .replay-controls {
    grid-template-columns: 1fr auto;
    gap: 4px;
  }

  .replay-controls input,
  .replay-controls button {
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  /* Winner spotlight compacto */
  .winner-spotlight {
    padding: 6px;
    border-radius: 8px;
  }

  .winner-spotlight h2 {
    font-size: 0.82rem;
  }

  .spotlight-numbers {
    gap: 2px;
  }

  .spotlight-numbers span {
    font-size: 0.8rem;
    padding: 2px 0;
    min-height: 20px;
  }

  .spotlight-card-grid span {
    min-height: 18px;
    font-size: 0.65rem;
  }

  .start-alert-bubble {
    width: clamp(100px, 25vw, 150px);
    height: clamp(100px, 25vw, 150px);
  }

  /* Foco total no premio: oculta painel de sorteio e cartelas atras
     do spotlight, e expande o spotlight pra ocupar tudo abaixo dos premios */
  body.spotlight-open .panel.is-drawing-mode .balls-section,
  body.spotlight-open .panel.is-drawing-mode .number-panel,
  body.spotlight-open .panel.is-drawing-mode .draw-center,
  body.spotlight-open .panel.is-drawing-mode .info-bar,
  body.spotlight-open .panel.is-drawing-mode .best-cards,
  body.spotlight-open .panel.is-drawing-mode .player-cards-panel {
    display: none !important;
  }

  body.spotlight-open .panel.is-drawing-mode .winner-spotlight {
    grid-column: 1 / -1 !important;
    grid-row: 3 / -1 !important;
    max-height: none !important;
    align-self: stretch !important;
  }
}

/* Desktop: SO aplica em viewport >=769px E dispositivo com mouse real
   (hover:hover + pointer:fine). Celular com "Solicitar site para desktop"
   continua tocando em (hover:none), entao essa regra nao casa e o layout
   mobile prevalece. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) {
  body {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  /* ---- Desktop waiting mode: full-width centered layout ---- */
  .panel {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "prizes topbar"
      "prizes center"
      "prizes info";
    gap: 10px;
    align-content: stretch;
    padding: 12px;
  }

  .panel:not(.is-drawing-mode) .prize-list {
    grid-area: prizes;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .panel:not(.is-drawing-mode) .top-bar {
    grid-area: topbar;
  }

  .panel:not(.is-drawing-mode) .draw-center {
    grid-area: center;
    align-self: center;
    justify-self: center;
    max-width: 600px;
  }

  .panel:not(.is-drawing-mode) .info-bar {
    grid-area: info;
    align-self: end;
    justify-self: center;
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(0,0,0,0.15);
    border-radius: 16px;
    backdrop-filter: blur(8px);
  }

  .panel:not(.is-drawing-mode) .info-item {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
  }

  .panel:not(.is-drawing-mode) .info-item b {
    font-size: 0.72rem;
  }

  .panel:not(.is-drawing-mode) .info-item em {
    font-size: 1.1rem;
  }

  .panel:not(.is-drawing-mode) .flip-digit {
    height: 160px;
    font-size: 6rem;
    max-width: 140px;
    border-radius: 16px;
  }

  .panel:not(.is-drawing-mode) .flip-sep {
    font-size: 5rem;
  }

  .panel:not(.is-drawing-mode) .flip-clock {
    gap: 16px;
  }

  .panel:not(.is-drawing-mode) .countdown-area {
    padding: 20px 12px;
  }

  .panel:not(.is-drawing-mode) .countdown-text {
    font-size: 1.2rem;
    margin-top: 16px;
  }

  /* Buy inline bar: wider on desktop waiting */
  .panel:not(.is-drawing-mode) .buy-inline-bar {
    margin-top: 8px;
    gap: 10px;
  }

  .panel:not(.is-drawing-mode) .buy-inline-saldo {
    font-size: 0.95rem;
    padding: 5px 22px;
  }

  .panel:not(.is-drawing-mode) .buy-inline-snapshot {
    display: none;
  }

  .panel:not(.is-drawing-mode) .buy-bar-btn {
    padding: 10px 20px;
    font-size: 0.78rem;
    border-radius: 8px;
  }

  /* Waiting mode com player-cards: pcards na coluna direita */
  .panel:not(.is-drawing-mode).has-pcards {
    grid-template-columns: 130px 1fr minmax(300px, 500px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "prizes topbar  pcards"
      "prizes center  pcards"
      "prizes info    pcards";
    overflow: hidden;
  }

  /* Waiting mode com fallback das melhores cartelas: mesma coluna direita
     usada no modo minhas cartelas, preservando posicao do cronometro/botoes. */
  .panel:not(.is-drawing-mode).view-best-cards.has-best-fallback-cards {
    grid-template-columns: 130px 1fr minmax(300px, 500px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "prizes topbar  pcards"
      "prizes center  pcards"
      "prizes info    pcards";
    overflow: hidden;
  }

  .panel:not(.is-drawing-mode).view-best-cards.has-best-fallback-cards .best-cards {
    grid-area: pcards;
    grid-row: 1 / -1;
    display: flex !important;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    max-height: none;
  }

  .panel:not(.is-drawing-mode).view-best-cards.has-best-fallback-cards #bestCardsItems {
    height: auto;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }

  .panel:not(.is-drawing-mode).has-pcards .best-cards {
    display: none;
  }

  .panel:not(.is-drawing-mode).has-pcards .player-cards-panel {
    grid-area: pcards;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
    max-height: none;
  }

  .panel:not(.is-drawing-mode).has-pcards .player-cards-track {
    max-height: none;
    overflow-y: auto;
    flex: 1;
  }

  /* ---- Desktop drawing mode ---- */
  .panel.is-drawing-mode {
    grid-template-columns: minmax(130px, 155px) 1fr minmax(580px, 580px);
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "prizes topbar  cards"
      "prizes info    cards"
      "prizes draw    cards"
      "prizes balls   cards"
      "prizes nums    cards";
  }

  .panel.is-drawing-mode.has-pcards {
    grid-template-columns: minmax(130px, 155px) 1fr minmax(580px, 580px);
    grid-template-rows: auto auto 1fr auto auto minmax(80px, auto);
    grid-template-areas:
      "prizes topbar  cards"
      "prizes info    cards"
      "prizes draw    cards"
      "prizes balls   cards"
      "prizes nums    cards"
      "prizes pcards  cards";
  }

  .panel.is-drawing-mode.has-pcards .player-cards-panel {
    grid-area: pcards;
    display: flex;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    padding: 4px 0;
    max-height: 130px;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-header {
    margin-bottom: 4px;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-header h2 {
    font-size: 0.85rem;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-track {
    grid-template-columns: repeat(3, 1fr);
    max-height: 110px;
    overflow-y: auto;
    gap: 6px;
  }

  .panel.is-drawing-mode.has-pcards .pcard {
    padding: 5px 6px;
  }

  .panel.is-drawing-mode.has-pcards .pcard-title {
    font-size: 0.7rem;
  }

  .panel.is-drawing-mode.has-pcards .pcard-grid {
    gap: 2px;
  }

  .panel.is-drawing-mode.has-pcards .pcard-cell {
    font-size: 0.7rem;
    padding: 2px;
    min-height: 18px;
  }

  .panel.is-drawing-mode.has-pcards .best-cards {
    display: flex;
  }

  .panel.is-drawing-mode .draw-center {
    grid-area: draw;
    align-self: center;
    justify-self: center;
  }

  .panel.is-drawing-mode .number-panel {
    grid-area: nums;
    align-self: start;
  }

  .panel.is-drawing-mode .best-cards {
    grid-area: cards;
    grid-row: 1 / -1;
    min-height: 0;
    overflow: hidden;
    margin-bottom: 94px;
  }

  .panel.is-drawing-mode:not(.has-pcards) .best-cards {
    grid-row: 1 / -1;
  }

  /* Desktop: compra fica no lado direito, abaixo de Melhores Cartelas */
  .panel.is-drawing-mode .buy-inline-bar {
    left: auto;
    right: 12px;
    bottom: 8px;
    width: 580px;
    max-width: calc(100vw - 190px);
    align-items: flex-end;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-radius: 10px 10px 0 0;
  }

  .panel.is-drawing-mode .buy-inline-buttons {
    justify-content: flex-end;
  }

  .panel.is-drawing-mode .info-bar {
    grid-area: info;
    align-self: center;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 4px 8px;
  }

  .panel.is-drawing-mode .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .panel.is-drawing-mode .info-item b {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .panel.is-drawing-mode .info-item em {
    font-size: 0.9rem;
    font-weight: 800;
  }

  .panel.is-drawing-mode .winner-spotlight {
    grid-column: 2 / 3;
    grid-row: 2 / 5;
    align-self: start;
    z-index: 10;
    max-height: 60dvh;
    overflow-y: auto;
  }

  .top-bar {
    grid-area: topbar;
  }

  .topbar-replay-label {
    font-size: 1.4rem;
  }

  .info-bar {
    grid-area: info;
  }

  .draw-center {
    grid-area: center;
    align-self: center;
  }

  .number-panel {
    grid-area: nums;
    align-self: start;
  }

  .balls-section {
    grid-area: center;
    align-self: end;
  }

  .winner-spotlight {
    grid-area: cards;
    align-self: start;
    z-index: 10;
  }

  .best-cards {
    grid-area: cards;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--radius);
  }

  .best-cards h2 {
    position: sticky;
    top: 0;
    background: var(--card-bg);
    z-index: 2;
    padding: 6px 8px;
    margin: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  }

  /* Cartelas no desktop — estilo tabela, uma linha por cartela */

  /* No desktop: mostrar FT na coluna missing, label completo na coluna numeros */
  .ft-full { display: none; }
  .ft-short { display: inline; }
  .cupom-short { display: none; }
  .cupom-full { display: inline; }
  .numbers-label-full { display: inline; }
  .numbers-label-short { display: none; }

  .best-col.missing {
    text-align: center;
    font-size: 0.5rem;
    font-weight: 800;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #16a34a;
    border: 1px solid #22c55e;
    border-radius: 4px;
    padding: 0px 2px;
    min-width: 10px;
    height: 10px;
    color: #f9fafb;
  }

  .best-card-head .best-col.missing {
    font-size: 0.62rem;
    font-weight: 700;
    background: transparent;
    border-color: transparent;
    color: #fef08a;
    justify-content: flex-start;
    text-align: left;
  }

  .best-card-head,
  .best-card {
    grid-template-columns: 44px 21px 84px minmax(240px, 1fr);
    gap: 3px;
    padding: 3px 4px;
    border-radius: 0;
    min-height: 26px;
    max-height: none;
    height: auto;
    line-height: 1.1;
    align-items: center;
    border: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    background: transparent;
    overflow: visible;
  }

  .best-card:hover {
    background: rgba(30, 41, 59, 0.3);
  }

  .best-card-head {
    font-size: 1.0rem;
    padding: 3px 4px;
    min-height: 26px;
    max-height: 26px;
    height: 26px;
    line-height: 1.1;
    border-bottom: 1px solid rgba(56, 189, 248, 0.4);
    background: rgba(30, 41, 59, 0.5);
  }

  #bestCardsItems {
    gap: 0px;
  }

  .best-col {
    font-size: 0.66rem;
    line-height: 1.1;
  }

  .best-card-head .best-col {
    font-size: 0.62rem;
  }

  .best-col.numbers {
    grid-column: auto;
    margin-top: 0;
    margin-left: 0;
  }

  .best-col.owner {
    font-size: 0.66rem;
    font-weight: 700;
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    line-height: 1.15;
  }

  .best-col.cupom {
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    word-break: normal;
  }

  .best-card-head .best-col.cupom {
    font-size: 0.62rem;
    white-space: nowrap;
  }

  .best-col.hits {
    font-size: 0.78rem;
    font-weight: 800;
  }

  /* Números faltantes em linha horizontal */
  .missing-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }

  .missing-grid.missing-grid-5 .missing-cell {
    min-width: 0;
    width: auto;
    height: 17px;
    font-size: 0.85rem;
  }

  .missing-grid.missing-grid-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
  }

  .missing-grid.missing-grid-10 .missing-cell {
    min-width: 0;
    width: auto;
    height: 17px;
    font-size: 0.75rem;
    padding: 0 1px;
  }

  .missing-cell {
    min-height: 0;
    min-width: 0;
    width: auto;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 3px;
    padding: 0 3px;
    line-height: 1;
    text-align: center;
    border: 1px solid rgba(148, 163, 184, 0.3);
  }

  .best-cards {
    padding: 0 4px;
  }

  .best-cards h2 {
    padding: 6px 8px;
    margin: 0;
    font-size: 1.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
  }

  .prize-list {
    grid-area: prizes;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  #prizeItems {
    flex-direction: column;
    gap: 6px;
    flex: 1;
  }

  #prizeItems li {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 6px 10px;
    font-size: 0.78rem;
    border-radius: 10px;
  }

  #prizeItems li .prize-name {
    font-size: 0.82rem;
    justify-content: center;
  }

  #prizeItems li .prize-value {
    font-size: 1.1rem;
  }

  #prizeItems li .prize-badge {
    font-size: 0.62rem;
  }

  /* No desktop em replay, mostrar track de todas as bolas sorteadas */
  .panel.is-drawing-mode .draw-center.is-replay ~ .balls-section {
    display: block;
    grid-area: balls;
    align-self: end;
    overflow: hidden;
  }

  .panel.is-drawing-mode .draw-center.is-replay ~ .balls-section .balls-track {
    max-height: 90px;
    margin-top: 0;
  }

  /* Replay com cartelas do jogador no desktop:
     compacta colunas para evitar sobreposição vertical */
  .panel.is-drawing-mode.has-pcards .best-cards {
    padding: 0 2px;
  }

  .panel.is-drawing-mode.has-pcards .best-cards h2 {
    font-size: 1rem;
    padding: 4px 6px;
  }

  .panel.is-drawing-mode.has-pcards .best-card-head,
  .panel.is-drawing-mode.has-pcards .best-card {
    grid-template-columns: 44px 21px 84px minmax(240px, 1fr);
    gap: 3px;
    padding: 3px 4px;
    min-height: 26px;
    line-height: 1.1;
  }

  .panel.is-drawing-mode.has-pcards .cupom-short { display: none; }
  .panel.is-drawing-mode.has-pcards .cupom-full { display: inline; }

  .panel.is-drawing-mode.has-pcards .best-col.missing {
    min-width: 10px;
    height: 10px;
    font-size: 0.5rem;
  }

  .panel.is-drawing-mode.has-pcards .best-col.cupom {
    font-size: 12px;
  }

  .panel.is-drawing-mode.has-pcards .best-col {
    font-size: 0.66rem;
  }

  .panel.is-drawing-mode.has-pcards .best-card-head .best-col {
    font-size: 0.62rem;
  }

  .panel.is-drawing-mode.has-pcards .best-col.numbers {
    margin-left: 0;
  }

  .panel.is-drawing-mode.has-pcards .missing-cell {
    min-width: 0;
    width: auto;
    height: 17px;
    font-size: 0.85rem;
  }

  .panel.is-drawing-mode.has-pcards .missing-grid.missing-grid-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 3px;
  }

  .panel.is-drawing-mode.has-pcards .missing-grid.missing-grid-10 .missing-cell {
    font-size: 0.75rem;
    padding: 0 1px;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-panel {
    max-height: 110px;
    padding: 2px 0;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-track {
    max-height: 90px;
  }

  .panel.is-drawing-mode.has-pcards .draw-center.is-replay ~ .balls-section .balls-track {
    max-height: 60px;
    min-height: 24px;
  }

  .balls-track {
    min-height: 30px;
    max-height: 100px;
  }

  .replay-controls {
    grid-template-columns: 1fr auto;
    gap: 6px;
  }

  .replay-controls input,
  .replay-controls button {
    padding: 4px 10px;
    font-size: 0.78rem;
  }

  .replay-status {
    font-size: 0.72rem;
  }

  .start-alert-bubble {
    width: clamp(110px, 18vw, 160px);
    height: clamp(110px, 18vw, 160px);
  }
}

/* ============================
   Menu hamburger + Drawer lateral
   ============================ */
/* ---- Top bar ---- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  border-radius: var(--radius) var(--radius) 0 0;
  flex-shrink: 0;
}

.top-bar-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu-toggle-btn {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  transition: background 0.15s;
}

.menu-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.menu-toggle-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.menu-toggle-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Sound toggle button ---- */
.sound-toggle-btn {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
  color: var(--accent-3);
}

.theme-toggle-top-btn,
.announcer-top-next-btn,
.mic-toggle-top-btn {
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.theme-toggle-top-btn {
  color: #fbbf24;
  overflow: hidden;
}

.announcer-top-next-btn {
  color: #60a5fa;
  font-size: 15px;
  line-height: 1;
}

.mic-toggle-top-btn {
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  overflow: hidden;
}

.theme-toggle-top-icon,
.mic-toggle-top-icon,
.announcer-top-next-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.theme-toggle-top-icon {
  position: absolute;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.theme-toggle-top-icon-moon {
  opacity: 0;
  transform: scale(0.7);
}

.theme-toggle-top-btn.is-light .theme-toggle-top-icon-sun {
  opacity: 0;
  transform: scale(0.7);
}

.theme-toggle-top-btn.is-light .theme-toggle-top-icon-moon {
  opacity: 1;
  transform: scale(1);
}

.mic-toggle-top-btn::after {
  content: "✕";
  position: absolute;
  top: 2px;
  right: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #ef4444;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.45);
}

.sound-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.theme-toggle-top-btn:hover,
.announcer-top-next-btn:hover,
.mic-toggle-top-btn:hover {
  background: rgba(30, 41, 59, 0.95);
}

.sound-toggle-btn.is-muted {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.theme-toggle-top-btn.is-light {
  color: #334155;
  border-color: rgba(51, 65, 85, 0.22);
  background: rgba(255, 255, 255, 0.78);
}

.mic-toggle-top-btn.is-active {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.12);
}

.mic-toggle-top-btn.is-active::after {
  display: none;
}

/* Replay label na top-bar */
.topbar-replay-label {
  font-family: "Archivo Black", sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: pulseText 1.4s ease-in-out infinite;
}

.topbar-replay-label.is-hidden {
  display: none;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.5);
}

.drawer-backdrop.is-hidden {
  display: none;
}

.side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: min(300px, 80vw);
  height: 100dvh;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.25s ease;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
}

.side-drawer.is-hidden {
  transform: translateX(-100%);
  pointer-events: none;
}

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

.drawer-header h2 {
  margin: 0;
  font-size: 1rem;
  font-family: "Archivo Black", sans-serif;
  color: var(--accent);
}

.drawer-close-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.drawer-item {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.drawer-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.drawer-item.active {
  background: rgba(56, 189, 248, 0.10);
  color: #7dd3fc;
}

/* Toggle switch dentro de itens do menu (Modo Claro, Microfone, etc) */
.drawer-item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.drawer-item-label {
  flex: 1;
  text-align: left;
}

.drawer-toggle-switch {
  display: inline-block;
  position: relative;
  width: 38px;
  height: 22px;
  background: rgba(148, 163, 184, 0.35);
  border-radius: 11px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.drawer-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #f1f5f9;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Theme toggle ON: âmbar (sol) */
#themeToggleBtn.is-on .drawer-toggle-switch {
  background: rgba(245, 158, 11, 0.55);
}

#themeToggleBtn.is-on .drawer-toggle-thumb {
  transform: translateX(16px);
  background: #fef3c7;
}

/* Mic toggle ON: verde */
#micToggleBtn.is-on .drawer-toggle-switch {
  background: rgba(34, 197, 94, 0.55);
}

#micToggleBtn.is-on .drawer-toggle-thumb {
  transform: translateX(16px);
  background: #d1fae5;
}

/* Ball animation toggle ON (frases ligadas): ciano */
#ballAnimToggleBtn.is-on .drawer-toggle-switch {
  background: rgba(56, 189, 248, 0.55);
}

#ballAnimToggleBtn.is-on .drawer-toggle-thumb {
  transform: translateX(16px);
  background: #e0f2fe;
}

/* Bloco do locutor dentro da seção de Configurações */
.drawer-config-locutor {
  padding: 12px 4px 4px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-config-locutor h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

/* Bloco de tamanho de texto + escala global por classe no <html> */
html.font-size-sm { font-size: 13px; }
html.font-size-md { font-size: 16px; }
html.font-size-lg { font-size: 19px; }

.drawer-config-fontsize {
  padding: 12px 4px 4px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-config-fontsize h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.drawer-fontsize-buttons {
  display: flex;
  gap: 8px;
}

.drawer-fontsize-btn {
  flex: 1;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.drawer-fontsize-btn[data-fs="sm"] { font-size: 0.78rem; }
.drawer-fontsize-btn[data-fs="md"] { font-size: 1rem; }
.drawer-fontsize-btn[data-fs="lg"] { font-size: 1.18rem; }

.drawer-fontsize-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.30);
}

.drawer-fontsize-btn.is-active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.50);
  color: #7dd3fc;
}

.drawer-section {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-section.is-hidden {
  display: none;
}

.drawer-section h3 {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.80);
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  transition: border-color 0.2s;
}

.drawer-input:focus {
  border-color: var(--accent);
  outline: none;
}

.drawer-input.is-hidden {
  display: none;
}

.drawer-btn {
  width: 100%;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.10);
  color: #7dd3fc;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.drawer-btn:hover {
  background: rgba(56, 189, 248, 0.18);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.12);
}

.drawer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Toggle cartela / código do bilhete */
.consult-mode-toggle {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  gap: 0;
}
.consult-mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.78);
  padding: 7px 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: center;
}
.consult-mode-btn + .consult-mode-btn {
  border-left: 1px solid var(--line);
}
.consult-mode-btn.is-active {
  background: rgba(56, 189, 248, 0.22);
  color: #bae6fd;
}
/* OBS: as paginas full-page de consulta tem fundo escuro fixo,
   por isso mesmo no theme-light o texto do toggle precisa ser claro */
html.theme-light .consult-mode-btn {
  color: rgba(255, 255, 255, 0.78);
}
html.theme-light .consult-mode-btn.is-active {
  background: rgba(56, 189, 248, 0.22);
  color: #bae6fd;
}

.drawer-error {
  margin: 6px 0 0;
  color: #f87171;
  font-size: 0.78rem;
}

.drawer-error:empty {
  display: none;
}

/* Lista de locutores no drawer */
.announcer-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}

.announcer-option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
  color: #e0f2fe;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.announcer-option:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
}

.announcer-option.active {
  background: rgba(14, 165, 233, 0.30);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

.announcer-option small {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.75rem;
}

.announcer-gender-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.announcer-gender-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.announcer-gender-btn {
  flex: 1;
  padding: 8px 6px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  background: rgba(14, 165, 233, 0.08);
  color: #e0f2fe;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: center;
}

.announcer-gender-btn:hover {
  background: rgba(14, 165, 233, 0.18);
  border-color: rgba(56, 189, 248, 0.5);
}

.announcer-gender-btn.active {
  background: rgba(14, 165, 233, 0.30);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

html.theme-light .announcer-gender-label {
  color: #475569;
}

html.theme-light .announcer-gender-btn {
  color: #1e293b;
  background: rgba(14, 165, 233, 0.06);
  border-color: rgba(14, 165, 233, 0.2);
}

html.theme-light .announcer-gender-btn:hover {
  background: rgba(14, 165, 233, 0.12);
}

html.theme-light .announcer-gender-btn.active {
  background: rgba(14, 165, 233, 0.20);
  border-color: #0ea5e9;
  color: #0c4a6e;
}

html.theme-light .announcer-option {
  color: #1e293b;
  background: rgba(14, 165, 233, 0.06);
  border-color: rgba(14, 165, 233, 0.2);
}

html.theme-light .announcer-option:hover {
  background: rgba(14, 165, 233, 0.12);
}

html.theme-light .announcer-option.active {
  background: rgba(14, 165, 233, 0.20);
  border-color: #0ea5e9;
  color: #0c4a6e;
}

/* ============================
   Modal de consulta (resultado)
   ============================ */
.consult-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

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

/* ============================
   Tela full-page de consulta (forms) e resultado
   ============================ */
.consult-result-page,
.consult-form-page {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 60%, #0f172a 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.consult-result-page.is-hidden,
.consult-form-page.is-hidden {
  display: none;
}

.consult-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.5);
}

.consult-form-header h2 {
  margin: 0;
  font-size: 1rem;
  font-family: "Archivo Black", sans-serif;
  color: var(--accent);
}

.consult-form-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}

.consult-form-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.consult-form-help {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
  font-weight: 500;
}

.consult-form-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.5);
}

.consult-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.5);
}

.consult-result-header h2 {
  margin: 0;
  font-size: 1rem;
  font-family: "Archivo Black", sans-serif;
  color: var(--accent);
}

.consult-result-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 0;
}

.consult-result-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  background: rgba(15, 23, 42, 0.5);
}

.consult-footer-btn {
  flex: 1;
  padding: 13px 10px;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  font-family: "Archivo Black", sans-serif;
}

.consult-footer-btn-back {
  background: rgba(255, 255, 255, 0.10);
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.consult-footer-btn-live {
  background: linear-gradient(90deg, #0ea5e9, #0284c7);
  color: #fff;
}

.consult-modal-box {
  background: linear-gradient(160deg, #1e293b 0%, #0f172a 60%, #0f172a 100%);
  border: 1px solid rgba(56, 189, 248, 0.20);
  border-radius: 18px;
  width: min(460px, 100%);
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.50);
}

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

.consult-modal-header h2 {
  margin: 0;
  font-size: 1rem;
  font-family: "Archivo Black", sans-serif;
  color: var(--accent);
}

.consult-modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.consult-modal-body {
  padding: 12px 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Meta chips do resultado */
.consult-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.consult-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.40);
  background: rgba(56, 189, 248, 0.18);
  font-size: 0.78rem;
  font-weight: 600;
  color: #e0f2fe;
}

.consult-chip strong {
  color: #ffffff;
  font-weight: 700;
}

/* Seção de prêmios */
.consult-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}

.consult-prize-chip {
  padding: 4px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
}

/* Track de bolas no resultado */
.consult-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 10px;
}

.consult-ball {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.65rem;
}

.consult-ball.ball-normal {
  background: radial-gradient(circle at 28% 28%, #e2e8f0, #94a3b8 60%, #64748b 90%);
  color: #1e293b;
}

.consult-ball.ball-prize {
  background: radial-gradient(circle at 28% 28%, #fde047, #dc2626 60%, #991b1b 90%);
  color: #fff;
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.4);
}

.consult-ball.ball-jackpot {
  background: radial-gradient(circle at 28% 28%, #fef3c7, #f59e0b 60%, #d97706 90%);
  color: #2a1e00;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

/* Ganhadores no resultado */
.consult-winners {
  margin-top: 8px;
}

.consult-winners h3 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: #fde047;
}

.consult-winner-item {
  padding: 7px 10px;
  margin-bottom: 5px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.85);
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 500;
}

.consult-winner-item .prize-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.18);
  color: #fde047;
  font-weight: 700;
  font-size: 0.68rem;
  margin-right: 4px;
}

/* Cartela grid no resultado */
.consult-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}

.consult-card-cell {
  display: grid;
  place-items: center;
  min-height: 32px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-weight: 800;
  font-size: 0.9rem;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.consult-card-cell.hit {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border-color: #4ade80;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.consult-card-cell.prize-ball {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #f87171;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  animation: pulse-prize 1.5s ease-in-out infinite;
}

@keyframes pulse-prize {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
  50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.8); }
}

.consult-card-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.consult-stat-chip {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.40);
  background: rgba(52, 211, 153, 0.18);
  font-size: 0.78rem;
  font-weight: 700;
  color: #d1fae5;
}

.consult-card-prize-box {
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, #166534, #15803d);
  color: #fde047;
  font-weight: 700;
  font-size: 0.78rem;
  text-align: center;
}

/* Múltiplas cartelas */
.consult-multi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.consult-single-card {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px;
  background: rgba(30, 41, 59, 0.60);
}

.consult-single-card-title {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fef08a;
}

.consult-single-card .consult-card-grid {
  gap: 2px;
}

.consult-single-card .consult-card-cell {
  min-height: 24px;
  font-size: 0.7rem;
}

.consult-section-title {
  margin: 8px 0 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #bae6fd;
}

/* ============================
   Overlay: preparando sorteio
   ============================ */
.preparing-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.94);
}

@keyframes preparing-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Aneis de radar pulsante */
.preparing-pulse-ring {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.40);
  animation: prep-ring-expand 2.2s ease-out infinite;
  pointer-events: none;
}

.preparing-pulse-ring.prep-ring-2 {
  animation-delay: 1.1s;
  border-color: rgba(245, 158, 11, 0.20);
}

@keyframes prep-ring-expand {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.9);  opacity: 0; }
}

.preparing-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 2.8rem 3rem 2rem;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.97), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(245, 158, 11, 0.10);
  text-align: center;
  animation: prep-box-pulse 2.4s ease-in-out infinite;
}

@keyframes prep-box-pulse {
  0%, 100% { box-shadow: 0 24px 70px rgba(0,20,8,0.65), 0 0 22px rgba(234,179,8,0.08); }
  50%       { box-shadow: 0 24px 70px rgba(0,20,8,0.65), 0 0 38px rgba(234,179,8,0.28); }
}

.preparing-balls {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  height: 60px;
}

.prep-ball {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fef08a, #eab308 60%, #a16207);
  box-shadow: 0 4px 14px rgba(234,179,8,0.45);
  animation: prep-bounce 1.1s ease-in-out infinite;
}

.prep-ball:nth-child(1) { animation-delay: 0s; }
.prep-ball:nth-child(2) { animation-delay: 0.18s; }
.prep-ball:nth-child(3) { animation-delay: 0.36s; }
.prep-ball:nth-child(4) { animation-delay: 0.54s; }
.prep-ball:nth-child(5) { animation-delay: 0.72s; }

@keyframes prep-bounce {
  0%, 100% { transform: translateY(0) scale(1);      opacity: 0.65; }
  45%       { transform: translateY(-26px) scale(1.1); opacity: 1; }
  55%       { transform: translateY(-26px) scale(1.1); opacity: 1; }
}

.preparing-title {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.4rem;
  color: var(--accent);
  letter-spacing: 0.03em;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

/* ============================
   Painel de cartelas do jogador
   ============================ */
.player-cards-panel {
  padding: 10px 8px 4px;
  margin-top: 4px;
  flex-shrink: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.player-cards-panel.is-hidden {
  display: none;
}

.player-cards-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 4px;
}

.player-cards-header h2 {
  margin: 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 0.95rem;
  color: var(--accent);
}

.player-cards-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.player-cards-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,158,11,0.3) transparent;
  padding: 2px;
}

.player-cards-track::-webkit-scrollbar {
  width: 4px;
}

.player-cards-track::-webkit-scrollbar-thumb {
  background: rgba(245,158,11,0.3);
  border-radius: 4px;
}

/* Card individual do jogador */
.pcard {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px;
  background: var(--card-bg);
  transition: border-color 0.3s, box-shadow 0.3s;
}

.pcard.pcard-winner {
  border-color: #4ade80;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.25);
}

.pcard.pcard-won-quadra {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35), inset 0 0 0 1px rgba(251, 191, 36, 0.15);
  animation: pcard-glow-quadra 2s ease-in-out infinite;
}

.pcard.pcard-won-quina {
  border-color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.4), inset 0 0 0 1px rgba(56, 189, 248, 0.15);
  animation: pcard-glow-quina 2s ease-in-out infinite;
}

.pcard.pcard-won-bingo {
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.5), inset 0 0 0 1px rgba(74, 222, 128, 0.20);
  animation: pcard-glow-bingo 2s ease-in-out infinite;
}

@keyframes pcard-glow-quadra {
  0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.35); }
  50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.6); }
}
@keyframes pcard-glow-quina {
  0%, 100% { box-shadow: 0 0 16px rgba(56, 189, 248, 0.4); }
  50%      { box-shadow: 0 0 26px rgba(56, 189, 248, 0.7); }
}
@keyframes pcard-glow-bingo {
  0%, 100% { box-shadow: 0 0 20px rgba(74, 222, 128, 0.5); }
  50%      { box-shadow: 0 0 32px rgba(74, 222, 128, 0.8); }
}

.pcard-prize-tag[data-prize="quadra"] {
  background: linear-gradient(90deg, #92400e, #b45309);
  color: #fef3c7;
}
.pcard-prize-tag[data-prize="quina"] {
  background: linear-gradient(90deg, #0c4a6e, #0369a1);
  color: #bae6fd;
}
.pcard-prize-tag[data-prize="bingo"] {
  background: linear-gradient(90deg, #166534, #15803d);
  color: #bbf7d0;
}

.pcard-title {
  margin: 0 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fde047;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-error {
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px 8px;
  text-align: center;
}

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  margin-bottom: 6px;
}

.pcard-cell {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 800;
  font-size: 0.78rem;
  color: #e2e8f0;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.pcard-cell.pcard-hit {
  background: #16a34a !important;
  border-color: #4ade80 !important;
  color: #fff !important;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.pcard-cell.pcard-hit-new {
  animation: pcard-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pcard-pop {
  0%   { transform: scale(1);   box-shadow: none; }
  40%  { transform: scale(1.25); box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
  100% { transform: scale(1);   box-shadow: none; }
}

.pcard-cell.pcard-prize {
  background: #dc2626 !important;
  border-color: #f87171 !important;
  color: #fff !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
  animation: pulse-prize 1.5s ease-in-out infinite;
}

.pcard-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.pcard-stat {
  font-size: 0.62rem;
  font-weight: 700;
  color: #6ee7b7;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.20);
  background: rgba(52, 211, 153, 0.08);
}

.pcard-prize-tag {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #166534, #15803d);
  color: #fde047;
}

/* Responsivo: 2 colunas em telas menores, 1 em muito pequenas */
@media (max-width: 600px) {
  .player-cards-track {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .player-cards-track {
    grid-template-columns: 1fr;
  }
}

/* >>> EXPERIMENTO (acompanhar com user): expande a area de "Suas cartelas"
   no mobile durante o replay/sorteio para o sistema mostrar quantas
   cartelas couberem (em vez de fixar em 1 linha de ~160px), com scrollbar
   mais visivel pra deixar claro que rola pra ver o restante.
   PRA REVERTER: remover este bloco inteiro. O default volta a ser
   .player-cards-track { max-height: 160px } definido acima. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  .panel.is-drawing-mode.has-pcards .player-cards-track {
    max-height: none;
    flex: 1;
    overflow-y: auto;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-track::-webkit-scrollbar {
    width: 6px;
  }

  .panel.is-drawing-mode.has-pcards .player-cards-track::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.55);
    border-radius: 4px;
  }
}
/* <<< FIM EXPERIMENTO suas cartelas expandida */

/* Tema claro */
.theme-light .pcard {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.10);
}

.theme-light .pcard-title {
  color: #b45309;
}

.theme-light .pcard-cell {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1e293b;
}

.theme-light .pcard-stat {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.20);
  background: rgba(5, 150, 105, 0.08);
}

/* Dots animados no titulo */
.prep-dots {
  display: inline-flex;
  gap: 1px;
  align-items: baseline;
}

.prep-dots span {
  display: inline-block;
  animation: prep-dot-blink 1.4s ease-in-out infinite;
  opacity: 0;
}

.prep-dots span:nth-child(1) { animation-delay: 0s; }
.prep-dots span:nth-child(2) { animation-delay: 0.28s; }
.prep-dots span:nth-child(3) { animation-delay: 0.56s; }

@keyframes prep-dot-blink {
  0%, 80%, 100% { opacity: 0; transform: translateY(0); }
  40%            { opacity: 1; transform: translateY(-3px); }
}

.preparing-sub {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Barra de progresso ciclica */
.preparing-bar-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.4rem;
}

.preparing-bar {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #eab308, #fef08a, #eab308, transparent);
  border-radius: 2px;
  animation: prep-bar-slide 1.8s ease-in-out infinite;
}

@keyframes prep-bar-slide {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(380%); }
}
.club-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.club-modal-box {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.04);
  padding: 2.4rem 2.8rem 2.2rem;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.club-modal-title {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.5rem;
  color: var(--accent);
  margin: 0;
  text-align: center;
}

.club-modal-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
}

.club-modal-input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.club-modal-input::-webkit-outer-spin-button,
.club-modal-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.club-modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.club-modal-error {
  min-height: 1.2em;
  font-size: 0.88rem;
  color: #f87171;
  margin: 0;
  text-align: center;
}

.club-modal-btn {
  width: 100%;
  padding: 0.85rem;
  font-size: 1.1rem;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1000;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.club-modal-btn:hover:not(:disabled) {
  opacity: 0.92;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.club-modal-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.club-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Botao secundario/ghost — ex: "Ir para rodada atual" */
.club-modal-btn.club-modal-btn-ghost {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.85);
  box-shadow: none;
  font-size: 0.92rem;
  padding: 0.6rem;
}
.club-modal-btn.club-modal-btn-ghost:hover:not(:disabled) {
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  opacity: 1;
  box-shadow: none;
}
.theme-light .club-modal-btn.club-modal-btn-ghost {
  border-color: rgba(0,0,0,0.25);
  color: #111;
}
.theme-light .club-modal-btn.club-modal-btn-ghost:hover:not(:disabled) {
  border-color: rgba(0,0,0,0.45);
  color: #000;
}

/* Kit login — 6-digit code input */
.kit-login-code {
  font-size: clamp(1.1rem, 4.5vw, 1.8rem);
  letter-spacing: clamp(0.2em, 2vw, 0.45em);
  padding: 0.7rem 1rem 0.7rem 1.45rem;
  font-family: "Space Grotesk", monospace;
  max-width: 100%;
  box-sizing: border-box;
}
.kit-login-code::placeholder {
  letter-spacing: 0.05em;
  font-size: 1rem;
}

.club-captcha-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 0.75rem 1.2rem;
}

.club-captcha-question {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.club-captcha-eq {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--accent);
}

.club-captcha-answer {
  flex: 1;
  max-width: 90px;
  padding: 0.55rem 0.6rem;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
  text-align: center;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
}

.club-captcha-answer::-webkit-outer-spin-button,
.club-captcha-answer::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.club-captcha-answer:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

/* ============================================================
   Modal de Ganhadores da Rodada
   ============================================================ */
.winners-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 16, 38, 0.94);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

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

.winners-modal-box {
  background: linear-gradient(160deg, #1e3060 0%, #162040 60%, #111830 100%);
  border: 1px solid rgba(212, 168, 67, 0.40);
  border-radius: 22px;
  width: min(500px, 100%);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.07), 0 30px 80px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}

@media (min-width: 768px) {
  .winners-modal-box {
    width: min(860px, 96vw);
    max-height: 88dvh;
  }

  /* No desktop exibe cartelas lado a lado em 2 colunas */
  .wm-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .wm-cards-grid .wm-card-row {
    border-right: 1px solid rgba(255,255,255,0.05);
  }

  .wm-cards-grid .wm-card-row:nth-child(even) {
    border-right: none;
  }
}

.winners-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.15);
  background: linear-gradient(90deg, rgba(212,168,67,0.07) 0%, transparent 60%);
  flex-shrink: 0;
}

.winners-modal-title {
  margin: 0;
  font-size: 1.35rem;
  font-family: "Archivo Black", sans-serif;
  color: var(--accent);
  line-height: 1.2;
  text-shadow: 0 0 24px rgba(212,168,67,0.4);
}

.winners-modal-round {
  display: block;
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.winners-modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  border-radius: 9px;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}

.winners-modal-close:hover {
  background: rgba(212, 168, 67, 0.18);
  border-color: rgba(212, 168, 67, 0.40);
}

.winners-modal-loading {
  padding: 44px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
}

.winners-modal-content {
  flex: 1;           /* ocupa o espaco restante do box */
  min-height: 0;     /* necessario para overflow funcionar em flex */
  overflow-y: auto;
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.winners-modal-content.is-hidden {
  display: none;
}

.wm-prize-group {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;    /* nao encolher — deixa o container rolar */
  transition: border-color 0.2s;
}

.wm-prize-group:hover {
  border-color: rgba(212, 168, 67, 0.25);
}

/* Quadra — azul ciano */
/* Premio 1 (Quadra) — fundo verde, texto azul */
.wm-prize-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 11px 16px;
  background: linear-gradient(90deg, rgba(21, 128, 61, 0.45) 0%, rgba(20,83,45,0.28) 100%);
  font-weight: 700;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(34, 197, 94, 0.45);
  color: #000000;
  text-shadow: none;
}

.wm-prize-label .wm-split-note {
  margin-left: 4px;
  font-size: 0.7em;
  font-weight: 500;
  color: #000000;
}

/* Premio 2 (Quina) — fundo verde, texto preto */
.wm-prize-label.is-quina {
  background: linear-gradient(90deg, rgba(21, 128, 61, 0.45) 0%, rgba(20,83,45,0.28) 100%);
  border-bottom-color: rgba(34, 197, 94, 0.45);
  color: #000000;
  text-shadow: none;
}

/* Premio 3 (Bingo) — fundo verde, texto preto */
.wm-prize-label.is-bingo {
  background: linear-gradient(90deg, rgba(21, 128, 61, 0.45) 0%, rgba(20,83,45,0.28) 100%);
  border-bottom-color: rgba(34, 197, 94, 0.45);
  color: #000000;
  text-shadow: none;
}

/* Acumulado — fundo vermelho, texto preto */
.wm-prize-label.is-acumulado {
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.45) 0%, rgba(127,29,29,0.30) 100%);
  border-bottom-color: rgba(220, 38, 38, 0.50);
  color: #000000;
  text-shadow: none;
}
.wm-prize-label.is-acumulado .wm-split-note {
  color: #000000;
}
.wm-prize-label.is-acumulado .wm-prize-value {
  color: #000000;
}
.wm-prize-label.is-acumulado .wm-ball-num {
  color: #000000;
  background: rgba(220, 38, 38, 0.30);
}

.wm-prize-value {
  margin-left: auto;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}

.wm-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Badge da bola sorteada */
.wm-ball-num {
  margin-left: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 3px 10px;
  opacity: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Badge de contagem de ganhadores */
.wm-count {
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(212, 168, 67, 0.22);
  border: 1px solid rgba(212,168,67,0.30);
  border-radius: 20px;
  padding: 2px 8px;
  color: var(--accent);
}

/* Layout da cartela: nome+id em cima, grid embaixo */
.wm-card-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.15s;
}

.wm-card-row:hover {
  background: rgba(255,255,255,0.03);
}

.wm-card-row:last-child {
  border-bottom: none;
}

.wm-card-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wm-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(234,179,8,0.25), rgba(52,211,153,0.15));
  border: 1px solid rgba(234,179,8,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.wm-card-texts {
  flex: 1;
  min-width: 0;
}

.wm-card-name {
  font-weight: 700;
  font-size: 0.97rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.wm-card-id {
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 2px;
  opacity: 0.75;
}

/* Valor individual do ganhador */
.wm-card-value {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

/* Grid da cartela 5×3 (B I N G O / 3 linhas) — monocromatico */
.wm-card-grid {
  display: inline-flex;
  flex-direction: column;
  gap: 0px;
  align-self: flex-start;
  border: 2px solid #94a3b8;
  border-radius: 6px;
  overflow: hidden;
}

.wm-grid-row {
  display: flex;
  gap: 0px;
}

/* Celula padrao: grade tipo Excel com bordas visiveis */
.wm-grid-cell {
  width: 38px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border-radius: 0;
  font-size: 0.83rem;
  font-weight: 700;
  color: #334155;
  border: 1px solid #cbd5e1;
  transition: background 0.15s, color 0.15s;
}

/* Numero sorteado (acertado na cartela) → verde forte fundo + branco */
.wm-grid-cell.is-hit {
  background: #16a34a;
  border-color: #22c55e;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Ultima bola que gerou o premio → vermelho vibrante */
.wm-grid-cell.is-nball {
  background: rgba(220, 38, 38, 0.75);
  border-color: rgba(220, 38, 38, 0.90);
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.50);
}

/* Cabecalho B I N G O — fundo azul escuro */
.wm-grid-header .wm-grid-head-cell {
  background: #1e3a5f;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  height: 28px;
  border-radius: 0;
  border: 1px solid #1e3a5f;
}

/* ============================================================
   Painel de compra de cartelas
   ============================================================ */
.buy-cards-panel { display: none; }
.buy-cards-panel.is-hidden { display: none; }

/* ========= Bottom bar (fixo no rodapé) ========= */
/* Barra de compra inline (abaixo do countdown) */
.buy-inline-bar {
  width: 100%;
  padding: 6px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.buy-inline-bar.is-hidden { display: none; }
.buy-inline-wallet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.buy-inline-saldo {
  font-size: 0.78rem;
  font-weight: 900;
  color: #ffe600;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255, 230, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  padding: 3px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.buy-credit-info {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  color: #0f172a;
  background: #facc15;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.buy-credit-info:hover {
  transform: translateY(-1px);
}

.buy-credit-info.is-hidden {
  display: none !important;
}

.credit-eta-overlay {
  position: fixed;
  inset: 0;
  z-index: 5500;
  background: rgba(2, 6, 23, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.credit-eta-modal {
  width: min(420px, calc(100vw - 24px));
  background: #0f172a;
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-radius: 14px;
  color: #e2e8f0;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
  padding: 18px 16px 14px;
}

.credit-eta-modal h3 {
  margin: 0 0 10px;
  color: #facc15;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.credit-eta-modal p {
  margin: 0;
  line-height: 1.45;
  font-size: 0.95rem;
}

.credit-eta-close {
  margin-top: 14px;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
  background: #facc15;
  color: #1e293b;
}

.theme-light .credit-eta-modal {
  background: #ffffff;
  color: #1e293b;
  border-color: rgba(30, 41, 59, 0.25);
}

/* ============================================================
   CORREDORES SAZONAIS — personagens cruzando a tela
   ============================================================ */
.seasonal-runners {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}

.seasonal-runner {
  position: absolute;
  will-change: transform;
  user-select: none;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

/* Corre da esquerda para a direita */
.seasonal-runner.run-ltr {
  left: 0;
  animation: runnerLTR var(--run-dur, 9s) linear forwards;
}

/* Corre da direita para a esquerda (emoji espelhado) */
.seasonal-runner.run-rtl {
  right: 0;
  left: auto;
  animation: runnerRTL var(--run-dur, 9s) linear forwards;
}

@keyframes runnerLTR {
  0%   { transform: translateX(-8rem) translateY(0)    scale(0.85); opacity: 0; }
  5%   { opacity: 1; }
  10%  { transform: translateX(10vw)  translateY(-12px) scale(1); }
  20%  { transform: translateX(20vw)  translateY(0); }
  30%  { transform: translateX(30vw)  translateY(-12px); }
  40%  { transform: translateX(40vw)  translateY(0); }
  50%  { transform: translateX(50vw)  translateY(-12px); }
  60%  { transform: translateX(60vw)  translateY(0); }
  70%  { transform: translateX(70vw)  translateY(-12px); }
  80%  { transform: translateX(80vw)  translateY(0); }
  90%  { transform: translateX(90vw)  translateY(-12px); opacity: 1; }
  97%  { transform: translateX(98vw)  translateY(0);     opacity: 0.6; }
  100% { transform: translateX(calc(100vw + 8rem)) translateY(0) scale(0.85); opacity: 0; }
}

@keyframes runnerRTL {
  0%   { transform: translateX(8rem)              translateY(0)    scale(0.85); opacity: 0; }
  5%   { opacity: 1; }
  10%  { transform: translateX(-10vw)             translateY(-12px) scale(1); }
  20%  { transform: translateX(-20vw)             translateY(0); }
  30%  { transform: translateX(-30vw)             translateY(-12px); }
  40%  { transform: translateX(-40vw)             translateY(0); }
  50%  { transform: translateX(-50vw)             translateY(-12px); }
  60%  { transform: translateX(-60vw)             translateY(0); }
  70%  { transform: translateX(-70vw)             translateY(-12px); }
  80%  { transform: translateX(-80vw)             translateY(0); }
  90%  { transform: translateX(-90vw)             translateY(-12px); opacity: 1; }
  97%  { transform: translateX(-98vw)             translateY(0);     opacity: 0.6; }
  100% { transform: translateX(calc(-100vw - 8rem)) translateY(0) scale(0.85); opacity: 0; }
}

/* Flutuadores sazonais (natal: nuvem+neve; outono: folhas caindo) */
.seasonal-runner.run-float {
  left: 0;
  animation: runnerFloat var(--run-dur, 12s) linear forwards;
}

@keyframes runnerFloat {
  0%   { transform: translateX(-8rem) translateY(0) rotate(0deg)   scale(0.8); opacity: 0; }
  5%   { opacity: 0.8; }
  25%  { transform: translateX(25vw)  translateY(10px) rotate(15deg) scale(1); }
  50%  { transform: translateX(50vw)  translateY(-8px) rotate(-10deg); }
  75%  { transform: translateX(75vw)  translateY(12px) rotate(12deg); }
  95%  { opacity: 0.7; }
  100% { transform: translateX(calc(100vw + 8rem)) translateY(0) rotate(0deg) scale(0.8); opacity: 0; }
}

.buy-inline-ganho {
  font-size: 0.78rem;
  font-weight: 900;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  padding: 3px 14px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.buy-inline-ganho.is-hidden,
.buy-inline-snapshot.is-hidden,
.buy-ganho.is-hidden {
  display: none !important;
}

.buy-inline-snapshot {
  font-size: 0.72rem;
  font-weight: 900;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.theme-light .buy-inline-ganho {
  color: #334155;
  background: rgba(226, 232, 240, 0.85);
  border-color: rgba(100, 116, 139, 0.35);
  text-shadow: none;
}

.theme-light .buy-inline-snapshot {
  color: #334155;
  background: rgba(226, 232, 240, 0.85);
  border-color: rgba(100, 116, 139, 0.35);
  text-shadow: none;
}

.buy-saldo {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 900;
  color: #ffe600;
  background: rgba(0,0,0,0.42);
  border: 1px solid rgba(255, 230, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  padding: 5px 12px;
  border-radius: 999px;
}

.buy-wallet-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.buy-ganho {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 900;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.5);
  text-shadow: 0 1px 2px rgba(0,0,0,0.85);
  padding: 5px 12px;
  border-radius: 999px;
}

.theme-light .buy-ganho {
  color: #334155;
  background: rgba(226, 232, 240, 0.85);
  border-color: rgba(100, 116, 139, 0.35);
  text-shadow: none;
}
.buy-inline-buttons {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}
.buy-bar-btn {
  padding: 6px 12px;
  font-size: 0.65rem;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: opacity 0.2s;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  text-align: center;
}
.buy-bar-btn:hover { opacity: 0.85; }
.buy-bar-btn.is-special { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.buy-bar-btn.is-bonus { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; }
.buy-bar-btn.is-discount { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }

/* ========= Modal de compra (overlay) ========= */
.buy-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,0.6);
}
.buy-modal-overlay.is-hidden { display: none; }
.buy-modal-box {
  background: var(--panel);
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -4px 25px rgba(0,0,0,0.5);
}
.buy-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.buy-modal-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--text);
  margin: 0;
}
.buy-modal-close {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.buy-modal-close:hover { background: rgba(255,255,255,0.2); }
.buy-modal-content {
  padding: 8px 14px 14px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buy-round-info-detail {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--accent);
  padding: 4px 0;
}

.buy-selected-prizes {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0 0 2px;
}

.buy-cards-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.buy-label {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.buy-qty-presets {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.buy-qty-btn {
  min-width: 36px;
  height: 32px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.buy-qty-btn:hover, .buy-qty-btn.active {
  background: var(--accent);
  color: #000;
}

.buy-qty-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.buy-qty-ctrl {
  width: 34px;
  height: 34px;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.buy-qty-ctrl:hover {
  background: var(--accent);
  color: #000;
}
.buy-qty-input {
  width: 50px;
  height: 34px;
  text-align: center;
  border: 2px solid var(--card-border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-weight: 800;
  font-size: 0.9rem;
}
.buy-total-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
  margin-left: auto;
}

.buy-confirm-btn {
  width: 100%;
  height: 42px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 0.2s;
}
.buy-confirm-btn:hover { opacity: 0.9; }
.buy-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.buy-cards-error {
  margin: 0;
  font-size: 0.72rem;
  color: #f87171;
  font-weight: 600;
  min-height: 1em;
}

.buy-cards-result {
  font-size: 0.72rem;
  color: #ef4444;
  font-weight: 600;
  padding: 6px 8px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.45);
  border-radius: 6px;
}
.buy-cards-result.is-hidden { display: none; }

.buy-cards-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buy-compradas {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ef4444;
}
.buy-resgate-btn {
  padding: 0.35rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #e65100, #ff9800);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
}
.buy-resgate-btn:hover { opacity: 0.85; }
.buy-resgate-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Filter tabs */
.buy-filter-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.buy-filter-tabs::-webkit-scrollbar { display: none; }
.buy-filter-tabs.is-hidden { display: none; }
.buy-filter-tab {
  flex: 0 0 auto;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  border: 2px solid var(--accent);
  border-radius: 20px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.buy-filter-tab.active,
.buy-filter-tab:hover {
  background: var(--accent);
  color: #000;
}

/* Rounds list */
.buy-rounds-list {
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.buy-rounds-list.is-hidden { display: none; }
.buy-rounds-empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 20px 0;
  font-weight: 600;
}

.buy-round-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.buy-round-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(245,158,11,0.3);
}
.buy-round-card.is-special { border-left: 4px solid #f59e0b; }
.buy-round-card.is-bonus { border-left: 4px solid #22c55e; }
.buy-round-card.is-discount { border-left: 4px solid #3b82f6; }

.buy-round-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.buy-round-id {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--text);
}
.buy-round-date {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
}

.buy-round-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.buy-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.6rem;
  font-weight: 900;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-special {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
}
.badge-bonus {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
}
.badge-discount {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
}

.buy-round-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.buy-round-price-wrap {
  font-size: 0.8rem;
  font-weight: 800;
}
.buy-round-price {
  color: var(--accent);
  font-weight: 900;
}
.buy-round-orig-price {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 0.7rem;
  font-weight: 600;
}
.buy-round-prizes {
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 600;
}

.buy-round-meta {
  display: flex;
  gap: 10px;
  margin-top: 3px;
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 600;
}
.buy-round-mine {
  color: var(--accent-2);
  font-weight: 800;
}

/* Back button */
.buy-back-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}
.buy-back-btn:hover { text-decoration: underline; }

/* Discount info */
.buy-discount-info {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
  padding: 4px 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  text-align: center;
}
.buy-discount-info.is-hidden { display: none; }
.buy-discount-info.is-applied {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
}

.buy-cards-body.is-hidden { display: none; }

/* Modal de resgate de saldo */
.resgate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
}
.resgate-modal {
  background: var(--bg-card, #1a1a2e);
  border-radius: 12px;
  padding: 1.5rem;
  width: min(90vw, 360px);
  color: #fff;
  text-align: center;
}
.resgate-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #ff9800;
}
.resgate-saldo-info {
  font-size: 0.95rem;
  margin: 0.5rem 0;
}
.resgate-saldo-info b {
  color: #4caf50;
  font-size: 1.1rem;
}
.resgate-input-row {
  margin: 1rem 0;
  text-align: left;
}
.resgate-input-row label {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
  opacity: 0.8;
}
.resgate-input-row input {
  width: 100%;
  padding: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: 2px solid #555;
  border-radius: 8px;
  background: #111;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}
.resgate-tudo-btn {
  padding: 0.3rem 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid #ff9800;
  border-radius: 6px;
  background: transparent;
  color: #ff9800;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.resgate-error {
  color: #f44336;
  font-size: 0.78rem;
  min-height: 1.2rem;
  margin: 0.3rem 0;
}
.resgate-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.5rem;
}
.resgate-confirm-btn {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #e65100, #ff9800);
  color: #fff;
  cursor: pointer;
}
.resgate-confirm-btn:disabled { opacity: 0.4; }
.resgate-cancel-btn {
  flex: 0.6;
  padding: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid #666;
  border-radius: 8px;
  background: transparent;
  color: #ccc;
  cursor: pointer;
}

/* ---- Tela de confirmacao de credito de premio ---- */
/* ---- Tela de loading das cartelas ja compradas ---- */
.cards-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99980;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.25s ease;
}
.cards-loading-overlay.is-hidden { display: none; }
.cards-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  background: var(--bg-card, #1a1a2e);
  border-radius: 14px;
  padding: 2rem 2.5rem;
  color: #fff;
  text-align: center;
}
.cards-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: #ff9800;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cards-loading-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ddd;
  margin: 0;
}

/* ---- Tela de confirmacao de credito de premio ---- */
.prize-credited-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}
.prize-credited-overlay.prize-credited-fade-out {
  animation: fadeOut 0.4s ease forwards;
}
.prize-credited-box {
  background: var(--bg-card, #1a1a2e);
  border: 2px solid #4caf50;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  width: min(90vw, 340px);
  text-align: center;
  color: #fff;
  box-shadow: 0 0 40px rgba(76,175,80,0.35);
  animation: bounceIn 0.4s ease;
}
.prize-credited-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.prize-credited-title {
  font-size: 1.4rem;
  font-weight: 900;
  color: #4caf50;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prize-credited-value {
  font-size: 1.6rem;
  font-weight: 900;
  color: #ffeb3b;
  margin: 0 0 0.5rem;
}
.prize-credited-saldo {
  font-size: 0.95rem;
  color: #aaa;
  margin: 0 0 1.25rem;
}
.prize-credited-saldo strong {
  color: #4caf50;
  font-size: 1.1rem;
}
.prize-credited-btn {
  padding: 0.6rem 2.5rem;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1b5e20, #4caf50);
  color: #fff;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.prize-credited-btn:hover { opacity: 0.9; }
@keyframes bounceIn {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.95); }
}

/* ---- Mic Permission Overlay ---- */
.mic-permission-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}

.mic-permission-box {
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--card-border, rgba(255,255,255,0.1));
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 340px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

.mic-permission-icon {
  font-size: 3rem;
  margin-bottom: 8px;
}

.mic-permission-box h3 {
  margin: 0 0 8px;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.1rem;
  color: var(--accent, #f59e0b);
}

.mic-permission-box p {
  margin: 0 0 12px;
  font-size: 0.85rem;
  color: var(--muted, #94a3b8);
  line-height: 1.4;
}

.mic-perm-notice {
  font-size: 0.72rem !important;
  color: rgba(148,163,184,0.7) !important;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 14px !important;
}

.mic-permission-actions {
  display: flex;
  gap: 10px;
}

.mic-perm-btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s, opacity 0.15s;
}

.mic-perm-btn:active {
  transform: scale(0.96);
}

.mic-perm-yes {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1000;
}

.mic-perm-no {
  background: rgba(255,255,255,0.08);
  color: var(--muted, #94a3b8);
  border: 1px solid rgba(255,255,255,0.12);
}

html.theme-light .mic-permission-box {
  background: #fff;
  border-color: #e2e8f0;
}

html.theme-light .mic-permission-box h3 {
  color: #92400e;
}

html.theme-light .mic-permission-box p {
  color: #64748b;
}

html.theme-light .mic-perm-no {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

/* Mic feedback toast — mostra o que foi captado */
.mic-feedback {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0,0,0,0.85);
  color: #fde68a;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(245,158,11,0.3);
  z-index: 99998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  max-width: 85vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mic-feedback.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

html.theme-light .mic-feedback {
  background: rgba(255,255,255,0.95);
  color: #92400e;
  border-color: #f59e0b;
}