/* kskin.css — the older windows in the K look (the user, 2026-09-30: "ทำ uxui ต่อให้จบ"): the forge (#forge, forge.js),
   the life-skill teachers (#lifementor, life.js + life_*.js), player shops (#vend set-up and #vbuy, vend.js) and the auto
   farm settings (#autofarm, autofarm.js), plus the garden's seed menu (.lf-pop). Their own code and markup stay; this
   skin turns the dark card into a cream K window with a sky-blue title bar, folder tabs and K buttons, and their list
   rows into dark K cards (so the rarity-coloured names they print stay readable). The NPC windows also get the NPC's
   painting beside the content (js/npcwin.js). Rules start with the window's id so they win over the older stylesheets
   and the styles those files add at run time. Load it after them. */

/* ---------- the window ---------- */
#forge, #lifementor, #vend, #vbuy, #autofarm { background: rgba(14, 12, 30, 0.38); }
#forge > .card, #lifementor > .card, #vend > .card, #vbuy > .card, #autofarm > .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;
}
#forge > .card { width: min(96vw, calc(1440 * var(--u))); }
#lifementor > .card { width: min(96vw, calc(1240 * var(--u))); max-height: 96vh; overflow-y: auto; }
#vend > .card, #vbuy > .card { width: min(96vw, calc(1120 * var(--u))); }
#autofarm > .card { width: min(96vw, calc(1000 * var(--u))); max-height: 94vh; overflow-y: auto; }
#forge > .card > :not(.ptitle), #lifementor > .card > :not(.ptitle), #vend > .card > :not(.ptitle),
#vbuy > .card > :not(.ptitle), #autofarm > .card > :not(.ptitle) { margin-left: calc(22 * var(--u)); margin-right: calc(22 * var(--u)); }
#forge > .card > .nw-body, #lifementor > .card > .nw-body { margin: 0; }

/* the title bar */
#forge .ptitle, #lifementor .ptitle, #vend .ptitle, #vbuy .ptitle, #autofarm .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;
}
#forge .ptitle::before, #lifementor .ptitle::before, #vend .ptitle::before, #vbuy .ptitle::before, #autofarm .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);
}
#forge .ptitle > span:first-child, #lifementor .ptitle > span:first-child, #vend .ptitle > span:first-child,
#vbuy .ptitle > span:first-child, #autofarm .ptitle > span:first-child { margin-right: auto; overflow: hidden; text-overflow: ellipsis; }
/* the close button */
#fg-close, #mt-close, #vend .vd-x, #vbuy .vd-x, #af-close {
  flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); padding: 0; cursor: pointer; border-radius: 50%;
  border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#ff9d9d, #e0525e); color: #fff;
  font: 800 calc(20 * var(--u)) / 1 'Baloo 2', sans-serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
  box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(0, 0, 0, 0.2);
}
/* the coins */
#forge .sh-coins, #lifementor .sh-coins, #vend .sh-coins, #vbuy .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;
}
#forge .sh-coins img, #lifementor .sh-coins img, #vend .sh-coins img, #vbuy .sh-coins img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
#forge .sh-coins b, #lifementor .sh-coins b, #vend .sh-coins b, #vbuy .sh-coins b { font: 800 calc(23 * var(--u)) / 1 'Baloo 2', sans-serif; color: var(--ink); -webkit-text-stroke: 0; }

/* ---------- folder tabs ---------- */
#forge .sh-tabs, #vend .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);
}
#forge .sh-tabs button, #vend .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;
}
#forge .sh-tabs button.on, #vend .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;
}
#forge .sh-where, #vend .sh-where { align-self: center; color: #4a4258; font-size: calc(15 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#forge .sh-where b { color: #2f7fd6; }

