/* ---------- Phone ergonomics layer (loads last) ----------
   Phones get the same identity as the board, arranged for one hand and a short, changing viewport. */

/* The game fills exactly the visible viewport. hub.js supplies the visual-viewport box at normal zoom;
   the fallback is the fixed containing block itself, never vw/dvh units that disagree with it on phones. */
#arenaDialog {
  position: fixed;
  inset: auto;
  top: var(--arena-vv-top, 0px);
  left: var(--arena-vv-left, 0px);
  width: var(--arena-vv-width, 100%);
  height: var(--arena-vv-height, 100%);
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  /* Notches and gesture bars (viewport-fit=cover) never hide the header or the lowest option. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overflow: clip;
}

/* ---------- Top bar: navigation, grade and quick actions always fit ---------- */
@media (max-width: 420px) {
  .primary-nav { min-width: 0; }
}

/* ---------- Live simultaneous duels on phones ---------- */
/* Everything the player needs fits without scrolling: a slim bar, the rival strip and a full-height lane. */
@media (max-width: 680px), (max-height: 520px) {
  #arenaDialog:has(.duel-lanes) .arena-header { align-items: center; min-height: 0; padding: 7px 10px; gap: 8px; }
  #arenaDialog:has(.duel-lanes) .arena-header > div:first-child { min-width: 0; }
  #arenaDialog:has(.duel-lanes) .arena-header p { margin: 0 0 1px; overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
  /* The title wraps (two lines on a phone) like the other contests' titles; it is never cut to an ellipsis. */
  #arenaDialog:has(.duel-lanes) .arena-header h2 { font-size: 17px; line-height: 1.15; overflow-wrap: anywhere; text-wrap: balance; }
  #arenaDialog:has(.duel-lanes) .arena-header > div:last-child { flex: none; flex-direction: row; gap: 6px; }

  #arenaDialog #arenaBody:has(.duel-lanes) { display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 6px; }
  #arenaDialog #arenaBody:has(.duel-lanes) > .arena-paused { flex: none; padding: 10px 12px; }
  #arenaDialog #arenaBody:has(.duel-lanes) > .arena-paused h3 { margin: 0 0 6px; font-size: 18px; }
  #arenaDialog #arenaBody:has(.duel-lanes) > .arena-paused p { margin: 0 0 6px; font-size: 13px; }
  #arenaDialog #arenaPlay:has(.duel-lanes) { position: relative; flex: 1; height: auto; min-height: 0; gap: 6px; padding: 6px; border-radius: 14px; }

  /* The clock is a slim bar with its number; the long rule sentence belongs to setup and the lobby. */
  #arenaDialog .duel-timer { display: grid; width: 100%; min-height: 40px; margin: 0; padding-right: 48px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "track value"; align-items: center; gap: 10px; }
  #arenaDialog .duel-timer > div { grid-area: value; }
  #arenaDialog .duel-timer > div > span,
  #arenaDialog .duel-timer small { display: none; }
  #arenaDialog .duel-timer strong { font-size: 20px; line-height: 1.2; }
  #arenaDialog .duel-timer__track { grid-area: track; height: 7px; }
  #arenaDialog .duel-rules { display: none; }
  #arenaDialog .online-banner { margin: 0; padding: 6px 10px; font-size: 13px; }

  /* The referee stays: a centred card for pauses, a countdown stage for 3-2-1 and BAŞLA!, then a small
     corner panda, so the first question is never covered once the count clears. */
  #arenaDialog .duel-lanes > .referee-region { position: absolute; z-index: 6; }
  #arenaDialog:not([data-referee-phase="playing"]) .duel-lanes > .referee-region { top: 50%; left: 50%; display: grid; width: min(260px, calc(100% - 24px)); min-height: 0; padding: 12px 16px; gap: 6px; background: var(--glass-strong); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md, 0 12px 30px rgba(15, 23, 42, .18)); transform: translate(-50%, -50%); }
  #arenaDialog:not([data-referee-phase="playing"]) .duel-lanes > .referee-region .referee-art { width: 176px; }
  #arenaDialog:not([data-referee-phase="playing"]) .duel-lanes > .referee-region .referee-message { max-width: none; min-height: 0; font-size: 14px; text-align: center; }
  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region { top: 6px; right: 6px; display: block; width: 40px; min-height: 0; }
  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region .referee-art { width: 40px; }
  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region .referee-message, #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region .referee-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region[data-count] { pointer-events: none; }
  /* Countdown stage: no card, a large panda with its number beside it, centred while the lanes are hidden. */
  #arenaDialog .duel-lanes > .referee-region { --stage-art: 150px; }
  #arenaDialog .duel-lanes > .referee-region[data-count] { width: min(300px, calc(100% - 24px)); padding: 0; background: none; border: 0; box-shadow: none; }
  #arenaDialog .duel-lanes > .referee-region[data-count] .referee-art { width: var(--stage-art); translate: calc(-.23 * var(--stage-art)) 0; }
  /* BAŞLA! (the lanes are live): the stage rises so the banner sits in the free band between the clock and
     the questions' text, the panda just below it, until the count clears. The referee box itself is only
     that band (never over a question or key); the panda overflows it for those 600 ms. */
  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region[data-count] { top: 52px; right: auto; left: 50%; display: grid; height: 58px; align-content: start; transform: translateX(-50%); }
  #arenaDialog[data-referee-phase="playing"] .duel-lanes > .referee-region[data-count] .referee-art { width: var(--stage-art); margin-top: 46px; translate: none; }

  /* Lanes: only answer lanes take space; the referee floats above them. */
  #arenaDialog .duel-lanes { flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 6px; }
  #arenaDialog .duel-lanes > .duel-side { grid-row: 1; }
  #arenaDialog .duel-lanes--online { display: flex; flex-direction: column; gap: 6px; }
  #arenaDialog .duel-lanes--online > .duel-side { flex: 1; order: 1; min-height: 0; }

  /* Lane: name and score on one row, a large question, full-width options and a reserved feedback line. */
  #arenaDialog .duel-side { display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 10px; border-radius: 14px; }
  #arenaDialog .duel-side header { display: flex; min-height: 0; flex: none; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; padding-bottom: 5px; }
  #arenaDialog .duel-side header > div { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 6px; }
  #arenaDialog .duel-side h3 { min-width: 0; overflow: hidden; font-size: 16px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
  #arenaDialog .duel-side header strong { flex: none; font-size: 22px; line-height: 1.1; }
  #arenaDialog .duel-side header small { font-size: 12px; }
  #arenaDialog .duel-combo { flex: none; min-height: 22px; margin: 0; padding: 1px 7px; font-size: 11px; }
  #arenaDialog .duel-you { margin-left: 4px; padding: 1px 7px; font-size: 11px; }
  #arenaDialog .duel-progress { flex: none; margin: 4px 0 0; font-size: 12px; line-height: 1.3; }
  #arenaDialog .duel-question { display: flex; min-height: 0; flex: 1; flex-direction: column; justify-content: flex-end; gap: 8px; padding-top: 4px; }
  /* The question is centred in the space above the options, which sit low in the thumb zone. */
  #arenaDialog .duel-side .arena-problem { display: grid; min-height: 0; flex: 1 1 auto; margin: 0; place-items: center; font-size: clamp(26px, 8.4vw, 40px); line-height: 1.12; text-align: center; }
  #arenaDialog .duel-options { flex: none; gap: 8px; }
  #arenaDialog .duel-options button { min-height: 56px; padding: 6px 8px; font-size: clamp(21px, 6.4vw, 28px); line-height: 1.15; }
  #arenaDialog .duel-feedback { display: -webkit-box; min-height: 2.6em; flex: none; margin: 6px 0 0; overflow: hidden; font-size: 12px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #arenaDialog .duel-side--local .duel-feedback { min-height: 1.3em; font-size: 13px; -webkit-line-clamp: 1; }
  #arenaDialog .duel-complete { min-height: 0; flex: 1; font-size: 15px; }
  #arenaDialog #arenaPlay .duel-lock { inset: 40px 4px 4px; padding: 8px; border-width: 2px; border-radius: 12px; }
  #arenaDialog #arenaPlay .duel-lock > strong { font-size: 13px; }
  #arenaDialog #arenaPlay .duel-lock > span { width: 54px; margin: 8px; font-size: 30px; border-width: 3px; box-shadow: 0 0 0 2px #c62828; }
  #arenaDialog #arenaPlay .duel-lock > small { font-size: 11px; }

  /* Online rival: one strip with name, live numbers, a thin progress line and a status only when it matters. */
  #arenaDialog .duel-lanes--online > .duel-opponent { position: relative; display: flex; min-height: 46px; flex: none; order: 0; flex-direction: row; flex-wrap: nowrap; text-align: left; align-items: center; gap: 8px; padding: 6px 10px 8px; overflow: hidden; border-radius: 12px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__label { display: none; }
  #arenaDialog .duel-lanes--online > .duel-opponent h3 { min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
  #arenaDialog .duel-lanes--online > .duel-opponent > :not(h3):not(.duel-opponent__track) { flex: none; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats { display: flex; order: 1; gap: 4px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats div { display: flex; align-items: baseline; gap: 3px; padding: 2px 6px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats dt { font-size: 10.5px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats dd { font-size: 14px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__score { order: 3; font-size: 24px; white-space: nowrap; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__score small { font-size: 11px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__track { position: absolute; right: 10px; bottom: 3px; left: 10px; display: block; height: 3px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__status { display: none; order: 2; padding: 2px 8px; font-size: 12px; }
  #arenaDialog .duel-lanes--online > .duel-opponent:is(.is-locked, .is-away, .is-disqualified) .duel-opponent__status { display: block; }
  #arenaDialog .duel-lanes--online > .duel-opponent:is(.is-locked, .is-away, .is-disqualified) .duel-opponent__stats { display: none; }
  /* Rematch series: name, series, live numbers, status, score. */
  #arenaDialog .duel-lanes--online > .duel-opponent .online-series-chip { order: 1; grid-column: auto; padding: 2px 8px; font-size: 12px; white-space: nowrap; }
  #arenaDialog .duel-lanes--online > .duel-opponent .online-series-chip span { font-size: 10px; }
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats { order: 2; }
}

