:root{
  --sea-top:#2A8FA3; --sea-mid:#17687A; --sea-deep:#0B4452;
  --sand:#F6DFB2; --sand-soft:#FBF0DA; --coral:#FF6F91; --sun:#FFC933;
  --kelp:#3FAF7A; --foam:#FFFFFF; --ink:#0A3440; --ink-soft:#3D6570;
  --bg:#FBF0DA; --panel:#FFFFFF; --line:#E7D3AC; --bad:#E0506F; --good:#2E9D6A;
  --head:'Comfortaa', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --body:'Didact Gothic', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}
:root{color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:19px;line-height:1.5;min-height:100vh;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.2;margin:0}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.screen{display:none;min-height:100vh}
.screen.on{display:block}
.wrap{max-width:760px;margin:0 auto;padding:24px 20px 48px}

/* buttons */
.btn{border:0;border-radius:999px;padding:14px 28px;font-family:var(--head);font-weight:700;font-size:1.05rem;background:var(--sun);color:#3A2A00;box-shadow:0 4px 0 #C99A12}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #C99A12}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:active{transform:none}
.btn.small{padding:8px 16px;font-size:.9rem}
.linkbtn{background:none;border:0;color:var(--ink-soft);text-decoration:underline;font-size:.9rem;padding:6px}

/* ocean header */
.ocean{background:linear-gradient(180deg,var(--sea-top) 0%,var(--sea-mid) 55%,var(--sea-deep) 100%);color:#fff;position:relative;overflow:hidden}
.ocean .bubbles span{position:absolute;bottom:-20px;border-radius:50%;border:2px solid rgba(255,255,255,.45);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-110vh)}}
.hero{padding:40px 20px 34px;text-align:center;position:relative}
.hero h1{font-size:clamp(2rem,6vw,3rem);letter-spacing:-.01em}
.hero p{margin:10px auto 0;max-width:34ch;opacity:.9}
.wave{display:block;width:100%;height:36px}

