:root {
  --mir-bg: #101419;
  --mir-gold: #ffe8ad;
  --mir-gold-dim: #d9c28d;
  --mir-border: #70562c;
  --mir-border-light: #6b5128;
  --mir-teal: #59ad97;
  --mir-panel: #160f09;
  --mir-panel-dark: #080604;
  --mir-btn: #1b0e08;
  --mir-accent: #bb9246;
  --mir-danger: #be3232;
  --mir-hp: #ef6c4f;
  --mir-mp: #5d93e6;
  --mir-xp: #4fbb89;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--mir-bg);
  color: var(--mir-gold);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

button, input { font: inherit; color: inherit; }

.hidden { display: none !important; }

/* Title screen */
.title-screen {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: #080807 center / cover no-repeat;
  overflow: hidden;
}

.title-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #030303eb, #03030394 48%, #030303db);
}

.title-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border: 2px solid var(--mir-border);
  background: linear-gradient(180deg, #160f09f2, #080604f2);
  box-shadow: inset 0 0 0 1px #ffedb31f, 0 22px 70px #0000009e;
  padding: 24px;
}

.title-eyebrow { color: var(--mir-teal); font-weight: 800; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; }
.title-panel h1 { color: var(--mir-gold); font-size: clamp(44px, 7vw, 72px); line-height: 0.95; }
.title-subtitle { max-width: 430px; margin: 10px 0 18px; color: var(--mir-gold-dim); font-size: 16px; }
.title-version-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.title-version-strip span { border: 1px solid var(--mir-border-light); background: #0c0805d6; color: var(--mir-gold); font-size: 12px; padding: 5px 8px; }

.title-profile-gate { margin: 18px 0 12px; }
.profile-card { display: grid; gap: 9px; border: 1px solid var(--mir-border-light); background: #080403b8; padding: 12px; }
.profile-card small, .profile-gate-status { color: var(--mir-teal); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.profile-card p { color: var(--mir-gold-dim); line-height: 1.35; }
.profile-code { border: 1px solid var(--mir-accent); background: #1f1208e6; color: #fff2bf; padding: 10px; font-size: 24px; font-weight: 900; letter-spacing: 2px; text-align: center; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-actions button, .profile-inline-form button {
  flex: 1 1 132px; min-height: 34px; border: 1px solid var(--mir-border-light);
  background: var(--mir-btn); color: var(--mir-gold); font-weight: 800; cursor: pointer;
}
.profile-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.profile-inline-form input { border: 1px solid var(--mir-border-light); background: #0b0503; color: var(--mir-gold); padding: 8px; min-width: 0; }
.profile-gate-status { text-transform: none; min-height: 1em; }

.title-start-button {
  width: 100%; min-height: 52px; margin-top: 8px;
  border: 1px solid var(--mir-accent);
  background: linear-gradient(#7a4a15, #331808);
  color: #fff2bf; font-size: 18px; font-weight: 900; cursor: pointer;
}

.title-community-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.title-community-links button {
  min-height: 31px; padding: 0 10px; border: 1px solid var(--mir-border-light);
  background: #0c0805d6; color: var(--mir-gold); font-size: 12px; cursor: pointer;
}

.live-world-panel {
  border: 1px solid rgba(196, 153, 79, 0.44);
  background: linear-gradient(180deg, #120a06eb, #080604f0);
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px #ffdf9314, 0 8px 24px #00000055;
}
.live-world-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.live-world-head small {
  color: var(--mir-teal); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
}
.live-world-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border: 1px solid rgba(178, 133, 62, 0.44); color: #c4a86a;
}
.live-world-badge.live { color: #8fd9bf; border-color: rgba(95, 200, 160, 0.45); }
.live-world-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
}
.live-world-stat {
  border: 1px solid rgba(122, 92, 44, 0.35); background: #0b0403c7; padding: 6px 8px;
  display: grid; gap: 2px;
}
.live-world-stat span { color: #a8894d; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.live-world-stat b { color: #ffe89f; font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
#live-world-title { margin-top: 14px; }
.live-world-game {
  position: absolute; left: 24px; bottom: 16px; z-index: 6;
  width: min(300px, calc(100% - 48px)); pointer-events: none;
}
.live-world-game .live-world-panel { pointer-events: auto; }

.title-latest-note { margin-top: 14px; border-top: 1px solid rgba(196, 153, 79, 0.36); padding-top: 12px; color: #ead39b; display: grid; gap: 4px; }
.title-latest-note b { color: var(--mir-teal); font-size: 12px; text-transform: uppercase; }

/* Mir windows */
.mir-window {
  border: 2px solid var(--mir-border);
  background: linear-gradient(180deg, #18120af5, #080705f5);
  box-shadow: inset 0 0 0 1px #ffedb31f, 0 18px 55px #00000094;
}

.mir-window header {
  padding: 12px 14px 8px;
  border-bottom: 1px solid rgba(196, 153, 79, 0.36);
  position: relative;
}

.mir-window header small { color: #58ad94; font-weight: 800; text-transform: uppercase; font-size: 11px; }
.mir-window header h2 { margin: 2px 0 0; color: var(--mir-gold); font-size: 1.1rem; }
.mir-window-body { padding: 10px; }

.mir-button, .mir-tabs button {
  min-height: 30px; border: 1px solid var(--mir-border-light);
  background: linear-gradient(#2a2114, #0f0b07); color: var(--mir-gold); cursor: pointer;
  padding: 5px 10px;
}

.mir-dialog { border: none; padding: 0; background: transparent; max-width: min(760px, 96vw); width: min(480px, 96vw); }
.mir-dialog::backdrop { background: rgba(0, 0, 0, 0.75); }
.mir-dialog .mir-window { width: 100%; }
.mir-dialog .mir-window-body { overflow: visible; }
.mir-dialog .save-panel { min-width: 0; }
.close-button {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border: 1px solid var(--mir-border); background: #1a0d08; color: var(--mir-gold); cursor: pointer;
}

/* Character create */
.select-shell { min-height: 100vh; display: grid; place-items: center; padding: 18px; background: #070707; }
.select-window { width: min(1180px, calc(100vw - 28px)); }
.create-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.class-select, .create-options, .create-preview, .lineage-panel {
  border: 1px solid #b78c3e; background: #371416d1; padding: 10px; min-width: 0;
}
.class-select h3, .create-options h3, .create-preview h3, .lineage-panel h3 {
  margin: 0 0 8px; color: #ffdf7b; font-size: 15px; text-align: center;
}
.class-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.class-cards button {
  display: grid; gap: 5px; place-items: center; min-height: 98px; padding: 5px;
  border: 1px solid #8b672d; background: #1b0c08; color: var(--mir-gold); cursor: pointer;
}
.class-cards button.selected { border-color: #e0b553; box-shadow: inset 0 0 0 1px #f6da8b; }
.class-cards button.locked { filter: grayscale(0.85); opacity: 0.62; cursor: not-allowed; }
.class-cards button.locked.unlockable {
  filter: none;
  opacity: 1;
  cursor: pointer;
  border-color: #b38a35;
  box-shadow: inset 0 0 0 1px rgba(224, 181, 83, 0.35);
}
.class-cards canvas { width: 58px; height: 58px; image-rendering: pixelated; }
.class-cards img.class-sprite {
  width: auto;
  max-width: 72px;
  max-height: 96px;
  height: auto;
  image-rendering: pixelated;
}

.combat-avatar img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.create-preview canvas,
.paperdoll-stage canvas {
  image-rendering: pixelated;
}
.class-cards small { color: #caa966; font-size: 10px; }
.hardcore-card { display: grid; gap: 5px; padding: 10px; border: 1px solid #8b672d; background: #2b080adb; color: #f2cf87; cursor: pointer; }
.hardcore-card b { color: #ff8c62; text-align: center; }
.hardcore-card span, .lineage-panel p { color: #d7c18c; font-size: 12px; }
.name-row { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: center; margin-top: 12px; color: #e7cf85; }
.name-row input { height: 30px; border: 1px solid #b78c3e; background: #060403; color: var(--mir-gold); padding: 0 8px; min-width: 0; }
.create-preview { display: grid; place-items: center; text-align: center; }
.create-preview canvas { image-rendering: pixelated; margin: 8px 0; }
.lineage-panel b { color: #ffdf7b; }

/* Game shell */
.app-shell { min-height: 100vh; background: #070707; }
.playfield { position: relative; min-height: 100vh; overflow: hidden; border: 1px solid #2a2114; background: #1a2e1a; }
#panel-root {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
}
#panel-root .floating-panel { pointer-events: auto; }
.game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; display: block; }

.mir-topbar {
  position: absolute; top: 14px; left: 24px; right: 24px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border: 1px solid #5f4a24;
  background: linear-gradient(#16120b, #080705);
  box-shadow: inset 0 0 0 1px #ffdf9314, 0 8px 28px #00000073;
}
.mir-topbar p { color: var(--mir-teal); font-size: 12px; font-weight: 700; text-transform: uppercase; margin: 0; }
.mir-topbar h1 { color: var(--mir-gold); font-size: 22px; margin: 0; }
.town-vitals-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.town-vitals-strip span {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px;
  border: 1px solid rgba(198, 153, 79, 0.5); background: #0c0604d1; color: var(--mir-gold); font-size: 12px;
}
.town-vitals-strip b { color: #59d0ae; }

.main-hud-dock {
  position: absolute; top: 86px; right: 24px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 4px; padding: 5px; max-width: min(560px, calc(100% - 32px));
  border: 1px solid #5f4a24; background: #080604e6;
  box-shadow: inset 0 0 0 1px #ffdf9314, 0 8px 24px #0000006b;
}
.main-hud-dock button {
  min-width: 34px; min-height: 30px; border: 1px solid var(--mir-border-light);
  background: #120a05; color: var(--mir-gold); font-weight: 700; font-size: 10px; cursor: pointer;
  padding: 0 6px;
}
.main-hud-dock button.active { border-color: #e0b553; background: #2b1a09; }
.main-hud-dock .text-action { min-width: 54px; }

/* UI layout mode */
.ui-layout-tab {
  position: absolute; left: 0; top: 50%; z-index: 45;
  transform: translateY(-50%);
  min-width: 24px; padding: 10px 5px;
  border: 1px solid #5f4a24; border-left: none; border-radius: 0 8px 8px 0;
  background: #080604eb; color: var(--mir-gold);
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  cursor: pointer; writing-mode: vertical-rl; text-orientation: mixed;
  box-shadow: inset 0 0 0 1px #ffdf9314, 4px 0 16px #00000055;
}
.ui-layout-tab:hover { background: #1a1008; }
.ui-layout-tab.active { border-color: #e0b553; background: #2b1a09; color: #ffe89f; }

.ui-layout-banner {
  position: absolute; left: 50%; top: 10px; z-index: 46;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 12px; border: 1px solid #5f4a24;
  background: #120a06f0; color: #d9c28d; font-size: 11px;
  box-shadow: 0 8px 24px #00000073;
}
.ui-layout-banner button {
  min-height: 26px; padding: 0 10px; border: 1px solid var(--mir-border-light);
  background: #1a0d08; color: var(--mir-gold); font-size: 10px; font-weight: 700; cursor: pointer;
}
.ui-layout-banner [data-reset-layout] { color: #f0a070; }

.ui-custom-pos { right: auto !important; bottom: auto !important; }

.playfield.ui-layout-mode [data-ui-block],
.playfield.ui-layout-mode .floating-panel {
  outline: 2px dashed rgba(224, 181, 83, 0.55);
  outline-offset: 2px;
}
.playfield.ui-layout-mode [data-ui-block] { cursor: move; pointer-events: auto; }
.playfield.ui-layout-mode [data-ui-block="combat-hud"] > * { pointer-events: none; }
.playfield.ui-layout-mode [data-ui-block="hud-dock"] button,
.playfield.ui-layout-mode [data-ui-block="town-dock"] button { pointer-events: none; }
.playfield.ui-layout-mode .floating-panel header { cursor: move; }
.playfield.ui-layout-mode .floating-panel header .panel-close { cursor: pointer; }

/* Town */
.town-overlay { position: absolute; top: 84px; right: 30px; bottom: 26px; left: 30px; z-index: 4; pointer-events: none; }
.town-npcs { position: absolute; inset: 0; pointer-events: auto; }
.town-npcs button {
  position: absolute; display: grid; gap: 8px; place-items: center; min-width: 104px;
  transform: translate(-50%, -100%); border: 1px solid transparent; background: transparent;
  color: var(--mir-gold); cursor: pointer; text-shadow: 1px 1px 2px #000;
}
.town-npcs button b {
  padding: 2px 7px; border: 1px solid rgba(240, 200, 111, 0.48);
  background: #0c0604c7; color: #ffefb3; font-size: 13px;
}
.town-npcs canvas { width: 64px; height: 82px; image-rendering: pixelated; filter: drop-shadow(4px 8px 7px rgba(0,0,0,.55)); }
.town-npcs img.npc-sprite {
  width: auto;
  max-width: 96px;
  max-height: 110px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(4px 8px 7px rgba(0, 0, 0, 0.55));
}

.combat-avatar img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.combat-enemy-card img {
  width: auto;
  max-width: 48px;
  max-height: 48px;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.create-preview canvas,
.paperdoll-stage canvas { image-rendering: pixelated; }

.town-action-dock {
  position: absolute; left: max(18px, calc(50% - 520px)); right: max(18px, calc(50% - 520px)); bottom: 0; z-index: 7;
  display: flex; justify-content: center; gap: 6px; overflow-x: auto; padding: 7px 8px;
  border: 1px solid #5f4a24; background: #080604eb; pointer-events: auto;
}
.town-action-dock button {
  flex: 0 0 68px; width: 68px; height: 52px; border: 1px solid var(--mir-border-light);
  background: #120a05; color: var(--mir-gold); font-size: 10px; cursor: pointer;
}
.town-action-dock button[data-town-action="options"] {
  border-color: #c4994f;
  color: #ffe89f;
}

/* Combat HUD */
.combat-hud-modern {
  position: absolute; top: 86px; right: 18px; bottom: 12px; left: 18px; z-index: 4; pointer-events: none;
}
.combat-hud-modern button, .combat-hero-card, .combat-enemy-cards, .combat-command-bar { pointer-events: auto; }

.combat-hero-card {
  position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 9px;
  width: min(360px, calc(100vw - 36px)); border: 1px solid rgba(196, 153, 79, 0.72);
  background: linear-gradient(180deg, #120a06eb, #060403d1); padding: 9px;
}
.combat-avatar {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid #7a5c2c; background: radial-gradient(circle at 50% 28%, #345f72, #101015 72%);
  color: #fff0bd; font-weight: 900;
}
.battle-meter { display: grid; grid-template-columns: 32px minmax(90px, 1fr) 54px; align-items: center; gap: 8px; color: #f5dfac; font-size: 12px; }
.battle-meter div { height: 12px; overflow: hidden; border-radius: 999px; background: #171717; border: 1px solid rgba(0,0,0,.62); }
.battle-meter i { display: block; height: 100%; border-radius: inherit; }
.battle-meter.hp i { background: linear-gradient(90deg, var(--mir-danger), var(--mir-hp)); }
.battle-meter.mp i { background: linear-gradient(90deg, #315bb9, var(--mir-mp)); }
.battle-xp { display: grid; grid-template-columns: auto minmax(80px, 1fr); gap: 8px; align-items: center; color: #d0b273; font-size: 11px; }
.battle-xp i { display: block; height: 6px; border-radius: 999px; background: #171717; overflow: hidden; }
.battle-xp em { display: block; height: 100%; background: linear-gradient(90deg, var(--mir-xp), #e0b25d); }

.combat-enemy-cards {
  position: absolute; top: 54px; right: 0; display: grid; gap: 6px;
  width: min(330px, calc(100vw - 36px)); max-height: min(34vh, 260px); overflow: auto;
}
.combat-enemy-card {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 52px;
  border: 1px solid rgba(196, 153, 79, 0.58); background: #0a0504d6; padding: 5px 7px;
}
.combat-enemy-card.boss { border-color: #d96345; }
.combat-enemy-card img, .combat-enemy-card canvas { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.combat-enemy-card b { color: #fff0bd; font-size: 12px; }
.combat-enemy-card small { color: #d0b273; font-size: 11px; }
.combat-enemy-card i { display: block; height: 7px; margin: 4px 0; border-radius: 999px; background: #171717; overflow: hidden; }
.combat-enemy-card em { display: block; height: 100%; background: linear-gradient(90deg, var(--mir-danger), var(--mir-hp)); }

.combat-command-bar {
  position: absolute; right: 0; bottom: 0; left: 0; display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(190px, 1fr) minmax(120px, 0.5fr) minmax(230px, 1.1fr);
  gap: 8px; align-items: center; border: 1px solid rgba(196, 153, 79, 0.72);
  background: linear-gradient(180deg, #140d08e6, #060403e6); padding: 8px;
}
.stage-progress { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; align-items: center; gap: 10px; color: #f5dfac; font-size: 12px; }
.stage-progress div { height: 11px; overflow: hidden; border-radius: 999px; background: #ffffff1f; }
.stage-progress i { display: block; height: 100%; background: #e2b25c; }
.combat-skillbar, .combat-beltbar { display: flex; gap: 4px; overflow: hidden; }
.combat-skillbar span, .combat-beltbar button {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--mir-border-light); background: #100604; font-size: 10px;
}
.combat-log-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; }
.combat-log-panel button { min-height: 30px; border: 1px solid var(--mir-border-light); background: #1a0d08; color: var(--mir-gold); font-weight: 800; cursor: pointer; }
.combat-log-panel span { color: var(--mir-gold); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combat-log-panel small { grid-column: 1 / -1; color: #8fd9bf; font-size: 10px; }

/* Floating panels */
.floating-panel {
  position: absolute; z-index: 8; width: min(390px, calc(100vw - 44px)); pointer-events: auto;
  top: 140px; left: 24px;
}
.floating-panel.wide { width: min(760px, calc(100vw - 44px)); left: 50%; transform: translateX(-50%); }
.floating-panel[data-panel-id="char-inv"] {
  width: min(560px, calc(100% - 32px));
  max-height: min(76vh, 580px);
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.floating-panel[data-panel-id="char-inv"] .mir-window-body {
  padding: 10px;
  overflow-y: auto;
  max-height: min(62vh, 480px);
}
.floating-panel[data-panel-id="char-inv"] header {
  padding: 8px 10px;
}
.floating-panel[data-panel-id="char-inv"] header h2 {
  font-size: 1.05rem;
}
.floating-panel[data-panel-id="char-inv"] header small {
  font-size: 11px;
}

.char-inv-layout {
  display: grid;
  grid-template-columns: minmax(180px, 210px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.char-inv-pane--paperdoll .paperdoll-dialog {
  min-height: 0;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 4px;
}
.char-inv-pane--paperdoll .equipment-slots { gap: 3px; }
.char-inv-pane--paperdoll .equipment-slot button {
  width: 34px;
  height: 34px;
}
.char-inv-pane--paperdoll .equipment-slot button img.item-icon {
  width: 22px;
  height: 22px;
}
.char-inv-pane--paperdoll .equipment-slot small {
  font-size: 8px;
  letter-spacing: -0.02em;
}
.char-inv-pane--paperdoll .paperdoll-stage {
  padding: 6px;
}
.char-inv-pane--paperdoll .paperdoll-stage canvas {
  width: 68px;
  height: 94px;
}
.char-inv-pane--paperdoll .stat-strip {
  font-size: 10px;
  margin-top: 4px;
  gap: 1px;
}
.char-inv-pane--paperdoll #char-panel-hint { display: none; }
.char-inv-pane--bag .mir-slot-grid.inv {
  grid-template-columns: repeat(6, 40px);
  grid-auto-rows: 40px;
  justify-content: start;
  max-height: 248px;
  overflow-y: auto;
}
.char-inv-pane--bag .mir-slot {
  aspect-ratio: unset;
  width: 40px;
  height: 40px;
}
.char-inv-pane--bag .mir-slot img.item-icon { inset: 3px; }
.char-inv-pane--bag .panel-hint,
.char-inv-pane--bag p {
  font-size: 11px;
  margin-top: 6px;
}
.char-inv-pane--bag .mir-slot .item-icon-fallback {
  font-size: 18px;
}

.mir-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 3px; margin-bottom: 8px; }
.mir-tabs button.active { background: #2b1a09; border-color: #e0b553; }

.mir-slot-grid { display: grid; gap: 1px; border: 1px solid #7a5c2c; background: #7a5c2c; }
.mir-slot-grid.inv { grid-template-columns: repeat(6, 1fr); }
.mir-slot {
  position: relative; aspect-ratio: 1; background: #140504; border: 0; cursor: pointer; min-width: 0;
}
.mir-slot img.item-icon,
.combat-beltbar button img.item-icon,
.merchant-icon img.item-icon,
.equipment-slot button img.item-icon {
  position: absolute;
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
.mir-slot .item-icon-fallback,
.equipment-slot .item-icon-fallback,
.merchant-icon .item-icon-fallback {
  font-size: 22px;
  line-height: 1;
}
.equipment-slot button {
  position: relative;
}
.equipment-slot button img.item-icon {
  position: static;
  width: 32px;
  height: 32px;
  inset: auto;
}
.merchant-icon {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
}
.merchant-icon img.item-icon {
  position: static;
  width: 32px;
  height: 32px;
  inset: auto;
}
.combat-beltbar button {
  position: relative;
}
.combat-beltbar button img.item-icon {
  width: 28px;
  height: 28px;
  position: static;
  inset: auto;
}
.mir-slot b { position: absolute; right: 4px; bottom: 2px; color: #fff0bd; font-size: 11px; text-shadow: 1px 1px 1px #000; }

.paperdoll-dialog { display: grid; grid-template-columns: 55px minmax(0, 1fr) 55px; gap: 8px; min-height: 360px; }
.equipment-slots { display: grid; align-content: start; gap: 7px; }
.equipment-slot { display: grid; gap: 2px; justify-items: center; }
.equipment-slot small { color: #a8894d; font-size: 9px; text-transform: uppercase; }
.equipment-slot button {
  width: 43px; height: 43px; display: grid; place-items: center;
  border: 1px solid #7a5c2c; background: #100504; cursor: pointer;
}
.equipment-slot button:hover { border-color: #e0b553; }

.panel-hint { margin: 8px 0 0; color: #d0b273; font-size: 12px; min-height: 16px; }

.options-panel { display: grid; gap: 10px; }
.options-subhead { margin: 4px 0 0; color: #ffe08a; font-size: 14px; }
.options-toggle {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--mir-border-light); background: #100504;
}
.options-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center;
  padding: 6px 0; border-top: 1px solid rgba(122, 92, 44, 0.35);
}
.options-row--volume { grid-template-columns: 110px minmax(0, 1fr) 42px; }
.options-row span { color: #d9c28d; font-size: 12px; }
.options-row select {
  width: 100%; padding: 6px 8px; border: 1px solid #7a5c2c; background: #140504; color: var(--mir-gold);
}
.options-row--tracks {
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: start;
}
.music-track-picker {
  display: flex; flex-wrap: wrap; gap: 4px; max-height: 72px; overflow-y: auto; padding: 2px 0;
}
.music-track-btn {
  flex: 0 0 auto; padding: 5px 8px; border: 1px solid #7a5c2c; background: #140504;
  color: var(--mir-gold); font-size: 10px; font-weight: 600; cursor: pointer; line-height: 1.2;
}
.music-track-btn:hover { border-color: #e0b553; }
.music-track-btn.selected { border-color: #e0b553; background: #2b1a09; color: #ffe89f; }
.options-row input[type="range"] { width: 100%; accent-color: #e0b553; }
.options-row b { color: #ffe89f; font-size: 12px; text-align: right; }
.floating-panel[data-panel-id="options"] {
  width: min(440px, calc(100% - 24px));
  max-height: min(58vh, 420px);
  overflow: visible;
  top: auto;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
}
.floating-panel[data-panel-id="options"] .mir-window-body {
  overflow-y: auto;
  max-height: min(50vh, 360px);
}

.merchant-list { display: grid; gap: 6px; max-height: 340px; overflow: auto; margin-top: 8px; }
.merchant-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.merchant-pane h3 { margin: 0; color: #ffe08a; font-size: 14px; }
.merchant-pane-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.merchant-sell-all { flex-shrink: 0; white-space: nowrap; }
.merchant-sell-all:disabled { opacity: 0.45; cursor: not-allowed; }
.merchant-sell-list { max-height: 320px; }

@media (max-width: 700px) {
  .merchant-layout { grid-template-columns: 1fr; }
}

.blacksmith-layout { display: grid; gap: 12px; }
.blacksmith-npc-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center;
  border: 1px solid var(--mir-border-light); background: #100504; padding: 10px;
}
.blacksmith-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.blacksmith-pane h3 { margin: 0 0 8px; color: #ffe08a; font-size: 14px; }
.blacksmith-list { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.blacksmith-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  width: 100%; padding: 8px 10px; border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7;
  cursor: pointer; text-align: left; color: inherit;
}
.blacksmith-row:hover { outline: 1px solid #e0b553; }
.blacksmith-row.selected { border-color: #b38a35; background: #221208; }
.blacksmith-row b { color: #ffe08a; font-size: 14px; }
.blacksmith-row small { display: block; color: #d9c28d; font-size: 11px; margin-top: 2px; }
.blacksmith-plus { color: #ffdf7b; font-size: 13px; font-weight: 700; min-width: 36px; text-align: right; }
.upgrader-owned { color: #8fd4b8; font-size: 12px; font-weight: 700; min-width: 28px; text-align: right; }
.essence-balance { margin-top: 8px; color: #b8e8ff; font-size: 13px; }
.essence-balance b { color: #7fd4ff; }
.blacksmith-detail {
  display: grid; gap: 10px; border: 1px solid var(--mir-border-light); background: #100504; padding: 10px;
}
.blacksmith-detail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.blacksmith-detail-head b { color: #ffe08a; }
.blacksmith-detail-head small { color: #d9c28d; font-size: 12px; }
.blacksmith-stat-grid { display: grid; gap: 6px; }
.blacksmith-stat-grid div {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center;
  border-top: 1px solid rgba(122, 92, 44, 0.35); padding-top: 6px;
}
.blacksmith-stat-grid span { color: #a8894d; font-size: 12px; }
.blacksmith-stat-grid b { color: #ffe89f; font-size: 13px; }

@media (max-width: 700px) {
  .blacksmith-panes { grid-template-columns: 1fr; }
}
.merchant-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; padding: 8px 10px;
}
.merchant-row.locked { opacity: 0.55; }
.merchant-row--other-class { opacity: 0.88; }
.merchant-class-note { display: block; color: #c9a86a !important; font-size: 10px !important; margin-top: 2px; }
.merchant-row b { color: #ffe08a; display: block; }
.merchant-row small { color: #d9c28d; font-size: 11px; line-height: 1.3; }
.merchant-icon { font-size: 22px; text-align: center; }
.merchant-row button {
  min-width: 64px; padding: 6px 10px; border: 1px solid #7a5c2c; background: #2b1a09;
  color: #ffe89f; cursor: pointer;
}
.merchant-row button:disabled { opacity: 0.45; cursor: not-allowed; }

.mir-slot:hover { outline: 1px solid #e0b553; }

.storage-layout { display: grid; gap: 12px; }
.storage-npc-card {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; padding: 10px 12px;
}
.storage-npc-img {
  width: 72px; height: 96px; object-fit: contain; image-rendering: pixelated;
  border: 1px solid #7a5c2c; background: #0b0403;
}
.storage-npc-card p { margin: 0; color: #d9c28d; font-size: 12px; line-height: 1.4; }
.storage-npc-card code { color: #ffe08a; font-size: 11px; }
.storage-panes {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: start;
}
.storage-pane h3 {
  margin: 0 0 6px; color: #ffe08a; font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.storage-pane small { display: block; margin-top: 6px; color: #d0b273; font-size: 11px; }
.storage-arrow {
  align-self: center; color: #e0b553; font-size: 22px; padding-top: 24px;
}
.storage-grid { max-height: 280px; overflow: auto; }

@media (max-width: 720px) {
  .storage-panes { grid-template-columns: 1fr; }
  .storage-arrow { display: none; }
  .storage-npc-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
.equipment-slot button img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.paperdoll-stage {
  display: grid; place-items: center; border: 1px solid #7a5c2c;
  background: radial-gradient(circle at 50% 30%, #493722b8, #110805eb); padding: 10px;
}
.paperdoll-stage canvas { image-rendering: pixelated; }
.stat-strip { display: grid; gap: 2px; width: 100%; color: var(--mir-gold); font-size: 12px; margin-top: 8px; }

.waypoint-location-layout { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.8fr); gap: 10px; }
.waypoint-area-list { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.waypoint-area-list button {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; min-height: 54px; padding: 10px; text-align: left;
  border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; color: var(--mir-gold); cursor: pointer;
}
.waypoint-area-list button.selected { border-color: #e0b25d; background: #523110cc; }
.waypoint-area-list small { color: #d0b273; display: block; }
.waypoint-route-list { display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.waypoint-route-row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 52px; padding: 8px 10px; border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7;
}
.waypoint-route-row.locked { opacity: 0.5; }

.panel-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.panel-tabs .panel-tab {
  border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; color: var(--mir-gold);
  padding: 6px 12px; cursor: pointer; font-size: 12px;
}
.panel-tabs .panel-tab.active { border-color: #e0b25d; background: #523110cc; }
.panel-section-title { margin: 14px 0 8px; color: #e0b25d; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.ascension-block { border: 1px solid #5f4320; background: #160807e0; padding: 10px; margin: 10px 0; }
.auto-route-panel { display: grid; gap: 8px; }
.auto-route-panel label { display: flex; gap: 8px; align-items: center; color: #d0b273; font-size: 13px; }
.auto-route-toggle input { accent-color: #e0b25d; }
.inv-toolbar { display: flex; gap: 6px; margin: 8px 0; }
.mir-button.small { padding: 4px 10px; font-size: 12px; min-height: 28px; }
.belt-config-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid #5f432044; display: grid; gap: 6px; }
.belt-config-sliders { display: grid; gap: 6px; }
.belt-config-sliders label { display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; font-size: 12px; color: #d0b273; }
.belt-config-bar { display: flex; gap: 4px; }
.belt-assign-btn {
  width: 36px; height: 36px; border: 1px solid #7a5c2c; background: #110705c7; color: var(--mir-gold); cursor: pointer;
}
.route-order {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 999px; background: #ffe8ad1f;
}

.daily-quest-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border: 1px solid #5f4320; background: #160807e0; padding: 10px; margin-bottom: 8px;
  min-height: 58px;
}
.daily-quest-row.complete { border-color: #b38a35; }
.daily-quest-row p { margin: 3px 0 0; color: #d9c28d; font-size: 13px; }
.daily-quest-row h3 { margin: 0; color: #ffe08a; font-size: 16px; }

.quest-scroll-list {
  max-height: calc(58px * 5 + 8px * 4);
  overflow-y: auto;
  padding-right: 4px;
}
.quest-scroll-list .daily-quest-row:last-child { margin-bottom: 0; }
.bounty-row h3 { color: #ffd89a; }
.bounty-reward { display: block; margin-top: 4px; color: #c4a86a; font-size: 11px; }
.bounty-intro { margin-bottom: 6px; }
.bounty-scroll-list { max-height: 380px; }
.floating-panel[data-panel-id="bounty"] {
  width: min(480px, calc(100% - 24px));
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.roster-list { display: grid; gap: 8px; margin-bottom: 12px; }
.roster-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch;
  width: 100%; border: 1px solid #5f4320; background: #160807e0;
}
.roster-row.active { border-color: #b38a35; background: #221208; opacity: 0.92; }
.roster-row-switch {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  width: 100%; padding: 10px 12px; border: 0; background: transparent;
  cursor: pointer; text-align: left; color: inherit;
}
.roster-row-switch:hover:not(:disabled) { outline: 1px solid #e0b553; outline-offset: -1px; }
.roster-row-switch:disabled { cursor: default; }
.roster-row-delete {
  align-self: center; margin-right: 8px; padding: 6px 10px;
  border: 1px solid #7a3030; background: #2a0c0c; color: #f0a8a8;
  font-size: 11px; text-transform: uppercase; cursor: pointer;
}
.roster-row-delete:hover { border-color: #e07070; background: #3a1010; color: #ffd0d0; }
.roster-row-main { display: grid; gap: 3px; }
.roster-row-main b { color: #ffe08a; font-size: 15px; }
.roster-row-main span { color: #d9c28d; font-size: 12px; }
.roster-row-switch small { color: #a8894d; font-size: 11px; text-transform: uppercase; }
.roster-actions { display: flex; justify-content: center; }

.meta-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.meta-summary div { border: 1px solid var(--mir-border-light); background: #0b0403c2; padding: 8px; }
.meta-summary span { color: #cfb77c; font-size: 11px; }
.meta-summary b { display: block; margin-top: 3px; color: #ffe89f; font-size: 17px; }
.floating-panel[data-panel-id="meta"] {
  width: min(420px, calc(100% - 24px));
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: min(82vh, 640px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.floating-panel[data-panel-id="meta"] header { flex-shrink: 0; }
.floating-panel[data-panel-id="meta"] .mir-window-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 6px;
  -webkit-overflow-scrolling: touch;
}
.progression-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  border: 1px solid var(--mir-border-light); background: #100504; padding: 9px; margin-bottom: 6px;
}
.progression-row b { color: #ffdf7b; }
.progression-row span { color: #d8c496; font-size: 12px; }

.magic-tree { display: grid; gap: 7px; max-height: 360px; overflow: auto; }
.magic-tree button {
  display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; min-height: 44px; padding: 5px 7px;
  border: 1px solid #4e3518; background: linear-gradient(90deg, #140807, #23130b); text-align: left; color: var(--mir-gold); cursor: pointer;
}
.magic-tree button span small { display: block; color: #d0b273; font-size: 11px; line-height: 1.25; }
.magic-tree button span small:last-child { color: #b8a070; margin-top: 2px; }
.magic-tree button.locked { filter: grayscale(0.8); opacity: 0.68; }

.leaderboard-row {
  display: grid; grid-template-columns: 28px minmax(0, 1.4fr) 42px 64px 72px; gap: 8px; align-items: center;
  min-height: 42px; border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; padding: 6px 8px; margin-bottom: 4px;
}
.leaderboard-row b { color: #ffe08a; font-weight: 700; }
.leaderboard-row small { display: block; color: #a8894d; font-size: 10px; margin-top: 2px; }
.leaderboard-row--you { background: #221208; border-left: 2px solid #e0b553; }
.leaderboard-row.header { color: var(--mir-teal); font-size: 12px; font-weight: 800; text-transform: uppercase; min-height: 30px; }

.save-panel { display: grid; gap: 12px; }
.save-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.save-summary div {
  border: 1px solid rgba(178, 133, 62, 0.44); background: #110705c7; padding: 8px 10px;
}
.save-summary span { display: block; color: #a8894d; font-size: 11px; text-transform: uppercase; }
.save-summary b { color: #ffe08a; font-size: 14px; }
.save-actions { display: grid; gap: 8px; }
.floating-panel[data-panel-id="save"] {
  width: min(420px, calc(100% - 24px));
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.floating-panel[data-panel-id="leaderboard"] {
  width: min(520px, calc(100% - 24px));
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
  max-height: min(72vh, 520px);
}
.floating-panel[data-panel-id="leaderboard"] .mir-window-body {
  overflow-y: auto;
  max-height: min(60vh, 440px);
}

.death-overlay {
  position: absolute; inset: 0; z-index: 11; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.58); pointer-events: auto;
}
.death-summary { display: grid; justify-items: center; gap: 12px; padding: 18px; text-align: center; }
.death-summary p { color: #e8cf89; }
.death-summary div { min-width: 180px; padding: 9px; border: 1px solid var(--mir-border-light); background: #120705; display: grid; gap: 3px; }

.guide-section p, .patch-list li { color: #d9c28d; line-height: 1.4; font-size: 13px; }
.patch-list { padding-left: 18px; display: grid; gap: 5px; }

@media (max-width: 1100px) {
  .char-inv-layout { grid-template-columns: 1fr; }
  .floating-panel[data-panel-id="char-inv"] {
    width: min(440px, calc(100% - 24px));
    max-height: min(78vh, 560px);
  }
  .char-inv-pane--bag .mir-slot-grid.inv {
    grid-template-columns: repeat(6, 38px);
    grid-auto-rows: 38px;
  }
  .char-inv-pane--bag .mir-slot {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 980px) {
  .mir-topbar { left: 10px; right: 10px; }
  .main-hud-dock { right: 10px; top: 82px; max-width: calc(100vw - 20px); overflow-x: auto; }
  .combat-command-bar { grid-template-columns: 1fr 1fr; }
  .waypoint-location-layout { grid-template-columns: 1fr; }
  .char-inv-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .create-grid { grid-template-columns: 1fr; }
  .class-cards { grid-template-columns: 1fr; }
  .combat-hud-modern { top: 130px; right: 8px; bottom: 8px; left: 8px; }
  .combat-hero-card { width: min(244px, calc(100vw - 16px)); }
  .combat-enemy-cards { width: 128px; }
  .combat-command-bar { grid-template-columns: 1fr; max-height: 34vh; overflow: auto; }
}