/* «Туман»: общее для показа улова и нового уровня (js/fishing/catchcard.js). Сам показ улова «Кино» — css/kino.css. */

#fishing .hud-top, #fishing .hud-side, #fishing .hud-bottom, #fishing .hud-banner { transition: opacity .3s; }
#fishing.reveal .hud-top, #fishing.reveal .hud-side, #fishing.reveal .hud-bottom, #fishing.reveal .hud-banner { opacity: 0; pointer-events: none; }
.catch-wrap { padding: 0; display: block; }
@keyframes crFade { from { opacity: 0; } }
@keyframes crFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes crOut { to { opacity: 0; transform: scale(1.02); } }
@keyframes crSpin { to { transform: rotate(360deg); } }
@keyframes crIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes crGold { from { background-position: 0% 0; } to { background-position: -220% 0; } }

/* кнопки показа улова и нового уровня */
.cr-btn.small { font-size: 19px; }
.cr-btn { height: 58px; border-radius: 18px; border: 0; padding: 0 10px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 24px; color: var(--ink);
  cursor: pointer; transition: transform .15s; white-space: nowrap; }
.cr-btn:active { transform: scale(.97); }
.cr-btn.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.cr-btn.gold { background: var(--accent); color: var(--accent-ink); font-size: 26px; box-shadow: 0 12px 28px rgba(3, 10, 12, .35); }
.cr-btn.metal { color: #2A1D05; font-size: 26px; background: linear-gradient(100deg, #C8922F 0%, #FFE39A 35%, #E2AE4C 60%, #FFF0C4 80%, #C8922F 100%); background-size: 220% 100%;
  animation: crGold 3.2s linear 3; box-shadow: 0 0 30px rgba(255, 200, 90, .35), 0 12px 28px rgba(0, 0, 0, .45); }

/* ── новый уровень ─────────────────────────────────────── */
.lvu { position: absolute; inset: 0; z-index: 40; overflow: hidden; color: var(--ink); background: var(--bg); animation: crFade .35s ease-out both; }
.lvu.out { animation: crOut .28s ease-in both; pointer-events: none; }
.lvu-bg { position: absolute; inset: -8%; background-size: cover; background-position: center 62%; }
.lvu-grade { position: absolute; inset: 0; background: var(--atmo-grade, #17575C); opacity: var(--atmo-grade-a, .55); mix-blend-mode: color; }
.lvu-dim { position: absolute; inset: 0; background: radial-gradient(70% 40% at 50% 30%, rgba(8, 14, 16, .55) 0%, rgba(4, 8, 10, .9) 100%); animation: crFadeIn .5s ease-out both; }
.lvu-body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 18px) 18px calc(var(--safe-bottom) + 18px); }
/* три карточки и обе кнопки — на одном экране (разбор экранов 06.10) */
.lvu-hero { position: relative; flex: none; width: 260px; height: 260px; margin: 22px auto 0; }
/* Лучи — готовая картинка (09.10, iPhone 13 грелся): был круг 900 px — конус-градиент под маской и размытием, и всё это
   пересчитывалось каждый кадр вращения. В картинке те же лучи (3° из 12°), то же угасание маски (до 10 % радиуса угла —
   полностью, к 46 % — в ноль) и то же размытие 1,5 px, посчитанное один раз; угасает она к 293 px, поэтому круг 600 px. */
.lvu-rays { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3CradialGradient id='g' gradientUnits='userSpaceOnUse' cx='300' cy='300' r='636.4'%3E%3Cstop offset='.1' stop-color='rgb(255,214,140)' stop-opacity='.16'/%3E%3Cstop offset='.46' stop-color='rgb(255,214,140)' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Cpath fill='url(%23g)' filter='url(%23b)' d='M300 300L300.00 -40.00L317.79 -39.53ZM300 300L370.69 -32.57L388.00 -28.41ZM300 300L438.29 -10.61L454.36 -2.94ZM300 300L499.85 24.93L513.97 35.77ZM300 300L552.67 72.50L564.23 86.03ZM300 300L594.45 130.00L602.94 145.64ZM300 300L623.36 194.93L628.41 212.00ZM300 300L638.14 264.46L639.53 282.21ZM300 300L638.14 335.54L635.81 353.19ZM300 300L623.36 405.07L617.42 421.85ZM300 300L594.45 470.00L585.15 485.18ZM300 300L552.67 527.50L540.42 540.42ZM300 300L499.85 575.07L485.18 585.15ZM300 300L438.29 610.61L421.85 617.42ZM300 300L370.69 632.57L353.19 635.81ZM300 300L300.00 640.00L282.21 639.53ZM300 300L229.31 632.57L212.00 628.41ZM300 300L161.71 610.61L145.64 602.94ZM300 300L100.15 575.07L86.03 564.23ZM300 300L47.33 527.50L35.77 513.97ZM300 300L5.55 470.00L-2.94 454.36ZM300 300L-23.36 405.07L-28.41 388.00ZM300 300L-38.14 335.54L-39.53 317.79ZM300 300L-38.14 264.46L-35.81 246.81ZM300 300L-23.36 194.93L-17.42 178.15ZM300 300L5.55 130.00L14.85 114.82ZM300 300L47.33 72.50L59.58 59.58ZM300 300L100.15 24.93L114.82 14.85ZM300 300L161.71 -10.61L178.15 -17.42ZM300 300L229.31 -32.57L246.81 -35.81Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mix-blend-mode: screen; animation: crFadeIn .9s ease-out 1.28s both, crSpin 36s linear infinite; }
.lvu-wave { position: absolute; left: 10px; top: 10px; width: 240px; height: 240px; border-radius: 50%; border: 2px solid rgba(255, 214, 140, .8); opacity: 0;
  animation: lvWave 1.2s cubic-bezier(.1, .7, .3, 1) 1.28s both; }
.lvu-wave.w2 { animation-name: lvWave2; animation-delay: 1.52s; animation-duration: 1.5s; }
@keyframes lvWave { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes lvWave2 { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.8); } }
.lvu-ring { position: absolute; inset: 0; width: 260px; height: 260px; overflow: visible; }
.lvu-arc { animation: lvRing 1s cubic-bezier(.3, .7, .2, 1) .32s both; }
@keyframes lvRing { from { stroke-dashoffset: calc(var(--c) * .2); } to { stroke-dashoffset: 0; } }
.lvu-glowring { opacity: 0; filter: blur(8px); animation: lvGlow 1.2s ease-out 1.28s both; }
@keyframes lvGlow { 0% { opacity: 0; } 20% { opacity: .45; } 100% { opacity: .2; } }
.lvu-num { position: absolute; inset: 0; display: grid; place-items: center; }
.lvu-num > span { grid-area: 1 / 1; line-height: 1; }
.lvu-old { font-size: 130px; font-weight: 900; color: rgba(246, 243, 236, .85); animation: lvOld .32s cubic-bezier(.5, 0, .8, .4) 1.2s both; }
@keyframes lvOld { to { opacity: 0; transform: translateY(-70px); } }
.lvu-new { opacity: 0; animation: lvNew .72s cubic-bezier(.2, .9, .3, 1.3) 1.36s both; }
@keyframes lvNew { 0% { opacity: 0; transform: translateY(80px) scale(.7); } 55% { opacity: 1; transform: translateY(-6px) scale(1.14); } 100% { opacity: 1; transform: none; } }
/* Золотые цифры: перелив — у .lvu-gold на своём слое, свечение — у неподвижной копии под ней (09.10). Раньше свечение было
   фильтром на самих цифрах, и десять секунд перелива телефон каждый кадр заново размывал цифры 150 px. Копия — те же
   золотые цифры с тем же фильтром, только без перелива: свечение то же, а считается один раз; сверху её закрывают цифры. */
