/* «Кино»: окно рыбалки и показ улова (js/fishing/game.js, js/fishing/catchcard.js).
   Панелей нет — кинорамка, субтитры, свет по краям кадра; улов выходит из живой воды,
   кадр замирает, выезжают полосы, дальше титры. Подключается последним. */

/* ── окно рыбалки ─────────────────────────────────────────── */
#fishing .kn-lt, #fishing .kn-lb { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2; }
#fishing .kn-lt { top: 0; height: calc(var(--safe-top) + 180px); background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
#fishing .kn-lb { bottom: 0; height: calc(var(--safe-bottom) + 320px); background: linear-gradient(0deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0)); }
#fishing .scene-vignette { z-index: 2; transition: none; }
/* край кадра по натяжению: готовые тени, меняется только прозрачность (game.js setVignette) */
#fishing .scene-vignette > i { position: absolute; inset: 0; opacity: 0; transition: opacity .12s linear; }
#fishing[data-st="fight"] .scene-vignette > i { will-change: opacity; }
#fishing .scene-vignette .g { box-shadow: inset 0 0 90px 10px rgba(91, 214, 154, .45); }
#fishing .scene-vignette .y { box-shadow: inset 0 0 105px 15px rgba(243, 201, 105, .5); }
#fishing .scene-vignette .r { box-shadow: inset 0 0 120px 22px rgba(255, 90, 110, .62); }
#fishing[data-st="bite"] .scene-vignette { box-shadow: inset 0 0 90px 12px rgba(243, 210, 139, .62); animation: knVig 1.2s ease-in-out infinite; }
@keyframes knVig { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
#fishing .kn-bars i { position: absolute; left: 0; right: 0; background: #020606; z-index: 3; pointer-events: none;
  transform: scaleY(0); transition: transform .45s cubic-bezier(.2, .8, .3, 1); }
#fishing .kn-bars .t { top: 0; height: calc(var(--safe-top) + 46px); transform-origin: 50% 0; }
#fishing .kn-bars .b { bottom: 0; height: calc(var(--safe-bottom) + 46px); transform-origin: 50% 100%; }
#fishing[data-st="bite"] .kn-bars i, #fishing[data-st="hooking"] .kn-bars i { transform: scaleY(1); }

/* шапка: название места крупно, без плашек */
#fishing .hud-top { padding: calc(var(--safe-top) + 14px) 12px 0 8px; gap: 4px; align-items: flex-start; transition: opacity .3s; }
#fishing .kn-back { width: 36px; height: 42px; flex: none; display: grid; place-items: center; color: var(--ink);
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); transition: transform .2s var(--spring); }
#fishing .kn-back:active { transform: scale(.88); }
#fishing .kn-back .icon { width: 26px; height: 26px; }
#fishing .kn-title { flex: 1; min-width: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .65); pointer-events: none; transition: opacity .3s; }
#fishing .kn-title b { display: block; font-size: 34px; line-height: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fishing .kn-title small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: rgba(246, 243, 236, .8); }
#fishing .kn-xp { width: 46px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); overflow: hidden; flex: none; }
#fishing .kn-xp i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent); transition: width .6s; }
#fishing .kn-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: opacity .3s; }
#fishing .kn-coins { display: flex; align-items: center; gap: 6px; font-size: 26px; text-shadow: 0 2px 14px rgba(0, 0, 0, .65); }
#fishing .kn-coins .coin { width: 19px; height: 19px; }
#fishing .kn-sound { width: 40px; height: 34px; display: grid; place-items: center; color: rgba(246, 243, 236, .82); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
#fishing .kn-sound .icon { width: 22px; height: 22px; }
#fishing[data-st="bite"] .hud-top, #fishing[data-st="hooking"] .hud-top { opacity: 0; pointer-events: none; }
#fishing[data-st="fight"] .kn-title, #fishing[data-st="fight"] .kn-side,
#fishing[data-st="landing"] .kn-title, #fishing[data-st="landing"] .kn-side { opacity: 0; pointer-events: none; }

