/* ==========================================================================
   SENADOR DOS MILHÕES — Identidade Visual Clássica Show do Milhão (SBT)
   Responsivo Mobile-First + Desktop Stage Layout
   ========================================================================== */

:root {
  --bg-deep: #020c30;
  --bg-royal: #072273;
  --bg-stage-glow: #1344b8;

  --red-top: #9e0606;
  --red-mid: #f01111;
  --red-flare: #ff5100;
  --red-bot: #7d0202;

  --gold-light: #fff6a3;
  --gold-main: #ffd000;
  --gold-dark: #b87400;

  --silver-light: #ffffff;
  --silver-mid: #dbe4f0;
  --silver-dark: #8899b0;

  --green-top: #26d63b;
  --green-mid: #0fa322;
  --green-bot: #066312;

  --font-display: 'Anton', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

html {
  color-scheme: dark;
  font-family: var(--font-sans);
  background-color: var(--bg-deep);
  color: #ffffff;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-block-size: 100dvb;
  inline-size: 100%;
  background: radial-gradient(circle at 50% 18%, #1648c4 0%, #061c63 52%, #020b2b 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}

svg,
img,
canvas {
  display: block;
  max-inline-size: 100%;
}

button,
select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: clip;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   STAGE BACKGROUND BEAMS
   ========================================================================== */
.stage-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: clip;
}

.stage-beam {
  position: absolute;
  inset-block: -10%;
  inline-size: 28%;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 146, 255, 0.16) 50%, transparent 100%);
  transform: skewX(-18deg);
}

.beam-1 {
  inset-inline-start: 6%;
}

.beam-2 {
  inset-inline-start: 38%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.09) 50%, transparent 100%);
}

.beam-3 {
  inset-inline-end: 4%;
}

.stage-grid-glow {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 35%;
  background: radial-gradient(ellipse at 50% 100%, rgba(16, 76, 219, 0.45), transparent 75%);
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.top-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.4rem;
  padding-block: 0.24rem;
  padding-inline: clamp(0.5rem, 2vw, 1.25rem);
  background: linear-gradient(180deg, rgba(2, 10, 40, 0.94) 0%, rgba(6, 25, 86, 0.85) 100%);
  border-block-end: 2px solid rgba(138, 176, 255, 0.35);
  backdrop-filter: blur(8px);
}

.top-bar-brand {
  display: flex;
  align-items: safe center;
  cursor: pointer;
  user-select: none;
}

.mini-logo-svg {
  inline-size: clamp(112px, 22vw, 148px);
  block-size: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  transition: transform 0.15s ease;
}

.top-bar-brand:hover .mini-logo-svg {
  transform: scale(1.04);
}

.top-bar-controls {
  display: flex;
  align-items: safe center;
  flex-wrap: wrap;
  flex-wrap: balance;
  gap: 0.4rem;
}

.top-pill-btn {
  display: inline-flex;
  align-items: safe center;
  gap: 0.35rem;
  padding-block: 0.38rem;
  padding-inline: 0.7rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, #1b49b8 0%, #0b246b 100%);
  color: #ffffff;
  font-size: clamp(0.72rem, 2vw, 0.84rem);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.top-pill-btn:hover {
  border-color: var(--gold-main);
  transform: translateY(-1px);
}

.top-pill-btn[aria-pressed="false"] {
  opacity: 0.65;
  background: rgba(15, 23, 42, 0.8);
}

/* ==========================================================================
   MAIN SHELL & SCREENS
   ========================================================================== */
.app-shell {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 1240px;
  margin-inline: auto;
  padding-block: 0.45rem 0.65rem;
  padding-inline: clamp(0.5rem, 1.8vw, 1.15rem);
}

.screen {
  inline-size: 100%;
  margin-block: 0;
}

.screen[hidden] {
  display: none !important;
}

/* ==========================================================================
   START SCREEN
   ========================================================================== */
.start-card {
  background: linear-gradient(165deg, rgba(11, 39, 125, 0.92) 0%, rgba(4, 16, 61, 0.96) 100%);
  border: 3px solid rgba(180, 206, 255, 0.55);
  border-radius: 22px;
  padding: clamp(0.9rem, 2.8vw, 1.8rem);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.start-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}

@media (min-width: 880px) {
  .start-hero-grid {
    grid-template-columns: 1.25fr 0.95fr;
    gap: 1.75rem;
  }
}

.start-hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
}

