/* «Кино»: окно рыбалки и показ улова (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; flex-wrap: wrap; align-items: center; gap: 2px 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.has-pet .hint { padding-left: 62px; }                        /* напарник сидит слева (js/fishing/pet.js) */
#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 > span { display: inline-block; }
#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; }
/* дрожь — у слова внутри (js/fishing/game.js bigText): влёт кончается без сдвига (transform: none), так что вид тот же */
#fishing .kn-big.red > span { animation: 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; }
/* число приманок не прячется за «…»: обрезается только название («Вертушка ·…», обход экранов 09.10) */
#fishing .bait-chip .t2:has(.bn) { display: flex; max-width: 136px; text-overflow: clip; }
#fishing .bait-chip .t2 .bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#fishing .bait-chip .t2 .bc { flex: none; color: var(--accent); }
#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; }
/* слово под значком: кнопка четыре раза меняет смысл — «Забросить», «Ждём…», «Подсечь!», «Тяну…» (разбор экранов 06.10) */
#fishing .main-btn .core .icon { width: 26px; height: 26px; }
#fishing .main-btn .label { white-space: nowrap; font: 800 11.5px/1 var(--f-text); letter-spacing: .01em; }
#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 .r { right: 0; }
#fishing .kn-scrub .l { display: none; }          /* «22 м» внизу читалось как «осталось»; расстояние — у поплавка (разбор экранов 06.10) */

/* подсказки на сцене — над субтитром: под ним кнопка, наживка и садок (core/ui.js toast, разбор экранов 06.10) */
#fishing.active ~ #toasts { bottom: calc(var(--safe-bottom) + 196px); }

/* ── спиннинг (Старица): проводка блесны ритмом — шкала ритма над субтитром (js/fishing/game.js spin*, spin.js) ── */
#fishing .spin-meter { margin: 0 6px 12px; pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .35s cubic-bezier(.2, .8, .3, 1); }
#fishing .spin-meter.hidden { display: none; }
#fishing .spin-meter.on { opacity: 1; transform: none; }
#fishing .sm-title { margin-bottom: 8px; font: italic 900 clamp(19px, 5.6vw, 23px)/1.04 var(--f-display); color: var(--accent);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
#fishing .sm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; margin-bottom: 7px; }
#fishing.has-pet .sm-head, #fishing.has-pet .sm-track { margin-left: 62px; }   /* напарник сидит слева, как у субтитра */
#fishing .sm-phase { min-width: 0; font-size: 15px; font-weight: 800; color: var(--ink); text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
#fishing .sm-track { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 10px rgba(0, 0, 0, .35); }
#fishing .sm-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 6px; background: rgba(91, 214, 154, .62);
  transform-origin: 0 50%; }
#fishing .sm-mark { position: absolute; left: -2px; top: -5px; width: 4px; height: 22px; border-radius: 2px; background: #F6F3EC;
  box-shadow: 0 0 8px rgba(0, 0, 0, .7); will-change: transform; }
#fishing .sm-mark::after { content: ""; position: absolute; inset: -2px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent);
  opacity: 0; transition: opacity .12s; }
#fishing .sm-track.ok .sm-mark::after { opacity: 1; }
#fishing .sm-track.over .sm-mark { background: #FF7A8A; }
#fishing .sm-taps { position: absolute; inset: -4px 0; display: none; align-items: center; justify-content: flex-start; gap: 12px; }
#fishing .sm-track.taps { background: none; box-shadow: none; }
#fishing .sm-track.taps .sm-zone, #fishing .sm-track.taps .sm-mark { opacity: 0; }
#fishing .sm-track.taps .sm-taps { display: flex; }
#fishing .sm-taps i { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(246, 243, 236, .75);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
#fishing .sm-taps i::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);
  opacity: 0; transform: scale(.4); transition: opacity .12s, transform .2s cubic-bezier(.2, .9, .3, 1.3); }
