/* =====================================================================
   KINGDOMFALL — classic MMO HUD layout
   unit frames (top-left), round minimap + clock (top-right), objective
   tracker (right), chat / event log (bottom-left), long ornate action bar
   with XP bar, micro-menu and bags (bottom). Art is original (crowned
   shield end caps, gilt rims); only the arrangement follows the genre.
   ===================================================================== */
:root { --rim: #c9a45c; --rim-hi: #f0d08a; --rim-dk: #5a4322; --stone: #2a241e; --stone-hi: #4a3e32; }

/* ---------------------------------------------------------------- unit frames */
#compassLine { display: none; }
#compass { top: 10px !important; width: 400px !important; height: 30px !important; border: none !important; background: linear-gradient(90deg, transparent, rgba(10,8,6,.72) 18%, rgba(10,8,6,.72) 82%, transparent) !important; box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
#compass::before { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--rim), transparent); }
#compass::after { background: var(--rim-hi) !important; height: 7px !important; width: 2px !important; box-shadow: 0 0 6px var(--rim-hi); }
#compass .mark { top: 7px !important; font-size: 12px !important; }
#compass .mark.minor { top: 9px !important; font-size: 9px !important; }
#compass .mark.quest { top: 3px !important; font-size: 17px !important; color: #ffd27a !important; text-shadow: 0 0 10px rgba(255,200,100,.95), 0 0 2px #000 !important; z-index: 2; }
#compass .mark.quest.kill { color: #ff6a4a !important; text-shadow: 0 0 10px rgba(255,90,60,.95), 0 0 2px #000 !important; }
#compass .mark.enemy { top: 19px !important; font-size: 8px !important; color: #ff5a4a !important; }
#compass .mark.enemy.hot { text-shadow: 0 0 6px #ff3020; }
.uframe { position: absolute; top: 14px; display: flex; align-items: center; transition: opacity .4s; }
.uframe.player { left: 14px; width: 330px; }
.uframe.target { left: 360px; width: 300px; opacity: 0; transform: translateY(-6px); transition: opacity .25s, transform .25s; }
.uframe.target.show { opacity: 1 !important; transform: none; }
.uframe .portrait { position: relative; width: 78px; height: 78px; flex: none; z-index: 2; }
.uframe .pimg { position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #4a3a2c, #120e0c) center/cover; box-shadow: inset 0 0 14px rgba(0,0,0,.85); display: grid; place-items: center; font-size: 30px; color: var(--rim-hi); }

.uframe .pimg.glyph { text-shadow: 0 0 12px rgba(255,190,90,.6); }
.uframe .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--rim); box-shadow: 0 0 0 2px #120e0a, 0 0 0 4px var(--rim-dk), inset 0 0 0 2px #120e0a, 0 6px 18px rgba(0,0,0,.7);
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.35) 62%, transparent 64%); }
.uframe .ring::before { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--rim-hi), var(--rim-dk)); box-shadow: 0 0 0 2px #120e0a; }
.uframe .plvl { position: absolute; left: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2c1c, #0c0906); border: 2px solid var(--rim); display: grid; place-items: center; font-family: var(--display); font-size: 12px; color: var(--rim-hi); box-shadow: 0 2px 6px #000; }
.uframe.target .plvl { left: auto; right: -2px; }
.uframe .plvl span { transform: none !important; font-size: 12px !important; }
.uframe .elite { position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed rgba(240,208,138,.8); animation: eliteSpin 14s linear infinite; }
@keyframes eliteSpin { to { transform: rotate(360deg); } }
.uframe .combatGlow { position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,60,40,0); transition: box-shadow .3s; pointer-events: none; }
.uframe.player.fighting .combatGlow { box-shadow: 0 0 16px 3px rgba(255,60,40,.55); animation: fightPulse 1.2s ease-in-out infinite; }
@keyframes fightPulse { 50% { box-shadow: 0 0 8px 1px rgba(255,60,40,.3); } }
.uframe .ubody { position: relative; flex: 1; margin-left: -14px; padding: 6px 10px 7px 20px; background: linear-gradient(180deg, rgba(34,28,22,.92), rgba(12,10,9,.94)); border: 1px solid var(--rim-dk);
  border-radius: 0 6px 6px 0; box-shadow: inset 0 1px 0 rgba(255,230,180,.08), 0 6px 16px rgba(0,0,0,.55); }
