/* Wulin Saga — theme variables + shared widget classes. Owned by core-client.
 * Contract: docs/ARCHITECTURE.md §7.5. Every panel builds its UI from these classes:
 *   .win .win-title .win-close .win-body  .btn .btn-primary .btn-danger  .slot (.qty .plus .key .cd)
 *   .bar .bar-fill  .tabs .tab .tab.active  .tooltip  .panel-inset  .list .list-item
 *   .muted .gold-text  .row .col .grid
 * Layers inside #ui-root (created by ui.js): .layer-hud < .layer-win < .layer-screen < .layer-toast
 *   < .layer-modal < .tooltip < .drag-ghost < .conn-overlay.
 * Layers never catch pointer events themselves; their direct children do. HUD panel roots should
 * therefore NOT cover the whole screen (or must set `pointer-events: none` on the full-screen root).
 */

:root {
  /* contract variables */
  --c-bg: #140c08;
  --c-bg2: #241610;
  --c-frame: #8b5a2b;
  --c-gold: #e8c46a;
  --c-red: #b3261e;
  --c-text: #f3e6c8;
  --c-muted: #a8977a;
  --c-hp: #d8413a;
  --c-mp: #3a7bd8;
  --c-exp: #e8c46a;
  --r-common: #e0e0e0;
  --r-uncommon: #5fd35f;
  --r-rare: #4aa3ff;
  --r-epic: #c77dff;
  --r-legendary: #ffb830;

  /* extended palette */
  --c-bg3: #33201a;
  --c-ink: #0b0604;
  --c-frame-light: #c08a4a;
  --c-frame-dark: #4a2e16;
  --c-gold-light: #fff0b8;
  --c-gold-dark: #9a7430;
  --c-red-light: #e04a3a;
  --c-red-dark: #5e0f0b;
  --c-jade: #5fbf8f;
  --c-sky: #6fb7ff;
  --c-good: #7ddc6a;
  --c-bad: #ff6b5b;
  --c-orthodox: #6fb7ff;
  --c-unorthodox: #ff6b5b;

  --font: 'Kanit', 'Leelawadee UI', Tahoma, sans-serif;
  --slot: 46px;
  --radius: 3px;
  --lacquer:
    radial-gradient(120% 70% at 50% 0%, rgba(150, 50, 25, 0.16), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #2a1810 0%, #1d110b 55%, #160d08 100%);
  --frame-shadow:
    inset 0 0 0 1px rgba(232, 196, 106, 0.22),
    inset 0 0 26px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--c-ink),
    0 0 0 3px var(--c-frame),
    0 0 0 4px var(--c-ink),
    0 14px 34px rgba(0, 0, 0, 0.7);
  --text-outline: 0 0 2px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

/* ------------------------------------------------------------------------------------------------
 * Base
 * --------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--c-bg); color: var(--c-text);
  font-family: var(--font); font-size: 14px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.dragging, body.dragging * { cursor: grabbing !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
#ui-root { position: fixed; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 1; }
#ui-root input, #ui-root textarea, #ui-root [contenteditable] { user-select: text; -webkit-user-select: text; }
#ui-root button { font-family: inherit; }

/* Layers (see header). */
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.layer-hud { z-index: 10; }
.layer-win { z-index: 20; }
.layer-screen { z-index: 30; }
.layer-toast { z-index: 40; }
.layer-modal { z-index: 50; }

/* ------------------------------------------------------------------------------------------------
 * Window frame
 * --------------------------------------------------------------------------------------------- */
.win {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 160px; max-width: calc(100vw - 16px);
  color: var(--c-text);
  background: var(--lacquer);
  border: 1px solid var(--c-gold-dark);
  border-radius: var(--radius);
  box-shadow: var(--frame-shadow);
}
/* Four gold corner brackets drawn with one pseudo-element. */
.win::before {
  content: ''; position: absolute; inset: -7px; pointer-events: none; z-index: 3;
  --o: var(--c-gold);
  background:
    linear-gradient(var(--o), var(--o)) top left / 18px 3px no-repeat,
    linear-gradient(var(--o), var(--o)) top left / 3px 18px no-repeat,
    linear-gradient(var(--o), var(--o)) top right / 18px 3px no-repeat,
    linear-gradient(var(--o), var(--o)) top right / 3px 18px no-repeat,
    linear-gradient(var(--o), var(--o)) bottom left / 18px 3px no-repeat,
    linear-gradient(var(--o), var(--o)) bottom left / 3px 18px no-repeat,
    linear-gradient(var(--o), var(--o)) bottom right / 18px 3px no-repeat,
    linear-gradient(var(--o), var(--o)) bottom right / 3px 18px no-repeat;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(232, 196, 106, 0.35));
}
/* Inner hairline + faint cloud-scroll watermark at the bottom. */
.win::after {
  content: ''; position: absolute; inset: 4px; pointer-events: none; z-index: 0;
  border: 1px solid rgba(232, 196, 106, 0.1); border-radius: 2px;
  background: radial-gradient(60% 30px at 50% 100%, rgba(179, 38, 30, 0.12), transparent 70%);
}
/* Panel windows never grow past the screen: the body scrolls instead (ui.js also re-clamps on growth). */
.layer-win > .win { max-height: calc(100vh - 16px); }
.win.focused { box-shadow: var(--frame-shadow), 0 0 22px rgba(232, 196, 106, 0.12); }
.win.win-opening { animation: win-open 0.14s ease-out; }
@keyframes win-open { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }

