/* Вершина — анимации персонажа, костёр, шапки-сцены. Сцена горы — в world.css */

/* ---------- персонаж ---------- */
.sp { display: block; overflow: visible; --dl: 0s; --T: .86s; --amp: 26; --aamp: 26; }
.sp .lean { transform-origin: 38px 92px; }
.sp .bob { transform-origin: 38px 92px; }
.sp .leg { transform-origin: 38px 61px; }
.sp .shin { transform-origin: 38px 75px; }
.sp .arm { transform-origin: 38px 39px; }
.sp .fore { transform-origin: 38px 50.5px; }
.sp .head { transform-origin: 38px 31px; }
.sp .hair-back { transform-origin: 38px 12px; }
.sp .bun { transform-origin: 34px 12px; }
.sp .tail { transform-origin: 33px 33px; }
.sp .pack { transform-origin: 30px 38px; }
.sp .eye { transform-origin: 45.6px 20.8px; }
.sp .shadow { transform-origin: 39px 92.4px; }
.sp .hat { transform-origin: 40px 20px; }
.sp .pole { transform-origin: 38px 62px; }
.sp .logseat { display: none; }
.sp .drop { display: none; transform-origin: 52px 16px; }
.sp .gr { fill: none; stroke: #d9dde3; stroke-width: 1.1; stroke-linecap: round; }

/* общие мелочи у всех живых поз */
.sp:not(.still) .eye { animation: sp-blink 4.6s infinite; animation-delay: var(--dl); }
.sp:not(.still):not(.camp) .hair-back,
.sp.camp .hair-back { animation: sp-sway 2.3s ease-in-out infinite alternate; animation-delay: var(--dl); }
.sp:not(.still) .tail { animation: sp-flutter .55s ease-in-out infinite alternate; animation-delay: var(--dl); }

/* ---------- ходьба / подъём ---------- */
.sp.climb { --T: 1.12s; --amp: 21; --aamp: 17; }
.sp.walk .leg.f, .sp.climb .leg.f { animation: sp-thigh var(--T) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .leg.b, .sp.climb .leg.b { animation: sp-thigh var(--T) ease-in-out infinite; animation-delay: calc(var(--dl) - var(--T) / 2); }
.sp.walk .leg.f .shin, .sp.climb .leg.f .shin { animation: sp-knee var(--T) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .leg.b .shin, .sp.climb .leg.b .shin { animation: sp-knee var(--T) ease-in-out infinite; animation-delay: calc(var(--dl) - var(--T) / 2); }
.sp.walk .arm.f, .sp.climb .arm.f { animation: sp-arm var(--T) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .arm.b, .sp.climb .arm.b { animation: sp-arm var(--T) ease-in-out infinite; animation-delay: calc(var(--dl) - var(--T) / 2); }
.sp.walk .arm.f .fore, .sp.climb .arm.f .fore { animation: sp-fore var(--T) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .arm.b .fore, .sp.climb .arm.b .fore { animation: sp-fore var(--T) ease-in-out infinite; animation-delay: calc(var(--dl) - var(--T) / 2); }
.sp.walk .bob, .sp.climb .bob { animation: sp-bob calc(var(--T) / 2) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .head, .sp.climb .head { animation: sp-headbob calc(var(--T) / 2) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .pack, .sp.climb .pack { animation: sp-pack calc(var(--T) / 2) ease-in-out infinite; animation-delay: calc(var(--dl) - .08s); }
.sp.climb .lean { transform: rotate(9deg); }
.sp.walk .pole, .sp.climb .pole { animation: sp-pole var(--T) ease-in-out infinite; animation-delay: var(--dl); }
.sp.walk .shadow, .sp.climb .shadow { animation: sp-shadow calc(var(--T) / 2) ease-in-out infinite; animation-delay: var(--dl); }

@keyframes sp-thigh { 0%, 100% { transform: rotate(calc(var(--amp) * 1deg)); } 50% { transform: rotate(calc(var(--amp) * -1deg)); } }
@keyframes sp-knee { 0% { transform: rotate(8deg); } 25% { transform: rotate(62deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(2deg); } 100% { transform: rotate(8deg); } }
@keyframes sp-arm { 0%, 100% { transform: rotate(calc(var(--aamp) * -1deg)); } 50% { transform: rotate(calc(var(--aamp) * 1deg)); } }
@keyframes sp-fore { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(-6deg); } }
@keyframes sp-bob { 0%, 50%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-2.4px); } }
@keyframes sp-headbob { 0%, 50%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(-1.6deg); } }
@keyframes sp-pack { 0%, 50%, 100% { transform: translateY(0) rotate(0deg); } 25%, 75% { transform: translateY(.9px) rotate(1.2deg); } }
@keyframes sp-pole { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-12deg); } }
@keyframes sp-shadow { 0%, 50%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.9); } }
@keyframes sp-sway { 0% { transform: rotate(-2.5deg); } 100% { transform: rotate(5deg); } }
@keyframes sp-flutter { 0% { transform: rotate(-9deg) skewX(0deg); } 100% { transform: rotate(12deg) skewX(-6deg); } }
@keyframes sp-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---------- стоит и дышит ---------- */
.sp.idle .bob { animation: sp-breathe 3.4s ease-in-out infinite; animation-delay: var(--dl); }
.sp.idle .arm.f { animation: sp-idle-arm 3.4s ease-in-out infinite; animation-delay: var(--dl); }
.sp.idle .head { animation: sp-idle-head 3.4s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes sp-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9px); } }
@keyframes sp-idle-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(3deg); } }
@keyframes sp-idle-head { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-2deg); } 75% { transform: rotate(1.5deg); } }

