/* Eco Kids — оформление сайта. Разметка: ../index.html, логика: ../js/app.js */

/* ============ tokens ============ */
:root{
  --paper:#F6F6F1;
  --card:#FFFFFF;
  --sunk:#EFEFE8;
  --ink:#101310;
  --mute:#6C7167;
  --line:#E3E3D9;
  --line-2:#D3D3C7;
  --acc:#14653A;
  --acc-soft:#E7F0E9;
  --bad:#A63A29;
  --bad-soft:#F8EBE7;
  --r:16px;
  --rs:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B0C09; --card:#131510; --sunk:#181A14; --ink:#EEF0E8; --mute:#969C8E;
    --line:#242720; --line-2:#333729; --acc:#68C48C; --acc-soft:#16261C;
    --bad:#E0785F; --bad-soft:#2B1712; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B0C09; --card:#131510; --sunk:#181A14; --ink:#EEF0E8; --mute:#969C8E;
  --line:#242720; --line-2:#333729; --acc:#68C48C; --acc-soft:#16261C;
  --bad:#E0785F; --bad-soft:#2B1712; color-scheme:dark;
}

/* ============ base ============ */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.dsp{font-family:"Onest","Inter",system-ui,sans-serif;font-weight:500;margin:0;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(36px,6.6vw,74px);letter-spacing:-.04em}
h2{font-size:clamp(25px,3.6vw,40px)}
h3{font-size:17px;letter-spacing:-.02em;line-height:1.3}
p{margin:0}
a{color:inherit}
svg{display:block}
button{font-family:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{max-width:1060px;margin-inline:auto;padding-inline:22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding-block:clamp(54px,7.5vw,104px);scroll-margin-top:72px}
section + section{border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.eyebrow{font:500 11px/1 "Onest",sans-serif;letter-spacing:.17em;text-transform:uppercase;color:var(--mute)}
.lede{color:var(--mute);font-size:clamp(15px,1.5vw,17.5px);max-width:62ch}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,46px);max-width:70ch}

/* ============ buttons ============ */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;
   border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);
   font:500 14.5px/1 "Inter",sans-serif;cursor:pointer;text-decoration:none;white-space:nowrap;
   transition:background .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}
.b:hover{border-color:var(--ink)}
.b-fill{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.b-fill:hover{opacity:.86}
.b-ok{background:var(--acc);border-color:var(--acc);color:#fff}
:root[data-theme="dark"] .b-ok,:root:not([data-theme="light"]) .b-ok{color:#0B0C09}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .b-ok{color:#fff}}
.b-ok:hover{opacity:.88}
.b-bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.b-bad:hover{background:var(--bad-soft);border-color:var(--bad)}
.b-s{height:38px;padding:0 15px;font-size:13.5px}
.b:disabled{opacity:.4;cursor:not-allowed}
.link{background:none;border:0;padding:0;cursor:pointer;font:500 13px/1 "Inter",sans-serif;color:var(--mute);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--ink)}

/* ============ header ============ */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
     backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font:500 14px/1 "Onest",sans-serif;letter-spacing:-.02em;white-space:nowrap}
.brand svg{width:19px;height:19px;stroke:var(--acc);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* .wrap всё равно упирается в 1060px, поэтому меню компактно на любой ширине */
.nav{display:flex;gap:15px;margin-inline:auto;font-size:13.5px;color:var(--mute)}
.nav a{text-decoration:none}
.nav a:hover{color:var(--ink)}
@media (max-width:860px){.nav{display:none}}
.hud{display:flex;align-items:center;gap:8px;margin-left:auto;font:500 14px/1 "Onest",sans-serif}
.nav ~ .hud{margin-left:0}
.hud b{font-weight:500}
.hud i{font-style:normal;color:var(--mute);font-size:12px;font-family:"Inter",sans-serif}
.hud .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);border-radius:999px;padding:8px 13px;white-space:nowrap}
.hud .pill.due{border-color:var(--ink)}
/* ---- профиль в шапке ---- */
.who{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--card);
     border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;max-width:140px;flex:none}
