/* Kviziq – the app (index.html loads base.css, then this file). Everything the app draws that the
   static pages don't.

   Sections, in cascade order: Layout · Common elements · Home screen · Quiz intro · Question and
   answers · Images · Motion · Round icons · Joker and tiebreaker · End · Scoreboard · Link quizzes ·
   Single player · Controls bar · Dialog · Add quiz dialog · Smaller and narrower screens · Touch
   screens · Phones · Reduced motion · Older engines.

   Each component keeps its base rule, then its color-mix() fallback, then its hover rule. Overrides
   for touch screens and phones must come after every component, so they live in the "Touch screens"
   and "Phones" sections near the end – look there before changing a component's size or layout. */

.screen:focus {
  outline: none;
}

/* ---------------------------------------------------------------- Layout */

/* The live letter background (js/background.js) sits under the whole app. */
.glyph-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.8s ease;
  /* The background fades in the middle where the content is; it's fully visible only at the edges. */
  -webkit-mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    rgb(0 0 0 / 0.35) 0%,
    rgb(0 0 0 / 0.6) 55%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    rgb(0 0 0 / 0.35) 0%,
    rgb(0 0 0 / 0.6) 55%,
    #000 100%
  );
}

/* During a quiz the background recedes further: question text sits straight on the ground there,
   and letters of the same size and weight right behind it make it harder to read from across a room. */
body.is-quiz .glyph-bg {
  opacity: 0.5;
}

@media print {
  .glyph-bg {
    display: none;
  }
}

.app {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
}

.screen {
  min-height: 0;
  overflow: hidden;
  /* env() keeps content out of the notch in landscape (viewport-fit=cover); it's 0 on desktop. */
  padding: max(var(--gutter), env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right))
    calc(var(--gutter) * 0.6) max(var(--gutter), env(safe-area-inset-left));
  /* A tap on a question advances – no grey flash over the whole screen on iOS. */
  -webkit-tap-highlight-color: transparent;
}

/* With var() inside, max() can't be caught by a plain declaration before it (the browser rejects
   it only after the cascade, and the property falls to 0): these blocks set those for Chromium 76. */
@supports not (width: min(1px, 2px)) {
  .screen {
    padding: var(--gutter) var(--gutter) calc(var(--gutter) * 0.6);
  }
}

/* Without the controls bar the screen reaches the bottom edge (home indicator). */
.app[data-screen='loading'] .screen,
.app[data-screen='intro'] .screen,
.app[data-screen='editor'] .screen,
.app[data-screen='print'] .screen {
  padding-bottom: max(calc(var(--gutter) * 0.6), env(safe-area-inset-bottom));
}

@supports not (width: min(1px, 2px)) {
  .app[data-screen='loading'] .screen,
  .app[data-screen='intro'] .screen,
  .app[data-screen='editor'] .screen,
  .app[data-screen='print'] .screen {
    padding-bottom: calc(var(--gutter) * 0.6);
  }
}

/* Home ends with the footer: the space under it matches its padding-top, so its text sits centred. */
.app[data-screen='home'] .screen {
  padding-bottom: max(var(--footer-pad), env(safe-area-inset-bottom));
}

@supports not (width: min(1px, 2px)) {
  .app[data-screen='home'] .screen {
    padding-bottom: var(--footer-pad);
  }
}

.app[data-screen='home'] .screen,
.app[data-screen='intro'] .screen,
.app[data-screen='loading'] .screen,
.app[data-screen='print'] .screen {
  overflow-y: auto;
}

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6rem;
  font-size: clamp(2.5rem, 6rem, 12vh);
  line-height: 1.05;
  text-wrap: balance;
}

.display--huge {
  font-size: 7.5rem;
  font-size: clamp(3rem, 7.5rem, 15vh);
}

.lead {
  font-size: 2rem;
  color: var(--muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.lead--big {
  font-size: 2.6rem;
  color: var(--text);
}

.panel {
  max-width: 88rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.panel--center {
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.panel--center .lead {
  margin-inline: auto;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.panel--center .actions {
  justify-content: center;
}

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

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

.btn--tertiary {
  gap: 0.5rem;
  min-height: 0;
  padding: 0.65rem 1.3rem;
  border-width: 0.15rem;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  --ring-drop: 0px;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 700;
}

@media (hover: hover) {
  .btn--tertiary:hover {
    --ring-drop: 0px;
    transform: none;
    border-color: var(--accent);
    box-shadow: none;
  }
}

.btn--tertiary:active {
  --ring-drop: 0px;
  transform: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  box-shadow: none;
}

@supports not (color: color-mix(in srgb, red, red)) {
  .btn--tertiary:active {
    background: #faedde;
  }
}

.btn--tertiary svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The share button (js/share.js): the icon alone in a circle, as tall as a tertiary button with
   text, so it sits level with "Označit jako odehraný" in the end screen's row. */
.share {
  align-self: center;
  padding: 0.65rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 1.3rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- Home screen */

/* TASK-home: one calm page. The sticky top bar with the search, the game left halfway, the
   newcomer's hero, then three zones (Hrát, Uspořádat večer, Vytvořit vlastní) and the footer, with
   more space between zones than inside them. */
.home {
  --zone-gap: 6rem;
  --block-gap: 2rem;
  max-width: 120rem;
  /* At least the screen's height, so the footer stays at the bottom when a filter leaves few cards. */
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Margins rather than a flex gap, which Chromium 76 (smart TVs) doesn't have. */
.home > * + * {
  margin-top: var(--block-gap);
}

.home > .zone + .zone,
.home > .zone + .home__footer {
  margin-top: var(--zone-gap);
}

.home > .home__bar + * {
  margin-top: 1.6rem;
}

.home > .home__bar + .hero {
  margin-top: 1.8rem;
}

/* The last element before the footer takes the spare height; with a full grid there is none. */
.home > :nth-last-child(2) {
  margin-bottom: auto;
}

/* Sections scrolled to and focused cards keep clear of the sticky bar (measureBar() in home.js
   writes how much of it stays on screen). The bar's full-bleed margins mustn't scroll sideways. */
.app[data-screen='home'] .screen {
  overflow-x: hidden;
  scroll-padding-top: var(--home-bar, 8rem);
}

/* §2: the top bar – the wordmark (the h1), the search with 🎲, the static pages' links. It sticks to
   the top; transparent on the ground until the page scrolls under it, then the ground and a hairline. */
.home__bar {
  position: -webkit-sticky;
  position: sticky;
  z-index: 5;
  /* Sticky offsets count from inside the screen's padding: this puts the stuck bar at the very top
     (measureBar() in home.js sets the exact value). */
  top: calc(-1 * var(--gutter));
  display: grid;
  /* The search in the middle of the bar: measureBar() in home.js writes the wider side's width
     (the wordmark's or the links') as --bar-side, so both sides start equal and the search shrinks
     rather than move off centre. Before that, each side is as wide as its content. */
  grid-template-columns: minmax(var(--bar-side, max-content), 1fr) minmax(0, 48rem) minmax(var(--bar-side, max-content), 1fr);
  grid-template-areas: 'logo find nav';
  align-items: center;
  gap: 1rem 3.2rem;
  margin: calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) 0;
  /* Low: room for the wordmark's rays above, a little air below. */
  padding: 1.6rem var(--gutter) 1rem;
  border-bottom: 0.15rem solid transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.home__bar.is-scrolled {
  border-bottom-color: var(--line);
  background: var(--ground);
}

.home__title {
  grid-area: logo;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
}

.home__find {
  grid-area: find;
  display: flex;
  align-items: center;
  min-width: 0;
}

.home__find .search {
  flex: 1 1 auto;
}

/* 🎲 "Překvap mě": a round flat control as tall as the field. */
.home__dice {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  margin-left: 0.8rem;
  border: 0.15rem solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.home__dice svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .home__dice:hover {
    border-color: var(--accent);
  }
}

.home__dice:active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .home__dice:active {
    background: #faedde;
  }
}

.home__navwrap {
  grid-area: nav;
  justify-self: end;
}

.home__nav {
  /* A grid rather than a flex gap, which Chromium 76 (smart TVs) doesn't have. */
  display: grid;
  grid-auto-flow: column;
  gap: 0.4rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.5rem;
}

.home__menu {
  grid-area: menu;
  justify-self: end;
  display: none;
  place-items: center;
  width: 3.8rem;
  height: 3.8rem;
  border: 0.15rem solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}

.home__menu svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

@media (hover: hover) {
  .home__menu:hover {
    border-color: var(--accent);
  }
}

/* Narrow laptops: tighter gaps leave the centred search room for its whole placeholder. */
@media (max-width: 1440px) {
  .home__bar {
    column-gap: 2rem;
  }

  .home__nav {
    column-gap: 1.6rem;
  }
}

/* Narrower screens (an iPad in landscape too): the links go into the ☰ menu. */
@media (max-width: 1260px) {
  .home__bar {
    grid-template-columns: minmax(var(--bar-side, max-content), 1fr) minmax(0, 48rem) minmax(var(--bar-side, max-content), 1fr);
    grid-template-areas: 'logo find menu';
    gap: 1rem 2rem;
  }

  .home__navwrap {
    display: none;
  }

  .home__menu {
    display: grid;
  }
}

/* The KVIZ IQ wordmark (wordmarkSvg() in icons.js), one line of the title tall. Its rays and smile
   draw outside that box, into the space around the header. */
.home__logo {
  display: block;
}

/* Every wordmark: its height is set where it's used, the width follows from the viewBox. */
.wordmark {
  display: block;
  width: auto;
  height: 1em;
  overflow: visible;
}

.wordmark__kviz {
  stroke: var(--text);
}

.wordmark__marks {
  stroke: var(--accent);
}

.wordmark__top {
  stop-color: var(--accent);
}

/* Darker toward the bottom, so IQ keeps its contrast on the sand ground (the gradient ends below it). */
.wordmark__bottom {
  stop-color: var(--accent-ink);
}

/* Links to the static pages and the copyright, after the cards (home screen only). */
.home__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-top: var(--footer-pad);
  border-top: 0.15rem solid var(--line);
  color: var(--muted);
  font-size: 1.3rem;
}

.home__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home__link {
  color: var(--text);
  font-weight: 700;
  text-underline-offset: 0.2em;
  touch-action: manipulation;
}

@media (hover: hover) {
  .home__link:hover {
    color: var(--accent-ink);
  }
}

/* §4: the game left halfway – one line on an accent-tinted surface: what and where, then
   "Pokračovat" (as tall as the search field) and ✕. */
.resume {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.8rem 0.6rem 1.8rem;
  border: 0.15rem solid var(--accent-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: var(--raise);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .resume {
    background: rgb(250 240 226);
  }
}

.resume__text {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 1.6rem;
  overflow: hidden;
  font-size: 1.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.resume__kicker {
  margin-right: 1.2rem;
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.resume__quiz {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
}

.resume__where {
  margin-left: 1rem;
  color: var(--muted);
}

.resume__go {
  flex: none;
  min-height: 3.8rem;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1.5rem;
}

.resume__go svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.resume__discard {
  flex: none;
  margin-left: 1rem;
}

/* §9: a zone is a heading row and its blocks. Three zone headings on the page, nothing else that big. */
.zone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

.zone__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: 4.4rem;
}

.zone__title {
  margin-right: 2rem;
  font-family: var(--font-display);
  font-size: 2.8rem;
  line-height: 1.15;
}

.zone__title:focus {
  outline: none;
}

/* §4: "Odehráno 4 z 53" and a bar, right of "Hrát". Flat; pressed it is the "Neodehrané" lens. */
.progress {
  display: inline-flex;
  align-items: center;
  min-height: 3.6rem;
  padding: 0 1.2rem;
  border: 0.15rem solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease;
}

.progress:disabled {
  cursor: default;
}

@media (hover: hover) {
  .progress:not(:disabled):hover {
    border-color: var(--accent);
  }
}

.progress[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--surface);
  color: var(--text);
}

.progress__bar {
  display: block;
  width: 12rem;
  height: 0.8rem;
  margin-left: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 0.1rem var(--line);
}

.progress__fill {
  display: block;
  height: 100%;
  background: var(--correct);
}

/* §5: the lens chips – one row that scrolls sideways out to the screen edges, with snap; the
   padding keeps the chips' focus marks inside the scroller, and the ends fade while there's more.
   Margins on the items stand in for the flex gap. */
.lenses-wrap {
  position: relative;
}

.lenses {
  display: flex;
  align-items: center;
  margin: -0.35rem calc(-1 * var(--gutter));
  padding: 0 calc(var(--gutter) - 0.35rem);
  overflow-x: auto;
  list-style: none;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.lenses::-webkit-scrollbar {
  display: none;
}

.lenses > li {
  display: flex;
  flex: none;
  margin: 0.35rem;
  scroll-snap-align: start;
}

/* The row's end padding, which a scrolling flex row would drop. */
.lenses::after {
  content: '';
  flex: 0 0 calc(var(--gutter) - 0.35rem);
  height: 1px;
}

.lenses-wrap:not(.is-start) .lenses {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem);
  mask-image: linear-gradient(to right, transparent, #000 6rem);
}

.lenses-wrap:not(.is-end) .lenses {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 6rem);
  mask-image: linear-gradient(to left, transparent, #000 6rem);
}

.lenses-wrap:not(.is-start):not(.is-end) .lenses {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

/* ‹ and › for a mouse, over the faded ends (keys move by chip, touch screens swipe). */
.lenses__arrow {
  display: none;
}

@media (hover: hover) {
  .lenses__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin-top: -1.7rem;
    border: 0.15rem solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: var(--raise);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s ease;
  }

  .lenses__arrow:hover {
    border-color: var(--accent);
  }

  .lenses__arrow svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .lenses__arrow--prev {
    left: 0;
  }

  .lenses__arrow--next {
    right: 0;
  }

  .lenses-wrap.is-start .lenses__arrow--prev,
  .lenses-wrap.is-end .lenses__arrow--next {
    display: none;
  }
}

.lens {
  display: inline-flex;
  align-items: center;
  height: 3.4rem;
  padding: 0 1.1rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.lens__icon {
  margin-right: 0.6rem;
  font-size: 1.5rem;
  line-height: 1;
}

.lens__count {
  margin-left: 0.6rem;
  color: var(--muted);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

/* The season's lens leads, in the accent. */
.lens--season {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .lens--season {
    background: rgb(249 235 218);
  }
}

@media (hover: hover) {
  .lens:hover {
    border-color: var(--accent);
  }
}

.lens[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.lens[aria-pressed='true'] .lens__count {
  color: inherit;
}

.lenses__sep {
  align-self: stretch;
  width: 0.15rem;
  background: var(--line);
}

.lenses > li.lenses__sep {
  margin: 0.8rem 0.6rem;
}

/* §6: one card component. Four columns on a laptop and a TV, three on a portrait tablet; phones get a
   compact list (the phone section). */
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1000px) {
  .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cards > li {
  display: flex;
  min-width: 0;
}

/* §5: the featured card spans two columns and two rows (the grid's first quiz). */
.cards.has-featured > .is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

/* Three columns: the featured card and eleven fill whole rows; the twelfth waits for "Ukázat všech". */
@media (max-width: 1000px) {
  .cards.has-featured.is-limited > li:nth-child(13) {
    display: none;
  }
}

.card {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1.7rem 1.6rem 1.4rem;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0.15rem 0 rgb(var(--shadow) / 0.08);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  /* The top edge and the corner motif run to the rounded edge. */
  overflow: hidden;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* The category's tone as a thin top edge… */
.card__edge {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.6rem;
  background: currentColor;
}

/* …and its pattern as a faint motif in the top-right corner, fading towards the text. */
.card__motif {
  position: absolute;
  top: 0.6rem;
  right: 0;
  width: 5.6rem;
  height: 4.8rem;
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 25%, transparent 75%);
  mask-image: radial-gradient(circle at 100% 0, #000 25%, transparent 75%);
  transition: opacity 0.15s ease;
}

.card__motif .pattern {
  display: block;
  width: 100%;
  height: 50%;
}

.card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-line);
  box-shadow: var(--raise);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--raise);
  }

  .card:hover .card__motif {
    opacity: 0.7;
  }

  /* The pointer is still over the quiz when it moves onto its delete button. :has() rules sit in
     their own @supports block throughout: an engine without :has() (smart TVs) would otherwise drop
     the whole rule, including selectors listed with it. */
  @supports selector(:has(a)) {
    .cards > li:has(.card__delete:hover) .card:not(.card--invalid) {
      transform: translateY(-3px);
      border-color: var(--accent);
    }
  }
}

/* The subject (and "Nové"): one row of a fixed height, so the titles of a row of cards share a
   baseline; it keeps clear of the corner motif. */
.card__top {
  display: flex;
  align-self: stretch;
  align-items: center;
  min-height: 2.2rem;
  margin-right: 3.2rem;
}

.card__top > * {
  flex: none;
}

/* A long subject gives way to "Nové" rather than wrapping. */
.card__top > .card__subject {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card__top > * + * {
  margin-left: 0.8rem;
}

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

.card__title {
  display: -webkit-box;
  max-width: 100%;
  /* The clamp cuts at the padding edge: room above for a háček (Č) on the first line. */
  max-height: 2.55em;
  margin-top: 0.35rem;
  padding-top: 0.15em;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  /* Whole words, like the question text: no "Českoslovens-ké" in a narrow card. */
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* Large serif letters have a wider left side bearing than the small subject above them;
     the offset aligns them optically. */
  margin-left: -0.03em;
}

/* Two lines in the grid (the whole text is on the intro and in the list view). The max-height is
   the clamp for engines without -webkit-line-clamp. */
.card__desc {
  display: -webkit-box;
  overflow: hidden;
  max-height: 2.9em;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.card .chip {
  margin: 0.5rem 0.5rem 0 0;
  font-size: 1.15rem;
}

/* At the bottom, so the chips of a row of cards line up. */
.card__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.3rem;
}

/* Rounds and questions are the same on nearly every quiz: only the list view shows them. */
.chip--list {
  display: none;
}

.card__meta:empty {
  display: none;
}

/* Played: still startable, on the muted surface, a small ✓ in the corner instead of the motif. */
.card--done {
  background: var(--surface-muted);
}

.card--done .card__title,
.card--done .card__subject {
  color: var(--muted);
}

.card--done .card__motif {
  opacity: 0.15;
}

.card__check {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--correct);
  color: var(--on-correct);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
}

.card__check::before {
  content: '✓';
}

/* "Nové": a small pill in the accent, no taller than the subject's row. */
.card__new {
  padding: 0.15em 0.8em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* "Právě teď" on the featured card: why it leads, outlined in the season lens's accent. */
.card__now {
  padding: 0.15em 0.8em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.15rem var(--accent-line);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Offline: the quiz plays, but its pictures need the internet (js/offline.js). */
.card__offline {
  padding: 0.15em 0.8em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.15rem var(--line);
  color: var(--muted);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* §5: the featured card – the pattern field with the category's icon left, the quiz right: its
   description, the round themes and the facts line (the whole card is the button). */
.card--featured {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
}

.card__art {
  position: relative;
  display: flex;
  flex: 0 0 38%;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  border-right: 0.15rem solid var(--line);
  background: var(--surface-2);
}

.card__art .pattern {
  display: block;
  flex: none;
  width: 100%;
  height: 4rem;
  opacity: 0.3;
}

.card__emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 9.6rem;
  height: 9.6rem;
  border: 0.15rem solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--raise);
  font-size: 4.6rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 2.2rem 2.4rem 2.4rem;
}

.card--featured .card__top {
  margin-right: 0;
}

.card--featured .card__title {
  max-height: 3.75em;
  margin-top: 0.8rem;
  font-size: 3rem;
  -webkit-line-clamp: 3;
}

.card--featured .card__desc {
  max-height: 4.35em;
  margin-top: 0.8rem;
  font-size: 1.4rem;
  -webkit-line-clamp: 3;
}

/* Three columns (portrait tablets): a narrower pattern field and a smaller title, so the title
   keeps whole words on two lines instead of three broken ones. */
@media (max-width: 1000px) {
  .card__art {
    flex-basis: 30%;
  }

  .card--featured .card__body {
    padding: 2rem 2rem 2.2rem;
  }

  .card--featured .card__title {
    font-size: 2.5rem;
  }
}

.card__themes {
  display: flex;
  flex-wrap: wrap;
  max-height: 6.2rem;
  margin: 0.8rem 0 1.6rem;
  overflow: hidden;
}

.card__themes .chip {
  margin: 0.5rem 0.5rem 0 0;
  font-size: 1.15rem;
}

.card__facts {
  margin-top: auto;
  color: var(--text);
  font-weight: 700;
  font-size: 1.4rem;
}

/* "Kvíz na míru s AI" (§8): not a quiz but an action – an accent-tinted surface with an accent edge
   and the sparkles. Hover and focus are the quiz cards'. */
.card--add {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .card--add {
    background: rgb(250 240 226);
  }
}

.card--add .card__edge {
  color: var(--accent);
}

.card__add-icon {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}

.card__add-icon svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card--add .card__title {
  color: var(--accent-ink);
}

.card--add .card__desc {
  color: var(--text);
}

/* Delete button of an uploaded quiz: a sibling of the card, in its top-right corner over the motif. */
.cards > li.is-custom {
  position: relative;
}

.cards > li.is-custom .card__top {
  margin-right: 8.4rem;
}

.card__delete {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: grid;
  place-items: center;
  min-width: 2.8rem;
  height: 2.8rem;
  padding: 0 0.6rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease;
}

/* With a mouse, the button shows only while the card is hovered or reached
   by keyboard. Touch screens can't hover, so there it stays visible. */
@media (hover: hover) {
  @supports selector(:has(a)) {
    .cards > li:not(:hover):not(:has(:focus-visible:not([data-quiet-focus]))) .card__delete {
      opacity: 0;
    }
  }
}

.card__delete svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .card__delete:hover {
    border-color: var(--danger);
    color: var(--danger);
  }
}

.card__delete:active {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .card__delete:active {
    background: #f1e0db;
  }
}

/* Moves with the card when it lifts on hover. */
@supports selector(:has(a)) {
  .cards > li:has(.card:focus-visible) .card__delete {
    transform: translateY(-3px);
  }
}

@media (hover: hover) {
  @supports selector(:has(a)) {
    .cards > li:not(:has(.card--invalid)):hover .card__delete {
      transform: translateY(-3px);
    }
  }
}

/* List view: the button sits at the right end of the row, vertically centred. */
/* Beats the padding of `.cards--list .card:not(.card--invalid)`. */
.cards--list > li.is-custom .card {
  padding-right: 5.2rem;
}

.cards--list .card__delete {
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
}

@supports selector(:has(a)) {
  .cards--list > li:has(.card:focus-visible) .card__delete {
    transform: translate(3px, -50%);
  }
}

@media (hover: hover) {
  @supports selector(:has(a)) {
    .cards--list > li:not(:has(.card--invalid)):hover .card__delete {
      transform: translate(3px, -50%);
    }
  }
}

/* After deleting an uploaded quiz: a message with "Vrátit zpět" at the bottom centre. The bar
   runs down for as long as the undo lasts and stops while the mouse is over the toast. */
.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 2.4rem;
  bottom: max(2.4rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.6rem;
  width: max-content;
  max-width: min(64rem, calc(100vw - 2 * var(--gutter)));
  padding: 1rem 1rem 1rem 2rem;
  overflow: hidden;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--raise);
  font-size: 1.4rem;
  font-weight: 700;
  animation: toast-in 0.2s ease-out;
}

@supports not (width: min(1px, 2px)) {
  .toast {
    max-width: 64rem;
  }
}

/* Without a button the toast is as tall as its text, so it pads evenly. */
@supports selector(:has(a)) {
  .toast:not(:has(.toast__action)) {
    padding: 1.4rem 2rem;
  }
}

.toast__text {
  margin: 0;
}

.toast__action {
  flex: none;
}

/* A quiz was added: an olive check badge and an olive bar, the rest as any toast. */
.toast.toast--success {
  padding-left: 1.4rem;
}

.toast__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--correct);
  color: var(--on-correct);
}

.toast__mark svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast--success .toast__bar {
  background: var(--correct);
}

.toast__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.3rem;
  background: var(--accent);
  transform-origin: left;
  animation: toast-time var(--toast-ms) linear forwards;
}

.toast.is-held .toast__bar {
  animation-play-state: paused;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 1rem);
  }
}

@keyframes toast-time {
  to {
    transform: scaleX(0);
  }
}

/* "Překvap mě" (home-pick.js): the highlight spinning across the cards lifts each one with a thick
   accent ring; the card it lands on pulses larger before it grows over the screen. Above its
   neighbours, which the larger card overlaps. */
.card.is-picked,
.card.is-chosen {
  z-index: 2;
  border-color: var(--accent);
  box-shadow:
    0 0 0 0.4rem var(--accent),
    0 1.2rem 3rem rgb(var(--shadow) / 0.3);
  transform: translateY(-4px) scale(1.05);
  transition:
    transform 0.08s ease-out,
    box-shadow 0.08s ease-out;
}

.card.is-chosen {
  transform: translateY(-6px) scale(1.12);
  transition:
    transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1),
    box-shadow 0.3s ease-out;
}

