/* Obrazovky kiosku – rozměry z Figmy (plátno 1920×1080). */
#overlay > * { pointer-events: auto; }
.screen { z-index: 1; }
#overlay { z-index: 40; }
.hl { color: var(--orange); }

/* Úvod */
.attract__logo { position: absolute; left: 100px; top: 100px; height: 132px; }
.attract__lang { position: absolute; right: 100px; top: 100px; display: flex; gap: 28px; z-index: 5; }
.attract__flag { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-muted); font: 700 24px/1 var(--font-sans); letter-spacing: .06em; }
.attract__flag svg { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,.18); opacity: .55; transition: opacity .2s, box-shadow .2s, transform .2s; }
.attract__flag.is-on { color: var(--ink); }
.attract__flag.is-on svg { opacity: 1; box-shadow: 0 0 0 5px var(--green); }
.attract__flag:active svg { transform: scale(.94); }
.attract__copy { position: absolute; left: 101px; top: 360px; width: 860px; display: flex; flex-direction: column; align-items: flex-start; }
.attract__title { margin: 0; font: 300 109.66px/126px var(--font-sans); }
.attract__lead { margin: 44px 0 0; width: 820px; font: 400 36px/1.3 var(--font-sans); }
.attract__cta { margin: 64px 0 0 7px; }
.attract__scene { position: absolute; left: 860px; top: 230px; width: 900px; height: 800px; }
.attract__float { position: absolute; inset: 0; animation: tower-float 7s ease-in-out infinite; }
.attract__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Pára stoupající z věže (bod = horní okraj věže) */
.attract__steam { position: absolute; left: 497px; top: 182px; width: 0; height: 0; }
.attract__steam img { position: absolute; left: 0; top: 0; width: 170px; opacity: 0; transform: translate(-50%, -50%) scale(.35); animation: steam-rise 6s cubic-bezier(.3, .1, .4, 1) infinite; }
.attract__steam img:nth-child(1) { animation-delay: 0s; --dx: -120px; }
.attract__steam img:nth-child(2) { animation-delay: 1s; --dx: 90px; }
.attract__steam img:nth-child(3) { animation-delay: 2s; --dx: -40px; }
.attract__steam img:nth-child(4) { animation-delay: 3s; --dx: 150px; }
.attract__steam img:nth-child(5) { animation-delay: 4s; --dx: -160px; }
.attract__steam img:nth-child(6) { animation-delay: 5s; --dx: 40px; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.35); }
  15% { opacity: .95; }
  70% { opacity: .85; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -330%) scale(1.05); }
}
/* Kapky z oblaku ve věži do jezírka */
.attract__rain { position: absolute; left: 492px; top: 395px; width: 80px; height: 0; transform: translateX(-50%); }
.attract__rain i { position: absolute; top: 0; width: 8px; height: 16px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #6ec6ff; opacity: 0; animation: rain-drop 1.4s ease-in infinite; }
.attract__rain i:nth-child(1) { left: 6px; animation-delay: 0s; }
.attract__rain i:nth-child(2) { left: 20px; animation-delay: .5s; }
.attract__rain i:nth-child(3) { left: 34px; animation-delay: .2s; }
.attract__rain i:nth-child(4) { left: 48px; animation-delay: .9s; }
.attract__rain i:nth-child(5) { left: 62px; animation-delay: .35s; }
.attract__rain i:nth-child(6) { left: 76px; animation-delay: 1.1s; }
.attract__rain i:nth-child(7) { left: 28px; animation-delay: .75s; }
@keyframes rain-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(180px); } }
@keyframes tower-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* Tlačítko láká z dálky */
.attract__cta { position: relative; }
.attract__cta::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 0 rgba(0, 199, 82, .7); animation: cta-pulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 199, 82, .65); } 70%, 100% { box-shadow: 0 0 0 28px rgba(0, 199, 82, 0); } }
/* Značka na okraji jemně bliká */
.screen--attract .kj-edge-mark::before { animation: mark-blink 3s ease-in-out infinite; }
.screen--attract .kj-edge-mark::after { animation: mark-blink 3s ease-in-out 1.5s infinite; }
@keyframes mark-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.attract__kde { position: absolute; right: 100px; bottom: 90px; height: 62px; }

