/* =========================================================================
   ДЕТСКИЙ ГЕРБЕРГЪ — мультяшный лубок (Claymorphism), мобайл-фёрст
   Палитра: тёплая folk-основа + сочные детские акценты.
   Шрифт: Baloo 2 (круглый, детский) + Nizhegorodsky для имени.
   ========================================================================= */
@font-face{font-family:'Nizhegorodsky';src:url('../fonts/ST-Nizhegorodsky.ttf') format('truetype');font-display:swap}

:root{
  --paper:#fcf3e0;--paper-2:#f6e8cd;--card:#fffdf8;
  --ink:#3a2c1c;--ink-soft:#7a6a52;--muted:#8c7a63;
  --gold:#e0a83a;--gold-deep:#b9842a;
  --green:#1f7a4d;--green-deep:#155c3a;
  --burgundy:#c23a4b;--burgundy-deep:#9a2233;
  --blue:#3aa0d8;--blue-deep:#2b7fb0;
  --mint:#3fb98b;--mint-deep:#2e9670;
  --orange:#f08a24;--orange-deep:#cf6f12;
  --rasp:#e0588a;--rasp-deep:#bd3d6e;
  --sun:#f4c542;
  --line:rgba(58,44,28,.14);
  --ui:'Baloo 2',system-ui,sans-serif;
  --brand:'Nizhegorodsky','Baloo 2',serif;
  --shadow:rgba(70,50,20,.22);
  --r:24px;--ease:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--ui);font-weight:500;color:var(--ink);
  background:
   radial-gradient(60% 40% at 15% 0%,rgba(58,160,216,.10),transparent 60%),
   radial-gradient(60% 40% at 90% 10%,rgba(63,185,139,.12),transparent 60%),
   var(--paper);
  min-height:100vh;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

