/* Kviziq – shared styles: the tokens, the base elements, layout primitives, buttons, the wordmark and
   whatever the app and the static pages both draw. Loaded first by the app (with app.css) and by
   every static page (with pages.css), as two <link>s, never @import. tools/check.mjs lints all three
   files together and checks the cascade rules across them (TASK-scale §4.1). */

:root {
  /* Earth palette: sand ground, cream surfaces, ochre accent, olive, brick red and espresso.
     Two planes, kept apart by value rather than hue: the page (--ground, with the letter background)
     is a mid-tone sand, everything you read or press sits on a clearly lighter cream --surface with
     a visible --line edge. Keep surface/ground ≥ 1.4:1 so the planes survive a washed-out projector. */
  --ground: #e1d4c1;
  --ground-deep: #d7c8b2;
  --surface: #fffdf9;
  /* Recessed areas: image frame, played/invalid cards, chips, the dialog body */
  --surface-2: #f3ede4;
  /* Played and invalid cards: muted, but still a surface on the ground (1.4:1); --surface-2 would
     melt into the ground on a washed-out projector. */
  --surface-muted: #fefaf5;
  --line: #c6b195;
  /* Letters of the background: a darker sand rather than ink, so they read as texture, not text */
  --glyph: #624837;
  --text: #2b1e16;
  --muted: #685345;
  /* Secondary text on --ground-deep (the controls bar), where --muted reaches only 4:1. */
  --muted-deep: #5d493c;
  /* Ochre: fills only (buttons, the selected tag, option letters, the timer ring), always with
     --on-accent (dark) text on top. It's too light for text or thin lines on cream or sand. */
  --accent: #d98e3a;
  /* Accent as text (kickers, titles, labels): 8.8:1 on --surface, 5.1:1 on the ground. */
  --accent-ink: #7a491f;
  /* Accent as a thin line that has to be seen: focus rings, the selected tab, the reveal bar
     (≥ 3:1 on --surface, --ground and --ground-deep). */
  --accent-line: #975c20;
  /* Hover fills: the same hue and lightness, slightly more saturated */
  --accent-strong: #e68f33;
  --accent-shadow: #6e3e12;
  --on-accent: #2b1e16;
  --correct: #5e7442;
  --on-correct: #fffdf9;
  --danger: #9e2e24;
  --on-danger: #fffdf9;
  --danger-bg: #f8ddd8;
  --danger-text: #781f17;
  --danger-strong: #ad2a1f;
  /* Darker sides of the key buttons */
  --line-shadow: color-mix(in srgb, var(--line) 70%, var(--text));
  --danger-shadow: color-mix(in srgb, var(--danger) 62%, var(--text));
  --focus: #2b1e16;
  --shadow: 43 30 22;
  /* Raised surfaces on the ground: a crisp contact edge plus a soft drop */
  --raise: 0 0.15rem 0 rgb(var(--shadow) / 0.08), 0 0.6rem 1.6rem rgb(var(--shadow) / 0.14);

  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: Rockwell, 'Roboto Slab', 'Museo Slab', 'Rockwell Nova', Georgia, 'Times New Roman', serif;

  --radius: 1.1rem;
  /* Key buttons: height of their side and how far hover pushes them down */
  --key-depth: 0.35rem;
  --key-hover: 0.15rem;
  --gutter: clamp(1rem, 2.6vw, 3.5rem);
  /* Above and below the home footer's text (see .home__footer). */
  --footer-pad: 0.8rem;
  /* The room the wordmark's rays need above its layout box (WORDMARK.box in js/icons.js), in em of
     the wordmark's height; tools/check.mjs recomputes it from the geometry. */
  --wordmark-overhang: 0.27em;

  color-scheme: light;
}

/* Chromium 76 (smart TVs) has no min(), max() or clamp() and drops a declaration that uses them.
   Each one in this file follows a plain declaration of the same property with the value a 16:9 TV
   gets anyway (tools/check.mjs enforces it outside the phone rules); custom properties get one of
   these blocks. */
@supports not (width: min(1px, 2px)) {
  :root {
    --gutter: 2.6vw;
  }
}

@supports not (color: color-mix(in srgb, red, red)) {
  :root {
    --line-shadow: #98856f;
    --danger-shadow: #72281f;
  }
}

