/* kui.css — the look the user picked for the game's windows (concept "K", 2026-09-29): cream bodies, sky-blue title
   bars with a rivet at each end, chunky dark navy outlines, round red close buttons, chunky rounded buttons. The bag
   (css/inventory.css) was built first with its own iv-* copies of these; new windows use these kw-* classes
   (js/statuswin.js first). Sizes in --u like the rest of the HUD. */
.kw-panel { position: fixed; inset: 0; z-index: 30; background: rgba(14, 12, 30, 0.38); }
.kw-panel[hidden] { display: none; }
.kw-panel, .kw-panel button { font-family: 'Mitr', sans-serif; }
.kw-win {
  position: relative; box-sizing: border-box; color: var(--ink); overflow: hidden;
  background: #f7efdc; 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;
}
.kw-title {
  position: relative; display: flex; align-items: center; justify-content: center; height: calc(58 * var(--u));
  background: linear-gradient(#7fcaf8, #3b8fdc); border-bottom: calc(4 * var(--u)) solid var(--ink);
  font: 800 calc(32 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; letter-spacing: 0.02em;
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink); paint-order: stroke fill;
}
.kw-title::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);
}
.kw-x {
  position: absolute; right: calc(12 * var(--u)); top: 50%; transform: translateY(-50%); cursor: pointer; padding: 0;
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); 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);
}
.kw-x:hover { filter: brightness(1.08); }
.kw-btn {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u));
  padding: 0 calc(16 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)); white-space: nowrap;
  font: 700 calc(18 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
  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);
}
.kw-btn.blue { background: linear-gradient(#7fcaf8, #3b8fdc); }
.kw-btn.gold { background: linear-gradient(#ffe384, #f2b632); color: var(--ink); -webkit-text-stroke: 0; }
.kw-btn.grey { background: linear-gradient(#cfd1dc, #9ea2b3); }
.kw-btn.red { background: linear-gradient(#ff9d9d, #e0525e); }
.kw-btn:not(:disabled):hover { filter: brightness(1.08); }
.kw-btn:not(:disabled):active { transform: translateY(calc(2 * var(--u))); box-shadow: inset 0 calc(-2 * var(--u)) 0 rgba(0, 0, 0, 0.18); }
.kw-btn:disabled { cursor: default; filter: grayscale(0.75); opacity: 0.6; }
/* an inset area inside a window (a slightly darker cream with a soft rim) */
.kw-inset { background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6; border-radius: calc(18 * var(--u)); }
/* the dark information strip */
.kw-info {
  display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(50 * var(--u)); padding: calc(6 * var(--u)) calc(16 * var(--u));
  border-radius: calc(16 * var(--u)); background: linear-gradient(#272b47, #1b1e33); border: calc(4 * var(--u)) solid var(--ink);
  color: #eef0ff; font: 400 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif;
}
.kw-info .i {
  flex: none; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
  background: linear-gradient(#7fcaf8, #3b8fdc); border: calc(3 * var(--u)) solid var(--ink); color: #fff;
  font: 800 calc(17 * var(--u)) / 1 'Baloo 2', serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
}
.kw-info b { color: #ffd873; font-weight: 600; }
.kw-info .up { color: #8ff08a; font-weight: 600; }
/* folder tabs along a line (the bag's look): the selected one sky-blue */
.kw-tabs { display: flex; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)) 0; border-bottom: calc(4 * var(--u)) solid var(--ink); }
.kw-tab {
  position: relative; cursor: pointer; margin-bottom: calc(-4 * var(--u)); padding: calc(5 * var(--u)) calc(22 * var(--u)); white-space: nowrap;
  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;
}
.kw-tab:hover { filter: brightness(1.04); }
.kw-tab.on { z-index: 1; background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.kw-tab.gold:not(.on) { background: linear-gradient(#ffe9a0, #f2c14a); }
/* the small dark card (an item's or a skill's details) */
.kw-card {
  box-sizing: border-box; border-radius: calc(20 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); color: #eef0ff;
  background: linear-gradient(#272b47, #1b1e33); box-shadow: inset 0 0 0 calc(3 * var(--u)) #3a4170;
}
/* a thin sky-blue scrollbar */
.kw-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #74b6ec transparent; }
.kw-scroll::-webkit-scrollbar { width: calc(10 * var(--u)); }
.kw-scroll::-webkit-scrollbar-thumb { background: #74b6ec; border-radius: calc(5 * var(--u)); }
/* a small coloured tag (skill kinds, map dangers ...) */
.kw-tag {
  display: inline-block; padding: calc(1 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(2.5 * var(--u)) solid var(--ink);
  font: 600 calc(14 * var(--u)) / 1.35 'Mitr', sans-serif; color: #fff; white-space: nowrap; background: #7d8398;
}