/* ---------- штраф: стоит и переживает ---------- */
.sp.sad .head { animation: sp-nod 3.2s ease-in-out infinite; animation-delay: var(--dl); transform: rotate(15deg); }
.sp.sad .lean { transform: rotate(3deg); }
.sp.sad .arm.f, .sp.sad .arm.b { transform: rotate(5deg); }
.sp.sad .arm .fore { transform: rotate(9deg); }
.sp.sad .bob { animation: sp-sigh 3.2s ease-in-out infinite; animation-delay: var(--dl); }
.sp.sad .leg.b .shin { animation: sp-tap 1.3s ease-in-out infinite; animation-delay: var(--dl); }
.sp.sad .drop { display: inline; animation: sp-drop 2.4s ease-in infinite; animation-delay: var(--dl); }
@keyframes sp-nod { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(19deg) translateY(1px); } }
@keyframes sp-sigh { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.3px); } }
@keyframes sp-tap { 0%, 60%, 100% { transform: rotate(0deg); } 30% { transform: rotate(11deg); } }
@keyframes sp-drop { 0% { transform: translateY(-3px) scale(.4); opacity: 0; } 20% { opacity: 1; transform: translateY(0) scale(1); } 100% { transform: translateY(16px) scale(1); opacity: 0; } }

/* ---------- привал: сидит у костра ---------- */
.sp.camp .logseat { display: inline; }
.sp.camp .bob { transform: translateY(21px); animation: sp-sit 3.6s ease-in-out infinite; animation-delay: var(--dl); }
.sp.camp .leg.f { transform: rotate(-108deg); }
.sp.camp .leg.f .shin { transform: rotate(78deg); }
.sp.camp .leg.b { transform: rotate(-98deg); }
.sp.camp .leg.b .shin { transform: rotate(72deg); }
.sp.camp .arm.f { transform: rotate(-58deg); animation: sp-warm 2.8s ease-in-out infinite; animation-delay: var(--dl); }
.sp.camp .arm.f .fore { transform: rotate(-42deg); }
.sp.camp .arm.b { transform: rotate(-40deg); }
.sp.camp .arm.b .fore { transform: rotate(-60deg); }
.sp.camp .head { transform: rotate(6deg); }
@keyframes sp-sit { 0%, 100% { transform: translateY(21px); } 50% { transform: translateY(21.9px); } }
@keyframes sp-warm { 0%, 100% { transform: rotate(-58deg); } 50% { transform: rotate(-52deg); } }