.hero-badge {
  display: inline-block;
  padding-block: 0.3rem;
  padding-inline: 0.85rem;
  border-radius: 999px;
  background: rgba(255, 208, 0, 0.16);
  border: 1px solid rgba(255, 208, 0, 0.65);
  color: var(--gold-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-logo-wrap {
  inline-size: min(100%, 440px);
  margin-inline: auto;
}

.hero-logo-svg {
  inline-size: 100%;
  block-size: auto;
}

.start-subtitle {
  font-size: clamp(0.88rem, 2.2vw, 1.04rem);
  line-height: 1.48;
  color: #e2ecff;
  max-inline-size: 58ch;
}

.start-subtitle strong {
  color: var(--gold-main);
}

/* Mode Selector */
.mode-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.65rem;
  inline-size: 100%;
}

.mode-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 2px solid rgba(148, 179, 255, 0.35);
  background: rgba(5, 20, 74, 0.75);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.mode-option.active {
  border-color: var(--gold-main);
  background: linear-gradient(180deg, rgba(35, 84, 212, 0.65) 0%, rgba(12, 34, 110, 0.85) 100%);
  box-shadow: 0 0 16px rgba(255, 208, 0, 0.28);
}

.mode-title {
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--gold-light);
}

.mode-desc {
  font-size: 0.74rem;
  color: #cbd5e1;
  line-height: 1.3;
}

/* Theme Filter */
.theme-filter-row {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.theme-select-label {
  font-size: 0.75rem;
  font-weight: 800;
  color: #bfd4ff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.theme-select {
  inline-size: 100%;
  padding-block: 0.6rem;
  padding-inline: 0.85rem;
  border-radius: 10px;
  border: 2px solid rgba(165, 196, 255, 0.5);
  background-color: #051650;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.86rem;
}

/* Main Start Button */
.start-cta-row {
  inline-size: 100%;
  margin-block-start: 0.25rem;
}

.btn-start-show {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding-block: 0.9rem;
  padding-inline: 1.25rem;
  border-radius: 16px;
  border: 3px solid #ffffff;
  background: linear-gradient(180deg, #ffea47 0%, #ff9900 55%, #d64b00 100%);
  color: #240800;
  box-shadow: 0 8px 25px rgba(255, 145, 0, 0.55), inset 0 2px 1px #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: pulseGlow 2.2s infinite ease-in-out;
}

.btn-start-show:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 32px rgba(255, 180, 0, 0.75), inset 0 2px 1px #ffffff;
}

.btn-start-show:active {
  transform: translateY(1px);
}

.btn-start-main {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  letter-spacing: 0.04em;
  color: #3d0000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.btn-start-sub {
  font-size: 0.78rem;
  font-weight: 800;
  color: #4a1200;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 6px 22px rgba(255, 145, 0, 0.5), 0 0 0 0 rgba(255, 215, 0, 0.5);
  }
  50% {
    box-shadow: 0 8px 28px rgba(255, 180, 0, 0.75), 0 0 0 6px rgba(255, 215, 0, 0);
  }
}

/* Start Right Side: Presenter + Mini Ladder */
.start-hero-side {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.presenter-showcase {
  display: flex;
  align-items: safe center;
  gap: 0.85rem;
  background: linear-gradient(135deg, rgba(16, 56, 168, 0.85) 0%, rgba(5, 21, 79, 0.92) 100%);
  border: 2px solid rgba(130, 175, 255, 0.5);
  border-radius: 16px;
  padding: 0.75rem;
}

.presenter-avatar-frame {
  flex: 0 0 105px;
}

.presenter-svg {
  inline-size: 105px;
  block-size: auto;
  border-radius: 12px;
}

.presenter-quote-box {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.presenter-quote {
  font-size: clamp(0.95rem, 2vw, 1.06rem);
  font-weight: 700;
  line-height: 1.42;
  color: #f8fafc;
  font-style: italic;
}

.presenter-quote strong {
  color: var(--gold-main);
}

.prize-preview-box {
  background: rgba(3, 12, 46, 0.85);
  border: 2px solid rgba(255, 208, 0, 0.45);
  border-radius: 16px;
  padding: 0.85rem 1rem;
}

.prize-preview-title {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--gold-main);
  letter-spacing: 0.05em;
  margin-block-end: 0.55rem;
}

.prize-preview-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  font-size: 0.78rem;
}