/* A picked card opening like a window onto the quiz's intro (zoomInto): the live home screen in a
   layer under the app (.zoom, inserted before .app, so the app paints above it), and the screen,
   with the intro rendered, growing from the card on its own ground. Closing (zoomBack) is the
   reverse: the intro in a layer over the app (.zoom__shot--window) shrinks onto the card. Nothing
   here takes clicks. */
.zoom {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.zoom__shot {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
}

.screen.is-window,
.zoom__shot--window {
  background: var(--ground);
  will-change: transform;
}


.search {
  position: relative;
  display: block;
  min-width: 0;
}

.search__icon {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.9rem;
  color: var(--muted);
  pointer-events: none;
}

.search__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.search__input {
  width: 100%;
  height: 3.8rem;
  padding: 0 1.4rem 0 3.8rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.4rem;
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search__input:focus-visible {
  outline: 0.2rem solid var(--accent-line);
  outline-offset: 0;
  border-color: var(--accent-line);
}



/* Two classes, so it beats the later generic .field__input (radius, font). */
.catalog__tools .catalog__sort {
  height: 4.4rem;
  padding-left: 1.4rem;
  border-radius: 999px;
  font-size: 1.4rem;
  font-weight: 700;
}

/* "Hrát"'s grid with its footer row: the count left, "Ukázat všech" centred on the grid. */
.catalog__results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.6rem;
}

.catalog__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: 'count more .';
  align-items: center;
  gap: 1rem 1.6rem;
}

.catalog__count {
  grid-area: count;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.catalog__more {
  grid-area: more;
}

/* The sort and the grid / list switch: at the right end of the lens row, as tall as the chips and
   centred on them (phones: the right end of "Hrát"'s heading row). */
.catalog .zone__head {
  justify-content: flex-start;
}

.catalog__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.6rem;
}

.catalog__filters > .catalog__tools:first-child {
  grid-column: 2;
}

/* The chips bleed only to the left screen edge here; on the right the row stops at the tools. */
.catalog__filters .lenses {
  margin-right: -0.35rem;
  padding-right: 0;
}

.catalog__filters .lenses::after {
  flex-basis: 0;
}

.catalog__tools {
  margin-left: auto;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1rem;
}

.catalog .segmented {
  height: 4.4rem;
  align-items: stretch;
}

.catalog__filters .catalog__sort,
.catalog__filters .segmented {
  height: 3.4rem;
}

.catalog__empty {
  display: grid;
  justify-items: start;
  gap: 1.2rem;
  padding: 2.4rem;
  border: 0.15rem dashed var(--line);
  border-radius: var(--radius);
}

.catalog__empty-text {
  max-width: 60ch;
  color: var(--muted);
  font-size: 1.6rem;
}

/* "Vytvořit kvíz „…“ s AI": a long query wraps inside the button, never past the box, in balanced
   lines (no "AI" alone on the second one), the icon at the start of the first. */
.catalog__empty .btn {
  max-width: 100%;
}

.catalog__ai-label {
  text-align: center;
  text-wrap: balance;
}

.catalog__ai-label svg {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  vertical-align: -0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A file dragged over the home screen */
.app.is-dropping .home {
  outline: 0.3rem dashed var(--accent-line);
  outline-offset: 1rem;
  border-radius: var(--radius);
}

/* Grid / list switch */
.segmented {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.segmented__btn {
  display: grid;
  place-items: center;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.segmented__btn svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .segmented__btn:hover {
    color: var(--text);
  }
}

.segmented__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

/* List: one quiz per row – subject and title left, description in the middle, details right. */
.cards--list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
}

.cards--list .card:not(.card--invalid) {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(22.3rem, auto);
  grid-template-areas:
    'top desc meta'
    'title desc meta';
  align-items: center;
  gap: 0.2rem 2rem;
  padding: 0.9rem 1.6rem 0.9rem 2.4rem;
}

/* The tone's edge runs down the row's left side; no corner motif. */
.cards--list .card__edge {
  right: auto;
  bottom: 0;
  width: 0.6rem;
  height: auto;
}

.cards--list .card__motif {
  display: none;
}

.cards--list .card:focus-visible {
  transform: translateX(3px);
}

@media (hover: hover) {
  .cards--list .card:hover {
    transform: translateX(3px);
  }

  @supports selector(:has(a)) {
    .cards--list > li:has(.card__delete:hover) .card:not(.card--invalid) {
      transform: translateX(3px);
    }
  }
}

@media (hover: hover) {
  .cards--list .card--invalid:hover {
    transform: none;
  }
}

.cards--list .card__top {
  grid-area: top;
  align-self: end;
  margin-right: 0;
}

.cards--list .card__title {
  grid-area: title;
  align-self: start;
  margin-top: 0;
  font-size: 1.9rem;
}

.cards--list .card__desc {
  grid-area: desc;
  display: block;
  max-height: none;
  margin-top: 0;
  font-size: 1.2rem;
}

.cards--list .chip--list {
  display: inline-block;
}

.cards--list .card__meta {
  grid-area: meta;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 0;
}

.cards--list .card__check {
  top: 50%;
  margin-top: -1.2rem;
}

.cards--list .card--done .card__meta {
  margin-right: 3.4rem;
}

/* Inactive card: the file was found but can't start. */
.card--invalid {
  cursor: default;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background: var(--surface-muted);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .card--invalid {
    border-color: rgb(158 46 36 / 0.55);
  }
}

@media (hover: hover) {
  .card--invalid:hover {
    transform: none;
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .card--invalid:hover {
      border-color: rgb(158 46 36 / 0.55);
    }
  }
}

.card--invalid .card__subject {
  color: var(--danger);
}

.card--invalid .card__title {
  color: var(--muted);
}

.card__file {
  font-size: 1.15rem;
  color: var(--muted);
}

.card__errors {
  display: grid;
  gap: 0.3rem;
  padding-left: 1.1em;
  color: var(--danger-text);
  font-size: 1.2rem;
  overflow-wrap: anywhere;
}

.errors {
  padding: 1.4rem 1.8rem;
  border: 0.2rem solid var(--danger);
  border-radius: var(--radius);
  background: var(--danger-bg);
  font-size: 1.3rem;
}

.errors__title {
  font-size: 1.7rem;
  margin-bottom: 0.6rem;
}

.errors__list {
  padding-left: 1.2em;
  display: grid;
  gap: 0.6rem;
}

.errors__list ul {
  padding-left: 1.2em;
  color: var(--danger-text);
}

/* ---------------------------------------------------------------- Home hero and zones (TASK-home) */

/* §3: the newcomer's hero, on the ground with no box: the promise and the two buttons, the ways to
   play with the chosen way's steps under them, the live preview right. A soft line ends it. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
  grid-template-areas:
    'text preview'
    'how how';
  align-items: center;
  gap: 1.8rem 4.8rem;
  padding-bottom: 1.8rem;
  background: linear-gradient(to right, transparent, var(--line) 20%, var(--line) 80%, transparent) left bottom / 100% 0.15rem no-repeat;
}

.hero__text {
  grid-area: text;
}

.hero__how {
  grid-area: how;
  min-width: 0;
}

.hero .preview {
  grid-area: preview;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 4.2rem;
  line-height: 1.05;
  text-wrap: balance;
}

.hero__lead {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.55rem;
  line-height: 1.45;
  text-wrap: pretty;
}

.hero__actions {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.8rem;
}

/* The two buttons are the same size, a little larger than usual. */
.hero__actions .btn {
  font-size: 1.7rem;
}

.hero__actions svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The play triangle is filled. */
.hero__actions .btn--primary svg {
  fill: currentColor;
  stroke-width: 1.5;
}

/* The ways to play: one segmented control, a pill with its small illustration each. The chosen one
   is tinted and ringed (the illustrations' accent would vanish on a solid accent fill). */
.ways {
  display: inline-flex;
  max-width: 100%;
  margin: 0;
  padding: 0.3rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  list-style: none;
}

.ways > li {
  display: flex;
  min-width: 0;
}

.ways > li + li {
  margin-left: 0.2rem;
}

.way {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 4.4rem;
  padding: 0 1.6rem 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

.way__art {
  flex: none;
  margin-right: 0.6rem;
}

.way__art .illo {
  display: block;
  width: 3.6rem;
  height: 2.7rem;
}


@media (hover: hover) {
  .way:hover {
    background: var(--surface-2);
  }
}

.way[aria-pressed='true'] {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 0.15rem var(--accent-line);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .way[aria-pressed='true'] {
    background: rgb(249 235 218);
  }
}

/* Inside the control's border: an outline outside would touch its edge. */
.way:focus-visible {
  outline: 0.25rem solid var(--focus);
  outline-offset: -0.25rem;
}

/* The ways and, beside them, the chosen way's three steps in one line (the full how-to is "Jak
   hrát" in the bar). */
.hero__how {
  display: flex;
  align-items: center;
}

.ways + .how__steps {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 3.2rem;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  padding: 0;
  list-style: none;
}

.how__step {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.how__art .illo {
  display: block;
  width: 3.6rem;
  height: 2.7rem;
}

.how__text {
  display: grid;
  gap: 0.1rem;
}

.how__step-title {
  font-weight: 800;
  font-size: 1.35rem;
}

.how__line {
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1.35;
}

/* Narrower screens: the steps go under the ways. Portrait tablets: one column, the preview last. */
@media (max-width: 1100px) {
  .hero__how {
    display: block;
  }

  .ways + .how__steps {
    margin: 1.4rem 0 0;
  }
}

@media (max-width: 1000px) and (orientation: portrait) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'text'
      'how'
      'preview';
  }

  .hero .preview__tv {
    max-width: 40rem;
  }
}


/* §2: the live preview, a small TV on a stand showing a mock question screen. Its sizes are in rem
   like the rest of the page; the screen keeps 16:9 by a spacer's padding (no aspect-ratio on old
   engines; on the TV itself the percentage would follow its parent's width, not its own). */
.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.preview__tv {
  position: relative;
  width: 100%;
  max-width: 56rem;
  border: 0.8rem solid var(--text);
  border-radius: 1.4rem;
  background: var(--ground);
  box-shadow: var(--raise);
  overflow: hidden;
}

.preview__tv::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}

