/* Herní plocha 1080×1920 (na výšku), škálovaná na displej bez deformace. */
:root{
  --cs-blue:#2870ED; --cs-blue-dark:#135EE2; --cs-blue-light:#5A93F5;
  --font-ui:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --w:1080px; --h:1920px;
  --green:#46ff8b; --red:#ff443b;
  --ink:#e9efe9; --ease-cam:cubic-bezier(.65,.02,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:default}
body{font-family:"Futura","Avenir Next Condensed","Bahnschrift","DIN Condensed","Arial Narrow",system-ui,sans-serif;color:var(--ink)}
img{-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;outline:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}

#viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#000}
#stage{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);overflow:hidden;background:#050605;
  transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:50% 50%;contain:strict;overflow:clip}

/* ── Kamera ─────────────────────────────────────────────── */
.world{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-origin:0 0;will-change:transform;
  transition:transform 1000ms var(--ease-cam)}
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Smyčka je vidět v místnosti; při jízdě k zámku se prolne do ostrého stillu (video má jen 1080p) */
.scene-loop{opacity:1;transition:opacity 500ms ease}
#stage:is([data-state="zoom-in"],[data-state="lock-in"],[data-state="lock"],[data-state="unlocked"],[data-state="unlocked-out"],[data-state="video"],[data-state="end"]) .scene-loop{opacity:0;transition:opacity 700ms ease}
.scene-loop::-webkit-media-controls{display:none!important}

