/* ---- auto settings v2 (2026-10-18, the user: "เพิ่มตั้งค่าออโต้ ให้มีไม่ต้องแดชหลบมอนด้วย และปรับ ui ให้ดูง่าย สะอาด"):
   the monsters, their order and their levels on the left page; three tabs on the right (สกิล / การต่อสู้ / ทั่วไป), a few
   short switches in boxes of their own in each (js/ui.js UI.showAutoCfg) ---- */
.ac-right { display: flex; flex-direction: column; gap: 10px; }
.ac-tabs { display: flex; gap: 6px; flex-wrap: nowrap; }
.ac-tabs .ac-tab { flex: 1; min-height: 40px; justify-content: center; font-size: 1rem; font-weight: 700; }
.ac-pane { display: flex; flex-direction: column; gap: 10px; }
.ac-group { display: flex; flex-direction: column; gap: 8px; }
.ac-gh { margin: 0; font: 700 1rem/1.25 var(--thai); color: #f6dc98; }
.ac-gh small { margin-left: 8px; font-weight: 500; font-size: 0.8em; color: var(--cream-2); }
.ac-group .ac-toggle { padding: 2px 0; }
.ac-group .ac-skill-list, .ac-group .ac-skill { gap: 10px; }
.ac-skill.held .ac-tlabel small { color: #f0b860; }
.ac-skill.held canvas { opacity: 0.55; }
.ac-lv { display: flex; flex-direction: column; gap: 8px; }
.ac-lv:empty { display: none; }

/* in the book: the right page holds the tabs and their box (the footer's two buttons stay under it) */
#ui .bw-autocfg .ac-right { left: 812px; top: 196px; width: 492px; height: 596px; }
#ui .bw-autocfg .ac-mobs { gap: 12px; }

/* the bright book skins: dark ink */
:root[data-booklight] #ui .bw-autocfg .ac-gh { color: var(--bk-acc); }
:root[data-booklight] #ui .bw-autocfg .ac-gh small { color: var(--bk-ink); opacity: 0.8; }

/* the tabs: dark glass with gold edges, the open one gold (every book skin; the bright ones in their ink) */
#ui #autocfg .ac-tabs .ac-tab { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(217, 164, 67, 0.5); color: #f2ead6; -webkit-text-fill-color: #f2ead6; text-shadow: none; }
#ui #autocfg .ac-tabs .ac-tab:hover:not(.on) { background: rgba(217, 164, 67, 0.18); }
#ui #autocfg .ac-tabs .ac-tab.on { background: var(--gold); border-color: var(--gold); color: #24170a; -webkit-text-fill-color: #24170a; }
:root[data-booklight] #ui #autocfg .ac-tabs .ac-tab:not(.on) { background: rgba(255, 255, 255, 0.5); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); color: var(--bk-acc); -webkit-text-fill-color: var(--bk-acc); }
/* a map with no monsters: its note across the whole grid */
.ac-mob-grid .ac-empty { grid-column: 1 / -1; }
/* the bright skins: the page's other chips in their ink too (they were grey on pink) */
:root[data-booklight] #ui #autocfg .ac-chips .chip:not(.on), :root[data-booklight] #ui #autocfg .ac-mob-tools .chip { background: rgba(255, 255, 255, 0.5); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); color: var(--bk-acc); -webkit-text-fill-color: var(--bk-acc); }

/* a range slider moving: the book fades so the ring round the hero shows (js/ui.js peek, game.js drawRangeRings) */
#autocfg { transition: background-color 0.2s; }
#autocfg .panel { transition: opacity 0.2s; }
#autocfg.ac-peek { background: transparent !important; backdrop-filter: none !important; }
#autocfg.ac-peek .panel { opacity: 0.12; }
/* ---- layout A (2026-10-21, the user picked A on autouipick.html: "ปรับ ui หน้านี้ใหม่ให้ดูง่ายกว่านี้ โดยเฉพาะการปรับค่าต่างๆ"):
   every value one equal row - the name in bold + a one-line note on the left; a switch, or big − value + (44 px squares,
   gold edges) on the right. A narrow page wraps the control under the text (js/ui.js toggle / stepper) ---- */
#ui #autocfg .ac-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; box-sizing: border-box; min-height: 62px; padding: 8px 12px;
  border-radius: 12px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(217, 164, 67, 0.38); color: #f2ead6; font: 600 1rem/1.3 'Mali', var(--thai), sans-serif; }
#ui #autocfg .ac-row .ac-tlabel { flex: 1 1 200px; min-width: 0; }
#ui #autocfg .ac-row .ac-tlabel b { display: block; font-size: 17px; font-weight: 700; color: #f6ecd2; }
#ui #autocfg .ac-row .ac-tlabel small { display: block; margin-top: 1px; font-size: 13.5px; font-weight: 500; color: #c9bc9e; }
#ui #autocfg .ac-toggle { cursor: pointer; }
#ui #autocfg .ac-toggle .ac-switch { width: 54px; height: 30px; border: 0; background: #4a4452; }
#ui #autocfg .ac-toggle .ac-switch::after { top: 3px; left: 3px; width: 24px; height: 24px; background: #fff7e0; }
#ui #autocfg .ac-toggle input:checked + .ac-switch { background: #4fb26a; }
#ui #autocfg .ac-toggle input:checked + .ac-switch::after { left: 27px; }
/* − value + */
#ui #autocfg .ac-step { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
#ui #autocfg .ac-sbtn { width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 10px; background: #3a3022;
  border: 2px solid #d9a443; color: #ffd98a; -webkit-text-fill-color: #ffd98a; font: 700 26px/1 'Fredoka', sans-serif; text-shadow: none; box-shadow: none;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#ui #autocfg .ac-sbtn:hover:not(:disabled) { background: #4a3c27; transform: none; }
#ui #autocfg .ac-sbtn:active:not(:disabled) { background: #5a482c; }
#ui #autocfg .ac-sbtn:disabled { opacity: 0.35; cursor: default; }
#ui #autocfg .ac-sval { min-width: 92px; text-align: center; font: 700 21px/1.1 'Mali', 'Fredoka', sans-serif; color: #ffd98a; white-space: nowrap; text-shadow: none; }
/* a slider (2026-10-22, the search range): the value on the right of the name, the wide slider under both */
#ui #autocfg .ac-slide .ac-sval { margin-left: auto; min-width: 70px; }
#ui #autocfg .ac-slide input[type=range] { flex: 1 0 100%; height: 30px; margin: 2px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
#ui #autocfg .ac-slide input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 6px; border: 1px solid rgba(217, 164, 67, 0.6);
  background: linear-gradient(90deg, #d9a443 var(--p, 50%), #3a3022 var(--p, 50%)); }
#ui #autocfg .ac-slide input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: #ffd98a; border: 3px solid #6b4a16; }
#ui #autocfg .ac-slide input[type=range]::-moz-range-track { height: 10px; border-radius: 6px; border: 1px solid rgba(217, 164, 67, 0.6); background: #3a3022; }
#ui #autocfg .ac-slide input[type=range]::-moz-range-progress { height: 10px; border-radius: 6px; background: #d9a443; }
#ui #autocfg .ac-slide input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #ffd98a; border: 3px solid #6b4a16; }
/* a skill: its key and icon, then the switch row without a box of its own */
#ui #autocfg .ac-skill { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 62px; padding: 6px 12px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(217, 164, 67, 0.38); }
#ui #autocfg .ac-skill .ac-row { flex: 1; min-width: 0; min-height: 0; padding: 0; background: none; border: 0; }
#ui #autocfg .ac-skill canvas { width: 44px; height: 44px; }
#ui #autocfg .ac-lvchips { gap: 6px; }
/* the bright book skins: the rows in their ink */
:root[data-booklight] #ui #autocfg :is(.ac-row, .ac-skill) { background: rgba(255, 255, 255, 0.3); border-color: color-mix(in srgb, var(--bk-acc) 40%, transparent); color: var(--bk-ink); }
:root[data-booklight] #ui #autocfg .ac-row .ac-tlabel b { color: var(--bk-ink); }
:root[data-booklight] #ui #autocfg .ac-row .ac-tlabel small { color: var(--bk-ink2); }
:root[data-booklight] #ui #autocfg .ac-sbtn { background: rgba(255, 255, 255, 0.6); border-color: var(--bk-acc); color: var(--bk-acc); -webkit-text-fill-color: var(--bk-acc); }
:root[data-booklight] #ui #autocfg .ac-sval { color: var(--bk-acc); }