/* Дачный рубеж v3 — стили (мобильная адаптация).
   Сцена занимает 100% viewport (100dvh), канвас заполняет её.
   safe-area применяется как отступ сцены (не как «грязные» пустые поля).
   Запрет масштабирования/выделения — ТОЛЬКО для игровой области (canvas). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0f1a12;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  font-family: 'Georgia', serif;
}

/* Сцена: занимает ВСЮ доступную площадь, safe-area — внутренним отступом. */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;      /* fallback для старых браузеров */
  height: 100dvh;     /* динамический viewport (телефон: адресная строка скрывается) */
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(circle at 50% 40%, #24432c 0%, #0e1a10 80%);
}

/* Канвас заполняет сцену 1:1 с логическим миром (без полос/растяжения). */
.game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  /* Запрет случайного масштабирования/скролла/выделения ТОЛЬКО на игровом канвасе */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---- Оверлей «поверните телефон» (Portrait) ---- */
#rotate-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vh;
  background: radial-gradient(circle at 50% 35%, #2f5c36 0%, #0e1a10 85%);
  color: #fff4d0;
  text-align: center;
  padding: 5vh 6vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
body.portrait #rotate-overlay { opacity: 1; pointer-events: auto; }

.rot-phone {
  width: clamp(64px, 20vh, 120px);
  height: clamp(118px, 34vh, 200px);
  position: relative;
}
.rot-phone-frame {
  position: absolute;
  inset: 0;
  border: clamp(5px, 1.6vh, 9px) solid #e9e2c8;
  border-radius: clamp(14px, 4.5vh, 26px);
  background: #23443a;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.rot-phone-notch {
  position: absolute;
  top: -clamp(3px, 1vh, 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: clamp(4px, 1.2vh, 6px);
  background: #0e1a12;
  border-radius: 4px;
}
.rot-phone-screen {
  position: absolute;
  inset: clamp(5px,1.5vh,8px);
  border-radius: 8px;
  background: linear-gradient(180deg, #4f9a4a, #2f5c36 60%, #1e3326);
}

/*** Анимация поворота телефона ***/
.rot-phone { animation: rotLoop 2.2s ease-in-out infinite; }
@keyframes rotLoop {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(0deg); }
  70% { transform: rotate(90deg); }
}

.rot-title {
  font-size: clamp(20px, 6vh, 40px);
  font-weight: bold;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.rot-text {
  font-size: clamp(13px, 3.6vh, 22px);
  color: #d8e6b8;
}