/* A new student joins (js/screens/join.js): the quest, getting to know them, their profile card, and their home.
   Daylight colours like the youngest path (any child can join), sized in cqw like css/learn.css. */
.jn,.hm{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;overflow:hidden;font-size:calc(1.3cqw * var(--g-type,1.15))}
.jn{background:linear-gradient(#C6E4F1 0%,#E5EFDB 58%,#F1E2BC 100%);--ink:#1C3127;--soft:#4A6457;--pill-bg:rgba(255,255,255,.8);--pill-ink:#1C3127;--surf:#FFFFFF;--line:rgba(28,49,39,.12);--accent:#F6C445;--accent-ink:#3A2A06;color:var(--ink)}
.jn-top{display:flex;align-items:center;gap:2cqw;padding:1.4cqw 2.4cqw}
.quest{flex:1;list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:0}
.quest li{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4cqw;position:relative;font-size:.72em;font-weight:700;color:var(--soft)}
.quest li::before{content:"";position:absolute;top:1.9cqw;left:-50%;right:50%;height:.4cqw;background:rgba(28,49,39,.15);z-index:0}
.quest li:first-child::before{display:none}
.quest li.done::before,.quest li.on::before{background:#F0B94C}
.quest .stone{position:relative;z-index:1;width:3.8cqw;height:3.8cqw;border-radius:50%;background:#FFFFFFCC;display:grid;place-items:center;box-shadow:0 .35cqw 0 #C9D8C2;transition:transform .3s var(--pop)}
.quest .stone img{width:62%;opacity:.25;filter:grayscale(1);transition:opacity .3s,filter .3s}
.quest li.done .stone img{opacity:1;filter:none}
.quest li.on .stone{transform:scale(1.18);background:#FFF6D8;box-shadow:0 .35cqw 0 #E0B34A,0 0 0 .5cqw rgba(246,196,69,.35)}
.quest li.on .stone img{opacity:.7;filter:none}
.quest li.on{color:var(--ink)}
.jn-main{flex:1;min-height:0;display:grid;grid-template-columns:30cqw minmax(0,1fr);gap:2cqw;padding:0 4cqw 0 2cqw;align-items:center}
.jn-guide{position:relative;display:flex;flex-direction:column;align-items:center;gap:1cqw}
.jn-guide .jb{position:relative;max-width:26cqw;background:#fff;color:#1C3127;font-weight:700;border-radius:2cqw;padding:1.2cqw 1.6cqw;box-shadow:0 .8cqw 2cqw rgba(20,40,30,.15)}
.jn-guide .jb::after{content:"";position:absolute;left:50%;bottom:-1.1cqw;margin-left:-1.2cqw;border:1.2cqw solid transparent;border-top-color:#fff;border-bottom:0}
.jn-card{background:var(--surf);border-radius:2.6cqw;padding:3cqw 3.4cqw;box-shadow:0 1.2cqw 3cqw rgba(20,40,30,.14);max-height:100%;overflow:auto}
.jn-card.in{animation:cardin .4s var(--ez)}
.jn-card h1{font-size:2em;margin:0 0 1.6cqw;line-height:1.15;letter-spacing:-.01em}
.jn-card .eb{color:var(--soft)}
.big-in{width:100%;font-size:1.8em;font-weight:700;padding:1.2cqw 1.6cqw;border-radius:1.6cqw;border:.3cqw solid #C9D8C2;background:#F7FAF4;color:var(--ink);outline:none}
.big-in:focus{border-color:#F0B94C;background:#FFFDF4}
.big-in.sm2{font-size:1.15em;margin-top:1.4cqw}
.chips2{display:flex;flex-wrap:wrap;gap:.8cqw;margin-top:.8cqw}
.chips2 .ch{padding:.9cqw 1.6cqw;border-radius:99px;background:#EEF4EA;border:.25cqw solid transparent;font-weight:700;color:var(--ink);font-size:1em;transition:transform 90ms}
.chips2.big .ch{font-size:1.15em;padding:1.1cqw 2cqw}
.chips2 .ch:active{transform:translateY(.2cqw)}
.chips2 .ch.on{background:#F6C445;border-color:#C8931C}
.grades2 .ch{min-width:9cqw;text-align:center}
.jboards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.jb2{display:flex;flex-direction:column;gap:.4cqw;text-align:left;padding:1.6cqw;border-radius:1.6cqw;background:#F4F8F1;border:.3cqw solid transparent;box-shadow:inset 0 .5cqw 0 var(--bc)}
.jb2 b{font-size:1.2em}
.jb2 span{font-size:.75em;color:var(--soft);line-height:1.3}
.jb2.on{border-color:var(--bc);background:#fff}
.buddies{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.bud{display:flex;flex-direction:column;align-items:center;gap:.4cqw;padding:1cqw;border-radius:2cqw;background:#F4F8F1;border:.35cqw solid transparent}
.bud.on{border-color:#F0B94C;background:#FFFBEA}
.bud b{font-size:1.1em}
.loves{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw}
.love{display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding:1.6cqw;border-radius:1.8cqw;background:#F4F8F1;border:.35cqw solid transparent;font-weight:700;transition:transform .2s var(--pop)}
.love img{width:7cqw}
.love.on{border-color:#F0B94C;background:#FFFBEA;transform:scale(1.04)}
.stars{position:relative;height:30cqw;border-radius:2cqw;background:radial-gradient(circle at 50% 40%,#2A3B6E,#141E3C);overflow:hidden;display:grid;place-items:center}
.star{position:absolute;aspect-ratio:1;animation:starin .25s var(--pop) both}
.star img{width:100%;display:block;filter:drop-shadow(0 0 1cqw rgba(255,220,120,.8))}
.star.pop{animation:starpop .22s ease forwards}
@keyframes starin{from{transform:scale(0) rotate(-40deg)}}
@keyframes starpop{to{transform:scale(1.6);opacity:0}}
.qrow{display:flex;align-items:center;gap:1.4cqw;margin-bottom:1.4cqw}
.qrow h1{margin:0;font-size:1.7em}
.jn .spk{flex:none;width:5cqw;height:5cqw;border-radius:50%;background:#F6C445;color:#3A2A06;display:grid;place-items:center;box-shadow:0 .5cqw 0 #C8931C}
.jn .spk .ic{width:55%;height:55%}
.qopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14cqw,1fr));gap:1.2cqw}
.qopts.pics{grid-template-columns:repeat(3,1fr)}
.qo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;min-height:8cqw;padding:1.2cqw;border-radius:1.6cqw;background:#F4F8F1;border:.3cqw solid #DCE6D6;font-weight:700;font-size:1.05em;box-shadow:0 .5cqw 0 #DCE6D6;transition:transform 90ms}
.qo:active{transform:translateY(.4cqw);box-shadow:0 .1cqw 0 #DCE6D6}
.qo img{width:8cqw}
.qo.right{border-color:#58CC68;background:#E3F7E6}
.qo.soft{border-color:#E0A04F;background:#FDF0DD}
.cfield2{display:flex;flex-wrap:wrap;gap:1cqw;justify-content:center;margin-bottom:1.4cqw}
.cfield2 img{width:6cqw}
.readword{font-size:5em;font-weight:800;letter-spacing:.08em;text-align:center;margin:.4cqw 0 1cqw}
.jn-foot{display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 2.4cqw;border-top:1px solid var(--line)}
.jn-foot .pill .ic{width:1.6cqw;height:1.6cqw}
.jpriv{color:var(--soft)}
.jnext{font-size:1.1em;min-width:14cqw;justify-content:center}
.jnext[disabled]{opacity:.45}
.jprof h1{font-size:2.8em;margin:.2cqw 0 1cqw}
.pchips{display:flex;flex-wrap:wrap;gap:.8cqw;margin-bottom:1.6cqw}
.pchips span{display:inline-flex;align-items:center;gap:.5cqw;padding:.6cqw 1.2cqw;border-radius:99px;background:#EEF4EA;font-weight:700;font-size:.85em}
.pchips .ic{width:1.6cqw;height:1.6cqw}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:2cqw;margin-bottom:1.6cqw}
.plove{display:flex;flex-wrap:wrap;gap:1cqw;margin-top:.5cqw}
.plove span{display:inline-flex;align-items:center;gap:.5cqw;font-weight:700}
.plove img{width:3.4cqw}
.pace{display:block;font-size:1.5em;margin:.3cqw 0}
.pset{background:#F7FAF4;border-radius:1.6cqw;padding:1.4cqw 1.8cqw;margin-bottom:1.8cqw}
.pset p{margin:.4cqw 0 0}
.btn.big{font-size:1.2em;padding:1.2cqw 2.4cqw}

/* ── the student's home ── */
.hm{--ink:#F6F2E8;--soft:#A9BDB2;--pill-bg:#203A31;--pill-ink:#E6EDE8;--surf:#1B3029;--line:rgba(240,185,76,.14);background:radial-gradient(70cqw 45cqw at 85% 105%,rgba(240,185,76,.10),transparent 60%),linear-gradient(#21413A,#152A24);color:var(--ink)}
.hm[data-stage="play"],.hm[data-stage="explore"]{--ink:#1C3127;--soft:#4A6457;--pill-bg:rgba(255,255,255,.8);--pill-ink:#1C3127;--surf:rgba(255,255,255,.88);--line:rgba(28,49,39,.12);background:linear-gradient(#C6E4F1 0%,#E5EFDB 58%,#F1E2BC 100%)}
.hm[data-stage="study"]{background:var(--bg)}
.hm .lp-top{gap:1.6cqw}
.hmx{width:6cqw;height:6cqw;flex:none}
.hi h1{margin:0;font-size:1.9em;line-height:1.05}
.hi .sm{color:var(--soft)}
.hm-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.4cqw;padding:.4cqw 2.4cqw 2cqw;overflow:auto}
.hm-col{display:flex;flex-direction:column;gap:1.4cqw;min-width:0}
.hcont{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.8cqw;text-align:left;padding:2cqw 2.4cqw;border-radius:2.2cqw;background:#F6C445;color:#3A2A06;box-shadow:0 1cqw 0 #C8931C}
.hcont img{width:7cqw}
.hcont b{display:block;font-size:1.5em;line-height:1.15}
.hcont .eb{color:#7A5A12}
.hcont .sm{color:#6A4E10}
.hcont .ic{width:4cqw;height:4cqw}
.hsubs{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(var(--g-target,8) * 1.15cqw + 6cqw),1fr));gap:calc(var(--g-gap,1.4) * .7cqw)}
.hsub{display:flex;flex-direction:column;align-items:flex-start;gap:.4cqw;padding:1.4cqw 1.5cqw;border-radius:1.6cqw;background:var(--surf);border:1px solid var(--line);box-shadow:0 .45cqw 0 rgba(0,0,0,.15);text-align:left;color:var(--ink);min-height:calc(var(--g-target,8) * .9cqw)}
.hsub img{width:4cqw}
.hsub span{font-weight:700;line-height:1.2}
.hsub small{color:var(--soft);font-size:.78em}
.hfeats{display:grid;grid-template-columns:1fr 1fr;gap:1.2cqw}
.hfeat{display:flex;flex-direction:column;align-items:flex-start;gap:.3cqw;padding:1.6cqw;border-radius:1.8cqw;background:var(--surf);border:1px solid var(--line);box-shadow:0 .45cqw 0 rgba(0,0,0,.15);text-align:left;color:var(--ink)}
.hfeat img{width:5cqw;margin-bottom:.4cqw}
.hfeat b{font-size:1.05em}
.hfeat span{font-size:.8em;color:var(--soft)}
.hm .lcard{background:var(--surf);border:1px solid var(--line);border-radius:1.4cqw;padding:1.6cqw}
.face.join{border-style:dashed;border-color:var(--gold)}
.face.join .plus{width:4.2rem;height:4.2rem;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--ink-on-gold);font-size:2.6rem;font-weight:800;line-height:1}
.face.me img{background:#FFF6D8;border-radius:50%}