@media (max-width: 380px) {
  #arenaDialog .duel-lanes--online > .duel-opponent .duel-opponent__stats div:nth-child(3) { display: none; }
}
/* With a series chip, narrow phones keep name, series and score; the running answer counts step aside. */
@media (max-width: 440px) {
  #arenaDialog .duel-lanes--online > .duel-opponent:has(.online-series-chip) .duel-opponent__stats { display: none; }
}

/* Two players sharing one phone: narrow lanes keep every part stacked and readable. */
@media (max-width: 680px) {
  #arenaDialog .duel-lanes:not(.duel-lanes--online) .duel-side { padding: 7px; }
  #arenaDialog .duel-lanes:not(.duel-lanes--online) .duel-side .arena-problem { font-size: clamp(22px, 6.8vw, 30px); }
  #arenaDialog .duel-lanes:not(.duel-lanes--online) .duel-options button { font-size: clamp(19px, 5.6vw, 24px); }
  #arenaDialog .duel-lanes:not(.duel-lanes--online) .duel-side header strong { font-size: 19px; }
}

/* Short landscape phones: the question sits beside three side-by-side options. */
@media (max-height: 520px) and (min-width: 560px) {
  #arenaDialog .duel-question { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); align-items: center; gap: 10px; }
  #arenaDialog .duel-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #arenaDialog .duel-lanes:not(.duel-lanes--online) .duel-question { grid-template-columns: 1fr; }
}

