*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#090c12;color:#fff;font-family:Arial,sans-serif}button,select{font:inherit}button{color:#eee;border:1px solid #ffffff40;background:#111b27c9;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}button:active,button.held{background:#bd792fcb;transform:scale(.96)}button:focus-visible{outline:3px solid #ffce87}button:disabled{opacity:.6}#stage{position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}canvas{width:100%;height:100%;display:block}#hud{position:absolute;top:max(15px,env(safe-area-inset-top));left:8%;right:8%;display:flex;align-items:flex-start;gap:25px;pointer-events:none;z-index:3}.fighter{flex:1;min-width:0}.fighter span{font-size:clamp(12px,2vw,23px);font-weight:700;letter-spacing:3px;text-shadow:0 2px 4px #000}.fighter small{font-size:9px;color:#cfbd9e;letter-spacing:1px}.right{text-align:right}.bar{height:clamp(9px,2vh,18px);background:#731c29;border:2px solid #e6b773;transform:skew(-10deg);margin-top:7px;box-shadow:0 2px 10px #0008}.bar i{display:block;width:100%;height:100%;background:linear-gradient(#ffecac,#e4a045);transition:width .1s}.right .bar i{margin-left:auto;background:linear-gradient(#ceffff,#51adb7)}.energy{height:4px;background:#172937;margin-top:4px}.energy i{display:block;background:#66dfef;height:100%;width:0}.right .energy i{margin-left:auto}.wins{color:#efc37e;letter-spacing:6px;margin-top:5px;font-size:13px}.time{text-align:center;width:65px;text-shadow:0 2px 5px #000}.time b{font-family:Georgia,serif;font-size:clamp(28px,5vw,53px);line-height:1}.time small{display:block;font-size:9px;letter-spacing:2px;white-space:nowrap;margin-top:3px}#toolbar{position:absolute;right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));display:flex;gap:5px;z-index:4}#toolbar button{border-radius:6px;padding:6px;font-size:10px}#controls{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:end;pointer-events:none;z-index:3}.pad,.actions{display:flex;gap:9px;align-items:end;pointer-events:auto}.pad button{width:clamp(45px,7vw,80px);height:clamp(45px,7vw,80px);border-radius:22px;font-size:26px;background:#0c182299;backdrop-filter:blur(5px)}.actions{gap:7px}.actions button{width:clamp(43px,6.4vw,73px);height:clamp(43px,6.4vw,73px);border-radius:50%;font-size:clamp(8px,1vw,12px);font-weight:bold;letter-spacing:.5px;box-shadow:inset 0 0 12px #ffffff09,0 3px 8px #0004}.actions small{display:block;font-size:8px;margin-top:3px}.actions .attack{border-color:#eec78c99;background:#50301b99}.actions .special{border-color:#68d9ed99;background:#153a4b99}#message{position:absolute;left:0;right:0;top:35%;text-align:center;font-family:Georgia,serif;font-weight:900;font-size:clamp(25px,7vw,85px);font-style:italic;color:#ffe4ae;text-shadow:0 3px 0 #592820,0 4px 20px #000;pointer-events:none;z-index:3}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#080e19ed,#0b101a9c,#080d18c9);z-index:5;padding:20px;overflow:auto}.card{text-align:center;max-width:560px;width:100%}.eyebrow{font-size:10px;letter-spacing:5px;color:#ddc8a8}h1{font-family:Georgia,serif;font-size:clamp(38px,8vw,90px);line-height:.9;margin:20px 0;letter-spacing:-2px}h1 em{font-weight:400;color:#efc689;letter-spacing:8px}h2{font-family:Georgia,serif;font-size:clamp(27px,5vw,60px);color:#f6d7a2;margin:15px 0}.tag{color:#d6d6dc;font-size:13px}.primary{padding:15px 35px;border-color:#e8ba78;background:linear-gradient(120deg,#c59150,#f0d29c);color:#161a23;font-weight:800;letter-spacing:3px;margin:15px 0}.compact button{display:block;margin:16px auto;padding:12px 28px}.guide{font-size:11px;color:#c3c6ce;line-height:1.8}.note{font-size:10px;color:#8e96a4}.options{font-size:11px;color:#c4c8d0}.options select{background:#151c28;color:#e9cfaa;border:1px solid #5b5360;padding:5px;border-radius:4px;margin-left:5px}#portrait{display:none;position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:11px;background:#0c1425c9;padding:8px;pointer-events:none}#loadError{color:#ffca9e;font-size:12px}[hidden]{display:none!important}@media(orientation:portrait){#portrait{display:block}#hud{left:4%;right:4%;top:55px;gap:10px}.actions{max-width:210px;flex-wrap:wrap;justify-content:flex-end}.actions button{width:48px;height:48px}.pad button{width:48px;height:60px}#controls{bottom:42px}.card{max-width:360px}}@media(max-height:480px){h1{font-size:45px;margin:10px 0}.tag{margin:8px}.primary{padding:10px 30px;margin:8px}.guide{margin:8px}.eyebrow{margin:6px}.note{margin:7px}#toolbar{top:auto;bottom:110px}.actions button{width:48px;height:48px}.pad button{width:55px;height:55px}}
#stage{background:#0b1320}.music-volume{display:flex;align-items:center;width:65px;background:#111b27c9;border-radius:6px;padding:3px}.music-volume input{width:100%;accent-color:#e6ba78}#toolbar{top:auto;bottom:108px}.actions{max-width:450px}.actions button{background-color:#162332bd}.overlay{backdrop-filter:blur(5px)}#portrait{background:transparent;text-shadow:0 1px 4px #000}@media(orientation:portrait){#hud{top:22px}#toolbar{bottom:auto;top:108px;right:12px}.actions{max-width:180px}.actions button{width:49px;height:49px}.music-volume{width:55px}#controls{bottom:45px}#portrait{font-size:10px}.pad{gap:6px}.pad button{width:46px}.bar{height:13px}}@media(orientation:landscape){#controls{bottom:12px}.actions{gap:6px}.actions button{width:clamp(42px,6vw,65px);height:clamp(42px,6vw,65px)}#toolbar{bottom:94px}#hud{left:6%;right:6%}}
button,input,select{-webkit-tap-highlight-color:transparent}#stage{height:100dvh}#toolbar{z-index:4}.actions button{touch-action:none}
/* 3D layers: arena (2D) -> fighters (WebGL) -> effects (2D) */
#game,#gl,#fx{position:absolute;inset:0}#gl,#fx{pointer-events:none}#fx{z-index:2}#gl{z-index:1}