/* низ: субтитры, крупное слово, наживка — кнопка — садок */
#fishing .hud-bottom { padding: 0 20px calc(var(--safe-bottom) + 30px); background: none; }
#fishing .hint { min-height: 50px; margin: 0 6px 16px; font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .85); }
#fishing .hint.gold { color: var(--accent); font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 24px; line-height: 1.1; }
#fishing .hint.warn { color: #F3C969; }
#fishing .kn-big { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 150px); z-index: 1; text-align: center; font-size: 72px; line-height: .9;
  color: var(--accent); text-shadow: 0 0 36px rgba(243, 210, 139, .6), 0 4px 18px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }
#fishing .kn-big.on { opacity: 1; animation: knSlam .5s cubic-bezier(.2, .9, .3, 1.15) both; }
#fishing .kn-big.long { font-size: 52px; }
#fishing .kn-big.red { color: #FF7A8A; font-size: 44px; text-shadow: 0 0 30px rgba(255, 90, 110, .6), 0 4px 18px rgba(0, 0, 0, .6);
  animation: knSlam .45s cubic-bezier(.2, .9, .3, 1.15) both, knShake .3s linear .45s infinite; }
@keyframes knSlam { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(.94); } 80% { transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes knShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#fishing .kn-cd { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + 136px); width: 220px; height: 4px; margin-left: -110px; opacity: 0; pointer-events: none; }
#fishing .kn-cd i { display: block; height: 100%; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
#fishing .kn-cd.on { opacity: 1; }
#fishing .kn-cd.on i { animation: knCd var(--cd, 2s) linear both; }
@keyframes knCd { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#fishing .controls { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); gap: 8px; }
#fishing .bait-chip, #fishing .bucket-btn { height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); display: flex; align-items: center;
  gap: 8px; font-size: 15px; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); transition: opacity .3s, transform .2s var(--spring); }
#fishing .bait-chip { justify-self: start; min-width: 0; }
#fishing .bait-chip .emoji { width: 30px; height: 30px; border-radius: 0; background: none; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
#fishing .bait-chip .t2 { max-width: 118px; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#fishing .bait-chip.empty .t2 { color: #FF8A98; }
#fishing .bucket-btn { justify-self: end; width: auto; flex-direction: row; }
#fishing .bucket-btn .num { font-size: 22px; font-weight: 900; }
#fishing .bucket-btn .icon { width: 22px; height: 22px; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7)); }
#fishing .bucket-btn.full { color: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
#fishing[data-st="bite"] .bait-chip, #fishing[data-st="bite"] .bucket-btn, #fishing[data-st="hooking"] .bait-chip, #fishing[data-st="hooking"] .bucket-btn,
#fishing[data-st="fight"] .bait-chip, #fishing[data-st="fight"] .bucket-btn, #fishing[data-st="landing"] .bait-chip, #fishing[data-st="landing"] .bucket-btn { opacity: .35; }

/* главная кнопка: тонкое кольцо, стекло внутри; кольцо — время на подсечку и натяжение */
#fishing .main-btn { width: 84px; height: 84px; }
#fishing .main-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .85); transition: border-color .2s, box-shadow .2s; }
#fishing[data-st="idle"] .main-btn::before { animation: knRim 2.6s ease-out infinite; }
@keyframes knRim { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
#fishing .main-btn svg.ring .bg { stroke: none; }
#fishing .main-btn svg.ring .fg { stroke-width: 4; }
#fishing .main-btn .core { inset: 8px; background: rgba(12, 22, 24, .42); color: var(--ink); box-shadow: none; }
#fishing .main-btn .core .icon { width: 32px; height: 32px; }
#fishing .main-btn .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#fishing .main-btn.wait .core { background: rgba(12, 22, 24, .42); color: var(--ink); }
#fishing .main-btn.wait .core::before { border-color: rgba(255, 255, 255, .3); }
#fishing .main-btn.bite::before { border-color: var(--accent); box-shadow: 0 0 24px var(--accent); }
#fishing .main-btn.bite .core { background: var(--accent); color: var(--accent-ink); animation: none;
  background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%); box-shadow: 0 0 26px rgba(243, 210, 139, .7); }
