@font-face { font-family: 'Tiny5'; src: url('assets/fonts/tiny5-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tiny5'; src: url('assets/fonts/tiny5-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.stk {
  --u: 2px;
  --n: calc(var(--u) * -1);
  --u2: calc(var(--u) * 2);
  --u3: calc(var(--u) * 3);
  --ink: #0e0603;
  --ol: var(--u) 0 0 var(--ink), var(--n) 0 0 var(--ink), 0 var(--u) 0 var(--ink), 0 var(--n) 0 var(--ink), var(--u) var(--u) 0 var(--ink), var(--n) var(--n) 0 var(--ink), var(--u) var(--n) 0 var(--ink), var(--n) var(--u) 0 var(--ink);
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'PS2P', monospace;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  color: #fff;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}
.stk *, .stk *::before, .stk *::after { box-sizing: border-box; }

.stk .stk-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.stk .stk-top { z-index: 3; }
.stk .stk-ph { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

.stk .stk-pop { transform-origin: 50% 75%; }
.stk.go .stk-pop { animation: stkPop 0.5s ease-out both; }

.stk .stk-circ {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  background: #1a100a;
  background-clip: padding-box;
  border: var(--u2) solid var(--rc, #d8302a);
  box-shadow: 0 0 0 var(--u) var(--ink), 0 var(--u3) 0 var(--u) var(--ink);
}
.stk.go .stk-circ { animation: stkPopIn 0.4s cubic-bezier(.3, 1.7, .5, 1) both; }

.stk .stk-cap {
  position: absolute;
  left: 50%;
  bottom: 2%;
  z-index: 4;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--cb, #d8302a);
  color: #fff;
  padding: var(--u2) var(--u2) var(--u);
  border: var(--u) solid var(--ink);
  box-shadow: 0 var(--u) 0 var(--ink);
  text-shadow: var(--u) var(--u) 0 var(--ink);
  white-space: nowrap;
  line-height: 1;
  text-align: center;
}
.stk.go .stk-cap { animation: stkCap 0.35s cubic-bezier(.3, 1.8, .5, 1) var(--d, 0s) both; }
.stk .stk-cap2 { text-shadow: none; line-height: 1.3; padding: var(--u2) var(--u2) var(--u); }
.stk.go .stk-cap.stk-flk { animation: stkCap 0.35s cubic-bezier(.3, 1.8, .5, 1) var(--d, 0s) both, stkFlk 0.5s steps(1) calc(var(--d, 0s) + 0.35s) forwards; }

.stk .stk-stamp {
  --r: -8deg;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--r));
  font-family: 'Tiny5', 'PS2P', monospace;
  white-space: nowrap;
  line-height: 1;
  color: #ff5a2a;
  padding: var(--u2) var(--u3) var(--u);
  border: var(--u2) solid #ff5a2a;
  background: rgba(14, 6, 3, 0.86);
  box-shadow: 0 0 0 var(--u) var(--ink), inset 0 0 0 var(--u) var(--ink), 0 var(--u3) 0 var(--u) var(--ink);
  text-shadow: var(--ol);
}
.stk.go .stk-stamp { animation: stkSlam 0.5s cubic-bezier(.2, 1.2, .5, 1) both; }
.stk.go.stk-shteuc { animation: stkShake 0.4s linear 0.24s both; }

.stk .stk-jelly {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: 'Tiny5', 'PS2P', monospace;
  text-align: center;
  line-height: 0.92;
  white-space: nowrap;
  color: #a8e048;
  text-shadow: var(--ol), var(--u2) var(--u2) 0 #2a5a10, var(--u3) var(--u3) 0 var(--ink);
}
.stk.go .stk-jelly { animation: stkJelly 1.1s ease-out both; }

.stk .stk-tv {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 24%;
  bottom: 24%;
  background: #14102a;
  border: var(--u2) solid #3f6fc0;
  border-radius: var(--u3);
  box-shadow: 0 0 0 var(--u) var(--ink), inset 0 0 0 var(--u) var(--ink), 0 var(--u3) 0 var(--u) var(--ink);
  overflow: hidden;
}
.stk .stk-tv::after { content: ''; position: absolute; inset: 0; z-index: 2; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0 var(--u), transparent var(--u) var(--u2)); }
.stk .stk-gl { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); font-family: 'Tiny5', 'PS2P', monospace; white-space: nowrap; line-height: 1; }
.stk .stk-gl span { display: block; }
.stk .stk-gl-c, .stk .stk-gl-m { position: absolute; left: 0; top: 0; }
.stk .stk-gl-c { color: #20e0ff; transform: translate(var(--n), 0); }
.stk .stk-gl-m { color: #ff2a8a; transform: translate(var(--u), 0); }
.stk .stk-gl-w { position: relative; color: #fff; }
.stk.go .stk-tv { animation: stkTvOn 0.3s ease-out both; }
.stk.go .stk-gl-c { animation: stkGlC 1.2s steps(1) 0.3s both; }
.stk.go .stk-gl-m { animation: stkGlM 1.2s steps(1) 0.3s both; }
.stk.go .stk-gl-w { animation: stkGlW 1.2s steps(1) 0.3s both; }

.stk .stk-boom {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: 'Tiny5', 'PS2P', monospace;
  text-align: center;
  line-height: 0.92;
  white-space: nowrap;
  color: #fff;
  text-shadow: var(--ol), var(--u2) var(--u2) 0 #e8501a, var(--u3) var(--u3) 0 var(--ink);
}
.stk.go .stk-boom { animation: stkBoom 0.55s cubic-bezier(.2, 1.6, .4, 1) 0.12s both; }
.stk.go.stk-pyshteuc { animation: stkShake 0.45s linear 0.02s both; }

.stk .stk-peck { transform-origin: 50% 90%; }
.stk.go .stk-circ.stk-peck { animation: stkPopIn 0.4s cubic-bezier(.3, 1.7, .5, 1) both, stkPeck 0.42s ease-in-out 0.4s 2 forwards; }

.stk.go.stk-ktotam { animation: stkKnock 0.62s linear both; }
.stk.go .stk-peer { animation: stkPeer 0.6s ease-in-out 0.6s forwards; }
.stk .stk-eye { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 60%, rgba(14, 6, 3, 0.35) 80%, rgba(14, 6, 3, 0.85) 100%); }
.stk .stk-bub {
  position: absolute;
  left: 4%;
  top: 2%;
  z-index: 4;
  background: #f4ecd8;
  color: var(--ink);
  padding: var(--u2) var(--u2) var(--u);
  border: var(--u) solid var(--ink);
  box-shadow: 0 var(--u) 0 var(--ink);
  white-space: nowrap;
  line-height: 1;
  transform-origin: 30% 130%;
}
.stk .stk-bub::before, .stk .stk-bub::after { content: ''; position: absolute; top: 100%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.stk .stk-bub::before { left: calc(30% - var(--u)); width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--ink); }
.stk .stk-bub::after { left: 30%; width: calc(var(--u) * 4); height: calc(var(--u) * 4); background: #f4ecd8; }
.stk.go .stk-bub { animation: stkBub 0.35s cubic-bezier(.3, 1.8, .5, 1) var(--d, 0s) both; }

.stk .stk-pola {
  position: absolute;
  left: 16%;
  top: 4%;
  width: 68%;
  padding: 5% 5% 0;
  background: #f4ecd8;
  border: var(--u) solid var(--ink);
  box-shadow: 0 var(--u3) 0 var(--ink);
  transform: rotate(-5deg);
  transform-origin: 50% 0;
}
.stk .stk-pw { width: 100%; aspect-ratio: 1; border: var(--u) solid var(--ink); overflow: hidden; background: #222; }
.stk .stk-pt { color: var(--ink); text-align: center; padding: 8% 0 9%; line-height: 1; white-space: nowrap; }
.stk.go .stk-pola { animation: stkSwing 1.3s cubic-bezier(.25, .8, .4, 1) both; }

.stk .stk-cl-m { z-index: 2; }
.stk .stk-cl-l, .stk .stk-cl-r { z-index: 1; }
.stk.go .stk-circ.stk-cl-l { animation: stkCloneL 0.45s cubic-bezier(.3, 1.6, .5, 1) 0.45s both; }
.stk.go .stk-circ.stk-cl-r { animation: stkCloneR 0.45s cubic-bezier(.3, 1.6, .5, 1) 0.65s both; }
.stk .stk-meow {
  position: absolute;
  z-index: 4;
  transform: translateX(-50%);
  background: #f4ecd8;
  color: var(--ink);
  padding: var(--u2) var(--u2) var(--u);
  border: var(--u) solid var(--ink);
  box-shadow: 0 var(--u) 0 var(--ink);
  white-space: nowrap;
  line-height: 1;
}
.stk.go .stk-meow { animation: stkMeow 0.35s cubic-bezier(.3, 1.8, .5, 1) var(--d, 0s) both; }

.stk .stk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.stk.go .stk-flash { animation: stkFlash 0.4s ease-out 0.55s both; }
.stk.go .stk-mogph { animation: stkKen 2.2s linear both, stkRed 0.2s steps(1, jump-start) 0.55s both; }
.stk .stk-mog {
  --r: -10deg;
  position: absolute;
  left: 50%;
  top: 68%;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(var(--r));
  font-family: 'Tiny5', 'PS2P', monospace;
  white-space: nowrap;
  line-height: 1;
  color: #fff;
  text-shadow: var(--ol), var(--u2) var(--u2) 0 #d8302a, var(--u3) var(--u3) 0 var(--ink);
}
.stk.go .stk-mog { animation: stkSlam 0.45s cubic-bezier(.2, 1.2, .5, 1) 0.34s both; }
.stk.go.stk-mogged { animation: stkShake 0.4s linear 0.55s both; }

.stk.go .stk-circ.stk-pump { animation: stkPump 1s linear both; }

.stk.go .stk-circ.stk-lunge { animation: stkLunge 1.1s cubic-bezier(.2, .9, .3, 1) both; }
.stk.go.stk-cehto { animation: stkShake 0.45s linear 0.5s both; }

.stk .stk-god { position: absolute; inset: 0; z-index: 2; }
.stk.go .stk-god { animation: stkDescend 0.7s cubic-bezier(.2, 1.1, .4, 1) both, stkBob 1.6s ease-in-out 0.7s forwards; }
.stk.go .stk-god .stk-circ { animation: none; }
.stk .stk-rainbow { position: absolute; border-radius: 50%; background: conic-gradient(#ff3030, #ff9a20, #ffe830, #40e060, #30b0ff, #7a50ff, #ff40c0, #ff3030); }
.stk.go .stk-rainbow { animation: stkSpin 2.4s linear both; }

@keyframes stkPop {
  0% { transform: scale(0.1) rotate(-14deg); opacity: 0; }
  20% { opacity: 1; }
  45% { transform: scale(1.18, 0.86) rotate(2deg); }
  65% { transform: scale(0.92, 1.08); }
  82% { transform: scale(1.03, 0.98); }
  100% { transform: none; }
}
@keyframes stkPopIn { 0% { transform: scale(0) rotate(-12deg); } 100% { transform: none; } }
@keyframes stkCap { 0% { transform: translateX(-50%) rotate(-4deg) scale(0); } 100% { transform: translateX(-50%) rotate(-4deg); } }
@keyframes stkFlk { 0% { opacity: 0.2; } 20% { opacity: 1; } 40% { opacity: 0.1; } 55% { opacity: 1; } 70% { opacity: 0.4; } 85%, 100% { opacity: 1; } }
@keyframes stkShake {
  0%, 100% { transform: none; }
  12% { transform: translate(-4%, 3%); }
  25% { transform: translate(4%, -2%); }
  38% { transform: translate(-3%, -2%); }
  52% { transform: translate(3%, 2%); }
  66% { transform: translate(-2%, 1%); }
  82% { transform: translate(1%, -1%); }
}
@keyframes stkSlam {
  0% { transform: translate(-50%, -50%) scale(2.2) rotate(calc(var(--r) - 16deg)); opacity: 0; }
  22% { opacity: 1; }
  48% { transform: translate(-50%, -50%) scale(0.86) rotate(var(--r)); }
  70% { transform: translate(-50%, -50%) scale(1.07) rotate(var(--r)); }
  100% { transform: translate(-50%, -50%) rotate(var(--r)); }
}
@keyframes stkJelly {
  0% { transform: translate(-50%, -50%) rotate(-5deg) scale(0); }
  16% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.3, 0.7); }
  30% { transform: translate(-50%, -50%) rotate(-5deg) scale(0.8, 1.25); }
  44% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.14, 0.88); }
  58% { transform: translate(-50%, -50%) rotate(-5deg) scale(0.94, 1.06); }
  74% { transform: translate(-50%, -50%) rotate(-5deg) scale(1.03, 0.98); }
  100% { transform: translate(-50%, -50%) rotate(-5deg); }
}
@keyframes stkTvOn {
  0% { transform: scale(1.15, 0.03); filter: brightness(5); }
  55% { transform: scale(1, 1.06); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
@keyframes stkGlC {
  0% { transform: translate(calc(var(--u) * -4), 0); }
  8% { transform: translate(var(--u2), var(--n)); }
  16% { transform: translate(calc(var(--u) * -6), var(--u)); clip-path: inset(0 0 55% 0); }
  24% { transform: translate(var(--n), 0); clip-path: none; }
  36% { transform: translate(calc(var(--u) * -3), 0); }
  48% { transform: translate(var(--u3), var(--u)); clip-path: inset(40% 0 0 0); }
  56% { transform: translate(var(--n), 0); clip-path: none; }
  70% { transform: translate(calc(var(--u) * -5), 0); }
  78%, 100% { transform: translate(var(--n), 0); }
}
@keyframes stkGlM {
  0% { transform: translate(var(--u3), 0); }
  8% { transform: translate(calc(var(--u) * -3), var(--u)); }
  16% { transform: translate(calc(var(--u) * 5), 0); clip-path: inset(45% 0 0 0); }
  24% { transform: translate(var(--u), 0); clip-path: none; }
  36% { transform: translate(calc(var(--u) * 4), var(--n)); }
  48% { transform: translate(calc(var(--u) * -2), 0); clip-path: inset(0 0 50% 0); }
  56% { transform: translate(var(--u), 0); clip-path: none; }
  70% { transform: translate(calc(var(--u) * 4), 0); }
  78%, 100% { transform: translate(var(--u), 0); }
}
@keyframes stkGlW {
  0% { transform: translate(var(--u2), 0); clip-path: inset(0 0 60% 0); }
  8% { transform: none; clip-path: none; }
  16% { transform: translate(calc(var(--u) * -3), 0); clip-path: inset(30% 0 30% 0); }
  24% { transform: none; clip-path: none; }
  48% { transform: translate(var(--u3), 0); clip-path: inset(50% 0 0 0); }
  56% { transform: none; clip-path: none; }
  70% { transform: translate(var(--n), 0); clip-path: inset(0 0 40% 0); }
  78%, 100% { transform: none; clip-path: none; }
}
@keyframes stkBoom { 0% { transform: translate(-50%, -50%) rotate(25deg) scale(0); } 100% { transform: translate(-50%, -50%) rotate(-6deg); } }
@keyframes stkPeck { 0%, 100% { transform: none; } 45% { transform: rotate(16deg) translateY(5%); } 60% { transform: rotate(12deg) translateY(4%); } }
@keyframes stkKnock {
  0%, 7% { transform: none; }
  9% { transform: translate(-3%, 1%); }
  13% { transform: translate(2%, 0); }
  17%, 39% { transform: none; }
  41% { transform: translate(3%, 1%); }
  45% { transform: translate(-2%, 0); }
  49%, 71% { transform: none; }
  73% { transform: translate(-3%, -1%); }
  77% { transform: translate(2%, 1%); }
  81%, 100% { transform: none; }
}
@keyframes stkPeer { to { transform: scale(1.22); } }
@keyframes stkBub { 0% { transform: scale(0); } 100% { transform: none; } }
@keyframes stkSwing {
  0% { transform: translateY(-40%) rotate(-28deg) scale(0.5); opacity: 0; }
  12% { opacity: 1; }
  28% { transform: translateY(0) rotate(12deg); }
  46% { transform: rotate(-11deg); }
  62% { transform: rotate(5deg); }
  78% { transform: rotate(-7deg); }
  90% { transform: rotate(-4deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes stkCloneL { 0% { transform: translate(60%, -20%) scale(0.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }
@keyframes stkCloneR { 0% { transform: translate(-60%, -20%) scale(0.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; } }
@keyframes stkMeow { 0% { transform: translate(-50%, 50%) scale(0); } 100% { transform: translateX(-50%); } }
@keyframes stkFlash { 0% { opacity: 0; } 2% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stkKen { 0% { transform: none; } 100% { transform: scale(1.18); } }
@keyframes stkRed { 0% { filter: none; } 100% { filter: grayscale(1) contrast(1.3) brightness(1.2) sepia(0.9) hue-rotate(-42deg) saturate(3); } }
@keyframes stkPump {
  0% { transform: scale(0.2); }
  7% { transform: scale(1.14); }
  15% { transform: scale(1); }
  22% { transform: scale(1.14); }
  31% { transform: scale(1); }
  39% { transform: scale(1.2); }
  80% { transform: scale(1.12); }
  100% { transform: none; }
}
@keyframes stkLunge {
  0% { transform: scale(0.4); filter: brightness(0.2); }
  44% { transform: scale(0.5) rotate(-3deg); filter: brightness(0.35); }
  46% { transform: scale(1.25) rotate(2deg); filter: brightness(1.8) contrast(1.4); }
  62% { transform: scale(1.02); filter: brightness(1.1) contrast(1.2); }
  100% { transform: scale(1.06); filter: contrast(1.25); }
}
@keyframes stkDescend { 0% { transform: translateY(-70%); opacity: 0; } 25% { opacity: 1; } 100% { transform: none; } }
@keyframes stkBob { 0%, 100% { transform: none; } 25% { transform: translateY(-3%); } 75% { transform: translateY(2%); } }
@keyframes stkSpin { to { transform: rotate(1turn); } }
