/* งานหน้าตาจาก Astra — ใบสั่งงานอยู่ที่ design-briefs/<ลำดับ>/BRIEF.md
   โหลดท้ายสุดของ <head> (หลัง ui-win-fix.css) กฎที่นี่จึงชนะกฎเดิมโดยไม่ต้องไปแก้ไฟล์เก่า 15 ไฟล์
   แต่ละใบสั่งงานเขียนเป็นส่วนของตัวเอง ขึ้นหัวด้วยเลขใบ เช่น  / * ── 01 NPC + ร้าน ── * /                     */

/* ── 01 NPC + ร้าน ──
   ส่วน A: บทสนทนา NPC · ส่วน B เว้นให้ session เจ้าของร้าน */
html body #windows .win[data-win="npc"] {
  width: 340px !important; max-width: calc(100vw - 24px) !important;
  color: #443629; background: #fff9ed; border: 1px solid #d8bd86;
  border-radius: 16px; box-shadow: 0 6px 18px #654a2524; overflow: hidden; font-size: 14px;
}
html body #windows .win[data-win="npc"] > header { background: linear-gradient(#fffaf0, #f0e2bf); border-bottom: 1px solid #ddc69a; }
html body #windows .win[data-win="npc"] > .body { padding: 14px; background: #fff9ed; }
html body #windows .win[data-win="npc"] .npc-service-footer { background: #f4ead4; border-top: 1px solid #e2d1b0; }
html body #windows .win[data-win="npc"] .npc-dialogue { display: block !important; padding: 0 !important; margin: 0 0 14px; background: none; border: 0; color: #443629; font-size: 14px; line-height: 1.65; }
html body #windows .win[data-win="npc"] .npc-speaker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
html body #windows .win[data-win="npc"] .npc-avatar {
  position: relative; display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px;
  overflow: hidden; border-radius: 50%; border: 2px solid #d7b774; background: #e1eeea; color: #2f6f73; font: 500 24px Mitr, sans-serif;
}
html body #windows .win[data-win="npc"] .npc-avatar .npc-face { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; object-fit: cover; border: 0; border-radius: 50%; }
html body #windows .win[data-win="npc"] .npc-avatar img[hidden],
html body #windows .win[data-win="npc"] .npc-close-redundant { display: none !important; }
html body #windows .win[data-win="npc"] .npc-speaker-copy { display: grid; gap: 2px; min-width: 0; }
html body #windows .win[data-win="npc"] .npc-speaker-copy strong { font: 500 18px Mitr, sans-serif; color: #245d60; }
html body #windows .win[data-win="npc"] .npc-speaker-copy > span { font-size: 13px; color: #70604b; }
html body #windows .win[data-win="npc"] .npc-speech { padding: 12px 14px; border-radius: 4px 14px 14px 14px; border: 1px solid #e4d4b4; background: #fffef8; font-size: 14px; word-break: normal; overflow-wrap: break-word; }
html body #windows .win[data-win="npc"] .npc-opts { display: grid; gap: 10px; }
html body #windows .win[data-win="npc"] .npc-opt { min-width: 0; min-height: 68px; padding: 12px 14px; border: 1px solid #dcc79e; border-radius: 12px; background: linear-gradient(#fffdf5, #f6edd8); box-shadow: 0 2px 0 #e0cea9; color: #433726; text-align: left; line-height: 1.5; }
html body #windows .win[data-win="npc"] .npc-opt b { display: block; font-size: 14px; font-weight: 600; }
html body #windows .win[data-win="npc"] .npc-opt span,
html body #windows .win[data-win="npc"] .small { font-size: 13px; color: #756148; }
html body #windows .win[data-win="npc"] .npc-opt:hover { background: #eaf1e8; border-color: #76a19a; }
html body #windows .win[data-win="npc"] :is(button, input):focus-visible { outline: 2px solid #2f6f73; outline-offset: 2px; }
html body #windows .win[data-win="npc"] .swatches { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
html body #windows .win[data-win="npc"] .swatches button { border-radius: 50%; border: 2px solid #ddd0b7; }
html body #windows .win[data-win="npc"] .swatches button.on { outline: 3px solid #2f6f73; outline-offset: 2px; }
@media (pointer: coarse), (max-width: 600px) {
  html body #windows .win[data-win="npc"] { width: calc(100vw - 12px) !important; max-width: calc(100vw - 12px) !important; }
  html body #windows .win[data-win="npc"] button { min-height: 44px; font-size: 13px; }
  html body #windows .win[data-win="npc"] .swatches button { min-width: 44px; width: 44px; height: 44px; }
}
html.touch-ui.land body #windows .win[data-win="npc"] { width: min(520px, calc(100vw - 20px)) !important; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-dialogue { display: grid !important; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 10px; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-speaker { margin: 0; gap: 8px; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-avatar { width: 44px; height: 44px; flex-basis: 44px; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-speaker-copy strong { font-size: 16px; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-speech { padding: 8px 10px; font-size: 13px; }
html.touch-ui.land body #windows .win[data-win="npc"] .npc-opt { min-height: 60px; padding: 9px 12px; }

html body #windows .win[data-win="npc"] .row > .chip { font-size: 13px; background: #fffdf5; border: 1px solid #c9b58b; color: #443629; }
html body #windows .win[data-win="npc"] .row > .chip.on { background: #2f6f73; border-color: #245d60; color: #fffdf5; }

html body #windows .win[data-win="npc"] > header button { font-size: 22px; }

