*{box-sizing:border-box}html,body{margin:0;height:100%;background:#0b111c;color:#e8f3f4;font-family:Arial,sans-serif}body{display:flex;flex-direction:column;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:bold 12px Arial,sans-serif;background:#192b3c;color:#dceff2;border:1px solid #364e60;border-radius:8px;padding:12px;cursor:pointer}button:disabled{opacity:.4}button:focus,a:focus,input:focus{outline:2px solid #95efd1;outline-offset:2px}a{color:#b7dfd8;text-decoration:none}header{height:56px;flex-shrink:0;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #25303f;background:#101824}header a{font-size:12px}header span{margin-left:auto;font:9px monospace;color:#ffbd78}header span.online{color:#8aebbe}header button{margin-left:14px;padding:10px 12px;font-size:11px}main{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 18px 8px;width:100%;max-width:560px;margin:0 auto}.identity{display:flex;align-items:center;min-height:88px;padding:0 8px;background:#121d2c;border:1px solid #2c394b;border-radius:12px}.identity img{width:64px;height:86px;object-fit:contain;image-rendering:pixelated;margin-right:12px}.identity div{flex:1;min-width:0}.identity small{font:9px monospace;letter-spacing:1.5px;color:#a1becd}.identity h1{font-size:25px;letter-spacing:-.8px;margin:6px 0;color:#ff4f98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.identity p{font:10px monospace;line-height:1.4;color:#a3c0cc;margin:0}.identity>strong{font:bold 17px monospace;color:#f6d295;margin:0 8px 0 10px}.meters{display:flex;margin:16px 2px}.meters>div{width:50%;padding-right:18px;font:9px monospace;letter-spacing:1px;color:#a1b9c7}.meters>div:last-child{padding:0}.meters b{float:right;letter-spacing:0}.meters i{display:block;height:6px;border-radius:3px;overflow:hidden;background:#203344;margin-top:8px}.meters em{display:block;width:100%;height:100%;background:#85e6bd}.meters #power{width:0;background:#ab85ff}#weapon{margin:0;padding:10px 12px;background:#111e2c;border-left:2px solid #67cec5;font:10px monospace;line-height:1.6;color:#d5f3f1}#weapon span{display:block;color:#849eb0;font-size:9px}#controls{flex:1;position:relative;display:flex;flex-direction:column;min-height:320px;margin-top:12px;user-select:none;-webkit-user-select:none;touch-action:none}.control-deck{display:flex;align-items:center;justify-content:space-between;flex:1;min-height:240px;padding:12px 0 20px}.move-area{width:47%;height:276px;text-align:center}.combat-area{width:49%;height:276px}.control-label{font:9px monospace;letter-spacing:1.6px;color:#7f9cac;text-align:center;margin:0 0 18px}.joystick{display:block;position:relative;width:180px;height:180px;max-width:100%;border-radius:50%;margin:28px auto 0;padding:0;background:radial-gradient(circle,#172b3d 0,#0b1522 59%,#203247 60%,#111e2d 67%,#2e455b 69%,#101925 70%);border:1px solid #41566a;box-shadow:0 7px 0 #050a12,inset 0 2px 3px rgba(108,129,144,.2);touch-action:none;cursor:grab}.joystick>span{pointer-events:none}.axis{position:absolute;background:#304457;opacity:.55}.axis.horizontal{height:1px;left:17%;top:50%;width:66%}.axis.vertical{width:1px;top:17%;left:50%;height:66%}.joystick .north,.joystick .south,.joystick .west,.joystick .east{position:absolute;font-size:9px;color:#547b91;line-height:12px}.north{top:15px;left:50%;margin-left:-5px}.south{bottom:15px;left:50%;margin-left:-5px}.west{left:15px;top:50%;margin-top:-6px}.east{right:15px;top:50%;margin-top:-6px}.stick{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:linear-gradient(145deg,#517a8e,#203547 70%);border:2px solid #7098ac;box-shadow:0 5px 0 #060d16,0 9px 15px rgba(0,0,0,.5),inset 0 2px 0 rgba(164,205,221,.33);transition:transform .12s ease-out}.stick i{position:absolute;left:23%;top:23%;width:54%;height:54%;border:1px solid #7290a0;border-radius:50%;background:#274455}.stick i:after{content:'';position:absolute;width:6px;height:6px;left:50%;top:50%;margin:-3px;border-radius:50%;background:#b7f4e5;box-shadow:0 0 10px rgba(138,244,216,.5)}.joystick.dragging{border-color:#9aedcf;cursor:grabbing}.joystick.dragging .stick{transition:none;border-color:#9aedcf}#moveHint{height:12px;font:8px monospace;letter-spacing:1px;color:#8bb9c7;margin:18px 0 0}.fight-area{display:flex;flex-wrap:wrap;justify-content:space-between}.fight-area button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:47%;height:110px;padding:4px;border-radius:17px;background:#101827;box-shadow:0 5px 0 #050a12;overflow:hidden;margin:0 0 12px;touch-action:none}.fight-area img{display:block;width:78px;height:78px;max-width:100%;object-fit:contain;pointer-events:none}.fight-area span{font:bold 10px Arial,sans-serif;letter-spacing:1px;line-height:16px;position:relative;pointer-events:none}.fight-area .punch{border-color:#be4b76;color:#ff9fbe}.fight-area .kick{border-color:#ad7b40;color:#ffc880}.fight-area .jump{border-color:#337e9d;color:#8dd8fa}.fight-area .pickup{border-color:#458b71;color:#9ce7bd}.special{position:relative;display:flex;align-items:center;flex-shrink:0;width:100%;height:78px;padding:6px 14px 6px 8px;border-radius:12px;background:#131828;border-color:#5d457d;color:#d7c3f6;overflow:hidden;text-align:left;box-shadow:0 5px 0 #050a12;touch-action:none}.special img{width:64px;height:64px;position:relative;pointer-events:none;margin-right:12px}.special-copy{position:relative;flex:1;pointer-events:none}.special strong{font:bold 13px Arial,sans-serif;letter-spacing:2px}.special #specialHint{display:block;font:9px monospace;margin-top:7px;letter-spacing:0;color:#aaa2c0}.special-arrow{position:relative;font-size:23px;font-weight:normal;pointer-events:none;color:#aa81d8}.special em{position:absolute;top:0;left:0;bottom:0;width:0;background:#38274e;pointer-events:none}.special.ready{border-color:#d1a2ff;color:#fff}.special.ready em{background:#55356e}.special.ready #specialHint{color:#e1c8ff}.fight-area button.pressed,.special.pressed{transform:translateY(4px);box-shadow:0 1px 0 #050a12;border-color:#eafff7;background:#20304a}.fight-area button.pressed img{transform:scale(.91)}.hint{text-align:center;color:#819eae;font:9px monospace;line-height:1.4;margin:16px 0 4px}
.menu{position:fixed;top:56px;bottom:0;left:0;right:0;background:rgba(3,9,16,.92);z-index:5;overflow:auto;padding:18px}.hidden{display:none!important}.menu-card{max-width:450px;margin:0 auto;background:#101e2c;padding:20px;border:1px solid #354659}.menu small{display:block;font:10px monospace;color:#9bb3c5;line-height:1.5}.menu h2{font-size:27px;letter-spacing:-1px;margin:10px 0 20px}.menu h3{font:10px monospace;letter-spacing:1px;color:#b9d3df;margin-top:20px}.menu label{display:block;font-size:12px;margin-bottom:7px}.menu input{width:100%;height:43px;background:#09131e;color:#eafff7;border:1px solid #3b6471;font:16px Arial;padding:8px 10px;margin-bottom:8px}.heroes{display:flex;flex-wrap:wrap}.heroes button{width:32%;margin:0 2% 7px 0;padding:7px 2px;position:relative;font-size:10px}.heroes button:nth-child(3n){margin-right:0}.heroes img{display:block;margin:auto;height:75px;width:56px;object-fit:contain;image-rendering:pixelated}.heroes .selected{border:2px solid #99f2d2;background:#234238}.heroes small{font-size:8px}.menu-card>button{width:100%;margin-bottom:8px;min-height:44px}.menu .start{background:#9ae9d0;border-color:#9ae9d0;color:#0c2221}.menu p{font:11px monospace;color:#b1c9d1;line-height:1.6}.menu p.menu-help{font-size:10px;color:#8dabbc}.menu-card>a{font-size:11px}
@media(max-width:370px){header{padding:0 10px}header span{font-size:8px}header button{margin-left:8px}main{padding:10px 10px 6px}.identity{min-height:70px}.identity img{width:48px;height:68px;margin-right:8px}.identity h1{font-size:21px}.identity>strong{font-size:14px;margin-right:2px}.joystick{width:138px;height:138px}.stick{width:64px;height:64px;margin:-32px 0 0 -32px}.joystick .north{top:11px}.joystick .south{bottom:11px}.joystick .west{left:11px}.joystick .east{right:11px}.fight-area button{height:90px;border-radius:13px}.fight-area img{width:60px;height:60px}.fight-area span{font-size:9px}.control-label{font-size:8px;letter-spacing:1px}.move-area,.combat-area{height:236px}.joystick{margin-top:26px}.special{height:66px}.special img{width:54px;height:54px}.special strong{font-size:12px}}
@media(max-height:740px) and (orientation:portrait){header{height:48px}.menu{top:48px}main{padding-top:8px}.identity{min-height:65px}.identity img{height:64px;width:48px}.identity h1{font-size:21px;margin:4px 0}.meters{margin:10px 2px}#weapon{padding:6px 10px}#weapon span{display:none}#controls{min-height:284px;margin-top:5px}.control-deck{padding:4px 0 10px;min-height:214px}.move-area,.combat-area{height:224px}.joystick{margin-top:18px}.control-label{margin-bottom:10px}.fight-area button{height:90px;margin-bottom:8px}.fight-area img{width:63px;height:63px}.joystick{width:156px;height:156px}#moveHint{margin-top:12px}.special{height:64px}.special img{width:52px;height:52px}.hint{font-size:8px;margin:10px 0 3px}}
@media(max-width:370px) and (max-height:740px){.joystick{width:136px;height:136px}.fight-area img{width:58px;height:58px}}
@media(orientation:landscape) and (max-height:550px){header{height:44px}.menu{top:44px}main{padding:7px 18px 4px;max-width:1100px;position:relative}.identity{min-height:56px;width:43%;height:56px;padding:0 6px}.identity img{height:54px;width:38px;margin-right:8px}.identity h1{font-size:18px;margin:3px 0}.identity small{font-size:8px}.identity p{font-size:8px}.identity>strong{font-size:13px;margin:0 4px}.meters{position:absolute;right:18px;top:7px;width:49%;margin:3px 0}.meters>div{font-size:8px}.meters i{margin-top:5px;height:4px}#weapon{position:absolute;top:34px;right:18px;width:49%;font-size:9px;padding:4px 8px}#weapon span{display:none}#controls{margin:5px 0 0;min-height:195px;display:block}.control-deck{position:absolute;top:0;bottom:0;left:0;width:100%;padding:0;min-height:0}.move-area{width:30%;height:212px}.combat-area{width:36%;height:212px}.control-label{margin:0 0 8px;font-size:8px}.joystick{width:154px;height:154px;margin-top:16px}.stick{width:68px;height:68px;margin:-34px 0 0 -34px}#moveHint{margin-top:10px}.fight-area button{width:47%;height:87px;margin-bottom:9px}.fight-area img{width:62px;height:62px}.fight-area span{font-size:9px;line-height:13px}.special{position:absolute;left:34%;top:50%;width:25%;height:112px;margin-top:-45px;display:block;padding:6px;text-align:center}.special img{display:block;width:48px;height:48px;margin:0 auto 3px}.special strong{font-size:10px;letter-spacing:1px}.special #specialHint{font-size:8px;margin-top:4px}.special-arrow{display:none}.hint{margin:3px 0;font-size:8px}}
@media(orientation:landscape) and (max-height:370px){header{height:40px}.menu{top:40px}main{padding-top:4px}.identity{height:48px;min-height:48px}.identity img{height:46px}.identity p{display:none}#controls{min-height:177px}.move-area,.combat-area{height:180px}.joystick{width:130px;height:130px;margin-top:12px}.stick{width:60px;height:60px;margin:-30px 0 0 -30px}.control-label{margin-bottom:6px}.fight-area button{height:73px;margin-bottom:7px}.fight-area img{width:48px;height:48px}#moveHint{margin-top:8px}}