/* PianoAlegre age themes. Each pack sets colours, shapes, type and background art.
   Artwork: /themes/<pack>/bg.webp, bg-mobile.webp, hero.webp, mascot.webp, empty.webp, games.webp.
   Missing files simply fall back to the gradients below. */

/* ---------- Малыши 4–6: bright, round, big touch targets ---------- */
body.theme-tots{--ink:#2b2a6b;--muted:#6b6a9a;--cream:#fff7df;--paper:#fffdf6;--coral:#ff7a59;--mint:#4cc9a6;--sun:#ffc93c;--sky:#5bc0eb;--line:#f1e3c3;--radius:30px;
  font-size:18px;font-family:"Arial Rounded MT Bold","Varela Round","Trebuchet MS",system-ui,sans-serif;
  background:url(/themes/tots/bg.webp) center/cover fixed no-repeat,radial-gradient(circle at 12% 18%,#ffe38a 0 70px,transparent 71px),radial-gradient(circle at 88% 30%,#b9ecff 0 90px,transparent 91px),radial-gradient(circle at 70% 88%,#ffd0c2 0 110px,transparent 111px),#fff7df}
body.theme-tots .btn{border-radius:22px;padding:15px 22px;font-size:17px}
body.theme-tots .card,body.theme-tots .mission{border-radius:28px;border-width:2px}
body.theme-tots .student-welcome{background:linear-gradient(125deg,#ffe8a3,#c8f1ff)}
body.theme-tots .student-welcome h1,body.theme-tots h1,body.theme-tots h2{font-family:inherit;letter-spacing:-.01em}
body.theme-tots .game-card{border-radius:30px;border:3px solid #ffe08a}
body.theme-tots .mobile-nav button{font-size:20px}

/* ---------- Дети 7–9: the current warm look, with its own art ---------- */
body.theme-kids{background:url(/themes/kids/bg.webp) center/cover fixed no-repeat,radial-gradient(circle at 10% 10%,rgba(245,188,78,.16),transparent 32%),var(--cream)}

/* ---------- Подростки 10–12: cooler, sharper, game-like, not childish ---------- */
body.theme-teens{--ink:#1d2340;--muted:#5d6687;--cream:#eef1fb;--paper:#ffffff;--coral:#6c5ce7;--mint:#00b894;--sun:#fdcb6e;--sky:#0984e3;--line:#dde2f2;--radius:16px;
  font-family:"Segoe UI",Inter,system-ui,sans-serif;
  background:url(/themes/teens/bg.webp) center/cover fixed no-repeat,linear-gradient(160deg,#eef1fb 0%,#e3e8ff 55%,#f3ecff 100%)}
body.theme-teens h1,body.theme-teens h2,body.theme-teens .student-welcome h1{font-family:inherit;font-weight:900;letter-spacing:-.03em}
body.theme-teens .student-welcome{background:linear-gradient(125deg,#dfe4ff,#e9ddff)}
body.theme-teens .btn{border-radius:12px}
body.theme-teens .card,body.theme-teens .mission,body.theme-teens .game-card{border-radius:16px}
body.theme-teens .lesson-orbit{background:conic-gradient(var(--coral) 0 var(--p,35%),#e3e7f7 0)}

/* ---------- 13+ и взрослые: calm, minimal, grown-up ---------- */
body.theme-adult{--ink:#22262a;--muted:#6b7177;--cream:#f4f2ee;--paper:#ffffff;--coral:#b5654a;--mint:#6f9a8d;--sun:#c9a24a;--sky:#5d7f99;--line:#e4e0d8;--radius:12px;--shadow:0 6px 24px rgba(0,0,0,.06);
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  background:url(/themes/adult/bg.webp) center/cover fixed no-repeat,linear-gradient(180deg,#f7f5f1,#efece6)}
body.theme-adult h1,body.theme-adult .student-welcome h1{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.02em}
body.theme-adult .student-welcome{background:#fff;border:1px solid var(--line)}
body.theme-adult .btn{border-radius:10px;box-shadow:none}
body.theme-adult .card,body.theme-adult .mission,body.theme-adult .game-card{border-radius:12px;box-shadow:none}
body.theme-adult .game-icon,body.theme-adult .intro-icon{animation:none}
body.theme-adult .sticker span{filter:grayscale(.3)}

/* ---------- Shared art slots (empty until the artwork is added) ---------- */
body[data-theme] .student-welcome{position:relative;overflow:hidden}
body[data-theme] .student-welcome:after{content:"";position:absolute;right:-10px;bottom:-10px;width:min(42%,420px);height:100%;background:var(--hero-art) right bottom/contain no-repeat;pointer-events:none;opacity:.95}
body.theme-tots{--hero-art:url(/themes/tots/hero.webp)}
body.theme-kids{--hero-art:url(/themes/kids/hero.webp)}
body.theme-teens{--hero-art:url(/themes/teens/hero.webp)}
body.theme-adult{--hero-art:url(/themes/adult/hero.webp)}
body[data-theme] .student-welcome>*{position:relative;z-index:1}
body[data-theme] .game-grid{position:relative}
body.theme-tots .page-head,body.theme-kids .page-head,body.theme-teens .page-head,body.theme-adult .page-head{position:relative}
@media(max-width:700px){
  body.theme-tots{background-image:url(/themes/tots/bg-mobile.webp),radial-gradient(circle at 12% 18%,#ffe38a 0 50px,transparent 51px),radial-gradient(circle at 80% 70%,#b9ecff 0 70px,transparent 71px)}
  body.theme-kids{background-image:url(/themes/kids/bg-mobile.webp)}
  body.theme-teens{background-image:url(/themes/teens/bg-mobile.webp),linear-gradient(160deg,#eef1fb,#f3ecff)}
  body.theme-adult{background-image:url(/themes/adult/bg-mobile.webp),linear-gradient(180deg,#f7f5f1,#efece6)}
  body[data-theme] .student-welcome:after{width:55%;opacity:.35}
}
.theme-pick{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px}
.theme-pick select{border:1px solid var(--line);border-radius:10px;padding:7px;background:white}

/* ---------- Remaining art slots: games banner, mascot on the result screen, "nothing here yet" ---------- */
body.theme-tots{--games-art:url(/themes/tots/games.webp);--mascot-art:url(/themes/tots/mascot.webp);--empty-art:url(/themes/tots/empty.webp)}
body.theme-kids{--games-art:url(/themes/kids/games.webp);--mascot-art:url(/themes/kids/mascot.webp);--empty-art:url(/themes/kids/empty.webp)}
body.theme-teens{--games-art:url(/themes/teens/games.webp);--mascot-art:url(/themes/teens/mascot.webp);--empty-art:url(/themes/teens/empty.webp)}
body.theme-adult{--games-art:url(/themes/adult/games.webp);--mascot-art:url(/themes/adult/mascot.webp);--empty-art:url(/themes/adult/empty.webp)}
body[data-theme] .games-banner{min-height:190px;background-color:transparent}
body[data-theme] .finish-stage:before{content:"";display:block;width:130px;height:130px;margin:0 auto 4px;background:var(--mascot-art) center/contain no-repeat;animation:mascotPop .6s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mascotPop{from{transform:scale(.4) translateY(20px);opacity:0}to{transform:none;opacity:1}}
body[data-theme] .empty:before{content:"";display:block;height:120px;margin:0 auto 8px;background:var(--empty-art) center/contain no-repeat}
@media(max-width:700px){body[data-theme] .games-banner{min-height:150px;background-position:70% center}body[data-theme] .finish-stage:before{width:96px;height:96px}body[data-theme] .empty:before{height:90px}}
@media(prefers-reduced-motion:reduce){body[data-theme] .finish-stage:before{animation:none}}
/* keep the progress ring beside the hero picture, not on top of it */
@media(min-width:901px){body[data-theme] .student-welcome{grid-template-columns:1fr 190px min(30%,300px)}}
@media(max-width:700px){body[data-theme] .games-banner{background:linear-gradient(90deg,rgba(255,253,248,.94) 0 45%,rgba(255,253,248,0) 85%),var(--games-art) 75% center/cover no-repeat}}

/* ---------- Title (login) page: the look of the student whose lesson is now; neutral otherwise ---------- */
.login-art{background:url(/themes/adult/bg.webp) right bottom/cover no-repeat,#f4f2ee}
body.theme-tots .login-art{background:url(/themes/tots/bg.webp) center/cover no-repeat}
body.theme-kids .login-art{background:url(/themes/kids/bg.webp) center/cover no-repeat}
body.theme-teens .login-art{background:url(/themes/teens/bg.webp) center/cover no-repeat}
body.theme-adult .login-art{background:url(/themes/adult/bg.webp) center/cover no-repeat}
.login-art{position:relative;overflow:hidden}
body[data-login]:not([data-login="neutral"]) .login-art:after{content:"";position:absolute;right:0;bottom:0;height:86%;aspect-ratio:4/3;background:var(--hero-art) right bottom/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(to bottom,transparent 6%,#000 27%);mask-image:linear-gradient(to bottom,transparent 6%,#000 27%);animation:loginArtIn .8s ease both}
@keyframes loginArtIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}