/* Metin2 client look, built only from the game's own textures (img/m2, extracted by ref/tools/extract-ui.js).
   Frames use 9-slice composites (board9 / thinboard9 / titlebar3 / horizontalbar3) through border-image. */
:root {
  --m2: url("../img/m2/");
  --text: #e8e0d0;
  --muted: #a7a7a7;         /* NORMAL_COLOR */
  --title: #f2e7c1;         /* TITLE_COLOR */
  --positive: #8ab98e;      /* POSITIVE_COLOR */
  --negative: #e57976;      /* NEGATIVE_COLOR */
  --special: #ffc800;       /* SPECIAL_TITLE_COLOR */
  --condition: #c3c3c3;
  --attr: #b0dfb4;          /* SPECIAL_POSITIVE_COLOR (attributes you add) */
  --cell: 32px;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  font-size: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: var(--vh, 100vh); } /* --vh = screen height in page pixels (the page zoom scales 100vh) */

body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 40, 20, 0.35), transparent 60%),
    linear-gradient(rgba(5, 4, 3, 0.82), rgba(5, 4, 3, 0.9)),
    url("../img/m2/board_base.png") repeat,
    #0a0908;
  cursor: url("../img/m2/cursor.png") 2 2, auto;
  overflow-x: auto; /* windows moved past the right edge: scroll sideways to them */
}
button, select, input, label, a { cursor: url("../img/m2/cursor.png") 2 2, pointer; }
.item { cursor: url("../img/m2/cursor_pick.png") 2 2, grab; }
body.dragging, body.dragging * { cursor: url("../img/m2/cursor_pick.png") 2 2, grabbing !important; }

/* ------------------------------------------------------------------ taskbar (top) */
.taskbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border: 0;
  border-image: url("../img/m2/horizontalbar3.png") 0 32 fill / 0 32px round stretch;
  min-height: 34px;
}
.taskbar .brand {
  margin-right: auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  color: var(--title);
  text-shadow: 0 0 6px rgba(255, 200, 100, 0.3), 1px 1px 0 #000;
}

/* ------------------------------------------------------------------ windows (Board) */
.desktop { position: relative; min-height: calc(100vh - 40px); }
.board {
  position: absolute;
  padding: 7px 8px 10px;
  border: 0;
  border-image: url("../img/m2/board9.png") 32 fill / 32px / 0 round;
  min-width: 120px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
}
.board.hidden { display: none; }
.titlebar {
  position: relative;
  height: 23px;
  margin-bottom: 4px;
  padding: 0 24px;
  border: 0;
  border-image: url("../img/m2/titlebar3.png") 0 32 fill / 0 32px round stretch;
  color: var(--title);
  font-weight: bold;
  line-height: 22px;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
  user-select: none;
  cursor: url("../img/m2/cursor.png") 2 2, move;
  white-space: nowrap;
  overflow: hidden;
}
.titlebar .close {
  position: absolute;
  top: 3px; /* on the X socket painted in titlebar_right (ui.py: width - 18, y 3) */
  right: 3px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: url("../img/m2/close_button_01.png");
}
.titlebar .close:hover { background-image: url("../img/m2/close_button_02.png"); }
.titlebar .close:active { background-image: url("../img/m2/close_button_03.png"); }

/* Static layout on small screens: windows stack instead of floating */
.desktop.static { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 16px; }
.desktop.static .board { position: static; max-width: 100%; }
.desktop.static .titlebar { cursor: default; }

/* ------------------------------------------------------------------ buttons / tabs / inputs */
.m2-btn {
  height: 21px;
  min-width: 43px;
  padding: 0 10px;
  font: inherit;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  background: none;
  border: 0;
  border-image: url("../img/m2/middle_button_01.png") 0 8 fill / 0 8px stretch;
  white-space: nowrap;
}
/* a <label> styled as a button (Import): centre its text like a <button> */
label.m2-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle; cursor: pointer; }
.m2-btn:hover { border-image-source: url("../img/m2/middle_button_02.png"); }
.m2-btn:active { border-image-source: url("../img/m2/middle_button_03.png"); }
.m2-btn:disabled { opacity: 0.55; }
.m2-btn.big { height: 25px; border-image: url("../img/m2/xlarge_button_01.png") 0 12 fill / 0 12px stretch; font-weight: bold; color: var(--title); }
.m2-btn.big:hover { border-image-source: url("../img/m2/xlarge_button_02.png"); }
.m2-btn.big:active { border-image-source: url("../img/m2/xlarge_button_03.png"); }

.tabs { display: flex; gap: 0; margin: 2px 0 6px; flex-wrap: wrap; }
.tab {
  flex: 1 1 0;
  height: 19px;
  min-width: 0;
  padding: 0 4px;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 0;
  border-image: url("../img/m2/tab_button_middle_01.png") 0 6 fill / 0 6px stretch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab:hover { border-image-source: url("../img/m2/tab_button_middle_02.png"); color: #fff; }
.tab.active { border-image-source: url("../img/m2/tab_button_middle_03.png"); color: #000; font-weight: bold; }
.tab.half { flex: 0 0 39px; border-image-source: url("../img/m2/tab_button_large_half_01.png"); }
.tab.half:hover { border-image-source: url("../img/m2/tab_button_large_half_02.png"); }
.tab.half.active { border-image-source: url("../img/m2/tab_button_large_half_03.png"); }

input, select {
  height: 18px;
  font: inherit;
  color: #fff;
  background: none;
  border: 0;
  border-image: url("../img/m2/parameter_slot_04.png") 0 4 fill / 0 4px stretch;
  padding: 0 6px;
  min-width: 0;
  outline: none;
}
input:focus, select:focus { filter: brightness(1.35); }
input[type="number"] { width: 64px; text-align: right; }
input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }
select {
  appearance: none;
  padding-right: 18px;
  background: url("../img/m2/scrollbar_thin_down_button_01.png") right 1px center / 14px 14px no-repeat;
}
select option, select optgroup { background: #0b0a09; color: #fff; }
input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  border: 0;
  border-image: none;
  padding: 0;
  background: #000;
  box-shadow: inset 0 0 0 1px #6b6358, inset 0 0 0 2px #000;
}
input[type="checkbox"]:checked { background: url("../img/m2/check_box.png"); box-shadow: none; }

/* ------------------------------------------------------------------ text / form rows */
.section {
  height: 17px;
  margin: 8px 0 4px;
  padding: 0 10px;
  line-height: 17px;
  color: var(--title);
  font-weight: bold;
  border: 0;
  border-image: url("../img/m2/horizontalbar3.png") 0 32 fill / 0 32px round stretch;
}
.row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.row > label:first-child, .row > .lbl { flex: 0 0 110px; color: var(--muted); }
.row input[type="text"], .row select, .row .cat-dd { flex: 1; }
.row .cat-cur { min-height: 22px; }
.check-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; color: var(--text); }
.hint { color: var(--muted); font-size: 11px; margin: 6px 0 0; line-height: 1.35; }
.pages { max-height: 520px; overflow: hidden auto; padding-right: 2px; }
.page { display: none; }
.page.active { display: block; }

/* stat rows with the client's char_info icons */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.stat { display: flex; align-items: center; gap: 4px; }
.stat img { width: 20px; height: 20px; image-rendering: pixelated; }
.stat b { color: var(--title); width: 26px; }
.stat input { width: 40px; }
.stat .total { color: var(--positive); font-size: 11px; white-space: nowrap; }

/* skills */
.skill-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 6px; margin: 3px 0; }
.skill-row img { width: 32px; height: 32px; image-rendering: pixelated; }
.skill-row .name { line-height: 1.2; }
.skill-row .name small { display: block; color: var(--muted); font-size: 10px; }
.skill-row .off { color: var(--muted); }
.skill-row select { width: 52px; }
.skill-row input[type="number"] { width: 40px; }
.skill-row.mount-row select { width: 100%; min-width: 0; } /* horse skills: the name list takes the free width */

