/* =========================================================================
   Shell — scéna, HUD, tlačítka, toasty, modály, titulní obrazovka
   ========================================================================= */

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  padding-top: 0;
  transition: padding-top var(--dur) var(--ease);
}
body.has-hud .stage { padding-top: var(--hud-h); }

.phase {
  height: 100%;
  animation: phase-in var(--dur-slow) var(--ease-out) both;
}
.phase[hidden] { display: none; }

@keyframes phase-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Tlačítka
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--fg);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--bg-3); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Primární tlačítko je světlá deska s tmavým tiskem — fyzická klávesa
   v tmavé místnosti. Žádný gradient, žádná záře: zvedá ho stín, ne svit. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-bright);
  box-shadow: var(--shadow-lift);
}
.btn-primary:active:not(:disabled) { background: var(--accent-dim); box-shadow: var(--shadow-card); }

.btn-ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg-dim);
}
.btn-ghost:hover:not(:disabled) { color: var(--fg); background: var(--bg-2); }

.btn-danger { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger) 40%, transparent); color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-tint); }

.btn-sm { padding: 6px 12px; font-size: var(--t-small); border-radius: var(--radius-sm); }

.btn-icon {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-icon:hover { color: var(--fg); background: var(--bg-2); }
.btn-icon[aria-pressed="false"] { color: var(--fg-faint); }

/* =========================================================================
   HUD
   ========================================================================= */
.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  height: var(--hud-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s5);
  background: color-mix(in oklab, var(--bg-1) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.hud[hidden] { display: none; }

/* Sloupce napevno. Ve fázích bez metrik je prostřední prvek [hidden], mřížka
   ho přeskočí a ikony spadnou doprostřed lišty, kde nemají co dělat. */
.hud-left    { grid-column: 1; }
.hud-metrics { grid-column: 2; }
.hud-right   { grid-column: 3; }

.hud-left { display: flex; align-items: center; gap: var(--s3); min-width: 0; }

/* Značka příběhu. Kreslí se currentColor, takže barvu určuje tohle místo
   a značka si nedělá výjimku z pravidla, že barvu nese jen informace. */
.hud-mark {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--radius);
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg);
}
.hud-mark svg { width: 18px; height: 18px; display: block; }

.hud-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hud-mission { font-size: var(--t-small); font-weight: 600; }
.hud-phase {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hud-metrics { display: flex; align-items: center; gap: var(--s2); }

.metric {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  /* Na úzkém HUD by se „98 %" zalomilo za mezerou a chip by byl o řádek vyšší. */
  white-space: nowrap;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.metric-label {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
/* Zkrácená varianta naskočí až pod 640 px, viz „Malé displeje". */
.metric-label--short { display: none; }
.metric-value {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.metric--good .metric-value { color: var(--ok); }
.metric--warn .metric-value { color: var(--warn); }
.metric--bad  .metric-value { color: var(--danger); }
.metric--changed {
  background: var(--bg-3);
  box-shadow: inset 0 0 0 1px var(--line-accent), 0 0 16px var(--accent-tint);
}

.hud-right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); }

/* =========================================================================
   Titulní obrazovka
   ========================================================================= */
.title-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: center;
  gap: var(--s8);
  padding: var(--s7) clamp(var(--s5), 6vw, 96px);
  overflow: hidden;
}

/* Pozadí je jediné světlo v místnosti — lampa nad stolem, mírně vpravo nad
   monolitem. Ne dvě barevné záře pod nadpisem: ty by jen malovaly reklamu. */
.title-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 62% at 72% 8%,
    rgba(244, 240, 230, .055), rgba(244, 240, 230, .018) 42%, transparent 72%);
  pointer-events: none;
}

/* Vodorovné linky jako řádky na balicím papíru, po kterém jde Event Storming
   zleva doprava. Slábnou dolů, takže se pod obsahem ztratí. */
