/* Главная: сцена посёлка. Координаты, слои и keyframes — из утверждённого прототипа (template.html), не менять. */
main{max-width:1400px;margin:0 auto;padding:0 12px 28px}
.scene-wrap{border-radius:22px;overflow:hidden;box-shadow:0 2px 0 rgba(58,42,30,.08),0 18px 40px -22px rgba(58,42,30,.45)}
.scene{position:relative;width:100%;aspect-ratio:1392/752;background:#E9E4DA;container-type:inline-size}
.scene img{display:block;user-select:none;-webkit-user-drag:none}
.scene .bg,.scene .bg img{position:absolute;inset:0;width:100%;height:100%}
.scene .bg img{object-fit:cover}
.lay{position:absolute;pointer-events:none}
.lay picture{display:block}
.lay img{width:100%;height:auto}

/* characters (positions in % of the 1392x752 scene) */
.ruk{left:40.6%;top:32.4%;width:17.1%;transform-origin:50% 100%;z-index:6}
.ruk img{filter:drop-shadow(0 .7cqw .5cqw rgba(60,30,10,.35))}
.ruk.in{animation:hopin .9s cubic-bezier(.3,1.5,.5,1) both}
.ruk .body{transform-origin:50% 100%;animation:rock 3.2s ease-in-out .9s infinite}
@keyframes hopin{0%{transform:translateY(-30%) scale(.6);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes rock{0%,100%{transform:rotate(0)}25%{transform:rotate(-2.5deg)}50%{transform:rotate(0) translateY(-1.5%)}75%{transform:rotate(2.5deg)}}

.sova{left:51.4%;top:5.6%;width:7%;z-index:3;transform-origin:50% 100%;animation:tilt 5s ease-in-out infinite}
@keyframes tilt{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-6deg)}86%{transform:rotate(4deg)}}

.marusia{left:59.4%;top:38.6%;width:6.1%;z-index:4;transform-origin:50% 100%;animation:sway 2.4s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2%)}}

.shmel{left:20.5%;top:7%;width:8.6%;z-index:7;animation:fly 7s ease-in-out infinite}
.shmel .body{animation:buzz .9s ease-in-out infinite alternate}
@keyframes fly{
  0%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(18%,-6%) rotate(2deg)}
  50%{transform:translate(36%,0) rotate(0)}
  75%{transform:translate(18%,6%) rotate(-2deg)}
  100%{transform:translate(0,0) rotate(0)}}
@keyframes buzz{from{transform:translateY(0)}to{transform:translateY(-5%)}}

.playhouse{left:60.85%;top:67.4%;width:14%;z-index:3}
.vorona{left:73.8%;top:80.1%;width:8.3%;z-index:5;transform-origin:50% 100%;animation:hop 2.8s ease-in-out infinite}
@keyframes hop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-10%) rotate(-3deg)}80%{transform:translateY(0)}86%{transform:translateY(-5%) rotate(2deg)}92%{transform:translateY(0)}}
.nota{left:6.9%;top:65.2%;width:7.7%;z-index:5;transform-origin:50% 100%;animation:bob 1.9s ease-in-out infinite}
.kontrabas{left:28.7%;top:65.2%;width:7.4%;z-index:5;transform-origin:50% 100%;animation:bob 1.9s ease-in-out .5s infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-4%) rotate(1.5deg)}}