/* ------------------------------------------------------------------ slots & items */
.slot, .inv-cell {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
}
.inv-cell { position: relative; background: url("../img/m2/slot_base.png"); }
.slot.drop-ok, .inv-cell.drop-ok { box-shadow: inset 0 0 0 2px #7fe07f; background-color: rgba(80, 200, 80, 0.2); }
.slot.drop-bad, .inv-cell.drop-bad { box-shadow: inset 0 0 0 2px #e05050; background-color: rgba(220, 60, 50, 0.2); }
.item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  touch-action: none;
  z-index: 1;
}
.item img { max-width: 32px; max-height: 100%; image-rendering: pixelated; pointer-events: none; }
.item:hover::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.12); pointer-events: none; }
.item .count {
  position: absolute;
  right: 1px;
  bottom: 0;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  pointer-events: none;
}
.item.dragging { opacity: 0.3; }
.item.invalid img { filter: grayscale(1) brightness(0.6); }
.item.invalid::before { content: ""; position: absolute; inset: 0; background: rgba(200, 0, 0, 0.25); pointer-events: none; }

/* equipment window: the client's equipment background with exact slot positions */
.equip-bg { position: relative; width: 157px; height: 223px; margin: 0 auto; background: url("../img/m2/equipment_bg_without_ring.png"); }
.equip-btn { position: absolute; width: 32px; height: 32px; padding: 0; border: 0; background: none; }
.equip-btn img { display: block; }
.equip-btn:hover img { filter: brightness(1.3); }

/* costume window */
.costume-bg { position: relative; margin: 6px auto 0; width: 113px; height: 176px; background: url("../img/m2/costume_bg.jpg"); }

/* inventory */
.inv-grid { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(9, var(--cell)); width: max-content; margin: 0 auto; position: relative; }
.inv-grid > .item { position: relative; inset: auto; }
.inv-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.trash { position: relative; width: 32px; height: 32px; background: url("../img/m2/slot_base.png"); display: grid; place-items: center; font-size: 16px; opacity: 0.85; }
.trash.drop-ok { box-shadow: inset 0 0 0 2px #e05050; }

/* catalog */
.catalog-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(6, var(--cell));
  grid-auto-rows: var(--cell);
  grid-auto-flow: row dense;
  height: 320px;
  overflow: hidden auto;
  width: calc(6 * var(--cell) + 16px);
  margin: 0 auto;
}
.catalog-grid .inv-cell { width: auto; height: auto; }
.catalog-grid .inv-cell.h2 { grid-row: span 2; }
.catalog-grid .inv-cell.h3 { grid-row: span 3; }

