/* Spooky Escape: раскладка для широкого экрана (16:9 и шире).
   Уровни нарисованы вертикально (720×1000), поэтому на широком экране панели уходят по бокам,
   а уровень получает всю высоту. Ширину колонок (--side) и класс side-hud ставит main.js (layout).
   На вертикальном экране (телефон) раскладка прежняя. */

#menu { overscroll-behavior: contain; }

/* левая колонка: ☰ ▦ ↻, название уровня, пилы */
#app.side-hud #hud-top {
  top: 0; bottom: 0; left: auto; right: auto; inset-inline-start: 0;
  width: var(--side); height: auto;
  display: grid; grid-template-columns: repeat(3, 44px); grid-auto-rows: min-content;
  gap: 12px 8px; align-content: start; justify-content: start;
  padding: calc(12px + env(safe-area-inset-top)) 10px 10px;
  padding-inline-start: max(12px, env(safe-area-inset-left));
  background: none;
}
#app.side-hud #btn-menu { grid-column: 1; grid-row: 1; }
#app.side-hud #btn-levels { grid-column: 2; grid-row: 1; }
#app.side-hud #btn-restart { grid-column: 3; grid-row: 1; }
#app.side-hud #hud-top .level-name { grid-column: 1 / -1; grid-row: 2; }
#app.side-hud #hud-top .tools { grid-column: 1 / -1; grid-row: 3; justify-self: start; flex-wrap: wrap; }

/* правая колонка: «?» и «Вперёд!» внизу */
#app.side-hud #hud-bottom {
  top: 0; bottom: 0; left: auto; right: auto; inset-inline-end: 0;
  width: var(--side); height: auto;
  flex-direction: column; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
  background: none;
}
#app.side-hud #btn-go { max-width: 100%; padding: 10px 14px; white-space: normal; line-height: 1.1; }
#app.side-hud .hint-btn { position: static; }

/* окно обучения — в правой колонке сверху, не над уровнем */
#app.side-hud .tut.top, #app.side-hud .tut.bottom {
  top: calc(10px + env(safe-area-inset-top)); bottom: auto;
  left: auto; right: auto; inset-inline-end: 8px; transform: none;
  width: calc(var(--side) - 16px); max-width: none; padding: 8px 10px 9px;
}
#app.side-hud .tut-text { font-size: 17px; }

@media (min-aspect-ratio: 6/5) {
  /* меню в две колонки, чтобы помещалось по высоте */
  .menu-inner {
    max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense;
    column-gap: 32px; align-items: center; padding-top: calc(14px + env(safe-area-inset-top));
  }
  .menu-inner > .game-title, .menu-inner > .tagline, .menu-inner > #menu-art, .menu-inner > .lead { grid-column: 1; }
  .menu-inner > .lang-switch, .menu-inner > #btn-play, .menu-inner > .menu-levels,
  .menu-inner > .settings, .menu-inner > .credits { grid-column: 2; }
  .menu-inner > #btn-play { justify-self: center; }
  .menu-inner > .settings { margin-top: 14px; }
  .menu-inner > .credits { margin-top: 14px; }
}

/* низкий широкий экран (640×360, телефон боком) */
@media (min-aspect-ratio: 6/5) and (max-height: 430px) {
  .game-title { font-size: 36px; }
  .tagline { font-size: 15px; }
  #menu-art { width: 220px; }
  .lead { font-size: 15px; margin-bottom: 6px; }
  #app.side-hud .level-name b { font-size: 17px; }
  #app.side-hud .tools canvas { width: 38px; height: 25px; }
  #app.side-hud #btn-go { font-size: 20px; min-height: 48px; }
  .card { padding: 14px 16px 12px; }
  .card h2 { font-size: 26px; }
  .stars { font-size: 34px; }
  .card p { margin: 4px 0 10px; }
}