*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#101e18;color:#d9dfcb;font:13px/1.5 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif}main{max-width:1440px;margin:auto;padding:14px 18px}button,select{font:inherit;color:#d9d5b4;background:#203328;border:1px solid #56634b;border-radius:3px;padding:8px 12px;cursor:pointer;min-height:38px}button:hover{border-color:#d9c185}button[aria-pressed=true]{color:#132017;background:#d8c182;border-color:#d8c182}button:disabled{opacity:.45;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #e8d18f;outline-offset:2px}header,.toolbar,header>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}header{justify-content:space-between;border-bottom:1px solid #334c39;padding-bottom:12px}header strong{font:22px Georgia,serif;color:#e9d7a4}header strong span{font:12px sans-serif;color:#94ad96;margin-left:8px}.toolbar{padding:12px 0}.toolbar label{margin-right:auto}.modes{display:flex;gap:5px}#vitals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}.vital{padding:7px 9px;background:#192b21}.vital>div{display:flex;justify-content:space-between;gap:5px;font-size:11px}.vital .hp{color:#afc6a7}.meter{height:5px;background:#354336;overflow:hidden;margin-top:5px}.meter i{display:block;height:100%;background:#a6c98a;transition:width .1s}.vital.down{opacity:.5}#arena{position:relative;isolation:isolate;background:#080f0c;border:1px solid #465b42}canvas{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated;touch-action:manipulation;max-height:58dvh;object-fit:contain}#loading,#end{position:absolute;inset:0;background:#0c1918e8;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;gap:12px}#loading b,#end strong{font-size:22px;color:#e6c987}#loading span,#end p{font-size:12px;color:#9ab29b}progress{width:min(300px,80%);height:7px;accent-color:#c6b17e}#end button{min-width:150px}#paused{position:absolute;inset:45% 0 auto;text-align:center;background:#132019d9;padding:15px;color:#ebdba6;pointer-events:none}.live-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;color:#a7bf9d;font-size:11px;min-height:32px}#clock{white-space:nowrap}.controls{display:flex;gap:15px;align-items:center;padding:6px 0}#joystick{flex:none;width:100px;height:100px;border-radius:50%;border:1px solid #536e51;background:#1e3428;position:relative;touch-action:none;user-select:none}#joystick i{position:absolute;inset:30px;border-radius:50%;background:#a1b789;border:1px solid #c3cba7;pointer-events:none}#joystick span{position:absolute;inset:auto 0 5px;text-align:center;font-size:10px;color:#819b7d;pointer-events:none}.action-controls{flex:1;min-width:0}#skills,.utility{display:flex;gap:6px;flex-wrap:wrap}#skills{margin-bottom:7px}#skills button{min-width:70px;position:relative;overflow:hidden;text-align:center;font-size:12px}#skills button small,.utility small{font-size:9px;color:#a4b795;margin-left:4px}.utility button{font-size:11px;padding:7px 10px;touch-action:none;user-select:none}#skills button.on-cooldown{opacity:.55}#skills button .cd{display:block;font-size:9px;color:#d2bc89}.auto .controls{opacity:.45}.auto #joystick,.auto .controls button{pointer-events:none}#help,#scope{margin:8px 0;font-size:11px;color:#849e87}#scope{font-size:10px;color:#6e8874}[hidden]{display:none!important}:fullscreen{background:#101e18;overflow:auto}.viewport-full{position:fixed;inset:0;width:100vw;height:100dvh;overflow:auto;z-index:9999;background:#101e18}body:fullscreen main{height:100dvh;display:flex;flex-direction:column;max-width:1440px}body:fullscreen #arena{flex:1;min-height:180px}body:fullscreen canvas{height:100%;max-height:none;aspect-ratio:auto}body:fullscreen #scope{display:none}
@media(max-width:600px){main{padding:10px}header strong{font-size:19px}header strong span{font-size:10px;margin-left:4px}button,select{font-size:11px;padding:7px 9px;min-height:36px}header{gap:6px;padding-bottom:8px}header>div{gap:5px}.toolbar{gap:7px}.toolbar label{flex:1;min-width:160px}.modes{order:3;flex:1 0 100%;width:100%}.modes button{flex:1;white-space:nowrap}.vital{padding:5px 6px}.vital>div{display:block;font-size:10px}.vital .hp{display:block;font-size:9px}#vitals{gap:4px;margin-bottom:8px}canvas{aspect-ratio:4/3;max-height:46dvh}#joystick{width:80px;height:80px}#joystick i{inset:24px}.controls{align-items:center;gap:10px}#skills{gap:4px}#skills button{min-width:calc(33.333% - 4px);padding:6px 4px;font-size:10px}.utility{gap:4px}.utility button{font-size:10px;padding:5px 6px;min-height:32px}.live-line{font-size:10px}#help{font-size:10px}#end strong{font-size:18px}#end p{margin:0}#end{gap:7px}}
@media(orientation:landscape) and (max-height:550px){main{padding:6px 10px}header{padding-bottom:4px}header strong{font-size:17px}.toolbar{padding:5px 0}#vitals{margin-bottom:4px}.vital{padding:3px 7px}canvas{max-height:none;aspect-ratio:20/9}.controls{padding:2px 0}#joystick{width:70px;height:70px}#joystick i{inset:21px}#help,#scope{display:none}.live-line{padding:3px 0;min-height:22px}}

.embedded header #fullscreen{display:none}