/* The whole UI scales with the smaller window dimension (16:9 ≈ 16.5 px at 1920×1080). */
html {
  font-size: 0.86vw;
  font-size: max(12px, min(0.86vw, 1.53vh));
  -webkit-text-size-adjust: 100%;
  /* No overscroll navigation (Chrome) – a horizontal swipe in the quiz means next / previous. */
  overscroll-behavior-x: none;
}

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

body {
  margin: 0;
  min-height: 100vh;
  /* A soft light from above and deeper edges keep the ground from looking flat. */
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--surface) 35%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 120% 120% at 50% 40%, transparent 55%, color-mix(in srgb, var(--ground-deep) 70%, transparent) 100%),
    var(--ground);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

@supports not (color: color-mix(in srgb, red, red)) {
  body {
    background:
      radial-gradient(ellipse 90% 60% at 50% -10%, rgb(255 253 249 / 0.35) 0%, transparent 70%),
      radial-gradient(ellipse 120% 120% at 50% 40%, transparent 55%, rgb(215 200 178 / 0.7) 100%),
      var(--ground);
  }
}

h1,
h2,
p,
ol,
ul,
figure {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* Taps respond at once and a double tap doesn't zoom; pinch zoom stays available. */
button,
input,
select,
textarea,
label,
.screen,
.controls,
dialog {
  touch-action: manipulation;
}

:focus-visible {
  outline: 0.3rem solid var(--focus);
  outline-offset: 0.25rem;
}

[data-quiet-focus]:focus-visible {
  outline: none;
}

/* !important: author display values (e.g. .btn's inline-flex) would otherwise override the hidden attribute. */
[hidden] {
  display: none !important;
}

/* Read by screen readers only. !important: a component's own position (e.g. inside .option) mustn't
   put the text back on screen. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Common elements */

/* Category tones (js/patterns.js, TASK-journey §8): the colour of a subject's pattern, tile bar and
   progress segment, always a palette token. */
.tone--accent {
  color: var(--accent);
}

.tone--olive {
  color: var(--correct);
}

.tone--brick {
  color: var(--danger);
}

.tone--espresso {
  color: var(--text);
}

.tone--sand {
  color: var(--line);
}

.tone--ink {
  color: var(--accent-ink);
}

/* The category pattern's lines (the filled shapes take currentColor as they are). */
.pattern {
  fill: currentColor;
}

.pattern__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Illustrations (js/illustrations.js): lines in the text colour, recessed fills, one accent fill. */
.illo {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.illo__soft {
  fill: var(--surface-2);
}

.illo__accent {
  fill: var(--accent);
}

.illo__on-accent {
  stroke: var(--on-accent);
}

.illo__accent-line {
  stroke: var(--correct);
  stroke-width: 3.5;
}

.illo__line-soft {
  stroke: var(--line);
}


.kicker {
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Buttons come in three levels, the same everywhere:
   - primary (.btn--primary): the one main action of a screen or dialog step;
   - secondary (.btn--secondary): its alternatives, next to it (Zpět, Vložit ručně, Hrát znovu…);
     .btn--danger is a secondary in warning colours, for a confirmed destructive action;
   - tertiary (.btn--tertiary): small flat utility actions (Označit jako odehraný).
   Primary and secondary buttons are keys: the solid shadow is their side. Hover pushes a key part way
   down, a press all the way; it moves down by as much as the side shrinks, so its bottom edge stays
   put. Tertiary buttons are flat and don't move – like the controls bar, the close button and the
   other small controls, they only change colour. */
.btn {
  --side: var(--line-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 3.2em;
  padding: 0.6em 1.6em;
  border: 0.2rem solid transparent;
  border-radius: 999px;
  box-shadow: 0 var(--key-depth) 0 var(--side);
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(var(--key-hover));
    box-shadow: 0 calc(var(--key-depth) - var(--key-hover)) 0 var(--side);
  }
}

.btn:active {
  transform: translateY(var(--key-depth));
  box-shadow: 0 0 0 var(--side);
}

.btn--primary {
  --side: var(--accent-shadow);
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .btn--primary:hover {
    border-color: var(--accent-strong);
    background: var(--accent-strong);
  }
}

.btn--secondary {
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
}

/* Like the primary's, the hover fill only warms up a little; the push does the rest. */
@media (hover: hover) {
  .btn--secondary:hover {
    background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .btn--secondary:hover {
      background: #fdf7ef;
    }
  }
}

.btn--xl {
  font-size: 2.2rem;
  padding-inline: 2em;
}