:root {
  color-scheme: dark;
  --bg: #0b0d12; --panel: #161a24; --line: #2a3040; --gold: #d8b15a;
  --red: #d23c3c; --blue: #3c7bd2; --text: #e6e6ea; --muted: #8a90a0;
}
* { box-sizing: border-box; }
/* Author `display` rules beat the browser default for [hidden], so restate it.
   Without this every .screen stays laid out and the last one swallows clicks. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#screen-world { display: block; }

.panel { background: var(--panel); border: 1px solid var(--gold); padding: 24px 28px; min-width: 340px; border-radius: 6px; }
.panel.wide { min-width: 540px; }
h1, h2, h3 { margin: 0 0 12px; color: var(--gold); letter-spacing: 1px; }
h3 { margin-top: 18px; font-size: 14px; }
label { display: block; margin: 10px 0; }
input, select { width: 100%; padding: 8px; background: #0f121a; border: 1px solid var(--line); color: var(--text); border-radius: 4px; }
.row { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.row input, .row select { width: auto; flex: 1; }
button { padding: 8px 14px; background: #222838; color: var(--text); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
button:hover { border-color: var(--gold); }
button.primary { background: var(--red); border-color: #ff6b6b; font-weight: bold; }
button.danger { border-color: var(--red); color: #ff8b8b; }
button.tiny { padding: 2px 8px; font-size: 12px; }
button.active { outline: 2px solid var(--gold); }
.muted { color: var(--muted); font-size: 12px; }

#char-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
#char-list li { border: 1px solid var(--line); padding: 8px 10px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; }
#char-list li.sel { border-color: var(--gold); background: #1e2230; }

/* ---- 3D viewport ---- */
#viewport { position: absolute; inset: 0; overflow: hidden; }
#viewport canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