#fishing .sm-taps i.on::after { opacity: 1; transform: none; }
#fishing .sm-taps i.over::after { opacity: 1; transform: none; background: #FF7A8A; box-shadow: 0 0 10px #FF7A8A; }
#fishing .sm-taps i.off { opacity: 0; }
#fishing .sm-pips { flex: none; display: flex; gap: 6px; }
#fishing .sm-pips i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .24); }
#fishing .sm-pips i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);
  opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s cubic-bezier(.2, .9, .3, 1.4); }
#fishing .sm-pips i.on::after { opacity: 1; transform: scale(1.2); }
#fishing[data-st="spin"] .kn-title, #fishing[data-st="spin"] .kn-side,
#fishing[data-st="snag"] .kn-title, #fishing[data-st="snag"] .kn-side { opacity: 0; pointer-events: none; }
#fishing[data-st="spin"] .bait-chip, #fishing[data-st="spin"] .bucket-btn,
#fishing[data-st="snag"] .bait-chip, #fishing[data-st="snag"] .bucket-btn { opacity: .35; }
#fishing[data-st="spin"] .kn-scrub, #fishing[data-st="snag"] .kn-scrub { opacity: 1; }
#fishing .main-btn.spin::before { border-color: rgba(255, 255, 255, .3); }
#fishing .main-btn.spin .core { background: rgba(12, 24, 26, .6); color: var(--aqua); transition: transform .1s; }
#fishing .main-btn.spin.down .core { transform: scale(.92); }
#fishing .main-btn.snag::before { border-color: #FF7A8A; }
#fishing .main-btn.snag .core { background: #FF5A6E; color: #fff; }

/* подсказка «коснитесь воды» — мягкое пятно света на воде */
#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%; }
/* лучи и ореол — готовые картинки цветом сцены (js/fishing/catchcard.js fxImages, 09.10): без маски и размытия на каждый кадр */
.kc-rays { width: 760px; height: 760px; margin: -380px 0 0 -380px; pointer-events: none; }
.kc-rays i { position: absolute; inset: 0; animation: crSpin 60s linear infinite; background: center / 100% 100% no-repeat; }
.kc.run .kc-rays { animation: kcFade .9s ease-out var(--d, 0ms) both; }
.kc-halo { width: 380px; height: 300px; margin: -150px 0 0 -190px; pointer-events: none; background: center / 100% 100% no-repeat; }
.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-text); font-style: normal; font-size: 13px; font-weight: 600; color: rgba(246, 243, 236, .78); }   /* читаемо (разбор экранов 06.10) */
.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.solo { grid-template-columns: minmax(0, 1fr); }
.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); }
/* титры не влезли по высоте (catchcard.js проверяет после вёрстки): сцена ниже, строки плотнее, потом ещё плотнее */
.kc.tight .kc-stage { min-height: 96px; }
.kc.tight .kc-name { font-size: calc(var(--ns, 52px) * .8); }
.kc.tight .kc-line { margin-top: 4px; font-size: 13px; }
.kc.tight .kc-track { margin-top: 10px; }
.kc.tight .kc-stats { margin-top: 6px; }
.kc.tight .kc-lv { display: none; }
.kc.tighter .kc-stage { min-height: 64px; }
.kc.tighter .kc-body { padding-top: calc(var(--safe-top) + 48px); }
.kc.tighter .kc-line { line-height: 1.25; }
@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; }
}

/* ── находка на удочку: контейнер или ящик (js/fishing/dropreveal.js) — после вываживания, не окном ──
   тьма, столб света из воды, находка поднимается в лучах, вспышка и искры, титр; улетает вверх, к «Гавани» */
.dr { position: absolute; inset: 0; z-index: 40; overflow: hidden; touch-action: none; }
.dr-dim { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(ellipse 80% 60% at 50% 42%, rgba(40, 26, 4, .55), rgba(2, 5, 8, .88) 72%); }
.dr.on .dr-dim { opacity: 1; }
.dr-pillar { position: absolute; left: 50%; bottom: 0; width: min(56vw, 260px); height: 100%; opacity: 0;
  transform: translateX(-50%) scaleY(0); transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 214, 120, .6), rgba(255, 214, 120, .2) 50%, rgba(255, 214, 120, 0) 85%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  transition: transform .7s cubic-bezier(.2, .9, .3, 1), opacity .4s ease; }
