/* Fort Knox Active Bets — motion + interactive chrome (EXTERNAL ONLY)
   Demo: zoom/focus, live pulse, strong DETAILS/ESPN/Close. prefers-reduced-motion safe. */

:root{
  --fk-green:#1db954;
  --fk-green-dim:rgba(29,185,84,.22);
  --fk-glow:rgba(29,185,84,.45);
  --fk-card:#101820;
  --fk-line:#1e2a3a;
  --fk-red:#ff5c5c;
  --fk-amber:#f0c14b;
}

@keyframes fkPulseGlow{
  0%,100%{box-shadow:0 0 10px var(--fk-green-dim), inset 0 0 0 1px rgba(29,185,84,.25)}
  50%{box-shadow:0 0 28px var(--fk-glow), inset 0 0 0 1px rgba(29,185,84,.55)}
}
@keyframes fkBlink{
  0%,100%{opacity:1; filter:brightness(1)}
  50%{opacity:.55; filter:brightness(1.25)}
}
@keyframes fkMarkTick{
  0%,100%{text-shadow:0 0 0 transparent}
  40%{text-shadow:0 0 12px var(--fk-glow); color:#b6ffd0}
}
@keyframes fkLiveDot{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.35); opacity:.65}
}
@keyframes fkBarShine{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes fkStageIn{
  from{opacity:.55; transform:scale(.96)}
  to{opacity:1; transform:scale(1)}
}

/* Hero pills — live pulse */
.hero .pill{
  animation:fkPulseGlow 2.6s ease-in-out infinite;
  transition:transform .2s ease, border-color .2s;
}
.hero .pill:hover{transform:translateY(-2px); border-color:var(--fk-green)}

/* Live sync strip (if present) */
.ab-live-sync{
  display:flex; align-items:center; gap:8px;
  padding:0 14px 10px; font-size:.78rem; font-weight:700; color:var(--fk-green);
}
.ab-live-sync .dot{
  width:8px; height:8px; border-radius:50%; background:var(--fk-green);
  box-shadow:0 0 10px var(--fk-glow);
  animation:fkLiveDot 1.2s ease-in-out infinite;
}

/* Cards — hover lift + focus stage */
.ab-card{
  position:relative;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s, filter .22s;
  will-change:transform;
  cursor:pointer;
  outline:none;
}
.ab-card:hover{
  transform:scale(1.018);
  box-shadow:0 8px 32px rgba(0,0,0,.45), 0 0 28px var(--fk-green-dim);
  border-color:rgba(29,185,84,.85);
  z-index:2;
}
.ab-card:focus-within,
.ab-card.is-focused{
  transform:scale(1.04);
  box-shadow:0 12px 48px rgba(0,0,0,.55), 0 0 40px var(--fk-glow);
  border-color:var(--fk-green);
  z-index:5;
  animation:fkStageIn .28s ease-out;
}
body.ab-zoomed .ab-card:not(.is-focused){
  filter:brightness(.45) saturate(.7);
  transform:scale(.98);
  pointer-events:none;
}
body.ab-zoomed .ab-card.is-focused{
  transform:scale(1.06);
  max-width:920px;
  margin-left:auto; margin-right:auto;
}

.ab-live{
  animation:fkBlink 1.25s ease-in-out infinite;
  letter-spacing:.04em;
}
.ab-live::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:5px;
  border-radius:50%; background:#04140a; vertical-align:middle;
  box-shadow:0 0 0 2px rgba(4,20,10,.25);
}
.mark-live{animation:fkMarkTick 2.2s ease-in-out infinite; font-variant-numeric:tabular-nums}

/* YES meter (if HTML crop adds .ab-meter) */
.ab-meter{
  height:10px; border-radius:999px; background:#0a121a; border:1px solid var(--fk-line);
  overflow:hidden; margin:0 0 10px;
}
.ab-meter > i{
  display:block; height:100%; width:var(--yes,42%);
  background:linear-gradient(90deg,#0e3d22,#1db954,#7CFFB2,#1db954);
  background-size:200% 100%;
  animation:fkBarShine 2.8s linear infinite;
  border-radius:999px;
  box-shadow:0 0 12px var(--fk-glow);
}

/* Action affordances — hierarchy */
.ab-actions{gap:10px; align-items:center}
.ab-actions .detail-btn,
button.detail-btn{
  appearance:none;
  border:2px solid var(--fk-green) !important;
  background:linear-gradient(180deg,#1a3d28,#0f2418) !important;
  color:#e8ffe8 !important;
  font-weight:900 !important;
  font-size:.82rem !important;
  padding:10px 16px !important;
  border-radius:999px !important;
  box-shadow:0 0 16px var(--fk-green-dim);
  letter-spacing:.03em;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.ab-actions .detail-btn:hover,
button.detail-btn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 28px var(--fk-glow);
  filter:brightness(1.08);
}
.ab-actions .detail-btn:active,
button.detail-btn:active{transform:scale(.98)}

a.espn, button.espn{
  padding:10px 16px !important;
  font-size:.82rem !important;
  box-shadow:0 0 14px rgba(221,0,0,.35);
  transition:transform .15s, box-shadow .15s;
}
a.espn:hover, button.espn:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 0 24px rgba(255,60,60,.55);
}

button.panic-one{
  padding:10px 16px !important;
  font-size:.82rem !important;
  border-width:2px !important;
  transition:transform .15s, background .15s, box-shadow .15s;
}
button.panic-one:hover{
  background:#4a1818 !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(255,92,92,.35);
  transform:translateY(-1px);
}

button.ab-focus{
  appearance:none;
  border:1px solid #2a4a3a;
  background:#122018;
  color:#b6ffd0;
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
  font-size:.78rem;
  cursor:pointer;
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
button.ab-focus:hover,
.ab-card.is-focused button.ab-focus{
  border-color:var(--fk-green);
  box-shadow:0 0 14px var(--fk-green-dim);
  transform:translateY(-1px);
}

/* Detail pane pop */
.detail-pane:not([hidden]){
  animation:fkStageIn .25s ease-out;
  border-color:rgba(240,193,75,.45);
  box-shadow:0 0 20px rgba(240,193,75,.12);
}

/* ESPN TV box */
#espnTvBox{
  transition:box-shadow .25s, border-color .25s;
}
#espnTvBox[style*="block"],
#espnTvBox.is-open{
  box-shadow:0 0 32px rgba(221,0,0,.25);
  border-color:#f44 !important;
}

