:root{
  /* размеры шрифта задаёт fitFonts() в game.js: кратно 8 физическим пикселям — пиксельный шрифт без размытых столбцов */
  --wood:#a3652f; --wood-d:#4a2a12; --ink:#33200f; --paper:#f6e4b0; --paper-d:#e6cd90;
  --gold:#ffd23f; --green:#4fae3c; --red:#e6482e;
  --f-body:'Tiny5','Segoe UI',monospace; --f-sign:'Press Start 2P','Tiny5',monospace;
  --spring:cubic-bezier(.34,1.56,.64,1); --out:cubic-bezier(.22,1,.36,1); --in:cubic-bezier(.55,0,1,.45);
  --pxclip:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Tiny5','Segoe UI',monospace;font-size:var(--fs18,18px);color:var(--ink);background:#101c10;user-select:none}
.px{image-rendering:pixelated}
.hidden{display:none!important}
canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated;cursor:crosshair}
canvas#txt{position:fixed;inset:0;width:100vw;height:100vh;display:block;pointer-events:none;z-index:1}

/* ── рамки ── */
.frame{background:var(--wood-d);padding:5px;clip-path:var(--pxclip)}
.fin{background:var(--paper);clip-path:var(--pxclip);box-shadow:inset 0 4px 0 rgba(255,255,255,.45),inset 0 -5px 0 rgba(0,0,0,.14)}
.pad{padding:12px 14px}

