/* ---------- 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:has(.duel-lanes) .arena-header .button { min-height: 44px; padding: 6px 12px; font-size: 14px; }

  #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: 25px; }
  .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: 2; }
  #setupContent { padding: 10px 12px; }
  .setup-summary b { 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 .section-kicker { display: none; }
  .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-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; }
  .view-option { width: 44px; height: 44px; }
  .timer-presets button { min-height: 44px; }
}

/* ---------- 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; }
  .product-title { display: none; }
}
@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; margin-bottom: 16px; padding: 14px 16px; }
  .hub .hub-heading h1 { font-size: 28px; }
  .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; }
  }

  .product-title { padding: 10px 15px 0; }
  .product-title__eyebrow { display: none; }
  .product-title__name { margin-top: 0 !important; font-size: 20px; }

  .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: title, MEB link and companion in a short hero; search and Ünite share one row. */
  .catalog-launchpad { margin-bottom: 12px; padding: 12px 14px; border-radius: 20px; }
  .catalog-hero { grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; margin-bottom: 8px; }
  .catalog-hero > :first-child { grid-row: 1; grid-column: 1; }
  .catalog-hero h1 { margin: 0; font-size: 26px; }
  .catalog-hero #catalogDescription { display: none; }
  .catalog-companion { grid-row: 1 / 3; grid-column: 2; width: 56px; margin: 0; align-self: center; }
  .curriculum-source { grid-row: 2; grid-column: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; font-size: 13px; }
  .lab-shelf h2 { font-size: 13px; }
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); margin: 0 0 8px; padding: 6px; gap: 6px; border-radius: 16px; }
  .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; width: 44px; height: 44px; }
  .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-meta .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-bottom: 14px; padding: 10px 10px 12px; border-radius: 18px; }
  .unit-contests__head { margin-bottom: 8px; }
  .unit-contests__head h3 { font-size: 17px; }
  .unit-contests__head p { font-size: 13px; }

  /* Oyunlar: a short title row and compact group headings. */
  .hub .hub-heading { margin-bottom: 12px; padding: 8px 8px 8px 16px; border-radius: 20px; }
  .hub .hub-heading h1 { margin: 0; font-size: 24px; }
  .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, the meta pill, a two-line title and one line of 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; }
  :is(#catalogContent, #hubContent) .game-card:is(:hover, :active) { transform: none; }
  :is(#catalogContent, #hubContent) .game-card:has(> .card-shortcuts > [data-activity-id]:active) { background: var(--surface-2); transform: scale(.985); }
  :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,
  :is(#catalogContent, #hubContent) .contest-card__chips { 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: 1; }
  :is(#catalogContent, #hubContent) .contest-card__packs { display: -webkit-box; margin: 2px 0 0; overflow: hidden; font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
  :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; }