/* ---------- вершина: прыгает от радости ---------- */
.sp.win .bob { animation: sp-jump .9s ease-in-out infinite; animation-delay: var(--dl); }
.sp.win .shadow { animation: sp-jshadow .9s ease-in-out infinite; animation-delay: var(--dl); }
.sp.win .arm.f { animation: sp-cheer-f .45s ease-in-out infinite alternate; animation-delay: var(--dl); }
.sp.win .arm.b { animation: sp-cheer-b .45s ease-in-out infinite alternate; animation-delay: var(--dl); }
.sp.win .arm .fore { transform: rotate(-10deg); }
.sp.win .arm.f { transform: rotate(-135deg); }
.sp.win .arm.b { transform: rotate(-160deg); }
.sp.win .bob { transform: translateY(-5px); }
.sp.win .pole, .sp.camp .pole { display: none; }
.sp.win .head { transform: rotate(-8deg); }
.sp.win .leg.f { animation: sp-lj-f .9s ease-in-out infinite; animation-delay: var(--dl); }
.sp.win .leg.b { animation: sp-lj-b .9s ease-in-out infinite; animation-delay: var(--dl); }
.sp.win .leg.f .shin { animation: sp-lj-s .9s ease-in-out infinite; animation-delay: var(--dl); }
.sp.win .leg.b .shin { animation: sp-lj-s .9s ease-in-out infinite; animation-delay: var(--dl); }
@keyframes sp-jump { 0%, 100% { transform: translateY(0) scaleY(.97); } 50% { transform: translateY(-11px) scaleY(1.02); } }
@keyframes sp-jshadow { 0%, 100% { transform: scaleX(1); opacity: .22; } 50% { transform: scaleX(.7); opacity: .12; } }
@keyframes sp-cheer-f { 0% { transform: rotate(-122deg); } 100% { transform: rotate(-146deg); } }
@keyframes sp-cheer-b { 0% { transform: rotate(-168deg); } 100% { transform: rotate(-150deg); } }
@keyframes sp-lj-f { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-24deg); } }
@keyframes sp-lj-b { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(14deg); } }
@keyframes sp-lj-s { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(46deg); } }

/* ---------- костёр ---------- */
.fire { display: block; overflow: visible; }
.fire .fl { transform-origin: 20px 31px; animation: fire-fl .6s ease-in-out infinite alternate; }
.fire .fl.b { animation-duration: .43s; animation-delay: -.2s; }
.fire .glow { transform-origin: 20px 32px; animation: fire-glow 1.3s ease-in-out infinite alternate; }
.fire .sp1 { animation: fire-spark 1.9s ease-out infinite; }
.fire .sp2 { animation: fire-spark 2.3s ease-out -.7s infinite; }
.fire .sp3 { animation: fire-spark 1.6s ease-out -1.1s infinite; }
@keyframes fire-fl { 0% { transform: scale(1, 1) skewX(0deg); } 100% { transform: scale(.88, 1.13) skewX(-5deg); } }
@keyframes fire-glow { 0% { opacity: .3; transform: scale(.96); } 100% { opacity: .5; transform: scale(1.06); } }
@keyframes fire-spark { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(4px, -18px); opacity: 0; } }