/* ── 02 กระเป๋า + สวมใส่ ── */
html body #windows .win:is([data-win="items"], [data-win="equip"], [data-win="gear"]) { background: #fff9ed; border: 1px solid #d8bd86; border-radius: 14px; color: #443629; font-size: 14px; }
html body #windows .win:is([data-win="items"], [data-win="equip"], [data-win="gear"]) > header { background: linear-gradient(#fffaf0, #f0e2bf); border-bottom: 1px solid #ddc69a; }
html body #windows .win:is([data-win="items"], [data-win="equip"], [data-win="gear"]) > .body { padding: 10px; background: #fff9ed; }
html body #windows .win:is([data-win="items"], [data-win="equip"], [data-win="gear"]) .gear-service-footer { background: #f4ead4; border-top: 1px solid #e2d1b0; color: #67543d; }
html body #windows .win:is([data-win="items"], [data-win="equip"], [data-win="gear"]) .small { font-size: 13px; line-height: 1.5; }
html body #windows .win[data-win="items"] { width: 340px !important; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .inv { gap: 8px; min-width: 0; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .inv > .grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; padding: 8px; min-height: 144px; align-content: start; background: #f7edd9; border: 1px solid #e2cfaa; border-radius: 12px; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .inv > .grid[hidden] { display: none !important; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .slot { width: 100% !important; height: auto !important; min-height: 56px; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; border: 1px solid #d8c397; border-radius: 10px; background: #fffdf5; box-shadow: 0 2px 0 #e5d7b9; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .slot::before,
html body #windows .win:is([data-win="items"], [data-win="gear"]) .slot::after { content: none !important; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .slot.sel { border: 2px solid #2f6f73; background: #eaf3ea; box-shadow: 0 0 0 2px #d5e5da; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .bag-icon { display: grid; place-items: center; width: 42px; height: 42px; pointer-events: none; font-size: 30px; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .bag-icon :is(img, .ic) { width: 100% !important; height: 100% !important; object-fit: contain; font-size: 30px; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .slot :is(.qty, .key, .eq) { font-size: 13px; line-height: 1.2; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .vtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; margin: 0 0 8px; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .vtabs button { min-width: 0; padding: 6px 3px; margin: 0; min-height: 36px; font-size: 13px; border-radius: 9px; border: 1px solid #d9c395; background: #fffdf5; color: #665239; }
html body #windows .win:is([data-win="items"], [data-win="gear"]) .vtabs button.on { background: #2f6f73; border-color: #245d60; color: #fffdf5; }
html body #windows .win[data-win="gear"] .gear-tabs { display: flex; gap: 4px; padding: 0 0 8px; margin: 0; border-bottom: 1px solid #e0cfac; }
html body #windows .win[data-win="gear"] .gear-tabs button { flex: 1; min-width: 0; min-height: 44px; border-radius: 10px; padding: 8px 4px; font-size: 14px; }
html body #windows .win[data-win="gear"] .gear-body { padding-top: 8px; min-width: 0; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqw { gap: 8px; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqcol { display: grid; gap: 6px; min-width: 0; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot { display: grid !important; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 6px; padding: 8px; min-height: 60px; min-width: 0; text-align: left !important; direction: ltr; border: 1px solid #c8b17d; border-radius: 10px; background: #fffcf1; color: #443629; font-size: 13px; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot.empty { border: 1px dashed #cdbc98; background: #f7f0e1; color: #766448; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot .ic { order: 0; width: 32px !important; height: 32px !important; display: grid; place-items: center; flex: none; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot .ic img { width: 32px !important; height: 32px !important; object-fit: contain; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot.empty .ic { background-image: none !important; color: #857155 !important; opacity: .65; font-size: 22px !important; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eq-name { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) :is(.eq-type, .eq-vacant) { display: block; color: #7b684e; font-size: 13px; font-weight: 400; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot.classhat button { grid-column: 1 / -1; justify-self: stretch; min-height: 30px; margin: 0; font-size: 13px; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqcos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqcos-label { grid-column: 1 / -1; padding: 4px 0; font-size: 13px; color: #705c3e; }
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .preview { display: flex; justify-content: center; align-items: flex-start; overflow: hidden; border: 1px solid #dbc9a1; border-radius: 12px; background: radial-gradient(ellipse at center, #fffaf0, #e8dbc0); min-width: 0; }
@media (pointer: coarse), (max-width: 600px) {
  html body #windows .win:is([data-win="items"], [data-win="gear"]) .vtabs button { min-height: 44px; }
  html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot { min-height: 64px; }
  html body #windows .win:is([data-win="equip"], [data-win="gear"]) .eqslot.classhat button { min-height: 44px; }
}
@media (max-width: 600px) {
  html body #windows .win[data-win="gear"] .eqw { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #windows .win[data-win="gear"] .eqw > .preview { grid-column: 1 / -1; grid-row: 1; height: 128px; }
  html body #windows .win[data-win="gear"] .eqcol.l { grid-column: 1; grid-row: 2; }
  html body #windows .win[data-win="gear"] .eqcol.r { grid-column: 2; grid-row: 2; }
  html body #windows .win[data-win="gear"] .eqcos { grid-row: 3; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body #windows .win:is([data-win="equip"], [data-win="gear"]) .preview canvas { display: block; max-width: 100% !important; width: 132px !important; height: auto !important; min-width: 0; object-fit: contain; }
@media (max-width: 600px) {
  html body #windows .win[data-win="gear"] .preview canvas { width: auto !important; height: 126px !important; max-height: 100%; }
}

/* ── 03 สถานะ + สกิล ── */
html body #windows .win:is([data-win="status"], [data-win="skills"]) { background: #fff9ed; border: 1px solid #d8bd86; border-radius: 14px; color: #443629; font-size: 14px; }
html body #windows .win:is([data-win="status"], [data-win="skills"]) > header { background: linear-gradient(#fffaf0, #f0e2bf); border-bottom: 1px solid #ddc69a; }
html body #windows .win:is([data-win="status"], [data-win="skills"]) > .body { padding: 10px; background: #fff9ed; }
html body #windows .win:is([data-win="status"], [data-win="skills"]) .small { font-size: 13px; line-height: 1.5; }
html body #windows .win:is([data-win="status"], [data-win="skills"]) :is(.status-service-footer, .skills-service-footer) { background: #f4ead4; border-top: 1px solid #ddc9a3; color: #67543d; gap: 6px; }
html body #windows .win:is([data-win="status"], [data-win="skills"]) button:focus-visible { outline: 2px solid #2f6f73; outline-offset: 2px; }
html body #windows .win[data-win="status"] { width: 420px !important; max-width: 100vw !important; }
html body #windows .win[data-win="status"] .st-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; border: 0; background: none; }
html body #windows .win[data-win="status"] .st-grid > .st-col:first-child { min-width: 0; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; border: 0; }
html body #windows .win[data-win="status"] .st-row { font-size: 13px; min-width: 0; color: #443629; }
html body #windows .win[data-win="status"] :is(.st-main, .st-grid > .st-col:first-child) .st-row { display: grid !important; grid-template-columns: minmax(28px, 1fr) auto 36px; gap: 0 5px; padding: 6px; margin: 0; background: #fffdf5; border: 1px solid #e1ceaa; border-radius: 9px; }
html body #windows .win[data-win="status"] :is(.st-main, .st-grid > .st-col:first-child) .st-row > b { width: auto; grid-column: 1; grid-row: 1; }
html body #windows .win[data-win="status"] :is(.st-main, .st-grid > .st-col:first-child) .v { grid-column: 2; grid-row: 1; font-weight: 600; }
html body #windows .win[data-win="status"] .cost { grid-column: 1 / 3; grid-row: 2; width: auto !important; color: #756348; font-size: 13px !important; text-align: left; white-space: nowrap; }
html body #windows .win[data-win="status"] button.up { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; margin: 0; align-self: center; background: #2f6f73; border: 1px solid #245d60; color: #fff; border-radius: 8px; font-size: 20px; }
html body #windows .win[data-win="status"] button.up:disabled { opacity: .5; }
html body #windows .win[data-win="status"] .st-points { margin: 0 0 8px; padding: 6px 9px; background: #e9f1e8; border: 1px solid #c2d6c8; border-radius: 9px; font-size: 13px; }
html body #windows .win[data-win="status"] .st-points b { color: #245d60; }
html body #windows .win[data-win="status"] .st-more { border-color: #dfcfaf; margin: 8px 0 0; }
html body #windows .win[data-win="status"] .st-more summary { color: #57452f; font-size: 14px; }
html body #windows .win[data-win="status"] .st-more .st-row { min-height: 27px; padding: 3px; }
html body #windows .win[data-win="status"] .status-service-footer { display: grid; }
html body #windows .win[data-win="status"] .stat-presets { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
html body #windows .win[data-win="status"] .stat-preset-label { grid-column: 1 / -1; font-size: 13px; }
html body #windows .win[data-win="status"] .stat-presets button { min-width: 0; font-size: 13px; }
html body #windows .win[data-win="skills"] { width: 420px !important; max-width: 100vw !important; }
html body #windows .win[data-win="skills"] .sk-list { border: 0; background: none; }
html body #windows .win[data-win="skills"] .sk-head { padding: 8px 10px; margin: 0 0 6px; background: #e9f0e7; border: 1px solid #c6d5c0; border-radius: 8px; color: #2f6f73; font-size: 14px; }
html body #windows .win[data-win="skills"] .sk-row { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto !important; align-items: center; gap: 8px; padding: 10px 8px; margin: 0 0 6px; border: 1px solid #decca7; border-radius: 10px; background: #fffdf5; }
html body #windows .win[data-win="skills"] .sk-row[data-state="ready"] { border-color: #aac7b2; background: #f5faf0; }
html body #windows .win[data-win="skills"] .sk-row[data-state="locked"] { background: #f6efdf; }
html body #windows .win[data-win="skills"] .sk-row > .ic { width: 44px !important; height: 44px !important; margin: 0; border-radius: 10px; flex: none; }
html body #windows .win[data-win="skills"] .sk-copy { min-width: 0; }
html body #windows .win[data-win="skills"] .nm { font-size: 14px; line-height: 1.45; color: #443629; overflow-wrap: break-word; }
html body #windows .win[data-win="skills"] .lv { display: flex; flex-wrap: wrap; gap: 2px 8px; color: #6e5e47; font-size: 13px; line-height: 1.4; }
html body #windows .win[data-win="skills"] .sk-row p { margin: 4px 0 0; color: #87612e; font-size: 13px; line-height: 1.4; }
html body #windows .win[data-win="skills"] .sk-progress { height: 5px; margin: 5px 0; border-radius: 8px; overflow: hidden; background: #e2d8c0; }
html body #windows .win[data-win="skills"] .sk-progress > span { display: block; height: 100%; background: #548f82; border-radius: inherit; }
html body #windows .win[data-win="skills"] .sk-state { font-size: 13px; color: #2f6f73; }
html body #windows .win[data-win="skills"] .sk-row[data-state="locked"] .sk-state { color: #926729; }
html body #windows .win[data-win="skills"] .sk-row[data-state="full"] .sk-state { color: #7e651a; }
html body #windows .win[data-win="skills"] .sk-btns { display: flex !important; gap: 4px; margin: 0; }
html body #windows .win[data-win="skills"] .sk-btns button { min-width: 32px; width: 32px; height: 36px; padding: 0; border-radius: 8px; font-size: 16px; }
html body #windows .win[data-win="skills"] .sk-btns .info { background: #fffaf0; border: 1px solid #c9b790; color: #796442; }
html body #windows .win[data-win="skills"] .sk-btns .hot { background: #f0e4c9; border: 1px solid #c9b790; color: #665239; }
html body #windows .win[data-win="skills"] .sk-btns .up { background: #2f6f73; border: 1px solid #245d60; color: #fff; }
html body #windows .win[data-win="skills"] .sk-row:is([data-state="locked"], [data-state="no-points"], [data-state="full"]) .up { background: #e8dfcc; border-color: #ccbd9e; color: #7c6d56; }
@media (pointer: coarse), (max-width: 760px) {
  html body #windows .win:is([data-win="status"], [data-win="skills"]) button { min-height: 44px; }
  html body #windows .win[data-win="status"] .st-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  html body #windows .win[data-win="status"] .st-main .st-row { grid-template-columns: minmax(25px, 1fr) auto 44px; margin: 0; }
  html body #windows .win[data-win="status"] button.up { width: 44px; }
  html body #windows .win[data-win="status"] .st-more summary { min-height: 44px; padding: 10px 0; }
  html body #windows .win[data-win="skills"] .sk-row { grid-template-columns: 44px minmax(0, 1fr) 92px !important; align-items: center; }
  html body #windows .win[data-win="skills"] .sk-btns { grid-column: 3; display: grid !important; grid-template-columns: 44px 44px; gap: 4px; }
  html body #windows .win[data-win="skills"] .sk-btns button { min-width: 44px; width: 44px; height: 44px; }
}
html body #windows .win[data-win="status"] .st-col { background: none; border-color: #e1ceaa; }
@media (pointer: coarse), (max-width: 760px) {
  html body #windows .win[data-win="skills"] .sk-btns .info { grid-column: 1; grid-row: 1; }
  html body #windows .win[data-win="skills"] .sk-btns .up { grid-column: 2; grid-row: 1; }
  html body #windows .win[data-win="skills"] .sk-btns .hot { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}

/* ── 04 เป้าหมายตอนนี้ ── */
html body #goal { left: 16px !important; margin-top: 8px; color: #493b29; font-family: Anuphan, sans-serif; box-sizing: border-box; }
html body #goal:not(.min) { display: flex; flex-direction: column; width: 320px !important; max-width: calc(100vw - 32px) !important; max-height: calc(100dvh - 330px); padding: 0; border: 1px solid #bc9251; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, #fff9edeb, #f4e7d1e6); box-shadow: 0 3px 12px #62432326, inset 0 0 0 1px #fff5d9; }
html body #goal:not(.min) > header { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; height: auto !important; min-height: 38px; padding: 5px 10px; border: 0; border-bottom: 1px solid #d9bc82; border-radius: 0; background: linear-gradient(#f7e5bfe6, #efdab2cc); color: #6e4e27; font: 500 14px/1.5 Mitr, sans-serif; text-shadow: none; }
html body #goal:not(.min) #goal-min { position: static !important; inset: auto !important; width: auto; min-width: 52px; min-height: 28px; margin: 0; padding: 3px 9px; border: 1px solid #c2a16a; border-radius: 8px; color: #725633; background: #fff8e8d9; font-size: 13px; line-height: 1.4; }
html body #goal:not(.min) > .body { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; padding: 12px; min-height: 0; overflow-y: auto; background: transparent; }
html body #goal #goal-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; font-size: 28px; line-height: 1; }
html body #goal #goal-icon img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
html body #goal:not(.min) #goal-icon { grid-column: 1; grid-row: 1; border: 1px solid #d8c18d; border-radius: 11px; background: #fff8e8bd; padding: 3px; box-sizing: border-box; }
html body #goal:not(.min) #goal-txt { display: block; grid-column: 2; align-self: center; padding: 0; margin: 0; color: #3e3528; font-size: 15px !important; line-height: 1.5; font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; word-break: normal; overflow-wrap: break-word; }
html body #goal:not(.min) #goal-txt::before { content: none !important; }
html body #goal:not(.min) #goal-sub { display: block; grid-column: 1 / -1; margin: 0; color: #6a5941; font-size: 13px !important; line-height: 1.65; white-space: normal; }
html body #goal:not(.min) .gfoot { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; flex: 0 0 auto; gap: 6px; padding: 0 12px 12px; border: 0; background: transparent; }
html body #goal:not(.min) .gfoot button { min-width: 0; height: auto; min-height: 34px; padding: 6px 8px; border: 1px solid #cdb78e; border-radius: 9px; background: #fffaf0d9; color: #675039; font-size: 13px; line-height: 1.4; box-shadow: none; white-space: normal; }
html body #goal:not(.min) #goal-act { grid-column: 1 / -1; min-height: 40px; background: linear-gradient(#438887, #2f6f73); border: 1px solid #285e61; color: #fffef3; font-size: 14px; font-weight: 700; }
html body #goal #goal-act[hidden] { display: none !important; }
html body #goal button:focus-visible { outline: 2px solid #2f6f73; outline-offset: -3px; }
html body #goal.min { width: 252px !important; max-width: calc(100vw - 32px) !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border: 1px solid #b48b4f !important; border-radius: 10px; background: linear-gradient(100deg, #fff6e4ed, #f0dbb9eb) !important; box-shadow: 0 2px 5px #63482222, inset 0 0 0 1px #fff4d4; overflow: visible; cursor: pointer; }
html body #goal.min::before { content: ''; position: absolute; inset: -6px 0; background: transparent; }
html body #goal.min > header, html body #goal.min #goal-sub, html body #goal.min .gfoot { display: none !important; }
html body #goal.min > .body { display: flex !important; align-items: center; gap: 6px; width: 100%; height: 100%; margin: 0; padding: 2px 8px; box-sizing: border-box; background: transparent; pointer-events: none; }
html body #goal.min #goal-icon { width: 24px; height: 24px; font-size: 20px; }
html body #goal.min #goal-txt { flex: 1; min-width: 0; padding: 0 !important; color: #493b29; font-size: 13px !important; font-weight: 700; line-height: 1.4; text-shadow: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html body #goal.min #goal-txt::before, html body #goal.min #goal-txt::after { content: none !important; }
html body #goal.min > .body::after { content: '›'; flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff8e6; background: #a57e43; font: 700 18px/1 Anuphan, sans-serif; }
@media (pointer: coarse), (max-width: 760px) {
  html body #goal:not(.min) { max-height: calc(100dvh - 230px); }
  html body #goal:not(.min) #goal-min, html body #goal:not(.min) .gfoot button { min-height: 44px; }
}
html.touch-ui.land body #goal { left: 128px !important; }
html.touch-ui.land body #goal:not(.min) { width: 460px !important; max-width: calc(100vw - 150px) !important; max-height: calc(100dvh - 212px); }
html.touch-ui.land body #goal:not(.min) > header { min-height: 44px; padding: 0 8px; }
html.touch-ui.land body #goal:not(.min) > .body { grid-template-columns: 36px minmax(0, 1fr); gap: 4px 8px; padding: 6px 8px; }
html.touch-ui.land body #goal:not(.min) #goal-icon { width: 36px; height: 36px; grid-row: 1 / 3; }
html.touch-ui.land body #goal:not(.min) #goal-txt { font-size: 14px !important; }
html.touch-ui.land body #goal:not(.min) #goal-sub { grid-column: 2; line-height: 1.4; }
html.touch-ui.land body #goal:not(.min) .gfoot { grid-template-columns: 1fr 1.2fr .8fr; padding: 6px 8px; }
html.touch-ui.land body #goal:not(.min) #goal-act { grid-column: auto; }
html body #goal.min > .body::before { content: none !important; }
/* กล่องที่ผู้เล่นกางต้องอยู่เหนือปุ่มลอยของจอสัมผัส */
html body #goal:not(.min) { z-index: 24; }
@media (max-width: 360px) and (orientation: portrait) {
  html body #goal:not(.min) > header { padding: 0 8px; }
  html body #goal:not(.min) > .body { grid-template-columns: 32px minmax(0, 1fr); gap: 6px 8px; padding: 8px; }
  html body #goal:not(.min) #goal-icon { width: 32px; height: 32px; }
  html body #goal:not(.min) #goal-txt { font-size: 14px !important; }
  html body #goal:not(.min) #goal-sub { line-height: 1.45; }
  html body #goal:not(.min) .gfoot { grid-template-columns: .95fr 1.15fr .85fr; padding: 0 8px 8px; gap: 4px; }
  html body #goal:not(.min) #goal-act { grid-column: auto; }
}

/* 04 รีวิว (Claude 27 ก.ย.): โน้ตบุ๊ก 1366×768 การ์ดกางยาวถึง y≈560 ทับแถบแชต — ปุ่มเควสวันนี้/ขอช่วยโดนแชตบัง
   คอม: ปุ่มสามปุ่มแถวเดียวแบบแนวนอนมือถือ ลดความสูงลง ~50px → จบที่ y≈522 เหนือแชต (ไม่ดัน z-index — ลองแล้วการ์ดทับหน้าต่างสถานะ) */
@media (pointer: fine) and (min-width: 761px) {
  html body #goal:not(.min) > .body { padding: 10px 12px 8px; gap: 6px 10px; }
  html body #goal:not(.min) #goal-sub { line-height: 1.5; }
  html body #goal:not(.min) .gfoot { grid-template-columns: 1.1fr 1.15fr .85fr; padding: 0 12px 10px; }
  html body #goal:not(.min) #goal-act { grid-column: auto; min-height: 36px; }
}

/* ── 05 ร้านค้า ── */
html body #windows .win[data-win="shop"] { padding: 0 !important; border: 1px solid #d8bd86; border-radius: 14px; background: #fff9ed; color: #443629; overflow: hidden; }
html body #windows .win[data-win="shop"] > header { margin: 0; padding: 6px 10px; border-bottom: 1px solid #ddc69a; background: linear-gradient(#fffaf0, #f0e2bf); }
html body #windows .win[data-win="shop"] > header img { border-radius: 50%; border: 1px solid #d7b774; background: #e1eeea; }
html body #windows .win[data-win="shop"] > .body { padding: 0 !important; background: #fff9ed; }
html body #windows .win[data-win="shop"] .shop-top { padding: 4px 12px; gap: 8px; }
html body #windows .win[data-win="shop"] .shop-say { min-width: 0; margin: 0; padding: 2px 0; font-size: 13px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body #windows .win[data-win="shop"] .shop-cat { min-width: 0; display: flex; flex-direction: column; }
html body #windows .win[data-win="shop"] .shop-tabs { display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; padding: 6px 10px 0; overflow-x: auto; scrollbar-width: thin; }
html body #windows .win[data-win="shop"] .shop-tabs button { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; font-size: 13px; line-height: 1.4; white-space: nowrap; }
html body #windows .win[data-win="shop"] .shop-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .65fr); gap: 6px; flex: 0 0 auto; padding: 6px 10px; }
html body #windows .win[data-win="shop"] .shop-search { min-width: 0; }
html body #windows .win[data-win="shop"] :is(.shop-search input, .shop-sort) { min-width: 0; width: 100%; height: 36px; font-size: 13px; padding: 6px 8px; }
html body #windows .win[data-win="shop"] .shop-filter-strip { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; min-width: 0; padding: 0 10px 6px; }
html body #windows .win[data-win="shop"] .shop-subs { display: flex !important; flex: 1; flex-wrap: nowrap !important; align-items: center; min-width: 0; gap: 5px; padding: 0 0 3px; margin: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c3aa76 transparent; }
html body #windows .win[data-win="shop"] .shop-subs .chip { display: inline-flex !important; flex: 0 0 auto; align-items: center; justify-content: center; margin: 0; min-height: 30px; padding: 4px 10px; border: 1px solid #cdb68b; border-radius: 18px; font-size: 13px; line-height: 1.4; white-space: nowrap; }
html body #windows .win[data-win="shop"] .shop-subs .chip.on { background: #e5f0e9; border-color: #578e85; color: #245d60; }
html body #windows .win[data-win="shop"] .shop-mine { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 3px 5px; font-size: 13px; white-space: nowrap; color: #6b583f; border-radius: 8px; background: #efe5cf; }
html body #windows .win[data-win="shop"] .shop-mine input { margin: 0; width: 16px; height: 16px; accent-color: #2f6f73; }
html body #windows .win[data-win="shop"] .shop-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px; }
html body #windows .win[data-win="shop"] .shop-row { min-height: 58px; padding: 5px 7px; gap: 8px; margin-bottom: 4px; border-radius: 10px; }
html body #windows .win[data-win="shop"] .shop-row .shop-ic { width: 44px; height: 44px; flex: 0 0 44px; }
html body #windows .win[data-win="shop"] .shop-nm b { font-size: 14px; line-height: 1.4; }
html body #windows .win[data-win="shop"] .shop-nm small { font-size: 13px; line-height: 1.4; }
html body #windows .win[data-win="shop"] .shop-count { flex: 0 0 auto; min-height: 24px; padding: 4px 10px; font-size: 13px; line-height: 1.4; }
html body #windows .win[data-win="shop"] :is(button, input, select):focus-visible { outline: 2px solid #2f6f73; outline-offset: -2px; }
@media (pointer: coarse), (max-width: 760px) {
  html body #windows .win[data-win="shop"] :is(.shop-tabs button, .shop-search input, .shop-sort, .shop-subs .chip, .shop-mine, .shop-sell) { min-height: 44px; }
  html body #windows .win[data-win="shop"] .shop-tools { grid-template-columns: minmax(0, 1fr) 126px; }
  html body #windows .win[data-win="shop"] .shop-top { padding-top: 4px; padding-bottom: 4px; }
  html body #windows .win[data-win="shop"] .shop-sell { flex-shrink: 0; }
}
html.touch-ui.land body #windows .win[data-win="shop"] .shop-top { padding: 0; }
html body #windows .win[data-win="shop"] :is(small, .small, .bd) { font-size: 13px !important; }
html body #windows .win[data-win="shop"] .shop-cat { padding: 0 !important; gap: 0 !important; }
html body #windows .win[data-win="shop"] :is(.shop-tools, .shop-tabs, .shop-filter-strip) { margin: 0; }
html body #windows .win[data-win="shop"] .shop-list { display: flex; flex-direction: column; gap: 4px; }
html body #windows .win[data-win="shop"] .shop-row { flex: 0 0 auto; margin: 0; }
html body #windows .win[data-win="shop"] > header .win-ic { border-radius: 50% !important; overflow: hidden; background: #e1eeea; border: 2px solid #d7b774; }
html body #windows .win[data-win="shop"] > header .win-ic img { width: 100%; height: 100%; object-fit: cover; border: 0; }
@media (max-width: 360px) {
  html body #windows .win[data-win="shop"] > header { display: flex !important; flex-wrap: wrap; gap: 2px 8px; height: auto !important; flex-shrink: 0; }
  html body #windows .win[data-win="shop"] > header > :not(.win-ic):not(.shop-hgold):not(button) { flex: 1; min-width: 0; }
  html body #windows .win[data-win="shop"] > header .win-ic { flex: 0 0 36px; width: 36px; height: 36px; }
  html body #windows .win[data-win="shop"] > header button { flex: 0 0 44px; }
  html body #windows .win[data-win="shop"] > header small { white-space: normal; overflow: visible; text-overflow: clip; }
  html body #windows .win[data-win="shop"] .shop-hgold { order: 4; flex: 0 0 100%; width: 100%; max-width: none !important; min-width: 0; padding: 0 0 0 46px; margin: 0; box-sizing: border-box; justify-content: flex-start; overflow: visible; white-space: nowrap; }
  html body #windows .win[data-win="shop"] .shop-hgold .gold-amt { flex: none; max-width: none; overflow: visible; }
}

/* ── 10 ช่างแต่งผม (Mei) ── Claude ทำเอง 30 ก.ย. ตามใบ 10 (ผู้ใช้: "ทำเลย ไม่ต้องรอ Astra")
   ซ้าย = ตัว Mei · ขวา = ตัวเลือก · ตัวละครจริงในฉากคือตัวอย่าง หน้าต่างจึงอยู่ขวากลางจอ ไม่บังตัวเรา */
html body #windows .win[data-win="npc"][data-npc="stylist"] { width: 600px !important; }
html body #windows .win[data-npc="stylist"] > .body { padding: 14px 16px 12px; background:
  radial-gradient(circle at 0 0, #f3dfb0 0 18px, transparent 19px), radial-gradient(circle at 100% 0, #f3dfb0 0 18px, transparent 19px), #fff9ed; }
html body #windows .win[data-npc="stylist"] .sty { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 16px; align-items: start; }
html body #windows .win[data-npc="stylist"] .sty-mei { display: grid; justify-items: center; gap: 8px; padding: 12px 10px 14px; border-radius: 16px;
  background: linear-gradient(#fbe6ec, #fff3dc 70%); border: 1px solid #e6cfa2; box-shadow: inset 0 0 0 3px #fffaf0; text-align: center; }
html body #windows .win[data-npc="stylist"] .sty-mei { overflow: hidden; }
/* รูปครึ่งตัว (ภาพผู้ใช้ 30 ก.ย. 400px) — ขอบล่างของรูปเป็นเส้นตัดเอว ให้ป้ายชื่อทับเส้นนั้นพอดี · มือถือใช้รูปหน้าเดิม (mei.png) */
html body #windows .win[data-npc="stylist"] .sty-portrait { width: 176px; height: auto; max-width: 100%; margin: -4px 0 0; filter: drop-shadow(0 3px 4px #7a4a2a33); }
html body #windows .win[data-npc="stylist"] .sty-face { display: none; }
html body #windows .win[data-npc="stylist"] .sty-mei .sty-tag { position: relative; margin-top: -30px; }
html body #windows .win[data-npc="stylist"] .sty-sec h4 { display: flex; align-items: center; gap: 6px; }
html body #windows .win[data-npc="stylist"] .sty-ic { width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; }
html body #windows .win[data-npc="stylist"] .sty-tag { display: grid; gap: 1px; margin-top: -4px; padding: 4px 18px 5px; border-radius: 12px;
  background: #fffdf5; border: 1px solid #d8bd86; box-shadow: 0 2px 0 #e8b64a55; }
html body #windows .win[data-npc="stylist"] .sty-tag b { font: 500 18px/1.2 Mitr, sans-serif; color: #245d60; }
html body #windows .win[data-npc="stylist"] .sty-tag span { font-size: 13px; color: #70604b; }
html body #windows .win[data-npc="stylist"] .sty-bio { margin: 0; font-size: 13px; line-height: 1.5; color: #6a5842; }
html body #windows .win[data-npc="stylist"] .sty-main { display: grid; gap: 12px; min-width: 0; }
html body #windows .win[data-npc="stylist"] .sty-bubble { position: relative; margin: 0; padding: 11px 14px; border-radius: 14px; border: 1px solid #e4d4b4;
  background: #fffef8; font-size: 14px; line-height: 1.55; color: #443629; box-shadow: 0 2px 0 #eadbbd; }
html body #windows .win[data-npc="stylist"] .sty-bubble::before { content: ''; position: absolute; left: -8px; top: 16px; width: 14px; height: 14px;
  background: #fffef8; border-left: 1px solid #e4d4b4; border-bottom: 1px solid #e4d4b4; transform: rotate(45deg); }
html body #windows .win[data-npc="stylist"] .sty-sec { display: grid; gap: 7px; padding: 10px 12px 12px; border-radius: 12px; background: #fdf6e6; border: 1px solid #ebdcbd; }
html body #windows .win[data-npc="stylist"] .sty-sec[hidden] { display: none; }
html body #windows .win[data-npc="stylist"] .sty-sec h4 { margin: 0; font: 500 15px/1.3 Mitr, sans-serif; color: #5a4630; }
html body #windows .win[data-npc="stylist"] .sty-sec h5 { margin: 2px 0 0; font: 400 13px/1.3 Anuphan, sans-serif; color: #7a6750; }
html body #windows .win[data-npc="stylist"] .sty-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html body #windows .win[data-npc="stylist"] .sty-seg button,
html body #windows .win[data-npc="stylist"] .sty-pick button { min-height: 40px; border-radius: 12px; border: 1px solid #d3bd8f; background: linear-gradient(#fffdf5, #f5ead2);
  color: #443629; font: 500 14px Mitr, sans-serif; cursor: pointer; }
html body #windows .win[data-npc="stylist"] .sty-seg button:hover,
html body #windows .win[data-npc="stylist"] .sty-pick button:hover { border-color: #c9a24a; background: #fff6de; }
html body #windows .win[data-npc="stylist"] .sty-seg button.on { background: linear-gradient(#f6d27a, #e8b64a); border-color: #b8892a; color: #3d2a12; box-shadow: 0 2px 0 #b8892a66; }
html body #windows .win[data-npc="stylist"] .sty-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; text-align: center; font-size: 14px; }
html body #windows .win[data-npc="stylist"] .sty-pick button { font-size: 20px; padding: 0; }
html body #windows .win[data-npc="stylist"] .sty-pick small { color: #7a6750; font-size: 13px; }
html body #windows .win[data-npc="stylist"] .sty-sws { display: flex; flex-wrap: wrap; gap: 9px; }
html body #windows .win[data-npc="stylist"] .sty-sw { position: relative; width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #ffffff66, transparent 45%), var(--sw); border: 2px solid #fffaf0; box-shadow: 0 0 0 1px #cdb88e, 0 2px 3px #6a4a2a33; }
html body #windows .win[data-npc="stylist"] .sty-sw:hover { transform: scale(1.1); }
html body #windows .win[data-npc="stylist"] .sty-sw.on { box-shadow: 0 0 0 3px #e8b64a, 0 0 0 5px #8a6420, 0 2px 6px #6a4a2a55; }
html body #windows .win[data-npc="stylist"] .sty-sw.on::after { content: '✓'; position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #2f6f73; color: #fff; font: 700 11px/1 sans-serif; border: 2px solid #fffaf0; }
html body #windows .win[data-npc="stylist"] .npc-service-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
html body #windows .win[data-npc="stylist"] .sty-hint { font-size: 13px; color: #67543d; }
html body #windows .win[data-npc="stylist"] .sty-undo { min-height: 36px; padding: 0 14px; border-radius: 12px; border: 1px solid #c9b58b; font: 500 13px Mitr, sans-serif; }
html body #windows .win[data-npc="stylist"] .sty-undo:disabled { opacity: .45; cursor: default; }
html body #windows .win[data-npc="stylist"] .sty { position: relative; }
html body #windows .win[data-npc="stylist"] .sty-btns { display: flex; gap: 8px; flex: 0 0 auto; }
html body #windows .win[data-npc="stylist"] .sty-undo { background: #fffdf5; border-color: #c9b58b; color: #5a4630; }
html body #windows .win[data-npc="stylist"] .sty-pay { min-height: 36px; padding: 0 16px; border-radius: 12px; background: #2f6f73; border: 1px solid #245d60; color: #fffdf5; font: 500 14px Mitr, sans-serif; box-shadow: 0 2px 0 #1d4a4d; }
html body #windows .win[data-npc="stylist"] .sty-pay:disabled { opacity: .45; cursor: default; box-shadow: none; }
html body #windows .win[data-npc="stylist"] .sty-hint.bad { color: #b0412e; font-weight: 600; }
html body #windows .win[data-npc="stylist"] .sty-note { margin-left: auto; font: 400 12.5px Anuphan, sans-serif; color: #7a6750; }
/* "ใช้สีตามเกราะ" = ดวงลายทแยง (ไม่ใช่สีใดสีหนึ่ง) */
html body #windows .win[data-npc="stylist"] .sty-sw-none { --sw: repeating-linear-gradient(135deg, #e8dcc0 0 5px, #c9b58b 5px 8px); }
/* กล่องยืนยันจ่าย — ทับในหน้าต่าง (ไม่ใช้ confirm() ของเบราว์เซอร์) พื้นหลังจางลงให้ตาอยู่ที่ราคา */
html body #windows .win[data-npc="stylist"] .sty-ask { position: absolute; inset: -4px; z-index: 2; display: grid; place-content: center; gap: 10px; padding: 18px;
  border-radius: 14px; background: #fff9edee; backdrop-filter: blur(2px); text-align: center; }
html body #windows .win[data-npc="stylist"] .sty-ask h4 { margin: 0; font: 500 18px Mitr, sans-serif; color: #245d60; }
html body #windows .win[data-npc="stylist"] .sty-ask ul { list-style: none; margin: 0; padding: 10px 14px; display: grid; gap: 6px; min-width: 240px;
  border-radius: 12px; background: #fdf6e6; border: 1px solid #ebdcbd; font-size: 14px; }
html body #windows .win[data-npc="stylist"] .sty-ask li { display: flex; justify-content: space-between; gap: 16px; }
html body #windows .win[data-npc="stylist"] .sty-ask li b { color: #8a6420; }
html body #windows .win[data-npc="stylist"] .sty-sum { margin: 0; font-size: 14px; color: #5a4630; }
html body #windows .win[data-npc="stylist"] .sty-sum b { font: 500 16px Mitr, sans-serif; color: #8a6420; }
html body #windows .win[data-npc="stylist"] .sty-ask-btns { display: flex; justify-content: center; gap: 10px; }
html body #windows .win[data-npc="stylist"] .sty-ask-btns .rbtn { min-height: 40px; padding: 0 18px; border-radius: 12px; font: 500 14px Mitr, sans-serif; }
/* จอแคบ/สัมผัส: แผ่นล่างเต็มกว้าง · Mei ย่อเป็นแถบบน (รูปเล็ก + ชื่อ) · ดวงสี 44px */
@media (pointer: coarse), (max-width: 760px) {
  html body #windows .win[data-win="npc"][data-npc="stylist"] { width: calc(100vw - 12px) !important; }
  html body #windows .win[data-npc="stylist"] .sty { grid-template-columns: 1fr; gap: 10px; }
  html body #windows .win[data-npc="stylist"] .sty-mei { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: center; gap: 4px 12px; padding: 8px 12px; text-align: left; }
  html body #windows .win[data-npc="stylist"] .sty-portrait { width: 64px; grid-row: span 2; }
  html body #windows .win[data-npc="stylist"] .sty-tag { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  html body #windows .win[data-npc="stylist"] > .body { padding: 8px 10px; }
  html body #windows .win[data-npc="stylist"] .sty-mei { grid-template-columns: 48px minmax(0, 1fr); padding: 4px 10px; }
  html body #windows .win[data-npc="stylist"] .sty-portrait { display: none; }
  html body #windows .win[data-npc="stylist"] .sty-face { display: block; width: 48px; height: auto; }
  html body #windows .win[data-npc="stylist"] .sty-bio { display: none; }
  /* แถวบน = รูป Mei + คำพูด (ชื่ออยู่หัวหน้าต่างแล้ว) — เดิมรูปกับคำพูดแยกสองแถว แผ่นสูงจนบังตัวละคร */
  html body #windows .win[data-npc="stylist"] .sty { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
  html body #windows .win[data-npc="stylist"] .sty-main { display: contents; }
  html body #windows .win[data-npc="stylist"] .sty-mei { grid-column: 1; grid-row: 1; display: block; padding: 0; background: none; border: 0; box-shadow: none; }
  html body #windows .win[data-npc="stylist"] .sty-tag { display: none; }
  html body #windows .win[data-npc="stylist"] .sty-bubble { grid-column: 2; grid-row: 1; align-self: center; }
  html body #windows .win[data-npc="stylist"] .sty-sec { grid-column: 1 / -1; }
  html body #windows .win[data-npc="stylist"] .npc-service-footer { padding-block: 4px; }
  html body #windows .win[data-npc="stylist"] .sty-bubble { padding: 7px 10px; font-size: 13px; }
  html body #windows .win[data-npc="stylist"] .sty-bubble::before { display: none; }
  html body #windows .win[data-npc="stylist"] .sty-sec { padding: 8px 10px; gap: 5px; }
  /* แผ่นล่างต้องเตี้ย (ตัวละครอยู่กลางจอ) — ดวงสีเป็นแถวเดียวเลื่อนซ้ายขวาได้ต่อกลุ่ม แทนที่จะตัดเป็นหลายแถว */
  html body #windows .win[data-npc="stylist"] .sty-sws { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 8px; margin: 0 -4px; scrollbar-width: none; }
  html body #windows .win[data-npc="stylist"] .sty-sw { flex: 0 0 44px; width: 44px; height: 44px; }
  html body #windows .win[data-npc="stylist"] :is(.sty-seg button, .sty-undo, .sty-pay, .sty-ask-btns .rbtn) { min-height: 44px; }
}
html.touch-ui.land body #windows .win[data-win="npc"][data-npc="stylist"] { width: min(760px, calc(100vw - 20px)) !important; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty { grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-main { display: grid; gap: 8px; grid-column: 2; grid-row: 1; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-mei { grid-column: 1; grid-row: 1; display: grid; gap: 4px; padding: 8px; background: linear-gradient(#fbe6ec, #fff3dc 70%); border: 1px solid #e6cfa2; border-radius: 14px; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-tag { display: grid; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-mei { grid-template-columns: 1fr; justify-items: center; text-align: center; }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-face { width: 84px; }
@media (max-width: 420px) { html body #windows .win[data-npc="stylist"] .sty-hint { display: none; } html body #windows .win[data-npc="stylist"] .npc-service-footer { justify-content: flex-end; } }
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-bio,
html.touch-ui.land body #windows .win[data-npc="stylist"] .sty-bubble { display: none; }

/* ── 11 กระดานตลาด ── Claude 30 ก.ย. ตาม mockup ผู้ใช้ (คัดเฉพาะที่มีระบบจริง · คงโครง stv-* เดิม)
   รูป Oren ข้างคำพูด · ปุ่มเรียงลำดับ · หน้าว่างมีภาพแผง · ราคาเรียงตรงคอลัมน์เดียว */
html body .win .mkb .stv-head { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 300px) 58px; }
html body .win .mkb .mkb-face { width: 58px; height: 58px; object-fit: cover; object-position: top; border-radius: 50%; border: 2px solid #d7b774; background: #e1eeea; }
html body .win .mkb .stv-say::after { content: ''; position: absolute; right: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: #fffdf6;
  border-right: 1px solid #e3d4ae; border-top: 1px solid #e3d4ae; transform: rotate(45deg); }
html body .win .mkb .stv-lh { gap: 8px; flex-wrap: wrap; }
html body .win .mkb .stv-lh small:empty { display: none; }
html body .win .mkb .mkb-sort { display: inline-flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 10px; background: #f4ead4; border: 1px solid #e2cc98; }
html body .win .mkb .mkb-sort button { min-height: 28px; padding: 2px 10px; border-radius: 8px; border: 0; background: none; cursor: pointer;
  font: 600 13px/1 var(--font-head, inherit); color: #7a5a2a; box-shadow: none; }
html body .win .mkb .mkb-sort button.on { background: #fffdf7; color: #245d60; box-shadow: 0 1px 0 #d8c49a; }
html body .win .mkb .mkb-seller { font-style: normal; padding: 0 5px; margin-right: 2px; border-radius: 5px; background: #f1e6cc; color: #7a5a2a; font-size: 12px; }
html body .win .mkb .stv-pr { min-width: 104px; }
html body .win .mkb .stv-pr small { font: 600 13px/1 var(--font-head, inherit); color: #7a6750; }
html body .win .mkb .mkb-empty { display: grid; justify-items: center; gap: 4px; padding: 18px 12px 22px; }
html body .win .mkb .mkb-empty-art { width: 92px; height: 92px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 3px 4px #8a5a1a33); }
html body .win .mkb .bp-go { font-size: 16px; }
@media (max-width: 760px), (pointer: coarse) {
  html body .win .mkb .stv-head { grid-template-columns: 52px minmax(0, 1fr); }
  html body .win .mkb .mkb-face { display: none; }
  html body .win .mkb .stv-say::after { display: none; }
  html body .win .mkb .mkb-sort { margin-left: 0; }
  html body .win .mkb .mkb-sort button { min-height: 40px; padding: 2px 12px; }
  html body .win .mkb .stv-pr { min-width: 0; }
  html body .win .mkb .mkb-empty-art { width: 72px; height: 72px; }
}
/* กล่องยืนยันซื้อ (ยืนยันทุกครั้งแล้ว) — ยึดกับจอ ไม่ใช่กับเนื้อหา: มือถือเลื่อนลงไปกดซื้อแล้วกล่องเคยไปโผล่บนสุดที่มองไม่เห็น */
html body .win.mk-win .mk-confirm { position: fixed; inset: 0; z-index: 60; border-radius: 0; background: #3b302066; }