* {
  box-sizing: border-box;
}

:root {
  --surface: #ffffff;
  --panel: rgba(15, 23, 42, 0.04);
  --line: rgba(15, 23, 42, 0.12);
  --text: #171a21;
  --muted: #5b6472;
  --red: #ff3b47;
  --red-dark: #b3121f;
  --accent: #d97706;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background:
    radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface);
  overflow-x: hidden;
}

.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 60vw at 50% 45%, rgba(255, 59, 71, 0.1), transparent 70%),
    radial-gradient(40vw 40vw at 85% 90%, rgba(217, 119, 6, 0.1), transparent 70%),
    radial-gradient(45vw 45vw at 10% 5%, rgba(56, 189, 248, 0.12), transparent 70%);
  transition: opacity 0.2s;
}

.game {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  min-height: 100vh;
}

/* ---------- header ---------- */
.top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 22px;
  backdrop-filter: blur(6px);
}

.score {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(217, 119, 6, 0.25);
  transition: transform 0.08s;
}

.score.pop {
  transform: scale(1.06);
}

.score-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.stat {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 0.85rem;
  color: var(--muted);
}

.stat span {
  color: var(--text);
  font-weight: 700;
}

.stat--best {
  border-color: rgba(217, 119, 6, 0.45);
}

.stat--rebirth {
  border-color: rgba(140, 60, 255, 0.5);
}

/* ---------- stage ---------- */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 30px 10px;
}

.big-btn {
  position: relative;
  width: min(64vw, 320px);
  height: min(64vw, 320px);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 50% 32%, var(--red-dark), #6b0710 90%);
  box-shadow:
    0 18px 0 #6b0710,
    0 22px 34px rgba(179, 18, 31, 0.3),
    0 0 60px rgba(255, 59, 71, 0.3);
  transition: transform 0.07s, box-shadow 0.07s;
  animation: breathe 2.4s ease-in-out infinite;
}

.big-btn__face {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #ff6b72, var(--red) 55%, #d81b27 100%);
  box-shadow:
    inset 0 -14px 30px rgba(0, 0, 0, 0.35),
    inset 0 10px 24px rgba(255, 255, 255, 0.35);
}

.big-btn__text {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  user-select: none;
}

.big-btn:hover {
  transform: translateY(-3px);
}

.big-btn:active,
.big-btn.pressed {
  transform: translateY(12px);
  box-shadow:
    0 6px 0 #6b0710,
    0 10px 20px rgba(0, 0, 0, 0.5),
    0 0 90px rgba(255, 59, 71, 0.6);
  animation: none;
}

.big-btn.shake {
  animation: shake 0.25s;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

@keyframes shake {
  0%, 100% { margin-left: 0; }
  25% { margin-left: -8px; }
  75% { margin-left: 8px; }
}

.hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* combo */
.combo {
  width: min(64vw, 320px);
  text-align: center;
}

.combo__x {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 6px;
}

.combo__bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.combo__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--red), var(--accent));
  transform-origin: left;
}

/* ---------- shop ---------- */
.shop {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  align-self: start;
  backdrop-filter: blur(6px);
}

.shop__title {
  margin: 0 0 14px;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.shop__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upg {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.03);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.upg:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(217, 119, 6, 0.55);
  transform: translateX(-3px);
}

.upg:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.upg__icon {
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 59, 71, 0.14);
  flex: none;
}

.upg__body {
  flex: 1;
  min-width: 0;
}

.upg__name {
  font-weight: 700;
  font-size: 0.95rem;
}

.upg__desc {
  font-size: 0.78rem;
  color: var(--muted);
}

.upg__cost {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--accent);
  white-space: nowrap;
}

.upg__level {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: right;
}

.reset {
  margin-top: 14px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
}

.reset:hover {
  color: var(--red);
  border-color: var(--red);
}

/* тестовая кнопка (временная) */
.test-btn {
  margin-top: 14px;
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: 1px dashed rgba(140, 60, 255, 0.65);
  background: rgba(140, 60, 255, 0.08);
  color: #6d28d9;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.test-btn:hover {
  background: rgba(140, 60, 255, 0.18);
}

.test-btn + .test-btn {
  margin-top: 10px;
}

.auto-btn {
  border-color: rgba(10, 140, 95, 0.65);
  background: rgba(10, 180, 120, 0.1);
  color: #0a7a55;
}

