/* pulse.css — shared styles for the Prediction Pulse widget and detail pages.
   Load once site-wide (e.g. in your header include). */

:root{
  --kh-black:#0a0e0d;
  --kh-panel:#0d1512;
  --kh-line:#1c2b27;
  --kh-win:#33e28f;
  --kh-loss:#ff4d5e;
  --kh-draw:#f6c700;
  --kh-pending:#8296a3;
  --kh-abandoned:#7d8ea8;
  --kh-orange:#f4801e;
  --kh-text-0:#eef5f2;
  --kh-text-1:#a9bab3;
  --kh-header-dark:#062221; /* matches kickhour.com's .site-header background-color */
}

.kh-pulse-box{
  background:var(--kh-header-dark);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:clamp(10px,1.6vw,14px);
  padding:clamp(6px,1.1vw,8px) clamp(9px,2vw,16px) clamp(6px,1.1vw,8px) clamp(8px,1.8vw,14px);
  display:flex; align-items:center; gap:clamp(6px,1.4vw,12px);
  cursor:pointer; min-width:0; max-width:100%; box-sizing:border-box; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease, background .18s ease;
}
.kh-pulse-box:hover{ background:#0a3230; border-color:var(--kh-orange); transform:translateY(-1px); }
.kh-pulse-box:hover .kh-pb-arrow{ opacity:1; transform:translateX(2px); }

.kh-pb-live{
  width:clamp(5px,1vw,7px); height:clamp(5px,1vw,7px); border-radius:50%;
  background:var(--kh-win); box-shadow:0 0 8px var(--kh-win); flex-shrink:0;
  animation:khBlip 1.8s ease-in-out infinite;
}
@keyframes khBlip{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(0.65);} }

.kh-pb-label{ display:flex; flex-direction:column; gap:0px; flex-shrink:0; min-width:0; }
.kh-pb-title{ font-family:'JetBrains Mono',monospace; font-size:clamp(7px,1.2vw,8.5px); letter-spacing:0.1em; text-transform:uppercase; color:var(--kh-text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:clamp(60px,14vw,150px); line-height:1.3; }
.kh-pb-sport{ font-size:clamp(10px,2vw,12px); font-weight:700; color:#fff; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; line-height:1.2; }
.kh-pb-icon-wrap{ display:inline-flex; align-items:center; flex-shrink:0; }
.kh-pb-sport-text{ white-space:nowrap; }

.kh-pb-spark{ width:clamp(46px,7.5vw,76px); height:clamp(22px,3.2vw,28px); flex-shrink:0; display:block; overflow:visible; }

/* Bar chart — each bar is one of the last 7 days, height = that day's win rate */
.kh-bar{
  animation:khBarGrow 0.7s cubic-bezier(.34,1.4,.64,1) backwards;
  transform-box:fill-box; transform-origin:bottom center;
}
@keyframes khBarGrow{ from{transform:scaleY(0);} to{transform:scaleY(1);} }
.kh-bar-last{
  animation:khBarGrow 0.7s cubic-bezier(.34,1.4,.64,1) backwards, khBarPulse 1.6s ease-in-out infinite 0.7s;
  filter:drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 10px currentColor);
}
@keyframes khBarPulse{ 0%,100%{opacity:1; filter:drop-shadow(0 0 2px currentColor) drop-shadow(0 0 6px currentColor) drop-shadow(0 0 10px currentColor);} 50%{opacity:0.75; filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor) drop-shadow(0 0 16px currentColor);} }
.kh-arrow-path{ opacity:0.95; }
.kh-arrowhead{ filter:drop-shadow(0 0 2px rgba(244,128,30,0.8)); }

.kh-pb-pct{ font-family:'Bebas Neue',sans-serif; font-size:clamp(15px,3.6vw,22px); line-height:1; flex-shrink:0; min-width:clamp(28px,6.5vw,46px); color:var(--kh-text-1); }
.kh-pb-pct.win{ color:var(--kh-win); }
.kh-pb-pct.loss{ color:var(--kh-loss); }
.kh-pb-sub{ font-family:'JetBrains Mono',monospace; font-size:clamp(7px,1.2vw,8px); color:var(--kh-text-1); margin-top:-1px; white-space:nowrap; }
.kh-pb-arrow{ color:var(--kh-orange); font-size:clamp(11px,2vw,14px); opacity:0.55; transition:opacity .15s ease, transform .15s ease; flex-shrink:0; }

@keyframes khFreshFlash{
  0%{ border-color:var(--kh-orange); box-shadow:0 0 0 0 rgba(244,128,30,0.5); }
  100%{ border-color:var(--kh-line); box-shadow:0 0 0 8px rgba(244,128,30,0); }
}
.kh-pulse-box.kh-flash{ animation:khFreshFlash 1.1s ease-out; }

/* Heartbeat / EKG icon */
.kh-ekg-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; vertical-align:middle;
  width:clamp(22px,5vw,32px); height:clamp(22px,5vw,32px);
}
.kh-ekg-icon svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 0 4px rgba(51,226,143,0.85)); overflow:visible; }
.kh-ekg-line{ stroke-dasharray:90; animation:khEkgFlow 2.2s linear infinite; }
@keyframes khEkgFlow{ 0%{stroke-dashoffset:120;} 100%{stroke-dashoffset:0;} }
.kh-ekg-dot{ animation:khEkgBlip 2.2s ease-in-out infinite; }
@keyframes khEkgBlip{ 0%,80%,100%{opacity:0.3; r:2.5;} 88%{opacity:1; r:4;} }

/* Structural breakpoints only — sizing itself is fluid via clamp() above */
@media (min-width:1600px){ .kh-pb-spark{width:82px; height:29px;} .kh-pb-pct{font-size:24px;} }
@media (max-width:520px){ .kh-pb-arrow{display:none;} }
@media (max-width:480px){ .kh-pb-title{display:none;} .kh-pb-spark{width:34px; min-width:34px;} }
@media (max-width:400px){ .kh-pb-sub{display:none;} .kh-pb-spark{display:none;} }
@media (max-width:340px){ .kh-pb-sport-text{display:none;} } /* icon stays visible even here */