#fishing .main-btn.fight::before { border-color: rgba(255, 255, 255, .25); }
#fishing .main-btn.fight .core { background: rgba(12, 24, 26, .6); color: var(--aqua); }
#fishing .main-btn.fight.reeling .core { transform: scale(.94); box-shadow: none; }
#fishing .main-btn.fight.warn .core { background: #FF5A6E; color: #fff; animation: biteShake .18s linear infinite; }
#fishing .main-btn.got::before { border-color: var(--accent); box-shadow: 0 0 24px var(--accent); }
#fishing .main-btn.got .core { background: var(--accent); color: var(--accent-ink); filter: none; }

/* вываживание: путь к берегу тонкой полосой внизу */
#fishing .kn-scrub { position: absolute; left: 20px; right: 20px; bottom: calc(var(--safe-bottom) + 12px); height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .2); opacity: 0; transition: opacity .3s; pointer-events: none; }
#fishing[data-st="fight"] .kn-scrub, #fishing[data-st="landing"] .kn-scrub { opacity: 1; }
#fishing .kn-scrub i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent);
  transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
#fishing .kn-scrub b { position: absolute; top: -4.5px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); will-change: transform; }
#fishing .kn-scrub span { position: absolute; top: -19px; font-size: 11px; font-weight: 700; color: rgba(246, 243, 236, .6); white-space: nowrap; }
#fishing .kn-scrub .l { left: 0; } #fishing .kn-scrub .r { right: 0; }

/* подсказка «коснитесь воды» — мягкое пятно света на воде */
#fishing .tap-hint { width: 120px; height: 34px; margin: -17px 0 0 -60px; border: 0; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 246, 226, .8), rgba(255, 244, 220, .22) 60%, rgba(255, 244, 220, 0)); animation: knSpot 2.6s ease-in-out infinite; }
#fishing .tap-hint::after { width: 60px; height: 18px; margin: -9px 0 0 -30px; border-radius: 50%; background: none; border: 1.8px solid rgba(255, 255, 255, .9);
  animation: knRing 2.6s ease-out infinite; }