.who:hover{border-color:var(--ink)}
.who-name{font:500 13px/1 "Inter",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-ava,.ava{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff}
.who-ava svg,.ava svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* имя в шапке — только когда для него правда есть место */
@media (max-width:1020px){.who-name{display:none}.who{padding:4px;max-width:none}}

/* ---- окно профилей ---- */
.who-list{display:grid;gap:10px}
.who-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;border:1px solid var(--line);
         border-radius:var(--rs);padding:12px 14px}
.who-row.on{border-color:var(--acc);background:var(--acc-soft)}
.who-row .ava{width:38px;height:38px}
.who-row .ava svg{width:20px;height:20px}
.who-info{flex:1 1 140px;min-width:0}
.who-info b{font:500 15px/1.25 "Onest",sans-serif;display:block;overflow-wrap:anywhere}
.who-info small{font-size:12px;color:var(--mute)}
.who-form{display:grid;gap:10px;border:1px solid var(--line);border-radius:var(--rs);padding:14px}
.who-form input{width:100%;min-width:0;font:400 14px/1 "Inter",sans-serif;padding:11px 14px;border-radius:12px;
                border:1px solid var(--line);background:var(--card);color:var(--ink)}
.who-form input:focus{outline:none;border-color:var(--acc)}
.avas{display:flex;flex-wrap:wrap;gap:8px}
.ava-pick{border:2px solid transparent;background:none;padding:2px;border-radius:50%;cursor:pointer;line-height:0}
.ava-pick.on{border-color:var(--ink)}
.ava-pick .ava{width:34px;height:34px}
.ava-pick .ava svg{width:18px;height:18px}

.tg{width:36px;height:36px;border-radius:999px;border:1px solid var(--line-2);background:none;display:grid;place-items:center;cursor:pointer;flex:none}
.tg svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tg:hover{border-color:var(--ink)}
.brand b{font-weight:500}
@media (max-width:1020px){
  .top .wrap{gap:10px}
  .nav{gap:14px;font-size:13px}
  .hud{gap:6px}
  .tg{width:32px;height:32px}
  .langs button{padding:6px 8px;font-size:11px}
}
@media (max-width:960px){.hud .pill i{display:none}}
/* на телефоне шапка держит шесть элементов, поэтому ужимается по шагам */
@media (max-width:560px){
  .top .wrap{gap:8px}
  .hud{gap:6px}
  .tg{width:32px;height:32px}
  .langs button{padding:6px 8px;font-size:11px}
  .hud .pill{padding:7px 11px}
}
@media (max-width:440px){
  .brand b{display:none}
  .langs{padding:2px}
  .langs button{padding:6px 6px;font-size:10.5px;letter-spacing:0}
}
@media (max-width:365px){
  .wrap{padding-inline:16px} /* на очень узких экранах поля уже */
  .top .wrap{gap:4px}
  .hud{gap:4px}
  .hud .pill{padding:7px 9px}
  .langs button{padding:4px 3px;font-size:10px;letter-spacing:-.01em}
  .tg{width:28px;height:28px}
  .who{padding:2px}
  .who-ava{width:24px;height:24px}
}

/* ============ hero ============ */
.hero{padding-block:clamp(48px,8vw,104px) clamp(38px,5vw,64px)}
.tri{font-size:12.5px;color:var(--mute);margin-bottom:26px}
.tri span{opacity:.45;padding-inline:7px}
.hero h1{max-width:15ch}
.hero .lede{margin-top:24px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
/* подсветка рисуется фоном, а не абсолютным блоком: переносится вместе со строкой
   и не создаёт горизонтальной прокрутки в любом языке */
.mark{
  background:linear-gradient(var(--acc-soft),var(--acc-soft)) 0 84% / 100% .32em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  padding-inline:.04em;
}

.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(38px,5vw,58px)}
@media (max-width:640px){.figures{grid-template-columns:1fr}}
.fig{background:var(--card);padding:22px 20px;display:grid;gap:5px}
.fig b{font:500 clamp(30px,4.4vw,44px)/1 "Onest",sans-serif;letter-spacing:-.04em}
.fig span{font-size:13px;color:var(--mute)}

