/* Unique: lightbulb moments. Warm glowing bulbs on deep indigo, soft and bouncy. */
:root {
  --bg: #1b1446; --bg2: #241b5a; --card: rgba(43, 33, 105, 0.88); --card2: #3a2d8a; --line: #5446b0;
  --text: #fff9ec; --muted: #c2b9ef; --accent: #ffd23f; --yellow: #ffd23f; --red: #ff6b6b; --green: #4ce0a0;
  --grad: linear-gradient(135deg, #ffe066, #ff9f43);
  --font-head: 'Fredoka', var(--font-body); --font-body: 'Fredoka', Inter, system-ui, sans-serif; --head-weight: 700;
  --radius: 26px;
}
body { background: radial-gradient(900px 700px at 50% 0%, #3b2a8f, transparent 70%), radial-gradient(700px 500px at 100% 100%, #7a2f7a55, transparent 70%), #1b1446 fixed; }
.btn { border-radius: 999px; color: #3a1f00; box-shadow: 0 6px 0 #c46b12, 0 10px 30px rgba(255, 210, 63, 0.35); font-weight: 700; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #c46b12; }
.btn.ghost { box-shadow: 0 4px 0 #1b1446; }
.card { border-width: 2px; box-shadow: 0 12px 30px rgba(10, 5, 40, 0.4); }
.hero { color: #ffd23f; text-shadow: 0 0 40px rgba(255, 210, 63, 0.7), 0 4px 0 #c46b12; }
.big-code { background: none; color: #ffd23f; -webkit-text-fill-color: #ffd23f; text-shadow: 0 0 30px rgba(255, 210, 63, 0.7); }
.pop { animation: boing 0.7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes boing { 0% { transform: scale(0.2) rotate(-8deg); opacity: 0; } 50% { transform: scale(1.15) rotate(3deg); opacity: 1; } 75% { transform: scale(0.95) rotate(-1deg); } 100% { transform: none; } }
.clue-card { border-radius: 18px; font-family: var(--font-head); font-weight: 700; box-shadow: 0 0 0 3px #ffd23f55, 0 10px 0 rgba(0, 0, 0, 0.25); }
.clue-card:nth-child(odd) { transform: rotate(-2deg); } .clue-card:nth-child(even) { transform: rotate(2deg); }

.scene .bulb { position: absolute; fill: #4a3d99; opacity: 0.5; animation: bob 12s ease-in-out infinite, none; }
.scene .bulb.lit { fill: #ffd23f; opacity: 0.85; filter: drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 40px rgba(255, 180, 40, 0.6)); animation: bob 12s ease-in-out infinite, flick 5s ease-in-out infinite; }
.scene .bulb rect { fill: #8f86c9; }
@keyframes bob { 50% { transform: translateY(-26px) rotate(6deg); } }
@keyframes flick { 0%, 100% { opacity: 0.85; } 46% { opacity: 0.85; } 48% { opacity: 0.25; } 50% { opacity: 0.9; } 52% { opacity: 0.35; } 56% { opacity: 0.85; } }
.scene.small .bulb { opacity: 0.35; }