/* Knight Online UI adaptation: all pictorial assets taken from user UI.zip */
:root{--ko-gold:#dabd79;--ko-ink:#0d1411;--ko-edge:#806947}
#koHud{position:fixed;inset:0;pointer-events:none;z-index:45;color:#f6e7c7;font-family:Arial,Tahoma,sans-serif;font-size:12px}
#koHud *{box-sizing:border-box}
#koHud button{pointer-events:auto;min-width:0;min-height:0;border:1px solid #75623f;color:#f5e7be;background:linear-gradient(#31372a,#14190f);border-radius:3px;touch-action:manipulation;padding:5px 7px;font-size:12px;text-shadow:0 1px 2px #000;cursor:pointer}
#koHud button:active,#koHud button[aria-pressed=true]{background:#655b35}
#koStats{position:absolute;left:8px;top:calc(9px + env(safe-area-inset-top));width:min(45vw,230px);max-width:230px;background:#0b1414da;border:1px solid #76664d;border-radius:7px;padding:6px 8px;pointer-events:auto;box-shadow:0 2px 10px #0009}
#koStats .koName{color:#f7d58d;font-size:11px;margin-bottom:4px}
#koStats .meter{height:10px;background:#1b1c1a;border:1px solid #8b8063;margin-bottom:3px;border-radius:2px;overflow:hidden;position:relative}
#koStats .meter>span{height:100%;display:block}
#koStats .hp>span{background:linear-gradient(#ff9696,#b82622)}#koStats .mp>span{background:linear-gradient(#98caff,#2355c2)}#koStats .xp>span{background:#d3a647}
#koToolbar{position:absolute;right:8px;bottom:calc(112px + env(safe-area-inset-bottom));display:flex;gap:4px;pointer-events:auto}
#koToolbar button{font-size:11px;padding:7px 6px;background:linear-gradient(#44412f,#14170e);border:1px solid #ad894b}
#koQuickbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;background:#0c130edd;border:2px ridge #998052;border-radius:6px;box-shadow:0 4px 17px #000b;max-width:calc(100vw - 16px);pointer-events:auto}
#koQuickbar::before{content:'';position:absolute;inset:0;background:url('re_main_ui_01.dxt.png') 8% 1% / 512px 512px no-repeat;opacity:.18;pointer-events:none}
#koQuickbar button{position:relative;width:clamp(34px,8.2vw,49px);height:clamp(39px,9vw,54px);padding:2px;background:linear-gradient(#2d3127,#10140f);border:1px solid #ad8a53;box-shadow:inset 0 0 3px #000;display:flex;flex-direction:column;align-items:center;justify-content:space-between}
#koQuickbar .koThumb{width:clamp(22px,6vw,35px);height:clamp(22px,6vw,35px);object-fit:contain;image-rendering:auto}
#koQuickbar small{font-size:9px;color:#e2d6b1;line-height:9px}
#koModal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100vw - 22px);width:340px;max-height:min(68dvh,590px);overflow:auto;pointer-events:auto;background:linear-gradient(160deg,#292d21f5,#070e0cf9);border:2px ridge #b08b4f;border-radius:8px;box-shadow:0 8px 32px #000c}
#koModal[hidden]{display:none}
.koHead{display:flex;justify-content:space-between;align-items:center;height:40px;padding:6px 11px;color:#ffe0a0;background:linear-gradient(#4b4832,#15180e);border-bottom:1px solid #887349;font-size:15px;font-weight:600}
#koModal .koBody{padding:11px;position:relative;min-height:240px}
#koModal .koBody::before{content:'';background:url('re_inventory01.dxt.png') center top / 310px auto no-repeat;position:absolute;inset:0;opacity:.18;pointer-events:none}
#koModal[data-panel='stat'] .koBody::before{background-image:url('re_page_state.dxt.png')}
#koModal[data-panel='skill'] .koBody::before{background-image:url('re_main_ui_02.dxt.png')}
#koModal .koBody>*{position:relative}
.koSectionTitle{color:#e3bb74;font-size:13px;font-weight:bold;margin:4px 0 9px}
.koGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.koGrid button{min-height:45px!important;text-align:left;background:#20271cda!important}
.koGrid button.selected{border-color:#dec678!important;background:#454327dd!important}
.koNote{color:#c3bfab;font-size:11px;line-height:1.5;margin-top:12px;background:#0a130c99;padding:7px;border:1px solid #53523d}
.koStatRow{display:flex;justify-content:space-between;border-bottom:1px solid #675a3d;padding:8px 2px;font-size:13px}
.koStatRow strong{color:#f4d08b}
#koToast{position:absolute;bottom:calc(187px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#131b13ed;border:1px solid #a98754;border-radius:4px;padding:6px 10px;color:#ffdf9b;max-width:92vw;text-align:center;display:none}
#koHud .koShortcut{color:#e1bd6d}
/* In gameplay the old engineering dock is still reachable via Rig/Tools menu, but no longer covers HUD */
body.ko-hud-active #dock{display:none!important}
body.ko-hud-active #tip{display:none!important}
body.ko-hud-active header{padding-top:calc(8px + env(safe-area-inset-top));padding-left:calc(min(46vw,245px) + 10px)}
body.ko-hud-active header h1{font-size:14px}
body.ko-hud-active header p{display:none}
@media(max-width:390px){#koToolbar{gap:2px;right:4px;bottom:calc(97px + env(safe-area-inset-bottom))}#koToolbar button{font-size:10px;padding:6px 4px}#koQuickbar{gap:2px;padding:4px}#koQuickbar button{width:35px}#koModal{max-height:65dvh}}
body.ko-hud-active #actionbar{display:none!important}
body.ko-hud-active #playerlabel{display:none!important}
body.ko-hud-active #walkui{bottom:calc(93px + env(safe-area-inset-bottom))}
body.ko-hud-active #koStats{z-index:2}