/* Live Betting — static «Örnek canlı ekran» (TZ §13.3 page 15). Uses .screen/.lrow/.score from home.css. */
.live-page-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.live-page-grid .lead { margin-top: 12px; }
.live-terms { display: grid; gap: 14px; margin-top: 22px; }
.live-terms li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.live-terms b { color: var(--color-navy); }
.live-terms p { color: var(--color-muted); font-size: 15px; line-height: 22px; }
.live-feature { background: var(--color-navy); color: #fff; padding: 8px 22px 22px; box-shadow: var(--shadow-lg); }
.lf-board { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px 0 10px; }
.lf-team b { display: block; font-size: 18px; line-height: 24px; }
.lf-team small { color: var(--on-navy-muted); font-size: 13px; }
.lf-team--away { text-align: right; }
.lf-score .seat { min-width: 52px; height: 52px; font-size: 26px; }
.lf-state { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--on-navy); font-size: 13px; font-weight: 600; }
.lf-odds { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 14px; }
.lf-stats { display: grid; gap: 10px; margin-top: 14px; }
.lf-stats > div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: 13px; color: var(--on-navy); }
.lf-stats .num { text-align: right; }
.lf-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.lf-bar i { display: block; height: 100%; width: var(--w); background: var(--color-brand); border-radius: 6px; }
.lf-detail { margin-top: 6px; }
.live-feature .note { color: var(--on-navy-muted); }

.live-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 14px; }
.live-card { display: grid; gap: 12px; padding: 18px; border-radius: var(--r16); background: #fff; border: 1px solid var(--color-line); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.live-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.live-card[hidden] { display: none; }
.live-card.is-in-anim { animation: fadeUp .3s var(--ease); }
.lc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--color-muted); font-size: 13px; }
.lc-state { margin-left: auto; font-weight: 600; }
.lc-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lc-mid a { color: var(--color-navy); text-decoration: none; min-width: 0; }
.lc-mid a:hover b { color: var(--brand-ink); text-decoration: underline; }
.lc-mid .score i { color: var(--color-muted); }
.move-demo .move-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-line); }
.odd-static { display: inline-grid; place-items: center; min-width: 64px; height: 40px; border-radius: 10px; background: var(--color-canvas); border: 1px solid var(--color-line); font-weight: 800; color: var(--color-navy); }
.move-row .pill { min-width: 104px; justify-content: center; }
.two-cats + .demo-note { margin-top: 24px; }

@media (max-width: 1100px) { .live-page-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 760px) {
  .live-feature { padding: 4px 14px 16px; }
  .lf-score .seat { min-width: 42px; height: 42px; font-size: 20px; }
  .lf-team b { font-size: 15px; line-height: 20px; }
  .lf-stats > div { grid-template-columns: 1fr 70px; }
  .lf-bar { grid-column: 1 / -1; grid-row: 2; }
  .live-rows { grid-template-columns: 1fr; }
  .move-demo .move-row { grid-template-columns: minmax(0, 1fr) auto; }
  .move-row .pill { grid-column: 1 / -1; justify-self: start; }
}