*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
#app,#app canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#hud{position:fixed;left:10px;top:10px;padding:8px 12px;background:rgba(0,10,20,.45);border-radius:8px;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;color:#9fffb0;text-shadow:0 1px 2px #000;pointer-events:none;white-space:pre;min-width:190px}
#hud .w{color:#ffcf4a}#hud .r{color:#ff6060}
#msg{position:fixed;left:50%;top:22%;transform:translateX(-50%);text-align:center;font-size:20px;font-weight:600;text-shadow:0 2px 6px #000;pointer-events:none;max-width:90vw}
#msg .big{font-size:30px;color:#ff5a4a}#msg button{pointer-events:auto;margin-top:12px}
#warn{position:fixed;left:50%;top:12px;transform:translateX(-50%);padding:4px 14px;border-radius:6px;background:#c01818;font-weight:800;letter-spacing:2px;display:none;pointer-events:none}
#topbar{position:fixed;right:8px;top:8px;display:flex;gap:6px;z-index:5}
#topbar button{min-width:40px;height:36px;border:0;border-radius:8px;background:rgba(0,0,0,.45);color:#fff;font-size:15px;cursor:pointer}
#topbar button:active{background:rgba(255,255,255,.25)}
.overlay{position:fixed;inset:0;background:rgba(5,15,30,.72);display:flex;align-items:center;justify-content:center;z-index:10;padding:12px;overflow:auto}
.card{background:linear-gradient(160deg,#18324c,#0e1c2c);border:1px solid #2d5170;border-radius:16px;padding:22px 26px;max-width:760px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.card h1{margin:0;font-size:30px}.card h1 span{color:#7fc4ff;font-weight:400}.sub{color:#9bb8d0;margin:4px 0 16px}
.starts{display:flex;gap:10px;flex-wrap:wrap}.starts button{flex:1;min-width:150px;padding:14px;font-size:17px;border-radius:12px;border:1px solid #3d6e96;background:#1d4466;color:#fff;cursor:pointer;line-height:1.3}
.starts button:hover{background:#275a86}.starts small{color:#a8c6de;font-size:12px}
.opts{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.opts label{font-size:13px;color:#a8c6de;display:flex;flex-direction:column;gap:4px}
select{background:#0d2033;color:#fff;border:1px solid #3d6e96;border-radius:8px;padding:6px}
.row{display:flex;gap:10px}.card button{cursor:pointer}
.row button,.help>button,#msg button{padding:9px 16px;border-radius:9px;border:1px solid #3d6e96;background:#1d4466;color:#fff;font-size:15px}
.fine{color:#6f8ba3;font-size:12px;margin:14px 0 0}
.help h2{margin-top:0}.cols{display:flex;gap:18px;flex-wrap:wrap}.cols table{flex:1;min-width:280px;border-collapse:collapse;font-size:13px}
.cols th{text-align:left;color:#7fc4ff;padding:8px 0 4px}.cols td{padding:3px 6px 3px 0;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.06)}.cols td:first-child{color:#ffd77a;white-space:nowrap}
.tips{font-size:12.5px;color:#b8cfe2;line-height:1.5}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0b1a2a;font-size:20px;z-index:20}
#panel2d{position:fixed;left:8px;bottom:0;width:min(60vw,640px);pointer-events:none;opacity:.96}
#panel2d canvas{width:100%;height:auto;display:block;border-radius:10px 10px 0 0}
#touch{position:fixed;inset:0;pointer-events:none;z-index:4}
#stick{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:28px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);pointer-events:auto}
#knob{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border-radius:50%;background:rgba(255,255,255,.55)}
#thr{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:28px;width:62px;height:190px;border-radius:12px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);pointer-events:auto;overflow:hidden}
#thrFill{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(90,200,255,.5)}
#thrLbl{position:absolute;top:6px;width:100%;text-align:center;font-size:12px;font-weight:700}
#rud{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(38vw,260px);height:44px;border-radius:22px;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.35);pointer-events:auto}
#rudKnob{position:absolute;top:4px;left:50%;width:34px;height:32px;margin-left:-17px;border-radius:16px;background:rgba(255,255,255,.55)}
#tbtns{position:absolute;right:max(92px,calc(env(safe-area-inset-right) + 92px));bottom:28px;display:grid;grid-template-columns:repeat(2,74px);gap:6px;pointer-events:auto}
#tbtns button{height:40px;border:0;border-radius:9px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:700}
#tbtns button:active,#tbtns button.on{background:rgba(255,200,60,.55)}
@media (max-width:700px){#hud{font-size:11px;min-width:0;padding:6px 8px}.card{padding:16px}.card h1{font-size:24px}#topbar button{min-width:34px;height:32px;font-size:13px}}