/* Стиль «пластилин» — единственный вид приложения. Раскладка — в остальных файлах стилей, здесь — объём и шапка:
   мягкие «вылепленные» кнопки и плитки вместо печатных теней; в шапке — нарисованный ночной город, он стекает на бумагу.
   Не детский: тёмная ночь, без пастели, без лиц у города. Оживлено: звёзды мерцают, кнопки вминаются,
   герои плиток выходят за край — призрак парит, ведьма покачивается. */


:root {
  /* объём вместо печатной тени: низ темнее, верх с бликом, мягкая тень на бумагу */
  --clay: inset 0 -5px 0 rgba(0, 0, 0, .2), inset 0 3px 4px rgba(255, 255, 255, .35), 0 10px 20px rgba(40, 20, 30, .2);
  --hard: var(--clay);
}

/* ---------- шапка: ночная улица своего города (Nano Banana, art/scenes/street-*.jpg, 4:3) ----------
   Картинка — во всю высоту шапки (--H), шире экрана; лишнее по бокам обрезается, сдвиг — --px (0 — левый край, 1 — правый).
   Место героя задано в долях картинки (--fx, --fy) — пятно света от фонаря на мостовой — и пересчитывается из сдвига,
   поэтому ступни стоят в свете на любой ширине. Герой — 40% высоты шапки: город крупный, герой — его часть, а не плакат.
   Низ картинки сам уходит в бумагу; градиент добивает до точного цвета страницы (внутри .hh --bg — ночь, поэтому цвет прямо).
   Любой герой встаёт туда же: спрайты 640×640, ступни на 621. */
.hh { --scene: #221a1e; --w: min(100vw, 480px); --H: calc(var(--w) * .98); --Wi: calc(var(--H) * 4 / 3); --hs: calc(var(--H) * .4);
  --px: .6; --fx: .65; --fy: .865; height: calc(var(--H) + var(--safe-t)); }
