:root{
      --glass-bg: rgba(0,0,0,.35);
      --glass-border: rgba(255,255,255,.25);
      --text: #fff;
      --muted: rgba(255,255,255,.75);
      --green: #2ecc71;
      --green-dark: #27ae60;
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      overflow: hidden;
      background: #000;
    }

    /* Fullscreen background */
    .bg {
      position: fixed;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.45)),
        url("../img/hero.jpg") center / cover no-repeat;
      transform: scale(1.02); /* helps hide edges on some devices */
    }

    /* Centered modal */
    .modal {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      padding: clamp(16px, 3vw, 32px);
    }

    .card {
      width: min(980px, 100%);
      border-radius: 14px;
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      box-shadow: 0 12px 40px rgba(0,0,0,.45);
      padding: clamp(18px, 3vw, 30px);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .card h1 {
      margin: 0 0 clamp(14px, 2vw, 18px);
      font-weight: 700;
      text-align: center;
      letter-spacing: .2px;
      font-size: clamp(22px, 3.2vw, 34px);
      line-height: 1.2;
    }

    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(12px, 2vw, 18px);
      align-items: stretch;
      margin-top: 8px;
    }

    .choice {
      display: grid;
      gap: 8px;
      justify-items: center;
    }

    .btn {
      width: 100%;
      max-width: 380px;
      height: clamp(44px, 6vw, 56px);
      border-radius: 10px;
      font-size: clamp(16px, 2vw, 20px);
      font-weight: 700;
      cursor: pointer;
      border: 2px solid var(--green);
      transition: transform .06s ease, filter .15s ease, background .15s ease;
      user-select: none;
    }
    .btn:active { transform: translateY(1px); }

    .btn-yes {
      background: var(--green);
      color: #0b2a16;
      border-color: rgba(255,255,255,.25);
    }
    .btn-yes:hover { filter: brightness(1.05); }

    .btn-no {
      background: rgba(255,255,255,.08);
      color: #fff;
    }
    .btn-no:hover { background: rgba(255,255,255,.12); }

    .subtext {
      text-align: center;
      font-size: clamp(12px, 1.6vw, 14px);
      color: var(--muted);
      margin: 0;
      line-height: 1.25;
    }

    /* Bottom-left “player” overlay */
    .player {
      position: fixed;
      left: 18px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .play {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.2);
    }
    .play::before{
      content:"";
      display:block;
      width:0;height:0;
      border-left: 12px solid #fff;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      margin-left: 2px;
    }
    .time {
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 18px;
    }

    /* Mobile stacking */
    @media (max-width: 640px) {
      .actions { grid-template-columns: 1fr; }
      .btn { max-width: none; }
      .player { left: 12px; bottom: 12px; }
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .btn { transition: none; }
      .btn:active { transform: none; }
    }