.auto-btn:hover {
  background: rgba(10, 180, 120, 0.2);
}

/* чит-множитель включён */
.test-btn.cheat-on {
  border-style: solid;
  border-color: rgba(217, 119, 6, 0.8);
  background: rgba(217, 119, 6, 0.16);
  color: #b45309;
  box-shadow: 0 0 14px rgba(217, 119, 6, 0.35);
}

/* ---------- fx ---------- */
.float-num {
  position: fixed;
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--accent);
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(15, 23, 42, 0.35);
  z-index: 20;
}

@keyframes floatUp {
  from { opacity: 1; transform: translate(-50%, 0) scale(1); }
  to { opacity: 0; transform: translate(-50%, -90px) scale(1.4); }
}

.spark {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  pointer-events: none;
  animation: sparkFly 0.55s ease-out forwards;
  z-index: 19;
}

@keyframes sparkFly {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.2);
  }
}

.toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 30;
}

.toast {
  background: #ffffff;
  border: 1px solid rgba(217, 119, 6, 0.45);
  border-left: 4px solid var(--accent);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
  animation: toastIn 0.25s ease-out, toastOut 0.4s ease-in 2.6s forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(30px); }
}

/* ---------- события (анимации на экране) ---------- */
.fx-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 18;
}

.fx {
  position: absolute;
  pointer-events: none;
}

/* ветерок */
.fx-wind {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  animation: windFlow 0.9s ease-out forwards;
}

@keyframes windFlow {
  from { opacity: 0; transform: translate(0, 0) scaleX(0.4); }
  30% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scaleX(1.2); }
}

/* ураган — вихрь */
.fx-swirl {
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent, rgba(160, 220, 255, 0.75), transparent 60%),
    radial-gradient(circle, rgba(120, 190, 255, 0.35), transparent 70%);
  animation: swirlSpin 1s ease-out forwards;
}

@keyframes swirlSpin {
  from { opacity: 0; transform: rotate(0deg) scale(0.3); }
  25% { opacity: 1; }
  to { opacity: 0; transform: rotate(720deg) scale(1.6); }
}

/* потоп — рельеф берега, дождь и поднимающаяся полупрозрачная вода */
.fx-flood {
  inset: 0;
}

/* дождь */
.fl-rain {
  position: absolute;
  display: block;
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(rgba(140, 210, 255, 0), rgba(170, 228, 255, 0.95));
  animation: rainFall 0.65s linear infinite;
}

@keyframes rainFall {
  to { transform: translateY(125vh); }
}

/* рельеф: холмы и скалы на дне */
.fl-terrain {
  position: absolute;
  display: block;
  bottom: 0;
  animation: terrainFade 2.6s ease forwards;
}