/* TV screen */
.tv{position:absolute;left:13.5%;top:57.2%;width:16.2%;z-index:10}
.tv .frame{position:relative;background:#EEE6D6 url('https://s3.twcstorage.ru/rukavichkino-site/assets/img/knit-cream.webp') 0 0/4.5cqw auto repeat;border-radius:1.8cqw;padding:1.4cqw;box-shadow:inset 0 0 .5cqw rgba(90,60,30,.45),0 .6cqw 1cqw -.4cqw rgba(40,20,5,.55)}
.tv .frame::before{content:"";position:absolute;inset:.7cqw;border:.22cqw dashed #C9962E;border-radius:1.1cqw;pointer-events:none}
.tv video{position:relative;display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.7cqw;background:#000;box-shadow:0 0 0 .2cqw #C9962E}
.tv .posts{position:absolute;left:14%;right:14%;top:100%;height:3cqw;display:flex;justify-content:space-between}
.tv .posts i{display:block;width:1.1cqw;height:100%;background:#E3A72F url('https://s3.twcstorage.ru/rukavichkino-site/assets/img/knit-cream.webp') 0 0/3cqw auto;border-radius:0 0 .5cqw .5cqw;box-shadow:inset 0 0 .3cqw rgba(90,60,30,.4)}
.tv button{position:absolute;right:.9cqw;bottom:.9cqw;font:800 max(11px,1cqw)/1 "Nunito",sans-serif;background:rgba(255,253,248,.92);color:#3A2A1E;border:0;border-radius:99px;padding:.45cqw .8cqw;cursor:pointer;min-height:24px}

/* effects */
.smoke{position:absolute;left:75.2%;top:17.5%;width:2.4%;height:8%;z-index:2}
.smoke span{position:absolute;bottom:0;left:30%;width:1.4cqw;height:1.4cqw;border-radius:50%;background:rgba(255,255,255,.85);filter:blur(.15cqw);animation:puff 4.5s ease-out infinite;opacity:0}
.smoke span:nth-child(2){animation-delay:1.5s}.smoke span:nth-child(3){animation-delay:3s}
@keyframes puff{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.85}100%{transform:translate(1.2cqw,-7cqw) scale(1.8);opacity:0}}
.glow{position:absolute;width:4cqw;height:4cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,214,120,.75),rgba(255,214,120,0) 65%);transform:translate(-50%,-50%);z-index:3;animation:flick 2.6s ease-in-out infinite;pointer-events:none}
@keyframes flick{0%,100%{opacity:.55}40%{opacity:.95}60%{opacity:.7}}

/* hotspots + tags */
.spot{position:absolute;z-index:8;border-radius:2cqw;text-decoration:none}
.spot:hover,.spot:focus-visible,.spot.on{background:rgba(255,248,220,.18);box-shadow:0 0 0 .3cqw rgba(255,240,190,.75)}
.tag{position:absolute;z-index:9;transform:translate(-50%,-100%);background:var(--paper);color:var(--ink);font-weight:800;font-size:max(11px,1.25cqw);line-height:1.1;padding:.45cqw .95cqw;border-radius:99px;border:.18cqw dashed var(--tag-line);white-space:nowrap;pointer-events:none;transition:transform .2s}
.tag.on{transform:translate(-50%,-100%) scale(1.12)}

/* speech bubble */
.bubble{position:absolute;left:37.5%;top:76%;width:21%;z-index:9;pointer-events:none;background:var(--paper);color:var(--ink);border-radius:1.6cqw;padding:1cqw 1.2cqw;font-weight:800;font-size:max(11px,1.25cqw);line-height:1.25;box-shadow:0 .4cqw 1.2cqw -.4cqw rgba(40,20,5,.45)}
.bubble::after{content:"";position:absolute;top:-1.4cqw;left:52%;border:1cqw solid transparent;border-bottom:1.6cqw solid var(--paper);border-top:0}
.bubble small{display:block;font-weight:600;color:var(--ink-soft);font-size:.85em;margin-top:.35em}

/* Rukavichkina's card under the scene (phones only) */
.welcome{display:none;align-items:center;gap:12px;margin-top:14px;padding:12px 26px 12px 14px;border-radius:48px;background:var(--paper);border:2px dashed var(--tag-line);font-weight:800;font-size:.95rem;line-height:1.3}
.welcome picture{flex:none}
.welcome img{display:block;width:62px;height:auto}
.welcome p{margin:0}
.welcome small{display:block;margin-top:4px;font-weight:600;color:var(--ink-soft);font-size:.88rem}

/* nav under the scene */
nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
nav a{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px 8px 8px;border-radius:99px;background:var(--tag);border:2px dashed var(--tag-line);text-decoration:none;font-weight:800;font-size:1rem;transition:transform .15s,border-color .15s}
nav a img{display:block;width:38px;height:38px;object-fit:contain;border-radius:50%;background:var(--paper)}
nav a span small{display:block;font-weight:600;color:var(--ink-soft);font-size:.82rem}
nav a:hover,nav a.on{transform:translateY(-2px);border-color:var(--wool-red)}

@media (max-width:700px){
  .bubble,.tag,.tv button{display:none}
  .scene-wrap{border-radius:14px}
  .welcome{display:flex}
  nav a{flex:1 1 100%}
}