/* ============ today ============ */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.today-grid{grid-template-columns:1fr}}
.live-stack{display:grid;gap:14px}
.live{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:clamp(18px,2.4vw,26px);display:grid;gap:18px}
.live.due{border-color:var(--ink)}
.live-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:baseline;justify-content:space-between}
.live-top h3{font-size:clamp(18px,2.2vw,22px)}
.live-top .day{font:500 13px/1 "Onest",sans-serif;color:var(--mute)}
.rule{font-size:13.5px;color:var(--mute);max-width:58ch}
.dots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}
.dot{height:38px;border-radius:8px;border:1px solid var(--line);background:var(--sunk);
     display:grid;place-items:center;font:500 11.5px/1 "Onest",sans-serif;color:var(--mute)}
.dot.ok{background:var(--acc);border-color:var(--acc);color:var(--card)}
.dot.bad{background:var(--bad);border-color:var(--bad);color:var(--card)}
.dot.now{border-color:var(--ink);border-width:1.5px;color:var(--ink)}
.dot.next{opacity:.55}
.live-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
          border-top:1px solid var(--line);padding-top:16px}
.live-act .row{display:flex;flex-wrap:wrap;gap:9px}
.clock{font:500 12.5px/1.4 "Onest",sans-serif;color:var(--mute)}
.clock b{color:var(--ink);font-weight:500}
.ok-line{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--acc)}
.ok-line svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.warn{background:var(--bad-soft);color:var(--bad);border-radius:var(--rs);padding:14px 16px;font-size:13.5px;line-height:1.5}
.warn b{font-weight:600}
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(24px,4vw,42px);display:grid;gap:14px;justify-items:start}
.empty h3{font-size:clamp(19px,2.4vw,24px)}
.empty p{color:var(--mute);font-size:14.5px;max-width:48ch}

