/* RM-32 กรอบสเตตัสในกล่องรายละเอียดทีมสู้ (โพยกับ /plan) และตัวแก้ของผู้ดูแล วาดโดย /assets/hero-stats-ui.js
   ลิงก์ต่อจาก theme.css ไม่อยู่ใน @layer จึงชนะ utility ของ Tailwind แบบเดียวกับ theme.css
   สีอ้างอิงภาพตัวอย่างของ WinBz (ภาพ 42) แถวพื้นกรมท่าแบบหน้าต่างข้อมูลอัศวินของเกม ส่วนแถวสำคัญพื้นทองจางแบบ stat-row-main ของ acidaqua
   ความเปรียบต่างคำนวณด้วยสูตร WCAG 23 ต.ค. 2026 บนพื้นแถว #151b2a ชื่อ #e9e6dc 13.76:1 ค่าทอง #f2cf7a 11.44:1 ชื่อแถวรอง #b9bccb 9.10:1 ป้าย #fb8f8f 7.71:1
   บนพื้นแถวสำคัญด้านซ้ายสุด (ทอง 42% ทับพื้นแถว ได้ #604d2a) ค่าทอง 5.39:1 ชื่อ 6.49:1 แผงขวาของตัวแก้ หัวข้อเล็ก #6b6253 บน #e9e4d6 4.73:1 */

/* ---------- แถวในตารางรายละเอียด 3 ส่วน คือตัวละคร รายละเอียด และสเตตัส (ลูกลำดับที่ 1 2 3) ----------
   จอแคบ ตัวละครคู่รายละเอียดแถวบน สเตตัสเต็มความกว้างแถวล่าง จอตั้งแต่ 640px สเตตัสอยู่กลางแบบภาพ WinBz
   แถวที่ไม่มีสเตตัส (ช่องว่าง) คงหน้าตาเดิม รายละเอียดกินที่ช่องสเตตัสด้วย */
.hs-row { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) !important; grid-template-areas: "hero desc" "stats stats"; }
.hs-row > :nth-child(1) { grid-area: hero; }
.hs-row > :nth-child(2) { grid-area: desc; }
.hs-row > [data-hs-slot] { grid-area: stats; min-width: 0; padding: 8px; border-top: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); }
.hs-row > [data-hs-slot]:empty { display: none; }
.hs-row:has(> [data-hs-slot]:empty) { grid-template-areas: "hero desc"; }
/* RM-34 ช่องข้อความแคบเกินเมื่อ 3 คอลัมน์อยู่ในกล่อง 672px (ข้อความเหลือ 166px feedback สมาชิกภาพ 47)
   จอ 640 ถึง 959px คอลัมน์ตัวละครกับฝั่งขวาตามหัวตาราง (1 : 2) ฝั่งขวาเป็นกรอบสเตตัสแล้วตามด้วยข้อความกว้างเต็มฝั่ง
   จอตั้งแต่ 960px กล่องที่มีกรอบสเตตัสขยายเป็น 820px (RM-34 ตั้ง 900px RM-35 ลดลง) ตัวละครกับกรอบสเตตัสกว้างใกล้เดิม ที่เพิ่มยกให้ข้อความ */
