*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:#000;
  overflow:hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* fullscreen контейнер */
.scene{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Эталонная сцена 842×1024, масштабируем целиком */
.stage{
  position:absolute;
  left:50%;
  top:50%;
  width:842px;
  height:1024px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}

/* фон */
.bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  user-select:none;
  pointer-events:none;
  z-index:2;
}

/* голова — если твой head.PNG “ложится” идеально поверх background */
.head{
  position:absolute;
  left:0;
  top:0;
  width:842px;
  height:1024px;
  user-select:none;
  pointer-events:none;
  z-index:3;

  /* анимация */
  transform-origin: 50.5% 45.9%;
  animation: headBob 2.4s ease-in-out infinite;
}

@keyframes headBob{
  0%   { transform: rotate(-2deg) translateY(0px); }
  50%  { transform: rotate( 2deg) translateY(2px); }
  100% { transform: rotate(-2deg) translateY(0px); }
}

/* облака: фиксируем в пикселях эталонной сцены */
.window-clouds{
  position:absolute;
  z-index:1;
  left: 665px;
  top: 249px;
  width: 175px;
  height: 230px;
  overflow:hidden;
  border-radius:8px;
}



.clouds-gif{
  width:110%;
  height:110%;
  object-fit:cover;
  transform: translate(-5%, -5%);
  filter: saturate(1.05) contrast(1.05);
}

/* КНОПКИ ВНУТРИ СЦЕНЫ */
.ui-btn{
  position:absolute;
  z-index:4;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action: manipulation;
}

.ui-btn img{
  width: 86px;
  height: 86px;
  display:block;
}

/* координаты кнопок (поставил примерно в левую пустую область — подвинешь если надо) */
.ui-smoke{ left: 40px; top: 320px; }
.ui-eat{   left: 40px; top: 430px; }
.ui-drink{ left: 40px; top: 540px; }

/* легкий feedback */
.ui-btn:active{ transform: scale(0.96); }

/* ====== INTERRUPTS (popup/call/sms/ad) ====== */
.interrupt{
  position:absolute;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  /* без затемнения */
  background: transparent;
  pointer-events:auto;
}

.interrupt.hidden{
  display:none;
}

.interrupt img{
  width:100%;
  height:100%;
  object-fit:cover; /* png по размеру сцены */
  user-select:none;
  -webkit-user-drag:none;
}

/* ===== LockScreen overlay ===== */
.lockscreen{
  position: absolute;
  inset: 0;
  z-index: 9999;            /* выше всего */
  touch-action: none;       /* чтобы свайп не скроллил страницу */
  user-select: none;
  cursor: grab;
  transform: translateY(0);
  transition: transform 260ms ease;
}

.lockscreen img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* важно: чтобы PNG ровно лег как фон */
  display: block;
  pointer-events: none;     /* чтобы клики шли на контейнер */
}

.lockscreen.is-dragging{
  transition: none;
  cursor: grabbing;
}

.lockscreen.is-hidden{
  display: none;
}