:root{--sat:env(safe-area-inset-top,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--bg:#0b0e12;--panel:#141a21f0;--panel2:#1c242e;--text:#e8e6df;--muted:#9aa5b4;--accent:#ff6a3d;--good:#7ee0a1;--line:#ffffff1a;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{overscroll-behavior:none;background:var(--bg);width:100%;height:100%;color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}#app{touch-action:none;position:fixed;inset:0}#game{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}button,input,select,textarea{font-family:inherit}#hud{top:calc(var(--sat) + 6px);left:calc(var(--sal) + 8px);right:calc(var(--sar) + 8px);pointer-events:none;z-index:7;align-items:center;gap:10px;font-size:13px;font-weight:600;display:none;position:absolute}#hud.show{display:flex}#hud .hud-btn{pointer-events:auto;border:1px solid var(--line);width:38px;height:30px;color:var(--text);touch-action:manipulation;background:#00000059;border-radius:8px;padding:0;font-size:14px}#hud .timebar{background:#ffffff1f;border-radius:6px;flex:1;height:10px;position:relative;overflow:hidden}#hud .timefill{transform-origin:0;background:linear-gradient(90deg,#ffb13d,#ff6a3d);width:100%;position:absolute;inset:0 auto 0 0}#hud .timebar.low .timefill{background:#ff4f4f}#hud .label,#hud .time,#hud .gold{text-shadow:0 1px 2px #0009;white-space:nowrap}#hud .time{font-variant-numeric:tabular-nums;text-align:right;min-width:44px}#hud .gold:before{content:"◆ ";color:#f4c542}.hint{left:50%;top:calc(var(--sat) + 44px);text-align:center;pointer-events:none;z-index:4;background:#00000073;border-radius:10px;max-width:min(80vw,640px);padding:6px 12px;font-size:13px;transition:opacity .6s;position:absolute;transform:translate(-50%)}#ui{z-index:10;pointer-events:none;position:absolute;inset:0}#ui>.screen{pointer-events:auto;padding:calc(var(--sat) + 12px) calc(var(--sar) + 16px) calc(var(--sab) + 12px) calc(var(--sal) + 16px);-webkit-overflow-scrolling:touch;touch-action:pan-y;-webkit-backdrop-filter:blur(3px);box-sizing:border-box;background:#080a0eb8;flex-direction:column;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}#ui>.screen.solid{background:radial-gradient(at 30% 20%,#1c2530 0%,#0b0e12 70%)}.screen h1{letter-spacing:.04em;margin:2vh 0 0;font-size:clamp(34px,8vh,64px);font-weight:800}.screen h1 .accent{color:var(--accent)}.screen h2{margin:4px 0 10px;font-size:22px}.screen .tagline{color:var(--muted);margin:4px 0 3vh}.screen p{max-width:640px;color:var(--muted);margin:6px 0;line-height:1.45}.menu{flex-direction:column;gap:8px;min-width:240px;display:flex}.row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;touch-action:manipulation;border-radius:12px;min-height:44px;padding:11px 18px;font-size:16px;font-weight:600}.btn:hover{border-color:#ffffff4d}.btn:focus-visible,.btn.focus{outline:2px solid var(--accent);outline-offset:2px}.btn.primary{background:var(--accent);border-color:var(--accent);color:#111}.btn.small{border-radius:9px;min-height:34px;padding:6px 10px;font-size:13px}.btn:disabled{opacity:.4;cursor:default}.btn.danger{color:#ff8a80}.notice{background:#2a3a2e;border:1px solid #4f8a5e;border-radius:10px;margin:8px 0;padding:8px 12px}.grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;width:min(100%,980px);display:grid}.card{background:var(--panel);border:1px solid var(--line);text-align:left;color:var(--text);border-radius:14px;flex-direction:column;gap:6px;padding:12px;font-size:14px;display:flex}button.card{cursor:pointer}.card.locked{opacity:.45}.card .title{font-size:15px;font-weight:700}.card .meta{color:var(--muted);font-size:12px}.dots{gap:4px;display:flex}.dots span{background:#ffffff26;border-radius:50%;width:10px;height:10px}.dots span.on{background:var(--good)}.table{border-collapse:collapse;width:min(100%,720px);font-size:14px}.table td,.table th{border-bottom:1px solid var(--line);text-align:left;padding:7px 6px}.table th{color:var(--muted);font-weight:600}.stats{flex-wrap:wrap;justify-content:center;gap:18px;margin:8px 0 14px;display:flex}.stat{text-align:center}.stat .v{font-variant-numeric:tabular-nums;font-size:28px;font-weight:800}.stat .k{color:var(--muted);font-size:12px}.pb{color:var(--good);font-weight:700}.settings{flex-direction:column;gap:4px;width:min(100%,560px);display:flex}.setting{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:8px 4px;font-size:15px;display:flex}.setting input[type=range]{width:160px}.setting select{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:4px;font-size:15px}.section{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:12px;font-size:12px}.back{top:calc(var(--sat) + 10px);left:calc(var(--sal) + 12px);position:absolute}.grid.avatars{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.avatar-card{text-align:center;align-items:center}.avatar-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.avatar-preview{border-radius:10px;width:120px;height:96px;display:block}.avatar-plus{border:2px dashed var(--line);width:120px;height:96px;color:var(--muted);border-radius:10px;justify-content:center;align-items:center;font-size:40px;display:flex}.creator{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:16px;width:min(100%,900px);display:flex}.creator-preview{z-index:1;position:sticky;top:0}.creator-preview .avatar-preview{width:240px;height:180px}.creator-controls{flex-direction:column;flex:300px;max-width:520px;display:flex}.creator-controls input[type=text]{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;max-width:180px;padding:4px 6px;font-size:15px}.setting .inline{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.setting input[type=color]{border:1px solid var(--line);background:0 0;border-radius:6px;width:44px;height:30px;padding:0}.setting input[type=color]:disabled{opacity:.35}.challenge-who{justify-content:center;display:flex}.stats-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.medal{font-size:18px}.star{color:#f4c542;margin-left:2px}h2.celebrate{animation:.9s cubic-bezier(.2,1.6,.4,1) both celebrate}@keyframes celebrate{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.title-card{z-index:5;pointer-events:none;opacity:0;text-shadow:0 2px 12px #000000b3;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.title-card.show{animation:1.8s both title-card}.title-card .kicker{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:13px}.title-card .name{color:var(--text);font-size:clamp(22px,5vw,40px);font-weight:800}@keyframes title-card{0%{opacity:0;transform:translateY(8px)}15%,70%{opacity:1;transform:none}to{opacity:0}}.toast{left:50%;bottom:calc(var(--sab) + 20px);border:1px solid var(--line);z-index:50;background:#222a33;border-radius:10px;padding:10px 16px;font-size:14px;position:fixed;transform:translate(-50%)}.touch-root{z-index:6;touch-action:none;--touch-opacity:.35;position:absolute;inset:0}.touch-btn{opacity:var(--touch-opacity);color:#fff;pointer-events:none;box-sizing:border-box;background:#ffffff14;border:2px solid #ffffff8c;border-radius:50%;justify-content:center;align-items:center;font-size:26px;transition:opacity 50ms;display:flex;position:absolute}.touch-btn.pressed{opacity:calc(var(--touch-opacity) + .35);background:#ff6a3d8c;border-color:#ff6a3d}.touch-root.layout-b .touch-left,.touch-root.layout-b .touch-right,.touch-root.layout-s .touch-btn,.touch-root.layout-s .touch-jumpzone{display:none}.touch-split{pointer-events:none;box-sizing:border-box;width:50%;opacity:var(--touch-opacity);display:none;position:absolute;top:0;bottom:0}.touch-root.layout-s .touch-split{display:block}.touch-split-left{border-right:1px dashed #ffffff2e;left:0}.touch-split-right{right:0}.touch-split .split-arrow{bottom:calc(var(--sab) + 18px);color:#fff;font-size:30px;position:absolute}.touch-split-left .split-arrow{left:calc(var(--sal) + 28px)}.touch-split-right .split-arrow{right:calc(var(--sar) + 28px)}.touch-split .split-jump{bottom:calc(var(--sab) + 62px);color:#fffc;font-size:12px;position:absolute}.touch-split-left .split-jump{left:calc(var(--sal) + 16px)}.touch-split-right .split-jump{right:calc(var(--sar) + 16px)}.touch-split.pressed{background:#ff6a3d06}.touch-split.pressed .split-arrow,.touch-root.jumping .touch-split.pressed .split-jump{color:#ff6a3d}.touch-jumpzone{pointer-events:none;background:#fff0;position:absolute}.touch-jumpzone.pressed{background:#ff6a3d0d}.touch-pad,.touch-knob{pointer-events:none;box-sizing:border-box;border-radius:50%;display:none;position:absolute}.touch-pad{width:80px;height:80px;opacity:var(--touch-opacity);border:2px dashed #fff6}.touch-knob{width:36px;height:36px;opacity:var(--touch-opacity);background:#ffffff73}.touch-knob.pressed{opacity:calc(var(--touch-opacity) + .35);background:#ff6a3d}#rotate{z-index:100;color:var(--text);text-align:center;background:#0b0e12;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;font-size:18px;display:none;position:fixed;inset:0}#rotate .phone{border:3px solid var(--text);border-radius:9px;width:46px;height:80px;animation:2.2s ease-in-out infinite rot}@keyframes rot{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}body.force-rotate #rotate{display:flex}.debug-panel{top:calc(var(--sat) + 44px);right:calc(var(--sar) + 8px);border:1px solid var(--line);z-index:30;touch-action:pan-y;background:#000000c7;border-radius:8px;width:290px;max-height:calc(100% - 60px);padding:8px;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;position:absolute;overflow-y:auto}.debug-panel .slider{grid-template-columns:110px 1fr 54px;align-items:center;gap:4px;display:grid}.debug-panel input[type=range]{width:100%}.debug-panel pre{white-space:pre-wrap;margin:0 0 6px}.editor{z-index:8;pointer-events:none;position:absolute;inset:0}.editor .bar{pointer-events:auto;border:1px solid var(--line);touch-action:manipulation;background:#0a0d11e6;border-radius:10px;flex-wrap:wrap;gap:4px;padding:4px;display:flex;position:absolute}.editor .top{top:calc(var(--sat) + 4px);left:calc(var(--sal) + 4px);right:calc(var(--sar) + 4px);align-items:center}.editor .palette{left:calc(var(--sal) + 4px);right:calc(var(--sar) + 4px);bottom:calc(var(--sab) + 4px);max-height:34vh;overflow-y:auto}.editor .pal{border:1px solid var(--line);cursor:pointer;width:38px;height:38px;color:var(--text);background:#11161c;border-radius:7px;justify-content:center;align-items:center;padding:0;font-size:10px;display:flex}.editor .pal.sel{outline:2px solid var(--accent)}.editor .pal canvas{pointer-events:none;width:30px;height:30px}.editor .props{pointer-events:auto;right:calc(var(--sar) + 4px);top:calc(var(--sat) + 56px);border:1px solid var(--line);background:#0a0d11f0;border-radius:10px;width:220px;padding:8px;font-size:13px;display:none;position:absolute}.editor .props.show{display:block}.editor .props label{justify-content:space-between;align-items:center;gap:6px;margin:4px 0;display:flex}.editor .props input,.editor .props select{width:110px;color:var(--text);border:1px solid var(--line);background:#11161c;border-radius:6px;padding:3px}.editor .status{color:var(--muted);padding:0 6px;font-size:12px}.editor .status.bad{color:#ff8a80}textarea.io{width:min(92vw,720px);height:40vh;color:var(--text);border:1px solid var(--line);-webkit-user-select:text;user-select:text;background:#0d1116;border-radius:10px;font:11px ui-monospace,Menlo,monospace}