.side{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:20px;display:grid;gap:16px}
.side h3{font-size:14px}
.log{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.log li{display:grid;grid-template-columns:auto 1fr;gap:10px;font-size:13px;line-height:1.45}
.log time{color:var(--mute);font:500 11.5px/1.6 "Onest",sans-serif;white-space:nowrap}
.log em{font-style:normal;color:var(--mute)}
.log b{font-weight:500}
.log .t-done b{color:var(--acc)}
.log .t-fail b{color:var(--bad)}

/* ============ challenge list ============ */
.list{border-top:1px solid var(--line)}
.item{border-bottom:1px solid var(--line)}
.item-head{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:20px 2px;
           display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:16px;align-items:center}
.item-head:hover h3{color:var(--acc)}
.item-n{font:500 12px/1 "Onest",sans-serif;color:var(--mute)}
.item-main{display:grid;gap:5px;min-width:0}
.item-meta{font-size:13px;color:var(--mute)}
.item-meta span{opacity:.45;padding-inline:6px}
.tail{display:flex;align-items:center;gap:14px}
.st{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font:500 12.5px/1 "Inter",sans-serif;border:1px solid var(--line-2);color:var(--mute);white-space:nowrap}
.st.live{border-color:var(--ink);color:var(--ink)}
.st.done{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
.st.fail{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.pts{font:500 13px/1 "Onest",sans-serif;color:var(--mute);min-width:42px;text-align:right}
.chev{width:16px;height:16px;stroke:var(--mute);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.item.open .chev{transform:rotate(180deg)}
@media (max-width:620px){
  .item-head{grid-template-columns:28px minmax(0,1fr);gap:12px;padding:17px 2px}
  .tail{grid-column:1 / -1;justify-content:space-between;padding-left:40px}
}
.item-body{display:none;padding:0 2px 24px 50px;max-width:74ch}
.item.open .item-body{display:grid;gap:16px}
@media (max-width:620px){.item-body{padding-left:40px}}
.item-body p{font-size:14.5px;color:var(--mute)}
.item-body .facts{display:flex;flex-wrap:wrap;gap:8px}
.tagline{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--mute)}
.body-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.failnote{background:var(--bad-soft);border-radius:var(--rs);padding:13px 15px;font-size:13.5px;color:var(--bad)}
.donenote{background:var(--acc-soft);border-radius:var(--rs);padding:13px 15px;font-size:13.5px;color:var(--acc)}

/* ============ how ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}
.step{background:var(--card);padding:24px 20px;display:grid;gap:8px;align-content:start;min-height:170px}
.step b{font:500 12px/1 "Onest",sans-serif;color:var(--mute);letter-spacing:.1em}
.step h3{margin-top:6px}
.step p{font-size:13.5px;color:var(--mute)}
.honest{margin-top:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:clamp(22px,3vw,34px);display:grid;gap:16px}
.honest h3{font-size:clamp(19px,2.3vw,24px);max-width:24ch}
.honest ul{margin:0;padding:0;list-style:none;display:grid;gap:11px;max-width:66ch}
.honest li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:14.5px;color:var(--mute)}
.honest li svg{width:16px;height:16px;margin-top:4px;stroke:var(--ink);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.honest li b{color:var(--ink);font-weight:500}

/* ============ badges ============ */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.badges{grid-template-columns:repeat(2,1fr)}}
.badge{background:var(--card);padding:22px 18px;display:grid;gap:9px;align-content:start;min-height:150px;position:relative}
.badge .ic{width:34px;height:34px;border-radius:999px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--mute)}
.badge .ic svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.badge b{font:500 14.5px/1.3 "Inter",sans-serif}
.badge small{font-size:12.5px;color:var(--mute);line-height:1.45}
.badge.on .ic{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.badge.on b{color:var(--acc)}

/* ============ travel ============ */
.regions{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:860px){.regions{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.regions{grid-template-columns:repeat(2,1fr)}}
.reg{background:var(--card);border:0;padding:0;cursor:pointer;display:grid;gap:0;text-align:left;color:inherit}
.reg figure{margin:0;aspect-ratio:1;position:relative;overflow:hidden;background:var(--sunk)}
.reg figure svg{width:100%;height:100%}
.reg .cap{padding:13px 14px 16px;display:grid;gap:3px}
.reg b{font:500 13.5px/1.2 "Inter",sans-serif}
.reg small{font-size:11.5px;color:var(--mute)}
.reg.lock figure svg{filter:grayscale(1);opacity:.28}
.reg.lock b{color:var(--mute)}
.reg[aria-expanded="true"]{background:var(--sunk)}
.reg .need{position:absolute;inset:auto 0 0 0;padding:6px;text-align:center;font:500 11px/1 "Onest",sans-serif;color:var(--mute);background:color-mix(in srgb,var(--card) 82%,transparent)}
.reg-detail{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,26px);display:grid;gap:10px;background:var(--card)}
.reg-detail h3{font-size:19px}
.reg-detail p{font-size:14.5px;color:var(--mute);max-width:70ch}
.facts-list{list-style:none;counter-reset:f;margin:2px 0 0;padding:0;display:grid;gap:10px;max-width:74ch}
.facts-list li{counter-increment:f;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline;
               font-size:14.5px;line-height:1.5;border-top:1px solid var(--line);padding-top:10px}
.facts-list li:first-child{border-top:0;padding-top:0}
.facts-list li::before{content:counter(f);font:500 13px/1 "Onest",sans-serif;color:var(--acc);
                       font-variant-numeric:tabular-nums;min-width:14px}

/* ============ together ============ */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:700px){.vals{grid-template-columns:1fr}}
.val{background:var(--card);padding:24px 20px;display:grid;gap:7px}
.val b{font:500 15px/1.3 "Inter",sans-serif}
.val span{font-size:13.5px;color:var(--mute)}
.share{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.tag{font:500 clamp(22px,3vw,30px)/1 "Onest",sans-serif;letter-spacing:-.03em}
.share-row{display:flex;flex-wrap:wrap;gap:9px}

.foot{border-top:1px solid var(--line);padding-block:44px 56px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between}
.foot .dsp{font-size:clamp(20px,2.6vw,28px)}
.foot small{font-size:12.5px;color:var(--mute)}

/* ============ dialog / toast ============ */
dialog{border:0;padding:0;background:transparent;max-width:min(460px,92vw);width:100%;color:var(--ink)}
dialog::backdrop{background:rgb(10 12 9 / .5)}
.ask{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:grid;gap:16px}
.ask h3{font-size:21px}
.ask p{font-size:14.5px;color:var(--mute)}
.ask .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:4px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:80;
       background:var(--ink);color:var(--paper);border-radius:999px;padding:13px 22px;
       font:500 14px/1 "Inter",sans-serif;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
       max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ language switch ============ */
.langs{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:999px;padding:3px;flex:none}
.langs button{border:0;background:none;cursor:pointer;border-radius:999px;padding:6px 9px;
              font:500 11.5px/1 "Onest",sans-serif;letter-spacing:.04em;color:var(--mute)}
.langs button:hover{color:var(--ink)}
.langs button.on{background:var(--ink);color:var(--paper)}

/* ============ clicker game ============ */
.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:1px;background:var(--line);
      border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media (max-width:820px){.game{grid-template-columns:1fr}}
.game-main{background:var(--card);padding:clamp(20px,3vw,34px);display:grid;gap:16px;justify-items:center;position:relative;overflow:hidden}
.pile{border:0;background:none;padding:0;cursor:pointer;width:min(232px,58vw);aspect-ratio:1;
      transition:transform .09s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.pile svg{width:100%;height:100%;transform-origin:50% 64%;animation:sway 3.4s ease-in-out infinite alternate}
.pile:hover{transform:scale(1.03)}
.pile:active{transform:scale(.93)}
/* контейнер плавно качается от -25° до 25° */
@keyframes sway{ from{ transform:rotate(-25deg) } to{ transform:rotate(25deg) } }
.pile.hit svg{animation:sway 3.4s ease-in-out infinite alternate, nudge .22s ease-out}
@keyframes nudge{ 0%{ scale:1 } 40%{ scale:.9 1.08 } 100%{ scale:1 } }
.ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
      border:2px solid var(--acc);pointer-events:none;animation:ring .7s ease-out forwards}
@keyframes ring{ from{ transform:scale(.45); opacity:.75 } to{ transform:scale(1.9); opacity:0 } }
.pile-cap{font:500 13px/1.4 "Inter",sans-serif;color:var(--mute);text-align:center;max-width:36ch}
.fly{position:absolute;pointer-events:none;font:500 15px/1 "Onest",sans-serif;color:var(--acc);
     animation:fly .75s ease-out forwards;font-variant-numeric:tabular-nums;z-index:2}
@keyframes fly{to{transform:translateY(-58px);opacity:0}}
.game-side{background:var(--card);padding:clamp(20px,3vw,26px);display:grid;gap:14px;align-content:start;min-width:0}
/* строки статистики: и подпись, и число обязаны уметь ужиматься,
   иначе длинное число вылезает за колонку и срезается скруглением блока */
.gstat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;
       border-bottom:1px solid var(--line);padding-bottom:12px}
.gstat > span{font-size:13px;color:var(--mute);min-width:0;flex:1 1 auto;overflow-wrap:anywhere}
.gstat b{font:500 clamp(18px,2.2vw,25px)/1.1 "Onest",sans-serif;letter-spacing:-.03em;
         font-variant-numeric:tabular-nums;text-align:right;min-width:0;flex:0 1 auto;overflow-wrap:anywhere}
.gstat.small b{font-size:15px}
/* кнопки в колонке переносят подпись, а не выталкивают её за край */
.game-side .b{width:100%;white-space:normal;height:auto;min-height:46px;padding:11px 16px;line-height:1.3;text-align:center}
.game-note{font-size:12.5px;color:var(--mute);line-height:1.5}

/* ============ карточки игр ============ */
.arcades{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:900px){.arcades{grid-template-columns:1fr}}
.arcade{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
        border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:clamp(16px,2.4vw,22px)}
@media (max-width:1020px) and (min-width:901px){.arcade{grid-template-columns:1fr;justify-items:start}}
@media (max-width:560px){.arcade{grid-template-columns:1fr;justify-items:start}}
.arcade-art svg{width:132px;height:88px}
.arcade-main{min-width:0;display:grid;gap:6px}
.arcade-main h3{font-size:clamp(18px,2.2vw,22px)}
.arcade-main p{font-size:13.5px;color:var(--mute);max-width:56ch}
.arcade-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
.arcade-best{font-size:13px;color:var(--mute)}
.arcade-best b{font:500 17px/1 "Onest",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;margin-left:6px}

/* ============ игра «Отходы» ============ */
.w-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.hearts{display:flex;gap:5px}
.hearts svg{width:22px;height:22px;fill:var(--bad);stroke:none}
.hearts svg.off{fill:none;stroke:var(--line-2);stroke-width:1.8}
.w-score{font:500 15px/1 "Onest",sans-serif;font-variant-numeric:tabular-nums;color:var(--mute)}
.w-score b{color:var(--ink);font-size:20px;margin-left:6px}
.w-item{background:var(--sunk);border-radius:var(--r);padding:16px;display:grid;gap:10px;justify-items:center;
        border:2px solid transparent;transition:border-color .18s ease,background .18s ease}
.w-item.good{border-color:var(--acc);background:var(--acc-soft)}
.w-item.bad{border-color:var(--bad);background:var(--bad-soft)}
.w-item svg{width:min(150px,44vw);height:min(150px,44vw)}
.w-item b{font:500 17px/1.25 "Onest",sans-serif;text-align:center}
.w-ask{font-size:13px;color:var(--mute);text-align:center}
.bins3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bin3{cursor:pointer;border:2px solid var(--line);background:var(--card);border-radius:var(--rs);
      padding:14px 8px;display:grid;gap:7px;justify-items:center;color:var(--ink);
      font:500 13px/1.2 "Onest",sans-serif;transition:transform .12s ease,border-color .12s ease}
.bin3:hover:not(:disabled){transform:translateY(-3px)}
.bin3 svg{width:28px;height:28px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bin3.organic{border-color:#5FA83E} .bin3.organic svg{stroke:#5FA83E}
.bin3.paper{border-color:#3FA0C6} .bin3.paper svg{stroke:#3FA0C6}
.bin3.plastic{border-color:#E0B93F} .bin3.plastic svg{stroke:#C99B1F}
.bin3.show{background:var(--acc-soft)}
.w-msg{text-align:center;font:500 14px/1.4 "Inter",sans-serif;min-height:20px}
.w-msg.good{color:var(--acc)} .w-msg.bad{color:var(--bad)}

/* ============ игра «Вырасти дерево» ============ */
.t-top{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.t-stage{font:500 15px/1 "Onest",sans-serif}
.t-stage b{color:var(--acc)}
.field{position:relative;height:clamp(260px,52vw,320px);border-radius:var(--r);overflow:hidden;
       border:1px solid var(--line);background:linear-gradient(var(--sky-top,#DCEBF3) 0 62%,#8FAE72 62% 100%)}
:root[data-theme="dark"] .field,:root:not([data-theme="light"]) .field{background:linear-gradient(#16283A 0 62%,#2C4430 62% 100%)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .field{background:linear-gradient(#DCEBF3 0 62%,#8FAE72 62% 100%)}}
.field .tree{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:46%;height:82%}
.drop{position:absolute;width:56px;height:56px;border:0;background:none;padding:0;cursor:pointer;
      transform:translate(-50%,-50%);animation:pop .22s ease-out}
.drop svg{width:100%;height:100%;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .18))}
.drop:active{scale:.9}
@keyframes pop{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
.drop.gone{animation:fade .18s ease-in forwards}
@keyframes fade{to{opacity:0;scale:.6}}
.t-bar{height:10px;border-radius:999px;background:var(--sunk);overflow:hidden}
.t-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--acc);transition:width .25s ease}
.t-end{display:grid;gap:8px;justify-items:center;text-align:center;background:var(--sunk);
       border-radius:var(--r);padding:20px}
.t-end.bad{background:var(--bad-soft)}
.t-end b{font:500 18px/1.25 "Onest",sans-serif}
.t-end p{font-size:13.5px;color:var(--mute);max-width:44ch}

/* ============ двери ============ */
.doors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;min-width:0}
.doors .door{flex:1 1 170px;max-width:230px;margin-top:0;min-width:0}
/* на очень узком экране двери встают одна под другой */
@media (max-width:430px){
  .doors{flex-direction:column;align-items:stretch}
  .doors .door{max-width:none}
}
.door{margin-top:6px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);
      padding:14px 18px 16px;display:grid;gap:8px;justify-items:center;cursor:pointer;color:inherit;
      transition:transform .16s ease,border-color .16s ease}
.door:hover{transform:translateY(-3px);border-color:var(--acc)}
.door svg{width:76px;height:95px}
.door-sign{font:500 11px/1.2 "Onest",sans-serif;letter-spacing:.12em;text-transform:uppercase;
           color:var(--card);background:var(--ink);border-radius:999px;padding:6px 12px;text-align:center;
           max-width:100%;overflow-wrap:anywhere}
.door-hint{font-size:12.5px;color:var(--mute)}

/* ============ комната обмена ============ */
dialog#shop{max-width:min(620px,94vw)}
.shop{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      padding:clamp(18px,3vw,26px);display:grid;gap:18px;max-height:min(88vh,860px);overflow-y:auto}
.shop-head{display:flex;align-items:flex-start;gap:12px}
.shop-head > div{flex:1;min-width:0}
.shop-head h3{font-size:21px;min-width:0;overflow-wrap:anywhere}
.shop-head p{font-size:13px;color:var(--mute);margin-top:5px;overflow-wrap:anywhere}
.desk{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
      background:var(--sunk);border-radius:var(--rs);padding:16px}
@media (max-width:480px){.desk{grid-template-columns:1fr;justify-items:center;text-align:center}}
.desk svg{width:84px;height:84px;flex:none}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
        font-size:14px;line-height:1.5;position:relative;min-width:0}
.rates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.rates{grid-template-columns:1fr}}
.rate{border:1px solid var(--line);border-radius:var(--rs);padding:14px;display:grid;gap:10px;align-content:start}
.rate b{font:500 15px/1.25 "Onest",sans-serif}
.rate small{font-size:12.5px;color:var(--mute);line-height:1.45}
.rate .b{width:100%;white-space:normal;height:auto;min-height:44px;line-height:1.3;padding:10px 14px}
.purse{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;
       border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 2px;
       font-size:13px;color:var(--mute)}
.purse b{font:500 17px/1 "Onest",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;
         margin-left:8px;overflow-wrap:anywhere}
.shop > *{min-width:0}
.helper{display:grid;gap:11px;min-width:0}
.helper h4{font:500 14px/1.3 "Onest",sans-serif;margin:0}
.qs{display:flex;flex-wrap:wrap;gap:7px}
.q{cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);
   border-radius:999px;padding:7px 12px;font:400 12.5px/1 "Inter",sans-serif;text-align:left}
.q:hover{border-color:var(--acc);color:var(--acc)}
/* на узком экране поле и кнопка встают в две строки, а не выпирают за диалог */
.ask-row{display:flex;gap:8px;flex-wrap:wrap}
.ask-row .b{flex:0 0 auto}
.ask-row input{flex:1 1 150px;min-width:0;width:100%;font:400 14px/1 "Inter",sans-serif;padding:11px 14px;border-radius:12px;
               border:1px solid var(--line);background:var(--card);color:var(--ink)}
.ask-row input:focus{outline:none;border-color:var(--acc)}
.answer{background:var(--acc-soft);border-radius:var(--rs);padding:13px 15px;font-size:13.5px;line-height:1.55}
.answer b{font-weight:600}

/* ============ магазин «Астана» и сертификаты ============ */
.spend{display:grid;gap:10px;border:1px solid var(--line);border-radius:var(--rs);padding:14px}
.spend-row{display:flex;flex-wrap:wrap;gap:8px}
.spend-row input{flex:1 1 130px;min-width:0;font:500 16px/1 "Onest",sans-serif;padding:11px 14px;border-radius:12px;
                 border:1px solid var(--line);background:var(--card);color:var(--ink);font-variant-numeric:tabular-nums}
.spend-row input:focus{outline:none;border-color:var(--acc)}
.spend-row .b{flex:0 0 auto}
.spend .warn-line{font-size:13px;color:var(--bad)}
.spend .ok-line{font-size:13px;color:var(--acc)}
.certs{display:grid;gap:10px}
.cert{border:1px solid var(--line-2);border-radius:var(--rs);padding:14px 16px;background:var(--card);
      display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;position:relative;overflow:hidden}
.cert::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc)}
.cert.auto::before{background:var(--sun,#D8A63C)}
.cert-main{min-width:0}
.cert-main b{font:500 15px/1.25 "Onest",sans-serif;display:block}
.cert-main small{font-size:12px;color:var(--mute)}
.cert-pts{font:500 20px/1 "Onest",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.cert-seal{font:500 10px/1 "Onest",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.certs-empty{font-size:13.5px;color:var(--mute)}

/* ============ reveal (включается только при живом JS) ============ */
.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.anim .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}