/* Premium UI, layer 2 (B · bold): loaded last, on top of the calm-depth layer (premium.css).
   One idea, said loudly: every unit has a colour family (tokens.css --family-*), shown as a gradient cover,
   a tinted art panel and a dot on its chip; the page and dialog heads are a deep famolu-navy masthead; titles
   and numbers are set in Bricolage Grotesque (--font-title); unit icons are one stroked SVG set (#u-*).
   High contrast flattens all of it to black on white; reduced motion keeps colour changes only. */

/* ---------- Colour families: one place maps a family to the four values components use ---------- */
body,
[data-family="numbers"] { --fam: var(--family-numbers); --fam-2: var(--family-numbers-2); --fam-tint: var(--family-numbers-tint); --fam-ink: var(--family-numbers-ink); }
[data-family="fractions"] { --fam: var(--family-fractions); --fam-2: var(--family-fractions-2); --fam-tint: var(--family-fractions-tint); --fam-ink: var(--family-fractions-ink); }
[data-family="algebra"] { --fam: var(--family-algebra); --fam-2: var(--family-algebra-2); --fam-tint: var(--family-algebra-tint); --fam-ink: var(--family-algebra-ink); }
[data-family="geometry"] { --fam: var(--family-geometry); --fam-2: var(--family-geometry-2); --fam-tint: var(--family-geometry-tint); --fam-ink: var(--family-geometry-ink); }
[data-family="measure"] { --fam: var(--family-measure); --fam-2: var(--family-measure-2); --fam-tint: var(--family-measure-tint); --fam-ink: var(--family-measure-ink); }
[data-family="data"] { --fam: var(--family-data); --fam-2: var(--family-data-2); --fam-tint: var(--family-data-tint); --fam-ink: var(--family-data-ink); }
[data-family="chance"] { --fam: var(--family-chance); --fam-2: var(--family-chance-2); --fam-tint: var(--family-chance-tint); --fam-ink: var(--family-chance-ink); }