.title-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 88px);
  mask-image:
    linear-gradient(to bottom, #000 0%, transparent 62%),
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  opacity: .45;
  pointer-events: none;
}

.title-copy { position: relative; z-index: 1; max-width: 620px; }

.title-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding: 4px 0 6px;
  border-top: 2px solid var(--fg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.title-kicker::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--danger);
  animation: pulse-dot 2s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}

.title-name {
  font-size: var(--t-display);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: var(--s5);
}
.title-name em {
  display: block;
  font-style: normal;
  font-family: var(--font-display);
  font-size: .38em;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-top: var(--s3);
}

.title-lede {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: var(--lh-snug);
  color: var(--fg-dim);
  margin-bottom: var(--s6);
  max-width: 46ch;
}
.title-lede strong { color: var(--fg); font-weight: 500; }

.title-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s6); }

.title-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s4) var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.title-meta div { display: flex; flex-direction: column; gap: 2px; }
.title-meta dt {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.title-meta dd { font-size: var(--t-small); color: var(--fg-dim); }

/* --- Dekorace: rozpadající se monolit ------------------------------------- */
.title-art { position: relative; z-index: 1; display: grid; place-items: center; }
.title-art svg { width: 100%; max-width: 460px; height: auto; overflow: visible; }

/* Ilustrace bere barvy z tokenů, ne z vlastních hexů uvnitř SVG. Jinak
   zůstane u palety, kterou měla hra ve chvíli, kdy ji někdo kreslil. */
.art-slab { fill: var(--bg-2); stroke: var(--line-strong); stroke-width: 1.5; }
.art-crack { stroke: var(--danger); stroke-width: 1.5; fill: none; opacity: .75; }

.art-lines line { stroke: var(--fg-faint); stroke-width: 3; stroke-linecap: round; opacity: .45; }
/* První řádek každé desky je to, co z ní bude vlastní kontext. */
.art-shard-a .art-lines line:first-child { stroke: var(--ctx-0); opacity: .8; }
.art-shard-b .art-lines line:first-child { stroke: var(--sticky-event); opacity: .8; }
.art-shard-c .art-lines line:first-child { stroke: var(--sticky-policy); opacity: .8; }

/* Lístečky na monolitu jsou z téhož papíru jako na desce návrhu. */
.art-note-paper { rx: 2; }
.art-note-line { rx: 2; fill: var(--paper-ink); opacity: .5; }
.art-note-line--short { opacity: .34; }
.art-note-1 .art-note-paper { fill: color-mix(in srgb, var(--sticky-event) 74%, var(--paper-cream)); }
.art-note-2 .art-note-paper { fill: color-mix(in srgb, var(--sticky-command) 74%, var(--paper-cream)); }
.art-note-3 .art-note-paper { fill: color-mix(in srgb, var(--sticky-policy) 74%, var(--paper-cream)); }
.art-shard { transform-box: fill-box; transform-origin: center; }
.art-shard-a { animation: drift-a 9s var(--ease) infinite alternate; }
.art-shard-b { animation: drift-b 11s var(--ease) infinite alternate; }
.art-shard-c { animation: drift-c 10s var(--ease) infinite alternate; }
@keyframes drift-a { to { transform: translate(-10px, -6px) rotate(-1.5deg); } }
@keyframes drift-b { to { transform: translate(9px, 4px) rotate(1.2deg); } }
@keyframes drift-c { to { transform: translate(2px, 11px) rotate(-.8deg); } }

.art-note { animation: float-note 7s var(--ease) infinite alternate; }
.art-note-2 { animation-duration: 8.5s; animation-delay: -2s; }
.art-note-3 { animation-duration: 6.5s; animation-delay: -4s; }
@keyframes float-note { to { transform: translateY(-9px); } }

/* =========================================================================
   Toasty
   ========================================================================= */
.toasts {
  position: fixed;
  z-index: 80;
  right: var(--s5);
  bottom: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  width: min(380px, calc(100vw - var(--s7)));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line-strong);
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  pointer-events: auto;
  animation: toast-in var(--dur-slow) var(--ease-spring) both;
}
.toast.is-leaving { animation: toast-out var(--dur) var(--ease) both; }
.toast-icon { flex: none; font-size: 15px; line-height: 1.3; }
.toast--ok     { box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(74,222,128,.4); }
.toast--ok .toast-icon { color: var(--ok); }
.toast--warn   { box-shadow: var(--shadow-lift), inset 0 0 0 1px rgba(253,186,74,.4); }
.toast--warn .toast-icon { color: var(--warn); }
.toast--error  { box-shadow: var(--shadow-lift), inset 0 0 0 1px color-mix(in oklab, var(--danger) 45%, transparent); }
.toast--error .toast-icon { color: var(--danger); }

