: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; }

.startup-screen { z-index: 1000; overflow: hidden; background: #05060a; }
.startup-screen .entry-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(3,4,9,.52), rgba(3,4,9,.88)), url('/client/assets/mumain/Interface/LSBg01.jpg'); background-position: center; background-size: cover; }
.startup-card { position: relative; z-index: 1; width: min(430px, calc(100vw - 36px)); padding: 34px 30px 28px; text-align: center; border: 1px solid rgba(216,177,90,.72); border-radius: 7px; background: linear-gradient(145deg, rgba(24,27,40,.96), rgba(8,10,17,.98)); box-shadow: 0 18px 55px #000, inset 0 0 30px rgba(216,177,90,.05); }
.startup-mark { margin-bottom: 18px; color: #e5ac01; font: 800 38px/1 system-ui; letter-spacing: 9px; text-shadow: 0 0 22px rgba(229,172,1,.35); }
.startup-spinner { display: inline-block; width: 22px; height: 22px; border: 2px solid #514529; border-top-color: #e5c56f; border-radius: 50%; animation: map-loading-spin .8s linear infinite; }
.startup-card h2 { margin: 14px 0 5px; font-size: 17px; text-transform: uppercase; }
.startup-card p { min-height: 20px; margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.startup-progress { height: 3px; overflow: hidden; background: #080a10; }
.startup-progress i { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, transparent, #e5c56f, transparent); animation: startup-sweep 1.25s ease-in-out infinite; }
.startup-card.has-error .startup-spinner, .startup-card.has-error .startup-progress { display: none; }
.startup-card.has-error p { color: #ff9b9b; }
@keyframes startup-sweep { from { transform: translateX(-110%); } to { transform: translateX(340%); } }

.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; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.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); }
/* Generic disabled affordance for every plain <button>; components that already set
   their own :disabled look (e.g. .stats-add, .inv-actions button) keep winning via
   higher selector specificity, this just covers every button that didn't. */
button:disabled { opacity: .45; cursor: not-allowed; }
.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; z-index: 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; z-index: 20; 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; }
/* A buff nobody can cast (the Elf Soldier's blessing, client/skillbar.js#syncExtraBuffs):
   a chip, not a button -- it reads as a status, so it takes no hover/click affordance. */
.skill-icon.npc-buff { cursor: default; border-color: #6fd08a; }
.skill-icon.npc-buff:hover { border-color: #6fd08a; }
.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); }

/* One horizontal skill rack immediately above the footer, clear of the chat panel. */
#hud-skillbar {
  left: calc(50% + 190px); top: auto; bottom: 92px;
  transform: translateX(-50%); width: min(620px, calc(100vw - 410px));
  display: flex; align-items: center; gap: 7px; overflow-x: auto;
  padding: 5px 9px; z-index: 31;
}
#hud-skillbar > .hud-title {
  flex: none; min-height: 0; margin: 0; padding: 0 8px 0 0;
  border: 0; border-right: 1px solid #3a2e12; background: none;
}
#hud-skillbar .skill-row { flex: none; flex-wrap: nowrap; gap: 5px; }
#hud-skillbar .skill-row:first-child {
  min-height: 0; margin: 0; padding: 0 7px 0 0;
  border-bottom: 0; border-right: 1px solid #3a2e12;
}
#hud-skillbar .skill-row:empty { display: none; }
#hud-skillbar .skill-hotkey {
  position: absolute; right: 1px; bottom: 1px; z-index: 3;
  min-width: 12px; padding: 1px 2px; border-radius: 2px;
  color: #fff0be; background: rgba(0, 0, 0, .88);
  font: 700 10px/1 system-ui; text-align: center; pointer-events: none;
}

