:root{color:#252b32;font-synthesis:none;text-rendering:optimizelegibility;--ink:#252b32;--muted:#89919b;--line:#e8ebee;--paper:#fff;--accent:#ee6c78;--mono:"Consolas", "Cascadia Mono", monospace;background:#edf0f3;font-family:Bahnschrift,Yu Gothic UI,Meiryo,Arial,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;min-width:320px;height:100%;margin:0}body{overflow:hidden}button{color:inherit;font:inherit}.app-shell{background:#f6f7f8;grid-template-rows:64px minmax(0,1fr);grid-template-columns:306px minmax(0,1fr);width:100%;height:100%;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--line);z-index:5;background:#fff;grid-column:1/-1;justify-content:space-between;align-items:center;padding:0 28px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;text-decoration:none;display:flex}.brand>span:last-child{gap:1px;display:grid}.brand strong{letter-spacing:.12em;font-size:14px;font-weight:800;line-height:1}.brand small{color:#949ba4;font:9px var(--mono);letter-spacing:.2em}.brand-mark{border:1px solid #dce0e3;border-radius:6px;align-items:end;gap:2px;width:22px;height:24px;padding:3px;display:flex}.brand-mark i{background:#ef747e;border-radius:5px;width:4px;display:block}.brand-mark i:first-child{opacity:.65;height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){opacity:.8;height:10px}.topbar-center{color:#9aa1a9;font:10px var(--mono);letter-spacing:.13em;align-items:center;gap:8px;display:flex}.topbar-center b{color:#444b52;font-weight:500}.live-dot{background:#7fcba5;border-radius:100%;width:6px;height:6px;box-shadow:0 0 0 3px #e8f6ee}.topbar-right{align-items:center;gap:16px;display:flex}.build-tag{border:1px solid var(--line);color:#9299a1;font:9px var(--mono);letter-spacing:.06em;border-radius:5px;padding:6px 9px}.icon-button{border:1px solid var(--line);color:#67717b;cursor:pointer;background:#fff;border-radius:6px;height:28px;padding:0 9px;font-size:13px}.icon-button span{font:9px var(--mono);margin-left:3px}.mode-panel{border-right:1px solid var(--line);background:#fff;flex-direction:column;min-height:0;padding:23px 17px 14px;display:flex}.panel-heading{justify-content:space-between;align-items:end;padding:0 8px 15px;display:flex}.eyebrow,.stage-kicker,.message-kicker{color:#a0a7ae;font:9px var(--mono);letter-spacing:.16em}.panel-heading h1{letter-spacing:.02em;margin:6px 0 0;font-size:16px;font-weight:700;line-height:1.35}.mode-count{font:10px var(--mono);color:#999fa7;padding-bottom:2px}.mode-list{scrollbar-width:thin;scrollbar-color:#d9dde1 transparent;flex-direction:column;flex:1;gap:5px;min-height:0;padding:1px 3px 12px;display:flex;overflow:auto}.mode-card{text-align:left;cursor:pointer;background:#fff;border:1px solid #0000;border-radius:8px;grid-template-columns:28px 1fr auto;align-items:center;gap:9px;width:100%;min-height:52px;padding:7px 9px;transition:background .16s,border .16s,transform .16s;display:grid}.mode-card:hover{background:#f7f8f9;transform:translate(2px)}.mode-card.selected{background:#faf2f2;border-color:#f4dfe1}.mode-card.selected .mode-num{background:var(--mode-color);color:#fff;border-color:var(--mode-color)}.mode-num{color:#939ba3;width:27px;height:27px;font:9px var(--mono);border:1px solid #e6e9ec;border-radius:7px;place-items:center;display:grid}.mode-labels{gap:4px;min-width:0;display:grid}.mode-labels b{font:600 10px var(--mono);letter-spacing:.035em;white-space:nowrap}.mode-labels small{color:#a0a6ad;white-space:nowrap;text-overflow:ellipsis;font-size:9px;overflow:hidden}.mode-tag{color:#9ba2aa;font:8px var(--mono);letter-spacing:.02em;text-align:right}.difficulty-block{border-top:1px solid var(--line);padding:13px 7px 0}.difficulty-label{color:#727b84;justify-content:space-between;margin-bottom:9px;font-size:10px;display:flex}.difficulty-label span:last-child{color:#a1a7ad}.difficulty-options{grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.difficulty-options button{color:#9aa1a8;font:8px var(--mono);cursor:pointer;background:#fff;border:1px solid #e8ebee;border-radius:5px;padding:7px 2px}.difficulty-options button.selected{color:#fff;background:#333b43;border-color:#333b43}.stage-wrap{flex-direction:column;gap:10px;min-width:0;min-height:0;padding:20px 22px 14px;display:flex}.stage{--mode-color:#f16f7b;touch-action:none;-webkit-user-select:none;user-select:none;background:#e5e9ec;border-radius:12px;flex:1;min-height:300px;position:relative;overflow:hidden;box-shadow:0 2px 12px #34404c0c,0 18px 48px #34404c10}.stage canvas{touch-action:none;width:100%;height:100%;display:block}.stage-vignette{z-index:1;pointer-events:none;background:linear-gradient(#f2f4f500 0% 58%,#e8ebee18 100%);position:absolute;inset:0}.stage-top{z-index:2;pointer-events:none;justify-content:space-between;align-items:start;display:flex;position:absolute;inset:20px 22px auto}.stage-id{text-shadow:0 1px 9px #fff9;gap:5px;display:grid}.stage-id strong{font:700 19px var(--mono);letter-spacing:.075em}.stage-id>span:last-child{color:#6c747c;font-size:10px}.objective-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffbc;border:1px solid #fffa;border-radius:8px;align-items:center;gap:9px;padding:9px 12px;display:flex;box-shadow:0 3px 14px #59636c0c}.objective-mark{color:var(--mode-color);font-size:18px;font-weight:700}.objective-pill>span:last-child{gap:3px;display:grid}.objective-pill small{color:#9aa1a8;font:8px var(--mono);letter-spacing:.1em}.objective-pill b{color:#555e67;font-size:10px;font-weight:600}.stage-hud{z-index:2;pointer-events:none;justify-content:space-between;align-items:start;display:flex;position:absolute;inset:94px 20px auto}.hud-left{gap:6px;display:flex}.hud-chip{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffffb5;border:1px solid #ffffffa3;border-radius:7px;gap:4px;min-width:64px;min-height:46px;padding:7px 9px;display:grid}.hud-chip small,.speed-label{color:#a0a7ae;font:8px var(--mono);letter-spacing:.09em}.hud-chip b{font:600 13px var(--mono);color:#454d55}.hud-chip b i{color:#9ca3aa;font-size:9px;font-style:normal}.health-chip{grid-template-columns:1fr auto;align-items:center;column-gap:7px;min-width:112px}.health-chip small{grid-column:1/-1}.health-track,.speed-track{background:#e5e8eb;border-radius:10px;height:4px;overflow:hidden}.health-track span,.speed-track span{border-radius:inherit;background:#70c79e;width:100%;height:100%;transition:width .15s;display:block}.health-chip b{font-size:10px}.hud-right{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:right;background:#ffffffb5;border:1px solid #ffffffa3;border-radius:7px;width:136px;padding:8px 10px}.speed-readout{margin:2px 0 4px;line-height:1}.speed-readout b{font:500 23px var(--mono);color:#464f57}.speed-readout small{color:#9aa1a8;font:9px var(--mono);padding-left:4px}.speed-track span{background:var(--mode-color);width:0}.center-message,.result-card{z-index:3;text-align:center;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffdf;border:1px solid #fff;border-radius:13px;width:min(388px,100% - 36px);padding:26px 26px 23px;position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);box-shadow:0 12px 52px #36424c25}.center-message h2,.result-card h2{color:#30373e;letter-spacing:-.04em;margin:10px 0 6px;font-size:clamp(22px,3vw,30px)}.center-message p,.result-card p{color:#79818a;max-width:300px;margin:0 auto 18px;font-size:11px;line-height:1.8}.start-button{color:#fff;text-align:left;cursor:pointer;background:#343d45;border:0;border-radius:7px;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;min-width:210px;padding:10px 13px;transition:transform .14s,background .14s;display:inline-grid;box-shadow:0 5px 12px #26303924}.start-button:hover{background:#1f2931;transform:translateY(-1px)}.start-button>span{color:var(--mode-color);font-size:12px}.start-button b{font-size:11px;font-weight:600}.start-button i{font:8px var(--mono);color:#a9b1b7;font-style:normal}.result-card[hidden],.center-message[hidden]{display:none}.result-card h2{font:700 27px var(--mono);letter-spacing:.02em}.event-flash{z-index:4;color:var(--mode-color);font:700 25px var(--mono);letter-spacing:.1em;opacity:0;text-shadow:0 2px 10px #fff;pointer-events:none;position:absolute;top:39%;left:50%;transform:translate(-50%,-50%)scale(.86)}.event-flash.show{animation:.65s ease-out flash-in}@keyframes flash-in{0%{opacity:0;transform:translate(-50%,-40%)scale(.82)}25%{opacity:1;transform:translate(-50%,-50%)scale(1.04)}to{opacity:0;transform:translate(-50%,-60%)scale(1)}}.stage-bottom{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;inset:auto 18px 14px}.controls-summary{color:#737c84;align-items:center;gap:6px;font-size:9px;display:flex}.keycap{color:#66717b;font:8px var(--mono);background:#ffffffad;border:1px solid #fff;border-radius:4px;padding:4px 5px;box-shadow:0 1px 2px #35404a10}.keycap.action-key{color:var(--mode-color)}.camera-hint{color:#929aa1;font:8px var(--mono);letter-spacing:.07em}.camera-hint span{padding:0 3px}.webgl-fallback{z-index:9;text-align:center;color:#535c64;background:#e6eaed;place-items:center;padding:20px;font-size:14px;display:grid;position:absolute;inset:0}.webgl-fallback[hidden]{display:none}.bottom-strip{justify-content:space-between;align-items:center;gap:16px;min-height:63px;padding:0 8px;display:flex}.mode-summary{align-items:center;gap:12px;min-width:0;display:flex}.summary-index{color:#9199a0;width:31px;height:31px;font:10px var(--mono);border:1px solid #e0e4e7;border-radius:8px;place-items:center;display:grid}.mode-summary>span:last-child{gap:3px;min-width:0;display:grid}.mode-summary b{font:600 10px var(--mono);letter-spacing:.07em}.mode-summary small{color:#9299a1;white-space:nowrap;text-overflow:ellipsis;font-size:10px;overflow:hidden}.round-actions{align-items:center;gap:14px;display:flex}.round-state{color:#8d969e;font:9px var(--mono);letter-spacing:.06em;align-items:center;gap:6px;display:flex}.round-state i{background:#c8cdd1;border-radius:50%;width:6px;height:6px}.round-state.playing{color:#59a77c}.round-state.playing i{background:#6ec392;box-shadow:0 0 0 3px #e7f5ec}.round-state.result{color:#d48666}.round-state.result i{background:#e5a07f}.reset-button{color:#757e86;cursor:pointer;background:#fff;border:1px solid #e4e8eb;border-radius:6px;padding:7px 9px;font-size:13px}.reset-button span{font:8px var(--mono);margin-left:3px}.touch-controls{z-index:4;pointer-events:none;justify-content:space-between;align-items:end;display:none;position:absolute;inset:auto 15px 50px}.touch-actions{pointer-events:auto;grid-template-rows:40px;grid-template-columns:repeat(2,56px);gap:4px;display:grid}.touch-actions button{color:#53616a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;font:8px var(--mono);background:#ffffffb8;border:1px solid #ffffffa9;border-radius:9px}.touch-actions button:last-child{color:#fff;background:var(--mode-color);border-color:var(--mode-color)}.tap-move-hint{color:#5b6570aa;font:8px var(--mono);white-space:nowrap;pointer-events:none;position:absolute;bottom:2px;left:50%;transform:translate(-50%)}.rope-touch-controls{pointer-events:auto;grid-template-rows:40px;grid-template-columns:repeat(2,55px);gap:4px;display:none}.rope-touch-controls button{color:#58636b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:7px var(--mono);touch-action:none;background:#ffffffb8;border:1px solid #ffffffa9;border-radius:8px}.touch-controls.pendulum .rope-touch-controls{display:grid}.touch-controls button.active{background:#e9edf0;transform:scale(.94)}@media (width<=900px){.app-shell{grid-template-columns:250px minmax(0,1fr)}.mode-panel{padding-inline:10px}.stage-wrap{padding:14px 14px 10px}.stage-top{inset-inline:15px}.stage-hud{inset-inline:13px}}@media (width<=650px){html,body,#app{height:100dvh}.app-shell{grid-template-rows:54px 132px minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid}.topbar{grid-column:1;padding:0 14px}.topbar-center{letter-spacing:.07em;gap:5px;font-size:8px}.topbar-right{gap:7px}.build-tag{display:none}.brand strong{font-size:12px}.brand small{font-size:8px}.mode-panel{border-right:0;border-bottom:1px solid var(--line);grid-row:2;grid-template-columns:1fr;min-height:0;padding:8px 12px;display:grid}.panel-heading{align-items:center;padding:0 3px 6px}.panel-heading h1{display:none}.eyebrow{font-size:8px}.mode-list{flex-direction:row;gap:6px;padding:0 12px 2px 1px;overflow:auto hidden}.mode-card{grid-template-columns:25px 1fr;gap:7px;min-width:145px;max-width:145px;min-height:65px;padding:6px}.mode-num{width:25px;height:25px}.mode-labels b{font-size:9px}.mode-labels small{font-size:8px}.mode-tag{display:none}.difficulty-block{border-top:0;align-items:center;gap:7px;padding:1px 0 0;display:flex}.difficulty-label{white-space:nowrap;gap:5px;margin:0;font-size:8px}.difficulty-label span:last-child{display:none}.difficulty-options{flex:1;gap:4px;max-width:230px}.difficulty-options button{padding:5px 2px;font-size:7px}.stage-wrap{padding:9px 8px max(8px, env(safe-area-inset-bottom));grid-row:3;gap:5px}.stage{border-radius:10px;min-height:0}.stage-top{inset:12px 10px auto}.stage-id{gap:3px}.stage-kicker{font-size:7px}.stage-id strong{font-size:14px}.stage-id>span:last-child{font-size:8px}.objective-pill{gap:5px;max-width:48%;padding:7px 8px}.objective-mark{font-size:14px}.objective-pill small{font-size:7px}.objective-pill b{font-size:8px}.stage-hud{inset:67px 8px auto}.hud-chip{gap:3px;min-width:49px;min-height:38px;padding:5px 6px}.hud-chip small,.speed-label{font-size:7px}.hud-chip b{font-size:10px}.health-chip{min-width:83px}.health-chip b{font-size:9px}.hud-right{width:91px;padding:6px 7px}.speed-readout b{font-size:18px}.speed-readout small{font-size:7px}.center-message,.result-card{width:min(330px,100% - 24px);padding:19px 17px 17px}.message-kicker{font-size:8px}.center-message h2,.result-card h2{font-size:22px}.center-message p,.result-card p{margin-bottom:13px;font-size:10px}.start-button{min-width:190px;padding:9px 10px}.stage-bottom{inset:auto 9px 8px}.controls-summary{gap:4px;font-size:7px}.keycap{padding:3px 4px;font-size:7px}.camera-hint{display:none}.touch-controls{display:flex;inset:auto 10px 33px}.touch-actions,.rope-touch-controls{transform-origin:100% 100%;transform:scale(.86)}.bottom-strip{min-height:45px;padding:0 2px}.summary-index{border-radius:6px;width:26px;height:26px;font-size:9px}.mode-summary{gap:7px}.mode-summary b{font-size:9px}.mode-summary small{max-width:50vw;font-size:8px}.round-actions{gap:6px}.round-state{font-size:7px}.reset-button{padding:5px 7px}.reset-button span{font-size:7px}}@media (height<=640px) and (width>=651px){.mode-panel{padding-top:12px}.panel-heading{padding-bottom:8px}.mode-list{gap:2px}.mode-card{min-height:44px}.stage-wrap{padding-top:10px}.stage-top{top:12px}.stage-hud{top:78px}}[hidden]{display:none!important}.center-message p{white-space:pre-line}.camera-hint{max-width:48%;font-size:9px;line-height:1.5}.touch-actions button{font-size:9px}.health-track{display:none}.mode-card.selected{border-left:3px solid var(--mode-color,#f16f7b)}.extra-stats{color:#424f5a;pointer-events:none;background:#fffc;border-radius:6px;padding:6px 10px;font-size:11px;position:absolute;bottom:56px;left:20px}.extra-stats:empty{display:none}@media (width<=650px){.extra-stats{font-size:9px;bottom:180px;left:10px}.controls-summary{display:none}}