@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');

:root {
  /* ---------- Верхняя панель ---------- */
  --hud-top-padding: 12px;
  --hud-side-padding: 16px;
  --hud-gap-min: 4px;
  --hud-gap-fluid: 1.5vw;
  --hud-gap-max: 10px;
  --hud-stat-gap-min: 3px;
  --hud-stat-gap-fluid: 1vw;
  --hud-stat-gap-max: 7px;
  --hud-divider-padding-min: 4px;
  --hud-divider-padding-fluid: 1.3vw;
  --hud-divider-padding-max: 9px;
  --hud-label-font-min: 7px;
  --hud-label-font-fluid: 2.1vw;
  --hud-label-font-max: 10px;
  --hud-label-letter-spacing: .06em;
  --hud-value-font-min: 14px;
  --hud-value-font-fluid: 4.2vw;
  --hud-value-font-max: 20px;

  /* ---------- Кнопка паузы ---------- */
  --pause-button-size: 44px;
  --pause-button-gap: 5px;
  --pause-icon-width: 5px;
  --pause-icon-height: 19px;

  /* ---------- Нижняя прогрессия ---------- */
  --progress-side-padding: 18px;
  --progress-bottom-padding: 12px;

  /* ---------- Следующая рыба ---------- */
  --next-fish-width-min: 28px;
  --next-fish-width-fluid: 8vw;
  --next-fish-width-max: 34px;
  --next-fish-height-min: 26px;
  --next-fish-height-fluid: 7.5vw;
  --next-fish-height-max: 32px;
  --next-fish-font-size: 17px;

  /* ---------- Подсказка управления ---------- */
  --tutorial-bottom: 81px;
  --tutorial-safe-area-offset: 72px;
  --tutorial-font-size: 9px;
  --tutorial-letter-spacing: .025em;
  --tutorial-fade-duration: .3s;
  --tutorial-hidden-offset: 5px;

  /* ---------- Остальные размеры текста ---------- */
  --warning-font-size: 10px;
  --progress-fallback-font-min: 17px;
  --progress-fallback-font-fluid: 5vw;
  --progress-fallback-font-max: 25px;
  --modal-kicker-font-size: 9px;
  --modal-title-font-size: 29px;
  --modal-result-font-size: 27px;
  --sound-toggle-gap: 10px;
  --sound-toggle-icon-size: 22px;
  --sound-toggle-off-opacity: .76;
  --settings-row-gap: 12px;

  /* ---------- CSS-анимации и эффекты ---------- */
  --button-transition-duration: .16s;
  --pause-bounce-duration: .36s;
  --unlock-fish-duration: .55s;
  --unlock-flash-duration: .62s;
  --unlock-bubble-duration: .7s;
  --danger-pulse-duration: 1s;
  --modal-animation-duration: .3s;

  /* ---------- Liquid Glass design tokens ---------- */
  --glass-bg: rgba(117, 218, 255, .16);
  --glass-bg-strong: rgba(104, 211, 255, .25);
  --glass-bg-tertiary: rgba(179, 232, 255, .1);
  --glass-border: rgba(214, 247, 255, .36);
  --glass-border-strong: rgba(230, 252, 255, .58);
  --glass-highlight: rgba(255, 255, 255, .42);
  --glass-lower-shade: rgba(15, 63, 151, .22);
  --glass-blur: 16px;
  --glass-blur-light: 10px;
  --glass-saturation: 145%;
  --glass-radius: 30px;
  --glass-radius-small: 20px;
  --glass-radius-pill: 999px;
  --glass-shadow: 0 16px 42px rgba(0, 23, 82, .24), 0 0 24px rgba(72, 211, 255, .1);
  --glass-shadow-soft: 0 8px 24px rgba(0, 31, 94, .17);
  --glass-inner-highlight: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -8px 18px rgba(7, 54, 150, .12);
  --ui-accent-rgb: 91, 214, 255;
  --ui-secondary-rgb: 92, 132, 255;
  --ui-violet-rgb: 166, 103, 255;
  --ui-panel-rgb: 46, 141, 210;
  --game-glow-alpha: .24;
  --ui-transition: 140ms;
  --modal-open-duration: 220ms;
  --modal-close-duration: 180ms;
  --button-press-scale: .965;
  --button-hover-scale: 1.015;

  font-family: 'Nunito', system-ui, sans-serif;
  color: #fff;
  background: #055b9d;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0, #43cfff 0, #087fca 46%, #064a91 100%);
}

button { font: inherit; }

.app-shell {
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: 0;
}

.game-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 50% 0, rgba(207, 250, 255, .82) 0, rgba(90, 211, 246, .4) 16%, transparent 40%),
    linear-gradient(180deg, #22baf0 0%, #078acb 34%, #0769b2 68%, #074c91 100%);
  box-shadow: none;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}

/* Safari учитывает touch-action всех предков: разрешаем pan только открытому Атласу. */
.game-wrap.is-atlas-open { touch-action: pan-y; }
/* За полноэкранным атласом не композируем скрытые HUD/меню и движущиеся декорации. */
.is-atlas-open .main-menu,
.is-atlas-open .hud,
.is-main-menu-open .hud { visibility: hidden; }
.is-atlas-open .water-rays,
.is-atlas-open .ambient-bubbles i { animation-play-state: paused; }