/* Zoom HUD (injected by JS) */
.ab-zoom-hud{
  position:sticky; top:52px; z-index:18;
  display:none; gap:8px; flex-wrap:wrap; align-items:center;
  margin:0 14px 8px; padding:8px 10px;
  background:#0a1410ee; border:1px solid #1db95466; border-radius:12px;
  backdrop-filter:blur(8px);
}
body.ab-zoomed .ab-zoom-hud{display:flex}
.ab-zoom-hud button{
  appearance:none; border:1px solid #2a4a3a; background:#122018; color:#e8ffe8;
  border-radius:999px; padding:8px 12px; font-weight:800; font-size:.75rem; cursor:pointer;
}
.ab-zoom-hud button:hover{border-color:var(--fk-green)}
.ab-zoom-hud .hint{color:#8aa0b5; font-size:.72rem; margin-left:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}


/* DEF-AB-001/002: never let chrome steal Active Bets controls */
button.detail-btn, button.espn, button.espn-top, #espnTopBtn, #espnTvBox, #espnTvBox * {
  pointer-events: auto !important;
  position: relative;
  z-index: 80 !important;
}
#espnTvBox { z-index: 90 !important; }
.detail-pane { z-index: 85; position: relative; }

.ab-live-sync .stamp{margin-left:0.15em}

/* DEF-AB-LINEITEM-001 — dense line-item face + flash */
.ab-line-face{display:grid;grid-template-columns:minmax(160px,2.4fr) 72px 88px 100px 110px 130px 100px;gap:10px;align-items:start;margin-bottom:8px}
.ab-lf-event h2{margin:0 0 6px;font-size:.92rem;line-height:1.3}
.ab-side{display:inline-flex;padding:2px 8px;border-radius:999px;font-weight:900;font-size:.72rem}
.ab-side.yes{background:#1db954;color:#04140a}
.ab-side.no{background:#ff6b6b;color:#2a0808}
.ab-entry{display:block;margin-top:4px;font-weight:700;font-variant-numeric:tabular-nums}
.ab-lf-clip .muted,.ab-lf-upd .muted{display:block;font-size:.65rem;margin-top:2px;color:var(--fk-muted,#8aa0b5)}
.ab-lf-clip .lbl,.ab-lf-mark .lbl,.ab-lf-score .lbl,.ab-lf-upd .lbl,.ab-lf-end .lbl{display:block;font-size:.62rem;color:var(--fk-muted,#8aa0b5);text-transform:uppercase;letter-spacing:.05em;font-weight:800}
.ab-lf-score .score-val{font-size:1.05rem;font-weight:900;font-variant-numeric:tabular-nums;color:#fff}
.ab-status-txt{display:block;font-size:.68rem;color:#b6f5d0;font-weight:700;margin-top:2px}
.ab-upd-chip{display:inline-block;max-width:100%;padding:3px 8px;border-radius:999px;background:#1a2430;border:1px solid rgba(201,162,39,.35);font-size:.68rem;font-weight:800;color:var(--fk-cream,#f3e7c7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u.up{color:var(--fk-green,#1db954)}
.u.down{color:var(--fk-danger,#ff6b6b)}
.u.flat{color:var(--fk-muted,#8aa0b5)}
.ab-flash{animation:abFlash .85s ease}
@keyframes abFlash{0%{background:rgba(201,162,39,.4)}100%{background:transparent}}
@media(max-width:1100px){
  .ab-line-face{grid-template-columns:1fr 1fr;gap:8px}
  .ab-lf-event{grid-column:1/-1}
  .ab-lf-score,.ab-lf-mark,.ab-lf-upd{background:#0a121a;border:1px solid rgba(29,185,84,.28);border-radius:10px;padding:8px}
}
@media(max-width:700px){
  .ab-line-face{grid-template-columns:1fr}
}

/* DEF-SHARE-SCROLL-001 */
.fk-share-btn{appearance:none;border:1px solid rgba(201,162,39,.55);background:linear-gradient(165deg,#1a1810,#121820);color:#f3e7c7;border-radius:999px;padding:8px 12px;min-height:36px;font-weight:800;font-size:.78rem;cursor:pointer}
.fk-share-btn.is-busy{opacity:.7}
.fk-share-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(20px,env(safe-area-inset-bottom));z-index:9600;display:none;max-width:min(92vw,420px);padding:12px 14px;border-radius:14px;background:linear-gradient(165deg,#0e1218,#132018);border:1px solid rgba(201,162,39,.55);color:#f3e7c7;font-weight:750;font-size:.82rem;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.fk-share-toast.is-on{display:block}
.fk-share-toast a{color:#c9a227;font-weight:900}