.dr.on .dr-pillar { transform: translateX(-50%) scaleY(1); opacity: 1; }
.dr.lit .dr-pillar { opacity: .4; transition: transform .7s cubic-bezier(.2, .9, .3, 1), opacity 1.2s ease; }
.dr-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(255, 252, 235, .95), rgba(255, 230, 160, .35) 35%, rgba(255, 230, 160, 0) 65%); }
.dr.lit .dr-flash { animation: drFlash .7s ease-out both; }
@keyframes drFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
.dr-stage { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.dr-rays { position: absolute; left: -180px; top: -180px; width: 360px; height: 360px; opacity: 0; transform: scale(.5);
  transition: opacity .5s ease, transform .8s cubic-bezier(.2, 1.3, .4, 1); }
/* лучи — готовая картинка: те же 6° из 20° и то же угасание, что давала маска (09.10: маску на вращении телефон считал каждый кадр) */
.dr-rays i { position: absolute; inset: 0; animation: drSpin 14s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='180' cy='180' r='254.56'%3E%3Cstop offset='.16' stop-color='rgb(255,222,150)' stop-opacity='.5'/%3E%3Cstop offset='.66' stop-color='rgb(255,222,150)' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath fill='url(%23g)' d='M180 180L180.00 -20.00L200.91 -18.90ZM180 180L248.40 -7.94L267.67 0.24ZM180 180L308.56 26.79L323.87 41.07ZM180 180L353.21 80.00L362.71 98.65ZM180 180L376.96 145.27L379.51 166.05ZM180 180L376.96 214.73L372.25 235.13ZM180 180L353.21 280.00L341.80 297.56ZM180 180L308.56 333.21L291.84 345.81ZM180 180L248.40 367.94L228.38 374.06ZM180 180L180.00 380.00L159.09 378.90ZM180 180L111.60 367.94L92.33 359.76ZM180 180L51.44 333.21L36.13 318.93ZM180 180L6.79 280.00L-2.71 261.35ZM180 180L-16.96 214.73L-19.51 193.95ZM180 180L-16.96 145.27L-12.25 124.87ZM180 180L6.79 80.00L18.20 62.44ZM180 180L51.44 26.79L68.16 14.19ZM180 180L111.60 -7.94L131.62 -14.06Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@keyframes drSpin { to { transform: rotate(360deg); } }
.dr.lit .dr-rays { opacity: 1; transform: scale(1); }
.dr-halo { position: absolute; left: -120px; top: -120px; width: 240px; height: 240px; border-radius: 50%; opacity: 0; transform: scale(.3);
  background: radial-gradient(circle, rgba(255, 238, 180, .85), rgba(255, 196, 80, .3) 45%, rgba(255, 196, 80, 0) 70%);
  transition: opacity .3s ease, transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.dr.lit .dr-halo { opacity: 1; transform: scale(1); }
.dr-sparks i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #FFE9A8;
  box-shadow: 0 0 10px #FFD86B; opacity: 0; }
.dr.lit .dr-sparks i { animation: drSpark .9s cubic-bezier(.15, .8, .3, 1) both; animation-delay: calc(var(--k) * 18ms); }
@keyframes drSpark { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) scale(.3); } }
.dr-items { position: absolute; left: 0; top: 0; display: flex; gap: 12px; transform: translate(-50%, -50%); }
.dr-item { width: min(48vw, 200px); aspect-ratio: 1; opacity: 0; transform: translateY(52vh) scale(.3) rotate(-10deg);
  transition: transform 1s cubic-bezier(.17, 1.3, .4, 1), opacity .35s ease; transition-delay: calc(var(--i) * 110ms); }
.dr-items.many .dr-item { width: min(34vw, 150px); }
.dr.rise .dr-item { opacity: 1; transform: none; }
.dr-bob { position: relative; width: 100%; height: 100%; }
.dr.lit .dr-bob { animation: drBob 2.2s ease-in-out .4s infinite; }
@keyframes drBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-1.5deg); } }
.dr-bob img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55)); }
.dr-shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.dr-shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 250, 225, .9) 50%, rgba(255, 255, 255, 0)); }
.dr.lit .dr-shine::before { animation: drSweep 1.3s ease-in-out .15s 2 both; }
@keyframes drSweep { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(270%); } }
.dr-text { position: absolute; left: 16px; right: 16px; top: calc(40% + min(30vw, 128px)); text-align: center; pointer-events: none; }
.dr-kicker, .dr-title, .dr-sub { opacity: 0; transform: translateY(12px); }
.dr.words .dr-kicker { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s ease; }
.dr.words .dr-title { animation: drTitle .65s cubic-bezier(.2, 1.5, .4, 1) .08s both; }
.dr.words .dr-sub { opacity: 1; transform: none; transition: opacity .4s ease .35s, transform .5s ease .35s; }
@keyframes drTitle { 0% { opacity: 0; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }
.dr-kicker { font-size: 18px; letter-spacing: .04em; color: #F3D28B; }
.dr-title { font-size: clamp(40px, 13vw, 58px); line-height: .95; color: #FFE9A8;
  text-shadow: 0 0 24px rgba(255, 200, 90, .55), 0 3px 0 rgba(120, 70, 0, .6); }
.dr-sub { margin-top: 10px; font-size: 14px; font-weight: 600; line-height: 1.35; color: rgba(246, 243, 236, .85); }
.dr.out .dr-item { transition: transform .55s cubic-bezier(.5, 0, .8, .4), opacity .45s ease .12s;
  transform: translate(-36vw, -48vh) scale(.12) rotate(18deg); opacity: 0; }
.dr.out .dr-text, .dr.out .dr-rays, .dr.out .dr-halo, .dr.out .dr-pillar { opacity: 0; transition: opacity .3s ease; }
.dr.out .dr-dim { opacity: 0; transition: opacity .45s ease .12s; }
@media (prefers-reduced-motion: reduce) { .dr-rays i, .dr.lit .dr-bob { animation: none; } }

/* Памятка спиннинга (game.js spinHelp) */
.spin-help { text-align: left; }
.spin-help b.tm-x { display: block; font-size: 22px; margin-bottom: 6px; text-align: center; }
.spin-help p { font-size: 14px; line-height: 1.4; margin: 6px 0; color: rgba(246, 243, 236, .85); }
.spin-help ul { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.spin-help li { font-size: 14px; line-height: 1.35; }
.spin-help li b { color: #f3d28b; }


/* Дорожка спиннинга (09.10): ноты едут к кружку; полоса — держать, точка — коснуться. Только transform/opacity */
#fishing .spin-meter { position: relative; z-index: 6; }        /* над удочкой: правый край дорожки не прячется */
#fishing .sm-lane { position: relative; height: 40px; border-radius: 20px; background: rgba(8, 14, 18, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
#fishing.has-pet .sm-lane { margin-left: 62px; }
#fishing .sm-hit { position: absolute; left: 13px; top: 3px; width: 34px; height: 34px; border-radius: 50%; z-index: 2;
  box-shadow: inset 0 0 0 3px rgba(246, 243, 236, .75); transition: transform .12s, box-shadow .12s; }
#fishing .sm-hit.on { box-shadow: inset 0 0 0 3px var(--accent), 0 0 16px var(--accent); }
#fishing .sm-hit.down { transform: scale(.9); }
#fishing .sm-notes { position: absolute; inset: 0; }
#fishing .sm-note { position: absolute; left: 0; top: 50%; will-change: transform; }
#fishing .sm-note.dot { width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #F6F3EC;
  box-shadow: 0 0 10px rgba(246, 243, 236, .7); }
#fishing .sm-note.bar { height: 16px; margin-top: -8px; border-radius: 8px; background: linear-gradient(90deg, #F6F3EC, #d8e6ee);
  box-shadow: 0 0 10px rgba(246, 243, 236, .5); }
#fishing .sm-note[data-st="hold"] { background: var(--accent); box-shadow: 0 0 14px var(--accent); }
#fishing .sm-note[data-st="hit"] { background: var(--accent); box-shadow: 0 0 16px var(--accent); opacity: .85; }
#fishing .sm-note[data-st="miss"] { background: rgba(255, 122, 138, .55); box-shadow: none; opacity: .5; }
#fishing .spin-meter .sm-phase { font: italic 900 22px/1 var(--f-display); letter-spacing: .01em; }
#fishing .spin-meter[data-cue="hold"] .sm-phase, #fishing .spin-meter[data-cue="tap"] .sm-phase { color: var(--accent); }
#fishing .spin-meter[data-cue="wait"] .sm-phase { color: rgba(246, 243, 236, .7); }

/* ── Бой спиннингом — шкала натяжения (22.10, js/fishing/spinfight.js): силы рыбы и стрелка над субтитром.
   Видно только в бою спиннингом (#fishing[data-sf="1"]). Стрелка и силы — только transform ── */
#fishing .sf-box { display: none; margin: 0 6px 12px; pointer-events: none; }
#fishing[data-sf="1"] .sf-box { display: block; }
#fishing.has-pet .sf-box { margin-left: 68px; }
#fishing .sf-stam { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#fishing .sf-stam span { flex: none; font-size: 13px; font-weight: 800; color: rgba(246, 243, 236, .8); text-shadow: 0 1px 8px rgba(0, 0, 0, .9); }
#fishing .sf-stam i { position: relative; flex: 1; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(255, 255, 255, .16); }
#fishing .sf-stam b { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(90deg, #FF8A5B, #F3D28B);
  transform-origin: 0 50%; will-change: transform; }