.prize-preview-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.25rem;
  border-block-end: 1px dashed rgba(148, 163, 184, 0.25);
}

.prize-preview-list li span {
  color: #93c5fd;
  font-weight: 700;
}

.prize-preview-list li strong {
  text-align: end;
  color: #f8fafc;
}

.prize-preview-list li.highlight-island {
  border-block-end: none;
  padding: 0.4rem 0.55rem;
  margin-block-start: 0.2rem;
  background: linear-gradient(90deg, rgba(255, 208, 0, 0.2), rgba(234, 88, 12, 0.3));
  border: 1px solid var(--gold-main);
  border-radius: 8px;
}

.prize-preview-list li.highlight-island span,
.prize-preview-list li.highlight-island strong {
  color: var(--gold-light);
  font-weight: 900;
}

.editorial-disclaimer {
  margin-block-start: 1.1rem;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid rgba(148, 179, 255, 0.25);
  font-size: 0.72rem;
  line-height: 1.45;
  color: #b4c6e7;
}

/* ==========================================================================
   GAME SCREEN — CLASSIC SHOW DO MILHÃO LAYOUT (COMPACT NO-SCROLL STAGE)
   ========================================================================== */
.show-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .show-layout {
    grid-template-columns: 1.55fr 0.95fr;
    gap: 1rem;
    align-items: start;
  }
}

.question-column {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.8dvh, 0.5rem);
  min-inline-size: 0;
}

/* Question Meta Badges */
.question-meta-bar {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 0.35rem;
}

.q-step-badge {
  background: linear-gradient(180deg, #ffd700 0%, #d98200 100%);
  color: #1f0a00;
  font-weight: 900;
  font-size: 0.7rem;
  padding: 0.16rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}

.q-theme-badge {
  background: rgba(15, 46, 138, 0.9);
  border: 1.5px solid #60a5fa;
  color: #e0f2fe;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.q-status-badge {
  margin-inline-start: auto;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 42, 0.75);
  color: #fde68a;
}

/* Silvio dos Milhões Card (Top of Question Column) */
.live-presenter-card {
  display: flex;
  align-items: safe center;
  gap: 0.75rem;
  padding: clamp(0.5rem, 1dvh, 0.65rem) 0.85rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 53, 158, 0.92) 0%, rgba(5, 19, 71, 0.96) 100%);
  border: 2px solid rgba(132, 176, 255, 0.55);
  min-inline-size: 0;
}

.live-presenter-avatar {
  flex: 0 0 clamp(54px, 7.2dvh, 68px);
}

.live-presenter-svg {
  inline-size: clamp(54px, 7.2dvh, 68px);
  block-size: clamp(54px, 7.2dvh, 68px);
  border-radius: 12px;
}

.speech-bubble-wrap {
  min-inline-size: 0;
  flex: 1 1 auto;
}

.presenter-name-tag {
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--gold-main);
  letter-spacing: 0.04em;
  margin-block-end: 0.2rem;
}

.speech-bubble-text {
  font-size: clamp(0.94rem, 0.5rem + 1.15dvh, 1.06rem);
  font-weight: 700;
  line-height: 1.34;
  color: #ffffff;
}

/* ==========================================================================
   CLASSIC RED QUESTION BOX (Matching Image 1 & 2)
   ========================================================================== */
.question-box {
  position: relative;
  padding-block: clamp(0.6rem, 1.4dvh, 1rem);
  padding-inline: clamp(0.85rem, 2.2vw, 1.25rem);
  border-radius: 15px;
  border: 3px solid #eef4ff;
  background:
    radial-gradient(ellipse at 55% 45%, rgba(255, 94, 0, 0.45) 0%, transparent 65%),
    linear-gradient(180deg, #940303 0%, #e60c0c 48%, #820202 100%);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.6),
    inset 0 2px 3px rgba(255, 255, 255, 0.45),
    inset 0 -3px 6px rgba(60, 0, 0, 0.75);
}

.question-text {
  font-size: clamp(0.92rem, 0.55rem + 1.2dvh, 1.18rem);
  font-weight: 900;
  line-height: 1.28;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 #3b0000, 0 3px 8px rgba(0, 0, 0, 0.75);
  letter-spacing: 0.012em;
}

/* ==========================================================================
   4 RED OPTIONS BARS WITH NUMBER/LETTER CIRCLES (Matching Image 1 & 2)
   ========================================================================== */
.options-list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.32rem, 0.65dvh, 0.45rem);
}

