/* ---------- the CP pop-up on a gear change (js/cppop.js). v2, 2026-10-18 (the user: "แก้ไขเลข CP เวลาเด้งหน้าจอให้ดูดีกว่านี้
   และดูง่ายกว่านี้"): a fixed spot instead of over the hero's head (big names and damage numbers live there), a solid plate, the
   number in one light gold with a crisp dark ring (no soft halo: the user reads it as blur), the change as a clear green ▲ /
   red ▼, and a floor size so a phone still reads it at a glance. Three looks (#cppop.st-a / st-b / st-c), picked on
   assets/ui_pick/cppop/index.html. Never takes a click. ---------- */
#cppop { position: fixed; z-index: 965; pointer-events: none !important; font-family: Fredoka, Mali, sans-serif; }
#cppop .cpp-box { position: relative; display: flex; align-items: center; white-space: nowrap; }
#cppop .cpp-row { display: flex; align-items: baseline; gap: 0.3em; }
#cppop .cpp-n {
  font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; color: #ffe9a6;
  text-shadow: 1px 0 0 #1a1004, -1px 0 0 #1a1004, 0 1px 0 #1a1004, 0 -1px 0 #1a1004, 0 2px 0 #1a1004;
}
#cppop .cpp-l, #cppop .cpp-h { font-weight: 800; color: #e9c46a; }
#cppop .cpp-d { font-style: normal; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; gap: 0.18em; }
#cppop .cpp-d i { font-style: normal; font-size: 0.8em; }

/* ---- a: ป้ายทองกลางจอ - a gold-framed plate at the top middle, its title on a gold tab, the change on a green / red chip */
#cppop.st-a { left: 50%; top: 22%; translate: -50% 0; }
#cppop.st-a .cpp-box {
  flex-direction: column; gap: 6px; padding: 18px 30px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #23202e, #0e0d14); border: 2px solid #d9b45f;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 228, 150, 0.16), 0 10px 24px rgba(0, 0, 0, 0.5);
}
#cppop.st-a .cpp-h {
  position: absolute; top: -13px; left: 50%; translate: -50% 0; padding: 2px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #f6da86, #c99c3e); border: 1px solid #fff2c0; box-shadow: 0 0 0 1px #3b2708;
  color: #2b1d08; font: 800 clamp(12px, calc(14px * var(--u)), 16px) Mali, sans-serif;
}
#cppop.st-a .cpp-l { font-size: clamp(16px, calc(22px * var(--u)), 26px); }
#cppop.st-a .cpp-n { font-size: clamp(36px, calc(54px * var(--u)), 66px); }
#cppop.st-a .cpp-d {
  padding: 3px 16px 4px; border-radius: 999px; font-size: clamp(17px, calc(22px * var(--u)), 26px);
  background: #1d6e35; border: 1px solid #74e894; color: #eaffec;
}
#cppop.st-a.down .cpp-d { background: #842820; border-color: #ff8a7c; color: #fff0ee; }

/* ---- b: ข้างแถบ CP - a plate that slides out right under the HUD's CP chip (top left), its left edge green / red */
#cppop.st-b .cpp-box {
  gap: 12px; padding: 7px 16px 7px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(30, 28, 42, 0.96), rgba(12, 11, 18, 0.96)); border: 1.5px solid #d9b45f; border-left: 5px solid #5fd77e;
  box-shadow: 0 0 0 1px #000, 0 6px 16px rgba(0, 0, 0, 0.45);
}
#cppop.st-b.down .cpp-box { border-left-color: #ff6a5c; }
#cppop.st-b .cpp-h { font-size: clamp(14px, calc(17px * var(--u)), 20px); }
#cppop.st-b .cpp-n { font-size: clamp(26px, calc(36px * var(--u)), 46px); }
#cppop.st-b .cpp-d { font-size: clamp(17px, calc(22px * var(--u)), 27px); color: #74f094; text-shadow: 1px 0 0 #052a10, -1px 0 0 #052a10, 0 1px 0 #052a10, 0 -1px 0 #052a10; }
#cppop.st-b.down .cpp-d { color: #ff8476; text-shadow: 1px 0 0 #3a0905, -1px 0 0 #3a0905, 0 1px 0 #3a0905, 0 -1px 0 #3a0905; }

/* ---- c: แถบกว้างด้านล่าง - a wide dark band with gold lines above the skill bar (Lordnine) */
#cppop.st-c { left: 50%; translate: -50% 0; }
#cppop.st-c .cpp-box {
  gap: 18px; padding: 10px 84px; min-width: min(560px, 92vw); justify-content: center; box-sizing: border-box;
  background: linear-gradient(90deg, rgba(10, 10, 16, 0) 0%, rgba(10, 10, 16, 0.92) 16%, rgba(10, 10, 16, 0.92) 84%, rgba(10, 10, 16, 0) 100%);
}
#cppop.st-c .cpp-box::before, #cppop.st-c .cpp-box::after {
  content: ''; position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, #d9b45f 22%, #fff0b8 50%, #d9b45f 78%, transparent);
}
#cppop.st-c .cpp-box::before { top: 0; }
#cppop.st-c .cpp-box::after { bottom: 0; }
#cppop.st-c .cpp-h { font: 800 clamp(13px, calc(16px * var(--u)), 19px) Mali, sans-serif; color: #d9c08a; }
#cppop.st-c .cpp-l { font-size: clamp(16px, calc(22px * var(--u)), 26px); }
#cppop.st-c .cpp-n { font-size: clamp(36px, calc(54px * var(--u)), 68px); }
#cppop.st-c .cpp-d { font-size: clamp(20px, calc(28px * var(--u)), 34px); color: #74f094; text-shadow: 1px 0 0 #052a10, -1px 0 0 #052a10, 0 1px 0 #052a10, 0 -1px 0 #052a10, 0 2px 0 #052a10; }
#cppop.st-c.down .cpp-d { color: #ff8476; text-shadow: 1px 0 0 #3a0905, -1px 0 0 #3a0905, 0 1px 0 #3a0905, 0 -1px 0 #3a0905, 0 2px 0 #3a0905; }

/* ---- short screens (a phone held sideways): a little smaller so the hero stays in sight */
@media (max-height: 480px) {
  #cppop.st-a .cpp-box { padding: 14px 22px 9px; gap: 4px; }
  #cppop.st-a .cpp-n, #cppop.st-c .cpp-n { font-size: 32px; }
  #cppop.st-a .cpp-d { font-size: 16px; padding: 2px 12px 3px; }
  #cppop.st-c .cpp-d { font-size: 20px; }
  #cppop.st-b .cpp-n { font-size: 26px; }
}

/* ---- the moves: in (a short pop), bump (a change added while it shows), out (fades up) */
#cppop.in .cpp-box { animation: cppIn 0.34s cubic-bezier(0.2, 1.5, 0.4, 1); }
#cppop.st-b.in .cpp-box { animation: cppInL 0.32s cubic-bezier(0.2, 1.3, 0.4, 1); }
#cppop.bump .cpp-box { animation: cppBump 0.3s ease-out; }
#cppop.out { animation: cppOut 0.42s ease-in forwards; }
@keyframes cppIn { from { opacity: 0; transform: scale(0.82); } }
@keyframes cppInL { from { opacity: 0; transform: translateX(-24px); } }
@keyframes cppBump { 40% { transform: scale(1.07); } }
@keyframes cppOut { to { opacity: 0; transform: translateY(-14px); } }