.fl-t1 {
  left: -8%;
  width: 60%;
  height: 30vh;
  background: linear-gradient(180deg, #6a8f6d, #37553d);
  border-radius: 55% 55% 0 0 / 100% 100% 0 0;
}

.fl-t2 {
  left: 32%;
  width: 52%;
  height: 40vh;
  background: linear-gradient(180deg, #7e8a9c, #3d4757);
  border-radius: 42% 62% 0 0 / 100% 100% 0 0;
}

.fl-t3 {
  right: -10%;
  width: 48%;
  height: 25vh;
  background: linear-gradient(180deg, #8a9a82, #47543f);
  border-radius: 60% 45% 0 0 / 100% 100% 0 0;
}

@keyframes terrainFade {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

/* сама вода поднимается и уходит */
.fl-water {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 68vh;
  background: linear-gradient(180deg, rgba(45, 150, 255, 0.5), rgba(6, 34, 105, 0.82));
  transform: translateY(100%);
  animation: waterRise 2s ease-in-out forwards;
}

/* рельеф волны на поверхности воды — бугры + пена */
.fl-bump {
  position: absolute;
  top: -30px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(70, 175, 255, 0.75), rgba(45, 150, 255, 0.35));
  box-shadow: inset 0 6px 12px rgba(255, 255, 255, 0.35);
  animation: bumpBob 1.2s ease-in-out infinite alternate;
}

@keyframes bumpBob {
  to { transform: translateY(-12px); }
}

.fl-foam {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 20px;
  background-image: radial-gradient(circle at 9px 10px, rgba(255, 255, 255, 0.95) 7px, rgba(255, 255, 255, 0) 7.5px);
  background-size: 26px 20px;
  background-repeat: repeat-x;
}

@keyframes waterRise {
  0% { transform: translateY(100%); }
  45% { transform: translateY(0); }
  75% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0.4; }
}

.fx-bubble {
  bottom: 0;
  border-radius: 50%;
  border: 2px solid rgba(180, 230, 255, 0.8);
  background: rgba(180, 230, 255, 0.18);
  animation: bubbleUp 1.4s ease-out forwards;
}

@keyframes bubbleUp {
  from { opacity: 0.9; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-70vh); }
}

/* цунами — волна из 5 эллипсов + пена, катится через весь экран */
.fx-tsunami {
  left: -860px;
  bottom: -90px;
  width: 860px;
  height: 470px;
  animation: tsuSweep 1.6s cubic-bezier(0.4, 0.1, 0.6, 0.9) forwards;
}

.tsu-e,
.tsu-foam,
.tsu-spray {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.tsu-e {
  box-shadow:
    inset 0 12px 26px rgba(255, 255, 255, 0.2),
    inset 0 -34px 46px rgba(0, 10, 40, 0.35);
}

.tsu-e1 { left: -170px; top: 215px; width: 1080px; height: 430px; background: #0a2a63; transform: rotate(-6deg); }
.tsu-e2 { left:  55px;  top: 152px; width:  860px; height: 350px; background: #104a9c; transform: rotate(-12deg); }
.tsu-e3 { left: 300px;  top: 102px; width:  590px; height: 285px; background: #1a6fd0; transform: rotate(-22deg); }
.tsu-e4 { left: 525px;  top:  62px; width:  385px; height: 235px; background: #2f97e8; transform: rotate(-38deg); }
.tsu-e5 {
  left: 665px; top: 38px; width: 250px; height: 190px;
  background: #63c2f2;
  transform: rotate(-58deg);
  box-shadow:
    inset 0 14px 0 rgba(255, 255, 255, 0.95),
    inset 0 -26px 34px rgba(0, 20, 60, 0.3),
    0 0 34px rgba(130, 220, 255, 0.55);
}

/* пена на гребне */
.tsu-foam { background: rgba(255, 255, 255, 0.95); }
.tsu-f1 { left: 545px; top: 16px;  width: 340px; height: 76px; transform: rotate(-34deg); box-shadow: 0 0 26px rgba(255, 255, 255, 0.8); }
.tsu-f2 { left: 745px; top:  2px;  width: 180px; height: 62px; transform: rotate(-62deg); }
.tsu-f3 { left: 295px; top: 74px;  width: 310px; height: 46px; transform: rotate(-16deg); background: rgba(255, 255, 255, 0.55); }

/* брызги с гребня */
.tsu-spray {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 10px rgba(200, 240, 255, 0.9);
  animation: sprayFly 1s ease-out forwards;
}

@keyframes sprayFly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

@keyframes tsuSweep {
  from { transform: translateX(0) rotate(-3deg); }
  to { transform: translateX(calc(100vw + 1000px)) rotate(4deg); }
}

/* вулкан — вспышка, лава, ударное кольцо */
.fx-flash {
  inset: 0;
  animation: flashFade 0.6s ease-out forwards;
}

.fx-flash--fire { background: radial-gradient(circle at 50% 60%, rgba(255, 120, 30, 0.55), rgba(120, 10, 0, 0.35)); }
.fx-flash--void { background: radial-gradient(circle, rgba(60, 0, 90, 0.7), rgba(0, 0, 0, 0.85)); }

@keyframes flashFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

.fx-lava {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd166, #ff5722 60%, #b3121f);
  box-shadow: 0 0 14px rgba(255, 120, 40, 0.9);
  animation: lavaFly 1s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes lavaFly {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

.fx-ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 4px solid rgba(255, 220, 150, 0.95);
  animation: ringBlast 0.7s ease-out forwards;
}

@keyframes ringBlast {
  from { opacity: 1; transform: scale(0.4); }
  to { opacity: 0; transform: scale(12); }
}

/* осколки магмы — летят по дуге и впечатываются в землю */
.mg-shard {
  position: absolute;
  display: block;
  width: 16px;
  height: 14px;
  border-radius: 40% 60% 55% 45%;
  background: radial-gradient(circle at 30% 25%, #ffe29a, #ff7a1a 55%, #7a1000);
  box-shadow: 0 0 18px rgba(255, 140, 40, 0.95);
  animation: shardFly 0.85s cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
}

@keyframes shardFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  55% { opacity: 1; transform: translate(var(--mx), var(--my)) rotate(260deg) scale(1); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(560deg) scale(1); }
}

/* угольки, которые остаются гореть на экране */
.mg-ember {
  position: absolute;
  display: block;
  width: 20px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffb347, #e0301c 45%, #37100a 100%);
  box-shadow: 0 0 18px 6px rgba(255, 110, 30, 0.5);
  animation: emberKeep 3.4s ease-out forwards;
}

@keyframes emberKeep {
  0% { opacity: 0; transform: scale(0.2); }
  5% { opacity: 1; transform: scale(1.35); }
  12% { transform: scale(1); }
  30% { filter: brightness(1.6); }
  45% { filter: brightness(0.85); }
  62% { filter: brightness(1.7); }
  82% { opacity: 1; filter: brightness(1); }
  100% { opacity: 0; transform: scale(0.55); filter: brightness(0.35); }
}

/* дым над жерлом */
.fx-smoke {
  position: absolute;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 72, 82, 0.55), rgba(70, 72, 82, 0) 70%);
  animation: smokeRise 1.9s ease-out forwards;
}

@keyframes smokeRise {
  from { opacity: 0.85; transform: translate(0, 0) scale(0.55); }
  to { opacity: 0; transform: translate(var(--dx), -200px) scale(2.6); }
}

/* метеорит — большой проработанный камень с хвостом */
.fx-meteor-fly {
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  animation: meteorFall 0.55s cubic-bezier(0.5, 0, 1, 1) forwards;
}

@keyframes meteorFall {
  from { opacity: 1; transform: translate(0, 0) scale(0.5); }
  to { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.1); }
}

/* хвост — смотрит назад по траектории */
.met-trail {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform-origin: 0 50%;
  transform: rotate(var(--ang));
}

.met-trail--core {
  width: 340px;
  height: 18px;
  margin-top: -9px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 205, 110, 0.92) 20%,
    rgba(255, 120, 30, 0.6) 55%,
    rgba(255, 60, 10, 0) 100%);
  filter: blur(1.5px);
}

.met-trail--smoke {
  width: 460px;
  height: 40px;
  margin-top: -20px;
  background: linear-gradient(90deg,
    rgba(110, 105, 100, 0.75) 0%,
    rgba(140, 133, 128, 0.45) 45%,
    rgba(150, 145, 140, 0) 100%);
  filter: blur(7px);
}

/* тело метеорита: кратеры, раскалённое сияние, полёт с вращением */
.met-body {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 27% 30%, rgba(30, 5, 0, 0.35) 0 7%, transparent 8%),
    radial-gradient(circle at 63% 60%, rgba(30, 5, 0, 0.28) 0 5%, transparent 6%),
    radial-gradient(circle at 44% 78%, rgba(30, 5, 0, 0.34) 0 9%, transparent 10%),
    radial-gradient(circle at 74% 30%, rgba(255, 235, 180, 0.55) 0 6%, transparent 7%),
    radial-gradient(circle at 34% 26%, #ffe6b0, #ff8a1f 42%, #c03a00 74%, #571400 100%);
  box-shadow:
    inset -14px -16px 32px rgba(40, 0, 0, 0.65),
    inset 10px 10px 22px rgba(255, 228, 170, 0.45),
    0 0 60px 24px rgba(255, 130, 30, 0.7),
    0 0 130px 55px rgba(255, 90, 20, 0.3);
  animation: metSpin 0.55s linear forwards;
}

@keyframes metSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(420deg); }
}

