:root {
  --bg1:#4a2a9e; --bg2:#27106f; --pink:#ff3cc7; --cyan:#27e8ff; --text:#f3eaff; --good:#3dff9a; --bad:#ff4d6d;
  --glow-pink: 0 0 6px #fff8, 0 0 14px var(--pink), 0 0 30px var(--pink);
  --glow-cyan: 0 0 6px #fff8, 0 0 14px var(--cyan), 0 0 30px var(--cyan);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; color: var(--text);
  background:
    radial-gradient(1.5px 1.5px at 20% 15%, #fff 50%, transparent), radial-gradient(1px 1px at 70% 25%, #fff 50%, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff 50%, transparent), radial-gradient(1px 1px at 85% 70%, #fff 50%, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 60% 90%, #fff 50%, transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
}
body::after { /* skyline */
  content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, #6a45c8 0 8%, transparent 8% 10%, #6a45c8 10% 18%, transparent 18% 21%, #6a45c8 21% 33%, transparent 33% 35%,
    #6a45c8 35% 44%, transparent 44% 47%, #6a45c8 47% 60%, transparent 60% 62%, #6a45c8 62% 72%, transparent 72% 75%, #6a45c8 75% 100%);
  opacity: .35;
}
main { max-width: 640px; margin: 0 auto; padding: 16px; }
.card {
  background: #3a1d8ccc; border: 3px solid var(--cyan); border-radius: 22px; padding: 20px; margin: 16px 0;
  box-shadow: 0 0 10px var(--cyan), inset 0 0 14px #27e8ff55;
}
h1, h2 { font-family: 'Arial Rounded MT Bold', 'Arial Black', sans-serif; letter-spacing: 3px; text-align: center; margin: 4px 0 12px; text-transform: uppercase; }
h1 { font-size: 2rem; line-height: 1.2; color: #ffd6f4; text-shadow: var(--glow-pink); animation: flicker 5s infinite; }
h2 { color: #d6fbff; text-shadow: var(--glow-cyan); font-size: 1.4rem; }
.bulbs { text-align: center; font-size: 1.6rem; letter-spacing: 6px; }
@keyframes flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .65; } }
input, textarea {
  width: 100%; padding: 12px; font: inherit; color: var(--text); background: #2a1274cc;
  border: 2px solid var(--cyan); border-radius: 12px; margin: 6px 0; box-shadow: 0 0 8px #27e8ff66;
}
input::placeholder, textarea::placeholder { color: #b9a8e6; }
input:focus, textarea:focus { outline: none; box-shadow: var(--glow-cyan); }
button, .btn {
  display: block; width: 100%; padding: 14px; margin: 8px 0; font: inherit; font-weight: bold; font-size: 1.05rem;
  background: transparent; color: #ffe3f7; border: 3px solid var(--pink); border-radius: 14px; cursor: pointer;
  box-shadow: 0 0 10px var(--pink), inset 0 0 10px #ff3cc755; text-shadow: 0 0 8px var(--pink);
  text-align: center; text-decoration: none; transition: transform .1s, background .2s;
}
button:hover, .btn:hover { background: #ff3cc733; }
button:active, .btn:active { transform: scale(.98); }
button.small { width: auto; display: inline-block; padding: 6px 12px; font-size: .9rem; margin: 2px; }
button.danger { border-color: var(--bad); color: #ffd0d8; box-shadow: 0 0 10px var(--bad); text-shadow: 0 0 8px var(--bad); }
button.opt { text-align: left; border-color: var(--cyan); color: var(--text); text-shadow: none; box-shadow: 0 0 8px var(--cyan), inset 0 0 8px #27e8ff44; }
button.opt:disabled { cursor: default; opacity: .55; }
button.opt.right { opacity: 1; border-color: var(--good); background: #3dff9a33; box-shadow: 0 0 16px var(--good); }
button.opt.wrong { opacity: 1; border-color: var(--bad); background: #ff4d6d33; box-shadow: 0 0 16px var(--bad); }
.feedback { margin-top: 12px; padding: 12px; border-radius: 12px; border: 2px dashed var(--cyan); text-align: center; font-weight: bold; }
.feedback.ok { color: var(--good); text-shadow: 0 0 8px var(--good); }
.feedback.no { color: var(--bad); text-shadow: 0 0 8px var(--bad); }
.progress { height: 14px; border: 2px solid var(--pink); border-radius: 10px; background: #2a1274; overflow: hidden; box-shadow: 0 0 10px var(--pink); }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .3s; }
.error { color: var(--bad); font-weight: bold; text-align: center; }
.big { font-family: 'Arial Black', sans-serif; font-size: 3.2rem; text-align: center; color: #ffd6f4; text-shadow: var(--glow-pink); }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 8px 6px; border-bottom: 1px solid #27e8ff66; text-align: left; }
th { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
tr.me { color: var(--pink); font-weight: bold; }
.hidden { display: none; }
.qa { border: 2px solid #ff3cc788; border-radius: 14px; padding: 10px; margin: 10px 0; background: #2a127488; }
.row { display: flex; gap: 6px; align-items: center; }
.row input[type=radio] { width: auto; }
.confetti { position: fixed; top: -20px; width: 10px; height: 16px; animation: fall linear forwards; z-index: 9; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
.date { text-align: center; font-size: 1.2rem; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; margin: -4px 0 8px; color: #d6fbff; text-shadow: var(--glow-cyan); }