/* Kid-friendly responsive Sinhala UI */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Baloo+2:wght@600;700&display=swap');

:root{
  --bg1:#FFF7E6; --bg2:#E6F7FF;
  --card:#ffffff; --primary:#FF6B35; --primary2:#FF9F1C;
  --green:#2EC4B6; --blue:#4361EE; --purple:#7209B7;
  --text:#2b2d42; --muted:#6c757d; --danger:#e63946; --ok:#2a9d8f;
  --radius:20px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Noto Sans Sinhala','Baloo 2',system-ui,sans-serif;
  color:var(--text);
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh; overflow-x:hidden;
}
/* Floating pencil/books background */
.float-bg{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.float-bg span{
  position:absolute; bottom:-12vh; opacity:.55;
  font-size:clamp(22px,4vw,42px);
  animation:floatUp linear infinite;
  filter:saturate(1.2);
}
.float-bg span:nth-child(1){left:5%; animation-duration:14s; animation-delay:0s}
.float-bg span:nth-child(2){left:15%; animation-duration:18s; animation-delay:-4s; font-size:clamp(18px,3vw,30px)}
.float-bg span:nth-child(3){left:28%; animation-duration:12s; animation-delay:-8s}
.float-bg span:nth-child(4){left:42%; animation-duration:20s; animation-delay:-2s; font-size:clamp(18px,3vw,28px)}
.float-bg span:nth-child(5){left:55%; animation-duration:15s; animation-delay:-6s}
.float-bg span:nth-child(6){left:68%; animation-duration:17s; animation-delay:-3s; font-size:clamp(18px,3vw,30px)}
.float-bg span:nth-child(7){left:80%; animation-duration:13s; animation-delay:-9s}
.float-bg span:nth-child(8){left:90%; animation-duration:19s; animation-delay:-5s; font-size:clamp(18px,3vw,28px)}
.float-bg span:nth-child(9){left:35%; animation-duration:22s; animation-delay:-11s; font-size:clamp(16px,2.5vw,24px)}
.float-bg span:nth-child(10){left:75%; animation-duration:16s; animation-delay:-7s; font-size:clamp(16px,2.5vw,24px)}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(-10deg)}
  50%{transform:translateY(-55vh) rotate(10deg)}
  100%{transform:translateY(-115vh) rotate(-10deg)}
}
.top-bar,.container{position:relative; z-index:1}
@media (prefers-reduced-motion:reduce){
  .float-bg span{animation:none; display:none}
}
.top-bar{
  background: linear-gradient(90deg,#FF6B35,#FF9F1C,#FFD166);
  color:#fff; text-align:center; padding:18px 12px 26px;
  border-radius:0 0 32px 32px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  position:relative; overflow:hidden;
}
.top-bar::after{
  content:"⭐ 🎈 📚 ✏️ 🎉 ⭐ 🎈 📚"; display:block; font-size:20px; margin-top:8px;
}
.top-bar h1{margin:0; font-size:1.5rem; line-height:1.4}
.top-sub{font-size:.72em; font-weight:500; opacity:.95}
.top-bar p{margin:6px 0 0; font-size:.95rem; opacity:.95}
.container{max-width:720px; margin:-10px auto 40px; padding:0 14px}
.intro{
  background:#fff; border-radius:var(--radius);
  border-top:6px solid var(--green);
  border-left:6px solid transparent;
  padding:20px 22px; margin:14px 0;
  box-shadow:0 8px 24px rgba(46,196,182,.12);
  font-size:clamp(.95rem,.9rem + 1vw,1.08rem); line-height:1.9;
}
.intro p{margin:10px 0}
.intro-q,.intro-hl,.intro-end{text-align:center; text-wrap:balance}
.intro-body{text-align:justify; text-justify:inter-word; hyphens:auto}
.intro-q{font-weight:700; font-size:clamp(1.05rem,1rem + 1.5vw,1.35rem); color:var(--blue)}
.intro-hl{font-weight:700; color:#b45309; background:#FFFBEB; border-radius:10px; padding:10px 12px}
.intro-end{color:var(--muted); font-weight:600}
@media(max-width:480px){
  .intro{padding:16px 14px; line-height:1.8}
  .intro-body{text-align:center}
}
.card{
  background:var(--card); border-radius:var(--radius);
  padding:22px 18px; box-shadow:0 8px 30px rgba(67,97,238,.12);
  border:4px solid #FFE8C2;
}
.card h2{margin:0 0 6px; color:var(--blue); text-align:center}
.sub{text-align:center; color:var(--muted); margin:0 0 18px; font-size:.92rem}
.alert{border-radius:14px; padding:12px 14px; margin-bottom:14px; font-size:.95rem}
.alert-error{background:#FEE2E2; color:#991B1B; border:2px solid #FCA5A5}
.alert-success{background:#DCFCE7; color:#166534; border:2px solid #86EFAC}
.alert-warning{background:#FEF3C7; color:#92400E; border:2px solid #FCD34D}
.alert ul{margin:6px 0 0 18px; padding:0}
label{display:block; font-weight:700; margin:14px 0 6px}
label .req{color:var(--danger)}
label .opt{color:var(--muted); font-weight:400; font-size:.85em}
input[type=text],input[type=number],input[type=tel],input[type=email],select,textarea{
  width:100%; padding:14px 14px; font-size:1rem; font-family:inherit;
  border:3px solid #E9ECEF; border-radius:14px; background:#FFFDF7; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--green); background:#fff; box-shadow:0 0 0 4px rgba(46,196,182,.15)}
textarea{min-height:90px; resize:vertical}
.row2{display:grid; grid-template-columns:1fr; gap:0 14px}
.hint{font-size:.82rem; color:var(--muted); margin-top:4px}
.radio-group{display:flex; gap:12px; margin-top:6px}
.radio-card{flex:1; border:3px solid #E9ECEF; border-radius:14px; padding:12px; text-align:center; cursor:pointer; font-weight:700; background:#FFFDF7}
.radio-card input{transform:scale(1.4); margin-right:6px; accent-color:var(--green)}
.captcha-box{background:linear-gradient(135deg,#E0FBFC,#FFF3B0); border:3px dashed var(--blue); border-radius:14px; padding:14px; margin-top:14px; text-align:center}
.captcha-q{font-size:1.6rem; font-weight:700; letter-spacing:1px}
.btn{
  display:block; width:100%; margin-top:20px; padding:16px;
  font-size:1.2rem; font-weight:700; font-family:inherit; color:#fff; border:none; border-radius:16px;
  background:linear-gradient(90deg,var(--primary),var(--primary2)); cursor:pointer;
  box-shadow:0 6px 0 #c44d1f; transition:.15s;
}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 #c44d1f}
.footer{text-align:center; color:var(--muted); font-size:.85rem; margin:18px 0 30px}
.summary{background:#F8FAFF; border:3px solid #DDE7FF; border-radius:14px; padding:14px; margin:14px 0; overflow-x:auto}
.summary h3{margin:0 0 10px; color:var(--blue)}
.summary table{width:100%; border-collapse:collapse; font-size:.92rem}
.summary th,.summary td{padding:9px 10px; border-bottom:1px solid #E5EAFB; text-align:left; vertical-align:top}
.summary th{width:42%; color:#374151; background:#EEF2FF}
.summary tr:last-child th,.summary tr:last-child td{border-bottom:none}
.countdown{color:var(--muted)}
.btn2{padding:12px 22px; border-radius:12px; border:none; font-family:inherit; font-weight:700; cursor:pointer; color:#fff; display:inline-block}
.btn2.blue{background:var(--blue)}
.success-emoji{font-size:64px; text-align:center}
.center{text-align:center}
@media(min-width:600px){
  .top-bar h1{font-size:2rem}
  .card{padding:30px 28px}
  .row2{grid-template-columns:1fr 1fr}
}