/* ---- world-space labels ---- */
.ent-label {
  font: 11px/1.25 system-ui, sans-serif; text-align: center; white-space: nowrap;
  text-shadow: 0 1px 2px #000, 0 0 4px #000; pointer-events: none; user-select: none;
  transform: translateY(-100%);
}
.ent-label .n { display: block; }
.ent-label.player .n { color: #9fd0ff; }
.ent-label .flag { display: inline-block; width: 20px; height: 14px; margin-right: 3px; object-fit: cover; vertical-align: -2px; border: 1px solid rgba(255,255,255,.35); border-radius: 1px; }
.ent-label .g { color: #ffd76a; }
.ent-label.monster .n { color: #f0c0c0; }
.ent-label.npc .n { color: #e8cf6a; }
.ent-label.drop { color: #f0e0a0; font-size: 10px; }
.ent-label .bar { display: block; width: 42px; height: 3px; margin: 2px auto 0; background: #300a0a; border: 1px solid rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; }
.ent-label .bar > i { display: block; height: 100%; width: 100%; background: #e33; transition: width .15s; }
.ent-label.player .bar > i { background: #4c4; }
.ent-label.dead { opacity: .35; }
.ent-label.dead .bar { display: none; }

.dmg-float {
  font: bold 13px/1 system-ui, sans-serif; text-shadow: 0 1px 3px #000, 0 0 6px #000;
  pointer-events: none; user-select: none; white-space: nowrap;
}
.dmg-float.big { font-size: 19px; }

/* ---- HUD ---- */
.hud { position: absolute; background: rgba(12, 14, 20, .85); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font-size: 12px; backdrop-filter: blur(3px); }
.hud-title { color: var(--gold); font-weight: bold; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
#hud-char { left: 10px; top: 10px; width: 234px; }
#hud-stats { left: 10px; top: 196px; width: 234px; }
/* i18n: pt/es/ru run longer than the original en/vi text ("Характеристики" for
   hud.stats, "Muertes causadas" for stat.kills, ...); let these two fixed-width HUD
   panels wrap onto a second line instead of overflowing their box. */
#hud-stats > .hud-title, #hud-char > .hud-title { flex-wrap: wrap; row-gap: 2px; }
#hud-char .kv { flex-wrap: wrap; row-gap: 2px; }
#hud-skillbar { left: 254px; top: 10px; width: 264px; }
#hud-bag { right: 10px; top: 10px; width: 312px; max-height: 66vh; overflow: auto; }
#hud-commandbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; min-height: 72px;
  display: flex; align-items: flex-end; justify-content: center; gap: 12px;
  padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background:
    radial-gradient(ellipse at 50% 0, rgba(151,105,35,.18), transparent 42%),
    linear-gradient(180deg, rgba(25,22,18,.95), rgba(7,8,12,.99));
  border-top: 1px solid #806329; box-shadow: 0 -7px 28px rgba(0,0,0,.68), inset 0 1px rgba(255,222,139,.08);
  backdrop-filter: blur(8px); overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
#hud-commandbar::before {
  content: ''; position: absolute; top: -1px; left: 50%; width: min(420px, 42vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #d5a948 35%, #fff0a8 50%, #d5a948 65%, transparent);
  box-shadow: 0 0 8px rgba(216,177,90,.45); pointer-events: none;
}
#hud-bottom { position: static; flex: none; display: flex; flex-direction: column; gap: 5px; align-items: center; padding: 0 12px 0 0; }
#hud-bottom .row { margin-top: 0; gap: 6px; flex-wrap: nowrap; }
#hud-bottom .row > * { flex: none; }
#hud-bottom select {
  width: 150px; min-height: 40px; padding: 7px 28px 7px 10px; color: #dfd5ba;
  background: #090b10; border-color: #514529; box-shadow: inset 0 0 12px rgba(0,0,0,.65);
}
#hud-bottom button {
  min-height: 40px; border-radius: 3px; border-color: #514529; color: #cfc5aa;
  background: linear-gradient(#25231f, #101116); box-shadow: inset 0 1px rgba(255,255,255,.04);
  font-weight: 600; letter-spacing: .15px;
}
#hud-bottom button:hover { color: #ffe6a3; border-color: #b68b35; }
#hud-bottom #btn-auto.primary { color: #cfc5aa; border-color: #5d4b2c; background: linear-gradient(#28251f, #101116); }
#hud-bottom #btn-auto.active {
  color: #fff0ce; border-color: #e08039; outline: 0;
  background: linear-gradient(#8b2d21, #40130f); box-shadow: inset 0 1px rgba(255,220,170,.18), 0 0 12px rgba(217,71,35,.34);
}
#hud-bottom #btn-manual.active {
  color: #fff0bd; border-color: #d2a34b; outline: 0;
  background: linear-gradient(#4b3b20, #1d170e); box-shadow: inset 0 0 0 1px rgba(255,218,120,.12), 0 0 9px rgba(210,163,75,.22);
}
#hud-session { left: 50%; bottom: 82px; transform: translateX(-50%); width: 260px; z-index: 45; }
#hud-session .stat-row { justify-content: space-between; }
#hud-log { left: 10px; bottom: 82px; width: 366px; }
#hud-hint { right: 10px; bottom: 82px; }

/* ---- skill bar (client/skillbar.js) ---- */
.skill-row { display: flex; flex-wrap: wrap; gap: 4px; }
.skill-row:first-child { margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); min-height: 34px; }
.skill-icon {
  position: relative; width: 34px; height: 34px; padding: 0; border-radius: 4px;
  border: 1px solid var(--line); background: #171a24 no-repeat center; cursor: pointer;
  color: var(--text); font: bold 10px/1 system-ui; overflow: hidden;
}
.skill-icon.text-chip { display: flex; align-items: center; justify-content: center; }
.skill-icon:hover { border-color: var(--gold); }
.skill-icon.pref { box-shadow: 0 0 0 2px var(--gold) inset; }
.skill-icon.lit { box-shadow: 0 0 0 2px #8ce8ff inset, 0 0 8px #8ce8ff; }
.skill-icon.unaffordable { filter: grayscale(.8) brightness(.55); }
.skill-icon.blocked { filter: grayscale(1) brightness(.4); outline: 1px solid #7a2a2a; }
.skill-icon.active-buff { border-color: #8ce86b; }
.skill-icon .sweep { position: absolute; inset: 0; pointer-events: none; }
#map-loading {
  position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(3, 4, 9, .96); pointer-events: all;
}
#map-loading .map-loading-panel {
  width: min(460px, calc(100vw - 32px)); padding: 30px 32px 26px; text-align: center;
  background: linear-gradient(145deg, rgba(24, 27, 40, .98), rgba(8, 10, 17, .98));
  border: 1px solid rgba(216,177,90,.8); border-radius: 8px;
  box-shadow: 0 10px 40px #000, inset 0 0 28px rgba(216,177,90,.05);
}
#map-loading .map-loading-kicker { color: var(--muted); font-size: 9px; letter-spacing: 3px; font-weight: bold; }
#map-loading h2 { margin: 9px 0 3px; color: var(--gold); font-size: 21px; letter-spacing: 1px; }
#map-loading p { min-height: 1.2em; margin: 0 0 10px; color: var(--muted); font-size: 12px; }
#map-loading #map-loading-map { color: var(--text); font-size: 14px; margin-bottom: 4px; }
#map-loading #map-loading-text { font-size: 11px; }
#map-loading .map-load-progress { position: relative; height: 18px; overflow: hidden; margin-top: 14px; background: #080a10; border: 1px solid var(--line); border-radius: 9px; }
#map-loading .map-load-progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 45%, transparent 70%); animation: map-loading-shine 1.8s linear infinite; pointer-events: none; }
#map-loading #map-load-bar { width: 0; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #8b6825, #e5c56f, #fff0ad); box-shadow: 0 0 14px rgba(229,197,111,.7); transition: width .25s ease-out; }
#map-loading #map-load-count { position: absolute; inset: 0; z-index: 1; color: #fff6d2; font-size: 11px; line-height: 16px; font-weight: bold; text-shadow: 0 1px 3px #000; }
#map-loading .spin {
  display: inline-block;
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line);
  border-top-color: var(--gold); animation: map-loading-spin .8s linear infinite;
}
@keyframes map-loading-spin { to { transform: rotate(360deg); } }
@keyframes map-loading-shine { to { transform: translateX(80%); } }
#log { height: 130px; overflow-y: auto; font-size: 12px; margin-bottom: 4px; }
#log div { padding: 1px 0; border-bottom: 1px dotted #1f2430; }
.ch-tag { color: var(--muted); font-size: 9px; font-weight: bold; margin-right: 3px; }
#log .ch-system { color: var(--blue); }
#log .ch-global { color: #9fd0ff; }
#log .ch-map { color: #b8f0a0; }
#log .ch-party { color: #e0c8ff; }
#log .ch-whisper { color: #f0a0e0; }

/* ---- rate strip (XP/min, kills/min, zen/min, next level) ---- */
.rate-strip { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 11px; color: var(--muted); }
.rate-strip b { color: var(--text); }

/* ---- chat channel tabs ---- */
.chat-tabs { display: flex; gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
.chat-tab {
  padding: 2px 6px; font-size: 10px; background: #141824; border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer; color: var(--muted); position: relative;
  /* i18n: tab labels now come from chat.* (client/i18n.js), which Lorvath writes in
     natural case ("Global", "Whisper", ...); keep the same all-caps MU look via CSS. */
  text-transform: uppercase; letter-spacing: .3px;
}
.chat-tab.active { border-color: var(--gold); color: var(--text); }
.chat-tab .dot { position: absolute; top: -2px; right: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: none; }
.chat-tab.unread .dot { display: block; }

/* ---- chat auto-translate (research/lorvath/bundle/v9/CHANGES.md "Chat auto-translate") ---- */
#chat-translate {
  margin-left: auto; padding: 2px 6px; font-size: 11px; line-height: 14px; background: #141824;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; color: var(--muted);
}
#chat-translate.on { border-color: var(--gold); color: var(--text); }
/* per-message translated/original swap (chatLine(), client/app.js): both spans stay in
   the DOM so the toggle button can flip which one is visible without re-rendering. */
.chat-text.chat-alt { display: none; }
.chat-tr-toggle {
  margin-left: 4px; padding: 0 3px; font-size: 9px; line-height: 12px; background: transparent;
  border: 1px solid var(--line); border-radius: 2px; color: var(--muted); cursor: pointer; vertical-align: middle;
}
.chat-tr-hint { margin-left: 4px; font-size: 9px; color: var(--muted); font-style: italic; }
/* Lorvath's own 44px minimum mobile touch target for this specific button (research/
   lorvath/bundle/v9/CHANGES.md), not the smaller inline per-message toggle above. */
@media (pointer: coarse) {
  #chat-translate { min-width: 44px; min-height: 30px; }
}

.bar { position: relative; height: 14px; background: #0f121a; border: 1px solid var(--line); margin: 3px 0; border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; width: 0; transition: width .2s; }
.bar.hp > div { background: var(--red); }
.bar.mp > div { background: var(--blue); }
.bar.xp > div { background: var(--gold); }
.bar span { position: absolute; inset: 0; text-align: center; font-size: 10px; line-height: 14px; }
.kv { display: flex; justify-content: space-between; margin-top: 4px; }
.kv.small { font-size: 11px; color: var(--muted); }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }

.items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-bottom: 8px; }
.items.worn-grid { grid-template-columns: repeat(3, 1fr); }
.item {
  border: 1px solid var(--line); border-radius: 3px; padding: 4px 4px 13px; font-size: 10px; line-height: 1.15;
  min-height: 46px; cursor: pointer; background: #0f121a; position: relative; overflow: hidden; word-break: break-word;
}
.item:hover { border-color: var(--gold); }
.item-icon { display: block; width: 100%; height: 56px; object-fit: contain; margin: 0 auto 5px; pointer-events: none; }
.item-name { display: block; text-align: center; }
.item-plus { position: absolute; top: 3px; right: 3px; color: var(--gold); font-weight: bold; text-shadow: 0 1px 3px #000; }
.item:has(.item-icon) { background: radial-gradient(ellipse at center, #293026, #0f121a 75%); }
.item.worn { border-color: #4a7a5a; }
.item .cnt { position: absolute; right: 3px; bottom: 2px; color: var(--gold); font-weight: bold; }
.item.empty { opacity: .32; cursor: default; color: var(--muted); }
.item.empty.slot-art { opacity: .55; background-repeat: no-repeat; background-position: center 4px; background-size: auto 48px; padding-top: 54px; }

/* loading screen */
#screen-loading { overflow: hidden; background: #030409; }
.mumain-loading-bg { position: absolute; inset: 0; background: linear-gradient(rgba(2,3,8,.35),rgba(2,3,8,.65)), url('/client/assets/mumain/Interface/LSBg03.jpg') center/cover; }
#screen-loading .panel { min-width: 420px; text-align: center; position: relative; background: rgba(8,10,17,.86); }
#load-note { margin: 10px 0 14px; min-height: 2.6em; }
#load-note.err { color: #ffb0b0; }
#load-skip { opacity: .75; }

/* ---- character stats window (client/statswindow.js), same frame as the inventory ---- */
.stats-window { right: calc(10px + 8 * 34px + 26px + 10px); top: 60px; width: 330px; max-width: calc(100vw - 20px); max-height: 84vh; display: flex; flex-direction: column; padding-bottom: 0; user-select: none; }
.stats-window .muwin-head { flex: none; margin-bottom: 0; }
.stats-body { overflow-y: auto; padding: 8px 2px 10px; font-size: 12px; color: #d8d8d8; scrollbar-width: thin; scrollbar-color: #6b5520 #0b0b0e; }
.stats-note { margin: 0 0 4px; font-size: 11px; color: #8a90a0; font-style: italic; }
.stats-body h4 { margin: 12px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #3a2e12; font: 600 11px/1 system-ui; letter-spacing: 2px; text-transform: uppercase; color: #e5ac01; }
.stats-body p { margin: 4px 0; font-size: 11px; line-height: 1.45; }
.stats-body p.muted, .stats-body .muted { color: #8a90a0; font-size: 11px; }
.stats-body b { color: #e5ac01; }
.stats-modebtns { display: flex; gap: 6px; margin-bottom: 6px; }
.stats-modebtns button { flex: 1; padding: 4px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.stats-modebtns button.on { border-color: #e5ac01; color: #e5ac01; background: #2a2210; }
.stats-weights { display: grid; gap: 4px; margin: 6px 0; }
.stats-weight-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid #1e1c16; background: #07080a; }
.stats-weight-row span:first-child { flex: 1; }
.stats-weight-row span:last-child { color: #8a90a0; }
.stats-weight-input { width: 52px; padding: 2px 4px; text-align: right; background: #0b0b0e; border: 1px solid #3a3322; color: #e5ac01; border-radius: 2px; font: 12px system-ui; }
.stats-weight-input:focus { outline: none; border-color: #e5ac01; }
.stats-waiting { margin: 6px 0; padding: 4px 8px; border: 1px solid #3a3322; background: #07080a; color: #8a90a0; font-size: 11px; }
.stats-attrs { display: grid; gap: 3px; margin-bottom: 6px; }
.stats-attr-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; border: 1px solid #1e1c16; background: #07080a; }
.stats-attr-row b { display: inline-block; min-width: 44px; text-align: right; margin-left: 6px; }
.stats-add { padding: 1px 8px; font-size: 11px; min-width: 34px; }
.stats-add:disabled { opacity: .35; cursor: default; }
.stats-add:disabled:hover { border-color: var(--line); }
.stats-total, .stats-defense, .stats-offense { display: grid; gap: 1px; margin-bottom: 4px; }
.stats-kv { display: flex; justify-content: space-between; padding: 2px 6px; }
.stats-kv:nth-child(odd) { background: rgba(255,255,255,.025); }
.stats-approx { color: #6f6a5a; font-size: 10px; }

/* ---- primary in-game HUD skin -------------------------------------------------
   Class Quest and Inventory define the visual language for gameplay UI.  The
   character plate, compact stats and skill rack use the same obsidian/brass frame,
   inset rows and restrained typography instead of the older blue debug-card skin. */
#hud-char, #hud-stats, #hud-skillbar {
  background:
    radial-gradient(ellipse at 50% 0, rgba(142, 102, 31, .11), transparent 52%),
    linear-gradient(145deg, rgba(18, 17, 15, .97), rgba(7, 8, 11, .97));
  border: 1px solid #6b5520;
  border-radius: 3px;
  padding: 0 10px 9px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.95), 0 8px 24px rgba(0,0,0,.58), inset 0 0 24px rgba(213,169,72,.025);
  backdrop-filter: blur(5px);
}
#hud-char::before, #hud-stats::before, #hud-skillbar::before {
  content: ''; position: absolute; left: 9px; right: 9px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,172,1,.7), transparent);
  pointer-events: none;
}
#hud-char > .hud-title, #hud-stats > .hud-title, #hud-skillbar > .hud-title {
  min-height: 27px; margin: 0 -10px 8px; padding: 7px 10px 6px;
  border-bottom: 1px solid #3a2e12;
  background: linear-gradient(180deg, rgba(35,29,18,.98), rgba(13,12,10,.98));
  color: #e5ac01; font: 600 11px/1 system-ui; letter-spacing: 1.5px; text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
}
#hud-char > .hud-title b { color: #f1d38b; letter-spacing: 1px; }
#hud-char > .hud-title .muted { color: #8f846c; font-size: 9px; letter-spacing: .8px; }
#hud-stats > .hud-title { flex-wrap: nowrap; }
#hud-stats-open {
  margin-left: auto; padding: 2px 6px; color: #b9a46a; background: rgba(7,8,10,.65);
  border-color: #4b3d20; border-radius: 2px; font-size: 9px; letter-spacing: .4px;
}
#hud-stats-open:hover { color: #ffe6a3; border-color: #a98336; }
#hud-char .bar {
  height: 16px; margin: 5px 0; border: 1px solid #504326; border-radius: 2px;
  background: #06070a; box-shadow: inset 0 2px 5px rgba(0,0,0,.85), 0 1px rgba(255,221,135,.04);
}
#hud-char .bar::after {
  content: ''; position: absolute; inset: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.13), transparent 42%, rgba(0,0,0,.23));
}
#hud-char .bar > div { box-shadow: inset 0 0 8px rgba(255,255,255,.1); }
#hud-char .bar.hp > div { background: linear-gradient(90deg, #651812, #bd3829 72%, #e06448); }
#hud-char .bar.mp > div { background: linear-gradient(90deg, #152f65, #286ac0 72%, #4e99e3); }
#hud-char .bar.xp > div { background: linear-gradient(90deg, #705212, #b98b29 72%, #e1bd5d); }
#hud-char .bar span {
  z-index: 2; line-height: 14px; color: #f3eee3; font-size: 9px; font-weight: 600;
  letter-spacing: .25px; text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
#hud-char .kv, #hud-stats .stat-row {
  margin-top: 3px; padding: 4px 6px; border: 1px solid #201d16; border-radius: 2px;
  background: rgba(5,6,8,.72); color: #aaa18d;
}
#hud-char .kv b, #hud-stats .stat-row b { color: #ddd3b9; font-weight: 600; }
#hud-char .kv.small { font-size: 10px; }
#hud-stats .stat-row { min-height: 25px; }

#hud-skillbar { width: 274px; }
#hud-skillbar > .hud-title { justify-content: center; }
#hud-skillbar .skill-row { gap: 5px; }
#hud-skillbar .skill-row:first-child {
  min-height: 39px; margin-bottom: 7px; padding: 0 0 7px;
  border-bottom: 1px solid #3a2e12;
}
#hud-skillbar .skill-icon {
  width: 36px; height: 36px; border: 1px solid #554724; border-radius: 2px;
  background-color: #08090c;
  box-shadow: inset 0 0 0 1px rgba(255,222,140,.035), inset 0 -8px 13px rgba(0,0,0,.3), 0 1px 3px #000;
}
#hud-skillbar .skill-icon::after {
  content: ''; position: absolute; inset: 1px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.035);
}
#hud-skillbar .skill-icon:hover { border-color: #c39233; box-shadow: inset 0 0 8px rgba(229,172,1,.12), 0 0 8px rgba(229,172,1,.16); }
#hud-skillbar .skill-icon.pref { border-color: #e5ac01; box-shadow: inset 0 0 0 1px #e5ac01, 0 0 7px rgba(229,172,1,.32); }
#hud-skillbar .skill-icon.lit { border-color: #87d9e9; box-shadow: inset 0 0 0 1px #87d9e9, 0 0 9px rgba(105,215,239,.45); }
#hud-skillbar .skill-icon.active-buff { border-color: #72b85a; box-shadow: inset 0 0 0 1px rgba(114,184,90,.55); }

/* Character sheet: grouped panels and rows now follow the Inventory/Quest rhythm. */
.stats-window { width: 350px; background: linear-gradient(145deg, rgba(16,15,14,.98), rgba(7,8,10,.98)); }
.stats-body { padding: 4px 0 11px; }
.stats-note { margin: 7px 4px 10px; padding: 7px 8px; border-left: 2px solid #6b5520; background: rgba(31,26,16,.45); }
.stats-body h4 {
  margin: 11px 0 5px; padding: 6px 8px; border: 1px solid #3a2e12;
  background: linear-gradient(90deg, rgba(49,39,19,.62), rgba(12,11,9,.55));
  font-size: 10px; letter-spacing: 1.6px;
}
.stats-modebtns { gap: 4px; padding: 0 2px; }
.stats-modebtns button, .stats-add {
  border-color: #4b3d20; border-radius: 2px; background: linear-gradient(#24211a, #0d0e11); color: #bcb29a;
}
.stats-modebtns button.on { border-color: #b98b29; color: #f1cc70; background: linear-gradient(#46371d, #19140d); box-shadow: inset 0 0 7px rgba(229,172,1,.09); }
.stats-autoinfo { margin: 5px 2px 7px; padding: 6px; border: 1px solid #242016; background: rgba(5,6,8,.58); }
.stats-weight-row, .stats-attr-row, .stats-kv {
  min-height: 27px; padding: 4px 7px; border: 1px solid #211e17; border-radius: 2px;
  background: rgba(5,6,8,.72);
}
.stats-weight-row:hover, .stats-attr-row:hover, .stats-kv:hover { border-color: #3c321e; background: rgba(24,21,15,.76); }
.stats-total, .stats-defense, .stats-offense { gap: 3px; }
.stats-kv:nth-child(odd) { background: rgba(5,6,8,.72); }
.stats-waiting { min-height: 28px; margin: 7px 2px; padding: 6px 8px; border-radius: 2px; }
.stats-dmg-line, .stats-def-line { margin: 3px 2px !important; padding: 4px 7px; background: rgba(5,6,8,.55); }

/* ---- unified bottom menu: a single icon row beside the auto-train controls ---- */
#hud-menu {
  position: static; flex: none; display: flex; align-items: center; gap: 5px;
  padding: 4px 0 4px 13px; border-left: 1px solid rgba(216,177,90,.3);
}
#hud-menu button {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0; position: relative;
  color: #a99b7b; background: linear-gradient(145deg, #26251f, #111217 72%);
  border: 1px solid #514529; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,225,150,.025), inset 0 -8px 15px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.35);
}
#hud-menu button::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,155,40,.35), transparent); opacity: .45;
}
#hud-menu button:hover {
  color: #f0ca74; border-color: #b98a36; background: linear-gradient(145deg, #383124, #15151a 72%);
  box-shadow: inset 0 0 10px rgba(213,169,72,.1), 0 0 10px rgba(213,169,72,.16);
}
#hud-menu button:active { transform: translateY(1px); }
#hud-menu svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.45;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #000); pointer-events: none;
}
#hud-menu kbd {
  position: absolute; top: 2px; right: 3px; min-width: 11px; padding: 1px 2px;
  font: 700 8px/1 system-ui; text-align: center; color: #766d5c; background: rgba(0,0,0,.28); border-radius: 2px;
}
#hud-menu button:hover kbd { color: #bda873; }
.muwin { position: absolute; z-index: 40; background: rgba(12, 12, 16, .94); border: 1px solid #6b5520; box-shadow: 0 0 0 1px #000, 0 8px 30px rgba(0,0,0,.7); border-radius: 3px; padding: 0 12px 10px; }
.muwin-head { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 5; margin: 0 -12px 8px; padding: 7px 0 6px; border-bottom: 1px solid #3a2e12; background: linear-gradient(#1d1810, #0e0c09); font: 600 12px/1 system-ui; letter-spacing: 2px; text-transform: uppercase; color: #e5ac01; }
.muwin-x { position: absolute; right: 6px; top: 3px; padding: 0 6px; background: transparent; border: 0; color: #c9b27a; font-size: 18px; line-height: 1; }
#inv-win { right: 10px; top: 60px; width: calc(8 * 34px + 26px); user-select: none; }
.inv-doll { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 52px 84px 62px 62px; gap: 6px; margin-bottom: 8px; }
.doll-slot { position: relative; border: 1px solid #3a3322; background: #0b0b0e center/contain no-repeat; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #6f6a5a; cursor: default; }
.doll-slot:not(.filled) { background-size: auto 70%; opacity: .75; }
.doll-slot.filled { cursor: pointer; background: radial-gradient(ellipse at center, #2a2618, #0b0b0e 75%); }
.doll-slot.exc { border-color: #1aff80; box-shadow: inset 0 0 8px rgba(26,255,128,.35); }
.doll-slot img { max-width: 90%; max-height: 90%; object-fit: contain; pointer-events: none; }
.doll-slot .dur { position: absolute; left: 3px; bottom: 2px; height: 3px; border-radius: 1px; max-width: calc(100% - 6px); }
.inv-pages { display: flex; gap: 4px; align-items: center; }
.inv-page { padding: 2px 10px; font-size: 11px; min-width: 32px; }
.inv-page.on { border-color: #e5ac01; color: #e5ac01; background: #2a2210; }
.inv-page.locked { opacity: .45; }
.inv-page.locked::after { content: ' 🔒'; font-size: 9px; }
.inv-cap { text-align: right; margin: -18px 0 6px; }
.inv-actions { display: flex; gap: 6px; margin: 6px 0; }
.inv-actions button { flex: 1; padding: 4px 6px; font-size: 11px; }
.inv-bulk.on { border-color: #e5ac01; color: #e5ac01; }
.inv-grid { position: relative; background-color: #07080a; background-image: linear-gradient(#1e1c16 1px, transparent 1px), linear-gradient(90deg, #1e1c16 1px, transparent 1px); background-size: 34px 34px; border: 1px solid #3a3322; }
.inv-item { position: absolute; box-sizing: border-box; border: 1px solid rgba(160,140,90,.35); background: radial-gradient(ellipse at center, rgba(60,52,30,.55), rgba(10,10,12,.4) 80%); display: flex; align-items: center; justify-content: center; cursor: grab; }
.inv-item:hover { border-color: #e5ac01; }
.inv-item img { max-width: 92%; max-height: 92%; object-fit: contain; pointer-events: none; }
.inv-item.exc { border-color: rgba(26,255,128,.7); box-shadow: inset 0 0 10px rgba(26,255,128,.25); }
.inv-item.sel { outline: 2px solid #e5ac01; background: rgba(229,172,1,.18); }
.inv-item.locked { border-style: dashed; }
.inv-item.worn-out { box-shadow: inset 0 0 0 2px rgba(208,74,58,.6); }
.inv-item.dragging { opacity: .25; }
.inv-item.ghost { position: fixed; z-index: 100; pointer-events: none; opacity: .85; }
.inv-item .cnt { position: absolute; right: 2px; bottom: 0; font: bold 10px system-ui; color: #fff; text-shadow: 0 0 3px #000; }
.inv-item .plus { position: absolute; left: 2px; top: 0; font: bold 10px system-ui; color: #ffcc1a; text-shadow: 0 0 3px #000; }
.inv-item .lock { position: absolute; right: 1px; top: 0; font-size: 9px; }
/* Lorvath bundle v7 "personal" (permanently-bound) jewel badge (tip.personalMark). */
.inv-item .personal, .wh-item .personal, .trade-item .personal {
  position: absolute; left: 1px; bottom: 1px; font: bold 8px system-ui; color: #fff;
  background: #8a2020; border: 1px solid #e0a0a0; border-radius: 2px; padding: 0 2px; line-height: 1.3;
}
.inv-noicon { font-size: 9px; text-align: center; color: #bbb; padding: 2px; }
.inv-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; }
.inv-foot b { color: #e5ac01; }
.inv-repair { padding: 3px 8px; font-size: 11px; }
.inv-menu { position: fixed; z-index: 120; display: grid; min-width: 150px; background: #0e0e12; border: 1px solid #6b5520; box-shadow: 0 6px 20px rgba(0,0,0,.7); }
.inv-menu button { text-align: left; border: 0; border-radius: 0; background: transparent; padding: 6px 12px; font-size: 12px; }
.inv-menu button:hover { background: #2a2210; color: #e5ac01; }
.item-tip { position: fixed; z-index: 110; max-width: 300px; pointer-events: none; background: rgba(6,6,8,.96); border: 1px solid #5a4a22; padding: 8px 10px; font-size: 12px; line-height: 1.45; color: #d8d8d8; box-shadow: 0 6px 24px rgba(0,0,0,.8); }
.item-tip .tt-name { font-weight: 600; font-size: 13px; color: #fff; }
.item-tip .tt-name.exc, .item-tip .exc { color: #1aff80; }
.item-tip .tt-type { font-size: 10px; letter-spacing: 1px; color: #b9a46a; }
.item-tip .tt-tier { font-size: 10px; letter-spacing: 1px; color: #8a90a0; margin-bottom: 4px; }
.item-tip .up { color: #80b3ff; }
.item-tip .bad { color: #ff6b5b; }
.item-tip .tt-dur i { display: inline-block; width: 90px; height: 5px; background: #222; vertical-align: middle; margin: 0 4px; }
.item-tip .tt-dur b { display: block; height: 100%; background: #4caf6a; }
.item-tip .tt-sec { margin-top: 6px; font-size: 10px; letter-spacing: 1px; color: #1aff80; }
.item-tip .tt-timed { color: #80b3ff; margin-top: 2px; }
.item-tip .tt-timed.bad { color: #ff6b5b; }

.chaos-window { left: 50%; top: 228px; transform: translateX(-50%); width: 320px; max-height: 76vh; overflow-y: auto; user-select: none; }
.chaos-window.shake { animation: chaos-shake .45s ease; }
.chaos-body { display: flex; flex-direction: column; gap: 8px; position: relative; }
.chaos-body.charging .chaos-mixes, .chaos-body.charging .chaos-slots, .chaos-body.charging .chaos-go {
  pointer-events: none; opacity: .35; filter: grayscale(.5); transition: opacity .25s ease;
}
.chaos-mixes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; max-height: 160px; overflow-y: auto; }
.chaos-mix { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; font-size: 11px; text-align: left; }
.chaos-mix.on { border-color: #e5ac01; color: #e5ac01; background: #2a2210; }
.chaos-mix b { color: #4caf6a; }
.chaos-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; background-color: #07080a; border: 1px solid #3a3322; padding: 6px; border-radius: 3px; min-height: 44px; }
.chaos-slot { aspect-ratio: 1; border: 1px dashed #3a3322; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #6f6a5a; cursor: default; }
.chaos-slot.filled { border-style: solid; border-color: #6b5520; cursor: pointer; background: radial-gradient(ellipse at center, #2a2618, #0b0b0e 75%); }
.chaos-slot img { max-width: 90%; max-height: 90%; object-fit: contain; pointer-events: none; }
.chaos-rate { font-size: 12px; min-height: 16px; }
.chaos-rate b { color: #e5ac01; }
.chaos-rate .bad { color: #ff6b5b; }
.chaos-go { padding: 6px; font-weight: 600; letter-spacing: 1px; }

/* ---- Chaos Machine mixing animation: charge stage + result reveal card ---- */
.chaos-stage { position: relative; height: 118px; border: 1px solid #3a3322; border-radius: 3px; background: radial-gradient(ellipse at center, #14100a 0%, #07080a 70%); overflow: hidden; }
.chaos-vortex { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.chaos-stage.reduced { animation: chaos-static-pulse 1.6s ease-in-out infinite; background: radial-gradient(ellipse at center, rgba(229,172,1,.28) 0%, #07080a 72%); }
.chaos-flying { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.chaos-flying img {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 214, 110, .9));
  transition: transform .65s cubic-bezier(.25,.7,.2,1), opacity .65s ease;
}
.chaos-result {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; text-align: center; cursor: pointer; border-radius: 4px;
  background: rgba(4, 4, 6, .94); pointer-events: auto;
}
.chaos-result-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 4px; }
.chaos-result-icon { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.chaos-result-icon img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; }
.chaos-result-title { font-weight: 700; letter-spacing: .5px; font-size: 15px; }
.chaos-result-sub { font-size: 12px; color: #cfc7ad; }
.chaos-result-hint { font-size: 10px; color: #6f6a5a; margin-top: 4px; letter-spacing: .5px; }

.chaos-result.success .chaos-result-title { color: #ffe9a8; text-shadow: 0 0 10px #e5ac01; }
.chaos-result.success .chaos-result-icon img { animation: chaos-pop .5s cubic-bezier(.25,.9,.3,1.3); filter: drop-shadow(0 0 14px #ffd876); }
.chaos-result.success .chaos-result-fx::before {
  content: ''; position: absolute; inset: -60% -60%; background:
    conic-gradient(from 0deg, transparent 0deg, rgba(255,232,168,.5) 6deg, transparent 14deg, transparent 34deg,
    rgba(255,232,168,.4) 42deg, transparent 50deg, transparent 70deg, rgba(255,232,168,.5) 78deg, transparent 86deg,
    transparent 106deg, rgba(255,232,168,.4) 114deg, transparent 122deg, transparent 142deg, rgba(255,232,168,.5) 150deg,
    transparent 158deg, transparent 178deg, rgba(255,232,168,.4) 186deg, transparent 194deg, transparent 214deg,
    rgba(255,232,168,.5) 222deg, transparent 230deg, transparent 250deg, rgba(255,232,168,.4) 258deg, transparent 266deg,
    transparent 286deg, rgba(255,232,168,.5) 294deg, transparent 302deg, transparent 322deg, rgba(255,232,168,.4) 330deg, transparent 338deg);
  animation: chaos-rays 1.1s ease-out forwards;
}
.chaos-result.success .chaos-result-fx::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,232,168,.85) 0%, rgba(255,232,168,0) 60%);
  animation: chaos-flash .55s ease-out forwards;
}
.chaos-result.destroyed .chaos-result-title { color: #ff8a75; }
.chaos-result.destroyed .chaos-result-icon img { animation: chaos-shatter .6s ease-in forwards; }
.chaos-result.destroyed .chaos-result-fx::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(210,40,40,.55) 0%, rgba(210,40,40,0) 65%); animation: chaos-flash .5s ease-out forwards;
}
.chaos-result.destroyed .chaos-result-fx::before {
  content: ''; position: absolute; left: 50%; bottom: 18%; width: 70px; height: 70px; margin-left: -35px;
  background: radial-gradient(circle, rgba(60,58,54,.55) 0%, rgba(60,58,54,0) 70%); animation: chaos-smoke 1s ease-out forwards;
}
.chaos-result.downgraded .chaos-result-title, .chaos-result.failed .chaos-result-title { color: #e5ac01; animation: chaos-flicker .9s ease-in-out; }
.chaos-result.downgraded .chaos-result-icon img, .chaos-result.failed .chaos-result-icon img { filter: grayscale(.55) brightness(.65); }

@keyframes chaos-static-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes chaos-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes chaos-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chaos-rays { 0% { opacity: 0; transform: rotate(0deg) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(70deg) scale(1.4); } }
@keyframes chaos-shatter { 0% { transform: scale(1) rotate(0deg); opacity: 1; filter: none; } 35% { transform: scale(1.08) rotate(-6deg); } 70% { transform: scale(.75) rotate(16deg); opacity: .45; filter: brightness(.5) saturate(0); } 100% { transform: scale(.4) rotate(26deg); opacity: 0; } }
@keyframes chaos-smoke { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-40px) scale(1.4); } }
@keyframes chaos-flicker { 0%, 100% { opacity: .55; } 20% { opacity: 1; } 35% { opacity: .3; } 55% { opacity: .9; } 75% { opacity: .4; } }
@keyframes chaos-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 5px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }

@media (prefers-reduced-motion: reduce) {
  .chaos-window.shake { animation: none; }
  .chaos-flying img { transition: opacity .3s ease; }
  .chaos-result-icon img, .chaos-result-title, .chaos-result-fx::before, .chaos-result-fx::after { animation: none !important; }
  .chaos-result { transition: opacity .2s ease; }
  .chaos-stage.reduced { animation: none; opacity: .85; }
}
.item-tip .tt-price { margin-top: 6px; color: #e5ac01; }
.stats-waiting.has { color: #e5ac01; border-color: #6b5520; background: #2a2210; }

/* ---- entry screens: login / server select (client/app.js) ---- */
.entry-screen { background: #05060a; }
.entry-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(216,177,90,.10), transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(60,40,10,.35), transparent 65%),
    linear-gradient(180deg, #0a0b10 0%, #05060a 60%, #030308 100%);
}
.entry-screen .entry-bg { background-image: linear-gradient(rgba(3,4,9,.38), rgba(3,4,9,.70)), url('/client/assets/mumain/Interface/LSBg01.jpg'); background-position: center; background-size: cover; }
#screen-servers .entry-bg { background-image: linear-gradient(rgba(3,4,9,.42), rgba(3,4,9,.72)), url('/client/assets/mumain/Interface/LSBg02.jpg'); }
/* entry-screen ember particles (client/app.js #login-embers) -- same cheap CSS-only
   effect as the landing page (client/landing/landing.css .landing-ember), skipped
   for prefers-reduced-motion. */
.entry-embers { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.entry-ember {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2a8 0%, var(--gold) 55%, transparent 75%);
  opacity: 0; animation: entry-ember-rise linear infinite;
  box-shadow: 0 0 6px 1px rgba(216,177,90,.6);
}
@keyframes entry-ember-rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: .9; }
  90% { opacity: .35; }
  100% { transform: translateY(-105vh) translateX(var(--ember-drift, 20px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .entry-embers { display: none; } }
.entry-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 1; width: 100%; }
.entry-logo { max-width: min(72vw, 420px); max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(216,177,90,.35)); }
.entry-logo.small { max-height: 64px; }
.entry-logo-text {
  font: 700 42px/1 Georgia, "Times New Roman", serif; letter-spacing: 10px; color: var(--gold);
  text-shadow: 0 0 24px rgba(216,177,90,.45), 0 2px 4px #000;
}
.entry-logo-text.small { font-size: 22px; letter-spacing: 6px; }
.entry-tagline { margin-top: -10px; color: var(--muted); font-size: 13px; letter-spacing: .5px; text-align: center; }
.entry-panel { min-width: 300px; text-align: left; }
.login-btn-row { display: flex; gap: 8px; margin-top: 10px; }
.login-btn-row button { flex: 1; }
.entry-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.entry-divider::before, .entry-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.entry-guest-row { margin: 0; text-align: center; }
.guest-cta {
  display: inline-block; width: 100%; text-align: center; padding: 10px 14px; border-radius: 4px;
  border: 1px solid var(--gold); color: var(--gold); text-decoration: none; font-weight: 600; font-size: 13px;
  box-sizing: border-box;
}
.guest-cta:hover, .guest-cta:focus-visible { background: rgba(216,177,90,.12); }
.entry-panel h2 { text-align: center; text-transform: uppercase; letter-spacing: 1px; }
/* i18n: language dropdown under the login form + the SIGNED IN AS row's natural-case
   label (screens.signedInAs, client/i18n.js), kept all-caps like the rest of the entry
   screens through CSS instead of hardcoded text. */
.entry-lang-row { margin-top: 10px; text-align: center; }
.entry-lang-row select { background: #141824; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; }

.servers-panel { min-width: 380px; max-width: 420px; }
.servers-account-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.servers-account-row > span:first-child { text-transform: uppercase; letter-spacing: .5px; }
.servers-account-row b { color: var(--gold); }
.server-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.server-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; background: #0f121a;
}
.server-row:hover { border-color: var(--gold); }
.server-row.offline { opacity: .5; cursor: default; }
.server-row .server-name { flex: none; width: 96px; font-weight: 600; }
.server-row .server-bar { flex: 1; height: 12px; background: #0a0c12; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; position: relative; }
.server-row .server-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #8a6a1e, var(--gold)); }
.server-row .server-pct { flex: none; width: 54px; text-align: right; font-size: 12px; color: var(--muted); }
.server-row.full .server-pct { color: var(--gold); font-weight: 600; }

/* ---- character select screen: full-bleed 3D + overlay panel (client/charselect.js) ---- */
.chars-screen { display: block; background: #05060a; }
.mumain-char-bg { position: absolute; inset: 0; background: linear-gradient(rgba(3,4,9,.28),rgba(3,4,9,.72)), url('/client/assets/mumain/Interface/login_back.png') center/cover; opacity: .72; pointer-events: none; }
#char-viewport { position: absolute; inset: 0; }
#char-viewport canvas { display: block; width: 100%; height: 100%; }
.chars-topbar {
  position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 10px;
  z-index: 2; font-size: 13px; background: rgba(10,10,14,.6); padding: 6px 10px; border-radius: 4px;
}
.chars-panel {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 300px; max-height: 82vh; overflow-y: auto; background: rgba(10,10,14,.88);
}
.chars-panel { border-color: #a88942; box-shadow: 0 8px 36px #000, inset 0 0 0 1px rgba(255,213,114,.2); background-color: rgba(8,9,12,.84); background-image: linear-gradient(rgba(8,9,12,.80),rgba(8,9,12,.92)), url('/client/assets/mumain/Interface/character_ex.png'); background-position: right bottom; background-repeat: no-repeat; }
#char-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }
#char-list li {
  border: 1px solid var(--line); padding: 8px 10px; border-radius: 4px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; min-height: 20px;
}
#char-list li.sel { border-color: var(--gold); background: #1e2230; }
#char-list li.empty { color: var(--muted); font-style: italic; justify-content: center; }
#char-list li .char-cls { color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
#char-list li .char-level { color: var(--muted); font-size: 12px; }
.chars-actions button { flex: 1; }
.chars-inline { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.chars-inline h3 { margin-top: 0; }

/* ---- settings window (client/settingswindow.js), same frame as inventory/stats ---- */
.settings-window { left: 254px; top: 10px; width: 320px; max-width: calc(100vw - 264px); max-height: 84vh; display: flex; flex-direction: column; padding-bottom: 0; user-select: none; }
.settings-window .muwin-head { flex: none; margin-bottom: 0; }
.settings-body { overflow-y: auto; padding: 8px 2px 12px; font-size: 12px; color: #d8d8d8; scrollbar-width: thin; scrollbar-color: #6b5520 #0b0b0e; }
.settings-body h4 { margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #3a2e12; font: 600 11px/1 system-ui; letter-spacing: 2px; text-transform: uppercase; color: #e5ac01; }
.settings-body h4:first-child { margin-top: 4px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 6px; border: 1px solid #1e1c16; background: #07080a; margin-bottom: 4px; border-radius: 2px; }
.settings-row .settings-label { display: block; }
.settings-row .settings-hint { display: block; color: #8a90a0; font-size: 10px; margin-top: 1px; }
.settings-toggle { position: relative; flex: none; width: 36px; height: 20px; border: 1px solid #3a3322; border-radius: 10px; background: #14140f; cursor: pointer; }
.settings-toggle > i { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: #6f6a5a; transition: left .15s, background .15s; }
.settings-toggle.on { background: #2a2210; border-color: #e5ac01; }
.settings-toggle.on > i { left: 17px; background: #e5ac01; }
.settings-slider-row { flex-direction: column; align-items: stretch; }
.settings-slider-line { display: flex; align-items: center; gap: 8px; }
.settings-slider-line input[type="range"] { flex: 1; width: auto; accent-color: #e5ac01; padding: 0; }
.settings-slider-val { flex: none; min-width: 34px; text-align: right; color: #e5ac01; font-weight: 600; }
.settings-lang-select { flex: none; background: #141824; color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: 3px 6px; max-width: 140px; }

/* ---- reconnect give-up banner (client/app.js) ---- */
.reconnect-giveup { left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 60; text-align: center; padding: 16px 20px; }
.reconnect-giveup p { margin: 0 0 10px; }

/* ---- new-version modal (client/app.js) ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(2,2,4,.72); display: flex; align-items: center; justify-content: center; }
.version-panel { text-align: center; min-width: 380px; max-width: 460px; }
.version-panel .entry-logo { max-height: 70px; margin-bottom: 10px; }
.version-panel p { line-height: 1.5; }
#version-countdown { color: var(--gold); }

/* ---- NPC dialog (client/npcdialog.js, P4b-2) ---- */
#npc-dialog { left: 50%; bottom: 90px; transform: translateX(-50%); width: 360px; z-index: 55; user-select: none; }
.npc-body { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.npc-portrait {
  flex: none; width: 64px; height: 64px; border: 1px solid #6b5520; border-radius: 3px;
  background: #0b0b0e; display: flex; align-items: center; justify-content: center;
  font: 700 22px/1 system-ui; color: #8a7a4a; overflow: hidden;
}
.npc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.npc-flavor { flex: 1; font-size: 12px; line-height: 1.5; color: #d8d8d8; font-style: italic; }
.npc-actions { display: flex; gap: 6px; }
.npc-actions button { flex: 1; padding: 5px 8px; font-size: 11px; }

/* ---- NPC shop (client/shopwindow.js, P4b-2), same frame as inventory ---- */
/* Centred top, clear of the left HUD panels (hud-char/hud-stats) and the right-side
   inventory/bag panel, so shop and inventory can reasonably be open at once. */
#shop-win { left: calc(50% - 60px); top: 120px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 140px); overflow-y: auto; user-select: none; }
.shop-hint { margin: 2px 0 8px; font-size: 11px; }
.shop-grid {
  position: relative; background-color: #07080a;
  background-image: linear-gradient(#1e1c16 1px, transparent 1px), linear-gradient(90deg, #1e1c16 1px, transparent 1px);
  background-size: 44px 44px; border: 1px solid #3a3322;
}
.shop-item {
  position: absolute; box-sizing: border-box; border: 1px solid rgba(160,140,90,.35);
  background: radial-gradient(ellipse at center, rgba(60,52,30,.55), rgba(10,10,12,.4) 80%);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.shop-item:hover { border-color: #e5ac01; }
.shop-item img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; image-rendering: auto; }
.shop-item .cnt { position: absolute; right: 3px; bottom: 1px; font: bold 11px system-ui; color: #fff; text-shadow: 0 0 3px #000; }
.shop-item .plus { position: absolute; left: 3px; top: 1px; font: bold 11px system-ui; color: #ffcc1a; text-shadow: 0 0 3px #000; }

/* ---- Warehouse / vault (client/warehouse.js, P4b-2), same frame as inventory ---- */
#wh-win { left: calc(50% - 30px); top: 200px; transform: translateX(-50%); width: calc(8 * 28px + 26px); user-select: none; }
.wh-grid {
  position: relative; background-color: #07080a;
  background-image: linear-gradient(#1e1c16 1px, transparent 1px), linear-gradient(90deg, #1e1c16 1px, transparent 1px);
  background-size: 28px 28px; border: 1px solid #3a3322; margin-top: 4px;
}
.wh-pagecount { text-align: right; margin: 4px 0; font-size: 10px; color: #8a90a0; }
.wh-buypage { width: 100%; padding: 4px 6px; font-size: 11px; margin-bottom: 8px; }
.wh-buypage[hidden] { display: none; }
.wh-zen-row { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-bottom: 6px; }
.wh-zen-row b { color: #e5ac01; }
.wh-zen-actions { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.wh-amount { width: 0; flex: 1; padding: 3px 6px; background: #0b0b0e; border: 1px solid #3a3322; color: #e5ac01; border-radius: 2px; font: 12px system-ui; }
.wh-zen-actions button { flex: none; padding: 3px 8px; font-size: 11px; }
.wh-note { font-size: 10px; }

/* ---- P8c top-right column: Events panel, Party panel and Minimap all live
   inside #hud-right-col (client/app.js re-parents each module's own element
   into it after construction) and stack with plain flex flow instead of fixed
   pixel math -- whichever of the three are visible/hidden/tall at a given
   moment, none can ever overlap another. Each child keeps its own width/
   max-height/colours from its own selector below; only position is taken
   over here (the id+class selector outweighs each plain class selector). ---- */
#hud-right-col {
  position: absolute; right: 10px; top: 10px; z-index: 41;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  /* Belt-and-suspenders on top of each child's own height cap below: leaves
     clearance for the bottom-right icon menu + click-hint line so the column
     scrolls internally (instead of overlapping them) in the worst case. */
  max-height: calc(100vh - 130px); overflow-y: auto; overflow-x: visible; pointer-events: none;
}
#hud-right-col > * { pointer-events: auto; }
#hud-right-col > .hud, #hud-right-col > .muwin {
  position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none;
}

/* ---- Minimap (client/minimap.js, P8b), Tab toggles ---- */
#minimap { z-index: 42; padding: 6px; text-align: center; user-select: none; }
.minimap-title { color: var(--gold); font: 600 10px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
#minimap canvas { display: block; border-radius: 50%; cursor: crosshair; }

/* ---- Move window (client/movewindow.js, P8b), key M ---- */
.move-window { left: calc(50% - 60px); top: 60px; transform: translateX(-50%); width: 360px; max-height: 70vh; overflow-y: auto; }
.move-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.move-table th { text-align: left; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 6px; border-bottom: 1px solid #3a2e12; }
.move-table td { padding: 5px 6px; border-bottom: 1px solid #1e1c16; }
.move-table tr.locked td { color: #6a6a6a; }
.move-table td:last-child { text-align: right; }
.move-note { color: #8a8a8a; font-size: 10px; }

/* ---- Events panel (client/eventspanel.js, P6), top-right below the minimap, key V ---- */
/* Capped low enough that Events + Party + Minimap stacked in #hud-right-col
   together never reach as far down as the bottom-right icon menu at 720p
   (measured via headless-Chrome screenshot during the P8c QA pass -- an
   uncapped/230px events panel pushed the minimap down into #hud-menu when a
   party was also active). Its own list still scrolls past this height. */
.events-panel { right: 10px; top: 10px; width: 360px; max-height: min(420px, calc(100dvh - 90px)); overflow-y: auto; z-index: 41; }
.events-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.events-boss-head { color: var(--gold); font: 600 10px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; margin: 4px 0 6px; }
.events-boss { display: flex; flex-direction: column; gap: 6px; }
.events-row { display: flex; align-items: center; gap: 8px; padding: 6px; background: #14141a; border: 1px solid #232130; border-radius: 3px; }
.events-icon { width: 28px; height: 28px; flex: none; object-fit: contain; }
.events-icon-emoji { display: grid; place-items: center; font-size: 18px; }
.events-row-main { flex: 1; min-width: 0; }
.events-row-top { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.events-row-top b { color: #e9e9e9; }
.events-countdown { color: var(--gold); font-variant-numeric: tabular-nums; flex: none; }
.events-row-sub { font-size: 10px; margin-top: 1px; }
.events-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.events-phase { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; }
.events-boss-live .bar.hp { position: relative; margin: 4px 0; }
.events-boss-live .bar.hp span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; }
.events-boss-lb { margin: 4px 0 0; padding-left: 16px; font-size: 11px; }

#events-banner {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 60;
  padding: 8px 18px; background: rgba(12, 12, 16, .94); border: 1px solid var(--gold);
  color: #ffe9b0; font: 600 13px/1.3 system-ui; text-align: center; border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,.6); max-width: 70vw;
}

/* Instance HUD (Blood Castle / Devil Square / Chaos Castle), shown only while inside
   one -- top-centre, under the (transient) announcement banner above it (P8c). */
#events-hud {
  left: 50%; top: 66px; transform: translateX(-50%); z-index: 41; text-align: center;
  padding: 6px 14px; min-width: 220px;
}
.events-hud-title { color: var(--gold); font: 600 12px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; }
.events-hud-objective { font-size: 12px; margin: 3px 0; }
.events-hud-timer { font: 600 16px/1 system-ui; color: #ffe9b0; font-variant-numeric: tabular-nums; }
#events-hud .events-hud-leave { margin-top: 4px; }

/* ---- P5 party panel (client/partypanel.js): always-visible while in a party,
   in #hud-right-col between the Events panel and the Minimap ("top-right ...
   and, at the far right, the party panel" -- P8c layout target). ---- */
.party-panel { width: 220px; z-index: 41; }
.party-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.party-title { color: var(--gold); font-weight: bold; }
.party-bonus { color: #4caf6a; font-weight: 600; font-size: 11px; }
/* Capped + scrollable: PARTY_MAX is 10 members, and an uncapped list here
   could grow taller than the Events panel + Minimap can leave room for. */
.party-members { display: grid; gap: 3px; margin-bottom: 6px; max-height: 110px; overflow-y: auto; }
.party-row { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; font-size: 11px; }
.party-row.offline { opacity: .45; }
.party-cls { flex: none; width: 20px; font-weight: 700; color: #e5ac01; }
.party-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-guild { color: #8a90a0; font-size: 10px; }
.party-lv { flex: none; color: var(--muted); }
.party-hp { flex: none; width: 34px; height: 5px; background: #300a0a; border: 1px solid rgba(0,0,0,.6); border-radius: 2px; overflow: hidden; }
.party-hp > i { display: block; height: 100%; background: #4c4; }
.party-kick { flex: none; padding: 0 5px; }
.party-invite-row { display: flex; gap: 4px; margin-bottom: 6px; }
.party-invite-row input { flex: 1; padding: 3px 6px; font-size: 11px; }
.party-actions { display: flex; align-items: center; gap: 8px; font-size: 11px; flex-wrap: wrap; }
.party-actions label { display: flex; align-items: center; gap: 4px; }

/* Invite/request toast (party/guild/trade), centred like the NPC dialog. */
.party-toast { left: 50%; top: 30%; transform: translateX(-50%); width: 320px; z-index: 70; }
.toast-body { font-size: 12px; line-height: 1.5; margin-bottom: 6px; }
.toast-timer { font-size: 10px; color: var(--muted); margin-bottom: 8px; }
.toast-actions { display: flex; gap: 6px; }
.toast-actions button { flex: 1; }

/* ---- P5 guild window (client/guildwindow.js) ---- */
.guild-window { left: calc(50% - 30px); top: 88px; transform: translateX(-50%); width: 380px; max-height: 76vh; overflow-y: auto; user-select: none; }
.guild-title { color: var(--gold); font-weight: bold; margin-bottom: 6px; }
.guild-create { display: flex; gap: 6px; margin: 8px 0; }
.guild-create input { flex: 1; }
.guild-notice-row { display: flex; gap: 6px; margin-bottom: 8px; }
.guild-notice-row input { flex: 1; }
.guild-members { display: grid; gap: 3px; margin-bottom: 8px; }
.guild-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; font-size: 12px; }
.guild-row.offline { opacity: .45; }
.guild-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #555; }
.guild-row:not(.offline) .guild-dot { background: #4caf6a; }
.guild-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guild-lv { flex: none; color: var(--muted); }
.guild-rank { flex: none; color: #b9a46a; font-size: 10px; text-transform: uppercase; }
.guild-invite-row { display: flex; gap: 6px; margin-bottom: 8px; }
.guild-invite-row input { flex: 1; }
.guild-feedback { min-height: 1.2em; }

/* ---- P5 social window (client/socialwindow.js) ---- */
.social-window { left: 50%; top: 116px; transform: translateX(-50%); width: 360px; max-height: 76vh; display: flex; flex-direction: column; padding-bottom: 8px; user-select: none; }
.social-window .muwin-head { flex: none; margin-bottom: 6px; }
.social-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.social-tabs .active { border-color: var(--gold); color: var(--gold); }
.social-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5520 #0b0b0e; }
.social-add-row { display: flex; gap: 6px; margin-bottom: 8px; }
.social-add-row input { flex: 1; }
.social-sub { margin: 8px 0 4px; font: 600 10px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; color: #b9a46a; }
.social-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; font-size: 12px; margin-bottom: 3px; }
.social-row span:first-of-type.social-dot { flex: none; }
.social-dot { width: 7px; height: 7px; border-radius: 50%; background: #555; flex: none; }
.social-dot.on { background: #4caf6a; }
.social-row > span:nth-child(2) { flex: 1; }
.social-letter-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.social-letter-form textarea { min-height: 60px; resize: vertical; font: inherit; background: #0f121a; border: 1px solid var(--line); color: var(--text); border-radius: 4px; padding: 6px; }
.social-letter { padding: 6px 8px; border: 1px solid #1e1c16; background: #07080a; border-radius: 3px; margin-bottom: 6px; }
.social-letter.unread { border-color: #6b5520; }
.social-letter-head { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.social-letter-body-text { font-size: 12px; white-space: pre-wrap; word-break: break-word; margin-bottom: 4px; }
.social-letter-actions { display: flex; gap: 6px; }

/* ---- P5 trade window (client/tradewindow.js) ---- */
.trade-window { left: calc(50% + 30px); top: 144px; transform: translateX(-50%); user-select: none; }
.trade-cols { display: flex; gap: 14px; }
.trade-col { display: flex; flex-direction: column; gap: 6px; }
.trade-who { font-size: 12px; color: var(--gold); font-weight: 600; min-height: 1.2em; }
.trade-grid { position: relative; background-color: #07080a; background-image: linear-gradient(#1e1c16 1px, transparent 1px), linear-gradient(90deg, #1e1c16 1px, transparent 1px); background-size: 32px 32px; border: 1px solid #3a3322; }
.trade-zen-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; }
.trade-zen-row input { width: 110px; padding: 3px 6px; }
.trade-lock-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.trade-item img { max-width: 92%; max-height: 92%; object-fit: contain; pointer-events: none; }

/* ---- P5 right-click player context menu (reuses .inv-menu's look, client/app.js) ---- */
.player-ctx-menu { min-width: 160px; }

/* ==== P7: class quests, daily quests, season/reset/master level, VIP =================
   Self-contained block (client/questpanel.js, client/dailywindow.js,
   client/progressionwindow.js) -- every rule below is scoped to ids/classes only those
   three modules use, so this never touches another agent's HUD layout rules. Every
   window here is a `.muwin` and already draggable (client/dragwin.js); positions below
   are just sane un-dragged defaults. ==================================================== */

/* Always-visible "CLASS QUEST" mini box, as observed on lorvath.com's character panel. */
.quest-box { position: absolute; left: 12px; top: 374px; width: 220px; padding: 8px 10px; cursor: pointer; user-select: none; }
.quest-box-title { color: var(--gold); font: 700 11px/1.3 system-ui; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.quest-box-status { font-size: 12px; line-height: 1.35; }
.quest-box-hint { font-size: 10px; color: var(--muted); margin-top: 4px; }

.quest-window { left: 50%; top: 90px; transform: translateX(-50%); width: 340px; user-select: none; }
.quest-step-name { color: var(--gold); font-weight: 600; margin-bottom: 2px; }
.quest-step-meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.quest-objectives { display: grid; gap: 4px; margin-bottom: 10px; }
.quest-obj-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.quest-obj-progress { color: var(--muted); }
.quest-actions { display: flex; gap: 6px; }
.quest-actions button { flex: 1; }
.quest-done { font-size: 13px; color: var(--muted); text-align: center; padding: 12px 0; }

.daily-window { left: 50%; top: 90px; transform: translateX(-50%); width: 320px; user-select: none; }
.daily-reset { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.daily-list { display: grid; gap: 8px; }
.daily-row { padding: 6px 8px; border: 1px solid #1e1c16; background: #07080a; border-radius: 3px; }
.daily-row.claimed { opacity: .55; }
.daily-row-label { font-size: 12px; margin-bottom: 4px; }
.daily-row-bar { height: 6px; border-radius: 3px; background: #1a1a1a; overflow: hidden; margin-bottom: 4px; }
.daily-row-fill { height: 100%; background: var(--gold); }
.daily-row-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); }

.progression-window { left: 50%; top: 90px; transform: translateX(-50%); width: 340px; user-select: none; }
.prog-season { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.prog-reset-box { display: grid; gap: 6px; padding: 8px; border: 1px solid #1e1c16; background: #07080a; border-radius: 3px; margin-bottom: 10px; }
.prog-reset-need { font-size: 12px; }
.prog-auto { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.prog-master-head { font: 600 10px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; color: #b9a46a; margin-bottom: 6px; }
.prog-master { font-size: 12px; margin-bottom: 8px; }
.prog-skills { display: grid; gap: 4px; }
.prog-skill-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.prog-skill-row > span:first-child { flex: 1; }
.prog-skill-lvl { color: var(--muted); }

/* Master Level skill tree (client/progressionwindow.js#renderMaster), matching Lorvath's
   own layout: branch tabs, a node grid, a detail panel for the selected node. */
.prog-master-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.prog-master-tabs button { flex: 1; font-size: 11px; padding: 4px 2px; background: #07080a; border: 1px solid #1e1c16; color: var(--muted); border-radius: 2px; cursor: pointer; }
.prog-master-tabs button[aria-pressed="true"] { color: var(--gold); border-color: #6b5520; }
.prog-master-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 320px; }
.prog-master-tree { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; align-content: start; overflow-y: auto; max-height: 320px; }
.master-node { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 10px; padding: 4px; background: #07080a; border: 1px solid #1e1c16; color: var(--text, #eee); border-radius: 2px; cursor: pointer; text-align: left; }
.master-node .mn-name { font-size: 9px; line-height: 1.1; color: var(--muted); }
.master-node b { font-size: 11px; }
.master-node small { color: var(--muted); }
.master-node.learned { border-color: #4a7c3a; }
.master-node.locked { opacity: .5; }
.master-node[aria-pressed="true"] { border-color: var(--gold); }
.prog-master-detail { font-size: 12px; overflow-y: auto; max-height: 320px; }
.prog-master-detail h2 { font-size: 13px; margin: 0 0 4px; color: var(--gold); }
.prog-master-detail h3 { font-size: 11px; margin: 8px 0 2px; color: var(--muted); text-transform: uppercase; }
.prog-master-detail ul { margin: 0; padding-left: 16px; font-size: 11px; }
.master-buy { margin-top: 6px; width: 100%; }
@media (max-width: 520px) { .prog-master-layout { grid-template-columns: 1fr; } }

/* Ranking window (client/rankingwindow.js). */
.ranking-window { left: 50%; top: 70px; transform: translateX(-50%); width: 360px; max-height: 80vh; user-select: none; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rk-chip { font-size: 10px; padding: 3px 8px; background: #07080a; border: 1px solid #1e1c16; color: var(--muted); border-radius: 10px; cursor: pointer; }
.rk-chip.on { color: var(--gold); border-color: #6b5520; }
.rk-head-row { display: flex; justify-content: flex-end; font-size: 10px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; padding-right: 4px; }
.rk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 60vh; overflow-y: auto; }
.rk-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.rk-row.top { border-color: #6b5520; }
.rk-n { width: 18px; color: var(--muted); text-align: right; }
.rk-cls { width: 28px; color: var(--gold); font-size: 10px; }
.rk-nm { flex: 1; }
.rk-lv { text-align: right; display: flex; flex-direction: column; }
.rk-lv small { color: var(--muted); }
.rk-empty { font-size: 12px; color: var(--muted); padding: 6px; }

/* Muun companion window (client/muunwindow.js, docs/contract-muun.md). Same visual
   vocabulary as .prog-*/.daily-* above: gold accents, dark chip rows, a thin xp bar. */
.muun-window { left: 50%; top: 60px; transform: translateX(-50%); width: 380px; max-height: 80vh; user-select: none; }
.muun-body { max-height: calc(80vh - 40px); overflow-y: auto; }
.muun-hint { font-size: 11px; color: var(--muted); margin: 4px 0 8px; }
.muun-namerow { display: flex; gap: 6px; margin-bottom: 4px; }
.muun-name-input { flex: 1; background: #07080a; border: 1px solid #1e1c16; color: var(--text, #eee); padding: 3px 6px; font-size: 12px; }
.muun-display { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.muun-lv { font-size: 12px; font-weight: 600; color: var(--gold); margin-bottom: 3px; }
.muun-xpbar { height: 6px; border-radius: 3px; background: #1a1a1a; overflow: hidden; margin-bottom: 3px; }
.muun-xpbar > i { display: block; height: 100%; background: var(--gold); }
.muun-xptext { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.muun-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.muun-chip { font-size: 11px; padding: 2px 8px; border: 1px solid #1e1c16; background: #07080a; border-radius: 10px; color: var(--muted); }
.muun-chip b { color: var(--text, #eee); }
.muun-owned { margin-left: 6px; font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }
.muun-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.muun-skill { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.muun-skill > span { flex: 1; }
.muun-cskills { display: grid; gap: 3px; margin-bottom: 4px; }
.muun-cskill { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 3px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.muun-cskill > span:first-child { flex: 1; }
.muun-cskill .el { color: var(--muted); }
.muun-skins { display: grid; gap: 4px; margin-bottom: 4px; }
.muun-skin { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 4px 6px; border: 1px solid #1e1c16; background: #07080a; border-radius: 2px; }
.muun-skin.worn { border-color: var(--gold); }
.muun-skin .nm { flex: 1; color: var(--text, #eee); }
.muun-skin .lv { color: var(--muted); }
.muun-skin .state { font-size: 10px; color: var(--muted); }

/* Small persistent VIP badge (character-panel-adjacent "BASIC 23h 46m" tag observed on
   lorvath.com); clicking it opens the full Progression window. Hidden while no VIP tier
   is active (server/vip.js#isVipActive). */
.vip-badge { position: absolute; left: 12px; top: 172px; padding: 4px 10px; display: flex; gap: 8px; align-items: center; cursor: pointer; user-select: none; }
.vip-badge-tier { color: var(--gold); font: 700 11px/1 system-ui; letter-spacing: .5px; }
.vip-badge-time { font-size: 11px; color: var(--muted); }

/* ---- Opus review fixes after P8c (1280x720 overlaps) ---- */
/* Tall windows never run past the bottom edge; their content scrolls instead. */
#inv-win { max-height: calc(100vh - 16px); overflow-y: auto; }
.stats-window { max-height: calc(100vh - 150px); }
@media (max-height: 820px) {
  #inv-win { top: 8px; }
  .stats-window { top: 8px; }
}
/* The key hint collides with the hunt bar and the icon menu on narrower screens. */
@media (max-width: 1700px) { #hud-hint { display: none; } }
@media (max-width: 1180px) {
  #hud-commandbar { justify-content: flex-start; }
  #hud-bottom .rate-strip { display: none; }
}

/* ---- P10 PvP (client/pvpwindow.js): Duel challenge toast/window + the generic
   Last Man/Party Survival/CTF/Rampage/Guild War HUD. docs/contract-p10.md. ---- */
.duel-toast { top: 22%; z-index: 71; } /* offset from .party-toast (top:30%) so a party invite and a duel challenge never overlap */
.duel-window { left: 16px; top: 200px; width: 260px; text-align: center; }
.duel-message { font-size: 12px; color: #ffe9b0; margin-bottom: 6px; min-height: 1.2em; }
.duel-sides { display: flex; align-items: center; gap: 8px; }
.duel-side { flex: 1; min-width: 0; }
.duel-vs { color: var(--gold); font: 700 11px/1 system-ui; flex: none; }
.duel-name { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.duel-score { font-size: 16px; font-weight: 700; color: var(--gold); margin-top: 2px; }
.duel-timer { font: 600 14px/1 system-ui; color: #ffe9b0; margin: 6px 0; font-variant-numeric: tabular-nums; }
.duel-window .duel-leave { width: 100%; }

/* Shares #events-hud's slot (top-centre, under the announcement banner): a player
   can never be inside a Blood Castle/Devil Square/Chaos Castle instance and a PvP
   arena at the same time, so the two HUDs never need to be visible together. */
#pvp-hud { left: 50%; top: 66px; transform: translateX(-50%); z-index: 41; text-align: center; padding: 6px 14px; min-width: 220px; }
.pvp-hud-title { color: var(--gold); font: 600 12px/1 system-ui; letter-spacing: 1px; text-transform: uppercase; }
.pvp-hud-body { font-size: 12px; margin: 3px 0; }
.pvp-hud-note { font-size: 10px; color: var(--muted); margin-top: 2px; }
.pvp-hud-timer { font: 600 16px/1 system-ui; color: #ffe9b0; font-variant-numeric: tabular-nums; }
#pvp-hud .pvp-hud-leave { margin-top: 4px; }

/* ---- Bag tools: equipment slot locks, split/drop amount prompt (client/inventory.js) ---- */
.doll-slot .slot-lock { position: absolute; right: 1px; top: 1px; width: 13px; height: 13px; background: center/contain no-repeat; font-size: 9px; line-height: 13px; text-align: center; font-style: normal; cursor: pointer; opacity: .35; z-index: 2; }
.doll-slot .slot-lock.on { opacity: 1; filter: drop-shadow(0 0 2px rgba(229,172,1,.8)); }
.doll-slot:hover .slot-lock, .doll-slot .slot-lock:hover { opacity: 1; }
.amount-overlay { z-index: 130; }
.amount-box { position: relative; width: 300px; max-width: calc(100vw - 32px); padding-bottom: 12px; }
.amount-body { margin: 10px 14px; line-height: 1.45; }
.amount-row { display: flex; gap: 6px; justify-content: center; align-items: center; margin: 0 14px 12px; }
.amount-row button { width: 32px; }
.amount-input { width: 110px; text-align: center; }
.amount-actions { display: flex; gap: 8px; justify-content: center; }
.amount-actions button { min-width: 88px; }

/* ---- Collapsible windows and HUD panels (client/collapse.js) ---- */
.collapse-btn {
  flex: none; width: 22px; height: 20px; padding: 0; border-radius: 3px;
  background: rgba(20, 16, 8, .8); border: 1px solid #3a2e12; color: #e5ac01;
  font: 700 13px/1 system-ui; letter-spacing: 0; text-transform: none; display: grid; place-items: center;
}
.collapse-btn:hover { border-color: var(--gold); }
.muwin-head.has-collapse .collapse-btn { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); }
.muwin-head.has-collapse:not(:has(.muwin-x)) .collapse-btn { right: 6px; }
.hud-title.has-collapse .collapse-btn { margin-left: auto; }
.collapse-corner { padding-right: 30px; }
.collapse-corner > .collapse-btn { position: absolute; right: 4px; top: 4px; z-index: 3; }
.is-collapsed > :not(.keep-open) { display: none !important; }
.is-collapsed { max-height: none !important; overflow: visible !important; padding-bottom: 4px !important; }
.muwin.is-collapsed > .muwin-head { margin-bottom: 0; border-bottom: 0; }
.hud.is-collapsed > .hud-title { margin-bottom: 0; }
#hud-log.is-collapsed #chat-tabs { margin-bottom: 0; }

/* ---- Phone layouts (client/mobile.js sets body.m-phone + m-portrait / m-landscape) ---- */
#hud-left-col, #hud-dock { display: none; }
body.m-phone { font-size: 13px; -webkit-text-size-adjust: 100%; }
body.m-phone #viewport canvas, body.m-phone #char-viewport canvas { touch-action: none; }
body.m-phone .inv-item, body.m-phone .muwin-head { touch-action: none; }
body.m-phone kbd, body.m-phone #hud-hint, body.m-phone .rate-strip { display: none !important; }
/* 16px or iOS zooms the page as soon as a field takes focus */
body.m-phone input, body.m-phone select, body.m-phone textarea { font-size: 16px; }
body.m-phone .hud { padding: 5px 7px; font-size: 11px; }
body.m-phone .hud-title { margin-bottom: 3px; }
body.m-phone .bar { height: 12px; margin: 2px 0; }
body.m-phone .bar span { line-height: 12px; font-size: 9px; }
/* World-space nameplates are projected over the 3D scene; on a phone the
   default desktop plate is visually oversized and obscures the character. */
body.m-phone .ent-label { font-size: 9px; line-height: 1.05; text-shadow: 0 1px 2px #000; }
body.m-phone .ent-label .bar { width: 28px; height: 2px; margin-top: 1px; }
body.m-phone .ent-label .g { font-size: 8px; }
body.m-phone .ent-label .flag { width: 16px; height: 11px; margin-right: 2px; }

/* entry screens */
body.m-phone .panel, body.m-phone .panel.wide, body.m-phone .servers-panel, body.m-phone .entry-panel {
  min-width: 0; width: calc(100vw - 24px); max-width: 440px; padding: 16px 16px;
}
body.m-phone .chars-topbar { top: 8px; right: 8px; }
body.m-portrait .chars-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; transform: none; max-height: 52vh; padding: 12px 14px; }
body.m-landscape .chars-panel { left: 8px; top: 8px; bottom: 8px; transform: none; width: min(320px, 46vw); max-height: none; padding: 10px 12px; }
body.m-landscape .chars-panel h2 { margin-bottom: 6px; font-size: 16px; }
body.m-landscape #char-list li { padding: 5px 8px; }
body.m-phone .entry-logo-text { font-size: 28px; letter-spacing: 6px; }

/* flow containers */
body.m-phone #hud-left-col {
  display: flex; flex-direction: column; gap: 5px; position: absolute; z-index: 41;
  left: calc(6px + env(safe-area-inset-left)); top: calc(6px + env(safe-area-inset-top));
  pointer-events: none; max-height: calc(100dvh - 12px); overflow: visible;
}
body.m-phone #hud-dock {
  display: flex; flex-direction: column; gap: 4px; position: absolute; z-index: 41; pointer-events: none;
}
body.m-phone #hud-left-col > *, body.m-phone #hud-dock > * {
  position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
  transform: none !important; pointer-events: auto; margin: 0;
}
body.m-phone #hud-char .kv.small { display: none; }
body.m-phone #hud-char { width: auto; }
body.m-phone #hud-stats, body.m-phone .quest-box { width: auto; }
body.m-phone .vip-badge { align-self: flex-start; }

/* top-right column: minimap, events, party */
body.m-phone #hud-right-col { right: calc(6px + env(safe-area-inset-right)); top: calc(6px + env(safe-area-inset-top)); gap: 5px; max-height: 48dvh; }
body.m-phone #minimap { padding: 4px; }
body.m-phone #minimap canvas { width: 96px; height: 96px; }
body.m-phone .events-panel { width: min(340px, calc(100vw - 12px)); max-height: 60dvh; }
body.m-phone .party-panel { width: min(220px, calc(100vw - 12px)); }

/* skills: one scrolling row of icons */
body.m-phone #hud-skillbar { display: flex; align-items: center; gap: 4px; overflow-x: auto; width: auto; }
body.m-phone .skill-row { flex-wrap: nowrap; gap: 3px; }
body.m-phone .skill-row:first-child { margin: 0; padding: 0 4px 0 0; border-bottom: 0; border-right: 1px solid var(--line); min-height: 0; }
body.m-phone .skill-icon { width: 36px; height: 36px; flex: none; }

/* hunt bar */
body.m-phone #hud-commandbar {
  width: 100%; min-height: 0; padding: 4px calc(4px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left));
  justify-content: flex-start; gap: 5px; overflow-x: auto; border: 1px solid #8d6b28; border-radius: 4px;
}
body.m-phone #hud-bottom { padding: 0; }
body.m-phone #hud-bottom .row { flex-wrap: nowrap; justify-content: flex-start; gap: 4px; }
body.m-phone #hud-bottom button { padding: 6px 8px; font-size: 11px; }
body.m-phone #hud-bottom select { flex: none; width: 120px; padding: 4px; }
body.m-phone #hud-menu { display: flex; flex: none; padding-left: 5px; gap: 3px; }
body.m-phone #hud-menu button { width: 40px; height: 40px; flex: none; }
body.m-phone #hud-menu svg { width: 22px; height: 22px; }

/* chat */
body.m-phone #hud-log { width: auto; }
body.m-phone .chat-tabs { flex-wrap: nowrap; overflow-x: auto; }
body.m-phone .chat-tab { flex: none; }
body.m-phone #log { height: 84px; font-size: 11px; }

/* ---- portrait: plate left + minimap right on top; chat, skills, hunt bar, tab bar at the bottom ---- */
body.m-portrait #hud-left-col { right: 116px; }
body.m-portrait #hud-dock {
  left: calc(4px + env(safe-area-inset-left)); right: calc(4px + env(safe-area-inset-right));
  bottom: calc(4px + env(safe-area-inset-bottom));
}
body.m-portrait #hud-menu { display: flex; width: auto; }
body.m-portrait #hud-menu button { padding: 0; min-width: 40px; }
body.m-portrait #events-banner, body.m-portrait #events-hud, body.m-portrait #pvp-hud { top: 188px; max-width: calc(100vw - 16px); }
body.m-landscape #events-banner, body.m-landscape #events-hud, body.m-landscape #pvp-hud { max-width: calc(100vw - 2 * min(230px, 30vw) - 24px); }

/* ---- landscape: plate + chat on the left, minimap + menu on the right, skills + hunt bar bottom centre ---- */
body.m-landscape #hud-left-col { width: min(210px, 28vw); max-height: calc(100dvh - 60px); }
body.m-landscape #hud-left-col > * { width: auto; }
body.m-landscape #hud-log { left: calc(6px + env(safe-area-inset-left)); bottom: 6px; width: min(230px, 30vw); z-index: 41; }
body.m-landscape #hud-dock {
  left: calc(min(230px, 30vw) + 14px); right: calc(6px + env(safe-area-inset-right)); bottom: 6px; align-items: center;
}
body.m-landscape #hud-dock > * { max-width: 100%; }
body.m-landscape #hud-menu { display: flex; gap: 3px; padding-left: 5px; }
body.m-landscape #hud-menu button { width: 38px; height: 38px; }
body.m-landscape #hud-right-col { max-height: calc(100dvh - 100px); }
body.m-landscape #minimap canvas { width: 84px; height: 84px; }
body.m-landscape #log { height: 70px; }

/* ---- windows become sheets with their own scroll ---- */
body.m-phone .muwin:not(#hud-right-col > *):not(#hud-left-col > *):not(#hud-dock > *):not(.party-toast):not(.vip-badge) {
  position: fixed !important; transform: none !important; bottom: auto !important;
  max-width: none !important; overflow: auto !important; overscroll-behavior: contain;
}
body.m-portrait .muwin:not(#hud-right-col > *):not(#hud-left-col > *):not(#hud-dock > *):not(.party-toast):not(.vip-badge) {
  left: calc(6px + env(safe-area-inset-left)) !important; right: calc(6px + env(safe-area-inset-right)) !important;
  top: calc(6px + env(safe-area-inset-top)) !important; width: auto !important;
  max-height: calc(100dvh - 70px) !important;
}
body.m-landscape .muwin:not(#hud-right-col > *):not(#hud-left-col > *):not(#hud-dock > *):not(.party-toast):not(.vip-badge) {
  left: auto !important; right: calc(6px + env(safe-area-inset-right)) !important; top: 6px !important;
  width: min(460px, calc(100vw - 12px)) !important; max-height: calc(100dvh - 12px) !important;
}
body.m-phone .muwin .muwin-head { position: sticky; top: 0; z-index: 2; }
body.m-phone .muwin-x { font-size: 22px; padding: 0 8px; }
body.m-phone .party-toast { width: min(320px, calc(100vw - 16px)); }
body.m-phone .item-tip { max-width: calc(100vw - 16px); }
body.m-phone .inv-menu button { padding: 10px 14px; font-size: 14px; }
body.m-phone #hud-skillbar > .hud-title { margin: 0 2px 0 0; flex: none; font-size: 10px; }
/* Corner collapse buttons are positioned against their own panel, also when the panel
   sits static inside a flow column (#hud-right-col, and the phone #hud-left-col/#hud-dock). */
#hud-right-col > .collapse-corner { position: relative; }
body.m-phone #hud-left-col > .collapse-corner, body.m-phone #hud-dock > .collapse-corner, body.m-phone #hud-right-col > .collapse-corner { position: relative !important; }
body.m-phone .hud.collapse-corner, body.m-phone #hud-bottom.collapse-corner, body.m-phone #hud-log.collapse-corner { padding-right: 30px; }
#minimap.collapse-corner .minimap-title { padding: 0 14px; }
#hud-bottom .row button { white-space: nowrap; }

/* ---- Landscape-phone joystick + MOBA action cluster (client/mobilecontrols.js) ----
   body.joy-on = m-landscape + pointer:coarse + the "Joystick controls" setting on
   (client/settingswindow.js). Everything the plain landscape layout shows normally
   (client/mobile.js's #hud-left-col / #hud-dock, the full #hud-menu grid, chat) is
   hidden here and replaced by: a compact HP/MP/XP plate (the existing #hud-char, just
   trimmed down instead of duplicated), a small minimap, the joystick, the right action
   cluster, and single menu/chat buttons that reveal their panel as an overlay sheet. */
#joy-zone, #moba-cluster, #joy-pad, #joy-menu-btn, #joy-chat-btn, #joy-mm-expand { display: none; }
body.joy-on #joy-zone {
  display: block; position: absolute; left: 0; top: 60px; bottom: 0; width: 46vw; max-width: 340px;
  z-index: 45; touch-action: none;
}
body.joy-on #joy-pad {
  display: block; position: fixed; z-index: 46; width: 132px; height: 132px; margin: -66px 0 0 -66px;
  pointer-events: none;
}
body.joy-on #joy-pad[hidden] { display: none; }
#joy-pad .joy-base {
  position: absolute; inset: 0; border-radius: 50%; background: rgba(22, 26, 36, .55);
  border: 2px solid var(--line); box-shadow: 0 0 0 1px rgba(216, 177, 90, .25) inset;
}
#joy-pad .joy-knob {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%; background: rgba(216, 177, 90, .35); border: 2px solid var(--gold);
  transition: background .1s;
}
body.joy-on #moba-cluster {
  display: block; position: fixed; right: 0; bottom: 0;
  width: min(56vw, 340px); height: min(64vh, 300px); z-index: 46; pointer-events: none;
}
body.joy-on #moba-cluster > * { pointer-events: auto; }
body.joy-on #moba-attack {
  position: absolute; right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
  width: 80px; height: 80px; border-radius: 50%; padding: 0; font-size: 30px; line-height: 1;
  background: var(--red); border: 2px solid #ff6b6b; box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}
body.joy-on #moba-arc {
  position: absolute; right: calc(50px + env(safe-area-inset-right)); bottom: calc(50px + env(safe-area-inset-bottom));
  width: 0; height: 0;
}
body.joy-on #moba-arc .skill-icon.moba-skill {
  /* the sprite offsets are computed for a 34px icon (skillbar.js ICON_PX): keep that box and scale it */
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  transform: translate(calc(-50% + var(--ax, 0px)), calc(-50% + var(--ay, 0px))) scale(1.65);
  border-width: 1px; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
body.joy-on #moba-auto {
  position: absolute; right: calc(14px + env(safe-area-inset-right)); bottom: calc(202px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; padding: 0; font-size: 20px;
  background: #222838; border: 2px solid var(--line);
}
body.joy-on #moba-auto.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
body.joy-on #moba-potions {
  /* a row left of the skill arc (arc: radius 108 around the attack button centre) */
  position: absolute; right: calc(196px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: row; gap: 8px;
}
body.joy-on .moba-potion {
  width: 52px; height: 52px; border-radius: 50%; padding: 0; font-size: 22px; font-weight: bold;
}
body.joy-on .moba-potion-hp { background: #3a1414; border: 2px solid var(--red); color: #ff9e9e; }
body.joy-on .moba-potion-mp { background: #14203a; border: 2px solid var(--blue); color: #9ec3ff; }
body.joy-on #joy-menu-btn, body.joy-on #joy-chat-btn, body.joy-on #joy-mm-expand {
  display: flex; align-items: center; justify-content: center; position: absolute; z-index: 47;
  border-radius: 50%; padding: 0; background: #222838; border: 2px solid var(--line); font-size: 22px;
}
body.joy-on #joy-menu-btn { left: calc(6px + env(safe-area-inset-left)); bottom: calc(6px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
body.joy-on #joy-chat-btn { left: calc(70px + env(safe-area-inset-left)); bottom: calc(6px + env(safe-area-inset-bottom)); width: 56px; height: 56px; }
body.joy-on #joy-mm-expand { right: calc(6px + env(safe-area-inset-right)); top: calc(6px + env(safe-area-inset-top)); width: 26px; height: 26px; font-size: 14px; z-index: 48; }

/* compact HP/MP/XP plate: reuse #hud-char, just hide every row but the bars */
body.joy-on #hud-left-col > *:not(#hud-char) { display: none; }
body.joy-on #hud-char { padding: 4px 6px; }
body.joy-on #hud-char .kv, body.joy-on #hud-char .hud-title span.muted { display: none; }
body.joy-on #hud-char .bar { width: 130px; height: 10px; margin: 2px 0; }
body.joy-on #hud-char .bar span { font-size: 8px; line-height: 10px; }

/* everything else the plain landscape layout shows: hidden until the sheet buttons open it */
body.joy-on #hud-dock, body.joy-on .events-panel, body.joy-on .party-panel { display: none; }
body.joy-on #hud-menu, body.joy-on #hud-log { display: none; }
/* The unified bar now owns #hud-menu inside #hud-dock. Reveal only that branch when
   the compact joystick Menu button opens its overlay. */
body.joy-on.joy-menu-open #hud-dock, body.joy-on.joy-menu-open #hud-commandbar { display: contents; }
body.joy-on.joy-menu-open #hud-bottom { display: none; }
body.joy-on.joy-menu-open #hud-menu {
  display: grid; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  grid-template-columns: repeat(4, 46px); gap: 5px; padding: 8px; border: 1px solid #8d6b28;
  background: linear-gradient(#302716, #0d0b08); z-index: 80; box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
body.joy-on.joy-chat-open #hud-log {
  display: flex; position: fixed; left: calc(6px + env(safe-area-inset-left)); right: calc(6px + env(safe-area-inset-right));
  bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 80; width: auto; box-shadow: 0 8px 30px rgba(0, 0, 0, .6);
}
body.joy-on #events-banner, body.joy-on #pvp-hud { transform: scale(.72); transform-origin: top right; opacity: .85; }
body.joy-on #minimap.mm-expanded canvas { width: 160px; height: 160px; }

/* No pull-to-refresh or rubber-band scrolling: a downward swipe on a HUD panel must never
   reload the game on a phone. Windows keep their own contained scroll. */
html, body { overscroll-behavior: none; }
body.m-phone .hud, body.m-phone #hud-left-col, body.m-phone #hud-dock, body.m-phone #hud-right-col { overscroll-behavior: contain; }

/* Inventory secondary action: same dark-metal/gold language as the window itself. */
#inv-win .inv-muun {
  display: grid; grid-template-columns: 32px 1fr 12px; align-items: center; gap: 8px;
  width: 100%; min-height: 42px; margin: 6px 0 4px; padding: 5px 8px;
  color: #d8c89e; text-align: left; border: 1px solid #55451f; border-radius: 2px;
  background: linear-gradient(180deg, rgba(55,45,25,.92), rgba(15,13,10,.96));
  box-shadow: inset 0 1px rgba(255,224,145,.08), 0 1px 2px #000;
}
#inv-win .inv-muun:hover { color: #ffe29a; border-color: #a77b29; background: linear-gradient(180deg, #49391c, #17120b); }
#inv-win .inv-muun:active { transform: translateY(1px); }
#inv-win .inv-muun-icon {
  width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center;
  border: 1px solid #6b5520; border-radius: 2px; background-color: #090806;
  box-shadow: inset 0 0 8px rgba(229,172,1,.12);
}
#inv-win .inv-muun-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
#inv-win .inv-muun-copy b { color: #e5ac01; font: 600 11px/1 system-ui; letter-spacing: .7px; text-transform: uppercase; }
#inv-win .inv-muun-copy small { overflow: hidden; color: #94896f; font: 10px/1.1 system-ui; text-overflow: ellipsis; white-space: nowrap; }
#inv-win .inv-muun-arrow { color: #967529; font: 22px/1 serif; text-align: right; }