.arena-fullscreen{position:absolute;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:6;min-height:40px;padding:8px 15px;border:1px solid #ffffff40;border-radius:9px;background:#211a30df;color:#fff1df;font:600 12px system-ui;touch-action:manipulation}
.arena-fullscreen:focus-visible{outline:2px solid #a7e7d6;outline-offset:3px}
.arena-touch,.arena-touch-guide,.arena-orientation{display:none}
.touch-enabled[data-touch-player="true"][data-playing="true"] .arena-touch{display:block}
.touch-enabled[data-touch-player="true"] .arena-touch-guide{display:block;color:#b8ccc9;font-size:12px;line-height:1.6;margin:20px auto 0;max-width:320px}
.touch-enabled .controls{display:none}
.arena-touch{position:absolute;inset:0;z-index:4;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-stick{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:126px;height:126px;border:2px solid #d9f4e74d;border-radius:50%;background:#17132666;box-shadow:inset 0 0 22px #b5efdb12;touch-action:none;pointer-events:auto}
.stick-thumb{position:absolute;left:50%;top:50%;width:48px;height:48px;background:#c9e6dc99;border:1px solid #ecfff38c;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.stick-arrows{position:absolute;inset:0;display:grid;place-items:center;font:90px system-ui;color:#d6ebde33;pointer-events:none}
.stick-label{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:600 8px system-ui;letter-spacing:2px;color:#effff1aa;pointer-events:none}
.touch-actions{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px);gap:8px;pointer-events:none}
.touch-actions button{border:1px solid #fff3cd88;background:#292037b3;color:#fff5e4;border-radius:50%;font:600 11px system-ui;touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.touch-actions button[data-key="KeyW"]{background:#557d76bb;border-color:#c3f2e3}
.touch-actions button[data-key="KeyK"]{grid-column:2}
.touch-actions .touch-attack{background:#c58d61bb;border-color:#ffdfb4}
.touch-actions button.is-held{background:#f1dcb8;color:#271e2d;box-shadow:0 0 0 3px #ffffff33}
.touch-enabled .hud{top:62px;bottom:auto;left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right))}
.touch-enabled .fighter strong{font-size:23px}.touch-enabled .fighter>span{font-size:9px}.touch-enabled .fighter>small{font-size:9px}
.touch-enabled .lab-score{top:62px;bottom:auto;gap:4px}.touch-enabled .lab-score span{padding:4px 6px;font-size:10px}
.touch-enabled .sound{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));min-height:40px}
.touch-enabled .pause{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:42px;height:42px;z-index:6}
.touch-enabled #arena{touch-action:none}
.arena-immersive{overflow:hidden!important;overscroll-behavior:none}
.game.arena-expanded{position:fixed;inset:0;z-index:1000;width:100%;height:100vh;height:100dvh;max-width:none;border:0;border-radius:0;margin:0}
.game.arena-expanded #arena{width:100%;height:100%;min-height:0;max-height:none}
.game:fullscreen{width:100%;height:100%;background:#100f19}
.game:-webkit-full-screen{width:100%;height:100%;background:#100f19}
.arena-expanded .overlay{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media(pointer:coarse),(max-width:600px){
 .demo{width:calc(100% - 16px);margin:18px auto}.arena-modes{margin-top:12px!important}
 .arena-modes button{min-height:42px}.metrics{margin-bottom:14px}.metric{padding:0 6px}.metric>span{font-size:6px;letter-spacing:.3px}.metric strong{font-size:16px}
 .lab-options{gap:8px;margin:12px 0}.lab-options select,.lab-options input,.lab-options button{min-height:44px}
 .steering{gap:6px;margin-bottom:14px}.steering-buttons button{min-height:40px}.steering-hint{display:none}
 #arena{height:58vh;height:58svh;min-height:340px;max-height:580px}
 .launch{padding:54px 12px 20px}.launch h1{font-size:36px;margin-bottom:20px}.eyebrow{margin-bottom:16px}
 .touch-enabled .arena-orientation:not(:empty){display:block;position:absolute;top:56px;left:16px;right:16px;z-index:5;margin:0;text-align:center;pointer-events:none;font:10px system-ui;color:#efdfcc;text-shadow:0 1px 5px #000}
 .touch-enabled[data-playing="true"] .arena-orientation{display:none}
}
@media(orientation:landscape) and (max-height:520px){
 .arena-modes{margin-top:8px!important}.demo{margin:12px auto}.metrics{margin-bottom:10px}.steering-label,.steering-hint{display:none}
 #arena{height:80vh;height:80svh;min-height:280px;max-height:none}
 .launch{padding:45px 12px 10px}.launch h1{font-size:34px;margin-bottom:14px}.eyebrow{margin-bottom:10px}
 .play{padding:12px 26px}.load-status{margin-top:10px}.arena-touch-guide,.lab-instructions{margin:12px auto 0!important}
 .arena-download{margin-top:8px}.touch-stick{width:112px;height:112px;bottom:max(14px,env(safe-area-inset-bottom))}
 .touch-actions{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(2,54px);gap:7px;bottom:max(12px,env(safe-area-inset-bottom))}
 .touch-enabled .lab-score span{font-size:9px}.touch-enabled .lab-score small{font-size:8px}
}
