@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fredoka:wght@500;600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#071629;
  --bg2:#12314d;
  --card:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.2);
  --text:#e9f2ff;
  --muted:#a9bfd8;
  --accent:#ffc759;
  --ok:#39d39f;
  --bad:#ff7c88;
  --page-bg:radial-gradient(circle at 15% 0%,#1b476f 0%,#0c2238 40%,#071629 100%);
}

body{
  font-family:'Nunito',sans-serif;
  min-height:100vh;
  color:var(--text);
  background:var(--page-bg);
  transition:background .7s ease;
}

body[data-world="prek"] .hdr h1{color:#ffe38a}
body[data-world="k"] .hdr h1{color:#ffc0a8}
body[data-world="g2"] .hdr h1{color:#8de9ff}
body[data-world="g3"] .hdr h1{color:#9cf7d7}
body[data-world="g4"] .hdr h1{color:#ffd0a8}
body[data-world="g5"] .hdr h1{color:#cdd7ff}

body[data-world="prek"] .quest-strip{background:linear-gradient(120deg,rgba(203,255,165,.16),rgba(132,235,211,.14))}
body[data-world="k"] .quest-strip{background:linear-gradient(120deg,rgba(255,180,168,.17),rgba(251,232,145,.13))}
body[data-world="g2"] .quest-strip{background:linear-gradient(120deg,rgba(124,235,252,.17),rgba(130,201,255,.14))}
body[data-world="g3"] .quest-strip{background:linear-gradient(120deg,rgba(132,238,218,.17),rgba(164,209,255,.13))}
body[data-world="g4"] .quest-strip{background:linear-gradient(120deg,rgba(255,186,137,.16),rgba(247,218,167,.13))}
body[data-world="g5"] .quest-strip{background:linear-gradient(120deg,rgba(181,197,255,.18),rgba(185,165,255,.14))}

#app{max-width:760px;margin:0 auto;padding:14px 14px 28px}
.site-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#9be4d0;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.site-link:hover{color:var(--accent)}

.hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.hdr h1{font-family:'Fredoka',sans-serif;font-size:26px;line-height:1.15;color:var(--accent)}
.hdr p{color:var(--muted);font-size:13px;max-width:460px;margin-top:6px;line-height:1.5}
.badge{border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#9be4d0;white-space:nowrap}

.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px}
.illo{width:100%;border-radius:14px;overflow:hidden;margin-bottom:10px;display:block;border:1px solid rgba(255,255,255,.2);box-shadow:0 16px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06)}
.turn-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.story{line-height:1.6;font-size:15px;margin-bottom:12px}
.story-beat{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9ee8d1;margin-bottom:8px}
.story-flow{margin-bottom:12px}
.story-flow p{line-height:1.7;font-size:15px;color:#deecff}
.story-flow p + p{margin-top:10px}
.quest-strip{margin-bottom:10px;border:1px solid rgba(255,255,255,.24);background:linear-gradient(120deg,rgba(255,199,89,.16),rgba(119,207,245,.12));border-radius:11px;padding:9px 10px;font-size:13px;line-height:1.5;color:#f4fbff}
.quest-strip strong{color:#ffe5a6;letter-spacing:.02em}
.question{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:12px;padding:10px 11px;margin-bottom:10px}
.question h3{font-family:'Fredoka',sans-serif;font-size:18px;line-height:1.3;color:#fff}

.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.05);border-radius:10px;padding:10px 10px;font-size:14px;font-weight:700;color:var(--text);cursor:pointer;transition:all .15s}
.choice:hover{background:rgba(255,255,255,.12)}
.choice.ok{background:rgba(57,211,159,.18);border-color:var(--ok)}
.choice.bad{background:rgba(255,124,136,.18);border-color:var(--bad)}

.feedback{margin-top:10px;border-radius:10px;padding:10px 11px;font-size:14px;line-height:1.5}
.feedback.bad{background:rgba(255,124,136,.1);border:1px solid rgba(255,124,136,.35);color:#ffdfe2}
.feedback.ok{background:rgba(57,211,159,.1);border:1px solid rgba(57,211,159,.35);color:#ddfff2}

.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{appearance:none;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:10px;padding:9px 13px;color:var(--text);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{background:rgba(255,255,255,.12)}
.btn.primary{border-color:#f7c96a;background:rgba(247,201,106,.17);color:#fff7df}

.stars{font-size:12px;color:#a6bed9;letter-spacing:2px;margin-top:2px}
.stars .on{color:var(--accent)}
.victory h2{font-family:'Fredoka',sans-serif;color:var(--accent);font-size:28px;margin-bottom:8px}
.victory p{color:var(--muted);line-height:1.6}
.dead-end h2{font-family:'Fredoka',sans-serif;color:#ffd3aa;font-size:28px;line-height:1.15;margin:4px 0 8px}
.dead-end p{color:#d9e8fb;line-height:1.7;font-size:15px}
.dead-end p + p{margin-top:8px}

.pw{display:none;position:fixed;inset:0;background:rgba(5,11,23,.93);z-index:30;align-items:center;justify-content:center;padding:14px}
.pw.show{display:flex}
.pwb{max-width:420px;width:100%;background:#0f223a;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:16px}
.pwb h2{font-family:'Fredoka',sans-serif;color:var(--accent);font-size:24px;margin-bottom:6px}
.pwb p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:8px}
.pwlist{margin:8px 0 12px;padding-left:18px;color:#d2e3f6;font-size:13px;line-height:1.6}
.pwprice{font-family:'Fredoka',sans-serif;font-size:34px;color:var(--accent);line-height:1;margin-top:4px}
.pwsub{font-size:12px;color:var(--muted);margin-bottom:10px}
.pwmsg{font-size:12px;min-height:18px;color:#8de9cc;margin:8px 0}

@media (max-width:640px){
  .hdr{flex-direction:column}
  .choices{grid-template-columns:1fr}
  .hdr h1{font-size:22px}
}