/* ---------- buttons ---------- */
#forge .big, #lifementor .big, #vend .big, #vbuy .big, #autofarm .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);
}
#forge .big.alt, #vend .big.alt { background: linear-gradient(#cfd1dc, #9ea2b3); }
#forge .big:disabled, #lifementor .big:disabled, #vend .big:disabled, #vbuy .big:disabled { opacity: 1; filter: none; background: linear-gradient(#d9d6df, #aaa6b6); color: #fff; }
#forge .big:not(:disabled):hover, #vend .big:not(:disabled):hover { filter: brightness(1.08); }
/* small buttons: cream pills; on / chosen: sky-blue */
#lifementor .mt-item button, #vbuy .vb-buy, #vend .vd-qty button, #forge .fg-kinds button, #forge .fg-last button, #autofarm .af-chip {
  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);
}
#lifementor .mt-item button, #vbuy .vb-buy { background: linear-gradient(#ffe68d, #f5bb3a); font-weight: 700; }
#forge .fg-kinds button.on, #autofarm .af-chip.on { background: linear-gradient(#8fd3fb, #3b8fdc); color: #fff; -webkit-text-stroke: calc(3.5 * var(--u)) var(--ink); paint-order: stroke fill; }
#lifementor .mt-item button:disabled, #vbuy .vb-buy:disabled, #forge .fg-last button:disabled, #autofarm .af-chip:disabled { opacity: 1; background: linear-gradient(#e2dfe8, #c3bfcd); color: #7d7890; -webkit-text-stroke: 0; cursor: default; }
#vend .vd-del { border-radius: 50%; background: linear-gradient(#ff9d9d, #e0525e); color: #fff; }

/* ---------- list rows: dark K cards ---------- */
#forge .fg-recipe, #forge .fg-copy, #forge .fg-act, #lifementor .mt-item, #vend .vd-row, #vbuy .vd-row {
  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;
}
#forge .fg-copy.sel { background: linear-gradient(#3b4a86, #2a3363); outline: none; box-shadow: inset 0 0 0 calc(3 * var(--u)) #7fcaf8; }
#forge .fg-row { border-color: #4a5288; background: #232a45; }
#forge .fg-row.sel { border-color: #ffd873; }
#forge .fg-head b { font-size: calc(22 * var(--u)); }
#forge .fg-jobs { color: #4a4258; } /* (the make tab's line under the weapon types, forgecraft.js) */
#forge .fg-head small, #forge .fg-act span { color: #4a4258; }
#forge .fg-act span { color: #b9c0e0; }
#forge .fg-rows { gap: calc(5 * var(--u)); }
#forge .fg-hole { color: #8a8295; background: #efe4c9; border-color: #cdbd98; border-style: dashed; }
#forge .fg-empty, #vend .vd-empty, #vbuy .vd-empty, #autofarm .af-empty { color: #6a6078; }
#lifementor .mt-item .n { color: #fff3cf; }
/* things written straight on the window */
#forge .st-note, #vend .st-note, #autofarm .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)); }
#vend .vd-h, #vend .vd-title label { color: var(--ink); font-weight: 700; }
#vend .vd-foot, #vbuy .vb-by, #vend .vd-open, #vbuy .vb-status { color: #4a4258; }
#vend .vd-open b, #vbuy .vb-by b { color: var(--ink) !important; } /* (vend.js colours the shop owner's name for a dark window) */
#vend .vd-open em { color: #c98a00; }
#vbuy .vb-status.ok { color: #2f9a3a; }
#vbuy .vb-status.warn { color: #d0343f; }
#vend .vd-list, #vbuy .vd-list { padding: calc(8 * var(--u)); border-radius: calc(16 * var(--u)); background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6; }
/* inputs */
#vend .vd-title input, #vend .vd-qty input, #vend .vd-price input {
  box-sizing: border-box; height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u));
  background: #fffaf0; color: var(--ink); font: 500 calc(17 * var(--u)) 'Mitr', sans-serif; outline: none;
}
#vend .vd-title input:focus, #vend .vd-qty input:focus, #vend .vd-price input:focus { box-shadow: 0 0 0 calc(3 * var(--u)) #7fcaf8; }
/* the bag's slots (vending) */
#vend .sh-grid { padding: calc(10 * var(--u)); border-radius: calc(16 * var(--u)); background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6; }
#vend .sh-cell {
  border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); background: linear-gradient(#e6f4ff, #a9d3f5);
  box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(0, 0, 0, 0.1), inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.6);
}
#vend .sh-cell.sel { outline: none; box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 0 calc(6 * var(--u)) #3b8fdc; background: linear-gradient(#fff5c9, #f5cc55); }

