/* SIM menu layouts for landscape phones, tablets and desktop (docs/LAYOUT.md); phone portrait is styles.css, unchanged except the 44 px tap targets below. */
/* Classes (same numbers as shared/layout.js):
   phone landscape          = landscape and height <= 500px
   tablet portrait          = portrait and width >= 700px
   tablet landscape/desktop = landscape and height > 500px and width >= 900px
   anything else (e.g. 800x600) = the phone column from styles.css                                  */

/* ---------- every layout: 100dvh, safe areas on all sides, tap targets >= 44 px ---------- */
.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; }
}
/* Fields: 42 -> 44 px tall (the only visible change in phone portrait). */
.sport-btn, .lang-select, .topic-input, .topic-check { min-height: 44px; }
/* Small buttons and links keep their look; an invisible 44 px hit area is centred on them. */
.topic-info, .main-link, .brand a, .topic-demo { position: relative; }
.topic-info::after, .topic-clear::after, .main-link::after, .brand a::after, .topic-demo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ---------- landscape (phone + tablet/desktop): fields left, game buttons right, no scrolling ---------- */
@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));
    align-items: stretch;
  }
  .game-card {
    max-width: none;
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1fr);
    /* 1 header, 2 total, 3 sport, 4 topic, 5 match event, 6 language, 7 style (demo only), 8 brand.
       Spare height goes under the total (row 2) and above the brand (row 8). The six game buttons do not
       follow these rows: they are three equal rows of two over the full height (see .game-btn below). */
    grid-template-rows: auto minmax(min-content, 1fr) auto auto auto auto auto minmax(min-content, 1fr); /* min-content: the total bar never shrinks under the Sport row */
    column-gap: 12px;
    padding: 0 12px 0 0;
    position: relative;
  }
  /* The stadium play area behind the game buttons (the nav itself is display: contents). */
  .game-card::before {
    content: '';
    grid-column: 2 / 4;
    grid-row: 1 / 9;
    margin: 10px 0;
    border: 2px solid var(--zinc-700);
    border-radius: 1rem;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--zinc-950) url('./assets/play_area.svg') center / cover no-repeat;
  }
  .play-area { display: contents; }
  .play-area::before { display: none; }
  .game-head, .stats, .play-area > .sport-picker, .topic-box, .brand { grid-column: 1; }
  .game-head { grid-row: 1; padding: 0.5rem 0.75rem 0.25rem; text-align: left; border-bottom: 0; }
  .title-row { justify-content: flex-start; }
  .main-link { margin: 0 0 2px -0.25rem; }
  .stats { grid-row: 2; align-self: start; position: relative; z-index: 1; flex-direction: row; gap: 0.5rem; min-height: 0; padding: 0.35rem 0.75rem; border-radius: 0.75rem; margin: 0 0.5rem 0.25rem; justify-content: flex-start; }
  .stats .stat-value { font-size: 1.1rem; }
  .play-area > .sport-picker, .topic-box { margin: 0.3rem 0.75rem 0; }
  .play-area > .sport-picker:first-child { grid-row: 3; }
  .topic-box { grid-row: 4; align-self: start; }
  .topic-box.match-box { grid-row: 5; }
  .lang-picker { grid-row: 6; }
  .skin-picker { grid-row: 7; }
  .brand { grid-row: 8; align-self: end; text-align: left; padding: 0 0 0 0.75rem; margin: 0; }
  .brand a { display: inline-block; padding: 14px 0 15px; } /* full 44 px tap height at the bottom edge */
  /* Game buttons: three equal rows of two inside the play area (22 px inset top/bottom, 10 px between rows).
     Each button spans the full height and is a third of it tall; rows 2 and 3 are moved down with
     `translate` (its % is the button's own height), which leaves `transform` free for the :active press. */
  .game-btn { margin: 22px 0 0; z-index: 1; grid-row: 1 / 9; align-self: start; min-height: 0; height: calc((100% - 64px) / 3); }
  .game-btn:nth-of-type(odd) { grid-column: 2; margin-left: 12px; }
  .game-btn:nth-of-type(even) { grid-column: 3; margin-right: 12px; }
  .game-btn:nth-of-type(3), .game-btn:nth-of-type(4) { translate: 0 calc(100% + 10px); }
  .game-btn:nth-of-type(5), .game-btn:nth-of-type(6) { translate: 0 calc(200% + 20px); }
  .topic-help { right: auto; width: calc(100vw - 48px); max-width: 560px; }
}