.game-wrap.world-jellyfish {
  background:
    radial-gradient(ellipse at 50% 5%, rgba(95, 121, 255, .24), transparent 37%),
    radial-gradient(circle at 20% 48%, rgba(181, 108, 255, .09), transparent 31%),
    linear-gradient(180deg, #101c52 0%, #07163e 43%, #040a25 100%);
}
.game-wrap.world-jellyfish .water-rays { opacity: .28; filter: hue-rotate(42deg); }
.game-wrap.world-jellyfish .ambient-bubbles { opacity: .55; }

#game-container,
#game-container canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

.water-rays {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(103deg, transparent 31%, rgba(210, 250, 255, .13) 32%, transparent 48%),
    linear-gradient(79deg, transparent 46%, rgba(207, 250, 255, .11) 47%, transparent 64%);
  transform-origin: top;
  animation: rays 9s ease-in-out infinite alternate;
}

.ambient-bubbles { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.ambient-bubbles i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.8), rgba(255,255,255,.05) 38%, rgba(48,182,234,.15));
  box-shadow: inset -2px -2px 3px rgba(0,84,153,.14), 0 0 7px rgba(198,245,255,.25);
  animation: drift-up 8s linear infinite;
}
.ambient-bubbles i:nth-child(1) { left: 10%; bottom: 18%; animation-delay: -1s; }
.ambient-bubbles i:nth-child(2) { left: 27%; bottom: 43%; width: 6px; height: 6px; animation-delay: -5s; }
.ambient-bubbles i:nth-child(3) { left: 73%; bottom: 29%; width: 13px; height: 13px; animation-delay: -3s; }
.ambient-bubbles i:nth-child(4) { left: 88%; bottom: 53%; width: 7px; height: 7px; animation-delay: -7s; }
.ambient-bubbles i:nth-child(5) { left: 56%; bottom: 11%; width: 5px; height: 5px; animation-delay: -4s; }

/* ---------- Верхняя панель ---------- */
.hud {
  position: absolute;
  z-index: 20;
  top: max(var(--hud-top-padding), env(safe-area-inset-top));
  right: max(var(--hud-side-padding), env(safe-area-inset-right));
  left: max(var(--hud-side-padding), env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: clamp(var(--hud-gap-min), var(--hud-gap-fluid), var(--hud-gap-max));
  min-width: 0;
  white-space: nowrap;
  pointer-events: none;
}

.bubble-panel,
.bubble-button {
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.62);
  background: linear-gradient(145deg, rgba(218,249,255,.32), rgba(99,193,235,.18));
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.48),
    inset 0 -10px 20px rgba(4,95,171,.12),
    0 8px 24px rgba(0,89,164,.22),
    0 0 14px rgba(192,241,255,.12);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.hud-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(var(--hud-stat-gap-min), var(--hud-stat-gap-fluid), var(--hud-stat-gap-max));
  color: #fff;
  text-shadow: 0 3px 7px rgba(0,63,123,.35);
  pointer-events: auto;
}
.hud-stat + .hud-stat {
  border-left: 1px solid rgba(255,255,255,.3);
  padding-left: clamp(
    var(--hud-divider-padding-min),
    var(--hud-divider-padding-fluid),
    var(--hud-divider-padding-max)
  );
}
.hud-label,
.results span {
  display: block;
  font-size: clamp(var(--hud-label-font-min), var(--hud-label-font-fluid), var(--hud-label-font-max));
  font-weight: 900;
  letter-spacing: var(--hud-label-letter-spacing);
  opacity: .9;
}
.hud-stat strong {
  display: block;
  min-width: 1ch;
  font-size: clamp(var(--hud-value-font-min), var(--hud-value-font-fluid), var(--hud-value-font-max));
  font-weight: 900;
  line-height: 1;
}
.next-bubble { flex: 1 1 auto; }
.score-bubble,
.best-bubble { flex: 0 1 auto; }

.bubble-button {
  pointer-events: auto;
  cursor: pointer;
  color: #fff;
  transition:
    transform var(--button-transition-duration) cubic-bezier(.2,.8,.2,1),
    filter var(--button-transition-duration);
  -webkit-tap-highlight-color: transparent;
}
.bubble-button:hover { filter: brightness(1.08); }
.bubble-button:active { transform: scale(.9); }
.bubble-button:focus-visible { outline: 3px solid rgba(255,255,255,.75); outline-offset: 3px; }

