* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background: linear-gradient(135deg,#0f172a,#1e293b);
  color: #f1f5f9;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }

/* Mascot */
.mascot { position:fixed; bottom:90px; right:26px; width:120px; height:140px; z-index:40; pointer-events:none; }
.mascot-body { position:relative; width:100%; height:100%; background:radial-gradient(circle at 60% 35%,#1e293b,#0f172a 70%); border:3px solid #334155; border-radius:32px 32px 42px 42px / 40px 40px 50px 50px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; box-shadow:0 6px 18px -2px #000a,0 0 0 4px #0f172acc; animation:float 4s ease-in-out infinite; }
.mascot-body .eyes { display:flex; gap:18px; }
.mascot-body .eyes span { width:18px; height:18px; background:#f1f5f9; border-radius:50%; position:relative; overflow:hidden; }
.mascot-body .eyes span:after { content:''; position:absolute; width:8px; height:8px; background:#0f172a; border-radius:50%; top:5px; left:5px; animation:blink 6s infinite; }
.mascot-body .mouth { width:42px; height:18px; background:radial-gradient(circle at 50% 30%,#dc2626,#7f1d1d); border-radius:0 0 40px 40px; position:relative; overflow:hidden; }
.mascot-body .mouth:after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 60%,#fecaca22,#0000); mix-blend-mode:screen; }
.mascot-body .badge-pin { position:absolute; top:6px; left:6px; background:#0d9488; padding:4px 6px; font-size:.7rem; border-radius:10px; font-weight:600; box-shadow:0 2px 6px -1px #0008; animation:popIn .4s ease; }
.mascot-shadow { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); width:70%; height:16px; background:radial-gradient(circle at 50% 50%, #00000077, #0000 70%); filter:blur(4px); animation:shadow 4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-10px);} }
@keyframes shadow { 0%,100% { transform:scale(1);} 50% { transform:scale(0.9);} }
@keyframes blink { 0%, 4%, 8%, 12%, 100% { transform:scaleY(1);} 2%,6%,10% { transform:scaleY(.1);} }
@keyframes popIn { from { transform:scale(.5) translateY(-6px); opacity:0;} to { transform:scale(1) translateY(0); opacity:1;} }

/* Confetti */
.confetti-layer { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:50; }
.confetti-piece { position:absolute; width:12px; height:12px; background:var(--c); top:-20px; opacity:0; animation:fall var(--t) linear forwards; border-radius:2px; transform:rotate(45deg); }
@keyframes fall { to { transform:translateY(110vh) rotate(720deg); opacity:1; } }

/* Answer button juice */
.answers button { position:relative; }
.answers button.correct { box-shadow:0 0 0 0 #10b981aa; animation:pulseGreen .9s ease forwards; }
@keyframes pulseGreen { 0% { box-shadow:0 0 0 0 #10b98155;} 70% { box-shadow:0 0 0 14px #10b98100;} 100% { box-shadow:0 0 0 0 #10b98100;} }
.answers button.wrong { animation:shake .55s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-6px);} 40%,60%{transform:translateX(6px);} }

/* Toast layering above mascot */
.badge-toast { z-index:60; }

/* Mascot bubble */
.mascot-bubble { position:absolute; right:120%; bottom:40%; min-width:180px; max-width:260px; background:#1e293bcc; border:2px solid #334155; padding:.6rem .75rem .7rem; border-radius:14px; font-size:.7rem; line-height:1.25; box-shadow:0 4px 16px -4px #000c; opacity:0; transform:translateY(6px) scale(.95); transition:.3s; pointer-events:none; }
.mascot-bubble:after { content:''; position:absolute; right:-10px; bottom:20px; border:8px solid transparent; border-left-color:#334155; }
.mascot-bubble.show { opacity:1; transform:translateY(0) scale(1); }
[hidden] { display: none !important; }
.top-bar { display:flex; justify-content:space-between; align-items:center; padding: .75rem 1.25rem; background:#020617aa; backdrop-filter: blur(6px); position:sticky;top:0;z-index:10; border-bottom:1px solid #334155; }
.right-controls { display:flex; align-items:center; gap:1rem; }
h1 { font-size: clamp(1.2rem,2.5vw,1.8rem); margin:0; }
#hearts { font-size:1.6rem; letter-spacing:3px; }
main { flex:1; display:flex; justify-content:center; align-items:flex-start; padding:2rem 1rem; }
.card {
  width:100%; max-width:720px; background:#0f172acc; border:1px solid #334155; border-radius:20px; padding:1.5rem 1.75rem 2.25rem; backdrop-filter: blur(10px); box-shadow:0 6px 24px -4px #000c;
  display:flex; flex-direction:column; gap:1rem;
}
#question-text { margin:.25rem 0 .75rem; font-size:1.35rem; line-height:1.3; }
.answers { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.answers button { 
  --bg:#1e293b; --bg-hover:#334155; --border:#475569; --correct:#065f46; --wrong:#7f1d1d;
  font:600 1rem/1.1 system-ui,Arial,sans-serif; padding: .95rem 1rem; border-radius:14px; border:2px solid var(--border); cursor:pointer; background:var(--bg); color:#f1f5f9; text-align:left; position:relative; transition:.25s;
}
.answers button:hover:not([disabled]) { background:var(--bg-hover); }
.answers button.correct { background:var(--correct); border-color:#10b981; }
.answers button.wrong { background:var(--wrong); border-color:#dc2626; }
.answers button:disabled { opacity:.7; cursor:not-allowed; }
.progress { font-size:.85rem; letter-spacing:.5px; opacity:.8; }
.status { text-align:center; margin-bottom:1rem; min-height:1.2rem; }
/* Enhanced in-card status */
#question-card .status { margin: .75rem 0 0; background:#1e293b; border:1px solid #334155; padding:.55rem .9rem; border-radius:12px; font-size:.8rem; font-weight:500; letter-spacing:.4px; box-shadow:0 2px 6px -2px #000a; display:inline-block; align-self:flex-start; max-width:100%; animation:fade .4s ease; }
#question-card .status.good { background:#065f46; border-color:#10b981; }
#question-card .status.bad { background:#7f1d1d; border-color:#dc2626; }
.controls { display:flex; gap:.75rem; margin-top:.5rem; }
button.secondary { background:#1e293b; border:1px solid #475569; padding:.65rem 1rem; border-radius:10px; font:500 0.9rem system-ui,Arial; color:#e2e8f0; cursor:pointer; }
button.secondary:hover { background:#334155; }
button.secondary.small { padding:.45rem .75rem; font-size:.75rem; }
button.danger { background:#7f1d1d; border:1px solid #991b1b; }
button.danger:hover { background:#b91c1c; }
footer { text-align:center; padding:1rem; font-size:.7rem; opacity:.65; }

.fade-in { animation: fade .4s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }

@media (prefers-reduced-motion: reduce) {
  .fade-in { animation:none; }
  * { scroll-behavior:auto !important; }
}

/* Overlay / Museum */
.overlay { position:fixed; inset:0; background:#020617dd; display:flex; justify-content:center; align-items:flex-start; padding:4vh 1rem; overflow-y:auto; }
.overlay-content { width:100%; max-width:960px; background:#0f172ae6; border:1px solid #334155; border-radius:26px; padding:1.5rem 1.75rem 2.5rem; box-shadow:0 10px 40px -8px #000c; display:flex; flex-direction:column; gap:1.25rem; animation:pop .35s ease; }
.overlay-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.icon-btn { background:#1e293b; border:1px solid #475569; color:#e2e8f0; width:36px; height:36px; border-radius:50%; font-size:1rem; cursor:pointer; display:grid; place-items:center; }
.icon-btn:hover { background:#334155; }
.intro { font-size:.9rem; opacity:.85; margin:-.25rem 0 .25rem; }
.rooms-list { list-style:none; margin:0; padding:0; display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.room { position:relative; padding:1rem .9rem 1rem 1rem; border:2px solid #475569; border-radius:18px; background:linear-gradient(145deg,#1e293b,#0f172a); display:flex; flex-direction:column; gap:.35rem; min-height:140px; }
.room.locked { filter:grayscale(.8) brightness(.6); }
.room h4 { margin:0; font-size:1rem; }
.room .room-progress { font-size:.7rem; letter-spacing:.5px; opacity:.8; }
.room .room-badge { margin-top:auto; font-size:.75rem; font-weight:600; background:#334155; padding:.3rem .55rem; border-radius:8px; display:inline-block; }
.room.unlocked { border-color:#0d9488; }
.room.unlocked h4 { color:#14b8a6; }
.room.mastered { border-color:#15803d; }
.room.mastered h4 { color:#22c55e; }
.badges-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.badge { --locked:#475569; position:relative; padding:.85rem .75rem .9rem; border:2px solid var(--locked); border-radius:16px; background:#1e293bcc; display:flex; flex-direction:column; gap:.4rem; min-height:120px; }
.badge.locked { opacity:.55; }
.badge.unlocked { border-color:#0d9488; }
.badge.mastered { border-color:#15803d; }
.badge .emoji { font-size:1.75rem; }
.badge h4 { margin:.25rem 0 0; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; }
.badge p { margin:0; font-size:.65rem; line-height:1.2; opacity:.9; }
.overlay-footer { display:flex; justify-content:flex-end; }
@keyframes pop { from { transform:translateY(10px); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* Power Ups */
.powerups-bar { display:flex; gap:.5rem; align-items:center; margin-right:1rem; }
.powerups-bar button { background:#1e293b; border:1px solid #475569; color:#e2e8f0; padding:.4rem .6rem; border-radius:10px; font:500 .65rem/1 system-ui,Arial; display:flex; gap:.35rem; align-items:center; cursor:pointer; position:relative; min-height:40px; }
.powerups-bar button .emoji { font-size:1rem; }
.powerups-bar button .stock { background:#334155; padding:2px 5px; border-radius:6px; font-size:.55rem; font-weight:600; letter-spacing:.5px; }
.powerups-bar button:hover:not(:disabled) { background:#334155; }
.powerups-bar button:disabled { opacity:.5; cursor:not-allowed; }
.powerups-bar button.active-effect { outline:2px solid #0d9488; box-shadow:0 0 0 4px #0d948822; }

.powerups-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.powerups-grid .pup { position:relative; padding:.8rem .75rem .85rem; border:2px solid #475569; border-radius:16px; background:#1e293bcc; display:flex; flex-direction:column; gap:.4rem; min-height:130px; }
.powerups-grid .pup.locked { opacity:.5; filter:grayscale(.6); }
.powerups-grid .pup.unlocked { border-color:#0d9488; }
.powerups-grid .pup .emoji { font-size:1.6rem; }
.powerups-grid .pup h4 { margin:.25rem 0 0; font-size:.8rem; letter-spacing:.5px; }
.powerups-grid .pup p { margin:0; font-size:.6rem; line-height:1.15; opacity:.85; }
.powerups-grid .pup .stock { margin-top:auto; font-size:.55rem; font-weight:600; background:#334155; padding:.25rem .5rem; border-radius:6px; letter-spacing:.5px; }

/* Reveal highlight */
.answers button.revealed { box-shadow:0 0 0 2px #fbbf24,0 0 12px -2px #fbbf24; animation:revealPulse 1.6s ease infinite; }
@keyframes revealPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }