:root{color-scheme:dark;--ink:#e8e5d9;--muted:#8199a7;--cyan:#83dcd9;--amber:#e7b977}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0a1520;color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{background:radial-gradient(ellipse at 50% 38%,#203747 0,#101e2c 40%,#08121c 80%)}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.layout{min-height:calc(100dvh - 44px);padding:28px;display:grid;grid-template-columns:240px minmax(330px,440px) 230px;gap:50px;align-items:center;justify-content:center}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;line-height:.95;letter-spacing:2px}.brand svg{width:39px;height:44px}.edition{margin:62px 0 22px;color:#7eabae;font-size:9px;letter-spacing:2px;display:flex;gap:9px;align-items:center}.edition i{width:5px;height:5px;border-radius:50%;background:#b3d1b3}h1{font:normal 59px/.99 Georgia,serif;letter-spacing:-2.8px;margin:0}h1 em{font-style:normal;color:#a0c4c8}.subtitle{font-size:9px;letter-spacing:4px;color:#c7a679;margin:22px 0 34px}.lead{font-size:18px;line-height:1.65}.muted{font-size:12px;line-height:1.9;color:var(--muted);margin:20px 0}.route{display:flex;align-items:center;margin:35px 0;color:#92aab4;gap:10px;font-size:10px}.route i{height:1px;background:#35505b;width:21px}.route svg{width:22px;fill:none;stroke:#bfa181;stroke-width:1.5}.text-link{font-size:11px;color:#90aeb8;display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid #2b4350}.text-link:hover{color:var(--cyan)}.game-shell{overflow:hidden;border:1px solid #3a5263;border-radius:20px;background:#0b1925;box-shadow:0 28px 90px #0005,0 0 0 6px #0b1a2755;width:100%;height:min(880px,calc(100dvh - 100px));min-height:620px;display:flex;flex-direction:column}.topbar{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;background:#0e1e2c;z-index:2;border-bottom:1px solid #263b49}.rook-name{font-size:10px;letter-spacing:2px;font-weight:700;display:flex;justify-content:space-between;margin-bottom:8px}.rook-name small{font-size:9px;color:#96c5b7;letter-spacing:0;font-weight:400}.player-hud{width:90px}.health-track{height:4px;background:#293f47;border-radius:2px;overflow:hidden}#health-fill{height:100%;width:100%;background:#91c8ae;transition:width .15s}.room-hud{text-align:center;flex:1}.room-dots{display:flex;gap:6px;justify-content:center;margin-bottom:8px}.room-dots b{height:5px;width:18px;background:#2c414e;border-radius:2px}.room-dots .current{background:#c9b38a}.room-dots .done{background:#78bcb3}#room-title{color:#91aab6;font-size:8px;letter-spacing:1px}.top-actions{display:flex;gap:6px}.top-actions button{width:27px;height:28px;border:1px solid #344b5c;border-radius:6px;background:transparent;font-size:15px}.viewport{position:relative;flex:1;min-height:0;overflow:hidden}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.objective{position:absolute;top:13px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:1px;color:#a4bcc5;pointer-events:none;text-shadow:0 2px 5px #000}#timer{font-variant-numeric:tabular-nums;font-size:11px;color:#c8d6d7}.light-status{position:absolute;left:17px;bottom:15px;color:#73939f;font-size:8px;letter-spacing:1.5px;pointer-events:none}.light-status.bright{color:#83e2ed}.light-status.shadow{color:#9ba6d6}.hint{position:absolute;bottom:36px;left:18px;right:18px;text-align:center;font-size:11px;line-height:1.5;padding:9px 12px;color:#c4d9de;background:#0c1b28cc;border-radius:6px;pointer-events:none;transition:opacity .2s}.boss-hud{position:absolute;top:42px;left:70px;right:70px;text-align:center;pointer-events:none}.boss-hud>span{color:#e3ad98;font-size:8px;letter-spacing:2px}.boss-hud>div{height:5px;background:#392a35;margin-top:7px;border-radius:3px;overflow:hidden}.boss-hud i{display:block;height:100%;width:100%;background:#e87760}.hidden{display:none!important}.overlay{position:absolute;inset:0;background:linear-gradient(#08152240,#081522dc 26%,#081522ec);display:flex;align-items:center;justify-content:center;padding:24px;z-index:5}.card{width:100%;max-width:310px;text-align:center}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:600;color:#8aa5b4}h2{font:normal 43px/1.05 Georgia,serif;letter-spacing:-1.3px;margin:22px 0 18px}.card>p{font-size:12px;color:#a9bdc7;line-height:1.9;margin:0 0 22px}.mini-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:26px 0 30px}.mini-controls>div{display:flex;flex-direction:column;align-items:center;gap:8px}.mini-controls svg{width:34px;height:34px;fill:none;stroke:#93c8cb;stroke-width:1.2;margin-bottom:4px}.mini-controls strong{font-size:11px;font-weight:500}.mini-controls span{font-size:9px;color:#71909f}.primary{width:100%;background:#b2ded2;color:#132f36;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border:1px solid #c9ecde;border-radius:7px;font-size:13px;font-weight:700}.primary:hover{background:#d1f6e6}.secondary{width:100%;background:transparent;border:1px solid #3b5362;border-radius:7px;padding:12px;font-size:11px;color:#a6bdc8;margin-top:10px}.card>small{display:block;font-size:9px;color:#75909e;margin-top:14px}.small-link{display:block;margin-top:16px;font-size:10px;color:#91adb9}.control-deck{height:143px;flex-shrink:0;background:#0e1e2b;display:flex;justify-content:space-between;align-items:center;padding:10px 25px 14px;border-top:1px solid #29404d;touch-action:none;user-select:none}.move-zone,.aim-zone{display:flex;flex-direction:column;align-items:center;gap:8px}.stick{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;touch-action:none;user-select:none;cursor:grab}.move-stick{width:98px;height:98px;border:1px solid #425e70;background:radial-gradient(circle,#213d4d,#142937)}.knob{width:49px;height:49px;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#2e4e60;border:1px solid #527285;box-shadow:0 4px 12px #0004;pointer-events:none}.knob svg{width:24px;height:24px;fill:none;stroke:#b7ced4;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.axis{position:absolute;background:#49677544}.axis-x{height:1px;width:80px}.axis-y{width:1px;height:80px}.control-label{font-size:7px;letter-spacing:1.5px;color:#7694a4}.control-label.cyan{color:#8cbfca}.aim-stick{width:92px;height:92px;border:1px solid #5e969f;background:radial-gradient(circle,#285464,#16323f);box-shadow:0 0 20px #76d8df0a}.aim-stick .knob{background:#477f88;border-color:#93c5c7;color:#c7efdf}.aim-stick .knob svg{stroke:#d7f2e8;width:29px;height:29px}.abilities{display:flex;flex-direction:column;gap:9px;padding-bottom:12px}.ability{width:49px;height:49px;border:1px solid #44566f;background:#182b3e;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none}.ability svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ability span{font-size:7px;letter-spacing:.7px}.dash{color:#abc6e1}.spin{color:#9082b5}.spin.ready{background:#51416b;border-color:#b5a2d5;color:#e7d9ff;box-shadow:0 0 18px #a786e82a}.pressed{filter:brightness(1.3)}.notes{padding-left:0}h3{font:normal 31px/1.15 Georgia,serif;margin:20px 0 33px;letter-spacing:-.6px}.note{display:flex;gap:14px;margin-bottom:26px}.number{font-size:10px;color:#7fa9b1;padding-top:3px}h4{font-size:12px;font-weight:600;margin:0 0 8px}.note p{font-size:11px;line-height:1.75;color:var(--muted);margin:0}.experiment{margin-top:32px;padding:19px 0;border-block:1px solid #304654}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;text-align:left}.setting small{display:block;font-size:9px;margin-top:5px;color:#728e9d}.setting input{appearance:none;width:32px;height:18px;background:#314957;border-radius:10px;position:relative;cursor:pointer;flex-shrink:0}.setting input:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#afc9cb;transition:transform .15s}.setting input:checked{background:#467c79}.setting input:checked:before{transform:translateX(14px);background:#c5e8d7}.experiment p{color:#7f9ca9;line-height:1.8;font-size:10px;margin:14px 0 0}.keyboard{margin-top:25px;color:#7f9ba9;font-size:10px}.keyboard>span{letter-spacing:1.6px;font-size:8px}.keyboard p{line-height:1.7}kbd{font:8px Arial;border:1px solid #3d5363;border-radius:3px;padding:4px 5px;margin-right:4px;color:#bdd1d8}.build{font-size:8px;letter-spacing:1.5px;color:#547787;margin-top:28px}footer{height:44px;display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:#577384;padding:0 38px}footer a{color:#8aa6b1}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;margin:25px 0;text-align:left}.stats div{border-top:1px solid #344e5d;padding-top:10px}.stats strong{font-size:23px;color:#c1e4d9;display:block;font-weight:400}.stats span{font-size:8px;line-height:1.5;color:#91adb9;display:block;margin-top:6px}.result h2{font-size:33px}.card .setting{padding:12px 0 23px}
@media(max-height:900px) and (min-width:761px){.layout{grid-template-columns:230px minmax(320px,390px) 220px;gap:40px;padding:23px}.game-shell{height:calc(100dvh - 90px);min-height:570px}.control-deck{height:132px;padding-inline:24px}.move-stick{width:89px;height:89px}.aim-stick{width:85px;height:85px}.edition{margin-top:45px}h1{font-size:54px}.mini-controls{margin:18px 0}.card h2{font-size:37px}.notes h3{font-size:29px}.note{margin-bottom:21px}.experiment{margin-top:25px}}
@media(max-width:1100px) and (min-width:761px){.layout{grid-template-columns:230px minmax(330px,440px);gap:35px}.notes{display:none}}
@media(max-width:760px){html,body{height:100%;overflow:hidden;background:#0b1925}.layout{height:100dvh;min-height:0;padding:0;display:block}.intro,.notes,footer{display:none}.game-shell{width:100%;max-width:530px;margin:auto;height:100dvh;min-height:0;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top)}.topbar{height:60px;padding:11px 15px}.control-deck{height:calc(142px + env(safe-area-inset-bottom));padding:10px 26px calc(14px + env(safe-area-inset-bottom))}.overlay{padding:20px}.card{max-width:300px}.card h2{font-size:38px}.card>p{font-size:11px}.mini-controls{margin:22px 0}.hint{font-size:10px}.objective{font-size:8px}.player-hud{width:80px}.room-hud{max-width:160px}.top-actions{gap:5px}}
@media(max-width:370px){.control-deck{padding-inline:15px;height:calc(128px + env(safe-area-inset-bottom))}.move-stick{width:86px;height:86px}.aim-stick{width:82px;height:82px}.knob{width:44px;height:44px}.ability{width:45px;height:45px}.abilities{gap:7px}.topbar{padding-inline:12px;gap:9px}.player-hud{width:65px}.room-hud{max-width:125px}.room-dots b{width:14px}.top-actions button{width:25px}.card h2{font-size:31px;margin:15px 0}.mini-controls{margin:15px 0}.card>p{margin-bottom:14px}.primary{padding:13px 16px}.card>small{font-size:8px}}
@media(max-height:650px) and (max-width:760px){.mini-controls{display:none}.card h2{font-size:29px;margin:15px 0}.overlay{padding:15px}.card>p{margin-bottom:16px}.card>small{margin-top:10px}.stats{gap:8px;margin:15px 0}.stats strong{font-size:18px}.result h2{font-size:26px}.card .setting{padding:4px 0 14px}.result>p{font-size:10px}.small-link{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
