/* Multiplayer: buttons of the target bar, group frames and window, question boxes, trade, equipment of others,
   world boss timer / list / result and the damage meter. Art pixels like game.css (zoomed by --px). */

/* ---------- target bar of a player (Metin2 target board) ---------- */
#target.pc { width: auto; min-width: 176px; }
#target .tbtns { gap: 2px; margin-top: 3px; }
#ui.compact #target.pc { width: auto; min-width: 176px; }

/* ---------- small menus at the mouse ---------- */
.ctx-menu { position: absolute; z-index: 9000; padding: 2px; min-width: 84px; }
.ctx-title { font-size: 7px; padding: 1px 4px 2px; margin-bottom: 1px; box-shadow: 0 1px 0 #3a2e22; white-space: nowrap; }
.ctx-item { font-size: 7px; line-height: 9px; padding: 1px 4px; cursor: pointer; white-space: nowrap; }
.ctx-item:hover { background: rgba(242, 196, 90, .14); color: #fff; }
.ctx-item.armed { color: #ff8a7a; }

/* ---------- question box (invitations) ---------- */
.ask-box { left: 50%; transform: translateX(-50%); width: 168px; z-index: 8500; }
.ask-box .ask-text { text-align: center; font-size: 8px; line-height: 10px; margin-bottom: 2px; }
.ask-box .ask-time { text-align: center; font-size: 6px; margin-bottom: 4px; }
.ask-box .ask-btns { gap: 4px; }

/* ---------- group frames (left, under the player frame) ---------- */
#party { position: absolute; left: 4px; top: 62px; width: 96px; display: flex; flex-direction: column; gap: 2px; }
#ui.compact #party { top: 86px; }
/* buff icons above (#affects, game.css): their remaining time hangs below the icons */
#affects:not(:empty) ~ #party { top: 71px; }
#ui.compact #affects:not(:empty) ~ #party { top: 95px; }
#party .pt-head { display: flex; justify-content: space-between; align-items: center; height: 10px; padding: 0 3px; font-size: 7px; cursor: pointer;
  background: rgba(14, 11, 9, .72); box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze-d); }
#party .pt-head:hover { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze); }
#party .pt-gear { width: 8px; height: 8px; background: var(--ic-gear) center / 8px 8px no-repeat; opacity: .8; }
#party .pt-row { padding: 2px 3px 3px; cursor: pointer; }
#party .pt-row:hover { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze-l), inset 0 0 0 2px var(--edge); }
#party .pt-row.far { opacity: .62; }
#party .pt-row.dead .bar > i { background: #5a4a44; }
#party .pt-name { display: flex; align-items: center; gap: 2px; height: 8px; font-size: 7px; line-height: 8px; white-space: nowrap; overflow: hidden; }
#party .pt-lv { color: var(--gold); flex: none; }
#party .pt-n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#party .bar { height: 4px; margin-top: 2px; }
#party .pt-where { display: block; font-size: 6px; line-height: 6px; height: 6px; margin-top: 1px; white-space: nowrap; overflow: hidden; }
#party .pt-where:empty { display: none; }
.pt-crown { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 1px; vertical-align: -1px; background: var(--ic-crown) center / 8px 8px no-repeat; }

/* group window */
#party-win .pt-help { font-size: 7px; line-height: 9px; margin-bottom: 4px; }
#party-win .pt-wrow { display: grid; grid-template-columns: 1fr auto 30px 26px; gap: 3px; }
#party-win .pt-wrow > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#party-win .pt-wrow > :nth-child(3) { text-align: right; }
#party-win .pt-wrow .btn.small { min-width: 0; padding: 0 2px; }
#party-win .pt-opt { display: flex; justify-content: space-between; align-items: center; height: 13px; font-size: 7px; }
#party-win .pt-chips { gap: 2px; margin: 0; }
#party-win .keyhelp { margin: 3px 0 2px; line-height: 7px; }
#party-win .pt-inv { margin-top: 4px; }
#party-win .pt-inv input { flex: 1; min-width: 0; }
#party-win .pt-leave { width: 100%; margin-top: 4px; }

/* ---------- trade ---------- */
#trade { z-index: 600; }
#trade .tr-sides { display: flex; gap: 4px; }
#trade .tr-side { flex: 1; padding: 3px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #2e251c; }
#trade .tr-side.accepted { box-shadow: inset 0 0 0 1px #3f8f3f; background: rgba(40, 80, 30, .18); }
#trade .tr-head { height: 9px; line-height: 9px; margin-bottom: 2px; padding: 0 1px; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trade .tr-side.mine .tr-head { color: var(--gold); }
#trade .tr-ok { margin-left: auto; font-size: 7px; color: var(--green); }
#trade .tr-grid { display: grid; grid-template-columns: repeat(4, 18px); gap: 1px; justify-content: center; }
#trade .tr-side.mine .slot { cursor: pointer; }
#trade .tr-gold { display: flex; align-items: center; gap: 3px; height: 12px; margin-top: 3px; }
#trade .tr-gold i { width: 9px; height: 9px; flex: none; background: var(--ic-coin) center / 9px 9px no-repeat; }
#ui #trade .tr-gold-in { width: 56px; }
#trade .tr-gold-v { font-size: 7px; color: var(--gold); }
#trade .tr-amount { display: flex; gap: 3px; align-items: center; margin-top: 4px; font-size: 7px; }
#trade .tr-amount .eq-btns { margin: 0; }
#trade .tr-amount > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trade .keyhelp { margin-top: 4px; text-align: center; line-height: 7px; }
#trade .tr-btns { gap: 4px; margin-top: 4px; }
.inv-item.traded { opacity: .35; }

/* ---------- equipment of another player ---------- */
#inspect .ins-head { text-align: center; font-size: 7px; line-height: 9px; margin-bottom: 1px; }

/* ---------- world boss timer (top, left of the minimap) ---------- */
#wb-timer { position: absolute; right: 90px; top: 4px; width: 104px; padding: 3px 4px 4px; cursor: pointer; }
#wb-timer:hover { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze-l), inset 0 0 0 2px var(--edge), 0 2px 0 1px rgba(0, 0, 0, .45); }
#wb-timer.alive { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px #9a3a44, inset 0 0 0 2px var(--edge), 0 2px 0 1px rgba(0, 0, 0, .45); }
#wb-timer .wb-name { display: flex; align-items: center; gap: 3px; height: 9px; font-size: 7px; white-space: nowrap; }
#wb-timer .wb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #ff8a94; }
#wb-timer .wb-lv { flex: none; font-size: 6px; color: var(--gold); }
#wb-timer .wb-bar { height: 6px; margin-top: 2px; }
#wb-timer .wb-bar .bt { line-height: 6px; font-size: 6px; }
#wb-timer .wb-sub { height: 7px; line-height: 7px; margin-top: 2px; font-size: 6px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wb-timer.rage .wb-n, #wb-timer.rage .wb-sub { animation: blink 1s steps(2) infinite; }
#ui.compact #wb-timer { width: 88px; }
.wb-skull { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--ic-skull) center / 8px 8px no-repeat; }