@keyframes knSpot { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes knRing { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ── показ улова «Кино» ────────────────────────────────────── */
.kc { position: absolute; inset: 0; overflow: hidden; color: var(--ink); --lx: 50%; --ly: 85%; --c-rgb: 255, 255, 255; animation: crFade .25s ease-out both; }
.kc.out { animation: crOut .26s ease-in both; pointer-events: none; }
.kc-in, .kc-dim, .kc-rays, .kc-halo, .kc-fish, .kc-sparks, .kc-dust, .kc-flare, .kc-drop, .kc-plate, .kc-stamp, .kc-title, .kc-acts,
.kc-pillar, .kc-beat, .kc-whisper { opacity: 0; }
.kc.run .kc-in, .kc.run .kc-acts { animation: kcIn .5s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms) both; }
@keyframes kcIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kcFade { from { opacity: 0; } to { opacity: 1; } }

/* стоп-кадр: затемнение с размытием, полосы, вспышка */
.kc-dim { position: absolute; inset: 0; background: rgba(6, 12, 14, .6); }
.kc.run .kc-dim { animation: kcFade .45s ease-out var(--d, 0ms) both; }
.kc.rare .kc-dim { background: rgba(8, 8, 20, .58); }
.kc.big .kc-dim, .kc.record .kc-dim { background: rgba(10, 10, 8, .56); }
.kc.loot .kc-dim { background: rgba(14, 9, 4, .55); }
.kc.named .kc-dim { background: radial-gradient(46% 24% at var(--lx) var(--ly), rgba(3, 5, 6, .12), rgba(3, 5, 6, .92) 72%); }
.kc.named.run .kc-dim { animation-duration: 1s; }
.kc-bars i { position: absolute; left: 0; right: 0; z-index: 5; background: #030808; transform: scaleY(0); }
.kc-bars .t { top: 0; height: calc(var(--safe-top) + 56px); transform-origin: 50% 0; }
.kc-bars .b { bottom: 0; height: calc(var(--safe-bottom) + 108px); transform-origin: 50% 100%; }
.kc.run .kc-bars i { animation: kcBar .4s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms) both; }
@keyframes kcBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.kc-top { position: absolute; left: 12px; right: 12px; top: 0; height: calc(var(--safe-top) + 56px); padding-top: var(--safe-top); z-index: 6;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: rgba(246, 243, 236, .62); white-space: nowrap; overflow: hidden; }
.kc-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }
.kc.run .kc-flash { animation: kcFlash .4s ease-out var(--d, 0ms) both; }
@keyframes kcFlash { 0% { opacity: 0; } 2% { opacity: var(--fa, .55); } 100% { opacity: 0; } }
.kc.rare .kc-flash { background: #E9E0FF; --fa: .5; }
.kc.loot .kc-flash { background: #FFE2B0; --fa: .45; }
.kc.named .kc-flash { background: radial-gradient(70% 50% at 50% 45%, #FFFFFF, rgba(var(--c-rgb), .85) 40%, rgba(var(--c-rgb), .25) 100%); --fa: 1; }
.kc.named.run .kc-flash { animation-duration: .75s; }

/* сцена: лучи, ореол и рыба стоят в одном центре */
.kc-body { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 60px) 18px calc(var(--safe-bottom) + 118px); }
.kc-stage { position: relative; flex: 1 1 auto; min-height: 150px; }
.kc-rays, .kc-halo, .kc-fish { position: absolute; left: 50%; top: 50%; }
.kc-rays { width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .5) 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, .5) 55%, transparent 100%); }
.kc-rays i { position: absolute; inset: 0; border-radius: 50%; animation: crSpin 60s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(var(--c-rgb), .24) 0deg 3deg, rgba(var(--c-rgb), 0) 3deg 11deg); }
.kc.run .kc-rays { animation: kcFade .9s ease-out var(--d, 0ms) both; }
.kc-halo { width: 380px; height: 300px; margin: -150px 0 0 -190px; border-radius: 50%; filter: blur(12px); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(var(--c-rgb), .55), rgba(var(--c-rgb), .16) 48%, rgba(var(--c-rgb), 0) 74%); }
.kc.run .kc-halo { animation: kcHalo .7s ease-out var(--d, 0ms) both; }
@keyframes kcHalo { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.kc-flare { position: absolute; left: -60px; right: -60px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--c-rgb), 0), rgba(var(--c-rgb), .7) 30%, #fff 50%, rgba(var(--c-rgb), .7) 70%, rgba(var(--c-rgb), 0));
  box-shadow: 0 0 18px 6px rgba(var(--c-rgb), .55); }
.kc.run .kc-flare { animation: kcFlare 1.1s ease-out var(--d, 0ms) both; }
@keyframes kcFlare { 0% { opacity: 0; transform: scaleX(.1); } 12% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.25); } }
.kc-sparks, .kc-dust { position: absolute; inset: 0; pointer-events: none; }
.kc.run .kc-sparks, .kc.run .kc-dust { animation: kcFade .7s ease-out var(--d, 0ms) both; }
.kc-sp { position: absolute; width: 16px; height: 16px; animation: kcTw 2.2s ease-in-out infinite; }
.kc-sp::before, .kc-sp::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; box-shadow: 0 0 6px 1px rgba(var(--c-rgb), .9); }
.kc-sp::before { width: 2px; height: 100%; margin: -50% 0 0 -1px; }
.kc-sp::after { width: 100%; height: 2px; margin: -1px 0 0 -50%; }
@keyframes kcTw { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .3; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.kc-du { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--c-rgb)); box-shadow: 0 0 8px rgba(var(--c-rgb), .9); animation: kcDust 5s linear infinite; }
@keyframes kcDust { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .8; } 100% { transform: translateY(-160px) scale(1.1); opacity: 0; } }