@keyframes toast-in  { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(24px) scale(.96); } }

/* =========================================================================
   Modály
   ========================================================================= */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: rgba(4, 6, 11, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in var(--dur) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(660px, 100%);
  max-height: calc(100vh - var(--s8));
  overflow: auto;
  padding: var(--s6);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--shadow-modal), inset 0 0 0 1px var(--line-strong);
  animation: modal-in var(--dur-slow) var(--ease-out) both;
}
.modal--wide { width: min(880px, 100%); }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal-eyebrow { margin-bottom: var(--s2); }
.modal-title { font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; margin-bottom: var(--s3); }
.modal-body { color: var(--fg-dim); line-height: var(--lh-body); }
.modal-body p + p { margin-top: var(--s3); }
.modal-body strong { color: var(--fg); font-weight: 500; }
.modal-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* --- Konfrontace dvou významů --------------------------------------------- */
.confront-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s4);
  align-items: stretch;
  margin: var(--s5) 0;
}
.confront-side {
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.confront-who { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
.confront-avatar {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-3);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--fg);
}
.confront-name { font-size: var(--t-small); font-weight: 600; line-height: 1.2; }
.confront-role {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fg-dim);
}
.confront-term {
  font-family: var(--font-mono);
  font-size: var(--t-h3);
  color: var(--accent);
  margin-bottom: var(--s2);
}
.confront-meaning { font-size: var(--t-small); color: var(--fg-dim); line-height: var(--lh-snug); }
.confront-vs {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.confront-vs::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
.confront-vs span { position: relative; padding: var(--s2) 0; background: var(--bg-1); }

/* =========================================================================
   Sdílené drobnosti
   ========================================================================= */
.hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-small);
  color: var(--fg-dim);
  line-height: var(--lh-snug);
}
.hint-icon { flex: none; color: var(--accent); }

.empty-note {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--s6);
  text-align: center;
  color: var(--fg-faint);
  font-size: var(--t-small);
}

/* =========================================================================
   Upozornění, že hra chce počítač

   Sedí na titulce, takže ho hráč vidí dřív, než začne — na rozdíl od plovoucí
   lišty dole, která je jen praktická nápověda k ovládání.

   Dvě podmínky, protože ani jedna sama nestačí. Dotykový vstav do 1023 px je
   telefon nebo tablet. Do 700 px to platí i bez dotyku, kdyby `pointer` někde
   lhal. Naopak úzké okno na desktopu (700–1023 px, myš) hlášku nedostane,
   tam je hra v pohodě a „pošli si to na počítač" by bylo k smíchu.

   Celé přes media query, aby se otočení telefonu vyřešilo samo, bez
   překreslování titulky z JS.
   ========================================================================= */
.title-notice {
  display: none;
  position: relative;
  z-index: 1;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s4);
  border-radius: var(--radius-lg);
  background: var(--warn-tint);
  box-shadow: inset 0 0 0 1px var(--warn);
}

@media (max-width: 1023px) and (pointer: coarse) { .title-notice { display: flex; } }
@media (max-width: 700px) { .title-notice { display: flex; } }