.preview__stand {
  width: 12rem;
  height: 1.6rem;
  border-radius: 0 0 0.6rem 0.6rem;
  background: var(--text);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
}

.preview__screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "body board";
  gap: 0.6rem 1.2rem;
  padding: 1rem 1.4rem 1.2rem;
}

.preview--solo .preview__screen {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "body";
}

.preview__head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.2rem;
}

.preview__counter {
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.preview__timer {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
}

/* Out of the grid, so the seconds are its only item and sit in the ring's centre. */
.preview__ring,
.preview__ring svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.preview__track,
.preview__progress {
  fill: none;
  stroke-width: 3.5;
}

.preview__track {
  stroke: var(--line);
}

.preview__progress {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.preview.is-running[data-phase='ask'] .preview__progress {
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 5s linear;
}

.preview__seconds {
  position: relative;
  font-weight: 800;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

/* After the question the timer gives way to the result (single player) or nothing. */
.preview:not([data-phase='ask']) .preview__timer {
  visibility: hidden;
}

.preview__result {
  position: absolute;
  right: 1.6rem;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  background: var(--correct);
  color: var(--on-correct);
  font-weight: 800;
  font-size: 1.2rem;
}

.preview__result:empty {
  display: none;
}

.preview__result[data-ok='false'] {
  background: var(--danger);
  color: var(--on-danger);
}

.preview__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  min-height: 0;
}

.preview__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.15;
}

.preview__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview__option {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.35rem 0.7rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.7rem;
  background: var(--surface);
  font-weight: 700;
  font-size: 1.2rem;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.preview__option > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview__letter {
  display: grid;
  flex: none;
  margin-right: 0.6rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 1.1rem;
  font-weight: 800;
}

.preview__option.is-correct {
  border-color: var(--correct);
  background: var(--correct);
  color: var(--on-correct);
}

.preview__option.is-correct .preview__letter {
  background: var(--surface);
  color: var(--correct);
}

.preview__option.is-wrong {
  background: var(--surface-2);
  color: var(--muted);
}

.preview__option.is-wrong .preview__letter {
  background: var(--line);
}

/* Single player: the tapped option is ringed; a wrong pick turns brick red. */
.preview__option.is-chosen {
  box-shadow: inset 0 0 0 0.2rem var(--text);
}

.preview__option.is-chosen.is-wrong {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* The mini scoreboard: three rows of one height, slid to their places with a transform. */
.preview__board {
  grid-area: board;
  align-self: center;
  margin: 0;
  padding: 0.6rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.8rem;
  background: var(--surface);
  list-style: none;
}

.preview__team {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.8rem;
  padding: 0 0.6rem;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  transition:
    transform 0.5s ease,
    background-color 0.3s ease;
}

.preview__name {
  flex: 1;
  margin-right: 0.5rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview__pts {
  min-width: 2ch;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.preview__plus {
  margin-right: 0.5rem;
  color: var(--correct);
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.preview[data-phase='reveal'] .preview__team.is-scoring,
.preview[data-phase='score'] .preview__team.is-scoring {
  background: color-mix(in srgb, var(--correct) 16%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .preview[data-phase='reveal'] .preview__team.is-scoring,
  .preview[data-phase='score'] .preview__team.is-scoring {
    background: rgb(229 231 220);
  }
}

.preview[data-phase='reveal'] .is-scoring .preview__plus,
.preview[data-phase='score'] .is-scoring .preview__plus {
  opacity: 1;
}

.preview.is-still .preview__option,
.preview.is-still .preview__team {
  transition: none;
}

/* §7, zone 2: the organiser's tools, flat tiles with an icon, a title and one line; one row of four,
   two by two on tablets and phones. */
.kit__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  .kit__tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
}

.tool {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.4rem 1.6rem;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

@media (hover: hover) {
  .tool:hover {
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .tool:hover {
      background: rgb(252 245 236);
    }
  }
}

.tool:active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .tool:active {
    background: #faedde;
  }
}

/* Inside the tile's border: its overflow would clip an outline outside. */
.tool:focus-visible {
  outline: 0.25rem solid var(--focus);
  outline-offset: -0.4rem;
}

.tool__icon {
  display: grid;
  flex: none;
  margin-right: 1.4rem;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-ink);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .tool__icon {
    background: rgb(249 235 218);
  }
}

.tool__icon svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool__text {
  display: grid;
  flex: 1;
  align-content: center;
  min-width: 0;
  gap: 0.2rem;
}

.tool__title {
  font-weight: 800;
  font-size: 1.6rem;
}

.tool__line {
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1.35;
}

/* Phones (§9): a tool that belongs on a computer says so, with the way to send it there. */
.tool__pc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 0.8rem 1.6rem 1rem;
  border-top: 0.15rem solid var(--line);
  color: var(--muted);
  font-size: 1.25rem;
}

.add__pc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  padding: 1rem 1.4rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.8rem;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.3rem;
}

/* The add dialog's note is for touch screens only (hover: none, like the drop text). */
@media (hover: hover) {
  .add__pc {
    display: none;
  }
}

/* The ☰ menu (narrow screens and phones): a panel that grows out of the ☰ button. openMenu() in
   home-sections.js writes the button's box (--menu-top, --menu-right, --menu-button), and the panel
   sits so that its ✕ covers ☰ exactly: same place, same size, same look. */
.dialog.menu {
  --menu-pad: 0.8rem;
  position: fixed;
  top: calc(var(--menu-top, 1.2rem) - var(--menu-pad));
  right: calc(var(--menu-right, 1.2rem) - var(--menu-pad));
  left: auto;
  bottom: auto;
  width: 30rem;
  max-width: calc(100vw - 1.6rem);
  margin: 0;
  padding: 0;
  /* The edge as an inset shadow: a border's rounding to device pixels would nudge the ✕ off ☰. */
  border: 0;
  background: var(--surface-2);
  box-shadow:
    inset 0 0 0 0.15rem var(--line),
    0 1.5rem 4rem rgb(var(--shadow) / 0.25);
  transform-origin: calc(100% - var(--menu-pad) - var(--menu-button, 3.8rem) / 2) calc(var(--menu-pad) + var(--menu-button, 3.8rem) / 2);
  animation: menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.dialog.menu::backdrop {
  background: rgb(var(--shadow) / 0.35);
  animation: menu-fade 0.2s ease-out;
}

.dialog.menu.is-closing {
  animation: menu-out 0.16s ease-in forwards;
}

.dialog.menu.is-closing::backdrop {
  animation: menu-fade 0.16s ease-in reverse forwards;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes menu-out {
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes menu-fade {
  from {
    opacity: 0;
  }
}

.menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--menu-pad) var(--menu-pad) var(--menu-pad) 1.6rem;
  border-bottom: 0.15rem solid var(--line);
}

.menu__title {
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The ✕ in the ☰ button's place, drawn like it. */
.menu__close {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--menu-button, 3.8rem);
  height: var(--menu-button, 3.8rem);
  padding: 0;
  border: 0.15rem solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}

.menu__close svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  animation: menu-turn 0.25s ease-out;
}

@keyframes menu-turn {
  from {
    opacity: 0;
    transform: rotate(-90deg);
  }
}

@media (hover: hover) {
  .menu__close:hover {
    border-color: var(--accent);
  }
}

.menu__close:active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .menu__close:active {
    background: #faedde;
  }
}

.menu__list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.6rem;
  list-style: none;
}

/* A row: icon, label, chevron; the icons line up with the title above. */
.menu__link {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 1.6rem;
  align-items: center;
  column-gap: 1.2rem;
  min-height: 4.8rem;
  padding: 0.4rem 1rem;
  border-radius: 0.8rem;
  color: var(--text);
  font-size: 1.7rem;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
}

.menu__link svg {
  display: block;
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__chevron svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: var(--muted);
}

@media (hover: hover) {
  .menu__link:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  }

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

.menu__link:active {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .menu__link:active {
    background: #efdec9;
  }
}

/* "Týmy, body a sezóna": a short explainer before picking a quiz. */
.dialog__title {
  font-family: var(--font-display);
  font-size: 2.8rem;
  margin-bottom: 1rem;
}

.info__list {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.3em;
  font-size: 1.6rem;
}

/* "Co dál?" (TASK-journey §11): suggestions after a quiz, in a dialog or under a solo score on phones. */
.dialog.next {
  width: 52rem;
  width: min(52rem, 92vw);
}

.next[open] {
  display: grid;
  gap: 1rem;
}

.next__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.next__head .dialog__title {
  margin-bottom: 0;
}

.next__list {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 1.4rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.9rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color 0.15s ease;
}

@media (hover: hover) {
  .next__item:hover {
    border-color: var(--accent);
  }
}

.next__icon {
  display: grid;
  flex: none;
  margin-right: 1.2rem;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 2rem;
  line-height: 1;
}

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

.next__icon svg {
  width: 2.2rem;
  height: 2.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.next__text {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 0.2rem;
}

.next__kicker {
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.next__title {
  font-weight: 800;
  font-size: 1.6rem;
}

.next--inline {
  display: grid;
  gap: 1rem;
  width: 100%;
  margin-top: 1.6rem;
  text-align: left;
}

.next__heading {
  font-family: var(--font-display);
  font-size: 2.2rem;
}

/* The titles of a row of tiles share a line, whatever the text under them. */
.kit__tools .tool {
  align-items: flex-start;
}

/* §8, zone 3: the AI card, the two small tools stacked in one cell, then the own quizzes. */
.create__tools {
  flex-direction: column;
}

.create__list {
  display: grid;
  flex: 1 1 auto;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.create__list .tool {
  padding: 1rem 1.4rem;
}

.create__list .tool__icon {
  width: 3.8rem;
  height: 3.8rem;
  margin-right: 1.2rem;
}

.create__list .tool__icon svg {
  width: 2rem;
  height: 2rem;
}

.create__list .tool__title {
  font-size: 1.5rem;
}

.create__list .tool__line {
  font-size: 1.2rem;
}

/* ---------------------------------------------------------------- Quiz intro */

/* Two columns in landscape (title and start | rounds, rules and "Před hrou") so everything fits
   without scrolling. The share icon has a row of its own in the bottom-right corner, under the right
   column, so it never covers a card (and the fit counts it). */
.intro {
  min-height: 100%;
  max-width: 150rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2rem 5rem;
}

.intro__main {
  grid-column: 1;
  grid-row: 1 / 3;
}

.intro__side {
  grid-column: 2;
  grid-row: 1;
}

/* Zoomed with the columns, so it keeps their scale (and the touch floor's arithmetic). */
.intro__share {
  zoom: var(--intro-zoom, 1);
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
}

.intro__main,
.intro__side {
  /* Below 1 only when the intro wouldn't fit otherwise (keepIntroFitted in js/screens/intro.js). */
  zoom: var(--intro-zoom, 1);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Two cards: the rounds (first, larger, numbered tiles) and the quieter rules below. */
.intro__side {
  gap: 1.6rem;
}

.intro__card {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 2.4rem;
  border: 0.2rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
}

.intro__card--rules {
  gap: 0.8rem;
  padding: 1.6rem 2.4rem;
}

.intro .chip {
  font-size: 1.6rem;
}

.intro__title {
  font-size: 2rem;
  color: var(--accent-ink);
}

.intro__card--rounds .intro__title {
  font-family: var(--font-display);
  font-size: 2.6rem;
}

.intro__card--rules .intro__title {
  font-size: 1.7rem;
}

.rules {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.4em;
  font-size: 1.5rem;
}

/* Texts for both modes in one grid cell, the other mode's invisible (see renderIntro): the
   single-player switch never resizes the rules panel or the joker hint. */
.stack {
  display: grid;
}

.stack > * {
  grid-area: 1 / 1;
}

.stack > .is-inactive {
  visibility: hidden;
}

.intro__rounds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  padding: 0;
  list-style: none;
}

.intro__round {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-width: 0;
  padding: 0.7em 0.9em;
  border-radius: calc(var(--radius) * 0.6);
  background: var(--surface-2);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.intro__round-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  /* The body font: the display font's digits sit high in the circle. */
  font-size: 0.9em;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.intro__round-icon {
  flex: none;
  font-size: 1.3em;
  line-height: 1;
}

.intro__round-theme {
  min-width: 0;
}

/* Below 1280 px the root font sits at its floor while the right column narrows, so two tiles a
   row leave ~110 px for a theme and a long word ("technologických") overflows. One tile a row
   takes about the same height (the themes then fit on one line). Landscape phones too. */
@media (max-width: 1279px) and (min-aspect-ratio: 1/1) {
  .intro__rounds {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rules li::marker {
  color: var(--accent-ink);
  font-weight: 800;
}

.intro .actions .btn--primary {
  font-size: 2.6rem;
}

@media (max-aspect-ratio: 1/1) {
  .intro {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    align-content: center;
  }

  /* One column: the title and Start, the rounds, the rules, "Před hrou", then the share icon at the
     right end. Nothing beside it, so single player's empty checklist space goes. */
  .intro__main,
  .intro__side,
  .intro__share {
    grid-column: 1;
    grid-row: auto;
  }

  .intro__check > .is-inactive {
    display: none;
  }
}

/* Phones: "there's more below" on an intro the player hasn't scrolled yet (hintScroll in
   js/screens/intro.js). A child of .app placed over the screen's grid row, so it stays at the bottom
   of the visible area (the intro has no controls bar) and never takes layout space. */
.scroll-hint {
  position: absolute;
  grid-row: 1;
  grid-column: 1;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.15rem solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--raise);
  color: var(--accent-ink);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scroll-hint.is-shown {
  opacity: 0.85;
}

.scroll-hint svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: scroll-hint 1.8s ease-in-out infinite;
}

@keyframes scroll-hint {
  0%,
  100% {
    transform: translateY(-0.2rem);
  }

  50% {
    transform: translateY(0.3rem);
  }
}

/* ---------------------------------------------------------------- Question and answers */

.q {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.2rem;
  max-width: 150rem;
  margin: 0 auto;
}

.q__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.6rem;
  /* Timer height even in the reveal, where it's absent – so the counter doesn't jump vertically. */
  min-height: 7.2rem;
}

.q__where {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.q__theme {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Counter with a prominent number; in the reveal it takes the olive colour of the correct answer.
   Words and number are trimmed to cap height (text-box) and centred on each other,
   so the whole line is optically centred. */
.q__count {
  --count-color: var(--accent-ink);
  justify-self: center;
  padding: 0.95rem 1.4rem;
  border-radius: 999px;
  border: 0.2rem solid var(--line);
  background: var(--surface);
  white-space: nowrap;
}

.q__count--reveal {
  --count-color: var(--correct);
}

.q__count-label {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.q__count-n {
  font-family: var(--font-display);
  font-size: 1.6em;
  font-weight: 700;
  color: var(--count-color);
}

.q__count-total {
  font-weight: 800;
}

@supports (text-box: trim-both cap alphabetic) {
  .q__count-label > * {
    text-box: trim-both cap alphabetic;
  }
}

/* Without text-box (Firefox): Rockwell's digits are taller than its ascent, so shift them down. */
@supports not (text-box: trim-both cap alphabetic) {
  .q__count {
    padding-block: 0.6rem;
  }

  .q__count-n {
    position: relative;
    top: 0.19em;
  }
}

.timer {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 7.2rem;
  height: 7.2rem;
  font-size: 2rem;
  font-weight: 900;
  color: var(--text);
}

/* The ring starts at the top and empties clockwise. */
.timer__ring {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer__track {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--text) 12%, transparent);
  stroke-width: 9;
}

@supports not (color: color-mix(in srgb, red, red)) {
  .timer__track {
    stroke: rgb(43 30 22 / 0.12);
  }
}

.timer__progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset 0.2s linear,
    stroke 0.2s ease;
}

.timer__count {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.05em;
}

.timer__value {
  font-size: 1.45em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.timer__unit {
  font-size: 0.6em;
  color: var(--muted);
}

/* "Pozastaveno" hangs to the left of the ring – pausing doesn't change the timer height. */
.timer__status {
  position: absolute;
  right: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 0.65em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.timer__status:empty {
  display: none;
}

.timer.is-warning {
  color: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}

.timer.is-warning .timer__progress {
  stroke: var(--danger);
}

.timer.is-paused .timer__progress {
  stroke: var(--text);
}

@keyframes pulse {
  50% {
    transform: scale(1.07);
  }
}

/* Question body: font size is driven by --fit, computed by JS so everything fits without scrolling. */
.q__body {
  --fit: 1;
  --text-size: 5.2rem;
  --option-size: 2.8rem;
  --answer-size: 4.4rem;
  --note-size: 1.9rem;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--fit) * 2rem);
  overflow: hidden;
}

.q__body.has-side,
.q__body.has-media {
  justify-content: flex-start;
  --text-size: 4rem;
}

/* Without an image: text and options as one vertically centred block. */
.q__body.has-side:not(.has-media) {
  justify-content: center;
  --text-size: 4.6rem;
  --option-size: 3.2rem;
}

.q__body.has-side:not(.has-media) .q__main {
  flex: 0 1 auto;
  flex-direction: column;
}

.q__body.has-side:not(.has-media) .q__side {
  flex: 0 1 auto;
}

.q__body.has-media.has-side {
  --text-size: 3.4rem;
  --option-size: 2.4rem;
}

.q--reveal .q__body.has-options,
.q--reveal .q__body.has-media {
  --text-size: 3rem;
}

/* Phones only (fitContent's floor in js/dom.js): the text reached its minimum readable size and still
   doesn't fit, so the body scrolls vertically and its parts take their natural height. */
/* .q raises specificity above the centring rules of .q__body.has-side – centred overflow can't be scrolled to. */
.q .q__body.is-scrolling {
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: flex-start;
  /* The fade at the bottom says there's more; the padding lets the last line scroll clear of it. */
  padding-bottom: 2rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent);
}

.q__body.is-scrolling .q__main,
.q__body.is-scrolling .q__side {
  flex: none;
  min-height: auto;
}

.q__body.is-scrolling .media {
  flex: none;
  min-height: 22rem;
  min-height: min(22rem, 45vh);
}

.q__text {
  font-size: calc(var(--fit) * var(--text-size));
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}

.q__body:not(.has-media):not(.has-side) .q__text {
  text-align: center;
  max-width: 34ch;
  margin-inline: auto;
}

.q__main {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  gap: calc(var(--fit) * 2rem + 0.5rem);
}

.q__body.has-media .q__main {
  min-height: 45%;
}

.q__side {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--fit) * 1.4rem);
}

.q__body:not(.has-media) .q__side {
  justify-content: flex-start;
}

.q__body.has-media .q__side {
  flex: 0.9 1 0;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--fit) * 1.2rem + 0.3rem);
  padding: 0;
  list-style: none;
}

.has-media .options,
.options--many {
  grid-template-columns: 1fr;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.7em;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0.2rem 0 rgb(var(--shadow) / 0.1);
  font-size: calc(var(--fit) * var(--option-size));
  font-weight: 700;
  line-height: 1.15;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.option__letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
}

.option__text {
  min-width: 0;
  overflow-wrap: break-word;
}

.option.is-correct {
  background: var(--correct);
  border-color: var(--correct);
  color: var(--on-correct);
  box-shadow: inset 0 0 0 0.3rem var(--on-correct);
}

.option.is-correct .option__letter {
  background: var(--on-correct);
  color: var(--correct);
}

.option__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--on-correct);
  color: var(--correct);
  font-weight: 900;
}