.uframe.target .ubody { margin-left: 0; margin-right: -14px; padding: 6px 20px 7px 10px; border-radius: 6px 0 0 6px; }
.uframe .uname { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 12px; letter-spacing: .12em; color: var(--parchment); text-shadow: 0 1px 2px #000; margin-bottom: 4px; white-space: nowrap; }
.uframe .urole { font-family: var(--serif); font-style: italic; letter-spacing: 0; font-size: 12px; color: var(--mute); margin-left: 8px; overflow: hidden; text-overflow: ellipsis; }
.uframe .bar { width: 100% !important; margin: 0 0 3px !important; border-radius: 2px; border-color: rgba(0,0,0,.9); box-shadow: 0 0 0 1px rgba(201,164,92,.35); }
.uframe .bar.hp { height: 15px; } .uframe .bar.mp { height: 11px; } .uframe .bar.st { height: 5px; margin-bottom: 0 !important; }
.uframe .bar.thp { height: 15px; } .uframe .bar.thp .fill { background: linear-gradient(180deg, #e8604c, #a82020 55%, #5a0c0c); }
.uframe .bar.tpo { height: 4px; margin-bottom: 0 !important; } .uframe .bar.tpo .fill { background: linear-gradient(90deg, #f2c46a, #ffe7a0); }
.uframe.target.stag .bar.tpo { box-shadow: 0 0 10px #ffcf6a; }
.btxt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 10px; letter-spacing: .06em; color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; z-index: 2; }
#buffs { position: absolute; left: 84px; top: 84px; display: flex; gap: 4px; margin: 0 !important; }

/* ---------------------------------------------------------------- minimap */
#mmWrap { position: absolute; right: 16px; top: 10px; width: 206px; height: 232px; transition: opacity .4s; }
#mmHead { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; background: linear-gradient(180deg, rgba(34,28,22,.92), rgba(12,10,9,.92)); border: 1px solid var(--rim-dk); border-radius: 4px; font-family: var(--display); font-size: 11px; letter-spacing: .08em; color: var(--rim-hi); text-shadow: 0 1px 2px #000; }
#mmZone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
#mmClock { color: var(--parchment); font-size: 10px; }
#mmWrap #minimap { position: absolute; left: 13px; top: 32px; right: auto; width: 180px; height: 180px; border: none; box-shadow: inset 0 0 30px rgba(0,0,0,.8); background: #0b0b0e; }
#mmRing { position: absolute; left: 7px; top: 26px; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  border: 6px solid var(--rim); border-top-color: var(--rim-hi); border-bottom-color: var(--rim-dk); box-shadow: 0 0 0 2px #120e0a, inset 0 0 0 2px #120e0a, 0 6px 20px rgba(0,0,0,.7); }
#mmN { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #3a2c1c, #0c0906); border: 1.5px solid var(--rim); display: grid; place-items: center; font-family: var(--display); font-size: 9px; color: var(--rim-hi); }
.mmBtn { position: absolute; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #3a2c1c, #0c0906); border: 1.5px solid var(--rim); color: var(--rim-hi); font-family: var(--display); font-size: 14px; line-height: 1; cursor: pointer; box-shadow: 0 2px 6px #000; }
.mmBtn:hover { border-color: var(--rim-hi); color: #fff; box-shadow: 0 0 10px rgba(240,208,138,.5); }
#mmIn { right: 0; top: 160px; } #mmOut { right: 8px; top: 186px; } #mmMap { left: 0; top: 176px; font-size: 12px; }

/* ---------------------------------------------------------------- objective tracker */
#tracker { position: absolute; right: 16px; top: 250px; width: 280px; transition: opacity .4s; }
#tracker .thead { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: var(--rim-hi);
  background: linear-gradient(90deg, rgba(20,16,12,0), rgba(20,16,12,.85)); border-bottom: 1px solid var(--rim-dk); }
#tracker .tcol { cursor: pointer; width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid var(--rim-dk); background: rgba(0,0,0,.5); color: var(--rim-hi); }
#tracker .tbody { padding: 6px 8px; background: linear-gradient(90deg, rgba(10,8,6,0), rgba(10,8,6,.55)); }
#tracker .tq { margin-bottom: 8px; text-align: right; }
#tracker #objective { position: static; width: auto; }
#tracker .qname { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-family: var(--display); font-size: 12px; letter-spacing: .06em; color: #ffd24a; text-transform: none; text-shadow: 0 1px 2px #000; }
#tracker .tq:not(.main) .qname { color: #e8c877; font-size: 11px; }
#tracker .qicon { font-style: normal; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #ffd24a; color: #1a1206; font-family: var(--display); font-size: 10px; font-weight: 700; box-shadow: 0 0 8px rgba(255,210,74,.5); }
#tracker .qicon.side { background: #9fc4ff; box-shadow: 0 0 8px rgba(160,196,255,.4); }
#tracker .qstep { font-size: 14px; color: #f0e8da; margin-top: 2px; line-height: 1.3; text-shadow: 0 1px 2px #000; }
#tracker .tq:not(.main) .qstep { font-size: 13px; color: #cfc6b6; }
#tracker .qdist { font-size: 11px; color: var(--mute); }

/* ---------------------------------------------------------------- chat / event log */
#chat { position: absolute; left: 14px; bottom: 118px; width: 400px; transition: opacity .4s; }
#chat .ctabs { display: flex; gap: 2px; opacity: .35; transition: opacity .3s; }
#chat:hover .ctabs, #chat.typing .ctabs, #chat.recent .ctabs { opacity: 1; }
#chat .ctabs span { padding: 3px 10px; font-family: var(--display); font-size: 10px; letter-spacing: .1em; color: var(--parchment); background: rgba(20,16,12,.8); border: 1px solid var(--rim-dk); border-bottom: none; border-radius: 4px 4px 0 0; cursor: pointer; }
#chat .ctabs span.on { color: var(--rim-hi); background: rgba(44,34,24,.95); }
#chat .clog { height: 150px; overflow-y: auto; padding: 6px 8px; background: rgba(0,0,0,.18); border: 1px solid transparent; font-size: 13.5px; line-height: 1.35; scrollbar-width: thin; transition: background .3s, border-color .3s;
}
#chat:hover .clog, #chat.typing .clog { background: rgba(8,6,4,.62); border-color: var(--rim-dk); }
#chat .ln { text-shadow: 0 1px 2px #000, 0 0 3px #000; color: #ffe9b8; margin-bottom: 1px; }
#chat .ln .ts { color: rgba(255,255,255,.35); font-size: 11px; }
#chat .ln.combat { color: #f1a58c; } #chat .ln.loot { color: #7fe07a; } #chat .ln.story { color: #d8d0ff; } #chat .ln.say { color: #fff; } #chat .ln.warn { color: #ff7a6a; }
#chat .ln .foe { color: #ff9c6a; } #chat .ln .xp { color: #b88cff; } #chat .ln .hurt { color: #ff5a4a; } #chat .ln .crit { color: #ffd24a; } #chat .ln .npc { color: #ffd98a; } #chat .ln .me { color: #9fd0ff; } #chat .ln .lvlup { color: #ffd24a; }
#chat .clog[data-ch="combat"] .ln:not(.combat), #chat .clog[data-ch="loot"] .ln:not(.loot), #chat .clog[data-ch="story"] .ln:not(.story):not(.say) { display: none; }
#chat input { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 5px 8px; font-family: var(--serif); font-size: 14px; color: #fff; background: rgba(8,6,4,.75); border: 1px solid var(--rim-dk); outline: none; opacity: 0; transition: opacity .2s; }
#chat.typing input, #chat:hover input { opacity: 1; }
#chat.typing input { border-color: var(--rim); box-shadow: 0 0 10px rgba(240,208,138,.25); }
.kbd.sm { min-width: 0; height: 18px; font-size: 10px; padding: 0 4px; }

/* ---------------------------------------------------------------- action bar */
#actionbar { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(1060px, 96vw); height: 104px; transition: opacity .4s; }
#actionbar::before { content: ''; position: absolute; left: 62px; right: 62px; bottom: 0; height: 84px; border-radius: 10px 10px 0 0;
  background: linear-gradient(180deg, #4a3e32 0%, #2a241e 12%, #1a1612 70%, #0e0c0a 100%); border: 2px solid var(--rim-dk); border-bottom: none;
  box-shadow: inset 0 2px 0 rgba(255,230,180,.12), inset 0 -10px 30px rgba(0,0,0,.6), 0 -4px 24px rgba(0,0,0,.6); }
#actionbar::after { content: ''; position: absolute; left: 70px; right: 70px; bottom: 76px; height: 2px; background: linear-gradient(90deg, transparent, var(--rim-hi), transparent); opacity: .5; }
#actionbar .capL, #actionbar .capR { position: absolute; bottom: -4px; width: 120px; height: 150px; z-index: 3; }
#actionbar .capL { left: -30px; } #actionbar .capR { right: -30px; transform: scaleX(-1); }
#actionbar svg { width: 100%; height: 100%; }
#xpbar { position: absolute; left: 76px; right: 76px; bottom: 70px; height: 9px; background: #0a0806; border: 1px solid #000; box-shadow: 0 0 0 1px var(--rim-dk); overflow: hidden; z-index: 2; pointer-events: auto; }
#xpbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #d6a8ff, #8a4ad8 55%, #4a1a8a); box-shadow: 0 0 8px rgba(160,100,255,.6); transition: width .5s ease; }
#xpbar .segs { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(0,0,0,.7) calc(5% - 1px) 5%); }
#xpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 9px; letter-spacing: .1em; color: #fff; text-shadow: 0 0 3px #000; opacity: 0; transition: opacity .2s; }
#xpbar:hover span { opacity: 1; }
#actionbar .abRow { position: absolute; left: 80px; right: 80px; bottom: 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
#actionbar #abilities { position: static; display: flex; gap: 4px; align-items: flex-end; }
#actionbar .slot { width: 50px; height: 50px; border: 2px solid #0a0806; border-radius: 3px; box-shadow: 0 0 0 1px var(--rim-dk), inset 0 0 12px rgba(0,0,0,.9); background: radial-gradient(circle at 50% 35%, #3a3028, #0c0a08); }
#actionbar .slot.big { width: 58px; height: 58px; box-shadow: 0 0 0 1px var(--rim), inset 0 0 12px rgba(0,0,0,.9); }
#actionbar .slot .key { left: auto; right: 3px; top: 1px; font-size: 9px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
#actionbar .slot .glyph { font-size: 22px; }
#actionbar .slot img { width: 76%; height: 76%; }
#micro { display: flex; align-items: flex-end; gap: 3px; }
#micro .mb { width: 30px; height: 38px; border-radius: 3px 3px 2px 2px; display: grid; place-items: center; color: var(--rim-hi); cursor: pointer; background: linear-gradient(180deg, #3a2e24, #16120e); border: 1px solid var(--rim-dk); box-shadow: inset 0 1px 0 rgba(255,230,180,.15), 0 2px 4px #000; }
#micro .mb:hover { color: #fff; border-color: var(--rim); box-shadow: 0 0 10px rgba(240,208,138,.45); transform: translateY(-2px); }
#micro .mb svg { width: 18px; height: 18px; }
#micro .bags { display: flex; align-items: center; gap: 6px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--rim-dk); }
#micro .bag { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--rim); background: radial-gradient(circle, #3a2e24, #0e0c0a); display: grid; place-items: center; cursor: pointer; }
#micro .bag img { width: 80%; }
#micro #flasks { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 11px; }
#micro #flasks .flask { width: 18px; height: 22px; }
#micro .goldc { font-family: var(--display); font-size: 12px; color: #ffd24a; display: flex; align-items: center; gap: 3px; text-shadow: 0 1px 2px #000; }
#micro .coin { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2b0, #d9a520 60%, #7a5210); }

/* keep floating readouts clear of the new frames */
#boss { bottom: 132px !important; }
#toasts { left: 14px !important; bottom: 300px !important; }
#prompt { bottom: 150px !important; }
#hint { left: 50% !important; bottom: auto !important; top: 104px; transform: translate(-50%, -8px) !important; max-width: 560px !important; text-align: center; }
#hint.show { transform: translate(-50%, 0) !important; }
#ui.hudoff #chat, #ui.hudoff #actionbar { pointer-events: none; }
@media (max-width: 1100px) { #micro .bags { display: none; } #chat { width: 320px; } }
@media (max-width: 860px) { #micro { display: none; } #tracker { width: 220px; } .uframe.target { left: auto; right: 240px; } }
#boss.ally .bar .fill { background: linear-gradient(180deg, #8ad07a, #3a8a3a 60%, #1a4a1a) !important; }
#boss.ally .name { font-size: 15px; }

/* ---------------------------------------------------------------- spell slots: icons, cooldown sweep, mana, tooltips */
#actionbar .slot.spell .sicon, #actionbar .slot.ult .sicon { position: absolute; inset: 3px; width: auto; height: auto; object-fit: contain; }
#actionbar .slot.spell .glyph { display: none; }
#actionbar .slot.spell.locked .sicon { display: none; } #actionbar .slot.spell.locked .glyph { display: block; opacity: .4; }
#actionbar .slot .cdt { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 15px; color: #fff; text-shadow: 0 0 4px #000, 0 1px 2px #000; pointer-events: none; }
#actionbar .slot .mana { position: absolute; left: 3px; bottom: 1px; font-family: var(--display); font-size: 9px; color: #9fc4ff; text-shadow: 0 0 3px #000; }
#actionbar .slot.nomana .sicon { filter: grayscale(.8) brightness(.55); } #actionbar .slot.nomana .mana { color: #ff7a6a; }
#actionbar .slot.cooling .sicon { filter: brightness(.6); }
#actionbar .slot.ult .res { background: linear-gradient(0deg, rgba(255,190,80,.55), rgba(255,226,160,.12)); mix-blend-mode: screen; }
#actionbar .slot.ult .cdt { font-size: 9px; align-items: end; padding-bottom: 3px; color: var(--rim-hi); }
#actionbar .slot.ult.ready { animation: ultReady 1.1s ease-in-out infinite; }
@keyframes ultReady { 50% { box-shadow: 0 0 0 1px var(--rim-hi), 0 0 26px rgba(255,200,110,.9), inset 0 0 12px rgba(0,0,0,.9); } }
#tooltip { position: absolute; width: 320px; padding: 10px 14px; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 50; font-size: 14px; line-height: 1.4; }
#tooltip.show { opacity: 1; }
#tooltip .tt-h { font-family: var(--display); font-size: 14px; letter-spacing: .08em; color: var(--parchment); margin-bottom: 2px; }
#tooltip .tt-h.gold { color: var(--rim-hi); }
#tooltip .tt-s { font-size: 12px; color: var(--mute); margin-bottom: 6px; text-transform: capitalize; }
#tooltip .tt-d { color: #e6ddcb; }
#tooltip .tt-k { margin-top: 8px; font-size: 12px; color: var(--mute); }
/* element-coloured damage numbers */
.dmg.el-fire { color: #ff9a4a; } .dmg.el-ice { color: #9fdcff; } .dmg.el-lightning { color: #fff07a; } .dmg.el-wind { color: #c8f2e0; } .dmg.el-shadow { color: #c090ff; } .dmg.el-light { color: #ffe9a8; }
.dmg.crit { font-size: 26px; animation: dmgCrit .95s ease-out forwards; }
@keyframes dmgCrit { 0% { transform: translate(-50%, 0) scale(1.9) rotate(-6deg); opacity: 1; } 18% { transform: translate(-50%, -6px) scale(1.15) rotate(2deg); } 100% { transform: translate(-50%, -54px) scale(.95); opacity: 0; } }
/* nameplates: elite crown + level */
.ehp .nm { font-family: var(--display); font-size: 11px; letter-spacing: .06em; }
.ehp .nm .lv { color: var(--rim-hi); margin-right: 5px; }
.ehp .nm .crown { color: #ffd24a; margin-right: 4px; }
/* ornate boss bar */
#boss { width: min(880px, 72vw) !important; }
#boss .name { font-size: 22px; letter-spacing: .32em; background: linear-gradient(180deg, #fff6df, #e2bc72 55%, #a87a2e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 6px #000); }
#boss .bar { height: 16px; border: 1px solid #0a0806; border-radius: 3px; box-shadow: 0 0 0 1px var(--rim-dk), 0 0 0 3px #0a0806, 0 0 24px rgba(0,0,0,.7); background: #1a0a0a; }
#boss .bar::before, #boss .bar::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) rotate(45deg); background: linear-gradient(135deg, var(--rim-hi), var(--rim-dk)); box-shadow: 0 0 0 2px #0a0806; z-index: 3; }
#boss .bar::before { left: -12px; } #boss .bar::after { right: -12px; }
#boss .bar .ghost { background: rgba(255,240,200,.55); transition: width .8s ease .4s; }
#boss .bar .fill { background: linear-gradient(180deg, #ff6a5e, #b8161e 55%, #5a0a10); }
#boss .phases i { background: var(--rim-hi); box-shadow: 0 0 6px var(--rim-hi); width: 3px; top: -5px; bottom: -5px; }
.ehp.exec::after { content: 'EXECUTE · LMB'; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); white-space: nowrap; font-family: var(--display); font-size: 11px; letter-spacing: .2em; color: #1a1206; background: linear-gradient(180deg, #ffe2a0, #d4aa5a); padding: 2px 8px; border-radius: 3px; box-shadow: 0 0 14px rgba(255,200,110,.8); animation: execPulse .7s ease-in-out infinite; }
@keyframes execPulse { 50% { transform: translateX(-50%) scale(1.08); } }

/* ---------------------------------------------------------------- waypoint guidance */
#wpLayer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
#wpMark { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .3s; }
#wpMark .wpIcon { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #1a1006;
  background: radial-gradient(circle at 50% 35%, #fff2c8, #f0c060 55%, #a87428); border-radius: 50%; box-shadow: 0 0 0 2px #1a1208, 0 0 0 3px #f0d08a, 0 0 18px rgba(255,200,100,.8); animation: wpBob 1.6s ease-in-out infinite; }
#wpMark .wpDist { position: absolute; left: -40px; width: 80px; top: 20px; text-align: center; font: 700 12px/1 var(--display, serif); letter-spacing: .08em; color: #ffe6b0; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
#wpMark .wpArrow { position: absolute; left: -9px; top: -34px; width: 18px; height: 16px; display: none; transform-origin: 9px 34px; }
#wpMark .wpArrow::before { content: ''; position: absolute; inset: 0; background: #ffd27a; clip-path: polygon(50% 0, 100% 100%, 50% 72%, 0 100%); filter: drop-shadow(0 0 4px rgba(255,200,100,.9)); }
#wpMark.off .wpArrow { display: block; }
#wpMark.off .wpIcon { animation: wpPulse 1.1s ease-in-out infinite; }
#wpMark.kill .wpIcon { background: radial-gradient(circle at 50% 35%, #ffd0c0, #ff6a4a 55%, #8a1a10); box-shadow: 0 0 0 2px #1a0806, 0 0 0 3px #ff9a7a, 0 0 18px rgba(255,90,60,.8); color: #fff; }
#wpMark.kill .wpArrow::before { background: #ff6a4a; }
#wpMark.near { opacity: .55; }
@keyframes wpBob { 50% { transform: translateY(-4px); } }
@keyframes wpPulse { 50% { transform: scale(1.15); } }
.wpThreat { position: absolute; left: -11px; top: -9px; width: 22px; height: 18px; background: #ff3a28; clip-path: polygon(50% 0, 100% 100%, 50% 70%, 0 100%); filter: drop-shadow(0 0 6px rgba(255,40,20,.9)); animation: wpThreat .7s ease-in-out infinite alternate; }
@keyframes wpThreat { to { filter: drop-shadow(0 0 12px rgba(255,40,20,1)); } }
.npcMark { position: absolute; left: -12px; top: -30px; width: 24px; text-align: center; font: 900 30px/1 var(--display, serif); color: #ffd23a; transform-origin: 12px 30px;
  -webkit-text-stroke: 1.5px #2a1a00; text-shadow: 0 0 12px rgba(255,200,40,.9), 0 2px 3px #000; animation: npcBob 1.4s ease-in-out infinite; }
.npcMark.turnin { color: #ffe680; }
@keyframes npcBob { 50% { margin-top: -5px; } }
.hudoff #wpLayer { display: none; }

@media (max-width: 1399px) { #ui .uframe.target { left: 14px; top: 100px; width: 280px; } }
#ui.hudoff .uframe.target { opacity: 0 !important; }
#lockon.soft { border-color: rgba(255,120,90,.9); box-shadow: 0 0 10px rgba(255,90,60,.6); width: 26px; height: 26px; margin: -13px 0 0 -13px; }
#lockon.soft::after { inset: 9px; background: #ff7a5a; }
.dmg.weak { color: #ffe36a !important; font-size: 1.25em; }
.dmg.resist { color: #9aa0a8 !important; opacity: .8; }
.dmg.weaktag { color: #ffd23a !important; font-size: 15px !important; letter-spacing: .12em; font-weight: 800; text-shadow: 0 0 10px rgba(255,200,40,.9), 0 2px 2px #000 !important; }
.dmg.restag { color: #b8c0cc !important; font-size: 12px !important; letter-spacing: .12em; }

/* ---------------------------------------------------------------- combo counter & feats */
#combo { position: absolute; left: calc(50% + 150px); top: 40%; text-align: left; opacity: 0; transform: translateX(16px); transition: opacity .25s, transform .25s; pointer-events: none; font-family: var(--display, serif); }
#combo.show { opacity: 1; transform: none; }
#combo b { display: block; font-size: 46px; line-height: 1; font-weight: 900; color: #fff3d0; text-shadow: 0 0 18px rgba(255,190,90,.6), 0 3px 0 #000; }
#combo b.pop { animation: cPop .18s ease-out; }
@keyframes cPop { from { transform: scale(1.35); } }
#combo span { display: block; font-size: 12px; letter-spacing: .4em; color: var(--rim-hi, #f0d08a); margin-top: 2px; }
#combo i { display: block; height: 3px; margin-top: 6px; background: linear-gradient(90deg, #f0d08a, transparent); transform-origin: left; animation: cDrain 3s linear forwards; }
@keyframes cDrain { to { transform: scaleX(0); } }
#combo.t1 b { color: #ffd27a; } #combo.t2 b { color: #ff9a4a; text-shadow: 0 0 22px rgba(255,120,40,.8), 0 3px 0 #000; } #combo.t3 b { color: #ff5a6a; text-shadow: 0 0 26px rgba(255,60,80,.9), 0 3px 0 #000; }
#featPop { position: absolute; left: 50%; top: 16%; transform: translate(-50%, -12px); display: flex; gap: 14px; align-items: center; padding: 12px 22px 12px 14px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,14,8,.94), rgba(40,28,12,.94)); border: 1px solid var(--rim, #c9a45c); box-shadow: 0 0 0 3px rgba(10,8,6,.8), 0 0 30px rgba(240,200,120,.25); }
#featPop.show { animation: featIn 4.5s ease forwards; }
@keyframes featIn { 0% { opacity: 0; transform: translate(-50%, -12px); } 8%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
#featPop .fi { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; color: #1a1006; background: radial-gradient(circle at 50% 35%, #fff2c8, #f0c060 55%, #a87428); transform: rotate(45deg); }
#featPop .fh { font: 700 11px/1 var(--display, serif); letter-spacing: .35em; color: var(--rim-hi, #f0d08a); }
#featPop .fn { font: 700 20px/1.2 var(--display, serif); color: #fff6df; margin-top: 4px; }
#featPop .fd { font-size: 13px; color: #cdbf9f; }
html.touch #combo { left: calc(50% + 90px); top: 26%; transform: scale(.8); }

/* ---------------------------------------------------------------- journal */
.jtabs { display: flex; gap: 22px; border-bottom: 1px solid rgba(201,164,92,.25); margin-bottom: 14px; }
.jtabs span { cursor: pointer; padding: 6px 2px 10px; font: 600 14px/1 var(--display, serif); letter-spacing: .2em; color: var(--mute, #9a8f7a); text-transform: uppercase; border-bottom: 2px solid transparent; }
.jtabs span.on { color: #fff3d0; border-color: var(--rim-hi, #f0d08a); }
.jtabs i { font-style: normal; font-size: 11px; color: var(--rim, #c9a45c); margin-left: 6px; }
.jbody { overflow: auto; min-height: 0; flex: 1; }
.jgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.jcard { padding: 10px 12px; background: rgba(0,0,0,.35); border: 1px solid rgba(201,164,92,.22); }
.jcard .jn { font: 700 15px/1.3 var(--display, serif); color: #f3e6c4; letter-spacing: .04em; }
.jcard.unk { opacity: .45; } .jcard.feat:not(.got) { opacity: .75; } .jcard.feat.got { border-color: var(--rim-hi, #f0d08a); box-shadow: inset 0 0 18px rgba(240,200,120,.12); }
.jcard .jw { color: #ffd86a; font-size: 13px; margin-top: 4px; } .jcard .js { color: #9fb4c8; font-size: 13px; margin-top: 2px; }
.jprog { position: relative; height: 14px; margin-top: 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(201,164,92,.3); }
.jprog i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8a6226, #e2bc72); }
.jprog span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 1px 2px #000; }
.jstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.jstats div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(201,164,92,.2); padding: 8px 2px; }
.jstats b { color: #ffe6b0; font-family: var(--display, serif); }
#slotBomb.empty img { filter: grayscale(1) brightness(.5); }

#travel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; width: 380px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
#travel .th { font: 700 15px/1.3 var(--display, serif); letter-spacing: .25em; color: var(--rim-hi, #f0d08a); }
#travel .ts { font-size: 13px; color: var(--mute, #9a8f7a); margin-bottom: 6px; }
#travel .btn { width: 100%; }
#travel .btn.ghost { opacity: .75; }