/* ── кнопки ── */
.pbtn{font-family:'Tiny5','Segoe UI',monospace;font-weight:700;font-size:var(--fs17,17px);color:#fff;cursor:pointer;background:var(--wood);
  border:3px solid var(--wood-d);padding:7px 16px;text-shadow:1px 1px 0 #0007;letter-spacing:.5px;
  box-shadow:inset 0 3px 0 #c98850,inset 0 -4px 0 #6d3f1c,0 3px 0 var(--wood-d);transition:transform .18s var(--spring),filter .15s,box-shadow .12s}
.pbtn:hover{filter:brightness(1.12);transform:translateY(-2px)}
.pbtn:active{transform:translateY(3px) scale(1.04,.9);box-shadow:inset 0 3px 0 #c98850,inset 0 -4px 0 #6d3f1c;transition-duration:.05s}
.pbtn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.pbtn.pop{animation:btnPop .45s var(--spring)}
@keyframes btnPop{0%{transform:scale(1)}30%{transform:scale(1.22,.86)}60%{transform:scale(.94,1.08)}100%{transform:scale(1)}}
.pbtn.icon{padding:10px 12px}
.pbtn.green{background:#3f8a2c;border-color:#1d3f14;box-shadow:inset 0 3px 0 #6cc24a,inset 0 -4px 0 #2c5e1e,0 3px 0 #1d3f14}
.pbtn.gold{background:#d9a51f;color:#3a2413;text-shadow:1px 1px 0 #ffe98a;border-color:#6d500a;box-shadow:inset 0 3px 0 #ffe07a,inset 0 -4px 0 #9c720e,0 3px 0 #6d500a}
.pbtn:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed}
.card.locked{opacity:.6;filter:saturate(.5)}
.card.locked .top img{filter:contrast(.4) saturate(.3)}

/* ── HUD ─ */
#hud{position:fixed;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;z-index:10;pointer-events:none}
#hud .hgroup{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
.chip{display:flex;align-items:center;gap:9px;background:#3a2413ee;border:3px solid #20120a;color:#ffe3b0;
  padding:5px 12px;font-family:'Tiny5','Segoe UI',monospace;font-weight:700;font-size:var(--fs20,20px);box-shadow:inset 0 -3px 0 #00000055,0 3px 0 #00000044}
.chip.logo span{font-family:var(--f-body);font-weight:400;font-size:var(--fs12,12px);letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #0008;line-height:1.4}
.chip b{color:var(--gold);min-width:56px;text-align:right}
.chip b{display:inline-block;font-variant-numeric:tabular-nums}
.chip b.bump{animation:bump .5s var(--spring)}
.chip b.bumpdn{animation:bumpdn .4s var(--out)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.4) rotate(-4deg);color:#fff;text-shadow:0 0 10px #ffd23f}100%{transform:scale(1)}}
@keyframes bumpdn{30%{transform:translateY(3px) scale(.9);color:#ff9a8a}}
#coinChip{position:relative}
#coinChip.pop img{animation:coinSpin .5s var(--out)}
@keyframes coinSpin{0%{transform:scaleX(1)}25%{transform:scaleX(-1) scale(1.3)}50%{transform:scaleX(1) scale(1.15)}100%{transform:none}}
.cdelta{position:absolute;right:10px;top:100%;font-size:var(--fs17,17px);font-weight:700;color:var(--gold);text-shadow:2px 2px 0 #20120a,-1px -1px 0 #20120a;pointer-events:none;white-space:nowrap;animation:cdelta 1.25s var(--out) forwards}
.cdelta.neg{color:#ff9a8a}
@keyframes cdelta{0%{opacity:0;transform:translateY(-12px) scale(.5)}15%{opacity:1;transform:translateY(4px) scale(1.15)}30%{transform:translateY(2px) scale(1)}100%{opacity:0;transform:translateY(22px)}}
/* часы и силы */
.chip.clock span{min-width:52px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:1px;color:#fff;text-shadow:2px 2px 0 #0008}
.chip.clock.warn span{color:#ff9a5c}
.chip.clock.night span{color:#aebcff}
.chip.en{gap:8px}
.chip.en span{font-size:var(--fs14,14px);letter-spacing:1px;color:#ffe3b0}
.chip.en em{font-style:normal;font-size:var(--fs15,15px);color:var(--gold);text-shadow:1px 1px 0 #20120a}
.chip.en i{display:block;width:78px;height:16px;background:#20120a;border:2px solid #160c06;box-shadow:inset 0 2px 0 #00000066;position:relative}
.chip.en u{position:absolute;left:0;top:0;height:9px;width:100%;background:linear-gradient(180deg,#8ed960 0 55%,#4f9636 55% 100%);transition:width .25s var(--out)}
/* «след урона»: светлая полоса догоняет основную с задержкой — видно, сколько сил только что ушло */
.chip.en #enGhost{position:absolute;left:0;top:0;height:9px;width:100%;background:#fff3c4;transition:width .6s var(--out) .35s}
.chip.en s{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(180deg,#ffe3b0,#d9a51f);transition:width .35s}
.chip.en.low u{background:linear-gradient(180deg,#ffd23f 0 55%,#c07a12 55% 100%)}
.chip.en.crit u{background:linear-gradient(180deg,#ff8a7a 0 55%,#b8271a 55% 100%)}
.chip.en.crit span{color:#ff9a8a}
/* ── меню настроек: микшер и клавиши ── */
.srow{display:flex;align-items:center;gap:12px;padding:6px 4px;border-bottom:2px dashed #d3b878}
.srow label{flex:0 0 120px;color:var(--ink);font-weight:700}
.srow b{flex:0 0 52px;text-align:right;color:#8a3a10;font-variant-numeric:tabular-nums}
.srow input[type=range]{flex:1}
.srow.check{cursor:pointer}
.srow.check input{width:20px;height:20px;accent-color:#a3652f}
.srow.check{font-size:var(--fs18,18px);color:var(--ink)}
.srow.check small{font-size:var(--fs14,14px);color:#6b4a26}
.mixdesc{font-size:var(--fs15,15px);color:#6b4a26;line-height:1.35;margin:0 4px 10px;padding-left:2px}
input[type=range]{-webkit-appearance:none;appearance:none;height:16px;background:#20120a;border:2px solid #160c06;
 box-shadow:inset 0 2px 0 #00000066;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:26px;
 background:linear-gradient(180deg,#ffe3b0 0 45%,#c98850 45% 100%);border:2px solid #5f3820;cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:22px;border-radius:0;
 background:linear-gradient(180deg,#ffe3b0 0 45%,#c98850 45% 100%);border:2px solid #5f3820;cursor:pointer}
.keylist{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.krow{display:flex;align-items:center;gap:10px;padding:5px 4px;border-bottom:2px dashed #d3b878}
.krow .knm{flex:1 1 220px;color:var(--ink);font-weight:700}
.krow .kval{flex:0 0 210px;text-align:center;color:var(--ink);font-size:var(--fs17,17px);letter-spacing:.5px}
.krow .kval.blink{animation:blink .8s steps(2) infinite;color:#b8271a;font-weight:700}
@keyframes blink{50%{opacity:.25}}
.krow .kbtn{flex:0 0 110px;font-size:var(--fs16,16px);padding:4px 6px}
/* чипы-клавиши: деревянные «капельки», крупные и читаемые */
kbd{display:inline-block;min-width:14px;padding:1px 7px;text-align:center;background:linear-gradient(180deg,#fff3cf 0 55%,#e6cd90 55% 100%);
 border:2px solid var(--wood-d);box-shadow:0 2px 0 var(--wood-d);color:#20120a;font-family:inherit;font-weight:700;font-size:var(--fs16_5,16.5px);line-height:21px}
.krow kbd{font-size:var(--fs17,17px)}

/* ── контекстная панель ── */
#ctxPanel{position:fixed;right:12px;top:86px;width:292px;z-index:9;font-size:var(--fs18,18px);line-height:1.4}
#ctxPanel .row{display:flex;justify-content:space-between;gap:8px;border-bottom:2px dashed #d3b878;padding:3px 0}
#ctxPanel .row b{color:#7c4c2c}
#ctxPanel .st{margin-top:7px;font-weight:700}
#ctxPanel .st.ok{color:#2c7a1e}#ctxPanel .st.warn{color:#c07a12}#ctxPanel .st.bad{color:var(--red)}#ctxPanel .st.done{color:#1e5fa8}
#ctxPanel .hand{margin-top:9px;padding-top:7px;border-top:3px solid #d3b878;color:#5b3b20}
#ctxPanel .hand b{color:#8a4a12}
@media(max-width:900px){#ctxPanel{display:none}}

/* ── подсказка клавиш (хотбар теперь круглый, рисуется на canvas) ── */
#keysHint{position:fixed;bottom:16px;left:14px;z-index:9;font-size:var(--fs16,16px);color:#fffc;background:#3a2413c8;padding:6px 12px;border:2px solid #20120a88}
@media(max-width:1000px),(max-height:560px){#keysHint{display:none}} /* на маленьком экране подсказка съедала полкадра */

/* ── оверлей ── */
#overlay{position:fixed;inset:0;background:rgba(10,14,8,.45);z-index:20;display:flex;align-items:center;justify-content:center;padding:20px}
#overlay .big{width:min(1280px,97vw);max-height:90vh;display:flex}
#overlay .fin{display:flex;flex-direction:column;min-height:0;flex:1;min-width:0}
.phead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:repeating-linear-gradient(90deg,#b9713f 0 46px,#ad6737 46px 92px);border-bottom:4px solid var(--wood-d)}
.phead h2{font-family:var(--f-sign);font-weight:400;font-size:var(--fs20,20px);letter-spacing:1px;line-height:1.3;color:#fff;text-shadow:2px 2px 0 #0007}
.pbody{overflow:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--wood-d) var(--paper-d)}
.pbody::-webkit-scrollbar{width:12px}.pbody::-webkit-scrollbar-thumb{background:var(--wood-d);border:3px solid var(--paper-d)}
.ovsec{display:none}.ovsec.on{display:block}
.sech{font-family:var(--f-body);font-weight:400;font-size:var(--fs12,12px);letter-spacing:1px;line-height:1.5;color:#fff;background:var(--wood-d);display:flex;align-items:center;gap:10px;padding:7px 14px;margin:6px 0 12px;width:max-content;box-shadow:4px 4px 0 #00000022}
.sech img{width:26px;height:26px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;margin-bottom:14px}
.card{background:var(--paper-d);padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;overflow:hidden;box-shadow:inset 0 3px 0 #fff7,inset 0 -4px 0 #00000022;transition:transform .1s steps(2)}
.card:hover{transform:translateY(-3px)}
.card .top{display:flex;gap:11px;align-items:center;min-width:0}
.card .top img{width:56px;height:56px;flex:none}
.card .top h4{font-family:var(--f-body);font-size:var(--fs13,13px);font-weight:400;line-height:1.6;color:var(--wood-d);min-width:0;overflow-wrap:anywhere}
.card .top h4 small{font-family:var(--f-body);font-size:var(--fs16,16px);font-weight:600;color:#8a6a3a}
.card .desc{font-size:var(--fs17,17px);line-height:1.4;color:#5b3b20}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:var(--fs15,15px);padding:2px 9px;border:2px solid var(--wood-d);background:var(--paper);font-weight:700}
.tag.wl{color:#1e5fa8}.tag.wm{color:#c07a12}.tag.wh{color:var(--red)}
.buyrow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:auto}
.cost{font-family:'Tiny5','Segoe UI',monospace;font-weight:700;font-size:var(--fs18,18px);color:#9c720e;display:flex;gap:6px;align-items:center}
.buyn{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.have{font-size:var(--fs14,14px);font-weight:700;color:#2c5e1e;background:#e8f4d8;border:2px solid #86bd63;padding:2px 8px;white-space:nowrap;min-width:44px;text-align:center}
.pbtn.sm{font-size:var(--fs15,15px);padding:8px 12px}
.note{font-size:var(--fs17,17px);color:#5b3b20;margin:4px 2px 10px}
.bonus{background:repeating-linear-gradient(90deg,#ffd23f 0 14px,#ffc61a 14px 28px);border:4px solid #6d500a;font-family:'Tiny5','Segoe UI',monospace;font-weight:700;font-size:var(--fs19,19px);color:#3a2413;padding:11px 15px;margin-bottom:14px}
.mrow{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 6px;border-bottom:3px dashed #d3b878}
.mrow img{width:48px;height:48px}
.mrow .nm{font-weight:700;font-size:var(--fs19,19px);min-width:0}
.mrow .nm small{display:block;font-size:var(--fs16,16px);color:#7c5c34;font-weight:400}
.mprice{font-weight:700;font-size:var(--fs17,17px);text-align:right;line-height:1.5}
.mprice .up{color:#2c7a1e}.mprice .dn{color:var(--red)}.mprice .fl{color:#8a6a3a}
.mbtns{display:flex;gap:6px}
.helplist{list-style:none;font-size:var(--fs18_5,18.5px);line-height:1.5}
.helplist li{padding:7px 0 7px 26px;position:relative;border-bottom:2px dashed #e0c78c}
.helplist li::before{content:"▸";position:absolute;left:4px;color:var(--green);font-weight:700}
.helplist b{color:#8a4a12}

/* ── панель выбранного предмета (правый нижний угол) ── */
#selPanel{position:fixed;right:14px;bottom:14px;z-index:9;display:none}
#selPanel .fin{display:flex;align-items:center;gap:11px;padding:9px 14px 9px 9px}
#selPanel img{width:66px;height:66px;flex:none}
#selPanel .seltxt{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
#selPanel b{display:inline-block;font-size:var(--fs19,19px);font-weight:700;color:var(--wood-d);line-height:1.1;max-width:min(210px,42vw)}
#selPanel .cnt{font-size:var(--fs15,15px);font-weight:600;color:#5b3b20;background:#3a241312;padding:1px 9px;border:2px solid var(--wood-d)}
#selPanel.zero .cnt{color:var(--red)}
#selPanel.pulse b{animation:selpulse .5s var(--spring)}
@keyframes selpulse{0%{transform:translateX(-10px);opacity:0}60%{transform:translateX(2px);opacity:1;color:var(--green)}100%{transform:none}}
#selPanel img{animation:floaty 2.6s ease-in-out infinite}
#selPanel.pulse img{animation:iconSwap .55s var(--spring),floaty 2.6s ease-in-out .55s infinite}
@keyframes iconSwap{0%{transform:scale(.2) rotate(-25deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
#selPanel.pulse{animation:panelKick .4s var(--spring)}
@keyframes panelKick{30%{transform:scale(1.05,.95)}}
@media(max-width:640px){#selPanel img{width:48px;height:48px}#selPanel b{font-size:var(--fs16,16px)}#selPanel .cnt{font-size:var(--fs13,13px)}}

/* ── тосты ── */
#toasts{position:fixed;right:14px;bottom:120px;z-index:30;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{position:relative;display:flex;gap:10px;align-items:flex-start;background:#3a2413f2;color:#ffe3b0;border:3px solid #20120a;padding:9px 15px 11px 11px;font-size:var(--fs17_5,17.5px);line-height:1.3;max-width:46vw;max-height:160px;overflow:hidden;
  opacity:0;transform:translateX(60px) scale(.9);transition:transform .45s var(--spring),opacity .2s,max-height .3s var(--in),padding .3s,margin .3s,border-width .3s;box-shadow:0 4px 0 #00000044}
.toast.on{opacity:1;transform:none}
.toast.out{opacity:0;transform:translateX(40px);max-height:0;padding-top:0;padding-bottom:0;border-width:0;margin-top:-8px;transition:transform .3s var(--in),opacity .25s,max-height .3s var(--in) .08s,padding .3s .08s,margin .3s .08s,border-width .3s .08s}
.toast i{flex:none;font-style:normal;font-weight:700;width:22px;height:22px;display:grid;place-items:center;background:#20120a;color:#ffe3b0;font-size:var(--fs14,14px);margin-top:1px}
.toast.on i{animation:toastIc .6s var(--spring) .1s both}
@keyframes toastIc{0%{transform:scale(0) rotate(-90deg)}100%{transform:none}}
.toast::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:currentColor;opacity:.35;transform-origin:left;transform:scaleX(0)}
.toast.on::after{animation:toastBar 3s linear forwards}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.err{border-color:var(--red);color:#ffc9be}
.toast.err.on{animation:toastShake .42s var(--out) .15s}
.toast.err i{background:var(--red);color:#fff}
@keyframes toastShake{20%{margin-right:8px}40%{margin-right:-6px}60%{margin-right:4px}80%{margin-right:-2px}}
.toast.gold{border-color:#9c720e;color:var(--gold)}
.toast.gold i{background:#9c720e;color:#fff3b0}

/* ══════════ АНИМАЦИИ ИНТЕРФЕЙСА ══════════
   Правила: появление — ease-out с лёгким перелётом (--spring), уход — быстрый ease-in (--in);
   крупное двигается медленнее мелкого; каскад 30–40 мс между элементами. */

/* HUD въезжает сверху при загрузке — по очереди */
#hud .chip,#hud .pbtn{animation:hudIn .6s var(--spring) backwards}
#hud .hgroup:first-child>*:nth-child(1){animation-delay:.15s}
#hud .hgroup:first-child>*:nth-child(2){animation-delay:.21s}
#hud .hgroup:first-child>*:nth-child(3){animation-delay:.27s}
#hud .hgroup:first-child>*:nth-child(4){animation-delay:.33s}
#hud .hgroup:first-child>*:nth-child(5){animation-delay:.39s}
#hud .hgroup:last-child>*:nth-child(1){animation-delay:.3s}
#hud .hgroup:last-child>*:nth-child(2){animation-delay:.36s}
#hud .hgroup:last-child>*:nth-child(3){animation-delay:.42s}
#hud .hgroup:last-child>*:nth-child(4){animation-delay:.48s}
@keyframes hudIn{0%{opacity:0;transform:translateY(-40px) scale(.8)}100%{opacity:1;transform:none}}
#hud .pbtn.pop{animation:btnPop .45s var(--spring)}
#ctxPanel{animation:slideInR .6s var(--spring) .5s both}

#keysHint{animation:fadeUp .8s var(--out) 1s both}
@keyframes slideInR{0%{opacity:0;transform:translateX(60px)}100%{opacity:1;transform:none}}
@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* логотип: колосок покачивается на ветру */
#logoIcon{transform-origin:50% 90%;animation:sway 3.2s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.chip.logo span{background:linear-gradient(90deg,#fff 0 40%,#ffe98a 50%,#fff 60% 100%);background-size:300% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(2px 2px 0 #0009);
 animation:shine 6s linear infinite}
@keyframes shine{0%,70%{background-position:100% 0}100%{background-position:0 0}}

/* часы: «щелчок» на ровный час, иконка солнца/луны переворачивается */
#clockTxt,#dayTxt{display:inline-block}
#clockTxt.tick,#dayTxt.pop{animation:tick .5s var(--spring)}
@keyframes tick{30%{transform:scale(1.3) translateY(-2px);color:var(--gold)}}
.chip img.spin{animation:spinIn .7s var(--spring)}
@keyframes spinIn{0%{transform:rotate(-180deg) scale(.3)}100%{transform:none}}
.chip.clock.warn span{animation:warnPulse 1s ease-in-out infinite}
@keyframes warnPulse{50%{color:#ff5a3c;text-shadow:0 0 8px #ff5a3c88,2px 2px 0 #0008}}

/* силы: критический уровень пульсирует, новый уровень — золотая вспышка */
.chip.en.crit i{animation:critPulse .8s ease-in-out infinite}
@keyframes critPulse{50%{box-shadow:0 0 0 2px #e6482e,0 0 12px #e6482e}}
.chip.en.lvlup{animation:lvlUp .9s var(--spring)}
@keyframes lvlUp{0%{transform:scale(1)}25%{transform:scale(1.18);box-shadow:0 0 0 3px var(--gold),0 0 24px #ffd23f}100%{transform:scale(1)}}
.chip.en.lvlup em{animation:tick .6s var(--spring) .1s}

/* оверлей: фон проявляется, окно выпрыгивает с перелётом; закрытие — быстрое сжатие */
#overlay.show{animation:ovFade .25s var(--out) both}
#overlay.show .big{animation:ovPop .45s var(--spring) both}
#overlay.closing{animation:ovFadeOut .19s var(--in) both}
#overlay.closing .big{animation:ovPopOut .19s var(--in) both}
@keyframes ovFade{from{background:rgba(10,14,8,0)}to{background:rgba(10,14,8,.45)}}
@keyframes ovFadeOut{from{background:rgba(10,14,8,.45)}to{background:rgba(10,14,8,0)}}
@keyframes ovPop{0%{opacity:0;transform:translateY(30px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes ovPopOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(16px) scale(.94)}}
#overlay.show .phead h2{animation:titleDrop .55s var(--spring) .08s both}
@keyframes titleDrop{0%{opacity:0;transform:translateY(-18px) rotate(-3deg)}100%{opacity:1;transform:none}}
#overlay.show #ovClose{animation:spinIn .5s var(--spring) .15s backwards}
#ovClose:hover{transform:rotate(90deg) scale(1.08)}

/* каскад карточек и строк (--i выставляет JS) */
#overlay.show .ovsec.on :is(.card,.mrow,.helplist li,.srow,.krow,.sech,.bonus){
 animation:cardIn .5s var(--spring) backwards;animation-delay:calc(.08s + var(--i,0) * 35ms)}
@keyframes cardIn{0%{opacity:0;transform:translateY(22px) scale(.96)}100%{opacity:1;transform:none}}
.card{transition:transform .25s var(--spring),box-shadow .2s}
.card:hover{transform:translateY(-4px) rotate(-.3deg);box-shadow:inset 0 3px 0 #fff7,inset 0 -4px 0 #00000022,0 6px 0 #00000018}
.card:hover .top img{animation:wiggle .5s var(--spring)}
@keyframes wiggle{25%{transform:rotate(-8deg) scale(1.1)}60%{transform:rotate(5deg) scale(1.06)}100%{transform:none}}
.have.pop{animation:havePop .45s var(--spring)}
@keyframes havePop{35%{transform:scale(1.3);background:#fff3b0;border-color:var(--gold)}}
.bonus{position:relative;overflow:hidden}
.bonus::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#fff8 50%,transparent 70%);transform:translateX(-100%);animation:sweep 3.5s ease-in-out 1s infinite}
@keyframes sweep{0%{transform:translateX(-100%)}40%,100%{transform:translateX(100%)}}
.mrow{transition:background .3s}
.mrow.sold{animation:sold .6s var(--out)}
@keyframes sold{0%{background:#fff3b0}100%{background:transparent}}
.mrow.sold img{animation:wiggle .5s var(--spring)}

/* летящие иконки (монеты, покупки) */
.flyer{position:fixed;left:0;top:0;z-index:60;pointer-events:none;filter:drop-shadow(0 2px 0 #20120a) drop-shadow(0 0 6px #ffd23f88)}

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

/* ══════════ БОЛЬШОЕ ОБНОВЛЕНИЕ: окна и панели ══════════ */
.chip.season span{font-family:var(--f-body);font-weight:400;font-size:var(--fs11,11px);letter-spacing:1px;text-shadow:2px 2px 0 #0008}
.ttabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ttabs .pbtn{font-size:var(--fs14,14px);padding:6px 10px}
.meter{height:10px;background:#20120a;border:2px solid #160c06;margin:2px 0}
.meter i{display:block;height:100%;background:linear-gradient(180deg,#8ed960 0 55%,#4f9636 55%)}
.meter.wear i{background:linear-gradient(180deg,#ff9a6a 0 55%,#c0502a 55%)}
.npchead{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.npchead>img{width:100px;height:130px;background:#e6cd90;border:3px solid var(--wood-d);flex:none}
.npchead h3{font-family:var(--f-sign);font-weight:400;font-size:var(--fs18,18px);color:var(--wood-d)}
.npchead small{font-size:var(--fs15,15px);color:#7c5c34}
.hearts{font-size:var(--fs20,20px);color:#e0405a;letter-spacing:2px;margin:4px 0}.hearts span{color:#d3b878}
.bubble{background:#fff8e0;border:3px solid var(--wood-d);padding:10px 14px;font-size:var(--fs18,18px);margin:6px 0;position:relative;box-shadow:0 3px 0 #00000022}
.bubble::before{content:"";position:absolute;left:-12px;top:14px;border:6px solid transparent;border-right-color:var(--wood-d)}
.giftgrid,.itemgrid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gift{display:flex;flex-direction:column;align-items:center;gap:2px;width:92px;padding:6px 4px;background:var(--paper-d);border:3px solid var(--wood-d);cursor:pointer;font-family:inherit;font-size:var(--fs13,13px);color:var(--ink);transition:transform .15s var(--spring)}
.gift:hover{transform:translateY(-3px)}.gift img{width:40px;height:40px}.gift.love{background:#ffd8e0}.gift.like{background:#e8f4d8}.gift:disabled{opacity:.5;cursor:not-allowed}
.itemcell{position:relative;display:flex;flex-direction:column;align-items:center;width:88px;padding:6px 4px;background:var(--paper-d);border:3px solid var(--wood-d);font-size:var(--fs13,13px);text-align:center}
.itemcell img{width:40px;height:40px}.itemcell b{position:absolute;right:6px;top:4px;color:#8a3a10;font-size:var(--fs15,15px)}
.itemcell.food{cursor:pointer;background:#fff3c4}.itemcell.food::after{content:"съесть";font-size:var(--fs11,11px);color:#2c7a1e}
.achlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-bottom:12px}
.ach{background:var(--paper-d);border:3px solid #c9b48a;padding:8px 12px;display:flex;flex-direction:column;gap:2px;opacity:.75}
.ach b{color:var(--wood-d)}.ach span{font-size:var(--fs15,15px);color:#5b3b20}.ach em{font-style:normal;font-size:var(--fs14,14px);color:#9c720e}
.ach.done{opacity:1;border-color:#9c720e;background:#fff3c4}
#drvPanel{position:fixed;left:50%;bottom:14px;transform:translate(-50%,140%);z-index:9;transition:transform .45s var(--spring)}
#drvPanel.on{transform:translate(-50%,0)}
#drvPanel .fin{display:flex;align-items:center;gap:14px;padding:8px 14px}
#drvPanel .dn{font-family:var(--f-body);font-weight:400;font-size:var(--fs12,12px);color:var(--wood-d)}
#drvPanel .bar{display:flex;flex-direction:column;gap:2px}#drvPanel .bar label{font-size:var(--fs12,12px);font-weight:700;color:#5b3b20}
#drvPanel .bar i{display:block;width:110px;height:12px;background:#20120a;border:2px solid #160c06;position:relative}
#drvPanel .bar u{position:absolute;left:0;top:0;height:100%;background:linear-gradient(180deg,#8ed960 0 55%,#4f9636 55%);transition:width .3s}
#drvPanel .wear u{background:linear-gradient(180deg,#ffb07a 0 55%,#c0602a 55%)}
#drvPanel .bar.low i{animation:critPulse .8s ease-in-out infinite}
#drvPanel .spd{font-weight:700;font-size:var(--fs18,18px);min-width:84px;text-align:right;font-variant-numeric:tabular-nums}
#drvPanel .ex{font-size:var(--fs15,15px);color:#5b3b20}
@media(max-width:760px){#drvPanel .fin{flex-wrap:wrap;gap:8px}#drvPanel .bar i{width:80px}}

/* ── пиксельный текст: без искусственного жирного/курсива (у Tiny5 одно начертание) ── */
*{font-synthesis:none}
body{text-rendering:optimizeSpeed;-webkit-font-smoothing:none}
.pxi{display:inline-block;width:1em;height:1em;vertical-align:-.12em;background-size:100% 100%;image-rendering:pixelated;margin:0 .08em}
.hearts .pxi{width:22px;height:20px;margin-right:2px}
.toast i .pxi{width:14px;height:14px;margin:0;background-color:transparent}
#btnSnd .pxi{width:20px;height:20px;vertical-align:middle}

/* ── обучение: карточка с текущим шагом и подсветка цели ── */
#tutor{position:fixed;left:14px;top:86px;width:300px;z-index:11;font-size:var(--fs18,18px);line-height:1.45}
#tutor .th{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
#tutor .th b{font-family:var(--f-sign);font-size:var(--fs12,12px);color:#7c4c2c;letter-spacing:.5px;white-space:nowrap}
#tutor .th i{font-style:normal;font-size:var(--fs16,16px);color:#8a4a12;margin-right:auto}
#tutor p{margin:0;color:#3a2413}
#tutor b{color:#8a4a12}
#tutor .tfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;flex-wrap:wrap}
#tutor .tfoot .pbtn{font-size:var(--fs14,14px);padding:4px 8px}
#tutor .tdots{display:flex;gap:4px;flex-wrap:wrap}
#tutor .tdots i{width:14px;height:8px;background:#d3b878;border:2px solid #8a6a3a}
#tutor .tdots i.on{background:#6cc24a}
#tutor .tdots i.now{background:#ffd23f;animation:tutPulse .9s infinite}
@keyframes tutPulse{50%{background:#fff0a0}}
.tutglow{animation:tutGlow 1s infinite;box-shadow:0 0 0 3px #ffd23f}
@keyframes tutGlow{50%{box-shadow:0 0 0 6px #ffd23f88}}
@media(max-width:1000px),(max-height:560px){#tutor{width:min(238px,42vw);font-size:var(--fs16,16px);line-height:1.35}
 #tutor .tfoot .pbtn{font-size:var(--fs12,12px);padding:3px 6px}}

/* ── касания: без выделения, без подсветки тапа и без «оттягивания» страницы ── */
html,body{-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#game,#txt{touch-action:none}

/* ── выбор языка в настройках ── */
.langs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}
.langs .pbtn{min-width:104px}

/* ── длинные переводы в панели «Рядом»: вторая часть строки переносится целиком, а не узкой колонкой ── */
#ctxPanel .row{flex-wrap:wrap}
#ctxPanel .row>span{margin-left:auto;text-align:right}