/* ── Světelné efekty ────────────────────────────────────── */
.fx{position:absolute;pointer-events:none}
.glow{border-radius:50%;mix-blend-mode:screen}
.lamp-hang{left:470px;top:440px;width:330px;height:330px;background:radial-gradient(circle,#fff6dc66 0%,#fff3d222 35%,transparent 70%);animation:flicker 7s infinite}
.lamp-cage{left:770px;top:150px;width:160px;height:160px;background:radial-gradient(circle,#fff8e077 0%,#fff3d21c 40%,transparent 70%);animation:flicker 11s infinite 2s}
.lamp-desk{left:455px;top:720px;width:180px;height:180px;background:radial-gradient(circle,#fff4d870 0%,transparent 65%);animation:flicker 9s infinite 1s}
.lamp-left{left:175px;top:455px;width:130px;height:130px;background:radial-gradient(circle,#ffeccc66 0%,transparent 65%);animation:flicker 13s infinite 4s}
.crt{left:550px;top:730px;width:220px;height:190px;border-radius:30%;background:radial-gradient(ellipse,#3d6bff40 0%,#2140ff16 45%,transparent 72%);animation:crt 3.2s ease-in-out infinite}
.beam{left:40px;top:220px;width:520px;height:620px;background:linear-gradient(165deg,#ffffff12,transparent 60%);
  clip-path:polygon(8% 0,62% 0,100% 100%,30% 100%);mix-blend-mode:screen;animation:beam 9s ease-in-out infinite}
.dust{left:0;top:0;width:var(--w);height:var(--h);mix-blend-mode:screen;opacity:.9}
@keyframes flicker{0%,100%{opacity:.85}3%{opacity:.55}4%{opacity:.9}6%{opacity:.6}7%,52%{opacity:.88}53%{opacity:.7}54%,90%{opacity:.92}}
@keyframes crt{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes beam{0%,100%{opacity:.6}50%{opacity:1}}

/* ── Hotspot zámku ──────────────────────────────────────── */
.drift{position:absolute;inset:0}
.hotspot{position:absolute;left:930px;top:315px;width:150px;height:220px;border-radius:24px;z-index:2}
#stage:not([data-state="scene"]) .hotspot{pointer-events:none}
.debug .hotspot{outline:3px dashed #ff0}

/* ── Buřinka na věšáku ───────────────────────────────────── */
.hat{position:absolute;left:91px;top:932px;width:181.5px;height:164px;pointer-events:none;visibility:hidden;z-index:2}
.hat img{position:absolute;inset:0;width:100%;height:100%}
.hat.anim{visibility:visible}
.hat-sprite{transform-origin:52% 86%;will-change:transform}
.hat.anim .hat-sprite{animation:hat-tip 1150ms cubic-bezier(.3,.7,.35,1) both;filter:drop-shadow(0 18px 14px #000b)}
.hat.anim .hat-bg{animation:hat-bg 1150ms ease both}
@keyframes hat-tip{
  0%{transform:none}
  16%{transform:translateY(-66px) rotate(-16deg) scale(1.07)}
  34%{transform:translateY(-78px) rotate(12deg) scale(1.07)}
  52%{transform:translateY(-58px) rotate(-6deg) scale(1.05)}
  68%{transform:translateY(2px) rotate(0) scale(1.06,.92)}
  80%{transform:translateY(-12px) rotate(2deg) scale(.99,1.02)}
  91%{transform:translateY(0) scale(1.02,.98)}
  100%{transform:none}}
@keyframes hat-bg{0%{opacity:0}8%,86%{opacity:1}100%{opacity:0}}
.hotspot-hat{position:absolute;left:78px;top:905px;width:210px;height:205px;border-radius:40%;z-index:3}
#stage:not([data-state="scene"]) .hotspot-hat{pointer-events:none}
.debug .hotspot-hat{outline:3px dashed #ff0}

/* Bubliny s komentářem (buřinka, cigareta) */
#hat-bubble{left:250px;top:790px}
.bubble{position:absolute;z-index:4;max-width:560px;padding:26px 36px;border-radius:30px 30px 30px 8px;
  background:#0d1118e8;border:2px solid #ffffff2e;box-shadow:0 20px 50px #000c,0 0 40px #2870ed33;
  font:italic 700 46px/1.15 "Playfair Display",Georgia,serif;color:#f3ead8;white-space:nowrap;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform-origin:0 100%;opacity:0;transform:scale(.4) translate(-20px,30px)}
.bubble:after{content:'';position:absolute;left:-2px;bottom:-26px;width:44px;height:30px;background:inherit;border-left:2px solid #ffffff2e;
  clip-path:polygon(0 0,100% 0,0 100%)}
.bubble.show{animation:bubble-in .5s cubic-bezier(.2,1.5,.4,1) forwards}
.bubble.hide{animation:bubble-out .35s ease-in forwards}
@keyframes bubble-in{to{opacity:1;transform:none}}
@keyframes bubble-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.85) translateY(14px)}}
#stage:not([data-state="scene"]) .bubble{opacity:0!important;animation:none}
/* Bublina s ocáskem vpravo dole (míří na předmět vpravo pod ní) */
.bubble.tail-right{border-radius:30px 30px 8px 30px;transform-origin:100% 100%}
.bubble.tail-right:after{left:auto;right:-2px;border-left:0;border-right:2px solid #ffffff2e;clip-path:polygon(0 0,100% 0,100% 100%)}
.bubble.wrap{white-space:normal;text-wrap:balance;max-width:600px}
#cig-bubble{right:255px;top:735px}

/* ── Občasné zvýraznění objevitelných předmětů (jako když na ně dopadne světlo); řídí game.js ──
   Každý předmět má vyříznutou kopii (buřinka = hat.png, plakát a popelník = glint-*.png), která se krátce rozzáří po obrysu. */
.glint-sprite{position:absolute;pointer-events:none;opacity:0;z-index:2}
#glint-poster{left:272px;top:306px;width:104px;height:224px}
#glint-ashtray{left:780.5px;top:934px;width:70px;height:59.5px}
.hat.glint{visibility:visible}
.hat.glint .hat-bg{opacity:0}
.hat.glint .hat-sprite,.glint-sprite.glint{animation:obj-glint 1100ms ease-in-out both}
/* jemné probliknutí s lehkým nádechem modré */
@keyframes obj-glint{
  0%,100%{opacity:0;filter:brightness(1)}
  35%{opacity:.78;filter:brightness(1.4) sepia(.8) saturate(3.8) hue-rotate(180deg) drop-shadow(0 0 10px #2870ed99) drop-shadow(0 0 20px #2870ed44)}}

/* ── Plakát LEASING ───────────────────────────────────────── */
#poster-bubble{left:392px;top:236px}
.hotspot-poster{position:absolute;left:266px;top:298px;width:116px;height:236px;border-radius:12px;z-index:3}
#stage:not([data-state="scene"]) .hotspot-poster{pointer-events:none}
.debug .hotspot-poster{outline:3px dashed #ff0}
/* odlesk ořezaný přesně na plakát (v perspektivě) */
.poster-shine{position:absolute;left:276px;top:310px;width:95px;height:215px;pointer-events:none;z-index:2;overflow:hidden;
  clip-path:polygon(0 7%,96% 0,100% 93%,7% 100%)}
.poster-shine:before{content:'';position:absolute;top:-30%;bottom:-30%;width:60%;left:-80%;transform:rotate(18deg);opacity:0;
  background:linear-gradient(90deg,transparent,#fff8e866 45%,#ffffffaa 50%,#fff8e866 55%,transparent);mix-blend-mode:screen}
.poster-shine.go:before{animation:poster-sweep 900ms cubic-bezier(.35,.1,.25,1) forwards}
.poster-shine:after{content:'';position:absolute;inset:0;background:#fff6dc;opacity:0;mix-blend-mode:soft-light}
.poster-shine.go:after{animation:poster-flash 900ms ease-out forwards}
@keyframes poster-sweep{0%{left:-80%;opacity:1}100%{left:130%;opacity:1}}
@keyframes poster-flash{0%{opacity:0}25%{opacity:.55}100%{opacity:0}}
#stage:is([data-state="unlocked"],[data-state="unlocked-out"],[data-state="video"],[data-state="end"]) .poster-shine{visibility:hidden}

/* ── Cigareta v popelníku: típnutí ───────────────────────── */
.smoke-off{position:absolute;left:740px;top:730px;width:160px;height:240px;pointer-events:none;opacity:0;z-index:1;transition:opacity 1100ms ease}
#stage.cig-out .smoke-off{opacity:1}
/* Vrstvy z místnosti (výřez bez kouře, buřinka, jiskry) nesmí prosvítat do videa trezoru ani do závěru */
#stage:is([data-state="unlocked"],[data-state="unlocked-out"],[data-state="video"],[data-state="end"]) :is(.smoke-off,.hat,.cig-fx,.glint-sprite){visibility:hidden}
.hotspot-cig{position:absolute;left:760px;top:800px;width:120px;height:200px;border-radius:40%;z-index:3}
#stage:not([data-state="scene"]) .hotspot-cig{pointer-events:none}
.debug .hotspot-cig{outline:3px dashed #ff0}
.cig-fx{position:absolute;left:815px;top:948px;width:0;height:0;pointer-events:none;z-index:2}
.cig-fx i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff6c8,#ff9d2e 55%,#ff4d0000 75%);box-shadow:0 0 8px #ff9d2e}
.cig-fx.go i{animation:spark 620ms cubic-bezier(.15,.7,.3,1) forwards}
.cig-fx b{position:absolute;left:-36px;top:-60px;width:72px;height:72px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#d9d9d9aa,#bdbdbd44 50%,transparent 72%);filter:blur(3px)}
.cig-fx.go b{animation:puff 1500ms ease-out forwards}
.cig-fx em{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#ffd08a,#ff6a1a66 45%,transparent 70%)}
.cig-fx.go em{animation:ember-off 700ms ease-out forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
@keyframes puff{0%{opacity:0;transform:translateY(10px) scale(.4)}20%{opacity:.9}100%{opacity:0;transform:translateY(-110px) scale(2.2)}}
@keyframes ember-off{0%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.4)}}

/* ── Vinětace + zrno ────────────────────────────────────── */
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 85% 70% at 55% 42%,transparent 50%,#000a 100%),linear-gradient(#0006,transparent 12%,transparent 85%,#0008)}
/* Filmové zrno: jen o dlaždici větší než plocha, bez míchání barev (levné na GPU), posun po celých px */
.grain{position:absolute;inset:-256px;pointer-events:none;z-index:40;opacity:.05;background-size:256px 256px;will-change:transform;animation:grain .9s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-96px,64px)}40%{transform:translate(80px,-112px)}60%{transform:translate(-48px,128px)}80%{transform:translate(128px,32px)}}

/* ── Detailní záběr (closeup-code) ─────────────────────── */
.closeup-layer{position:absolute;inset:0;z-index:5;overflow:hidden;opacity:0;pointer-events:none;background:#000;transition:opacity 550ms ease}
.closeup-layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:var(--closeup-origin,86% 31%);transition:transform 1700ms cubic-bezier(.2,.6,.3,1)}  /* střed zámku v obrázku */
.closeup-layer:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 85% 70% at 60% 42%,transparent 50%,#000a 100%)}
#stage.closeup .closeup-layer{opacity:1}
/* rozostřené pozadí zámku = předem rozostřená kopie detailu (zoomuje stejně jako ostrý obrázek) */
.closeup-layer img.closeup-blur{opacity:0;transition:opacity 450ms ease,transform 1700ms cubic-bezier(.2,.6,.3,1)}
#stage:is([data-state="lock-in"],[data-state="lock"],[data-state="unlocked"]) .closeup-layer img.closeup-blur{opacity:1}
#stage[data-state="lock-out"] .closeup-layer img.closeup-blur{transition-duration:250ms}
/* Po správném kódu: rychlé rozplynutí do už běžícího videa */
#stage.closeup-fast .closeup-layer{transition:opacity 320ms ease-out}
#stage.closeup-fast .lock-wrap{transition:opacity 220ms ease-out,transform 320ms ease-out!important}
#stage.closeup-fast .lock-backdrop{transition:opacity 320ms ease-out!important}
#stage.closeup-zoom .closeup-layer img{transform:scale(var(--closeup-zoom,1.1))}
#stage:not(.closeup-zoom) .closeup-layer img{transition-duration:700ms;transition-timing-function:cubic-bezier(.5,0,.6,1)}

/* ── Zámek ──────────────────────────────────────────────── */
.lock-layer{position:absolute;inset:0;z-index:10;pointer-events:none;visibility:hidden}
.lock-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 50%,#00000020 0%,#00000060 60%,#000000a8 100%);
  opacity:0;transition:opacity 450ms ease}
.lock-wrap{position:absolute;opacity:0;transform:translateX(420px) scale(.9);transform-origin:50% 50%;
  transition:transform 560ms cubic-bezier(.2,1.15,.35,1),opacity 300ms ease}
#lock{width:100%;height:100%;pointer-events:none}
.back{position:absolute;left:40px;top:44px;height:104px;padding:0 38px 0 26px;border-radius:52px;display:flex;align-items:center;gap:10px;
  background:#0d1410cc;border:2px solid #ffffff2a;box-shadow:0 10px 30px #000a;font-size:34px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(-20px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.4,.4,1),background .15s}
.back svg{width:44px;height:44px}
.back:active{transform:scale(.94);background:#1d2a22}

#stage[data-state="lock"] .lock-layer,#stage[data-state="lock-in"] .lock-layer,#stage[data-state="lock-out"] .lock-layer,#stage[data-state="unlocked"] .lock-layer{visibility:visible}
#stage[data-state="lock"] .lock-layer{pointer-events:auto}
#stage[data-state="lock"] .lock-backdrop,#stage[data-state="lock-in"] .lock-backdrop,#stage[data-state="unlocked"] .lock-backdrop{opacity:1}
#stage[data-state="lock"] .lock-wrap,#stage[data-state="lock-in"] .lock-wrap,#stage[data-state="unlocked"] .lock-wrap{opacity:1;transform:none}
#stage[data-state="lock"] .back{opacity:1;transform:none}
#stage[data-state="lock-out"] .lock-wrap{transition:transform 220ms cubic-bezier(.55,0,.8,.3),opacity 200ms ease}
#stage[data-state="unlocked-out"] .lock-layer{visibility:visible}
#stage[data-state="unlocked-out"] .lock-wrap{opacity:0;transform:scale(.92);transition:transform 360ms ease-in,opacity 260ms ease}
#stage[data-state="unlocked-out"] .lock-backdrop{opacity:0;transition:opacity 500ms ease}
#stage[data-state="lock-out"] .lock-backdrop{transition:opacity 300ms ease}
#stage[data-state="lock-out"] .closeup-layer{transition-duration:350ms}
#stage[data-state="lock-out"] .closeup-layer img{transition-duration:400ms}

/* ── Video sekvence ─────────────────────────────────────── */
.sequence{position:absolute;object-fit:fill;pointer-events:none;display:block;opacity:0;background:#000}
.sequence::-webkit-media-controls{display:none!important}
/* Pod zámkem se tiše objeví první snímek (je rozostřený pozadím zámku), pak na něj kamera odjede */
/* Ve stavu „lock“ už leží video (1. snímek) připravené pod neprůhledným detailním záběrem → po kódu se jen odkryje */
#stage:is([data-state="lock"],[data-state="unlocked"],[data-state="unlocked-out"],[data-state="video"],[data-state="end"]) .sequence{opacity:1}
.vignette{transition:opacity 900ms ease}
#stage:is([data-state="unlocked-out"],[data-state="video"],[data-state="end"]) .vignette{opacity:0}

/* ── Závěr: e-mail + dotyková klávesnice ─────────────────── */
.end-layer{position:absolute;left:0;right:0;bottom:0;z-index:30;pointer-events:none;opacity:0;
  transition:opacity .7s ease;font-family:var(--font-ui)}
#stage[data-state="end"] .end-layer{opacity:1;pointer-events:auto}
.end-layer:before{content:'';position:absolute;left:0;right:0;bottom:0;height:1500px;pointer-events:none;
  background:linear-gradient(transparent,#000000b8 38%,#000000f0)}
.email-card{position:absolute;left:70px;right:70px;bottom:170px;display:flex;flex-direction:column;align-items:center;gap:26px;
  transform:translateY(40px);transition:transform .55s cubic-bezier(.2,1,.3,1),opacity .4s}
#stage[data-state="end"] .email-card{transform:none}
#stage.kbd-open .email-card{transform:translateY(-560px)}
.email-title{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;text-shadow:0 4px 30px #000}
.email-title-big{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:700;font-size:128px;line-height:1;color:#f3ead8;
  text-shadow:0 6px 40px #000,0 0 60px #2870ed33}
.email-title-sub{font-family:var(--font-ui);font-style:normal;font-weight:600;font-size:50px;line-height:1.2;color:#f3ead8;max-width:900px;text-wrap:balance}
.email-lead{margin:0;max-width:820px;text-wrap:balance;font:500 36px/1.42 var(--font-ui);color:#ffffffb8;text-align:center;text-shadow:0 2px 16px #000}
.email-label{margin-top:22px;align-self:center;text-align:center;font:600 36px var(--font-ui);color:#fff}
/* Razítko „Případ vyřešen“ */
.end-stamp{display:flex;align-items:center;gap:22px;width:100%;justify-content:center;font:700 26px var(--font-ui);letter-spacing:.32em;
  text-transform:uppercase;color:var(--cs-blue-light)}
.end-stamp:before,.end-stamp:after{content:'';height:2px;flex:0 1 150px;background:linear-gradient(90deg,transparent,#5a93f5aa)}
.end-stamp:after{transform:scaleX(-1)}
.end-stamp span{padding:12px 22px;border:3px solid #5a93f5cc;border-radius:10px;transform:rotate(-3deg);box-shadow:0 0 30px #2870ed44,inset 0 0 14px #2870ed33}
/* Postupné vysunutí po skončení videa */
.email-card>*{opacity:0;transform:translateY(26px)}
#stage[data-state="end"] .email-card>*{animation:end-in .7s cubic-bezier(.2,.9,.3,1) forwards}
#stage[data-state="end"] .email-card>:nth-child(1){animation-delay:.05s}
#stage[data-state="end"] .email-card>:nth-child(2){animation-delay:.18s}
#stage[data-state="end"] .email-card>:nth-child(3){animation-delay:.34s}
#stage[data-state="end"] .email-card>:nth-child(4){animation-delay:.5s}
#stage[data-state="end"] .email-card>:nth-child(5){animation-delay:.58s}
#stage[data-state="end"] .email-card>:nth-child(n+6){animation-delay:.66s}
#stage[data-state="end"] .end-stamp span{animation:stamp .5s cubic-bezier(.3,1.6,.5,1) .2s both}
@keyframes end-in{to{opacity:1;transform:none}}
/* Zatřesení políčka při chybě (zachová stav po vysunutí) */
#stage[data-state="end"] .email-card>.email-field.shake{animation:end-in .01s forwards,field-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes stamp{0%{transform:rotate(-14deg) scale(1.6);opacity:0}100%{transform:rotate(-3deg) scale(1);opacity:1}}
/* S otevřenou klávesnicí: schovat razítko a doprovodný text, titulek zmenšit */
.email-intro{transition:opacity .25s,max-height .35s ease,margin .35s;max-height:240px}
#stage.kbd-open .email-intro{opacity:0!important;max-height:0;margin:-13px 0;overflow:hidden}
.email-title-big,.email-title-sub{transition:font-size .35s ease}
#stage.kbd-open .email-title-big{font-size:88px}
#stage.kbd-open .email-title-sub{font-size:40px}
.email-field{width:100%;height:132px;border-radius:24px;background:#0b0f1acc;border:3px solid #ffffff38;
  box-shadow:0 18px 50px #000a,inset 0 2px 10px #0008;display:flex;align-items:center;padding:0 34px;transition:border-color .2s,box-shadow .2s}
#stage.kbd-open .email-field,.email-field:focus-within{border-color:var(--cs-blue);box-shadow:0 0 0 6px #2870ed44,0 18px 50px #000a}
.email-field.invalid{border-color:var(--red)!important;box-shadow:0 0 0 6px #ff443b33,0 18px 50px #000a!important}
.email-field.shake{animation:field-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes field-shake{15%,55%{transform:translateX(-14px)}35%,75%{transform:translateX(14px)}90%{transform:translateX(-4px)}}
.email-field input{width:100%;background:none;border:0;outline:none;color:#fff;font:600 50px var(--font-ui);caret-color:var(--cs-blue-light);
  -webkit-user-select:text;user-select:text}
.email-field input::placeholder{color:#ffffff55}
.email-error{min-height:40px;margin-top:-8px;font-size:32px;font-weight:600;color:#ff8a83}
.email-send{width:100%;height:132px;border-radius:66px;font:600 46px var(--font-ui);color:#fff;
  background:linear-gradient(180deg,var(--cs-blue-light),var(--cs-blue) 45%,var(--cs-blue-dark));box-shadow:0 18px 50px #000c,0 0 70px #2870ed55;
  transition:transform .12s,filter .12s}
.email-send:active{transform:scale(.97);filter:brightness(.9)}
.email-skip{font:500 32px var(--font-ui);color:#ffffffa8;padding:14px 30px}
.email-consent{display:flex;align-items:flex-start;gap:20px;width:100%;margin:0;font:500 26px/1.4 var(--font-ui);color:#ffffffb0;text-align:left;cursor:pointer}
.email-consent input{position:absolute;opacity:0;pointer-events:none}
.agree-box{flex:0 0 48px;height:48px;border-radius:12px;border:3px solid #ffffff60;background:#0b0f1acc;display:grid;place-items:center;transition:background .15s,border-color .15s}
.email-consent input:checked+.agree-box{background:var(--cs-blue);border-color:var(--cs-blue-light)}
.email-consent input:checked+.agree-box:after{content:'';width:22px;height:12px;border-left:5px solid #fff;border-bottom:5px solid #fff;transform:translateY(-3px) rotate(-45deg)}
.email-consent.shake{animation:field-shake .42s cubic-bezier(.36,.07,.19,.97)}
#stage.kbd-open .email-send,#stage.kbd-open .email-skip,#stage.kbd-open .email-consent{opacity:0!important;pointer-events:none}
.email-thanks{position:absolute;left:0;right:0;bottom:300px;display:flex;flex-direction:column;align-items:center;text-align:center;font:700 80px var(--font-ui);color:#fff;
  opacity:0;transform:scale(.9);transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1);pointer-events:none;text-shadow:0 4px 30px #000}
.thanks-text.skip,.end-layer.skipped .thanks-text:not(.skip){display:none}
.end-layer.skipped .thanks-text.skip{display:block}
.end-layer.skipped .thanks-mark{display:none}
/* tlačítko „Pojď stavět fintech“ */
.cta{display:flex;align-items:center;gap:22px;margin-top:70px;height:140px;padding:0 64px;border-radius:70px;font:600 48px var(--font-ui);color:#fff;
  background:linear-gradient(180deg,var(--cs-blue-light),var(--cs-blue) 45%,var(--cs-blue-dark));box-shadow:0 18px 50px #000c,0 0 70px #2870ed66;
  pointer-events:auto;opacity:0;transform:translateY(30px);transition:transform .12s,filter .12s}
.cta svg{width:52px;height:52px}
.end-layer.sent .cta{animation:end-in .7s cubic-bezier(.2,.9,.3,1) .5s forwards,cta-breathe 2.6s ease-in-out 1.4s infinite}
.cta.down{filter:brightness(.9)}
@keyframes cta-breathe{0%,100%{box-shadow:0 18px 50px #000c,0 0 50px #2870ed55}50%{box-shadow:0 18px 50px #000c,0 0 120px #2870edaa}}
.thanks-mark{display:grid;place-items:center;width:150px;height:150px;margin:0 auto 34px;border-radius:50%;font-size:84px;
  background:var(--cs-blue);box-shadow:0 0 80px #2870ed99}
.end-layer.sent .email-card{opacity:0;pointer-events:none}
.end-layer.sent .email-thanks{opacity:1;transform:none}

.kbd{position:absolute;left:0;right:0;bottom:0;z-index:31;padding:30px 20px 44px;background:#0d1016f2;border-top:1px solid #ffffff1f;
  box-shadow:0 -20px 60px #000c;transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.9,.3,1);font-family:var(--font-ui);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
#stage.kbd-open .kbd{transform:none}
.kbd-row{display:flex;justify-content:center;gap:10px;margin-top:12px}
.kbd-key{flex:0 0 92px;height:104px;border-radius:16px;background:#2a2f3a;color:#fff;font:500 42px var(--font-ui);
  box-shadow:0 4px 0 #0008;transition:background .08s,transform .08s}
.kbd-key.down{background:#4a5263;transform:translateY(3px);box-shadow:0 1px 0 #0008}
.kbd-key.wide{flex-basis:190px;font-size:44px}
.kbd-key.mid{flex-basis:130px;font-size:34px}
.kbd-key.send{flex-basis:250px;background:var(--cs-blue);font-weight:600;font-size:36px}
.kbd-key.send.down{background:var(--cs-blue-dark)}
.kbd-chips{margin:0 0 6px;gap:12px}
.kbd-key.chip{flex:1 1 0;height:80px;border-radius:40px;background:#1c2230;border:2px solid #ffffff22;font-size:30px;color:#cfe0ff}
#stage:not(.kbd-open) .kbd-close{visibility:hidden}
.kbd-close{position:absolute;right:26px;top:-84px;width:96px;height:72px;border-radius:20px 20px 0 0;background:#0d1016f2;color:#fff;font-size:44px;
  border:1px solid #ffffff1f;border-bottom:0}

@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

.prompt{position:absolute;inset:0;z-index:35;display:none;place-items:center;background:#000a}
.prompt span{font-size:44px;letter-spacing:.25em;text-transform:uppercase;animation:pulse 1.6s infinite}
#stage[data-prompt] .prompt{display:grid}

/* ── Menu ───────────────────────────────────────────────── */
.screen-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.menu-layer,.loading-layer{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 650ms ease,visibility 0s linear 650ms}
.menu-layer{z-index:32}
.loading-layer{z-index:33}
#stage[data-state="menu"] .menu-layer{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 650ms ease}
#stage[data-state="loading"] .loading-layer{opacity:1;visibility:visible;transition:opacity 500ms ease}
#stage[data-state="loading"] .menu-layer{visibility:visible;opacity:1;transition:none}
.menu-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,#000000b0 0%,transparent 22%,transparent 52%,#000000c8 74%,#000000f0 100%)}
.menu-content{position:absolute;z-index:3;pointer-events:none;left:0;right:0;bottom:250px;display:flex;flex-direction:column;align-items:center;gap:90px;padding:0 70px;text-align:center}
.menu-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:112px;line-height:1.02;
  color:#f3ead8;letter-spacing:-.01em;text-shadow:0 6px 40px #000,0 0 60px #ffcf8a22;opacity:0;transform:translateY(30px)}
.enter{position:relative;pointer-events:auto;min-width:700px;height:150px;padding:0 70px;border-radius:6px;overflow:hidden;
  font-family:var(--font-ui);font-weight:600;font-size:44px;letter-spacing:.01em;
  color:#fff;background:linear-gradient(180deg,var(--cs-blue-light) 0%,var(--cs-blue) 45%,var(--cs-blue-dark) 100%);border:0;border-radius:75px;
  box-shadow:0 18px 50px #000c,0 0 70px #2870ed55,inset 0 2px 0 #ffffff55,inset 0 -6px 14px #0a3c9a66;
  opacity:0;transform:translateY(30px);transition:transform .14s ease,filter .14s ease,box-shadow .2s}
.enter:before{content:'';position:absolute;top:0;bottom:0;width:30%;left:-40%;background:linear-gradient(100deg,transparent,#ffffff70,transparent);
  animation:sheen 3.4s ease-in-out 1.6s infinite}
.enter.down{transform:scale(.96) translateY(4px);filter:brightness(.9);box-shadow:0 6px 20px #000c,0 0 40px #2870ed44}
.enter-label{position:relative}
#stage[data-state="menu"] .menu-title{animation:rise 1.1s cubic-bezier(.2,.9,.3,1) .25s forwards}
#stage[data-state="menu"] .enter{animation:rise 1s cubic-bezier(.2,.9,.3,1) .7s forwards,breathe 2.8s ease-in-out 1.8s infinite}
#stage[data-state="loading"] .menu-title,#stage[data-state="loading"] .enter{opacity:1;transform:none}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{box-shadow:0 18px 50px #000c,0 0 50px #2870ed44,inset 0 2px 0 #ffffff55,inset 0 -6px 14px #0a3c9a66}
  50%{box-shadow:0 18px 50px #000c,0 0 120px #2870edaa,inset 0 2px 0 #ffffff55,inset 0 -6px 14px #0a3c9a66}}
@keyframes sheen{0%{left:-40%}45%,100%{left:130%}}

/* Lampička v menu */
.menu-off{opacity:0;transition:opacity 520ms cubic-bezier(.3,.6,.4,1)}  /* rozsvícení: plynulý náběh žárovky */
.menu-layer.lights-off .menu-off{opacity:1;transition:opacity 200ms ease-out}  /* zhasnutí: rychle */
.menu-layer.lights-off .menu-title{text-shadow:0 6px 40px #000,0 0 30px #5a93f522}
.lamp-hit{position:absolute;left:40px;top:420px;width:320px;height:330px;border-radius:50%;z-index:1}
.menu-objects{position:absolute;inset:0;z-index:2;pointer-events:none}
.menu-obj{position:absolute;pointer-events:auto;border-radius:22px}
/* Odezva na klepnutí: krátká teplá záře nad předmětem */
.menu-obj:after{content:'';position:absolute;inset:-12%;border-radius:40%;opacity:0;pointer-events:none;
  background:radial-gradient(ellipse at center,#fff1d055 0%,#ffe0a01c 45%,transparent 72%);mix-blend-mode:screen}
.menu-obj.hit:after{animation:obj-hit 650ms ease-out}
@keyframes obj-hit{0%{opacity:0;transform:scale(.85)}18%{opacity:1}100%{opacity:0;transform:scale(1.08)}}
.debug .menu-obj,.debug .lamp-hit{outline:3px dashed #ff0}
.lamp-toggle{position:absolute;left:56px;top:72px;z-index:2;width:196px;height:96px;border-radius:48px;padding:0;
  background:#0b0d12d9;border:2px solid #ffffff30;box-shadow:0 12px 34px #000c,inset 0 2px 6px #0008;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .35s,border-color .35s,transform .12s}
.lamp-toggle.down{transform:scale(.94)}
.lamp-toggle .ico{position:absolute;top:24px;width:48px;height:48px;transition:opacity .3s,color .3s}
.lamp-toggle .sun{left:28px;color:#ffd78a}
.lamp-toggle .moon{right:28px;color:#8fb3ff;opacity:.45}
.lamp-toggle .knob{position:absolute;top:8px;left:8px;width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7e2,#ffcf73 55%,#d9962f);box-shadow:0 0 34px #ffc76fa0,0 4px 10px #000a;
  transition:transform .42s cubic-bezier(.3,1.5,.5,1),background .35s,box-shadow .35s}
.menu-layer.lights-off .lamp-toggle{background:#070a14e6;border-color:#5a93f555}
.menu-layer.lights-off .lamp-toggle .knob{transform:translateX(100px);
  background:radial-gradient(circle at 35% 30%,#e9f0ff,#8fb3ff 55%,#2870ed);box-shadow:0 0 34px #2870ed99,0 4px 10px #000a}
.menu-layer.lights-off .lamp-toggle .sun{opacity:.45}
.menu-layer.lights-off .lamp-toggle .moon{opacity:1}
/* ikony pod jezdcem schovat */
.menu-layer:not(.lights-off) .lamp-toggle .sun{opacity:0}
.menu-layer.lights-off .lamp-toggle .moon{opacity:0}

/* Přepínač jazyka CZ / EN (vpravo nahoře, protějšek lampičky) */
.lang-toggle{position:absolute;right:56px;top:72px;z-index:2;width:196px;height:96px;border-radius:48px;display:flex;padding:8px;
  background:#0b0d12d9;border:2px solid #ffffff30;box-shadow:0 12px 34px #000c,inset 0 2px 6px #0008;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lang-pill{position:absolute;top:8px;left:8px;width:88px;height:76px;border-radius:38px;
  background:linear-gradient(180deg,var(--cs-blue-light),var(--cs-blue) 50%,var(--cs-blue-dark));box-shadow:0 0 30px #2870ed88,0 4px 10px #000a;
  transition:transform .42s cubic-bezier(.3,1.5,.5,1)}
.lang-toggle[data-lang="en"] .lang-pill{transform:translateX(88px)}
.lang-opt{position:relative;flex:1;height:76px;border-radius:38px;font:700 32px var(--font-ui);letter-spacing:.06em;color:#ffffff80;transition:color .3s}
.lang-opt[aria-checked="true"]{color:#fff}
.lang-opt:active{transform:scale(.94)}

/* ── Načítání ───────────────────────────────────────────── */
.door-lamp{position:absolute;left:400px;top:120px;width:320px;height:320px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,#fff3d670 0%,#ffe9c022 38%,transparent 70%);animation:flicker 6s infinite}
.loading-ui{position:absolute;left:140px;right:140px;bottom:190px}
.loading-label{display:flex;justify-content:space-between;margin-bottom:22px;font-family:var(--font-ui);font-weight:600;
  font-size:34px;letter-spacing:.02em;color:#fff;text-shadow:0 2px 12px #000;font-variant-numeric:tabular-nums}
.bar{position:relative;height:14px;border-radius:7px;background:#0b0907d0;border:1px solid #ffffff2e;box-shadow:inset 0 2px 6px #000,0 8px 30px #000a;overflow:hidden}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:7px;
  background:linear-gradient(90deg,var(--cs-blue-dark),var(--cs-blue) 70%,var(--cs-blue-light));box-shadow:0 0 18px #2870edaa}
.bar-fill:after{content:'';position:absolute;top:0;bottom:0;right:0;width:60px;background:radial-gradient(ellipse at right,#cfe0ff,transparent 70%)}

/* Odchod z načítání: dojezd ke kolu během stmívání */
.loading-layer{transform-origin:50% 47%}
#stage.loading-out .loading-layer{transform:scale(1.18);transition:transform 1000ms cubic-bezier(.5,0,.75,0)}
#stage.loading-out .loading-ui{opacity:0;transition:opacity 300ms ease}
#stage[data-state="scene"] .loading-layer,#stage[data-state="scene"] .menu-layer{transition:none}
/* Pomalejší rozsvícení z černé */
#stage.curtain-off .curtain{transition:opacity 1100ms ease}

/* ── Dotyková zpětná vazba ──────────────────────────────── */
.ripples{position:absolute;inset:0;z-index:45;pointer-events:none;overflow:clip}
.ripple{position:absolute;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:3px solid #ffffffb0;
  animation:ripple 560ms cubic-bezier(.1,.7,.3,1) forwards}
.ripple.green{border-color:var(--green);box-shadow:0 0 24px #46ff8b99}
@keyframes ripple{from{transform:scale(.15);opacity:1}to{transform:scale(1.6);opacity:0}}

.curtain{position:absolute;inset:0;z-index:50;background:#000;opacity:1;pointer-events:none;transition:opacity 700ms ease}
#stage.curtain-off .curtain{opacity:0}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}

/* ── Úsporný režim pro slabší zařízení (zapne game.js podle naměřené plynulosti, nebo ?lowfx v URL) ── */
#stage.lowfx .grain,#stage.lowfx .dust,#stage.lowfx .beam{display:none}
#stage.lowfx .glow{animation:none}

#stage.lowfx .bubble,#stage.lowfx .kbd,#stage.lowfx :is(.lamp-toggle,.lang-toggle){-webkit-backdrop-filter:none;backdrop-filter:none}
#stage.lowfx .hat.glint .hat-sprite,#stage.lowfx .glint-sprite.glint{animation-name:obj-glint-lite}
@keyframes obj-glint-lite{0%,100%{opacity:0}35%{opacity:.7;filter:brightness(1.4) sepia(.8) saturate(3.8) hue-rotate(180deg)}}

/* Telefon na šířku → výzva k otočení (stage zůstává pod ní, hra pokračuje po otočení) */
.rotate-hint{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:#000;color:#f3ead8;font:600 22px var(--font-ui);text-align:center}
.rotate-hint svg{width:72px;height:72px;animation:rotate-nudge 2s ease-in-out infinite}
html.landscape .rotate-hint{display:flex}
@keyframes rotate-nudge{0%,60%,100%{transform:rotate(0)}30%{transform:rotate(-90deg)}}
/* mobil: žádné zvýraznění textu / modré pozadí při klepnutí, žádné „odrážení“ stránky */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ── Náborové video „fintech“ ───────────────────────────── */
.fintech-layer{position:absolute;inset:0;z-index:36;background:#000;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.fintech-layer video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.fintech-layer video::-webkit-media-controls{display:none!important}
#stage[data-state="fintech"] .fintech-layer{opacity:1;visibility:visible;transition:opacity .6s ease}
.fintech-again{position:absolute;right:48px;top:56px;height:104px;padding:0 44px;border-radius:52px;transform:translateY(-20px);opacity:0;pointer-events:none;
  font:600 36px var(--font-ui);color:#fff;background:#0b0f1acc;border:3px solid #ffffff55;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 30px #000a;transition:opacity .5s,transform .6s cubic-bezier(.2,1,.3,1)}
.fintech-layer.ended .fintech-again{opacity:1;transform:none;pointer-events:auto}