html,body{touch-action:none;background:#000;height:100%;margin:0;overflow:hidden}body{color:#dfe6ea;-webkit-user-select:none;user-select:none;font-family:Courier New,ui-monospace,monospace}#app{position:fixed;top:0;bottom:0;left:0;right:0}#app canvas.gl{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;position:absolute;top:0;bottom:0;left:0;right:0}#hud{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.timer{text-align:center;background:#06080ad1;border:2px solid #c9d1d6;border-radius:6px;min-width:104px;padding:4px 14px 5px;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 0 0 2px #000}.timer .t{letter-spacing:2px;font-size:30px;font-weight:700;line-height:1}.timer .phase{letter-spacing:3px;color:#c9d1d6;margin-top:3px;font-size:12px;font-weight:700}.mini{background:#040608cc;border:2px solid #9aa3a9;padding:4px;position:absolute;top:12px;right:12px}.mini canvas{width:128px;height:80px;image-rendering:pixelated;display:block}.danger{opacity:0;color:#fc3;font-size:22px;position:absolute;top:4px;left:-30px}.danger.l1{opacity:1}.danger.l2{opacity:1;color:#ff3b2b;animation:.5s steps(2,end) infinite blink}.danger.l3{opacity:1;color:#ff3b2b;animation:.12s infinite shake}@keyframes blink{50%{opacity:.2}}@keyframes shake{0%{transform:translate(1px)}50%{transform:translate(-1px,1px)}to{transform:translateY(-1px)}}.quality{color:#6c767c;font-size:11px;position:absolute;top:10px;left:12px}.help{color:#5d676d;font-size:11px;position:absolute;bottom:8px;left:12px}.hint{white-space:nowrap;background:#0009;border:1px solid #39424a;padding:4px 10px;font-size:14px;font-weight:700;transition:opacity .2s;position:absolute;bottom:104px;left:50%;transform:translate(-50%)}.slots{gap:10px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.slot{background:#080a0cd9;border:2px solid #59636a;border-radius:4px;justify-content:center;align-items:center;width:62px;height:62px;display:flex;position:relative}.slot.sel{border-color:#e1c88d}.slot.off .icon{opacity:.35}.slot .icon{width:40px;height:40px;image-rendering:pixelated}.slot span{color:#c9d1d6;font-size:12px;font-weight:700;position:absolute;bottom:-18px}.labels .name{color:#e9eef2;text-shadow:0 0 3px #000,1px 1px #000;white-space:nowrap;font-size:13px;font-weight:700;transition:opacity .15s;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.joy-base{opacity:.55;pointer-events:none;background:#ffffff0d;border:2px solid #ffffff2e;border-radius:50%;width:120px;height:120px;position:absolute;bottom:30px;left:30px}.joy-base.on{opacity:1;bottom:auto}.joy-knob{background:#ffffff38;border-radius:50%;width:44px;height:44px;position:absolute;top:36px;left:36px}.touch-btns{flex-direction:column;gap:12px;display:flex;position:absolute;bottom:26px;right:18px}.tbtn{color:#dfe6ea;pointer-events:auto;touch-action:none;background:#0a0c0e99;border:2px solid #ffffff4d;border-radius:50%;width:74px;height:74px;font:700 12px Courier New,monospace}@media (max-width:700px){.timer{min-width:84px;padding:3px 10px;top:8px}.timer .t{font-size:24px}.mini canvas{width:96px;height:60px}.mini{top:8px;right:8px}.slots{bottom:16px}.slot{width:50px;height:50px}.slot .icon{width:32px;height:32px}.hint{font-size:12px;bottom:90px}.help{display:none}.quality{top:6px;left:8px}}body.touch .help{display:none}@media (max-height:500px){.help{display:none}.timer{top:6px}.timer .t{font-size:22px}.slots{bottom:12px}.slot{width:46px;height:46px}.slot .icon{width:30px;height:30px}.hint{bottom:76px}}.ghost-indicator{color:#f44;opacity:0;text-shadow:0 0 8px #ff3232cc,0 0 16px #ff000080;pointer-events:none;z-index:100;font-size:28px;font-weight:700;transition:opacity .15s;position:fixed;top:0;left:0}.audio-ctrl{pointer-events:auto;align-items:center;gap:8px;display:flex;position:absolute;bottom:8px;right:12px}.mute-btn{color:#dfe6ea;cursor:pointer;background:#080a0cd9;border:1px solid #59636a;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:16px;display:flex}.mute-btn:hover{border-color:#8a949c}.vol-slider{-webkit-appearance:none;appearance:none;cursor:pointer;background:#59636a99;border-radius:3px;outline:none;width:80px;height:6px}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;cursor:pointer;background:#c9d1d6;border:2px solid #59636a;border-radius:50%;width:14px;height:14px}.vol-slider::-moz-range-thumb{cursor:pointer;background:#c9d1d6;border:2px solid #59636a;border-radius:50%;width:14px;height:14px}.breath-bar{opacity:0;background:#00000080;border:1px solid #39424a;border-radius:4px;width:120px;height:8px;transition:opacity .2s;position:absolute;bottom:92px;left:50%;overflow:hidden;transform:translate(-50%)}.breath-bar.visible{opacity:1}.breath-fill{background:linear-gradient(90deg,#4a8cd1 0%,#6ab4f7 100%);width:100%;height:100%;transition:width .1s linear}.breath-bar.holding .breath-fill{background:linear-gradient(90deg,#d14a4a 0%,#f76a6a 100%)}.breath-bar.cooldown .breath-fill{background:linear-gradient(90deg,#7a7a4a 0%,#a8a86a 100%)}.tbtn.breath-btn{font-size:10px}.tbtn.breath-btn:active{background:#d14a4a99}@media (max-width:700px){.audio-ctrl{bottom:6px;right:6px}.vol-slider{width:60px}.mute-btn{width:28px;height:28px;font-size:14px}.breath-bar{width:100px;bottom:78px}}@media (max-height:500px){.audio-ctrl{bottom:4px}.breath-bar{bottom:64px}}