/* ---------- auto farm ---------- */
#autofarm .af-onoff {
  flex: none; height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); border: calc(3.5 * var(--u)) solid var(--ink); border-radius: calc(20 * var(--u));
  background: linear-gradient(#fffdf6, #e9dfc8); color: var(--ink); font: 700 calc(16 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: 0; cursor: pointer;
}
#autofarm .af-onoff.on { background: linear-gradient(#9fe39a, #4cb95c); color: #fff; -webkit-text-stroke: calc(3.5 * var(--u)) var(--ink); paint-order: stroke fill; }
#autofarm .af-h { color: var(--ink); font-weight: 700; margin-top: calc(16 * var(--u)); }
#autofarm .af-h small, #autofarm .af-lbl { color: #5d5470; }
#autofarm .af-chip.mon { background: #fffaf0; color: var(--ink); -webkit-text-stroke: 0; border-radius: calc(14 * var(--u)); }
#autofarm .af-chip.mon span { color: var(--ink); }
#autofarm .af-chip.mon em { color: #6a6078; }
#autofarm .af-chip.mon.on { background: linear-gradient(#e6f4ff, #a9d3f5); box-shadow: inset 0 0 0 calc(3 * var(--u)) #3b8fdc; }
#autofarm .af-chip.mon.on span { color: var(--ink); -webkit-text-stroke: 0; }
#autofarm .af-chip.mon.on em { color: #1d5aa6; -webkit-text-stroke: 0; }
#autofarm .af-chip.slot { background: #2a2f4d; }
#autofarm .af-chip.slot.on { background: #3b4a86; box-shadow: inset 0 0 0 calc(3 * var(--u)) #7fcaf8; }
#autofarm .af-chip.slot i { -webkit-text-stroke: 0; }

