/* Main screen layouts for landscape phones, tablets and desktop (docs/LAYOUT.md); phone portrait is styles.css, unchanged except the 44 px language field. */
/* 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%); }

/* ---------- landscape: header + language left, SIM / Dash / Manager side by side ---------- */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (min-width: 900px) {
  .wrap {
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .game-card {
    max-width: 980px;
    display: grid;
    grid-template-columns: 300px repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto auto;
    column-gap: 12px;
    padding: 12px;
  }
  .game-head { grid-column: 1; grid-row: 1; border-bottom: 0; align-self: center; }
  .play-area { display: contents; }
  .lang-picker { grid-column: 1; grid-row: 2; margin: 0 1rem; }
  .note { grid-column: 1; grid-row: 3; margin: 0.4rem 1rem 0; }
  .brand { grid-column: 1; grid-row: 4; }
  .app-btn { grid-row: 1 / 5; flex-direction: column; justify-content: center; text-align: center; gap: 0.75rem; margin: 0; position: relative; }
  .app-btn .txt { flex: none; }
  #sim-link { grid-column: 2; }
  [data-testid='dash-btn'] { grid-column: 3; }
  [data-testid='manager-btn'] { grid-column: 4; }
  .app-btn .chev { display: none; }
  .app-btn .desc { font-size: 0.8rem; white-space: normal; }
  .app-btn .soon { position: absolute; bottom: 0.9rem; left: 50%; transform: translateX(-50%); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .game-card { height: calc(100vh - 16px); }
  @supports (height: 100dvh) {
    .game-card { height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); }
  }
}
@media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) {
  .wrap { padding: 24px; }
  .game-card { min-height: 520px; grid-template-columns: 340px repeat(3, minmax(0, 1fr)); padding: 16px; }
  .head-logo { width: 6rem; }
  .game-title { font-size: 1.5rem; line-height: 1.8rem; }
  .game-sub { font-size: 1rem; }
  .app-btn .icon { transform: scale(1.4); margin: 0.5rem; }
  .app-btn .name { font-size: 1.6rem; line-height: 2rem; }
  .app-btn .desc { font-size: 0.95rem; }
  .lang-select { min-height: 52px; font-size: 1.1rem; }
}

/* ---------- tablet portrait: a wider single column, bigger type and buttons ---------- */
@media (orientation: portrait) and (min-width: 700px) {
  .wrap { padding: 32px; }
  .game-card { max-width: 680px; 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; }
  .game-sub { font-size: 1.05rem; margin-top: 0.4rem; }
  .play-area { padding: 1.75rem 1.5rem; gap: 1.1rem; margin: 0.75rem 0; }
  .app-btn { min-height: 128px; 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; }
  .note { margin-left: 7.6rem; font-size: 0.9rem; }
  .brand { font-size: 0.85rem; }
}