/* искры удара */
.met-spark {
  position: absolute;
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe487, #ff6a00 70%);
  box-shadow: 0 0 12px rgba(255, 140, 40, 0.9);
  animation: sparkBurst 0.9s ease-out forwards;
}

@keyframes sparkBurst {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

.fx-crater {
  width: 160px;
  height: 56px;
  margin: -16px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 3, 0, 0.92) 0 42%, rgba(255, 95, 20, 0.55) 72%, transparent);
  box-shadow: 0 0 44px rgba(255, 100, 20, 0.55);
  animation: craterFade 2.2s ease-out forwards;
}

@keyframes craterFade {
  from { opacity: 1; transform: scale(0.3); }
  30% { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.6); }
}

/* чёрная дыра */
.fx-hole {
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, #000 45%, rgba(140, 60, 255, 0.75) 62%, rgba(255, 120, 255, 0.35) 74%, transparent 85%);
  box-shadow: 0 0 60px rgba(140, 60, 255, 0.7);
  animation: holeSuck 1.4s ease-in-out forwards;
}

.fx-hole::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 3px dashed rgba(220, 160, 255, 0.8);
  animation: swirlSpin 1.4s linear infinite;
}

@keyframes holeSuck {
  from { opacity: 0; transform: scale(0.1) rotate(0deg); }
  30% { opacity: 1; }
  75% { opacity: 1; transform: scale(1.35) rotate(360deg); }
  to { opacity: 0; transform: scale(0.2) rotate(540deg); }
}

