:root{
  --blue:#0b4f8a;--blue2:#0f76bd;--sky:#e9f7ff;--orange:#f59e0b;--red:#ef4444;
  --green:#22c55e;--green2:#dcfce7;--text:#17324d;--muted:#64748b;--white:#fff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#dff4ff,#fff5df);color:var(--text)}
.phone-shell{max-width:760px;margin:0 auto;padding:14px}
.brand-header{text-align:center;padding:10px 0 4px}
.logo{display:inline-block;background:white;border:3px solid #bce8ff;border-radius:28px;padding:10px 22px;font-size:31px;font-weight:900;color:var(--blue);box-shadow:0 8px 20px rgba(11,79,138,.14)}
.logo span{color:var(--orange)}.logo .plus{color:var(--red)}.sub{font-size:13px;color:var(--muted);margin-top:4px}
.card{background:white;border-radius:28px;padding:22px;margin:12px 0;box-shadow:0 14px 36px rgba(23,50,77,.16);border:1px solid rgba(11,79,138,.08)}
.hide{display:none!important}
.hero-emoji{font-size:58px;text-align:center;animation:float 2.3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
h1{text-align:center;font-size:34px;margin:4px 0;color:var(--blue)}
.lead{text-align:center;color:var(--muted);font-size:17px;margin-top:4px}
label{font-weight:800;display:block;margin:16px 0 7px}
input{width:100%;padding:16px;border:2px solid #d8e8f5;border-radius:18px;font-size:17px;outline:none}
input:focus{border-color:var(--blue2);box-shadow:0 0 0 4px #dff3ff}
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.review-card{border-radius:24px;padding:16px;min-height:230px;border:2px solid transparent}
.time-card{background:#fff7e6;border-color:#fed7aa}.place-card{background:#eaf7ff;border-color:#bae6fd}
.review-card .icon{font-size:42px;text-align:center}.review-card h2{text-align:center;margin:6px 0;font-size:26px;color:var(--blue)}
.review-card p{font-size:15px;line-height:1.35;text-align:center}
.example{background:white;border-radius:14px;padding:9px;margin:8px 0;font-weight:700;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.memory-tip{background:#f8fbff;border:2px dashed #b7d7ef;border-radius:20px;padding:13px;margin:16px 0;text-align:center;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.memory-tip span{color:var(--muted)}.memory-tip b{background:#e9f7ff;color:var(--blue);padding:4px 10px;border-radius:999px}
button{width:100%;border:0;border-radius:18px;padding:16px 18px;font-size:18px;font-weight:900;cursor:pointer;margin-top:12px}
.primary{background:linear-gradient(180deg,var(--green),#16a34a);color:white;box-shadow:0 6px 0 #15803d}
.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #15803d}
.secondary{background:white;color:var(--blue);border:2px solid var(--blue)}
.bounce{animation:pulse 1.6s infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.quiz-top{display:flex;justify-content:space-between;align-items:center;color:var(--blue);font-weight:900}
#pill{background:#dcfce7;color:#15803d;padding:6px 12px;border-radius:999px}
.progress{height:14px;background:#e5eef6;border-radius:999px;overflow:hidden;margin:12px 0 20px}
#bar{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--blue2));transition:.35s}
.mascot{text-align:center;font-size:42px;margin:2px 0}
#qtext{font-size:24px;line-height:1.32;text-align:center;margin:8px 0 18px}
.choice{background:#f8fbff;color:var(--text);border:2px solid #dbeafe;text-align:left;box-shadow:0 5px 0 #cbd5e1}
.choice:hover{border-color:var(--blue2);background:#eef8ff}
.choice.correct{background:var(--green2);border-color:var(--green);box-shadow:0 5px 0 #86efac}
.choice.wrong{background:#fee2e2;border-color:var(--red);box-shadow:0 5px 0 #fecaca}
.choice:disabled{cursor:default}
.feedback{border-radius:18px;padding:14px;margin-top:14px;font-weight:900;text-align:center}
.feedback.good{background:var(--green2);color:#166534}.feedback.bad{background:#fee2e2;color:#991b1b}
.result-circle{width:110px;height:110px;border-radius:50%;background:#e9f7ff;border:7px solid var(--green);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:var(--blue);margin:0 auto 10px}
.confetti{text-align:center;font-size:32px;margin-bottom:10px;animation:pop .8s ease infinite alternate}@keyframes pop{from{transform:scale(.96)}to{transform:scale(1.04)}}
#resultMsg{text-align:center;font-size:17px;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.stats div{background:#f8fbff;border-radius:20px;text-align:center;padding:14px}
.stats b{display:block;font-size:24px;color:var(--blue)}.stats span{font-size:13px;color:var(--muted)}
.review-item{padding:12px;border-radius:16px;background:#f8fbff;border-left:6px solid #dbeafe;margin:10px 0;font-size:14px}
.review-item.missed{background:#fff7f7;border-left-color:var(--red)}
footer{text-align:center;font-size:13px;color:var(--muted);padding:18px 0}
@media(max-width:620px){
  .phone-shell{padding:10px}.card{padding:18px;border-radius:24px}.review-grid{grid-template-columns:1fr}
  h1{font-size:30px}.logo{font-size:26px}.stats{grid-template-columns:1fr}#qtext{font-size:22px}
}
@media print{
  body{background:white}.brand-header,#start,#quiz,button,footer,.confetti{display:none!important}
  .card{box-shadow:none;border:0}.review-item{break-inside:avoid}
}