/* ---------- Кнопка паузы ---------- */
.pause-button {
  display: flex;
  flex: 0 0 var(--pause-button-size);
  align-items: center;
  justify-content: center;
  gap: var(--pause-button-gap);
  width: var(--pause-button-size);
  height: var(--pause-button-size);
  min-width: var(--pause-button-size);
  min-height: var(--pause-button-size);
  padding: 0;
  border-width: 1px;
  border-radius: 48% 52% 50% 47%;
}
.pause-button span { width: var(--pause-icon-width); height: var(--pause-icon-height); border-radius: 99px; background: #fff; box-shadow: 0 2px 4px rgba(0,75,135,.28); }
.pause-button.is-bouncing { animation: button-bounce var(--pause-bounce-duration) ease-out; }

/* ---------- Нижняя панель прогрессии ---------- */
.progression {
  --progress-fish-size: 48px;
  --progress-gap: clamp(1px, .6vw, 5px);
  position: absolute;
  z-index: 20;
  right: var(--progress-side-padding);
  bottom: max(var(--progress-bottom-padding), env(safe-area-inset-bottom));
  left: var(--progress-side-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--progress-gap);
  width: auto;
  padding: 0;
  pointer-events: auto;
}

.progress-slot {
  position: relative;
  display: grid;
  flex: 1 1 var(--progress-fish-size);
  width: var(--progress-fish-size);
  max-width: var(--progress-fish-size);
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  overflow: visible;
}
.progress-fish {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translate(var(--progress-offset-x, 0), var(--progress-offset-y, 0)) scale(var(--progress-scale, 1));
  transform-origin: center;
  filter: drop-shadow(0 3px 5px rgba(0, 50, 99, .32));
  pointer-events: none;
}
.progress-fallback {
  display: grid;
  width: 76%;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  background: var(--fallback-color);
  box-shadow: inset 0 -6px 8px rgba(0,30,70,.22), 0 3px 8px rgba(0,50,99,.28);
  color: #fff;
  font-size: clamp(
    var(--progress-fallback-font-min),
    var(--progress-fallback-font-fluid),
    var(--progress-fallback-font-max)
  );
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,38,78,.42);
}
.progress-slot.just-unlocked .progress-fish,
.progress-slot.just-unlocked .progress-fallback {
  animation: unlock-fish var(--unlock-fish-duration) cubic-bezier(.2,.9,.25,1.25);
}
.progress-slot.just-unlocked::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0, rgba(132,232,255,.48) 32%, transparent 68%);
  pointer-events: none;
  animation: unlock-flash var(--unlock-flash-duration) ease-out forwards;
}
.unlock-bubble { position: absolute; z-index: 5; width: 7px; height: 7px; border: 1px solid #fff; border-radius: 50%; pointer-events: none; animation: unlock-bubble var(--unlock-bubble-duration) ease-out forwards; }

.surface-glow {
  position: absolute;
  z-index: 5;
  top: 7.5%;
  left: 0;
  right: 0;
  height: 16%;
  background: radial-gradient(ellipse at 50% 0, rgba(255,255,255,.76), rgba(109,231,255,.2) 45%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s;
}
.game-wrap.is-danger .surface-glow { opacity: 1; animation: danger-pulse var(--danger-pulse-duration) ease-in-out infinite alternate; }

.warning {
  position: absolute;
  z-index: 21;
  top: 21%;
  left: 50%;
  padding: 7px 14px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  background: rgba(214,246,255,.25);
  box-shadow: 0 0 22px rgba(192,246,255,.65);
  color: #fff;
  font-size: var(--warning-font-size);
  font-weight: 900;
  letter-spacing: .06em;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: .25s;
  pointer-events: none;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.warning.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Следующая рыба и подсказка ---------- */
.next-bubble {
  overflow: visible;
}
.next-fruit {
  display: grid;
  flex: 0 0 clamp(var(--next-fish-width-min), var(--next-fish-width-fluid), var(--next-fish-width-max));
  width: clamp(var(--next-fish-width-min), var(--next-fish-width-fluid), var(--next-fish-width-max));
  height: clamp(var(--next-fish-height-min), var(--next-fish-height-fluid), var(--next-fish-height-max));
  place-items: center;
  overflow: visible;
  color: #fff;
  font-size: var(--next-fish-font-size);
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,70,120,.35);
}
.hint {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: max(var(--tutorial-bottom), calc(env(safe-area-inset-bottom) + var(--tutorial-safe-area-offset)));
  left: 0;
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: var(--tutorial-font-size);
  font-weight: 800;
  letter-spacing: var(--tutorial-letter-spacing);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 5px rgba(0,56,110,.35);
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--tutorial-fade-duration) ease,
    transform var(--tutorial-fade-duration) ease,
    visibility 0s linear 0s;
}
.hint.is-hidden {
  visibility: hidden;
  opacity: 0;
  transform: translateY(var(--tutorial-hidden-offset));
  transition:
    opacity var(--tutorial-fade-duration) ease,
    transform var(--tutorial-fade-duration) ease,
    visibility 0s linear var(--tutorial-fade-duration);
}

.modal[hidden] { display: none; }
.modal {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(1,45,94,.42);
  backdrop-filter: blur(4px);
}
.modal-card {
  width: min(100%, 340px);
  padding: 29px 25px 25px;
  border-radius: 48px 42px 46px 44px;
  text-align: center;
  animation: modal-in var(--modal-animation-duration) cubic-bezier(.2,.85,.25,1.15);
}
.main-menu { z-index: 45; background: rgba(1, 31, 72, .34); }
.main-menu-world { margin: 0 0 20px; font-weight: 900; opacity: .86; }
.worlds-modal { z-index: 90; background: rgba(0, 18, 56, .72); }
.worlds-card {
  position: relative;
  width: min(100%, 480px);
  max-height: 100%;
  padding: 24px 16px 18px;
  overflow: auto;
  border-radius: 36px;
  text-align: center;
}
.worlds-card h2 { margin-bottom: 14px; }
.worlds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.world-card {
  display: flex;
  min-width: 0;
  padding: 12px 9px;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 28px;
  background: rgba(42, 135, 200, .15);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.22);
}
.world-card.is-selected { border-color: rgba(151,244,255,.86); background: rgba(74,190,231,.24); }
.world-card img { width: min(112px, 28vw); height: 92px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,21,65,.36)); }
.world-card h3 { margin: 4px 0; font-size: 16px; line-height: 1.05; }
.world-card p { min-height: 48px; margin: 0; font-size: 10px; line-height: 1.2; opacity: .78; }
.world-card-progress { margin-top: 7px; font-size: 10px; font-weight: 900; }
.world-card .modal-button { margin-top: 8px; padding: 9px 8px; font-size: 10px; }
.world-card .modal-button:disabled { opacity: .66; cursor: default; }
.modal-kicker { font-size: var(--modal-kicker-font-size); font-weight: 900; letter-spacing: .14em; opacity: .72; }
.modal h2 { margin: 5px 0 22px; font-size: var(--modal-title-font-size); line-height: 1; text-shadow: 0 3px 9px rgba(0,58,112,.35); }
.modal-button {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  border-radius: 999px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.modal-button.secondary { background: rgba(181,230,246,.17); }
.modal-button.accent { background: linear-gradient(145deg, rgba(129,238,255,.7), rgba(56,177,234,.52)); box-shadow: inset 0 2px 4px #fff8, 0 8px 25px rgba(0,177,232,.3); }
.sound-toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sound-toggle-gap);
}
.sound-toggle-icon {
  width: var(--sound-toggle-icon-size);
  height: var(--sound-toggle-icon-size);
  flex: 0 0 var(--sound-toggle-icon-size);
  fill: #fff;
  filter: drop-shadow(0 2px 3px rgba(0,72,121,.3));
}
.sound-toggle-icon path + path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
.ambient-toggle-button .sound-toggle-icon path {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}
.sound-toggle-icon-off { display: none; }
.sound-toggle-button[aria-pressed="false"] {
  opacity: var(--sound-toggle-off-opacity);
}
.sound-toggle-button[aria-pressed="false"] .sound-toggle-icon-on { display: none; }
.sound-toggle-button[aria-pressed="false"] .sound-toggle-icon-off { display: block; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -5px 0 20px; }
.results div { padding: 11px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 22px; background: rgba(255,255,255,.1); }
.results strong { display: block; font-size: var(--modal-result-font-size); line-height: 1.1; text-shadow: 0 2px 6px rgba(0,62,117,.3); }

