/* Lovec záběrů – Creative Hill College: černá, žlutá #FED501, filmový pás a klapka */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/figtree-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/figtree-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --black: #000;
  --ink: #111;
  --yellow: #fed501;
  --yellow-deep: #e6bf00;
  --paper: #f7f7f7;
  --white: #fff;
  --grey: #666;
  --grey-dark: #2a2a2a;
  --line: #ccc;
  --red: #e00000;

  --sans: "Figtree", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;

  --gutter: 16px;
  --wrap: 32rem;
  --dock-h: calc(80px + env(safe-area-inset-bottom));
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

main { padding-bottom: calc(var(--dock-h) + 32px); }
main:focus { outline: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1, h2, h3 { margin: 0; line-height: 1.1; font-weight: 900; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------- Černá hlavička ------- */

.stage {
  background: var(--black);
  color: var(--white);
  padding: calc(20px + env(safe-area-inset-top)) 0 28px;
}
.logo { display: block; width: 104px; height: auto; }
.logo-mark { fill: var(--yellow); }
.logo-type { fill: var(--white); }

.title {
  margin: 28px 0 0;
  font-size: clamp(46px, 14vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--yellow);
}
.subtitle { margin: 8px 0 0; font-size: 17px; color: var(--white); }

.score { display: flex; align-items: center; gap: 18px; margin-top: 26px; }
/* Skóre v bublině – stejný tvar jako logo školy */
.bubble-score {
  position: relative;
  flex: none;
  min-width: 108px;
  padding: 10px 16px 12px;
  border: 3px solid var(--yellow);
  color: var(--yellow);
  text-align: center;
  line-height: 1;
}
.bubble-score::after {
  content: "";
  position: absolute;
  left: 58%;
  bottom: -15px;
  width: 18px;
  height: 15px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 45% 100%);
}
.bubble-score::before {
  content: "";
  position: absolute;
  left: calc(58% + 4px);
  bottom: -9px;
  width: 10px;
  height: 9px;
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 45% 100%);
  z-index: 1;
}
.bubble-score b { display: block; font-size: 40px; font-weight: 900; }
.bubble-score span { font-size: 14px; font-weight: 700; }
.rank { min-width: 0; flex: 1; }
.rank strong { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; }
.rank span { font-size: 14px; color: #bbb; }
.meter { height: 6px; margin: 8px 0 6px; background: var(--grey-dark); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--yellow); }

/* ------- Kontaktní arch: řádky filmového pásu ------- */

.section { margin-top: 32px; }
.section-title { font-size: 24px; margin: 0 0 14px; }
.section-title .count { font-size: 16px; font-weight: 700; color: var(--grey); margin-left: 6px; }
.section-note { font-size: 15px; color: var(--grey); margin: -6px 0 16px; }
.first-note { margin: 24px 0 0; }

.tile-name { font-size: 13px; font-weight: 800; line-height: 1.15; }
.tile-place { display: block; margin-top: 3px; font-size: 11px; font-weight: 500; line-height: 1.2; }
.tile, .frame { font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.sheet { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 20px 6px;
  background: var(--black);
}
/* perforace nahoře a dole */
.strip::before, .strip::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 9px, transparent 9px 21px);
  border-radius: 1px;
}
.strip::before { top: 6px; }
.strip::after { bottom: 6px; }