/* Registrace */
.reg__step { position: absolute; left: 0; right: 0; top: 60px; margin: 0; text-align: center; font: 700 30px/1 var(--font-sans); color: var(--ink-muted); }
.reg__title { top: 100px; }
.reg__fields { position: absolute; left: 96px; right: 96px; top: 230px; display: grid; gap: 24px; }
.reg__fields--2 { grid-template-columns: 1fr 1fr; right: 440px; }
.reg__fields--3 { grid-template-columns: 1fr 1fr 0.8fr; right: 440px; }
.reg__continue { position: absolute; right: 96px; top: 273px; }
.reg__kbd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; }
.reg__kbd .kj-kbd { width: 100%; align-items: center; padding: 22px 24px 26px; }
.reg__consents { position: absolute; left: 260px; right: 260px; top: 280px; display: flex; flex-direction: column; gap: 44px; }
.reg__rules { margin: 12px 0 0; font: 400 30px/1.4 var(--font-sans); color: var(--ink-muted); }
.reg__error { margin: 0; min-height: 40px; font: 700 32px/1.2 var(--font-sans); color: var(--orange); }
.reg__start { position: absolute; left: 50%; transform: translateX(-50%); top: 880px; }
.reg__start:active { transform: translateX(-50%); }

/* Úvod hry: nadpis + tlačítko jako jeden svisle vycentrovaný blok – delší (anglický) text nepřeteče.
   Pro dvouřádkový nadpis vychází přesně jako Figma (nadpis y 321, tlačítko y 682). */
.kj-intro__copy { position: absolute; left: 101px; top: 0; bottom: 0; width: 800px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 26px; }
.kj-intro__copy .kj-intro__title { position: relative; left: auto; top: auto; width: auto; }
.kj-intro__copy .kj-intro__title .kj-edge-mark { left: -101px; top: 32px; }
.kj-intro__copy .kj-intro__cta { position: relative; left: 7px; top: auto; margin-top: 109px; }

/* Kroky 1–2–3 na úvodu hry */
.intro__steps { position: absolute; left: 101px; bottom: 90px; }

/* Mýty */
.myty__statement { position: absolute; left: 110px; right: 110px; top: 240px; height: 380px; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font: 400 109.66px/139px var(--font-sans); }
.myty__statement.is-long { font-size: 96px; line-height: 118px; }
.myty__statement.is-compact { font-size: 84px; line-height: 104px; }
.myty__answers { position: absolute; left: 178px; top: 673px; }
.myty__reveal { position: absolute; left: 0; right: 0; top: 890px; margin: 0 auto; display: block; width: max-content; }
.myty__meta-reveal { top: 139px; }
.myty__reveal-statement { position: absolute; left: 360px; right: 360px; top: 210px; margin: 0; text-align: center; font: 400 52px/1.2 var(--font-sans); color: var(--ink-muted); }
.myty__label { position: absolute; left: 0; right: 0; top: 400px; margin: 0; text-align: center; font: 700 109.66px/1 var(--font-sans); }
.myty__label.is-realita { color: var(--green); }
.myty__label.is-mytus { color: var(--orange); }
.myty__label.is-simple { color: #c7c400; }
.myty__verdict { position: absolute; left: 0; right: 0; top: 530px; margin: 0; text-align: center; font: 700 36px/1 var(--font-sans); }
.myty__verdict.is-ok { color: var(--green); }
.myty__verdict.is-bad { color: var(--ink-muted); }
.myty__explanation { position: absolute; left: 440px; right: 440px; top: 600px; margin: 0; text-align: center; font: 400 36px/1.3 var(--font-sans); }
.myty__next { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); min-width: 336px; }
.myty__next:active { transform: translateX(-50%); }

