@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600&family=Sarabun:wght@400;600&display=swap');

:root{
  --pp-bg:#120a0e; --pp-bg2:#221018; --pp-slot:#0a0609;
  --pp-gold:#c9a45c; --pp-gold-d:#6b5330; --pp-gold-l:#f2d48a;
  --pp-text:#eee4d2; --pp-mute:#a3949a;
  --pp-red:#e0413a; --pp-red-d:#7a1b1f; --pp-blue:#3b8fe0; --pp-green:#3fbf6f; --pp-purple:#a25cff;
}

/* ---------- Window frame ---------- */
.pp-win{
  position:absolute; pointer-events:auto; z-index:500;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(94vw, 620px); max-height:90vh;
  display:none; flex-direction:column;
  font-family:'Kanit','Sarabun',sans-serif; color:var(--pp-text);
  font-size:clamp(10px, 2.8vh, 14px);
  background:
    linear-gradient(180deg, rgba(255,80,60,.07), transparent 22%),
    linear-gradient(var(--pp-bg2), var(--pp-bg));
  box-shadow:
    0 0 0 2px #000,
    0 0 0 4px var(--pp-gold),
    0 0 0 6px var(--pp-gold-d),
    0 0 0 8px #000,
    0 10px 30px rgba(0,0,0,.8);
  image-rendering:pixelated;
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.pp-win.open{ display:flex; animation:pp-pop .14s steps(3); }
@keyframes pp-pop{ from{ transform:translate(-50%,-48%) scale(.96); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .pp-win.open{ animation:none } }

.pp-win::before,.pp-win::after{
  content:""; position:absolute; width:10px; height:10px; z-index:3;
  background:var(--pp-gold-l); box-shadow:0 0 0 2px #000, 0 0 6px rgba(242,212,138,.7);
}
.pp-win::before{ top:-9px; left:-9px; }
.pp-win::after{ bottom:-9px; right:-9px; }

.pp-head{
  display:flex; align-items:center; gap:.5em; padding:.4em .7em;
  border-bottom:2px solid var(--pp-gold-d);
  background:linear-gradient(#3a1519,#1b0b0f);
}
.pp-head .pp-ico{ font-size:1.3em; }
.pp-head h2{ margin:0; flex:1; font-size:1.15em; font-weight:600; color:var(--pp-gold-l); text-shadow:0 2px 0 #000; }
.pp-x{
  width:2.4em; height:2.4em; min-width:36px; min-height:36px;
  background:#2a1214; color:#fff; border:2px solid var(--pp-gold-d); cursor:pointer;
  font:inherit; line-height:1; box-shadow:inset 0 0 0 1px #000;
}
.pp-x:active{ background:var(--pp-red); }

.pp-body{ padding:.6em; overflow:auto; flex:1; -webkit-overflow-scrolling:touch; touch-action:pan-y; }

/* ---------- Bars ---------- */
.pp-bar{ position:relative; height:1.3em; background:#000; border:2px solid #000; outline:1px solid var(--pp-gold-d); margin:.3em 0; }
.pp-bar i{ display:block; height:100%; }
.pp-bar.hp i{ background:linear-gradient(#ff6a5e,#a81f1f); }
.pp-bar.mp i{ background:linear-gradient(#5db0ff,#1c5fb0); }
.pp-bar.xp i{ background:linear-gradient(#58b0ff,#1f5fbf); }
.pp-bar b{ position:absolute; inset:0; text-align:center; font-weight:500; font-size:.85em; line-height:1.5em; text-shadow:0 1px 0 #000; }

/* ---------- Status window (2 columns: menu | info) ---------- */
.pp-status{ display:grid; grid-template-columns:34% 1fr; gap:.7em; }
.pp-left{ display:flex; flex-direction:column; gap:.5em; }
.pp-portrait{ aspect-ratio:1; background:var(--pp-slot); border:2px solid var(--pp-gold); outline:1px solid #000;
  box-shadow:0 0 10px rgba(224,65,58,.35);
  display:flex; align-items:center; justify-content:center; font-size:4em; overflow:hidden; }
.pp-portrait img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.pp-name{ font-size:1.4em; font-weight:600; line-height:1.1; }
.pp-title{ color:#ff5a4f; font-size:.9em; }
.pp-sub2{ color:var(--pp-mute); font-size:.9em; }
.pp-menu{ display:flex; flex-direction:column; gap:.25em; }
.pp-menu button{
  text-align:left; padding:.45em .6em; min-height:36px; cursor:pointer;
  font:inherit; color:var(--pp-text); background:#1c0f14; border:2px solid #3a2228;
}
.pp-menu button.on{ color:var(--pp-gold-l); border-color:var(--pp-gold); background:#3a1a1e; box-shadow:0 0 8px rgba(201,164,92,.4); }
.pp-stats{ background:rgba(0,0,0,.35); border:2px solid #3a2228; padding:.2em .6em; }
.pp-row{ display:flex; justify-content:space-between; gap:.6em; padding:.35em 0; border-bottom:1px dashed #3d2a30; }
.pp-row:last-child{ border-bottom:0; }
.pp-row span:first-child{ color:var(--pp-mute); }
.pp-row b{ font-weight:500; }
.pp-pts{ display:flex; align-items:center; justify-content:space-between; margin-top:.5em; font-size:.9em; color:var(--pp-mute); }

/* ---------- Buttons ---------- */
.pp-btn{
  font:inherit; color:#fff; cursor:pointer; min-height:36px; padding:.35em 1em;
  background:linear-gradient(#b23a3a,#6e1c20); border:2px solid var(--pp-gold);
  box-shadow:inset 0 0 0 1px #000, 0 2px 0 #000;
}
.pp-btn:active{ transform:translateY(2px); box-shadow:inset 0 0 0 1px #000; }
.pp-btn[disabled]{ opacity:.45; }
.pp-btn.green{ background:linear-gradient(#2e8f58,#1b5c37); }

/* ---------- Tabs ---------- */
.pp-tabs{ display:flex; gap:.3em; margin-bottom:.6em; }
.pp-tabs button{ flex:1; min-height:36px; font:inherit; cursor:pointer; color:var(--pp-mute); background:#1c0f14; border:2px solid #3a2228; }
.pp-tabs button.on{ color:var(--pp-gold-l); border-color:var(--pp-gold); background:#3a1a1e; }

/* ---------- Equipment window ---------- */
.pp-equip{ display:grid; grid-template-columns:auto 1fr auto; gap:.6em; align-items:center; }
.pp-col{ display:flex; flex-direction:column; gap:.5em; }
.pp-char{ aspect-ratio:3/4; max-height:46vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 60%, rgba(224,65,58,.3), transparent 65%); font-size:5em; }
.pp-char img{ max-width:100%; max-height:100%; image-rendering:pixelated; }
.pp-bottom{ display:flex; justify-content:center; gap:.8em; margin-top:.6em; }

.pp-slot{
  position:relative; width:clamp(38px, 10vh, 58px); aspect-ratio:1; cursor:pointer;
  background:var(--pp-slot); border:2px solid #4a2f38; outline:1px solid #000;
  display:flex; align-items:center; justify-content:center; font-size:1.8em;
}
.pp-slot img{ width:88%; height:88%; image-rendering:pixelated; }
.pp-slot.empty{ opacity:.55; filter:grayscale(1); }
.pp-slot.r-rare{ border-color:var(--pp-blue); box-shadow:0 0 8px rgba(59,143,224,.6), inset 0 0 8px rgba(59,143,224,.3); }
.pp-slot.r-epic{ border-color:var(--pp-purple); box-shadow:0 0 8px rgba(162,92,255,.7), inset 0 0 8px rgba(162,92,255,.35); }
.pp-slot.r-legend{ border-color:var(--pp-gold-l); box-shadow:0 0 10px rgba(242,212,138,.8), inset 0 0 8px rgba(242,212,138,.4); }
.pp-slot em{ position:absolute; top:-2px; right:1px; font:600 .5em 'Kanit',sans-serif; font-style:normal; color:var(--pp-gold-l); text-shadow:0 1px 0 #000,1px 0 0 #000; }

/* ---------- Skill window ---------- */
.pp-skill{
  display:grid; grid-template-columns:auto 1fr auto; gap:.6em; align-items:center;
  padding:.5em; margin-bottom:.45em; background:rgba(0,0,0,.35); border:2px solid #3a2228;
}
.pp-skill .pp-slot{ cursor:default; border-color:var(--pp-red); box-shadow:0 0 8px rgba(224,65,58,.5); }
.pp-skill h4{ margin:0; font-size:1em; font-weight:500; color:var(--pp-gold-l); }
.pp-skill small{ display:block; color:var(--pp-mute); font-size:.85em; line-height:1.4; }
.pp-skill small .mp{ color:#6fb6ff; }
.pp-passive{ border-color:var(--pp-gold-d); background:rgba(201,164,92,.08); }
.pp-sub{ margin:.6em 0 .3em; color:var(--pp-gold); font-size:.9em; }
.pp-empty{ text-align:center; color:var(--pp-mute); padding:1.5em 0; }

@media (max-height:380px){
  .pp-body{ padding:.4em; }
  .pp-slot{ width:clamp(34px, 11vh, 48px); }
}
/* ===== ย่อขนาดสำหรับมือถือแนวนอน ===== */
.pp-win{
  width:min(84vw, 460px);
  max-height:80vh; max-height:80dvh;
  font-size:clamp(9px, 2.3vh, 12px);
}
.pp-head{ padding:.25em .6em; }
.pp-x{ width:2em; height:2em; min-width:30px; min-height:30px; }
.pp-body{ padding:.4em; }
.pp-tabs{ margin-bottom:.4em; }
.pp-tabs button{ min-height:28px; }
.pp-btn{ min-height:28px; padding:.2em .8em; }
.pp-skill{ padding:.3em .4em; margin-bottom:.3em; gap:.5em; }
.pp-skill .pp-slot{ width:32px; font-size:1.2em; }
.pp-skill h4{ font-size:.95em; }
.pp-skill small{ line-height:1.25; }
.pp-slot{ width:clamp(30px, 9vh, 44px); }
.pp-char{ max-height:34vh; font-size:3.5em; }
.pp-menu button{ min-height:28px; padding:.3em .5em; }
.pp-row{ padding:.22em 0; }

/* ===== จอแนวตั้ง (มือถือ) =====
   กฎด้านบนคำนวณจากความสูงจอ (vh) ซึ่งเหมาะกับแนวนอน พอเป็นแนวตั้งใช้ vw แทน
   ปรับขนาดหน้าสกิล: ลดเลข 88vw (ความกว้าง) และ 2.8vw (ตัวอักษร) ถ้ายังใหญ่ไป */
@media (orientation:portrait){
  .pp-win{
    width:min(62vw, 300px);
    max-height:50vh; max-height:50dvh;
    font-size:clamp(8px, 2.3vw, 11px);
  }
  .pp-body{ padding:.4em; }
  .pp-head{ padding:.2em .5em; }
  .pp-x{ width:2em; height:2em; min-width:30px; min-height:30px; }
  .pp-tabs{ margin-bottom:.4em; }
  .pp-tabs button, .pp-menu button{ min-height:30px; }
  .pp-btn{ min-height:30px; padding:.2em .7em; }
  .pp-slot{ width:clamp(34px, 9vw, 48px); }
  .pp-char{ max-height:26vh; }

  /* แถวสกิล: ไอคอนซ้าย + ข้อความขวา + ปุ่มอยู่แถวล่าง */
  .pp-skill2{
    display:flex !important; flex-wrap:wrap !important; align-items:flex-start !important;
    gap:.4em !important; padding:.35em !important; margin-bottom:.3em !important;
  }
  .pp-skill2 .pp-sicon{
    flex:0 0 40px !important; width:40px !important; height:40px !important; position:relative !important;
  }
  .pp-skill2 .pp-sicon img{ width:100% !important; height:100% !important; object-fit:contain !important; }
  .pp-skill2 .pp-sbody{
    flex:1 1 0 !important; min-width:0 !important; width:auto !important; max-width:none !important;
  }
  .pp-skill2 .pp-sdesc{ margin:.2em 0 !important; padding-left:1em !important; line-height:1.25 !important; }
  .pp-skill2 .pp-sdesc li{ word-break:normal !important; overflow-wrap:anywhere !important; }
  .pp-skill2 .pp-sbtns{
    flex:1 1 100% !important; position:static !important; width:100% !important;
    display:flex !important; flex-direction:row !important; flex-wrap:wrap !important;
    justify-content:flex-end !important; gap:.4em !important;
  }
  .pp-skill2 .pp-sbtns .row{ display:flex !important; flex-direction:row !important; gap:.4em !important; }
}