/* ---------- Подводный атлас ---------- */
.atlas-modal {
  z-index: 60;
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  background: rgba(0, 34, 78, .55);
  animation: atlas-overlay-in var(--modal-animation-duration) ease-out;
  touch-action: pan-y;
}
.atlas-card {
  position: relative;
  width: min(100%, 480px);
  max-height: 100%;
  padding: 18px 14px 14px;
  overflow: auto;
  border-radius: 34px 38px 32px 40px;
  text-align: center;
  scrollbar-width: none;
}
.atlas-card::-webkit-scrollbar { display: none; }
.atlas-card .modal-kicker { display: block; padding: 0 38px; }
.atlas-card h2 { margin: 3px 0 12px; font-size: clamp(21px, 7vw, 30px); }
.atlas-world-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 10px; }
.atlas-world-tab { padding: 8px 5px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.atlas-world-tab.is-selected { background: rgba(129,238,255,.42); border-color: rgba(255,255,255,.86); }
.modal-close-button {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(108px, 1fr);
  gap: 7px;
}
.atlas-fish-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(44px, .82fr) minmax(0, 1.18fr);
  grid-template-rows: auto auto auto;
  min-width: 0;
  min-height: 108px;
  padding: 8px 8px 8px;
  align-content: center;
  align-items: start;
  column-gap: 7px;
  row-gap: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 24px 21px 25px 20px;
  background:
    radial-gradient(circle at 20% 8%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(145deg, rgba(220,249,255,.22), rgba(52,145,207,.18));
  box-shadow: inset 0 2px 3px rgba(255,255,255,.34), inset 0 -10px 18px rgba(0,73,145,.13);
  color: #fff;
  text-align: left;
  text-shadow: 0 2px 5px rgba(0,49,103,.42);
  animation: atlas-card-in .34s backwards cubic-bezier(.2,.85,.25,1.18);
  animation-delay: calc(var(--atlas-index, 0) * 35ms);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.atlas-fish-card.is-unlocked { cursor: pointer; }
.atlas-fish-card.is-locked { opacity: .78; }
.atlas-fish-card:active:not(:disabled) { transform: scale(.96); }
.atlas-fish-image-wrap {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: center;
  width: min(64px, 16vw);
  height: min(70px, 18vw);
  place-items: center;
  overflow: visible;
}
.atlas-fish-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px rgba(0,45,91,.34));
  pointer-events: none;
}
.atlas-fish-card strong {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  display: block;
  font-size: clamp(11px, 3.7vw, 15px);
  font-weight: 900;
  line-height: 1.05;
}
.atlas-fish-description {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255,255,255,.83);
  font-size: clamp(7px, 2.15vw, 10px);
  font-weight: 700;
  line-height: 1.14;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.atlas-fish-level {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* ---------- Увеличенная карточка рыбы ---------- */
.fish-detail-modal { z-index: 70; background: rgba(0,30,70,.6); }
.fish-detail-card {
  width: min(100%, 370px);
  padding: 24px 24px 22px;
  border-radius: 46px 40px 48px 42px;
  text-align: center;
}
.fish-detail-image {
  display: block;
  width: min(230px, 70vw);
  height: min(190px, 32vh);
  margin: -6px auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(0,49,99,.35));
}
.fish-detail-card h2 { margin-bottom: 12px; }
.fish-detail-character {
  margin: 0 0 7px;
  font-size: 14px;
  font-weight: 900;
}