.win-title {
  position: relative; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 34px; padding: 0 42px;
  cursor: move; user-select: none; white-space: nowrap; overflow: hidden;
  color: var(--c-gold); font-size: 15px; font-weight: 600; letter-spacing: 0.5px;
  text-shadow: 0 1px 0 #000, 0 0 10px rgba(232, 196, 106, 0.35);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 170, 110, 0.18), transparent 70%),
    linear-gradient(180deg, #7e1f15 0%, #52110b 55%, #3a0a07 100%);
  border-bottom: 1px solid var(--c-gold-dark);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.win-title::before, .win-title::after {
  content: ''; flex: 0 1 44px; min-width: 10px; height: 8px;
  background:
    radial-gradient(circle, var(--c-gold) 0 2px, transparent 2.6px) right center / 8px 8px no-repeat,
    linear-gradient(90deg, transparent, var(--c-gold-dark)) left center / calc(100% - 9px) 1px no-repeat;
}
.win-title::after { transform: scaleX(-1); }
.win-close {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--c-gold); cursor: pointer;
  background: linear-gradient(180deg, #3d1c11, #1c0c07);
  border: 1px solid var(--c-gold-dark); border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.15);
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.win-close:hover { color: #fff; background: linear-gradient(180deg, #c8382a, #6a120c); box-shadow: 0 0 10px rgba(255, 90, 60, 0.6); }
.win-close:active { transform: translateY(-50%) scale(0.94); }
.win-body {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  padding: 12px;
  max-height: calc(100vh - 110px);
  overflow: auto;
}
.win-footer {
  position: relative; z-index: 1; flex: none;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(232, 196, 106, 0.12);
}

/* ------------------------------------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 5px 16px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--c-text); text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #4d3322 0%, #2e1b11 52%, #22140c 100%);
  border: 1px solid var(--c-gold-dark); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer; user-select: none; outline: none;
  transition: filter 0.12s, transform 0.06s, box-shadow 0.12s, border-color 0.12s;
}
.btn:hover:not(:disabled):not(.disabled) {
  filter: brightness(1.2); border-color: var(--c-gold);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(232, 196, 106, 0.25);
}
.btn:active:not(:disabled):not(.disabled) { transform: translateY(1px); filter: brightness(0.95); }
.btn:focus-visible { box-shadow: 0 0 0 2px rgba(232, 196, 106, 0.55), 0 2px 4px rgba(0, 0, 0, 0.5); }
.btn:disabled, .btn.disabled { filter: grayscale(0.85) brightness(0.65); cursor: not-allowed; }
.btn-primary {
  color: #fff3d0; border-color: var(--c-gold);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 200, 150, 0.25), transparent 70%),
    linear-gradient(180deg, #cc3a2b 0%, #901e15 55%, #6a130d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 10px rgba(179, 38, 30, 0.35);
}
.btn-danger {
  color: #ffc2b8; border-color: #a8392f;
  background: linear-gradient(180deg, #5c1b18 0%, #3a0f0d 55%, #2a0a09 100%);
}
.btn-gold {
  color: #2a1608; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); border-color: #fff0b8;
  background: linear-gradient(180deg, #fff0b8 0%, #e8c46a 45%, #a07a2a 100%);
}
.btn-ghost { background: transparent; border-color: rgba(232, 196, 106, 0.3); box-shadow: none; }
.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 13px; }
.btn-lg { min-height: 44px; padding: 8px 30px; font-size: 18px; letter-spacing: 0.5px; }
.btn-block { display: flex; width: 100%; }
.btn-icon { min-width: 32px; padding: 0 6px; }

/* ------------------------------------------------------------------------------------------------
 * Item / skill slots (44-48 px). Children: <img>, .qty (bottom-right), .plus (top-left),
 * .key (top-right hotkey label), .cd (cooldown sweep; set --cd from 1 to 0), .cd-text.
 * --------------------------------------------------------------------------------------------- */
.slot {
  position: relative; flex: none;
  width: var(--slot); height: var(--slot);
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #2c1d15 0%, #140b07 78%);
  border: 1px solid #5c3e23; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 2px 7px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 220, 160, 0.07);
  user-select: none; cursor: pointer;
  transition: border-color 0.1s, box-shadow 0.1s;
}
.slot > img, .slot > canvas {
  width: calc(100% - 6px); height: calc(100% - 6px);
  pointer-events: none; -webkit-user-drag: none; border-radius: 2px;
}
.slot:hover {
  border-color: var(--c-gold);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 2px 7px rgba(0, 0, 0, 0.6), 0 0 9px rgba(232, 196, 106, 0.4);
}
.slot.empty { cursor: default; }
.slot.empty:hover { border-color: #7a5634; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 2px 7px rgba(0, 0, 0, 0.85); }
.slot.selected, .slot.active {
  border-color: var(--c-gold-light);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--c-gold), 0 0 12px rgba(232, 196, 106, 0.55);
}
.slot.disabled, .slot.locked { filter: grayscale(0.9) brightness(0.55); cursor: not-allowed; }
.slot.drop-ok { border-color: var(--c-good); box-shadow: 0 0 0 1px var(--c-good), 0 0 12px rgba(125, 220, 106, 0.6); }
.slot.drop-bad { border-color: var(--c-bad); box-shadow: 0 0 0 1px var(--c-bad); }
.slot.dragging-src > img { opacity: 0.35; }
.slot .qty, .slot .plus, .slot .key, .slot .cd-text {
  position: absolute; pointer-events: none; line-height: 1.15; font-weight: 600; text-shadow: var(--text-outline);
}
.slot .qty { right: 3px; bottom: 1px; font-size: 12px; color: #fff; }
.slot .plus { left: 3px; top: 1px; font-size: 11px; font-weight: 700; color: var(--c-gold-light); }
.slot .key { right: 3px; top: 1px; font-size: 10px; font-weight: 500; color: var(--c-gold); }
.slot .cd {
  position: absolute; inset: 1px; border-radius: 2px; pointer-events: none;
  background: conic-gradient(rgba(0, 0, 0, 0.74) calc(var(--cd, 0) * 360deg), transparent 0);
}
.slot .cd-text { inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.slot[data-rarity="common"] { border-color: #6b5a48; }
.slot[data-rarity="uncommon"] { border-color: var(--r-uncommon); box-shadow: inset 0 0 8px rgba(95, 211, 95, 0.25), inset 0 2px 7px rgba(0, 0, 0, 0.8); }
.slot[data-rarity="rare"] { border-color: var(--r-rare); box-shadow: inset 0 0 8px rgba(74, 163, 255, 0.3), inset 0 2px 7px rgba(0, 0, 0, 0.8); }
.slot[data-rarity="epic"] { border-color: var(--r-epic); box-shadow: inset 0 0 9px rgba(199, 125, 255, 0.35), inset 0 2px 7px rgba(0, 0, 0, 0.8); }
.slot[data-rarity="legendary"] { border-color: var(--r-legendary); box-shadow: inset 0 0 10px rgba(255, 184, 48, 0.4), 0 0 6px rgba(255, 184, 48, 0.35); }
.slot-sm { --slot: 38px; }
.slot-lg { --slot: 48px; }
.slot-label { font-size: 10px; color: var(--c-muted); text-align: center; pointer-events: none; }

/* ------------------------------------------------------------------------------------------------
 * Bars: <div class="bar hp"><div class="bar-fill" style="width:62%"></div><div class="bar-text">…</div></div>
 * --------------------------------------------------------------------------------------------- */
.bar {
  position: relative; height: 14px; overflow: hidden;
  background: linear-gradient(180deg, #080504, #1d130c);
  border: 1px solid #000; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--c-frame-dark), inset 0 1px 3px rgba(0, 0, 0, 0.85);
}
.bar-fill {
  position: relative; height: 100%; width: 0; max-width: 100%;
  background: linear-gradient(180deg, #ffeaa8 0%, var(--c-gold) 45%, #9c7627 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 1px 0 0 rgba(0, 0, 0, 0.5);
  transition: width 0.25s ease-out;
}
.bar-fill::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
}
.bar.hp .bar-fill, .bar-fill.hp { background: linear-gradient(180deg, #ff9383 0%, var(--c-hp) 45%, #751410 100%); }
.bar.mp .bar-fill, .bar-fill.mp { background: linear-gradient(180deg, #8fc0ff 0%, var(--c-mp) 45%, #16397a 100%); }
.bar.exp .bar-fill, .bar-fill.exp { background: linear-gradient(180deg, #fff2c0 0%, var(--c-exp) 45%, #8e6a1f 100%); }
.bar.good .bar-fill, .bar-fill.good { background: linear-gradient(180deg, #b8f5a8 0%, #5fbf4a 45%, #2d6e20 100%); }
.bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; line-height: 1; color: #fff; text-shadow: var(--text-outline);
  pointer-events: none; white-space: nowrap;
}
.bar-lg { height: 18px; }
.bar-lg .bar-text { font-size: 12px; }
.bar-sm { height: 8px; }

/* ------------------------------------------------------------------------------------------------
 * Tabs
 * --------------------------------------------------------------------------------------------- */
.tabs {
  display: flex; gap: 3px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-gold-dark);
  margin-bottom: 10px; padding: 0 2px;
}
.tab {
  position: relative; margin-bottom: -1px;
  padding: 5px 14px; font-size: 13px; color: var(--c-muted);
  background: linear-gradient(180deg, #2c1b11, #1a0f0a);
  border: 1px solid #4a3020; border-bottom: none; border-radius: 3px 3px 0 0;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.tab:hover { color: var(--c-text); background: linear-gradient(180deg, #3a2416, #1f130c); }
.tab.active {
  color: var(--c-gold); font-weight: 500;
  background: linear-gradient(180deg, #74201a 0%, #3e0e09 100%);
  border-color: var(--c-gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 210, 150, 0.2);
}
.tab.active::after {
  content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ------------------------------------------------------------------------------------------------
 * Tooltip (positioned by ui.tooltip). Optional inner classes: .tt-title .tt-sub .tt-sep .tt-line
 * .tt-good .tt-bad .tt-price
 * --------------------------------------------------------------------------------------------- */
.tooltip {
  position: fixed; left: 0; top: 0; z-index: 60;
  min-width: 140px; max-width: 300px; padding: 8px 11px;
  font-size: 13px; line-height: 1.45; color: var(--c-text);
  background: linear-gradient(180deg, rgba(38, 23, 14, 0.97), rgba(16, 9, 6, 0.97));
  border: 1px solid var(--c-gold-dark); border-radius: var(--radius);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(232, 196, 106, 0.12), 0 8px 22px rgba(0, 0, 0, 0.75);
  pointer-events: none !important;
  white-space: normal; word-wrap: break-word;
}
.tooltip.hidden { display: none; }
.tooltip .tt-title { font-size: 15px; font-weight: 600; color: var(--c-gold); }
.tooltip .tt-sub { font-size: 12px; color: var(--c-muted); }
.tooltip .tt-sep { height: 1px; margin: 6px 0; background: linear-gradient(90deg, transparent, rgba(232, 196, 106, 0.45), transparent); }
.tooltip .tt-line { display: flex; justify-content: space-between; gap: 12px; }
.tooltip .tt-good { color: var(--c-good); }
.tooltip .tt-bad { color: var(--c-bad); }
.tooltip .tt-price { color: var(--c-gold); }

/* ------------------------------------------------------------------------------------------------
 * Containers, lists and layout helpers
 * --------------------------------------------------------------------------------------------- */
.panel-inset {
  padding: 8px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid #3c2717; border-radius: var(--radius);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 220, 160, 0.05);
}
.list { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.list-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; min-height: 34px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background 0.1s, border-color 0.1s;
}
.list-item:hover { background: rgba(232, 196, 106, 0.08); border-color: rgba(232, 196, 106, 0.25); }
.list-item.active, .list-item.selected {
  color: var(--c-gold-light);
  background: linear-gradient(90deg, rgba(179, 38, 30, 0.38), rgba(179, 38, 30, 0.05));
  border-color: var(--c-gold-dark);
}
.list-item.disabled { opacity: 0.5; cursor: default; }
.list-empty { padding: 14px; text-align: center; color: var(--c-muted); font-size: 13px; }

.row { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; }
.col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, var(--slot)); gap: 4px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.center, .col.center { justify-content: center; }
.spacer { flex: 1 1 auto; }
.center { text-align: center; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.small { font-size: 12px; }
.big { font-size: 17px; }

.muted { color: var(--c-muted); }
.gold-text { color: var(--c-gold); }
.red-text { color: var(--c-bad); }
.green-text { color: var(--c-good); }
.blue-text { color: var(--c-sky); }
.orthodox-text { color: var(--c-orthodox); }
.unorthodox-text { color: var(--c-unorthodox); }
.rarity-common { color: var(--r-common); }
.rarity-uncommon { color: var(--r-uncommon); }
.rarity-rare { color: var(--r-rare); }
.rarity-epic { color: var(--r-epic); }
.rarity-legendary { color: var(--r-legendary); }

/* Ornamental section heading: <div class="section-title">คุณสมบัติ</div> */
.section-title {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 6px;
  font-size: 13px; font-weight: 600; color: var(--c-gold); letter-spacing: 0.3px;
}
.section-title::before, .section-title::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 106, 0.5));
}
.section-title::after { background: linear-gradient(90deg, rgba(232, 196, 106, 0.5), transparent); }
.divider { height: 1px; margin: 8px 0; background: linear-gradient(90deg, transparent, rgba(232, 196, 106, 0.4), transparent); }
.stat-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; }
.stat-row .label { color: var(--c-muted); }
.stat-row .value { color: var(--c-text); font-weight: 500; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 600; line-height: 1; color: #fff;
  background: linear-gradient(180deg, #d8402f, #8e1d15); border: 1px solid var(--c-gold-dark); border-radius: 9px;
}
.kbd {
  display: inline-block; min-width: 18px; padding: 0 5px;
  font-size: 11px; line-height: 17px; text-align: center; color: var(--c-gold);
  background: #1a0f0a; border: 1px solid var(--c-gold-dark); border-radius: 3px; box-shadow: 0 1px 0 #000;
}
.gold-amount { color: var(--c-gold); font-weight: 500; white-space: nowrap; }
.gold-amount::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 4px; vertical-align: -1px;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff5c0, #e8c46a 45%, #8a6420);
  box-shadow: 0 0 0 1px #5a3d10;
}

/* ------------------------------------------------------------------------------------------------
 * Form controls
 * --------------------------------------------------------------------------------------------- */
.input,
#ui-root input[type="text"], #ui-root input[type="password"], #ui-root input[type="number"],
#ui-root input[type="search"], #ui-root input:not([type]), #ui-root textarea, #ui-root select {
  font: inherit; font-size: 14px; color: var(--c-text);
  padding: 6px 10px; min-height: 32px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid #5c3e23; border-radius: var(--radius);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.75);
  outline: none; transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus,
#ui-root input[type="text"]:focus, #ui-root input[type="password"]:focus, #ui-root input[type="number"]:focus,
#ui-root input[type="search"]:focus, #ui-root input:not([type]):focus, #ui-root textarea:focus, #ui-root select:focus {
  border-color: var(--c-gold);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(232, 196, 106, 0.18);
}
#ui-root input::placeholder, #ui-root textarea::placeholder { color: rgba(168, 151, 122, 0.65); }
#ui-root input.invalid { border-color: var(--c-bad); }
#ui-root select option { background: #1d110b; color: var(--c-text); }
#ui-root input[type="range"], #ui-root input[type="checkbox"], #ui-root input[type="radio"] { accent-color: var(--c-red); cursor: pointer; }
#ui-root input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > label, .field-label { font-size: 12px; color: var(--c-muted); }

/* ------------------------------------------------------------------------------------------------
 * Scrollbars
 * --------------------------------------------------------------------------------------------- */
#ui-root ::-webkit-scrollbar { width: 9px; height: 9px; }
#ui-root ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); border-radius: 5px; }
#ui-root ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #6b4524, #a8763d 50%, #6b4524);
  border: 1px solid #1a0f0a; border-radius: 5px;
}
#ui-root ::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #8a5a2c, #d09a50 50%, #8a5a2c); }
#ui-root ::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  #ui-root * { scrollbar-width: thin; scrollbar-color: #a8763d rgba(0, 0, 0, 0.35); }
}

/* ------------------------------------------------------------------------------------------------
 * Toasts (centre of the screen)
 * --------------------------------------------------------------------------------------------- */
/* padding-top is the default band; ui.js moves the stack above / below open windows (layoutToasts). */
.layer-toast { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 22vh; gap: 6px; }
.layer-toast > .toast { pointer-events: none; }
.toast {
  max-width: min(560px, 90vw); padding: 7px 22px;
  font-size: 15px; font-weight: 500; text-align: center; color: var(--c-gold-light);
  text-shadow: var(--text-outline);
  background: linear-gradient(90deg, transparent, rgba(20, 10, 6, 0.85) 18%, rgba(20, 10, 6, 0.85) 82%, transparent);
  border-top: 1px solid rgba(232, 196, 106, 0.35); border-bottom: 1px solid rgba(232, 196, 106, 0.35);
  animation: toast-in 0.18s ease-out;
  transition: opacity 0.35s, transform 0.35s;
}
.toast.leaving { opacity: 0; transform: translateY(-8px); }
.toast .toast-count { margin-left: 8px; font-size: 12px; color: var(--c-muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------------------------------------
 * Modal dialogs (confirm / prompt / numberPrompt)
 * --------------------------------------------------------------------------------------------- */
.modal-backdrop {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(10, 5, 3, 0.45), rgba(10, 5, 3, 0.72));
  animation: fade-in 0.15s ease-out;
}
.modal-backdrop > .win { position: relative; width: min(400px, calc(100vw - 32px)); animation: win-open 0.16s ease-out; }
.modal-text { font-size: 15px; line-height: 1.6; text-align: center; white-space: pre-wrap; word-break: break-word; margin: 4px 0 12px; }
.modal-input { width: 100%; }
.modal-number { display: flex; align-items: center; gap: 6px; }
.modal-number input[type="number"] { flex: 1 1 auto; min-width: 0; text-align: center; }
.modal-number + input[type="range"] { width: 100%; margin-top: 10px; }
.modal-hint { margin-top: 6px; font-size: 12px; color: var(--c-muted); text-align: center; }
.modal-buttons { display: flex; justify-content: center; gap: 10px; margin-top: 14px; }
.modal-buttons .btn { min-width: 110px; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------------------------------------
 * Drag & drop ghost
 * --------------------------------------------------------------------------------------------- */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 70;
  width: 42px; height: 42px; pointer-events: none !important;
  border: 1px solid var(--c-gold); border-radius: 3px;
  background: rgba(20, 10, 6, 0.6);
  box-shadow: 0 0 14px rgba(232, 196, 106, 0.55), 0 6px 14px rgba(0, 0, 0, 0.6);
  opacity: 0.92;
}
.drag-ghost img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------------------------------------
 * Full-screen screens (loading / connection overlay). Login & char select have their own sheets.
 * --------------------------------------------------------------------------------------------- */
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.boot-screen {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(circle at 50% 42%, rgba(120, 40, 20, 0.35), transparent 55%),
    radial-gradient(circle at 50% 40%, #2c1a11, var(--c-bg) 70%);
}
.boot-title {
  font-size: 46px; font-weight: 700; letter-spacing: 3px;
  background: linear-gradient(180deg, #fff3c4 0%, #e8c46a 50%, #a8782a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #4a120c) drop-shadow(0 0 16px rgba(232, 196, 106, 0.3));
}
.boot-sub { font-size: 16px; color: var(--c-muted); letter-spacing: 1px; }
.boot-spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid rgba(232, 196, 106, 0.15); border-top-color: var(--c-gold);
  animation: spin 0.9s linear infinite;
}
.boot-tip { max-width: 560px; padding: 0 20px; font-size: 13px; color: var(--c-muted); text-align: center; }
@keyframes spin { to { transform: rotate(360deg); } }

.conn-overlay {
  position: absolute; inset: 0; z-index: 80; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 4, 2, 0.72);
  animation: fade-in 0.2s ease-out;
}
.conn-overlay .win { position: relative; width: min(420px, calc(100vw - 32px)); }
.conn-overlay .conn-text { text-align: center; font-size: 15px; line-height: 1.6; margin: 6px 0 14px; }
.conn-overlay .conn-sub { text-align: center; font-size: 12px; color: var(--c-muted); }

@media (max-width: 640px) {
  :root { --slot: 42px; }
  .win-body { padding: 10px; }
  .btn-lg { min-height: 40px; padding: 6px 20px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}