/* 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. Setup fields live in the Setup panel (gear, hub-setup.js). */
/* 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 gear (Setup), 2 header, 3 total, 4 brand; the setup fields are in the Setup panel (hub-setup.js).
       Spare height goes under the total (row 3). 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 auto minmax(min-content, 1fr) auto;
    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 / 5;
    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; }
  .top-tools, .game-head, .stats, .brand { grid-column: 1; }
  .top-tools { grid-row: 1; padding: 4px 0 0; }
  .game-head { grid-row: 2; 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: 3; 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; }
  /* Setup panel: over the left column, under the gear (the games on the right stay visible and tappable). */
  .setup-panel { top: 52px; right: auto; width: var(--setup-w, 330px); margin-left: 6px; gap: 0.5rem; padding: 0.6rem 0.75rem 0.75rem; }
  .brand { grid-row: 4; 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 / 5; 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 Game Simulator" */
  .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; }
  .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); }
  .game-head { padding-top: 3px; padding-bottom: 1px; }
  .main-link { margin-bottom: 0; }
  .head-logo { width: 3rem; }
  .stats { margin-bottom: 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; }
}

/* Phone landscape since "Style for all" (deep test 22 Oct 2026): Style is always shown, so Language and Style share one row
   (captions above, half width each) and the brand link's 44 px hit area is no longer under the Style picker. The field
   column grows with the width (300-380 px; the left column is split in two halves for that row), the Topic password row
   uses the full column, and the Event field drops the room kept for its × while it is empty, so "Password" and the start
   of the Event hint ("Home v Away, …") fit at 667x375, 844x390 and 874x402 (iPhone 16 Pro). */
@media (orientation: landscape) and (max-height: 500px) {
  .game-card {
    --fields: clamp(300px, 46vw, 380px);
    grid-template-columns: calc((var(--fields) - 12px) / 2) calc((var(--fields) - 12px) / 2) minmax(0, 1fr) minmax(0, 1fr);
  }
  .game-card::before { grid-column: 3 / 5; }
  .top-tools, .game-head, .stats, .brand { grid-column: 1 / 3; }
  /* Setup panel: as wide as the field column; Language and Style share one row (captions above, half width each). */
  .setup-panel { --setup-w: calc(var(--fields) - 6px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .setup-panel > * { grid-column: 1 / -1; }
  .game-btn:nth-of-type(odd) { grid-column: 3; }
  .game-btn:nth-of-type(even) { grid-column: 4; }
  .setup-panel > .lang-picker, .setup-panel > .skin-picker { flex-direction: column; align-items: stretch; gap: 0; min-width: 0; }
  .setup-panel > .lang-picker { grid-column: 1; }
  .setup-panel > .skin-picker { grid-column: 2; }
  .setup-panel > .lang-picker:has(+ .skin-picker[hidden]) { grid-column: 1 / -1; }
  .lang-picker > .sport-cap, .skin-picker > .sport-cap { flex: none; font-size: 0.6rem; line-height: 0.7rem; pointer-events: none; }
  /* the captions sit right under the Event row: let taps on them fall through to the Event i's 44 px hit area */
  .setup-panel > .lang-picker, .setup-panel > .skin-picker { pointer-events: none; }
  .setup-panel > .lang-picker > :not(.sport-cap), .setup-panel > .skin-picker > :not(.sport-cap) { pointer-events: auto; }
  .skin-picker .sport-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .skin-picker .skin-swatch { width: 1.4rem; height: 1.4rem; }
  .skin-picker .sport-btn, .lang-picker .sport-btn, .lang-picker select { font-size: 0.9rem; }
  .skin-picker > .sport-list { left: auto; right: 0; min-width: calc(var(--fields) - 24px); }
  .topic-lock { padding-left: 0; }
  .setup-panel .sport-cap { font-size: 0.6rem; letter-spacing: 0.04em; } /* French "ÉVÉNEMENT" + i stays inside the caption column */
  .topic-input { text-overflow: ellipsis; }
  .topic-input-wrap .topic-input:placeholder-shown { padding-right: 0.7rem; } /* empty: the × is hidden, so the hint gets its room */
}
/* Narrow phone landscape (667x375 class): the game tiles show icon and name only, so the field column can be wider. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 760px) {
  .game-card { --fields: clamp(300px, 52vw, 380px); }
  .game-btn { flex-direction: column; justify-content: center; text-align: center; gap: 0.3rem; padding: 0.4rem; }
  .game-btn .txt { flex: none; }
  .game-btn .desc, .game-btn .chev { display: none; }
  .game-btn .icon { width: 2rem; height: 2rem; }
  .game-btn .name { font-size: 0.95rem; line-height: 1.1rem; }
}
/* Phone landscape up to 779 px wide: "DynamicStadiums Game Simulator" does not fit the header column on one line,
   so it takes two lines at the same 1rem size (Micha 23 Oct 2026: SIM -> Game Simulator). */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 779px) {
  .game-title { white-space: normal; }
  .game-title .tl { display: block; }
}
/* Up to 430 px tall: Topic rows 1 px apart, so the brand link's 44 px hit area clears the Language box above it. */
@media (orientation: landscape) and (max-height: 430px) {
  .topic-box { gap: 1px; }
}
/* 874x402 (iPhone 16 Pro) and other phones up to 430 px tall get the tight rows of the 400 px class too. */
@media (orientation: landscape) and (min-height: 401px) and (max-height: 430px) {
  .game-head { padding-top: 3px; padding-bottom: 1px; }
  .main-link { margin-bottom: 0; }
  .head-logo { width: 3rem; }
  .stats { margin-bottom: 1px; padding: 0.2rem 0.75rem; }
  .brand { margin-bottom: 3px; }
  .brand a { padding: 4px 0 6px; }
}

/* 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; }
  .setup-panel { --setup-w: 380px; top: 66px; gap: 0.75rem; padding: 0.9rem 1rem 1rem; }
  .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; }
  .top-tools { padding: 0.5rem 0.75rem 0; }
  .setup-panel { top: calc(0.5rem + 44px + 4px); padding: 1.25rem 1.5rem 1.5rem; gap: 1rem; }
  .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; }
}