/* Pawball 5.0 - dedicated full-screen live match presentation */

body.match-live-active #app { display: none; }
body.match-live-active { overflow: hidden; }

#live-match {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(184, 134, 11, .11), transparent 34%),
    linear-gradient(145deg, #173423 0%, #244a30 50%, #142e20 100%);
  color: var(--cream);
}
.lm-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.4vh, 16px);
  padding: clamp(10px, 2vw, 24px);
  overflow: hidden;
}
.lm-topbar {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(253, 248, 235, .68);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lm-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--cream);
  font-weight: 750;
}
.lm-live-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(217, 169, 60, .12);
  animation: lmLivePulse 2.3s ease-in-out infinite;
}

.lm-stage {
  --lm-aura: rgba(75, 145, 91, .22);
  position: relative;
  isolation: isolate;
  width: min(1180px, 100%);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.3vh, 14px);
  padding: clamp(12px, 2vw, 26px);
  border: 1px solid rgba(216, 184, 116, .32);
  border-radius: clamp(18px, 2.5vw, 30px);
  background: linear-gradient(160deg, rgba(11, 42, 28, .88), rgba(26, 61, 39, .82));
  box-shadow: 0 26px 70px rgba(2, 15, 9, .42), inset 0 1px rgba(255, 255, 255, .05), 0 0 36px var(--lm-aura);
  backdrop-filter: blur(14px);
  transition: box-shadow 500ms ease, border-color 500ms ease;
}
.lm-stage[data-aura-state="buildup"] { --lm-aura: rgba(110, 161, 93, .28); }
.lm-stage[data-aura-state="attack"],
.lm-stage[data-aura-state="shot"] { --lm-aura: rgba(197, 152, 58, .30); border-color: rgba(217, 169, 60, .42); }
.lm-stage[data-aura-state="danger"] { --lm-aura: rgba(217, 169, 60, .46); border-color: rgba(227, 194, 126, .58); }
.lm-stage[data-aura-state="goal"] { --lm-aura: rgba(217, 169, 60, .62); border-color: rgba(239, 211, 150, .78); }
.lm-stage[data-aura-state="save"] { --lm-aura: rgba(110, 174, 150, .35); }
.lm-stage[data-aura-state="halftime"],
.lm-stage[data-aura-state="fulltime"],
.lm-stage[data-aura-state="paused"] { --lm-aura: rgba(184, 134, 11, .18); }