/* The correct option is recognisable without colour: ✓, a dark inset ring and a "pop".
   The ring is inset so the question body's overflow doesn't clip it. */
.option.is-correct {
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes pop {
  0% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.option.is-wrong {
  border-color: color-mix(in srgb, var(--line) 45%, var(--ground));
  background: color-mix(in srgb, var(--surface) 30%, var(--ground));
  box-shadow: none;
  color: color-mix(in srgb, var(--muted) 75%, var(--ground));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .option.is-wrong {
    border-color: #d5c4ad;
    background: #eae0d2;
    color: #867364;
  }
}

/* Wrong options recede by colour, not opacity – a translucent option let the letters behind show through. */
.option.is-wrong .option__letter {
  background: color-mix(in srgb, var(--muted) 45%, var(--ground));
  color: var(--surface);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .option.is-wrong .option__letter {
    background: #ab9a89;
  }
}

.answer {
  display: flex;
  align-items: center;
  gap: 0.7em;
  box-shadow: inset 0 0 0 0.3rem var(--on-correct);
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
  padding: 0.6em 0.9em;
  border-radius: var(--radius);
  background: var(--correct);
  color: var(--on-correct);
}

.answer__check {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--on-correct);
  color: var(--correct);
  font-size: calc(var(--fit) * 2.6rem);
  font-weight: 900;
}

.answer__body {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  min-width: 0;
}

.answer__label {
  font-size: calc(var(--fit) * 1.7rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.answer__text {
  font-size: calc(var(--fit) * var(--answer-size));
  font-family: var(--font-display);
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* A list's reveal (TASK-competition §7): the accepted items in two or three columns. */
.answer--list .answer__body {
  flex: 1 1 auto;
  min-width: 0;
}

.answer__items {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 0.2em 1.2em;
  margin: 0.3em 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-size: calc(var(--fit) * var(--option-size));
  line-height: 1.15;
}

.answer__items[data-cols='3'] {
  --cols: 3;
}

/* The format line above an estimate or list question: small, like a kicker. */
.q__format {
  align-self: flex-start;
  padding: 0.25em 0.8em;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-ink);
  font-size: calc(var(--fit) * 1.6rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.q__body:not(.has-media):not(.has-side) .q__format {
  align-self: center;
}

.q__body:not(.has-media) .answer {
  align-self: flex-start;
  min-width: 30rem;
  min-width: min(100%, 30rem);
}

.note {
  font-size: calc(var(--fit) * var(--note-size));
  color: var(--muted);
  border-left: 0.35rem solid var(--accent);
  padding-left: 0.8em;
  text-wrap: pretty;
}

.q__body:not(.has-media) .note {
  max-width: 70ch;
}

.note__label {
  color: var(--accent-ink);
  font-weight: 800;
}

.page__link,
.page__kicker-link {
  color: var(--accent-ink);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .page__link:hover,
  .page__kicker-link:hover {
    color: var(--text);
    text-decoration: underline;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------------------------------------------------------------- Images */

.media {
  position: relative;
  flex: 1.2 1 0;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 0.15rem solid var(--line);
  overflow: hidden;
}

/* The image is shown whole (uncropped) and fits the area the text leaves for it. */
.media__img {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  left: 0.6rem;
  width: calc(100% - 1.2rem);
  height: calc(100% - 1.2rem);
  object-fit: contain;
}

.media.is-loading .media__img {
  opacity: 0;
}

/* Slow reveal (TASK-competition §6): updateTimer() raises --reveal from 0 to 1 while the question
   runs; the picture starts blurred, or zoomed in on its focus point, and ends sharp and whole. The
   frame clips it, and its size never changes, so fitting is unaffected. */
.media[data-reveal='blur'] .media__img {
  filter: blur(calc((1 - var(--reveal)) * 2.5rem));
  transition: filter 0.2s linear;
}

.media[data-reveal='zoom'] .media__img {
  transform: scale(calc(4 - 3 * var(--reveal)));
  transform-origin: var(--focus);
  transition: transform 0.2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .media[data-reveal] .media__img {
    transition: none;
  }
}

.media__loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 1.6rem;
}

.media__placeholder {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  bottom: 0.6rem;
  left: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.2rem;
  border: 0.25rem dashed var(--line);
  border-radius: calc(var(--radius) - 0.3rem);
  text-align: center;
  overflow: hidden;
}

.media__icon {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23d98e3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='8' width='38' height='32' rx='4'/%3E%3Ccircle cx='17' cy='19' r='4'/%3E%3Cpath d='M43 32 32 22 12 40'/%3E%3Cpath d='M4 4l40 40' stroke='%23fb7185'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.media__fail {
  font-size: 1.8rem;
  color: var(--accent-ink);
}

.media__alt {
  font-size: 1.8rem;
  font-style: italic;
  max-width: 40ch;
}

.media__alt::before {
  content: '„';
}

.media__alt::after {
  content: '“';
}

/* The image credit on a reveal (credits.json): one line over the frame's bottom-right corner,
   absolutely positioned like the image, so it changes neither the frame's size nor --fit. Its solid
   backing keeps --muted at 6:1 whatever the picture underneath. */
.media__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  max-width: 100%;
  padding: 0.15rem 0.7rem 0.2rem;
  border-top-left-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: nowrap;
}

.media__credit,
.media__credit-link {
  display: flex;
  gap: 0.3em;
  min-width: 0;
}

.media__credit-link {
  color: inherit;
  text-decoration: none;
}

/* The author gives way first; the licence part never shrinks. */
.media__credit-author {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media__credit-licence {
  flex: none;
}

@media (hover: hover) {
  .media__credit-link:hover {
    color: var(--text);
    text-decoration: underline;
  }
}

/* ---------------------------------------------------------------- Motion */

/* Each new screen gently slides in from below. */
/* ---------------------------------------------------------------- Logo intro
   The first load in a tab (js/splash.js): the wordmark in the middle over the blurred screen, then
   it flies to the home title. The title's own wordmark is hidden until it lands. */

[data-splash] .home__logo {
  visibility: hidden;
}

.splash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.splash__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: color-mix(in srgb, var(--ground) 45%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .splash__veil {
    background: rgb(225 212 193 / 0.45);
  }
}

/* Without a backdrop blur the veil covers the screen nearly opaquely instead. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .splash__veil {
    background: rgb(225 212 193 / 0.92);
  }
}

/* As wide as fits both ways: about 40 % of a TV, two thirds of a portrait phone. */
.splash__logo {
  /* 26vh first for Chromium 76 TVs, which have no min() (and are 16:9, where it fits). */
  font-size: 26vh;
  font-size: min(24vw, 26vh);
  animation: splash-pop 0.25s ease-out both;
}

.splash__logo .wordmark {
  transform-origin: 0 0;
  will-change: transform;
}

@keyframes splash-pop {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

.enter {
  animation: screen-in 0.35s ease-out both;
}

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
}

/* After a swipe (only then, see setScreen) the next screen comes in from the side instead. */
.enter[data-dir='1'] {
  animation-name: screen-in-next;
}

.enter[data-dir='-1'] {
  animation-name: screen-in-prev;
}

@keyframes screen-in-next {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
}

@keyframes screen-in-prev {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
}

.confetti {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* ---------------------------------------------------------------- Round icons */

.round-icon {
  font-size: 9rem;
  font-size: clamp(4rem, 9rem, 16vh);
  line-height: 1;
}

/* ---------------------------------------------------------------- Joker and tiebreaker */

/* The intro's settings: the play mode, then that mode's options (TASK-journey §3). */
.intro__switches {
  display: grid;
  justify-items: start;
  gap: 1rem;
}

.intro__mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
}

/* A segmented control: three options in one pill, each with the home screen's small illustration
   (.way). The chosen one is tinted and ringed, like there: a solid accent fill would swallow the
   illustrations' accent. */
.mode {
  display: inline-flex;
  padding: 0.3rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.mode__opt {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 3.8rem;
  padding: 0 1.4rem 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.15s ease;
}

.mode__art {
  flex: none;
  margin-right: 0.5rem;
}

.mode__art .illo {
  display: block;
  width: 3.2rem;
  height: 2.4rem;
}

@media (hover: hover) {
  .mode__opt:hover {
    background: var(--surface-2);
  }
}

.mode__opt[aria-checked='true'] {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow: inset 0 0 0 0.15rem var(--accent-line);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .mode__opt[aria-checked='true'] {
    background: rgb(249 235 218);
  }
}

/* The chosen mode's name, shown only on phones, where the options are pictures alone. */
.mode__name {
  display: none;
}

/* Inside the control's border: an outline outside would touch its edge. */
.mode__opt:focus-visible {
  outline: 0.25rem solid var(--focus);
  outline-offset: -0.25rem;
}

.intro__modes {
  justify-self: stretch;
}

.intro__mode-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.intro__mode-hint {
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.4rem;
}

.intro__mode-hint + .switch {
  margin-top: 0.3rem;
}

.intro__mode-hint--tv {
  margin-top: 0.4rem;
  color: var(--accent-ink);
  font-weight: 700;
}

/* "Před hrou" (TASK-journey §10): a quiet, collapsible list under the actions. */
.check {
  border: 0.2rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
}

/* Like the rules card's heading, with the card's side padding. */
.check__summary {
  padding: 1.2rem 2.4rem;
  color: var(--accent-ink);
  font-size: 1.7rem;
  font-weight: 800;
  cursor: pointer;
}

.check__list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0 2.4rem 1.4rem;
  list-style: none;
}

.check__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 3.4rem;
}

.check__box {
  width: 1.8rem;
  height: 1.8rem;
  margin: 0;
  accent-color: var(--correct);
}

.check__label {
  font-size: 1.45rem;
  cursor: pointer;
}

.check__action {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.switch__hint + .switch {
  margin-top: 0.5rem;
}

.switch {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.8em;
  padding: 0.3em 0.4em;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 1.8rem;
  font-weight: 800;
  cursor: pointer;
}

.switch__track {
  position: relative;
  flex: none;
  width: 2.6em;
  height: 1.5em;
  border-radius: 999px;
  border: 0.15rem solid var(--line);
  background: var(--surface-2);
  transition: background-color 0.2s ease;
}

.switch__thumb {
  position: absolute;
  top: 50%;
  left: 0.2em;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  background: var(--text);
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

.switch[aria-checked='true'] .switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.switch[aria-checked='true'] .switch__thumb {
  background: var(--surface);
  transform: translate(1.1em, -50%);
}

/* Single player turns the joker off: the switch stays in place, off and dimmed. */
.switch:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Under each switch's label: indented by the switch's padding, track and gap (0.4 + 2.6 + 0.8em at 1.8rem). */
.switch__hint {
  margin: -0.3rem 0 0 6.84rem;
  max-width: 52ch;
  font-size: 1.4rem;
  color: var(--muted);
}

.switch--joker[aria-checked='true'] .switch__label::after {
  content: ' ★';
  color: var(--accent-ink);
}

.joker-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1em;
  border: 0.2rem dashed var(--accent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-ink);
  font-size: 1.7rem;
  font-weight: 700;
}

.joker-note::before {
  content: '★';
}

.end__tiebreaker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
  margin-top: 0.8rem;
  font-size: 1.6rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------- End */

.end__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* The played mark and "Sdílet" side by side: one row, so the end screen is as tall as before. */
.end__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* The site's QR code (renderQr in js/screens/rounds.js): absolutely in the screen's bottom-right
   corner, so the end screen's layout never changes. Only where that corner is free of the centred
   panel: wide screens (16:9 TVs, laptops), never phones. */
.app[data-screen='end'] .screen {
  position: relative;
}

.end__qr {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) * 0.6);
  margin: 0;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (min-aspect-ratio: 3/2) and (min-width: 601px) and (min-height: 501px) {
  .end__qr {
    display: flex;
  }
}

/* The wordmark, a little narrower than the code, with room above for its rays. */
.end__qr-logo {
  display: block;
  margin-bottom: 1rem;
  padding-top: var(--wordmark-overhang);
  font-size: 4rem;
}

.end__qr-text {
  margin-bottom: 0.6rem;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
}

.end__qr-code {
  display: block;
  width: 14rem;
  height: 14rem;
  border-radius: 0.8rem;
  background: var(--surface);
  border: 0.15rem solid var(--line);
  color: var(--text);
}

.end__qr-code svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.end__status {
  min-height: 1.4em;
  max-width: 60rem;
  font-size: 1.4rem;
  color: var(--muted);
  text-align: center;
}

.end__points {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 700;
  color: var(--accent-ink);
  /* Rockwell's capitals are taller than its ascent and it has lots of room below the baseline,
     so symmetric padding would sit the text high. Centre on the capitals instead. */
  line-height: 1;
  padding: 0.5em 0.8em 0.12em;
  border: 0.25rem solid var(--accent);
  border-radius: 999px;
}

@supports (text-box: trim-both cap alphabetic) {
  .end__points {
    text-box: trim-both cap alphabetic;
    padding: 0.44em 0.8em;
  }
}

/* ---------------------------------------------------------------- Scoreboard

   Teams and points on the TV (js/screens/teams.js, TASK-platform §1): the intro's teams row and
   dialog, the round end's points grid and ranking, the tiebreaker's estimates and the podium.
   Grids rather than flex gaps, which Chromium 76 lacks. */

/* The intro's row: a button and a one-line summary, the same height with or without teams. */
.intro__teams {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.8rem;
}

.intro__teams-summary {
  overflow: hidden;
  font-size: 1.4rem;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.intro__teams-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The teams dialog */
.teams {
  width: 46rem;
  width: min(46rem, 92vw);
}

/* Only when open, like .add: a display value would show the closed dialog. */
.teams[open] {
  display: grid;
  gap: 1rem;
}

.teams__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 3rem;
}

.teams__count {
  font-family: var(--font-body);
  font-size: 1.4rem;
  color: var(--muted);
}

.teams__hint {
  font-size: 1.5rem;
  color: var(--muted);
}

.teams__form {
  display: grid;
  gap: 0.4rem;
}

.teams__form .field__label {
  font-size: 1.3rem;
}

.teams__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
}

.teams__input {
  font-size: 1.7rem;
}

.teams__add {
  min-height: 0;
  padding-block: 0.3em;
}

.teams__message {
  min-height: 1.3em;
  font-size: 1.3rem;
  color: var(--danger-text);
}

.teams__reuse {
  justify-self: start;
}

.teams__list {
  display: grid;
  gap: 0.5rem;
  max-height: 40vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  counter-reset: team;
}

.teams__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0.4rem 0.3rem 1rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  font-size: 1.6rem;
  font-weight: 700;
  counter-increment: team;
}

.teams__item::before {
  content: counter(team) '.';
  color: var(--accent-ink);
}

.teams__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.teams__empty {
  font-size: 1.5rem;
  color: var(--muted);
}

/* Flat, like the add dialog's close button */
.teams__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0.15rem solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.teams__remove svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@media (hover: hover) {
  .teams__remove:hover {
    border-color: var(--danger);
    color: var(--danger);
  }
}

/* "Sestavit večer": the rounds of one quiz on the left, the evening's order on the right. */
/* .dialog.evening: beats the narrower .dialog rule further down. */
.dialog.evening {
  width: 76rem;
  width: min(76rem, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
}

.evening[open] {
  display: grid;
  gap: 1rem;
}

.evening__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.evening__title {
  font-family: var(--font-display);
  font-size: 2.8rem;
}

.evening__hint {
  font-size: 1.5rem;
  color: var(--muted);
}

.evening__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.evening__source {
  display: grid;
  gap: 0.6rem;
}

.evening select.field__input {
  min-height: 3.6rem;
  font-size: 1.5rem;
}

.evening__rounds,
.evening__list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.evening__rounds {
  margin-top: 0.4rem;
}

.evening__add {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.6rem;
  padding: 0.4rem 1rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.evening__add:disabled {
  background: var(--surface-2);
  color: var(--muted);
  cursor: default;
}

@media (hover: hover) {
  .evening__add:not(:disabled):hover {
    border-color: var(--accent);
  }
}

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

.evening__state {
  color: var(--accent-ink);
  font-size: 1.8rem;
  line-height: 1;
}

.evening__theme {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evening__subtitle {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
  font-size: 1.6rem;
}

.evening__count {
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.evening__list {
  counter-reset: pick;
}

.evening__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  counter-increment: pick;
}

.evening__item::before {
  content: counter(pick) '.';
  margin-right: 0.4rem;
  color: var(--accent-ink);
  font-size: 1.5rem;
  font-weight: 700;
}

.evening__pick {
  display: grid;
  min-width: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.evening__from {
  overflow: hidden;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evening__empty {
  padding: 1rem;
  border: 0.15rem dashed var(--line);
  border-radius: 0.6rem;
  color: var(--muted);
  font-size: 1.4rem;
}

.evening__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border: 0.15rem solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.evening__tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.evening__tool svg {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .evening__tool:not(:disabled):hover {
    border-color: var(--accent);
    color: var(--text);
  }
}

.evening__message {
  min-height: 1.4em;
  color: var(--muted);
  font-size: 1.4rem;
}

.evening .dialog__actions .btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Round end with teams: header, then the points grid beside the ranking, then "Další kolo". */
.scoreboard {
  height: 100%;
  max-width: 132rem;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
  gap: 1.4rem;
}

.scoreboard__head {
  display: grid;
  gap: 0.4rem;
  text-align: center;
}

.scoreboard__title {
  font-size: 4.4rem;
  font-size: clamp(2.5rem, 4.4rem, 8vh);
}

.scoreboard__hint {
  font-size: 1.5rem;
  color: var(--muted);
}

.scoreboard__body {
  display: grid;
  /* One column of teams stays narrow and centred; two columns (7+ teams) take the width. */
  grid-template-columns: minmax(0, var(--scores-width, 64rem)) minmax(18rem, 26rem);
  justify-content: center;
  align-items: start;
  gap: 2.4rem;
  min-height: 0;
}

.scoreboard__scores {
  display: grid;
  gap: 0.8rem;
}

.scoreboard__keys {
  font-size: 1.2rem;
  color: var(--muted);
  text-align: center;
}

.scoreboard__standings {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem 1.4rem;
  border: 0.2rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
}

.scoreboard__subtitle {
  font-size: 1.5rem;
  color: var(--accent-ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scoreboard .actions {
  justify-content: center;
  margin-top: 0;
}

.scores {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 0.6rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scores[data-cols='2'] {
  --cols: 2;
}

.scores__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem 0.4rem 1.2rem;
  border: 0.2rem solid var(--line);
  border-radius: 0.9rem;
  background: var(--surface);
  box-shadow: var(--raise);
}

.scores__row.is-joker {
  border-color: var(--accent);
}

/* Up to two lines, so a long name isn't cut where the row is narrow (tablets, phones). */
.scores__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.scores__stepper {
  display: grid;
  grid-template-columns: auto 5.2rem auto;
  align-items: center;
}

.scores__value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  /* Rockwell sits high in its line box (see .end__points): more room above than below. */
  line-height: 1;
  padding: 0.22em 0 0.08em;
  text-align: center;
  border-radius: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.scores__value:focus-visible {
  outline: 0.3rem solid var(--accent-line);
  outline-offset: 0.1rem;
}

/* Flat controls (like the add dialog's stepper): they tint, never move. */
.scores__step,
.scores__half,
.scores__joker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2rem;
  height: 3.2rem;
  padding: 0 0.5rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface-2);
  color: var(--accent-ink);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.scores__step.is-off {
  color: var(--line);
  cursor: default;
}

.scores__half[aria-pressed='true'],
.scores__joker[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.scores__joker:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) {
  .scores__step:hover:not(.is-off) {
    border-color: var(--accent);
  }

  .scores__half:hover {
    border-color: var(--accent);
  }

  .scores__joker:hover:not(:disabled) {
    border-color: var(--accent);
  }
}

.standings {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.standings__row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.25rem 0.4rem;
  border-radius: 0.5rem;
  font-size: 1.6rem;
  transition: transform 0.35s ease;
}

.standings__row.is-first {
  background: var(--surface-2);
}

.standings__pos {
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.standings__name {
  overflow: hidden;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.standings__total {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
}

/* The end screen's places 4 and on, in up to three columns under the podium. */
.standings--rest {
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 0.2rem 2rem;
  width: 78rem;
  width: min(100%, 78rem);
  text-align: left;
}

.standings--rest[data-cols='2'] {
  --cols: 2;
}

.standings--rest[data-cols='3'] {
  --cols: 3;
}

/* The tiebreaker's reveal with teams */
.tiebreak {
  gap: 1rem;
}

.tiebreak .end__points {
  font-size: 3.2rem;
}

.tiebreak .actions {
  margin-top: 0.4rem;
}

.tiebreak__question {
  max-width: 80rem;
  font-size: 2rem;
  font-weight: 700;
}

.tiebreak__note {
  max-width: 60rem;
  font-size: 1.5rem;
  color: var(--muted);
}

.estimates {
  display: grid;
  gap: 0.6rem;
  width: 52rem;
  width: min(100%, 52rem);
}

/* Five teams and more (no tie, so every team): two columns. */
.estimates[data-cols='2'] {
  width: 100%;
  width: min(100%, 100rem);
}

.estimates[data-cols='2'] .estimates__list {
  --cols: 2;
}

.estimates__title {
  font-size: 1.8rem;
  color: var(--accent-ink);
}

.estimates__hint {
  font-size: 1.4rem;
  color: var(--muted);
}

.estimates__list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  gap: 0.5rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.estimates__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem 7.5rem;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: left;
}

.estimates__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.estimates__input {
  padding-block: 0.2em;
  font-size: 1.7rem;
  text-align: right;
}

.estimates__badge {
  justify-self: start;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--correct);
  color: var(--on-correct);
  font-size: 1.3rem;
  font-weight: 800;
}

/* The end screen's podium: 2nd, 1st, 3rd from the left, the steps as tall as the place deserves. */
.end--teams {
  gap: 0.8rem;
}

.end--teams .display--huge {
  font-size: 5rem;
  font-size: clamp(2.5rem, 5rem, 9vh);
}

.end--teams .actions {
  margin-top: 0.4rem;
}

.podium {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 20rem);
  align-items: end;
  justify-content: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.podium__place {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.podium__name {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.podium__points {
  font-size: 1.5rem;
  color: var(--muted);
  font-weight: 700;
}

.podium__step {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: 3.6rem;
  padding-top: 0.5rem;
  border: 0.2rem solid var(--line);
  border-bottom: 0;
  border-radius: 0.8rem 0.8rem 0 0;
  background: var(--surface);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
}

.podium__place[data-place='1'] .podium__step {
  height: 6rem;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.podium__place[data-place='1'] .podium__name {
  font-size: 2.8rem;
}

.podium__place[data-place='2'] .podium__step {
  height: 4.8rem;
}

/* The winners' ceremony: covered places keep their size, so revealing one moves nothing. */
.podium__place.is-covered .podium__name,
.podium__place.is-covered .podium__points {
  visibility: hidden;
}

.podium__place.is-covered .podium__step {
  border-style: dashed;
  background: var(--surface-2);
  color: var(--muted);
}

.podium__place.is-revealed .podium__name,
.podium__place.is-revealed .podium__points {
  animation: podium-reveal 520ms cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}

.podium__place.is-revealed .podium__step {
  animation: pop 420ms ease-out both;
}

@keyframes podium-reveal {
  from {
    opacity: 0;
    transform: perspective(40rem) rotateX(80deg) translateY(1rem);
  }
}

.end__tiebreaker.is-waiting {
  visibility: hidden;
}

/* Seven teams and more: two columns of points and a denser ranking, so twelve fit 1280×720. */
.scoreboard[data-teams='7'],
.scoreboard[data-teams='8'],
.scoreboard[data-teams='9'],
.scoreboard[data-teams='10'],
.scoreboard[data-teams='11'],
.scoreboard[data-teams='12'] {
  --scores-width: 1fr;
}

.scoreboard[data-teams='7'] .standings__row,
.scoreboard[data-teams='8'] .standings__row,
.scoreboard[data-teams='9'] .standings__row,
.scoreboard[data-teams='10'] .standings__row,
.scoreboard[data-teams='11'] .standings__row,
.scoreboard[data-teams='12'] .standings__row {
  padding-block: 0.05rem;
  font-size: 1.45rem;
}

.scoreboard[data-teams='7'] .standings__total,
.scoreboard[data-teams='8'] .standings__total,
.scoreboard[data-teams='9'] .standings__total,
.scoreboard[data-teams='10'] .standings__total,
.scoreboard[data-teams='11'] .standings__total,
.scoreboard[data-teams='12'] .standings__total {
  font-size: 1.6rem;
}

/* ---------------------------------------------------------------- Link quizzes

   A quiz opened from a link (#k=…, TASK-platform §3): the intro's banner, and the add dialog's
   "Hotovo" step after a quiz made with AI. */

.intro__linked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-self: flex-start;
  gap: 0.6rem 1rem;
  padding: 0.4rem 0.5rem 0.4rem 1.2rem;
  border: 0.2rem dashed var(--accent);
  border-radius: 999px;
  background: var(--surface);
}

.intro__linked-label {
  color: var(--accent-ink);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intro__linked-saved {
  padding-right: 0.8rem;
  color: var(--correct);
  font-size: 1.4rem;
  font-weight: 700;
}

.intro__linked-saved::before {
  content: '✓ ';
}

.add__done {
  display: grid;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 0.2rem solid var(--correct);
  border-radius: var(--radius);
  background: var(--surface);
}

.add__done-title {
  font-size: 1.6rem;
  font-weight: 800;
}

/* ---------------------------------------------------------------- Single player */

/* Options are buttons. They keep the host option's size and type, so text fitting gives the same result. */
.options__item {
  display: flex;
  min-width: 0;
}

.option--choice {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  margin: 0;
  color: var(--text);
  text-align: start;
  cursor: pointer;
}

@media (hover: hover) {
  .option--choice:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .option--choice:hover:not(:disabled) {
      background: #fcf4ea;
    }
  }
}

/* Flat like the other small controls: a deeper tint, no movement. */
.option--choice:active:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .option--choice:active:not(:disabled) {
    background: #f8e9d7;
  }
}

/* Inside the border: the question body's overflow would clip an outline outside it. */
.option--choice:focus-visible {
  outline-offset: -0.5rem;
}

/* Paused: no answering a frozen question. */
.option--choice:disabled {
  color: var(--muted);
  cursor: default;
}

.option--choice:disabled .option__letter {
  background: color-mix(in srgb, var(--muted) 45%, var(--ground));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .option--choice:disabled .option__letter {
    background: #ab9a89;
  }
}

/* Open question: the field and "Odpovědět" in the options' place, scaled by --fit like them. */
.answer-form {
  display: flex;
  align-items: stretch;
  gap: 0.5em;
  max-width: 64rem;
  /* Room for the button's key side, which the question body's overflow would clip. */
  padding-bottom: var(--key-depth);
  font-size: calc(var(--fit) * var(--option-size));
}

/* A list's fields (TASK-competition §7): a grid of short fields, the button below. */
.answer-form--list {
  flex-direction: column;
  align-items: flex-start;
}

.answer-form__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4em;
  width: 100%;
}

.answer-form__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.45em 0.7em;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 0.2rem 0 rgb(var(--shadow) / 0.1);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
}

.answer-form__input::placeholder {
  color: var(--muted);
  font-weight: 600;
  opacity: 0.7;
}

/* Inside the border, like the options (an outline would be clipped). */
.answer-form__input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: inset 0 0 0 0.15rem var(--accent-line);
}

.answer-form__input[readonly] {
  background: var(--surface-2);
  color: var(--muted);
}

.answer-form .answer-form__submit {
  flex: none;
  min-height: 0;
  padding: 0.3em 1.4em;
  font-size: 0.8em;
}

/* Reveal: the result in the header's right slot, where the timer was. It's no taller than the
   timer, so the header height (and text fitting) doesn't change. */
.result {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.result__badge {
  padding: 0.45em 1em;
  border: 0.15rem solid transparent;
  border-radius: 999px;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.result__badge--correct {
  background: var(--correct);
  color: var(--on-correct);
}

.result__badge--wrong {
  background: var(--danger);
  color: var(--on-danger);
}

.result__badge--timeout {
  background: var(--text);
  color: var(--surface);
}

.result__badge--none {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--muted);
}

.result__score {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The player's wrong option: a danger-tinted surface with ✗; the others recede as in the host reveal. */
.option.is-wrong-choice {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger-text);
}

.option.is-wrong-choice .option__letter {
  background: var(--danger);
  color: var(--on-danger);
}

.option__cross {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
  border-radius: 50%;
  background: var(--danger);
  color: var(--on-danger);
  font-weight: 900;
}

/* Open question: what the player typed, above the correct answer. */
.your-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.45em;
  font-size: calc(var(--fit) * var(--option-size));
  font-weight: 700;
  line-height: 1.2;
}

.your-answer__mark {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  font-weight: 900;
}

.your-answer.is-right .your-answer__mark {
  background: var(--correct);
  color: var(--on-correct);
}

.your-answer.is-wrong .your-answer__mark {
  background: var(--danger);
  color: var(--on-danger);
}

.your-answer__label {
  color: var(--muted);
}

.your-answer__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.your-answer.is-wrong .your-answer__text {
  color: var(--danger-text);
}

.your-answer__none {
  color: var(--muted);
}

/* Reveal countdown: a thin bar in the gap under the header that empties until the next question.
   Absolutely positioned, so the header height (and text fitting) doesn't change. */
.q--solo .q__bar {
  position: relative;
}

.reveal-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.8rem;
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .reveal-timer {
    background: rgb(43 30 22 / 0.12);
  }
}

.reveal-timer__fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--accent-line);
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.reveal-timer.is-paused .reveal-timer__fill {
  background: var(--text);
}

/* "Pozastaveno" on the bar, like the timer's – it doesn't change the layout. */
.reveal-timer__status {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25em 0.7em;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reveal-timer.is-paused .reveal-timer__status {
  display: block;
}

/* End: points per round, up to three columns (data-cols is set by the app). */
.end--solo {
  gap: 1.3rem;
}

.score-rounds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  width: 90rem;
  width: min(100%, 90rem);
  padding: 0;
  list-style: none;
  text-align: left;
}

.score-rounds__item {
  display: flex;
  /* Baseline: Rockwell's digits sit high when centred. */
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.5rem;
  font-weight: 700;
}

.score-rounds__theme {
  min-width: 0;
  overflow-wrap: break-word;
}

.score-rounds__points {
  flex: none;
  font-family: var(--font-display);
  font-size: 1.3em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.score-rounds[data-cols='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.score-rounds[data-cols='1'] {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .score-rounds[data-cols='3'] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Touch: options at least 44 px tall with room between them for a thumb; no zoom into the field on iOS. */
@media (pointer: coarse) {
  .option--choice {
    min-height: 44px;
  }

  .q--solo .options {
    gap: max(10px, calc(var(--fit) * 1.2rem + 0.3rem));
  }

  @supports not (width: min(1px, 2px)) {
    .q--solo .options {
      gap: 10px;
    }
  }

  .answer-form__input {
    font-size: 16px;
    font-size: max(16px, 1em);
  }
}

@supports (-webkit-touch-callout: none) {
  .answer-form__input {
    font-size: max(16px, 1em);
  }
}

/* ---------------------------------------------------------------- Controls bar */

/* Without mouse movement the cursor and bar disappear. The bar keeps its space so text doesn't jump.
   !important: every button and card sets its own cursor. */
.app.is-idle,
.app.is-idle * {
  cursor: none !important;
}

.app.is-idle .controls {
  opacity: 0;
  pointer-events: none;
}

/* …but not while it holds keyboard focus (an engine without :has() simply hides it). */
@supports selector(:has(a)) {
  .app.is-idle .controls:has(:focus-visible:not([data-quiet-focus])) {
    opacity: 1;
    pointer-events: auto;
  }
}

.controls {
  position: relative;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* The bar sits above the iOS home indicator and clear of the notch. */
  padding: 0.8rem max(var(--gutter), env(safe-area-inset-right)) calc(0.8rem + env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  background: var(--ground-deep);
  border-top: 0.2rem solid var(--line);
}

@supports not (width: min(1px, 2px)) {
  .controls {
    padding: 0.8rem var(--gutter);
  }
}

/* "Bez moderátora" (TASK-competition §8): how long until the screen moves on, along the top edge
   of the screen (fixed, so no layout changes; outside the controls bar, so it never fades). */
.auto-timer {
  position: fixed;
  z-index: 5;
  top: 0;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  left: 0;
  height: 0.4rem;
}

.auto-timer__fill {
  height: 100%;
  background: var(--accent-line);
  transform-origin: left center;
  transition: transform 0.2s linear;
}

.auto-timer.is-paused .auto-timer__fill {
  background: var(--text);
}

.controls__group {
  display: flex;
  gap: 0.7rem;
}

.controls__hint {
  flex: 1 1 auto;
  font-size: 1.15rem;
  color: var(--muted-deep);
  text-align: center;
  /* Beside the wordmark the hint takes two lines; balanced, they read as one block. */
  text-wrap: balance;
}

/* Shown instead of the key hint on touch screens (see the touch section below). */
.controls__hint--touch {
  display: none;
}

/* The wordmark, small and a little faded, at the right end of the free middle of the bar (the hint,
   where shown, fills the space before it). Its rays draw into the bar's padding, so the bar keeps
   its height. */
.controls__brand {
  flex: none;
  margin-left: auto;
  margin-right: 1rem;
  font-size: 1.9rem;
  opacity: 0.7;
  pointer-events: none;
}

/* In portrait the bar's buttons (which scale with the width) leave no room for it. */
@media (orientation: portrait) {
  .controls__brand {
    display: none;
  }
}

.ctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.9em;
  padding: 0.4em 1em;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 1.35rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .ctrl:hover:not(:disabled) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .ctrl:hover:not(:disabled) {
      background: #fbf2e6;
    }
  }
}

.ctrl:disabled {
  opacity: 0.35;
  cursor: default;
}

.ctrl svg {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ctrl--primary {
  min-width: 10.5em;
  justify-content: center;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

@media (hover: hover) {
  .ctrl--primary:hover:not(:disabled) {
    background: var(--accent-strong);
  }
}

/* Flat buttons don't move when pressed (see .btn); they get a deeper tint instead. */
.ctrl:active:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .ctrl:active:not(:disabled) {
    background: #f7e7d3;
  }
}

.ctrl--primary:active:not(:disabled) {
  border-color: var(--accent-shadow);
  background: var(--accent-shadow);
  color: var(--surface);
}

.ctrl--primary[aria-pressed='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.ctrl--primary svg path[d^='M7'] {
  fill: currentColor;
}

@media (hover: hover) {
  .ctrl--danger:hover:not(:disabled) {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .ctrl--danger:hover:not(:disabled) {
      background: #f3e4df;
    }
  }
}

.ctrl__key {
  padding: 0.05em 0.45em;
  border-radius: 0.35em;
  border: 1px solid currentColor;
  font-family: inherit;
  font-size: 0.8em;
  opacity: 0.7;
}

/* ---------------------------------------------------------------- Dialog */

.dialog {
  max-width: 46rem;
  max-width: min(46rem, 92vw);
  padding: 2.4rem 2.6rem;
  border: 0.25rem solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 1.5rem 4rem rgb(var(--shadow) / 0.25);
}

.dialog::backdrop {
  background: rgb(var(--shadow) / 0.55);
}

.dialog > form > h2 {
  font-family: var(--font-display);
  font-size: 3rem;
  margin-bottom: 0.8rem;
}

.dialog > form > p {
  font-size: 1.7rem;
  color: var(--muted);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------- Printed quiz (TASK-competition §10)
   On screen a sheet of paper under a toolbar; printed only the sheet (see the print block). */

.print {
  max-width: 96rem;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

.print__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.print__bar-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
}

.print__modes,
.print__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.print__doc {
  padding: 3rem 3.6rem;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
  font-size: 1.5rem;
}

.print__title {
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1.1;
}

.print__lead {
  margin-top: 0.4rem;
  color: var(--muted);
}

.print__round {
  margin-top: 2.6rem;
}

.print__round-title {
  margin-bottom: 1.2rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.15rem solid var(--line);
  font-family: var(--font-display);
  font-size: 2.2rem;
}

.print__list {
  display: grid;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.print__q {
  break-inside: avoid;
}

.print__text {
  font-weight: 700;
}

.print__num {
  margin-right: 0.4em;
  color: var(--accent-ink);
}

.print__kind {
  color: var(--accent-ink);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.print__image {
  margin: 0.6rem 0;
}

.print__image img {
  display: block;
  max-width: 24rem;
  max-height: 16rem;
}

.print__image figcaption {
  color: var(--muted);
  font-size: 1.25rem;
  font-style: italic;
}

.print__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 2rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.print__options li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.print__options .is-correct {
  font-weight: 800;
}

.print__box {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0.12rem solid var(--text);
  border-radius: 0.3rem;
  font-size: 1.1rem;
  font-weight: 800;
}

.print__options .is-correct .print__box {
  background: var(--text);
  color: var(--surface);
}

.print__lines {
  display: block;
  max-width: 44rem;
}

.print__line {
  display: block;
  height: 2.6rem;
  border-bottom: 0.12rem solid var(--text);
}

.print__answer {
  margin-top: 0.4rem;
}

.print__note {
  color: var(--muted);
  font-size: 1.3rem;
}

/* Printed: the sheet alone on white paper, sized in points; the host's copy has a page per round. */
@media print {
  .app {
    display: block;
    height: auto;
  }

  .app[data-screen='print'] .screen {
    overflow: visible;
    padding: 0;
  }

  .print__bar {
    display: none;
  }

  .print__doc {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 11pt;
  }

  .print--host .print__round + .print__round {
    break-before: page;
  }
}

/* ---------------------------------------------------------------- Season table (TASK-competition §5) */

.dialog.season {
  width: 64rem;
  width: min(64rem, 94vw);
  max-width: 94vw;
  max-height: 92vh;
  overflow-y: auto;
}

.season[open] {
  display: grid;
  gap: 1rem;
}

.season__scroll {
  overflow-x: auto;
}

.season__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.season__table th,
.season__table td {
  padding: 0.5rem 0.8rem;
  border-bottom: 0.1rem solid var(--line);
  text-align: right;
  vertical-align: baseline;
  white-space: nowrap;
}

.season__table thead th {
  color: var(--muted);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.season__table .season__team {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.season__table tbody th {
  font-weight: 700;
}

.season__table .season__points {
  font-family: var(--font-display);
  font-size: 1.9rem;
}

.season__table tr.is-first {
  background: var(--surface);
}

/* ---------------------------------------------------------------- Quiz editor (TASK-competition §1)
   A full screen: the title row with the status and actions, then the outline and the form, each
   scrolling on its own (the screen itself doesn't). Phones swap the outline for a select. */

.editor {
  max-width: 128rem;
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 1.6rem;
}

.editor__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.editor__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
}

.editor__title {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1.1;
}

.editor__status {
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 700;
}

.editor__status.is-error {
  color: var(--danger-text);
}

.editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.editor__picker {
  display: none;
}

.editor__body {
  display: grid;
  grid-template-columns: 26rem minmax(0, 1fr);
  gap: 2rem;
  min-height: 0;
}

.editor__outline,
.editor__side {
  min-height: 0;
  overflow-y: auto;
  border: 0.15rem solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--raise);
}

.editor__outline {
  padding: 1rem;
}

.editor__side {
  padding: 2rem 2.4rem 2.4rem;
}

.editor__rounds,
.editor__questions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor__questions {
  padding-left: 1.2rem;
}

.editor__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: 0.15rem solid transparent;
  border-radius: 0.6rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 1.3rem;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.editor__item--round {
  margin-top: 0.6rem;
  font-weight: 800;
  font-size: 1.4rem;
}

.editor__item[aria-current='true'] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .editor__item[aria-current='true'] {
    background: rgb(250 240 226);
  }
}

@media (hover: hover) {
  .editor__item:hover {
    border-color: var(--line);
  }
}

.editor__item-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor__bad {
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--danger);
}

.editor__add {
  align-self: flex-start;
  margin: 0.6rem 0;
}

.editor__add span {
  display: inline-flex;
}

.editor__form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.editor__heading {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1.15;
}

.editor__tools {
  display: flex;
  flex: none;
  gap: 0.4rem;
}

.editor__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.6rem;
}

.editor__field {
  font-size: 1.4rem;
}

.editor__field .field__label {
  font-size: 1.2rem;
}

/* Phones: the hint that a longer edit is easier on a computer (TASK-journey §9). */
.editor__phone {
  color: var(--muted);
  font-size: 1.3rem;
}

/* The grid parent beats `.field`'s own grid-column, which comes later in this file. */
.editor__grid > .editor__field--wide {
  grid-column: 1 / -1;
}

.editor__kind {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.editor__options {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editor__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.8rem;
}

.editor__letter {
  width: 1.6rem;
  color: var(--accent-ink);
  font-weight: 800;
  text-align: center;
}

.editor__correct {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}

.editor__radio {
  width: 1.6rem;
  height: 1.6rem;
  margin: 0;
  accent-color: var(--correct);
}

.editor__image {
  display: grid;
  gap: 1rem;
}

.editor__preview {
  position: relative;
  display: flex;
  height: 20rem;
}

/* The intro's rounds card: its heading and "Upravit" / "Upravit kopii" in one row. */
.intro__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.2rem;
}

/* The pencil sits left of the trash on an uploaded quiz's card. */
.card__edit {
  right: 4.4rem;
}

.cards--list > li.is-custom .card {
  padding-right: 8.8rem;
}

.cards--list .card__edit {
  right: 4.8rem;
}

/* Editing isn't a warning: the accent, not the trash's danger colour. */
@media (hover: hover) {
  .card__edit:hover {
    border-color: var(--accent);
    color: var(--accent-ink);
  }
}

.card__edit:active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent-ink);
}

@supports not (color: color-mix(in srgb, red, red)) {
  .card__edit:active {
    background: #faedde;
  }
}

/* ---------------------------------------------------------------- Add quiz dialog */

.add {
  width: 94vw;
  width: min(104rem, 94vw);
  max-width: none;
  max-height: 92vh;
  max-height: 92dvh;
  padding: 0;
  overflow: hidden;
  font-size: 1.4rem;
}

/* Only when open – author display would otherwise override the hidden state of a closed dialog. */
.add[open] {
  display: flex;
  flex-direction: column;
}

.add__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.8rem 2.4rem 1rem;
}

.add__header h2 {
  font-family: var(--font-display);
  font-size: 2.8rem;
}

.add__close {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 0.15rem solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.add__close svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

@media (hover: hover) {
  .add__close:hover {
    border-color: var(--accent);
  }
}

.add__close:active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .add__close:active {
    background: #faedde;
  }
}

.add__tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0 2.4rem;
  border-bottom: 0.2rem solid var(--line);
}

.add__tab {
  margin-bottom: -0.2rem;
  padding: 0.8rem 1.4rem;
  border: 0;
  border-bottom: 0.3rem solid transparent;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  font-weight: 800;
  cursor: pointer;
}

@media (hover: hover) {
  .add__tab:hover {
    color: var(--text);
  }
}

.add__tab[aria-selected='true'] {
  border-bottom-color: var(--accent-line);
  color: var(--text);
}

.add__body {
  min-height: 0;
  overflow-y: auto;
  padding: 2rem 2.4rem 2.4rem;
}

.add__panel {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 2rem;
  border: 0.25rem dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  transition:
    border-color 0.12s ease,
    background-color 0.12s ease;
}

.dropzone.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .dropzone.is-over {
    background: #fcf4ea;
  }
}

.dropzone__text {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
}

.dropzone__or,
.add__note,
.add__hint {
  color: var(--muted);
}

.add__note {
  font-size: 1.25rem;
}

.add__step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.add__step + .add__step {
  margin-top: 1.4rem;
  padding-top: 2rem;
  border-top: 0.2rem solid var(--line);
}

.add__step-title {
  display: flex;
  /* Rockwell's letters sit high in their line box, so centring the boxes looks off;
     sharing the baseline (plus the nudge on .add__step-n) centres the circle on the capitals,
     and on the first line when the title wraps. */
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 2rem;
}

.add__step-n {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-body);
  font-size: 0.8em;
  font-weight: 800;
  flex: none;
  /* The display capitals are taller than the digit's, so its baseline alone leaves the circle low. */
  transform: translateY(-0.09em);
}

.settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 0.4rem;
}

/* Field groups: "Téma" and "Rozsah a obtížnost" side by side, "Další přání" across both */
.settings__group {
  min-width: 0;
  margin: 0;
  padding: 0.6rem 1.2rem 1.2rem;
  border: 0.15rem solid var(--line);
  border-radius: 0.8rem;
}

.settings__group--extra {
  grid-column: 1 / -1;
}

.settings__legend {
  padding: 0 0.4rem;
  color: var(--accent-ink);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings__fields {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 0.8rem 1.1rem;
}

.field {
  grid-column: span var(--span, 1);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1.25rem;
}

.field__label {
  font-size: 1.1rem;
  font-weight: 800;
}

textarea.field__input {
  resize: vertical;
}

.field__input,
.add__paste,
.add__prompt {
  width: 100%;
  padding: 0.35em 0.6em;
  border: 0.15rem solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

/* One rule per selector: an old engine drops a selector list that contains :focus-visible. */
.field__input:focus-visible {
  outline: 0.2rem solid var(--accent-line);
  outline-offset: 0;
  border-color: var(--accent-line);
}

.add__paste:focus-visible {
  outline: 0.2rem solid var(--accent-line);
  outline-offset: 0;
  border-color: var(--accent-line);
}

.add__prompt:focus-visible {
  outline: 0.2rem solid var(--accent-line);
  outline-offset: 0;
  border-color: var(--accent-line);
}

/* Placeholders show the default that an empty field sends; they fade more and clear on focus. */
.field__input::placeholder {
  color: var(--text);
  opacity: 0.4;
}

/* …except the custom category, which gets focus as soon as it appears and would never show its hint. */
.field__input:not(.field__input--custom):focus::placeholder {
  color: transparent;
}

.field__input[aria-invalid='true'] {
  border-color: var(--danger);
}

/* Selects and number fields: the browser's arrows give way to ones drawn in the app's style,
   in the accent colour like the slider. The field keeps its own border, focus ring and error
   colour; the chevron and the − / + buttons sit inside it. */
.select,
.stepper {
  position: relative;
  display: block;
}

select.field__input {
  padding-right: 2.6em;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Chevron: two sides of a rotated square. */
.select::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.05em;
  width: 0.5em;
  height: 0.5em;
  margin-top: -0.38em;
  border-right: 0.16em solid var(--accent);
  border-bottom: 0.16em solid var(--accent);
  border-radius: 0 0 0.1em 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.stepper .field__input {
  padding-right: 5.2em;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper .field__input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.stepper .field__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* Inside the field's border, with the inner radius of its corners */
.stepper__btns {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  bottom: 0.15rem;
  display: flex;
  overflow: hidden;
  border-radius: 0 0.45rem 0.45rem 0;
}

/* Flat controls like the controls bar: they tint on hover and tint deeper while pressed. */
.stepper__btn {
  position: relative;
  width: 2.3em;
  margin: 0;
  padding: 0;
  border: 0;
  border-left: 0.15rem solid var(--line);
  background: transparent;
  color: var(--accent-ink);
  cursor: pointer;
}

/* Minus, and a second bar turned upright for the plus */
.stepper__btn::before,
.stepper__btn--up::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7em;
  height: 0.16em;
  margin: -0.08em 0 0 -0.35em;
  border-radius: 0.1em;
  background: currentColor;
}

.stepper__btn--up::after {
  transform: rotate(90deg);
}

@media (hover: hover) {
  .stepper__btn:hover:not(.is-off) {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }

  @supports not (color: color-mix(in srgb, red, red)) {
    .stepper__btn:hover:not(.is-off) {
      background: #fbf2e6;
    }
  }
}

.stepper__btn:active:not(.is-off) {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface));
}

@supports not (color: color-mix(in srgb, red, red)) {
  .stepper__btn:active:not(.is-off) {
    background: #f7e7d3;
  }
}

/* At the minimum or maximum (of the value, or of the default an empty field shows) */
.stepper__btn.is-off {
  color: var(--line);
  cursor: default;
}

.field__hint {
  color: var(--muted);
  font-size: 1.02rem;
}

/* Slider ("Obrázků v kole"). The track fills the column whatever its maximum is; the readout
   sits at the end of the label row, so a wider value never moves the track. */
.field__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 0.8rem;
}

.slider {
  display: flex;
  align-items: center;
}

/* An invisible line with a field's padding and border: the row is exactly as tall as the fields beside it. */
.slider::before {
  content: '\200b';
  width: 0;
  padding: 0.35em 0;
  border: 0.15rem solid transparent;
}

.slider__input {
  --thumb: 1.8rem;
  --track: 0.6rem;
  /* Where the fill ends: the thumb's centre, which travels from thumb/2 to 100% − thumb/2. */
  --stop: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--ratio, 0));
  --fill: linear-gradient(to right, var(--accent) var(--stop), var(--line) var(--stop));
  flex: 1;
  min-width: 0;
  height: var(--thumb);
  margin: 0;
  border-radius: 0.6rem;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.slider__input::-webkit-slider-runnable-track {
  height: var(--track);
  border-radius: 999px;
  background: var(--fill);
}

