/* Стиль «жидкое стекло» (Liquid Glass) для разделов меню: магазин, инвентарь, уровни.
   Под ними лежит размытая сцена лаборатории (см. .m-scene.blurred в menu.css),
   а панели — полупрозрачное стекло: размывают и «насыщают» фон, сверху тонкий блик. */
:root {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(255, 255, 255, 0.11) 100%);
  --glass-border: rgba(255, 255, 255, 0.24);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.08), inset 0 0 20px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.3);
  --glass-blur: blur(18px) saturate(1.7) brightness(1.06);
}

/* сам экран: лёгкая затемняющая вуаль поверх размытой сцены, без собственного размытия */
.screen-solid {
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.3) 0%, rgba(8, 10, 20, 0.5) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.screen-solid .topbar h2 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.screen-solid .screen-note { color: rgba(255, 255, 255, 0.74); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }
.screen-solid .collection-head { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); }

/* стеклянные панели */
.screen-solid .icon-btn,
.screen-solid .pill,
.shop-card,
.item-card,
.level-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.screen-solid .icon-btn { border-radius: 50%; }

/* блик по верхнему левому краю, как на изогнутом стекле */
.shop-card, .item-card, .level-card { position: relative; overflow: hidden; }
.shop-card::before, .item-card::before, .level-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%);
}
.shop-card > *, .item-card > * { position: relative; }

/* магазин */
.shop-card { border-radius: 26px; padding: 14px; }
.shop-icon {
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 42%, rgba(255, 255, 255, 0.12)), color-mix(in srgb, var(--c) 14%, rgba(255, 255, 255, 0.04)));
  border: 1px solid color-mix(in srgb, var(--c) 55%, rgba(255, 255, 255, 0.3));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.shop-desc { color: rgba(255, 255, 255, 0.72); }
.pips i { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25); }
.pips i.on { background: linear-gradient(180deg, #8fdcff, #2aabee); box-shadow: 0 0 6px rgba(42, 171, 238, 0.7); }
.btn-buy {
  border-radius: 999px; min-height: 44px;
  background: linear-gradient(180deg, rgba(120, 210, 255, 0.92), rgba(32, 146, 232, 0.86));
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -6px 12px rgba(0, 70, 160, 0.35), 0 6px 18px rgba(42, 171, 238, 0.4);
}
.btn-buy:active { transform: scale(0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -4px 10px rgba(0, 70, 160, 0.35), 0 3px 10px rgba(42, 171, 238, 0.35); }
.btn-buy.poor {
  background: var(--glass-bg); color: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}
.btn-buy:disabled { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); }

/* инвентарь: стекло подкрашено цветом редкости */
.item-card {
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, 0.12)), color-mix(in srgb, var(--c) 10%, rgba(255, 255, 255, 0.05)));
  border: 1px solid color-mix(in srgb, var(--c) 60%, rgba(255, 255, 255, 0.3));
}
.item-card.missing {
  background: var(--glass-bg);
  border: 1.5px dashed color-mix(in srgb, var(--c) 60%, rgba(255, 255, 255, 0.25));
}
.item-card.missing .item-icon { color: rgba(255, 255, 255, 0.4); }
.item-card.missing .item-name { color: rgba(255, 255, 255, 0.6); }
.screen-solid .bar { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35); }

/* уровни: цветное стекло вместо плотных карточек */
.level-card { border-radius: 28px; }
.level-card.lv-paris { background: linear-gradient(170deg, rgba(110, 170, 230, 0.55) 0%, rgba(243, 201, 164, 0.42) 70%, rgba(150, 120, 100, 0.45) 100%); }
.level-card.lv-ocean { background: linear-gradient(170deg, rgba(40, 140, 210, 0.5) 0%, rgba(20, 70, 130, 0.45) 70%, rgba(10, 30, 70, 0.5) 100%); }
.level-card::after { background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.34)); }
.level-card.locked { filter: saturate(0.6) brightness(0.8); }

/* если браузер не умеет размывать фон под панелью — делаем стекло плотнее, чтобы текст читался */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .screen-solid .icon-btn, .screen-solid .pill, .shop-card, .item-card, .level-card { background: rgba(40, 48, 70, 0.82); }
}

/* запас снизу и по бокам, чтобы тени стеклянных карточек не обрезались краем прокручиваемого списка */
.shop-list, .item-list, .level-list { padding: 4px 4px 40px; margin-left: -4px; margin-right: -4px; }