/* Vygenerováno z design/components/bundle.css - needitovat ručně. */
/* Mantinely - sdílené třídy jeviště. Plátno 1440×810 CSS px (video 1920×1080 ve 2× snímání). */

.scena {
  position: relative; width: 1440px; height: 810px; overflow: hidden;
  background: var(--led); color: var(--ink);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}
/* bezpečná zóna videa */
.zona { position: absolute; inset: var(--space-8); }

/* obrys kluziště */
.mantinel {
  position: absolute; border: var(--border-vlas) solid var(--led-line);
  border-radius: var(--radius-mantinel);
}
.cara { position: absolute; top: 0; bottom: 0; width: var(--border-cara); }
.cara--modra { background: var(--cara-modra); }
.cara--cervena { background: var(--cara-cervena); }

/* puk = agent */
.puk {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: var(--radius-puk); background: var(--puk);
}
.stopa-tecka { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: var(--radius-puk); background: var(--puk); opacity: .35; }

/* štítky 1-4 slova */
.stitek {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 26px; line-height: 1.1; font-weight: 600; letter-spacing: .02em;
  background: var(--led-raised); color: var(--ink); border: var(--border-vlas) solid var(--led-line);
  white-space: nowrap;
}
.stitek--hranice { color: var(--cara-modra); border-color: var(--cara-modra); }
.stitek--zachyceno { background: var(--cara-cervena); color: var(--led-raised); border-color: var(--cara-cervena); }
.stitek--proslo { color: var(--senzor-ok); border-color: var(--senzor-ok); }
.stitek--clovek { background: var(--jantar); color: var(--on-jantar); border-color: var(--jantar); }
.hlaska { font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* kluziště z bundle.js (Mantinely.kluziste) */
.ms-rink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ms-cara { fill: none; stroke: var(--led-line); stroke-width: var(--border-vlas); }
.ms-tecka { fill: var(--led-line); }
.ms-krease { fill: var(--brankoviste); opacity: .6; }
.ms-branka { fill: none; stroke: var(--ink-muted); stroke-width: 3; }
.ms-modra { fill: var(--cara-modra); }
.ms-mantinel { fill: none; stroke: var(--ink); stroke-width: var(--border-cara); }

/* puk z bundle.js (Mantinely.puk) */
.ms-puk { z-index: 3; will-change: transform; }
.ms-puk__disk { position: absolute; border-radius: var(--radius-puk); background: var(--puk); box-shadow: inset 0 -5px 0 rgba(255,255,255,.16); }
.ms-puk__stin { position: absolute; border-radius: var(--radius-puk); background: var(--ink); opacity: .16; filter: blur(3px); }
.ms-puk--duch .ms-puk__disk { box-shadow: none; }

/* velký verdikt (ofsajd, zachyceno) */
.verdikt-velky { display: flex; flex-direction: column; gap: 8px; }
.verdikt-velky b { font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: .85; color: var(--cara-cervena); text-transform: uppercase; letter-spacing: .01em; }

/* panel kódu a relace - tmavý v obou motivech */
.panel {
  background: var(--kod-bg); color: var(--kod-fg); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 24px; line-height: 1.45; overflow: hidden;
  box-shadow: 0 0 0 2px var(--kod-line);
}
.panel__hlava {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 12px var(--space-3); border-bottom: 1px solid var(--kod-line);
  font-size: 20px; color: var(--syn-com);
}
.kw { color: var(--syn-kw); } .str { color: var(--syn-str); } .num { color: var(--syn-num); }
.typ { color: var(--syn-type); } .var { color: var(--syn-var); } .com { color: var(--syn-com); } .fn { color: var(--syn-fn); }

.titulek { font-family: var(--font-display); font-weight: 800; font-size: 80px; line-height: .95; text-wrap: balance; }
.zdroj { font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .scena *, .scena *::before, .scena *::after { animation: none !important; transition: none !important; }
}