/* ---------- the garden's seed menu (over a plot) ---------- */
.lf-pop { background: #f7efdc; border: calc(4 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(3 * var(--u)) #74b6ec, 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.3); border-radius: calc(16 * var(--u)); }
.lf-pop .h { color: var(--ink); font-weight: 700; }
.lf-pop button { background: linear-gradient(#fffdf6, #e9dfc8); color: var(--ink); border-radius: calc(12 * var(--u)); }
.lf-pop button:hover { background: linear-gradient(#e6f4ff, #bfe0fb); }
.lf-pop button em { color: #c98a00; }

/* ---------- the NPC's painting beside the content (js/npcwin.js) ---------- */
.nw-body { display: grid; grid-template-columns: calc(430 * var(--u)) minmax(0, 1fr); min-height: calc(640 * var(--u)); }
.nw-art { position: relative; background-size: cover; background-position: 50% 30%; background-repeat: no-repeat; border-right: calc(4 * var(--u)) solid var(--ink); }
.nw-bubble {
  position: absolute; z-index: 1; left: 50%; top: 9%; max-width: calc(200 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(22 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #fffaf0; color: var(--ink);
  font: 700 calc(19 * var(--u)) / 1.35 'Mitr', sans-serif; text-align: center; box-shadow: 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.25);
}
.nw-bubble:empty { display: none; }
.nw-bubble::after {
  content: ''; position: absolute; left: calc(26 * var(--u)); bottom: calc(-19 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u));
  background: #fffaf0; border-right: calc(4 * var(--u)) solid var(--ink); border-bottom: calc(4 * var(--u)) solid var(--ink);
  transform: skewX(28deg) rotate(38deg); border-radius: 0 0 calc(6 * var(--u)) 0;
}
.nw-main { min-width: 0; padding: calc(4 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u)); }
#lifementor .mt-top { display: none; } /* (its line is in the bubble, its picture is the painting) */
#lifementor .mt-sec { margin-top: calc(16 * var(--u)); gap: calc(10 * var(--u)); }
#lifementor .mt-item { grid-template-columns: calc(64 * var(--u)) minmax(0, 1fr) auto; padding: calc(10 * var(--u)) calc(14 * var(--u)); }
#lifementor .mt-item img { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
#lifementor .mt-item .n { font-size: calc(20 * var(--u)); }
#lifementor .mt-item .w { color: #b9c0e0; font-size: calc(15 * var(--u)); }
#lifementor .lf-cost span { background: rgba(255, 255, 255, 0.08); }

/* ---------- a phone held upright: full-screen sheets, the painting as a strip on top ---------- */
html.mob-port #forge, html.mob-port #lifementor, html.mob-port #vend, html.mob-port #vbuy, html.mob-port #autofarm { --u: calc(100vw / 500); place-items: stretch; background: rgba(14, 12, 30, 0.6); }
html.mob-port #forge > .card, html.mob-port #lifementor > .card, html.mob-port #vend > .card, html.mob-port #vbuy > .card, html.mob-port #autofarm > .card {
  width: 100vw; max-width: 100vw; height: 100%; max-height: none; border-radius: 0; border-left-width: 0; border-right-width: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(env(safe-area-inset-bottom) + 14 * var(--u));
}
html.mob-port #forge > .card > :not(.ptitle), html.mob-port #lifementor > .card > :not(.ptitle), html.mob-port #vend > .card > :not(.ptitle),
html.mob-port #vbuy > .card > :not(.ptitle), html.mob-port #autofarm > .card > :not(.ptitle) { margin-left: calc(10 * var(--u)); margin-right: calc(10 * var(--u)); }
html.mob-port #forge .ptitle, html.mob-port #lifementor .ptitle, html.mob-port #vend .ptitle, html.mob-port #vbuy .ptitle, html.mob-port #autofarm .ptitle { font-size: calc(26 * var(--u)); padding-top: env(safe-area-inset-top); height: calc(58 * var(--u) + env(safe-area-inset-top)); }
html.mob-port .nw-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
html.mob-port .nw-art { height: calc(240 * var(--u)); border-right: 0; border-bottom: calc(4 * var(--u)) solid var(--ink); background-position: 50% 38%; }
html.mob-port .nw-bubble { left: auto; right: calc(12 * var(--u)); top: calc(14 * var(--u)); max-width: calc(220 * var(--u)); }
html.mob-port .nw-main { padding: calc(4 * var(--u)) calc(10 * var(--u)); }
html.mob-port #forge .fg-wrap { grid-template-columns: minmax(0, 1fr); }
html.mob-port #forge .fg-list { max-height: 34vh; }
html.mob-port #forge .fg-make { max-height: none; }
html.mob-port #forge .sh-tabs, html.mob-port #vend .sh-tabs { overflow-x: auto; scrollbar-width: none; }
html.mob-port #forge .sh-tabs button, html.mob-port #vend .sh-tabs button { font-size: calc(17 * var(--u)); padding: calc(4 * var(--u)) calc(14 * var(--u)); }
html.mob-port #vend .vd-wrap { grid-template-columns: minmax(0, 1fr); }
/* a shop row: the picture and the name on the first line, the numbers and the buttons on the next */
html.mob-port #vend .vd-row, html.mob-port #vbuy .vd-row { grid-template-columns: calc(54 * var(--u)) minmax(0, 1fr) auto auto; row-gap: calc(6 * var(--u)); }
html.mob-port #vend .vd-row > img, html.mob-port #vbuy .vd-row > img { grid-row: span 2; }
html.mob-port #vend .vd-name, html.mob-port #vbuy .vd-name { grid-column: 2 / -1; }
html.mob-port #autofarm .af-row { flex-wrap: wrap; }
html.mob-port #autofarm .af-lbl { min-width: 100%; }