/* Rozdíly */
.rozdily__title { position: absolute; left: 0; right: 0; top: 110px; margin: 0; text-align: center; font: 400 67.77px/86px var(--font-sans); }
.rozdily__timer { position: absolute; left: 0; right: 0; top: 212px; text-align: center; font: 700 44px/53px var(--font-sans); font-variant-numeric: tabular-nums; }
.rozdily__timer.is-low { color: var(--orange); }
.rozdily__pair { position: absolute; top: 363px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 755px 755px; gap: 20px; }
.rozdily__card { position: relative; width: 755px; height: 510px; overflow: hidden; cursor: crosshair; touch-action: none; }
.rozdily__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rozdily__rings { position: absolute; inset: 0; pointer-events: none; }
.rozdily__ring { position: absolute; aspect-ratio: 1; border: 9px solid var(--orange); border-radius: 50%; transform: translate(-50%, -50%); animation: ring-in .25s ease-out; }
.rozdily__card.is-wrong { animation: shake .42s; }
.rozdily__remaining { position: absolute; left: 0; right: 0; top: 920px; margin: 0; text-align: center; font: 400 36px/1 var(--font-sans); }
.rozdily__giveup { position: absolute; left: 50%; top: 972px; transform: translateX(-50%); font-size: 34px; line-height: 40px; color: var(--ink-muted); }
.rozdily__giveup:active { transform: translateX(-50%); color: var(--ink); }
.rozdily__ring.is-missed { border-color: var(--ink); border-style: dashed; animation: ring-in .35s ease-out, pulse 1s ease-in-out .35s 2; }
@keyframes pulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@keyframes ring-in { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-14px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(6px); } }

