/* ===== Modern skin (loaded after page styles) ===== */
@font-face{font-family:"Fredoka";font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:400;font-display:swap;src:url(fonts/andika-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Andika";font-weight:700;font-display:swap;src:url(fonts/andika-latin-700-normal.woff2) format("woff2")}
:root{--teal:#3aa6bd;--teal2:#2b8aa3;--cream:#fffaf0;--navy:#17395c;--sun:#ffc93c;--coral:#f2727a;--mint:#5cc9a7;--sky:#5aa9e6;--grape:#9b7be0}
html{background:linear-gradient(165deg,#5fc0d3 0%,#3aa6bd 45%,#2b8aa3 100%) fixed}
body{background:transparent!important;color:var(--navy);font-family:"Nunito",system-ui,sans-serif;font-weight:700}
body::before{display:none}
.decor{display:none!important}
.wrap{background:#fff;border-radius:40px;margin:18px auto 30px!important;padding:22px 26px 34px!important;box-shadow:0 24px 60px rgba(10,50,70,.25);max-width:1120px}
@media(max-width:700px){.wrap{border-radius:26px;margin:8px!important;padding:14px!important}}
h1,h2,h3,button,.f,.kb,.bubble,.stars{font-family:"Fredoka",system-ui,sans-serif}
.logo{box-shadow:none!important;padding:4px 8px!important}
.gr{width:min(380px,80vw)!important}
.gr text[fill="#ffffffaa"],.gr text[fill="#00000022"]{fill:transparent}
.gr text[font-size="76"][fill="#fff"]{fill:var(--navy)}
header h1 small,#sub{color:var(--teal2)!important;font-family:"Nunito";font-weight:800;letter-spacing:.3px}
/* nav */
.kidnav{background:#fff;border-radius:999px!important;margin:0 0 14px!important;padding:8px!important;box-shadow:0 8px 24px rgba(10,50,70,.12)!important;top:10px!important;border:2px solid #eef4f6}
.kidnav .kb{border-radius:999px!important;min-height:54px;padding:8px 20px 8px 8px!important;font-weight:600!important;font-size:21px!important;box-shadow:0 5px 0 rgba(0,0,0,.12)!important}
.kidnav .kb::first-letter{font-size:1em}
.kb.homeb{background:linear-gradient(180deg,#ffd866,#ffc22e)!important;color:var(--navy)!important}
.kb.backb{background:linear-gradient(180deg,#56b8cc,#2f97b0)!important;color:#fff!important}
.kidnav .crumbs a{background:#f0f7f9!important;color:var(--teal2)!important;font-family:"Nunito";font-weight:800}
.kidnav .crumbs b{background:var(--navy)!important;font-family:"Nunito";font-weight:800}
#stars2,.kidnav .stars{background:linear-gradient(180deg,#fff6d6,#ffe7a3)!important;border:3px solid var(--sun);color:var(--navy)!important}
/* steps + guide */
.steps{background:#f3f8fa;border-radius:999px;padding:6px;display:flex!important;gap:4px!important;max-width:720px;margin:14px auto 6px!important}
.steps span{flex:1;text-align:center;background:transparent!important;font-family:"Nunito"!important;font-weight:800!important;font-size:15px!important;color:#7d97a6!important;padding:8px 6px!important}
.steps span.on{background:var(--navy)!important;color:#fff!important;box-shadow:0 4px 10px rgba(23,57,92,.25)}
.steps span.ok{background:var(--mint)!important;color:#fff!important}
.bubble{background:var(--cream)!important;border:3px solid #f3e6c8;box-shadow:none!important;font-weight:600!important}
.bubble::before{border-right-color:#f3e6c8!important}
.bubble .step{background:var(--coral)!important}
/* glossy bubbles */
.ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:32px;color:#fff;font-family:"Fredoka";font-weight:700;position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.12);flex:none}
.ic::after{content:"";position:absolute;left:12%;top:10%;width:34%;height:30%;border-radius:50%;background:rgba(255,255,255,.55)}
/* set cards (root) */
.sets{gap:18px!important}
.set{background:var(--cream)!important;border:0!important;border-radius:32px!important;box-shadow:0 10px 24px rgba(10,50,70,.10)!important;padding:24px 14px 20px!important;transition:transform .15s}
.set:hover{transform:translateY(-5px)!important}
.set b{width:96px;height:96px;margin:0 auto 10px;border-radius:50%;display:grid!important;place-items:center;color:#fff;font-size:52px!important;position:relative;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.12)}
.set b::after{content:"";position:absolute;left:14%;top:10%;width:32%;height:28%;border-radius:50%;background:rgba(255,255,255,.55)}
.set:nth-child(1) b{background:var(--coral)}.set:nth-child(2) b{background:var(--sky)}.set:nth-child(3) b{background:var(--sun)}.set:nth-child(4) b{background:var(--mint)}
.set span{font-family:"Fredoka";font-weight:600;font-size:24px!important}
.set em{background:var(--navy)!important;color:#fff!important;font-family:"Fredoka";font-weight:600}
/* tiles */
.grid{gap:20px!important}
.tile{background:var(--cream)!important;border:0!important;border-radius:30px!important;padding:16px!important;box-shadow:0 10px 24px rgba(10,50,70,.10)!important;position:relative;font-family:"Nunito"}
.tile:hover{transform:translateY(-5px)!important}
.tile .ic{position:absolute;right:12px;top:12px;width:58px;height:58px;font-size:28px}
.tile .wk{display:inline-block;background:#fff;border-radius:999px;padding:3px 12px;font-weight:800;font-size:14px!important;color:var(--teal2)!important}
.tile b{font-family:"Fredoka"!important;font-weight:700;font-size:24px!important;color:var(--navy)!important;padding-right:62px;min-height:30px}
.tile img{border-radius:18px!important;margin:10px 0 8px!important}
.tile .dots{color:var(--sun)}
.cover img{border:0!important;border-radius:26px!important;transform:none!important;box-shadow:0 10px 24px rgba(10,50,70,.15)!important}
.cover p{font-family:"Fredoka"!important;font-weight:600;font-size:28px!important;color:var(--navy)!important}
/* play panel */
.panel{background:var(--cream)!important;border:0!important;border-radius:34px!important;box-shadow:none!important;border-left:0!important}
.phead h2{margin-left:-28px!important;border-radius:0 999px 999px 0!important;background:linear-gradient(180deg,#ffd866,#ffc22e)!important;font-weight:700}
.days button{border-radius:999px!important;background:#fff!important;font-family:"Nunito";font-weight:800}
.days button.on{background:var(--navy)!important;color:#fff!important}
.slide{border-radius:22px!important}
.game{background:#fff!important;border:0!important;border-radius:28px!important;box-shadow:0 8px 20px rgba(10,50,70,.08)}
.game .tip{font-family:"Fredoka"!important;font-weight:600;font-size:22px!important;color:var(--coral)!important}
.sent{border:0!important;background:#f3f8fa!important;border-radius:22px!important;font-family:"Andika",sans-serif;font-weight:400}
.chip{border-radius:999px!important;font-family:"Fredoka";font-weight:600}
.blk,.word{border-radius:18px!important}
.go{background:linear-gradient(180deg,#2f97b0,#227d94)!important;box-shadow:0 6px 0 #1a6476!important;border-radius:999px!important}
.soft{border-radius:999px!important;background:#fff!important}
.msg{font-family:"Fredoka"!important;font-weight:600}
.write{border:0!important;background:#fff!important;border-radius:30px!important;box-shadow:0 8px 20px rgba(10,50,70,.08)}
.foot{color:#7d97a6!important;font-family:"Nunito";font-weight:700}
/* ===== Our own badge style: tilted "sticker" tiles (replaces round glossy bubbles) ===== */
.ic,.set b{border-radius:24px!important;border:4px solid #fff;transform:rotate(-6deg);box-shadow:0 6px 0 rgba(0,0,0,.10),0 10px 18px rgba(10,50,70,.14)!important;background-image:linear-gradient(135deg,rgba(255,255,255,.28) 0 40%,transparent 40%)!important}
.ic::after,.set b::after{content:"✦"!important;left:auto!important;right:-12px!important;top:-14px!important;width:auto!important;height:auto!important;background:none!important;border-radius:0!important;color:#ffc93c;font-size:22px;line-height:1;text-shadow:0 2px 0 #fff}
.set:nth-child(even) b,.tile:nth-child(even) .ic{transform:rotate(6deg)}
.set:hover b,.tile:hover .ic{transform:rotate(0) scale(1.08);transition:transform .2s}
.set b{width:92px!important;height:92px!important}

.kidnav .sndb{background:#e6f7f2!important;color:#0d6b5c!important;border:3px solid #7fd6c2!important;padding:8px 18px!important}
.kidnav .sndb.isoff{background:#f1f1f4!important;color:#6b6b7b!important;border-color:#cfcfd8!important}
body.mute .say,body.mute .say-mini,body.mute .slide-say{display:none!important}
.kidnav .fsb{background:#eef0ff!important;color:#3c3489!important;border:3px solid #afa9ec!important;padding:8px 18px!important}
body.fs{overflow:auto}
.kidnav .closetb{background:linear-gradient(180deg,#ffb3c1,#f2727a)!important;color:#fff!important;text-decoration:none;padding:8px 18px!important}
header h1,header h1 small,#sub{text-shadow:none!important}
/* one-line top bar */
.kidnav{flex-wrap:nowrap!important;gap:8px!important;align-items:center}
.kidnav .kb{white-space:nowrap;font-size:19px!important;min-height:50px;flex:none}
.kidnav .fsb,.kidnav .sndb{width:52px;padding:0!important;justify-content:center;font-size:24px!important}
.kidnav .crumbs{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center;gap:4px}
.kidnav .stars{flex:none;white-space:nowrap;margin-left:auto}
@media(max-width:900px){.kidnav .crumbs{display:none!important}}
/* wider white card */
.wrap{max-width:min(1440px,calc(100vw - 48px))!important}
@media(min-width:1200px){#grades .grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}}
@media(min-width:700px) and (max-width:1199px){#grades .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(min-width:1200px){#grades .tile b,#grades .tile h3,#grades .tile strong{font-size:clamp(17px,1.45vw,24px)!important;white-space:nowrap}}
@media(min-width:1200px){#grades .tile .ic{width:50px!important;height:50px!important;font-size:24px!important}#grades .tile b{font-size:clamp(16px,1.3vw,22px)!important;display:block;padding-right:44px}}
/* top bar: everything grouped in the middle */
.kidnav{justify-content:center!important}
.kidnav .crumbs{flex:0 1 auto!important}
.kidnav .stars{margin-left:0!important}
/* no shadows anywhere */
*:not(#_n#_o#_s),*:not(#_n#_o#_s)::before,*:not(#_n#_o#_s)::after{box-shadow:none!important;text-shadow:none!important}
*:not(#_n#_o#_s){filter:none!important}
/* brand-color background (Reimagine Writing blue) */
html:not(#_n#_o#_s){background:#076b95 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='%23ffffff' opacity='.16'/%3E%3Ccircle cx='30' cy='30' r='2.5' fill='%23ffd057' opacity='.28'/%3E%3C/svg%3E") repeat!important;min-height:100%}
body:not(#_n#_o#_s){background:transparent!important}
.gr text[font-size="26"][fill="#fff"]{fill:#fff!important}
.gr text[fill="#00000022"]{fill:transparent!important}