.option-btn {
  position: relative;
  inline-size: 100%;
  display: flex;
  align-items: safe center;
  gap: 0.55rem;
  padding-block: clamp(0.36rem, 0.85dvh, 0.56rem);
  padding-inline: 0.55rem 0.8rem;
  border-radius: 13px;
  border: 2.5px solid #e6eefc;
  background:
    linear-gradient(115deg, #7d0202 0%, #db0b0b 38%, #ff4500 55%, #b80404 75%, #6e0101 100%);
  color: #ffffff;
  text-align: start;
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.5),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
  transition: transform 0.12s ease, border-color 0.12s ease, filter 0.12s ease, opacity 0.2s ease;
}

.option-btn:hover:not(:disabled) {
  transform: translateX(3px);
  border-color: var(--gold-main);
  filter: brightness(1.08);
}

.option-btn:active:not(:disabled) {
  transform: scale(0.99);
}

/* Circle on the left of each option (A, B, C, D) */
.option-circle {
  flex: 0 0 clamp(34px, 4.6dvh, 42px);
  block-size: clamp(34px, 4.6dvh, 42px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 65%, #cbd5e1 100%);
  border: 2.5px solid #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 1;
}

.opt-letter {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2dvh, 1.25rem);
  color: #1d2ec2;
  line-height: 1;
}

.option-content {
  min-inline-size: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.option-text {
  font-size: clamp(0.84rem, 0.5rem + 0.95dvh, 1rem);
  font-weight: 800;
  line-height: 1.22;
  color: #ffffff;
  text-shadow: 1.5px 1.5px 0 #360000, 0 2px 4px rgba(0, 0, 0, 0.7);
}

.option-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.option-hints:empty {
  display: none;
}

.hint-chip {
  display: inline-flex;
  align-items: safe center;
  gap: 0.22rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid var(--gold-main);
  color: var(--gold-light);
}

/* Option States: Selected ("Está certo disso?"), Correct, Wrong, Eliminated by Cards */
.option-btn.is-selected {
  border-color: #fff6a3;
  background: linear-gradient(115deg, #c25e00 0%, #ff9900 48%, #ffd000 60%, #b85400 100%);
  box-shadow: 0 0 18px rgba(255, 208, 0, 0.75);
  animation: selectedPulse 0.9s infinite alternate;
}

.option-btn.is-selected .option-text {
  color: #1f0800;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

@keyframes selectedPulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.14);
  }
}