/* ===== пухлые кнопки (clay) ===== */
.clay{border:0;border-radius:var(--r);font-family:var(--ui);font-weight:700;color:#fff;
  padding:.7em 1.3em;font-size:1.05rem;position:relative;
  box-shadow:0 8px 0 var(--clay-d,#9a2233),0 14px 22px -10px var(--shadow);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);background:var(--clay,#c23a4b);
  touch-action:manipulation}
.clay:active{transform:translateY(6px);box-shadow:0 2px 0 var(--clay-d,#9a2233),0 8px 14px -10px var(--shadow)}
.clay--green{--clay:var(--green);--clay-d:var(--green-deep)}
.clay--gold{--clay:var(--gold);--clay-d:var(--gold-deep);color:#5a3d12}
.clay--blue{--clay:var(--blue);--clay-d:var(--blue-deep)}
.clay--mint{--clay:var(--mint);--clay-d:var(--mint-deep)}
.clay--ghost{background:#fff;color:var(--ink);--clay-d:#e6d6b6;box-shadow:0 6px 0 #e6d6b6,0 12px 20px -12px var(--shadow)}

/* ===== шапка ===== */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;background:rgba(252,243,224,.92);backdrop-filter:blur(8px);
  box-shadow:0 2px 0 rgba(224,168,58,.35)}
.top__brand{display:flex;align-items:center;gap:9px;font-family:var(--brand);font-size:1.15rem;color:var(--green-deep);line-height:1;min-width:0;flex:1}
.top__brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top>div{flex:none}.parentbtn{flex:none;white-space:nowrap}
@media(max-width:600px){.top__brand span{display:none}}
.top__brand img{height:38px;width:auto}
.top__stars{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 13px 6px 10px;
  box-shadow:0 4px 0 #e6d6b6,0 8px 14px -8px var(--shadow);font-weight:800;color:var(--gold-deep)}
.top__stars svg{width:22px;height:22px;color:var(--sun)}
.top__parent{font-size:.78rem;font-weight:700;color:var(--ink-soft);background:none;border:0;text-decoration:underline}

/* ===== приветствие ===== */
.hello{text-align:center;padding:18px 16px 4px}
.hello__mascots{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.hello__mascots img{width:74px;height:74px;border-radius:50%;object-fit:cover;border:4px solid #fff;
  box-shadow:0 8px 0 var(--gold),0 14px 20px -10px var(--shadow);background:#fff}
.hello__mascots img:nth-child(2){box-shadow:0 8px 0 var(--green),0 14px 20px -10px var(--shadow)}
.hello h1{font-family:var(--brand);font-size:clamp(1.8rem,7vw,2.8rem);color:var(--burgundy);line-height:1.02;margin-top:6px}
.hello p{color:var(--ink-soft);font-weight:600;max-width:36ch;margin:.3em auto 0;font-size:1rem}

/* ===== фильтр категорий ===== */
.cats{display:flex;gap:9px;overflow-x:auto;padding:14px;scrollbar-width:none;scroll-snap-type:x proximity}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;border:0;border-radius:999px;padding:.6em 1.15em;font-weight:800;font-size:.95rem;color:var(--ink);
  background:#fff;box-shadow:0 5px 0 #e6d6b6;scroll-snap-align:start;transition:transform .12s var(--ease)}
.cat:active{transform:translateY(3px)}
.cat.on{color:#fff;background:var(--green);box-shadow:0 5px 0 var(--green-deep)}

/* ===== сетка игр ===== */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:4px 14px 30px;max-width:760px;margin:0 auto}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:880px){.grid{grid-template-columns:repeat(4,1fr);gap:16px}}
.card{border:0;border-radius:26px;padding:16px 12px 14px;background:var(--c,#fff);position:relative;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:#fff;
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.10),inset 0 4px 10px rgba(255,255,255,.45),0 10px 0 var(--cd,#bd3d6e),0 18px 26px -14px var(--shadow);
  transition:transform .14s var(--ease),box-shadow .14s var(--ease);animation:pop .4s var(--ease) both}
.card:active{transform:translateY(7px) scale(.99);box-shadow:inset 0 -6px 14px rgba(0,0,0,.10),0 3px 0 var(--cd,#bd3d6e),0 10px 16px -12px var(--shadow)}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(14px)}to{opacity:1;transform:none}}
.card__ic{width:64px;height:64px;display:grid;place-items:center;background:#fff;border-radius:50%;color:var(--ink);
  box-shadow:0 5px 0 rgba(0,0,0,.10),inset 0 -3px 6px rgba(0,0,0,.06)}
.card__ic svg{width:40px;height:40px;color:var(--c,#c23a4b)}
.card__t{font-weight:800;font-size:.95rem;line-height:1.1;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.card__tag{position:absolute;top:8px;right:9px;font-size:.62rem;font-weight:800;background:rgba(255,255,255,.92);
  color:var(--ink);border-radius:999px;padding:2px 7px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
/* цвета карточек по индексу */
.c0{--c:var(--burgundy);--cd:var(--burgundy-deep)} .c1{--c:var(--blue);--cd:var(--blue-deep)}
.c2{--c:var(--mint);--cd:var(--mint-deep)} .c3{--c:var(--orange);--cd:var(--orange-deep)}
.c4{--c:var(--rasp);--cd:var(--rasp-deep)} .c5{--c:var(--green);--cd:var(--green-deep)}
.c6{--c:var(--gold);--cd:var(--gold-deep)}

/* ===== полноэкранный экран игры ===== */
.screen{position:fixed;inset:0;z-index:50;background:var(--paper);display:none;flex-direction:column}
.screen.open{display:flex;animation:slideup .3s var(--ease)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.screen__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;
  background:#fff;box-shadow:0 2px 0 rgba(224,168,58,.35)}
.screen__back{display:flex;align-items:center;gap:7px;border:0;background:var(--green);color:#fff;font-weight:800;
  border-radius:999px;padding:.55em 1.1em;box-shadow:0 5px 0 var(--green-deep)}
.screen__back:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-deep)}
.screen__title{font-family:var(--brand);font-size:1.15rem;color:var(--burgundy);text-align:center;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen__stage{flex:1;overflow:auto;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:14px;padding:16px 14px 28px;width:100%}
.stage-hint{color:var(--ink-soft);font-weight:700;text-align:center;font-size:1rem}

/* доска/канвас игр */
.board{display:grid;gap:10px;width:100%;max-width:460px}
canvas.game{width:100%;max-width:460px;border-radius:22px;background:#fff;
  box-shadow:0 10px 0 #e6d6b6,0 18px 26px -16px var(--shadow);touch-action:none}
svg.colour{width:100%;max-width:420px;background:#fff;border-radius:22px;
  box-shadow:0 10px 0 #e6d6b6,0 18px 26px -16px var(--shadow)}
svg.colour *[data-fill]{cursor:pointer;transition:fill .15s}

/* карточки памяти / выбор */
.cells{display:grid;gap:10px;width:100%;max-width:460px}
.cell{aspect-ratio:1;border:0;border-radius:18px;background:var(--green);color:#fff;display:grid;place-items:center;
  box-shadow:0 6px 0 var(--green-deep);font-size:2rem;transition:transform .12s var(--ease),background .2s}
.cell:active{transform:translateY(3px)}
.cell.flip{background:#fff;box-shadow:0 6px 0 #e6d6b6;color:var(--burgundy)}
.cell.flip svg{width:60%;height:60%}
.cell.done svg{width:56%;height:56%;color:#fff}
.cell.done{background:var(--mint);box-shadow:0 6px 0 var(--mint-deep);opacity:.65}
.opt{border:0;border-radius:18px;background:#fff;box-shadow:0 6px 0 #e6d6b6;padding:14px;display:grid;place-items:center;
  font-weight:800;font-size:1.1rem;color:var(--ink);min-height:76px}
.opt svg{width:48px;height:48px}.opt:active{transform:translateY(3px)}
.opt.good{background:var(--mint);color:#fff;box-shadow:0 6px 0 var(--mint-deep)}
.opt.bad{background:var(--burgundy);color:#fff;box-shadow:0 6px 0 var(--burgundy-deep)}

/* палитра раскраски */
.palette{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:440px}
.sw{width:40px;height:40px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 0 rgba(0,0,0,.15);transition:transform .1s}
.sw.on{transform:scale(1.18);outline:3px solid var(--gold)}
.tools{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* награда / звезда / конфетти */
.win{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:22px;
  background:rgba(40,28,12,.55)}
.win.open{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.win__box{background:var(--card);border-radius:30px;padding:26px 22px;text-align:center;max-width:360px;width:100%;
  box-shadow:0 18px 0 var(--gold-deep),0 30px 50px -20px #000;animation:pop .45s var(--ease) both}
.win__star{font-size:3.4rem;color:var(--sun);filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));animation:spin 1s var(--ease)}
@keyframes spin{from{transform:rotate(-25deg) scale(.4)}to{transform:none}}
.win__box h3{font-family:var(--brand);color:var(--burgundy);font-size:1.7rem;margin:6px 0}
.win__box p{color:var(--ink-soft);font-weight:600;margin-bottom:16px}
.win__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:61;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:11px;height:15px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* родительская зона / промо */
.pmodal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(40,28,12,.55)}
.pmodal.open{display:flex}
.pmodal__box{background:var(--card);border-radius:26px;padding:24px 20px;max-width:420px;width:100%;
  box-shadow:0 16px 0 var(--green-deep),0 30px 50px -20px #000;max-height:90vh;overflow:auto}
.pmodal__box h3{font-family:var(--brand);color:var(--green-deep);font-size:1.5rem;margin-bottom:4px}
.pmodal__box p{color:var(--ink-soft);font-weight:600;font-size:.95rem;margin-bottom:14px}
.pmodal__x{float:right;border:0;background:none;font-size:1.6rem;color:var(--ink-soft);line-height:1}
.pf__in{width:100%;border:3px solid var(--line);border-radius:16px;padding:.7em 1em;font-family:var(--ui);
  font-weight:600;font-size:1rem;margin-bottom:10px;background:#fff}
.pf__in:focus{outline:none;border-color:var(--green)}
.pf__cons{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;color:var(--ink-soft);font-weight:600;margin-bottom:12px}
.pf__msg{font-weight:700;margin-top:8px}.pf__msg.err{color:var(--burgundy)}
.promo{text-align:center;background:#fff;border-radius:18px;padding:16px;box-shadow:0 6px 0 #e6d6b6}
.promo__code{font-family:var(--brand);font-size:1.8rem;color:var(--burgundy);border:3px dashed var(--gold);border-radius:14px;
  padding:.3em .6em;background:var(--paper);cursor:pointer;display:inline-block;margin:6px 0}
.promo__reward{font-weight:800;color:var(--green-deep)}.promo__how{font-size:.82rem;color:var(--ink-soft);margin-top:8px}
.link{color:var(--green-deep);text-decoration:underline;font-weight:700}

/* подвал */
.foot{text-align:center;padding:22px 16px 30px;color:var(--muted);font-size:.82rem;font-weight:600}
.foot a{color:var(--green-deep);font-weight:700}
.foot__row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}

/* кнопка «Родителям» — детский clay-стиль */
.parentbtn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;font-family:var(--ui);font-weight:800;font-size:.9rem;color:#5a3d12;
  background:var(--sun);padding:.5em 1.05em;box-shadow:0 5px 0 var(--gold-deep);transition:transform .12s var(--ease)}
.parentbtn svg{flex:none}
.parentbtn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold-deep)}
.top__brand img{height:40px}

/* плашка cookie */
.cookie{position:fixed;left:10px;right:10px;bottom:10px;z-index:80;display:none;gap:10px 14px;align-items:center;
  flex-wrap:wrap;justify-content:center;background:#fff;border-radius:22px;padding:13px 16px;max-width:640px;margin:0 auto;
  box-shadow:0 10px 0 var(--line),0 20px 36px -16px var(--shadow)}
.cookie.show{display:flex;animation:pop .4s var(--ease)}
.cookie__t{font-weight:600;font-size:.88rem;color:var(--ink-soft);flex:1;min-width:200px}
.cookie__t b{color:var(--green-deep)}
.cookie .link{cursor:pointer;border:0;background:none;font:inherit}
@media(max-width:520px){.cookie__btn{width:100%}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}