/* Hush Little Ghost - the nursery at night: deep plum, pastel pink, a mint glow (the logo), rounded Fredoka letters */
:root{
  --bg:#150f1f; --bg2:#1c1429; --panel:#231a34; --panel2:#2b2040; --line:#3a2c52; --line2:#4d3a6b;
  --ink:#2a1838; --cream:#fff7fc; --text:#efe6f7; --muted:#b9a9cd; --dim:#8c7ba3;
  --pink:#f7b6cf; --pink2:#ff8fbb; --mint:#93f5d6; --mint2:#5fe2bb; --gold:#ffd77e; --red:#ff8a8a;
  --r:18px; --shadow:0 18px 40px rgba(6,3,12,.45);
  --head:"Fredoka","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; --hand:"Patrick Hand","Comic Sans MS",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 40% at 80% -5%,rgba(247,182,207,.16),transparent 70%),radial-gradient(50% 35% at 5% 10%,rgba(147,245,214,.10),transparent 70%),
  radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.55),transparent 60%),radial-gradient(1.2px 1.2px at 68% 14%,rgba(255,255,255,.45),transparent 60%),
  radial-gradient(1.4px 1.4px at 86% 42%,rgba(255,240,250,.4),transparent 60%),radial-gradient(1.2px 1.2px at 32% 64%,rgba(255,255,255,.3),transparent 60%),
  radial-gradient(1.6px 1.6px at 52% 34%,rgba(200,255,240,.35),transparent 60%),linear-gradient(180deg,#1b1428 0%,#150f1f 45%,#120d1a 100%)}
a{color:var(--mint);text-decoration:none}
a:hover{color:#c4fff0;text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);line-height:1.15;color:var(--cream);margin:0 0 .5em}
h1{font-size:clamp(34px,5vw,52px);font-weight:700;margin-top:34px;letter-spacing:.2px}
h1::after{content:"";display:block;width:64px;height:5px;border-radius:5px;margin-top:12px;background:linear-gradient(90deg,var(--pink),var(--mint))}
h2{font-size:clamp(24px,3vw,30px);font-weight:600;margin-top:44px}
h3{font-size:20px;font-weight:600}
p{margin:0 0 1em}
b,strong{color:var(--cream);font-weight:800}
.muted{color:var(--muted)}
.center{text-align:center}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
main.wrap{padding-bottom:60px}
.lead{font-size:clamp(17px,2vw,19px);color:#e6dbf1;max-width:760px}
.eyebrow{font-family:var(--hand);font-size:22px;color:var(--pink);margin-bottom:4px}
kbd{display:inline-block;font:700 13px/1 var(--body);color:var(--ink);background:var(--cream);border-radius:7px;padding:5px 8px;margin:0 2px;box-shadow:0 3px 0 #b9a9cd}
.tooth{font-size:.95em;margin-right:3px}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(21,15,31,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .in{width:min(1180px,100% - 24px);margin:auto;display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:700 21px var(--head);color:var(--cream);white-space:nowrap}
.brand:hover{text-decoration:none;color:#fff}
.brand img{width:36px;height:36px;filter:drop-shadow(0 0 8px rgba(147,245,214,.5))}
.brand i{font-family:var(--hand);font-style:normal;color:var(--pink);font-weight:400;font-size:23px;margin:0 2px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{color:var(--muted);font:600 15px var(--head);padding:8px 12px;border-radius:999px}
.nav a:hover{color:var(--cream);background:var(--panel);text-decoration:none}
.nav a.on{color:var(--ink);background:var(--mint)}
.play{font:700 15px var(--head);color:var(--ink);background:var(--pink);padding:9px 18px;border-radius:999px;box-shadow:0 4px 0 #c97798}
.play:hover{color:var(--ink);text-decoration:none;filter:brightness(1.06)}
.menu{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu span{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--cream);margin:4px 0;transition:.2s}
@media (max-width:980px){
  .menu{display:block}
  .nav{position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:2px;padding:10px 14px 16px;background:rgba(21,15,31,.98);border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{padding:12px 14px;font-size:17px}
  .play{margin-left:auto}
}
@media (max-width:420px){.brand span{font-size:18px}.brand i{font-size:20px}.play{padding:8px 14px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font:700 17px var(--head);padding:13px 24px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn.pink{background:var(--pink);color:var(--ink);box-shadow:0 5px 0 #c97798,0 10px 30px rgba(247,182,207,.25)}
.btn.pink:hover{color:var(--ink);filter:brightness(1.05)}
.btn.ghost{background:rgba(255,255,255,.04);color:var(--cream);border-color:rgba(147,245,214,.55)}
.btn.ghost:hover{color:var(--cream);background:rgba(147,245,214,.1)}
.btn.small{font-size:14px;padding:7px 14px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* hero */
.hero{position:relative;margin:22px 0 0;border-radius:26px;overflow:hidden;box-shadow:var(--shadow),0 0 0 1px var(--line);background:#1a1430}
.hero-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hero-cta{position:absolute;left:3.5%;top:62%;width:44%}
.hero-cta .lead{font-size:clamp(15px,1.5vw,19px);color:#fff;text-shadow:0 2px 10px rgba(10,5,20,.9);margin-bottom:16px}
.live[hidden]{display:none}
.live{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font:700 14px var(--body);color:var(--cream);background:rgba(21,15,31,.7);padding:6px 12px;border-radius:999px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(147,245,214,.7);animation:pulse 2s infinite}
.live-dot.upd{background:var(--gold)}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(147,245,214,0)}100%{box-shadow:0 0 0 0 rgba(147,245,214,0)}}
@media (max-width:860px){
  .hero{border-radius:20px}
  .hero-cta{position:static;width:auto;padding:18px 18px 22px;background:linear-gradient(180deg,#221836,#1a1329)}
  .hero-cta .lead{text-shadow:none;color:#e6dbf1}
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0 10px}
.stats div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.stats b{display:block;font:700 34px/1 var(--head);color:var(--mint);text-shadow:0 0 18px rgba(147,245,214,.35)}
.stats span{color:var(--muted);font-weight:700;font-size:14px}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}

/* steps + hub */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.steps li{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:20px 18px 18px}
.steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pink);color:var(--ink);font:700 20px var(--head);margin-bottom:12px;box-shadow:0 4px 0 #c97798}
.steps b{display:block;font:600 19px var(--head);margin-bottom:6px}
.steps p{color:var(--muted);margin:0;font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hubc{display:flex;flex-direction:column;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;color:var(--muted);transition:transform .15s,border-color .15s,box-shadow .15s}
.hubc:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--mint2);box-shadow:0 10px 30px rgba(95,226,187,.12);color:var(--muted)}
.hubc .hs{font-size:30px;line-height:1;margin-bottom:6px}
.hubc b{font:600 21px var(--head);color:var(--cream)}
@media (max-width:900px){.hub{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.hub{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;margin-top:56px;background:var(--panel);border:1px solid var(--line);border-radius:26px;padding:26px}
.split .art img{border-radius:20px;box-shadow:0 0 0 4px rgba(147,245,214,.18),0 0 40px rgba(147,245,214,.18)}
.split h2{margin-top:0}
.split p{color:#ddd1ea}
@media (max-width:800px){.split{grid-template-columns:1fr;padding:18px}}

/* the update cards (shared Rexwood widget) */
.ups{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.up{position:relative;display:block;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px;color:var(--text)}
.up:hover{text-decoration:none;border-color:var(--pink);color:var(--text)}
.up .flag{position:absolute;top:0;right:18px;transform:translateY(-50%);background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font:600 13px var(--head);padding:3px 12px;border-radius:999px}
.up .flag.new{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.up h3{color:var(--pink);font-size:24px}
.up ul{margin:0;padding-left:20px;color:var(--muted)}
@media (max-width:760px){.ups{grid-template-columns:1fr}}
.updates .upd{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin:18px 0}
.updates .upd-new{border-color:var(--mint2);box-shadow:0 0 30px rgba(95,226,187,.1)}
.upd-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted);font-weight:700;font-size:14px}
.upd-tag{background:var(--mint);color:var(--ink);padding:2px 10px;border-radius:999px;font:600 13px var(--head)}
.upd-ver{background:var(--panel2);border:1px solid var(--line2);padding:2px 10px;border-radius:999px;color:var(--pink)}
.updates h2{margin-top:10px}
.upd-sum{color:#ddd1ea;font-weight:600}
.upd-body h3{color:var(--pink);font-size:18px;margin-top:18px}
.upd-body ul{padding-left:20px}
.upd-body li{margin:4px 0}

/* ghosts */
.finder{position:sticky;top:72px;z-index:20;background:rgba(35,26,52,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:22px;padding:16px 18px;margin:24px 0;box-shadow:var(--shadow)}
.fh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.fh h2{margin:0;font-size:22px}
.fh p{margin:0;color:var(--muted);font-size:14px}
.ok{color:var(--mint)}.no{color:var(--red)}
.fbs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 10px}
.fb{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--head);color:var(--text);background:var(--panel2);border:2px solid var(--line2);border-radius:999px;padding:6px 13px 6px 8px;cursor:pointer;transition:.12s}
.fb:hover{border-color:var(--muted)}
.fb .ci{font-size:17px}
.fb[data-state="found"]{background:rgba(147,245,214,.18);border-color:var(--mint);color:#dcfff4}
.fb[data-state="out"]{background:rgba(255,138,138,.08);border-color:rgba(255,138,138,.6);color:var(--dim);text-decoration:line-through}
.fr{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;color:var(--pink)}
@media (max-width:700px){.finder{position:static}.fb{font-size:14px}}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.gcard{display:flex;gap:14px;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--r);padding:18px;transition:opacity .2s,transform .2s}
.gcard[hidden]{display:none}
.gcard:target{border-color:var(--pink);box-shadow:0 0 0 2px var(--pink)}
.gh{flex:0 0 62px;width:62px;height:70px;filter:drop-shadow(0 0 10px rgba(147,245,214,.25));animation:bob 4s ease-in-out infinite}
.gcard:nth-child(3n) .gh{animation-delay:-1.3s}.gcard:nth-child(3n+1) .gh{animation-delay:-2.6s}
@keyframes bob{50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.gh,.live-dot{animation:none}}
.gb h3{margin:2px 0 6px;font-size:22px}
.trait{color:#e2d7ee;margin-bottom:8px}
.tell{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.tell b{color:var(--pink)}
.clues{display:flex;flex-wrap:wrap;gap:6px}
.clue{display:inline-flex;align-items:center;gap:5px;font:600 13.5px var(--head);color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line2);padding:3px 10px 3px 6px;border-radius:999px}
a.clue:hover{text-decoration:none;border-color:var(--mint);color:var(--cream)}
.clue .ci{font-size:15px}
.none{text-align:center;color:var(--muted);font-weight:700;padding:30px}

/* clues */
.cls{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.cl{display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.cl:target{border-color:var(--mint)}
.cli,.ti{flex:0 0 56px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;background:radial-gradient(circle at 35% 30%,#3c2c58,#241a36);border:2px solid var(--line2);box-shadow:0 0 18px rgba(147,245,214,.12)}
.cl h2{margin:4px 0 6px;font-size:23px}
.cl p{color:#ddd1ea;margin-bottom:8px}
.cl .who{color:var(--muted);font-size:14.5px}
@media (max-width:800px){.cls{grid-template-columns:1fr}}
.note{margin-top:26px;background:rgba(247,182,207,.08);border:1px solid rgba(247,182,207,.35);border-radius:var(--r);padding:16px 20px;color:#f1e3ec}

/* gear */
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.toc a{font:600 15px var(--head);color:var(--cream);background:var(--panel);border:1px solid var(--line2);border-radius:999px;padding:6px 14px}
.toc a:hover{text-decoration:none;border-color:var(--mint)}
.vacs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.vac{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,var(--panel2)),var(--panel));border:1px solid color-mix(in srgb,var(--c) 45%,var(--line));border-radius:var(--r);padding:18px}
.vtop{display:flex;gap:12px;align-items:flex-start}
.vbadge{flex:0 0 48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--c);box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.vtop h3{margin:2px 0 4px}
.vtop p{color:var(--muted);font-size:14.5px;margin:0}
.pr{margin-left:auto;white-space:nowrap;font:600 16px var(--head);color:var(--gold)}
.pr b{color:var(--gold)}
.free{color:var(--mint)!important}
h3 .pr{font-size:15px;margin-left:8px}
.vst{display:grid;gap:6px;margin-top:14px}
.vst div{display:flex;align-items:center;justify-content:space-between;font:600 14px var(--head);color:var(--muted)}
.bars{display:inline-flex;gap:4px}
.bars i{width:26px;height:10px;border-radius:6px;background:rgba(255,255,255,.08)}
.bars i.on{background:var(--c);box-shadow:0 0 8px color-mix(in srgb,var(--c) 60%,transparent)}
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tool{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.tool:target{border-color:var(--mint)}
.tool h3{margin:2px 0 6px;display:flex;flex-wrap:wrap;align-items:baseline}
.tool p{margin:0 0 6px;color:#ddd1ea}
.tool .use{color:var(--muted);font-size:14.5px}
.tool .finds{font-size:14px;color:var(--muted);margin-top:8px}
@media (max-width:800px){.tools{grid-template-columns:1fr}}
.ticks{list-style:none;padding:0;margin:0 0 1em}
.ticks li{position:relative;padding-left:30px;margin:10px 0;color:#e2d7ee}
.ticks li::before{content:"";position:absolute;left:4px;top:7px;width:14px;height:14px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(147,245,214,.5)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
table{width:100%;border-collapse:collapse}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font:600 14px var(--head);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;background:var(--panel2)}
tr:last-child td{border-bottom:0}
.r{text-align:right}
td.r{font:700 18px var(--head);color:var(--gold)}
.keys{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.keys div{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.keys span{color:var(--muted);font-weight:700;margin-left:4px}

/* maps */
.maps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.map{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.mart{position:relative;height:150px;display:grid;place-items:center;background:radial-gradient(14px 14px at 84% 28%,#fff6e0 60%,transparent 65%),radial-gradient(60px 60px at 84% 28%,rgba(255,240,210,.25),transparent 70%),radial-gradient(70% 90% at 50% 100%,var(--atm),transparent 70%),linear-gradient(180deg,var(--fog),#120d1a)}
.mart::after{content:"";position:absolute;inset:0;background:radial-gradient(1.2px 1.2px at 20% 30%,#fff,transparent 60%),radial-gradient(1px 1px at 70% 20%,#fff,transparent 60%),radial-gradient(1.4px 1.4px at 85% 55%,#fff,transparent 60%);opacity:.6}
.mart span{font-size:62px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.size{position:absolute;top:12px;right:12px;font:600 13px var(--head);font-style:normal;padding:3px 12px;border-radius:999px;color:var(--ink)}
.s-small{background:var(--mint)}.s-medium{background:var(--gold)}.s-large{background:var(--pink)}
.mb{padding:18px 20px 20px}
.mb h2{margin:0 0 6px;font-size:24px}
.mb p{color:#ddd1ea}
.facts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.facts li{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:4px 12px;font-size:14px;color:var(--muted)}
@media (max-width:800px){.maps{grid-template-columns:1fr}}

/* 404 + footer */
.lost{text-align:center;padding:60px 0}
.lost .gh.big{width:120px;height:135px;margin:0 auto;--t:#e6eef6}
.lost h1::after{margin-inline:auto}
.lost .lead{margin-inline:auto}
.foot{border-top:1px solid var(--line);background:#120d1a;margin-top:40px}
.fin{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:26px 0;color:#d7cbe6;font-size:15px}
.fin img{width:40px;height:40px}
.fl{display:flex;flex-wrap:wrap;gap:16px;margin-left:auto;font-weight:700}