@font-face{font-family:'Elite';src:url(fonts/special-elite-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:block}
@font-face{font-family:'Elite';src:url(fonts/special-elite-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:block}
@font-face{font-family:'Type';font-weight:400;src:url(fonts/courier-prime-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:'Type';font-weight:400;src:url(fonts/courier-prime-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:'Type';font-weight:700;src:url(fonts/courier-prime-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:'Type';font-weight:700;src:url(fonts/courier-prime-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:'Hand';font-weight:500;src:url(fonts/caveat-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:'Hand';font-weight:500;src:url(fonts/caveat-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
@font-face{font-family:'Hand';font-weight:700;src:url(fonts/caveat-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:'Hand';font-weight:700;src:url(fonts/caveat-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}

:root{
  --night:#1e2522;      /* smrková tma */
  --night-2:#28302c;
  --paper:#d6ccb4;      /* průklepový papír */
  --paper-2:#e4dcc6;
  --ink:#2b2621;
  --stamp:#5d3f7c;      /* fialové úřední razítko */
  --blood:#9b1d16;      /* jen Lovec */
  --fog:#8f9a93;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--paper);-webkit-tap-highlight-color:transparent}
body{font:17px/1.55 'Type',monospace;min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
.hidden{display:none!important}

/* hlavička */
.bar{position:sticky;top:0;z-index:20;background:linear-gradient(var(--night) 80%,transparent);padding:12px 16px 14px;display:flex;align-items:center;gap:12px}
.case{font-family:'Elite';color:var(--paper);border:2px solid var(--stamp);color:#b9a3d6;padding:2px 8px;transform:rotate(-2deg);user-select:none;-webkit-user-select:none;touch-action:none}
.clock{margin-left:auto;text-align:right;line-height:1.1}
.clock b{display:block;font-family:'Elite';font-size:22px;letter-spacing:.04em;color:var(--paper)}
.clock small{color:var(--fog);font-size:13px}
.clock.red b{color:#e0563f}
.code{display:flex;gap:6px;padding:0 16px 10px;position:sticky;top:58px;z-index:19;background:var(--night)}
.code span{width:34px;height:42px;border:1.5px solid #4a544f;display:grid;place-items:center;font-family:'Elite';font-size:24px;color:var(--fog)}
.code span.on{border-color:var(--paper);color:var(--paper)}

main{padding:4px 14px 120px;max-width:560px;margin:0 auto}

/* listy papíru */
.sheet{background:var(--paper);color:var(--ink);padding:18px 18px 20px;margin:18px 0;position:relative;box-shadow:0 1px 0 #b8ad93,0 14px 30px -12px #000;transform:rotate(-.35deg)}
.sheet:nth-child(even){transform:rotate(.3deg)}
.sheet h2{font-family:'Elite';font-weight:400;font-size:21px;margin:0 0 10px;line-height:1.25}
.sheet p{margin:0 0 10px}
.sheet .meta{color:#6b6253;font-size:14px;margin-bottom:10px}
.sheet.done{opacity:.72}
.stampmark{position:absolute;right:14px;top:12px;font-family:'Elite';color:var(--stamp);border:2px solid var(--stamp);padding:0 8px;transform:rotate(8deg);opacity:.85}

.hand{font-family:'Hand';font-weight:500;font-size:25px;line-height:1.25;color:#1f2b55;background:var(--paper-2);padding:14px 16px;margin:14px 0;transform:rotate(.6deg);box-shadow:0 10px 22px -12px #000}
.hand p{margin:0 0 8px}
.hand .sig{text-align:right;font-weight:700}

.btn{display:block;width:100%;padding:14px 16px;margin-top:12px;background:transparent;border:2px solid var(--ink);color:var(--ink);text-align:left;cursor:pointer}
.btn.main{background:var(--stamp);border-color:var(--stamp);color:#f0e9f7}
.btn:disabled{opacity:.4}
.btn:focus-visible,input:focus-visible{outline:3px solid #c7a8ee;outline-offset:2px}
.night .btn{border-color:var(--paper);color:var(--paper)}

.answer{display:flex;gap:8px;margin-top:12px}
.answer input{flex:1;min-width:0;padding:12px;border:2px solid var(--ink);background:#efe8d6;color:var(--ink);font-size:20px}
.answer button{padding:0 18px;background:var(--ink);color:var(--paper);border:0}
.msg{min-height:1.4em;margin-top:6px;font-size:15px}
.msg.bad{color:var(--blood)}
.hints{margin-top:10px;font-size:15px;color:#4d463c}
.hints .h{border-left:3px solid var(--stamp);padding-left:10px;margin:8px 0}

/* fotky z místa činu */
.photo{position:relative;margin:12px -6px 14px;background:#000;overflow:hidden;line-height:0}
.photo img{width:100%;display:block}
.photo .alt{position:absolute;inset:0;opacity:0;transition:opacity .08s}
.photo.flash .alt,.photo.shadowed .alt{opacity:1}
.photo .burn{position:absolute;backdrop-filter:blur(7px) brightness(.3) sepia(.7);-webkit-backdrop-filter:blur(7px) brightness(.3) sepia(.7);background:rgba(40,16,4,.3)}
.photo .burnrim{position:absolute;background:rgba(14,7,2,.86);filter:blur(3.5px)}
.photo .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(20,10,4,.5) 100%)}
.photo .grain{position:absolute;inset:-50%;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain .9s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-2%,-4%)}}
.era-legend img{filter:sepia(.9) contrast(1.15) brightness(1.5)}
.era-1907 img{filter:sepia(.75) contrast(1.05) brightness(1.5)}
.era-1945 img{filter:grayscale(1) contrast(1.3) brightness(1.5)}
.era-1987 img{filter:saturate(.7) contrast(1.1) hue-rotate(-12deg) brightness(1.55)}
.era-1987{border:10px solid #efece4;border-bottom-width:34px;margin:12px 0 14px}
.caption{font-size:14px;color:#5d5547;margin-top:-6px}

/* noční obrazovky */
.night{min-height:70vh;display:flex;flex-direction:column;justify-content:center;text-align:left}
.night h1{font-family:'Elite';font-weight:400;font-size:30px;line-height:1.2;margin:0 0 14px;color:var(--paper)}
.night p{color:#c4bba5}
.night .hand p{color:#1f2b55}
.big{font-family:'Elite';font-size:46px;letter-spacing:.06em;color:var(--paper)}

/* Lovec */
#lovec{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center;opacity:0;background:rgba(3,3,3,.88);transition:opacity .7s}
#lovec.show{opacity:1}
#lovec span{font-family:'Type';color:#bdb39c;font-size:22px;letter-spacing:.18em;text-align:center;padding:24px}
body.glitch main,body.glitch .bar,body.glitch .code{filter:brightness(.12)}


.corrupt{color:#6e1a12!important;letter-spacing:.06em}
body.dark main,body.dark .bar,body.dark .code{opacity:0;transition:opacity .4s}

/* rituál */
.hold{margin:24px auto;width:220px;height:220px;border-radius:50%;display:grid;place-items:center;position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
.hold svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hold b{font-family:'Elite';font-size:52px;color:var(--paper)}
.radar{margin:28px auto;width:240px;height:240px;border-radius:50%;border:1.5px solid #59625d;position:relative;display:grid;place-items:center}
.radar::before,.radar::after{content:'';position:absolute;border-radius:50%;border:1px solid #59625d;inset:30px}
.radar::after{inset:70px}
.radar .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--paper);animation:pulse 2.4s infinite}
@keyframes pulse{from{transform:scale(.15);opacity:1}to{transform:scale(1);opacity:0}}
.radar b{font-family:'Elite';font-size:24px;z-index:1}

/* vývojářská lišta */
#dev{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(10,10,10,.92);color:#ddd;font:13px/1.3 system-ui,sans-serif;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #5d3f7c}
#dev .row{display:flex;gap:6px}
#dev button,#dev select{font:13px system-ui,sans-serif;background:#2c2c2c;color:#fff;border:0;padding:8px 10px;border-radius:4px}
#dev .pri{background:#5d3f7c;flex:1}
#dev select{flex:1;min-width:0}
#dev .info{margin-top:4px;color:#aaa}
#dev .link{background:none;padding:0;color:#c7a8ee;text-decoration:underline}
#dev.mini{left:auto;right:10px;bottom:10px;background:none;border:0;padding:0}
#dev.mini button{background:#5d3f7c;border-radius:20px;padding:6px 10px;opacity:.8}
body.devpad main{padding-bottom:170px}
@media (prefers-reduced-motion:reduce){.photo .grain,.radar .pulse{animation:none}body.glitch main,body.glitch .bar,body.glitch .code{filter:brightness(.12)}}

/* rozklad fotek a Lovec */
.photo .hunter{position:absolute;transform:translateX(-50%);aspect-ratio:1/3;pointer-events:none;filter:blur(var(--b,2px));-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 97%);mask-image:linear-gradient(to bottom,#000 55%,transparent 97%);transition:opacity .12s,transform .12s,filter .12s}
.photo .hunter svg{width:100%;height:100%;display:block}
.photo .hunter .eyes{opacity:0}
.photo .hunter.eyes-on .eyes{opacity:1;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 4px #ffb08a)}
.photo .hunter.ghost{filter:blur(var(--b))}
.photo .smear{position:absolute;width:9%;height:46%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 30%,rgba(5,4,3,.75),rgba(5,4,3,.3) 45%,transparent 70%);filter:blur(5px);pointer-events:none}
.photo.jump .hunter:not(.ghost){opacity:1!important;transform:translateX(-50%) scale(1.45);--b:.6px}
.photo.jump .smear{opacity:1;filter:blur(2px)}
.photo.jump .dim{background:rgba(0,0,0,.15)!important}
.photo .rot,.photo .dim,.photo .scratch,.photo .blood{position:absolute;inset:0;pointer-events:none}
.photo .scratch{background:repeating-linear-gradient(90deg,transparent 0 37px,rgba(255,255,255,.08) 37px 38px,transparent 38px 91px,rgba(0,0,0,.35) 91px 92px);mix-blend-mode:overlay}
.photo .blood{background:radial-gradient(ellipse at 50% 120%,rgba(120,10,6,.55),transparent 60%);mix-blend-mode:multiply}
.photo.burnt{aspect-ratio:4/3;background:radial-gradient(circle at 40% 45%,#2a1a10,#070504 70%);display:grid;place-items:center;line-height:1.3}
.photo.burnt span{font-family:'Elite';color:#6d5a48;font-size:15px}
.wall figure{margin:0 0 16px}
.wall figcaption{font-size:14px;color:#5d5547}

.photo .dust{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='1' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -7.6'/></filter><rect width='100%' height='100%' filter='url(%23d)'/></svg>")}
.wall{scroll-margin-top:118px}

/* krev */
.blood-svg{width:100%;height:auto;display:block;overflow:visible}
#lovec .lv{width:min(92vw,520px);animation:bloodin .9s ease-out both}
@keyframes bloodin{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.photo .bloodmark{position:absolute;pointer-events:none}
.sheet-blood{position:absolute;left:6%;right:6%;bottom:14%;z-index:5;pointer-events:none;opacity:.9}
.inline-blood{display:inline-block;width:min(100%,320px);vertical-align:middle}
.big-blood{width:100%;margin:6px 0 10px}

/* falešný hovor – vzhled podle jejího telefonu (Google Telefon, světlý motiv) */
#call{position:fixed;inset:0;z-index:70;background:#efeef4;color:#1b1b1f;font-family:'Google Sans',Roboto,system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(60px + env(safe-area-inset-top)) 16px calc(110px + env(safe-area-inset-bottom));touch-action:none;user-select:none;-webkit-user-select:none}
#call.hidden{display:none}
#call .c-sim{font-size:18px;color:#45464f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#call .c-sim span{color:#146c2e}
#call .c-name{font-size:46px;font-weight:400;margin-top:22px;line-height:1.15}
#call .c-sub{font-size:19px;color:#45464f;margin-top:14px;min-height:1.2em}
#call .c-av{width:150px;height:150px;border-radius:50%;background:#dcdce6;margin-top:46px}
#call .c-msg{margin-top:auto;display:flex;align-items:center;gap:10px;background:#f7f7fb;border-radius:26px;padding:13px 20px;font-size:17px;color:#1b1b1f}
#call .c-msg svg{width:22px;height:22px;color:#4a5c92}
#call .c-track{position:relative;margin-top:44px;width:min(92%,340px);height:88px;border-radius:44px;background:#e2e2e9;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font-size:15px;color:#1b1b1f}
#call .c-knob{position:absolute;left:50%;top:50%;width:88px;height:66px;margin:-33px 0 0 -44px;border-radius:33px;background:#fff;color:#1e8e3e;display:grid;place-items:center;transition:transform .2s;touch-action:none;box-shadow:0 1px 3px rgba(0,0,0,.12);animation:wig 2.4s infinite}
#call .c-knob svg{width:30px;height:30px}
#call .c-hint{margin-top:14px;color:#ba1a1a;min-height:1.2em;font-size:15px}
#call.incall{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
#call.incall .c-grid{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px;width:100%;max-width:330px}
#call .c-opt{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:#45464f}
#call .c-opt span{width:62px;height:62px;border-radius:50%;background:#e2e2e9;display:grid;place-items:center;color:#1b1b1f}
#call .c-opt svg{width:26px;height:26px}
#call .c-end{margin-top:34px;width:100px;height:62px;border-radius:31px;border:0;background:#ba1a1a;color:#fff;display:grid;place-items:center}
#call .c-end svg{width:30px;height:30px;transform:rotate(135deg)}
#call.ended .c-sub{color:#ba1a1a}
@keyframes wig{0%,70%,100%{transform:translateX(0)}78%{transform:translateX(8px)}86%{transform:translateX(-4px)}}
/* rituál 33 s */
#rit{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
#rit .r-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 25%,rgba(70,4,2,.55) 60%,rgba(25,0,0,.95) 100%);opacity:0}
#rit .r-drips{position:absolute;inset:0;transform-origin:top;transform:scaleY(0)}
#rit .r-drips svg{width:100%;height:100%}
#rit .r-splat{position:absolute;opacity:.85}
#rit .r-splat svg{width:100%;height:auto}
#rit .r-word{position:absolute;animation:bloodin .6s ease-out both;filter:brightness(1.7) saturate(1.2)}
#rit.fadeout{transition:opacity 2s;opacity:0}
.hold{z-index:31}
body.shake .hold,body.shake #rit .r-words{animation:shake .18s infinite}
@keyframes shake{0%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(1px,-2px)}75%{transform:translate(2px,2px)}100%{transform:translate(0,0)}}
.final .pp{opacity:0;transition:opacity 2.5s}
.final .pp.in{opacity:1}
.final p.q{font-size:20px;line-height:1.5;color:#d6ccb4;margin:0 0 18px}
#rit .r-words,#rit .r-blood{position:absolute;inset:0}
.photo .splat{position:absolute;pointer-events:none;mix-blend-mode:normal}
.photo .splat svg{width:100%;height:auto;display:block}
.photo .topdrips{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

#call .c-opt.on span{background:#3f5aa9;color:#fff}
#call .c-opt.on{color:#1b1b1f}

.photo.door .door-open{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.photo.door.anim .door-open{animation:doorBlink 5.2s 1s forwards}
.photo.door.open .door-open{opacity:1}
.photo.door .door-blood{opacity:0;z-index:2}
.photo.door.anim .door-blood{animation:doorBlood .7s 6.6s forwards}
.photo.door.open .door-blood{opacity:.92}
@keyframes doorBlink{0%{opacity:0}2%{opacity:1}26%{opacity:1}30%{opacity:0}52%{opacity:0}55%{opacity:1}64%{opacity:1}67%{opacity:0}82%{opacity:0}86%,100%{opacity:1}}
@keyframes doorBlood{to{opacity:.92}}
@media (prefers-reduced-motion:reduce){.photo.door.anim .door-open,.photo.door.anim .door-blood{animation:none;opacity:1}}

.photo .lift{position:absolute;inset:0;pointer-events:none;background:#6e665c;mix-blend-mode:screen;opacity:.32}

.final .heart{width:1.3em;height:1.3em;vertical-align:-.25em;margin-left:.2em;animation:heartbeat 1.6s ease-in-out 2s infinite}
@keyframes heartbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.18)}24%{transform:scale(1)}36%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.final .heart{animation:none}}
.fprint{position:fixed;z-index:40;pointer-events:none;opacity:.92;transition:opacity 3.5s ease-in,filter 3.5s ease-in}
.fprint.fade{opacity:0;filter:blur(3px)}
@media (prefers-reduced-motion:reduce){.fprint{transition:opacity 1s linear}}
.photo.door.static .door-blood{opacity:.92}
#main .hand,#main .notes{position:relative}
#main .hand{padding-right:54px}
.vbtn{position:absolute;top:8px;right:8px;width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;background:rgba(255,255,255,.25);color:#1f2b55;display:grid;place-items:center;padding:0;cursor:pointer}
#main .notes .vbtn{color:var(--ink);top:-4px}
#main .notes{padding-right:50px}
.vbtn svg{width:20px;height:20px}
.vbtn.on{background:#1f2b55;color:#e9dfc7}
.vbtn:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}