/* «Банки с вареньем» — оформление */

:root{
  --ui: 1;                       /* множитель размера текста */
  --cream:#F7EAD4;
  --cream-2:#EFDCBE;
  --wood:#8C5A38;
  --wood-dark:#6B4127;
  --ink:#3B2A1D;
  --ink-soft:#6B563F;
  --accent:#B23A2E;
  --accent-dark:#8A2A20;
  --leaf:#6E8B4E;
  --panel:#FFF6E8;
  --shadow: 0 6px 0 rgba(59,42,29,.18), 0 10px 24px rgba(59,42,29,.16);
  --jar-w: 86px;
  --slot-h: 40px;
  --napkin:#F1DDBE;
  font-size: calc(17px * var(--ui));
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;padding:0;overflow:hidden;}
body{
  font-family:"Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);
  background:var(--cream);
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
  touch-action:manipulation;
}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:700;margin:0;}

/* ---------- фон сцены ---------- */
.scene{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  transition:background .6s ease;
}
.scene::after{
  content:""; position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(140,90,56,.05) 0 2px, rgba(0,0,0,0) 2px 14px),
    repeating-linear-gradient(-45deg, rgba(140,90,56,.05) 0 2px, rgba(0,0,0,0) 2px 14px);
  opacity:.8;
}
body[data-theme="cellar"]{--cream:#F3E3C6;--cream-2:#E4CDA6;--accent:#A8382E;--accent-dark:#7C2419;}
body[data-theme="pantry"]{--cream:#F6EBD2;--cream-2:#E7D6B2;--accent:#9A6B2F;--accent-dark:#6F4A1B;}
body[data-theme="market"]{--cream:#F8E9D8;--cream-2:#EBD2B8;--accent:#B4462F;--accent-dark:#89301D;}
body[data-theme="winter"]{--cream:#EDEFF2;--cream-2:#D8DEE6;--accent:#3E6790;--accent-dark:#2A4A6C;--wood:#7A6A5C;--wood-dark:#5C4E43;--napkin:#E6EAF0;}
body[data-theme="daily"]{--cream:#F2E7D0;--cream-2:#DFCFAF;--accent:#7A5230;--accent-dark:#563518;}

/* ---------- экраны ---------- */
.screen{
  position:fixed; inset:0; z-index:1;
  display:none; flex-direction:column;
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
}
.screen.on{display:flex;}

/* ---------- кнопки ---------- */
.btn{
  font:inherit; font-weight:700; color:var(--ink);
  background:var(--panel);
  border:3px solid var(--wood);
  border-radius:18px;
  padding:.7em 1.1em;
  cursor:pointer;
  box-shadow:0 5px 0 var(--wood-dark);
  transition:transform .08s ease, box-shadow .08s ease, background .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:56px;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--wood-dark);}
.btn[disabled]{opacity:.42; pointer-events:none;}
.btn-big{width:100%; max-width:420px; font-size:1.12rem; min-height:64px;}
.btn-primary{background:var(--accent); color:#FFF6E8; border-color:var(--accent-dark); box-shadow:0 5px 0 var(--accent-dark);}
.btn svg{width:1.5em;height:1.5em;fill:currentColor;flex:none;}
.btn-icon{padding:0;width:56px;height:56px;border-radius:16px;min-height:56px;}
.btn-icon svg{width:26px;height:26px;}
.btn-tool{flex:1 1 0; min-width:0; flex-direction:column; gap:.2em;
  font-size:min(.9rem, 3.9vw); padding:.45em .35em; min-height:74px; line-height:1.1;}
.btn-tool svg{width:1.7em;height:1.7em;}
.btn-tool span{white-space:normal;max-width:100%;text-align:center;hyphens:auto;}

/* ---------- загрузка ---------- */
#loader{
  position:fixed; inset:0; z-index:50; background:var(--cream);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
}
#loader.hidden{display:none;}
#loader p{font-size:1.05rem;color:var(--ink-soft);margin:0;}
.loader-jar{
  width:64px;height:78px;border:4px solid var(--wood);border-radius:12px 12px 18px 18px;
  position:relative;overflow:hidden;background:#FFF9EE;
}
.loader-jar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:var(--accent);
  animation:fill 1.6s ease-in-out infinite;
}
@keyframes fill{0%{height:6%}50%{height:88%}100%{height:6%}}

/* ---------- меню ---------- */
.menu-wrap{margin:auto;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:440px;padding:10px 0;}
.game-title{font-size:2.2rem;text-align:center;color:var(--accent-dark);text-shadow:0 2px 0 rgba(255,255,255,.7);line-height:1.1;}
.game-sub{margin:0 0 6px;text-align:center;color:var(--ink-soft);font-size:1rem;}
.menu-buttons{display:flex;flex-direction:column;gap:12px;width:100%;align-items:center;}
.menu-progress{color:var(--ink-soft);font-size:.95rem;margin:4px 0 0;text-align:center;}

/* ---------- верхняя панель ---------- */
.topbar{display:flex;align-items:center;gap:10px;flex:none;padding-bottom:6px;}
.topbar h2{font-size:1.3rem;flex:1;text-align:center;}
.topbar-spacer{width:56px;flex:none;}
.level-label{flex:1;text-align:center;line-height:1.15;display:flex;flex-direction:column;}
.level-label span{font-size:.85rem;color:var(--ink-soft);}
.level-label strong{font-size:1.15rem;font-family:Georgia,serif;}

/* ---------- карта уровней ---------- */
.chapter-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;flex:none;scrollbar-width:none;}
.chapter-tabs::-webkit-scrollbar{display:none;}
.chap-tab{
  font:inherit;font-weight:700;font-size:.95rem;white-space:nowrap;cursor:pointer;
  padding:.6em 1em;border-radius:14px;border:3px solid var(--wood);background:var(--panel);color:var(--ink);
  display:flex;align-items:center;gap:.4em;min-height:48px;
}
.chap-tab.active{background:var(--accent);color:#FFF6E8;border-color:var(--accent-dark);}
.chap-tab.locked{opacity:.5;}
.chap-tab svg{width:16px;height:16px;fill:currentColor;}
.level-grid{
  flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:12px;padding:4px 2px 20px;align-content:start;
  width:100%;max-width:660px;margin:0 auto;
}
.lvl{
  aspect-ratio:1/1;border-radius:18px;border:3px solid var(--wood);background:var(--panel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:inherit;font-weight:700;font-size:1.3rem;cursor:pointer;color:var(--ink);
  box-shadow:0 5px 0 var(--wood-dark);
}
.lvl:active{transform:translateY(4px);box-shadow:0 1px 0 var(--wood-dark);}
.lvl.done{background:var(--leaf);color:#FFF9EE;border-color:#4E6836;box-shadow:0 5px 0 #4E6836;}
.lvl.done svg{width:20px;height:20px;fill:none;stroke:currentColor;}
.lvl.locked{opacity:.45;pointer-events:none;box-shadow:none;}
.lvl.locked svg{width:22px;height:22px;fill:currentColor;}
.lvl.current{border-color:var(--accent);box-shadow:0 5px 0 var(--accent-dark);}

/* ---------- полки и банки ---------- */
.shelves{
  flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:18px; min-height:0; padding:4px 0; overflow:hidden;
}
.shelf{
  display:flex;align-items:flex-end;justify-content:center;
  gap:calc(var(--jar-w) * .22);
  position:relative;padding-bottom:16px;
}
.shelf::after{
  content:"";position:absolute;left:-8px;right:-8px;bottom:0;height:12px;border-radius:6px;
  background:linear-gradient(180deg,var(--wood) 0%,var(--wood-dark) 100%);
  box-shadow:0 5px 10px rgba(59,42,29,.22);
}

.jar{
  width:var(--jar-w);
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:6px 6px 8px;
  border:4px solid rgba(120,150,150,.55);
  border-top:none;
  border-radius:6px 6px 16px 16px;
  background:linear-gradient(100deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 38%, rgba(255,255,255,.42) 100%);
  box-shadow:inset 0 -8px 14px rgba(255,255,255,.35), 0 4px 10px rgba(59,42,29,.16);
  cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), filter .15s;
}
.jar::before{ /* горлышко */
  content:"";position:absolute;left:-4px;right:-4px;top:-14px;height:14px;
  border:4px solid rgba(120,150,150,.55);border-bottom:none;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.3));
}
.jar::after{ /* блик */
  content:"";position:absolute;left:14%;top:6%;bottom:14%;width:11%;border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.05));
  pointer-events:none;
}
.jar-slots{display:flex;flex-direction:column-reverse;gap:3px;position:relative;z-index:1;}
.slot{
  height:var(--slot-h);border-radius:9px;
  background:linear-gradient(180deg, var(--tint) 0%, var(--c) 100%);
  display:flex;align-items:center;justify-content:center;gap:6%;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12), inset 0 2px 0 rgba(255,255,255,.3);
  animation:dropin .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes dropin{from{transform:translateY(-16px) scaleY(.7);opacity:.3}to{transform:none;opacity:1}}
