/* Happy Friends · Look B skin (streaming premium). Loaded after the site's own CSS; make_skin.py strips the old outlines first. */
:root{
  color-scheme:dark;
  --base:#0B1033; --panel:#1b2463; --panel-2:#232d78; --line:rgba(255,255,255,.1);
  --ink:#ffffff; --ink-soft:#b9c0ee; --cloud:rgba(255,255,255,.1); --sky:#0B1033;
  --gold:#FFC93C; --gold-d:#E89B00;
  --pad:clamp(16px,4vw,56px);
}
html{background:var(--base)}
body{background:radial-gradient(1200px 700px at 85% 110%,rgba(139,108,255,.25),transparent 60%),radial-gradient(900px 600px at 0% 70%,rgba(65,184,255,.18),transparent 60%),var(--base) fixed;color:#fff}
body::before{background:var(--base)}
h1,h2,h3{color:#fff}
a{color:inherit}
.muted,.note small,small{color:var(--ink-soft)}

/* ---------- top bar: dark glass, quiet pills ---------- */
.top{background:rgba(11,16,51,.78);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.pill{background:rgba(255,255,255,.1);color:#fff;border:0;box-shadow:none;font-size:.95rem;padding:7px 14px}
.pill:hover{background:rgba(255,255,255,.18)}
.pill.star{background:rgba(255,201,60,.18);color:#fff}
.player,.gpop,.notes{background:#18205a;border:0;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px var(--line);color:#fff}
.psec{border-top:1px solid var(--line)}
.glist button{background:rgba(255,255,255,.06);color:#fff;border:0}
.glist button[aria-selected="true"]{background:#fff;color:var(--base)}

/* grade picker lives on Games (Science Lab) and Grown-ups only, not the top bar (Jeffrey 2026-11-05) */
.top .mwrap:has(#gradepill){display:none}

/* ---------- buttons ---------- */
.go{border:0;border-radius:16px;color:#1b1440;background:linear-gradient(180deg,#FFE07A,var(--gold));box-shadow:0 5px 0 var(--gold-d),0 16px 30px -12px rgba(255,201,60,.6)}
.go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-d)}
.go.alt{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.back{background:rgba(255,255,255,.12);color:#fff;border:0;box-shadow:none;border-radius:12px}
.tog{border:0;background:var(--mint,#2EE6A6);color:#08311f}
.tog[aria-pressed="false"]{background:rgba(255,255,255,.15);color:#fff}
.tabs button{border:0;background:rgba(255,255,255,.08);color:var(--ink-soft);border-radius:12px;padding:8px 16px}
.tabs button[aria-pressed="true"]{background:#fff;color:var(--base)}

/* ---------- surfaces: dark panels instead of white boxes ---------- */
.card,.note,.modal .box,.xbtn,.mgroup,.appb,.quests,.wow,.dealban,.pal,.scard,.gtile,.wcard,.pfpc,.ccard,.pillar,.castc,.it,.slot,.promise{background-color:var(--panel);color:#fff;box-shadow:inset 0 0 0 1px var(--line),0 18px 40px -22px rgba(0,0,0,.9)}
.modal{background:rgba(5,8,30,.7);backdrop-filter:blur(6px)}
.modal .box{border-radius:28px}
.note{border-radius:16px;color:#e6e9ff}
.promise{border:0;border-radius:18px;color:#b6f5dc}
.sec{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:40px 0 14px}

/* page header (pageHead) */
.ptitle2{margin:28px 0 8px;gap:16px}
.ptitle2 h1{font-size:clamp(2.2rem,5vw,3.6rem);color:#fff;letter-spacing:-.01em}
.ptitle2 + .note{background:none;box-shadow:none;padding:0;font-size:1.1rem;color:var(--ink-soft);margin-bottom:18px}

/* ---------- dock: glass bar with drawn icons ---------- */
.dock{background:rgba(14,20,62,.86);border:0;box-shadow:0 20px 50px -14px rgba(0,0,0,.8),inset 0 0 0 1px var(--line);backdrop-filter:blur(18px) saturate(1.5)}
.dockb{color:var(--ink-soft)}
.dockb small{color:inherit}
.dockb.on{background:rgba(255,255,255,.12);color:#fff}
.dockb.on::after{background:var(--gold)}
.hfi{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- home: billboard ---------- */
#s-home{padding-bottom:40px}
.hb-bill{position:relative;height:min(78vh,720px);min-height:500px;margin:-62px calc(50% - 50vw) 0;overflow:hidden;isolation:isolate}
.hb-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hb-slide.on{opacity:1}
.hb-wash{position:absolute;inset:-40px;background:var(--thumb) center/cover;filter:blur(30px) saturate(1.4);transform:scale(1.1)}
.hb-slide:not(.on) .hb-wash{display:none}
.hb-art{position:absolute;top:0;bottom:0;right:0;width:66%;background:var(--img) var(--pos,center)/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.hb-slide.on .hb-art{animation:hbkb 9s ease-out forwards}
@keyframes hbkb{from{transform:scale(1.08)}to{transform:scale(1)}}
.hb-bill::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,16,51,.92) 0%,rgba(11,16,51,.5) 32%,transparent 58%),linear-gradient(0deg,var(--base) 0%,rgba(11,16,51,0) 28%)}
.hb-copy{position:absolute;z-index:2;left:max(var(--pad),calc(50vw - 590px + 16px));bottom:16%;max-width:520px}
.hb-tag{display:inline-flex;align-items:center;gap:8px;font:800 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.hb-tag i{width:22px;height:3px;background:var(--gold);border-radius:3px}
.hb-copy h2{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.95;margin:12px 0 14px;text-shadow:0 6px 30px rgba(0,0,0,.45)}
.hb-copy p{font-size:clamp(1rem,1.5vw,1.25rem);color:#e6e9ff;max-width:440px;line-height:1.4}
.hb-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.hb-meta span{font-size:.8rem;font-weight:800;padding:5px 11px;border-radius:8px;background:rgba(255,255,255,.14)}
.hb-ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hb-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px 14px 20px;border:0;border-radius:16px;font:800 1.25rem var(--display);color:#1b1440;background:linear-gradient(180deg,#FFE07A,var(--gold));box-shadow:0 6px 0 var(--gold-d),0 18px 40px -10px rgba(255,201,60,.8)}
.hb-btn.ghost{color:#fff;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);backdrop-filter:blur(10px)}
.hb-btn svg{width:24px;height:24px}
.hb-dots{position:absolute;z-index:2;right:max(var(--pad),calc(50vw - 590px + 16px));bottom:18%;display:flex;gap:8px}
.hb-dots button{width:34px;height:5px;border-radius:5px;background:rgba(255,255,255,.3);overflow:hidden;padding:0;border:0}
.hb-dots button.on::before{content:"";display:block;height:100%;background:#fff;animation:hbfill 8s linear forwards}
.hb-bill.paused .hb-dots button.on::before{animation-play-state:paused}
@keyframes hbfill{from{width:0}to{width:100%}}

/* home rows */
.hb-row{margin-top:36px}
.hb-row h2{font-size:clamp(1.3rem,2.2vw,1.75rem);margin-bottom:12px;display:flex;align-items:baseline;gap:12px}
.hb-row h2 small{font-size:.85rem;font-weight:700}
.hb-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 20px;scrollbar-width:none;margin:0 -2px}
.hb-track::-webkit-scrollbar{display:none}
.hb-track>*{scroll-snap-align:start;flex:none}
.hb-tile{position:relative;width:clamp(250px,26vw,360px);aspect-ratio:16/9;border:0;padding:0;border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:0 14px 30px -14px rgba(0,0,0,.7);text-align:left;color:#fff;transition:transform .3s cubic-bezier(.2,1,.3,1),box-shadow .3s}
.hb-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,1,.3,1)}
.hb-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,10,40,.9) 0%,rgba(8,10,40,0) 58%)}
.hb-tile .t{position:absolute;z-index:1;left:16px;right:16px;bottom:13px}
.hb-tile .t b{display:block;font:800 1.35rem/1.05 var(--display);text-shadow:0 3px 12px rgba(0,0,0,.5)}
.hb-tile .t small{display:block;margin-top:5px;font-size:.8rem;font-weight:700;color:#d7dcff}
.hb-tile:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 24px 40px -14px rgba(0,0,0,.8)}
.hb-tile:hover img{transform:scale(1.08)}
.hb-pal{display:flex;flex-direction:column;align-items:center;gap:8px;width:118px;border:0;background:none;color:var(--ink-soft);font:700 .85rem var(--body);text-align:center}
.hb-pal img{width:118px;height:118px;border-radius:26px;object-fit:cover;box-shadow:0 12px 24px -10px rgba(0,0,0,.7);transition:transform .25s cubic-bezier(.2,1.6,.4,1),box-shadow .25s}
.hb-pal b{color:#fff;font:800 1.05rem var(--display)}
.hb-pal:hover img{transform:translateY(-5px) scale(1.04);box-shadow:0 0 0 3px #fff,0 16px 30px -10px rgba(0,0,0,.7)}
.hb-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.hb-two>*{margin-top:0!important}
.hb-surprise{display:flex;justify-content:center;margin-top:26px}

/* the old home pieces, restyled in place */
.quests,.wow{border-radius:24px;padding:20px 22px}
.dealban{border-radius:20px;margin-top:18px}
.dealban em{border:0;background:var(--gold);color:#1b1440}
.dealban img{background:rgba(255,255,255,.1);border:0}
.more{gap:18px}
.mgroup{border-radius:22px;padding:16px}
.mgroup .xbtn,.xbtn{background:rgba(255,255,255,.07);box-shadow:none;border-radius:14px;color:#fff}
.mgroup .xbtn:hover,.xbtn:hover{background:rgba(255,255,255,.14);animation:none}
.wotd .wword{color:var(--gold)}

/* ---------- footer: the organized info, dark ---------- */
.foot{background:#080c28;border-top:1px solid var(--line);margin-top:60px;padding:40px 0 120px}
.foot h4{color:#fff}
.foot .fcol button{background:none;border:0;color:var(--ink-soft);text-align:left;padding:4px 0}
.foot .fcol button:hover{color:#fff}
.foot .fbottom{border-top:1px solid var(--line);color:var(--ink-soft)}
.foot .fbottom b{color:#b6f5dc}

/* place screens sit on a pastel backdrop: dim it so white titles read */
.place .bg{filter:brightness(.32) saturate(1.3)}
.place .fx{opacity:.5}

/* ---------- keep paper white where kids draw, read or stick ---------- */
.paper,.paper canvas,.stage,.reader .stage,.book,.mirror canvas{background:#fff;color:#1c2757}
.stext,.reader .stext{color:#1c2757}

@media (prefers-reduced-motion:reduce){
  .hb-slide,.hb-art,.hb-tile,.hb-tile img,.hb-pal img{animation:none!important;transition:none!important}
  .hb-dots button.on::before{animation:none;width:100%}
  .hb-tile:hover,.hb-tile:hover img,.hb-pal:hover img{transform:none}
}
body.calm .hb-art,body.calm .hb-dots button.on::before{animation:none}
@media (max-width:860px){
  .hb-bill{height:auto;min-height:0;padding-top:min(100vw,430px);margin-top:-62px}
  .hb-art{width:100%;bottom:auto;height:min(112vw,490px);background-image:var(--pimg,var(--img));background-position:var(--ppos,var(--pos,center));-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
  .hb-bill::after{background:linear-gradient(0deg,var(--base) 2%,rgba(11,16,51,.55) 45%,rgba(11,16,51,0) 70%)}
  .hb-copy{position:relative;left:auto;bottom:auto;padding:0 16px 60px;max-width:none}
  .hb-copy h2{font-size:2.8rem}
  .hb-dots{bottom:30px;left:16px;right:auto}
  .hb-two{grid-template-columns:1fr}
  .hb-pal{width:92px}.hb-pal img{width:92px;height:92px;border-radius:22px}
}

/* painted icons in place of emoji */
.hfi-img{width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.4em;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.hfi-wrap{display:inline-flex;margin-right:.35em}
.dockb .hfi-img{width:34px;height:34px;vertical-align:0}
.dockb span .hfi-wrap,.dockb .hfi-wrap{margin:0}
.appb .hfi-img{width:44px;height:44px}
.xbtn .hfi-img{width:36px;height:36px}
.pill .hfi-img{width:24px;height:24px;vertical-align:-.35em}
.pill .hfi-wrap{margin-right:.2em}
.foot .fcol .hfi-img{width:22px;height:22px}

/* ===== supervisor round 1 (2026-11-05) ===== */
/* paper stays paper: reader pages, coloring thumbs, speech bubbles, fridge drawings, posters */
.fbook .leaf,.fbook .leaf.cov img,.pic,.fdraw,.rframe,.rposter{background-color:#fffaf0}
.fbook .leaf,.fbook .leaf .tx{color:#3b2f1e}
.bubble,.smi.bubl,.smtext,.smtitle{background:#fffdf5;color:#1c2757}
.bubble::after{border-top-color:#fffdf5}
.starsky i,.tw::before,.tw::after,.cl,.cl::before,.cl::after{background:#fff}
.ring::before{background:var(--panel)}
figure.sk figcaption{color:#1c2757}

/* dark text wherever text sits on yellow or a bright fill */
#intro .igo,.gpad button,.choices button.num,.wow .num,.it .lock,.thpill,.rplaque,.rplaque small,
.gchips button,.gplay,.rank.lvr,.thnow,.whonow,.qstreak.zero,#sre,.lnow{color:#1b1440}
.gchips button[aria-pressed="true"]{color:#fff}
/* unpicked text-size buttons and friend slots sit on dark panels; the picked one (yellow) already has dark text */
.tsz button:not([aria-pressed="true"]),.slot:not([aria-pressed="true"]){color:#fff}
.ring small{color:var(--ink-soft)}
a.morearcade small{color:#eef1ff;opacity:1}
.leaf .pn{color:#6b5530}
/* big words on light art keep a soft navy edge */
#intro .itag,.about-hero h2,.wcd .wcn{color:#fff;text-shadow:0 2px 0 #1b1440,0 -2px 0 #1b1440,2px 0 0 #1b1440,-2px 0 0 #1b1440,0 4px 12px rgba(0,0,0,.4)}

/* light text where the panel went dark */
.rtag.r-common{color:#cfd6ea}.rtag.r-rare{color:#8cc8ff}.rtag.r-epic{color:#c9b2ff}.rtag.r-legendary{color:#ffd76a}
.clfact .clq{color:var(--ink-soft)}

/* place screens: calm navy frame, not muddy grey */
.place .bg{filter:none;opacity:.14}
/* thin light ring so dark swatches and cells read on navy */
.crayon,.mmcell{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
#findin{background:rgba(255,255,255,.08);color:#fff;border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
#findin::placeholder{color:var(--ink-soft)}
body.calm .hb-slide{transition:none}
.rframe,.rframe *,.rposter,.rposter *{color:#1c2757}
.gtile .gplay,.gtile .ginfo .gplay,button.gplay{color:#1b1440}

/* ===== quick-fix batch (Jeffrey 2026-11-05) ===== */
/* header: the logo is Home; Settings is just the cog */
.top .homebtn{display:none}
#music .lbl{display:none}
#music{padding:6px 10px}
/* Stories: Happy Friends originals shelf off for now (better ones coming) */
h2.sec:has(+ .stories),.stories{display:none}
/* Classroom: no wheel */
h2.sec:has(+ .wheelbox),.wheelbox{display:none}
/* Games: the "Make & explore" tiles just repeat the Explore row */
h2.sec:has(+ .gtiles .gtile[data-go]),.gtiles:has(.gtile[data-go]){display:none}

/* desktop top nav (PREVIEW: only with ?topnav or after turning it on) */
.hf-topnav{display:none}
@media (min-width:980px){
  body.topnav .hf-topnav{display:flex;gap:22px;margin-left:18px;margin-right:auto;font:800 1rem var(--display)}
  body.topnav .hf-topnav button{background:none;border:0;color:var(--ink-soft);padding:6px 0;position:relative;cursor:pointer}
  body.topnav .hf-topnav button:hover,body.topnav .hf-topnav button.on{color:#fff}
  body.topnav .hf-topnav button.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;border-radius:3px;background:var(--gold)}
  body.topnav .hf-topnav .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.08);padding:0}
  body.topnav .hf-topnav .ic img{width:24px;height:24px}
  body.topnav .dock{display:none}
  body.topnav .top .wrap{gap:10px}
  body.topnav #who{order:20}
}

/* Music Maker: rainbow note rows, glowing play line, bigger squares, Oreo his real size */
.mm{background:radial-gradient(120% 90% at 50% 0%,#3b2a8a,#141b52);box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -24px rgba(0,0,0,.9);border-radius:28px;padding:20px}
.mmrow{grid-template-columns:40px repeat(16,minmax(26px,1fr));gap:5px}
.mmcell{border:0;border-radius:9px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .12s,background .15s}
.mmcell.bar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.mmcell:hover{transform:scale(1.08)}
.mmrow:nth-child(1) .mmcell.on{--mc:#41B8FF}.mmrow:nth-child(2) .mmcell.on{--mc:#8B6CFF}.mmrow:nth-child(3) .mmcell.on{--mc:#FF5FA2}
.mmrow:nth-child(4) .mmcell.on{--mc:#FF9A3C}.mmrow:nth-child(5) .mmcell.on{--mc:#FFC93C}.mmrow:nth-child(6) .mmcell.on{--mc:#2EE6A6}
.mmrow:nth-child(7) .mmcell.on{--mc:#5FE0FF}.mmrow:nth-child(8) .mmcell.on{--mc:#FF6B8B}
.mmcell.on,.mmrow.drum .mmcell.on{background:var(--mc);box-shadow:0 0 14px -2px var(--mc),inset 0 2px 0 rgba(255,255,255,.45)}
.mmcell.now{background:rgba(143,211,255,.22);outline:0;box-shadow:inset 0 0 0 2px rgba(143,211,255,.7)}
.mmcell.on.now{transform:scale(1.18);filter:brightness(1.25)}
.mmband{min-height:110px;gap:clamp(4px,2vw,18px)}
.mmband img,.mmband canvas{height:clamp(70px,11vw,118px)}
.mmband img[src*="oreo"],.singcast img[alt="Oreo"]{height:clamp(44px,7vw,76px)}
/* Sing-along logo */
.singcast{width:100%;justify-content:center;min-height:0}
.singcast .singlogo{display:block;margin:0 auto;height:clamp(190px,30vw,340px);width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.sing.live .singcast .singlogo{animation:dance .508s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.sing.live .singcast .singlogo{animation:none}}
body.calm .sing.live .singcast .singlogo{animation:none}
/* Wallpapers: bigger, sharper cards (thumbs are 360x640 now) */
.walls{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.wcard{border-radius:20px;transition:transform .25s cubic-bezier(.2,1,.3,1),box-shadow .25s}
.wcard:hover{transform:translateY(-6px);box-shadow:0 0 0 3px rgba(255,255,255,.9),0 22px 36px -14px rgba(0,0,0,.8)}
@media (max-width:520px){.walls{grid-template-columns:repeat(2,1fr);gap:12px}}
/* Sing-along: logo never pushes the buttons off screen */
.singcast .singlogo{height:clamp(150px,26vh,300px)}
/* phones: the logo is the way Home (no Home pill any more) */
@media (max-width:400px){.top .home{display:flex}.top .home img{height:30px}}
/* Music Maker fits a phone without sideways scrolling */
@media (max-width:480px){.mmrow{grid-template-columns:24px repeat(16,minmax(14px,1fr));gap:3px;min-width:0}.mm{padding:12px}}