@media (min-width: 640px) {
  .hs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important; grid-template-areas: "hero stats" "hero desc"; grid-template-rows: auto 1fr; }
  .hs-row:has(> [data-hs-slot]:empty) { grid-template-areas: "hero desc"; grid-template-rows: auto; }
  .hs-row > [data-hs-slot] { padding: 10px 8px 0; border-top: 0; }
}
@media (min-width: 960px) {
  [data-slot="dialog-content"]:has(.hs-row .hs-build),
  [data-slot="dialog-content"]:has(.hs-row.hs-rq) { max-width: 820px !important; } /* RM-35 ลดจาก 900px ข้อความส่วนใหญ่สั้น ที่ว่างด้านขวาเยอะ RM-38 กล่องจัดทีมเองขยายเสมอ */
  .hs-row { grid-template-columns: 210px 260px minmax(0, 1fr) !important; grid-template-areas: "hero stats desc"; grid-template-rows: auto; }
  .hs-row:has(> [data-hs-slot]:empty) { grid-template-areas: "hero desc desc"; }
  .hs-row > [data-hs-slot] { padding: 10px 8px; border-right: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); }
  /* หัวตาราง (ตัวละคร กับ รายละเอียด) ให้เส้นแบ่งตรงกับคอลัมน์ตัวละครของแถว */
  div:has(> .hs-row) > div:first-child:not(.hs-row) { grid-template-columns: 210px minmax(0, 1fr) !important; }
}
/* RM-38 แถวในกล่องจัดทีมเองของหน้า /plan (req.js) มีลูกลำดับที่ 4 คือแถบเลือกเซ็ตไอเทมกับแหวน อยู่ล่างสุดเต็มแถวทุกขนาดจอ
   ช่องสเตตัสมีปุ่มแก้เสมอ จึงไม่มีกรณีช่องว่าง */
.hs-row.hs-rq { grid-template-areas: "hero desc" "stats stats" "pick pick"; }
.hs-row.hs-rq > .hs-rqpick { grid-area: pick; }
@media (min-width: 640px) { .hs-row.hs-rq { grid-template-areas: "hero stats" "hero desc" "pick pick"; grid-template-rows: auto 1fr auto; } }
@media (min-width: 960px) { .hs-row.hs-rq { grid-template-areas: "hero stats desc" "pick pick pick"; grid-template-rows: auto auto; } }

