/* ==========================================================================
   Kartuli — base: fonts, reset, typography, focus, motion, print basics
   Load AFTER tokens.css:
     <link rel="stylesheet" href="/static/css/tokens.css">
     <link rel="stylesheet" href="/static/css/base.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Self-hosted fonts (SIL OFL). Variable woff2, subset by unicode-range so a
   Georgian page never downloads Cyrillic and vice versa. No CDN (contract #4).
   -------------------------------------------------------------------------- */

/* Inter — UI text (Latin + Cyrillic for the RU interface) */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* Noto Sans Georgian — every string marked class="ka" */
@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/notosansgeorgian-georgian.woff2') format('woff2');
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A,
    U+2D00-2D2F, U+2E31;
}
/* Latin subset of the same family: digits and punctuation mixed into a
   Georgian string keep one consistent shape instead of falling back. */
@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/static/fonts/notosansgeorgian-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Modern reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 2;
  tab-size: 2;
  scroll-behavior: smooth;
  /* Anchor targets clear the sticky top bar. */
  scroll-padding-top: calc(var(--topbar-h) + var(--sp-4));
}

body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-tight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Warm the page edges very slightly — aged paper, not flat white. */
  background-image:
    radial-gradient(120rem 40rem at 50% -10rem, rgba(224,113,58,.06), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

img, svg, video, canvas, audio, iframe, embed, object { display: block; }
img, svg, video, canvas { max-width: 100%; height: auto; }

input, button, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

button { background: none; border: 0; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

[hidden] { display: none !important; }

:target { scroll-margin-top: calc(var(--topbar-h) + var(--sp-4)); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4, h5, h6 { font-size: var(--fs-md); }

p { text-wrap: pretty; }

small, .text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-lg { font-size: var(--fs-lg); }

strong, b { font-weight: var(--fw-semibold); }

a {
  color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  border-radius: var(--radius-xs);
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--wine-deep); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
kbd {
  padding: 0.1em 0.4em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

/* Utility colours for meta text */
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   4. Georgian — contract rule 1 & 2
   Every Georgian string gets class="ka".
   letter-spacing is forced to normal: Mkhedruli breaks apart under tracking,
   and the letter GRIDS (wordsearch, hangman, scramble) are CSS Grid instead.
   -------------------------------------------------------------------------- */

.ka {
  font-family: var(--font-ka);
  letter-spacing: normal !important;
  word-spacing: normal;
  font-feature-settings: normal;
  font-variant-ligatures: none;
  text-transform: none !important;   /* case-folding maps Mkhedruli->Mtavruli */
  line-height: 1.45;                 /* Georgian has tall ascenders/descenders */
}

/* Never allow an ancestor utility to case-fold Georgian. */
.ka::first-letter { text-transform: none; }

/* --------------------------------------------------------------------------
   5. Focus — visible, warm, never removed
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* Elements that already carry a radius keep it around the ring. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline-offset: 3px;
}

input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-offset: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-16));
  z-index: var(--z-max);
  padding: var(--sp-3) var(--sp-4);
  background: var(--wine);
  color: var(--ink-invert);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-2);
  transition: top var(--dur-2) var(--ease);
}
.skip-link:focus { top: calc(var(--sp-2) + var(--safe-t)); }

/* Screen-reader-only, still focusable */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   6. Touch behaviour (contract rule 3 — no hover-only affordances)
   -------------------------------------------------------------------------- */

button, [role="button"], a, label, summary, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Anything interactive clears the 44x44 floor. */
button, [role="button"], .tap {
  min-height: var(--tap);
  min-width: var(--tap);
}

/* Paper-only content. print.css reveals it inside @media print. */
.print-only { display: none; }

::selection {
  background: var(--apricot-tint);
  color: var(--wine-deep);
}

/* Warm scrollbars where the browser lets us ask. */
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   7. Reduced motion — the games lean on motion, so honour this properly
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep the state readable even with motion stripped: colour still changes. */
}

/* --------------------------------------------------------------------------
   8. Print basics (full worksheet rules live in print.css)
   -------------------------------------------------------------------------- */

@media print {
  html, body {
    background: #fff !important;
    color: #000 !important;
    background-image: none !important;
  }
  a { color: #000; text-decoration: underline; }
  * { box-shadow: none !important; }
}