/* 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(.product-title__name, .catalog-hero h1, .hub-heading h1, .topic-group__header h2, .activity-group > h2,
    .unit-contests__head 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 */
}
.product-title__name { font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; letter-spacing: -.02em; }
.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(180px, 22vw, 320px);
  bottom: -.32em;
  color: #fff;
  opacity: .07;
  font-family: var(--font-title);
  font-size: clamp(96px, 11vw, 168px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}
.catalog-launchpad { padding: clamp(22px, 2.6vw, 34px) clamp(20px, 2.8vw, 36px) clamp(18px, 2vw, 26px); }
.catalog-hero h1,
.hub-heading h1 { color: #fff; font-size: clamp(38px, 3.8vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.catalog-hero #catalogDescription { color: var(--masthead-ink-2); }
.catalog-companion { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .35)); }
.curriculum-source,
html:not([data-input="touch"]) .curriculum-source:hover {
  color: #fff;
  background: rgba(11, 27, 51, .28);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
html:not([data-input="touch"]) .curriculum-source:hover { background: rgba(11, 27, 51, .45); }
.lab-shelf h2 { color: var(--masthead-ink-2); }
.lab-shelf .button.lab-launcher { color: var(--ink); background: var(--surface-raised); box-shadow: var(--shadow-sm), var(--highlight); }
.lab-shelf__scroll { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); box-shadow: none; }

/* ---------- Unit covers: each Konular unit opens on its family gradient ---------- */
.topic-group__header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 22px 24px;
  gap: 18px;
  color: #fff;
  background: radial-gradient(60% 120% at 100% 100%, rgba(11, 27, 51, .22), transparent), linear-gradient(135deg, var(--fam-2), var(--fam)) var(--fam);
  border: 0;
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(11, 27, 51, .14), 0 20px 36px -24px var(--fam), inset 0 1px 0 rgba(255, 255, 255, .18);
}
html[data-theme="dark"] .topic-group__header { box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .14); }
.topic-group__header h2 { color: #fff; font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.topic-group__header p { color: #fff; font-size: 14.5px; font-weight: 600; }
.topic-group__icon {
  display: grid;
  width: 60px;
  height: 60px;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 10px 18px -10px rgba(0, 0, 0, .45);
  font-size: 32px;
}
.topic-group--coral .topic-group__icon,
.topic-group--teal .topic-group__icon,
.topic-group--blue .topic-group__icon { background: rgba(255, 255, 255, .16); }
.topic-group__mark {
  position: absolute;
  z-index: -1;
  right: -26px;
  bottom: -46px;
  width: 200px;
  height: 200px;
  color: #0b1b33;
  opacity: .14;
  stroke-width: 1.6;
  transform: rotate(-10deg);
  pointer-events: none;
}
.topic-group__count {
  color: #fff;
  background: rgba(11, 27, 51, .26);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 13px;
  font-weight: 700;
}
.unit-labs h3,
.unit-contests__head 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); }
.setup-modal > .modal__close,
.setup-modal > .setup-leaderboard-button {
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) ease;
}
.setup-modal > .modal__close:active,
.setup-modal > .setup-leaderboard-button:active { transform: scale(var(--press-scale)); }
@media (hover: hover) and (pointer: fine) {
  .setup-modal > .modal__close:hover { color: var(--ink); background: var(--surface-2); transform: none; }
}

/* ---------- Leaderboard and online-room dialogs: the same navy head as the setup dialog ---------- */
.leaderboard-dialog__header,
.online-card__header {
  isolation: isolate;
  color: #fff;
  background: var(--masthead);
  border-bottom: 0;
}
.leaderboard-dialog__header { position: relative; }
:is(.leaderboard-dialog__header, .online-card__header) h2 {
  color: #fff;
  font-family: var(--font-title);
  font-weight: 800;
  letter-spacing: -.03em;
}
:is(.leaderboard-dialog__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; }
:is(.leaderboard-dialog__header, .online-card__header) .modal__close {
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--panel-line);
  box-shadow: var(--shadow-md);
}
/* 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;
}

/* ---------- 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 { padding: 14px 16px; border-radius: 22px; }
  .catalog-hero h1 { font-size: 32px; }
  .hub .hub-heading { padding: 12px 10px 12px 18px; border-radius: 22px; }
  .hub .hub-heading h1 { font-size: 30px; }
  .hub-heading::after { right: 12px; font-size: 80px; }

  .topic-group__header { margin-bottom: 12px; padding: 16px; gap: 6px 12px; border-radius: 22px; }
  .topic-group__icon { width: 46px; height: 46px; border-radius: 14px; font-size: 25px; }
  .topic-group__header h2 { font-size: 23px; }
  .topic-group__header p { font-size: 13.5px; }
  .topic-group__mark { right: -22px; bottom: -34px; width: 130px; height: 130px; }
  .topic-group__count { max-width: 100%; min-height: 28px; padding: 3px 10px; font-size: 12.5px; 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; }

  /* 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(.leaderboard-dialog__header, .online-card__header) { color: #000; background: #fff; border-bottom: 2px solid #000; }
body.high-contrast :is(.leaderboard-dialog__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,
body.high-contrast .topic-group__mark { display: none; }
body.high-contrast :is(.catalog-hero h1, .hub-heading h1, .catalog-hero #catalogDescription, .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 .curriculum-source { color: #000; background: #fff; border: 2px solid #000; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.high-contrast .lab-shelf__scroll { color: #000; background: #fff; border: 2px solid #000; }
body.high-contrast .topic-group__header { color: #000; background: #fff; border: 2px solid #000; box-shadow: none; }
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; background: #fff; border: 2px solid #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) {
  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, .setup-modal > .modal__close:active,
    .setup-modal > .setup-leaderboard-button:active) { transform: none; }
}
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, .setup-modal > .modal__close:active,
  .setup-modal > .setup-leaderboard-button:active) { transform: none; }