/* หน้าต่างสเตตัสแบบกะทัดรัด (โชว์ค่าสถานะอย่างเดียว) — ใช้คู่กับ js/systems/statusPanel.js */
.sp-win{
  position:absolute; pointer-events:auto; z-index:500;
  top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(74vw, 440px); max-height:86vh; max-height:86dvh;
  display:none; flex-direction:column;
  font-family:'Kanit','Sarabun',sans-serif; color:#eee4d2;
  font-size:clamp(10px, 2.5vh, 13px);
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(224,65,58,.16), transparent 70%),
    linear-gradient(#221018,#120a0e);
  box-shadow:0 0 0 2px #000, 0 0 0 4px #c9a45c, 0 0 0 6px #6b5330, 0 0 0 8px #000, 0 10px 30px rgba(0,0,0,.85);
  -webkit-user-select:none; user-select:none; touch-action:manipulation;
}
.sp-win.open{ display:flex; animation:sp-pop .14s ease-out; }
@keyframes sp-pop{ from{ transform:translate(-50%,-47%) scale(.96); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .sp-win.open{ animation:none } }

/* มุมทอง */
.sp-win::before,.sp-win::after{
  content:""; position:absolute; width:9px; height:9px; z-index:3;
  background:#f2d48a; box-shadow:0 0 0 2px #000, 0 0 6px rgba(242,212,138,.7);
}
.sp-win::before{ top:-8px; left:-8px; }
.sp-win::after{ bottom:-8px; right:-8px; }

/* ---------- หัว: ตราตัวละคร + ชื่อ + ปุ่มปิด ---------- */
.sp-head{
  display:flex; align-items:center; gap:.7em; padding:.5em .7em;
  background:linear-gradient(#3a1519,#1b0b0f); border-bottom:2px solid #6b5330;
}
.sp-seal{
  flex:none; width:3.4em; height:3.4em; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.9em; line-height:1;
  background:radial-gradient(circle at 50% 40%, #4a1a20, #14080b 75%);
  border:2px solid #c9a45c; box-shadow:0 0 0 2px #000, 0 0 12px rgba(224,65,58,.45);
}
.sp-seal span{ font-size:.55em; }
.sp-id{ flex:1; min-width:0; }
.sp-name{ font-size:1.25em; font-weight:600; color:#f2d48a; line-height:1.15; text-shadow:0 2px 0 #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-meta{ display:flex; gap:.5em; align-items:center; margin-top:.15em; color:#a3949a; }
.sp-lv{ padding:0 .55em; border:1px solid #c9a45c; background:#2a1214; color:#f2d48a; font-weight:500; }
.sp-cls{ color:#ff6a5e; }
.sp-x{
  flex:none; width:2.4em; height:2.4em; min-width:32px; min-height:32px;
  background:#2a1214; color:#fff; border:2px solid #6b5330; cursor:pointer;
  font:inherit; line-height:1; box-shadow:inset 0 0 0 1px #000;
}
.sp-x:active{ background:#e0413a; }

/* ---------- แถบ HP / MP / EXP ---------- */
.sp-bars{ padding:.5em .7em .2em; display:grid; gap:.3em; }
.sp-bar{ position:relative; height:1.35em; background:#000; border:2px solid #000; outline:1px solid #6b5330; }
.sp-bar i{ display:block; height:100%; transition:width .4s; }
.sp-bar.hp i{ background:linear-gradient(#ff6a5e,#a81f1f); }
.sp-bar.mp i{ background:linear-gradient(#5db0ff,#1c5fb0); }
.sp-bar.xp{ height:.95em; }
.sp-bar.xp i{ background:linear-gradient(#f7e39b,#b98a2e); }
.sp-bar b{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 .6em; font-weight:500; font-size:.85em; text-shadow:0 1px 0 #000, 0 0 3px #000;
}
.sp-bar.xp b{ justify-content:center; font-size:.7em; }

/* ---------- ค่าสถานะ จัดกลุ่ม 2 คอลัมน์ ---------- */
.sp-body{ padding:.4em .7em .7em; overflow:auto; flex:1; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.sp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5em; align-items:start; }
.sp-card{ background:rgba(0,0,0,.38); border:2px solid #3a2228; border-top:3px solid var(--c,#c9a45c); }
.sp-card h3{
  margin:0; padding:.25em .6em; font-size:.95em; font-weight:600; color:var(--c,#c9a45c);
  background:rgba(255,255,255,.04); border-bottom:1px solid #3a2228;
}
.sp-row{ display:flex; justify-content:space-between; gap:.5em; padding:.3em .6em; border-bottom:1px dashed #3d2a30; }
.sp-row:last-child{ border-bottom:0; }
.sp-row span{ color:#a3949a; }
.sp-row b{ font-weight:500; color:#f6ecd8; font-variant-numeric:tabular-nums; }

/* ทอง / ฆ่าแล้ว */
.sp-foot{ display:flex; gap:.5em; margin-top:.5em; }
.sp-chip{
  flex:1; display:flex; justify-content:space-between; padding:.3em .6em;
  background:rgba(0,0,0,.38); border:2px solid #3a2228;
}
.sp-chip span{ color:#a3949a; }
.sp-chip b{ font-weight:500; color:#f2d48a; }

/* จอเตี้ยมาก (มือถือแนวนอนเล็ก) */
@media (max-height:360px){
  .sp-seal{ width:2.8em; height:2.8em; }
  .sp-row{ padding:.2em .5em; }
  .sp-bars{ padding-top:.35em; }
}