/* ---------- шапки-сцены (профиль, вход) ---------- */
.hs {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sky, linear-gradient(180deg, #2d3a7a 0%, #6a56a5 34%, #e0789a 62%, #ffb47c 82%, #ffe1a6 100%));
}
.hs-sun {
  position: absolute; left: var(--body-x, 80%); top: var(--body-y, 30%); margin-left: -22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--body-bg, #fff1c4);
  box-shadow: 0 0 0 12px rgba(255, 241, 196, .22), 0 0 0 30px rgba(255, 241, 196, .11);
}
.hs-r { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.hs-r i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% + var(--tw)); background-repeat: repeat-x; background-size: var(--tw) 100%; will-change: transform; }
.hs-r.r1 { height: 66%; } .hs-r.r1 i { --tw: 480px; }
.hs-r.r2 { height: 52%; } .hs-r.r2 i { --tw: 360px; }
.hs-r.r3 { height: 40%; } .hs-r.r3 i { --tw: 300px; }
.hs-r.r4 { height: 31%; } .hs-r.r4 i { --tw: 260px; }
.hs-r.r5 { height: 26%; } .hs-r.r5 i { --tw: 220px; }
.hs.go .hs-r i { animation: hs-scroll linear infinite; }
.hs.go .r1 i { animation-duration: 90s; } .hs.go .r2 i { animation-duration: 52s; } .hs.go .r3 i { animation-duration: 30s; }
.hs.go .r4 i { animation-duration: 17s; } .hs.go .r5 i { animation-duration: 9s; }
@keyframes hs-scroll { to { transform: translate3d(calc(var(--tw) * -1), 0, 0); } }
.hs-ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 24px; overflow: hidden;
  background: linear-gradient(180deg, #4e8f5f 0 7px, #3a6f56 7px 100%);
}
.hs-ground::before {
  content: ""; position: absolute; left: 0; top: 9px; height: 5px; width: calc(100% + 56px);
  background: repeating-linear-gradient(90deg, #f3d89e 0 28px, transparent 28px 56px); border-radius: 3px; opacity: .85;
}
.hs.go .hs-ground::before { animation: hs-road 1.05s linear infinite; }
@keyframes hs-road { to { transform: translateX(-56px); } }
.hs-fig { position: absolute; left: 24%; bottom: 9px; transform: translateX(-50%); }
.hs-fig .sp { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .18)); }
.hs-fire { position: absolute; left: 52px; bottom: -4px; }
.hs.camp { background: linear-gradient(180deg, #151b45 0%, #3a2f78 38%, #8b4a86 70%, #d9805f 100%); }
.hs.camp .hs-sun { background: #f6f1d9; box-shadow: 0 0 0 10px rgba(246, 241, 217, .12), 0 0 0 24px rgba(246, 241, 217, .06); width: 30px; height: 30px; }
.hs.camp .hs-r { filter: brightness(.62) saturate(1.1); }
.hs.camp .hs-ground { filter: brightness(.7); }
.hs.sad { filter: saturate(.78) brightness(.96); }
.hs.win::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 20% 10%, #ffd23f 98%, transparent), radial-gradient(circle 3px at 55% 30%, #ef476f 98%, transparent),
    radial-gradient(circle 3px at 80% 5%, #06d6a0 98%, transparent), radial-gradient(circle 2.5px at 38% 60%, #118ab2 98%, transparent),
    radial-gradient(circle 2.5px at 68% 75%, #ffd23f 98%, transparent);
  background-size: 130px 130px; animation: hs-conf 3.2s linear infinite;
}
@keyframes hs-conf { to { background-position: 26px 130px; } }

/* вход: цепочка путников */
.hs.au { height: 280px; }
.au-line { position: absolute; left: 0; right: 0; bottom: 38px; height: 100px; }
.au-fig { position: absolute; bottom: 0; }
.au-fig.f0 { left: 6%; bottom: 3px; } .au-fig.f1 { left: 27%; bottom: 8px; } .au-fig.f2 { left: 49%; bottom: 0; } .au-fig.f3 { left: 71%; bottom: 7px; }

@media (prefers-reduced-motion: reduce) {
  .sp *, .fire *, .hs *, .hs::after, .stage *, .stage::after { animation: none !important; }
}

/* ---------- сцена горы ---------- */
.stage {
  position: relative; overflow: hidden; width: 100%; height: 100%; isolation: isolate;
  background: var(--sky, linear-gradient(180deg, #2b3a78 0%, #6a56a5 24%, #d9779b 46%, #ffb27a 62%, #ffe0a3 78%, #ffeac0 100%));
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.stage.dragging { cursor: grabbing; }
.stage:focus-visible { outline: 3px solid var(--flag, #ff9f1c); outline-offset: -3px; }
.ly { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.ly > svg { display: block; width: 100%; height: 100%; }
.drift > svg { display: block; width: 100%; height: 100%; }
.drift.d1 { animation: cl-drift 160s linear infinite alternate; }
.drift.d2 { animation: cl-drift 95s linear infinite alternate-reverse; }
@keyframes cl-drift { from { transform: translateX(0); } to { transform: translateX(-340px); } }
.st-sun {
  position: absolute; left: var(--body-x, 80%); top: var(--body-y, 31%); width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; will-change: transform;
  background: var(--body-bg, radial-gradient(circle, #fffbe6 45%, #ffe9a6 100%));
  box-shadow: var(--body-glow, 0 0 0 16px rgba(255, 236, 170, .24), 0 0 0 42px rgba(255, 236, 170, .11));
}
.ly.world .sprites, .ly.world .labels { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.tv {
  position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  overflow: visible; touch-action: pan-y; -webkit-appearance: none; appearance: none;
}
.tv:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 10px; }
.tv.off { visibility: hidden; }
.tv.off .sp, .tv.off .sp * { animation-play-state: paused !important; }
.tv.calm .sp, .tv.calm .sp * { animation: none !important; }
.tv .sp { width: 100%; height: 100%; }
.tv .ring {
  position: absolute; left: 50%; bottom: -2%; width: 150%; height: 20%; transform: translateX(-50%);
  border-radius: 50%; background: rgba(255, 207, 102, .6); animation: ring-p 1.8s ease-in-out infinite;
}
.tv.grp .ring { background: rgba(18, 160, 154, .45); animation: none; }
@keyframes ring-p { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(.92); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
.tv .you {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 2;
  background: #ff9f1c; color: #3a2108; font: 800 11px/1 var(--font, sans-serif); padding: 3px 8px; border-radius: 9px;
  box-shadow: 0 2px 0 rgba(58, 33, 8, .25); animation: you-b 1.6s ease-in-out infinite; white-space: nowrap;
}
.tv .you::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-top-color: #ff9f1c; border-bottom: 0; }
@keyframes you-b { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
.tv .badge {
  position: absolute; right: -10px; top: 6%; font-size: 13px; line-height: 1; background: #fff; border-radius: 50%;
  padding: 3px; box-shadow: 0 1px 4px rgba(20, 16, 52, .35); z-index: 2;
}
.lbl {
  position: absolute; transform: translateX(-50%); z-index: 900; max-width: 116px; overflow: hidden; text-overflow: ellipsis;
  font: 700 11px/1 var(--font, sans-serif); color: #fff; background: rgba(24, 20, 60, .64);
  padding: 3px 7px; border-radius: 9px; white-space: nowrap; pointer-events: none;
}
.lbl.me { background: #ff9f1c; color: #3a2108; }
.lbl.grp { background: rgba(14, 130, 125, .9); }
.fire-w { position: absolute; pointer-events: none; }
.fire-w.off { visibility: hidden; }
.confetti { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 600; }
.confetti i { position: absolute; width: 6px; height: 9px; border-radius: 1px; animation: conf-fall linear infinite; }
@keyframes conf-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(16px, 250px) rotate(540deg); opacity: .85; } }
.st-snow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s; overflow: hidden; }
.stage.snowy .st-snow { opacity: 1; }
.st-snow i { position: absolute; top: -8px; width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .9; animation: snow linear infinite; }
@keyframes snow { to { transform: translate3d(26px, 560px, 0); } }
.hud {
  position: absolute; left: 10px; top: 10px; z-index: 5; pointer-events: none;
  background: rgba(20, 16, 52, .55); color: #fff; font: 800 13px/1 var(--font, sans-serif); padding: 6px 11px; border-radius: 12px;
}

/* значок «кружок» над персонажем */
.tv .cb {
  position: absolute; left: 76%; top: -14px; width: 26px; height: 26px; border-radius: 50%; z-index: 4; cursor: pointer;
  background: linear-gradient(160deg, #ff7a5c, #e63946); color: #fff; font: 800 16px/26px var(--font, sans-serif); text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(20, 16, 52, .4); animation: cb-pulse 1.7s ease-in-out infinite;
}
.tv .cb b {
  position: absolute; right: -9px; top: -8px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; box-sizing: border-box;
  background: #241c55; color: #fff; font: 800 10px/15px var(--font, sans-serif); box-shadow: 0 0 0 1.5px #fff;
}
.tv .cb::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(255, 90, 79, .7); animation: cb-ring 1.7s ease-out infinite; }
@keyframes cb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes cb-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tv .cb, .tv .cb::before { animation: none; } }

/* день и ночь */
.st-stars, .hs-stars { position: absolute; left: 0; top: 0; width: 100%; height: 58%; pointer-events: none; opacity: var(--stars, 0); transition: opacity 2s; }
.hs-stars { height: 70%; }
.st-stars i, .hs-stars i { position: absolute; border-radius: 50%; background: #fff; animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .95; } 50% { opacity: .35; } }
.st-tint, .hs-night { position: absolute; inset: 0; pointer-events: none; background: var(--tint, transparent); mix-blend-mode: multiply; }
.hs-night { z-index: 0; }
.hs.camp .hs-sun { left: var(--body-x, 80%); }
@media (prefers-reduced-motion: reduce) { .st-stars i, .hs-stars i { animation: none; } }
.ly.fg > svg { filter: brightness(var(--bright, 1)); }

/* ====================== бумажный стиль (html.paper) ====================== */
.paper-deco { display: none; }
html.paper .paper-deco { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 40; }
html.paper .paper-tex { position: absolute; inset: 0; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .28  0 0 0 .35 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>"); }
html.paper .curtain { position: absolute; top: 0; bottom: 0; width: 20px; background: repeating-linear-gradient(90deg, #9b1d2e 0 5px, #c1303f 5px 10px, #7e1423 10px 15px); box-shadow: 0 0 0 2px #2a2140; }
html.paper .curtain.l { left: 0; border-radius: 0 0 18px 0; }
html.paper .curtain.r { right: 0; border-radius: 0 0 0 18px; }
html.paper .valance { position: absolute; left: 0; right: 0; top: 0; height: 20px; border-bottom: 3px solid #2a2140;
  background: radial-gradient(circle at 10px 0, #c1303f 0 12px, transparent 13px) 0 0 / 20px 22px repeat-x, #9b1d2e; }
/* слои-картонки: белая кромка и жёсткая тень */
html.paper .ly.rg > svg, html.paper .ly.fg > svg { filter: drop-shadow(0 -2px 0 #fffdf4) drop-shadow(0 -3.5px 0 rgba(40, 25, 70, .5)) drop-shadow(0 6px 0 rgba(30, 15, 60, .32)); }
html.paper .ly.cl svg { filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 0 rgba(40, 25, 70, .2)); }
html.paper .ly.world:not(.wsp) > svg { filter: drop-shadow(0 -2px 0 #fffdf4) drop-shadow(0 5px 0 rgba(30, 15, 60, .3)); }
/* персонажи — наклейки на картонной подставке */
html.paper .tv > svg { filter: drop-shadow(1px 0 0 #2a2140) drop-shadow(-1px 0 0 #2a2140) drop-shadow(0 1px 0 #2a2140) drop-shadow(0 -1px 0 #2a2140)
  drop-shadow(2.5px 0 0 #fffdf4) drop-shadow(-2.5px 0 0 #fffdf4) drop-shadow(0 2.5px 0 #fffdf4) drop-shadow(0 -2.5px 0 #fffdf4) drop-shadow(4px 5px 0 rgba(30, 15, 60, .38)); }
html.paper .tv::before { content: ""; position: absolute; left: 28%; right: 22%; bottom: -6px; height: 8px; z-index: -1; border: 1.5px solid #2a2140; border-radius: 2px;
  background: linear-gradient(#e0b878, #c79a5a); box-shadow: 3px 4px 0 rgba(30, 15, 60, .35); }
html.paper .lbl { background: #fffdf4; color: #2a2140; border: 2px solid #2a2140; border-radius: 6px; box-shadow: 2px 3px 0 rgba(30, 15, 60, .4); font-weight: 800; }
html.paper .lbl.me { background: #ffd23f; color: #2a2140; }
html.paper .lbl.grp { background: #bfeee9; color: #12403c; }
html.paper .hud { background: #fffdf4; color: #2a2140; border: 2px solid #2a2140; box-shadow: 3px 4px 0 rgba(30, 15, 60, .4); transform: rotate(-1.5deg); }
html.paper .tv .cb { box-shadow: 0 0 0 2px #2a2140, 2px 3px 0 2px rgba(30, 15, 60, .4); }
/* шапка и карточки */
html.paper .hs { border: 2.5px solid #2a2140; box-shadow: 4px 5px 0 rgba(42, 33, 64, .35); }
html.paper .hs-fig svg { filter: drop-shadow(1px 0 0 #2a2140) drop-shadow(-1px 0 0 #2a2140) drop-shadow(0 1px 0 #2a2140) drop-shadow(2.5px 0 0 #fffdf4) drop-shadow(-2.5px 0 0 #fffdf4) drop-shadow(0 -2.5px 0 #fffdf4) drop-shadow(3px 4px 0 rgba(30, 15, 60, .35)); }
html.paper .card { border: 2px solid #2a2140; box-shadow: 4px 5px 0 rgba(42, 33, 64, .3); }
html.paper .btn { border: 2px solid #2a2140; box-shadow: 2px 3px 0 rgba(42, 33, 64, .35); }
html.paper .btn:active { transform: translate(2px, 3px); box-shadow: none; }
html.paper body { background-color: #f3ead3; }
@media (prefers-reduced-motion: reduce) { html.paper .hud { transform: none; } }

/* облачко «пишет в чат» над персонажем */
.tv .say {
  position: absolute; left: 50%; top: -10px; transform: translateX(-50%); z-index: 5; cursor: pointer;
  min-width: 34px; height: 26px; padding: 0 8px; border-radius: 14px; box-sizing: border-box;
  background: #fff; color: #241c55; font: 700 15px/26px var(--font, sans-serif); text-align: center;
  box-shadow: 0 0 0 2px #241c55, 0 3px 8px rgba(20, 16, 52, .35); animation: say-bob 2.2s ease-in-out infinite;
}
.tv .say::after {
  content: ""; position: absolute; left: 50%; bottom: -7px; width: 9px; height: 9px; background: #fff;
  transform: translateX(-50%) rotate(45deg); box-shadow: 2px 2px 0 #241c55;
}
.tv.me .say { top: -30px; }
@keyframes say-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .tv .say { animation: none; } }