/* Attract mode, the "Live now" ad (attract-livenow.js): look #10 — the red pill with the count, the ticker of results
   along the bottom — with the site's Live now cards big in the middle, in a row that glides slowly, under a headline.
   The cards are the site's (sportbet.ba index Live now: the sport's photo, sport › league, LIVE, the period box, teams,
   score in the accent with the half-time score grey, the odds buttons). Only transform and opacity animate: the row
   and the ticker each glide as one layer, a price that moves flashes once (opacity), a goal bumps the score once. */
.atr-ad-livenow { font-family: 'Rubik', system-ui, sans-serif; color: #fff; }
.ln-bg { position: absolute; inset: 0; }
.ln-bg-radial { background: radial-gradient(ellipse at 30% 0%, rgba(255,45,85,.20), transparent 55%), radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--atr-accent) 18%, transparent), transparent 55%), #040604; }
.ln-pill { position: absolute; right: 64px; top: 46px; display: flex; align-items: center; gap: 14px; padding: 10px 26px; border-radius: 999px; background: #ff2d55; color: #fff;
  font-size: 30px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; z-index: 6; }
.ln-pill i { width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: ln-blink 1.2s steps(2) infinite; }
.ln-pill .ln-count { padding: 2px 14px; border-radius: 999px; background: rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
@keyframes ln-blink { 50% { opacity: 0; } }
.ln-words { position: absolute; left: 96px; top: 150px; width: 1728px; animation: atr-slide .6s var(--atr-ease) both; }
.ln-headline { font-size: 84px; font-weight: 900; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.ln-subline { margin-top: 12px; font-size: 36px; font-weight: 500; line-height: 1.25; color: rgba(255,255,255,.8); }

/* the card */
.ln-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background-color: #121812; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); }
.ln-meta { display: flex; align-items: center; min-width: 0; color: rgba(255,255,255,.85); font-weight: 500; line-height: 1.2; }
.ln-icon { flex: 0 0 auto; }
.ln-where { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; }
.ln-sport { flex: 0 0 auto; } .ln-sep { flex: 0 0 auto; opacity: .7; }
.ln-league { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ln-live { flex: 0 0 auto; border-radius: 4px; background: #e53935; color: #fff; font-weight: 700; letter-spacing: .04em; }
.ln-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.ln-min { border-radius: 6px; border: 2px solid color-mix(in srgb, var(--atr-accent) 70%, transparent); background: rgba(0,0,0,.4); text-align: center; font-weight: 700; white-space: pre-line; line-height: 1.1; }
.ln-teams { display: flex; flex-direction: column; min-width: 0; font-weight: 700; }
.ln-team { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-score { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.ln-score-line { display: flex; align-items: baseline; justify-content: flex-end; }
.ln-s { color: var(--atr-accent); font-weight: 800; display: inline-block; }
.ln-h { font-style: normal; color: rgba(255,255,255,.6); font-weight: 600; text-align: right; }
.ln-s.ln-bump { animation: ln-bump .9s cubic-bezier(.2,1.4,.3,1); }
@keyframes ln-bump { 0% { transform: scale(1.7); } 100% { transform: none; } }
.ln-odds { display: grid; grid-template-columns: repeat(var(--ln-n, 3), minmax(0, 1fr)); margin-top: auto; }
.ln-odd { display: flex; align-items: center; justify-content: space-between; min-width: 0; border-radius: 6px; background: rgba(20,24,20,.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ln-odd-k { color: rgba(255,255,255,.7); font-weight: 500; }
.ln-odd-v { font-weight: 700; font-variant-numeric: tabular-nums; }
.ln-odd.locked .ln-odd-v { color: rgba(255,255,255,.4); }
/* a moved price: a ring in the move's colour fades out (opacity only) */
.ln-odd { position: relative; }
.ln-odd::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
.ln-odd.up::after { box-shadow: inset 0 0 0 3px #34e07a; animation: ln-flash 1.6s ease-out; }
.ln-odd.down::after { box-shadow: inset 0 0 0 3px #ff4d4d; animation: ln-flash 1.6s ease-out; }
@keyframes ln-flash { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* the row of big cards: one layer gliding on a shared clock (attract-livenow.js row). The two moving layers (the row and
   the ticker) are opaque, so the compositor draws nothing beneath them each frame (Founder's performance gate: 95 % of
   a core with see-through layers, 67 % opaque, agents2 headless) */
.ln-row { position: absolute; left: 0; right: 0; top: 394px; height: 340px; overflow: hidden; border-top: 2px solid rgba(255,255,255,.08); border-bottom: 2px solid rgba(255,255,255,.08); }
.ln-row-run { position: absolute; left: 0; top: 0; height: 340px; display: flex; gap: 28px; padding-left: 96px; background: #050705; will-change: transform; }
@keyframes ln-glide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--ln-shift), 0, 0); } }
.ln-big { flex: 0 0 auto; width: 860px; height: 340px; padding: 26px 34px 28px; gap: 16px; border-radius: 22px; }
.ln-big .ln-meta { gap: 14px; font-size: 32px; } .ln-big .ln-icon { width: 40px; height: 40px; } .ln-big .ln-where { gap: 12px; }
.ln-big .ln-live { padding: 4px 14px; font-size: 26px; }
.ln-big .ln-info { gap: 26px; }
.ln-big .ln-min { min-width: 112px; max-width: 176px; padding: 10px 14px; font-size: 34px; color: color-mix(in srgb, var(--atr-accent) 60%, #fff); }
.ln-big .ln-team { font-size: 50px; line-height: 1.16; text-overflow: clip; }
.ln-big .ln-s { font-size: 54px; line-height: 1.07; min-width: 56px; text-align: right; } .ln-big .ln-h { font-size: 38px; min-width: 44px; margin-left: 14px; }
.ln-big .ln-odds { gap: 14px; } .ln-big .ln-odd { height: 84px; padding: 0 24px; }
.ln-big .ln-odd-k { font-size: 32px; } .ln-big .ln-odd-v { font-size: 44px; }

/* look #10's ticker */
.ln-icon-s { width: 30px; height: 30px; vertical-align: -6px; margin-right: 10px; }
.ln-v10-ticker { position: absolute; left: 0; right: 0; bottom: 190px; height: 74px; overflow: hidden; background: #111411; border-top: 2px solid rgba(255,255,255,.1); border-bottom: 2px solid rgba(255,255,255,.1); }
.ln-v10-run { position: absolute; left: 0; top: 0; height: 74px; display: flex; white-space: nowrap; background: #111411; will-change: transform; animation: ln-run 40s linear infinite; }
.ln-v10-seg { display: flex; }
.ln-v10-item { display: inline-flex; align-items: center; padding: 0 60px; height: 74px; font-size: 32px; font-weight: 700; white-space: pre; }
/* the score and the period in boxes of their own width: a live update never moves the items beside them */
.ln-v10-sc { display: inline-block; min-width: 4.6ch; margin: 0 .5ch; text-align: center; font-variant-numeric: tabular-nums; }
.ln-v10-pe { display: inline-block; min-width: 5ch; margin-left: 1.2ch; font-variant-numeric: tabular-nums; }
@keyframes ln-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .ln-v10-run, .ln-row-run, .ln-pill i { animation: none !important; } }