.slot svg{width:58%;max-width:34px;height:72%;fill:var(--cd);color:var(--cd);}
.slot.single svg{width:64%;}

.jar.selected{transform:translateY(-18px) scale(1.03);filter:drop-shadow(0 8px 10px rgba(59,42,29,.3));}
.jar.hint-from{animation:wiggle .6s ease-in-out infinite;}
.jar.hint-to{animation:pulse 1s ease-in-out infinite;}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pulse{0%,100%{box-shadow:inset 0 -8px 14px rgba(255,255,255,.35),0 0 0 0 rgba(178,58,46,.5)}50%{box-shadow:inset 0 -8px 14px rgba(255,255,255,.35),0 0 0 12px rgba(178,58,46,0)}}
.jar.done .jar-slots{filter:saturate(1.12);}
.jar.done::before{border-color:var(--leaf);}
.jar.nope{animation:shakeX .3s;}
@keyframes shakeX{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.jar-cap{ /* крышка */
  position:absolute;left:-8px;right:-8px;top:-17px;height:22px;border-radius:7px;
  background:linear-gradient(180deg,#C9B18A,#9A825E);
  border:3px solid #7A6242;z-index:3;
  box-shadow:0 3px 0 rgba(59,42,29,.25);
  background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 3px, rgba(255,255,255,.12) 3px 7px);
}
.jar.lidded{cursor:pointer;}
.jar.cracked .crack{
  position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2;
}
.jar.cracked .crack path{stroke:rgba(70,90,90,.65);stroke-width:2.2;fill:none;}
.jar.decor{cursor:default;opacity:.95;}
.jar.decor .decor-fill{
  position:absolute;left:6px;right:6px;bottom:8px;top:26%;border-radius:9px;
  background:linear-gradient(180deg,#B4553A,#7E2F22);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.2);
}
.jar.decor .decor-cloth{
  position:absolute;left:-7px;right:-7px;top:-16px;height:22px;border-radius:50% 50% 26% 26%;
  background:#D7C0A0;border:3px solid #B79C77;z-index:3;
  background-image:radial-gradient(circle at 28% 55%, rgba(178,58,46,.4) 2.5px, transparent 3.5px),
                   radial-gradient(circle at 68% 65%, rgba(110,139,78,.4) 2.5px, transparent 3.5px);
}
.jar-badge{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  background:var(--leaf);color:#FFF9EE;border-radius:50%;width:26px;height:26px;
  display:none;align-items:center;justify-content:center;z-index:4;box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.jar.done .jar-badge{display:flex;}
.jar-badge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:7;}

/* ---------- нижняя панель ---------- */
.toolbar{display:flex;gap:10px;flex:none;padding:8px 0 2px;max-width:520px;width:100%;margin:0 auto;}

/* ---------- летящие ягоды ---------- */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:20;}
.fly{position:absolute;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6%;
  background:linear-gradient(180deg,var(--tint),var(--c));box-shadow:0 3px 8px rgba(0,0,0,.2);}
.fly svg{width:58%;max-width:34px;height:72%;fill:var(--cd);color:var(--cd);}

/* ---------- оверлеи ---------- */
.overlay{
  position:fixed;inset:0;z-index:30;background:rgba(59,42,29,.55);
  display:none;align-items:center;justify-content:center;padding:16px;
  backdrop-filter:blur(2px);
}
.overlay.on{display:flex;animation:fade .18s ease;}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{
  background:var(--panel);border:4px solid var(--wood);border-radius:26px;
  padding:22px 18px;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 12px 0 var(--wood-dark), 0 20px 40px rgba(0,0,0,.3);
}
.panel h2{font-size:1.5rem;text-align:center;color:var(--accent-dark);}
.panel p{margin:0;text-align:center;color:var(--ink-soft);font-size:1rem;line-height:1.45;}
.panel-win .win-badge{
  width:76px;height:76px;border-radius:50%;background:var(--leaf);color:#FFF9EE;
  display:flex;align-items:center;justify-content:center;font-size:2.4rem;
  box-shadow:0 5px 0 #4E6836;animation:pop .35s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.panel-howto{align-items:stretch;}
.howto-list{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:12px;font-size:1rem;line-height:1.5;}
.howto-list li{padding-left:.2em;}

.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:1.05rem;font-weight:700;padding:.5em .2em;}
.setting-block{width:100%;display:flex;flex-direction:column;gap:10px;font-size:1.05rem;font-weight:700;padding:.3em .2em;}
.toggle{width:74px;height:42px;border-radius:21px;border:3px solid var(--wood);background:#E2D3B8;
  position:relative;cursor:pointer;padding:0;flex:none;transition:background .18s;}
.toggle i{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;
  background:var(--panel);border:2px solid var(--wood-dark);transition:left .18s;}
.toggle.on{background:var(--leaf);}
.toggle.on i{left:35px;}
.seg{display:flex;gap:8px;}
.seg button{flex:1;font:inherit;font-weight:700;font-size:.9rem;padding:.7em .3em;border-radius:14px;
  border:3px solid var(--wood);background:var(--panel);color:var(--ink);cursor:pointer;min-height:52px;}
.seg button.active{background:var(--accent);color:#FFF6E8;border-color:var(--accent-dark);}

/* ---------- уведомление ---------- */
.toast{
  position:fixed;left:50%;bottom:14%;transform:translate(-50%,20px);z-index:40;
  background:var(--ink);color:var(--panel);padding:.8em 1.3em;border-radius:16px;
  font-size:1rem;font-weight:700;opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;
  max-width:86vw;text-align:center;
}
.toast.on{opacity:.96;transform:translate(-50%,0);}

/* ---------- широкие экраны ---------- */
@media (min-width:760px){
  :root{font-size:calc(18px * var(--ui));}
  .screen{padding-left:24px;padding-right:24px;}
  .game-title{font-size:2.8rem;}
}
@media (max-height:520px){
  .game-title{font-size:1.7rem;}
  .btn-big{min-height:54px;}
  .btn-tool{min-height:62px;}
}