:root{color-scheme:dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#fff3d3;background:#142927}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 30%,#36524b,#12221f 70%)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,canvas:focus-visible{outline:2px solid #fff0a9;outline-offset:2px}#game{position:relative;width:min(100vw,56.28svh);height:min(100svh,177.68vw);overflow:hidden;isolation:isolate;background:#758e86;box-shadow:0 0 100px #081415aa;touch-action:none;user-select:none;-webkit-user-select:none}canvas,#reference,#damage-flash{position:absolute;inset:0;width:100%;height:100%;display:block}#hands{pointer-events:none;z-index:2}#combat-labels{pointer-events:none;z-index:3}#reference{z-index:4;object-fit:fill}#reference[hidden]{display:none}#damage-flash{z-index:4;pointer-events:none;opacity:0;box-shadow:inset 0 0 70px 15px #bc263c;transition:opacity .1s}#compare{position:absolute;z-index:5;right:12px;top:calc(10px + env(safe-area-inset-top));border:1px solid #d1c18b55;border-radius:20px;background:#17302b99;padding:8px 12px;font-size:12px;min-height:36px}#loading,#hint{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:6;text-align:center;max-width:90%;width:max-content;background:#10271fe8;border:1px solid #b29a5b88;border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.4}#hint{top:66%;opacity:0;pointer-events:none;transition:opacity .2s}#hint.show{opacity:1}#loading[hidden]{display:none}.controls{position:absolute;z-index:5;bottom:0;left:0;right:0;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:linear-gradient(130deg,#101f19f5,#0d241bf2);border-top:1px solid #d1b362;box-shadow:0 -6px 24px #0a180f60,inset 0 2px 0 #8f773938}.status-area{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;margin-bottom:8px}.character-heading{display:flex;align-items:center;gap:10px;margin-bottom:5px;line-height:20px;font-size:14px}.character-heading strong{font:700 17px Georgia,serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.character-heading b{font-weight:600}#distance{margin-left:auto;font-size:12px;color:#c2c6a5;font-variant-numeric:tabular-nums;white-space:nowrap}.vital{display:flex;align-items:center;gap:6px;height:15px;margin-top:3px;font-size:12px;line-height:1}.vital-name{width:69px;flex-shrink:0;white-space:nowrap;color:#d5d8bd}.bar{position:relative;flex:1;height:14px;border:1px solid #b4a7787a;border-radius:8px;background:#070d0bcc;overflow:hidden;text-align:center;font-variant-numeric:tabular-nums}.bar>span{position:relative;display:block;font-size:12px;line-height:12px;color:#fff;text-shadow:0 1px 2px #000,1px 0 2px #000}.fill{position:absolute;inset:0;transform-origin:left center;transition:transform .12s linear;box-shadow:inset 0 1px 1px #ffffff65}.hp .fill{background:linear-gradient(90deg,#9f2435,#e94851)}.mana .fill{background:linear-gradient(90deg,#21598c,#469fd8)}.exp .fill{background:linear-gradient(90deg,#ae7430,#eac265);transform:scaleX(0)}.energy .fill{background:linear-gradient(90deg,#4e7936,#91bf4e)}.side-slots{display:flex;flex-direction:column;justify-content:space-between;gap:5px}.side-slots button{position:relative;padding:0;width:44px;flex:1;min-height:40px;overflow:hidden;border:1px solid #d0af6799;border-radius:7px;background:#10271f;display:grid;align-content:end}.side-slots button>span:last-child{position:relative;background:#071810b3;font-size:12px;line-height:16px;text-shadow:0 1px 2px #000}.action-icon{position:absolute;inset:0;background-image:url('assets/spell-icons.png');background-size:600% 200%}.bag-icon{background-position:100% 0}.pet-icon{background-position:100% 100%}.skill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.skill-slot{position:relative;min-width:0;height:clamp(44px,6.7svh,59px);padding:0;border:1px solid #cba85d;border-radius:6px;overflow:hidden;background:#143025;box-shadow:inset 0 0 0 2px #493e27}.spell-art{position:absolute;inset:1px;background-image:url('assets/spell-icons.png');background-size:600% 200%;background-position:var(--icon-x) var(--icon-y);border-radius:4px}.skill-slot:active{transform:scale(.96);filter:brightness(1.2)}.skill-slot:disabled{cursor:default}.skill-number{position:absolute;top:3px;left:5px;font-size:12px;line-height:1;text-shadow:0 1px 3px #000,0 0 3px #000}.skill-duration{position:absolute;right:4px;bottom:3px;font-size:12px;line-height:1;text-shadow:0 1px 3px #000,0 0 4px #000}.cooldown-mask{position:absolute;inset:0;display:none;background:conic-gradient(#08130ddb var(--cooldown,0deg),transparent 0deg)}.cooling .cooldown-mask{display:block}.cooldown-value{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:600;text-shadow:0 2px 4px #000}.cooling .skill-duration{opacity:.7}dialog{width:min(340px,90%);border:1px solid #c7ac6d;border-radius:14px;padding:18px;background:#112920;color:#f9edcc;box-shadow:0 10px 60px #0009}dialog::backdrop{background:#07110ba8}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px}dialog h2{font:700 22px Georgia,serif;margin:0}dialog p{font-size:16px;line-height:1.5;color:#d3d9c7}#close-panel{border:0;background:transparent;font-size:28px;padding:0 8px}#return-city{width:100%;padding:12px;border:1px solid #c9ae68;border-radius:8px;background:#294533;font-size:16px}#return-city[hidden]{display:none}@media(max-height:600px){.controls{padding:6px 8px}.skill-slot{height:40px}.character-heading{line-height:17px;margin-bottom:2px}.vital{height:13px;margin-top:2px}.bar{height:13px}.status-area{margin-bottom:6px;gap:7px}.side-slots button{min-height:32px}.vital-name{width:65px}.skill-grid{gap:4px}}@media(max-width:360px){.controls{padding-left:8px;padding-right:8px}.status-area{gap:7px}.character-heading{gap:7px}.vital-name{width:65px}}

.basic-attack{border-color:#e8d59e}.basic-attack .spell-art{filter:saturate(.5) brightness(.75)}.basic-label{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;font-weight:700;text-shadow:0 1px 3px #000,0 0 4px #000}.basic-attack.cooling .basic-label{opacity:0}
.side-slots{gap:3px}.side-slots button{min-height:31px}.city-link{display:flex;align-items:center;justify-content:center;gap:3px;min-height:31px;border:1px solid #d0af6799;border-radius:7px;background:#294233;color:#f2e7c4;text-decoration:none;flex-direction:column;font-size:8px;line-height:9px;padding:2px}.city-link>span:first-child{font-size:20px;line-height:16px}.city-link:focus-visible{outline:2px solid #fff0a9;outline-offset:2px}

.pvp-link{position:absolute;z-index:5;left:12px;top:10px;border:1px solid #d1c18b77;border-radius:20px;background:#17302bcc;padding:8px 14px;color:#fff3d3;text-decoration:none;font-size:14px}

#reconnect{position:absolute;z-index:7;top:58%;left:50%;transform:translateX(-50%);padding:9px 14px;background:#294533;border:1px solid #c9ae68;border-radius:8px}#reconnect[hidden]{display:none}