/* Floralia — cozy storybook RPG UI. Single deliberate look (game), every color explicit. */
:root {
  --navy: #1d2440;
  --navy-2: #283257;
  --navy-3: #36416b;
  --panel: rgba(22, 28, 54, 0.95);
  --cream: #f6eedb;
  --cream-2: #e9dcc0;
  --ink: #3a2a20;
  --leaf: #8fcf6a;
  --leaf-dark: #3f7a35;
  --gold: #f2c94c;
  --rose: #f3a3ba;
  --ice: #bfe6ff;
  --node: #5d5344;
  --node-top: #7b6d55;
  --node-edge: #2e271f;
  --danger: #e5484d;
  --display: 'Fredoka', 'Mali', system-ui, sans-serif;
  --thai: 'Mali', 'Fredoka', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: #93c06c;
  color: var(--cream);
  font-family: var(--thai);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
#game { position: fixed; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; }
/* the shaded copy of the frame and the HUD layer sit above the game canvas; the mouse passes through */
#fx-gl, #hud { position: fixed; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
#fx-gl[hidden] { display: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
#ui > * { pointer-events: auto; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .sk:focus-visible, .eq:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

#loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--thai); font-weight: 600; font-size: 1.1rem; color: var(--ink);
}
/* a map's pictures on the first visit (game.js G.travel / mapLoadStart): the same card over a dim screen */
#maploading {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(12, 16, 24, 0.82);
  font-family: var(--thai); font-weight: 600; font-size: 1.1rem; color: var(--ink);
}
/* the boot loading card: count, bar and a note (index.html; friends on a slow line must see it is moving) */
#loading .load-card, #maploading .load-card {
  display: grid; gap: 10px; justify-items: center; width: min(460px, 86vw); padding: 18px 22px;
  background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
#loading .load-card b, #maploading .load-card b { font-size: 1.15rem; }
#loading .load-card small, #maploading .load-card small { font-size: 0.9rem; font-weight: 500; color: #5a4636; text-align: center; }
#loading .load-bar, #maploading .load-bar { display: block; width: 100%; height: 14px; border: 2px solid var(--ink); border-radius: 8px; background: #e6d8b8; overflow: hidden; }
#loading .load-bar i, #maploading .load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7cbf5a, #f2c94c); transition: width 0.3s; }
.logo-img { width: min(560px, 86vw); height: auto; filter: drop-shadow(0 6px 10px rgba(30, 40, 20, 0.35)); }

/* ---------- shared buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.4em;
  border: 3px solid var(--ink); border-radius: 14px;
  background: var(--cream); color: var(--ink);
  font-family: var(--thai); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}
.btn:hover { background: #fff8e8; transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.primary { background: var(--leaf); }
.btn.primary:hover { background: #a2dc7e; }
.btn.ghost { background: rgba(246, 238, 219, 0.14); color: var(--cream); border-color: rgba(246, 238, 219, 0.6); box-shadow: none; }
.btn.ghost:hover { background: rgba(246, 238, 219, 0.24); }

/* ---------- title ---------- */
#title {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 252, 235, 0.0) 0%, rgba(255, 252, 235, 0.0) 35%, rgba(40, 58, 30, 0.45) 100%);
}
.title-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 640px; }
.logo {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3.4rem, 11vw, 7rem); line-height: 0.95; letter-spacing: 0.01em;
  color: #fff7e2;
  -webkit-text-stroke: 0.09em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 var(--ink), 0 0.16em 0.2em rgba(30, 40, 20, 0.35);
}
.logo .bloom { color: var(--rose); }
.logo-leaf {
  position: absolute; width: 0.42em; height: 0.24em; top: -0.08em; right: 0.02em;
  background: var(--leaf); border: 0.05em solid var(--ink); border-radius: 0.24em 0 0.24em 0; transform: rotate(-22deg);
}
.tagline {
  font-family: var(--display); font-weight: 600; font-size: clamp(1rem, 2.6vw, 1.3rem);
  color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 18px; box-shadow: 0 3px 0 var(--ink);
}
.tagline small { font-family: var(--thai); font-weight: 600; opacity: 0.8; }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.controls-strip {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  font-size: 0.86rem; color: #fffbe9;
  padding: 8px 16px; border-radius: 14px; background: rgba(31, 39, 71, 0.8);
}
.controls-strip kbd, .kbd {
  display: inline-block; min-width: 1.7em; padding: 0 0.4em; margin-right: 0.25em;
  border: 2px solid var(--ink); border-radius: 6px; background: var(--cream); color: var(--ink);
  font-family: var(--display); font-weight: 600; font-size: 0.8em; text-align: center; text-shadow: none;
}
.fineprint { font-size: 0.75rem; color: #fffbe9; padding: 2px 10px; border-radius: 999px; background: rgba(31, 39, 71, 0.6); }

/* ---------- class select ---------- */
#select {
  position: absolute; inset: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: max(20px, env(safe-area-inset-top)) 16px 24px;
  background: rgba(22, 28, 54, 0.72);
}
#select h2 {
  margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.3rem);
  color: #fff7e2; -webkit-text-stroke: 0.08em var(--ink); paint-order: stroke fill; text-align: center;
}
#select h2 small { display: block; font-family: var(--thai); font-size: 0.55em; -webkit-text-stroke: 0; color: var(--cream-2); font-weight: 600; margin-top: 4px; }
.class-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 16px; width: min(1240px, 100%); }
.class-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 14px 16px 16px; border: 3px solid var(--node-edge); border-radius: 18px;
  background: linear-gradient(180deg, #fbf4e3 0%, var(--cream) 60%, var(--cream-2) 100%); color: var(--ink);
  box-shadow: 0 6px 0 var(--node-edge);
  text-align: left; transition: transform 0.12s ease;
}
.class-card:hover, .class-card:focus-within { transform: translateY(-4px); }
.class-card .portrait {
  height: 150px; border-radius: 12px; border: 2px solid rgba(58, 42, 32, 0.35);
  background: radial-gradient(ellipse at 50% 80%, #b9dc93 0%, #a3cd7b 55%, #8fbd67 100%);
  display: grid; place-items: center; overflow: hidden;
}
.class-card .portrait canvas { width: 150px; height: 150px; }
.class-card h3 { margin: 0; font-family: var(--display); font-size: 1.45rem; line-height: 1.05; }
.class-card h3 small { display: block; font-family: var(--thai); font-size: 0.62em; font-weight: 600; color: #7a5a3a; }
.class-card p { margin: 0; font-size: 0.86rem; line-height: 1.4; }
.class-card .badge {
  position: absolute; top: -12px; right: 14px; padding: 2px 10px; border-radius: 999px;
  background: var(--gold); border: 2px solid var(--ink); font-family: var(--display); font-weight: 600; font-size: 0.8rem; color: var(--ink);
}
.skill-mini { display: flex; flex-direction: column; gap: 6px; }
.skill-mini div { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.skill-mini canvas { width: 30px; height: 30px; border-radius: 7px; background: var(--navy); border: 2px solid var(--ink); flex: none; }
.class-card .btn { margin-top: auto; }

/* ---------- panels (tree / pause) ---------- */
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 14, 30, 0.42);
}
.panel {
  position: relative; width: min(1120px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 20px 16px;
  background: var(--panel); border: 3px solid #0c1022; border-radius: 22px;
  box-shadow: 0 0 0 2px rgba(191, 230, 255, 0.18) inset, 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow-x: hidden; overflow-y: auto;
}
/* stacking: touch controls < dialog < modal panels < toasts */
#touch { z-index: 1; }
#dialog { z-index: 4; }
.overlay, #dead { z-index: 5; }
#title, #select { z-index: 3; }
#toasts { z-index: 6; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.01em; }
.panel-head h2 small { font-family: var(--thai); font-size: 0.62em; font-weight: 500; color: var(--cream-2); margin-left: 8px; }
.close-x {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(246, 238, 219, 0.5);
  background: rgba(246, 238, 219, 0.08); font-size: 1.3rem; line-height: 1;
}
.close-x:hover { background: rgba(246, 238, 219, 0.2); }

.sp-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 999px;
  background: var(--navy-3); border: 2px solid rgba(191, 230, 255, 0.35); font-family: var(--display); font-weight: 600;
}
.sp-pill canvas { width: 26px; height: 26px; }
.sp-pill b { color: var(--ice); font-size: 1.15rem; }

/* skill tree board */
.tree-wrap { position: relative; flex: none; min-height: 0; overflow: auto; border-radius: 16px; }
.sizer { position: relative; margin: 0 auto; }
.board {
  position: absolute; left: 0; top: 0; width: 1360px; height: 600px; transform-origin: top left;
  background:
    radial-gradient(circle at 50% 46%, rgba(191, 230, 255, 0.10) 0, rgba(191, 230, 255, 0.0) 60%),
    repeating-radial-gradient(circle at 50% 46%, rgba(191, 230, 255, 0.07) 0 2px, transparent 2px 70px);
}
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.emblem { position: absolute; width: 64px; height: 64px; left: 50%; top: 4px; transform: translateX(-50%); opacity: 0.85; }
.node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  border: 3px solid var(--node-edge); border-radius: 12px; background: var(--node);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.node.locked { filter: saturate(0.45) brightness(0.8); }
.node-title {
  width: 100%; padding: 3px 12px; text-align: center; border-bottom: 2px solid var(--node-edge);
  background: var(--node-top); border-radius: 9px 9px 0 0;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem; color: #fff3da; white-space: nowrap;
}
.node-skills { display: flex; gap: 8px; padding: 8px 10px 6px; }
.sk {
  position: relative; width: 58px; height: 58px; padding: 0; border-radius: 10px;
  border: 3px solid #2a2433; background: #2a3152;
  display: grid; place-items: center;
}
.sk canvas { width: 46px; height: 46px; }
.sk.owned { background: linear-gradient(180deg, #34406e, #232b4d); border-color: #e9eef7; }
.sk.locked { background: #4a4438; }
.sk.locked canvas { opacity: 0.9; }
.sk.can-buy { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 201, 76, 0.0); } 50% { box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.55); } }
.sk.sel { outline: 3px solid var(--gold); outline-offset: 2px; }
.sk .eqtag {
  position: absolute; top: -9px; right: -8px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 6px;
  background: #fff; color: var(--navy); border: 2px solid var(--navy); font-family: var(--display); font-weight: 700; font-size: 0.7rem;
  display: grid; place-items: center;
}
.sk .passive-tag { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 0.62rem; font-family: var(--display); font-weight: 600; background: var(--leaf-dark); color: #fff; padding: 0 5px; border-radius: 5px; }
.cost-row { display: flex; gap: 8px; padding: 0 10px 7px; }
.cost-row span { width: 58px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 0.82rem; color: var(--cream-2); }
.cost-row span.short { color: #ff9a8e; }

/* tooltip + equip bar */
.tree-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; }
.tip {
  min-width: 0; min-height: 112px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 14px;
  padding: 10px 14px; border-radius: 14px; background: #2b355c; border: 2px solid #46527f;
}
.tip canvas { grid-row: span 3; width: 64px; height: 64px; border-radius: 10px; background: var(--navy); border: 2px solid #11162b; }
.tip h4 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.tip h4 small { font-family: var(--thai); font-weight: 500; font-size: 0.8em; color: var(--ice); margin-left: 6px; }
.tip .meta { font-family: var(--display); font-size: 0.8rem; color: #b6c2e8; letter-spacing: 0.04em; text-transform: uppercase; }
.tip p { margin: 0; font-size: 0.93rem; line-height: 1.45; color: #eef1fb; }
.tip .status { grid-column: 1 / -1; font-size: 0.86rem; color: var(--gold); }
.equip { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.equip-label { font-size: 0.8rem; color: #b6c2e8; text-align: center; }
.equip-row { display: flex; gap: 10px; }
.eq {
  position: relative; width: 62px; height: 62px; border-radius: 12px; border: 3px solid #e9eef7; background: var(--navy);
  display: grid; place-items: center; padding: 0;
}
.eq canvas { width: 50px; height: 50px; }
.eq .key {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: #fff; color: var(--navy); border: 2px solid #121730; border-radius: 6px; padding: 0 6px;
  font-family: var(--display); font-weight: 700; font-size: 0.72rem;
}
.eq.target { animation: glow 1s ease-in-out infinite; border-color: var(--gold); }
.tree-hint { font-size: 0.8rem; color: #b6c2e8; text-align: center; }

/* pause */
.pause-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pause-box { min-width: 0; padding: 12px 14px; border-radius: 14px; background: #2b355c; border: 2px solid #46527f; }
.pause-box h3 { margin: 0 0 8px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.pause-box ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 0.9rem; }
.pause-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
input[type="range"] { accent-color: var(--leaf); width: 160px; }

/* dialog */
#dialog {
  position: absolute; left: 50%; bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px)); transform: translateX(-50%);
  width: min(720px, calc(100% - 32px));
  padding: 16px 20px 14px; border-radius: 18px;
  background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
}
#dialog .who {
  position: absolute; top: -16px; left: 18px; padding: 2px 14px; border-radius: 999px;
  background: var(--leaf); border: 3px solid var(--ink); font-weight: 700; font-size: 0.95rem;
}
#dialog p { margin: 6px 0 4px; font-size: 1.02rem; line-height: 1.55; min-height: 3.1em; }
#dialog .next { font-size: 0.78rem; opacity: 0.7; text-align: right; }

/* dead */
#dead { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(40, 20, 40, 0.45); animation: dead-in 0.5s ease-out 0.55s both; }   /* (after the hero has fallen: game.js drawPlayer) */
@keyframes dead-in { from { opacity: 0; } }
#dead div { text-align: center; }
#dead h2 { margin: 0; font-family: var(--display); font-size: 2.6rem; color: #fff0f0; -webkit-text-stroke: 0.08em #4a1015; paint-order: stroke fill; }
#dead p { margin: 6px 0 0; font-size: 1rem; }

/* toasts */
#toasts {
  position: absolute; left: 50%; top: 128px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(640px, calc(100% - 32px));
}
.toast {
  max-width: 100%; padding: 7px 16px; border-radius: 999px; background: rgba(31, 39, 71, 0.92); color: #fff;
  border: 2px solid rgba(191, 230, 255, 0.4); font-size: 0.95rem; text-align: center;
  animation: toast-in 0.25s ease-out;
}
.toast.out { opacity: 0; transform: translateY(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }

/* touch controls */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch > * { pointer-events: auto; position: absolute; }
.stick { left: 0; bottom: 0; width: 46%; height: 55%; }
.stick-base {
  position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55);
  background: rgba(31, 39, 71, 0.35); transform: translate(-50%, -50%); pointer-events: none;
}
.stick-knob {
  position: absolute; width: 54px; height: 54px; border-radius: 50%; background: rgba(246, 238, 219, 0.9); border: 3px solid var(--ink);
  transform: translate(-50%, -50%); pointer-events: none;
}
.tbtn {
  width: 62px; height: 62px; border-radius: 50%; border: 3px solid #e9eef7; background: rgba(31, 39, 71, 0.85);
  display: grid; place-items: center; touch-action: none; padding: 0; overflow: hidden;
}
.tbtn canvas { width: 46px; height: 46px; }
.tbtn .cd { position: absolute; inset: 0; background: rgba(8, 12, 28, 0.6); transform-origin: bottom; }
.tbtn .num { position: absolute; font-family: var(--display); font-weight: 700; color: #fff; font-size: 1rem; text-shadow: 0 0 3px #000; }
.tbtn.big { width: 84px; height: 84px; background: rgba(243, 163, 186, 0.9); border-color: var(--ink); font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; }
.tbtn.small { width: 46px; height: 46px; font-size: 0.8rem; font-family: var(--display); font-weight: 700; }

/* ---------- theme switch (title screen) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgba(31, 39, 71, 0.82); color: #fffbe9; font-size: 0.9rem;
}
.theme-toggle span { padding: 0 8px 0 10px; }
.theme-toggle button {
  min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #fffbe9;
  font-family: var(--thai); font-weight: 600;
}
.theme-toggle button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* ---------- Dark / Mystic themes: light text on the darker generated panels ---------- */
.theme-night #title { background: radial-gradient(ellipse at 50% 42%, rgba(12, 6, 28, 0) 30%, rgba(12, 6, 28, 0.6) 100%); }
.theme-night .tagline { background: #2b2440; color: #efe6ff; border-color: #120c1c; box-shadow: 0 3px 0 #120c1c; }
.theme-night .theme-toggle button[aria-pressed="true"] { background: #b9a2ff; color: #1a1030; }
.theme-night.skinned .btn, .theme-night.skinned .btn.ghost { color: #f3ecff; }
.theme-night.skinned .btn.primary { color: #f3fff9; }
.theme-night .class-card { color: #efe6ff; }
.theme-night .class-card h3 small { color: #c9b8f0; }
.theme-night #select { background: rgba(12, 8, 26, 0.78); }
.theme-night #dialog { background: #2a2340; color: #f1e9ff; border-color: #120c1c; box-shadow: 0 6px 0 #120c1c; }
.theme-night #dialog .who { background: #7b5cc4; color: #fff; border-color: #120c1c; }
/* Spirit Forest: dark polished wood, lantern gold and sakura pink */
.theme-spirit #title { background: radial-gradient(ellipse at 50% 38%, rgba(255, 236, 190, 0) 35%, rgba(18, 30, 24, 0.5) 100%); }
.theme-spirit .tagline { background: #2a2b22; color: #fff3d6; border-color: #12140e; box-shadow: 0 3px 0 #12140e; }
.theme-spirit .theme-toggle button[aria-pressed="true"] { background: #ffb3cf; color: #2a1020; }
.theme-spirit .class-card h3 small { color: #ffcfe0; }
.theme-spirit #select { background: rgba(14, 24, 18, 0.72); }
.theme-spirit #dialog { background: #2a2b22; color: #fff3d6; border-color: #12140e; box-shadow: 0 6px 0 #12140e; }
.theme-spirit #dialog .who { background: #e98fb3; color: #2a1020; border-color: #12140e; }
/* Mystic Forest: misty teal with lantern gold */
.theme-mystic #title { background: radial-gradient(ellipse at 50% 40%, rgba(4, 24, 30, 0) 30%, rgba(4, 24, 30, 0.62) 100%); }
.theme-mystic .tagline { background: #173532; color: #f4ecd2; border-color: #071614; box-shadow: 0 3px 0 #071614; }
.theme-mystic .theme-toggle button[aria-pressed="true"] { background: #f2c96b; color: #1a1408; }
.theme-mystic .class-card h3 small { color: #f2d48a; }
.theme-mystic #select { background: rgba(4, 22, 26, 0.78); }
.theme-mystic #dialog { background: #173532; color: #f4ecd2; border-color: #071614; box-shadow: 0 6px 0 #071614; }
.theme-mystic #dialog .who { background: #c99b3f; color: #1a1408; border-color: #071614; }

/* ---------- AUTO toggle (image by Codex; label is text) ---------- */
.auto-btn {
  position: absolute; z-index: 2; padding: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  touch-action: manipulation;
}
.auto-btn .auto-img { display: block; width: 100%; aspect-ratio: 1; }
.auto-btn .auto-img canvas { width: 100%; height: 100%; display: block; }
.auto-btn .auto-label {
  margin-top: calc(-6px * var(--u, 1));
  font-family: var(--display); font-weight: 700; font-size: calc(13px * var(--u, 1)); letter-spacing: 0.08em;
  color: #fff8e6; -webkit-text-stroke: calc(3px * var(--u, 1)) #2c2533; paint-order: stroke fill;
}
.auto-btn.on .auto-label { color: #ffd84a; animation: auto-pulse 1.2s ease-in-out infinite; }
.auto-btn:hover .auto-img { transform: scale(1.06); }
.auto-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
@keyframes auto-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.zoom-box { position: absolute; z-index: 2; display: flex; gap: 6px; }
.zoom-btn {
  width: var(--zs, 38px); height: var(--zs, 38px); padding: 0; border: 0; border-radius: 50%;
  background: none; touch-action: none; display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: #fff;
}
.zoom-btn canvas { width: 100%; height: 100%; display: block; }
.zoom-btn:hover canvas { transform: scale(1.06); }
.zoom-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .auto-btn.on .auto-label { animation: none; } }

/* ---------- generated image skins (custom properties are filled in by ui.js once images load) ---------- */
.skinned .panel { background: var(--img-panel-bg) center / cover, var(--panel); }
.skinned .board { background: none; }
.skinned .node {
  background: none; box-shadow: none;
  border: 18px solid transparent; border-image: var(--img-node) 64 fill / 18px stretch;
}
.skinned .node-title { background: none; border-bottom: 0; margin-top: -8px; }
.skinned .sk { border: 0; background: var(--img-slot-tree) center / 100% 100% no-repeat; }
.skinned .sk.owned, .skinned .sk.locked { background: var(--img-slot-tree) center / 100% 100% no-repeat; }
.skinned .sk.owned { filter: brightness(1.12); }
.skinned .class-card { background: var(--img-card) center / 100% 100% no-repeat; border: 0; box-shadow: none; padding: 22px 22px 22px; }
.skinned .class-card .portrait { background: var(--img-portrait) center / cover; }
.skinned .btn { border: 0; box-shadow: none; background: var(--img-button) center / 100% 100% no-repeat; min-height: 54px; padding: 0 1.8em 6px; }
.skinned .btn.primary { background: var(--img-button-green) center / 100% 100% no-repeat; }
.skinned .btn.ghost { background: var(--img-button) center / 100% 100% no-repeat; color: var(--ink); opacity: 0.92; }
.chain {
  position: absolute; height: 14px; transform-origin: 0 50%; pointer-events: none;
  background: var(--img-chain) 0 50% / auto 100% repeat-x;
}

@media (prefers-reduced-motion: reduce) {
  .sk.can-buy, .eq.target { animation: none; }
  .toast { animation: none; }
}
@media (max-width: 640px) {
  .board { transform-origin: top left; }
  .tree-foot { grid-template-columns: 1fr; }
  .panel { padding: 12px; }
}

/* ---------- map editor (js/editor.js) ---------- */
.ed-panel {
  position: absolute; z-index: 3; left: 12px; top: 12px; bottom: 12px; width: 304px; max-height: none;
  gap: 10px; padding: 14px 14px 12px; border-radius: 18px;
  user-select: none; -webkit-user-select: none;
}
.ed-panel.folded { bottom: auto; }
.ed-panel.folded .ed-body { display: none; }
.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.ed-head h2 small { display: block; font-size: 0.6em; font-weight: 500; color: var(--cream-2); letter-spacing: 0.04em; }
.ed-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ed-body section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ed-panel h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 0.98rem; }
.ed-panel h3 small { display: block; font-family: var(--thai); font-weight: 500; font-size: 0.74rem; color: var(--cream-2); }
.ed-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ed-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 10px; border-radius: 10px;
  border: 2px solid rgba(246, 238, 219, 0.38); background: rgba(246, 238, 219, 0.1); color: var(--cream);
  font-family: var(--thai); font-weight: 600; font-size: 0.86rem; line-height: 1.1;
  touch-action: manipulation;
}
.ed-btn:hover { background: rgba(246, 238, 219, 0.2); }
.ed-btn:active { transform: translateY(1px); }
.ed-btn:disabled { opacity: 0.38; cursor: default; }
.ed-btn.primary { background: var(--leaf); border-color: var(--ink); color: var(--ink); }
.ed-btn.primary:hover { background: #a2dc7e; }
.ed-btn.danger { border-color: rgba(255, 140, 140, 0.6); color: #ffc2c2; }
.ed-btn[aria-pressed="true"] { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.ed-btn kbd { font-family: var(--display); font-size: 0.68rem; font-weight: 600; opacity: 0.7; }
.ed-panel.touch .ed-btn kbd { display: none; }
.ed-sel .ed-info, .ed-sel .ed-size, .ed-sel .ed-grid { display: none !important; }
.ed-panel.has-sel .ed-sel .ed-info { display: flex !important; }
.ed-panel.has-sel .ed-sel .ed-size { display: flex !important; }
.ed-panel.has-sel .ed-sel .ed-grid { display: grid !important; }
.ed-panel.has-sel .ed-empty { display: none; }
.ed-empty { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(246, 238, 219, 0.08); font-size: 0.88rem; color: var(--cream-2); }
.ed-info { align-items: center; gap: 10px; }
.ed-thumb { width: 56px; height: 56px; flex: none; border-radius: 12px; background: rgba(10, 14, 30, 0.45); border: 2px solid rgba(246, 238, 219, 0.25); }
.ed-meta { display: flex; flex-direction: column; min-width: 0; }
.ed-meta b { font-size: 1.02rem; }
.ed-meta small { font-size: 0.78rem; color: var(--cream-2); font-variant-numeric: tabular-nums; }
.ed-size { align-items: center; gap: 6px; }
.ed-size .ed-btn { width: 38px; padding: 0; font-size: 1.2rem; flex: none; }
.ed-size input[type="range"] { flex: 1; width: auto; min-width: 0; }
.ed-size output { width: 46px; flex: none; text-align: right; font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ed-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.ed-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 4px 2px 5px; border-radius: 10px; border: 2px solid rgba(246, 238, 219, 0.2);
  background: rgba(10, 14, 30, 0.35); touch-action: manipulation;
}
.ed-item:hover { border-color: var(--gold); background: rgba(10, 14, 30, 0.55); }
.ed-item canvas { width: 46px; height: 46px; }
.ed-item span { font-size: 0.68rem; line-height: 1.15; text-align: center; color: var(--cream); overflow-wrap: anywhere; }
.ed-mini { width: 100%; height: auto; aspect-ratio: 5200 / 3800; border-radius: 10px; border: 2px solid rgba(246, 238, 219, 0.3); cursor: pointer; touch-action: none; }
.ed-hint { margin: 0; font-size: 0.74rem; line-height: 1.5; color: var(--cream-2); }
.ed-io { display: flex; flex-direction: column; gap: 8px; }
.ed-io textarea {
  width: 100%; min-height: 120px; resize: vertical; border-radius: 10px; padding: 8px;
  border: 2px solid rgba(246, 238, 219, 0.35); background: rgba(8, 10, 22, 0.7); color: var(--cream);
  font: 0.72rem/1.4 ui-monospace, Consolas, monospace; user-select: text; -webkit-user-select: text;
}
.ed-panel.io-open .ed-body { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .ed-panel { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 46%; }
  .ed-map { display: none !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ed-panel { width: 268px; left: 8px; top: 8px; bottom: 8px; padding: 10px; }
}

/* ---------- map editor: the chosen floor swatch ---------- */
.ed-item.on { border-color: var(--gold); background: rgba(242, 201, 76, 0.18); }

/* ---------- MMO layer (js/mmo.js): chat log, quest tracker, world map ---------- */
#chat {
  position: absolute; z-index: 1; left: 12px; bottom: 118px; width: min(380px, 46vw);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none !important;
}
#chat .chat-head { display: flex; justify-content: space-between; font: 600 0.7rem/1 Fredoka, Mali, sans-serif; color: rgba(255, 248, 230, 0.85); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
#chat .chat-feed {
  max-height: 132px; overflow: hidden; display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px; border-radius: 10px; background: rgba(22, 28, 54, 0.42);
  font: 500 0.78rem/1.35 Mali, Fredoka, sans-serif; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
#chat.typing .chat-feed { background: rgba(22, 28, 54, 0.72); }
#chat .chat-line { overflow-wrap: anywhere; }
#chat .chat-line .who { color: #9fd8ff; font-weight: 700; }
#chat .chat-line.me .who { color: #ffe08a; }
#chat .chat-line .tag { font-weight: 700; }
#chat .chat-line.sys { color: #fff3c4; }
#chat .chat-line.sys .tag { color: #ffd36b; }
/* EXP gained (js/mmo.js MMO.xpLine): only in the ระบบ tab, the number green */
#chat:not([data-tab="sys"]) .chat-line.xp { display: none; }
#chat .chat-line.xp .xpn { color: #9be88a; }
#chat .chat-line.world { color: #ffd2a8; }
#chat .chat-line.world .tag { color: #ff9a4a; }
#chat .chat-line.quest { color: #c8f7c0; }
#chat .chat-line.quest .tag { color: #8be37b; }
#chat .chat-input {
  pointer-events: auto; width: 100%; padding: 6px 10px; border-radius: 10px;
  border: 2px solid rgba(255, 246, 216, 0.6); background: rgba(16, 20, 40, 0.88); color: #fff;
  font: 500 0.85rem Mali, Fredoka, sans-serif; user-select: text; -webkit-user-select: text;
}
#questbox {
  position: absolute; z-index: 1; left: 12px; top: 120px; width: 236px; pointer-events: auto !important; cursor: pointer;
  padding: 8px 11px 9px; border-radius: 14px; background: rgba(22, 28, 54, 0.9); border: 2px solid #c9a24a;
  box-shadow: 0 0 0 2px #2c2533, inset 0 0 0 1px rgba(255, 230, 160, 0.25), 0 4px 10px rgba(0, 0, 0, 0.35);
  font-family: Mali, Fredoka, sans-serif; color: #fff; display: flex; flex-direction: column; gap: 4px;
}
#questbox img { width: 22px; height: 22px; display: block; flex-shrink: 0; }
#questbox .q-head { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid rgba(201, 162, 74, 0.45); }
#questbox .q-head b { font-size: 0.95rem; color: #ffe7a6; }
#questbox .q-head span { margin-left: auto; font: 600 0.72rem Fredoka, sans-serif; color: #c9b88a; }
#questbox .q-title { font-weight: 700; font-size: 0.84rem; line-height: 1.2; color: #fff6dc; }
#questbox .q-goal { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #f3ecd6; }
#questbox .q-goal span { flex: 1; min-width: 0; }
#questbox .q-goal b { font: 700 0.8rem Fredoka, sans-serif; color: #ffffff; font-variant-numeric: tabular-nums; }
#questbox .q-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
#questbox .q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fcf6a, #c6f08a); }
#questbox .q-map { font: 600 0.7rem/1.2 Fredoka, Mali, sans-serif; color: #9fd8f0; }
/* ---------- world map: a parchment map built from the game's own UI pieces (cream card, wooden frame, buttons) ---------- */
#worldmap .wm-panel {
  width: min(1260px, 100%) !important; height: 100%; max-height: 880px; display: flex; flex-direction: column; gap: 8px;
  color: var(--ink); background: var(--cream); border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 0 6px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, 0.45); overflow: hidden;
}
.skinned #worldmap .wm-panel {
  background: none; border-radius: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  border: 26px solid transparent; border-image: var(--img-card) 64 fill / 26px stretch; padding: 0 4px;
}
#worldmap .panel-head h2 { color: var(--ink); font-size: 1.6rem; }
#worldmap .panel-head h2 small { color: #6b5a47; }
#worldmap .close-x { border: 3px solid var(--ink); color: var(--ink); background: #fff8e8; box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
#worldmap .close-x:hover { background: #ffffff; }
/* map tabs */
.wm-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; flex-shrink: 0; scrollbar-width: thin; scrollbar-color: #8a5a3c transparent; }
.wm-tab {
  flex: 1 1 0; min-width: 148px; display: flex; align-items: center; gap: 7px; padding: 5px 10px 7px 6px; cursor: pointer;
  border: 3px solid var(--ink); border-radius: 14px; background: #fff8e8; box-shadow: 0 3px 0 var(--ink); color: var(--ink); font: inherit; text-align: left;
}
.skinned .wm-tab { border: 0; box-shadow: none; background: var(--img-button) center / 100% 100% no-repeat; padding: 7px 12px 11px 9px; }
.wm-tab:hover { filter: brightness(1.04); transform: translateY(-1px); }
.wm-tab.sel { background: #7fb24a; color: #fff; }
.skinned .wm-tab.sel { background: var(--img-button-green) center / 100% 100% no-repeat; }
.wm-tab img, .wm-tab-img { flex-shrink: 0; width: 42px; height: 30px; border-radius: 8px; border: 2px solid var(--ink); object-fit: cover; display: block; background: #a3cd7b; }
.wm-tab-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.wm-tab-text b { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-tab-text small { font: 700 0.72rem Fredoka, Mali, sans-serif; color: #4b7a28; white-space: nowrap; }
.wm-tab.hard .wm-tab-text small { color: #b35a22; }
.wm-tab.sel .wm-tab-text small { color: #f2ffd9; }
/* map + side */
.wm-body { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); gap: 12px; }
.wm-pic {
  position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background: #efe3c6; border: 4px solid var(--ink); border-radius: 14px;
}
.skinned .wm-pic { border: 4px solid var(--ink); border-radius: 14px; background: #efe3c6; box-shadow: inset 0 0 0 3px #c9a46a, 0 3px 0 var(--ink); }
.wm-canvas { display: block; cursor: crosshair; max-width: 100%; border-radius: 6px; }
.wm-side { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.wm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wm-head b { font-family: var(--display); font-size: 1.3rem; line-height: 1.15; flex-basis: 100%; }
.wm-rec { font: 700 0.84rem Fredoka, Mali, sans-serif; color: #fff; background: #5f9a36; border: 2px solid var(--ink); border-radius: 999px; padding: 1px 10px; }
.wm-rec.hard { background: #c9682a; }
.wm-here { padding: 1px 10px; border-radius: 999px; background: #ff8fb4; color: #fff; border: 2px solid var(--ink); font: 700 0.76rem Mali, sans-serif; }
.wm-zones { list-style: none; margin: 2px 0 0; padding: 0; flex-basis: 100%; display: flex; flex-direction: column; gap: 1px; font-size: 0.82rem; color: #5a4636; }
.wm-zones span { font: 700 0.78rem Fredoka, Mali, sans-serif; color: #4b7a28; }
.wm-lists { flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #8a5a3c rgba(58, 42, 32, 0.12); }
.wm-sec { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 14px; background: rgba(138, 90, 60, 0.08); border: 2px solid rgba(58, 42, 32, 0.22); }
.wm-sec h4 { margin: 0 0 2px; font: 700 0.92rem Mali, sans-serif; color: #5a4636; }
.wm-sec h4 small { font-weight: 600; font-size: 0.72rem; color: #8a7560; }
.wm-mrow {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%;
  padding: 3px 6px 3px 3px; border: 2px solid rgba(58, 42, 32, 0.25); border-radius: 999px; background: #fff8e8;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.wm-mrow:hover { border-color: var(--mob); }
.wm-mrow img { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--mob); background: #fff; display: block; }
.wm-mrow.boss img, .wm-mrow.mini img { width: 40px; height: 40px; }
.wm-mrow.boss, .wm-mrow.mini { grid-template-columns: 40px minmax(0, 1fr) auto; }
.wm-mname { font-weight: 700; font-size: 0.84rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.wm-mlv { font: 800 0.76rem Fredoka, Mali, sans-serif; color: #fff; background: var(--mob); border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.wm-mrow.on { border-color: var(--ink); background: #fff; box-shadow: inset 0 0 0 3px var(--mob); }
.wm-mrow.off { opacity: 0.5; }
.wm-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
#worldmap .wm-actions .btn { width: 100%; min-height: 46px; font-size: 0.95rem; color: var(--ink); }
#worldmap .wm-actions .btn.primary { color: #fff; }
#worldmap .btn:disabled { opacity: 0.55; filter: grayscale(0.5); cursor: default; transform: none; }
#minimap-hit { position: absolute; z-index: 1; pointer-events: auto; padding: 0; border: 0; border-radius: 22px; background: transparent; }
#minimap-hit:hover, #minimap-hit:focus-visible { box-shadow: 0 0 0 3px rgba(255, 246, 216, 0.75), 0 0 18px rgba(127, 233, 255, 0.6); outline: none; }
@media (max-width: 760px) {
  .wm-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(200px, 1fr) auto; }
  .wm-side { max-height: 38vh; }
}
.name-row { display: flex; align-items: center; gap: 10px; font: 700 1rem Mali, sans-serif; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.name-row input { width: 200px; padding: 8px 12px; border-radius: 12px; border: 3px solid var(--ink); background: var(--cream); color: var(--ink); font: 700 1rem Mali, sans-serif; user-select: text; -webkit-user-select: text; }
@media (max-width: 700px) {
  #chat { width: min(300px, 70vw); bottom: 230px; }
  #chat .chat-feed { max-height: 84px; font-size: 0.7rem; }
  #questbox { width: 180px; }
}

/* ---------- character panel (C): the game's panel skin, wooden frames and item slots ---------- */
#charpanel .ci-panel { width: min(940px, 100%); }
.ci-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; }
.ci-card, .ci-statbox { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(12, 16, 34, 0.55); border: 2px solid rgba(201, 162, 74, 0.55); }
.skinned .ci-card, .skinned .ci-statbox { border: 18px solid transparent; border-image: var(--img-node) 64 fill / 18px stretch; border-radius: 0; background: none; padding: 4px 6px; }
.ci-hero-name { display: flex; align-items: center; gap: 8px; }
.ci-hero-name b { font-family: var(--display); font-size: 1.35rem; color: #fff6dc; }
.ci-hero-name span { font-size: 0.84rem; color: var(--cream-2); }
.ci-lv { margin-left: auto; font: 700 0.95rem Fredoka, sans-serif !important; color: var(--ink) !important; background: #f2d27a; border: 2px solid var(--ink); border-radius: 10px; padding: 1px 10px; }
.ci-stage { display: grid; grid-template-columns: 76px minmax(0, 1fr) 76px; gap: 8px; align-items: center; }
.ci-left, .ci-right { display: flex; flex-direction: column; gap: 10px; }
.ci-hero { width: 100%; height: auto; aspect-ratio: 9 / 10; border-radius: 14px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #e8c56a; display: block; }
.ci-slot { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 12px; background: #2b3352; border: 2px solid #c9a24a; }
.ci-slot { background: var(--img-slot-item, #2b3352) center / 100% 100% no-repeat; border: 0; }
.ci-slot img { width: 52px; height: 52px; margin-top: -10px; display: block; }
.ci-slot small { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font: 600 0.68rem Mali, sans-serif; color: #fff6dc; text-shadow: 0 1px 2px #000; }
.ci-slot.empty .ci-none { margin-top: -10px; font: 600 0.72rem Mali, sans-serif; color: rgba(246, 238, 219, 0.45); }
.ci-bars { display: flex; flex-direction: column; gap: 5px; }
.ci-bar { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 8px; font: 700 0.8rem Fredoka, sans-serif; }
.ci-bar i { height: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); border: 2px solid #2c2533; overflow: hidden; }
.ci-bar i b { display: block; height: 100%; border-radius: 4px; }
.ci-bar.hp i b { background: linear-gradient(#ff7b7b, #d93b48); }
.ci-bar.mp i b { background: linear-gradient(#7fb8ff, #3d6fe0); }
.ci-bar.xp i b { background: linear-gradient(#fff0a8, #e3b43c); }
.ci-bar em { font-style: normal; color: #fff6dc; font-variant-numeric: tabular-nums; }
.ci-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ci-head > b { font-family: var(--display); font-size: 1.25rem; color: #fff6dc; }
.ci-pts { font-size: 0.86rem; color: var(--cream-2); background: rgba(0, 0, 0, 0.35); border: 2px solid rgba(201, 162, 74, 0.6); border-radius: 999px; padding: 2px 12px; }
.ci-pts b { font: 700 1.05rem Fredoka, sans-serif; color: #ffe27a; }
.ci-stat-list { display: flex; flex-direction: column; gap: 6px; }
.ci-stat { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 74, 0.35); }
.ci-stat img { width: 34px; height: 34px; display: block; }
.ci-sname { display: flex; flex-direction: column; line-height: 1.1; }
.ci-sname b { font: 700 1rem Fredoka, sans-serif; color: #fff6dc; }
.ci-sname small { font-size: 0.72rem; color: var(--cream-2); }
.ci-sval { font: 700 1.15rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ci-sval small { font-size: 0.72rem; color: #9be37b; margin-left: 4px; }
.ci-plus {
  width: 38px; height: 34px; padding: 0 0 4px; border: 0; color: #fff; font: 700 1.3rem Fredoka, sans-serif;
  background: #6fae3e; border-radius: 10px; box-shadow: 0 3px 0 #2c2533;
}
.skinned .ci-plus { background: var(--img-button-green) center / 100% 100% no-repeat; box-shadow: none; }
.ci-plus:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.ci-plus:disabled { filter: grayscale(1) brightness(0.7); opacity: 0.5; cursor: default; }
.ci-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ci-hint { font-size: 0.74rem; color: var(--cream-2); }
#charpanel .ci-reset { min-height: 40px; font-size: 0.86rem; padding: 0 1.2em 5px; }
#charpanel .ci-reset:disabled { opacity: 0.5; filter: grayscale(0.6); cursor: default; }
.ci-derived { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ci-dcell { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 74, 0.35); font-size: 0.82rem; color: var(--cream-2); }
.ci-dcell img { width: 26px; height: 26px; display: block; }
.ci-dcell b { font: 700 0.98rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.ci-dcell b small { font-size: 0.7rem; color: #9fd8f0; }
#portrait-hit { position: absolute; z-index: 1; pointer-events: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
#portrait-hit:hover, #portrait-hit:focus-visible { box-shadow: 0 0 0 3px rgba(255, 231, 166, 0.85), 0 0 16px rgba(255, 210, 110, 0.6); outline: none; }
@media (max-width: 760px) {
  .ci-body { grid-template-columns: minmax(0, 1fr); }
  .ci-stage { grid-template-columns: 64px minmax(0, 1fr) 64px; }
  .ci-slot { width: 64px; height: 64px; }
  .ci-slot img { width: 42px; height: 42px; }
}

/* the soft flash while a new map is put together */
#warp-flash { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 55%, rgba(220, 250, 255, 0.95), rgba(150, 220, 240, 0.85)); }
#warp-flash.go { animation: warp-flash 0.9s ease-out; }
@keyframes warp-flash { 0% { opacity: 1; } 35% { opacity: 0.9; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #warp-flash.go { animation-duration: 0.3s; } }

/* map editor: object / floor modes, palette groups, floor swatches */
.ed-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-mode { min-height: 38px; border-radius: 10px; border: 2px solid rgba(246, 238, 219, 0.25); background: rgba(10, 14, 30, 0.35); color: var(--cream); font: inherit; font-weight: 600; cursor: pointer; }
.ed-mode[aria-selected="true"] { background: var(--gold); border-color: var(--ink); color: var(--ink); }
.ed-panel:not(.mode-floor) .ed-floor { display: none !important; }
.ed-panel.mode-floor .ed-floor { display: block; }
.ed-panel.mode-floor .ed-objonly, .ed-panel.mode-floor .ed-sel { display: none !important; }
.ed-floor h4 { margin: 10px 0 6px; font-size: 0.8rem; color: var(--cream-2); font-weight: 600; }
.ed-floors { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.ed-swatch canvas { width: 46px; height: 46px; border-radius: 8px; border: 2px solid rgba(28, 20, 36, 0.6); }
.ed-swatch.on { border-color: var(--gold); background: rgba(242, 201, 76, 0.25); }
.ed-brush { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 0.8rem; }
.ed-brush input { flex: 1; min-width: 0; }
.ed-brush output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.ed-cats { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }
.ed-chip { padding: 3px 9px; border-radius: 999px; border: 1.5px solid rgba(246, 238, 219, 0.3); background: rgba(10, 14, 30, 0.35); color: var(--cream); font: inherit; font-size: 0.72rem; cursor: pointer; }
.ed-chip.on { background: var(--leaf); border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* class cards use the cream card art in every theme, so their text stays dark ink (night themes set light text) */
.skinned .class-card { color: var(--ink); }
.skinned .class-card h3 small { color: #7a5a3a; }

/* skill tree: one tab per class line, the page lists its actives, ultimate and passives */
.tree-tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tree-tab {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 10px;
  border: 2px solid #3a4470; background: #232b4d; color: #dfe6fb; font-family: var(--thai); font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.tree-tab canvas { width: 26px; height: 26px; }
.tree-tab .tt-count { font-family: var(--display); font-size: 0.72rem; color: #9fb0dd; }
.tree-tab.mine { border-color: var(--gold); }
.tree-tab.on { background: linear-gradient(180deg, #3f4c86, #2b3561); border-color: #e9eef7; color: #fff; }
.tree-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tree-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 22px; padding: 12px 16px; align-items: start; }
.tp-head { grid-column: 1 / -1; }
.tp-head h3 { margin: 0; font-family: var(--display); font-size: 1.35rem; color: #fff3da; }
.tp-head h3 small { font-family: var(--thai); font-size: 0.7em; color: var(--ice); margin-left: 8px; font-weight: 600; }
.tp-head p { margin: 2px 0 0; color: #cfd8f3; font-size: 0.88rem; }
.tp-group { display: flex; flex-direction: column; gap: 6px; }
.tp-passive { grid-column: 1 / -1; }
.tp-title { font-family: var(--thai); font-weight: 700; color: #fff3da; font-size: 0.95rem; }
.tp-title small { font-weight: 500; color: #9fb0dd; font-size: 0.8em; margin-left: 8px; }
.tp-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; }
.sk-cell .sk { width: 64px; height: 64px; }
.sk-cell .sk canvas { width: 50px; height: 50px; }
.sk-cell.ult .sk { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.35); }
.sk .lock-tag { position: absolute; bottom: -6px; right: -6px; font-size: 0.7rem; }
.sk.locked canvas { filter: grayscale(0.85) brightness(0.75); }
.sk-cost { font-family: var(--display); font-weight: 600; font-size: 0.8rem; color: var(--cream-2); }
.sk-cost.short { color: #ff9a9a; }
.sk-name { font-size: 0.72rem; color: #cfd8f3; text-align: center; line-height: 1.2; }
.eq.ult { border-color: var(--gold); }
.tbtn.ult { width: 74px; height: 74px; border-color: var(--gold); }
.tree-wrap { background: rgba(10, 14, 30, 0.32); }
.skill-mini .ult-line canvas { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.45); }
.skill-mini .more-line { font-size: 0.78rem; color: #7a5a3a; padding-left: 2px; }

/* ---------- auto-play settings ---------- */
.auto-cfg-btn {
  position: absolute; z-index: 2; padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 2px solid #2c2533; background: var(--cream); color: var(--ink); line-height: 1;
  box-shadow: 0 2px 0 #2c2533;
}
.auto-cfg-btn:hover { background: var(--gold); }
#autocfg .panel { width: min(1100px, 100%); }
/* ปรับแต่งตัวละคร (js/avatar_ps.js): the preview on the left, the choices on the right */
#avatarps .panel { width: min(1100px, 100%); height: min(760px, 100%); display: flex; flex-direction: column; }
.av-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 14px; min-height: 0; flex: 1; }
.av-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.av-stage { width: 100%; flex: 1; min-height: 260px; border-radius: 16px; border: 1px solid rgba(191, 230, 255, 0.15);
  background: radial-gradient(ellipse at 50% 86%, rgba(246, 238, 219, 0.16), rgba(10, 14, 30, 0.35) 70%); }
.av-on { display: flex; align-items: center; gap: 8px; color: var(--cream); font: 700 1rem var(--thai); cursor: pointer; }
.av-on input { width: 20px; height: 20px; accent-color: var(--gold); }
.av-on small { font-weight: 500; color: var(--cream-2); }
.av-note { margin: 0; color: var(--cream-2); font-size: 0.85rem; }
.av-right { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.av-tabs { display: flex; gap: 6px; }
.av-tabs .btn { flex: 1; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.av-tabs .btn[data-tab="start"] { flex: 2.2; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; overflow-y: auto; min-height: 0; padding-right: 4px; align-content: start; }
.av-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; border-radius: 12px;
  border: 2px solid rgba(191, 230, 255, 0.2); background: var(--navy-2); color: var(--cream); font: 600 0.78rem var(--thai); line-height: 1.25; }
.av-tile img, .av-tile canvas { width: 100%; aspect-ratio: 1; object-fit: contain; }
.av-tile:hover { border-color: rgba(255, 210, 120, 0.6); }
.av-tile.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.3); }
.av-grid.big { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.av-sec { grid-column: 1 / -1; margin: 6px 0 0; font: 700 0.95rem var(--thai); color: var(--gold); }
.av-swatches { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.av-sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); cursor: pointer; padding: 0; }
.av-sw:hover { border-color: rgba(255, 210, 120, 0.6); }
.av-sw.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 210, 120, 0.4); }
.av-sw.orig { background: var(--navy-2); color: var(--cream); font: 700 0.7rem var(--thai); }
.av-grid.big .av-tile { font-size: 0.95rem; }
.av-grid.big .av-tile canvas { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .av-body { grid-template-columns: 1fr; overflow-y: auto; } .av-stage { min-height: 220px; } }
#avatarps.av-making .ac-foot { align-items: center; flex-wrap: wrap; }
#avatarps.av-making .av-name input { width: 180px; }
#avatarps.av-making .av-err { margin: 0 auto 0 0; }
.ac-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; overflow-y: auto; min-height: 0; }
.ac-mobs { grid-row: span 2; }
.ac-sec { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(246, 238, 219, 0.06); border: 1px solid rgba(191, 230, 255, 0.15); }
.ac-sec h3 { margin: 0; font: 700 1.05rem var(--thai); color: var(--cream); }
.ac-sec h3 small { margin-left: 8px; font-weight: 500; font-size: 0.8em; color: var(--cream-2); }
.ac-mob-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.ac-mob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.ac-mob {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; cursor: pointer;
  border-radius: 12px; border: 2px solid rgba(191, 230, 255, 0.2); background: var(--navy-2); color: var(--cream);
  font: 600 0.8rem var(--thai); text-align: center; opacity: 0.55; filter: grayscale(0.8);
}
.ac-mob.on { opacity: 1; filter: none; border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf) inset; }
.ac-mob.far.on { border-color: #e0a04a; box-shadow: 0 0 0 2px #e0a04a inset; }
.ac-mob canvas { width: 60px; height: 60px; }
.ac-mname small { display: block; font-size: 0.85em; color: var(--cream-2); font-weight: 500; }
.ac-check { position: absolute; top: 4px; right: 6px; font: 700 0.95rem var(--display); color: var(--leaf); }
.ac-empty { margin: 0; color: var(--cream-2); font: 0.9rem var(--thai); }
.ac-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ac-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--cream); font: 600 0.92rem var(--thai); }
.ac-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-switch { flex: none; width: 40px; height: 22px; border-radius: 999px; background: #4a4f68; position: relative; transition: background 0.15s; border: 2px solid #1a1f38; }
.ac-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); transition: left 0.15s; }
.ac-toggle input:checked + .ac-switch { background: var(--leaf-dark); }
.ac-toggle input:checked + .ac-switch::after { left: 19px; }
.ac-toggle input:focus-visible + .ac-switch { outline: 3px solid var(--gold); outline-offset: 2px; }
.ac-tlabel small { display: block; font-weight: 500; font-size: 0.8em; color: var(--cream-2); }
.ac-skill-list { display: flex; flex-direction: column; gap: 6px; }
.ac-skill { display: flex; align-items: center; gap: 10px; color: var(--cream); font: 600 0.92rem var(--thai); }
.ac-skill canvas { width: 40px; height: 40px; border-radius: 9px; background: var(--navy); border: 2px solid #0c1022; flex: none; }
.ac-skill.empty { opacity: 0.5; }
.ac-key { flex: none; min-width: 26px; padding: 1px 6px; border-radius: 6px; background: var(--cream); color: var(--ink); font: 700 0.8rem var(--display); text-align: center; }
.ac-ult { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(191, 230, 255, 0.15); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* (2026-10-18: the chosen chip gold - ult use, the level limit; a − / + at its end greyed) */
.ac-chips .chip.on { background: var(--gold); border-color: var(--gold); color: #24170a; -webkit-text-fill-color: #24170a; font-weight: 700; }
.ac-chips .chip:disabled { opacity: 0.4; cursor: default; }
.ac-lvcap .ac-step { min-width: 34px; font-weight: 700; }
.ac-slider { display: flex; flex-direction: column; gap: 4px; color: var(--cream); font: 600 0.9rem var(--thai); }
.ac-slabel { display: flex; justify-content: space-between; gap: 10px; }
.ac-slabel b { color: var(--gold); font-weight: 700; }
.ac-slider input[type=range] { width: 100%; accent-color: var(--gold); }
.ac-note { margin: 0; font: 0.8rem/1.4 var(--thai); color: var(--cream-2); }
.ac-foot { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 760px) { .ac-body { grid-template-columns: 1fr; } .ac-mobs { grid-row: auto; } }

/* ---------- online: sign-in box on the title, chat channels ---------- */
.login-box {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: min(380px, 100%);
  padding: 16px 18px 14px; border: 3px solid var(--ink); border-radius: 18px;
  background: linear-gradient(180deg, #fbf4e3 0%, var(--cream) 70%, var(--cream-2) 100%); color: var(--ink);
  box-shadow: 0 5px 0 var(--ink); font-family: var(--thai);
}
.login-title { font: 700 1.15rem var(--display), Mali, sans-serif; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.login-title small { font: 600 0.78rem Mali, sans-serif; color: #3f7a2f; }
.login-box label { display: grid; grid-template-columns: 5.2em 1fr; align-items: center; gap: 8px; font: 700 0.95rem Mali, sans-serif; text-align: left; }
.login-box input {
  min-width: 0; padding: 8px 12px; border-radius: 12px; border: 3px solid var(--ink); background: #fffdf6; color: var(--ink);
  font: 700 1rem Mali, sans-serif; user-select: text; -webkit-user-select: text;
}
.login-box input:focus-visible { outline: 3px solid var(--leaf); outline-offset: 1px; }
.login-err, .name-err { min-height: 1.2em; font: 700 0.85rem Mali, sans-serif; color: #b8322a; }
.name-err { color: #ffd2c8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); margin-top: -10px; }
.login-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.login-note { font-size: 0.75rem; color: #5b4a3c; }
.login-wait { margin: 6px 0; font-weight: 700; }
.login-acc { font-size: 0.92rem; }
.login-box .title-actions { margin-top: 0; }
.link-btn { border: 0; background: none; padding: 0 4px; color: #2f6fb8; font: 700 0.85rem Mali, sans-serif; text-decoration: underline; }
.btn.warn { background: #ffb59c; }
#chat .chat-line.all { color: #ffe9b8; }
#chat .chat-line.all .tag { color: #ffb44a; }
#chat .chat-line.whisper { color: #ffc6ec; }
#chat .chat-line.whisper .who { color: #ff8fd8; }

/* ---------- online: party frames, player menu, invite / duel questions, PvP switch, duel bar ---------- */
#chat .chat-line.party { color: #bfe9ff; }
#chat .chat-line.party .tag { color: #6cc8ff; }
#party {
  position: absolute; left: 12px; z-index: 2; width: 210px; display: flex; flex-direction: column; gap: 4px;
  font-family: var(--thai); pointer-events: auto;
}
#party .pt-head {
  display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; border-radius: 10px;
  background: rgba(22, 28, 54, 0.78); color: #fff3d0; font-size: 0.78rem;
}
#party .pt-leave { border: 0; border-radius: 8px; padding: 1px 8px; background: rgba(255, 140, 120, 0.25); color: #ffd6cc; font: 700 0.72rem Mali, sans-serif; }
#party .pt-leave:hover { background: rgba(255, 140, 120, 0.5); }
#party .pt-row {
  display: grid; grid-template-columns: 1fr; gap: 3px; width: 100%; padding: 5px 8px; text-align: left;
  border: 2px solid rgba(143, 216, 255, 0.45); border-radius: 10px; background: rgba(22, 28, 54, 0.78); color: #e9f4ff;
}
#party .pt-row:hover { border-color: #8fd8ff; background: rgba(36, 48, 88, 0.9); }
#party .pt-row.dead { opacity: 0.55; }
#party .pt-name { display: flex; align-items: baseline; gap: 6px; font: 700 0.82rem Mali, sans-serif; overflow: hidden; white-space: nowrap; }
#party .pt-name small { font-weight: 600; font-size: 0.68rem; color: #b9c8e8; }
#party .pt-crown { font-style: normal; color: #ffd24a; }
#party .pt-hp { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; }
#party .pt-hp i { display: block; height: 100%; background: linear-gradient(90deg, #5fd36a, #a6f08a); }
#party .pt-map { font-size: 0.66rem; color: #ffd9a0; }
#player-menu {
  position: fixed; z-index: 30; min-width: 170px; display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border: 3px solid var(--ink); border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-family: var(--thai);
}
#player-menu .pm-head { display: flex; flex-direction: column; padding: 0 4px 4px; border-bottom: 2px dashed rgba(58, 42, 32, 0.25); }
#player-menu .pm-head b { font: 700 1rem Mali, sans-serif; }
#player-menu .pm-head span { font-size: 0.75rem; color: #6b5442; }
#player-menu .pm-pvp { font-style: normal; color: #c8382a; font-weight: 700; }
#player-menu button { border: 0; border-radius: 10px; padding: 7px 10px; text-align: left; background: transparent; color: var(--ink); font: 700 0.9rem Mali, sans-serif; }
#player-menu button:hover, #player-menu button:focus-visible { background: var(--leaf); outline: none; }
#social-prompt {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%); z-index: 25; width: min(380px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 3px solid var(--ink); border-radius: 16px;
  background: var(--cream); color: var(--ink); box-shadow: 0 5px 0 var(--ink); font-family: var(--thai); text-align: center;
}
#social-prompt .sp-text { font: 600 0.95rem Mali, sans-serif; }
#social-prompt .sp-btns { display: flex; gap: 10px; justify-content: center; }
#social-prompt .sp-time { height: 5px; border-radius: 3px; background: rgba(58, 42, 32, 0.15); overflow: hidden; }
#social-prompt .sp-time i { display: block; height: 100%; width: 100%; background: var(--leaf); transition: width 0.25s linear; }
#pvp-btn {
  position: absolute; z-index: 2; padding: 0; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #2c2533; background: var(--cream); color: #6b2f2a; font: 800 10px Fredoka, sans-serif; box-shadow: 0 2px 0 #2c2533;
}
#pvp-btn:hover { background: #ffd2c4; }
#pvp-btn.on { background: #e5483a; color: #fff6ee; box-shadow: 0 2px 0 #2c2533, 0 0 12px rgba(255, 90, 70, 0.8); }
#duel-bar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; border-radius: 999px; border: 3px solid #2c1a1a; background: rgba(120, 30, 30, 0.88); color: #fff2e0;
  font: 700 0.95rem Mali, sans-serif; box-shadow: 0 3px 0 #2c1a1a; pointer-events: none;
}
#duel-bar .dl-count { font: 800 1.5rem Fredoka, sans-serif; color: #ffd24a; }

/* ---------- economy: bag / shop / smithy / workshop / salvage / auction (economy.js) ---------- */
#chat .chat-line.loot { color: #ffe6a6; }
#chat .chat-line.loot .tag { color: #ffc24a; }
.ci-slot[class*=" g"] { box-shadow: 0 0 0 2px var(--gc, transparent) inset; border-radius: 14px; }
.ci-plus-n { position: absolute; top: 4px; left: 6px; font: 800 0.8rem Fredoka, sans-serif; color: #ffe27a; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#eco .eco-panel { width: min(1100px, 100%); height: min(720px, 100%); }
.eco-panel .panel-head { flex-wrap: nowrap; }
.eco-gold { margin-left: auto; }
.eco-goldchip { display: inline-flex; align-items: center; gap: 4px; font: 700 0.95rem Fredoka, Mali, sans-serif; color: #ffd95a; white-space: nowrap; }
.eco-goldchip img { width: 22px; height: 22px; }
.eco-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.eco-tab { padding: 6px 14px; border-radius: 999px; border: 2px solid rgba(246, 238, 219, 0.35); background: rgba(246, 238, 219, 0.06); color: var(--cream); font: 700 0.92rem var(--thai); }
.eco-tab:hover { background: rgba(246, 238, 219, 0.16); }
.eco-tab.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.eco-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; }
.eco-main, .eco-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(246, 238, 219, 0.05); border: 1px solid rgba(191, 230, 255, 0.14); }
.eco-gear { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; padding-bottom: 8px; border-bottom: 1px dashed rgba(246, 238, 219, 0.2); }
.eco-gslot { display: flex; flex-direction: column; align-items: center; gap: 2px; font: 600 0.66rem var(--thai); color: var(--cream-2); }
.eco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; }
.eco-cell {
  position: relative; aspect-ratio: 1; width: 100%; min-width: 44px; padding: 3px; display: grid; place-items: center;
  border-radius: 10px; border: 2px solid rgba(246, 238, 219, 0.18); background: rgba(10, 14, 30, 0.55);
}
.eco-cell img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.eco-cell.empty { border-style: dashed; border-color: rgba(246, 238, 219, 0.1); background: rgba(10, 14, 30, 0.3); }
button.eco-cell:hover { filter: brightness(1.15); }
.eco-cell.g0 { border-color: #a9a395; }
.eco-cell.g1 { border-color: #7fe07a; background: rgba(60, 120, 50, 0.3); }
.eco-cell.g2 { border-color: #5fb4ff; background: rgba(40, 90, 160, 0.32); }
.eco-cell.g3 { border-color: #c27bff; background: rgba(110, 50, 160, 0.34); }
.eco-cell.g4 { border-color: #ffb340; background: rgba(160, 100, 20, 0.36); box-shadow: 0 0 8px rgba(255, 179, 64, 0.5); }
.eco-cell.g5 { border-color: #ff5a6a; background: rgba(160, 30, 50, 0.38); box-shadow: 0 0 10px rgba(255, 90, 106, 0.6); }
.eco-cell.mat { border-color: rgba(246, 238, 219, 0.3); }
.eco-cell.sel { outline: 3px solid var(--cream); outline-offset: 1px; }
.eco-cell.worn::after { content: ''; position: absolute; inset: -3px; border: 2px solid var(--gold); border-radius: 12px; pointer-events: none; }
.eco-cell.picked::after { content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; background: rgba(143, 207, 106, 0.45); color: #fff; font: 800 1.4rem Fredoka, sans-serif; text-shadow: 0 1px 3px #000; }
.eco-cell .plus { position: absolute; top: 1px; left: 3px; font: 800 0.72rem Fredoka, sans-serif; color: #ffe27a; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.eco-cell .cnt { position: absolute; bottom: 1px; right: 3px; font: 700 0.7rem Fredoka, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.eco-cell .lk { position: absolute; top: 0; right: 1px; font-size: 0.6rem; font-style: normal; }
.eco-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 0.82rem var(--thai); color: var(--cream-2); }
.btn.small { padding: 5px 12px; font-size: 0.85rem; box-shadow: 0 2px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.eco-hint { color: var(--cream-2); font: 500 0.9rem var(--thai); line-height: 1.55; padding: 6px; }
.eco-note { font: 500 0.78rem var(--thai); color: var(--cream-2); }
.eco-ihead { display: flex; gap: 10px; align-items: center; }
.eco-ihead img { width: 64px; height: 64px; object-fit: contain; border-radius: 12px; background: rgba(10, 14, 30, 0.55); padding: 4px; }
.eco-ihead div { display: flex; flex-direction: column; gap: 2px; }
.eco-ihead b { font: 700 1.08rem var(--thai); }
.eco-ihead small { font: 500 0.78rem var(--thai); color: var(--cream-2); }
.eco-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.eco-stats li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(10, 14, 30, 0.35); font: 600 0.88rem var(--thai); }
.eco-stats li span { flex: 1; color: var(--cream-2); }
.eco-stats li b.short { color: #ff9a9a; }
.eco-stats em { font-style: normal; font-size: 0.78rem; }
.eco-stats em.up { color: #8be37b; }
.eco-stats em.down { color: #ff8a8a; }
.eco-desc { margin: 0; font: 500 0.88rem var(--thai); color: var(--cream-2); }
.eco-price { display: flex; align-items: center; gap: 6px; font: 600 0.85rem var(--thai); color: var(--cream-2); }
.eco-price img { width: 20px; height: 20px; }
.eco-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.eco-listbox { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(242, 201, 76, 0.08); border: 1px solid rgba(242, 201, 76, 0.35); font: 600 0.85rem var(--thai); }
.eco-listbox div { display: flex; gap: 6px; }
.eco-listbox input, .eco-mgrade { min-width: 0; flex: 1; padding: 6px 10px; border-radius: 10px; border: 2px solid rgba(246, 238, 219, 0.4); background: rgba(10, 14, 30, 0.6); color: var(--cream); font: 700 0.95rem Fredoka, Mali, sans-serif; user-select: text; }
.eco-listbox small { color: var(--cream-2); font-weight: 500; }
.eco-rows { display: flex; flex-direction: column; gap: 6px; }
.eco-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; text-align: left; border-radius: 12px; border: 2px solid rgba(246, 238, 219, 0.12); background: rgba(10, 14, 30, 0.4); color: var(--cream); }
.eco-row > img { width: 40px; height: 40px; object-fit: contain; }
.eco-row .eco-cell { width: 44px; min-width: 44px; }
button.eco-row:hover { border-color: rgba(246, 238, 219, 0.4); }
.eco-row.sel { border-color: var(--gold); background: rgba(242, 201, 76, 0.12); }
.eco-row.no { opacity: 0.6; }
.eco-rname { flex: 1; display: flex; flex-direction: column; font: 700 0.92rem var(--thai); min-width: 0; }
.eco-rname small { font: 500 0.75rem var(--thai); color: var(--cream-2); }
.eco-enh { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(10, 14, 30, 0.45); }
.eco-enh-to { font: 700 1.3rem Fredoka, sans-serif; text-align: center; color: var(--cream-2); }
.eco-enh-to b { color: #ffe27a; }
.eco-rate { font: 600 0.88rem var(--thai); text-align: center; }
.eco-rate b { color: #8be37b; font-size: 1.05rem; }
.eco-cost { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 0.88rem var(--thai); }
.eco-cost span { display: inline-flex; align-items: center; gap: 4px; }
.eco-cost img { width: 26px; height: 26px; }
.eco-scroll { display: flex; align-items: center; gap: 6px; font: 600 0.85rem var(--thai); }
.eco-enh-go { font-size: 1.15rem; }
.eco-enh-res { text-align: center; font: 800 1.2rem Fredoka, Mali, sans-serif; padding: 6px; border-radius: 10px; animation: ecoPop 0.4s ease-out; }
.eco-enh-res.ok { color: #ffe27a; background: rgba(255, 210, 74, 0.15); }
.eco-enh-res.fail { color: #d8dbe8; background: rgba(200, 200, 220, 0.1); }
.eco-enh-res.down { color: #ff8a8a; background: rgba(255, 90, 90, 0.12); }
@keyframes ecoPop { from { transform: scale(1.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.eco-fuse { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px dashed rgba(194, 123, 255, 0.5); }
.eco-fuse b { font: 700 0.95rem var(--thai); }
.eco-fuse small { font: 500 0.78rem var(--thai); color: var(--cream-2); }
.eco-filter { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.eco-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(246, 238, 219, 0.3); background: transparent; color: var(--cream); font: 600 0.8rem var(--thai); }
.eco-chip.on { background: var(--cream); color: var(--ink); }
/* the market's "ค้นหา: <item> ✕" chip (an item card's "หาได้จาก › ตลาดกลาง", 2026-10-18) */
.eco-filter .eco-chip.mk-qb { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 4px; }
.eco-filter .eco-chip.mk-qb img { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.eco-mgrade { flex: 0 1 auto; font: 600 0.82rem var(--thai); padding: 4px 8px; }
.eco-mine { display: flex; flex-direction: column; gap: 5px; margin-top: auto; padding-top: 8px; border-top: 1px dashed rgba(246, 238, 219, 0.2); font: 600 0.85rem var(--thai); }
.eco-mrow { display: flex; align-items: center; gap: 8px; }
.eco-mrow span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eco-hud { position: absolute; z-index: 2; display: flex; align-items: center; gap: calc(6px * var(--u, 1)); }
#eco-hud .eh-btn { width: calc(44px * var(--u, 1)); height: calc(44px * var(--u, 1)); padding: 0; display: grid; place-items: center; border-radius: 50%; border: 2px solid #2c2533; background: var(--cream); box-shadow: 0 2px 0 #2c2533; }
#eco-hud .eh-btn:hover { background: var(--gold); }
#eco-hud .eh-btn img { width: 80%; height: 80%; }
#eco-hud .eh-gold { order: -1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: rgba(22, 28, 54, 0.78); font: 700 calc(14px * var(--u, 1)) Fredoka, sans-serif; color: #ffd95a; }
#eco-hud .eh-gold img { width: calc(22px * var(--u, 1)); height: calc(22px * var(--u, 1)); }
@media (max-width: 760px) {
  .eco-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); }
  .eco-gear { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the night theme lightens button text; these panels sit on light button images, so keep it dark */
#eco .btn, #social-prompt .btn, .login-box .btn { color: var(--ink); }
#eco .btn.primary, #social-prompt .btn.primary, .login-box .btn.primary { color: #fff; }
.skinned .btn.small { min-height: 38px; padding: 0 1.1em 4px; font-size: 0.85rem; }

/* ---------- MMO content panel (content.js): dailies, field boss, dungeon, tower, guild, pets, mounts, collections ---------- */
#content .btn { color: var(--ink); }
#content .btn.primary { color: #fff; }
#chat .chat-line.guild { color: #b6f5c9; }
#chat .chat-line.guild .tag { color: #6fe39a; }
.ct-daily.done { border-color: rgba(143, 207, 106, 0.7); }
.ct-daily.got { opacity: 0.6; }
.ct-bar { display: inline-block; width: 120px; height: 7px; margin-right: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); overflow: hidden; vertical-align: middle; }
.ct-bar b { display: block; height: 100%; background: linear-gradient(90deg, #8fcf6a, #d8f59a); }
.ct-hero .ct-bar { width: 100%; margin-top: 6px; }
.ct-rw { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; max-width: 46%; }
.ct-rw .eco-goldchip, .ct-bonus .eco-goldchip { font-size: 0.78rem; color: #fff1c7; }
.ct-rw .eco-goldchip img, .ct-bonus .eco-goldchip img { width: 20px; height: 20px; }
.ct-ok { font: 700 0.85rem var(--thai); color: #8be37b; white-space: nowrap; }
.ct-live { color: #ff8a7a; }
.ct-bonus { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(242, 201, 76, 0.08); border: 1px solid rgba(242, 201, 76, 0.35); font: 600 0.9rem var(--thai); }
.ct-bonus div { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ct-hero { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(10, 14, 30, 0.45); }
.ct-hero img { width: 72px; height: 72px; object-fit: contain; }
.ct-hero div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ct-hero b { font: 700 1.1rem var(--thai); }
.ct-hero small { font: 500 0.8rem var(--thai); color: var(--cream-2); line-height: 1.45; }
.ct-rank { width: 1.6em; text-align: center; color: var(--gold); }
.ct-notice { padding: 8px 10px; border-radius: 10px; background: rgba(246, 238, 219, 0.08); font: 500 0.88rem var(--thai); }
/* guild donations: 3 kinds, 3 a day (2026-10-18, js/content.js guild tab) */
.ct-don > b { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ct-donleft { padding: 1px 8px; border-radius: 999px; background: rgba(143, 207, 106, 0.22); color: #c6f08a; font: 700 0.74rem var(--thai); }
.ct-donleft.none { background: rgba(255, 120, 100, 0.2); color: #ffb3a3; }
.ct-donrow { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 9px; background: rgba(246, 238, 219, 0.06); }
.ct-donrow img { width: 30px; height: 30px; object-fit: contain; cursor: pointer; flex: none; }
.ct-donrow span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-donrow span b { font: 700 0.86rem var(--thai); }
.ct-donrow span small { opacity: 0.8; font-size: 0.72rem; }
.ct-mem .ct-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b6f80; flex: none; }
.ct-mem.on .ct-dot { background: #6fe39a; box-shadow: 0 0 6px #6fe39a; }
.ct-mem small { color: var(--cream-2); font-weight: 500; }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ct-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 14px; border: 2px solid var(--gc, rgba(246, 238, 219, 0.2)); background: rgba(10, 14, 30, 0.45); color: var(--cream); font: 700 0.85rem var(--thai); text-align: center; }
.ct-card img { width: 100%; height: 70px; object-fit: contain; }
.ct-card small { font: 500 0.72rem var(--thai); color: var(--cream-2); }
.ct-card.on { outline: 3px solid var(--gold); outline-offset: 1px; }
.ct-card.locked img { filter: grayscale(0.85) brightness(0.7); }
.ct-from { color: #ffd9a0 !important; }
.ct-coll { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(10, 14, 30, 0.4); border: 1px solid rgba(246, 238, 219, 0.12); }
.ct-coll.done { border-color: var(--gold); background: rgba(242, 201, 76, 0.1); }
.ct-coll-h { display: flex; justify-content: space-between; gap: 8px; font: 700 0.9rem var(--thai); }
.ct-coll-h span { font: 600 0.78rem var(--thai); color: #8be37b; }
.ct-coll-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ct-coll-row .eco-cell { width: 52px; min-width: 52px; }
.ct-coll-row .eco-cell:not(.picked) img { filter: grayscale(0.7) brightness(0.75); }
.ct-coll-row .eco-cell.ct-can { box-shadow: 0 0 0 2px #8be37b, 0 0 10px rgba(139, 227, 123, 0.7); }
.ct-coll-row .eco-cell.ct-can img { filter: none; }

/* the boss menu (the activity book's boss tab, js/content.js bossList): every field boss on the left page, the picked one on the right */
.bm-list { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.bm-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer;
  background: rgba(127, 110, 80, 0.12); box-shadow: inset 0 0 0 1px rgba(160, 128, 70, 0.28); }
.bm-row:hover, .bm-row:focus-visible { background: rgba(217, 164, 67, 0.2); outline: none; }
.bm-row.on { background: rgba(217, 164, 67, 0.3); box-shadow: inset 0 0 0 2px #c9963a; }
.bm-row.live { box-shadow: inset 0 0 0 2px #d0473a; }
.bm-pic { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: rgba(30, 20, 14, 0.55); }
.bm-nm, .bm-when { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bm-nm b { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-nm small, .bm-when small { font-size: 0.74rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-when { align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
.bm-when b { white-space: nowrap; }
/* a map boss in its 2-hour rest (js/content.js bmRest): "บอสแมพเกิดอีก 1:42:10" */
.bm-rest { font-style: normal; font-size: 0.74rem; font-weight: 700; color: #ff9a7a; white-space: nowrap; font-variant-numeric: tabular-nums; }   /* (light book skins: css/booklight.css) */
.bm-up { font-style: normal; font-size: 0.74rem; font-weight: 700; color: #8fe07f; white-space: nowrap; }
/* the next awakened field boss (none out): "บอสสนามตัวถัดไป: สุ่มแมพ · อีก 3:42:10" */
.bm-next { margin: 4px 0 6px; padding: 5px 10px; border-radius: 8px; background: rgba(255, 120, 90, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 140, 110, 0.35); color: #ffc0a8; font-weight: 700; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.bm-head { display: flex; gap: 12px; align-items: center; }
.bm-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-head .bm-when { align-items: flex-start; text-align: left; }
.bm-head b { font-size: 1.05rem; }
.bm-big { width: 92px; height: 92px; flex: none; object-fit: contain; border-radius: 12px; background: rgba(30, 20, 14, 0.6); box-shadow: inset 0 0 0 2px #c9963a; }
.bm-go { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.bm-h { margin: 10px 0 4px; font-size: 0.9rem; }
.bm-h small { font-weight: 500; opacity: 0.75; margin-left: 4px; }
.bm-rw li b { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.bm-rw .eco-goldchip { cursor: pointer; }
.bm-rw .bm-gear { cursor: help; }
.bm-rw .bm-gear i { font-style: normal; font-weight: 800; margin: 0 2px; }
.bm-rw li span:first-child { flex: none; white-space: nowrap; }
.bm-drops { border-radius: 10px; background: #1d1712; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); }
.bm-drops .lmp-drops { overflow: visible; }   /* (the page scrolls, not a box inside it) */
#run-bar {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 12px;
  padding: 6px 10px 6px 16px; border-radius: 999px; border: 3px solid #1b2a4a; background: rgba(24, 40, 82, 0.9); color: #eef4ff;
  font: 700 0.92rem var(--thai); box-shadow: 0 3px 0 #0c1428;
}
#run-bar span { color: #ffd24a; }
#run-bar .btn { color: var(--ink); }
#run-bar .btn.primary { color: #fff; }
#run-bar .rb-txt, #run-bar .rb-btns { display: contents; }   /* (the words and the buttons are updated apart: js/content.js hudFrame) */
#run-bar .btn.small { min-height: 36px; }
/* the tower's way out: always there while you climb; the first press mid-floor arms it for 3 s */
#run-bar .btn.rb-leave { background: #ffd6cb; }
#run-bar .btn.rb-leave:hover { background: #ffe5dd; }
#run-bar .btn.rb-leave.armed { background: #d9392b; color: #fff; animation: rbArm 0.5s ease-in-out infinite alternate; }
@keyframes rbArm { from { box-shadow: 0 2px 0 var(--ink), 0 0 0 0 #ff8a70; } to { box-shadow: 0 2px 0 var(--ink), 0 0 0 3px #ff8a70; } }
#duel-bar { top: 96px; }
@media (max-width: 760px) { #run-bar { top: 64px; } }
/* a phone: the floor and its time in two lines, the buttons beside them, the whole bar on the screen */
@media (max-width: 560px) {
  #run-bar { width: max-content; max-width: calc(100% - 16px); gap: 8px; padding: 4px 6px 4px 12px; border-radius: 14px; font-size: 0.8rem; }
  #run-bar .rb-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; min-width: 0; }
  #run-bar .rb-btns { display: flex; gap: 6px; flex: none; }
  #run-bar .btn.small { min-height: 36px; padding: 2px 10px; font-size: 0.8rem; white-space: nowrap; }
}

/* the quest box is a button: a click does the quest on auto */
#questbox:hover { border-color: #ffe08a; box-shadow: 0 0 0 2px #2c2533, 0 0 12px rgba(255, 224, 138, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35); }
#questbox:focus-visible { outline: 3px solid #ffe08a; outline-offset: 2px; }
#questbox.auto-on { border-color: #8be37b; }
#questbox .q-auto { margin-top: 2px; padding: 3px 6px; border-radius: 8px; background: rgba(143, 207, 106, 0.16); font: 700 0.72rem Mali, Fredoka, sans-serif; color: #c6f08a; text-align: center; }
#questbox .q-auto.on { background: rgba(143, 207, 106, 0.32); color: #eaffd8; animation: qPulse 1.4s ease-in-out infinite; }
/* a story step by the player's own hand (2026-10-18, js/questauto.js QH.guide): the box's button, the lit button on its page, the bubble */
#questbox .q-self { display: block; width: 100%; margin-top: 3px; padding: 4px 6px; border: 1px solid #ffd866; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 216, 102, 0.34), rgba(232, 150, 48, 0.24)); font: 700 0.74rem Mali, Fredoka, sans-serif; color: #fff4c8; cursor: pointer; animation: qSelfPulse 1.6s ease-in-out infinite; }
#questbox .q-self:hover { background: linear-gradient(180deg, rgba(255, 216, 102, 0.5), rgba(232, 150, 48, 0.36)); }
@keyframes qSelfPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 102, 0); } 50% { box-shadow: 0 0 0 3px rgba(255, 216, 102, 0.38); } }
.qh-lit { position: relative; z-index: 3; outline: 3px solid #ffd866 !important; outline-offset: 2px; animation: qhLit 1s ease-in-out infinite !important; }
@keyframes qhLit { 0%, 100% { outline-color: #ffd866; box-shadow: 0 0 0 0 rgba(255, 216, 102, 0.6); } 50% { outline-color: #fff6c8; box-shadow: 0 0 16px 5px rgba(255, 216, 102, 0.55); } }
#qh-ring { position: fixed; z-index: 100000; pointer-events: none; border: 3px solid #ffd866; border-radius: 12px; animation: qhRing 1s ease-in-out infinite; }
#qh-ring[hidden] { display: none; }
@keyframes qhRing { 0%, 100% { border-color: #ffd866; box-shadow: 0 0 0 0 rgba(255, 216, 102, 0.55); } 50% { border-color: #fff6c8; box-shadow: 0 0 18px 6px rgba(255, 216, 102, 0.5); } }
#qh-tip { position: fixed; z-index: 100001; max-width: 270px; padding: 6px 10px; border-radius: 10px; background: #2a1d0e; border: 2px solid #ffd866; color: #fff4c8; font: 600 12.5px/1.4 Mali, Fredoka, sans-serif; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); }
#qh-tip b { display: block; color: #ffd866; font-size: 11.5px; }
#qh-tip span { display: block; }
#qh-tip.below::before, #qh-tip.above::after { content: ''; position: absolute; left: calc(50% - 7px); border: 7px solid transparent; }
#qh-tip.below::before { top: -16px; border-bottom-color: #ffd866; }
#qh-tip.above::after { bottom: -16px; border-top-color: #ffd866; }
@keyframes qPulse { 50% { background: rgba(143, 207, 106, 0.5); } }

/* ---------- skill levels (skill tree) ---------- */
.sk .sk-lv { position: absolute; left: 3px; bottom: 3px; padding: 0 5px; border-radius: 7px; background: rgba(12, 16, 34, 0.85); color: #c9f4ff; font: 700 0.68rem Fredoka, sans-serif; pointer-events: none; }
.sk .sk-lv.max { color: #ffd24a; }
.sk.can-up { box-shadow: 0 0 0 3px #8be37b, 0 0 14px rgba(139, 227, 123, 0.75); }
.sk-cost:not(.short) { white-space: nowrap; }
.tip .sk-up { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: 12px; background: rgba(139, 227, 123, 0.1); border: 1px solid rgba(139, 227, 123, 0.4); font: 600 0.86rem var(--thai); }
.tip .sk-up b { color: #c6f08a; }
.tip .sk-up span { color: #eef1fb; }
.tip .sk-up em { font-style: normal; color: #ff9a9a; font-size: 0.8rem; }
#tree .tip .btn { color: var(--ink); }
#tree .tip .btn.primary { color: #fff; }

/* ---------- the main menu (Esc): every system as an icon tile ---------- */
#pause .hub-panel { width: min(1040px, 100%); }
.hub-body { display: flex; flex-direction: column; gap: 12px; }
.hub-sec h3 { margin: 0 0 6px; font: 700 0.95rem var(--thai); color: var(--gold); letter-spacing: 0.02em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.hub-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px;
  border-radius: 16px; border: 2px solid rgba(201, 162, 74, 0.55); background: linear-gradient(180deg, rgba(54, 65, 107, 0.85), rgba(29, 36, 64, 0.92));
  color: var(--cream); font: 700 0.86rem var(--thai); box-shadow: 0 3px 0 #0c1022; transition: transform 0.08s ease, border-color 0.15s ease;
}
.hub-tile:hover, .hub-tile:focus-visible { transform: translateY(-2px); border-color: var(--gold); outline: none; background: linear-gradient(180deg, rgba(74, 88, 140, 0.95), rgba(36, 45, 80, 0.95)); }
.hub-tile img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.hub-tile kbd { position: absolute; top: 5px; left: 6px; min-width: 1.6em; padding: 0 4px; border-radius: 6px; border: 1px solid rgba(246, 238, 219, 0.5); background: rgba(12, 16, 34, 0.75); font: 700 0.66rem Fredoka, sans-serif; color: var(--cream-2); }
.hub-tile .hub-badge { position: absolute; top: 4px; right: 5px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #e5483a; color: #fff; font: 800 0.7rem Fredoka, Mali, sans-serif; font-style: normal; box-shadow: 0 0 6px rgba(229, 72, 58, 0.7); }
.hub-tile .hub-badge.net { background: #4a5680; box-shadow: none; font-weight: 600; }
.hub-tile.off { opacity: 0.5; cursor: default; transform: none; }
.hub-settings .pause-actions { margin-top: 2px; }
.hub-help summary { cursor: pointer; font: 700 0.88rem var(--thai); color: var(--cream-2); margin: 6px 0; }
#eco-hud .eh-menu { background: var(--gold); }
@media (max-width: 760px) { .hub-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .hub-tile img { width: 44px; height: 44px; } }
#pause .btn, #pause .btn.ghost { color: var(--ink); }
#pause .btn.primary { color: #fff; }

/* the chat box takes clicks only on its button and on names (the rest lets clicks through to the world) */
#chat .chat-key { pointer-events: auto; border: 0; border-radius: 999px; padding: 2px 10px; background: rgba(22, 28, 54, 0.7); color: #fff3d0; font: 700 0.72rem Mali, Fredoka, sans-serif; }
#chat .chat-key:hover { background: rgba(242, 201, 76, 0.85); color: var(--ink); }
#chat .chat-line .who { pointer-events: auto; cursor: pointer; }
#chat .chat-line .who:hover { text-decoration: underline; }

/* ---------- the recipe book (crafting) ---------- */
#eco .cr-top { display: flex; align-items: center; gap: 10px; padding: 6px 8px 8px; }
#eco .cr-top > img { width: 44px; height: 44px; }
#eco .cr-lv { flex: 1; display: flex; flex-direction: column; gap: 3px; }
#eco .cr-lv b { font-size: 0.95rem; }
#eco .cr-lv small { opacity: 0.8; font-size: 0.72rem; }
#eco .cr-xp { height: 8px; border-radius: 99px; background: rgba(40, 30, 60, 0.35); overflow: hidden; }
#eco .cr-xp i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f2c14e, #ffe39a); }
#eco .cr-cats { margin-bottom: 6px; }
#eco .eco-row.recipe.locked { opacity: 0.5; }
#eco .eco-row.recipe.no { opacity: 0.78; }
#eco .eco-row.recipe .cr-lock { font-style: normal; margin-left: auto; }
#eco .eco-row.recipe .cr-can { margin-left: auto; font-style: normal; font-weight: 700; font-size: 0.75rem; color: #c8f7b4; background: rgba(127, 224, 122, 0.2); border: 1px solid rgba(127, 224, 122, 0.45); padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
#eco .cr-tier { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
#eco .cr-tier span { flex: 1; text-align: center; display: flex; flex-direction: column; }
#eco .cr-tier small { opacity: 0.75; font-size: 0.72rem; }
#eco .cr-cls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 4px 0 6px; }
#eco .cr-wpn { border: 2px solid transparent; border-radius: 10px; background: rgba(40, 30, 60, 0.12); padding: 2px; cursor: pointer; }
#eco .cr-wpn img { width: 100%; aspect-ratio: 1; display: block; }
#eco .cr-wpn.on { border-color: #f2c14e; background: rgba(242, 193, 78, 0.25); }
#eco .cr-odds { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; font-size: 0.75rem; }
#eco .cr-odds > div { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 6px; }
#eco .cr-odds span { font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
#eco .cr-odds i { height: 7px; border-radius: 99px; background: rgba(40, 30, 60, 0.18); overflow: hidden; display: block; }
#eco .cr-odds i b { display: block; height: 100%; border-radius: 99px; }
#eco .cr-odds em { font-style: normal; text-align: right; }
#eco .cr-need li span, #eco .cr-src li span { display: flex; align-items: center; gap: 6px; }
#eco .cr-need li img, #eco .cr-src li img { width: 22px; height: 22px; }
#eco .cr-prog { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
#eco .cr-bar { height: 10px; border-radius: 99px; background: rgba(40, 30, 60, 0.3); overflow: hidden; }
#eco .cr-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7fe9ff, #c9ff9a); border-radius: 99px; }
#eco .cr-res { margin-top: 10px; }
#eco .cr-res > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#eco .cr-ri { position: relative; width: 38px; height: 38px; border-radius: 9px; background: rgba(40, 30, 60, 0.15); border: 2px solid rgba(0, 0, 0, 0.1); }
#eco .cr-ri img { width: 100%; height: 100%; }
#eco .cr-ri b { position: absolute; right: 2px; bottom: 0; font-size: 0.65rem; text-shadow: 0 0 3px #fff; }
#eco .cr-ri.g1 { border-color: #7fe07a; } #eco .cr-ri.g2 { border-color: #5fb4ff; } #eco .cr-ri.g3 { border-color: #c27bff; }
#eco .cr-ri.g4 { border-color: #ffb340; } #eco .cr-ri.g5 { border-color: #ff5a6a; }
#eco .cr-ri.great { box-shadow: 0 0 0 2px #ffe08a, 0 0 10px #ffd04a; }

/* ---------- the Tower of Eternity: progress, next floor, reward ladder, reward card ---------- */
#content .tw-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
#content .tw-bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(40, 30, 60, 0.3); overflow: hidden; }
#content .tw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8fd3ff, #f2c14e); }
#content .tw-next { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(242, 193, 78, 0.14); border: 1px solid rgba(242, 193, 78, 0.4); }
#content .tw-next small { opacity: 0.8; }
#content .tw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#content .tw-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 99px; background: rgba(20, 16, 36, 0.35); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#content .tw-chip img { width: 20px; height: 20px; }
#content .tw-ladder { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#content .tw-step { display: grid; grid-template-columns: 66px 1fr 60px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: rgba(20, 16, 36, 0.18); }
#content .tw-step .tw-f { font-weight: 800; white-space: nowrap; }
#content .tw-step em { font-style: normal; font-size: 0.72rem; text-align: right; opacity: 0.85; }
#content .tw-step.got { opacity: 0.55; }
#content .tw-step.got em { color: #9be38a; opacity: 1; }
#content .tw-step.next { background: rgba(242, 193, 78, 0.2); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.6); }
#content .tw-step.next em { color: #ffd76a; font-weight: 700; }
#tw-card { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); z-index: 40; pointer-events: none; animation: twIn 0.35s ease-out; }
#tw-card[hidden] { display: none; }
#tw-card .tw-in { pointer-events: auto; min-width: 280px; max-width: min(460px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 18px 12px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(36, 30, 64, 0.96), rgba(24, 20, 44, 0.96)); border: 2px solid #f2c14e; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(242, 193, 78, 0.35); color: #fff6e0; text-align: center; }
#tw-card .tw-ic { width: 54px; height: 54px; margin-top: -40px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); }
#tw-card b { font-size: 1.35rem; color: #ffe08a; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
#tw-card small { opacity: 0.85; }
#tw-card em { font-style: normal; font-size: 0.78rem; color: #bfeaff; }
#tw-card .tw-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 4px 0; }
#tw-card .tw-it { display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font-size: 0.8rem; font-weight: 700; }
#tw-card .tw-it img { width: 28px; height: 28px; }
#tw-card.big .tw-in { border-color: #ffb340; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 36px rgba(255, 179, 64, 0.6); }
#tw-card.big b { font-size: 1.6rem; }
@keyframes twIn { from { opacity: 0; transform: translate(-50%, -12px) scale(0.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* a weapon's trait in the item details */
#eco .eco-trait { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; padding: 6px 9px; border-radius: 10px; background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.35); font-size: 0.8rem; }
#eco .eco-trait b { color: #ffd76a; }
#eco .eco-trait em { font-style: normal; font-weight: 800; color: #c8f7b4; }
#eco .eco-trait small { opacity: 0.7; font-size: 0.7rem; }
#eco .cr-cls { grid-template-columns: repeat(5, 1fr); max-height: 210px; overflow-y: auto; }

/* ---------- LORDNINE-style stats: the character panel's tabs ---------- */
.ci-lost { color: #ff8a8a !important; }
#charpanel .ci-restore { min-height: 36px; font-size: 0.8rem; padding: 0 1em 4px; }
.ci-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ci-tab { border: 1px solid rgba(201, 162, 74, 0.5); background: rgba(0, 0, 0, 0.3); color: var(--cream-2); border-radius: 999px; padding: 3px 11px; font: 600 0.78rem Mali, sans-serif; cursor: pointer; }
.ci-tab.on { background: #f2d27a; color: var(--ink); border-color: #f2d27a; }
.ci-pane { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.ci-note { font-size: 0.76rem; color: var(--cream-2); line-height: 1.5; }
.ci-note b { color: #ffe27a; }
.ci-sgroup { display: flex; flex-direction: column; gap: 4px; }
.ci-sgroup > b { font: 700 0.86rem Mali, sans-serif; color: #ffe27a; }
.ci-sgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 10px; }
.ci-srow { display: flex; justify-content: space-between; gap: 6px; padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font-size: 0.78rem; color: var(--cream-2); }
.ci-srow b { font: 700 0.84rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-srow b small { color: #9be37b; font-size: 0.72rem; }
.ci-srow.own { box-shadow: inset 0 0 0 1px #f2d27a; }
.ci-srow.own b { color: #ffe27a; }
.ci-wcard { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; }
.ci-wcard img { width: 56px; height: 56px; }
.ci-wcard b { color: #fff6dc; display: block; }
.ci-wcard small { display: block; font-size: 0.74rem; color: var(--cream-2); }
.ci-xp { height: 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin: 4px 0 2px; }
.ci-xp i { display: block; height: 100%; background: linear-gradient(90deg, #fff0a8, #e3b43c); }
.ci-eng { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); font-size: 0.8rem; color: var(--cream-2); }
.ci-eng > b { color: #fff6dc; font-size: 0.78rem; }
.ci-eng em { font-style: normal; font-weight: 700; }
.ci-eng span b { color: #fff; }
.ci-eng.locked { opacity: 0.55; grid-template-columns: 52px minmax(0, 1fr); }
.ci-relic { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); }
.ci-relic img { width: 38px; height: 38px; }
.ci-relic b { color: #fff6dc; font-size: 0.86rem; display: block; }
.ci-relic b small { color: #ffe27a; font-size: 0.72rem; }
.ci-relic small { font-size: 0.72rem; color: var(--cream-2); }
.ci-relic.dim img { filter: grayscale(0.8) brightness(0.8); }
.ci-relic em { font-style: normal; color: #9be37b; font-size: 0.78rem; font-weight: 700; }
#charpanel .btn.small { min-height: 30px; font-size: 0.74rem; padding: 0 0.9em 3px; white-space: nowrap; }
/* the eternal collection */
#content .ct-eternal { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.45); }
#content .ct-et-cur { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
#content .ct-et-cur em { font-style: normal; font-weight: 700; }
#content .ct-et-cur em.ok { color: #9be37b; }
#content .ct-et-cur em.short { color: #ff9a9a; }
#content .ct-et-next { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.74rem; opacity: 0.75; }

/* ---------- the collection book (1000 sets) ---------- */
#content .cl-head { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: inherit; }
#content .cl-prog { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#content .cl-prog b { font-size: 1.05rem; }
#content .cl-prog span b { color: #ffd76a; font-size: 1.1rem; }
#content .cl-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(242, 193, 78, 0.3); overflow-x: auto; }
#content .cl-tab { flex: 1; min-width: max-content; background: none; border: 0; border-bottom: 3px solid transparent; padding: 7px 12px; font: 700 0.9rem Mali, sans-serif; color: rgba(246, 238, 219, 0.6); cursor: pointer; }
#content .cl-tab.on { color: #ffd76a; border-bottom-color: #f2c14e; }
#content .cl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#content .cl-q { flex: 1; min-width: 150px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 78, 0.4); background: rgba(0, 0, 0, 0.3); color: inherit; font: inherit; font-size: 0.85rem; }
#content .cl-list { display: flex; flex-direction: column; gap: 8px; }
#content .cl-fav { background: none; border: 0; padding: 0 4px 0 0; font-size: 1.05rem; line-height: 1; color: rgba(246, 238, 219, 0.3); cursor: pointer; }
#content .cl-fav.on { color: #ffd76a; text-shadow: 0 0 6px rgba(255, 215, 106, 0.6); }
#content .cl-tier { font-style: normal; font-size: 0.72rem; color: rgba(246, 238, 219, 0.55); margin-left: 6px; }
#content .ct-coll .eco-cell { position: relative; }
#content .ct-coll .eco-cell:not(.picked) img { filter: grayscale(0.85) brightness(0.65); }
#content .ct-coll .eco-cell.ct-can:not(.picked) img { filter: none; }
#content .cl-mat { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: 0.56rem; font-weight: 700; color: #fff6dc; text-shadow: 0 1px 2px #000; }
#content .cl-next { opacity: 0.85; }

/* ---------- equipment sets, appraisal and random options ---------- */
.eco-cell .sn { position: absolute; left: 3px; bottom: 1px; font: 700 0.6rem Fredoka, sans-serif; font-style: normal; color: #fff6dc; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.eco-cell .unk { position: absolute; right: 3px; bottom: 0; font: 800 0.95rem Fredoka, sans-serif; font-style: normal; color: #ffd76a; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.eco-cell:has(.unk) img { filter: saturate(0.6) brightness(0.85); }
.eco-opts, .eco-set { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(242, 193, 78, 0.22); }
.eco-opts > b, .eco-set > b { font-size: 0.85rem; color: #ffd76a; }
.eco-opts > span { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; }
.eco-opts > span em { font-style: normal; font-weight: 700; }
.eco-opts .q0 em { color: #e6dfcf; }
.eco-opts .q1 em { color: #7fe07a; }
.eco-opts .q2 em { color: #5fb4ff; }
.eco-opts .q3 em { color: #ffb340; text-shadow: 0 0 6px rgba(255, 179, 64, 0.5); }
.eco-opts.unk > span { color: rgba(246, 238, 219, 0.45); letter-spacing: 1px; }
.eco-opts.new { border-color: rgba(127, 224, 122, 0.5); }
.eco-opts small, .eco-set small { font-size: 0.72rem; font-weight: 400; color: rgba(246, 238, 219, 0.6); }
.eco-set > span { font-size: 0.8rem; color: rgba(246, 238, 219, 0.42); }
.eco-set > span.on { color: #9dffb0; }
.eco-reroll { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eco-reroll .eco-opts { margin: 4px 0; }
.ci-srow.dim { opacity: 0.45; }

/* ---------- quests (quests.js): the quest box lines and the quest book (O) ---------- */
#questbox .q-book { margin-left: 6px; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1px solid rgba(255, 231, 166, 0.6); background: rgba(255, 231, 166, 0.12); color: #ffe7a6; font: 700 0.72rem Fredoka, sans-serif; cursor: pointer; }
#questbox .q-book:hover { background: rgba(255, 231, 166, 0.3); }
#questbox .q-head span { margin-left: auto; }
#questbox .q-goal.done span { color: #b9e7a0; text-decoration: line-through; text-decoration-color: rgba(185, 231, 160, 0.5); }
#questbox .q-goal.done b { color: #8be37b; }
#questbox .q-hint { padding: 3px 6px; border-radius: 7px; background: rgba(255, 216, 102, 0.12); border-left: 3px solid #ffd866; font: 600 0.7rem/1.35 Mali, sans-serif; color: #ffe9a8; }
#questbox .q-lock { font: 700 0.76rem Mali, sans-serif; color: #ffb38a; }
#questbox .q-side { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 9px; background: rgba(159, 216, 240, 0.08); border: 1px solid rgba(159, 216, 240, 0.25); }
#questbox .q-side:hover { background: rgba(159, 216, 240, 0.18); }
#questbox .q-side.on { border-color: #8be37b; background: rgba(139, 227, 123, 0.14); }
#questbox .q-side em { font: 700 0.62rem Mali, sans-serif; font-style: normal; color: #0f1630; background: #9fd8f0; border-radius: 5px; padding: 1px 4px; flex-shrink: 0; }
#questbox .q-side span { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 700 0.74rem/1.2 Mali, sans-serif; color: #eaf6ff; }
#questbox .q-side small { font: 500 0.66rem/1.2 Mali, sans-serif; color: #b9d6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#questbox .q-side b { font: 700 0.74rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#questbox .q-rest { font: 700 0.7rem Mali, sans-serif; color: #ffd98a; text-align: center; text-shadow: 0 0 6px rgba(255, 200, 90, 0.5); }
#questbook .eco-panel { width: min(1060px, 100%); height: min(700px, 100%); }
#questbook .btn { color: var(--ink); }
#questbook .btn.primary { color: #fff; }
#questbook .qb-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(10, 14, 30, 0.45); border: 2px solid rgba(201, 162, 74, 0.55); }
#questbook .qb-card h3 { margin: 0; font: 700 1.2rem var(--thai); color: #fff3c9; }
#questbook .qb-ch { font: 700 0.78rem var(--thai); color: #9fd8f0; }
#questbook .qb-who { font: 700 0.85rem var(--thai); color: #ffd98a; }
#questbook .qb-say { margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(246, 238, 219, 0.07); font: 500 0.9rem/1.6 var(--thai); color: var(--cream); }
#questbook .qb-goals { display: flex; flex-direction: column; gap: 4px; }
#questbook .q-goal { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(10, 14, 30, 0.35); font: 600 0.88rem var(--thai); }
#questbook .q-goal img { width: 24px; height: 24px; }
#questbook .q-goal span { flex: 1; }
#questbook .q-goal b { font: 700 0.9rem Fredoka, sans-serif; color: #fff; }
#questbook .q-goal.done span { color: #b9e7a0; }
#questbook .q-goal.done b { color: #8be37b; }
#questbook .qb-lock { padding: 8px 10px; border-radius: 10px; background: rgba(255, 150, 100, 0.12); color: #ffc29e; font: 600 0.88rem var(--thai); }
#questbook .qb-rw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 700 0.85rem var(--thai); }
#questbook .qb-rw .eco-goldchip { font-size: 0.8rem; color: #fff1c7; }
#questbook .qb-rw .eco-goldchip img { width: 20px; height: 20px; }
#questbook .qb-sub { font: 700 0.86rem var(--thai); color: #ffe7a6; padding-top: 4px; border-bottom: 1px solid rgba(201, 162, 74, 0.35); }
#questbook .qb-past { display: flex; flex-direction: column; gap: 2px; font: 500 0.82rem var(--thai); color: #b9e7a0; }
#questbook .qb-chs { display: flex; flex-direction: column; gap: 4px; }
#questbook .qb-chrow { display: grid; grid-template-columns: 20px 1fr; gap: 0 6px; padding: 5px 8px; border-radius: 9px; background: rgba(10, 14, 30, 0.35); }
#questbook .qb-chrow span { grid-row: span 2; font: 700 0.9rem Fredoka, sans-serif; color: #9fd8f0; }
#questbook .qb-chrow b { font: 700 0.84rem var(--thai); }
#questbook .qb-chrow small { font: 500 0.72rem var(--thai); color: var(--cream-2); }
#questbook .qb-chrow.done span { color: #8be37b; }
#questbook .qb-chrow.now { border: 1px solid var(--gold); background: rgba(242, 201, 76, 0.1); }
#questbook .qb-chrow.lock { opacity: 0.55; }
#questbook .qb-srow { cursor: pointer; }
#questbook .qb-srow > img { width: 34px; height: 34px; }
#questbook .qb-srow.got { opacity: 0.55; }
#questbook .qb-srow .ct-bar { width: 90px; margin: 0 0 0 6px; }
#questbook .qb-need { font: 600 0.78rem var(--thai); color: #ffb38a; white-space: nowrap; }
#questbook .qb-dot { font-style: normal; display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #e2553b; color: #fff; font: 700 0.72rem Fredoka, sans-serif; }
#questbook .qb-plan { display: flex; flex-direction: column; gap: 4px; }
#questbook .qb-prow { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 5px 8px; border-radius: 9px; background: rgba(10, 14, 30, 0.35); border-left: 3px solid #8fcf6a; }
#questbook .qb-prow.paid { border-left-color: #f2c94c; }
#questbook .qb-prow b { font: 700 0.84rem var(--thai); }
#questbook .qb-prow small { grid-column: 1; font: 500 0.72rem var(--thai); color: var(--cream-2); }
#questbook .qb-prow span { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 700 1rem Fredoka, var(--thai), sans-serif; color: #ffe7a6; }
@media (max-width: 760px) { #questbook .eco-body { grid-template-columns: minmax(0, 1fr); } }

/* ---------- HUD layout by category (js/hudlayout.js): sizes follow the canvas HUD through --u (= G.ui / G.dpr) ---------- */
#ui { --u: 1; --hud-navy: rgba(22, 28, 54, 0.9); --hud-gold: #c9a24a; --hud-ink: #2c2533; }
/* the old bottom-right row (activities, bag, menu, gold) is replaced by the menu bar and the gold chip */
#eco-hud { display: none !important; }
#toasts { top: calc(150px * var(--u)); gap: calc(6px * var(--u)); width: min(calc(560px * var(--u)), calc(100% - 32px)); }
.toast { font-size: calc(14px * var(--u)); padding: calc(6px * var(--u)) calc(14px * var(--u)); }

/* menu bar: three groups along the top, left of the minimap */
#menubar {
  position: absolute; z-index: 2; display: flex; align-items: stretch; gap: calc(8px * var(--u));
  padding: calc(5px * var(--u)) calc(7px * var(--u)); border-radius: calc(16px * var(--u));
  background: var(--hud-navy); border: calc(2px * var(--u)) solid var(--hud-gold);
  box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink), inset 0 0 0 1px rgba(255, 230, 160, 0.22), 0 4px 10px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}
#menubar .mb-grp { display: flex; gap: calc(3px * var(--u)); }
#menubar .mb-grp + .mb-grp { padding-left: calc(8px * var(--u)); border-left: 1px solid rgba(201, 162, 74, 0.45); }
#menubar .mb-btn {
  position: relative; width: calc(56px * var(--u)); padding: calc(3px * var(--u)) 0 calc(2px * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(1px * var(--u));
  border: 0; border-radius: calc(11px * var(--u)); background: transparent; color: #fff3d6; cursor: pointer;
}
#menubar .mb-btn img { width: calc(32px * var(--u)); height: calc(32px * var(--u)); object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); transition: transform 0.12s; }
#menubar .mb-btn:hover, #menubar .mb-btn.open { background: rgba(255, 224, 138, 0.16); }
#menubar .mb-btn:hover img { transform: translateY(-1px) scale(1.06); }
#menubar .mb-btn:focus-visible { outline: 2px solid #ffe08a; outline-offset: 1px; }
#menubar .mb-label { font: 700 calc(11px * var(--u)) / 1.2 Mali, Fredoka, sans-serif; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
#menubar .mb-caret { font-style: normal; margin-left: 2px; color: #ffd98a; font-size: 0.85em; }
#menubar kbd {
  position: absolute; top: calc(1px * var(--u)); right: calc(2px * var(--u)); min-width: calc(15px * var(--u)); padding: 0 calc(3px * var(--u));
  border-radius: calc(5px * var(--u)); background: #fff3d6; color: #1f2747; font: 700 calc(9px * var(--u)) / 1.45 Fredoka, sans-serif; text-align: center;
}
#menubar .mb-badge {
  position: absolute; top: calc(-3px * var(--u)); left: calc(4px * var(--u)); min-width: calc(16px * var(--u)); padding: 0 calc(4px * var(--u));
  border-radius: 99px; background: #e2553b; color: #fff; font: 700 calc(10px * var(--u)) / 1.6 Fredoka, Mali, sans-serif; font-style: normal; text-align: center;
  box-shadow: 0 0 0 1.5px var(--hud-ink);
}
#menubar.compact .mb-btn { width: calc(42px * var(--u)); }
#menubar.compact .mb-label { display: none; }
/* the ⚙ at the end: the gear alone, narrower (its name stays in the tooltip) */
#menubar .mb-btn.mini { width: calc(40px * var(--u)); justify-content: center; }
#menubar .mb-btn.mini .mb-label { display: none; }
#menubar .mb-btn.mini img { width: calc(30px * var(--u)); height: calc(30px * var(--u)); }

/* a category's systems, under its button */
#menupop {
  position: absolute; z-index: 4; min-width: calc(190px * var(--u)); padding: calc(6px * var(--u)); display: flex; flex-direction: column; gap: calc(2px * var(--u));
  border-radius: calc(14px * var(--u)); background: rgba(22, 28, 54, 0.96); border: calc(2px * var(--u)) solid var(--hud-gold);
  box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink), 0 8px 18px rgba(0, 0, 0, 0.45); pointer-events: auto;
}
#menupop .mp-head { padding: calc(2px * var(--u)) calc(8px * var(--u)) calc(4px * var(--u)); font: 700 calc(12px * var(--u)) Mali, sans-serif; color: #ffe7a6; border-bottom: 1px solid rgba(201, 162, 74, 0.4); margin-bottom: calc(2px * var(--u)); }
#menupop .mp-item {
  display: flex; align-items: center; gap: calc(8px * var(--u)); padding: calc(5px * var(--u)) calc(8px * var(--u)); border: 0; border-radius: calc(9px * var(--u));
  background: transparent; color: #fff6dc; font: 600 calc(13px * var(--u)) Mali, Fredoka, sans-serif; text-align: left; cursor: pointer;
}
#menupop .mp-item:hover, #menupop .mp-item:focus-visible { background: rgba(255, 224, 138, 0.16); outline: none; }
#menupop .mp-item img { width: calc(28px * var(--u)); height: calc(28px * var(--u)); object-fit: contain; }
#menupop .mp-item span { flex: 1; }
#menupop .mp-item kbd { padding: 0 calc(4px * var(--u)); border-radius: calc(5px * var(--u)); background: #fff3d6; color: #1f2747; font: 700 calc(10px * var(--u)) / 1.5 Fredoka, sans-serif; }
#menupop .mp-item em { font-style: normal; padding: 0 calc(6px * var(--u)); border-radius: 99px; background: #e2553b; color: #fff; font: 700 calc(10px * var(--u)) / 1.6 Fredoka, Mali, sans-serif; }
#menupop .mp-item em.net { background: rgba(159, 216, 240, 0.25); color: #bfe6ff; }
#menupop .mp-item.off { opacity: 0.55; }
/* a long list in two columns, cut into small headed parts (js/hudlayout.js: '|name' in a drop list) */
#menupop.cols2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(4px * var(--u)); min-width: calc(370px * var(--u)); }
#menupop.cols2 .mp-head, #menupop .mp-sep { grid-column: 1 / -1; }
#menupop .mp-sep { display: flex; align-items: center; gap: calc(6px * var(--u)); margin-top: calc(4px * var(--u)); padding: calc(2px * var(--u)) calc(8px * var(--u)); font: 700 calc(11px * var(--u)) Mali, sans-serif; color: #e9b95a; }
#menupop .mp-sep::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(217, 164, 67, 0.6), rgba(217, 164, 67, 0)); }

/* gold and the things just picked up: bottom right */
#goldchip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: calc(5px * var(--u)); padding: calc(3px * var(--u)) calc(12px * var(--u)) calc(3px * var(--u)) calc(4px * var(--u));
  border-radius: 999px; border: calc(2px * var(--u)) solid var(--hud-gold); background: var(--hud-navy); box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink);
  font: 700 calc(15px * var(--u)) Fredoka, sans-serif; color: #ffd95a; cursor: pointer; pointer-events: auto;
}
#goldchip img { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
#goldchip:hover { filter: brightness(1.12); }
/* too wide for the room right of the AUTO button (js/hudlayout.js): two rows, เพชร + หินดำ on top and the gold under them */
#goldchip.two { display: inline-grid; grid-template-columns: repeat(3, auto); row-gap: calc(1px * var(--u)); }
#ui #goldchip.two .wc-gold { grid-column: 1 / -1; justify-self: end; margin-left: 0; border-left: 0; }
#lootfeed { position: absolute; z-index: 1; width: calc(230px * var(--u)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(3px * var(--u)); pointer-events: none; }
#lootfeed .lf-row {
  --lf: #fff6dc;
  display: flex; align-items: center; gap: calc(6px * var(--u)); max-width: 100%; padding: calc(2px * var(--u)) calc(10px * var(--u)) calc(2px * var(--u)) calc(3px * var(--u));
  border-radius: 999px; background: rgba(22, 28, 54, 0.78); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, 0.35);
  font: 600 calc(12.5px * var(--u)) Mali, Fredoka, sans-serif; color: var(--lf); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  animation: lfIn 0.25s ease-out; transition: opacity 0.5s, transform 0.5s;
}
#lootfeed .lf-row img { width: calc(22px * var(--u)); height: calc(22px * var(--u)); object-fit: contain; }
#lootfeed .lf-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lootfeed .lf-row.out { opacity: 0; transform: translateX(20px); }
@keyframes lfIn { from { opacity: 0; transform: translateX(24px); } }

/* chat: a panel with tabs by kind of line (ทั้งหมด / แชท / เควส / ระบบ) */
#chat { gap: calc(4px * var(--u)); }
#chat .chat-head { align-items: center; gap: calc(8px * var(--u)); font-size: calc(10.5px * var(--u)); }
#chat .chat-tabs { display: flex; gap: calc(3px * var(--u)); pointer-events: auto; }
#chat .chat-tab {
  padding: calc(2px * var(--u)) calc(9px * var(--u)); border-radius: 999px; border: 1px solid rgba(201, 162, 74, 0.55);
  background: rgba(22, 28, 54, 0.75); color: #f3ecd6; font: 700 calc(11px * var(--u)) / 1.4 Mali, sans-serif; cursor: pointer;
}
#chat .chat-tab:hover { background: rgba(60, 70, 120, 0.9); }
#chat .chat-tab.on { background: var(--hud-gold); color: #1f2747; border-color: #ffe08a; }
#chat .chat-feed {
  max-height: calc(128px * var(--u)); padding: calc(6px * var(--u)) calc(9px * var(--u)); border-radius: calc(12px * var(--u));
  background: rgba(16, 20, 40, 0.62); border: 1px solid rgba(201, 162, 74, 0.35); font-size: calc(12.5px * var(--u)); line-height: 1.38;
  mask-image: linear-gradient(to bottom, transparent 0, #000 calc(16px * var(--u)));
}
#chat .chat-foot { display: flex; align-items: center; gap: calc(8px * var(--u)); }
#chat .chat-foot .online { font: 600 calc(10.5px * var(--u)) Fredoka, Mali, sans-serif; color: rgba(255, 248, 230, 0.75); white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
#chat .chat-key {
  align-self: flex-start; pointer-events: auto; padding: calc(2px * var(--u)) calc(10px * var(--u)); border-radius: 999px; border: 1px solid rgba(255, 246, 216, 0.4);
  background: rgba(22, 28, 54, 0.7); color: rgba(255, 248, 230, 0.9); font: 600 calc(11px * var(--u)) Mali, sans-serif; cursor: pointer;
}
#chat .chat-input { font-size: calc(13px * var(--u)); padding: calc(5px * var(--u)) calc(10px * var(--u)); }
#chat[data-tab="talk"] .chat-line.sys, #chat[data-tab="talk"] .chat-line.world, #chat[data-tab="talk"] .chat-line.quest, #chat[data-tab="talk"] .chat-line.loot { display: none; }
#chat[data-tab="quest"] .chat-line:not(.quest) { display: none; }
#chat[data-tab="sys"] .chat-line:not(.sys):not(.world):not(.loot) { display: none; }

/* the quest box in the right column, the same scale as the HUD */
#questbox { width: calc(250px * var(--u)); padding: calc(8px * var(--u)) calc(11px * var(--u)) calc(9px * var(--u)); gap: calc(4px * var(--u)); border-radius: calc(14px * var(--u)); border-width: calc(2px * var(--u)); }
#questbox img { width: calc(22px * var(--u)); height: calc(22px * var(--u)); }
#questbox .q-head { gap: calc(6px * var(--u)); padding-bottom: calc(4px * var(--u)); }
#questbox .q-head b { font-size: calc(15px * var(--u)); }
#questbox .q-head span { font-size: calc(11.5px * var(--u)); }
#questbox .q-book { width: calc(22px * var(--u)); height: calc(22px * var(--u)); font-size: calc(11.5px * var(--u)); border-radius: calc(7px * var(--u)); }
#questbox .q-title { font-size: calc(14px * var(--u)); }
#questbox .q-goal { font-size: calc(12.5px * var(--u)); gap: calc(6px * var(--u)); }
#questbox .q-goal b { font-size: calc(13px * var(--u)); }
#questbox .q-bar { height: calc(6px * var(--u)); }
#questbox .q-hint { font-size: calc(11.5px * var(--u)); padding: calc(3px * var(--u)) calc(6px * var(--u)); }
#questbox .q-lock { font-size: calc(12.5px * var(--u)); }
#questbox .q-map { font-size: calc(11px * var(--u)); }
#questbox .q-auto { font-size: calc(11.5px * var(--u)); padding: calc(3px * var(--u)) calc(6px * var(--u)); border-radius: calc(8px * var(--u)); }
#questbox .q-self { font-size: calc(12px * var(--u)); padding: calc(4px * var(--u)) calc(6px * var(--u)); border-radius: calc(8px * var(--u)); }
#questbox .q-side { gap: calc(6px * var(--u)); padding: calc(4px * var(--u)) calc(6px * var(--u)); border-radius: calc(9px * var(--u)); }
#questbox .q-side em { font-size: calc(10px * var(--u)); }
#questbox .q-side span { font-size: calc(12px * var(--u)); }
#questbox .q-side small { font-size: calc(10.5px * var(--u)); }
#questbox .q-side b { font-size: calc(12px * var(--u)); }
#questbox .q-rest { font-size: calc(11.5px * var(--u)); }
@media (max-width: 700px) { #questbox { width: calc(210px * var(--u)); } }

/* the party frames sit in the left column under the character */
#party { width: calc(210px * var(--u)); }
/* story / NPC dialog: above the action bar, the same scale as the HUD */
#dialog { bottom: calc(120px * var(--u)); width: min(calc(650px * var(--u)), calc(100% - 32px)); }
#dialog p { font-size: calc(16px * var(--u)); }
#dialog .who { font-size: calc(15px * var(--u)); }
/* skill tree: lines of other classes are shown greyed (the class is the weapon in hand) */
.tree-page .sk.other-class, .tree-page .sk.owned.other-class { filter: grayscale(0.8) brightness(0.78) !important; }
.sk-cell.other .sk-cost { color: #c9b6a6; }
.tp-head .tp-lock { margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 150, 100, 0.12); border: 1px solid rgba(255, 170, 120, 0.4); color: #ffd2b8; font: 600 0.88rem var(--thai); }
/* bag (Y): a bigger window; the worn gear stays put while the bag's slots scroll; details visible without scrolling */
#eco .eco-panel { width: min(1320px, 100%); height: min(920px, 100%); }
#eco .eco-body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
#eco .eco-main.bagmode { overflow: hidden; }
#eco .eco-main.bagmode .eco-gear { flex: none; }
#eco .eco-main.bagmode .eco-bagscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 4px 2px 0; }
#eco .eco-main.bagmode .eco-foot { flex: none; }
#eco .eco-gear .eco-gslot .eco-cell { width: min(100%, 78px); }
#eco .eco-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
#eco .eco-side { gap: 8px; }

/* ---------- the forge (bag window, ตีบวก tab), laid out like the LORDNINE upgrade screen in the game's navy and gold ---------- */
#eco .eco-body.forgemode { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
#eco .forgemode .eco-main {
  align-items: stretch; gap: 0; padding: 12px 22px 12px;
  background: radial-gradient(ellipse at 50% 34%, rgba(242, 193, 78, 0.13), rgba(14, 18, 38, 0.55) 52%, rgba(10, 13, 28, 0.8));
  border: 2px solid rgba(201, 162, 74, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 230, 160, 0.12);
}
#eco .forgemode .eco-side { gap: 10px; background: rgba(10, 13, 28, 0.6); border: 2px solid rgba(201, 162, 74, 0.4); }
/* upgrade mode tabs: two words with a divider, the chosen one gold with a line under it */
.fg-tabs { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 0 10px; }
.fg-tabs i { width: 1px; height: 18px; background: rgba(201, 162, 74, 0.6); }
.fg-tabs button { position: relative; border: 0; background: none; padding: 4px 2px; font: 700 1.05rem var(--thai); color: rgba(246, 238, 219, 0.5); cursor: pointer; }
.fg-tabs button.on { color: #ffe7a6; }
.fg-tabs button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f2c14e, transparent); }
.fg-tabs button:not(.on):hover { color: var(--cream); }
/* the stage: [piece] — diamond + ring + anvil — [stone] */
.fg-stage { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 0 2px; }
.fg-stage::before { content: ''; position: absolute; left: 16%; right: 16%; top: 46%; height: 2px; background: linear-gradient(90deg, rgba(201, 162, 74, 0.1), rgba(201, 162, 74, 0.7), rgba(201, 162, 74, 0.1)); z-index: 0; }
.fg-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fg-side small { max-width: 150px; font: 600 0.82rem/1.3 var(--thai); color: var(--cream-2); text-align: center; }
.fg-slot {
  --gc: rgba(201, 162, 74, 0.25);
  position: relative; width: 92px; height: 92px; display: grid; place-items: center; padding: 0;
  border: 3px solid #c9a24a; border-radius: 10px; background: linear-gradient(160deg, rgba(36, 44, 82, 0.96), rgba(14, 18, 38, 0.98));
  box-shadow: 0 0 0 3px #2c2533, inset 0 0 0 3px rgba(10, 13, 28, 0.9), inset 0 0 18px var(--gc); color: var(--cream);
}
.fg-slot.g0 { --gc: rgba(201, 194, 176, 0.35); } .fg-slot.g1 { --gc: rgba(127, 224, 122, 0.45); } .fg-slot.g2 { --gc: rgba(95, 180, 255, 0.5); }
.fg-slot.g3 { --gc: rgba(194, 123, 255, 0.55); } .fg-slot.g4 { --gc: rgba(255, 179, 64, 0.6); } .fg-slot.g5 { --gc: rgba(255, 90, 106, 0.6); }
.fg-slot img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.fg-slot > em { position: absolute; right: 4px; bottom: 2px; font: 800 0.95rem Fredoka, sans-serif; font-style: normal; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.fg-slot em.cnt { color: #fff; }
.fg-plusmark { font: 300 2.4rem/1 Fredoka, sans-serif; color: rgba(246, 238, 219, 0.35); }
.fg-dropmark { font-size: 1.6rem; color: rgba(246, 238, 219, 0.3); }
button.fg-matslot { cursor: pointer; }
button.fg-matslot:hover { filter: brightness(1.12); }
.fg-matslot.short em.cnt { color: #ff9a8a; }
.fg-stack { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; gap: 2px; }
.fg-stack img { width: 100%; height: 100%; }
.fg-two { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; padding: 2px; }
.fg-two span { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.fg-two span img { width: 70%; height: 70%; }
.fg-two span em.cnt { position: absolute; right: 4px; bottom: 0; font: 800 0.8rem Fredoka, sans-serif; font-style: normal; text-shadow: 0 1px 2px #000; }
/* the core: a gold diamond, the ring with the rates, the anvil overlapping the ring's bottom */
.fg-core { position: relative; z-index: 1; width: 236px; height: 250px; display: grid; place-items: center; }
.fg-diamond {
  position: absolute; left: 50%; top: 44%; width: 170px; height: 170px; transform: translate(-50%, -50%) rotate(45deg);
  border: 3px solid rgba(201, 162, 74, 0.85); border-radius: 8px; background: linear-gradient(135deg, rgba(36, 44, 82, 0.9), rgba(12, 15, 32, 0.95));
  box-shadow: 0 0 0 3px #2c2533, 0 0 0 9px rgba(201, 162, 74, 0.18), 0 0 30px rgba(242, 193, 78, 0.2);
}
.fg-ring {
  position: absolute; left: 50%; top: 44%; width: 150px; height: 150px; transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: radial-gradient(circle at 50% 35%, rgba(70, 60, 120, 0.95), rgba(26, 22, 56, 0.98) 70%);
  border: 6px double #e2b85a; box-shadow: 0 0 0 3px #2c2533, inset 0 0 18px rgba(0, 0, 0, 0.7);
}
.fg-ring span { display: flex; flex-direction: column; font: 600 0.78rem/1.25 var(--thai); color: #f3e6c4; }
.fg-ring span b { font: 800 1.35rem/1.1 Fredoka, sans-serif; color: #fff; }
.fg-ring .fg-ok b { color: #ffe27a; }
.fg-ring .fg-down b { color: #d6d0f0; }
.fg-ring .fg-down.bad b { color: #ff9a8a; }
.fg-ring .fg-down { padding-top: 4px; border-top: 1px solid rgba(226, 184, 90, 0.4); }
.fg-anvil { position: absolute; left: 50%; bottom: 6px; width: 104px; height: 104px; transform: translateX(-50%); object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.fg-res {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 3; white-space: nowrap; padding: 6px 16px; border-radius: 999px;
  font: 800 1.15rem Mali, Fredoka, sans-serif; border: 3px solid #2c2533; animation: fgPop 0.5s cubic-bezier(.2, 1.6, .4, 1) both;
}
.fg-res.ok { background: linear-gradient(#ffe48a, #f2c14e); color: #3a2a20; box-shadow: 0 0 26px rgba(255, 220, 110, 0.9); }
.fg-res.fail { background: #3a4466; color: #e9ecff; }
.fg-res.down { background: #a8323a; color: #fff; }
.fg-res.many { background: #2e3a6e; color: #ffe7a6; }
.fg-core.fx-ok .fg-diamond { animation: fgFlash 0.9s ease-out; }
.fg-core.fx-down .fg-ring { animation: fgShake 0.45s ease-in-out; }
@keyframes fgPop { from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; } }
@keyframes fgFlash { 0% { box-shadow: 0 0 0 3px #2c2533, 0 0 0 12px rgba(255, 230, 140, 0.8), 0 0 90px rgba(255, 220, 110, 0.95); } }
@keyframes fgShake { 20%, 60% { transform: translate(calc(-50% - 6px), -50%); } 40%, 80% { transform: translate(calc(-50% + 6px), -50%); } }
@media (prefers-reduced-motion: reduce) { .fg-res, .fg-core .fg-diamond, .fg-core .fg-ring { animation: none !important; } }
/* the enhancement's animation (js/forgefx.js): the piece lent to the anvil, the core jolting under the hammer, the skip chip */
.fg-slot.fgx-lent img { opacity: 0.25; filter: grayscale(0.6); }
.fg-core.fgx-jolt { animation: fgxJolt 0.16s ease-out; }
@keyframes fgxJolt { 30% { transform: translateY(4px) scale(0.985); } }
.fg-tabs .fg-fast { position: static; flex: none; white-space: nowrap; border: 1px dashed rgba(201, 162, 74, 0.6); border-radius: 999px; padding: 2px 10px; font: 600 0.74rem var(--thai); color: rgba(246, 238, 219, 0.6); }
.fg-tabs .fg-fast.on { color: #ffe7a6; border-color: #f2c14e; background: rgba(242, 193, 78, 0.12); }
.fg-tabs .fg-fast.on::after { display: none; }
.fg-tabs { position: relative; }
/* +N -> +N+1, a divider, the stat rows */
.fg-to { text-align: center; font: 800 1.55rem Fredoka, sans-serif; color: var(--cream); margin-top: 2px; }
.fg-to i { font-style: normal; font-size: 0.8em; color: #c9a24a; margin: 0 8px; }
.fg-to b { color: #ffb347; }
.fg-to.dim, .fg-to .dim { color: rgba(246, 238, 219, 0.35); font-size: 1.1rem; }
.fg-line { position: relative; height: 2px; margin: 8px 6% 6px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.75), transparent); }
.fg-line::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg); background: #e2b85a; }
.fg-rows { list-style: none; margin: 0 6%; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fg-rows li { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font: 600 0.92rem var(--thai); }
.fg-rows li span::before { content: '◆'; margin-right: 8px; font-size: 0.6rem; color: #c9a24a; vertical-align: 2px; }
.fg-rows li b { font: 700 0.95rem Fredoka, var(--thai); color: var(--cream); }
.fg-rows li b i { font-style: normal; color: #c9a24a; margin: 0 6px; font-size: 0.85em; }
.fg-rows li b em { font-style: normal; color: #7fe07a; }
.fg-note { text-align: center; font: 500 0.88rem var(--thai); color: var(--cream-2); padding: 6px 0; }
.fg-scroll { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(10, 13, 28, 0.6); border: 1px solid rgba(201, 162, 74, 0.45); font: 600 0.84rem var(--thai); color: var(--cream-2); cursor: pointer; }
.fg-scroll img { width: 24px; height: 24px; }
.fg-scroll.on { border-color: #8be37b; color: #c6f08a; }
.fg-multi { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 6%; }
.fg-mcell { position: relative; width: 50px; height: 50px; border-radius: 9px; border: 2px solid #a9a395; background: rgba(10, 14, 30, 0.6); display: grid; place-items: center; }
.fg-mcell.g1 { border-color: #7fe07a; } .fg-mcell.g2 { border-color: #5fb4ff; } .fg-mcell.g3 { border-color: #c27bff; } .fg-mcell.g4 { border-color: #ffb340; } .fg-mcell.g5 { border-color: #ff5a6a; }
.fg-mcell img { width: 84%; height: 84%; object-fit: contain; }
.fg-mcell em { position: absolute; right: 2px; bottom: 0; font: 800 0.72rem Fredoka, sans-serif; font-style: normal; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.fg-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 3px 10px; margin: 10px 4% 0; padding: 8px 12px; border-radius: 10px; background: rgba(10, 13, 28, 0.75); border: 1px solid rgba(201, 162, 74, 0.4); font: 600 0.8rem var(--thai); }
.fg-rates b, .fg-rates small { grid-column: 1 / -1; }
.fg-rates b { color: #ffe7a6; }
.fg-rates small { color: var(--cream-2); font-weight: 500; }
.fg-rates span { display: flex; justify-content: space-between; gap: 4px; }
.fg-rates span em { font-style: normal; font-weight: 700; color: #ffe27a; }
.fg-rates span i { font-style: normal; color: #ff9a8a; }
.fg-spacer { flex: 1; min-height: 8px; }
/* the two big buttons: auto upgrade (with its target) and upgrade (with its cost and SPACE) */
.fg-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.fg-btns.single { grid-template-columns: minmax(0, 360px); justify-content: center; }
.fg-auto { display: flex; flex-direction: column; gap: 6px; }
.fg-auto label { align-self: center; display: flex; align-items: center; gap: 6px; font: 600 0.82rem var(--thai); color: var(--cream-2); }
.fg-auto select { padding: 2px 8px; border-radius: 8px; border: 1px solid rgba(201, 162, 74, 0.6); background: rgba(10, 13, 28, 0.9); color: #ffe7a6; font: 700 0.9rem Fredoka, sans-serif; }
.fg-big {
  position: relative; width: 100%; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 14px;
  border: 3px solid #c9a24a; border-radius: 10px; background: linear-gradient(180deg, #2f6f6a, #1d4a4c); color: #f5f0dc;
  box-shadow: 0 0 0 3px #2c2533, inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 4px 0 #2c2533; font: 700 1.1rem var(--thai); cursor: pointer;
}
.fg-big.alt { background: linear-gradient(180deg, #33406e, #232c52); }
.fg-big.alt.on { background: linear-gradient(180deg, #8a3a3a, #5e2424); }
.fg-big:hover:not([disabled]) { filter: brightness(1.12); }
.fg-big:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 0 0 3px #2c2533, 0 2px 0 #2c2533; }
.fg-big[disabled] { filter: grayscale(0.7) brightness(0.7); cursor: default; }
.fg-big small { display: inline-flex; align-items: center; gap: 4px; padding: 1px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font: 700 0.85rem Fredoka, sans-serif; color: #ffd95a; }
.fg-big small img { width: 18px; height: 18px; }
.fg-big kbd { position: absolute; right: -6px; bottom: -10px; padding: 1px 6px; border-radius: 5px; background: #fff3d6; color: #1f2747; font: 700 0.68rem/1.5 Fredoka, sans-serif; border: 2px solid #2c2533; }
.fg-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.fg-chance { padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(246, 238, 219, 0.4); background: rgba(10, 13, 28, 0.7); color: var(--cream); font: 600 0.85rem var(--thai); cursor: pointer; }
.fg-chance:hover { border-color: #e2b85a; }
/* the list side: the pieces and a rail of categories on its right */
.fg-inv { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 8px; min-height: 0; flex: 1 1 auto; max-height: 52%; }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; align-content: start; overflow-y: auto; padding: 2px 4px 2px 0; }
.fg-rail { display: flex; flex-direction: column; gap: 6px; }
.fg-rail button { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 2px solid rgba(201, 162, 74, 0.35); background: rgba(10, 13, 28, 0.7); cursor: pointer; }
.fg-rail button img { width: 74%; height: 74%; object-fit: contain; filter: grayscale(0.6) brightness(0.8); }
.fg-rail button b { font: 800 0.95rem Fredoka, sans-serif; color: rgba(246, 238, 219, 0.6); }
.fg-rail button.on { border-color: #e2b85a; background: rgba(242, 193, 78, 0.16); box-shadow: inset 0 0 10px rgba(242, 193, 78, 0.3); }
.fg-rail button.on img { filter: none; }
.fg-rail button.on b { color: #ffe7a6; }
.fg-matbar { padding: 6px 12px; border-radius: 8px; text-align: right; font: 700 0.95rem var(--thai); color: #ffe7a6; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.3)); border-bottom: 1px solid rgba(201, 162, 74, 0.5); }
.fg-mats { display: flex; flex-direction: column; gap: 6px; padding: 2px 6px; }
.fg-mats span { display: flex; align-items: center; gap: 8px; font: 600 0.9rem var(--thai); }
.fg-mats span img { width: 28px; height: 28px; object-fit: contain; }
.fg-mats span em { margin-left: auto; font: 700 0.95rem Fredoka, sans-serif; font-style: normal; color: #fff; }
.fg-mats span em.short { color: #ff9a8a; }
.fg-buy { align-self: flex-end; padding: 3px 12px; border-radius: 999px; border: 1px solid rgba(201, 162, 74, 0.6); background: transparent; color: #ffe7a6; font: 600 0.8rem var(--thai); cursor: pointer; }
.fg-buy:hover { background: rgba(242, 193, 78, 0.15); }
.fg-details { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px dashed rgba(201, 162, 74, 0.3); }
.fg-sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fg-switch { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; font: 700 0.9rem var(--thai); color: var(--cream); cursor: pointer; }
.fg-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fg-switch i { position: relative; width: 46px; height: 22px; border-radius: 999px; background: rgba(246, 238, 219, 0.2); border: 1px solid rgba(246, 238, 219, 0.35); transition: background 0.15s; }
.fg-switch i::after { content: 'OFF'; position: absolute; top: 1px; left: 3px; width: 26px; height: 18px; border-radius: 999px; background: #8a8fa8; color: #fff; font: 700 0.55rem/18px Fredoka, sans-serif; text-align: center; transition: left 0.15s, background 0.15s; }
.fg-switch input:checked + i { background: rgba(127, 224, 122, 0.3); border-color: #7fe07a; }
.fg-switch input:checked + i::after { content: 'ON'; left: 15px; background: #3f9a3a; }
.fg-switch input:focus-visible + i { outline: 2px solid #ffe08a; outline-offset: 2px; }
.fg-pickbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fg-small { padding: 9px 8px; border-radius: 8px; border: 2px solid #c9a24a; background: linear-gradient(180deg, #33406e, #232c52); color: #f5f0dc; font: 700 0.88rem var(--thai); box-shadow: 0 0 0 2px #2c2533; cursor: pointer; }
.fg-small:hover { filter: brightness(1.12); }
@media (max-width: 1000px) {
  .fg-core { width: 190px; height: 210px; } .fg-diamond { width: 136px; height: 136px; } .fg-ring { width: 120px; height: 120px; } .fg-anvil { width: 84px; height: 84px; }
  .fg-slot { width: 76px; height: 76px; } .fg-ring span b { font-size: 1.1rem; }
}
/* forge list side: the pieces keep their box, the details scroll under the materials */
#eco .forgemode .eco-side { overflow: hidden; }
.fg-inv { flex: 0 0 auto; height: 40%; max-height: none; overflow: hidden; }
.fg-grid { height: 100%; min-height: 0; }
.fg-rail { overflow-y: auto; }
.fg-details { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
.fg-two { grid-template-rows: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.fg-two span { min-height: 0; overflow: hidden; }
.fg-two span img { max-height: 36px; }
/* forge: one upgrade button, centred under the stat rows */
.fg-btns.single { grid-template-columns: minmax(0, 340px); justify-content: center; margin-bottom: 6px; }
.fg-btns.single .fg-big { min-height: 70px; font-size: 1.2rem; }
/* forge, batch upgrade (อัปเกรดหมู่): 20 registration slots, a divider with the anvil, the stone slot, target levels */
.fgb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }
.fgb-grid { width: 100%; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.fgb-cell {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 6px;
  border: 2px solid rgba(201, 162, 74, 0.35); background: linear-gradient(160deg, rgba(30, 36, 70, 0.95), rgba(12, 15, 32, 0.98));
  box-shadow: inset 0 0 0 2px rgba(10, 13, 28, 0.9); color: rgba(246, 238, 219, 0.28); font: 300 1.4rem/1 Fredoka, sans-serif;
}
button.fgb-cell { cursor: pointer; }
button.fgb-cell:hover { filter: brightness(1.15); }
.fgb-cell.g0 { border-color: #a9a395; } .fgb-cell.g1 { border-color: #7fe07a; } .fgb-cell.g2 { border-color: #5fb4ff; }
.fgb-cell.g3 { border-color: #c27bff; } .fgb-cell.g4 { border-color: #ffb340; } .fgb-cell.g5 { border-color: #ff5a6a; }
.fgb-cell img { width: 82%; height: 82%; object-fit: contain; }
.fgb-cell em { position: absolute; right: 2px; bottom: 0; font: 800 0.72rem Fredoka, sans-serif; font-style: normal; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.fgb-cell.done { opacity: 0.45; }
.fgb-cell.done::after { content: '\2713'; position: absolute; left: 3px; top: 1px; font: 800 0.8rem Fredoka, sans-serif; color: #7fe07a; }
.fgb-sep { width: 100%; display: flex; align-items: center; gap: 12px; }
.fgb-sep i { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.8)); }
.fgb-sep i:last-child { background: linear-gradient(90deg, rgba(201, 162, 74, 0.8), transparent); }
.fgb-sep img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
.fgb-matwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fgb-mat {
  width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 6px;
  border: 3px solid #c9a24a; border-radius: 10px; background: linear-gradient(160deg, rgba(36, 44, 82, 0.96), rgba(14, 18, 38, 0.98));
  box-shadow: 0 0 0 3px #2c2533, inset 0 0 0 3px rgba(10, 13, 28, 0.9); cursor: pointer;
}
.fgb-mat img { width: 56%; height: 56%; object-fit: contain; }
.fgb-mat img:only-child { width: 76%; height: 76%; }
.fgb-mat.short { border-color: #e2553b; }
.fgb-matwrap small { font: 600 0.82rem var(--thai); color: var(--cream-2); }
.fgb-matwrap small b { font: 700 0.85rem Fredoka, sans-serif; color: #fff; }
.fgb-matwrap small b.short { color: #ff9a8a; }
.fgb-goals { width: 100%; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.fgb-goals button {
  padding: 7px 0; border-radius: 6px; border: 2px solid rgba(201, 162, 74, 0.35); background: rgba(16, 20, 42, 0.9);
  color: var(--cream-2); font: 700 0.95rem Fredoka, sans-serif; cursor: pointer;
}
.fgb-goals button:hover { color: var(--cream); border-color: rgba(226, 184, 90, 0.8); }
.fgb-goals button.risk { color: #ffb8a8; }
.fgb-goals button.on { background: linear-gradient(180deg, #f2c14e, #c9922e); border-color: #ffe08a; color: #2c2533; box-shadow: 0 0 12px rgba(242, 193, 78, 0.6); }
.fgb-msg { min-height: 1.5em; text-align: center; font: 600 0.92rem var(--thai); color: #f3e2b0; }
.fgb .fg-res { top: 34%; }
.fgb.fx-many .fgb-sep img { animation: fgFlash 0.9s ease-out; }
.fg-big small.blank { visibility: hidden; }

/* map editor: when the edits were last saved */
.ed-head h2 small.ed-saved { color: #9fe0a6; }
.ed-head h2 small.ed-saved.bad { color: #ff9a8a; }

/* auto settings: the attack order (1, 2, 3 ...) */
.ac-mob { position: relative; }
.ac-rank { position: absolute; top: 4px; left: 6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--ink); font: 700 0.85rem/22px var(--display); text-align: center; box-shadow: 0 2px 0 #7a4f12; }
.ac-prio { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 16, 34, 0.35); border: 1px solid rgba(255, 214, 120, 0.25); }
.ac-prio:empty { display: none; }
.ac-prio-h { margin: 0; font: 700 0.98rem var(--thai); color: var(--gold); }
.ac-prio-h small { display: block; margin-top: 2px; font-weight: 500; font-size: 0.8em; color: var(--cream-2); }
.ac-prio-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ac-prio-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 10px; background: rgba(246, 238, 219, 0.07); color: var(--cream); font: 600 0.92rem var(--thai); }
.ac-prio-row canvas { width: 36px; height: 36px; flex: none; }
.ac-prio-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 0.95rem/26px var(--display); text-align: center; box-shadow: 0 2px 0 #7a4f12; }
.ac-prio-name { flex: 1; min-width: 0; }
.ac-prio-name small { display: block; font-size: 0.8em; font-weight: 500; color: var(--cream-2); }
.ac-prio-btn { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 2px solid #0c1022; background: #2c3354; color: var(--cream); font: 700 0.8rem var(--display); cursor: pointer; }
.ac-prio-btn:hover:not(:disabled) { background: #3b4470; }
.ac-prio-btn:disabled { opacity: 0.3; cursor: default; }
.ac-prio-btn.rm { color: #ffb0a0; }
.ac-prio-none { color: var(--cream-2); font: 0.88rem var(--thai); padding: 2px 4px; }
.ac-prio-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ac-prio-hint { color: var(--cream-2); font: 0.85rem var(--thai); margin-right: 2px; }
.ac-prio-chip b { display: inline-block; min-width: 18px; margin-right: 5px; border-radius: 999px; background: rgba(255, 214, 120, 0.25); color: var(--gold); text-align: center; }
.ac-prio > .chip { align-self: flex-start; }

/* skill tree: the unlock / put-in-slot button in the details (a click shows the details) */
.tip .sk-act { margin-top: 8px; }
.tip .sk-act .btn { min-width: 160px; }

/* =====================================================================
   UI studio (js/uistudio.js): the things players add, the boxes over the HUD while editing, the panel
   ===================================================================== */
.uis-off { display: none !important; }
#uis-deco { position: absolute; inset: 0; pointer-events: none !important; }
#uis-deco .uis-d { position: absolute; left: 0; top: 0; pointer-events: none; transform-origin: 50% 50%; user-select: none; }
#uis-deco .uis-d.t-btn { pointer-events: auto; cursor: pointer; }
#uis-deco.studio .uis-d { pointer-events: none; }
.uis-d.t-img img { display: block; width: calc(64px * var(--u)); height: auto; filter: drop-shadow(0 calc(2px * var(--u)) calc(2px * var(--u)) rgba(0, 0, 0, 0.35)); }
.uis-d.t-text .uis-txt { display: block; white-space: pre; font: 700 calc(var(--fs, 22) * 1px * var(--u)) / 1.2 var(--thai); color: var(--col, #fff8e8);
  -webkit-text-stroke: calc(var(--fs, 22) * 0.16px * var(--u)) var(--hud-ink); paint-order: stroke fill; }
.uis-d.t-box { width: calc(var(--w, 220) * 1px * var(--u)); height: calc(var(--h, 90) * 1px * var(--u)); border-radius: calc(var(--rad, 16) * 1px * var(--u)); background: var(--bg, rgba(22, 28, 54, 0.6)); }
.uis-d.t-box.bd { border: calc(2px * var(--u)) solid var(--hud-gold); box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink); }
.uis-d.w { display: inline-flex; align-items: center; gap: calc(6px * var(--u)); padding: calc(3px * var(--u)) calc(12px * var(--u)) calc(3px * var(--u)) calc(5px * var(--u));
  border-radius: 999px; border: calc(2px * var(--u)) solid var(--hud-gold); background: var(--hud-navy); box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink);
  color: #fff3d6; font: 700 calc(14px * var(--u)) var(--thai); white-space: nowrap; }
.uis-d.w img { width: calc(24px * var(--u)); height: calc(24px * var(--u)); object-fit: contain; }
.uis-d.t-btn { font-family: var(--thai); }
.uis-d.t-btn:hover { filter: brightness(1.15); }
.uis-d.t-btn kbd { margin-left: calc(2px * var(--u)); padding: 0 calc(5px * var(--u)); border-radius: calc(5px * var(--u)); background: rgba(255, 243, 214, 0.18); font: 700 calc(11px * var(--u)) var(--display); }

#uis-layer { position: absolute; inset: 0; z-index: 7; cursor: default; touch-action: none; }
#uis-layer .uis-box { position: absolute; border: 2px dashed rgba(255, 233, 160, 0.7); border-radius: 8px; background: rgba(255, 233, 160, 0.05); cursor: move; touch-action: none; }
#uis-layer .uis-box:hover { border-color: #ffe9a0; background: rgba(255, 233, 160, 0.12); }
#uis-layer .uis-box.deco { border-color: rgba(159, 216, 240, 0.75); }
#uis-layer .uis-box.off { border-style: dotted; border-color: rgba(255, 150, 140, 0.8); }
#uis-layer .uis-box.sel { border: 2px solid #ffd95a; background: rgba(255, 217, 90, 0.12); box-shadow: 0 0 0 2px #2c2533, 0 0 14px rgba(255, 217, 90, 0.45); z-index: 1; }
#uis-layer .uis-lbl { position: absolute; left: -2px; top: -22px; padding: 1px 8px; border-radius: 7px 7px 7px 0; background: rgba(22, 28, 54, 0.92); color: #ffe9a0; font: 700 11px var(--thai); white-space: nowrap; pointer-events: none; }
#uis-layer .uis-box.sel .uis-lbl { background: #ffd95a; color: var(--ink); }
#uis-layer .uis-box.off .uis-lbl::after { content: ' · ซ่อนอยู่'; color: #ff9a8a; }
#uis-layer .uis-h { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 50%; background: #ffd95a; border: 2px solid #2c2533; cursor: nwse-resize; display: none; }
#uis-layer .uis-box.sel .uis-h, #uis-layer .uis-box:hover .uis-h { display: block; }
#uis-layer .uis-guide { position: absolute; pointer-events: none; background: #ff7ab6; box-shadow: 0 0 6px #ff7ab6; }
#uis-layer .uis-guide.gx { top: 0; bottom: 0; width: 1px; }
#uis-layer .uis-guide.gy { left: 0; right: 0; height: 1px; }

.uis-panel { position: absolute; z-index: 8; left: 40%; top: 16%; width: min(400px, calc(100vw - 16px)); max-height: min(78vh, calc(100vh - 16px)); display: flex; flex-direction: column;
  border-radius: 16px; background: var(--panel); border: 2px solid var(--hud-gold); box-shadow: 0 0 0 2px var(--hud-ink), 0 10px 30px rgba(0, 0, 0, 0.5); color: var(--cream); font-family: var(--thai); overflow: hidden; }
.uis-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px 14px; cursor: grab; touch-action: none; background: rgba(255, 233, 160, 0.06); }
.uis-head:active { cursor: grabbing; }
.uis-title b { display: block; font: 700 1.1rem var(--display); color: var(--gold); }
.uis-title small { display: block; font-size: 0.72rem; color: #9fe0a6; }
.uis-title small.bad { color: #ff9a8a; }
.uis-hbtns { display: flex; gap: 4px; }
.uis-hbtns button { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; border: 2px solid #0c1022; background: #2c3354; color: var(--cream); font: 700 0.9rem var(--display); }
.uis-hbtns button:hover { background: #3b4470; }
.uis-hbtns button.go { background: var(--leaf); color: var(--ink); }
.uis-tabs { display: flex; gap: 4px; padding: 0 10px 6px; }
.uis-tabs button { flex: 1; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(255, 233, 160, 0.25); background: transparent; color: var(--cream-2); font: 700 0.85rem var(--thai); }
.uis-tabs button.on { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.uis-scroll { overflow-y: auto; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.uis-panel.folded .uis-tabs, .uis-panel.folded .uis-scroll, .uis-panel.folded .uis-tip { display: none; }
.uis-sel { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 217, 90, 0.08); border: 1px solid rgba(255, 217, 90, 0.4); }
.uis-sel h4 { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 0.98rem var(--thai); color: var(--gold); }
.uis-sel h4 img { width: 28px; height: 28px; object-fit: contain; }
.uis-sel h4 button { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--cream); }
.uis-body { display: flex; flex-direction: column; gap: 8px; }
.uis-body h5 { margin: 6px 0 0; font: 700 0.92rem var(--thai); color: var(--gold); }
.uis-body h5 small, .uis-note { font-weight: 500; font-size: 0.78rem; color: var(--cream-2); margin-left: 6px; }
.uis-note { margin: 0; }
.uis-sl { display: flex; flex-direction: column; gap: 2px; font: 600 0.82rem var(--thai); }
.uis-sl span { display: flex; justify-content: space-between; }
.uis-sl b { color: var(--gold); }
.uis-sl input { width: 100%; accent-color: var(--gold); }
.uis-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 0.82rem var(--thai); }
.uis-in input[type=text] { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255, 233, 160, 0.4); background: rgba(0, 0, 0, 0.25); color: var(--cream); font: 600 0.9rem var(--thai); }
.uis-in input[type=color] { width: 54px; height: 28px; padding: 0; border: 2px solid #0c1022; border-radius: 8px; background: none; cursor: pointer; }
.uis-chk { display: flex; align-items: center; gap: 8px; font: 600 0.82rem var(--thai); cursor: pointer; }
.uis-chk input { accent-color: var(--gold); width: 16px; height: 16px; }
.uis-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.uis-btns button, .uis-slot button { padding: 5px 10px; border-radius: 9px; border: 2px solid #0c1022; background: #2c3354; color: var(--cream); font: 700 0.8rem var(--thai); }
.uis-btns button:hover:not(:disabled), .uis-slot button:hover:not(:disabled) { background: #3b4470; }
.uis-btns button.danger { background: #6a2a30; color: #ffd6cc; }
.uis-btns button:disabled, .uis-slot button:disabled { opacity: 0.4; }
.uis-list { display: flex; flex-direction: column; gap: 3px; }
.uis-row { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 9px; }
.uis-row.on { background: rgba(255, 217, 90, 0.16); }
.uis-row.off .name { opacity: 0.5; text-decoration: line-through; }
.uis-row .eye { flex: none; width: 30px; height: 28px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.08); }
.uis-row .name { flex: 1; display: flex; align-items: center; gap: 8px; padding: 3px 6px; border: 0; border-radius: 8px; background: transparent; color: var(--cream); font: 600 0.86rem var(--thai); text-align: left; }
.uis-row .name:hover { background: rgba(255, 255, 255, 0.08); }
.uis-row .name img { width: 24px; height: 24px; object-fit: contain; }
.uis-row .name i { margin-left: auto; font-style: normal; font-size: 0.7rem; color: #9fe0a6; }
.uis-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.uis-theme { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.05); color: var(--cream); font: 600 0.78rem var(--thai); }
.uis-theme.on { border-color: var(--gold); background: rgba(255, 217, 90, 0.12); }
.uis-theme .sw { display: flex; gap: 4px; padding: 5px 8px; border-radius: 8px; border: 2px solid; }
.uis-theme .sw i { width: 12px; height: 12px; border-radius: 50%; }
.uis-cols { display: flex; flex-direction: column; gap: 6px; }
.uis-grid { display: grid; gap: 6px; }
.uis-grid.w { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.uis-grid.s { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.uis-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 3px; min-height: 52px; border-radius: 10px; border: 1px solid rgba(255, 233, 160, 0.2); background: rgba(255, 255, 255, 0.05); color: var(--cream); font: 600 0.74rem var(--thai); }
.uis-grid button:hover { background: rgba(255, 217, 90, 0.16); border-color: var(--gold); }
.uis-grid button img { width: 34px; height: 34px; object-fit: contain; }
.uis-grid.s button img { width: 42px; height: 42px; }
.uis-slots { display: flex; flex-direction: column; gap: 6px; }
.uis-slot { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font: 600 0.82rem var(--thai); }
.uis-slot small { flex: 1; color: var(--cream-2); }
.uis-code { width: 100%; box-sizing: border-box; resize: vertical; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 233, 160, 0.4); background: rgba(0, 0, 0, 0.3); color: var(--cream); font: 0.72rem/1.3 monospace; }
.uis-tip { margin: 0; padding: 6px 12px 8px; font: 0.72rem/1.35 var(--thai); color: var(--cream-2); border-top: 1px solid rgba(255, 233, 160, 0.15); }

/* AUTO on the action bar (right of the item slots): its key on top like the slots', a glow while it runs */
.auto-btn.docked .auto-label { display: none; }
.auto-btn.docked::after {
  content: attr(data-key); position: absolute; left: 50%; top: calc(-10px * var(--u, 1)); transform: translateX(-50%);
  min-width: calc(18px * var(--u, 1)); padding: 0 calc(5px * var(--u, 1)); border-radius: calc(5px * var(--u, 1));
  background: #fff3dc; border: calc(2px * var(--u, 1)) solid #2c2533; color: #2c2533;
  font: 700 calc(11px * var(--u, 1)) / 1.25 var(--display); text-align: center; pointer-events: none;
}
.auto-btn.docked.on::after { background: #ffd84a; animation: auto-pulse 1.2s ease-in-out infinite; }
.auto-btn.docked.on .auto-img { filter: drop-shadow(0 0 calc(6px * var(--u, 1)) rgba(255, 216, 74, 0.9)); }
@media (prefers-reduced-motion: reduce) { .auto-btn.docked.on::after { animation: none; } }

/* UI studio inside the windows: the ✎ button by a window's ✕, the parts' boxes, the panel without its tabs */
#uis-winbtn { position: absolute; z-index: 6; height: 30px; padding: 0 10px; border-radius: 10px; border: 2px solid #2c2533; background: var(--gold); color: var(--ink); font: 700 0.82rem var(--thai); box-shadow: 0 2px 0 #2c2533; cursor: pointer; }
#uis-winbtn:hover { filter: brightness(1.08); }
#uis-winbtn kbd { margin-left: 4px; padding: 0 5px; border-radius: 5px; background: rgba(44, 37, 51, 0.15); font: 700 0.72rem var(--display); }
#uis-layer .uis-box.wpart { border-color: rgba(143, 207, 106, 0.8); }
#uis-layer .uis-box.wpart.sel { border-color: #ffd95a; }
.uis-panel.winmode .uis-tabs { display: none; }
#eco.uis-free .eco-main, #eco.uis-free .eco-side, #eco.uis-free .eco-body { overflow: visible; }

/* skill window, balanced: the class's skills in the middle (actives beside the ultimate, the passives under them),
   the slots centred under; the details card floats beside the skill that was clicked and only then */
.tree-page { grid-template-columns: auto auto; justify-content: center; column-gap: 64px; row-gap: 18px; padding: 16px 24px 20px; }
.tp-head { text-align: center; }
.tp-group { align-items: center; }
.tp-title { text-align: center; }
.tp-row { justify-content: center; gap: 16px; }
.sk-cell { width: 84px; }
.sk-cell .sk { width: 72px; height: 72px; }
.sk-cell .sk canvas { width: 56px; height: 56px; }
.tree-foot { display: flex; justify-content: center; }
#tree .tip { position: absolute; z-index: 4; width: min(380px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; min-height: 0;
  background: #2b355c; border: 2px solid var(--gold); box-shadow: 0 0 0 2px #121730, 0 14px 32px rgba(0, 0, 0, 0.55); padding: 12px 16px 14px; }
#tree .tip-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, 0.1); color: var(--cream); font-weight: 700; }
#tree .tip-x:hover { background: rgba(255, 255, 255, 0.2); }
#tree .tip h4 { padding-right: 30px; }
#tree .equip-row { justify-content: center; }

/* skill window: dragging a skill onto a slot */
#tree .tree-page .sk, #tree .equip-row .eq { touch-action: none; }
.sk-ghost { position: fixed; z-index: 50; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; pointer-events: none;
  border-radius: 12px; border: 3px solid var(--gold); background: #2b355c; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); transform: rotate(-4deg) scale(1.05); }
.sk-ghost canvas { width: 50px; height: 50px; }
body.sk-dragging, body.sk-dragging * { cursor: grabbing !important; user-select: none; }
#tree .eq.drop-ok { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.35); }
#tree .eq.drop-no { opacity: 0.4; }
#tree .eq.drop-hover { transform: scale(1.1); box-shadow: 0 0 0 4px var(--gold), 0 0 18px rgba(242, 201, 76, 0.85); }
#tree .eq { transition: transform 0.08s; }

/* the quest box folded to its title line (− / +) */
#questbox .q-fold { margin-left: 4px; width: 22px; height: 22px; padding: 0; border-radius: 7px; border: 1px solid rgba(255, 231, 166, 0.6); background: rgba(255, 231, 166, 0.12); color: #ffe7a6; font: 700 0.95rem/1 Fredoka, sans-serif; cursor: pointer; }
#questbox .q-fold:hover { background: rgba(255, 231, 166, 0.3); }
#questbox.folded { width: auto; min-width: calc(170px * var(--u)); padding-top: calc(5px * var(--u)); padding-bottom: calc(5px * var(--u)); opacity: 0.9; }
#questbox.folded:hover { opacity: 1; }
#questbox.folded .q-head span { white-space: nowrap; }

/* =====================================================================
   Character window (js/charinfo.js): CP plate, key numbers, and five looks (รูปแบบ 1–5 at the top)
   ===================================================================== */
.ci-vpick { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 10px; font: 600 0.8rem var(--thai); color: var(--cream-2); }
.ci-vpick span { margin-right: 4px; }
.ci-vpick button { width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 2px solid rgba(201, 162, 74, 0.6); background: rgba(0, 0, 0, 0.3); color: var(--cream); font: 700 0.9rem Fredoka, sans-serif; cursor: pointer; }
.ci-vpick button:hover { background: rgba(242, 210, 122, 0.25); }
.ci-vpick button.on { background: #f2d27a; color: var(--ink); border-color: #f2d27a; }
#charpanel .ci-panel { max-height: 100%; }
#charpanel .ci-body { min-height: 0; overflow-y: auto; }

.ci-cp { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "badge main" "parts parts"; align-items: center; gap: 4px 10px; padding: 8px 12px 10px;
  border-radius: 14px; background: linear-gradient(180deg, #34407a, #1a2142); border: 2px solid #e2b955; box-shadow: 0 0 0 2px #2c2533, inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.ci-cpbadge { grid-area: badge; width: 58px; height: 58px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.ci-cpmain { grid-area: main; display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.ci-cpmain small { font: 600 0.78rem var(--thai); color: var(--cream-2); }
.ci-cpmain b { font: 700 2rem Fredoka, sans-serif; color: #fff; text-shadow: 0 2px 0 #1d2440, 0 0 12px rgba(255, 217, 90, 0.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ci-cpmain b i { font-style: normal; font-size: 0.55em; color: #ffd95a; margin-right: 8px; vertical-align: 0.25em; }
.ci-cpparts { grid-area: parts; display: flex; flex-wrap: wrap; gap: 6px; }
.ci-cpparts span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); font: 600 0.74rem var(--thai); color: var(--cream-2); }
.ci-cpparts img { width: 20px; height: 20px; object-fit: contain; }
.ci-cpparts b { font: 700 0.84rem Fredoka, sans-serif; color: #fff; }
.ci-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ci-kcell { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 74, 0.35); font: 600 0.78rem var(--thai); color: var(--cream-2); }
.ci-kcell img { width: 26px; height: 26px; object-fit: contain; }
.ci-kcell b { font: 700 0.98rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }

/* looks 2–5 lay the pieces out on one grid (the two boxes step aside) */
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) :is(.ci-card, .ci-statbox) { display: contents; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-hero-name { grid-area: name; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-cp { grid-area: cp; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-stage { grid-area: stage; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-bars { grid-area: bars; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-key { grid-area: key; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-head { grid-area: head; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-stat-list { grid-area: stats; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-tools { grid-area: tools; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-tabs { grid-area: tabs; align-self: end; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) .ci-pane { grid-area: pane; }
.ci-panel:is(.ci-v2, .ci-v3, .ci-v4, .ci-v5) :is(.ci-stat-list, .ci-pane) { padding: 8px; border-radius: 14px; background: rgba(12, 16, 34, 0.55); border: 1px solid rgba(201, 162, 74, 0.4); }

/* 2 · โชว์ฮีโร่: the hero in the middle in a glow, stats on the left, the details on the right */
#charpanel .ci-panel.ci-v2 { width: min(1220px, 100%); }
.ci-v2 .ci-body { grid-template-columns: 290px minmax(0, 1fr) 330px; gap: 10px 16px; align-items: start;
  grid-template-areas: "head name tabs" "stats cp pane" "stats stage pane" "tools stage pane" "key bars pane"; }
.ci-v2 .ci-hero-name { justify-content: center; }
.ci-v2 .ci-lv { margin-left: 8px; }
.ci-v2 .ci-stage { padding: 10px; border-radius: 18px; background: radial-gradient(circle at 50% 45%, rgba(255, 233, 160, 0.2), rgba(12, 16, 34, 0.55) 70%); border: 2px solid rgba(201, 162, 74, 0.55); }
.ci-v2 .ci-stat-list { align-self: stretch; justify-content: space-around; }
.ci-v2 .ci-key { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ci-v2 .ci-pane { max-height: 560px; align-self: stretch; }
.ci-v2 .ci-cp { grid-template-columns: 58px auto; justify-content: center; }
.ci-v2 .ci-cpparts { justify-content: center; }

/* 3 · การ์ดสถานะ: a banner on top (name · CP · key numbers), the hero left, the stats right */
#charpanel .ci-panel.ci-v3 { width: min(1080px, 100%); }
.ci-v3 .ci-body { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 14px; align-items: start;
  grid-template-areas: "name name cp cp key key" "stage stage stage head head head" "stage stage stage stats stats stats" "stage stage stage tools tools tools"
    "bars bars bars tabs tabs tabs" "bars bars bars pane pane pane"; }
.ci-v3 :is(.ci-hero-name, .ci-key) { align-self: stretch; padding: 10px 12px; border-radius: 14px; background: linear-gradient(180deg, rgba(52, 64, 122, 0.6), rgba(26, 33, 66, 0.6)); border: 1px solid rgba(201, 162, 74, 0.55); }
.ci-v3 .ci-hero-name { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.ci-v3 .ci-lv { margin-left: 0; margin-top: 4px; }
.ci-v3 .ci-cp { align-self: stretch; }
.ci-v3 .ci-kcell { padding: 3px 7px; }
.ci-v3 .ci-pane { max-height: 240px; }

/* 4 · กะทัดรัด: one narrow column, the stats in two columns */
#charpanel .ci-panel.ci-v4 { width: min(720px, 100%); }
.ci-v4 .ci-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  grid-template-areas: "name name" "cp cp" "stage stage" "bars key" "head head" "stats stats" "tools tools" "tabs tabs" "pane pane"; }
.ci-v4 .ci-cp { grid-template-columns: 52px auto minmax(0, 1fr); grid-template-areas: "badge main parts"; }
.ci-v4 .ci-cpbadge { width: 52px; height: 52px; }
.ci-v4 .ci-cpparts { justify-content: flex-end; }
.ci-v4 .ci-stage { grid-template-columns: 64px minmax(0, 250px) 64px; justify-content: center; }
.ci-v4 .ci-slot { width: 64px; height: 64px; }
.ci-v4 .ci-slot img { width: 42px; height: 42px; }
.ci-v4 .ci-stat-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ci-v4 .ci-key { grid-template-columns: minmax(0, 1fr); }
.ci-v4 .ci-pane { max-height: 260px; }

/* 5 · มืดหรู: a dark window with thin gold lines, the hero large on the left, a big gold CP on the right */
#charpanel .ci-panel.ci-v5 { width: min(1120px, 100%); background: linear-gradient(180deg, #171b26, #0d1017); border: 1px solid #8a7440; border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0, 0, 0, 0.6); }
.ci-v5 .panel-head h2 { color: #e8d7a8; letter-spacing: 0.04em; }
.ci-v5 .ci-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px 22px;
  grid-template-areas: "name cp" "stage key" "stage head" "stage stats" "bars tools" "tabs tabs" "pane pane"; }
.ci-v5 .ci-hero-name b { color: #f3dfa2; }
.ci-v5 .ci-lv { background: #e2b955; }
.ci-v5 .ci-cp { background: linear-gradient(90deg, rgba(226, 185, 85, 0.2), rgba(226, 185, 85, 0)); border: 0; border-left: 3px solid #e2b955; border-radius: 4px; box-shadow: none; }
.ci-v5 .ci-cpmain b { color: #f3dfa2; font-size: 2.3rem; text-shadow: 0 0 14px rgba(226, 185, 85, 0.35); }
.ci-v5 .ci-stage { padding: 10px 0; background: radial-gradient(ellipse at 50% 60%, rgba(226, 185, 85, 0.12), transparent 70%); border-top: 1px solid rgba(226, 185, 85, 0.35); border-bottom: 1px solid rgba(226, 185, 85, 0.35); }
.ci-v5 .ci-hero { border: 1px solid #8a7440; box-shadow: none; border-radius: 6px; }
.ci-v5 :is(.ci-stat, .ci-kcell, .ci-srow) { background: rgba(255, 255, 255, 0.03); border: 0; border-bottom: 1px solid rgba(226, 185, 85, 0.2); border-radius: 0; }
.ci-v5 :is(.ci-stat-list, .ci-pane) { background: none; border: 0; border-radius: 0; padding: 0; }
.ci-v5 :is(.ci-sname b, .ci-head > b, .ci-sgroup > b) { color: #e8d7a8; }
.ci-v5 .ci-pane .ci-sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ci-v5 .ci-pane { max-height: 200px; border-top: 1px solid rgba(226, 185, 85, 0.35); padding-top: 8px; }
.ci-v5 .ci-tab { border-radius: 4px; }
.ci-v5 .ci-tab.on { background: #e2b955; border-color: #e2b955; }
.ci-v5 .ci-pts { border-radius: 4px; border-color: #8a7440; }

/* character window: the hero's box bigger in every look, the backdrop button on its corner */
.ci-herobox { position: relative; min-width: 0; }
.ci-herobox .ci-hero { border-radius: 18px; }
.ci-bgbtn { position: absolute; top: 8px; right: 8px; padding: 3px 10px; border-radius: 999px; border: 2px solid #2c2533; background: rgba(255, 248, 230, 0.88); color: var(--ink); font: 700 0.72rem var(--thai); cursor: pointer; opacity: 0.85; }
.ci-bgbtn:hover { opacity: 1; background: #fff8e6; }
#charpanel .ci-panel.ci-v1 { width: min(1080px, 100%); }
.ci-v1 .ci-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.ci-v1 .ci-stage { grid-template-columns: 70px minmax(0, 1fr) 70px; }
.ci-v1 .ci-slot, .ci-v3 .ci-slot { width: 70px; height: 70px; }
.ci-v1 .ci-slot img, .ci-v3 .ci-slot img { width: 48px; height: 48px; }
#charpanel .ci-panel.ci-v3 { width: min(1180px, 100%); }
.ci-v3 .ci-body { grid-template-columns: repeat(3, minmax(0, 1.25fr)) repeat(3, minmax(0, 1fr)); }
.ci-v3 .ci-stage { grid-template-columns: 70px minmax(0, 1fr) 70px; }
.ci-v4 .ci-stage { grid-template-columns: 64px minmax(0, 360px) 64px; }
.ci-v5 .ci-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

/* the training ground's damage meter (js/training.js): left column under the character, HUD navy + gold */
#train-meter { position: absolute; z-index: 2; width: calc(270px * var(--u)); display: flex; flex-direction: column; gap: calc(6px * var(--u)); padding: calc(8px * var(--u)) calc(10px * var(--u));
  border-radius: calc(14px * var(--u)); background: var(--hud-navy); border: calc(2px * var(--u)) solid var(--hud-gold); box-shadow: 0 0 0 calc(2px * var(--u)) var(--hud-ink), 0 4px 10px rgba(0, 0, 0, 0.35);
  color: #fff3d6; font: 600 calc(12px * var(--u)) var(--thai); pointer-events: auto; }
#train-meter .tr-head { display: flex; align-items: center; gap: calc(6px * var(--u)); }
#train-meter .tr-head b { flex: 1; font: 700 calc(14px * var(--u)) var(--thai); color: #ffe7a6; }
#train-meter .tr-head button { height: calc(22px * var(--u)); min-width: calc(22px * var(--u)); padding: 0 calc(7px * var(--u)); border-radius: calc(7px * var(--u)); border: 1px solid rgba(255, 231, 166, 0.6); background: rgba(255, 231, 166, 0.12); color: #ffe7a6; font: 700 calc(11px * var(--u)) var(--thai); cursor: pointer; }
#train-meter .tr-head button:hover { background: rgba(255, 231, 166, 0.3); }
#train-meter .tr-dps { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: calc(8px * var(--u)); padding: calc(4px * var(--u)) calc(8px * var(--u)); border-radius: calc(10px * var(--u)); background: rgba(0, 0, 0, 0.3); }
#train-meter .tr-dps small { font: 700 calc(12px * var(--u)) Fredoka, sans-serif; color: #ffd95a; }
#train-meter .tr-dps b { font: 700 calc(26px * var(--u)) Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #1d2440; }
#train-meter .tr-dps span { grid-column: 1 / -1; font-size: calc(11px * var(--u)); color: var(--cream-2); }
#train-meter .tr-dps em { font-style: normal; font-weight: 700; color: #fff; }
#train-meter .tr-empty { padding: calc(6px * var(--u)); border-radius: calc(10px * var(--u)); background: rgba(0, 0, 0, 0.25); text-align: center; color: var(--cream-2); }
#train-meter .tr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(4px * var(--u)); }
#train-meter .tr-stats span { display: flex; flex-direction: column; align-items: center; padding: calc(3px * var(--u)) 0; border-radius: calc(8px * var(--u)); background: rgba(0, 0, 0, 0.25); font-size: calc(10px * var(--u)); color: var(--cream-2); }
#train-meter .tr-stats b { font: 700 calc(14px * var(--u)) Fredoka, sans-serif; color: #fff; }
#train-meter .tr-src { display: flex; flex-direction: column; gap: calc(3px * var(--u)); }
#train-meter .tr-row { position: relative; display: grid; grid-template-columns: calc(22px * var(--u)) minmax(0, 1fr) auto calc(34px * var(--u)); align-items: center; gap: calc(6px * var(--u)); padding: calc(2px * var(--u)) calc(6px * var(--u)); border-radius: calc(8px * var(--u)); background: rgba(0, 0, 0, 0.22); overflow: hidden; }
#train-meter .tr-row > * { position: relative; z-index: 1; }
#train-meter .tr-row i { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(255, 217, 90, 0.28), rgba(255, 217, 90, 0.08)); }
#train-meter .tr-row img { width: calc(22px * var(--u)); height: calc(22px * var(--u)); object-fit: contain; border-radius: calc(5px * var(--u)); }
#train-meter .tr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#train-meter .tr-name small { margin-left: calc(4px * var(--u)); font-size: calc(9px * var(--u)); color: #ffb08a; }
#train-meter .tr-row b { font: 700 calc(12px * var(--u)) Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#train-meter .tr-row em { font: 700 calc(11px * var(--u)) Fredoka, sans-serif; font-style: normal; color: #ffd95a; text-align: right; }
#train-meter .tr-lv { display: flex; flex-direction: column; gap: calc(4px * var(--u)); }
#train-meter .tr-lv b { color: #ffd95a; }
#train-meter .tr-lv div { display: flex; flex-wrap: wrap; gap: calc(3px * var(--u)); }
#train-meter .tr-lv button { padding: calc(2px * var(--u)) calc(7px * var(--u)); border-radius: 999px; border: 1px solid rgba(255, 231, 166, 0.5); background: rgba(0, 0, 0, 0.25); color: var(--cream); font: 700 calc(11px * var(--u)) var(--thai); cursor: pointer; }
#train-meter .tr-lv button.on { background: #ffd95a; color: var(--ink); border-color: #ffd95a; }
#train-meter .tr-free { display: flex; align-items: center; flex-wrap: wrap; gap: calc(5px * var(--u)); cursor: pointer; }
#train-meter .tr-free input { accent-color: var(--gold); width: calc(15px * var(--u)); height: calc(15px * var(--u)); }
#train-meter .tr-free small { width: 100%; padding-left: calc(20px * var(--u)); font-size: calc(10px * var(--u)); color: var(--cream-2); }
#train-meter .tr-tip { margin: 0; font-size: calc(10px * var(--u)); line-height: 1.4; color: var(--cream-2); }

/* =====================================================================
   The appraisal page (Eco tab "ประเมิน/ออปชั่น"): one piece in the slot, or many at once; ten looks (รูปแบบ 1–10)
   ===================================================================== */
#eco .eco-body.apmode { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.ap-tabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ap-modes { display: flex; gap: 4px; flex-wrap: wrap; }
.ap-modes button { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(201, 162, 74, 0.5); background: rgba(0, 0, 0, 0.3); color: var(--cream-2); font: 700 0.86rem var(--thai); cursor: pointer; }
.ap-modes button.on { background: #f2d27a; color: var(--ink); border-color: #f2d27a; }
.ap-modes em { font-style: normal; margin-left: 2px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 0.72rem; }
.ap-vpick { display: flex; align-items: center; gap: 3px; font: 600 0.74rem var(--thai); color: var(--cream-2); }
.ap-vpick span { margin-right: 3px; }
.ap-vpick button { width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1px solid rgba(201, 162, 74, 0.5); background: rgba(0, 0, 0, 0.3); color: var(--cream); font: 700 0.74rem Fredoka, sans-serif; cursor: pointer; }
.ap-vpick button.on { background: #f2d27a; color: var(--ink); border-color: #f2d27a; }
.ap-work { display: grid; gap: 12px; min-height: 0; align-content: start; }
.eco-body.ap-m-one .ap-many, .eco-body.ap-m-many .ap-one { display: none; }
.ap-one, .ap-many { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: rgba(12, 16, 34, 0.5); border: 1px solid rgba(201, 162, 74, 0.4); min-width: 0; }
.ap-stage { position: relative; width: 220px; height: 220px; display: grid; place-items: center; flex: none; }
.ap-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(242, 210, 122, 0.6); box-shadow: inset 0 0 30px rgba(242, 210, 122, 0.15), 0 0 20px rgba(242, 210, 122, 0.15); }
.ap-ring.r2 { inset: 22px; border-style: dashed; border-width: 2px; opacity: 0.6; animation: apSpin 14s linear infinite; }
@keyframes apSpin { to { transform: rotate(360deg); } }
.ap-slot { position: relative; z-index: 1; width: 112px; height: 112px; padding: 0; display: grid; place-items: center; border-radius: 18px; border: 3px solid var(--gc, #c9a24a); background: radial-gradient(circle, #34407a, #1a2142); box-shadow: 0 0 0 3px #2c2533, 0 0 18px color-mix(in srgb, var(--gc, #c9a24a) 45%, transparent); cursor: pointer; }
.ap-slot img { width: 82px; height: 82px; object-fit: contain; }
.ap-slot b { position: absolute; top: 4px; left: 8px; font: 800 0.86rem Fredoka, sans-serif; color: #ffe27a; text-shadow: 0 1px 2px #000; }
.ap-slot.empty { cursor: default; border-style: dashed; --gc: rgba(242, 210, 122, 0.55); }
.ap-slot.empty span { font: 700 2.4rem Fredoka, sans-serif; color: rgba(255, 255, 255, 0.35); }
:is(.ap-slot, .ap-cell).g0 { --gc: #ece6d6; } :is(.ap-slot, .ap-cell).g1 { --gc: #7fe07a; } :is(.ap-slot, .ap-cell).g2 { --gc: #5fb4ff; }
:is(.ap-slot, .ap-cell).g3 { --gc: #c27bff; } :is(.ap-slot, .ap-cell).g4 { --gc: #ffb340; } :is(.ap-slot, .ap-cell).g5 { --gc: #ff5a6a; }
.ap-lens { position: absolute; right: 4px; bottom: 8px; z-index: 2; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.ap-name { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; text-align: center; }
.ap-name b { font: 700 1.05rem var(--thai); }
.ap-name small { width: 100%; color: var(--cream-2); font-size: 0.76rem; }
.ap-grade { font-style: normal; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--gc); color: var(--gc); font: 700 0.72rem var(--thai); }
.ap-lines { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 4px; }
.ap-q, .ap-o { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); font: 600 0.86rem var(--thai); }
.ap-q { color: rgba(255, 255, 255, 0.45); letter-spacing: 0.12em; }
.ap-q small { letter-spacing: 0; font-size: 0.72rem; }
.ap-o b { margin-left: auto; font: 700 0.92rem Fredoka, sans-serif; }
.ap-o.q0 b { color: #fff; } .ap-o.q1 b { color: #8be37b; } .ap-o.q2 b { color: #7fc8ff; } .ap-o.q3 b { color: #ffd95a; }
.ap-o.q3 { box-shadow: inset 0 0 0 1px rgba(255, 217, 90, 0.7); }
.ap-o i { font-style: normal; font-size: 0.7rem; color: #ffd95a; }
.ap-done { color: #9be37b; font: 700 0.9rem var(--thai); }
.ap-cost { display: flex; align-items: center; gap: 8px; font: 600 0.86rem var(--thai); color: var(--cream-2); }
.ap-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ap-go { position: relative; min-width: 220px; min-height: 48px; padding: 0 30px; border-radius: 14px; border: 3px solid #2c2533; background: linear-gradient(#a6e07e, #5fae4a); color: #fff; font: 700 1.1rem var(--thai); text-shadow: 0 2px 0 #2f5a24; box-shadow: 0 4px 0 #2c2533; cursor: pointer; }
.ap-go:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.ap-go:disabled { filter: grayscale(0.85) brightness(0.8); cursor: default; }
.ap-go kbd { position: absolute; right: 6px; bottom: 3px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.25); font: 700 0.58rem Fredoka, sans-serif; text-shadow: none; }
.ap-sub { padding: 6px 14px; border-radius: 10px; border: 2px solid #2c2533; background: #fff3dc; color: var(--ink); font: 700 0.82rem var(--thai); cursor: pointer; }
.ap-sub:disabled { opacity: 0.5; cursor: default; }
.ap-mhead { width: 100%; display: flex; justify-content: space-between; align-items: baseline; font: 700 0.92rem var(--thai); }
.ap-mhead small { color: var(--cream-2); }
.ap-grid { display: grid; grid-template-columns: repeat(10, 46px); gap: 6px; }
.ap-cell { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 10px; border: 2px solid var(--gc, rgba(201, 162, 74, 0.35)); background: rgba(0, 0, 0, 0.3); cursor: pointer; }
.ap-cell img { width: 36px; height: 36px; object-fit: contain; }
.ap-cell.empty { border-style: dashed; border-color: rgba(201, 162, 74, 0.3); cursor: default; }
.ap-filter { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; font: 600 0.78rem var(--thai); color: var(--cream-2); }
.ap-filter button { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--gc, rgba(201, 162, 74, 0.5)); background: rgba(0, 0, 0, 0.25); color: var(--gc, var(--cream)); font: 700 0.76rem var(--thai); cursor: pointer; }
.ap-filter button.on { background: var(--gc, #f2d27a); color: var(--ink); }
.ap-filter em { font-style: normal; opacity: 0.8; }
.ap-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ap-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font: 600 0.86rem var(--thai); color: var(--cream-2); }
.ap-sum .short { width: 100%; text-align: center; color: #ff9a8a; font-size: 0.74rem; }
.ap-results { width: 100%; max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.ap-results > b { font: 700 0.86rem var(--thai); color: #ffe27a; }
.ap-rrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); font: 600 0.8rem var(--thai); }
.ap-rrow img { width: 28px; height: 28px; object-fit: contain; }
.ap-rrow small { color: var(--cream-2); }
.ap-rrow i { font-style: normal; font-size: 0.72rem; color: #ffd95a; }
.ap-rrow.great { box-shadow: inset 0 0 0 1px #ffd95a; }
.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-lhead { display: flex; justify-content: space-between; align-items: baseline; font: 700 0.95rem var(--thai); color: #fff6dc; }
.ap-lhead small { color: var(--cream-2); }
.ap-note { font: 0.74rem/1.45 var(--thai); color: var(--cream-2); }
.apmode .eco-cell.ap-in { box-shadow: 0 0 0 3px #ffd95a; }
.apmode .eco-cell.ap-in::before { content: '\2713'; position: absolute; z-index: 2; top: -6px; right: -6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #ffd95a; color: #2c2533; font: 800 0.72rem Fredoka, sans-serif; box-shadow: 0 0 0 2px #2c2533; }

/* 2 · แท่นเวทมนตร์: everything centred on a violet magic circle */
.ap-v2 .ap-work { justify-items: center; }
.ap-v2 :is(.ap-one, .ap-many) { width: min(560px, 100%); background: radial-gradient(circle at 50% 22%, rgba(150, 110, 255, 0.35), rgba(30, 20, 60, 0.75) 70%); border-color: rgba(190, 150, 255, 0.6); }
.ap-v2 .ap-ring { border-color: rgba(200, 160, 255, 0.85); box-shadow: inset 0 0 40px rgba(170, 120, 255, 0.35), 0 0 30px rgba(170, 120, 255, 0.4); }
.ap-v2 .ap-ring.r2 { border-color: rgba(255, 220, 255, 0.7); }
.ap-v2 .ap-slot { border-radius: 50%; background: radial-gradient(circle, #5b3fa0, #2a1d55); }
.ap-v2 .ap-go { background: linear-gradient(#c49bff, #7b4fd6); text-shadow: 0 2px 0 #3d2475; }
.ap-v2 .ap-tabs { justify-content: center; }

/* 3 · โต๊ะนักประเมิน: a walnut desk with parchment slips, the list on the left */
#eco .eco-body.ap-v3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ap-v3 .eco-side { order: -1; }
.ap-v3 :is(.ap-one, .ap-many) { background: linear-gradient(180deg, #6a4329, #4a2d1a); border: 2px solid #c08a4a; box-shadow: inset 0 2px 0 rgba(255, 220, 160, 0.2); }
.ap-v3 :is(.ap-q, .ap-o, .ap-rrow) { background: #f3e3c3; color: #4a3020; }
.ap-v3 .ap-q { color: #8a6a4a; }
.ap-v3 .ap-o.q0 b { color: #3a2a20; } .ap-v3 .ap-o.q1 b { color: #2f8a2a; } .ap-v3 .ap-o.q2 b { color: #2a66b0; } .ap-v3 .ap-o.q3 b { color: #b07a10; }
.ap-v3 .ap-ring { border-color: #e2b955; } .ap-v3 .ap-slot { border-radius: 12px; background: radial-gradient(circle, #8a5a3c, #5a3a26); }
.ap-v3 .ap-go { background: linear-gradient(#f2c46a, #c98a2a); text-shadow: 0 2px 0 #6a4a10; }

/* 4 · ผลึกจันทรา: lavender crystal, a faceted slot */
.ap-v4 :is(.ap-one, .ap-many) { background: linear-gradient(160deg, rgba(90, 80, 170, 0.55), rgba(40, 32, 90, 0.75)); border-color: #c9b0ff; }
.ap-v4 .ap-ring { border-color: rgba(201, 176, 255, 0.85); }
.ap-v4 .ap-slot { border-radius: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); background: linear-gradient(160deg, #7d6bd6, #3a2f86); }
.ap-v4 .ap-go { background: linear-gradient(#f3a3d8, #a866d8); text-shadow: 0 2px 0 #5a2a7a; }
.ap-v4 :is(.ap-q, .ap-o) { background: rgba(201, 176, 255, 0.12); }

/* 5 · มินิมอล: flat and quiet, the list along the bottom */
#eco .eco-body.ap-v5 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 230px); }
.ap-v5 :is(.ap-one, .ap-many) { background: rgba(255, 255, 255, 0.03); border: 0; border-radius: 6px; }
.ap-v5 .ap-ring { display: none; }
.ap-v5 .ap-stage { width: 150px; height: 150px; }
.ap-v5 .ap-slot { border-width: 1px; border-radius: 6px; box-shadow: none; background: rgba(255, 255, 255, 0.05); }
.ap-v5 .ap-lens { display: none; }
.ap-v5 :is(.ap-q, .ap-o) { background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; }
.ap-v5 .ap-go { background: none; border: 1px solid #f2d27a; color: #f2d27a; text-shadow: none; box-shadow: none; border-radius: 6px; }

/* 6 · ม้วนคัมภีร์: cream scrolls with brown ink, the list on the left */
#eco .eco-body.ap-v6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.ap-v6 .eco-side { order: -1; }
.ap-v6 :is(.ap-one, .ap-many) { background: #f3e6c8; border: 3px solid #8a5a3c; border-radius: 22px 22px 22px 22px / 34px 34px 34px 34px; color: #4a3020; box-shadow: inset 0 0 0 4px #e4cfa0; }
.ap-v6 :is(.ap-name small, .ap-cost, .ap-mhead small, .ap-filter, .ap-sum) { color: #7a5a3a; }
.ap-v6 :is(.ap-q, .ap-o, .ap-rrow) { background: rgba(138, 90, 60, 0.12); color: #4a3020; }
.ap-v6 .ap-q { color: #9a7a5a; }
.ap-v6 .ap-o.q0 b { color: #3a2a20; } .ap-v6 .ap-o.q1 b { color: #2f8a2a; } .ap-v6 .ap-o.q2 b { color: #2a66b0; } .ap-v6 .ap-o.q3 b { color: #b07a10; }
.ap-v6 .ap-ring { border-color: #8a5a3c; box-shadow: none; } .ap-v6 .ap-slot { background: radial-gradient(circle, #fff6dc, #e8d3a6); }
.ap-v6 .ap-cell { background: rgba(138, 90, 60, 0.15); }
.ap-v6 .ap-go { background: linear-gradient(#c98a5a, #8a5a3c); }

/* 7 · สองโต๊ะคู่: one piece and many pieces side by side */
.eco-body.ap-v7 :is(.ap-one, .ap-many), .eco-body.ap-v10 :is(.ap-one, .ap-many) { display: flex; }
.ap-v7 .ap-work, .ap-v10 .ap-work { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
#eco .eco-body:is(.ap-v7, .ap-v10) { grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr); }
:is(.ap-v7, .ap-v10) .ap-grid { grid-template-columns: repeat(5, 46px); }
:is(.ap-v7, .ap-v10) .ap-stage { width: 190px; height: 190px; }

/* 8 · ป่าเทพนิยาย: leafy greens, centred */
.ap-v8 .ap-work { justify-items: center; }
.ap-v8 :is(.ap-one, .ap-many) { width: min(560px, 100%); background: radial-gradient(circle at 50% 20%, rgba(155, 213, 111, 0.3), rgba(24, 52, 30, 0.8) 70%); border: 2px solid #9bd56f; }
.ap-v8 .ap-ring { border-color: #9bd56f; box-shadow: inset 0 0 30px rgba(155, 213, 111, 0.25); }
.ap-v8 .ap-ring.r2 { border-color: #f6b3c8; }
.ap-v8 .ap-slot { border-radius: 50% 50% 50% 12px; background: radial-gradient(circle, #3f7a35, #1d3a22); }
.ap-v8 .ap-tabs { justify-content: center; }

/* 9 · ราตรีทอง: dark with thin gold lines, the list along the bottom */
#eco .eco-body.ap-v9 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 230px); }
.ap-v9 :is(.ap-one, .ap-many) { background: linear-gradient(180deg, #171b26, #0d1017); border: 1px solid #8a7440; border-radius: 6px; }
.ap-v9 .ap-ring { border: 1px solid #e2b955; box-shadow: 0 0 24px rgba(226, 185, 85, 0.25); }
.ap-v9 .ap-slot { border-width: 1px; border-radius: 4px; background: #0d1017; }
.ap-v9 :is(.ap-q, .ap-o, .ap-rrow) { background: none; border-bottom: 1px solid rgba(226, 185, 85, 0.2); border-radius: 0; }
.ap-v9 .ap-name b { color: #f3dfa2 !important; }
.ap-v9 .ap-go { background: linear-gradient(#f3dfa2, #c9a24a); color: #2c2533; text-shadow: none; border-radius: 4px; border-width: 1px; box-shadow: none; }

/* 10 · ซากุระ: pastel pink, one and many side by side */
.ap-v10 :is(.ap-one, .ap-many) { background: linear-gradient(180deg, rgba(246, 179, 200, 0.28), rgba(90, 40, 70, 0.7)); border: 2px solid #f6b3c8; border-radius: 22px; }
.ap-v10 .ap-ring { border-color: #ffd1e0; box-shadow: inset 0 0 30px rgba(255, 180, 210, 0.3), 0 0 20px rgba(255, 180, 210, 0.3); }
.ap-v10 .ap-slot { border-radius: 50%; background: radial-gradient(circle, #f6b3c8, #8a3a62); }
.ap-v10 .ap-go { background: linear-gradient(#ffb3d1, #e0609a); text-shadow: 0 2px 0 #7a2a52; }

/* =====================================================================
   Appraisal animations (js/economy.js "appraisal animations"): idle float, a piece flying into the slot, the lens
   charge, the burst and the lines flipping open; many pieces opening one by one. Delays are offsets from
   --ce / --fe / --pe / --me (minus the seconds already played) so a re-render carries on.
   ===================================================================== */
.ap-stage { --sz: 220px; }
.ap-v5 .ap-stage { --sz: 150px; }
:is(.ap-v7, .ap-v10) .ap-stage { --sz: 190px; }
.ap-one { position: relative; overflow: clip; }   /* clip, not hidden: it keeps its content height (no scroll box) */
:is(.ap-slot, .ap-cell, .ap-one).g0 { --gc: #ece6d6; } :is(.ap-one).g1 { --gc: #7fe07a; } :is(.ap-one).g2 { --gc: #5fb4ff; }
:is(.ap-one).g3 { --gc: #c27bff; } :is(.ap-one).g4 { --gc: #ffb340; } :is(.ap-one).g5 { --gc: #ff5a6a; }
.ap-modes .ap-fast { border-style: dashed; font-size: 0.76rem; }

/* idle */
.ap-one:not(.empty):not(.cast) .ap-slot img { animation: apBob 2.8s ease-in-out infinite; }
@keyframes apBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ap-one.empty .ap-slot { animation: apBreath 2.4s ease-in-out infinite; }
@keyframes apBreath { 0%, 100% { box-shadow: 0 0 0 3px #2c2533, 0 0 8px rgba(242, 210, 122, 0.15); } 50% { box-shadow: 0 0 0 3px #2c2533, 0 0 28px rgba(242, 210, 122, 0.5); } }
.ap-one.empty .ap-slot span { display: inline-block; animation: apPlus 2.4s ease-in-out infinite; }
@keyframes apPlus { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.18); opacity: 0.75; } }
.ap-lens { animation: apLensIdle 3.2s ease-in-out infinite; transform-origin: 35% 35%; }
@keyframes apLensIdle { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-4px); } }
.ap-qm { position: absolute; top: 2px; right: 8px; font: 800 1.15rem Fredoka, sans-serif; font-style: normal; color: #ffe27a; text-shadow: 0 1px 0 #2c2533, 0 0 8px rgba(255, 226, 122, 0.8); animation: apQ 1.6s ease-in-out infinite; }
@keyframes apQ { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.3) rotate(10deg); } }
.ap-one.done .ap-slot { animation: apGlow 2.6s ease-in-out infinite; }
@keyframes apGlow { 0%, 100% { box-shadow: 0 0 0 3px #2c2533, 0 0 12px color-mix(in srgb, var(--gc) 40%, transparent); } 50% { box-shadow: 0 0 0 3px #2c2533, 0 0 32px color-mix(in srgb, var(--gc) 85%, transparent); } }

/* a piece landing in the slot (drop: from "ชิ้นถัดไป"; a click in the list flies it in from js) */
.ap-one.put.drop .ap-slot img { animation: apDrop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; animation-delay: var(--pe); }
@keyframes apDrop { 0% { opacity: 0; transform: translateY(-46px) scale(0.5); } 60% { opacity: 1; transform: translateY(4px) scale(1.08); } 100% { opacity: 1; transform: none; } }
.ap-one.put .ap-slot { animation: apLand 0.55s ease-out both; animation-delay: calc(var(--pe) + 0.3s); }
@keyframes apLand { 0% { box-shadow: 0 0 0 3px #2c2533, 0 0 44px var(--gc); } }
.ap-one.put .ap-wave.land { animation: apWave 0.6s ease-out both; animation-delay: calc(var(--pe) + 0.3s); }

/* the charge */
.ap-sig { position: absolute; inset: 17%; border: 2px solid var(--gc, #f2d27a); opacity: 0; pointer-events: none; }
.ap-sig::before { content: ''; position: absolute; inset: -2px; border: 2px solid var(--gc, #f2d27a); transform: rotate(45deg); }
.ap-one.cast .ap-sig { animation: apSig var(--cast) ease-out both; animation-delay: var(--ce); }
@keyframes apSig { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 25% { opacity: 0.85; } 100% { opacity: 1; transform: scale(1) rotate(-225deg); filter: drop-shadow(0 0 6px var(--gc)); } }
.ap-one.cast .ap-ring { border-color: var(--gc); animation: apCharge var(--cast) ease-in both; animation-delay: var(--ce); }
.ap-one.cast .ap-ring.r2 { opacity: 1; animation: apSpin 0.5s linear infinite; }
@keyframes apCharge { from { box-shadow: inset 0 0 20px color-mix(in srgb, var(--gc) 20%, transparent), 0 0 10px color-mix(in srgb, var(--gc) 20%, transparent); } to { box-shadow: inset 0 0 64px color-mix(in srgb, var(--gc) 80%, transparent), 0 0 48px color-mix(in srgb, var(--gc) 85%, transparent); } }
.ap-one.cast .ap-slot { animation: apShake var(--cast) linear both; animation-delay: var(--ce); }
@keyframes apShake {
  0% { transform: none; filter: none; } 30% { transform: translate(0.5px, 0); } 40% { transform: translate(-1px, 0.5px); }
  50% { transform: translate(1px, -0.5px); } 60% { transform: translate(-1.5px, 0); } 70% { transform: translate(2px, 0.5px) scale(1.02); filter: brightness(1.3); }
  80% { transform: translate(-2.5px, -0.5px) scale(1.04); } 88% { transform: translate(3px, 0) scale(1.05); filter: brightness(1.8); }
  94% { transform: translate(-3px, 1px) scale(1.06); } 100% { transform: scale(1.08); filter: brightness(2.6); }
}
.ap-one.cast .ap-lens { left: 50%; top: 50%; right: auto; bottom: auto; margin: -29px 0 0 -29px; animation: apOrbit var(--cast) linear both; animation-delay: var(--ce); filter: drop-shadow(0 0 8px var(--gc)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
@keyframes apOrbit {
  0% { transform: rotate(44deg) translateX(calc(var(--sz) * 0.47)) rotate(-44deg); }
  50% { transform: rotate(404deg) translateX(calc(var(--sz) * 0.3)) rotate(-404deg) scale(1.15); }
  100% { transform: rotate(764deg) translateX(calc(var(--sz) * 0.47)) rotate(-764deg); }
}
.ap-pt { position: absolute; left: 50%; top: 50%; z-index: 1; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px var(--gc); opacity: 0; pointer-events: none; }
.ap-one.cast .ap-pt.in { animation: apIn 0.75s ease-in infinite; animation-delay: calc(var(--ce) + var(--d)); }
@keyframes apIn { 0% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--sz) * 0.56)) scale(var(--s)); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(8px) scale(0.2); } }
.ap-one.cast .ap-q { justify-content: space-between; color: color-mix(in srgb, var(--gc) 75%, #fff); letter-spacing: 0.02em; background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 35%, color-mix(in srgb, var(--gc) 40%, transparent) 50%, rgba(0, 0, 0, 0.3) 65%); background-size: 300% 100%; animation: apScan 0.9s linear infinite; animation-delay: calc(var(--ce) - var(--i) * 0.15s); }
.ap-one.cast .ap-q b { font: 700 0.9rem Fredoka, sans-serif; }
@keyframes apScan { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.ap-cost.ap-casting { color: #ffe27a; animation: apBlink 0.9s ease-in-out infinite; }
@keyframes apBlink { 50% { opacity: 0.45; } }
.ap-go.casting, .ap-go.skip { overflow: hidden; background: linear-gradient(#8f7be6, #4f3fa6); text-shadow: 0 2px 0 #2a1d55; }
.ap-go.casting span, .ap-go.casting kbd { position: relative; z-index: 1; }
.ap-go.casting kbd { position: absolute; }
.ap-go .ap-bar { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.42)); animation: apBar var(--cast) linear both; animation-delay: var(--ce); }
@keyframes apBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the burst */
.ap-flash { position: absolute; inset: -12%; z-index: 3; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 18%, color-mix(in srgb, var(--gc) 60%, transparent) 40%, transparent 70%); opacity: 0; pointer-events: none; }
.ap-one.fx .ap-flash { animation: apFlashOut 0.6s ease-out both; animation-delay: var(--fe); }
@keyframes apFlashOut { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.3); } }
.ap-wave { position: absolute; inset: 28%; z-index: 1; border-radius: 50%; border: 3px solid var(--gc, #f2d27a); opacity: 0; pointer-events: none; }
.ap-one.fx .ap-wave { animation: apWave 0.85s ease-out both; animation-delay: var(--fe); }
.ap-one.fx .ap-wave.w2 { animation-delay: calc(var(--fe) + 0.16s); }
@keyframes apWave { 0% { opacity: 1; transform: scale(0.45); } 100% { opacity: 0; transform: scale(1.9); border-width: 1px; } }
.ap-one.fx .ap-pt.out { animation: apOut 0.95s cubic-bezier(0.1, 0.8, 0.3, 1) both; animation-delay: calc(var(--fe) + var(--d)); }
@keyframes apOut { 0% { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(var(--s)); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--sz) * var(--r))) scale(0.3); } }
.ap-pt.star { width: 16px; height: 16px; margin: -8px; background: none; box-shadow: none; color: #ffe27a; font: 16px/16px sans-serif; text-align: center; text-shadow: 0 0 6px var(--gc); }
.ap-pt.star::before { content: '\2726'; }
.ap-beam { position: absolute; left: 50%; bottom: 42%; z-index: 0; width: 96px; height: 120%; margin-left: -48px; border-radius: 48px 48px 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--gc) 80%, transparent), color-mix(in srgb, var(--gc) 25%, transparent) 60%, transparent); filter: blur(3px); transform-origin: 50% 100%; opacity: 0; pointer-events: none; }
.ap-one.fx .ap-beam { animation: apBeam 2.3s ease-out both; animation-delay: var(--fe); }
.ap-one.g5.fx .ap-beam { animation: apBeam 2.3s ease-out both, apHue 1.1s linear infinite; animation-delay: var(--fe), var(--fe); }
@keyframes apBeam { 0% { opacity: 0; transform: scaleX(0.2) scaleY(0); } 15% { opacity: 1; transform: scaleX(1) scaleY(1); } 60% { opacity: 0.8; } 100% { opacity: 0; transform: scaleX(1.4) scaleY(1); } }
@keyframes apHue { to { filter: blur(3px) hue-rotate(360deg); } }
.ap-one.fx .ap-slot { animation: apPop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: var(--fe); }
@keyframes apPop { 0% { transform: scale(1.08); filter: brightness(2.6); } 35% { transform: scale(1.2); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
.ap-one.fx .ap-ring { animation: apFlash 0.9s ease-out both; animation-delay: var(--fe); }
.ap-one.fx .ap-ring.r2 { animation: apSpin 3s linear infinite; }
@keyframes apFlash { 0% { border-color: #fff; box-shadow: inset 0 0 70px color-mix(in srgb, var(--gc) 85%, #fff), 0 0 60px color-mix(in srgb, var(--gc) 85%, #fff); } }
.ap-one.fx .ap-sig { animation: apSigOut 0.6s ease-out both; animation-delay: var(--fe); }
@keyframes apSigOut { from { opacity: 1; transform: scale(1) rotate(-225deg); } to { opacity: 0; transform: scale(1.6) rotate(-270deg); } }

/* the lines open one by one, then the stamp */
@keyframes apRise { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.ap-one.fx .ap-name { animation: apRise 0.5s ease-out both; animation-delay: calc(var(--fe) + 0.1s); }
.ap-o { position: relative; overflow: hidden; }
.ap-one.fx .ap-o { transform-origin: 50% 0; animation: apFlip 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--fe) + var(--l0) + var(--i) * var(--ls)); }
@keyframes apFlip { from { opacity: 0; transform: perspective(500px) rotateX(-85deg); } to { opacity: 1; transform: none; } }
.ap-one.fx .ap-o::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; animation: apShine 0.7s ease-out both; animation-delay: calc(var(--fe) + var(--l0) + var(--i) * var(--ls) + 0.25s); }
@keyframes apShine { to { transform: translateX(120%); } }
.ap-one.fx .ap-o.q3 { animation: apFlip 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, apGold 1.4s ease-out both; animation-delay: calc(var(--fe) + var(--l0) + var(--i) * var(--ls)), calc(var(--fe) + var(--l0) + var(--i) * var(--ls) + 0.3s); }
@keyframes apGold { 0% { background-color: rgba(255, 217, 90, 0.4); box-shadow: inset 0 0 0 2px #ffd95a, 0 0 18px rgba(255, 217, 90, 0.85); } }
.ap-o i { display: inline-block; }
.ap-one.fx .ap-o i { animation: apStamp 0.45s cubic-bezier(0.2, 1.8, 0.4, 1) both; animation-delay: calc(var(--fe) + var(--l0) + var(--i) * var(--ls) + 0.45s); }
.ap-one.fx .ap-done { animation: apStamp 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--fe) + var(--l0) + var(--n) * var(--ls) + 0.15s); }
@keyframes apStamp { 0% { opacity: 0; transform: scale(2.4) rotate(-10deg); } 60% { opacity: 1; transform: scale(0.94) rotate(1deg); } 100% { opacity: 1; transform: none; } }
.ap-one.fx .ap-acts { animation: apRise 0.4s ease-out both; animation-delay: calc(var(--fe) + var(--l0) + var(--n) * var(--ls) + 0.45s); }

/* many at once: the lens hops cell to cell (js), each cell pops open with a mark */
.ap-grid { position: relative; }
.ap-cell { position: relative; }
.ap-cell.res, .ap-cell.rv { cursor: default; }
.ap-cell em { position: absolute; top: -6px; right: -6px; z-index: 2; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #7fe07a; color: #1c3a14; font: 800 0.66rem Fredoka, sans-serif; font-style: normal; box-shadow: 0 0 0 2px #2c2533; }
.ap-cell.great em { background: #ffd95a; color: #5a3a00; }
.ap-cell.great { box-shadow: 0 0 10px 2px rgba(255, 217, 90, 0.6); }
.ap-many.mfx .ap-cell.rv { animation: apCellRv 0.4s ease-out both; animation-delay: calc(var(--me) + var(--t)); }
@keyframes apCellRv { 0% { filter: grayscale(0.8) brightness(0.55); transform: none; } 45% { filter: brightness(2.2); transform: scale(1.25); box-shadow: 0 0 16px 5px var(--gc); } 100% { filter: none; transform: none; } }
.ap-many.mfx .ap-cell.rv em { animation: apStamp 0.35s cubic-bezier(0.2, 1.8, 0.4, 1) both; animation-delay: calc(var(--me) + var(--t) + 0.18s); }
.ap-mlens { position: absolute; left: 0; top: 0; z-index: 3; width: 40px; height: 40px; object-fit: contain; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 6px #ffe27a) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5)); }
.ap-many.mfx .ap-rrow { animation: apRise 0.35s ease-out both; animation-delay: calc(var(--me) + var(--t)); }

@media (prefers-reduced-motion: reduce) {
  .ap-one .ap-slot img, .ap-lens, .ap-qm, .ap-one.empty .ap-slot, .ap-one.empty .ap-slot span, .ap-one.done .ap-slot, .ap-cost.ap-casting { animation: none !important; }
}

/* =====================================================================
   Stat points: + / − wait for "ตกลง" (js/charinfo.js pend); the reset button readable on every theme
   ===================================================================== */
.ci-stat { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
.ci-sbtns { display: flex; gap: 4px; justify-content: flex-end; min-width: 40px; }
.ci-minus { width: 30px; height: 34px; padding: 0 0 3px; border: 0; border-radius: 10px; background: linear-gradient(#e9a07a, #b8603e); color: #fff; font: 700 1.3rem Fredoka, sans-serif; box-shadow: 0 3px 0 #2c2533; cursor: pointer; }
.ci-minus:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ci-stat.pend { border-color: #ffd95a; box-shadow: inset 0 0 0 1px rgba(255, 217, 90, 0.5), 0 0 10px rgba(255, 217, 90, 0.2); }
.ci-pendv { color: #9be37b; }
.ci-pend { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #ffd95a; color: #2c2533; font: 800 0.72rem Fredoka, sans-serif; font-style: normal; vertical-align: 2px; }
.ci-confirm { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 217, 90, 0.1); border: 1px solid rgba(255, 217, 90, 0.6); animation: ciConfirmIn 0.25s ease-out; }
@keyframes ciConfirmIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ci-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 10px; font: 600 0.8rem Fredoka, var(--thai), sans-serif; color: var(--cream-2); }
.ci-prev span { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ci-prev small { color: var(--cream-2); font: 600 0.74rem var(--thai); }
.ci-prev b { color: #fff6dc; }
.ci-prev i { font-style: normal; color: #9be37b; font-size: 0.74rem; }
.ci-prev .cp { grid-column: 1 / -1; font-size: 0.92rem; }
.ci-prev .cp b { color: #ffe27a; }
/* one height whatever it shows (CP + two lines), so nothing below or beside it moves while you press + */
.ci-prev { height: 64px; overflow: hidden; align-content: start; }
.ci-confirm.idle { animation: none; background: rgba(0, 0, 0, 0.18); border-style: dashed; border-color: rgba(255, 217, 90, 0.35); }
.ci-confirm.idle .ci-prev { align-content: center; }
.ci-idle { white-space: normal !important; font: 600 0.8rem var(--thai) !important; color: var(--cream-2); text-align: center; justify-content: center; }
#charpanel .ci-confirm.idle .ci-ok { animation: none; }
#charpanel .ci-cbtns .btn:disabled { opacity: 0.6; filter: grayscale(0.5); cursor: default; }
.ci-minus.off { visibility: hidden; }
.ci-cbtns { display: flex; gap: 8px; justify-content: flex-end; }
#charpanel .ci-cbtns .btn { min-height: 42px; font-size: 0.9rem; padding: 0 1.2em 5px; }
#charpanel .ci-ok { flex: 1; animation: ciOkPulse 1.6s ease-in-out infinite; }
@keyframes ciOkPulse { 50% { filter: brightness(1.12) drop-shadow(0 0 6px rgba(155, 227, 123, 0.7)); } }
/* light buttons keep dark ink (the night theme made their text light on the cream button) */
#charpanel :is(.ci-reset, .ci-restore, .ci-cancel) { color: var(--ink) !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
#charpanel .ci-reset:disabled { opacity: 0.75; filter: grayscale(0.4); }

/* =====================================================================
   Character window: click an equipped piece or a stat row for its card (js/charinfo.js showItem / showStat)
   ===================================================================== */
#charpanel .ci-panel { position: relative; }
#charpanel :is(.ci-slot[data-slot], .ci-stat[data-stat]) { cursor: pointer; }
#charpanel .ci-slot[data-slot]:hover { filter: brightness(1.12); }
#charpanel .ci-stat[data-stat]:hover { border-color: rgba(255, 217, 90, 0.75); }
.ci-pop { position: absolute; z-index: 30; width: 310px; max-height: 72%; overflow-y: auto; padding: 12px 12px 10px; border-radius: 14px;
  background: linear-gradient(180deg, #1f2746, #151b33); border: 2px solid #c9a24a; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--cream); font: 500 0.84rem var(--thai); display: flex; flex-direction: column; gap: 8px; animation: ciPopIn 0.14s ease-out; }
.ci-pop[hidden] { display: none; }
@keyframes ciPopIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } to { opacity: 1; transform: none; } }
.ci-pop-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: var(--cream); font: 700 0.85rem sans-serif; cursor: pointer; }
.ci-pop-x:hover { background: rgba(255, 255, 255, 0.15); }
.ci-pop-h { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.ci-pop-h img { width: 40px; height: 40px; object-fit: contain; }
.ci-pop-h div { display: flex; flex-direction: column; gap: 2px; }
.ci-pop-h b { font: 700 1rem var(--thai); color: #fff6dc; }
.ci-pop-h small { font: 500 0.76rem var(--thai); color: var(--cream-2); }
.ci-pop-what { margin: 0; padding: 6px 9px; border-radius: 9px; background: rgba(255, 217, 90, 0.1); color: #ffe9a8; font: 600 0.8rem/1.45 var(--thai); }
.ci-pop-sub { font: 700 0.8rem var(--thai); color: #ffe27a; }
.ci-pop-gains li b { color: #9be37b; }
.ci-pop-gains li.cp b { color: #ffe27a; }
.ci-pop-note { margin: 0; font: 500 0.74rem var(--thai); color: var(--cream-2); }
.ci-pop-item { display: flex; flex-direction: column; gap: 8px; padding-right: 22px; }
.ci-pop-item .eco-ihead img { width: 52px; height: 52px; }

/* admin mode (F10): the badge at the top and the class-weapon panel */
#admin-badge {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px;
  background: rgba(60, 16, 12, 0.88); border: 2px solid #ff7a5c; border-radius: 999px;
  color: #ffe8dc; font-family: var(--thai); font-size: 0.9rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#admin-badge .btn { padding: 4px 12px; font-size: 0.85rem; }
#admin-panel .admin-box { width: min(760px, 100%); }
#admin-panel .admin-note { margin: 8px 0 12px; color: var(--cream-2); font-size: 0.92rem; line-height: 1.5; }
#admin-panel .admin-note label { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--cream); }
#admin-panel select { font: inherit; padding: 2px 6px; border-radius: 8px; }
#admin-panel .admin-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#admin-panel .admin-class {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--navy-2); color: var(--cream); border: 2px solid var(--navy-3); border-radius: 14px; font: inherit;
}
#admin-panel .admin-class:hover { border-color: var(--gold); }
#admin-panel .admin-class.on { border-color: #ff7a5c; }
#admin-panel .admin-class canvas { width: 44px; height: 44px; flex: none; }
#admin-panel .admin-class span { display: flex; flex-direction: column; }
#admin-panel .admin-class small { color: var(--cream-2); font-size: 0.8rem; }
#admin-panel .admin-note .admin-all { display: flex; margin: 8px 0 0; }
#admin-panel #admin-learn-now { margin: 0 0 12px; }

/* =====================================================================
   The admin panel (js/admin.js): tabs for the character, conjuring, enhancing, classes, the world
   ===================================================================== */
#admin-panel .admin-box { width: min(980px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
#admin-panel .adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
#admin-panel .adm-tabs button { font: 600 0.92rem var(--thai); padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--navy-2); color: var(--cream); border: 2px solid var(--navy-3); }
#admin-panel .adm-tabs button.on { background: #ff7a5c; border-color: #ffb09a; color: #2a1208; }
#admin-panel .adm-body { overflow-y: auto; min-height: 0; flex: 1; padding-right: 4px; }
#admin-panel h3, #admin-panel .adm-h { margin: 0 0 8px; font: 700 1rem var(--thai); color: #ffe27a; }
#admin-panel h3 small, #admin-panel .adm-h small { font-weight: 500; color: var(--cream-2); font-size: 0.8rem; margin-left: 6px; }
#admin-panel .adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; }
#admin-panel .adm-card { background: var(--navy-2); border: 2px solid var(--navy-3); border-radius: 14px; padding: 12px; }
#admin-panel .adm-big { font: 700 1.5rem var(--display); color: #fff6dc; margin-bottom: 8px; }
#admin-panel .adm-big small { font: 500 0.82rem var(--thai); color: var(--cream-2); margin-left: 8px; }
#admin-panel .adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
#admin-panel .adm-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--cream); font-size: 0.9rem; }
#admin-panel input[type=number], #admin-panel input[type=search], #admin-panel select { font: inherit; padding: 4px 8px; border-radius: 8px; border: 2px solid var(--navy-3); background: #fff8e8; color: #2a2238; }
#admin-panel input[type=number] { width: 110px; }
#admin-panel input[type=search] { flex: 1; min-width: 160px; }
#admin-panel .adm-note { margin: 6px 0 0; color: var(--cream-2); font-size: 0.82rem; line-height: 1.45; }
#admin-panel .btn.on { outline: 3px solid #ffe27a; }
#admin-panel .adm-flag { display: flex; align-items: center; gap: 10px; padding: 6px 4px; cursor: pointer; }
#admin-panel .adm-flag input { width: 20px; height: 20px; }
#admin-panel .adm-flag span { display: flex; flex-direction: column; }
#admin-panel .adm-flag small { color: var(--cream-2); font-size: 0.8rem; }
#admin-panel .adm-cats { display: flex; flex-wrap: wrap; gap: 6px; }
#admin-panel .adm-opts { padding: 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
#admin-panel .adm-chk { cursor: pointer; }
#admin-panel .adm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; margin-top: 8px; }
#admin-panel .adm-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--navy-2); border: 2px solid var(--gc, var(--navy-3)); }
#admin-panel .adm-item img, #admin-panel .adm-own img, #admin-panel .adm-class img { width: 44px; height: 44px; object-fit: contain; flex: none; }
#admin-panel .adm-iname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#admin-panel .adm-iname b { color: var(--gc, #fff); font-size: 0.92rem; }
#admin-panel .adm-iname small { color: var(--cream-2); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-panel .adm-ibtn { display: flex; flex-direction: column; gap: 4px; }
#admin-panel .adm-edit { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 12px; }
#admin-panel .adm-ownlist { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
#admin-panel .adm-own { display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; color: var(--cream);
  background: var(--navy-2); border: 2px solid var(--navy-3); border-left: 6px solid var(--gc); border-radius: 12px; }
#admin-panel .adm-own.on { border-color: #ffe27a; border-left-color: var(--gc); }
#admin-panel .adm-own span { display: flex; flex-direction: column; }
#admin-panel .adm-own small { color: var(--cream-2); font-size: 0.75rem; }
#admin-panel .adm-plus { font: 700 1.6rem var(--display); color: #ffe27a; min-width: 64px; }
#admin-panel .adm-detail { margin-top: 8px; padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); }
#admin-panel .adm-danger { background: #8a2a2a; color: #ffe8e0; }
#admin-panel .adm-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 8px; }
#admin-panel .adm-class, #admin-panel .adm-map { display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; cursor: pointer; font: inherit;
  background: var(--navy-2); color: var(--cream); border: 2px solid var(--navy-3); border-radius: 14px; }
#admin-panel .adm-class:hover, #admin-panel .adm-map:hover { border-color: var(--gold); }
#admin-panel .adm-class.on, #admin-panel .adm-map.on { border-color: #ff7a5c; }
#admin-panel .adm-class span, #admin-panel .adm-map { flex-direction: column; align-items: flex-start; }
#admin-panel .adm-class span { display: flex; }
#admin-panel .adm-class small, #admin-panel .adm-map small { color: var(--cream-2); font-size: 0.8rem; }
#admin-panel .adm-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
@media (max-width: 720px) { #admin-panel .adm-edit { grid-template-columns: 1fr; } #admin-panel .adm-grid { grid-template-columns: 1fr; } }
#admin-panel .btn, #admin-badge .btn { color: var(--ink); }
#admin-panel .btn.small { min-height: 34px; }
#admin-panel .adm-danger.btn { color: #ffe8e0; }
/* the stat ceiling (data.js statCap): "/30" by each stat, MAX when it is reached */
#charpanel .ci-cap { margin-left: 4px; color: var(--cream-2); font-size: 0.72rem; opacity: 0.8; }
#charpanel .ci-cap.full { color: #ffb340; font-weight: 700; opacity: 1; }
#charpanel .ci-plus.capped { opacity: 0.4; }
/* the skill reset button by the skill points (ui.js renderTree) */
#tree .tree-reset { color: var(--ink); min-height: 34px; margin-right: 6px; }
#tree .tree-reset.arm { background: #ffb340; animation: treeArm 0.6s ease-in-out infinite alternate; }
@keyframes treeArm { from { box-shadow: 0 2px 0 var(--ink); } to { box-shadow: 0 2px 0 var(--ink), 0 0 0 4px rgba(255, 179, 64, 0.45); } }

/* ---------- the boss dungeons (js/bossdungeon.js): the MIR4-style entry window, the tracker, the banner, the result ---------- */

/* the tracker (in the quest box's place) */
body.in-bdg #questbox { display: none !important; }
#bdg-track {
  position: absolute; z-index: 2; left: 12px; top: 120px; width: 250px; display: flex; flex-direction: column; gap: 5px; pointer-events: auto;
  padding: 8px 11px 10px; border-radius: 12px; background: rgba(16, 12, 24, 0.9); border: 2px solid #8a6a2e;
  box-shadow: 0 0 0 2px #1a120a, 0 4px 10px rgba(0, 0, 0, 0.4); font-family: var(--thai); color: #fff;
}
#bdg-track .bt-head { display: flex; flex-direction: column; border-bottom: 1px solid rgba(255, 220, 160, 0.25); padding-bottom: 4px; }
#bdg-track .bt-head em { font: 700 0.7rem Fredoka, var(--thai); font-style: normal; color: var(--tc); }
#bdg-track .bt-head b { font-size: 0.98rem; color: #ffe2a0; }
#bdg-track .bt-time { font: 700 1.1rem Fredoka, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
#bdg-track .bt-time.low { color: #ff6a5c; }
#bdg-track .bt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
#bdg-track .bt-list li { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; padding: 2px 6px; border-radius: 6px; }
#bdg-track .bt-list li i { font-style: normal; width: 14px; text-align: center; }
#bdg-track .bt-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bdg-track .bt-list li b { font: 700 0.8rem Fredoka, sans-serif; font-variant-numeric: tabular-nums; }
#bdg-track .bt-list li.done { color: #8fe06a; }
#bdg-track .bt-list li.done span { text-decoration: line-through; opacity: 0.75; }
#bdg-track .bt-list li.cur { background: rgba(255, 210, 74, 0.14); color: #ffe7a6; }
#bdg-track .bt-list li.wait { color: #8a8296; }
#bdg-track .bt-hint { font-size: 0.72rem; color: #cfc4a8; line-height: 1.3; }
#bdg-track .btn { color: var(--ink); align-self: flex-start; }

/* the big banner (entering, the boss): a slim band at the top, just under the menu bar (2026-10-18, the user: "บังจอ
   ย้ายให้เหมาะ" - it sat at 22% over the fight and the dungeon's progress box); crisp shadow, no glow */
#bdg-banner {
  position: absolute; z-index: 4; left: 50%; top: max(92px, 9%); transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 56px 8px; text-align: center; max-width: min(720px, 72vw);
  background: linear-gradient(90deg, transparent, rgba(8, 6, 14, 0.78) 18%, rgba(8, 6, 14, 0.78) 82%, transparent);
  transition: opacity 0.45s, transform 0.45s; font-family: var(--thai);
}
#bdg-banner.show { opacity: 1; transform: translate(-50%, 0); }
#bdg-banner small { font: 700 0.78rem Fredoka, var(--thai); color: var(--tc); letter-spacing: 0.2em; }
#bdg-banner b { font: 700 1.6rem/1.2 var(--thai); color: #fff4d8; text-shadow: 0 2px 0 #000; white-space: nowrap; }
#bdg-banner span { font-size: 0.8rem; color: #e8dcc0; }
#bdg-banner.boss small { font-size: 0.9rem; color: #ff5a4a; letter-spacing: 0.4em; }
#bdg-banner.boss b { font-size: 1.85rem; }

/* the result */
#bdg-result { background: rgba(6, 4, 12, 0.6); }
#bdg-result .bdr-box {
  width: min(720px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 24px 18px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 120, 0.18), transparent 60%), linear-gradient(180deg, rgba(30, 22, 34, 0.97), rgba(12, 10, 20, 0.97));
  border: 2px solid #8a6a2e; box-shadow: 0 0 0 1px #2a1d0c, 0 18px 40px rgba(0, 0, 0, 0.6); font-family: var(--thai);
}
#bdg-result .bdr-box.fail { border-color: #6a2a2a; background: linear-gradient(180deg, rgba(36, 16, 20, 0.97), rgba(14, 8, 12, 0.97)); }
#bdg-result .bdr-title { display: flex; flex-direction: column; align-items: center; text-align: center; }
#bdg-result .bdr-title small { color: var(--tc); font: 700 0.85rem Fredoka, var(--thai); letter-spacing: 0.08em; }
#bdg-result .bdr-title b { font: 700 2.4rem Fredoka, var(--thai); color: #ffe2a0; letter-spacing: 0.06em; text-shadow: 0 2px 0 #3a2208, 0 0 24px rgba(255, 200, 90, 0.5); animation: bdrPop 0.5s ease-out both; }
#bdg-result .fail .bdr-title b { color: #ff8a7a; text-shadow: 0 2px 0 #2a0808; }
#bdg-result .bdr-title span { color: #d8ccb0; font-size: 0.9rem; }
#bdg-result .bdr-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#bdg-result .bdr-it {
  display: flex; flex-direction: column; align-items: center; width: 104px; padding: 8px 6px 6px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.25)); border: 1px solid var(--gc);
  animation: bdrIn 0.45s ease-out both; animation-delay: var(--d);
}
#bdg-result .bdr-it.big { box-shadow: 0 0 16px var(--gc), inset 0 0 12px rgba(255, 255, 255, 0.08); }
#bdg-result .bdr-it img { width: 48px; height: 48px; object-fit: contain; }
#bdg-result .bdr-it span { font-size: 0.72rem; line-height: 1.2; color: var(--gc); text-align: center; }
#bdg-result .bdr-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#bdg-result .btn { color: var(--ink); }
#bdg-result .btn.primary { color: #fff; }
@keyframes bdrIn { from { opacity: 0; transform: translateY(14px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes bdrPop { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
#bdg-banner.rage small { font-size: 0.9rem; color: #ff4a3a; letter-spacing: 0.4em; }
#bdg-banner.rage b { color: #ffd0c8; }

/* ---------- the party dungeon (js/bossdungeon.js): the tabs, the team box, the ready check ---------- */

#pdg-ready { position: absolute; z-index: 6; left: 50%; top: 18%; transform: translateX(-50%); pointer-events: auto; }
#pdg-ready .pr-box {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 340px; padding: 14px 20px 16px; border-radius: 14px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 22, 34, 0.97), rgba(12, 10, 20, 0.97)); border: 2px solid var(--tc, #8a6a2e);
  box-shadow: 0 0 0 1px #2a1d0c, 0 0 24px rgba(255, 213, 106, 0.25), 0 14px 30px rgba(0, 0, 0, 0.55); font-family: var(--thai); color: #fff;
}
#pdg-ready small { color: var(--tc); font: 700 0.8rem var(--thai); letter-spacing: 0.06em; }
#pdg-ready b { font: 700 1.5rem var(--thai); color: #ffe2a0; }
#pdg-ready span { font-size: 0.84rem; color: #d8ccb0; }
#pdg-ready .pr-left { font-style: normal; font-weight: 700; color: #ffe2a0; }
#pdg-ready ul { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#pdg-ready li { padding: 3px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: 0.82rem; color: #b9ab8c; }
#pdg-ready li.ok { background: rgba(143, 224, 106, 0.2); color: #d8ffc8; }
#pdg-ready li i { font-style: normal; margin-right: 4px; }
#pdg-ready li em { font-style: normal; opacity: 0.7; font-size: 0.74rem; }
#pdg-ready .pr-btns { display: flex; gap: 10px; }
#pdg-ready .btn { color: var(--ink); min-width: 120px; }
#pdg-ready .btn.primary { color: #fff; }
#pdg-ready .pr-wait { font-style: normal; color: #9be37b; font-size: 0.85rem; }
/* the pick "ลงดันเจี้ยนปาร์ตี้" (js/bossdungeon.js BD.choose, 2026-10-18): bots | friends, two big cards */
#pdg-pick { z-index: 965; background: rgba(6, 4, 12, 0.55); }   /* (over the HUD buttons; under the unlock card 970, which the story's pick waits for) */
#pdg-pick .pp-box {
  position: relative; width: min(760px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 16px; border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 120, 0.16), transparent 60%), linear-gradient(180deg, rgba(30, 22, 34, 0.98), rgba(12, 10, 20, 0.98));
  border: 2px solid #8a6a2e; box-shadow: 0 0 0 1px #2a1d0c, inset 0 0 0 1px rgba(255, 216, 130, 0.12), 0 18px 40px rgba(0, 0, 0, 0.6); font-family: var(--thai); color: #f2ead6;
}
#pdg-pick .close-x { position: absolute; right: 10px; top: 10px; }
#pdg-pick .pp-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
#pdg-pick .pp-head small { color: var(--tc, #ffd27a); font: 700 0.82rem/1.3 var(--thai); }
#pdg-pick .pp-head b { margin-top: 8px; font: 800 1.7rem/1.45 var(--thai); color: #ffe2a0; }   /* (room for the Thai marks above the line) */
#pdg-pick .pp-head span { font-size: 0.86rem; color: #cfc2a4; }
#pdg-pick .pp-note { margin: 0; padding: 7px 12px; border-radius: 9px; background: rgba(255, 120, 90, 0.14); border: 1px solid rgba(255, 140, 110, 0.4); color: #ffd0c0; font-size: 0.86rem; text-align: center; }
#pdg-pick .pp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#pdg-pick .pp-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 14px 14px; border-radius: 14px; text-align: center; min-height: 250px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1.5px solid rgba(255, 216, 130, 0.28);
}
#pdg-pick .pp-card.bot { box-shadow: inset 0 0 26px rgba(95, 180, 255, 0.1); }
#pdg-pick .pp-card.friend { box-shadow: inset 0 0 26px rgba(143, 224, 106, 0.1); }
#pdg-pick .pp-card.mem { border-color: #ffd27a; box-shadow: 0 0 0 1px #ffd27a, inset 0 0 26px rgba(255, 210, 122, 0.14); }
#pdg-pick .pp-card.off > b, #pdg-pick .pp-card.off .pp-ico { opacity: 0.55; }
#pdg-pick .pp-ico { font-size: 2.4rem; line-height: 1; }
#pdg-pick .pp-card > b { font: 800 1.35rem var(--thai); color: #fff2cc; }
#pdg-pick .pp-card > span { font-size: 0.84rem; color: #cbbf9f; line-height: 1.45; }
#pdg-pick .pp-mates { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
#pdg-pick .pp-mates button { padding: 5px 11px; border-radius: 8px; border: 1px solid rgba(255, 216, 130, 0.35); background: rgba(255, 255, 255, 0.06); color: #e8dcc0; font: 600 0.84rem var(--thai); cursor: pointer; }
#pdg-pick .pp-mates button.on { background: #2f5f8f; border-color: #8cc4ff; color: #fff; }
#pdg-pick .pp-team { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; }
#pdg-pick .pp-team li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n l" "w s"; gap: 0 8px; padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); text-align: left; font-size: 0.82rem; }
#pdg-pick .pp-team li b { grid-area: n; color: #fff2cc; font-weight: 700; }
#pdg-pick .pp-team li b i { font-style: normal; color: #b9ab8c; font-weight: 400; }
#pdg-pick .pp-team li em { grid-area: l; font-style: normal; color: #ffe2a0; }
#pdg-pick .pp-team li span { grid-area: w; color: #a99c80; font-size: 0.76rem; }
#pdg-pick .pp-team li u { grid-area: s; text-decoration: none; font-size: 0.76rem; font-weight: 700; }
#pdg-pick .pp-team li.ok u { color: #9be37b; }
#pdg-pick .pp-team li.bad { background: rgba(255, 90, 74, 0.12); }
#pdg-pick .pp-team li.bad u { color: #ff9a8a; }
#pdg-pick .pp-why { margin: 0; font-size: 0.82rem; color: #ffc9a0; line-height: 1.4; }
#pdg-pick .pp-why.ok { color: #b8e8a0; }
#pdg-pick .pp-go { margin-top: auto; width: 100%; min-height: 46px; font: 800 1.08rem var(--thai); color: var(--ink); }
#pdg-pick .pp-go.primary { color: #fff; }
#pdg-pick .pp-go:disabled { opacity: 0.5; cursor: not-allowed; }
#pdg-pick .pp-mem { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.86rem; color: #d8ccb0; cursor: pointer; user-select: none; }
#pdg-pick .pp-mem input { width: 17px; height: 17px; accent-color: #d9a63a; cursor: pointer; }
#pdg-pick .pp-mem i { font-style: normal; color: #ffd27a; }
@media (max-width: 620px) { #pdg-pick .pp-cols { grid-template-columns: 1fr; } #pdg-pick .pp-card { min-height: 0; } }

/* ---------- the dungeon window (js/bossdungeon.js; 2026-10-11 v2, the user: "bigger, easy to read, the rewards clear,
   click a reward to see it"): the levels on the left, the boss big in the middle, the power / time / rewards on the
   right; a reward opens its card ---------- */
#bdg.overlay { padding: 10px; }
#bdg .bdg-panel {
  position: relative; width: min(1220px, 100%); height: min(720px, 100%); max-height: 100%; gap: 10px; padding: 12px 16px 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(30, 22, 34, 0.98), rgba(14, 12, 22, 0.98));
  border: 2px solid #8a6a2e; box-shadow: 0 0 0 1px #2a1d0c, inset 0 0 0 1px rgba(255, 214, 140, 0.18), 0 18px 40px rgba(0, 0, 0, 0.6);
}
#bdg .panel-head { flex-wrap: nowrap; }
#bdg .panel-head h2 { color: #ffe2a0; text-shadow: 0 2px 0 #2a1608; font-size: 1.6rem; white-space: nowrap; }
#bdg .bdg-tabs { display: flex; gap: 6px; margin-left: auto; margin-right: 10px; }
#bdg .bdg-tabs button {
  padding: 9px 20px; border-radius: 12px 12px 4px 4px; border: 1px solid rgba(255, 220, 160, 0.25); background: rgba(255, 255, 255, 0.05);
  color: #d6c9a8; font: 700 1rem var(--thai); cursor: pointer; white-space: nowrap;
}
#bdg .bdg-tabs button:hover { background: rgba(255, 255, 255, 0.1); }
#bdg .bdg-tabs button.on { background: linear-gradient(180deg, #e0a53a, #b5721c); color: #fff; border-color: #ffd98a; text-shadow: 0 1px 0 #5a3008; }
#bdg .bdg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr) 430px; gap: 12px; }

/* the levels */
#bdg .bdg-tiers { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#bdg .bdg-tier {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; text-align: left; cursor: pointer;
  padding: 8px 12px 8px 20px; border-radius: 12px; border: 1px solid rgba(255, 220, 160, 0.16);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); color: #e9e0cc; font-family: var(--thai);
  overflow: hidden; transition: transform 0.12s, background 0.12s;
}
#bdg .bdg-tier::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
#bdg .bdg-tier:hover { transform: translateX(3px); background: linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)); }
#bdg .bdg-tier.on { border: 2px solid var(--tc); background: linear-gradient(90deg, var(--tg), rgba(0, 0, 0, 0.1)); box-shadow: 0 0 18px var(--tg), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#bdg .bdg-tier.lock { filter: grayscale(0.7) brightness(0.72); }
#bdg .bdg-tier .bt-n { color: var(--tc); font-size: 0.8rem; letter-spacing: 3px; }
#bdg .bdg-tier b { font: 700 1.45rem/1.1 var(--thai); color: #fff; text-shadow: 0 0 10px var(--tg); }
#bdg .bdg-tier small { color: #d6c9a8; font-size: 0.86rem; line-height: 1.25; }
#bdg .bdg-tier .bt-req { font: 700 0.86rem Fredoka, var(--thai); color: #ffd98a; margin-top: 3px; }
#bdg .bdg-tier .bt-left { font-size: 0.8rem; color: #a8c0e8; }

/* the boss, big */
#bdg .bdg-center { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
#bdg .bdg-hero {
  position: relative; flex: 1; min-height: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 220, 160, 0.22);
  background: radial-gradient(ellipse 60% 62% at 60% 58%, var(--tg), transparent 72%), radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.75)), linear-gradient(180deg, #1b1426, #0b0912);
}
#bdg .bdg-boss { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#bdg .bdg-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 6, 14, 0.75) 0%, transparent 30%, transparent 58%, rgba(8, 6, 14, 0.92) 100%); }
#bdg .bdg-name { position: absolute; z-index: 1; left: 18px; top: 12px; right: 18px; display: flex; flex-direction: column; }
#bdg .bdg-name small { color: var(--tc); font: 700 0.9rem Fredoka, var(--thai); letter-spacing: 0.08em; }
#bdg .bdg-name b { font: 700 2rem/1.15 var(--thai); color: #fff4d8; text-shadow: 0 2px 0 #000, 0 0 18px var(--tg); }
#bdg .bdg-name span { color: #b9ab8c; font: 500 0.85rem Fredoka, sans-serif; }
#bdg .bdg-bossplate { position: absolute; z-index: 1; left: 18px; bottom: 12px; right: 18px; display: flex; flex-direction: column; gap: 6px; }
#bdg .bdg-bossplate .bp-name { display: flex; align-items: center; gap: 10px; }
#bdg .bdg-bossplate em { font: 700 0.8rem Fredoka, sans-serif; font-style: normal; padding: 2px 8px; border-radius: 5px; background: var(--tc); color: #160c0c; }
#bdg .bdg-bossplate b { font: 700 1.35rem var(--thai); color: #fff; text-shadow: 0 2px 0 #000; }
#bdg .bdg-bossplate .bp-lv { font: 700 1.05rem Fredoka, sans-serif; color: #ffd98a; }
#bdg .bdg-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; }
#bdg .bdg-traits span { font-size: 0.84rem; line-height: 1.3; color: #f0e6cf; padding-left: 16px; position: relative; text-shadow: 0 1px 0 #000; }
#bdg .bdg-traits span::before { content: "\25C6"; position: absolute; left: 0; color: var(--tc); font-size: 0.72rem; top: 2px; }
#bdg .bdg-foot { display: flex; align-items: center; gap: 14px; }
#bdg .bdg-foot p { flex: 1; min-width: 0; margin: 0; font-size: 0.82rem; line-height: 1.4; color: #cfc4a8; }
#bdg .bdg-foot p small { display: block; color: #8f8470; font-size: 0.74rem; }
#bdg .bdg-enter { flex: none; min-width: 250px; min-height: 56px; font-size: 1.2rem; background: linear-gradient(180deg, #e0a53a, #b5721c); color: #fff; text-shadow: 0 1px 0 #5a3008; }
#bdg .bdg-enter:hover:not(:disabled) { filter: brightness(1.12); }
#bdg .bdg-enter:disabled { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
/* the team (party dungeon) */
#bdg .bdg-teambox { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 220, 160, 0.16); }
#bdg .bdg-teambox > small { color: #b9ab8c; font-size: 0.8rem; }
#bdg .bdg-teambox > span { font-size: 0.78rem; color: #cfc4a8; }
#bdg .bdg-teambox > b.bad { color: #ff7a6a; font-size: 1rem; }
#bdg .bdg-teambox a { color: #ffd98a; }
#bdg .bdg-team { display: flex; flex-wrap: wrap; gap: 6px; }
#bdg .bdg-team em { font: 700 0.86rem var(--thai); font-style: normal; padding: 3px 10px; border-radius: 8px; background: rgba(143, 224, 106, 0.16); color: #c9f4b0; white-space: nowrap; }
#bdg .bdg-team em.bad { background: rgba(255, 90, 74, 0.18); color: #ffb3a8; }
#bdg .bdg-team em.lead { border: 1px solid #ffd98a; }
#bdg .bdg-team em i { font-style: normal; opacity: 0.75; }
#bdg .bdg-mates { display: flex; gap: 6px; }
#bdg .bdg-mates button { flex: 1; padding: 6px 0; border-radius: 8px; border: 1px solid rgba(255, 220, 160, 0.3); background: rgba(255, 255, 255, 0.05); color: #e9e0cc; font: 700 0.95rem var(--thai); cursor: pointer; }
#bdg .bdg-mates button.on { background: #3f7a35; border-color: #8fe06a; color: #fff; }

/* the power, the time, the rewards */
#bdg .bdg-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; }
#bdg .bdg-cpbox { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 220, 160, 0.16); }
#bdg .bdg-cpbox small { color: #b9ab8c; font-size: 0.84rem; }
#bdg .bdg-cpbox b { font: 700 2.1rem/1.1 Fredoka, var(--thai); color: #ffd24a; text-shadow: 0 0 12px rgba(255, 210, 74, 0.35); }
#bdg .bdg-cpbox i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#bdg .bdg-cpbox i em { display: block; height: 100%; background: #8fe06a; }
#bdg .bdg-cpbox span { font-size: 0.86rem; color: #9be37b; }
#bdg .bdg-cpbox.warn i em { background: #f2b84b; }
#bdg .bdg-cpbox.warn span { color: #f2b84b; }
#bdg .bdg-cpbox.bad i em { background: #ff5a4a; }
#bdg .bdg-cpbox.bad span { color: #ff7a6a; }
#bdg .bdg-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
#bdg .bdg-facts > div { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 220, 160, 0.14); }
#bdg .bdg-facts small { color: #b9ab8c; font-size: 0.78rem; }
#bdg .bdg-facts b { font: 700 1.2rem Fredoka, var(--thai); color: #fff; }
#bdg .bdg-facts b.bad { color: #ff7a6a; }
#bdg .bdg-facts span { font-size: 0.72rem; line-height: 1.25; color: #cfc4a8; }
#bdg .bdg-rewards { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 220, 160, 0.18); }
#bdg .bdg-rhead { display: flex; align-items: center; gap: 8px; }
#bdg .bdg-rhead h4 { margin: 0; font: 700 1.05rem var(--thai); color: #ffe2a0; white-space: nowrap; }
#bdg .bdg-rtabs { display: flex; gap: 4px; margin-left: auto; }
#bdg .bdg-rtabs button { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255, 220, 160, 0.25); background: rgba(255, 255, 255, 0.05); color: #d6c9a8; font: 700 0.84rem var(--thai); cursor: pointer; white-space: nowrap; }
#bdg .bdg-rtabs button i { font-style: normal; opacity: 0.7; margin-left: 2px; }
#bdg .bdg-rtabs button.on { background: #5a4420; border-color: #ffd98a; color: #fff4d8; }
#bdg .bdg-rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; padding-top: 8px; }
#bdg .bdg-rw-it {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px 6px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.25)); border: 2px solid var(--gc); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.45);
  font-family: var(--thai); color: var(--gc); transition: transform 0.1s, box-shadow 0.1s;
}
#bdg .bdg-rw-it:hover, #bdg .bdg-rw-it:focus-visible { transform: translateY(-2px); box-shadow: 0 0 14px var(--gc), inset 0 0 14px rgba(0, 0, 0, 0.45); outline: none; }
#bdg .bdg-rw-it img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
#bdg .bdg-rw-it .q { position: absolute; top: 40px; right: 6px; font: 700 0.8rem Fredoka, sans-serif; color: #fff; text-shadow: 0 0 3px #000, 0 1px 0 #000; }
#bdg .bdg-rw-it span { font-size: 0.76rem; line-height: 1.2; text-align: center; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#bdg .bdg-rw-it em { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 700 0.74rem var(--thai); font-style: normal; padding: 1px 8px; border-radius: 7px; white-space: nowrap; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
#bdg .bdg-rw-it .bd-hi { background: #3f7a35; color: #eaffd8; }
#bdg .bdg-rw-it .bd-mid { background: #2b5a8a; color: #e2f0ff; }
#bdg .bdg-rw-it .bd-lo { background: #7a5520; color: #ffe2a0; }
#bdg .bdg-rw-it .bd-rare { background: #8a2244; color: #ffd0de; }
#bdg .bdg-rw-it .bd-sure { background: #5a4420; color: #ffe2a0; }
#bdg .bdg-rw-it.got { opacity: 0.5; }
#bdg .bdg-rnote { margin-top: auto; font-size: 0.78rem; color: #a99d84; text-align: center; }

/* a reward's card */
#bdg .bdg-rcard-wrap { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(6, 4, 12, 0.55); }
#bdg .bdg-rcard {
  width: min(420px, 92%); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 16px; border-radius: 16px; font-family: var(--thai); color: #f0e6cf;
  background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.08), transparent 60%), linear-gradient(180deg, rgba(34, 26, 40, 0.99), rgba(14, 12, 22, 0.99));
  border: 2px solid var(--gc); box-shadow: 0 0 0 1px #000, 0 0 30px rgba(0, 0, 0, 0.6), 0 0 22px var(--gc); animation: bdrPop 0.2s ease-out both;
}
#bdg .rc-top { display: flex; align-items: center; gap: 14px; }
#bdg .rc-ic { flex: none; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 14px; border: 2px solid var(--gc); background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.35)); }
#bdg .rc-ic img { width: 70px; height: 70px; object-fit: contain; }
#bdg .rc-name small { display: block; color: #b9ab8c; font-size: 0.82rem; }
#bdg .rc-name b { display: block; font: 700 1.3rem/1.2 var(--thai); color: var(--gc); }
#bdg .rc-rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); font-size: 0.9rem; }
#bdg .rc-rows dt { color: #b9ab8c; }
#bdg .rc-rows dd { margin: 0; color: #fff; font-weight: 700; }
#bdg .rc-rows dd em { font-style: normal; font-weight: 500; color: #cfc4a8; font-size: 0.8rem; }
#bdg .rc-grades { display: flex; flex-wrap: wrap; gap: 5px; }
#bdg .rc-grades span { padding: 2px 9px; border-radius: 7px; border: 1px solid currentColor; font-size: 0.82rem; font-weight: 700; }
#bdg .rc-desc { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #e2d8bf; }
#bdg .rc-note { margin: 0; font-size: 0.8rem; color: #ffd98a; }
#bdg .rcard-close { align-self: center; min-width: 140px; color: var(--ink); }

@media (max-width: 900px) {
  #bdg .bdg-panel { height: auto; overflow-y: auto; }
  #bdg .bdg-body { grid-template-columns: 1fr; }
  #bdg .bdg-tiers { flex-direction: row; overflow-x: auto; }
  #bdg .bdg-tier { min-width: 150px; }
  #bdg .bdg-hero { min-height: 300px; }
  #bdg .panel-head { flex-wrap: wrap; }
  #bdg .bdg-foot { flex-wrap: wrap; }
  #bdg .bdg-enter { width: 100%; }
}
/* (compact: the power and the bar side by side, one-line facts, the story under the name, the team in one row) */
#bdg .bdg-cpbox { flex-direction: row; align-items: center; gap: 14px; padding: 8px 14px; }
#bdg .bdg-cpbox .cp-l { display: flex; flex-direction: column; }
#bdg .bdg-cpbox .cp-r { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
#bdg .bdg-cpbox .cp-r i { grid-column: 1 / -1; }
#bdg .bdg-cpbox .cp-r span { color: #cfc4a8; font-size: 0.82rem; }
#bdg .bdg-cpbox .cp-r strong { font-size: 0.9rem; color: #9be37b; }
#bdg .bdg-cpbox.warn strong { color: #f2b84b; }
#bdg .bdg-cpbox.bad strong { color: #ff7a6a; }
#bdg .bdg-cpbox b { font-size: 1.9rem; }
#bdg .bdg-facts > div { padding: 6px 10px; }
#bdg .bdg-facts span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; }
#bdg .bdg-rewards { gap: 6px; padding: 8px 12px; }
#bdg .bdg-rgrid { gap: 13px 8px; }
#bdg .bdg-name p { margin: 6px 0 0; max-width: 64%; font-size: 0.8rem; line-height: 1.4; color: #d8ccb0; text-shadow: 0 1px 0 #000; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#bdg .bdg-foot p small { font-size: 0.78rem; color: #a99d84; }
#bdg .bdg-teambox { flex-direction: row; align-items: center; gap: 12px; }
#bdg .bdg-teambox > small { flex: 0 1 38%; }
#bdg .bdg-teambox .bdg-mates, #bdg .bdg-teambox .bdg-team { flex: 1; }
#bdg .bdg-rw-it img { width: 44px; height: 44px; }
#bdg .bdg-rw-it .q { top: 38px; }
#bdg .bdg-rnote { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- character window: the adventure book (2026-10-11, ref/ui_book/target.png) ----------
   Every box sits at its pixel spot in the 1536 x 1024 picture; .bk is that picture's space, scaled to the screen by --bk
   (charinfo.js fit). The book, frames and buttons are Codex paintings in assets/ui_book. */
#charpanel.book { display: block; padding: 0; background: none; }
#charpanel .bk { position: absolute; left: 50%; top: 50%; width: 1536px; height: 1024px; margin: -512px 0 0 -768px;
  transform: scale(var(--bk, 1)); transform-origin: 50% 50%; pointer-events: none; overflow: visible;
  font-family: 'Mali', 'Fredoka', sans-serif; color: #fff; --bkgold: #f6dc98; --bkink: #2b1d0e; }
#charpanel .bk > * { position: absolute; pointer-events: auto; box-sizing: border-box; }
#charpanel .bk button { font-family: inherit; cursor: pointer; padding: 0; border: 0; background: none; color: inherit; }
/* the painted book is symmetric, the picture's is not (left page 604 px, right 583): each half is fitted on its own
   (tools/book_align.py and the header line / gem clasp of both) */
#charpanel .bk-book { top: 92px; height: 833px; background: var(--uib-book, url(../assets/ui_book/book.png)) no-repeat; }
#charpanel .bk-book.l { left: 156px; width: 611px; background-size: 1197px 833px; background-position: 0 0; }
#charpanel .bk-book.r { left: 767px; width: 592px; background-size: 1208px 833px; background-position: -617px 0; }
#charpanel .bk-title { margin: 0; display: flex; align-items: center; gap: 14px; height: 40px; font: 700 30px/1 'Mali', sans-serif; color: var(--bkgold); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); white-space: nowrap; }
#charpanel .bk-title img { width: 38px; height: 38px; }
#charpanel .bk-title.l { left: 254px; top: 140px; }
#charpanel .bk-title.r { left: 828px; top: 140px; }

/* left page */
#charpanel .bk-cp { left: 228px; top: 186px; width: 540px; height: 62px; padding: 2px 26px 19px 34px; display: flex; align-items: center; gap: 12px;
  background: var(--uib-cp_ribbon, url(../assets/ui_book/cp_ribbon.png)) center / 100% 100% no-repeat; color: var(--bkink); font: 700 14px/1 'Mali', sans-serif; white-space: nowrap; }
#charpanel .bk-cp span { display: inline-flex; align-items: center; gap: 5px; }
#charpanel .bk-cp img { width: 22px; height: 22px; }
#charpanel .bk-cp-main { gap: 0 !important; }
#charpanel .bk-cp-main i { font: 700 22px/1 'Fredoka', sans-serif; font-style: normal; margin-right: 9px; }
#charpanel .bk-cp-main b { font: 700 27px/1 'Fredoka', sans-serif; margin-right: 4px; }
#charpanel .bk-cp-main u { text-decoration: none; margin-left: 6px; font: 800 15px/1 'Fredoka', sans-serif; color: #1f7a1a; }
#charpanel .bk-bgpick { left: 504px; top: 234px; display: flex; align-items: center; gap: 7px; font: 500 16px/1 'Mali', sans-serif; color: #f2ead6; }
#charpanel .bk-bgpick span { margin-right: 3px; }
#charpanel .bk-bgpick button { width: 27px; height: 28px; font: 600 15px/28px 'Fredoka', sans-serif; color: #fff; text-align: center; background: var(--uib-num_off, url(../assets/ui_book/num_off.png)) center / 100% 100% no-repeat; }
#charpanel .bk-bgpick button.on { color: var(--bkink); background-image: var(--uib-num_on, url(../assets/ui_book/num_on.png)); }
#charpanel .bk-slots { top: 272px; width: 80px; display: flex; flex-direction: column; gap: 7px; }
#charpanel .bk-slots.l { left: 256px; }
#charpanel .bk-slots.r { left: 649px; }
#charpanel .bk-slot { position: relative; width: 80px; height: 72px; cursor: pointer; background: url(../assets/ui_book/slot_g0.png) center / 100% 100% no-repeat; }
#charpanel .bk-slot.g1 { background-image: url(../assets/ui_book/slot_g1.png); }
#charpanel .bk-slot.g2 { background-image: url(../assets/ui_book/slot_g2.png); }
#charpanel .bk-slot.g3 { background-image: url(../assets/ui_book/slot_g3.png); }
#charpanel .bk-slot.g4 { background-image: url(../assets/ui_book/slot_g4.png); }
#charpanel .bk-slot.g5 { background-image: url(../assets/ui_book/slot_g5.png); }
#charpanel .bk-slot img { position: absolute; left: 13px; top: 3px; width: 54px; height: 50px; object-fit: contain; }
#charpanel .bk-slot b { position: absolute; left: 7px; top: 4px; font: 800 15px/1 'Fredoka', sans-serif; color: #ffe45c; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#charpanel .bk-slot small { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 600 13px/1 'Mali', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#charpanel .bk-slot:hover { filter: brightness(1.15); }
#charpanel .bk-stage { left: 347px; top: 272px; width: 292px; height: 390px; }
#charpanel .bk-hero { position: absolute; left: 3px; top: 3px; width: 286px; height: 384px; border-radius: 6px; display: block; }
#charpanel .bk-frame { position: absolute; inset: 0; background: var(--uib-stage_frame, url(../assets/ui_book/stage_frame.png)) center / 100% 100% no-repeat; pointer-events: none; }
#charpanel .bk-name { position: absolute; left: 13px; top: 11px; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
#charpanel .bk-name b { font: 700 28px/1.05 'Fredoka', 'Mali', sans-serif; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), 0 0 2px #000; }
#charpanel .bk-name span { margin-top: 3px; font: 500 17px/1.1 'Mali', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px #000; }
#charpanel .bk-name em { margin-top: 8px; min-width: 77px; height: 28px; padding: 0 4px; font: 500 17px/28px 'Fredoka', sans-serif; font-style: normal; text-align: center; color: #fff; padding: 0 14px; border: 0 solid transparent; border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 10px stretch; }
#charpanel .bk-bars { left: 250px; top: 678px; width: 472px; display: flex; flex-direction: column; gap: 4px; }
#charpanel .bk-bar { display: grid; grid-template-columns: 50px 324px 1fr; align-items: center; height: 19px; font: 600 15px/1 'Fredoka', sans-serif; }
#charpanel .bk-bar i { position: relative; height: 13px; border-style: solid; border-width: 0 6px; border-image: url(../assets/ui_book/bar_track.png) 0 17 fill / 0 6px stretch; }
#charpanel .bk-bar i b { position: absolute; left: -5px; top: 1px; bottom: 1px; min-width: 11px; max-width: calc(100% + 10px); box-sizing: border-box; border-style: solid; border-width: 0 5px; border-image: url(../assets/ui_book/bar_red.png) 0 13 fill / 0 5px stretch; }
#charpanel .bk-bar.mp i b { border-image-source: url(../assets/ui_book/bar_blue.png); }
#charpanel .bk-bar.xp i b { border-image-source: url(../assets/ui_book/bar_gold.png); }
#charpanel .bk-bar em { font-style: normal; text-align: right; white-space: nowrap; font: 500 15px/1 'Fredoka', sans-serif; }
#charpanel .bk-cards { left: 245px; top: 752px; width: 483px; display: grid; grid-template-columns: 235px 243px; gap: 5px 5px; }
#charpanel .bk-card { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; height: 40px; padding: 0 18px 0 16px; border: 0 solid transparent; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#charpanel .bk-card img { width: 30px; height: 30px; object-fit: contain; }
#charpanel .bk-card span { font: 400 16px/1 'Mali', sans-serif; }
#charpanel .bk-card b { font: 600 18px/1 'Fredoka', sans-serif; }
#charpanel .bk-arrow { width: 38px; height: 35px; background: var(--uib-arrow_left, url(../assets/ui_book/arrow_left.png)) center / 100% 100% no-repeat !important; }
#charpanel .bk-arrow.l { left: 261px; top: 860px; }
#charpanel .bk-arrow.r { left: 1238px; top: 858px; background-image: var(--uib-arrow_right, url(../assets/ui_book/arrow_right.png)) !important; }
#charpanel .bk-arrow:hover, #charpanel .bk-btn:hover:not(:disabled), #charpanel .bk-tab:hover, #charpanel .bk-ribbon:hover, #charpanel .bk-sq:hover, #charpanel .bk-close:hover { filter: brightness(1.15); }
#charpanel .bk-pageno { top: 865px; width: 142px; display: flex; align-items: center; justify-content: space-between; font: 500 16px/24px 'Fredoka', sans-serif; color: #f2ead6; pointer-events: none !important; }
#charpanel .bk-pageno i { width: 22px; height: 22px; background: var(--uib-page_orn_left, url(../assets/ui_book/page_orn_left.png)) center / contain no-repeat; }
#charpanel .bk-pageno i:last-child { background-image: var(--uib-page_orn_right, url(../assets/ui_book/page_orn_right.png)); }
#charpanel .bk-pageno.l { left: 424px; }
#charpanel .bk-pageno.r { left: 966px; }

/* right page */
#charpanel .bk-pts { left: 1097px; top: 147px; width: 118px; height: 30px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 15px/1 'Mali', sans-serif; color: #f3ead2;
  border: 0 solid transparent; border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 10px stretch; white-space: nowrap; }
#charpanel .bk-pts b { font: 700 17px/1 'Fredoka', sans-serif; color: #ffd75a; }
/* (2026-10-17: it ran over the "สเตตัส" title; now a two-line pill whose right edge stays just left of แต้มคงเหลือ, so it
   grows towards the title only as far as the price needs) */
#charpanel .bk-restore { left: 1091px; top: 147px; height: 30px; transform: translateX(-100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 11px !important; white-space: nowrap; color: #ffd6d6 !important; border: 0 solid transparent !important; border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 10px stretch !important; }
#charpanel .bk-restore b { font: 600 12px/1 'Mali', sans-serif; }
#charpanel .bk-restore small { font: 600 10.5px/1 'Fredoka', sans-serif; opacity: 0.9; }
#charpanel .bk-restore[hidden] { display: none; }
#charpanel .bk-esc { left: 1225px; top: 145px; width: 35px; height: 30px; font: 800 14px/30px 'Fredoka', sans-serif; text-align: center; color: var(--bkink); background: var(--uib-key_gold, url(../assets/ui_book/key_gold.png)) center / 100% 100% no-repeat; pointer-events: none !important; }
#charpanel .bk-close { left: 1267px; top: 145px; width: 33px; height: 32px; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / 100% 100% no-repeat !important; }
#charpanel .bk-stats { left: 819px; top: 197px; width: 469px; display: flex; flex-direction: column; gap: 2px; }
#charpanel .bk-stat { position: relative; height: 38px; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 13px; padding: 0 58px 0 14px; cursor: pointer;
  border: 0 solid transparent; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#charpanel .bk-stat > img { width: 32px; height: 32px; object-fit: contain; }
#charpanel .bk-sname { display: flex; flex-direction: column; line-height: 1; }
#charpanel .bk-sname b { font: 600 17px/1 'Fredoka', sans-serif; }
#charpanel .bk-sname small { margin-top: 2px; font: 400 13px/1.05 'Mali', sans-serif; color: #e9e2cf; }
#charpanel .bk-sval { display: flex; align-items: baseline; gap: 2px; min-width: 70px; padding-right: 10px; }
#charpanel .bk-sval b { font: 600 22px/1 'Fredoka', sans-serif; margin-right: 7px; }
#charpanel .bk-sval small { font: 500 13px/1 'Fredoka', sans-serif; color: #e3dccb; }
#charpanel .bk-sval small.full { color: #ffd75a; }
#charpanel .bk-sval u { text-decoration: none; font: 700 14px/1 'Fredoka', sans-serif; color: #8ef07a; margin-right: 5px; }
#charpanel .bk-sval s { text-decoration: none; font: 700 13px/1 'Fredoka', sans-serif; color: #ff8a8a; margin-right: 5px; }
#charpanel .bk-stat.pend .bk-sval b { color: #8ef07a; }
#charpanel .bk-stat.pend { padding-right: 88px; }
#charpanel .bk-plus { position: absolute; right: 13px; top: 3px; width: 40px; height: 31px; background: url(../assets/ui_book/btn_plus.png) center / 100% 100% no-repeat !important; }
#charpanel .bk-plus:disabled { cursor: default; }
#charpanel .bk-minus { position: absolute; right: 58px; top: 7px; width: 24px; height: 24px; border-radius: 6px; font: 800 18px/22px 'Fredoka', sans-serif !important; color: #fff !important; background: rgba(0, 0, 0, 0.45) !important; box-shadow: inset 0 0 0 1px #c9a24a; }
#charpanel .bk-btn { height: 37px; font: 500 18px/37px 'Mali', sans-serif; text-align: center; white-space: nowrap; color: #f4ead0 !important; border: 0 solid transparent !important; border-image: var(--uib-btn_dark, url(../assets/ui_book/btn_dark.png)) 24 fill / 10px stretch !important; }
#charpanel .bk-btn.gold { color: #3a2410 !important; font-weight: 700; border-image-source: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) !important; }
#charpanel .bk-btn:disabled { cursor: default; }
#charpanel .bk-cancel { left: 819px; top: 444px; width: 118px; }
#charpanel .bk-ok { left: 946px; top: 444px; width: 168px; }
#charpanel .bk-reset { left: 1124px; top: 444px; width: 166px; font-size: 17px !important; }
#charpanel .bk-tabs { left: 805px; top: 495px; display: flex; gap: 4px; }
#charpanel .bk-tab { height: 35px; font: 500 15px/35px 'Mali', sans-serif !important; text-align: center; white-space: nowrap; color: #efe6cf !important; border: 0 solid transparent !important; border-image: var(--uib-tab_off, url(../assets/ui_book/tab_off.png)) 22 fill / 9px stretch !important; }
#charpanel .bk-tab.on { color: #3a2410 !important; font-weight: 700 !important; border-image-source: var(--uib-tab_on, url(../assets/ui_book/tab_on.png)) !important; }
#charpanel .bk-tab:nth-child(1) { width: 106px; padding-left: 4px !important; font-size: 14px !important; letter-spacing: -0.2px; }
#charpanel .bk-tab:nth-child(2) { width: 101px; }
#charpanel .bk-tab:nth-child(3) { width: 91px; }
#charpanel .bk-tab:nth-child(4) { width: 81px; }
#charpanel .bk-tab:nth-child(5) { width: 105px; }
#charpanel .bk-pane { left: 805px; top: 536px; width: 482px; height: 316px; overflow-y: auto; scrollbar-width: none; padding: 4px 4px 4px 5px; }
#charpanel .bk-pane::-webkit-scrollbar { display: none; }
#charpanel .bk-pane.cols { display: grid; grid-template-columns: 236px 236px; gap: 0 10px; align-content: start;
  background: linear-gradient(rgba(201, 162, 74, 0.55), rgba(201, 162, 74, 0.55)) 245px 6px / 1px calc(100% - 12px) no-repeat; }
#charpanel .bk-sgroup { display: flex; flex-direction: column; margin-bottom: 8px; }
#charpanel .bk-sgroup h4 { margin: 2px 0 3px 10px; font: 700 17px/1.2 'Mali', sans-serif; color: #ffd75a; }
#charpanel .bk-sgroup h4 small { font-size: 12px; color: #e9e2cf; font-weight: 500; }
#charpanel .bk-srow { display: flex; justify-content: space-between; align-items: center; gap: 6px; height: 22.7px; padding: 0 9px 0 10px; font: 400 15px/1 'Mali', sans-serif; color: #ece4cf;
  border-style: solid; border-width: 0; border-image: var(--uib-sheet_row, url(../assets/ui_book/sheet_row.png)) 12 18 fill / 3px 6px stretch; }
#charpanel .bk-srow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#charpanel .bk-srow b { font: 600 15px/1 'Fredoka', sans-serif; color: #fff; white-space: nowrap; }
#charpanel .bk-srow b small { color: #9be37b; font-size: 12px; }
#charpanel .bk-srow.dim { opacity: 0.5; }
#charpanel .bk-pane:not(.cols) .bk-srow { height: auto; min-height: 24px; padding: 3px 10px; }
#charpanel .bk-pane:not(.cols) .bk-srow b { font-size: 14px; white-space: normal; text-align: right; }
#charpanel .bk-note { margin: 2px 6px 8px; font: 500 14px/1.45 'Mali', sans-serif; color: #e9e2cf; }
#charpanel .bk-note b { color: #ffd75a; }
#charpanel .bk-wcard { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; margin: 2px 6px 10px; }
#charpanel .bk-wcard img { width: 56px; height: 56px; }
#charpanel .bk-wcard b { display: block; font: 700 15px/1.3 'Mali', sans-serif; }
#charpanel .bk-wcard i { display: block; position: relative; height: 10px; margin: 5px 0 3px; background: url(../assets/ui_book/bar_track.png) center / 100% 100% no-repeat; }
#charpanel .bk-wcard i u { position: absolute; left: 1px; top: 1px; bottom: 1px; border-radius: 5px; background: url(../assets/ui_book/bar_gold.png) left center / 380px 100% no-repeat; }
#charpanel .bk-wcard small { font: 500 13px/1.3 'Mali', sans-serif; color: #e9e2cf; }
#charpanel .bk-eng, #charpanel .bk-relic { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; margin: 0 4px 6px; padding: 6px 12px; min-height: 44px; font: 400 14px/1.3 'Mali', sans-serif; color: #ece4cf;
  border: 0 solid transparent; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#charpanel .bk-relic img { width: 40px; height: 40px; }
#charpanel .bk-relic small { display: block; font-size: 12px; color: #d9d2c0; }
#charpanel .bk-relic.dim { opacity: 0.75; }
#charpanel .bk-eng em { font-style: normal; font-weight: 700; }
#charpanel .bk-btn.small { position: static; height: 30px; padding: 0 12px !important; font: 600 13px/30px 'Mali', sans-serif !important; }
#charpanel .bk-btn.small:disabled { opacity: 0.55; }
#charpanel .bk-scroll { left: 1290px; top: 546px; width: 20px; height: 300px; border-style: solid; border-width: 20px 0; border-image: var(--uib-scroll_track, url(../assets/ui_book/scroll_track.png)) 40 0 fill / 20px 0 stretch; pointer-events: none !important; }
#charpanel .bk-scroll i { position: absolute; left: 4px; width: 12px; margin-top: -4px; border-style: solid; border-width: 8px 0; border-image: var(--uib-scroll_thumb, url(../assets/ui_book/scroll_thumb.png)) 16 0 fill / 8px 0 stretch; }

/* bookmark ribbons and the small square tabs on the book's right edge */
#charpanel .bk-ribbon { left: 1340px; width: 94px; height: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-bottom: 6px !important;
  background: url(../assets/ui_book/ribbon_green.png) center / 100% 100% no-repeat !important; font: 700 15px/1.1 'Mali', sans-serif !important;
  color: #fff !important; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
#charpanel .bk-ribbon img { width: 48px; height: 48px; object-fit: contain; }
#charpanel .bk-ribbon.green { top: 205px; }
#charpanel .bk-ribbon.red { top: 309px; background-image: url(../assets/ui_book/ribbon_red.png) !important; }
#charpanel .bk-ribbon.orange { top: 413px; background-image: url(../assets/ui_book/ribbon_orange.png) !important; }
#charpanel .bk-ribbon.purple { top: 517px; background-image: url(../assets/ui_book/ribbon_purple.png) !important; }
#charpanel .bk-sqs { left: 1358px; top: 620px; width: 64px; display: flex; flex-direction: column; gap: 8px; }
#charpanel .bk-sq { width: 64px; height: 40px; display: grid; place-items: center; background: var(--uib-tab_square, url(../assets/ui_book/tab_square.png)) center / 100% 100% no-repeat !important; }
#charpanel .bk-sq img { width: 26px; height: 26px; object-fit: contain; }
#charpanel .bk .ci-pop { position: absolute; z-index: 30; width: 330px; max-height: 700px; }

/* ---------- the HUD's HTML parts in the Obsidian Gold look (HUD pick F, 2026-10-11; canvas parts: hud.js F()) ---------- */
#ui { --hud-navy: rgba(11, 10, 14, 0.9); --hud-gold: #d9a443; --hud-ink: #050407; }
#menubar { background: none; border: 0 solid transparent; box-shadow: none;
  border-image: url(../assets/ui_book/hud_menubar.png) 44 70 fill / calc(13px * var(--u)) calc(21px * var(--u)) stretch; }
#menubar .mb-grp + .mb-grp { border-left: 0; background: url(../assets/ui_book/hud_divider.png) left center / calc(3px * var(--u)) 86% no-repeat; }
#menubar .mb-btn:hover, #menubar .mb-btn.open { background: rgba(255, 210, 120, 0.13); }
#menubar kbd { background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; color: #241a0e; border-radius: 0; }
#menubar .mb-badge { background: url(../assets/ui_book/hud_badge.png) center / 100% 100% no-repeat; box-shadow: none; min-width: calc(17px * var(--u)); }
#menupop { background: rgba(11, 10, 14, 0.96); border-color: var(--hud-gold); }
#menupop .mp-item kbd { background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; color: #241a0e; border-radius: 0; }
#questbox { background: none; border: 0 solid transparent; box-shadow: none; border-radius: 0;
  border-image: url(../assets/ui_book/hud_panel.png) 40 fill / calc(12px * var(--u)) stretch; }
#questbox:hover { border-color: transparent; box-shadow: none; filter: brightness(1.12); }
#questbox .q-head { border-bottom-color: rgba(217, 164, 67, 0.5); }
#chat .chat-feed { background: none; border: 0 solid transparent; border-radius: 0; mask-image: none;
  border-image: url(../assets/ui_book/hud_panel.png) 40 fill / calc(12px * var(--u)) stretch; }
#chat.typing .chat-feed { background: none; }
#chat .chat-tab { border: 0 solid transparent; border-radius: 0; background: none; color: #f3ecd6;
  border-image: url(../assets/ui_book/hud_tab_off.png) 20 32 fill / calc(8px * var(--u)) calc(12px * var(--u)) stretch; }
#chat .chat-tab:hover { background: none; filter: brightness(1.2); }
#chat .chat-tab.on { background: none; color: #ffd75a; border-image-source: url(../assets/ui_book/hud_tab_on.png); }
#chat .chat-key { border: 0 solid transparent; border-radius: 0; background: none;
  border-image: url(../assets/ui_book/hud_plate.png) 20 40 fill / calc(8px * var(--u)) calc(14px * var(--u)) stretch; }
#chat .chat-key:hover { background: none; color: #ffe08a; }
#goldchip { border: 0 solid transparent; border-radius: 0; background: none; box-shadow: none; color: #ffe08a;
  border-image: url(../assets/ui_book/hud_plate.png) 20 40 fill / calc(10px * var(--u)) calc(16px * var(--u)) stretch; }
#lootfeed .lf-row { background: rgba(11, 10, 14, 0.82); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.45); }
.auto-btn.docked .auto-img { background: url(../assets/ui_book/hud_auto_btn.png) center / contain no-repeat; }
.auto-btn.docked .auto-img canvas { opacity: 0; }
.auto-btn.docked::after { background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; border: 0; color: #241a0e; border-radius: 0; }
.auto-btn.docked.on::after { background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; filter: brightness(1.25); }
.auto-cfg-btn { border: 0; box-shadow: none; background: url(../assets/ui_book/hud_gear_btn.png) center / contain no-repeat; color: transparent; font-size: 0; }
.auto-cfg-btn:hover { background: url(../assets/ui_book/hud_gear_btn.png) center / contain no-repeat; filter: brightness(1.15); }
/* while the character book is open: the menu bar and the gold stay over it (as in the picked picture), the quest box goes */
#ui.book-open #menubar, #ui.book-open #goldchip { z-index: 6; }
#ui.book-open #menupop { z-index: 7; }
#ui.book-open #questbox { visibility: hidden; }

/* ---------- every window as a book (2026-10-12, js/bookui.js): the same open book as the character window ----------
   The window's panel (.bkx) becomes the picture's 1536 x 1024 stage, scaled by --bk (bookui.js). Left page content box
   x 228-740, right page x 815-1300, both y 196-850; titles at y 140. Everything is #ui .bookwin so it wins over the old
   skins (.skinned ...). */
#ui .overlay.bookwin { display: block; padding: 0; background: none; }
#ui .bookwin .panel.bkx { position: absolute; left: 50%; top: 50%; width: 1536px; height: 1024px; max-width: none; max-height: none; min-height: 0;
  margin: -512px 0 0 -768px; padding: 0; display: block; gap: 0; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  transform: scale(var(--bk, 1)); transform-origin: 50% 50%; pointer-events: none; font-family: 'Mali', 'Fredoka', sans-serif; color: #f2ead6; }
#ui .bookwin .bkx > * { pointer-events: auto; }
#ui .bookwin .bkd, #ui .bookwin .panel-head { display: contents; }
#ui .bookwin .bkd > *, #ui .bookwin .bkd .bk-sqs { position: absolute; box-sizing: border-box; }
#ui .bookwin .bk-book { top: 92px; height: 833px; background: var(--uib-book, url(../assets/ui_book/book.png)) no-repeat; }
#ui .bookwin .bk-book.l { left: 156px; width: 611px; background-size: 1197px 833px; background-position: 0 0; }
#ui .bookwin .bk-book.r { left: 767px; width: 592px; background-size: 1208px 833px; background-position: -617px 0; }
/* titles: the window's own heading on the left page, the right page's from bookui.js */
#ui .bookwin .panel-head h2, #ui .bookwin .bk-title { position: absolute; margin: 0; display: flex; align-items: center; gap: 14px; height: 40px; top: 140px;
  font: 700 30px/1 'Mali', sans-serif; color: #f6dc98; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55); white-space: nowrap; letter-spacing: 0; }
#ui .bookwin .panel-head h2 { left: 254px; max-width: 470px; overflow: hidden; }
#ui .bookwin .panel-head h2 small, #ui .bookwin .panel-head h2 .emblem-inline { display: none; }
#ui .bookwin .bkd-fl, #ui .bookwin .bk-title img { width: 38px; height: 38px; flex: none; object-fit: contain; }
#ui .bookwin .bk-title.r { left: 828px; }
#ui .bookwin .bk-title .bkd-ic { width: 40px; height: 40px; }
#ui .bookwin .bk-esc { left: 1225px; top: 145px; width: 35px; height: 30px; font: 800 14px/30px 'Fredoka', sans-serif; text-align: center; color: #2b1d0e;
  background: var(--uib-key_gold, url(../assets/ui_book/key_gold.png)) center / 100% 100% no-repeat; pointer-events: none; }
#ui .bookwin .close-x { position: absolute; left: 1267px; top: 145px; width: 33px; height: 32px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  font-size: 0; color: transparent; background: var(--uib-btn_close, url(../assets/ui_book/btn_close.png)) center / 100% 100% no-repeat; }
#ui .bookwin .close-x:hover { filter: brightness(1.15); transform: none; }
/* the ribbons on the book's edge (the lit one is the category of the page on show), the small square tabs, the arrows */
#ui .bookwin .bk-ribbon { left: 1340px; width: 94px; height: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 0 6px;
  border: 0; cursor: pointer; background: url(../assets/ui_book/ribbon_green.png) center / 100% 100% no-repeat; font: 700 15px/1.1 'Mali', sans-serif;
  color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; transition: transform 0.12s; }
#ui .bookwin .bk-ribbon img { width: 48px; height: 48px; object-fit: contain; }
#ui .bookwin .bk-ribbon.green { top: 205px; }
#ui .bookwin .bk-ribbon.red { top: 309px; background-image: url(../assets/ui_book/ribbon_red.png); }
#ui .bookwin .bk-ribbon.orange { top: 413px; background-image: url(../assets/ui_book/ribbon_orange.png); }
#ui .bookwin .bk-ribbon.purple { top: 517px; background-image: url(../assets/ui_book/ribbon_purple.png); }
#ui .bookwin .bk-ribbon:not(.on) { filter: brightness(0.82) saturate(0.85); }
#ui .bookwin .bk-ribbon.on { transform: translateX(10px); filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.75)); }
#ui .bookwin .bk-ribbon:hover { filter: brightness(1.12); transform: translateX(6px); }
#ui .bookwin .bk-sqs { left: 1358px; top: 620px; width: 64px; display: flex; flex-direction: column; gap: 8px; }
#ui .bookwin .bk-sq { width: 64px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: var(--uib-tab_square, url(../assets/ui_book/tab_square.png)) center / 100% 100% no-repeat; }
#ui .bookwin .bk-sq img { width: 26px; height: 26px; object-fit: contain; }
#ui .bookwin .bk-sq:hover, #ui .bookwin .bk-arrow:hover { filter: brightness(1.15); }
#ui .bookwin .bk-arrow { width: 38px; height: 35px; padding: 0; border: 0; cursor: pointer; background: var(--uib-arrow_left, url(../assets/ui_book/arrow_left.png)) center / 100% 100% no-repeat; }
#ui .bookwin .bk-arrow.l { left: 261px; top: 860px; }
#ui .bookwin .bk-arrow.r { left: 1238px; top: 858px; background-image: var(--uib-arrow_right, url(../assets/ui_book/arrow_right.png)); }
#ui .bookwin .bk-pageno { top: 865px; width: 142px; display: flex; align-items: center; justify-content: space-between; font: 500 16px/24px 'Fredoka', sans-serif; color: #f2ead6; pointer-events: none; }
#ui .bookwin .bk-pageno i { width: 22px; height: 22px; background: var(--uib-page_orn_left, url(../assets/ui_book/page_orn_left.png)) center / contain no-repeat; }
#ui .bookwin .bk-pageno i:last-child { background-image: var(--uib-page_orn_right, url(../assets/ui_book/page_orn_right.png)); }
#ui .bookwin .bk-pageno.l { left: 424px; }
#ui .bookwin .bk-pageno.r { left: 966px; }

/* the kit inside every book page: gold / black buttons, gold tabs, dark rows with a gold rim, dark wells */
#ui .bookwin .btn { min-height: 36px; padding: 0 16px; border: 0 solid transparent; border-radius: 0; box-shadow: none; transform: none;
  border-image: var(--uib-btn_dark, url(../assets/ui_book/btn_dark.png)) 24 fill / 10px stretch; background: none; color: #f4ead0; font: 500 15px 'Mali', sans-serif; }
#ui .bookwin .btn.primary { border-image-source: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)); color: #3a2410; font-weight: 700; }
#ui .bookwin .btn:hover:not(:disabled) { filter: brightness(1.15); background: none; }
#ui .bookwin .btn:disabled { opacity: 0.55; }
#ui .bookwin .btn.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
#ui .bookwin :is(.eco-tab, .tree-tab, .wm-tab, .bdg-tabs button, .av-tabs .btn, .ap-tabs button, .fg-tabs button) {
  border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none; color: #efe6cf; font: 500 15px/1.2 'Mali', sans-serif;
  border-image: var(--uib-tab_off, url(../assets/ui_book/tab_off.png)) 22 fill / 9px stretch; padding: 6px 13px; min-height: 0; cursor: pointer; }
#ui .bookwin :is(.eco-tab.on, .tree-tab.on, .wm-tab.sel, .bdg-tabs button.on, .av-tabs .btn.on, .av-tabs .btn.primary, .ap-tabs button.on, .fg-tabs button.on) {
  border-image-source: var(--uib-tab_on, url(../assets/ui_book/tab_on.png)); color: #3a2410; font-weight: 700; }
#ui .bookwin :is(.eco-tab, .tree-tab, .wm-tab):hover { filter: brightness(1.15); }
#ui .bookwin :is(.eco-row, .hub-tile, .ac-sec, .bdg-tier, .qb-ch, .ct-row) { border-radius: 0; }
#ui .bookwin .eco-row { border: 0 solid transparent; background: none; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#ui .bookwin .eco-row:hover, #ui .bookwin .eco-row.sel { filter: brightness(1.18); }
#ui .bookwin :is(.eco-main, .eco-side) { background: none; border: 0; border-radius: 0; padding: 4px; gap: 10px; }
#ui .bookwin :is(.eco-main, .eco-side, .bk-scrollbox)::-webkit-scrollbar { width: 8px; }
#ui .bookwin :is(.eco-main, .eco-side, .bk-scrollbox)::-webkit-scrollbar-thumb { background: #c9a24a; border-radius: 4px; }
#ui .bookwin :is(.eco-main, .eco-side, .bk-scrollbox)::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.35); border-radius: 4px; }
#ui .bookwin .eco-hint, #ui .bookwin .eco-note { color: #e9e2cf; }
#ui .bookwin .eco-goldchip { border: 0 solid transparent; border-radius: 0; background: none; border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 10px stretch; padding: 3px 12px; color: #ffd75a; }

/* ---- the bag / shop / forge / options / crafting / salvage / market book (#eco) ---- */
#ui .bw-eco .eco-gold { position: absolute; left: 1090px; top: 145px; }
#ui .bw-eco .eco-tabs, #ui .bw-content .eco-tabs, #ui .bw-quests .eco-tabs { position: absolute; left: 228px; top: 194px; width: 516px; display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bw-eco .eco-body, #ui .bw-content .eco-body, #ui .bw-quests .eco-body { display: contents; }
#ui .bw-eco .eco-main, #ui .bw-content .eco-main, #ui .bw-quests .eco-main { position: absolute; left: 226px; top: 276px; width: 518px; height: 576px; overflow-y: auto; }
#ui .bw-eco .eco-side, #ui .bw-content .eco-side, #ui .bw-quests .eco-side { position: absolute; left: 812px; top: 196px; width: 492px; height: 656px; overflow-y: auto; }
#ui .bw-quests .eco-main, #ui .bw-content .eco-main { top: 240px; height: 612px; }
#ui .bw-content .eco-gold { position: absolute; left: 1090px; top: 145px; }

/* ---- the skill tree (#tree): the classes as an index on the left page, the class's skills on the right page ---- */
#ui .bw-tree .panel-head .row { display: contents; }
#ui .bw-tree .sp-pill { position: absolute; left: 1080px; top: 145px; height: 32px; min-height: 0; padding: 0 12px; border: 0 solid transparent; border-radius: 0; background: none;
  border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 10px stretch; box-shadow: none; }
#ui .bw-tree .tree-reset { position: absolute; left: 545px; top: 144px; }
#ui .bw-tree .tree-tabs { position: absolute; left: 228px; top: 196px; width: 516px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }
#ui .bw-tree .tree-tab { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 5px 12px; }
#ui .bw-tree .tree-wrap { position: absolute; left: 812px; top: 196px; width: 492px; height: 656px; overflow-y: auto; overflow-x: hidden; }
#ui .bw-tree .tree-foot { position: absolute; left: 228px; top: 560px; width: 516px; height: 290px; }

/* ---- the world map (#worldmap): the map on the left page, the list of maps and its facts on the right ---- */
#ui .bw-worldmap .wm-body { display: contents; }
#ui .bw-worldmap .wm-pic { position: absolute; left: 228px; top: 196px; width: 516px; height: 656px; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: rgba(0, 0, 0, 0.35); }
#ui .bw-worldmap .wm-tabs { position: absolute; left: 812px; top: 196px; width: 492px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; overflow: visible; }
#ui .bw-worldmap .wm-tab { width: auto; display: flex; align-items: center; gap: 6px; padding: 4px 10px; }
#ui .bw-worldmap .wm-side { position: absolute; left: 812px; top: 470px; width: 492px; height: 382px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }

/* ---- the main menu (#pause): the systems as the book's table of contents; the settings behind the ⚙ (layout: "The Esc book" at the end) ---- */
#ui .bw-pause .hub-body { display: contents; }
/* the systems page: 4 category cards (colour of their bookmark ribbon), clean rows: icon (badge on its corner) | name | key */
#ui .bw-pause .hub-sec:not(.hub-settings) { position: absolute; padding: 8px 10px 8px; box-sizing: border-box; --cat: #f6dc98;
  border: 0 solid transparent; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#ui .bw-pause .hub-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 4px 6px; border-bottom: 2px solid var(--cat);
  font: 700 20px/1.2 'Mali', sans-serif; color: var(--cat); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
#ui .bw-pause .hub-sec h3 img { width: 30px; height: 30px; object-fit: contain; }
#ui .bw-pause .hub-sec h3 em { margin-left: auto; font: 500 13px/1 'Mali', sans-serif; font-style: normal; color: #b9b1a0; white-space: nowrap; text-shadow: none; }
#ui .bw-pause .hub-grid { display: flex; flex-direction: column; gap: 0; min-width: 0; }
#ui .bw-pause .hub-tile { box-sizing: border-box; width: 100%; min-width: 0; }
#ui .bw-pause .hub-tile { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 16px; height: 41px; padding: 0 6px 0 8px;
  border: 0; border-bottom: 1px solid rgba(217, 164, 67, 0.13); background: none; box-shadow: none; transform: none; border-radius: 6px;
  color: #f4ecd8; font: 500 17px/1 'Mali', sans-serif; text-align: left; cursor: pointer; }
#ui .bw-pause .hub-tile:last-child { border-bottom: 0; }
#ui .bw-pause .hub-tile img { grid-column: 1; grid-row: 1; width: 34px; height: 34px; object-fit: contain; }
#ui .bw-pause .hub-tile span { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bw-pause .hub-tile kbd { position: static; grid-column: 3; grid-row: 1; min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 0;
  background: var(--uib-key_gold, url(../assets/ui_book/key_gold.png)) center / 100% 100% no-repeat; color: #2b1d0e; font: 800 14px/26px 'Fredoka', sans-serif; text-align: center; }
/* something waiting: a red bubble on the icon's corner and the name in bright gold */
#ui .bw-pause .hub-tile .hub-badge { position: absolute; left: 30px; right: auto; top: 0; width: auto; max-width: 30px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; box-sizing: border-box;
  background: #e5483a; box-shadow: 0 0 0 2px #1a1714, 0 0 6px rgba(229, 72, 58, 0.7); color: #fff; font: 800 11px/19px 'Fredoka', sans-serif; text-align: center; letter-spacing: -0.3px; }
#ui .bw-pause .hub-tile:has(.hub-badge:not([hidden]):not(.net)) span { color: #ffd75a; font-weight: 700; }
/* online only: dimmed, a quiet word on the right (the whole social card says it once in its title) */
#ui .bw-pause .hub-tile .hub-badge.net { position: static; grid-column: 3; grid-row: 1; height: auto; max-width: none; min-width: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: #9d968a; font: 500 12px/1 'Mali', sans-serif; }
#ui .bw-pause .hub-tile.off { opacity: 0.5; cursor: default; }
#ui .bw-pause .hub-tile:hover:not(.off) { background: linear-gradient(90deg, rgba(255, 214, 110, 0.2), rgba(255, 214, 110, 0.04)); box-shadow: inset 3px 0 0 var(--cat); }
#ui .bw-pause .hub-tile:hover:not(.off) span { color: #fff; }
/* (the settings: their own view of the book since 2026-10-17, see "The Esc book" at the end of this file) */
#ui .bw-pause .hub-settings > h3 { display: none; }
#ui .bw-pause .pause-actions { display: flex; flex-direction: column; gap: 6px; }
#ui .bw-pause .pause-actions .btn { justify-content: flex-start; gap: 14px; height: 40px; min-height: 40px; padding: 0 18px; font-size: 17px; }
#ui .bw-pause .pause-actions .btn::before { width: 26px; text-align: center; font: 700 20px/1 'Fredoka', sans-serif; color: #f2c14e; }
#ui .bw-pause #p-resume::before { content: '▶'; color: #2b1d0e; }
#ui .bw-pause #p-autocfg::before { content: '⚙'; }
#ui .bw-pause #p-uistudio::before { content: '✎'; }
#ui .bw-pause #p-music::before { content: '♪'; }
#ui .bw-pause #p-shake::before { content: '≋'; }
#ui .bw-pause #p-gfx::before { content: '▣'; }
#ui .bw-pause #p-fps::before { content: '◷'; }
#ui .bw-pause #p-avatar::before { content: '☺'; }
#ui .bw-pause #p-edit::before { content: '✦'; }
#ui .bw-pause #p-title::before { content: '⌂'; }
#ui .bw-pause .hub-settings .row { display: flex; align-items: center; gap: 12px; margin: 14px 4px 6px; padding-top: 12px; border-top: 1px solid rgba(217, 164, 67, 0.5); font: 700 18px 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-pause .hub-settings .row input[type=range] { flex: 1; accent-color: #f2c14e; }
#ui .bw-pause .hub-help summary { padding: 8px 16px; font: 500 17px 'Mali', sans-serif; color: #f4ead0; border: 0 solid transparent; border-image: var(--uib-btn_dark, url(../assets/ui_book/btn_dark.png)) 24 fill / 10px stretch; }
#ui .bw-pause .hub-help .pause-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---- auto settings (#autocfg): which monsters on the left page, skills and range on the right ---- */
#ui .bw-autocfg .ac-body { display: contents; }
#ui .bw-autocfg .ac-sec { position: absolute; box-sizing: border-box; overflow-y: auto; background: none; border: 0; padding: 4px; }
#ui .bw-autocfg .ac-mobs { left: 226px; top: 196px; width: 518px; height: 656px; }
#ui .bw-autocfg .ac-skills { left: 812px; top: 196px; width: 492px; height: 400px; }
#ui .bw-autocfg .ac-range { left: 812px; top: 600px; width: 492px; height: 196px; }
#ui .bw-autocfg .ac-foot { position: absolute; left: 812px; top: 800px; width: 492px; height: 46px; display: flex; justify-content: flex-end; gap: 8px; }
#ui .bw-autocfg .ac-sec h3 { font: 700 19px/1.2 'Mali', sans-serif; color: #f6dc98; border-bottom: 1px solid rgba(217, 164, 67, 0.5); padding-bottom: 5px; }

/* ---- character look (#avatarps): the character on the left page, the choices on the right ---- */
#ui .bw-avatar .av-body { display: contents; }
#ui .bw-avatar .av-left { position: absolute; left: 226px; top: 196px; width: 518px; height: 656px; box-sizing: border-box; display: flex; flex-direction: column; background: none; border: 0; }
#ui .bw-avatar .av-left .av-stage { flex: 1; width: 100%; min-height: 0; border-radius: 6px; }
#ui .bw-avatar .av-right { position: absolute; left: 812px; top: 196px; width: 492px; height: 596px; box-sizing: border-box; overflow-y: auto; background: none; border: 0; }
#ui .bw-avatar .ac-foot { position: absolute; left: 812px; top: 800px; width: 492px; height: 46px; display: flex; justify-content: flex-end; gap: 8px; }

/* ---- boss dungeons (#bdg): the boss on the left page, the levels and rewards on the right ---- */
#ui .bw-bdg .bdg-tabs { position: absolute; left: 228px; top: 194px; display: flex; gap: 4px; }
#ui .bw-bdg .bdg-body { display: contents; }
#ui .bw-bdg .bdg-center { position: absolute; left: 226px; top: 240px; width: 518px; height: 612px; display: flex; flex-direction: column; }
#ui .bw-bdg .bdg-tiers { position: absolute; left: 812px; top: 196px; width: 492px; height: 132px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#ui .bw-bdg .bdg-side { position: absolute; left: 812px; top: 336px; width: 492px; height: 516px; overflow-y: auto; }
/* skill book: classes, passive skills and the skill bar on the left page; the class, its active skills and ultimate on the right */
#ui .bw-tree .tree-wrap, #ui .bw-tree .tree-page { display: contents; }
#ui .bw-tree .tp-head { position: absolute; left: 812px; top: 196px; width: 492px; text-align: center; }
#ui .bw-tree .tp-active { position: absolute; left: 812px; top: 330px; width: 492px; }
#ui .bw-tree .tp-ultimate { position: absolute; left: 812px; top: 590px; width: 492px; }
#ui .bw-tree .tp-passive { position: absolute; left: 228px; top: 464px; width: 516px; }
#ui .bw-tree .tree-foot { top: 668px; height: 180px; }
#ui .bw-tree .tp-head h3 { color: #f6dc98; }
#ui .bw-tree .tp-head p { color: #e9e2cf; }
/* map book: the map and the facts of the chosen map on the left page; the maps, monsters and the warp buttons on the right */
#ui .bw-worldmap .wm-pic { height: 400px; }
#ui .bw-worldmap .wm-side { display: contents; }
#ui .bw-worldmap .wm-head { position: absolute; left: 232px; top: 610px; width: 508px; color: #f2ead6; }
#ui .bw-worldmap .wm-head b { color: #f6dc98; }
#ui .bw-worldmap .wm-zones { color: #e9e2cf; }
#ui .bw-worldmap .wm-zones span { color: #9be37b; }
#ui .bw-worldmap .wm-lists { position: absolute; left: 812px; top: 436px; width: 492px; height: 350px; }
#ui .bw-worldmap .wm-actions { position: absolute; left: 812px; top: 796px; width: 492px; flex-direction: row; }
#ui .bw-worldmap .wm-actions .btn { flex: 1; min-height: 44px; color: #f4ead0; }
#ui .bw-worldmap .wm-actions .btn.primary { color: #3a2410; }
#ui .bw-worldmap .wm-sec { background: none; border: 0; padding: 4px 2px; }
#ui .bw-worldmap .wm-sec h4 { color: #f6dc98; }
#ui .bw-worldmap .wm-sec h4 small { color: #d8d0bd; }
#ui .bw-worldmap .wm-mrow { border: 0 solid transparent; border-radius: 0; background: none; color: #f2ead6; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; }
#ui .bw-worldmap .wm-mrow.on { box-shadow: none; filter: brightness(1.25); }
#ui .bw-worldmap .wm-mrow img { background: #1a1820; }
#ui .bw-worldmap .wm-tab .wm-tab-text, #ui .bw-worldmap .wm-tab small { color: inherit; }
/* activities: a hint across the whole grid */
#ui .bookwin .ct-grid > .eco-hint { grid-column: 1 / -1; }
#ui .bookwin .ct-card { border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #f2ead6; }
/* windows the player cannot leave for another system: no ribbons, small tabs, arrows or Esc */
#ui .bw-bare :is(.bk-ribbon, .bk-sqs, .bk-arrow, .bk-esc) { display: none; }
/* the first-weapon / new-class picker: the cards on the left page, the chosen one's details and button on the right */
#ui #select.bookwin { display: block; padding: 0; overflow: visible; background: rgba(8, 7, 12, 0.35); }
#ui .bw-pick .panel-head h2 { font-size: 23px; -webkit-text-stroke: 0; }
#ui:has(#select.bookwin) #questbox, #ui:has(#avatarps.av-making) #questbox { visibility: hidden; }
#ui .bw-pick .bk-picknote { position: absolute; left: 232px; top: 190px; width: 508px; margin: 0; font: 400 13px/1.45 'Mali', sans-serif; color: #e9e2cf; }
#ui .bw-pick .class-row { position: absolute; left: 228px; top: 250px; width: 516px; height: 600px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 192px; gap: 8px; overflow-y: auto; }
#ui .bw-pick .class-card { padding: 6px; gap: 4px; border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none; color: #f2ead6; cursor: pointer;
  border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; transform: none; }
#ui .bw-pick .class-card:hover, #ui .bw-pick .class-card.bk-sel { filter: brightness(1.2); }
#ui .bw-pick .class-card.bk-sel { border-image-source: url(../assets/ui_book/slot_g4.png); border-image-slice: 30; }
#ui .bw-pick .class-card .portrait { height: 96px; border: 0; border-radius: 6px; }
#ui .bw-pick .class-card .portrait canvas { width: 96px; height: 96px; }
#ui .bw-pick .class-card h3 { font-size: 17px; color: #f6dc98; text-align: center; }
#ui .bw-pick .class-card h3 small { color: #d8d0bd; font-size: 11px; }
#ui .bw-pick .class-card p, #ui .bw-pick .class-card .skill-mini { display: none; }
#ui .bw-pick .class-card .btn { min-height: 28px; font-size: 13px; padding: 0 6px; }
#ui .bw-pick .class-card .badge { top: -6px; right: 4px; font-size: 11px; }
#ui .bw-pick #btn-back { position: absolute; left: 1124px; top: 800px; width: 176px; }
#ui .bw-pick .bk-pickinfo { position: absolute; left: 812px; top: 196px; width: 492px; height: 596px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; color: #f2ead6; }
#ui .bw-pick .bk-pickinfo .portrait { height: 200px; border: 0; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
#ui .bw-pick .bk-pickinfo .portrait canvas { width: 200px; height: 200px; }
#ui .bw-pick .bk-pickinfo h3 { margin: 0; font: 700 28px/1.1 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-pick .bk-pickinfo h3 small { display: block; font: 500 15px 'Mali', sans-serif; color: #d8d0bd; }
#ui .bw-pick .bk-pickinfo p { margin: 0; font: 400 15px/1.5 'Mali', sans-serif; color: #e9e2cf; }
#ui .bw-pick .bk-pickinfo .skill-mini div { font: 400 15px 'Mali', sans-serif; color: #f2ead6; }
#ui .bw-pick .bk-pickinfo .skill-mini canvas { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #c9a24a; background: #14121a; }
#ui .bw-pick .bk-pickinfo .skill-mini .more-line { color: #d8d0bd; }
#ui .bw-pick .bk-pickinfo .btn { min-height: 44px; font-size: 18px; margin-top: auto; }
/* the new-character screen as a book: the name row and the buttons at the bottom of the right page */
#ui .bw-avatar.av-making .ac-foot { flex-wrap: wrap; top: 760px; height: 90px; align-items: center; }
#ui .bw-avatar.av-making .av-name { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; font: 600 16px 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-avatar.av-making .av-name input { flex: 1; height: 34px; padding: 0 10px; border: 1px solid #c9a24a; border-radius: 6px; background: #14121a; color: #fff; font: 500 16px 'Mali', sans-serif; }
#ui .bw-avatar.av-making .av-right { height: 556px; }
#ui .bw-avatar .av-tabs { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible; }
#ui .bw-avatar .av-note { color: #e9e2cf; }
#ui .bw-avatar .av-tile { border-radius: 8px; border: 1px solid rgba(201, 162, 74, 0.45); background: rgba(10, 9, 14, 0.55); color: #f2ead6; }
#ui .bw-avatar .av-tile.on { border-color: #f2c14e; box-shadow: 0 0 0 2px rgba(242, 193, 78, 0.4), 0 0 12px rgba(242, 193, 78, 0.35); }

/* ---------- the bag book, easier to read (user, 2026-10-12: "แก้ไขให้ดูง่ายและโดดเด่น") ----------
   the pages' content kept off the gold studs at the page edges, like the character book (left 244-744, right 818-1296) */
#ui .bw-eco .eco-tabs, #ui .bw-content .eco-tabs, #ui .bw-quests .eco-tabs { left: 244px; width: 500px; }
#ui .bw-eco .eco-main, #ui .bw-content .eco-main, #ui .bw-quests .eco-main { left: 242px; width: 504px; }
#ui .bw-eco .eco-side, #ui .bw-content .eco-side, #ui .bw-quests .eco-side { left: 816px; width: 484px; }
/* the shop's tabs in one tidy row */
#ui .bw-eco .eco-tabs { gap: 3px; }
#ui .bw-eco .eco-tab { padding: 5px 9px; font-size: 14px; }

/* every item cell in a book: the painted slot of its grade (the character book's frames), the icon big, clear badges */
#ui .bookwin .eco-cell { position: relative; border: 0; border-radius: 0; box-shadow: none; padding: 0; aspect-ratio: 1; display: grid; place-items: center;
  background: url(../assets/ui_book/slot_g0.png) center / 100% 100% no-repeat; transition: transform 0.1s, filter 0.1s; }
#ui .bookwin .eco-cell.g1 { background-image: url(../assets/ui_book/slot_g1.png); }
#ui .bookwin .eco-cell.g2 { background-image: url(../assets/ui_book/slot_g2.png); }
#ui .bookwin .eco-cell.g3 { background-image: url(../assets/ui_book/slot_g3.png); }
#ui .bookwin .eco-cell.g4 { background-image: url(../assets/ui_book/slot_g4.png); filter: drop-shadow(0 0 5px rgba(255, 179, 64, 0.45)); }
#ui .bookwin .eco-cell.g5 { background-image: url(../assets/ui_book/slot_g5.png); filter: drop-shadow(0 0 6px rgba(255, 90, 106, 0.55)); }
#ui .bookwin .eco-cell img { width: 74%; height: 74%; }
#ui .bookwin .eco-cell.empty { background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.16); border-radius: 9px; }
#ui .bookwin button.eco-cell:hover { transform: translateY(-2px); filter: brightness(1.2); }
#ui .bookwin .eco-cell.sel { outline: 0; transform: translateY(-2px) scale(1.06); z-index: 1;
  filter: drop-shadow(0 0 3px #fff3c0) drop-shadow(0 0 9px rgba(255, 214, 110, 0.95)); }
#ui .bookwin .eco-cell .plus { top: 5px; left: 7px; font: 800 13px/1 'Fredoka', sans-serif; color: #ffe45c; }
#ui .bookwin .eco-cell .sn { left: 7px; bottom: 5px; padding: 0 3px; border-radius: 3px; background: rgba(0, 0, 0, 0.55); font: 700 10px/13px 'Fredoka', sans-serif; color: #e9e2cf; text-shadow: none; }
#ui .bookwin .eco-cell .cnt { right: 6px; bottom: 4px; font: 800 14px/1 'Fredoka', sans-serif; }
#ui .bookwin .eco-cell .unk { right: 5px; bottom: 4px; width: 17px; height: 17px; border-radius: 50%; background: #f2c14e; color: #2b1d0e; font: 800 12px/17px 'Fredoka', sans-serif; text-align: center; text-shadow: none; box-shadow: 0 0 0 1.5px #1a1714, 0 0 6px rgba(242, 193, 78, 0.8); }
#ui .bookwin .eco-cell .lk { top: 4px; right: 5px; font-size: 11px; }

/* the bag page: "สวมใส่อยู่" (worn) and "ในกระเป๋า" (carried) as titled parts */
#ui .bw-eco .eco-main.bagmode { gap: 6px; }
#ui .bw-eco .eco-sechead { display: flex; align-items: center; gap: 10px; padding: 0 2px 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.45); }
#ui .bw-eco .eco-sechead b { font: 700 18px/1.2 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-eco .eco-sechead span { font: 600 14px/1 'Fredoka', 'Mali', sans-serif; color: #d8d0bd; }
#ui .bw-eco .eco-cap { flex: 1; height: 8px; margin-left: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); overflow: hidden; }
#ui .bw-eco .eco-cap u { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #c98f2a, #f6d27a); }
#ui .bw-eco .eco-gear { grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 2px 0 6px; border-bottom: 0; }
#ui .bw-eco .eco-gslot { position: relative; display: block; }
#ui .bw-eco .eco-gslot small { position: absolute; z-index: 2; left: 0; right: 0; bottom: 4px; text-align: center; pointer-events: none;
  font: 600 11px/1 'Mali', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#ui .bw-eco .eco-gslot:has(.eco-cell.empty) small { color: #8f887b; text-shadow: none; bottom: 50%; transform: translateY(50%); }
#ui .bw-eco .eco-gslot .eco-cell.empty { width: 100%; }
#ui .bw-eco .eco-gslot .eco-cell img { width: 66%; height: 66%; margin-top: -10%; }
#ui .bw-eco .eco-bagscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 3px 4px 3px 0; }
#ui .bw-eco .eco-bagscroll .eco-grid { grid-template-columns: repeat(8, 1fr); gap: 5px; }
#ui .bw-eco .eco-foot { padding-top: 6px; border-top: 1px solid rgba(217, 164, 67, 0.3); font: 500 14px 'Mali', sans-serif; color: #d8d0bd; }
#ui .bw-eco .eco-foot b { color: #f2ead6; }

/* the item card on the right page */
#ui .bookwin .eco-ihead { gap: 14px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(var(--gl, 200, 190, 170), 0.18), rgba(0, 0, 0, 0.2) 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--gl, 200, 190, 170), 0.45); }
#ui .bookwin .eco-ihead.g1 { --gl: 127, 224, 122; }
#ui .bookwin .eco-ihead.g2 { --gl: 95, 180, 255; }
#ui .bookwin .eco-ihead.g3 { --gl: 194, 123, 255; }
#ui .bookwin .eco-ihead.g4 { --gl: 255, 179, 64; }
#ui .bookwin .eco-ihead.g5 { --gl: 255, 90, 106; }
#ui .bookwin .eco-iframe { position: relative; flex: none; width: 92px; height: 92px; display: grid; place-items: center; background: url(../assets/ui_book/slot_g0.png) center / 100% 100% no-repeat; }
#ui .bookwin .eco-ihead.g1 .eco-iframe { background-image: url(../assets/ui_book/slot_g1.png); }
#ui .bookwin .eco-ihead.g2 .eco-iframe { background-image: url(../assets/ui_book/slot_g2.png); }
#ui .bookwin .eco-ihead.g3 .eco-iframe { background-image: url(../assets/ui_book/slot_g3.png); }
#ui .bookwin .eco-ihead.g4 .eco-iframe { background-image: url(../assets/ui_book/slot_g4.png); filter: drop-shadow(0 0 8px rgba(255, 179, 64, 0.6)); }
#ui .bookwin .eco-ihead.g5 .eco-iframe { background-image: url(../assets/ui_book/slot_g5.png); filter: drop-shadow(0 0 8px rgba(255, 90, 106, 0.6)); }
#ui .bookwin .eco-iframe img { width: 72px; height: 72px; padding: 0; border-radius: 0; background: none; object-fit: contain; }
#ui .bookwin .eco-iframe .plus { position: absolute; top: 6px; left: 8px; font: 800 15px/1 'Fredoka', sans-serif; color: #ffe45c; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#ui .bookwin .eco-ihead > div { gap: 6px; min-width: 0; }
#ui .bookwin .eco-ihead b { font: 700 24px/1.15 'Mali', sans-serif; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
#ui .bookwin .eco-ihead .eco-plusname { color: #ffe45c; }
#ui .bookwin .eco-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bookwin .eco-chips i { font: 500 12px/1 'Mali', sans-serif; font-style: normal; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); color: #e9e2cf; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#ui .bookwin .eco-chips i.gr { color: #1a1714; font-weight: 700; background: rgb(var(--gl, 200, 190, 170)); box-shadow: none; }
#ui .bookwin .eco-chips i.cls { color: #f6dc98; }
#ui .bookwin .eco-chips i.lk { color: #ffb3a8; }
/* the class this weapon would switch to: an info line, not a wall of text */
#ui .bookwin .eco-classnote { display: flex; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(95, 180, 255, 0.1); box-shadow: inset 3px 0 0 #5fb4ff; font: 500 13px/1.45 'Mali', sans-serif; color: #cfe6ff; }
#ui .bookwin .eco-classnote::before { content: 'i'; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #5fb4ff; color: #0e1a2a; font: 800 12px/18px 'Fredoka', sans-serif; text-align: center; }
#ui .bookwin .eco-cmpnote { font: 400 12px 'Mali', sans-serif; color: #a59e90; text-align: right; }
/* the main stat(s): big numbers, the change against the worn piece as a coloured pill */
#ui .bookwin .eco-main-stats li { padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#ui .bookwin .eco-main-stats li span { font: 600 17px 'Mali', sans-serif; color: #f2ead6; }
#ui .bookwin .eco-main-stats li b { font: 700 24px/1 'Fredoka', sans-serif; color: #fff; }
#ui .bookwin .eco-main-stats em { padding: 3px 7px; border-radius: 8px; font: 700 13px/1 'Fredoka', sans-serif; }
#ui .bookwin .eco-main-stats em.up { background: rgba(127, 224, 122, 0.18); color: #8ef07a; }
#ui .bookwin .eco-main-stats em.down { background: rgba(255, 106, 106, 0.18); color: #ff8a8a; }
/* trait, options and set: cards with a coloured title strip */
#ui .bookwin :is(.eco-trait, .eco-opts, .eco-set) { margin: 0; padding: 0 0 8px; gap: 4px; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, 0.35); border: 0; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#ui .bookwin :is(.eco-trait, .eco-opts, .eco-set) > b { display: block; padding: 6px 12px; margin-bottom: 2px; font: 700 15px/1.2 'Mali', sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.14); }
#ui .bookwin .eco-trait > b { color: #ffd75a; background: rgba(242, 193, 78, 0.2); }
#ui .bookwin :is(.eco-trait, .eco-opts, .eco-set) > span, #ui .bookwin :is(.eco-trait, .eco-opts, .eco-set) > small { padding: 0 12px; }
#ui .bookwin .eco-trait > span { font: 500 14px/1.45 'Mali', sans-serif; color: #f2ead6; }
#ui .bookwin .eco-trait em { color: #8ef07a; }
#ui .bookwin .eco-opts > span { font: 500 14px/1.5 'Mali', sans-serif; color: #e9e2cf; }
#ui .bookwin .eco-opts > span em { font: 700 15px 'Fredoka', sans-serif; }
#ui .bookwin .eco-set > b small { font-weight: 500; color: #c9c1b0; }
#ui .bookwin .eco-set > span { font: 400 13px/1.5 'Mali', sans-serif; color: rgba(233, 226, 207, 0.45); }
#ui .bookwin .eco-set > span.on { color: #8ef07a; }
#ui .bookwin .eco-side { gap: 8px; }
#ui .bookwin .eco-price { justify-content: flex-end; font: 500 14px 'Mali', sans-serif; color: #d8d0bd; }
#ui .bookwin .eco-price img { width: 22px; height: 22px; }
/* the actions: the main one wide and gold, the others in an even row, the lock small at the end */
#ui .bookwin .eco-bagacts { display: flex; flex-direction: column; gap: 6px; }
#ui .bookwin .eco-act-main { display: flex; gap: 6px; }
#ui .bookwin .eco-act-main:empty { display: none; }
#ui .bookwin .eco-act-main .btn { flex: 1; min-height: 46px; font-size: 19px; }
#ui .bookwin .eco-act-more { display: flex; flex-wrap: wrap; gap: 5px; }
/* (the shops' actions as their logos: js/economy.js eco-act-shops, 2026-10-19, the user: "ให้เป็นโลโก้ร้านนั้นๆ", then "แก้ไขใหม่ให้
   สวยงาม": one even row of gold-edged tiles; the button column never wraps - a wrapping column sized the row as if every tile
   stood alone in its own line, a tall empty band over the card) */
#ui .bookwin .eco-bagacts { flex-wrap: nowrap; }
#ui .bookwin .eco-act-shops { flex: none; display: flex; gap: 6px; }
#ui .bookwin .eco-shopbtn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 7px 2px 6px; border-radius: 12px; border: 1.5px solid rgba(217, 164, 67, 0.6);
  background: linear-gradient(180deg, rgba(70, 52, 24, 0.85), rgba(24, 18, 11, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.16), 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #f6e6b8; cursor: pointer; font: 700 12.5px/1.15 Mali, sans-serif; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
#ui .bookwin .eco-shopbtn img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45)); }
#ui .bookwin .eco-shopbtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .bookwin .eco-shopbtn small { display: block; margin-top: -1px; font: 700 10.5px/1.1 Fredoka, Mali, sans-serif; color: #ffd76a; white-space: nowrap; }
#ui .bookwin .eco-shopbtn:hover, #ui .bookwin .eco-shopbtn:focus-visible { outline: none; transform: translateY(-1px); border-color: #ffd76a; box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.24), 0 0 0 1px rgba(255, 215, 106, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4); }
#ui .bookwin .eco-actions.eco-bagacts .eco-act-more .btn { flex: 1 1 0; }   /* (ฝากโกดัง and ล็อก share one row, the same width) */
:root[data-booklight] #ui .bookwin .eco-shopbtn { background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(240, 228, 205, 0.9)); color: var(--bk-ink); border-color: rgba(140, 100, 40, 0.55); }
:root[data-booklight] #ui .bookwin .eco-shopbtn small { color: #8a5a10; }
#ui .bookwin .eco-act-more .btn { flex: 1 1 0; min-width: 0; min-height: 36px; padding: 0 8px; font-size: 15px; white-space: nowrap; }
/* (2026-10-19, the user: "ตัวหนังสือซ้อนกัน" - four long buttons in one line ran into each other): two a line, the label may
   wrap, a price on its own small line */
#ui .bookwin .eco-act-more .btn:not(.eco-lockbtn) { flex: 1 1 calc(50% - 5px); white-space: normal; line-height: 1.15; padding: 4px 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
#ui .bookwin .eco-act-more .btn small { display: block; font-size: 12px; font-weight: 600; opacity: 0.85; }
#ui .bookwin .eco-act-more .eco-lockbtn { flex: 0 0 100%; min-height: 30px; font-size: 13px; color: #c9c1b0; }
#ui .bookwin .eco-listbox { border-radius: 9px; background: rgba(0, 0, 0, 0.35); border: 0; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); font: 600 14px 'Mali', sans-serif; color: #f6dc98; }
#ui .bookwin .eco-listbox input { border: 1px solid rgba(217, 164, 67, 0.5); border-radius: 6px; background: #121016; }
#ui .bookwin .eco-hint { font: 500 15px/1.6 'Mali', sans-serif; color: #c9c1b0; text-align: center; padding: 40px 10px; }
/* (cards in the pages never squash: the page scrolls instead; the bag list takes the room that is left) */
#ui .bookwin :is(.eco-side, .eco-main) > * { flex-shrink: 0; }
#ui .bw-eco .eco-main.bagmode > .eco-bagscroll { flex: 1 1 0; min-height: 60px; }
#ui .bw-eco .eco-tabs { flex-wrap: nowrap; gap: 2px; }
#ui .bw-eco .eco-tab { padding: 5px 7px; font-size: 13.5px; white-space: nowrap; }
/* worn gear: the set number top right, the slot name at the bottom */
#ui .bw-eco .eco-gslot .eco-cell .sn { left: auto; right: 6px; top: 5px; bottom: auto; }
/* the shop's seven tabs: a tidy 4 + 3 grid of equal buttons on the left page */
#ui .bw-eco .eco-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
#ui .bw-eco .eco-tab { padding: 6px 4px; font-size: 14.5px; text-align: center; }
/* the item's buttons stay in sight at the bottom of the page however long the card is */
#ui .bw-eco .eco-side > .eco-bagacts { position: sticky; bottom: -4px; z-index: 2; margin: 0 -4px -4px; padding: 10px 4px 6px;
  background: linear-gradient(rgba(22, 20, 25, 0), #19171c 14px); }
/* bag: "✦ สวมของดีที่สุด" beside the worn gear's title, "⇅ จัดเรียง" beside the bag's, the kinds as filter chips */
#ui .bw-eco .eco-sechead .eco-hbtn { margin-left: auto; min-height: 30px; height: 30px; padding: 0 12px; font: 600 14px/1 'Mali', sans-serif; white-space: nowrap; }
#ui .bw-eco .eco-sechead .eco-cap + .eco-hbtn { margin-left: 8px; }
/* the warehouse (โกดัง, 2026-10-17): its button beside จัดเรียง (two buttons share the head), and the hint row with the
   +10 slots button that takes the kind chips' place while the warehouse is shown */
#ui .bw-eco .eco-sechead .eco-hbtn + .eco-hbtn { margin-left: 0; }
#ui .bw-eco .eco-sechead .eco-warebtn { padding: 0 10px; }
/* (2026-10-18, the user: "ทำปุ่มจัดเรียงให้ดูง่ายและเด่น"): จัดเรียง in the gold of สวมของดีที่สุด, its own ⇅ mark, a crisp ring */
#ui .bw-eco .eco-sechead .eco-sortbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; font: 800 15px/1 'Mali', sans-serif; box-shadow: 0 0 0 2px #f6d27a, 0 3px 0 rgba(0, 0, 0, 0.35); }
#ui .bw-eco .eco-sechead .eco-sortbtn i { font-style: normal; font-size: 17px; line-height: 1; }
#ui .bw-eco .eco-sechead .eco-sortbtn:hover { filter: brightness(1.1); }
#ui .bw-eco .eco-sechead > b { white-space: nowrap; }
/* (2026-10-19, the user: "ตรงจัดเรียงให้สามารถติ๊กจัดเรียงแบบออโต้ได้ด้วย"): the auto-sort tick beside จัดเรียง */
#ui .bw-eco .eco-sechead .eco-autosort { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font: 700 13px/1 'Mali', sans-serif; color: #f6dc98; cursor: pointer; white-space: nowrap; }
#ui .bw-eco .eco-sechead .eco-autosort input { width: 16px; height: 16px; margin: 0; accent-color: #e8b84a; cursor: pointer; }
:root[data-booklight] #ui .bw-eco .eco-sechead .eco-autosort { color: var(--bk-acc); }
/* (2026-10-19, the user: "ตรงดูแล้วขาด จัดใหม่ให้ดูง่าย"): the bag's head in two rows - the title, the count and the room bar;
   under them its buttons in one line (โกดัง · จัดเรียง + ออโต้ · ดูแล้วทั้งหมด at the far end), nothing cut off */
#ui .bw-eco .eco-sechead.eco-baghead { flex-wrap: wrap; row-gap: 8px; }
#ui .bw-eco .eco-baghead > span { white-space: nowrap; }
#ui .bw-eco .eco-baghead > .eco-cap { min-width: 60px; }
#ui .bw-eco .eco-baghead .eco-hbtns { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; min-width: 0; }
#ui .bw-eco .eco-baghead .eco-hbtns .eco-hbtn { margin-left: 0; }
/* locking gear in the bag (js/economy.js lockMode, eco-lkchip, .lk - 2026-10-19, the user: "เพิ่มล็อกอุปกรณ์ในกระเป๋า"): the ล็อก
   button in the bag's head, the bar while the mode is on, the padlock low in the middle of a locked piece, the card's lock chip */
#ui .bw-eco .eco-hbtn.eco-lockmode { display: inline-flex; align-items: center; gap: 4px; }
#ui .bw-eco .eco-hbtn.eco-lockmode img { width: 18px; height: 18px; object-fit: contain; }
#ui .bw-eco .eco-lockbar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px; border-radius: 10px; border: 1.5px solid rgba(255, 215, 106, 0.7); background: rgba(255, 215, 106, 0.12); font: 600 13px/1.35 Mali, sans-serif; color: var(--bk-ink, #f3e3b6); }
#ui .bw-eco .eco-lockbar img { flex: none; width: 26px; height: 26px; object-fit: contain; }
#ui .bw-eco .eco-lockbar span { flex: 1; min-width: 0; }
#ui .bw-eco .eco-lockbar b { color: #ffd76a; margin-right: 4px; }
:root[data-booklight] #ui .bw-eco .eco-lockbar b { color: #8a5a10; }
#ui .bw-eco .eco-lockbar .btn { flex: none; }
#ui .bookwin .eco-cell .lk, .eco-cell .lk { top: auto; right: auto; bottom: 2px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(20, 14, 6, 0.85); box-shadow: 0 0 0 1.5px #ffd76a, 0 1px 3px rgba(0, 0, 0, 0.6); font-size: 0; }
#ui .bookwin .eco-cell .lk img, .eco-cell .lk img { width: 19px; height: 19px; object-fit: contain; }
#ui .bookwin .eco-chips .eco-lkchip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px 1px 6px; border-radius: 999px; border: 1.5px solid rgba(255, 215, 106, 0.6); background: rgba(255, 255, 255, 0.06); color: inherit; font: 700 12.5px/1.6 Mali, sans-serif; cursor: pointer; }
#ui .bookwin .eco-chips .eco-lkchip img { width: 17px; height: 17px; object-fit: contain; filter: grayscale(0.35); }
#ui .bookwin .eco-chips .eco-lkchip.on { border-color: #ffd76a; background: linear-gradient(180deg, #ffe07a, #f0a92c); color: #3a2208; }
#ui .bookwin .eco-chips .eco-lkchip.on img { filter: none; }
#ui .bookwin .eco-chips .eco-lkchip:hover, #ui .bookwin .eco-chips .eco-lkchip:focus-visible { outline: none; border-color: #ffd76a; }
#ui .bw-eco .eco-baghead .eco-sortgrp { display: inline-flex; align-items: center; }
#ui .bw-eco .eco-baghead .eco-hbtns .eco-nwall { margin-left: auto; }
#ui .bw-eco .eco-warehint { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 4px 6px 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); font: 500 13px/1.35 'Mali', sans-serif; color: #d8d0bd; }
#ui .bw-eco .eco-warehint .btn { flex: none; margin-left: auto; min-height: 28px; height: 28px; padding: 0 10px; font: 600 13px/1 'Mali', sans-serif; white-space: nowrap; }
#ui .bookwin .eco-bagscroll .eco-cell[data-wu] { cursor: pointer; }
#ui .bw-eco .eco-kinds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }   /* (six tabs since 2026-10-18: ยา/บัฟ) */
#ui .bw-eco .eco-kind { display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 4px; cursor: pointer;
  border: 0; border-radius: 6px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #d8d0bd; font: 500 14px/1 'Mali', sans-serif; white-space: nowrap; }
#ui .bw-eco .eco-kind i { min-width: 18px; padding: 2px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font: 700 11px/1 'Fredoka', sans-serif; font-style: normal; color: #c9c1b0; }
#ui .bw-eco .eco-kind:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(246, 210, 122, 0.7); }
#ui .bw-eco .eco-kind.on { color: #2b1d0e; font-weight: 700; background: linear-gradient(#f6d27a, #d9a443); box-shadow: 0 0 8px rgba(242, 193, 78, 0.45); }
#ui .bw-eco .eco-kind.on i { background: rgba(43, 29, 14, 0.2); color: #2b1d0e; }
#ui .bw-eco .eco-kindnone { padding: 20px 10px; }

/* a bag piece that fits a collection set: a small glowing book on its corner (click = those sets in the book) */
#ui .bookwin .eco-cell .clb { position: absolute; z-index: 2; top: 2px; right: 2px; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: radial-gradient(#3d7a3a, #1d3d1c); box-shadow: 0 0 0 1.5px #8ef07a, 0 0 7px rgba(142, 240, 122, 0.8); }
#ui .bookwin .eco-cell .clb img { width: 15px; height: 15px; object-fit: contain; }
#ui .bookwin .eco-cell .clb:hover { transform: scale(1.2); }
#ui .bookwin .eco-cell.cl-fit .lk { display: none; }
/* the item card: the collection part (green) and "หาได้จาก" (where it comes from, one button a place) */
#ui .bookwin .eco-collbox { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 9px 12px; border-radius: 9px;
  background: linear-gradient(90deg, rgba(142, 240, 122, 0.16), rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.5); }
#ui .bookwin .eco-collbox b { display: flex; align-items: center; gap: 8px; font: 700 15px/1.2 'Mali', sans-serif; color: #b6f5a8; }
#ui .bookwin .eco-collbox b img { width: 24px; height: 24px; }
#ui .bookwin .eco-collbox small { grid-column: 1; font: 400 13px/1.35 'Mali', sans-serif; color: #d8e8d0; }
#ui .bookwin .eco-collbox .btn { grid-column: 2; grid-row: 1 / span 2; min-height: 36px; font-size: 14px; }
#ui .bookwin .eco-src { display: flex; flex-direction: column; gap: 4px; padding: 0 0 6px; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#ui .bookwin .eco-src > b { display: block; padding: 6px 12px; font: 700 15px/1.2 'Mali', sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.14); }
#ui .bookwin .eco-srcrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; margin: 0 6px; padding: 6px 8px; border: 0; border-radius: 7px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); color: #f2ead6; text-align: left; }
#ui .bookwin .eco-srcrow img { width: 30px; height: 30px; object-fit: contain; }
#ui .bookwin .eco-srcrow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .bookwin .eco-srcrow span b { font: 600 14px/1.2 'Mali', sans-serif; color: #f6efdc; }
#ui .bookwin .eco-srcrow span small { font: 400 12px/1.35 'Mali', sans-serif; color: #b9b1a0; }
#ui .bookwin .eco-srcrow em { font: 700 13px/1 'Mali', sans-serif; font-style: normal; color: #f2c14e; white-space: nowrap; }
#ui .bookwin .eco-srcrow:hover:not(:disabled) { background: rgba(255, 214, 110, 0.14); box-shadow: inset 3px 0 0 #f2c14e; }
#ui .bookwin .eco-srcrow:hover:not(:disabled) em { color: #ffe08a; }
#ui .bookwin .eco-srcrow:disabled { cursor: default; opacity: 0.8; }
/* the collection book: "the sets this piece fits" bar, and the slot piece's sources on the right page */
#ui .bookwin .cl-pickbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border-radius: 9px;
  background: linear-gradient(90deg, rgba(142, 240, 122, 0.16), rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.5); font: 500 13px/1.4 'Mali', sans-serif; color: #d8e8d0; }
#ui .bookwin .cl-pickbar img { width: 26px; height: 26px; }
#ui .bookwin .cl-pickbar b { color: #b6f5a8; }
#ui .bookwin .cl-pickbar .btn { margin-left: auto; flex: none; }
#ui .bookwin .cl-needsrc { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); }
#ui .bookwin .cl-needsrc > .btn { align-self: flex-end; }
/* the collection book: a slot the bag can fill now glows green, the rest stay dim (the painted frames dropped the old glow) */
#ui .bookwin .ct-coll-row .eco-cell.ct-can { filter: drop-shadow(0 0 2px #b6f5a8) drop-shadow(0 0 8px rgba(142, 240, 122, 0.9)); animation: clCan 1.6s ease-in-out infinite; }
@keyframes clCan { 50% { filter: drop-shadow(0 0 1px #b6f5a8) drop-shadow(0 0 4px rgba(142, 240, 122, 0.5)); } }
@media (prefers-reduced-motion: reduce) { #ui .bookwin .ct-coll-row .eco-cell.ct-can { animation: none; } }
#ui .bookwin .ct-coll-row .eco-cell:not(.picked):not(.ct-can) { opacity: 0.75; }
#ui .bookwin .ct-coll-row .eco-cell:not(.picked):not(.ct-can):hover { opacity: 1; }

/* ---------- the world map (M) as a big-budget atlas (2026-10-12): the painted continent spread over the open book ----------
   world view: the atlas with a plate on every region + the chosen region's card; region view: its map on the left page,
   its card (banner cut from the atlas, boss, monsters, materials, warp) on the right */
#ui .bw-worldmap .wm-atlas { position: absolute; left: 266px; top: 190px; width: 1004px; height: 669px; box-sizing: border-box;
  border: 12px solid transparent; border-image: var(--uib-stage_frame, url(../assets/ui_book/stage_frame.png)) 60 / 14px stretch; border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.6); background: #2b5a6a; }
#ui .bw-worldmap .wm-atlas-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#ui .bw-worldmap .wm-regions { position: absolute; inset: 0; }
#ui .bw-worldmap.wm-regionview .wm-atlas, #ui .bw-worldmap.wm-worldview :is(.wm-tabs, .wm-body, .wm-back, .wm-zonebox) { display: none !important; }
/* a region: the button covers its painted area; the glow lights it on hover / when chosen; the plate sits in the middle */
#ui .bw-worldmap .wm-reg { position: absolute; width: var(--rw); height: var(--rh); transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
#ui .bw-worldmap .wm-rglow { position: absolute; inset: 6%; border-radius: 50%; opacity: 0; transition: opacity 0.2s;
  background: radial-gradient(closest-side, rgba(255, 236, 170, 0.42), rgba(255, 214, 110, 0.18) 60%, rgba(255, 214, 110, 0) 100%); box-shadow: 0 0 0 2px rgba(255, 226, 140, 0.0); pointer-events: none; }
#ui .bw-worldmap .wm-reg:hover .wm-rglow, #ui .bw-worldmap .wm-reg.sel .wm-rglow { opacity: 1; }
#ui .bw-worldmap .wm-reg.sel .wm-rglow { box-shadow: 0 0 0 2px rgba(255, 226, 140, 0.75), 0 0 24px rgba(255, 214, 110, 0.5); }
#ui .bw-worldmap .wm-rplate { position: absolute; left: 50%; top: var(--py, 80%); transform: translate(-50%, -50%); display: flex; align-items: center; gap: 7px; padding: 4px 13px 4px 5px; white-space: nowrap;
  border: 0 solid transparent; border-image: var(--uib-pill, url(../assets/ui_book/pill.png)) 28 fill / 12px stretch; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.7)); transition: transform 0.15s; }
#ui .bw-worldmap .wm-reg:hover .wm-rplate, #ui .bw-worldmap .wm-reg.sel .wm-rplate { transform: translate(-50%, -50%) scale(1.1); }
#ui .bw-worldmap .wm-rboss { width: 34px; height: 34px; border-radius: 50%; background: #241f2a; box-shadow: 0 0 0 2px #e0a92a, 0 0 6px rgba(224, 169, 42, 0.6); }
#ui .bw-worldmap .wm-rstar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(#fff2b8, #e0a92a); color: #5a3a10; font: 800 18px/1 'Fredoka', sans-serif; }
#ui .bw-worldmap .wm-rtext { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
#ui .bw-worldmap .wm-rtext b { display: flex; align-items: center; gap: 5px; font: 700 14px/1.15 'Mali', sans-serif; color: #fff6dc; text-shadow: 0 1px 2px #000; }
#ui .bw-worldmap .wm-rtext b em { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #f2c14e; color: #2b1d0e; font: 800 12px/18px 'Fredoka', sans-serif; font-style: normal; text-align: center; text-shadow: none; }
#ui .bw-worldmap .wm-rtext small { font: 600 12px/1.2 'Fredoka', 'Mali', sans-serif; color: #c9c1b0; }
#ui .bw-worldmap .wm-reg.st-rec .wm-rtext small { color: #8ef07a; }
#ui .bw-worldmap .wm-reg.st-ahead .wm-rtext small { color: #ffd75a; }
#ui .bw-worldmap .wm-reg.st-hard .wm-rtext small { color: #ff8a7a; }
#ui .bw-worldmap .wm-reg.st-easy .wm-rtext small { color: #a59e90; }
#ui .bw-worldmap .wm-reg.safe .wm-rtext small { color: #f6dc98; }
/* you are here: your face in a gold ring above the plate, a pulse around it */
#ui .bw-worldmap .wm-you { position: absolute; left: 50%; top: var(--py, 80%); transform: translate(-50%, calc(-100% - 22px)); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
#ui .bw-worldmap .wm-you canvas { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(#ffe7f0, #c25a86); box-shadow: 0 0 0 3px #f2c14e, 0 0 0 5px #2b1d0e; animation: wmYou 1.6s ease-in-out infinite; }
#ui .bw-worldmap .wm-you i { margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: #c25a86; color: #fff; font: 700 11px/1.3 'Mali', sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
@keyframes wmYou { 0%, 100% { box-shadow: 0 0 0 3px #f2c14e, 0 0 0 5px #2b1d0e, 0 0 0 5px rgba(242, 193, 78, 0.6); } 50% { box-shadow: 0 0 0 3px #f2c14e, 0 0 0 5px #2b1d0e, 0 0 0 14px rgba(242, 193, 78, 0); } }
@media (prefers-reduced-motion: reduce) { #ui .bw-worldmap .wm-you canvas { animation: none; } }
/* the chosen region's card, beside it */
#ui .bw-worldmap .wm-acard { position: absolute; z-index: 3; width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; box-sizing: border-box; overflow: hidden;
  border-radius: 10px; background: rgba(16, 14, 20, 0.95); box-shadow: 0 0 0 2px #c99a3c, 0 0 0 3px #1a1510, 0 14px 30px rgba(0, 0, 0, 0.75); color: #f2ead6; }
#ui .bw-worldmap .wm-acard { top: 50%; transform: translateY(-50%); animation: wmCard 0.22s ease-out; }
#ui .bw-worldmap .wm-acard.at-right { right: 14px; }
#ui .bw-worldmap .wm-acard.at-left { left: 14px; }
@keyframes wmCard { from { opacity: 0; margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { #ui .bw-worldmap .wm-acard { animation: none; } }
#ui .bw-worldmap .wm-acard[hidden] { display: none; }
#ui .bw-worldmap .wm-ac-banner { position: relative; height: 96px; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 12px 8px; background-repeat: no-repeat;
  box-shadow: inset 0 -50px 40px -20px rgba(10, 9, 13, 0.92); }
#ui .bw-worldmap .wm-ac-banner b { font: 700 21px/1.15 'Mali', sans-serif; color: #fff3cf; text-shadow: 0 2px 4px #000; }
#ui .bw-worldmap .wm-ac-banner small { font: 500 12px 'Fredoka', sans-serif; color: #d8d0bd; text-shadow: 0 1px 2px #000; }
#ui .bw-worldmap .wm-ac-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px; }
#ui .bw-worldmap .wm-ac-chips i { padding: 3px 8px; border-radius: 9px; font: 600 12px/1.2 'Mali', sans-serif; font-style: normal; background: rgba(255, 255, 255, 0.08); color: #e9e2cf; }
#ui .bw-worldmap .wm-ac-chips i.lv { background: #f2c14e; color: #2b1d0e; font-weight: 800; }
#ui .bw-worldmap .wm-acard.st-rec .wm-ac-chips i.st { background: rgba(142, 240, 122, 0.18); color: #9ef08a; }
#ui .bw-worldmap .wm-acard.st-ahead .wm-ac-chips i.st { background: rgba(255, 215, 90, 0.18); color: #ffd75a; }
#ui .bw-worldmap .wm-acard.st-hard .wm-ac-chips i.st { background: rgba(255, 106, 90, 0.2); color: #ff9a8a; }
#ui .bw-worldmap .wm-ac-chips i.here { background: #c25a86; color: #fff; }
#ui .bw-worldmap .wm-ac-boss { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; margin: 0 12px; padding: 6px 10px 6px 6px; border-radius: 8px; background: rgba(224, 169, 42, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 169, 42, 0.45); }
#ui .bw-worldmap .wm-ac-boss img { width: 46px; height: 46px; border-radius: 50%; background: #241f2a; box-shadow: 0 0 0 2px #e0a92a; }
#ui .bw-worldmap .wm-ac-boss span { display: flex; flex-direction: column; }
#ui .bw-worldmap .wm-ac-boss small { font: 500 11px 'Mali', sans-serif; color: #e0c27a; }
#ui .bw-worldmap .wm-ac-boss b { font: 700 15px/1.2 'Mali', sans-serif; color: #fff3cf; }
#ui .bw-worldmap .wm-ac-boss em { font: 800 14px 'Fredoka', sans-serif; font-style: normal; color: #f2c14e; }
#ui .bw-worldmap .wm-ac-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; }
#ui .bw-worldmap .wm-ac-row small { width: 62px; flex: none; font: 500 12px 'Mali', sans-serif; color: #b9b1a0; }
#ui .bw-worldmap .wm-ac-row span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#ui .bw-worldmap .wm-ac-row img { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); object-fit: contain; }
#ui .bw-worldmap .wm-ac-row em { font: 700 12px 'Fredoka', sans-serif; font-style: normal; color: #b9b1a0; }
#ui .bw-worldmap .wm-ac-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 2px 12px 0; }
#ui .bw-worldmap .wm-ac-btns .btn { min-height: 38px; padding: 0 6px; font-size: 14px; }
/* region view: back to the world, the map on the left page with its zones under it, the card on the right page */
#ui .bw-worldmap .wm-back { position: absolute; left: 556px; top: 144px; min-height: 32px; height: 32px; padding: 0 14px; font-size: 14px; }
#ui .bw-worldmap.wm-regionview .wm-tabs { display: none; }
#ui .bw-worldmap.wm-regionview .wm-pic { left: 242px; top: 196px; width: 504px; height: 452px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(201, 154, 60, 0.7); background: rgba(0, 0, 0, 0.4); display: grid; place-items: center; }
#ui .bw-worldmap .wm-zonebox { position: absolute; left: 244px; top: 660px; width: 500px; height: 192px; overflow-y: auto; color: #e9e2cf; }
#ui .bw-worldmap .wm-zonebox > b { display: block; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.45); font: 700 16px 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-worldmap .wm-zonebox .wm-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 14px; margin: 0; padding: 0; list-style: none; font: 500 14px/1.5 'Mali', sans-serif; color: #e9e2cf; }
#ui .bw-worldmap .wm-zonebox .wm-zones span { font: 600 13px 'Fredoka', sans-serif; color: #9be37b; }
#ui .bw-worldmap .wm-zonebox .wm-tip { margin: 8px 0 0; font: 400 12.5px/1.5 'Mali', sans-serif; color: #a59e90; }
#ui .bw-worldmap.wm-regionview .wm-head { left: 816px; top: 196px; width: 484px; display: flex; flex-direction: column; gap: 8px; }
#ui .bw-worldmap .wm-banner { position: relative; height: 112px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 14px 10px;
  background-repeat: no-repeat; box-shadow: inset 0 -60px 50px -24px rgba(10, 9, 13, 0.92), 0 0 0 2px rgba(201, 154, 60, 0.75); }
#ui .bw-worldmap .wm-banner b { font: 700 26px/1.1 'Mali', sans-serif; color: #fff3cf; text-shadow: 0 2px 5px #000; flex-basis: auto; }
#ui .bw-worldmap .wm-banner small { font: 500 13px 'Fredoka', sans-serif; color: #d8d0bd; text-shadow: 0 1px 3px #000; }
#ui .bw-worldmap .wm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .bw-worldmap .wm-chips span { border: 0; padding: 3px 10px; border-radius: 10px; font: 600 13px/1.3 'Mali', sans-serif; }
#ui .bw-worldmap .wm-chips .wm-rec { background: #f2c14e; color: #2b1d0e; }
#ui .bw-worldmap .wm-chips .wm-rec.hard { background: #e06a4a; color: #fff; }
#ui .bw-worldmap .wm-stand { background: rgba(255, 255, 255, 0.08); color: #e9e2cf; }
#ui .bw-worldmap .wm-stand.st-rec { color: #9ef08a; background: rgba(142, 240, 122, 0.16); }
#ui .bw-worldmap .wm-stand.st-ahead { color: #ffd75a; background: rgba(255, 215, 90, 0.16); }
#ui .bw-worldmap .wm-stand.st-hard { color: #ff9a8a; background: rgba(255, 106, 90, 0.18); }
#ui .bw-worldmap .wm-chips .wm-here { background: #c25a86; color: #fff; }
#ui .bw-worldmap.wm-regionview .wm-lists { left: 816px; top: 362px; width: 484px; height: 428px; gap: 10px; }
#ui .bw-worldmap .wm-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#ui .bw-worldmap .wm-sec h4 { grid-column: 1 / -1; margin: 2px 0 0; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 15px 'Mali', sans-serif; color: #f6dc98; }
#ui .bw-worldmap .wm-mrow { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 4px 8px 4px 4px; }
#ui .bw-worldmap .wm-mrow.boss, #ui .bw-worldmap .wm-mrow.mini { grid-column: 1 / -1; grid-template-columns: 54px minmax(0, 1fr) auto; padding: 6px 12px 6px 6px; }
#ui .bw-worldmap .wm-mrow.boss img, #ui .bw-worldmap .wm-mrow.mini img { width: 54px; height: 54px; }
#ui .bw-worldmap .wm-mrow.boss { border-image-source: url(../assets/ui_book/slot_g4.png); border-image-slice: 30; }
#ui .bw-worldmap .wm-mrow.boss .wm-mname { font-size: 16px; color: #ffd75a; }
#ui .bw-worldmap .wm-mname { color: #f2ead6; }
#ui .bw-worldmap .wm-mats { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
#ui .bw-worldmap .wm-mats span { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 16px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); font: 500 13px 'Mali', sans-serif; color: #e9e2cf; }
#ui .bw-worldmap .wm-mats img { width: 28px; height: 28px; object-fit: contain; }
#ui .bw-worldmap.wm-regionview .wm-actions { left: 816px; top: 798px; width: 484px; }

/* =====================================================================
   The collection book v2 (2026-10-12): chapters, list cards with every piece named, the set's page with each piece's
   grade / set / where it is found (js/content.js clCard / clDetail)
   ===================================================================== */
/* the head stays at the top while the list scrolls: solid like the page, a soft shadow under it (it was see-through,
   so the cards showed through it, 2026-10-12) */
#ui .bookwin .cl-head { top: -4px; background: var(--bk-page, #222120); margin: 0 -6px; padding: 6px 6px 10px; z-index: 3; box-shadow: 0 12px 10px -8px rgba(0, 0, 0, 0.75); }   /* (top -4px: over the list's own 4px padding too) */
#ui .bookwin .clx-chaps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
#ui .bookwin .clx-chap { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 3px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #d8cfb8; }
#ui .bookwin .clx-chap b { font: 800 15px/1 Fredoka, sans-serif; }
#ui .bookwin .clx-chap small { font: 500 10px/1 Fredoka, sans-serif; opacity: 0.75; }
#ui .bookwin .clx-chap.now { box-shadow: inset 0 0 0 1.5px #8ef07a; color: #c8f5bc; }
#ui .bookwin .clx-chap.full { background: rgba(242, 193, 78, 0.18); color: #ffe7a6; }
#ui .bookwin .clx-chap.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; box-shadow: 0 0 10px rgba(242, 193, 78, 0.6); }
#ui .bookwin .clx-chinfo { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 8px; padding: 7px 10px; border-radius: 8px; background: rgba(217, 164, 67, 0.12); }
#ui .bookwin .clx-chinfo b { font: 700 15px/1.2 Mali, sans-serif; color: #f6dc98; }
#ui .bookwin .clx-chinfo small { font: 400 12px/1.35 Mali, sans-serif; color: #d8cfb8; }
#ui .bookwin .clx-moved { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(142, 240, 122, 0.14); font: 500 12px/1.4 Mali, sans-serif; color: #c8f5bc; }
#ui .bookwin .clx-moved .btn { margin-left: auto; flex: none; }
/* the list card */
#ui .bookwin .clx-card { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(10, 14, 30, 0.45); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.12); color: #f2ead6; }
#ui .bookwin .clx-card:hover { background: rgba(255, 214, 110, 0.08); }
#ui .bookwin .clx-card.sel { box-shadow: inset 0 0 0 2px #f2c14e, 0 0 12px rgba(242, 193, 78, 0.35); background: rgba(242, 193, 78, 0.1); }
#ui .bookwin .clx-card.can:not(.sel) { box-shadow: inset 0 0 0 1.5px #8ef07a; }
#ui .bookwin .clx-card.done { opacity: 0.72; }
#ui .bookwin .clx-top { display: flex; align-items: baseline; gap: 8px; }
#ui .bookwin .clx-tier { flex: none; font: 700 11px/1 Fredoka, Mali, sans-serif; font-style: normal; color: #f2c14e; padding: 3px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); }
#ui .bookwin .clx-top b { flex: 1; min-width: 0; font: 700 14px/1.25 Mali, sans-serif; }
#ui .bookwin .clx-fav { font-style: normal; color: #ffd76a; }
#ui .bookwin .clx-state { flex: none; font: 700 12px/1 Mali, sans-serif; color: #c8c0aa; }
#ui .bookwin .clx-card.done .clx-state { color: #ffd76a; }
#ui .bookwin .clx-card.can .clx-state { color: #8ef07a; }
#ui .bookwin .clx-icons { display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bookwin .clx-ic { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1.5px var(--gc, rgba(201, 194, 176, 0.5)); }
#ui .bookwin .clx-ic.g0 { --gc: #c9c2b0; } #ui .bookwin .clx-ic.g1 { --gc: #7fe07a; } #ui .bookwin .clx-ic.g2 { --gc: #5fb4ff; }
#ui .bookwin .clx-ic.g3 { --gc: #c27bff; } #ui .bookwin .clx-ic.g4 { --gc: #ffb340; } #ui .bookwin .clx-ic.g5 { --gc: #ff5a6a; } #ui .bookwin .clx-ic.mat { --gc: #d9a443; }
#ui .bookwin .clx-ic img { width: 30px; height: 30px; object-fit: contain; filter: grayscale(0.55) brightness(0.8); }
#ui .bookwin .clx-ic.in img { filter: none; }
#ui .bookwin .clx-ic b { position: absolute; right: 2px; bottom: 0; font: 800 10px/1 Fredoka, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#ui .bookwin .clx-ic i { position: absolute; left: -3px; top: -4px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; font: 800 10px/1 sans-serif; font-style: normal;
  background: #8ef07a; color: #10240c; }
#ui .bookwin .clx-names { font: 400 12px/1.4 Mali, sans-serif; color: #e2d9c2; }
#ui .bookwin .clx-bonus { font: 500 11px/1.3 Mali, sans-serif; color: #8be37b; }
/* the set's page */
#ui .bookwin .clx-detail { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
#ui .bookwin .clx-dh { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border-radius: 10px; background: rgba(217, 164, 67, 0.14); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); }
#ui .bookwin .clx-dh em { font: 600 12px/1.2 Mali, sans-serif; font-style: normal; color: #f2c14e; }
#ui .bookwin .clx-dh b { font: 700 21px/1.2 Mali, sans-serif; color: #fff3cf; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
#ui .bookwin .clx-dbonus { font: 600 13px/1.35 Mali, sans-serif; color: #8be37b; }
#ui .bookwin .clx-dstate { font: 500 12px/1.3 Mali, sans-serif; color: #d8cfb8; }
#ui .bookwin .clx-dstate.done { color: #ffd76a; font-weight: 700; }
#ui .bookwin .clx-piece { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.1); }
#ui .bookwin .clx-piece.can:not(.in) { box-shadow: inset 0 0 0 1.5px #8ef07a; }
#ui .bookwin .clx-piece.in { opacity: 0.75; }
#ui .bookwin .clx-piece > .eco-src { grid-column: 1 / -1; }
#ui .bookwin .clx-prow { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
#ui .bookwin .clx-prow .eco-iframe { width: 64px; height: 64px; }
#ui .bookwin .clx-prow .eco-iframe img { width: 48px; height: 48px; }
#ui .bookwin .clx-prow .eco-iframe.g1 { background-image: url(../assets/ui_book/slot_g1.png); }
#ui .bookwin .clx-prow .eco-iframe.g2 { background-image: url(../assets/ui_book/slot_g2.png); }
#ui .bookwin .clx-prow .eco-iframe.g3 { background-image: url(../assets/ui_book/slot_g3.png); }
#ui .bookwin .clx-prow .eco-iframe.g4 { background-image: url(../assets/ui_book/slot_g4.png); }
#ui .bookwin .clx-prow .eco-iframe.g5 { background-image: url(../assets/ui_book/slot_g5.png); }
#ui .bookwin .clx-pname { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#ui .bookwin .clx-pname > b { font: 700 16px/1.2 Mali, sans-serif; color: #f6efdc; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
#ui .bookwin .clx-pname .eco-chips i[style] { color: var(--gc); box-shadow: inset 0 0 0 1px var(--gc); }
#ui .bookwin .clx-have { font: 400 12px/1.35 Mali, sans-serif; color: #c8c0aa; }
#ui .bookwin .clx-piece.can .clx-have { color: #a8f09a; }
#ui .bookwin .clx-more { font: 700 12px/1 Mali, sans-serif; font-style: normal; color: #f2c14e; white-space: nowrap; }
#ui .bookwin .clx-pact { display: flex; align-items: center; }
#ui .bookwin .clx-ok { font: 700 13px/1 Mali, sans-serif; color: #ffd76a; }
#ui .bookwin .clx-miss { font: 600 12px/1 Mali, sans-serif; color: #9a927e; }
#ui .bookwin .clx-dfoot { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
#ui .bookwin .clx-dfoot .cl-fav { margin-right: auto; font: 600 13px/1 Mali, sans-serif; }
#ui .bookwin .clx-tot { margin: 4px 0 8px; padding: 6px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); }
#ui .bookwin .clx-tot summary { cursor: pointer; font: 700 14px/1.3 Mali, sans-serif; color: #f6dc98; }

/* ---------- the world atlas as an ANCIENT MAP (user, 2026-10-12: "ให้เป็นลักษณะของแผนที่โบราณ") ----------
   the old parchment map (assets/ui_book/world_atlas_old.png) laid in the book; region names on parchment scroll ribbons
   in brown ink with a red wax seal for the number; the region card an old parchment sheet */
#ui .bw-worldmap .wm-atlas { background: #cdb48a; border-image: none; border: 0; border-radius: 4px;
  box-shadow: 0 0 0 1px #6b4a24, 0 0 0 5px rgba(20, 14, 8, 0.75), 0 14px 34px rgba(0, 0, 0, 0.75), inset 0 0 40px rgba(80, 50, 20, 0.35); }
#ui .bw-worldmap .wm-rglow { background: radial-gradient(closest-side, rgba(150, 70, 30, 0.22), rgba(150, 70, 30, 0.08) 65%, rgba(150, 70, 30, 0) 100%); }
#ui .bw-worldmap .wm-reg.sel .wm-rglow { box-shadow: 0 0 0 2px rgba(110, 45, 20, 0.65); background: radial-gradient(closest-side, rgba(150, 70, 30, 0.28), rgba(150, 70, 30, 0) 100%); }
#ui .bw-worldmap .wm-rplate { gap: 6px; padding: 12px 32px 9px 28px; border-image: url(../assets/ui_book/atlas_label.png) 27 62 19 62 fill / 13px 30px 10px 30px stretch;
  filter: drop-shadow(0 2px 2px rgba(40, 24, 10, 0.55)); }
#ui .bw-worldmap .wm-rtext b { color: #3b2410; text-shadow: 0 1px 0 rgba(255, 244, 214, 0.6); font-family: 'Mali', serif; }
#ui .bw-worldmap .wm-rtext b em { width: 22px; height: 22px; min-width: 0; padding: 0; border-radius: 50%; color: #fff3df; font: 800 12px/22px 'Fredoka', sans-serif; text-shadow: 0 1px 1px rgba(60, 0, 0, 0.6);
  background: url(../assets/ui_book/atlas_seal.png) center / contain no-repeat, radial-gradient(#c4392c, #8a1c14); }
#ui .bw-worldmap .wm-rtext small { color: #6b4a2a; text-shadow: none; }
#ui .bw-worldmap .wm-reg.st-rec .wm-rtext small { color: #2f6a24; }
#ui .bw-worldmap .wm-reg.st-ahead .wm-rtext small { color: #8a5a10; }
#ui .bw-worldmap .wm-reg.st-hard .wm-rtext small { color: #a1281c; }
#ui .bw-worldmap .wm-reg.st-easy .wm-rtext small { color: #7d6a55; }
#ui .bw-worldmap .wm-reg.safe .wm-rtext small { color: #6b4a2a; }
#ui .bw-worldmap .wm-rboss { width: 32px; height: 32px; background: #e9d8b0; box-shadow: 0 0 0 2px #5a3a1c; filter: sepia(0.35); }
#ui .bw-worldmap .wm-rstar { background: url(../assets/ui_book/atlas_seal.png) center / contain no-repeat, radial-gradient(#c4392c, #8a1c14); color: #fff3df; }
#ui .bw-worldmap .wm-you canvas { background: radial-gradient(#f6ead0, #c9a878); box-shadow: 0 0 0 3px #7a2a1c, 0 0 0 5px #3b2410; }
#ui .bw-worldmap .wm-you i { background: #7a2a1c; color: #fff3df; }
@keyframes wmYou { 0%, 100% { box-shadow: 0 0 0 3px #7a2a1c, 0 0 0 5px #3b2410, 0 0 0 5px rgba(122, 42, 28, 0.55); } 50% { box-shadow: 0 0 0 3px #7a2a1c, 0 0 0 5px #3b2410, 0 0 0 14px rgba(122, 42, 28, 0); } }
/* the region card: an old parchment sheet, brown ink */
#ui .bw-worldmap .wm-acard { padding: 0 0 14px; border-radius: 0; overflow: visible; color: #3b2410; background: none; box-shadow: none;
  border: 0 solid transparent; border-image: url(../assets/ui_book/atlas_card.png) 60 fill / 22px stretch; filter: drop-shadow(0 8px 14px rgba(20, 12, 4, 0.6)); }
#ui .bw-worldmap .wm-ac-banner { margin: 14px 14px 0; border-radius: 3px; filter: sepia(0.25); box-shadow: inset 0 -50px 40px -20px rgba(40, 24, 10, 0.85), 0 0 0 2px #6b4a24; }
#ui .bw-worldmap .wm-ac-chips { padding: 0 16px; }
#ui .bw-worldmap .wm-ac-chips i { background: rgba(107, 74, 36, 0.14); color: #4a3018; box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.4); }
#ui .bw-worldmap .wm-ac-chips i.lv { background: #7a2a1c; color: #fff3df; box-shadow: none; }
#ui .bw-worldmap .wm-acard.st-rec .wm-ac-chips i.st { background: rgba(47, 106, 36, 0.16); color: #2f6a24; }
#ui .bw-worldmap .wm-acard.st-ahead .wm-ac-chips i.st { background: rgba(138, 90, 16, 0.16); color: #7a4e0c; }
#ui .bw-worldmap .wm-acard.st-hard .wm-ac-chips i.st { background: rgba(161, 40, 28, 0.15); color: #a1281c; }
#ui .bw-worldmap .wm-ac-chips i.here { background: #3b2410; color: #f6ead0; }
#ui .bw-worldmap .wm-ac-boss { margin: 0 16px; background: rgba(107, 74, 36, 0.1); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.45); }
#ui .bw-worldmap .wm-ac-boss img { background: #e9d8b0; box-shadow: 0 0 0 2px #5a3a1c; }
#ui .bw-worldmap .wm-ac-boss small { color: #7a5a30; }
#ui .bw-worldmap .wm-ac-boss b { color: #3b2410; }
#ui .bw-worldmap .wm-ac-boss em { color: #7a2a1c; }
#ui .bw-worldmap .wm-ac-row { padding: 0 16px; }
#ui .bw-worldmap .wm-ac-row small { color: #6b4a2a; }
#ui .bw-worldmap .wm-ac-row img { background: rgba(107, 74, 36, 0.12); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.35); }
#ui .bw-worldmap .wm-ac-row em { color: #6b4a2a; }
#ui .bw-worldmap .wm-ac-btns { padding: 2px 16px 0; }
/* the region page: its banner cut from the old map too */
#ui .bw-worldmap .wm-banner { filter: sepia(0.2); box-shadow: inset 0 -60px 50px -24px rgba(30, 18, 8, 0.9), 0 0 0 2px #8a6a3c; }
#ui .bw-worldmap.wm-regionview .wm-pic { background: #cdb48a; box-shadow: 0 0 0 1px #6b4a24, 0 0 0 4px rgba(20, 14, 8, 0.7), inset 0 0 30px rgba(80, 50, 20, 0.4); }
#ui .bw-worldmap .wm-ac-row small { width: 74px; font-size: 12px; white-space: nowrap; }

/* =====================================================================
   The world map book: a monster's page (2026-10-12, js/mmo.js mobDetailHtml): picture, kind, HP / damage / EXP,
   where it lives, its drops with their chances, normal / elite tabs
   ===================================================================== */
#ui .bw-worldmap .wm-mrow .wm-mgo { font: 800 18px/1 Mali, sans-serif; font-style: normal; color: #f2c14e; margin-left: 4px; }
#ui .bw-worldmap .wm-mrow { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
#ui .bw-worldmap .wm-mrow.boss, #ui .bw-worldmap .wm-mrow.mini { grid-template-columns: 54px minmax(0, 1fr) auto auto; }
#ui .bw-worldmap .wm-mob { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; padding-bottom: 6px; color: #f2ead6; }
#ui .bw-worldmap .wm-mob-top { display: flex; align-items: center; gap: 8px; }
#ui .bw-worldmap .wm-mob-tabs { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); }
#ui .bw-worldmap .wm-mob-tabs button { border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; background: none; font: 700 13px/1 Mali, sans-serif; color: #c8c0aa; }
#ui .bw-worldmap .wm-mob-tabs button.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; }
#ui .bw-worldmap .wm-mob-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); }
#ui .bw-worldmap .wm-mob-head > img { flex: none; width: 76px; height: 76px; border-radius: 50%; background: #1a1820; border: 4px solid var(--mob); box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); }
#ui .bw-worldmap .wm-mob-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#ui .bw-worldmap .wm-mob-head b { font: 700 22px/1.15 Mali, sans-serif; color: #fff3cf; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
#ui .bw-worldmap .wm-mob-head small { font: 500 12px/1 Fredoka, sans-serif; color: #b9b1a0; }
#ui .bw-worldmap .wm-mob-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#ui .bw-worldmap .wm-mob-chips i { font: 600 12px/1 Mali, sans-serif; font-style: normal; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.45); color: #e9e2cf; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
#ui .bw-worldmap .wm-mob-chips i.lv { background: #d9a443; color: #2c2018; box-shadow: none; font-weight: 800; }
#ui .bw-worldmap .wm-mob-chips i.boss { background: #e0a92a; color: #2c2018; }
#ui .bw-worldmap .wm-mob-chips i.mini, #ui .bw-worldmap .wm-mob-chips i.elite { background: linear-gradient(#ffcf5a, #f07a2a); color: #3a1a08; }
#ui .bw-worldmap .wm-mob-chips i.aggro { color: #ff9a8a; box-shadow: inset 0 0 0 1px rgba(255, 120, 100, 0.5); }
#ui .bw-worldmap .wm-mob-chips i.calm { color: #a8f09a; box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.5); }
#ui .bw-worldmap .wm-mob-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#ui .bw-worldmap .wm-mob-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.25); }
#ui .bw-worldmap .wm-mob-stats small { font: 500 12px/1 Mali, sans-serif; color: #b9b1a0; }
#ui .bw-worldmap .wm-mob-stats b { font: 800 19px/1 Fredoka, sans-serif; color: #fff; }
#ui .bw-worldmap .wm-mob-where { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border-radius: 9px; background: rgba(217, 164, 67, 0.1); font: 500 13px/1.35 Mali, sans-serif; }
#ui .bw-worldmap .wm-mob-where small { flex: none; font-weight: 700; color: #f2c14e; }
#ui .bw-worldmap .wm-mob-h { margin: 2px 0 0; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 15px Mali, sans-serif; color: #f6dc98; }
#ui .bw-worldmap .wm-mob-h small { font: 500 12px Mali, sans-serif; color: #b9b1a0; }
#ui .bw-worldmap .wm-drops { display: flex; flex-direction: column; gap: 5px; }
#ui .bw-worldmap .wm-drop { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.08); }
#ui .bw-worldmap .wm-drop > img { width: 34px; height: 34px; object-fit: contain; }
#ui .bw-worldmap .wm-drop > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .bw-worldmap .wm-drop b { font: 700 14px/1.2 Mali, sans-serif; color: #f6efdc; }
#ui .bw-worldmap .wm-drop small { font: 400 11.5px/1.3 Mali, sans-serif; color: #b9b1a0; }
#ui .bw-worldmap .wm-drop em { font-style: normal; white-space: nowrap; }
#ui .bw-worldmap .wm-drop em.q { font: 700 13px/1 Fredoka, Mali, sans-serif; color: #e2d9c2; }
#ui .bw-worldmap .wm-drop em.p { min-width: 54px; text-align: center; padding: 5px 8px; border-radius: 999px; font: 800 13px/1 Fredoka, sans-serif; color: #2c2018; background: #d9a443; }
#ui .bw-worldmap .wm-drop em.p.sure { background: #8ef07a; color: #10240c; }
#ui .bw-worldmap .wm-drop em.p.rare { background: #c27bff; color: #fff; }
#ui .bw-worldmap .wm-drop.gold b { color: #ffd76a; }
#ui .bw-worldmap .wm-drop.wm-dropeq { grid-template-columns: 34px minmax(0, 1fr) auto; }
#ui .bw-worldmap.wm-regionview.wm-mobview .wm-head { display: none; }
#ui .bw-worldmap.wm-regionview.wm-mobview .wm-lists { top: 196px; height: 594px; }
#ui .bw-worldmap .wm-gbar { grid-column: 1 / -1; display: flex; gap: 3px; }
#ui .bw-worldmap .wm-gbar i { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 4px 2px; border-radius: 6px; font: 800 11px/1 Fredoka, sans-serif; font-style: normal;
  color: var(--gc); background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 -3px 0 var(--gc); overflow: hidden; white-space: nowrap; }
#ui .bw-worldmap .wm-gbar i span { font: 600 10px/1 Mali, sans-serif; color: #e9e2cf; }
#ui .bw-worldmap .wm-mob-note { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 9px; background: rgba(224, 169, 42, 0.12); box-shadow: inset 0 0 0 1px rgba(224, 169, 42, 0.45); font: 500 12.5px/1.35 Mali, sans-serif; }
#ui .bw-worldmap .wm-mob-note b { font: 700 14px Mali, sans-serif; color: #ffd76a; }
#ui .bw-worldmap .wm-mob-tip { margin: 0; font: 400 12px/1.4 Mali, sans-serif; color: #a8a090; }
#ui .bw-worldmap .wm-mob-go { align-self: stretch; min-height: 38px; }

/* the region card's monster list with drops in short (user, 2026-10-12); tap = the monster's full page */
#ui .bw-worldmap .wm-acard { max-height: 640px; }
#ui .bw-worldmap .wm-ac-mobs { display: flex; flex-direction: column; gap: 4px; min-height: 0; max-height: 330px; overflow-y: auto; margin: 0 12px; padding-right: 2px; }
#ui .bw-worldmap .wm-ac-mobs::-webkit-scrollbar { width: 6px; }
#ui .bw-worldmap .wm-ac-mobs::-webkit-scrollbar-thumb { background: #8a6a3c; border-radius: 3px; }
#ui .bw-worldmap .wm-ac-mh { padding: 0 2px 2px; font: 500 11.5px/1.35 'Mali', sans-serif; color: #6b4a2a; }
#ui .bw-worldmap .wm-ac-mob { display: grid; grid-template-columns: 38px 1fr auto 10px; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border: 0; border-radius: 7px; cursor: pointer; text-align: left;
  background: rgba(107, 74, 36, 0.09); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.3); color: #3b2410; }
#ui .bw-worldmap .wm-ac-mob:hover { background: rgba(122, 42, 28, 0.12); box-shadow: inset 0 0 0 1px rgba(122, 42, 28, 0.55); }
#ui .bw-worldmap .wm-ac-mob.k-boss { background: rgba(200, 150, 40, 0.18); box-shadow: inset 0 0 0 1.5px rgba(160, 110, 20, 0.7); }
#ui .bw-worldmap .wm-ac-mob.k-mini { background: rgba(200, 110, 50, 0.13); box-shadow: inset 0 0 0 1px rgba(170, 80, 30, 0.55); }
#ui .bw-worldmap .wm-ac-mob .face { width: 38px; height: 38px; border-radius: 50%; background: #efe2c2; box-shadow: 0 0 0 1.5px #6b4a24; }
#ui .bw-worldmap .wm-ac-mob.k-boss .face { box-shadow: 0 0 0 2px #b8861c; }
#ui .bw-worldmap .wm-ac-mob .nm { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .bw-worldmap .wm-ac-mob .nm b { font: 700 13.5px/1.2 'Mali', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bw-worldmap .wm-ac-mob .dr { display: flex; flex-wrap: wrap; gap: 2px 7px; }
#ui .bw-worldmap .wm-ac-mob .dr i { display: inline-flex; align-items: center; gap: 1px; font: 600 11px/1 'Fredoka', 'Mali', sans-serif; font-style: normal; color: #5a3a1c; white-space: nowrap; }
#ui .bw-worldmap .wm-ac-mob .dr img { width: 17px; height: 17px; object-fit: contain; }
#ui .bw-worldmap .wm-ac-mob .dr .g { margin-left: 2px; font-weight: 800; text-shadow: 0 0 1px #2b1d0e; }
#ui .bw-worldmap .wm-ac-mob > em { font: 800 12px/1 'Fredoka', sans-serif; font-style: normal; color: #7a2a1c; white-space: nowrap; }
#ui .bw-worldmap .wm-ac-mob .go { font: 700 16px/1 'Fredoka', sans-serif; font-style: normal; color: #7a2a1c; }
#ui .bw-worldmap .wm-ac-safe { margin: 0 16px; font: 500 13px/1.5 'Mali', sans-serif; color: #4a3018; }

/* the monster page's portrait (2026-10-12): the whole body on a light round-cornered card (dark monsters read clearly),
   its two idle frames taking turns, a label strip for a boss / mini boss / elite */
#ui .bw-worldmap .wm-mob-pic { position: relative; flex: none; width: 112px; height: 112px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #f3e6c8 55%, #d8c39a 100%);
  box-shadow: 0 0 0 4px var(--mob), 0 0 0 6px #1c1424, 0 6px 14px rgba(0, 0, 0, 0.6); }
#ui .bw-worldmap .wm-mob-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(60, 40, 20, 0.35)); }
#ui .bw-worldmap .wm-mob-pic img.f1 { opacity: 0; animation: wmIdle 1s steps(1, end) infinite; }
#ui .bw-worldmap .wm-mob-pic img.f0 { animation: wmIdle0 1s steps(1, end) infinite; }
@keyframes wmIdle { 50% { opacity: 1; } }
@keyframes wmIdle0 { 50% { opacity: 0; } }
#ui .bw-worldmap .wm-mob-pic em { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px; font: 800 12px/1 Mali, sans-serif; font-style: normal; text-align: center;
  color: #2c2018; background: linear-gradient(#f6d27a, #d9a443); }
#ui .bw-worldmap .wm-mob-pic.elite em { background: linear-gradient(#ffcf5a, #f07a2a); color: #3a1a08; }
#ui .bw-worldmap .wm-mob-pic.boss { width: 124px; height: 124px; }
@media (prefers-reduced-motion: reduce) { #ui .bw-worldmap .wm-mob-pic img.f1 { display: none; } #ui .bw-worldmap .wm-mob-pic img.f0 { animation: none; } }

/* region card rows, easier to read (user via the other session, 2026-10-12): a wider card, bigger faces, names and drop chips */
#ui .bw-worldmap .wm-acard { width: 390px; max-height: 650px; }
#ui .bw-worldmap .wm-ac-mobs { max-height: 410px; gap: 6px; }
#ui .bw-worldmap .wm-ac-mh { font-size: 12.5px; }
#ui .bw-worldmap .wm-ac-mob { grid-template-columns: 48px 1fr auto 12px; gap: 9px; padding: 7px 8px 7px 6px; border-radius: 8px; }
#ui .bw-worldmap .wm-ac-mob .face { width: 48px; height: 48px; }
#ui .bw-worldmap .wm-ac-mob .nm { gap: 5px; }
#ui .bw-worldmap .wm-ac-mob .nm b { display: flex; align-items: center; gap: 6px; font: 700 15px/1.2 'Mali', sans-serif; color: #2e1a08; }
#ui .bw-worldmap .wm-ac-mob .nm .tag { flex: none; padding: 2px 7px; border-radius: 8px; font: 700 11px/1.3 'Mali', sans-serif; font-style: normal; color: #fff3df; background: #8a5a12; }
#ui .bw-worldmap .wm-ac-mob.k-mini .nm .tag { background: #a4471c; }
#ui .bw-worldmap .wm-ac-mob .dr { display: flex; flex-wrap: wrap; gap: 4px 5px; }
#ui .bw-worldmap .wm-ac-mob .dr .ch { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 10px; font-style: normal; white-space: nowrap;
  background: rgba(255, 248, 228, 0.65); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.35); }
#ui .bw-worldmap .wm-ac-mob .dr .ch img { width: 22px; height: 22px; object-fit: contain; }
#ui .bw-worldmap .wm-ac-mob .dr .ch span { margin-left: 1px; font: 500 12px/1 'Mali', sans-serif; color: #5a3a1c; }
#ui .bw-worldmap .wm-ac-mob .dr .ch b { font: 800 13px/1 'Fredoka', sans-serif; color: #7a2a1c; }
#ui .bw-worldmap .wm-ac-mob .dr .ch.rare b { color: #6a2a8a; }
#ui .bw-worldmap .wm-ac-mob .dr .gr { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 10px; font: 700 12px/1 'Mali', sans-serif; font-style: normal; white-space: nowrap;
  background: var(--gc); color: #0e1d30; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
#ui .bw-worldmap .wm-ac-mob > .lv { align-self: start; margin-top: 4px; padding: 3px 8px; border-radius: 9px; background: #7a2a1c; color: #fff3df; font: 800 12.5px/1 'Fredoka', sans-serif; white-space: nowrap; }
#ui .bw-worldmap .wm-ac-mob .go { font-size: 18px; }

#ui .bw-worldmap .wm-acard { width: 430px; }
#ui .bw-worldmap .wm-ac-mob { grid-template-columns: 48px 1fr 12px; }
#ui .bw-worldmap .wm-ac-mob .nm b .th { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ui .bw-worldmap .wm-ac-mob .nm b .lv { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 9px; background: #7a2a1c; color: #fff3df; font: 800 12.5px/1 'Fredoka', sans-serif; }
#ui .bw-worldmap .wm-ac-mob .dr .ch img { width: 20px; height: 20px; }
#ui .bw-worldmap .wm-ac-mob .dr .ch img + img { margin-left: -3px; }

/* the boss stands out in the map's list (2026-10-12): a gold card with a glow, a crown tag, its worth under its name;
   the mini boss a step below it in orange */
#ui .bw-worldmap .wm-mrow .wm-mname { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#ui .bw-worldmap .wm-btag { font: 800 11px/1 Mali, sans-serif; font-style: normal; padding: 3px 8px; border-radius: 999px; background: linear-gradient(#ffd56a, #e0a92a); color: #3a2410; box-shadow: 0 0 8px rgba(255, 213, 106, 0.6); }
#ui .bw-worldmap .wm-mrow.mini .wm-btag { background: linear-gradient(#ffb27a, #e07a3a); box-shadow: none; }
#ui .bw-worldmap .wm-bsub { font: 500 11.5px/1.3 Mali, sans-serif; color: #e9dcb8; }
#ui .bw-worldmap .wm-mrow.boss { position: relative; padding: 10px 14px 10px 10px; grid-template-columns: 72px minmax(0, 1fr) auto auto;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.55)); }
#ui .bw-worldmap .wm-mrow.boss::before { content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 10px; background: linear-gradient(100deg, rgba(255, 196, 64, 0.32), rgba(120, 70, 10, 0.15) 70%); }
#ui .bw-worldmap .wm-mrow.boss img { width: 72px; height: 72px; border-width: 4px; box-shadow: 0 0 12px rgba(255, 210, 90, 0.8); }
#ui .bw-worldmap .wm-mrow.boss .wm-mname { font-size: 18px; color: #ffe08a; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7); }
#ui .bw-worldmap .wm-mrow.boss .wm-mlv { font-size: 14px; background: #e0a92a; color: #2c2018; }
#ui .bw-worldmap .wm-mrow.mini img { width: 56px; height: 56px; }
/* every monster of the map (2026-10-16, the minimap opens this page): a count of them all on top, then each monster with
   how it fights under its name (js/mmo.js renderSide); the map's own elites carry a ★ tag */
#ui .bw-worldmap .wm-mobsum { display: flex; flex-direction: column; gap: 2px; padding: 7px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); font: 700 14px/1.3 Mali, sans-serif; color: #f6dc98; }
#ui .bw-worldmap .wm-mobsum strong { font-weight: 700; }
#ui .bw-worldmap .wm-mobsum b { font: 800 17px/1 Fredoka, Mali, sans-serif; color: #ffd75a; }
#ui .bw-worldmap .wm-mobsum span { font: 500 12px/1.35 Mali, sans-serif; color: #e9e2cf; }
#ui .bw-worldmap .wm-mrow .wm-mth { display: flex; align-items: center; gap: 5px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#ui .bw-worldmap .wm-mrow .wm-mth .wm-btag { flex: none; padding: 2px 6px; font-size: 10.5px; }
#ui .bw-worldmap .wm-mrow .wm-msub { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 11.5px/1.2 Mali, sans-serif; color: #d8cfb8; }
#ui .bw-worldmap .wm-mrow .wm-msub .ag { color: #ff9a8a; }
#ui .bw-worldmap .wm-mrow.guard { grid-column: 1 / -1; }
#ui .bw-worldmap .wm-mrow.guard .wm-btag { background: linear-gradient(#ffcf5a, #f07a2a); color: #3a1a08; box-shadow: none; }
#ui .bw-worldmap .wm-mrow.guard img { box-shadow: 0 0 8px rgba(255, 170, 70, 0.65); }

/* the region card: the boss stands out (user via the other session, 2026-10-12): a dark gold card with a soft glow, a big face,
   a gold crown pill and a gold name; the mini boss one step below in orange; the monsters stay plain */
#ui .bw-worldmap .wm-ac-mob.k-boss { position: relative; grid-template-columns: 72px 1fr 12px; gap: 11px; padding: 10px 10px 10px 8px; border-radius: 10px;
  background: linear-gradient(135deg, #3a2a12, #20170c 60%, #33240e); box-shadow: inset 0 0 0 1.5px #e0a92a, inset 0 0 0 3px rgba(255, 213, 106, 0.18);
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, 0.55)); color: #ffe9b0; }
#ui .bw-worldmap .wm-ac-mob.k-boss:hover { background: linear-gradient(135deg, #4a3616, #2a1e0f 60%, #423012); box-shadow: inset 0 0 0 2px #ffd56a; }
#ui .bw-worldmap .wm-ac-mob.k-boss .face { width: 72px; height: 72px; background: radial-gradient(#4a3a1c, #1c140a); box-shadow: 0 0 0 3px #e0a92a, 0 0 12px rgba(255, 200, 80, 0.7); }
#ui .bw-worldmap .wm-ac-mob.k-boss .nm b { font-size: 18px; color: #ffe08a; text-shadow: 0 1px 2px #000; }
#ui .bw-worldmap .wm-ac-mob.k-boss .nm .tag { background: linear-gradient(#ffd56a, #e0a92a); color: #2b1a04; font-size: 12px; }
#ui .bw-worldmap .wm-ac-mob.k-boss .nm b .lv { background: #ffd56a; color: #2b1a04; }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch { background: rgba(255, 236, 190, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 213, 106, 0.35); }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch span { color: #e8d4a8; }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch b { color: #ffe08a; }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch.rare b { color: #e2b8ff; }
#ui .bw-worldmap .wm-ac-mob.k-boss .go { color: #ffd56a; }
#ui .bw-worldmap .wm-ac-mob.k-mini { grid-template-columns: 56px 1fr 12px; background: rgba(224, 122, 58, 0.14); box-shadow: inset 0 0 0 1.5px rgba(224, 122, 58, 0.75); }
#ui .bw-worldmap .wm-ac-mob.k-mini .face { width: 56px; height: 56px; box-shadow: 0 0 0 2.5px #e07a3a, 0 0 8px rgba(224, 122, 58, 0.45); }
#ui .bw-worldmap .wm-ac-mob.k-mini .nm b { font-size: 16px; color: #6a2a0c; }
#ui .bw-worldmap .wm-ac-mob.k-mini .nm .tag { background: linear-gradient(#ffb27a, #e07a3a); color: #2b1004; }
#ui .bw-worldmap .wm-ac-mob .dr .ch.gear b { color: #7a2a1c; }
#ui .bw-worldmap .wm-ac-mob .dr .ch.gold b { color: #8a5a10; }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch.gold b { color: #ffe08a; }
#ui .bw-worldmap .wm-ac-mob:is(.k-boss, .k-mini) .nm b { flex-wrap: wrap; row-gap: 3px; }
#ui .bw-worldmap .wm-ac-mob:is(.k-boss, .k-mini) .nm b .th { overflow: visible; white-space: normal; }
#ui .bw-worldmap .wm-ac-mob.k-boss .dr .ch.gear b { color: #ffe08a; }

/* =====================================================================
   The card book (2026-10-12, js/cards.js): a card = its map's painting + the monster behind a Codex frame
   (assets/ui_cards/card_frame_<rarity>.png: window 54-546 x 64-566, name plate y 586-664, star band y 680-780 of 600x840)
   ===================================================================== */
.cd { position: relative; display: block; width: 100%; aspect-ratio: 600 / 840; border-radius: 7%; overflow: hidden; container-type: inline-size;
  background: #1a1f3a; box-shadow: inset 0 0 0 3px var(--rc, #b08a4a), 0 4px 10px rgba(0, 0, 0, 0.55); }
.cd.r0 { --rc: #a8865a; } .cd.r1 { --rc: #5fb4ff; } .cd.r2 { --rc: #c27bff; } .cd.r3 { --rc: #ffb340; }
.cd-win { position: absolute; left: 9%; top: 7.6%; width: 82%; height: 59.8%; border-radius: 4%; overflow: hidden;
  background-color: #2a2f4a; background-position: center; background-size: cover; background-repeat: no-repeat; }
.cd-win::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(255, 248, 230, 0.42), rgba(255, 248, 230, 0.12) 55%, rgba(20, 16, 30, 0.35)); }
.cd-win img { position: absolute; left: 4%; right: 4%; bottom: 3%; width: 92%; height: auto; z-index: 1; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.45)); }
.cd-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cd-name { position: absolute; z-index: 3; left: 10%; right: 10%; top: 70.2%; height: 8.6%; display: flex; align-items: center; justify-content: center;
  font: 700 8.6cqw/1 Mali, sans-serif; color: #fff3cf; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* (the frames have five empty star sockets at 1/6 steps across: a star earned lights its socket) */
.cd-stars { position: absolute; z-index: 3; left: 0; right: 0; top: 81.5%; height: 10.8%; display: flex; align-items: center; justify-content: space-evenly; }
.cd-stars i { width: 1em; text-align: center; font: 900 10.5cqw/1 sans-serif; font-style: normal; color: transparent; }
.cd-stars i.on { color: #ffd24a; text-shadow: 0 0 4px rgba(255, 190, 60, 0.9), 0 1px 1px #5a3a10; }
.cd-name.long { font-size: 7.4cqw; } .cd-name.xlong { font-size: 6.2cqw; }
.cd.locked .cd-win img { filter: brightness(0) opacity(0.55); }
.cd.locked .cd-win::after { background: rgba(10, 12, 26, 0.55); }
.cd.locked .cd-frame { filter: grayscale(0.85) brightness(0.7); }
.cd.locked .cd-name { color: #9a927e; }
.cd-lock { position: absolute; z-index: 3; left: 0; right: 0; top: 30%; text-align: center; font: 800 9cqw/1 Mali, sans-serif; font-style: normal; color: #d8cfb8; text-shadow: 0 1px 3px #000; }
/* the more important the card, the more it shines (2026-10-12, the user: "important frames: effects that show how
   important they are"): common none · rare a light sweep now and then + a soft blue glow · epic a faster sweep, a violet
   glow beating, three twinkles · legend a gold light running round the frame, a strong gold glow, a gold sweep, six
   twinkles and its crown gem flashing. Only cards you own shine. */
.cd:not(.locked)::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.5) 53%, transparent 62%);
  background-size: 300% 100%; mix-blend-mode: screen; }
.cd.r1:not(.locked)::after { animation: cdSheen 5s ease-in-out infinite; }
.cd.r2:not(.locked)::after { animation: cdSheen 3.4s ease-in-out infinite; }
.cd.r3:not(.locked)::after { animation: cdSheen 2.6s ease-in-out infinite;
  background-image: linear-gradient(115deg, transparent 36%, rgba(255, 220, 120, 0.55) 46%, rgba(255, 250, 220, 0.95) 50%, rgba(255, 220, 120, 0.55) 54%, transparent 64%); }
@keyframes cdSheen { 0% { background-position: 120% 0; opacity: 0; } 8% { opacity: 1; } 38% { background-position: -20% 0; opacity: 1; } 42%, 100% { background-position: -20% 0; opacity: 0; } }
.cd.r1:not(.locked) { box-shadow: inset 0 0 0 3px var(--rc), 0 0 8px rgba(95, 180, 255, 0.45), 0 4px 10px rgba(0, 0, 0, 0.55); }
.cd.r2:not(.locked) { animation: cdEpic 2.2s ease-in-out infinite; }
@keyframes cdEpic { 0%, 100% { box-shadow: inset 0 0 0 3px var(--rc), 0 0 8px rgba(194, 123, 255, 0.5), 0 4px 10px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: inset 0 0 0 3px var(--rc), 0 0 18px rgba(194, 123, 255, 0.95), 0 4px 10px rgba(0, 0, 0, 0.55); } }
.cd.r3:not(.locked) { animation: cdLegend 1.8s ease-in-out infinite; }
@keyframes cdLegend { 0%, 100% { box-shadow: inset 0 0 0 3px var(--rc), 0 0 12px rgba(255, 190, 70, 0.7), 0 4px 10px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: inset 0 0 0 3px var(--rc), 0 0 26px rgba(255, 210, 90, 1), 0 0 44px rgba(255, 160, 40, 0.55), 0 4px 10px rgba(0, 0, 0, 0.55); } }
/* (the light running round the frame: a bright arc of a turning conic gradient, shown only on the frame's edge) */
@property --cdA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cd-run { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 2.2%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  background: conic-gradient(from var(--cdA), transparent 0 62%, rgba(255, 255, 255, 0.9) 70%, transparent 78%, transparent 100%);
  animation: cdRun 3s linear infinite; mix-blend-mode: screen; }
.cd.r3 .cd-run { padding: 4.5%; filter: drop-shadow(0 0 3px #ffd24a); background: conic-gradient(from var(--cdA), transparent 0 30%, #fff3b0 38%, #ffd24a 42%, transparent 50%, transparent 80%, #fff3b0 88%, #ffd24a 92%, transparent 100%);
  animation-duration: 2.4s; }
@keyframes cdRun { to { --cdA: 360deg; } }
/* (legend: gold motes rising through its picture) */
.cd-motes { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background-image: radial-gradient(circle, #fff3b0 0 1.2%, transparent 2.2%), radial-gradient(circle, #ffd24a 0 1%, transparent 2%), radial-gradient(circle, #fff 0 0.8%, transparent 1.8%),
    radial-gradient(circle, #ffd24a 0 1.3%, transparent 2.4%), radial-gradient(circle, #fff3b0 0 0.9%, transparent 1.9%);
  background-size: 100% 100%; background-position: 15% 110%, 38% 125%, 62% 115%, 80% 130%, 50% 140%; background-repeat: no-repeat;
  animation: cdMotes 3.2s linear infinite; }
.cd-motes.m2 { animation-delay: -1.6s; transform: scaleX(-1); }
@keyframes cdMotes { 0% { background-position: 15% 110%, 38% 125%, 62% 115%, 80% 130%, 50% 140%; opacity: 0; } 15% { opacity: 1; }
  100% { background-position: 18% -20%, 34% -5%, 66% -15%, 77% 0%, 52% 10%; opacity: 0; } }
/* (twinkles on the frame: epic at three corners, legend all round and on its crown) */
.cd-spk { position: absolute; z-index: 5; width: 14%; aspect-ratio: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, #fff 25%, transparent 30% 45%, #fff 50%, transparent 55% 70%, #fff 75%, transparent 80% 95%, #fff 100%);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%);
  filter: drop-shadow(0 0 3px var(--rc)); animation: cdSpk 2.4s ease-in-out infinite; }
.cd-spk:nth-of-type(1) { left: 2%; top: 3%; animation-delay: 0s; }
.cd-spk:nth-of-type(2) { right: 2%; top: 40%; animation-delay: 0.8s; }
.cd-spk:nth-of-type(3) { left: 4%; bottom: 4%; animation-delay: 1.6s; }
.cd-spk:nth-of-type(4) { left: 41%; top: -3.5%; width: 18%; animation-delay: 0.4s; animation-duration: 1.6s; }
.cd-spk:nth-of-type(5) { right: 3%; bottom: 3%; animation-delay: 1.2s; }
.cd-spk:nth-of-type(6) { left: 1%; top: 52%; animation-delay: 2s; }
.cd.r3 .cd-spk { filter: drop-shadow(0 0 4px #ffd24a) drop-shadow(0 0 2px #fff6c0); }
@keyframes cdSpk { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 60% { opacity: 0.9; transform: scale(0.9) rotate(60deg); } }
/* the book's page */
#ui .bookwin .cd-head { display: flex; flex-direction: column; gap: 8px; position: sticky; top: -4px; z-index: 6; margin: 0 -6px; padding: 6px 6px 10px; background: var(--bk-page, #222120); box-shadow: 0 12px 10px -8px rgba(0, 0, 0, 0.75); }
/* (2026-10-17, the user: "ภาพซ้อนกันเวลาเลื่อน ui": each card keeps its own layers, so the names / ยังไม่มี / tier marks
   (z-index 1-3) no longer show through the pinned head above when the cards scroll under it) */
#ui .bookwin .cd-grid > * { isolation: isolate; }
#ui .bookwin .cd-chaps { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
#ui .bookwin .cd-chap { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0 3px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #d8cfb8; }
#ui .bookwin .cd-chap b { font: 800 15px/1 Fredoka, sans-serif; }
#ui .bookwin .cd-chap small { font: 500 10px/1 Fredoka, sans-serif; opacity: 0.8; }
#ui .bookwin .cd-chap.full { background: rgba(242, 193, 78, 0.18); color: #ffe7a6; }
#ui .bookwin .cd-chap.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; box-shadow: 0 0 10px rgba(242, 193, 78, 0.6); }
#ui .bookwin .cd-chinfo { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(217, 164, 67, 0.12); }
#ui .bookwin .cd-chinfo b { font: 700 15px/1.2 Mali, sans-serif; color: #f6dc98; }
#ui .bookwin .cd-chinfo small { font: 400 12px/1.3 Mali, sans-serif; color: #d8cfb8; }
#ui .bookwin .cd-chinfo .btn { margin-left: auto; flex: none; }
#ui .bookwin .cd-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#ui .bookwin .cd-set { display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.1); }
#ui .bookwin .cd-set b { font: 700 12px/1.2 Mali, sans-serif; color: #c8c0aa; }
#ui .bookwin .cd-set small { font: 400 11px/1.3 Mali, sans-serif; color: #9a927e; }
#ui .bookwin .cd-set.on { background: rgba(142, 240, 122, 0.12); box-shadow: inset 0 0 0 1.5px #8ef07a; }
#ui .bookwin .cd-set.on b { color: #a8f09a; } #ui .bookwin .cd-set.on small { color: #8be37b; }
#ui .bookwin .cd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; padding: 10px 2px 8px; }
#ui .bookwin .cd-cell { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 9px; transition: transform 0.12s; }
#ui .bookwin .cd-cell:hover { transform: translateY(-3px); }
#ui .bookwin .cd-cell.sel { outline: 3px solid #f2c14e; outline-offset: 3px; border-radius: 10px; }   /* (on the cell: the shining cards animate their own shadow) */
#ui .bookwin .cd-upbadge { position: absolute; z-index: 4; right: -4px; top: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 900 12px/1 sans-serif; font-style: normal; background: #8ef07a; color: #10240c; box-shadow: 0 0 8px rgba(142, 240, 122, 0.9); animation: clCan 1.6s ease-in-out infinite; }
/* the card's page */
#ui .bookwin .cd-detail { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; margin-bottom: 10px; }
#ui .bookwin .cd-dcard .cd { width: 190px; }
#ui .bookwin .cd-dcard.fx .cd { animation: cdUp 1.2s ease-out; }
@keyframes cdUp { 0% { transform: scale(1.12); filter: brightness(2.2); box-shadow: 0 0 40px rgba(255, 220, 120, 1); } 100% { transform: none; filter: none; } }
#ui .bookwin .cd-dinfo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#ui .bookwin .cd-rar { align-self: flex-start; font: 800 12px/1 Mali, sans-serif; font-style: normal; padding: 4px 10px; border-radius: 999px; color: #1a1714; background: var(--rc); }
#ui .bookwin .cd-dinfo > b { font: 700 22px/1.2 Mali, sans-serif; color: #fff3cf; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); }
#ui .bookwin .cd-dinfo > small { font: 500 12px/1 Fredoka, Mali, sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-dstate { font: 700 14px/1.3 Mali, sans-serif; color: #ffd76a; }
#ui .bookwin .cd-bar { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.4); }
#ui .bookwin .cd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8ef07a, #d4f58a); }
#ui .bookwin .cd-h { margin: 6px 0 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 15px Mali, sans-serif; color: #f6dc98; }
#ui .bookwin .cd-h small { font: 500 12px Mali, sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-stars-tab { display: flex; flex-direction: column; gap: 3px; }
#ui .bookwin .cd-stars-tab div { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); }
#ui .bookwin .cd-stars-tab b { font: 800 13px/1 Fredoka, sans-serif; color: #9a927e; }
#ui .bookwin .cd-stars-tab span { font: 600 12.5px/1.3 Mali, sans-serif; color: #c8c0aa; }
#ui .bookwin .cd-stars-tab small { font: 400 11px/1 Mali, sans-serif; color: #8a8270; white-space: nowrap; }
#ui .bookwin .cd-stars-tab .done b, #ui .bookwin .cd-stars-tab .done span { color: #d8c48a; }
#ui .bookwin .cd-stars-tab .cur { background: rgba(242, 193, 78, 0.16); box-shadow: inset 0 0 0 1.5px #f2c14e; }
#ui .bookwin .cd-stars-tab .cur b { color: #ffd24a; } #ui .bookwin .cd-stars-tab .cur span { color: #8be37b; }
#ui .bookwin .cd-src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#ui .bookwin .cd-src span { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
#ui .bookwin .cd-src b { font: 700 14px/1.2 Mali, sans-serif; color: #f6efdc; }
#ui .bookwin .cd-src small { font: 400 12px/1.35 Mali, sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-src .btn { flex: none; }
#ui .bookwin .cd-tot { margin: 10px 0 8px; padding: 6px 10px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); }
#ui .bookwin .cd-tot summary { cursor: pointer; font: 700 14px/1.3 Mali, sans-serif; color: #f6dc98; }
/* a card dropped: it flips in at the right of the screen */
.cd-pop { position: fixed; z-index: 950; right: 26px; top: 26%; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
  animation: cdIn 0.55s cubic-bezier(.2, 1.4, .4, 1) both; perspective: 600px; }
.cd-pop em { font: 800 15px/1 Mali, sans-serif; font-style: normal; padding: 5px 12px; border-radius: 999px; background: linear-gradient(#ffe48a, #f2c14e); color: #3a2a20; box-shadow: 0 0 14px rgba(255, 220, 110, 0.8); }
.cd-pop:not(.new) em { background: linear-gradient(#e2e6f2, #a8b2cc); box-shadow: none; }
.cd-pop small { font: 600 12px/1.3 Mali, sans-serif; text-align: center; color: #fff3cf; text-shadow: 0 1px 3px #000; padding: 3px 8px; border-radius: 8px; background: rgba(20, 16, 30, 0.75); }
.cd-pop.new .cd { box-shadow: inset 0 0 0 3px var(--rc), 0 0 26px rgba(255, 220, 120, 0.85); }
.cd-pop.out { animation: cdOut 0.4s ease-in forwards; }
@keyframes cdIn { 0% { transform: translateX(160px) rotateY(80deg) scale(0.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes cdOut { to { transform: translateX(180px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-pop, .cd-pop.out, .cd.r2, .cd.r3, .cd::after, .cd-run, .cd-spk, .cd-motes, #ui .bookwin .cd-dcard.fx .cd { animation: none !important; } .cd-spk, .cd-motes { display: none; } }
/* ---- card book v2 (2026-10-12, js/cards.js on CARD_DATA): grade gem, the deck, the slot picker, and the gold boss cards
   (the user's pick "B1 เพชรแท้", Codex art assets/ui_cards/gold, approved page tools/card_gold_template.html) */
.cd-grade { position: absolute; z-index: 3; left: 11%; top: 9%; width: 13%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font: 800 7.4cqw/1 Fredoka, sans-serif; font-style: normal; color: #1a1408; background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--gc, #c9a24a) 45%, color-mix(in srgb, var(--gc, #c9a24a) 55%, #000) 100%);
  box-shadow: 0 0 0 1.5px rgba(20, 14, 6, 0.85), 0 2px 3px rgba(0, 0, 0, 0.6); }
.cd.locked .cd-grade { filter: grayscale(0.8) brightness(0.7); }
/* the gold boss card, in its 600 x 840 picture's space */
.cd.gold { border-radius: 4.5%; background: #0d0a06 url(../assets/ui_cards/gold/bg.jpg) center / cover no-repeat; box-shadow: none; isolation: isolate;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px rgba(232, 189, 98, 0.3)); }
.cd.gold .cd-win { left: 9%; top: 7.62%; width: 82%; height: 59.76%; border-radius: 0; background: radial-gradient(circle at 50% 60%, rgba(255, 214, 120, 0.35), transparent 68%); }
.cd.gold .cd-win::after { display: none; }
/* (the boss stands below the grade stars: 76% of the window wide, on its bottom) */
.cd.gold .cd-win img { left: 12%; right: auto; width: 76%; bottom: 4%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.7)); }
/* a boss card not owned yet: the boss as a dark shape with a faint gold rim (like the other cards), "ยังไม่มี" on a plaque */
.cd.gold.locked .cd-win img { filter: brightness(0) drop-shadow(0 0 1.2px rgba(255, 220, 140, 1)) drop-shadow(0 0 1px rgba(255, 214, 120, 0.9)) drop-shadow(0 0 8px rgba(255, 190, 80, 0.55)); }
.cd.gold .cd-lock { z-index: 3; left: 50%; right: auto; top: 37%; transform: translate(-50%, -50%); padding: 1.4cqw 3.6cqw; border-radius: 3cqw; white-space: nowrap;
  font-size: 6.2cqw; color: #f6d77a; background: rgba(12, 9, 4, 0.85); box-shadow: inset 0 0 0 0.5cqw rgba(232, 189, 98, 0.65), 0 2px 6px rgba(0, 0, 0, 0.6); text-shadow: none; }
.cdg-txt { position: absolute; z-index: 1; left: 9%; top: 69.76%; width: 82%; height: 24.29%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35cqw; text-align: center; }
.cdg-txt .gr { font: 700 4.4cqw/1 Mali, sans-serif; font-style: normal; padding: 0.9cqw 2.4cqw; border-radius: 3cqw; color: #2b1a04; background: linear-gradient(180deg, #fff1c2, #e0a92a); white-space: nowrap; }
.cdg-txt .nm { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 8.6cqw/1.2 Mali, sans-serif;
  background: linear-gradient(180deg, #fff6d6 0%, #f6d77a 45%, #b9842a 55%, #ffe9a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9)); }
.cdg-txt .nm.long { font-size: 7.2cqw; } .cdg-txt .nm.xlong { font-size: 6cqw; }
.cdg-txt small { font: 600 4.6cqw/1.2 Fredoka, sans-serif; color: #d9c49a; letter-spacing: 0.04em; white-space: nowrap; }
.cdg-txt em { font: 700 5cqw/1.2 Mali, sans-serif; font-style: normal; color: #f6d77a; white-space: nowrap; }
.cd.gold .cd-frame { z-index: 2; }
/* one Codex gold star per grade, at the top inside the window (placed by js) */
.cdg-st { position: absolute; z-index: 2; aspect-ratio: 1; pointer-events: none; background: url(../assets/ui_cards/gold/star.png) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 1px rgba(28, 14, 0, 0.95)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 5px rgba(255, 220, 130, 0.45)); }
.cd.gold.locked .cdg-st { filter: grayscale(1) brightness(0.45); }
/* the tier: five gems on the bottom bar */
.cdg-tier { position: absolute; z-index: 3; left: 50%; top: 95.3%; transform: translate(-50%, -50%); display: flex; gap: 2.2cqw; font-style: normal; }
.cdg-tier b { width: 2.6cqw; aspect-ratio: 1; transform: rotate(45deg); background: #241806; box-shadow: 0 0 0 0.5cqw #8a6420, 0 1px 2px rgba(0, 0, 0, 0.8); }
.cdg-tier b.on { background: linear-gradient(135deg, #fffbe8, #ffd76a 50%, #c48a1c); box-shadow: 0 0 0 0.5cqw #fff1c2, 0 0 2.4cqw rgba(255, 220, 120, 0.95); }
/* the light: Codex textures on black, blended; the sharp glint only on the gold and the stars (mask set by js) */
.cdg-l { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.cdg-l.sheen { background-image: url(../assets/ui_cards/gold/sheen.jpg); background-size: 220% 220%; mix-blend-mode: screen; opacity: 0.75; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.cdg-l.glint { background-image: url(../assets/ui_cards/gold/glint.jpg); background-size: 280% 280%; mix-blend-mode: color-dodge; opacity: 0.95; }
.cdg-l.soft { background-image: url(../assets/ui_cards/gold/glint.jpg); background-size: 280% 280%; mix-blend-mode: screen; opacity: 0.35; }
.cdg-l.dust { background-image: url(../assets/ui_cards/gold/dust.jpg); background-size: cover; mix-blend-mode: screen; opacity: 0.55; }
.cdg-l.sheen, .cdg-l.glint, .cdg-l.soft { background-position: 115% 115%; }
@media (prefers-reduced-motion: no-preference) {
  .cdg-l.sheen, .cdg-l.glint, .cdg-l.soft { animation: cdgSweep 4.2s cubic-bezier(.5, .05, .3, 1) infinite; }
  .cdg-l.sheen { animation-delay: -0.12s; } .cdg-l.soft { animation-delay: 0.08s; }
  .cdg-l.dust { animation: cdgTw 2.6s ease-in-out infinite; }
}
@keyframes cdgSweep { 0% { background-position: 115% 115%; } 50%, 100% { background-position: -15% -15%; } }
@keyframes cdgTw { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
.cd.gold.locked .cd-frame { filter: grayscale(0.7) brightness(0.55); }
.cd.gold.locked .cdg-txt { filter: grayscale(1) brightness(0.6); }
.cd-pop.new .cd.gold { box-shadow: none; filter: drop-shadow(0 0 16px rgba(255, 214, 120, 0.95)) drop-shadow(0 0 30px rgba(255, 170, 40, 0.5)); }
.cd-pop.gold { width: 190px; }
/* the deck: six slots on the right page */
#ui .bookwin .cd-deck { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 8px; }
#ui .bookwin .cd-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0; border: 0; background: none; cursor: pointer; }
#ui .bookwin .cd-slot .cd { width: 100%; }
#ui .bookwin .cd-slot-e { width: 100%; aspect-ratio: 600 / 840; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px rgba(217, 164, 67, 0.45); color: #d8c48a; }
#ui .bookwin .cd-slot-e b { font: 800 20px/1 Fredoka, sans-serif; }
#ui .bookwin .cd-slot-e small { font: 600 10.5px/1 Mali, sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-slot.lock .cd-slot-e { opacity: 0.55; box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.15); }
#ui .bookwin .cd-slot.sel .cd-slot-e, #ui .bookwin .cd-slot.sel .cd { outline: 2.5px solid #f2c14e; outline-offset: 2px; }
#ui .bookwin .cd-slot:not(.lock):not(.full) .cd-slot-e { animation: clCan 1.6s ease-in-out infinite; }
#ui .bookwin .cd-slot-l { font: 600 10px/1.1 Mali, sans-serif; color: #b9b1a0; text-align: center; white-space: nowrap; }
#ui .bookwin .cd-slot:hover .cd-slot-e, #ui .bookwin .cd-slot:hover .cd { transform: translateY(-2px); }
#ui .bookwin .cd-inbadge { position: absolute; z-index: 4; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; font: 700 10px/1.2 Mali, sans-serif; font-style: normal;
  color: #2b1a04; background: linear-gradient(#fff1c2, #e0a92a); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#ui .bookwin .cd-acts { display: flex; flex-wrap: wrap; gap: 6px; }
#ui .bookwin .cd-sets { grid-template-columns: 1fr; }
#ui .bookwin .cd-head .cl-prog .cd-guidebtn { flex: none; margin-left: 8px; }
#ui .bookwin .cd-gintro { margin: 2px 0 6px; font: 400 13px/1.55 Mali, sans-serif; color: #d8cfb8; }
/* what you get: under the deck and on a card's page (the user: "let players know what they get in return") */
#ui .bookwin .cd-gain { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; background: rgba(142, 240, 122, 0.07); box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.35); }
#ui .bookwin .cd-gain > b { font: 700 13.5px/1.3 Mali, sans-serif; color: #a8f09a; }
#ui .bookwin .cd-gain > b.cd-gnext { margin-top: 4px; color: #ffd76a; }
#ui .bookwin .cd-gain > span { font: 500 12.5px/1.5 Mali, sans-serif; color: #e8e0cc; }
#ui .bookwin .cd-gain > span b { color: #fff3cf; }
#ui .bookwin .cd-gain > small { font: 400 11.5px/1.4 Mali, sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-gtip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.28); }
#ui .bookwin .cd-gtip span { flex: 1; min-width: 0; font: 500 12px/1.45 Mali, sans-serif; color: #d8cfb8; }
#ui .bookwin .cd-gtip .btn { flex: none; }
#ui .bookwin .cd-ggem { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 800 11px/1 Fredoka, sans-serif; font-style: normal; color: #1a1408;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--gc) 45%, color-mix(in srgb, var(--gc) 55%, #000) 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
#ui .bookwin .cd-dust { color: #f6d77a; }
#ui .bookwin .cd-stars-tab span { line-height: 1.45; }
#ui .bookwin .cd-stars-tab .cd-unl { font: 400 11px/1.3 Mali, sans-serif; font-style: normal; color: #8a8270; }
#ui .bookwin .cd-stars-tab .cd-sp { color: #f6d77a; }
/* picking a card for an empty slot */
#ui .bookwin .cd-pick { display: flex; flex-direction: column; gap: 6px; }
#ui .bookwin .cd-prow { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.22); }
#ui .bookwin .cd-pcard .cd { width: 58px; }
#ui .bookwin .cd-pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .bookwin .cd-pinfo b { font: 700 14px/1.2 Mali, sans-serif; color: #f6efdc; }
#ui .bookwin .cd-pinfo b i { font: 700 11px/1 Fredoka, sans-serif; font-style: normal; color: #2b1a04; background: #f2c14e; padding: 1px 5px; border-radius: 5px; }
#ui .bookwin .cd-pinfo small { font: 400 11.5px/1.35 Mali, sans-serif; color: #b9b1a0; }

/* =====================================================================
   The book's side index tabs (2026-10-12, js/bookui.js BookUI.sideTabs; the user picked "แบบ 3 แท็บกระดาษ"):
   parchment tabs on the left edge for every system of the open category, behind the book: their inner end runs in
   under the book's slanting edge (x 165-181), so they meet it with no gap. The open one is gold and stands out further.
   ===================================================================== */
#ui .bookwin.bw-side .eco-tabs { display: none !important; }
#ui .bookwin .bk-side, #charpanel .bk-side { position: absolute; left: 0; top: 0; width: 0; height: 0; }
:is(#ui .bookwin, #charpanel) .bk-stab { position: absolute; left: 28px; width: 196px; box-sizing: border-box; display: flex; align-items: center; gap: 8px;
  padding: 0 58px 0 12px; border: 0; border-radius: 14px 0 0 14px; cursor: pointer; text-align: left;
  font: 700 15px/1.1 'Mali', sans-serif; color: #3a2a20; text-shadow: none; background: linear-gradient(#f6ead0, #e2cfa2);
  box-shadow: inset 4px 0 0 var(--sc), 0 0 0 2px #6a4a2a, 0 3px 4px rgba(0, 0, 0, 0.5); transition: left 0.12s, filter 0.12s; }
:is(#ui .bookwin, #charpanel) .bk-stab img { width: 30px; height: 30px; flex: none; object-fit: contain; }
:is(#ui .bookwin, #charpanel) .bk-stab span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.08; white-space: pre-line; }
:is(#ui .bookwin, #charpanel) .bk-stab.long { font-size: 13.5px; }
:is(#ui .bookwin, #charpanel) .bk-stab:not(.on) { filter: brightness(0.86); }
:is(#ui .bookwin, #charpanel) .bk-stab:not(.on):hover { left: 20px; filter: brightness(1); }
:is(#ui .bookwin, #charpanel) .bk-stab.on { left: 12px; width: 212px; cursor: default; background: linear-gradient(#ffe48a, #d9a443);
  box-shadow: inset 6px 0 0 var(--sc), 0 0 0 2px #2c2533, 0 0 12px rgba(255, 214, 110, 0.8); }
:is(#ui .bookwin, #charpanel) .bk-stab.off { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }

/* enhancement + appraisal as one page: the switch at the top of both (economy.js pairTabs) */
#ui .bookwin .eco-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 8px; padding: 4px; border-radius: 12px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); }
#ui .bookwin .eco-pair button { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 0; border-radius: 9px; cursor: pointer;
  font: 700 16px/1 'Mali', sans-serif; color: rgba(246, 238, 219, 0.6); background: none; }
#ui .bookwin .eco-pair button img { width: 26px; height: 26px; object-fit: contain; opacity: 0.7; }
#ui .bookwin .eco-pair button:hover:not(.on) { color: #f6efdc; background: rgba(255, 214, 110, 0.08); }
#ui .bookwin .eco-pair button.on { color: #2c2018; background: linear-gradient(#f6d27a, #d9a443); box-shadow: 0 0 10px rgba(242, 193, 78, 0.45); }
#ui .bookwin .eco-pair button.on img { opacity: 1; }

/* the dungeons as one tab: the three-way switch (BookUI.dgSwitch) in the boss dungeon window and the daily dungeon page */
#ui .bookwin .eco-pair.three { grid-template-columns: repeat(3, 1fr); }
#ui .bookwin .eco-pair.three button { font-size: 14.5px; gap: 6px; }
#ui .bookwin .eco-pair.three button img { width: 24px; height: 24px; }
#ui .bw-bdg .bdg-tabs { display: none !important; }
#ui .bw-bdg .bk-dgsw { position: absolute; left: 244px; top: 194px; width: 500px; margin: 0; z-index: 2; }

/* ---------- the equipment set tier badge (S1-S5): its own colour per tier, like metals, so it reads at a glance
   (2026-10-12, the user: "make the item tier a clear, distinct colour"); kept apart from the grade colours of the frame:
   S1 bronze, S2 silver, S3 gold, S4 ruby, S5 diamond (shimmering) ---------- */
.eco-cell .sn[class*=" t"], #ui .bookwin .eco-cell .sn[class*=" t"] {
  padding: 0 4px; border-radius: 4px; font: 800 10.5px/14px 'Fredoka', sans-serif; letter-spacing: 0.2px; text-shadow: none;
  box-shadow: 0 0 0 1.5px #140e0a, 0 1px 3px rgba(0, 0, 0, 0.6); }
.eco-cell .sn.t1, #ui .bookwin .eco-cell .sn.t1 { background: linear-gradient(#f0b47c, #b0662e); color: #2a1404; }
.eco-cell .sn.t2, #ui .bookwin .eco-cell .sn.t2 { background: linear-gradient(#ffffff, #aebccb); color: #1c2733; }
.eco-cell .sn.t3, #ui .bookwin .eco-cell .sn.t3 { background: linear-gradient(#fff2a6, #f0ae2e); color: #3a2300; box-shadow: 0 0 0 1.5px #140e0a, 0 0 6px rgba(255, 210, 80, 0.7); }
.eco-cell .sn.t4, #ui .bookwin .eco-cell .sn.t4 { background: linear-gradient(#ff9a9a, #d01f37); color: #fff; text-shadow: 0 1px 0 #5a0010; box-shadow: 0 0 0 1.5px #140e0a, 0 0 7px rgba(255, 70, 90, 0.75); }
.eco-cell .sn.t5, #ui .bookwin .eco-cell .sn.t5 { background: linear-gradient(110deg, #c6fbff, #52dcff 40%, #c49bff 70%, #ffffff); background-size: 220% 100%; color: #10213d;
  box-shadow: 0 0 0 1.5px #140e0a, 0 0 9px rgba(120, 220, 255, 0.9); }
/* (no running shimmer on S5: an endless animation inside the glowing slots made the whole bag repaint every frame - the
   user: "the bag slots stutter") */

/* ---------- item slots in the book windows: the inside glows in the item's grade colour (2026-10-12, the user: "the black
   background hides the slot's colour") - the painted slot keeps its rim, a soft light of the grade fills its dark inside,
   brightest behind the icon; the common grade stays plain ---------- */
#ui .bookwin .eco-cell img { position: relative; }
#ui .bookwin .eco-cell[class*=" g"]:not(.g0)::before { content: ''; position: absolute; inset: 9%; border-radius: 15%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(var(--gc), 0.62) 0%, rgba(var(--gc), 0.36) 52%, rgba(var(--gc), 0.2) 100%);
  box-shadow: inset 0 0 10px rgba(var(--gc), 0.55); }
#ui .bookwin .eco-cell.g0::before { content: ''; position: absolute; inset: 9%; border-radius: 15%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(236, 230, 214, 0.22), rgba(236, 230, 214, 0.06) 70%); }
#ui .bookwin .eco-cell.g1 { --gc: 127, 224, 122; }
#ui .bookwin .eco-cell.g2 { --gc: 95, 180, 255; }
#ui .bookwin .eco-cell.g3 { --gc: 194, 123, 255; }
#ui .bookwin .eco-cell.g4 { --gc: 255, 179, 64; }
#ui .bookwin .eco-cell.g5 { --gc: 255, 90, 106; }

/* ---------- the plain cards' tier stars sit exactly in the frame's painted star sockets (2026-10-12, the user: "the stars
   don't line up"): the star was a font glyph (★), drawn by whatever font the computer has, so its size and place drifted
   off the sockets. Now each is a drawn star shape placed on its socket's centre, measured on the frames
   (assets/ui_cards/card_frame_*.png: x 100 / 200 / 300 / 400 / 500, y 731.5 of 600 x 840, sockets ~66 px) ---------- */
.cd-stars { inset: 0; top: 0; height: auto; display: block; pointer-events: none; filter: drop-shadow(0 0 2.5px rgba(255, 196, 70, 0.95)) drop-shadow(0 1px 0 rgba(70, 40, 6, 0.9)); }
.cd-stars i { position: absolute; top: 83.9%; width: 9.5%; height: 6.4%; font-size: 0 !important; color: transparent !important; text-shadow: none !important;
  clip-path: polygon(50% 0%, 61.8% 35.5%, 100% 36.2%, 69.1% 58.8%, 80.9% 95.1%, 50% 72.8%, 19.1% 95.1%, 30.9% 58.8%, 0% 36.2%, 38.2% 35.5%); }
.cd-stars i:nth-child(1) { left: 11.92%; } .cd-stars i:nth-child(2) { left: 28.58%; } .cd-stars i:nth-child(3) { left: 45.25%; }
.cd-stars i:nth-child(4) { left: 61.92%; } .cd-stars i:nth-child(5) { left: 78.58%; }
.cd-stars i.on { background: linear-gradient(180deg, #fff6c4 0%, #ffd84a 42%, #f2a21e 100%); }

/* ---------- the plain cards' window by grade (2026-10-12): the grade's painted backdrop (cards.js bgOf) fills the window;
   from Sapphire up a slow wheel of light in the grade's colour turns behind the monster, stronger with each grade ---------- */
.cd-win { background-size: cover, cover; background-position: center, center; }
.cd.gr5:not(.locked) .cd-win::before, .cd.gr6:not(.locked) .cd-win::before, .cd.gr7:not(.locked) .cd-win::before, .cd.gr8:not(.locked) .cd-win::before {
  content: ''; position: absolute; left: -50%; top: -45%; width: 200%; height: 200%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg 9deg, color-mix(in srgb, var(--gc) 60%, #fff 40%) 11deg 14deg, transparent 16deg 24deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 52%); mask: radial-gradient(circle at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 30%, transparent 52%);
  opacity: var(--cdRay, 0.28); }
.cd.gr6 { --cdRay: 0.36; } .cd.gr7 { --cdRay: 0.44; } .cd.gr8 { --cdRay: 0.55; }
@media (prefers-reduced-motion: no-preference) {
  .cd.gr5:not(.locked) .cd-win::before, .cd.gr6:not(.locked) .cd-win::before, .cd.gr7:not(.locked) .cd-win::before, .cd.gr8:not(.locked) .cd-win::before { animation: cdRays 28s linear infinite; }
  .cd.gr8:not(.locked) .cd-win::before { animation-duration: 18s; }
  @keyframes cdRays { to { transform: rotate(360deg); } }
}

/* (2026-10-12, the user: "the multi-upgrade tab is covered"): the skip-animation chip sat on top of the row (absolute, right)
   and hid "อัปเกรดหมู่" once the book made the tabs bigger; it now stands in the row after the tabs */
#ui .bookwin .fg-tabs { gap: 12px; flex-wrap: nowrap; }
#ui .bookwin .fg-tabs .fg-fast { padding: 3px 10px !important; font-size: 0.8rem !important; min-height: 0; }

/* ---------- "↩ กลับ" (bookui.js BookUI.back): a parchment pill beside the book's left page arrow, back to the system
   that was open before (2026-10-12) ---------- */
#ui .bk-back { position: fixed; z-index: 60; transform: translateY(-50%); padding: 0.28em 0.9em 0.32em; border-radius: 999px; cursor: pointer;
  font: 700 1em/1.15 'Mali', sans-serif; color: #2b1d0e; white-space: nowrap;
  background: linear-gradient(#fff3c8, #f2c86a); border: 2px solid #8a5a1e; box-shadow: 0 0 0 1.5px #1a1208, 0 3px 6px rgba(0, 0, 0, 0.5); }
#ui .bk-back:hover { filter: brightness(1.08); transform: translateY(-50%) scale(1.04); }
#ui .bk-back[hidden] { display: none; }
/* (the back pill sits where the left page number is: the number steps aside while it shows - the text check found it hidden) */
#ui.bk-backon .bk-pageno.l, #ui.bk-backon #charpanel .bk-pageno.l { visibility: hidden; }

/* ---------- the appraisal page in the book (2026-10-12, the user: "fix this" on the multi-appraise page) ----------
   - the 20 registration slots fit the box: ten (five) equal columns of the box's width, square cells
   - the four mode buttons fit one row (the skip chip no longer drops to a line of its own)
   - the look picker 1-10 as small plain number keys (the book's big pill skin made them look broken)
   - the SPACE key sits on the button's corner, off its words */
#ui .bookwin .ap-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; box-sizing: border-box; }
#ui .bookwin :is(.ap-v7, .ap-v10) .ap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
#ui .bookwin .ap-grid .ap-cell { width: auto; height: auto; min-width: 0; aspect-ratio: 1; }
#ui .bookwin .ap-grid .ap-cell img { width: 78%; height: 78%; object-fit: contain; }
#ui .bookwin .ap-modes { flex-wrap: nowrap; gap: 4px; }
#ui .bookwin .ap-tabs .ap-modes button { padding: 4px 9px !important; font-size: 13px !important; white-space: nowrap; min-height: 0; }
#ui .bookwin .ap-tabs .ap-vpick button { width: 26px; height: 26px; min-height: 0; padding: 0 !important; border-radius: 7px !important; border: 1px solid rgba(201, 162, 74, 0.55) !important;
  background: rgba(0, 0, 0, 0.35) !important; border-image: none !important; color: #f3ead2 !important; font: 700 13px/24px Fredoka, sans-serif !important; text-shadow: none !important; box-shadow: none !important; }
#ui .bookwin .ap-tabs .ap-vpick button.on { background: linear-gradient(#fff1c2, #f2c14e) !important; color: #2b1d0e !important; border-color: #f2c14e !important; }
#ui .bookwin .ap-tabs .ap-vpick button::after { display: none !important; }
#ui .bookwin .ap-go kbd { top: -9px; bottom: auto; right: 10px; padding: 1px 6px; border-radius: 5px; background: #2c2533; color: #f3ead2; box-shadow: 0 0 0 1.5px #c9a24a; }

/* ---------- skill tree: the class tabs no longer run into the passive skills (2026-10-12, the user: "fix it properly") ----
   thirteen classes (the novice line and the traveller's line besides the eleven) made a 7th row of the 2-column grid that
   sat on "สกิลติดตัว"; with more than twelve the tabs go three to a row (5 rows), a little more compact */
#ui .bw-tree .tree-tabs:has(> :nth-child(13)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 5px; }
#ui .bw-tree .tree-tabs:has(> :nth-child(13)) .tree-tab { padding: 5px 8px; gap: 6px; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; }
#ui .bw-tree .tree-tabs:has(> :nth-child(13)) .tree-tab small { font-size: 11px; }
#ui .bw-tree .tree-tabs:has(> :nth-child(13)) .tree-tab :is(img, canvas) { width: 24px; height: 24px; flex: none; }

/* ---------- collection book: "ใส่ทั้งหมด" on a set's card (and its page), double-click a card to put its pieces in ---------- */
#ui .bookwin .clx-card { position: relative; }
.clx-all { position: absolute; right: 8px; bottom: 7px; padding: 3px 10px; border-radius: 999px; cursor: pointer; font: 700 12px/1.2 Mali, sans-serif;
  color: #2b1d0e; background: linear-gradient(#fff1c2, #f2c14e); box-shadow: 0 0 0 1.5px #1a1208, 0 2px 4px rgba(0, 0, 0, 0.45); }
.clx-all:hover { filter: brightness(1.08); }
.clx-dall { margin-top: 6px; align-self: flex-start; }

/* one skill's reset in its details card (ui.js renderTip) */
#tree .sk-one { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(201, 162, 74, 0.35); }
#tree .sk-one em { font: 400 12px/1.2 Mali, sans-serif; font-style: normal; color: #ff9a9a; }
#tree .sk-one .btn { flex: 1 1 100%; width: 100%; min-width: 0; white-space: normal; text-align: center; padding: 6px 10px; line-height: 1.25; }


/* ---------- the skill level-up button: the main action of a learned skill's card, big and bright (2026-10-12) ---------- */
#tree .tip .sk-up-go { flex: 1 1 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; margin-top: 4px;
  padding: 0 16px; border-radius: 12px; border: 2px solid #1a3a12; cursor: pointer; font: 800 17px/1 Mali, sans-serif; color: #fff;
  background: linear-gradient(#b8f58a, #5fb63e 55%, #3f8f2a); text-shadow: 0 2px 0 #24521a; box-shadow: 0 0 0 2px #e9ffd2 inset, 0 4px 0 #1f4a16, 0 0 16px rgba(150, 240, 100, 0.55); }
#tree .tip .sk-up-go b { padding: 3px 10px; border-radius: 999px; background: rgba(20, 50, 12, 0.55); font: 800 14px/1 Fredoka, sans-serif; color: #fff6b0; text-shadow: none; }
#tree .tip .sk-up-go.ready:hover { filter: brightness(1.1); transform: translateY(-1px); }
#tree .tip .sk-up-go.ready:active { transform: translateY(2px); box-shadow: 0 0 0 2px #e9ffd2 inset, 0 1px 0 #1f4a16; }
#tree .tip .sk-up-go:disabled { cursor: default; filter: grayscale(0.85) brightness(0.7); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) inset; }
@media (prefers-reduced-motion: no-preference) {
  #tree .tip .sk-up-go.ready { animation: skUpGlow 1.6s ease-in-out infinite; }
  @keyframes skUpGlow { 50% { box-shadow: 0 0 0 2px #e9ffd2 inset, 0 4px 0 #1f4a16, 0 0 26px rgba(170, 255, 110, 0.9); } }
}

/* ---------- item slots: the grade's colour fills the whole inside of the slot (2026-10-12, the user: "how do I see each
   item's colour fully, not hidden by the black of the slot"): the painted slot's dark inside (its rim ends ~8% in) is
   covered edge to edge by the grade's colour, brightest at the top and behind the icon, so the grade reads at a glance;
   the common grade gets a light stone grey ---------- */
#ui .bookwin .eco-cell[class*=" g"]:not(.g0)::before, #ui .bookwin .eco-cell.g0::before {
  inset: 8%; border-radius: 14%;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(var(--gc), 0.95) 0%, rgba(var(--gc), 0.7) 50%, rgba(var(--gc), 0.48) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 -10px 14px rgba(0, 0, 0, 0.28); }
#ui .bookwin .eco-cell.g0 { --gc: 168, 160, 142; }
#ui .bookwin .eco-cell.g1 { --gc: 74, 168, 70; }
#ui .bookwin .eco-cell.g2 { --gc: 52, 128, 222; }
#ui .bookwin .eco-cell.g3 { --gc: 146, 78, 222; }
#ui .bookwin .eco-cell.g4 { --gc: 226, 140, 30; }
#ui .bookwin .eco-cell.g5 { --gc: 220, 52, 70; }
#ui .bookwin .eco-cell img { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.55)); }

/* ---------- item slots, vivid (2026-10-12, the user: "it looks dull and not wow for high tiers") ----------
   - the grade's colour as a bright solid tile (no dark slot showing through), lit from the top, a glossy band
   - hero and up glow round the slot; legend and mythic glow brighter and breathe (opacity only), mythic strongest
   - a light sweeps across hero+ (and S5) pieces, stars twinkle on legend / mythic (transform / opacity: no repaints)
   - no filter on the slot itself (a filter there made every animation inside repaint the whole bag) */
#ui .bookwin .eco-cell[class*=" g"] { filter: none !important; }
#ui .bookwin .eco-cell[class*=" g"]:not(.g0)::before, #ui .bookwin .eco-cell.g0::before {
  inset: 8%; border-radius: 14%; z-index: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 34%, transparent 35%),
    radial-gradient(ellipse at 50% 38%, var(--gl) 0%, transparent 62%),
    linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 -8px 12px rgba(0, 0, 0, 0.25); }
#ui .bookwin .eco-cell.g0 { --g1: #c9c1ad; --g2: #7d7565; --gl: rgba(255, 255, 255, 0.35); }
#ui .bookwin .eco-cell.g1 { --g1: #5fe36b; --g2: #148a3b; --gl: rgba(210, 255, 190, 0.55); }
#ui .bookwin .eco-cell.g2 { --g1: #4fb2ff; --g2: #1446c8; --gl: rgba(200, 235, 255, 0.55); }
#ui .bookwin .eco-cell.g3 { --g1: #c47cff; --g2: #5a1fc0; --gl: rgba(240, 210, 255, 0.6); --gw: rgba(190, 110, 255, 0.85); }
#ui .bookwin .eco-cell.g4 { --g1: #ffc94a; --g2: #d4600a; --gl: rgba(255, 245, 190, 0.7); --gw: rgba(255, 180, 50, 0.95); }
#ui .bookwin .eco-cell.g5 { --g1: #ff6b7e; --g2: #a3082c; --gl: rgba(255, 220, 220, 0.65); --gw: rgba(255, 60, 90, 1); }
#ui .bookwin .eco-cell > img { z-index: 1; }
#ui .bookwin .eco-cell :is(.sn, .plus, .cnt, .unk, .lk, .clb) { z-index: 3; }
/* the glow round the slot (hero up), breathing on legend / mythic */
#ui .bookwin .eco-cell:is(.g3, .g4, .g5)::after { content: ''; position: absolute; inset: 3%; border-radius: 18%; pointer-events: none; z-index: -1;
  box-shadow: 0 0 8px 1px var(--gw), 0 0 16px 2px var(--gw); opacity: 0.55; }
#ui .bookwin .eco-cell.g5::after { box-shadow: 0 0 9px 2px var(--gw), 0 0 22px 4px var(--gw); opacity: 0.8; }
/* the sweep: a band of light crossing the tile, clipped to it */
#ui .bookwin .eco-cell .cx-sweep { position: absolute; inset: 8%; border-radius: 14%; overflow: hidden; pointer-events: none; z-index: 2; }
#ui .bookwin .eco-cell .cx-sweep i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); mix-blend-mode: screen; }
/* the stars: two small four-point sparkles at the corners */
#ui .bookwin .eco-cell .cx-star { position: absolute; z-index: 2; width: 26%; aspect-ratio: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, transparent 13%), conic-gradient(from 45deg, transparent 0 20%, rgba(255, 255, 255, 0.95) 25%, transparent 30% 45%, rgba(255, 255, 255, 0.95) 50%, transparent 55% 70%, rgba(255, 255, 255, 0.95) 75%, transparent 80% 95%, rgba(255, 255, 255, 0.95) 100%);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%); }
#ui .bookwin .eco-cell .cx-star.a { left: 6%; top: 6%; }
#ui .bookwin .eco-cell .cx-star.b { right: 8%; bottom: 22%; width: 20%; }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .eco-cell:is(.g4, .g5)::after { will-change: opacity; animation: cxBreath 2.2s ease-in-out infinite; }
  #ui .bookwin .eco-cell.g5::after { animation-duration: 1.6s; }
  @keyframes cxBreath { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
  #ui .bookwin .eco-cell .cx-sweep i { will-change: transform; animation: cxSweep 3.6s ease-in-out infinite; }
  #ui .bookwin .eco-cell.g5 .cx-sweep i { animation-duration: 2.6s; }
  @keyframes cxSweep { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } 85%, 100% { transform: translateX(260%) skewX(-18deg); } }
  #ui .bookwin .eco-cell .cx-star { will-change: transform, opacity; animation: cxTwinkle 2.4s ease-in-out infinite; }
  #ui .bookwin .eco-cell .cx-star.b { animation-delay: 1.2s; }
  @keyframes cxTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
}
#ui .bookwin .eco-cell[class*=" g"] { isolation: isolate; }
#ui .bookwin .eco-cell:is(.g3, .g4, .g5)::after { inset: 0; border-radius: 16%; box-shadow: 0 0 10px 2px var(--gw), 0 0 22px 5px var(--gw); }
#ui .bookwin .eco-cell.g5::after { box-shadow: 0 0 12px 3px var(--gw), 0 0 28px 7px var(--gw); }
#ui .bookwin .eco-cell .cx-star { width: 36%; filter: none; }
#ui .bookwin .eco-cell .cx-star.a { left: 2%; top: 2%; }
#ui .bookwin .eco-cell .cx-star.b { right: 4%; bottom: 20%; width: 28%; }
#ui .bookwin .eco-cell .cx-sweep i { mix-blend-mode: normal; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); }

/* ---------- MIR4-style slots (2026-10-12, the user: "can it be like MIR4") ----------
   - a comet of light runs round the frame of hero / legend / mythic pieces (two comets on mythic), turning with transform
     only; the coloured tile covers its middle, so only the frame lights up
   - legend and mythic: a burst of light rays behind the icon */
#ui .bookwin .eco-cell[class*=" g"]::before { z-index: 1; }
#ui .bookwin .eco-cell > img { z-index: 2; }
#ui .bookwin .eco-cell .cx-sweep, #ui .bookwin .eco-cell .cx-star { z-index: 3; }
#ui .bookwin .eco-cell :is(.sn, .plus, .cnt, .unk, .lk, .clb) { z-index: 4; }
#ui .bookwin .eco-cell .cx-orbit { position: absolute; inset: 2.5%; border-radius: 15%; overflow: hidden; pointer-events: none; z-index: 0; }
#ui .bookwin .eco-cell .cx-orbit i { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--gw) 80%, #fff 88%, transparent 94%); }
#ui .bookwin .eco-cell.g5 .cx-orbit i { background: conic-gradient(from 0deg, transparent 0 18%, var(--gw) 32%, #fff 38%, transparent 44% 68%, var(--gw) 82%, #fff 88%, transparent 94%); }
#ui .bookwin .eco-cell:is(.g4, .g5)::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.08) 34%, transparent 35%),
    radial-gradient(circle at 50% 46%, var(--gl) 0%, transparent 58%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, 0.16) 0deg 7deg, transparent 7deg 22deg),
    linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%); }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .eco-cell .cx-orbit i { will-change: transform; animation: cxOrbit 2.8s linear infinite; }
  #ui .bookwin .eco-cell.g4 .cx-orbit i { animation-duration: 2.2s; }
  #ui .bookwin .eco-cell.g5 .cx-orbit i { animation-duration: 1.9s; }
  @keyframes cxOrbit { to { transform: rotate(360deg); } }
}
#ui .bookwin .eco-cell .cx-orbit { inset: 0; border-radius: 16%; }
#ui .bookwin .eco-cell .cx-orbit i { background: conic-gradient(from 0deg, transparent 0 55%, var(--gw) 75%, #fff 86%, #fff 89%, transparent 96%); }
#ui .bookwin .eco-cell.g5 .cx-orbit i { background: conic-gradient(from 0deg, transparent 0 12%, var(--gw) 28%, #fff 37%, transparent 45% 62%, var(--gw) 78%, #fff 87%, transparent 95%); }

/* dragging a piece from the bag to a worn slot (economy.js) */
.eco-ghost { position: fixed; z-index: 99999; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; border-radius: 12px; display: grid; place-items: center;
  background: rgba(20, 16, 12, 0.6); box-shadow: 0 0 0 2px #f2c14e, 0 6px 16px rgba(0, 0, 0, 0.6); transform: scale(1.08) rotate(-4deg); opacity: 0.95; }
.eco-ghost img { width: 82%; height: 82%; object-fit: contain; }
#eco.eco-dragging, #eco.eco-dragging * { cursor: grabbing !important; }
#eco.eco-dragging .eco-gslot [data-slot]:not(.drop-ok) { opacity: 0.45; }
#eco.eco-dragging .eco-gslot [data-slot].drop-ok { outline: 3px solid #7dff8a; outline-offset: -2px; border-radius: 14px; box-shadow: 0 0 14px rgba(125, 255, 138, 0.8); }
#eco.eco-dragging .eco-gslot [data-slot].drop-ok.drop-hover { transform: scale(1.08); box-shadow: 0 0 22px rgba(125, 255, 138, 1); }
#ui .bookwin .eco-bagscroll .eco-cell[data-u] { cursor: grab; }
#ui .bookwin .eco-cell img { -webkit-user-drag: none; user-select: none; }

/* ---------- toned down (2026-10-12, the user: "the light is a bit too much"): a softer glow round the slot, a fainter and
   slower sweep, the running light dimmer, one small star on mythic only, quieter rays ---------- */
#ui .bookwin .eco-cell:is(.g3, .g4, .g5)::after { inset: 2%; box-shadow: 0 0 6px 0 var(--gw); opacity: 0.35; }
#ui .bookwin .eco-cell.g5::after { box-shadow: 0 0 8px 1px var(--gw); opacity: 0.45; }
#ui .bookwin .eco-cell .cx-sweep i { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent); }
#ui .bookwin .eco-cell .cx-orbit i { opacity: 0.55; }
#ui .bookwin .eco-cell.g5 .cx-orbit i { opacity: 0.7; }
#ui .bookwin .eco-cell .cx-star { width: 26%; opacity: 0; }
#ui .bookwin .eco-cell:is(.g4, .g5)::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.06) 34%, transparent 35%),
    radial-gradient(circle at 50% 46%, var(--gl) 0%, transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, 0.07) 0deg 7deg, transparent 7deg 22deg),
    linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%); }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .eco-cell:is(.g4, .g5)::after { animation: cxBreath2 3.2s ease-in-out infinite; }
  @keyframes cxBreath2 { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
  #ui .bookwin .eco-cell .cx-sweep i, #ui .bookwin .eco-cell.g5 .cx-sweep i { animation: cxSweep 6s ease-in-out infinite; }
  #ui .bookwin .eco-cell .cx-orbit i { animation-duration: 4s; }
  #ui .bookwin .eco-cell.g4 .cx-orbit i { animation-duration: 3.4s; }
  #ui .bookwin .eco-cell.g5 .cx-orbit i { animation-duration: 3s; }
  #ui .bookwin .eco-cell .cx-star { animation: cxTwinkle2 3.6s ease-in-out infinite; }
  @keyframes cxTwinkle2 { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 45% { opacity: 0.75; transform: scale(0.9) rotate(45deg); } 70% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
}

/* ---------- the item stays readable (2026-10-12, the user: "so much light you can't see the item"): MIR4-like deep tiles
   - the grade's colour is deep and darkest at the bottom; a soft lighter pool behind the icon; no white gloss band
   - every light effect runs UNDER the icon (between the tile and the picture), never over it
   - a dark outline round the icon so it stands out on any tile ---------- */
#ui .bookwin .eco-cell.g0 { --g1: #7d776a; --g2: #2e2a24; --gl: rgba(230, 225, 210, 0.22); }
#ui .bookwin .eco-cell.g1 { --g1: #2a8a3e; --g2: #0a2e15; --gl: rgba(140, 240, 150, 0.25); }
#ui .bookwin .eco-cell.g2 { --g1: #2662bc; --g2: #091f50; --gl: rgba(130, 190, 255, 0.28); }
#ui .bookwin .eco-cell.g3 { --g1: #6e38b8; --g2: #22094a; --gl: rgba(205, 160, 255, 0.28); }
#ui .bookwin .eco-cell.g4 { --g1: #b56a14; --g2: #401c03; --gl: rgba(255, 210, 120, 0.3); }
#ui .bookwin .eco-cell.g5 { --g1: #b0243a; --g2: #3a040e; --gl: rgba(255, 150, 160, 0.3); }
#ui .bookwin .eco-cell[class*=" g"]:not(.g0)::before, #ui .bookwin .eco-cell.g0::before, #ui .bookwin .eco-cell:is(.g4, .g5)::before {
  background: radial-gradient(circle at 50% 45%, var(--gl) 0%, transparent 62%), linear-gradient(180deg, var(--g1) 0%, var(--g2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(0, 0, 0, 0.45); }
#ui .bookwin .eco-cell .cx-sweep, #ui .bookwin .eco-cell .cx-star { z-index: 1; }
#ui .bookwin .eco-cell .cx-sweep { inset: 8%; z-index: 1; }
#ui .bookwin .eco-cell > img { z-index: 2; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#ui .bookwin .eco-cell .cx-sweep i { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent); }

/* ---------- no stutter with a bag full of great pieces (2026-10-12, the user: "the bag stutters when things drop in"):
   eighty animated slots meant hundreds of moving layers and a hitch every so often. In the bag's list the slots keep their
   colours, glow and light still; they come alive only under the pointer or when picked. The worn row (ten slots at
   most) keeps its running lights. ---------- */
#ui .bookwin .eco-bagscroll .eco-cell .cx-orbit i, #ui .bookwin .eco-bagscroll .eco-cell .cx-sweep i, #ui .bookwin .eco-bagscroll .eco-cell .cx-star,
#ui .bookwin .eco-bagscroll .eco-cell::after { animation: none !important; will-change: auto !important; }
#ui .bookwin .eco-bagscroll .eco-cell:is(.g4, .g5)::after { opacity: 0.45; }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-orbit i { animation: cxOrbit 3s linear infinite !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-sweep i { animation: cxSweep 2.4s ease-in-out infinite !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-star { animation: cxTwinkle2 2.4s ease-in-out infinite !important; }
}

/* ---------- every item slot painted once on its own layer (2026-10-12, the user: "every slot with an item blinks when
   something drops into the bag"): a new piece then paints only its own slot; the others keep their finished pixels
   instead of being painted again (and losing their pictures for a moment) ---------- */
#ui .bookwin .eco-cell[data-u] { will-change: transform; backface-visibility: hidden; }
/* cut-off text (2026-10-12, the user: "check the cut-off text"), then 4 more tiles (achievements, world events, fishing,
   cooking): ตัวละคร (10 rows) over สังคม (3) on the left, การผจญภัย (9) over ร้านค้าและงานฝีมือ (6) on the right;
   35px rows that squeeze rather than spill if a card ever gets one more */
#ui .bw-pause .hub-sec:not(.hub-settings) { display: flex; flex-direction: column; }
#ui .bw-pause .hub-grid { flex: 1 1 auto; min-height: 0; }
#ui .bw-pause .hub-tile { height: 35px; flex: 0 1 35px; min-height: 28px; }
/* boss dungeon levels: taller cards, the name on one line, the rest fits (the info box below starts lower and scrolls) */
#ui .bw-bdg .bdg-tiers { height: 172px; }
#ui .bw-bdg .bdg-side { top: 376px; height: 476px; }
#ui .bw-bdg .bdg-tier { justify-content: flex-start; gap: 1px; padding: 7px 6px 6px 13px; }
#ui .bw-bdg .bdg-tier b { font-size: 1.22rem; white-space: nowrap; }
#ui .bw-bdg .bdg-tier small { font-size: 0.8rem; line-height: 1.2; }
#ui .bw-bdg .bdg-tier .bt-req { font-size: 0.78rem; line-height: 1.2; }
#ui .bw-bdg .bdg-tier .bt-left { font-size: 0.76rem; line-height: 1.2; }
#ui .bw-bdg .bdg-foot p { padding-left: 14px; }
#ui .bw-bdg .bdg-name p { -webkit-line-clamp: 5; line-clamp: 5; max-width: 70%; }
/* skill book: the right title ("สกิลของอาชีพ") ran under the skill-point pill */
#ui .bw-tree .bk-title.r { font-size: 26px; gap: 10px; }
#ui .bw-pause .hub-sec h3 { white-space: nowrap; }

/* =====================================================================
   Achievements + titles, fishing + cooking, world events (2026-10-12; js/achieve.js, js/lifeskill.js, js/worldevents.js,
   the book window js/lifewin.js #life). Obsidian-gold like the rest of the UI; every row says what you get.
   ===================================================================== */
#life .btn { color: var(--ink); }
#life .btn.primary { color: #fff; }
#life .lf-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 2px; border-radius: 99px; background: rgba(0, 0, 0, 0.35); font: 700 11.5px/1.6 Mali, sans-serif; color: #f2ead6; white-space: nowrap; }
#life .lf-chip img { width: 20px; height: 20px; object-fit: contain; }
#life .lf-dot { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; margin-left: 4px; border-radius: 99px; background: #e8463a; color: #fff; font: 800 10.5px/1 Fredoka, sans-serif; font-style: normal; }
#life .lf-note { display: block; margin: 4px 0; font: 400 12px/1.5 Mali, sans-serif; color: #b9b1a0; }
#life .lf-h { margin: 10px 0 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 14px Mali, sans-serif; color: #f6dc98; }
#life .lf-h small { font: 500 11.5px Mali, sans-serif; color: #b9b1a0; }
#life .lf-bar { display: block; height: 7px; margin: 4px 0 2px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); }
#life .lf-bar b { display: block; height: 100%; background: linear-gradient(90deg, #8ef07a, #d4f58a); }
#life .lf-bar.xp b { background: linear-gradient(90deg, #5fb4ff, #b8e2ff); }
#life .lf-list { display: flex; flex-direction: column; gap: 6px; }
#life .lf-an { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#life .lf-an > b { font: 700 14px/1.25 Mali, sans-serif; color: #f6efdc; }
#life .lf-an > b small { font: 500 11px Mali, sans-serif; color: #b9b1a0; }
#life .lf-an > small { font: 400 12px/1.4 Mali, sans-serif; color: #c8c0aa; }
#life .lf-an .lf-num { color: #9a927e; font-family: Fredoka, Mali, sans-serif; }
#life .lf-buff { color: #a8f09a !important; }
#life .lf-ok { flex: none; font: 700 12px Mali, sans-serif; color: #8be37b; }
#life .lf-todo { flex: none; font: 500 11.5px Mali, sans-serif; color: #8a8270; }
/* achievements */
#life .lf-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 8px; }
#life .lf-cat { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border: 0; border-radius: 9px; cursor: pointer; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); color: #d8cfb8; text-align: left; }
#life .lf-cat img { width: 28px; height: 28px; object-fit: contain; flex: none; }
#life .lf-cat b { font: 700 12.5px/1.15 Mali, sans-serif; flex: 1; min-width: 0; }
#life .lf-cat small { font: 600 11px Fredoka, sans-serif; color: #b9b1a0; }
#life .lf-cat .lf-dot { position: absolute; right: -4px; top: -6px; }
#life .lf-cat.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; box-shadow: 0 0 10px rgba(242, 193, 78, 0.5); }
#life .lf-cat.on small { color: #4a3a20; }
#life .lf-claimall { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 10px; border-radius: 9px; background: rgba(142, 240, 122, 0.1); box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.45); font: 700 13px Mali, sans-serif; color: #a8f09a; }
#life .lf-claimall .btn { margin-left: auto; }
#life .lf-ach { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.08); }
#life .lf-ach.done:not(.got) { background: rgba(242, 193, 78, 0.13); box-shadow: inset 0 0 0 1.5px #f2c14e; }
#life .lf-ach.got { opacity: 0.62; }
#life .lf-medal { width: 40px; height: 40px; object-fit: contain; flex: none; }
#life .lf-ach:not(.done) .lf-medal { filter: grayscale(0.6) brightness(0.8); }
#life .lf-rw { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; max-width: 42%; }
#life .lf-title { display: inline-block; padding: 1px 8px; border-radius: 6px; font: 700 11.5px/1.6 Mali, sans-serif; color: var(--tc); background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px var(--tc); white-space: nowrap; }
#life .lf-plate { position: relative; height: 64px; display: grid; place-items: center; background-position: center; background-size: contain; background-repeat: no-repeat; }
#life .lf-plate span { font: 700 15px Mali, sans-serif; color: var(--tc, #d8cfb8); text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
#life .lf-titles { display: flex; flex-wrap: wrap; gap: 5px; }
#life .lf-tbtn { display: flex; flex-direction: column; align-items: flex-start; padding: 5px 9px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1px var(--tc); color: var(--tc); font: 700 12.5px/1.25 Mali, sans-serif; }
#life .lf-tbtn small { font: 500 10.5px Mali, sans-serif; color: #b9b1a0; }
#life .lf-tbtn.on { background: rgba(242, 193, 78, 0.18); box-shadow: inset 0 0 0 2px var(--tc), 0 0 8px var(--tc); }
#life .lf-miles { display: flex; flex-direction: column; gap: 3px; }
#life .lf-miles div { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); font-size: 12px; }
#life .lf-miles b { font: 800 12.5px Fredoka, sans-serif; color: #9a927e; }
#life .lf-miles span { color: #c8c0aa; font-family: Mali, sans-serif; }
#life .lf-miles small { color: #8a8270; font-family: Mali, sans-serif; }
#life .lf-miles .on { background: rgba(142, 240, 122, 0.1); }
#life .lf-miles .on b, #life .lf-miles .on small { color: #8be37b; }
/* the fish album */
#life .lf-fishgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#life .lf-maph { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
#life .lf-maph:first-child { margin-top: 0; }
#life .lf-maph em { font: 700 11px Mali, sans-serif; font-style: normal; padding: 1px 8px; border-radius: 99px; background: #f2c14e; color: #2c2018; }
#life .lf-maph small { margin-left: auto; }
#life .lf-fish { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px; border: 0; border-radius: 10px; cursor: pointer; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 22%, transparent), rgba(0, 0, 0, 0.35) 70%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 55%, transparent); color: #f2ead6; }
#life .lf-fish img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
#life .lf-fish b { font: 700 12px/1.2 Mali, sans-serif; text-align: center; }
#life .lf-fish small { font: 500 10.5px/1.2 Mali, sans-serif; color: #b9b1a0; text-align: center; }
#life .lf-fish.unk img { filter: brightness(0) opacity(0.55) drop-shadow(0 0 3px var(--rc)); }
#life .lf-fish.sel { box-shadow: inset 0 0 0 2px #f2c14e, 0 0 10px rgba(242, 193, 78, 0.5); }
#life .lf-fdet { display: grid; grid-template-columns: 78px 1fr; gap: 10px; margin-top: 8px; padding: 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rc) 60%, transparent); }
#life .lf-fdet img { width: 78px; height: 78px; object-fit: contain; }
#life .lf-fdet div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#life .lf-fdet b { font: 700 15px Mali, sans-serif; color: var(--rc); }
#life .lf-fdet small { font: 400 12px/1.4 Mali, sans-serif; color: #c8c0aa; }
#life .lf-how { display: flex; flex-direction: column; gap: 4px; }
#life .lf-how span { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); font: 500 12px/1.4 Mali, sans-serif; color: #d8cfb8; }
#life .lf-how img { width: 26px; height: 26px; object-fit: contain; flex: none; }
/* cooking */
#life .lf-dish { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.08); }
#life .lf-dish.no .lf-di { filter: grayscale(0.55) opacity(0.7) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }   /* (not ready: only the dish picture dims; a faded row took its words and button below 3:1) */
#life .lf-di { width: 52px; height: 52px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
#life .lf-needs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
#life .lf-need { display: inline-flex; align-items: center; gap: 2px; padding: 0 7px 0 1px; border-radius: 99px; background: rgba(232, 70, 58, 0.18); font: 600 11px/1.7 Mali, sans-serif; color: #ffb4a8; white-space: nowrap; }
#life .lf-need.ok { background: rgba(142, 240, 122, 0.14); color: #a8f09a; }
#life .lf-need img { width: 18px; height: 18px; object-fit: contain; }
#life .lf-cooking { flex: none; font: 700 12px Mali, sans-serif; color: #ffd76a; animation: lfBlink 0.8s ease-in-out infinite alternate; }
@keyframes lfBlink { to { opacity: 0.4; } }
#life .lf-food, #life .lf-bagfood > div { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgba(0, 0, 0, 0.3); }
#life .lf-food { background: rgba(142, 240, 122, 0.1); box-shadow: inset 0 0 0 1px rgba(142, 240, 122, 0.4); }
#life .lf-food img, #life .lf-bagfood img { width: 38px; height: 38px; object-fit: contain; flex: none; }
#life .lf-food span, #life .lf-bagfood span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#life .lf-food b, #life .lf-bagfood b { font: 700 13px Mali, sans-serif; color: #f6efdc; }
#life .lf-food small, #life .lf-bagfood small { font: 400 11.5px/1.4 Mali, sans-serif; color: #b9b1a0; }
#life .lf-bagfood { display: flex; flex-direction: column; gap: 5px; }
/* world events */
#life .lf-ev { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ec) 45%, transparent); }
#life .lf-ev.now { background: color-mix(in srgb, var(--ec) 14%, rgba(0, 0, 0, 0.3)); box-shadow: inset 0 0 0 2px var(--ec), 0 0 12px color-mix(in srgb, var(--ec) 40%, transparent); }
#life .lf-ev img { width: 46px; height: 46px; object-fit: contain; flex: none; }
#life .lf-ev .lf-an > b { color: var(--ec); }

/* the fishing minigame (bottom middle of the screen) */
#fishui { position: fixed; z-index: 940; left: 50%; bottom: 150px; transform: translateX(-50%); width: 400px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-radius: 16px;
  background: linear-gradient(#1f1a15, #120f0c); box-shadow: inset 0 0 0 2px #c99a3e, inset 0 0 0 4px #2a2017, 0 10px 30px rgba(0, 0, 0, 0.7); color: #f2ead6; font-family: Mali, sans-serif; }
#fishui .fu-head { display: flex; align-items: center; gap: 8px; }
#fishui .fu-head img { width: 34px; height: 34px; object-fit: contain; }
#fishui .fu-head b { font: 700 16px Mali, sans-serif; color: #f6dc98; }
#fishui .fu-head small { font: 600 12px Fredoka, sans-serif; color: #b9b1a0; }
#fishui .fu-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.08); color: #f2ead6; }
#fishui .fu-msg { min-height: 22px; text-align: center; font: 600 14px Mali, sans-serif; color: #d8cfb8; }
#fishui .fu-bite { color: #ffd76a; font-size: 17px; animation: lfBlink 0.25s ease-in-out infinite alternate; }
#fishui .fu-bar { position: relative; height: 34px; border-radius: 10px; background: linear-gradient(#0e2a3a, #0a1c28); box-shadow: inset 0 0 0 2px #c99a3e, inset 0 4px 10px rgba(0, 0, 0, 0.6); overflow: hidden; }
#fishui .fu-zone { position: absolute; top: 4px; bottom: 4px; border-radius: 7px; background: linear-gradient(rgba(142, 240, 122, 0.55), rgba(90, 200, 90, 0.4)); box-shadow: 0 0 10px rgba(142, 240, 122, 0.6); }
#fishui .fu-fish { position: absolute; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%); background: url(../assets/ui_life/reel_fish.png) center / contain no-repeat; filter: drop-shadow(0 0 4px #fff6c0); }
#fishui .fu-prog { height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5); overflow: hidden; }
#fishui .fu-prog i { display: block; height: 100%; background: linear-gradient(90deg, #ffd76a, #fff1c2); }
#fishui .fu-btn { height: 40px; border: 0; border-radius: 10px; cursor: pointer; background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; font: 800 15px Mali, sans-serif; box-shadow: 0 3px 0 #8a6420; touch-action: none; user-select: none; }
#fishui .fu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6420; }
#fishui .fu-tip { text-align: center; font: 400 11.5px/1.4 Mali, sans-serif; color: #9a927e; }

/* an achievement reached: a medal banner at the top */
.ach-pop { position: fixed; z-index: 960; left: 50%; bottom: 168px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; min-width: 340px; max-width: calc(100vw - 32px); padding: 10px 18px 10px 12px; border-radius: 14px;
  background: linear-gradient(#2a2117, #15110c); box-shadow: inset 0 0 0 2px #e8bd62, 0 0 24px rgba(232, 189, 98, 0.45), 0 10px 26px rgba(0, 0, 0, 0.6); pointer-events: none; animation: achIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.ach-pop img { width: 52px; height: 52px; object-fit: contain; flex: none; filter: drop-shadow(0 0 8px rgba(255, 215, 110, 0.8)); }
.ach-pop span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ach-pop em { font: 800 12px Mali, sans-serif; font-style: normal; color: #ffd76a; letter-spacing: 0.04em; }
.ach-pop b { font: 700 18px/1.2 Mali, sans-serif; color: #fff3cf; }
.ach-pop small { font: 500 12px/1.4 Mali, sans-serif; color: #c8c0aa; }
.ach-pop small i { font-style: normal; font-weight: 800; }
.ach-pop.r4 { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 34px rgba(255, 215, 110, 0.75), 0 10px 26px rgba(0, 0, 0, 0.6); }
.ach-pop.out { animation: achOut 0.45s ease-in forwards; }
@keyframes achIn { from { transform: translate(-50%, 30px) scale(0.85); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes achOut { to { transform: translate(-50%, -20px); opacity: 0; } }

/* the world event chip (under the top bar) and its start banner */
#wevchip { position: fixed; z-index: 880; left: 50%; top: 86px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: min(560px, calc(100vw - 32px)); padding: 4px 10px 4px 5px; border-radius: 12px; cursor: pointer;
  background: rgba(16, 13, 10, 0.86); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.55), 0 4px 12px rgba(0, 0, 0, 0.5); font-family: Mali, sans-serif; color: #f2ead6; }
#wevchip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
#wevchip span { display: flex; flex-direction: column; min-width: 0; }
#wevchip b { font: 700 13px/1.25 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wevchip small { font: 500 11px/1.35 Mali, sans-serif; color: #c8c0aa; }
#wevchip:not(.on) { opacity: 0.8; }
#wevchip:not(.on) b { color: #d8cfb8; }
#wevchip.on { box-shadow: inset 0 0 0 1.5px #f2c14e, 0 0 14px rgba(242, 193, 78, 0.45); }
#wevchip .we-go { flex: none; padding: 4px 10px; border: 0; border-radius: 8px; cursor: pointer; background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; font: 800 12px Mali, sans-serif; }
#wevchip .we-here { flex: none; font: 700 11.5px Mali, sans-serif; font-style: normal; color: #8be37b; }
.we-banner { position: fixed; z-index: 955; left: 50%; top: 210px; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); min-height: 112px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 70px;
  background: url(../assets/ui_life/ev_banner.png) center / 100% 100% no-repeat; pointer-events: none; animation: achIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.7)); }
.we-banner img { width: 64px; height: 64px; object-fit: contain; flex: none; }
.we-banner span { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.we-banner em { font: 800 12.5px Mali, sans-serif; font-style: normal; color: #ffd76a; }
.we-banner b { font: 700 21px/1.2 Mali, sans-serif; text-shadow: 0 2px 3px #000; }
.we-banner small { font: 500 12.5px/1.4 Mali, sans-serif; color: #e8e0cc; text-shadow: 0 1px 2px #000; }
.we-banner, .we-banner *, .ach-pop, .ach-pop * { pointer-events: none !important; }
#ui.book-open .we-banner { display: none; }
.we-banner.out { animation: achOut 0.5s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .ach-pop, .we-banner, #fishui .fu-bite, #life .lf-cooking { animation: none !important; } }
/* ---- the life window: clones of the #content / .bw-content rules (tools: scratchpad life_css_clone.py; re-run after changing them) */
#life .btn { color: var(--ink); }
#life .btn.primary { color: #fff; }
#life .tw-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
#life .tw-bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(40, 30, 60, 0.3); overflow: hidden; }
#life .tw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8fd3ff, #f2c14e); }
#life .tw-next { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(242, 193, 78, 0.14); border: 1px solid rgba(242, 193, 78, 0.4); }
#life .tw-next small { opacity: 0.8; }
#life .tw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#life .tw-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 99px; background: rgba(20, 16, 36, 0.35); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#life .tw-chip img { width: 20px; height: 20px; }
#life .tw-ladder { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#life .tw-step { display: grid; grid-template-columns: 66px 1fr 60px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: rgba(20, 16, 36, 0.18); }
#life .tw-step .tw-f { font-weight: 800; white-space: nowrap; }
#life .tw-step em { font-style: normal; font-size: 0.72rem; text-align: right; opacity: 0.85; }
#life .tw-step.got { opacity: 0.55; }
#life .tw-step.got em { color: #9be38a; opacity: 1; }
#life .tw-step.next { background: rgba(242, 193, 78, 0.2); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.6); }
#life .tw-step.next em { color: #ffd76a; font-weight: 700; }
#life .ct-eternal { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.45); }
#life .ct-et-cur { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
#life .ct-et-cur em { font-style: normal; font-weight: 700; }
#life .ct-et-cur em.ok { color: #9be37b; }
#life .ct-et-cur em.short { color: #ff9a9a; }
#life .ct-et-next { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.74rem; opacity: 0.75; }
#life .cl-head { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: inherit; }
#life .cl-prog { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#life .cl-prog b { font-size: 1.05rem; }
#life .cl-prog span b { color: #ffd76a; font-size: 1.1rem; }
#life .cl-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(242, 193, 78, 0.3); overflow-x: auto; }
#life .cl-tab { flex: 1; min-width: max-content; background: none; border: 0; border-bottom: 3px solid transparent; padding: 7px 12px; font: 700 0.9rem Mali, sans-serif; color: rgba(246, 238, 219, 0.6); cursor: pointer; }
#life .cl-tab.on { color: #ffd76a; border-bottom-color: #f2c14e; }
#life .cl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#life .cl-q { flex: 1; min-width: 150px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 78, 0.4); background: rgba(0, 0, 0, 0.3); color: inherit; font: inherit; font-size: 0.85rem; }
#life .cl-list { display: flex; flex-direction: column; gap: 8px; }
#life .cl-fav { background: none; border: 0; padding: 0 4px 0 0; font-size: 1.05rem; line-height: 1; color: rgba(246, 238, 219, 0.3); cursor: pointer; }
#life .cl-fav.on { color: #ffd76a; text-shadow: 0 0 6px rgba(255, 215, 106, 0.6); }
#life .cl-tier { font-style: normal; font-size: 0.72rem; color: rgba(246, 238, 219, 0.55); margin-left: 6px; }
#life .ct-coll .eco-cell { position: relative; }
#life .ct-coll .eco-cell:not(.picked) img { filter: grayscale(0.85) brightness(0.65); }
#life .ct-coll .eco-cell.ct-can:not(.picked) img { filter: none; }
#life .cl-mat { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: 0.56rem; font-weight: 700; color: #fff6dc; text-shadow: 0 1px 2px #000; }
#life .cl-next { opacity: 0.85; }
#ui .bw-life .eco-tabs { position: absolute; left: 228px; top: 194px; width: 516px; display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bw-life .eco-body { display: contents; }
#ui .bw-life .eco-main { position: absolute; left: 226px; top: 276px; width: 518px; height: 576px; overflow-y: auto; }
#ui .bw-life .eco-side { position: absolute; left: 812px; top: 196px; width: 492px; height: 656px; overflow-y: auto; }
#ui .bw-life .eco-main { top: 240px; height: 612px; }
#ui .bw-life .eco-gold { position: absolute; left: 1090px; top: 145px; }
#ui .bw-life .eco-tabs { left: 244px; width: 500px; }
#ui .bw-life .eco-main { left: 242px; width: 504px; }
#ui .bw-life .eco-side { left: 816px; width: 484px; }
/* ---- end of the life window clones */
/* book skins (js/bookskin.js, css/bookskins.css): the picker under "รูปแบบสมุด" in the settings page */
#ui .bw-pause #p-book::before { content: '❖'; }
#ui .bw-pause #p-book.open { filter: brightness(1.2); }
#ui .bw-pause .bk-skins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0 6px; }
#ui .bw-pause .bk-skins[hidden] { display: none; }
#ui .bw-pause .bk-skin { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 0; padding: 8px 4px 8px; border: 0 solid transparent; border-radius: 0; box-shadow: none;
  border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 10px stretch; background: none; color: #f2ead6; cursor: pointer; }
#ui .bw-pause .bk-skin img { width: 132px; height: 88px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)); }
#ui .bw-pause .bk-skin b { font: 700 15px/1.25 'Mali', sans-serif; white-space: nowrap; }
#ui .bw-pause .bk-skin small { font: 500 11px/1 'Fredoka', sans-serif; color: #b9b1a0; }
#ui .bw-pause .bk-skin.on { outline: 2px solid #ffd76a; outline-offset: -4px; box-shadow: 0 0 14px rgba(255, 215, 106, 0.45); }
#ui .bw-pause .bk-skin.on b { color: #ffd76a; }
#ui .bw-pause .bk-skin:hover:not(:disabled) { filter: brightness(1.18); }
#ui .bw-pause .bk-skin:disabled { opacity: 0.45; cursor: default; }

/* ---- system unlocks by level (2026-10-12, js/unlock.js): a locked system is grey with its level; reaching it shows a card */
#menupop .mp-item.lock { opacity: 0.55; filter: grayscale(0.8); }
#menupop .mp-item em.lock { background: rgba(0, 0, 0, 0.45); color: #d8cfb8; }
#ui .bk-stab.lock { filter: grayscale(0.9) brightness(0.8); }
#ui .bk-stab.lock span::after { content: ' 🔒'; }
#life .eco-tab.lock { opacity: 0.55; }
#life .eco-tab small { font: 600 10px Fredoka, sans-serif; }
.unlock-card { position: fixed; z-index: 970; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, calc(100vw - 32px)); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 22px 16px; border-radius: 18px; text-align: center;
  background: radial-gradient(circle at 50% 20%, #3a2c16, #15110c 70%); box-shadow: inset 0 0 0 2px #e8bd62, inset 0 0 0 5px #2a2017, 0 0 40px rgba(232, 189, 98, 0.5), 0 16px 40px rgba(0, 0, 0, 0.7); color: #f2ead6; font-family: Mali, sans-serif; animation: ulIn 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.unlock-card em { font: 800 13px Mali, sans-serif; font-style: normal; letter-spacing: 0.05em; color: #ffd76a; }
.unlock-card img { width: 86px; height: 86px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255, 215, 110, 0.8)); }
.unlock-card b { font: 700 24px/1.2 Mali, sans-serif; color: #fff3cf; }
.unlock-card span { font: 500 14px/1.45 Mali, sans-serif; color: #d8cfb8; }
.unlock-card small { font: 500 12.5px/1.4 Mali, sans-serif; color: #a8f09a; }
.unlock-card small i { font-style: normal; font-weight: 700; color: #fff3cf; }
.unlock-card div { display: flex; gap: 8px; margin-top: 6px; }
.unlock-card .btn { color: #2c2018; }
.unlock-card .btn.primary { color: #fff; }
.unlock-card.out { animation: ulOut 0.35s ease-in forwards; }
/* several systems opened together (js/unlock.js cards()): a row each, a row's click opens it */
.unlock-card.many { width: min(440px, calc(100vw - 32px)); }
.unlock-card.many ul { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.unlock-card.many li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; text-align: left; cursor: pointer; background: rgba(255, 228, 160, 0.07); box-shadow: inset 0 0 0 1px rgba(232, 189, 98, 0.35); }
.unlock-card.many li:hover, .unlock-card.many li:focus-visible { background: rgba(255, 228, 160, 0.16); outline: none; }
.unlock-card.many li img { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 215, 110, 0.6)); }
.unlock-card.many li span { display: flex; flex-direction: column; gap: 1px; color: #d8cfb8; }
.unlock-card.many li b { font: 700 16px/1.25 Mali, sans-serif; }
.unlock-card.many li small { font-size: 12px; color: #c9c0a8; }
@keyframes ulIn { from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
@keyframes ulOut { to { transform: translate(-50%, -50%) scale(0.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .unlock-card, .unlock-card.out { animation: none !important; } }
/* systems that open by level (js/unlock.js): greyed tiles and tabs with "🔒 Lv N" */
#ui .bw-pause .hub-tile.lock { cursor: default; }
#ui .bw-pause .hub-tile.lock img { filter: grayscale(1) brightness(0.55); }
#ui .bw-pause .hub-tile.lock span { color: #8d8576 !important; font-weight: 500; }
#ui .bw-pause .hub-tile.lock { gap: 8px; }
#ui .bw-pause .hub-tile.lock kbd { display: none; }
#ui .bw-pause .hub-tile .hub-badge.lockb { display: block; color: #d8b77a; font: 600 11px/1 'Fredoka', 'Mali', sans-serif; letter-spacing: -0.2px; white-space: nowrap; }
/* a long count ("+153") grows leftward over its own icon, never onto the name beside it */
#ui .bw-pause .hub-tile .hub-badge:not(.net) { left: 49px; transform: translateX(-100%); max-width: 46px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
#ui .bw-pause .hub-tile .hub-badge.net { transform: none; }
#ui .bw-pause .hub-tile.lock:hover { background: none !important; box-shadow: none !important; }
#ui :is(.eco-tab, .eco-pair button).locked { filter: grayscale(0.9) brightness(0.7); }
#ui .eco-lock { font: 600 0.72em/1 'Fredoka', 'Mali', sans-serif; font-style: normal; color: #f2d79a; white-space: nowrap; }
/* book effects (js/bookfx.js): one canvas over the open book's stage; it never takes a click */
#ui .bookwin .bkx > canvas.bkfx, #charpanel .bk > canvas.bkfx { position: absolute; left: 0; top: 0; width: 1536px; height: 1024px; z-index: 20; pointer-events: none !important; }
#ui .bw-pause #p-bookfx::before { content: '✧'; }
/* the ✧ square under the book's square tabs (js/bookfx.js): the book effects on / off */
:is(#ui .bookwin, #charpanel) .bk-fxsq span { font: 700 24px/1 'Fredoka', 'Mali', sans-serif; color: #f4ead0; text-shadow: 0 0 8px rgba(255, 230, 160, 0.85), 0 1px 0 rgba(0, 0, 0, 0.6); }
:is(#ui .bookwin, #charpanel) .bk-fxsq.off span { color: #8d8576; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
:is(#ui .bookwin, #charpanel) .bk-fxsq.off { filter: grayscale(0.8) brightness(0.8); }
:is(#ui .bookwin, #charpanel) .bk-fxsq:hover { filter: brightness(1.2); }
/* =====================================================================
   The forge (โรงตีเหล็ก, 2026-10-12, js/forge.js #forge). Rare and important things shine (the user: "สิ่งไหนหายากและ
   สำคัญให้ใส่เอฟเฟคด้วย"): item cells by grade (fxg3-5), masterwork / awakened overlays (fxcw1 / fxcw2, Codex frames
   assets/ui_forge), boss cores and the legend heart (fxm-core / fxm-heart), the rare-item banner and the result burst.
   ===================================================================== */
#forge .btn { color: var(--ink); }
#forge .btn.primary { color: #fff; }
#forge .fo-note { margin: 2px 0 8px; font: 400 12.5px/1.5 Mali, sans-serif; color: #b9b1a0; }
#forge .fo-row, #forge .fo-frow { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 6px 9px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px rgba(246, 238, 219, 0.08); color: #f2ead6; }
#forge .fo-row:hover { background: rgba(242, 193, 78, 0.08); }
#forge .fo-row.sel { background: rgba(242, 193, 78, 0.15); box-shadow: inset 0 0 0 1.5px #f2c14e; }
#forge .fo-ic { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 9px; background: rgba(0, 0, 0, 0.35); }
#forge .fo-ic img { width: 40px; height: 40px; object-fit: contain; }
#forge .fo-rn { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#forge .fo-rn b { font: 700 13.5px/1.25 Mali, sans-serif; }
#forge .fo-rn small { font: 500 11.5px/1.3 Mali, sans-serif; color: #b9b1a0; }
#forge .fo-fbtn { display: flex; gap: 5px; flex: none; }
#forge .fo-top { flex: none; font: 600 11.5px Mali, sans-serif; color: #ff8a9a; }
#forge .fo-stage { position: relative; height: 150px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 14px;
  background: radial-gradient(circle at 50% 60%, rgba(255, 170, 70, 0.22), transparent 62%), rgba(0, 0, 0, 0.25); }
#forge .fo-stage .fg-side { position: absolute; inset: 0; display: grid; place-items: center; }
#forge .fo-stage .fg-slot { position: relative; width: 104px; height: 104px; display: grid; place-items: center; border-radius: 16px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1.5px rgba(232, 189, 98, 0.45); }
#forge .fo-stage .fg-slot img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
#forge .fo-ring { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed rgba(255, 200, 110, 0.4); pointer-events: none; animation: foSpin 16s linear infinite; }
#forge .fo-stage.aw .fo-ring { border-color: rgba(255, 220, 130, 0.7); box-shadow: 0 0 18px rgba(255, 200, 90, 0.35); animation-duration: 8s; }
@keyframes foSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
#forge .fo-name { margin: 2px 0 6px; font: 700 16px/1.3 Mali, sans-serif; text-align: center; }
#forge .fo-name i { font-style: normal; color: #ffd76a; }
#forge .fo-cmp { display: flex; flex-direction: column; gap: 3px; }
#forge .fo-cmp div { display: grid; grid-template-columns: 1fr auto 16px auto; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); font: 500 12.5px Mali, sans-serif; }
#forge .fo-cmp span { color: #c8c0aa; }
#forge .fo-cmp b { font: 700 13px Fredoka, Mali, sans-serif; color: #e8e0cc; text-align: right; }
#forge .fo-cmp b.up { color: #8be37b; }
#forge .fo-cmp i { font-style: normal; color: #9a927e; text-align: center; }
#forge .fo-h { margin: 10px 0 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 14px Mali, sans-serif; color: #f6dc98; }
#forge .fo-h small { font: 500 11.5px Mali, sans-serif; color: #b9b1a0; }
#forge .fo-needs { display: flex; flex-wrap: wrap; gap: 4px; }
#forge .fo-need { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px 1px 2px; border-radius: 99px; background: rgba(232, 70, 58, 0.18); font: 600 11.5px/1.8 Mali, sans-serif; color: #ffb4a8; white-space: nowrap; }
#forge .fo-need.ok { background: rgba(142, 240, 122, 0.14); color: #a8f09a; }
#forge .fo-need img { width: 22px; height: 22px; object-fit: contain; }
#forge .fo-odds { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 4px; font: 500 12.5px Mali, sans-serif; color: #c8c0aa; }
#forge .fo-odds b { font: 700 14px Fredoka, Mali, sans-serif; color: #ffd76a; }
#forge .fo-odds i { font-style: normal; color: #8be37b; }
#forge .fo-check { display: flex; align-items: center; gap: 6px; margin: 4px 0; font: 500 12px Mali, sans-serif; color: #d8cfb8; }
#forge .fo-warn { margin: 6px 0; font: 400 11.5px/1.4 Mali, sans-serif; color: #ff9a8a; }
#forge .fo-go { width: 100%; height: 44px; margin-top: 4px; font: 800 15px Mali, sans-serif; }
#forge .fo-cores { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
#forge .fo-core { position: relative; min-width: 0; aspect-ratio: 1; padding: 3px; border: 0; border-radius: 9px; cursor: pointer; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(232, 189, 98, 0.3); }
#forge .fo-core img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
#forge .fo-core b { position: absolute; right: 2px; bottom: 0; font: 800 11px Fredoka, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
#forge .fo-core.none img { filter: grayscale(1) brightness(0.5); }
#forge .fo-core.on { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 215, 106, 0.6); }
#forge .fo-spec { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 10px; border-radius: 9px; background: rgba(255, 215, 106, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 215, 106, 0.4); }
#forge .fo-spec b { font: 700 13.5px Mali, sans-serif; color: #ffd76a; }
#forge .fo-spec span { font: 500 12.5px/1.45 Mali, sans-serif; color: #a8f09a; }
#forge .fo-spec small { font: 400 11.5px Mali, sans-serif; color: #b9b1a0; }
#forge .fo-sw { display: flex; gap: 4px; margin-bottom: 8px; }
#forge .fo-sw button { flex: 1; padding: 6px; border: 0; border-radius: 8px; cursor: pointer; background: rgba(0, 0, 0, 0.35); color: #c8c0aa; font: 700 12.5px Mali, sans-serif; }
#forge .fo-sw button.on { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; }
#forge .fo-lines { display: flex; flex-direction: column; gap: 4px; }
#forge .fo-line { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 9px; border: 0; border-radius: 8px; cursor: pointer; text-align: left; background: rgba(0, 0, 0, 0.3); color: #e8e0cc; font: 600 12.5px Mali, sans-serif; }
#forge .fo-line small { font: 400 11px Mali, sans-serif; color: #b9b1a0; }
#forge .fo-line.on { background: rgba(242, 193, 78, 0.16); box-shadow: inset 0 0 0 1.5px #f2c14e; }
#forge .fo-how { display: flex; flex-direction: column; gap: 4px; }
#forge .fo-how span { padding: 6px 9px; border-radius: 7px; background: rgba(0, 0, 0, 0.28); font: 500 12px/1.45 Mali, sans-serif; color: #d8cfb8; }

/* rare and important things shine: on any item cell that carries these classes (bag, gear, item card, the forge) */
.fxg3, .fxg4, .fxg5, .fxcw1, .fxcw2, .fxm-core, .fxm-heart { position: relative; isolation: isolate; }
.fxg3 { box-shadow: 0 0 0 1px rgba(194, 123, 255, 0.55), 0 0 8px rgba(194, 123, 255, 0.35) !important; }
.fxg4 { animation: fxGlow4 2s ease-in-out infinite; }
.fxg5 { animation: fxGlow5 1.4s ease-in-out infinite; }
@keyframes fxGlow4 { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 179, 64, 0.8), 0 0 8px rgba(255, 179, 64, 0.45); } 50% { box-shadow: 0 0 0 1.5px rgba(255, 210, 120, 1), 0 0 18px rgba(255, 179, 64, 0.9); } }
@keyframes fxGlow5 { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 90, 106, 0.9), 0 0 12px rgba(255, 90, 106, 0.55); } 50% { box-shadow: 0 0 0 2px rgba(255, 190, 200, 1), 0 0 26px rgba(255, 70, 90, 1), 0 0 40px rgba(255, 200, 120, 0.4); } }
.fxg4::before, .fxg5::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 200, 0.75) 50%, transparent 62%); background-size: 300% 100%; animation: fxSheen 3s ease-in-out infinite; }
.fxg5::before { background-image: linear-gradient(115deg, transparent 36%, rgba(255, 210, 220, 0.9) 50%, transparent 64%); animation-duration: 2.2s; }
@keyframes fxSheen { 0% { background-position: 120% 0; opacity: 0; } 10% { opacity: 1; } 45% { background-position: -20% 0; opacity: 1; } 50%, 100% { background-position: -20% 0; opacity: 0; } }
.fxcw1::after, .fxcw2::after { content: ''; position: absolute; inset: -6%; pointer-events: none; z-index: 3; background: center / 100% 100% no-repeat; }
.fxcw1::after { background-image: url(../assets/ui_forge/mw.png); }
.fxcw2::after { background-image: url(../assets/ui_forge/aw.png); animation: fxAw 6s linear infinite; }
@keyframes fxAw { 0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(255, 210, 110, 0.6)); } 50% { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 210, 110, 1)); } }
.fxm-core { animation: fxGlowCore 2.2s ease-in-out infinite; }
@keyframes fxGlowCore { 0%, 100% { box-shadow: 0 0 0 1.5px rgba(255, 215, 106, 0.7), 0 0 8px rgba(255, 215, 106, 0.4); } 50% { box-shadow: 0 0 0 1.5px #ffe7a6, 0 0 18px rgba(255, 215, 106, 0.9); } }
.fxm-heart { animation: fxBeat 1.1s ease-in-out infinite; }
@keyframes fxBeat { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 74, 106, 0.85), 0 0 10px rgba(255, 74, 106, 0.6); } 15% { box-shadow: 0 0 0 2px #ffd0da, 0 0 26px rgba(255, 74, 106, 1), 0 0 44px rgba(255, 200, 120, 0.5); } 30% { box-shadow: 0 0 0 2px rgba(255, 74, 106, 0.85), 0 0 12px rgba(255, 74, 106, 0.6); } 45% { box-shadow: 0 0 0 2px #ffd0da, 0 0 22px rgba(255, 74, 106, 0.9); } }

/* the rare-item banner (top middle) */
.fo-rare { position: fixed; z-index: 962; left: 50%; top: 150px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; min-width: 360px; max-width: calc(100vw - 32px); padding: 12px 22px 12px 14px; border-radius: 16px; pointer-events: none !important;
  background: radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 60%), linear-gradient(#2a2117, #120e0a);
  box-shadow: inset 0 0 0 2px var(--rc), 0 0 30px color-mix(in srgb, var(--rc) 55%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6); animation: foRareIn 0.55s cubic-bezier(.2, 1.5, .4, 1) both; overflow: hidden; }
.fo-rare * { pointer-events: none !important; }
.fo-rare img { position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 12px var(--rc)); animation: foBob 1.2s ease-in-out infinite; }
.fo-rare .fo-rays { position: absolute; left: 46px; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 70%, transparent) 0 8deg, transparent 8deg 24deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%); animation: foRays 6s linear infinite; }
.fo-rare span { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.fo-rare em { font: 800 12.5px Mali, sans-serif; font-style: normal; color: var(--rc); letter-spacing: 0.04em; }
.fo-rare b { font: 700 19px/1.2 Mali, sans-serif; color: #fff3cf; }
.fo-rare small { font: 500 12px Mali, sans-serif; color: #c8c0aa; }
.fo-rare.g5 { box-shadow: inset 0 0 0 2.5px var(--rc), 0 0 46px color-mix(in srgb, var(--rc) 80%, transparent), 0 12px 30px rgba(0, 0, 0, 0.6); }
.fo-rare.out { animation: foRareOut 0.5s ease-in forwards; }
@keyframes foRareIn { from { transform: translate(-50%, -24px) scale(0.8); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes foRareOut { to { transform: translate(-50%, -16px); opacity: 0; } }
@keyframes foRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes foBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* the result burst (when the grand forge animation is not available): rays, rings, a pillar, sparks, a plaque */
.fo-fx { position: fixed; inset: 0; z-index: 990; display: grid; place-items: center; pointer-events: none; }
.fo-fx > * { position: absolute; }
.fo-fx-dim { inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75)); animation: foFade 0.3s ease-out both; }
.fo-fx-rays { width: 120vmin; height: 120vmin; border-radius: 50%; opacity: 0.7; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--fc) 75%, transparent) 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%); animation: foRays 5s linear infinite, foPop 0.5s ease-out both; }
.fo-fx-ring { width: 46vmin; height: 46vmin; border-radius: 50%; border: 3px solid var(--fc); box-shadow: 0 0 30px var(--fc), inset 0 0 30px var(--fc); animation: foRing 1.2s ease-out both; }
.fo-fx-ring.r2 { animation-delay: 0.25s; }
.fo-fx-pillar { width: 18vmin; height: 140vh; background: linear-gradient(transparent, color-mix(in srgb, var(--fc) 60%, white), transparent); filter: blur(8px); opacity: 0; animation: foPillar 1.3s ease-out 0.1s both; }
.fo-fx-item { width: 22vmin; height: 22vmin; display: grid; place-items: center; animation: foItem 0.9s cubic-bezier(.2, 1.5, .4, 1) both; }
.fo-fx-item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 24px var(--fc)) drop-shadow(0 0 8px #fff); }
.fo-fx-plaque { top: calc(50% + 15vmin); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 30px; border-radius: 14px; background: linear-gradient(#2a2117, #120e0a);
  box-shadow: inset 0 0 0 2px var(--fc), 0 0 26px color-mix(in srgb, var(--fc) 60%, transparent); animation: foPlaque 0.6s cubic-bezier(.2, 1.4, .4, 1) 0.35s both; }
.fo-fx-plaque b { font: 800 clamp(20px, 3.2vmin, 32px)/1.2 Mali, sans-serif; color: #fff3cf; text-shadow: 0 0 12px var(--fc); white-space: nowrap; }
.fo-fx-plaque em { font: 800 clamp(26px, 5vmin, 54px)/1 Fredoka, sans-serif; font-style: normal; color: var(--fc); text-shadow: 0 0 16px var(--fc); }
.fo-fx-spark { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px var(--fc); animation: foSpark 1.4s ease-out both; }
.fo-fx-spark.s1 { --dx: -30vmin; --dy: -24vmin; } .fo-fx-spark.s2 { --dx: 28vmin; --dy: -26vmin; animation-delay: 0.1s; } .fo-fx-spark.s3 { --dx: -36vmin; --dy: 6vmin; animation-delay: 0.2s; }
.fo-fx-spark.s4 { --dx: 34vmin; --dy: 10vmin; animation-delay: 0.05s; } .fo-fx-spark.s5 { --dx: -12vmin; --dy: -36vmin; animation-delay: 0.15s; } .fo-fx-spark.s6 { --dx: 14vmin; --dy: -38vmin; animation-delay: 0.25s; }
.fo-fx.gr2 .fo-fx-rays, .fo-fx.gr3 .fo-fx-rays { opacity: 0.95; animation-duration: 3s, 0.5s; }
.fo-fx.gr3 .fo-fx-dim { background: radial-gradient(circle, color-mix(in srgb, var(--fc) 25%, rgba(0, 0, 0, 0.3)), rgba(0, 0, 0, 0.8)); }
.fo-fx.gr3 .fo-fx-item { animation: foItem 0.9s cubic-bezier(.2, 1.5, .4, 1) both, foShake 0.4s linear 0.1s 2; }
.fo-fx.fail .fo-fx-item img { filter: grayscale(0.7) brightness(0.7); }
.fo-fx.fail .fo-fx-item { animation: foShake 0.35s linear 2; }
.fo-fx-smoke { width: 40vmin; height: 40vmin; border-radius: 50%; background: radial-gradient(circle, rgba(140, 140, 150, 0.6), transparent 65%); animation: foSmoke 1.4s ease-out both; }
.fo-fx.out { animation: foFade 0.45s ease-in reverse forwards; }
.fo-fx.still * { animation: none !important; }
@keyframes foFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes foPop { from { transform: scale(0.3); } to { transform: scale(1); } }
@keyframes foRing { from { transform: scale(0.2); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes foPillar { 0% { opacity: 0; transform: scaleX(0.2); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.6); } }
@keyframes foItem { from { transform: scale(0.2) rotate(-20deg); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes foPlaque { from { transform: translateY(20px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes foSpark { 0% { transform: translate(0, 0) scale(1.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
@keyframes foShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes foSmoke { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fxg4, .fxg5, .fxcw2::after, .fxm-core, .fxm-heart, .fxg4::before, .fxg5::before, .fo-rare, .fo-rare img, .fo-rare .fo-rays, #forge .fo-ring { animation: none !important; } }
/* ---- the forge window: clones of the #content / .bw-content rules (scratchpad forge_css_apply.py; re-run after changing them) */
#forge .btn { color: var(--ink); }
#forge .btn.primary { color: #fff; }
#forge .tw-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
#forge .tw-bar { flex: 1; height: 10px; border-radius: 99px; background: rgba(40, 30, 60, 0.3); overflow: hidden; }
#forge .tw-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8fd3ff, #f2c14e); }
#forge .tw-next { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: rgba(242, 193, 78, 0.14); border: 1px solid rgba(242, 193, 78, 0.4); }
#forge .tw-next small { opacity: 0.8; }
#forge .tw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
#forge .tw-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 99px; background: rgba(20, 16, 36, 0.35); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
#forge .tw-chip img { width: 20px; height: 20px; }
#forge .tw-ladder { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#forge .tw-step { display: grid; grid-template-columns: 66px 1fr 60px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: rgba(20, 16, 36, 0.18); }
#forge .tw-step .tw-f { font-weight: 800; white-space: nowrap; }
#forge .tw-step em { font-style: normal; font-size: 0.72rem; text-align: right; opacity: 0.85; }
#forge .tw-step.got { opacity: 0.55; }
#forge .tw-step.got em { color: #9be38a; opacity: 1; }
#forge .tw-step.next { background: rgba(242, 193, 78, 0.2); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.6); }
#forge .tw-step.next em { color: #ffd76a; font-weight: 700; }
#forge .ct-eternal { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; border-radius: 14px; background: rgba(242, 193, 78, 0.12); border: 1px solid rgba(242, 193, 78, 0.45); }
#forge .ct-et-cur { display: flex; flex-direction: column; gap: 2px; font-size: 0.86rem; }
#forge .ct-et-cur em { font-style: normal; font-weight: 700; }
#forge .ct-et-cur em.ok { color: #9be37b; }
#forge .ct-et-cur em.short { color: #ff9a9a; }
#forge .ct-et-next { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.74rem; opacity: 0.75; }
#forge .cl-head { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; z-index: 2; padding-bottom: 8px; background: inherit; }
#forge .cl-prog { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#forge .cl-prog b { font-size: 1.05rem; }
#forge .cl-prog span b { color: #ffd76a; font-size: 1.1rem; }
#forge .cl-tabs { display: flex; gap: 2px; border-bottom: 1px solid rgba(242, 193, 78, 0.3); overflow-x: auto; }
#forge .cl-tab { flex: 1; min-width: max-content; background: none; border: 0; border-bottom: 3px solid transparent; padding: 7px 12px; font: 700 0.9rem Mali, sans-serif; color: rgba(246, 238, 219, 0.6); cursor: pointer; }
#forge .cl-tab.on { color: #ffd76a; border-bottom-color: #f2c14e; }
#forge .cl-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#forge .cl-q { flex: 1; min-width: 150px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 78, 0.4); background: rgba(0, 0, 0, 0.3); color: inherit; font: inherit; font-size: 0.85rem; }
#forge .cl-list { display: flex; flex-direction: column; gap: 8px; }
#forge .cl-fav { background: none; border: 0; padding: 0 4px 0 0; font-size: 1.05rem; line-height: 1; color: rgba(246, 238, 219, 0.3); cursor: pointer; }
#forge .cl-fav.on { color: #ffd76a; text-shadow: 0 0 6px rgba(255, 215, 106, 0.6); }
#forge .cl-tier { font-style: normal; font-size: 0.72rem; color: rgba(246, 238, 219, 0.55); margin-left: 6px; }
#forge .ct-coll .eco-cell { position: relative; }
#forge .ct-coll .eco-cell:not(.picked) img { filter: grayscale(0.85) brightness(0.65); }
#forge .ct-coll .eco-cell.ct-can:not(.picked) img { filter: none; }
#forge .cl-mat { position: absolute; left: 2px; top: 1px; font-style: normal; font-size: 0.56rem; font-weight: 700; color: #fff6dc; text-shadow: 0 1px 2px #000; }
#forge .cl-next { opacity: 0.85; }
#ui .bw-forge .eco-tabs { position: absolute; left: 228px; top: 194px; width: 516px; display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bw-forge .eco-body { display: contents; }
#ui .bw-forge .eco-main { position: absolute; left: 226px; top: 276px; width: 518px; height: 576px; overflow-y: auto; }
#ui .bw-forge .eco-side { position: absolute; left: 812px; top: 196px; width: 492px; height: 656px; overflow-y: auto; }
#ui .bw-forge .eco-main { top: 240px; height: 612px; }
#ui .bw-forge .eco-gold { position: absolute; left: 1090px; top: 145px; }
#ui .bw-forge .eco-tabs { left: 244px; width: 500px; }
#ui .bw-forge .eco-main { left: 242px; width: 504px; }
#ui .bw-forge .eco-side { left: 816px; width: 484px; }
/* ---- end of the forge window clones */

/* ---- the craft page's materials lead to their sources (2026-10-12, js/craft.js cr-srcrow: a click opens "หาได้จาก" below) */
#eco .cr-need .cr-srcrow { cursor: pointer; border-radius: 8px; transition: background 0.12s; }
#eco .cr-need .cr-srcrow:hover { background: rgba(242, 193, 78, 0.12); }
#eco .cr-need .cr-srcrow.open { background: rgba(242, 193, 78, 0.16); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.5); }
#eco .cr-need .cr-srchint { margin-left: 8px; font: 600 11px Mali, sans-serif; font-style: normal; color: #d9a443; }
#eco .cr-need .cr-srcrow.short .cr-srchint { color: #ffb4a8; }
#eco .cr-need .cr-srcbox { display: block; padding: 2px 0 6px; background: none; }
#eco .cr-need .cr-srcbox .eco-src { margin: 0; }
#forge button.fo-need { border: 0; cursor: pointer; font: 600 11.5px/1.8 Mali, sans-serif; }
#forge button.fo-need:hover { filter: brightness(1.25); }
#forge .fo-need i { margin-left: 4px; font-style: normal; opacity: 0.85; }
#forge .fo-need.open { box-shadow: inset 0 0 0 1.5px #f2c14e; }
#forge .fo-srcbox { margin-top: 6px; }
#forge .fo-srcbox .eco-src { margin: 0; }

/* =====================================================================
   The craft page in MIR4's workshop layout (2026-10-12, mockup B ref/craft_ui/mock_b.png; js/craft.js Craft.tabHtml).
   Painted scene layers and UI parts; scoped to the craft spread so the book and other pages keep their layout.
   ===================================================================== */
#ui #eco .eco-main:has(.cw-left), #ui #eco .eco-side:has(.cw-right) { overflow: visible; gap: 0; }
#eco .cw-page { position: relative; width: 100%; height: 648px; color: #fff1c2; }
#eco .cw-left { display: flex; flex-direction: column; gap: 8px; }
#eco .cw-top { display: flex; align-items: center; gap: 10px; height: 66px; padding: 0 8px 8px; border-bottom: 1px solid #b98c30; }
#eco .cw-top > img { width: 59px; height: 59px; object-fit: contain; filter: drop-shadow(0 2px 4px #000); }
#eco .cw-lv { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 30px 19px; align-items: center; column-gap: 12px; }
#eco .cw-lv b { font: 800 19px/1.2 Mali, sans-serif; white-space: nowrap; }
#eco .cw-lv small { grid-column: 1 / -1; font: 600 14px/1 Fredoka, Mali, sans-serif; color: #fff; }
#eco .cw-xp { height: 17px; padding: 3px; background: var(--uib-bar_track, url(../assets/ui_book/bar_track.png)) center / 100% 100% no-repeat; }
#eco .cw-xp i { display: block; height: 100%; background: var(--uib-bar_gold, url(../assets/ui_book/bar_gold.png)) left center / 100% 100% no-repeat; }
#eco .cw-body { display: grid; grid-template-columns: 142px minmax(0, 1fr); gap: 10px; height: 528px; }
#eco .cw-cats { display: flex; flex-direction: column; gap: 4px; padding-top: 1px; }
#eco .cw-cat { width: 100%; height: 68px; display: flex; align-items: center; gap: 6px; padding: 7px 8px; border: 0 solid transparent; background: none; cursor: pointer; color: #fff1d2;
  border-image: var(--uib-tab_off, url(../assets/ui_book/tab_off.png)) 22 fill / 9px stretch; font: 700 15px/1.2 Mali, sans-serif; text-align: left; }
#eco .cw-cat img { width: 46px; height: 46px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
#eco .cw-cat span { white-space: nowrap; }
#eco .cw-cat[data-v="acc"] { font-size: 12px; }
#eco .cw-cat.on { border-image-source: var(--uib-tab_on, url(../assets/ui_book/tab_on.png)); color: #241700; font-weight: 800; filter: drop-shadow(0 0 4px #b67a28); }
#eco .cw-cat:hover, #eco .cw-set:hover { filter: brightness(1.15); }
#eco .cw-listwrap { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
#eco .cw-sets { height: 34px; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
#eco .cw-sets > span { margin-right: 4px; font: 700 15px Mali, sans-serif; }
#eco .cw-set { width: 32px; height: 29px; border: 0 solid transparent; background: none; cursor: pointer; color: #fff; font: 700 16px Fredoka, sans-serif;
  border-image: var(--uib-tab_off, url(../assets/ui_book/tab_off.png)) 22 fill / 8px stretch; }
#eco .cw-set.on { border-image-source: var(--uib-tab_on, url(../assets/ui_book/tab_on.png)); color: #271900; filter: drop-shadow(0 0 5px #ffca50); }
#eco .cw-set.lock { color: #c8b98c; }
#eco .cw-list { display: flex; flex-direction: column; gap: 5px; }
#eco .cw-row { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) 85px 14px; align-items: center; gap: 6px; width: 100%; height: 76px; padding: 6px 8px; border: 0 solid transparent; background: none; text-align: left; cursor: pointer;
  border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 7px stretch; }
#eco .cw-row.sel { border-image: none; background: url(../assets/ui_craft/row_sel.png) center / 100% 100% no-repeat; animation: cwRowGlow 3.2s ease-in-out infinite; }
#eco .cw-row:hover { filter: brightness(1.16); }
#eco .cw-ic { position: relative; width: 66px; height: 66px; display: grid; place-items: center; background: var(--uib-slot_g0, url(../assets/ui_book/slot_g0.png)) center / 100% 100% no-repeat; }
#eco .cw-ic.g1 { background-image: var(--uib-slot_g1, url(../assets/ui_book/slot_g1.png)); }
#eco .cw-ic.g2 { background-image: var(--uib-slot_g2, url(../assets/ui_book/slot_g2.png)); }
#eco .cw-ic.g3 { background-image: var(--uib-slot_g3, url(../assets/ui_book/slot_g3.png)); }
#eco .cw-ic.g4 { background-image: var(--uib-slot_g4, url(../assets/ui_book/slot_g4.png)); }
#eco .cw-ic.g5 { background-image: var(--uib-slot_g5, url(../assets/ui_book/slot_g5.png)); }
#eco .cw-ic img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
#eco .cw-dot { position: absolute; top: -3px; right: 2px; font: 800 22px/1 sans-serif; font-style: normal; color: #ff2751; text-shadow: 0 -1px 1px #fff, 0 0 5px #ff2845; }
#eco .cw-rn { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
#eco .cw-rn b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 16px/1.25 Mali, sans-serif; color: #fff2d6; }
/* (a long name gets two lines and a smaller size instead of being cut with …: the user asked for no text too big for its place) */
#eco .cw-rn b.long, #eco .cw-rn b.xlong { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.15; }
#eco .cw-rn b.xlong { font-size: 12.5px; }
#eco .cw-list .cw-row.sel .cw-rn b { color: #a6c0ff; text-shadow: 0 0 6px #426aff; }   /* (.cw-list: outweighs booklight's page-ink name colour; the selected row is dark in every skin) */
#eco .cw-pill { padding: 1px 9px; border: 1px solid var(--pc); border-radius: 12px; background: #121c2bc9; color: var(--pc); font: 600 12px/1.4 Mali, sans-serif; font-style: normal; white-space: nowrap; }
#eco .cw-st { font: 700 13px/1.3 Mali, sans-serif; font-style: normal; text-align: right; color: #ff6c60; white-space: nowrap; }
#eco .cw-row.ok .cw-st { color: #79f476; }
#eco .cw-row.locked .cw-st { color: #f0b982; }
#eco .cw-go { color: #ffd273; font: 600 30px/1 Fredoka, sans-serif; font-style: normal; }
#eco .cw-listfoot { height: 32px; display: flex; align-items: center; gap: 8px; }
#eco .cw-legend { width: 142px; text-align: center; font: 600 14px Mali, sans-serif; }
#eco .cw-legend .cw-dot { position: static; vertical-align: -2px; }
#eco .cw-paging { flex: 1; display: flex; justify-content: center; align-items: center; gap: 22px; }
#eco .cw-paging button { width: 32px; height: 32px; padding: 0; border: 0; background: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) center / 100% 100% no-repeat; color: #281a03; font: 700 32px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .cw-paging b { color: #fff; font: 600 15px Fredoka, sans-serif; }
#eco .cw-paging button:disabled { opacity: 1; filter: grayscale(1) brightness(1.15); cursor: default; }   /* (the plate greys, the arrow stays solid: a faded arrow blended in) */
#eco .cw-service { position: absolute; bottom: 0; right: 0; }
#eco .cw-page button:focus-visible, #eco .cw-cat2 input:focus-visible { outline: 2px solid #ffe395; outline-offset: 2px; }
/* Right page: the showcase and odds above, materials and source / actions below. */
#eco .cw-right { display: flex; flex-direction: column; }
#eco .cw-overview { display: grid; grid-template-columns: 226px minmax(0, 1fr); gap: 8px; height: 268px; flex: none; }
#eco .cw-show { position: relative; height: 268px; isolation: isolate; background: url(../assets/ui_craft/show_bg.png) center / cover no-repeat; mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 85%, transparent), linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
#eco .cw-info { position: absolute; top: 4px; left: 84px; right: 1px; z-index: 5; display: flex; flex-direction: column; gap: 2px; }
#eco .cw-name { color: #c6d1ff; font: 800 21px/1.2 Mali, sans-serif; text-shadow: 0 0 2px #fff, 0 0 6px #514aff, 0 0 14px #514aff; overflow-wrap: anywhere; }
#eco .cw-info small { color: #fff1bf; font: 600 12px/1.4 Mali, sans-serif; text-shadow: 0 2px 3px #000; }
#eco .cw-pedestal { position: absolute; width: 226px; height: 113px; left: 0; bottom: -3px; z-index: 1; object-fit: contain; }
#eco .cw-circleplane { position: absolute; left: 24px; bottom: 26px; width: 180px; height: 180px; transform: scaleY(.30); transform-origin: center bottom; z-index: 2; pointer-events: none; }
#eco .cw-circle { width: 100%; height: 100%; object-fit: contain; animation: cwSpin 24s linear infinite; filter: drop-shadow(0 0 5px #ab7aff); }
#eco .cw-sparkle { position: absolute; width: 200px; height: 228px; left: 14px; top: 30px; object-fit: cover; mix-blend-mode: screen; z-index: 4; pointer-events: none; animation: cwTwinkle 3.8s ease-in-out infinite; }
#eco .cw-item { position: absolute; width: 180px; height: 180px; object-fit: contain; left: 24px; bottom: 50px; z-index: 3; filter: drop-shadow(0 0 6px #787bff) drop-shadow(0 0 15px #7063e3); animation: cwFloat 3.4s ease-in-out infinite; }
#eco .cw-summary { min-width: 0; position: relative; padding-top: 12px; }
#eco .cw-stats { height: 128px; display: grid; grid-template-columns: 1fr 1fr; background: url(../assets/ui_craft/slot.png) center / 118% 120% no-repeat; padding: 3px; }
#eco .cw-stats > div { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr); grid-template-rows: 23px 24px; column-gap: 4px; align-content: center; padding: 3px 4px; }
#eco .cw-stats > div:nth-child(odd) { border-right: 1px solid #9c751e; }
#eco .cw-stats > div:nth-child(-n+2) { border-bottom: 1px solid #9c751e; }
#eco .cw-stats img { grid-row: 1 / 3; align-self: center; width: 30px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
#eco .cw-stats span { align-self: end; white-space: nowrap; color: #f8f1e7; font: 600 13px/1.3 Mali, sans-serif; }
#eco .cw-stats b { font: 700 19px/1.2 Fredoka, Mali, sans-serif; color: #fff; }
#eco .cw-trait { max-height: 34px; padding-top: 4px; color: #d8c991; font: 500 11px/1.3 Mali, sans-serif; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }   /* (two lines instead of a cut: the text check) */
#eco .cw-odds { position: absolute; left: 0; right: 0; bottom: 9px; }
#eco .cw-h { margin: 0; color: #ffecae; font: 700 17px/1.5 Mali, sans-serif; }
#eco .cw-odds .cw-h { font-size: 15px; white-space: nowrap; margin-bottom: 5px; }
#eco .cw-bar { height: 25px; display: flex; padding: 4px; background: var(--uib-bar_track, url(../assets/ui_book/bar_track.png)) center / 100% 100% no-repeat; border-radius: 18px; overflow: hidden; }
#eco .cw-bar i { min-width: 2px; background: linear-gradient(#ffffff45, transparent), var(--gc); border-right: 1px solid #121212; }
#eco .cw-bar i:first-child { border-radius: 9px 0 0 9px; }
#eco .cw-bar i:last-child { border-radius: 0 9px 9px 0; border: 0; }
#eco .cw-oddl { display: flex; justify-content: space-between; gap: 3px; margin-top: 4px; }
#eco .cw-oddl span { display: flex; flex-direction: column; align-items: center; font: 700 10px/1.4 Mali, sans-serif; }
#eco .cw-oddl b { font: 600 14px/1.1 Fredoka, sans-serif; color: #fff; }
#eco .cw-oddl span > i { font-style: normal; }
/* light book skins: the grade names keep their grade colour on a small dark tag, like the grade pills elsewhere */
:root[data-booklight] #eco .cw-oddl span > i { padding: 0 5px; border-radius: 7px; background: rgba(38, 24, 12, 0.86); text-shadow: none !important; }
#eco .cw-mathead { height: 29px; flex: none; }
#eco .cw-lower { flex: 1; min-height: 0; display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 9px; }
#eco .cw-slots { display: grid; grid-template-columns: repeat(2, 104px); grid-auto-rows: 105px; align-content: start; gap: 5px 6px; }
#eco .cw-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 104px; height: 105px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
#eco .cw-slotart { position: relative; width: 104px; height: 85px; flex: none; background: url(../assets/ui_craft/slot.png) center / 118% 120% no-repeat; }
#eco .cw-slot.on .cw-slotart { background-image: url(../assets/ui_craft/slot_on.png); filter: drop-shadow(0 0 4px #f6c34b77); }
#eco .cw-slotart > img:not(.cw-mag) { width: 82px; height: 74px; object-fit: contain; padding: 4px; margin: 4px 10px; }
#eco .cw-slot .cw-mag { position: absolute; right: 6px; top: 5px; width: 24px; height: 24px; padding: 0; }
#eco .cw-slotart b { position: absolute; bottom: 7px; right: 9px; color: #fff; font: 700 18px/1 Fredoka, sans-serif; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
#eco .cw-slot.short b { color: #ff5259; }
#eco .cw-matname { max-width: 104px; font: 600 11px/1.3 Mali, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eco .cw-slot:hover .cw-slotart { filter: brightness(1.18); }
#eco .cw-controls { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
#eco .cw-srcbox { position: relative; flex: 1; min-height: 120px; max-height: 175px; padding: 12px 14px; border: 0 solid transparent; border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 8px stretch; }
/* Crop the painted pointer from the source panel; its position follows the selected material's row. */
#eco .cw-srcbox::before { content: ''; position: absolute; left: -21px; top: calc(var(--source-row) * 110px + 24px); width: 24px; height: 36px; background: url(../assets/ui_craft/source_frame.png) 0 -44px / 267px 175px no-repeat; pointer-events: none; }
#eco .cw-srcbox > b { display: block; font: 800 18px/1.4 Mali, sans-serif; color: #ffe391; margin-bottom: 3px; }
#eco .cw-sources { max-height: 109px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bf9437 #161616; }
#eco .cw-source { width: 100%; display: flex; align-items: center; gap: 7px; border: 0; padding: 4px 1px; background: none; color: #fff; cursor: pointer; text-align: left; font: 600 12px/1.3 Mali, sans-serif; }
#eco .cw-source > span:nth-child(2) { min-width: 0; flex: 1; }
#eco .cw-bullet { font: 600 13px/1 sans-serif; color: #e4bc59; text-shadow: 0 -1px 1px #ffebb0; }
#eco .cw-source em { flex: none; color: #241700; font: 700 11px/1.3 Mali, sans-serif; font-style: normal; padding: 3px 7px; background: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) center / 100% 100% no-repeat; }
#eco .cw-source:hover { color: #ffe194; }
#eco .cw-source:disabled { cursor: default; }
#eco .cw-cost { margin-top: auto; display: flex; align-items: center; gap: 6px; min-height: 34px; }
#eco .cw-gold { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 34px; padding: 2px 4px; color: #fff0b3; white-space: nowrap; font: 700 17px/1 Fredoka, sans-serif; border: 0 solid transparent;
  border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 6px stretch; }
#eco .cw-gold img { width: 25px; height: 25px; object-fit: contain; }
#eco .cw-gold.short { color: #ff6665; }
#eco .cw-cat2 { display: flex; align-items: center; gap: 3px; white-space: nowrap; font: 600 11px/1.2 Mali, sans-serif; cursor: pointer; }
#eco .cw-cat2 input { width: 19px; height: 19px; accent-color: #ecc64e; cursor: pointer; margin: 0 2px 0 0; }
#eco .cw-act { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 3px; min-height: 108px; align-items: start; }
#eco .cw-adjust { min-width: 0; padding-top: 6px; }
#eco .cw-qty { display: flex; align-items: center; gap: 3px; }
#eco .cw-qty button { flex: none; width: 25px; height: 36px; padding: 0; border: 0 solid transparent; cursor: pointer; background: none; color: #3a2410; font: 700 22px/1 Fredoka, sans-serif;
  border-image: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) 24 fill / 6px stretch; }
#eco .cw-qty b { width: 31px; height: 36px; flex: none; display: grid; place-items: center; color: #fff; font: 700 19px Fredoka, sans-serif; border: 0 solid transparent;
  border-image: var(--uib-frame_row, url(../assets/ui_book/frame_row.png)) 24 fill / 6px stretch; }
#eco .cw-qty .cw-max { flex: 1; min-width: 35px; font: 700 10px Mali, sans-serif; color: #372309; }
#eco .cw-qty button:disabled { cursor: default; }
#eco .cw-great { display: block; margin-top: 10px; color: #7df878; white-space: nowrap; font: 700 12px/1.5 Mali, sans-serif; }
#eco .cw-great b { font: 700 14px Fredoka, sans-serif; }
#eco .cw-craft { position: relative; width: 112px; height: 108px; padding: 0; border: 0; background: url(../assets/ui_craft/btn_craft.png) center / 100% 100% no-repeat; cursor: pointer; animation: cwButtonGlow 3s ease-in-out infinite; }
#eco .cw-craft span { position: absolute; left: 10px; right: 8px; bottom: 20px; color: #241700; font: 800 20px/1.2 Mali, sans-serif; }
#eco .cw-craft:disabled { cursor: default; }
#eco .cw-craft:hover:not(:disabled) { filter: brightness(1.15) drop-shadow(0 0 8px #ffc55e); }
#eco .cw-prog { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font: 600 11px Mali, sans-serif; }
#eco .cw-prog .cr-bar { width: 100%; height: 13px; margin: 0; }
#eco .cw-prog .btn { align-self: start; padding: 3px 8px; font-size: 11px; }
#eco .cw-results { position: relative; margin: 0; padding: 0; color: #ffe39b; font: 600 11px Mali, sans-serif; }
#eco .cw-results summary { cursor: pointer; }
#eco .cw-results > div { position: absolute; bottom: 20px; right: 0; z-index: 8; padding: 5px; background: #171717; max-width: 240px; display: flex; flex-wrap: wrap; }
#eco .cw-results .cr-ri { width: 38px; height: 38px; }
#eco .cw-desc { height: 145px; padding: 12px; border: 0 solid transparent; border-image: var(--uib-stage_frame, url(../assets/ui_book/stage_frame.png)) 40 fill / 12px stretch; font: 600 13px/1.5 Mali, sans-serif; color: #eee5d0; }
#eco .cw-desc b { color: #ffe39b; font-size: 17px; }
#eco .cw-desc p { margin: 8px 0; }
#eco .cw-desc small { font-size: 11px; }
#eco .cw-consumeinfo { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; font: 600 12px Mali, sans-serif; color: #e9dcc2; }
#eco .cw-consumeinfo b { color: #8bea80; }
#eco .cw-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 140px 30px; color: #efe5ca; text-align: center; font: 600 15px/1.5 Mali, sans-serif; }
#eco .cw-empty img { width: 100px; height: 100px; object-fit: contain; }
@keyframes cwSpin { to { transform: rotate(360deg); } }
@keyframes cwFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cwTwinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes cwRowGlow { 0%, 100% { filter: drop-shadow(0 0 2px #ffd26055); } 50% { filter: drop-shadow(0 0 6px #ffd26099); } }
@keyframes cwButtonGlow { 0%, 100% { filter: drop-shadow(0 0 3px #ffd26044); } 50% { filter: drop-shadow(0 0 7px #ffd26099); } }
@media (prefers-reduced-motion: reduce) { #eco .cw-circle, #eco .cw-item, #eco .cw-sparkle, #eco .cw-row.sel, #eco .cw-craft { animation: none; } }

/* the skill tree's bar slots (K, "ช่องสกิลที่ใช้งาน") in the HUD's own gold slot frames, so they stand out clearly on the
   light book page (2026-10-12, the user: "ปรับแก้ให้มีกรอบชัดหน่อย"); the glows follow the shield shape (filter, not box) */
#tree .equip-row { gap: 12px; padding-top: 4px; }
#tree .equip-row .eq { width: 64px; height: 69px; border: 0; border-radius: 0; background: url(../assets/ui_book/hud_skill_slot.png) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 4px rgba(20, 16, 40, 0.4)); }
#tree .equip-row .eq.ult { width: 70px; height: 74px; background-image: url(../assets/ui_book/hud_ult_slot.png); }
#tree .equip-row .eq canvas { width: 46px; height: 46px; margin-top: -7px; }
#tree .equip-row .eq .key { top: -10px; min-width: 24px; padding: 1px 8px; border: 0; border-radius: 0; color: #3b2410; text-align: center;
  background: url(../assets/ui_book/hud_key.png) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
#tree .equip-row .eq.target { animation: eqGlow 1s ease-in-out infinite; }
#tree .equip-row .eq.drop-ok { box-shadow: none; filter: drop-shadow(0 0 5px rgba(242, 201, 76, 0.95)); }
#tree .equip-row .eq.drop-hover { box-shadow: none; filter: drop-shadow(0 0 9px rgba(255, 214, 90, 1)) brightness(1.12); }
#tree .equip-row .eq:hover { filter: drop-shadow(0 3px 4px rgba(20, 16, 40, 0.4)) brightness(1.1); }
@keyframes eqGlow { 0%, 100% { filter: drop-shadow(0 3px 4px rgba(20, 16, 40, 0.4)); } 50% { filter: drop-shadow(0 0 8px rgba(242, 201, 76, 0.95)); } }
@media (prefers-reduced-motion: reduce) { #tree .equip-row .eq.target { animation: none; } }

/* skill book: the passive skills moved to the right page under the active skills and the ultimate (2026-10-12, the user:
   "ย้ายสกิลติดตัวไปไว้ด้านขวา (ด้านเดียวกับสกิลกดใช้)"): the right page is one column again (head, actives, ultimate,
   passives; it scrolls if a line is long), the skill bar moves up on the left page under the class tabs */
#ui .bw-tree .tree-wrap { display: block; }
#ui .bw-tree .tree-page { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0 2px; }
#ui .bw-tree .tree-page .tp-row { gap: 10px; }
#ui .bw-tree .tree-page > :is(.tp-head, .tp-active, .tp-ultimate, .tp-passive) { position: static; left: auto; top: auto; width: auto; }
#ui .bw-tree .tree-page > .tp-head { margin-bottom: 4px; }
#ui .bw-tree .tree-foot { top: 540px; height: 180px; }

/* the world event as an icon beside the minimap + its card (js/worldevents.js, 2026-10-12, the user: "ให้เอาไว้ด้านข้าง
   มินิแมพ เป็นสัญลักษณ์ กดดูและกดเข้ากดออกได้"); the old #wevchip under the top bar is gone */
#wevicon { position: fixed; z-index: 880; width: 54px; height: 54px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center;
  background: url(../assets/ui_book/hud_item_slot.png) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); transition: transform 0.12s; }
#wevicon img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
#wevicon .we-time { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: rgba(16, 13, 10, 0.92); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.7); color: #ffe7a6; font: 800 10.5px/1.25 Fredoka, sans-serif; }
#wevicon:hover { transform: scale(1.08); }
#wevicon.on { animation: weCall 1.6s ease-in-out infinite; }
#wevicon.on.here .we-time { color: #9bf08a; }
#wevicon.next { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)) saturate(0.55) brightness(0.85); }
#wevicon.next .we-time { color: #d8cfb8; }
#wevicon.open { transform: scale(1.06); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--wc, #f2c14e) 85%, transparent)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); animation: none; }
#wevicon.on::after { content: ''; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: #ff5a4a; box-shadow: 0 0 0 2px #2a1408, 0 0 8px #ff7a5a; }
@keyframes weCall { 0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wc, #f2c14e) 60%, transparent)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); }
  50% { filter: drop-shadow(0 0 10px var(--wc, #f2c14e)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6)); } }
#wevcard { position: fixed; z-index: 881; width: 320px; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; border-radius: 14px; font-family: Mali, sans-serif; color: #f2ead6;
  background: linear-gradient(rgba(26, 20, 14, 0.96), rgba(14, 11, 8, 0.96)); box-shadow: inset 0 0 0 1.5px #c99a3c, inset 0 0 0 3px rgba(0, 0, 0, 0.6), 0 8px 22px rgba(0, 0, 0, 0.6);
  animation: weCard 0.18s ease-out; }
@keyframes weCard { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
#wevcard .we-x { position: absolute; right: 8px; top: 6px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; cursor: pointer; background: rgba(255, 255, 255, 0.08); color: #e9dfc6; font: 700 13px/24px sans-serif; }
#wevcard .we-x:hover { background: rgba(255, 255, 255, 0.18); }
#wevcard .we-top { display: flex; align-items: center; gap: 10px; padding-right: 24px; }
#wevcard .we-top img { width: 52px; height: 52px; object-fit: contain; flex: none; }
#wevcard .we-top span { display: flex; flex-direction: column; min-width: 0; }
#wevcard .we-top em { font: 700 11px/1.3 Mali, sans-serif; font-style: normal; color: #ffd76a; }
#wevcard .we-top b { font: 800 17px/1.25 Mali, sans-serif; text-shadow: 0 1px 2px #000; }
#wevcard .we-top small { font: 600 12px/1.3 Mali, sans-serif; color: #d8cfb8; }
#wevcard .we-gain { margin: 0; padding: 7px 9px; border-radius: 8px; background: rgba(242, 193, 78, 0.1); box-shadow: inset 0 0 0 1px rgba(242, 193, 78, 0.25); font: 600 12.5px/1.45 Mali, sans-serif; color: #f2ead6; }
#wevcard .we-btns { display: flex; align-items: center; gap: 8px; }
#wevcard .we-go, #wevcard .we-all { flex: 1; min-height: 32px; padding: 0 10px; border: 0; border-radius: 9px; cursor: pointer; font: 800 13px Mali, sans-serif; }
#wevcard .we-go { background: linear-gradient(#f6d27a, #d9a443); color: #2c2018; box-shadow: 0 2px 0 #7a5418; }
#wevcard .we-all { background: rgba(255, 255, 255, 0.1); color: #f2ead6; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.5); }
#wevcard .we-go:hover, #wevcard .we-all:hover { filter: brightness(1.12); }
#wevcard .we-here { flex: 1; font: 700 12.5px Mali, sans-serif; font-style: normal; color: #8be37b; }
@media (prefers-reduced-motion: reduce) { #wevicon.on, #wevcard { animation: none; } }

/* the colour inside every item frame follows its grade everywhere (2026-10-12, the user: "แก้ไขสีพื้นหลังที่ไม่ตรงกับเทียร์
   ทำให้สับสน"): the item page's big frame (.eco-iframe) still showed the slot picture's own navy inside a green / blue / gold
   frame, and materials (no grade) had that navy too and read as a blue grade. Now the big frame gets the same deep grade
   tile as the bag's cells, and materials a plain neutral slate one */
#ui .bookwin .eco-ihead .eco-iframe { --t1: #4b5058; --t2: #1b1d22; --tl: rgba(220, 225, 235, 0.16); }
#ui .bookwin .eco-ihead.g0 .eco-iframe { --t1: #7d776a; --t2: #2e2a24; --tl: rgba(230, 225, 210, 0.22); }
#ui .bookwin .eco-ihead.g1 .eco-iframe { --t1: #2a8a3e; --t2: #0a2e15; --tl: rgba(140, 240, 150, 0.25); }
#ui .bookwin .eco-ihead.g2 .eco-iframe { --t1: #2662bc; --t2: #091f50; --tl: rgba(130, 190, 255, 0.28); }
#ui .bookwin .eco-ihead.g3 .eco-iframe { --t1: #6e38b8; --t2: #22094a; --tl: rgba(205, 160, 255, 0.28); }
#ui .bookwin .eco-ihead.g4 .eco-iframe { --t1: #b56a14; --t2: #401c03; --tl: rgba(255, 210, 120, 0.3); }
#ui .bookwin .eco-ihead.g5 .eco-iframe { --t1: #b0243a; --t2: #3a040e; --tl: rgba(255, 150, 160, 0.3); }
#ui .bookwin .eco-ihead .eco-iframe::before { content: ''; position: absolute; inset: 9%; z-index: 0; border-radius: 15%; pointer-events: none; opacity: 1; mix-blend-mode: normal; animation: none;
  background: radial-gradient(circle at 50% 45%, var(--tl) 0%, transparent 62%), linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 12px rgba(0, 0, 0, 0.45); }
#ui .bookwin .eco-ihead .eco-iframe > img { position: relative; z-index: 1; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
#ui .bookwin .eco-ihead .eco-iframe .plus { z-index: 2; }
#ui .bookwin .eco-cell.mat::before { content: ''; position: absolute; inset: 9%; border-radius: 15%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(220, 225, 235, 0.16) 0%, transparent 62%), linear-gradient(180deg, #4b5058 0%, #1b1d22 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(0, 0, 0, 0.45); }
#ui .bookwin .eco-cell.mat > img { z-index: 2; }

/* the "ปลดล็อกระบบใหม่!" card's buttons (2026-10-12, the user: "แก้สีของตัวหนังสือที่อ่านไม่ได้"): the night theme's
   `.theme-night.skinned .btn` (light text) beat `.unlock-card .btn`, so "ไว้ทีหลัง" was cream on the cream button */
#ui .unlock-card .btn, .theme-night.skinned .unlock-card .btn { color: #3a2410; -webkit-text-fill-color: #3a2410; text-shadow: 0 1px 0 rgba(255, 246, 220, 0.6); font-weight: 800; }
#ui .unlock-card .btn.primary, .theme-night.skinned .unlock-card .btn.primary { color: #ffffff; -webkit-text-fill-color: #ffffff; text-shadow: 0 1px 2px rgba(10, 40, 10, 0.85), 0 0 1px rgba(10, 40, 10, 0.9); }

/* the skill card's level-up button text (2026-10-12, the user: "แก้ตัวหนังสือเบลอ"): on the light book pages booklight's
   `.tip .sk-up span / b` (dark ink, meant for the line above the button) also hit the button's own label, so dark ink sat on
   the button's dark-green 2 px shadow and the grey "disabled" filter dimmed it further - a blurred double. The label keeps its
   own colours; a button that can't be pressed yet is plain grey with crisp light text (no filter over the text) */
#ui #tree .tip .sk-up .sk-up-go > span { color: #ffffff; -webkit-text-fill-color: #ffffff; text-shadow: 0 1px 0 #24521a, 0 0 2px rgba(20, 50, 12, 0.6); }
#ui #tree .tip .sk-up .sk-up-go > b { color: #fff6b0; -webkit-text-fill-color: #fff6b0; background: rgba(20, 50, 12, 0.55); text-shadow: none; }
#ui #tree .tip .sk-up .sk-up-go:disabled { filter: none; background: linear-gradient(#a7aea6, #7d857c 60%, #6a7169); border-color: #3e443d;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) inset, 0 3px 0 #3e443d; }
#ui #tree .tip .sk-up .sk-up-go:disabled > span { color: #fbfbf6; -webkit-text-fill-color: #fbfbf6; text-shadow: 0 1px 1px rgba(30, 34, 30, 0.75); }
#ui #tree .tip .sk-up .sk-up-go:disabled > b { color: #f4f1e2; -webkit-text-fill-color: #f4f1e2; background: rgba(30, 34, 30, 0.45); }

/* a book button that can't be pressed (2026-10-12, the user: "แก้ให้คมชัด" on the shop's greyed "ซื้อ 10"): it was the
   whole button at 55% opacity, label included, so the text ghosted into the page. Now the plate turns grey but stays
   solid, and the label is a solid muted grey - plainly off, still sharp */
#ui .bookwin .btn:disabled { opacity: 1; filter: grayscale(1); }
#ui .bookwin .btn:not(.primary):disabled, #ui .bookwin .btn:not(.primary):disabled * { color: #b8b2c0 !important; -webkit-text-fill-color: #b8b2c0 !important; text-shadow: none !important; }   /* (the dark book: a near-black grey plate, a light grey label) */
html:root[data-booklight] #ui .bookwin .btn:not(.primary):disabled, html:root[data-booklight] #ui .bookwin .btn:not(.primary):disabled * { color: #5a5462 !important; -webkit-text-fill-color: #5a5462 !important; }   /* (light books: a light grey plate, a dark grey label - 3:1 both, the HUD session's contrast audit 2026-10-13) */
#ui .bookwin .btn.primary:disabled { filter: grayscale(1) brightness(0.92); }

/* the same deep grade tile inside every other grade frame (2026-10-12, the user: "แก้ปัญหาพื้นหลังของสีแต่ละเทียร์" on the
   craft list): the craft list's icons (.cw-ic), the character page's worn slots (.bk-slot) and the collection rows' frames
   (.clx-prow .eco-iframe) showed the slot picture's own navy inside a green / blue / purple frame */
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe) { --t1: #7d776a; --t2: #2e2a24; --tl: rgba(230, 225, 210, 0.22); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe).g1 { --t1: #2a8a3e; --t2: #0a2e15; --tl: rgba(140, 240, 150, 0.25); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe).g2 { --t1: #2662bc; --t2: #091f50; --tl: rgba(130, 190, 255, 0.28); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe).g3 { --t1: #6e38b8; --t2: #22094a; --tl: rgba(205, 160, 255, 0.28); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe).g4 { --t1: #b56a14; --t2: #401c03; --tl: rgba(255, 210, 120, 0.3); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe).g5 { --t1: #b0243a; --t2: #3a040e; --tl: rgba(255, 150, 160, 0.3); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe)::before { content: ''; position: absolute; inset: 9%; z-index: 0; border-radius: 15%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--tl) 0%, transparent 62%), linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(0, 0, 0, 0.45); }
:is(#eco .cw-ic, #charpanel .bk-slot, #ui .bookwin .clx-prow .eco-iframe) > * { position: relative; z-index: 1; }
#charpanel .bk-slot > img { position: absolute; }
/* (2026-10-19, the user: "คำว่า เสื้อเกราะ แสดงผิดตำแหน่ง"): the rule above (:is(... #ui .bookwin .clx-prow .eco-iframe) > * -
   an :is() list counts as its most specific entry, 1 id + 3 classes) beat "#charpanel .bk-slot small / b", so a worn slot's
   name, +N and line badge flowed as text: the name wrapped ("เสื้อ / เกราะ") and +N fell under it. Back in their places. */
#charpanel .bk .bk-slots .bk-slot > small { position: absolute; left: 0; right: 0; bottom: 6px; white-space: nowrap; }
#charpanel .bk .bk-slots .bk-slot > b { position: absolute; left: 7px; top: 4px; }
#charpanel .bk .bk-slots .bk-slot > .lnb { position: absolute; }
#ui .bookwin .clx-prow .eco-iframe { position: relative; }
/* (an empty worn slot on the character page: a plain dark tile, not the grey of a common piece) */
#charpanel .bk-slot.empty { --t1: #3a3f4a; --t2: #171a20; --tl: rgba(220, 225, 235, 0.08); }

/* the forge page fits its page (2026-10-13, the user: "แก้ปัญหาเรื่องล้นจอ"): with three or more stat rows the "อัปเกรด"
   button ran under the book's bottom edge. The stage (piece, ring, anvil, stone) is drawn a fifth smaller, the gaps are
   tighter, and the button stays pinned to the bottom of the page if a piece has even more rows (the rows scroll above it) */
#ui .bookwin .eco-main:has(> .fg-stage) { gap: 6px; }
#ui .bookwin .eco-main > .fg-stage { zoom: 0.8; }
#ui .bookwin .eco-main > .fg-tabs { padding: 2px 0 4px; }
#ui .bookwin .eco-main > .fg-to { margin-top: 0; font-size: 1.4rem; }
#ui .bookwin .eco-main > .fg-line { margin: 4px 6% 2px; }
#ui .bookwin .eco-main > .fg-rows li { padding: 2px 6px; }
#ui .bookwin .eco-main > .fg-note { padding: 2px 0; font-size: 0.82rem; }
#ui .bookwin .eco-main > .fg-spacer { min-height: 0; }
#ui .bookwin .eco-main > .fg-btns { position: sticky; bottom: 0; z-index: 3; padding-top: 6px;
  background: linear-gradient(to bottom, transparent, var(--bk-page, rgb(29, 29, 28)) 14px); }   /* (the Obsidian page is dark: the cream fallback was a white band under the button, 2026-10-17) */

/* light book skins: the page number "1 / 2" sat half on the page, half on the dark frame (no colour reads on both, the
   text check kept flagging it): it gets its own small parchment tag in the skin's tones, ink on it (2026-10-13).
   (:not(#_) adds weight over the generated css/bookcontrast.css colours) */
html:root[data-booklight] :is(#ui .bookwin, #charpanel) .bk-pageno:not(#_) { box-sizing: border-box; padding: 0 5px; border-radius: 12px;
  background: color-mix(in srgb, var(--bk-acc) 10%, #fffaf0); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bk-acc) 40%, transparent), 0 2px 4px rgba(40, 20, 10, 0.25);
  color: var(--bk-ink) !important; -webkit-text-fill-color: var(--bk-ink) !important; text-shadow: none !important; }

/* the running light stays on the frame (2026-10-13, the user's clip of a flickering legend belt): ".eco-cell[...]:not(.g0)
   ::before { z-index: 0 }" (the vivid-slots block) outranked the "::before { z-index: 1 }" meant to lift the grade tile over
   the comet (.cx-orbit, z-index 0, later in the slot), so the comet swept across the whole middle every turn and the tile
   blinked navy / orange. The tile is above the comet again: only the rim lights up */
#ui .bookwin .eco-cell[class*=" g"]:not(.g0)::before, #ui .bookwin .eco-cell.g0::before { z-index: 1; }
/* (2026-10-13, the user: "ที่สีทองมันหายไปไม่ชัด มีพื้นสีน้ำเงินมาบดบัง") and the bigger half of that blink: forge.js's
   rare-piece sheen (.fxg4 / .fxg5::before, opacity 0 -> 1 -> 0 every 3 s, screen blend) runs on the same ::before that is
   the slot's grade tile, so the gold tile faded out to the slot picture's navy and back. In a book slot that layer stays the
   solid tile (the slot has its own sweep of light, .cx-sweep) - as the item page's big frame already does */
#ui .bookwin .eco-cell[class*=" g"]:is(.fxg3, .fxg4, .fxg5)::before { opacity: 1; mix-blend-mode: normal; animation: none; }

/* ---------- item slots as polished metal (2026-10-13, the user: "อยากได้ฟีลเหมือนโลหะหรือทองคำ", picked D on
   tools/slotpick.html (B first)): the frame is the gold boss card's polished, brushed frame with its diamond corners (Codex art,
   assets/ui_cards/gold/frame.png cut to a square: assets/ui_book/metal/frame_g4.png), tinted per tier for the others; inside,
   a glossy metal plate of the tier (the book's gold key plate, assets/ui_book/plates/plate_g*.png, tinted per tier). Every place a graded slot shows: the
   book's cells, the item page's big frame, the character page, the craft list, the collection rows. Materials and empty
   slots keep their own look. The frame is the slot's background; the tile sits inside its opening (above the comet) ---------- */
#ui .bookwin .eco-cell.g0,
#ui .bookwin .eco-ihead.g0 .eco-iframe,
#charpanel .bk-slot.g0:not(.empty),
#eco .cw-ic.g0,
#ui .bookwin .clx-prow .eco-iframe.g0 { --mf: url(../assets/ui_book/metal/frame_g0.png); --mi: url(../assets/ui_book/plates/plate_g0.png); }
#ui .bookwin .eco-cell.g1,
#ui .bookwin .eco-ihead.g1 .eco-iframe,
#charpanel .bk-slot.g1:not(.empty),
#eco .cw-ic.g1,
#ui .bookwin .clx-prow .eco-iframe.g1 { --mf: url(../assets/ui_book/metal/frame_g1.png); --mi: url(../assets/ui_book/plates/plate_g1.png); }
#ui .bookwin .eco-cell.g2,
#ui .bookwin .eco-ihead.g2 .eco-iframe,
#charpanel .bk-slot.g2:not(.empty),
#eco .cw-ic.g2,
#ui .bookwin .clx-prow .eco-iframe.g2 { --mf: url(../assets/ui_book/metal/frame_g2.png); --mi: url(../assets/ui_book/plates/plate_g2.png); }
#ui .bookwin .eco-cell.g3,
#ui .bookwin .eco-ihead.g3 .eco-iframe,
#charpanel .bk-slot.g3:not(.empty),
#eco .cw-ic.g3,
#ui .bookwin .clx-prow .eco-iframe.g3 { --mf: url(../assets/ui_book/metal/frame_g3.png); --mi: url(../assets/ui_book/plates/plate_g3.png); }
#ui .bookwin .eco-cell.g4,
#ui .bookwin .eco-ihead.g4 .eco-iframe,
#charpanel .bk-slot.g4:not(.empty),
#eco .cw-ic.g4,
#ui .bookwin .clx-prow .eco-iframe.g4 { --mf: url(../assets/ui_book/metal/frame_g4.png); --mi: url(../assets/ui_book/plates/plate_g4.png); }
#ui .bookwin .eco-cell.g5,
#ui .bookwin .eco-ihead.g5 .eco-iframe,
#charpanel .bk-slot.g5:not(.empty),
#eco .cw-ic.g5,
#ui .bookwin .clx-prow .eco-iframe.g5 { --mf: url(../assets/ui_book/metal/frame_g5.png); --mi: url(../assets/ui_book/plates/plate_g5.png); }
#ui .bookwin .eco-cell.g0,
#ui .bookwin .eco-ihead.g0 .eco-iframe,
#charpanel .bk-slot.g0:not(.empty),
#eco .cw-ic.g0,
#ui .bookwin .clx-prow .eco-iframe.g0,
#ui .bookwin .eco-cell.g1,
#ui .bookwin .eco-ihead.g1 .eco-iframe,
#charpanel .bk-slot.g1:not(.empty),
#eco .cw-ic.g1,
#ui .bookwin .clx-prow .eco-iframe.g1,
#ui .bookwin .eco-cell.g2,
#ui .bookwin .eco-ihead.g2 .eco-iframe,
#charpanel .bk-slot.g2:not(.empty),
#eco .cw-ic.g2,
#ui .bookwin .clx-prow .eco-iframe.g2,
#ui .bookwin .eco-cell.g3,
#ui .bookwin .eco-ihead.g3 .eco-iframe,
#charpanel .bk-slot.g3:not(.empty),
#eco .cw-ic.g3,
#ui .bookwin .clx-prow .eco-iframe.g3,
#ui .bookwin .eco-cell.g4,
#ui .bookwin .eco-ihead.g4 .eco-iframe,
#charpanel .bk-slot.g4:not(.empty),
#eco .cw-ic.g4,
#ui .bookwin .clx-prow .eco-iframe.g4,
#ui .bookwin .eco-cell.g5,
#ui .bookwin .eco-ihead.g5 .eco-iframe,
#charpanel .bk-slot.g5:not(.empty),
#eco .cw-ic.g5,
#ui .bookwin .clx-prow .eco-iframe.g5 { background-image: var(--mf) !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; }
#ui .bookwin .eco-cell.g0::before,
#ui .bookwin .eco-ihead.g0 .eco-iframe::before,
#charpanel .bk-slot.g0:not(.empty)::before,
#eco .cw-ic.g0::before,
#ui .bookwin .clx-prow .eco-iframe.g0::before,
#ui .bookwin .eco-cell.g1::before,
#ui .bookwin .eco-ihead.g1 .eco-iframe::before,
#charpanel .bk-slot.g1:not(.empty)::before,
#eco .cw-ic.g1::before,
#ui .bookwin .clx-prow .eco-iframe.g1::before,
#ui .bookwin .eco-cell.g2::before,
#ui .bookwin .eco-ihead.g2 .eco-iframe::before,
#charpanel .bk-slot.g2:not(.empty)::before,
#eco .cw-ic.g2::before,
#ui .bookwin .clx-prow .eco-iframe.g2::before,
#ui .bookwin .eco-cell.g3::before,
#ui .bookwin .eco-ihead.g3 .eco-iframe::before,
#charpanel .bk-slot.g3:not(.empty)::before,
#eco .cw-ic.g3::before,
#ui .bookwin .clx-prow .eco-iframe.g3::before,
#ui .bookwin .eco-cell.g4::before,
#ui .bookwin .eco-ihead.g4 .eco-iframe::before,
#charpanel .bk-slot.g4:not(.empty)::before,
#eco .cw-ic.g4::before,
#ui .bookwin .clx-prow .eco-iframe.g4::before,
#ui .bookwin .eco-cell.g5::before,
#ui .bookwin .eco-ihead.g5 .eco-iframe::before,
#charpanel .bk-slot.g5:not(.empty)::before,
#eco .cw-ic.g5::before,
#ui .bookwin .clx-prow .eco-iframe.g5::before { content: ''; position: absolute; inset: 11.5% !important; border-radius: 5% !important;
  background: var(--mi) center / 100% 100% no-repeat !important; box-shadow: none !important; }
/* (slot names and counts on the bright plates: white with a crisp dark ring, no blur) */
#ui .bw-eco .eco-gslot:has(.eco-cell[class*=" g"]) small, #charpanel .bk-slot:not(.empty) small {
  color: #fff !important; -webkit-text-fill-color: #fff !important; text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008 !important; }

/* ---------- mythic slots look dearer than gold (2026-10-13, the user: "กรอบสีแดงให้มีเอฟเฟคดูแพงกว่าทองหน่อย"):
   - the frame and plate are ruby and rose gold (the gold frame / plate re-tinted: deep crimson in the shadows, gold in the
     lights, the diamonds kept clear), not plain red metal
   - light rays turn slowly behind the icon; the four corner diamonds twinkle in turn (assets/fx/spark.png warmed:
     assets/ui_book/metal/spark_g5.png); the comet round the frame runs gold-white; a crimson + gold glow round the slot
   - only transform / opacity move; in the bag's list they rest (a soft still glint) and come alive under the pointer ---------- */
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-rays { position: absolute; inset: 11.5%; z-index: 1; border-radius: 5%; overflow: hidden; pointer-events: none; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-rays::before { content: ''; position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 160, 0.42) 0deg 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%); }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i { position: absolute; width: 30%; aspect-ratio: 1; opacity: 0; transform: scale(0.3);
  background: url(../assets/ui_book/metal/spark_g5.png) center / contain no-repeat; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(1) { left: -5%; top: -5%; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(2) { right: -5%; top: -5%; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(3) { right: -5%; bottom: -5%; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(4) { left: -5%; bottom: -5%; }
#ui .bookwin .eco-cell.g5 .cx-orbit i { opacity: 0.85 !important;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(255, 210, 120, 0.95) 28%, #fff 37%, transparent 45% 62%, rgba(255, 210, 120, 0.95) 78%, #fff 87%, transparent 95%) !important; }
#ui .bookwin .eco-cell.g5::after { inset: 3% !important; border-radius: 12% !important; box-shadow: 0 0 4px 1px rgba(255, 60, 80, 0.85), 0 0 9px 1px rgba(255, 200, 110, 0.45) !important; }
#ui .bookwin .eco-cell.g4::after { inset: 3% !important; border-radius: 12% !important; }
/* (forge.js's square pulsing glow on legend / mythic pieces (.fxg4 / .fxg5 box-shadow) read as a pink-orange box round
   the rounded metal frames: off in the book's slots, their own rounded glow above stays) */
#ui .bookwin :is(.eco-cell, .eco-iframe):is(.fxg3, .fxg4, .fxg5) { animation: none !important; box-shadow: none !important; }
#ui .bookwin .eco-ihead.g5 .eco-iframe { filter: drop-shadow(0 0 6px rgba(255, 70, 90, 0.85)) drop-shadow(0 0 14px rgba(255, 196, 110, 0.5)) !important; }
#charpanel .bk-slot.g5:not(.empty) { filter: drop-shadow(0 0 4px rgba(255, 70, 90, 0.85)) drop-shadow(0 0 9px rgba(255, 196, 110, 0.45)); }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin :is(.eco-cell, .eco-iframe) .cx-rays::before { will-change: transform; animation: cxRays 14s linear infinite; }
  #ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i { animation: cxGem 3.2s ease-in-out infinite; }
  #ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(2) { animation-delay: 0.8s; }
  #ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(3) { animation-delay: 1.6s; }
  #ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem i:nth-child(4) { animation-delay: 2.4s; }
  @keyframes cxRays { to { transform: rotate(360deg); } }
  @keyframes cxGem { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 12% { opacity: 1; transform: scale(1) rotate(20deg); } 28% { opacity: 0; transform: scale(0.4) rotate(45deg); } }
}
/* (the bag's list: still, a soft glint on two gems; alive under the pointer or when picked) */
#ui .bookwin .eco-bagscroll .eco-cell .cx-rays::before, #ui .bookwin .eco-bagscroll .eco-cell .cx-gem i { animation: none !important; will-change: auto !important; }
#ui .bookwin .eco-bagscroll .eco-cell .cx-gem i:nth-child(odd) { opacity: 0.7; transform: scale(0.55); }
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-rays::before { animation: cxRays 14s linear infinite !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-gem i { animation: cxGem 3.2s ease-in-out infinite !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-gem i:nth-child(2) { animation-delay: 0.8s !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-gem i:nth-child(3) { animation-delay: 1.6s !important; }
  #ui .bookwin .eco-bagscroll .eco-cell:is(:hover, .sel) .cx-gem i:nth-child(4) { animation-delay: 2.4s !important; }
}
#ui .bookwin .eco-ihead .eco-iframe > img { z-index: 2; }   /* (above the mythic rays, z 1) */
#ui .bookwin .eco-ihead .eco-iframe .plus { z-index: 4; }

/* ---------- skill books (js/skillbook.js, 2026-10-13): the #sbook window (สมุดสกิล + ร้านคัมภีร์), the K window's
   material pill + raise costs + breakthrough lines, the breakthrough card. Dark book first, light book skins after ---------- */
#sbook .btn { color: var(--ink); }
#sbook .btn.primary { color: #fff; }
#sbook .sb-note { margin: 2px 0 8px; font: 400 12.5px/1.5 Mali, sans-serif; color: #c8c0aa; }
#sbook .sb-h { margin: 10px 0 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.4); font: 700 14px Mali, sans-serif; color: #f6dc98; }
#sbook .sb-mats { display: flex; gap: 6px; margin-bottom: 6px; }
#sbook .sb-mats span { flex: 1; display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); }
#sbook .sb-mats img { grid-row: span 2; width: 34px; height: 34px; object-fit: contain; }
#sbook .sb-mats b { font: 700 15px/1 Fredoka, Mali, sans-serif; color: #f4ecd8; }
#sbook .sb-mats small { font: 500 11px/1.2 Mali, sans-serif; color: #b9b1a0; }
#sbook .sb-row { display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 5px; padding: 5px 9px; border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(0, 0, 0, 0.26); color: #f4ecd8; }
#sbook .sb-row:hover { background: rgba(242, 193, 78, 0.1); }
#sbook .sb-row.on { background: rgba(242, 193, 78, 0.18); box-shadow: inset 0 0 0 1.5px #f2c14e; }
#sbook .sb-row.off .sb-ic img:first-child { filter: grayscale(0.65) brightness(0.8); }
#sbook .sb-ic { position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 0, 0, 0.35); }
#sbook .sb-ic img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; }
#sbook .sb-ic .sb-btb { position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px; border-radius: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
#sbook .sb-rn { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#sbook .sb-rn b { font: 700 13.5px/1.25 Mali, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sbook .sb-rn small { font: 500 11.5px/1.3 Mali, sans-serif; color: #b9b1a0; }
#sbook .sb-lv { flex: none; font: 700 12.5px Fredoka, Mali, sans-serif; color: #f6dc98; }
#sbook .sb-lv.max { color: #ffd76a; }
#sbook .sb-lv.no { font: 500 11.5px Mali, sans-serif; color: #9a927e; }
#sbook .sb-go { flex: none; padding: 2px 8px; border-radius: 99px; background: #e5483a; color: #fff; font: 700 11px/1.5 Mali, sans-serif; }
#sbook .sb-buy { cursor: default; }
#sbook .sb-dh { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
#sbook .sb-dh img { width: 84px; height: 84px; object-fit: contain; border-radius: 14px; background: rgba(0, 0, 0, 0.35); padding: 4px; }
#sbook .sb-dh h3 { margin: 0; font: 700 19px/1.25 Mali, sans-serif; color: #f6dc98; }
#sbook .sb-dh small { font: 500 12px Mali, sans-serif; color: #b9b1a0; }
#sbook .sb-desc { margin: 4px 0 8px; font: 400 13px/1.55 Mali, sans-serif; color: #e8e0cc; }
#sbook .sb-where { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.28); font: 500 12.5px/1.45 Mali, sans-serif; color: #e8e0cc; }
#sbook .sb-where b { font: 700 12.5px Mali, sans-serif; color: #f6dc98; }
#sbook .sb-where em { font-style: normal; color: #8be37b; }
#sbook .sb-status { margin: 8px 0; font: 500 12.5px/1.5 Mali, sans-serif; color: #e8e0cc; }
#sbook .sb-status.short { color: #ff9a8a; }
#sbook .sb-acts { display: flex; gap: 8px; margin: 6px 0; }
#sbook .sb-big { flex: none; width: 100%; min-height: 42px; font: 700 14px Mali, sans-serif; }
#sbook .sb-acts .sb-big { flex: 1; width: auto; }
.sb-costs { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.sb-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; border-radius: 99px; background: rgba(0, 0, 0, 0.32); font: 700 12.5px/1.6 Fredoka, Mali, sans-serif; color: #f4ecd8; }
.sb-chip img { width: 22px; height: 22px; object-fit: contain; }
.sb-chip.short { color: #ff9a8a; box-shadow: inset 0 0 0 1px rgba(255, 120, 100, 0.55); }
.sb-costs.big .sb-chip { font-size: 14px; padding: 3px 11px 3px 4px; }
.sb-costs.big .sb-chip img { width: 28px; height: 28px; }
.sb-bts { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.sb-btl { display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 10px; background: rgba(0, 0, 0, 0.24); opacity: 0.72; }
.sb-btl.on { opacity: 1; background: linear-gradient(90deg, rgba(255, 210, 110, 0.22), rgba(255, 210, 110, 0.05)); box-shadow: inset 0 0 0 1px rgba(255, 210, 110, 0.5); }
.sb-btl img { flex: none; width: 34px; height: 34px; object-fit: contain; }
.sb-btl span { display: flex; flex-direction: column; font: 500 12px/1.4 Mali, sans-serif; color: #e8e0cc; }
.sb-btl b { font: 700 12.5px Mali, sans-serif; color: #f6dc98; }
.sb-btl:not(.on) img { filter: grayscale(0.7); }
/* the K window: the materials in the header, the duplicate-book button */
#tree .sp-pill:has(.sb-pill) { padding: 2px 10px 2px 4px; gap: 0; }
#ui .bw-tree .sp-pill:has(.sb-pill) { left: 1018px; padding: 0 9px; }
#tree .sb-pill { display: inline-flex; align-items: center; gap: 7px; }
#tree .sb-pill > span { display: inline-flex; align-items: center; gap: 2px; font: 700 13px Fredoka, Mali, sans-serif; white-space: nowrap; }
#tree .sb-pill img { width: 22px; height: 22px; object-fit: contain; }
#tree .sk-up .sb-upbook { margin-top: 6px; width: 100%; }
/* the breakthrough card (Lv 5 ทะลวง / Lv 10 ตื่นรู้), top middle */
.sb-bt { position: fixed; left: 50%; top: 18%; z-index: 60; display: flex; align-items: center; gap: 14px; padding: 12px 26px 12px 16px; transform: translateX(-50%);
  border-radius: 16px; background: linear-gradient(180deg, rgba(20, 30, 54, 0.94), rgba(10, 14, 28, 0.94)); box-shadow: 0 0 0 2px #7fc8ff, 0 0 40px rgba(127, 200, 255, 0.55);
  color: #fff; pointer-events: none; animation: sbBtIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
.sb-bt.top { background: linear-gradient(180deg, rgba(60, 34, 8, 0.95), rgba(28, 14, 2, 0.95)); box-shadow: 0 0 0 2px #ffd76a, 0 0 56px rgba(255, 200, 90, 0.7); }
.sb-bt img { width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(255, 220, 140, 0.8)); animation: sbBtSpin 2.4s ease-in-out infinite; }
.sb-bt span { display: flex; flex-direction: column; gap: 2px; }
.sb-bt em { font: 800 15px Mali, sans-serif; font-style: normal; color: #9fd8ff; letter-spacing: 0.5px; }
.sb-bt.top em { color: #ffd76a; }
.sb-bt b { font: 700 20px/1.2 Mali, sans-serif; }
.sb-bt small { font: 500 13px/1.4 Mali, sans-serif; color: #e8e0cc; max-width: 380px; }
.sb-bt-rays { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 230, 160, 0.25), transparent); z-index: -1; }
.sb-bt.out { animation: sbBtOut 0.6s ease-in both; }
@keyframes sbBtIn { from { opacity: 0; transform: translateX(-50%) scale(0.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes sbBtOut { to { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); } }
@keyframes sbBtSpin { 50% { transform: rotate(-8deg) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .sb-bt, .sb-bt img, .sb-bt.out { animation: none !important; } }
/* light book skins: rows and boxes on the page's own tone, ink text */
:root[data-booklight] #sbook .sb-note, :root[data-booklight] #sbook .sb-rn small, :root[data-booklight] #sbook .sb-dh small, :root[data-booklight] #sbook .sb-mats small { color: color-mix(in srgb, var(--bk-ink) 72%, transparent); }
:root[data-booklight] #sbook :is(.sb-row, .sb-mats span, .sb-where, .sb-ic, .sb-dh img) { background: color-mix(in srgb, var(--bk-acc) 10%, #fffaf0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-acc) 22%, transparent); color: var(--bk-ink); }
:root[data-booklight] #sbook .sb-row.on { background: color-mix(in srgb, var(--bk-acc) 22%, #fffaf0); box-shadow: inset 0 0 0 1.5px var(--bk-acc); }
:root[data-booklight] #sbook :is(.sb-h, .sb-dh h3, .sb-where b, .sb-lv, .sb-mats b, .sb-desc, .sb-status, .sb-where) { color: var(--bk-ink); }
:root[data-booklight] #sbook .sb-h { border-bottom-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); }
:root[data-booklight] #sbook .sb-lv.max { color: #9a5a00; }
:root[data-booklight] #sbook .sb-where em { color: #1f7a12; }
:root[data-booklight] #sbook .sb-status.short { color: #b0281a; }
:root[data-booklight] :is(#sbook, #tree) .sb-chip { background: color-mix(in srgb, var(--bk-acc) 12%, #fffaf0); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bk-acc) 25%, transparent); color: var(--bk-ink); }
:root[data-booklight] :is(#sbook, #tree) .sb-chip.short { color: #b0281a; box-shadow: inset 0 0 0 1px rgba(176, 40, 26, 0.5); }
:root[data-booklight] :is(#sbook, #tree) .sb-btl { background: color-mix(in srgb, var(--bk-acc) 8%, #fffaf0); }
:root[data-booklight] :is(#sbook, #tree) .sb-btl.on { background: linear-gradient(90deg, rgba(255, 200, 90, 0.35), color-mix(in srgb, var(--bk-acc) 8%, #fffaf0)); box-shadow: inset 0 0 0 1px rgba(190, 130, 20, 0.6); }
:root[data-booklight] :is(#sbook, #tree) .sb-btl span { color: var(--bk-ink); }
:root[data-booklight] :is(#sbook, #tree) .sb-btl b { color: #6e4100; }
:root[data-booklight] #tree .sb-pill > span { color: var(--bk-ink); }

/* the skill-book window on the book's pages (the forge window's places) */
#ui .bw-sbook .eco-tabs { position: absolute; left: 244px; top: 194px; width: 500px; display: flex; flex-wrap: wrap; gap: 4px; }
#ui .bw-sbook .eco-body { display: contents; }
#ui .bw-sbook .eco-main { position: absolute; left: 242px; top: 240px; width: 504px; height: 612px; overflow-y: auto; }
#ui .bw-sbook .eco-side { position: absolute; left: 816px; top: 196px; width: 484px; height: 656px; overflow-y: auto; }
#ui .bw-sbook .eco-gold { position: absolute; left: 1090px; top: 145px; }

/* the mount page's tier filter (2026-10-13, 74 mounts in 6 tiers: js/content.js) */
#ui .bookwin .ct-mtiers { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
#ui .bookwin .ct-mmine { align-items: center; margin-top: -2px; }
#ui .bookwin .ct-mmine small { opacity: 0.8; font-size: 0.74rem; }
#ui .bookwin .ct-mtiers .btn { min-height: 30px; padding: 0 10px; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
#ui .bookwin .ct-mtiers .btn i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }

/* a mount's info with your character riding it (2026-10-13, js/mountview.js): the mount page's right page */
#ui .bookwin .ct-mcard { cursor: pointer; }
#ui .bookwin .ct-mcard.see { outline: 3px solid var(--gc); outline-offset: -3px; box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 60%, transparent); }
#ui .bookwin .ct-mview { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; margin-bottom: 10px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--gc) 26%, transparent), transparent 70%), rgba(0, 0, 0, 0.18); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc) 55%, transparent); }
#ui .bookwin .ct-mview-cv { width: 100%; height: 270px; display: block; }
.mv-info .mv-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mv-info .mv-head b { font: 800 22px 'Mali', sans-serif; color: var(--gc); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.mv-info .mv-head span { font-weight: 700; color: var(--gc); }
.mv-info .mv-head em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 13px; padding: 1px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); }
.mv-info .mv-stats { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.mv-info .mv-stats li { display: flex; justify-content: space-between; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.18); }
.mv-info .mv-skill { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--gc) 18%, rgba(0, 0, 0, 0.3)); display: flex; flex-direction: column; gap: 2px; }
.mv-info .mv-skill b { color: var(--gc); }
.mv-info .mv-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; opacity: 0.9; }
/* (the rider's stage: the tier's backdrop, grander with the tier - js/mountview.js MountView.stage) */
.mv-stage { position: relative; border-radius: 10px; overflow: hidden; background: center 62% / cover no-repeat; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gc) 70%, transparent), inset 0 -30px 40px rgba(0, 0, 0, 0.35); }
.mv-stage.t4, .mv-stage.t5 { box-shadow: inset 0 0 0 2px var(--gc), 0 0 16px color-mix(in srgb, var(--gc) 55%, transparent), inset 0 -30px 40px rgba(0, 0, 0, 0.35); }
.mv-stage.t5::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255, 170, 160, 0.35) 50%, transparent 60%) 0 0 / 260% 100% no-repeat; mix-blend-mode: screen; animation: mvSheen 5s ease-in-out infinite; }
@keyframes mvSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }

/* ---------- the mount cards, grand by tier (2026-10-13, the user: "ตรงนี้ด้วย ให้มีความว้าว สวยมาก"): each card is the
   tier's polished metal frame (assets/ui_book/metal) round the tier's backdrop (the monster cards' Codex backdrops, as the
   rider's stage), the mount in full colour with the tier's glow; ฮีโร่ up glow, ตำนาน a sweep of light, เทพ the sweep, sparks
   and a breathing glow. Not owned yet: the same card, dimmer, the mount half-grey ---------- */
#ui .bookwin .ct-grid .ct-card.ct-mcard { position: relative; overflow: hidden; isolation: isolate; min-height: 150px; padding: 12px 10px 10px; gap: 1px;
  border-width: 12px !important; border-style: solid !important; border-color: transparent !important; border-radius: 4px; border-image: var(--mfr) 34 / 12px stretch !important;
  background: #120c1c !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45); transition: transform 0.15s, filter 0.15s; outline: 0; }
/* (the backdrop softened and darkened, so the mount in front is what you see - the user: "ฉากหลังเป็นตัวทำให้พาหนะเด่น") */
#ui .bookwin .ct-grid .ct-card.ct-mcard::before { content: ''; position: absolute; inset: -6px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 16, 0) 40%, rgba(8, 6, 16, 0.9) 100%), var(--mbg) center 58% / cover no-repeat;
  filter: blur(2.5px) brightness(0.55) saturate(0.85); transform: scale(1.06); }
#ui .bookwin .ct-grid .ct-mcard .mglow { position: absolute; z-index: 0; left: 50%; top: 36%; width: 115%; aspect-ratio: 2 / 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--gc) 80%, #fff 20%) 0%, color-mix(in srgb, var(--gc) 35%, transparent) 38%, transparent 68%); opacity: 0.85; mix-blend-mode: screen; }
#ui .bookwin .ct-grid .ct-mcard.t0 { --mbg: url(../assets/ui_cards/bg/card_bg_g1.jpg); --mfr: url(../assets/ui_book/metal/frame_g0.png); }
#ui .bookwin .ct-grid .ct-mcard.t1 { --mbg: url(../assets/ui_cards/bg/card_bg_g4.jpg); --mfr: url(../assets/ui_book/metal/frame_g1.png); }
#ui .bookwin .ct-grid .ct-mcard.t2 { --mbg: url(../assets/ui_cards/bg/card_bg_g5.jpg); --mfr: url(../assets/ui_book/metal/frame_g2.png); }
#ui .bookwin .ct-grid .ct-mcard.t3 { --mbg: url(../assets/ui_cards/bg/card_bg_g6.jpg); --mfr: url(../assets/ui_book/metal/frame_g3.png); }
#ui .bookwin .ct-grid .ct-mcard.t4 { --mbg: url(../assets/ui_cards/bg/card_bg_g8.jpg); --mfr: url(../assets/ui_book/metal/frame_g4.png); }
#ui .bookwin .ct-grid .ct-mcard.t5 { --mbg: url(../assets/ui_cards/bg/card_bg_g7.jpg); --mfr: url(../assets/ui_book/metal/frame_g5.png); }
#ui .bookwin .ct-grid .ct-mcard img { position: relative; z-index: 1; width: 136%; max-width: none; height: 104px; margin: -10px -18% -4px; object-fit: contain;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 7px var(--gc)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.65)); transition: transform 0.2s; }
#ui .bookwin .ct-grid .ct-mcard:hover { transform: translateY(-3px); filter: brightness(1.1); }
#ui .bookwin .ct-grid .ct-mcard:hover img { transform: scale(1.06) translateY(-2px); }
#ui .bookwin .ct-grid .ct-mcard :is(b, small) { position: relative; z-index: 1; }
#ui .bookwin .ct-grid .ct-mcard b { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 14px; text-shadow: 1px 0 0 #120a04, -1px 0 0 #120a04, 0 1px 0 #120a04, 0 -1px 0 #120a04 !important; }
#ui .bookwin .ct-grid .ct-mcard small { color: var(--gc) !important; -webkit-text-fill-color: var(--gc) !important; font-weight: 800; text-shadow: 0 1px 2px #000, 0 0 2px #000 !important; }
#ui .bookwin .ct-grid .ct-mcard small.ct-from { color: #d8d0bd !important; -webkit-text-fill-color: #d8d0bd !important; font-weight: 600; }
#ui .bookwin .ct-grid .ct-mcard .btn { position: relative; z-index: 1; margin-top: 2px; }
/* (not owned yet: dimmer, half-grey; owned: full colour) */
#ui .bookwin .ct-grid .ct-card.ct-mcard.locked::before { filter: blur(2.5px) brightness(0.32) saturate(0.6); }
#ui .bookwin .ct-grid .ct-mcard.locked .mglow { opacity: 0.3; }
#ui .bookwin .ct-grid .ct-mcard.locked img { filter: grayscale(0.5) brightness(0.68) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.6)); }
#ui .bookwin .ct-grid .ct-mcard.locked b { color: #d8d0bd !important; -webkit-text-fill-color: #d8d0bd !important; }
/* (the one in use, the one being looked at) */
#ui .bookwin .ct-grid .ct-mcard.on { box-shadow: 0 0 0 2px #8be37b, 0 0 16px rgba(139, 227, 123, 0.7), 0 5px 12px rgba(0, 0, 0, 0.45); }
#ui .bookwin .ct-grid .ct-mcard.see { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--gc), 0 0 20px var(--gc), 0 5px 12px rgba(0, 0, 0, 0.45); }
/* (ฮีโร่ up: a glow; ตำนาน: a sweep of light; เทพ: the sweep, sparks and a breathing glow) */
#ui .bookwin .ct-grid .ct-mcard:is(.t3, .t4, .t5):not(.locked) { box-shadow: 0 0 12px color-mix(in srgb, var(--gc) 65%, transparent), 0 5px 12px rgba(0, 0, 0, 0.45); }
#ui .bookwin .ct-grid .ct-mcard:is(.t4, .t5)::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 210, 0.45) 50%, transparent 62%) 0 0 / 280% 100% no-repeat; }
#ui .bookwin .ct-grid .ct-mcard.t5::after { background:
    radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 18% 22% / 100% 100% no-repeat,
    radial-gradient(circle, #ffd27a 0 1.5px, transparent 2.5px) 78% 30% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 1px, transparent 2px) 62% 12% / 100% 100% no-repeat,
    radial-gradient(circle, #ff8a96 0 1.5px, transparent 2.5px) 30% 48% / 100% 100% no-repeat,
    linear-gradient(115deg, transparent 38%, rgba(255, 170, 160, 0.5) 50%, transparent 62%) 0 0 / 280% 100% no-repeat; }   /* (เทพ: red, with gold) */
@media (prefers-reduced-motion: no-preference) {
  #ui .bookwin .ct-grid .ct-mcard:is(.t4, .t5)::after { animation: mcSheen 4.5s ease-in-out infinite; }
  #ui .bookwin .ct-grid .ct-mcard.t5::after { animation: mcSheen6 3.6s ease-in-out infinite; }
  #ui .bookwin .ct-grid .ct-mcard.t5:not(.locked) { animation: mcBreath 2.6s ease-in-out infinite; }
  #ui .bookwin .ct-grid .ct-mcard:nth-child(3n + 2)::after { animation-delay: -1.5s; }
  #ui .bookwin .ct-grid .ct-mcard:nth-child(3n)::after { animation-delay: -3s; }
  @keyframes mcSheen { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
  @keyframes mcSheen6 { 0% { background-position: 18% 22%, 78% 30%, 62% 12%, 30% 48%, 130% 0; opacity: 1; } 25% { opacity: 0.6; } 55%, 100% { background-position: 18% 22%, 78% 30%, 62% 12%, 30% 48%, -30% 0; opacity: 1; } }
  @keyframes mcBreath { 0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--gc) 60%, transparent), 0 5px 12px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 22px var(--gc), 0 5px 12px rgba(0, 0, 0, 0.45); } }
}
/* a mount card's spares (kept to fuse, js/content.js Content.fuseMounts; 2026-10-13) */
#ui .bookwin .ct-mcard .ct-spare { position: absolute; top: 6px; left: 6px; z-index: 3; padding: 0 6px; border-radius: 999px; font: 800 11px/17px 'Mali', sans-serif; font-style: normal; color: #06261c; background: linear-gradient(180deg, #d8fff1, #5fe0b4); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }

/* the collection badge on item slots, smaller (2026-10-13, the user: "the collection mark is too big") */
#ui .bookwin .eco-cell .clb { top: 3px; right: 3px; width: 14px; height: 14px; box-shadow: 0 0 0 1px #8ef07a, 0 1px 2px rgba(0, 0, 0, 0.5); }
#ui .bookwin .eco-cell .clb img { width: 10px; height: 10px; }
#ui .bookwin .eco-cell .clb:hover { transform: scale(1.35); }

/* auto settings: elites, mini bosses and the map's boss in frames of their own colour (js/ui.js showAutoCfg, user 2026-10-13) */
.ac-mob.elite { border-color: #b98cff; background-image: linear-gradient(180deg, rgba(150, 90, 255, 0.28), rgba(150, 90, 255, 0.06)); }
.ac-mob.elite.on { border-color: #c79bff; box-shadow: 0 0 0 2px #c79bff inset; }
.ac-mob.mini { border-color: #ff6fb5; background-image: linear-gradient(180deg, rgba(255, 90, 170, 0.3), rgba(255, 90, 170, 0.06)); }
.ac-mob.mini.on { border-color: #ff7fc0; box-shadow: 0 0 0 2px #ff7fc0 inset; }
.ac-mob.boss { border-color: #ff5a6a; background-image: linear-gradient(180deg, rgba(255, 70, 90, 0.36), rgba(255, 200, 80, 0.12)); }
.ac-mob.boss.on { border-color: #ffd257; box-shadow: 0 0 0 2px #ff5a6a inset, 0 0 0 4px #ffd257 inset; }
.ac-kind { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; font: 700 0.72rem/18px var(--thai); white-space: nowrap; color: #1b1030; background: #c79bff; border: 1px solid #1b1030; z-index: 1; }
.ac-mob.mini .ac-kind { background: #ff7fc0; }
.ac-mob.boss .ac-kind { background: #ffd257; color: #5a0f18; }
.ac-mob-grid { padding-top: 8px; row-gap: 14px; }
.ac-legend { grid-column: 1 / -1; margin: 0; font: 500 0.78rem/1.5 var(--thai); opacity: 0.9; }
.ac-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; border: 2px solid #c79bff; vertical-align: -1px; }
.ac-legend i.m { border-color: #ff7fc0; }
.ac-legend i.b { border-color: #ff5a6a; box-shadow: 0 0 0 1px #ffd257; }

/* the pet page: the battle skill under the stat lines (js/petfx.js infoHtml) */
.eco-stats li.pet-skill { flex-wrap: wrap; row-gap: 2px; }
.eco-stats li.pet-skill small { flex: 1 1 100%; font-weight: 500; line-height: 1.45; opacity: 0.92; }

/* the collection page laid out as Lordnine's (js/content.js tab 'collect', 2026-10-14): tabs with a red count, one row a
   set (star, name, 1P, its pieces on the right), a row opens to its pieces; right page: the records' levels and the stats */
#ui .bookwin .clo-tabs { display: flex; gap: 2px; border-bottom: 2px solid rgba(255, 214, 120, 0.25); }
#ui .bookwin .clo-tab { position: relative; flex: 1; padding: 7px 4px 9px; border: 0; border-bottom: 3px solid transparent; background: none; color: #a99f8a; font: 700 0.95rem var(--thai); cursor: pointer; }
#ui .bookwin .clo-tab.on { color: #ffcf6a; border-bottom-color: #ffb340; }
#ui .bookwin .clo-tab em { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #c8463a; color: #fff; font: 700 0.72rem/1.5 var(--thai); font-style: normal; }
#ui .bookwin .clo-list { display: flex; flex-direction: column; gap: 6px; }
#ui .bookwin .clo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 7px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.32); border: 1px solid rgba(255, 255, 255, 0.08); }
#ui .bookwin .clo-row.can { border-color: #6fd66a; background: rgba(60, 120, 60, 0.22); }
#ui .bookwin .clo-row.done { opacity: 0.72; }
#ui .bookwin .clo-row.open { border-color: #ffb340; opacity: 1; }
#ui .bookwin .clo-star { width: 28px; height: 28px; padding: 0; }
#ui .bookwin .clo-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
#ui .bookwin .clo-name b { max-width: 100%; font: 700 0.95rem var(--thai); color: #f2ead6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bookwin .clo-name small { max-width: 100%; font: 500 0.74rem var(--thai); color: #b9ad94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .bookwin .clo-pt { display: inline-flex; align-items: center; gap: 5px; font: 700 0.9rem var(--thai); color: var(--pc); white-space: nowrap; }
#ui .bookwin .clo-pt i, #ui .bookwin .clo-state i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc) 45%, color-mix(in srgb, var(--pc) 45%, #000)); border: 2px solid #14100c; }
#ui .bookwin .clo-icons { display: flex; gap: 4px; justify-content: flex-end; }
#ui .bookwin .clo-icons .clx-ic { padding: 0; border: 2px solid color-mix(in srgb, var(--gc) 55%, #14100c); }
#ui .bookwin .clo-icons button.clx-ic.can { border-color: #6fd66a; cursor: pointer; }
#ui .bookwin .clo-icons button.clx-ic.can img { filter: none; }
#ui .bookwin .clo-icons .clx-ic.in { border-color: #2f9a6a; background: #124a3a; }
#ui .bookwin .clo-icons .clx-ic.in img { opacity: 0.25; }
#ui .bookwin .clo-icons .clx-ic.in i { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.2rem var(--thai); font-style: normal; color: #7dffb8; background: none; }
#ui .bookwin .clo-set { position: absolute; right: 1px; bottom: 0; font: 700 0.62rem var(--thai); color: var(--gc); }
#ui .bookwin .clo-detail { grid-column: 1 / -1; margin-top: 6px; padding-top: 8px; border-top: 1px solid rgba(255, 214, 120, 0.3); }
#ui .bookwin .clo-side { display: flex; flex-direction: column; gap: 6px; text-align: center; }
#ui .bookwin .clo-side h4 { margin: 8px 0 2px; font: 700 1rem var(--thai); color: #f2ead6; }
#ui .bookwin .clo-state, #ui .bookwin .clo-stats { list-style: none; margin: 0; padding: 0; }
#ui .bookwin .clo-state li { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font: 600 0.92rem var(--thai); color: var(--pc); text-align: left; }
#ui .bookwin .clo-state li span { flex: 1; }
#ui .bookwin .clo-state li small { color: #a99f8a; font-weight: 500; }
#ui .bookwin .clo-sum { color: #b9ad94; font: 500 0.78rem var(--thai); }
#ui .bookwin .clo-stats li { padding: 3px 0; font: 600 0.92rem var(--thai); color: #e9c98a; }
#ui .bookwin .clo-stats li.none { color: #a99f8a; font-weight: 500; }

/* the main menu with FIVE groups (2026-10-14, the user sent the page: the fashion group's title ran onto the right page, the
   lower cards spilled over the page foot and สังคม had no place): left column ตัวละคร / แฟชั่น · สัตว์เลี้ยง · พาหนะ / สังคม,
   right column การผจญภัย / ร้านค้าและงานฝีมือ; 30px rows that squeeze rather than spill */
#ui .bw-pause .hub-sec:not(.hub-settings) { overflow: hidden; }
#ui .bw-pause .hub-sec h3 { flex: 0 0 auto; min-width: 0; overflow: hidden; }
#ui .bw-pause .hub-tile { height: 30px; flex: 0 1 30px; min-height: 24px; gap: 12px; grid-template-columns: 28px 1fr auto; }
#ui .bw-pause .hub-tile img { width: 28px; height: 28px; }
#ui .bw-pause .hub-tile kbd { min-width: 22px; height: 22px; }
#ui .bw-pause .hub-tile .hub-badge:not(.net) { left: 43px; top: -3px; height: 17px; min-width: 17px; }

/* craft list (2026-10-14, the user sent the page: "แก้ไขภาพที่บกพร่อง"): the "can make" dot had become a cell of the slot's
   grid (the metal-slot rule makes every child position: relative), so it sat in the middle and pushed the item's picture
   out of the bottom of its frame. The dot is pinned to the slot's corner again and the picture stays inside the frame. */
#eco .cw-ic.cw-ic.cw-ic.cw-ic > .cw-dot { position: absolute; top: -4px; right: -2px; left: auto; z-index: 2; }
#eco .cw-ic { overflow: visible; grid-template: 100% / 100%; }
#eco .cw-ic > img { grid-area: 1 / 1; width: 52px; height: 52px; place-self: center; }

/* the character page's "wear the best" button (2026-10-14), on the row of the background picker */
#charpanel .bk-best { position: absolute; left: 252px; top: 231px; height: 34px; padding: 0 16px; white-space: nowrap; cursor: pointer; font: 700 16px/30px 'Mali', sans-serif; color: #3a2408;
  border: 0 solid transparent; border-image: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) 24 fill / 10px stretch; }
#charpanel .bk-best:hover { filter: brightness(1.12); }
/* the stat page (2026-10-15): "✦ แนะนำ" puts the points left in by the class's plan (they wait for ตกลง), and the stats
   carry tags - หลัก (the class's attack grows from it), แนะนำ (the plan's next two); an attack stat the class does not use
   is dimmed */
/* (in the button row: ยกเลิก · ✦ แนะนำ · ตกลง · คืนแต้ม, the three old ones a little narrower) */
#charpanel .bk-cancel { width: 88px; }
#charpanel .bk-suggest { left: 913px; top: 444px; width: 108px; color: #ffd75a !important; font-weight: 700 !important; }
#charpanel .bk-suggest:disabled { opacity: 0.55; }
#charpanel .bk-ok { left: 1027px; width: 112px; }
#charpanel .bk-reset { left: 1145px; width: 145px; font-size: 15px !important; }
#charpanel .bk-stag { display: inline-block; margin-left: 7px; padding: 3px 6px 2px; vertical-align: 2px; border-radius: 6px; font: 700 11px/1 'Mali', sans-serif; font-style: normal; }
#charpanel .bk-stag.main { color: #3a2408; background: #ffd75a; }
#charpanel .bk-stag.rec { color: #dff7d2; background: #2f5a2a; box-shadow: inset 0 0 0 1px #8ed07a; }
#charpanel .bk-stat.dim > img { filter: grayscale(0.7) brightness(1.25); opacity: 0.75; }
#charpanel .bk-stat.dim .bk-sname { opacity: 0.72; }
.ci-pop-tag { margin: 0 0 6px; padding: 5px 9px; border-radius: 9px; font: 700 0.78rem/1.4 var(--thai); }
.ci-pop-tag.main { color: #3a2408; background: #ffd75a; }
.ci-pop-tag.rec { color: #dff7d2; background: #2f5a2a; }
.ci-pop-tag.dim { color: #e8dfcc; background: rgba(255, 255, 255, 0.08); }
/* six tabs since the enhanced records came (2026-10-14): each as wide as its words, on one line */
#ui .bookwin .clo-tab { flex: 1 1 auto; padding: 7px 2px 9px; font-size: 0.88rem; white-space: nowrap; }
#ui .bookwin .clo-tab em { margin-left: 3px; padding: 0 5px; }

/* the chat grows upward (2026-10-14; js/mmo.js): the grip at the right of its tabs; --chat-h = the feed's height in design px */
#chat .chat-size { pointer-events: auto; margin-left: auto; width: calc(26px * var(--u)); height: calc(20px * var(--u)); padding: 0; cursor: ns-resize; color: #f3ecd6; font: 700 calc(13px * var(--u)) / 1 sans-serif;
  border: 0 solid transparent; background: none; border-image: url(../assets/ui_book/hud_tab_off.png) 20 32 fill / calc(8px * var(--u)) calc(12px * var(--u)) stretch; }
#chat .chat-size:hover { filter: brightness(1.3); }
/* the chat's settings (js/mmo.js: ⚙ in the head, a panel of switches; #chat[data-off] hides those categories) */
#chat .chat-cfg { pointer-events: auto; flex: 0 0 auto; width: calc(24px * var(--u)); height: calc(20px * var(--u)); padding: 0; cursor: pointer; color: #f3ecd6; font: 700 calc(12px * var(--u)) / 1 sans-serif;
  border: 0 solid transparent; background: none; border-image: url(../assets/ui_book/hud_tab_off.png) 20 32 fill / calc(8px * var(--u)) calc(12px * var(--u)) stretch; }
#chat .chat-cfg:hover { filter: brightness(1.3); }
#chat .chat-cfgpan { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 30; pointer-events: auto; display: flex; flex-direction: column; gap: 4px; min-width: 250px; padding: 10px 12px 12px; border-radius: 12px;
  background: rgba(22, 16, 10, 0.96); border: 1.5px solid rgba(217, 164, 67, 0.75); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); color: #f3e3b6; font: 600 13px/1.3 Mali, sans-serif; }
#chat .chat-cfgpan > b { font: 800 14px Mali, sans-serif; color: #ffd76a; margin-bottom: 2px; }
#chat .chat-cfgpan label { display: flex; align-items: center; gap: 8px; padding: 3px 2px; cursor: pointer; }
#chat .chat-cfgpan input { width: 16px; height: 16px; accent-color: #e6a93a; cursor: pointer; }
#chat .chat-cfgok { align-self: flex-end; margin-top: 4px; padding: 4px 16px; border-radius: 999px; border: 1.5px solid #ffd76a; background: linear-gradient(180deg, #ffe07a, #f0a92c); color: #3a2208; font: 800 13px Mali, sans-serif; cursor: pointer; }
#chat[data-off~="talk"] .chat-line.cf-talk, #chat[data-off~="pm"] .chat-line.cf-pm, #chat[data-off~="loot"] .chat-line.cf-loot, #chat[data-off~="xp"] .chat-line.cf-xp,
#chat[data-off~="news"] .chat-line.cf-news, #chat[data-off~="jn"] .chat-line.cf-jn, #chat[data-off~="sys"] .chat-line.cf-sys, #chat[data-off~="quest"] .chat-line.cf-quest { display: none; }
/* every player's name in the chat in orange (2026-10-19, the user: "ชื่อผู้เล่นในแชทให้ขึ้นเป็นสีส้ม"); the line's own colour stays */
#chat .chat-feed .chat-line .who, #chat .chat-feed .chat-line.me .who, #chat .chat-feed .chat-line.kk .who, #chat .chat-feed .chat-line.whisper .who { color: #ffb466; }
/* (yours the deeper orange, the others' lighter: "ของเราส้มเข้ม เราจะเห็นคนอื่นสีส้มแต่ไม่เข้มเท่า") */
#chat .chat-feed .chat-line .who.mine { color: #ff7a10; }
#chat.sized .chat-feed { max-height: calc(var(--chat-h) * var(--u)); }
#chat.tall .chat-feed { pointer-events: auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(217, 164, 67, 0.6) transparent; }

/* the chat's fifth room, ห้องเกรียนคีย์บอร์ด (2026-10-14; channel 'kk', js/mmo.js): its own tab shows only the room; the talk,
   quest and system tabs leave it out; the tabs sit on one line beside the size grip */
#chat[data-tab="kk"] .chat-line:not(.kk) { display: none; }
#chat[data-tab="talk"] .chat-line.kk, #chat[data-tab="sys"] .chat-line.kk { display: none; }
#chat .chat-line.kk { color: #ffd9c2; }
#chat .chat-line.kk .tag { color: #ff7a5c; }
#chat .chat-line.kk .who { color: #ffb199; }
#chat .chat-head { justify-content: flex-start; }
#chat .chat-tabs { flex: 1 1 auto; min-width: 0; }
#chat .chat-tab { white-space: nowrap; flex: 0 1 auto; min-width: 0; padding-left: calc(7px * var(--u)); padding-right: calc(7px * var(--u)); }
#chat .chat-tab[data-ctab="kk"] { overflow: hidden; text-overflow: ellipsis; }
#chat .chat-tab { font-size: calc(10px * var(--u)); padding-left: calc(5px * var(--u)); padding-right: calc(5px * var(--u)); }
#chat .chat-tabs { gap: calc(2px * var(--u)); }
#chat .chat-size { flex: 0 0 auto; width: calc(22px * var(--u)); }
#chat .chat-head { gap: calc(3px * var(--u)); }
#chat .chat-tab { flex: 0 0 auto; }
#chat .chat-tab { padding-left: calc(4px * var(--u)); padding-right: calc(4px * var(--u)); }
#chat .chat-tabs { gap: calc(1px * var(--u)); }

/* salvage settings (2026-10-14; js/economy.js Eco.salvCfg): one card of chips over the salvage grid */
#eco .sv-box { margin: 0 0 10px; padding: 10px 12px 12px; border: 1px solid rgba(217, 164, 67, 0.55); border-radius: 10px; background: rgba(10, 9, 8, 0.55); display: flex; flex-direction: column; gap: 7px; }
#eco .sv-head { display: flex; align-items: baseline; gap: 10px; }
#eco .sv-head b { font: 700 1.05rem var(--thai); color: #ffd98a; white-space: nowrap; }
#eco .sv-head small { flex: 1; min-width: 0; font: 500 0.76rem var(--thai); color: #cfc7b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eco .sv-reset { border: 0; background: none; padding: 0; cursor: pointer; font: 600 0.76rem var(--thai); color: #b9b1a0; text-decoration: underline; white-space: nowrap; }
#eco .sv-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; }
#eco .sv-row > span { font: 600 0.82rem var(--thai); color: #e9e2cf; white-space: nowrap; }
#eco .sv-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
#eco .sv-chip { --c: #f2c14e; padding: 3px 11px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #a9a190; font: 600 0.8rem/1.4 var(--thai); cursor: pointer; white-space: nowrap; }
#eco .sv-chip:hover { border-color: var(--c); color: #fff; }
#eco .sv-chip.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 26%, #14110c); color: #fff; }
#eco .sv-chip.on::before { content: '\2713  '; color: var(--c); font-weight: 800; }
#eco .sv-go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; }
#eco .sv-go small { flex: 1 1 100%; font: 500 0.72rem var(--thai); color: #b9b1a0; }
#eco .eco-grid .eco-cell.sv-fit { outline: 2px solid #62d26f; outline-offset: -2px; }
#eco .sv-held { color: #8fe08a; font-weight: 700; }

/* the fish album's owning stats (2026-10-14; js/lifeskill.js L.owning, js/lifewin.js) */
#life .lf-own { color: #cfc7b3; }
#life .lf-own b { color: #ffd98a; }
#life .lf-own.got, #life .lf-own.got b { color: #8fe08a; }
#life .lf-ownbox { padding: 8px 10px; border: 1px solid rgba(217, 164, 67, 0.5); border-radius: 8px; background: rgba(10, 9, 8, 0.45); }
#life .lf-ownbox > b { display: block; font: 700 0.9rem/1.4 var(--thai); color: #ffd98a; }
#life .lf-ownbox ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#life .lf-ownbox li { display: flex; justify-content: space-between; gap: 10px; font: 500 0.78rem/1.4 var(--thai); color: #b9b1a0; }
#life .lf-ownbox li i { font-style: normal; text-align: right; }
#life .lf-ownbox li.got { color: #8fe08a; }

/* craft: the "at once" button (2026-10-14; js/craft.js Craft.instant) under the count, and beside หยุด while a run is going */
#eco .cw-now { margin-top: 6px; padding: 5px 12px; border: 0 solid transparent; cursor: pointer; white-space: nowrap; font: 700 13px/1.4 Mali, sans-serif; color: #3a2408;
  border-image: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) 24 fill / 9px stretch; }
#eco .cw-now:hover:not(:disabled) { filter: brightness(1.12); }
#eco .cw-now:disabled { filter: grayscale(0.8) brightness(0.75); cursor: default; }
#eco .cw-progbtns { display: flex; gap: 6px; flex-wrap: wrap; }
/* the salvage settings folded away (2026-10-14): the head, one line of the rule and the buttons */
#eco .sv-fold { flex: 0 0 auto; padding: 2px 12px; border-radius: 999px; border: 1.5px solid rgba(242, 193, 78, 0.8); background: rgba(242, 193, 78, 0.12); color: #ffd98a; font: 700 0.78rem/1.5 var(--thai); cursor: pointer; white-space: nowrap; }
#eco .sv-fold:hover { background: rgba(242, 193, 78, 0.28); color: #fff; }
#eco .sv-box.shut { gap: 6px; padding-bottom: 10px; }
#eco .sv-box.shut .sv-go small { flex: 0 1 auto; }

/* the salvage result card (2026-10-14; js/economy.js salvCard): what the pieces turned into, in the middle of the screen */
#svres { position: fixed; inset: 0; z-index: 960; display: grid; place-items: center; background: rgba(0, 0, 0, 0.35); cursor: pointer; animation: svrFade 0.18s ease-out both; }
#svres.out { opacity: 0; transition: opacity 0.2s; }
#svres .svr-in { min-width: 320px; max-width: min(640px, 92vw); padding: 18px 26px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 16px;
  background: rgba(18, 14, 10, 0.96); border: 2px solid #d9a443; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.07); animation: svrPop 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
#svres .svr-t { font: 800 1.5rem/1.2 var(--thai); color: #ffd98a; }
#svres small { font: 600 0.82rem var(--thai); color: #cfc7b3; }
#svres .svr-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0 4px; }
#svres .svr-it { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: svrItem 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
#svres .svr-it i { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.07); border: 1.5px solid rgba(217, 164, 67, 0.6); }
#svres .svr-it img { width: 54px; height: 54px; object-fit: contain; }
#svres .svr-it em { font: 800 1.25rem/1.2 Fredoka, var(--thai); font-style: normal; color: #8fe08a; }
#svres .svr-it u { text-decoration: none; text-align: center; font: 600 0.78rem/1.25 var(--thai); color: #f1ead6; }
#svres .svr-close { color: #8f887a; font-size: 0.72rem; }
@keyframes svrFade { from { opacity: 0; } }
@keyframes svrPop { from { opacity: 0; scale: 0.8; } }
@keyframes svrItem { from { opacity: 0; scale: 0.5; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { #svres, #svres .svr-in, #svres .svr-it { animation: none; } }

/* the salvage page laid out as Lordnine's (2026-10-14; js/economy.js tab 'salvage'): left = tray, rewards, the button;
   right = the bag with kind tabs, the two auto buttons and the cog */
#eco .lv-left { display: flex; flex-direction: column; gap: 8px; height: 100%; }
#eco .lv-tray { min-height: 190px; max-height: 250px; overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-content: start; border: 1px solid rgba(217, 164, 67, 0.45); border-radius: 8px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6); }
#eco .lv-tray.none { display: grid; grid-template-columns: 1fr; place-items: center; }
#eco .lv-empty { text-align: center; font: 500 0.86rem/1.6 var(--thai); color: #9a927f; }
#eco .lv-h { margin: 4px 0 0; align-self: flex-start; padding: 2px 16px 2px 10px; font: 700 0.86rem/1.5 var(--thai); color: #ffd98a; background: linear-gradient(90deg, rgba(217, 164, 67, 0.3), rgba(217, 164, 67, 0)); border-left: 3px solid #d9a443; }
#eco .lv-rws { display: flex; flex-wrap: wrap; gap: 8px; min-height: 62px; align-items: flex-start; }
#eco .lv-rw { width: 66px; display: flex; flex-direction: column; align-items: center; position: relative; }
#eco .lv-rw i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(217, 164, 67, 0.5); }
#eco .lv-rw img { width: 38px; height: 38px; object-fit: contain; }
#eco .lv-rw b { margin-top: -12px; padding: 0 5px; border-radius: 6px; background: #14110c; font: 800 0.8rem/1.3 Fredoka, var(--thai); color: #8fe08a; }
#eco .lv-rw u { text-decoration: none; text-align: center; font: 500 0.64rem/1.2 var(--thai); color: #cfc7b3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#eco .lv-dash { font: 500 0.8rem var(--thai); color: #8f887a; align-self: center; }
#eco .lv-go { display: flex; justify-content: center; margin-top: auto; padding-top: 6px; }
#eco .lv-btn { position: relative; min-width: 230px; padding: 8px 30px 10px; display: flex; flex-direction: column; align-items: center; cursor: pointer; border: 0 solid transparent; color: #3a2408;
  border-image: var(--uib-btn_gold, url(../assets/ui_book/btn_gold.png)) 24 fill / 12px stretch; }
#eco .lv-btn b { font: 800 1.35rem/1.2 var(--thai); }
#eco .lv-btn small { font: 700 0.8rem var(--thai); }
#eco .lv-btn kbd { position: absolute; right: 6px; bottom: 4px; padding: 0 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.3); color: #fff3d0; font: 700 0.62rem/1.6 Fredoka, sans-serif; }
#eco .lv-btn:hover:not(:disabled) { filter: brightness(1.12); }
#eco .lv-btn:disabled { filter: grayscale(0.85) brightness(0.7); cursor: default; }
#eco .lv-fuse { margin-top: 2px; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#eco .lv-fuse > small { flex: 1; min-width: 0; }
#eco .lv-right { display: flex; flex-direction: column; gap: 8px; height: 100%; }
#eco .lv-kinds { display: flex; gap: 3px; border-bottom: 2px solid rgba(217, 164, 67, 0.3); }
#eco .lv-kind { flex: 1 1 auto; padding: 6px 4px 7px; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer; white-space: nowrap; font: 700 0.84rem var(--thai); color: #a99f8a; }
#eco .lv-kind.on { color: #ffcf6a; border-bottom-color: #ffb340; }
#eco .lv-kind em { margin-left: 4px; font: 600 0.7rem var(--thai); font-style: normal; color: #8f887a; }
#eco .eco-grid.lv-bag { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(6, 1fr); align-content: start; padding: 2px; }
#eco .lv-note { font: 500 0.74rem var(--thai); color: #b9b1a0; }
#eco .lv-foot { display: flex; gap: 8px; align-items: stretch; }
#eco .lv-foot .btn { flex: 1; white-space: nowrap; }
#eco .lv-cog { flex: 0 0 44px; border-radius: 10px; border: 1.5px solid rgba(217, 164, 67, 0.7); background: rgba(255, 255, 255, 0.06); color: #ffd98a; font: 700 1.3rem/1 sans-serif; cursor: pointer; }
#eco .lv-cog:hover { background: rgba(242, 193, 78, 0.25); color: #fff; }
#eco .lv-bag .eco-hint { grid-column: 1 / -1; }

/* salvage: the fee on the button, the detail switch and its panel (2026-10-14, Lordnine's) */
#eco .lv-btn .lv-fee { display: inline-flex; align-items: center; gap: 4px; padding: 1px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); color: #fff3d0; }
#eco .lv-btn .lv-fee img { width: 16px; height: 16px; }
#eco .lv-btn .lv-fee.short { color: #ff9a8a; }
#svres .svr-fee { color: #ffb199; }
#eco .lv-right { position: relative; }
#eco .lv-dt { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 600 0.8rem var(--thai); color: #e9e2cf; }
#eco .lv-sw { position: relative; width: 62px; height: 24px; padding: 0 8px 0 26px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #a9a190; font: 800 0.7rem/1 Fredoka, sans-serif; text-align: right; cursor: pointer; }
#eco .lv-sw i { position: absolute; left: 3px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #8f887a; transition: left 0.15s; }
#eco .lv-sw.on { border-color: #62d26f; background: rgba(98, 210, 111, 0.22); color: #fff; padding: 0 26px 0 8px; text-align: left; }
#eco .lv-sw.on i { left: 41px; background: #8fe08a; }
#eco .lv-detail { position: absolute; left: 0; right: 0; top: 40px; bottom: 96px; z-index: 3; overflow-y: auto; padding: 10px 12px; border-radius: 10px; background: rgba(16, 13, 9, 0.97); border: 1.5px solid #d9a443; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); }
#eco .lv-dx { position: sticky; top: 0; float: right; z-index: 1; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 0.9rem/1 sans-serif; cursor: pointer; }
#eco .lv-detail { position: relative; left: auto; right: auto; top: auto; bottom: auto; flex: 0 0 auto; max-height: 215px; box-shadow: none; }

/* salvage: a reward is a button; its card says what the material is for (2026-10-14) */
#eco button.lv-rw { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
#eco button.lv-rw:hover i, #eco button.lv-rw.on i { border-color: #ffd98a; background: rgba(242, 193, 78, 0.2); }
#eco .lv-matinfo { position: relative; padding: 8px 12px 9px; border-radius: 10px; background: rgba(16, 13, 9, 0.92); border: 1.5px solid #d9a443; display: flex; flex-direction: column; gap: 3px; max-height: 190px; overflow-y: auto; }
#eco .lv-matinfo .lv-dx { position: absolute; right: 6px; top: 6px; float: none; width: 24px; height: 24px; }
#eco .lv-matinfo > b { display: flex; align-items: center; gap: 8px; font: 700 0.95rem var(--thai); color: #ffd98a; padding-right: 30px; }
#eco .lv-matinfo > b img { width: 26px; height: 26px; object-fit: contain; }
#eco .lv-matinfo > b em { margin-left: 4px; font: 600 0.74rem var(--thai); font-style: normal; color: #b9b1a0; }
#eco .lv-matinfo small { font: 500 0.76rem/1.4 var(--thai); color: #cfc7b3; }
#eco .lv-matinfo h6 { margin: 3px 0 0; font: 700 0.8rem var(--thai); color: #8fe08a; }
#eco .lv-matinfo ul { margin: 0; padding-left: 18px; font: 500 0.78rem/1.45 var(--thai); color: #f1ead6; }
#eco .lv-left { position: relative; }
#eco .lv-matinfo { position: absolute; left: 0; right: 0; top: 0; z-index: 3; max-height: 250px; min-height: 150px; background: rgba(16, 13, 9, 0.98); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); }
/* the craft result card (2026-10-14; js/craft.js madeCard) shares the salvage card's look */
#svres .svr-great { color: #ffd24a; font-weight: 800; }
#svres .svr-it.great i { border-color: #ffd24a; box-shadow: 0 0 0 2px rgba(255, 210, 74, 0.35); }
#svres .svr-it.great em::after { content: ' ✦'; color: #ffd24a; }
#svres.made .svr-list { max-height: 50vh; overflow-y: auto; }

/* a skill book's page in the bag (2026-10-14; js/economy.js skillBookBox): the skill it teaches and the way to it */
#eco .eco-sbbox { margin: 8px 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; border: 1.5px solid rgba(217, 164, 67, 0.6); background: rgba(10, 9, 8, 0.5); }
#eco .eco-sbbox .sbx-h { display: flex; align-items: center; gap: 10px; }
#eco .eco-sbbox .sbx-h img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; }
#eco .eco-sbbox .sbx-h span { display: flex; flex-direction: column; min-width: 0; }
#eco .eco-sbbox .sbx-h b { font: 700 1.05rem/1.3 var(--thai); color: #ffd98a; }
#eco .eco-sbbox .sbx-h small { font: 500 0.76rem/1.4 var(--thai); color: #cfc7b3; }
#eco .eco-sbbox p { margin: 0; font: 500 0.84rem/1.5 var(--thai); color: #f1ead6; }
#eco .eco-sbbox em { font: 600 0.8rem/1.4 var(--thai); font-style: normal; color: #ffd98a; }
#eco .eco-sbbox em.got, #eco .eco-sbbox em.can { color: #8fe08a; }
#eco .eco-sbbox em.no { color: #ffb199; }
#eco .eco-sbbox .btn { align-self: flex-start; }

/* the market's "ของที่ลงขาย" page, laid out as Lordnine's sales page (2026-10-14; js/economy.js market.mode 'mine') */
#eco .eco-mmodes .mk-n { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); font: 700 0.72rem/1.5 var(--thai); font-style: normal; }
#eco .mk-head { display: flex; align-items: baseline; gap: 12px; margin: 8px 2px 4px; }
#eco .mk-head b { font: 700 1.05rem var(--thai); color: #ffd98a; }
#eco .mk-head small { font: 600 0.8rem var(--thai); color: #cfc7b3; }
#eco .mk-cols, #eco .mk-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 92px 78px 138px; align-items: center; column-gap: 8px; }
#eco .mk-cols { padding: 4px 10px; font: 600 0.72rem var(--thai); color: #8f887a; border-bottom: 1px solid rgba(217, 164, 67, 0.35); }
#eco .mk-cols span:first-child { grid-column: 1 / 3; }
#eco .mk-cols span:nth-child(2), #eco .mk-cols span:nth-child(3) { text-align: right; }
#eco .mk-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
#eco .mk-row { padding: 5px 10px; border: 1px solid rgba(217, 164, 67, 0.4); border-radius: 8px; background: rgba(10, 9, 8, 0.5); cursor: pointer; }
#eco .mk-row:hover, #eco .mk-row.sel { border-color: #ffd98a; background: rgba(242, 193, 78, 0.12); }
#eco .mk-row > .eco-cell { width: 50px; height: 50px; pointer-events: none; }
#eco .mk-name { display: flex; flex-direction: column; min-width: 0; }
#eco .mk-name b { font: 700 0.92rem/1.3 var(--thai); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eco .mk-name small, #eco .mk-net { display: inline-flex; align-items: center; gap: 4px; font: 700 0.86rem Fredoka, var(--thai); color: #ffe9a8; }
#eco .mk-name img, #eco .mk-net img, #eco .mk-foot img { width: 16px; height: 16px; }
#eco .mk-net { justify-content: flex-end; color: #8fe08a; }
#eco .mk-fee { text-align: right; font: 600 0.8rem Fredoka, var(--thai); color: #ffb199; }
#eco .mk-end { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
#eco .mk-end small { text-align: center; font: 500 0.66rem var(--thai); color: #b9b1a0; white-space: nowrap; }
#eco .mk-cancel { color: #ffd0c4; border-color: rgba(200, 90, 70, 0.8); }
#eco .mk-foot { position: sticky; bottom: -4px; margin-top: 8px; padding: 8px 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: 1px solid rgba(217, 164, 67, 0.45); background: #1d1b18; font: 600 0.78rem var(--thai); color: #cfc7b3; }
#eco .mk-foot b { display: inline-flex; align-items: center; gap: 3px; color: #ffe9a8; font: 700 0.9rem Fredoka, var(--thai); }
#eco .mk-foot .btn:first-of-type { margin-left: auto; }
#eco .mk-log { margin-top: 10px; }
#eco .mk-log h5 { margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; font: 700 0.95rem var(--thai); color: #ffd98a; }
#eco .mk-log h5 small { flex: 1; font: 500 0.72rem var(--thai); color: #b9b1a0; }
#eco .mk-lrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
#eco .mk-lrow img { width: 32px; height: 32px; object-fit: contain; }
#eco .mk-lrow span { display: flex; flex-direction: column; min-width: 0; }
#eco .mk-lrow b { font: 600 0.82rem/1.3 var(--thai); color: #f1ead6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#eco .mk-lrow small { font: 500 0.68rem/1.3 var(--thai); color: #b9b1a0; }
/* ตลาดกลาง trades in เพชร only (2026-10-17, js/economy.js): diamond price chips, the price box, the note's badge */
#eco .eco-goldchip.mk-dia, #ui .bookwin .eco-goldchip.mk-dia, #eco .mk-lrow em.mk-dia { color: #8fe2ff; }
#eco .eco-goldchip.mk-dia[data-info] { cursor: pointer; }
#eco .eco-listbox .mk-in { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
#eco .eco-listbox .mk-in img { width: 24px; height: 24px; flex: none; cursor: pointer; }
#eco .eco-listbox .mk-calc b { color: #8fe2ff; }
#eco .eco-note .mk-only { display: inline-flex; align-items: center; gap: 3px; margin-right: 4px; color: #8fe2ff; white-space: nowrap; }
#eco .eco-note .mk-only img { width: 18px; height: 18px; }
#eco .mk-short { color: #ff8a7a; }
:root[data-booklight] #ui .bookwin .eco-goldchip.mk-dia, :root[data-booklight] #eco .mk-lrow em.mk-dia, :root[data-booklight] #eco .eco-listbox .mk-calc b, :root[data-booklight] #eco .eco-note .mk-only { color: #11708f; }
:root[data-booklight] #eco .mk-short { color: #b3261e; }
/* the least price a listing may ask (2026-10-18, 10 เพชร: DATA.WALLET.MARKET.minPrice); red while a lower number is typed */
#eco .eco-listbox .mk-min.low { color: #ff8a7a; font-weight: 700; }
:root[data-booklight] #eco .eco-listbox .mk-min.low { color: #b3261e; }
/* the market names no seller (2026-10-18): only your own listing says so */
#eco .eco-rname small.mk-own { color: #e8c66a; }
:root[data-booklight] #eco .eco-rname small.mk-own { color: #8a6412; }
#eco .mk-lrow em { font: 700 0.86rem Fredoka, var(--thai); font-style: normal; color: #8fe08a; white-space: nowrap; }
#eco .mk-cols, #eco .mk-row { grid-template-columns: 50px minmax(0, 1fr) 70px 52px 118px; column-gap: 6px; }
#eco .mk-name b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.86rem; line-height: 1.25; }
#eco .mk-end small { font-size: 0.6rem; }

/* the "what is this?" card of any thing (2026-10-14; js/economy.js Eco.infoPop, opened by [data-info]) */
#itempop { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); }
#itempop .ip-in { position: relative; width: min(460px, 92vw); max-height: 82vh; overflow-y: auto; padding: 14px 18px 14px; display: flex; flex-direction: column; gap: 6px; border-radius: 14px; background: rgba(18, 14, 10, 0.98); border: 2px solid #d9a443; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65); color: #f1ead6; }
#itempop .ip-x { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.8); background: #1c160e; color: #ffd98a; font: 700 13px/1 sans-serif; cursor: pointer; }
#itempop .ip-h { display: flex; align-items: center; gap: 12px; padding-right: 34px; }
#itempop .ip-h img { width: 52px; height: 52px; object-fit: contain; }
#itempop .ip-h span { display: flex; flex-direction: column; }
#itempop .ip-h b { font: 800 1.15rem/1.3 var(--thai); color: #ffd98a; }
#itempop .ip-h small { font: 600 0.8rem var(--thai); color: #b9b1a0; }
#itempop p { margin: 0; font: 500 0.84rem/1.5 var(--thai); color: #cfc7b3; }
#itempop h6 { margin: 4px 0 0; font: 700 0.84rem var(--thai); color: #8fe08a; }
#itempop ul { margin: 0; padding-left: 18px; font: 500 0.82rem/1.5 var(--thai); }
#itempop .eco-sbbox { margin: 4px 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; border-radius: 10px; border: 1.5px solid rgba(217, 164, 67, 0.6); background: rgba(10, 9, 8, 0.5); }
#itempop .eco-sbbox .sbx-h { display: flex; align-items: center; gap: 10px; }
#itempop .eco-sbbox .sbx-h img { width: 42px; height: 42px; }
#itempop .eco-sbbox .sbx-h span { display: flex; flex-direction: column; }
#itempop .eco-sbbox .sbx-h b { color: #ffd98a; font: 700 1rem var(--thai); }
#itempop .eco-sbbox em { font: 600 0.8rem var(--thai); font-style: normal; color: #8fe08a; }
[data-info] { cursor: pointer; }
.sb-info:hover { filter: brightness(1.25); outline: 1px solid rgba(255, 217, 138, 0.7); outline-offset: 2px; border-radius: 8px; }
#itempop .eco-src { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding: 0 0 6px; border-radius: 9px; overflow: hidden; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.28); }
#itempop .eco-src > b { display: block; padding: 6px 12px; font: 700 15px/1.2 'Mali', sans-serif; color: #f6dc98; background: rgba(217, 164, 67, 0.14); }
#itempop .eco-srcrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; margin: 0 6px; padding: 6px 8px; border: 0; border-radius: 7px; cursor: pointer; background: rgba(255, 255, 255, 0.04); text-align: left; }
#itempop .eco-srcrow:hover:not(:disabled) { background: rgba(242, 193, 78, 0.18); }
#itempop .eco-srcrow:disabled { cursor: default; }
#itempop .eco-srcrow img { width: 30px; height: 30px; object-fit: contain; }
#itempop .eco-srcrow span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#itempop .eco-srcrow span b { font: 600 14px/1.2 'Mali', sans-serif; color: #f6efdc; }
#itempop .eco-srcrow span small { font: 400 12px/1.35 'Mali', sans-serif; color: #b9b1a0; }
#itempop .eco-srcrow em { font: 700 13px/1 'Mali', sans-serif; font-style: normal; color: #f2c14e; white-space: nowrap; }

/* "นำไปใช้ที่": where a thing goes (2026-10-14; js/economy.js Eco.usesGoHtml) — the same rows as "หาได้จาก", green headed; the
   machine the button led to glows for a moment in the gacha hall */
#ui .bookwin .eco-src.eco-uses, #itempop .eco-src.eco-uses { margin: 8px 0; box-shadow: inset 0 0 0 1px rgba(110, 200, 120, 0.45); }
#ui .bookwin .eco-src.eco-uses > b, #itempop .eco-src.eco-uses > b { color: #a6ecb0; background: rgba(110, 200, 120, 0.16); }
.gc-m.gc-here { animation: gcHere 1.6s ease-out 1; }
@keyframes gcHere { 0%, 60% { filter: drop-shadow(0 0 18px #ffe08a) brightness(1.25); } 100% { filter: none; } }
#pause .row.music-off input[type=range] { opacity: 0.45; } #pause .row.music-off label { color: #b9b1a0 !important; white-space: nowrap; }
/* card book: the "strongest deck" button and the replace-a-slot row (2026-10-14; js/cards.js autoDeck / putfree) */
#ui .bookwin .cd-gain .cd-auto { align-self: flex-start; margin: 2px 0 4px; }
#ui .cd-repl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#ui .cd-repl small { flex: 1 1 100%; color: #ffd98a; }
/* card book: the deck's stats one a row in two columns (2026-10-14; js/cards.js statGrid) */
#ui .bookwin .cd-statg { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
#ui .bookwin .cd-statg li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 2px; border-bottom: 1px solid rgba(217, 164, 67, 0.18); font: 500 14px/1.3 'Mali', sans-serif; color: #e9e2cf; }
#ui .bookwin .cd-statg li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui .bookwin .cd-statg li b { font: 700 14px/1.3 'Fredoka', 'Mali', sans-serif; color: #8fe08a; white-space: nowrap; }
#ui .bookwin .cd-statx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#ui .bookwin .cd-statx i { font-style: normal; padding: 2px 10px; border-radius: 999px; background: rgba(242, 193, 78, 0.16); border: 1px solid rgba(242, 193, 78, 0.5); color: #ffd98a; font: 600 13px/1.5 'Mali', sans-serif; }
#ui .bookwin .cd-none { color: #b9b1a0; }
#ui .bookwin .cd-indeck-note { margin: 2px 2px 6px; font: 500 13px/1.4 "Mali", sans-serif; color: #b9b1a0; } /* (2026-10-14: a card in the deck leaves the book grid) */
/* card book: drag a card onto a deck slot (2026-10-14; js/cards.js) */
#ui .bookwin .cd-cell[draggable="true"] { cursor: grab; }
body.cd-dragging #ui .bookwin .cd-slot { outline: 2px dashed rgba(255, 217, 138, 0.55); outline-offset: 2px; }
#ui .bookwin .cd-slot.drop { outline: 3px solid #8fe08a !important; outline-offset: 2px; filter: brightness(1.2); }
/* card book: which class skills the deck strengthens (2026-10-14; js/cards.js skillBoostList) */
#ui .bookwin .cd-skb { margin-top: 6px; }
#ui .bookwin .cd-skb summary { cursor: pointer; font: 600 13px/1.6 'Mali', sans-serif; color: #ffd98a; }
#ui .bookwin .cd-skb p { margin: 4px 0; font: 500 12px/1.5 'Mali', sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-skb ul { list-style: none; margin: 0; padding: 0; }
#ui .bookwin .cd-skb li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 2px; border-bottom: 1px solid rgba(217, 164, 67, 0.18); font: 500 13px/1.35 'Mali', sans-serif; color: #e9e2cf; }
#ui .bookwin .cd-skb li b { color: #8fe08a; font-weight: 700; text-align: right; }
#ui .bookwin .cd-skb h5 { margin: 8px 0 2px; font: 700 14px/1.4 'Mali', sans-serif; color: #ffd98a; }
#ui .bookwin .cd-skb p { margin: 4px 0 0; }
#ui .bookwin .cd-statx:empty { display: none; }

/* card book: owning stats + collection milestones at the head, deck combos (2026-10-14; js/cards.js) */
#ui .bookwin .cd-mile { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(10, 9, 8, 0.45); border: 1px solid rgba(217, 164, 67, 0.45); }
#ui .bookwin .cd-mile b { font: 700 14px/1.4 'Mali', sans-serif; color: #ffd98a; }
#ui .bookwin .cd-mile small { display: block; font: 500 12px/1.45 'Mali', sans-serif; color: #cfc7b3; }
#ui .bookwin .cd-mbar span { display: block; font: 600 12px/1.4 'Mali', sans-serif; color: #e9e2cf; }
#ui .bookwin .cd-mbar i { display: block; height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
#ui .bookwin .cd-mbar i b { display: block; height: 100%; background: linear-gradient(90deg, #d9a443, #ffe08a); }
#ui .bookwin .cd-mile .btn { align-self: flex-start; }
#ui .bookwin .cd-combo { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#ui .bookwin .cd-combo h5 { margin: 0; font: 700 14px/1.4 'Mali', sans-serif; color: #ffd98a; }
#ui .bookwin .cd-combo i { font-style: normal; font: 600 13px/1.4 'Mali', sans-serif; color: #8fe08a; }
#ui .bookwin .cd-combo.off small { font: 500 12px/1.45 'Mali', sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-combo h5 small { font-weight: 500; color: #b9b1a0; font-size: 12px; } #ui .bookwin .cd-cnext { font: 500 12px/1.5 "Mali", sans-serif; color: #b9b1a0; }

/* cards: tier ornaments, the shiny foil, the awakened light (2026-10-14; js/cards.js ovl, art assets/ui_cards/tier) */
.cd .cd-tov, .cd .cd-awk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.cd .cd-awk { mix-blend-mode: screen; z-index: 5; }
.cd.aw { filter: drop-shadow(0 0 6px rgba(255, 224, 138, 0.85)); }
.cd .cd-holo { position: absolute; inset: 0; z-index: 7; pointer-events: none; mix-blend-mode: screen; opacity: 0.85;
  background: url(../assets/ui_cards/tier/holo.png) 0 0 / 200% 100% repeat-x, linear-gradient(115deg, rgba(255, 120, 220, 0.12), rgba(120, 230, 255, 0.12), rgba(255, 230, 120, 0.12)); animation: cdHolo 6s linear infinite; }
@keyframes cdHolo { to { background-position: -200% 0, 0 0; } }
.cd .cd-shb { position: absolute; right: 4%; top: 3%; z-index: 8; font: 800 9cqi/1 Fredoka, sans-serif; font-style: normal; color: #fff6c8; text-shadow: 0 0 2px #7a4a00, 0 0 6px #ffb3f0; }
#ui .bookwin .cd-shtag, #ui .bookwin .cd-awtag { font-style: normal; padding: 0 8px; border-radius: 999px; font: 700 12px/1.6 'Mali', sans-serif; }
#ui .bookwin .cd-shtag { background: linear-gradient(90deg, #ff9ad9, #9ae6ff, #ffe39a); color: #2a1020; }
#ui .bookwin .cd-awtag { background: #ffe08a; color: #3a2408; }
#ui .bookwin .cd-awbtn { background: linear-gradient(180deg, #fff1b8, #e9b54a); color: #3a2408; }
@media (prefers-reduced-motion: reduce) { .cd .cd-holo { animation: none; } }
/* card book: the collection page (2026-10-14; js/cards.js ownHtml) */
#ui .bookwin .cd-ownbtn { float: right; margin-left: 8px; }
#ui .bookwin .cd-own .cd-ownhow { margin: 6px 2px 4px; font: 500 12px/1.5 'Mali', sans-serif; color: #b9b1a0; }
#ui .bookwin .cd-ownl, #ui .bookwin .cd-ownc { list-style: none; margin: 4px 0 8px; padding: 0; }
#ui .bookwin .cd-ownl li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 4px; border-bottom: 1px solid rgba(217, 164, 67, 0.18); font: 500 13px/1.35 'Mali', sans-serif; color: #cfc7b3; }
#ui .bookwin .cd-ownl li b { text-align: right; color: #e9e2cf; font-weight: 600; }
#ui .bookwin .cd-ownl li.done span, #ui .bookwin .cd-ownl li.done b { color: #8fe08a; }
#ui .bookwin .cd-ownl li.ready span { color: #ffd98a; font-weight: 700; }
#ui .bookwin .cd-ownc li button { width: 100%; display: flex; justify-content: space-between; gap: 10px; padding: 5px 6px; border: 0; border-bottom: 1px solid rgba(217, 164, 67, 0.18); background: none; cursor: pointer; text-align: left; font: 500 13px/1.35 'Mali', sans-serif; color: #e9e2cf; }
#ui .bookwin .cd-ownc li button:hover { background: rgba(242, 193, 78, 0.12); }
#ui .bookwin .cd-ownc .cd-ownn i { font-style: normal; color: #b9b1a0; font-size: 12px; }
#ui .bookwin .cd-ownc li b { color: #8fe08a; font-weight: 600; white-space: nowrap; }

/* the "where to?" window over a shared warp platform (2026-10-16, one platform per spot: game.js openPadPick) */
.padpick { position: fixed; left: 50%; top: 26%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  padding: 14px 18px 16px; border-radius: 14px; background: rgba(30, 23, 16, 0.94); border: 2px solid #c9a24a; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.padpick > b { color: #ffe6a8; font-size: 18px; text-align: center; }
.padpick .btn { min-width: 260px; font-size: 18px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.padpick .btn small { font-size: 13px; opacity: 0.85; }

/* the gear lines (2026-10-16, the user: "เปลี่ยนเป็นสาย PVP และ PVE"): the 🐉 PvE / ⚔ PvP mark on every gear tile, the item
   card's line chip and line-bonus block, the craft dial's line tag, and the character window's two-outfit switch */
.lnb { position: absolute; z-index: 3; right: 3px; top: 38%; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%;
  font-size: 10px; line-height: 1; font-style: normal; pointer-events: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.lnb.ln-e { background: #1f5130; }
.lnb.ln-p { background: #6b2020; }
/* (2026-10-17, the user: "สัญลักษณ์ PVP PVE อยู่ในตำแหน่งที่ไม่เหมาะสม แก้ไขให้เหมาะสมและสวยงาม"): in the bag and the worn row
   the mark is a small tab in the top-left corner, off the item's picture; a +enhance number moves beside it */
#ui .bookwin .eco-cell .lnb { left: -8px; top: -8px; right: auto; z-index: 6; width: 15px; height: 15px; border-radius: 50%; font-size: 9px; }   /* (on the frame's corner, half outside: never over the item's picture - the user: "อย่าให้บดบังไอเท่ม") */
#ui .bookwin .eco-cell .lnb.ln-e { background: radial-gradient(circle at 35% 30%, #6fd38a, #1d5a30 75%); box-shadow: 0 0 0 1.5px #0b0906, 0 1px 3px rgba(0, 0, 0, 0.6); }
#ui .bookwin .eco-cell .lnb.ln-p { background: radial-gradient(circle at 35% 30%, #f07a72, #7a1d1d 75%); box-shadow: 0 0 0 1.5px #0b0906, 0 1px 3px rgba(0, 0, 0, 0.6); }
#ui .bookwin .eco-cell:has(> .lnb) > .plus { left: 10px; top: 3px; }
#ui .bookwin .eco-bagscroll { padding-top: 9px; padding-left: 9px; }   /* (room for the corner marks of the first row and column) */
#charpanel .bk-slot .lnb { position: absolute; z-index: 3; right: 7px; top: 7px; width: 18px; height: 18px; font-size: 11px; }
#eco .m4-tile .lnb { right: 7%; top: 7%; width: 19px; height: 19px; font-size: 11px; z-index: 5; }
#eco .m4-tile .m4-lock { right: auto; left: 50%; transform: translateX(-50%); }
#ui .bookwin .eco-chips i.ln.ln-e { color: #a6f2bb; box-shadow: inset 0 0 0 1px #3f8f55; }
#ui .bookwin .eco-chips i.ln.ln-p { color: #ffb4aa; box-shadow: inset 0 0 0 1px #a5463c; }
.eco-line.ln-e > b { color: #8fe3a4; }
.eco-line.ln-p > b { color: #ff9e92; }
#eco .m4-lntag { position: absolute; left: 50%; bottom: 20px; z-index: 3; transform: translateX(-50%); padding: 2px 10px; border-radius: 10px; white-space: nowrap;
  font: 700 12px/1.3 Mali, sans-serif; background: rgba(10, 8, 6, 0.82); }
#eco .m4-lntag.ln-e { color: #a6f2bb; box-shadow: inset 0 0 0 1px #3f8f55; }
#eco .m4-lntag.ln-p { color: #ffb4aa; box-shadow: inset 0 0 0 1px #a5463c; }
#charpanel .bk-outfit { left: 352px; top: 626px; width: 282px; height: 32px; display: flex; gap: 5px; z-index: 6; }
#charpanel .bk-of { flex: 1 1 0; height: 32px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; cursor: pointer; border-radius: 9px;
  background: rgba(14, 10, 7, 0.82); color: #e9e2cf; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.35); font: 600 13px/1 'Mali', sans-serif; }
#charpanel .bk-of i { font-style: normal; font-size: 14px; }
#charpanel .bk-of b { font: 700 13px/1 'Fredoka', sans-serif; color: #ffe9a8; }
#charpanel .bk-of.on.ln-e { background: #1d4a2b; color: #dff7d2; box-shadow: inset 0 0 0 2px #6fd38a; }
#charpanel .bk-of.on.ln-p { background: #5a1c1c; color: #ffe0da; box-shadow: inset 0 0 0 2px #ff7b6b; }
#charpanel .bk-of:not(.on):hover { filter: brightness(1.25); }
#charpanel .bk-ofauto { flex: none; width: 32px; height: 32px; border-radius: 9px; cursor: pointer; font: 700 15px/32px 'Fredoka', sans-serif; text-align: center;
  background: rgba(14, 10, 7, 0.82); color: #8a8172; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.25); }
#charpanel .bk-ofauto.on { color: #ffd75a; box-shadow: inset 0 0 0 1px #d9a443; }

/* the admin panel's skill tester (2026-10-16): class chips, then one row a skill (icon, name and what it does, its level,
   ▶ try / learn / forget) */
#admin-panel .adm-sk-cls { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
#admin-panel .adm-skc { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 13px;
  background: rgba(0, 0, 0, 0.25); color: inherit; border: 1px solid rgba(255, 217, 90, 0.25); }
#admin-panel .adm-skc img { width: 28px; height: 28px; object-fit: contain; }
#admin-panel .adm-skc.on { border-color: var(--gold, #ffd75a); background: rgba(255, 215, 90, 0.16); }
#admin-panel .adm-skills { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
#admin-panel .adm-skill { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 217, 90, 0.15); }
#admin-panel .adm-skill.on { border-color: rgba(127, 224, 122, 0.55); }
#admin-panel .adm-skill img { width: 40px; height: 40px; object-fit: contain; }
#admin-panel .adm-sk-n { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#admin-panel .adm-sk-n small { opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#admin-panel .adm-sk-lv { white-space: nowrap; font-size: 13px; }
#admin-panel .adm-sk-b { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) { #admin-panel .adm-skill { grid-template-columns: 34px minmax(0, 1fr); } #admin-panel .adm-sk-lv, #admin-panel .adm-sk-b { grid-column: 2; justify-content: flex-start; } }

/* =====================================================================
   The Esc book (2026-10-17, the user: "แยกหมวดตั้งค่าไปไว้เฉพาะเมนูฟันเฟือง และทำ2หน้านี้เป็นเมนูหลัก"): both pages are the main
   menu (ตัวละคร / แฟชั่น · สัตว์เลี้ยง · พาหนะ / สังคม on the left, การผจญภัย / ร้านค้าและงานฝีมือ and กลับเข้าเกม · ตั้งค่า on
   the right), each card a two-column grid of roomy rows that never clip (a page scrolls if a card ever outgrows it); the
   settings are the same book's second view (#pause.pv-set, js/ui.js pauseShow) behind the ⚙ chip by Esc, the menu bar's ⚙
   and the book's gear tab: game + sound on the left page, picture + book on the right
   ===================================================================== */
#pause.pv-set .hub-page, #pause:not(.pv-set) .hub-settings { display: none !important; }
#ui .bw-pause :is(.hub-page, .set-page) { position: absolute; top: 196px; height: 656px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9a24a rgba(0, 0, 0, 0.35); }
#ui .bw-pause :is(.hub-page, .set-page).l { left: 228px; width: 516px; }
#ui .bw-pause :is(.hub-page, .set-page).r { left: 812px; width: 492px; }
#ui .bw-pause .hub-page .hub-sec { position: relative; left: auto; top: auto; width: auto; height: auto; flex: 0 0 auto; display: block; overflow: visible; padding: 8px 12px 10px; }
#ui .bw-pause .hub-sec[data-sec="char"] { --cat: #7fd36e; }
#ui .bw-pause .hub-sec[data-sec="fashion"] { --cat: #f59ac8; }
#ui .bw-pause .hub-sec[data-sec="adventure"] { --cat: #f07a66; }
#ui .bw-pause .hub-sec[data-sec="shop"] { --cat: #f5ad4a; }
#ui .bw-pause .hub-sec[data-sec="social"] { --cat: #bd8af0; }
#ui .bw-pause .hub-page .hub-sec h3 { gap: 10px; margin: 0 0 6px; padding: 0 4px 6px; font-size: 21px; line-height: 30px; letter-spacing: 0; }
#ui .bw-pause .hub-page .hub-sec h3 img { width: 30px; height: 30px; }
#ui .bw-pause .hub-page .hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
#ui .bw-pause .hub-page .hub-tile { height: 46px; min-height: 46px; flex: none; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto; padding: 0 6px 0 8px;
  border-bottom: 1px solid rgba(217, 164, 67, 0.16); font-size: 17px; }
/* (a name with nothing after it takes the key's column too: "ร้านเพชร / เติมเพชร" whole) */
#ui .bw-pause .hub-page .hub-tile:not(:has(> kbd, > .hub-badge.net:not([hidden]))) span { grid-column: 2 / 4; }
#ui .bw-pause .hub-page .hub-tile img { width: 36px; height: 36px; }
#ui .bw-pause .hub-page .hub-tile kbd { min-width: 26px; height: 26px; line-height: 26px; }
#ui .bw-pause .hub-page .hub-tile .hub-badge:not(.net) { left: 52px; top: -1px; height: 19px; min-width: 19px; }
/* back to the game / the settings, at the foot of the right page */
#ui .bw-pause .hub-act { margin-top: auto; display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
#ui .bw-pause .hub-act .btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; min-height: 54px; padding: 0 16px; font-size: 20px; }
#ui .bw-pause .hub-act [data-pact="resume"]::before { content: '▶'; font: 700 20px/1 'Fredoka', sans-serif; color: #2b1d0e; }
#ui .bw-pause .hub-act [data-pact="settings"]::before { content: ''; width: 28px; height: 28px; background: url(../assets/ui_book/glyph_gear.png) center / contain no-repeat; }
/* the ⚙ chip beside Esc / ✕ (lit while the settings are open: a click goes back to the menu) */
#ui .bw-pause .hub-gear { position: absolute; left: 1174px; top: 143px; width: 44px; height: 34px; min-height: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  display: grid; place-items: center; background: var(--uib-tab_square, url(../assets/ui_book/tab_square.png)) center / 100% 100% no-repeat; }
#ui .bw-pause .hub-gear img { width: 25px; height: 25px; object-fit: contain; transition: transform 0.3s; }
#ui .bw-pause .hub-gear:hover { filter: brightness(1.15); }
#ui .bw-pause .hub-gear:hover img, #ui .bw-pause .hub-gear.on img { transform: rotate(45deg); }
#ui .bw-pause .hub-gear.on { filter: drop-shadow(0 0 5px rgba(255, 214, 110, 0.85)); }
#pause:not(.bookwin) .hub-gear { width: 40px; height: 40px; padding: 4px; border: 0; background: none; cursor: pointer; }
#pause:not(.bookwin) .hub-gear img { width: 28px; height: 28px; }
/* the settings view */
#ui .bw-pause .hub-settings { position: static; display: contents; }
#ui .bw-pause .set-page { gap: 8px; padding-right: 6px; }
#ui .bw-pause .set-page .pause-actions { gap: 8px; }
#ui .bw-pause .set-page .pause-actions .btn { height: 46px; min-height: 46px; flex: none; font-size: 18px; }
#ui .bw-pause .set-h { margin: 4px 4px 0; padding: 0 2px 5px; border-bottom: 2px solid rgba(217, 164, 67, 0.55); font: 700 20px/1.2 'Mali', sans-serif; color: #f6dc98; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
#ui .bw-pause .set-page .row { margin: 2px 4px 0; padding: 6px 2px 0; border-top: 0; }
#ui .bw-pause .set-foot { margin-top: auto; padding-top: 6px; }
#ui .bw-pause #p-menu::before { content: '☰'; }
#ui .bw-pause .set-page .hub-help { flex: none; }
:root[data-booklight] #ui .bw-pause .set-h { color: var(--bk-acc); text-shadow: none; border-bottom-color: color-mix(in srgb, var(--bk-acc) 55%, transparent); }
/* (the gold gear on the light books' pale tab / button: a crisp 1px dark edge, no glow) */
:root[data-booklight] #ui .bw-pause :is(.hub-gear img, .hub-act [data-pact="settings"]::before) { filter: drop-shadow(0 1px 0 rgba(40, 24, 8, 0.75)) drop-shadow(0 -1px 0 rgba(40, 24, 8, 0.35)); }

/* ---------- the bag, bigger and clearer (2026-10-17, the user: "ปรับแก้ ui ให้ดูชัดขึ้นใหญ่ขึ้น"): 7 slots a row instead of 8,
   and every mark on a slot one size up - set tag, unappraised ?, counts, +enhance, step, lock, collection, card sockets,
   the PvE/PvP corner mark. Kept last in the file so it wins over the older per-mark rules. ---------- */
#ui .bw-eco .eco-bagscroll .eco-grid { grid-template-columns: repeat(7, 1fr); gap: 7px; }
#ui .bookwin .eco-cell .plus { font-size: 15px; }
#ui .bookwin .eco-cell .sn { left: 6px; bottom: 5px; padding: 0 4px; font: 800 12px/16px 'Fredoka', sans-serif; border-radius: 4px; }
#ui .bookwin .eco-cell .cnt { right: 6px; bottom: 4px; font-size: 16px; }
#ui .bookwin .eco-cell .unk { right: 5px; bottom: 4px; width: 20px; height: 20px; font: 800 14px/20px 'Fredoka', sans-serif; }
#ui .bookwin .eco-cell .stp { font-size: 15px; }
#ui .bookwin .eco-cell .lk { font-size: 13px; }
#ui .bookwin .eco-cell .clb { width: 17px; height: 17px; }
#ui .bookwin .eco-cell .clb img { width: 12px; height: 12px; }
#ui .bookwin .eco-cell .csb { min-width: 18px; height: 20px; font-size: 12px; }
#ui .bookwin .eco-bagscroll { padding-top: 4px; padding-left: 4px; }
#ui .bookwin .eco-kinds .eco-kind { font-size: 15px; }

/* PvP pieces by their colour, no mark (2026-10-17, the user: "ลบสัญลักษณ์ PVE และ PVP ออก ให้แบ่งด้วยสีของไอเท่ม"): a PvP
   piece's painted picture is black steel glowing red (assets/icons_pvp); one not painted yet gets that look tinted on its
   PvE picture; both carry a thin red glow (economy.js Eco.lineCls: bag, worn row, character window, craft tiles) */
#ui .ln-pvp > img { filter: drop-shadow(0 0 1px #2a0606) drop-shadow(0 0 3px rgba(255, 64, 48, 0.85)) !important; }
#ui .pvp-tint > img { filter: sepia(0.7) saturate(2.6) hue-rotate(-32deg) brightness(0.88) contrast(1.08) drop-shadow(0 0 1px #2a0606) drop-shadow(0 0 3px rgba(255, 64, 48, 0.85)) !important; }

/* enhancement help (2026-10-17, the user: "ทำให้ตีบวกแตก ... เพิ่มผลึกกันแตก และหินตีบวกกระโดด3ขั้น"): three toggle chips under
   the stat rows (ม้วนคุ้มครอง / ผลึกกันแตก / หินกระโดด +3, economy.js protRow), a third line in the ring for the shatter
   chance, the rule of the band under the chips, the upgrade button red when a try may shatter and pulsing on "ยืนยัน".
   The chips look dear (the user: "ให้ม้วน ผลึก หินกระโดด ดูมีค่ากว่านี้"): each in its item's tier colour (t3 hero purple,
   t4 legend gold, t5 mythic ruby), the picture in the bag's polished metal frame + plate of that tier, a gem toggle in the
   corner; ticked: the tier's glow and a light sweeping across now and then */
.fg-prot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 8px 2% 0; }
.fg-prot.many { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 330px; justify-self: center; width: 100%; margin: 0 auto; }
.fg-pchip { --tc: #c27bff; --tk: rgba(110, 56, 184, 0.42); --tf: url(../assets/ui_book/metal/frame_g3.png); --tp: url(../assets/ui_book/plates/plate_g3.png);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 5px; min-width: 0; padding: 5px 6px 5px 5px; border-radius: 10px; cursor: pointer; text-align: left;
  background: linear-gradient(135deg, var(--tk), rgba(14, 12, 26, 0.92) 70%); border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 rgba(0, 0, 0, 0.45); color: #f3e6c4; }
.fg-pchip.t4 { --tc: #ffb340; --tk: rgba(181, 106, 20, 0.42); --tf: url(../assets/ui_book/metal/frame_g4.png); --tp: url(../assets/ui_book/plates/plate_g4.png); }
.fg-pchip.t5 { --tc: #ff6a7a; --tk: rgba(176, 36, 58, 0.45); --tf: url(../assets/ui_book/metal/frame_g5.png); --tp: url(../assets/ui_book/plates/plate_g5.png); }
/* (2026-10-19, the user: "คลิกดูข้อมูล ม้วน ผลึก หินกระโดดได้หน่อย"): an i at each chip's corner opens its card (the picture still does) */
.fg-pchip .fg-pinfo { position: absolute; top: 5px; right: 6px; z-index: 3; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font: 800 12px/1 Georgia, 'Times New Roman', serif; font-style: italic; color: #1a1008; background: #f2d27a; box-shadow: 0 0 0 1px #2a1608; cursor: pointer; }
.fg-pchip .fg-pinfo:hover { filter: brightness(1.12); }
.fg-pic { position: relative; flex: none; width: 38px; height: 38px; background: var(--tf) center / 100% 100% no-repeat; }
.fg-pic::before { content: ''; position: absolute; inset: 11.5%; border-radius: 5%; background: var(--tp) center / 100% 100% no-repeat; }
.fg-pic img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.fg-pic em { position: absolute; right: -3px; bottom: -3px; z-index: 2; min-width: 16px; padding: 0 4px; border-radius: 8px; background: #1c1424; border: 1px solid var(--tc);
  color: #fff; font: 700 0.62rem/1.35 Fredoka, sans-serif; font-style: normal; text-align: center; }
.fg-pic em.zero { background: #4a1414; border-color: #ff7a6a; color: #ffd0c8; }
.fg-pic { cursor: pointer; }
.fg-pic:hover { filter: brightness(1.2); }
.fg-ptx { display: flex; flex-direction: column; min-width: 0; }
.fg-ptx b { font: 800 0.78rem/1.15 var(--thai); color: color-mix(in srgb, var(--tc) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-ptx small { font: 600 0.66rem/1.2 var(--thai); color: #d9ccb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-tick { position: absolute; left: 2px; top: 2px; z-index: 3; width: 13px; height: 13px; border-radius: 50%;   /* (the tick gem sits on the picture's corner: the name keeps the width) */ background: radial-gradient(circle at 35% 30%, #4a4458, #15121e);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 60%, #2c2533); }
.fg-pchip.on { border-color: var(--tc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent), 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent); }
.fg-pchip.on .fg-tick { background: radial-gradient(circle at 35% 30%, #fff, var(--tc) 45%, color-mix(in srgb, var(--tc) 50%, #000)); box-shadow: 0 0 6px var(--tc); }
.fg-pchip.on .fg-tick::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #1c1424; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fg-pchip.on::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: translateX(-120%); animation: fgSheen 3.2s ease-in-out infinite; }
@keyframes fgSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { .fg-pchip.on::before { animation: none; display: none; } }
.fg-pchip.na { filter: saturate(0.45) brightness(0.8); }
.fg-pchip.na .fg-ptx small { color: #b8ad96; }
.fg-pchip.out { border-color: #ff7a6a; }
.fg-pchip.out .fg-ptx small { color: #ffb8a8; }
.fg-pchip:hover { filter: brightness(1.12); }
.fg-pchip.na:hover { filter: saturate(0.6) brightness(0.92); }
.fg-note.fg-rule { font-size: 0.8rem; padding: 4px 0 0; }
.fg-note.fg-rule.warn { color: #ff9a8a; font-weight: 700; }
.fg-ring.three { gap: 1px; }
.fg-ring.three span { font-size: 0.66rem; line-height: 1.1; }
.fg-ring.three span b { font-size: 1.05rem; }
.fg-ring.three .fg-down { padding-top: 2px; }
.fg-ring .fg-brk { padding-top: 2px; border-top: 1px solid rgba(226, 184, 90, 0.4); }
.fg-ring .fg-brk b { color: #d6d0f0; }
.fg-ring .fg-brk.bad b { color: #ff6a55; }
.fg-res.break { background: linear-gradient(#6a1414, #2e0707); color: #ffd6cc; border-color: #ff5a4a; box-shadow: 0 0 22px rgba(255, 60, 40, 0.7); }
.fg-big.risk { background: linear-gradient(180deg, #9a4434, #61221d); }
.fg-big.armed { background: linear-gradient(180deg, #e2442f, #8a1a14); border-color: #ffd0a0; animation: fgArm 0.55s ease-in-out infinite alternate; }
@keyframes fgArm { from { filter: brightness(1); } to { filter: brightness(1.28); } }
@media (prefers-reduced-motion: reduce) { .fg-big.armed { animation: none; } }
.fg-jumptag { margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: linear-gradient(#ff8ac8, #f2b04a); border: 2px solid #2c2533; color: #2c1424; font: 700 0.74rem var(--thai); font-style: normal; vertical-align: 5px; }
.fgb-goals button.brk { color: #ff8a70; }
.fgb .fg-prot { margin: 0; }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-note.fg-rule.warn { color: #a8231a; }
:root[data-booklight] :is(.bookwin, #charpanel) .fgb-goals button.brk { color: #a8231a; }
/* โชคสะสม (2026-10-17): the piece's luck at this level, a thin bar under the help chips (economy.js luckBar) */
.fg-luck { display: flex; align-items: center; gap: 8px; margin: 6px 6% 0; font: 700 0.78rem var(--thai); color: var(--cream-2); }
.fg-luck span { flex: none; }
.fg-luck i { flex: 1; height: 8px; border-radius: 999px; background: rgba(10, 13, 28, 0.6); border: 1px solid rgba(201, 162, 74, 0.45); overflow: hidden; }
.fg-luck i b { display: block; height: 100%; background: linear-gradient(90deg, #5fd06a, #c6f08a); border-radius: inherit; transition: width 0.4s ease; }
.fg-luck em { flex: none; font: 700 0.78rem Fredoka, var(--thai); font-style: normal; color: var(--cream-2); }
.fg-luck.on em { color: #9ff08a; }
.fg-luck.full i b { background: linear-gradient(90deg, #f2c14e, #ffe48a); }
.fg-luck.full em { color: #ffe27a; }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-luck { color: var(--bk-ink2); }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-luck i { background: color-mix(in srgb, var(--bk-acc) 14%, #fffdf8); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-luck em { color: var(--bk-ink2); }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-luck.on em { color: #1f6a1a; }
:root[data-booklight] :is(.bookwin, #charpanel) .fg-luck.full em { color: #7a5a10; }

/* the reward card v2 (2026-10-17, the user: "ปรับแก้ UI เวลาจบดันเจี้ยนแล้วได้ของรางวัล ให้ดูง่าย และดูดี", js/content.js
   showCard): EXP and gold as two big chips; the things as slots in their tier's polished metal frame + plate (the bag's),
   the count in the corner, the name under it; the first clear's gifts in their own gold row; the notes as lines; ตกลง */
#tw-card.rw { top: 12%; }
#tw-card .rw-in { width: min(560px, 94vw); max-width: none; gap: 8px; padding: 22px 20px 14px; border-width: 2px; border-color: var(--tc, #f2c14e);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tc, #f2c14e) 22%, transparent), transparent 60%), linear-gradient(180deg, rgba(34, 30, 62, 0.97), rgba(18, 16, 36, 0.97)); }
#tw-card .rw-title { font: 800 1.55rem/1.15 Mali, Fredoka, var(--thai); color: var(--tc, #ffe08a); text-shadow: 1px 0 0 #1a1220, -1px 0 0 #1a1220, 0 1px 0 #1a1220, 0 -1px 0 #1a1220, 0 3px 0 rgba(0, 0, 0, 0.35); }
#tw-card .rw-sub { font: 600 0.85rem var(--thai); color: #e8dcc0; opacity: 1; }
:is(#tw-card, #bdg-result) .rw-top { display: flex; justify-content: center; gap: 10px; width: 100%; margin-top: 2px; }
:is(#tw-card, #bdg-result) .rw-chip { flex: 1 1 0; max-width: 230px; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(120, 90, 210, 0.35), rgba(30, 24, 60, 0.8)); border: 1.5px solid rgba(180, 150, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
:is(#tw-card, #bdg-result) .rw-chip.gold { background: linear-gradient(135deg, rgba(200, 150, 40, 0.35), rgba(40, 30, 14, 0.85)); border-color: rgba(242, 193, 78, 0.7); }
:is(#tw-card, #bdg-result) .rw-chip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
:is(#tw-card, #bdg-result) .rw-chip .rw-xp { flex: none; width: 40px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(#3a3070, #221b44); box-shadow: inset 0 0 0 1px rgba(207, 195, 255, 0.6); font: 800 0.85rem Fredoka, sans-serif; font-style: normal; color: #e4dcff; letter-spacing: 0.5px; }
:is(#tw-card, #bdg-result) .rw-chip span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
:is(#tw-card, #bdg-result) .rw-chip i { font: 700 0.7rem var(--thai); font-style: normal; color: #cfc3ff; }
:is(#tw-card, #bdg-result) .rw-chip.gold i { color: #f6dc9a; }
:is(#tw-card, #bdg-result) .rw-chip b { font: 800 1.25rem Fredoka, var(--thai); color: #fff; text-shadow: none; }
:is(#tw-card, #bdg-result) .rw-h { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0 0; font: 800 0.82rem var(--thai); color: #f2d48a; }
:is(#tw-card, #bdg-result) .rw-h::before, :is(#tw-card, #bdg-result) .rw-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 193, 78, 0.6), transparent); }
:is(#tw-card, #bdg-result) .rw-h.gift { color: #ffb8d8; }
:is(#tw-card, #bdg-result) .rw-h.gift::before, :is(#tw-card, #bdg-result) .rw-h.gift::after { background: linear-gradient(90deg, transparent, rgba(255, 150, 200, 0.6), transparent); }
:is(#tw-card, #bdg-result) .rw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px 6px; width: 100%; padding: 2px; }
:is(#tw-card, #bdg-result) .rw-grid.gift { padding: 8px 6px; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 150, 200, 0.1), rgba(242, 193, 78, 0.08)); border: 1px dashed rgba(255, 180, 210, 0.45); }
:is(#tw-card, #bdg-result) .rw-slot { --rf: url(../assets/ui_book/metal/frame_g2.png); --rp: url(../assets/ui_book/plates/plate_g2.png);
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; cursor: default; opacity: 0; animation: rwPop 0.38s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) forwards; }
:is(#tw-card, #bdg-result) .rw-slot[data-info] { cursor: pointer; }
:is(#tw-card, #bdg-result) .rw-slot.t0 { --rf: url(../assets/ui_book/metal/frame_g0.png); --rp: url(../assets/ui_book/plates/plate_g0.png); }
:is(#tw-card, #bdg-result) .rw-slot.t1 { --rf: url(../assets/ui_book/metal/frame_g1.png); --rp: url(../assets/ui_book/plates/plate_g1.png); }
:is(#tw-card, #bdg-result) .rw-slot.t3 { --rf: url(../assets/ui_book/metal/frame_g3.png); --rp: url(../assets/ui_book/plates/plate_g3.png); }
:is(#tw-card, #bdg-result) .rw-slot.t4 { --rf: url(../assets/ui_book/metal/frame_g4.png); --rp: url(../assets/ui_book/plates/plate_g4.png); }
:is(#tw-card, #bdg-result) .rw-slot.t5 { --rf: url(../assets/ui_book/metal/frame_g5.png); --rp: url(../assets/ui_book/plates/plate_g5.png); }
:is(#tw-card, #bdg-result) .rw-pic { position: relative; width: 58px; height: 58px; background: var(--rf) center / 100% 100% no-repeat; }
:is(#tw-card, #bdg-result) .rw-pic::before { content: ''; position: absolute; inset: 11.5%; border-radius: 5%; background: var(--rp) center / 100% 100% no-repeat; }
:is(#tw-card, #bdg-result) .rw-pic img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; z-index: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)); }
:is(#tw-card, #bdg-result) .rw-pic em { position: absolute; right: 5px; bottom: 5px; z-index: 3; min-width: 15px; padding: 0 4px; border-radius: 7px; background: rgba(22, 16, 32, 0.92);
  color: #fff; font: 700 0.62rem/1.4 Fredoka, sans-serif; font-style: normal; text-align: center; }   /* (inside the plate's corner: the frame stays whole) */
:is(#tw-card, #bdg-result) .rw-luck { position: absolute; left: -4px; top: -5px; z-index: 2; font-style: normal; font-size: 1rem; color: #ffe27a; text-shadow: 0 0 0 #000, 1px 1px 0 #3a2410; }
:is(#tw-card, #bdg-result) .rw-pvp { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 2; padding: 0 5px; border-radius: 6px; background: #8a1a14; color: #fff; font: 800 0.55rem/1.4 Fredoka, sans-serif; font-style: normal; }
:is(#tw-card, #bdg-result) .rw-slot small { width: 100%; font: 700 0.68rem/1.2 var(--thai); color: #efe6cf; opacity: 1; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
/* (legend / mythic: no soft glow round the frame - the user saw it as odd; the bright plate is dimmed so the picture stands
   out from the gold, and a crisp light sweeps over it now and then) */
:is(#tw-card, #bdg-result) .rw-slot.dear .rw-pic::before { filter: brightness(0.72) saturate(0.85); }
:is(#tw-card, #bdg-result) .rw-slot.dear .rw-pic::after { content: ''; position: absolute; inset: 11.5%; z-index: 2; border-radius: 5%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.32) 50%, transparent 58%) 0 0 / 260% 100% no-repeat; animation: rwShine 3s ease-in-out infinite; }
@keyframes rwShine { 0%, 55% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { :is(#tw-card, #bdg-result) .rw-slot.dear .rw-pic::after { animation: none; display: none; } }
:is(#tw-card, #bdg-result) .rw-slot[data-info]:hover .rw-pic { transform: translateY(-2px); transition: transform 0.12s; }
:is(#tw-card, #bdg-result) .rw-notes { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: 4px; }
:is(#tw-card, #bdg-result) .rw-note { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(242, 193, 78, 0.25); text-align: left; font: 600 0.8rem/1.3 var(--thai); }
:is(#tw-card, #bdg-result) .rw-note img { width: 26px; height: 26px; flex: none; object-fit: contain; }
#tw-card .rw-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
#tw-card .rw-foot em { font: 600 0.8rem var(--thai); color: #bfeaff; }
#tw-card .rw-ok { min-width: 150px; padding: 7px 22px; border-radius: 10px; font: 800 1rem var(--thai); color: #2c1a08 !important; text-shadow: none !important;
  background: linear-gradient(180deg, #ffe08a, #e2a93a) !important; border: 2px solid #2c2533 !important; box-shadow: 0 3px 0 #2c2533, inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; cursor: pointer; }
#tw-card .rw-ok:hover { filter: brightness(1.08); }
#tw-card .rw-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 #2c2533 !important; }
@keyframes rwPop { from { opacity: 0; transform: translateY(6px) scale(0.7); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #tw-card .rw-slot { animation: none; opacity: 1; } }
/* the boss / party dungeon's result wears the reward card's sections (js/content.js rewardHtml) */
#bdg-result .bdr-rw { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#bdg-result .bdr-rw .rw-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

/* the sign-up form (js/ui.js signUpBox, 2026-10-17): its own page, a hint under each part, a second password box */
.login-box.signup label { grid-template-columns: 7.2em 1fr; }
.login-steps { margin: -2px 0 2px; font: 600 0.85rem Mali, sans-serif; color: #5b4a3c; text-align: left; }
.login-hint { margin: -6px 0 0 calc(7.2em + 8px); font: 600 0.78rem Mali, sans-serif; color: #6b5a4a; text-align: left; }
.login-hint.ok { color: #2f7a2a; }
.login-hint.bad { color: #b8322a; }
.login-box.signup .login-actions .btn { min-height: 44px; }
/* (the night title's light button text sat on the light button art inside the sign-in box: unreadable) */
.theme-night.skinned .login-box .btn:not(.primary), .login-box .btn:not(.primary) { color: var(--ink); -webkit-text-fill-color: var(--ink); }

/* a boss's own piece (js/loot.js SIG): its row in the drop lists and its note on the item card */
.lmp-drop.sig { background: linear-gradient(90deg, rgba(255, 200, 80, 0.16), rgba(255, 200, 80, 0.02)); box-shadow: inset 2px 0 0 #ffc850; }
.lmp-drop.sig .nm b { text-shadow: none; }
.eco-signote { color: #ffd66a; border-left: 3px solid #ffc850; }

/* what a title gives (js/achieve.js titleBonus): on its chip, its achievement row and under the title worn */
.lf-tbtn em, .lf-title em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 700; color: #a8f09a; }
.lf-title em { display: inline; margin-left: 4px; }
.lf-tbonus { margin: 6px 0 2px; text-align: center; font-size: 0.86rem; color: #e8dcc0; }
.lf-tbonus b { color: #a8f09a; }
:root[data-booklight] :is(.bookwin, #charpanel) :is(.lf-tbtn em, .lf-title em, .lf-tbonus b) { color: #2a7e1b; }
:root[data-booklight] :is(.bookwin, #charpanel) .lf-tbonus { color: inherit; }

/* the boss menu's drops, short (2026-10-17): its own piece on top, then icons only */
.bm-drops { padding: 10px; }
.bm-sig { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; background: linear-gradient(90deg, rgba(255, 200, 80, 0.2), rgba(255, 200, 80, 0.03)); box-shadow: inset 2px 0 0 #ffc850; }
.bm-sig .tslot { width: 54px; height: 54px; flex: none; }
.bm-sig span { display: flex; flex-direction: column; }
.bm-sig b { color: #ffd66a; font-size: 0.98rem; }
.bm-sig small { color: #d8c8a8; font-size: 0.76rem; }
.bm-dh { margin: 10px 2px 6px; font-size: 0.8rem; color: #d8c8a8; font-weight: 700; }
.bm-dgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.bm-dico { cursor: pointer; border-radius: 8px; }
.bm-dico .tslot { width: 46px; height: 46px; }
.bm-dico:hover, .bm-dico:focus-visible { outline: 2px solid #ffc850; outline-offset: 1px; }

/* a dropped piece's card (js/localmap.js eqPop, 2026-10-17 "เมื่อคลิกดูไอเท็มแล้วให้บอกข้อมูลไอเท็มด้วย ค่อยบอกว่าหาได้ยังไง"):
   the piece's own card first (Eco.detailsHtml 'look'), then where to get it */
.mi-detail { padding: 2px 26px 8px 2px; }
.mi-detail .eco-main-stats { columns: 2; column-gap: 16px; }
.mi-detnote { display: block; margin: 0 0 6px; font-size: 0.74rem; opacity: 0.75; }
.mi-where { margin: 8px 0 6px; padding-top: 8px; border-top: 1px solid rgba(217, 164, 67, 0.35); font-size: 0.95rem; color: #ffd66a; }


/* ---------- item slots MIR4-style (2026-10-17, the user: the metal frames "ดูรกเกินไป", "ทำรูปแบบ MIR4 ดีไหม" with MIR4
   screenshots, "ขนาดก็ดูง่าย ของเรามันเล็กไป"; picked on slotpick_mir4.html: 112 px, 5 a row). Every graded slot is the
   grade's painted plate (Codex, assets/ui_slot_mir4: a calm rounded square in the grade's colour with a thin lighter border;
   the mythic one fiery and glowing) with the item big on it, and the marks in the corners as MIR4 has them:
     +N top right · the set's tier S1-S5 as a Roman numeral bottom left (data-r) · ? / lock bottom right · the craft step
     (II-IV) top left in gold · PvP pieces a small sword, left middle (PvE, the usual, no mark) · card count right middle.
   Only the mythic one glows round its edge; the light sweeping across hero+ stays. The metal-frame block above is left as
   it was: its --mf / --mi are replaced here and its inner plate is off ---------- */
#ui .bookwin .eco-cell.g0,
#ui .bookwin .eco-ihead.g0 .eco-iframe,
#charpanel .bk-slot.g0:not(.empty),
#eco .cw-ic.g0,
#ui .bookwin .clx-prow .eco-iframe.g0 { --mf: url(../assets/ui_slot_mir4/slot_g0.png); --mi: none; }
#ui .bookwin .eco-cell.g1,
#ui .bookwin .eco-ihead.g1 .eco-iframe,
#charpanel .bk-slot.g1:not(.empty),
#eco .cw-ic.g1,
#ui .bookwin .clx-prow .eco-iframe.g1 { --mf: url(../assets/ui_slot_mir4/slot_g1.png); --mi: none; }
#ui .bookwin .eco-cell.g2,
#ui .bookwin .eco-ihead.g2 .eco-iframe,
#charpanel .bk-slot.g2:not(.empty),
#eco .cw-ic.g2,
#ui .bookwin .clx-prow .eco-iframe.g2 { --mf: url(../assets/ui_slot_mir4/slot_g2.png); --mi: none; }
#ui .bookwin .eco-cell.g3,
#ui .bookwin .eco-ihead.g3 .eco-iframe,
#charpanel .bk-slot.g3:not(.empty),
#eco .cw-ic.g3,
#ui .bookwin .clx-prow .eco-iframe.g3 { --mf: url(../assets/ui_slot_mir4/slot_g3.png); --mi: none; }
#ui .bookwin .eco-cell.g4,
#ui .bookwin .eco-ihead.g4 .eco-iframe,
#charpanel .bk-slot.g4:not(.empty),
#eco .cw-ic.g4,
#ui .bookwin .clx-prow .eco-iframe.g4 { --mf: url(../assets/ui_slot_mir4/slot_g4.png); --mi: none; }
#ui .bookwin .eco-cell.g5,
#ui .bookwin .eco-ihead.g5 .eco-iframe,
#charpanel .bk-slot.g5:not(.empty),
#eco .cw-ic.g5,
#ui .bookwin .clx-prow .eco-iframe.g5 { --mf: url(../assets/ui_slot_mir4/slot_g5.png); --mi: none; }
#ui .bookwin .eco-cell.g0::before,
#ui .bookwin .eco-ihead.g0 .eco-iframe::before,
#charpanel .bk-slot.g0:not(.empty)::before,
#eco .cw-ic.g0::before,
#ui .bookwin .clx-prow .eco-iframe.g0::before,
#ui .bookwin .eco-cell.g1::before,
#ui .bookwin .eco-ihead.g1 .eco-iframe::before,
#charpanel .bk-slot.g1:not(.empty)::before,
#eco .cw-ic.g1::before,
#ui .bookwin .clx-prow .eco-iframe.g1::before,
#ui .bookwin .eco-cell.g2::before,
#ui .bookwin .eco-ihead.g2 .eco-iframe::before,
#charpanel .bk-slot.g2:not(.empty)::before,
#eco .cw-ic.g2::before,
#ui .bookwin .clx-prow .eco-iframe.g2::before,
#ui .bookwin .eco-cell.g3::before,
#ui .bookwin .eco-ihead.g3 .eco-iframe::before,
#charpanel .bk-slot.g3:not(.empty)::before,
#eco .cw-ic.g3::before,
#ui .bookwin .clx-prow .eco-iframe.g3::before,
#ui .bookwin .eco-cell.g4::before,
#ui .bookwin .eco-ihead.g4 .eco-iframe::before,
#charpanel .bk-slot.g4:not(.empty)::before,
#eco .cw-ic.g4::before,
#ui .bookwin .clx-prow .eco-iframe.g4::before,
#ui .bookwin .eco-cell.g5::before,
#ui .bookwin .eco-ihead.g5 .eco-iframe::before,
#charpanel .bk-slot.g5:not(.empty)::before,
#eco .cw-ic.g5::before,
#ui .bookwin .clx-prow .eco-iframe.g5::before { display: none !important; }
#ui .bookwin .eco-cell[class*=" g"], #ui .bookwin .eco-ihead .eco-iframe[class*=" g"], #charpanel .bk-slot[class*=" g"]:not(.empty) { border-radius: 9% !important; }
#ui .bookwin .eco-cell.empty { background: url(../assets/ui_slot_mir4/slot_empty.png) center / 100% 100% no-repeat !important; box-shadow: none !important; border-radius: 9% !important; }
#ui .bookwin .eco-cell[class*=" g"] > img { width: 88% !important; height: 88% !important; }
/* (the bag: five a row, a little more room between them) */
#ui .bw-eco .eco-bagscroll .eco-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
/* (the chosen one: MIR4's pale blue-white edge, no jump) */
#ui .bookwin .eco-cell.sel { transform: none !important; filter: none !important; box-shadow: 0 0 0 2px #e8f6ff, 0 0 0 4px rgba(120, 190, 255, 0.55), 0 0 14px 3px rgba(140, 200, 255, 0.8) !important; }
#ui .bookwin button.eco-cell:hover { transform: none; filter: brightness(1.12); }
/* (no outer glow on hero / legend: the plates say it; the mythic one keeps its fiery edge) */
#ui .bookwin .eco-cell:is(.g3, .g4)::after { content: none !important; }
#ui .bookwin .eco-cell.g4, #ui .bookwin .eco-cell.g5 { filter: none; }
#ui .bookwin .eco-cell.g5::after { inset: 0 !important; border-radius: 9% !important; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-gem { display: none !important; }
#ui .bookwin :is(.eco-cell, .eco-iframe) .cx-rays { inset: 4%; border-radius: 8%; }
#ui .bookwin .eco-cell .cx-sweep { inset: 3%; border-radius: 8%; }
/* (the marks: crisp white figures with a thin dark edge, no glow) */
#ui .bookwin .eco-cell[class*=" g"] .plus { top: 6%; left: auto; right: 8%; font: 800 16px/1 'Fredoka', sans-serif; color: #fff; -webkit-text-fill-color: #fff;
  /* (2026-10-19, the user: "เลข+9สีเพี้ยน": a stroke painted over the fill where paint-order is not kept thinned the white to a tint of
     the slot's colour - a crisp 1px ring instead, the same in every browser) */
  -webkit-text-stroke: 0; text-shadow: 1px 0 0 #1a1008, -1px 0 0 #1a1008, 0 1px 0 #1a1008, 0 -1px 0 #1a1008, 1px 1px 0 #1a1008, -1px 1px 0 #1a1008, 1px -1px 0 #1a1008, -1px -1px 0 #1a1008, 0 2px 0 #1a1008; }
#ui .bookwin .eco-cell[class*=" g"] .sn { left: 7%; bottom: 5%; right: auto; top: auto; padding: 0 !important; font-size: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; }
#ui .bookwin .eco-cell[class*=" g"] .sn::after { content: attr(data-r); font: 900 21px/1 'Times New Roman', Georgia, serif; color: #f6f2ea; letter-spacing: -1px;
  -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
#ui .bookwin .eco-cell[class*=" g"] .stp { left: 7%; top: 6%; bottom: auto; font-size: 14px !important; color: #ffd76a; }
#ui .bookwin .eco-cell[class*=" g"]:has(.clb) .stp { left: 30%; }
#ui .bookwin .eco-cell[class*=" g"] .unk { right: 6%; bottom: 5%; width: 19px; height: 19px; font: 800 13px/19px 'Fredoka', sans-serif; }
#ui .bookwin .eco-cell[class*=" g"] .lk { top: auto; right: 6%; bottom: 5%; width: 19px; height: 19px; display: grid; place-items: center; font-size: 11px; background: #f4f1ea; border-radius: 50%; }
#ui .bookwin .eco-cell[class*=" g"]:has(.unk) .lk { right: 27%; }
#ui .bookwin .eco-cell[class*=" g"] .lnb.ln-e { display: none; }
#ui .bookwin .eco-cell[class*=" g"] .lnb.ln-p { left: 6%; top: 38%; right: auto; }
#ui .bookwin .eco-cell[class*=" g"] .csb { right: 6%; top: 38%; bottom: auto; }
#ui .bookwin .eco-cell[class*=" g"] .clb { left: 6%; top: 6%; right: auto; }
/* (the worn row: its slot name sits at the bottom, so the tier goes top left) */
#ui .bw-eco .eco-gslot .eco-cell[class*=" g"] .sn { left: 7%; top: 5%; bottom: auto; right: auto; }
#ui .bw-eco .eco-gslot .eco-cell[class*=" g"] .sn::after { font-size: 17px; }

/* ---------- the enhancement page MIR4-style (2026-10-17, the user: "แก้ ui ตีบวกและประเมินหน่อย เอาแบบ Mir4" with MIR4's screens;
   economy.js forgeView, one piece): the success chance big at the top left and its zone; the craft page's painted dial
   (Codex, assets/ui_craft/m4) with its fire ring, the piece in its tier's disc in the middle, light running down to two round
   slots (the stone; หินดำ); the name with its tags; the rows "now > next (+gain)"; the rule with a "!"; one long button with
   the cost ---------- */
#ui .bookwin .eco-main > .fg-stage.m4f { zoom: 1; }
#eco .fg-stage.m4f { display: block; position: relative; padding: 0; margin: 2px 0 0; }
#eco .m4f-rate { position: absolute; left: 6px; top: 2px; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; max-width: 150px; }
#eco .m4f-rate small { font: 600 14px Mali, sans-serif; color: #d8d0bc; }
#eco .m4f-rate b { font: 700 34px/1.05 Fredoka, sans-serif; color: #ffcf5a; }
#eco .m4f-zone { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 13px/1.25 Mali, sans-serif; color: #cfc7b0; cursor: help; }
#eco .m4f-zone i { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font: 800 11px/1 Georgia, serif; font-style: normal; }
#eco .m4f-zone.safe { color: #9fe6a0; }
#eco .m4f-zone.warn { color: #ffcf6a; }
#eco .m4f-zone.bad { color: #ff8a7a; }
#eco .m4f-rate em { font: 600 12px Mali, sans-serif; font-style: normal; color: #b9b19e; }
#eco .m4f-rate em.bad { color: #ff8a7a; }
#eco .m4f-dial { position: relative; width: 300px; height: 300px; margin: 0 auto; }
#eco .m4f-aura { position: absolute; left: -45px; top: -45px; width: 390px; height: 390px; mix-blend-mode: screen; pointer-events: none; opacity: 0.85; }
#eco .z-bad .m4f-aura { opacity: 1; filter: saturate(1.3) hue-rotate(-12deg); }
#eco .m4f-disc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#eco .m4f-item, #eco .m4f-core { position: absolute; left: 50%; top: 38%; width: 104px; height: 104px; transform: translate(-50%, -50%); }
#eco .m4f-item { z-index: 3; }
#eco .m4f-core { z-index: 4; pointer-events: none; }
#eco .m4f-core .fg-ring { position: absolute; inset: 0; border-radius: 50%; }
#eco .m4f-core .fg-res { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); white-space: nowrap; }
#eco .m4f-item .m4-circ.big > img { width: 70%; height: 70%; }
#eco .m4f-plus { position: absolute; z-index: 5; right: 4%; top: 6%; font: 800 17px/1 Fredoka, sans-serif; font-style: normal; color: #fff; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
#eco .m4f-roman { position: absolute; z-index: 5; left: 14%; bottom: 8%; font: 900 20px/1 'Times New Roman', Georgia, serif; font-style: normal; color: #f6f2ea; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
#eco .m4f-lock { position: absolute; z-index: 5; right: 8%; bottom: 8%; width: 20px; height: 20px; display: grid; place-items: center; font-size: 11px; font-style: normal; background: #f4f1ea; border-radius: 50%; }
#eco .m4f-out { position: absolute; z-index: 6; left: -6px; top: -6px; width: 30px; height: 30px; padding: 0; border: 2px solid #c9b07a; border-radius: 50%; background: rgba(20, 26, 40, 0.92); color: #fff; font: 800 20px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4f-out:hover { filter: brightness(1.3); }
#eco .m4f-empty { display: grid; place-items: center; border-radius: 50%; background: rgba(10, 14, 24, 0.85); box-shadow: inset 0 0 0 3px #8a6a2a; }
#eco .m4f-empty span, #eco .m4f-plusmark { position: relative; z-index: 2; font: 300 46px/1 Fredoka, sans-serif; color: #e8d6a8; }
#eco .m4f-plusmark { font-size: 34px; }
/* (the light from the piece down to the two slots) */
#eco .m4f-beam { position: absolute; left: 50%; top: 38%; z-index: 2; width: 150px; height: 5px; margin-top: -2.5px; transform-origin: 0 50%; border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 246, 200, 0.95), rgba(255, 200, 90, 0.55)); box-shadow: 0 0 8px 2px rgba(255, 210, 110, 0.7); }
#eco .m4f-beam.l { transform: rotate(121deg); }
#eco .m4f-beam.r { transform: rotate(59deg); }
@media (prefers-reduced-motion: no-preference) {
  #eco .m4f-beam { animation: m4fBeam 2.4s ease-in-out infinite; }
  #eco .m4f-aura { animation: m4Aura 9s ease-in-out infinite; }
}
@keyframes m4fBeam { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
#eco .m4f-mat { position: absolute; bottom: 0; z-index: 3; width: 150px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
#eco .m4f-mat.l { left: 24%; }
#eco .m4f-mat.r { left: 76%; }
#eco .m4f-mbtn { padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
#eco .m4f-mbtn.short .m4-circ > img { filter: grayscale(0.6) brightness(0.75); }
#eco .m4f-mat small { font: 600 13px/1.2 Mali, sans-serif; color: #d8d0bc; text-align: center; white-space: nowrap; }
#eco .m4f-mat small b { font: 700 14px Fredoka, sans-serif; color: #fff; }
#eco .m4f-mat small b.short { color: #ff7a6a; }
/* (the name, the rows, the rule) */
#eco .m4f-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 4px 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
#eco .m4f-name b { font: 700 18px/1.2 Mali, sans-serif; }
#eco .m4f-name b.dim { color: #9a927e; }
#eco .m4f-tag { padding: 1px 8px; border: 1px solid #8a7a5a; border-radius: 4px; background: rgba(0, 0, 0, 0.35); font: 600 13px/1.5 Mali, sans-serif; color: #e8e0cc; }
#eco .m4f-rows { list-style: none; margin: 8px 0 6px; padding: 4px 4px 6px; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
#eco .m4f-rows li { display: grid; grid-template-columns: 1fr auto 26px 1fr; align-items: center; padding: 4px 0; font: 600 15px Mali, sans-serif; color: #d8d0bc; }
#eco .m4f-rows li b { justify-self: end; font: 700 15px Fredoka, Mali, sans-serif; color: #fff; }
#eco .m4f-rows li i { justify-self: center; font: 900 20px/1 Fredoka, sans-serif; font-style: normal; color: #5fd0ff; }
#eco .m4f-rows li em { justify-self: end; font: 700 15px Fredoka, Mali, sans-serif; font-style: normal; color: #fff; }
#eco .m4f-rows li em u { text-decoration: none; color: #7fe08a; }
#eco .m4f-note { display: flex; align-items: flex-start; gap: 8px; margin: 6px 4px; font: 500 13px/1.45 Mali, sans-serif; color: #cfc7b0; }
#eco .m4f-note i { flex: none; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #cfc7b0; color: #1a1008; font: 900 13px/1 Fredoka, sans-serif; font-style: normal; }
#eco .m4f-note.warn { color: #ff9a8a; }
#eco .m4f-note.warn i { background: #ff8a7a; }
/* (the long button: the craft page's painted bar, the coin and the cost, the word) */
#eco .m4f-btns { display: flex; justify-content: center; }
#eco .m4f-go.fg-big { min-width: 300px; height: 58px; padding: 0 34px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  background: url(../assets/ui_craft/m4/btn_build.png) center / 100% 100% no-repeat !important; color: #f6e7c0; font: 800 20px Mali, sans-serif; }
#eco .m4f-go .m4f-coin { width: 30px; height: 30px; object-fit: contain; }
#eco .m4f-go .m4f-cost { font: 700 21px Fredoka, sans-serif; color: #fff; }
#eco .m4f-go kbd { margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); font: 600 10px Fredoka, sans-serif; color: #c8c0aa; }
#eco .m4f-go.risk { filter: hue-rotate(-25deg) saturate(1.3); }
#eco .m4f-go.armed { filter: hue-rotate(-40deg) saturate(1.8) brightness(1.1); }
#eco .m4f-go[disabled] { filter: grayscale(0.8) brightness(0.65); }
/* (the dial's piece is a round tier disc: the old square .fg-slot look is off here; the dial is sized to the page's height) */
#eco .m4f .m4f-item .fg-slot { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; }
#eco .m4f .m4f-item .fg-slot.m4f-empty { background: rgba(10, 14, 24, 0.85); box-shadow: inset 0 0 0 3px #8a6a2a; }
#eco .m4f .m4f-item .fg-slot > em.m4f-plus { right: 4%; top: 6%; bottom: auto; color: #fff; text-shadow: none; }
#eco .m4f-dial { --dz: min(290px, 33vh); width: var(--dz); height: var(--dz); }
#eco .m4f-aura { left: calc(var(--dz) * -0.15); top: calc(var(--dz) * -0.15); width: calc(var(--dz) * 1.3); height: calc(var(--dz) * 1.3); }
#eco .m4f-item, #eco .m4f-core { width: calc(var(--dz) * 0.35); height: calc(var(--dz) * 0.35); }
#eco .m4f-item .m4-circ.big { width: 100%; height: 100%; }
#eco .m4f-beam { width: calc(var(--dz) * 0.5); }
#eco .m4f-mat .m4-circ { width: calc(var(--dz) * 0.24); height: calc(var(--dz) * 0.24); }
#eco .m4f-go.fg-big { flex-direction: row !important; width: auto; min-height: 0; }
#eco .m4f-btns { margin-top: 4px; }
/* (the old ring of the odds is only an invisible anchor in the middle of the dial now: ForgeFX flies to it) */
#eco .m4f .m4f-core .fg-ring { left: 0; top: 0; width: 100%; height: 100%; transform: none; background: none; border: 0; box-shadow: none; }
/* (the beams were gold on the dial's gold arms: white-hot with a strong glow, as MIR4's) */
#eco .m4f-beam { height: 7px; margin-top: -3.5px; background: linear-gradient(90deg, #ffffff, #fff4c0 45%, rgba(255, 214, 110, 0.85)); box-shadow: 0 0 6px 2px rgba(255, 255, 230, 0.95), 0 0 16px 5px rgba(255, 200, 90, 0.75); }

/* ---------- the appraisal page MIR4-style (2026-10-17, with the enhancement page: economy.js appraiseView, one piece): the count
   of option lines big at the top left, the painted dial with the piece in its tier's disc, the gold and the lens as round
   slots under it joined by light, the name with its tags, the lines as rows, the long button with the cost ---------- */
#ui .bookwin .ap-one.m4a { position: relative; }
#ui .bookwin .ap-one.m4a .ap-rate { position: absolute; left: 6px; top: 2px; }
#ui .bookwin .m4a .ap-stage { --dz: min(290px, 33vh); position: relative; display: block; width: var(--dz); height: var(--dz); margin: 0 auto; }
#ui .bookwin .m4a .ap-aura { position: absolute; left: calc(var(--dz) * -0.15); top: calc(var(--dz) * -0.15); width: calc(var(--dz) * 1.3); height: calc(var(--dz) * 1.3); mix-blend-mode: screen; opacity: 0.85; pointer-events: none; }
#ui .bookwin .m4a .ap-dial { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#ui .bookwin .m4a .ap-ring { inset: auto; left: 30%; top: 18%; width: 40%; height: 40%; }
#ui .bookwin .m4a .ap-slot { position: absolute; z-index: 3; left: 32.5%; top: 20.5%; width: 35%; height: 35%; border: 0; border-radius: 50%; box-shadow: none;
  background: url(../assets/ui_craft/m4/ring_g0.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g0.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g1 { background-image: url(../assets/ui_craft/m4/ring_g1.png), url(../assets/ui_craft/m4/disc_g1.png); }
#ui .bookwin .m4a .ap-slot.g2 { background-image: url(../assets/ui_craft/m4/ring_g2.png), url(../assets/ui_craft/m4/disc_g2.png); }
#ui .bookwin .m4a .ap-slot.g3 { background-image: url(../assets/ui_craft/m4/ring_g3.png), url(../assets/ui_craft/m4/disc_g3.png); }
#ui .bookwin .m4a .ap-slot.g4 { background-image: url(../assets/ui_craft/m4/ring_g4.png), url(../assets/ui_craft/m4/disc_g4.png); }
#ui .bookwin .m4a .ap-slot.g5 { background-image: url(../assets/ui_craft/m4/ring_g5.png), url(../assets/ui_craft/m4/disc_g5.png); }
#ui .bookwin .m4a .ap-slot.empty { background: rgba(10, 14, 24, 0.85); box-shadow: inset 0 0 0 3px #8a6a2a; }
#ui .bookwin .m4a .ap-slot > img { width: 70%; height: 70%; object-fit: contain; }
#ui .bookwin .m4a .ap-lens { left: auto; right: auto; top: auto; left: calc(76% - var(--dz) * 0.09); bottom: calc(var(--dz) * 0.135); width: calc(var(--dz) * 0.18); height: calc(var(--dz) * 0.18); z-index: 4; }
#ui .bookwin .m4a .ap-bslot { position: absolute; bottom: 0; z-index: 3; width: 150px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
#ui .bookwin .m4a .ap-bslot.l { left: 24%; }
#ui .bookwin .m4a .ap-bslot.r { left: 76%; }
#ui .bookwin .m4a .ap-bcirc { width: calc(var(--dz) * 0.24); height: calc(var(--dz) * 0.24); display: grid; place-items: center; border-radius: 50%;
  background: url(../assets/ui_craft/m4/ring_g4.png) center / 100% 100% no-repeat, radial-gradient(circle, #3a2f1c, #14100a 70%); }
#ui .bookwin .m4a .ap-bcirc img { width: 58%; height: 58%; object-fit: contain; }
#ui .bookwin .m4a .ap-bslot small { font: 600 13px/1.2 Mali, sans-serif; color: #d8d0bc; white-space: nowrap; }
#ui .bookwin .m4a .ap-bslot small b { font: 700 14px Fredoka, sans-serif; color: #fff; }
#ui .bookwin .m4a .ap-name { justify-content: flex-start; align-items: center; margin: 12px 4px 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
#ui .bookwin .m4a .ap-name b { font: 700 18px/1.2 Mali, sans-serif; }
#ui .bookwin .m4a .ap-name small { color: #b9b19e; }
#ui .bookwin .m4a .ap-lines { max-width: none; width: 100%; gap: 0; margin: 8px 0 6px; padding: 2px 4px; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
#ui .bookwin .m4a :is(.ap-q, .ap-o) { padding: 6px 4px; border-radius: 0; background: none; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font: 600 15px Mali, sans-serif; }
#ui .bookwin .m4a :is(.ap-q, .ap-o):last-child { border-bottom: 0; }
#ui .bookwin .ap-go.m4f-go.fg-big { min-width: 300px; height: 58px; min-height: 0; padding: 0 34px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 0; box-shadow: none;
  background: url(../assets/ui_craft/m4/btn_build.png) center / 100% 100% no-repeat !important; color: #f6e7c0; font: 800 20px Mali, sans-serif; text-shadow: none; }
/* (MIR4's geometry, after the user: "ตรวจสอบอาร์ทอีกครั้งนะครับ ภาพที่คุณส่งมามันไม่ตรง": the piece in the very middle of the dial,
   the two round slots ON its lower rim, a V of golden light between them, their names under the dial) */
#eco .m4f-dial, #ui .bookwin .m4a .ap-stage { margin-bottom: 30px; }
#eco .m4f-item, #eco .m4f-core { top: 50%; width: calc(var(--dz) * 0.36); height: calc(var(--dz) * 0.36); }
#eco .m4f-beam { top: 50%; width: calc(var(--dz) * 0.47); height: 9px; margin-top: -4.5px; }
#eco .m4f-beam.l { transform: rotate(126deg); }
#eco .m4f-beam.r { transform: rotate(54deg); }
#eco .m4f-mat { top: calc(var(--dz) * 0.75); bottom: auto; }
#eco .m4f-mat.l { left: 22%; }
#eco .m4f-mat.r { left: 78%; }
#eco .m4f-mat .m4-circ { width: calc(var(--dz) * 0.26); height: calc(var(--dz) * 0.26); }
#ui .bookwin .m4a .ap-slot { left: 32%; top: 32%; width: 36%; height: 36%; }
#ui .bookwin .m4a .ap-ring { left: 30%; top: 30%; width: 40%; height: 40%; }
#ui .bookwin .m4a .ap-bslot { top: calc(var(--dz) * 0.75); bottom: auto; }
#ui .bookwin .m4a .ap-bslot.l { left: 22%; }
#ui .bookwin .m4a .ap-bslot.r { left: 78%; }
#ui .bookwin .m4a .ap-bcirc { width: calc(var(--dz) * 0.26); height: calc(var(--dz) * 0.26); }
#ui .bookwin .m4a .ap-lens { left: calc(78% - var(--dz) * 0.095); top: calc(var(--dz) * 0.785); bottom: auto; width: calc(var(--dz) * 0.19); height: calc(var(--dz) * 0.19); }
/* (measured off the user's MIR4 recording, 2026-10-17: the piece a little above the middle (41%), the slots on the lower rim at
   22% / 79% and 74% down, 0.30 of the dial wide; behind the piece a spray of golden rays turning and breathing; the V of light
   pulsing; a filled slot glows gold round its rim) */
#eco .m4f-item, #eco .m4f-core { top: 41%; width: calc(var(--dz) * 0.38); height: calc(var(--dz) * 0.38); }
#eco .m4f-beam { top: 41%; width: calc(var(--dz) * 0.435); }
#eco .m4f-beam.l { transform: rotate(130deg); }
#eco .m4f-beam.r { transform: rotate(49deg); }
#eco .m4f-mat { top: calc(var(--dz) * 0.74 - var(--dz) * 0.15); }
#eco .m4f-mat.l { left: 22%; }
#eco .m4f-mat.r { left: 79%; }
#eco .m4f-mat .m4-circ { width: calc(var(--dz) * 0.3); height: calc(var(--dz) * 0.3); }
#eco .m4f-mbtn:not(.short) .m4-circ { filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.85)); }
#eco .m4f-mat small b { font-size: 15px; }
#eco .m4f-item::before { content: ''; position: absolute; left: -45%; top: -45%; width: 190%; height: 190%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, 0.85) 0deg 3deg, rgba(255, 210, 90, 0) 3deg 14deg);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0.6) 46%, transparent 70%); mask: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0.6) 46%, transparent 70%); }
#ui .bookwin .m4a .ap-slot { left: 31%; top: 22%; width: 38%; height: 38%; }
#ui .bookwin .m4a .ap-ring { left: 29%; top: 20%; width: 42%; height: 42%; }
#ui .bookwin .m4a .ap-stage .m4f-beam { top: 41%; width: calc(var(--dz) * 0.435); }
#ui .bookwin .m4a .ap-bslot { top: calc(var(--dz) * 0.74 - var(--dz) * 0.15); }
#ui .bookwin .m4a .ap-bslot.l { left: 22%; }
#ui .bookwin .m4a .ap-bslot.r { left: 79%; }
#ui .bookwin .m4a .ap-bcirc { width: calc(var(--dz) * 0.3); height: calc(var(--dz) * 0.3); filter: drop-shadow(0 0 6px rgba(255, 214, 110, 0.85)); }
#ui .bookwin .m4a .ap-lens { left: calc(79% - var(--dz) * 0.1); top: calc(var(--dz) * 0.64); width: calc(var(--dz) * 0.2); height: calc(var(--dz) * 0.2); }
#ui .bookwin .m4a .ap-stage::after { content: ''; position: absolute; left: 50%; top: 41%; width: calc(var(--dz) * 0.72); height: calc(var(--dz) * 0.72); margin: calc(var(--dz) * -0.36) 0 0 calc(var(--dz) * -0.36); z-index: 2; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, 0.85) 0deg 3deg, rgba(255, 210, 90, 0) 3deg 14deg);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0.6) 46%, transparent 70%); mask: radial-gradient(circle, transparent 24%, #000 30%, rgba(0, 0, 0, 0.6) 46%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  #eco .m4f-item::before, #ui .bookwin .m4a .ap-stage::after { animation: m4fRays 7s linear infinite, m4fBreath 1.6s ease-in-out infinite; }
  #eco .m4f-aura, #ui .bookwin .m4a .ap-aura { animation: m4fFlicker 0.9s steps(3) infinite alternate, m4Aura 9s ease-in-out infinite; }
}
@keyframes m4fRays { to { transform: rotate(360deg); } }
@keyframes m4fBreath { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes m4fFlicker { 0% { opacity: 0.78; } 50% { opacity: 0.95; } 100% { opacity: 0.86; } }

/* (auto enhancement, MIR4's blue button beside the main one, 2026-10-17: the goal stepper above them) */
#eco .m4f-btns { gap: 10px; align-items: center; }
#eco .m4f-btns .m4f-go.fg-big { min-width: 250px; }
#eco .m4f-auto { flex: none; min-width: 190px; height: 58px; padding: 0 26px; border: 2px solid #6fb4ff; border-radius: 30px; cursor: pointer;
  background: linear-gradient(180deg, #1d3f78, #102650); color: #e4f2ff; font: 800 17px Mali, sans-serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 10px rgba(80, 160, 255, 0.35); }
#eco .m4f-auto:hover:not([disabled]) { filter: brightness(1.15); }
#eco .m4f-auto[disabled] { filter: grayscale(0.8) brightness(0.6); cursor: default; }
#eco .m4f-auto.on { background: linear-gradient(180deg, #2a6ad0, #183c8a); }
@media (prefers-reduced-motion: no-preference) { #eco .m4f-auto.on { animation: m4fAuto 1s ease-in-out infinite; } }
@keyframes m4fAuto { 0%, 100% { box-shadow: 0 0 6px rgba(110, 190, 255, 0.5); } 50% { box-shadow: 0 0 18px 3px rgba(130, 200, 255, 0.95); } }
#eco .m4f-goal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 6px; font: 600 14px Mali, sans-serif; color: #cfc7b0; }
#eco .m4f-goal button { width: 28px; height: 28px; padding: 0; border: 1.5px solid #8a7a5a; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #f4ecd8; font: 800 17px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4f-goal button[disabled] { opacity: 0.4; cursor: default; }
#eco .m4f-goal b { min-width: 42px; text-align: center; font: 700 19px Fredoka, sans-serif; color: #ffcf5a; }
#eco .m4f-goal small { margin-left: 6px; font: 600 12px Mali, sans-serif; color: #9fd0ff; }

/* (the auto goal sits in the left column under the odds, as MIR4 keeps its info there; the dial a little smaller so the page fits) */
#eco .m4f-goal { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; margin: 12px 0 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
#eco .m4f-goal > div { display: flex; align-items: center; gap: 6px; }
#eco .m4f-goal small { margin-left: 0; }
#eco .m4f-dial, #ui .bookwin .m4a .ap-stage { --dz: min(272px, 30vh); }
#eco .m4f-name { margin-top: 4px; padding-top: 8px; }
#eco .m4f-rows { margin: 6px 0 4px; }
#eco .m4f-rows li { padding: 3px 0; }

/* (the user, 2026-10-17: "ผมเห็นว่าไม่ตรงกับวง" - the piece now sits IN the dial's centre recess and the two slots ON its lower
   rim (125 / 55 degrees round it), the light from the true centre) */
#eco .m4f-item, #eco .m4f-core { top: 50%; width: calc(var(--dz) * 0.36); height: calc(var(--dz) * 0.36); }
#eco .m4f-beam, #ui .bookwin .m4a .ap-stage .m4f-beam { top: 50%; width: calc(var(--dz) * 0.45); }
#eco .m4f-beam.l { transform: rotate(127deg); }
#eco .m4f-beam.r { transform: rotate(53deg); }
#eco .m4f-mat { top: calc(var(--dz) * 0.86 - var(--dz) * 0.14); }
#eco .m4f-mat.l { left: 23%; }
#eco .m4f-mat.r { left: 77%; }
#eco .m4f-mat .m4-circ { width: calc(var(--dz) * 0.28); height: calc(var(--dz) * 0.28); }
#eco .m4f-dial, #ui .bookwin .m4a .ap-stage { margin-bottom: 40px; }
#ui .bookwin .m4a .ap-slot { left: 32%; top: 32%; width: 36%; height: 36%; }
#ui .bookwin .m4a .ap-ring { left: 30%; top: 30%; width: 40%; height: 40%; }
#ui .bookwin .m4a .ap-stage::after { top: 50%; }
#ui .bookwin .m4a .ap-bslot { top: calc(var(--dz) * 0.86 - var(--dz) * 0.14); }
#ui .bookwin .m4a .ap-bslot.l { left: 23%; }
#ui .bookwin .m4a .ap-bslot.r { left: 77%; }
#ui .bookwin .m4a .ap-bcirc { width: calc(var(--dz) * 0.28); height: calc(var(--dz) * 0.28); }
#ui .bookwin .m4a .ap-lens { left: calc(77% - var(--dz) * 0.095); top: calc(var(--dz) * 0.765); width: calc(var(--dz) * 0.19); height: calc(var(--dz) * 0.19); }

/* (MIR4's thin, very bright yellow rim round the piece's disc and the filled slots - the rays round it come from the Codex corona) */
#eco .m4f-item .m4-circ.big, #ui .bookwin .m4a .ap-slot:not(.empty) { border-radius: 50%; box-shadow: 0 0 0 2px #fff3a8, 0 0 0 4px rgba(255, 214, 90, 0.75), 0 0 16px 4px rgba(255, 210, 80, 0.8); }
#eco .m4f-mbtn:not(.short) .m4-circ { border-radius: 50%; filter: none; box-shadow: 0 0 0 2px #fff3a8, 0 0 10px 3px rgba(255, 210, 80, 0.75); }

/* (the MIR4 art painted for these two pages, 2026-10-17: assets/ui_forge_m4 - the dark bronze dial, its fire-and-lightning burst,
   the flat tier discs, the antique gold slot rims, the chevron buttons) */
#eco .m4f-aura, #ui .bookwin .m4a .ap-aura { left: calc(var(--dz) * -0.32); top: calc(var(--dz) * -0.32); width: calc(var(--dz) * 1.64); height: calc(var(--dz) * 1.64); opacity: 0.95; }
#eco .m4f-item .m4-circ.g0 { --md: url(../assets/ui_forge_m4/disc_g0.png); --mr: none; }
#eco .m4f-item .m4-circ.g1 { --md: url(../assets/ui_forge_m4/disc_g1.png); --mr: none; }
#eco .m4f-item .m4-circ.g2 { --md: url(../assets/ui_forge_m4/disc_g2.png); --mr: none; }
#eco .m4f-item .m4-circ.g3 { --md: url(../assets/ui_forge_m4/disc_g3.png); --mr: none; }
#eco .m4f-item .m4-circ.g4 { --md: url(../assets/ui_forge_m4/disc_g4.png); --mr: none; }
#eco .m4f-item .m4-circ.g5 { --md: url(../assets/ui_forge_m4/disc_g5.png); --mr: none; }
#eco .m4f-item .m4-circ > .m4-disc { inset: 0; }
#eco .m4f-mat .m4-circ { --mr: url(../assets/ui_forge_m4/slot_ring.png); }
#eco .m4f-mat .m4-circ > .m4-disc { inset: 13%; }
#ui .bookwin .m4a .ap-slot.g0 { background: url(../assets/ui_forge_m4/disc_g0.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot.g1 { background: url(../assets/ui_forge_m4/disc_g1.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot.g2 { background: url(../assets/ui_forge_m4/disc_g2.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot.g3 { background: url(../assets/ui_forge_m4/disc_g3.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot.g4 { background: url(../assets/ui_forge_m4/disc_g4.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot.g5 { background: url(../assets/ui_forge_m4/disc_g5.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-slot:not([class*=" g"]) { background: url(../assets/ui_forge_m4/disc_g0.png) center / 100% 100% no-repeat; }
#ui .bookwin .m4a .ap-bcirc { background: url(../assets/ui_forge_m4/slot_ring.png) center / 100% 100% no-repeat, radial-gradient(circle, #2c2a26 0 52%, transparent 53%); }
#eco .m4f-go.fg-big, #ui .bookwin .ap-go.m4f-go.fg-big { min-width: 320px; height: 64px; background-image: url(../assets/ui_forge_m4/btn_main.png) !important; color: #f6e7c0; }
#eco .m4f-go.fg-big[disabled], #ui .bookwin .ap-go.m4f-go.fg-big[disabled] { background-image: url(../assets/ui_forge_m4/btn_main_off.png) !important; filter: none; }

/* (the blue auto button: Codex's chevron bar, assets/ui_forge_m4/btn_auto.png) */
#eco .m4f-auto { height: 64px; min-width: 210px; border: 0; border-radius: 0; box-shadow: none; background: url(../assets/ui_forge_m4/btn_auto.png) center / 100% 100% no-repeat; }
#eco .m4f-auto.on { background: url(../assets/ui_forge_m4/btn_auto.png) center / 100% 100% no-repeat; filter: brightness(1.25); }
@media (prefers-reduced-motion: no-preference) { #eco .m4f-auto.on { animation: m4fAutoB 1s ease-in-out infinite; } }
@keyframes m4fAutoB { 0%, 100% { filter: brightness(1.05); } 50% { filter: brightness(1.45) drop-shadow(0 0 8px rgba(120, 190, 255, 0.9)); } }
#eco .m4f-btns .m4f-go.fg-big { min-width: 260px; }

/* (the burst covered the odds and the slot names: smaller and softer, the text on small dark plates - crisp, no glow) */
#eco .m4f-aura, #ui .bookwin .m4a .ap-aura { left: calc(var(--dz) * -0.2); top: calc(var(--dz) * -0.2); width: calc(var(--dz) * 1.4); height: calc(var(--dz) * 1.4); opacity: 0.7; }
#eco .z-bad .m4f-aura { opacity: 0.85; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  #eco .m4f-aura, #ui .bookwin .m4a .ap-aura { animation: m4fFlicker2 0.9s steps(3) infinite alternate, m4Aura 9s ease-in-out infinite; }
}
@keyframes m4fFlicker2 { 0% { opacity: 0.62; } 50% { opacity: 0.78; } 100% { opacity: 0.7; } }
#eco .m4f-rate { padding: 6px 10px 8px; border-radius: 10px; background: rgba(12, 9, 6, 0.72); }
#eco .m4f-mat small, #ui .bookwin .m4a .ap-bslot small { padding: 1px 7px; border-radius: 6px; background: rgba(12, 9, 6, 0.75); }

/* (the user, 2026-10-17: "ผมชอบออล่าด้านหลังของแบบแรกมากกว่าเป็นภาพวาดเป็นไฟ" - the first aura (the craft page's glowing ring of
   light, assets/ui_craft/m4/dial_aura.png) is back behind the bronze dial instead of the painted fire; redder in the danger levels) */
#eco .m4f-aura, #ui .bookwin .m4a .ap-aura { left: calc(var(--dz) * -0.16); top: calc(var(--dz) * -0.16); width: calc(var(--dz) * 1.32); height: calc(var(--dz) * 1.32); opacity: 0.95; }
#eco .z-warn .m4f-aura { filter: saturate(1.2) hue-rotate(-8deg); }
#eco .z-bad .m4f-aura { opacity: 1; filter: saturate(1.5) hue-rotate(-22deg) brightness(1.1); }
@media (prefers-reduced-motion: no-preference) {
  #eco .m4f-aura, #ui .bookwin .m4a .ap-aura { animation: m4Aura 9s ease-in-out infinite; }
}

/* (the user, 2026-10-17, with a picture of the first dial: "ออล่าด้านหลังแบบนี้สวยกว่า" - the first look is back: the craft page's
   polished gold dial (assets/ui_craft/m4/dial.png) with its glowing aura, the glassy tier discs in their jewelled rings; the
   piece stays in the dial's centre, the slots on its rim; the bronze set in assets/ui_forge_m4 is kept unused but the buttons) */
#eco .m4f-item .m4-circ.g0, #eco .m4f-mat .m4-circ.g0 { --md: url(../assets/ui_craft/m4/disc_g0.png); --mr: url(../assets/ui_craft/m4/ring_g0.png); }
#eco .m4f-item .m4-circ.g1, #eco .m4f-mat .m4-circ.g1 { --md: url(../assets/ui_craft/m4/disc_g1.png); --mr: url(../assets/ui_craft/m4/ring_g1.png); }
#eco .m4f-item .m4-circ.g2, #eco .m4f-mat .m4-circ.g2 { --md: url(../assets/ui_craft/m4/disc_g2.png); --mr: url(../assets/ui_craft/m4/ring_g2.png); }
#eco .m4f-item .m4-circ.g3, #eco .m4f-mat .m4-circ.g3 { --md: url(../assets/ui_craft/m4/disc_g3.png); --mr: url(../assets/ui_craft/m4/ring_g3.png); }
#eco .m4f-item .m4-circ.g4, #eco .m4f-mat .m4-circ.g4 { --md: url(../assets/ui_craft/m4/disc_g4.png); --mr: url(../assets/ui_craft/m4/ring_g4.png); }
#eco .m4f-item .m4-circ.g5, #eco .m4f-mat .m4-circ.g5 { --md: url(../assets/ui_craft/m4/disc_g5.png); --mr: url(../assets/ui_craft/m4/ring_g5.png); }
#eco .m4f-item .m4-circ > .m4-disc, #eco .m4f-mat .m4-circ > .m4-disc { inset: 5%; }
#ui .bookwin .m4a .ap-slot.g0 { background: url(../assets/ui_craft/m4/ring_g0.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g0.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g1 { background: url(../assets/ui_craft/m4/ring_g1.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g1.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g2 { background: url(../assets/ui_craft/m4/ring_g2.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g2.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g3 { background: url(../assets/ui_craft/m4/ring_g3.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g3.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g4 { background: url(../assets/ui_craft/m4/ring_g4.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g4.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-slot.g5 { background: url(../assets/ui_craft/m4/ring_g5.png) center / 100% 100% no-repeat, url(../assets/ui_craft/m4/disc_g5.png) center / 90% 90% no-repeat; }
#ui .bookwin .m4a .ap-bcirc { background: url(../assets/ui_craft/m4/ring_g4.png) center / 100% 100% no-repeat, radial-gradient(circle, #3a2f1c, #14100a 70%); }

/* (the user, 2026-10-17: "แต่ไม่เอาแสงหมุนๆตรงไอเท็ม" - no turning rays round the piece any more; its bright rim stays) */
#eco .m4f-item::before, #ui .bookwin .m4a .ap-stage::after { content: none !important; animation: none !important; }

/* (the user, 2026-10-17: "อยากได้เป็นออร่าแสงนุ่มๆ แบบอิสระ": a soft aura round the piece - six blobs of warm light drifting each on
   its own path and pace round the disc, breathing, blended as light; nothing turns) */
#eco .m4f-glow { position: absolute; inset: -38%; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
#ui .bookwin .m4a .ap-glow { position: absolute; left: 18%; top: 18%; width: 64%; height: 64%; z-index: 2; pointer-events: none; mix-blend-mode: screen; }
:is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i { position: absolute; left: 28%; top: 28%; width: 44%; height: 44%; border-radius: 50%; opacity: 0.75;
  background: radial-gradient(circle, rgba(255, 244, 200, 0.95), rgba(255, 210, 110, 0.55) 38%, rgba(255, 190, 80, 0) 70%); filter: blur(5px); }
:is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(2) { width: 36%; height: 36%; left: 32%; top: 32%; }
:is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(4) { width: 38%; height: 38%; left: 31%; top: 31%; }
:is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(6) { width: 50%; height: 50%; left: 25%; top: 25%; opacity: 0.5; }
@media (prefers-reduced-motion: no-preference) {
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(1) { animation: m4fD1 6.3s ease-in-out infinite; }
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(2) { animation: m4fD2 7.9s ease-in-out infinite; }
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(3) { animation: m4fD3 5.6s ease-in-out infinite; }
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(4) { animation: m4fD4 8.7s ease-in-out infinite; }
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(5) { animation: m4fD5 6.9s ease-in-out infinite; }
  :is(#eco .m4f-glow, #ui .bookwin .m4a .ap-glow) i:nth-child(6) { animation: m4fD6 4.8s ease-in-out infinite; }
}
@keyframes m4fD1 { 0%, 100% { transform: translate(-34%, -30%) scale(1); opacity: 0.7; } 35% { transform: translate(-10%, -42%) scale(1.25); opacity: 0.95; } 70% { transform: translate(-40%, -8%) scale(0.85); opacity: 0.55; } }
@keyframes m4fD2 { 0%, 100% { transform: translate(38%, -26%) scale(0.9); opacity: 0.6; } 40% { transform: translate(18%, -44%) scale(1.2); opacity: 0.9; } 75% { transform: translate(44%, 4%) scale(1); opacity: 0.7; } }
@keyframes m4fD3 { 0%, 100% { transform: translate(36%, 30%) scale(1.1); opacity: 0.8; } 30% { transform: translate(44%, 6%) scale(0.85); opacity: 0.55; } 65% { transform: translate(12%, 42%) scale(1.25); opacity: 0.95; } }
@keyframes m4fD4 { 0%, 100% { transform: translate(-30%, 36%) scale(1); opacity: 0.65; } 45% { transform: translate(-44%, 10%) scale(1.2); opacity: 0.9; } 80% { transform: translate(-6%, 46%) scale(0.9); opacity: 0.6; } }
@keyframes m4fD5 { 0%, 100% { transform: translate(0%, -46%) scale(0.85); opacity: 0.55; } 50% { transform: translate(-22%, -38%) scale(1.15); opacity: 0.9; } }
@keyframes m4fD6 { 0%, 100% { transform: scale(0.9); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.6; } }

/* (the user, 2026-10-17: "แก้โอกาสสำเร็จให้เล็กลง มันบัง" - the odds box smaller and tucked into the corner, off the dial) */
#eco .m4f-rate { left: 0; top: 0; max-width: 112px; padding: 4px 8px 6px; gap: 0; border-radius: 8px; }
#eco .m4f-rate small { font-size: 11.5px; }
#eco .m4f-rate b { font-size: 24px; line-height: 1.1; }
#eco .m4f-zone { margin-top: 3px; gap: 4px; font-size: 11px; line-height: 1.2; }
#eco .m4f-zone i { width: 14px; height: 14px; font-size: 9px; border-width: 1px; }
#eco .m4f-rate em { font-size: 10.5px; }
#eco .m4f-goal { margin-top: 6px; padding-top: 5px; gap: 2px; font-size: 11px; }
#eco .m4f-goal > div { gap: 4px; }
#eco .m4f-goal button { width: 20px; height: 20px; font-size: 13px; }
#eco .m4f-goal b { min-width: 30px; font-size: 15px; }
#eco .m4f-goal small { font-size: 10.5px; }

/* (the outcome over the dial's piece: pops, floats up and fades in 1.7 s, never in the way; the piece's +N big and gold) */
#eco .m4f-core .fg-res { top: -26px; padding: 4px 14px; font-size: 15px; pointer-events: none; animation: m4fRes 1.7s ease-out both !important; }
@keyframes m4fRes {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  22% { transform: translate(-50%, 0) scale(1); }
  65% { opacity: 1; transform: translate(-50%, -10px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(0.95); }
}
#eco .m4f-plus { right: -6%; top: -4%; font: 800 27px/1 Fredoka, sans-serif; color: #ffe066; -webkit-text-stroke: 4px #1a1008; paint-order: stroke fill; letter-spacing: -0.5px; }
#ui .bookwin .m4a .ap-slot > b { position: absolute; z-index: 5; right: -6%; top: -4%; font: 800 24px/1 Fredoka, sans-serif; color: #ffe066; -webkit-text-stroke: 4px #1a1008; paint-order: stroke fill; text-shadow: none; }

/* (the user, 2026-10-17: "อย่าให้ตัวเลข +8 บังไอเท็ม" - the +N stands beside the disc on the right, clear of the piece) */
#eco .m4f-plus { right: auto; left: 100%; top: 6%; margin-left: 4px; }
#ui .bookwin .m4a .ap-slot > b { right: auto; left: 100%; top: 6%; margin-left: 4px; }

/* (2026-10-17, the user: "ให้ใช้หินดำในการประเมินด้วย ... และให้เห็นปุ่มประเมินด้วย": the right slot is หินดำ; the lens shows only
   while it appraises, orbiting the piece; the page tighter so the button is always in view) */
#ui .bookwin .m4a:not(.cast) .ap-lens { display: none; }
#ui .bookwin .m4a.cast .ap-lens { left: 50%; top: 50%; right: auto; bottom: auto; width: calc(var(--dz) * 0.19); height: calc(var(--dz) * 0.19); margin: calc(var(--dz) * -0.095) 0 0 calc(var(--dz) * -0.095); }
#ui .bookwin .m4a .ap-bcirc[data-info] { cursor: pointer; }
#ui .bookwin .m4a .ap-bslot small b.short { color: #ff7a6a; }
#ui .bookwin .m4a .ap-stage { --dz: min(236px, 26vh); margin-bottom: 34px; }
#ui .bookwin .ap-one.m4a { gap: 4px; }
#ui .bookwin .m4a .ap-name { margin-top: 2px; padding-top: 6px; }
#ui .bookwin .m4a .ap-lines { margin: 4px 0; }
#ui .bookwin .m4a :is(.ap-q, .ap-o) { padding: 4px 4px; font-size: 14px; }
#ui .bookwin .m4a .ap-acts { margin-top: 4px; }
#ui .bookwin .ap-bschip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.4); font: 700 13px Fredoka, sans-serif; color: #fff; cursor: pointer; }
#ui .bookwin .ap-bschip img { width: 18px; height: 18px; object-fit: contain; }
#ui .bookwin .ap-bschip.short { color: #ff7a6a; }
/* (the appraise button: the book's gold border-image and dark text were laid over the bronze chevron - off, light text as the enhance one) */
#ui .bookwin .ap-go.m4f-go.fg-big { border-image: none !important; color: #f6e7c0 !important; }
#ui .bookwin .ap-go.m4f-go.fg-big .m4f-cost { color: #fff; }

/* (the lens is back in the right slot, as before; it still leaves it to orbit the piece while it appraises) */
#ui .bookwin .m4a:not(.cast) .ap-lens { display: block; left: calc(77% - var(--dz) * 0.095); top: calc(var(--dz) * 0.765); width: calc(var(--dz) * 0.19); height: calc(var(--dz) * 0.19); margin: 0; }
/* (css/bookcontrast.css darkens every appraise button's text for the old gold button, !important: the bronze chevron keeps light text) */
html:root .eco-body .eco-main .ap-work .ap-one.m4a .ap-acts button.ap-go.m4f-go.fg-big:not(.primary):not(.x-none) { color: #f6e7c0 !important; -webkit-text-fill-color: #f6e7c0 !important; text-shadow: none !important; }
html:root .eco-body .eco-main .ap-work .ap-one.m4a .ap-acts button.ap-go.m4f-go.fg-big:not(.primary):not(.x-none) .m4f-cost { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* ---------- the appraisal page in the enhancement page's look (2026-10-17, the user: "ปรับ ui ให้เป็นในรูปแบบตีบวก"): no navy
   panel with gold corners, the name with its tags on a rule, the options as plain rows (name left, value right, thin rules
   between), the blue and bronze chevron buttons ---------- */
#ui .bookwin .ap-one.m4a { padding: 0 2px 6px !important; border: 0 !important; border-image: none !important; background: none !important; }
#ui .bookwin .m4a .ap-name { justify-content: flex-start; margin: 2px 4px 0; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
#ui .bookwin .m4a .ap-lines { counter-reset: none; }
#ui .bookwin .m4a :is(.ap-q, .ap-o) { padding: 5px 2px !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; font: 600 15px Mali, sans-serif; color: #d8d0bc; }
#ui .bookwin .m4a :is(.ap-q, .ap-o)::before { content: none !important; }
#ui .bookwin .m4a .ap-o b { font: 700 15px Fredoka, Mali, sans-serif; }
#ui .bookwin .m4a .ap-q small { color: #8f8878; }
#ui .bookwin .m4a .ap-done { margin: 2px 0; font: 700 14px Mali, sans-serif; }
#ui .bookwin .m4a .ap-acts.m4f-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: nowrap; }
#ui .bookwin .m4a .ap-sub.m4f-auto { flex: none; min-width: 200px; height: 64px; padding: 0 26px; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  background: url(../assets/ui_forge_m4/btn_auto.png) center / 100% 100% no-repeat !important; color: #e4f2ff !important; -webkit-text-fill-color: #e4f2ff !important; font: 800 16px Mali, sans-serif; }
#ui .bookwin .m4a .ap-acts .ap-go.m4f-go.fg-big { min-width: 230px; }

/* (the user, 2026-10-17: "แก้ขนาดฝั่งด้านขวาด้วยให้เป็นเหมือนตีบวก": the appraisal list and the enhancement list - and the bag - all
   five a row with the same gap, so the slots are the same size on both pages) */
#ui .bookwin .fg-grid, #ui .bookwin .ap-list .eco-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#ui .bookwin .ap-list .eco-grid { align-content: start; }
/* (the enhancement list shares its width with the category rail (52 px + 8 px): the appraisal list as wide, centred, so a slot is the same size) */
#ui .bookwin .ap-list .eco-grid { width: calc(100% - 60px); margin: 0 auto; }
/* (the user, 2026-10-17: "ขยายให้ใหญ่ขึ้นเท่ากับตีบวก" - the appraisal dial the same size as the enhancement one) */
#ui .bookwin .m4a .ap-stage { --dz: min(272px, 30vh); margin-bottom: 40px; }

/* ---------- the option re-roll page (2026-10-17, economy.js rerollView): the dial as on the appraisal page, a "current › new" table
   with a quality bar in each cell, slot-machine reels while it rolls, the overall quality and the choice ---------- */
#ui .bookwin .rr-tabs .ap-modes button.on[disabled] { opacity: 1; cursor: default; }
#ui .bookwin .rr-table { width: 100%; margin: 4px 0 0; }
#ui .bookwin .rr-head { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); padding: 0 2px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font: 700 13px Mali, sans-serif; color: #b9b19e; }
#ui .bookwin .rr-head span:last-child { color: #ffd76a; }
#ui .bookwin .rr-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
#ui .bookwin .rr-arrow { text-align: center; font: 900 20px/1 Fredoka, sans-serif; font-style: normal; color: #5fd0ff; }
#ui .bookwin .rr-c { --qc: #d8d0bc; position: relative; box-sizing: border-box; height: 46px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 6px; padding: 4px 8px 6px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 45%, transparent); }
#ui .bookwin .rr-c span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 13.5px Mali, sans-serif; color: #ece4d0; }
#ui .bookwin .rr-c b { font: 700 15px Fredoka, sans-serif; color: var(--qc); }
#ui .bookwin .rr-c .rr-bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
#ui .bookwin .rr-c .rr-bar i { display: block; height: 100%; border-radius: 2px; background: var(--qc); }
#ui .bookwin .rr-c.q1, #ui .bookwin .rr-legend .q1 { --qc: #7fe08a; }
#ui .bookwin .rr-c.q2, #ui .bookwin .rr-legend .q2 { --qc: #5fb4ff; }
#ui .bookwin .rr-c.q3, #ui .bookwin .rr-legend .q3 { --qc: #ffcf5a; }
#ui .bookwin .rr-legend .q0 { --qc: #d8d0bc; }
#ui .bookwin .rr-c.q3 { background: linear-gradient(90deg, rgba(120, 84, 10, 0.55), rgba(40, 28, 6, 0.5)); box-shadow: inset 0 0 0 1.5px #ffcf5a; }
#ui .bookwin .rr-c.q-none { --qc: rgba(255, 255, 255, 0.2); }
#ui .bookwin .rr-c.q-none span { color: #8f8878; letter-spacing: 0.2em; }
#ui .bookwin .rr-top { position: absolute; right: 6px; top: -8px; padding: 0 6px; border-radius: 6px; background: #ffcf5a; color: #3a2400; font: 800 10px/15px Mali, sans-serif; font-style: normal; }
/* (the reel: a strip of other rolls sliding up, the real one last; the frame flashes as it lands) */
#ui .bookwin .rr-reel { height: 46px; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #ffd76a, 0 0 10px rgba(255, 214, 110, 0.45); }
#ui .bookwin .rr-strip { animation: rrSpin var(--d) cubic-bezier(0.12, 0.72, 0.18, 1) both; animation-delay: var(--dl); }
#ui .bookwin .rr-r { height: 46px; }
@keyframes rrSpin { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -46px)); } }
#ui .bookwin .rr.spin .ap-aura { animation: rrAura 0.3s ease-in-out infinite alternate !important; }
@keyframes rrAura { from { opacity: 0.75; } to { opacity: 1; filter: brightness(1.35) saturate(1.3); } }
#ui .bookwin .rr-table[data-act] { cursor: pointer; }
/* (the verdict, the colours, the choice) */
#ui .bookwin .rr-sum { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; font: 600 14px Mali, sans-serif; color: #d8d0bc; }
#ui .bookwin .rr-sum b { font: 700 17px Fredoka, sans-serif; color: #fff; }
#ui .bookwin .rr-sum b.up { color: #7fe08a; }
#ui .bookwin .rr-sum b.down { color: #ff8a7a; }
#ui .bookwin .rr-sum i { font: 900 18px Fredoka, sans-serif; font-style: normal; color: #5fd0ff; }
#ui .bookwin .rr-sum em { padding: 1px 8px; border-radius: 6px; background: #ffcf5a; color: #3a2400; font: 800 12px Mali, sans-serif; font-style: normal; }
#ui .bookwin .rr-legend { display: flex; justify-content: center; gap: 12px; margin: 4px 0 2px; font: 600 11.5px Mali, sans-serif; color: #9a927e; }
#ui .bookwin .rr-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: var(--qc); }
#ui .bookwin .rr-note { margin: 6px 4px; text-align: center; font: 500 13px/1.5 Mali, sans-serif; color: #b9b19e; }
#ui .bookwin .rr .ap-acts .best { animation: rrBest 1.2s ease-in-out infinite; }
@keyframes rrBest { 50% { filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 214, 110, 0.95)); } }
/* (the list side: the values this piece can roll) */
#ui .bookwin .rr-pool { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
#ui .bookwin .rr-pool span { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.3); font: 600 12.5px Mali, sans-serif; color: #d8d0bc; }
#ui .bookwin .rr-pool em { font-style: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#ui .bookwin .rr-pool b { flex: none; font: 700 12px Fredoka, sans-serif; color: #fff; }
@media (prefers-reduced-motion: reduce) { #ui .bookwin .rr-strip { animation-duration: 1ms; } }

/* (it all fits on the page: the table is what matters here, so the dial is smaller - smaller still for 5-6 rows - and the rows
   40 px) */
#ui .bookwin .rr .ap-stage { --dz: min(196px, 22vh); margin-bottom: 34px; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-stage { --dz: min(150px, 17vh); margin-bottom: 30px; }
#ui .bookwin .rr .ap-bslot small { font-size: 12px; }
#ui .bookwin .rr-tabs .ap-modes button { padding: 4px 8px !important; font-size: 13px !important; }
#ui .bookwin .ap-one.rr { gap: 2px; }
#ui .bookwin .rr .ap-name { padding-top: 4px; }
#ui .bookwin .rr-row { padding: 3px 0; }
#ui .bookwin .rr-c, #ui .bookwin .rr-reel, #ui .bookwin .rr-r { height: 40px; }
#ui .bookwin .rr-c { padding: 3px 8px 5px; }
@keyframes rrSpin { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -40px)); } }
#ui .bookwin .rr-sum { margin-top: 4px; }
#ui .bookwin .rr .ap-acts { margin-top: 2px; }

/* (the two captions under the smaller dial: the name over the count, so they never touch) */
#ui .bookwin .rr .ap-bslot { width: 96px; }
#ui .bookwin .rr .ap-bslot small { display: flex; flex-direction: column; align-items: center; line-height: 1.15; white-space: nowrap; }

/* (room for every row: a small back button and the page name in the top corner instead of a row of tabs; the colour legend on the
   list side; the dial smaller the more rows there are) */
#ui .bookwin .ap-one.rr { position: relative; }
#ui .bookwin .rr-title { position: absolute; left: 0; top: 0; z-index: 6; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#ui .bookwin .rr-title button { padding: 3px 10px; border: 1px solid #8a7a5a; border-radius: 999px; background: rgba(12, 9, 6, 0.75); color: #e8e0cc; font: 600 12.5px Mali, sans-serif; cursor: pointer; }
#ui .bookwin .rr-title button:hover { filter: brightness(1.2); }
#ui .bookwin .rr-title b { padding: 2px 8px; border-radius: 6px; background: rgba(12, 9, 6, 0.75); font: 700 15px Mali, sans-serif; color: #ffd76a; }
#ui .bookwin .rr.rows4 .ap-stage { --dz: min(160px, 18vh); margin-bottom: 30px; }
#ui .bookwin .rr.rows5 .ap-stage { --dz: min(128px, 14vh); margin-bottom: 28px; }
#ui .bookwin .rr.rows6 .ap-stage { --dz: min(112px, 12vh); margin-bottom: 28px; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot small { flex-direction: row; gap: 3px; font-size: 11px; }
#ui .bookwin .rr:is(.rows5, .rows6) :is(.rr-c, .rr-reel, .rr-r) { height: 36px; }
#ui .bookwin .rr:is(.rows5, .rows6) .rr-strip { animation-name: rrSpin36; }
@keyframes rrSpin36 { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -36px)); } }
#ui .bookwin .rr:is(.rows5, .rows6) .rr-row { padding: 2px 0; }
#ui .bookwin .rr-list .rr-legend { justify-content: flex-start; flex-wrap: wrap; margin: 8px 0 0; }
#ui .bookwin .rr-list .rr-legend b { font: 700 12px Mali, sans-serif; color: #c8c0aa; }

/* (locking rows on the re-roll page: a padlock before each current row; a locked row is gold-edged and its new side shows it kept) */
#ui .bookwin .rr-head, #ui .bookwin .rr-row { grid-template-columns: 28px minmax(0, 1fr) 20px minmax(0, 1fr); }
#ui .bookwin .rr-lock { width: 24px; height: 24px; padding: 0; border: 1px solid #6a5a3a; border-radius: 50%; background: rgba(0, 0, 0, 0.45); font-size: 12px; line-height: 1; cursor: pointer; filter: grayscale(0.6); opacity: 0.85; }
#ui .bookwin .rr-lock:hover:not([disabled]) { filter: none; opacity: 1; border-color: #ffd76a; }
#ui .bookwin .rr-lock.on { filter: none; opacity: 1; border-color: #ffd76a; background: rgba(120, 84, 10, 0.6); box-shadow: 0 0 6px rgba(255, 214, 110, 0.7); }
#ui .bookwin .rr-lock[disabled] { cursor: default; opacity: 0.35; }
#ui .bookwin .rr-lock.on[disabled] { opacity: 0.9; }
#ui .bookwin .rr-row.locked > .rr-c { box-shadow: inset 0 0 0 1.5px #ffd76a; }
#ui .bookwin .rr-keep { position: relative; opacity: 0.8; }
#ui .bookwin .rr-keep > i { position: absolute; right: 6px; top: -8px; padding: 0 6px; border-radius: 6px; background: #3a2f1c; color: #ffd76a; font: 700 10px/15px Mali, sans-serif; font-style: normal; box-shadow: inset 0 0 0 1px #ffd76a; }
#ui .bookwin .rr-lknote { margin: 6px 0 0; text-align: center; font: 600 13px Mali, sans-serif; color: #ffd76a; }
#ui .bookwin .rr-lknote b { font: 800 15px Fredoka, sans-serif; color: #ff9a6a; }
#ui .bookwin .rr-lknote.dim { color: #9a927e; font-weight: 500; font-size: 12px; }
#ui .bookwin .rr .ap-acts { margin-top: 12px; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot { width: 76px; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot small { flex-direction: column; gap: 0; font-size: 10.5px; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-stage { margin-bottom: 36px; }
/* (5-6 rows: the slots are close under the small dial - each caption leans outward) */
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot { width: auto; }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot.l small { transform: translateX(-42%); }
#ui .bookwin .rr:is(.rows5, .rows6) .ap-bslot.r small { transform: translateX(42%); }

/* (the box to pick how far auto enhancement goes: over the buttons, the blue look of the auto button) */
#ui .bookwin .eco-main > .m4f-autopop { position: sticky; bottom: 78px; z-index: 4; }
#eco .m4f-autopop { margin: 0 auto 6px; width: min(100%, 380px); box-sizing: border-box; padding: 10px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  border: 2px solid #6fb4ff; border-radius: 14px; background: linear-gradient(180deg, rgba(20, 38, 78, 0.97), rgba(10, 20, 44, 0.97)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(90, 160, 255, 0.35); }
#eco .m4f-autopop > b { font: 700 15px Mali, sans-serif; color: #dceeff; }
#eco .m4f-autostep { display: flex; align-items: center; gap: 12px; }
#eco .m4f-autostep button { width: 34px; height: 34px; padding: 0; border: 2px solid #6fb4ff; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; font: 800 20px/1 Fredoka, sans-serif; cursor: pointer; }
#eco .m4f-autostep button[disabled] { opacity: 0.35; cursor: default; }
#eco .m4f-autostep em { min-width: 64px; font: 800 30px/1 Fredoka, sans-serif; font-style: normal; color: #ffe066; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
#eco .m4f-autoquick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
#eco .m4f-autoquick button { padding: 3px 11px; border: 1px solid #4a6a9a; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: #cfe4ff; font: 700 13px Fredoka, Mali, sans-serif; cursor: pointer; }
#eco .m4f-autoquick button.on { border-color: #ffe066; background: rgba(120, 90, 10, 0.55); color: #ffe066; }
#eco .m4f-autopop small { font: 500 12px/1.4 Mali, sans-serif; color: #b9cbe6; }
#eco .m4f-autopop small.warn { color: #ff9a8a; }
#eco .m4f-autoacts { display: flex; gap: 8px; margin-top: 2px; }
#eco .m4f-autoacts button { min-width: 100px; padding: 7px 16px; border: 1px solid #6a7a9a; border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #dceeff; font: 700 14px Mali, sans-serif; cursor: pointer; }
#eco .m4f-autoacts button.go { border-color: #8fd0ff; background: linear-gradient(180deg, #2f78e0, #1a4aa0); color: #fff; }
#eco .m4f-auto.open { filter: brightness(1.25); }

/* (the user, 2026-10-17: "อย่าให้ใหญ่จนเกินไป" - the goal box compact: smaller text, the title beside the stepper) */
#eco .m4f-autopop { width: min(100%, 300px); padding: 6px 10px 8px; gap: 4px; border-width: 1.5px; border-radius: 10px; }
#eco .m4f-autopop > b { font-size: 12.5px; }
#eco .m4f-autostep { gap: 8px; }
#eco .m4f-autostep button { width: 24px; height: 24px; border-width: 1.5px; font-size: 15px; }
#eco .m4f-autostep em { min-width: 42px; font-size: 21px; -webkit-text-stroke: 2.5px #1a1008; }
#eco .m4f-autoquick { gap: 4px; }
#eco .m4f-autoquick button { padding: 1px 8px; font-size: 11px; }
#eco .m4f-autopop small { font-size: 10.5px; line-height: 1.3; }
#eco .m4f-autoacts { gap: 6px; }
#eco .m4f-autoacts button { min-width: 0; padding: 4px 12px; border-radius: 8px; font-size: 12px; }

/* (the card of a piece appraised in the batch: over the batch page, its rolled options with quality bars) */
#ui .bookwin .ap-many { position: relative; }
#ui .bookwin .ap-cell.res, #ui .bookwin .ap-rrow[data-act] { cursor: pointer; }
#ui .bookwin .ap-cell.res:hover { filter: brightness(1.2); transform: translateY(-1px); }
#ui .bookwin .ap-peek { position: absolute; inset: 0; z-index: 20; display: grid; place-items: start center; padding-top: 30px; background: rgba(6, 4, 2, 0.6); }
#ui .bookwin .ap-peek-in { position: relative; width: min(100% - 24px, 380px); box-sizing: border-box; padding: 14px 14px 12px; border: 1.5px solid #c9a24a; border-radius: 12px;
  background: linear-gradient(180deg, #2a2016, #16110b); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.7); }
#ui .bookwin .ap-peek-x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; padding: 0; border: 1px solid #8a7a5a; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #e8e0cc; font: 700 13px/1 sans-serif; cursor: pointer; }
#ui .bookwin .ap-peek-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-right: 26px; }
#ui .bookwin .ap-peek-ic { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 9%; background: url(../assets/ui_slot_mir4/slot_g0.png) center / 100% 100% no-repeat; }
#ui .bookwin .ap-peek-ic.g0 { background-image: url(../assets/ui_slot_mir4/slot_g0.png); }
#ui .bookwin .ap-peek-ic.g1 { background-image: url(../assets/ui_slot_mir4/slot_g1.png); }
#ui .bookwin .ap-peek-ic.g2 { background-image: url(../assets/ui_slot_mir4/slot_g2.png); }
#ui .bookwin .ap-peek-ic.g3 { background-image: url(../assets/ui_slot_mir4/slot_g3.png); }
#ui .bookwin .ap-peek-ic.g4 { background-image: url(../assets/ui_slot_mir4/slot_g4.png); }
#ui .bookwin .ap-peek-ic.g5 { background-image: url(../assets/ui_slot_mir4/slot_g5.png); }
#ui .bookwin .ap-peek-ic img { width: 86%; height: 86%; object-fit: contain; }
#ui .bookwin .ap-peek-head b { display: block; font: 700 16px/1.25 Mali, sans-serif; }
#ui .bookwin .ap-peek-tags { display: flex; gap: 6px; margin-top: 4px; }
#ui .bookwin .ap-peek-rows { display: flex; flex-direction: column; gap: 5px; }
#ui .bookwin .ap-peek-rows .rr-c { height: 40px; }
#ui .bookwin .ap-peek-sum { margin: 8px 0 2px; text-align: center; font: 600 13.5px Mali, sans-serif; color: #d8d0bc; }
#ui .bookwin .ap-peek-sum b { font: 700 16px Fredoka, sans-serif; color: #fff; }
#ui .bookwin .ap-peek-sum em { font-style: normal; color: #ffcf5a; font-weight: 700; }
#ui .bookwin .ap-peek-acts { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
#ui .bookwin .ap-peek-acts .ap-sub.m4f-auto { flex: none; min-width: 170px; height: 52px; padding: 0 20px; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  background: url(../assets/ui_forge_m4/btn_auto.png) center / 100% 100% no-repeat !important; color: #e4f2ff !important; -webkit-text-fill-color: #e4f2ff !important; font: 800 14px Mali, sans-serif; }
#ui .bookwin .ap-peek-ok { min-width: 90px; padding: 0 18px; border: 1px solid #8a7a5a; border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: #e8e0cc; font: 700 14px Mali, sans-serif; cursor: pointer; }

/* (the bag's "+" slot after the last one, and its box of how many slots to add - 2026-10-17) */
#ui .bookwin .eco-cell.eco-addslot { cursor: pointer; border-radius: 9% !important; background: rgba(20, 26, 40, 0.55) !important; box-shadow: inset 0 0 0 2px rgba(255, 214, 110, 0.55) !important; }
#ui .bookwin .eco-cell.eco-addslot span { font: 300 40px/1 Fredoka, sans-serif; color: #ffd76a; }
#ui .bookwin .eco-cell.eco-addslot:hover, #ui .bookwin .eco-cell.eco-addslot.open { box-shadow: inset 0 0 0 2px #ffd76a, 0 0 10px rgba(255, 214, 110, 0.6) !important; }
#ui .bookwin .eco-addpop { position: sticky; bottom: 0; z-index: 5; margin: 10px 2px 2px; padding: 10px 12px 12px; border: 1.5px solid #c9a24a; border-radius: 12px;
  background: linear-gradient(180deg, #2a2016, #16110b); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.55); }
#ui .bookwin .eco-addhead { display: flex; align-items: center; justify-content: space-between; }
#ui .bookwin .eco-addhead b { font: 700 15px Mali, sans-serif; color: #ffe2a0; }
#ui .bookwin .eco-addx { width: 24px; height: 24px; padding: 0; border: 1px solid #8a7a5a; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #e8e0cc; font: 700 12px/1 sans-serif; cursor: pointer; }
#ui .bookwin .eco-addpop > small { display: block; margin: 2px 0 8px; font: 500 12px Mali, sans-serif; color: #b9b19e; }
#ui .bookwin .eco-addopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
#ui .bookwin .eco-addopts button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border: 1.5px solid #8a6a2a; border-radius: 10px; background: rgba(0, 0, 0, 0.35); cursor: pointer; }
#ui .bookwin .eco-addopts button:hover:not([disabled]) { border-color: #ffd76a; background: rgba(120, 84, 10, 0.4); }
#ui .bookwin .eco-addopts button[disabled] { opacity: 0.4; cursor: default; }
#ui .bookwin .eco-addopts b { font: 700 15px Fredoka, Mali, sans-serif; color: #fff; }
#ui .bookwin .eco-addopts small { font: 600 11.5px Fredoka, sans-serif; color: #ffd76a; }
#ui .bookwin .eco-addopts i { position: absolute; top: -8px; right: 4px; padding: 0 5px; border-radius: 5px; background: #c9a24a; color: #2a1a06; font: 700 9.5px/14px Mali, sans-serif; font-style: normal; }

/* ---------- a card shown big (js/cardview.js, 2026-10-17): the card picture in a card item's info, and the full-size stage ---------- */
.cv-thumb { display: block; width: min(190px, 60%); margin: 8px auto 10px; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.cv-thumb .cd { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); transition: transform 0.15s; }
.cv-thumb:hover .cd { transform: translateY(-3px) scale(1.03); }
.cv-thumb > span { display: block; margin-top: 6px; text-align: center; font: 600 12.5px Mali, sans-serif; color: #e8d6a8; }
.cv-stage { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; background: radial-gradient(ellipse at 38% 50%, rgba(40, 28, 14, 0.82), rgba(4, 3, 2, 0.94) 70%); animation: cvIn 0.22s ease-out; }
@keyframes cvIn { from { opacity: 0; } }
.cv-in { position: relative; display: flex; align-items: center; gap: 34px; max-width: min(1100px, 96vw); max-height: 94vh; padding: 20px; }
.cv-x { position: absolute; right: 0; top: 0; z-index: 3; width: 38px; height: 38px; padding: 0; border: 1.5px solid #c9a24a; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #ffe2a0; font: 700 17px/1 sans-serif; cursor: pointer; }
.cv-left { position: relative; flex: none; width: min(380px, 40vw); }
.cv-glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 55%, transparent), transparent 62%); filter: blur(10px); pointer-events: none; animation: cvGlow 3s ease-in-out infinite; }
@keyframes cvGlow { 50% { opacity: 0.65; transform: scale(1.04); } }
.cv-card { position: relative; transition: transform 0.12s ease-out; transform-style: preserve-3d; animation: cvPop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cvPop { from { transform: scale(0.7) translateY(20px); opacity: 0; } }
.cv-card .cd { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.7)); }
.cv-right { flex: 1 1 auto; min-width: 280px; max-width: 520px; max-height: 86vh; overflow-y: auto; padding: 16px 18px; border: 1.5px solid #8a6a2a; border-radius: 14px; background: linear-gradient(180deg, rgba(36, 26, 16, 0.96), rgba(18, 13, 8, 0.96)); }
.cv-head { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.cv-head b { display: block; font: 700 24px/1.25 Mali, sans-serif; }
.cv-head small { font: 500 13.5px Mali, sans-serif; color: #c8bea8; }
.cv-right .cd-istat { margin: 0; }
@media (max-width: 760px) { .cv-in { flex-direction: column; gap: 14px; overflow-y: auto; } .cv-left { width: min(260px, 70vw); } .cv-right { max-height: none; } }
@media (prefers-reduced-motion: reduce) { .cv-glow, .cv-card { animation: none; } }
/* (the card's power beside the big card: easy to read) */
.cv-right .cd-istat h5 { font-size: 16px !important; }
.cv-right .cd-istat li { padding: 5px 0 !important; font-size: 15px !important; line-height: 1.45 !important; }
.cv-right .cd-istat li b { font-size: 15.5px !important; }
.cv-right .cd-istat small { font-size: 12.5px !important; }

/* (the card view's panel, simpler - 2026-10-17, the user: "ออกแบบให้ดูง่ายกว่านี้": chips, a tier picker, the stats as big rows,
   the trait / special / skill each in its own box; what a tier has not opened yet greyed with its tier) */
.cv-right { padding: 18px 20px; }
.cv-head { margin-bottom: 12px; }
.cv-head b { font-size: 26px; }
.cv-head > small { display: block; margin-top: 1px; font: 500 13px Fredoka, Mali, sans-serif; color: #a89e88; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cv-chip { --cc: #8a7a5a; padding: 2px 10px; border: 1.5px solid var(--cc); border-radius: 999px; background: rgba(0, 0, 0, 0.35); font: 700 13px Mali, sans-serif; color: #f0e6cc; }
.cv-chip:first-child { color: var(--cc); }
.cv-chip.own { border-color: #6fbf6a; color: #a8f0a0; }
.cv-tiers { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; }
.cv-tiers span { margin-right: 4px; font: 600 13px Mali, sans-serif; color: #c8bea8; }
.cv-tiers button { min-width: 44px; padding: 5px 0; border: 1.5px solid #6a5a3a; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: #d8ccb0; font: 800 14px Fredoka, sans-serif; cursor: pointer; }
.cv-tiers button.mine { border-color: #6fbf6a; }
.cv-tiers button.on { border-color: #ffd76a; background: linear-gradient(180deg, #8a6a1a, #4a3608); color: #fff; }
.cv-sh { margin: 0 0 6px; font: 700 15px Mali, sans-serif; color: #ffd76a; }
.cv-stats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cv-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); cursor: pointer; }
.cv-stat span { font: 600 16px Mali, sans-serif; color: #f0e6cc; }
.cv-stat b { font: 800 20px Fredoka, sans-serif; color: #8ef07a; }
.cv-stat:hover, .cv-box:hover { background: rgba(255, 255, 255, 0.1); }
.cv-stat.off span, .cv-box.off p, .cv-box.off h6 { color: #8a8270; }
.cv-lock { margin-left: auto; padding-left: 8px; font: 600 12.5px Mali, sans-serif; font-style: normal; color: #a89878; white-space: nowrap; }
.cv-box { --bc: #8a7a5a; margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--bc); background: color-mix(in srgb, var(--bc) 12%, rgba(0, 0, 0, 0.3)); cursor: pointer; }
.cv-box.trait { --bc: #c27bff; }
.cv-box.special { --bc: #ffb340; }
.cv-box.skill { --bc: #5fb4ff; }
.cv-box h6 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font: 700 15.5px Mali, sans-serif; color: color-mix(in srgb, var(--bc) 70%, #fff); }
.cv-box h6 > i { font-style: normal; }
.cv-box p { margin: 0; font: 500 14.5px/1.5 Mali, sans-serif; color: #e8e0cc; }
.cv-box ul { list-style: none; margin: 0; padding: 0; }
.cv-box li { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font: 600 14.5px Mali, sans-serif; color: #e8e0cc; }
.cv-box li b { font: 800 17px Fredoka, sans-serif; color: #8ec8ff; }
.cv-box li.off { color: #8a8270; }
.cv-tip { display: block; margin-top: 4px; font: 500 12px Mali, sans-serif; color: #8f8878; }

/* ---------- the world announcement (js/worldnews.js, 2026-10-17): a ribbon across the top, the news running through it ---------- */
.wn-bar { --wc: #ffb340; position: fixed; left: 50%; top: 66px; z-index: 880; width: min(760px, 70vw); height: 38px; transform: translate(-50%, -8px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; border-radius: 19px; overflow: hidden; transition: opacity 0.35s, transform 0.35s;
  background: linear-gradient(90deg, rgba(10, 7, 4, 0), rgba(20, 13, 6, 0.9) 12%, rgba(20, 13, 6, 0.9) 88%, rgba(10, 7, 4, 0));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wc) 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--wc) 60%, transparent); }
.wn-bar.on { opacity: 1; transform: translate(-50%, 0); }
.wn-tag { flex: none; z-index: 2; margin-left: 9%; padding: 2px 10px; border-radius: 999px; background: var(--wc); color: #1a1008; font: 800 12.5px Mali, sans-serif; font-style: normal; white-space: nowrap; }
.wn-track { position: relative; flex: 1; height: 100%; margin: 0 9%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wn-run { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: 8px; white-space: nowrap; will-change: transform; }
.wn-run img { width: 26px; height: 26px; object-fit: contain; }
.wn-run span { font: 800 17px Mali, sans-serif; color: #fff4dc; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
.wn-bar.t4 .wn-run span { color: #ffd76a; }
.wn-bar.t5 .wn-run span { color: #ffb0b8; }
.wn-sweep { position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--wc) 45%, transparent), transparent); mix-blend-mode: screen; }
@media (prefers-reduced-motion: no-preference) { .wn-bar.on .wn-sweep { animation: wnSweep 2.6s ease-in-out infinite; } }
@keyframes wnSweep { to { left: 120%; } }
.wn-bar.t5 { box-shadow: inset 0 1px 0 var(--wc), inset 0 -1px 0 var(--wc), 0 0 16px color-mix(in srgb, var(--wc) 55%, transparent); }

/* (the field boss as a raid: the boss menu says so) */
.bm-raid { margin: 6px 0 4px; padding: 6px 10px; border-radius: 8px; border-left: 4px solid #ff5a6a; background: rgba(255, 70, 90, 0.14); font: 700 13px/1.45 Mali, sans-serif; color: #ffb0b8; }

/* ---- the mailbox (2026-10-18, js/mailbox.js): Lordnine-style list + letter, obsidian and gold ---- */
#mailbox { position: fixed; inset: 0; z-index: 990; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 14, 0.55); }
#mailbox[hidden] { display: none; }
#mailbox .mbx-win { width: min(920px, calc(100vw - 32px)); height: min(600px, calc(100vh - 48px)); display: flex; flex-direction: column; border-radius: 14px; border: 2px solid #c9a24a; background: linear-gradient(180deg, #2a2233, #19141f); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 220, 140, 0.12); color: #f3e9d2; font-family: Mali, Fredoka, sans-serif; overflow: hidden; }
#mailbox .mbx-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(201, 162, 74, 0.45); background: linear-gradient(180deg, rgba(201, 162, 74, 0.22), rgba(201, 162, 74, 0.05)); }
#mailbox .mbx-top img { width: 34px; height: 34px; object-fit: contain; }
#mailbox .mbx-top b { font-size: 1.2rem; color: #ffe2a0; }
#mailbox .mbx-n { color: #d8c9a6; font-size: 0.85rem; }
#mailbox .mbx-x { margin-left: auto; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #c9a24a; background: rgba(0, 0, 0, 0.35); color: #ffe2a0; font-size: 1.05rem; cursor: pointer; }
#mailbox .mbx-tabs { display: flex; gap: 6px; padding: 8px 14px 0; }
#mailbox .mbx-tabs button { position: relative; padding: 7px 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: #cbbd9c; font: 700 0.92rem Mali, sans-serif; cursor: pointer; }
#mailbox .mbx-tabs button.on { color: #ffe2a0; border-bottom-color: #e8b94a; }
#mailbox .mbx-tdot { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2413a; color: #fff; font: 700 11px/18px Fredoka, sans-serif; font-style: normal; }
#mailbox .mbx-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 0.95fr) 1.25fr; gap: 10px; padding: 10px 14px; }
#mailbox .mbx-list { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
#mailbox .mbx-row { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(201, 162, 74, 0.28); background: rgba(255, 255, 255, 0.04); color: inherit; text-align: left; cursor: pointer; }
#mailbox .mbx-row:hover { background: rgba(255, 226, 160, 0.08); }
#mailbox .mbx-row.on { border-color: #e8b94a; background: rgba(232, 185, 74, 0.16); }
#mailbox .mbx-ico { width: 34px; height: 34px; object-fit: contain; flex: none; }
#mailbox .mbx-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#mailbox .mbx-rt b { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mailbox .mbx-rt small { color: #b9ab8c; font-size: 0.74rem; }
#mailbox .mbx-row.new .mbx-rt b { color: #ffe2a0; }
#mailbox .mbx-att { display: flex; align-items: center; gap: 2px; flex: none; }
#mailbox .mbx-att img { width: 24px; height: 24px; object-fit: contain; }
#mailbox .mbx-att em { font-style: normal; font-size: 0.72rem; color: #d8c9a6; }
#mailbox .mbx-dot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #e2413a; box-shadow: 0 0 0 2px #19141f; }
#mailbox .mbx-view { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(201, 162, 74, 0.3); background: linear-gradient(180deg, rgba(255, 244, 220, 0.07), rgba(255, 244, 220, 0.02)); }
#mailbox .mbx-head b { display: block; font-size: 1.12rem; color: #ffe2a0; }
#mailbox .mbx-head small { color: #b9ab8c; font-size: 0.78rem; }
#mailbox .mbx-text { white-space: pre-wrap; line-height: 1.55; font-size: 0.92rem; }
#mailbox .mbx-h { color: #e8b94a; font-weight: 700; font-size: 0.85rem; }
#mailbox .mbx-grid { display: flex; flex-wrap: wrap; gap: 8px; }
#mailbox .mbx-cell { position: relative; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 10px; border: 1px solid rgba(201, 162, 74, 0.45); background: rgba(0, 0, 0, 0.28); cursor: pointer; }
#mailbox .mbx-cell img { width: 44px; height: 44px; object-fit: contain; }
#mailbox .mbx-cell b { position: absolute; top: 40px; right: 6px; color: #fff; font: 700 0.8rem Fredoka, sans-serif; -webkit-text-stroke: 3px #1b1420; paint-order: stroke fill; }
#mailbox .mbx-cell small { font-size: 0.68rem; text-align: center; line-height: 1.15; color: #d8c9a6; max-height: 2.3em; overflow: hidden; }
#mailbox .mbx-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: auto; }
#mailbox .mbx-empty { margin: auto; color: #b9ab8c; padding: 20px; text-align: center; }
#mailbox .mbx-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(201, 162, 74, 0.35); }
#mailbox .mbx-foot small { flex: 1; color: #b9ab8c; font-size: 0.76rem; }
#mailbox .mbx-send { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px; }
#mailbox .mbx-frow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
#mailbox .mbx-frow.top { align-items: flex-start; }
#mailbox .mbx-frow > span { width: 70px; color: #e8b94a; font-weight: 700; font-size: 0.86rem; }
#mailbox .mbx-in { padding: 6px 9px; border-radius: 8px; border: 1px solid rgba(201, 162, 74, 0.5); background: rgba(0, 0, 0, 0.35); color: #f3e9d2; font: 500 0.9rem Mali, sans-serif; }
#mailbox .mbx-in.wide { flex: 1; min-width: 180px; }
#mailbox .mbx-in.num { width: 92px; }
#mailbox textarea.mbx-in { resize: vertical; }
#mailbox .mbx-cur { display: flex; align-items: center; gap: 4px; }
#mailbox .mbx-cur img { width: 24px; height: 24px; object-fit: contain; }
#mailbox .mbx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 78px; }
#mailbox .mbx-chips small { color: #b9ab8c; }
#mailbox .mbx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 4px; border-radius: 999px; border: 1px solid rgba(201, 162, 74, 0.5); background: rgba(232, 185, 74, 0.12); font-size: 0.82rem; }
#mailbox .mbx-chip img { width: 22px; height: 22px; object-fit: contain; }
#mailbox .mbx-chip button { border: 0; background: none; color: #ffb3a3; cursor: pointer; font-size: 0.85rem; }
#mailbox .mbx-res { color: #c6f08a; }
#mailbox .btn.armed { background: linear-gradient(180deg, #ff8a5a, #d9532c); color: #fff; }
@media (max-width: 680px) {
  #mailbox .mbx-win { height: calc(100vh - 24px); }
  #mailbox .mbx-body { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 0.8fr) 1.2fr; }
  #mailbox .mbx-frow > span { width: 100%; }
  #mailbox .mbx-chips { padding-left: 0; }
}

/* ---------- new things in the bag (2026-10-18, the user: "เวลาของเด้งเข้ากระเป๋าให้มีจุดแดงบอกว่าชิ้นไหน"): MIR4 / Lordnine red
   dot on the slot's top-right corner (half on the frame, never over the +N) and on the kind tabs; crisp with a thin dark
   ring - no soft glow (economy.js it.nw) */
#ui em.nwd, #eco em.nwd { position: absolute; z-index: 8; top: -3px; right: -3px; width: 11px; height: 11px; padding: 0; border-radius: 50%;
  background: #ff3b2f !important; box-shadow: 0 0 0 1.5px #3b0a05 !important; pointer-events: none; font-size: 0; animation: none; filter: none; }
/* (a material's frame is drawn 9% inside its slot in the book: the dot sits on that frame's corner - top-left when its
   collection badge / lock holds the top-right one) */
#ui .bookwin .eco-cell.mat > em.nwd { top: calc(9% - 5px); right: calc(9% - 5px); }
#ui .bookwin .eco-cell.mat:is(:has(> .clb), :has(> .lk)) > em.nwd { right: auto; left: calc(9% - 5px); }
#ui .eco-kind, #eco .eco-kind { position: relative; }
#ui .eco-kind > em.nwd, #eco .eco-kind > em.nwd { top: 3px; right: 4px; width: 9px; height: 9px; }
#ui .eco-hbtn.eco-nwall, #eco .eco-hbtn.eco-nwall { position: relative; padding-right: 16px; }
#ui .eco-hbtn.eco-nwall::after, #eco .eco-hbtn.eco-nwall::after { content: ''; position: absolute; top: 50%; right: 5px; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: #ff3b2f; box-shadow: 0 0 0 1px #3b0a05; }

/* the pop-up after using something in the bag (2026-10-18, the chalice: js/economy.js usePop) */
.use-pop { position: absolute; left: 50%; top: 42%; z-index: 60; transform: translate(-50%, -50%) scale(1); display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 240px; padding: 16px 24px; border-radius: 14px; border: 2px solid #e8b94a; background: linear-gradient(180deg, #3a2c1a, #1f1710); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); color: #fff4d0; text-align: center; animation: usePopIn 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
.use-pop b { font: 700 1.35rem Mali, Fredoka, sans-serif; color: #ffe08a; }
.use-pop small { font: 600 0.88rem Mali, sans-serif; color: #e8dcc0; }
.use-pop.out { opacity: 0; transform: translate(-50%, -58%) scale(0.96); transition: opacity 0.45s, transform 0.45s; }
@keyframes usePopIn { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* ---------- the bag's sell settings (2026-10-18, "ให้มีตั้งค่าการขายของ เอาประเมินออก"): ขายตามที่ตั้งไว้ + ⚙, the coin on the
   pieces the rule sells (while its page or confirm is up), the confirm at the foot of the slots (js/economy.js sellPlan) ---------- */
#eco .sl-sell { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
#ui #eco .sl-sell .btn.sl-cog { min-width: 0; width: 34px; padding: 0; color: #ffd98a; font: 400 20px/1 'Segoe UI Symbol', 'Noto Sans Symbols 2', sans-serif; }
#ui #eco .sl-sell .btn.sl-cog:hover { color: #fff; }
#eco .sl-sell .sl-cog.on { border-color: #ffd76a; color: #ffd76a; box-shadow: 0 0 0 1px #ffd76a, 0 0 8px rgba(255, 215, 106, 0.5); }
#eco .eco-cell.sl-fit { box-shadow: inset 0 0 0 2px #ffcf4a, 0 0 7px rgba(255, 200, 60, 0.55) !important; }
#eco .eco-cell.sl-fit > img { opacity: 0.72; }
#eco .eco-cell .slc { position: absolute; z-index: 7; left: 50%; top: -7px; width: 18px; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: #2a1d08; box-shadow: 0 0 0 1.5px #0b0906, 0 1px 3px rgba(0, 0, 0, 0.6); pointer-events: none; }
#eco .eco-cell .slc img { position: static; width: 100%; height: 100%; object-fit: contain; opacity: 1; }
#eco .sl-box .sv-go small + small { margin-top: 2px; opacity: 0.85; }
#eco .eco-addpop.sl-ask { border-color: #e0b44c; }
#eco .sl-asklist { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 9px; max-height: 92px; overflow: auto; }
#eco .sl-asklist img { width: 34px; height: 34px; padding: 2px; border-radius: 7px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 0 1.5px #6f6a60; object-fit: contain; }
#eco .sl-asklist img.g1 { box-shadow: inset 0 0 0 1.5px #7fe07a; }
#eco .sl-asklist img.g2 { box-shadow: inset 0 0 0 1.5px #5fb4ff; }
#eco .sl-asklist img.g3 { box-shadow: inset 0 0 0 1.5px #c27cff; }
#eco .sl-asklist img.g4 { box-shadow: inset 0 0 0 1.5px #ffb340; }
#eco .sl-asklist img.g5 { box-shadow: inset 0 0 0 1.5px #ff5a6a; }
#eco .sl-asklist i { align-self: center; font: 700 12px Fredoka, sans-serif; font-style: normal; color: #e8dcc0; }
#eco .sl-askbtns { display: flex; justify-content: flex-end; gap: 6px; }
#ui #eco .eco-addpop.sl-ask .eco-addhead b { font-size: 16px; }
#ui #eco .eco-addpop.sl-ask > small { font-size: 13px; color: #d9cfb8; }

/* (2026-10-18, the user: "แก้ไขการบัง เมื่อเปิดหน้าร้านค้าให้สองอันที่บังหายไป"): while a menu bar drop-down is open (js/hudlayout.js
   openPop), the floating icons that sit over it (อัญเชิญ, the world event's timer) step aside */
body.mp-open #gachabtn, body.mp-open #wevicon { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s, visibility 0s 0.12s; }

/* ---------- an admin's announcement across the middle of the screen (js/worldnews.js WN.center, 2026-10-18) ---------- */
.wn-center { position: fixed; left: 0; right: 0; top: max(118px, 15%); z-index: 990; height: 44px; display: flex; align-items: center; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(16, 10, 4, 0.88) 10%, rgba(16, 10, 4, 0.88) 90%, transparent);
  border-top: 2px solid #e8b44a; border-bottom: 2px solid #e8b44a; opacity: 0; transform: scaleY(0.6); transition: opacity 0.25s, transform 0.25s; }
.wn-center.on { opacity: 1; transform: none; }
.wn-center .wnc-tag { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); padding: 1px 11px; border-radius: 999px; background: #e8b44a; color: #1a1008;
  font: 800 11.5px Mali, sans-serif; font-style: normal; white-space: nowrap; box-shadow: 0 0 0 2px #1a1008; }
.wn-center .wnc-track { position: relative; width: 100%; height: 100%; overflow: hidden; }
.wn-center .wnc-run { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.wn-center .wnc-run span { font: 800 19px Mali, sans-serif; color: #fff4dc; -webkit-text-stroke: 3px #1a1008; paint-order: stroke fill; }
.wn-center.big { height: 54px; }
.wn-center.big .wnc-run span { font-size: 25px; color: #ffd76a; }