.lvu-new { position: relative; }
.lvu-gold, .lvu-gold-glow { font-size: 150px; font-weight: 900;
  background: linear-gradient(100deg, #B07A22 0%, #FFE6A0 22%, #D9A441 40%, #FFF4CF 55%, #C08A2E 72%, #FFE08A 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.lvu-gold { position: relative; will-change: transform; animation: crGold 3.2s linear 3; }
.lvu-gold-glow { position: absolute; left: 0; top: 0; pointer-events: none; filter: drop-shadow(0 0 22px rgba(255, 200, 90, .45)); }
.lvu-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 16px; }
.lvu-t { font-size: 44px; font-weight: 900; line-height: 1; }
.lvu-s { margin-top: 6px; font-size: 14px; font-weight: 600; color: rgba(246, 243, 236, .8); }
.lvu-in { animation: crIn .5s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms) both; }
.lvu-open { margin-top: 14px; font-size: 24px; font-weight: 900; color: var(--accent); }
.lvu-cards { flex: 1 1 auto; min-height: 0; margin: 10px -4px 0; padding: 0 4px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.lvu-card { position: relative; flex: none; height: 84px; border-radius: 20px; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 10px;
  animation: lvCardIn .7s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms) both; }
@keyframes lvCardIn { from { opacity: 0; transform: translateY(46px) scale(.96); } }
.lvu-pic { flex: none; width: 92px; height: 66px; border-radius: 14px; display: grid; place-items: center; overflow: hidden;
  background: rgba(255, 255, 255, .06) center / cover no-repeat; }
.lvu-pic.rod { position: relative; display: block; background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05) 72%); }
.lvu-pic.rod img { position: absolute; max-width: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.lvu-pic.icon svg { width: 46px; height: 46px; }
.lvu-pic.brain { color: var(--violet); background: rgba(201, 182, 255, .14); }
.lvu-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lvu-tx small { font-size: 12px; font-weight: 700; color: rgba(246, 243, 236, .7); }
.lvu-tx b { font-size: 28px; font-weight: 900; line-height: .95; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lvu-tx span { font-size: 12.5px; font-weight: 600; color: rgba(246, 243, 236, .8); }
.lvu-shine { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background-size: 300% 100%; background-position: 120% 0;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 246, 220, .28) 50%, rgba(255, 255, 255, 0) 60%);
  animation: lvShine 1s ease-in-out var(--d, 0ms) both; }
@keyframes lvShine { from { background-position: 120% 0; } to { background-position: -60% 0; } }
.lvu-empty { flex: 1 1 auto; text-align: center; margin-top: 18px; }
.lvu-ok { flex: none; width: 100%; height: 60px; margin-top: 12px; font-size: 27px; }
.lvu-acts { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }      /* «В Скалистую бухту» · «Отлично» */
.lvu-acts .lvu-ok { margin-top: 0; }
.lvu-go { height: 60px; font-size: 21px; overflow: hidden; text-overflow: ellipsis; }
.lvu-conf { position: absolute; top: -30px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; pointer-events: none; animation: lvConf 3.4s linear var(--d, 0ms) both; }
@keyframes lvConf { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 110vh) rotate(var(--r)); } }
@media (max-height: 720px) {
  .lvu-hero { transform: scale(.78); margin: -22px auto -34px; }
  .lvu-t { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr *, .lvu * { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}