/* หัวแดง + อริศัตรู (js/karma.js, 2026-10-21): the HUD chip #karmachip and its card #karmainfo, the อริ window #foewin,
   the player card's lines and buttons (js/pinfo.js), the scan badge (js/scan.js). Crisp 1px rings only, no soft halos. */
#karmachip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border: 1px solid #ff5a4a; border-radius: 999px;
  background: linear-gradient(#5a0f0a, #3a0906); color: #ffd2c8; font: 600 13px/1.2 'Mali', sans-serif; cursor: pointer; white-space: nowrap; }
#karmachip[hidden] { display: none; }
#karmachip .km-sk { font-size: 18px; }
#karmachip b { color: #ff7a6a; font-size: 14px; }
#karmachip i { font-style: normal; padding: 0 6px; border-radius: 6px; background: #ff4b3a; color: #fff; font-weight: 700; }
#karmachip small { color: #f0b8ae; font-size: 12px; }
#karmachip:hover { border-color: #ff8a7a; }
#karmainfo { position: absolute; z-index: 30; width: 300px; max-width: calc(100vw - 20px); padding: 12px 14px; border: 1px solid #ff5a4a; border-radius: 10px;
  background: #1c1012f2; color: #f3e2dc; font: 500 13px/1.45 'Mali', sans-serif; }
#karmainfo[hidden] { display: none; }
#karmainfo .km-h { display: block; color: #ff6a5a; font-size: 16px; margin-bottom: 4px; }
#karmainfo small { display: block; color: #c9b0a8; }
#karmainfo .km-wash { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 6px 8px; border-radius: 8px; background: #2c1614; }
#karmainfo .km-wash b { color: #ffd98a; }
#karmainfo .km-wash i { color: #9a8580; font-style: normal; }
#karmainfo ul { margin: 0; padding-left: 18px; }
#karmainfo li { margin: 1px 0; }
#karmainfo .km-btns { display: flex; gap: 8px; margin-top: 10px; }
#karmainfo .km-btns button, #foewin button { font: 600 13.5px 'Mali', sans-serif; border-radius: 6px; cursor: pointer; }
#karmainfo .km-btns button { flex: 1; height: 32px; border: 1px solid #7a5a2a; background: linear-gradient(#3a2f20, #251d14); color: #f2dfae; }

#foewin { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(8, 6, 10, 0.55); }
#foewin[hidden] { display: none; }
#foewin .fw-box { position: relative; width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow: auto; padding: 18px 18px 16px; border: 1px solid #d9a443;
  border-radius: 12px; background: linear-gradient(#231d27, #17131a); color: #f3ecd8; font: 500 14px/1.5 'Mali', sans-serif; }
#foewin header b { display: block; font-size: 20px; color: #ffd98a; }
#foewin header small { display: block; color: #b8ae98; font-size: 13px; }
#foewin .fw-x { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 1px solid #5a4a3a; background: #2a2230; color: #f2dfae; }
#foewin .fw-add { display: flex; gap: 8px; margin: 12px 0 6px; }
#foewin .fw-in { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #5a4a3a; border-radius: 6px; background: #120f15; color: #fff; font: 500 15px 'Mali', sans-serif; }
#foewin .fw-add button { height: 38px; padding: 0 16px; border: 1px solid #ff5a4a; background: linear-gradient(#7a1c14, #4a0e0a); color: #ffe3dc; }
#foewin button[disabled] { opacity: 0.45; cursor: default; }
#foewin h4 { margin: 12px 0 4px; color: #ffd98a; font-size: 15px; }
#foewin h4 small { color: #9a9080; font-weight: 500; }
#foewin .fw-list { list-style: none; margin: 0; padding: 0; }
#foewin .fw-list li { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px; border-bottom: 1px solid #2e2936; }
#foewin .fw-dot { width: 9px; height: 9px; border-radius: 50%; background: #5a5560; flex: none; }
#foewin .fw-dot.on { background: #6fe06f; }
#foewin .fw-name { flex: 1; text-align: left; padding: 0; border: 0; background: none; color: #ff9a8a; font-size: 15px; }
#foewin .fw-list small { color: #9a9080; }
#foewin .fw-del { height: 30px; padding: 0 12px; border: 1px solid #7a5a2a; background: linear-gradient(#3a2f20, #251d14); color: #f2dfae; }
#foewin .fw-none { margin: 2px 0; color: #9a9080; font-size: 13px; }
#foewin .fw-say { margin: 10px 0 0; color: #ff8a7a; }

#pinfo .pi-pk { margin: 2px 0 0; font-weight: 700; font-size: 13.5px; }
#pinfo .pi-pk.red { color: #ff5a4a; }
#pinfo .pi-pk.foe { color: #ff9a6a; }
#pinfo .pi-btn.pk { border-color: #9a3a2a; }
#pinfo .pi-btn.pk.hit { background: linear-gradient(#6a1a12, #3e0c08); color: #ffe3dc; }
#pinfo .pi-btn.pk small { font-size: 11px; opacity: 0.85; }
#scanpanel .sc-bd .b-red { background: #8a120a; color: #fff; border: 1px solid #ff5a4a; }
#deathrec .dr-today.red { border-color: #ff5a4a; }
#deathrec .dr-today.red b { color: #ff7a6a; }
#deathrec .dr-redrule { color: #ff9a8a; }
.km-red { color: #ff4b3a; font-weight: 700; }