.fx-suck {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9a8ff;
  box-shadow: 0 0 10px rgba(200, 120, 255, 0.9);
  animation: suckIn 1s ease-in forwards;
}

@keyframes suckIn {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1); }
}

/* тряска экрана */
body.shake {
  animation: screenShake 0.35s;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 5px); }
  40% { transform: translate(7px, -6px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(5px, 6px); }
}

.float-num--big {
  font-size: 1.9rem;
  color: var(--red);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 18px rgba(255, 59, 71, 0.45);
}

/* большой взрыв — помехи, темнота из углов, белая звезда */
.fx-bang {
  inset: 0;
}

/* помехи старого телевизора — на долю секунды, без швов */
.bb-noise {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0 2px, rgba(0, 0, 0, 0.9) 2px 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.45) 0 3px, rgba(0, 0, 0, 0.45) 3px 7px);
  animation: bbNoise 0.3s steps(6, end) forwards;
}

@keyframes bbNoise {
  0% { opacity: 1; background-position: 0 0, 0 0; }
  30% { background-position: 37px 11px, -23px 41px; }
  55% { opacity: 1; background-position: -61px 73px, 55px -17px; }
  75% { background-position: 91px -37px, -71px 61px; }
  90% { opacity: 1; background-position: 13px 89px, 41px -53px; }
  100% { opacity: 0; background-position: 47px 23px, -11px 77px; }
}

/* темнота расползается из каждого угла — круг с центром в углу,
   поэтому на 100% перекрывает экран целиком */
.bb-dark {
  position: absolute;
  display: block;
  width: 300vmax;
  height: 300vmax;
  border-radius: 50%;
  background: #000;
  transform: scale(0);
  animation: bbDark 0.8s cubic-bezier(0.55, 0, 0.35, 1) 0.3s forwards;
}

.bb-tl { left: -150vmax; top: -150vmax; }
.bb-tr { right: -150vmax; top: -150vmax; }
.bb-bl { left: -150vmax; bottom: -150vmax; }
.bb-br { right: -150vmax; bottom: -150vmax; }

/* страховка: сплошная чернота в момент, когда углы встречаются */
.bb-fill {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  animation: bbFill 0.2s linear 1s forwards;
}

@keyframes bbFill {
  to { opacity: 1; }
}

@keyframes bbDark {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* вспышка в момент встречи темноты */
.bb-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: bbFlash 0.5s ease-out 1.05s forwards;
}

@keyframes bbFlash {
  0% { opacity: 0; }
  22% { opacity: 0.85; }
  100% { opacity: 0; }
}

/* белая четырёх-конечная звезда в центре экрана */
.bb-star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54vmin;
  height: 54vmin;
  margin: -27vmin 0 0 -27vmin;
  background: #fff;
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 26px #fff) drop-shadow(0 0 100px rgba(190, 225, 255, 0.95));
  opacity: 0;
  animation:
    bbStar 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 1.1s forwards,
    bbStarFade 1s ease-in 3.1s forwards;
}

@keyframes bbStar {
  0% { opacity: 0; transform: scale(0) rotate(-35deg); }
  35% { opacity: 1; transform: scale(1.4) rotate(0deg); }
  65% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}

@keyframes bbStarFade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 11-е перерождение — маленькая серая надпись по центру вечной темноты */
.abs-restart {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 60;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: #8a8f98;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  animation: absIn 1s ease 0.3s forwards;
}

.abs-restart:hover {
  color: #d5d9e0;
  text-decoration: underline;
}

/* вторая кнопка — «включить читы», под первой */
.abs-cheats {
  top: calc(50% + 36px);
}

@keyframes absIn {
  to { opacity: 1; }
}

@media (max-width: 820px) {
  .game {
    grid-template-columns: 1fr;
  }
}