.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  width: 100%;
  padding: 8px;
  border: 0;
  background: var(--grey-dark);
  color: #9a9a9a;
}
.frame-icon { font-size: 30px; line-height: 1; filter: grayscale(1); opacity: 0.35; }
.frame.is-full { background: var(--yellow); color: var(--ink); }
.frame.is-full .frame-icon { filter: none; opacity: 1; }
.frame.is-blank { cursor: default; background: #161616; }

/* Mřížka dlaždic pro ostatní zaměření */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Grafik: vzorník barev, chybějící barva = průhledná šachovnice jako v Photoshopu */
.swatch {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #ddd;
  background: var(--white);
  color: var(--grey);
  box-shadow: 0 1px 0 #ddd;
}
.swatch-color {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}
.swatch-color span { filter: grayscale(1); opacity: 0.35; }
.swatch.is-full .swatch-color span { filter: none; opacity: 1; }
.swatch-label { padding: 7px 8px 9px; }
.swatch-label b { display: block; font-size: 11px; font-weight: 900; color: var(--ink); }
.swatch.is-full { color: var(--ink); }

/* Programátor: výběr levelů jako ve hře */
.level {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  padding: 8px;
  border: 2px solid #2b2b2b;
  background: #0c0c0c;
  color: #777;
  font-family: var(--mono);
}
.level-no { font-size: 11px; font-weight: 700; }
.level-icon { font-size: 28px; line-height: 1; opacity: 0.5; }
.level .tile-name { font-family: var(--mono); font-weight: 700; font-size: 12px; }
.level.is-full { border-color: var(--yellow); color: var(--white); box-shadow: inset 0 0 0 2px #000, 0 0 0 1px var(--yellow); }
.level.is-full .level-no { color: var(--yellow); }
.level.is-full .level-icon { opacity: 1; }

/* Průzkumník: bubliny tvaru loga */
.idea {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 1;
  margin-bottom: 12px;
  padding: 8px;
  border: 3px solid var(--line);
  background: var(--white);
  color: var(--grey);
}
.idea::after {
  content: "";
  position: absolute;
  left: 55%;
  bottom: -14px;
  width: 16px;
  height: 12px;
  background: var(--line);
  clip-path: polygon(0 0, 100% 0, 45% 100%);
}
.idea-icon { font-size: 28px; line-height: 1; filter: grayscale(1); opacity: 0.35; }
.idea.is-full { border-color: var(--ink); background: var(--yellow); color: var(--ink); }
.idea.is-full::after { background: var(--ink); }
.idea.is-full .idea-icon { filter: none; opacity: 1; }

/* ------- Výzva k odměně ------- */

.goal {
  margin-top: 28px;
  padding: 18px;
  background: var(--white);
  border: 3px solid var(--ink);
}
.goal p { margin: 0; }
.goal .btn { margin-top: 14px; }
.mark { background: var(--yellow); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ------- Odznaky ------- */

.badges { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.badge { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.badge-icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  font-size: 24px;
  background: var(--yellow);
}
.badge strong { display: block; font-size: 16px; line-height: 1.2; font-weight: 800; }
.badge span { font-size: 14px; color: var(--grey); }
.badge.is-locked .badge-icon { background: #e4e4e4; filter: grayscale(1); opacity: 0.55; }
.badge.is-locked strong { color: var(--grey); }

.links { display: grid; gap: 2px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; }
.links a, .linkbtn {
  display: inline-block;
  padding: 6px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--yellow-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.stage .linkbtn { color: var(--white); text-decoration-color: var(--yellow); }

/* ------- Tlačítka ------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 22px;
  border: 3px solid var(--ink);
  border-radius: 0;
  font: inherit;
  font-weight: 900;
  font-size: 17px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-yellow { background: var(--yellow); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn-yellow:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ghost { background: var(--white); color: var(--ink); }
.btn-ghost:active { transform: translateY(2px); }
.btn-block { width: 100%; }

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(247, 247, 247, 0), var(--paper) 35%);
  display: flex;
  justify-content: center;
}
.dock .btn { width: 100%; max-width: calc(var(--wrap) - 2 * var(--gutter)); }
.dock[hidden] { display: none; }

/* ------- Stanice ------- */

.stage-station { padding-bottom: 24px; }
.reveal { position: relative; display: grid; place-items: center; margin-top: 12px; }
.clapper { width: min(78vw, 300px); height: auto; overflow: visible; }
.clapper text { font-family: var(--sans); fill: var(--ink); }

/* Grafik: velký vzorek barvy */
.chip-big { width: min(56vw, 210px); background: var(--white); color: var(--ink); text-align: left; }
.chip-color {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 64px;
  background: repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 20px 20px;
}
.chip-color i { position: absolute; inset: 0; }
.chip-color span { position: relative; }
.chip-label { padding: 10px 12px 14px; }
.chip-label b { display: block; font-size: 15px; font-weight: 900; }
.chip-label span { font-size: 14px; color: var(--grey); }

/* Programátor: terminál */
.term { width: min(88vw, 340px); background: #0c0c0c; border: 2px solid #333; text-align: left; font-family: var(--mono); }
.term-bar { display: flex; gap: 6px; padding: 8px 10px; background: #1d1d1d; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #555; }
.term-bar i:first-child { background: var(--yellow); }
.term-body { padding: 14px 14px 16px; font-size: 15px; line-height: 1.7; color: #ddd; }
.term-line { display: block; width: var(--w); max-width: 100%; overflow: hidden; white-space: nowrap; }
.term-line.is-ok { color: var(--yellow); font-weight: 700; }
.term-line.is-xp { color: var(--white); font-weight: 700; font-size: 22px; }

/* Průzkumník: velká bublina */
.bubble-big {
  position: relative;
  display: grid;
  place-items: center;
  gap: 4px;
  width: min(62vw, 230px);
  aspect-ratio: 4 / 3;
  margin-bottom: 18px;
  border: 5px solid var(--yellow);
  color: var(--yellow);
}
.bubble-big::after {
  content: "";
  position: absolute;
  left: 56%;
  bottom: -26px;
  width: 30px;
  height: 22px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, 45% 100%);
}
.bubble-big-icon { font-size: 64px; line-height: 1; }
.bubble-big-label { font-size: 18px; font-weight: 900; align-self: start; }
.points-pop {
  position: absolute;
  right: 2%;
  top: -6px;
  padding: 4px 10px;
  background: var(--white);
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

/* Název jako na webu školy: žluté písmo na černých pruzích */
.bar-title {
  margin: 24px 0 0;
  font-size: clamp(30px, 9vw, 40px);
  line-height: 1.32;
}
.bar-title span {
  background: var(--black);
  color: var(--yellow);
  padding: 2px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.station-meta { margin: 12px 0 0; color: var(--grey); font-size: 15px; }
.station-meta strong { color: var(--ink); }
.already { margin: 6px 0 0; font-size: 15px; color: var(--grey); }

.content { margin-top: 26px; }

/* Bublina se zajímavostí */
.bubble {
  position: relative;
  margin: 0 0 40px;
  padding: 18px 18px 20px;
  background: var(--white);
  border: 3px solid var(--ink);
  font-size: 19px;
  line-height: 1.55;
}
.bubble::after, .bubble::before {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 0, 45% 100%);
}
.bubble::after { left: 56%; bottom: -21px; width: 26px; height: 21px; background: var(--ink); }
.bubble::before { left: calc(56% + 5px); bottom: -13px; width: 16px; height: 13px; background: var(--white); z-index: 1; }
.bubble b { display: block; font-weight: 900; margin-bottom: 4px; }

.question { font-size: 22px; font-weight: 800; line-height: 1.3; margin: 0 0 16px; }
.options { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.option {
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  text-align: left;
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.option:disabled { cursor: default; color: var(--ink); }
.option.is-right { background: var(--yellow); font-weight: 900; }
.option.is-wrong { border-color: var(--red); color: var(--red); text-decoration: line-through; text-decoration-thickness: 2px; }
.option.is-dim { opacity: 0.45; }

.verdict {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 16px;
  font-size: 18px;
}
.verdict.is-ok { background: var(--black); color: var(--yellow); }
.verdict.is-miss { background: #ececec; color: var(--ink); }
.verdict-mark { flex: none; font-size: 30px; font-weight: 900; line-height: 1; }

.task-form { display: grid; gap: 10px; margin: 0 0 16px; }
.task-form input {
  width: 100%;
  min-height: 56px;
  padding: 10px 14px;
  font: inherit;
  font-size: 20px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
}
.task-msg { font-size: 16px; color: var(--red); font-weight: 700; margin: 0; min-height: 1.5em; }
.hint { font-size: 15px; color: var(--grey); }

.progress-line { font-size: 15px; color: var(--grey); text-align: center; margin: 14px 0 0; }

/* ------- Odměna ------- */

.reward-stage { text-align: center; padding-bottom: 32px; }
.clock {
  margin: 18px 0 2px;
  font-size: 64px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--yellow);
}
.clock-note { font-size: 14px; color: #bbb; margin: 6px 0 0; }
.redeemed {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 16px;
  border: 3px solid var(--white);
  color: var(--white);
  font-size: 20px;
  font-weight: 900;
  transform: rotate(-3deg);
}
.reward-body { text-align: center; margin-top: 24px; }
.staff { text-align: left; margin-top: 28px; padding-top: 20px; border-top: 2px solid var(--line); }
.staff form { display: flex; gap: 8px; margin-top: 10px; }
.staff input {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 8px 14px;
  font: inherit;
  font-size: 20px;
  letter-spacing: 0.2em;
  border: 3px solid var(--ink);
  border-radius: 0;
}

/* ------- Přenos / info ------- */

.page-title { margin: 22px 0 10px; font-size: clamp(34px, 10vw, 44px); color: var(--yellow); }
.page-lead { color: #ccc; margin: 0; }
.qr-box {
  display: grid;
  place-items: center;
  margin: 24px 0 16px;
  padding: 18px;
  background: var(--white);
  border: 3px solid var(--ink);
}
.qr-box svg { width: min(64vw, 240px); height: auto; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border: 2px solid var(--line); background: var(--white); }
.prose h2 { font-size: 22px; margin: 28px 0 10px; }
.prose ol { padding-left: 1.3em; margin: 20px 0 1em; }
.prose li { margin-bottom: 8px; }
.prose li::marker { font-weight: 900; }

/* ------- Skener ------- */

.scanner { position: fixed; inset: 0; z-index: 50; background: #000; display: grid; place-items: center; }
.scanner[hidden] { display: none; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scanner-frame {
  position: relative;
  width: min(70vw, 300px);
  aspect-ratio: 1;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.55);
  outline: 4px solid var(--yellow);
}
.scanner-msg {
  position: absolute;
  top: calc(24px + env(safe-area-inset-top));
  left: var(--gutter); right: var(--gutter);
  margin: 0;
  color: var(--white);
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px 4px #000;
}
.scanner-close { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom)); }

/* ------- Toast ------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-h) + 8px);
  z-index: 60;
  max-width: calc(100% - 2 * var(--gutter));
  padding: 12px 18px;
  background: var(--black);
  color: var(--yellow);
  font-size: 15px;
  font-weight: 800;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------- Jediný velký moment po naskenování (jiný pro každé zaměření) ------- */

.clapper-stick { transform-origin: 14px 64px; transform-box: view-box; }
.clapper.is-new .clapper-stick { animation: clap 0.7s cubic-bezier(0.5, 0, 0.75, 0) both; }
.clapper.is-new .clapper-body { animation: jolt 0.25s 0.62s ease-out both; transform-origin: 50% 100%; transform-box: fill-box; }
.is-new ~ .points-pop { animation: pop 0.35s 0.75s ease-out both; }

/* barva se „nalije“ zespodu */
.chip-big.is-new .chip-color i { animation: pour 0.7s 0.15s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
/* řádky terminálu se vypisují postupně */
.term.is-new .term-line { animation: type 0.45s var(--d) steps(24, end) both; }
/* bublina vyskočí */
.bubble-big.is-new { animation: bounce 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }

@keyframes pour {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes type {
  from { width: 0; }
  to   { width: var(--w); }
}
@keyframes bounce {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@keyframes clap {
  0%   { transform: rotate(-32deg); }
  55%  { transform: rotate(-32deg); }
  100% { transform: rotate(0deg); }
}
@keyframes jolt {
  0%, 100% { transform: none; }
  35% { transform: translateY(3px) rotate(0.6deg); }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .clapper.is-new .clapper-stick, .clapper.is-new .clapper-body, .is-new ~ .points-pop,
  .chip-big.is-new .chip-color i, .term.is-new .term-line, .bubble-big.is-new, .pick { animation: none; }
  .btn, .toast { transition: none; }
}

@media (min-width: 560px) {
  :root { --gutter: 24px; }
  .strip { gap: 10px; padding: 22px 10px; }
  .strip::before, .strip::after { left: 10px; right: 10px; }
  .tile-name, .level .tile-name { font-size: 15px; }
}

/* ------- Volba zaměření ------- */

.stage-choose { min-height: 100dvh; padding-bottom: 40px; }
.choose-title { margin-top: 32px; }
.picks { display: grid; gap: 12px; margin-top: 28px; }
.pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 92px;
  padding: 16px 16px 16px 14px;
  overflow: hidden;
  border: 3px solid var(--yellow);
  background: #0e0e0e;
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pick:active { transform: translateY(2px); }
.pick.is-current { background: var(--yellow); color: var(--ink); }
.pick.is-current em, .pick.is-current .pick-text span { color: var(--ink); }
.pick-icon { flex: none; font-size: 36px; line-height: 1; }
.pick-text { position: relative; z-index: 1; min-width: 0; }
.pick-text strong { display: block; font-size: 20px; font-weight: 900; line-height: 1.15; }
.pick-text span { display: block; font-size: 14px; color: #ccc; margin-top: 2px; }
.pick-text em { display: block; font-style: normal; font-size: 13px; font-weight: 800; color: var(--yellow); margin-top: 6px; }
/* náhled vizuálu každé varianty v pravém okraji karty */
.pick-deco { position: absolute; top: 0; bottom: 0; right: 0; width: 26px; }
.pick-film .pick-deco { background: repeating-linear-gradient(180deg, #0e0e0e 0 7px, #444 7px 15px); border-left: 4px solid #000; }
.pick-design .pick-deco { background: linear-gradient(#fed501 0 20%, #ff5a36 0 40%, #e6007e 0 60%, #7b2ff7 0 80%, #0057ff 0); }
.pick-it .pick-deco { width: auto; padding: 0 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--yellow); }
.pick-it .pick-deco::before { content: ">_"; }
.pick-all .pick-deco { width: 30px; top: 18px; bottom: auto; right: 12px; height: 22px; border: 3px solid var(--yellow); }
.pick.is-current .pick-deco { opacity: 0.6; }
.pick-film, .pick-design { padding-right: 40px; }
.pick-it { padding-right: 56px; }
.pick-all { padding-right: 52px; }

/* ------- Úpravy podle zaměření ------- */

body[data-track="it"] .title { font-family: var(--mono); letter-spacing: -0.04em; }
body[data-track="it"] .title::after { content: "_"; color: var(--white); }
body[data-track="it"] .bubble-score b { font-family: var(--mono); }