/* рыба: выходит из точки всплеска и встаёт в центр света */
.kc-fish { width: 0; height: 0; z-index: 2; }
.kc.run .kc-fish { animation: kcLeap var(--dur, .76s) cubic-bezier(.2, .7, .35, 1) var(--d, 0ms) both; }
@keyframes kcLeap {
  0% { opacity: 0; transform: translate(var(--x0, 0px), var(--y0, 240px)) scale(.22) rotate(var(--r0, -34deg)); }
  4% { opacity: 1; }
  62% { opacity: 1; transform: translate(calc(var(--x0, 0px) * .45), 20px) scale(.94) rotate(calc(var(--r0, -34deg) * .12)); }
  82% { transform: translate(0, -6px) scale(1.05) rotate(3deg); }
  100% { opacity: 1; transform: none; } }
.kc-c { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.kc-bob { position: relative; animation: kcBob 3.6s ease-in-out infinite; }
.kc-bob img { display: block; width: auto; height: auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
@keyframes kcBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
.kc-fish.golden img { filter: sepia(1) saturate(3.2) hue-rotate(-10deg) brightness(1.14) contrast(1.1) drop-shadow(0 0 18px rgba(255, 196, 70, .75)); }
.kc-fish.albino img { filter: grayscale(1) brightness(1.55) contrast(.92) drop-shadow(0 0 18px rgba(214, 236, 255, .85)); }
.kc.loot .kc-bob img { animation: kcAmber 2.6s ease-in-out infinite; }
@keyframes kcAmber { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 170, 60, .45)); } 50% { filter: drop-shadow(0 0 26px rgba(255, 170, 60, .9)) brightness(1.08); } }
.kc-shine, .kc-pearl { position: absolute; inset: 0; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kc-shine { background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, 0) 60%); background-size: 260% 100%;
  mix-blend-mode: screen; animation: kcShine 2.8s ease-in-out 4 both; }
@keyframes kcShine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -40% 0; } }
.kc-pearl { background: linear-gradient(120deg, rgba(255, 190, 230, 0) 10%, rgba(255, 190, 230, .55) 28%, rgba(180, 225, 255, .55) 45%, rgba(190, 255, 225, .5) 62%,
  rgba(255, 240, 200, .45) 78%, rgba(255, 255, 255, 0) 92%); background-size: 300% 100%; mix-blend-mode: soft-light; animation: kcPearl 5s linear 3; }
@keyframes kcPearl { from { background-position: 0% 0; } to { background-position: 300% 0; } }
.kc-drops { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.kc-drop { position: absolute; left: var(--lx); top: var(--ly); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: rgba(240, 250, 248, .95); box-shadow: 0 0 6px rgba(255, 255, 255, .6); }
.kc.run .kc-drop { animation: kcDrop var(--dd, .75s) cubic-bezier(.2, .6, .4, 1) var(--d, 0ms) both; }
@keyframes kcDrop { 0% { opacity: 0; transform: translate(0, 0); } 5% { opacity: 1; transform: translate(0, -8px); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) * .35 + 40px)); } }

/* именная: свет столбом из воды, «сердцебиение», шёпот */
.kc-pillar { position: absolute; left: var(--lx); top: 0; height: var(--ly); width: 150px; margin-left: -75px; z-index: 3; filter: blur(14px); pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--c-rgb), .75), rgba(var(--c-rgb), .35) 45%, rgba(var(--c-rgb), 0)); }
.kc.run .kc-pillar { animation: kcPillar var(--pd, 1.65s) ease-in-out var(--d, 0ms) both; }
@keyframes kcPillar { 0% { opacity: 0; transform: scaleX(.3); } 55% { opacity: .55; transform: scaleX(.6); } 72% { opacity: .8; transform: scaleX(.75); }
  85% { opacity: .6; transform: scaleX(.7); } 97% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(2.2); } }