/* MatchAura: presentation-only liquid layers behind current engine data. */
.lm-aura {
  position: absolute;
  inset: 16% 18% 17%;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  filter: blur(22px);
  transition: opacity 450ms ease, filter 450ms ease;
}
.lm-aura-orb,
.lm-aura-core {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.lm-aura-one {
  width: 58%; height: 76%; left: 8%; top: 8%;
  background: radial-gradient(circle, rgba(71, 154, 95, .42), transparent 69%);
  animation: lmAuraDriftOne 7s ease-in-out infinite;
}
.lm-aura-two {
  width: 53%; height: 70%; right: 5%; bottom: 4%;
  background: radial-gradient(circle, rgba(194, 145, 50, .30), transparent 70%);
  animation: lmAuraDriftTwo 8.4s ease-in-out infinite;
}
.lm-aura-core {
  width: 44%; height: 58%; left: 29%; top: 20%;
  background: radial-gradient(circle, var(--lm-aura), transparent 68%);
  animation: lmAuraHeartbeat 4.6s ease-in-out infinite;
}
.lm-aura[data-aura-state="attack"] .lm-aura-core,
.lm-aura[data-aura-state="shot"] .lm-aura-core { animation-duration: 2.3s; }
.lm-aura[data-aura-state="danger"] .lm-aura-core { animation-duration: 1.35s; }
.lm-aura[data-aura-state="goal"] { opacity: .96; filter: blur(16px); }
.lm-aura[data-aura-state="goal"] .lm-aura-core { animation: lmAuraGoal 1.35s ease-out both; }
.lm-aura[data-aura-state="halftime"],
.lm-aura[data-aura-state="fulltime"],
.lm-aura[data-aura-state="paused"] { opacity: .38; }

.lm-head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 34px);
  padding: 2px clamp(2px, 2vw, 18px);
}
.lm-team { min-width: 0; display: flex; align-items: center; gap: clamp(8px, 1.5vw, 16px); }
.lm-away { justify-content: flex-end; text-align: right; }
.lm-badge { width: clamp(38px, 5vw, 62px); height: clamp(38px, 5vw, 62px); object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .25)); }
.lm-tname { min-width: 0; font-family: var(--serif); font-weight: 670; font-size: clamp(.88rem, 1.7vw, 1.35rem); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-centre { min-width: clamp(112px, 16vw, 190px); text-align: center; }
.lm-score {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(8px, 1.6vw, 20px);
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  font-weight: 780;
  line-height: .95;
  color: #fff8e7;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 28px rgba(0, 0, 0, .28);
}
.lm-score.goal-pulse { animation: lmScoreGoal 900ms cubic-bezier(.2, .9, .25, 1); }
.lm-dash { color: rgba(253, 248, 235, .35); font-size: .55em; }
.lm-clock { display: flex; justify-content: center; gap: 9px; margin-top: 7px; color: rgba(253, 248, 235, .66); font-size: .78rem; letter-spacing: .04em; }
.lm-clock strong { color: var(--gold-bright); font-variant-numeric: tabular-nums; }

.lm-event-timeline { position: relative; z-index: 2; min-height: 9px; display: flex; justify-content: center; gap: 6px; }
.lm-event-timeline span { width: 6px; height: 6px; border-radius: 50%; background: rgba(253, 248, 235, .18); transition: transform 280ms ease, background 280ms ease, box-shadow 280ms ease; }
.lm-event-timeline span.current { transform: scale(1.4); }
.lm-event-timeline span[data-state="buildup"] { background: rgba(115, 179, 128, .68); }
.lm-event-timeline span[data-state="attack"], .lm-event-timeline span[data-state="shot"] { background: rgba(217, 169, 60, .72); }
.lm-event-timeline span[data-state="danger"] { background: #e6bc62; box-shadow: 0 0 9px rgba(230, 188, 98, .7); }
.lm-event-timeline span[data-state="goal"] { background: #f4d080; box-shadow: 0 0 12px rgba(244, 208, 128, .9); }
.lm-event-timeline span[data-state="save"] { background: #83c8b1; }
.lm-event-timeline span[data-state="halftime"] { background: rgba(253, 248, 235, .48); }

.lm-match-grid {
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(230px, .8fr);
  gap: clamp(10px, 2vw, 22px);
}
.lm-commentary-panel,
.lm-momentum-card,
.lm-live-stats {
  border: 1px solid rgba(230, 211, 167, .14);
  border-radius: 20px;
  background: rgba(3, 27, 18, .42);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  backdrop-filter: blur(9px);
}
.lm-commentary-panel { min-height: 0; display: flex; flex-direction: column; padding: clamp(12px, 1.8vw, 20px); }
.lm-section-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(253, 248, 235, .52); font-size: .68rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.lm-section-label em { color: var(--gold-bright); font-style: normal; letter-spacing: .06em; }
.lm-feed { min-height: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding-top: 9px; overflow: hidden; }
.lm-line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 14px;
  color: rgba(253, 248, 235, .54);
  font-size: clamp(.78rem, 1.2vw, .95rem);
  line-height: 1.3;
  transition: opacity 300ms ease, transform 300ms ease;
}
.lm-line span { color: rgba(217, 169, 60, .64); font-size: .75em; font-weight: 760; font-variant-numeric: tabular-nums; padding-top: 2px; }
.lm-line strong { font-weight: 590; }
.lm-line.lm-age-0 { color: var(--cream); background: rgba(35, 82, 51, .58); border: 1px solid rgba(217, 169, 60, .18); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); animation: lmFeedIn 440ms cubic-bezier(.2, .85, .25, 1); }
.lm-line.lm-age-1 { opacity: .64; transform: scale(.985); }
.lm-line.lm-age-2 { opacity: .40; transform: scale(.97); }
.lm-line.lm-age-3 { opacity: .22; transform: scale(.955); }
.lm-line-goal.lm-age-0 { color: #fff5d8; border-color: rgba(232, 193, 108, .54); background: rgba(112, 75, 20, .46); font-family: var(--serif); font-size: clamp(.9rem, 1.45vw, 1.08rem); }
.lm-line-major.lm-age-0 { border-color: rgba(217, 169, 60, .38); background: rgba(80, 63, 25, .38); }
.lm-line-active.lm-age-0 { background: rgba(31, 69, 45, .62); }
.lm-line-phase.lm-age-0 { text-transform: uppercase; letter-spacing: .08em; }

.lm-support { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.lm-momentum-card { padding: 13px 14px; }
.lm-momentum { position: relative; height: 7px; margin: 14px 0 7px; border-radius: 999px; overflow: hidden; background: linear-gradient(90deg, rgba(62, 142, 80, .34) 0 50%, rgba(197, 152, 58, .30) 50% 100%); }
.lm-momentum::after { content: ""; position: absolute; left: 50%; top: -2px; width: 1px; height: 11px; background: rgba(253, 248, 235, .52); }
.lm-momentum span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4b9a5d, #d1a348); transition: width 800ms ease; }
.lm-momentum i { position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); border-radius: inherit; }
.lm-mom-teams { display: flex; justify-content: space-between; gap: 8px; color: rgba(253, 248, 235, .48); font-size: .65rem; }
.lm-mom-teams span { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-live-stats { min-height: 0; padding: 9px 13px; display: grid; align-content: center; }
.lm-live-stats > div { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding: 8px 2px; border-bottom: 1px solid rgba(253, 248, 235, .07); font-variant-numeric: tabular-nums; }
.lm-live-stats > div:last-child { border-bottom: 0; }
.lm-live-stats span { font-weight: 760; color: var(--cream); }
.lm-live-stats span:last-child { text-align: right; color: #e4c57f; }
.lm-live-stats em { color: rgba(253, 248, 235, .46); font-style: normal; font-size: .7rem; }

.lm-goal-hero,
.lm-phase-card {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 380ms ease, visibility 380ms ease;
  background: radial-gradient(circle, rgba(24, 65, 39, .78), rgba(5, 25, 16, .88));
}
.lm-goal-hero.visible,
.lm-phase-card.visible { opacity: 1; visibility: visible; }
.lm-goal-hero > div,
.lm-phase-card > div { text-align: center; animation: lmHeroIn 680ms cubic-bezier(.15, .9, .2, 1); }
.lm-goal-hero span,
.lm-phase-card span,
.lm-ft-hero span { display: block; color: var(--gold-bright); font-size: .72rem; font-weight: 820; letter-spacing: .2em; text-transform: uppercase; }
.lm-goal-hero strong { display: block; margin: 10px 0 7px; font-family: var(--serif); font-size: clamp(2rem, 7vw, 5.2rem); line-height: .95; color: #fff5d8; text-shadow: 0 0 32px rgba(217, 169, 60, .45); }
.lm-goal-hero em { color: rgba(253, 248, 235, .7); font-style: normal; }
.lm-phase-card strong { display: block; margin: 10px 0; font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 4.5rem); color: var(--cream); }
.lm-phase-card p { color: rgba(253, 248, 235, .64); }

.lm-controls { position: relative; z-index: 9; display: flex; justify-content: center; align-items: center; gap: 12px; }
.lm-live-controls { display: flex; justify-content: center; align-items: center; gap: 12px; }
.lm-controls [hidden] { display: none !important; }
.lm-controls button { min-height: 38px; border: 1px solid rgba(216, 184, 116, .35); border-radius: 999px; padding: 7px 17px; color: var(--cream); background: rgba(7, 31, 20, .48); font-size: .78rem; font-weight: 720; text-align: center; }
.lm-controls button:hover, .lm-controls button:focus-visible, .lm-controls button.active { border-color: rgba(217, 169, 60, .72); background: rgba(145, 105, 35, .28); }
.lm-speed { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(3, 21, 13, .35); }
.lm-speed button { min-width: 43px; padding-inline: 10px; border-color: transparent; }

.lm-ft { position: relative; z-index: 3; min-height: 0; overflow-y: auto; padding: 0 clamp(2px, 2vw, 16px) 4px; }
.lm-ft-hero { text-align: center; margin: 0 auto 10px; }
.lm-ft-hero strong { display: block; margin: 4px 0; font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 4.8rem); color: #fff6df; }
.lm-ft-hero p { color: rgba(253, 248, 235, .58); }
.lm-scorers { display: grid; grid-template-columns: 1fr 1fr; min-height: 18px; gap: 16px; margin-bottom: 8px; color: rgba(253, 248, 235, .68); font-size: .75rem; }
.lm-scorers div:last-child { text-align: right; }
.lm-ft-stats { width: min(580px, 100%); margin: 0 auto 12px; padding: 8px 14px; border: 1px solid rgba(216, 184, 116, .18); border-radius: 16px; background: rgba(3, 27, 18, .38); }
.lm-ft-stat { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 4px 0; }
.lm-ft-stat span { font-weight: 750; }
.lm-ft-stat span:last-child { text-align: right; color: #e3c27e; }
.lm-ft-stat em { color: rgba(253, 248, 235, .46); font-style: normal; font-size: .7rem; }
.lm-ft-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lm-ft-col { padding: 10px; border: 1px solid rgba(216, 184, 116, .14); border-radius: 16px; background: rgba(3, 27, 18, .30); }
.lm-ft-col h3 { margin: 0 0 7px; font-family: var(--serif); font-size: .9rem; color: #e3c27e; }
.lm-rate { display: flex; align-items: center; gap: 8px; min-height: 31px; padding: 3px 5px; border-radius: 9px; font-size: .75rem; }
.lm-rate.motm { background: rgba(197, 152, 58, .18); }
.lm-ava { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: rgba(253, 248, 235, .1); }
.lm-ava-init { display: grid; place-items: center; font-weight: 750; }
.lm-rate-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-rate-name small { margin-left: 5px; color: rgba(253, 248, 235, .42); }
.lm-motm-tag { color: #e3c27e; font-size: .6rem; font-weight: 800; }
.lm-rate-val { font-weight: 800; font-variant-numeric: tabular-nums; }
.lm-done { display: block; min-height: 40px; }

@keyframes lmLivePulse { 0%,100% { opacity: .55; transform: scale(.86); } 50% { opacity: 1; transform: scale(1); } }
@keyframes lmAuraDriftOne { 0%,100% { transform: translate3d(-3%, -2%, 0) scale(.94); } 50% { transform: translate3d(7%, 4%, 0) scale(1.08); } }
@keyframes lmAuraDriftTwo { 0%,100% { transform: translate3d(4%, 3%, 0) scale(1.02); } 50% { transform: translate3d(-6%, -5%, 0) scale(.91); } }
@keyframes lmAuraHeartbeat { 0%,100% { transform: scale(.92); opacity: .54; } 45% { transform: scale(1.08); opacity: .9; } 55% { transform: scale(1.02); opacity: .72; } }
@keyframes lmAuraGoal { 0% { transform: scale(.65); opacity: .25; } 32% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1.02); opacity: .65; } }
@keyframes lmScoreGoal { 0% { transform: scale(1); } 35% { transform: scale(1.14); color: #f5d58b; text-shadow: 0 0 36px rgba(217,169,60,.72); } 100% { transform: scale(1); } }
@keyframes lmFeedIn { 0% { opacity: 0; transform: translateY(9px) scale(.97); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes lmHeroIn { 0% { opacity: 0; transform: scale(.82) translateY(12px); } 100% { opacity: 1; transform: none; } }

/* Tablet */
@media (max-width: 900px) {
  .lm-screen { padding: 10px; }
  .lm-stage { padding: 14px; }
  .lm-match-grid { grid-template-columns: minmax(0, 1.45fr) minmax(200px, .8fr); }
  .lm-line.lm-age-3 { display: none; }
}

/* Mobile portrait */
@media (max-width: 700px) {
  .lm-screen { gap: 6px; padding: 7px; }
  .lm-topbar { padding: 0 4px; font-size: .62rem; }
  .lm-topbar > span:last-child { display: none; }
  .lm-stage { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 7px; padding: 10px; border-radius: 18px; }
  .lm-head { gap: 6px; padding: 0; }
  .lm-team { flex-direction: column; gap: 3px; text-align: center; }
  .lm-away { flex-direction: column-reverse; }
  .lm-badge { width: 35px; height: 35px; }
  .lm-tname { max-width: 95px; font-size: .72rem; }
  .lm-centre { min-width: 100px; }
  .lm-score { font-size: 2.35rem; gap: 9px; }
  .lm-clock { margin-top: 4px; font-size: .65rem; }
  .lm-match-grid { grid-template-columns: 1fr; grid-template-rows: minmax(175px, 1fr) auto; gap: 7px; }
  .lm-commentary-panel { padding: 10px; border-radius: 15px; }
  .lm-line { padding: 6px 7px; grid-template-columns: 28px minmax(0, 1fr); font-size: .78rem; }
  .lm-line.lm-age-3, .lm-line.lm-age-2 { display: none; }
  .lm-support { grid-template-columns: 1fr; grid-template-rows: auto; }
  .lm-momentum-card { padding: 9px 10px; border-radius: 14px; }
  .lm-live-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 5px; border-radius: 14px; }
  .lm-live-stats > div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border: 0; border-right: 1px solid rgba(253,248,235,.07); font-size: .68rem; }
  .lm-live-stats > div:last-child { border-right: 0; }
  .lm-live-stats em { order: -1; font-size: .52rem; text-align: center; }
  .lm-controls, .lm-live-controls { gap: 7px; }
  .lm-controls button { min-height: 36px; padding: 6px 13px; }
  .lm-ft { padding: 0; }
  .lm-ft-cols { grid-template-columns: 1fr; gap: 8px; }
  .lm-ft-col { padding: 7px; }
  .lm-ft-col:nth-child(2) .lm-rate:nth-child(n+4) { display: none; }
  .lm-rate { min-height: 27px; }
  .lm-goal-hero strong { font-size: 2.5rem; }
}

/* Short phones and landscape-height constraints */
@media (max-height: 650px) {
  .lm-screen { padding-block: 5px; gap: 4px; }
  .lm-topbar { display: none; }
  .lm-stage { padding-block: 8px; gap: 5px; border-radius: 15px; }
  .lm-badge { width: 31px; height: 31px; }
  .lm-score { font-size: 2rem; }
  .lm-event-timeline { min-height: 6px; }
  .lm-line { padding-block: 5px; }
  .lm-live-stats > div { padding-block: 3px; }
  .lm-controls button { min-height: 32px; padding-block: 4px; }
  .lm-ft-hero strong { font-size: 2rem; }
  .lm-ft-stats { margin-bottom: 7px; padding-block: 5px; }
  .lm-rate { min-height: 25px; padding-block: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-live-pill i,
  .lm-aura-orb,
  .lm-aura-core,
  .lm-score.goal-pulse,
  .lm-line.lm-age-0,
  .lm-goal-hero > div,
  .lm-phase-card > div { animation: none !important; }
  .lm-aura { filter: blur(26px); opacity: .34; }
  .lm-aura-core { transform: none; opacity: .6; }
  .lm-stage,
  .lm-momentum span,
  .lm-event-timeline span,
  .lm-goal-hero,
  .lm-phase-card,
  .lm-line { transition: opacity 180ms linear !important; }
}