@media (max-width: 360px) {
  .worlds-grid { grid-template-columns: 1fr; }
  .world-card { display: grid; grid-template-columns: 74px 1fr; column-gap: 8px; text-align: left; }
  .world-card img { grid-row: 1 / 5; width: 74px; height: 78px; }
  .world-card h3, .world-card p, .world-card-progress, .world-card .modal-button { grid-column: 2; }
  .world-card h3, .world-card p { min-height: 0; }
}
.fish-detail-description {
  margin: 0 0 18px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- Первое открытие новой рыбы ---------- */
.fish-unlock-modal {
  z-index: 80;
  background: rgba(0,32,74,.48);
  animation: atlas-overlay-in .28s ease-out;
}
.fish-unlock-card {
  width: min(100%, 370px);
  padding: 24px 24px 20px;
  border-radius: 50px 42px 48px 45px;
  text-align: center;
  animation: fish-unlock-in .55s cubic-bezier(.15,.85,.2,1.18);
}
.fish-unlock-kicker {
  display: block;
  font-size: clamp(17px, 5vw, 23px);
  font-weight: 900;
  letter-spacing: .08em;
  text-shadow: 0 0 18px rgba(207,249,255,.95), 0 3px 8px rgba(0,54,105,.35);
}
.fish-unlock-image {
  display: block;
  width: min(250px, 72vw);
  height: min(210px, 35vh);
  margin: 2px auto -4px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,52,100,.36));
  animation: fish-unlock-float 1.8s ease-in-out infinite alternate;
}
.fish-unlock-card h2 { margin: 0 0 8px; }
.fish-unlock-card p {
  margin: 0;
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.fish-unlock-hint {
  display: block;
  margin-top: 15px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity .25s;
}
.fish-unlock-modal.can-dismiss { cursor: pointer; }
.fish-unlock-modal.can-dismiss .fish-unlock-hint { opacity: .68; }

@media (hover: hover) and (pointer: fine) {
  .atlas-fish-card.is-unlocked:hover { transform: scale(1.035); filter: brightness(1.1); border-color: rgba(255,255,255,.72); }
}

@keyframes rays { to { transform: skewX(3deg) scaleX(1.05); opacity: .76; } }
@keyframes drift-up { from { transform: translateY(40px); opacity: 0; } 20% { opacity: .7; } to { transform: translate(10px, -280px); opacity: 0; } }
@keyframes button-bounce { 0% { transform: scale(1); } 40% { transform: scale(.86); } 75% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes unlock-fish { 0% { scale: .75; } 58% { scale: 1.1; filter: brightness(1.35); } 100% { scale: 1; } }
@keyframes unlock-flash { 0% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes unlock-bubble { to { opacity: 0; transform: translate(var(--bubble-x), -34px) scale(.3); } }
@keyframes danger-pulse { to { opacity: .55; filter: brightness(1.18); } }
@keyframes modal-in { from { opacity: 0; transform: scale(.83) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes atlas-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes atlas-card-in { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes fish-unlock-in { from { opacity: 0; transform: scale(.62) translateY(18px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes fish-unlock-float { to { transform: translateY(-7px) rotate(1.2deg); } }

@media (max-width: 370px) {
  :root {
    --hud-gap-min: 4px;
    --hud-gap-fluid: 4px;
    --hud-gap-max: 4px;
    --hud-stat-gap-min: 3px;
    --hud-stat-gap-fluid: 3px;
    --hud-stat-gap-max: 3px;
    --hud-divider-padding-min: 4px;
    --hud-divider-padding-fluid: 4px;
    --hud-divider-padding-max: 4px;
    --hud-label-letter-spacing: .025em;
    --progress-side-padding: 6px;
    --progress-bottom-padding: 14px;
    --tutorial-bottom: 72px;
    --tutorial-font-size: 8px;
  }

  .progression { padding: 0; }
}

@media (min-width: 601px) {
  .app-shell {
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .game-wrap {
    width: min(100%, calc((100dvh - 16px) * .5625), 540px);
    height: auto;
    max-height: calc(100dvh - 16px);
    aspect-ratio: 9 / 16;
    border-radius: clamp(0px, 4vw, 30px);
    box-shadow: 0 24px 70px rgba(0, 27, 83, .42);
  }
}

@media (min-width: 700px) {
  .game-wrap { border-radius: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ========================================================================== */
/* Liquid Glass UI                                                            */
/* ========================================================================== */

.game-wrap.world-fugu,
.world-fugu {
  --ui-accent-rgb: 73, 220, 255;
  --ui-secondary-rgb: 56, 157, 255;
  --ui-violet-rgb: 117, 117, 255;
  --ui-panel-rgb: 35, 157, 220;
}
.game-wrap.world-jellyfish {
  --ui-accent-rgb: 89, 195, 255;
  --ui-secondary-rgb: 104, 127, 255;
  --ui-violet-rgb: 177, 101, 255;
  --ui-panel-rgb: 61, 91, 184;
  --glass-bg: rgba(126, 168, 255, .15);
  --glass-bg-strong: rgba(123, 153, 255, .23);
  --glass-bg-tertiary: rgba(156, 177, 255, .09);
  --glass-border: rgba(220, 232, 255, .34);
  --glass-highlight: rgba(238, 239, 255, .44);
}
.world-jellyfish {
  --ui-accent-rgb: 89, 195, 255;
  --ui-secondary-rgb: 104, 127, 255;
  --ui-violet-rgb: 177, 101, 255;
  --ui-panel-rgb: 61, 91, 184;
}

.glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background-color: rgba(var(--ui-panel-rgb), .31); /* fallback без backdrop-filter */
  background-image: linear-gradient(180deg, var(--glass-bg), rgba(var(--ui-accent-rgb), .11) 53%, var(--glass-lower-shade));
  box-shadow: var(--glass-inner-highlight), var(--glass-shadow-soft);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  isolation: isolate;
}

.glass::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-highlight), rgba(255,255,255,.07) 38%, transparent 68%);
  opacity: .62;
  pointer-events: none;
}

.glass > * { position: relative; z-index: 1; }
.glass > .modal-close-button { position: absolute; }
.glass-strong { background-color: rgba(var(--ui-panel-rgb), .4); background-image: linear-gradient(180deg, var(--glass-bg-strong), rgba(var(--ui-secondary-rgb), .11) 58%, rgba(5, 36, 105, .24)); box-shadow: var(--glass-inner-highlight), var(--glass-shadow); }
.glass-tertiary { background-color: rgba(102, 170, 207, .2); background-image: linear-gradient(180deg, var(--glass-bg-tertiary), rgba(126, 188, 222, .045)); }
.glass-panel { border-radius: var(--glass-radius); }

.glass-button {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  border-radius: var(--glass-radius-pill);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  letter-spacing: .045em;
  text-shadow: 0 1px 5px rgba(0, 22, 61, .28);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--ui-transition) cubic-bezier(.2,.75,.25,1), filter var(--ui-transition) ease, border-color var(--ui-transition) ease, background-color var(--ui-transition) ease;
}
.glass-button::before {
  inset: auto 6% auto;
  top: 3px;
  height: 40%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.07));
  opacity: .55;
}
.glass-button-primary {
  border-color: rgba(227,252,255,.68);
  background-color: rgba(var(--ui-accent-rgb), .5);
  background-image: linear-gradient(180deg, rgba(151,240,255,.58), rgba(var(--ui-accent-rgb), .45) 48%, rgba(31,91,207,.52));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -9px 18px rgba(0,50,155,.2), 0 10px 30px rgba(var(--ui-accent-rgb), var(--game-glow-alpha));
}
.glass-button-secondary {
  border-color: rgba(218,232,255,.46);
  background-color: rgba(var(--ui-secondary-rgb), .3);
  background-image: linear-gradient(180deg, rgba(169,216,255,.32), rgba(var(--ui-secondary-rgb), .29) 52%, rgba(var(--ui-violet-rgb), .26));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.34), inset 0 -7px 15px rgba(29,30,130,.15), 0 8px 23px rgba(var(--ui-secondary-rgb), .13);
}
.glass-button-tertiary { background-color: rgba(140, 202, 235, .12); background-image: linear-gradient(180deg, rgba(220,247,255,.14), rgba(65,116,190,.11)); -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(135%); backdrop-filter: blur(var(--glass-blur-light)) saturate(135%); }
.glass-icon-button { width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; border-radius: 50%; }
.glass-button:active { transform: scale(var(--button-press-scale)); filter: brightness(.96); }
.glass-button:focus-visible { outline: 2px solid rgba(255,255,255,.88); outline-offset: 3px; }
.glass-button:disabled { cursor: default; opacity: .66; }

.ui-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-icon path:first-child:not(:only-child) { fill: none; }

/* Главное меню */
.main-menu { padding: max(20px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(0, 18, 54, .12); }
.main-menu-card { width: min(100%, 360px); padding: 12px 8px 10px; border: 0; border-radius: 34px; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; }
.main-menu-card::before { display: none; }
.main-menu-logo-title { margin: 0 0 24px; line-height: 0; }
.main-menu-logo { display: block; width: min(72vw, 320px); height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 7px 16px rgba(38,174,255,.24)) drop-shadow(0 0 12px rgba(151,101,255,.16)); }
.main-menu-world { display: flex; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 8px 16px; flex-direction: column; border-radius: 18px; }
.main-menu-world strong { overflow: hidden; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.main-menu-world span { margin-top: 2px; font-size: 9px; font-weight: 800; opacity: .7; }
#play-button { width: 100%; height: 62px; margin-top: 0; font-size: 18px; letter-spacing: .08em; box-shadow: inset 0 2px 0 rgba(255,255,255,.62), inset 0 -10px 20px rgba(0,50,155,.2), 0 13px 34px rgba(var(--ui-accent-rgb), .3); }
.main-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.menu-section-button { width: 100%; min-height: 52px; padding: 0 14px; font-size: 11px; }
.main-menu-utilities { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
#main-sound-toggle-button[aria-pressed='false'] { opacity: .58; }

/* HUD */
.hud { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-left)); gap: 5px; }
.glass-hud { min-height: 40px; padding: 5px 9px; border-radius: 16px; background-color: rgba(92, 163, 204, .14); -webkit-backdrop-filter: blur(8px) saturate(125%); backdrop-filter: blur(8px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px rgba(0,29,75,.1); }
.glass-hud::before { opacity: .26; }
.hud-stat + .hud-stat { border-left: 0; padding-left: 9px; }
.next-bubble { flex: 1 1 auto; }
.score-bubble, .best-bubble { flex: 0 1 auto; }
.hud-label { opacity: .7; }
.pause-button { flex-basis: 42px; width: 42px; height: 42px; min-width: 42px; min-height: 42px; border-radius: 50%; }
.pause-button.is-bouncing { animation: none; }

/* Общие модальные окна */
.modal { padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); background: rgba(0, 9, 35, .24); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: liquid-overlay-in var(--modal-open-duration) ease both; }
.glass-modal { animation: liquid-modal-in var(--modal-open-duration) cubic-bezier(.2,.75,.24,1) both; }
.modal-card { width: min(100%, 350px); padding: 28px 22px 22px; border-radius: 32px; }
.modal h2 { margin: 6px 0 20px; font-size: clamp(25px, 7vw, 31px); letter-spacing: -.02em; }
.modal-kicker { font-size: 9px; letter-spacing: .13em; opacity: .62; }
.modal-button { min-height: 50px; margin-top: 10px; padding: 12px 17px; border-radius: var(--glass-radius-pill); }
.modal-close-button { top: 11px; right: 11px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0 0 3px; font-size: 25px; }
.pause-card, .settings-card, .game-over-card { width: min(100%, 350px); }
.pause-dialog-shell { width: min(100%, 350px); text-align: center; }
.pause-game-title { margin: 0 0 17px; line-height: 0; }
.pause-menu-logo { display: block; width: min(64vw, 270px); height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(56,191,255,.22)); }
.pause-card { padding-top: 18px; }
.pause-worlds-button { background-image: linear-gradient(180deg, rgba(194,210,255,.3), rgba(var(--ui-secondary-rgb), .28) 48%, rgba(var(--ui-violet-rgb), .36)); }
.pause-card .modal-button:first-child { margin-top: 0; }
.settings-modal { z-index: 100; }
.settings-card { position: relative; text-align: center; }
/* Общий вертикальный ритм для всех настроек, включая длинные переводы. */
.settings-options { display: flex; flex-direction: column; gap: var(--settings-row-gap); }
.sound-toggle-button { min-height: 52px; }
.sound-toggle-icon { width: 21px; height: 21px; filter: none; }
.settings-option { display: grid; width: 100%; min-height: 66px; grid-template-columns: 26px minmax(0, 1fr) 52px; gap: 12px; padding: 10px 12px; text-align: left; }
.settings-option-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.settings-option-copy strong { font-size: 12px; letter-spacing: .06em; }
.settings-option-copy small { font-size: 9px; line-height: 1.4; font-weight: 700; letter-spacing: 0; opacity: .66; }
.game-toggle { position: relative; display: block; width: 52px; height: 30px; border: 1px solid rgba(220,247,255,.35); border-radius: 999px; background: rgba(19,55,104,.28); box-shadow: inset 0 2px 7px rgba(0,20,70,.18); transition: background-color 160ms ease, box-shadow 160ms ease; }
.game-toggle i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fff, #bcd9ed); box-shadow: inset 0 1px 0 #fff, 0 2px 7px rgba(0,20,65,.32); transition: transform 160ms ease, box-shadow 160ms ease; }
.settings-option[aria-pressed='true'] .game-toggle { background: rgba(var(--ui-accent-rgb), .52); box-shadow: inset 0 2px 7px rgba(0,84,160,.18), 0 0 12px rgba(var(--ui-accent-rgb), .22); }
.settings-option[aria-pressed='true'] .game-toggle i { transform: translateX(22px); box-shadow: inset 0 1px 0 #fff, 0 0 9px rgba(214,252,255,.58); }
.settings-option[aria-pressed='false'] { opacity: 1; }
.settings-option[aria-pressed='false'] .settings-option-copy,
.settings-option[aria-pressed='false'] .sound-toggle-icon { opacity: .62; }
.settings-done-button { width: 100%; margin-top: 14px; }
.language-settings-button { grid-template-columns: 26px minmax(0, 1fr) 24px; }
.language-chevron { width: 20px; height: 20px; opacity: .72; }

/* Выбор языка использует тот же лёгкий Liquid Glass без отдельной дизайн-системы. */
.language-modal { z-index: 110; }
.language-card { position: relative; width: min(100%, 350px); text-align: center; }
.language-list { display: grid; gap: 9px; }
.language-option {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  text-align: left;
  text-transform: none;
}
.language-option.is-selected {
  border-color: rgba(255,255,255,.56);
  background-color: rgba(var(--ui-accent-rgb), .3);
  box-shadow: inset 0 0 20px rgba(var(--ui-accent-rgb), .13), var(--glass-inner-highlight);
}
.language-option-mark { width: 22px; font-size: 17px; text-align: center; }

/* Выбор миров */
.worlds-modal { background: rgba(0, 10, 30, .24); }
.worlds-card { width: min(100%, 520px); max-height: 100%; padding: 25px 16px 17px; border-radius: 32px; }
.worlds-grid { gap: 12px; }
.world-card { position: relative; padding: 8px 8px 10px; border-radius: 24px; background-color: rgba(99, 166, 207, .16); text-align: left; }
.world-card::before { opacity: .24; }
.world-card-preview { position: relative; width: 100%; height: 116px; overflow: hidden; border-radius: 18px; background-position: center bottom; background-size: cover; }
.world-card-preview img { position: absolute; right: 8%; bottom: 4px; width: 45%; height: 82%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,15,50,.4)); }
.world-card h3 { align-self: stretch; margin: 10px 4px 2px; font-size: 16px; }
.world-card p { min-height: 34px; margin: 0 4px; font-size: 10px; opacity: .68; }
.world-card-progress { align-self: stretch; margin: 7px 4px 0; font-size: 10px; opacity: .82; }
.world-card .modal-button { min-height: 40px; margin: 8px 2px 0; padding: 8px; }
.world-card.is-selected { border-color: rgba(255,255,255,.5); background-color: rgba(var(--ui-accent-rgb), .19); box-shadow: inset 0 0 24px rgba(var(--ui-accent-rgb), .11), var(--glass-inner-highlight); }
.world-card-selected-mark { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; min-width: 26px; height: 26px; padding: 0 9px; place-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 999px; background: rgba(var(--ui-accent-rgb), .52); box-shadow: 0 4px 12px rgba(0,28,71,.25); font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.world-card-selected-mark[hidden] { display: none; }

/* Атлас */
.atlas-modal, .fish-detail-modal, .fish-unlock-modal { background: rgba(0, 10, 30, .22); }
.atlas-card {
  width: min(100%, 500px);
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.atlas-scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; touch-action: pan-y; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.atlas-scroll::-webkit-scrollbar { display: none; }
.atlas-card > #atlas-close-button { z-index: 5; width: 44px; height: 44px; min-width: 44px; min-height: 44px; touch-action: manipulation; }
/* Одна стеклянная панель вместо цепочки fullscreen blur → panel blur → control blur. */
.native-android .main-menu,
.native-android .atlas-modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
.native-android .atlas-card .glass,
.native-android .settings-card .glass,
.native-android .worlds-card .glass,
.native-android .language-card .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
.native-android .game-wrap.is-main-menu-open .water-rays,
.native-android .game-wrap.is-main-menu-open .ambient-bubbles i { animation-play-state: paused; }
.atlas-world-tabs { gap: 8px; }
.atlas-world-tab { min-height: 38px; padding: 7px 9px; font-size: 10px; }
.atlas-world-tab.is-selected { border-color: rgba(255,255,255,.5); background-color: rgba(var(--ui-accent-rgb), .28); }
.atlas-grid { grid-auto-rows: minmax(118px, 1fr); gap: 8px; }
.atlas-fish-card { min-height: 105px; padding: 8px; gap: 2px; border: 1px solid rgba(220,247,255,.2); border-radius: 20px; background: linear-gradient(180deg, rgba(204,241,255,.1), rgba(var(--ui-secondary-rgb), .07)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 15px rgba(0,25,80,.08); animation: atlas-card-in var(--modal-open-duration) backwards ease; }
.atlas-fish-card.is-locked { opacity: .54; }
.atlas-fish-image-wrap { width: min(64px, 16vw); height: min(70px, 18vw); }
.atlas-fish-image-wrap.has-character-glow { filter: drop-shadow(0 0 10px var(--character-glow-color)); }
.atlas-fish-image { filter: drop-shadow(0 4px 7px rgba(0,30,75,.28)); }
.atlas-fish-level { font-size: 7px; font-weight: 900; letter-spacing: .1em; opacity: .52; }
.atlas-fish-card strong { font-size: clamp(12px, 3.6vw, 15px); }
.atlas-fish-description { -webkit-line-clamp: 3; font-size: clamp(8px, 2.1vw, 10px); opacity: .76; }
.fish-detail-card { width: min(100%, 380px); padding: 25px 22px 22px; border-radius: 32px; }
.fish-detail-image.has-character-glow { filter: drop-shadow(0 0 18px var(--character-glow-color)) drop-shadow(0 12px 16px rgba(0,31,74,.28)); }

/* Game Over */
.new-record-badge { display: inline-flex; margin: -7px auto 15px; padding: 7px 12px; border-radius: var(--glass-radius-pill); color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .12em; animation: record-badge-in 260ms ease both; }
.new-record-badge[hidden] { display: none; }
.results { gap: 9px; margin-bottom: 18px; }
.results div { padding: 12px 8px; border: 1px solid rgba(220,247,255,.2); border-radius: 18px; background: linear-gradient(180deg, rgba(218,246,255,.12), rgba(var(--ui-secondary-rgb), .08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }

@keyframes liquid-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes liquid-modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes record-badge-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

@media (hover: hover) and (pointer: fine) {
  .glass-button:not(:disabled):hover { transform: scale(var(--button-hover-scale)); filter: brightness(1.06); }
  .atlas-fish-card.is-unlocked:hover { transform: scale(1.02); filter: brightness(1.06); }
}

@media (max-width: 360px) {
  .main-menu-card { padding-right: 17px; padding-left: 17px; }
  .worlds-grid { grid-template-columns: 1fr; }
  .world-card { display: grid; grid-template-columns: 98px minmax(0, 1fr); column-gap: 9px; }
  .world-card-preview { grid-row: 1 / 6; width: 98px; height: 112px; }
  .world-card-preview img { right: 0; width: 76%; }
  .world-card h3, .world-card p, .world-card-progress, .world-card .modal-button { grid-column: 2; }
  .world-card-selected-mark { top: 14px; left: 76px; right: auto; }
}

/* Длинные немецкие и португальские подписи переносятся локально, без уменьшения всего UI. */
.modal-button,
.world-card p,
.atlas-fish-description,
.settings-option-copy { min-width: 0; overflow-wrap: anywhere; }

html[lang='de'] .pause-card .modal-button,
html[lang='pt-BR'] .pause-card .modal-button { white-space: normal; line-height: 1.15; }

html[lang='de'] .world-card .modal-button,
html[lang='pt-BR'] .world-card .modal-button { white-space: normal; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background-color: rgba(57, 126, 174, .82); }
  .glass-strong { background-color: rgba(43, 103, 154, .9); }
  .modal { background-color: rgba(0, 20, 52, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .glass-button, .glass-modal, .modal, .atlas-fish-card, .new-record-badge { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}