/* Navigation: a colour strip and ink outline across the top, sticker-style menu buttons, and menus that show how much there is: icon tiles, counts, NEW badges.
   Loaded on every page after polish.css. Fredoka is self-hosted (see /play/fonts); the markup is unchanged for people without JavaScript. */
@font-face{font-family:"Fredoka";src:url(/play/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--nv-ink:#1b1340;--nv-yellow:#ffd23f;--nv-pink:#ff5d8f;--nv-violet:#6c4de6;--nv-mint:#38d9a9;--nv-sky:#3ec1ff;--nv-ui:"Fredoka","Jakarta",system-ui,sans-serif}

/* ---------- the header bar ---------- */
.w-top{border-bottom:3px solid var(--nv-ink);box-shadow:0 5px 0 rgba(27,19,64,.07)}
.w-top::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--nv-violet) 0 25%,var(--nv-pink) 25% 50%,var(--nv-yellow) 50% 75%,var(--nv-mint) 75%);z-index:1}
.w-top .logo-word{font-family:var(--nv-ui);font-weight:700;letter-spacing:-.01em}
.w-top .w-search-btn{border:2px solid var(--nv-ink);box-shadow:2px 2px 0 var(--nv-ink);background:#fff;transition:transform .15s,box-shadow .15s}
.w-top .w-search-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--nv-ink)}
.w-top .w-top-cta{border:2px solid var(--nv-ink);background:var(--nv-yellow);color:var(--nv-ink);box-shadow:3px 3px 0 var(--nv-ink);font-family:var(--nv-ui);font-weight:600;transition:transform .15s,box-shadow .15s}
.w-top .w-top-cta:hover{transform:translate(-1px,-1px) rotate(-1deg);box-shadow:4px 4px 0 var(--nv-ink)}