/* Chyť páru */
.para-onboard__img { position: absolute; left: 585px; top: 315px; width: 750px; height: 408px; border: 1px solid rgba(0, 0, 0, .85); }
/* Živá ukázka hry v jazyce hráče (místo screenshotu s českým textem) */
.para-demo { overflow: hidden; background: #202020; }
.para-demo__stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform: scale(.390625); transform-origin: 0 0; }
.para-demo__cloud { position: absolute; width: 296px; transform: translate(-50%, 0); animation: demo-rise 7s linear infinite; }
.para-demo__cloud img { display: block; width: 100%; }
.para-demo__cloud--1 { left: 540px; animation-delay: -1s; }
.para-demo__cloud--2 { left: 1300px; animation-delay: -3.2s; animation-duration: 6s; }
.para-demo__cloud--3 { left: 820px; animation-delay: -5s; animation-duration: 8s; }
.para-demo__cloud--4 { left: 1450px; animation-delay: -6.2s; }
@keyframes demo-rise { from { top: 1100px; } to { top: -220px; } }
/* Oblak, který se „ťukne“: stoupá, uprostřed se objeví dotyk, zmizí a spadnou kapky */
.para-demo__cloud--tap { left: 1000px; animation: demo-tap 3.5s ease-out infinite; }
@keyframes demo-tap { 0% { top: 1000px; opacity: 1; transform: translate(-50%, 0) scale(1); } 55% { top: 560px; opacity: 1; transform: translate(-50%, 0) scale(1); } 62%, 100% { top: 540px; opacity: 1; transform: translate(-50%, 0) scale(1); } }
.para-demo__cloud--tap img { animation: demo-pop 3.5s ease-out infinite; }
@keyframes demo-pop { 0%, 56% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(.4); } }
.para-demo__ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 8px solid #fff; opacity: 0; animation: demo-ring 3.5s ease-out infinite; }
@keyframes demo-ring { 0%, 48% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; transform: scale(1); } 66%, 100% { opacity: 0; transform: scale(1.6); } }
.para-demo__plus { position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--green); font: 700 64px/1 var(--font-sans); white-space: nowrap; opacity: 0; animation: demo-plus 3.5s ease-out infinite; }
@keyframes demo-plus { 0%, 56% { opacity: 0; transform: translate(-50%, 0); } 62% { opacity: 1; } 90%, 100% { opacity: 0; transform: translate(-50%, -140px); } }
.para-demo__drops { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); display: flex; gap: 36px; }
.para-demo__drops i { width: 28px; height: 44px; background: #6ec6ff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; opacity: 0; animation: demo-drop 3.5s ease-in infinite; }
.para-demo__drops i:nth-child(2) { animation-delay: .08s; }
.para-demo__drops i:nth-child(3) { animation-delay: .16s; }
@keyframes demo-drop { 0%, 58% { opacity: 0; transform: translateY(0); } 62% { opacity: 1; } 95% { opacity: 1; transform: translateY(420px); } 100% { opacity: 0; transform: translateY(460px); } }
.para-onboard__text { position: absolute; left: 0; right: 0; top: 761px; margin: 0; text-align: center; font: 400 36px/1.1 var(--font-sans); }
.para-onboard__cta { position: absolute; left: 50%; top: 906px; transform: translateX(-50%); }
.para-onboard__cta:active { transform: translateX(-50%); }
.para__tower { position: absolute; left: 22px; top: 0; width: 1877px; height: 1080px; object-fit: cover; }
.para__hud { position: absolute; left: 50%; top: 60px; width: 700px; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 5; }
.para__hud strong { display: block; font: 700 43px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.para__hud h1 { margin: 26px 0 0; font: 400 67.77px/1 var(--font-sans); }
.para__hud p { margin: 42px 0 0; font: 400 40px/1 var(--font-sans); }
.para__hud b { font-weight: 700; }
.para__field { position: absolute; inset: 0; }
.para__cloud { position: absolute; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; touch-action: none; z-index: 3; }
.para__cloud img { display: block; width: 100%; height: auto; }
.para__floater { position: absolute; transform: translate(-50%, -50%); color: var(--green); font: 700 36px/1 var(--font-sans); pointer-events: none; animation: float-up .9s ease-out forwards; z-index: 4; }
.para__drops { position: absolute; transform: translateX(-50%); pointer-events: none; display: flex; gap: 18px; z-index: 2; }
.para__drops i { width: 14px; height: 22px; background: #6ec6ff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: drop .9s ease-in forwards; }
.para__drops i:nth-child(2) { animation-delay: .08s; }
.para__drops i:nth-child(3) { animation-delay: .16s; }
@keyframes float-up { to { transform: translate(-50%, -160%); opacity: 0; } }
@keyframes drop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(420px); opacity: 0; } }

/* Vyhodnocení */
.final__logo { position: absolute; left: 100px; top: 100px; height: 132px; }
.final__title { position: absolute; left: 100px; right: 100px; top: 262px; margin: 0; text-align: center; font: 300 96px/110px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final__boxes { position: absolute; left: 0; right: 0; top: 420px; display: flex; justify-content: center; gap: 48px; }
.final__box--main .kj-glow__value { color: var(--green); }
.final__games { position: absolute; left: 0; right: 0; top: 712px; display: flex; justify-content: center; gap: 56px; font: 400 32px/1 var(--font-sans); color: var(--ink-muted); }
.final__games b { color: var(--ink); font-weight: 700; margin-left: 8px; }
.final__gift { position: absolute; left: 160px; right: 160px; top: 772px; margin: 0; text-align: center; font: 700 40px/1.25 var(--font-sans); }
.hl-green { color: var(--green); }
.final__note { position: absolute; left: 300px; right: 300px; top: 884px; margin: 0; text-align: center; font: 400 30px/1.3 var(--font-sans); color: var(--ink-muted); }
.final__done { position: absolute; left: 50%; top: 940px; transform: translateX(-50%); }
.final__done:active { transform: translateX(-50%); }
.final__kde { position: absolute; right: 100px; bottom: 90px; height: 62px; }

/* Toast */
.toast { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); background: var(--green); color: var(--on-green); padding: 24px 48px; font: 700 36px/1 var(--font-sans); pointer-events: none; animation: toast 3.5s forwards; }
@keyframes toast { 0% { opacity: 0; } 8%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* Přechody mezi obrazovkami */
.screen.is-entering { animation: screen-in .45s cubic-bezier(.2, .7, .2, 1) .16s both; }
.screen.is-leaving { animation: screen-out .18s ease-in both; pointer-events: none; z-index: 0; }
@keyframes screen-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes screen-out { to { opacity: 0; transform: translateY(-12px); } }
/* Ilustrace a nadpisy najíždějí s mírným zpožděním */
.screen.is-entering .kj-intro__art, .screen.is-entering .attract__scene { animation: art-in .7s cubic-bezier(.2, .7, .2, 1) .24s both; }
.screen.is-entering .kj-intro__cta, .screen.is-entering .attract__cta { animation: rise-in .5s cubic-bezier(.2, .7, .2, 1) .32s both; }
@keyframes art-in { from { opacity: 0; transform: translateX(60px) scale(.97); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } }
.kj-dialog { animation: dim-in .25s ease-out both; }
.kj-dialog__panel { animation: panel-in .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dim-in { from { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(30px) scale(.97); } }
/* Myty: odpověď najede */
.myty__label { animation: rise-in .4s cubic-bezier(.2, .7, .2, 1) both; }
.myty__explanation { animation: rise-in .5s cubic-bezier(.2, .7, .2, 1) .1s both; }
@media (prefers-reduced-motion: reduce) { .screen, .screen *, .kj-dialog, .kj-dialog__panel { animation: none !important; } }