.hh[data-city="spb"] { --scene: #1f1619; --px: .7; --fx: .745; --fy: .81; }
.hh-city { background: linear-gradient(transparent 82%, #f4efe6) 0 0 / 100% 100% no-repeat,
  url(art/scenes/street-msk.jpg) calc((var(--w) - var(--Wi)) * var(--px)) 100% / var(--Wi) var(--H) no-repeat var(--scene); }
.hh-city[data-city="spb"] { background-image: linear-gradient(transparent 82%, #f4efe6), url(art/scenes/street-spb.jpg); }
.hh + .cta { position: relative; z-index: 1; margin-top: -10px; }
/* герой ступнями в пятне света */
.sitter { width: var(--hs); right: auto; bottom: auto;
  left: calc((var(--w) - var(--Wi)) * var(--px) + var(--Wi) * var(--fx) - var(--hs) / 2); top: calc(var(--safe-t) + var(--H) * var(--fy) - var(--hs) * 621 / 640); }
.sitter .hero-sprite { width: var(--hs); height: var(--hs); filter: drop-shadow(0 0 8px rgba(255, 205, 46, .25)); }
/* тень под ногами — овал на мостовой (свет фонаря сверху) */
.sitter::after { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; top: calc(var(--hs) * .93); height: calc(var(--hs) * .09); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 10, 14, .55), rgba(20, 10, 14, .25) 60%, transparent); }
/* фраза — у головы героя, небольшая; через несколько секунд тает (home.js), чтобы не закрывать город; тап по герою — новая */
.say-bubble { left: auto; right: calc(var(--w) - ((var(--w) - var(--Wi)) * var(--px) + var(--Wi) * var(--fx)) + var(--hs) * .32);
  top: calc(var(--safe-t) + var(--H) * var(--fy) - var(--hs) * 1.22); bottom: auto; width: max-content; max-width: min(170px, 46vw);
  padding: 7px 10px; font-size: 12px; line-height: 1.25; text-wrap: balance; transition: opacity .5s, transform .5s; }
.say-bubble.hush { opacity: 0; transform: translateY(-6px) scale(.96); pointer-events: none; }
/* Без параллакса: улица — одна картинка с героем на мостовой и растворённым в бумагу низом. Если сдвигать её при прокрутке,
   низ уезжает под край шапки (виден резкий срез), а герой съезжает с улицы на плашки. */
/* звёзды мерцают поверх нарисованного неба */
.hh-night { display: block; position: absolute; inset: 0; pointer-events: none; }
.hh-night .moon { display: none; }
.hh-night .st { position: absolute; width: 7px; height: 7px; background: #fff3c9; border-radius: 2px;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: star 2.6s ease-in-out infinite; }
.hh-night .st:nth-child(2) { left: 30%; top: calc(96px + var(--safe-t)); }
.hh-night .st:nth-child(3) { left: 62%; top: calc(52px + var(--safe-t)); width: 5px; height: 5px; animation-delay: -.8s; }
.hh-night .st:nth-child(4) { left: 70%; top: calc(110px + var(--safe-t)); animation-delay: -1.6s; }
.hh-night .st:nth-child(5) { left: 12%; top: calc(140px + var(--safe-t)); width: 5px; height: 5px; animation-delay: -.4s; }
.hh-night .st:nth-child(6) { left: 86%; top: calc(78px + var(--safe-t)); width: 6px; height: 6px; animation-delay: -2s; }
.hh-night .st:nth-child(7) { left: 40%; top: calc(132px + var(--safe-t)); width: 4px; height: 4px; animation-delay: -1.2s; }
.hh-night .st:nth-child(8) { left: 55%; top: calc(150px + var(--safe-t)); width: 5px; height: 5px; animation-delay: -2.3s; }
@keyframes star { 50% { opacity: .2; transform: scale(.5) rotate(45deg); } }
.say-bubble { border-radius: 20px 20px 6px 20px; transform: rotate(-1deg); background: #fff8ec;
  box-shadow: inset 0 -4px 0 #e3d5bf, inset 0 3px 4px #fff, 0 8px 16px rgba(0, 0, 0, .35); }

/* ---------- кнопки и плитки: вылеплены и вминаются при нажатии ---------- */
.cta { border-radius: 28px; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .45), inset 0 3px 5px rgba(255, 255, 255, .14), 0 12px 22px rgba(40, 20, 30, .28); }
.cta-go { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), inset 0 2px 3px rgba(255, 255, 255, .6); }
.disc { overflow: visible; border: 0; border-radius: 28px; box-shadow: var(--clay); }
.disc::before { border-radius: inherit; }
.tabbar { border: 0; border-radius: 28px; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .1), inset 0 3px 4px #fff, 0 12px 26px rgba(40, 20, 30, .28); }
.card:not(.full) { border: 0; border-radius: 26px; box-shadow: var(--clay); }
.pill, .round-btn { border: 0; box-shadow: var(--clay); }
.pill.ghost, .ghost-pill { border: 0; }
/* нажатие: сплющилась и отпружинила (пружина — --spring у самих кнопок) */
.cta:active, .disc:active, .pill:active, .round-btn:active, .ev-acts .save:active {
  transform: scale(1.04, .9); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 4px 8px rgba(40, 20, 30, .2); transition-duration: .08s; }

/* герои плиток выходят за край: призрак парит, ведьма покачивается */
.disc-hero { right: -16px; bottom: -14px; width: 70%; max-width: 132px; transform-origin: 50% 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .3)); }
.disc-radar .disc-hero { animation: ghost-float 3.2s ease-in-out infinite; }
.disc-party .disc-hero { animation: witch-sway 2.4s ease-in-out infinite; }
@keyframes ghost-float { 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes witch-sway { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

/* ---------- остальные экраны: те же вылепленные плашки вместо обводок и печатных теней ---------- */
/* плашки-«острова»: цветные карточки и списки */
:is(.pcard, .pq, .st-top, .fr-quest, .fr-go, .pod, .fr-list li.you, .qc, .fnc-me, .d-go, .d-friends, .d-say, .saved-list li[data-id], .pl, .trend-list li[data-i]) {
  border: 0; box-shadow: var(--clay); }
:is(.pcard, .pq, .qc, .pod) { border-radius: 26px; }
.pc-stats { border-top: 0; box-shadow: inset 0 4px 6px rgba(0, 0, 0, .12); }
.pc-stats span + span { border-left: 0; box-shadow: inset 2px 0 0 rgba(0, 0, 0, .08); }
.qc-ph { border-bottom: 0; }
/* мелкие кнопки и значки: тоже объём, без чёрной обводки */
:is(.pa-chip, .pc-pin, .q-nav button, .mate-bd span, .hg, .d-ico, .act, .ev-acts .share, .rumor-tabs button, .int, .sheet-x) { border: 0; box-shadow: var(--clay); }
.pc-pin.empty { box-shadow: inset 0 3px 6px rgba(0, 0, 0, .18); }
.hg.on { box-shadow: var(--clay), inset 0 0 0 3px #1c1719; outline: 0; }
:is(.fnc-faces, .fr-sig-faces) :is(img, svg) { border: 0; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); }
/* «Друзья сейчас» и «Где тусят друзья»: вместо пунктира — мягкая розовая плашка */
.fr-sig { border: 0; background: color-mix(in srgb, var(--coral) 10%, var(--bg)); box-shadow: var(--clay); }
.fr-tabs { border: 0; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .14); }
.fr-tabs button.on, .pc-swap { border: 0; box-shadow: var(--clay); }
.d-go small { color: color-mix(in srgb, var(--scene) 75%, transparent); }
.fr-now-card { border: 0; background: color-mix(in srgb, var(--coral) 10%, var(--bg)); box-shadow: var(--clay); }
/* «Хочу» на карточке — вылепленная, нажатие сплющивает */
.ev-acts .save { border-radius: 16px; box-shadow: var(--clay); }
.d-actions .d-save { box-shadow: var(--clay); }
:is(.d-ico, .act, .pa-chip, .q-nav button, .qc-take, .fr-go, .fr-quest, .pq, .d-friends, .d-save):active {
  transform: scale(1.04, .9); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 4px 8px rgba(40, 20, 30, .2); transition-duration: .08s; }
:is(.d-ico, .act, .pa-chip, .q-nav button, .qc-take, .fr-go, .fr-quest, .pq, .d-friends, .d-save) { transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
/* шторка и подсказка — мягкие края вместо линии */
.sheet { border-top: 0; box-shadow: 0 -10px 30px rgba(28, 23, 25, .25), inset 0 3px 4px rgba(255, 255, 255, .5); border-radius: 30px 30px 0 0; }
/* страница события — во весь экран, не шторка: без скругления и тени сверху (иначе по краям видно экран под ней) */
.detail:not(.peek) .sheet { border-radius: 0; box-shadow: none; }
#toast { box-shadow: 0 10px 22px rgba(0, 0, 0, .3), inset 0 -3px 0 rgba(0, 0, 0, .4); border-radius: 20px; }
/* герой на карточке профиля — мягкая тень вместо печатной */
.pc-hero :is(img, svg) { filter: drop-shadow(0 10px 8px rgba(28, 23, 25, .35)); }

/* ---------- лента: карточка во весь экран, от края до края — как страница события (без полей и скруглений) ---------- */
/* кнопки справа на фото: объём только у кружка-значка; у подписи его быть не должно (выходили «пузыри») */
.rail .act { box-shadow: none; }
.rail .act svg { border: 0; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 2px 3px rgba(255, 255, 255, .18), 0 6px 12px rgba(0, 0, 0, .3); }
.rail .act:active { transform: scale(1.06, .9); box-shadow: none; }
/* вкладки и кнопки поверх фото — стеклянные, без объёма: на тёмном блик рисует «пузыри» */
.feed-screen :is(.rumor-tabs button, .feed-top .icon-btn) { box-shadow: none; }

/* ---------- живые списки: всё, что открывается по нажатию, вминается и отпружинивает ---------- */
:is(.fr-list li, .fr-hosts li) { border: 0; box-shadow: var(--clay); }
:is(.pod, .fr-list li[data-id], .fr-hosts li[data-id], .saved-list li[data-id], .trend-list li[data-i], .pl-e, .fr-sig, .fr-now-card) {
  transition: transform .45s var(--spring), box-shadow .45s var(--spring); }
:is(.pod, .fr-list li[data-id], .fr-hosts li[data-id], .trend-list li[data-i], .pl-e, .fr-sig, .fr-now-card):active {
  transform: scale(1.03, .92); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 4px 8px rgba(40, 20, 30, .2); transition-duration: .08s; }
/* подиум: герои живые — победитель подпрыгивает, остальные дышат; свой порядок у каждого, чтобы не синхронно */
.pod > :first-child { transform-origin: 50% 100%; animation: pod-breathe 2.8s ease-in-out infinite; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .28)); }
.pod-1 > :first-child { animation: pod-hop 2.2s cubic-bezier(.3, 0, .3, 1) infinite; }
.pod-3 > :first-child { animation-delay: -1.3s; }
.fr-list li[data-id] > :is(img, svg) { transition: transform .45s var(--spring); }
.fr-list li[data-id]:active > :is(img, svg) { transform: translateY(-6px) rotate(-6deg); transition-duration: .1s; }
@keyframes pod-breathe { 50% { transform: scale(1.04, .97); } }
@keyframes pod-hop { 0%, 60%, 100% { transform: translateY(0) scale(1); } 70% { transform: translateY(0) scale(1.08, .9); } 82% { transform: translateY(-14px) scale(.95, 1.06); } 92% { transform: translateY(0) scale(1.05, .95); } }

@media (prefers-reduced-motion: reduce) {
  .pod > :first-child { animation: none; }
  .hh-night *, .hh-night *::after, .disc-hero { animation: none; }
}