.slider__input::-moz-range-track {
  height: var(--track);
  border-radius: 999px;
  background: var(--fill);
}

.slider__input::-webkit-slider-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  margin-top: calc((var(--track) - var(--thumb)) / 2);
  border: 0.3rem solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0.1rem 0.35rem rgb(var(--shadow) / 0.35);
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}

.slider__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--thumb);
  height: var(--thumb);
  border: 0.3rem solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0.1rem 0.35rem rgb(var(--shadow) / 0.35);
  transition: background-color 0.15s, box-shadow 0.15s;
}

/* The outline goes round the whole slider: Safari doesn't draw focus styles on the thumb. */
.slider__input:focus-visible {
  outline: 0.2rem solid var(--accent-line);
  outline-offset: 0.3rem;
}

/* :active comes after :hover, so it wins while the thumb is dragged. */
@media (hover: hover) {
  .slider__input:hover::-webkit-slider-thumb {
    background: var(--accent-strong);
  }

  .slider__input:hover::-moz-range-thumb {
    background: var(--accent-strong);
  }
}

.slider__input:active::-webkit-slider-thumb {
  background: var(--accent-shadow);
}

.slider__input:active::-moz-range-thumb {
  background: var(--accent-shadow);
}

.slider__value {
  color: var(--accent-ink);
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.field__hint:empty,
.add__status:empty {
  display: none;
}

.add__manual > * + * {
  margin-top: 1rem;
}

.field__hint.is-error,
.add__status.is-error {
  color: var(--danger-text);
  font-weight: 700;
}

.add__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  margin-top: 0.4rem;
}