.option-btn.is-correct {
  border-color: #bbf7d0;
  background: linear-gradient(115deg, #065f46 0%, #16a34a 48%, #4ade80 65%, #065f46 100%) !important;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.85);
  animation: correctFlash 0.35s 3;
}

@keyframes correctFlash {
  50% {
    filter: brightness(1.35);
  }
}

.option-btn.is-wrong {
  border-color: #fca5a5;
  background: linear-gradient(115deg, #3b0764 0%, #7f1d1d 50%, #450a0a 100%) !important;
  opacity: 0.9;
}

.option-btn.is-eliminated {
  opacity: 0.24;
  filter: grayscale(0.85);
  pointer-events: none;
  text-decoration: line-through;
}

/* ==========================================================================
   SIDE-BY-SIDE ACTION BAR: SIM, ESTOU CERTO! | TROCAR | PARAR
   ========================================================================== */
.confirm-bar {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr 1fr;
  gap: 0.45rem;
  align-items: stretch;
}

.btn-confirm-yes,
.btn-confirm-cancel,
.btn-parar-classic {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(0.35rem, 0.8dvh, 0.5rem);
  padding-inline: 0.5rem;
  border-radius: 12px;
  transition: transform 0.12s ease, filter 0.12s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}

.btn-confirm-yes {
  border: 2.5px solid #ffffff;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.45);
}

.btn-confirm-yes.is-ready {
  border-color: var(--gold-light);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.85), 0 0 0 2px rgba(255, 215, 0, 0.5);
  animation: selectedPulse 0.85s infinite alternate;
}

.btn-confirm-yes:hover:not(:disabled),
.btn-confirm-cancel:hover:not(:disabled),
.btn-parar-classic:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.btn-confirm-yes:disabled,
.btn-confirm-cancel:disabled,
.btn-parar-classic:disabled {
  opacity: 0.42;
  filter: grayscale(0.65);
  cursor: not-allowed;
  box-shadow: none;
}

.confirm-btn-main {
  font-family: var(--font-display);
  font-size: clamp(0.88rem, 2.2vw, 1.08rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.confirm-btn-sub {
  font-size: 0.62rem;
  font-weight: 800;
  color: #dcfce7;
  line-height: 1.15;
}

.btn-confirm-cancel {
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
  color: #f1f5f9;
}

.cancel-btn-main {
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 2vw, 1.02rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
}

.cancel-btn-sub {
  font-size: 0.6rem;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.15;
}

.btn-parar-classic {
  border: 2.5px solid #ffffff;
  background: linear-gradient(180deg, var(--green-top) 0%, var(--green-mid) 55%, var(--green-bot) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1.5px 2px rgba(255, 255, 255, 0.5);
}

.parar-text {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  letter-spacing: 0.05em;
  line-height: 1.05;
  color: #ffffff;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
}

.parar-sub {
  font-size: 0.62rem;
  font-weight: 800;
  color: #dcfce7;
  line-height: 1.15;
}

/* ==========================================================================
   EXPLANATION & SOURCES MODAL DIALOG (CENTERED POST-ANSWER)
   ========================================================================== */
.explanation-dialog {
  inline-size: min(94vw, 600px);
}

.explanation-dialog.is-correct-dialog {
  border-color: #4ade80;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.88), 0 0 28px rgba(34, 197, 94, 0.35);
}

.explanation-dialog.is-wrong-dialog {
  border-color: #f87171;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.88), 0 0 28px rgba(239, 68, 68, 0.35);
}

.explanation-header {
  display: flex;
  align-items: safe center;
  gap: 0.75rem;
  padding-block-end: 0.65rem;
  border-block-end: 1.5px solid rgba(148, 179, 255, 0.28);
}

.explanation-verdict-icon {
  font-size: 2.1rem;
  flex-shrink: 0;
}

.explanation-verdict {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.5vw, 1.65rem);
  letter-spacing: 0.04em;
  color: var(--gold-main);
  line-height: 1.1;
}

.explanation-dialog.is-correct-dialog .explanation-verdict {
  color: #4ade80;
}

.explanation-dialog.is-wrong-dialog .explanation-verdict {
  color: #fca5a5;
}

.explanation-reward {
  font-size: 0.86rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-block-start: 0.2rem;
}

.explanation-topic-bar {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  align-items: safe center;
  gap: 0.45rem;
}

.explanation-topic-pill {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.85);
  border: 1.5px solid #60a5fa;
  color: #e0f2fe;
  font-size: 0.76rem;
  font-weight: 800;
}

.explanation-status-pill {
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(253, 230, 138, 0.6);
  color: #fde68a;
  font-size: 0.74rem;
  font-weight: 800;
}

.explanation-correct-box {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.18);
  border: 1.5px solid rgba(74, 222, 128, 0.6);
  color: #dcfce7;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
}

.explanation-summary-section {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.summary-heading {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.explanation-body {
  font-size: clamp(0.9rem, 2.2vw, 0.98rem);
  line-height: 1.52;
  color: #ffffff;
  background: rgba(2, 8, 32, 0.68);
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  border-inline-start: 4px solid var(--gold-main);
}

.explanation-sources-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(2, 8, 32, 0.42);
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
}

.sources-heading {
  font-size: 0.73rem;
  font-weight: 800;
  color: #93c5fd;
  text-transform: uppercase;
}

.sources-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sources-list li a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fde047;
  text-decoration: underline;
  word-break: break-word;
}

.sources-list li a:hover {
  color: #ffffff;
}

.btn-next-question {
  inline-size: 100%;
  padding: 0.85rem 1.2rem;
  border-radius: 12px;
  border: 2.5px solid #ffffff;
  background: linear-gradient(180deg, #ffea47 0%, #f59e0b 55%, #c2410c 100%);
  color: #290700;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

/* ==========================================================================
   RIGHT SIDEBAR: AJUDA + STAKES GOLD BARS (COMPACT STAGE)
   ========================================================================== */
.stage-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-inline-size: 0;
}

/* AJUDA Blue Box (Image 2 Center Right) */
.ajuda-panel {
  position: relative;
  border-radius: 16px;
  border: 2px solid rgba(203, 224, 255, 0.85);
  background: linear-gradient(180deg, #2758db 0%, #103299 55%, #071b61 100%);
  padding: 0.5rem 0.65rem 0.6rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.ajuda-header {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  margin-block-end: 0.35rem;
}

.ajuda-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.65);
}

.ajuda-final-warning {
  font-size: 0.66rem;
  font-weight: 900;
  color: #fef08a;
  background: rgba(185, 28, 28, 0.85);
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  border: 1px solid #fde047;
}

.ajuda-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.38rem;
}

@media (min-width: 900px) {
  .ajuda-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.48rem;
  }
}

