@font-face{font-family:VCS;src:local("Bahnschrift");font-display:swap}
:root{--ink:#08090b;--paper:#fff;--pink:#f58dbd;--muted:#bbb4b9;--edge:#ffffff24;--space:clamp(24px,5vw,88px)}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font:16px VCS,"Trebuchet MS",sans-serif;line-height:1.5}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--pink);outline-offset:4px}[hidden]{display:none!important}
.welcome{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;max-width:1700px;margin:auto;overflow:hidden}.intro{padding:var(--space);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.logo{width:clamp(160px,20vw,270px);height:auto;object-fit:contain;margin-bottom:clamp(20px,4vh,44px)}h1{font-size:clamp(42px,5.5vw,84px);font-weight:800;line-height:.98;letter-spacing:-.04em;margin:0 0 34px}h1 em{font-style:normal;color:var(--pink)}.play{display:flex;align-items:center;justify-content:center;gap:16px;min-width:220px;padding:18px 32px;background:var(--pink);color:var(--ink);border:0;border-radius:3px;text-transform:uppercase;font-size:20px;font-weight:800;letter-spacing:.06em;transition:background .15s,transform .15s}.play:hover{background:#ffb4d4;transform:translateY(-2px)}.play svg{fill:currentColor;width:22px;height:22px}.hint{color:var(--muted);font-size:14px;max-width:38ch}.welcome-tools{display:flex;gap:28px;margin-top:24px}.welcome-tools button,.bar-actions button{background:transparent;border:0;color:var(--paper);padding:8px 0}.welcome-tools button{border-bottom:1px solid var(--edge)}.welcome-tools button:hover,.bar-actions button:hover{color:var(--pink)}.cover{padding:30px 30px 30px 0;align-self:center}.cover img{display:block;width:100%;max-height:calc(100svh - 60px);object-fit:contain;border-radius:8px}
.game{height:100svh;display:flex;flex-direction:column;padding:0 24px 14px;gap:8px}.game-bar{display:flex;justify-content:space-between;align-items:center;min-height:78px;gap:20px}.game-bar img{width:58px;height:58px;object-fit:contain}.bar-actions{display:flex;gap:24px;align-items:center}.bar-actions button{font-size:13px}.viewport{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;background:#000;overflow:hidden}canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:auto}.playback{margin:0;text-align:center;color:var(--muted);font-size:12px;min-height:18px}.viewport:fullscreen{background:#000}.loading{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:min(430px,calc(100% - 32px));padding:20px 24px;background:#0c0c10ed;border:1px solid var(--edge);border-radius:6px;pointer-events:none}.loading strong{font-size:16px}.loading p{color:var(--muted);font-size:12px;margin:10px 0 0}.loading progress{width:100%;height:5px;margin-top:14px;accent-color:var(--pink)}.loading.failed{border-color:var(--pink)}.toast{position:fixed;bottom:44px;right:30px;background:#141218;color:var(--pink);padding:12px 20px;border:1px solid var(--edge);border-radius:5px}
dialog{width:min(480px,calc(100% - 32px));padding:32px;border:1px solid var(--edge);border-radius:8px;background:#111014;color:var(--paper)}dialog::backdrop{background:#000b}h2{font-size:28px;letter-spacing:-.03em;margin:0 0 24px}.close{position:absolute;top:8px;right:14px;border:0;background:none;color:var(--muted);font-size:28px}.keys{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;font-size:14px}.keys dt,.keys dd{margin:0}.keys dd{display:flex;gap:5px;justify-content:flex-end}kbd{font:12px VCS,"Trebuchet MS",sans-serif;padding:5px 8px;background:#252128;border:1px solid var(--edge);border-radius:3px}select{display:block;margin-top:10px;width:100%;background:#252128;border:1px solid var(--edge);border-radius:4px;color:white;padding:12px}.touch{display:none;position:absolute;bottom:24px;left:16px;right:16px;justify-content:space-between;pointer-events:none}.touch button{width:44px;height:44px;background:#08090ba6;border:1px solid #ffffff55;color:white;border-radius:50%;touch-action:none;pointer-events:auto;user-select:none}.directions{display:grid;grid-template-columns:repeat(3,44px);gap:4px}.directions button:first-child{grid-column:2}.directions button:nth-child(2){grid-column:1}.touch-actions{display:grid;grid-template-columns:repeat(3,44px);gap:4px;align-content:end}
@media(pointer:coarse){.touch{display:flex}}@media(max-width:760px){.welcome{grid-template-columns:1fr}.intro{z-index:1;background:#08090bd9;min-height:100svh;justify-content:center;align-items:center;text-align:center}.cover{position:absolute;inset:0;padding:0;overflow:hidden;opacity:.4}.cover img{width:100%;height:100svh;max-height:none;object-fit:cover;border-radius:0}.logo{width:210px}h1{font-size:52px}.game{padding:0 8px 8px}.game-bar{min-height:60px;gap:8px}.game-bar img{width:40px;height:40px}.bar-actions{gap:14px}.bar-actions button{font-size:11px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.loading.streaming{left:auto;right:14px;top:12px;bottom:auto;transform:none;width:auto;padding:6px 10px;border:0;background:#08090b99;border-radius:20px;opacity:.7}.loading.streaming strong{font-size:11px;font-weight:400}.loading.streaming progress,.loading.streaming p{display:none}
.touch{inset:0;bottom:0}.joystick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:144px;height:144px;border-radius:50%;background:#15151b26;border:1px solid #ffffff30;box-shadow:inset 0 0 30px #0004;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}.stick-ring{position:absolute;inset:24px;border:1px solid #ffffff1c;border-radius:50%}.stick{position:absolute;left:46px;top:46px;width:50px;height:50px;border-radius:50%;background:#ffffff30;border:1px solid #ffffff70;box-shadow:0 4px 16px #0005;pointer-events:none;will-change:transform}.touch-actions{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:158px;height:158px;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:4px}.touch .touch-actions button{width:50px;height:50px;font-size:23px;background:#15151b55;backdrop-filter:blur(3px);border-color:#ffffff55}.touch-actions button:nth-child(1){grid-column:2;grid-row:1;color:#85e1d7}.touch-actions button:nth-child(2){grid-column:3;grid-row:2;color:#f99fbc}.touch-actions button:nth-child(3){grid-column:1;grid-row:2;color:#d2b0ff}.touch-actions button:nth-child(4){grid-column:2;grid-row:3;color:#a9caff}.touch-shoulders{position:absolute;top:14px;right:18px;display:flex;gap:12px}.touch .touch-shoulders button{height:34px;width:48px;border-radius:10px;font-size:13px;background:#15151b55}.touch button:active{background:#ffffff50;transform:scale(.94)}
@media(pointer:coarse){.game{padding:0}.game-bar{min-height:44px;padding:0 12px}.game-bar img{width:30px;height:30px}.bar-actions{gap:16px}.playback{display:none}.viewport{margin:0}.loading.streaming{top:60px}.bar-actions button:first-child{display:none}}
@media(pointer:coarse) and (orientation:landscape){.game-bar{min-height:36px}.joystick{width:124px;height:124px;bottom:12px}.stick-ring{inset:20px}.stick{left:39px;top:39px;width:44px;height:44px}.touch-actions{bottom:12px;width:146px;height:146px;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px)}.touch .touch-actions button{width:46px;height:46px}}
.touch-visible .touch{display:flex}.touch-hidden .touch{display:none}.touch-option{display:flex;align-items:center;gap:10px;margin-top:24px;font-size:14px}.touch-option input{width:18px;height:18px;accent-color:var(--pink)}