/* kit.css «Шурынглиш»: структура деталей. Одежда тем — anime.css / space.css; правила и классы — NOTES.md. */

body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--tone1,none);-webkit-mask:var(--tmask1,none);mask:var(--tmask1,none)}
body::after{background:var(--tone2,none);-webkit-mask:var(--tmask2,none);mask:var(--tmask2,none)}

.ico{display:inline-grid;place-items:center;flex:none;width:var(--ico,28px);height:var(--ico,28px);line-height:0;vertical-align:-.3em}
.ico svg,.shura svg{display:block;width:100%;height:100%;overflow:visible}
.shura{display:inline-block;flex:none;width:var(--shura,96px);height:calc(var(--shura,96px)*.834);line-height:0}
.shura g[class]{transform-box:fill-box;transform-origin:50% 50%}
.shura .shura-body{transform-origin:50% 100%;animation:k-bob 3.4s ease-in-out infinite}
.shura .shura-eyes{transform-origin:50% 62%;animation:k-blink 4.8s linear infinite}
.shura .shura-wave{transform-origin:12% 88%;animation:k-wave 2.4s ease-in-out infinite}
.shura .shura-drop{animation:k-drop 1.1s ease-in-out infinite alternate}
.shura .shura-spark{animation:k-twinkle 1.6s ease-in-out infinite}
.shura .shura-stars{animation:k-throb 1.1s ease-in-out infinite}
.shura .shura-float{animation:k-float 1.7s ease-in-out infinite alternate}
.shura-cheer .shura-body{animation:k-jump .6s ease-out,k-bob 3.4s ease-in-out .6s infinite}
.shura-oops .shura-body{animation:k-flinch .45s ease-out,k-bob 3.4s ease-in-out .45s infinite}
.shura-party .shura-body{animation:k-party .7s ease-in-out 2,k-bob 3.4s ease-in-out 1.4s infinite}
.shura-sleep .shura-body{animation-duration:5.2s}

/* нажатие — через translate: не спорит с transform у .cta */
.btn{isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:12px 20px;border:var(--outline);border-radius:var(--r-btn,18px);
  background:var(--accent);color:#fff;box-shadow:var(--shadow);font-family:inherit;font-size:var(--fs-btn);font-weight:900;line-height:1.15;text-align:center;cursor:pointer;
  transition:translate .08s,box-shadow .08s,filter .08s}
