@import"https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Playfair+Display:wght@700&display=swap";:root{font-family:Manrope,system-ui,sans-serif;color:#f8f4ea;background:#061518;--mint:#63e4d2;--gold:#e5bb6d;touch-action:none}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#061518}button,input{font:inherit}button{min-width:45px;min-height:45px;border:1px solid #ffffff25;border-radius:14px;color:inherit;background:#0b2428e8;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}.hidden,.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#loading{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#071619;z-index:99}#loading b,.logo,.topbar>strong{font-family:Playfair Display,serif;letter-spacing:.14em}.screen{position:absolute;inset:0;overflow:hidden}.scene-bg{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(#03101233,#03101222 38%,#031012ee 88%),linear-gradient(90deg,#0005,transparent,#0004)}.logo{position:absolute;top:max(20px,env(safe-area-inset-top));left:20px;font-size:22px}.logo i{font:800 10px Manrope;color:var(--gold);letter-spacing:.08em}.sheet{position:absolute;z-index:10;left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom));padding:20px;border:1px solid #ffffff26;border-radius:24px;background:linear-gradient(145deg,#0d292dee,#07191cf7);box-shadow:0 24px 70px #000c,inset 0 1px #ffffff15;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}small{font-size:10px;font-weight:800;letter-spacing:.17em;color:#9cb7b5}h1,h2,p{margin:0}h1,h2{font-family:Playfair Display,serif}h1{margin:5px 0 16px;font-size:30px;line-height:1.05}h2{margin:5px 0 14px;font-size:27px}.avatars{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.avatar{height:160px;padding:8px;display:grid;grid-template-rows:105px auto auto;text-align:left;overflow:hidden;background:#06191de8}.avatar img{width:100%;height:105px;object-fit:cover;object-position:50% 18%;border-radius:9px;filter:saturate(.86)}.avatar b{font-size:15px}.avatar span{font-size:10px;color:#9eb4b2}.avatar.selected{border:2px solid var(--mint);box-shadow:0 0 22px #63e4d232}label{display:grid;gap:5px;font-size:11px;font-weight:800;color:#b9c9c7}input{width:100%;height:46px;padding:0 13px;color:#fff;background:#05161a;border:1px solid #ffffff24;border-radius:12px;font-size:16px}.primary{width:100%;margin-top:12px;background:linear-gradient(110deg,#54d6c5,#d4b05f);border:0;color:#082126;box-shadow:0 9px 25px #0007}.topbar{position:absolute;z-index:20;top:max(12px,env(safe-area-inset-top));left:14px;right:14px;height:48px;display:flex;align-items:center;gap:9px}.topbar>strong{font-size:14px;flex:1}.round{width:46px;height:46px;padding:0;border-radius:50%;font-size:21px}.identity{height:44px;max-width:124px;padding:4px 8px 4px 4px;display:flex;align-items:center;gap:6px;border:1px solid #ffffff20;border-radius:24px;background:#071a1de8;font-size:10px;font-weight:800;overflow:hidden}.identity img{width:34px;height:34px;border-radius:50%;object-fit:cover}.identity span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.home .shade{background:linear-gradient(#06131655,#06131677 45%,#061316f5)}.city-sheet{bottom:max(28px,env(safe-area-inset-bottom))}.city-list{display:grid;gap:10px}.city{width:100%;height:82px;padding:12px;display:grid;grid-template-columns:42px 1fr 48px;align-items:center;text-align:left}.city .number{color:var(--gold);font-size:11px}.city span:nth-child(2){display:grid}.city b{font-family:Playfair Display,serif;font-size:19px}.city i{margin-top:4px;color:#9db2b0;font-size:10px;font-style:normal}.city strong{font-size:16px;text-align:right;color:var(--mint)}.entrance .street-depth{position:absolute;inset:0;background:linear-gradient(#04101222,#04101222 50%,#031113cc)}.location{position:absolute;z-index:4;left:22px;top:94px;text-shadow:0 2px 12px #000}.location h1{font-size:38px}.door{position:absolute;z-index:3;left:61%;top:25%;width:122px;height:330px;transform:perspective(500px) rotateY(-2deg);border:8px solid #a67a47;border-bottom:0;background:linear-gradient(90deg,#0b1719,#214247 55%,#071315);box-shadow:0 0 0 3px #362c24,0 20px 40px #0009}.door:before{content:"";position:absolute;inset:15px;border:1px solid #d8b56a55}.door span{position:absolute;top:-34px;left:-15px;width:140px;text-align:center;font-size:9px;letter-spacing:.08em}.door i{position:absolute;right:12px;top:52%;width:8px;height:8px;border-radius:50%;background:#e4bf70}.walker{position:absolute;z-index:5;left:-3%;bottom:4%;width:128px;height:330px;transition:transform 2.05s cubic-bezier(.45,.05,.3,1),opacity .55s}.walker img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;filter:drop-shadow(0 12px 12px #0009)}.walker b{position:absolute;left:50%;bottom:12px;transform:translate(-50%);padding:6px 9px;border-radius:12px;background:#07191ddd;font-size:10px}.threshold{position:absolute;z-index:6;left:56%;right:0;bottom:7%;height:9px;background:#c4a36a;transform:skew(-25deg);box-shadow:0 0 20px #d8be78}.entrance.walking .walker{transform:translate(205px,-8px) scale(.77)}.entrance.crossing .door{background:#020808}.entrance.crossing .walker{transform:translate(250px,-42px) scale(.42);opacity:.18}.entrance.inside .scene-bg{transform:scale(1.65);filter:brightness(.15);transition:1s}.entrance.inside:after{content:"BINNEN";position:absolute;inset:0;z-index:8;display:grid;place-content:center;background:#07191de8;color:#d9be7b;font-size:10px;letter-spacing:.3em;animation:reveal .75s both}@keyframes reveal{0%{opacity:0}to{opacity:1}}.game{background:#07191d}.game canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.keep-ball{position:absolute;z-index:7;width:52px;height:52px;min-width:52px;min-height:52px;padding:0;transform:translate(-50%,-50%);border:3px solid #fff4cc;border-radius:50%;background:#efc36c;color:#133337;box-shadow:0 0 22px #63e4d2;font-size:11px;touch-action:none}.keep-ball.danger{box-shadow:0 0 28px #ff8268;transform:translate(-50%,-50%) scale(1.08)}.target-layer{position:absolute;z-index:6;inset:0;pointer-events:none}.target-marker{position:absolute;width:50px;height:50px;transform:translate(-50%,-50%);display:grid;place-content:center;border:4px solid #ffd9bd;border-radius:50%;background:#bd4f43;color:#fff;box-shadow:0 0 18px #ff7c63;font-size:10px;font-style:normal;font-weight:900}.target-marker.hit{opacity:0;transform:translate(-50%,-50%) scale(1.8);transition:.22s}.game .topbar{pointer-events:none}.game .topbar button,.game .identity{pointer-events:auto}.instruction{position:absolute;z-index:8;left:50%;top:128px;transform:translate(-50%);padding:8px 13px;border:1px solid #ffffff20;border-radius:18px;background:#051719dd;font-size:11px;font-weight:800;white-space:nowrap;animation:hint 3.1s forwards}.rotterdam .instruction{top:130px}@keyframes hint{0%,75%{opacity:1}to{opacity:0}}.pause{position:absolute;z-index:9;right:16px;bottom:max(18px,env(safe-area-inset-bottom));font-size:16px}.modal{position:absolute;z-index:50;inset:0;background:#031012aa;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal .sheet{bottom:calc(50% - 180px)}.setting{height:58px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff15}.pill{padding:0 18px}.result{text-align:center}.final-score{font:700 46px Playfair Display,serif;color:var(--gold);margin:2px 0 8px}.result button:not(.primary){width:100%;margin-top:9px}.instant{animation:pop .18s both}@keyframes pop{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.entrance{--entry-x:82%;--entry-y:52%;--entry-scale:.3}.entrance.rotterdam{--entry-x:79%;--entry-y:57%;--entry-scale:.24}.entrance .street-depth{background:linear-gradient(#04101233,#04101205 48%,#0311138f)}.entrance .location{left:20px;top:92px;max-width:68%;padding:8px 10px;border-radius:14px;background:#06161991;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.entrance .location h1{font-size:34px}.entrance .door{position:absolute;z-index:3;left:72%;top:18%;width:28%;height:40%;border:0;background:none transparent;box-shadow:none;transform:none;pointer-events:none}.entrance.rotterdam .door{left:64%;top:39%;width:36%;height:22%}.entrance .door:before,.entrance .door span,.entrance .door i{display:none}.entrance.crossing .door{background:none transparent}.entrance .walker{left:10%;top:99%;bottom:auto;width:124px;height:300px;transform:translate(-50%,-100%) scale(1);transform-origin:50% 100%;transition:left 2.05s cubic-bezier(.45,.05,.3,1),top 2.05s cubic-bezier(.45,.05,.3,1),transform 2.05s cubic-bezier(.45,.05,.3,1),opacity .48s}.entrance .walker img{animation:walk-bob .42s ease-in-out infinite alternate}.entrance.walking .walker{left:var(--entry-x);top:var(--entry-y);transform:translate(-50%,-100%) scale(var(--entry-scale))}.entrance.crossing .walker{left:var(--entry-x);top:calc(var(--entry-y) - 2%);transform:translate(-50%,-100%) scale(calc(var(--entry-scale) * .66));opacity:0;z-index:2}.entrance.crossing .walker img{animation:none}.entrance.inside .scene-bg{transform:scale(1.5);filter:brightness(.12);transform-origin:82% 50%;transition:transform 1s ease,filter 1s ease}.entrance.rotterdam.inside .scene-bg{transform-origin:79% 55%}@keyframes walk-bob{0%{transform:translateY(0) rotate(-.7deg)}to{transform:translateY(-6px) rotate(.7deg)}}@media(max-height:760px){.setup-card{padding:16px}.avatar{height:140px;grid-template-rows:88px auto auto}.avatar img{height:88px}.sheet h1{font-size:27px;margin-bottom:12px}.entrance .walker{height:276px}.modal .sheet{bottom:20%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}