/* Rodney Classroom
   Layout: child screens are big-tile, whiteboard-first; the staff area is a calm tabbed workspace. */
:root{
  --sky:#7fd0ff; --sky-pale:#e3f4ff; --sea:#0b5fa5; --deep:#0a3a5e; --ink:#12324a; --soft:#4d6a80; --line:#d6e7f3;
  --sun:#ffc93c; --leaf:#2fb54a; --coral:#ff5f7e; --amber:#b7791f; --red:#c0392b; --card:#ffffff; --bg:#eef6fc;
  --display:"Baloo 2","Nunito",system-ui,sans-serif; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --gut:max(16px,env(safe-area-inset-left,0px)); --gutr:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--sea);outline-offset:3px}
img{max-width:100%}
[hidden]{display:none!important}
#app{min-height:100%;display:flex;flex-direction:column}

/* ---------- sky backdrop for child screens ---------- */
.sky{flex:1;display:flex;flex-direction:column;background:radial-gradient(ellipse 34% 14% at 18% 10%,rgba(255,255,255,.85),transparent 70%),radial-gradient(ellipse 26% 11% at 84% 16%,rgba(255,255,255,.75),transparent 70%),linear-gradient(180deg,#8fd6ff 0%,#d4f0ff 62%,#bfe8ff 100%);min-height:100%}
.bar{display:flex;align-items:center;gap:10px;padding:max(12px,env(safe-area-inset-top,0px)) var(--gutr) 10px var(--gut);flex-wrap:wrap}
.bar h1{margin:0;font-family:var(--display);font-size:clamp(22px,3.4vw,34px);line-height:1.1;color:var(--deep);flex:1;min-width:0;text-wrap:balance}
.bar .sub{font-size:14px;color:var(--soft);font-weight:700}
.pillbtn{border:0;border-radius:999px;background:#fff;color:var(--sea);font-weight:800;font-size:16px;padding:10px 16px;min-height:48px;box-shadow:0 4px 0 rgba(10,58,94,.15);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pillbtn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(10,58,94,.15)}
.pillbtn.dark{background:var(--deep);color:#fff}
.pillbtn.go{background:var(--leaf);color:#fff;box-shadow:0 4px 0 #1f8a36}
.trialtag{font-size:13px;font-weight:800;background:#fff4dd;color:var(--amber);border-radius:999px;padding:4px 10px}
/* class rain jar */
:root{--jar-empty:#e9f6ff;--jar-water:#37a7f0;--jar-glass:#8cc8ee;--jar-lid:#ffc93c}
.jar{border:0;background:#fff;border-radius:24px;padding:10px 18px 10px 10px;display:flex;align-items:center;gap:14px;box-shadow:0 6px 0 rgba(10,58,94,.12);max-width:560px;margin:0 auto 6px;width:100%;text-align:left}
.jar.full{background:linear-gradient(160deg,#fff7d6,#ffe9a8)}
.jar-svg{flex:none;line-height:0}
.jar-txt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.jar-h{font-family:var(--display);font-weight:800;font-size:22px;color:var(--deep);line-height:1.1}
.jar-n{font-weight:900;font-size:17px;color:var(--sea);font-variant-numeric:tabular-nums}
.jar-bar{height:10px;border-radius:999px;background:#e3f1fb;overflow:hidden}.jar-bar i{display:block;height:100%;background:linear-gradient(90deg,#37a7f0,#1e88e5);border-radius:999px}
.jar-s{font-size:14px;color:var(--soft);font-weight:700}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:90;background:#1565c0;color:#fff;font-family:var(--display);font-weight:800;font-size:20px;padding:12px 22px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:opacity .3s,transform .3s}
.toast.in{opacity:1;transform:translate(-50%,0)}
.content{flex:1;padding:6px var(--gutr) 28px var(--gut);width:100%;max-width:1500px;margin:0 auto}
.lead{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.2vw,46px);color:var(--deep);text-align:center;margin:6px 0 18px;text-wrap:balance}

/* ---------- register (who's playing) ---------- */
.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.kid{border:0;border-bottom:8px solid var(--kid,transparent);background:#fff;border-radius:var(--r);padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 6px 0 rgba(10,58,94,.12);min-width:0}
.kid:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(10,58,94,.12)}
.av{width:96px;height:96px;border-radius:50%;background:var(--ring,#7fd0ff);padding:6px;flex:none;display:grid;place-items:center}
.av img{width:100%;height:100%;object-fit:contain;border-radius:50%;background:#fff}
.av.sm{width:46px;height:46px;padding:3px}
.kid .nm{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;text-align:center;overflow-wrap:anywhere}
.kid.all{background:linear-gradient(160deg,#fff7d6,#ffe9a8)}
.empty{background:#fff;border-radius:var(--r);padding:26px;text-align:center;max-width:560px;margin:0 auto;box-shadow:0 6px 0 rgba(10,58,94,.1)}
.empty img{width:140px}

/* ---------- activity tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:1200px;margin:0 auto}
.tile{border:0;border-radius:28px;padding:20px 14px;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;box-shadow:0 7px 0 rgba(0,0,0,.18);text-align:center}
.tile:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(0,0,0,.18)}
.tile .em{font-size:66px;line-height:1}
.tile .tt{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.t-games{background:linear-gradient(160deg,#ff8a65,#f4511e)}.t-stories{background:linear-gradient(160deg,#ba68c8,#8e24aa)}.t-explore{background:linear-gradient(160deg,#4db6ac,#00897b)}.t-tv{background:linear-gradient(160deg,#64b5f6,#1e88e5)}.t-rest{background:linear-gradient(160deg,#5c6bc0,#283593)}
.hello{display:flex;align-items:center;gap:14px;justify-content:center;margin:4px 0 20px}
.hello .lead{margin:0}

/* ---------- games grid ---------- */
.games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.games{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.games{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.games{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gcard{border:0;background:#fff;border-radius:24px;padding:12px 10px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 6px 0 rgba(10,58,94,.12);min-width:0}
.gcard:active{transform:translateY(3px)}
.gcard img{width:120px;height:120px;object-fit:contain}
.gcard .tt{font-weight:900;font-size:16px;line-height:1.2;text-align:center;text-wrap:balance}
.gcard .pg{font-size:13px;font-weight:800;color:var(--soft);font-variant-numeric:tabular-nums}

/* ---------- game host ---------- */
.host{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#dff3ff}
.host-bar{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top,0px)) var(--gutr) 8px var(--gut);background:rgba(255,255,255,.75)}
.host-bar .who{display:flex;align-items:center;gap:8px;font-weight:900;margin-left:auto}
.host-root{flex:1;position:relative;display:flex;flex-direction:column;min-height:0;overflow:auto}

/* ---------- stories ---------- */
.books{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;max-width:1100px;margin:0 auto}
.book{border:0;background:#fff;border-radius:22px;padding:10px;box-shadow:0 6px 0 rgba(10,58,94,.12);display:flex;flex-direction:column;gap:8px;text-align:left}
.book img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--sky-pale)}
.book .tt{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.15;padding:0 6px}
.book .mt{font-size:13px;font-weight:800;color:var(--soft);padding:0 6px 4px}
.reader{position:fixed;inset:0;z-index:50;background:#0a2740;display:flex;flex-direction:column;color:#fff}
.reader .rbar{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top,0px)) var(--gutr) 8px var(--gut)}
.reader .rbar .tt{font-family:var(--display);font-weight:800;font-size:20px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader .stage{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 var(--gutr) 0 var(--gut);min-height:0}
.reader .stage img{max-height:100%;max-width:min(100%,1100px);object-fit:contain;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.reader .nav{width:68px;height:68px;border-radius:50%;border:0;background:#fff;color:var(--deep);font-size:30px;font-weight:900;flex:none;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.reader .nav:disabled{opacity:.3}
.reader .txt{padding:12px var(--gutr) max(14px,env(safe-area-inset-bottom,0px)) var(--gut);font-size:clamp(18px,2.2vw,26px);line-height:1.4;text-align:center;max-width:1100px;margin:0 auto;font-weight:700;text-wrap:pretty}
.reader .count{font-size:14px;opacity:.75;font-weight:800;font-variant-numeric:tabular-nums}

/* ---------- TV ---------- */
.row-title{font-family:var(--display);font-weight:800;font-size:22px;margin:18px 0 8px;color:var(--deep)}
.vrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,280px);gap:14px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.vid{border:0;background:#fff;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 5px 0 rgba(10,58,94,.12);text-align:left;display:flex;flex-direction:column}
.vid img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#cfe8f8}
.vid.short img{aspect-ratio:9/12}
.vid .tt{font-weight:900;font-size:15px;line-height:1.25;padding:8px 10px 10px}
.player{position:fixed;inset:0;z-index:60;background:rgba(5,20,35,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:max(10px,env(safe-area-inset-top,0px)) var(--gutr) 16px var(--gut)}
.player .frame{width:min(100%,calc((100vh - 120px)*16/9));aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
.player.short .frame{width:min(100%,calc((100vh - 120px)*9/16));aspect-ratio:9/16}
.player iframe{width:100%;height:100%;border:0}
.player .ptitle{color:#fff;font-weight:900;font-size:18px;text-align:center}

/* ---------- rest ---------- */
.rest-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;max-width:900px;margin:0 auto}
.snd{border:3px solid transparent;background:#fff;border-radius:22px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:900;font-size:18px;box-shadow:0 5px 0 rgba(10,58,94,.12)}
.snd .em{font-size:48px}
.snd[aria-pressed="true"]{border-color:var(--sea);background:var(--sky-pale)}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0}
.chip{border:0;border-radius:999px;background:#fff;padding:10px 18px;font-weight:900;font-size:17px;box-shadow:0 3px 0 rgba(10,58,94,.12);min-height:48px}
.chip[aria-pressed="true"]{background:var(--sea);color:#fff}
.night{position:fixed;inset:0;z-index:70;background:radial-gradient(ellipse 60% 40% at 50% 100%,#1b2d6b,transparent),linear-gradient(180deg,#050b24,#0c1a45 60%,#14275e);color:#cdd8ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px var(--gutr) 24px var(--gut);overflow:hidden}
.night .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.6;animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.85}}
.night img{width:min(40vw,260px);filter:brightness(.92);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.night .big{font-family:var(--display);font-size:clamp(28px,4vw,44px);font-weight:800;color:#e8edff}
.night .tm{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.8}
.night .breath{font-size:20px;font-weight:800;opacity:.85;min-height:30px}
.night .stopbtn{background:rgba(255,255,255,.12);color:#e8edff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 20px;font-weight:800;font-size:16px}
@media (prefers-reduced-motion:reduce){.night .star,.night img{animation:none}}

/* ---------- forms / gate ---------- */
.gate{flex:1;display:flex;align-items:center;justify-content:center;padding:24px var(--gutr) 24px var(--gut)}
.panel{background:#fff;border-radius:26px;padding:26px clamp(18px,4vw,36px);width:min(100%,560px);box-shadow:0 10px 30px rgba(10,58,94,.15)}
.panel .logo{display:block;width:min(300px,80%);margin:0 auto 6px}
.panel h2{font-family:var(--display);font-weight:800;font-size:28px;margin:4px 0 6px;color:var(--deep);text-align:center;text-wrap:balance}
.panel p{margin:6px 0 14px;color:var(--soft);text-align:center}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.field label{font-weight:800;font-size:15px}
.field .hint{font-size:13px;color:var(--soft)}
.inp{border:2px solid var(--line);border-radius:14px;padding:12px 14px;font-size:18px;background:#fff;width:100%;min-width:0}
.inp:focus{border-color:var(--sea);outline:none}
.inp.code{text-transform:uppercase;letter-spacing:.12em;font-weight:900;text-align:center;font-size:24px}
.inp.pin{letter-spacing:.5em;text-align:center;font-size:30px;font-weight:900}
.btn{border:0;border-radius:14px;background:var(--sea);color:#fff;font-weight:900;font-size:18px;padding:14px 18px;width:100%;min-height:52px}
.btn.alt{background:var(--sky-pale);color:var(--sea)}
.btn:disabled{opacity:.6}
.err{color:var(--red);font-weight:800;text-align:center;min-height:1.2em;margin:8px 0 0}
.ok{color:#11804a;font-weight:800}
.seg{display:flex;gap:8px}.seg button{flex:1;border:2px solid var(--line);background:#fff;border-radius:12px;padding:10px;font-weight:800}.seg button[aria-pressed="true"]{border-color:var(--sea);background:var(--sky-pale);color:var(--sea)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:15px}.check input{width:22px;height:22px;margin-top:2px;flex:none}
.small{font-size:13px;color:var(--soft);text-align:center}
.small a,.panel a{color:var(--sea);font-weight:800}

/* ---------- staff area ---------- */
.staff{flex:1;display:flex;flex-direction:column;background:var(--bg)}
.staff-head{background:var(--deep);color:#fff;padding:max(12px,env(safe-area-inset-top,0px)) var(--gutr) 0 var(--gut)}
.staff-head .row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:10px}
.staff-head h1{margin:0;font-family:var(--display);font-size:24px;flex:1;min-width:0}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.tabs button{border:0;background:transparent;color:#bcdcf3;font-weight:800;font-size:15px;padding:12px 14px;border-bottom:3px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--sun)}
.sbody{padding:18px var(--gutr) 40px var(--gut);max-width:1180px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.card h2{margin:0 0 10px;font-family:var(--display);font-size:22px;color:var(--sea)}
.card h3{margin:14px 0 6px;font-size:16px}
.muted{color:var(--soft);font-size:14px}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.li .nm{font-weight:900;font-size:17px;flex:1;min-width:120px}
.sbtn{border:1px solid var(--line);background:#fff;color:var(--sea);border-radius:10px;padding:8px 12px;font-weight:800;font-size:14px;min-height:40px}
.sbtn.pri{background:var(--sea);color:#fff;border-color:var(--sea)}
.sbtn.del{color:var(--red)}
.avpick{display:flex;flex-wrap:wrap;gap:8px}
.avpick button{border:3px solid transparent;border-radius:50%;padding:0;background:none}
.avpick button[aria-pressed="true"]{border-color:var(--sea)}
.avpick .av{width:58px;height:58px;padding:3px}
.colpick{display:flex;flex-wrap:wrap;gap:8px}
.colpick button{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.colpick button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sea)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.grid2.notes{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.scroll{overflow-x:auto}
table.prog{border-collapse:collapse;width:100%;min-width:720px;font-size:14px;font-variant-numeric:tabular-nums}
table.prog th,table.prog td{padding:8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
table.prog th:first-child,table.prog td:first-child{text-align:left;position:sticky;left:0;background:#fff}
table.prog th{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
table.prog thead th img{width:34px;height:34px;object-fit:contain;display:block;margin:0 auto 2px}
.lvl{display:inline-block;min-width:34px;border-radius:999px;padding:2px 6px;font-weight:900;font-size:12px}
.lv0{background:#f2f5f8;color:#9aaab6}.lv1{background:#e3f1fb;color:var(--sea)}.lv2{background:#d6f3e1;color:#11804a}.lv3{background:#fff1c4;color:#8a5a00}
.pcard{display:flex;gap:14px;align-items:flex-start}
.pcard .em{font-size:40px;width:56px;height:56px;border-radius:14px;background:var(--sky-pale);display:grid;place-items:center;flex:none}
.pcard h3{margin:0 0 4px;font-size:17px}
.tag{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:800;color:#fff;margin:0 4px 4px 0}
.note h3{margin:0 0 6px;font-size:18px}
.note dl{margin:8px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:6px 12px;font-size:15px}
.note dt{font-weight:900;color:var(--soft)}
.note dd{margin:0}
.words{display:flex;flex-wrap:wrap;gap:6px}.words span{background:var(--sky-pale);color:var(--sea);border-radius:8px;padding:2px 8px;font-weight:800;font-size:13px}
.areachips{display:flex;flex-wrap:wrap;gap:8px}
.areachips button{border:2px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font-weight:800;font-size:14px}
.areachips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.confirm{background:#fff4f2;border:1px solid #f3c5bd;border-radius:12px;padding:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.syncdot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#9aaab6;margin-right:6px}.syncdot.on{background:var(--leaf)}.syncdot.bad{background:var(--amber)}
@media (max-width:600px){.bar h1{flex-basis:100%;font-size:24px}.bar .backbtn{order:-2}.bar h1{order:-1}.bar .backbtn+h1{order:0}.note dl{grid-template-columns:1fr}.tile{min-height:150px}.tile .em{font-size:54px}.av{width:80px;height:80px}.reader .nav{width:52px;height:52px;font-size:24px}}