/* events of the team (ui/events.js): under the boss timer, top set by the script */
#ev-box { position: absolute; right: 90px; top: 4px; width: 104px; padding: 3px 4px 4px; cursor: pointer; }
#ev-box:hover { box-shadow: 0 0 0 1px var(--edge), inset 0 0 0 1px var(--bronze-l), inset 0 0 0 2px var(--edge), 0 2px 0 1px rgba(0, 0, 0, .45); }
#ev-box .ev-head { height: 8px; line-height: 8px; font-size: 6px; color: var(--gold); }
#ev-box .ev-row { display: flex; justify-content: space-between; align-items: center; gap: 3px; height: 9px; font-size: 7px; white-space: nowrap; }
#ev-box .ev-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--green); }
#ev-box .ev-row.soon .ev-n { color: var(--dim); }
#ev-box .ev-t { flex: none; font-size: 6px; color: var(--text); text-shadow: var(--ol); }
#ui.compact #ev-box { width: 88px; }
#ev-win .ev-sec { color: var(--gold); font-size: 7px; line-height: 8px; margin: 4px 0 2px; }
#ev-win .ev-sec:first-child { margin-top: 0; }
#ev-win .ev-card { display: flex; gap: 4px; align-items: flex-start; padding: 2px 3px; margin-top: 2px; background: #1d1712; box-shadow: inset 0 0 0 1px var(--bronze-d); }
#ev-win .ev-card.on { box-shadow: inset 0 0 0 1px #3f7a30; }
#ev-win .ev-txt { display: flex; flex-direction: column; min-width: 0; font-size: 7px; line-height: 8px; }
#ev-win .ev-eff { color: #8ab98e; }
#ev-win .ev-none { font-size: 7px; line-height: 8px; }