.title-notice-icon { flex: none; font-size: 22px; line-height: 1.2; }
.title-notice-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  color: var(--fg-dim);
}
.title-notice-title { font-size: var(--t-body); color: var(--warn); }

/* Zalomená a bez `nowrap` — na 390px displeji se na jeden řádek nevejde a
   vytekla by mimo obrazovku na obě strany. `pointer-events: none`, protože
   leží nad primárním tlačítkem fáze; zmizí sama, viz watchSmallScreen(). */
.small-screen-note {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: var(--s3);
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2 * var(--s4));
  padding: 6px 14px;
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line-strong);
  font-size: var(--t-micro);
  line-height: var(--lh-snug);
  text-align: center;
  color: var(--fg-dim);
  pointer-events: none;
  animation: fade-in var(--dur) var(--ease) both;
}
.small-screen-note.is-leaving { opacity: 0; transition: opacity var(--dur-slow) var(--ease); }

/* =========================================================================
   Responzivita
   ========================================================================= */
@media (max-width: 1023px) {
  .title-screen { grid-template-columns: 1fr; gap: var(--s6); align-content: center; }
  .title-art { display: none; }

  /* Metriky jsou hlavní zpětná vazba na návrh — ustoupí jim název mise,
     ne naopak. Ten je stejně vidět na desce i v patičce. */
  .hud { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); padding: 0 var(--s4); }
  .hud-title { display: none; }
  .hud-metrics { justify-content: center; min-width: 0; }
  .metric { padding: 5px 9px; gap: 6px; }
}

/* =========================================================================
   Onboarding
   ========================================================================= */
.onboarding {
  position: fixed;
  inset: 0;
  z-index: 95;
  animation: fade-in var(--dur) var(--ease) both;
}

/* Zvýrazněná oblast: díra ve ztmavení udělaná obřím stínem. */
.onboarding-spot {
  position: absolute;
  left: var(--spot-x, 0);
  top: var(--spot-y, 0);
  width: var(--spot-w, 0);
  height: var(--spot-h, 0);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(6, 6, 5, .8), inset 0 0 0 2px var(--accent);
  transition: all var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.onboarding-card {
  position: absolute;
  left: var(--card-x, 50%);
  top: var(--card-y, 50%);
  width: min(380px, calc(100vw - 32px));
  padding: var(--s4);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  box-shadow: var(--shadow-modal), inset 0 0 0 1px var(--line-accent);
  transition: all var(--dur-slow) var(--ease-out);
}
.onboarding-title { font-size: var(--t-h3); font-weight: 600; margin: var(--s2) 0 var(--s2); }
.onboarding-body { font-size: var(--t-small); line-height: var(--lh-snug); color: var(--fg-dim); }
.onboarding-actions { display: flex; gap: var(--s2); margin-top: var(--s4); }

/* =========================================================================
   Malé displeje
   ========================================================================= */
@media (max-width: 639px) {
  .title-name { font-size: clamp(30px, 10vw, 42px); }
  .title-screen { padding: var(--s6) var(--s4); }

  /* Tři plné popisky se vedle ikon nevejdou — zkrácené ano. */
  .metric-label--full { display: none; }
  .metric-label--short { display: inline; }
  .metric { padding: 5px 8px; }
  .hud { padding: 0 var(--s3); gap: var(--s2); }
}

/* =========================================================================
   Výběr příběhu na titulce
   ========================================================================= */
.title-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s6);
  overflow: auto;
  padding-block: var(--s6);
}
/* Sloupec drží čitelnou šířku i na velmi širokých displejích. */
.title-screen > * { width: min(100%, 1180px); }

/* Dekorace nesmí vyrábět scroll — titulka teď scrolluje obsahem, takže
   přesahující pozadí by přidalo dvě stě pixelů prázdna pod stránku. */
.title-screen::before { inset: 0; }