/* Unit icons (index.html sprite, #u-*): one stroke weight, round joins, fills only where a symbol asks. */
.unit-glyph {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* ---------- Type: a display face for titles and numbers; Inter stays for reading ---------- */
:is(.catalog-hero h1, .hub-heading h1, .topic-group__header h2, .activity-group > h2,
    .unit-contests > h3, .unit-labs h3, .game-card__title, .setup-modal .modal__header h1, #activeGameTitle,
    .arena-header h2, .status-chip strong, .duel-timer strong, .duel-side header strong, .setup-panel__title) {
  font-family: var(--font-title);
  font-optical-sizing: auto;
  overflow-wrap: anywhere; /* a long Turkish word breaks instead of leaving its box */
}
.game-card__title { font-weight: 750; letter-spacing: -.015em; }
.setup-panel__title { font-weight: 750; letter-spacing: -.01em; }

/* ---------- Top bar: the current page is a filled brand pill ---------- */
.primary-nav [aria-current="page"],
html[data-theme] .primary-nav [aria-current="page"] {
  color: var(--on-primary);
  background: var(--brand-grad);
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .22);
  font-weight: 750;
}
.primary-nav button { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.primary-nav button:active { transform: scale(var(--press-scale)); }

/* ---------- Masthead: Konular and Oyunlar open on a deep navy head with a faint grid ---------- */
.catalog-launchpad,
.hub-heading {
  color: #fff;
  background: var(--masthead);
  border: 0;
  box-shadow: 0 2px 4px rgba(11, 27, 51, .12), 0 24px 48px -24px rgba(11, 27, 51, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme="dark"] .catalog-launchpad,
html[data-theme="dark"] .hub-heading { box-shadow: 0 0 0 1px var(--masthead-line), 0 24px 56px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .1); }
.catalog-launchpad::before,
.hub-heading::before {
  z-index: -1;
  inset: 0;
  height: auto;
  background:
    linear-gradient(var(--masthead-line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--masthead-line) 1px, transparent 1px) 0 0 / 32px 32px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(120% 100% at 85% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 85% 0%, #000, transparent 70%);
}
/* A faint operator watermark on the Oyunlar head (Konular's head is busy with the lab shelf). */
.catalog-launchpad::after { content: none; }
.hub-heading::after {
  content: "× ÷ +";
  position: absolute;
  z-index: -1;
  right: clamp(160px, 20vw, 300px);
  bottom: -.3em;
  color: #fff;
  opacity: .07;
  font-family: var(--font-title);
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
/* One bar each, so the first cards show on the first screen (1366×768 and 390×844). */
.hub-heading { align-items: center; margin-bottom: 16px; padding: 12px 14px 12px clamp(18px, 2vw, 26px); }
.catalog-hero h1,
.hub-heading h1 { color: #fff; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.catalog-hero h1 { flex: none; margin: 0; }
/* The grade's lab shelf takes the free width between the title and the panda, its label inline. */
.catalog-hero .lab-shelf { flex: 1 1 auto; min-width: 0; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "title prev list next"; column-gap: 10px; }
.catalog-hero .lab-shelf h2 { margin: 0; font-size: 14px; }
/* Narrower screens: the shelf moves to a second row under the title and the panda. */
@media (max-width: 1100px) and (orientation: portrait), (max-width: 1100px) and (min-height: 521px) {
  .catalog-hero { flex-wrap: wrap; }
  .catalog-hero h1 { margin-right: auto; }
  .catalog-hero .lab-shelf { order: 1; flex-basis: 100%; }
}
@media (max-width: 680px) {
  .catalog-hero .lab-shelf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "list"; column-gap: 0; }
  .catalog-hero .lab-shelf h2 { font-size: 13px; }
}
.catalog-companion { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.lab-shelf h2 { color: var(--masthead-ink-2); }
/* On the navy head the launchers are glass chips, so the title stays the loudest thing in the bar. The edge is 3:1 or
   better on the navy (tests/browser/lab-launchers.spec.js). */
.catalog-launchpad .lab-shelf .button.lab-launcher { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.catalog-launchpad .lab-shelf .lab-launcher__icon { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: none; }
.catalog-launchpad .lab-shelf .lab-launcher__text small { color: var(--masthead-ink-2); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .catalog-launchpad .lab-shelf .button.lab-launcher:hover { background: rgba(255, 255, 255, .18); box-shadow: none; }
}

/* ---------- Konular toolbar: search, Ünite and the layout switch stay at hand while scrolling ---------- */
/* Sticky at every width (app.js measureClearance puts the unit chips under it), except on short landscape phones,
   where it would cover half the screen. Its glass backing keeps it readable over the cards scrolling beneath. */
.catalog-toolbar {
  position: sticky;
  top: calc(var(--catalog-header-clearance, var(--header-height)) + 8px);
  margin: 0 0 12px;
  padding: 6px;
  background: var(--glass-strong);
  border: 1px solid var(--panel-line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (min-width: 681px) and (min-height: 521px) {
  .catalog-toolbar { grid-template-columns: minmax(0, 1fr) minmax(190px, 260px) auto; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .catalog-toolbar { position: relative; top: auto; }
}
body.high-contrast .catalog-toolbar { background: #fff; border: 2px solid #000; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The count line shows only while a search or a unit filter narrows the list (app.js); screen readers always hear it. */
.catalog-meta.is-quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Konular: Son açılanlar, the last launches one tap from their countdown ---------- */
.recent-row { margin: 0 0 12px; }
.recent-row[hidden] { display: none; }
.recent-row h2 { margin: 0 0 6px; color: var(--ink-2); font-size: 14px; font-weight: 800; letter-spacing: .02em; }
.recent-row__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.recent-tile {
  display: flex;
  min-width: 0;
  align-items: stretch;
  background: var(--surface-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs), var(--highlight);
  transition: border-color var(--dur-fast) ease;
}
.recent-tile__start {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  align-content: center;
  gap: 2px;
  padding: 8px 6px 8px 14px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.recent-tile__start strong { overflow: hidden; font-size: 15.5px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.recent-tile__start > span { color: var(--brand-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
/* Ayarları değiştir: the tile's kit icon button. */
.recent-tile > [data-recent-action="setup"] { flex: none; margin: 4px; }
.recent-tile__start { transition: transform var(--dur-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.recent-tile__start:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .recent-tile:has(.recent-tile__start:hover) { border-color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) { body:not(.motion-on) .recent-tile__start:active { transform: none; } }
body.reduced-motion .recent-tile__start:active { transform: none; }
@media (max-width: 1100px) { .recent-row__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: one sideways row, so the unit cards still start on the first screen. */
@media (max-width: 680px), (orientation: landscape) and (max-height: 520px) {
  .recent-row { margin-bottom: 10px; }
  .recent-row h2 { margin-bottom: 4px; font-size: 13px; }
  .recent-row__list {
    grid-template-columns: none;
    grid-auto-columns: minmax(230px, 78%);
    grid-auto-flow: column;
    gap: 8px;
    padding: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .recent-row__list::-webkit-scrollbar { display: none; }
  .recent-tile { scroll-snap-align: start; }
  .recent-tile__start { min-height: 52px; }
}
body.high-contrast .recent-row h2 { color: #000; }
body.high-contrast .recent-tile { background: #fff; border: 2px solid #000; box-shadow: none; }
body.high-contrast .recent-tile__start,
body.high-contrast .recent-tile__start > span { color: #000; }

/* ---------- Unit headers: a light heading on the page; the family colour lives in the icon tile ---------- */
.topic-group__header { gap: 16px; margin-bottom: 16px; padding-bottom: 14px; }
.topic-group__header h2 { color: var(--ink); font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.topic-group__header p { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.topic-group__icon,
.topic-group--coral .topic-group__icon,
.topic-group--teal .topic-group__icon,
.topic-group--blue .topic-group__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fam-2), var(--fam)) var(--fam);
  border-radius: 16px;
  box-shadow: 0 10px 18px -12px var(--fam), inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: 28px;
}
/* The count is plain text beside the unit's two secondary actions (the 3D game and Yazdır). */
.topic-group__count { min-height: 0; padding: 0; color: var(--ink-2); background: none; border: 0; border-radius: 0; font-size: 13.5px; font-weight: 600; }
/* DersTok beside the unit name (derstok-links.js): a quiet tonal pill per DersTok unit, the label over "İnternet
   gerekir", opening DersTok in a new tab. It wraps under a long name. It draws 40 px tall so a wrapped pill keeps the
   first row of cards on a 1366x768 screen; ::before stretches the tap area to 48 px. Pressed like a phone row: the
   --surface-3 fill and --press-scale (an ink ring in high contrast); reduced motion keeps the fill. */
.topic-group__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 2px; }
.topic-group__name h2 { min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; }
.derstok-links { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.derstok-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 40px;
  padding: 2px 16px 2px 4px;
  color: var(--ink);
  background: var(--brand-tint);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--brand-tint-2);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.derstok-link::before { content: ""; position: absolute; inset: -4px 0; }
.derstok-link__play { display: grid; flex: none; width: 36px; height: 36px; place-items: center; color: var(--on-brand); background: var(--brand); border-radius: 50%; }
.derstok-link__play svg { width: 20px; height: 20px; margin-left: 2px; fill: currentColor; }
.derstok-link__text { display: grid; min-width: 0; line-height: 1.15; }
.derstok-link__label { color: var(--brand-ink); font-size: 16px; font-weight: 800; white-space: nowrap; }
.derstok-link__meta { color: var(--ink-2); font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.derstok-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.derstok-link:active { background: var(--surface-3); transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .derstok-link:hover:not(:active) { background: var(--brand-tint-2); }
}
body.high-contrast .derstok-link { background: #fff; box-shadow: inset 0 0 0 2px #000; }
body.high-contrast :is(.derstok-link__label, .derstok-link__meta) { color: #000; }
body.high-contrast .derstok-link:active { background: var(--surface-3); box-shadow: inset 0 0 0 3px #000; }
@media (prefers-reduced-motion: reduce) { body:not(.motion-on) .derstok-link { transition: background-color var(--dur-fast) ease; } body:not(.motion-on) .derstok-link:active { transform: none; } }
body.reduced-motion .derstok-link { transition: background-color var(--dur-fast) ease; }
body.reduced-motion .derstok-link:active { transform: none; }
.unit-labs h3,
.unit-contests > h3 { font-weight: 750; letter-spacing: -.015em; }

/* ---------- Game cards: a tinted art panel set into the card, no top stripe ---------- */
.game-card { border-radius: 22px; }
.game-card::before { display: none; }
.game-card:not(.game-card--contest) .game-card__art {
  height: 144px;
  min-height: 144px;
  margin: 8px 8px 0;
  background: radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, .75), transparent 70%), var(--fam-tint);
  border: 0;
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--panel-line);
}
html[data-theme="dark"] .game-card:not(.game-card--contest) .game-card__art { background: radial-gradient(90% 80% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%), var(--fam-tint); }
.game-card__meta-row > .game-card__meta { color: var(--fam-ink); background: var(--fam-tint); border-color: transparent; font-weight: 700; }
.game-card__preview { transition: transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg), var(--highlight); }
  .game-card:hover .game-card__preview { transform: scale(1.04); }
}

/* ---------- Oyunlar groups: a family-coloured icon tile beside each heading ---------- */
.activity-group > h2 { font-weight: 800; letter-spacing: -.025em; }
.activity-group__icon {
  display: inline-grid;
  width: 52px;
  height: 52px;
  flex: none;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fam-2), var(--fam)) var(--fam);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 20px -10px var(--fam);
  font-size: 28px;
}
.activity-group > h2 .activity-group__count { color: var(--fam-ink); background: var(--fam-tint); font-family: var(--font-sans); }

/* ---------- Group chips and side navigation: a family dot names the colour ---------- */
.catalogue-nav__link[data-family] { gap: 10px; }
.catalogue-nav__link[data-family]::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--fam);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--fam-tint);
}
html[data-theme="dark"] .catalogue-nav__link[data-family]::before { background: var(--fam-ink); box-shadow: 0 0 0 3px var(--fam-tint); }

/* ---------- Buttons: the primary is tactile, a lip that the press closes ---------- */
.button--primary {
  background: var(--brand-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 var(--brand-lip), var(--shadow-brand);
}
.button--primary:active:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 var(--brand-lip), var(--shadow-xs);
  transform: translateY(2px) scale(.98);
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-input="touch"]) .button--primary:hover:where(:not(:disabled)) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 var(--brand-lip), var(--shadow-brand);
  }
}

/* ---------- Setup dialog: the masthead again, white title, opaque close and leaderboard buttons ---------- */
.setup-modal .modal__header {
  position: relative;
  isolation: isolate;
  color: #fff;
  background: var(--masthead);
  border-bottom: 0;
}
.setup-modal .modal__header h1 { color: #fff; font-weight: 800; letter-spacing: -.03em; }
.setup-modal .modal__header .section-kicker { color: #ffd66b; font-size: 13px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.setup-modal .modal__header p:last-child { color: var(--masthead-ink-2); }

/* ---------- Leaderboard panel and online-room dialog: the same navy head as the setup dialog ---------- */
.setup-board__header,
.online-card__header {
  isolation: isolate;
  color: #fff;
  background: var(--masthead);
  border-bottom: 0;
}
.setup-board__header { position: relative; }
:is(.setup-board__header, .online-card__header) h2 {
  color: #fff;
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -.03em;
}
:is(.setup-board__header, .online-card__header) :is(#leaderboardGame, .online-summary) { color: var(--masthead-ink-2); }
.online-card__header .section-kicker { color: #ffd66b; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.online-card__header .online-connection { background: #fff; }
.online-card__header .online-connection.is-offline { background: #fff; }
/* The view tabs read like the setup choices: a sunken track, the chosen view a filled brand chip. */
.leaderboard-views { background: var(--track); border-color: transparent; box-shadow: inset 0 1px 2px rgba(11, 27, 51, .07); }
.lb-tab[aria-pressed="true"] { color: var(--on-primary); background: var(--brand-grad); box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, .18); }
html[data-theme="dark"] .leaderboard-views { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }

/* ---------- Teacher tools, end screens and empty states: titles in the display face only ---------- */
:is(#teacherToolsTitle, #gameExitTitle, #onlineExitTitle, #suggestionFormTitle, #arenaResultTitle, .empty-state h2) {
  font-family: var(--font-title);
  line-height: 1.12;
  letter-spacing: -.02em;
}
/* The end screen's figures are its headline numbers: the display face, large enough for the back row. */
.result-metrics strong {
  font-family: var(--font-title);
  font-size: clamp(26px, 3.2vw, 44px);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -.02em;
}

/* ---------- Game screens: titles and live numbers in the display face ---------- */
#activeGameTitle,
.arena-header h2 { letter-spacing: -.02em; }
.status-chip strong,
.duel-timer strong,
.duel-side header strong { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- Phones (both orientations): the same identity in a smaller frame ---------- */
@media (max-width: 680px), (orientation: landscape) and (max-height: 520px) {
  .catalog-launchpad { margin-bottom: 10px; padding: 8px 10px 10px 16px; border-radius: 20px; }
  .catalog-hero { align-items: center; gap: 6px 10px; margin: 0; } /* over ui-overhaul.css's older phone grid */
  .catalog-hero h1 { font-size: 26px; }
  .catalog-companion { width: 44px; margin: -4px 0; }
  .catalog-toolbar { margin-bottom: 8px; border-radius: 16px; }
  .hub .hub-heading { margin-bottom: 12px; padding: 8px 8px 8px 16px; border-radius: 20px; }
  .hub .hub-heading h1 { font-size: 26px; }
  .hub-heading::after { right: 12px; font-size: 60px; }

  .topic-group__header { margin-bottom: 12px; padding-bottom: 12px; gap: 6px 12px; }
  .topic-group__icon { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }
  .topic-group__header h2 { font-size: 23px; }
  .topic-group__header p { font-size: 13.5px; }
  .topic-group__count { max-width: 100%; font-size: 13px; white-space: normal; }

  .activity-group__icon { width: 40px; height: 40px; border-radius: 13px; font-size: 22px; }

  /* Rows: the thumbnail is a rounded tinted inset, the title in the display face. */
  :is(#catalogContent, #hubContent) .game-card { min-height: 96px; border-radius: 20px; box-shadow: var(--shadow-sm), var(--highlight); }
  :is(#catalogContent, #hubContent) .game-card::before { display: none; }
  :is(#catalogContent, #hubContent) .game-card .game-card__art { height: auto; min-height: 0; margin: 6px 0 6px 6px; border: 0; border-radius: 14px; }
  :is(#catalogContent, #hubContent) .game-card__preview { width: 98px; height: 38px; }
  :is(#catalogContent, #hubContent) .game-card__title { font-size: 17px; line-height: 1.18; }
  :is(#catalogContent, #hubContent) .game-card__body { padding-left: 14px; }
  #catalogContent .game-card--contest { min-height: 72px; }

  /* The chip row: the current group is a filled brand chip. */
  .catalogue-nav--sidebar .catalogue-nav__link { gap: 8px; }
  .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"] {
    color: var(--on-primary);
    background: var(--brand-grad);
    border-color: transparent;
    box-shadow: var(--shadow-brand);
  }
  .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"]::before { background: currentColor; box-shadow: none; }
}

/* Portrait phones: the tab bar floats above the content as a rounded glass dock. */
@media (max-width: 680px) and (orientation: portrait) {
  body { padding-bottom: calc(var(--tab-bar-height) + 22px + env(safe-area-inset-bottom, 0px)); }
  .tab-bar {
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: max(12px, env(safe-area-inset-left, 0px));
    height: var(--tab-bar-height);
    padding: 5px 6px;
    border: 1px solid var(--glass-line);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
  }
  .tab-bar button { transition: transform var(--dur-fast) var(--ease-out); }
  .tab-bar button:active { transform: scale(var(--press-scale)); }
  .tab-bar [aria-current="page"] .icon-svg { color: var(--on-primary); background: var(--brand-grad); box-shadow: var(--shadow-brand); }
  .toast-region { bottom: calc(var(--tab-bar-height) + 24px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- High contrast: black on white, solid edges, no gradients or watermarks ---------- */
body.high-contrast .catalog-launchpad,
body.high-contrast .hub-heading,
body.high-contrast .setup-modal .modal__header { color: #000; background: #fff; border: 2px solid #000; box-shadow: none; }
body.high-contrast .setup-modal .modal__header { border-width: 0 0 2px; }
body.high-contrast :is(.setup-board__header, .online-card__header) { color: #000; background: #fff; border-bottom: 2px solid #000; }
body.high-contrast :is(.setup-board__header, .online-card__header) :is(h2, #leaderboardGame, .online-summary) { color: #000; }
body.high-contrast .online-card__header .section-kicker { color: #0b3a8c; }
body.high-contrast .leaderboard-views { background: #fff; border: 2px solid #000; box-shadow: none; }
body.high-contrast .lb-tab[aria-pressed="true"] { box-shadow: none; }
body.high-contrast :is(.catalog-launchpad, .hub-heading)::before,
body.high-contrast .hub-heading::after { display: none; }
body.high-contrast :is(.catalog-hero h1, .hub-heading h1, .lab-shelf h2,
  .setup-modal .modal__header h1, .setup-modal .modal__header p:last-child) { color: #000; }
body.high-contrast .setup-modal .modal__header .section-kicker { color: #0b3a8c; }
body.high-contrast .catalog-launchpad .lab-shelf .button.lab-launcher { color: #000; background: #fff; border: 2px solid #000; }
body.high-contrast .catalog-launchpad .lab-shelf :is(.lab-launcher__icon, .lab-launcher__text small) { color: #000; background: #fff; }
body.high-contrast :is(.topic-group__header h2, .topic-group__header p) { color: #000; }
body.high-contrast .topic-group__icon,
body.high-contrast .activity-group__icon { color: #000; background: #fff; box-shadow: inset 0 0 0 2px #000; }
body.high-contrast .topic-group__count { color: #000; }
body.high-contrast .game-card:not(.game-card--contest) .game-card__art { background: #fff; box-shadow: inset 0 0 0 2px #000; }
body.high-contrast .catalogue-nav__link[data-family]::before { background: #000; box-shadow: none; }
body.high-contrast .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"] { color: #000; background: #fff; box-shadow: none; }
body.high-contrast .catalogue-nav--sidebar .catalogue-nav__link[aria-current="location"]::before { background: #000; }
body.high-contrast .button--primary { box-shadow: none; }
@media (max-width: 680px) and (orientation: portrait) {
  body.high-contrast .tab-bar { border: 2px solid #000; box-shadow: none; }
  body.high-contrast .tab-bar [aria-current="page"] .icon-svg { box-shadow: none; }
}

/* ---------- Reduced motion (the app's switch, which follows the OS until a choice is saved): colour changes stay,
   nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) and (pointer: fine) {
    body:not(.motion-on) :is(.game-card:hover, .game-card:hover .game-card__preview, .button--primary:active:not(:disabled),
      .primary-nav button:active, .tab-bar button:active) { transform: none; }
  }
}
@media (hover: hover) and (pointer: fine) {
  body.reduced-motion :is(.game-card:hover, .game-card:hover .game-card__preview, .button--primary:active:not(:disabled),
    .primary-nav button:active, .tab-bar button:active) { transform: none; }
}