.lifeline-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  padding: 0.35rem 0.3rem;
  border-radius: 11px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(6, 20, 74, 0.55);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.lifeline-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--gold-main);
  background: rgba(25, 66, 185, 0.75);
}

.lifeline-btn:disabled {
  opacity: 0.35;
  filter: grayscale(0.85);
  cursor: not-allowed;
}

.lifeline-icon-wrap {
  position: relative;
  inline-size: clamp(48px, 11vw, 64px);
  block-size: clamp(38px, 8.5vw, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lifeline-svg {
  inline-size: 100%;
  block-size: 100%;
}

.lifeline-badge {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: -2px;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: #991b1b;
  border: 1.5px solid #ffffff;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lifeline-name {
  font-size: clamp(0.7rem, 1.9vw, 0.82rem);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   CLASSIC GOLD BARS TRIO: ERRAR / PARAR / ACERTAR (Matching Image 1 & 2)
   ========================================================================== */
.stakes-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.stake-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0.4rem 0.25rem;
  border-radius: 12px;
  background: rgba(3, 12, 46, 0.65);
  border: 1px solid rgba(148, 179, 255, 0.25);
}

/* 3D Gold Bar / Plaque Visual */
.gold-bar-visual {
  inline-size: 100%;
  min-block-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.35rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff6a1 0%, #ffd000 45%, #d48800 85%, #8c5200 100%);
  border: 2px solid #fffbeb;
  box-shadow: 0 4px 0 #6e3b00, 0 6px 10px rgba(0, 0, 0, 0.6);
  transform: perspective(180px) rotateX(8deg);
}

.gold-bar-highlight {
  background: linear-gradient(180deg, #ffffff 0%, #ffe600 40%, #ff9900 85%, #9e4700 100%);
  box-shadow: 0 4px 0 #78350f, 0 0 14px rgba(255, 215, 0, 0.55);
}

.gold-bar-visual.is-perde-tudo {
  background: linear-gradient(135deg, #facc15 0%, #eab308 46%, #1e293b 48%, #1e293b 52%, #ca8a04 54%, #a16207 100%);
  border-color: #ef4444;
}

.gold-bar-value {
  font-family: var(--font-display);
  font-size: clamp(0.84rem, 2.3vw, 1.06rem);
  letter-spacing: 0.02em;
  color: #b80000;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  line-height: 1.05;
}

.stake-card-action {
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 2.1vw, 0.96rem);
  font-style: italic;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-block-start: 0.15rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.stake-card-detail {
  font-size: 0.65rem;
  font-weight: 700;
  color: #bfdbfe;
  line-height: 1.2;
}

/* ==========================================================================
   GAME OVER / VICTORY SCREEN
   ========================================================================== */
.gameover-card {
  background: linear-gradient(165deg, rgba(11, 39, 125, 0.95) 0%, rgba(3, 12, 46, 0.98) 100%);
  border: 3px solid var(--gold-main);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.gameover-badge {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 208, 0, 0.2);
  border: 1.5px solid var(--gold-main);
  color: var(--gold-light);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.gameover-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.8vw, 2.5rem);
  letter-spacing: 0.03em;
  color: var(--gold-main);
  text-shadow: 0 3px 0 #5c1900, 0 6px 14px rgba(0, 0, 0, 0.7);
}

.gameover-subtitle {
  font-size: clamp(0.9rem, 2.3vw, 1.05rem);
  color: #e2e8f0;
  max-inline-size: 60ch;
  line-height: 1.45;
}

.prize-certificate {
  inline-size: min(100%, 640px);
  display: flex;
  align-items: safe center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 208, 0, 0.2) 0%, rgba(15, 42, 122, 0.85) 100%);
  border: 2.5px solid var(--gold-main);
  text-align: start;
}

.certificate-illustration {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  flex-shrink: 0;
}

.certificate-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-inline-size: 0;
}

