/* Мини-игры заданий сезона 1 (js/story/games.js, update/38_SEASON1_QUESTS.md): кодовый замок, сборка катушки, котелок,
   вахта у маяка, погружение, морзянка. Окно, заголовок и кнопки — общие .sg-* из story.css; здесь — только своё
   (.sgx — общее для новых игр, .scl / .srr / .skt / .slh / .sdv / .smr — по играм).
   Двигаются только transform и opacity (память miniapp-performance): без backdrop-filter, без анимации filter,
   box-shadow, размеров и отступов. Бесконечные анимации живут, только пока окно игры открыто: закрыли — окно
   убирается целиком; что видно лишь после победы — анимируется лишь после неё. */

/* подсказки (toast) — над окном мини-игры: #toasts (z 60) иначе остаётся под .sg-wrap (z 126) */
body:has(.sg-wrap) #toasts { z-index: 127; }

/* ── общее ───────────────────────────────────────────────── */
/* подсветка «Помочь» — класс .cue: общий .hint из app.css выключает нажатия и даёт отступы */
/* --sgx-h — высота, которая остаётся игре без вырезов экрана и полос Telegram во весь экран (vh их не учитывает) */
.sgx { --sgx-h: calc(100vh - var(--safe-top) - var(--safe-bottom)); }
.sgx .sgx-mid { position: absolute; left: 14px; right: 14px; top: calc(var(--safe-top) + 98px); bottom: calc(var(--safe-bottom) + var(--sgx-low, 96px));
  z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.sgx .sg-low .sg-btn, .sgx .sg-low .sg-hint, .smr-opts { transition: opacity .3s; }
.sgx.won .sg-low .sg-btn, .sgx.won .sg-low .sg-hint, .sgx.won .smr-opts { opacity: 0; pointer-events: none; }
.sgx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sgx-say { position: absolute; left: 50%; bottom: calc(var(--safe-bottom) + var(--sgx-low, 96px) + 10px); z-index: 6; width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 16px; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; color: #F6F3EC; overflow-wrap: anywhere;
  background: rgba(12, 22, 24, .95); border: 1.5px solid rgba(243, 210, 139, .55); box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.sgx-say.on { opacity: 1; transform: translate(-50%, 0); }
/* встряхнуть — свойством translate: оно складывается с transform элемента (поворот, сдвиг) и не сбивает его */
.sgx-shake { animation: sgxShake .42s ease-in-out; }
@keyframes sgxShake { 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }
@keyframes sgxPulse { from { opacity: .3; } to { opacity: 1; } }
/* находка шага в конце: затемнение, золотое сияние, предмет «выпрыгивает» */
.sgx-rv { position: absolute; left: 0; right: 0; top: calc(var(--safe-top) + 90px); bottom: calc(var(--safe-bottom) + 60px); z-index: 4; pointer-events: none;
  display: grid; place-items: center; }
.sgx-rv::before { content: ""; position: fixed; inset: 0; background: rgba(3, 7, 7, .62); opacity: 0; transition: opacity .5s; }
.sgx-rv i { position: absolute; left: 50%; top: 50%; width: 130vmin; height: 130vmin; margin: -65vmin 0 0 -65vmin; opacity: 0; transform: scale(.4);
  background: radial-gradient(circle, rgba(243, 210, 139, .48), rgba(243, 210, 139, .12) 30%, rgba(243, 210, 139, 0) 58%); transition: opacity .6s, transform 1.2s var(--ease); }
.sgx-rv img { position: relative; display: block; width: auto; height: auto; max-width: min(64vw, 260px); max-height: 36vh; opacity: 0;
  transform: translateY(30px) scale(.3) rotate(-10deg); transition: transform .9s var(--spring), opacity .4s; }
.sgx-rv.on::before, .sgx-rv.on i, .sgx-rv.on img { opacity: 1; }
.sgx-rv.on i { transform: scale(1); }
.sgx-rv.on img { transform: rotate(-4deg); }

/* ── кодовый замок (code_lock) ───────────────────────────── */
.sg-lock { background: #0B0705; }
.scl-room { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, #2A1B10 30%, #3A2616 31.5%, rgba(0, 0, 0, 0) 31.5%, rgba(0, 0, 0, 0) 58%, #2A1B10 58%, #3A2616 59.5%, rgba(0, 0, 0, 0) 59.5%),
              radial-gradient(70% 45% at 50% 46%, rgba(255, 186, 104, .3), rgba(255, 186, 104, 0) 70%),
              linear-gradient(180deg, #1A120B, #0B0705); }
.scl-lamp { position: absolute; left: 50%; top: 22%; width: 90vmin; height: 90vmin; margin: -45vmin 0 0 -45vmin; opacity: .7;
  background: radial-gradient(circle, rgba(255, 196, 120, .4), rgba(255, 180, 90, .1) 36%, rgba(255, 180, 90, 0) 62%); }
.sg-lock.open .scl-lamp { animation: sclLamp 2.8s ease-in-out infinite alternate; }
@keyframes sclLamp { from { opacity: .55; } to { opacity: 1; } }
.scl-door { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.45, .05, .3, 1);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .55)),
    linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, .45)),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 16%, #4E3522 16%, #3A2717 20%, #1E140B 20.5%, rgba(0, 0, 0, 0) 20.5%,
                            rgba(0, 0, 0, 0) 79%, #4E3522 79%, #3A2717 83%, #1E140B 83.5%, rgba(0, 0, 0, 0) 83.5%),
    repeating-linear-gradient(90deg, #4A3322 0 54px, #3B281A 54px 56px, #1E140B 56px 58px, #533926 58px 112px, #3E2A1B 112px 114px, #1E140B 114px 116px); }
.scl-hinge { position: absolute; left: 0; top: 18%; width: 34%; height: 14px; margin-top: -7px; border-radius: 0 8px 8px 0;
  background: radial-gradient(circle at calc(100% - 9px) 50%, #6A7076 0 2.5px, rgba(0, 0, 0, 0) 3px), linear-gradient(180deg, #4A4F54, #202428);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.scl-hinge.h2 { top: 81.2%; }
.sg-lock.open .scl-door { transform: perspective(1200px) rotateY(80deg); }
.scl-mid { gap: 18px; }
.scl-card { position: relative; max-width: 92%; padding: 10px 18px 11px; border-radius: 5px; font-size: 19px; font-weight: 700; line-height: 1.25; text-align: center;
  color: #2B2112; background: #EFE3C6; box-shadow: 0 10px 24px rgba(0, 0, 0, .55); transform: rotate(-2deg); overflow-wrap: anywhere; transition: opacity .4s; }
.scl-card::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(43, 33, 18, .22); border-radius: 3px; pointer-events: none; }
.scl-card::after { content: ""; position: absolute; left: 50%; top: -6px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FF9A8A, #B8352C 62%); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.scl-lock { --row: 46px; --ar: 42px; position: relative; display: flex; flex-direction: column; align-items: center;
  transition: transform .75s cubic-bezier(.55, 0, .85, .35), opacity .5s .25s; }
.scl-hasp { position: absolute; left: 50%; top: 2px; width: 96px; height: 50px; margin-left: -48px; border-radius: 10px;
  background: radial-gradient(circle at 13px 50%, #7A8086 0 3px, rgba(0, 0, 0, 0) 3.5px), radial-gradient(circle at calc(100% - 13px) 50%, #7A8086 0 3px, rgba(0, 0, 0, 0) 3.5px),
              linear-gradient(180deg, #3A3F44, #1C2024);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18); }
.scl-shackle { position: relative; display: block; width: 168px; height: auto; margin-bottom: -42px; transition: transform .45s var(--spring); }
.sg-lock.unlocked .scl-shackle { transform: translateY(-26px); }
.scl-body { position: relative; padding: 12px 14px 8px; border-radius: 26px;
  background: linear-gradient(172deg, #F7DD98 0%, #DDB262 26%, #BC8D3E 60%, #8C6427 100%);
  box-shadow: 0 20px 44px rgba(0, 0, 0, .65), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -5px 0 rgba(0, 0, 0, .25); }
.scl-wheels { display: flex; gap: 6px; padding: 4px 6px; border-radius: 16px; background: #1E1408; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .75); }
.scl-w { position: relative; width: 58px; display: flex; flex-direction: column; align-items: stretch; }
.scl-w::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; border: 2.5px solid #FFE6A0; opacity: 0; pointer-events: none; }
.scl-w.cue::after { animation: sgxPulse .8s ease-in-out infinite alternate; }
.scl-ar { height: var(--ar); border: 0; padding: 0; background: none; color: #F3D28B; display: grid; place-items: center; touch-action: manipulation; }
.scl-ar svg { width: 24px; height: 24px; fill: currentColor; transition: transform .12s; }
.scl-ar.dn svg { transform: rotate(180deg); }
.scl-ar:active svg { transform: scale(.8); }
.scl-ar.dn:active svg { transform: rotate(180deg) scale(.8); }
.scl-win { position: relative; height: calc(var(--row) * 2.3); overflow: hidden; border-radius: 10px; touch-action: none; cursor: ns-resize;
  background: linear-gradient(90deg, #7A561D, #D9B064 22%, #FFF0C4 50%, #D2A453 78%, #6E4D18); }
.scl-win::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--row); margin-top: calc(var(--row) / -2); z-index: 1; pointer-events: none;
  border-top: 1.5px solid rgba(60, 38, 10, .35); border-bottom: 1.5px solid rgba(60, 38, 10, .35); }
.scl-win::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 14, 4, .92), rgba(24, 14, 4, 0) 36%, rgba(24, 14, 4, 0) 64%, rgba(24, 14, 4, .92)); }
.scl-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.scl-strip b { display: block; height: var(--row); line-height: var(--row); text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: 38px; color: #2A1A06; }
.scl-brand { display: block; margin-top: 3px; text-align: center; font-size: 14px; letter-spacing: .06em; color: rgba(60, 38, 10, .72); }
.sg-lock.drop .scl-lock { transform: translateY(70vh) rotate(16deg); opacity: 0; }
.sg-lock.drop .scl-card { opacity: 0; }
@media (max-height: 740px) {
  .scl-lock { --row: 40px; --ar: 38px; }
  .scl-shackle { width: 140px; margin-bottom: -36px; }
  .scl-hasp { height: 42px; }
  .scl-strip b { font-size: 33px; }
  .scl-mid { gap: 12px; }
}

/* ── сборка катушки (reel_repair) ────────────────────────── */
.sg-reel { background: radial-gradient(90% 60% at 50% 40%, #1C2A2E, #070C0E 72%); }
.srr-mid { gap: 12px; }
.srr-bp { position: relative; flex: none; width: min(100%, 380px, max(220px, calc((var(--sgx-h) - 300px) * 1.25)));
  padding: 8px 8px 6px; border-radius: 6px; transform: rotate(-.6deg);
  background-color: #1F5089;
  background-image: linear-gradient(rgba(255, 255, 255, .09) 1px, rgba(255, 255, 255, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, rgba(255, 255, 255, 0) 1px);
  background-size: 16px 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.srr-head { display: block; padding: 0 4px 2px; font-size: 12.5px; font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, .85); overflow-wrap: anywhere; }
.srr-sign { position: absolute; right: 12px; bottom: 5px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 14px;
  color: rgba(255, 255, 255, .55); transform: rotate(-3deg); pointer-events: none; }
.srr-svg { display: block; width: 100%; height: auto; aspect-ratio: 300 / 236; overflow: visible; }
.srr-axis { fill: none; stroke: rgba(255, 255, 255, .3); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.srr-pl { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-dasharray: 5 4; }
.srr-art { opacity: 0; transform-box: fill-box; transform-origin: center; }
.srr-art.on { opacity: 1; }
.srr-n path { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.srr-n circle { fill: #1F5089; stroke: #fff; stroke-width: 1.6; }
.srr-n .srr-halo { fill: none; stroke: #FFE6A0; stroke-width: 2.5; opacity: 0; }
.srr-n text { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 15px; fill: #fff; text-anchor: middle; }
.srr-n.next circle:not(.srr-halo) { fill: #F3D28B; stroke: #F3D28B; }
.srr-n.next text { fill: #1F1A0E; }
.srr-n.next .srr-halo { animation: sgxPulse .8s ease-in-out infinite alternate; }
.srr-n.done { opacity: .4; }
.srr-rot { transform-box: view-box; transform-origin: 150px 112px; }
.sg-reel.spin .srr-rot { animation: srrSpin 1.3s cubic-bezier(.25, .1, .2, 1) both; }
@keyframes srrSpin { to { transform: rotate(360deg); } }
.srr-tray { flex: none; display: flex; gap: 6px; width: 100%; max-width: 420px; }
.srr-part { position: relative; flex: 1 1 0; min-width: 0; height: 86px; padding: 6px 2px; border-radius: 14px; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 3px; color: #F6F3EC; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .18);
  transition: opacity .3s, transform .15s; }
.srr-part:active { transform: scale(.95); }
.srr-part svg { width: 48px; height: 48px; flex: none; }
.srr-part span { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 15px; line-height: 1.02; text-align: center; overflow-wrap: anywhere; }
.srr-part.used { opacity: .16; pointer-events: none; }
.srr-part.cue { border-color: rgba(243, 210, 139, .8); background: rgba(243, 210, 139, .14); }
.srr-part::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid #FFE6A0; opacity: 0; pointer-events: none; }
.srr-part.cue::after { animation: sgxPulse .8s ease-in-out infinite alternate; }
.srr-fly { position: absolute; z-index: 6; pointer-events: none; overflow: visible; }

/* ── котелок (kettle) ────────────────────────────────────── */
.sg-kettle { background: #07090B; }
.skt-bg { position: absolute; inset: 0; background: radial-gradient(120% 55% at 50% 100%, #3A2414 0%, #1A130D 45%, rgba(10, 11, 13, 0) 78%), linear-gradient(#0E1418, #07090B); }
.skt-mid { gap: 10px; }
.skt-list { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.skt-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 11px 0 8px; border-radius: 15px; font-size: 13.5px; font-weight: 700;
  color: rgba(246, 243, 236, .72); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.skt-chip svg { width: 14px; height: 14px; flex: none; opacity: .22; }
.skt-chip.now { color: #1F1A0E; background: #F3D28B; border-color: #F3D28B; }
.skt-chip.now svg { opacity: .3; }
.skt-chip.done { color: #9FE3B6; border-color: rgba(159, 227, 182, .5); }
.skt-chip.done svg { opacity: 1; }
.skt-gauge { position: relative; z-index: 2; flex: none; width: min(78vw, 300px, calc(var(--sgx-h) * .36)); aspect-ratio: 240 / 132; }
.skt-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.skt-track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 18; stroke-linecap: round; }
.skt-zone { fill: none; stroke: #7FDB98; stroke-width: 18; }
.skt-ticks path { stroke: rgba(255, 255, 255, .4); stroke-width: 2; stroke-linecap: round; }
.skt-zl { font-family: var(--f-text); font-size: 13px; font-weight: 700; fill: #9FE3B6; text-anchor: middle; transition: opacity .2s; }
.skt-gauge.talk .skt-zl { opacity: 0; }
.skt-needle { position: absolute; left: 50%; top: calc(100% * 30 / 132); width: 6px; height: calc(100% * 90 / 132); margin-left: -3px; border-radius: 3px;
  transform-origin: 50% 100%; will-change: transform; background: linear-gradient(180deg, #FFE6A0, #E8B55C); box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.skt-hub { position: absolute; left: 50%; top: calc(100% * 120 / 132); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #F3D28B; border: 3px solid #2A2216; }
.skt-word { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: 30px; line-height: 1; opacity: 0; pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.skt-word.bad { color: #FFA596; }
.skt-word.ok { color: #9FE3B6; }
.skt-word.pop { animation: sktWord 1s ease-out both; }
.skt-word.big { font-size: 40px; color: #F3D28B; }
.skt-word.big.pop { animation: sktWordIn .5s var(--spring) both; }
@keyframes sktWord { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes sktWordIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.skt-camp { position: relative; z-index: 1; flex: none; width: min(56vw, 230px, calc(var(--sgx-h) * .28)); aspect-ratio: 200 / 190; }
.skt-glow { position: absolute; left: 50%; top: 82%; width: 320%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 150, 60, .36), rgba(255, 150, 60, .09) 36%, rgba(255, 150, 60, 0) 60%); animation: sktGlow 2.4s ease-in-out infinite alternate; }
@keyframes sktGlow { from { opacity: .7; } to { opacity: 1; } }
.skt-pot { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: auto; overflow: visible; }
.skt-logs { position: absolute; left: 10%; bottom: 0; z-index: 3; width: 80%; height: auto; }
.skt-fl { position: absolute; left: 50%; bottom: 8%; z-index: 1; width: 26%; height: 34%; margin-left: -13%; transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse 50% 60% at 50% 78%, #FFF4B8 0%, #FFC24A 34%, #FF7A1A 62%, rgba(255, 90, 20, 0) 76%);
  animation: sktFlame .7s ease-in-out infinite alternate; }
.skt-fl.f2 { width: 20%; height: 26%; margin-left: -25%; animation-duration: .9s; animation-delay: -.3s; }
.skt-fl.f3 { width: 20%; height: 28%; margin-left: 5%; animation-duration: .8s; animation-delay: -.5s; }
@keyframes sktFlame { from { transform: scale(.9, .84) translateX(-2%); opacity: .85; } to { transform: scale(1.04, 1.1) translateX(2%); opacity: 1; } }
.skt-st, .skt-puff { position: absolute; left: 50%; top: 22%; z-index: 3; width: 36%; aspect-ratio: 1; margin-left: -18%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(235, 235, 230, .42), rgba(235, 235, 230, 0) 66%); }
.skt-st { animation: sktSteam 3.6s ease-out infinite; }
.skt-st.s2 { margin-left: -28%; animation-delay: -1.2s; }
.skt-st.s3 { margin-left: -8%; animation-delay: -2.4s; }
@keyframes sktSteam { 0% { opacity: 0; transform: translateY(0) scale(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-120%) scale(1.5); } }
.skt-puff { width: 70%; margin-left: -35%; top: 6%; }
.skt-camp.splash .skt-puff { animation: sktPuff 1.1s ease-out; }
.sg-kettle.cooked .skt-puff { animation: sktPuff 1.6s ease-out 2; }
@keyframes sktPuff { 0% { opacity: 0; transform: translateY(10%) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70%) scale(1.5); } }
.skt-ring { position: absolute; left: 50%; top: 35.3%; z-index: 3; width: 44%; height: 10%; border-radius: 50%; border: 2px solid rgba(255, 240, 210, .85); opacity: 0;
  transform: translate(-50%, -50%); pointer-events: none; }
.skt-camp.splash .skt-ring { animation: sktRing .6s ease-out; }
@keyframes sktRing { from { opacity: 1; transform: translate(-50%, -50%) scale(.3); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
.skt-drop { position: absolute; left: 50%; top: 35%; z-index: 3; width: 32%; opacity: 0; transform: translate(-50%, -20%); pointer-events: none; }
.skt-drop svg { display: block; width: 100%; height: auto; }
@media (max-height: 740px) {
  .skt-chip { height: 27px; font-size: 13px; }
  .skt-mid { gap: 6px; }
}

/* ── вахта у маяка (lighthouse) ──────────────────────────── */
.sg-light { background: #02060C; }
.slh-sky { position: absolute; left: 0; right: 0; top: 0; height: 47%; background: linear-gradient(180deg, #040A16 0%, #0A1830 70%, #16294A 100%); }
.slh-stars { position: absolute; inset: 0; opacity: .85;
  background-image: radial-gradient(circle 1.5px at 20px 30px, #fff, rgba(255, 255, 255, 0)), radial-gradient(circle 1.4px at 90px 70px, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)),
                    radial-gradient(circle 1.1px at 140px 18px, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)), radial-gradient(circle 1.3px at 60px 110px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  background-size: 170px 130px, 210px 150px, 150px 110px, 230px 170px;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .2)); mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .2)); }
.slh-moon { position: absolute; left: 10%; top: 60%; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFF8E4, #E3D8BA 72%);
  box-shadow: 0 0 30px rgba(255, 248, 220, .35); }
.slh-sea { position: absolute; left: 0; right: 0; top: 47%; bottom: 0; overflow: hidden; background: linear-gradient(180deg, #0D2036 0%, #071321 30%, #030810 100%); }
.slh-sea::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(160, 190, 230, .22); }
.slh-glit { position: absolute; left: calc(10% - 14px); width: 60px; top: 0; height: 50%;
  background: repeating-linear-gradient(180deg, rgba(255, 248, 220, .26) 0 1.5px, rgba(255, 248, 220, 0) 1.5px 10px);
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 10%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(50% 100% at 50% 0, #000 10%, rgba(0, 0, 0, 0) 100%);
  animation: slhGlit 3s ease-in-out infinite alternate; }
@keyframes slhGlit { from { opacity: .4; } to { opacity: .9; } }
.slh-house { --th: min(30vh, 250px); position: absolute; right: 4%; top: calc(47% - var(--th) * .836); z-index: 1; height: var(--th); width: calc(var(--th) * 120 / 280); }
.slh-house svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slh-halo { position: absolute; left: 50%; top: 18.9%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 232, 170, .75), rgba(255, 232, 170, .18) 30%, rgba(255, 232, 170, 0) 62%); animation: slhHalo 3s ease-in-out infinite alternate; }
@keyframes slhHalo { from { opacity: .65; } to { opacity: 1; } }
.slh-beam { position: absolute; left: 50%; top: 18.9%; width: 120vw; height: 90px; margin-top: -45px; transform-origin: 0 50%; pointer-events: none;
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  background: linear-gradient(90deg, rgba(255, 233, 170, .42), rgba(255, 233, 170, .1) 50%, rgba(255, 233, 170, 0) 90%);
  animation: slhBeam 7s ease-in-out infinite alternate; }
@keyframes slhBeam { from { transform: rotate(190deg) scaleY(.7); opacity: .9; } to { transform: rotate(174deg) scaleY(1.1); opacity: .45; } }
.sg-light.won .slh-halo { opacity: 1; }
.slh-legend { position: absolute; left: 50%; top: calc(var(--safe-top) + 98px); z-index: 3; width: max-content; max-width: calc(100% - 28px); transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 7px; padding: 8px 16px 10px; border-radius: 16px;
  font-size: 15.5px; font-weight: 700; line-height: 1.3; color: #F6F3EC; background: rgba(6, 14, 24, .86); border: 1px solid rgba(255, 255, 255, .14); }
.slh-legend small { flex-basis: 100%; text-align: center; font-size: 13px; font-weight: 600; color: rgba(246, 243, 236, .72); }
.slh-legend b { font-weight: 400; color: rgba(246, 243, 236, .5); }
.slh-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.slh-legend i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.slh-legend i.g { background: #5CFF9B; box-shadow: 0 0 8px #5CFF9B; }
.slh-legend i.w { background: #FFF6E0; box-shadow: 0 0 8px #FFF6E0; }
.slh-ships { position: absolute; inset: 0; z-index: 2; }
.slh-ship { position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; opacity: 0; transition: opacity .4s; cursor: pointer; }
.slh-ship.in { opacity: 1; }
.slh-in { position: absolute; inset: 0; }
.slh-hull { position: absolute; left: 22px; right: 22px; top: 44px; height: 9px; border-radius: 2px 2px 50% 50%; background: #01040A; box-shadow: 0 0 0 1px rgba(120, 150, 190, .2); }
.slh-dim { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 236, 200, .5); }
.slh-l { position: absolute; inset: 8px; border-radius: 50%; opacity: 0; transition: opacity .06s; will-change: opacity; }
.slh-l.g { background: radial-gradient(circle, #F4FFF8 0 9%, #5CFF9B 19%, rgba(92, 255, 155, .35) 38%, rgba(92, 255, 155, 0) 68%); }
.slh-l.w { background: radial-gradient(circle, #FFFFFF 0 9%, #FFF3D6 19%, rgba(255, 243, 214, .35) 38%, rgba(255, 243, 214, 0) 68%); }
.slh-l.r { background: radial-gradient(circle, #FFF0EE 0 9%, #FF5A4E 19%, rgba(255, 90, 78, .35) 38%, rgba(255, 90, 78, 0) 68%); }
.slh-l.y { background: radial-gradient(circle, #FFF8E6 0 9%, #FFC24A 19%, rgba(255, 194, 74, .35) 38%, rgba(255, 194, 74, 0) 68%); }
.slh-in[data-c="g"] .slh-l.g, .slh-in[data-c="w"] .slh-l.w, .slh-in[data-c="r"] .slh-l.r, .slh-in[data-c="y"] .slh-l.y { opacity: 1; }
.slh-ring { position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(169, 228, 208, .75); opacity: 0; }
.sg-light.helped .slh-ship.ours .slh-ring { animation: sgxPulse .9s ease-in-out infinite alternate; }
.slh-ok { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; display: grid; place-items: center;
  color: #0B1719; background: #9FE3B6; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .35s var(--spring); }
.slh-ok svg { width: 24px; height: 24px; }
.slh-ship.hit .slh-ok { opacity: 1; transform: scale(1); }
.slh-count { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.slh-count b { font-size: 30px; line-height: 1; color: #F6F3EC; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.slh-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.slh-pips i { position: relative; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.slh-pips i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #9FE3B6; opacity: 0; transition: opacity .3s; }
.slh-pips i.on::after { opacity: 1; }

/* ── погружение (dive) ───────────────────────────────────── */
.sg-dive { background: #020910; }
.sdv-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sdv-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 40, 60, .35), rgba(0, 20, 30, .6)); }
.sdv-bg.plain { background: linear-gradient(180deg, #0F4660 0%, #0A2F45 35%, #06192A 70%, #040F1A 100%); }
.sdv-bg.plain::after { background: repeating-linear-gradient(100deg, rgba(160, 220, 255, 0) 0 40px, rgba(160, 220, 255, .06) 40px 70px);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 70%); mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0) 70%); }
.sdv-sand { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; }
.sdv-boat { position: absolute; width: min(64vw, 280px); transform: translate(-50%, -62%); }
.sdv-boat svg { display: block; width: 100%; height: auto; }
.sdv-chest { position: absolute; width: 62px; transform: translate(-50%, -50%); }
.sdv-chest svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.sdv-chest::before { content: ""; position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  border: 2px solid rgba(243, 210, 139, .9); opacity: 0; transition: opacity .2s; }
.sdv-chest.lit::before { opacity: 1; }
.sdv-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform .5s var(--spring); }
.sdv-chest.open .sdv-lid { transform: rotate(-38deg); }
/* темнота — одна квадратная плашка с прозрачной серединой (радиальный градиент), вокруг — сплошная тень того же цвета;
   ездит только transform, целыми пикселями (games.js). Темнота непрозрачная: сквозь неё сундучок не угадать.
   «Помочь» — круг шире: размер меняется один раз, а не каждый кадр */
.sdv-dark { --R: 100px; position: absolute; left: 0; top: 0; z-index: 3; width: calc(var(--R) * 2); height: calc(var(--R) * 2); margin: calc(var(--R) * -1) 0 0 calc(var(--R) * -1);
  pointer-events: none; will-change: transform;
  background: radial-gradient(circle closest-side, rgba(2, 9, 16, 0) 0%, rgba(2, 9, 16, 0) 44%, rgba(2, 9, 16, .6) 72%, #02090F 94%);
  box-shadow: 0 0 0 260vmax #02090F; }
.sg-dive.helped .sdv-dark { --R: 146px; }
.sdv-bub { position: absolute; left: 50%; top: 60%; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(220, 240, 255, .6); opacity: 0;
  animation: sdvBub 3.2s ease-in infinite; }
.sdv-bub.b2 { left: 57%; width: 5px; height: 5px; animation-delay: -1.1s; }
.sdv-bub.b3 { left: 45%; width: 4px; height: 4px; animation-delay: -2.2s; }
@keyframes sdvBub { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -64px); } }
.sdv-glint { position: absolute; z-index: 4; width: 54px; height: 54px; margin: -27px 0 0 -27px; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 228, .95) 0, rgba(255, 238, 196, .45) 14%, rgba(255, 238, 196, 0) 44%),
              linear-gradient(90deg, rgba(255, 245, 215, 0) 47%, rgba(255, 245, 215, .85) 50%, rgba(255, 245, 215, 0) 53%),
              linear-gradient(0deg, rgba(255, 245, 215, 0) 47%, rgba(255, 245, 215, .85) 50%, rgba(255, 245, 215, 0) 53%); }
.sg-dive.helped .sdv-glint { animation: sdvGlint 2.4s ease-in-out infinite; }
.sg-dive.won .sdv-glint { animation: none; opacity: 0; }
@keyframes sdvGlint { 0%, 50%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 70% { opacity: .7; transform: scale(1) rotate(25deg); } 85% { opacity: 0; transform: scale(.7) rotate(45deg); } }
.sdv-gasp { position: absolute; inset: 0; z-index: 4; background: #01050A; opacity: 0; pointer-events: none; }
.sdv-gasp.on { animation: sdvGasp 1.2s ease-in-out; }
@keyframes sdvGasp { 0% { opacity: 0; } 35% { opacity: .75; } 100% { opacity: 0; } }
.sdv-air { width: 100%; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(246, 243, 236, .85); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.sdv-air i { flex: 1; height: 10px; border-radius: 5px; overflow: hidden; background: rgba(255, 255, 255, .16); }
.sdv-air b { display: block; height: 100%; transform-origin: 0 50%; transition: transform .3s linear; background: linear-gradient(90deg, #6FC3E8, var(--aqua)); }
.sdv-air em { font-style: normal; white-space: nowrap; color: rgba(246, 243, 236, .62); }

/* ── морзянка (morse) ────────────────────────────────────── */
.sg-morse { background: #080605; }
.smr-bg { position: absolute; inset: 0; background: radial-gradient(90% 50% at 50% 30%, rgba(255, 186, 104, .13), rgba(255, 186, 104, 0) 70%), linear-gradient(180deg, #120E0A, #070504 60%, #0E0A07); }
.smr-mid { gap: 12px; }
.smr-tape { position: relative; flex: none; width: 100%; max-width: 400px; min-height: 54px; padding: 10px 12px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; color: #2B2112; background-color: #EFE3C6; box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  background-image: radial-gradient(circle at 50% 5px, rgba(43, 33, 18, .3) 1.6px, rgba(0, 0, 0, 0) 2.2px), radial-gradient(circle at 50% calc(100% - 5px), rgba(43, 33, 18, .3) 1.6px, rgba(0, 0, 0, 0) 2.2px);
  background-size: 14px 100%; }
.smr-tx { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.smr-tx b { display: inline-grid; place-items: center; width: 28px; height: 34px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 28px; line-height: 1;
  border-bottom: 2px solid rgba(43, 33, 18, .3); }
.smr-tx b.now { border-bottom-color: #B8352C; }
.smr-tx b.now::after { content: ""; width: 2px; height: 22px; background: #B8352C; animation: smrCaret 1s steps(1) infinite; }
@keyframes smrCaret { 50% { opacity: 0; } }
.smr-tx b.in { animation: smrStamp .4s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes smrStamp { from { opacity: 0; transform: scale(1.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
.smr-tape.msg .smr-tx { display: block; text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 22px; line-height: 1.22; overflow-wrap: anywhere; }
.smr-radio { position: relative; flex: none; width: 100%; max-width: 380px; height: 96px; padding: 10px 12px; border-radius: 18px; display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 64px; gap: 12px; align-items: center;
  background: linear-gradient(180deg, #6A4428 0%, #4A2E1A 55%, #36200F 100%); box-shadow: 0 14px 30px rgba(0, 0, 0, .6), inset 0 2px 0 rgba(255, 220, 170, .25), inset 0 -4px 0 rgba(0, 0, 0, .3); }
.smr-grill { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #1A110A 0 1.8px, rgba(0, 0, 0, 0) 2.2px) 0 0 / 7px 7px, #3A2616;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .6), 0 0 0 3px #2A1A0C; }
.smr-dial { position: relative; height: 56px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #F2E3BC, #D9C392); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45); }
.smr-scale { position: absolute; left: 8px; right: 8px; top: 8px; height: 14px; background: repeating-linear-gradient(90deg, rgba(60, 40, 15, .7) 0 1.5px, rgba(0, 0, 0, 0) 1.5px 9px); }
.smr-pin { position: absolute; left: 62%; top: 4px; width: 2.5px; height: 30px; background: #B8352C; }
.smr-dial small { position: absolute; left: 4px; right: 4px; bottom: 5px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1.1; color: rgba(60, 40, 15, .85); }
.smr-lamp { position: relative; justify-self: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6B4A1C, #2A1A08 75%);
  box-shadow: 0 0 0 4px #2A1A0C, inset 0 3px 8px rgba(0, 0, 0, .6); }
.smr-on { position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(circle at 45% 40%, #FFFBE6 0, #FFD36A 40%, #F08A1C 80%); }
.smr-halo { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 200, 90, .5), rgba(255, 200, 90, 0) 62%); }
.smr-lamp.lit .smr-on, .smr-lamp.lit .smr-halo { opacity: 1; }
.smr-sig { flex: none; height: 22px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.smr-sig i { height: 10px; border-radius: 5px; background: #FFD36A; animation: smrSign .2s ease-out both; }
.smr-sig i.d { width: 10px; }
.smr-sig i.l { width: 30px; }
@keyframes smrSign { from { opacity: 0; transform: scale(.4); } }
.smr-table { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 380px; transition: opacity .5s; }
.smr-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 2px 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.smr-cell b { font-size: 22px; line-height: 1; color: #F3D28B; }
.smr-g { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.smr-g i { height: 6px; border-radius: 3px; background: #F6F3EC; }
.smr-g i.d { width: 6px; }
.smr-g i.l { width: 16px; }
.smr-cell::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; border: 2px solid #FFE6A0; opacity: 0; pointer-events: none; }
.smr-cell.cue { background: rgba(243, 210, 139, .16); }
.smr-cell.cue::after { animation: sgxPulse .8s ease-in-out infinite alternate; }
.sg-morse.decoded .smr-table, .sg-morse.decoded .smr-sig { opacity: .3; }
/* в конце лента с сообщением — над затемнением, приёмник и таблица уходят, находка — ниже ленты */
.smr-radio { transition: opacity .4s; }
.sg-morse.won .smr-mid { z-index: 5; }
.sg-morse.won .smr-radio, .sg-morse.won .smr-sig, .sg-morse.won .smr-table { opacity: 0; }
.sg-morse .sgx-rv { top: calc(var(--safe-top) + 240px); }
.sg-morse .sgx-rv img { max-height: 30vh; }
.smr-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 400px; }
.smr-o { height: 60px; border: 1.5px solid rgba(255, 255, 255, .24); border-radius: 16px; font-size: 32px; color: #F6F3EC; background: rgba(255, 255, 255, .1);
  transition: transform .12s; }
.smr-o:active { transform: scale(.94); }
.smr-o.ok { color: #1F1A0E; background: #F3D28B; border-color: #F3D28B; }
.smr-o.bad { color: #FFB4A8; border-color: rgba(255, 120, 100, .75); }
@media (max-height: 740px) {
  .smr-mid { gap: 8px; }
  .smr-radio { height: 78px; grid-template-columns: 56px minmax(0, 1fr) 54px; padding: 8px 10px; }
  .smr-grill { width: 54px; height: 54px; }
  .smr-lamp { width: 48px; height: 48px; }
  .smr-dial { height: 46px; }
  .smr-cell { padding: 5px 2px 6px; }
  .smr-cell b { font-size: 19px; }
  .smr-o { height: 54px; }
}