/* ---------- the seven menu buttons ---------- */
.w-top .w-mega-trigger{position:relative;font-family:var(--nv-ui);font-weight:600;color:var(--nv-ink);border:2px solid transparent;transition:background-color .15s,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}
.w-top .w-mega:hover .w-mega-trigger,.w-top .w-mega:focus-within .w-mega-trigger{background:var(--nv-yellow);color:var(--nv-ink);border-color:var(--nv-ink);box-shadow:3px 3px 0 var(--nv-ink);transform:translate(-1px,-1px) rotate(-1.2deg)}
.w-top .w-mega-trigger[aria-current]{background:#fff;color:var(--nv-ink);border-color:var(--nv-ink);box-shadow:2px 2px 0 var(--nv-ink)}
.w-badge{position:absolute;top:-7px;right:-4px;padding:3px 5px;border:2px solid var(--nv-ink);border-radius:8px;background:var(--nv-pink);color:#fff;font:800 9px/1 var(--nv-ui);letter-spacing:.06em;text-transform:uppercase;font-style:normal;transform:rotate(8deg);pointer-events:none;animation:nv-wobble 3.2s ease-in-out infinite}
@keyframes nv-wobble{0%,86%,100%{transform:rotate(8deg) scale(1)}90%{transform:rotate(-4deg) scale(1.12)}95%{transform:rotate(12deg) scale(1.12)}}

/* ---------- the menu panels ---------- */
.w-top .w-mega-panel{padding:0 12px}
.w-top .w-mega-in{max-width:1260px;grid-template-columns:minmax(0,1fr) 300px;gap:26px;padding:26px 28px 30px;border:3px solid var(--nv-ink);border-top:0;border-radius:0 0 30px 30px;background:radial-gradient(circle,rgba(27,19,64,.07) 1.2px,transparent 1.7px) 0 0/16px 16px,#fffaf0;box-shadow:0 8px 0 var(--nv-ink),0 44px 70px -34px rgba(15,21,51,.55)}
.w-top .w-mega-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:20px 22px}
.w-top .mc{min-width:0}
.w-top .mc-h{display:inline-block;margin:0 0 8px;padding:4px 10px;border-radius:8px;background:var(--nv-ink);color:#fff;font:700 11.5px/1.2 var(--nv-ui);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-1.5deg)}
.w-top .mc a{display:flex;align-items:flex-start;gap:11px;padding:8px 10px;margin:0 -2px 3px;border:2px solid transparent;border-radius:14px;color:var(--nv-ink);text-decoration:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,background-color .15s,border-color .15s}
.w-top .mc a:hover,.w-top .mc a:focus-visible{background:#fff;border-color:var(--nv-ink);box-shadow:3px 3px 0 var(--nv-ink);transform:translate(-2px,-2px)}
.w-top .mi-i{flex:none;display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--nv-ink);border-radius:12px;background:var(--c-soft,#fff3bf);font-size:21px;line-height:1}
.w-top .mi-t{display:block;min-width:0}
.w-top .mi-n{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 15.5px/1.2 var(--nv-ui);color:var(--nv-ink)}
.w-top .w-mega-panel .mi-t small{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.mi-b{padding:2px 6px;border:1.5px solid var(--nv-ink);border-radius:7px;background:var(--nv-yellow);color:var(--nv-ink);font:800 9px/1.2 var(--nv-ui);letter-spacing:.06em;text-transform:uppercase;font-style:normal;white-space:nowrap}
.w-top .mc-more{display:inline-flex;margin:4px 0 0;padding:6px 10px;border:2px dashed var(--nv-ink);border-radius:10px;font:700 13px var(--nv-ui);color:var(--nv-ink)}
.w-top .mc-more:hover{border-style:solid}

/* the card at the right of each panel */
.w-top .w-mega-card{position:relative;gap:10px;padding:22px 22px 24px;border:3px solid var(--nv-ink);border-radius:20px;background:radial-gradient(circle,rgba(255,255,255,.13) 1.3px,transparent 1.8px) 0 0/14px 14px,var(--nv-violet);color:#fff;box-shadow:5px 5px 0 var(--nv-ink);transform:rotate(.8deg);overflow:hidden}
.w-top .w-mega-card .mc-h{align-self:flex-start;background:var(--nv-yellow);color:var(--nv-ink)}
.w-top .w-mega-card .mc-t{font:700 24px/1.12 var(--nv-ui);color:#fff;text-shadow:2px 2px 0 var(--nv-ink)}
.w-top .w-mega-card p{color:#ece8ff;font-size:14px}
.w-top .w-mega-card .btn{--bg:var(--nv-yellow);--fg:var(--nv-ink);--bd:var(--nv-ink);border:2px solid var(--nv-ink);box-shadow:3px 3px 0 var(--nv-ink);font-family:var(--nv-ui);font-weight:700;transition:transform .15s,box-shadow .15s}
.w-top .w-mega-card .btn:hover{transform:translate(-1px,-1px) rotate(-1deg);box-shadow:4px 4px 0 var(--nv-ink)}
/* each section's card takes its subject colour */
.w-mega:has(> [data-c=coding]) .w-mega-card{background-color:#1f9d6b}.w-mega:has(> [data-c=maths]) .w-mega-card{background-color:#e0463f}.w-mega:has(> [data-c=cubing]) .w-mega-card{background-color:#d97a06}.w-mega:has(> [data-c=ai]) .w-mega-card{background-color:#6c4de6}.w-mega:has(> [data-c=business]) .w-mega-card{background-color:#2557b8}

/* ---------- phones: the menu drawer ---------- */
.w-drawer .w-acc summary{font:600 17px var(--nv-ui);color:var(--nv-ink)}
.w-drawer .w-acc-in a{display:flex;align-items:center;gap:10px}
.w-drawer .mi-b{margin-left:auto}
.w-drawer .w-acc{border:2px solid var(--nv-ink);border-radius:16px;box-shadow:3px 3px 0 var(--nv-ink);background:#fff;margin-bottom:10px}
@media(prefers-reduced-motion:reduce){.w-badge{animation:none}.w-top .mc a,.w-top .w-mega-trigger,.w-top .w-top-cta{transition:none}.w-top .mc a:hover,.w-top .w-mega:hover .w-mega-trigger{transform:none}}