:root{color-scheme:dark;font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:#f3e8cb;background:#142d35;font-synthesis:none;--edge:#d5c18a66;--glass:#102c36df;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{user-select:none;-webkit-user-select:none}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:none;border:1px solid var(--edge);background:var(--glass);border-radius:9px;padding:11px 16px;box-shadow:inset 0 1px #fff1;transition:background .15s,border-color .15s}button:hover{background:#294a4de8;border-color:#ebd9a7}button:active{background:#3b625b}button:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #ffdfa0;outline-offset:3px}.stage{position:fixed;inset:0;overflow:hidden;width:100%;height:100%;height:100dvh;background:#142d35}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;outline:none;touch-action:none}
.topline{position:absolute;top:calc(22px + var(--safe-top));left:calc(24px + var(--safe-left));right:calc(24px + var(--safe-right));display:flex;justify-content:space-between;align-items:flex-start;gap:18px;pointer-events:none}.playerhud{display:flex;gap:10px;align-items:center;padding:10px 13px 9px 9px;border:1px solid var(--edge);background:linear-gradient(120deg,#132d37ee,#1a3437d9);border-radius:8px;box-shadow:0 4px 16px #06171e24;width:218px}.crest{width:36px;height:36px;border:1px solid #cfb77b55;display:grid;place-items:center;border-radius:5px;transform:rotate(45deg);font-size:25px;color:#f2d293;background:#324842}.vitals{flex:1;margin-left:3px}.vitals>span{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:11px}.vitals strong{font-weight:600;color:#e9ddb9}.vitals b{font-size:10px;font-weight:400;color:#c9dbc5;font-variant-numeric:tabular-nums}.health{height:7px;background:#0b2029;border:1px solid #93b6a529;margin-top:7px;overflow:hidden;transform:skewX(-12deg)}.health i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#5ba995,#b2dec0);transition:width .1s}.vitals small{display:block;font-size:9px;color:#a5c2b4;margin-top:5px}.top-actions{display:flex;align-items:center;gap:8px;pointer-events:auto}.top-actions>span{font-size:11px;letter-spacing:1px;text-shadow:0 2px 5px #071923;margin-right:9px}.icon-button{display:grid;place-items:center;line-height:1;width:39px;height:39px;padding:0;font-size:23px}#pause{font-size:16px;font-weight:700}
#boss{position:absolute;top:calc(29px + var(--safe-top));left:50%;transform:translateX(-50%);width:34%;max-width:460px;font-size:11px;text-shadow:0 2px 3px #0b1d2a}#boss>span{display:flex;justify-content:space-between;letter-spacing:1px}#boss b{font-size:10px;font-weight:400;color:#e7c29e;letter-spacing:0}#boss>div{height:9px;margin-top:8px;background:#211f2b;border:1px solid #c4a06e;transform:skewX(-12deg);overflow:hidden}#bossfill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ad654e,#e2b176);transition:width .12s}
.skillbar{position:absolute;bottom:calc(23px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;gap:8px}.skillbar button{position:relative;width:66px;height:72px;padding:7px 8px 6px;background:linear-gradient(#193a43ef,#102b35f2);border-color:#d5c18a80;border-radius:7px;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:2px;box-shadow:0 3px 0 #071c24a8,0 4px 14px #07192322}.skillbar button:nth-child(2){--skill:#a9e6cd}.skillbar button:nth-child(3){--skill:#9ac8ef}.skillbar button:nth-child(4){--skill:#ddbaf0}.skillbar kbd{position:absolute;top:5px;left:6px;padding:0;background:none;border:0;font-size:9px;color:#b8c8b9}.skillbar svg{width:29px;height:29px;fill:none;stroke:var(--skill,#ecd28b);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.skillbar strong{font-size:9px;font-weight:500;letter-spacing:1px;color:#e5dcc0}.skillbar small{position:absolute;inset:0;border-radius:7px;background:#0a1c29d6;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#ecd7ae;font-variant-numeric:tabular-nums}.skillbar small:empty{display:none}.skillbar [aria-disabled=true]{border-color:#8f9d8566}.skillbar [data-unavailable=true]{opacity:.5}.touch-move,.touch-action{display:none}
#context{position:absolute;bottom:calc(111px + var(--safe-bottom));left:50%;transform:translateX(-50%);padding:7px 12px;border:1px solid #e2d6a45c;border-radius:5px;background:#122b34d9;font-size:11px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 3px #0c2028}#message{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.dialog{position:absolute;left:50%;bottom:calc(112px + var(--safe-bottom));transform:translateX(-50%);width:min(660px,calc(100% - 40px));padding:23px 25px;display:flex;gap:20px;align-items:flex-end;background:#102934f5;border:1px solid #d9c18b99;border-radius:9px;box-shadow:0 12px 50px #06172255}.dialog>div{flex:1}.dialog h2{font-size:14px;color:#e5cb91;font-weight:600;margin:0 0 11px}.dialog p{font-size:13px;line-height:1.9;margin:0;color:#e1e5d2}.dialog button{font-size:10px;white-space:nowrap;padding:8px 10px}kbd{font:10px monospace;background:#0e2731;border:1px solid #91a29166;border-bottom-width:2px;padding:2px 5px;border-radius:3px;margin-right:2px}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#071d2b94;backdrop-filter:blur(6px);padding:20px}.menu{width:min(380px,100%);max-height:calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain;text-align:center;padding:30px;background:linear-gradient(145deg,#203d43f7,#102932fa);border:1px solid #cbb98491;border-radius:12px;box-shadow:0 22px 80px #04131a77}.menu-mark{color:#dbc18a;font-size:24px}.menu h1{font-size:24px;font-weight:500;letter-spacing:1px;margin:13px 0 18px}.menu>p{font-size:12px;line-height:1.8;color:#b6cbc2;margin:0 0 20px}.menu>p:empty{display:none}.menu-buttons{display:flex;flex-direction:column;gap:9px}.menu-buttons button{font-size:13px;letter-spacing:1px;background:#1d3b43}.menu-buttons .primary{background:#dcc58e;color:#193538;border-color:#f5deaa;font-weight:600}.menu-buttons .primary:hover{background:#ecdbad}.help{text-align:left;border-top:1px solid #b7b28b40;margin-top:22px;padding-top:16px;font-size:11px;color:#a7beb1}.help summary{cursor:pointer;text-align:center}.help p{font-size:10px;line-height:2.6;margin:16px 0}.help label{display:flex;justify-content:space-between;align-items:center}.help select{background:#152f38;border:1px solid #b2b68b55;border-radius:4px;padding:6px 12px;font-size:11px}.help>button{width:100%;margin-top:15px;font-size:10px;background:transparent;color:#a9beb4;padding:8px}
@media(pointer:coarse){.touch-move,.touch-action{position:absolute;display:flex;align-items:center;gap:8px;bottom:calc(24px + var(--safe-bottom))}.touch-move{left:calc(20px + var(--safe-left))}.touch-action{right:calc(20px + var(--safe-right))}.touch-move button{width:56px;height:56px;font-size:16px;padding:0;border-radius:50%;background:#132e3cbb}.touch-action button{width:49px;height:49px;padding:0;border-radius:50%;font-size:11px;background:#132e3cbb}.touch-action .action-primary{width:63px;height:63px;border-color:#d6ca9bab;background:#345751cc;color:#fff0c1}.skillbar{bottom:calc(105px + var(--safe-bottom));gap:6px}.skillbar button{width:52px;height:58px}.skillbar svg{width:24px;height:24px}.skillbar strong{font-size:8px}#context{bottom:calc(178px + var(--safe-bottom))}.dialog{bottom:calc(178px + var(--safe-bottom))}}
@media(max-width:780px){.topline{top:calc(12px + var(--safe-top));left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right));gap:8px}.playerhud{width:162px;padding:8px;gap:7px}.crest{width:25px;height:25px;font-size:19px}.vitals>span{font-size:9px;gap:6px}.vitals b{font-size:8px}.vitals small{font-size:8px;margin-top:4px}.health{height:6px;margin-top:5px}.top-actions{gap:5px}.top-actions>span{display:none}.icon-button{width:33px;height:33px;font-size:21px}#boss{top:calc(88px + var(--safe-top));width:65%;font-size:10px}.touch-move,.touch-action{gap:5px}.touch-move{left:calc(12px + var(--safe-left))}.touch-action{right:calc(12px + var(--safe-right))}.touch-move button{width:48px;height:48px}.touch-action button{width:43px;height:43px;font-size:10px}.touch-action .action-primary{width:55px;height:55px}.dialog{padding:17px;gap:10px}.dialog p{font-size:11px}.dialog h2{font-size:12px}.dialog button{font-size:9px;padding:7px}.menu{padding:22px}}
@media(max-height:500px) and (pointer:coarse){.topline{top:calc(10px + var(--safe-top))}.playerhud{padding:6px 8px;width:160px}.crest{width:25px;height:25px;font-size:18px}.vitals small{display:none}.skillbar{bottom:calc(14px + var(--safe-bottom))}.skillbar button{width:48px;height:54px}.touch-move,.touch-action{bottom:calc(14px + var(--safe-bottom))}#context{bottom:calc(82px + var(--safe-bottom))}.dialog{bottom:calc(82px + var(--safe-bottom));padding:14px 18px}.menu{padding:16px 24px}.menu-mark{display:none}.menu h1{margin-top:0;font-size:20px}.menu-buttons{gap:6px}.menu-buttons button{padding:8px}.help{margin-top:15px;padding-top:10px}#boss{top:calc(21px + var(--safe-top));width:33%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.overlay{backdrop-filter:none}}