/* Kindness Games — shared fonts + design tokens */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/nunito-latin-900-normal.woff2) format('woff2')}

:root{
  --kg-blue:#1f6fe5; --kg-blue-500:#2f7df0; --kg-blue-600:#1558c7; --kg-blue-800:#0b3d91; --kg-navy:#0a1f4d;
  --kg-red:#ef3340; --kg-red-600:#d6232f; --kg-red-800:#9e1320;
  --kg-gold:#ffc531; --kg-gold-600:#f0a500; --kg-gold-800:#a86200;
  --kg-green:#22b573; --kg-green-700:#11764a;
  --kg-sky:#e8f2ff; --kg-cloud:#f5f8ff; --kg-white:#fff;
  --kg-ink:#141d45; --kg-ink-2:#48547e; --kg-ink-3:#8790b0;
  --kg-line:#dde5f3;
  --kg-display:'Fredoka','Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kg-font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --kg-r-sm:10px; --kg-r:16px; --kg-r-lg:24px; --kg-r-xl:32px;
  --kg-shadow-sm:0 1px 2px rgba(20,29,69,.06),0 2px 6px rgba(20,29,69,.06);
  --kg-shadow:0 2px 4px rgba(20,29,69,.05),0 10px 28px rgba(20,29,69,.10);
  --kg-shadow-lg:0 8px 16px rgba(20,29,69,.08),0 24px 60px rgba(20,29,69,.18);
}
.c-blue{--c1:#1f6fe5;--c2:#0b3d91;--c-soft:#e6f0ff}
.c-red{--c1:#ef3340;--c2:#a3121e;--c-soft:#ffe8ea}
.c-gold{--c1:#ffb81c;--c2:#b36f00;--c-soft:#fff4d6}
.c-green{--c1:#22b573;--c2:#11764a;--c-soft:#e1f7ec}
.c-purple{--c1:#8b5cf6;--c2:#5b21b6;--c-soft:#efe8ff}
.c-orange{--c1:#ff7a1a;--c2:#c2410c;--c-soft:#ffeede}
.c-teal{--c1:#14b8c4;--c2:#0e7490;--c-soft:#dff6f8}
.c-pink{--c1:#ec4899;--c2:#a21caf;--c-soft:#fde7f3}
.c-sky{--c1:#38bdf8;--c2:#0369a1;--c-soft:#e0f4fe}
.c-lime{--c1:#84cc16;--c2:#3f6212;--c-soft:#eefad8}
.c-coral{--c1:#fb7185;--c2:#be123c;--c-soft:#ffe6ea}
.c-midnight{--c1:#475569;--c2:#0f172a;--c-soft:#e5e9f0}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--kg-font);color:var(--kg-ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.ic{flex:none;vertical-align:middle}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- install pop-up (kids + vendor PWAs) ---------- */
.pwa-sheet-backdrop{position:fixed;inset:0;background:rgba(10,20,55,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9000;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s}
.pwa-sheet-backdrop.show{opacity:1}
.pwa-sheet{position:relative;width:100%;max-width:460px;background:#fff;border-radius:28px 28px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));transform:translateY(40px);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);box-shadow:var(--kg-shadow-lg)}
.pwa-sheet-backdrop.show .pwa-sheet{transform:none}
@media (min-width:640px){.pwa-sheet-backdrop{align-items:center}.pwa-sheet{border-radius:28px}}
.pwa-sheet .pwa-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:#eef2fa;color:var(--kg-ink-2);display:grid;place-items:center}
.pwa-head{display:flex;gap:14px;align-items:flex-end;margin:-70px 0 10px}
.pwa-head img.pwa-hero{width:112px;height:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.18))}
.pwa-bubble{position:relative;background:var(--kg-blue);color:#fff;font-family:var(--kg-display);font-weight:600;font-size:17px;line-height:1.25;padding:12px 15px;border-radius:18px 18px 18px 4px;margin-bottom:26px}
.pwa-sheet h3{font-family:var(--kg-display);font-weight:700;font-size:23px;margin:4px 0 4px;color:var(--kg-ink)}
.pwa-sheet p.pwa-sub{margin:0 0 16px;color:var(--kg-ink-2);font-size:15px}
.pwa-steps{display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.pwa-steps li{display:flex;align-items:center;gap:12px;background:var(--kg-cloud);border:1px solid var(--kg-line);border-radius:16px;padding:11px 13px;font-weight:700;font-size:15px}
.pwa-steps .pwa-ico{width:40px;height:40px;border-radius:12px;background:#fff;display:grid;place-items:center;box-shadow:var(--kg-shadow-sm);color:var(--kg-blue);flex:none}
.pwa-steps small{display:block;font-weight:600;color:var(--kg-ink-3);font-size:13px}
.pwa-btn{display:flex;width:100%;align-items:center;justify-content:center;gap:8px;border:0;border-radius:18px;padding:15px 18px;font-family:var(--kg-display);font-weight:600;font-size:18px;color:#fff;background:var(--kg-blue);box-shadow:0 5px 0 var(--kg-blue-800);margin-bottom:10px;transition:transform .08s}
.pwa-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--kg-blue-800)}
.pwa-btn.alt{background:#eef2fa;color:var(--kg-ink-2);box-shadow:none;font-size:16px}
.pwa-arrow{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:9001;color:#fff;font-family:var(--kg-display);font-weight:600;text-align:center;animation:pwaBob 1.1s ease-in-out infinite;pointer-events:none}
.pwa-arrow.top-right{left:auto;right:18px;bottom:auto;top:8px;transform:none}
@keyframes pwaBob{50%{margin-bottom:10px;margin-top:10px}}