/* Header: the portal sky (purple night, stars, a soft gold glow) with the Explorer under a big ∞ */
    .hero {
      text-align: center; padding: 26px 16px 20px; margin-bottom: 28px;
      background: radial-gradient(2px 2px at 14% 22%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 82% 18%, #ffd166 50%, transparent 51%),
        radial-gradient(2px 2px at 70% 70%, #5ee6c9 50%, transparent 51%), radial-gradient(2px 2px at 24% 76%, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 92% 52%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 6% 55%, #ffd166 50%, transparent 51%),
        radial-gradient(circle at 50% 58%, #ffd16633 0, transparent 45%), linear-gradient(160deg, #4a2384 0%, #2a1656 55%, #160d33 100%);
      box-shadow: 0 0 0 2px var(--edge-dark), 0 0 0 4px #6b45b8, 0 4px 0 4px var(--edge-dark), 8px 10px 0 4px #00000055;
    }
    .hero svg { width: 72px; color: var(--gold); filter: drop-shadow(0 0 8px #ffd166aa); display: block; margin: 0 auto 10px; }
    .hero img { width: 128px; height: 128px; image-rendering: pixelated; display: block; margin: 0 auto 8px; }
    /* The Explorer walking in the Infinite jacket with the Golden loop trailing to the box's left edge (the picture
       above is the fallback if the script can't run). */
    .hero canvas { display: block; width: calc(100% + 32px); height: 120px; margin: 0 -16px 4px; image-rendering: pixelated; }
    .hero h1 { font-family: var(--display); font-size: 22px; color: var(--gold); letter-spacing: 2px; margin: 0 0 6px; text-shadow: 3px 3px 0 #7a3a1a; }
    .hero p { margin: 0; color: #d8c8f5; }
    .card h2:first-of-type { margin-top: 0; }
    button, input { font: inherit; }
    .btn { border: 0; cursor: pointer; }
    .btn:disabled { opacity: .6; cursor: not-allowed; }
    /* Gold-edged card with the start button */
    .card.gold { box-shadow: 0 0 0 2px var(--edge-dark), 0 0 0 4px var(--gold), 0 4px 0 4px var(--edge-dark), 0 0 28px 4px #ffd16633, 8px 10px 0 4px #00000055; }
    .card.gold h2 { color: var(--gold); }
    .card.gold h2::after { border-color: #ffd16655; }
    .btn.wide { display: block; text-align: center; margin-top: 18px; }
    .hidden { display: none !important; }