@import"https://fonts.googleapis.com/css2?family=Metamorphous&display=swap";:root{color-scheme:dark;font-family:Metamorphous,serif;color:#ddd1b5;background:#0e0b06;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 45%,#20180c 0,#0e0b06 58%,#050402)}button{font:inherit}.waiting,.opened{min-height:100vh;padding:24px;display:grid;align-content:center;justify-items:center;text-align:center}.waiting{opacity:1;transition:opacity .3s ease}.waiting.leaving{opacity:0}.call{margin:0;font-size:clamp(34px,5vw,64px);line-height:1.15;color:#e5d7b4}.waiting .call{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}.waiting .call.visible{opacity:1;transform:translateY(0)}.call.faint{color:#ad9a72}.opened h1{margin:0;font-size:clamp(44px,7vw,76px);line-height:1.05;font-weight:400;color:#ead9ac;animation:bridge-reveal 1.4s ease-out both}.maze-screen{min-height:100vh;padding:18px;display:grid;place-content:center;justify-items:center;gap:16px;animation:view-in .3s ease-out both}@keyframes view-in{0%{opacity:0}to{opacity:1}}.hud{width:min(92vw,520px);display:flex;justify-content:flex-end;font-size:19px}.keys{display:flex;gap:8px;color:#f2c14e;font-size:27px}.keys svg{display:block}.keys span{opacity:.22}.keys .found{opacity:1;color:#ffd76a}.maze{--board: min(80vh, 92vw, 820px);position:relative;width:var(--board);height:var(--board);display:grid;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr);gap:2px;transition:opacity .25s}.tile{position:relative;min-width:0;min-height:0;display:grid;place-items:center;background:#080603;border:1px solid #2e2517}.tile.safe{background:#5f5033;border-color:#947b4b;box-shadow:inset 0 0 12px #d5b97825}.tile.stable{background:#786f58;border-color:#d8cfad;box-shadow:inset 0 0 12px #fff7d955,0 0 5px #ded5b233}.tile.teleporter{background:#174f70;border-color:#5cb9e6;box-shadow:inset 0 0 12px #72cfff55,0 0 8px #3aaee855}.tile.challenge-complete{background:#326447;border-color:#76c68f;box-shadow:inset 0 0 14px #8ee4a844,0 0 8px #65bd8044}.tile.center{box-shadow:inset 0 0 0 2px #d2b46e,0 0 18px #d2b46e33}.challenge-mark{position:relative;z-index:1;color:#171006;font:400 clamp(10px,1.5vw,18px)/1 "Metamorphous",serif}.challenge-mark:not(.complete){color:#ffd052}.challenge-mark svg{display:block;width:clamp(22px,3vw,36px);height:clamp(22px,3vw,36px)}.challenge-mark.complete{color:#f8e8b9;text-shadow:0 0 7px #fff1bd}.respawn-ring{position:absolute;inset:8%;z-index:4;border:2px solid #f1d582;border-radius:50%;pointer-events:none;animation:respawn-pulse 1.35s ease-out forwards}@keyframes respawn-pulse{0%{transform:scale(.35);opacity:0}18%{opacity:1}65%{opacity:.65}to{transform:scale(2.2);opacity:0}}.lock-layer{position:absolute;inset:0;pointer-events:none;z-index:2}.lock{position:absolute;color:#ffd052;transform:translate(-50%,-50%);font-size:clamp(17px,2.35vw,28px)}.lock svg{display:block}.lock.unlocked{animation:unlock .8s ease-out forwards}.lock.blocked{animation:lock-shake .4s ease-in-out}@keyframes unlock{45%{transform:scale(1.5) rotate(-12deg);opacity:1}to{transform:scale(0);opacity:0}}@keyframes lock-shake{0%,to{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 5px),-50%) rotate(-5deg)}75%{transform:translate(calc(-50% + 5px),-50%) rotate(5deg)}}.player-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.player-position{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);transition:left .13s cubic-bezier(.2,.8,.3,1),top .13s cubic-bezier(.2,.8,.3,1)}.player-position.blocked{animation:player-bump .4s cubic-bezier(.2,.8,.3,1)}.player{display:block;width:100%;height:100%;overflow:visible;color:#eee1bf;fill:none;stroke:currentColor;stroke-width:8;stroke-linejoin:round;filter:drop-shadow(0 0 5px #eee1bf99);transform-box:fill-box;transform-origin:center;animation:triangle-spin 6s linear infinite}.player.falling{animation:fall .9s ease-in forwards}.maze.is-falling{opacity:.72}@keyframes fall{to{transform:scale(0) rotate(120deg);opacity:0}}@keyframes triangle-spin{to{transform:rotate(360deg)}}@keyframes player-bump{0%,to{transform:translate(-50%,-50%)}45%{transform:translate(calc(-50% + var(--bump-x)),calc(-50% + var(--bump-y)))}}.maze.collapsing .tile:not(.stable){animation:tile-fall .65s ease-in forwards}.maze.collapsing .tile.stable{animation:shelter-glow .65s ease-out}@keyframes tile-fall{to{transform:scale(.15);opacity:0;background:#000}}@keyframes shelter-glow{50%{box-shadow:inset 0 0 18px #fff7d988,0 0 14px #ded5b277}}.maze.is-complete{animation:maze-recede 2.2s ease-in forwards}.maze.is-complete:after{content:"";position:absolute;left:50%;top:50%;width:4%;aspect-ratio:1;border:2px solid #f5df9d;border-radius:50%;transform:translate(-50%,-50%) scale(.2);box-shadow:0 0 30px #f0cc72,inset 0 0 25px #fff4c4;pointer-events:none;z-index:4;animation:bridge-bloom 2.2s ease-out forwards}.maze.is-complete .tile.center{animation:center-open 2.2s ease-out forwards}.maze.is-complete .player{animation:players-merge 1.3s ease-in forwards}.maze-screen.is-complete .reshuffle{animation:fade-away .35s ease-out forwards}@keyframes maze-recede{55%{opacity:.55}to{opacity:0;transform:scale(.94)}}@keyframes bridge-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}75%{opacity:.9}to{opacity:0;transform:translate(-50%,-50%) scale(24)}}@keyframes center-open{40%{background:#f0d17d;box-shadow:0 0 25px #f0d17d}to{background:#fff3c5;box-shadow:0 0 80px #ffe5a0}}@keyframes players-merge{50%{transform:scale(.65)}to{transform:scale(0);opacity:0}}@keyframes fade-away{to{opacity:0}}@keyframes bridge-reveal{0%{opacity:0;transform:scale(.94);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.reshuffle{width:min(92vw,520px)}.progress{height:5px;overflow:hidden;background:#2e2517;border:1px solid #5c4c2f}.progress i{display:block;width:100%;height:100%;background:#c8a96b;transform-origin:left;transition:transform .1s linear;will-change:transform}.fall-message{position:fixed;bottom:24px;margin:0;color:#c9a16e;font-size:20px}.question-backdrop{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:#050402cc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.question{width:min(520px,100%);padding:30px;background:#171108;border:1px solid #8f743f;box-shadow:0 18px 70px #000}.question p{margin:0 0 24px;text-align:center;color:#ead9ac;font-size:clamp(20px,4vw,30px)}.question div{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.question button{padding:18px 10px;color:#d8c9a7;background:#21190d;border:1px solid #665333;cursor:pointer;font-size:16px}.question button:hover{color:#171006;background:#c8a96b}.question.wrong{animation:wrong .3s ease;border-color:#b96258}.question button:disabled{cursor:not-allowed;color:#8d6f67;border-color:#8c4f49}@keyframes wrong{25%{transform:translate(-8px)}75%{transform:translate(8px)}}@media(max-width:600px){.maze-screen{padding:10px;gap:12px}.maze{--board: min(82vh, 96vw);gap:1px}}@media(prefers-reduced-motion:reduce){.player{animation:none}.player-position{transition:none}.respawn-ring,.player-position.blocked,.lock.blocked,.player.falling,.maze.is-complete,.maze.is-complete:after,.maze.is-complete .tile.center,.maze.is-complete .player,.opened h1{transition:none;animation-duration:.01ms}}
