/* buildloot.css — "ดรอปสร้างบิล" (js/bl_core.js, js/bl_runes.js, js/bl_arts.js): the forge tabs, taint lines, rune slots on
   the skill card (K, sized in --u like css/skillwin.css), the art slots on the HUD */

/* ---------- the forge (ป๋าหมูหริ่ง) ---------- */
#forge .bl-secs { margin-bottom: 8px; }
#forge .fg-recipe > button + button { margin-left: 6px; }
#forge .bl-max { font: 600 13px 'Mitr', sans-serif; color: #c9b56a; padding: 0 8px; white-space: nowrap; }

/* ---------- taint: a line on the copy, a badge in the bag ---------- */
.gb-opt.bl-taint { color: #d7b8ff; }
.bl-taint .bl-up { font-style: normal; color: #9fe3a0; }
.bl-taint .bl-down { font-style: normal; color: #ff9f8c; }
#forge .fg-side > .fg-rows .bl-taint { color: #5b2f99; } #forge .fg-side > .fg-rows .bl-up { color: #1f7a3a; } #forge .fg-side > .fg-rows .bl-down { color: #b23a2a; }
.bl-badge { position: absolute; left: 3px; bottom: 2px; font-style: normal; font-size: 14px; line-height: 1; color: #c9a6ff; text-shadow: 0 0 4px #2a1048, 0 1px 0 #000; }

/* ---------- rune slots on the skill card (K) ---------- */
.bl-runes { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.bl-rh { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--u)) calc(12 * var(--u)); font: 600 calc(19 * var(--u)) / 1.35 'Mitr', sans-serif; color: #fff; }
.bl-rh small { font-weight: 400; font-size: calc(15 * var(--u)); color: #b9c0e0; }
.bl-slot { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(12 * var(--u));
  background: #262c47; border: calc(2 * var(--u)) solid #4a5180; font: 400 calc(16 * var(--u)) / 1.35 'Mitr', sans-serif; color: #eef0ff; }
.bl-slot > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bl-slot small { color: #b9c0e0; font-size: calc(14 * var(--u)); }
.bl-slot img, .bl-rune img { width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex: none; }
.bl-slot.empty { border-style: dashed; }
.bl-slot.locked { border-style: dashed; color: #8e95b8; }
.bl-slot .kw-btn { flex: none; height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font-size: calc(16 * var(--u)); }
.bl-pick { display: flex; flex-direction: column; gap: calc(6 * var(--u)); max-height: calc(260 * var(--u)); overflow-y: auto; padding: calc(4 * var(--u)); border-radius: calc(12 * var(--u)); background: #1b2038; }
.bl-rune { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border: 0; border-radius: calc(10 * var(--u));
  background: #2e3556; color: #eef0ff; text-align: left; cursor: pointer; font: 400 calc(15 * var(--u)) / 1.35 'Mitr', sans-serif; }
.bl-rune:hover { background: #3c4470; }
.bl-rune span { display: flex; flex-direction: column; min-width: 0; }
.bl-rune small { color: #b9c0e0; }
.bl-none { padding: calc(8 * var(--u)); color: #b9c0e0; font: 400 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; }

/* ---------- monster arts: two slots on the HUD (7, 8) ---------- */
.bl-arts { position: fixed; z-index: 6; display: flex; gap: 8px; pointer-events: auto; }
.bl-art { position: relative; width: 52px; height: 52px; border-radius: 12px; background: #1d2238e6; border: 2px solid #6a5aa0; box-shadow: 0 2px 6px #0008; cursor: pointer; overflow: hidden; }
.bl-art img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.bl-art.empty { border-style: dashed; opacity: 0.55; }
.bl-art .k { position: absolute; left: 3px; top: 1px; font: 700 12px 'Mitr', sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.bl-art .cd { position: absolute; inset: 0; background: #000a; display: grid; place-items: center; font: 700 16px 'Mitr', sans-serif; color: #fff; }
.bl-art .cd[hidden] { display: none; }

/* ---------- the book of arts (#blarts): the forge's K look (generated from css/kskin.css #forge rules) ---------- */
#blarts {background: rgba(14, 12, 30, 0.38);}
#blarts > .card {position: relative; box-sizing: border-box; min-width: 0; padding: 0 0 calc(18 * var(--u)); overflow-x: hidden;
  background: #f7efdc; color: var(--ink); border: calc(5 * var(--u)) solid var(--ink); border-radius: calc(24 * var(--u));
  box-shadow: inset 0 0 0 calc(4 * var(--u)) #74b6ec, 0 calc(10 * var(--u)) 0 rgba(0, 0, 0, 0.3);
  font: 400 calc(18 * var(--u)) / 1.45 'Mitr', sans-serif; scrollbar-width: thin; scrollbar-color: #74b6ec transparent;}
#blarts > .card {width: min(96vw, calc(1440 * var(--u)));}
#blarts > .card > :not(.ptitle) {margin-left: calc(22 * var(--u)); margin-right: calc(22 * var(--u));}
#blarts > .card > .nw-body {margin: 0;}
#blarts .ptitle {position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-start; gap: calc(12 * var(--u));
  height: calc(58 * var(--u)); margin: 0 0 calc(4 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(48 * var(--u));
  background: linear-gradient(#7fcaf8, #3b8fdc); border-bottom: calc(4 * var(--u)) solid var(--ink);
  font: 800 calc(30 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; letter-spacing: 0.01em;
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap;}
#blarts .ptitle::before {content: ''; position: absolute; left: calc(16 * var(--u)); top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-top: calc(-8 * var(--u));
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4f8ff, #9fb6cf); border: calc(3 * var(--u)) solid var(--ink);}
#blarts .ptitle > span:first-child {margin-right: auto; overflow: hidden; text-overflow: ellipsis;}
#blarts .sh-coins {flex: none; height: calc(42 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(5 * var(--u)); border-radius: calc(21 * var(--u)); box-sizing: border-box;
  background: linear-gradient(#fffaf0, #f1e5c7); border: calc(3.5 * var(--u)) solid var(--ink); -webkit-text-stroke: 0;}
#blarts .sh-coins img {width: calc(34 * var(--u)); height: calc(34 * var(--u));}
#blarts .sh-coins b {font: 800 calc(23 * var(--u)) / 1 'Baloo 2', sans-serif; color: var(--ink); -webkit-text-stroke: 0;}
#blarts .sh-tabs {flex-wrap: nowrap; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); margin-bottom: calc(12 * var(--u)); padding: 0 calc(6 * var(--u));
  border-bottom: calc(4 * var(--u)) solid var(--ink);}
#blarts .sh-tabs button {flex: none; margin-bottom: calc(-4 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: linear-gradient(#f5ecd9, #ddd0b5); color: var(--ink);
  font: 600 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; white-space: nowrap;}
#blarts .sh-tabs button.on {z-index: 1; background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;}
#blarts .sh-where {align-self: center; color: #4a4258; font-size: calc(15 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#blarts .sh-where b {color: #2f7fd6;}
#blarts .big {display: inline-flex; align-items: center; justify-content: center; height: calc(46 * var(--u)); margin: 0; padding: 0 calc(20 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff;
  font: 700 calc(18 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap;
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0, 0, 0, 0.18), 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.25);}
#blarts .big.alt {background: linear-gradient(#cfd1dc, #9ea2b3);}
#blarts .big:disabled {opacity: 1; filter: none; background: linear-gradient(#d9d6df, #aaa6b6); color: #fff;}
#blarts .big:not(:disabled):hover {filter: brightness(1.08);}
#blarts .fg-kinds button, #blarts .fg-last button {cursor: pointer; padding: 0 calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u));
  background: linear-gradient(#fffdf6, #e9dfc8); color: var(--ink); font: 600 calc(16 * var(--u)) / 1.9 'Mitr', sans-serif; white-space: nowrap;
  box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.08);}
#blarts .fg-kinds button.on {background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; -webkit-text-stroke: calc(3.5 * var(--u)) var(--ink); paint-order: stroke fill;}
#blarts .fg-last button:disabled {opacity: 1; background: linear-gradient(#e2dfe8, #c3bfcd); color: #7d7890; -webkit-text-stroke: 0; cursor: default;}
#blarts .fg-recipe, #blarts .fg-copy, #blarts .fg-act {border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); color: #eef0ff;
  background: linear-gradient(#2a3050, #1c2136); box-shadow: inset 0 0 0 calc(2 * var(--u)) #3a4170;}
#blarts .fg-copy.sel {background: linear-gradient(#3b4a86, #2a3363); outline: none; box-shadow: inset 0 0 0 calc(3 * var(--u)) #7fcaf8;}
#blarts .fg-row {border-color: #4a5288; background: #232a45;}
#blarts .fg-row.sel {border-color: #ffd873;}
#blarts .fg-head b {font-size: calc(22 * var(--u));}
#blarts .fg-jobs {color: #4a4258;}
#blarts .fg-head small, #blarts .fg-act span {color: #4a4258;}
#blarts .fg-act span {color: #b9c0e0;}
#blarts .fg-rows {gap: calc(5 * var(--u));}
#blarts .fg-hole {color: #8a8295; background: #efe4c9; border-color: #cdbd98; border-style: dashed;}
#blarts .fg-empty {color: #6a6078;}
#blarts .st-note {margin-top: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6; color: #4a4258; font-size: calc(15 * var(--u));}
#blarts { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; }
#blarts > .card { width: min(96vw, calc(1100 * var(--u))); max-height: 92vh; display: flex; flex-direction: column; }
#blarts #bla-body { overflow-y: auto; min-height: 0; padding: calc(14 * var(--u)) calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
#blarts[hidden] { display: none; }