/* =====================================================================
 * v37_ui.css — ปาร์ตี้ 6 คน • วอลเปเปอร์โทรศัพท์ • กระเป๋า 8×5 • อุปกรณ์ • CP • แท็บสกิล • Skill Tree คอสมิก • ทวีป
 * ===================================================================== */

/* ---------- 1) ปาร์ตี้: แถวเดียว ครบ 6 คน ---------- */
.pm-list.pm6 { max-height: none; overflow: visible; margin: 6px 0; }
.pm6 .pm-row { display: grid !important; align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) 58px auto; grid-template-rows: auto; gap: 0 8px; padding: 6px 8px; margin-bottom: 4px; min-height: 34px; }
.pm6 .pm-row b { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.pm6 .pm-row small { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm6 .pm-row .mini-bar { grid-column: 3; grid-row: 1; height: 6px; }
.pm6 .pm-row button { grid-column: 4; grid-row: 1; padding: 2px 8px; }
.pm6 .pm-row.me .mini-bar { grid-column: 3 / span 2; }
.win[data-win="party"] .row.gap select { flex: 1; min-width: 0; }

/* ---------- 2) วอลเปเปอร์ Pixel Phone ---------- */
#pxp .pxp-frame { background-image: var(--pxp-wall, none); background-size: cover; background-position: center; }
#pxp .pxp-frame::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%, transparent 70%, rgba(255,255,255,.04)); }
#pxp .pxp-frame:not(:has(.pxp-home)) { background-image: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), var(--pxp-wall, none); }
#pxp .pxp-app i { box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
#pxp .pxp-big { text-shadow: 0 2px 12px rgba(80,0,120,.45); }

/* ---------- 3) กระเป๋า 8 × 5 ---------- */
.inv-grid.inv8 { grid-template-columns: repeat(8, 46px); max-height: calc(46px * 5 + 3px * 4 + 2px); overflow-y: auto; overflow-x: hidden; padding: 1px 2px 1px 1px; scrollbar-width: thin; }
.inv-grid.inv8 .empty-msg { grid-column: 1 / -1; }
.win[data-win="inventory"] .inv-bar { flex-wrap: nowrap; }

/* ---------- 4) อุปกรณ์ ---------- */
.win[data-win="equip"] .win-body { overflow-x: hidden; }
.eq-mid { position: relative; padding-top: 32px !important; }
.eq-cp { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 999px; background: linear-gradient(180deg, rgba(20,16,4,.92), rgba(0,0,0,.85)); border: 1px solid rgba(255,215,64,.7); color: #fff; white-space: nowrap; box-shadow: 0 0 12px rgba(255,215,64,.25), inset 0 1px 0 rgba(255,255,255,.08); }
.eq-cp small { font-size: 9.5px; font-weight: 900; letter-spacing: 1px; color: #1a1200; background: linear-gradient(180deg, #ffe57a, #ffb300); border-radius: 999px; padding: 2px 7px; line-height: 1.2; }
.eq-cp b { font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .6px; font-variant-numeric: tabular-nums; line-height: 1.2; text-shadow: 0 0 8px rgba(255,215,64,.45); }
.win[data-win="equip"] .sub-title { margin: 6px 0 3px; }
.win[data-win="equip"] .eq-acc { margin-top: 2px; padding: 4px; gap: 2px 4px; }
.eq-cash.eq7 { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; padding: 4px; background: #0e0e10; border: 1px solid var(--lx-line, #333); border-radius: 3px; }
.eq-cash.eq7 .eq-cell { min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.eq-cash.eq7 .slot { width: 42px; height: 42px; } .eq-cash.eq7 .slot img { width: 32px; height: 32px; }
.eq-cash.eq7 label { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 8px; letter-spacing: 0; }
.win[data-win="equip"] .eq-acc label { white-space: nowrap; }

/* ---------- 5) สเตตัส CP ---------- */
.st-cp { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; padding: 8px 10px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,193,7,.16), rgba(255,79,163,.12)); border: 1px solid rgba(255,215,64,.5); }
.st-cp span { font-size: 10px; letter-spacing: 1.5px; color: #ffd740; font-weight: 800; }
.st-cp b { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #fff; text-shadow: 0 0 8px rgba(255,215,64,.6); }

/* ---------- 6) แท็บสกิลบรรทัดเดียว ---------- */
.tabs.sk1 { flex-wrap: nowrap; overflow: hidden; }
.tabs.sk1 .tab { flex: 1 1 0; min-width: 0; padding: 6px 2px; white-space: nowrap; text-align: center; letter-spacing: .5px; font-size: 10.5px; }
.tabs.sk1 .tab.sk-tree { color: #b388ff; font-weight: 800; }
.tabs.sk1 .tab.sk-tree:hover { color: #fff; text-shadow: 0 0 8px #b388ff; }
.sk-job { margin: -2px 0 4px; font-size: 11px; color: #ffd740; font-weight: 700; letter-spacing: .5px; }

/* ---------- 7) Skill Tree คอสมิก ---------- */
.win[data-win="tree"] { border-color: rgba(179,136,255,.55) !important; box-shadow: 0 0 0 1px rgba(124,77,255,.25), 0 14px 40px rgba(20,0,60,.7), 0 0 40px rgba(124,77,255,.25) !important; }
.win[data-win="tree"] .win-head { background: linear-gradient(90deg, #1a0f3d, #2b1466 50%, #0d2a55); }
.win[data-win="tree"] .win-body { background: radial-gradient(ellipse at 20% 0%, rgba(124,77,255,.28), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(0,188,255,.18), transparent 55%), #070a1a; color: #e8e6ff; }
.win[data-win="tree"] .tree-head { padding: 6px 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(179,136,255,.3); backdrop-filter: blur(4px); }
.win[data-win="tree"] .tree-head b { color: #ffd740; }
.win[data-win="tree"] .hint { color: rgba(220,215,255,.7) !important; }
.tree-wrap.cosmic { position: relative; overflow: hidden; border-radius: 22px; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 4px auto; background: radial-gradient(circle at 50% 50%, #2a1b5e 0%, #120c33 38%, #05061a 72%); box-shadow: 0 0 0 2px rgba(179,136,255,.35), 0 0 30px rgba(124,77,255,.45), inset 0 0 60px rgba(0,0,0,.8); }
.tree-wrap.cosmic #tree-cv { position: relative; z-index: 2; width: 100%; height: 100%; border: 0; border-radius: 22px; background: transparent; }
.cz-st, .cz-neb { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cz-st.s1 { background-image: radial-gradient(1px 1px at 12px 20px, #fff, transparent), radial-gradient(1px 1px at 70px 90px, #cfe8ff, transparent), radial-gradient(1.5px 1.5px at 130px 40px, #fff, transparent), radial-gradient(1px 1px at 160px 150px, #ffe0f5, transparent), radial-gradient(1px 1px at 40px 170px, #fff, transparent), radial-gradient(1.2px 1.2px at 100px 130px, #e0d6ff, transparent); background-size: 180px 180px; animation: czTw 3.2s ease-in-out infinite; }
.cz-st.s2 { background-image: radial-gradient(2px 2px at 30px 60px, #fff, transparent), radial-gradient(1.5px 1.5px at 200px 20px, #b3e5fc, transparent), radial-gradient(2px 2px at 150px 210px, #ffd6f0, transparent), radial-gradient(1.5px 1.5px at 250px 140px, #fff, transparent); background-size: 290px 290px; animation: czTw 4.6s ease-in-out infinite reverse, czDrift 60s linear infinite; }
.cz-neb { inset: -20%; background: conic-gradient(from 0deg, rgba(255,79,163,.16), rgba(124,77,255,.05), rgba(0,188,255,.16), rgba(124,77,255,.05), rgba(255,79,163,.16)); filter: blur(28px); animation: czSpin 50s linear infinite; }
@keyframes czTw { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes czDrift { to { background-position: 290px 145px; } }
@keyframes czSpin { to { transform: rotate(360deg); } }
.tree-wrap.cosmic .tree-lock { z-index: 3; border-radius: 22px; }

/* ---------- 8) World Map: ทวีป ---------- */
.wm-cont { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(28,16,6,.82); border: 1px solid rgba(214,176,112,.6); box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: calc(100% - 150px); }
.wm-cont .wc { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 4px 12px; border-radius: 8px; border: 1px solid rgba(214,176,112,.35); background: rgba(255,255,255,.04); color: #f5e6c4; cursor: pointer; font-family: Georgia, "Noto Sans Thai", serif; line-height: 1.15; }
.wm-cont .wc small { font-size: 9.5px; opacity: .8; } .wm-cont .wc b { font-size: 14px; letter-spacing: 1px; } .wm-cont .wc em { font-style: normal; font-size: 9px; opacity: .7; white-space: nowrap; }
.wm-cont .wc.on { background: linear-gradient(180deg, rgba(255,215,64,.28), rgba(255,160,0,.12)); border-color: #f1cf7a; color: #fff3cf; box-shadow: 0 0 12px rgba(255,215,64,.35); }
.wm-cont .wc.on b { color: #ffe7a8; font-size: 16px; }
.wm-cont .wc.lock { filter: grayscale(.6); opacity: .72; } .wm-cont .wc.lock:hover { opacity: 1; }
.wm-cont .wc.lock b { color: #cbb892; }
.wm7 .wm-hint { top: auto; bottom: 10px; }
@media (max-width: 900px) { .wm-cont { max-width: calc(100% - 70px); left: 8px; transform: none; overflow-x: auto; } .wm-cont .wc { min-width: 74px; padding: 3px 8px; } .wm-cont .wc em { display: none; } }

/* v37.1: ปุ่มโหมดล็อกไอเทม (ใหญ่ ต่อท้ายแท็บ CASH) */
.win[data-win="inventory"] .tabs { align-items: flex-end; flex-wrap: nowrap; }
.inv-lockbtn { margin-left: auto; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; padding: 8px 18px; min-height: 40px; border-radius: 8px; border: 1px solid rgba(255,202,40,.65); background: linear-gradient(180deg, rgba(255,202,40,.22), rgba(255,143,0,.12)); color: #ffe082; font-family: inherit; font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: .3px; cursor: pointer; white-space: nowrap; box-shadow: 0 0 12px rgba(255,202,40,.18); transition: transform .1s, box-shadow .15s; }
.inv-lockbtn i { font-style: normal; font-size: 20px; }
.inv-lockbtn:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(255,202,40,.4); color: #fff; }
.inv-lockbtn.on { background: linear-gradient(180deg, #ffca28, #ff8f00); color: #1a1000; border-color: #ffe082; box-shadow: 0 0 18px rgba(255,202,40,.55); }