.certificate-label {
  font-size: 0.7rem;
  font-weight: 900;
  color: #fde047;
  letter-spacing: 0.06em;
}

.certificate-value {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.6vw, 1.85rem);
  color: #ffffff;
  letter-spacing: 0.03em;
}

.certificate-item {
  font-size: 0.84rem;
  font-weight: 700;
  color: #bfdbfe;
}

.gameover-stats {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: balance;
  justify-content: center;
  gap: 0.75rem;
}

.stat-pill {
  min-inline-size: 115px;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: rgba(4, 15, 54, 0.8);
  border: 1.5px solid rgba(148, 179, 255, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--gold-main);
}

.stat-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  color: #cbd5e1;
}

.gameover-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  inline-size: 100%;
}

.btn-play-again,
.btn-share-result {
  padding: 0.8rem 1.4rem;
  border-radius: 14px;
  font-weight: 900;
  font-size: 0.95rem;
  border: 2.5px solid #ffffff;
}

.btn-play-again {
  background: linear-gradient(180deg, #ffea47 0%, #f59e0b 55%, #b45309 100%);
  color: #240700;
}

.btn-share-result {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
}

/* Match History Dossier */
.history-review-box {
  inline-size: 100%;
  margin-block-start: 0.5rem;
  text-align: start;
  background: rgba(2, 9, 36, 0.75);
  border: 1.5px solid rgba(148, 179, 255, 0.3);
  border-radius: 16px;
  padding: 0.9rem 1rem;
}

.history-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--gold-light);
  margin-block-end: 0.65rem;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-block-size: 320px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding-inline-end: 0.25rem;
}

.history-item {
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(15, 35, 95, 0.55);
  border-inline-start: 4px solid #60a5fa;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.history-item.is-correct {
  border-inline-start-color: #4ade80;
}

.history-item.is-wrong {
  border-inline-start-color: #f87171;
}

/* ==========================================================================
   MODAL DIALOGS (<dialog closedby="any">) — Modern Web Guidance Compliant
   ========================================================================== */
dialog:modal {
  /* MANDATORY: Prevent scroll gestures inside the modal from chaining to the underlying page. */
  overscroll-behavior: contain;
}

dialog::backdrop {
  /* MANDATORY: ::backdrop defaults to overflow: visible. Set overflow: hidden + overscroll-behavior: contain. */
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: rgba(1, 6, 26, 0.78);
  backdrop-filter: blur(4px);
}

.show-dialog {
  margin: auto;
  inline-size: min(94vw, 540px);
  max-block-size: 88dvb;
  border-radius: 20px;
  border: 3px solid var(--gold-main);
  background: linear-gradient(170deg, #0d2f96 0%, #041247 100%);
  color: #ffffff;
  padding: 0;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.85);
}

.dialog-inner {
  padding: clamp(0.95rem, 3vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dialog-header {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.5rem;
  border-block-end: 1.5px solid rgba(148, 179, 255, 0.3);
  padding-block-end: 0.55rem;
}

.dialog-header h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--gold-main);
}

.dialog-close-btn {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  font-weight: 900;
}

.dialog-desc {
  font-size: 0.84rem;
  line-height: 1.42;
  color: #e2e8f0;
}

.dialog-result-msg {
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: rgba(255, 208, 0, 0.16);
  border: 1.5px solid var(--gold-main);
  color: var(--gold-light);
  font-weight: 800;
  font-size: 0.88rem;
  text-align: center;
}