/* ---------- กรอบสเตตัส ---------- */
.hs-build + .hs-build { margin-top: 10px; }
.hs-bname { display: inline-block; margin-bottom: 4px; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #f2cf7a; background: rgba(200, 146, 42, 0.16); border: 1px solid rgba(200, 146, 42, 0.45); }
.hs-list { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; background: #0d1220; border: 1px solid rgba(147, 160, 200, 0.18); }
.hs-list.hs-all { display: grid; grid-template-columns: 1fr; }
@media (max-width: 639px) { .hs-list.hs-all { grid-template-columns: 1fr 1fr; } }
.hs-stat { display: flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 7px 2px 4px; border-radius: 6px; background: #151b2a; font-size: 11.5px; line-height: 1.2; color: #e9e6dc; }
.hs-stat.hs-main { background: linear-gradient(90deg, rgba(200, 146, 42, 0.42), rgba(200, 146, 42, 0.16)); }
.hs-stat.hs-sub .hs-name { color: #b9bccb; }
.hs-stat.hs-empty { opacity: 0.55; }
.hs-rank { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #f2cf7a; background: #0b0f1a; border: 1px solid rgba(242, 207, 122, 0.7); }
.hs-rank.hs-norank { visibility: hidden; }
.hs-ico { flex: none; width: 15px; height: 15px; object-fit: contain; }
.hs-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-lbl { flex: none; font-size: 10px; font-weight: 700; color: #fb8f8f; }
.hs-val { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: #e9e6dc; }
.hs-main .hs-val { color: #f2cf7a; }
.hs-val.hs-note { font-weight: 600; font-size: 10.5px; }
.hs-edit { display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #f2cf7a; background: transparent; border: 1px dashed rgba(242, 207, 122, 0.6); cursor: pointer; }
.hs-edit:hover { background: rgba(200, 146, 42, 0.14); }

/* ---------- ตัวแก้ของผู้ดูแล ทับเต็มกล่องรายละเอียด (วางในกล่อง) หรือเต็มจอ (วางใน body) ---------- */
#hs-editor { position: absolute; inset: 0; z-index: 60; display: flex; align-items: stretch; justify-content: center; color: #e9e6dc; font-size: 13px; }
#hs-editor.hs-in-body { position: fixed; align-items: center; padding: 16px; }
.hs-ov { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.hs-dlg { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 100%; background: #2a2927; border-radius: inherit; overflow: hidden; }
.hs-in-body .hs-dlg { max-width: 640px; max-height: min(90vh, 48rem); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); }
.hs-ed-head { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; }
.hs-ed-head b { color: #f2cf7a; }
.hs-ed-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.hs-ed-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.hs-btn { padding: 6px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; }
.hs-ok { background: #c8922a; color: #1c1508; }
.hs-ok:disabled { opacity: 0.6; cursor: default; }
.hs-ghost { background: transparent; color: #e9e6dc; border-color: rgba(255, 255, 255, 0.25); }
.hs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-tab { padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer; color: #b9bccb; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); }
.hs-tab.is-on { color: #1c1508; background: #f2cf7a; border-color: #f2cf7a; }
.hs-tab.hs-add { border-style: dashed; color: #f2cf7a; }
.hs-ed-bname { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hs-ed-bname label, .hs-ed-type { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; font-size: 12px; color: #b9bccb; }
.hs-ed-bname input, .hs-ed-type input { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: #e9e6dc; background: #1b1a19; border: 1px solid rgba(255, 255, 255, 0.2); }
.hs-ed-line { flex-direction: column; align-items: stretch; flex: none; }
.hs-ed-line input { flex: none; }
.hs-ed-help { margin: 0; font-size: 11.5px; line-height: 1.5; color: #b9bccb; }
.hs-ed-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 560px) { .hs-ed-grid { grid-template-columns: 1fr; } }
.hs-ed-list { display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 8px; background: #0d1220; }
.hs-ed-stat { display: flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 7px 2px 4px; border-radius: 6px; background: #151b2a; font-size: 11.5px; color: #e9e6dc; text-align: left; border: 1px solid transparent; cursor: pointer; }
.hs-ed-stat.hs-main { background: linear-gradient(90deg, rgba(200, 146, 42, 0.42), rgba(200, 146, 42, 0.16)); }
.hs-ed-stat.hs-empty .hs-name { color: #b9bccb; }
.hs-ed-stat.is-sel { border-color: #f2cf7a; }
.hs-ed-side { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: #e9e4d6; color: #2a2927; align-self: start; }
.hs-ed-sname { display: flex; align-items: center; gap: 6px; margin: -10px -10px 0; padding: 8px 10px; border-radius: 8px 8px 0 0; font-weight: 700; color: #fff7e2; background: linear-gradient(90deg, #6b4c1c, #a87b33); }
.hs-ed-side .hs-ed-lab { color: #6b6253; }
.hs-ed-lab { font-size: 11.5px; font-weight: 700; color: #b9bccb; }
.hs-seg { display: flex; padding: 3px; border-radius: 10px; background: #cfc8b6; }
.hs-seg button { flex: 1; padding: 5px 0; border-radius: 8px; font-size: 12px; font-weight: 700; color: #3d382f; background: transparent; border: 0; cursor: pointer; }
.hs-seg button.is-on { color: #f7f1e2; background: #2a2927; }
.hs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hs-chip { padding: 4px 10px; border-radius: 10px 2px 10px 2px; font-size: 12px; font-weight: 700; color: #2a2927; background: #d4cdbb; border: 0; cursor: pointer; }
.hs-chip.hs-rk { min-width: 28px; padding: 4px 0; }
.hs-chip.is-on { color: #f7f1e2; background: #2a2927; }
.hs-ed-side .hs-ed-type { color: #6b6253; flex: none; }
.hs-ed-side .hs-ed-type input { color: #2a2927; background: #fff; border-color: #cfc8b6; }
.hs-clear { align-self: flex-start; padding: 0; font-size: 12px; font-weight: 700; text-decoration: underline; color: #8a5a12; background: transparent; border: 0; cursor: pointer; }
.hs-ed-bname .hs-clear { color: #fb8f8f; }