.title-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
  align-items: center;
  gap: var(--s6);
}
.title-hero .title-art svg { max-width: 300px; }
.title-hero .title-name { font-size: clamp(34px, 4.4vw, 56px); margin-bottom: var(--s4); }
.title-hero .title-lede { margin-bottom: 0; }
.title-hero .title-kicker { margin-bottom: var(--s4); }

.level-picker { position: relative; z-index: 1; }
.level-picker-title { margin-bottom: var(--s3); }

.level-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s4);
}

.level-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border-radius: var(--radius-lg);
  text-align: left;
  background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.level-card:hover {
  background: var(--bg-2);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--line-accent), var(--shadow-lift);
}
.level-card.is-active {
  background: color-mix(in oklab, var(--accent) 9%, var(--bg-1));
  box-shadow: inset 0 0 0 2px var(--accent);
}

.level-card-head { display: flex; align-items: center; gap: var(--s3); }
.level-card-title { flex: 1; min-width: 0; font-size: var(--t-h2); font-weight: 600; letter-spacing: -.02em; color: var(--fg); }

/* Značka příběhu na kartě. Vybraná karta ji rozsvítí — je to jediné místo,
   kde se karta liší i něčím jiným než rámečkem. */
.level-card-mark {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg-dim);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.level-card-mark svg { width: 22px; height: 22px; display: block; }
.level-card:hover .level-card-mark { color: var(--fg); }
.level-card.is-active .level-card-mark {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

.level-card-state {
  flex: none;
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.level-card-state.is-progress { background: var(--warn-tint); color: var(--warn); }
.level-card-state.is-done { background: var(--ok-tint); color: var(--ok); }

.level-card-tagline {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.level-card-blurb {
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--fg-dim);
  margin-top: var(--s1);
}

.level-card-meta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.level-card-chip {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--bg-3);
  font-size: var(--t-micro);
  color: var(--fg-dim);
}
.level-card-teaches { font-size: var(--t-micro); color: var(--fg-faint); line-height: var(--lh-snug); }

@media (max-width: 1023px) {
  .title-hero { grid-template-columns: 1fr; }
  .title-hero .title-art { display: none; }
  .level-cards { grid-template-columns: 1fr; }
  .level-card { padding: var(--s4); }
  .level-card-blurb { display: none; }
}


/* =========================================================================
   Brána při startu

   Když prohlížeč neumí `color-mix()`, nevznikne papír lístečku a tmavý tisk
   zůstane na tmavé ploše — hra se nerozbije, jenom zmizí. Tahle obrazovka
   je jediná v celé hře, která se musí vykreslit i bez toho, takže nesahá na
   nic než na základní tokeny.
   ========================================================================= */
.boot-notice {
  max-width: 46rem;
  margin: 12vh auto;
  padding: var(--s6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--warn);
  background: var(--bg-1);
}
.boot-notice-title {
  margin: var(--s2) 0 var(--s4);
  font-family: var(--font-display);
  font-size: var(--t-h2);
  color: var(--fg);
}
.boot-notice-body {
  margin: 0 0 var(--s4);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-dim);
}
.boot-notice-list {
  margin: 0 0 var(--s4);
  padding-left: var(--s5);
  list-style: disc;
  font-size: var(--t-small);
  line-height: var(--lh-body);
  color: var(--fg-dim);
}
.boot-notice-list strong { color: var(--fg); }

/* =========================================================================
   Vývojářská lišta

   Nesmí splynout s hrou. Je monospace, ostrá a v barvě, kterou hra nikde
   jinde nepoužívá — aby bylo na první pohled jasné, že tohle není součást
   úlohy. Ve shipnuté hře se stejně nevykreslí: `devBar()` vrací null,
   dokud není zapnutý vývojářský režim.
   ========================================================================= */
.devbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px dashed var(--warn);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--warn) 8%, var(--bg-1));
}
.devbar-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--warn);
}
.devbar-btn {
  padding: 4px 10px;
  border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--fg);
  font-size: var(--t-small);
  cursor: pointer;
}
.devbar-btn:hover { border-color: var(--warn); }