/* phone landscape: compact header, smaller tiles */
@media (orientation: landscape) and (max-height: 500px) {
  .game-card { min-height: calc(100vh - 16px); } /* min: the card grows when the Match moments open */
  @supports (height: 100dvh) {
    .game-card { min-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); }
  }
  .head-logo { width: 3.6rem; }
  .game-title { font-size: 1rem; line-height: 1.2rem; white-space: nowrap; }
  .game-title .tl { display: inline; } /* one line: "DynamicStadiums SIM" */
  .game-sub { display: none; }
  .game-btn { padding: 0.5rem 0.75rem; gap: 0.6rem; }
  .game-btn .icon { width: 2.4rem; height: 2.4rem; }
  .game-btn .name { font-size: 1.1rem; line-height: 1.35rem; }
  .play-area > .sport-picker, .topic-box { margin-top: 0.25rem; }
  .sport-btn { padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .sport-icon { width: 1.5rem; height: 1.5rem; }
  /* Match: the confirmed card, moment buttons and demo list use the full field column (no caption indent). */
  .match-confirmed, .moment-box, .event-list { margin-left: 0; }
}
/* Very short landscape phones (e.g. 844x390, 667x375 with the Style row): tighter rows. The brand link
   keeps its invisible 44 px hit area (::after above), so its padding can shrink. */
@media (orientation: landscape) and (max-height: 400px) {
  .game-card { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); }
  /* Worst case at 844x390: ‹ Main + Topic password row + Match event row + Style row (demo) without scrolling. */
  .game-head { padding-top: 3px; padding-bottom: 1px; }
  .main-link { margin-bottom: 0; }
  .head-logo { width: 3rem; }
  .stats { margin-bottom: 1px; }
  .play-area > .sport-picker, .topic-box { margin-top: 1px; }
  .topic-box { gap: 2px; }
  .brand { margin-bottom: 3px; } /* keeps the link's 44 px hit area inside the window */
  .brand a { padding: 4px 0 6px; }
  .stats { padding: 0.2rem 0.75rem; }
}

/* tablet landscape / desktop: same split, bigger, capped width, centred */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) {
  .wrap { align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
  .game-card { width: 100%; max-width: 1080px; min-height: min(640px, calc(100vh - 48px)); grid-template-columns: 390px minmax(0, 1fr) minmax(0, 1fr); padding: 12px 16px 12px 4px; }
  .game-head { padding: 1rem 1rem 0.5rem; }
  .head-logo { width: 5.5rem; }
  .game-title { font-size: 1.5rem; line-height: 1.8rem; }
  .game-sub { font-size: 1rem; }
  .stats { padding: 0.6rem 1rem; }
  .stats .stat-value { font-size: 1.4rem; }
  .sport-cap { font-size: 0.8rem; }
  .sport-btn, .lang-select, .topic-input { font-size: 1.1rem; min-height: 52px; }
  .topic-check { min-height: 52px; width: 3.25rem; }
  .play-area > .sport-picker, .topic-box { margin: 0.6rem 1rem 0; }
  .topic-help { top: calc(52px + 0.3rem); }
  .brand { font-size: 0.8rem; padding-left: 1rem; }
  .game-btn { flex-direction: column; justify-content: center; text-align: center; gap: 0.75rem; }
  .game-btn .txt { flex: none; }
  .game-btn .icon { width: 4rem; height: 4rem; }
  .game-btn .name { font-size: 1.35rem; }
  .game-btn .desc { font-size: 1rem; }
  .game-btn .chev { display: none; }
}
@supports (height: 100dvh) {
  @media (orientation: landscape) and (min-width: 900px) and (min-height: 501px) {
    .game-card { min-height: min(640px, calc(100dvh - 48px)); }
  }
}

/* tablet portrait: a wider single column (up to 680 px), bigger type, games as 2-column tiles */
@media (orientation: portrait) and (min-width: 700px) {
  .wrap { padding: max(32px, env(safe-area-inset-top)) max(32px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left)); }
  .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; }
  .main-link { font-size: 0.95rem; }
  .stats { min-height: 88px; }
  .stats .stat-label { font-size: 12px; }
  .stats .stat-value { font-size: 1.75rem; }
  .play-area { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 1.75rem 1.5rem; margin: 0.75rem 0; }
  .play-area > .sport-picker, .play-area > .topic-box { grid-column: 1 / -1; }
  .sport-cap { font-size: 0.85rem; }
  .sport-picker > .sport-cap { flex-basis: 7rem; }
  .topic-cap-wrap { flex-basis: 7rem; }
  .topic-lock { padding-left: 7.6rem; }
  .sport-btn, .lang-select, .topic-input { font-size: 1.2rem; min-height: 56px; }
  .topic-check { min-height: 56px; width: 3.5rem; font-size: 1.4rem; }
  .topic-help { top: calc(56px + 0.3rem); font-size: 1rem; }
  .sport-icon { width: 2rem; height: 2rem; }
  .sport-list li { font-size: 1.05rem; padding: 0.7rem 0.75rem; }
  .game-btn { flex-direction: column; text-align: center; min-height: 180px; justify-content: center; gap: 0.9rem; }
  .game-btn .txt { flex: none; }
  .game-btn .icon { width: 4.5rem; height: 4.5rem; }
  .game-btn .name { font-size: 1.5rem; line-height: 1.9rem; }
  .game-btn .desc { font-size: 1.05rem; line-height: 1.4rem; }
  .game-btn .chev { display: none; }
  .brand { font-size: 0.85rem; }
}