:root{--bg:#07111f;--text:#eaf4ff;--pad:clamp(38px,8vmin,58px);--gap:clamp(4px,1.2vmin,8px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;touch-action:none;overscroll-behavior:none}#wrap{position:fixed;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden}canvas{position:absolute;inset:0;display:block;width:100%;height:100%}#hud{position:absolute;top:max(6px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));display:flex;justify-content:space-between;gap:6px;z-index:4;pointer-events:none}.pill,#zapName{background:rgba(10,18,28,.72);border:1px solid rgba(255,255,255,.12);border-radius:clamp(9px,2vmin,14px);padding:clamp(5px,1.4vmin,9px) clamp(7px,1.7vmin,11px);backdrop-filter:blur(8px);font-size:clamp(10px,1.8vmin,14px)}#hud .pill{min-width:0;max-width:58vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#zapName{position:absolute;top:clamp(42px,8vmin,58px);left:50%;transform:translateX(-50%);z-index:4;max-width:80vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(9px,1.6vmin,12px)}#message{position:absolute;inset:0;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));z-index:8;pointer-events:none}#card{width:min(520px,94vw);max-height:88dvh;overflow:auto;padding:clamp(14px,4vmin,22px);text-align:center;border-radius:clamp(16px,4vmin,24px);background:rgba(6,13,22,.88);border:1px solid rgba(255,255,255,.12)}#card h1{font-size:clamp(24px,7vmin,44px);margin:.2em 0}#card p{font-size:clamp(12px,2.2vmin,16px);line-height:1.4}#startBtn{pointer-events:auto;border:0;border-radius:999px;padding:clamp(9px,2vmin,12px) clamp(14px,3vmin,18px);background:linear-gradient(#7cf0ff,#4dbfff);color:#03111d;font-weight:800;font-size:clamp(12px,2vmin,15px)}#controls{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));z-index:6;display:grid;grid-template-columns:repeat(3,var(--pad));grid-template-rows:repeat(3,var(--pad));gap:var(--gap)}.pad{width:var(--pad);height:var(--pad);padding:0;border:1px solid rgba(255,255,255,.14);border-radius:clamp(11px,2.5vmin,18px);background:rgba(12,19,31,.72);color:#fff;font-size:clamp(16px,4vmin,22px);touch-action:none}.pad.down{background:rgba(77,191,255,.25)}#controls i{visibility:hidden}#graphicLab{position:absolute;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:6;display:flex;gap:clamp(4px,1vmin,8px);flex-wrap:wrap;justify-content:flex-end;align-items:center;pointer-events:auto;font-size:clamp(9px,1.7vmin,12px);max-width:min(560px,calc(100vw - (var(--pad) * 3 + var(--gap) * 2 + 32px)))}#graphicLab label{display:flex;align-items:center;gap:4px;min-width:0}#graphicLab select{max-width:clamp(105px,20vw,190px);background:#07111f;color:#eaf4ff;border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:clamp(4px,1vmin,6px);font-size:inherit}#graphicLab input{accent-color:#6fe3ff}@media(max-width:760px),(max-height:520px){#graphicLab{top:auto;right:max(6px,env(safe-area-inset-right));bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--pad)*3 + var(--gap)*2 + 8px);left:auto;max-width:min(58vw,360px);padding:5px 7px}#graphicLab label{max-width:100%}#graphicLab select{max-width:24vw}#zapName{max-width:65vw}}@media(max-width:430px){#graphicLab{max-width:52vw;display:grid;justify-items:end}#graphicLab label{font-size:9px}#graphicLab select{max-width:31vw;padding:3px}#hud{font-size:10px}#zapName{top:46px}}@media(max-height:360px){:root{--pad:clamp(32px,14vh,44px)}#zapName{display:none}#graphicLab{bottom:max(6px,env(safe-area-inset-bottom));max-width:44vw}#graphicLab label:last-child{display:none}}
#tiltLab{position:absolute;right:max(8px,env(safe-area-inset-right));top:clamp(76px,12vmin,92px);z-index:7;display:flex;gap:6px;align-items:center;pointer-events:auto;max-width:min(430px,70vw)}#tiltLab button{border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:6px 9px;background:#0b2033;color:#eaf4ff;font-weight:700;font-size:clamp(9px,1.7vmin,12px)}#tiltLab button:disabled{opacity:.4}#tiltStatus{font-size:clamp(9px,1.6vmin,12px);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:600px){#tiltLab{top:auto;right:max(6px,env(safe-area-inset-right));bottom:calc(max(8px,env(safe-area-inset-bottom)) + var(--pad)*3 + var(--gap)*2 + 76px);max-width:60vw;flex-wrap:wrap;justify-content:flex-end}#tiltStatus{width:100%;text-align:right}}@media(max-height:420px){#tiltLab{top:42px;bottom:auto;right:6px;max-width:52vw}#tiltStatus{display:none}}
#fieldLab{position:absolute;right:12px;top:116px;z-index:6;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:min(620px,calc(100vw - 24px))}#fieldLab select{max-width:190px}#fieldLab button{border:1px solid rgba(255,255,255,.18);background:rgba(20,45,65,.9);color:#fff;border-radius:9px;padding:6px 9px}@media(max-width:700px){#fieldLab{top:148px;font-size:11px;right:8px}#fieldLab select{max-width:145px}}

/* v8 mobile optimization layer */
#mobileMenuBtn{display:none;position:absolute;right:max(8px,env(safe-area-inset-right));top:calc(max(6px,env(safe-area-inset-top)) + 42px);z-index:10;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 11px;background:rgba(7,17,31,.88);color:#eaf4ff;font-weight:800;touch-action:manipulation}
#mobileLabs{display:contents}#orientationHint{display:none;position:absolute;inset:auto 50% max(8px,env(safe-area-inset-bottom)) auto;transform:translateX(50%);z-index:12;padding:7px 10px;border-radius:999px;background:rgba(6,13,22,.82);font-size:11px;pointer-events:none;white-space:nowrap}
@media (pointer:coarse),(max-width:700px){
 :root{--pad:clamp(50px,15vw,64px);--gap:clamp(6px,2vw,10px)}
 #mobileMenuBtn{display:block}#mobileLabs{display:none}body.mobile-labs-open #mobileLabs{display:block}
 #fieldLab,#graphicLab,#tiltLab{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));max-width:none;width:auto;background:rgba(6,13,22,.94);backdrop-filter:blur(12px)}
 #fieldLab{top:calc(max(6px,env(safe-area-inset-top)) + 86px);bottom:auto;justify-content:center}
 #graphicLab{top:calc(max(6px,env(safe-area-inset-top)) + 142px);bottom:auto;justify-content:center;display:flex}
 #tiltLab{top:calc(max(6px,env(safe-area-inset-top)) + 202px);bottom:auto;justify-content:center;display:flex}
 #fieldLab select,#graphicLab select{max-width:42vw;min-height:36px}#fieldLab button,#tiltLab button{min-height:36px}
 #controls{bottom:max(12px,env(safe-area-inset-bottom));left:max(12px,env(safe-area-inset-left))}.pad{min-width:48px;min-height:48px;-webkit-tap-highlight-color:transparent}
 #zapName{top:calc(max(6px,env(safe-area-inset-top)) + 45px);max-width:52vw;left:max(8px,env(safe-area-inset-left));transform:none}
 #hud{top:max(6px,env(safe-area-inset-top))}.pill{backdrop-filter:blur(6px)}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){#orientationHint{display:block}#controls{--pad:44px;--gap:5px}#zapName{display:none}#mobileMenuBtn{top:max(6px,env(safe-area-inset-top))}}
@media (max-width:360px){:root{--pad:50px}.pill,#zapName{font-size:9px}#fieldLab,#graphicLab,#tiltLab{gap:4px;padding:5px}#graphicLab label:nth-child(2){display:none}}

/* v9 interchangeable D-pad / analog joystick */
#controlModeBtn{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--pad)*3 + var(--gap)*2 + 10px);z-index:8;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 11px;background:rgba(7,17,31,.88);color:#eaf4ff;font-weight:800;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#joystick{--joy-size:clamp(132px,38vw,178px);--knob-size:clamp(54px,15vw,72px);display:none;position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));width:var(--joy-size);height:var(--joy-size);z-index:7;border-radius:50%;border:2px solid rgba(124,240,255,.35);background:radial-gradient(circle,rgba(77,191,255,.13) 0 28%,rgba(12,19,31,.72) 29% 100%);box-shadow:inset 0 0 28px rgba(111,227,255,.08),0 8px 24px rgba(0,0,0,.25);touch-action:none;-webkit-tap-highlight-color:transparent}
#joystick::before,#joystick::after{content:"";position:absolute;background:rgba(255,255,255,.12);pointer-events:none}#joystick::before{left:50%;top:12%;bottom:12%;width:1px}#joystick::after{top:50%;left:12%;right:12%;height:1px}
#joystickKnob{position:absolute;left:50%;top:50%;width:var(--knob-size);height:var(--knob-size);transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,255,255,.7);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(111,227,255,.82) 28%,rgba(28,118,200,.9) 75%);box-shadow:0 0 24px rgba(111,227,255,.55);pointer-events:none;will-change:transform}
body.joystick-mode #controls{display:none}body.joystick-mode #joystick{display:block}body.joystick-mode #controlModeBtn{background:rgba(77,191,255,.24);border-color:rgba(124,240,255,.65)}
@media(pointer:fine) and (min-width:701px){#controlModeBtn{opacity:.75}}
@media(pointer:coarse),(max-width:700px){#controlModeBtn{min-height:44px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:500px){#joystick{--joy-size:118px;--knob-size:52px}#controlModeBtn{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 126px)}}