.btn:not(.cta){position:relative}
.btn:active,.btn[data-state=pressed]{translate:var(--press,3px 3px);box-shadow:var(--shadow-press)}
.btn .ico{--ico:28px}
.btn.secondary{background:var(--card);color:var(--ink)}
.btn.gold,.btn.gold:active{background:none;border-color:transparent;box-shadow:none;color:var(--gold-ink,#241400)}
.btn.gold::before{content:"";position:absolute;inset:0;z-index:-1;border:var(--gold-line,var(--outline));border-radius:inherit;background:var(--gold-bg,var(--gold));box-shadow:var(--gold-fx,var(--shadow));transform:skewX(var(--skew,0deg))}
.btn.gold:active::before,.btn.gold[data-state=pressed]::before{box-shadow:var(--gold-press,var(--shadow-press))}
.btn[disabled]{cursor:default;opacity:.55;filter:saturate(.15);box-shadow:none;translate:none}
.btn.gold[disabled]::before{box-shadow:none}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 16px;border:var(--outline);border-radius:999px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-sm);font-family:inherit;font-size:var(--fs);font-weight:800;line-height:1.1}
button.pill{min-width:48px;cursor:pointer;transition:translate .08s,box-shadow .08s}
button.pill:active,.pill[data-state=pressed]{translate:var(--press-sm,2px 2px);box-shadow:none}
button.pill[aria-label]{flex:none;height:48px;padding:0 8px}
.pill .ico{--ico:26px}
.pill.on,.pill.offline{background:var(--gold);color:#241400}

.chip{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:48px;padding:6px 16px;border:var(--outline);border-radius:999px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-sm);font-family:inherit;font-size:var(--fs);font-weight:900;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.chip>.ico:first-child{--ico:30px;margin-left:-6px}
button.chip{cursor:pointer}
.chip.on{background:var(--gold);color:#241400}

.card{margin:var(--gap) 0;padding:18px;border:var(--outline);border-radius:var(--r);background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.progress{position:relative;flex:1;min-width:0;height:18px;border:var(--outline);border-radius:999px;background:var(--track,var(--card));overflow:hidden}
.progress i{display:block;width:0;height:100%;border-radius:inherit;background:var(--fill,var(--accent2));box-shadow:var(--fill-fx,none);transition:width .5s cubic-bezier(.2,.9,.3,1.2)}

/* ответы: idle / pressed / ok / no / reveal (верный после ошибки) */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{position:relative;min-width:0;min-height:64px;padding:10px 12px;border:var(--outline);border-radius:var(--r-opt,16px);background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm);
  font-family:inherit;font-size:var(--fs-btn);font-weight:800;line-height:1.2;overflow-wrap:anywhere;cursor:pointer;transition:translate .08s,box-shadow .08s}
.opt:active:not(:disabled),.opt[data-state=pressed]{translate:var(--press,3px 3px);box-shadow:none}
.opt.img{display:flex;align-items:center;justify-content:center;min-height:120px;padding:0;overflow:hidden}
.opt.img .pic{border:0;border-radius:0;box-shadow:none;max-height:none}
.opt.sel{outline:4px solid var(--gold);outline-offset:2px}
.opt.img:is(.ok,[data-state])::before{top:8px;right:8px}
.opt.img:is(.ok,[data-state])::after{top:14px;right:19px}
.opt:is(.ok,[data-state=ok],[data-state=reveal]){background:var(--ok-bg);border-color:var(--ok-line);box-shadow:var(--ok-fx,none);color:var(--ok-ink,var(--ink))}
.opt:is(.ok,[data-state=ok]){animation:k-ok .5s ease-out}
.opt[data-state=reveal]{outline:3px dashed var(--ok-line);outline-offset:4px;animation:k-hint .8s ease-in-out 3}
.opt:is(.no,[data-state=no]){background:var(--no-bg,var(--bg2));border-color:var(--no-line);box-shadow:none;color:var(--muted);filter:saturate(.3);animation:k-no .42s ease-out}
.opt:is(.ok,[data-state=ok],[data-state=reveal])::before{content:"";position:absolute;top:-13px;right:-11px;width:30px;height:30px;border-radius:50%;border:var(--badge-line);background:var(--good);box-shadow:var(--badge-fx,none)}
.opt:is(.ok,[data-state=ok],[data-state=reveal])::after{content:"";position:absolute;top:-7px;right:0;width:8px;height:14px;border:solid #fff;border-width:0 3.5px 3.5px 0;transform:rotate(45deg)}

.panel-hero{position:relative;isolation:isolate;overflow:hidden;border:var(--outline-hero,var(--outline));background:var(--hero-bg,var(--card));box-shadow:var(--shadow-hero,var(--shadow))}
.panel-hero::before,.panel-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.panel-hero::before{background:var(--lines,none);-webkit-mask:var(--lines-mask,none);mask:var(--lines-mask,none)}
.panel-hero::after{background:var(--hero-tone,none);-webkit-mask:var(--hero-tone-mask,none);mask:var(--hero-tone-mask,none)}
.panel-hero h1{margin:0 0 8px;font-size:var(--fs-h1);font-weight:900;line-height:1.12;overflow-wrap:anywhere;color:var(--title,inherit);text-shadow:var(--title-fx,none);transform:skewX(var(--skew,0deg));transform-origin:0 100%}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:4px;padding:8px 8px calc(env(safe-area-inset-bottom) + 8px);background:var(--tabbar,var(--card));border-top:var(--outline);box-shadow:var(--tabbar-fx,none)}
.tab{position:relative;isolation:isolate;flex:1;display:flex;align-items:center;justify-content:center;gap:4px;min-height:56px;padding:0 6px;border:0;border-radius:16px;background:none;
  color:var(--ink);font-family:inherit;font-size:18px;font-weight:900;white-space:nowrap;cursor:pointer;transition:flex .3s cubic-bezier(.2,.9,.3,1.2)}
.tab .ico{--ico:26px}
.tab span:not(.ico){display:none}
.tab.on{flex:2.2;color:var(--tab-on-ink,var(--ink))}
.tab.on span:not(.ico){display:inline}
.tab.on::before{content:"";position:absolute;inset:5px 1px;z-index:-1;border:var(--outline);border-radius:14px;background:var(--tab-on);box-shadow:var(--tab-on-fx,none);transform:skewX(var(--skew,0deg))}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 160px);z-index:60;width:max-content;max-width:min(90vw,420px);padding:12px 18px;transform:translateX(-50%);
  border:var(--outline);border-radius:16px;background:var(--toast-bg);color:var(--toast-ink);box-shadow:var(--shadow);font-size:var(--fs);font-weight:800;line-height:1.25;text-align:center}
