/* Kdejinde Kiosk – tokeny a komponenty z design systému (Figma: ČEZ – Mýty / Chyť páru / Rozdíly). Plátno 1920×1080. */
@font-face { font-family: 'Roobert CEZ'; src: url('/assets/fonts/RoobertCEZ-Light.otf') format('opentype'); font-weight: 300; font-display: block; }
@font-face { font-family: 'Roobert CEZ'; src: url('/assets/fonts/RoobertCEZ-Regular.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Roobert CEZ'; src: url('/assets/fonts/RoobertCEZ-Medium.otf') format('opentype'); font-weight: 500; font-display: block; }
@font-face { font-family: 'Roobert CEZ'; src: url('/assets/fonts/RoobertCEZ-SemiBold.otf') format('opentype'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Roobert CEZ'; src: url('/assets/fonts/RoobertCEZ-Bold.otf') format('opentype'); font-weight: 700; font-display: block; }

:root {
  --bg: #363738;
  --bg-edge: #2b2c2e;
  --surface: #45474a;
  --line: #56585b;
  --line-strong: #9a9c9f;
  --ink: #ffffff;
  --ink-muted: #b8babc;
  --green: #00c752;
  --orange: #f24f00;
  --on-green: var(--ink);
  --on-orange: var(--ink);
  --scrim: rgba(0, 0, 0, 0.3);
  --focus: var(--ink);
  --font-sans: 'Roobert CEZ', 'Helvetica Neue', Arial, sans-serif;
  --glow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.45), inset 0 0 6px rgba(255, 255, 255, 0.5);
  --kj-texture: url('/assets/img/bg-textura.jpg');
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font-family: var(--font-sans);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button { font: inherit; color: inherit; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
img { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* Plátno 1920×1080 škálované na displej (letterbox). */
#viewport { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
.kj-screen, #stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0;
  color: var(--ink); font-family: var(--font-sans);
  background: radial-gradient(70.9% 70.9% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.15) 82.7%), var(--kj-texture) center / cover no-repeat, var(--bg);
}
.layer { position: absolute; inset: 0; }

/* Tlačítka */
.kj-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 103px; min-width: 297px; padding: 0 63px; border: 0; border-radius: 0;
  background: var(--green); color: var(--on-green); font: 700 33.66px/39px var(--font-sans); white-space: nowrap; cursor: pointer; outline: none;
}
.kj-btn:active, .kj-btn.is-pressed { filter: brightness(.9); box-shadow: inset 0 0 0 4px var(--focus); }
.kj-btn--orange { background: var(--orange); color: var(--on-orange); }
.kj-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.kj-btn[disabled] { background: var(--surface); color: var(--ink-muted); filter: none; box-shadow: none; cursor: default; }
.kj-answers { display: flex; gap: 15px; }
.kj-answer { width: 772px; height: 167px; border: 0; background: var(--green); color: var(--on-green); font: 700 42px/48px var(--font-sans); cursor: pointer; }
.kj-answer--myth { background: var(--orange); color: var(--on-orange); }
.kj-answer:active { filter: brightness(.9); box-shadow: inset 0 0 0 4px var(--focus); }
.kj-link { background: none; border: 0; padding: 12px 24px; color: var(--ink); font: 400 42px/48px var(--font-sans); cursor: pointer; }
.kj-link:active { text-decoration: underline; text-underline-offset: 8px; }

/* Navigace ✕ / ← */
.kj-nav { position: absolute; left: 100px; top: 101px; width: 100px; height: 100px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; z-index: 20; }
.kj-nav svg { display: block; }
.kj-nav--close svg { width: 64px; height: 64px; stroke: var(--green); stroke-width: 6.69; stroke-linecap: round; fill: none; }
.kj-nav--back svg { width: 77px; height: 42px; fill: var(--green); }
.kj-nav:active { opacity: .7; }

/* Značka na okraji */
.kj-edge-mark { position: absolute; left: 0; width: 24px; }
.kj-edge-mark::before, .kj-edge-mark::after { content: ''; display: block; width: 24px; height: 24px; }
.kj-edge-mark::before { background: var(--green); margin-bottom: 24px; }
.kj-edge-mark::after { background: var(--orange); }

/* Úvod minihry */
.kj-intro__title { position: absolute; left: 101px; top: 321px; margin: 0; width: 780px; font: 300 109.66px/126px var(--font-sans); }
.kj-intro__title.is-one-line { top: 414px; }
.kj-intro__cta { position: absolute; left: 108px; top: 682px; }
.kj-intro__title.is-one-line ~ .kj-intro__cta { top: 637px; }
.kj-intro__art { position: absolute; object-fit: contain; }
.kj-intro__step { position: absolute; right: 100px; bottom: 80px; font: 700 36px/41px var(--font-sans); color: var(--ink-muted); }

/* Hlavička */
.kj-title { position: absolute; left: 0; right: 0; top: 115px; margin: 0; text-align: center; font: 400 67.77px/86px var(--font-sans); }
.kj-meta { position: absolute; left: 0; right: 0; top: 139px; margin: 0; text-align: center; font: 700 36px/41px var(--font-sans); font-variant-numeric: tabular-nums; }
.kj-counter { position: absolute; left: 0; right: 0; top: 212px; margin: 0; text-align: center; font: 700 44px/53px var(--font-sans); font-variant-numeric: tabular-nums; }
.kj-counter.is-low { color: var(--orange); }
.kj-status { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 400 36px/41px var(--font-sans); }
.kj-status b { font-weight: 700; }

/* Dialog nad hrou */
.kj-dialog { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; z-index: 50; }
.kj-dialog__panel { min-width: 1112px; max-width: 1500px; padding: 100px 100px 110px; background: var(--bg); display: flex; flex-direction: column; align-items: center; text-align: center; }
.kj-dialog__title { margin: 0; font: 400 67.77px/86px var(--font-sans); }
.kj-dialog__text { margin: 28px 0 0; font: 400 36px/1.3 var(--font-sans); color: var(--ink); max-width: 1100px; }
.kj-dialog__score { margin: 20px 0 0; font: 700 123px/155px var(--font-sans); font-variant-numeric: tabular-nums; }
.kj-dialog__sub { margin: 0; font: 400 36px/41px var(--font-sans); color: var(--ink-muted); }
.kj-dialog__actions { display: flex; gap: 50px; margin-top: 54px; }
.kj-dialog__scroll { max-height: 560px; overflow-y: auto; touch-action: pan-y; text-align: left; white-space: pre-line; font: 400 30px/1.4 var(--font-sans); margin-top: 32px; padding-right: 24px; }

/* Formulář */
.kj-field { display: flex; flex-direction: column; gap: 12px; }
.kj-field__label { font: 400 27px/31px var(--font-sans); color: var(--ink-muted); }
.kj-field__label b { color: var(--ink); font-weight: 400; }
.kj-field__input {
  height: 103px; padding: 0 32px; display: flex; align-items: center; background: var(--surface); box-shadow: inset 0 0 0 3px var(--line-strong);
  font: 400 42px/48px var(--font-sans); color: var(--ink); cursor: text; white-space: pre; overflow: hidden; border: 0; text-align: left; width: 100%;
}
.kj-field__input .ph { color: var(--ink-muted); }
.kj-field.is-active .kj-field__input { box-shadow: inset 0 0 0 4px var(--focus); }
.kj-field.is-active .kj-field__input::after { content: ''; flex: none; width: 3px; height: 52px; margin-left: 3px; background: var(--green); animation: kj-caret 1s steps(1) infinite; }
.kj-field__hint { font: 400 27px/31px var(--font-sans); color: var(--ink-muted); min-height: 31px; }
.kj-field.is-error .kj-field__input { box-shadow: inset 0 0 0 4px var(--orange); }
.kj-field.is-error.is-active .kj-field__input { box-shadow: inset 0 0 0 4px var(--orange); }
.kj-field.is-error .kj-field__hint { color: var(--orange); font-weight: 700; }
.kj-field.is-valid .kj-field__hint { color: var(--green); font-weight: 700; }
@keyframes kj-caret { 50% { opacity: 0; } }

.kj-check { display: flex; gap: 28px; align-items: flex-start; font: 400 32px/1.35 var(--font-sans); cursor: pointer; background: none; border: 0; padding: 0; text-align: left; color: var(--ink); }
.kj-check__box { flex: none; width: 64px; height: 64px; box-shadow: inset 0 0 0 3px var(--line-strong); background: var(--surface); display: grid; place-items: center; }
.kj-check.is-checked .kj-check__box { background: var(--green); box-shadow: none; }
.kj-check__box svg { width: 40px; height: 40px; stroke: var(--on-green); stroke-width: 6.69; stroke-linecap: round; fill: none; visibility: hidden; }
.kj-check.is-checked .kj-check__box svg { visibility: visible; }
.kj-check .req { color: var(--ink-muted); }
.kj-textlink { background: none; border: 0; padding: 0; color: var(--green); font: 700 32px/1.35 var(--font-sans); text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }

/* On-screen klávesnice */
.kj-kbd { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--bg-edge); }
.kj-kbd__row { display: flex; gap: 12px; justify-content: center; }
.kj-key { width: 96px; height: 96px; border: 0; border-radius: 6px; background: var(--surface); color: var(--ink); font: 400 40px/1 var(--font-sans); cursor: pointer; padding: 0; }
.kj-key:active, .kj-key.is-pressed { background: var(--ink); color: var(--bg); }
.kj-key--wide { width: 204px; font: 700 32px/1 var(--font-sans); }
.kj-key--space { width: 420px; }
.kj-key--accent { width: 204px; background: var(--green); color: var(--on-green); font: 700 32px/1 var(--font-sans); }
.kj-key--on { background: var(--ink); color: var(--bg); }
.kj-key--chip { width: auto; height: 76px; padding: 0 28px; font: 400 30px/1 var(--font-sans); background: transparent; box-shadow: inset 0 0 0 2px var(--line-strong); }

/* Svítící box */
.kj-glow { display: inline-flex; flex-direction: column; gap: 10px; padding: 32px 48px; border-radius: 12px; border: 3px solid var(--ink); box-shadow: var(--glow); min-width: 420px; }
.kj-glow__label { font: 400 36px/41px var(--font-sans); }
.kj-glow__value { font: 700 123px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kj-glow__value small { font-size: 42px; margin-left: 12px; font-weight: 400; }

/* Průběh 1–2–3 */
.kj-steps { display: flex; gap: 16px; align-items: center; font: 700 30px/1 var(--font-sans); color: var(--ink-muted); }
.kj-steps__step { display: flex; align-items: center; gap: 14px; }
.kj-steps__dot { width: 52px; height: 52px; display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--line-strong); }
.kj-steps__step.is-done { color: var(--ink); }
.kj-steps__step.is-done .kj-steps__dot { background: var(--green); box-shadow: none; color: var(--on-green); }
.kj-steps__step.is-current { color: var(--ink); }
.kj-steps__step.is-current .kj-steps__dot { box-shadow: inset 0 0 0 3px var(--ink); }
.kj-steps__sep { width: 56px; height: 3px; background: var(--line); }

/* Žebříček */
.kj-lb { width: 100%; border-collapse: collapse; font-family: var(--font-sans); table-layout: fixed; }
.kj-lb td { height: 72px; padding: 0 24px; border-bottom: 2px solid var(--line); font: 400 40px/1 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kj-lb tr:nth-child(odd) td { background: rgba(0, 0, 0, .18); }
.kj-lb__rank { width: 110px; text-align: right; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.kj-lb tr.is-top .kj-lb__rank { color: var(--orange); }
.kj-lb__score { width: 210px; text-align: right; font-weight: 700 !important; font-variant-numeric: tabular-nums; color: var(--green); }
.kj-lb tr.is-new td, .kj-lb tr.is-me td { background: var(--ink) !important; color: var(--bg); }
.kj-lb tr.is-new .kj-lb__score, .kj-lb tr.is-new .kj-lb__rank, .kj-lb tr.is-me .kj-lb__score, .kj-lb tr.is-me .kj-lb__rank { color: var(--bg); }
.kj-lb tr.is-empty td { color: var(--ink-muted); }

/* Nečinnost */
.kj-idle__count { font: 700 123px/155px var(--font-sans); color: var(--orange); font-variant-numeric: tabular-nums; margin: 20px 0 0; }

/* Toast (síť) */
.kj-net { position: absolute; right: 24px; top: 20px; font: 400 20px/1 var(--font-sans); color: var(--ink-muted); opacity: .7; z-index: 60; display: flex; gap: 10px; align-items: center; }
.kj-net::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.kj-net[hidden] { display: none; }