/* Terra-Anvil — mobile-first · dark warm world · SVG art, no WebGL */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #14120f; --panel: #1e1b17; --panel2: #282420; --line: #3a342c;
  --tx: #efe9dd; --dim: #9a9184; --gold: #e8b94c; --cry: #7fc7e8; --ok: #7fd1b9; --bad: #e87f7f;
}
html, body { background: var(--bg); color: var(--tx); font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 15px;
  height: 100%; overflow: hidden; }
/* จอเดียวจบ — โลก 3D เต็มจอ ไม่มีแท็บล่าง ไม่มีการเลื่อนหน้า */
#app { width: 100%; height: 100%; }

.top { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center;
  background: linear-gradient(#1c1915, #1c1915f2); padding: 9px 12px; border-bottom: 1px solid var(--line); }
.stat { display: flex; flex-direction: column; min-width: 50px; }
.stat .lb { font-size: 10px; color: var(--dim); }
.stat b { font-size: 15px; }
.stat.gold b { color: var(--gold); } .stat.cry b { color: var(--cry); } .stat.stam b { color: var(--ok); }
.endday { margin-left: auto; background: linear-gradient(#f0c25a, #d09b2c); color: #241a03; border: 0;
  font-weight: 700; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.endday:active { transform: scale(.96); }

.inv { display: flex; gap: 10px; overflow-x: auto; padding: 7px 12px; font-size: 12px; color: var(--dim);
  border-bottom: 1px solid var(--line); white-space: nowrap; scrollbar-width: none; }
.inv::-webkit-scrollbar { display: none; }
.inv b { color: var(--tx); }

.content { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.content.flush { padding: 0; gap: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.card.goal { border-color: #7a6428; background: linear-gradient(160deg, #2b2413, var(--panel)); }
.card .h { font-weight: 700; margin-bottom: 9px; font-size: 14px; }
.big { font-size: 19px; } .dim { color: var(--dim); } .small { font-size: 12px; line-height: 1.5; }
.bad-t { color: var(--bad); font-weight: 700; } .cry-t { color: var(--cry); }

.row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.row:first-of-type { border-top: 0; }
.row .grow { flex: 1 1 130px; }
input[type=number] { width: 72px; background: var(--panel2); color: var(--tx); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; font-size: 14px; }
button { background: var(--panel2); color: var(--tx); border: 1px solid #4a4238; border-radius: 9px;
  padding: 9px 13px; font-size: 13px; cursor: pointer; font-family: inherit; }
/* ปุ่มเข้มใช้เฉพาะนอกหน้าต่าง (HUD) — ในหน้าต่างใช้สไตล์ RO สว่างจาก ro-ui.css
   ยกเว้น .npc-go: ปุ่มหลักในกล่องคุย NPC เป็นปุ่มทองที่ ro-ui.css ออกแบบไว้เต็มใบ
   กฎนี้จำเพาะ (1,4,1) สูงกว่า .npc-acts button.npc-go (0,2,1) จึงเคยทับปุ่มทองเป็นน้ำตาลเข้มเงียบ ๆ
   — นั่นคือ "ปุ่มดูงานวันนี้สีน้ำตาล" ที่ Stamp เห็นว่ากล่องคุยดูไม่สวย (31 ก.ค.)
   แก้ที่รายชื่อยกเว้นตรงนี้ ไม่ไล่ปั๊มจำเพาะเพิ่มฝั่ง ro-ui: ปั๊มไปก็แพ้อยู่ดีถ้าไม่ใส่ id ซ้อน */
#rpg-mount button:not(.ghost):not(.skin):not(.dot):not(.npc-go):not(:disabled) {
  background: var(--h-chip); border-color: var(--h-line); color: var(--h-ink); }
button.ghost { background: transparent; } button.cry-btn { border-color: var(--cry); color: var(--cry); }
button:disabled { opacity: .36; cursor: default; }
button:active:not(:disabled) { transform: scale(.96); }

.q { font-size: 11px; padding: 2px 7px; border-radius: 20px; background: var(--panel2); }
.q-faint { color: #a8a396; } .q-normal { color: #9ccdf0; } .q-rich { color: #ffd97f; } .q-prime { color: #ffb3ec; }

/* ── แปลงที่ดินแบบภาพ ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tile { position: relative; background: linear-gradient(#20262a, #1a1512); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .1s; }
.tile:active { transform: scale(.98); }
.tile.sel { border-color: var(--gold); box-shadow: 0 0 0 2px #e8b94c44; }
.tile-svg { width: 100%; display: block; }
.tile-svg.dim { opacity: .62; filter: grayscale(.35); }
.tile-info { padding: 6px 8px 8px; font-size: 12px; border-top: 1px solid #ffffff10; }
.tile-badge { position: absolute; top: 6px; right: 7px; font-size: 15px; background: #0008; border-radius: 8px; padding: 1px 5px; }
.tbar { height: 4px; background: #ffffff14; border-radius: 3px; margin-top: 5px; overflow: hidden; }
.tbar i { display: block; height: 100%; background: var(--ok); }
.acard { background: var(--panel2); border-radius: 12px; overflow: hidden; }
.acard .tile { border: 0; border-radius: 0; }
.arow { display: flex; gap: 5px; padding: 7px; flex-wrap: wrap; }
.arow button { flex: 1; padding: 7px 8px; font-size: 12px; }
.selpanel { border-color: var(--gold); }

/* ── แอนิเมชันในภาพ ── */
.sparkle { animation: sp 2.6s ease-in-out infinite; }
@keyframes sp { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.pulse { animation: pl 2.2s ease-in-out infinite; }
@keyframes pl { 0%,100% { opacity: .3; } 50% { opacity: .85; } }
.sway { animation: sw 3.4s ease-in-out infinite; }
@keyframes sw { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.cart { animation: ct 6s ease-in-out infinite; }
@keyframes ct { 0%,100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
.spin { animation: spn 5s linear infinite; }
@keyframes spn { to { transform: rotate(360deg); } }
.smoke { opacity: 0; animation: sm 3.6s ease-out infinite; }
.smoke.s2 { animation-delay: 1.2s; } .smoke.s3 { animation-delay: 2.4s; }
@keyframes sm { 0% { opacity: .55; transform: translateY(0) scale(.5); } 100% { opacity: 0; transform: translateY(-26px) scale(1.5); } }
.worker { animation: wk 1.6s ease-in-out infinite; }
@keyframes wk { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.pick { animation: pk 1.2s ease-in-out infinite; transform-origin: left center; }
@keyframes pk { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }

/* ── หน้าตัวละคร ── */
.charcard { display: flex; gap: 14px; align-items: center;
  background: linear-gradient(140deg, #2a2318, var(--panel)); }
.charbig { background: radial-gradient(circle at 50% 70%, #4a3d27, #211c15); border-radius: 14px;
  padding: 10px 16px; border: 1px solid var(--line); }
.charstat { flex: 1; }
.toolshow { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.skinrow { padding: 8px 0; border-top: 1px solid var(--line); }
.skinrow:first-of-type { border-top: 0; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 6px; }
.skin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 9px;
  font-size: 12px; background: var(--panel2); border: 1px solid var(--line); }
.skin i { font-style: normal; font-size: 10.5px; color: var(--dim); }
.skin.owned { border-color: #5d5541; }
.skin.on { border-color: var(--gold); background: #3a2f16; }
.skin.on i { color: var(--gold); }
.dots { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.dot { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #0000; padding: 0; }
.dot.on { border-color: var(--gold); }

.skill { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.skill span { width: 62px; color: var(--dim); }
.skill .bar { flex: 1; height: 7px; background: var(--panel2); border-radius: 5px; overflow: hidden; }
.skill .bar i { display: block; height: 100%; background: var(--ok); }
.skill b { width: 34px; text-align: right; }

.sfbar { position: relative; height: 13px; background: var(--panel2); border-radius: 8px; overflow: hidden; }
.sfbar i { display: block; height: 100%; }
.sfbar i.warn { background: linear-gradient(90deg, #b8562e, var(--bad)); }
.sfbar i.good { background: linear-gradient(90deg, #2e7d5b, var(--ok)); }
.sfbar .mark { position: absolute; left: 76.9%; top: 0; bottom: 0; width: 2px; background: #fff6; }

.pricerow { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.pricerow span { width: 74px; color: var(--dim); }
.pricerow b { margin-left: auto; color: var(--gold); }
.price { color: var(--gold); min-width: 50px; text-align: right; }
.tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tb th, .tb td { text-align: left; padding: 6px 7px; border-bottom: 1px solid var(--line); }
.tb th { color: var(--dim); font-weight: 500; }
.tb tr.cur td { background: #3a2f16; }
.log { font-size: 12px; color: var(--dim); line-height: 1.8; }

/* ── หน้าต่างแบบ Ragnarok — เปิดทับโลก 3D (แทนที่แท็บล่างเดิม) ── */
#win:empty { display: none; }
/* ฉากมืดคลุมจอ — เลิกวาดแล้วตั้งแต่หน้าต่างเปิดพร้อมกันได้หลายบาน (คำสั่ง Stamp 1 ส.ค. 2026)
   หลายบาน + ฉากมืดหนึ่งผืน = บานที่อยู่ใต้ฉากถูกกดจนอ่านไม่ออก และคลิกโลกไม่ได้เลยทั้งที่ควรได้
   กฎยังอยู่เพราะ test/rpg-hud.js อ่าน z-index ของมันไปเทียบว่าแผงเมนูอยู่ใต้ชั้นหน้าต่างจริง */
.winbg { position: fixed; inset: 0; background: #000000a8; z-index: 60; }
/* ขนาดหน้าต่างคิดต่อบาน ไม่ใช่ขนาดเดียวทั้งเกม (คำสั่ง Stamp 1 ส.ค. 2026:
   "หน้า status มันไม่ต้องใหญ่ มันเป็นกล่องเล็ก ๆ แค่นี้เอง · ตอนนี้มันใหญ่ เทอะทะกันหมด")
   เดิมทุกบานกว้าง 560 สูงได้ถึง 88vh เท่ากันหมด — บานที่มีของ 6 บรรทัดก็ยังกินจอเท่าร้านค้า
   คุมด้วยตัวแปร --win-w/--win-h แล้วตั้งค่าต่อบานผ่าน [data-win] ข้างล่าง
   ทำที่ CSS ล้วนโดยตั้งใจ: ตาราง WINDOWS ใน ui.js ไม่ต้องรู้เรื่องขนาด และไม่ต้องแตะไฟล์นั้นเลย */
.winbox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 61;
  width: min(94vw, var(--win-w, 560px)); max-height: min(88vh, var(--win-h, 760px));
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid #6a6250; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px #000d, 0 0 0 1px #00000060; }
.win-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 15px;
  background: linear-gradient(#3a3324, #2a2419); border-bottom: 1px solid var(--line); }
.win-h .x { margin-left: auto; background: none; border: 0; font-size: 16px; padding: 2px 8px; color: var(--dim); }
.win-body { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
/* เปิดหลายบานพร้อมกัน — บานที่ไม่ได้อยู่บนสุดหรี่ลงนิดเดียว ให้ตาจับได้ว่ากำลังใช้บานไหนอยู่
   ใช้ opacity ตัวเดียว ไม่ใช่ filter/blur (สองอันนั้นบังคับให้เบราว์เซอร์แยกเลเยอร์ทั้งบาน = กินเฟรม) */
.winbox { transition: opacity .12s ease; }
#win .winbox:not(:last-child) { opacity: .82; }
#win .winbox:last-child { box-shadow: 0 24px 70px #000d, 0 0 0 1px #ffffff26; }
/* ── ขนาดประจำบาน ──────────────────────────────────────────────
   เกณฑ์: กว้างเท่าที่เนื้อหา "ต้องใช้" ไม่ใช่เท่าที่จอมี
   บานที่เป็นตาราง/ผัง ต้องการความกว้าง · บานที่เป็นรายการค่า ยิ่งแคบยิ่งอ่านเร็ว */
#win .winbox[data-win="stats"]   { --win-w: 452px; --win-h: 340px; }   /* กล่องค่าตัวเลขล้วน แบบ RO */
#win .winbox[data-win="me"]      { --win-w: 400px; --win-h: 560px; }
#win .winbox[data-win="bot"]     { --win-w: 420px; }
#win .winbox[data-win="job"]     { --win-w: 460px; --win-h: 560px; }
#win .winbox[data-win="options"] { --win-w: 480px; --win-h: 620px; }
#win .winbox[data-win="equip"]   { --win-w: 520px; }
#win .winbox[data-win="quest"]   { --win-w: 540px; --win-h: 620px; }
#win .winbox[data-win="skills"]  { --win-w: 660px; }                   /* ผังสกิลต้องเห็นสายพร้อมกัน */
#win .winbox[data-win="map"]     { --win-w: 660px; }
#win .winbox[data-win="codex"]   { --win-w: 700px; }                   /* หน้าเปิดอ่าน ยิ่งกว้างยิ่งดี */
/* ค่าตั้งต้นของบานที่ไม่ได้ระบุ (ร้านค้า/ศาลากลาง/ที่ว่าการ ฯลฯ) — เตี้ยกว่าเดิมเพราะ
   ตอนนี้เปิดหลายบานพร้อมกันได้ บานสูง 760 บานเดียวก็บังบานอื่นหมดแล้ว */
#win .winbox { --win-h: 660px; }

/* บานเล็กต้องแน่นจริง ไม่ใช่แค่แคบ — ระยะห่างของบานใหญ่ทำให้กล่อง 6 บรรทัดสูงเป็นสองเท่าของเนื้อ */
#win .winbox[data-win="stats"] .win-body,
#win .winbox[data-win="me"] .win-body,
#win .winbox[data-win="bot"] .win-body { padding: 7px; gap: 7px; }
#win .winbox[data-win="stats"] .card { padding: 7px 8px; }
#win .winbox[data-win="stats"] .card .h { font-size: 11.5px; margin-bottom: 5px; padding-bottom: 4px; }
/* ── ความหนาแน่นแบบกล่องสเตตัส RO ─────────────────────────────
   อ้างอิงที่ Stamp ส่งมา: กล่อง ~350x160 · สองคอลัมน์ (ค่าที่ลงแต้ม | ค่าที่ได้จริง) · แถวสูง ~18px
   ของเราสูงกว่านั้นเพราะมีบรรทัด "อีกกี่แต้มถึงก้อนถัดไป" ต่อแถว ซึ่งเป็นของที่เพิ่งทำและมีประโยชน์
   จึงไม่ตัดทิ้ง แต่บีบให้เหลือบรรทัดเดียวเล็ก ๆ แล้วคุมแถวไว้ที่ ~34px (เดิม 55px)
   ผลรวม: 6 แถว x 34 + หัว = พอดีในบานสูง 340 โดยไม่ต้องเลื่อน */
#win .winbox[data-win="stats"] .st-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
#win .winbox[data-win="stats"] .st-left { gap: 0; }
#win .winbox[data-win="stats"] .st-row {
  grid-template-columns: 34px 1fr auto; gap: 4px; padding: 1px 0;
  border-bottom: 1px solid #ececec;
}
#win .winbox[data-win="stats"] .st-name { font-size: 10px; }
#win .winbox[data-win="stats"] .st-val { font-size: 12px; }
#win .winbox[data-win="stats"] .st-up { min-width: 28px; padding: 0 5px !important;
  font-size: 11px !important; line-height: 1.05; }
#win .winbox[data-win="stats"] .st-up small { font-size: 7.5px; }
/* บรรทัดขั้นถัดไป: บรรทัดเดียว ตัดท้ายด้วย … ถ้ายาว — ในกล่องแคบ การตกบรรทัดคือที่มาของความสูงทั้งหมด */
#win .winbox[data-win="stats"] .st-next {
  font-size: 9px; line-height: 1.25; gap: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#win .winbox[data-win="stats"] .st-bar { flex: 0 0 22px; }
#win .winbox[data-win="stats"] .dv-row { font-size: 11px; padding: 1px 0; }
/* หัวบานบอกว่าเป็น "สเตตัส" อยู่แล้ว — หัวการ์ดซ้ำอีกชั้นคือบรรทัดที่เสียไปเปล่า ๆ ในกล่องเล็ก */
#win .winbox[data-win="stats"] .card > .h .dim { font-weight: 400; }

.win-h { cursor: grab; }
.win-h:active { cursor: grabbing; }

#toasts { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex;
  flex-direction: column; gap: 6px; width: min(92vw, 400px); pointer-events: none; }
.toast { background: #2c2a20; border: 1px solid var(--ok); border-radius: 10px; padding: 9px 13px;
  font-size: 13px; animation: pop .18s ease-out; box-shadow: 0 6px 20px #0009; }
.toast.bad { border-color: var(--bad); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (min-width: 700px) { html { font-size: 16px; } }