/* Persistent system text floats above chat; #log holds player messages only. */
#system-feed {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 7px);
  max-height: 104px; overflow-y: auto; padding: 0 3px;
  scrollbar-width: thin; pointer-events: auto;
}
#system-feed:empty { display: none; }
.system-line {
  margin-top: 2px; padding: 2px 6px; width: fit-content; max-width: 100%;
  color: #f0d791; background: rgba(5, 6, 9, .67);
  font: 11px/1.35 system-ui; text-shadow: 0 1px 2px #000; overflow-wrap: anywhere;
}
.system-line.error { color: #ff8d80; }
.system-line.loot { color: #a7e8af; }

/* 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; }
.menu-vip-label { position: absolute; left: 0; right: 0; bottom: 3px; color: #c9a753; font: 800 7px/1 system-ui; letter-spacing: .8px; pointer-events: none; }
#menu-vip { border-color: #735a27; color: #d7b35d; }
#menu-topup { position: relative; border-color: #70458d; color: #dfbaf0; background: linear-gradient(#34203d,#160d1b); }
#menu-topup:hover { border-color: #b06bd0; color: #f2d7ff; box-shadow: inset 0 0 12px rgba(183,102,218,.18), 0 0 9px rgba(153,76,189,.2); }
.menu-topup-label { position: absolute; left: 0; right: 0; bottom: 3px; color: #d4a8e7; font: 800 7px/1 system-ui; letter-spacing: .55px; pointer-events: none; }
.menu-topup-plus { position: absolute; right: 3px; top: 2px; display: grid; place-items: center; width: 12px; height: 12px; border-radius: 50%; color: #211026; background: #d7a7ea; font: 900 10px/1 system-ui; pointer-events: none; }
#menu-darkcoin { position: absolute; right: 2px; top: 2px; max-width: 30px; overflow: hidden; padding: 2px 3px; color: #e9c8ff; background: #281538; border: 1px solid #70458d; border-radius: 5px; font: 700 7px/1 system-ui; text-overflow: ellipsis; }
#offline-dock {
  flex: none; display: flex; align-items: center; gap: 7px; min-width: 126px; height: 48px; padding: 5px 9px;
  color: #cbbd9b; text-align: left; border: 1px solid #665126; border-radius: 4px;
  background: radial-gradient(circle at 15% 30%, rgba(218,170,70,.15), transparent 42%), linear-gradient(145deg,#24221b,#0e1014);
  box-shadow: inset 0 0 0 1px rgba(255,225,150,.03), 0 2px 5px rgba(0,0,0,.35);
}
#offline-dock:hover { border-color: #d2a344; background: linear-gradient(145deg,#383023,#121318); }
.offline-dock-icon { color: #dfb85e; font-size: 23px; line-height: 1; }
.offline-dock-copy { display: grid; gap: 3px; min-width: 0; }
.offline-dock-copy small { color: #807763; font: 700 7px/1 system-ui; letter-spacing: .7px; white-space: nowrap; }
.offline-dock-copy b { overflow: hidden; color: #ead79f; font: 700 10px/1 system-ui; white-space: nowrap; text-overflow: ellipsis; }
.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, .wh-pages { display: flex; gap: 4px; align-items: center; padding: 2px; border: 1px solid #302918; background: rgba(4,5,7,.58); }
.inv-page {
  min-width: 32px; min-height: 25px; padding: 3px 10px; border: 1px solid #44391f; border-radius: 2px;
  color: #9c927b; background: linear-gradient(180deg, #242016, #11100d); font: 800 10px/1 system-ui; letter-spacing: .5px;
  box-shadow: inset 0 1px rgba(255,230,170,.05), 0 1px 1px #000;
}
.inv-page:hover:not(:disabled) { color: #f3d784; border-color: #a47b2d; background: linear-gradient(180deg, #41331b, #17120b); }
.inv-page.on { border-color: #e5ac01; color: #ffe3a1; background: linear-gradient(180deg, #5b431a, #241909); box-shadow: inset 0 0 9px rgba(229,172,1,.22), 0 0 5px rgba(229,172,1,.15); }
.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: grid; grid-template-columns: 1.15fr 1.15fr .8fr; gap: 5px; margin: 7px 0; }
.inv-actions button, .inv-repair, .wh-buypage, .wh-zen-actions button, .amount-actions button, .amount-row button {
  min-height: 28px; padding: 5px 7px; border: 1px solid #59441f; border-radius: 3px; color: #d3c29a;
  background: linear-gradient(180deg, #302817, #15120d); box-shadow: inset 0 1px rgba(255,230,170,.06), inset 0 -5px 9px rgba(0,0,0,.3), 0 1px 1px #000;
  font: 700 10px/1 system-ui; letter-spacing: .35px; text-transform: uppercase;
}
.inv-actions button:hover:not(:disabled), .inv-repair:hover:not(:disabled), .wh-buypage:hover:not(:disabled), .wh-zen-actions button:hover:not(:disabled), .amount-actions button:hover, .amount-row button:hover { color: #ffe4a1; border-color: #c29132; background: linear-gradient(180deg, #4b3a1b, #21190d); box-shadow: inset 0 0 10px rgba(229,172,1,.12), 0 0 7px rgba(229,172,1,.1); }
.inv-actions button:active:not(:disabled), .inv-repair:active:not(:disabled), .wh-zen-actions button:active:not(:disabled) { transform: translateY(1px); }
.inv-actions button:disabled, .inv-repair:disabled, .wh-buypage:disabled, .wh-zen-actions button:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.5); }
.inv-actions .inv-chaos { color: #dcb6ff; border-color: #6c4685; background: linear-gradient(180deg, #382343, #19101e); }
.inv-actions .inv-chaos:hover:not(:disabled) { color: #f0d7ff; border-color: #a76bc8; background: linear-gradient(180deg, #533064, #24132c); }
.inv-bulk.on { border-color: #e5ac01; color: #ffe29a; background: linear-gradient(180deg, #5a4219, #241808); }
.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 { min-width: 102px; }
.inv-menu { position: fixed; z-index: 120; display: grid; min-width: 174px; padding: 3px; background: linear-gradient(145deg, #1c1810, #0a0a0d); border: 1px solid #806329; box-shadow: 0 0 0 1px #000, 0 8px 24px rgba(0,0,0,.78); }
.inv-menu button { min-height: 29px; text-align: left; border: 1px solid transparent; border-radius: 2px; background: transparent; padding: 6px 10px; color: #c8b993; font: 600 11px/1 system-ui; }
.inv-menu button:hover { border-color: #705522; background: linear-gradient(90deg, rgba(105,76,24,.48), rgba(35,25,12,.45)); color: #ffe0a0; }
.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: 86px; transform: translateX(-50%); width: min(860px, calc(100vw - 28px)); max-height: calc(100vh - 170px); overflow: hidden; user-select: none; }
.chaos-window.shake { animation: chaos-shake .45s ease; }
.chaos-body { display: grid; grid-template-columns: minmax(170px, .8fr) 294px minmax(210px, 1fr); gap: 10px; position: relative; min-height: 340px; }
.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-recipes, .chaos-guide, .chaos-workbench { min-width: 0; border: 1px solid #352c1b; background: linear-gradient(145deg, rgba(22,20,15,.96), rgba(7,8,10,.96)); padding: 9px; border-radius: 3px; }
.chaos-section-title { display: flex; justify-content: space-between; gap: 8px; color: #d9b95f; font: 700 10px/1.2 system-ui; letter-spacing: 1.5px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid #3b301a; }
.chaos-section-title small { color: #74716a; font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.chaos-mixes { display: grid; grid-template-columns: 1fr; gap: 5px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5520 #090a0d; }
.chaos-mix { display: flex; justify-content: space-between; align-items: center; min-height: 30px; padding: 5px 8px; font-size: 11px; text-align: left; }
.chaos-mix.on { border-color: #e5ac01; color: #e5ac01; background: #2a2210; }
.chaos-mix b { color: #4caf6a; }
.chaos-workbench { display: flex; flex-direction: column; align-items: stretch; }
.chaos-slots { position: relative; box-sizing: content-box; flex: none; background-color: #060709; background-image: linear-gradient(#262116 1px, transparent 1px), linear-gradient(90deg, #262116 1px, transparent 1px), radial-gradient(circle at 50% 48%, rgba(112,76,14,.14), transparent 62%); background-size: 34px 34px, 34px 34px, 100% 100%; border: 1px solid #69511f; box-shadow: inset 0 0 24px #000, 0 0 12px rgba(174,119,16,.08); }
.chaos-slot { position: absolute; box-sizing: border-box; border: 1px solid #6b5520; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: #6f6a5a; overflow: hidden; }
.chaos-slot.filled { border-style: solid; border-color: #6b5520; cursor: pointer; background: radial-gradient(ellipse at center, #2a2618, #0b0b0e 75%); }
.chaos-slot.filled:hover { border-color: #e5ac01; filter: brightness(1.12); }
.chaos-slot img { width: 92%; height: 92%; object-fit: contain; pointer-events: none; }
.chaos-slot .cnt, .chaos-slot .plus { position: absolute; z-index: 2; font: 700 11px/1 system-ui; text-shadow: 0 1px 3px #000, 0 0 3px #000; }
.chaos-slot .cnt { right: 3px; bottom: 3px; color: #fff; }.chaos-slot .plus { left: 3px; top: 3px; color: #ffd34d; }
.chaos-rate { font-size: 11px; line-height: 1.35; min-height: 31px; padding: 7px 2px 3px; }
.chaos-rate b { color: #e5ac01; }
.chaos-rate .bad { color: #ff6b5b; }
.chaos-go { min-height: 34px; padding: 6px; font-weight: 700; letter-spacing: 1.5px; color: #f4d783; border-color: #7f6229; background: linear-gradient(#34270e,#171005); }
.chaos-go:not(:disabled):hover { border-color: #e5ac01; box-shadow: 0 0 13px rgba(229,172,1,.2), inset 0 0 10px rgba(229,172,1,.12); }
.chaos-guide h3 { margin: 2px 0 14px; color: #f2d995; font: 700 15px/1.25 system-ui; }
.chaos-guide-label { color: #8d815e; font: 700 9px/1 system-ui; letter-spacing: 1.2px; margin: 12px 0 6px; }
.chaos-guide ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.chaos-guide li { position: relative; padding: 6px 7px 6px 20px; border: 1px solid #292315; background: #090a0c; color: #d8d2c1; font-size: 11px; line-height: 1.3; }
.chaos-guide li::before { content: '◆'; position: absolute; left: 7px; top: 7px; color: #b68828; font-size: 8px; }
.chaos-guide p { margin: 0; color: #aaa596; font-size: 11px; line-height: 1.5; }
.chaos-guide-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 13px; }
.chaos-guide-stats span { padding: 7px; border: 1px solid #3a301b; background: #0a0a0c; color: #77746c; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; }
.chaos-guide-stats b { display: block; margin-top: 4px; color: #e5ac01; font-size: 13px; letter-spacing: 0; }

/* ---- Chaos Machine mixing animation: charge stage + result reveal card ---- */
.chaos-stage { position: absolute; inset: 0; z-index: 5; 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; }
}
@media (max-width: 760px) {
  .chaos-window { top: 10px; max-height: calc(100dvh - 20px); overflow-y: auto; }
  .chaos-body { grid-template-columns: 1fr; }
  .chaos-recipes { order: 2; }.chaos-workbench { order: 1; align-items: center; }.chaos-guide { order: 3; }
  .chaos-mixes { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .chaos-rate, .chaos-go, .chaos-workbench .chaos-section-title { width: 100%; box-sizing: border-box; }
}
.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; }
/* On short viewports (844x390 landscape phone especially) the entry panel is now
   taller than the screen -- scroll instead of clipping. `safe center` keeps the
   panel centered when it fits and falls back to the existing `align-items: center`
   from .screen (invalid-value cascade) on engines that don't support the keyword,
   so this is a pure addition, never a regression. */
.entry-screen { overflow-y: auto; align-items: safe center; }
.entry-stack { margin: 20px 0; }
.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; }
.field { margin: 12px 0; }
.field > span:first-child { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.field-error { display: block; margin-top: 4px; color: #ff8b8b; font-size: 11px; min-height: 0; }
.field-error:empty { display: none; }
.field-with-btn { position: relative; display: block; }
.field-with-btn input { padding-right: 38px; }
.field-icon-btn {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 30px; height: 28px;
  padding: 0; display: grid; place-items: center; background: transparent; border: 1px solid transparent;
  color: var(--muted); font-size: 14px; line-height: 1;
}
.field-icon-btn:hover { color: var(--gold); border-color: var(--line); }
.field-icon-btn.on { color: var(--gold); }
.field-checkbox { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0; font-size: 12px; color: var(--muted); cursor: pointer; }
.field-checkbox input { width: auto; margin: 2px 0 0; accent-color: var(--gold); }
.entry-guest-hint { margin: 8px 0 0; text-align: center; font-size: 11px; line-height: 1.4; }
.login-btn-row { display: flex; gap: 8px; margin-top: 14px; }
.login-btn-row button { flex: 1; }
.login-btn-row button[disabled] { opacity: .55; cursor: default; }
.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); }
.guest-cta.busy { opacity: .55; pointer-events: none; }
.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; }
/* Separate login/register screens (docs/auth-google-email.md): cross-links back
   and forth, the forgot-password placeholder note, and the Google button --
   deliberately styled as a distinct (white/neutral) pill, not the gold primary
   button, matching Google's own brand guidance of not reskinning its mark. */
