@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/fredoka.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url(fonts/nunito.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
   Slates v2 — shared look for the home page and every game.
   Chalkboard slate + bright game colours. Fredoka for display, Nunito for text,
   Caveat for chalk writing. Every game page loads this file and assets/slates.js.
   ========================================================================== */
:root{
  --slate:#1D2A30; --slate-2:#24343B; --slate-3:#2E4049; --slate-line:rgba(244,241,232,.08);
  --chalk:#F4F1E8; --chalk-2:rgba(244,241,232,.72); --chalk-3:rgba(244,241,232,.48);
  --wood:#8A5A2B; --wood-2:#6B4220; --wood-hi:#B07A40;
  --blue:#3D8BFF; --coral:#F0503C; --sun:#FFC233; --green:#20B26B; --purple:#7A5CF0; --teal:#12B3AE; --orange:#FF8A1F; --pink:#FF5FA2;
  --paper:#FFFFFF; --ink:#1B2B6B;
  --radius:22px;
  --font-display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --font-chalk:"Caveat","Comic Sans MS",cursive;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-weight:700;color:var(--chalk);background:var(--slate);-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
a{color:inherit}
[hidden]{display:none!important}
.display{font-family:var(--font-display);font-weight:700}
.chalk{font-family:var(--font-chalk);font-weight:700}

/* the chalkboard surface */
.slate-bg{
  background-color:var(--slate);
  background-image:
    radial-gradient(ellipse 60% 40% at 20% 10%,rgba(255,255,255,.045),transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 70%,rgba(255,255,255,.035),transparent 70%),
    radial-gradient(ellipse 30% 20% at 60% 30%,rgba(255,255,255,.025),transparent 70%);
}

/* ---------- game top bar (built by SL.bar) ---------- */
.sl-bar{position:sticky;top:0;z-index:50;color:var(--chalk);font-family:var(--font-body);font-weight:700;line-height:1.2;display:flex;align-items:center;gap:10px;
  padding:calc(8px + var(--safe-t)) calc(12px + env(safe-area-inset-right,0px)) 8px calc(12px + env(safe-area-inset-left,0px));background:rgba(29,42,48,.94);backdrop-filter:blur(8px);
  border-bottom:4px solid var(--wood);box-shadow:0 2px 0 var(--wood-2)}
.sl-home{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none;padding:4px 10px 4px 4px;border-radius:14px}
.sl-home:hover{background:rgba(255,255,255,.06)}
.sl-home svg{width:40px;height:34px;flex:none}
.sl-home span{font-family:var(--font-chalk);font-size:28px;line-height:1;color:var(--chalk)}
.sl-title{flex:1;min-width:0;font-family:var(--font-display);font-weight:700;font-size:clamp(18px,4.6vw,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.sl-title i{width:12px;height:12px;border-radius:50%;background:var(--accent,var(--sun));flex:none;display:inline-block}
.sl-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:20px;background:rgba(255,255,255,.08);border:0;font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--chalk)}
.sl-pill svg{width:20px;height:20px}
.sl-icon{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none;color:var(--chalk)}
.sl-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.sl-icon:hover,.sl-pill:hover{background:rgba(255,255,255,.14)}
@media (max-width:420px){.sl-home span{display:none}.sl-home{padding:4px}}

/* ---------- shared buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:16px;border:0;
  font-family:var(--font-display);font-weight:700;font-size:20px;color:#fff;background:var(--c,var(--blue));
  box-shadow:0 5px 0 var(--c-edge,rgba(0,0,0,.28));transition:transform .08s,box-shadow .08s;text-decoration:none;user-select:none;-webkit-user-select:none}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--c-edge,rgba(0,0,0,.28))}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--chalk);box-shadow:0 5px 0 rgba(0,0,0,.25)}
.btn.sun{--c:var(--sun);color:#3B2A00;--c-edge:#C99000}
.btn.green{--c:var(--green);--c-edge:#178A52}
.btn.coral{--c:var(--coral);--c-edge:#B8392A}
.btn.purple{--c:var(--purple);--c-edge:#5B40C9}
.btn.small{min-height:42px;font-size:17px;padding:0 16px;border-radius:13px}

/* ---------- overlay / modal used for "level complete" etc. (SL.modal) ---------- */
.sl-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:max(16px,var(--safe-t)) 16px max(16px,var(--safe-b));overflow-y:auto;overscroll-behavior:contain;background:rgba(10,16,20,.62);backdrop-filter:blur(3px);animation:slFade .2s ease}
.sl-card{width:min(440px,100%);background:var(--slate-2);border:4px solid var(--wood);border-radius:26px;padding:26px 22px 22px;text-align:center;
  box-shadow:0 8px 0 var(--wood-2),0 24px 60px rgba(0,0,0,.5);animation:slPop .35s cubic-bezier(.2,1.3,.4,1)}
.sl-card h2{margin:0 0 6px;font-family:var(--font-display);font-size:34px;line-height:1.05}
.sl-card p{margin:6px 0 0;color:var(--chalk-2);font-size:18px;line-height:1.4}
.sl-card .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.sl-stars{display:flex;justify-content:center;gap:8px;margin:14px 0 4px}
.sl-stars svg{width:64px;height:64px}
.sl-star{fill:rgba(255,255,255,.12);stroke:rgba(255,255,255,.3);stroke-width:1.4;stroke-linejoin:round}
.sl-star.on{fill:var(--sun);stroke:#E0A000;animation:slPop .5s cubic-bezier(.2,1.4,.4,1) both}
@media (max-height:520px){
  .sl-card{padding:16px 16px 14px;border-radius:20px}
  .sl-card h2{font-size:26px}
  .sl-card p{font-size:16px}
  .sl-stars svg{width:44px;height:44px}
  .sl-stars{margin:6px 0 2px}
  .sl-card .row{margin-top:12px}
}
@keyframes slFade{from{opacity:0}}
@keyframes slPop{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}

/* toast */
.sl-toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);z-index:300;background:var(--chalk);color:var(--slate);
  font-family:var(--font-display);font-weight:700;font-size:19px;padding:12px 20px;border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.35);animation:slToast 2.2s ease forwards;pointer-events:none;white-space:nowrap}
@keyframes slToast{0%{opacity:0;transform:translate(-50%,20px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}

/* confetti canvas */
.sl-confetti{position:fixed;inset:0;pointer-events:none;z-index:250}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}