/* =====================================================================
 * portrait_v34.css — มือถือแนวตั้ง: เกม 58% บน • แผงควบคุม 42% ล่าง
 * ===================================================================== */
#pt-panel { display: none; }
body.pt-mode #pt-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: 30; display: flex; flex-direction: column; gap: 7px; padding: 9px 10px calc(var(--sab, 0px) + 8px); box-sizing: border-box; pointer-events: auto;
  background: linear-gradient(180deg, #1b1433, #0b0816 30%); border-top: 2px solid rgba(255, 79, 163, .55); box-shadow: 0 -10px 30px rgba(0, 0, 0, .5); color: #fff; font-family: system-ui, "Noto Sans Thai", sans-serif; }
body.pt-mode #pt-panel.hidden { display: none; }
body.pt-mode #hud, body.pt-mode #chat, body.pt-mode #chat-fab, body.pt-mode #chat-peek, body.pt-mode #minimap, body.pt-mode #m-rotate, body.pt-mode #farm-hud.hidden { display: none !important; }
body.pt-mode #mobile-ui { bottom: 42%; }
body.pt-mode #mobile-ui .mbtns { bottom: 10px; } body.pt-mode #mobile-ui .joy2:not([data-lay]) { bottom: 10px; }
body.pt-mode.pt-idle:not(.pt-showctl) #mobile-ui .mbtns, body.pt-mode.pt-idle:not(.pt-showctl) #mobile-ui .joy2, body.pt-mode.pt-idle:not(.pt-showctl) #joy-zone { opacity: 0; pointer-events: none !important; }
body.pt-mode #cp-box { left: calc(var(--sal, 0px) + 8px) !important; top: calc(var(--sat, 0px) + 8px) !important; min-width: 0 !important; }
body.pt-mode #buffs { top: calc(var(--sat, 0px) + 44px); left: 8px; right: auto; }
body.pt-mode #pt-hud { top: calc(var(--sat, 0px) + 74px) !important; }
body.pt-mode #log { left: 8px; right: auto; bottom: calc(42% + 150px) !important; align-items: flex-start; transform-origin: 0 100%; }
body.pt-mode #notices { top: calc(var(--sat, 0px) + 54px); }
body.pt-mode #wx-hud { top: calc(var(--sat, 0px) + 56px); }
body.pt-mode #qtrack { display: none; }
body.pt-mode .win { max-height: calc(56vh / var(--ui, 1)) !important; }
/* ---- แผง ---- */
.pp-top { display: flex; align-items: center; gap: 10px; }
.pp-lv { width: 46px; height: 46px; flex: none; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #ff4fa3, #7b2cff); box-shadow: 0 4px 12px rgba(123, 44, 255, .4); }
.pp-lv small { font-size: 8px; font-weight: 800; opacity: .85; line-height: 1; } .pp-lv b { font-size: 19px; line-height: 1; }
.pp-id { flex: 1; min-width: 0; } .pp-id b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-id small { display: block; font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-cp { text-align: right; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .14); } .pp-cp small { display: block; font-size: 9px; letter-spacing: 1.5px; opacity: .7; } .pp-cp b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pp-bar, .pp-exp { position: relative; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.pp-bar span, .pp-exp span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; transition: width .3s; }
.pp-bar.hp span { background: linear-gradient(90deg, #ff4f6d, #ff8a80); } .pp-bar.mp span { background: linear-gradient(90deg, #2979ff, #40c4ff); }
.pp-exp { grid-column: 1 / -1; height: 9px; } .pp-exp span { background: linear-gradient(90deg, #ffd54f, #ff9100); }
.pp-bar em, .pp-exp em { position: relative; display: block; text-align: center; font: 700 10px/16px system-ui, sans-serif; font-style: normal; text-shadow: 0 1px 2px #000; }
.pp-exp em { font-size: 8px; line-height: 9px; }
.pp-auto { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.pp-ab { flex: none; width: 92px; height: 44px; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font: 900 15px/1 system-ui, sans-serif; background: linear-gradient(135deg, #00c853, #00b0ff); box-shadow: 0 4px 12px rgba(0, 200, 83, .35); }
.pp-ab.on { background: linear-gradient(135deg, #ff5252, #ff9100); animation: ppPulse 1.6s ease-in-out infinite; } .pp-ab i { font-style: normal; font-size: 13px; }
@keyframes ppPulse { 50% { box-shadow: 0 0 18px rgba(255, 145, 0, .7); } }
.pp-ai { flex: 1; min-width: 0; } .pp-ai b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-ai small { display: block; font-size: 10.5px; color: #ffd54f; margin-top: 2px; }
.pp-ctl { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); font-size: 18px; }
body.pt-showctl .pp-ctl { background: rgba(255, 213, 79, .25); border-color: #ffd54f; }
.pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pp-grid button { position: relative; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .06); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: inherit; }
.pp-grid button:active { transform: scale(.94); background: rgba(255, 79, 163, .25); } .pp-grid i { font-style: normal; font-size: 18px; line-height: 1; } .pp-grid span { font-size: 10px; opacity: .85; }
.pp-grid [data-pw=events] { background: linear-gradient(160deg, rgba(255, 179, 0, .35), rgba(123, 44, 255, .35)); }
.pp-dot { position: absolute; top: 3px; right: 6px; min-width: 14px; height: 14px; border-radius: 7px; background: #ff3355; font: 800 9px/14px system-ui, sans-serif; } .pp-dot.hidden { display: none; }
.pp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); }
.pp-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: 11.5px; line-height: 1.35; }
.pp-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e0e0e0; } .pp-m b { color: #8fd3ff; } .pp-m.sys { color: #ffd54f; } .pp-m.whisper { color: #ff9ecb; } .pp-m i { font-style: normal; margin-right: 3px; }
.pp-in { display: flex; gap: 5px; } .pp-in input { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .07); color: #fff; font-size: 13px; }
.pp-in input:focus { outline: none; border-color: #ff4fa3; } .pp-in button { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: #ff4fa3; color: #fff; font-weight: 800; }
@media (max-height: 700px) { body.pt-mode #pt-panel { gap: 5px; padding-top: 6px; } .pp-lv { width: 40px; height: 40px; } .pp-grid button { height: 38px; } .pp-grid span { display: none; } }
.pp-m { flex: none; } .pp-chat { min-height: 64px; }
@media (max-height: 700px) { .pp-chat { min-height: 50px; padding: 4px 6px; } .pp-in input, .pp-in button { height: 28px; } .pp-auto { padding: 4px; } .pp-ab { height: 38px; } }