.add__row .btn {
  font-size: 1.5rem;
}

.add__status {
  flex: 1;
  min-width: 20rem;
  font-weight: 700;
}

.add__paste,
.add__prompt {
  resize: vertical;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.2rem;
}

.add__result:empty {
  display: none;
}

.add h3,
.add h4 {
  margin: 0;
}

.add .errors__title {
  font-size: 1.5rem;
}

@media (max-width: 900px) {
  .settings {
    grid-template-columns: 1fr;
  }

  .settings__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings__group--extra .field {
    grid-column: 1 / -1;
  }

  /* Wide fields (with --span) take the whole row. */
  .field[style] {
    grid-column: 1 / -1;
  }
}

/* ---------------------------------------------------------------- Smaller and narrower screens */

@media (max-width: 1500px) {
  .controls__hint {
    display: none;
  }
}

@media (max-aspect-ratio: 4/3) {
  .q__main {
    flex-direction: column;
  }

  .q__body.has-media .q__main {
    min-height: 55%;
  }

  .has-media .options {
    grid-template-columns: 1fr 1fr;
  }

  html {
    font-size: 1.3vw;
    font-size: max(12px, min(1.3vw, 1.3vh));
  }
}

@media (max-width: 700px) {
  .ctrl__label,
  .ctrl__key {
    display: none;
  }

  .ctrl--primary {
    min-width: 0;
  }

  .q__bar {
    grid-template-columns: 1fr auto;
  }

  .q__count {
    display: none;
  }

  .options {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------- Touch screens */

/* Bigger hit areas wherever the main pointer is a finger (at least 44 × 44 CSS px). */
@media (pointer: coarse) {
  .btn,
  .ctrl,
  .switch,
  .add__tab {
    min-height: 44px;
  }

  .share {
    min-width: 44px;
  }

  .evening__add {
    min-height: 44px;
  }

  .mode__opt,
  .check__item,
  .check__summary {
    min-height: 44px;
  }

  .check__action {
    min-height: 44px;
    padding: 0 0.4rem;
  }

  .check__box {
    width: 24px;
    height: 24px;
  }

  .evening__tool {
    width: 44px;
    height: 44px;
  }

  .home__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .ctrl,
  .add__close {
    min-width: 44px;
    min-height: 44px;
  }

  .scores__step,
  .scores__half,
  .scores__joker,
  .teams__remove {
    min-width: 44px;
    min-height: 44px;
  }

  /* The grid / list switch: the floor goes on its buttons themselves (a floor on the pill left them
     36 px inside its border and padding); without the padding it stays about as tall as the tags. */
  .segmented {
    min-height: 0;
    padding: 0;
  }

  .segmented__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* On the lens row the pill follows its buttons, and the sort matches it (44 px plus the border). */
  .catalog__filters .segmented {
    height: auto;
  }

  .catalog__filters .catalog__sort {
    height: calc(44px + 0.3rem);
  }

  .lens,
  .progress {
    min-height: 44px;
  }

  .way,
  .home__dice {
    min-width: 44px;
    min-height: 44px;
  }

  input.field__input,
  select.field__input {
    min-height: 44px;
  }

  .stepper__btn {
    width: 44px;
    width: max(44px, 2.3em);
  }

  .stepper .field__input {
    padding-right: calc(88px + 0.6em);
    padding-right: calc(2 * max(44px, 2.3em) + 0.6em);
  }

  /* A thumb big enough for a finger, in a row as tall as the fields beside it */
  .slider {
    min-height: 44px;
  }

  .slider__input {
    --thumb: max(28px, 1.8rem);
    height: 44px;
  }

  @supports not (width: min(1px, 2px)) {
    .slider__input {
      --thumb: 28px;
    }
  }

  .ctrl {
    justify-content: center;
  }

  .card__delete {
    min-width: 44px;
    height: 44px;
  }

  .card__delete {
    top: 0.6rem;
    right: 0.6rem;
  }

  /* Clear of the pencil and the trash, which are larger here. */
  .cards > li.is-custom .card__top {
    margin-right: calc(88px + 1.4rem);
  }

  .cards--list > li.is-custom .card {
    padding-right: calc(44px + 2rem);
  }

  .card__edit {
    right: calc(0.6rem + 44px + 0.6rem);
  }

  .cards--list .card__edit {
    right: calc(1.2rem + 44px + 0.6rem);
  }

  .cards--list > li.is-custom .card {
    padding-right: calc(88px + 2.6rem);
  }

  .editor__item,
  .editor__correct {
    min-height: 44px;
  }

  /* A list's button sits under the fields (column), so it doesn't stretch to their height. */
  .answer-form--list .answer-form__submit {
    min-height: 44px;
  }

  /* The intro's zoom (keepIntroFitted) scales its controls too: the floor grows by as much, so a
     zoomed tablet intro still has 44 px targets on screen. */
  .intro .btn,
  .intro .switch,
  .intro .mode__opt {
    min-height: calc(44px / var(--intro-zoom, 1));
  }

  .intro .share {
    min-width: calc(44px / var(--intro-zoom, 1));
  }
}

/* Key hints mean nothing without a keyboard; a large touch screen gets a swipe hint instead.
   Keyboard shortcuts keep working (a tablet with a keyboard). */
@media (hover: none) {
  .ctrl__key,
  .controls__hint,
  .scoreboard__keys {
    display: none;
  }
}

@media (hover: none) and (min-width: 1100px) {
  /* One line at most: the bar's height must not change between steps (the pause label changes width). */
  .controls__hint--touch {
    display: block;
    /* Width 0 and grow: the nowrap text would otherwise count its full width towards the page's
       minimum width, and a tablet browser widens the whole layout to fit it. */
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* iOS zooms the page into any field with text smaller than 16 px. -webkit-touch-callout exists only on iOS. */
@media (pointer: coarse) {
  .field__input,
  .add__paste,
  .add__prompt {
    font-size: 16px;
    font-size: max(16px, 1em);
  }
}

@supports (-webkit-touch-callout: none) {
  .field__input,
  .add__paste,
  .add__prompt {
    font-size: max(16px, 1em);
  }
}

/* Drag and drop doesn't exist on a phone or tablet: the file picker leads, the drag text goes. */
.dropzone__touch {
  display: none;
}

@media (hover: none) {
  .dropzone__text,
  .dropzone__or {
    display: none;
  }

  .dropzone__touch {
    display: block;
    color: var(--muted);
  }
}

/* ---------------------------------------------------------------- Phones
   Portrait phones are at most 600 px wide, landscape phones at most 500 px tall.
   PHONE in js/media.js must match (tools/check.mjs compares them). */

@media (max-width: 600px), (max-height: 500px) {
  /* "Sestavit večer": a full-screen sheet with one column, the evening under the quiz's rounds. */
  .dialog.evening {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: max(1.6rem, env(safe-area-inset-top)) max(1.6rem, env(safe-area-inset-right)) max(1.6rem, env(safe-area-inset-bottom)) max(1.6rem, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
  }

  .evening[open] {
    align-content: start;
  }

  .evening__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialog.season {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: max(1.6rem, env(safe-area-inset-top)) max(1.6rem, env(safe-area-inset-right)) max(1.6rem, env(safe-area-inset-bottom)) max(1.6rem, env(safe-area-inset-left));
    border: 0;
    border-radius: 0;
  }

  .season[open] {
    align-content: start;
  }

  .season__table th,
  .season__table td {
    padding: 0.5rem 0.4rem;
  }

  .print__doc {
    padding: 1.6rem 1.4rem;
  }

  .print__options {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The editor scrolls as one page: the outline becomes the select above the form. */
  .editor {
    height: auto;
    grid-template-rows: none;
    gap: 1.2rem;
  }

  .editor__title {
    font-size: 2.6rem;
  }

  .editor__heading {
    font-size: 2rem;
  }

  .editor__picker {
    display: block;
  }

  .editor__body {
    display: block;
  }

  .editor__outline {
    display: none;
  }

  .editor__side {
    overflow: visible;
    padding: 1.4rem 1.4rem 1.8rem;
  }

  .editor__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .editor__preview {
    height: 16rem;
  }

  /* The screen's top padding is too small for the wordmark's rays to reach into. */
  .home__logo {
    padding-top: var(--wordmark-overhang);
  }

  .home {
    --zone-gap: 4.4rem;
    --block-gap: 1.6rem;
  }

  /* §2: the wordmark and ☰ on the first row, the search and 🎲 on the second. measureBar() gives the
     bar a negative top, so only the search row stays on screen while the page scrolls. */
  .home__bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'logo menu'
      'find find';
    gap: 1.2rem 1rem;
    padding-bottom: 1rem;
  }

  .home__navwrap {
    display: none;
  }

  .home__menu {
    display: grid;
    width: 44px;
    height: 44px;
  }

  .home__dice,
  .search__input {
    height: 44px;
  }

  .home__dice {
    width: 44px;
  }

  /* §4: one line – the title and where, then ▶ and ✕; the label and the kicker go. */
  .resume {
    padding: 0.5rem 0.5rem 0.5rem 1.4rem;
  }

  .resume__kicker {
    display: none;
  }

  .resume__text {
    margin-right: 1rem;
    font-size: 1.4rem;
  }

  .resume__quiz {
    font-size: 1.7rem;
  }

  .resume__where {
    margin-left: 0.6rem;
  }

  .resume__go {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .resume__go .resume__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .resume__discard {
    width: 44px;
    height: 44px;
    margin-left: 0.6rem;
  }

  .zone {
    gap: 1.2rem;
  }

  .zone__title {
    font-size: 2.4rem;
  }

  .progress {
    padding: 0 0.8rem;
    font-size: 1.3rem;
  }

  .progress__bar {
    width: 7rem;
  }

  /* §3: the hero in one column – the promise, the buttons, the ways and their steps, the preview. */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'text'
      'how'
      'preview';
    gap: 2rem;
    padding-bottom: 2rem;
  }

  .hero__title {
    font-size: 3.4rem;
  }

  .hero__lead {
    font-size: 1.5rem;
  }

  .hero__actions {
    margin-top: 1.6rem;
  }

  .hero__actions .btn {
    padding-inline: 1.2em;
    white-space: nowrap;
  }

  .ways {
    display: flex;
  }

  /* Each way as wide as its name ("Sám" is short), so the long names keep to one line. */
  .ways > li {
    flex: 1 1 auto;
  }

  .way {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0 0.8rem 0 0.4rem;
    font-size: 1.35rem;
  }

  .way__art .illo {
    width: 3rem;
    height: 2.25rem;
  }

  .way__short {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The intro's mode control: the pictures alone, the chosen mode's name above them. */
  .mode__opt {
    justify-content: center;
    padding: 0 1.4rem;
  }

  .mode__art {
    margin-right: 0;
  }

  .mode__short {
    display: none;
  }

  .intro__mode {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .mode__name {
    display: block;
    padding-left: 1rem;
    color: var(--accent-ink);
    font-size: 1.4rem;
    font-weight: 800;
  }

  .hero__how {
    display: block;
  }

  .ways + .how__steps {
    margin: 1.4rem 0 0;
  }

  /* The steps one under another, small. */
  .how__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .how__step {
    grid-template-columns: 4rem minmax(0, 1fr);
  }

  .how__art .illo {
    width: 4rem;
    height: 3rem;
  }

  .preview__tv {
    max-width: 52vh;
  }

  /* §6: a compact list, one quiz per row – the tone as a left edge, the title and one line of the
     description; the subject, the chips and the motif go. */
  .cards,
  .cards.has-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }

  .card {
    padding: 1.1rem 1.4rem 1.1rem 2rem;
  }

  .card__edge {
    right: auto;
    bottom: 0;
    width: 0.6rem;
    height: auto;
  }

  .card__motif,
  .card:not(.card--add) .card__meta {
    display: none;
  }

  /* The subject (and "Nové") stays as a small line above the title, as on the larger cards. */
  .card:not(.card--add) .card__top {
    min-height: 0;
    margin-right: 0;
  }

  .card__subject {
    font-size: 1rem;
  }

  .card__title {
    margin-top: 0.2rem;
    font-size: 1.8rem;
  }

  .card__desc {
    max-height: 1.45em;
    margin-top: 0.3rem;
    font-size: 1.35rem;
    -webkit-line-clamp: 1;
  }

  /* The ✓ at the row's right end, centred. */
  .card--done {
    padding-right: 4.8rem;
  }

  .card__check {
    top: 50%;
    margin-top: -1.2rem;
  }

  .cards > li.is-custom .card {
    padding-right: calc(88px + 2rem);
  }

  .cards > li.is-custom .card__delete {
    top: 50%;
    margin-top: -22px;
  }

  .card--add {
    padding-right: 5.6rem;
  }

  .card__add-icon {
    top: 50%;
    margin-top: -1.6rem;
  }

  /* Full width like "Ukázat všech" below. */
  .catalog__empty .btn {
    justify-self: stretch;
  }

  /* The footer row stacked: "Ukázat všech" full width, then the count. */
  .catalog__foot {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'more'
      'count';
  }

  .catalog__tools .catalog__sort {
    padding-right: 2.2em;
    font-size: 1.3rem;
  }

  /* §7: two tiles a row, the icon above the text. */
  .tool {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1.3rem;
  }

  .tool__icon {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 0 0.8rem;
  }

  /* Titles of a row of tiles on one line, whatever the text under them. */
  .tool__text {
    align-self: stretch;
    align-content: start;
  }

  .create__list .tool__text {
    align-content: center;
  }

  .tool__pc {
    padding: 0.8rem 1.3rem 1rem;
  }

  /* §8: the two small tools side by side under the AI card, icon left. */
  .create__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    gap: 0.8rem;
  }

  .create__list .tool {
    flex-direction: row;
    align-items: center;
    padding: 1rem 1.2rem;
  }

  .create__list .tool__icon {
    width: 3.4rem;
    height: 3.4rem;
    margin: 0 1rem 0 0;
  }

  /* Intro: compact round tiles and cards (one column in portrait, see below). */
  .intro__rounds {
    gap: 0.5rem;
  }

  .intro__card {
    gap: 0.8rem;
    padding: 1.4rem 1.6rem;
  }

  .intro__card--rounds .intro__title {
    font-size: 2rem;
  }

  .intro__round {
    gap: 0.6em;
    padding: 0.45em 0.7em;
    font-size: 1.5rem;
  }

  /* The 12 px floor would make the UI too big for a phone; scale with the short side instead. */
  html {
    font-size: clamp(10px, 2.75vmin, 12px);
  }

  :root {
    --gutter: 1.6rem;
  }

  .end__points {
    font-size: min(3rem, 7.4vw);
    white-space: nowrap;
  }

  /* Screens other than questions scroll when they don't fit; centred panels grow instead of clipping. */
  .app:not([data-screen='question']):not([data-screen='reveal']):not([data-screen='tiebreaker']):not(
      [data-screen='tiebreaker-reveal']
    )
    .screen {
    overflow-y: auto;
  }

  .panel--center {
    height: auto;
    min-height: 100%;
  }

  .display {
    font-size: clamp(2.6rem, 4.6rem, 10vmax);
  }

  .display--huge {
    font-size: clamp(3rem, 5.6rem, 12vmax);
  }

  .round-icon {
    font-size: clamp(3rem, 6rem, 12vmax);
  }

  .lead {
    font-size: 1.7rem;
  }

  .lead--big {
    font-size: 2rem;
  }

  .btn--xl {
    font-size: 1.9rem;
  }

  .intro .actions .btn--primary {
    font-size: 2.2rem;
  }

  /* Controls bar: icons only, one line, above the home indicator. */
  .controls {
    padding-block: 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  }

  .controls__group {
    gap: 0.6rem;
  }

  .ctrl__label,
  .ctrl__key {
    display: none;
  }

  .ctrl {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  .ctrl--primary {
    min-width: 5.6em;
  }

  /* Centred between the groups (landscape only, see below), a little smaller. */
  .controls__brand {
    margin-right: auto;
    font-size: 1.5rem;
  }

  /* Question header: round and theme, counter and timer on one compact row. The timer is smaller
     but still fixed, so the header height never changes after text fitting. */
  .q {
    gap: 0.8rem;
  }

  .q__bar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.8rem;
    min-height: 5.6rem;
  }

  .q__round {
    font-size: 1.15rem;
  }

  .q__theme {
    font-size: 1.8rem;
  }

  .q__count {
    display: block;
    padding: 0.7rem 1rem;
  }

  .q__count-label {
    font-size: 1.4rem;
  }

  .timer {
    width: 5.6rem;
    height: 5.6rem;
    font-size: 1.6rem;
  }

  /* "Pozastaveno" over the bottom of the ring – beside it there's no room. */
  .timer__status {
    right: 0;
    top: auto;
    bottom: -0.3em;
    transform: none;
    padding: 0.2em 0.5em;
    font-size: 0.5em;
  }

  .q__bar .btn {
    min-height: 44px;
    padding: 0.4em 1em;
    font-size: 1.35rem;
  }

  /* Single player: the result badge as compact as the phone timer. */
  .result {
    gap: 0.3rem;
  }

  .result__badge {
    font-size: 1.4rem;
  }

  .result__score {
    font-size: 1.15rem;
  }

  .reveal-timer {
    bottom: -0.55rem;
    height: 0.3rem;
  }

  /* The gap under the phone header is too small for the pill; the dark bar and the bar's
     highlighted play button show the pause. */
  .reveal-timer.is-paused .reveal-timer__status {
    display: none;
  }

  /* The leave dialog stacks its buttons. */
  .dialog {
    padding: 2rem;
  }

  .dialog > form > h2 {
    font-size: 2.6rem;
  }

  /* Add dialog: a full-screen sheet with its own scrolling; the close button stays at the top. */
  .add {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .add__header {
    padding: max(1.2rem, env(safe-area-inset-top)) max(1.6rem, env(safe-area-inset-right)) 0.8rem
      max(1.6rem, env(safe-area-inset-left));
  }

  .add__header h2 {
    font-size: 2.4rem;
  }

  .add__tabs {
    padding-inline: max(1.6rem, env(safe-area-inset-left)) max(1.6rem, env(safe-area-inset-right));
  }

  /* Three tabs in one row: no wrapping, less padding. */
  .add__tab {
    flex: 1 1 auto;
    padding-inline: 0.4rem;
    white-space: nowrap;
  }

  .add__body {
    padding: 1.6rem max(1.6rem, env(safe-area-inset-right)) calc(2.4rem + env(safe-area-inset-bottom))
      max(1.6rem, env(safe-area-inset-left));
    overscroll-behavior: contain;
    /* A focused field isn't scrolled flush against the edge when the keyboard opens. */
    scroll-padding-block: 2rem;
  }

  .add__status {
    min-width: 0;
    flex-basis: 100%;
  }

  .dropzone {
    padding: 2.4rem 1.6rem;
  }

  .field__label,
  .slider__value {
    font-size: 1.25rem;
  }

  .field__hint {
    font-size: 1.15rem;
  }

  /* Scoreboard: one column of teams, the ranking below, and the screen scrolls (like every
     non-question screen on phones). */
  .scoreboard {
    height: auto;
    min-height: 100%;
    grid-template-rows: auto auto auto;
  }

  .scoreboard__title {
    font-size: 3.4rem;
  }

  .scoreboard__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .scores[data-cols='2'] {
    --cols: 1;
  }

  .scores__row {
    padding-left: 1rem;
  }

  .estimates__item {
    grid-template-columns: minmax(0, 1fr) 10rem 6.5rem;
  }

  .estimates[data-cols='2'] .estimates__list {
    --cols: 1;
  }

  .podium__name {
    font-size: 1.8rem;
  }

  .podium__place[data-place='1'] .podium__name {
    font-size: 2.2rem;
  }

  .standings--rest[data-cols='3'] {
    --cols: 2;
  }
}

/* Portrait phone */
@media (max-width: 600px) {
  /* §4: no width for one line: the kicker, the title and where stack, each cut on its own. */
  .resume__text {
    display: grid;
    white-space: normal;
  }

  .resume__kicker {
    display: block;
    margin: 0 0 0.1rem;
    font-size: 1rem;
  }

  .resume__kicker,
  .resume__quiz,
  .resume__where {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .resume__where {
    margin: 0.1rem 0 0;
    font-size: 1.3rem;
  }

  .home__title {
    font-size: 3.2rem;
  }

  /* "Hrát", "Odehráno 4 z 53" and the sort share one row: the count says it without the bar. */
  .progress__bar {
    display: none;
  }

  .catalog .zone__title {
    margin-right: 1rem;
  }

  /* §3: the buttons full width; the ways without their pictures, so the names fit (two lines at most). */
  .hero__actions {
    grid-auto-flow: row;
    justify-content: stretch;
  }

  .way__art {
    display: none;
  }

  .way {
    padding: 0 0.6rem;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }

  /* The intro's mode control fills the width, three equal options. */
  .intro__mode {
    align-self: stretch;
  }

  .mode {
    display: flex;
    width: 100%;
  }

  .mode__opt {
    flex: 1 1 0;
    min-width: 0;
  }

  .intro__switches {
    justify-items: stretch;
  }

  .intro__rounds {
    grid-template-columns: 1fr;
  }

  /* Question: text, image and options in one column. The options keep their natural height
     and the image takes what's left, so the text doesn't shrink for the picture's sake. */
  .options,
  .has-media .options {
    grid-template-columns: 1fr;
  }

  .q__body.has-media .q__side {
    flex: none;
  }

  /* The picture is often the question itself, so it never shrinks below about a quarter of the screen. */
  .q__body.has-media .media {
    min-height: min(18rem, 26vh);
  }

  /* …except on a reveal that wouldn't fit otherwise (fitContent's squeeze): the player has already
     seen the picture, and the answer and the note matter more than scrolling to them. */
  .q--reveal .q__body.is-squeezed.has-media .media {
    min-height: min(8rem, 12vh);
  }

  /* The phone root is 10–12 px; 1rem keeps the credit at 10 px or more. */
  .media__credit {
    font-size: 1rem;
  }

  .dialog__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Single player: field and button stacked, the button full width; points per round in one column. */
  .answer-form {
    flex-direction: column;
  }

  .answer-form .answer-form__submit {
    min-height: 44px;
    padding-block: 0.4em;
  }

  .score-rounds,
  .score-rounds[data-cols] {
    grid-template-columns: minmax(0, 1fr);
  }

  .score-rounds__item {
    padding: 0.6rem 1rem;
  }

  .switch__hint {
    margin-left: 0;
  }

  .settings__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings .field {
    grid-column: 1 / -1;
  }
}

/* Landscape phone: little height, so the image sits beside the text instead of below it. */
@media (max-height: 500px) and (orientation: landscape) {
  /* Home: the search beside the wordmark (one row of little height), the hero's preview in a right
     column, two list cards a row. */
  .home__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'logo find menu';
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
    grid-template-areas:
      'text preview'
      'how preview';
  }

  /* The TV fills its column: the portrait cap (52vh) would leave it too small for its question. */
  .preview__tv {
    max-width: none;
  }

  .cards,
  .cards.has-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen {
    padding-top: max(1rem, env(safe-area-inset-top));
  }

  /* Scoreboard: the ranking beside the teams again, there's width for it. */
  .scoreboard__body {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  }

  /* Intro, round intro and end: tighter, so the main button fits on the screen where it can. */
  .panel {
    gap: 1rem;
  }

  .actions {
    margin-top: 0.4rem;
  }

  .display--huge {
    font-size: clamp(2.6rem, 4.4rem, 13vh);
  }

  .round-icon {
    font-size: 4rem;
  }

  .intro {
    align-items: start;
    gap: 1.6rem 3rem;
  }

  .intro__main {
    gap: 1rem;
  }

  .intro .display {
    font-size: 3.2rem;
  }

  .intro .lead {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1.5rem;
  }

  /* All four chips on one row where the width allows, so the start button stays on screen. */
  .intro .chips {
    gap: 0.5rem;
  }

  .intro .chip {
    padding: 0.3em 0.7em;
    font-size: 1.2rem;
  }

  .btn {
    min-height: max(44px, 2.8em);
  }

  .btn--xl,
  .intro .actions .btn--primary {
    font-size: 1.8rem;
  }

  .q__bar {
    min-height: 4.8rem;
  }

  .timer {
    width: 4.8rem;
    height: 4.8rem;
    font-size: 1.4rem;
  }

  /* The result badge and the score side by side: the header is too low for two lines. */
  .result {
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.8rem;
  }

  .q__body.has-media {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: calc(var(--fit) * 1.2rem + 0.3rem) calc(var(--fit) * 2rem + 0.6rem);
  }

  .q__body.has-media .q__main {
    display: contents;
  }

  .q__body.has-media .q__text {
    grid-area: 1 / 1;
  }

  .q__body.has-media .media {
    grid-area: 1 / 2 / 3 / 3;
  }

  .q__body.has-media .q__side {
    grid-area: 2 / 1;
    justify-content: flex-start;
  }

  .q__body.has-media:not(.has-side) .q__text {
    grid-row: 1 / 3;
    align-self: center;
  }

  .options,
  .has-media .options {
    grid-template-columns: 1fr 1fr;
  }
}

/* !important: beats every component's own animation and transition. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Without its animation the bar would stay full. */
  .toast__bar {
    display: none;
  }
}

/* ---------------------------------------------------------------- Older engines (TV browsers)

   Smart TVs keep the browser engine they shipped with (Samsung 2021: Chromium 76, 2022: Chromium 85).
   Current browsers never read this block; desktop and phones look exactly as above.
   The color-mix() fallbacks sit right after the rules they patch, to keep the cascade order. */

/* Without :focus-visible (Chromium 86) the rules using it are dropped and the browser's own ring
   shows on every focus, including the quiet one setScreen() gives the main button. */
@supports not selector(:focus-visible) {
  :focus {
    outline: 0.3rem solid var(--focus);
    outline-offset: 0.25rem;
  }

  [data-quiet-focus]:focus,
  .screen:focus {
    outline: none;
  }
}