/* profiles */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:18px 0}
.pcard{background:var(--panel);border:2px solid var(--line);border-radius:22px;padding:18px 12px;text-align:center;font-family:var(--head);font-weight:700}
.pcard .av{width:58px;height:58px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-size:1.6rem;color:#fff}
/* home screen is exactly one screen tall; with a whole class of children only the name list scrolls */
#profiles.on{display:flex;flex-direction:column;height:100vh;height:100dvh}
#profiles .hero{padding:clamp(14px,4vh,40px) 20px clamp(10px,3vh,34px)}
#profiles .hero h1{font-size:clamp(1.7rem,min(6vw,6vh),3rem)}
#profiles .hero p{margin-top:clamp(4px,1vh,10px);font-size:clamp(.9rem,1.2vh + .5rem,1.1rem)}
#profiles .wrap{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;padding:clamp(8px,2vh,24px) 20px 8px}
#profiles .plist{flex:0 1 auto;min-height:0;overflow-y:auto;margin:clamp(8px,1.5vh,18px) 0;padding:4px 2px;align-content:start}
#profiles .pcard{padding:clamp(8px,1.6vh,18px) 10px}
#profiles .pcard .av{width:clamp(40px,6vh,58px);height:clamp(40px,6vh,58px);font-size:clamp(1.2rem,2.6vh,1.6rem);margin-bottom:4px}
.fullocean{min-height:100vh;min-height:100dvh}
#dipbox .dip{width:940px;margin:0 auto}
.modal{position:fixed;inset:0;display:grid;place-items:center;background:rgba(6,40,49,.78);z-index:30;padding:14px}
.modal[hidden]{display:none}
.modal .mcin{max-width:460px}
.modal input{width:100%;border:2px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;font-family:var(--head);font-weight:700;text-align:center;background:var(--panel);color:var(--ink);margin:10px 0 4px}
@media (max-height:500px){#diploma .note{display:none}#diploma .wrap{padding-top:8px;padding-bottom:8px}}
.gate{margin:clamp(10px,6vh,40px) auto!important}
@media (max-width:620px){#diploma .row{display:grid;grid-template-columns:1fr 1fr;gap:8px}#diploma .row span{display:contents!important}#diploma .row .btn{padding:10px 8px;font-size:.88rem}}
.copy{margin-top:auto;padding:18px 16px 22px;text-align:center;font-size:.85rem;color:var(--ink-soft)}
.addrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.addrow input{flex:1;min-width:180px;border:2px solid var(--line);border-radius:999px;padding:12px 18px;font:inherit;background:var(--panel);color:var(--ink)}

/* dive map */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;position:relative;z-index:2;flex:0 0 auto}
.topbar .who{font-family:var(--head);font-weight:700}
/* the map fills exactly one screen: topbar / route / sea floor */
.mapocean{height:100vh;height:100dvh;display:flex;flex-direction:column}
.dive{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:1200px;margin:0 auto;--nd:72px}
/* js/screens.js layoutMap() puts each .station (a zero-size anchor) at its node's centre and draws the curve */
.rope{position:absolute;inset:0;pointer-events:none}
.rope svg{position:absolute;left:0;top:0;overflow:visible}
.rope .trail{fill:none;stroke:rgba(255,255,255,.13);stroke-width:22;stroke-linecap:round}
.rope .dash{fill:none;stroke:rgba(255,255,255,.6);stroke-width:4;stroke-linecap:round;stroke-dasharray:10 10}
.station{position:absolute;width:0;height:0}
.node{position:absolute;left:calc(var(--nd) / -2);top:calc(var(--nd) / -2);width:var(--nd);height:var(--nd);padding:0;border-radius:50%;border:0;background:var(--sun);color:#3A2A00;font-family:var(--head);font-size:calc(var(--nd) * .42);font-weight:700;box-shadow:0 0 0 calc(var(--nd) * .075) rgba(255,255,255,.18)}
.node.lock{background:rgba(255,255,255,.18);color:rgba(255,255,255,.7);cursor:default}
.node.done{background:var(--kelp);color:#fff}
.sinfo{position:absolute;text-shadow:0 1px 3px rgba(6,40,49,.55);line-height:1.25}
.station.l .sinfo{right:calc(var(--nd) / 2 + 12px);top:50%;transform:translateY(-50%);text-align:right}
.station.r .sinfo{left:calc(var(--nd) / 2 + 12px);top:50%;transform:translateY(-50%)}
.station.t .sinfo{bottom:calc(var(--nd) / 2 + 8px);left:0;transform:translateX(-50%);text-align:center}
.station.b .sinfo{top:calc(var(--nd) / 2 + 8px);left:0;transform:translateX(-50%);text-align:center}
.sinfo h3{font-size:clamp(.8rem,1.1vh + .45rem,1.05rem)}
.stars{color:var(--sun);letter-spacing:1px}
.soon{font-size:clamp(.7rem,.8vh + .45rem,.85rem);opacity:.8;margin-top:2px}
.soon .stars{opacity:1}
.diver{position:absolute;width:150px;height:auto;pointer-events:none;animation:swim 3.2s ease-in-out infinite;filter:drop-shadow(0 6px 10px rgba(0,0,0,.18))}
.station.l .diver{left:calc(var(--nd) / 2 + 10px);top:0;transform:translateY(-55%) scaleX(-1)}
.station.r .diver{right:calc(var(--nd) / 2 + 10px);top:0;transform:translateY(-55%)}
.station.t .diver{top:calc(var(--nd) / 2 + 4px);left:0;transform:translateX(-50%)}
.station.b .diver{bottom:calc(var(--nd) / 2 + 4px);left:0;transform:translateX(-50%)}
@keyframes swim{50%{translate:0 -6px;rotate:-3deg}}
.seafloor{flex:0 0 auto;height:28px;background:var(--sand);border-radius:50% 50% 0 0/100% 100% 0 0;position:relative}
.teacherlink{flex:0 0 auto;text-align:center;padding:2px 16px 6px;background:var(--sand)}
@media (max-height:480px){
  .mapocean .topbar{padding:4px 12px}
  .mapocean .seafloor{height:12px}
  .mapocean .teacherlink{padding:0 0 2px}
  .mapocean .teacherlink .linkbtn{font-size:.78rem;padding:2px}
}
.teacherlink .linkbtn{color:#6B5220}

/* intro */
.card{background:var(--panel);border:2px solid var(--line);border-radius:26px;padding:clamp(14px,2.6vh,24px)}
.card h3{margin-top:clamp(8px,1.8vh,18px)!important;font-size:clamp(.95rem,1.2vh + .55rem,1.17rem)}
.demo{display:flex;gap:clamp(10px,1.8vh,18px);justify-content:center;flex-wrap:wrap;margin:clamp(8px,1.6vh,18px) 0}
.demo figure{margin:0;text-align:center;font-size:clamp(.78rem,.9vh + .45rem,.95rem);line-height:1.25}
.demo .tile{width:clamp(62px,10.5vh,96px);height:clamp(62px,10.5vh,96px);border-radius:20px;background:linear-gradient(180deg,var(--sea-top),var(--sea-deep));display:grid;place-items:center;margin:0 auto 4px;position:relative}
.demo .tile>div{width:72%!important;height:62%!important}
.demo .yes{color:var(--good);font-weight:700}
.demo .no{color:var(--bad);font-weight:700}
.instr{font-size:clamp(1rem,1.5vh + .55rem,1.25rem);margin:clamp(6px,1.2vh,16px) 0}
.speak{border:2px solid var(--line);background:var(--sand-soft);border-radius:999px;padding:6px 14px;font-size:.9rem}
.choices{display:grid;gap:clamp(6px,1vh,10px);margin:clamp(6px,1.2vh,12px) 0}
.choice{display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:var(--panel);border-radius:18px;padding:clamp(8px,1.3vh,12px) 14px}
.choice[aria-pressed="true"]{border-color:var(--kelp);background:var(--sand-soft);box-shadow:inset 0 0 0 1px var(--kelp)}
.choice .ic{font-size:1.5rem;flex:0 0 auto}
/* strategies: three side-by-side tiles; "where else" answers: 2×2 */
#strategies{grid-template-columns:repeat(3,1fr)}
#strategies .choice{flex-direction:column;justify-content:center;text-align:center;gap:2px;font-size:clamp(.78rem,.8vh + .5rem,.95rem);line-height:1.25;padding:8px 6px}
#strategies{grid-template-columns:repeat(3,minmax(0,1fr))}
#strategies .choice .ic{width:clamp(52px,min(13vh,20vw),120px);height:clamp(52px,min(13vh,20vw),120px);max-width:100%}
#strategies .choice .ic img{display:block;width:100%;height:100%;object-fit:contain}
#transfer{grid-template-columns:repeat(2,1fr)}
#transfer .choice{justify-content:center;text-align:center;font-size:clamp(.8rem,.8vh + .5rem,.95rem);line-height:1.25;padding:8px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:clamp(10px,1.8vh,20px)}
/* screens never need vertical scrolling: see fitScreen() in js/core.js */
.screen{min-height:100vh;min-height:100dvh}
.wrap.fit{padding:clamp(10px,2.4vh,24px) 16px clamp(10px,2vh,24px)}

/* play */
#play{background:var(--sea-deep);color:#fff;position:fixed;inset:0;min-height:0}
#play.on{display:flex;flex-direction:column}
.hud{display:flex;align-items:center;gap:14px;padding:12px 16px}
.oxy{flex:1;height:18px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.oxy i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7FE3F0,#FFFFFF);border-radius:999px;transition:width .3s}
.hud .pts{font-family:var(--head);font-weight:700;min-width:64px;text-align:right}
.hud button{border:0;background:rgba(255,255,255,.15);color:#fff;border-radius:999px;width:46px;height:46px;font-size:1.2rem}
.arena{flex:1;position:relative;margin:0 12px 12px;border-radius:26px;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,#3AA6B8 0%,#17687A 45%,#0B4452 100%);touch-action:manipulation}
/* tablets: no text selection, magnifier or long-press menu while playing (Safari needs the -webkit- forms) */
#play,#play *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#play{touch-action:manipulation}
.arena .ray{position:absolute;top:-10%;width:18%;height:120%;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 70%);transform:skewX(-14deg);pointer-events:none}
.sprite{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;animation:popin .18s ease-out}
.sprite svg{display:block;width:100%;height:100%;pointer-events:none}
.sprite.bob{animation:popin .18s ease-out,bob 1.6s ease-in-out infinite .18s}
@keyframes popin{from{transform:translate(-50%,-50%) scale(.4);opacity:0}}
@keyframes grow{from{transform:scale(.5);opacity:0}}
@keyframes bob{50%{transform:translate(-50%,-58%)}}
.burst{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-family:var(--head);font-weight:700;font-size:1.4rem;animation:burst .7s ease-out forwards;white-space:nowrap;text-shadow:0 2px 6px rgba(0,0,0,.35)}
@keyframes burst{to{transform:translate(-50%,-140%);opacity:0}}
.ring{position:absolute;transform:translate(-50%,-50%);border-radius:50%;border:4px solid #fff;pointer-events:none;animation:ring .5s ease-out forwards}
@keyframes ring{from{width:20px;height:20px;opacity:1}to{width:150px;height:150px;opacity:0}}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.porthole{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(62vw,58vh,340px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#4FB8C9,#1F7D8F 70%);box-shadow:0 0 0 14px #C9A15B,0 0 0 20px #8C6A2F,inset 0 0 30px rgba(0,0,0,.35);display:grid;place-items:center;overflow:hidden}
.porthole .fishslot{width:62%;height:62%}
/* stage 6 window: without a size the fish drawing collapsed to 0×0 and was invisible */
.win6 .fishslot{width:72%;height:72%}
.win6 .fishslot svg{display:block;width:100%;height:100%}
.bigtap{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);border:0;border-radius:999px;background:var(--sun);color:#3A2A00;font-family:var(--head);font-weight:700;font-size:1.4rem;padding:18px 54px;box-shadow:0 6px 0 #C99A12}
.bigtap:active{transform:translateX(-50%) translateY(4px);box-shadow:0 2px 0 #C99A12}
.hint{position:absolute;left:0;right:0;top:10px;text-align:center;font-family:var(--head);font-weight:700;pointer-events:none;opacity:.9}
.rulebar{position:absolute;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:rgba(6,40,49,.55);border-radius:999px;padding:6px 18px;font-family:var(--head);font-weight:700;white-space:nowrap;pointer-events:none}
.cue{position:relative;display:inline-block;width:64px;height:54px;flex:0 0 auto;vertical-align:middle}
.cueic{display:block;width:100%;height:100%;overflow:hidden}
.cueic svg{display:block;width:100%;height:100%}
.cuex{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);fill:none;stroke-linecap:round;opacity:.9}
@media (max-width:520px){.cue{width:56px;height:48px}.rulebar{gap:10px;padding:6px 14px}}
.cuev{position:absolute;right:-6px;bottom:-4px;width:22px;height:22px;border-radius:50%;background:var(--good);color:#fff;font-size:.8rem;line-height:1;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.countdown{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--head);font-size:6rem;font-weight:700;pointer-events:none}
.pause{position:fixed;inset:0;background:rgba(6,40,49,.9);display:none;place-items:center;z-index:10;text-align:center;color:#fff}
.pause.on{display:grid}

/* result */
.bigstars{font-size:clamp(2.2rem,5.5vh,3.4rem);line-height:1.1;color:var(--sun);text-align:center;letter-spacing:6px;margin:4px 0}
.bigstars .off{color:var(--line)}
.faces{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:clamp(6px,1vh,10px) 0}
.face{border:2px solid var(--line);background:var(--panel);border-radius:20px;padding:clamp(6px,1vh,12px) 14px;min-width:90px;text-align:center;line-height:1.25}
.face .e{font-size:clamp(1.6rem,3.2vh,2.2rem);display:block;line-height:1}
.lvbars{width:1.35em;height:1.05em;display:block;margin:0 auto 4px}
.lvbars rect{fill:var(--line)}
.lvbars rect.on{fill:var(--sea-top)}
.face[aria-pressed="true"] .lvbars rect.on{fill:var(--kelp)}
.face[aria-pressed="true"]{border-color:var(--kelp);background:var(--sand-soft)}
.tip{background:var(--sand-soft);border-radius:18px;padding:clamp(8px,1.4vh,14px) 16px;margin:clamp(8px,1.4vh,14px) 0;line-height:1.35}
.levelup{color:var(--good);font-family:var(--head);font-weight:700;text-align:center;margin:4px 0}

/* teacher */
.gate{max-width:420px;margin:40px auto}
.gate input{width:100%;border:2px solid var(--line);border-radius:14px;padding:12px;font:inherit;background:var(--panel);color:var(--ink);margin:10px 0}
.tbl{overflow-x:auto;margin:12px 0;border:2px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:.85rem;min-width:760px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--sand-soft);font-family:var(--head);font-size:.8rem}
.levels{display:grid;gap:10px;margin:12px 0}
.lvl{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;border:2px solid var(--line);border-radius:14px;padding:10px 14px}
.lvl .ctl{display:flex;align-items:center;gap:8px}
.lvl .ctl button{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);background:var(--panel)}
.note{font-size:.88rem;color:var(--ink-soft)}
.lvl .ctl button:disabled{opacity:.35;cursor:default}
.lvlall{background:var(--sand-soft)}
@media (min-width:700px){
  .levels .lvl{display:grid;grid-template-columns:minmax(0,1fr) auto 128px;gap:14px}
  .levels .lvl .ctl{justify-content:flex-end}
  .lvlall .seg{grid-column:2}
}
.seg{display:inline-flex;flex-wrap:wrap;border:2px solid var(--line);border-radius:999px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:none;padding:7px 12px;font-size:.85rem;font-family:var(--head);font-weight:700;color:var(--ink-soft)}
.seg button+button{border-left:2px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--kelp);color:#fff}
.teacher h2{margin-top:26px}
select{border:2px solid var(--line);border-radius:12px;padding:10px;font:inherit;background:var(--panel);color:var(--ink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 20px;border-radius:999px;display:none;z-index:20;pointer-events:none}
.toast.on{display:block}

@keyframes drift{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))}}
.rulesign{position:absolute;left:50%;top:12px;transform:translateX(-50%);color:#0A3440;border-radius:999px;padding:10px 26px;font-family:var(--head);font-size:1.3rem;white-space:nowrap;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.rulesign.flash{animation:flash .6s 2}
@keyframes flash{50%{transform:translateX(-50%) scale(1.15)}}
.center5{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(34vw,30vh,180px);height:min(34vw,30vh,180px)}
.center5 svg{width:100%;height:100%;display:block}
.sidebtn{position:absolute;bottom:4%;width:min(38vw,190px);height:min(22vh,130px);border:0;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(0,0,0,.2);display:grid;place-items:center}
.sidebtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.sidebtn.l{left:4%}.sidebtn.r{right:4%}
.sidebtn .bi{width:60%;height:70%;display:grid;place-items:center}
.sidebtn .bi svg{width:100%;height:100%}
.sidebtn .dot{display:block;width:64px;height:64px;border-radius:50%}
.banner{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(6,40,49,.72);font-family:var(--head);font-size:2rem;line-height:1.4;pointer-events:none}
.win6{position:absolute;left:50%;top:3%;transform:translateX(-50%);width:min(34vw,22vh,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#4FB8C9,#1F7D8F 70%);box-shadow:0 0 0 8px #C9A15B,0 0 0 12px #8C6A2F;display:grid;place-items:center;overflow:hidden;transition:opacity .4s}
.win6.shake{animation:shake6 .3s}
@keyframes shake6{25%{transform:translateX(calc(-50% - 8px))}75%{transform:translateX(calc(-50% + 8px))}}
.hint6{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:12px;background:rgba(6,40,49,.55);border-radius:22px;padding:10px 12px;pointer-events:none}
.sub6{position:absolute;top:78%;width:min(22vw,120px);aspect-ratio:14/9;transform:translate(-50%,-50%);transition:left .12s ease-out}
.sub6.shake{animation:shake6b .3s}
@keyframes shake6b{25%{transform:translate(calc(-50% - 8px),-50%) rotate(-6deg)}75%{transform:translate(calc(-50% + 8px),-50%) rotate(6deg)}}
.lives6{position:absolute;right:10px;top:10px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px;max-width:min(calc(50% - min(17vw,11vh,75px) - 20px),170px);background:rgba(6,40,49,.55);border-radius:16px;padding:6px 8px;pointer-events:none;z-index:2}
.lives6 span{display:block;width:clamp(16px,min(3vh,5vw),26px);height:clamp(15px,min(2.8vh,4.6vw),24px)}
.lives6 svg{display:block;width:100%;height:100%}
.lives6 .off{opacity:.25;filter:grayscale(1)}
.lives6 .lost{animation:lifelost .5s ease-out}
@keyframes lifelost{0%{transform:scale(1.6)}100%{transform:scale(1)}}
.rock6{position:absolute;width:min(18vw,90px);aspect-ratio:10/8;transform:translate(-50%,-50%);pointer-events:none}
.rock6 svg,.sub6 svg{width:100%;height:100%;display:block}
.ctl6,.cam6{position:absolute;bottom:2%;border:0;border-radius:22px;background:rgba(255,255,255,.9);color:#0A3440;font-size:1.8rem;width:min(20vw,96px);height:min(12vh,76px);box-shadow:0 5px 0 rgba(0,0,0,.2)}
.ctl6.left{left:3%}.ctl6.right{left:calc(6% + min(20vw,96px))}
.cam6{right:3%;background:var(--sun);width:min(26vw,130px)}
.ctl6:active,.cam6:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.2)}

@media (max-width:520px){
  body{font-size:17px}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

.node.special{background:#FFF3B0;font-size:2.2rem}
.chest{width:min(60vw,260px);margin:10px auto 0}
.chest.open{animation:chestpop .6s ease-out}
@keyframes chestpop{40%{transform:scale(1.12) rotate(-3deg)}}
.pearlrow{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:420px;margin:8px auto}
.pearlrow span{width:26px;height:26px;display:block}
.pearlbig{width:clamp(48px,8vh,90px);height:clamp(48px,8vh,90px);margin:0 auto}
.chest{width:min(60vw,260px,32vh)}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{top:110%;transform:rotate(540deg)}}
.mcard{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,40,49,.78);z-index:5;padding:14px}
.mcin{background:var(--panel);color:var(--ink);border-radius:26px;padding:20px 22px;max-width:560px;width:100%;text-align:center;max-height:100%;overflow:auto}
.mcin h2{margin:4px 0}
.mcin .row{margin-top:10px}
.mlist{display:grid;gap:clamp(4px,.8vh,8px);margin:clamp(6px,1.2vh,12px) 0}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:4px 10px;flex-wrap:wrap;border:2px solid var(--line);border-radius:14px;padding:clamp(3px,.7vh,8px) 12px;font-size:clamp(.8rem,.9vh + .45rem,1rem);line-height:1.3}
.mrow .up{color:var(--good);font-weight:700}
.mrow .down{color:var(--ink-soft)}
@media print{
  @page{size:A4 landscape;margin:10mm}
  body{background:#fff}
  .screen{display:none!important}
  #diploma{display:block!important}
  .noprint{display:none!important}
  #diploma .wrap{padding:0;max-width:none}
  .fit{zoom:1!important}
}

#newnote .row{justify-content:center}

/* back to the Learning Fast site (start screen) */
.homebar{position:relative;z-index:2;padding:10px 14px 0;text-align:left}
.backlf{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:.9rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.backlf:hover{background:rgba(255,255,255,.2)}
.backlf:active{transform:translateY(1px)}
#profiles .hero{padding-top:clamp(2px,1.5vh,14px)}