.kc-beat { position: absolute; left: var(--lx); top: var(--ly); width: 120px; height: 36px; margin: -18px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(var(--c-rgb), .9); z-index: 3; }
.kc.run .kc-beat { animation: kcBeat .55s ease-out var(--d, 0ms) both; }
@keyframes kcBeat { 0% { opacity: 0; transform: scale(.5); } 3% { opacity: 1; transform: scale(.55); } 100% { opacity: 0; transform: scale(2.6); } }
.kc-whisper { position: absolute; left: 26px; right: 26px; bottom: calc(var(--safe-bottom) + 150px); z-index: 6; text-align: center; font-size: 24px;
  color: rgb(var(--c-rgb)); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); pointer-events: none; }
.kc.run .kc-whisper { animation: kcWhisper var(--wd, 1.5s) ease-in-out var(--d, 0ms) both; }
@keyframes kcWhisper { 0% { opacity: 0; transform: translateY(8px); } 25%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kc.golden { --metal: linear-gradient(100deg, #A8742A 0%, #FFE9A8 22%, #D9A441 40%, #FFF4D0 55%, #B8822E 72%, #FFE08A 100%); }
.kc.albino { --metal: linear-gradient(100deg, #8FA3B3 0%, #FFFFFF 22%, #B8C8D6 40%, #F4FAFF 55%, #9AB0C2 72%, #E8F2FA 100%); }
.kc-head { position: relative; z-index: 3; flex: none; text-align: center; }
.kc-nk { display: block; font-size: 19px; color: rgb(var(--c-rgb)); }
.kc-title { display: block; margin-top: 2px; font-size: calc(var(--ts, 62) * 1px); line-height: 1.02; }
.kc.run .kc-title { animation: kcTitle .5s ease-out var(--d, 0ms) both; }
@keyframes kcTitle { from { opacity: 0; transform: scale(1.3); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.kc-title span { background-image: var(--metal); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(var(--c-rgb), .35)); animation: kcMetal 4s ease-in-out 3; }
@keyframes kcMetal { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.kc-plate { position: absolute; right: 0; top: 2px; width: 96px; padding: 8px 0 7px; border-radius: 14px; text-align: center; z-index: 3;
  background: #15110A; border: 2px solid #E9C46A; box-shadow: 0 0 0 3px rgba(var(--c-rgb), .25), 0 12px 26px rgba(0, 0, 0, .5); }
.kc.albino .kc-plate { background: #0C1418; border-color: #C9DCEA; }
.kc-plate b { display: block; font-size: 36px; line-height: .95; background-image: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kc-plate small { display: block; font-size: 12px; font-weight: 800; color: rgba(var(--c-rgb), .9); }
.kc.run .kc-plate { animation: kcPlate .55s cubic-bezier(.2, .9, .3, 1.1) var(--d, 0ms) both; }
@keyframes kcPlate { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 40% { opacity: 1; transform: scale(.92) rotate(-6deg); }
  70% { transform: scale(1.04) rotate(-6deg); } 100% { opacity: 1; transform: rotate(-6deg); } }

/* наклейки: хозяин недели, личный рекорд, трофей, новый вид */
.kc-stamp { position: absolute; right: 0; top: 0; width: 118px; height: 118px; border-radius: 50%; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: #2A1E05; box-shadow: 0 0 0 4px rgba(243, 210, 139, .35), 0 16px 34px rgba(0, 0, 0, .5);
  background: radial-gradient(circle at 35% 28%, #FFF1C4, #F3D28B 45%, #C8963A 100%); }
.kc-stamp b { font-size: 24px; line-height: .9; }
.kc-stamp small { margin-top: 3px; font-size: 11px; font-weight: 800; }
.kc-stamp .icon { width: 20px; height: 20px; margin-bottom: 2px; }
.kc-stamp.mint { color: #0E2320; background: radial-gradient(circle at 35% 28%, #E4FFF5, #A9E4D0 50%, #6FB9A2 100%); box-shadow: 0 0 0 4px rgba(169, 228, 208, .3), 0 16px 34px rgba(0, 0, 0, .5); }
.kc.run .kc-stamp { animation: kcStamp .5s cubic-bezier(.2, .9, .3, 1.1) var(--d, 0ms) both; }
@keyframes kcStamp { 0% { opacity: 0; transform: scale(2.6) rotate(-20deg); } 45% { opacity: 1; transform: scale(.9) rotate(-8deg); }
  70% { transform: scale(1.06) rotate(-8deg); } 100% { opacity: 1; transform: rotate(-8deg); } }

/* титры: вес, имя, строки, награды */
.kc-info { position: relative; z-index: 3; flex: none; display: flex; flex-direction: column; }
.kc-info.center { align-items: center; text-align: center; }
.kc-kick { font-size: 22px; color: var(--accent); }
.kc.rare .kc-kick { color: #C3AEFF; }
.kc.loot .kc-kick { color: #FFC46B; }
.kc-wrow { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.kc-w { font-size: var(--fs, 112px); font-weight: 900; line-height: .84; letter-spacing: -.02em; display: inline-block; transform-origin: 30% 80%; text-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.kc.named .kc-w { text-shadow: 0 0 30px rgba(var(--c-rgb), .45); }
.kc-w.pop { animation: kcPop .6s ease-out; }
.kc-w.flash { animation: kcFlashW .45s ease-out; }
@keyframes kcPop { 0% { transform: scale(1); } 30% { transform: scale(1.12); text-shadow: 0 0 34px rgba(var(--c-rgb), .9); } 100% { transform: scale(1); } }
@keyframes kcFlashW { 0% { text-shadow: 0 10px 30px rgba(0, 0, 0, .45); } 25% { text-shadow: 0 0 30px rgba(243, 210, 139, .95); } 100% { text-shadow: 0 10px 30px rgba(0, 0, 0, .45); } }
.kc-unit { font-size: 40px; font-weight: 900; color: var(--accent); }
.kc.named .kc-unit { font-size: 36px; color: rgb(var(--c-rgb)); }
.kc-unit.coinu .coin { width: 40px; height: 40px; }
.kc-name { margin-top: 4px; font-size: var(--ns, 52px); line-height: .92; text-shadow: 0 8px 26px rgba(0, 0, 0, .45); }
.kc-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 13px; margin-left: 8px; vertical-align: .35em;
  font-size: 16px; color: #1A1030; background: rgb(var(--c-rgb)); box-shadow: 0 0 18px rgba(var(--c-rgb), .6); }
.kc-line { margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: rgba(246, 243, 236, .82); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.kc-line.gold { color: var(--accent); font-weight: 700; }
.kc-line.red { color: #FF8A98; }
.kc-line.hi { color: rgb(var(--c-rgb)); font-weight: 700; }
.kc-line .aqua { color: var(--aqua); }
.kc-info.center .kc-line { max-width: 330px; }
.kc-lv { margin-top: 10px; display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(246, 243, 236, .62); }
.kc-lv em { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 15px; color: var(--ink); }
.kc-lv span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.kc-lv i { display: block; height: 100%; width: var(--from); border-radius: 2px; background: var(--accent); }
.kc.run .kc-lv i { animation: kcLv .7s ease-out var(--d2, 0ms) both; }
@keyframes kcLv { from { width: var(--from); } to { width: var(--to); box-shadow: 0 0 10px rgba(243, 210, 139, .9); } }
.kc-lv small.gold { color: var(--accent); }
.kc-stats { margin-top: 12px; display: flex; gap: 22px; }
.kc-stats > div { display: flex; flex-direction: column; }
.kc-stats b { font-size: 29px; font-weight: 900; line-height: 1; display: inline-block; transform-origin: 20% 80%; }
.kc-stats b.pop { animation: kcPop .5s ease-out; }
.kc-stats .red { color: #FF8A98; }
.kc-stats small { margin-top: 2px; font-family: var(--f-body, inherit); font-style: normal; font-size: 11.5px; font-weight: 700; color: rgba(246, 243, 236, .6); }
.kc-chips { margin-top: 12px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.kc-chips span { height: 30px; padding: 0 13px; border-radius: 15px; display: flex; align-items: center; font-size: 16px; color: rgb(var(--c-rgb));
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(var(--c-rgb), .4); }

/* дорожка рекорда */
.kc-track { position: relative; margin-top: 18px; height: 52px; }
.kc-track .bar { position: absolute; left: 0; right: 0; top: 22px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.kc-track .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--aqua), var(--accent)); box-shadow: 0 0 12px rgba(243, 210, 139, .8); }
.kc-mk { position: absolute; top: 16px; width: 2px; height: 20px; margin-left: -1px; background: rgba(255, 255, 255, .7); }
.kc-mk > span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700; color: rgba(246, 243, 236, .72); }
.kc-mk.al > span { left: 0; transform: none; }
.kc-mk.ar > span { left: auto; right: 0; transform: none; }
.kc-mk.up > span { bottom: 22px; }
.kc-mk.dn > span { top: 22px; }
.kc-mk b { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 16px; color: var(--ink); }
.kc-mk i { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.kc-mk.hit { background: var(--accent); animation: kcMk .5s ease-out; }
.kc-mk.hit i { animation: kcMkR .6s ease-out; }
.kc-mk.hit b { color: var(--accent); }
@keyframes kcMk { 0% { transform: scaleY(1); } 20% { transform: scaleY(1.7); } 100% { transform: scaleY(1); } }
@keyframes kcMkR { 0% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(3.4); } }

/* находка: цена в вилке */
.kc-range { position: relative; margin-top: 18px; height: 48px; }
.kc-range .bar { position: absolute; left: 0; right: 0; top: 18px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 196, 107, .25), rgba(255, 196, 107, .7)); }
.kc-range .dot { position: absolute; top: 12px; left: var(--x); width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #FFC46B;
  box-shadow: 0 0 0 4px rgba(255, 196, 107, .25), 0 0 16px rgba(255, 196, 107, .9); }
.kc.run .kc-range .dot { animation: kcDot .8s cubic-bezier(.2, .8, .3, 1) var(--d2, 0ms) both; }
@keyframes kcDot { from { left: 0%; } to { left: var(--x); } }
.kc-range .l, .kc-range .r { position: absolute; top: 32px; font-size: 11.5px; font-weight: 700; color: rgba(246, 243, 236, .66); }
.kc-range .l { left: 0; }
.kc-range .r { right: 0; }
.kc-range em { position: absolute; top: -4px; font-style: normal; font-size: 12px; font-weight: 800; color: #FFC46B; white-space: nowrap; transform: translateX(-50%); }

/* кнопки — в нижней полосе кадра, оживают не сразу */
.kc-acts { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 25px); z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
.kc-acts.one { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); }
.kc-acts:not(.live) { pointer-events: none; }
.kc.albino .cr-btn.metal { color: #0E1A22; background-image: linear-gradient(100deg, #9FB4C4 0%, #FFFFFF 35%, #C4D4E0 60%, #F4FAFF 80%, #9FB4C4 100%);
  box-shadow: 0 0 30px rgba(214, 236, 255, .35), 0 12px 28px rgba(0, 0, 0, .45); }
@media (max-height: 720px) {
  .kc-w { font-size: calc(var(--fs, 112px) * .82); }
  .kc-name { font-size: calc(var(--ns, 52px) * .86); }
  .kc-stats { margin-top: 8px; }
  .kc-lv { display: none; }
}