/* ==========================================================================
   Котострофа — игровой экран: HUD, управление, всплывашки, баннеры
   ========================================================================== */
#scr-game { z-index: 3; touch-action: none; }
#hudIn { position: absolute; left: 0; top: 0; width: 390px; z-index: 5; transform-origin: 0 0; pointer-events: none; padding: 8px 8px 0; }
#hudIn button { pointer-events: auto; }
.hud-top { display: flex; align-items: center; gap: 7px; }
.hud-top .coin { width: 46px; height: 46px; }
.hud-top .coin svg { width: 26px; height: 26px; }
.dmg-plate {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 10px 0 4px;
  background: linear-gradient(180deg, #7a4aa8 0%, #4a2272 60%, #36185a 100%);
  border: 3px solid var(--ink); border-radius: 22px 16px 22px 14px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 4px 0 var(--ink);
}
.dmg-plate.bump { animation: plateBump .35s var(--spring); }
.dmg-ico { width: 40px; height: 40px; flex: none; }
.dmg-main { flex: 1; min-width: 0; }
.dmg-txt { display: flex; align-items: baseline; gap: 6px; }
.dmg-txt small { font: 700 11px/1 var(--ft); color: #e2d2ff; text-transform: uppercase; letter-spacing: .06em; }
.dmg-txt b { font: 400 20px/1 var(--fd); color: #ffd23a; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); white-space: nowrap; }
.dmg-bar { position: relative; height: 14px; margin-top: 4px; border: 2.5px solid var(--ink); border-radius: 8px; background: linear-gradient(180deg, #2b1240, #4a2a68); }
.dmg-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 5px; transform-origin: 0 50%; transform: scaleX(0); }
#h-dmg-trail { background: linear-gradient(180deg, #fff, #ffe0a0); transition: transform .9s ease-out .25s; }
#h-dmg-fill { background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 6px, rgba(255, 255, 255, 0) 6px 12px), linear-gradient(180deg, #fff08a, #ffb52e 50%, #ff7a1f); transition: transform .2s ease-out; }
.dmg-bar .tick { position: absolute; top: -2px; bottom: -2px; width: 3px; margin-left: -1.5px; background: var(--ink); }
.dmg-bar .hstar { position: absolute; top: 50%; width: 22px; height: 22px; margin: -12px 0 0 -11px; filter: saturate(0) brightness(.7); transition: filter .2s; }
.dmg-bar .hstar svg { width: 100%; height: 100%; }
.dmg-bar .hstar.on { filter: none; animation: hstarPop .6s var(--spring); }
@keyframes hstarPop { 0% { transform: scale(.4) rotate(-60deg); } 60% { transform: scale(1.7) rotate(15deg); } 100% { transform: scale(1); } }
.time-plate {
  display: flex; align-items: center; gap: 3px; height: 46px; padding: 0 10px 0 3px;
  font: 400 19px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: linear-gradient(180deg, #5fc8ff, #3fa8ff 55%, #1b6fd1); border: 3px solid var(--ink); border-radius: 20px 14px 20px 12px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--ink);
}
.time-plate svg { width: 32px; height: 32px; }
.time-plate.warn { background: linear-gradient(180deg, #ff8a7a, #ff4a3d 55%, #c71f15); animation: timeWarn .5s ease-in-out infinite; }
@keyframes timeWarn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) rotate(-2deg); } }
.hud-row2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-left: 2px; }
.lives { display: flex; gap: 2px; }
.lives .life { width: 30px; height: 30px; transition: transform .2s; }
.lives .life svg { width: 100%; height: 100%; }
.lives .life.lost { animation: lifeLost .6s ease-out forwards; }
.lives .life.gone { filter: saturate(0) brightness(.6); opacity: .45; transform: scale(.8); }
.lives .life.gain { animation: lifeGain .6s var(--spring); }
@keyframes lifeLost { 0% { transform: scale(1.4); } 30% { transform: translateX(-4px) rotate(-15deg); } 60% { transform: translateX(4px) rotate(15deg); } 100% { transform: scale(.8); opacity: .45; } }
@keyframes lifeGain { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }
.mini-plate { display: flex; align-items: center; gap: 2px; height: 32px; padding: 0 9px 0 2px; font: 400 15px/1 var(--fd); color: #fff;
  text-shadow: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: linear-gradient(180deg, #7a4aa8, #4a2272); border: 2.5px solid var(--ink); border-radius: 14px 10px 14px 10px; box-shadow: 0 3px 0 var(--ink); }
.mini-plate svg { width: 26px; height: 26px; }
.mini-plate.bump { animation: plateBump .35s var(--spring); }
.combo {
  position: relative; display: none; align-items: center; gap: 2px; height: 36px; padding: 0 12px 0 4px; overflow: hidden;
  font: 400 20px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: linear-gradient(180deg, #ff9ad0, #ff4f9a 55%, #c81e6a); border: 3px solid var(--ink); border-radius: 16px 10px 16px 10px; box-shadow: 0 3px 0 var(--ink);
  transform: rotate(-3deg);
}
.combo.on { display: flex; }
.combo svg { width: 26px; height: 26px; }
.combo i { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #fff; transform-origin: 0 50%; }
.combo.bump { animation: comboBump .35s var(--spring); }
.combo.hot { background: linear-gradient(180deg, #fff08a, #ff8a1f 50%, #ff2d6a); }
@keyframes comboBump { 0% { transform: rotate(-3deg) scale(1); } 40% { transform: rotate(4deg) scale(1.35); } 100% { transform: rotate(-3deg) scale(1); } }
.bonuses { display: flex; gap: 6px; margin-top: 6px; padding-left: 2px; }
.bonus { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink);
  background: conic-gradient(var(--bc, #ffd23a) calc(var(--p, 1) * 360deg), rgba(43, 18, 64, .55) 0); box-shadow: 0 3px 0 var(--ink); animation: bonusIn .4s var(--spring); }
.bonus svg { position: absolute; inset: 4px; width: 30px; height: 30px; }
.bonus b { position: absolute; right: -6px; bottom: -6px; min-width: 20px; height: 20px; padding: 0 3px; border-radius: 10px; font: 400 12px/16px var(--fd); color: #fff; text-align: center;
  background: var(--ink); border: 2px solid #fff; }
@keyframes bonusIn { from { transform: scale(0) rotate(-90deg); } }
.tasks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; width: 214px; }
.tasks.mini .tk span { display: none; }
.tk { display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; font: 700 11.5px/1.1 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink);
  background: rgba(43, 18, 64, .62); border: 2px solid rgba(255, 255, 255, .25); border-radius: 12px; transition: transform .3s var(--spring); }
.tk svg { width: 22px; height: 22px; flex: none; }
.tk span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk em { font: 400 12px/1 var(--fd); font-style: normal; color: #ffd23a; }
.tk.done { background: linear-gradient(180deg, rgba(142, 224, 58, .9), rgba(79, 158, 18, .9)); border-color: var(--ink); animation: taskDone .6s var(--spring); }
.tk.fail { background: rgba(199, 31, 21, .75); }
@keyframes taskDone { 0% { transform: scale(1); } 40% { transform: scale(1.12) translateX(6px); } 100% { transform: scale(1); } }

/* ---------------- управление ---------------- */
#joy-zone { position: absolute; left: 0; bottom: 0; width: 58%; height: 62%; z-index: 4; touch-action: none; }
.joy { position: absolute; left: 0; top: 0; z-index: 4; width: 132px; height: 132px; margin: -66px 0 0 -66px; pointer-events: none; opacity: .55; transition: opacity .2s; }
.joy.active { opacity: 1; }
.joy-base { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--ink);
  background: radial-gradient(circle, rgba(255, 255, 255, .35) 0 30%, rgba(255, 255, 255, .12) 31% 60%, rgba(255, 255, 255, .28) 61%), radial-gradient(circle at 50% 30%, rgba(255, 210, 120, .5), rgba(255, 79, 154, .35));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 4px 0 rgba(43, 18, 64, .5); }
.joy-base::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 2.5px dashed rgba(255, 255, 255, .7); }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%;
  background: radial-gradient(60% 50% at 35% 30%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #ffd08a, #ff8a1f 55%, #d95f00);
  border: 3.5px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 4px 0 var(--ink); }
.joy-knob svg { position: absolute; inset: 9px; width: 38px; height: 38px; }
.ctrl-group { position: absolute; right: 12px; bottom: 16px; z-index: 6; width: 190px; height: 190px; transform-origin: 100% 100%; pointer-events: none; }
.act-btn {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; pointer-events: auto; touch-action: none;
  width: 80px; height: 80px; border-radius: 50%;
  font: 700 12px/1 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: radial-gradient(60% 50% at 35% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--b1), var(--b2) 55%, var(--b3));
  border: 4px solid var(--ink); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 0 6px 0 var(--ink), 0 10px 16px rgba(0, 0, 0, .35);
  transition: transform .06s, box-shadow .06s;
}
.act-btn::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2.5px dashed rgba(255, 255, 255, .5); pointer-events: none; }
.act-btn svg { width: 40px; height: 40px; filter: drop-shadow(0 2px 0 rgba(43, 18, 64, .4)); }
.act-btn.down { transform: translateY(6px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 var(--ink), 0 3px 6px rgba(0, 0, 0, .3); }
.act-btn.big { width: 104px; height: 104px; right: 0; bottom: 0; font-size: 14px; }
.act-btn.big svg { width: 56px; height: 56px; }
#b-jump { right: 108px; bottom: 6px; }
#b-hide { right: 22px; bottom: 116px; width: 64px; height: 64px; font-size: 11px; display: none; animation: hideIn .5s var(--spring); }
#b-hide.on { display: flex; }
#b-hide svg { width: 32px; height: 32px; }
@keyframes hideIn { from { transform: scale(0) rotate(-120deg); } }
#b-paw-ring { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; border: 4px solid transparent; }
#b-paw.super #b-paw-ring { border-color: #ff3b3b; animation: superRing .6s ease-in-out infinite alternate; }
@keyframes superRing { from { transform: scale(1); opacity: .5; } to { transform: scale(1.12); opacity: 1; } }

/* ---------------- всплывашки ---------------- */
#fx-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; font: 400 22px/1 var(--fd); color: #ffd23a;
  text-shadow: 0 2px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); animation: popUp 1.1s ease-out forwards; }
.pop small { display: block; margin-top: 2px; font: 700 12px/1 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); text-align: center; }
.pop.m { font-size: 27px; color: #ff9a2e; }
.pop.l { font-size: 34px; color: #ff4f9a; }
.pop.xl { font-size: 42px; color: #b06cff; }
.pop.fish { color: #ffbe2e; font-size: 20px; }
.pop.bad { color: #ff4a3d; }
.pop.good { color: #8ee03a; }
@keyframes popUp { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 15% { transform: translate(-50%, -80%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -90%) scale(1); } 100% { transform: translate(-50%, -190%) scale(.9); opacity: 0; } }
.bang { position: absolute; left: 0; top: 0; pointer-events: none; padding: 16px 22px; white-space: nowrap;
  font: 400 30px/1 var(--fd); color: #fff; text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
  background: radial-gradient(circle, var(--bg1, #ffd23a) 0 45%, var(--bg2, #ff4a3d) 46% 70%, transparent 71%);
  clip-path: polygon(50% 0, 61% 30%, 95% 12%, 72% 42%, 100% 55%, 70% 62%, 84% 96%, 54% 72%, 34% 100%, 34% 70%, 2% 82%, 26% 54%, 0 30%, 32% 34%, 20% 4%);
  animation: bangIn .9s var(--spring) forwards; }
.bang span { position: relative; display: block; transform: rotate(-8deg); }
@keyframes bangIn { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.25) rotate(6deg); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1) rotate(0); } 80% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(.9) rotate(0); opacity: 0; } }

/* ---------------- баннер ---------------- */
.banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 7; display: none; justify-content: center; pointer-events: none; }
.banner.on { display: flex; }
.banner-in { display: flex; align-items: center; gap: 10px; max-width: 92%; padding: 12px 22px 12px 12px;
  background: linear-gradient(180deg, var(--b1, #fff7b0), var(--b2, #ffd23a) 50%, var(--b3, #e09a00)); border: 4px solid var(--ink); border-radius: 22px 16px 24px 14px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 6px 0 var(--ink), 0 12px 24px rgba(0, 0, 0, .4); transform: skewX(-6deg);
  animation: bannerIn 2.2s cubic-bezier(.2, .9, .3, 1) forwards; }
.banner-in svg { width: 54px; height: 54px; flex: none; }
.banner-in b { display: block; font: 400 26px/1.05 var(--fd); color: #fff; text-shadow: 0 3px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); }
.banner-in small { display: block; margin-top: 3px; font: 700 14px/1.15 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink); }
.banner.red .banner-in { --b1: #ffc0b8; --b2: #ff4a3d; --b3: #c71f15; }
.banner.pink .banner-in { --b1: #ffc2dc; --b2: #ff4f9a; --b3: #c81e6a; }
.banner.teal .banner-in { --b1: #a6fff0; --b2: #13c4b0; --b3: #078a7c; }
.banner.violet .banner-in { --b1: #e2d2ff; --b2: #9a63ff; --b3: #6a33d6; }
.banner.rainbow .banner-in { background: linear-gradient(90deg, #ff4a3d, #ffd23a 25%, #8ee03a 50%, #3fa8ff 75%, #9a63ff); }
@keyframes bannerIn { 0% { transform: translateX(-130%) skewX(-20deg); } 14% { transform: translateX(6%) skewX(-4deg); } 20% { transform: translateX(0) skewX(-6deg); } 80% { transform: translateX(0) skewX(-6deg); opacity: 1; } 100% { transform: translateX(130%) skewX(-20deg); opacity: 0; } }

/* ---------------- подсказка ---------------- */
.hint { position: absolute; left: 50%; bottom: 224px; z-index: 7; display: none; align-items: center; gap: 8px; max-width: 300px; padding: 9px 14px 9px 9px;
  font: 700 15px/1.2 var(--ft); color: var(--ink); background: linear-gradient(180deg, #ffffff, #fff1c4); border: 3px solid var(--ink); border-radius: 18px 12px 18px 12px;
  box-shadow: 0 4px 0 var(--ink), 0 8px 14px rgba(0, 0, 0, .3); transform: translateX(-50%); pointer-events: none; }
.hint.on { display: flex; animation: hintBob 1.2s ease-in-out infinite; }
.hint svg { width: 32px; height: 32px; flex: none; }
@keyframes hintBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }

/* ---------------- эффекты экрана ---------------- */
#frenzy-fx, #hurt-fx, #rush-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; overflow: hidden; }
#frenzy-fx::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220%; height: 220%; margin: -110% 0 0 -110%;
  background: conic-gradient(#ff4a3d, #ffd23a, #8ee03a, #13c4b0, #3fa8ff, #9a63ff, #ff4f9a, #ff4a3d); animation: raysSpin 2.4s linear infinite;
  -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 100%); mask-image: radial-gradient(closest-side, transparent 62%, #000 100%); }
#frenzy-fx.on { opacity: .55; }
#hurt-fx { background: radial-gradient(ellipse at center, rgba(255, 0, 40, 0) 45%, rgba(255, 30, 60, .65) 100%); }
#hurt-fx.on { opacity: 1; transition: opacity .05s; }
#rush-fx { background: radial-gradient(ellipse at center, rgba(255, 120, 0, 0) 55%, rgba(255, 70, 30, .5) 100%); }
#rush-fx.on { animation: rushPulse .5s ease-in-out infinite alternate; }
@keyframes rushPulse { from { opacity: .25; } to { opacity: .8; } }
#scr-game.shake-s { animation: shakeS .25s linear; }
@keyframes shakeS { 0%, 100% { translate: 0 0; } 25% { translate: 3px -2px; } 50% { translate: -3px 2px; } 75% { translate: 2px 1px; } }