/* «Туман»: общее для показа улова и нового уровня (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); }
.lvu-hero { position: relative; flex: none; width: 260px; height: 260px; margin: clamp(6px, calc((100vh - 700px) * .5), 72px) auto 0; }
.lvu-rays { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 140, .16) 0deg 3deg, rgba(255, 214, 140, 0) 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, #000 10%, transparent 46%); mask-image: radial-gradient(circle, #000 0, #000 10%, transparent 46%);
  filter: blur(1.5px); 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 { 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;
  animation: crGold 3.2s linear 3; 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: 18px; 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: 96px; 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: 104px; height: 76px; 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-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; }
  .lvu-card { height: 84px; }
  .lvu-pic { width: 92px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr *, .lvu * { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
}