
/* az-live-widget.css — v4 (single outcome label; slot name below; compact mobile; inline CTA on wins) */
:root {
  --az-blue:#1f7aff; --az-blue-600:#1666db; --az-bg:#ffffff; --az-text:#0f1b2d; --az-muted:#6b7280;
  --az-win:#16a34a; --az-loss:#ef4444; --az-chip:#f1f5f9; --az-border:#e5e7eb; --az-shadow:0 14px 40px rgba(31,122,255,.16);
  --az-radius:16px; --az-highlight: rgba(31,122,255,.14);
}
.azlw { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.azlw * { box-sizing: border-box; }

.azlw .az-wrap{max-width:820px;margin:24px auto;padding:0 12px}

/* Bonus bar */
.azlw .az-bonus{display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:linear-gradient(180deg,var(--az-blue),var(--az-blue-600));color:#fff;border-radius:var(--az-radius);
  padding:14px 16px;box-shadow:var(--az-shadow);margin-bottom:12px;position:relative;overflow:hidden;}
.azlw .az-bonus:before{content:"";position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:radial-gradient(closest-side,rgba(255,255,255,.18),transparent 70%);transform:translateY(-10%) rotate(-8deg);}
.azlw .az-bonus-title{font-weight:900;font-size:16px;letter-spacing:.2px;margin-bottom:4px}
.azlw .az-bonus-line{display:flex;align-items:baseline;gap:8px}
.azlw .az-bonus-amount{font-size:22px;font-weight:900}
.azlw .az-bonus-plus{opacity:.95;font-weight:800}
.azlw .az-bonus-fs{font-size:18px;font-weight:900}
.azlw .az-bonus-note{margin:4px 0 0;font-size:12px;opacity:.95}
.azlw .az-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;
  text-decoration:none;font-weight:900;border:0;cursor:pointer;background:#fff;color:var(--az-blue); box-shadow:0 6px 18px rgba(0,0,0,.12);white-space:nowrap;}
.azlw .az-btn:hover{transform:translateY(-1px);filter:brightness(.98)}
.azlw .az-btn:active{transform:translateY(0)}

/* Card */
.azlw .az-card{background:var(--az-bg);border:1px solid var(--az-border);border-radius:var(--az-radius);
  box-shadow:var(--az-shadow);overflow:hidden;}
.azlw .az-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:linear-gradient(180deg,var(--az-blue),var(--az-blue-600));color:#fff;}
.azlw .az-title{font-weight:900;letter-spacing:.3px;font-size:14px}
.azlw .az-legend{font-size:11px;opacity:.95;display:flex;align-items:center;gap:10px}
.azlw .az-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.azlw .az-dot.win{background:var(--az-win)} .azlw .az-dot.loss{background:var(--az-loss)}
.azlw .az-ticker{max-height:420px;overflow:auto;padding:4px 6px;background:#fff;scroll-behavior:smooth}

/* Row + animation (2-column layout: icon | content) */
.azlw .az-item{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;
  padding:8px 6px;border-bottom:1px dashed var(--az-border);opacity:0;transform:translateY(-6px) scale(.99);
  animation:azlwEnter .55s cubic-bezier(.22,.8,.34,1) forwards; position:relative;}
.azlw .az-item:last-child{border-bottom:none}
.azlw .az-side{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--az-chip)}
.azlw .az-side.win{outline:2px solid rgba(22,163,74,.15)} .azlw .az-side.loss{outline:2px solid rgba(239,68,68,.15)}
.azlw .az-side svg{width:14px;height:14px}

/* Content */
.azlw .az-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.azlw .az-top{display:flex;align-items:center;gap:8px;min-width:0}
.azlw .az-badge{font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap}
.azlw .az-badge.win{background:rgba(22,163,74,.12);color:var(--az-win);border:1px solid rgba(22,163,74,.2)}
.azlw .az-badge.loss{background:rgba(239,68,68,.12);color:var(--az-loss);border:1px solid rgba(239,68,68,.2)}

.azlw .az-player{display:inline-flex;align-items:center;gap:6px;min-width:0}
.azlw .az-flag{width:14px;height:10px;border:1px solid rgba(0,0,0,.08);border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.03) inset}
.azlw .az-name{font-weight:900;color:var(--az-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}

.azlw .az-amount{margin-left:auto;font-weight:900;white-space:nowrap}
.azlw .az-inline-cta{margin-left:6px;display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:10px;
  background:var(--az-blue);color:#fff;text-decoration:none;font-weight:800;font-size:12px;line-height:1;white-space:nowrap;flex:0 0 auto;}
.azlw .az-inline-cta:hover{filter:brightness(.98);transform:translateY(-1px)}

.azlw .az-bottom{display:flex;align-items:center;gap:8px;color:var(--az-muted);font-size:12px;min-width:0}
.azlw .az-slot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%;}
.azlw .az-chip{background:var(--az-chip);border-radius:999px;padding:2px 8px;font-size:11px;color:var(--az-text)}
.azlw .az-meta{margin-left:auto;display:flex;gap:8px;opacity:.9}

/* highlight animation for new wins */
@keyframes azlwPulse { 0%{ box-shadow:0 0 0 0 var(--az-highlight); } 70%{ box-shadow:0 0 0 8px rgba(31,122,255,0); } 100%{ box-shadow:0 0 0 0 rgba(31,122,255,0);} }
.azlw .az-item.win-highlight{animation: azlwEnter .55s cubic-bezier(.22,.8,.34,1) forwards, azlwPulse 1.2s ease-out 1; background:linear-gradient(0deg, rgba(31,122,255,0.06), transparent 40%);}

@keyframes azlwEnter { to{ opacity:1; transform:translateY(0) scale(1);} }

/* Footer + bottom CTA */
.azlw .az-footer{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f8fafc;border-top:1px solid var(--az-border);font-size:12px;color:var(--az-muted)}
.azlw .az-cta-wrap{display:flex;justify-content:center;margin-top:10px}
.azlw .az-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;background:linear-gradient(180deg,var(--az-blue),var(--az-blue-600));
  color:#fff;text-decoration:none;font-weight:900;box-shadow:var(--az-shadow);white-space:nowrap}
.azlw .az-cta:hover{transform:translateY(-1px);filter:brightness(.98)}

/* Very compact mobile */
@media (max-width:560px){
  .azlw .az-wrap{padding:0 8px}
  .azlw .az-bonus{padding:12px 12px}
  .azlw .az-bonus-title{font-size:15px}
  .azlw .az-bonus-amount{font-size:20px}
  .azlw .az-bonus-fs{font-size:16px}
  .azlw .az-btn{padding:9px 12px}
  .azlw .az-title{font-size:13px}
  .azlw .az-ticker{max-height:400px;padding:4px}
  .azlw .az-item{padding:7px 6px;gap:8px}
  .azlw .az-name{max-width:38vw}
  .azlw .az-slot{max-width:64%}
  .azlw .az-inline-cta{padding:6px 9px;font-size:11.5px}
  .azlw .az-cta{padding:10px 14px}
}
