/* Страница игры «Опааа, у меня тоже есть птички».

   Вёрстки тут почти нет: всё рисует канвас. Задача стилей — отдать ему весь
   экран, убрать резинку прокрутки на айпаде и не дать браузеру перехватывать
   тапы жестами масштабирования. */

html, body.ptichki {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #12060a;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body.ptichki {
  /* вырез и «дом»-полоска на айфоне не должны наезжать на игру */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Кнопка «назад» — как на /shalosti/ и /nastoiki/: таблетка с жёлтой обводкой.
   Здесь она поверх канваса и уезжает, как только игра началась. */
.pback {
  position: fixed;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border: 2px solid #ffd54a;
  border-radius: 999px;
  background: rgba(12, 3, 5, .74);
  color: #fff;
  font: 600 15px/1 Oswald, "Arial Narrow", system-ui, sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: opacity .25s;
}

.pback:hover { background: rgba(192, 24, 42, .8); }
.pback.hide { opacity: 0; pointer-events: none; }

.pfail {
  position: fixed;
  inset: auto 0 20px;
  text-align: center;
  color: #ffb0b8;
  font: 600 16px/1.4 system-ui, sans-serif;
}

/* Полноэкранный режим на телефоне: строка браузера съедает четверть экрана,
   поэтому предлагаем убрать её одним тапом. */
.pfull {
  position: fixed;
  right: 12px;
  top: 10px;
  z-index: 5;
  padding: 8px 14px;
  border: 2px solid rgba(255, 213, 74, .6);
  border-radius: 999px;
  background: rgba(12, 3, 5, .74);
  color: #ffd54a;
  font: 600 15px/1 Oswald, system-ui, sans-serif;
  cursor: pointer;
}

@media (min-width: 900px) { .pfull { display: none; } }