/* ---------- Setup on small phones: the options, not the header, get the screen ---------- */
@media (max-width: 480px) {
  .overlay.modal-overlay { padding: 6px; }
  .setup-modal { max-height: 100%; border-radius: 20px; }
  .setup-modal > .modal__close { top: 10px; right: 10px; }
  .setup-modal .modal__header { padding: 14px 16px 10px; }
  .setup-modal .modal__header h1 { margin-bottom: 4px; font-size: 20px; }
  .setup-modal .modal__header p:last-child { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  #setupContent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; column-gap: 8px; padding: 10px 12px; }
  #setupContent > * { grid-column: 1 / -1; }
  .setup-summary b { display: none; }
  /* The two panels are one list on a phone: their headings stay for screen readers, a rule parts them, and the choices
     themselves say what they are. */
  .setup-columns { gap: 10px; }
  .setup-panel { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .setup-columns > .setup-panel + .setup-panel { padding-top: 10px; border-top: 1px solid var(--line); }
  .setup-panel__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .setup-panel > * + *, .setup-form details { margin-top: 8px; }
  .setup-essentials, .setup-grid, .setup-pair { gap: 8px; }
  .setup-form .form-field { gap: 4px; }
  /* Up to three choices share one row; a long label wraps inside its button instead of pushing a choice to a row of
     its own. Four or more keep wrapping as rows. 4 px sides leave a whole word ("Kolay") room inside high contrast's
     2 px border too. */
  .setup-form .segmented:not(:has(> button:nth-child(4))) { flex-wrap: nowrap; }
  .setup-form .segmented:not(:has(> button:nth-child(4))) > button { flex: 1 1 0; min-width: 0; padding-inline: 4px; overflow-wrap: break-word; }
  .setup-form .segmented > button { min-height: 44px; padding-block: 5px; font-size: 14px; }
  .setup-players .segmented:has(> button:nth-child(4)) > button { padding-inline: 6px; }
  /* Beside Zorluk the time stepper has half the row: slimmer buttons, the value on one line. */
  .setup-columns .setup-essentials > .setup-pair:has(> :only-child) + #timeField .time-stepper__control { gap: 4px; }
  .setup-columns .setup-essentials > .setup-pair:has(> :only-child) + #timeField .time-stepper__control .uk-btn { --uk-size: 44px; }
  .setup-columns .setup-essentials > .setup-pair:has(> :only-child) + #timeField .time-stepper__value strong { font-size: 18px; white-space: nowrap; }
  /* İsimler and Kurallar side by side while closed; an open one takes the whole row. */
  .setup-form :is(.setup-more, .setup-info) { padding-inline: 12px; }
  #setupContent:not(:has(> details[open])) > :is(.setup-more, .setup-info) { grid-column: auto; }
  .setup-form summary { min-height: 44px; padding-block: 8px; font-size: 15px; }
  .setup-form .setup-guidance { margin-block: 8px 0; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
  /* The summary chips repeat choices that are on screen as pressed buttons; on an upright phone their row would only
     scroll sideways, so the height goes to the options instead. */
  .setup-modal .modal__actions .setup-summary { display: none; }
}
/* The footer summary gets its own scrolling row, so Vazgeç and Oyna keep their width. */
@media (max-width: 680px) {
  .setup-modal .modal__actions { flex-wrap: wrap; padding: 10px 12px; }
  .setup-modal .modal__actions .setup-summary { flex: 1 0 100%; flex-wrap: nowrap; gap: 4px; overflow-x: auto; font-size: 12px; white-space: nowrap; scrollbar-width: none; }
  .setup-modal .modal__actions .button { flex: 1 1 0; }
}

/* Short landscape phones: the header is a title line and the footer one row, so the options get most of the height. */
@media (orientation: landscape) and (max-height: 500px) {
  .overlay.modal-overlay { padding: 6px; }
  .setup-modal { max-height: 100%; }
  .setup-modal > :is(.modal__close, .setup-leaderboard-button) { top: 8px; }
  #setupModal .modal__header { padding-block: 8px 6px; }
  .setup-modal .modal__header h1 { margin-bottom: 2px; font-size: 24px; }
  .setup-modal .modal__header p:last-child { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  .setup-modal .modal__actions { flex-wrap: nowrap; padding: 8px 16px; }
  .setup-modal .modal__actions .setup-summary { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .setup-modal .modal__actions .button { flex: 0 0 auto; min-height: 48px; }
}

/* ---------- Online lobby on small phones: code, players and Hazırım fit on one screen ---------- */
@media (max-width: 480px) {
  .online-dialog { width: calc(100% - 12px); max-height: calc(100% - 12px); border-radius: 20px; }
  .online-card__header { padding: 14px 62px 12px 16px; }
  .online-card__header h2 { font-size: 22px; }
  .online-card__header > [data-online="close"] { top: 10px; right: 10px; }
  .online-summary { margin-top: 4px; font-size: 13px; }
  .online-connection { margin-top: 6px; }
  .online-body { gap: 10px; padding: 12px 14px 14px; }
  .online-code { gap: 8px; padding: 12px 10px; }
  .online-code__value span { width: clamp(34px, 10.5vw, 50px); height: clamp(44px, 12.5vw, 58px); font-size: clamp(24px, 7vw, 32px); }
  .online-player { min-height: 48px; padding: 6px 10px; gap: 10px; }
}

/* ---------- Results on small phones: name and score on one row, the outcome never wraps ---------- */
@media (max-width: 480px) {
  .arena-result__art { width: 104px; }
  .arena-result__art .mw-mascot { width: 92px; }
  .arena-dialog .arena-result h3 { font-size: clamp(26px, 8vw, 32px); }
  #arenaDialog .arena-scores--final .arena-side { gap: 4px 6px; }
  #arenaDialog .arena-scores--final .arena-side > strong { grid-row: 1; grid-column: 2; align-self: start; font-size: 26px; line-height: 1.1; }
  #arenaDialog .arena-scores--final .arena-side > small { grid-row: 2; grid-column: 1 / -1; margin-top: 2px; white-space: nowrap; }
  #arenaDialog .arena-scores--final .arena-side__stats { margin-top: 4px; gap: 4px; }
  #arenaDialog .arena-scores--final .arena-side__stats span { padding: 3px 6px; font-size: 10.5px; }
}

/* ---------- Comfortable tap targets on phones ---------- */
@media (max-width: 680px) {
  .select-field select { min-height: 44px; }
  .timer-presets button { min-height: 44px; }
}

/* ---------- Game header on phones: one row (←, title, TUR or timer, score chip, ⋯) ---------- */
/* Bitir, İpucu, Duraklat and Ses fold into the ⋯ menu (app.js bindGameMenu opens and closes it). */
@media (max-width: 680px), (max-height: 520px) {
  .game-shell__actions { position: relative; gap: 0; }
  .game-shell__actions #gameMenuButton { --uk-size: 44px; display: inline-flex; }
  .game-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
    display: none; min-width: 208px; flex-direction: column; padding: 6px; gap: 2px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg);
  }
  #gameMenuButton[aria-expanded="true"] + .game-menu { display: flex; }
  /* The kit icon buttons become text rows here: icon, then the label the row shows instead of clipping. */
  .game-shell__actions .game-menu > .uk-btn {
    inline-size: 100%; block-size: auto; min-block-size: 48px; justify-content: flex-start;
    padding: 0 12px; gap: 12px; border: 0; border-radius: 10px; box-shadow: none;
    color: var(--navy); background: transparent; font-size: 16px; font-weight: 700;
  }
  .game-shell__actions .game-menu > .uk-btn .uk-btn__label { position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; }
  .game-shell__actions .game-menu > .uk-btn[aria-pressed="true"] { background: var(--surface-soft); }
  .game-shell__actions .game-menu > .uk-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: -3px; }
  /* The score chip keeps the number; the streaks show in the combo badge and the end screen. */
  .game-shell__header .solo-score > span,
  .game-shell__header .class-score > strong,
  .game-shell__header .class-energy,
  .game-shell__header .boss-meter strong,
  .game-shell__header .versus-chip { display: none; }
  .game-shell__header .solo-score,
  .game-shell__header .class-score { padding-inline: 10px; }
  /* "puan" in small type and TUR above the round, so the title keeps room for its longest word ("Dikdörtgenler"). */
  .game-shell__header .solo-score > strong small { font-size: 12px; font-weight: 800; }
  .game-shell__header #roundStatus { flex-direction: column; justify-content: center; gap: 1px; line-height: 1; }
  .game-shell__header .score-team > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .game-shell__header .score-team { grid-template-columns: auto; padding-inline: 10px; }
  .game-shell__header .score-team > b { font-size: 18px; }
  .game-shell__header .boss-meter { width: 104px; grid-template-columns: auto minmax(0, 1fr); padding-inline: 8px; }
  .game-shell__header .boss-meter > b { display: none; }
}
@media (hover: hover) and (pointer: fine) and (max-width: 680px), (hover: hover) and (pointer: fine) and (max-height: 520px) {
  .game-shell__actions .game-menu > .uk-btn:hover { background: var(--surface-soft); }
}

/* ---------- Top bar on phones: out of the way while reading down, back on any scroll up (app.js) ---------- */
@media (max-width: 680px), (max-height: 520px) {
  .topbar { transition: translate .25s var(--ease-out, cubic-bezier(.23, 1, .32, 1)); }
  :root[data-topbar="hidden"] .topbar { translate: 0 -100%; }
  /* The group box and the Konular toolbar follow the bar up (their top comes from app.js). */
  .catalogue-nav--compact, .catalog-toolbar { transition: top .25s var(--ease-out, cubic-bezier(.23, 1, .32, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar, .catalogue-nav--compact, .catalog-toolbar { transition: none; }
}
body.reduced-motion :is(.topbar, .catalogue-nav--compact, .catalog-toolbar) { transition: none; }

/* Phone landscape: one row of bar (brand, Konular/Oyunlar, grade, tools, theme) and no product title, so the first
   screen shows the page itself. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  :root { --header-height: 60px; }
  .topbar { flex-wrap: nowrap; padding-block: 6px; }
  .topbar::before { display: none; }
  .famolu-brand { order: 1; margin-right: 0; }
  .primary-nav { order: 2; margin-left: auto; }
  .grade-context { order: 3; margin-left: 0; }
  .topbar__actions { order: 4; }
  .theme-picker { order: 5; }
}
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) and (max-width: 760px) {
  .famolu-brand-wordmark { display: none; }
  /* A small phone sideways (667 px): the grade select names itself (aria-label), so its "Sınıf" caption goes. */
  .famolu-brand { flex-shrink: 0; min-width: 44px; }
  .grade-context > span { display: none; }
  .primary-nav button { padding-inline: 14px; }
}

/* ---------- Oyunlar on phones: one short heading row and cards without the empty gap ---------- */
@media (max-width: 680px), (max-height: 520px) {
  .hub { padding-top: 12px; }
  .hub .hub-heading { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .hub .hub-heading .hub-join { align-self: center; min-height: 44px; }
  .game-card { min-height: 0; }
  .game-card__art { min-height: 112px; height: 112px; }
}

/* ---------- Browsing on phones: destinations at the thumb, rows instead of cards ---------- */
/* The tab bar (index.html) exists only on portrait phones; everywhere else the top bar's navigation stays. */
.tab-bar { display: none; }

/* Portrait phones: a one-row top bar (logo, grade, theme) and a bottom tab bar for Konular, Oyunlar and Araçlar. */
@media (max-width: 680px) and (orientation: portrait) {
  :root { --header-height: 56px; --tab-bar-height: 60px; }
  body { padding-bottom: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px)); }

  .topbar { flex-wrap: nowrap; min-height: 0; padding: 6px max(12px, env(safe-area-inset-right, 0px)) 6px max(12px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .topbar::before { display: none; }
  .primary-nav, .topbar__actions, .famolu-brand-wordmark { display: none; }
  .famolu-brand { order: 1; min-width: 44px; margin-right: auto; }
  .grade-context { order: 2; margin-left: 0; }
  .theme-picker { order: 3; }
  /* The smallest phones (320 px): logo, grade and the three theme buttons fit on one row with tighter spacing. */
  @media (max-width: 340px) {
    .topbar { gap: 4px; padding-right: max(8px, env(safe-area-inset-right, 0px)); padding-left: max(8px, env(safe-area-inset-left, 0px)); }
    .grade-context { padding-left: 8px; }
  }

  .tab-bar {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    box-sizing: border-box;
    height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px max(8px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: var(--glass);
    border-top: 1px solid var(--glass-line);
    box-shadow: 0 -8px 24px rgba(11, 27, 51, .07);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
  .tab-bar button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 0;
    color: var(--ink-2);
    background: none;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
  }
  .tab-bar .icon-svg { box-sizing: content-box; width: 22px; height: 22px; padding: 3px 16px; border-radius: 999px; transition: background-color .2s var(--ease-out, ease); }
  .tab-bar [aria-current="page"] { color: var(--brand-ink); }
  .tab-bar [aria-current="page"] .icon-svg { background: var(--brand-tint); stroke-width: 2.2; }
  .tab-bar button:active .icon-svg { background: var(--surface-3); }
  body.high-contrast .tab-bar { background: var(--surface); border-top: 2px solid var(--ink); box-shadow: none; }
  body.high-contrast .tab-bar [aria-current="page"] { color: var(--ink); }
  body.high-contrast .tab-bar [aria-current="page"] .icon-svg { outline: 2px solid var(--ink); outline-offset: -2px; }
  /* The game, setup, dialogs and the tools drawer own the screen; the bar comes back when they close. */
  body:is(.modal-open, .drawer-open) .tab-bar,
  body:has(dialog[open]) .tab-bar { display: none; }
  .toast-region { bottom: calc(var(--tab-bar-height) + 12px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .tab-bar { display: none !important; } }

/* Phones, both orientations: a slimmer catalogue head, a sticky chip row for the groups and rows for activities. */
@media (max-width: 680px), (orientation: landscape) and (max-height: 520px) {
  /* Konular: the head bar (bold.css) and search and Ünite on one row. */
  .view--catalog { padding-top: 12px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 6px; }
  .catalog-toolbar .search-field { min-height: 48px; }
  .catalog-toolbar .search-field__icon { width: 20px; height: 20px; margin: 0 7px 0 10px; }
  .catalog-toolbar .search-field input { height: 46px; padding-right: 46px; font-size: 16px; }
  .catalog-toolbar .search-field:has(.search-field__clear[hidden]) input { padding-right: 2px; }
  /* The typed text stays 16 px (no zoom on focus); only the hint is smaller, so it fits beside Ünite. */
  .catalog-toolbar .search-field input::placeholder { font-size: 14px; }
  @media (max-width: 380px) { .catalog-toolbar .search-field input::placeholder { font-size: 13.5px; } }
  .catalog-toolbar .search-field__clear { top: 1px; right: 1px; }
  .catalog-toolbar .select-field { min-width: 0; min-height: 48px; padding: 4px 24px 4px 10px; align-content: start; }
  .catalog-toolbar .select-field::after { right: 7px; }
  .catalog-toolbar .select-field span { font-size: 11px; line-height: 14px; }
  /* The select covers the whole field under its label, so a tap anywhere on the 48 px box opens it. */
  .catalog-toolbar .select-field select {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 18px 28px 0 10px;
    overflow: hidden; font-size: 16px; text-overflow: ellipsis;
  }
  .catalog-meta { min-height: 0; margin-bottom: 10px; padding-bottom: 6px; }
  .catalog-meta p { font-size: 13px; }
  .catalog-toolbar .view-options { display: none; }

  .topic-groups { gap: 32px; }
  .topic-group__header { gap: 4px 10px; margin-bottom: 12px; padding-bottom: 10px; }
  .topic-group__icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
  .topic-group__header h2 { font-size: 22px; }
  .topic-group__header p { display: -webkit-box; overflow: hidden; font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .topic-group__count { min-height: 28px; padding: 3px 10px; }
  .unit-contests { margin-top: 20px; }
  .unit-contests > h3 { margin-bottom: 8px; font-size: 17px; }

  /* Oyunlar: compact group headings (the title bar is in bold.css). */
  .hub .hub-heading h1 { margin: 0; }
  .hub .activity-group { margin: 14px 0 28px; }
  .hub .activity-group > h2 { margin-bottom: 2px; font-size: 22px; }
  .hub .activity-group > h2 .activity-group__count { min-height: 26px; padding: 2px 10px; font-size: 13px; }
  .hub .activity-group > p { display: -webkit-box; margin-bottom: 12px; overflow: hidden; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

  /* Group jump: the sidebar becomes one sticky, sideways-scrolling chip row (app.js keeps the current chip in view);
     the fold-out box is not needed. */
  .catalogue-layout.has-catalogue-nav > .catalogue-nav--compact { display: none; }
  .catalogue-nav--sidebar {
    position: sticky;
    z-index: 25;
    top: var(--catalogue-sticky-top);
    display: block;
    margin: 0 0 12px;
    padding: 5px;
    background: var(--glass-strong);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: top .25s var(--ease-out, cubic-bezier(.23, 1, .32, 1));
  }
  .catalogue-nav--sidebar .catalogue-nav__title { display: none; }
  .catalogue-nav--sidebar .catalogue-nav__links { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
  .catalogue-nav--sidebar .catalogue-nav__links::-webkit-scrollbar { display: none; }
  .catalogue-nav--sidebar .catalogue-nav__link { flex: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 14px; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"] { border-color: var(--primary); }
  body.high-contrast .catalogue-nav--sidebar { background: var(--surface); border: 2px solid var(--ink); }
  body.high-contrast .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"] { border: 2px solid var(--ink); }

  /* Rows: a small thumbnail, a two-line title and one line of description (Oyunlar adds its meta pill; a contest shows
     its ways to play instead of a description). The whole row is the
     Oyna button (stretched under the text, its name unchanged); ★ and Laboratuvar stay their own targets. */
  :is(#catalogContent, #hubContent) :is(.game-grid, .unit-contests__list) { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  :is(#catalogContent, #hubContent) .game-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr);
    min-height: 92px;
    border-radius: 16px;
    box-shadow: var(--shadow-xs);
    transition: background-color .15s ease, transform .16s var(--ease-out, ease);
  }
  :is(#catalogContent, #hubContent) .game-card::before { inset: 0 auto 0 0; width: 4px; height: auto; pointer-events: none; }
  @media (hover: hover) and (pointer: fine) {
    :is(#catalogContent, #hubContent) .game-card:is(:hover, :active) { transform: none; }
  }
  /* Pressed, like a contest tile: the row sinks to --press-scale and takes the pressed fill; high contrast, whose fills
     are near white, adds an ink ring. Reduced motion (below) keeps the fill and the ring. */
  :is(#catalogContent, #hubContent) .game-card:has(> .card-shortcuts > [data-activity-id]:active) { background: var(--surface-3); transform: scale(var(--press-scale)); }
  body.high-contrast :is(#catalogContent, #hubContent) .game-card:has(> .card-shortcuts > [data-activity-id]:active) { box-shadow: inset 0 0 0 3px var(--ink); }
  :is(#catalogContent, #hubContent) .game-card__art { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; height: auto; min-height: 0; padding: 0; overflow: hidden; border-right: 1px solid var(--line); border-bottom: 0; }
  :is(#catalogContent, #hubContent) .game-card__preview { flex: none; width: 106px; max-width: none; height: 41px; transform: none; }
  :is(#catalogContent, #hubContent) .game-card__body { grid-row: 1; grid-column: 2; justify-content: center; min-width: 0; padding: 9px 4px 9px 12px; }
  :is(#catalogContent, #hubContent) .game-card__meta-row { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; min-width: 0; margin-bottom: 3px; }
  :is(#catalogContent, #hubContent) .game-card__meta-row > .game-card__meta { display: block; min-width: 0; min-height: 0; padding: 2px 8px; overflow: hidden; font-size: 11px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
  :is(#catalogContent, #hubContent) .game-card__badge { flex: none; }
  :is(#catalogContent, #hubContent) .game-card__title { display: -webkit-box; margin: 0; overflow: hidden; font-size: 16.5px; line-height: 1.22; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  :is(#catalogContent, #hubContent) .game-card__topic { display: none; }
  :is(#catalogContent, #hubContent) .game-card__description { display: -webkit-box; margin: 2px 0 0; overflow: hidden; font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* Every way to play shows: the chips wrap to a second line (inside the 92 px row) rather than end in an ellipsis. */
  #catalogContent .contest-card__chips { margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
  :is(#catalogContent, #hubContent) .card-shortcuts { grid-row: 1; grid-column: 3; flex-direction: column; flex-wrap: nowrap; justify-content: center; gap: 4px; padding: 4px 6px 4px 0; }
  :is(#catalogContent, #hubContent) .card-shortcuts [data-activity-id] { position: absolute; z-index: 1; inset: 0; width: auto; height: auto; min-height: 0; padding: 0; opacity: 0; background: none; border: 0; border-radius: inherit; box-shadow: none; transform: none; }
  :is(#catalogContent, #hubContent) .card-shortcuts :is([data-favorite], .lab-launcher) { position: relative; z-index: 2; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
  :is(#catalogContent, #hubContent) .card-shortcuts [data-favorite] { font-size: 20px; }
  :is(#catalogContent, #hubContent) .card-shortcuts .lab-launcher { gap: 0; font-size: 0; }
}
/* Landscape phones: the one-row bar stays and rows sit two side by side. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  :is(#catalogContent, #hubContent) :is(.game-grid, .unit-contests__list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-nav--sidebar, :is(#catalogContent, #hubContent) .game-card { transition: none; }
  :is(#catalogContent, #hubContent) .game-card:has(> .card-shortcuts > [data-activity-id]:active) { transform: none; }
}
body.reduced-motion .catalogue-nav--sidebar,
body.reduced-motion :is(#catalogContent, #hubContent) .game-card { transition: none; }
body.reduced-motion :is(#catalogContent, #hubContent) .game-card:has(> .card-shortcuts > [data-activity-id]:active) { transform: none; }