/* ═══ UI สไตล์ Ragnarok Online ═══
อ้างอิงภาพจริงที่ Stamp ส่งมา (Skill Tree window):
หน้าต่าง = พื้นสว่าง เส้นขอบบาง 1px สะอาด ไม่มีกรอบหนา ไม่มีมุมโค้งใหญ่
HUD = ยังเป็นแผงเข้มโปร่ง เพราะทับอยู่บนโลก 3D สีสด
ไอคอนทั้งหมดเป็น SVG (js/rpg/icons.js) — ห้ามอีโมจิ */
:root {
/* หน้าต่าง (สว่าง) */
--w-bg: #ececec;
--w-body: #f4f4f4;
--w-line: #6f6f6f;
--w-line-2: #a8a8a8;
--w-cell: #ffffff;
--w-ink: #262626;
--w-ink-2: #5a5a5a;
--w-ink-3: #8a8a8a;
--w-head-a: #fcfcfc;
--w-head-b: #d9d9d9;
--w-accent: #2f5f96; /* น้ำเงิน RO — ลิงก์/ค่าที่เลือก */
--w-red: #b02a2a; /* เลขที่ยังไม่เต็ม */
--w-green: #2c7a4b;
/* HUD (เข้ม) */
--h-bg: #10131ae8;
--h-line: #5a6273;
--h-ink: #e8e6df;
--h-ink2: #b8c0d0;
--h-gold: #f0c25a;
}
/* ── ไอคอน ── */
.ro-ic { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
.ro-ic.sm { width: 14px; height: 14px; }
.ro-ic.xs { width: 11px; height: 11px; }
.ro-ic.lg { width: 28px; height: 28px; }
/* ═══════════ หน้าต่างสไตล์ RO ═══════════ */
.winbox {
background: var(--w-bg);
border: 1px solid var(--w-line);
border-radius: 3px;
box-shadow: 0 10px 30px #000a;
color: var(--w-ink);
font-size: 13px;
}
.win-h {
display: flex; align-items: center; gap: 6px;
padding: 4px 5px 4px 9px;
background: linear-gradient(var(--w-head-a), var(--w-head-b));
border-bottom: 1px solid var(--w-line-2);
cursor: grab;
user-select: none;
}
.win-h:active { cursor: grabbing; }
.win-h b { font-size: 12.5px; font-weight: 700; color: var(--w-ink); flex: 1; letter-spacing: .01em; }
.win-h .ro-ic { color: var(--w-ink-2); }
.win-btn {
width: 15px; height: 15px; border-radius: 50%; padding: 0;
background: radial-gradient(circle at 40% 35%, #fdfdfd, #cfcfcf);
border: 1px solid #8f8f8f; display: grid; place-items: center; cursor: pointer;
}
.win-btn:hover { background: radial-gradient(circle at 40% 35%, #fff, #e6eef7); border-color: #6d8fb5; }
.win-btn:active { background: #d2d2d2; }
.win-btn .ro-ic { width: 9px; height: 9px; color: #4a4a4a; }
.win-body {
background: var(--w-body);
overflow-y: auto; padding: 9px;
display: flex; flex-direction: column; gap: 8px;
}
/* การ์ดในหน้าต่าง — เรียบ ไม่มีมุมโค้งใหญ่ */
.winbox .card {
background: var(--w-cell); border: 1px solid var(--w-line-2);
border-radius: 2px; padding: 9px 10px;
}
.winbox .card .h {
font-weight: 700; font-size: 12.5px; color: var(--w-ink);
margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid #e0e0e0;
display: flex; align-items: center; gap: 6px;
}
.winbox .card.goal { background: #fffbe8; border-color: #d8c78a; }
.winbox .dim { color: var(--w-ink-3); }
.winbox .small { font-size: 11.5px; line-height: 1.5; }
.winbox .big { font-size: 17px; }
.winbox .row { border-top: 1px solid #e6e6e6; padding: 7px 0; gap: 7px; }
.winbox .row:first-of-type { border-top: 0; }
.winbox b, .winbox .gold-t { color: var(--w-ink); }
.winbox .gold-t { color: #9a6f10; }
.winbox .cry-t { color: #1f6d96; }
.winbox .bad-t { color: var(--w-red); }
.winbox .ok-t { color: var(--w-green); }
.winbox .price { color: #9a6f10; font-weight: 700; }
/* ปุ่มในหน้าต่าง — สไตล์ Win95 เรียบๆ */
.winbox button {
font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 2px;
color: #202020; background: linear-gradient(#fbfbfb, #dedede);
border: 1px solid #8f8f8f; cursor: pointer;
}
.winbox button:hover:not(:disabled) { background: linear-gradient(#fff, #eaf1f8); border-color: #6d8fb5; }
.winbox button:active:not(:disabled) { background: linear-gradient(#d6d6d6, #ececec); }
.winbox button:disabled { opacity: .45; cursor: default; }
.winbox button.ghost { background: #f4f4f4; }
.winbox button.cry-btn { border-color: #6d8fb5; color: #1f6d96; }
.winbox input[type=number] {
background: #fff; color: var(--w-ink); border: 1px solid #9a9a9a;
border-radius: 2px; padding: 4px 6px; font-size: 12.5px; width: 68px;
}
.winbox input[type=number]:focus { outline: 2px solid var(--w-accent); outline-offset: -1px; }
/* ตาราง/แถบในหน้าต่าง */
.winbox .tb th, .winbox .tb td { border-bottom: 1px solid #e0e0e0; }
.winbox .tb th { color: var(--w-ink-3); }
.winbox .tb tr.cur td { background: #fff6dc; }
.winbox .bar, .winbox .qbar, .winbox .sfbar { background: #dcdcdc; border: 1px solid #b4b4b4; }
.winbox .derived { border-top: 1px solid #e0e0e0; }
.winbox .derived span { color: var(--w-ink-3); }
.winbox .log { color: var(--w-ink-2); }
.winbox .q { background: #eee; border: 1px solid #d0d0d0; }
/* ── ช่องไอเทม/สกิลแบบ RO: ไทล์ขาว เส้นบาง ไอคอนสีสด ── */
.tile-cell {
width: 34px; height: 34px; border: 1px solid #9d9d9d; border-radius: 2px;
background: var(--w-cell); display: grid; place-items: center; position: relative;
}
.tile-cell.empty { background: #fafafa; }
.tile-cell .ro-ic { width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 1px #0006); }
.tile-cell[data-plus]::after {
content: "+" attr(data-plus); position: absolute; right: 1px; bottom: 0;
font-size: 9px; font-weight: 700; color: #b02a2a; text-shadow: 0 0 2px #fff;
}
/* สีไทล์ตามเทียร์ (แทนอีโมจิเดิม) */
.tile-cell.tier1 { background: linear-gradient(150deg, #a98a5e, #8a6f48); }
.tile-cell.tier2 { background: linear-gradient(150deg, #5c87b8, #3f6a9a); }
.tile-cell.tier3 { background: linear-gradient(150deg, #7b5cb8, #5c3f9a); }
.tile-cell.tier4 { background: linear-gradient(150deg, #c9922e, #a8741a); }
.rar-common { color: var(--w-ink); }
.rar-fine { color: #2c7a4b; }
.rar-rare { color: #2f5f96; }
.rar-legend { color: #9a6f10; font-weight: 700; }
/* ═══════════ HUD (เข้มโปร่ง ทับโลก 3D) ═══════════ */
.ro-menu button {
background: linear-gradient(#2b3140, #171b25);
border: 1px solid var(--h-line); border-radius: 3px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ro-menu button .ro-ic { color: #d8c99a; }
.ro-menu button:hover { background: linear-gradient(#39415a, #1f2431); border-color: #8a7a4a; }
.ro-menu button:hover .ro-ic { color: #fff2cd; }
.ro-menu button:active { transform: translateY(1px); }
.ro-menu button span { font-size: 7.5px; color: var(--h-ink2); }
.ro-slot .ic-wrap { display: grid; place-items: center; }
.ro-slot .ro-ic { color: #d8c99a; }
.ro-slot.off .ro-ic { color: #6d7686; }
.ro-slot.aim .ro-ic { color: #bff0ff; }
/* ป้ายบอส/มินิบอส — ตัวอักษรแบบ RO ไม่ใช่อีโมจิ */
.tag-boss, .tag-mini {
font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
padding: 0 4px; border-radius: 2px; margin-left: 4px; vertical-align: 1px;
}
.tag-boss { background: #7a1f1f; color: #ffd9d0; }
.tag-mini { background: #6a521a; color: #ffe9b5; }
/* จุดสีวัตถุดิบ (แทนอีโมจิ 7 ตัว) */
.mat-dot {
width: 15px; height: 15px; border-radius: 3px; display: inline-block;
border: 1px solid #00000040; box-shadow: inset 0 1px 0 #ffffff50;
}
.m-jelly { background: #7cc94a; } .m-fang { background: #e8e0d0; }
.m-hide { background: #a9784f; } .m-silk { background: #cfd8e6; }
.m-bone { background: #f2efe4; } .m-ember { background: #ff8a3d; }
.m-core { background: #8ad8f0; }
.mat-dot.lg { width: 26px; height: 26px; border-radius: 4px; }
/* แถบทรัพยากรใน HUD */
.econ-row { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 10.5px; align-items: center; }
.econ-row > span { display: inline-flex; align-items: center; gap: 3px; }
.econ-row .ro-ic { width: 12px; height: 12px; }
.e-gold .ro-ic { color: var(--h-gold); }
.e-cry .ro-ic { color: #7fc7e8; }
.e-stam .ro-ic { color: #7fd1b9; }
.e-day .ro-ic { color: #cfc6b6; }
/* ปุ่มเฉพาะทางในหน้าต่าง — สืบสไตล์ Win95 เดียวกัน (ทับ .winbox button ที่กว้างกว่า) */
.winbox .up, .winbox .hb, .winbox .tab, .winbox .skin {
background: linear-gradient(#fbfbfb, #dedede); border: 1px solid #8f8f8f;
color: #202020; border-radius: 2px;
}
.winbox .up { min-width: 40px; padding: 5px 6px; font-size: 14px; font-weight: 700; line-height: 1.1; }
.winbox .up small { display: block; font-size: 9px; font-weight: 400; color: var(--w-ink-3); }
.winbox .up.off { opacity: .35; }
.winbox .hb { min-width: 46px; padding: 3px 6px; font-size: 10px; }
.winbox .hb.on { background: linear-gradient(#dcecff, #b9d4f0); border-color: #4a7fc1; color: #17456f; }
.winbox .tab.on { background: linear-gradient(#dcecff, #b9d4f0); border-color: #4a7fc1; color: #17456f; font-weight: 700; }
.winbox .skin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; font-size: 11.5px; }
.winbox .skin.on { background: linear-gradient(#fff3d4, #ffe6a8); border-color: #c9a24a; }
.winbox .skin i { font-style: normal; font-size: 10px; color: var(--w-ink-3); }
.winbox .skin.on i { color: #9a6f10; }
/* ปุ่มกลมบนแถบหัว ต้องชนะกฎปุ่มทั่วไปในหน้าต่าง */
.winbox .win-h .win-btn {
background: radial-gradient(circle at 40% 35%, #fdfdfd, #cfcfcf);
border: 1px solid #8f8f8f; border-radius: 50%; padding: 0; width: 15px; height: 15px;
}
.winbox .win-h .win-btn:hover { background: radial-gradient(circle at 40% 35%, #fff, #e6eef7); }
/* การ์ด/แถวอื่นๆ ในหน้าต่างให้เข้าโทนสว่าง */
.winbox .sk { background: var(--w-cell); border: 1px solid var(--w-line-2); }
.winbox .sk.lock { opacity: .5; }
.winbox .sk.has { border-color: #c9a24a; background: #fffdf5; }
.winbox .sk.ult { border-color: #b58a3a; background: #fff8e6; }
.winbox .sk-ic .ro-ic { color: #4a5568; }
.winbox .sk.has .sk-ic .ro-ic, .winbox .sk.ult .sk-ic .ro-ic { color: #9a6f10; }
.winbox .tag { background: #e8e8e8; color: var(--w-ink-2); }
.winbox .tag.passive { background: #e0efe4; color: #2c7a4b; }
.winbox .tag.buff { background: #e2eaf7; color: #2f5f96; }
.winbox .tag.ultt { background: #fdefc9; color: #9a6f10; }
.winbox .bagit, .winbox .slotbox, .winbox .craftrow, .winbox .wm-node, .winbox .acard, .winbox .tile {
background: var(--w-cell); border: 1px solid var(--w-line-2);
}
.winbox .craftrow { border: 0; border-top: 1px solid #e6e6e6; background: transparent; }
.winbox .craftrow:first-of-type { border-top: 0; }
.winbox .wm-node.here { background: #fff8e6; border-color: #c9a24a; }
.winbox .skillcol-h { border-bottom: 1px solid var(--w-line-2); color: var(--w-ink); }
.winbox .skillcol-h .ro-ic { color: #4a5568; }
.winbox .charbig { background: linear-gradient(160deg, #e9edf2, #d5dbe3); border: 1px solid var(--w-line-2); }
.winbox .charcard { background: var(--w-cell); }
.winbox .qbar i, .winbox .bar i { background: #4a90d9; }
.winbox .sfbar i.good { background: linear-gradient(90deg, #2c7a4b, #56b487); }
.winbox .sfbar i.warn { background: linear-gradient(90deg, #b06a2a, #d99a4a); }
.winbox .sfbar .mark { background: #00000030; }
.winbox .rarrow span { font-size: 11.5px; }
.winbox .killrow { border-top: 1px solid #e0e0e0; color: var(--w-ink-3); }
.winbox .toolshow { align-items: center; }
.winbox .selpanel { border-color: #c9a24a; background: #fffdf5; }
/* คลาสที่ประกอบชื่อจาก template — ประกาศไว้ให้ audit ตรวจเจอ */
.m- {} .tier {}
/* สีสกิลตามอาชีพในฮอตบาร์ */
.job-swordsman .ro-ic { color: #c9d4e6; }
.job-archer .ro-ic { color: #86d95e; }
.job-acolyte .ro-ic { color: #ffdf94; }
.job-mage .ro-ic { color: #7fc7f0; }
.job-thief .ro-ic { color: #b294f5; }
.job-merchant .ro-ic { color: #f0954e; }
.job-novice .ro-ic { color: #cfc6b6; }
/* ═══════════ หน้าสร้างตัวละคร (อ้างอิง Make Your Character ของ RO) ═══════════ */
.cc-screen { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto;
background: linear-gradient(160deg, #cfe0f2 0%, #eef4fa 45%, #dfe8f2 100%); padding: 18px; }
.cc-win { width: min(94vw, 780px); background: #f4f4f4; border: 1px solid #6f6f6f;
border-radius: 3px; box-shadow: 0 12px 36px #0004; overflow: hidden; }
.cc-head { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
background: linear-gradient(#fcfcfc, #d9d9d9); border-bottom: 1px solid #a8a8a8; }
.cc-title { font-size: 13px; font-weight: 700; color: #262626; }
.cc-sub { font-size: 10.5px; color: #8a8a8a; letter-spacing: .06em; }
.cc-body { padding: 14px; display: grid; gap: 14px;
grid-template-columns: 200px 1fr 152px; grid-template-areas:
"preview hex table" "opts opts opts" "note note note"; align-items: center; }
.cc-preview { grid-area: preview; display: flex; align-items: center; justify-content: center; gap: 4px; }
.cc-arrow { width: 22px; height: 34px; font-size: 11px; color: #3a5f8a; cursor: pointer;
background: linear-gradient(#fbfbfb, #dedede); border: 1px solid #8f8f8f; border-radius: 2px; }
.cc-arrow:hover { background: linear-gradient(#fff, #eaf1f8); border-color: #6d8fb5; }
.cc-doll { width: 132px; height: 190px; display: grid; place-items: center; position: relative;
background: linear-gradient(#ffffff, #e8eef5); border: 1px solid #b8c4d0; border-radius: 2px; }
.cc-doll canvas { width: 132px; height: 190px; display: block; position: relative; z-index: 1; }
.cc-doll img { width: 108px; height: 150px; object-fit: contain; object-position: bottom center; }
.cc-doll-base { position: absolute; bottom: 6px; width: 62px; height: 9px; border-radius: 50%;
background: radial-gradient(#00000022, #00000000 70%); }
.cc-hex { grid-area: hex; display: grid; justify-items: center; gap: 4px; }
.hexchart { --hex-grid: #b9c6d4; display: block; }
.hexchart .hex-fill { fill: #5b8fd0aa; stroke: #2f5f96; stroke-width: 1.6; }
.hexchart .hex-dot { fill: #2f5f96; }
.hexchart .hex-lb { font: 700 10px ui-monospace, Menlo, monospace; fill: #46566b; text-anchor: middle; letter-spacing: .04em; }
.cc-hexnote { font-size: 10.5px; color: #7b8794; text-align: center; }
.hexchart .hex-hit { fill: transparent; cursor: pointer; }
.hexchart .hex-hit:hover { fill: #2f5f9622; }
.cc-statbox { grid-area: table; display: grid; gap: 5px; justify-items: stretch; }
.cc-table { border-collapse: collapse; width: 100%; }
.cc-table th, .cc-table td { border: 1px solid #c4ccd4; padding: 2px 6px; font-size: 11.5px; }
.cc-table th { background: #e4eaf0; color: #46566b; text-align: left; font-family: ui-monospace, Menlo, monospace; }
.cc-table td { background: #fff; text-align: right; font-family: ui-monospace, Menlo, monospace;
font-variant-numeric: tabular-nums; color: #262626; }
.cc-table td.cc-adj { padding: 1px 3px; white-space: nowrap; }
.cc-mini { width: 19px; height: 19px; line-height: 1; font: inherit; font-size: 12px; color: #26466b;
background: linear-gradient(#fbfbfb, #dedede); border: 1px solid #8f8f8f; border-radius: 2px;
cursor: pointer; padding: 0; margin: 0 1px; }
.cc-mini:hover:not(:disabled) { background: linear-gradient(#fff, #eaf1f8); border-color: #6d8fb5; }
.cc-mini:disabled { color: #b0b0b0; cursor: default; opacity: .55; }
.cc-link { font: inherit; font-size: 10.5px; color: #2f5f96; background: none; border: 0;
padding: 0; cursor: pointer; text-decoration: underline; }
.cc-link:hover { color: #17436f; }
.cc-opts { grid-area: opts; display: grid; gap: 7px; border-top: 1px solid #ddd; padding-top: 10px; }
.cc-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #3a3a3a; }
.cc-row > span:first-child { width: 78px; color: #5a5a5a; flex: 0 0 auto; }
.cc-swatch { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-dot { width: 20px; height: 20px; border-radius: 3px; background: var(--c);
border: 1px solid #8f8f8f; cursor: pointer; padding: 0; }
.cc-dot.on { outline: 2px solid #2f5f96; outline-offset: 1px; }
.cc-segs { display: flex; }
.cc-seg { font: inherit; font-size: 11.5px; padding: 3px 16px; color: #262626; cursor: pointer;
background: linear-gradient(#fbfbfb, #dedede); border: 1px solid #8f8f8f; }
.cc-seg:first-child { border-radius: 2px 0 0 2px; }
.cc-seg:last-child { border-radius: 0 2px 2px 0; border-left: 0; }
.cc-seg.on { background: linear-gradient(#dceaf8, #b9d3ec); border-color: #4a7fc1; font-weight: 700; color: #17436f; }
.cc-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.cc-chip { font: inherit; font-size: 11px; padding: 3px 9px; color: #3a3a3a; cursor: pointer;
background: linear-gradient(#fbfbfb, #ededed); border: 1px solid #a8a8a8; border-radius: 2px; }
.cc-chip:hover { background: linear-gradient(#fff, #eaf1f8); border-color: #6d8fb5; }
.cc-chip.on { background: linear-gradient(#dceaf8, #b9d3ec); border-color: #4a7fc1; color: #17436f; font-weight: 700; }
#cc-name { flex: 1; max-width: 240px; font: inherit; font-size: 12.5px; padding: 4px 8px;
border: 1px solid #9a9a9a; border-radius: 2px; background: #fff; color: #262626; }
#cc-name:focus { outline: 2px solid #2f5f96; outline-offset: -1px; }
.cc-note { grid-area: note; font-size: 11.5px; color: #4a4a4a; background: #fffbe8;
border: 1px solid #d8c78a; border-radius: 2px; padding: 7px 9px; }
.cc-note .dim { display: block; color: #8a8a8a; margin-top: 2px; }
.cc-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px;
background: linear-gradient(#f0f0f0, #e2e2e2); border-top: 1px solid #b4b4b4; }
.w95 { font: inherit; font-size: 11.5px; padding: 4px 16px; color: #202020;
background: linear-gradient(#fbfbfb, #dedede); border: 1px solid #8f8f8f; border-radius: 2px; cursor: pointer; }
.w95:hover { background: linear-gradient(#fff, #eaf1f8); border-color: #6d8fb5; }
.w95.primary { font-weight: 700; border-color: #4a7fc1; }
/* จอแคบ — ต้องอยู่ "ท้ายสุด" ของบล็อกนี้ media query ไม่เพิ่ม specificity
ถ้าวางก่อนกฎฐาน (.cc-doll ฯลฯ) กฎที่มาทีหลังจะชนะ แล้ว override มือถือกลายเป็นโค้ดตาย */
@media (max-width: 640px) {
/* minmax(0,1fr) = ยอมให้คอลัมน์หดเล็กกว่าเนื้อหา ไม่งั้นกราฟ 200px ดันจนปุ่มสเตตัสหลุดกรอบ */
.cc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "preview hex" "table table" "opts opts" "note note"; }
.cc-preview, .cc-hex, .cc-statbox, .cc-opts, .cc-row { min-width: 0; }
.cc-preview { gap: 2px; }
.cc-doll, .cc-doll canvas { width: 108px; height: 156px; }
.hexchart { width: 100%; height: auto; }
.cc-row { flex-wrap: wrap; }
}
/* ═══════════ หน้าต่างสวมใส่ + สเตตัส (อ้างอิงหน้าต่าง Equip ของ RO) ═══════════ */
.eq-card { padding: 10px !important; }
.eq-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
@media (max-width: 560px) { .eq-grid { grid-template-columns: 1fr 1fr; } .eq-doll { grid-column: 1 / -1; order: -1; } }
.eq-col { display: grid; gap: 6px; }
.eq-slot { display: flex; gap: 7px; align-items: center; padding: 4px;
border: 1px solid transparent; border-radius: 2px; }
.eq-slot.filled { cursor: pointer; }
.eq-slot.filled:hover { background: #eef3f9; border-color: #b9cde0; }
.eq-cell { flex: 0 0 auto; }
.eq-cell .tile-cell.empty { background: #f2f2f2; border-style: dashed; }
.eq-cell .tile-cell.empty .ro-ic { color: #b4b4b4; filter: none; }
.eq-lb { min-width: 0; display: grid; gap: 1px; font-size: 11.5px; line-height: 1.35; }
.eq-lb b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-doll { width: 116px; display: grid; justify-items: center; gap: 2px; padding: 8px 6px;
background: linear-gradient(#ffffff, #e9eef4); border: 1px solid #b8c4d0; border-radius: 2px; }
.eq-doll img { width: 78px; height: 104px; object-fit: contain; object-position: bottom center; }
.eq-doll-name { font-size: 12px; font-weight: 700; color: var(--w-ink); }
.eq-doll-job { font-size: 10.5px; color: var(--w-ink-3); }
.eq-warn { font-size: 10px; color: #fff; background: #b02a2a; border-radius: 2px; padding: 1px 6px; margin-top: 2px; }
.st-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; }
@media (max-width: 520px) { .st-grid { grid-template-columns: 1fr; } }
.st-left { display: grid; gap: 3px; }
.st-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 6px;
padding: 2px 0; border-bottom: 1px solid #eee; }
.st-name { font-family: var(--f-data, ui-monospace), Menlo, monospace; font-size: 11px;
font-weight: 700; color: #46566b; letter-spacing: .04em; }
.st-val { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
font-size: 13px; color: var(--w-ink); }
.st-val i { font-style: normal; color: #2c7a4b; font-size: 11px; margin-left: 2px; }
.st-up { min-width: 34px; padding: 2px 6px !important; font-size: 12px !important; font-weight: 700; line-height: 1.1; }
.st-up small { display: block; font-size: 8.5px; font-weight: 400; color: #8a8a8a; }
.st-up.off { opacity: .3; pointer-events: none; }
.st-right { display: grid; gap: 3px; align-content: start; }
.dv-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: baseline;
padding: 3px 0; border-bottom: 1px solid #eee; font-size: 11.5px; }
.dv-row span { color: var(--w-ink-3); font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; }
.dv-row b { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
font-size: 12.5px; color: var(--w-ink); text-align: right; }
/* ═══════════ เคอร์เซอร์ตามสิ่งที่ชี้ ═══════════
ปกติ = ลูกศรเมาส์ · ชี้มอน = ดาบ · ชี้ NPC = บอลลูนคุย · ชี้ซุ้มวาร์ป = ประตู */
#rpg-canvas { cursor: default; }
.rpg.cur-mob #rpg-canvas {
cursor: url('data:image/svg+xml;utf8,') 6 24, crosshair;
}
.rpg.cur-npc #rpg-canvas {
cursor: url('data:image/svg+xml;utf8,') 6 6, pointer;
}
.rpg.cur-warp #rpg-canvas {
cursor: url('data:image/svg+xml;utf8,') 15 15, pointer;
}
.rpg.aiming #rpg-canvas { cursor: crosshair; }
/* แผนที่ขยายเมื่อคลิกมินิแมป */
.ro-map #minimap { cursor: zoom-in; transition: width .18s, height .18s; }
.ro-map.big { z-index: 30; }
.ro-map.big #minimap { width: 420px; height: 420px; cursor: zoom-out; }
@media (max-width: 560px) { .ro-map.big #minimap { width: min(78vw, 320px); height: min(78vw, 320px); } }
/* แถบ Job EXP — แยกสีจาก Base EXP ให้อ่านออกทันที */
#rpg-mount .ro-bar.jxp i { background: linear-gradient(180deg,#8fd4ff,#3d8fd6); }
#rpg-mount .ro-lv b.jlv { color:#5aa9e6; font-size:11px; }
/* ═══ แผนที่โลกแบบกริด (RO) ═══ */
#win .wm-grid { display:grid; gap:6px; margin:8px 0; }
#win .wm-cell { display:flex; flex-direction:column; gap:4px; }
#win .wm-cell.empty { min-height:8px; }
#win .wm-tile { position:relative; background:#f6f4ef; border:1px solid #8a8a8a; border-radius:2px;
padding:9px 7px 8px; text-align:center; min-height:52px; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:2px; }
#win .wm-tile.city { background:#fdf6e0; border-color:#b08a3c; box-shadow:inset 0 0 0 1px #f0e2b8; }
#win .wm-tile.here, #win .wm-dun.here { outline:2px solid #d24a3a; outline-offset:-1px; }
#win .wm-tile b, #win .wm-dun b { font-size:11px; line-height:1.25; color:#2a2a2a; }
#win .wm-lv { display:block; font-size:9px; color:#6a6a6a; letter-spacing:.02em; }
#win .wm-you, #win .wm-home { position:absolute; top:2px; }
#win .wm-you { right:3px; } #win .wm-home { left:3px; }
/* ขีดบอกทิศที่มีวาร์ป — ยื่นออกไปชนแมปข้างๆ */
#win .wm-w { position:absolute; background:#5a8fc4; }
#win .wm-w.n, #win .wm-w.s { left:50%; width:3px; height:7px; margin-left:-1.5px; }
#win .wm-w.w, #win .wm-w.e { top:50%; height:3px; width:7px; margin-top:-1.5px; }
#win .wm-w.n { top:-7px; } #win .wm-w.s { bottom:-7px; }
#win .wm-w.w { left:-7px; } #win .wm-w.e { right:-7px; }
#win .wm-dun { position:relative; background:#efe8f6; border:1px dashed #8a6fb0; border-radius:2px;
padding:5px 6px; text-align:center; }
#win .wm-down { display:block; font-size:9px; color:#7a5fa0; }
#win .wm-legend { display:flex; flex-wrap:wrap; gap:10px; font-size:10px; color:#5a5a5a; margin-top:6px; }
#win .wm-legend .lg { display:inline-block; width:10px; height:10px; vertical-align:-1px; margin-right:3px;
border:1px solid #8a8a8a; border-radius:2px; }
#win .lg.city { background:#fdf6e0; border-color:#b08a3c; }
#win .lg.field { background:#f6f4ef; }
#win .lg.dun { background:#efe8f6; border:1px dashed #8a6fb0; }
#win .lg.warp { background:#5a8fc4; border-color:#5a8fc4; }
#win .wm-exits { display:flex; flex-direction:column; gap:3px; margin:6px 0; }
#win .wm-exit { display:flex; align-items:baseline; gap:6px; padding:3px 5px; background:#f2f0eb;
border:1px solid #cfcac0; border-radius:2px; font-size:11px; }
#win .wm-dir { min-width:70px; font-size:10px; font-weight:700; color:#fff; background:#7a8a9a;
border-radius:2px; padding:1px 5px; text-align:center; }
#win .wm-dir.n { background:#4a7ab0; } #win .wm-dir.s { background:#b0764a; }
#win .wm-dir.w { background:#6a9a5a; } #win .wm-dir.e { background:#a0679a; }
#win .wm-dir.down { background:#7a5fa0; } #win .wm-dir.up { background:#4a9a8a; }
/* ═══ อาร์ตเวิร์กที่เจนด้วย Gemini (assets/art/) ═══ */
/* กฎ: ไม่มีไฟล์รูป → art.js ลบ .artbox ทิ้ง หน้าตาเดิมกลับมาเป๊ะ */
#win .artbox { margin: 8px 0; border: 1px solid var(--w-line, #b8b2a6); border-radius: 3px;
overflow: hidden; background: #e4e0d6; line-height: 0; }
#win .artbox .art { width: 100%; height: auto; display: block; }
#win .artbox.map-art { aspect-ratio: 16/9; }
#win .artbox.map-art .art { height: 100%; object-fit: cover; }
#win .artbox.job-art { aspect-ratio: 3/4; max-width: 260px; margin-inline: auto; }
#win .artbox.job-art.sm { max-width: 140px; float: right; margin: 0 0 6px 10px; aspect-ratio: 3/4; }
#win .artbox.job-art .art { height: 100%; object-fit: cover; }
#win .jobcard { overflow: hidden; }
/* ช่องแผนที่โลกที่มีภาพประจำแมปเป็นพื้น */
#win .wm-tile, #win .wm-dun { background-size: cover; background-position: center; }
/* หน้าจอเริ่มเกม — คีย์อาร์ตเต็มจอ */
.start-screen.has-art { background-size: cover; background-position: center;
background-repeat: no-repeat; }
.start-screen.has-art .start-box { background: rgba(12,14,20,.62); backdrop-filter: blur(3px);
padding: 30px 42px; border-radius: 8px; border: 1px solid rgba(255,230,163,.28);
box-shadow: 0 18px 50px rgba(0,0,0,.5); }
/* แถบเป้าหมาย — รูปมอน + ธาตุ */
#rpg-mount #target-bar.on { display: flex; align-items: center; gap: 9px; }
#rpg-mount #target-bar .tface { width: 46px; height: 46px; border-radius: 3px; object-fit: cover;
border: 1px solid #6f6f6f; background: #2a2a2a; flex: 0 0 auto; }
#rpg-mount #target-bar .tinfo { flex: 1 1 auto; min-width: 0; }
#rpg-mount .tel { font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 5px;
color: #fff; vertical-align: 1px; }
#rpg-mount .el-neutral { background: #8a8378; } #rpg-mount .el-fire { background: #d2542e; }
#rpg-mount .el-water { background: #3f8fc4; } #rpg-mount .el-earth { background: #7a9a48; }
#rpg-mount .el-wind { background: #4faa9a; } #rpg-mount .el-poison { background: #8a5aa8; }
#rpg-mount .el-undead { background: #6a6a7a; }
/* ══ ART WIRING ══ */
/* อาร์ตเวิร์กที่เจนด้วย Gemini (assets/art/) — ไม่มีไฟล์รูปก็ต้องไม่พัง */
#win .artbox { margin: 8px 0; border: 1px solid #b8b2a6; border-radius: 3px;
overflow: hidden; background: #e4e0d6; line-height: 0; }
#win .artbox .art { width: 100%; height: auto; display: block; }
#win .artbox.map-art { aspect-ratio: 16/9; }
#win .artbox.map-art .art { height: 100%; object-fit: cover; }
#win .artbox.job-art { aspect-ratio: 3/4; max-width: 260px; margin-inline: auto; }
#win .artbox.job-art .art { height: 100%; object-fit: cover; }
/* การ์ดอาชีพ: รูปลอยชิดขวา เนื้อหาไหลปกติในความกว้างที่เหลือ
(ไม่ใช้ float — ไม่ดันการ์ดให้สูงตาม · ไม่ใช้ grid-row 1/-1 — ไม่มี explicit row เลยยุบเหลือแถวเดียว) */
#win .jobcard { position: relative; padding-right: 126px; min-height: 159px; }
#win .jobcard > .artbox.job-art.sm { position: absolute; top: 10px; right: 10px;
width: 104px; height: 139px; max-width: none; aspect-ratio: auto; margin: 0; }
#win .wm-tile-art, #win .wm-dun { background-size: cover; background-position: center; }
/* แถบเป้าหมาย — รูปมอน + ธาตุ */
#rpg-mount #target-bar.on { display: flex; align-items: center; gap: 9px; }
#rpg-mount #target-bar .tface { width: 46px; height: 46px; border-radius: 3px; object-fit: cover;
border: 1px solid #6f6f6f; background: #2a2a2a; flex: 0 0 auto; }
#rpg-mount #target-bar .tinfo { flex: 1 1 auto; min-width: 0; }
#rpg-mount .tel { font-size: 10px; padding: 1px 6px; border-radius: 8px; margin-left: 5px;
color: #fff; vertical-align: 1px; }
#rpg-mount .el-neutral { background: #8a8378; } #rpg-mount .el-fire { background: #d2542e; }
#rpg-mount .el-water { background: #3f8fc4; } #rpg-mount .el-earth { background: #7a9a48; }
#rpg-mount .el-wind { background: #4faa9a; } #rpg-mount .el-poison { background: #8a5aa8; }
#rpg-mount .el-undead { background: #6a6a7a; }
/* หน้าจอโหลดตอนข้ามแมป */
#rpg-mount #maploader { position: absolute; inset: 0; z-index: 60; opacity: 0; pointer-events: none;
transition: opacity .28s ease; background: #0d0f14; overflow: hidden; }
#rpg-mount #maploader.on { opacity: 1; }
#rpg-mount #maploader img { width: 100%; height: 100%; object-fit: cover; }
#rpg-mount #maploader .ml-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 30px 24px;
background: linear-gradient(transparent, rgba(8,10,14,.9)); color: #fff; text-align: center; }
#rpg-mount #maploader .ml-txt b { display: block; font-size: 26px; letter-spacing: 1px;
text-shadow: 0 2px 10px #000a; }
#rpg-mount #maploader .ml-txt span { display: block; font-size: 13px; color: #ffe6a3; margin-top: 3px; }
#rpg-mount #maploader .ml-txt i { display: block; font-size: 12px; color: #c8d0dc; margin-top: 5px;
font-style: normal; opacity: .85; }
/* คู่มือ — รูปมอนทับไอคอน (รูปโหลดไม่ขึ้น → เห็นไอคอนเดิม) */
#win .tile-cell.mobface { position: relative; width: 52px; height: 52px; padding: 0;
overflow: hidden; border-radius: 4px; }
#win .tile-cell.mobface img { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
object-fit: cover; display: block; }
#win .tile-cell.mobface svg { position: relative; z-index: 1; }
/* ═══════════════════════════════════════════════════════════════════
POLISH PASS — ทำให้ HUD ดู "เกมสำเร็จรูป" ไม่ใช่ WebGL demo
บล็อกนี้ต้องอยู่ท้ายไฟล์เสมอ: rpg.css ฮาร์ดโค้ดสีน้ำเงินเข้มไว้ทั้งไฟล์
ทับได้ด้วยลำดับโหลดอย่างเดียว (specificity เท่ากัน) — แทรกกลางแล้วแพ้
═══════════════════════════════════════════════════════════════════ */
/* ── C3 · พาเลตอุ่นแบบ RO ────────────────────────────────────────────
เดิม HUD เป็นน้ำเงินอมเทา (#10131a) ซึ่งชนกับท้องฟ้า/น้ำในฉาก 3D จนแผงจม
โทนน้ำตาลทองตัดกับฉากสว่างได้ทุกแมป และเป็นภาษาภาพเดียวกับหน้าต่างครีม */
:root {
--h-bg: #241c12ec; /* พื้นแผง — ทึบพอให้ตัวอักษรอ่านออกบนฉากสว่าง */
--h-bg-2: #34291aec;
--h-line: #8a7346;
--h-edge: #c9a24a; /* ขอบทองตอนเน้น (เป้าหมาย/ปุ่มที่เลือก) */
--h-ink: #f4ead6;
--h-ink2: #cbb891;
--h-gold: #ffd77a;
/* แถบสามเส้นหลัก — ต้องแยกออกจากกันได้ด้วยสีล้วน ไม่ต้องอ่านตัวหนังสือ */
--bar-hp-a: #ff6f5e; --bar-hp-b: #a81c1c;
--bar-sp-a: #7ac6ff; --bar-sp-b: #1f56b8;
--bar-xp-a: #ffe485; --bar-xp-b: #c08a12;
--bar-jx-a: #9ee0ff; --bar-jx-b: #2f7fc4;
/* ขอบ+เงาในของแผง — ประกาศครั้งเดียวแล้วใช้ซ้ำทุกแผง HUD */
--h-inset: inset 0 1px 0 #ffffff22, inset 0 0 0 1px #00000055;
--h-drop: 0 4px 14px #000000a0;
--h-tsh: 0 1px 2px #000000cc; /* text-shadow ดำบาง — คมบนพื้นโปร่ง */
}
.ro-char, .ro-map, .ro-quest, .ro-chat, .target-bar, .castbar, .npc-dlg,
.ro-slot, .ro-menu button, .rpg-hint, .peril-box, .travelbar, .alertline, .combo {
color: var(--h-ink);
text-shadow: var(--h-tsh);
}
.ro-char, .ro-map, .ro-quest, .ro-chat {
background: linear-gradient(var(--h-bg-2), var(--h-bg));
border: 1px solid var(--h-line); border-radius: 4px;
box-shadow: var(--h-inset), var(--h-drop);
}
.ro-char-top b { color: #fff4dd; letter-spacing: .01em; }
.ro-job { color: var(--h-gold); }
.ro-chat-body div { color: #ddd0b6; }
.ro-chat-tabs span { background: #1c150ce0; color: #a2947a; }
.ro-chat-tabs b { background: #46381fe8; color: #ffeccd; }
.ro-map-top .dim, .ro-quest .dim { color: var(--h-ink2); }
#minimap { border-radius: 3px; box-shadow: inset 0 0 0 1px #00000070; }
/* แถบสถานะ — ขอบคม 1px + เงาใน ให้แถบดู "จม" ในราง ไม่ใช่แปะทับ */
.ro-bar {
background: #120d07; border: 1px solid #00000090; border-radius: 2px;
box-shadow: inset 0 1px 2px #000000b0, 0 1px 0 #ffffff14;
}
.ro-bar i { border-radius: 1px; box-shadow: inset 0 1px 0 #ffffff55, inset 0 -3px 4px #00000040; }
.ro-bar.hp i { background: linear-gradient(var(--bar-hp-a), var(--bar-hp-b)); }
.ro-bar.sp i { background: linear-gradient(var(--bar-sp-a), var(--bar-sp-b)); }
.ro-bar.xp i { background: linear-gradient(var(--bar-xp-a), var(--bar-xp-b)); }
.ro-bar.mob i { background: linear-gradient(var(--bar-hp-a), #7a1414); }
#rpg-mount .ro-bar.jxp i { background: linear-gradient(var(--bar-jx-a), var(--bar-jx-b)); }
.ro-bar span, .ro-bar em { color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000c; }
.ro-lv b { color: var(--h-gold); text-shadow: var(--h-tsh); }
#rpg-mount .ro-lv b.jlv { color: var(--bar-jx-a); }
/* ── C4b · แถบหลอน — เลือดลดฮวบแล้วมีเงาไล่ตามลงมา ตาจับได้ว่า "เพิ่งเสียไปเท่านี้"
ต้องซ้อนหลังแถบจริง: .ro-bar i เดิมเป็น block ไหลตามกัน ถ้าไม่ absolute จะดันบรรทัด */
.ro-bar > i.ghost {
position: absolute; left: 0; top: 0; height: 100%; z-index: 0;
background: #ffffff5c; box-shadow: none;
transition: width .45s ease-out .12s; /* หน่วง .12s ให้แถบจริงลงไปก่อน แล้วเงาค่อยตาม */
}
.ro-bar > i { position: relative; z-index: 1; }
/* ตัวเลขในแถบต้องขึ้นก่อนแถบสี: พอ .ro-bar>i ได้ z-index:1 มันจะแซง span/em ที่เป็น auto
(positioned เหมือนกัน) แล้วเลือดบังตัวเลขทันที — ต้องยกกลับขึ้นมาเอง */
.ro-bar span, .ro-bar em { z-index: 2; }
.ro-bar.hp > i.ghost { background: #ff9a8a70; }
.ro-bar.sp > i.ghost { background: #9ed0ff60; }
/* บัฟ/เควส/คำใบ้ */
.buffchip { background: #2c2214e0; border: 1px solid var(--h-line); border-radius: 3px; }
.buffchip i, .buffchip .ro-ic { color: var(--h-gold); }
.qh { color: #ffe2a0; }
.qrow b, .qticker b, .qpt { color: var(--h-gold); }
.qbar { background: #120d07; box-shadow: inset 0 1px 2px #000000b0; }
.qbar i { background: linear-gradient(#b8e87a, #5f9a2c); }
.qzone { color: #c9b892; }
.rpg-hint { background: #1c150cd0; border: 1px solid var(--h-line); color: var(--h-ink2); padding: 3px 12px; }
/* แถบเป้าหมาย — ขอบแดงเข้มบอก "นี่คือศัตรู" ไม่ต้องอ่านชื่อ */
.target-bar {
background: linear-gradient(var(--h-bg-2), var(--h-bg));
border: 1px solid #a05a3a; border-radius: 4px;
box-shadow: var(--h-inset), var(--h-drop);
}
.castbar {
background: #120d07; border: 1px solid var(--h-line); border-radius: 3px;
box-shadow: inset 0 1px 3px #000000b0, var(--h-drop);
}
.castbar i { background: linear-gradient(#e6c0ff, #8a5fc9); }
/* ปุ่มฮอตบาร์/เมนู — กรอบทองบาง ๆ ตอน hover ให้รู้ว่ากดได้ */
.ro-slot {
background: linear-gradient(var(--h-bg-2), var(--h-bg));
border: 1px solid var(--h-line); border-radius: 4px;
box-shadow: var(--h-inset), 0 2px 8px #00000090;
transition: border-color .12s, box-shadow .12s, transform .08s;
}
.ro-slot:hover:not(.empty) { border-color: var(--h-edge); box-shadow: var(--h-inset), 0 0 10px #c9a24a55; }
.ro-slot:active:not(.empty) { transform: translateY(1px); }
.ro-slot .fk { color: #a2947a; }
.ro-slot .nm { color: var(--h-ink2); }
.ro-slot .lv { color: var(--h-gold); }
.ro-slot.ration { border-color: #b0863c; }
.ro-menu button {
background: linear-gradient(var(--h-bg-2), var(--h-bg));
border: 1px solid var(--h-line); border-radius: 4px;
box-shadow: var(--h-inset), 0 2px 8px #00000090;
}
.ro-menu button:hover { background: linear-gradient(#4a3a22, #2c2114); border-color: var(--h-edge); }
.ro-menu button span { color: var(--h-ink2); }
/* ป้ายชื่อ NPC / ซุ้มวาร์ป */
.ntag { background: #1c150cc0; border-color: var(--h-line); color: #ffe6a3; }
.ntag.near { background: #5a4212e0; border-color: var(--h-edge); color: #fff4d4; }
.ptag { background: #14251fc0; border-color: #4a9a8a; color: #b8f0e0; }
/* ── C2 · บั๊กโลโก้หน้าไตเติล ─────────────────────────────────────────
ต้นเหตุ: main.js ใส่ ic('anvil') ลง .start-logo แต่ ic() คืน