/* Accessibility sheet (Ayarlar > Genel > Yazı boyutu / Yüksek kontrast; public/a11y-prefs.js puts the classes on <html>, landing-early.js before the first
   paint). A game sheet in the after-paint template (index.html data-pos 408, just before ui-theme-light.css), never in <head>.

   Text size: the interface is written in px (hundreds of font-size declarations), so there is no root font-size to turn. The CHILDREN of every interface
   root (every direct child of <body> except the 3D canvas holder #app, the sign-in screen and the full-screen decorations) get `zoom`: 1.12 (Büyük) /
   1.25 (Çok büyük). The roots keep their own box: zoom scales viewport units too (100dvh inside a zoomed element is 1.25 screens tall) and the windows
   size themselves with max-height: calc(100dvh - ...), so zooming #panel itself pushed its title off the screen. Dialogs, toasts and tooltips appended
   to <body> later are covered by the same selector. The map labels live inside #app and are placed by a pixel translate, so they take a larger
   font-size instead of a zoom.

   High contrast: the text/border/glass tokens of both themes are re-pointed (dark graphite and Açık cam; the light block is one class heavier than
   ui-theme-light.css, which loads after this sheet). Ratios: test/pt2-erisim.test.mjs. */

/* ---- 1. text size ---------------------------------------------------------------------------------------------------------------------------- */
html.a11y-text-lg body > :not(#app, #auth, #intro-bg, #threat-edge, script, template, style) > * { zoom: 1.12; }
html.a11y-text-xl body > :not(#app, #auth, #intro-bg, #threat-edge, script, template, style) > * { zoom: 1.25; }
/* Full-screen reading dialogs (#help, #whats-new, #intro, #away: the card is the zoomed child). The card budgets its height with 100dvh / --visible-h, and the zoom
   scales those too: at 1.25 the card was 1.25 screens tall, its title and ✕ above the top edge, and the cards have no way out but the ✕ (2026-11-11 playtest, 390x844).
   Dividing the same budget by the zoom brings the card back to one screen; the card keeps its own overflow-y: auto, so what does not fit scrolls inside it.
   Same budgets as style.css (.intro-card / .away-card; #away keeps the bottom bar free on touch and phones). Normal text size has no class, so no rule. */
html.a11y-text-lg { --a11y-scale: 1.12; }
html.a11y-text-xl { --a11y-scale: 1.25; }
html.a11y-text-lg :is(#intro, #away, #help, #whats-new) > .intro-card, html.a11y-text-xl :is(#intro, #away, #help, #whats-new) > .intro-card { max-height: calc((var(--visible-h, 100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / var(--a11y-scale)); }
/* a card that now scrolls would carry its absolutely placed ✕ away with the text (the news card opens scrolled to its bottom button). The ✕ becomes a sticky
   float of zero height, placed where the absolute one sat; the card's top padding moves to the margin of the element after it (a sticky box stays inside the
   content box, so a negative margin cannot pull it into the padding). 44 px = help/news padding, 52 px = intro. */
html.a11y-text-lg :is(#intro, #help, #whats-new) > .intro-card:has(> .panel-close:first-child), html.a11y-text-xl :is(#intro, #help, #whats-new) > .intro-card:has(> .panel-close:first-child) { padding-top: 0; }
html.a11y-text-lg :is(#intro, #help, #whats-new) > .intro-card > .panel-close:first-child, html.a11y-text-xl :is(#intro, #help, #whats-new) > .intro-card > .panel-close:first-child { position: sticky; top: 6px; right: auto; float: right; margin: 6px -12px -50px 0; z-index: 1; }
html.a11y-text-lg :is(#help, #whats-new) > .intro-card > .panel-close:first-child + *, html.a11y-text-xl :is(#help, #whats-new) > .intro-card > .panel-close:first-child + * { margin-top: 44px; }
html.a11y-text-lg #intro > .intro-card > .panel-close:first-child + *, html.a11y-text-xl #intro > .intro-card > .panel-close:first-child + * { margin-top: 52px; }
@media (pointer: coarse), (max-width: 760px) {
  html.a11y-text-lg #away > .intro-card, html.a11y-text-xl #away > .intro-card { max-height: calc((var(--visible-h, 100dvh) - var(--bar-h) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / var(--a11y-scale)); }
}
/* the bar (zoomed children, so it is taller) pushes the windows up: --bar-h is what they clear; measured 92 -> 100 / 108 on desktop, 60 -> 66 on phones (the bar is capped at 1.12 there) */
@media (min-width: 761px) {
  html.iso.ui-a.a11y-text-lg { --bar-h: 100px; }
  html.iso.ui-a.a11y-text-xl { --bar-h: 108px; }
}
@media (max-width: 760px) {
  html.iso.ui-a.a11y-text-lg { --bar-h: 66px; }
  html.iso.ui-a.a11y-text-xl { --bar-h: 66px; }
  /* seven keys must fit a 360 px phone: the bar stops at 1.12 (the windows above it still get 1.25) */
  html.a11y-text-xl body > #bar > * { zoom: 1.12; }
}
/* the desktop resource rail (ui-modern-a.css, >= 1100 px) is one nowrap row whose only elastic cell is the era chip (flex 1 1 0, ellipsis): the other seven cells grow with the
   zoom, so at 1.25 on a 1280 px screen the era chip was squeezed to 48 px ("Hazı…") and "Köy · Sonraki Çağ" vanished. With a bigger text the rail wraps and the era chip takes
   the room its text needs (max-content), alone on a second row when the first one is full; --top-h follows the measured height. Phones use the grid in style.css. */
@media (min-width: 1100px) {
  html.iso.ui-a.a11y-text-lg #top .chips, html.iso.ui-a.a11y-text-xl #top .chips { flex-wrap: wrap; }
  html.iso.ui-a.a11y-text-lg #top .chips > #era-hud, html.iso.ui-a.a11y-text-xl #top .chips > #era-hud { flex: 1 1 auto; min-width: max-content; }
}
/* tab rows of 5+ tabs were laid out for the unzoomed width (container queries measure the box, not the zoomed text) and broke words in half ("Kampla/r"):
   with a bigger text they wrap into rows of whole words instead */
html.iso.ui-a.a11y-text-lg #panel .ui-tabs.ui-tabs--scroll:not(#_), html.iso.ui-a.a11y-text-xl #panel .ui-tabs.ui-tabs--scroll:not(#_) { display: flex; flex-wrap: wrap; overflow: visible; gap: 2px; }
html.iso.ui-a.a11y-text-lg #panel .ui-tabs.ui-tabs--scroll:not(#_) > .ui-tab, html.iso.ui-a.a11y-text-xl #panel .ui-tabs.ui-tabs--scroll:not(#_) > .ui-tab { flex: 1 1 auto; min-width: 0; padding: 5px 8px; white-space: nowrap; overflow-wrap: normal; }
/* the Kamplar picker row (Yeterli / %50 / Tümü / Sayı) is a nowrap single row for 360 px (style.css); bigger text wraps it into two rows instead of breaking "Yeterli" */
html.iso.ui-a.a11y-text-lg #panel .war-sum ~ .ui-choice:not(#_), html.iso.ui-a.a11y-text-xl #panel .war-sum ~ .ui-choice:not(#_) { flex-wrap: wrap; }
html.iso.ui-a.a11y-text-lg #panel .war-sum ~ .ui-choice:not(#_) button, html.iso.ui-a.a11y-text-xl #panel .war-sum ~ .ui-choice:not(#_) button { white-space: nowrap; overflow-wrap: normal; }
html.a11y-text-lg #labels .lbl { font-size: 13.5px; }
html.a11y-text-xl #labels .lbl { font-size: 15px; }
html.iso.ui-a.a11y-text-lg #labels .lbl.village { font-size: 14.5px; }
html.iso.ui-a.a11y-text-xl #labels .lbl.village { font-size: 16px; }

/* ---- 2. high contrast: dark graphite ------------------------------------------------------------------------------------------------------------ */
html.iso.ui-a.a11y-contrast:not(.theme-light) {
  --a-glass: rgba(10, 11, 12, .94);
  --a-glass-strong: rgba(10, 11, 12, .97);
  --a-edge: rgba(255, 255, 255, .4);
  --a-key: rgba(255, 255, 255, .14);
  --a-key-hover: rgba(255, 255, 255, .24);
  --a-accent-text: #8fe0ee;
  --surface: rgba(12, 13, 14, .96);
  --surface-raised: rgba(255, 255, 255, .1);
  --surface-disabled: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .55);
  --border-soft: rgba(255, 255, 255, .34);
  --line: rgba(255, 255, 255, .34);
  --glass: rgba(10, 11, 12, .94);
  --glass-solid: rgba(10, 11, 12, .98);
  --text: #f6f5f1;
  --ink: #ffffff;
  --muted: #dfe2e5;
  --good: #9ee7b3;
  --bad: #ffb4a8;
  --even: #ffd777;
  --blue: #8fe0ee;
  --focus: #ffffff;
}
html.iso.ui-a.a11y-contrast:not(.theme-light) button:disabled:not(#_):not(.community-rank-row button) { color: #cfd3d6; border-color: var(--border); }
html.iso.ui-a.a11y-contrast:not(.theme-light) #labels .lbl :is(small, .cd) { color: #e8eeed; }

/* ---- 3. high contrast: Açık cam ------------------------------------------------------------------------------------------------------------------ */
html.iso.ui-a.a11y-contrast.theme-light {
  --a-glass: rgba(255, 255, 255, .9);
  --a-glass-strong: rgba(255, 255, 255, .94);
  --a-glass-modal: rgba(255, 255, 255, .96);
  --a-edge: rgba(0, 0, 0, .4);
  --a-key: rgba(255, 255, 255, .8);
  --a-key-hover: rgba(255, 255, 255, .95);
  --a-accent-text: #002a5e;
  --surface: rgba(255, 255, 255, .92);
  --surface-raised: rgba(255, 255, 255, .94);
  --surface-disabled: rgba(20, 30, 40, .1);
  --border: rgba(0, 0, 0, .55);
  --border-soft: rgba(0, 0, 0, .36);
  --line: rgba(0, 0, 0, .36);
  --glass: rgba(255, 255, 255, .9);
  --glass-solid: rgba(255, 255, 255, .98);
  --text: #101012;
  --ink: #000000;
  --muted: #26262b;
  --good: #0a3d18;
  --bad: #7d0010;
  --even: #6e1c00;
  --blue: #002a5e;
  --focus: #000000;
}
html.iso.ui-a.a11y-contrast.theme-light button:disabled:not(#_):not(.community-rank-row button) { color: #3d4348; border-color: var(--border); }
html.iso.ui-a.a11y-contrast.theme-light ::placeholder { color: #3d4348; }

/* ---- 4. both themes: faded small print is as strong as the rest, hairlines are visible ---------------------------------------------------------- */
html.iso.ui-a.a11y-contrast #panel button small:not(#_) { opacity: 1; }
html.iso.ui-a.a11y-contrast :is(#panel, #nav, #top, #alerts, #quest-tracker, #status-pop) :is(small, .hint) { opacity: 1; }