/* Троид - общие стили. Экран игры нарисован под телефон 390x844 и масштабируется под окно. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#FBF8EF;scrollbar-width:none;-webkit-tap-highlight-color:transparent}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body{font-family:'Pangolin',cursive;color:#2B2B3A;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#app{position:relative;width:390px;height:844px;flex-shrink:0;overflow:hidden;background-position:var(--ex,0px) var(--ey,0px);transform-origin:center center}
.screen{position:absolute;left:50%;top:50%;width:390px;height:844px;margin:-422px 0 0 -195px}
.abs{position:absolute}
button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .06s ease-out,box-shadow .06s ease-out}
button:active{transform:translateY(4px) !important;box-shadow:0 1px 0 #2B2B3A !important}
button:disabled{cursor:default}
.play:active{transform:translateY(6px) !important;box-shadow:inset 0 -4px 0 rgba(0,0,0,.15),0 1px 0 #2B2B3A !important}
.piecebtn:active{box-shadow:none !important}
.round{border-radius:50%;border:3px solid #2B2B3A;box-shadow:0 5px 0 #2B2B3A;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.cell{position:absolute;border:3px solid #2B2B3A;border-radius:5px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),inset 3px 3px 0 rgba(255,255,255,.5)}
.overlay{position:absolute;inset:calc(0px - var(--ey,0px)) calc(0px - var(--ex,0px));background:rgba(43,43,58,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.panel{width:350px;padding:20px;border:4px solid #2B2B3A;border-radius:26px;background:#FFF7E6;display:flex;flex-direction:column;gap:12px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-title{display:flex;align-items:center;gap:10px;font-family:'Rubik Mono One',sans-serif;font-size:18px;line-height:1.15}
.close{width:44px;height:44px;flex-shrink:0;border-radius:50%;border:3px solid #2B2B3A;background:#fff;box-shadow:0 3px 0 #2B2B3A;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.card{border:3px solid #2B2B3A;border-radius:16px;background:#fff;box-shadow:0 4px 0 #2B2B3A}
.mono{font-family:'Rubik Mono One',sans-serif}
.muted{color:#5A5A70}
.badge{position:absolute;right:-8px;bottom:-8px;padding:1px 6px;border:2px solid #2B2B3A;border-radius:10px;background:#fff;font-size:14px;line-height:16px}
.check{position:absolute;right:-8px;top:-8px;width:28px;height:28px;border-radius:50%;border:3px solid #2B2B3A;background:#5BCB6A;display:flex;align-items:center;justify-content:center}
@keyframes enter{0%{opacity:0}100%{opacity:1}}
.enter{animation:enter .25s ease-out both}
.paper{background-color:#FBF8EF;background-image:linear-gradient(#D6E4F5 1px,transparent 1px),linear-gradient(90deg,#D6E4F5 1px,transparent 1px);background-size:20px 20px}
.ttl{font-family:'Rubik Mono One',sans-serif;display:inline-block;line-height:1;-webkit-text-stroke:3px #2B2B3A;paint-order:stroke fill;text-shadow:4px 5px 0 #2B2B3A}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(5deg)}}
.drift{animation:drift 5s ease-in-out infinite}
@keyframes pop{0%{transform:scale(0.6);opacity:0}30%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}}
.pop{animation:pop 0.35s ease-out}
@keyframes swing{0%{transform:rotate(-75deg);opacity:0}15%{opacity:1}55%{transform:rotate(8deg)}65%{transform:rotate(0deg)}85%{transform:rotate(-6deg);opacity:1}100%{transform:rotate(-12deg);opacity:0}}
.swing{animation:swing 0.65s ease-in both;transform-origin:58px 58px}
@keyframes impact{0%{transform:scale(0);opacity:1}40%{transform:scale(1.2);opacity:1}100%{transform:scale(1.5);opacity:0}}
.impact{animation:impact 0.35s ease-out 0.33s both}
@keyframes crack{0%{opacity:0}10%{opacity:1}70%{opacity:1}100%{opacity:0}}
.crack{animation:crack 0.5s linear 0.33s both}
@keyframes shakesm{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,1px)}}
.shake-sm{animation:shakesm 0.3s ease-out 0.33s}
.late-text{animation:boomtxt 0.7s ease-out 0.33s both}
@keyframes shard0{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-34px,58px) rotate(-200deg);opacity:0}}.shard0{animation:shard0 0.5s cubic-bezier(.2,.7,.5,1) 0.33s both}
@keyframes shard1{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(34px,58px) rotate(220deg);opacity:0}}.shard1{animation:shard1 0.5s cubic-bezier(.2,.7,.5,1) 0.33s both}
@keyframes shard2{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(-26px,0px) rotate(-160deg);opacity:0}}.shard2{animation:shard2 0.5s cubic-bezier(.2,.7,.5,1) 0.33s both}
@keyframes shard3{0%{transform:translate(0,0) rotate(0deg);opacity:1}100%{transform:translate(28px,4px) rotate(180deg);opacity:0}}.shard3{animation:shard3 0.5s cubic-bezier(.2,.7,.5,1) 0.33s both}
@keyframes spark0{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(42px,13px) scale(0.3);opacity:0}}.spark0{animation:spark0 0.45s ease-out 0.33s both}
@keyframes spark1{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(10px,43px) scale(0.3);opacity:0}}.spark1{animation:spark1 0.45s ease-out 0.33s both}
@keyframes spark2{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(-32px,30px) scale(0.3);opacity:0}}.spark2{animation:spark2 0.45s ease-out 0.33s both}
@keyframes spark3{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(-42px,-13px) scale(0.3);opacity:0}}.spark3{animation:spark3 0.45s ease-out 0.33s both}
@keyframes spark4{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(-10px,-43px) scale(0.3);opacity:0}}.spark4{animation:spark4 0.45s ease-out 0.33s both}
@keyframes spark5{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(32px,-30px) scale(0.3);opacity:0}}.spark5{animation:spark5 0.45s ease-out 0.33s both}
@keyframes burst{0%{transform:scale(0.1) rotate(0deg);opacity:1}35%{transform:scale(1.1) rotate(12deg);opacity:1}100%{transform:scale(1.35) rotate(25deg);opacity:0}}
.boom-burst{animation:burst 0.6s ease-out forwards}
@keyframes ring{0%{transform:scale(0.2);opacity:1}100%{transform:scale(2);opacity:0}}
.boom-ring{animation:ring 0.55s ease-out forwards}
@keyframes smoke{0%{transform:scale(0.3);opacity:0}30%{opacity:0.8}100%{transform:scale(1.6) translateY(-18px);opacity:0}}
.smoke{animation:smoke 0.9s ease-out forwards}
@keyframes boomtxt{0%{transform:scale(0.2) rotate(-12deg);opacity:0}30%{transform:scale(1.25) rotate(-6deg);opacity:1}70%{transform:scale(1) rotate(-6deg);opacity:1}100%{transform:scale(1.05) rotate(-6deg);opacity:0}}
.boom-text{animation:boomtxt 0.8s ease-out forwards}
@keyframes shake{0%,100%{transform:translate(0,0)}15%{transform:translate(-7px,5px)}30%{transform:translate(7px,-5px)}45%{transform:translate(-5px,3px)}60%{transform:translate(4px,-3px)}80%{transform:translate(-2px,1px)}}
.shake{animation:shake 0.45s ease-out}
@keyframes fly0{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(120px,30px) rotate(-300deg) scale(0.4);opacity:0}}.fly0{animation:fly0 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly1{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(66px,75px) rotate(360deg) scale(0.4);opacity:0}}.fly1{animation:fly1 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly2{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(85px,115px) rotate(360deg) scale(0.4);opacity:0}}.fly2{animation:fly2 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly3{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(15px,109px) rotate(-300deg) scale(0.4);opacity:0}}.fly3{animation:fly3 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly4{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(0px,150px) rotate(360deg) scale(0.4);opacity:0}}.fly4{animation:fly4 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly5{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-45px,96px) rotate(360deg) scale(0.4);opacity:0}}.fly5{animation:fly5 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly6{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-85px,115px) rotate(-300deg) scale(0.4);opacity:0}}.fly6{animation:fly6 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly7{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-79px,45px) rotate(360deg) scale(0.4);opacity:0}}.fly7{animation:fly7 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly8{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-120px,30px) rotate(360deg) scale(0.4);opacity:0}}.fly8{animation:fly8 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly9{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-66px,-15px) rotate(-300deg) scale(0.4);opacity:0}}.fly9{animation:fly9 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly10{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-85px,-55px) rotate(360deg) scale(0.4);opacity:0}}.fly10{animation:fly10 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly11{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-15px,-49px) rotate(360deg) scale(0.4);opacity:0}}.fly11{animation:fly11 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly12{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(-0px,-90px) rotate(-300deg) scale(0.4);opacity:0}}.fly12{animation:fly12 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly13{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(45px,-36px) rotate(360deg) scale(0.4);opacity:0}}.fly13{animation:fly13 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly14{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(85px,-55px) rotate(360deg) scale(0.4);opacity:0}}.fly14{animation:fly14 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes fly15{0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:1}100%{transform:translate(79px,15px) rotate(-300deg) scale(0.4);opacity:0}}.fly15{animation:fly15 0.7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-10px) rotate(4deg)}50%{transform:translateY(-18px) rotate(0deg)}75%{transform:translateY(-10px) rotate(-4deg)}}
.bob{animation:bob 2.6s ease-in-out infinite}
@keyframes panelpop{0%{transform:scale(0.3);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
.panelpop{animation:panelpop 0.35s cubic-bezier(.3,1.4,.5,1) both}
@keyframes fadein{0%{opacity:0}100%{opacity:1}}
.fadein{animation:fadein 0.2s both}
@keyframes chestpop{0%{transform:scale(0.4) rotate(-8deg);opacity:0}40%{transform:scale(1.12) rotate(3deg);opacity:1}100%{transform:scale(1) rotate(0deg);opacity:1}}
.chestpop{animation:chestpop 0.5s ease-out}