:root{
  --night:#241B52;
  --night-2:#312468;
  --royal:#5B3BC4;
  --gold:#FFC64A;
  --gold-deep:#E39B12;
  --mint:#4FD6A8;
  --coral:#FF7C6B;
  --parchment:#FFF7E8;
  --ink:#2A2350;
  --ink-soft:#5B5480;
  --line:rgba(42,35,80,.14);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:12px;
  --shadow:0 14px 0 -6px rgba(36,27,82,.18);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:18px;
  line-height:1.6;
  color:var(--ink);
  background:var(--parchment);
  background-image:radial-gradient(circle at 12% 8%, rgba(91,59,196,.07) 0 34%, transparent 35%),
                   radial-gradient(circle at 88% 22%, rgba(79,214,168,.10) 0 30%, transparent 31%);
  background-attachment:fixed;
}
h1,h2,h3{font-family:'Baloo 2',system-ui,sans-serif;line-height:1.15;margin:0 0 .4em;font-weight:800;letter-spacing:-.01em}
h1{font-size:clamp(2rem,6vw,3.4rem)}
h2{font-size:clamp(1.5rem,4.4vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
button{font:inherit;cursor:pointer}

.skip{position:absolute;left:-999px;top:0;background:var(--night);color:#fff;padding:.7rem 1rem;border-radius:0 0 12px 0;z-index:60}
.skip:focus{left:0}

:focus-visible{outline:4px solid var(--royal);outline-offset:3px;border-radius:6px}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem clamp(.9rem,4vw,2rem);
  background:var(--night);
  color:#fff;
  box-shadow:0 4px 0 rgba(36,27,82,.25);
}
.crest{display:flex;align-items:center;gap:.6rem;background:none;border:0;color:inherit;text-align:left;padding:.2rem;border-radius:14px}
.crest-mark{font-size:2rem;line-height:1}
.crest-words b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.15rem;letter-spacing:-.01em}
.crest-words small{display:block;font-size:.72rem;opacity:.72;line-height:1.2}
.topbar-right{display:flex;align-items:center;gap:.6rem}
.keyring{
  display:flex;align-items:baseline;gap:.35rem;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,198,74,.55);
  padding:.3rem .75rem;border-radius:999px;
}
.keyring-count{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--gold);font-size:1.1rem}
.keyring-word{font-size:.75rem;opacity:.8}
.keyring.pop{animation:pop .45s ease}
@keyframes pop{50%{transform:scale(1.16)}}
.ghost-btn{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4);
  padding:.4rem .9rem;border-radius:999px;font-size:.85rem;font-weight:700;
}
.ghost-btn:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- screens ---------- */
main{max-width:1000px;margin:0 auto;padding:0 clamp(.9rem,4vw,2rem) 4rem}
.screen{display:none}
.screen.is-on{display:block;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1rem,4vw,2.6rem);
  align-items:center;
  margin:clamp(1.2rem,4vw,2.4rem) 0;
}
@media (max-width:760px){.hero{grid-template-columns:1fr}}
.hero-art{
  position:relative;height:280px;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,#2E2266 0%,#4A2F9C 55%,#7B4FC9 100%);
}
.moon{position:absolute;top:26px;right:34px;width:56px;height:56px;border-radius:50%;background:var(--gold);box-shadow:0 0 44px rgba(255,198,74,.55)}
.hero-art::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(2px 2px at 18% 22%,#fff,transparent),
    radial-gradient(2px 2px at 62% 14%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 36% 40%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 82% 46%,#fff,transparent),
    radial-gradient(2px 2px at 8% 52%,#fff,transparent);
  opacity:.8;
}
.castle{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);width:210px;height:130px;z-index:2}
.keep{position:absolute;left:38px;bottom:0;width:134px;height:82px;background:#1E1746;border-radius:8px 8px 0 0}
.tower{position:absolute;bottom:0;width:40px;background:#1E1746;border-radius:6px 6px 0 0}
.t1{left:6px;height:100px}
.t2{left:85px;height:130px;width:44px}
.t3{right:6px;height:100px}
.flag{position:absolute;top:-16px;left:50%;width:22px;height:14px;background:var(--coral);clip-path:polygon(0 0,100% 0,100% 100%,0 72%)}
.gate{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:38px;height:46px;background:var(--gold);border-radius:19px 19px 0 0}
.hill{position:absolute;left:-10%;right:-10%;bottom:-40px;height:120px;background:#38286F;border-radius:50% 50% 0 0}
.hero-kicker{font-family:'Baloo 2',sans-serif;color:var(--royal);font-weight:700;margin-bottom:.2em}
.hero-lede{color:var(--ink-soft);max-width:52ch}

.big-btn{
  background:var(--gold);color:var(--ink);border:0;
  padding:.85rem 1.6rem;border-radius:999px;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;
  box-shadow:0 6px 0 var(--gold-deep);
  transition:transform .12s ease,box-shadow .12s ease;
}
.big-btn:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--gold-deep)}
.big-btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--gold-deep)}
.big-btn.small{font-size:1rem;padding:.7rem 1.3rem}
.big-btn[disabled]{background:#DED6C4;box-shadow:0 6px 0 #C3B9A4;color:#8C846F;cursor:not-allowed}

/* ---------- room map ---------- */
.map-title{margin-top:2.2rem}
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1rem}
.room-tile{
  position:relative;text-align:left;
  background:#fff;border:3px solid var(--line);border-radius:var(--r-md);
  padding:1.1rem 1.1rem 1rem;
  box-shadow:var(--shadow);
  transition:transform .14s ease,border-color .14s ease;
}
.room-tile:hover{transform:translateY(-4px);border-color:var(--royal)}
.room-tile .num{
  font-family:'Baloo 2',sans-serif;font-size:.78rem;font-weight:700;
  color:var(--royal);
}
.room-tile .ico{font-size:2.1rem;display:block;line-height:1;margin-bottom:.4rem}
.room-tile b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.18rem;margin:.1rem 0 .25rem}
.room-tile span.blurb{display:block;font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.room-tile .key{
  position:absolute;top:.8rem;right:.9rem;font-size:1.3rem;
  filter:grayscale(1);opacity:.28;
}
.room-tile.done{border-color:var(--mint);background:#F4FFFA}
.room-tile.done .key{filter:none;opacity:1}

/* ---------- finale ---------- */
.finale{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.6rem;padding:1.2rem 1.3rem;
  background:var(--night);color:#fff;border-radius:var(--r-md);
}
.finale h3{margin:0;color:var(--gold)}
.finale p{margin:0;font-size:.95rem;opacity:.85}
.finale-icon{font-size:2.4rem}
.finale div{flex:1 1 240px}

/* ---------- room screen ---------- */
.back-btn{
  background:#fff;border:3px solid var(--line);color:var(--ink);
  padding:.45rem 1rem;border-radius:999px;font-weight:700;font-size:.9rem;
  margin:1.4rem 0 1rem;
}
.back-btn:hover{border-color:var(--royal)}
.room-card{
  background:#fff;border:3px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.1rem,4vw,2.2rem);box-shadow:var(--shadow);
}
.room-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.8rem}
.room-emoji{font-size:2.8rem;line-height:1}
.room-step{margin:0;font-family:'Baloo 2',sans-serif;color:var(--royal);font-size:.85rem;font-weight:700}
.room-head h2{margin:0}
.room-story{font-size:1.12rem}
.learn-list{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:.6rem}
.learn-list li{
  display:flex;gap:.7rem;align-items:flex-start;
  background:#FBF8FF;border-left:6px solid var(--royal);
  padding:.7rem .9rem;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.learn-list .tick{font-size:1.2rem;line-height:1.3}

/* ---------- activity ---------- */
.activity{
  background:#FFFBF0;border:3px dashed var(--gold-deep);
  border-radius:var(--r-md);padding:clamp(1rem,3vw,1.5rem);
}
.act-q{font-family:'Baloo 2',sans-serif;font-size:1.25rem;font-weight:700;margin:0 0 .2em}
.act-sub{font-size:.95rem;color:var(--ink-soft);margin:0 0 1rem}
.act-progress{font-size:.8rem;font-weight:800;color:var(--gold-deep);letter-spacing:.02em;margin-bottom:.5rem}
.card-prompt{
  background:#fff;border:3px solid var(--line);border-radius:var(--r-sm);
  padding:1rem;font-size:1.05rem;margin-bottom:1rem;
}
.card-prompt .from{display:block;font-size:.8rem;color:var(--ink-soft);font-weight:700;margin-bottom:.3rem}
.choices{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.choice{
  background:#fff;border:3px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1rem;text-align:left;font-weight:700;color:var(--ink);
  transition:border-color .12s ease,transform .12s ease;
}
.choice:hover:not(:disabled){border-color:var(--royal);transform:translateY(-2px)}
.choice:disabled{cursor:default}
.choice.right{border-color:var(--mint);background:#EFFFF8}
.choice.wrong{border-color:var(--coral);background:#FFF1EF}
.feedback{
  margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);
  font-weight:700;display:none;
}
.feedback.show{display:block}
.feedback.good{background:#EAFBF3;border:3px solid var(--mint)}
.feedback.oops{background:#FFF1EF;border:3px solid var(--coral)}
.feedback small{display:block;font-weight:600;margin-top:.2rem;color:var(--ink-soft)}
.act-next{margin-top:1rem}

/* password builder */
.pw-display{
  font-family:'Baloo 2',monospace;font-size:clamp(1.3rem,5vw,2rem);font-weight:800;
  background:#fff;border:3px solid var(--line);border-radius:var(--r-sm);
  padding:1rem;text-align:center;min-height:4.2rem;word-break:break-all;margin-bottom:.8rem;
}
.pw-display .empty{color:#B9B2CE;font-size:1rem;font-weight:600}
.meter{height:20px;border-radius:999px;background:#EEE7DA;overflow:hidden;margin-bottom:.4rem}
.meter i{display:block;height:100%;width:0;background:var(--coral);transition:width .35s ease,background .35s ease;border-radius:999px}
.meter-label{font-family:'Baloo 2',sans-serif;font-weight:800;margin-bottom:1rem}
.pw-groups{display:grid;gap:.8rem;margin-bottom:1rem}
.pw-group b{font-size:.85rem;display:block;margin-bottom:.35rem;color:var(--ink-soft)}
.chip{
  background:#fff;border:3px solid var(--line);border-radius:999px;
  padding:.4rem .9rem;margin:0 .35rem .35rem 0;font-weight:700;font-size:.95rem;
}
.chip:hover{border-color:var(--royal)}
.chip.on{background:var(--royal);border-color:var(--royal);color:#fff}
.pw-tip{font-size:.9rem;color:var(--ink-soft)}

.room-foot{margin-top:1.4rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.room-rule{
  flex:1 1 260px;margin:0;font-family:'Baloo 2',sans-serif;font-weight:700;
  color:var(--royal);font-size:1.05rem;
}

/* ---------- badge ---------- */
.badge-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:760px){.badge-wrap{grid-template-columns:1fr}}
.cert{
  background:#fff;border:10px solid var(--gold);border-radius:var(--r-lg);
  padding:clamp(1.2rem,4vw,2.4rem);text-align:center;box-shadow:var(--shadow);
}
.cert-top{font-family:'Baloo 2',sans-serif;font-weight:800;color:var(--royal);letter-spacing:.04em;margin:0}
.cert-seal{font-size:3.4rem;line-height:1.2}
.cert-line{color:var(--ink-soft);margin:.2em 0}
.cert-name{font-size:clamp(1.8rem,7vw,2.8rem);color:var(--ink);margin:.1em 0 .3em;word-break:break-word}
.cert-rules{list-style:none;padding:0;margin:1.2rem auto 0;max-width:26ch;text-align:left;display:grid;gap:.4rem}
.cert-rules li{background:#FBF8FF;border-radius:var(--r-sm);padding:.45rem .8rem;font-weight:700;font-size:.98rem}
.cert-rules li::before{content:"🔑 ";}
.cert-date{margin-top:1.2rem;font-size:.85rem;color:var(--ink-soft)}
.badge-controls{background:#fff;border:3px solid var(--line);border-radius:var(--r-md);padding:1.2rem;display:grid;gap:.7rem}
.badge-controls label{font-weight:800;font-size:.95rem}
.badge-controls input{
  font:inherit;padding:.7rem .9rem;border:3px solid var(--line);border-radius:var(--r-sm);width:100%;
}
.badge-controls input:focus{border-color:var(--royal);outline:none}
.badge-controls .ghost-btn{color:var(--ink-soft);border-color:var(--line)}
.badge-controls .ghost-btn:hover{color:var(--coral);border-color:var(--coral)}

/* ---------- grown-ups sheet ---------- */
.sheet{position:fixed;inset:0;background:rgba(36,27,82,.6);z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet-inner{
  background:var(--parchment);width:min(700px,100%);max-height:88vh;overflow:auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:1.6rem clamp(1.1rem,4vw,2.2rem) 2.4rem;position:relative;
  animation:up .3s ease both;
}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
.sheet-close{position:absolute;top:1rem;right:1rem;background:#fff;border:3px solid var(--line);border-radius:50%;width:40px;height:40px;font-size:1rem;font-weight:800}
.sheet-inner h3{margin-top:1.4rem;color:var(--royal)}
.sheet-inner ul{padding-left:1.2rem;display:grid;gap:.35rem}
.sheet-credit{margin-top:1.6rem;font-size:.85rem;color:var(--ink-soft);border-top:2px solid var(--line);padding-top:1rem}

.foot{text-align:center;padding:1.6rem 1rem 2.4rem;color:var(--ink-soft);font-size:.85rem}

/* ---------- print ---------- */
@media print{
  .topbar,.foot,.badge-controls,.back-btn,.sheet{display:none!important}
  body{background:#fff}
  .cert{box-shadow:none;border-width:8px}
  .badge-wrap{grid-template-columns:1fr}
}