/* ===== Собери сдачу — стили ===== */

:root{
  --bg1:#FFF6E5;
  --bg2:#FFE3F1;
  --accent:#FF7A59;
  --accent2:#4EC5F1;
  --ok:#3BC97D;
  --err:#FF5A6E;
  --text:#2E2A4F;
  --card:#FFFFFF;
  --wood:#C98A4B;
  --wood-dark:#A96C35;
  /* переменные сцены (перекрываются темой в body[data-scene]) */
  --wall1:#FFF3DE;
  --wall2:#FFE0BE;
  --floor:#D9A76A;
  --floor2:#C08A4E;
  --rack:#B9763C;
  --sign-bg:#FFFFFF;
  --sign-text:#8a5a20;
  --shadow:0 10px 24px rgba(46,42,79,.14);
  --radius:22px;
}

*{ box-sizing:border-box; }

/* атрибут hidden должен побеждать любые display из этого файла */
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: "Naukino Emoji", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:18px;
  color:var(--text);
  background:linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment:fixed;
  min-height:100%;
  -webkit-text-size-adjust:100%;
}

.app{
  max-width:980px;
  margin:0 auto;
  padding:14px 12px 40px;
  user-select:none;
  -webkit-user-select:none;
}

/* ---------- Экраны ---------- */
.screen{ display:none; }
.screen.is-active{ display:block; animation:fadeIn .35s ease both; }

@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(14px, 3vw, 26px);
  margin-top:12px;
}