.sticker{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:8px 16px 8px 10px;border:var(--outline);border-radius:14px;background:var(--gold);color:#241400;font-size:var(--fs);font-weight:900;line-height:1.2}
.sticker .ico{--ico:32px}
.word{min-width:0;font-size:var(--fs-word);font-weight:900;letter-spacing:.5px;line-height:1.05;overflow-wrap:anywhere;color:var(--word,var(--ink));text-shadow:var(--word-fx,none)}

/* наклейка/табличка: одна на экране, 0,9 с */
.sfx{position:fixed;z-index:80;isolation:isolate;padding:.6em .85em .65em;pointer-events:none;font-size:calc(30px * var(--sfx-k,1));font-weight:900;line-height:1;white-space:nowrap;translate:-50% -50%;transform:rotate(-8deg)}
.sfx-anime{animation:k-sfx-pop .9s ease-out both}
.sfx-space{animation:k-sfx-neon .9s linear both}

.step.dialog .card:not(.panel-hero){position:relative;margin:0 48px 0 0;border-radius:18px 18px 18px 6px}
.step.dialog .card.mine{margin:0 0 0 48px;border-radius:18px 18px 6px 18px;background:var(--mine-bg,var(--gold));border:var(--mine-line,var(--outline));color:var(--mine-ink,#241400)}
.step.chest .opt{display:grid;place-items:center;width:100%;min-height:250px;padding:28px 12px}
.step.chest .opt>.ico{--ico:168px}
.step.chest .ico :is(.lid,.cb,.lk){transform-box:view-box;transform-origin:41px 24px;transition:opacity .15s}
.step.chest .open .lid{transform:translate(1px,-8px) rotate(-17deg);animation:k-lid .5s ease-out}
.loot{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:center;gap:10px;pointer-events:none}
.loot .ico{--ico:40px;animation:k-rise .6s ease-out both}
.loot .ico:nth-child(2){--ico:52px;animation-delay:.08s}
.loot .ico:nth-child(3){animation-delay:.16s}
.levelup{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.levelup .panel-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:440px;padding:28px 16px 24px;animation:k-cover .5s ease-out}
.lv-badge{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 20px;border-radius:999px;font-size:30px;font-weight:900;letter-spacing:.06em}
.lv-badge i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;font-size:42px;font-style:normal;letter-spacing:0}

@keyframes k-bob{50%{transform:translateY(-4px)}}
@keyframes k-blink{0%,93%,100%{transform:none}96%{transform:scaleY(.1)}}
@keyframes k-wave{0%,55%,100%{transform:none}14%{transform:rotate(-18deg)}28%{transform:rotate(9deg)}42%{transform:rotate(-12deg)}}
@keyframes k-drop{from{transform:translateY(-3px)}to{transform:translateY(5px)}}
@keyframes k-twinkle{50%{opacity:.45;transform:scale(.8) rotate(12deg)}}
@keyframes k-throb{50%{transform:scale(1.1)}}
@keyframes k-float{from{opacity:.55;transform:translate(0,3px)}to{opacity:1;transform:translate(3px,-4px)}}
@keyframes k-jump{0%,100%{transform:none}30%{transform:translateY(-16px) scale(.95,1.06)}58%{transform:translateY(0) scale(1.08,.92)}80%{transform:scale(.98,1.02)}}
@keyframes k-flinch{0%,100%{transform:none}20%{transform:translateX(-5px) rotate(-3deg)}45%{transform:translateX(4px) rotate(2deg)}70%{transform:translateX(-2px)}}
@keyframes k-party{0%,100%{transform:none}35%{transform:translateY(-12px) rotate(-5deg)}70%{transform:translateY(0) rotate(4deg)}}
@keyframes k-ok{0%,100%{transform:none}35%{transform:translateY(-10px) scale(1.05)}65%{transform:scale(.97,1.03)}}
@keyframes k-no{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes k-hint{50%{transform:scale(1.045)}}
@keyframes k-sfx-pop{0%{opacity:0;transform:scale(.25) rotate(-26deg)}16%{opacity:1;transform:scale(1.2) rotate(-4deg)}28%{transform:scale(.96) rotate(-9deg)}36%,84%{opacity:1;transform:rotate(-8deg)}100%{opacity:0;transform:translateY(-10px) scale(1.06) rotate(-8deg)}}
@keyframes k-sfx-neon{0%{opacity:0}5%{opacity:.8}10%{opacity:.1}16%{opacity:1;filter:brightness(1.7)}21%{opacity:.35}30%,86%{opacity:1;filter:none}100%{opacity:0}}
@keyframes k-flick{0%{opacity:.1}8%{opacity:.75}14%{opacity:.15;filter:brightness(1.6)}24%{opacity:1}32%{opacity:.45}46%,100%{opacity:1;filter:none}}
@keyframes k-slap{0%{opacity:0;transform:scale(1.7) rotate(-14deg)}55%{opacity:1;transform:scale(.94) rotate(-1deg)}}
@keyframes k-lid{0%{transform:none}45%{transform:translate(3px,-17px) rotate(-32deg)}}
@keyframes k-rays{0%{opacity:0;transform:scale(1.5)}30%{opacity:1}}
@keyframes k-rise{0%{opacity:0;transform:translateY(60px) scale(.3)}60%{opacity:1;transform:translateY(-8px) scale(1.1)}}
@keyframes k-cover{0%{opacity:0;transform:scale(1.3) rotate(-5deg)}55%{opacity:1;transform:scale(.97) rotate(.5deg)}}

@media (prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}}