/* Playing Cards Table */
.cards-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  padding-block: 0.35rem;
}

.playing-card {
  aspect-ratio: 2.5 / 3.6;
  border-radius: 12px;
  border: 2.5px solid #ffffff;
  background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.playing-card:hover:not(:disabled) {
  transform: translateY(-5px) scale(1.03);
  border-color: var(--gold-main);
}

.playing-card.is-revealed {
  background: #ffffff;
  color: #0f172a;
  border-color: var(--gold-main);
}

.playing-card.is-picked {
  box-shadow: 0 0 22px rgba(255, 215, 0, 0.9);
  transform: scale(1.05);
}

.card-back {
  font-size: clamp(1.8rem, 5vw, 2.4rem);
}

.card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-weight: 900;
}

.card-front[hidden] {
  display: none !important;
}

.card-rank {
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.card-suit {
  font-size: 1.35rem;
}

.card-elim-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  color: #334155;
  padding-inline: 0.2rem;
}

/* Plates Chart */
.plates-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  align-items: end;
  min-block-size: 180px;
  padding: 0.85rem 0.65rem;
  border-radius: 14px;
  background: rgba(2, 9, 36, 0.7);
}

.plate-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  block-size: 100%;
  justify-content: flex-end;
}

.plate-pct {
  font-weight: 900;
  font-size: 0.88rem;
  color: var(--gold-light);
}

.plate-bar-wrap {
  inline-size: 100%;
  max-inline-size: 46px;
  block-size: 110px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.plate-bar-fill {
  inline-size: 100%;
  background: linear-gradient(180deg, #ffea47 0%, #f59e0b 100%);
  border-radius: 6px 6px 0 0;
  transition: block-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.plate-letter-tag {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 8px;
  background: #dc2626;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

/* Militia Guests Grid */
.militia-guests-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.militia-guest-card {
  display: flex;
  align-items: safe center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  background: rgba(2, 10, 40, 0.75);
  border: 1.5px solid rgba(148, 179, 255, 0.35);
}

.militia-avatar {
  font-size: 1.85rem;
  flex-shrink: 0;
}

.militia-info {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.militia-name {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--gold-main);
}

.militia-quote {
  font-size: 0.78rem;
  color: #e2e8f0;
  margin-block-start: 0.15rem;
}

.militia-vote-badge {
  flex: 0 0 44px;
  block-size: 44px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ef4444 0%, #991b1b 100%);
  border: 2px solid #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
}

/* Prize Ladder List inside Dialog */
.ladder-list {
  list-style: none;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.35rem;
  max-block-size: 52dvb;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding-inline-end: 0.25rem;
}

.ladder-step {
  display: flex;
  align-items: safe center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: rgba(3, 12, 46, 0.65);
  border: 1px solid rgba(148, 179, 255, 0.22);
  font-size: 0.78rem;
}

.ladder-step.is-current {
  border: 2px solid var(--gold-main);
  background: linear-gradient(90deg, rgba(255, 208, 0, 0.28), rgba(29, 78, 216, 0.75));
  font-weight: 900;
}

.ladder-step.is-passed {
  opacity: 0.65;
  border-color: rgba(74, 222, 128, 0.45);
}

.ladder-step.is-final {
  border-color: #f59e0b;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(185, 28, 28, 0.55));
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  max-block-size: 54dvb;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding-inline-end: 0.3rem;
}

.rules-content h3 {
  color: var(--gold-main);
  font-size: 0.92rem;
  margin-block-start: 0.25rem;
}

.rules-content ul {
  padding-inline-start: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-block-start: 0.2rem;
}

.dialog-footer-split {
  flex-wrap: wrap;
}

.btn-dialog-primary,
.btn-confirm-stop,
.btn-dialog-secondary {
  inline-size: 100%;
  padding: 0.68rem 1rem;
  border-radius: 12px;
  font-weight: 900;
  font-size: 0.86rem;
}

.btn-dialog-primary {
  border: 2px solid #ffffff;
  background: linear-gradient(180deg, #ffea47 0%, #f59e0b 100%);
  color: #260800;
}

.btn-confirm-stop {
  border: 2px solid #ffffff;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  color: #ffffff;
}

.btn-dialog-secondary {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
}