.title{
  margin:.1em 0 .05em;
  font-size:clamp(28px, 6vw, 44px);
  text-align:center;
  color:var(--accent);
  letter-spacing:.5px;
}
.subtitle{ margin:0 0 10px; text-align:center; color:#7d789e; font-size:clamp(16px,3vw,20px); }
.rules{ text-align:center; font-size:clamp(16px,2.6vw,19px); line-height:1.45; margin:12px auto; max-width:640px; }
.section-title{ text-align:center; font-size:clamp(19px,3vw,23px); margin:18px 0 10px; }
.logo{ font-size:clamp(48px,12vw,80px); text-align:center; line-height:1; animation:floaty 3s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---------- Кнопки ---------- */
.btn{
  font:inherit;
  font-weight:800;
  border:none;
  border-radius:20px;
  padding:14px 22px;
  cursor:pointer;
  color:#fff;
  background:var(--accent);
  box-shadow:0 6px 0 rgba(0,0,0,.13);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s ease;
  min-height:52px;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.13); }
.btn--play{ display:block; width:100%; max-width:360px; margin:16px auto 6px; font-size:clamp(20px,3.6vw,24px); }
.btn--pay{ display:block; width:100%; max-width:420px; margin:14px auto 0; background:var(--ok); font-size:clamp(19px,3.4vw,23px); }
.btn--next{ display:block; width:100%; max-width:360px; margin:16px auto 0; background:var(--accent2); font-size:clamp(19px,3.4vw,23px); animation:pop .3s ease both; }
.btn--ghost{ background:#EFEDF8; color:var(--text); box-shadow:0 4px 0 rgba(0,0,0,.08); }
.btn:disabled{ opacity:.5; cursor:default; box-shadow:0 4px 0 rgba(0,0,0,.10); }
.btn:disabled:hover{ filter:none; }
.btn:disabled:active{ transform:none; }
.btn--small{ padding:10px 16px; font-size:16px; min-height:44px; border-radius:16px; }

@keyframes pop{ from{transform:scale(.85); opacity:0} to{transform:scale(1); opacity:1} }

.icon-btn{
  font-size:22px;
  line-height:1;
  width:48px; height:48px;
  border-radius:16px;
  border:none;
  background:#fff;
  color:var(--text);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease;
}
.icon-btn:hover{ transform:scale(1.07); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn.is-off{ opacity:.5; }

.corner-tools{
  position:fixed;
  top:10px; right:10px;
  display:flex; gap:8px;
  z-index:50;
}

:focus-visible{
  outline:4px solid #7B61FF;
  outline-offset:3px;
}

/* ---------- Выбор сложности ---------- */
.diff-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
.diff-btn{
  font:inherit;
  cursor:pointer;
  border:4px solid #EDE9F7;
  background:#FBFAFF;
  border-radius:20px;
  padding:14px 10px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--text);
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.diff-btn:hover{ transform:translateY(-3px); }
.diff-btn.is-selected{ border-color:var(--accent); background:#FFF1EC; }
.diff-emoji{ font-size:30px; }
.diff-name{ font-weight:800; font-size:20px; }
.diff-note{ font-size:14px; color:#7d789e; text-align:center; }

.best{ text-align:center; color:#7d789e; font-size:16px; margin:10px 0 0; min-height:1.2em; }

/* ---------- Совёнок Наум ---------- */
.hero-panel{
  display:flex; align-items:center; gap:10px;
  background:#FFF7EE;
  border:3px solid #FFE0CE;
  border-radius:20px;
  padding:10px 12px;
  margin:14px 0;
}
.hero-art{ font-size:clamp(38px,8vw,54px); line-height:1; flex:0 0 auto; }
.hero-art.is-happy{ animation:heroJump .55s ease 2; }
.hero-art.is-sad{ animation:heroWobble .5s ease 2; }
@keyframes heroJump{ 0%,100%{transform:translateY(0) scale(1)} 40%{transform:translateY(-14px) scale(1.08)} }
@keyframes heroWobble{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 75%{transform:rotate(9deg)} }

.bubble{
  position:relative;
  background:#fff;
  border-radius:16px;
  padding:10px 14px;
  font-size:clamp(16px,2.7vw,19px);
  line-height:1.4;
  box-shadow:0 4px 10px rgba(46,42,79,.10);
  flex:1 1 auto;
}
.bubble::before{
  content:"";
  position:absolute; left:-9px; top:50%;
  width:0; height:0;
  transform:translateY(-50%);
  border:9px solid transparent;
  border-right-color:#fff;
}

/* ---------- Верхняя панель ---------- */
.topbar{
  display:flex; align-items:center; gap:10px;
  padding-right:110px; /* место под кнопки звука */
  /* Слева тот же уговор, что справа: угол занят кнопками «Выйти»
     и «Во весь экран», и без этого отступа под ними прятались стрелка
     «назад» и счёт заданий. Величину держит --exit-space, её же
     раздвигает games-static/common/fullscreen.js под вторую кнопку;
     на телефоне место уступают не вбок, а вниз — --exit-drop. */
  padding-left:var(--exit-space);
  margin-top:var(--exit-drop);
}
.progress-wrap{ flex:1 1 auto; min-width:0; }
.progress-text{ font-size:15px; font-weight:700; margin-bottom:4px; }
.progress-bar{ height:14px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent2),var(--ok)); border-radius:10px; transition:width .35s ease; }
.diff-badge{
  flex:0 0 auto;
  background:#fff; border-radius:14px; padding:8px 12px;
  font-size:15px; font-weight:800; box-shadow:var(--shadow);
}

/* ---------- Сцена магазина ---------- */
.shop{ position:relative; margin-bottom:6px; }

/* Витрина: задник (фон) + товар на первом плане */
.stage{
  position:relative;
  overflow:hidden;
  border-radius:20px 20px 6px 6px;
  min-height:clamp(132px, 29vw, 200px);
  background:linear-gradient(180deg, var(--wall1), var(--wall2));
  box-shadow:inset 0 -22px 26px -20px rgba(0,0,0,.28);
  transition:background .5s ease;
}

.scene{ position:absolute; inset:0; pointer-events:none; }

/* пол / прилавок вдалеке */
.scene-floor{
  position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(180deg, var(--floor), var(--floor2));
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35);
}

/* стеллажи с товарами на заднем плане */
.scene-racks{
  position:absolute; left:3%; right:3%; top:18%;
  display:flex; flex-direction:column; gap:clamp(6px,1.6vw,12px);
}
.scene-rack{
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:0 2px 3px;
  border-bottom:5px solid var(--rack);
  border-radius:2px;
  box-shadow:0 5px 6px -4px rgba(0,0,0,.28);
}
.scene-rack .g{
  font-size:clamp(15px, 3.6vw, 27px);
  line-height:1.05;
  opacity:.92;
  filter:saturate(.9);
}

/* крупные предметы, стоящие на полу */
.scene-props{ position:absolute; inset:0; }
.prop{
  position:absolute;
  font-size:clamp(26px, 7vw, 48px);
  line-height:1;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.22));
}
.prop--left{ left:2%; bottom:3%; }
.prop--right{ right:2%; bottom:3%; }
.prop--left2{ left:15%; bottom:12%; font-size:clamp(18px,4.6vw,32px); opacity:.9; }
.prop--right2{ right:15%; bottom:12%; font-size:clamp(18px,4.6vw,32px); opacity:.9; }

/* потолочные лампы (супермаркет, касса, ТЦ) */
.scene-lamps{
  display:none;
  position:absolute; top:0; left:8%; right:8%;
  justify-content:space-between;
}
.scene-lamps i{
  width:clamp(34px,11vw,80px); height:9px;
  border-radius:0 0 8px 8px;
  background:linear-gradient(180deg,#FFFDF0,#FFE9A8);
  box-shadow:0 8px 22px 4px rgba(255,236,170,.75);
}

/* полосатый тент (рынок) */
.scene-awning{
  display:none;
  position:absolute; top:0; left:0; right:0; height:15%;
  background:repeating-linear-gradient(90deg,#F26D6D 0 22px,#FFF6EC 22px 44px);
  border-bottom:4px solid #D24E4E;
  box-shadow:0 5px 10px rgba(0,0,0,.18);
}

/* окно на стене (магазин у дома, пекарня) */
.scene-window{
  display:none;
  position:absolute; right:4%; top:17%;
  width:clamp(42px,12vw,86px); height:clamp(34px,9vw,64px);
  border-radius:8px;
  border:5px solid #F5F1E6;
  background:linear-gradient(160deg,#BFE6FF,#8FD0F5);
  box-shadow:0 4px 8px rgba(0,0,0,.12);
}

/* кассовая лента (касса) */
.scene-belt{
  display:none;
  position:absolute; left:0; right:0; bottom:24%; height:11%;
  background:repeating-linear-gradient(90deg,#4A4A5C 0 16px,#5E5E72 16px 32px);
  border-top:3px solid #7C7C92;
  border-bottom:3px solid #33333F;
}

/* вывеска локации */
.scene-sign{
  position:absolute; z-index:3;
  left:8px; top:8px;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px;
  border-radius:12px;
  background:var(--sign-bg);
  color:var(--sign-text);
  font-size:clamp(12px,2.6vw,15px);
  font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.scene-sign .s-ico{ font-size:1.25em; }
.scene-sign.is-new{ animation:signIn .9s ease 2; }
@keyframes signIn{
  0%,100%{ transform:none; box-shadow:0 4px 10px rgba(0,0,0,.18); }
  40%{ transform:scale(1.12) rotate(-3deg); box-shadow:0 6px 18px rgba(255,122,89,.6); }
}

/* строка на стартовом экране */
.scene-hint{
  margin:0 0 6px; text-align:center;
  font-size:clamp(14px,2.5vw,17px); font-weight:700; color:#8a84ad;
}

/* товар и ценник — первый план */
.shelf{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,4vw,34px);
  min-height:clamp(132px, 29vw, 200px);
  padding:12px 12px clamp(8px,2.4vw,16px);
}
.product{
  font-size:clamp(52px,14vw,96px); line-height:1;
  animation:floaty 3.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.22));
}

.price-tag{
  margin:0;
  position:relative;
  background:#FFD966;
  color:#5a4300;
  font-weight:900;
  font-size:clamp(22px,5vw,34px);
  padding:12px 16px 12px 30px;
  border-radius:12px;
  box-shadow:0 6px 0 #E0B93E;
  transform:rotate(-5deg);
}
.price-tag::before{
  content:"";
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%;
  background:#fff; box-shadow:inset 0 0 0 3px #E0B93E;
}

.counter-top{
  height:22px;
  background:linear-gradient(180deg,var(--wood),var(--wood-dark));
  border-radius:8px;
  box-shadow:0 6px 0 rgba(0,0,0,.12);
}

/* ---------- Локации (меняются каждые 4 игры) ---------- */

/* 1. Магазин у дома */
body[data-scene="corner"]{
  --bg1:#FFF6E5; --bg2:#FFE3F1;
  --wall1:#FFF6E4; --wall2:#FFE2BE;
  --floor:#D9A76A; --floor2:#BE8748;
  --rack:#B9763C;
  --sign-bg:#FFFFFF; --sign-text:#8a5a20;
  --wood:#C98A4B; --wood-dark:#A96C35;
}
body[data-scene="corner"] .scene-window{ display:block; }
body[data-scene="corner"] .scene-racks{ right:27%; }

/* 2. Супермаркет */
body[data-scene="super"]{
  --bg1:#EAF6FF; --bg2:#E6ECFF;
  --wall1:#F3FAFF; --wall2:#D6E9F7;
  --floor:#C9D6E2; --floor2:#A9BACB;
  --rack:#7E93A8;
  --sign-bg:#1E88C7; --sign-text:#FFFFFF;
  --wood:#8FA8BC; --wood-dark:#6C8398;
}
body[data-scene="super"] .scene-lamps{ display:flex; }

/* 3. Касса */
body[data-scene="checkout"]{
  --bg1:#EAFBF1; --bg2:#E6F5FF;
  --wall1:#EFFBF3; --wall2:#D2EEDD;
  --floor:#B6CBBE; --floor2:#95AF9F;
  --rack:#6F9C82;
  --sign-bg:#2FA36A; --sign-text:#FFFFFF;
  --wood:#7FB394; --wood-dark:#5D9174;
}
body[data-scene="checkout"] .scene-lamps{ display:flex; }
body[data-scene="checkout"] .scene-belt{ display:block; }
body[data-scene="checkout"] .scene-racks{ right:auto; width:56%; }

/* 4. Рынок */
body[data-scene="market"]{
  --bg1:#FFF3E2; --bg2:#FFE9E9;
  --wall1:#FFF7E9; --wall2:#F7E2C4;
  --floor:#C79A63; --floor2:#A87B47;
  --rack:#9C6A38;
  --sign-bg:#F26D6D; --sign-text:#FFFFFF;
  --wood:#B98247; --wood-dark:#966633;
}
body[data-scene="market"] .scene-awning{ display:block; }
body[data-scene="market"] .scene-racks{ top:26%; }

/* 5. Пекарня */
body[data-scene="bakery"]{
  --bg1:#FFF1F4; --bg2:#FFF6E3;
  --wall1:#FFF4F0; --wall2:#FBE0D4;
  --floor:#E0B79C; --floor2:#C89478;
  --rack:#C08A66;
  --sign-bg:#E88AA0; --sign-text:#FFFFFF;
  --wood:#D3A17B; --wood-dark:#B27F58;
}
body[data-scene="bakery"] .scene-window{ display:block; }
body[data-scene="bakery"] .scene-racks{ right:27%; }

/* 6. Торговый центр */
body[data-scene="mall"]{
  --bg1:#F3EEFF; --bg2:#EAF4FF;
  --wall1:#F7F2FF; --wall2:#DFD4F5;
  --floor:#C6BBDD; --floor2:#A497C4;
  --rack:#8A7BB0;
  --sign-bg:#7B61FF; --sign-text:#FFFFFF;
  --wood:#9C8BC6; --wood-dark:#7A69A6;
}
body[data-scene="mall"] .scene-lamps{ display:flex; }

/* 7. Киоск мороженого */
body[data-scene="icecream"]{
  --bg1:#EAF8FF; --bg2:#FFEFF7;
  --wall1:#F2FBFF; --wall2:#D6EEF9;
  --floor:#BEDCE8; --floor2:#9CBFCE;
  --rack:#7FAABC;
  --sign-bg:#4EC5F1; --sign-text:#FFFFFF;
  --wood:#96C4D6; --wood-dark:#73A2B4;
}
body[data-scene="icecream"] .scene-awning{ display:block; }
body[data-scene="icecream"] .scene-racks{ top:26%; }

/* 8. Зоомагазин */
body[data-scene="petshop"]{
  --bg1:#EDFBF4; --bg2:#EAF6FF;
  --wall1:#F1FCF7; --wall2:#D2F0E2;
  --floor:#B4D8C6; --floor2:#93B8A6;
  --rack:#6FA189;
  --sign-bg:#3BC97D; --sign-text:#FFFFFF;
  --wood:#89BCA4; --wood-dark:#659A82;
}
body[data-scene="petshop"] .scene-window{ display:block; }
body[data-scene="petshop"] .scene-racks{ right:27%; }

/* 9. Цветочный магазин */
body[data-scene="florist"]{
  --bg1:#FBF0FF; --bg2:#FFEFF6;
  --wall1:#FDF4FF; --wall2:#EEDCF7;
  --floor:#D2BEDE; --floor2:#B199C0;
  --rack:#9B7FAE;
  --sign-bg:#C46BC4; --sign-text:#FFFFFF;
  --wood:#B497C4; --wood-dark:#9276A4;
}
body[data-scene="florist"] .scene-window{ display:block; }
body[data-scene="florist"] .scene-racks{ right:27%; }

/* 10. Книжный магазин */
body[data-scene="bookshop"]{
  --bg1:#FFF6E8; --bg2:#F0ECFF;
  --wall1:#FFF8ED; --wall2:#F2E2CA;
  --floor:#C4A177; --floor2:#A48156;
  --rack:#8E6740;
  --sign-bg:#8C5A2B; --sign-text:#FFFFFF;
  --wood:#B08758; --wood-dark:#8E6740;
}
body[data-scene="bookshop"] .scene-window{ display:block; }
body[data-scene="bookshop"] .scene-racks{ right:27%; }

/* 11. Спорттовары */
body[data-scene="sport"]{
  --bg1:#EAF1FF; --bg2:#E8FBF0;
  --wall1:#F1F6FF; --wall2:#D4E2F7;
  --floor:#B7C6DC; --floor2:#95A6C0;
  --rack:#6F86A8;
  --sign-bg:#FF7A59; --sign-text:#FFFFFF;
  --wood:#8CA0BC; --wood-dark:#6B7F9C;
}
body[data-scene="sport"] .scene-lamps{ display:flex; }

/* 12. Праздничная ярмарка */
body[data-scene="fair"]{
  --bg1:#FFF0DC; --bg2:#FFE6F2;
  --wall1:#FFF6E6; --wall2:#FBDCC4;
  --floor:#D6A878; --floor2:#B78855;
  --rack:#A87244;
  --sign-bg:#F2953C; --sign-text:#FFFFFF;
  --wood:#C4915E; --wood-dark:#A2703E;
}
body[data-scene="fair"] .scene-awning{ display:block; }
body[data-scene="fair"] .scene-racks{ top:26%; }

/* ---------- Текст задания ---------- */
.task{
  text-align:center;
  font-size:clamp(20px,4.4vw,30px);
  font-weight:800;
  line-height:1.35;
  margin:16px auto 6px;
  max-width:720px;
}
.task .hl{ color:var(--accent); white-space:nowrap; }

/* ---------- Варианты ответа ---------- */
.options{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
  gap:12px;
  margin:14px 0 4px;
}
.option{
  font:inherit;
  cursor:pointer;
  border:4px solid #DCEEF9;
  background:#F4FBFF;
  border-radius:20px;
  padding:18px 8px;
  font-size:clamp(24px,5vw,32px);
  font-weight:900;
  color:var(--text);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.option:hover{ transform:translateY(-3px); background:#E7F6FF; }
.option:active{ transform:translateY(0); }
.option.is-wrong{ background:#FFE7EA; border-color:var(--err); color:var(--err); animation:shake .45s ease; }
.option.is-right{ background:#E4FBEE; border-color:var(--ok); color:#1E9A5A; animation:pop .35s ease; }
.option:disabled{ cursor:default; opacity:.75; }
.option:disabled.is-right{ opacity:1; }

@keyframes shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-9px)} 30%{transform:translateX(9px)}
  45%{transform:translateX(-7px)} 60%{transform:translateX(7px)}
  75%{transform:translateX(-4px)} 90%{transform:translateX(4px)}
}

/* ---------- Зона прилавка (куда кладут деньги) ---------- */
.drop{
  --u:clamp(38px,9.5vw,54px);
  min-height:calc(var(--u) * 1.9);
  border:4px dashed #C9C3E4;
  border-radius:20px;
  background:#FAF9FF;
  padding:10px;
  margin-top:12px;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.drop.is-over{ background:#EAFBF1; border-color:var(--ok); transform:scale(1.01); }
.drop.is-wrong{ animation:shake .45s ease; border-color:var(--err); background:#FFF0F2; }
.drop.is-right{ border-color:var(--ok); background:#EAFBF1; border-style:solid; }
.drop-label{ text-align:center; color:#9891bd; font-size:16px; padding:14px 4px; }
.drop-label.is-hidden{ display:none; }

.pile{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
}

.total-row{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin-top:12px;
}
.total{
  margin:0;
  background:#FFF3D6;
  color:#7a5c00;
  font-weight:900;
  font-size:clamp(19px,3.6vw,24px);
  border-radius:18px;
  padding:12px 18px;
  box-shadow:0 4px 0 #EBD49A;
}
.total.is-ok{ background:#DFFBEB; color:#18854B; box-shadow:0 4px 0 #A8E9C6; }

/* ---------- Кошелёк ---------- */
.wallet{
  margin-top:14px;
  background:#F3F0FF;
  border-radius:20px;
  padding:10px 10px 14px;
}
.wallet-group + .wallet-group{ margin-top:10px; }
.wallet-group[hidden]{ display:none; }
.wallet-label{
  display:block;
  font-size:14px; font-weight:800; color:#7d789e;
  text-transform:uppercase; letter-spacing:.6px;
  margin:4px 0 6px 6px;
}
.wallet-items{
  --u:clamp(44px,11vw,62px);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center;
}

/* ---------- Деньги (CSS-рисунок) ---------- */
.money{
  position:relative;
  border:none;
  padding:0;
  font:inherit;
  font-weight:900;
  color:#3b3320;
  cursor:pointer;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1;
  transition:transform .12s ease, filter .15s ease;
}
.money:hover{ transform:translateY(-4px) scale(1.05); }
.money:active{ transform:scale(.95); }
.money .val{ font-size:calc(var(--u) * .38); }
.money .cur{ font-size:calc(var(--u) * .24); opacity:.75; }

/* монеты — круглые */
.money.coin{
  width:calc(var(--u) * var(--f));
  height:calc(var(--u) * var(--f));
  border-radius:50%;
  box-shadow:0 4px 0 rgba(0,0,0,.18), inset 0 0 0 3px rgba(255,255,255,.55);
}
.money.coin::after{
  content:"";
  position:absolute; inset:12%;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.55);
  pointer-events:none;
}
.coin.n1{ --f:.80; background:radial-gradient(circle at 32% 28%, #F2F5F8, #B9C2CC); }
.coin.n2{ --f:.86; background:radial-gradient(circle at 32% 28%, #EFF3F7, #AEB8C4); }
.coin.n5{ --f:.94; background:radial-gradient(circle at 32% 28%, #EAEFF5, #9FAAB8); }
.coin.n10{ --f:1;  background:radial-gradient(circle at 32% 28%, #FFE9A8, #E0A93C); }

/* купюры — прямоугольные */
.money.bill{
  width:calc(var(--u) * 1.75);
  height:calc(var(--u) * .98);
  border-radius:10px;
  box-shadow:0 4px 0 rgba(0,0,0,.16), inset 0 0 0 3px rgba(255,255,255,.5);
  color:#2b2b3a;
}
.money.bill::after{
  content:"";
  position:absolute; inset:8% 6%;
  border-radius:6px;
  border:2px solid rgba(255,255,255,.55);
  pointer-events:none;
}
.money.bill .val{ font-size:calc(var(--u) * .40); }
.bill.n50{  background:linear-gradient(135deg,#BFE3F5,#7FC0DE); }
.bill.n100{ background:linear-gradient(135deg,#F3DFC2,#D9AF79); }
.bill.n200{ background:linear-gradient(135deg,#C7EEDC,#7FCBAA); }
.bill.n500{ background:linear-gradient(135deg,#DCD0F2,#A98FD6); }

.money.is-ghost{
  position:fixed;
  z-index:100;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1.12) rotate(-6deg);
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.28));
  transition:none;
  margin:0;
}
.money.in-pile{ animation:pop .22s ease both; }
.money.is-solution{ box-shadow:0 0 0 4px var(--ok), 0 4px 0 rgba(0,0,0,.16); }

/* ---------- Результаты ---------- */
.stars{ display:flex; justify-content:center; gap:10px; margin:10px 0; font-size:clamp(44px,11vw,72px); line-height:1; }
.star{ opacity:0; transform:scale(.3) rotate(-40deg); animation:starIn .55s cubic-bezier(.2,1.4,.4,1) forwards; }
.star.is-empty{ filter:grayscale(1); opacity:.35; }
@keyframes starIn{ to{ opacity:1; transform:none; } }
.score{ text-align:center; font-size:clamp(19px,3.6vw,24px); font-weight:800; margin:6px 0 2px; }

.parents{
  background:#F7F6FD;
  border-radius:18px;
  padding:10px 14px;
  margin:12px 0;
  font-size:16px;
}
.parents summary{ cursor:pointer; font-weight:800; padding:6px 0; }
.parents-body{ padding-top:6px; }
.parents-item{
  border-top:2px solid #E7E4F5;
  padding:8px 0;
  line-height:1.45;
}
.parents-item b{ color:var(--accent); }
.parents-item .bad{ color:var(--err); font-weight:700; }
.parents-item .good{ color:#1E9A5A; font-weight:700; }

.result-btns{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.result-btns .btn{ width:100%; max-width:360px; }

/* ---------- Адаптив ---------- */
@media (max-width:420px){
  body{ font-size:17px; }
  /* сверху оставляем место под плавающие кнопки звука */
  .app{ padding:58px 8px 30px; }
  /* Здесь место сверху уже отдал .app — второй раз его не отводим. */
  .topbar{ padding-right:0; flex-wrap:wrap; margin-top:0; }
  .corner-tools{ top:8px; right:8px; }
  .icon-btn{ width:44px; height:44px; font-size:20px; }
  .hero-panel{ padding:8px; gap:8px; }
  .scene-racks{ top:26%; gap:5px; }
  .scene-rack{ border-bottom-width:4px; }
  .scene-sign{ left:6px; top:6px; padding:4px 8px; font-size:11px; gap:4px; }
  .diff-row{ grid-template-columns:1fr; }
  .wallet-items{ gap:8px; }
}

@media (min-width:900px){
  .app{ padding-top:20px; }
  .stage, .shelf{ min-height:200px; }
  .result-btns{ flex-direction:row; justify-content:center; }
}

/* На окне ноутбука прилавок с кошельком и кнопкой «Оплатить» уезжал под
   сгиб целиком: экран занимал 903 пикселя при высоте 720, и денег было
   просто не видно. Ужимаем витрину, отступы и сами монеты — считать это
   не мешает, а платить теперь есть чем. */
@media (max-height: 800px){
  .app{ padding:8px 12px 14px; }
  .card{ padding:clamp(10px, 1.6vw, 16px); margin-top:8px; }
  .stage, .shelf{ min-height:clamp(110px, 18vh, 150px); }
  .product{ font-size:clamp(44px, 10vw, 72px); }
  .hero-panel--game{ margin:8px 0; }
  .task{ font-size:clamp(18px, 3.4vw, 24px); margin:8px auto 4px; }
  .bubble{ padding:8px 12px; font-size:clamp(15px, 2.2vw, 17px); }
  .hero-art{ font-size:clamp(30px, 5vw, 40px); }
  .drop{ --u:clamp(32px, 7vw, 44px); padding:6px; margin-top:8px; }
  .drop-label{ padding:8px 4px; font-size:15px; }
  .total-row{ margin-top:8px; }
  .total{ padding:8px 14px; font-size:clamp(17px, 3vw, 20px); }
  .wallet{ margin-top:8px; padding:6px 8px 8px; }
  .wallet-items{ --u:clamp(38px, 8vw, 50px); gap:8px; }
  .wallet-label{ margin:2px 0 4px 6px; font-size:13px; }
  .wallet-group + .wallet-group{ margin-top:6px; }
}

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

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
/* Место, которое кнопка занимает в левом верхнем углу. Игры, у которых там
   своя строка (счёт, прогресс), сдвигают её на эти величины: на широком
   экране вбок, на телефоне вниз — рядом с кнопкой строке уже не хватило бы
   ширины и она полезла бы под кнопки звука справа. */
:root{ --exit-space:124px; --exit-drop:0px; }
@media (max-width:640px){ :root{ --exit-space:0px; --exit-drop:54px; } }

.exit-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:46px; padding:0 16px; flex:none;
  border:none; border-radius:16px;
  background:#fff; color:#3D3455;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(61,52,85,.12);
}
.exit-btn:hover{ background:#F2EFFF; }
.exit-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(61,52,85,.12); }
/* Вариант для игр без собственной верхней панели: тот же левый верхний угол,
   только сам по себе. Ниже модальных окон игры (у них z-index от 80). */
.exit-btn--float{ position:fixed; top:10px; left:10px; z-index:60; }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .exit-btn--float{ top:6px; left:6px; }
}