html, body { margin: 0; height: 100%; overflow: hidden; background: #070b1a; font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Segoe UI", sans-serif; }
canvas { display: block; }
.hidden { display: none !important; }
#hud { position: fixed; top: 12px; left: 14px; color: #fff; z-index: 5; pointer-events: none; }
#title { font-size: 22px; font-weight: bold; text-shadow: 0 2px 8px #000; }
#progress { font-size: 16px; color: #ffd75e; text-shadow: 0 2px 6px #000; }
#music-btn { position: fixed; top: 12px; right: 14px; z-index: 6; font-size: 22px; padding: 8px 12px; border-radius: 14px; border: 3px solid #ffd75e; background: #1b2440; color: #fff; cursor: pointer; }
#dock { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; flex-wrap: wrap; justify-content: center; max-width: 96vw; }
.dock-btn { font-family: inherit; font-size: 15px; font-weight: bold; padding: 8px 14px; border-radius: 16px; border: 3px solid #3a4668; background: #1b2440; color: #fff; cursor: pointer; }
.dock-btn.unlocked { border-color: var(--c); box-shadow: 0 0 10px var(--c); }
.dock-btn.current { background: var(--c); color: #101425; }
.dock-btn.locked { opacity: 0.45; cursor: default; }
#card { position: fixed; right: 14px; top: 70px; width: min(360px, 92vw); max-height: calc(100vh - 160px); overflow-y: auto; z-index: 5; background: rgba(16, 22, 44, 0.92); border: 3px solid #ffd75e; border-radius: 20px; padding: 16px; color: #fff; }
#card-name { font-size: 26px; font-weight: bold; }
#card-fact { font-size: 16px; line-height: 1.45; margin: 10px 0; }
#listen-btn, #start-btn, #again-btn { font-family: inherit; font-size: 16px; font-weight: bold; padding: 10px 16px; border-radius: 14px; border: none; background: #ffd75e; color: #101425; cursor: pointer; }
#question { margin-top: 14px; border-top: 2px solid #3a4668; padding-top: 12px; }
#question-text { font-size: 17px; font-weight: bold; color: #ffd75e; margin-bottom: 10px; }
.choice { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 15px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; border: 2px solid #3a4668; background: #232d52; color: #fff; cursor: pointer; }
.choice:hover { border-color: #ffd75e; }
.choice.wrong { border-color: #e05a6e; background: #4a2030; opacity: 0.7; cursor: default; }
.choice.right { border-color: #6fe08a; background: #1e4a2c; }
#feedback { min-height: 24px; margin-top: 8px; font-size: 15px; font-weight: bold; }
#feedback.good { color: #6fe08a; }
#feedback.bad { color: #e05a6e; }
#toast { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 7; background: rgba(16, 22, 44, 0.95); border: 2px solid #ffd75e; color: #fff; padding: 10px 18px; border-radius: 14px; font-size: 16px; font-weight: bold; }
#start-overlay, #win-overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 20, 0.85); }
#start-box, #win-box { background: #141c38; border: 4px solid #ffd75e; border-radius: 24px; padding: 28px 34px; max-width: min(480px, 92vw); text-align: center; color: #fff; }
#start-box h1, #win-box h1 { margin: 0 0 12px; font-size: 30px; }
#start-box p, #win-box p { font-size: 17px; line-height: 1.5; margin: 0 0 18px; }
#start-btn, #again-btn { font-size: 20px; padding: 14px 26px; }