/* ------------------------------------------------------------------ tooltip (ThinBoard) */
.tooltip {
  position: fixed;
  z-index: 2000;
  max-width: 300px;
  min-width: 160px;
  padding: 8px 10px;
  border: 0;
  border-image: url("../img/m2/thinboard9.png") 16 fill / 16px round;
  pointer-events: none;
  text-align: center;
  line-height: 17px;
  color: var(--muted);
}
.tooltip .t-name { color: var(--special); font-weight: bold; }
.tooltip .t-info { color: var(--condition); }
.tooltip .t-pos { color: var(--positive); }
.tooltip .t-neg { color: var(--negative); }
.tooltip .t-attr { color: var(--attr); }
.tooltip .t-rare { color: #fafad2; } /* 6th/7th bonuses: pale yellow, sampled from the game tooltip */
.tooltip .t-dim { color: var(--muted); font-size: 11px; }
.tooltip .t-gap { height: 8px; }

.drag-ghost { position: fixed; z-index: 2001; width: 32px; pointer-events: none; transform: translate(-50%, -40%); filter: drop-shadow(0 0 3px rgba(255, 220, 120, 0.8)); }
.drag-ghost img { width: 32px; image-rendering: pixelated; }

/* ------------------------------------------------------------------ battle */
.battle-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.battle-form .full { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 4px; }
.combo { position: relative; }
.combo input { width: 100%; }
.combo-list {
  position: absolute;
  z-index: 200;
  left: 0;
  right: 0;
  top: 20px;
  max-height: 260px;
  overflow: auto;
  border: 0;
  border-image: url("../img/m2/thinboard9.png") 16 fill / 16px round;
  background: #0d0b09; /* opaque: the frame image is see-through */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);
  padding: 6px;
}
.combo-list div { display: flex; justify-content: space-between; gap: 6px; padding: 2px 4px; }
.combo-list div:hover, .combo-list div.active { background: rgba(255, 200, 0, 0.18); color: #fff; }
.combo-list small { color: var(--muted); }
.tag { font-size: 10px; margin-left: 4px; }
.tag.boss { color: #ff8a6a; }
.tag.stone { color: #8ec8ff; }

.result { margin-top: 8px; }
.result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.result-head .vs { width: 100%; color: var(--muted); }
.result-head .vs b { color: var(--title); }
.big-number { font-size: 22px; font-weight: bold; color: var(--special); text-shadow: 1px 1px 0 #000; }
.minmax { color: var(--muted); }
.minmax b { color: var(--text); }
table.m2 { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 6px; }
table.m2 th, table.m2 td { padding: 2px 5px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
table.m2 th:first-child, table.m2 td:first-child { text-align: left; }
table.m2 th { color: var(--muted); font-weight: normal; }
canvas#damage-chart { width: 100%; height: 130px; margin-top: 6px; display: block; }

/* bonus editor rows */
.bonus-list { display: flex; flex-direction: column; gap: 3px; }
.bonus-row { display: grid; grid-template-columns: 1fr 52px 15px; gap: 3px; align-items: center; }
.bonus-row.with-total { grid-template-columns: 1fr 52px 70px 15px; }
.bonus-row select { width: 100%; }
.bonus-row input { width: 52px; }
.bonus-row .x { width: 15px; height: 15px; padding: 0; border: 0; background: url("../img/m2/close_button_01.png"); }
.bonus-row .x:hover { background-image: url("../img/m2/close_button_02.png"); }
.bonus-total { font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.bonus-total.has-eq { color: var(--positive); }
.summary td { padding: 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.summary td:last-child { text-align: right; color: var(--positive); font-variant-numeric: tabular-nums; }

/* modal (item editor) */
.modal-backdrop { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.55); }
.modal-backdrop .board { position: relative; width: min(420px, 100%); max-height: calc(var(--vh, 100vh) - 32px); overflow: auto; }
.upgrade-row { display: flex; flex-wrap: wrap; gap: 2px; }
.upgrade-row .tab { flex: 0 0 auto; min-width: 30px; }
.weapon-picker { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 2px; max-height: 180px; overflow: auto; }
.weapon-picker button { position: relative; width: 32px; height: 64px; padding: 0; border: 0; background: url("../img/m2/slot_base.png") top / 32px 32px repeat-y; }
.weapon-picker button.selected { box-shadow: inset 0 0 0 2px var(--special); }
.weapon-picker img { max-width: 32px; max-height: 64px; }
.editor-actions { display: flex; justify-content: space-between; gap: 6px; margin-top: 10px; }

pre.json { max-height: calc(var(--vh, 100vh) * .5); overflow: auto; margin: 0 0 6px; padding: 6px; background: rgba(0, 0, 0, 0.5); color: #b9e0a0; font-size: 11px; white-space: pre-wrap; word-break: break-all; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2100; padding: 10px 16px; border: 0; border-image: url("../img/m2/thinboard9.png") 16 fill / 16px round; color: var(--title); }
.error { color: var(--negative); }
[hidden] { display: none !important; }

/* thin scrollbars in client colours */
* { scrollbar-width: thin; scrollbar-color: #6b6358 rgba(0, 0, 0, 0.5); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5); }
::-webkit-scrollbar-thumb { background: #5b544a; border: 1px solid #000; border-radius: 2px; }

/* ------------------------------------------------------------------ Dragon Stone Alchemy (dragonsoulwindow.py)
   The whole 287x525 window (frame, title bar, hexagon, tabs, grid) is one client image; everything else is
   positioned on top of it with the uiscript coordinates. */
.board.ds-window {
  width: 287px;
  height: 525px;
  padding: 0;
  border-image: none;
  background: url("../img/ds/dragon_soul_bg.png") no-repeat;
}
.ds-window .titlebar {
  position: absolute;
  left: 8px;
  top: 7px;
  width: 271px;
  margin: 0;
  border-image: none;
  background: none;
}
.ds-area { position: absolute; inset: 0; pointer-events: none; }
.ds-area > * { pointer-events: auto; }
.ds-area .slot, .ds-area .ds-cell { position: absolute; width: 32px; height: 32px; }
.ds-area .ds-cell { background: none; }
.ds-deck, .ds-tab, .ds-grade, .ds-activate { position: absolute; padding: 0; border: 0; background: none; }
.ds-deck img, .ds-grade img { display: block; }
.ds-tabs { position: absolute; left: 10px; top: 279px; width: 267px; height: 36px; }
.ds-tab { top: 2px; width: 36px; height: 27px; }
.ds-tab-title { position: absolute; left: 18px; top: 315px; color: var(--title); font-weight: bold; text-shadow: 1px 1px 0 #000; }
.ds-activate {
  left: 217px; top: 492px; width: 61px; height: 21px;
  color: #fff; font: inherit; font-size: 11px; text-shadow: 1px 1px 0 #000;
  background: url("../img/ds/m_button01.png");
}
.ds-activate:hover { background-image: url("../img/ds/m_button02.png"); }
.ds-activate.on { background-image: url("../img/ds/m_button03.png"); color: var(--special); }
.ds-status { position: absolute; left: 16px; top: 496px; width: 196px; font-size: 10px; line-height: 1.2; color: var(--muted); }
.ds-status.off { color: var(--negative); }
.ds-area.inactive .slot .item img { filter: grayscale(0.8) brightness(0.6); }
.desktop.static .board.ds-window { position: relative; }

/* ------------------------------------------------------------------ affect bar (active effects, top left in game) */
.affect-bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 5px 12px 0; position: relative; z-index: 800; }
.affect-bar:empty { display: none; }
.affect {
  width: 32px; height: 32px; cursor: pointer;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(120, 190, 190, 0.45);
  border-radius: 3px; overflow: hidden; background: #0b1414;
}
.affect img { width: 32px; height: 32px; display: block; image-rendering: pixelated; }
.affect:hover { box-shadow: 0 0 0 1px #000, 0 0 0 2px #e8d9a0; }

/* ------------------------------------------------------------------ consumables window */
.cons-grid { display: grid; grid-template-columns: repeat(auto-fill, 32px); gap: 2px; margin: 2px 0 4px; }
.cons-cell { width: 32px; height: 32px; background: url("../img/m2/slot_base.png"); cursor: pointer; position: relative; }
.cons-cell img { width: 32px; height: 32px; display: block; }
.cons-cell.on { box-shadow: inset 0 0 0 2px #7fe07f; background-color: rgba(80, 200, 80, 0.25); }
.cons-cell:not(.on):hover { box-shadow: inset 0 0 0 1px #e8d9a0; }
.cons-row { display: flex; align-items: center; gap: 4px; margin: 2px 0; font-size: 11px; }
.cons-row img { width: 24px; height: 24px; }
.cons-row .body { flex: 1; min-width: 0; }
.cons-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); }
.cons-row select { width: 100%; font-size: 11px; }
#cons-area .section { white-space: normal; }
.cons-row .cons-val { color: var(--positive); display: block; }
.cons-row .close { flex: none; width: 15px; height: 15px; padding: 0; border: 0; cursor: pointer; background: url("../img/m2/close_button_01.png"); }
.cons-row .close:hover { background-image: url("../img/m2/close_button_02.png"); }

/* ------------------------------------------------------------------ website sections + builds */
.taskbar .brand { margin-right: 10px; }
.taskbar .views { display: flex; gap: 2px; margin-right: 8px; }
.view-tab {
  padding: 4px 14px; border: 1px solid #5a4a32; border-bottom-color: #2a2217; border-radius: 3px 3px 0 0;
  background: linear-gradient(#3a2f22, #1d1812); color: #bfae88; font: bold 12px Georgia, "Times New Roman", serif;
}
.view-tab:hover { color: #f0e2b8; }
.view-tab.active { background: linear-gradient(#6b5436, #3b2e1f); color: var(--title); border-color: #a8864f; box-shadow: 0 0 6px rgba(255, 200, 100, 0.25); }
body:not([data-view="builder"]) .build-bar { display: none; }
.build-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px 0; font-size: 12px; }
.build-bar .label { color: var(--title); font-weight: bold; }
.build-bar .build-select { min-width: 220px; }
.build-bar .hint { margin: 0; }
#sim-character .sim-name { color: var(--title); font: bold 15px Georgia, "Times New Roman", serif; }
#sim-character .sim-items { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px 0; }
#sim-character .sim-items .item { position: relative; width: 32px; height: 32px; background: url("../img/m2/slot_base.png"); cursor: default; }
#sim-character .sim-items .item img { width: 32px; height: 32px; }
#sim-character .sim-totals { max-height: 260px; overflow-y: auto; }
#sim-character .build-select { flex: 1; min-width: 0; }

/* ------------------------------------------------------------------ character window, General page (characterwindow.py) */
.char-head { display: flex; gap: 8px; align-items: center; }
.char-face { width: 53px; height: 53px; flex: none; position: relative; background: url("../img/char/box_face.png"); }
.char-face img { position: absolute; left: 5px; top: 5px; width: 43px; height: 43px; border-radius: 50%; }
.char-slots { flex: 1; display: grid; gap: 4px; }
.slot-input, .slot-text {
  height: 20px; box-sizing: border-box; padding: 1px 6px; text-align: center; color: #fff;
  background: #000; border: 1px solid #4b4035; box-shadow: inset 0 0 0 1px #1a1510; font-size: 12px; line-height: 16px;
}
.slot-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot-input.small { width: 44px; }
/* level / EXP box stretched to the window width: level_exp_info.png cut in pieces (extract-ui.js) */
.lv-exp { position: relative; height: 44px; margin: 6px 0 4px;
  background: url("../img/char/level_exp_left.png") left top no-repeat, url("../img/char/level_exp_right.png") right top no-repeat,
    url("../img/char/level_exp_mid.png") left top repeat-x; }
.lv-exp::before { content: ""; position: absolute; left: 61px; right: 6px; top: 0; bottom: 0; pointer-events: none;
  background: url("../img/char/level_exp_icon.png") center top no-repeat; }
.lv-exp .lv-input { position: absolute; left: 4px; top: 22px; width: 44px; height: 19px; padding: 0 2px; font-size: 14px; font-weight: bold;
  text-align: center; color: #fff; background: transparent; border: 0; }
.lv-exp .exp-text { position: absolute; left: 60px; right: 4px; top: 23px; text-align: center; color: #fff; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-pick { display: flex; justify-content: center; gap: 4px; margin: 8px 0 4px; }
.race-face { width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: transparent; position: relative; }
.race-face img { width: 50px; height: 50px; border-radius: 50%; display: block; margin: 2px; transition: transform 0.1s; }
.race-face:hover img { transform: scale(1.06); }
.race-face.on { box-shadow: 0 0 0 2px #e8c874, 0 0 10px rgba(255, 210, 120, 0.6); }
.class-pick { display: flex; justify-content: center; gap: 6px; margin: 6px 0 2px; }
.class-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 6px; border: 1px solid #3a3025;
  background: rgba(0, 0, 0, 0.35); color: #bfae88; font-size: 11px; min-width: 70px; }
.class-btn img { width: 32px; height: 32px; border-radius: 3px; opacity: 0.75; }
.class-btn.on { border-color: #e8c874; color: var(--title); box-shadow: 0 0 8px rgba(255, 210, 120, 0.35); }
.class-btn.on img, .class-btn:hover img { opacity: 1; }
.class-skills { display: flex; justify-content: center; gap: 3px; margin: 4px 0 6px; }
.class-skills img { width: 24px; height: 24px; cursor: pointer; }
.class-skills img.off { filter: grayscale(0.9) brightness(0.6); }
.info-bar { height: 17px; margin: 6px 0 4px; padding-left: 10px; background: url("../img/char/base_info_bar.png") no-repeat center / 100% 17px;
  color: var(--title); font-size: 11px; font-weight: bold; line-height: 17px; }
.char-stats { display: grid; gap: 5px; margin: 4px 6px 4px; }
/* − icon value + | total: every row on the same columns */
.char-stat, .char-stats-head { display: grid; grid-template-columns: 13px 28px 52px 13px 1fr; column-gap: 6px; align-items: center; }
.char-stats-head { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.char-stats-head span:first-child { grid-column: 1 / 3; }
.char-stats-head span:nth-child(2) { text-align: center; }
.char-stats-head span:last-child { text-align: center; padding-left: 8px; }
.char-stat img { width: 26px; height: 26px; justify-self: center; }
.char-stat .slot-input.small { width: 52px; }
.char-stat .total { margin-left: 8px; font-weight: bold; }
#page-general .info-bar, #page-stats .info-bar { margin-top: 10px; }
#page-general .info-bar:first-of-type { margin-top: 6px; }
#page-stats .row, #page-stats .check-row { margin-left: 6px; margin-right: 6px; }
.char-stat .total.boosted { color: var(--positive); }
.stat-btn { width: 13px; height: 13px; padding: 0; border: 0; flex: none; background: url("../img/char/btn_plus_up.png"); }
.stat-btn:hover { background-image: url("../img/char/btn_plus_over.png"); }
.stat-btn:active { background-image: url("../img/char/btn_plus_down.png"); }
.stat-btn.minus { background-image: url("../img/char/btn_minus_up.png"); }
.stat-btn.minus:hover { background-image: url("../img/char/btn_minus_over.png"); }
.stat-btn.minus:active { background-image: url("../img/char/btn_minus_down.png"); }
.slot-input::-webkit-inner-spin-button, .slot-input::-webkit-outer-spin-button, .lv-input::-webkit-inner-spin-button, .lv-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.slot-input[type=number], .lv-input { -moz-appearance: textfield; appearance: textfield; }

/* ------------------------------------------------------------------ pets window */
.pet-slots { display: flex; justify-content: center; gap: 24px; margin: 4px 0 8px; }
.pet-slot-box { display: flex; flex-direction: column; align-items: center; width: 100px; }
.pet-slot { width: 53px; height: 53px; position: relative; background: url("../img/char/box_face.png"); cursor: pointer; }
.pet-slot img { position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; }
.pet-slot.filled { box-shadow: 0 0 8px rgba(255, 210, 120, 0.45); }
.pet-slot-label { margin-top: 2px; font-size: 11px; color: var(--title); text-align: center; max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; justify-content: center; max-height: 240px; overflow-y: auto; margin: 4px 0; }
#pet-area .cons-row.off { opacity: 0.5; }
#pet-area .catalog-filters select { max-width: 120px; }

/* ------------------------------------------------------------------ events window */
.event-card { display: flex; gap: 8px; align-items: flex-start; padding: 6px; margin-bottom: 4px;
  border: 1px solid #3a3025; background: rgba(0, 0, 0, 0.3); }
.event-card.on { border-color: #7fe07f; background: rgba(60, 120, 60, 0.18); }
.event-card > img { width: 32px; height: 32px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.event-card .body { flex: 1; min-width: 0; }
.event-card .name { color: var(--title); font-weight: bold; font-size: 12px; }
.event-card .desc { color: var(--positive); font-size: 11px; margin-top: 1px; }
.event-card .controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; font-size: 11px; }
.event-card .ev-value { display: flex; align-items: center; gap: 3px; }
.event-card .ev-value input { width: 44px; }
.event-card .check-row { flex: none; font-size: 11px; white-space: nowrap; }
.summary.stats img { width: 16px; height: 16px; vertical-align: middle; }
.summary.stats td:last-child { color: var(--positive); font-weight: bold; }
.summary.stats td.plain { color: #fff; }
.summary.stats small { color: var(--text-dim, #a89c86); font-weight: normal; }

/* ------------------------------------------------------------------ costume sets, stones */
#costume-sets:empty { display: none; }
#costume-sets { margin-top: 4px; }
.set-row { display: flex; gap: 6px; align-items: flex-start; padding: 4px; margin-top: 3px; border: 1px solid #7fe07f55; background: rgba(60, 120, 60, 0.15); }
.set-row img { width: 32px; height: 32px; flex: none; }
.set-row .name { color: var(--title); font-weight: bold; font-size: 11px; }
.set-row .desc { color: var(--positive); font-size: 10px; }
.stone-row { display: grid; grid-template-columns: 1fr 50px; gap: 3px; align-items: center; margin: 2px 0; }
.stone-row .hint { grid-column: 1 / -1; }
.tooltip .t-stone { color: #a0b0a0; } /* stone / ore bonus lines: grey-green, sampled from the game tooltip */
.stone-row.with-element { grid-template-columns: 1fr 50px 1fr; }
#character-tabs .tab { flex: 1 1 auto; min-width: 0; padding-left: 4px; padding-right: 4px; font-size: 11px; white-space: nowrap; }
.rank-pick { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0; }
.rank-btn { border: 1px solid #000; border-radius: 3px; padding: 3px 7px; font-size: 11px; font-weight: bold; opacity: .55; }
.rank-btn small { font-weight: normal; }
.rank-btn.on { opacity: 1; box-shadow: 0 0 0 2px #e8c874, 0 0 8px rgba(255, 210, 120, 0.5); }
.rank-btn:hover { opacity: .9; }
.leadership-row { display: flex; align-items: center; gap: 8px; margin: 4px 8px; }
.leadership-row img { width: 32px; height: 32px; }
.leadership-row label { flex: 1; }
.char-stat.info-only { opacity: .6; }

/* ------------------------------------------------------------------ builder sub-views */
body:not([data-view="builder"]) .sub-tabs { display: none; }
.sub-tabs { display: flex; gap: 2px; padding: 6px 0 0; border-bottom: 1px solid #5a4a32; margin: 0 12px; } /* first tab lines up with "Build" below */
.sub-tab { padding: 5px 16px; border: 1px solid #5a4a32; border-bottom: 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(#2e251b, #17130e); color: #bfae88; font: bold 12px Georgia, "Times New Roman", serif; }
.sub-tab:hover { color: #f0e2b8; }
.sub-tab.active { background: linear-gradient(#5b4730, #2f2518); color: var(--title); border-color: #a8864f; }
/* inventory multi-select */
#inventory-grid .item.selected { box-shadow: inset 0 0 0 2px #ff6b5b; background: rgba(255, 80, 60, 0.25); }
#inventory-grid.select-mode .item { cursor: pointer; }
#select-mode.active { color: var(--title); box-shadow: 0 0 0 1px #e8c874; }
.m2-btn.danger { color: #ffb3a8; }
.inv-footer { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.inv-footer .trash { margin-left: auto; }
.tooltip .t-rnd { color: #afded0; } /* random bonuses (Serpent / Lunar items): pale teal, sampled from the game tooltip */

/* ------------------------------------------------------------------ monster cards */
#mcard-area { max-height: 560px; overflow-y: auto; }
.mc-row { display: flex; gap: 6px; align-items: center; padding: 3px 4px; margin: 2px 0; border: 1px solid #3a3025; background: rgba(0, 0, 0, 0.25); }
.mc-row.on { border-color: #7fe07f88; background: rgba(60, 120, 60, 0.15); }
.mc-imgs { display: flex; flex: none; width: 66px; }
.mc-imgs img { width: 22px; height: 30px; object-fit: cover; border: 1px solid #000; }
.mc-row .body { flex: 1; min-width: 0; }
.mc-row .name { color: var(--title); font-size: 11px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-row .desc { color: var(--positive); font-size: 10px; }
.mc-ranks { display: flex; gap: 1px; flex: none; }
.mc-ranks .tab { padding: 1px 3px; font-size: 10px; min-width: 0; }

/* catalog section dropdown with pictures */
.cat-dd { position: relative; min-width: 0; }
.cat-cur { width: 100%; height: 100%; display: flex; align-items: center; gap: 3px; padding: 1px 3px; background: rgba(0,0,0,.5); border: 1px solid #4a3a28; color: #e8d9b5; font: inherit; font-size: 11px; cursor: pointer; text-align: left; overflow: hidden; white-space: nowrap; }
.cat-cur .arr { margin-left: auto; }
.cat-dd .ic { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; }
.cat-dd .ic img { max-width: 18px; max-height: 18px; }
.cat-menu { display: none; position: absolute; z-index: 50; left: 0; top: 100%; min-width: 160px; max-height: 320px; overflow-y: auto; background: #1a120b; border: 1px solid #6b5436; box-shadow: 0 2px 8px #000; }
.cat-dd.open .cat-menu { display: block; }
.cat-opt { display: flex; align-items: center; gap: 5px; padding: 2px 5px; font-size: 11px; color: #e8d9b5; cursor: pointer; white-space: nowrap; }
.cat-opt .ic, .cat-opt .ic img { width: 24px; height: 24px; max-width: 24px; max-height: 24px; }
.cat-opt:hover { background: #3a2a18; }
.cat-opt.active { color: #f0c860; }

/* game-like tooltip parts */
.tooltip .t-elem { color: #c890ff; }
.tooltip .t-req { margin: 3px auto; padding: 1px 8px; width: fit-content; background: rgba(40, 30, 20, .85); border: 1px solid #5a4630; }
.tooltip .t-stone { display: flex; align-items: center; gap: 6px; text-align: left; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.08); }
.tooltip .t-stone img { width: 32px; height: 32px; flex: none; }
.tooltip .t-stone-name { color: #c0c0c0; } /* stone / ore name: light grey, sampled from the game tooltip */
.tooltip .t-desc { color: #e8e0d0; max-width: 240px; margin: 2px auto 4px; }

/* bonus validation (ro-wiki Bonusuri) */
.bonus-row .bonus-note { grid-column: 1 / -1; font-size: 10px; color: var(--muted); margin-top: -2px; }
.bonus-row.invalid select, .bonus-row.invalid input { border-color: var(--negative); }
.bonus-row.invalid .bonus-note { color: var(--negative); }
.event-card .ev-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 3px; align-items: center; margin-top: 2px; }
.event-card .ev-row select, .event-card .ev-row input { width: 100%; min-width: 0; box-sizing: border-box; }
.affect.off img { filter: grayscale(1); opacity: .45; }
/* equipment / costume slots taller than the item (weapon, weapon skin): the item sits at the top, like in game */
.slot .item { align-items: start; }

/* taskbar groups: windows | actions | reset + language (right) */
.taskbar .tb-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.taskbar .tb-group + .tb-group, .taskbar .tb-right { padding-left: 8px; border-left: 1px solid rgba(201, 168, 108, 0.35); }
.taskbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.taskbar .m2-btn.active { border-image-source: url("../img/m2/middle_button_03.png"); color: var(--title); }
.m2-btn.danger { color: #ff8a7a; }
.build-row { display: flex; flex-direction: column; align-items: stretch; }
body:not([data-view="builder"]) .build-row { display: none; }
/* language picker with flags */
.lang-dd { min-width: 120px; }
.lang-dd .cat-cur { height: 21px; }
.lang-dd .ic, .lang-dd .ic img { width: 22px; height: 17px; max-width: 22px; max-height: 17px; } /* server_flag_*.sub are 22×17 */
.lang-dd .cat-menu { left: auto; right: 0; min-width: 140px; max-height: 420px; }
/* window buttons styled like the tabs (Georgia, dark gradient), next to the sub-tabs / section tabs */
.sub-tabs .tb-windows, .taskbar .tb-windows { gap: 2px; margin-left: 14px; padding-left: 12px; border-left: 1px solid rgba(201, 168, 108, 0.35); align-self: center; }
.tb-windows .m2-btn, .build-bar .m2-btn, .build-bar .build-select, .tb-right .m2-btn, .lang-dd .cat-cur { height: auto; padding: 3px 10px; border: 1px solid #5a4a32; border-image: none; border-radius: 3px;
  background: linear-gradient(#2e251b, #17130e); color: #bfae88; text-shadow: none; font: bold 12px Georgia, "Times New Roman", serif; }
.build-bar .m2-btn:disabled { opacity: .45; }
.build-bar .build-select { padding: 3px 6px; color: var(--title); }
.build-bar .build-select option { background: #1d1812; color: #e8d9b5; font-family: inherit; }
.build-bar .label { font: bold 12px Georgia, "Times New Roman", serif; }
.tb-right .m2-btn.danger { color: #ff8a7a; }
.tb-windows .m2-btn:hover, .build-bar .m2-btn:hover:not(:disabled), .tb-right .m2-btn:hover, .lang-dd .cat-cur:hover { color: #f0e2b8; border-color: #7a6444; }
.tb-windows .m2-btn.active { background: linear-gradient(#5b4730, #2f2518); color: var(--title); border-color: #a8864f; }
.sub-tabs { align-items: flex-end; }
.tb-right .lang-dd .cat-cur { padding: 1px 8px; height: 22px; }
/* event cards: "Active" sits in the top-right corner so the controls (e.g. the Bonus Altar rows) get the full width */
.event-card { position: relative; }
.event-card .check-row { position: absolute; top: 6px; right: 6px; }
.event-card .name, .event-card .desc { padding-right: 58px; }
.event-card .ev-row { grid-template-columns: minmax(0, 1fr) 64px; }
/* short "how to use" notes under a window's content */
.board .win-note { margin: 6px 2px 0; font-size: 11px; line-height: 1.35; }
.cap-note { color: var(--negative); font-size: 10px; white-space: nowrap; }
/* damage simulator credit banner */
.sim-credit { display: flex; align-items: center; gap: 14px; margin: 10px 12px 4px; padding: 12px 18px;
  border: 2px solid #c9a869; border-radius: 6px; background: linear-gradient(#4a3620, #231a10);
  box-shadow: 0 0 14px rgba(240, 200, 96, 0.35), inset 0 0 0 1px #000; color: #f0e2b8; font-size: 14px; line-height: 1.5; }
body:not([data-view="simulator"]) .sim-credit { display: none; }
.sim-credit-icon { font-size: 30px; color: #f0c860; text-shadow: 0 0 8px rgba(240, 200, 96, 0.6); }
.sim-credit-title { font: bold 17px Georgia, "Times New Roman", serif; color: var(--title); margin-bottom: 2px; }
.sim-credit a { color: #ffd866; font-weight: bold; text-decoration: underline; }
.sim-credit a:hover { color: #fff3b0; }
.sim-credit-tip { margin-top: 4px; font-size: 13px; color: #d8c8a0; }
.sim-credit-tip::before { content: "💡 "; }
/* author note, bottom right corner of the character builder */
.author-note { position: fixed; right: 12px; bottom: 10px; z-index: 950; padding: 5px 12px; border: 1px solid #a8864f; border-radius: 4px;
  background: linear-gradient(#3a2f22, #1d1812); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); color: #bfae88;
  font: 12px Georgia, "Times New Roman", serif; pointer-events: none; }
.author-note b { color: var(--title); }
/* the note (author + disclaimer) is shown in both sections */

/* ------------------------------------------------------------------ phones and narrow screens (< 820 px, windows stacked) */
@media (max-width: 819px) {
  .taskbar { padding: 6px 8px; gap: 4px; }
  .taskbar .brand { display: none; }
  .taskbar .views { width: 100%; margin-right: 0; }
  .taskbar .view-tab { flex: 1; padding: 6px 4px; font-size: 12px; }
  .taskbar .tb-right { margin-left: 0; width: 100%; justify-content: space-between; border-left: 0; padding-left: 0; }
  .taskbar .tb-group + .tb-group { border-left: 0; padding-left: 0; }
  .taskbar .tb-windows { margin-left: 0; border-left: 0; padding-left: 0; }
  /* sub-tabs on their own row, window buttons wrapped under them */
  .sub-tabs { flex-wrap: wrap; margin: 0 8px; }
  .sub-tabs .sub-tab { flex: 1; padding: 6px 4px; text-align: center; }
  .sub-tabs .tb-windows { width: 100%; margin: 6px 0 4px; padding-left: 0; border-left: 0; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .tb-windows .m2-btn { padding: 5px 8px; }
  .build-bar { padding: 6px 8px 0; }
  .build-bar .build-select { min-width: 0; flex: 1 1 100%; }
  .affect-bar { padding-left: 8px; padding-right: 8px; flex-wrap: wrap; }
  .desktop.static { padding: 10px 6px 60px; }
  .sim-credit { margin: 8px; padding: 10px 12px; font-size: 13px; gap: 10px; }
  .sim-credit-title { font-size: 15px; }
  .sim-credit-icon { font-size: 22px; }
  /* author note: in the page flow at the end instead of covering the windows */
  .author-note { position: static; display: block; width: fit-content; margin: 0 auto 16px; }
  /* editors and tooltips fit the screen */
  .tooltip { max-width: calc(100vw - 16px); }
}
/* the two sections (Character builder / Damage simulator): big, easy to spot */
.view-tab { padding: 8px 24px; font-size: 16px; letter-spacing: 0.3px; }
.view-tab.active { box-shadow: 0 0 10px rgba(255, 200, 100, 0.45); }
@media (max-width: 819px) { .taskbar .view-tab { padding: 8px 6px; font-size: 14px; } }

/* first visit guide */
.tour-spot { position: fixed; z-index: 3000; border: 2px solid #f0c860; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 18px 4px rgba(240, 200, 96, 0.7); animation: tour-glow 1.6s ease-in-out infinite; }
.tour-arrow { position: fixed; z-index: 3002; width: 32px; height: 36px; font-size: 32px; line-height: 36px; text-align: center; color: #ffd866;
  text-shadow: 0 0 8px rgba(255, 216, 102, 0.9), 2px 2px 0 #000; pointer-events: none; animation: tour-bounce 0.9s ease-in-out infinite; }
.tour-bubble { position: fixed; z-index: 3001; padding: 12px 14px; border: 2px solid #c9a869; border-radius: 6px;
  background: linear-gradient(#4a3620, #231a10); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); color: #f0e2b8; font-size: 14px; line-height: 1.45; }
.tour-count { font: bold 11px Georgia, serif; color: #c9a869; margin-bottom: 4px; }
.tour-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
@keyframes tour-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
@keyframes tour-glow { 0%, 100% { border-color: #f0c860; } 50% { border-color: #fff3b0; } }
/* damage simulator: monster and attack type pickers with icons */
.combo-list div { align-items: center; }
.combo-list .mob-ic { width: 26px; height: 26px; object-fit: cover; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px #000; }
.combo-list .mob-name { flex: 1; min-width: 0; }
.battle-form .combo { display: flex; align-items: center; gap: 4px; position: relative; }
.battle-form .combo input { flex: 1; min-width: 0; }
.monster-icon { width: 30px; height: 30px; object-fit: cover; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #7a6444; }
.attack-dd .cat-cur { height: 30px; }
.attack-dd .ic, .attack-dd .ic img { width: 24px; height: 24px; max-width: 24px; max-height: 24px; }
.attack-dd .cat-opt .ic, .attack-dd .cat-opt .ic img { width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
.attack-dd .cat-menu { min-width: 100%; }
/* tutorial button: easy to find */
#tour-start { color: #ffd866; border-color: #c9a869; box-shadow: 0 0 6px rgba(240, 200, 96, 0.35); }
#tour-start:hover { color: #fff3b0; }
.tour-block { position: fixed; inset: 0; z-index: 2999; background: transparent; cursor: not-allowed; }
/* tutorial on phones: a sheet at the bottom of the screen, bigger text and buttons */
.tour-bubble.sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; padding: 14px 16px; font-size: 15px;
  border-width: 2px; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.9), 0 0 16px rgba(240, 200, 96, 0.35); }
.tour-bubble.sheet .tour-count { font-size: 12px; }
.tour-bubble.sheet .tour-buttons { justify-content: space-between; }
.tour-bubble.sheet .tour-buttons .m2-btn { flex: 1; height: 34px; font-size: 14px; }
.tour-bubble.sheet .tour-arrow { display: none; }
@media (max-width: 819px) { .tour-arrow { font-size: 38px; width: 38px; height: 40px; } }

/* ▾ on the monster search box */
.combo { position: relative; }
.combo #monster-search { padding-right: 18px; }
.combo-arr { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); color: #e8d9b5; cursor: pointer; font-size: 12px; user-select: none; z-index: 2; }

/* Monster info window */
#mob-info { padding: 4px 6px 8px; }
.mob-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.mob-head img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #6b5436; flex: none; }
.mob-title { font-weight: bold; color: #f0c860; font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mob-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: #e8d9b5; margin-top: 3px; }
.mob-stats b { color: #bfa77a; font-weight: normal; }
.mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; }
.mob-tile { background: rgba(0, 0, 0, 0.45); border: 1px solid #3a2c1c; border-radius: 3px; padding: 3px 6px; min-width: 0; }
.mob-tile .lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .03em; color: #a8946c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-tile .val { font-size: 13px; color: #e8d9b5; white-space: nowrap; }
.mob-tile.hp .val { color: #ff7a6a; }
.mob-tile.pos .val { color: #7fd67f; }
.mob-tile.neg .val { color: #ff7a6a; }

/* polymorph monster picker: same look as the simulator's monster search */
.mob-combo { display: flex; align-items: center; gap: 4px; position: relative; flex: 1; min-width: 0; }
.mob-combo input { flex: 1; min-width: 0; }
.mob-combo .monster-icon { width: 24px; height: 24px; }

/* Stats tab: normal / Sung Ma page buttons, like the game's character window */
.stat-pages { display: flex; gap: 6px; margin: 2px 6px 6px; }
/* stretched to the window width: the frame is scaled, the icon in the middle is drawn again at its real size */
.stat-page-btn { flex: 1; height: 20px; border: 0; padding: 0; cursor: pointer; position: relative;
  background: var(--img) center / 100% 100% no-repeat; }
.stat-page-btn::after { content: ""; position: absolute; left: 50%; top: 0; width: 34px; height: 100%; transform: translateX(-50%);
  background: var(--img) center / 78px 20px no-repeat; }
.stat-page-btn:not(.on):hover { filter: brightness(1.25); }

/* character window: compact race portraits and one row per skill group (with its skills) */
.race-pick { margin: 4px 0 2px; }
.race-pick .race-face { width: 42px; height: 42px; }
.race-pick .race-face img { width: 38px; height: 38px; }
.class-rows { display: flex; flex-direction: column; gap: 3px; margin: 4px 6px 6px; }
.class-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px 2px 3px; border: 1px solid #3a3025; border-radius: 3px;
  background: rgba(0, 0, 0, 0.35); cursor: pointer; color: #a8946c; }
.class-row:hover { border-color: #6b5436; }
.class-row.on { border-color: #e8c874; color: var(--title); background: rgba(90, 65, 25, 0.35); cursor: default; }
.class-row .cls-ic { width: 22px; height: 22px; border-radius: 3px; opacity: 0.7; }
.class-row.on .cls-ic { opacity: 1; }
.class-row .cls-name { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.class-row .cls-skills { display: flex; gap: 2px; }
.class-row .cls-skills img { width: 20px; height: 20px; }
.class-row:not(.on) .cls-skills img { filter: grayscale(0.8) brightness(0.55); }
.class-row.on .cls-skills img { cursor: pointer; }
.class-row .cls-skills img.off { filter: grayscale(0.9) brightness(0.6); }

/* race picker opened from the portrait / race slot */
.race-switch { border: 0; padding: 0; cursor: pointer; }
.race-switch img { transition: filter .15s; }
.race-switch:hover img, .race-switch.open img { filter: brightness(1.2); box-shadow: 0 0 0 2px #e8c874, 0 0 8px rgba(255, 210, 120, .6); }
.race-slot { width: 100%; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; }
.race-slot:hover { color: #ffe7a8; }
.race-caret { font-size: 10px; color: #e8c874; }
.race-menu { margin: 4px 6px 6px; padding: 4px 4px 6px; border: 1px solid #6b5436; border-radius: 4px; background: rgba(0, 0, 0, .55); }
.race-menu .race-pick { margin: 2px 0 4px; }
.race-menu-hint { font-size: 10px; color: #a8946c; text-align: center; }

/* very visible race switch: a gold "Race ▾" label on the portrait; until the first use it pulses with a bouncing arrow */
.char-head { position: relative; }
.race-label { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 0 5px; border-radius: 3px; white-space: nowrap;
  background: #7a5a1e; border: 1px solid #e8c874; color: #fff2c8; font-size: 10px; line-height: 13px; pointer-events: none; }
.race-switch:hover .race-label, .race-switch.open .race-label { background: #a07a2a; }
.race-switch.pulse img { animation: racePulse 1.4s ease-in-out infinite; }
@keyframes racePulse { 0%, 100% { box-shadow: 0 0 0 2px #e8c874, 0 0 4px rgba(255, 210, 120, .4); } 50% { box-shadow: 0 0 0 3px #ffe08a, 0 0 14px rgba(255, 210, 120, .95); } }
.race-arrow { position: absolute; left: 56px; top: 30px; color: #ffe08a; font-size: 18px; pointer-events: none; animation: raceArrow .8s ease-in-out infinite alternate;
  text-shadow: 0 0 4px #000; }
@keyframes raceArrow { from { transform: translateX(6px); } to { transform: translateX(0); } }

/* rank dropdown above the character name */
.rank-dd { position: relative; }
.rank-cur { width: 100%; display: flex; align-items: center; gap: 6px; padding: 2px 6px; cursor: pointer; font: inherit; font-size: 11px;
  background: rgba(0, 0, 0, .55); border: 1px solid #e8c874; border-radius: 3px; color: #e8d9b5; box-shadow: 0 0 6px rgba(255, 210, 120, .35); }
.rank-cur:hover, .rank-dd.open .rank-cur { background: rgba(90, 65, 25, .6); }
.rank-lbl { color: #a8946c; }
.rank-caret { margin-left: auto; color: #ffe08a; font-size: 12px; }
.rank-chip { border: 1px solid #000; border-radius: 3px; padding: 0 6px; font-size: 11px; font-weight: bold; line-height: 16px; white-space: nowrap; }
.rank-chip small { font-weight: normal; }
.rank-menu { position: absolute; z-index: 60; left: 0; right: 0; top: 100%; margin-top: 2px; padding: 4px; display: flex; flex-direction: column; gap: 3px;
  background: #1a120b; border: 1px solid #6b5436; box-shadow: 0 4px 12px #000; }
.rank-opt { display: flex; padding: 2px; border: 1px solid transparent; background: transparent; cursor: pointer; border-radius: 3px; }
.rank-opt:hover { border-color: #6b5436; background: #3a2a18; }
.rank-opt.on { border-color: #e8c874; }
.char-slots { gap: 3px; }

/* Biologist rows: the research item's icon */
.bio-row { display: flex; align-items: center; gap: 6px; }
.bio-ic { width: 24px; height: 24px; flex: none; }

/* Monster Card window: wider and taller, every row shows its bonus */
#mcard-area { max-height: min(calc(var(--vh, 100vh) * .8), 900px); }
.mc-row .desc { font-size: 11px; color: #a8946c; white-space: normal; }
.mc-row .mc-bonus { color: #e8d9b5; }
.mc-row .mc-val.on { color: var(--positive); font-weight: bold; }

/* build bar: one card per character */
.build-cards { display: flex; gap: 5px; align-items: stretch; flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.build-card { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 3px; flex: none; cursor: pointer; position: relative;
  border: 1px solid #5a4a32; border-radius: 4px; background: rgba(0, 0, 0, .45); color: #a8946c; }
.build-card:hover { border-color: #8a6d42; color: #e8d9b5; }
.build-card.on { border-color: #e8c874; background: rgba(90, 65, 25, .55); color: #e8d9b5; box-shadow: 0 0 6px rgba(255, 210, 120, .35); cursor: default; }
.bc-face { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
.build-card:not(.on) .bc-face { filter: grayscale(.5) brightness(.8); }
.bc-name { font-size: 12px; font-weight: bold; color: var(--title); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.build-card:not(.on) .bc-name { color: inherit; }
.bc-sub { font-size: 10px; white-space: nowrap; }
.bc-del { margin-left: 4px; width: 18px; height: 18px; padding: 0; border: 1px solid #6b3a2a; border-radius: 3px; background: rgba(120, 30, 20, .5);
  color: #ffb4a0; font-size: 13px; line-height: 15px; cursor: pointer; }
.bc-del:hover { background: rgba(170, 40, 25, .8); color: #fff; }
.bc-act { flex: none; width: 32px; border: 1px dashed #6b5436; border-radius: 4px; background: rgba(0, 0, 0, .3); color: #e8c874; font-size: 16px; cursor: pointer; }
.bc-act:hover { border-style: solid; background: rgba(90, 65, 25, .5); }

/* window buttons: game-style icon tiles (icon + short name); lit = window open, dim = closed */
.tb-windows .m2-btn[data-toggle] { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 54px; padding: 3px 5px 2px; font-size: 10px; line-height: 1.1; background: rgba(0, 0, 0, .35); color: #8f7d5a; }
.tb-windows .m2-btn[data-toggle]::before { content: ""; width: 24px; height: 24px; background: var(--win-ic) center / contain no-repeat;
  filter: grayscale(.8) brightness(.6); transition: filter .15s; }
.tb-windows .m2-btn[data-toggle]:hover::before { filter: grayscale(.3) brightness(.9); }
.tb-windows .m2-btn[data-toggle].active { background: linear-gradient(#5b4730, #2f2518); color: var(--title); border-color: #e8c874;
  box-shadow: 0 0 6px rgba(255, 210, 120, .35); }
.tb-windows .m2-btn[data-toggle].active::before { filter: none; }
[data-toggle="win-character"] { --win-ic: url("../img/char/character_button_01.png"); }
[data-toggle="win-equipment"] { --win-ic: url("../icon/item/300.png"); }
[data-toggle="win-costume"] { --win-ic: url("../img/m2/costume_button_01.png"); }
[data-toggle="win-inventory"] { --win-ic: url("../img/char/inventory_button_01.png"); }
[data-toggle="win-catalog"] { --win-ic: url("../icon/item/book_01.png"); }
[data-toggle="win-alchemy"] { --win-ic: url("../img/m2/dragonsoul_button_01.png"); }
[data-toggle="win-consumables"] { --win-ic: url("../icon/item/27003.png"); }
[data-toggle="win-pet"] { --win-ic: url("../icon/item/53001.png"); }
[data-toggle="win-events"] { --win-ic: url("../icon/item/50183.png"); }
[data-toggle="win-mcard"] { --win-ic: url("../img/affect/monster_card.png"); }
[data-toggle="win-battle"] { --win-ic: url("../img/affect/att_bonus.png"); }
[data-toggle="win-mob"] { --win-ic: url("../img/affect/world_boss_reward_buff.png"); }
[data-toggle="win-json"] { --win-ic: url("../img/affect/auto_premium.png"); }

/* builder sections: tabs as tall as the window buttons next to them */
.sub-tab { min-height: 42px; padding: 0 22px; display: inline-flex; align-items: center; font-size: 14px; }
[data-toggle="win-catalog"] { --win-ic: url("../img/m2/mall_button_01.png"); }
[data-toggle="win-json"] { --win-ic: url("../img/m2/json_icon.svg"); }

.author-note .disclaimer { margin-top: 0; max-width: 360px; font-size: 10px; line-height: 1.35; color: #a8946c; }

/* phones: the window buttons share one row, the section tabs a bit lower */
@media (max-width: 819px) {
  .sub-tabs .tb-windows { width: 100%; flex-wrap: nowrap; }
  .tb-windows .m2-btn[data-toggle] { flex: 1 1 0; min-width: 0; padding: 3px 1px 2px; font-size: 9px; overflow: hidden; }
  .tb-windows .m2-btn[data-toggle]::before { width: 22px; height: 22px; }
  .sub-tab { min-height: 36px; padding: 0 14px; font-size: 13px; }
}
.brand-logo { height: 34px; display: block; }

/* Helps window: item lists on the left, active effects on the right */
#cons-area { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 10px; align-items: start; }
#cons-area .cons-side { position: sticky; top: 0; }
@media (max-width: 819px) { #cons-area { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== modern header (overrides the game-style bars above) */
:root { --ui-font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --ui-gold: #e8c874; --ui-gold-soft: rgba(232, 200, 116, .14);
  --ui-line: rgba(232, 200, 116, .16); --ui-text: #cdbd97; --ui-dim: #8f8068; }
body .taskbar { background: #0f0b08; border: 0; border-bottom: 1px solid var(--ui-line); box-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  padding: 8px 16px; gap: 16px; min-height: 56px; align-items: center; font-family: var(--ui-font); }
body .taskbar .brand-logo { height: 36px; }
/* the two sections: one pill switch */
body .taskbar .views { gap: 0; padding: 3px; margin: 0; border: 1px solid var(--ui-line); border-radius: 999px; background: rgba(255, 255, 255, .03); }
body .view-tab { border: 0; border-radius: 999px; background: transparent; box-shadow: none; padding: 7px 20px; font: 600 14px var(--ui-font);
  letter-spacing: 0; color: var(--ui-dim); text-shadow: none; transition: background .15s, color .15s; }
body .view-tab:hover { color: var(--ui-text); background: rgba(255, 255, 255, .05); }
body .view-tab.active { background: var(--ui-gold); color: #1a120b; box-shadow: 0 1px 8px rgba(232, 200, 116, .35); }
/* actions: quiet ghost buttons */
body .taskbar .tb-group + .tb-group, body .taskbar .tb-right { border-left: 0; padding-left: 0; }
body .taskbar .tb-right { gap: 6px; }
body .tb-right .m2-btn, body .tb-right .lang-dd .cat-cur { height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font: 500 13px var(--ui-font); color: var(--ui-text); text-shadow: none; display: inline-flex; align-items: center; gap: 6px; }
body .tb-right .m2-btn:hover, body .tb-right .lang-dd .cat-cur:hover { background: rgba(255, 255, 255, .06); border-color: transparent; color: #f3e6c4; }
body .tb-right #tour-start { border-color: rgba(232, 200, 116, .45); background: var(--ui-gold-soft); color: #f0d68a; }
body .tb-right .m2-btn.danger { color: #ff8f80; }
body .tb-right .m2-btn.danger:hover { background: rgba(255, 90, 70, .12); }
body .tb-right .lang-dd .cat-cur { border-color: var(--ui-line); }
body .tb-actions { padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--ui-line); }
/* builder sections: underline tabs, the window buttons as chips on the right */
body .sub-tabs { margin: 0; padding: 0 16px; gap: 4px; background: #15100b; border-bottom: 1px solid var(--ui-line); align-items: stretch; }
body .sub-tab { min-height: 46px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  font: 600 14px var(--ui-font); color: var(--ui-dim); text-shadow: none; }
body .sub-tab:hover { color: var(--ui-text); background: transparent; }
body .sub-tab.active { background: transparent; color: #f0d68a; border-bottom-color: var(--ui-gold); }
body .sub-tabs .tb-windows { margin-left: auto; padding-left: 0; border-left: 0; gap: 6px; align-self: center; }
body .tb-windows .m2-btn[data-toggle] { flex-direction: row; gap: 6px; min-width: 0; height: 32px; padding: 0 10px 0 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; font: 500 12px var(--ui-font); color: var(--ui-dim); text-shadow: none; }
body .tb-windows .m2-btn[data-toggle]::before { width: 20px; height: 20px; }
body .tb-windows .m2-btn[data-toggle]:hover { background: rgba(255, 255, 255, .07); color: var(--ui-text); }
body .tb-windows .m2-btn[data-toggle].active { background: var(--ui-gold-soft); border-color: rgba(232, 200, 116, .5); color: #f0d68a; box-shadow: none; }
body .build-row { background: #120d09; border-bottom: 1px solid rgba(255, 255, 255, .04); }
body .build-bar { padding: 8px 16px; }
body .build-bar .label { font-family: var(--ui-font); font-weight: 600; color: var(--ui-dim); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; }
@media (max-width: 819px) {
  body .taskbar { padding: 8px; gap: 8px; }
  body .taskbar .views { width: 100%; }
  body .tb-actions { border-right: 0; padding-right: 0; }
  body .sub-tabs { padding: 0 8px; }
  body .sub-tab { flex: 1; justify-content: center; min-height: 42px; padding: 0 6px; font-size: 13px; }
  body .sub-tabs .tb-windows { width: 100%; margin: 6px 0; justify-content: space-between; }
  body .tb-windows .m2-btn[data-toggle] { flex: 1 1 0; flex-direction: column; height: auto; padding: 4px 2px; gap: 2px; font-size: 10px; }
}
/* when the page scrolls sideways the bars stay in place */
body .taskbar, body .sub-tabs, body .build-row, body .sim-credit { position: sticky; left: 0; }
body .taskbar { top: 0; z-index: 900; }
body { min-width: 100%; width: max-content; }
body .taskbar, body .sub-tabs, body .build-row, body .sim-credit { width: var(--vw, 100%); box-sizing: border-box; }
@media (max-width: 819px) { body { width: auto; } body .taskbar, body .sub-tabs, body .build-row, body .sim-credit { width: auto; } }

/* footer (like metin2alerts): copyright + contact, the disclaimer under it, at the end of the page */
.site-footer { position: sticky; left: 0; width: var(--vw, 100%); box-sizing: border-box; margin-top: 24px; padding: 18px 16px 22px;
  border-top: 1px solid var(--ui-line); background: #0f0b08; text-align: center; font-family: var(--ui-font); }
.site-footer .footer-top { font-size: 13px; color: var(--ui-text); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-footer .footer-top b { color: #f0d68a; font-weight: 600; }
.site-footer .sep { color: var(--ui-dim); }
.site-footer .disclaimer { max-width: 760px; margin: 8px auto 0; font-size: 12px; line-height: 1.5; color: var(--ui-dim); }
@media (max-width: 819px) { .site-footer { width: auto; } }
[data-toggle="win-consumables"] { --win-ic: url("../icon/item/71028.png"); }
[data-toggle="win-pet"] { --win-ic: url("../icon/item/53257.png"); } /* Minidall */
/* short pages: the footer sits at the bottom of the screen, not in the middle */
body { display: flex; flex-direction: column; min-height: var(--vh, 100vh); }
body > .desktop, body > main { flex: 1 0 auto; }
.site-footer { margin-top: auto; }
body > .desktop { min-height: 0; } /* its height comes from the windows (fitDesktop); the flex layout fills the screen */
[data-toggle="win-equipment"] { --win-ic: url("../icon/item/00400.png"); } /* Lunar Sword */

/* ---- item editor: clearer sections and bonus rows */
.ed-sec { display: flex; align-items: center; gap: 8px; }
.ed-sec-ic { width: 22px; height: 22px; flex: none; filter: drop-shadow(0 0 2px #000); }
#editor-window .bonus-row { padding: 4px 6px; margin: 3px 0; border: 1px solid #4a3a28; border-radius: 4px; background: rgba(0, 0, 0, .35); }
#editor-window .bonus-row select { color: #e8d9b5; }
#editor-window .bonus-row input[type="number"] { color: #7fe07f; font-weight: bold; }
/* a filled bonus stands out, an empty slot stays quiet */
#editor-window .bonus-row:has(select option:checked:not([value=""])) { border-color: #8a6d42; background: rgba(90, 65, 25, .35); }
#editor-window .bonus-row:has(select option[value=""]:checked) { opacity: .6; }
#editor-window .bonus-row.invalid { border-color: #b33; background: rgba(120, 20, 20, .3); }
#editor-window .bonus-note { color: #a8946c; }
/* upgrade and set: the chosen button is obvious */
#editor-window .upgrade-row .tab.active { background: linear-gradient(#8a6a2c, #4a3616); color: #fff2c8; border-color: #e8c874; box-shadow: 0 0 6px rgba(255, 210, 120, .5); }
#editor-window .set-row .tab { padding: 4px 10px; font-size: 12px; }
.set-fx-list { margin: 4px 0 2px; padding: 4px 8px; border-left: 2px solid #e8c874; background: rgba(90, 65, 25, .2); color: var(--positive); font-size: 12px; line-height: 1.5; }
.set-fx-list b { color: #f0d68a; margin-right: 2px; }

/* stone picker in the item editor: pictures in the list */
.stone-dd { min-width: 0; }
.stone-dd .cat-cur { height: 28px; font-size: 12px; }
.stone-dd .cat-menu { min-width: 100%; max-height: 300px; }
.stone-dd .cat-opt { padding: 3px 6px; font-size: 12px; }
.stone-dd .ic, .stone-dd .ic img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }

/* set bonus dropdown under the item name */
.set-pick { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.set-pick-lbl { font-size: 11px; color: #a8946c; white-space: nowrap; }
.set-pick .cat-dd { min-width: 150px; }
.set-pick .cat-cur { height: 24px; border-color: #8a6d42; color: #f0d68a; font-weight: bold; }
.set-pick .ic, .set-pick .ic img { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }

/* element row under the set */
.elem-pick { flex-wrap: wrap; }
.elem-pick .cat-dd { min-width: 140px; }
.elem-pick .cat-cur { font-weight: normal; }
.elem-pick .elem-lvl { width: 58px; min-width: 58px; height: 24px; padding: 0 4px; }
.elem-pick .elem-num { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #a8946c; }
.elem-pick .elem-num input { width: 44px; height: 22px; color: #7fe07f; font-weight: bold; }