@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{font-family:Outfit,system-ui,sans-serif;color:#f3f0ff;background:#0b1026;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#263050 0,transparent 65%);min-height:100vh}main{max-width:1280px;padding:30px 36px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.brand{font-size:17px;font-weight:800;letter-spacing:1px}.brand>span:last-child{color:#b5aaca}.star{color:#ffd166;font-size:29px;margin-right:10px}button{font:inherit;cursor:pointer;color:inherit;background:#ffffff0b;border:1px solid #ffffff23;border-radius:9px;padding:10px 16px;font-weight:600}button:hover{background:#ffffff20}button:focus-visible{outline:3px solid #ffd166;outline-offset:4px}.game{border:1px solid #65709355;border-radius:18px;overflow:hidden;background:#171d38;box-shadow:0 25px 80px #0005}.hud{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;gap:20px}small,.eyebrow{letter-spacing:2px;font-size:12px;font-weight:800;color:#b6a9ed}h1{font-size:25px;margin:7px 0 0}.stats{display:flex;align-items:center;gap:30px}#snacks{font-size:23px;font-weight:700;white-space:nowrap}.noise{width:150px}.noise label{display:flex;justify-content:space-between;font-size:14px;color:#d9d4ec}.noise b{font-weight:400;color:#94d9c3}progress{display:block;width:100%;height:9px;margin-top:8px;border:0;border-radius:8px;overflow:hidden;background:#303754}progress::-webkit-progress-bar{background:#303754}progress::-webkit-progress-value{background:#ffcc6a;transition:width .1s}.screen{position:relative;background:#111a35}canvas{width:100%;height:auto;display:block;image-rendering:pixelated}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#080d2399;backdrop-filter:blur(3px)}.overlay.hidden{display:none}.card{max-width:480px;text-align:center;padding:30px;background:#171d3bf5;border:1px solid #817baf70;border-radius:19px;box-shadow:0 20px 70px #0007}.eyebrow{color:#dcc48a;margin-top:0}h2{font-size:46px;line-height:1.05;letter-spacing:-1.5px;margin:19px 0}em{font-style:normal;color:#ffd166}.card>p:not(.eyebrow){font-size:18px;line-height:1.55;color:#c4c7e0}.tip{font-size:14px;color:#c4c7e0;margin:20px 0}.primary{background:#ffd166;color:#25233b;border:0;padding:15px 35px;font-size:19px;box-shadow:0 5px 0 #aa783c}.primary:hover{background:#ffe197}.mission{min-height:58px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:16px;color:#cecbe3}.mission button{font-size:14px;border:0}.controls{display:flex;justify-content:space-between;align-items:center;margin-top:23px;gap:15px;color:#9ba4c6;font-size:14px}.keys{display:flex;gap:24px}.keys>span{display:flex;gap:5px;align-items:center}kbd{font:600 13px Outfit,system-ui;background:#262e4b;border:1px solid #56607c;border-bottom:3px solid #56607c;border-radius:5px;padding:4px 7px;color:#e9e9fc}.touch{display:flex;gap:9px;justify-content:center;margin-top:25px}.touch button{touch-action:none;user-select:none;min-height:48px}.touch button.active{background:#ffd166;color:#171d38}@media(max-width:700px){main{padding:15px 10px}header{margin-bottom:15px}.brand{font-size:12px;letter-spacing:.5px}.star{font-size:20px}.hud{padding:14px;gap:10px}h1{font-size:17px}small{font-size:10px;letter-spacing:1px}.stats{gap:10px}#snacks{font-size:17px}.noise{width:80px}.noise label{font-size:12px}.screen{min-height:360px;overflow:hidden}canvas{height:360px;width:660px;position:relative;left:50%;transform:translateX(-50%)}.card{padding:18px;max-width:90%}h2{font-size:32px;margin:12px 0}.card>p:not(.eyebrow){font-size:16px;margin:10px 0}.tip{margin:12px 0}.eyebrow{font-size:10px}.mission{font-size:14px;padding:10px}.keys{flex-wrap:wrap;gap:10px}.note{display:none}.touch{gap:5px}.touch button{padding:10px;font-size:14px}.controls{margin-top:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.touch{flex-wrap:wrap}.keys{flex-wrap:wrap}.controls .note{white-space:nowrap}@media(max-width:1000px){.controls .note{display:none}}

button:disabled{opacity:.4;cursor:default}.screen{overflow:hidden}.touch button{-webkit-touch-callout:none;-webkit-user-select:none}.touch #use{background:#ffd166;color:#222744}.touch button:active{transform:translateY(2px);background:#ffdc86;color:#222744}
@media(max-width:700px),(max-height:520px){body{overscroll-behavior:none}main{padding:10px 8px calc(150px + env(safe-area-inset-bottom));}.brand{font-size:12px}header{margin-bottom:10px}header button{min-height:42px;font-size:14px}.hud{padding:12px;display:block}.hud h1{font-size:18px;margin:4px 0 8px}.hud small{font-size:11px}.stats{justify-content:space-between;gap:12px}#snacks{font-size:17px}.noise{width:140px}.screen{min-height:0}canvas{position:relative;max-width:none}.controls{display:none}.touch{position:fixed;bottom:0;left:0;right:0;margin:0;padding:10px 10px calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#11182df5;border-top:1px solid #52617c;z-index:5}.touch button{min-height:52px;font-size:16px;padding:8px;border-radius:12px}.touch button:nth-child(1){grid-column:1;grid-row:1}.touch button:nth-child(2){grid-column:2;grid-row:1}.touch button:nth-child(4){grid-column:3;grid-row:1}.touch button:nth-child(3){grid-column:1;grid-row:2}.touch button:nth-child(5){grid-column:2;grid-row:2}.touch button:nth-child(6){grid-column:3;grid-row:2}.mission{font-size:14px;align-items:flex-start;min-height:64px}.mission button{white-space:nowrap;padding:6px}.card{padding:14px;max-width:94%;max-height:100%;overflow-y:auto}.card h2{font-size:27px;margin:8px 0}.card>p:not(.eyebrow){font-size:15px;line-height:1.35;margin:8px 0}.card .eyebrow{font-size:10px;margin:0}.card .tip{margin:9px 0;font-size:13px}.card .primary{padding:10px 24px;font-size:17px}.overlay{backdrop-filter:blur(2px)}}
@media(max-height:520px) and (min-width:701px){main{padding-bottom:85px}.touch{grid-template-columns:repeat(6,1fr)}.touch button:nth-child(n){grid-column:auto;grid-row:auto}.hud{display:flex}.hud h1{margin-bottom:0}header{display:none}}
header{gap:10px}.brand{margin-right:auto}#fullscreen{white-space:nowrap}.touch{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
@media(orientation:landscape) and (max-height:650px){html,body{height:100%;overflow:hidden}main{padding:0 8px;height:100dvh;max-width:none}header{display:flex;height:32px;margin:0;gap:8px}.brand{font-size:12px}header button{padding:3px 10px;font-size:12px;min-height:28px}.star{font-size:16px}.game{border-radius:8px}.hud{display:flex;padding:5px 12px;height:45px}.hud h1{font-size:16px;margin:0}.hud small{font-size:10px}.stats{gap:14px}#snacks{font-size:16px}.noise{width:110px}.screen{min-height:0;display:block}.mission{min-height:30px;height:30px;padding:3px 12px;font-size:13px;align-items:center}.mission button{font-size:12px;padding:3px}.touch{height:64px;display:grid;grid-template-columns:repeat(6,1fr);padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom));gap:8px}.touch button:nth-child(n){grid-column:auto;grid-row:auto;min-height:44px;font-size:15px}.controls{display:none}.card{max-width:600px;padding:10px;max-height:100%;overflow:auto}.card h2{font-size:26px;margin:5px 0}.card>p:not(.eyebrow){font-size:14px;margin:5px 0;line-height:1.25}.tip{margin:5px 0}.eyebrow{display:none}.primary{font-size:16px;padding:8px 20px}}
:fullscreen{background:#0b1026}body.immersive main{max-width:none}@media(orientation:portrait) and (max-width:700px){header{flex-wrap:wrap}.brand{width:100%;font-size:14px}#fullscreen::after{content:' · turn sideways'}header button{flex:1}}