:root {
      --sm-blue: #000080;
      --sm-blue-2: #0713a8;
      --sm-dark: #000033;
      --sm-gold: #ffd700;
      --sm-gold-2: #ff9900;
      --sm-red: #cc0000;
      --sm-green: #18b84d;
      --font-display: Impact, "Arial Black", "Arial Narrow", sans-serif;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: radial-gradient(circle at center, var(--sm-blue) 0%, var(--sm-dark) 66%, #000019 100%);
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      overflow: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 20% 15%, rgba(255, 215, 0, .16), transparent 18%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, .10), transparent 16%),
        linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 42px);
      opacity: .95;
    }

    #app { position: relative; min-height: 100vh; z-index: 1; }

    .screen {
      min-height: 100vh;
      width: min(1100px, 100%);
      margin: 0 auto;
      padding: clamp(14px, 2vw, 24px);
      display: flex;
      flex-direction: column;
    }

    .center {
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 22px;
    }

    .logo-main {
      width: min(920px, 96vw);
      max-height: 46vh;
      object-fit: contain;
      filter: drop-shadow(0 0 18px rgba(255, 215, 0, .35)) drop-shadow(0 14px 20px rgba(0,0,0,.55));
      animation: logoPop .8s cubic-bezier(.2, .9, .2, 1.15) both;
    }

    .logo-mini {
      width: min(440px, 58vw);
      height: 110px;
      object-fit: contain;
      filter: drop-shadow(0 0 10px rgba(255, 215, 0, .25));
      justify-self: center;
      align-self: center;
    }

    @keyframes logoPop {
      from { transform: scale(.72); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }

    .gold-text {
      color: var(--sm-gold);
      text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 0 0 18px rgba(255,215,0,.5);
    }

    .title-fallback {
      font-family: var(--font-display);
      font-size: clamp(44px, 10vw, 92px);
      line-height: .9;
      margin: 0;
      letter-spacing: .02em;
    }

    .subtitle {
      margin: -6px 0 18px;
      text-transform: uppercase;
      letter-spacing: .38em;
      font-weight: 900;
      color: rgba(255,255,255,.9);
      font-size: clamp(14px, 2vw, 24px);
    }

    .panel, .question-box, .modal-card, .prize-card {
      border: 4px solid var(--sm-gold);
      box-shadow: 0 0 12px var(--sm-gold), inset 0 0 12px rgba(255,215,0,.75), 0 14px 30px rgba(0,0,0,.35);
      background: linear-gradient(180deg, #09178e, #02085f 58%, #00054a);
    }

    .button {
      appearance: none;
      border: 4px solid var(--sm-gold);
      color: #fff;
      background: linear-gradient(180deg, #0b22b8, #020b7a);
      box-shadow: 0 0 10px var(--sm-gold), inset 0 0 10px rgba(255,215,0,.65);
      border-radius: 999px;
      padding: 14px 26px;
      font-weight: 900;
      text-transform: uppercase;
      cursor: pointer;
      transition: transform .18s ease, filter .18s ease, background .18s ease, opacity .18s ease;
      letter-spacing: .02em;
      font-size: 16px;
    }

    .button:hover:not(:disabled) { transform: translateY(-2px) scale(1.035); filter: brightness(1.12); }
    .button:active:not(:disabled) { transform: scale(.97); }
    .button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.8); }
    .button.big { font-size: clamp(22px, 3vw, 34px); padding: 22px 46px; }
    .button.red { background: linear-gradient(180deg, #ce1a1a, #7e0404); }
    .button.green { background: linear-gradient(180deg, #22b654, #087a2c); }
    .button.flat { padding: 10px 14px; font-size: 14px; }

    .sound-toggle {
      position: fixed;
      top: 16px;
      right: 16px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      padding: 0;
      z-index: 40;
      font-size: 22px;
    }

    .start-card {
      width: min(980px, 96vw);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }

    .start-note {
      opacity: .85;
      font-weight: 700;
      margin: 0 0 4px;
      font-size: clamp(13px, 1.5vw, 18px);
    }

    .start-audio-hint {
      margin: -4px 0 2px;
      font-size: clamp(12px, 1.2vw, 15px);
      font-weight: 800;
      color: rgba(255, 228, 94, .92);
      text-shadow: 0 0 10px rgba(255, 215, 0, .35);
    }

    .game-screen { gap: 14px; height: 100vh; }

    .game-head {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      align-items: stretch;
      flex: 0 0 auto;
    }

    .prize-card {
      border-radius: 18px;
      padding: 10px 12px;
      text-align: center;
      min-height: 76px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .prize-card .label {
      font-size: clamp(11px, 1.4vw, 14px);
      color: rgba(255,255,255,.72);
      text-transform: uppercase;
      font-weight: 900;
      margin-bottom: 4px;
    }

    .prize-card .value {
      font-size: clamp(17px, 2.2vw, 27px);
      font-weight: 1000;
      line-height: 1;
    }

    .value.red-txt { color: #ff6b6b; }
    .value.stop-txt { color: #ffea62; }

    .timer-card {
      background: linear-gradient(180deg, #14023d, #040032);
      position: relative;
      overflow: hidden;
    }

    .timer-card.warning { animation: dangerPulse .8s infinite alternate; }

    .timer-display {
      font-family: var(--font-display);
      color: var(--sm-gold);
      font-size: clamp(24px, 3.4vw, 42px);
      line-height: .92;
      text-shadow: 2px 2px 0 #000, 0 0 16px rgba(255,215,0,.62);
    }

    @keyframes dangerPulse {
      from { border-color: var(--sm-gold); box-shadow: 0 0 12px var(--sm-gold), inset 0 0 12px rgba(255,215,0,.75); }
      to { border-color: #ff3838; box-shadow: 0 0 22px #ff3838, inset 0 0 18px rgba(255,56,56,.8); }
    }

    .brand-strip {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      margin-top: -4px;
      min-height: 108px;
    }

    .question-wrap {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
    }

    .question-box {
      border-radius: 28px;
      padding: clamp(22px, 2.8vw, 32px) clamp(12px, 1.6vw, 20px) clamp(18px, 2.4vw, 28px);
      position: relative;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .question-badge {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 999px;
      padding: 7px 22px;
      background: #010449;
      border: 3px solid var(--sm-gold);
      box-shadow: 0 0 10px var(--sm-gold);
      font-family: var(--font-display);
      font-size: clamp(17px, 2.2vw, 26px);
      white-space: nowrap;
    }

    .question-text {
      margin: 0;
      width: 100%;
      max-width: none;
      text-align: center;
      font-size: clamp(21px, 3.15vw, 39px);
      line-height: 1.08;
      font-weight: 1000;
      overflow-wrap: anywhere;
    }

    .options-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      overflow-y: auto;
      padding: 2px 4px 10px;
      min-height: 0;
      flex: 1 1 auto;
      align-content: start;
    }

    .option-btn {
      position: relative;
      overflow: hidden;
      width: 100%;
      min-height: 78px;
      padding: 14px 22px 14px 68px;
      text-align: left;
      border-radius: 999px;
      background: linear-gradient(180deg, #0a1c9b, #020962);
      border: 4px solid var(--sm-gold);
      box-shadow: 0 0 10px var(--sm-gold), inset 0 0 10px rgba(255,215,0,.65);
      color: #fff;
      font-size: clamp(16px, 2vw, 21px);
      font-weight: 900;
      cursor: pointer;
      transition: transform .16s ease, background .16s ease, opacity .2s ease, filter .2s ease;
      line-height: 1.2;
    }

    .option-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.15); }
    .option-btn:disabled { cursor: default; }
    .option-btn.eliminated { opacity: 0; pointer-events: none; }
    .option-btn.selected { background: linear-gradient(180deg, #ffd900, #d18a00); color: #000; border-color: #fff; box-shadow: 0 0 24px #fff; }
    .option-btn.correct { background: linear-gradient(180deg, #2fe06b, #079034); color: #fff; border-color: #caffd9; box-shadow: 0 0 24px #4ade80; }
    .option-btn.wrong { background: linear-gradient(180deg, #f23030, #a00000); color: #fff; border-color: #ffc2c2; box-shadow: 0 0 24px #f87171; }

    .option-letter {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 2px solid #fff;
      background: #00044d;
      color: #fff;
      font-weight: 1000;
      font-size: 20px;
    }

    .bottom-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      flex: 0 0 auto;
      padding-bottom: 4px;
    }

    .lifeline {
      min-height: 62px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      position: relative;
    }

    .lifeline .ico { font-size: 21px; line-height: 1; }
    .pill-count {
      position: absolute;
      top: -8px;
      right: -6px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #d60000;
      border: 2px solid #fff;
      display: grid;
      place-items: center;
      font-weight: 1000;
      font-size: 12px;
    }

    .overlay {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(0, 0, 35, .82);
      backdrop-filter: blur(6px);
      border-radius: 30px;
    }

    .modal-card {
      width: min(540px, 96%);
      border-radius: 28px;
      padding: clamp(22px, 4vw, 36px);
      text-align: center;
    }

    .modal-card h3 {
      margin: 0 0 22px;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.02;
      font-weight: 1000;
    }

    .confirm-actions { display: flex; gap: 14px; }
    .confirm-actions .button { flex: 1; }

    .cards { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .card-pick {
      width: 82px;
      height: 126px;
      border-radius: 14px;
      font-size: 32px;
      background: linear-gradient(135deg, #0713a8, #00033c);
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    .help-message {
      white-space: pre-line;
      background: rgba(0,0,40,.65);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 16px;
      padding: 20px;
      font-family: "Courier New", monospace;
      font-size: clamp(20px, 3vw, 30px);
      font-weight: 900;
      margin: 0 0 22px;
    }

    .million-warning {
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(180deg, #ff2525, #a40000);
      border: 3px solid #fff;
      box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 18px rgba(255,255,255,.45);
      border-radius: 999px;
      padding: 8px 22px;
      text-align: center;
      font-weight: 1000;
      z-index: 50;
      animation: bounce .9s infinite alternate;
      font-size: clamp(12px, 1.6vw, 16px);
    }

    @keyframes bounce { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(5px); } }

    .end-panel {
      width: min(680px, 94vw);
      border-radius: 30px;
      padding: clamp(26px, 5vw, 48px);
      text-align: center;
    }

    .end-panel h1 {
      margin: 0 0 18px;
      font-family: var(--font-display);
      font-size: clamp(48px, 9vw, 82px);
      line-height: .92;
      letter-spacing: .02em;
    }

    .end-panel p {
      margin: 0 0 28px;
      font-size: clamp(22px, 3vw, 30px);
      font-weight: 900;
    }

    .money {
      display: block;
      margin-top: 10px;
      font-family: var(--font-display);
      font-size: clamp(44px, 8vw, 74px);
      line-height: .95;
    }

    .shake { animation: shake .28s linear 5; }
    @keyframes shake {
      0%,100% { transform: translateX(0); }
      25% { transform: translateX(-8px); }
      75% { transform: translateX(8px); }
    }

    .pulse-red { animation: pulseRed 1.4s infinite; }
    @keyframes pulseRed {
      0% { box-shadow: 0 0 0 0 rgba(204,0,0,.7); }
      70% { box-shadow: 0 0 0 16px rgba(204,0,0,0); }
      100% { box-shadow: 0 0 0 0 rgba(204,0,0,0); }
    }

    @media (max-width: 760px) {
      html, body { overflow: auto; }
      .game-screen { min-height: 100vh; height: auto; }
      .game-head { grid-template-columns: repeat(2, 1fr); }
      .brand-strip { min-height: 76px; }
      .logo-mini { width: min(320px, 76vw); height: 76px; }
      .options-grid { grid-template-columns: 1fr; overflow: visible; }
      .bottom-bar { grid-template-columns: repeat(2, 1fr); padding-bottom: 16px; }
      .bottom-bar .wide-mobile { grid-column: span 2; }
      .question-wrap { overflow: visible; }
      .confirm-actions { flex-direction: column; }
      .million-warning { width: min(92vw, 560px); border-radius: 20px; }
    }


    .audio-waiting button:not(.sound-toggle) {
      cursor: wait !important;
      filter: saturate(.72) brightness(.86);
    }

    .audio-waiting.audio-interruptible button:not(.sound-toggle) {
      cursor: pointer !important;
      filter: none;
    }