.entry-switch-row { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.entry-forgot-row { margin: 8px 0 0; text-align: right; }
.tiny-link { color: var(--gold); text-decoration: none; font-size: 12px; }
.tiny-link:hover, .tiny-link:focus-visible { text-decoration: underline; }
.entry-forgot-note { margin: 6px 0 0; font-size: 11px; line-height: 1.4; text-align: right; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 14px; border-radius: 4px; border: 1px solid var(--line); background: #f4f4f4; color: #1f1f1f;
  font-weight: 600; font-size: 13px;
}
.google-btn:hover, .google-btn:focus-visible { background: #fff; }
.google-btn:disabled { opacity: .55; cursor: default; }
.google-btn-icon {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #34a853 40%, #fbbc05 70%, #ea4335); color: #fff;
  font: 700 12px/1 Arial, sans-serif; flex: 0 0 auto;
}
.google-hint { margin: 6px 0 0; text-align: center; font-size: 11px; line-height: 1.4; }

.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.last { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(216,177,90,.35) inset; }
.server-row .server-name-col { flex: none; width: 110px; display: flex; flex-direction: column; gap: 3px; }
.server-row .server-name { font-weight: 600; }
.server-row .server-badges { display: flex; gap: 4px; }
.server-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font: 800 9px/1.5 system-ui; letter-spacing: .4px; }
.server-badge-pvp { color: #ffb3b3; background: rgba(210,60,60,.18); border: 1px solid rgba(210,60,60,.55); }
.server-badge-last { color: var(--gold); background: rgba(216,177,90,.12); border: 1px solid rgba(216,177,90,.5); }
.server-row .server-mid { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.server-row .server-bar { height: 10px; 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-status { font-size: 10px; color: var(--muted); letter-spacing: .3px; }
.server-row.offline .server-status { color: #ff8b8b; }
.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; }
.servers-note { margin: -4px 0 12px; line-height: 1.4; }

/* ---- email verification: badge + post-registration notice (docs/email-resend.md) ---- */
.verify-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; cursor: pointer;
  font: 800 9px/1.6 system-ui; letter-spacing: .4px; color: #ffcf7a; background: rgba(216,177,90,.14);
  border: 1px solid rgba(216,177,90,.6);
}
.verify-badge:hover { background: rgba(216,177,90,.26); }
.verify-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin: -2px 0 12px; padding: 8px 10px; border: 1px solid rgba(216,177,90,.45); border-radius: 4px;
  background: rgba(216,177,90,.08); font-size: 12px; color: var(--text);
}
.verify-notice p { margin: 0; flex: 1; min-width: 180px; }
.verify-notice-actions { display: flex; gap: 6px; flex: none; }

/* ---- 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; }
/* Owner's character-select loop (client/charselect-bg.js): sits on top of the static
   .mumain-char-bg image (still the fallback if the video errors or never loads -- both
   are position:absolute/inset:0 with no z-index, so paint order is plain DOM order) and
   under #char-viewport's 3D canvas. `background: transparent` stops a browser's own
   black placeholder from hiding .mumain-char-bg through it before the poster paints. */
.chars-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  background: transparent; pointer-events: none;
}
.chars-bg-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(3,4,9,.32),rgba(3,4,9,.74)), radial-gradient(ellipse at center, transparent 40%, rgba(2,2,5,.55) 100%);
}
#char-viewport { position: absolute; inset: 0; }
#char-viewport.rotatable { cursor: grab; touch-action: none; }
#char-viewport.rotating { cursor: grabbing; }
#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; }
#char-list li .char-offline { display: block; margin-top: 3px; color: #a99b7b; font: 700 9px/1.15 system-ui; letter-spacing: .25px; }
#char-list li .char-offline:first-letter { color: #d9b85e; }
.char-detail { margin: -1px 0 12px; padding: 10px 11px; min-height: 55px; border: 1px solid #493a22; border-radius: 5px; background: linear-gradient(135deg, rgba(50,40,21,.72), rgba(8,10,14,.78)); box-shadow: inset 0 0 18px rgba(0,0,0,.28); }
.char-state { font: 800 10px/1 system-ui; letter-spacing: 1px; }
.char-state.online { color: #ff7a62; }.char-state.offline { color: #a8d8ff; }.char-state.ready { color: #d9b85e; }
.char-state-time { display: block; margin-top: 5px; color: #f0dfb0; font: 700 13px/1.2 system-ui; }
.char-offline-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 7px; color: #9c947f; font: 600 9px/1.2 system-ui; }
.char-offline-stats b { color: #d6c49a; }.char-offline-stats span:last-child { flex-basis: 100%; color: #736d60; }
#char-list li.char-card { position: relative; min-height: 38px; padding: 9px 10px; border-color: #403725; background: linear-gradient(100deg, rgba(20,21,24,.9), rgba(37,31,19,.72)); }
#char-list li.char-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 4px 0 0 4px; background: #8b7a4d; }
#char-list li.char-card.online::before { background: #d9534f; box-shadow: 0 0 9px rgba(217,83,79,.7); }
#char-list li.char-card.offline::before { background: #5a9fcc; box-shadow: 0 0 9px rgba(90,159,204,.6); }
#char-list li.char-card.sel { border-color: #d8af53; background: linear-gradient(100deg, rgba(67,52,25,.9), rgba(25,25,27,.92)); }
.char-card-main { min-width: 0; }.char-card-main b { display: block; color: #f4dfad; font-size: 13px; }
.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; }
#char-list li .char-recent { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px; font: 800 8px/1.5 system-ui; letter-spacing: .3px; color: var(--gold); background: rgba(216,177,90,.14); border: 1px solid rgba(216,177,90,.45); vertical-align: middle; }

/* Class-card grid (character creation): replaces the bare <select id="new-cls">
   (still present, hidden, as the value both the client and shared/gamedata.js
   CLASS_DEF logic read from) with a card per class so role + blurb are visible for
   every class at once, no blind dropdown. */
.class-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.class-card {
  text-align: left; padding: 8px 9px; background: #0f121a; border: 1px solid var(--line); border-radius: 4px;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
}
.class-card:hover { border-color: var(--gold); }
.class-card.sel { border-color: var(--gold); background: linear-gradient(135deg, rgba(216,177,90,.14), rgba(216,177,90,.03)); }
.class-card b { color: #f4dfad; font-size: 12.5px; }
.class-card .class-role { color: var(--red); font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.class-card .class-skill { color: var(--muted); font-size: 10px; }

/* Gender toggle: two buttons standing in for the hidden <select id="new-gender">. */
.gender-toggle { display: flex; gap: 6px; }
.gender-opt { flex: 1; padding: 7px; background: #0f121a; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.gender-opt:hover { border-color: var(--gold); }
.gender-opt.active { border-color: var(--gold); color: var(--gold); background: rgba(216,177,90,.1); }

/* Typed-name delete confirmation: the Delete button (below) stays disabled until
   the player types the character's exact name, so one misclick can't permanently
   delete a character. */
#char-delete-typed-label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }

/* ---- 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; }

/* ---- loot configuration (client/lootwindow.js) ---- */
.loot-window {
  left: auto; right: 336px; top: 10px; width: 340px;
  max-width: calc(100vw - 20px); max-height: calc(100vh - 92px);
  display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; user-select: none;
}
.loot-window .muwin-head { flex: none; margin-bottom: 0; }
.loot-body { min-height: 0; padding: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #6b5520 #0b0b0e; }
.loot-body::-webkit-scrollbar { width: 7px; }.loot-body::-webkit-scrollbar-track { background: #090a0d; }.loot-body::-webkit-scrollbar-thumb { background: #6b5520; border-radius: 4px; }
.loot-body h4 { margin: 12px 0 6px; color: #e5ac01; border-bottom: 1px solid #3a2e12; padding-bottom: 4px; font: 700 10px/1 system-ui; letter-spacing: 1.7px; }
.loot-row, .loot-quality { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0; padding: 7px 8px; border: 1px solid #242016; border-radius: 3px; background: linear-gradient(100deg, #0c0d0d, #14110b); }
.loot-row > span, .loot-quality > span { flex: 1 1 auto; min-width: 0; }.loot-row b, .loot-quality b { display: block; color: #e5dfce; font-size: 12px; }.loot-row small, .loot-quality small { display: block; color: #8a90a0; margin-top: 2px; font-size: 10px; line-height: 1.25; }
.loot-master { border-color: #8b671d; background: linear-gradient(100deg, #211b0c, #11110e); }.loot-master b { color: #f3ca62; }
.loot-quality select { flex: 0 0 116px; width: 116px; min-width: 116px; color: #f4d783; background: #11131a; border: 1px solid #62501e; border-radius: 3px; padding: 4px; }
.loot-note { margin: 9px 2px 2px; color: #8a90a0; font-size: 10px; line-height: 1.35; }.loot-disabled .loot-row:not(.loot-master), .loot-disabled .loot-quality { opacity: .42; }
@media (max-width: 720px) {
  .loot-window { right: 10px; top: 10px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
}

/* ---- 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%; margin: 7px 0 8px; color: #f2d995; border-color: #80612a; }
.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: grid; grid-template-columns: minmax(0,1fr) auto auto auto; gap: 5px; align-items: center; margin-bottom: 7px; }
.wh-amount { width: 0; min-height: 28px; padding: 3px 7px; background: linear-gradient(#0d0d10,#070708); border: 1px solid #4b3c21; color: #f0cd74; border-radius: 3px; font: 700 12px system-ui; outline: none; }
.wh-amount:focus { border-color: #c08d31; box-shadow: inset 0 0 8px rgba(229,172,1,.12); }
.wh-zen-actions button { flex: none; min-width: 46px; }
.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: relative; margin: 8px -2px 0; padding: 8px 4px 1px;
  border-top: 1px solid #514024; cursor: pointer; user-select: none;
}
.quest-box:hover .quest-box-title { color: #ffe4a0; }
.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-vip { margin: 8px 0 10px; padding: 9px; border: 1px solid #55451f; background: linear-gradient(145deg, rgba(48,39,20,.72), rgba(10,10,13,.92)); }
.prog-vip > header { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.prog-vip > header div { display: grid; gap: 2px; }
.prog-vip > header small { color: #8f8060; font-size: 9px; letter-spacing: 1.2px; }
.prog-vip > header b { color: #f2cc69; font-size: 18px; letter-spacing: 1px; }
.prog-vip > header time { color: var(--muted); font-size: 10px; text-align: right; }
.vip-tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.vip-tier-card { display: grid; gap: 2px; min-width: 0; padding: 6px; border: 1px solid #292717; background: rgba(5,6,9,.62); color: #948d7c; font-size: 9px; }
.vip-tier-card strong { color: #beb6a2; font-size: 11px; letter-spacing: .5px; }
.vip-tier-card.current { border-color: #d8b15a; box-shadow: inset 0 0 12px rgba(216,177,90,.13); color: #d8ceb6; }
.vip-tier-1 strong { color: #e7bd46; }
.vip-tier-2 strong { color: #8fddff; }
.vip-tier-3 strong { color: #e0b4ff; }
.vip-note { margin: 7px 0 0; color: #8f8060; font-size: 9px; line-height: 1.3; }
.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); }

/* Dedicated account VIP + offline-farming dashboard (client/vipwindow.js). */
.vip-window { left: 50%; top: 54px; transform: translateX(-50%); width: min(700px, calc(100vw - 28px)); max-height: calc(100dvh - 110px); overflow: auto; padding-bottom: 14px; }
.vip-hero { display: flex; align-items: center; justify-content: space-between; min-height: 78px; margin: 0 -4px 10px; padding: 12px 16px; border: 1px solid #534321; background: radial-gradient(circle at 82% 25%, rgba(224,180,80,.18), transparent 34%), linear-gradient(135deg,#242016,#0a0b10 66%); }
.vip-hero small, .vip-offline-copy > small, .vip-table-title > span { color: #9f8b5c; font: 700 9px/1 system-ui; letter-spacing: 1.5px; }
.vip-hero h2 { margin: 4px 0 2px; color: #f0c966; font-size: 25px; text-transform: uppercase; }
.vip-hero p { margin: 0; color: #aaa18d; font-size: 11px; }
.darkcoin-balance { display: grid; justify-items: end; gap: 2px; min-width: 120px; }
.darkcoin-balance small { color: #aa79ca; font-size: 8px; letter-spacing: 1.2px; }
.darkcoin-balance strong { color: #edc8ff; font: 800 27px/1 system-ui; text-shadow: 0 0 15px rgba(191,101,240,.3); }
.darkcoin-balance span { color: #74647d; font-size: 9px; }
.darkcoin-balance .vip-topup { margin-top: 5px; padding: 5px 9px; border: 1px solid #70458d; color: #dfbaf0; background: #281538; font: 800 8px/1 system-ui; letter-spacing: .8px; }
.darkcoin-balance .vip-topup:hover { border-color: #aa6bc5; color: #f0d3ff; }
.vip-window[data-tier="2"] .vip-hero h2 { color: #8fddff; }
.vip-window[data-tier="3"] .vip-hero h2 { color: #e0b4ff; }
.vip-offline-card { display: grid; grid-template-columns: 126px 1fr; gap: 18px; align-items: center; padding: 14px 18px; border: 1px solid #343026; background: rgba(7,8,11,.82); }
.vip-offline-ring { --vip-progress: 0deg; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(#dfac43 var(--vip-progress), #24242a 0); box-shadow: 0 0 18px rgba(223,172,67,.13); }
.vip-offline-ring::before { content: ''; grid-area: 1/1; width: 88px; height: 88px; border-radius: 50%; background: #0b0c10; border: 1px solid #3b3527; }
.vip-offline-ring > div { z-index: 1; grid-area: 1/1; display: grid; text-align: center; gap: 3px; }
.vip-offline-ring strong { color: #ffe09a; font-size: 19px; }
.vip-offline-ring span { color: #827967; font-size: 8px; letter-spacing: 1px; }
.vip-offline-copy h3 { margin: 5px 0 4px; color: #e7dcc0; font-size: 17px; }
.vip-offline-copy p { margin: 0 0 9px; color: #918b7d; font-size: 11px; line-height: 1.45; }
.vip-reset-line { display: flex; justify-content: space-between; gap: 12px; padding-top: 7px; border-top: 1px solid #24231f; font-size: 10px; }
.vip-reset-line span { color: #777365; } .vip-reset-line b { color: #c9b77f; }
.vip-current-perks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 8px 0 13px; }
.vip-current-perks > div { display: grid; gap: 4px; min-width: 0; padding: 8px 5px; text-align: center; border: 1px solid #2c291f; background: linear-gradient(#171713,#090a0d); }
.vip-current-perks small { color: #7f796a; font-size: 8px; white-space: nowrap; }
.vip-current-perks strong { color: #e5c46e; font-size: 12px; }
.vip-table-title { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 7px; }
.vip-table-title small { color: #777365; font-size: 9px; }
.vip-tier-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vip-plan { min-width: 0; padding: 10px; border: 1px solid #292820; background: linear-gradient(160deg,#17181c,#090a0d); }
.vip-plan header { display: flex; align-items: center; justify-content: space-between; min-height: 18px; }
.vip-plan header strong { color: #bbb4a3; font-size: 12px; text-transform: uppercase; }
.vip-plan header em { padding: 2px 4px; color: #161208; background: #d8b15a; font: 800 7px/1 system-ui; font-style: normal; }
.vip-plan > b { display: block; margin-top: 9px; color: #e8d197; font-size: 22px; }
.vip-plan > small { color: #797468; font-size: 9px; }
.vip-plan p { margin: 7px 0 0; color: #999184; font-size: 9px; }
.vip-plan.active { border-color: #c69538; box-shadow: inset 0 0 18px rgba(216,177,90,.1); }
.vip-plan-1 header strong { color: #e7bd46; } .vip-plan-2 header strong { color: #8fddff; } .vip-plan-3 header strong { color: #e0b4ff; }
.darkcoin-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 5px; }
.darkcoin-service { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid #35283e; background: linear-gradient(145deg,rgba(43,24,53,.58),#090a0d 72%); }
.darkcoin-service > div { display: grid; gap: 3px; min-width: 0; }
.darkcoin-service > div strong { color: #d9b6e9; font-size: 11px; }
.darkcoin-service > div small { color: #786b7e; font-size: 8px; }
.darkcoin-service button { display: grid; flex: none; min-width: 70px; padding: 5px 7px; border-color: #6d4381; background: linear-gradient(#41234e,#1b1021); }
.darkcoin-service button b { color: #f0d2ff; font-size: 12px; }
.darkcoin-service button span { color: #a37daf; font-size: 7px; text-transform: uppercase; }
.darkcoin-service button:disabled { opacity: .42; cursor: not-allowed; }
.darkcoin-status { min-height: 15px; margin: 3px 2px 10px; color: #a58bae; font-size: 10px; }
.darkcoin-status.ok { color: #93c987; }
#hud-offline { cursor: pointer; color: #cbb87c; }
#hud-offline:hover { color: #ffe09a; text-decoration: underline; }
@media (max-width: 720px) {
  .vip-current-perks { grid-template-columns: repeat(3, 1fr); }
  .vip-tier-table { grid-template-columns: repeat(2, 1fr); }
  .darkcoin-services { grid-template-columns: 1fr; }
}
@media (max-width: 440px) {
  .vip-offline-card { grid-template-columns: 1fr; justify-items: center; }
  .vip-offline-copy { text-align: center; }
  .vip-tier-table { grid-template-columns: 1fr; }
  .vip-table-title small { display: none; }
}

/* In-game Dark Coin recharge modal. It owns a full-screen interaction layer so
   nameplates/HUD/windows cannot paint over it or capture clicks while paying. */
.topup-modal-shell { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 18px; background: rgba(3,3,7,.78); backdrop-filter: blur(5px); }
.topup-modal-shell[hidden] { display: none; }
.topup-window { position: relative; inset: auto; width: min(820px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); padding-bottom: 12px; border-color: #76508b; background: linear-gradient(145deg,rgba(25,17,31,.98),rgba(8,8,12,.99) 55%); box-shadow: 0 0 0 1px #000, 0 28px 90px #000, inset 0 0 60px rgba(101,45,126,.07); }
.topup-window .muwin-head { border-bottom-color: #51305f; background: linear-gradient(#2a1831,#100c13); color: #e3bcf4; }
.topup-modal-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 0 -3px 10px; padding: 13px 17px; border: 1px solid #47314f; background: radial-gradient(circle at 85% 15%,rgba(175,89,219,.17),transparent 32%),#0d0b10; }
.topup-modal-hero>div:first-child small { color: #93709e; font: 800 8px/1 system-ui; letter-spacing: 1.5px; }.topup-modal-hero h2 { margin: 5px 0 2px; color: #f0e6f3; font: 600 22px/1 Georgia; }.topup-modal-hero p { margin: 0; color: #817687; font-size: 10px; }
.topup-modal-hero>div:last-child { text-align: right; }.topup-modal-hero>div:last-child span { display: block; color: #86688f; font-size: 7px; letter-spacing: 1px; }.topup-modal-hero>div:last-child strong { color: #e8c4f8; font: 800 27px/1 system-ui; }.topup-modal-hero>div:last-child small { color: #8a6b94; font-size: 8px; }
.topup-modal-scroll { max-height: calc(100vh - 190px); overflow: auto; padding: 0 3px; scrollbar-width: thin; scrollbar-color: #674071 #0b0910; }.topup-modal-scroll>section>header { display: flex; align-items: center; gap: 8px; margin: 12px 0 7px; color: #9b839f; font: 800 8px/1 system-ui; letter-spacing: 1.4px; }.topup-modal-scroll>section>header b { display: grid; place-items: center; width: 24px; height: 24px; color: #e1b45f; border: 1px solid #68502b; background: #19130c; }
.topup-modal-packages { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.topup-pack { position: relative; min-height: 105px; padding: 11px; text-align: left; color: #cfc4d3; border: 1px solid #3b3041; background: linear-gradient(145deg,#1d1622,#0a090d); }.topup-pack:hover,.topup-pack.selected { border-color: #a566c2; box-shadow: inset 0 0 20px rgba(154,76,188,.12); }.topup-pack.popular::after { content:'POPULAR'; position:absolute; top:-1px; right:-1px; padding:3px 5px; color:#1c1021; background:#c18cda; font-size:6px; font-weight:900; }.topup-pack small { display:block; color:#796c7e; font-size:7px; text-transform:uppercase; }.topup-pack strong { display:block; margin:8px 0 2px; color:#e6c0f5; font:800 21px/1 Georgia; }.topup-pack strong i { font:700 8px system-ui; font-style:normal; }.topup-pack span { color:#a78351; font-size:7px; }.topup-pack>b { position:absolute; left:11px; bottom:8px; color:#e7dfe9; font-size:12px; }
.topup-modal-methods { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.topup-method { min-height: 58px; display:flex; align-items:center; gap:8px; padding:9px; text-align:left; color:#cfc4d3; border:1px solid #373039; background:#0b0a0e; }.topup-method:hover:not(:disabled),.topup-method.selected { border-color:#8b6835; background:#17120d; }.topup-method:disabled { opacity:.38; }.topup-method>i { display:grid; place-items:center; flex:none; width:31px; height:31px; border-radius:50%; color:#e0b861; background:#292017; font-weight:900; font-style:normal; }.topup-method span { min-width:0; }.topup-method strong,.topup-method small { display:block; }.topup-method strong { color:#ded4e1; font-size:10px; }.topup-method small { overflow:hidden; color:#716a75; font-size:7px; white-space:nowrap; text-overflow:ellipsis; }.topup-method em { margin-left:auto; color:#80608a; font-size:6px; font-style:normal; }
.topup-modal-summary { display:grid; grid-template-columns:1fr 100px 150px; gap:12px; align-items:center; margin-top:12px; padding:11px 13px; border:1px solid #563963; background:#160f1b; }.topup-modal-summary>div { display:grid; }.topup-modal-summary small { color:#806b87; font-size:7px; letter-spacing:1px; }.topup-modal-summary strong { color:#e9dfec; font-size:13px; }.topup-modal-summary span { color:#756c79; font-size:8px; }.topup-modal-summary>div:nth-child(2) strong { color:#e6bd67; font-size:19px; }.topup-modal-checkout { height:37px; border:1px solid #c29649; color:#1a1208; background:linear-gradient(#e3c476,#a77831); font-size:9px; font-weight:900; }.topup-modal-checkout:disabled { opacity:.35; }
.topup-modal-status { min-height:14px; margin:6px 2px; color:#a78eb0; font-size:9px; }.topup-modal-status.error { color:#d88484; }.topup-payment-result { margin:8px 0 12px; padding:12px; border:1px solid #634674; background:#100b14; }.topup-payment-result h3 { margin:0 0 8px; color:#dbb4eb; font-size:11px; letter-spacing:1px; }.topup-payment-result>div { display:grid; grid-template-columns:100px 1fr; gap:8px; margin:4px 0; padding:6px 8px; background:#09080b; }.topup-payment-result small { color:#74637b; font-size:7px; }.topup-payment-result code { color:#ddc7e5; overflow-wrap:anywhere; }.topup-payment-result>a,.topup-payment-result>button { display:block; width:100%; margin-top:8px; padding:9px; text-align:center; border:1px solid #78528a; color:#ead2f4; background:#28182e; font:800 9px system-ui; text-decoration:none; }
.topup-payment-result>.topup-cancel { border-color:#68383d; color:#dca5a9; background:#241013; }
.topup-modal-history,.topup-history-list,.topup-history-list article,.topup-history-order { min-width:0; max-width:100%; }
.topup-history-list { overflow:hidden; border-top:1px solid #302733; }.topup-history-list>p { color:#6f6673; font-size:9px; }.topup-history-list article { display:grid; grid-template-columns:minmax(0,1fr) max-content minmax(66px,auto); gap:10px; align-items:center; padding:8px 4px; border-bottom:1px solid #211c23; }.topup-history-order { display:grid; overflow:hidden; }.topup-history-order strong { display:block; overflow:hidden; color:#b8aabc; font-size:8px; white-space:nowrap; text-overflow:ellipsis; }.topup-history-order small,.topup-history-amount { color:#6d6570; font-size:7px; }.topup-history-amount { white-space:nowrap; text-align:right; }.topup-history-status { justify-self:end; max-width:100%; overflow:hidden; color:#d6a94f; font-size:7px; white-space:nowrap; text-overflow:ellipsis; }.topup-history-status.paid,.topup-history-status.completed,.topup-history-status.finished { color:#7bc693; }.topup-history-status.failed,.topup-history-status.expired,.topup-history-status.cancelled { color:#c87474; }
@media(max-width:700px){.topup-modal-packages{grid-template-columns:repeat(2,1fr)}.topup-modal-methods{grid-template-columns:1fr}.topup-modal-summary{grid-template-columns:1fr 90px}.topup-modal-checkout{grid-column:1/-1}.topup-modal-hero{align-items:flex-start}.topup-window{max-height:calc(100vh - 14px)}.topup-history-list article{grid-template-columns:minmax(0,1fr) auto;gap:5px 9px}.topup-history-amount{grid-column:2;grid-row:1}.topup-history-status{grid-column:2;grid-row:2}}

/* ---- 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-landscape .class-cards { grid-template-columns: 1fr; }
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 .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; }
body.m-phone #offline-dock { min-width: 108px; height: 40px; padding: 4px 7px; }
body.m-phone .offline-dock-icon { font-size: 19px; }
body.m-phone .offline-dock-copy b { font-size: 9px; }

/* 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; }