/* Main screen layouts for landscape phones, tablets and desktop (docs/LAYOUT.md); phone portrait is styles.css, unchanged except the 44 px language field. Settings / Info icons sit in their own row (US-MN1). */
/* The app buttons (SIMULATOR, MANAGER, HOST, PLAYER, VENDOR) always stack in one column, at every size and orientation (Micha 23 Oct 2026, 21:55).
   Same classes as shared/layout.js and the SIM menu: phone landscape = landscape and height <= 500px;
   tablet portrait = portrait and width >= 700px; tablet landscape/desktop = landscape, height > 500px, width >= 900px. */
.wrap {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
@supports (height: 100dvh) {
  .wrap { min-height: 100dvh; }
}
.lang-select { min-height: 44px; }
.brand a { position: relative; }
.brand a::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }

/* ---------- phone landscape: same single column, a little wider and more compact; the page scrolls vertically ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .wrap { align-items: flex-start; padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .game-card { max-width: 480px; }
  .game-head { padding: 0.5rem 1rem; }
  .play-area { padding: 0.875rem; gap: 0.625rem; }
  .app-btn { padding: 0.7rem 0.875rem; }
  .pop-panel { top: calc(8px + 44px + 4px); right: 8px; }
}

/* ---------- tablet landscape / desktop: centred single column, bigger type ---------- */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) {
  .wrap { padding: 24px; align-items: flex-start; }
  .game-card { max-width: 520px; padding-bottom: 1rem; }
  .game-head { padding: 1rem 1.25rem; }
  .head-logo { width: 6rem; }
  .game-title { font-size: 1.5rem; line-height: 1.8rem; }
  .play-area { padding: 1.5rem 1.25rem; gap: 1rem; }
  .app-btn .name { font-size: 1.6rem; line-height: 2rem; }
  .app-btn .desc { font-size: 0.95rem; line-height: 1.3rem; }
  .lang-select { min-height: 52px; font-size: 1.1rem; }
  .pop-panel { top: calc(16px + 44px + 4px); right: 16px; }
}

/* ---------- tablet portrait: a wider single column, bigger type and buttons ---------- */
@media (orientation: portrait) and (min-width: 700px) {
  .wrap { padding: 32px; align-items: flex-start; }
  .game-card { max-width: 560px; padding-bottom: 1rem; }
  .game-head { padding: 1.25rem 1.5rem 1rem; }
  .head-logo { width: 6.5rem; }
  .game-title { font-size: 1.75rem; line-height: 2.1rem; }
  .play-area { padding: 1.75rem 1.5rem; gap: 1.1rem; margin: 0.75rem 0; }
  .app-btn { min-height: 112px; padding: 1.25rem 1.25rem; gap: 1.1rem; }
  .app-btn .icon { width: 4rem; height: 4rem; }
  .icon.sim { gap: 0.35rem; padding: 0.4rem; }
  .app-btn .name { font-size: 1.75rem; line-height: 2.1rem; }
  .app-btn .desc { font-size: 1.05rem; line-height: 1.4rem; }
  .soon { font-size: 0.8rem; }
  .cap { font-size: 0.85rem; flex-basis: 7rem; }
  .lang-select { min-height: 56px; font-size: 1.2rem; }
  .top-tools { padding: 0.5rem 0.75rem 0; }
  .pop-panel { top: 3.6rem; right: 0.75rem; width: 24rem; }
  .pop-panel .note, .pop-hint { font-size: 0.9rem; line-height: 1.3rem; }
  .brand { font-size: 0.85rem; }
}