#fishing .sf-stam.low b { background: linear-gradient(90deg, #5BD69A, #9FE8C2); }
#fishing .sf-meter { position: relative; height: 26px; }
#fishing .sf-zones { position: absolute; inset: 4px 0; display: flex; border-radius: 9px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 12px rgba(0, 0, 0, .45); }
#fishing .sf-zones i { flex: 1 1 0; }
#fishing .sf-zones .s { background: rgba(160, 175, 190, .35); }
#fishing .sf-zones .g { background: rgba(91, 214, 154, .75); }
#fishing .sf-zones .y { background: rgba(243, 201, 105, .8); }
#fishing .sf-zones .r { background: rgba(255, 90, 110, .85); }
#fishing .sf-needle { position: absolute; left: -3px; top: 0; width: 6px; height: 26px; border-radius: 3px; background: #F6F3EC;
  box-shadow: 0 0 0 2px rgba(8, 14, 18, .7), 0 0 10px rgba(255, 255, 255, .6); will-change: transform; }
#fishing .sf-meter[data-z="red"] .sf-needle { background: #fff; box-shadow: 0 0 0 2px rgba(120, 10, 25, .8), 0 0 16px #FF5A6E; }
#fishing .sf-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; font-weight: 700;
  color: rgba(246, 243, 236, .65); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
#fishing[data-st="spinhit"] .kn-title, #fishing[data-st="spinhit"] .kn-side { opacity: 0; pointer-events: none; }
#fishing[data-st="spinhit"] .kn-scrub { opacity: 1; }
/* крупное слово выходки рыбы — над шкалой, субтитр под ним виден */
#fishing[data-sf="1"] .kn-big { bottom: calc(var(--safe-bottom) + 262px); }
#fishing[data-sf="1"] .kn-big.red { font-size: 40px; }
/* спиннинг: точка места под названием приманки (шаг 4) */
#fishing .bait-chip .bs { display: block; font-size: 11px; font-weight: 800; color: var(--aqua); line-height: 1.1; white-space: nowrap; }
#fishing .bait-chip .t2:has(.bs) { flex-wrap: wrap; }
#fishing .bait-chip .t2 .bs { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; }