/* notes for everybody who was not in the fight (under the boss timer, fade out by themselves) */
#wb-notes { position: absolute; right: 90px; top: 38px; width: 124px; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
#wb-notes .wb-note { padding: 2px 4px 3px; animation: wb-note-in .25s ease-out; transition: opacity .5s; }
#wb-notes .wb-note.out { opacity: 0; }
#wb-notes .wb-note-t { display: flex; align-items: center; gap: 3px; height: 9px; font-size: 7px; color: #ff8a94; white-space: nowrap; overflow: hidden; }
#wb-notes .wb-note-t span { overflow: hidden; text-overflow: ellipsis; }
#wb-notes .wb-note.kill .wb-note-t { color: var(--gold); }
#wb-notes .wb-note-s { font-size: 6px; line-height: 7px; height: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes wb-note-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* list of all world bosses */
#wb-win .wb-list { max-height: 180px; overflow-y: auto; margin-bottom: 3px; }
#wb-win .wb-row { padding: 2px 3px 3px; margin-bottom: 2px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px #2e251c; }
#wb-win .wb-row.cur { box-shadow: inset 0 0 0 1px var(--bronze); }
#wb-win .wb-row.alive { background: rgba(120, 30, 40, .22); }
#wb-win .wb-r1 { display: flex; gap: 4px; align-items: baseline; font-size: 7px; line-height: 9px; }
#wb-win .wb-r1 .wb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #ff8a94; }
#wb-win .wb-st { min-width: 30px; text-align: right; color: var(--text); }
#wb-win .wb-st.on { color: #ff6a7a; }
#wb-win .wb-r2 { font-size: 6px; line-height: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wb-win .keyhelp { line-height: 7px; }

/* result after a kill */
#wb-result { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: 204px; padding: 6px 8px 7px; z-index: 7000; }
#wb-result .wb-res-title { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; color: #ff8a94; }
#wb-result .wb-res-map { text-align: center; font-size: 7px; margin: 1px 0 4px; }
#wb-result .wb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 4px; }
#wb-result .wb-stat { padding: 2px 1px; text-align: center; font-size: 7px; line-height: 8px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px #2e251c; }
#wb-result .wb-stat .dim { font-size: 6px; }
#wb-result .wb-top { display: flex; gap: 3px; height: 9px; line-height: 9px; font-size: 7px; padding: 0 2px; }
#wb-result .wb-top:nth-child(odd) { background: rgba(0, 0, 0, .2); }
#wb-result .wb-rank { width: 10px; color: var(--dim); }
#wb-result .wb-tn { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#wb-result .wb-tp { width: 30px; text-align: right; }
#wb-result .wb-last { text-align: center; font-size: 6px; margin-top: 3px; }
#wb-result .wb-mine { margin-top: 4px; padding: 3px 4px; font-size: 7px; line-height: 9px; background: rgba(242, 196, 90, .07); box-shadow: inset 0 0 0 1px var(--bronze-d); }
#wb-result .wb-got { color: var(--green); }
#wb-result .wb-res-btns { gap: 4px; margin-top: 5px; }

/* ---------- damage meter ---------- */
#meter .mt-bar { display: flex; justify-content: space-between; gap: 2px; margin-bottom: 3px; }
#meter .mt-chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; }
#meter .mt-chip { text-align: center; }
#meter .mt-chip { height: 9px; line-height: 9px; padding: 0 3px; font-size: 6px; color: var(--dim); cursor: pointer; background: rgba(0, 0, 0, .35); }
#meter .mt-chip:hover { color: var(--text); }
#meter .mt-chip.on { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold-d); }
#meter .mt-rows { max-height: 110px; overflow-y: auto; }
#meter .mt-row { position: relative; display: flex; justify-content: space-between; gap: 3px; height: 10px; line-height: 10px; padding: 0 2px; margin-bottom: 1px;
  font-size: 7px; background: rgba(0, 0, 0, .42); }
#meter .mt-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .5; }
#meter .mt-name, #meter .mt-val { position: relative; white-space: nowrap; text-shadow: var(--ol); }
#meter .mt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#meter .mt-row.me .mt-name { color: var(--gold); }
#meter .mt-pct { color: #d8cdb6; }
#meter .mt-empty { font-size: 7px; padding: 3px 1px; }
#meter .mt-foot { margin-top: 2px; text-align: center; font-size: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- chat ---------- */
#chat .ch-party-tag { color: #7dff9a; }