:root {
  color-scheme: dark;
  --bg: #06111f;
  --panel: rgba(7, 18, 32, 0.78);
  --panel-strong: rgba(8, 22, 39, 0.93);
  --line: rgba(255, 255, 255, 0.16);
  --text: #f7fbff;
  --muted: #a9c5d8;
  --gold: #f7d84a;
  --cyan: #4cc9f0;
  --green: #49e58f;
  --red: #ff6363;
  --blue: #5aa7ff;
  --team-a-color: #5aa7ff;
  --team-b-color: #ff6363;
  --mode-accent: #4cc9f0;
  --mode-accent-soft: rgba(76, 201, 240, 0.2);
  --panel-toplight: rgba(255, 255, 255, 0.12);
  --panel-lowlight: rgba(0, 0, 0, 0.28);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  --shadow-raised: 0 28px 80px rgba(0, 0, 0, 0.48), 0 0 30px rgba(76, 201, 240, 0.08);
  --trophy-empty-size: clamp(52px, 4.8vw, 58px);
  --trophy-earned-size: clamp(64px, 5.7vw, 72px);
  --trophy-medal-row-size: clamp(38px, 4vw, 48px);
  --trophy-result-medal-size: clamp(96px, 10vw, 128px);
  --trophy-win-size: clamp(140px, 14vw, 180px);
  --trophy-full-cup-size: clamp(220px, 28vw, 360px);
  --mode-result-trophy-size: clamp(138px, 18vw, 230px);
  --shot-ball-size: clamp(82px, 7.2vw, 136px);
  --gameplay-outer-background: url("assets/kids/stadien/kids_ambience_evening_1672x941.jpg");
  --setup-arena-preview-background: url("assets/kids/ligen/kids_backdrop_setup_1920x1080.jpg");
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  position: relative;
  min-width: 980px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 13, 24, 0.12), rgba(2, 8, 16, 0.46)),
    radial-gradient(circle at 50% 0%, rgba(117, 205, 255, 0.14), transparent 35%),
    radial-gradient(circle at 22% 70%, rgba(73, 229, 143, 0.06), transparent 32%),
    var(--gameplay-outer-background) center / cover no-repeat,
    linear-gradient(180deg, #0a2743 0%, #071827 52%, #03101c 100%);
  color: var(--text);
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  transition: background 520ms ease;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.06) 42%, transparent 58%),
    radial-gradient(circle at 50% 10%, var(--mode-accent-soft), transparent 38%);
  opacity: 0.58;
}

body.level-challenge {
  --mode-accent: #ffb84a;
  --mode-accent-soft: rgba(255, 184, 74, 0.24);
  background:
    linear-gradient(180deg, rgba(45, 24, 12, 0.24), rgba(8, 7, 10, 0.54)),
    radial-gradient(circle at 50% 0%, rgba(255, 190, 92, 0.2), transparent 34%),
    radial-gradient(circle at 14% 75%, rgba(255, 111, 62, 0.1), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(247, 216, 74, 0.08), transparent 34%),
    var(--gameplay-outer-background) center / cover no-repeat,
    linear-gradient(180deg, #2d1c14 0%, #111522 54%, #05080d 100%);
}

body.level-elite {
  --mode-accent: #ff4059;
  --mode-accent-soft: rgba(255, 64, 89, 0.28);
  background:
    linear-gradient(180deg, rgba(52, 6, 20, 0.24), rgba(8, 1, 6, 0.58)),
    radial-gradient(circle at 50% 0%, rgba(255, 65, 65, 0.22), transparent 34%),
    radial-gradient(circle at 18% 70%, rgba(150, 0, 34, 0.16), transparent 36%),
    radial-gradient(circle at 82% 68%, rgba(255, 31, 68, 0.12), transparent 34%),
    var(--gameplay-outer-background) center / cover no-repeat,
    linear-gradient(180deg, #330813 0%, #18050c 54%, #050103 100%);
}

button {
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    transform 140ms ease,
    filter 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

button:active {
  transform: translateY(2px) scale(0.99);
}

.app {
  display: grid;
  position: relative;
  grid-template-rows: minmax(134px, 17vh) 1fr minmax(132px, 17vh);
  height: 100%;
  gap: 14px;
  padding: 18px 22px 20px;
  perspective: 1200px;
}

.scoreboard {
  display: grid;
  grid-template-columns: minmax(258px, 0.95fr) minmax(380px, 1.8fr) minmax(258px, 0.95fr);
  align-items: stretch;
  gap: 14px;
}

.team-card,
.duel-card,
.controls,
.penalty-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--panel-toplight), transparent 26%),
    linear-gradient(135deg, rgba(14, 39, 66, 0.92), rgba(4, 12, 22, 0.94)),
    radial-gradient(circle at 50% 0%, var(--mode-accent-soft), transparent 52%);
  box-shadow: var(--shadow-raised);
}

.team-card::before,
.duel-card::before,
.controls::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 16%, transparent 84%, rgba(255, 255, 255, 0.08));
  opacity: 0.5;
}

.team-card::after,
.duel-card::after,
.controls::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: translateX(-170%) skewX(-18deg);
  opacity: 0;
}

.team-card:hover::after,
.duel-card:hover::after {
  opacity: 0.24;
  animation: panelLightSweep 1400ms ease;
}

.controls:hover::after {
  opacity: 0.12;
  animation: panelLightSweep 1600ms ease;
}

.team-card {
  display: grid;
  align-content: center;
  min-height: 104px;
  padding: 18px 16px 12px;
  border-radius: 8px;
  transform: translateZ(18px);
  isolation: isolate;
  overflow: visible;
}

.trophy-row {
  position: absolute;
  top: 8px;
  left: 16px;
  right: auto;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 18px;
  min-height: 0;
  margin: 0;
  align-items: center;
  pointer-events: none;
  overflow: visible;
}

.team-b .trophy-row {
  left: auto;
  right: 22px;
  justify-content: flex-end;
  padding-right: 0;
}

.trophy,
.mode-medal {
  position: relative;
  width: var(--trophy-empty-size);
  height: var(--trophy-empty-size);
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.28;
  transform: translateY(0) scale(1);
  background-image: var(--trophy-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter:
    grayscale(0.28)
    saturate(0.64)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 10px rgba(247, 216, 74, 0));
  transition:
    width 220ms ease,
    height 220ms ease,
    opacity 220ms ease,
    transform 220ms ease,
    filter 220ms ease;
}

.trophy::before,
.trophy::after,
.mode-medal::before,
.mode-medal::after {
  content: none;
}

.trophy-normal,
.mode-normal {
  --trophy-image: url("assets/kids/pokale/kids_trophy_normal.png");
}

.trophy-challenge,
.mode-challenge {
  --trophy-image: url("assets/kids/pokale/kids_trophy_challenge.png");
}

.trophy-elite,
.mode-elite {
  --trophy-image: url("assets/kids/pokale/kids_trophy_elite.png");
}

.trophy.won,
.trophy-earned,
.mode-medal.won {
  width: var(--trophy-earned-size);
  height: var(--trophy-earned-size);
  opacity: 1;
  transform: translateY(0) scale(1);
  filter:
    brightness(1.08)
    saturate(1.08)
    drop-shadow(0 7px 10px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 17px rgba(247, 216, 74, 0.64))
    drop-shadow(0 0 34px color-mix(in srgb, var(--mode-accent) 28%, transparent));
}

.trophy-earned {
  animation: trophyIdleFloat 4200ms ease-in-out infinite;
}

.trophy-empty {
  width: var(--trophy-empty-size);
  height: var(--trophy-empty-size);
  opacity: 0.36;
  filter:
    grayscale(0.64)
    saturate(0.42)
    brightness(0.72)
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 10px rgba(247, 216, 74, 0.1));
}

.trophy.newly-earned {
  animation:
    trophyUnlock 1500ms cubic-bezier(0.16, 1.04, 0.28, 1) both,
    trophyIdleFloat 4200ms ease-in-out 1500ms infinite;
  filter:
    brightness(1.12)
    saturate(1.12)
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 18px rgba(247, 216, 74, 0.72))
    drop-shadow(0 0 38px color-mix(in srgb, var(--mode-accent) 34%, transparent));
}

.team-card.trophy-active {
  animation: achievementGlow 1600ms ease both;
}

.mode-medal {
  width: var(--trophy-medal-row-size);
  height: var(--trophy-medal-row-size);
  opacity: 0.42;
  margin-right: 4px;
}

.mode-medal.won {
  width: var(--trophy-medal-row-size);
  height: var(--trophy-medal-row-size);
  opacity: 1;
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.26))
    drop-shadow(0 0 24px rgba(247, 216, 74, 0.24));
}

.team-a {
  border-left: 5px solid var(--team-a-color);
}

.team-b {
  border-right: 5px solid var(--team-b-color);
}

.team-label,
.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.1vw, 18px);
  font-weight: 900;
  text-transform: uppercase;
}

.team-card.team-b .team-label {
  justify-self: end;
  text-align: right;
}

.score-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.score-row strong {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(34px, 4.2vw, 72px);
  font-weight: 950;
  line-height: 0.95;
  text-align: center;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.24),
    0 0 28px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.team-card.goal-active {
  animation: sidePanelPulse 940ms ease both;
}

.team-card.goal-active .score-row::after {
  content: "TOR!";
  position: absolute;
  left: 50%;
  top: -24px;
  z-index: 2;
  padding: 4px 10px;
  border: 1px solid rgba(247, 216, 74, 0.5);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff2a0, var(--gold) 58%, #c99616);
  color: #061421;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  transform: translateX(-50%);
  box-shadow: 0 0 24px rgba(247, 216, 74, 0.36);
  animation: goalBadgeEnter 680ms ease both;
}

.score-row strong.score-pop {
  animation: scorePop 620ms cubic-bezier(0.16, 1.12, 0.38, 1.08) both;
}

.score-adjust,
.mini {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 22px rgba(0, 0, 0, 0.22);
  font-size: 24px;
  font-weight: 900;
}

.score-adjust:hover,
.mini:hover,
.tool:hover,
.action:hover {
  filter: brightness(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.26),
    0 0 14px color-mix(in srgb, var(--mode-accent) 8%, transparent);
}

.duel-card {
  display: grid;
  align-content: center;
  min-height: 128px;
  padding: 12px 18px;
  border-radius: 8px;
  text-align: center;
  transform: translateZ(26px);
  border-color: color-mix(in srgb, var(--mode-accent) 34%, rgba(255, 255, 255, 0.14));
  overflow: visible;
}

.duel-topline {
  display: grid;
  justify-items: center;
}

.duel-meta {
  display: grid;
  justify-items: center;
  gap: 3px;
}

.level-badge {
  min-width: 104px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--mode-accent) 46%, rgba(247, 216, 74, 0.34));
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    color-mix(in srgb, var(--mode-accent) 18%, rgba(247, 216, 74, 0.1));
  color: #fff3a6;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  box-shadow: 0 0 24px color-mix(in srgb, var(--mode-accent) 24%, transparent);
}

.cup-badge {
  min-width: 92px;
  padding: 5px 10px;
  border: 1px solid rgba(76, 201, 240, 0.26);
  border-radius: 8px;
  background: rgba(76, 201, 240, 0.08);
  color: #cceeff;
  font-size: 12px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.cup-badge[hidden] {
  display: none;
}

.match-clock {
  min-width: 78px;
  padding: 5px 10px;
  border: 1px solid rgba(76, 201, 240, 0.28);
  border-radius: 8px;
  background: rgba(76, 201, 240, 0.09);
  color: #d9f4ff;
  font-size: 13px;
  font-weight: 950;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.active-side {
  display: grid;
  gap: 3px;
  min-width: 155px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  line-height: 1.05;
}

.active-side span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.active-side strong {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 950;
}

.active-side.team-a {
  border-color: color-mix(in srgb, var(--team-a-color) 72%, white 10%);
  background: color-mix(in srgb, var(--team-a-color) 20%, transparent);
  color: #d8ebff;
  text-align: center;
}

.active-side.team-b {
  border-color: color-mix(in srgb, var(--team-b-color) 72%, white 10%);
  background: color-mix(in srgb, var(--team-b-color) 20%, transparent);
  color: #ffe0e0;
  text-align: center;
}

.season-gameplay-chip {
  justify-self: center;
  max-width: min(100%, 520px);
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 999px;
  background: rgba(2, 9, 18, 0.46);
  color: #fff1a8;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.duel-line {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 18px;
  margin-top: 6px;
  font-size: clamp(25px, 2.35vw, 42px);
  font-weight: 950;
  line-height: 1.05;
}

.duel-line span {
  display: inline-grid;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  max-width: 100%;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  text-align: center;
  text-shadow: 0 0 16px currentColor;
}

.duel-line span:first-child {
  color: color-mix(in srgb, var(--team-a-color) 82%, white 18%);
  background: color-mix(in srgb, var(--team-a-color) 15%, transparent);
}

.duel-line span:last-child {
  color: color-mix(in srgb, var(--team-b-color) 82%, white 18%);
  background: color-mix(in srgb, var(--team-b-color) 15%, transparent);
}

.duel-line b {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  height: 42px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, #fff4a8, var(--gold) 54%, #c99616);
  color: #061421;
  font-size: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 14px 26px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(247, 216, 74, 0.32);
}

.active-duel-row {
  display: grid;
  grid-template-columns: minmax(155px, 1fr) minmax(155px, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.possession-rush-panel[hidden] {
  display: none;
}

.possession-rush-panel {
  display: grid;
  gap: 4px;
  text-align: center;
  justify-items: center;
  margin-top: 4px;
}

.possession-rush-panel > strong {
  max-width: 100%;
  color: #ffffff;
  font-size: clamp(1.25rem, 2.05vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.possession-rush-panel > span {
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.92rem, 1.25vw, 1.16rem);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.possession-rush-timers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.possession-rush-timers span {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(5, 12, 24, 0.42);
  padding: 4px 9px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

.possession-rush-panel small {
  max-width: 100%;
  color: rgba(213, 232, 247, 0.72);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.possession-rush-timers b {
  color: #fff3a6;
  font-size: 0.95rem;
}

body.possession-rush-active .duel-line,
body.possession-rush-active .active-duel-row,
body.possession-rush-active .round-timer,
body.possession-rush-active .duel-meta .eyebrow {
  display: none;
}

body.possession-rush-active .possession-rush-panel {
  display: grid;
}

body.possession-rush-active .duel-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

body.possession-rush-active .season-gameplay-chip {
  margin-top: 0;
  max-width: none;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

body.possession-rush-active .scoreboard {
  grid-template-columns: minmax(150px, 0.78fr) minmax(260px, 1fr) minmax(150px, 0.78fr);
  gap: clamp(8px, 1vw, 12px);
}

body.possession-rush-active .duel-card {
  min-width: 0;
  min-height: 104px;
  padding: 8px 12px;
}

body.possession-rush-active .team-card,
body.possession-rush-active .action-panel {
  min-width: 0;
  transition:
    opacity 220ms ease,
    filter 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease;
}

body.possession-rush-active .team-card.possession-inactive,
body.possession-rush-active .action-panel.possession-inactive {
  opacity: 0.36;
  filter: grayscale(0.65) saturate(0.62) brightness(0.82);
}

body.season-match-active.possession-rush-active .team-card.possession-inactive {
  opacity: 0.46;
  filter: grayscale(0.52) saturate(0.7) brightness(0.84);
}

body.possession-rush-active .team-card.possession-active,
body.possession-rush-active .action-panel.possession-active {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(255, 255, 255, 0.08);
}

body.possession-rush-active .action-panel.possession-inactive .action {
  cursor: not-allowed;
}

body.possession-rush-active .controls > .action-panel:first-child.possession-active {
  border-color: color-mix(in srgb, var(--team-a-color) 24%, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--team-a-color) 9%, transparent), transparent 56%),
    rgba(4, 17, 31, 0.62);
}

body.possession-rush-active .controls > .action-panel:last-child.possession-active {
  border-color: color-mix(in srgb, var(--team-b-color) 24%, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--team-b-color) 9%, transparent), transparent 56%),
    rgba(4, 17, 31, 0.62);
}

@media (max-width: 1180px) {
  body.possession-rush-active .scoreboard {
    grid-template-columns: minmax(118px, 0.72fr) minmax(224px, 0.92fr) minmax(118px, 0.72fr);
    gap: 8px;
  }

  body.possession-rush-active .duel-card {
    padding: 7px 10px;
  }

  body.possession-rush-active .possession-rush-panel > strong {
    font-size: clamp(0.88rem, 1.55vw, 1.1rem);
  }

  body.possession-rush-active .possession-rush-timers span {
    padding: 3px 7px;
    font-size: 0.62rem;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  body.possession-rush-active .app {
    grid-template-rows: minmax(168px, auto) minmax(0, 1fr) minmax(132px, auto);
  }

  body.possession-rush-active .scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  body.possession-rush-active .duel-card {
    order: -1;
    grid-column: 1 / -1;
    min-height: 0;
  }

  body.possession-rush-active .team-card {
    min-height: 82px;
  }

  body.possession-rush-active .possession-rush-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    margin-top: 0;
  }

  body.possession-rush-active .possession-rush-timers {
    gap: 5px;
  }
}

.possession-penalty-tool[hidden] {
  display: none;
}

.table-strip {
  display: grid;
  grid-template-columns: minmax(170px, 0.78fr) minmax(170px, 0.78fr);
  justify-content: center;
  gap: 28px;
  margin-top: 11px;
  width: 100%;
}

.table-chip {
  min-width: 42px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
}

.table-chip.active {
  background: var(--gold);
  color: #061421;
  box-shadow: 0 0 28px rgba(247, 216, 74, 0.36);
}

.match-flow-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.match-flow-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 34%),
    rgba(4, 15, 28, 0.7);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.match-flow-option:has(input:checked) {
  border-color: rgba(247, 216, 74, 0.68);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.16), transparent 38%),
    rgba(9, 28, 44, 0.86);
}

.match-flow-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
}

.match-flow-option > span {
  display: grid;
  gap: 4px;
}

.match-flow-option strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 1000;
}

.match-flow-option strong .setup-help {
  width: 22px;
  height: 22px;
}

.match-flow-option small {
  color: #b9d7e6;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

.quick-possession-rush-settings[hidden] {
  display: none;
}

.quick-possession-rush-settings {
  position: relative;
  overflow: visible;
  margin: 0 0 14px;
  border: 1px solid rgba(76, 201, 240, 0.24);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(76, 201, 240, 0.1), transparent 56%),
    rgba(8, 25, 42, 0.62);
}

.quick-possession-rush-summary {
  display: grid;
  gap: 3px;
  margin-bottom: 9px;
  border: 1px solid rgba(247, 216, 74, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.12), transparent 70%),
    rgba(3, 12, 22, 0.54);
}

.quick-possession-rush-summary strong {
  color: #fff3a6;
  font-size: 0.88rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.quick-possession-rush-summary span {
  color: #d7f4ff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.25;
}

.quick-possession-rush-core-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  overflow: visible;
}

.quick-possession-rush-advanced {
  margin-top: 9px;
}

.quick-possession-rush-settings summary {
  cursor: pointer;
  color: #fff3a6;
  font-weight: 1000;
  list-style-position: outside;
}

.quick-possession-rush-settings summary span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-transform: uppercase;
}

.quick-possession-rush-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  margin-top: 10px;
  overflow: visible;
}

.quick-possession-rush-group {
  position: relative;
  overflow: visible;
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(76, 201, 240, 0.16);
  border-radius: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 56%),
    rgba(2, 10, 19, 0.38);
}

.quick-possession-rush-group > strong {
  color: #fff3a6;
  font-size: 0.7rem;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.quick-possession-rush-option {
  position: relative;
  overflow: visible;
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%),
    rgba(2, 11, 21, 0.42);
  color: #eaf6ff;
  font-size: 11px;
  font-weight: 950;
}

.quick-possession-rush-option > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.quick-possession-rush-option > .quick-possession-rush-label {
  position: relative;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: normal;
  z-index: 20;
}

.quick-possession-rush-label .setup-help {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  line-height: 18px;
  z-index: 120;
}

.quick-possession-rush-label .setup-help::after {
  right: auto;
  left: 50%;
  width: min(260px, 72vw);
  white-space: normal;
  overflow-wrap: break-word;
  transform: translate(-50%, 4px);
  z-index: 140;
}

.quick-possession-rush-label .setup-help::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  z-index: 139;
}

.quick-possession-rush-label .setup-help:hover::after,
.quick-possession-rush-label .setup-help:focus::after,
.quick-possession-rush-label .setup-help.is-open::after {
  transform: translate(-50%, 0);
}

.quick-possession-rush-option[hidden] {
  display: none;
}

.quick-possession-rush-core-grid select,
.quick-possession-rush-grid select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 7px;
  padding: 7px 9px;
  color: #ffffff;
  background: #05070d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(76, 201, 240, 0.08);
  font: inherit;
  color-scheme: dark;
}

.quick-possession-rush-core-grid select:hover,
.quick-possession-rush-core-grid select:focus,
.quick-possession-rush-grid select:hover,
.quick-possession-rush-grid select:focus {
  border-color: rgba(247, 216, 74, 0.52);
  background-color: #05070d;
  color: #ffffff;
  outline: none;
}

.quick-possession-rush-core-grid select:disabled,
.quick-possession-rush-grid select:disabled {
  opacity: 0.5;
}

.quick-possession-rush-core-grid select option,
.quick-possession-rush-grid select option {
  background: #05070d;
  color: #ffffff;
}

.quick-possession-rush-core-grid select option:checked,
.quick-possession-rush-grid select option:checked {
  background: #10243a;
  color: #ffffff;
}

.quick-possession-rush-note {
  border: 1px solid rgba(247, 216, 74, 0.18);
  border-radius: 7px;
  padding: 7px 8px;
  background: rgba(3, 12, 22, 0.54);
  color: #cce9f5;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.2;
}

.quick-possession-rush-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.quick-possession-rush-hints span {
  flex: 0 1 auto;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 999px;
  padding: 5px 8px;
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.11), transparent 78%),
    rgba(3, 12, 22, 0.5);
  color: #cce9f5;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  white-space: normal;
}

@media (max-width: 620px) {
  .quick-possession-rush-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .quick-possession-rush-hints span {
    white-space: normal;
  }
}

.active-participant {
  display: grid;
  gap: 2px;
  cursor: default;
  min-width: 170px;
  padding: 8px 16px;
  line-height: 1.1;
}

.active-participant strong {
  font-size: 16px;
}

.participant-side-label {
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.active-participant.team-a {
  justify-self: end;
  border-color: rgba(90, 167, 255, 0.62);
  background: rgba(90, 167, 255, 0.16);
  color: #d8ebff;
  text-align: left;
}

.active-participant.team-b {
  justify-self: start;
  border-color: rgba(255, 99, 99, 0.62);
  background: rgba(255, 99, 99, 0.16);
  color: #ffe0e0;
  text-align: right;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
}

.field {
  position: relative;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #061421;
  box-shadow:
    0 36px 110px rgba(0, 0, 0, 0.52),
    0 0 42px color-mix(in srgb, var(--mode-accent) 16%, transparent);
  transition: filter 520ms ease, box-shadow 520ms ease;
  transform: translateZ(10px);
}

body.level-challenge .field {
  filter: saturate(1.1) contrast(1.03) brightness(0.96);
  box-shadow: 0 28px 120px rgba(255, 150, 62, 0.26), 0 28px 90px rgba(0, 0, 0, 0.54);
}

body.level-elite .field {
  filter: saturate(1.18) contrast(1.08) brightness(0.9);
  box-shadow: 0 28px 150px rgba(255, 42, 66, 0.42), 0 28px 100px rgba(0, 0, 0, 0.72);
}

body.level-normal .team-card,
body.level-normal .duel-card {
  border-color: color-mix(in srgb, #4cc9f0 28%, rgba(255, 255, 255, 0.14));
}

body.level-challenge .team-card,
body.level-challenge .duel-card {
  border-color: color-mix(in srgb, #ffb84a 34%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 214, 118, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(42, 27, 14, 0.94), rgba(12, 13, 22, 0.94)),
    radial-gradient(circle at 50% 0%, rgba(255, 184, 74, 0.16), transparent 54%);
}

body.level-elite .team-card,
body.level-elite .duel-card {
  border-color: color-mix(in srgb, #ff4059 42%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 95, 115, 0.11), transparent 30%),
    linear-gradient(135deg, rgba(42, 7, 18, 0.96), rgba(9, 5, 13, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(255, 64, 89, 0.2), transparent 54%);
}

.field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 520ms ease;
}

body.level-challenge .field::before {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 200, 88, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 172, 74, 0.08), transparent 42%, rgba(30, 16, 12, 0.14) 100%);
  mix-blend-mode: screen;
}

body.level-elite .field::before {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 38, 64, 0.2), transparent 44%),
    linear-gradient(90deg, rgba(255, 38, 64, 0.18), transparent 26%, transparent 74%, rgba(255, 38, 64, 0.18)),
    linear-gradient(180deg, rgba(70, 0, 17, 0.18), transparent 38%, rgba(24, 0, 9, 0.2));
  mix-blend-mode: screen;
}

.field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 40%, rgba(0, 0, 0, 0.23)),
    radial-gradient(circle at 50% 59%, rgba(247, 216, 74, 0.14), transparent 22%);
}

.field-bg {
  position: absolute;
  inset: 0;
  background-color: #061421;
  user-select: none;
  transition: filter 520ms ease, opacity 520ms ease, scale 520ms ease;
}

.field-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 220ms ease;
}

.field-bg-image.is-loaded {
  opacity: 1;
}

body.level-challenge .field-bg {
  filter: saturate(1.05) contrast(1.02);
}

body.level-elite .field-bg {
  filter: saturate(1.18) contrast(1.08);
}

.zones {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.zone-dot {
  position: absolute;
  width: 5.4%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), rgba(76, 201, 240, 0.08) 48%, transparent 70%);
  backdrop-filter: blur(1px);
  box-shadow:
    inset 0 0 14px rgba(255, 255, 255, 0.1),
    0 0 22px rgba(76, 201, 240, 0.12);
  opacity: 0.62;
}

.zone-dot.active {
  border-color: var(--gold);
  background: rgba(247, 216, 74, 0.2);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.16),
    0 0 44px rgba(247, 216, 74, 0.45);
  opacity: 1;
}

body.level-challenge .zone-dot {
  border-color: rgba(255, 210, 109, 0.58);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 240, 190, 0.22), rgba(247, 216, 74, 0.06) 58%, rgba(255, 172, 74, 0.12));
  box-shadow:
    inset 0 0 20px rgba(255, 230, 160, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(247, 216, 74, 0.2);
}

body.level-elite .zone-dot {
  border-color: rgba(255, 128, 128, 0.7);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 220, 220, 0.18), rgba(255, 99, 99, 0.07) 58%, rgba(76, 0, 28, 0.2));
  box-shadow:
    inset 0 0 22px rgba(255, 180, 180, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.48),
    0 0 38px rgba(255, 99, 99, 0.26);
}

body.level-elite .zone-dot.active {
  border-color: #ff8585;
  background: rgba(255, 99, 99, 0.24);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.14),
    0 0 52px rgba(255, 99, 99, 0.62);
}

.ball {
  position: absolute;
  z-index: 6;
  width: clamp(52px, 5.2vw, 94px);
  height: clamp(52px, 5.2vw, 94px);
  translate: -50% -50%;
  border: 3px solid #0b1018;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, #111722 0 13%, transparent 14%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(17, 23, 34, 0.9) 14% 17%, transparent 17% 34%, rgba(17, 23, 34, 0.9) 34% 37%, transparent 37% 54%, rgba(17, 23, 34, 0.9) 54% 57%, transparent 57% 74%, rgba(17, 23, 34, 0.9) 74% 77%, transparent 77% 94%, rgba(17, 23, 34, 0.9) 94% 97%, transparent 97% 100%),
    radial-gradient(circle at 34% 27%, #ffffff 0 0, #f7fafc 36%, #dfe7ef 74%, #cbd5df 100%);
  box-shadow:
    inset -10px -14px 18px rgba(0, 0, 0, 0.22),
    inset 8px 8px 16px rgba(255, 255, 255, 0.5),
    0 16px 18px rgba(0, 0, 0, 0.5);
  transition:
    left 520ms cubic-bezier(0.22, 0.85, 0.22, 1),
    top 520ms cubic-bezier(0.22, 0.85, 0.22, 1),
    scale 260ms ease;
}

body.level-normal .ball {
  box-shadow:
    inset -10px -14px 18px rgba(0, 0, 0, 0.18),
    inset 8px 8px 16px rgba(255, 255, 255, 0.55),
    0 16px 18px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(76, 201, 240, 0.12);
}

body.level-challenge .ball {
  border-color: #2b1708;
  background:
    radial-gradient(circle at 50% 46%, #2b1708 0 13%, transparent 14%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(75, 39, 7, 0.9) 14% 17%, transparent 17% 34%, rgba(75, 39, 7, 0.9) 34% 37%, transparent 37% 54%, rgba(75, 39, 7, 0.9) 54% 57%, transparent 57% 74%, rgba(75, 39, 7, 0.9) 74% 77%, transparent 77% 94%, rgba(75, 39, 7, 0.9) 94% 97%, transparent 97% 100%),
    radial-gradient(circle at 34% 27%, #fff8dd 0 0, #ffe6a0 36%, #f6b947 74%, #a95a17 100%);
  box-shadow:
    inset -10px -14px 18px rgba(64, 21, 0, 0.28),
    inset 8px 8px 16px rgba(255, 244, 180, 0.42),
    0 16px 18px rgba(0, 0, 0, 0.48),
    0 0 32px rgba(247, 216, 74, 0.3);
}

body.level-elite .ball {
  border-color: #21020a;
  background:
    radial-gradient(circle at 50% 46%, #190108 0 13%, transparent 14%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(20, 1, 8, 0.95) 14% 17%, transparent 17% 34%, rgba(20, 1, 8, 0.95) 34% 37%, transparent 37% 54%, rgba(20, 1, 8, 0.95) 54% 57%, transparent 57% 74%, rgba(20, 1, 8, 0.95) 74% 77%, transparent 77% 94%, rgba(20, 1, 8, 0.95) 94% 97%, transparent 97% 100%),
    radial-gradient(circle at 34% 27%, #fff0f0 0 0, #ff6f6f 34%, #b80624 72%, #28010b 100%);
  box-shadow:
    inset -10px -14px 18px rgba(30, 0, 8, 0.5),
    inset 8px 8px 16px rgba(255, 160, 160, 0.24),
    0 18px 22px rgba(0, 0, 0, 0.6),
    0 0 42px rgba(255, 38, 64, 0.52),
    0 0 80px rgba(255, 38, 64, 0.18);
}

body.level-challenge .ball::before,
body.level-challenge .ball::after {
  border-color: rgba(75, 39, 7, 0.9);
}

body.level-elite .ball::before,
body.level-elite .ball::after {
  border-color: rgba(28, 1, 9, 0.95);
}

body.level-challenge .ball span {
  background: #3b2108;
}

body.level-elite .ball span {
  background: #160107;
}

.ball::before,
.ball::after,
.ball span {
  content: "";
  position: absolute;
  inset: 20%;
  border: 2px solid rgba(17, 23, 34, 0.92);
  border-radius: 45% 55% 50% 50%;
  opacity: 0.9;
}

.ball::before {
  transform: rotate(54deg) translate(28%, -8%);
}

.ball::after {
  transform: rotate(-54deg) translate(-28%, -8%);
}

.ball span {
  inset: 34%;
  background: #111722;
  clip-path: polygon(50% 0, 95% 34%, 78% 90%, 22% 90%, 5% 34%);
  border: 0;
  border-radius: 0;
}

.ball.pass {
  animation: ballSpin 520ms ease;
}

.ball.shot {
  animation: ballShot 820ms ease;
}

.ball.shot-variant-arc {
  animation-name: ballShotArc;
}

.ball.shot-variant-low {
  animation-name: ballShotLow;
}

.ball.shot-variant-power {
  animation-name: ballShotPower;
}

.ball.shot-variant-quick {
  animation-name: ballShotQuick;
  animation-duration: 560ms;
}

.ball.penalty-shot {
  animation: penaltyBallShot 740ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ball.penalty-variant-power,
.ball.penalty-variant-charge {
  animation-duration: 860ms;
  filter: brightness(1.16) saturate(1.18);
}

.field .ball.ball-style-gold {
  border-color: #5b3900;
  background:
    radial-gradient(circle at 50% 46%, #5b3900 0 13%, transparent 14%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(91, 57, 0, 0.92) 14% 17%, transparent 17% 34%, rgba(91, 57, 0, 0.92) 34% 37%, transparent 37% 54%, rgba(91, 57, 0, 0.92) 54% 57%, transparent 57% 74%, rgba(91, 57, 0, 0.92) 74% 77%, transparent 77% 94%, rgba(91, 57, 0, 0.92) 94% 97%, transparent 97% 100%),
    radial-gradient(circle at 34% 27%, #fff6c8 0 0, #ffd760 36%, #c78a13 74%, #6b3f00 100%);
  box-shadow:
    inset -10px -14px 18px rgba(64, 38, 0, 0.36),
    inset 8px 8px 16px rgba(255, 244, 180, 0.48),
    0 16px 18px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(247, 216, 74, 0.42);
}

.field .ball.ball-style-gold::before,
.field .ball.ball-style-gold::after {
  border-color: rgba(91, 57, 0, 0.92);
}

.field .ball.ball-style-gold span {
  background: #5b3900;
}

.field .ball.ball-style-neon {
  border-color: #04131c;
  background:
    radial-gradient(circle at 50% 46%, #04131c 0 13%, transparent 14%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(76, 201, 240, 0.9) 14% 17%, transparent 17% 34%, rgba(76, 201, 240, 0.9) 34% 37%, transparent 37% 54%, rgba(76, 201, 240, 0.9) 54% 57%, transparent 57% 74%, rgba(76, 201, 240, 0.9) 74% 77%, transparent 77% 94%, rgba(76, 201, 240, 0.9) 94% 97%, transparent 97% 100%),
    radial-gradient(circle at 34% 27%, #effcff 0 0, #91f2ff 34%, #32bdf0 72%, #07344d 100%);
  box-shadow:
    inset -10px -14px 18px rgba(0, 22, 34, 0.4),
    inset 8px 8px 16px rgba(220, 252, 255, 0.5),
    0 16px 18px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(76, 201, 240, 0.56),
    0 0 70px rgba(76, 201, 240, 0.24);
}

.field .ball.ball-style-neon::before,
.field .ball.ball-style-neon::after {
  border-color: rgba(76, 201, 240, 0.92);
}

.field .ball.ball-style-neon span {
  background: #04131c;
}

.field.shot-variant-straight::before,
.field.shot-variant-arc::before,
.field.shot-variant-low::before,
.field.shot-variant-power::before,
.field.shot-variant-quick::before {
  opacity: 1;
  mix-blend-mode: screen;
}

.field.shot-variant-straight::before {
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.16), transparent 80%);
}

.field.shot-variant-arc::before {
  background: radial-gradient(ellipse at 50% 38%, rgba(76, 201, 240, 0.2), transparent 42%);
}

.field.shot-variant-low::before {
  background: linear-gradient(180deg, transparent 54%, rgba(247, 216, 74, 0.18), transparent 78%);
}

.field.shot-variant-power::before {
  background:
    radial-gradient(circle at 50% 55%, rgba(247, 216, 74, 0.28), transparent 34%),
    linear-gradient(90deg, rgba(247, 216, 74, 0.16), transparent 42%, transparent 58%, rgba(247, 216, 74, 0.16));
}

.field.shot-variant-quick::before {
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.2), transparent 65%);
}

.field.penalty-variant-warning::before,
.field.penalty-variant-charge::before,
.field.penalty-variant-power::before {
  opacity: 1;
  mix-blend-mode: screen;
}

.field.penalty-variant-warning::before {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 184, 74, 0.24), transparent 34%),
    linear-gradient(90deg, rgba(255, 58, 83, 0.18), transparent 42%, transparent 58%, rgba(255, 58, 83, 0.18));
}

.field.penalty-variant-charge::before {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 58, 83, 0.34), transparent 36%),
    linear-gradient(90deg, rgba(255, 58, 83, 0.26), transparent 48%, rgba(247, 216, 74, 0.2));
}

.field.penalty-variant-power::before {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 58, 83, 0.42), transparent 38%),
    linear-gradient(90deg, rgba(255, 58, 83, 0.32), transparent 36%, transparent 64%, rgba(255, 58, 83, 0.32));
  animation: penaltyFlash 780ms ease both;
}

.goal-mouth {
  position: absolute;
  top: 61.8%;
  width: 10%;
  height: 15%;
  translate: 0 -50%;
  border: 2px solid transparent;
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
}

.goal-mouth.left {
  left: 6.8%;
}

.goal-mouth.right {
  right: 6.8%;
}

.goal-mouth.hit {
  border-color: transparent;
  box-shadow: none;
  animation: netShake 620ms ease;
}

.event-banner {
  position: absolute;
  z-index: 8;
  top: 7.5%;
  left: 50%;
  width: min(64%, 820px);
  min-height: 16%;
  display: grid;
  place-items: center;
  padding: 14px 30px;
  border: 1px solid rgba(247, 216, 74, 0.24);
  border-radius: 8px;
  translate: -50% 0;
  background:
    linear-gradient(135deg, rgba(5, 16, 29, 0.86), rgba(10, 30, 51, 0.78)),
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.16), transparent 50%);
  box-shadow:
    inset 0 0 34px rgba(76, 201, 240, 0.1),
    0 18px 48px rgba(0, 0, 0, 0.44);
  color: var(--text);
  font-size: clamp(28px, 3.2vw, 58px);
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.event-banner.show {
  opacity: 1;
  transform: translateY(0);
}

.pair-score-flash[hidden] {
  display: none;
}

.pair-score-flash {
  position: absolute;
  top: clamp(12px, 1.8vh, 24px);
  z-index: 18;
  display: grid;
  justify-items: center;
  gap: clamp(5px, 0.7vh, 8px);
  width: clamp(132px, 13vw, 196px);
  padding: clamp(8px, 0.85vw, 12px);
  border: 2px solid color-mix(in srgb, var(--pair-score-color, #fff3a6) 70%, rgba(255, 255, 255, 0.18));
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--pair-score-color, #fff3a6) 46%, transparent), transparent 62%),
    radial-gradient(circle at 50% 68%, rgba(255, 255, 255, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 38%),
    rgba(3, 10, 18, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 42px color-mix(in srgb, var(--pair-score-color, #fff3a6) 20%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.52),
    0 0 60px color-mix(in srgb, var(--pair-score-color, #fff3a6) 52%, transparent);
  opacity: 0;
  transform: translateY(-16px) scale(0.82);
  pointer-events: none;
  overflow: visible;
}

.pair-score-flash.team-a {
  left: clamp(12px, 1.8vw, 30px);
}

.pair-score-flash.team-b {
  right: clamp(12px, 1.8vw, 30px);
}

.pair-score-flash.show {
  animation: pairScoreFlash 1900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pair-score-flash.active-pair-visible {
  opacity: 0.9;
  transform: translateY(0) scale(0.88);
  filter: saturate(0.96) brightness(0.92);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 180ms ease;
}

.pair-score-flash.active-pair-visible.show {
  animation: activePairScorePulse 1900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  filter: saturate(1.12) brightness(1.08);
}

.pair-score-flash-emblem {
  display: grid;
  place-items: center;
  width: clamp(84px, 9.2vw, 142px);
  height: clamp(84px, 9.2vw, 142px);
  overflow: visible;
}

.pair-score-flash-img {
  display: block;
  width: 114%;
  height: 114%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 28px color-mix(in srgb, var(--pair-score-color, #fff3a6) 52%, transparent));
}

.pair-score-flash strong {
  position: relative;
  z-index: 2;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--pair-score-color, #fff3a6) 42%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  padding: 5px 9px;
  color: #ffffff;
  background: rgba(2, 9, 18, 0.74);
  font-size: clamp(11px, 0.9vw, 15px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--pair-score-color, #fff3a6) 58%, transparent),
    0 3px 8px rgba(0, 0, 0, 0.7);
}

.event-banner.goal {
  color: #fff7bd;
  text-shadow:
    0 0 18px rgba(247, 216, 74, 0.72),
    0 0 42px rgba(76, 201, 240, 0.32);
  animation: goalPulse 2600ms ease-in-out infinite;
}

.event-banner.attack-tone {
  color: #e6f8ff;
  border-color: color-mix(in srgb, var(--event-team-color, var(--cyan)) 48%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-team-color, var(--cyan)) 20%, rgba(6, 20, 33, 0.58)), rgba(4, 12, 22, 0.48)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--event-team-color, var(--cyan)) 20%, transparent), transparent 58%);
  box-shadow:
    inset 0 0 30px color-mix(in srgb, var(--event-team-color, var(--cyan)) 12%, transparent),
    0 16px 38px rgba(0, 0, 0, 0.34),
    0 0 30px color-mix(in srgb, var(--event-team-color, var(--cyan)) 24%, transparent);
  backdrop-filter: blur(4px) saturate(1.08);
  animation: attackBannerSnap 760ms ease both;
}

.event-banner.word-tone {
  color: #d9f4ff;
  border-color: rgba(76, 201, 240, 0.42);
  background:
    linear-gradient(135deg, rgba(6, 22, 39, 0.88), rgba(8, 42, 60, 0.74)),
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.22), transparent 58%);
  text-shadow: 0 0 22px rgba(76, 201, 240, 0.62);
}

.event-banner.trophy-tone {
  color: #fff3a6;
  border-color: rgba(247, 216, 74, 0.62);
  background:
    linear-gradient(135deg, rgba(62, 42, 6, 0.92), rgba(10, 18, 30, 0.82)),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.34), transparent 58%);
  box-shadow:
    inset 0 0 42px rgba(247, 216, 74, 0.16),
    0 0 46px rgba(247, 216, 74, 0.26);
}

.event-banner.event-countdown {
  width: min(28%, 320px);
  min-height: 18%;
  font-size: clamp(62px, 7vw, 116px);
  animation: countdownPop 760ms ease both;
}

.event-banner.countdown-neutral {
  color: #eaf7ff;
  border-color: rgba(76, 201, 240, 0.42);
  text-shadow:
    0 0 18px rgba(76, 201, 240, 0.58),
    0 0 46px rgba(255, 255, 255, 0.16);
}

.event-banner.event-variant-pulse {
  animation-name: countdownPulse;
}

.event-banner.event-variant-snap {
  animation-name: countdownSnap;
}

.event-banner.ready-tone {
  width: min(68%, 880px);
  color: #eaf7ff;
  font-size: clamp(22px, 2.3vw, 42px);
  line-height: 1.18;
  border-color: rgba(76, 201, 240, 0.44);
  background:
    linear-gradient(135deg, rgba(8, 25, 43, 0.92), rgba(9, 35, 48, 0.82)),
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.24), transparent 58%);
  text-shadow:
    0 0 18px rgba(76, 201, 240, 0.62),
    0 0 46px rgba(73, 229, 143, 0.24);
}

.ready-title {
  margin-bottom: 12px;
  font-size: clamp(30px, 3vw, 56px);
}

.ready-matchup {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
}

.ready-matchup b {
  color: var(--gold);
  font-size: 20px;
}

.ready-participant {
  display: block;
  padding: 11px 16px;
  border: 2px solid var(--ready-color);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ready-color) 28%, rgba(5, 16, 29, 0.88));
  color: #ffffff;
  font-size: clamp(22px, 2.6vw, 48px);
  line-height: 1;
  text-shadow: 0 0 16px color-mix(in srgb, var(--ready-color) 70%, transparent);
}

.ready-participant.season-icon-only {
  display: grid;
  place-items: center;
  min-height: clamp(64px, 8vh, 92px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.ready-participant-img {
  display: block;
  width: clamp(82px, 8vw, 118px);
  height: clamp(82px, 8vw, 118px);
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
}

.event-banner.ready-tone.season-ready-icons {
  width: min(42%, 620px);
  padding: clamp(14px, 1.7vw, 22px);
}

.event-banner.ready-tone.season-ready-icons .ready-title {
  margin-bottom: 6px;
  font-size: clamp(24px, 2.2vw, 40px);
}

.event-banner.ready-tone.season-ready-icons .ready-matchup {
  grid-template-columns: minmax(82px, 1fr) auto minmax(82px, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

.event-banner.ready-tone.season-ready-icons .ready-matchup b {
  font-size: clamp(16px, 1.2vw, 20px);
}

body.possession-rush-active .event-banner.possession-ready-banner,
body.possession-rush-active .event-banner.possession-switch-banner {
  top: 7.4%;
  width: min(94%, 1180px);
  min-height: auto;
  max-height: min(26vh, 210px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(6px, 0.9vh, 10px);
  padding: clamp(14px, 2vw, 24px) clamp(20px, 3vw, 34px);
  text-transform: uppercase;
  white-space: normal;
}

body.possession-rush-active .event-banner.possession-switch-banner {
  top: 6.6%;
  width: min(66%, 820px);
  max-height: min(16vh, 124px);
  gap: clamp(4px, 0.6vh, 8px);
  padding: clamp(10px, 1.25vw, 16px) clamp(18px, 2.2vw, 30px);
  border-width: 2px;
  border-color: color-mix(in srgb, var(--event-team-color, var(--cyan)) 64%, rgba(255, 255, 255, 0.2));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-team-color, var(--cyan)) 28%, rgba(5, 15, 26, 0.82)), rgba(4, 12, 22, 0.84)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--event-team-color, var(--cyan)) 32%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--event-team-color, var(--cyan)) 14%, transparent),
    0 14px 34px rgba(0, 0, 0, 0.38),
    0 0 34px color-mix(in srgb, var(--event-team-color, var(--cyan)) 22%, transparent);
}

.possession-switch-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  min-width: 0;
}

.possession-switch-copy {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.possession-ready-label,
.possession-switch-reason {
  color: color-mix(in srgb, var(--event-team-color, var(--cyan)) 38%, #d8f4ff);
  font-size: clamp(13px, 1.25vw, 20px);
  font-weight: 1000;
  letter-spacing: 0;
}

.possession-switch-reason {
  color: #ffe48a;
  font-size: clamp(13px, 1.18vw, 18px);
  text-shadow: 0 0 14px rgba(247, 216, 74, 0.42);
}

.possession-switch-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(30px, 3.2vw, 46px);
  aspect-ratio: 1;
  margin-bottom: 0;
}

.possession-switch-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px color-mix(in srgb, var(--event-team-color, var(--cyan)) 38%, transparent))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.34));
}

.possession-switch-icon-fallback {
  display: none;
  width: 70%;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--event-team-color, var(--cyan)) 28%, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  background: rgba(210, 238, 255, 0.08);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.08);
}

.possession-ready-team,
.possession-switch-team {
  max-width: 100%;
  color: #ffffff;
  font-size: clamp(19px, 2.35vw, 38px);
  font-weight: 1000;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 0 20px color-mix(in srgb, var(--event-team-color, var(--cyan)) 50%, transparent),
    0 5px 18px rgba(0, 0, 0, 0.64);
}

body.possession-rush-active .event-banner.possession-switch-banner .possession-switch-team {
  font-size: clamp(22px, 2.7vw, 44px);
}

@media (max-width: 900px), (max-height: 620px) {
  body.possession-rush-active .event-banner.possession-ready-banner,
  body.possession-rush-active .event-banner.possession-switch-banner {
    width: min(92%, 920px);
    padding-inline: clamp(14px, 2.4vw, 24px);
  }

  body.possession-rush-active .event-banner.possession-switch-banner {
    width: min(84%, 760px);
    padding: 9px 16px;
  }

  .possession-switch-content {
    gap: 9px;
  }

  .possession-switch-icon {
    width: clamp(26px, 4.8vw, 36px);
  }

  .possession-ready-team,
  .possession-switch-team {
    font-size: clamp(15px, 2.9vw, 26px);
  }
}

.event-banner.countdown-3 {
  color: #7dffae;
  border-color: rgba(73, 229, 143, 0.48);
  text-shadow:
    0 0 20px rgba(73, 229, 143, 0.82),
    0 0 54px rgba(73, 229, 143, 0.36);
}

.event-banner.countdown-2 {
  color: #ffd36d;
  border-color: rgba(255, 172, 74, 0.54);
  text-shadow:
    0 0 20px rgba(255, 172, 74, 0.86),
    0 0 54px rgba(247, 216, 74, 0.34);
}

.event-banner.countdown-1 {
  color: #ff8585;
  border-color: rgba(255, 99, 99, 0.58);
  text-shadow:
    0 0 20px rgba(255, 99, 99, 0.92),
    0 0 58px rgba(255, 99, 99, 0.38);
}

.event-banner.penalty-tone {
  color: #ffe1e1;
  border-color: rgba(255, 58, 83, 0.72);
  background:
    linear-gradient(135deg, rgba(81, 5, 18, 0.92), rgba(14, 19, 35, 0.78)),
    radial-gradient(circle at 50% 0%, rgba(255, 58, 83, 0.34), transparent 58%);
  box-shadow:
    inset 0 0 42px rgba(255, 58, 83, 0.22),
    0 0 54px rgba(255, 58, 83, 0.28),
    0 18px 48px rgba(0, 0, 0, 0.52);
  text-shadow:
    0 0 18px rgba(255, 58, 83, 0.86),
    0 0 44px rgba(255, 58, 83, 0.42);
  animation: penaltyBanner 760ms ease infinite;
}

.event-banner.pressure-tone {
  top: 43%;
  width: min(72%, 900px);
  min-height: 118px;
  max-height: none;
  padding: 22px 36px;
  color: #ffe7bd;
  border-color: rgba(255, 141, 45, 0.86);
  background:
    linear-gradient(135deg, rgba(58, 20, 6, 0.95), rgba(13, 19, 31, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(255, 139, 48, 0.3), transparent 62%);
  box-shadow:
    inset 0 0 42px rgba(255, 121, 39, 0.2),
    0 0 46px rgba(255, 105, 36, 0.28),
    0 20px 58px rgba(0, 0, 0, 0.55);
  text-shadow:
    0 0 18px rgba(255, 132, 42, 0.74),
    0 0 42px rgba(247, 216, 74, 0.24);
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 0.94;
  white-space: pre-line;
  transition: opacity 420ms ease, transform 420ms ease;
  animation: pressureBanner 1800ms ease-in-out infinite;
}

.event-banner.final-tone {
  top: 38%;
  width: min(60%, 800px);
  min-height: 104px;
  max-height: 138px;
  padding: 18px 30px;
  color: #fff1b8;
  border-color: rgba(255, 58, 83, 0.94);
  background:
    linear-gradient(135deg, rgba(92, 4, 19, 0.96), rgba(8, 8, 17, 0.86)),
    radial-gradient(circle at 50% 0%, rgba(255, 58, 83, 0.48), transparent 60%);
  box-shadow:
    inset 0 0 62px rgba(255, 58, 83, 0.28),
    0 0 72px rgba(255, 58, 83, 0.42),
    0 24px 68px rgba(0, 0, 0, 0.62);
  text-shadow:
    0 0 22px rgba(255, 58, 83, 0.95),
    0 0 66px rgba(247, 216, 74, 0.34);
  transition: opacity 420ms ease, transform 420ms ease;
  animation: finalBanner 1400ms ease-in-out infinite;
}

.event-banner.penalty-tone.event-variant-charge,
.event-banner.penalty-tone.event-variant-power {
  animation: penaltyBanner 520ms ease infinite;
  box-shadow:
    inset 0 0 48px rgba(255, 58, 83, 0.24),
    0 0 62px rgba(255, 58, 83, 0.34),
    0 20px 54px rgba(0, 0, 0, 0.56);
}

.word-display {
  position: absolute;
  z-index: 7;
  top: 11.6%;
  left: 50%;
  width: min(72%, 920px);
  height: clamp(118px, 30%, 190px);
  display: grid;
  place-items: center;
  padding: 18px 34px;
  border: 1px solid rgba(247, 216, 74, 0.32);
  border-radius: 8px;
  translate: -50% 0;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(6, 22, 39, 0.92), rgba(8, 42, 60, 0.84)),
    radial-gradient(circle at 18% 18%, rgba(247, 216, 74, 0.2), transparent 34%),
    radial-gradient(circle at 82% 22%, rgba(76, 201, 240, 0.22), transparent 36%);
  box-shadow:
    inset 0 0 48px rgba(76, 201, 240, 0.14),
    inset 0 0 26px rgba(247, 216, 74, 0.08),
    0 20px 54px rgba(0, 0, 0, 0.46),
    0 0 34px rgba(76, 201, 240, 0.16);
  text-align: center;
  transform: translateZ(36px);
}

.word-display.answer-visible {
  padding-top: 28px;
  border-color: rgba(247, 216, 74, 0.58);
  background:
    linear-gradient(135deg, rgba(8, 25, 41, 0.96), rgba(61, 43, 12, 0.9)),
    radial-gradient(ellipse at 50% 0%, rgba(247, 216, 74, 0.3), transparent 54%),
    radial-gradient(ellipse at 50% 78%, rgba(76, 201, 240, 0.16), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 58px rgba(247, 216, 74, 0.12),
    0 24px 64px rgba(0, 0, 0, 0.52),
    0 0 42px rgba(247, 216, 74, 0.24);
}

.word-display.answer-reveal-moment {
  animation: answerRevealMoment 950ms ease both;
}

.word-display.answer-reveal-auto {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 64px rgba(247, 216, 74, 0.18),
    0 26px 70px rgba(0, 0, 0, 0.54),
    0 0 54px rgba(247, 216, 74, 0.3);
}

.word-display::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: 7px;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.11) 46%, transparent 62%);
  opacity: 0.72;
}

.word-display::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.word-display.answer-visible::after {
  content: "LÖSUNG";
  top: 10px;
  left: 50%;
  translate: -50% 0;
  padding: 3px 11px 4px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 999px;
  background: rgba(6, 15, 24, 0.5);
  color: rgba(255, 236, 166, 0.88);
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(247, 216, 74, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 18px rgba(247, 216, 74, 0.14);
}

.word-display.answer-reveal-moment::before {
  animation: answerRevealSheen 950ms ease both;
}

.word-display.answer-reveal-moment::after {
  animation: answerLabelPop 950ms ease both;
}

.word-display.answer-reveal-moment strong {
  animation: answerTextPop 950ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.level-challenge .word-display {
  border-color: rgba(255, 184, 62, 0.48);
  background:
    linear-gradient(135deg, rgba(27, 21, 8, 0.92), rgba(56, 36, 8, 0.82)),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.24), transparent 56%);
  box-shadow:
    inset 0 0 50px rgba(247, 216, 74, 0.12),
    0 20px 60px rgba(247, 216, 74, 0.16);
}

body.level-challenge .word-display.answer-visible {
  border-color: rgba(247, 216, 74, 0.68);
  background:
    linear-gradient(135deg, rgba(28, 20, 8, 0.96), rgba(70, 45, 9, 0.9)),
    radial-gradient(ellipse at 50% 0%, rgba(247, 216, 74, 0.34), transparent 56%),
    linear-gradient(180deg, rgba(255, 184, 74, 0.08), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 60px rgba(247, 216, 74, 0.16),
    0 24px 66px rgba(0, 0, 0, 0.54),
    0 0 46px rgba(255, 184, 74, 0.26);
}

body.level-elite .word-display {
  border-color: rgba(255, 48, 68, 0.68);
  background:
    linear-gradient(135deg, rgba(34, 3, 12, 0.96), rgba(84, 8, 22, 0.88)),
    radial-gradient(circle at 50% 0%, rgba(255, 48, 68, 0.38), transparent 56%);
  box-shadow:
    inset 0 0 58px rgba(255, 48, 68, 0.18),
    0 20px 80px rgba(255, 48, 68, 0.28);
}

body.level-elite .word-display.answer-visible {
  border-color: rgba(247, 216, 74, 0.62);
  background:
    linear-gradient(135deg, rgba(32, 4, 12, 0.97), rgba(78, 31, 8, 0.9)),
    radial-gradient(ellipse at 50% 0%, rgba(247, 216, 74, 0.26), transparent 54%),
    linear-gradient(180deg, rgba(255, 48, 68, 0.16), transparent 64%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 62px rgba(247, 216, 74, 0.12),
    0 24px 72px rgba(0, 0, 0, 0.58),
    0 0 48px rgba(255, 48, 68, 0.26);
}

body.level-challenge .level-badge {
  border-color: rgba(255, 184, 74, 0.56);
  background: rgba(255, 184, 74, 0.16);
  color: #ffe6a8;
  box-shadow: 0 0 26px rgba(255, 184, 74, 0.22);
}

body.level-elite .level-badge {
  border-color: rgba(255, 70, 84, 0.64);
  background: rgba(255, 48, 68, 0.2);
  color: #ffd7d7;
  box-shadow: 0 0 24px rgba(255, 48, 68, 0.26);
}

body.level-challenge .result-card {
  border-color: rgba(255, 184, 74, 0.4);
  background:
    linear-gradient(135deg, rgba(42, 27, 14, 0.97), rgba(5, 9, 18, 0.97)),
    radial-gradient(circle at 50% 0%, rgba(255, 184, 74, 0.2), transparent 58%);
}

body.level-elite .result-card {
  border-color: rgba(255, 64, 89, 0.48);
  background:
    linear-gradient(135deg, rgba(42, 7, 18, 0.98), rgba(5, 2, 7, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(255, 64, 89, 0.24), transparent 58%);
}

body.level-challenge .trophy.won,
body.level-challenge .trophy-earned {
  filter:
    brightness(1.12)
    saturate(1.12)
    drop-shadow(0 9px 14px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 20px rgba(255, 184, 74, 0.76))
    drop-shadow(0 0 44px rgba(255, 98, 31, 0.32));
}

body.level-elite .trophy.won,
body.level-elite .trophy-earned {
  filter:
    brightness(1.12)
    saturate(1.14)
    drop-shadow(0 9px 14px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 22px rgba(255, 64, 89, 0.78))
    drop-shadow(0 0 48px rgba(255, 48, 72, 0.36));
}

.word-display[hidden] {
  display: none;
}

.word-display.word-reveal-sweep,
.word-display.word-reveal-lift,
.word-display.word-reveal-flash {
  animation: wordRevealSweep 900ms ease both;
}

.word-display.word-reveal-lift {
  animation-name: wordRevealLift;
}

.word-display.word-reveal-flash {
  animation-name: wordRevealFlash;
}

.word-display strong {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  color: #f7fbff;
  font-size: clamp(50px, 5.8vw, 108px);
  font-weight: 950;
  line-height: 1.02;
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  text-shadow:
    0 3px 0 rgba(247, 216, 74, 0.42),
    0 0 22px rgba(76, 201, 240, 0.64),
    0 0 44px rgba(247, 216, 74, 0.22);
}

.word-display.answer-visible strong {
  color: #fff7c8;
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.42),
    0 0 22px rgba(247, 216, 74, 0.54),
    0 0 48px rgba(76, 201, 240, 0.26);
}

.field:has(.word-display:not([hidden])) .event-banner.word-tone.show {
  top: 3.2%;
  max-width: min(460px, 48%);
  min-height: 42px;
  padding: 10px 18px;
  font-size: clamp(17px, 1.8vw, 31px);
}

.field:has(.word-display:not([hidden])) .event-banner.word-tone {
  border-color: rgba(76, 201, 240, 0.28);
  background:
    linear-gradient(135deg, rgba(10, 30, 48, 0.84), rgba(4, 12, 22, 0.78)),
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.16), transparent 70%);
  color: #dff7ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.32);
}

.field:has(.word-display:not([hidden])) .word-display {
  top: 17.4%;
}

.flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255, 247, 190, 0.52), transparent 36%);
}

.flash.show {
  animation: flash 1450ms ease;
}

.flash.penalty-flash {
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 74, 94, 0.16), transparent 38%),
    linear-gradient(90deg, rgba(255, 58, 83, 0.1), transparent 34%, transparent 66%, rgba(255, 58, 83, 0.1));
}

.flash.penalty-flash.show {
  animation: penaltyFlash 1350ms ease;
}

body.penalty-alert .field {
  animation: penaltyFieldPulse 1400ms ease-in-out infinite;
}

body.penalty-alert-a .field::before,
body.penalty-alert-b .field::before {
  opacity: 1;
}

body.penalty-alert-a .field::before {
  background:
    radial-gradient(circle at 26% 58%, rgba(73, 229, 143, 0.28), transparent 24%),
    linear-gradient(90deg, rgba(73, 229, 143, 0.2), transparent 42%, rgba(255, 58, 83, 0.22));
  mix-blend-mode: screen;
}

body.penalty-alert-b .field::before {
  background:
    radial-gradient(circle at 74% 58%, rgba(73, 229, 143, 0.28), transparent 24%),
    linear-gradient(90deg, rgba(255, 58, 83, 0.22), transparent 58%, rgba(73, 229, 143, 0.2));
  mix-blend-mode: screen;
}

.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr) minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%),
    rgba(2, 9, 18, 0.76);
}

.action-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 36%),
    rgba(5, 18, 33, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.action-title {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 24px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.team-label,
.action-title,
.single-line-team-name {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.action-title.team-name-long {
  font-size: clamp(12px, 0.88vw, 16px);
}

.action-title.team-name-very-long,
.action-title.team-name-ultra-long {
  font-size: clamp(11px, 0.76vw, 14px);
}

.action {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 86px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 28px rgba(0, 0, 0, 0.24);
}

.action span {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 900;
  text-transform: uppercase;
}

.action strong {
  max-width: 100%;
  font-size: clamp(24px, 2vw, 38px);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
  text-align: center;
}

.action.good {
  background: linear-gradient(135deg, rgba(35, 172, 96, 0.92), rgba(18, 90, 61, 0.92));
}

.action.bad {
  background: linear-gradient(135deg, rgba(221, 60, 72, 0.94), rgba(102, 27, 38, 0.94));
}

.action.neutral {
  background: linear-gradient(135deg, rgba(62, 85, 114, 0.94), rgba(18, 31, 48, 0.94));
}

.middle-panel {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.tool {
  min-height: 44px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 12px 22px rgba(0, 0, 0, 0.22);
  font-weight: 950;
  font-size: clamp(12px, 0.86vw, 16px);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.middle-panel > .tool {
  grid-column: span 2;
}

.middle-panel > .tool:nth-of-type(4) {
  grid-column: span 2;
}

.middle-panel > .tool:nth-of-type(5) {
  grid-column: span 2;
}

.tool.primary {
  background:
    linear-gradient(180deg, #fff2a0, var(--gold) 54%, #c99616);
  color: #061421;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 16px 28px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(247, 216, 74, 0.24);
}

.tool.danger {
  color: #ffd2d2;
}

.tool.subtle {
  border-color: rgba(76, 201, 240, 0.22);
  color: #ccefff;
  background:
    linear-gradient(180deg, rgba(76, 201, 240, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(3, 13, 24, 0.42);
}

.mode-toggle {
  min-height: 44px;
  border: 1px solid rgba(247, 216, 74, 0.32);
  border-radius: 8px;
  background: rgba(247, 216, 74, 0.12);
  color: #fff3a6;
  font-size: clamp(12px, 0.85vw, 15px);
  font-weight: 950;
  text-transform: uppercase;
}

.penalty {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, rgba(1, 7, 13, 0.42), rgba(1, 7, 13, 0.72)),
    radial-gradient(circle at 50% 50%, rgba(255, 58, 83, 0.18), transparent 34%),
    url("assets/kids/stadien/vocab_penalty_backdrop_1672x941.jpg") center / cover no-repeat,
    rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(8px);
}

.penalty[hidden] {
  display: none;
}

.setup {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.2), transparent 38%),
    rgba(2, 8, 16, 0.86);
  backdrop-filter: blur(10px);
}

.setup[hidden] {
  display: none;
}

.setup-card {
  width: min(1180px, 92vw);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(14, 39, 66, 0.96), rgba(4, 12, 22, 0.96));
  box-shadow: var(--shadow);
}

.setup-card h1 {
  margin: 4px 0 20px;
  font-size: clamp(48px, 5vw, 82px);
  line-height: 0.95;
}

.season-edition-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: -8px 0 18px;
  padding: 7px 11px;
  border: 1px solid rgba(247, 216, 74, 0.38);
  border-radius: 999px;
  background: rgba(247, 216, 74, 0.11);
  color: #f7d84a;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.setup-layer-season {
  border-color: rgba(247, 216, 74, 0.24);
}

.season-setup-panel {
  display: grid;
  gap: 14px;
}

.season-setup-block {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.38);
}

.season-setup-block h3 {
  margin: 0;
  font-size: 18px;
  text-transform: uppercase;
}

.season-setup-grid,
.season-pair-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.season-setup-grid label,
.season-pair-form label,
.season-team-row label {
  display: grid;
  gap: 6px;
  color: #d5e8f7;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-setup-grid input,
.season-setup-grid select,
.season-pair-form input,
.season-pair-form select,
.season-team-row select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 9px 10px;
  background: rgba(1, 8, 16, 0.86);
  color: #f8fbff;
  font: inherit;
}

.season-setup-actions,
.season-pair-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.season-team-list,
.season-pair-list {
  display: grid;
  gap: 10px;
}

.season-team-row,
.season-pair-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.season-pair-row {
  grid-template-columns: minmax(130px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
  align-items: center;
}

.season-pair-row.inactive {
  opacity: 0.58;
}

.season-pair-row small,
.season-pair-row span {
  color: #b9d7e6;
  font-weight: 800;
}

.season-active-toggle {
  align-self: end;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.season-active-toggle input {
  width: auto;
  min-height: 0;
}

.season-setup-message {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid rgba(247, 216, 74, 0.24);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(247, 216, 74, 0.09);
  color: #fff1a8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.season-setup-message.success {
  border-color: rgba(82, 255, 168, 0.32);
  background: rgba(82, 255, 168, 0.1);
  color: #9effcd;
}

.season-setup-message.error {
  border-color: rgba(255, 99, 99, 0.36);
  background: rgba(255, 99, 99, 0.12);
  color: #ffd1d1;
}

.season-setup-inline-hint {
  margin: 0;
}

.season-league-heading,
.season-hub-hero-title,
.season-readiness-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.season-league-heading {
  justify-content: space-between;
}

.season-league-heading > div,
.season-hub-hero-title > div,
.season-readiness-title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.season-league-description {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
}

.season-league-description strong {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.1;
}

.season-league-description span {
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 800;
}

.season-main-teams-grid,
.season-roster-teams {
  display: grid;
  gap: 12px;
}

.season-main-teams-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.season-roster-teams {
  grid-template-columns: minmax(0, 1fr);
}

.season-main-team-card,
.season-roster-team {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.season-main-team-a,
.season-roster-team-a {
  box-shadow: inset 4px 0 0 rgba(90, 167, 255, 0.72);
}

.season-main-team-b,
.season-roster-team-b {
  box-shadow: inset 4px 0 0 rgba(255, 99, 99, 0.72);
}

.season-main-team-card-header,
.season-roster-team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.season-main-team-card-header > div,
.season-roster-team-header > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.season-roster-team-header small {
  color: #8baec1;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-main-team-card-header span:not(.season-badge-icon),
.season-roster-team-header span {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-main-team-card-header strong,
.season-roster-team-header strong {
  color: #f8fbff;
  font-size: 22px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-main-team-fields,
.season-main-custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.45fr);
  gap: 10px;
}

.season-main-team-mode {
  display: grid;
}

.season-main-team-mode label {
  display: grid;
  gap: 6px;
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-main-team-fields label,
.season-main-custom-fields label {
  display: grid;
  gap: 6px;
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-main-team-card input,
.season-main-team-card select,
.season-roster-row input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(1, 8, 16, 0.86);
  color: #f8fbff;
  font: inherit;
}

.season-color-field input {
  padding: 4px;
}

.season-main-team-card.is-custom-team .season-main-team-fields,
.season-main-custom-fields.is-disabled {
  opacity: 0.5;
}

.season-main-team-card select:disabled,
.season-main-team-card input:disabled {
  cursor: not-allowed;
}

.season-roster-block {
  gap: 14px;
}

.season-roster-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.season-roster-table {
  display: grid;
  gap: 7px;
  padding-bottom: 2px;
}

.season-roster-table-head,
.season-roster-row {
  display: grid;
  grid-template-columns: 54px minmax(150px, 1.15fr) 62px minmax(116px, 1fr) minmax(116px, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.season-roster-table-head {
  padding: 0 6px;
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-roster-row {
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.42);
}

.season-roster-row > * {
  min-width: 0;
}

.season-roster-row.new {
  background: rgba(255, 255, 255, 0.035);
}

.season-roster-row.legacy {
  border-color: rgba(247, 216, 74, 0.22);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.08), transparent),
    rgba(2, 9, 18, 0.42);
}

.season-roster-active {
  display: grid;
  place-items: center;
}

.season-roster-active input {
  width: 22px;
  min-height: 22px;
  accent-color: #52ffa8;
}

.season-roster-fixed-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.season-roster-fixed-name strong {
  min-width: 0;
  color: #f8fbff;
  font-size: 15px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-roster-fixed-name small {
  color: #8baec1;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-roster-badge-preview {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 38px;
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.38), rgba(76, 201, 240, 0.18));
  color: #08131f;
  font-size: 12px;
  font-weight: 1000;
}

.season-roster-badge-preview.season-image-badge {
  overflow: visible;
  padding: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(5, 13, 24, 0.58);
  line-height: 0;
}

.season-roster-badge-preview.season-image-badge img {
  display: block;
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

.season-row-tool {
  min-width: 0;
  padding-inline: 10px;
}

.season-row-empty-action {
  color: #8baec1;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.season-hub-layer {
  border-color: rgba(76, 201, 240, 0.26);
}

.season-hub-panel {
  display: grid;
  gap: 14px;
}

.season-hub-launch-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(360px, 0.95fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(76, 201, 240, 0.1), rgba(247, 216, 74, 0.08)),
    rgba(2, 9, 18, 0.46);
}

.season-hub-launch-card.ready {
  border-color: rgba(82, 255, 168, 0.26);
}

.season-hub-launch-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.season-hub-launch-title > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.season-hub-launch-title h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
}

.season-hub-launch-match {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}

.season-hub-launch-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.season-hub-launch-team {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.season-hub-launch-team-b {
  justify-content: flex-end;
}

.season-hub-launch-team .season-badge-icon {
  width: 48px;
  height: 48px;
}

.season-hub-launch-team .season-image-badge img {
  width: 124%;
  height: 124%;
}

.season-hub-launch-vs {
  color: #d8e7ef;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.season-hub-launch-team strong {
  min-width: 0;
  color: #f8fbff;
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.season-hub-launch-match small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-compact-status {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #d5e8f7;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-compact-status.ready {
  border-color: rgba(82, 255, 168, 0.34);
  background: rgba(82, 255, 168, 0.12);
  color: #9effcd;
}

.season-compact-status.not-ready {
  border-color: rgba(247, 216, 74, 0.34);
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
}

.season-hub-hero,
.season-hub-empty,
.season-hub-future,
.season-match-preview,
.season-recent-records {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(76, 201, 240, 0.1), rgba(247, 216, 74, 0.06)),
    rgba(2, 9, 18, 0.44);
}

.season-hub-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.season-readiness-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(90, 167, 255, 0.1), rgba(255, 99, 99, 0.08)),
    rgba(2, 9, 18, 0.48);
}

.season-readiness-card.ready {
  border-color: rgba(82, 255, 168, 0.26);
}

.season-readiness-card.not-ready {
  border-color: rgba(247, 216, 74, 0.28);
}

.season-readiness-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.season-readiness-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 0.98;
}

.season-readiness-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.season-readiness-versus {
  display: grid;
  place-items: center;
  width: 64px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 216, 74, 0.18), transparent 62%),
    rgba(255, 255, 255, 0.055);
  color: #fff1a8;
  font-size: 22px;
  font-weight: 1000;
}

.season-readiness-side {
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 150px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.5);
}

.season-readiness-side-a {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--season-main-color, #5aa7ff) 76%, transparent);
}

.season-readiness-side-b {
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--season-main-color, #ff6363) 76%, transparent);
}

.season-readiness-side.missing {
  border-color: rgba(255, 99, 99, 0.28);
  color: #ffd1d1;
}

.season-readiness-team-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.season-readiness-team-title span {
  display: block;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-readiness-team-title strong {
  display: block;
  color: #f8fbff;
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.season-readiness-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #d5e8f7;
  font-weight: 900;
}

.season-readiness-count strong {
  color: #fff1a8;
  font-size: 28px;
  line-height: 1;
}

.season-readiness-status {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.08);
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-readiness-status.ready {
  border-color: rgba(82, 255, 168, 0.34);
  background: rgba(82, 255, 168, 0.12);
  color: #9effcd;
}

.season-readiness-status.not-ready {
  border-color: rgba(247, 216, 74, 0.3);
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
}

.season-match-preview {
  border-color: rgba(247, 216, 74, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(76, 201, 240, 0.08), rgba(255, 99, 99, 0.06)),
    rgba(2, 9, 18, 0.48);
}

.season-match-preview-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.season-hub-hero h3,
.season-hub-empty h3,
.season-hub-future h3,
.season-match-preview h3,
.season-recent-records h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1;
}

.season-hub-meta,
.season-hub-empty p,
.season-hub-empty-note {
  margin: 0;
  color: #b9d7e6;
  font-weight: 800;
}

.season-hub-actions,
.season-hub-future-actions,
.season-match-actions,
.season-match-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.season-queue-message {
  width: fit-content;
  margin: 0;
  border: 1px solid rgba(247, 216, 74, 0.24);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(247, 216, 74, 0.09);
  color: #fff1a8;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-matchup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}

.season-matchup-versus {
  display: grid;
  place-items: center;
  width: 56px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(247, 216, 74, 0.18), transparent 62%),
    rgba(255, 255, 255, 0.055);
  color: #fff1a8;
  font-size: 20px;
  font-weight: 1000;
}

.season-match-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 158px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.5);
}

.season-match-side-a {
  box-shadow: inset 4px 0 0 rgba(90, 167, 255, 0.72);
}

.season-match-side-b {
  box-shadow: inset 4px 0 0 rgba(255, 99, 99, 0.72);
}

.season-match-side.inactive {
  opacity: 0.62;
}

.season-match-side.missing {
  border-color: rgba(255, 99, 99, 0.28);
  color: #ffd1d1;
}

.season-match-side-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.season-match-side-header span {
  display: block;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-match-side-header strong {
  display: block;
  color: #f8fbff;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.05;
}

.season-match-controls {
  grid-column: 1 / -1;
  justify-content: center;
}

.season-recent-records {
  border-color: rgba(82, 255, 168, 0.18);
}

.season-recent-records-header {
  display: grid;
  gap: 4px;
}

.season-record-list {
  display: grid;
  gap: 10px;
}

.season-record-card {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.44);
}

.season-record-card strong {
  color: #f8fbff;
  font-size: 18px;
}

.season-record-card span,
.season-record-card small,
.season-record-card p {
  margin: 0;
  color: #b9d7e6;
  font-weight: 800;
}

.season-pending-match-indicator {
  position: fixed;
  z-index: 45;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 3px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 14px;
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.13), rgba(76, 201, 240, 0.08)),
    rgba(2, 9, 18, 0.92);
  color: #f8fbff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
}

.season-pending-match-indicator span,
.season-pending-match-indicator small {
  color: #fff1a8;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-pending-match-indicator strong {
  font-size: 18px;
  line-height: 1.1;
}

.season-pending-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.season-pending-actions .tool {
  min-height: 0;
  padding: 6px 9px;
  font-size: 11px;
}

.season-result-confirmation {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.12), transparent 46%),
    rgba(2, 9, 18, 0.55);
}

.season-result-confirmation h3 {
  margin: 0;
  color: #fff1a8;
  font-size: clamp(22px, 2vw, 34px);
  text-transform: uppercase;
}

.season-result-confirmation p,
.season-result-message {
  margin: 0;
  color: #d5e8f7;
  font-weight: 800;
}

.season-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.season-result-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.season-result-metric {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.season-result-metric span {
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-result-metric strong {
  color: #f8fbff;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-result-winner-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 18px);
  min-width: 0;
}

.season-result-winner-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(58px, 6vw, 86px);
  height: clamp(58px, 6vw, 86px);
  overflow: visible;
}

.season-result-winner-emblem-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.46));
}

.season-hub-teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.season-hub-team {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 220px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.season-hub-team-a {
  box-shadow: inset 4px 0 0 rgba(90, 167, 255, 0.72);
}

.season-hub-team-b {
  box-shadow: inset 4px 0 0 rgba(255, 99, 99, 0.72);
}

.season-hub-team-header,
.season-hub-pair-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.season-hub-team-header span {
  display: block;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-hub-team-header strong {
  display: block;
  color: #f8fbff;
  font-size: 24px;
  line-height: 1.05;
}

.season-badge-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.42), rgba(255, 99, 99, 0.18));
  color: #08131f;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
}

.season-image-badge {
  position: relative;
  overflow: visible;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(5, 13, 24, 0.62);
  color: transparent;
  line-height: 0;
  isolation: isolate;
}

.season-image-badge img {
  display: block;
  width: 132%;
  height: 132%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.42));
}

.season-main-badge-preview.season-image-badge img,
.season-badge-team-a.season-image-badge img,
.season-badge-team-b.season-image-badge img {
  width: 136%;
  height: 136%;
}

.season-full-team-badge.season-image-badge img,
.season-pair-modal-team-badge.season-image-badge img,
.season-ceremony-final-badge.season-image-badge img {
  width: 126%;
  height: 126%;
}

.season-award-badge-stack .season-image-badge img,
.season-badge-stack .season-image-badge img,
.season-full-pair-mini-badge.season-image-badge img,
.season-pair-modal-pair-badge.season-image-badge img,
.season-mvp-pair-badge.season-image-badge img,
.season-mvp-overall-badge.season-image-badge img {
  width: 138%;
  height: 138%;
}

.season-award-preview-item .season-award-badge-stack .season-image-badge img,
.season-mvp-race-badges .season-image-badge img {
  width: 130%;
  height: 130%;
}

.season-league-badge.season-image-badge img,
.season-league-badge-preview.season-image-badge img,
.season-mvp-modal-badge.season-image-badge img,
.season-ceremony-modal-badge.season-image-badge img {
  width: 132%;
  height: 132%;
}

.season-badge-team-a {
  border-color: color-mix(in srgb, var(--season-main-color, #5aa7ff) 68%, white 10%);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--season-main-color, #5aa7ff) 74%, transparent), rgba(76, 201, 240, 0.3));
}

.season-badge-team-b {
  border-color: color-mix(in srgb, var(--season-main-color, #ff6363) 68%, white 10%);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--season-main-color, #ff6363) 74%, transparent), rgba(247, 216, 74, 0.24));
}

.season-hub-pair-list {
  display: grid;
  gap: 10px;
}

.season-hub-pair-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.44);
}

.season-hub-pair-card.inactive {
  opacity: 0.58;
}

.season-hub-pair-title {
  justify-content: space-between;
}

.season-hub-pair-title > div {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 0;
}

.season-hub-pair-title strong {
  color: #f8fbff;
  font-size: 18px;
  line-height: 1.1;
  text-align: right;
}

.season-status-pill {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-status-pill.active {
  border-color: rgba(82, 255, 168, 0.34);
  background: rgba(82, 255, 168, 0.12);
  color: #9effcd;
}

.season-status-pill.inactive {
  border-color: rgba(255, 255, 255, 0.12);
  color: #a9b7c3;
}

.season-hub-aliases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.season-hub-aliases span {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.05);
  color: #d5e8f7;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.season-hub-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  min-height: 100vh;
  overflow-y: auto;
  padding: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(circle at 50% -18%, rgba(247, 216, 74, 0.22), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(90, 167, 255, 0.22), transparent 32%),
    radial-gradient(circle at 88% 20%, rgba(255, 99, 99, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(6, 19, 34, 0.98), rgba(4, 11, 22, 0.98) 52%, rgba(9, 14, 28, 0.98)),
    #06101e;
}

.season-hub-screen[hidden] {
  display: none;
}

body.season-hub-screen-open {
  overflow: hidden;
}

.season-hub-screen-panel {
  width: min(1320px, 100%);
  margin: 0 auto;
}

.season-full-hub,
.season-full-hub-empty {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(10px, 1.4vw, 18px);
  min-height: calc(100vh - clamp(36px, 6vw, 68px));
}

.season-full-hub::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 10, 20, 0.52), rgba(3, 10, 20, 0.74)),
    var(--season-hub-backdrop, none) center / cover no-repeat;
  opacity: 0.78;
  pointer-events: none;
}

.season-full-hub > *,
.season-full-hub-empty > * {
  position: relative;
  z-index: 1;
}

.season-full-hub-empty {
  place-content: center;
  justify-items: center;
  text-align: center;
}

.season-full-hub-empty h2 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 0.95;
}

.season-full-hub-empty p {
  margin: 0;
  color: #d5e8f7;
  font-weight: 800;
}

.season-full-hub-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-top: clamp(2px, 0.8vw, 10px);
}

.season-full-close-button {
  border-color: rgba(255, 99, 99, 0.64);
  background:
    linear-gradient(180deg, rgba(255, 99, 99, 0.24), rgba(122, 20, 28, 0.42)),
    rgba(48, 7, 12, 0.74);
  color: #ffe1e1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 28px rgba(97, 14, 22, 0.28);
}

.season-full-close-button:hover,
.season-full-close-button:focus-visible {
  border-color: rgba(255, 99, 99, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 99, 99, 0.34), rgba(122, 20, 28, 0.54)),
    rgba(68, 9, 16, 0.82);
  color: #fff7f7;
}

.season-full-hub-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.season-full-hub-title h2 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 0.95;
  text-shadow: 0 0 26px rgba(76, 201, 240, 0.18);
}

.season-full-hub-title span:not(.season-badge-icon) {
  display: block;
  margin-top: 6px;
  color: #d5e8f7;
  font-size: clamp(16px, 2vw, 23px);
  font-weight: 900;
}

.season-league-badge,
.season-league-badge-preview {
  border-color: rgba(247, 216, 74, 0.62);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.76), rgba(76, 201, 240, 0.34));
}

.season-league-badge-preview {
  width: clamp(58px, 5vw, 72px);
  height: clamp(58px, 5vw, 72px);
  font-size: clamp(16px, 1.6vw, 22px);
}

.season-full-league-badge {
  width: clamp(68px, 8vw, 104px);
  height: clamp(68px, 8vw, 104px);
  font-size: clamp(20px, 2.6vw, 32px);
}

.season-full-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
}

.season-full-dashboard-grid,
.season-full-team-stage {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto minmax(320px, 1fr);
  align-items: stretch;
  gap: clamp(12px, 1.7vw, 22px);
}

.season-full-center-column,
.season-global-dashboard-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.season-global-dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  width: min(1120px, 100%);
}

.season-dashboard-versus {
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 104px);
  height: clamp(64px, 7vw, 104px);
  border: 1px solid rgba(247, 216, 74, 0.46);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(247, 216, 74, 0.2), rgba(255, 255, 255, 0.07));
  color: #fff1a8;
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 1000;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.season-full-side {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-height: clamp(270px, 34vh, 390px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: clamp(16px, 2.2vw, 28px);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--season-main-color, #5aa7ff) 24%, transparent), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--season-main-color, #5aa7ff) 14%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(2, 9, 18, 0.62);
  text-align: center;
}

.season-full-side-a {
  box-shadow: inset 0 8px 0 color-mix(in srgb, var(--season-main-color, #5aa7ff) 76%, transparent);
}

.season-full-side-b {
  box-shadow: inset 0 8px 0 color-mix(in srgb, var(--season-main-color, #ff6363) 76%, transparent);
}

.season-full-side.missing {
  border-color: rgba(255, 99, 99, 0.32);
}

.season-full-team-badge {
  width: clamp(76px, 8vw, 116px);
  height: clamp(76px, 8vw, 116px);
  font-size: clamp(22px, 2.6vw, 36px);
}

.season-full-team-identity {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.season-full-team-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
  max-width: 100%;
}

.season-full-side span {
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.season-full-team-name {
  max-width: 100%;
  color: #f8fbff;
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.season-team-standings-summary {
  display: grid;
  grid-template-columns: minmax(96px, 0.75fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  width: min(420px, 100%);
  margin-top: 2px;
}

.season-team-points-block {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--season-main-color, #5aa7ff) 42%, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--season-main-color, #5aa7ff) 28%, transparent), transparent 70%),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 4px 0 color-mix(in srgb, var(--season-main-color, #5aa7ff) 70%, transparent);
}

.season-team-points-block strong {
  color: #f8fbff;
  font-size: clamp(42px, 5.2vw, 74px);
  line-height: 0.86;
}

.season-team-points-block span {
  color: #fff1a8;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-team-detail-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.season-team-record-block {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(2, 9, 18, 0.34);
}

.season-team-record-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 8px;
  min-width: 0;
}

.season-team-record-stats span {
  color: #f8fbff;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-team-record-block small {
  color: #8fd6ff;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-team-goals-block {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.season-team-goals-block span {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.045);
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-champion-cups {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  flex: 0 0 auto;
  margin-top: -2px;
}

.season-champion-cups.empty {
  display: none;
}

.season-champion-cup {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(50px, 4.8vw, 72px);
  height: clamp(50px, 4.8vw, 72px);
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 241, 168, 0.18), transparent 62%),
    rgba(2, 9, 18, 0.38);
  box-shadow:
    inset 0 3px 0 rgba(247, 216, 74, 0.18),
    0 16px 30px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(247, 216, 74, 0.08);
}

.season-champion-cup-img {
  display: block;
  width: 116%;
  height: 116%;
  object-fit: contain;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.42));
  pointer-events: none;
}

.season-champion-cup-fallback {
  color: #fff1a8;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 1000;
  line-height: 1;
}

.season-champion-cup-more {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border: 1px solid rgba(247, 216, 74, 0.26);
  border-radius: 999px;
  padding: 0 8px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 10px;
  font-weight: 1000;
}

.season-team-mvp-card {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: min(420px, 100%);
  border: 1px solid rgba(247, 216, 74, 0.26);
  border-radius: 8px;
  padding: 10px 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 216, 74, 0.13), transparent 64%),
    linear-gradient(90deg, rgba(247, 216, 74, 0.08), rgba(76, 201, 240, 0.035)),
    rgba(2, 9, 18, 0.38);
  box-shadow: inset 3px 0 0 rgba(247, 216, 74, 0.28);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.season-team-mvp-card:hover,
.season-team-mvp-card:focus-visible {
  border-color: rgba(247, 216, 74, 0.48);
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 216, 74, 0.19), transparent 64%),
    linear-gradient(90deg, rgba(247, 216, 74, 0.12), rgba(76, 201, 240, 0.055)),
    rgba(2, 9, 18, 0.48);
  transform: translateY(-1px);
}

.season-team-mvp-card.empty {
  grid-template-columns: minmax(0, 1fr);
  text-align: center;
}

.season-mvp-pair-badge {
  width: 48px;
  height: 48px;
  font-size: 14px;
  border-color: rgba(247, 216, 74, 0.34);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.24), rgba(76, 201, 240, 0.12)),
    rgba(2, 9, 18, 0.48);
  box-shadow: 0 8px 20px rgba(247, 216, 74, 0.1);
}

.season-team-mvp-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.season-team-mvp-card span,
.season-team-mvp-card small,
.season-team-mvp-card em {
  color: #fff1a8;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-team-mvp-card strong {
  color: #f8fbff;
  font-size: clamp(16px, 1.55vw, 21px);
  font-weight: 1000;
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.season-team-mvp-card small {
  color: #9edbff;
}

.season-team-mvp-card em {
  color: #b9d7e6;
  font-style: normal;
}

.season-team-mvp-card .season-mvp-simple-note {
  justify-self: start;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(247, 216, 74, 0.07);
  color: #fff1a8;
}

.season-mvp-details-hint {
  justify-self: start;
  color: #bdefff;
}

.season-full-versus {
  display: grid;
  place-items: center;
  align-self: center;
  width: clamp(70px, 9vw, 118px);
  height: clamp(70px, 9vw, 118px);
  border: 1px solid rgba(247, 216, 74, 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(247, 216, 74, 0.22), rgba(255, 255, 255, 0.08));
  color: #fff1a8;
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 1000;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.season-full-pair-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.065);
  color: #d5e8f7;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.season-full-pair-count:hover,
.season-full-pair-count:focus-visible {
  border-color: rgba(247, 216, 74, 0.36);
  background: rgba(247, 216, 74, 0.12);
  color: #fff1a8;
}

.season-full-pair-badges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46px, 46px));
  justify-content: center;
  gap: 12px 14px;
  width: min(500px, 100%);
  padding: 8px 6px 2px;
  overflow: visible;
}

.season-full-pair-mini-badge {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  font-size: 13px;
}

.season-full-badge-row-empty {
  margin: 0;
  color: #8baec1;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-pair-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  background: rgba(1, 6, 13, 0.76);
  backdrop-filter: blur(10px);
}

.season-pair-modal {
  display: grid;
  gap: 14px;
  width: min(900px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 32%),
    rgba(4, 15, 27, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  overflow: auto;
}

.season-pair-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.season-pair-modal-team-badge {
  width: 68px;
  height: 68px;
  font-size: 20px;
}

.season-pair-modal-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 0.95;
}

.season-pair-modal-header span {
  color: #fff1a8;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-pair-modal-list {
  display: grid;
  gap: 10px;
}

.season-pair-modal-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
}

.season-pair-modal-row.inactive {
  opacity: 0.68;
}

.season-pair-modal-row input {
  width: 22px;
  height: 22px;
  accent-color: #f7d84a;
}

.season-pair-modal-pair-badge {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

.season-pair-modal-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-pair-modal-row strong {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.season-pair-modal-row span {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.season-pair-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.season-pair-modal-actions span {
  flex: 1 1 260px;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 800;
}

.season-full-status {
  justify-self: center;
  max-width: 100%;
  margin: -2px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #d5e8f7;
  font-size: 13px;
  font-weight: 1000;
  text-align: center;
  text-transform: uppercase;
}

.season-full-status.ready {
  border-color: rgba(82, 255, 168, 0.36);
  background: rgba(82, 255, 168, 0.12);
  color: #9effcd;
}

.season-full-status.not-ready {
  border-color: rgba(247, 216, 74, 0.34);
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
}

.season-full-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(82, 255, 168, 0.22);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(82, 255, 168, 0.1), rgba(76, 201, 240, 0.08)),
    rgba(2, 9, 18, 0.52);
}

.season-full-start.not-ready {
  border-color: rgba(247, 216, 74, 0.28);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.1), rgba(255, 99, 99, 0.06)),
    rgba(2, 9, 18, 0.52);
}

.season-full-start > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-full-start strong {
  color: #f8fbff;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.05;
}

.season-full-start span {
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 900;
}

.season-full-start small {
  color: #8baec1;
  font-size: 12px;
  font-weight: 900;
}

.season-hub-warning {
  margin: 0;
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffeaa0;
  background: rgba(247, 216, 74, 0.1);
  font-size: 13px;
  font-weight: 950;
}

.season-match-settings-panel {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(124, 219, 255, 0.18);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.season-match-settings-heading {
  display: grid;
  gap: 4px;
}

.season-match-settings-heading strong {
  color: #f8fbff;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.05;
}

.season-match-settings-heading span {
  color: #8baec1;
  font-size: 12px;
  font-weight: 900;
}

.season-match-settings-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(120px, 0.8fr));
  gap: 10px;
  align-items: stretch;
}

.season-match-settings-grid fieldset,
.season-match-settings-grid label {
  display: grid;
  gap: 7px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  color: #eaf6ff;
  background: rgba(2, 9, 18, 0.34);
  font-size: 12px;
  font-weight: 950;
}

.season-match-format {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.season-match-flow {
  grid-template-columns: 1fr;
}

.season-match-format legend {
  grid-column: 1 / -1;
  color: #8baec1;
  font-size: 11px;
  text-transform: uppercase;
}

.season-match-format label {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

.season-match-format label span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.season-match-settings-grid input[type="number"] {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.26);
  font: inherit;
}

.season-possession-rush-settings {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(7, 18, 35, 0.42);
  padding: 10px;
}

.season-possession-rush-settings summary {
  cursor: pointer;
  color: #fff3a6;
  font-weight: 900;
}

.season-possession-rush-grid {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  margin-top: 10px;
}

.season-possession-rush-grid select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 10px;
  color: #ffffff;
  background: #05070d;
  font: inherit;
  color-scheme: dark;
}

.season-possession-rush-grid select:hover,
.season-possession-rush-grid select:focus {
  border-color: rgba(247, 216, 74, 0.52);
  background-color: #05070d;
  color: #ffffff;
  outline: none;
}

.season-possession-rush-grid select option {
  background: #05070d;
  color: #ffffff;
}

.season-possession-rush-grid select option:checked {
  background: #10243a;
  color: #ffffff;
}

@media (max-width: 760px) {
  .season-match-settings-grid {
    grid-template-columns: 1fr;
  }
}

.season-full-placeholders {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.season-full-placeholder {
  display: grid;
  gap: 6px;
  min-height: 106px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.season-full-placeholder span {
  color: #8baec1;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-full-placeholder strong {
  color: #f8fbff;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.05;
}

.season-full-records {
  align-content: start;
}

.season-standings-panel,
.season-full-records {
  min-width: 0;
}

.season-full-records p {
  margin: 0;
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 800;
}

.season-standings-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.42);
}

.season-standings-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  color: #f8fbff;
  font-size: 12px;
  font-weight: 900;
}

.season-standings-table th,
.season-standings-table td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  white-space: nowrap;
}

.season-standings-table th:first-child,
.season-standings-table td:first-child {
  text-align: left;
}

.season-standings-table th {
  color: #8fd6ff;
  font-size: 10px;
  text-transform: uppercase;
}

.season-standings-table tbody tr:last-child td {
  border-bottom: 0;
}

.season-standings-note {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 800;
}

.season-record-list-compact {
  gap: 8px;
}

.season-record-list-scroll {
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
}

.season-record-list-compact .season-record-card {
  padding: 10px;
}

.season-record-list-compact .season-record-card strong {
  font-size: 14px;
}

.season-record-list-compact .season-record-card span,
.season-record-list-compact .season-record-card small {
  font-size: 11px;
}

.season-history-record-card {
  background:
    linear-gradient(135deg, rgba(90, 167, 255, 0.08), rgba(82, 255, 168, 0.045)),
    rgba(2, 9, 18, 0.52);
}

.season-history-result {
  color: #e7f7ff;
}

.season-history-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px 8px;
}

.season-history-meta-grid small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.season-full-matchup {
  gap: clamp(10px, 1.5vw, 18px);
}

.season-full-side {
  min-height: clamp(270px, 34vh, 390px);
  padding: clamp(16px, 2.2vw, 28px);
}

.season-full-team-badge {
  width: clamp(66px, 7vw, 104px);
  height: clamp(66px, 7vw, 104px);
}

.season-full-team-name {
  font-size: clamp(30px, 3.5vw, 52px);
}

.season-start-command {
  grid-template-columns: auto minmax(180px, 1fr) auto;
  justify-self: center;
  width: min(1080px, 100%);
  border-color: rgba(247, 216, 74, 0.24);
  padding: 8px 9px 8px 12px;
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.11), rgba(76, 201, 240, 0.08), rgba(82, 255, 168, 0.08)),
    rgba(2, 9, 18, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.22);
}

.season-start-command.ready {
  border-color: rgba(82, 255, 168, 0.22);
}

.season-vocabulary-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  width: min(1080px, 100%);
  justify-self: center;
  border: 1px solid rgba(247, 216, 74, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.1), rgba(76, 201, 240, 0.07)),
    rgba(2, 9, 18, 0.68);
}

.season-vocabulary-card.ready {
  border-color: rgba(82, 255, 168, 0.36);
}

.season-vocabulary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-vocabulary-copy > span {
  color: #8fd6ff;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-vocabulary-copy > strong {
  color: #f8fbff;
  font-size: clamp(20px, 2vw, 28px);
}

.season-vocabulary-copy small,
.season-vocabulary-copy p {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.season-vocabulary-copy p {
  color: rgba(159, 232, 255, 0.78);
}

.season-vocabulary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.season-start-command-copy {
  display: contents;
  min-width: 0;
}

.season-start-status {
  align-self: center;
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.06);
  color: #d5e8f7;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-start-status.ready {
  border-color: rgba(82, 255, 168, 0.34);
  background: rgba(82, 255, 168, 0.11);
  color: #9effcd;
}

.season-start-status.not-ready {
  border-color: rgba(247, 216, 74, 0.34);
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
}

.season-start-command-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.season-start-command-actions .season-start-match-button {
  min-height: 44px;
  padding-inline: clamp(16px, 2.5vw, 28px);
  font-size: clamp(13px, 1.15vw, 16px);
}

.season-match-settings-button,
.season-rules-button {
  min-height: 44px;
}

.season-snapshot-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  width: 100%;
  justify-self: center;
}

.season-global-dashboard-grid .season-snapshot-strip,
.season-global-dashboard-grid .season-history-panel {
  grid-column: 1 / -1;
}

.season-snapshot-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(2, 9, 18, 0.56);
  box-shadow: inset 0 3px 0 rgba(247, 216, 74, 0.18);
}

.season-snapshot-chip span {
  color: #8fd6ff;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-snapshot-chip strong {
  color: #f8fbff;
  font-size: clamp(15px, 1.4vw, 21px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-comeback-status-chip {
  border-color: rgba(247, 216, 74, 0.2);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(2, 9, 18, 0.56);
}

.season-comeback-status-chip span {
  color: #ffe983;
}

.season-comeback-status-chip strong {
  font-size: clamp(13px, 1.15vw, 18px);
}

.season-match-settings-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  background: rgba(1, 6, 13, 0.76);
  backdrop-filter: blur(10px);
}

.season-match-settings-modal {
  display: grid;
  gap: 14px;
  width: min(860px, 100%);
  max-height: min(720px, calc(100vh - 48px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 32%),
    rgba(4, 15, 27, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  overflow: auto;
}

.season-match-settings-modal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.season-match-settings-modal-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 0.95;
}

.season-match-settings-modal-header span {
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 900;
}

.season-match-settings-modal .season-match-settings-panel {
  background: rgba(255, 255, 255, 0.055);
}

.season-comeback-assist-settings {
  display: grid;
  gap: 9px;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: rgba(247, 216, 74, 0.065);
}

.season-comeback-assist-heading,
.season-comeback-assist-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.season-comeback-assist-heading strong {
  color: #ffe983;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-comeback-assist-heading span,
.season-comeback-assist-settings small {
  color: #f6e8b7;
  font-size: 12px;
  font-weight: 900;
}

.season-comeback-assist-controls label {
  min-width: min(220px, 100%);
}

.season-comeback-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.season-comeback-toggle input {
  width: auto;
}

.season-standings-rules {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(82, 255, 168, 0.18);
  border-radius: 8px;
  padding: 11px 12px;
  background:
    linear-gradient(180deg, rgba(82, 255, 168, 0.085), rgba(82, 255, 168, 0.035)),
    rgba(2, 9, 18, 0.36);
}

.season-standings-rules strong {
  color: #9effcd;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-standings-rules span {
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.38;
}

.season-possession-rush-rules {
  border-color: rgba(76, 201, 240, 0.24);
  background:
    linear-gradient(180deg, rgba(76, 201, 240, 0.095), rgba(82, 255, 168, 0.035)),
    rgba(2, 9, 18, 0.38);
}

.season-possession-rush-rules strong {
  color: #b8f1ff;
}

.season-standings-rule-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  min-width: 0;
  border: 1px solid rgba(82, 255, 168, 0.18);
  border-radius: 8px;
  padding: 9px 12px;
  background:
    linear-gradient(90deg, rgba(82, 255, 168, 0.08), rgba(247, 216, 74, 0.06)),
    rgba(2, 9, 18, 0.5);
  text-align: center;
}

.season-standings-rule-card strong {
  color: #9effcd;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-standings-rule-card span {
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 900;
}

.season-comeback-bonus-pill {
  color: #ffe983;
}

.season-full-placeholders {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.season-future-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.season-full-placeholders > .season-full-placeholder {
  grid-column: span 2;
}

.season-awards-preview-card {
  align-content: stretch;
  gap: 10px;
  min-height: 118px;
  padding: 12px;
  border-color: rgba(76, 201, 240, 0.26);
  background:
    radial-gradient(circle at 12% 0%, rgba(76, 201, 240, 0.16), transparent 44%),
    linear-gradient(135deg, rgba(76, 201, 240, 0.11), rgba(247, 216, 74, 0.07)),
    rgba(2, 9, 18, 0.52);
  box-shadow:
    inset 0 4px 0 rgba(76, 201, 240, 0.22),
    0 16px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.season-awards-preview-card:hover,
.season-awards-preview-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(247, 216, 74, 0.36);
  box-shadow:
    inset 0 4px 0 rgba(247, 216, 74, 0.24),
    0 20px 42px rgba(0, 0, 0, 0.26);
}

.season-awards-preview-card.empty {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(76, 201, 240, 0.045)),
    rgba(2, 9, 18, 0.48);
}

.season-awards-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.season-awards-preview-header > span {
  justify-self: start;
  border: 1px solid rgba(76, 201, 240, 0.24);
  border-radius: 999px;
  padding: 4px 8px;
  color: #bdefff;
  background: rgba(76, 201, 240, 0.08);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-awards-preview-header > strong {
  color: #f8fbff;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.season-awards-preview-action {
  border: 1px solid rgba(247, 216, 74, 0.3);
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-awards-preview-header > p {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
}

.season-awards-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.season-award-preview-item {
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 7px 9px;
  background: rgba(255, 255, 255, 0.055);
  text-align: center;
  overflow: hidden;
}

.season-award-preview-item.shared {
  border-color: rgba(247, 216, 74, 0.28);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(255, 255, 255, 0.045));
}

.season-award-preview-item.empty {
  opacity: 0.72;
}

.season-award-preview-item > span {
  justify-self: center;
  color: #8fd6ff;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.05;
  text-transform: uppercase;
}

.season-award-preview-item > strong {
  color: #f8fbff;
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.08;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-award-preview-item > small {
  color: #b9d7e6;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-badge-stack,
.season-award-badge-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.season-award-badge-stack .season-award-winner-badge,
.season-badge-stack .season-stack-badge {
  width: 32px;
  height: 32px;
  margin-left: -3px;
  border-color: rgba(247, 216, 74, 0.34);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.24), transparent 34%),
    rgba(12, 28, 46, 0.94);
  color: #f8fbff;
  font-size: 11px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.season-award-badge-stack .season-award-winner-badge:first-child,
.season-badge-stack .season-stack-badge:first-child {
  margin-left: 0;
}

.season-stack-more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: -2px;
  border: 1px solid rgba(76, 201, 240, 0.3);
  border-radius: 999px;
  background: rgba(76, 201, 240, 0.12);
  color: #bdefff;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-transform: none;
}

.season-award-preview-item .season-award-badge-stack {
  width: min(100%, 132px);
  min-height: 38px;
  padding-inline: 4px;
}

.season-award-preview-item.shared .season-award-badge-stack {
  width: min(100%, 150px);
}

.season-full-placeholder .season-stack-more,
.season-full-placeholder .season-award-winner-badge,
.season-full-placeholder .season-stack-badge {
  color: #f8fbff;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-award-empty-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  font-weight: 1000;
}

.season-awards-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  background: rgba(1, 6, 13, 0.8);
  backdrop-filter: blur(10px);
}

.season-awards-modal {
  display: grid;
  gap: 14px;
  width: min(980px, 100%);
  max-height: min(800px, calc(100vh - 48px));
  border: 1px solid rgba(76, 201, 240, 0.24);
  border-radius: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background:
    radial-gradient(circle at 0% 0%, rgba(76, 201, 240, 0.14), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(247, 216, 74, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 32%),
    rgba(4, 15, 27, 0.97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
  overflow: auto;
}

.season-awards-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.season-awards-modal-badge {
  width: 64px;
  height: 64px;
  border-color: rgba(76, 201, 240, 0.42);
  color: #f8fbff;
  font-size: 19px;
}

.season-awards-modal-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 0.96;
}

.season-awards-modal-header span {
  color: #bdefff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-awards-modal-empty {
  display: grid;
  gap: 5px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
}

.season-awards-modal-empty strong {
  color: #f8fbff;
  font-size: 17px;
}

.season-awards-modal-empty p {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
}

.season-awards-modal-section {
  display: grid;
  gap: 10px;
}

.season-awards-modal-section h4 {
  margin: 0;
  color: #f7d84a;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.season-awards-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.season-awards-modal-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 52%),
    rgba(255, 255, 255, 0.045);
  text-align: center;
}

.season-awards-modal-card.shared {
  border-color: rgba(247, 216, 74, 0.28);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(255, 255, 255, 0.045));
}

.season-awards-modal-card.empty {
  opacity: 0.82;
}

.season-awards-modal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.season-awards-modal-card-top span {
  color: #8fd6ff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-awards-modal-card-top em {
  border: 1px solid rgba(247, 216, 74, 0.25);
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-awards-modal-card strong {
  color: #f8fbff;
  font-size: clamp(17px, 1.8vw, 23px);
  line-height: 1.04;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-awards-modal-card small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-awards-modal-stat {
  border: 1px solid rgba(76, 201, 240, 0.22);
  border-radius: 999px;
  padding: 5px 9px;
  color: #bdefff;
  background: rgba(76, 201, 240, 0.08);
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.1;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-awards-modal-card p {
  margin: 0;
  color: #d7e8f4;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
}

.season-awards-modal-card .season-award-badge-stack .season-award-winner-badge {
  width: 44px;
  height: 44px;
  font-size: 13px;
}

.season-awards-modal-empty-badge {
  width: 44px;
  height: 44px;
}

.season-standings-panel,
.season-history-panel {
  grid-column: span 3;
  min-height: 260px;
}

.season-full-center-column .season-history-panel,
.season-global-dashboard-grid .season-history-panel {
  min-height: 300px;
}

.season-standings-card-grid {
  display: grid;
  gap: 12px;
}

.season-standing-card {
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--season-main-color, #5aa7ff) 18%, transparent), rgba(255, 255, 255, 0.035)),
    rgba(2, 9, 18, 0.66);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--season-main-color, #5aa7ff) 76%, transparent);
}

.season-standing-card-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(56px, 0.45fr) repeat(3, minmax(62px, 0.55fr));
  align-items: center;
  gap: 8px;
}

.season-standing-card span,
.season-standing-card small {
  text-transform: none;
}

.season-standing-rank {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(247, 216, 74, 0.46);
  border-radius: 8px;
  background: rgba(247, 216, 74, 0.12);
  color: #fff1a8;
  font-size: 16px;
  font-weight: 1000;
}

.season-standing-team-badge {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.season-standing-team-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.season-standing-team-name strong {
  color: #f8fbff;
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.season-standing-team-name small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.season-standing-points {
  display: grid;
  justify-items: center;
  min-width: 56px;
  border: 1px solid rgba(82, 255, 168, 0.25);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(82, 255, 168, 0.08);
}

.season-standing-points span {
  color: #9effcd;
  font-size: 10px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-standing-points strong {
  color: #f8fbff;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 0.9;
}

.season-standing-compact-stat {
  display: grid;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
  gap: 3px;
}

.season-standing-compact-stat span {
  color: #8fd6ff;
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-standing-compact-stat strong {
  color: #f8fbff;
  font-size: 15px;
  line-height: 1;
}

.season-standing-gd strong {
  color: #fff1a8;
}

.season-history-list {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow-y: auto;
  padding-right: 4px;
}

.season-history-record-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(90, 167, 255, 0.13), rgba(247, 216, 74, 0.06)),
    rgba(2, 9, 18, 0.64);
}

.season-history-fixture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.season-history-fixture-team {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.045);
  text-align: left;
  overflow: hidden;
}

.season-history-fixture-team-b {
  grid-template-columns: auto minmax(0, 1fr) auto;
  text-align: right;
}

.season-history-main-badge {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.season-history-team-copy {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

.season-history-fixture-team-b .season-history-team-copy {
  justify-items: end;
}

.season-history-team-copy span {
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.season-history-team-copy strong {
  color: #f8fbff;
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 0.95;
}

.season-history-pair-badges {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: clamp(92px, 8vw, 118px);
  min-width: 92px;
  overflow: hidden;
}

.season-history-fixture-team-a .season-history-pair-badges {
  justify-content: center;
}

.season-history-pair-badge {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  font-size: 9px;
}

.season-history-pair-badge.season-image-badge img {
  width: 132%;
  height: 132%;
}

.season-history-pair-more {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 7px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 10px;
  font-weight: 1000;
}

.season-history-score-center {
  display: grid;
  place-items: center;
  min-width: 92px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(247, 216, 74, 0.1);
}

.season-history-score-center span {
  color: #fff1a8;
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-history-score-center strong {
  color: #f8fbff;
  font-size: clamp(20px, 2.3vw, 32px);
  line-height: 1;
}

.season-history-record-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.season-history-record-main > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-history-record-main strong {
  color: #f8fbff;
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-history-record-main small {
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.season-history-result {
  border: 1px solid rgba(247, 216, 74, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
  font-size: 13px;
  font-weight: 1000;
  text-transform: none;
  white-space: nowrap;
}

.season-history-meta-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.season-history-meta-grid small {
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.045);
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 850;
}

.season-record-management {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 99, 99, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(90deg, rgba(255, 99, 99, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(2, 9, 18, 0.54);
}

.season-record-management-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-record-management-copy span {
  color: #ffd2d2;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-record-management-copy small {
  color: #d5e8f7;
  font-size: 11px;
  font-weight: 850;
  text-transform: none;
}

.season-record-management-copy em {
  color: #fff1a8;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  text-transform: none;
}

.season-record-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.season-record-reset-button,
.season-record-delete-button {
  border-color: rgba(255, 99, 99, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent),
    rgba(126, 25, 38, 0.58);
  color: #ffe1e1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 18px rgba(126, 25, 38, 0.18);
}

.season-record-delete-button {
  min-height: 34px;
  padding: 8px 10px;
  font-size: 11px;
}

.season-future-feature-card {
  align-content: center;
  min-height: 86px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(2, 9, 18, 0.42);
  opacity: 0.86;
}

.season-future-feature-card span {
  justify-self: start;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
}

.season-future-feature-card strong {
  font-size: clamp(16px, 1.5vw, 21px);
}

.season-ceremony-entry-card {
  align-content: center;
  min-height: 118px;
  padding: 14px;
  border-color: rgba(247, 216, 74, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.24), transparent 54%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.14), rgba(255, 99, 99, 0.08), rgba(76, 201, 240, 0.07)),
    rgba(2, 9, 18, 0.54);
  box-shadow:
    inset 0 4px 0 rgba(247, 216, 74, 0.28),
    0 16px 34px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 1;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.season-ceremony-entry-card:hover,
.season-ceremony-entry-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 241, 168, 0.56);
  box-shadow:
    inset 0 4px 0 rgba(255, 241, 168, 0.34),
    0 20px 42px rgba(0, 0, 0, 0.26),
    0 0 34px rgba(247, 216, 74, 0.12);
}

.season-ceremony-entry-card.empty {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(247, 216, 74, 0.055)),
    rgba(2, 9, 18, 0.48);
}

.season-ceremony-entry-card small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.season-ceremony-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 22;
  display: grid;
  place-items: center;
  padding: min(3vh, 24px) min(2vw, 28px);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.2), transparent 36%),
    rgba(1, 6, 13, 0.84);
  backdrop-filter: blur(10px);
}

.season-ceremony-modal {
  display: grid;
  gap: 14px;
  width: min(1080px, 100%);
  max-height: min(840px, calc(100vh - 48px));
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 10px;
  padding: clamp(16px, 2.6vw, 28px);
  background:
    linear-gradient(180deg, rgba(4, 15, 27, 0.68), rgba(4, 15, 27, 0.9)),
    radial-gradient(circle at 8% 0%, rgba(247, 216, 74, 0.12), transparent 32%),
    radial-gradient(circle at 92% 0%, rgba(76, 201, 240, 0.1), transparent 30%),
    var(--season-ceremony-backdrop, none) center / cover no-repeat,
    rgba(4, 15, 27, 0.98);
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.56),
    0 0 46px rgba(247, 216, 74, 0.08);
  overflow: auto;
}

.season-ceremony-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.season-ceremony-modal-badge {
  width: 72px;
  height: 72px;
  border-color: rgba(247, 216, 74, 0.54);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.3), transparent 34%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.68), rgba(76, 201, 240, 0.28));
  color: #f8fbff;
  font-size: 21px;
  box-shadow:
    0 0 28px rgba(247, 216, 74, 0.2),
    0 14px 28px rgba(0, 0, 0, 0.26);
}

.season-ceremony-modal-badge.season-image-badge {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(5, 13, 24, 0.56);
}

.season-ceremony-modal-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(32px, 4.2vw, 58px);
  line-height: 0.95;
  text-shadow: 0 0 26px rgba(247, 216, 74, 0.16);
}

.season-ceremony-modal-header span {
  color: #bdefff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-empty-state,
.season-ceremony-opening,
.season-ceremony-closing {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.1), rgba(76, 201, 240, 0.06)),
    rgba(255, 255, 255, 0.04);
}

.season-ceremony-empty-state {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.season-ceremony-opening span {
  color: #fff1a8;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-empty-state strong,
.season-ceremony-opening strong,
.season-ceremony-closing strong {
  color: #f8fbff;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.05;
}

.season-ceremony-empty-state p {
  margin: 0;
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 850;
}

.season-ceremony-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.season-ceremony-spotlight,
.season-ceremony-award-card {
  display: grid;
  align-content: start;
  justify-items: center;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 54%),
    rgba(255, 255, 255, 0.045);
  text-align: center;
}

.season-ceremony-spotlight {
  gap: 10px;
  min-height: 226px;
  padding: clamp(14px, 2vw, 22px);
}

.season-ceremony-spotlight.champion {
  border-color: rgba(247, 216, 74, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.2), transparent 48%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.13), rgba(255, 255, 255, 0.045));
}

.season-ceremony-spotlight.mvp {
  border-color: rgba(76, 201, 240, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.18), transparent 48%),
    linear-gradient(135deg, rgba(76, 201, 240, 0.12), rgba(255, 255, 255, 0.045));
}

.season-ceremony-spotlight.shared,
.season-ceremony-award-card.shared {
  border-color: rgba(247, 216, 74, 0.3);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(255, 255, 255, 0.045));
}

.season-ceremony-spotlight.empty,
.season-ceremony-award-card.empty {
  opacity: 0.82;
}

.season-ceremony-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.season-ceremony-card-top span,
.season-ceremony-award-card > span {
  color: #8fd6ff;
  font-size: 11px;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-ceremony-card-top em,
.season-ceremony-shared-pill {
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 999px;
  padding: 4px 7px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.season-ceremony-spotlight .season-award-badge-stack .season-award-winner-badge {
  width: clamp(54px, 6vw, 76px);
  height: clamp(54px, 6vw, 76px);
  font-size: clamp(16px, 2vw, 22px);
  margin-left: -10px;
}

.season-ceremony-spotlight .season-award-badge-stack .season-award-winner-badge:first-child {
  margin-left: 0;
}

.season-ceremony-spotlight .season-stack-more {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.season-ceremony-spotlight strong {
  color: #f8fbff;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 0.98;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-ceremony-spotlight small,
.season-ceremony-award-card small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-ceremony-stat {
  border: 1px solid rgba(76, 201, 240, 0.24);
  border-radius: 999px;
  padding: 6px 10px;
  color: #bdefff;
  background: rgba(76, 201, 240, 0.08);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1.1;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-ceremony-section {
  display: grid;
  gap: 10px;
}

.season-ceremony-section h4 {
  margin: 0;
  color: #f7d84a;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.season-ceremony-award-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.season-ceremony-award-card {
  gap: 7px;
  min-height: 142px;
  padding: 11px;
}

.season-ceremony-award-card strong {
  color: #f8fbff;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.05;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.season-ceremony-award-card .season-award-badge-stack .season-award-winner-badge {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.season-ceremony-empty-badge {
  width: 54px;
  height: 54px;
}

.season-ceremony-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  width: min(96vw, 1600px);
  height: min(94vh, 1000px);
  max-height: 94vh;
  padding: clamp(14px, 2vh, 24px);
  overflow: hidden;
}

.season-ceremony-modal-header h3 {
  font-size: clamp(30px, 3.2vw, 50px);
}

.season-ceremony-step {
  min-height: 0;
  overflow: auto;
  padding: 2px;
  scroll-behavior: auto;
}

.season-ceremony-step.is-current-step {
  animation: ceremonyStepIn 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.season-ceremony-step.opening,
.season-ceremony-step.final {
  display: grid;
  gap: 16px;
}

.season-ceremony-step.opening {
  align-content: center;
}

.season-ceremony-step.final {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  overflow: hidden;
}

.season-ceremony-step.reveal {
  display: grid;
  grid-template-columns: minmax(620px, 1.25fr) minmax(460px, 0.75fr);
  align-items: stretch;
  gap: 18px;
}

.season-ceremony-step-hero {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.season-ceremony-step-hero span,
.season-ceremony-final-card > span,
.season-ceremony-bonus-summary h4,
.season-ceremony-scoreboard-title span {
  color: #fff1a8;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-step-hero strong {
  color: #f8fbff;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 0.96;
  text-wrap: balance;
}

.season-ceremony-step.opening.is-current-step .season-ceremony-step-hero strong {
  animation: ceremonyHeroLift 520ms cubic-bezier(0.18, 0.9, 0.24, 1) both;
}

.season-ceremony-step-hero p {
  max-width: 760px;
  margin: 0;
  color: #b9d7e6;
  font-size: clamp(14px, 1.45vw, 18px);
  font-weight: 850;
  line-height: 1.35;
}

.season-ceremony-scoreboard {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.season-ceremony-scoreboard-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.season-ceremony-scoreboard-title em {
  color: #bdefff;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.season-ceremony-step.reveal .season-ceremony-score-grid {
  grid-template-columns: minmax(0, 1fr);
}

.season-ceremony-score-team {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: clamp(12px, 1.8vw, 20px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

.season-ceremony-score-team.has-bonus {
  border-color: rgba(247, 216, 74, 0.52);
  background:
    radial-gradient(circle at 100% 0%, rgba(247, 216, 74, 0.2), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(247, 216, 74, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.16);
  animation: ceremonyScorePulse 620ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}

.season-ceremony-score-team.team-a {
  border-color: rgba(90, 167, 255, 0.34);
}

.season-ceremony-score-team.team-b {
  border-color: rgba(255, 99, 99, 0.34);
}

.season-ceremony-score-team.team-a.has-bonus {
  border-color: rgba(90, 167, 255, 0.58);
}

.season-ceremony-score-team.team-b.has-bonus {
  border-color: rgba(255, 99, 99, 0.58);
}

.season-ceremony-score-badge {
  width: clamp(54px, 6vw, 80px);
  height: clamp(54px, 6vw, 80px);
  font-size: clamp(16px, 2vw, 24px);
}

.season-ceremony-score-team-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-ceremony-score-team-copy strong {
  color: #f8fbff;
  font-size: clamp(19px, 2.4vw, 34px);
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.season-ceremony-score-team-copy span,
.season-ceremony-score-team-copy small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.season-ceremony-score-team-copy small {
  color: #fff1a8;
}

.season-ceremony-score-points {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.season-ceremony-score-points strong {
  color: #f7d84a;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.9;
}

.season-ceremony-score-team.has-bonus .season-ceremony-score-points strong {
  text-shadow: 0 0 24px rgba(247, 216, 74, 0.34);
  animation: ceremonyNumberPop 520ms cubic-bezier(0.2, 0.9, 0.2, 1) 120ms both;
}

.season-ceremony-score-points span {
  color: #bdefff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-champion-note,
.season-ceremony-reveal-card,
.season-ceremony-final-card,
.season-ceremony-bonus-summary article {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  border: 1px solid rgba(247, 216, 74, 0.24);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 22px);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.16), transparent 48%),
    rgba(255, 255, 255, 0.045);
  text-align: center;
}

.season-ceremony-champion-note > span,
.season-ceremony-bonus-summary article > span,
.season-ceremony-reveal-header span {
  color: #8fd6ff;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-champion-note strong {
  color: #f8fbff;
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1;
  overflow-wrap: normal;
  word-break: normal;
}

.season-ceremony-champion-note small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
}

.season-ceremony-reveal-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  align-content: center;
  min-height: 100%;
  gap: 12px;
  border-color: rgba(247, 216, 74, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.24), transparent 44%),
    radial-gradient(circle at 10% 100%, rgba(76, 201, 240, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.055);
}

.season-ceremony-reveal-card > *,
.season-ceremony-final-card > * {
  position: relative;
  z-index: 1;
}

.season-ceremony-reveal-card.is-revealing {
  box-shadow:
    inset 0 4px 0 rgba(247, 216, 74, 0.22),
    0 24px 52px rgba(0, 0, 0, 0.24);
  animation: ceremonyCardReveal 620ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

.season-ceremony-reveal-card.is-revealing::after,
.season-ceremony-final-card.is-champion-reveal::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.3) 48%, transparent 62%);
  transform: translateX(-130%) rotate(10deg);
  animation: ceremonyCardShine 1200ms ease 160ms both;
  pointer-events: none;
}

.season-ceremony-reveal-card.shared {
  border-color: rgba(76, 201, 240, 0.42);
}

.season-ceremony-reveal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.season-ceremony-reveal-header em {
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-reveal-card h4 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.95;
  text-wrap: balance;
}

.season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge {
  width: clamp(76px, 7vw, 108px);
  height: clamp(76px, 7vw, 108px);
  font-size: clamp(22px, 2.2vw, 31px);
  margin-left: -12px;
  animation: ceremonyBadgePop 520ms cubic-bezier(0.18, 0.9, 0.2, 1) 110ms both;
}

.season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge:first-child {
  margin-left: 0;
}

.season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge:nth-child(2) {
  animation-delay: 170ms;
}

.season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge:nth-child(3) {
  animation-delay: 230ms;
}

.season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge:nth-child(n+4) {
  animation-delay: 290ms;
}

.season-ceremony-reveal-card .season-stack-more {
  width: 48px;
  height: 48px;
}

.season-ceremony-reveal-card > strong,
.season-ceremony-final-card > strong {
  color: #f7d84a;
  font-size: clamp(26px, 4vw, 56px);
  line-height: 0.96;
  overflow-wrap: normal;
  word-break: normal;
  max-width: 100%;
}

.season-ceremony-winner-name,
.season-ceremony-final-name {
  max-width: min(900px, 100%);
  color: #f7d84a;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

.season-ceremony-reveal-card > small,
.season-ceremony-final-card > small,
.season-ceremony-reveal-card p {
  max-width: 760px;
  margin: 0;
  color: #b9d7e6;
  font-size: clamp(13px, 1.35vw, 17px);
  font-weight: 850;
  line-height: 1.28;
  overflow-wrap: normal;
  word-break: normal;
}

.season-ceremony-winner-subline {
  text-wrap: balance;
}

.season-ceremony-bonus-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.season-ceremony-bonus-list.empty span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 999px;
  padding: 7px 10px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 12px;
  font-weight: 1000;
  line-height: 1;
}

.season-ceremony-bonus-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: min(100%, 360px);
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.16), rgba(255, 255, 255, 0.055)),
    rgba(2, 9, 18, 0.32);
  text-align: left;
}

.season-ceremony-bonus-card.is-bonus-pop {
  animation: ceremonyBonusPop 560ms cubic-bezier(0.18, 0.9, 0.2, 1) 180ms both;
}

.season-ceremony-bonus-card.is-bonus-pop:nth-child(2) {
  animation-delay: 260ms;
}

.season-ceremony-bonus-list.large .season-ceremony-bonus-card {
  min-width: min(100%, 520px);
  padding: 16px 18px;
  box-shadow:
    inset 0 3px 0 rgba(247, 216, 74, 0.24),
    0 18px 32px rgba(0, 0, 0, 0.2);
}

.season-ceremony-bonus-list.compact .season-ceremony-bonus-card {
  gap: 8px;
  min-width: min(100%, 260px);
  padding: 8px 10px;
}

.season-ceremony-bonus-card.team-a {
  border-color: rgba(90, 167, 255, 0.36);
}

.season-ceremony-bonus-card.team-b {
  border-color: rgba(255, 99, 99, 0.36);
}

.season-ceremony-bonus-badge {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.season-ceremony-bonus-list.large .season-ceremony-bonus-badge {
  width: 56px;
  height: 56px;
  font-size: 16px;
}

.season-ceremony-bonus-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.season-ceremony-bonus-copy span {
  color: #f8fbff;
  font-size: clamp(17px, 2vw, 28px);
  font-weight: 1000;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.season-ceremony-bonus-list.compact .season-ceremony-bonus-copy span {
  font-size: 13px;
}

.season-ceremony-bonus-copy em {
  color: #bdefff;
  font-size: 11px;
  font-style: normal;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.season-ceremony-bonus-card > strong {
  color: #f7d84a;
  font-size: clamp(42px, 5vw, 76px);
  line-height: 0.85;
  text-shadow: 0 0 22px rgba(247, 216, 74, 0.2);
  white-space: nowrap;
}

.season-ceremony-bonus-card.is-bonus-pop > strong {
  animation: ceremonyNumberPop 520ms cubic-bezier(0.2, 0.9, 0.2, 1) 260ms both;
}

.season-ceremony-bonus-list.compact .season-ceremony-bonus-card > strong {
  font-size: 28px;
}

.season-ceremony-final-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  align-content: center;
  min-height: 190px;
  border-color: rgba(247, 216, 74, 0.42);
}

.season-ceremony-final-card.is-champion-reveal {
  background:
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.28), transparent 48%),
    radial-gradient(circle at 0% 100%, rgba(76, 201, 240, 0.13), transparent 40%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 4px 0 rgba(247, 216, 74, 0.3),
    0 26px 56px rgba(0, 0, 0, 0.24);
  animation: ceremonyChampionReveal 620ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.season-ceremony-final-badge {
  width: clamp(74px, 8vw, 110px);
  height: clamp(74px, 8vw, 110px);
  font-size: clamp(22px, 2.8vw, 34px);
}

.season-ceremony-final-badge.is-champion-reveal {
  animation: ceremonyBadgePop 620ms cubic-bezier(0.18, 0.9, 0.2, 1) 140ms both;
}

.season-ceremony-final-draw-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.season-ceremony-bonus-summary {
  display: grid;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.season-ceremony-bonus-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.season-ceremony-bonus-summary article {
  align-content: center;
  padding: 12px;
}

.season-ceremony-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 12px;
}

.season-ceremony-controls > span {
  color: #bdefff;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-ceremony-control-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.season-ceremony-draw-note {
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 7px 10px;
  color: #b9d7e6;
  background: rgba(2, 9, 18, 0.44);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

@keyframes ceremonyStepIn {
  0% { opacity: 0; transform: translateY(12px); filter: saturate(0.92); }
  100% { opacity: 1; transform: translateY(0); filter: saturate(1); }
}

@keyframes ceremonyHeroLift {
  0% { opacity: 0; transform: translateY(14px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ceremonyCardReveal {
  0% { opacity: 0; transform: translateY(10px) scale(0.99); filter: brightness(0.96); }
  62% { opacity: 1; transform: translateY(-1px) scale(1.002); filter: brightness(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ceremonyBadgePop {
  0% { opacity: 0; transform: translateY(7px) scale(0.9); filter: brightness(0.96); }
  62% { opacity: 1; transform: translateY(-1px) scale(1.025); filter: brightness(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ceremonyBonusPop {
  0% { opacity: 0; transform: translateY(8px) scale(0.98); filter: brightness(0.96); }
  64% { opacity: 1; transform: translateY(-1px) scale(1.01); filter: brightness(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ceremonyNumberPop {
  0% { transform: scale(0.94); filter: brightness(0.98); }
  55% { transform: scale(1.035); filter: brightness(1.07); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes ceremonyScorePulse {
  0% { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(247, 216, 74, 0), 0 0 0 rgba(0, 0, 0, 0); }
  48% { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(247, 216, 74, 0.12), 0 12px 24px rgba(247, 216, 74, 0.08); }
  100% { transform: translateY(0); }
}

@keyframes ceremonyChampionReveal {
  0% { opacity: 0; transform: translateY(16px) scale(0.98); filter: brightness(0.9); }
  56% { opacity: 1; transform: translateY(-3px) scale(1.012); filter: brightness(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes ceremonyCardShine {
  0% { transform: translateX(-130%) rotate(10deg); opacity: 0; }
  24% { opacity: 0.36; }
  100% { transform: translateX(130%) rotate(10deg); opacity: 0; }
}

@media (max-width: 1180px) {
  .season-ceremony-step.reveal {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-ceremony-step.reveal .season-ceremony-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-ceremony-reveal-card {
    min-height: 0;
  }
}

.season-mvp-overall-card {
  align-content: center;
  min-height: 118px;
  padding: 16px;
  border-color: rgba(247, 216, 74, 0.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 216, 74, 0.22), transparent 52%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.16), rgba(76, 201, 240, 0.055)),
    rgba(2, 9, 18, 0.52);
  box-shadow:
    inset 0 4px 0 rgba(247, 216, 74, 0.34),
    0 16px 34px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.season-mvp-overall-card:hover,
.season-mvp-overall-card:focus-visible {
  border-color: rgba(247, 216, 74, 0.58);
  transform: translateY(-1px);
}

.season-mvp-overall-header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.season-mvp-overall-label,
.season-mvp-overall-card.empty > span {
  justify-self: start;
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.09);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-mvp-overall-badge {
  width: 52px;
  height: 52px;
  font-size: 16px;
  border-color: rgba(247, 216, 74, 0.42);
  box-shadow: 0 10px 24px rgba(247, 216, 74, 0.14);
}

.season-mvp-overall-card strong {
  color: #f8fbff;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.season-mvp-overall-card p {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.season-mvp-overall-card.race {
  border-color: rgba(76, 201, 240, 0.34);
  background:
    radial-gradient(circle at 0% 0%, rgba(76, 201, 240, 0.18), transparent 52%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(76, 201, 240, 0.08)),
    rgba(2, 9, 18, 0.52);
}

.season-mvp-overall-card.race .season-mvp-overall-label {
  border-color: rgba(76, 201, 240, 0.28);
  background: rgba(76, 201, 240, 0.09);
  color: #bdefff;
}

.season-mvp-race-badges {
  justify-content: flex-start;
  width: min(100%, 320px);
  min-height: 54px;
  padding-inline: 4px;
  margin: 2px 0;
  overflow: hidden;
}

.season-mvp-race-badges .season-stack-badge {
  width: 46px;
  height: 46px;
  margin-left: -4px;
  border-color: rgba(76, 201, 240, 0.34);
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(76, 201, 240, 0.13);
}

.season-mvp-race-badges .season-stack-badge:first-child {
  margin-left: 0;
}

.season-mvp-overall-card.race strong {
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.02;
}

.season-mvp-details-button {
  justify-self: start;
  border: 1px solid rgba(76, 201, 240, 0.24);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(76, 201, 240, 0.08);
  color: #bdefff;
  font: inherit;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  cursor: pointer;
}

.season-mvp-details-button:hover,
.season-mvp-details-button:focus-visible {
  border-color: rgba(76, 201, 240, 0.48);
  background: rgba(76, 201, 240, 0.15);
}

.season-mvp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  background: rgba(1, 6, 13, 0.78);
  backdrop-filter: blur(10px);
}

.season-mvp-modal {
  display: grid;
  gap: 14px;
  width: min(860px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 10px;
  padding: clamp(16px, 2.4vw, 24px);
  background:
    radial-gradient(circle at 0% 0%, rgba(247, 216, 74, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 32%),
    rgba(4, 15, 27, 0.97);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  overflow: auto;
}

.season-mvp-modal-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.season-mvp-modal-badge {
  width: 64px;
  height: 64px;
  border-color: rgba(247, 216, 74, 0.42);
  font-size: 19px;
}

.season-mvp-modal-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 0.96;
}

.season-mvp-modal-header span {
  color: #fff1a8;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.season-mvp-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.season-mvp-rules-card,
.season-mvp-race-card {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.season-mvp-race-card > .season-mvp-details-identity {
  justify-self: start;
  margin-bottom: 2px;
}

.season-mvp-rules-card strong,
.season-mvp-race-card strong {
  color: #f8fbff;
  font-size: 17px;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.season-mvp-rules-card ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 20px;
  color: #d7e8f4;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.season-mvp-race-card > span,
.season-mvp-race-card p {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.season-mvp-race-card p {
  color: #fff1a8;
  text-transform: none;
}

.season-mvp-details-list {
  display: grid;
  gap: 9px;
}

.season-mvp-details-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) minmax(250px, 1.25fr);
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.season-mvp-details-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.season-mvp-details-pair-badge {
  width: 46px;
  height: 46px;
  font-size: 13px;
  border-color: rgba(247, 216, 74, 0.3);
}

.season-mvp-details-team-badge {
  width: 34px;
  height: 34px;
  margin-left: -12px;
  border-color: rgba(255, 255, 255, 0.22);
  font-size: 10px;
}

.season-mvp-details-season-badge {
  width: 52px;
  height: 52px;
}

.season-mvp-details-rank {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(247, 216, 74, 0.24);
  border-radius: 8px;
  color: #fff1a8;
  background: rgba(247, 216, 74, 0.08);
  font-size: 13px;
  font-weight: 1000;
}

.season-mvp-details-name {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.season-mvp-details-name strong {
  color: #f8fbff;
  font-size: 16px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.season-mvp-details-name small {
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.season-mvp-details-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.season-mvp-details-stat {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(2, 9, 18, 0.34);
}

.season-mvp-details-stat small {
  color: #9edbff;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1.1;
  text-transform: uppercase;
}

.season-mvp-details-stat strong {
  color: #f8fbff;
  font-size: 15px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.season-mvp-details-empty {
  display: grid;
  gap: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
}

.season-mvp-details-empty strong {
  color: #f8fbff;
  font-size: 18px;
}

.season-mvp-details-empty p,
.season-mvp-details-more {
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 1500px) {
  .season-full-dashboard-grid,
  .season-full-team-stage {
    grid-template-columns: minmax(260px, 1fr) clamp(58px, 6vw, 86px) minmax(260px, 1fr);
    gap: clamp(10px, 1.2vw, 16px);
  }

  .season-full-side {
    padding: clamp(14px, 1.6vw, 22px);
  }

  .season-full-team-badge {
    width: clamp(70px, 7vw, 104px);
    height: clamp(70px, 7vw, 104px);
  }

  .season-full-team-name {
    font-size: clamp(28px, 3vw, 46px);
  }

  .season-team-points-block strong {
    font-size: clamp(40px, 4.5vw, 66px);
  }

  .season-full-pair-badges {
    grid-template-columns: repeat(auto-fit, minmax(40px, 40px));
    gap: 9px 11px;
  }

  .season-full-pair-mini-badge {
    width: 40px;
    height: 40px;
  }

  .season-awards-preview-grid {
    gap: 8px;
  }

  .season-award-preview-item {
    min-height: 112px;
  }
}

@media (max-width: 1180px) {
  .season-full-dashboard-grid,
  .season-full-team-stage {
    grid-template-columns: minmax(230px, 1fr) 54px minmax(230px, 1fr);
  }

  .season-dashboard-versus {
    width: 54px;
    height: 54px;
    font-size: 24px;
  }

  .season-team-standings-summary {
    grid-template-columns: minmax(84px, 0.7fr) minmax(0, 1fr);
  }

  .season-history-fixture {
    grid-template-columns: minmax(0, 1fr) minmax(78px, auto) minmax(0, 1fr);
    gap: 8px;
  }

  .season-history-fixture-team {
    gap: 8px;
    padding-inline: 9px;
  }

  .season-history-main-badge {
    width: 42px;
    height: 42px;
  }

  .season-history-pair-badges {
    width: 88px;
    min-width: 88px;
  }

  .season-history-pair-badge,
  .season-history-pair-more {
    width: 27px;
    height: 27px;
  }
}

@media (max-width: 900px) {
  .season-full-dashboard-grid,
  .season-full-team-stage,
  .season-global-dashboard-grid,
  .season-future-strip,
  .season-full-placeholders > .season-full-placeholder,
  .season-standings-panel,
  .season-history-panel {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .season-awards-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-start-command,
  .season-match-settings-modal-header,
  .season-awards-modal-header,
  .season-ceremony-modal-header,
  .season-mvp-modal-header,
  .season-history-record-main,
  .season-standing-card-row,
  .season-record-management,
  .season-history-fixture {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-start-command-actions {
    justify-content: stretch;
  }

  .season-start-command-actions .tool {
    flex: 1 1 auto;
  }

  .season-full-side {
    min-height: 0;
  }

  .season-dashboard-versus {
    width: 100%;
    height: 48px;
  }

  .season-awards-modal-grid,
  .season-ceremony-spotlight-grid,
  .season-ceremony-award-grid,
  .season-ceremony-step.reveal,
  .season-ceremony-score-grid,
  .season-ceremony-bonus-summary-grid,
  .season-mvp-modal-grid,
  .season-mvp-details-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-ceremony-modal {
    width: min(100%, calc(100vw - 16px));
    height: min(100%, calc(100vh - 16px));
    max-height: calc(100vh - 16px);
    padding: 14px;
  }

  .season-ceremony-score-team,
  .season-ceremony-controls {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .season-ceremony-score-team-copy strong,
  .season-ceremony-bonus-copy span {
    white-space: normal;
  }

  .season-ceremony-bonus-card {
    grid-template-columns: auto minmax(0, 1fr);
    text-align: left;
  }

  .season-ceremony-bonus-card > strong {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .season-ceremony-controls {
    flex-direction: column;
  }

  .season-ceremony-control-buttons,
  .season-ceremony-control-buttons .tool {
    width: 100%;
  }

  .season-ceremony-score-points {
    justify-items: start;
  }

  .season-mvp-details-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-standing-points {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .season-snapshot-strip,
  .season-history-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .season-history-result {
    justify-self: start;
    white-space: normal;
  }

  .season-record-card-actions,
  .season-record-reset-button {
    justify-content: stretch;
    width: 100%;
  }
}

@media (max-width: 540px) {
  .season-snapshot-strip,
  .season-team-goals-block,
  .season-history-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.setup-hint {
  margin: -8px 0 18px;
  color: #d5e8f7;
  font-size: 17px;
  font-weight: 800;
}

.timer-setup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.game-settings {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr 170px 170px;
  gap: 12px;
  margin-bottom: 12px;
}

.cup-scoring-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.arena-style-settings,
.ball-style-settings,
.device-performance-settings,
.shot-animation-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.arena-season-lock-info {
  margin: 0 0 12px;
  border: 1px solid rgba(97, 238, 214, 0.32);
  border-radius: 8px;
  padding: 11px 13px;
  background:
    linear-gradient(135deg, rgba(97, 238, 214, 0.1), rgba(247, 216, 74, 0.08)),
    rgba(2, 9, 18, 0.58);
  color: #d9f6ff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.arena-season-lock-info[hidden] {
  display: none;
}

.arena-style-settings.is-season-locked {
  opacity: 0.72;
}

.arena-style-settings.is-season-locked .mode-option {
  cursor: not-allowed;
}

.arena-style-settings.is-season-locked .mode-option span {
  color: rgba(185, 215, 230, 0.66);
}

.shot-animation-settings {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ball-visual-settings {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ball-style-option {
  min-height: 118px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.ball-style-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ball-style-preview {
  width: 62px;
  aspect-ratio: 1;
  display: block;
  background: var(--ball-preview-image) center / contain no-repeat;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42));
}

.ball-style-preview-classic { --ball-preview-image: url("assets/kids/baelle/kids_ball_classic.png"); }
.ball-style-preview-gold { --ball-preview-image: url("assets/kids/baelle/kids_ball_gold.png"); }
.ball-style-preview-neon { --ball-preview-image: url("assets/kids/baelle/kids_ball_neon.png"); }
.ball-style-preview-globe { --ball-preview-image: url("assets/kids/baelle/kids_ball_globe.png"); }
.ball-style-preview-final-gold { --ball-preview-image: url("assets/kids/baelle/kids_ball_final_gold.png"); }
.ball-style-preview-unity { --ball-preview-image: url("assets/kids/baelle/kids_ball_unity.png"); }

.ball-style-option:has(input:checked) .ball-style-preview {
  transform: translateY(-2px) scale(1.08);
  filter:
    drop-shadow(0 0 14px rgba(247, 216, 74, 0.36))
    drop-shadow(0 12px 16px rgba(0, 0, 0, 0.46));
}

@media (max-width: 1180px) {
  .ball-visual-settings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ball-visual-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.roster-settings {
  display: grid;
  grid-template-columns: 1fr 1fr 210px;
  gap: 12px;
  margin-bottom: 12px;
}

.team-name-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px minmax(0, 1fr) 138px;
  gap: 12px;
  margin-bottom: 12px;
}

.quick-team-name-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin-top: 5px;
}

.quick-team-name-control.has-badge {
  grid-template-columns: 48px minmax(0, 1fr);
}

.quick-team-badge-preview {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.14), transparent 62%),
    rgba(5, 13, 24, 0.68);
  color: rgba(185, 215, 230, 0.78);
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  overflow: visible;
}

.quick-team-badge-preview[hidden] {
  display: none;
}

.quick-team-badge-preview.has-image {
  color: transparent;
}

.quick-team-badge-img {
  display: block;
  width: 118%;
  height: 118%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42));
}

.quick-team-name-setting select {
  font-size: 17px;
  min-height: 48px;
}

.quick-team-custom-name {
  margin-top: 8px;
}

.quick-team-custom-name[hidden] {
  display: none;
}

.setup-section-title {
  margin: 2px 0 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.timer-toggle,
.timer-minutes,
.timer-duration-setting,
.mode-option,
.number-setting,
.text-setting,
.color-setting {
  display: grid;
  align-items: center;
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.42);
  padding: 10px 14px;
}

.countdown-length-setting {
  gap: 8px;
}

.countdown-length-setting select {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(2, 9, 18, 0.72);
  color: #f8fbff;
  font-weight: 900;
}

.timer-toggle {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
}

.mode-option {
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 10px;
}

.timer-toggle input,
.mode-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
}

.timer-toggle span,
.timer-minutes span,
.timer-duration-setting > span,
.mode-option span,
.number-setting span,
.text-setting span,
.color-setting span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 950;
  text-transform: uppercase;
}

.shot-animation-settings .mode-option {
  min-height: 68px;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.shot-animation-settings .mode-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--mode-accent) 72%, rgba(255, 255, 255, 0.24));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mode-accent) 18%, rgba(255, 255, 255, 0.08)), transparent 54%),
    rgba(4, 18, 32, 0.72);
  box-shadow:
    inset 0 0 26px color-mix(in srgb, var(--mode-accent) 16%, transparent),
    0 0 24px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

.shot-animation-settings .mode-option:has(input:not(:checked)) {
  opacity: 0.62;
}

.shot-animation-settings .mode-option:has(input:checked) span {
  color: #f4fbff;
}

.shot-animation-settings .mode-option:has(input:disabled) {
  cursor: default;
}

.timer-minutes input,
.number-setting input,
.text-setting input,
.color-setting input,
.text-setting select {
  width: 100%;
  margin-top: 5px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: 950 22px/1 Inter, Aptos, "Segoe UI", Arial, sans-serif;
  padding: 7px 10px;
}

.timer-duration-setting {
  align-content: center;
  gap: 8px;
}

.timer-clock-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  margin-top: 5px;
}

.timer-clock-input label {
  display: grid;
  gap: 4px;
}

.timer-clock-input input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%),
    rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: 950 24px/1 Inter, Aptos, "Segoe UI", Arial, sans-serif;
  padding: 7px 10px;
  text-align: center;
}

.timer-clock-input b {
  padding-bottom: 23px;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
}

.timer-clock-input small {
  color: rgba(213, 232, 247, 0.64);
  font-size: 10px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.timer-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.timer-presets button {
  min-height: 28px;
  border: 1px solid rgba(247, 216, 74, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 52%),
    rgba(247, 216, 74, 0.08);
  color: #fff1a8;
  font-size: 12px;
  font-weight: 950;
}

.timer-presets button:hover,
.timer-presets button:focus-visible {
  border-color: rgba(247, 216, 74, 0.58);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 52%),
    rgba(247, 216, 74, 0.16);
}

.timer-presets button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.pressure-advanced {
  grid-column: 1 / -1;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 52%),
    rgba(2, 9, 18, 0.38);
  padding: 12px 14px;
}

.pressure-advanced summary {
  cursor: pointer;
  color: #d8edf8;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.pressure-advanced summary::marker {
  color: var(--gold);
}

.timer-helper {
  margin: 10px 0;
  color: rgba(213, 232, 247, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.pressure-custom-toggle {
  margin-top: 8px;
}

.pressure-custom-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.pressure-start-setting {
  min-height: 0;
}

.text-setting select {
  appearance: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%),
    linear-gradient(135deg, rgba(8, 28, 48, 0.98), rgba(2, 9, 18, 0.98));
  color: #f6fbff;
  cursor: pointer;
}

.text-setting select:hover,
.text-setting select:focus {
  border-color: rgba(247, 216, 74, 0.66);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.14), transparent 52%),
    linear-gradient(135deg, rgba(10, 34, 58, 0.98), rgba(2, 9, 18, 0.98));
  color: #ffffff;
}

.text-setting select option {
  background: #061421;
  color: #f6fbff;
}

.text-setting select option:checked {
  background: #f7d84a;
  color: #061421;
}

.color-setting input {
  height: 40px;
  padding: 4px;
}

.level-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.level-inputs.single-mode {
  grid-template-columns: minmax(0, 1fr);
}

.level-inputs.single-mode .level-input:nth-of-type(n + 2) {
  display: none;
}

.level-input {
  min-width: 0;
}

.level-input span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 950;
  text-transform: uppercase;
}

.vocab-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(76, 201, 240, 0.2);
  border-radius: 8px;
  background: rgba(76, 201, 240, 0.06);
  color: #b9d7e6;
  font-size: 13px;
}

.level-input textarea {
  width: 100%;
  min-height: 250px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 18px;
  background: rgba(2, 9, 18, 0.58);
  color: var(--text);
  font: 850 26px/1.35 Inter, Aptos, "Segoe UI", Arial, sans-serif;
  outline: none;
}

.level-input textarea:focus {
  border-color: rgba(247, 216, 74, 0.62);
  box-shadow: 0 0 0 3px rgba(247, 216, 74, 0.14);
}

.vocabulary-banks {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.bank-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.bank-hint {
  margin: 0;
  color: #b9d7e6;
  font-size: 13px;
}

.bank-file-actions {
  display: grid;
  gap: 8px;
  justify-items: end;
  max-width: 520px;
}

.bank-controls,
.bank-editor-top,
.bank-item-form {
  display: grid;
  gap: 12px;
  align-items: stretch;
}

.bank-controls {
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) 190px;
}

.bank-editor {
  display: grid;
  gap: 14px;
}

.bank-editor[hidden] {
  display: none;
}

.bank-editor-top {
  grid-template-columns: minmax(0, 1fr) 150px 150px;
}

.bank-item-form {
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 1fr) 150px 140px 100px;
}

.bank-item-form .tool[hidden] {
  display: none;
}

.bulk-paste-panel,
.smart-import-panel {
  display: grid;
  gap: 12px;
}

.bulk-paste-panel {
  grid-template-columns: 220px minmax(0, 1fr) 150px;
  align-items: end;
}

.bulk-paste-panel textarea {
  min-height: 118px;
  font-size: 18px;
}

.smart-import-panel {
  padding: 14px;
  border: 1px solid rgba(76, 201, 240, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 38%),
    rgba(1, 7, 14, 0.34);
}

.smart-import-header,
.smart-import-actions {
  display: grid;
  gap: 12px;
  align-items: end;
}

.smart-import-header {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.smart-import-level {
  border-color: color-mix(in srgb, var(--mode-accent) 44%, rgba(255, 255, 255, 0.14));
  box-shadow: 0 0 0 1px rgba(76, 201, 240, 0.12);
}

.smart-import-header .setup-section-title,
.smart-import-help {
  margin: 0;
}

.smart-import-intro {
  max-width: 720px;
  margin: 5px 0 0;
  color: #b9d7e6;
  font-size: 13px;
  line-height: 1.45;
}

.smart-import-help {
  color: #b9d7e6;
  font-size: 13px;
}

.smart-import-paste textarea {
  min-height: 170px;
  font-size: 18px;
  line-height: 1.35;
}

.smart-import-actions {
  grid-template-columns: minmax(150px, 0.7fr) minmax(180px, 0.9fr) minmax(250px, 1.25fr) minmax(90px, 0.5fr);
}

.smart-import-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 800;
}

.upload-tool {
  display: grid;
  place-items: center;
  text-align: center;
}

.tool:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.smart-import-preview {
  display: grid;
  gap: 10px;
}

.smart-import-preview[hidden],
.smart-import-problems[hidden] {
  display: none;
}

.smart-import-summary {
  margin: 0;
  color: #d5e8f7;
  font-size: 14px;
  font-weight: 900;
}

.smart-import-table-wrap {
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.smart-import-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(2, 9, 18, 0.5);
}

.smart-import-table th,
.smart-import-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #d5e8f7;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  vertical-align: top;
}

.smart-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #061421;
  color: color-mix(in srgb, var(--mode-accent) 42%, #fff 58%);
  font-weight: 950;
  text-transform: uppercase;
}

.smart-import-table td:first-child {
  color: var(--text);
  font-weight: 900;
}

.smart-import-row-level {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 7px;
  padding: 5px 7px;
  background: #071827;
  color: #eff9ff;
  font: inherit;
  font-weight: 800;
}

.manual-word-entry {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 9px;
  background: rgba(2, 9, 18, 0.28);
}

.manual-word-entry summary {
  padding: 11px 12px;
  color: #cdeef7;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.manual-word-entry .bank-item-form {
  margin: 0 10px 10px;
}

.import-row-problem td {
  color: #ffd2d2;
}

.smart-import-problems {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 99, 99, 0.24);
  border-radius: 8px;
  background: rgba(255, 99, 99, 0.08);
}

.smart-import-problems strong {
  color: #ffd2d2;
  font-size: 13px;
  text-transform: uppercase;
}

.smart-import-problems ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: #ffdede;
  font-size: 13px;
  font-weight: 800;
}

.bank-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bank-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #b9d7e6;
  font-weight: 800;
}

.bank-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(2, 9, 18, 0.46);
  cursor: grab;
}

.bank-item.is-dragging {
  opacity: 0.55;
}

.bank-item.is-inactive {
  opacity: 0.58;
}

.bank-item:active {
  cursor: grabbing;
}

.bank-item strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
}

.bank-item span {
  display: block;
  margin-top: 2px;
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 800;
}

.bank-item-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.bank-item-actions .tool {
  min-height: 0;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 10px;
}

.bank-active-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: #d5e8f7;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.bank-active-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--mode-accent);
}

.bank-active-toggle span {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.bank-level-group {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(1, 7, 14, 0.34);
}

.bank-level-group.is-drop-target,
.bank-level-list.is-drop-target {
  border-color: color-mix(in srgb, var(--mode-accent) 70%, #fff 30%);
  background: rgba(76, 201, 240, 0.12);
}

.bank-level-group h3 {
  margin: 0;
  color: color-mix(in srgb, var(--mode-accent) 48%, #fff 52%);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.bank-level-list {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 320px;
  min-height: 80px;
  overflow: auto;
  padding-right: 3px;
  border: 1px dashed transparent;
  border-radius: 8px;
}

.bank-level-empty {
  margin: 0;
  padding: 8px;
  color: #9fb8c8;
  font-size: 12px;
  font-weight: 800;
}

.bank-status {
  margin: 0;
  color: #b9d7e6;
  font-size: 13px;
}

.setup-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-top: 14px;
}

.penalty-card {
  width: min(760px, 82vw);
  padding: 34px;
  border-radius: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 58, 83, 0.46);
  background:
    linear-gradient(180deg, rgba(4, 12, 22, 0.18), rgba(2, 7, 14, 0.58)),
    radial-gradient(ellipse at 50% 50%, rgba(5, 15, 28, 0.3), rgba(0, 0, 0, 0.68) 78%),
    url("assets/kids/stadien/vocab_penalty_backdrop_1672x941.jpg") center 58% / cover no-repeat,
    linear-gradient(135deg, rgba(75, 8, 20, 0.96), rgba(5, 14, 26, 0.95));
  box-shadow:
    inset 0 0 68px rgba(255, 58, 83, 0.12),
    inset 0 -80px 130px rgba(0, 0, 0, 0.56),
    0 30px 100px rgba(255, 58, 83, 0.18),
    0 28px 80px rgba(0, 0, 0, 0.58);
  animation: penaltyCardIn 460ms cubic-bezier(0.16, 1, 0.3, 1);
}

.penalty-card::before,
.penalty-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.penalty-card::before {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 233, 166, 0.18), transparent 34%),
    radial-gradient(ellipse at 50% 92%, rgba(116, 255, 170, 0.08), transparent 28%),
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.09) 47%, transparent 57% 100%);
  animation: penaltySweep 1350ms ease infinite;
}

.penalty-card::after {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: inherit;
}

.penalty-card h2 {
  margin: 8px 0 8px;
  color: var(--gold);
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 950;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.58),
    0 0 30px rgba(247, 216, 74, 0.18);
}

.penalty-card p:not(.eyebrow) {
  margin: 0 0 24px;
  color: #dceefa;
  font-size: clamp(22px, 2.2vw, 36px);
  font-weight: 850;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.62);
}

.penalty-prompt-card {
  display: grid;
  gap: 8px;
  margin: 0 auto 24px;
  max-width: 560px;
  border: 1px solid rgba(76, 201, 240, 0.3);
  border-radius: 8px;
  padding: 14px 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 56%),
    rgba(2, 10, 20, 0.68);
  box-shadow: inset 0 0 30px rgba(76, 201, 240, 0.08);
}

.penalty-prompt-card span {
  color: #bfeeff;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
  text-transform: uppercase;
}

.penalty-prompt-card strong {
  color: #ffffff;
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 0 18px rgba(76, 201, 240, 0.28);
}

.penalty-prompt-card.answer-review {
  border-color: rgba(247, 216, 74, 0.46);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.13), transparent 58%),
    rgba(2, 10, 20, 0.7);
  box-shadow: inset 0 0 34px rgba(247, 216, 74, 0.1);
}

.penalty-prompt-card.answer-review span {
  color: #fff3a6;
}

.penalty-continue {
  width: min(260px, 100%);
  margin: 16px auto 0;
}

.penalty-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.penalty-actions .action[hidden] {
  display: none;
}

.penalty-actions .action:disabled,
.penalty-actions .action[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%),
    linear-gradient(135deg, rgba(93, 108, 124, 0.34), rgba(25, 34, 45, 0.62)),
    rgba(3, 13, 24, 0.58);
  color: rgba(218, 228, 236, 0.46);
  cursor: not-allowed;
  filter: grayscale(0.72) saturate(0.62);
  opacity: 0.68;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.penalty-actions .action:disabled strong,
.penalty-actions .action[aria-disabled="true"] strong,
.penalty-actions .action:disabled span,
.penalty-actions .action[aria-disabled="true"] span {
  color: rgba(218, 228, 236, 0.52);
  text-shadow: none;
}

.level-up {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.58);
  pointer-events: none;
}

.level-up[hidden] {
  display: none;
}

.result-screen {
  position: fixed;
  z-index: 28;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2dvh, 24px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 40%, rgba(76, 201, 240, 0.2), transparent 38%),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
  animation: resultOverlayFadeIn 260ms ease both;
}

.result-screen[hidden] {
  display: none;
}

.result-card {
  width: min(820px, 84vw);
  padding: 34px;
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(14, 39, 66, 0.96), rgba(4, 12, 22, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.14), transparent 55%);
  box-shadow: var(--shadow);
  text-align: center;
  animation: resultPanelEnter 360ms cubic-bezier(0.18, 0.9, 0.26, 1.08) both;
}

.result-card.final-result {
  width: min(980px, 88vw);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: rgba(247, 216, 74, 0.56);
  background:
    linear-gradient(135deg, rgba(20, 37, 58, 0.97), rgba(4, 12, 22, 0.97)),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.22), transparent 58%),
    radial-gradient(circle at 50% 38%, var(--mode-accent-soft), transparent 54%);
  animation: cupFinaleReveal 460ms cubic-bezier(0.16, 0.92, 0.24, 1.08) both;
}

@supports (height: 100dvh) {
  .result-card.final-result {
    max-height: calc(100dvh - 24px);
  }
}

.result-card h2 {
  margin: 8px 0 20px;
  color: #fff3a6;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  animation: modeTitleReveal 420ms ease 80ms both;
}

.result-card.mode-result h2,
.result-card.transition-result h2 {
  font-size: clamp(38px, 4.6vw, 72px);
}

.result-card.transition-result > .eyebrow {
  display: none;
}

.result-card.transition-result .result-lines {
  gap: 12px;
  max-width: 720px;
}

.result-card.final-result h2 {
  max-width: min(92%, 860px);
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(35px, 6vw, 86px);
  text-shadow:
    0 0 24px rgba(247, 216, 74, 0.36),
    0 0 56px color-mix(in srgb, var(--mode-accent) 26%, transparent);
  overflow-wrap: anywhere;
  word-break: normal;
  animation: championTitleEnter 560ms ease 100ms both;
}

.result-lines {
  display: grid;
  gap: 10px;
  margin: 0 auto 24px;
  max-width: 620px;
}

.result-card.final-result .result-lines {
  gap: 14px;
  max-width: 860px;
}

.result-message {
  margin-bottom: 4px;
  padding: 12px 16px;
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 8px;
  background: rgba(247, 216, 74, 0.08);
  color: #fff3a6;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 950;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow: 0 0 20px rgba(247, 216, 74, 0.24);
}

.result-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.result-metric {
  display: grid;
  gap: 5px;
  min-height: 78px;
  align-content: center;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.06);
  text-align: left;
}

.result-metric span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.result-metric strong {
  color: var(--text);
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.stage-result-grid .result-metric {
  min-height: 70px;
  padding: 10px 12px;
}

.stage-result-grid .result-metric strong {
  font-size: clamp(17px, 1.45vw, 25px);
}

.result-metric.winner-row {
  border-color: rgba(247, 216, 74, 0.34);
  background: rgba(247, 216, 74, 0.1);
}

.result-metric.winner-row strong {
  color: #fff3a6;
  animation: winnerGlow 2600ms ease-in-out infinite;
}

.result-metric.cup-point-row strong {
  color: #fff3a6;
  animation: cupPointPop 520ms ease both;
}

.result-metric.next-stage-row {
  border-color: rgba(76, 201, 240, 0.3);
  background: rgba(76, 201, 240, 0.09);
  animation: nextStageReveal 360ms ease 160ms both;
}

.single-round-winner-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 auto 4px;
  padding: 18px clamp(18px, 4vw, 34px);
  border: 1px solid color-mix(in srgb, var(--winner-team-color, #fff3a6) 54%, white 10%);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--winner-team-color, #fff3a6) 24%, transparent), transparent 62%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.11), rgba(255, 255, 255, 0.045));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 40px color-mix(in srgb, var(--winner-team-color, #fff3a6) 18%, transparent);
}

.single-round-winner-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 24px);
  max-width: 100%;
  min-width: 0;
}

.single-round-winner-emblem {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(86px, 9vw, 136px);
  height: clamp(86px, 9vw, 136px);
  overflow: visible;
}

.single-round-winner-emblem-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 24px color-mix(in srgb, var(--winner-team-color, #fff3a6) 26%, transparent));
}

.single-round-winner-hero strong {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--winner-team-color, #fff3a6);
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  font-size: clamp(40px, 5.1vw, 76px);
  font-weight: 1000;
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow:
    0 0 14px color-mix(in srgb, var(--winner-team-color, #fff3a6) 58%, transparent),
    0 0 34px color-mix(in srgb, var(--winner-team-color, #fff3a6) 28%, transparent),
    0 3px 0 rgba(0, 0, 0, 0.22);
}

.single-round-winner-hero strong.team-name-long {
  font-size: clamp(34px, 4.3vw, 64px);
}

.single-round-winner-hero strong.team-name-very-long {
  font-size: clamp(28px, 3.45vw, 52px);
}

.single-round-winner-hero strong.team-name-ultra-long {
  font-size: clamp(22px, 2.65vw, 42px);
}

.single-round-winner-hero > span {
  color: rgba(255, 243, 166, 0.9);
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 950;
  text-transform: uppercase;
}

.single-round-result-stats {
  max-width: 560px;
  margin: 0 auto;
}

.quick-game-warning {
  margin: 0 0 14px;
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffeaa0;
  background: rgba(247, 216, 74, 0.1);
  font-size: 13px;
  font-weight: 950;
}

.result-section-label {
  margin: 8px 0 0;
  color: rgba(217, 244, 255, 0.72);
  font-size: 13px;
  font-weight: 950;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0;
}

.champion-panel {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: calc(var(--trophy-win-size) * 0.74);
  padding: 20px clamp(24px, 20vw, 220px) 20px 20px;
  overflow: hidden;
  border: 1px solid rgba(247, 216, 74, 0.32);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(247, 216, 74, 0.2), transparent 52%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 44px rgba(247, 216, 74, 0.18);
  animation: championGlow 3200ms ease-in-out infinite;
}

.champion-panel::before {
  content: "";
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    conic-gradient(from 180deg, transparent, rgba(247, 216, 74, 0.14), transparent 28%);
  animation: cupFinaleReveal 900ms ease both;
}

.champion-panel:not(.draw)::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: clamp(12px, 4vw, 46px);
  top: 50%;
  width: var(--trophy-win-size);
  height: var(--trophy-win-size);
  pointer-events: none;
  background: url("assets/kids/pokale/kids_trophy_elite.png") center / contain no-repeat;
  transform: translateY(-50%) rotate(3deg);
  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 24px rgba(247, 216, 74, 0.42))
    drop-shadow(0 0 48px color-mix(in srgb, var(--mode-accent) 28%, transparent));
  opacity: 0.96;
  animation: trophyIdleFloat 5200ms ease-in-out infinite;
}

.champion-panel span,
.champion-panel strong {
  position: relative;
  z-index: 2;
}

.champion-panel span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.champion-panel strong {
  color: #fff3a6;
  font-size: clamp(34px, 4vw, 62px);
  font-weight: 950;
  line-height: 0.95;
  text-transform: uppercase;
}

.champion-panel.draw {
  min-height: unset;
  padding: 18px;
  border-color: rgba(217, 244, 255, 0.26);
  background:
    radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--team-a-color) 22%, transparent), transparent 46%),
    radial-gradient(circle at 65% 40%, color-mix(in srgb, var(--team-b-color) 22%, transparent), transparent 46%),
    rgba(255, 255, 255, 0.05);
  animation: none;
}

.full-cup-victory {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: -6px auto 6px;
  max-width: 100%;
  overflow: visible;
  text-align: center;
}

.full-cup-victory-copy {
  margin: 0;
  color: #fff3a6;
  font-size: clamp(21px, 2.4vw, 36px);
  font-weight: 950;
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow:
    0 0 18px rgba(247, 216, 74, 0.34),
    0 0 42px color-mix(in srgb, var(--mode-accent) 22%, transparent);
}

.full-cup-trophy {
  display: block;
  width: var(--trophy-full-cup-size);
  max-width: min(76vw, 100%);
  height: auto;
  margin: 0 auto 4px;
  object-fit: contain;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 26px rgba(247, 216, 74, 0.46))
    drop-shadow(0 0 58px rgba(76, 201, 240, 0.22));
  animation: trophyIdleFloat 5600ms ease-in-out infinite;
}

.mode-result-ceremony {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: -2px auto 2px;
  overflow: visible;
}

.mode-result-winner {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1vw, 16px);
  max-width: min(96%, 900px);
  margin: -2px auto 0;
  text-align: center;
}

.mode-result-winner-layout {
  display: grid;
  grid-template-columns: clamp(92px, 11vw, 150px) minmax(0, 1fr) clamp(92px, 11vw, 150px);
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  width: 100%;
}

.mode-result-winner-copy {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vw, 14px);
  min-width: 0;
}

.mode-result-winner-emblem {
  display: grid;
  place-items: center;
  width: clamp(92px, 11vw, 150px);
  height: clamp(92px, 11vw, 150px);
  overflow: visible;
}

.mode-result-winner-emblem.mirror {
  transform: scaleX(-1);
}

.mode-result-winner-emblem-img {
  display: block;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 26px color-mix(in srgb, var(--winner-team-color, #fff3a6) 42%, transparent));
}

.mode-result-winner strong {
  display: block;
  min-width: 0;
  color: var(--winner-team-color, #fff3a6);
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 950;
  line-height: 0.98;
  text-transform: uppercase;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--winner-team-color, #fff3a6) 62%, transparent),
    0 0 26px color-mix(in srgb, var(--winner-team-color, #fff3a6) 34%, transparent),
    0 3px 0 rgba(0, 0, 0, 0.22);
}

.mode-result-winner strong.team-name-long {
  font-size: clamp(27px, 3.35vw, 52px);
}

.mode-result-winner strong.team-name-very-long {
  font-size: clamp(23px, 2.7vw, 42px);
}

.mode-result-winner strong.team-name-ultra-long {
  font-size: clamp(20px, 2.15vw, 34px);
}

.mode-result-winner span {
  color: rgba(255, 243, 166, 0.9);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  margin-bottom: clamp(8px, 1vw, 14px);
  text-shadow: 0 0 20px rgba(247, 216, 74, 0.24);
}

.mode-result-trophy {
  display: block;
  width: var(--mode-result-trophy-size);
  max-width: min(60vw, 100%);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 20px rgba(247, 216, 74, 0.4))
    drop-shadow(0 0 40px color-mix(in srgb, var(--mode-accent) 22%, transparent));
  animation: trophyIdleFloat 5200ms ease-in-out infinite;
}

.mode-result-ceremony.mode-normal .mode-result-trophy {
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 20px rgba(76, 201, 240, 0.4))
    drop-shadow(0 0 38px rgba(73, 229, 143, 0.18));
}

.mode-result-ceremony.mode-challenge .mode-result-trophy {
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.46))
    drop-shadow(0 0 22px rgba(247, 216, 74, 0.52))
    drop-shadow(0 0 42px rgba(247, 164, 32, 0.22));
}

.mode-result-ceremony.mode-elite .mode-result-trophy {
  filter:
    drop-shadow(0 13px 18px rgba(0, 0, 0, 0.48))
    drop-shadow(0 0 22px rgba(255, 220, 120, 0.5))
    drop-shadow(0 0 46px rgba(255, 80, 120, 0.24));
}

.mode-result-progress {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 34px;
}

.mode-result-progress-trophy {
  width: 34px;
  height: 34px;
  background: var(--trophy-image) center / contain no-repeat;
  opacity: 0.24;
  filter:
    grayscale(0.7)
    saturate(0.55)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.36));
}

.mode-result-progress-trophy.won {
  opacity: 1;
  filter:
    brightness(1.08)
    saturate(1.08)
    drop-shadow(0 4px 7px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 12px rgba(247, 216, 74, 0.5));
}

.transition-result .result-section-label {
  margin-top: 0;
  color: rgba(255, 243, 166, 0.78);
  text-align: center;
}

.transition-score-board {
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.mode-winner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mode-winner-card {
  display: grid;
  gap: 8px;
  min-height: calc(var(--trophy-result-medal-size) + 86px);
  align-content: center;
  justify-items: center;
  padding: 16px 12px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.06);
  text-align: center;
  animation: modeCardReveal 360ms ease var(--reveal-delay, 120ms) both;
}

.mode-winner-card::before {
  content: "";
  width: var(--trophy-result-medal-size);
  height: var(--trophy-result-medal-size);
  background: var(--trophy-image) center / contain no-repeat;
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 22px rgba(247, 216, 74, 0.34))
    drop-shadow(0 0 38px color-mix(in srgb, var(--mode-accent) 18%, transparent));
}

.mode-winner-card.team-a {
  border-color: color-mix(in srgb, var(--team-a-color) 50%, rgba(255, 255, 255, 0.14));
}

.mode-winner-card.team-b {
  border-color: color-mix(in srgb, var(--team-b-color) 50%, rgba(255, 255, 255, 0.14));
}

.mode-winner-card span {
  color: var(--muted);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 950;
  text-transform: uppercase;
}

.mode-winner-card strong {
  color: var(--text);
  font-size: clamp(16px, 1.35vw, 24px);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.final-score-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  animation: finalScoreReveal 420ms ease 260ms both;
}

.final-score-team {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
}

.final-score-team.team-a {
  border-color: color-mix(in srgb, var(--team-a-color) 56%, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--team-a-color) 13%, rgba(255, 255, 255, 0.04));
}

.final-score-team.team-b {
  border-color: color-mix(in srgb, var(--team-b-color) 56%, rgba(255, 255, 255, 0.14));
  background: color-mix(in srgb, var(--team-b-color) 13%, rgba(255, 255, 255, 0.04));
}

.final-score-team.champion {
  box-shadow: 0 0 30px rgba(247, 216, 74, 0.18);
}

.final-score-team span {
  color: var(--muted);
  min-width: 0;
  font-size: clamp(12px, 1.15vw, 15px);
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.final-score-team strong {
  color: #fff3a6;
  font-size: clamp(32px, 3.4vw, 58px);
  font-weight: 950;
  line-height: 0.95;
}

.result-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 18px;
  font-weight: 900;
  text-align: left;
}

.result-line strong {
  color: var(--text);
  text-align: right;
}

.result-line.winner-row {
  border-color: rgba(247, 216, 74, 0.32);
  background: rgba(247, 216, 74, 0.1);
}

.result-line.winner-row strong {
  color: #fff3a6;
  animation: winnerGlow 2600ms ease-in-out infinite;
}

.result-line.cup-point-row strong {
  color: #fff3a6;
  animation: cupPointPop 520ms ease both;
}

.result-line.next-stage-row {
  border-color: rgba(76, 201, 240, 0.3);
  background: rgba(76, 201, 240, 0.09);
  animation: modeBadgeReveal 360ms ease 160ms both;
}

.result-line.draw-row strong {
  color: #d9f4ff;
}

.result-card .tool {
  animation: modeBadgeReveal 320ms ease 260ms both;
}

.rift {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 50%;
  width: 7px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, #fff3a6, #4cc9f0, #ff6363, transparent);
  box-shadow:
    0 0 36px rgba(247, 216, 74, 0.72),
    0 0 90px rgba(76, 201, 240, 0.36);
  animation: riftOpen 1900ms ease forwards;
}

.level-up-card {
  position: relative;
  z-index: 1;
  width: min(960px, 82vw);
  padding: 44px;
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(5, 16, 29, 0.94), rgba(18, 38, 62, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(247, 216, 74, 0.22), transparent 58%);
  box-shadow: var(--shadow);
  text-align: center;
  animation: levelPop 1900ms ease forwards;
}

.level-up-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 950;
  text-transform: uppercase;
}

.level-up-card h2 {
  margin: 0;
  color: #fff3a6;
  font-size: clamp(66px, 7.6vw, 122px);
  line-height: 0.92;
  text-transform: uppercase;
  text-shadow: 0 0 36px rgba(247, 216, 74, 0.42);
}

@keyframes ballSpin {
  0% { rotate: 0deg; scale: 1; }
  45% { scale: 1.15; }
  100% { rotate: 360deg; scale: 1; }
}

@keyframes panelLightSweep {
  0% { transform: translateX(-170%) skewX(-18deg); }
  100% { transform: translateX(360%) skewX(-18deg); }
}

@keyframes ballShot {
  0% { rotate: 0deg; scale: 1; }
  48% { scale: 1.28; }
  100% { rotate: 720deg; scale: 0.82; }
}

@keyframes ballShotArc {
  0% { rotate: 0deg; scale: 1; translate: -50% -50%; }
  36% { scale: 1.22; translate: -50% -66%; }
  100% { rotate: 720deg; scale: 0.84; translate: -50% -50%; }
}

@keyframes ballShotLow {
  0% { rotate: 0deg; scale: 1; translate: -50% -50%; }
  44% { scale: 1.16; translate: -50% -38%; }
  100% { rotate: 640deg; scale: 0.86; translate: -50% -50%; }
}

@keyframes ballShotPower {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  28% { scale: 1.42; filter: brightness(1.38); }
  68% { rotate: 880deg; scale: 0.78; filter: brightness(1.18); }
  100% { rotate: 1040deg; scale: 0.86; filter: brightness(1); }
}

@keyframes ballShotQuick {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  42% { scale: 1.18; filter: brightness(1.25); }
  100% { rotate: 540deg; scale: 0.86; filter: brightness(1); }
}

@keyframes penaltyBallShot {
  0% {
    rotate: 0deg;
    scale: 1;
    filter: brightness(1);
  }
  18% {
    scale: 0.78;
    filter: brightness(1.28);
  }
  46% {
    scale: 1.48;
    filter: brightness(1.18);
  }
  72% {
    rotate: 820deg;
    scale: 0.88;
    filter: brightness(1.08);
  }
  100% {
    rotate: 1080deg;
    scale: 1;
    filter: brightness(1);
  }
}

@keyframes netShake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-8px); }
  36% { transform: translateX(8px); }
  54% { transform: translateX(-5px); }
  72% { transform: translateX(5px); }
}

@keyframes flash {
  0% { opacity: 0; }
  16% { opacity: 1; }
  44% { opacity: 0.48; }
  100% { opacity: 0; }
}

@keyframes goalPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.022; }
}

@keyframes attackBannerSnap {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  30% { opacity: 1; transform: translateY(0) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes countdownPop {
  0% { opacity: 0; transform: translateY(10px) scale(0.78); }
  42% { opacity: 1; transform: translateY(0) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes countdownPulse {
  0% { opacity: 0; transform: translateY(0) scale(0.82); }
  38% { opacity: 1; transform: translateY(0) scale(1.18); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes countdownSnap {
  0% { opacity: 0; transform: translateY(-8px) scale(1.2); filter: blur(3px); }
  36% { opacity: 1; transform: translateY(0) scale(0.94); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes startIntroFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes startIntroFadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes startIntroSpotlight {
  0% { opacity: 0.42; transform: translateX(-18%) rotate(-9deg); }
  100% { opacity: 0.74; transform: translateX(18%) rotate(-5deg); }
}

@keyframes startIntroCount {
  0% { opacity: 0; transform: translateY(12px) scale(0.82); filter: blur(4px); }
  42% { opacity: 1; transform: translateY(0) scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes wordRevealSweep {
  0% { opacity: 0; transform: translateZ(36px) translateY(14px) scale(0.98); }
  100% { opacity: 1; transform: translateZ(36px) translateY(0) scale(1); }
}

@keyframes wordRevealLift {
  0% { opacity: 0; transform: translateZ(36px) translateY(22px) scale(0.96); }
  62% { opacity: 1; transform: translateZ(36px) translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateZ(36px) translateY(0) scale(1); }
}

@keyframes wordRevealFlash {
  0% { opacity: 0; filter: brightness(1.8); transform: translateZ(36px) scale(0.98); }
  38% { opacity: 1; filter: brightness(1.28); transform: translateZ(36px) scale(1.02); }
  100% { opacity: 1; filter: brightness(1); transform: translateZ(36px) scale(1); }
}

@keyframes answerRevealMoment {
  0% { opacity: 0.88; filter: brightness(1.28) saturate(1.08); transform: translateZ(36px) scale(0.97); }
  42% { opacity: 1; filter: brightness(1.18) saturate(1.06); transform: translateZ(36px) scale(1.025); }
  100% { opacity: 1; filter: brightness(1) saturate(1); transform: translateZ(36px) scale(1); }
}

@keyframes answerRevealSheen {
  0% {
    opacity: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 34%),
      linear-gradient(104deg, transparent 0%, rgba(255, 244, 184, 0) 34%, rgba(255, 244, 184, 0.2) 48%, transparent 62%);
    background-position: center, -70% 0;
  }
  34% {
    opacity: 0.86;
  }
  100% {
    opacity: 0.7;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 34%),
      linear-gradient(104deg, transparent 0%, rgba(255, 244, 184, 0) 34%, rgba(255, 244, 184, 0.14) 48%, transparent 62%);
    background-position: center, 170% 0;
  }
}

@keyframes answerLabelPop {
  0% { opacity: 0; transform: translateY(-5px) scale(0.94); }
  38% { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes answerTextPop {
  0% { opacity: 0; transform: translateY(8px) scale(0.96); filter: blur(3px) brightness(1.25); }
  36% { opacity: 1; transform: translateY(-1px) scale(1.035); filter: blur(0) brightness(1.18); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}

@keyframes sidePanelPulse {
  0%, 100% {
    transform: translateZ(18px);
    box-shadow: var(--shadow-raised);
  }
  36% {
    transform: translateZ(28px) scale(1.01);
    box-shadow:
      0 30px 78px rgba(0, 0, 0, 0.46),
      0 0 32px color-mix(in srgb, var(--mode-accent) 22%, transparent),
      0 0 28px rgba(247, 216, 74, 0.12);
  }
}

@keyframes scorePop {
  0% { transform: scale(1); filter: brightness(1); }
  38% { transform: scale(1.18); filter: brightness(1.32); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes goalBadgeEnter {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.86);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -10px) scale(1);
  }
}

@keyframes trophyUnlock {
  0% {
    opacity: 0.34;
    transform: scale(0.62) rotate(-8deg);
  }
  34% {
    opacity: 1;
    transform: scale(1.2) rotate(4deg);
  }
  62% {
    transform: scale(0.96) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes trophyIdleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 5px 7px rgba(0, 0, 0, 0.42))
      drop-shadow(0 0 12px rgba(247, 216, 74, 0.42))
      drop-shadow(0 0 24px color-mix(in srgb, var(--mode-accent) 18%, transparent));
  }
  50% {
    transform: translateY(-3px) scale(1.035);
    filter:
      drop-shadow(0 8px 10px rgba(0, 0, 0, 0.38))
      drop-shadow(0 0 18px rgba(247, 216, 74, 0.56))
      drop-shadow(0 0 34px color-mix(in srgb, var(--mode-accent) 24%, transparent));
  }
}

@keyframes trophyShine {
  0%, 100% {
    box-shadow: none;
    filter: brightness(1);
  }
  42% {
    box-shadow:
      0 0 14px rgba(247, 216, 74, 0.52),
      inset 0 0 8px rgba(255, 255, 255, 0.28);
    filter: brightness(1.24);
  }
}

@keyframes achievementGlow {
  0%, 100% {
    box-shadow: var(--shadow-raised);
  }
  36%, 64% {
    box-shadow:
      0 30px 84px rgba(0, 0, 0, 0.5),
      0 0 34px rgba(247, 216, 74, 0.18),
      0 0 34px color-mix(in srgb, var(--mode-accent) 24%, transparent);
  }
}

@keyframes penaltyBanner {
  0%, 100% { scale: 1; }
  50% { scale: 1.018; }
}

@keyframes penaltyFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  46% { opacity: 0.42; }
  100% { opacity: 0; }
}

@keyframes penaltyFieldPulse {
  0%, 100% { box-shadow: 0 28px 110px rgba(255, 58, 83, 0.16), 0 28px 86px rgba(0, 0, 0, 0.5); }
  50% { box-shadow: 0 28px 132px rgba(255, 58, 83, 0.28), 0 28px 98px rgba(0, 0, 0, 0.56); }
}

@keyframes penaltyCardIn {
  0% { opacity: 0; transform: scale(0.86) translateY(18px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes penaltySweep {
  0% { transform: translateX(-95%); opacity: 0; }
  20% { opacity: 1; }
  60%, 100% { transform: translateX(95%); opacity: 0; }
}

@keyframes riftOpen {
  0% { width: 5px; opacity: 0; }
  18% { opacity: 1; }
  58% { width: 34vw; opacity: 1; }
  100% { width: 130vw; opacity: 0; }
}

@keyframes levelPop {
  0% { opacity: 0; transform: scale(0.82); }
  18% { opacity: 1; transform: scale(1); }
  76% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes resultOverlayFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes resultPanelEnter {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modeTitleReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes winnerGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(247, 216, 74, 0.2);
  }
  50% {
    text-shadow:
      0 0 14px rgba(247, 216, 74, 0.4),
      0 0 24px rgba(76, 201, 240, 0.16);
  }
}

@keyframes nextStageReveal {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cupPointPop {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }
  60% {
    opacity: 1;
    transform: scale(1.12);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cupFinaleReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes championTitleEnter {
  0% {
    opacity: 0;
    transform: scale(0.9);
    filter: blur(4px);
  }
  58% {
    opacity: 1;
    transform: scale(1.035);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes championGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 0 26px rgba(247, 216, 74, 0.1);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 40px rgba(247, 216, 74, 0.18),
      0 0 30px color-mix(in srgb, var(--mode-accent) 16%, transparent);
  }
}

@keyframes modeCardReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes finalScoreReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes modeBadgeReveal {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 760px) {
  :root {
    --trophy-empty-size: 44px;
    --trophy-earned-size: 52px;
    --trophy-medal-row-size: 38px;
    --trophy-result-medal-size: 86px;
    --trophy-win-size: 132px;
    --trophy-full-cup-size: clamp(180px, 36vh, 270px);
    --mode-result-trophy-size: clamp(120px, 26vh, 180px);
    --shot-ball-size: clamp(72px, 6.4vw, 112px);
  }

  .result-card.final-result {
    padding: clamp(18px, 3dvh, 26px);
  }

  .result-card.final-result h2 {
    font-size: clamp(30px, 5.4dvh, 58px);
    margin-bottom: clamp(10px, 2dvh, 16px);
  }

  .result-card.final-result .result-lines {
    gap: clamp(8px, 1.5dvh, 12px);
    margin-bottom: clamp(12px, 2dvh, 18px);
  }

  .app {
    grid-template-rows: 124px 1fr 124px;
    gap: 10px;
    padding: 12px;
  }

  .team-card {
    min-height: 104px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .trophy-row {
    top: 5px;
    gap: 12px 14px;
  }

  .score-row {
    margin-top: 26px;
  }

  .action {
    min-height: 84px;
  }
}

/* Final art-direction polish: visual layers only. */
.field-bg {
  z-index: 0;
}

.field::before,
.field::after {
  z-index: 1;
}

.field-grade,
.shot-trail,
.ball-shadow {
  position: absolute;
  pointer-events: none;
}

.field-grade {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255, 255, 255, 0.1), transparent 22%),
    radial-gradient(ellipse at 50% 4%, rgba(116, 214, 255, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(5, 18, 32, 0.08), transparent 42%, rgba(2, 8, 14, 0.22)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.24));
  mix-blend-mode: screen;
}

body.level-challenge .field-grade {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 211, 100, 0.22), transparent 38%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 165, 65, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 148, 38, 0.08), transparent 44%, rgba(47, 19, 0, 0.22)),
    linear-gradient(90deg, rgba(44, 17, 0, 0.2), transparent 20%, transparent 80%, rgba(44, 17, 0, 0.2));
}

body.level-elite .field-grade {
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 67, 92, 0.26), transparent 40%),
    radial-gradient(ellipse at 50% 58%, rgba(255, 36, 70, 0.18), transparent 31%),
    linear-gradient(180deg, rgba(118, 0, 22, 0.12), transparent 42%, rgba(17, 0, 7, 0.32)),
    linear-gradient(90deg, rgba(95, 0, 20, 0.3), transparent 22%, transparent 78%, rgba(95, 0, 20, 0.3));
}

.shot-trail {
  left: 50%;
  top: 58%;
  z-index: 5;
  width: 48%;
  height: 7%;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0.36) skewX(-12deg);
  transform-origin: 50% 50%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), rgba(247, 216, 74, 0.52), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(76, 201, 240, 0.28), transparent 72%);
  filter: blur(2px);
  mix-blend-mode: screen;
}

.field.shot-variant-straight .shot-trail {
  animation: shotTrailStraight 740ms ease both;
}

.field.shot-variant-arc .shot-trail {
  top: 48%;
  width: 42%;
  rotate: -8deg;
  animation: shotTrailArc 820ms ease both;
}

.field.shot-variant-low .shot-trail {
  top: 66%;
  height: 4%;
  width: 52%;
  background: linear-gradient(90deg, transparent, rgba(225, 255, 255, 0.14), rgba(247, 216, 74, 0.42), transparent);
  animation: shotTrailLow 660ms ease both;
}

.field.shot-variant-power .shot-trail {
  width: 58%;
  height: 9%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), rgba(255, 225, 95, 0.78), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(247, 216, 74, 0.42), transparent 74%);
  filter: blur(3px);
  animation: shotTrailPower 920ms ease both;
}

.field.shot-variant-quick .shot-trail {
  width: 34%;
  height: 5%;
  rotate: 7deg;
  animation: shotTrailQuick 520ms ease both;
}

.field.penalty-variant-warning .shot-trail,
.field.penalty-variant-charge .shot-trail,
.field.penalty-variant-power .shot-trail {
  background:
    linear-gradient(90deg, transparent, rgba(255, 236, 120, 0.2), rgba(255, 55, 82, 0.78), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(255, 58, 83, 0.45), transparent 72%);
  filter: blur(3px) saturate(1.25);
}

.field.penalty-variant-charge .shot-trail {
  animation: penaltyTrailCharge 920ms ease both;
}

.field.penalty-variant-power .shot-trail {
  animation: penaltyTrailPower 1040ms ease both;
}

.field.shot-variant-straight::before,
.field.shot-variant-arc::before,
.field.shot-variant-low::before,
.field.shot-variant-power::before,
.field.shot-variant-quick::before {
  opacity: 0.72;
}

.field.penalty-variant-warning::before,
.field.penalty-variant-charge::before,
.field.penalty-variant-power::before {
  opacity: 0.86;
}

.zone-dot {
  width: 6%;
  aspect-ratio: 2.25 / 1;
  border: 1px solid rgba(210, 242, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(76, 201, 240, 0.14), transparent 68%);
  backdrop-filter: none;
  box-shadow:
    inset 0 0 8px rgba(255, 255, 255, 0.08),
    0 0 18px rgba(76, 201, 240, 0.08);
  opacity: 0.38;
}

.zone-dot.active {
  width: 6.8%;
  border-color: rgba(247, 216, 74, 0.72);
  background:
    linear-gradient(90deg, transparent, rgba(255, 252, 200, 0.26), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(247, 216, 74, 0.32), transparent 72%);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.12),
    0 0 34px rgba(247, 216, 74, 0.36);
  opacity: 0.84;
}

.field.shot-variant-straight .zone-dot.active,
.field.shot-variant-arc .zone-dot.active,
.field.shot-variant-low .zone-dot.active,
.field.shot-variant-power .zone-dot.active,
.field.shot-variant-quick .zone-dot.active,
.field.goal-build .zone-dot.active,
.field.goal-impact .zone-dot.active,
.field.goal-flash .zone-dot.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

body.level-challenge .zone-dot,
body.level-elite .zone-dot {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--mode-accent) 20%, transparent), transparent 72%);
}

.ball-shadow {
  z-index: 5;
  width: clamp(42px, 4.4vw, 78px);
  height: clamp(12px, 1.2vw, 22px);
  translate: -50% 76%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.18) 46%, transparent 74%);
  filter: blur(5px);
  opacity: 0.84;
  transition:
    left 520ms cubic-bezier(0.22, 0.85, 0.22, 1),
    top 520ms cubic-bezier(0.22, 0.85, 0.22, 1),
    scale 260ms ease,
    opacity 260ms ease,
    filter 260ms ease;
}

.ball-shadow.ball-style-gold {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(97, 63, 0, 0.5), rgba(20, 10, 0, 0.22) 48%, transparent 76%);
}

.ball-shadow.ball-style-neon {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(49, 209, 255, 0.36), rgba(0, 0, 0, 0.24) 46%, transparent 76%);
  filter: blur(6px);
}

.ball-shadow.ball-style-globe {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(36, 112, 194, 0.38), rgba(0, 0, 0, 0.24) 48%, transparent 76%);
  filter: blur(6px) saturate(1.12);
}

.ball-shadow.ball-style-final-gold {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(239, 174, 43, 0.48), rgba(0, 0, 0, 0.24) 48%, transparent 76%);
  filter: blur(6px) saturate(1.16);
}

.ball-shadow.ball-style-unity {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(55, 143, 232, 0.26), rgba(226, 65, 91, 0.18) 36%, rgba(0, 0, 0, 0.24) 54%, transparent 78%);
  filter: blur(6px) saturate(1.2);
}

.ball-shadow.pass {
  animation: ballShadowPass 520ms ease;
}

.ball-shadow.shot,
.ball-shadow.penalty-shot {
  animation: ballShadowShot 820ms ease;
}

.ball-shadow.shot-variant-low {
  animation-name: ballShadowLow;
}

.ball-shadow.shot-variant-power {
  animation-name: ballShadowPower;
}

.ball-shadow.shot-variant-quick {
  animation-duration: 560ms;
}

.ball-shadow.penalty-shot,
.ball-shadow.penalty-variant-charge,
.ball-shadow.penalty-variant-power {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 58, 83, 0.48), rgba(0, 0, 0, 0.24) 52%, transparent 78%);
  filter: blur(7px) saturate(1.25);
}

.field .ball {
  overflow: hidden;
  border: 2px solid rgba(5, 9, 15, 0.94);
  background:
    radial-gradient(circle at 30% 23%, rgba(255, 255, 255, 0.96), transparent 15%),
    radial-gradient(circle at 50% 48%, #131923 0 14%, transparent 15%),
    conic-gradient(from 18deg, transparent 0 12%, #111722 12% 16%, transparent 16% 32%, #111722 32% 36%, transparent 36% 52%, #111722 52% 56%, transparent 56% 72%, #111722 72% 76%, transparent 76% 92%, #111722 92% 96%, transparent 96% 100%),
    radial-gradient(circle at 34% 26%, #ffffff 0 20%, #f7fafc 42%, #dfe7ef 76%, #aebcca 100%);
  box-shadow:
    inset -12px -15px 20px rgba(0, 0, 0, 0.24),
    inset 8px 8px 18px rgba(255, 255, 255, 0.62),
    0 10px 14px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(255, 255, 255, 0.1);
}

.field .ball::before,
.field .ball::after {
  inset: 16%;
  border: 2px solid rgba(17, 23, 34, 0.9);
  background:
    linear-gradient(135deg, transparent 42%, rgba(17, 23, 34, 0.18) 43% 56%, transparent 57%),
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(17, 23, 34, 0.16) 58% 64%, transparent 65%);
  opacity: 0.86;
}

.field .ball span {
  inset: 31%;
  background: #111722;
  box-shadow:
    0 -18px 0 -10px #111722,
    17px 8px 0 -11px #111722,
    -17px 8px 0 -11px #111722,
    0 0 0 2px rgba(255, 255, 255, 0.06);
}

.field .ball.ball-style-classic {
  border-color: #071019;
}

.field .ball.ball-style-gold {
  border-color: #6a4604;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 230, 0.96), transparent 16%),
    radial-gradient(circle at 50% 48%, #5f3c05 0 14%, transparent 15%),
    conic-gradient(from 18deg, transparent 0 12%, #704708 12% 16%, transparent 16% 32%, #704708 32% 36%, transparent 36% 52%, #704708 52% 56%, transparent 56% 72%, #704708 72% 76%, transparent 76% 92%, #704708 92% 96%, transparent 96% 100%),
    radial-gradient(circle at 34% 25%, #fff8c9 0 18%, #ffd965 38%, #c98a13 72%, #603804 100%);
  box-shadow:
    inset -12px -16px 20px rgba(72, 38, 0, 0.42),
    inset 9px 8px 18px rgba(255, 245, 182, 0.58),
    0 12px 16px rgba(0, 0, 0, 0.36),
    0 0 34px rgba(247, 216, 74, 0.44),
    0 0 72px rgba(247, 216, 74, 0.16);
}

.field .ball.ball-style-gold::before,
.field .ball.ball-style-gold::after {
  border-color: rgba(91, 57, 0, 0.82);
}

.field .ball.ball-style-gold span {
  background: #5f3c05;
  box-shadow:
    0 -18px 0 -10px #5f3c05,
    17px 8px 0 -11px #5f3c05,
    -17px 8px 0 -11px #5f3c05,
    0 0 16px rgba(255, 242, 165, 0.18);
}

.field .ball.ball-style-neon {
  border-color: #061621;
  background:
    radial-gradient(circle at 29% 22%, rgba(218, 255, 255, 0.96), transparent 15%),
    radial-gradient(circle at 50% 48%, #03121b 0 14%, transparent 15%),
    conic-gradient(from 18deg, transparent 0 12%, #35d3ff 12% 16%, transparent 16% 32%, #35d3ff 32% 36%, transparent 36% 52%, #35d3ff 52% 56%, transparent 56% 72%, #35d3ff 72% 76%, transparent 76% 92%, #35d3ff 92% 96%, transparent 96% 100%),
    radial-gradient(circle at 34% 25%, #dfffff 0 18%, #55e5ff 36%, #0f90d3 70%, #041c2a 100%);
  box-shadow:
    inset -12px -16px 20px rgba(0, 20, 32, 0.52),
    inset 8px 8px 17px rgba(220, 255, 255, 0.54),
    0 12px 16px rgba(0, 0, 0, 0.36),
    0 0 36px rgba(76, 201, 240, 0.66),
    0 0 82px rgba(76, 201, 240, 0.28);
}

.field .ball.ball-style-neon::before,
.field .ball.ball-style-neon::after {
  border-color: rgba(76, 201, 240, 0.92);
}

.field .ball.ball-style-neon span {
  background: #04131c;
  box-shadow:
    0 -18px 0 -10px #35d3ff,
    17px 8px 0 -11px #35d3ff,
    -17px 8px 0 -11px #35d3ff,
    0 0 18px rgba(76, 201, 240, 0.6);
}

.field .ball.penalty-shot {
  filter: saturate(1.2) brightness(1.1) drop-shadow(0 0 18px rgba(255, 58, 83, 0.42));
}

.field .ball {
  --ball-image: url("assets/kids/baelle/kids_ball_classic.png");
  width: var(--shot-ball-size);
  height: var(--shot-ball-size);
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  object-fit: contain;
  background: var(--ball-image) center / contain no-repeat !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  transform-origin: center;
}

.field .ball::before,
.field .ball::after,
.field .ball span {
  content: none !important;
  display: none !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.field .ball.ball-style-classic {
  --ball-image: url("assets/kids/baelle/kids_ball_classic.png");
}

.field .ball.ball-style-gold {
  --ball-image: url("assets/kids/baelle/kids_ball_gold.png");
}

.field .ball.ball-style-neon {
  --ball-image: url("assets/kids/baelle/kids_ball_neon.png");
}

.field .ball.ball-style-globe {
  --ball-image: url("assets/kids/baelle/kids_ball_globe.png");
}

.field .ball.ball-style-final-gold {
  --ball-image: url("assets/kids/baelle/kids_ball_final_gold.png");
}

.field .ball.ball-style-unity {
  --ball-image: url("assets/kids/baelle/kids_ball_unity.png");
}

.field .ball.penalty-shot {
  filter: none !important;
}

.flash {
  z-index: 6;
}

.flash.show {
  animation: flash 960ms ease;
}

.flash.penalty-flash.show {
  animation: penaltyFlash 1050ms ease;
}

.result-card > .eyebrow {
  display: inline-grid;
  place-items: center;
  padding: 7px 13px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.14), rgba(255, 255, 255, 0.05), rgba(247, 216, 74, 0.14));
  color: #fff4b4;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 22px rgba(247, 216, 74, 0.16);
}

.result-card.final-result > .eyebrow {
  padding: clamp(9px, 0.7vw, 11px) clamp(18px, 1.7vw, 24px);
  font-size: clamp(16px, 1.35vw, 22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 26px rgba(247, 216, 74, 0.22);
}

.result-card.final-result h2 {
  text-shadow:
    0 0 26px rgba(247, 216, 74, 0.48),
    0 0 70px color-mix(in srgb, var(--mode-accent) 34%, transparent),
    0 5px 0 rgba(0, 0, 0, 0.22);
}

.result-card.final-result h2.final-full-cup-winner-name {
  color: var(--winner-team-color, #fff3a6);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--winner-team-color, #fff3a6) 70%, transparent),
    0 0 24px color-mix(in srgb, var(--winner-team-color, #fff3a6) 45%, transparent),
    0 2px 0 rgba(0, 0, 0, 0.35);
}

.final-draw-subtitle {
  margin: clamp(-6px, -0.4vw, -2px) auto clamp(8px, 1vw, 14px);
  color: rgba(255, 243, 166, 0.92);
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(247, 216, 74, 0.32),
    0 2px 0 rgba(0, 0, 0, 0.24);
}

.champion-panel {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 235, 0.14), transparent 36%),
    radial-gradient(circle at 50% 58%, rgba(247, 216, 74, 0.22), transparent 56%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.12), rgba(255, 255, 255, 0.04));
}

.champion-panel.draw {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 0 38px color-mix(in srgb, var(--team-a-color) 15%, transparent),
    0 0 38px color-mix(in srgb, var(--team-b-color) 15%, transparent);
}

/* Phase 1/2 polish: composition, hierarchy, and projector readability only. */
.app {
  grid-template-rows: minmax(132px, 16vh) minmax(0, 1fr) minmax(122px, 15vh);
  gap: 12px;
  padding: 16px 20px 18px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 49%, color-mix(in srgb, var(--mode-accent) 18%, transparent), transparent 37%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.42), transparent 58%);
  opacity: 0.84;
}

body.round-pressure-active .app::before,
body.round-pressure-active .app::after,
body.round-final-attack .app::before,
body.round-final-attack .app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

body.round-pressure-active .app::before {
  background:
    radial-gradient(ellipse at 50% 9%, rgba(255, 142, 48, 0.16), transparent 38%),
    radial-gradient(ellipse at 50% 84%, rgba(255, 75, 34, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(255, 119, 38, 0.08), transparent 28%, transparent 68%, rgba(255, 87, 38, 0.11));
  mix-blend-mode: screen;
  opacity: 0.66;
  animation: pressureStadiumSurge 1900ms ease-in-out infinite;
}

body.round-pressure-active .app::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(255, 83, 34, 0.18) 82%, rgba(255, 132, 42, 0.32) 100%),
    linear-gradient(90deg, rgba(255, 102, 38, 0.12), transparent 16%, transparent 84%, rgba(255, 102, 38, 0.12));
  opacity: 0.84;
  animation: pressureEdgePulse 1800ms ease-in-out infinite;
}

body.round-final-attack .app::before {
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 62, 78, 0.2), transparent 40%),
    radial-gradient(ellipse at 50% 78%, rgba(112, 0, 23, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(255, 52, 70, 0.1), rgba(0, 0, 0, 0.08));
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: finalAttackSurge 1500ms ease-in-out infinite;
}

body.round-final-attack .app::after {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(80, 0, 14, 0.14), transparent 48%),
    radial-gradient(ellipse at 50% 50%, transparent 44%, rgba(255, 42, 62, 0.22) 74%, rgba(22, 0, 8, 0.58) 100%),
    linear-gradient(180deg, rgba(255, 52, 70, 0.12), rgba(0, 0, 0, 0.06));
  opacity: 0.9;
  animation: finalAttackVignette 1500ms ease-in-out infinite;
}

.phase-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.phase-overlay[hidden] {
  display: none;
}

.phase-overlay-card {
  width: min(680px, 72vw);
  padding: 26px 34px 30px;
  border: 2px solid rgba(255, 62, 78, 0.78);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(circle at 50% 0%, rgba(255, 77, 92, 0.42), transparent 70%),
    linear-gradient(135deg, rgba(82, 3, 20, 0.94), rgba(5, 8, 17, 0.92));
  box-shadow:
    inset 0 0 58px rgba(255, 58, 83, 0.24),
    0 26px 82px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(255, 58, 83, 0.34);
  text-align: center;
  text-transform: uppercase;
  animation: finalAttackCardIn 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.phase-overlay-card p {
  margin: 0 0 8px;
  color: #ffd1d1;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.phase-overlay-card h2 {
  margin: 0;
  color: #fff3b4;
  font-size: clamp(52px, 7vw, 106px);
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 0 24px rgba(255, 58, 83, 0.92),
    0 0 72px rgba(247, 216, 74, 0.34),
    0 5px 0 rgba(0, 0, 0, 0.26);
}

.phase-overlay-card span {
  display: block;
  margin-top: 14px;
  color: #fff7f0;
  font-size: clamp(18px, 2.1vw, 32px);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: none;
}

.scoreboard {
  gap: 12px;
}

.team-card,
.duel-card,
.controls,
.penalty-card,
.setup-card,
.result-card,
.level-up-card {
  border-color: color-mix(in srgb, var(--mode-accent) 22%, rgba(255, 255, 255, 0.13));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03) 32%, transparent 70%),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mode-accent) 20%, transparent), transparent 60%),
    linear-gradient(135deg, rgba(9, 28, 48, 0.95), rgba(3, 10, 19, 0.96));
  box-shadow:
    0 26px 82px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 34px color-mix(in srgb, var(--mode-accent) 10%, transparent);
}

.team-card {
  padding: 18px 16px 12px;
  overflow: visible;
}

.team-label {
  color: rgba(232, 246, 255, 0.86);
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: 0.015em;
  text-shadow: 0 0 16px color-mix(in srgb, currentColor 22%, transparent);
}

.team-card.team-b .team-label {
  justify-self: end;
  text-align: right;
}

.score-row {
  margin-top: 32px;
}

.score-row strong {
  color: #ffffff;
  background: transparent;
  box-shadow: none;
  font-size: clamp(42px, 4.8vw, 82px);
  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--mode-accent) 32%, transparent),
    0 0 44px rgba(247, 216, 74, 0.08);
}

.score-adjust {
  opacity: 0.72;
}

.score-adjust:hover,
.score-adjust:focus-visible {
  opacity: 1;
}

.duel-card {
  padding: 11px 20px 13px;
  border-color: color-mix(in srgb, var(--mode-accent) 48%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 32%),
    radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--mode-accent) 26%, transparent), transparent 68%),
    linear-gradient(135deg, rgba(8, 28, 49, 0.98), rgba(3, 10, 18, 0.96));
  box-shadow:
    0 30px 92px rgba(0, 0, 0, 0.52),
    0 0 42px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

.duel-meta {
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
}

.duel-meta .eyebrow {
  grid-column: 1 / -1;
  grid-row: 2;
  color: rgba(217, 244, 255, 0.72);
  font-size: 12px;
  letter-spacing: 0.08em;
  order: 3;
}

.level-badge,
.cup-badge,
.match-clock {
  min-height: 28px;
  border-radius: 999px;
}

.match-clock {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    rgba(0, 0, 0, 0.24);
  color: rgba(227, 248, 255, 0.94);
  box-shadow: inset 0 0 16px rgba(76, 201, 240, 0.08);
}

.round-timer {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 8px;
  min-width: 190px;
  padding: 6px 12px 7px;
  border: 1px solid rgba(76, 201, 240, 0.24);
  text-align: left;
}

.round-timer-label {
  color: rgba(213, 241, 255, 0.78);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.round-timer strong {
  color: #f8fdff;
  font-size: clamp(20px, 1.75vw, 32px);
  line-height: 1;
  letter-spacing: 0;
  text-shadow:
    0 0 16px rgba(76, 201, 240, 0.42),
    0 3px 0 rgba(0, 0, 0, 0.22);
}

.round-timer-status {
  grid-column: 1 / -1;
  margin-top: 3px;
  color: rgba(185, 219, 234, 0.86);
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 950;
  text-transform: uppercase;
  white-space: nowrap;
}

.round-timer.is-pressure {
  border-color: rgba(255, 137, 54, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 196, 82, 0.13), transparent 58%),
    radial-gradient(circle at 50% 0%, rgba(255, 84, 38, 0.28), transparent 70%),
    rgba(42, 12, 6, 0.68);
  box-shadow:
    inset 0 0 24px rgba(255, 121, 39, 0.18),
    0 0 24px rgba(255, 95, 39, 0.24);
  animation: pressureTimerPulse 1800ms ease-in-out infinite;
}

.round-timer.is-pressure .round-timer-status,
.round-timer.is-pressure strong {
  color: #ffe0b6;
  text-shadow:
    0 0 18px rgba(255, 114, 37, 0.8),
    0 0 40px rgba(247, 216, 74, 0.24);
}

.round-timer.is-final {
  border-color: rgba(255, 66, 78, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 84, 84, 0.36), transparent 72%),
    linear-gradient(135deg, rgba(84, 4, 18, 0.9), rgba(8, 8, 16, 0.86));
  box-shadow:
    inset 0 0 30px rgba(255, 58, 83, 0.26),
    0 0 34px rgba(255, 58, 83, 0.36);
  animation: finalTimerPulse 1400ms ease-in-out infinite;
}

.round-timer.is-final .round-timer-status,
.round-timer.is-final strong {
  color: #ffe7e7;
  text-shadow:
    0 0 20px rgba(255, 58, 83, 0.92),
    0 0 54px rgba(255, 58, 83, 0.46);
}

.round-timer.is-disabled {
  opacity: 0.66;
}

.duel-line {
  margin-top: 8px;
  gap: 14px;
  font-size: clamp(32px, 2.8vw, 52px);
}

.duel-line span {
  min-height: 52px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 54%),
    color-mix(in srgb, currentColor 16%, rgba(0, 0, 0, 0.22));
  box-shadow: inset 0 0 20px color-mix(in srgb, currentColor 8%, transparent);
}

.duel-line b {
  min-width: 82px;
  height: 48px;
  border-radius: 999px;
}

.active-duel-row {
  gap: 12px;
}

.active-side,
.active-participant {
  border-width: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 54%),
    color-mix(in srgb, currentColor 16%, rgba(0, 0, 0, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 22px color-mix(in srgb, currentColor 16%, transparent);
}

.active-side strong,
.active-participant strong {
  font-size: clamp(18px, 1.45vw, 25px);
  line-height: 1.05;
}

.scoreboard,
.team-card,
.duel-card,
.duel-topline,
.duel-meta,
.duel-line,
.active-duel-row,
.active-side,
.active-participant,
.score-row,
.action-panel {
  min-width: 0;
}

.team-label,
.duel-line span,
.active-side span,
.active-side strong,
.active-participant strong,
.participant-side-label,
.action-title {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-label {
  display: block;
  width: 100%;
  font-size: clamp(13px, 1vw, 18px);
  line-height: 1.05;
}

.team-card.team-b .team-label {
  max-width: 100%;
}

.score-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
}

.duel-line {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(8px, 1.3vw, 14px);
  font-size: clamp(22px, 2.2vw, 42px);
}

.duel-line span {
  display: block;
  padding-inline: clamp(8px, 1.2vw, 14px);
}

.duel-line b {
  flex: 0 0 auto;
  min-width: clamp(64px, 6vw, 82px);
  padding-inline: 12px;
}

.active-duel-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.active-side,
.active-participant {
  min-width: 0;
}

.action-title {
  width: 100%;
}

.stage {
  border-radius: 14px;
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.stage::before {
  inset: 2% 4% -2%;
  z-index: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 68%, rgba(0, 0, 0, 0.38), transparent 62%),
    radial-gradient(ellipse at 50% 24%, color-mix(in srgb, var(--mode-accent) 16%, transparent), transparent 50%);
  filter: blur(10px);
}

.stage::after {
  inset: 0;
  z-index: 1;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.2));
}

.field {
  z-index: 2;
  border-color: color-mix(in srgb, var(--mode-accent) 24%, rgba(255, 255, 255, 0.16));
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 64%, rgba(16, 86, 44, 0.56), transparent 54%),
    #061421;
  box-shadow:
    0 38px 115px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 54px color-mix(in srgb, var(--mode-accent) 22%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 84px rgba(0, 0, 0, 0.26);
}

.field-bg {
  background-position: center;
  scale: 1.012;
}

body.level-challenge .field-bg,
body.level-elite .field-bg {
  scale: 1.018;
}

.field::before {
  background:
    radial-gradient(ellipse at 50% 11%, color-mix(in srgb, var(--mode-accent) 28%, transparent), transparent 38%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.11), transparent 32%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.3));
  opacity: 0.74;
  mix-blend-mode: screen;
}

.field.shot-variant-straight::before,
.field.shot-variant-arc::before,
.field.shot-variant-low::before,
.field.shot-variant-power::before,
.field.shot-variant-quick::before {
  opacity: 0.84;
}

.field.penalty-variant-warning::before,
.field.penalty-variant-charge::before,
.field.penalty-variant-power::before {
  opacity: 0.94;
}

.field::after {
  z-index: 4;
  background:
    radial-gradient(ellipse at 18% 57%, rgba(255, 255, 255, 0.1), transparent 20%),
    radial-gradient(ellipse at 82% 57%, rgba(255, 255, 255, 0.1), transparent 20%),
    radial-gradient(ellipse at 50% 54%, transparent 0 39%, rgba(0, 0, 0, 0.16) 72%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), transparent 34%, transparent 72%, rgba(0, 0, 0, 0.38));
  mix-blend-mode: multiply;
}

.field-grade {
  background:
    radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 40%),
    radial-gradient(ellipse at 50% 61%, rgba(255, 255, 255, 0.13), transparent 27%),
    radial-gradient(ellipse at 13% 54%, rgba(255, 255, 255, 0.08), transparent 16%),
    radial-gradient(ellipse at 87% 54%, rgba(255, 255, 255, 0.08), transparent 16%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%, rgba(0, 0, 0, 0.22)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.24));
  opacity: 0.98;
  mix-blend-mode: screen;
}

.goal-mouth {
  border-width: 3px;
  opacity: 0.82;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.08), transparent 65%),
    linear-gradient(90deg, color-mix(in srgb, var(--mode-accent) 12%, transparent), transparent);
  box-shadow:
    inset 0 0 26px rgba(255, 255, 255, 0.12),
    0 0 34px rgba(255, 255, 255, 0.12),
    0 0 42px color-mix(in srgb, var(--mode-accent) 16%, transparent);
}

.goal-mouth.hit {
  box-shadow: none;
}

.event-banner {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--mode-accent) 34%, rgba(247, 216, 74, 0.24));
  background:
    linear-gradient(135deg, rgba(4, 14, 25, 0.92), rgba(9, 30, 50, 0.84)),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mode-accent) 24%, transparent), transparent 62%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 42px color-mix(in srgb, var(--mode-accent) 10%, transparent),
    0 22px 58px rgba(0, 0, 0, 0.5),
    0 0 42px color-mix(in srgb, var(--mode-accent) 20%, transparent);
  backdrop-filter: blur(8px);
  transform: translateY(-16px) scale(0.98);
}

.event-banner.show {
  transform: translateY(0) scale(1);
}

.event-banner.word-tone,
.event-banner.event-word,
.field:has(.word-display:not([hidden])) .event-banner.word-tone.show {
  top: 3.2%;
  width: min(460px, 48%);
  min-height: 42px;
  max-height: 58px;
  padding: 9px 18px;
  border-width: 1px;
  border-color: rgba(76, 201, 240, 0.3);
  color: #dff7ff;
  font-size: clamp(17px, 1.65vw, 29px);
  line-height: 1.05;
  background:
    linear-gradient(135deg, rgba(10, 30, 48, 0.86), rgba(4, 12, 22, 0.8)),
    radial-gradient(circle at 50% 0%, rgba(76, 201, 240, 0.16), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 28px rgba(0, 0, 0, 0.32),
    0 0 26px color-mix(in srgb, var(--mode-accent) 14%, transparent);
}

.event-banner.word-tone.show,
.event-banner.event-word.show {
  transform: translateY(0) scale(1);
  animation: wordBannerSettle 420ms ease both;
}

.event-banner.goal {
  border-color: rgba(247, 216, 74, 0.72);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 244, 164, 0.28), transparent 60%),
    linear-gradient(135deg, rgba(78, 54, 8, 0.94), rgba(7, 18, 30, 0.88));
  box-shadow:
    inset 0 0 54px rgba(247, 216, 74, 0.22),
    0 0 58px rgba(247, 216, 74, 0.34),
    0 24px 62px rgba(0, 0, 0, 0.52);
}

.event-banner.event-countdown {
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, currentColor 18%, transparent), transparent 58%),
    rgba(3, 10, 18, 0.74);
}

.event-banner.ready-tone {
  border-color: color-mix(in srgb, var(--mode-accent) 44%, rgba(255, 255, 255, 0.22));
}

.start-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 52px);
  background:
    linear-gradient(180deg, rgba(1, 7, 14, 0.34), rgba(1, 7, 14, 0.78)),
    radial-gradient(ellipse at 50% 18%, rgba(247, 216, 74, 0.18), transparent 34%),
    radial-gradient(ellipse at 18% 56%, color-mix(in srgb, var(--team-a-color) 24%, transparent), transparent 36%),
    radial-gradient(ellipse at 82% 56%, color-mix(in srgb, var(--team-b-color) 24%, transparent), transparent 36%),
    url("assets/kids/stadien/vocab_intro_1536x1024.jpg") center / cover no-repeat;
  background-color: #020a12;
  opacity: 0;
  animation: startIntroFade 220ms ease forwards;
  overflow: hidden;
  pointer-events: all;
}

.start-intro-overlay::before,
.start-intro-overlay::after {
  content: "";
  position: absolute;
  inset: -22%;
  pointer-events: none;
}

.start-intro-overlay::before {
  background:
    linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.16) 48%, transparent 64%),
    linear-gradient(76deg, transparent 34%, rgba(76, 201, 240, 0.12) 50%, transparent 66%);
  opacity: 0.72;
  transform: translateX(-14%) rotate(-8deg);
  animation: startIntroSpotlight 2400ms ease-in-out infinite alternate;
}

.start-intro-overlay::after {
  background:
    radial-gradient(ellipse at 50% 82%, rgba(247, 216, 74, 0.18), transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 0 40%, rgba(0, 0, 0, 0.34) 78%, rgba(0, 0, 0, 0.68) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 86px);
  opacity: 0.48;
  mask-image: linear-gradient(180deg, transparent 0%, black 22%, black 88%, transparent 100%);
}

.start-intro-overlay.is-leaving {
  animation: startIntroFadeOut 240ms ease forwards;
}

.start-intro-panel {
  position: relative;
  z-index: 1;
  width: min(1040px, 94vw);
  min-height: min(620px, 86vh);
  display: grid;
  grid-template-rows: auto auto 1fr;
  place-items: center;
  gap: clamp(22px, 4vh, 42px);
  padding: clamp(26px, 5vw, 64px);
  border: 2px solid color-mix(in srgb, var(--mode-accent) 44%, rgba(247, 216, 74, 0.34));
  border-radius: 24px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--team-a-color) 16%, transparent), transparent 34%, transparent 66%, color-mix(in srgb, var(--team-b-color) 16%, transparent)),
    radial-gradient(ellipse at 50% 0%, rgba(247, 216, 74, 0.24), transparent 58%),
    linear-gradient(135deg, rgba(4, 14, 25, 0.78), rgba(9, 30, 50, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 72px color-mix(in srgb, var(--mode-accent) 16%, transparent),
    0 34px 90px rgba(0, 0, 0, 0.68),
    0 0 72px color-mix(in srgb, var(--mode-accent) 26%, transparent);
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
}

.start-intro-panel::before {
  content: none;
}

.start-intro-panel::after {
  content: "";
  position: absolute;
  inset: auto 8% 12% 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 216, 74, 0.48), transparent);
  box-shadow: 0 0 28px rgba(247, 216, 74, 0.34);
  pointer-events: none;
}

.start-intro-label {
  position: relative;
  z-index: 1;
  color: var(--gold);
  font-size: clamp(24px, 3.2vw, 48px);
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 0 20px rgba(247, 216, 74, 0.52),
    0 0 46px color-mix(in srgb, var(--mode-accent) 28%, transparent);
}

.start-intro-matchup {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2.6vw, 34px);
  width: 100%;
  color: var(--text);
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 950;
}

.start-intro-matchup b {
  display: grid;
  place-items: center;
  width: clamp(66px, 8vw, 108px);
  aspect-ratio: 1;
  border: 2px solid rgba(247, 216, 74, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(247, 216, 74, 0.24), transparent 62%),
    rgba(3, 10, 18, 0.78);
  color: var(--gold);
  font-size: clamp(26px, 3vw, 46px);
  box-shadow:
    inset 0 0 26px rgba(247, 216, 74, 0.14),
    0 0 34px rgba(247, 216, 74, 0.24);
  text-shadow: 0 0 18px rgba(247, 216, 74, 0.7);
}

.start-intro-team {
  min-width: 0;
  min-height: clamp(96px, 14vh, 148px);
  display: grid;
  place-items: center;
  gap: clamp(8px, 1.4vh, 14px);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, currentColor 52%, rgba(255, 255, 255, 0.18));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, currentColor 18%, rgba(4, 14, 25, 0.9)), rgba(4, 14, 25, 0.72)),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, currentColor 22%, transparent), transparent 66%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 38px color-mix(in srgb, currentColor 12%, transparent),
    0 18px 46px rgba(0, 0, 0, 0.42),
    0 0 34px color-mix(in srgb, currentColor 18%, transparent);
  overflow-wrap: anywhere;
  text-shadow: 0 0 22px currentColor;
}

.start-intro-emblem {
  display: grid;
  place-items: center;
  width: clamp(96px, 12vw, 168px);
  height: clamp(96px, 12vw, 168px);
  overflow: visible;
}

.start-intro-emblem-img {
  display: block;
  width: 110%;
  height: 110%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 14px 20px rgba(0, 0, 0, 0.52))
    drop-shadow(0 0 30px currentColor);
}

.start-intro-team strong {
  max-width: 100%;
  color: currentColor;
  font-size: clamp(22px, 2.4vw, 38px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.start-intro-team.team-a {
  color: var(--team-a-color);
}

.start-intro-team.team-b {
  color: var(--team-b-color);
}

.start-intro-count {
  position: relative;
  z-index: 1;
  min-height: clamp(150px, 25vh, 220px);
  display: grid;
  place-items: center;
  color: #fff3a6;
  font-size: clamp(104px, 15vw, 220px);
  font-weight: 950;
  line-height: 0.9;
  text-shadow:
    0 0 28px rgba(247, 216, 74, 0.86),
    0 0 82px color-mix(in srgb, var(--mode-accent) 42%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.56);
}

.start-intro-count.is-stepping {
  animation: startIntroCount 600ms ease both;
}

.start-intro-count.is-kickoff {
  color: #ffffff;
  font-size: clamp(58px, 9vw, 126px);
  text-shadow:
    0 0 22px rgba(255, 255, 255, 0.76),
    0 0 58px rgba(247, 216, 74, 0.72),
    0 0 96px color-mix(in srgb, var(--mode-accent) 48%, transparent);
}

.event-banner.penalty-tone {
  border-color: rgba(255, 70, 92, 0.82);
  box-shadow:
    inset 0 0 54px rgba(255, 58, 83, 0.24),
    0 0 62px rgba(255, 58, 83, 0.32),
    0 24px 64px rgba(0, 0, 0, 0.56);
}

.word-display {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--mode-accent) 38%, rgba(247, 216, 74, 0.34));
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mode-accent) 20%, transparent), transparent 62%),
    linear-gradient(135deg, rgba(3, 13, 24, 0.95), rgba(9, 38, 54, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 58px color-mix(in srgb, var(--mode-accent) 12%, transparent),
    0 24px 64px rgba(0, 0, 0, 0.5),
    0 0 40px color-mix(in srgb, var(--mode-accent) 18%, transparent);
}

.word-display strong {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.35),
    0 0 22px rgba(255, 255, 255, 0.2),
    0 0 44px color-mix(in srgb, var(--mode-accent) 34%, transparent);
}

.controls {
  padding: 10px;
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 34%),
    rgba(2, 9, 18, 0.64);
  box-shadow:
    0 20px 58px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.action-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 44%),
    rgba(4, 17, 31, 0.68);
}

.action-title {
  color: rgba(232, 246, 255, 0.84);
  font-size: clamp(15px, 1.05vw, 20px);
}

.action {
  min-height: 90px;
  border-color: rgba(255, 255, 255, 0.18);
}

.action.good,
.action.bad,
.action.neutral {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 16px 30px rgba(0, 0, 0, 0.3);
}

.action.good {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(45, 190, 108, 0.96), rgba(13, 84, 57, 0.98));
}

.action.bad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 46%),
    linear-gradient(135deg, rgba(222, 65, 76, 0.9), rgba(92, 24, 37, 0.96));
}

.middle-panel {
  gap: 8px;
  align-content: stretch;
}

.tool {
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.055);
  color: rgba(237, 248, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.2);
}

.tool.primary {
  color: #061421;
  background:
    linear-gradient(180deg, #fff5b4, var(--gold) 56%, #c29013);
}

.tool.danger {
  border-color: rgba(255, 99, 99, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent),
    rgba(91, 24, 35, 0.32);
  color: #ffcccc;
}

.team-card::after,
.duel-card::after,
.controls::after {
  width: 24%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.055), transparent);
}

.team-card:hover::after,
.duel-card:hover::after {
  opacity: 0.16;
}

.controls:hover::after {
  opacity: 0.08;
}

.score-adjust:hover,
.mini:hover,
.tool:hover,
.action:hover {
  filter: brightness(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.22),
    0 0 10px color-mix(in srgb, var(--mode-accent) 6%, transparent);
}

.score-adjust:focus-visible,
.mini:focus-visible,
.tool:focus-visible,
.action:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--mode-accent) 54%, white 12%);
  outline-offset: 3px;
}

.setup {
  align-items: start;
  overflow: auto;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.28), rgba(1, 5, 10, 0.54)),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 42%),
    var(--setup-arena-preview-background) center / cover no-repeat,
    linear-gradient(180deg, rgba(2, 8, 16, 0.94), rgba(1, 5, 10, 0.98));
}

.setup-card {
  width: min(1220px, 94vw);
  margin: auto;
  padding: 28px;
  border-color: rgba(152, 217, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 22%),
    radial-gradient(ellipse at 18% 0%, rgba(115, 232, 255, 0.17), transparent 42%),
    radial-gradient(ellipse at 82% 4%, rgba(255, 216, 110, 0.13), transparent 38%),
    linear-gradient(135deg, rgba(8, 28, 48, 0.72), rgba(3, 10, 20, 0.66));
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(112, 198, 255, 0.08),
    0 32px 100px rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(5px) saturate(1.18);
}

.setup-card h1 {
  margin: 4px 0 16px;
  max-width: none;
  font-size: clamp(40px, 3.7vw, 68px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0 34px rgba(88, 211, 255, 0.18),
    0 5px 22px rgba(0, 0, 0, 0.52);
}

.season-title-shine {
  color: #ffe77a;
  background:
    linear-gradient(
      92deg,
      #d8f8ff 0%,
      #8ee7ff 18%,
      #9ef0a6 38%,
      #ffe56f 58%,
      #ffb365 76%,
      #f3d2ff 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 24px rgba(142, 231, 255, 0.17),
    0 0 42px rgba(158, 240, 166, 0.12),
    0 0 52px rgba(255, 179, 101, 0.12),
    0 5px 22px rgba(0, 0, 0, 0.52);
}

@media (max-width: 760px) {
  .season-vocabulary-card {
    grid-template-columns: 1fr;
  }

  .season-vocabulary-actions {
    justify-content: stretch;
  }

  .season-vocabulary-actions .tool {
    flex: 1 1 180px;
  }
  .setup-card h1 {
    white-space: normal;
    font-size: clamp(34px, 10vw, 48px);
  }
}

.season-edition-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
}

.season-edition-badge span {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 7px 11px;
  border: 1px solid rgba(152, 217, 255, 0.26);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent),
    rgba(6, 20, 34, 0.68);
  color: #dff6ff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 26px rgba(0, 0, 0, 0.2);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.season-edition-badge span:first-child {
  border-color: rgba(255, 216, 110, 0.44);
  color: #fff0ad;
  background:
    linear-gradient(180deg, rgba(255, 216, 110, 0.15), transparent),
    rgba(13, 22, 32, 0.74);
}

.setup-hint {
  margin: 0 0 18px;
}

.setup-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 14px;
}

.setup-dashboard-actions {
  display: grid;
  margin: 0 0 20px;
}

.setup-dashboard-actions[hidden] {
  display: none;
}

.setup-dashboard-actions .tool {
  min-height: 62px;
  border-color: rgba(255, 234, 128, 0.72);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 38%),
    linear-gradient(135deg, #fff07a, #f7c42c 45%, #c99217);
  color: #071322;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(247, 216, 74, 0.28);
}

.setup-dashboard-actions .tool:hover,
.setup-dashboard-actions .tool:focus-visible {
  border-color: rgba(255, 248, 186, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 38%),
    linear-gradient(135deg, #fff6a6, #ffd942 45%, #dca51f);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 22px 48px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(247, 216, 74, 0.38);
}

.season-mode-toggle-panel {
  border-color: rgba(97, 238, 214, 0.28);
  background:
    linear-gradient(180deg, rgba(97, 238, 214, 0.13), transparent 42%),
    rgba(2, 9, 18, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 38px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(97, 238, 214, 0.06);
}

.season-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin-top: auto;
  padding: 7px 10px;
  border: 1px solid rgba(97, 238, 214, 0.25);
  border-radius: 999px;
  background: rgba(97, 238, 214, 0.08);
  color: #f8fbff;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.season-mode-switch input {
  width: 18px;
  height: 18px;
  accent-color: #61eed6;
}

.season-mode-switch em {
  color: #b5fff3;
  font-style: normal;
  line-height: 1;
}

body.season-mode-off .setup-dashboard-card-season,
.setup-layer.season-mode-disabled {
  opacity: 0.45;
  filter: grayscale(0.45);
}

body.season-mode-off .setup-dashboard-card-season {
  cursor: not-allowed;
}

.setup-layer.season-mode-disabled {
  border-style: dashed;
}

.setup-dashboard-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 168px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), transparent 42%),
    rgba(2, 9, 18, 0.46);
  color: var(--text);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 40px rgba(0, 0, 0, 0.22);
}

.setup-dashboard-card-start {
  border-color: rgba(82, 255, 168, 0.26);
  background:
    linear-gradient(180deg, rgba(82, 255, 168, 0.12), transparent 42%),
    rgba(2, 9, 18, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(82, 255, 168, 0.06);
}

.setup-dashboard-card-words {
  border-color: rgba(76, 201, 240, 0.26);
  background:
    linear-gradient(180deg, rgba(76, 201, 240, 0.11), transparent 42%),
    rgba(2, 9, 18, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 16px 38px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(76, 201, 240, 0.055);
}

.setup-dashboard-card-advanced {
  border-color: rgba(247, 216, 74, 0.22);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.09), transparent 42%),
    rgba(2, 9, 18, 0.46);
}

.setup-dashboard-card-season {
  border-color: rgba(97, 238, 214, 0.2);
  background:
    linear-gradient(180deg, rgba(97, 238, 214, 0.08), transparent 42%),
    rgba(2, 9, 18, 0.47);
}

.setup-dashboard-card-words > span {
  border-color: rgba(76, 201, 240, 0.48);
  color: #aeefff;
}

.setup-dashboard-card-advanced > span {
  border-color: rgba(247, 216, 74, 0.42);
  color: #fff1a8;
}

.setup-dashboard-card-season > span,
.season-mode-toggle-panel > span {
  border-color: rgba(97, 238, 214, 0.38);
  color: #b5fff3;
}

.setup-dashboard-card:hover,
.setup-dashboard-card:focus-visible {
  border-color: color-mix(in srgb, var(--mode-accent) 46%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), transparent 42%),
    color-mix(in srgb, var(--mode-accent) 12%, rgba(2, 9, 18, 0.56));
}

.setup-dashboard-card > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 50%;
  color: #fff1a8;
  font-size: 14px;
  font-weight: 950;
}

.setup-dashboard-card > strong {
  font-size: clamp(21px, 1.8vw, 30px);
  line-height: 1;
  text-transform: uppercase;
}

.setup-dashboard-card > small {
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.setup-dashboard-card > b {
  align-self: end;
  width: fit-content;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 999px;
  color: #fff1a8;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
}

.setup-layer {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 28%),
    rgba(2, 9, 18, 0.24);
}

.setup-layer.is-collapsed > :not(.setup-layer-header) {
  display: none;
}

.setup-layer-header {
  position: relative;
  display: grid;
  gap: 4px;
  margin-bottom: 2px;
  padding-right: 44px;
  cursor: pointer;
}

.setup-layer-header::after {
  content: "Öffnen";
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid rgba(82, 255, 168, 0.22);
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.07);
  color: #9effcd;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
}

.setup-layer-header[aria-expanded="true"]::after {
  content: "Schließen";
  border-color: rgba(255, 99, 99, 0.42);
  background: rgba(91, 24, 35, 0.38);
  color: #ffd2d2;
}

.setup-layer-header:focus-visible {
  outline: 2px solid rgba(247, 216, 74, 0.72);
  outline-offset: 4px;
}

.setup-layer-header h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 2.8vw, 46px);
  line-height: 0.98;
  text-transform: uppercase;
}

.setup-layer-header .setup-hint {
  margin: 0;
  max-width: 880px;
}

.setup-layer-quickstart {
  border-color: color-mix(in srgb, var(--team-a-color) 18%, rgba(255, 255, 255, 0.12));
  box-shadow:
    inset 4px 0 0 rgba(82, 255, 168, 0.34),
    0 16px 36px rgba(0, 0, 0, 0.18);
}

.setup-layer-wordbank {
  border-color: rgba(76, 201, 240, 0.22);
}

.setup-layer-advanced {
  border-color: rgba(247, 216, 74, 0.18);
}

.setup-row-primary {
  margin-top: 4px;
}

.setup-row-primary .start-game-button {
  min-height: clamp(64px, 6vw, 84px);
  padding: 16px 30px;
  border-width: 2px;
  border-color: rgba(247, 216, 74, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(135deg, #f7d84a, #f09b2f 58%, #ff6b4a);
  color: #061421;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 1000;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 32px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(247, 216, 74, 0.24);
}

.setup-row-primary .start-game-button::before {
  content: ">";
  margin-right: 10px;
  font-size: 0.82em;
}

.setup-row-primary .start-game-button:hover,
.setup-row-primary .start-game-button:focus-visible {
  border-color: rgba(255, 244, 190, 0.92);
  filter: brightness(1.06) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 18px 38px rgba(0, 0, 0, 0.38),
    0 0 42px rgba(247, 216, 74, 0.34);
}

.setup-row-primary .start-game-button:active {
  transform: translateY(1px) scale(0.995);
}

.field-label-with-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.setup-help {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 52%),
    rgba(247, 216, 74, 0.1);
  color: #fff1a8;
  cursor: help;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-transform: none;
  z-index: 5;
}

.mode-option .setup-help,
.timer-toggle .setup-help,
.text-setting .setup-help {
  color: #fff1a8;
  font-size: 13px;
  text-transform: none;
}

.setup-help::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 1200;
  width: min(280px, 72vw);
  padding: 10px 12px;
  border: 1px solid rgba(247, 216, 74, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 40%),
    rgba(4, 14, 26, 0.98);
  color: #edf8ff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.3;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(247, 216, 74, 0.14);
}

.setup-help::before {
  content: "";
  position: absolute;
  right: 8px;
  bottom: calc(100% + 4px);
  z-index: 1199;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(247, 216, 74, 0.28);
  border-bottom: 1px solid rgba(247, 216, 74, 0.28);
  background: rgba(4, 14, 26, 0.98);
  opacity: 0;
  pointer-events: none;
  rotate: 45deg;
  transition: opacity 160ms ease;
}

.setup-help:hover,
.setup-help:focus,
.setup-help.is-open {
  z-index: 1300;
  border-color: rgba(247, 216, 74, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 52%),
    rgba(247, 216, 74, 0.2);
}

.setup-help:hover::before,
.setup-help:hover::after,
.setup-help:focus::before,
.setup-help:focus::after,
.setup-help.is-open::before,
.setup-help.is-open::after {
  opacity: 1;
  transform: translateY(0);
}

.game-settings,
.cup-scoring-settings,
.roster-settings,
.team-name-settings,
.arena-style-settings,
.ball-style-settings,
.device-performance-settings,
.shot-animation-settings,
.timer-setup,
.vocabulary-banks,
.level-inputs {
  position: relative;
  padding: 38px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 32%),
    rgba(2, 9, 18, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.game-settings::before,
.cup-scoring-settings::before,
.roster-settings::before,
.team-name-settings::before,
.arena-style-settings::before,
.ball-style-settings::before,
.device-performance-settings::before,
.shot-animation-settings::before,
.timer-setup::before,
.vocabulary-banks::before,
.level-inputs::before {
  position: absolute;
  top: 13px;
  left: 14px;
  color: color-mix(in srgb, var(--mode-accent) 48%, #fff 52%);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-settings::before { content: "Format"; }
.cup-scoring-settings::before { content: "Cup-Wertung"; }
.roster-settings::before { content: "Teams oder einzeln"; }
.team-name-settings::before { content: "Teams"; }
.arena-style-settings::before { content: "Stadion"; }
.ball-style-settings::before { content: "Optik"; }
.device-performance-settings::before { content: "Gerät"; }
.shot-animation-settings::before { content: "Schüsse"; }
.timer-setup::before { content: "Rundentimer"; }
.vocabulary-banks::before { content: "Saved Vocabulary Lists"; }
.level-inputs::before { content: "Vocabulary"; }

.setup-section-title {
  margin: 14px 0 8px;
  color: rgba(213, 232, 247, 0.62);
  font-size: 12px;
}

.timer-toggle,
.timer-minutes,
.timer-duration-setting,
.mode-option,
.number-setting,
.text-setting,
.color-setting {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%),
    rgba(2, 9, 18, 0.5);
}

.level-inputs {
  margin-top: 14px;
}

.legacy-vocabulary-inputs {
  display: block;
  gap: 12px;
  opacity: 0.78;
  width: 100%;
}

.legacy-vocabulary-inputs:not([open]) {
  padding-bottom: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%),
    rgba(2, 9, 18, 0.22);
}

.legacy-vocabulary-inputs summary {
  cursor: pointer;
  color: #b9d7e6;
  font-size: 12px;
  font-weight: 950;
  list-style-position: inside;
  text-transform: uppercase;
}

.legacy-vocabulary-inputs summary::marker {
  color: var(--mode-accent);
}

.legacy-vocabulary-inputs .vocab-hint {
  margin-top: 10px;
}

.active-game-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  justify-content: stretch;
  align-items: start;
  width: 100%;
  max-width: none;
  margin-top: 10px;
}

.active-game-preview.single-round-preview {
  grid-template-columns: minmax(0, 1fr);
}

.active-preview-title {
  grid-column: 1 / -1;
  margin: 0;
  color: color-mix(in srgb, var(--mode-accent) 38%, #fff 62%);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.active-preview-column {
  display: grid;
  align-content: start;
  gap: 7px;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-inline-size: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(1, 7, 14, 0.26);
}

.active-preview-column h3 {
  margin: 0;
  color: color-mix(in srgb, var(--mode-accent) 36%, #fff 64%);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.active-preview-list {
  display: grid;
  align-content: start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  max-height: 240px;
  min-height: 72px;
  overflow: auto;
  padding-right: 3px;
}

.active-preview-single .active-preview-list {
  max-height: 340px;
}

.active-preview-item {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: rgba(2, 9, 18, 0.38);
}

.active-preview-item strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.15;
}

.active-preview-item span {
  display: block;
  margin-top: 2px;
  color: #b9d7e6;
  font-size: 11px;
  font-weight: 800;
}

.active-preview-empty {
  margin: 0;
  padding: 8px;
  color: #9fb8c8;
  font-size: 12px;
  font-weight: 800;
}

.generated-game-text-fields[hidden] {
  display: none;
}

.bank-section-header .setup-section-title {
  display: none;
}

@media (max-width: 920px) {
  :root {
    --trophy-empty-size: 44px;
    --trophy-earned-size: 52px;
    --trophy-medal-row-size: 38px;
    --trophy-result-medal-size: 88px;
    --trophy-win-size: 132px;
    --trophy-full-cup-size: clamp(190px, 48vw, 280px);
    --mode-result-trophy-size: clamp(118px, 36vw, 180px);
    --shot-ball-size: clamp(72px, 10vw, 112px);
  }

  .bank-section-header,
.bank-controls,
.bank-editor-top,
.bank-item-form,
.bulk-paste-panel,
.smart-import-header,
.smart-import-actions,
.bank-item,
.bank-items,
.active-game-preview,
.setup-dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .shot-animation-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .setup-dashboard-card {
    min-height: 0;
  }

  .setup-dashboard-actions {
    justify-content: stretch;
  }

  .setup-dashboard-actions .tool {
    width: 100%;
  }

  .season-hub-launch-match {
    justify-items: stretch;
  }

  .season-hub-launch-teams {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }

  .season-hub-launch-team,
  .season-hub-launch-team-b {
    justify-content: flex-start;
  }

  .season-hub-launch-vs {
    padding-left: 57px;
  }

  .season-hub-hero,
  .season-hub-launch-card,
  .season-full-hub-header,
  .season-full-dashboard-grid,
  .season-full-team-stage,
  .season-global-dashboard-grid,
  .season-full-matchup,
  .season-future-strip,
  .season-full-placeholders,
  .season-full-start,
  .season-result-metrics,
  .season-pair-modal-header,
  .season-pair-modal-row,
  .season-main-teams-grid,
  .season-main-team-fields,
  .season-main-custom-fields,
  .season-roster-teams,
  .season-hub-teams,
  .season-hub-aliases,
  .season-readiness-header,
  .season-readiness-matchup,
  .season-match-preview-header,
  .season-matchup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-readiness-versus,
  .season-full-versus,
  .season-matchup-versus {
    width: 100%;
    min-height: 42px;
  }

  .season-result-winner-value {
    flex-wrap: wrap;
  }

  .single-round-winner-content {
    flex-wrap: nowrap;
  }

  .mode-result-winner-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .mode-result-winner-emblem.mirror {
    display: none;
  }

  .season-match-controls {
    grid-column: auto;
  }

  .season-pair-modal-actions {
    justify-content: stretch;
  }

  .season-pair-modal-actions .tool {
    flex: 1 1 auto;
  }

  .season-hub-actions,
  .season-hub-future-actions {
    justify-content: stretch;
  }

  .season-hub-actions .tool,
  .season-hub-future-actions .tool,
  .season-result-actions .tool {
    flex: 1 1 auto;
  }

  .season-pending-match-indicator {
    right: 12px;
    bottom: 12px;
  }

  .bank-file-actions,
  .bank-item-actions {
    justify-content: stretch;
  }

  .bank-file-actions .tool,
  .bank-item-actions .tool {
    flex: 1 1 auto;
  }
}

.vocab-hint {
  background: rgba(76, 201, 240, 0.08);
}

.level-input textarea {
  min-height: 230px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    rgba(1, 7, 14, 0.68);
}

.setup-row {
  align-items: stretch;
}

.penalty-card {
  border-color: rgba(255, 70, 92, 0.58);
}

.result-screen {
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(247, 216, 74, 0.1), transparent 44%),
    rgba(0, 0, 0, 0.66);
}

.result-card {
  border-color: color-mix(in srgb, var(--mode-accent) 36%, rgba(247, 216, 74, 0.28));
}

/* Living stadium background: light-only layers behind the pitch UI. */
.field-bg {
  overflow: hidden;
}

.field-bg::before,
.field-bg::after {
  content: "";
  position: absolute;
  inset: -3%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transform: translateZ(0);
  z-index: 1;
}

.field-bg::before {
  background:
    linear-gradient(103deg, transparent 9%, rgba(180, 235, 255, 0.12) 28%, transparent 48%),
    linear-gradient(257deg, transparent 10%, rgba(255, 235, 166, 0.1) 31%, transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%, rgba(0, 0, 0, 0.08) 100%);
  background-size: 140% 100%, 140% 100%, 100% 100%;
  background-position: -18% 0, 118% 0, center;
  opacity: 0.22;
  animation: stadiumCrowdShimmer 18s ease-in-out infinite;
}

.field-bg::after {
  background:
    radial-gradient(ellipse at 28% 7%, rgba(255, 255, 255, 0.2), transparent 20%),
    radial-gradient(ellipse at 72% 7%, color-mix(in srgb, var(--mode-accent) 24%, transparent), transparent 22%),
    radial-gradient(ellipse at 50% 82%, rgba(255, 255, 255, 0.06), transparent 34%),
    linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.095) 48%, transparent 73%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 190% 100%;
  background-position: center, center, center, 0 0;
  opacity: 0.28;
  animation: stadiumLightDrift 24s ease-in-out infinite;
}

body.level-challenge .field-bg::before {
  opacity: 0.34;
  background:
    linear-gradient(102deg, transparent 8%, rgba(255, 222, 146, 0.16) 29%, transparent 49%),
    linear-gradient(258deg, transparent 9%, rgba(255, 184, 74, 0.14) 32%, transparent 52%),
    linear-gradient(180deg, rgba(255, 195, 92, 0.05), transparent 38%, rgba(37, 19, 0, 0.08) 100%);
  animation-duration: 16s;
}

body.level-challenge .field-bg::after {
  opacity: 0.38;
  background:
    radial-gradient(ellipse at 28% 7%, rgba(255, 226, 151, 0.24), transparent 21%),
    radial-gradient(ellipse at 72% 7%, rgba(255, 184, 74, 0.22), transparent 23%),
    radial-gradient(ellipse at 50% 86%, rgba(255, 184, 74, 0.09), transparent 35%),
    linear-gradient(108deg, transparent 21%, rgba(255, 236, 182, 0.13) 48%, transparent 72%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 190% 100%;
  animation-duration: 21s;
}

body.level-elite .field-bg::before {
  opacity: 0.36;
  background:
    linear-gradient(101deg, transparent 7%, rgba(255, 210, 210, 0.15) 28%, transparent 48%),
    linear-gradient(259deg, transparent 9%, rgba(255, 58, 83, 0.13) 32%, transparent 53%),
    linear-gradient(180deg, rgba(120, 0, 26, 0.14), transparent 42%, rgba(24, 0, 7, 0.1) 100%);
  background-size: 145% 100%, 145% 100%, 100% 100%;
  animation-duration: 17s;
}

body.level-elite .field-bg::after {
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 25% 7%, rgba(255, 230, 230, 0.22), transparent 20%),
    radial-gradient(ellipse at 75% 7%, rgba(255, 78, 100, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(255, 64, 89, 0.13), transparent 32%, transparent 100%),
    linear-gradient(106deg, transparent 17%, rgba(255, 235, 220, 0.12) 45%, transparent 68%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 210% 100%;
  animation-duration: 22s;
}

body.crowd-glow .field-bg::before,
body.stadium-surge .field-bg::after,
body.cup-shimmer .field-bg::after {
  opacity: 0.58;
}

@keyframes stadiumCrowdShimmer {
  0% {
    background-position: -18% 0, 118% 0, center;
    filter: brightness(1);
  }
  50% {
    background-position: -6% 0, 106% 0, center;
    filter: brightness(1.08);
  }
  100% {
    background-position: -18% 0, 118% 0, center;
    filter: brightness(1);
  }
}

@keyframes stadiumLightDrift {
  0% {
    background-position: center, center, center, 0 0;
    filter: brightness(1);
  }
  50% {
    background-position: 47% 50%, 53% 50%, center, 100% 0;
    filter: brightness(1.08);
  }
  100% {
    background-position: center, center, center, 0 0;
    filter: brightness(1);
  }
}

/* Presentation-only game-feel pass. These classes are added briefly by app.js around existing events. */
body.crowd-glow::after,
body.stadium-surge::after,
body.cup-shimmer::after,
body.penalty-pressure::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

body.crowd-glow::after {
  background:
    radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 42%),
    radial-gradient(ellipse at 50% 102%, rgba(247, 216, 74, 0.1), transparent 46%);
  animation: crowdGlowPulse 1300ms ease both;
}

body.stadium-surge::after {
  background:
    linear-gradient(104deg, transparent 19%, rgba(255, 255, 255, 0.11) 45%, transparent 69%),
    radial-gradient(ellipse at 50% 10%, color-mix(in srgb, var(--mode-accent) 24%, transparent), transparent 44%),
    linear-gradient(90deg, transparent, rgba(247, 216, 74, 0.07), transparent);
  mix-blend-mode: screen;
  animation: stadiumSurgePulse 1250ms ease both;
}

body.cup-shimmer::after {
  background:
    radial-gradient(ellipse at 50% 12%, rgba(247, 216, 74, 0.2), transparent 38%),
    linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 47%, transparent 64%);
  mix-blend-mode: screen;
  animation: cupShimmerSweep 1800ms ease both;
}

body.penalty-pressure::after {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 52%, transparent 0 24%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.36) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 74, 94, 0.08), transparent 40%);
  animation: penaltyPressureFade 1500ms ease both;
}

.field.goal-build::before {
  opacity: 0.9;
  animation: goalBuildLight 760ms ease both;
}

.field.goal-impact {
  animation: fieldImpactKick 540ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.field.goal-flash .field-grade {
  animation: goalGradeBloom 950ms ease both;
}

.field.goal-impact .goal-mouth.hit {
  animation: netShake 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.field.shot-variant-straight,
.field.shot-variant-arc,
.field.shot-variant-low,
.field.shot-variant-power,
.field.shot-variant-quick,
.field.penalty-variant-warning,
.field.penalty-variant-charge,
.field.penalty-variant-power {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #f7d84a) 62%, transparent);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #f7d84a) 72%, white 28%);
  --shot-team-deep: color-mix(in srgb, var(--shot-team-color, #f7d84a) 78%, black 22%);
}

.field.shot-variant-straight::before,
.field.shot-variant-arc::before,
.field.shot-variant-low::before,
.field.shot-variant-power::before,
.field.shot-variant-quick::before,
.field.goal-build::before {
  background:
    radial-gradient(ellipse at 50% 54%, var(--shot-team-glow), transparent 32%),
    radial-gradient(ellipse at 50% 11%, color-mix(in srgb, var(--shot-team-color, #f7d84a) 28%, transparent), transparent 38%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.11), transparent 32%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.3));
}

.field.shot-variant-straight .shot-trail,
.field.shot-variant-arc .shot-trail,
.field.shot-variant-low .shot-trail,
.field.shot-variant-power .shot-trail,
.field.shot-variant-quick .shot-trail,
.field.penalty-variant-warning .shot-trail,
.field.penalty-variant-charge .shot-trail,
.field.penalty-variant-power .shot-trail {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), var(--shot-team-bright), transparent),
    radial-gradient(ellipse at 50% 50%, var(--shot-team-glow), transparent 72%);
  box-shadow:
    0 0 24px var(--shot-team-glow),
    0 0 52px color-mix(in srgb, var(--shot-team-color, #f7d84a) 32%, transparent);
}

.ball-shadow.shot,
.ball-shadow.penalty-shot,
.ball-shadow.penalty-variant-charge,
.ball-shadow.penalty-variant-power {
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--shot-team-color, #f7d84a) 52%, rgba(0, 0, 0, 0.18)), rgba(0, 0, 0, 0.22) 52%, transparent 78%);
  filter: blur(7px) saturate(1.18);
}

.field.goal-impact {
  box-shadow:
    inset 0 0 72px color-mix(in srgb, var(--shot-team-color, #f7d84a) 22%, transparent),
    0 26px 78px rgba(0, 0, 0, 0.48),
    0 0 42px color-mix(in srgb, var(--shot-team-color, #f7d84a) 18%, transparent);
}

.field.goal-flash .field-grade {
  background:
    radial-gradient(ellipse at 50% 56%, color-mix(in srgb, var(--shot-team-color, #f7d84a) 24%, transparent), transparent 26%),
    radial-gradient(ellipse at 50% 4%, rgba(255, 255, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(5, 18, 32, 0.08), transparent 42%, rgba(2, 8, 14, 0.22)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.24));
}

.scoreboard.scoreboard-pop,
.team-card.scoreboard-pop {
  animation: scoreboardPop 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.field.penalty-focus {
  box-shadow:
    inset 0 0 66px rgba(0, 0, 0, 0.3),
    inset 0 0 0 2px rgba(255, 74, 94, 0.08),
    0 26px 78px rgba(0, 0, 0, 0.48),
    0 0 28px rgba(255, 74, 94, 0.09);
}

.field.penalty-focus::before {
  opacity: 0.62;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.09), transparent 18%),
    radial-gradient(circle at 50% 48%, rgba(255, 74, 94, 0.1), transparent 36%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.045));
}

.field.penalty-charge::before {
  animation: penaltySpotlightCharge 1500ms ease both;
}

body.penalty-pressure .scoreboard,
body.penalty-pressure .controls {
  filter: brightness(0.9) saturate(0.94);
}

body.penalty-pressure .penalty-card {
  animation: penaltyCardPressure 780ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.field.word-focus::before {
  animation: wordFocusLight 1100ms ease both;
}

.word-display.challenge-focus {
  animation: challengeCardFocus 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.team-card.trophy-shimmer,
.scoreboard.trophy-shimmer {
  animation: trophyPanelShimmer 1600ms ease both;
}

.team-card.trophy-shimmer .trophy.won,
.team-card.trophy-shimmer .mode-medal.won,
.scoreboard.trophy-shimmer .cup-mini {
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 16px rgba(247, 216, 74, 0.48))
    drop-shadow(0 0 32px color-mix(in srgb, var(--mode-accent) 22%, transparent));
}

.result-screen.final-cinematic {
  background:
    radial-gradient(circle at 50% 24%, rgba(247, 216, 74, 0.16), transparent 28%),
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 38%),
    radial-gradient(circle at 50% 82%, rgba(255, 255, 255, 0.08), transparent 48%),
    rgba(0, 0, 0, 0.74);
}

.result-screen.final-cinematic::before,
.result-screen.final-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.result-screen.final-cinematic::before {
  background:
    radial-gradient(circle at 20% 18%, rgba(247, 216, 74, 0.62) 0 2px, transparent 3px),
    radial-gradient(circle at 36% 8%, rgba(76, 201, 240, 0.52) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 14%, rgba(255, 99, 99, 0.5) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 22%, rgba(73, 229, 143, 0.52) 0 2px, transparent 3px),
    radial-gradient(circle at 48% 4%, rgba(255, 255, 255, 0.54) 0 1px, transparent 3px);
  opacity: 0;
  animation: finalConfettiDrift 2400ms ease-out both;
}

.result-screen.final-cinematic::after {
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.11) 48%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: finalSpotlightSweep 1900ms ease both;
}

.result-screen.final-cinematic .result-card {
  animation: finalCardLift 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.62),
    0 0 50px color-mix(in srgb, var(--mode-accent) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.result-screen.final-cinematic .champion-panel {
  animation: championPanelPulse 1500ms ease both;
}

.result-screen.final-cinematic #resultContinue {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 24px rgba(247, 216, 74, 0.2);
}

@keyframes crowdGlowPulse {
  0% { opacity: 0; transform: scale(1); }
  28% { opacity: 0.46; }
  100% { opacity: 0; transform: scale(1.02); }
}

@keyframes stadiumSurgePulse {
  0% { opacity: 0; transform: scaleX(0.96); }
  22% { opacity: 0.5; }
  100% { opacity: 0; transform: scaleX(1.04); }
}

@keyframes cupShimmerSweep {
  0% { opacity: 0; transform: translateX(-16%); }
  26% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(18%); }
}

@keyframes penaltyPressureFade {
  0% { opacity: 0; }
  28% { opacity: 0.78; }
  100% { opacity: 0.64; }
}

@keyframes goalBuildLight {
  0% { filter: brightness(1); transform: scale(1); }
  45% { filter: brightness(1.1); transform: scale(1.006); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes fieldImpactKick {
  0% { transform: translateZ(0) scale(1); }
  34% { transform: translateZ(0) scale(1.006); }
  100% { transform: translateZ(0) scale(1); }
}

@keyframes goalGradeBloom {
  0% { opacity: 0.82; filter: brightness(1); }
  24% { opacity: 0.94; filter: brightness(1.12) saturate(1.08); }
  100% { opacity: 0.82; filter: brightness(1); }
}

@keyframes netShake {
  0%, 100% { transform: translateY(-50%) skewY(0deg); }
  18% { transform: translateY(-50%) translateX(-2px) skewY(1deg); }
  38% { transform: translateY(-50%) translateX(2px) skewY(-1deg); }
  60% { transform: translateY(-50%) translateX(-1px) skewY(0.5deg); }
}

@keyframes goalNetBurst {
  0% { box-shadow: none; }
  24% {
    box-shadow: none;
  }
  100% { box-shadow: none; }
}

@keyframes scoreboardPop {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  32% { transform: translateY(-1px) scale(1.014); filter: brightness(1.08); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes penaltySpotlightCharge {
  0% { filter: brightness(0.9) saturate(0.95); transform: scale(1); }
  42% { filter: brightness(1.06) saturate(1.08); transform: scale(1.006); }
  100% { filter: brightness(1) saturate(1); transform: scale(1); }
}

@keyframes penaltyCardPressure {
  0% { transform: translateY(6px) scale(0.99); }
  48% { transform: translateY(-1px) scale(1.006); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes wordFocusLight {
  0% { opacity: 0.76; filter: brightness(0.96); }
  36% { opacity: 0.96; filter: brightness(1.06); }
  100% { opacity: 0.86; filter: brightness(1); }
}

@keyframes challengeCardFocus {
  0% { transform: translateZ(36px) scale(0.96); filter: brightness(0.94); }
  34% { transform: translateZ(36px) scale(1.018); filter: brightness(1.08); }
  100% { transform: translateZ(36px) scale(1); filter: brightness(1); }
}

@keyframes trophyPanelShimmer {
  0% { filter: brightness(1); box-shadow: inherit; }
  28% {
    filter: brightness(1.08);
    box-shadow:
      0 0 24px rgba(247, 216, 74, 0.18),
      0 22px 62px rgba(0, 0, 0, 0.38);
  }
  100% { filter: brightness(1); box-shadow: inherit; }
}

@keyframes finalConfettiDrift {
  0% { opacity: 0; transform: translateY(-20px); }
  18% { opacity: 0.56; }
  100% { opacity: 0; transform: translateY(120px); }
}

@keyframes finalSpotlightSweep {
  0% { opacity: 0; transform: translateX(-26%); }
  34% { opacity: 0.46; }
  100% { opacity: 0; transform: translateX(26%); }
}

@keyframes finalCardLift {
  0% { transform: translateY(18px) scale(0.985); filter: brightness(0.94); }
  52% { transform: translateY(-2px) scale(1.006); filter: brightness(1.04); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes championPanelPulse {
  0% { filter: brightness(1); transform: scale(1); }
  36% { filter: brightness(1.08); transform: scale(1.006); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes pressureStadiumSurge {
  0%, 100% { opacity: 0.46; filter: saturate(1) blur(0); }
  44% { opacity: 0.68; filter: saturate(1.12) blur(0.5px); }
}

@keyframes pressureEdgePulse {
  0%, 100% { opacity: 0.58; filter: saturate(1) blur(0); }
  48% { opacity: 0.84; filter: saturate(1.14) blur(1px); }
}

@keyframes finalAttackSurge {
  0%, 100% { opacity: 0.62; filter: brightness(1) saturate(1); }
  48% { opacity: 0.86; filter: brightness(1.14) saturate(1.18); }
}

@keyframes finalAttackVignette {
  0%, 100% { opacity: 0.82; filter: blur(0); }
  50% { opacity: 0.98; filter: blur(0.8px); }
}

@keyframes finalAttackCardIn {
  0% { opacity: 0; transform: translateY(24px) scale(0.94); filter: brightness(1.35) saturate(1.3); }
  68% { opacity: 1; transform: translateY(-3px) scale(1.018); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) saturate(1); }
}

@keyframes pressureTimerPulse {
  0%, 100% { filter: brightness(1); box-shadow: inset 0 0 24px rgba(255, 121, 39, 0.16), 0 0 20px rgba(255, 95, 39, 0.18); }
  48% { filter: brightness(1.12); box-shadow: inset 0 0 30px rgba(255, 121, 39, 0.24), 0 0 32px rgba(255, 95, 39, 0.28); }
}

@keyframes finalTimerPulse {
  0%, 100% { filter: brightness(1); transform: translateZ(0) scale(1); }
  50% { filter: brightness(1.14); transform: translateZ(0) scale(1.012); }
}

@keyframes pressureBanner {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.08); transform: translateY(0) scale(1.006); }
}

@keyframes finalBanner {
  0%, 100% { filter: brightness(1); transform: translateY(0) scale(1); }
  50% { filter: brightness(1.12); transform: translateY(0) scale(1.012); }
}

@keyframes pairScoreFlash {
  0% {
    opacity: 0;
    transform: translateY(-22px) scale(0.64) rotate(-2deg);
    filter: brightness(1.55) saturate(1.34);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1.12) rotate(0deg);
    filter: brightness(1.34) saturate(1.24);
  }
  28% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.12) saturate(1.1);
  }
  84% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-12px) scale(0.9);
    filter: brightness(1) saturate(1);
  }
}

@keyframes activePairScorePulse {
  0% {
    opacity: 0.9;
    transform: translateY(0) scale(0.88);
    filter: brightness(1) saturate(1);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.03);
    filter: brightness(1.26) saturate(1.2);
  }
  38% {
    opacity: 0.96;
    transform: translateY(0) scale(0.94);
    filter: brightness(1.12) saturate(1.1);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0) scale(0.88);
    filter: brightness(0.96) saturate(0.96);
  }
}

/* Final scoreboard long-name overflow hardening. */
.scoreboard > .team-card {
  --scoreboard-trophy-lane: clamp(126px, 44%, 252px);
  min-width: 0;
  overflow: visible;
}

.scoreboard > .team-card .trophy-row {
  max-width: var(--scoreboard-trophy-lane);
  min-width: 0;
  overflow: visible;
}

.scoreboard > .team-card .team-label {
  display: none;
}

.scoreboard > .team-card.team-a .team-label {
  padding: 0;
}

.scoreboard > .team-card.team-b .team-label {
  padding: 0;
}

.scoreboard > .team-card .score-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-width: 0;
}

.scoreboard > .team-card .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
  grid-template-columns: 44px minmax(0, 1fr) clamp(104px, 9.2vw, 146px) 44px;
  gap: clamp(8px, 1vw, 14px);
}

.scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
  grid-template-columns: 44px clamp(104px, 9.2vw, 146px) minmax(0, 1fr) 44px;
}

.scoreboard > .team-card .score-row strong {
  min-width: 0;
  text-align: center;
}

.gameplay-season-badge-slot[hidden] {
  display: none;
}

.gameplay-season-badge-slot {
  position: relative;
  z-index: 7;
  display: grid;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: 100%;
  min-width: 0;
  pointer-events: none;
}

.gameplay-season-badge-primary {
  display: grid;
  place-items: center;
  width: clamp(96px, 8.6vw, 134px);
  height: clamp(96px, 8.6vw, 134px);
  border: 1px solid rgba(247, 216, 74, 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.16), transparent 62%),
    radial-gradient(circle at 50% 80%, rgba(247, 216, 74, 0.1), transparent 72%),
    rgba(5, 13, 24, 0.36);
  color: #fff1a8;
  font-weight: 1000;
  font-size: clamp(18px, 1.6vw, 26px);
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32);
  overflow: visible;
}

.gameplay-season-badge-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.42));
}

.gameplay-season-main-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.team-card .gameplay-season-badge-slot:not([hidden]) ~ .score-row {
  margin-top: 0;
}

.scoreboard > .team-card .score-row strong {
  display: grid;
  place-items: center;
  min-height: clamp(40px, 4.8vw, 62px);
  font-variant-numeric: tabular-nums;
}

.field-season-duel[hidden] {
  display: none;
}

.field-season-duel {
  position: absolute;
  top: clamp(10px, 1.8vh, 22px);
  left: 50%;
  z-index: 11;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
  width: min(58%, 700px);
  min-height: clamp(54px, 7vh, 82px);
  transform: translateX(-50%);
  pointer-events: none;
}

.field-season-duel-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(7px, 1vw, 12px);
  min-width: 0;
  padding: 7px clamp(8px, 1.2vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(4, 12, 22, 0.6);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.32),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(7px);
}

.field-season-duel-side.team-a {
  border-color: color-mix(in srgb, var(--team-a-color) 46%, rgba(255, 255, 255, 0.18));
}

.field-season-duel-side.team-b {
  border-color: color-mix(in srgb, var(--team-b-color) 46%, rgba(255, 255, 255, 0.18));
}

.field-season-duel b {
  display: grid;
  place-items: center;
  width: clamp(42px, 4.4vw, 60px);
  height: clamp(34px, 4vh, 46px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 62%),
    rgba(4, 12, 22, 0.64);
  color: #f7d84a;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 1000;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(247, 216, 74, 0.48);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}

.field-season-pair-icon {
  display: grid;
  place-items: center;
  width: clamp(44px, 5.2vw, 68px);
  height: clamp(44px, 5.2vw, 68px);
  border-radius: 10px;
  color: #fff1a8;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 1000;
  overflow: visible;
}

.field-season-pair-img {
  display: block;
  width: 148%;
  height: 148%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.44));
}

.field-season-duel-side strong {
  min-width: 0;
  color: #f4fbff;
  font-size: clamp(12px, 1.05vw, 16px);
  font-weight: 1000;
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 3px 8px rgba(0, 0, 0, 0.68);
}

/* Final pressure banner placement: keep the ball visible. */
.field .event-banner.pressure-tone {
  top: auto;
  bottom: clamp(8px, 1.8vh, 18px);
  width: min(52%, 640px);
  min-height: 58px;
  padding: 12px 24px;
  font-size: clamp(18px, 2vw, 32px);
  line-height: 1.05;
}

/* Final shot color overrides: keep team color on the real ball trail after late visual rules. */
#field.field.shot-variant-straight,
#field.field.shot-variant-arc,
#field.field.shot-variant-low,
#field.field.shot-variant-power,
#field.field.shot-variant-quick,
#field.field.penalty-variant-warning,
#field.field.penalty-variant-charge,
#field.field.penalty-variant-power {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 92%, transparent);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 84%, white 16%);
  --shot-team-deep: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 80%, black 20%);
}

#field.field.shot-variant-straight #shotTrail,
#field.field.shot-variant-arc #shotTrail,
#field.field.shot-variant-low #shotTrail,
#field.field.shot-variant-power #shotTrail,
#field.field.shot-variant-quick #shotTrail,
#field.field.penalty-variant-warning #shotTrail,
#field.field.penalty-variant-charge #shotTrail,
#field.field.penalty-variant-power #shotTrail {
  background:
    linear-gradient(90deg, transparent 0%, var(--shot-team-glow) 28%, var(--shot-team-bright) 52%, var(--shot-team-color, #5aa7ff) 70%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, var(--shot-team-color, #5aa7ff), transparent 72%);
  box-shadow:
    0 0 18px var(--shot-team-color, #5aa7ff),
    0 0 44px var(--shot-team-glow),
    0 0 76px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 34%, transparent);
  filter: blur(2px) saturate(1.7) brightness(1.3);
}

#field.field.shot-variant-power #shotTrail,
#field.field.penalty-variant-charge #shotTrail,
#field.field.penalty-variant-power #shotTrail {
  box-shadow:
    0 0 24px var(--shot-team-color, #5aa7ff),
    0 0 62px var(--shot-team-glow),
    0 0 104px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 42%, transparent);
  filter: blur(2.5px) saturate(1.9) brightness(1.42);
}

#field.field.shot-variant-straight #ballShadow,
#field.field.shot-variant-arc #ballShadow,
#field.field.shot-variant-low #ballShadow,
#field.field.shot-variant-power #ballShadow,
#field.field.shot-variant-quick #ballShadow,
#field.field.penalty-variant-warning #ballShadow,
#field.field.penalty-variant-charge #ballShadow,
#field.field.penalty-variant-power #ballShadow {
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 66%, rgba(0, 0, 0, 0.2)), color-mix(in srgb, var(--shot-team-deep) 42%, transparent) 52%, transparent 78%);
  filter: blur(7px) saturate(1.45);
}

#field.field.shot-variant-straight::before,
#field.field.shot-variant-arc::before,
#field.field.shot-variant-low::before,
#field.field.shot-variant-power::before,
#field.field.shot-variant-quick::before,
#field.field.goal-build::before {
  background:
    radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 34%, transparent), transparent 34%),
    radial-gradient(ellipse at 50% 11%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 30%, transparent), transparent 38%),
    radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, 0.11), transparent 32%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.3));
}

#field.field.goal-impact {
  box-shadow:
    inset 0 0 118px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 46%, transparent),
    0 26px 78px rgba(0, 0, 0, 0.48),
    0 0 88px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 44%, transparent);
}

#field .event-banner.attack-tone {
  color: #f6fcff;
  border-color: color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 54%, rgba(255, 255, 255, 0.18));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 26%, rgba(5, 16, 29, 0.58)), rgba(4, 12, 22, 0.48)),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 28%, transparent), transparent 62%);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 16%, transparent),
    0 18px 42px rgba(0, 0, 0, 0.34),
    0 0 40px color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 30%, transparent);
  backdrop-filter: blur(4px) saturate(1.08);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.72),
    0 0 16px color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 78%, transparent),
    0 0 36px color-mix(in srgb, var(--event-team-color, var(--shot-team-color, #5aa7ff)) 52%, transparent);
}

#field.field.shot-variant-straight #shotTrail,
#field.field.shot-variant-arc #shotTrail,
#field.field.shot-variant-low #shotTrail,
#field.field.shot-variant-power #shotTrail,
#field.field.shot-variant-quick #shotTrail,
#field.field.penalty-variant-warning #shotTrail,
#field.field.penalty-variant-charge #shotTrail,
#field.field.penalty-variant-power #shotTrail {
  display: none;
}

#field .ball.pass,
#field .ball.shot,
#field .ball.penalty-shot {
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 92%, transparent)) !important;
}

#field .ball.pass::after,
#field .ball.shot::after,
#field .ball.penalty-shot::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 50%;
  right: 42%;
  z-index: 1;
  width: 230%;
  height: 52%;
  border: 0 !important;
  border-radius: 999px;
  outline: 0 !important;
  pointer-events: none;
  transform: translateY(-50%) rotate(var(--shot-trail-angle, 0deg));
  transform-origin: 100% 50%;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 18%, transparent) 18%, var(--shot-team-glow) 48%, var(--shot-team-bright) 76%, transparent 100%),
    radial-gradient(ellipse at 78% 50%, var(--shot-team-color, #5aa7ff), transparent 68%);
  box-shadow:
    0 0 32px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 96%, transparent),
    0 0 74px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 72%, transparent),
    0 0 112px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 48%, transparent),
    0 0 152px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 26%, transparent);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(2.7px) saturate(2.35) brightness(1.55);
  animation: attachedBallTrail 760ms ease both;
}

#field .ball.pass::before,
#field .ball.shot::before,
#field .ball.penalty-shot::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -22%;
  z-index: 0;
  border: 0 !important;
  border-radius: 50%;
  outline: 0 !important;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 54%, transparent), transparent 66%);
  box-shadow:
    0 0 28px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 90%, transparent),
    0 0 72px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 52%, transparent);
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(2.1) brightness(1.45);
  animation: attachedBallAura 760ms ease both;
}

#field .ball.pass.shot-variant-power::after,
#field .ball.shot-variant-power::after,
#field .ball.penalty-variant-charge::after,
#field .ball.penalty-variant-power::after {
  width: 270%;
  height: 62%;
  filter: blur(2.6px) saturate(1.85) brightness(1.34);
  box-shadow:
    0 0 40px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 100%, transparent),
    0 0 96px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 78%, transparent),
    0 0 144px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 54%, transparent),
    0 0 188px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 32%, transparent);
}

#field .ball.pass.shot-variant-quick::after,
#field .ball.shot-variant-quick::after {
  width: 180%;
  height: 42%;
  animation-duration: 520ms;
}

#field .ball.pass.shot-variant-low::after,
#field .ball.shot-variant-low::after {
  top: 62%;
  height: 38%;
}

#field .ball.penalty-shot::after {
  animation-duration: 900ms;
}

body.possession-powershot-fired #field.field.shot-variant-power {
  animation: powershotFieldImpact 2200ms cubic-bezier(0.17, 0.84, 0.28, 1) both;
}

body.possession-powershot-fired #field.field.shot-variant-power #shotTrail {
  display: block !important;
  width: 88%;
  height: 17%;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 46%, transparent) 16%, #fff8bf 43%, var(--shot-team-color, #5aa7ff) 74%, transparent 100%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 62%, #f7d84a 38%), transparent 74%);
  filter: blur(3.4px) saturate(2.65) brightness(1.72);
  box-shadow:
    0 0 46px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 100%, transparent),
    0 0 118px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 78%, transparent),
    0 0 174px rgba(247, 216, 74, 0.5);
  animation: powershotTrailKick 2180ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

body.possession-powershot-fired #field .ball.shot-variant-power,
body.possession-powershot-fired #field .ball.pass.shot-variant-power {
  filter:
    drop-shadow(0 0 34px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 100%, transparent))
    drop-shadow(0 0 68px rgba(247, 216, 74, 0.56))
    drop-shadow(0 0 108px rgba(255, 160, 42, 0.3)) !important;
}

body.possession-powershot-fired #field .ball.pass.shot-variant-power::before,
body.possession-powershot-fired #field .ball.shot-variant-power::before {
  inset: -54%;
  animation-duration: 1180ms;
}

body.possession-powershot-fired #field .ball.pass.shot-variant-power::after,
body.possession-powershot-fired #field .ball.shot-variant-power::after {
  right: 30%;
  width: 360%;
  height: 82%;
  animation-duration: 1180ms;
}

.powershot-broadcast {
  position: absolute;
  left: 50%;
  bottom: clamp(96px, 23%, 178px);
  z-index: 26;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 18px);
  width: min(76%, 860px);
  min-height: clamp(42px, 6.2vh, 68px);
  padding: clamp(8px, 1vw, 13px) clamp(18px, 3vw, 34px);
  border: 2px solid color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 62%, rgba(255, 255, 255, 0.22));
  border-radius: 8px;
  color: #fffbe4;
  background:
    linear-gradient(90deg, transparent 0 5%, color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 28%, rgba(255, 111, 38, 0.56)) 6% 18%, rgba(7, 13, 24, 0.92) 26% 74%, color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 28%, rgba(255, 111, 38, 0.56)) 82% 94%, transparent 95%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 44%),
    rgba(3, 10, 18, 0.88);
  box-shadow:
    inset 0 0 34px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 18%, transparent),
    0 16px 42px rgba(0, 0, 0, 0.45),
    0 0 56px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 42%, transparent);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  text-transform: uppercase;
  transform: translateX(-145%) skewX(-8deg) scale(0.94);
  animation: powershotBroadcastSweep 3000ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

.powershot-broadcast::before,
.powershot-broadcast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.powershot-broadcast::before {
  background:
    repeating-linear-gradient(105deg, transparent 0 18px, rgba(255, 255, 255, 0.14) 19px 23px, transparent 24px 42px);
  mix-blend-mode: screen;
  opacity: 0.48;
}

.powershot-broadcast::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.32) 46%, transparent 62%);
  transform: translateX(-120%);
  animation: powershotBroadcastGlint 1180ms ease-out 180ms both;
}

.powershot-broadcast strong {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: clamp(1rem, 2.2vw, 2.35rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.72),
    0 0 18px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 78%, transparent),
    0 0 36px rgba(255, 139, 40, 0.45);
}

.powershot-broadcast-burst,
.powershot-broadcast-ring {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  background: linear-gradient(135deg, #fff5a8, var(--powershot-broadcast-color, #f7d84a), #ff6b2b);
  box-shadow: 0 0 20px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 62%, transparent);
}

.powershot-broadcast-burst {
  width: clamp(24px, 3vw, 46px);
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 61% 34%, 98% 18%, 70% 49%, 100% 66%, 62% 62%, 50% 100%, 38% 62%, 0 66%, 30% 49%, 2% 18%, 39% 34%);
}

.powershot-broadcast-ring {
  width: clamp(22px, 2.8vw, 44px);
  aspect-ratio: 1;
  border: clamp(4px, 0.5vw, 7px) solid #fff5a8;
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 42%, var(--powershot-broadcast-color, #f7d84a) 44% 58%, transparent 60%),
    rgba(255, 245, 168, 0.16);
}

.powershot-broadcast.boost-variant-underdog {
  border-color: rgba(247, 216, 74, 0.74);
  color: #f3fbff;
  background:
    var(--possession-rush-underdog-activation) center / min(54%, 430px) auto no-repeat,
    linear-gradient(90deg, transparent 0 5%, rgba(76, 201, 240, 0.44) 6% 20%, rgba(7, 13, 24, 0.93) 28% 72%, rgba(247, 216, 74, 0.34) 80% 94%, transparent 95%),
    radial-gradient(circle at 18% 50%, rgba(76, 201, 240, 0.24), transparent 0 24%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 44%),
    rgba(3, 10, 18, 0.9);
  box-shadow:
    inset 0 0 34px rgba(76, 201, 240, 0.24),
    0 16px 42px rgba(0, 0, 0, 0.45),
    0 0 56px rgba(76, 201, 240, 0.36),
    0 0 36px rgba(247, 216, 74, 0.18);
}

.powershot-broadcast.boost-variant-underdog::before {
  background:
    linear-gradient(90deg, rgba(3, 10, 18, 0.54), rgba(3, 10, 18, 0.22) 35%, rgba(3, 10, 18, 0.22) 65%, rgba(3, 10, 18, 0.54)),
    repeating-linear-gradient(105deg, transparent 0 18px, rgba(255, 255, 255, 0.12) 19px 23px, transparent 24px 42px);
}

.powershot-broadcast.boost-variant-underdog strong {
  font-size: clamp(0.92rem, 1.82vw, 2.08rem);
  letter-spacing: 0.045em;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.72),
    0 0 20px rgba(76, 201, 240, 0.72),
    0 0 28px rgba(247, 216, 74, 0.3);
}

.powershot-broadcast.boost-variant-underdog .powershot-broadcast-burst,
.powershot-broadcast.boost-variant-underdog .powershot-broadcast-ring {
  background: linear-gradient(135deg, #e9fbff, #4cc9f0 42%, #f7d84a);
  box-shadow:
    0 0 20px rgba(76, 201, 240, 0.56),
    0 0 16px rgba(247, 216, 74, 0.26);
}

.underdog-boost-broadcast {
  position: absolute;
  left: 50%;
  top: clamp(82px, 18%, 150px);
  z-index: 27;
  display: grid;
  grid-template-columns: clamp(38px, 5vw, 72px) minmax(0, auto);
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  width: min(72%, 720px);
  min-height: clamp(54px, 8vh, 86px);
  padding: clamp(10px, 1.2vw, 16px) clamp(18px, 3vw, 34px);
  border: 2px solid rgba(247, 216, 74, 0.62);
  border-radius: 10px;
  color: #ffffff;
  background:
    radial-gradient(circle at 16% 50%, color-mix(in srgb, var(--underdog-boost-active-color, #4cc9f0) 34%, transparent), transparent 48%),
    linear-gradient(90deg, rgba(76, 201, 240, 0.3), rgba(247, 216, 74, 0.18) 45%, rgba(3, 12, 22, 0.9) 86%),
    rgba(2, 10, 19, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 34px rgba(76, 201, 240, 0.18),
    0 16px 42px rgba(0, 0, 0, 0.42),
    0 0 58px rgba(76, 201, 240, 0.34);
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  text-transform: uppercase;
  transform: translateX(-50%) translateY(18px) scale(0.94);
  animation: underdogBoostBroadcastRise 1900ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

.underdog-boost-broadcast::before,
.underdog-boost-broadcast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.underdog-boost-broadcast::before {
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.32), transparent 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 18% 50%, transparent 0 16px, rgba(76, 201, 240, 0.14) 17px 20px, transparent 21px 34px);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.underdog-boost-broadcast::after {
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.34) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: underdogBoostGlint 900ms ease-out 120ms both;
}

.underdog-boost-broadcast.is-used {
  border-color: rgba(247, 216, 74, 0.78);
  background:
    radial-gradient(circle at 18% 50%, rgba(247, 216, 74, 0.38), transparent 48%),
    linear-gradient(90deg, rgba(247, 216, 74, 0.3), rgba(76, 201, 240, 0.16) 54%, rgba(3, 12, 22, 0.9) 88%),
    rgba(2, 10, 19, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 34px rgba(247, 216, 74, 0.22),
    0 16px 42px rgba(0, 0, 0, 0.42),
    0 0 58px rgba(247, 216, 74, 0.34);
  animation-duration: 1500ms;
}

.underdog-boost-broadcast.is-deactivated {
  border-color: rgba(134, 215, 236, 0.42);
  background:
    radial-gradient(circle at 18% 50%, rgba(76, 201, 240, 0.18), transparent 48%),
    linear-gradient(90deg, rgba(76, 201, 240, 0.16), rgba(215, 238, 255, 0.1) 54%, rgba(3, 12, 22, 0.88) 88%),
    rgba(2, 10, 19, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 34px rgba(0, 0, 0, 0.34),
    0 0 32px rgba(76, 201, 240, 0.18);
  animation-duration: 1200ms;
}

.underdog-boost-broadcast-ring,
.underdog-boost-broadcast-core {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}

.underdog-boost-broadcast-ring {
  width: clamp(36px, 5vw, 70px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 40%, rgba(247, 216, 74, 0.86) 42% 51%, transparent 53%),
    radial-gradient(circle, rgba(76, 201, 240, 0.24), transparent 68%);
  box-shadow: 0 0 22px rgba(76, 201, 240, 0.42);
  animation: underdogBoostRingPulse 1180ms ease-out both;
}

.underdog-boost-broadcast-core {
  width: clamp(22px, 3vw, 42px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 36%, #ffffff 0 10%, transparent 11%),
    linear-gradient(135deg, #4cc9f0, #f7d84a);
  clip-path: polygon(50% 0, 86% 20%, 100% 58%, 70% 100%, 30% 100%, 0 58%, 14% 20%);
  box-shadow: 0 0 16px rgba(247, 216, 74, 0.38);
}

.underdog-boost-broadcast-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
  line-height: 1;
}

.underdog-boost-broadcast-copy strong {
  color: #ffffff;
  font-size: clamp(1rem, 2.1vw, 2.2rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.68),
    0 0 22px rgba(76, 201, 240, 0.58);
}

.underdog-boost-broadcast-copy small {
  color: #fff3a6;
  font-size: clamp(0.68rem, 1vw, 1rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.62);
}

body.possession-underdog-boost-activated::after,
body.possession-underdog-boost-used::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(76, 201, 240, 0.22), transparent 0 24%, transparent 54%),
    radial-gradient(circle at 50% 52%, rgba(247, 216, 74, 0.18), transparent 0 18%, transparent 48%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: underdogBoostScreenPulse 1100ms ease-out both;
}

body.possession-underdog-boost-used::after {
  background:
    radial-gradient(circle at 50% 52%, rgba(247, 216, 74, 0.32), transparent 0 24%, transparent 54%),
    radial-gradient(circle at 50% 52%, rgba(76, 201, 240, 0.12), transparent 0 18%, transparent 48%);
}

body.possession-underdog-boost-activated .underdog-boost-broadcast {
  top: auto;
  bottom: clamp(96px, 23%, 178px);
  z-index: 28;
  display: flex;
  justify-content: center;
  width: min(82%, 860px);
  min-height: clamp(66px, 9vh, 96px);
  border-color: rgba(247, 216, 74, 0.78);
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.22), transparent 0 7%, transparent 8%),
    linear-gradient(90deg, transparent 0 4%, rgba(76, 201, 240, 0.46) 6% 20%, rgba(7, 13, 24, 0.93) 28% 72%, rgba(247, 216, 74, 0.38) 80% 94%, transparent 96%),
    rgba(2, 10, 19, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 42px rgba(76, 201, 240, 0.25),
    0 18px 48px rgba(0, 0, 0, 0.48),
    0 0 72px rgba(76, 201, 240, 0.42),
    0 0 46px rgba(247, 216, 74, 0.28);
  transform: translateX(-50%) translateY(18px) skewX(-7deg) scale(0.92);
  animation: underdogBoostPowerBroadcast 3100ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

body.possession-underdog-boost-activated .underdog-boost-broadcast-copy strong {
  font-size: clamp(1.18rem, 2.4vw, 2.55rem);
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.72),
    0 0 24px rgba(76, 201, 240, 0.72),
    0 0 18px rgba(247, 216, 74, 0.5);
}

body.possession-underdog-boost-activated .underdog-boost-broadcast-ring {
  width: clamp(44px, 5.8vw, 82px);
  box-shadow:
    0 0 28px rgba(76, 201, 240, 0.52),
    0 0 18px rgba(247, 216, 74, 0.36);
  animation-duration: 1450ms;
}

body.possession-underdog-boost-activated .underdog-boost-broadcast-core {
  width: clamp(28px, 3.6vw, 50px);
}

body.penalty-shot-drama::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(0, 0, 0, 0.18) 44%, rgba(0, 0, 0, 0.48) 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 35, 58, 0.32), transparent 34%),
    linear-gradient(90deg, rgba(255, 0, 48, 0.18), transparent 22%, transparent 78%, rgba(255, 0, 48, 0.18));
  mix-blend-mode: screen;
  animation: penaltyScreenFlicker 1180ms steps(5, end) both;
}

#field.field.penalty-variant-warning,
#field.field.penalty-variant-charge,
#field.field.penalty-variant-power {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #ff4747) 54%, #ff1f38 46%);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #ff4747) 36%, #ff6530 64%);
  --penalty-hot-core: #ff2638;
}

#field .ball.penalty-shot {
  filter:
    drop-shadow(0 0 22px rgba(255, 38, 56, 0.92))
    drop-shadow(0 0 42px color-mix(in srgb, var(--shot-team-color, #ff4747) 66%, transparent)) !important;
}

#field .ball.penalty-shot::before {
  inset: -48%;
  background:
    radial-gradient(circle, rgba(255, 38, 56, 0.64), transparent 42%),
    radial-gradient(circle, color-mix(in srgb, var(--shot-team-color, #ff4747) 52%, transparent), transparent 70%);
  box-shadow:
    0 0 42px rgba(255, 38, 56, 0.92),
    0 0 92px rgba(255, 38, 56, 0.52),
    0 0 132px color-mix(in srgb, var(--shot-team-color, #ff4747) 36%, transparent);
  animation: penaltyBallRedAura 960ms ease both;
}

#field .ball.penalty-shot::after {
  width: 330%;
  height: 74%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 20, 44, 0.26) 16%, var(--shot-team-glow) 38%, var(--penalty-hot-core) 58%, #ff8a35 73%, transparent 100%),
    radial-gradient(ellipse at 78% 50%, rgba(255, 38, 56, 0.92), transparent 46%),
    radial-gradient(ellipse at 80% 50%, var(--shot-team-color, #ff4747), transparent 72%);
  box-shadow:
    0 0 42px rgba(255, 38, 56, 0.95),
    0 0 98px rgba(255, 72, 35, 0.72),
    0 0 148px color-mix(in srgb, var(--shot-team-color, #ff4747) 56%, transparent),
    0 0 210px rgba(255, 0, 34, 0.34);
  filter: blur(3.2px) saturate(2.6) brightness(1.64);
  animation-duration: 980ms;
}

#field.field.penalty-variant-charge::before,
#field.field.penalty-variant-power::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.22), transparent 15%),
    radial-gradient(circle at 50% 52%, rgba(255, 28, 56, 0.42), transparent 42%),
    radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--shot-team-color, #ff4747) 34%, transparent), transparent 58%),
    linear-gradient(90deg, rgba(255, 30, 50, 0.16), transparent 24%, transparent 76%, rgba(255, 30, 50, 0.16));
}

#field.field.shot-style-classic {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 74%, transparent);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 64%, white 36%);
}

#field .ball.shot-style-classic::after {
  width: 205%;
  height: 40%;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 86%, transparent),
    0 0 58px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 54%, transparent),
    0 0 94px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 28%, transparent);
  filter: blur(2px) saturate(1.75) brightness(1.28);
}

#field.field.shot-style-power {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 94%, transparent);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 72%, #ff9b32 28%);
}

#field .ball.shot-style-power::after {
  right: 36%;
  width: 330%;
  height: 76%;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, #ff5b2e 34%, transparent) 18%, var(--shot-team-glow) 42%, #ffb02e 62%, var(--shot-team-bright) 78%, transparent 100%),
    radial-gradient(ellipse at 80% 50%, #ff6b2b, transparent 48%),
    radial-gradient(ellipse at 78% 50%, var(--shot-team-color, #5aa7ff), transparent 70%);
  box-shadow:
    0 0 42px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 100%, transparent),
    0 0 96px color-mix(in srgb, #ff6b2b 72%, transparent),
    0 0 148px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 52%, transparent),
    0 0 210px color-mix(in srgb, #ff361e 28%, transparent);
  filter: blur(3.4px) saturate(2.5) brightness(1.66);
  animation-duration: 900ms;
}

#field .ball.shot-style-power::before {
  inset: -42%;
  background:
    radial-gradient(circle, color-mix(in srgb, #ff6b2b 42%, transparent), transparent 42%),
    radial-gradient(circle, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 56%, transparent), transparent 68%);
}

#field .ball.pass.shot-style-curve,
#field .ball.shot.shot-style-curve,
#field .ball.penalty-shot.shot-style-curve {
  animation-name: visualCurveShotRoll;
}

#field .ball.shot-style-curve::after {
  top: 64%;
  right: 28%;
  width: 275%;
  height: 38%;
  border-radius: 92% 12% 82% 18%;
  transform: translateY(-50%) rotate(calc(var(--shot-trail-angle, 0deg) - 22deg)) skewX(-16deg);
  background:
    radial-gradient(ellipse at 72% 28%, color-mix(in srgb, white 22%, var(--shot-team-color, #5aa7ff) 58%), transparent 30%),
    linear-gradient(106deg, transparent 0%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 18%, transparent) 18%, var(--shot-team-glow) 48%, var(--shot-team-bright) 74%, transparent 100%),
    radial-gradient(ellipse at 78% 38%, var(--shot-team-color, #5aa7ff), transparent 70%);
  animation-name: attachedCurveTrail;
  animation-duration: 880ms;
}

#field .ball.shot-style-curve::before {
  inset: -24%;
  transform: translateY(-13%);
}

#field.field.shot-style-flash {
  --shot-team-glow: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 78%, transparent);
  --shot-team-bright: color-mix(in srgb, var(--shot-team-color, #5aa7ff) 58%, white 42%);
}

#field .ball.pass.shot-style-flash,
#field .ball.shot.shot-style-flash,
#field .ball.penalty-shot.shot-style-flash {
  animation-name: visualFlashShotRoll;
  animation-duration: 440ms;
}

#field .ball.shot-style-flash::after {
  right: 30%;
  width: 360%;
  height: 16%;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, white 24%, transparent) 16%, color-mix(in srgb, var(--shot-team-color, #5aa7ff) 62%, white 38%) 44%, white 58%, var(--shot-team-color, #5aa7ff) 74%, transparent 100%);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.8),
    0 0 54px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 76%, transparent),
    0 0 120px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 38%, transparent);
  filter: blur(0.9px) saturate(2) brightness(1.9);
  animation-duration: 440ms;
}

#field .ball.shot-style-flash::before {
  inset: -10%;
  background: radial-gradient(circle, color-mix(in srgb, white 28%, var(--shot-team-color, #5aa7ff) 52%), transparent 62%);
  animation-duration: 440ms;
}

@keyframes attachedBallTrail {
  0% {
    opacity: 0;
    scale: 0.42 0.72;
  }
  24% {
    opacity: 1;
    scale: 0.92 1;
  }
  100% {
    opacity: 0;
    scale: 1.18 0.82;
  }
}

@keyframes attachedBallAura {
  0% {
    opacity: 0;
    scale: 0.82;
  }
  24% {
    opacity: 0.9;
    scale: 1.08;
  }
  100% {
    opacity: 0;
    scale: 1.2;
  }
}

@keyframes penaltyScreenFlicker {
  0% { opacity: 0; filter: brightness(1); }
  8% { opacity: 0.72; filter: brightness(1.45) contrast(1.2); }
  16% { opacity: 0.2; filter: brightness(0.92); }
  28% { opacity: 0.86; filter: brightness(1.62) contrast(1.28); }
  42% { opacity: 0.34; filter: brightness(1.05); }
  66% { opacity: 0.58; filter: brightness(1.22) contrast(1.1); }
  100% { opacity: 0; filter: brightness(1); }
}

@keyframes penaltyBallRedAura {
  0% { opacity: 0; scale: 0.74; }
  18% { opacity: 1; scale: 1.18; }
  56% { opacity: 0.86; scale: 1.08; }
  100% { opacity: 0; scale: 1.34; }
}

@keyframes attachedCurveTrail {
  0% {
    opacity: 0;
    scale: 0.36 0.62;
  }
  28% {
    opacity: 1;
    scale: 0.95 1;
  }
  100% {
    opacity: 0;
    scale: 1.2 0.78;
  }
}

@keyframes visualCurveShotRoll {
  0% { rotate: 0deg; scale: 1; translate: -50% -50%; }
  24% { rotate: 220deg; scale: 1.1; translate: -50% -79%; }
  58% { rotate: 620deg; scale: 1.02; translate: -50% -66%; }
  100% { rotate: 1080deg; scale: 1; translate: -50% -50%; }
}

@keyframes visualFlashShotRoll {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  18% { rotate: 280deg; scale: 1.06; filter: brightness(1.42) saturate(1.18); }
  100% { rotate: 720deg; scale: 1; filter: brightness(1); }
}

@keyframes powershotFieldImpact {
  0% {
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.42),
      0 0 0 color-mix(in srgb, var(--shot-team-color, #5aa7ff) 0%, transparent);
    filter: brightness(1) saturate(1);
  }
  18% {
    box-shadow:
      inset 0 0 172px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 44%, transparent),
      0 28px 76px rgba(0, 0, 0, 0.54),
      0 0 126px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 54%, transparent),
      0 0 170px rgba(247, 216, 74, 0.26);
    filter: brightness(1.16) saturate(1.32);
  }
  54% {
    box-shadow:
      inset 0 0 132px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 30%, transparent),
      0 24px 66px rgba(0, 0, 0, 0.5),
      0 0 96px color-mix(in srgb, var(--shot-team-color, #5aa7ff) 36%, transparent);
    filter: brightness(1.09) saturate(1.18);
  }
  100% {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    filter: brightness(1) saturate(1);
  }
}

@keyframes powershotTrailKick {
  0% { opacity: 0; transform: translateX(-16%) scaleX(0.5); }
  16% { opacity: 1; transform: translateX(-3%) scaleX(1.12); }
  48% { opacity: 0.86; transform: translateX(6%) scaleX(1.32); }
  78% { opacity: 0.52; transform: translateX(12%) scaleX(1.44); }
  100% { opacity: 0; transform: translateX(19%) scaleX(1.58); }
}

@keyframes powershotBroadcastSweep {
  0% {
    opacity: 0;
    transform: translateX(-145%) skewX(-8deg) scale(0.94);
  }
  12% {
    opacity: 1;
    transform: translateX(-52%) skewX(-8deg) scale(1.02);
  }
  82% {
    opacity: 1;
    transform: translateX(-50%) skewX(-8deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(48%) skewX(-8deg) scale(0.96);
  }
}

@keyframes powershotBroadcastGlint {
  0% { opacity: 0; transform: translateX(-120%); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(130%); }
}

@keyframes underdogBoostBroadcastRise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(18px) scale(0.94);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.02);
  }
  78% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-14px) scale(0.98);
  }
}

@keyframes underdogBoostPowerBroadcast {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(26px) skewX(-7deg) scale(0.86);
    filter: saturate(1);
  }
  13% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) skewX(-7deg) scale(1.05);
    filter: saturate(1.25);
  }
  24% {
    transform: translateX(-50%) translateY(0) skewX(-7deg) scale(1);
  }
  76% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) skewX(-7deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-18px) skewX(-7deg) scale(0.94);
    filter: saturate(1.1);
  }
}

@keyframes underdogBoostGlint {
  0% { opacity: 0; transform: translateX(-130%); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(125%); }
}

@keyframes underdogBoostRingPulse {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  24% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 0.58;
    transform: scale(1.18);
  }
}

@keyframes underdogBoostScreenPulse {
  0% { opacity: 0; transform: scale(0.98); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}

@keyframes underdogBoostBadgePulse {
  0% { transform: scale(0.96); }
  26% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pair-score-flash.active-pair-visible.show {
    animation: none !important;
    opacity: 0.9;
    transform: translateY(0) scale(0.88);
  }

  .powershot-broadcast {
    animation: none !important;
    opacity: 1;
    transform: translateX(-50%) skewX(-8deg) scale(1);
  }

  .powershot-broadcast::after {
    animation: none !important;
    opacity: 0;
  }

  .underdog-boost-broadcast {
    animation: none !important;
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }

  .underdog-boost-broadcast::after,
  .underdog-boost-broadcast-ring,
  body.possession-underdog-boost-activated::after,
  body.possession-underdog-boost-used::after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-bg::before,
  .field-bg::after {
    animation: none !important;
    background-position: center !important;
    filter: none !important;
  }

  body.crowd-glow::after,
  body.stadium-surge::after,
  body.cup-shimmer::after,
  body.penalty-pressure::after,
  body.penalty-shot-drama::after,
  body.possession-powershot-fired #field.field.shot-variant-power,
  body.possession-powershot-fired #field.field.shot-variant-power #shotTrail,
  .field.goal-build::before,
  .field.goal-impact,
  .field.goal-flash .field-grade,
  .field.goal-impact .goal-mouth.hit,
  .scoreboard.scoreboard-pop,
  .team-card.scoreboard-pop,
  .field.penalty-charge::before,
  #field .ball.penalty-shot::before,
  body.penalty-pressure .penalty-card,
  .field.word-focus::before,
  .word-display.challenge-focus,
  .word-display.answer-reveal-moment,
  .word-display.answer-reveal-moment::before,
  .word-display.answer-reveal-moment::after,
  .word-display.answer-reveal-moment strong,
  .team-card.trophy-shimmer,
  .scoreboard.trophy-shimmer,
  .trophy-earned,
  .trophy.newly-earned,
  body.round-pressure-active .app::before,
  body.round-pressure-active .app::after,
  body.round-final-attack .app::before,
  body.round-final-attack .app::after,
  .round-timer.is-pressure,
  .round-timer.is-final,
  .event-banner.pressure-tone,
  .event-banner.final-tone,
  .start-intro-overlay,
  .start-intro-overlay::before,
  .start-intro-overlay.is-leaving,
  .start-intro-count.is-stepping,
  .phase-overlay-card,
  .result-screen.final-cinematic::before,
  .result-screen.final-cinematic::after,
  .result-screen.final-cinematic .result-card,
  .result-screen.final-cinematic .champion-panel,
  .season-ceremony-step.is-current-step,
  .season-ceremony-step.opening.is-current-step .season-ceremony-step-hero strong,
  .season-ceremony-reveal-card.is-revealing,
  .season-ceremony-reveal-card.is-revealing::after,
  .season-ceremony-final-card.is-champion-reveal,
  .season-ceremony-final-card.is-champion-reveal::after,
  .season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge,
  .season-ceremony-bonus-card.is-bonus-pop,
  .season-ceremony-bonus-card.is-bonus-pop > strong,
  .season-ceremony-score-team.has-bonus,
  .season-ceremony-score-team.has-bonus .season-ceremony-score-points strong,
  .season-ceremony-final-badge.is-champion-reveal {
    animation: none !important;
  }

  .season-ceremony-step.is-current-step,
  .season-ceremony-step.opening.is-current-step .season-ceremony-step-hero strong,
  .season-ceremony-reveal-card.is-revealing,
  .season-ceremony-final-card.is-champion-reveal,
  .season-ceremony-reveal-card .season-award-badge-stack .season-award-winner-badge,
  .season-ceremony-bonus-card.is-bonus-pop,
  .season-ceremony-score-team.has-bonus,
  .season-ceremony-final-badge.is-champion-reveal {
    transform: none !important;
    filter: none !important;
  }

  .season-ceremony-reveal-card.is-revealing::after,
  .season-ceremony-final-card.is-champion-reveal::after {
    display: none !important;
  }

  .start-intro-overlay {
    opacity: 1;
  }

  .start-intro-overlay.is-leaving {
    opacity: 0;
  }
}

@keyframes ballSpin {
  0% { rotate: 0deg; scale: 1; }
  42% { rotate: 190deg; scale: 1.1; }
  100% { rotate: 360deg; scale: 1; }
}

@keyframes ballShot {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  34% { rotate: 330deg; scale: 1.18; filter: brightness(1.16); }
  70% { rotate: 770deg; scale: 0.92; filter: brightness(1.04); }
  100% { rotate: 1080deg; scale: 1; filter: brightness(1); }
}

@keyframes ballShotArc {
  0% { rotate: 0deg; scale: 1; translate: -50% -50%; }
  32% { rotate: 260deg; scale: 1.18; translate: -50% -73%; }
  68% { rotate: 680deg; scale: 0.96; translate: -50% -62%; }
  100% { rotate: 1080deg; scale: 1; translate: -50% -50%; }
}

@keyframes ballShotLow {
  0% { rotate: 0deg; scale: 1; translate: -50% -50%; }
  38% { rotate: 360deg; scale: 1.08; translate: -50% -34%; }
  100% { rotate: 720deg; scale: 1; translate: -50% -50%; }
}

@keyframes ballShotPower {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  20% { rotate: 180deg; scale: 1.42; filter: brightness(1.42) saturate(1.14); }
  56% { rotate: 870deg; scale: 0.82; filter: brightness(1.22); }
  100% { rotate: 1440deg; scale: 1; filter: brightness(1); }
}

@keyframes ballShotQuick {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  34% { rotate: 310deg; scale: 1.12; filter: brightness(1.2); }
  100% { rotate: 720deg; scale: 1; filter: brightness(1); }
}

@keyframes penaltyBallShot {
  0% { rotate: 0deg; scale: 1; filter: brightness(1); }
  18% { rotate: -40deg; scale: 0.76; filter: brightness(1.45) saturate(1.34); }
  44% { rotate: 520deg; scale: 1.32; filter: brightness(1.32) saturate(1.24); }
  100% { rotate: 1440deg; scale: 1; filter: brightness(1) saturate(1); }
}

@keyframes ballShadowPass {
  0%, 100% { scale: 1; opacity: 0.84; }
  48% { scale: 1.16 0.82; opacity: 0.7; }
}

@keyframes ballShadowShot {
  0% { scale: 1; opacity: 0.84; filter: blur(5px); }
  42% { scale: 1.52 0.72; opacity: 0.64; filter: blur(7px); }
  100% { scale: 0.72 0.54; opacity: 0.52; filter: blur(4px); }
}

@keyframes ballShadowLow {
  0% { scale: 1; opacity: 0.86; }
  52% { scale: 1.72 0.56; opacity: 0.72; }
  100% { scale: 1.08 0.46; opacity: 0.6; }
}

@keyframes ballShadowPower {
  0% { scale: 1; opacity: 0.86; filter: blur(5px); }
  32% { scale: 2.05 0.64; opacity: 0.76; filter: blur(8px); }
  100% { scale: 0.72 0.5; opacity: 0.46; filter: blur(5px); }
}

@keyframes shotTrailStraight {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.18) skewX(-12deg); }
  28% { opacity: 0.84; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.12) skewX(-12deg); }
}

@keyframes shotTrailArc {
  0% { opacity: 0; transform: translate(-50%, -18%) scaleX(0.18) skewX(-18deg); }
  36% { opacity: 0.82; transform: translate(-50%, -64%) scaleX(0.86) skewX(-18deg); }
  100% { opacity: 0; transform: translate(-50%, -38%) scaleX(1.05) skewX(-18deg); }
}

@keyframes shotTrailLow {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.26) skewX(-8deg); }
  34% { opacity: 0.74; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.18) skewX(-8deg); }
}

@keyframes shotTrailPower {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.14) skewX(-14deg); }
  22% { opacity: 0.96; filter: blur(2px) brightness(1.25); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.28) skewX(-14deg); }
}

@keyframes shotTrailQuick {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.24) skewX(-9deg); }
  36% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.94) skewX(-9deg); }
}

@keyframes penaltyTrailCharge {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.14) skewX(-18deg); }
  24% { opacity: 0.98; filter: blur(2px) brightness(1.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.24) skewX(-18deg); }
}

@keyframes penaltyTrailPower {
  0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0.16) skewX(-18deg); }
  18% { opacity: 1; filter: blur(2px) brightness(1.5); }
  62% { opacity: 0.82; transform: translate(-50%, -50%) scaleX(1.35) skewX(-18deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1.55) skewX(-18deg); }
}

@keyframes flash {
  0% { opacity: 0; }
  12% { opacity: 0.95; }
  42% { opacity: 0.34; }
  100% { opacity: 0; }
}

@keyframes penaltyFlash {
  0% { opacity: 0; }
  12% { opacity: 0.42; }
  42% { opacity: 0.18; }
  100% { opacity: 0; }
}

@keyframes wordBannerSettle {
  0% { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Desktop viewport fit: keep gameplay visible when browser chrome reduces height. */
@media (min-width: 981px) {
  :root {
    --shot-ball-size: clamp(58px, min(5.4vw, 8.8dvh), 92px);
  }

  html,
  body {
    height: 100%;
    min-height: 100%;
  }

  .app {
    grid-template-rows: clamp(146px, 17.5dvh, 172px) minmax(0, 1fr) clamp(118px, 14dvh, 136px);
    height: 100vh;
    max-height: 100vh;
    gap: clamp(8px, 1.1dvh, 12px);
    padding: clamp(10px, 1.4dvh, 16px) clamp(14px, 1.4vw, 20px) clamp(10px, 1.5dvh, 18px);
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    .app {
      height: 100dvh;
      max-height: 100dvh;
    }
  }

  .scoreboard,
  .stage,
  .controls,
  .team-card,
  .duel-card,
  .action-panel,
  .middle-panel {
    min-height: 0;
  }

  .scoreboard {
    grid-template-columns: minmax(230px, 0.9fr) minmax(360px, 1.6fr) minmax(230px, 0.9fr);
    gap: clamp(8px, 0.9vw, 12px);
    overflow: visible;
  }

  .team-card {
    padding: clamp(10px, 1.2dvh, 14px) clamp(10px, 1vw, 14px) clamp(8px, 1dvh, 12px);
  }

  .scoreboard > .team-card {
    --scoreboard-trophy-lane: clamp(154px, 37%, 184px);
    --trophy-empty-size: clamp(34px, 3.6dvh, 42px);
    --trophy-earned-size: clamp(40px, 4.4dvh, 50px);
  }

  .scoreboard > .team-card .trophy-row {
    top: 8px;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: clamp(7px, 0.6vw, 10px);
    width: max-content;
    max-width: none;
  }

  .scoreboard > .team-card.team-a .trophy-row {
    left: 14px;
    right: auto;
    justify-content: flex-start;
  }

  .scoreboard > .team-card.team-b .trophy-row {
    left: auto;
    right: 14px;
    justify-content: flex-end;
  }

  .scoreboard > .team-card .team-label,
  .team-label {
    font-size: clamp(12px, 0.9vw, 16px);
  }

  .score-row {
    margin-top: clamp(14px, 2dvh, 24px);
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .scoreboard > .team-card .score-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
  }

  .scoreboard > .team-card .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
    grid-template-columns: 38px minmax(0, 1fr) clamp(82px, min(7.6vw, 10.4dvh), 112px) 38px;
    gap: clamp(7px, 0.8vw, 10px);
  }

  .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
    grid-template-columns: 38px clamp(82px, min(7.6vw, 10.4dvh), 112px) minmax(0, 1fr) 38px;
  }

  .score-row strong {
    font-size: clamp(34px, min(4vw, 5.6dvh), 62px);
  }

  .gameplay-season-badge-primary {
    width: clamp(80px, min(7vw, 9.8dvh), 106px);
    height: clamp(80px, min(7vw, 9.8dvh), 106px);
  }

  .score-adjust {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .duel-card {
    padding: clamp(8px, 1dvh, 11px) clamp(12px, 1.4vw, 18px);
  }

  .duel-meta {
    gap: 6px;
  }

  .level-badge,
  .cup-badge,
  .match-clock {
    min-height: 24px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .round-timer {
    min-width: 168px;
    padding: 5px 10px 6px;
  }

  .round-timer strong {
    font-size: clamp(18px, min(1.5vw, 3dvh), 27px);
  }

  .round-timer-status {
    margin-top: 2px;
    font-size: clamp(9px, 0.7vw, 12px);
  }

  .duel-line {
    margin-top: clamp(4px, 0.6dvh, 7px);
    gap: clamp(8px, 1vw, 12px);
    font-size: clamp(23px, min(2vw, 3.8dvh), 38px);
  }

  .duel-line span {
    min-height: clamp(34px, 4.4dvh, 44px);
  }

  .duel-line b {
    min-width: clamp(54px, 4.6vw, 68px);
    height: clamp(32px, 4.2dvh, 40px);
  }

  .active-duel-row {
    gap: 8px;
    margin-top: clamp(5px, 0.7dvh, 8px);
  }

  .active-side,
  .active-participant {
    min-height: clamp(26px, 3.4dvh, 34px);
    padding: 5px 10px;
  }

  .active-side strong,
  .active-participant strong {
    font-size: clamp(15px, min(1.15vw, 2.4dvh), 21px);
  }

  .stage {
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    place-items: center;
    padding: 0 clamp(12px, 2.2vw, 42px);
  }

  .field {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: min(100%, calc(100dvh - 306px));
  }

  #field .ball {
    width: var(--shot-ball-size);
    height: var(--shot-ball-size);
  }

  .controls {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr) minmax(0, 1fr);
    gap: clamp(8px, 0.9vw, 12px);
    padding: clamp(8px, 1dvh, 10px);
  }

  .action-panel {
    gap: clamp(6px, 0.8dvh, 8px);
    padding: clamp(7px, 0.9dvh, 9px);
  }

  .action-title {
    min-height: 18px;
    font-size: clamp(12px, 0.88vw, 16px);
  }

  .action {
    min-height: clamp(66px, 8.3dvh, 78px);
    padding: 7px;
  }

  .action span {
    font-size: clamp(12px, 0.88vw, 15px);
  }

  .action strong {
    font-size: clamp(21px, min(1.75vw, 3.4dvh), 32px);
  }

  .middle-panel {
    gap: 6px;
  }

  .tool {
    min-height: 0;
    padding: clamp(6px, 0.8dvh, 8px) 10px;
    font-size: clamp(12px, 0.82vw, 15px);
    line-height: 1.05;
  }
}

/* Main gameplay glass pass: lighter panels so the outer stadium ambience stays visible. */
body::before {
  opacity: 0.36;
}

body::after {
  opacity: 0.58;
  background:
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--mode-accent) 12%, transparent), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.34), transparent 60%);
}

.app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(104deg, transparent 16%, rgba(255, 255, 255, 0.055) 48%, transparent 72%),
    radial-gradient(ellipse at 14% 4%, rgba(76, 201, 240, 0.12), transparent 30%),
    radial-gradient(ellipse at 86% 5%, rgba(247, 216, 74, 0.09), transparent 30%);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.scoreboard,
.stage,
.controls {
  position: relative;
  z-index: 1;
}

.scoreboard > .team-card,
.duel-card,
.controls {
  border-color: color-mix(in srgb, var(--mode-accent) 24%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.022) 34%, transparent 76%),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mode-accent) 15%, transparent), transparent 62%),
    rgba(3, 12, 22, 0.56);
  box-shadow:
    0 20px 62px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 26px color-mix(in srgb, var(--mode-accent) 7%, transparent);
  backdrop-filter: blur(9px) saturate(1.12);
}

.duel-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.125), transparent 34%),
    radial-gradient(ellipse at 50% 34%, color-mix(in srgb, var(--mode-accent) 22%, transparent), transparent 70%),
    rgba(3, 12, 22, 0.62);
}

.scoreboard > .team-card .score-row strong {
  color: rgba(255, 255, 255, 0.96);
  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.24),
    0 0 22px color-mix(in srgb, var(--mode-accent) 28%, transparent),
    0 0 38px rgba(247, 216, 74, 0.08);
}

.score-adjust,
.controls .tool,
.controls .mode-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.035)),
    rgba(3, 13, 24, 0.44);
  color: rgba(239, 249, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 22px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(7px) saturate(1.08);
}

.controls .tool.primary,
.controls .mode-toggle {
  border-color: rgba(247, 216, 74, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 245, 180, 0.34), rgba(247, 216, 74, 0.2) 56%, rgba(90, 63, 7, 0.18)),
    rgba(4, 13, 24, 0.52);
  color: #fff3a6;
  text-shadow: 0 0 14px rgba(247, 216, 74, 0.24);
}

.controls .tool.subtle {
  border-color: rgba(76, 201, 240, 0.22);
  color: #ccefff;
  background:
    linear-gradient(180deg, rgba(76, 201, 240, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(3, 13, 24, 0.48);
}

.action-panel {
  border-color: rgba(255, 255, 255, 0.105);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), transparent 46%),
    rgba(3, 13, 24, 0.44);
  backdrop-filter: blur(7px) saturate(1.08);
}

.controls .action,
.penalty-actions .action {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(8px) saturate(1.1);
}

.controls .action.good,
.penalty-actions .action.good {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 48%),
    linear-gradient(135deg, rgba(59, 218, 132, 0.62), rgba(11, 81, 54, 0.6)),
    rgba(3, 13, 24, 0.5);
}

.controls .action.bad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 48%),
    linear-gradient(135deg, rgba(255, 91, 105, 0.58), rgba(90, 21, 34, 0.64)),
    rgba(3, 13, 24, 0.5);
}

.penalty-actions .action.bad {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(135deg, rgba(255, 91, 105, 0.76), rgba(90, 21, 34, 0.78)),
    rgba(3, 13, 24, 0.52);
}

.penalty-actions .action.neutral {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 48%),
    linear-gradient(135deg, rgba(107, 137, 171, 0.48), rgba(20, 34, 52, 0.66)),
    rgba(3, 13, 24, 0.52);
}

.controls .action strong,
.penalty-actions .action strong {
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.28),
    0 0 18px rgba(255, 255, 255, 0.16);
}

.penalty-actions .action:disabled,
.penalty-actions .action[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%),
    linear-gradient(135deg, rgba(93, 108, 124, 0.34), rgba(25, 34, 45, 0.68)),
    rgba(3, 13, 24, 0.62);
  color: rgba(218, 228, 236, 0.48);
  cursor: not-allowed;
  filter: grayscale(0.86) saturate(0.52);
  opacity: 0.56;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.penalty-actions .action:disabled strong,
.penalty-actions .action[aria-disabled="true"] strong,
.penalty-actions .action:disabled span,
.penalty-actions .action[aria-disabled="true"] span {
  color: rgba(218, 228, 236, 0.54);
  text-shadow: none;
}

.penalty {
  background:
    linear-gradient(180deg, rgba(1, 7, 13, 0.26), rgba(1, 7, 13, 0.5)),
    radial-gradient(circle at 50% 50%, rgba(255, 58, 83, 0.12), transparent 34%),
    url("assets/kids/stadien/vocab_penalty_backdrop_1672x941.jpg") center / cover no-repeat,
    rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(5px) saturate(1.06);
}

.penalty-card {
  border-color: rgba(255, 83, 104, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
    radial-gradient(ellipse at 50% 50%, rgba(5, 15, 28, 0.2), rgba(0, 0, 0, 0.5) 80%),
    url("assets/kids/stadien/vocab_penalty_backdrop_1672x941.jpg") center 58% / cover no-repeat,
    rgba(5, 12, 22, 0.52);
  box-shadow:
    inset 0 0 58px rgba(255, 58, 83, 0.08),
    inset 0 -72px 118px rgba(0, 0, 0, 0.44),
    0 28px 92px rgba(255, 58, 83, 0.13),
    0 24px 72px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(8px) saturate(1.08);
}

.penalty-card::before {
  opacity: 0.72;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 233, 166, 0.13), transparent 34%),
    radial-gradient(ellipse at 50% 92%, rgba(116, 255, 170, 0.055), transparent 28%),
    linear-gradient(115deg, transparent 0 40%, rgba(255, 255, 255, 0.06) 48%, transparent 58% 100%);
}

body.penalty-pressure::after {
  background:
    radial-gradient(circle at 50% 52%, transparent 0 28%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0.28) 100%),
    radial-gradient(circle at 50% 20%, rgba(255, 74, 94, 0.06), transparent 40%);
}

body.penalty-pressure .scoreboard,
body.penalty-pressure .controls {
  filter: brightness(0.94) saturate(0.96);
}

/* Final setup polish: lighter glass, quieter text, and seasonal tone accents. */
body.setup-arena-kickoff { --season-setup-tone: #f7d84a; --season-setup-tone-soft: rgba(247, 216, 74, 0.16); --season-setup-tone-cool: rgba(80, 214, 255, 0.11); }
body.setup-arena-autumn { --season-setup-tone: #f2a14a; --season-setup-tone-soft: rgba(242, 161, 74, 0.18); --season-setup-tone-cool: rgba(138, 73, 34, 0.12); }
body.setup-arena-winter { --season-setup-tone: #9ee8ff; --season-setup-tone-soft: rgba(158, 232, 255, 0.2); --season-setup-tone-cool: rgba(198, 228, 255, 0.15); }
body.setup-arena-spring { --season-setup-tone: #92f0b4; --season-setup-tone-soft: rgba(146, 240, 180, 0.18); --season-setup-tone-cool: rgba(255, 177, 218, 0.12); }
body.setup-arena-summer { --season-setup-tone: #ffe06b; --season-setup-tone-soft: rgba(255, 224, 107, 0.17); --season-setup-tone-cool: rgba(255, 119, 77, 0.12); }
body.setup-arena-final,
body.setup-arena-champions { --season-setup-tone: #ffe98b; --season-setup-tone-soft: rgba(255, 233, 139, 0.18); --season-setup-tone-cool: rgba(97, 238, 214, 0.13); }
body.setup-arena-skyline,
body.setup-arena-alpine,
body.setup-arena-global { --season-setup-tone: var(--mode-accent); --season-setup-tone-soft: rgba(76, 201, 240, 0.14); --season-setup-tone-cool: rgba(97, 238, 214, 0.1); }

.setup {
  background:
    linear-gradient(180deg, rgba(2, 8, 16, 0.2), rgba(1, 5, 10, 0.42)),
    radial-gradient(circle at 18% 8%, var(--season-setup-tone-soft, rgba(76, 201, 240, 0.14)), transparent 34%),
    radial-gradient(circle at 86% 6%, var(--season-setup-tone-cool, rgba(97, 238, 214, 0.1)), transparent 38%),
    var(--setup-arena-preview-background) center / cover no-repeat,
    linear-gradient(180deg, rgba(2, 8, 16, 0.9), rgba(1, 5, 10, 0.94));
}

.setup-card {
  border-color: color-mix(in srgb, var(--season-setup-tone, var(--mode-accent)) 34%, rgba(255, 255, 255, 0.22));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.115), transparent 24%),
    radial-gradient(ellipse at 18% 0%, var(--season-setup-tone-soft, rgba(115, 232, 255, 0.14)), transparent 42%),
    radial-gradient(ellipse at 82% 4%, rgba(255, 255, 255, 0.08), transparent 38%),
    linear-gradient(135deg, rgba(8, 28, 48, 0.62), rgba(3, 10, 20, 0.56));
  backdrop-filter: blur(4px) saturate(1.2);
}

.setup-title-with-help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.smart-import-note,
.vocab-hint {
  display: none;
}

.vocabulary-banks,
.bank-controls,
.bank-editor-top,
.bank-item-form,
.smart-import-panel,
.smart-import-table-wrap,
.legacy-vocabulary-inputs,
.active-preview-card {
  border-color: color-mix(in srgb, var(--season-setup-tone, var(--mode-accent)) 20%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), transparent 34%),
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.055), transparent 36%),
    rgba(2, 9, 18, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 32px rgba(0, 0, 0, 0.18);
}

.vocabulary-banks,
.smart-import-panel,
.legacy-vocabulary-inputs {
  position: relative;
  overflow: hidden;
}

.vocabulary-banks::after,
.smart-import-panel::after,
.legacy-vocabulary-inputs::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -45%;
  width: 36%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-14deg);
}

.bank-section-header {
  align-items: center;
}

.bank-file-actions {
  max-width: 360px;
}

.legacy-vocabulary-inputs summary,
.level-input span,
.text-setting > span,
.number-setting > span,
.color-setting > span,
.smart-import-table th {
  font-weight: 760;
  letter-spacing: 0.03em;
}

.level-input span,
.text-setting > span,
.number-setting > span,
.color-setting > span {
  font-size: 12px;
  white-space: nowrap;
}

.bank-controls,
.bank-editor-top,
.bank-item-form {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 8px;
}

.smart-import-panel {
  border-radius: 10px;
  padding: 16px;
}

.smart-import-paste textarea,
.level-input textarea,
.text-setting input,
.text-setting select {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 44%),
    rgba(2, 9, 18, 0.46);
}

.smart-import-paste textarea {
  min-height: 150px;
  font-weight: 650;
}

.smart-import-table {
  font-size: 12px;
}

.smart-import-table th,
.smart-import-table td {
  padding: 9px 10px;
}

.smart-import-table th {
  color: color-mix(in srgb, var(--season-setup-tone, var(--mode-accent)) 42%, #ffffff);
}

.bank-item {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 42%),
    rgba(255, 255, 255, 0.035);
}

.bank-item-word {
  font-weight: 760;
}

/* Follow-up polish: slimmer import controls and unclipped setup tooltips. */
.setup-heading-with-help {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.setup-help {
  z-index: 80;
}

.setup-help::after {
  z-index: 90;
  width: min(340px, 78vw);
  max-width: calc(100vw - 48px);
  font-weight: 720;
}

.setup-help::before {
  z-index: 89;
}

.vocabulary-banks,
.smart-import-panel,
.legacy-vocabulary-inputs {
  overflow: visible;
}

.smart-import-header {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  align-items: center;
}

.smart-import-level {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr);
  align-items: center;
  column-gap: 14px;
  min-height: 54px;
  padding: 10px 12px;
}

.smart-import-level > span {
  margin: 0;
  line-height: 1.15;
}

.smart-import-level select {
  min-height: 38px;
  font-size: 18px;
  font-weight: 760;
}

.bank-item-form {
  grid-template-columns: minmax(220px, 1.4fr) minmax(260px, 1.55fr) 116px 112px 82px;
}

.bank-item-form .tool {
  padding-inline: 10px;
  font-size: 10px;
}

.setup-layer-header .setup-heading-with-help {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bank-item-form {
  grid-template-columns: minmax(240px, 1.45fr) minmax(300px, 1.65fr) minmax(150px, 0.45fr) 108px 78px;
}

.level-select-setting select {
  min-width: 128px;
  font-size: 17px;
}

.bank-item-form .tool {
  justify-self: end;
  width: 100%;
}

.ball-visual-settings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ball-style-option {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  min-height: 104px;
  justify-content: start;
  text-align: left;
}

.ball-style-preview {
  width: 64px;
}

.ball-style-option > span:not(.ball-style-preview) {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.1;
}

.device-performance-settings {
  grid-template-columns: minmax(0, 1fr);
}

.performance-mode-toggle {
  grid-template-columns: 26px minmax(0, auto) minmax(260px, 1fr);
}

.performance-mode-toggle small {
  color: rgba(213, 232, 247, 0.72);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
  text-transform: none;
}

body.performance-mode {
  --shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  --shadow-raised: 0 16px 38px rgba(0, 0, 0, 0.38);
  transition-duration: 120ms;
}

body.performance-mode *,
body.performance-mode *::before,
body.performance-mode *::after {
  transition-duration: 90ms !important;
}

body.performance-mode::before {
  opacity: 0.2;
  background: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 38%);
}

body.performance-mode .field-bg::before,
body.performance-mode .field-bg::after,
body.performance-mode body.crowd-glow::after,
body.performance-mode body.stadium-surge::after,
body.performance-mode body.cup-shimmer::after,
body.performance-mode body.penalty-pressure::after,
body.performance-mode body.penalty-shot-drama::after,
body.performance-mode.crowd-glow::after,
body.performance-mode.stadium-surge::after,
body.performance-mode.cup-shimmer::after,
body.performance-mode.penalty-pressure::after,
body.performance-mode.penalty-shot-drama::after,
body.performance-mode .team-card:hover::after,
body.performance-mode .duel-card:hover::after,
body.performance-mode .controls:hover::after,
body.performance-mode .trophy-earned,
body.performance-mode .trophy.newly-earned,
body.performance-mode .mode-medal.won,
body.performance-mode .event-banner.pressure-tone,
body.performance-mode .event-banner.final-tone,
body.performance-mode .event-banner.penalty-tone,
body.performance-mode .round-timer.is-pressure,
body.performance-mode .round-timer.is-final,
body.performance-mode .field.penalty-focus,
body.performance-mode .field.penalty-charge::before,
body.performance-mode .field.goal-build::before,
body.performance-mode .field.goal-impact,
body.performance-mode .field.goal-flash .field-grade,
body.performance-mode .field.word-focus::before,
body.performance-mode .word-display.challenge-focus,
body.performance-mode .word-display.answer-reveal-moment,
body.performance-mode .word-display.answer-reveal-moment::before,
body.performance-mode .word-display.answer-reveal-moment::after,
body.performance-mode .word-display.answer-reveal-moment strong,
body.performance-mode .start-intro-overlay::before,
body.performance-mode .start-intro-overlay::after,
body.performance-mode .phase-overlay-card,
body.performance-mode .result-screen.final-cinematic::before,
body.performance-mode .result-screen.final-cinematic::after,
body.performance-mode .result-screen.final-cinematic .result-card,
body.performance-mode .result-screen.final-cinematic .champion-panel,
body.performance-mode .season-ceremony-step.is-current-step,
body.performance-mode .season-ceremony-reveal-card.is-revealing,
body.performance-mode .season-ceremony-reveal-card.is-revealing::after,
body.performance-mode .season-ceremony-final-card.is-champion-reveal,
body.performance-mode .season-ceremony-final-card.is-champion-reveal::after,
body.performance-mode .season-ceremony-bonus-card.is-bonus-pop,
body.performance-mode .season-ceremony-score-team.has-bonus,
body.performance-mode .season-ceremony-final-badge.is-champion-reveal {
  animation: none !important;
}

body.performance-mode .team-card,
body.performance-mode .duel-card,
body.performance-mode .controls,
body.performance-mode .penalty-card,
body.performance-mode .setup-card,
body.performance-mode .result-card,
body.performance-mode .phase-overlay-card,
body.performance-mode .season-full-hub,
body.performance-mode .season-ceremony-modal,
body.performance-mode .season-awards-modal,
body.performance-mode .season-match-settings-modal {
  box-shadow: var(--shadow) !important;
  backdrop-filter: none !important;
}

body.performance-mode .setup,
body.performance-mode .penalty,
body.performance-mode .result-screen,
body.performance-mode .phase-overlay,
body.performance-mode .season-ceremony-modal-backdrop,
body.performance-mode .season-awards-modal-backdrop,
body.performance-mode .season-match-settings-backdrop {
  backdrop-filter: none !important;
}

body.performance-mode .zone-dot,
body.performance-mode .zone-dot.active,
body.performance-mode .event-banner,
body.performance-mode .word-display,
body.performance-mode .field-season-duel-side,
body.performance-mode .round-timer,
body.performance-mode .pair-score-flash,
body.performance-mode .powershot-broadcast,
body.performance-mode .champion-panel,
body.performance-mode .season-ceremony-reveal-card,
body.performance-mode .season-ceremony-final-card,
body.performance-mode .season-ceremony-score-team,
body.performance-mode .season-ceremony-bonus-card {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.performance-mode .ball {
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  transition:
    left 360ms ease,
    top 360ms ease,
    scale 160ms ease !important;
}

body.performance-mode #field .ball.pass,
body.performance-mode #field .ball.shot,
body.performance-mode #field .ball.penalty-shot {
  animation: ballSpin 360ms ease !important;
  filter: none !important;
}

body.performance-mode #shotTrail,
body.performance-mode #ballShadow {
  display: none !important;
  animation: none !important;
}

body.performance-mode #field .ball.pass::before,
body.performance-mode #field .ball.shot::before,
body.performance-mode #field .ball.penalty-shot::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.performance-mode #field .ball.pass::after,
body.performance-mode #field .ball.shot::after,
body.performance-mode #field .ball.penalty-shot::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.performance-mode #field.field.shot-variant-straight,
body.performance-mode #field.field.shot-variant-arc,
body.performance-mode #field.field.shot-variant-low,
body.performance-mode #field.field.shot-variant-power,
body.performance-mode #field.field.shot-variant-quick,
body.performance-mode #field.field.penalty-variant-warning,
body.performance-mode #field.field.penalty-variant-charge,
body.performance-mode #field.field.penalty-variant-power,
body.performance-mode #field.field.goal-impact {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42) !important;
}

body.performance-mode.possession-powershot-fired #field.field.shot-variant-power {
  animation: none !important;
  filter: none !important;
}

body.performance-mode .powershot-broadcast,
body.performance-mode .powershot-broadcast::after {
  animation-duration: 2400ms !important;
}

body.performance-mode .field::before,
body.performance-mode .field::after,
body.performance-mode .field-grade,
body.performance-mode .flash {
  filter: none !important;
}

body.performance-mode .field-bg {
  filter: none !important;
}

body.performance-mode .result-screen.final-cinematic .champion-panel::before,
body.performance-mode .result-screen.final-cinematic .champion-panel::after,
body.performance-mode .season-ceremony-reveal-card.is-revealing::after,
body.performance-mode .season-ceremony-final-card.is-champion-reveal::after,
body.performance-mode .vocabulary-banks::after,
body.performance-mode .smart-import-panel::after,
body.performance-mode .legacy-vocabulary-inputs::after {
  display: none !important;
}

.tablet-orientation-note {
  display: none;
}

/* Tablet fit pass: landscape keeps the desktop composition but restores touch targets and scrollable overlays. */
@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape) {
  body {
    min-width: 0;
  }

  .app {
    grid-template-rows: clamp(136px, 17dvh, 150px) minmax(0, 1fr) clamp(132px, 17dvh, 148px);
    gap: clamp(8px, 1dvh, 11px);
    padding: clamp(10px, 1.2dvh, 14px) clamp(12px, 1.5vw, 18px);
  }

  .scoreboard {
    grid-template-columns: minmax(220px, 0.88fr) minmax(340px, 1.56fr) minmax(220px, 0.88fr);
  }

  .score-row,
  .scoreboard > .team-card .score-row {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
  }

  .scoreboard > .team-card .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
    grid-template-columns: 44px minmax(0, 1fr) clamp(62px, 7dvh, 78px) 44px;
  }

  .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot:not([hidden])) {
    grid-template-columns: 44px clamp(62px, 7dvh, 78px) minmax(0, 1fr) 44px;
  }

  .score-adjust {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .stage {
    padding-inline: clamp(8px, 1.4vw, 24px);
  }

  .field {
    max-height: min(100%, calc(100dvh - 322px));
  }

  .controls {
    grid-template-columns: minmax(0, 1fr) minmax(324px, 0.82fr) minmax(0, 1fr);
    gap: clamp(8px, 1vw, 12px);
    padding: 9px;
  }

  .action-panel {
    gap: 8px;
  }

  .action {
    min-height: clamp(70px, 8.8dvh, 82px);
  }

  .middle-panel {
    gap: 8px;
  }

  .tool,
  .controls .tool,
  .season-start-command-actions .tool,
  .season-hub-actions .tool,
  .season-hub-future-actions .tool,
  .season-result-actions .tool,
  .season-pair-modal-actions .tool,
  .season-ceremony-control-buttons .tool {
    min-height: 44px;
    padding: 8px 10px;
  }

  .setup-help {
    width: 34px;
    height: 34px;
  }

  .setup {
    align-items: start;
    overflow: hidden;
    padding: clamp(10px, 2dvh, 18px);
  }

  .setup-card {
    width: min(1120px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: clamp(18px, 2.2vw, 28px);
    scroll-padding: 18px;
  }

  .setup-card h1 {
    margin-bottom: 10px;
    font-size: clamp(36px, 4.2dvh, 52px);
  }

  .setup-hint {
    margin-bottom: 12px;
  }

  .setup-dashboard {
    gap: 10px;
    margin: 14px 0 12px;
  }

  .setup-dashboard-card {
    min-height: 112px;
    padding: 13px;
  }

  .setup-dashboard-actions {
    margin-bottom: 14px;
  }

  .setup-dashboard-actions .tool {
    min-height: 54px;
    font-size: clamp(18px, 2.5dvh, 24px);
  }

  .setup-layer-header {
    gap: 8px;
  }

  .timer-setup,
.bank-controls,
.bank-editor-top,
.bank-item-form,
.bulk-paste-panel,
.smart-import-actions {
    gap: 10px;
  }

  .level-input textarea,
  .smart-import-paste textarea {
    max-height: 34dvh;
  }

  .penalty,
  .result-screen,
  .phase-overlay,
  .season-pair-modal-backdrop,
  .season-match-settings-modal-backdrop,
  .season-awards-modal-backdrop,
  .season-mvp-modal-backdrop,
  .season-ceremony-modal-backdrop {
    overflow: auto;
    padding: 12px;
  }

  .penalty-card,
  .result-card,
  .phase-overlay-card,
  .season-pair-modal,
  .season-match-settings-modal,
  .season-awards-modal,
  .season-mvp-modal,
  .season-ceremony-modal {
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .penalty-card {
    width: min(760px, calc(100vw - 24px));
    padding: clamp(18px, 2.6dvh, 26px);
  }

  .penalty-actions {
    gap: 12px;
  }

  .penalty-actions .action {
    min-height: 76px;
  }

  .result-card {
    width: min(900px, calc(100vw - 24px));
    padding: clamp(20px, 3dvh, 30px);
  }

  .season-hub-screen {
    overflow: auto;
    padding: 12px;
  }

  .season-hub-screen-panel,
  .season-full-hub {
    min-height: 0;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .season-full-hub {
    padding: clamp(14px, 2vw, 22px);
  }

  .season-full-pair-count,
  .season-mvp-details-button {
    min-height: 44px;
  }

  .season-start-command {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .season-start-command-copy {
    display: grid;
    gap: 6px;
  }

  .season-match-settings-modal,
  .season-awards-modal,
  .season-mvp-modal {
    width: min(940px, calc(100vw - 24px));
  }

  .season-ceremony-modal {
    width: min(1120px, calc(100vw - 24px));
    height: auto;
  }

  .season-awards-modal-header h3,
  .season-mvp-modal-header h3,
  .season-match-settings-modal-header h3,
  .season-ceremony-modal-header h3 {
    font-size: clamp(28px, 4dvh, 42px);
  }
}

@media (pointer: coarse) and (min-width: 760px) and (max-width: 1180px) {
  button,
  .tool,
  .setup-dashboard-card,
  .season-full-pair-count,
  .season-awards-preview-card,
  .season-ceremony-entry-card,
  .season-team-mvp-card,
  .season-mvp-overall-card,
  label {
    touch-action: manipulation;
  }

  .tool,
  .setup .tool,
  .season-hub-screen .tool,
  .season-match-settings-modal .tool,
  .season-awards-modal .tool,
  .season-mvp-modal .tool,
  .season-ceremony-modal .tool,
  input,
  select {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }

  .setup-help {
    width: 34px;
    height: 34px;
  }
}

@media (hover: none) and (min-width: 760px) and (max-width: 1180px) {
  .team-card:hover::after,
  .duel-card:hover::after,
  .controls:hover::after,
  .setup-dashboard-card:hover,
  .season-awards-preview-card:hover {
    animation: none;
    transform: none;
  }
}

@media (min-width: 700px) and (max-width: 980px) and (orientation: portrait) {
  body {
    min-width: 0;
    overflow: hidden;
  }

  .app,
  .setup,
  .penalty,
  .result-screen,
  .phase-overlay,
  .season-hub-screen,
  .season-pair-modal-backdrop,
  .season-match-settings-modal-backdrop,
  .season-awards-modal-backdrop,
  .season-mvp-modal-backdrop,
  .season-ceremony-modal-backdrop {
    display: none !important;
  }

  .tablet-orientation-note {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    gap: 10px;
    padding: 36px;
    background:
      radial-gradient(circle at 50% 35%, rgba(76, 201, 240, 0.2), transparent 38%),
      linear-gradient(180deg, rgba(3, 12, 22, 0.96), rgba(1, 5, 10, 0.98));
    color: #f8fbff;
    text-align: center;
  }

  .tablet-orientation-note strong {
    color: #fff1a8;
    font-size: clamp(34px, 7vw, 54px);
    line-height: 1;
    text-transform: uppercase;
  }

  .tablet-orientation-note span {
    color: #cdefff;
    font-size: clamp(18px, 3.6vw, 26px);
    font-weight: 900;
  }
}

/* Duel Mode compact header pass: keep the center card focused on timer, teams and VS. */
body:not(.possession-rush-active) .duel-meta .level-badge,
body:not(.possession-rush-active) .duel-meta .cup-badge,
body:not(.possession-rush-active) .duel-meta .season-gameplay-chip,
body:not(.possession-rush-active) .duel-meta .eyebrow {
  display: none !important;
}

body:not(.possession-rush-active) .duel-card {
  min-height: 122px;
  padding-top: clamp(10px, 1.2dvh, 15px);
  padding-bottom: clamp(12px, 1.4dvh, 17px);
}

body:not(.possession-rush-active) .duel-topline {
  display: grid;
  justify-items: center;
  margin-bottom: clamp(5px, 0.75dvh, 9px);
}

body:not(.possession-rush-active) .duel-meta {
  display: flex;
  justify-content: center;
  width: 100%;
}

body:not(.possession-rush-active) .round-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 18px);
  width: min(100%, 520px);
  min-width: min(100%, 360px);
  min-height: 52px;
  border-radius: 10px;
  padding: 9px clamp(14px, 1.7vw, 24px);
  text-align: center;
}

body:not(.possession-rush-active) .round-timer-label {
  flex: 0 0 auto;
  color: rgba(213, 241, 255, 0.82);
  font-size: clamp(0.78rem, 0.9vw, 0.96rem);
  letter-spacing: 0;
  white-space: nowrap;
}

body:not(.possession-rush-active) .round-timer strong {
  flex: 0 0 auto;
  font-size: clamp(1.75rem, min(3vw, 4.7dvh), 2.8rem);
}

body:not(.possession-rush-active) .round-timer-status {
  flex: 0 0 auto;
  grid-column: auto;
  margin-top: 0;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 999px;
  padding: 5px 9px;
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.14), transparent 62%),
    rgba(247, 216, 74, 0.08);
  color: #ffe879;
  font-size: clamp(0.76rem, 0.88vw, 0.96rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 16px rgba(247, 216, 74, 0.12);
  white-space: nowrap;
}

body:not(.possession-rush-active) .round-timer.is-pressure .round-timer-status {
  border-color: rgba(255, 137, 54, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 164, 74, 0.2), transparent 62%),
    rgba(95, 34, 10, 0.42);
  color: #ffd0a1;
}

body:not(.possession-rush-active) .round-timer.is-final .round-timer-status {
  border-color: rgba(255, 96, 110, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 96, 110, 0.22), transparent 62%),
    rgba(91, 9, 25, 0.44);
  color: #ffd7dc;
}

@media (max-width: 760px), (max-height: 620px) {
  body:not(.possession-rush-active) .round-timer {
    flex-wrap: wrap;
    row-gap: 4px;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
  }

  body:not(.possession-rush-active) .round-timer strong {
    font-size: clamp(1.45rem, 5.4vw, 2.1rem);
  }

  body:not(.possession-rush-active) .round-timer-status {
    font-size: clamp(0.7rem, 2.4vw, 0.86rem);
  }
}

/* Possession Rush final overrides: keep the optional mode readable without changing Duel Mode. */
body.possession-rush-active .app {
  grid-template-rows: minmax(204px, auto) minmax(0, 1fr) clamp(128px, 11.5vh, 150px);
}

body.possession-rush-active .scoreboard {
  grid-template-columns: minmax(130px, 0.55fr) minmax(720px, 1.55fr) minmax(130px, 0.55fr);
  gap: clamp(8px, 1vw, 12px);
}

body.possession-rush-active .duel-card {
  min-width: 0;
  min-height: 96px;
  padding: 8px 12px;
  position: relative;
}

body.possession-rush-active .duel-topline {
  display: block;
  position: absolute;
  top: 7px;
  right: 9px;
  z-index: 4;
  margin: 0;
}

body.possession-rush-active .duel-meta {
  display: block;
}

body.possession-rush-active .duel-meta > :not(.round-timer) {
  display: none;
}

body.possession-rush-active .round-timer {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 5px;
  min-width: 0;
  min-height: 0;
  border-radius: 999px;
  padding: 4px 7px;
  border: 1px solid rgba(76, 201, 240, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%),
    rgba(2, 10, 19, 0.54);
  box-shadow: inset 0 0 12px rgba(76, 201, 240, 0.06);
  text-align: left;
  opacity: 0.78;
}

body.possession-rush-active .round-timer-label {
  display: none;
}

body.possession-rush-active .round-timer strong {
  font-size: clamp(0.82rem, 0.95vw, 1rem);
  line-height: 1;
  color: rgba(239, 251, 255, 0.9);
  text-shadow: none;
}

body.possession-rush-active .round-timer-status {
  grid-column: auto;
  margin: 0;
  color: rgba(196, 225, 238, 0.74);
  font-size: clamp(0.55rem, 0.62vw, 0.68rem);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body.possession-rush-active .round-timer.is-pressure {
  opacity: 0.92;
  border-color: rgba(255, 137, 54, 0.45);
  background:
    linear-gradient(180deg, rgba(255, 137, 54, 0.14), transparent 62%),
    rgba(31, 10, 5, 0.58);
  box-shadow:
    inset 0 0 14px rgba(255, 137, 54, 0.12),
    0 0 14px rgba(255, 137, 54, 0.12);
  animation: none;
}

body.possession-rush-active .round-timer.is-pressure .round-timer-status,
body.possession-rush-active .round-timer.is-pressure strong {
  color: #ffd3a5;
}

body.possession-rush-active .possession-rush-panel {
  gap: 6px;
  margin-top: 0;
}

body.possession-rush-active .possession-rush-role,
body.possession-rush-active .possession-rush-pair-label {
  color: rgba(184, 225, 242, 0.76);
  font-size: clamp(0.66rem, 0.8vw, 0.82rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

body.possession-rush-active .possession-rush-role {
  display: none;
}

body.possession-rush-active .possession-rush-pair-label {
  margin-top: 2px;
}

body.possession-rush-active .possession-rush-panel > strong {
  font-size: clamp(1.55rem, 2.55vw, 2.55rem);
  line-height: 0.98;
}

body.possession-rush-active #possessionRushPair {
  color: #ffffff;
  font-size: clamp(1.02rem, 1.45vw, 1.34rem);
  line-height: 1.02;
}

body.possession-rush-active .possession-rush-timers span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
}

body.possession-rush-active .possession-rush-panel small {
  display: none;
}

body.possession-rush-active .possession-rush-timers b {
  font-size: clamp(1.16rem, 1.55vw, 1.48rem);
  line-height: 1;
}

body.possession-rush-active .controls .action:disabled,
body.possession-rush-active .controls .action[aria-disabled="true"] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%),
    linear-gradient(135deg, rgba(93, 108, 124, 0.28), rgba(25, 34, 45, 0.64)),
    rgba(3, 13, 24, 0.62);
  color: rgba(218, 228, 236, 0.48);
  cursor: not-allowed;
  filter: grayscale(0.86) saturate(0.52);
  opacity: 0.56;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

body.possession-rush-active .controls {
  min-height: 0;
  gap: 8px;
  padding: 9px 10px;
}

body.possession-rush-active .action-panel {
  min-height: 0;
  gap: 8px;
  padding: 7px 9px;
}

body.possession-rush-active .controls .action {
  min-height: clamp(54px, 5.4vh, 66px);
  padding: 8px 10px;
}

body.possession-rush-active .controls .tool {
  min-height: clamp(40px, 4.5vh, 50px);
  padding: 8px 12px;
}

@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape) {
  body.possession-rush-active .scoreboard {
    grid-template-columns: minmax(122px, 0.7fr) minmax(218px, 0.86fr) minmax(122px, 0.7fr);
    gap: 8px;
  }

  body.possession-rush-active .duel-card {
    min-height: 82px;
    padding: 6px 9px;
  }

  body.possession-rush-active .possession-rush-panel > strong {
    font-size: clamp(1.14rem, min(1.9vw, 4dvh), 1.62rem);
  }

  body.possession-rush-active #possessionRushPair {
    font-size: clamp(0.86rem, min(1.18vw, 2.8dvh), 1.08rem);
  }

  body.possession-rush-active .possession-rush-timers span {
    padding: 5px 10px;
    font-size: 0.62rem;
  }
}

@media (max-width: 760px), (max-height: 620px) {
  body.possession-rush-active .app {
    grid-template-rows: minmax(156px, auto) minmax(0, 1fr) minmax(132px, auto);
  }

  body.possession-rush-active .scoreboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  body.possession-rush-active .duel-card {
    order: -1;
    grid-column: 1 / -1;
    min-height: 0;
  }

  body.possession-rush-active .team-card {
    min-height: 78px;
  }
}

/* Possession Rush classroom control pass. Duel Mode keeps the normal layout. */
.setup-card,
.setup-layer,
.match-flow-settings,
.match-flow-option {
  overflow: visible;
}

.match-flow-option strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.match-flow-option .setup-help::after {
  right: auto;
  left: 50%;
  width: min(300px, 64vw);
  white-space: normal;
  overflow-wrap: break-word;
  text-align: left;
  transform: translate(-50%, 4px);
}

.match-flow-option .setup-help::before {
  right: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

.match-flow-option .setup-help:hover::after,
.match-flow-option .setup-help:focus::after,
.match-flow-option .setup-help.is-open::after {
  transform: translate(-50%, 0);
}

body.possession-rush-active .duel-card {
  min-height: 116px;
  padding: 8px 14px 10px;
}

body.possession-rush-active .duel-topline {
  display: block;
}

body.possession-rush-active .possession-rush-panel {
  display: grid;
  grid-template-columns: minmax(104px, 0.62fr) minmax(54px, 0.26fr) minmax(250px, 1.55fr) minmax(104px, 0.62fr);
  grid-template-areas:
    "posTimer emblem main wordTimer"
    "posTimer emblem pair wordTimer";
  align-items: center;
  column-gap: clamp(12px, 1.6vw, 22px);
  row-gap: 7px;
  width: min(820px, 100%);
  margin: 2px auto 0;
}

body.possession-rush-active .possession-rush-panel.no-rush-emblem {
  grid-template-columns: minmax(108px, 0.72fr) minmax(260px, 1.7fr) minmax(108px, 0.72fr);
  grid-template-areas:
    "posTimer main wordTimer"
    "posTimer pair wordTimer";
  width: min(760px, 100%);
}

body.possession-rush-active .possession-rush-emblem[hidden] {
  display: none;
}

body.possession-rush-active .possession-rush-emblem {
  grid-area: emblem;
  display: grid;
  place-items: center;
  width: clamp(46px, 4.6vw, 62px);
  height: clamp(46px, 4.6vw, 62px);
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--rush-active-color, var(--cyan)) 48%, rgba(255, 255, 255, 0.16));
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--rush-active-color, var(--cyan)) 24%, transparent), transparent 68%),
    rgba(3, 12, 22, 0.52);
  box-shadow:
    inset 0 0 28px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 12%, transparent),
    0 10px 24px rgba(0, 0, 0, 0.28);
}

body.possession-rush-active .possession-rush-emblem-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 108%;
  height: 108%;
}

body.possession-rush-active .possession-rush-emblem-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 18px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 42%, transparent));
}

body.possession-rush-active .possession-rush-emblem-art.asset-loaded .possession-rush-emblem-art-fallback {
  display: none;
}

body.possession-rush-active .possession-rush-emblem-art.asset-missing .possession-rush-emblem-img {
  display: none;
}

body.possession-rush-active .possession-rush-emblem-fallback {
  display: grid;
  place-items: center;
  width: 72%;
  height: 72%;
  border-radius: 999px;
  color: #ffffff;
  background: color-mix(in srgb, var(--rush-active-color, var(--cyan)) 46%, rgba(3, 12, 22, 0.9));
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 1000;
}

body.possession-rush-active .possession-rush-emblem-art-fallback {
  display: block;
  width: 70%;
  aspect-ratio: 1;
  border: 5px solid color-mix(in srgb, var(--rush-active-color, var(--cyan)) 68%, #f7d84a);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 48%, #f8fbff 0 23%, transparent 24%),
    conic-gradient(from 18deg, transparent 0 11%, rgba(247, 216, 74, 0.78) 12% 18%, transparent 19% 36%, rgba(76, 201, 240, 0.82) 37% 45%, transparent 46% 100%),
    rgba(3, 12, 22, 0.9);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 44%, transparent),
    inset 0 0 16px rgba(255, 255, 255, 0.16);
}

body.possession-rush-active .possession-rush-main {
  grid-area: main;
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  padding-left: clamp(2px, 0.5vw, 8px);
}

body.possession-rush-active .possession-rush-pair-card {
  grid-area: pair;
  display: grid;
  justify-items: start;
  min-width: 0;
  padding: 9px 13px;
  border: 1px solid rgba(247, 216, 74, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.14), transparent 74%),
    rgba(3, 12, 22, 0.38);
}

body.possession-rush-active .possession-rush-role,
body.possession-rush-active .possession-rush-pair-label {
  color: color-mix(in srgb, var(--rush-active-color, var(--cyan)) 42%, #d7f3ff);
  font-size: clamp(0.68rem, 0.9vw, 0.88rem);
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

body.possession-rush-active .possession-rush-pair-label {
  color: #ffe879;
}

body.possession-rush-active #possessionRushTeam {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: #ffffff;
  font-size: clamp(1.5rem, 2.55vw, 2.65rem);
  font-weight: 1000;
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-shadow:
    0 0 18px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 44%, transparent),
    0 4px 14px rgba(0, 0, 0, 0.62);
}

body.possession-rush-active #possessionRushPair {
  max-width: 100%;
  color: #ff6f78;
  font-size: clamp(1.06rem, 1.42vw, 1.42rem);
  font-weight: 1000;
  line-height: 1.02;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow:
    0 0 14px rgba(255, 95, 108, 0.54),
    0 3px 10px rgba(0, 0, 0, 0.54);
}

body.possession-rush-active .possession-rush-timers {
  display: contents;
}

body.possession-rush-active .possession-rush-timers span {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  border-radius: 8px;
  padding: 7px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 56%),
    rgba(3, 13, 24, 0.54);
  color: rgba(213, 232, 247, 0.88);
  font-size: clamp(0.62rem, 0.72vw, 0.72rem);
  line-height: 1;
}

body.possession-rush-active .possession-rush-timers span::before {
  content: none;
}

body.possession-rush-active .possession-rush-timers span:first-child {
  grid-area: posTimer;
}

body.possession-rush-active .possession-rush-timers span:last-child {
  grid-area: wordTimer;
}

body.possession-rush-active .possession-rush-timers b {
  margin-top: 0;
  font-size: clamp(1.12rem, 1.5vw, 1.45rem);
}

body.possession-rush-active .possession-rush-timers span.timer-warning {
  border-color: rgba(247, 216, 74, 0.66);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.18), transparent 58%),
    rgba(48, 34, 7, 0.64);
}

body.possession-rush-active .possession-rush-timers span.timer-warning b {
  color: #ffe76f;
}

body.possession-rush-active .possession-rush-timers span.timer-danger {
  border-color: rgba(255, 82, 96, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 82, 96, 0.22), transparent 58%),
    rgba(58, 10, 20, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 22px rgba(255, 70, 90, 0.2);
}

body.possession-rush-active .possession-rush-timers span.timer-danger b {
  color: #ff9da6;
}

body.possession-rush-active .duel-card {
  min-height: clamp(174px, 14vw, 196px);
  padding: 12px 16px 14px;
}

body.possession-rush-active .duel-topline {
  top: 3px;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

body.possession-rush-active .round-timer {
  gap: 0 6px;
  padding: 4px 9px;
  border-color: rgba(178, 224, 246, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 62%),
    rgba(2, 10, 19, 0.46);
  box-shadow: inset 0 0 12px rgba(76, 201, 240, 0.05);
}

body.possession-rush-active .round-timer strong {
  font-size: clamp(0.78rem, 0.88vw, 0.96rem);
}

body.possession-rush-active .round-timer-status {
  color: rgba(201, 229, 238, 0.7);
  font-size: clamp(0.52rem, 0.58vw, 0.64rem);
  text-transform: lowercase;
}

body.possession-rush-active .round-timer.is-pressure {
  border-color: rgba(255, 197, 112, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 197, 112, 0.11), transparent 62%),
    rgba(20, 10, 4, 0.46);
  box-shadow: inset 0 0 12px rgba(255, 197, 112, 0.08);
}

body.possession-rush-active .possession-rush-command-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "status"
    "main";
  gap: 8px;
  width: min(900px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding: 0;
  align-items: stretch;
  justify-items: stretch;
}

body.possession-rush-active .possession-rush-status-row {
  grid-area: status;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 24px;
  padding-right: min(230px, 34%);
}

.possession-underdog-emblem[hidden] {
  display: none;
}

body.possession-rush-active .possession-underdog-emblem {
  --underdog-boost-active-color: #4cc9f0;
  --underdog-boost-team-color: var(--cyan);
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: clamp(42px, 4.6vw, 58px);
  aspect-ratio: 1;
  border: 1px solid rgba(215, 238, 255, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 40%, rgba(215, 238, 255, 0.12), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    rgba(2, 10, 19, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.26);
  opacity: 0.56;
  filter: grayscale(0.86) saturate(0.5) brightness(0.72);
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

body.possession-rush-active .possession-underdog-emblem.team-a {
  grid-column: 2;
}

body.possession-rush-active .possession-underdog-emblem.team-b {
  grid-column: 4;
}

body.possession-rush-active .possession-underdog-emblem.is-active {
  border-color: rgba(247, 216, 74, 0.66);
  background:
    radial-gradient(circle at 50% 42%, rgba(76, 201, 240, 0.25), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(247, 216, 74, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 58%),
    rgba(2, 10, 19, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 18px rgba(76, 201, 240, 0.32),
    0 0 22px rgba(247, 216, 74, 0.18),
    0 10px 22px rgba(0, 0, 0, 0.3);
  opacity: 1;
  filter: saturate(1.25) brightness(1.08);
}

body.possession-rush-active .possession-underdog-emblem.is-activated,
body.possession-rush-active .possession-underdog-emblem.is-used {
  animation: underdogBoostBadgePulse 1100ms ease-out both;
}

body.possession-rush-active .possession-underdog-emblem::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 14px;
  background: radial-gradient(circle, rgba(76, 201, 240, 0.24), transparent 66%);
  opacity: 0;
  pointer-events: none;
}

body.possession-rush-active .possession-underdog-emblem.is-active::after {
  opacity: 1;
}

body.possession-rush-active .possession-underdog-emblem-icon-slot,
body.possession-rush-active .possession-underdog-emblem-icon {
  display: grid;
  place-items: center;
  min-width: 0;
}

body.possession-rush-active .possession-underdog-emblem-icon {
  width: clamp(34px, 3.8vw, 48px);
  aspect-ratio: 1;
}

body.possession-rush-active .possession-underdog-emblem-icon-img {
  display: block;
  width: 122%;
  height: 122%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(76, 201, 240, 0.26))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.32));
}

body.possession-rush-active .possession-underdog-emblem.is-active .possession-underdog-emblem-icon-img {
  filter:
    drop-shadow(0 0 10px rgba(76, 201, 240, 0.56))
    drop-shadow(0 0 13px rgba(247, 216, 74, 0.32))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.34));
}

body.possession-rush-active .possession-underdog-emblem-icon-fallback {
  display: block;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 36%, #ffffff 0 11%, transparent 12%),
    linear-gradient(135deg, var(--underdog-boost-active-color), #f7d84a);
  clip-path: polygon(50% 0, 86% 20%, 100% 58%, 70% 100%, 30% 100%, 0 58%, 14% 20%);
}

body.possession-rush-active .possession-rush-mode-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--rush-active-color, var(--cyan)) 32%, rgba(255, 255, 255, 0.14));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    rgba(4, 15, 26, 0.58);
  color: color-mix(in srgb, var(--rush-active-color, var(--cyan)) 36%, #eaf8ff);
  font-size: clamp(0.62rem, 0.72vw, 0.76rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

body.possession-rush-active .possession-rush-main-grid {
  grid-area: main;
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(360px, 1.5fr) minmax(150px, 0.85fr);
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 20px);
  width: 100%;
  min-width: 0;
}

body.possession-rush-active .possession-rush-timer-card {
  display: grid;
  place-items: center;
  align-content: center;
  min-width: 0;
  min-height: clamp(112px, 8.1vw, 136px);
  border: 1px solid color-mix(in srgb, var(--rush-active-color, var(--cyan)) 28%, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 52%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rush-active-color, var(--cyan)) 18%, transparent), transparent 70%),
    rgba(3, 13, 24, 0.62);
  color: rgba(218, 238, 248, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 28px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 8%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
  text-transform: uppercase;
}

body.possession-rush-active .possession-rush-timer-card > span {
  font-size: clamp(0.72rem, 0.9vw, 0.92rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
}

body.possession-rush-active .possession-rush-timer-card > b {
  margin-top: 8px;
  color: #fff2a4;
  font-size: clamp(2.25rem, 3.7vw, 4.2rem);
  font-weight: 1000;
  line-height: 0.9;
  text-shadow:
    0 0 18px rgba(247, 216, 74, 0.42),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

body.possession-rush-active .possession-rush-word-card {
  border-color: color-mix(in srgb, var(--team-b-color, #ff6363) 34%, rgba(255, 255, 255, 0.16));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 52%),
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--team-b-color, #ff6363) 18%, transparent), transparent 70%),
    rgba(22, 5, 15, 0.58);
}

body.possession-rush-active .possession-rush-center-card {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  grid-template-areas:
    "emblem main"
    "emblem pair";
  align-items: center;
  gap: 5px clamp(14px, 1.5vw, 22px);
  min-width: 0;
  min-height: clamp(132px, 8.8vw, 146px);
  border: 1px solid color-mix(in srgb, var(--rush-active-color, var(--cyan)) 34%, rgba(255, 255, 255, 0.14));
  border-radius: 10px;
  padding: 9px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 56%),
    radial-gradient(circle at 22% 50%, color-mix(in srgb, var(--rush-active-color, var(--cyan)) 22%, transparent), transparent 54%),
    rgba(3, 13, 24, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 34px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 10%, transparent),
    0 14px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

body.possession-rush-active .possession-rush-emblem {
  width: clamp(96px, 6.8vw, 112px);
  height: clamp(96px, 6.8vw, 112px);
  border-radius: 16px;
  align-self: center;
}

body.possession-rush-active .possession-rush-main {
  justify-items: start;
  align-self: center;
  padding-left: 0;
}

body.possession-rush-active #possessionRushTeam {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: clip;
  white-space: nowrap;
  word-break: normal;
  font-size: clamp(1.72rem, 2.45vw, 3rem);
  line-height: 0.92;
}

body.possession-rush-active #possessionRushTeam.team-name-long {
  font-size: clamp(1.5rem, 2.06vw, 2.55rem);
}

body.possession-rush-active #possessionRushTeam.team-name-very-long {
  font-size: clamp(1.22rem, 1.62vw, 2.1rem);
}

body.possession-rush-active #possessionRushTeam.team-name-ultra-long {
  font-size: clamp(1.02rem, 1.28vw, 1.72rem);
}

body.possession-rush-active .possession-rush-pair-card {
  justify-items: start;
  align-self: center;
  width: 100%;
  min-width: 0;
  border-color: rgba(255, 95, 108, 0.48);
  border-radius: 999px;
  padding: 6px 12px;
  background:
    linear-gradient(90deg, rgba(255, 95, 108, 0.16), transparent 72%),
    rgba(3, 12, 22, 0.42);
}

body.possession-rush-active .possession-rush-pair-card[hidden] {
  display: none;
}

body.possession-rush-active #possessionRushPair {
  max-width: 100%;
  font-size: clamp(0.82rem, 1vw, 1.05rem);
  line-height: 1;
  color: #ff727c;
}

body.possession-rush-active .possession-rush-timer-card.timer-warning > b {
  color: #ffe76f;
}

body.possession-rush-active .possession-rush-timer-card.timer-danger {
  border-color: rgba(255, 82, 96, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 82, 96, 0.2), transparent 58%),
    rgba(58, 10, 20, 0.72);
}

body.possession-rush-active .possession-rush-timer-card.timer-danger > b {
  color: #ff9da6;
}

.possession-powershot-meters[hidden],
.possession-powershot-meter[hidden] {
  display: none;
}

body.possession-rush-active .possession-powershot-meters {
  position: absolute;
  z-index: 7;
  left: clamp(18px, 3vw, 46px);
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3.2vh, 36px);
  display: grid;
  grid-template-columns: minmax(170px, 330px) clamp(42px, 4.6vw, 58px) minmax(96px, 156px) clamp(42px, 4.6vw, 58px) minmax(170px, 330px);
  justify-content: space-between;
  align-items: center;
  gap: clamp(8px, 1.1vw, 16px);
  width: auto;
  transform: none;
  pointer-events: none;
}

body.possession-rush-active .possession-powershot-meter {
  --powershot-team-color: var(--cyan);
  position: relative;
  display: grid;
  grid-template-columns: clamp(34px, 3.2vw, 44px) minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--powershot-team-color) 24%, rgba(255, 255, 255, 0.13));
  border-radius: 8px;
  padding: 8px 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--powershot-team-color) 12%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%),
    rgba(2, 10, 19, 0.72);
  background-size: auto;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.28);
}

body.possession-rush-active .possession-powershot-meter[data-powershot-team="A"] {
  justify-self: start;
}

body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] {
  grid-column: 5;
  grid-template-columns: minmax(0, 1fr) clamp(34px, 3.2vw, 44px);
  justify-self: end;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--powershot-team-color) 12%, transparent), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 62%),
    rgba(2, 10, 19, 0.72);
}

body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] .possession-powershot-topline {
  grid-column: 2;
  grid-row: 1;
}

body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] .possession-powershot-track {
  grid-column: 1;
  grid-row: 1;
}

body.possession-rush-active .possession-powershot-meter.is-active-team {
  border-color: color-mix(in srgb, var(--powershot-team-color) 46%, rgba(255, 255, 255, 0.16));
}

body.possession-rush-active .possession-powershot-meter.is-ready,
body.possession-rush-active .possession-powershot-meter.is-fired {
  border-color: rgba(247, 216, 74, 0.76);
  background:
    linear-gradient(90deg, rgba(247, 216, 74, 0.18), transparent 70%),
    color-mix(in srgb, var(--powershot-team-color) 12%, rgba(18, 14, 5, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 18px rgba(247, 216, 74, 0.18);
}

body.possession-rush-active .possession-powershot-meter.is-fired {
  animation: powershotPulse 1380ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

body.possession-rush-active .possession-powershot-topline {
  display: grid;
  place-items: center;
  min-width: 0;
}

body.possession-rush-active .possession-powershot-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(29px, 2.8vw, 38px);
  aspect-ratio: 1;
}

body.possession-rush-active .possession-powershot-icon-img {
  display: block;
  width: 132%;
  height: 132%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(247, 216, 74, 0.34))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.34));
}

body.possession-rush-active .possession-powershot-icon.asset-loaded .possession-powershot-icon-fallback,
body.possession-rush-active .possession-powershot-ready-burst.asset-loaded .possession-powershot-ready-burst-fallback,
body.possession-rush-active .possession-switch-icon.asset-loaded .possession-switch-icon-fallback,
body.possession-rush-active .possession-team-assist-icon.asset-loaded .possession-team-assist-icon-fallback,
body.possession-rush-active .possession-underdog-emblem-icon.asset-loaded .possession-underdog-emblem-icon-fallback {
  display: none;
}

body.possession-rush-active .possession-powershot-icon.asset-missing .possession-powershot-icon-img,
body.possession-rush-active .possession-powershot-ready-burst.asset-missing .possession-powershot-ready-burst-img,
body.possession-rush-active .possession-switch-icon.asset-missing .possession-switch-icon-img,
body.possession-rush-active .possession-team-assist-icon.asset-missing .possession-team-assist-icon-img,
body.possession-rush-active .possession-underdog-emblem-icon.asset-missing .possession-underdog-emblem-icon-img {
  display: none;
}

body.possession-rush-active .possession-powershot-icon-fallback {
  display: block;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 46%, #fff6b6 0 22%, transparent 23%),
    linear-gradient(135deg, transparent 0 38%, #fff09b 39% 48%, transparent 49% 100%),
    linear-gradient(90deg, #ff6a1a, #f7d84a);
  box-shadow: 0 0 12px rgba(247, 216, 74, 0.36);
}

body.possession-rush-active .possession-powershot-topline strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.possession-rush-active .possession-powershot-topline span {
  flex: 0 0 auto;
  color: #fff0a8;
}

body.possession-rush-active .possession-powershot-track {
  position: relative;
  overflow: hidden;
  height: clamp(18px, 2.2vh, 24px);
  border-radius: 999px;
  border: 1px solid rgba(247, 216, 74, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 58%),
    rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 8px rgba(0, 0, 0, 0.4),
    0 0 10px color-mix(in srgb, var(--powershot-team-color) 20%, transparent);
}

body.possession-rush-active .possession-powershot-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #ff6a1a, var(--powershot-team-color), #fff09b);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    0 0 12px rgba(247, 216, 74, 0.42),
    inset 0 0 6px rgba(255, 255, 255, 0.24);
  transition: width 220ms ease;
}

body.possession-rush-active .possession-powershot-ready-burst {
  position: absolute;
  top: -16px;
  right: 8px;
  z-index: 1;
  display: none;
  width: 38px;
  aspect-ratio: 1;
  pointer-events: none;
}

body.possession-rush-active .possession-powershot-meter.is-ready .possession-powershot-ready-burst,
body.possession-rush-active .possession-powershot-meter.is-fired .possession-powershot-ready-burst {
  display: grid;
  place-items: center;
}

body.possession-rush-active .possession-powershot-ready-burst-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(247, 216, 74, 0.36));
}

body.possession-rush-active .possession-powershot-ready-burst-fallback {
  width: 76%;
  aspect-ratio: 1;
  clip-path: polygon(50% 0, 61% 34%, 98% 18%, 70% 49%, 100% 66%, 62% 62%, 50% 100%, 38% 62%, 0 66%, 30% 49%, 2% 18%, 39% 34%);
  background: radial-gradient(circle, #fff6b6, #f7d84a 48%, rgba(255, 106, 26, 0.2) 72%);
  filter: drop-shadow(0 0 12px rgba(247, 216, 74, 0.45));
}

body.possession-rush-active [data-possession-rush-asset] .possession-rush-asset-fallback {
  display: none;
}

body.possession-rush-active [data-possession-rush-asset].asset-missing .possession-rush-asset-fallback {
  display: block;
  width: 62%;
  aspect-ratio: 1;
  border: 2px solid rgba(215, 238, 255, 0.22);
  border-radius: 999px;
  background: rgba(215, 238, 255, 0.07);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.08);
  clip-path: none;
  opacity: 0.52;
  filter: none;
}

body.possession-rush-active .possession-powershot-meter small {
  display: none;
}

body.possession-rush-active .possession-powershot-meter.is-ready small,
body.possession-rush-active .possession-powershot-meter.is-fired small {
  color: #ffe879;
}

.possession-team-assist[hidden] {
  display: none;
}

body.possession-rush-active .possession-team-assist {
  --team-assist-active-color: var(--cyan);
  grid-column: 3;
  justify-self: center;
  pointer-events: auto;
  display: grid;
  grid-template-columns: clamp(31px, 3vw, 42px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: min(100%, 156px);
  min-width: 0;
  min-height: clamp(45px, 6vh, 58px);
  border: 1px solid color-mix(in srgb, var(--team-assist-active-color) 40%, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  padding: 7px 10px;
  color: #ffffff;
  background:
    radial-gradient(circle at 16% 16%, rgba(247, 216, 74, 0.22), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--team-assist-active-color) 20%, transparent), rgba(3, 15, 24, 0.78) 58%),
    rgba(2, 10, 19, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.3),
    0 0 18px color-mix(in srgb, var(--team-assist-active-color) 18%, transparent);
  cursor: pointer;
}

body.possession-rush-active .possession-team-assist:disabled,
body.possession-rush-active .possession-team-assist[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.54;
  filter: grayscale(0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 16px rgba(0, 0, 0, 0.24);
}

body.possession-rush-active .possession-team-assist.is-ready:not(:disabled) {
  border-color: color-mix(in srgb, var(--team-assist-active-color) 52%, #f7d84a);
}

body.possession-rush-active .possession-team-assist-icon-slot,
body.possession-rush-active .possession-team-assist-icon {
  display: grid;
  place-items: center;
  min-width: 0;
}

body.possession-rush-active .possession-team-assist-icon {
  width: clamp(31px, 3vw, 42px);
  aspect-ratio: 1;
}

body.possession-rush-active .possession-team-assist-icon-img {
  display: block;
  width: 128%;
  height: 128%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb, var(--team-assist-active-color) 52%, transparent))
    drop-shadow(0 3px 7px rgba(0, 0, 0, 0.34));
}

body.possession-rush-active .possession-team-assist-icon-fallback {
  display: block;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 34%, #ffffff 0 10%, transparent 11%),
    radial-gradient(circle at 66% 34%, #ffffff 0 10%, transparent 11%),
    linear-gradient(135deg, var(--team-assist-active-color), #f7d84a);
  clip-path: polygon(50% 0, 90% 22%, 90% 72%, 50% 100%, 10% 72%, 10% 22%);
}

body.possession-rush-active .possession-team-assist-copy {
  display: grid;
  min-width: 0;
  text-align: left;
  line-height: 1;
}

body.possession-rush-active .possession-team-assist-copy small {
  overflow: hidden;
  color: #bfefff;
  font-size: 0.55rem;
  font-weight: 1000;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.possession-rush-active .possession-team-assist-copy strong {
  overflow: hidden;
  color: #fff7bf;
  font-size: clamp(0.88rem, 1.3vw, 1.12rem);
  font-weight: 1000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.penalty.possession-team-assist-modal .penalty-card {
  width: min(660px, calc(100vw - 32px));
  border-color: rgba(92, 255, 177, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(92, 255, 177, 0.17), transparent 45%),
    var(--possession-rush-team-assist-background) center / cover no-repeat,
    linear-gradient(145deg, rgba(6, 30, 42, 0.96), rgba(9, 13, 28, 0.98));
  box-shadow:
    inset 0 0 58px rgba(92, 255, 177, 0.09),
    inset 0 -72px 118px rgba(0, 0, 0, 0.44),
    0 28px 92px rgba(70, 245, 198, 0.12),
    0 24px 72px rgba(0, 0, 0, 0.48);
}

.penalty.possession-team-assist-modal {
  background:
    linear-gradient(180deg, rgba(1, 7, 13, 0.22), rgba(1, 7, 13, 0.5)),
    radial-gradient(circle at 50% 42%, rgba(92, 255, 177, 0.13), transparent 36%),
    var(--possession-rush-team-assist-background) center / cover no-repeat,
    rgba(0, 0, 0, 0.46);
}

.penalty.possession-team-assist-modal .penalty-card .eyebrow {
  color: #aefce8;
}

.penalty.possession-team-assist-modal .penalty-card h2 {
  color: #fff7bf;
  text-shadow: 0 0 22px rgba(92, 255, 177, 0.32);
}

.penalty.possession-team-assist-modal .penalty-card p:not(.eyebrow) {
  margin-bottom: 18px;
  font-size: clamp(20px, 2vw, 30px);
}

.penalty.possession-team-assist-modal .penalty-prompt-card {
  max-width: 460px;
  border-color: rgba(92, 255, 177, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 56%),
    rgba(2, 16, 22, 0.74);
  box-shadow: inset 0 0 30px rgba(92, 255, 177, 0.09);
}

.penalty.possession-team-assist-modal .penalty-prompt-card span {
  color: #aefce8;
}

.penalty.possession-team-assist-modal .penalty-actions .action.bad {
  border-color: rgba(255, 91, 105, 0.52);
}

.penalty.possession-team-assist-modal .penalty-continue {
  border-color: rgba(247, 216, 74, 0.44);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(135deg, rgba(247, 216, 74, 0.72), rgba(108, 76, 12, 0.74));
  color: #191103;
}

@keyframes powershotPulse {
  0% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  22% {
    transform: scale(1.055);
    filter: brightness(1.28) saturate(1.28);
  }
  58% {
    transform: scale(1.018);
    filter: brightness(1.12) saturate(1.12);
  }
  100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

body.possession-rush-active .middle-panel {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

body.possession-rush-active .middle-panel > .tool {
  grid-column: span 2 !important;
  min-height: 52px;
  padding-inline: 8px;
  white-space: nowrap;
  font-size: clamp(11px, 0.86vw, 14px);
}

body.possession-rush-active .middle-panel > .tool[hidden] {
  display: none;
}

body.possession-rush-active .middle-panel > [data-action="undo"],
body.possession-rush-active .middle-panel > [data-action="reset"] {
  grid-column: span 3 !important;
}

body.possession-rush-active .possession-penalty-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: rgba(255, 92, 110, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 46%),
    linear-gradient(135deg, rgba(255, 63, 82, 0.88), rgba(104, 19, 34, 0.92));
  color: #fff2f2;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.26),
    0 0 20px rgba(255, 72, 92, 0.22);
}

body.possession-rush-active .possession-penalty-tool::before {
  content: none;
}

.penalty.possession-rush-penalty .penalty-card {
  width: min(680px, calc(100vw - 32px));
  padding: clamp(22px, 3vw, 34px);
}

.penalty.possession-rush-penalty .penalty-card h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 22px);
  margin-bottom: 8px;
  font-size: clamp(54px, 6vw, 86px);
}

.penalty.possession-rush-penalty .penalty-card h2::before {
  content: none;
}

.penalty.possession-rush-penalty .penalty-card .eyebrow,
.penalty.possession-rush-penalty .penalty-card p:not(.eyebrow):empty {
  display: none;
}

.penalty.possession-rush-penalty .penalty-card p:not(.eyebrow) {
  margin-bottom: 20px;
  font-size: clamp(22px, 2.2vw, 32px);
}

.penalty.possession-rush-penalty .penalty-prompt-card[hidden] {
  display: none;
}

.penalty.possession-rush-penalty .penalty-actions .action strong {
  font-size: clamp(25px, 2.3vw, 40px);
}

@media (max-width: 860px), (max-height: 620px) {
  body.possession-rush-active .duel-card {
    min-height: 132px;
  }

  body.possession-rush-active .possession-rush-command-panel {
    gap: 6px;
    row-gap: 4px;
    width: min(96%, 760px);
  }

  body.possession-rush-active .possession-rush-status-row {
    min-height: 22px;
    padding-right: min(150px, 42%);
  }

  body.possession-rush-active .possession-rush-mode-label {
    min-height: 20px;
    padding: 3px 8px;
    font-size: 0.56rem;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(92px, 0.8fr) minmax(210px, 1.35fr) minmax(92px, 0.8fr);
    gap: 7px;
  }

  body.possession-rush-active .possession-rush-timer-card,
  body.possession-rush-active .possession-rush-center-card {
    min-height: 82px;
    padding: 8px 9px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: clamp(58px, 9vw, 76px);
    height: clamp(58px, 9vw, 76px);
  }

  body.possession-rush-active .possession-rush-center-card {
    grid-template-columns: minmax(58px, 0.4fr) minmax(0, 1fr);
    gap: 5px 8px;
  }

  body.possession-rush-active #possessionRushTeam {
    font-size: clamp(1.18rem, min(3vw, 4dvh), 1.78rem);
  }

  body.possession-rush-active #possessionRushPair {
    font-size: clamp(0.72rem, min(1.7vw, 2.6dvh), 0.92rem);
  }

  body.possession-rush-active .possession-rush-timer-card > span {
    font-size: 0.58rem;
  }

  body.possession-rush-active .possession-rush-timer-card > b {
    font-size: clamp(1.45rem, 3.4vw, 2.05rem);
  }

  body.possession-rush-active .duel-topline {
    top: 5px;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  body.possession-rush-active .round-timer {
    padding: 3px 6px;
  }

  body.possession-rush-active .round-timer-status {
    display: none;
  }

  body.possession-rush-active .possession-powershot-meters {
    right: 10px;
    bottom: 12px;
    left: 10px;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) minmax(34px, 42px) minmax(58px, 92px) minmax(34px, 42px) minmax(0, 1fr);
    width: auto;
  }

  body.possession-rush-active .possession-powershot-meter {
    padding: 6px 8px 7px;
  }

  body.possession-rush-active .possession-powershot-icon {
    width: 28px;
  }

  body.possession-rush-active .possession-powershot-ready-burst {
    top: -12px;
    right: 8px;
    width: 32px;
  }

  body.possession-rush-active .possession-underdog-emblem {
    width: min(100%, 42px);
    border-radius: 8px;
  }

  body.possession-rush-active .possession-underdog-emblem-icon {
    width: 34px;
  }

  body.possession-rush-active .possession-team-assist {
    grid-template-columns: 28px minmax(0, 1fr);
    width: min(100%, 92px);
    min-height: 42px;
    padding: 6px 7px;
  }

  body.possession-rush-active .possession-team-assist-icon {
    width: 28px;
  }

  body.possession-rush-active .possession-team-assist-copy small {
    display: none;
  }

  body.possession-rush-active .possession-team-assist-copy strong {
    font-size: 0.92rem;
  }

  body.possession-rush-active .possession-powershot-meter small {
    display: none;
  }
}

/* Season Possession Rush polished Global visual transfer */
body.possession-rush-active .possession-rush-timer-card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.possession-rush-active .possession-rush-timer-card > b {
  transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

body.possession-rush-active .possession-rush-timer-card.timer-cool > b {
  color: #82f7ff !important;
  text-shadow:
    0 0 18px rgba(76, 201, 240, 0.52),
    0 5px 16px rgba(0, 0, 0, 0.64) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-warm > b {
  color: #fff1a8 !important;
  text-shadow:
    0 0 20px rgba(247, 216, 74, 0.56),
    0 5px 16px rgba(0, 0, 0, 0.66) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-hot > b,
body.possession-rush-active .possession-rush-timer-card.timer-warning > b {
  color: #ff9b4a !important;
  text-shadow:
    0 0 22px rgba(255, 137, 54, 0.66),
    0 5px 16px rgba(0, 0, 0, 0.68) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-danger > b {
  color: #ff4f68 !important;
  text-shadow:
    0 0 24px rgba(255, 79, 104, 0.78),
    0 0 42px rgba(255, 79, 104, 0.28),
    0 5px 16px rgba(0, 0, 0, 0.72) !important;
  animation: rushTimerDangerPulseSeason 680ms ease-in-out infinite;
}

body.possession-rush-active .possession-rush-timer-card.timer-cool > span {
  color: rgba(184, 247, 255, 0.9) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-warm > span {
  color: rgba(255, 241, 168, 0.9) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-hot > span,
body.possession-rush-active .possession-rush-timer-card.timer-warning > span {
  color: rgba(255, 178, 92, 0.92) !important;
}

body.possession-rush-active .possession-rush-timer-card.timer-danger > span {
  color: rgba(255, 121, 141, 0.96) !important;
}

body.possession-rush-active .event-banner.event-countdown,
body.possession-rush-active .event-banner.show.event-countdown {
  top: 27% !important;
  left: 50% !important;
  translate: 0 0 !important;
  width: clamp(184px, 17.5vw, 254px) !important;
  height: clamp(184px, 17.5vw, 254px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 44%),
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--event-team-color, var(--cyan)) 34%, transparent), transparent 68%),
    rgba(3, 13, 24, 0.86) !important;
  box-shadow:
    inset 0 0 36px rgba(255, 242, 164, 0.12),
    0 0 38px color-mix(in srgb, var(--event-team-color, var(--cyan)) 38%, transparent),
    0 20px 52px rgba(0, 0, 0, 0.52) !important;
  font-size: clamp(6rem, 11.6vw, 10.2rem) !important;
  transform: translate(-50%, -50%) scale(1);
  animation: seasonCountdownBoxFinal 720ms cubic-bezier(0.16, 0.88, 0.2, 1) both !important;
}

body.possession-rush-active .possession-powershot-meter,
body.possession-rush-active .possession-powershot-meter.team-a,
body.possession-rush-active .possession-powershot-meter.team-b,
body.possession-rush-active .possession-powershot-meter[data-powershot-team="A"],
body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"],
body.possession-rush-active .possession-team-assist,
body.possession-rush-active .possession-underdog-emblem {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.possession-rush-active .possession-powershot-track,
body.possession-rush-active .possession-powershot-meter.is-ready .possession-powershot-track,
body.possession-rush-active .possession-powershot-meter.is-activated .possession-powershot-track,
body.possession-rush-active .possession-powershot-meter.is-releasing .possession-powershot-track,
body.possession-rush-active .possession-powershot-meter.is-fired .possession-powershot-track {
  border: 0 !important;
  box-shadow: none !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), transparent 58%),
    rgba(255, 255, 255, 0.08) !important;
}

body.possession-rush-active .possession-powershot-track span {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--powershot-team-color, var(--cyan)) 44%, transparent),
    inset 0 0 8px rgba(255, 255, 255, 0.22) !important;
}

body.possession-rush-active .possession-powershot-meter.is-charging::after,
body.possession-rush-active .possession-powershot-meter.is-ready::after {
  content: none !important;
}

body.possession-rush-active .possession-powershot-meter.is-activated,
body.possession-rush-active .possession-powershot-meter.is-releasing,
body.possession-rush-active .possession-powershot-meter.is-fired {
  filter: brightness(1.25) saturate(1.35);
  animation: powershotReleaseSlamSeason 1180ms cubic-bezier(0.12, 0.92, 0.16, 1) both !important;
}

body.possession-rush-active .possession-powershot-meter.is-activated::before,
body.possession-rush-active .possession-powershot-meter.is-releasing::before,
body.possession-rush-active .possession-powershot-meter.is-fired::before {
  content: "";
  position: absolute;
  inset: -18px !important;
  z-index: -1;
  border-radius: 14px;
  opacity: 1 !important;
  background:
    radial-gradient(circle, rgba(255, 244, 164, 0.72), transparent 42%),
    radial-gradient(circle, color-mix(in srgb, var(--powershot-team-color, var(--cyan)) 66%, transparent), transparent 68%) !important;
  filter: blur(3px);
  pointer-events: none;
  animation: powershotReleaseShockwaveSeason 1050ms ease-out both !important;
}

body.possession-rush-active .possession-powershot-meter.is-activated::after,
body.possession-rush-active .possession-powershot-meter.is-releasing::after,
body.possession-rush-active .possession-powershot-meter.is-fired::after {
  content: "POWERSHOT!" !important;
  position: absolute;
  top: -34px;
  left: 50%;
  z-index: 2;
  padding: 4px 9px;
  border: 1px solid rgba(255, 244, 164, 0.92);
  border-radius: 999px;
  background: rgba(8, 8, 4, 0.92);
  box-shadow:
    0 0 18px rgba(247, 216, 74, 0.62),
    0 0 34px color-mix(in srgb, var(--powershot-team-color, var(--cyan)) 42%, transparent);
  color: #fff7bf;
  font-size: clamp(0.72rem, 0.95vw, 1rem);
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1 !important;
  animation: powershotReleaseCalloutSeason 980ms ease-out both !important;
}

body.possession-rush-active .possession-powershot-icon-img,
body.possession-rush-active .possession-team-assist-icon-img,
body.possession-rush-active .possession-underdog-emblem-icon-img {
  filter:
    drop-shadow(0 0 12px rgba(255, 244, 164, 0.42))
    drop-shadow(0 5px 10px rgba(0, 0, 0, 0.36));
}

body.possession-rush-active .possession-powershot-meter.is-activated .possession-powershot-icon-img,
body.possession-rush-active .possession-powershot-meter.is-releasing .possession-powershot-icon-img,
body.possession-rush-active .possession-powershot-meter.is-fired .possession-powershot-icon-img {
  filter:
    drop-shadow(0 0 20px rgba(255, 244, 164, 0.88))
    drop-shadow(0 0 28px color-mix(in srgb, var(--powershot-team-color, var(--cyan)) 68%, transparent))
    drop-shadow(0 7px 12px rgba(0, 0, 0, 0.42));
  animation: powershotIconSlamSeason 980ms cubic-bezier(0.12, 0.92, 0.16, 1) both !important;
}

body.possession-rush-active .possession-team-assist {
  grid-template-columns: 1fr !important;
  place-items: center;
  width: clamp(62px, 6.2vw, 86px) !important;
  min-height: clamp(62px, 7vh, 84px) !important;
  padding: 4px !important;
}

body.possession-rush-active .possession-team-assist-copy {
  display: none !important;
}

body.possession-rush-active .possession-team-assist-icon-slot,
body.possession-rush-active .possession-team-assist-icon {
  width: clamp(56px, 5.5vw, 76px) !important;
  height: clamp(56px, 5.5vw, 76px) !important;
}

body.possession-rush-active .possession-team-assist-icon-img {
  width: 152% !important;
  height: 152% !important;
}

body.possession-rush-active .possession-underdog-emblem {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: clamp(62px, 6.2vw, 86px) !important;
  height: clamp(62px, 7vh, 84px) !important;
  min-width: 0;
  min-height: 0;
  padding: 4px !important;
}

body.possession-rush-active .possession-underdog-emblem-icon-slot,
body.possession-rush-active .possession-underdog-emblem-icon {
  width: clamp(56px, 5.5vw, 78px) !important;
  height: clamp(56px, 5.5vw, 78px) !important;
}

body.possession-rush-active .possession-underdog-emblem-icon-img {
  width: 152% !important;
  height: 152% !important;
}

body.possession-rush-active .possession-underdog-emblem::before,
body.possession-rush-active .possession-underdog-emblem::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}

body.possession-rush-active .possession-underdog-emblem::before {
  background:
    radial-gradient(circle, rgba(255, 242, 164, 0.28), transparent 58%),
    radial-gradient(circle, color-mix(in srgb, var(--underdog-boost-team-color, var(--cyan)) 38%, transparent), transparent 70%);
  filter: blur(2px);
}

body.possession-rush-active .possession-underdog-emblem::after {
  border: 2px solid color-mix(in srgb, var(--underdog-boost-active-color, #4cc9f0) 74%, #ffffff);
  transform: scale(0.78);
}

body.possession-rush-active .possession-underdog-emblem.is-active,
body.possession-rush-active .possession-underdog-emblem.is-activated {
  opacity: 1;
  filter: none;
}

body.possession-rush-active .possession-underdog-emblem.is-active::before,
body.possession-rush-active .possession-underdog-emblem.is-activated::before {
  opacity: 1;
  animation: underdogChargedAuraSeason 1350ms ease-in-out infinite;
}

body.possession-rush-active .possession-underdog-emblem.is-activated::after {
  animation: underdogActivationRingSeason 1050ms ease-out 3;
}

body.possession-rush-active .possession-underdog-emblem.is-used {
  animation: underdogReleaseShakeSeason 720ms cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

body.possession-rush-active .possession-underdog-emblem.is-used::after {
  opacity: 1;
  animation: underdogReleaseRingSeason 900ms ease-out both;
}

body.possession-powershot-fired .powershot-broadcast {
  border-color: rgba(255, 244, 164, 0.95);
  box-shadow:
    inset 0 0 44px rgba(247, 216, 74, 0.25),
    0 18px 48px rgba(0, 0, 0, 0.52),
    0 0 72px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 64%, transparent);
}

body.possession-powershot-fired #field .ball {
  filter:
    drop-shadow(0 0 28px rgba(255, 244, 164, 0.95))
    drop-shadow(0 0 42px color-mix(in srgb, var(--powershot-broadcast-color, #f7d84a) 62%, transparent))
    saturate(1.45);
}

.penalty.possession-team-assist-modal {
  background:
    linear-gradient(180deg, rgba(1, 7, 13, 0.26), rgba(1, 7, 13, 0.62)),
    radial-gradient(circle at 50% 42%, rgba(92, 255, 177, 0.16), transparent 38%),
    var(--possession-rush-team-assist-background) center / cover no-repeat,
    rgba(0, 0, 0, 0.62) !important;
}

.penalty.possession-team-assist-modal .penalty-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 32%),
    radial-gradient(circle at 50% 8%, rgba(92, 255, 177, 0.2), transparent 46%),
    linear-gradient(145deg, rgba(6, 30, 42, 0.98), rgba(9, 13, 28, 0.98)) !important;
}

@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape), (max-height: 740px) {
  body.possession-rush-active .event-banner.event-countdown,
  body.possession-rush-active .event-banner.show.event-countdown {
    top: 26% !important;
    width: 174px !important;
    height: 174px !important;
    font-size: clamp(5.4rem, 11vw, 8.2rem) !important;
  }

  body.possession-rush-active .possession-team-assist,
  body.possession-rush-active .possession-underdog-emblem {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
  }

  body.possession-rush-active .possession-team-assist-icon-slot,
  body.possession-rush-active .possession-team-assist-icon,
  body.possession-rush-active .possession-underdog-emblem-icon-slot,
  body.possession-rush-active .possession-underdog-emblem-icon {
    width: 48px !important;
    height: 48px !important;
  }
}

@keyframes rushTimerDangerPulseSeason {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.22);
  }
}

@keyframes seasonCountdownBoxFinal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@keyframes powershotReleaseSlamSeason {
  0% { transform: scale(1); }
  20% { transform: scale(1.12); }
  44% { transform: scale(0.98); }
  72% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes powershotReleaseShockwaveSeason {
  0% { opacity: 0; transform: scale(0.62); }
  18% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.85); }
}

@keyframes powershotReleaseCalloutSeason {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.78); }
  18% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.14); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(1.24); }
}

@keyframes powershotIconSlamSeason {
  0% { transform: scale(1) rotate(0deg); }
  22% { transform: scale(1.38) rotate(-8deg); }
  48% { transform: scale(1.08) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes underdogChargedAuraSeason {
  0%,
  100% { opacity: 0.58; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes underdogActivationRingSeason {
  0% { opacity: 0.9; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.58); }
}

@keyframes underdogReleaseRingSeason {
  0% { opacity: 1; transform: scale(0.78); }
  100% { opacity: 0; transform: scale(1.85); }
}

@keyframes underdogReleaseShakeSeason {
  0%,
  100% { transform: translateX(0) scale(1); }
  18% { transform: translateX(-2px) scale(1.08); }
  36% { transform: translateX(3px) scale(1.12); }
  58% { transform: translateX(-1px) scale(1.05); }
}

/* Season Possession Rush final clean-meter and emblem polish */
body.possession-rush-active .possession-rush-emblem,
body.possession-rush-active .possession-rush-emblem-art,
body.possession-rush-active .possession-rush-emblem-img,
body.possession-rush-active .possession-rush-emblem-fallback,
body.possession-rush-active .possession-rush-emblem-art-fallback {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

body.possession-rush-active .possession-rush-emblem {
  width: clamp(112px, 8vw, 138px) !important;
  height: clamp(112px, 8vw, 138px) !important;
  overflow: visible !important;
}

body.possession-rush-active .possession-rush-emblem-img,
body.possession-rush-active .possession-rush-emblem-art-img {
  width: 120% !important;
  height: 120% !important;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px color-mix(in srgb, var(--rush-active-color, var(--cyan)) 40%, transparent))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.38));
}

body.possession-rush-active .possession-powershot-meters {
  grid-template-columns:
    minmax(250px, 420px)
    clamp(62px, 6vw, 86px)
    minmax(72px, 96px)
    clamp(62px, 6vw, 86px)
    minmax(250px, 420px) !important;
}

body.possession-rush-active .possession-powershot-meter {
  min-height: clamp(54px, 6.4vh, 70px) !important;
  grid-template-columns: clamp(48px, 4.4vw, 62px) minmax(170px, 1fr) !important;
  gap: clamp(10px, 1vw, 14px) !important;
  padding-inline: 4px !important;
}

body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] {
  grid-template-columns: minmax(170px, 1fr) clamp(48px, 4.4vw, 62px) !important;
}

body.possession-rush-active .possession-powershot-track {
  height: clamp(28px, 3.2vh, 36px) !important;
  min-width: 170px !important;
}

body.possession-rush-active .possession-powershot-icon {
  width: clamp(48px, 4.4vw, 62px) !important;
}

@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape), (max-height: 740px) {
  body.possession-rush-active .possession-rush-emblem {
    width: 82px !important;
    height: 82px !important;
  }

  body.possession-rush-active .possession-powershot-meters {
    grid-template-columns: minmax(190px, 1fr) 52px minmax(52px, 68px) 52px minmax(190px, 1fr) !important;
  }

  body.possession-rush-active .possession-powershot-meter,
  body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] {
    min-height: 50px !important;
  }

  body.possession-rush-active .possession-powershot-track {
    min-width: 130px !important;
    height: 24px !important;
  }
}

/* Season Underdog Boost final release and panel polish */
body.possession-rush-active .controls > .action-panel:last-child.possession-active,
body.possession-rush-active .controls > .action-panel:last-child {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.18) !important;
}

body.possession-rush-active .controls > .action-panel:last-child.possession-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 56%),
    rgba(4, 17, 31, 0.52) !important;
}

body.possession-rush-active .possession-underdog-emblem,
body.possession-rush-active .possession-underdog-emblem.is-active,
body.possession-rush-active .possession-underdog-emblem.is-activated,
body.possession-rush-active .possession-underdog-emblem.is-releasing,
body.possession-rush-active .possession-underdog-emblem.is-used {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

body.possession-rush-active .possession-underdog-emblem::before,
body.possession-rush-active .possession-underdog-emblem::after {
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body.possession-rush-active .possession-underdog-emblem::after {
  background:
    radial-gradient(circle, rgba(255, 244, 164, 0.38), transparent 0 38%, transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--underdog-boost-active-color, #4cc9f0) 44%, transparent), transparent 0 52%, transparent 76%) !important;
  mix-blend-mode: screen;
}

body.possession-rush-active .possession-underdog-emblem.is-releasing,
body.possession-rush-active .possession-underdog-emblem.is-used {
  filter: brightness(1.32) saturate(1.45) !important;
  animation: underdogBoostImpactSlamSeason 1180ms cubic-bezier(0.12, 0.92, 0.16, 1) both !important;
}

body.possession-rush-active .possession-underdog-emblem.is-releasing::before,
body.possession-rush-active .possession-underdog-emblem.is-used::before {
  inset: -24px !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle, rgba(255, 244, 164, 0.82), transparent 0 33%, transparent 62%),
    radial-gradient(circle, color-mix(in srgb, var(--underdog-boost-team-color, var(--cyan)) 70%, transparent), transparent 0 50%, transparent 74%) !important;
  filter: blur(4px);
  animation: underdogBoostImpactShockwaveSeason 1180ms ease-out both !important;
}

body.possession-rush-active .possession-underdog-emblem.is-releasing::after,
body.possession-rush-active .possession-underdog-emblem.is-used::after {
  inset: -30px !important;
  opacity: 1 !important;
  background:
    conic-gradient(from 0deg, transparent 0 9%, rgba(255, 244, 164, 0.94) 10% 14%, transparent 15% 28%, color-mix(in srgb, var(--underdog-boost-team-color, var(--cyan)) 78%, transparent) 29% 35%, transparent 36% 100%),
    radial-gradient(circle, rgba(255, 255, 255, 0.34), transparent 0 28%, transparent 72%) !important;
  animation: underdogBoostImpactBurstSeason 980ms ease-out both !important;
}

body.possession-rush-active .possession-underdog-emblem.is-releasing .possession-underdog-emblem-icon-img,
body.possession-rush-active .possession-underdog-emblem.is-used .possession-underdog-emblem-icon-img {
  filter:
    drop-shadow(0 0 22px rgba(255, 244, 164, 0.94))
    drop-shadow(0 0 32px color-mix(in srgb, var(--underdog-boost-team-color, var(--cyan)) 78%, transparent))
    drop-shadow(0 8px 13px rgba(0, 0, 0, 0.42)) !important;
  animation: underdogBoostIconImpactSeason 980ms cubic-bezier(0.12, 0.92, 0.16, 1) both !important;
}

body.possession-underdog-boost-used::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 164, 0.42), transparent 0 19%, transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(76, 201, 240, 0.24), transparent 0 34%, transparent 68%) !important;
  animation: underdogBoostScreenImpactSeason 1180ms ease-out both !important;
}

.powershot-broadcast.boost-variant-underdog.is-used {
  border-color: rgba(255, 244, 164, 0.96) !important;
  box-shadow:
    inset 0 0 54px rgba(247, 216, 74, 0.28),
    0 20px 56px rgba(0, 0, 0, 0.58),
    0 0 84px color-mix(in srgb, var(--powershot-broadcast-color, #4cc9f0) 72%, transparent) !important;
  filter: saturate(1.22) brightness(1.08);
}

.powershot-broadcast.boost-variant-underdog.is-used strong {
  text-shadow:
    0 0 22px rgba(255, 244, 164, 0.82),
    0 0 42px rgba(76, 201, 240, 0.52),
    0 5px 16px rgba(0, 0, 0, 0.78) !important;
}

@keyframes underdogBoostImpactSlamSeason {
  0% { transform: translateX(0) scale(1) rotate(0deg); }
  16% { transform: translateX(-3px) scale(1.2) rotate(-5deg); }
  34% { transform: translateX(4px) scale(1.34) rotate(4deg); }
  54% { transform: translateX(-2px) scale(1.08) rotate(-2deg); }
  78% { transform: translateX(1px) scale(1.14) rotate(1deg); }
  100% { transform: translateX(0) scale(1) rotate(0deg); }
}

@keyframes underdogBoostImpactShockwaveSeason {
  0% { opacity: 0; transform: scale(0.56); }
  15% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.25); }
}

@keyframes underdogBoostImpactBurstSeason {
  0% { opacity: 0; transform: scale(0.48) rotate(0deg); }
  16% { opacity: 1; transform: scale(1.06) rotate(18deg); }
  100% { opacity: 0; transform: scale(1.9) rotate(72deg); }
}

@keyframes underdogBoostIconImpactSeason {
  0% { transform: scale(1) rotate(0deg); }
  18% { transform: scale(1.48) rotate(-8deg); }
  46% { transform: scale(1.14) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes underdogBoostScreenImpactSeason {
  0% { opacity: 0; transform: scale(0.98); }
  16% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* Season Duel Mode clean center header */
body:not(.possession-rush-active) .duel-meta .level-badge,
body:not(.possession-rush-active) .duel-meta .cup-badge,
body:not(.possession-rush-active) .duel-meta .season-gameplay-chip,
body:not(.possession-rush-active) .duel-meta .eyebrow {
  display: none !important;
}

body:not(.possession-rush-active) .duel-meta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

body:not(.possession-rush-active) .round-timer {
  margin-inline: auto !important;
}

body:not(.possession-rush-active) .active-side,
body:not(.possession-rush-active) .active-participant {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.possession-rush-active) .active-side.team-a,
body:not(.possession-rush-active) .active-participant.team-a {
  color: color-mix(in srgb, var(--team-a-color) 78%, white 22%) !important;
}

body:not(.possession-rush-active) .active-side.team-b,
body:not(.possession-rush-active) .active-participant.team-b {
  color: color-mix(in srgb, var(--team-b-color) 78%, white 22%) !important;
}

/* Verified built-in vocabulary package quickstart */
.built-in-package-quickstart {
  margin: 18px 0 24px;
  padding: 20px;
  border: 1px solid rgba(76, 201, 240, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(16, 42, 67, 0.9), rgba(20, 63, 86, 0.82)),
    rgba(8, 20, 34, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.2);
}

.built-in-package-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.built-in-package-heading .setup-section-title {
  margin: 0 0 5px;
  color: rgba(197, 235, 241, 0.78);
}

.built-in-package-heading h3 {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: #ffffff;
}

.built-in-package-status {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(213, 166, 46, 0.42);
  border-radius: 999px;
  background: rgba(213, 166, 46, 0.12);
  color: #f4d681;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.built-in-package-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(220px, 1.35fr) minmax(230px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.built-in-package-grid .text-setting {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(2, 15, 27, 0.42);
}

.built-in-package-grid .text-setting > span {
  color: rgba(232, 245, 248, 0.76);
  font-size: 0.78rem;
  font-weight: 750;
}

.built-in-package-grid select {
  width: 100%;
  margin-top: 7px;
}

.built-in-package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.built-in-package-actions .tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.built-in-package-actions img,
.vocab-builder-step-title img,
.vocab-source-button img,
.vocab-theme-filter label img,
.vocab-seed-field img,
.icon-tool img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.vocab-builder-step {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  background: rgba(2, 15, 27, 0.34);
}

.vocab-builder-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
  color: #effbff;
  font-size: 0.86rem;
  font-weight: 850;
}

.vocab-source-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(250px, 1.4fr) minmax(180px, 0.8fr);
  gap: 10px;
}

.vocab-source-card {
  min-height: 70px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(2, 9, 18, 0.5);
  color: #eef8fa;
}

.vocab-source-card {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.vocab-source-card.is-primary {
  border-color: rgba(76, 201, 240, 0.42);
}

.vocab-source-card strong,
.vocab-source-card small {
  display: block;
}

.vocab-source-card small {
  margin-top: 3px;
  color: rgba(226, 240, 244, 0.62);
}

.vocab-source-button {
  width: 100%;
  text-align: left;
  font: inherit;
}

.vocab-chip {
  position: relative;
}

.vocab-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vocab-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(2, 9, 18, 0.46);
  color: rgba(238, 248, 250, 0.8);
  font-size: 0.78rem;
  font-weight: 760;
  cursor: pointer;
}

.vocab-chip input:checked + span {
  border-color: rgba(76, 201, 240, 0.62);
  background: rgba(76, 201, 240, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(76, 201, 240, 0.12);
}

.vocab-builder-filter-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1.1fr 0.7fr;
  gap: 10px;
}

.vocab-builder-filter-grid fieldset,
.vocab-builder-options > fieldset {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.vocab-builder-filter-grid legend,
.vocab-builder-options legend {
  color: rgba(232, 245, 248, 0.7);
  font-size: 0.75rem;
  font-weight: 800;
}

.vocab-builder-filter-grid select {
  width: 100%;
}

.vocab-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vocab-choice-row label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #eef8fa;
  font-size: 0.8rem;
}

.vocab-theme-filter {
  display: grid;
  grid-template-columns: auto minmax(170px, 0.4fr) 1fr;
  gap: 9px;
  align-items: start;
  margin-top: 11px;
}

.vocab-theme-filter > label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  color: rgba(232, 245, 248, 0.78);
  font-size: 0.78rem;
  font-weight: 800;
}

.vocab-theme-chips {
  max-height: 120px;
  overflow: auto;
  padding: 2px;
}

.vocab-safe-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  color: rgba(238, 248, 250, 0.82);
  font-size: 0.8rem;
}

.vocab-builder-options {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 12px;
}

.vocab-seed-field {
  display: grid;
  gap: 7px;
  color: rgba(232, 245, 248, 0.76);
  font-size: 0.78rem;
  font-weight: 800;
}

.vocab-seed-field > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vocab-seed-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.vocab-seed-control input {
  min-width: 0;
}

.icon-tool {
  display: grid;
  min-width: 40px;
  place-items: center;
}

.vocab-selection-preview {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid rgba(76, 201, 240, 0.28);
  border-radius: 12px;
  background: rgba(1, 8, 15, 0.5);
}

.vocab-selection-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ffffff;
}

.vocab-selection-preview-heading span {
  color: #9fdcec;
  font-size: 0.78rem;
  font-weight: 750;
}

.vocab-selection-preview ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  max-height: 240px;
  margin: 11px 0 0;
  overflow: auto;
  padding-left: 26px;
  color: rgba(238, 248, 250, 0.88);
  font-size: 0.82rem;
}

.built-in-package-quickstart > .setup-hint {
  margin: 12px 0 0;
  color: rgba(226, 240, 244, 0.72);
}

@media (max-width: 900px) {
  .vocab-source-grid,
  .vocab-builder-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vocab-theme-filter {
    grid-template-columns: 1fr;
  }

  .built-in-package-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .built-in-package-heading {
    flex-direction: column;
  }

  .built-in-package-grid {
    grid-template-columns: 1fr;
  }

  .vocab-source-grid,
  .vocab-builder-filter-grid,
  .vocab-builder-options {
    grid-template-columns: 1fr;
  }

  .vocab-selection-preview ol {
    grid-template-columns: 1fr;
  }
}

/* Vocabulary Center: package browsing belongs to Add Vocabulary, not Quick Game. */
.quick-active-vocabulary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 22px;
  padding: 16px;
  border: 1px solid rgba(76, 201, 240, 0.28);
  border-radius: 14px;
  background: rgba(4, 20, 33, 0.62);
}

.quick-active-vocabulary-main,
.quick-active-vocabulary-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-active-vocabulary-main > img {
  width: 30px;
  height: 30px;
  padding: 8px;
  border: 1px solid rgba(76, 201, 240, 0.32);
  border-radius: 10px;
  background: rgba(76, 201, 240, 0.12);
  filter: brightness(0) invert(1);
}

.quick-active-vocabulary h3,
.vocabulary-center h3,
.vocabulary-center h4 {
  margin: 0;
  color: #ffffff;
}

.quick-active-vocabulary p {
  margin: 3px 0 0;
  color: rgba(226, 240, 244, 0.7);
  font-size: 0.82rem;
}

.quick-active-vocabulary .setup-section-title {
  margin: 0 0 3px;
}

.quick-active-vocabulary-actions .tool,
.vocabulary-source-nav-card,
.vocab-topic-card,
.vocab-package-detail-actions .tool,
.built-in-package-actions .tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.quick-active-vocabulary-actions img,
.vocabulary-source-nav-card img,
.vocab-topic-card img,
.vocab-package-detail-actions img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.quick-active-vocabulary-preview {
  flex: 0 0 100%;
  width: 100%;
  max-height: 200px;
  overflow: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.quick-active-vocabulary:has(.quick-active-vocabulary-preview:not([hidden])) {
  flex-wrap: wrap;
}

.quick-active-vocabulary-preview ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 22px;
  margin: 0;
  padding-left: 24px;
  color: rgba(238, 248, 250, 0.86);
  font-size: 0.8rem;
}

.vocabulary-center {
  display: grid;
  gap: 15px;
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid rgba(76, 201, 240, 0.3);
  border-radius: 16px;
  background: rgba(4, 20, 33, 0.56);
}

.vocabulary-center-heading,
.vocab-package-detail-heading,
.vocab-package-detail-actions,
.vocab-selection-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.vocabulary-center-heading .setup-section-title {
  margin: 0 0 4px;
}

.vocabulary-center-heading .setup-hint {
  margin: 5px 0 0;
}

.vocabulary-source-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.vocabulary-source-nav-card {
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(2, 9, 18, 0.5);
  color: #eef8fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vocabulary-source-nav-card.is-active {
  border-color: rgba(76, 201, 240, 0.68);
  background: rgba(76, 201, 240, 0.14);
  box-shadow: inset 0 0 0 1px rgba(76, 201, 240, 0.12);
}

.vocabulary-source-nav-card img {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.vocabulary-source-nav-card strong,
.vocabulary-source-nav-card small {
  display: block;
}

.vocabulary-source-nav-card small {
  margin-top: 4px;
  color: rgba(226, 240, 244, 0.62);
}

.vocabulary-center-built-in {
  display: grid;
  gap: 14px;
}

.vocab-center-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
}

.vocab-center-section-heading h4 {
  font-size: 1rem;
}

.vocab-center-section-heading p {
  margin: 3px 0 0;
  color: rgba(226, 240, 244, 0.65);
  font-size: 0.78rem;
}

.vocab-center-step {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(76, 201, 240, 0.5);
  border-radius: 50%;
  background: rgba(76, 201, 240, 0.14);
  color: #bdeeff;
  font-weight: 900;
}

.vocab-grade-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.vocab-grade-card {
  position: relative;
}

.vocab-grade-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.vocab-grade-card > span {
  display: grid;
  min-height: 66px;
  align-content: center;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(2, 9, 18, 0.48);
  color: #eef8fa;
  cursor: pointer;
}

.vocab-grade-card small {
  margin-top: 4px;
  color: rgba(226, 240, 244, 0.6);
}

.vocab-grade-card input:checked + span {
  border-color: rgba(82, 255, 168, 0.58);
  background: rgba(82, 255, 168, 0.12);
  box-shadow: inset 0 0 0 1px rgba(82, 255, 168, 0.1);
}

.vocab-grade-card input:focus-visible + span,
.vocab-topic-card:focus-visible,
.vocabulary-source-nav-card:focus-visible,
.vocab-selected-package-chip:focus-visible {
  outline: 2px solid rgba(247, 216, 74, 0.78);
  outline-offset: 3px;
}

.vocab-grade-mode-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px 15px;
  color: rgba(238, 248, 250, 0.82);
  font-size: 0.8rem;
}

.vocab-grade-mode-row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vocab-grade-mode-row small {
  flex: 1 1 100%;
  color: rgba(226, 240, 244, 0.58);
  font-size: 0.7rem;
}

.vocab-quick-picks,
.vocab-topic-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.vocab-topic-browser {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.vocab-topic-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(2, 9, 18, 0.5);
}

.vocab-topic-search img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

.vocab-topic-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.vocab-topic-card {
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(2, 9, 18, 0.44);
  color: #eef8fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vocab-topic-card:hover {
  border-color: rgba(76, 201, 240, 0.52);
  background: rgba(76, 201, 240, 0.1);
}

.vocab-topic-card > span {
  min-width: 0;
  flex: 1;
}

.vocab-topic-card strong,
.vocab-topic-card small {
  display: block;
}

.vocab-topic-card .vocab-package-description {
  color: rgba(232, 245, 248, 0.82);
  font-size: 0.76rem;
  line-height: 1.35;
}

.vocab-topic-card em {
  display: block;
  margin-top: 6px;
  color: rgba(159, 232, 255, 0.76);
  font-size: 0.68rem;
  font-style: normal;
  line-height: 1.35;
}

.vocab-core-package-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vocab-core-package-grid .vocab-topic-card {
  min-height: 142px;
  align-items: flex-start;
}

.vocab-topic-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vocab-quick-picks .vocab-topic-card {
  min-height: 78px;
  align-items: flex-start;
}

.vocab-quick-picks .vocab-topic-card > span,
.vocab-quick-picks .vocab-topic-card strong {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.vocab-quick-picks .vocab-topic-card strong {
  line-height: 1.2;
}

.vocab-topic-card small {
  margin-top: 3px;
  color: rgba(226, 240, 244, 0.6);
  font-size: 0.72rem;
}

.vocab-topic-card b {
  color: #9fe8ff;
  font-size: 0.68rem;
  text-transform: uppercase;
}

.vocab-topic-card.is-quick-pick {
  border-color: rgba(213, 166, 46, 0.3);
  background: rgba(213, 166, 46, 0.08);
}

.vocab-package-detail {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(76, 201, 240, 0.38);
  border-radius: 14px;
  background: rgba(1, 8, 15, 0.72);
}

.vocab-package-detail[hidden] {
  display: none;
}

.vocab-package-detail-heading p {
  margin: 4px 0 0;
  color: rgba(226, 240, 244, 0.68);
  font-size: 0.78rem;
}

.vocab-package-tools {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(240px, auto) auto auto;
  gap: 9px;
  align-items: end;
}

.vocab-package-tools fieldset {
  margin: 0;
  padding: 7px 10px 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
}

.vocab-package-tools legend {
  color: rgba(232, 245, 248, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
}

.vocab-package-table-wrap {
  max-height: 410px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
}

.vocab-package-table {
  width: 100%;
  border-collapse: collapse;
  color: rgba(238, 248, 250, 0.9);
  font-size: 0.78rem;
}

.vocab-package-table th,
.vocab-package-table td {
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
  vertical-align: top;
}

.vocab-package-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #0a1d2d;
  color: #bdeeff;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.vocab-package-table td:nth-child(2),
.vocab-package-table td:nth-child(3) {
  font-weight: 750;
}

.vocab-difficulty-badge {
  display: inline-flex;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 850;
}

.vocab-difficulty-badge.is-normal {
  color: #9effcd;
}

.vocab-difficulty-badge.is-challenge {
  color: #ffe08a;
}

.vocab-difficulty-badge.is-elite {
  color: #ffabab;
}

.vocab-package-detail-actions {
  align-items: center;
}

.vocab-package-detail-actions > span {
  margin-right: auto;
  color: rgba(226, 240, 244, 0.7);
  font-size: 0.78rem;
}

.vocab-selected-tray {
  position: sticky;
  bottom: 8px;
  z-index: 4;
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(82, 255, 168, 0.36);
  border-radius: 14px;
  background: rgba(4, 20, 33, 0.96);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32);
}

.vocab-selected-package-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vocab-selected-package-chip {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(82, 255, 168, 0.32);
  border-radius: 10px;
  background: rgba(82, 255, 168, 0.09);
  color: #effff7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.vocab-selected-package-chip small {
  color: rgba(226, 240, 244, 0.62);
}

.vocab-selected-package-chip b {
  color: #ffbcbc;
  font-size: 0.66rem;
  text-transform: uppercase;
}

.vocab-selection-basics {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(260px, 1.3fr);
  gap: 10px;
}

.vocab-selection-basics > label {
  display: grid;
  gap: 6px;
  color: rgba(232, 245, 248, 0.76);
  font-size: 0.76rem;
  font-weight: 800;
}

.vocab-game-options {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(2, 9, 18, 0.28);
}

.vocab-game-options.is-primary {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.vocab-level-availability {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(111, 225, 171, 0.32);
  border-radius: 10px;
  background: rgba(34, 117, 82, 0.14);
  color: #d9ffeb;
  font-size: 0.88rem;
  font-weight: 700;
}

.vocab-selection-target-notice {
  border: 1px solid rgba(247, 216, 74, 0.36);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(247, 216, 74, 0.1);
  color: #fff1a8;
  font-size: 0.8rem;
  font-weight: 850;
}

.vocab-selection-target-notice[hidden] {
  display: none;
}

.vocab-game-options > summary {
  padding: 11px 12px;
  color: rgba(226, 240, 244, 0.74);
  font-size: 0.74rem;
  font-weight: 820;
  cursor: pointer;
}

.vocab-game-options[open] {
  display: grid;
  gap: 10px;
  padding-bottom: 10px;
}

.vocab-game-options[open] > .vocab-selection-basics {
  margin: 0 10px;
}

.vocab-selection-preview {
  border-color: rgba(247, 216, 74, 0.34);
  background: rgba(1, 8, 15, 0.92);
}

.vocab-selection-preview-heading > div {
  display: grid;
  gap: 4px;
}

.vocab-selection-preview li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vocab-review-remove {
  border: 0;
  background: transparent;
  color: #ffbcbc;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 980px) {
  .vocab-grade-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vocab-package-tools {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .quick-active-vocabulary,
  .vocabulary-center-heading,
  .vocab-package-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-active-vocabulary-actions {
    flex-wrap: wrap;
  }

  .vocabulary-source-nav,
  .vocab-quick-picks,
  .vocab-topic-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vocab-grade-card-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vocab-selection-basics {
    grid-template-columns: 1fr;
  }

  .vocab-selected-tray {
    position: static;
  }
}

@media (max-width: 520px) {
  .vocabulary-source-nav,
  .vocab-quick-picks,
  .vocab-topic-card-grid,
  .vocab-grade-card-grid,
  .vocab-package-tools,
  .quick-active-vocabulary-preview ol {
    grid-template-columns: 1fr;
  }

  .vocab-package-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Vocabulary Center follow-up: one source view at a time and no floating overlay. */
.legacy-vocabulary-inputs {
  display: none !important;
}

#setupWordBank[data-vocab-view="built-in"] > .vocabulary-banks,
#setupWordBank[data-vocab-view="built-in"] > .legacy-vocabulary-inputs {
  display: none;
}

#setupWordBank[data-vocab-view="saved"] .vocabulary-center-built-in,
#setupWordBank[data-vocab-view="import"] .vocabulary-center-built-in {
  display: none;
}

#setupWordBank[data-vocab-view="saved"] .smart-import-panel {
  display: none;
}

#setupWordBank[data-vocab-view="import"] .bank-fill-actions,
#setupWordBank[data-vocab-view="import"] .bank-items,
#setupWordBank[data-vocab-view="import"] .legacy-vocabulary-inputs {
  display: none;
}

.vocab-selected-tray {
  position: static;
  z-index: auto;
  bottom: auto;
  padding: 14px;
  border-color: rgba(82, 255, 168, 0.28);
  background: #061827;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vocab-selected-package-chips {
  gap: 6px;
}

.vocab-selected-package-chip {
  display: inline-grid;
  max-width: min(320px, 100%);
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.vocab-selected-package-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vocab-selected-package-chip small,
.vocab-selected-package-chip b {
  font-size: 0.62rem;
}

.vocab-selection-basics {
  align-items: stretch;
}

#setupWordBank[data-vocab-view="saved"] .vocabulary-banks,
#setupWordBank[data-vocab-view="import"] .vocabulary-banks {
  margin-top: 0;
  padding: 14px;
  border: 1px solid rgba(76, 201, 240, 0.22);
  border-radius: 14px;
  background: rgba(4, 20, 33, 0.56);
  box-shadow: none;
}

#setupWordBank[data-vocab-view="saved"] .vocabulary-banks::before,
#setupWordBank[data-vocab-view="saved"] .vocabulary-banks::after,
#setupWordBank[data-vocab-view="import"] .vocabulary-banks::before,
#setupWordBank[data-vocab-view="import"] .vocabulary-banks::after {
  display: none;
}

#setupWordBank[data-vocab-view="import"] .smart-import-panel {
  order: 1;
}

#setupWordBank[data-vocab-view="import"] .manual-word-entry {
  order: 2;
}

#setupWordBank[data-vocab-view="import"] .bank-editor-top {
  order: 0;
}

.bank-fill-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(82, 255, 168, 0.24);
  border-radius: 10px;
  background: rgba(82, 255, 168, 0.06);
}

.bank-fill-actions > div {
  display: grid;
  gap: 3px;
}

.bank-fill-actions strong {
  color: #effff7;
  font-size: 0.84rem;
}

.bank-fill-actions small {
  color: rgba(226, 240, 244, 0.68);
  font-size: 0.72rem;
}

.bank-fill-actions .tool {
  min-height: 42px;
}

.bank-fill-actions .tool img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1);
}

.vocabulary-source-nav-card[aria-pressed="false"] {
  opacity: 0.78;
}

.vocabulary-source-nav-card[aria-pressed="true"] {
  opacity: 1;
}

.vocab-package-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.7fr);
  gap: 12px;
  align-items: start;
}

.vocab-package-workspace:not(:has(.vocab-package-detail:not([hidden]))) {
  grid-template-columns: 1fr;
}

.vocab-package-browser-pane {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.vocab-package-browser-pane > .setup-section-title {
  margin: 0;
}

.vocab-package-browser-pane .vocab-quick-picks {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vocab-all-topics {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(2, 9, 18, 0.38);
}

.vocab-all-topics summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: #dff7ff;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.vocab-all-topics summary small {
  color: rgba(226, 240, 244, 0.56);
  font-size: 0.68rem;
  font-weight: 650;
}

.vocab-all-topics .vocab-topic-browser {
  padding: 0 10px 10px;
}

.vocab-all-topics .vocab-topic-card-grid {
  grid-template-columns: 1fr;
  max-height: 410px;
  overflow: auto;
  padding-right: 3px;
}

.vocab-topic-card-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.vocab-topic-card-state img {
  width: 14px;
  height: 14px;
}

.vocab-topic-card.is-selected {
  border-color: rgba(82, 255, 168, 0.54);
  background: rgba(82, 255, 168, 0.1);
}

.vocab-topic-card.is-selected .vocab-topic-card-state {
  color: #9effcd;
}

.vocab-package-workspace .vocab-package-detail {
  min-width: 0;
  margin: 0;
}

@media (max-width: 1300px) {
  .vocab-package-tools {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 980px) {
  .vocab-package-workspace,
  .vocab-package-workspace:not(:has(.vocab-package-detail:not([hidden]))) {
    grid-template-columns: 1fr;
  }

  .vocab-package-browser-pane .vocab-quick-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-fill-actions {
    grid-template-columns: 1fr 1fr;
  }

  .bank-fill-actions > div {
    grid-column: 1 / -1;
  }

  .smart-import-actions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .vocab-core-package-grid {
    grid-template-columns: 1fr;
  }
  .vocab-package-browser-pane .vocab-quick-picks {
    grid-template-columns: 1fr;
  }

  .vocab-all-topics summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .bank-fill-actions {
    grid-template-columns: 1fr;
  }

  .bank-fill-actions > div {
    grid-column: auto;
  }

  .smart-import-actions {
    grid-template-columns: 1fr;
  }
}

/* Responsive gameplay stability: keep both match modes readable without overlap. */
.word-display {
  width: min(84%, 1060px);
  height: clamp(132px, 34%, 210px);
  padding-inline: clamp(22px, 3.2vw, 44px);
}

.word-display strong {
  font-size: clamp(56px, 6.4vw, 116px);
}

body.possession-rush-active .possession-rush-panel,
body.possession-rush-active .possession-rush-panel.no-rush-emblem {
  display: block;
  width: min(100%, 900px);
  margin: 0 auto;
}

body.possession-rush-active .possession-rush-main-grid {
  width: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  .app,
  body.possession-rush-active .app {
    grid-template-rows: minmax(196px, 29dvh) minmax(0, 1fr) 126px;
    gap: 8px;
    padding: 10px 12px;
    overflow: hidden;
    perspective: none;
  }

  .scoreboard,
  body.possession-rush-active .scoreboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(108px, auto) minmax(76px, 1fr);
    gap: 6px 8px;
    min-width: 0;
    overflow: visible;
  }

  .scoreboard > .duel-card,
  body.possession-rush-active .scoreboard > .duel-card {
    order: -1;
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 108px;
    padding: 6px 10px;
    overflow: hidden;
  }

  .scoreboard > .team-card,
  body.possession-rush-active .scoreboard > .team-card {
    grid-row: 2;
    min-width: 0;
    min-height: 76px;
    padding: 7px 10px;
  }

  .scoreboard > .team-card .trophy-row {
    top: 4px;
    gap: 7px;
  }

  .scoreboard > .team-card .team-label {
    font-size: 12px;
  }

  .scoreboard > .team-card .score-row {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    margin-top: 20px;
  }

  .scoreboard > .team-card .score-row strong {
    font-size: clamp(32px, 6vw, 46px);
  }

  .scoreboard > .team-card .score-adjust {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  body:not(.possession-rush-active) .duel-card {
    min-height: 108px;
    padding-block: 5px 6px;
  }

  body:not(.possession-rush-active) .duel-topline {
    margin-bottom: 3px;
  }

  body:not(.possession-rush-active) .round-timer {
    min-width: 0;
    min-height: 34px;
    width: min(100%, 500px);
    gap: 8px;
    padding: 4px 10px;
  }

  body:not(.possession-rush-active) .round-timer-label,
  body:not(.possession-rush-active) .round-timer-status {
    font-size: 0.68rem;
  }

  body:not(.possession-rush-active) .round-timer strong {
    font-size: clamp(1.35rem, 4vw, 1.9rem);
  }

  body:not(.possession-rush-active) .duel-line {
    gap: 7px;
    margin-top: 2px;
    font-size: clamp(1.3rem, 4.2vw, 1.85rem);
  }

  body:not(.possession-rush-active) .duel-line span {
    min-height: 31px;
    padding: 2px 8px;
  }

  body:not(.possession-rush-active) .duel-line b {
    min-width: 54px;
    height: 31px;
    font-size: 1rem;
  }

  body:not(.possession-rush-active) .active-duel-row {
    gap: 8px;
    margin-top: 3px;
  }

  body:not(.possession-rush-active) .active-side,
  body:not(.possession-rush-active) .active-participant {
    min-height: 24px;
    padding: 3px 7px;
  }

  body:not(.possession-rush-active) .active-side span,
  body:not(.possession-rush-active) .active-side strong,
  body:not(.possession-rush-active) .active-participant strong {
    font-size: 0.76rem;
  }

  body.possession-rush-active .duel-topline {
    top: 4px;
    right: 7px;
    left: auto;
    transform: none;
  }

  body.possession-rush-active .round-timer {
    padding: 3px 6px;
  }

  body.possession-rush-active .round-timer-status {
    display: none;
  }

  body.possession-rush-active .possession-rush-panel,
  body.possession-rush-active .possession-rush-panel.no-rush-emblem {
    width: min(100%, 760px);
    padding-inline: 4px;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(82px, 0.72fr) minmax(0, 1.9fr) minmax(82px, 0.72fr);
    gap: clamp(6px, 1.2vw, 10px);
  }

  body.possession-rush-active .possession-rush-timer-card,
  body.possession-rush-active .possession-rush-center-card {
    min-height: 88px;
    padding: 6px 8px;
  }

  body.possession-rush-active .possession-rush-center-card {
    grid-template-columns: minmax(58px, 0.34fr) minmax(0, 1fr);
    gap: 4px 8px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 62px !important;
    height: 62px !important;
  }

  body.possession-rush-active #possessionRushTeam {
    font-size: clamp(1.2rem, 4.1vw, 1.9rem);
  }

  body.possession-rush-active #possessionRushPair {
    font-size: clamp(0.76rem, 2vw, 0.98rem);
  }

  body.possession-rush-active .possession-rush-timer-card > span {
    font-size: 0.62rem;
  }

  body.possession-rush-active .possession-rush-timer-card > b {
    font-size: clamp(1.65rem, 5vw, 2.45rem);
  }

  .controls,
  body.possession-rush-active .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 66px 44px;
    gap: 5px 7px;
    min-height: 0;
    padding: 5px 6px;
    overflow: hidden;
  }

  .controls > .action-panel,
  body.possession-rush-active .controls > .action-panel {
    grid-row: 1;
    min-height: 0;
    gap: 4px 6px;
    padding: 4px 5px;
  }

  .controls > .middle-panel,
  body.possession-rush-active .controls > .middle-panel {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    min-height: 0;
  }

  .controls > .middle-panel .tool,
  body.possession-rush-active .controls > .middle-panel .tool {
    grid-column: auto !important;
  }

  .controls .action-title {
    min-height: 13px;
    font-size: 0.72rem;
    line-height: 1;
  }

  .controls .action,
  body.possession-rush-active .controls .action {
    min-height: 42px;
    padding: 4px 7px;
    font-size: clamp(1rem, 3vw, 1.35rem);
    line-height: 1;
    white-space: nowrap;
  }

  .controls .action strong {
    font-size: inherit;
    line-height: 1;
    white-space: nowrap;
  }

  .controls .tool,
  body.possession-rush-active .controls .tool {
    min-height: 40px;
    padding: 5px 7px;
    font-size: clamp(0.68rem, 1.8vw, 0.84rem);
    line-height: 1.05;
    white-space: normal;
  }

  .word-display {
    width: min(90%, 920px);
    height: clamp(154px, 48%, 205px);
    padding: 14px 20px;
  }

  .word-display.answer-visible {
    padding-top: 25px;
  }

  .word-display strong {
    font-size: clamp(52px, 7.2vw, 78px);
  }
}

@media (max-width: 640px) {
  .app,
  body.possession-rush-active .app {
    grid-template-rows: minmax(210px, 32dvh) minmax(0, 1fr) 132px;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(66px, 0.64fr) minmax(0, 1.8fr) minmax(66px, 0.64fr);
    gap: 4px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 48px !important;
    height: 48px !important;
  }

  .controls .tool,
  body.possession-rush-active .controls .tool {
    font-size: 0.64rem;
    padding-inline: 4px;
  }
}

/* Possession Rush compact match frame: prioritize the live pitch at classroom sizes. */
@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    min-width: 0;
  }

  body.possession-rush-active .app {
    width: 100%;
    grid-template-rows: minmax(150px, 22dvh) minmax(0, 1fr) 104px;
    gap: 6px;
    padding: 7px 9px;
  }

  body.possession-rush-active .scoreboard {
    grid-template-rows: 82px 62px;
    gap: 4px 7px;
  }

  body.possession-rush-active .scoreboard > .duel-card {
    min-height: 82px;
    padding: 3px 7px;
  }

  body.possession-rush-active .scoreboard > .team-card {
    min-height: 62px;
    padding: 4px 8px;
  }

  body.possession-rush-active .scoreboard > .team-card .trophy-row {
    top: 2px;
    gap: 5px;
  }

  body.possession-rush-active .scoreboard > .team-card .score-row {
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    margin-top: 14px;
  }

  body.possession-rush-active .scoreboard > .team-card .score-row strong {
    font-size: clamp(27px, 5vw, 38px);
  }

  body.possession-rush-active .scoreboard > .team-card .score-adjust {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(70px, 0.66fr) minmax(0, 2fr) minmax(70px, 0.66fr);
    gap: 5px;
  }

  body.possession-rush-active .possession-rush-timer-card,
  body.possession-rush-active .possession-rush-center-card {
    min-height: 68px;
    padding: 4px 6px;
  }

  body.possession-rush-active .possession-rush-center-card {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 3px 6px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 46px !important;
    height: 46px !important;
  }

  body.possession-rush-active .possession-rush-timer-card > b {
    font-size: clamp(1.45rem, 4vw, 2rem);
  }

  body.possession-rush-active .controls {
    grid-template-rows: 53px 36px;
    gap: 4px 6px;
    padding: 4px 5px;
  }

  body.possession-rush-active .controls > .action-panel {
    padding: 3px 4px;
  }

  body.possession-rush-active .controls .action-title {
    min-height: 10px;
    font-size: 0.66rem;
  }

  body.possession-rush-active .controls .action {
    min-height: 34px;
    padding: 3px 6px;
    font-size: clamp(0.92rem, 2.6vw, 1.18rem);
  }

  body.possession-rush-active .controls .tool {
    min-height: 32px;
    padding: 3px 5px;
    font-size: clamp(0.62rem, 1.6vw, 0.76rem);
  }

  body.possession-rush-active .possession-powershot-meters {
    left: 8px;
    right: 8px;
    bottom: 7px;
    grid-template-columns: minmax(0, 1fr) 38px 46px 38px minmax(0, 1fr) !important;
    gap: 5px;
  }

  body.possession-rush-active .possession-powershot-meter,
  body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] {
    min-width: 0;
    min-height: 42px !important;
    gap: 5px !important;
    padding: 4px !important;
  }

  body.possession-rush-active .possession-powershot-meter {
    grid-template-columns: 34px minmax(0, 1fr) !important;
  }

  body.possession-rush-active .possession-powershot-meter[data-powershot-team="B"] {
    grid-template-columns: minmax(0, 1fr) 34px !important;
  }

  body.possession-rush-active .possession-powershot-track {
    width: 100%;
    min-width: 0 !important;
    height: 21px !important;
  }

  body.possession-rush-active .possession-powershot-icon {
    width: 34px !important;
  }

  body.possession-rush-active .possession-underdog-emblem {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Possession Rush viewport balance: keep the pitch dominant on desktop and projector windows. */
body.possession-rush-active .app {
  grid-template-rows: clamp(120px, 16vh, 148px) minmax(0, 1fr) clamp(86px, 10.5vh, 100px);
  gap: 8px;
  padding: 10px 14px;
}

body.possession-rush-active .scoreboard {
  min-height: 0;
}

body.possession-rush-active .scoreboard > .team-card,
body.possession-rush-active .scoreboard > .duel-card {
  min-height: 0;
  height: 100%;
}

body.possession-rush-active .scoreboard > .team-card {
  padding: 8px 12px 7px;
}

body.possession-rush-active .scoreboard > .team-card .score-row {
  margin-top: 18px;
}

body.possession-rush-active .scoreboard > .team-card .score-row strong {
  font-size: clamp(2.1rem, 3.6vw, 3.35rem);
}

body.possession-rush-active .scoreboard > .duel-card {
  padding: 7px 12px;
}

body.possession-rush-active .duel-topline {
  top: 4px;
  right: 8px;
  left: auto;
  transform: none;
}

body.possession-rush-active .possession-rush-command-panel,
body.possession-rush-active .possession-rush-panel,
body.possession-rush-active .possession-rush-panel.no-rush-emblem {
  width: min(100%, 880px);
  height: 100%;
  min-height: 0;
  padding: 0;
}

body.possession-rush-active .possession-rush-main-grid {
  height: 100%;
  grid-template-columns: minmax(112px, 0.78fr) minmax(320px, 1.55fr) minmax(112px, 0.78fr);
  gap: clamp(8px, 1.1vw, 16px);
}

body.possession-rush-active .possession-rush-timer-card,
body.possession-rush-active .possession-rush-center-card {
  min-height: 0;
  height: 100%;
  max-height: 124px;
  align-self: center;
}

body.possession-rush-active .possession-rush-center-card {
  grid-template-columns: clamp(64px, 5.4vw, 82px) minmax(0, 1fr);
  gap: 3px clamp(9px, 1vw, 15px);
  padding: 7px 11px;
}

body.possession-rush-active .possession-rush-emblem {
  width: clamp(64px, 5.4vw, 82px) !important;
  height: clamp(64px, 5.4vw, 82px) !important;
  border-radius: 12px;
}

body.possession-rush-active #possessionRushTeam {
  font-size: clamp(1.35rem, 1.9vw, 2.25rem);
  line-height: 0.96;
}

body.possession-rush-active #possessionRushTeam.team-name-long {
  font-size: clamp(1.18rem, 1.65vw, 1.95rem);
}

body.possession-rush-active #possessionRushTeam.team-name-very-long {
  font-size: clamp(1.02rem, 1.38vw, 1.62rem);
}

body.possession-rush-active #possessionRushTeam.team-name-ultra-long {
  font-size: clamp(0.9rem, 1.16vw, 1.35rem);
}

body.possession-rush-active #possessionRushPair {
  font-size: clamp(0.72rem, 0.84vw, 0.92rem);
}

body.possession-rush-active .possession-rush-pair-card {
  padding: 5px 10px;
}

body.possession-rush-active .possession-rush-timer-card > span {
  font-size: clamp(0.54rem, 0.62vw, 0.66rem);
}

body.possession-rush-active .possession-rush-timer-card > b {
  font-size: clamp(1.8rem, 3.3vw, 3rem);
}

body.possession-rush-active .controls {
  min-height: 0;
  gap: 7px;
  padding: 6px 8px;
}

body.possession-rush-active .action-panel {
  gap: 5px 7px;
  padding: 5px 7px;
}

body.possession-rush-active .action-title {
  min-height: 13px;
  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
}

body.possession-rush-active .controls .action {
  min-height: 42px;
  padding: 5px 8px;
}

body.possession-rush-active .controls .action strong {
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
}

body.possession-rush-active .middle-panel {
  gap: 6px;
}

body.possession-rush-active .middle-panel > .tool {
  min-height: 36px;
  padding: 5px 7px;
  font-size: clamp(0.64rem, 0.72vw, 0.76rem);
}

body.possession-rush-active .word-display {
  top: 10%;
  width: min(78%, 940px);
  height: clamp(112px, 27%, 154px);
  padding: 14px clamp(20px, 2.5vw, 34px);
}

body.possession-rush-active .word-display.answer-visible {
  padding-top: 24px;
}

body.possession-rush-active .word-display strong {
  font-size: clamp(40px, 4.6vw, 76px);
  line-height: 1;
}

@media (max-width: 980px) {
  body.possession-rush-active .app {
    grid-template-rows: clamp(132px, 21dvh, 150px) minmax(0, 1fr) clamp(86px, 14dvh, 104px);
    gap: 6px;
    padding: 7px 9px;
  }

  body.possession-rush-active .scoreboard {
    grid-template-rows: minmax(72px, 1.15fr) minmax(54px, 0.85fr);
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(66px, 0.68fr) minmax(0, 2fr) minmax(66px, 0.68fr);
  }

  body.possession-rush-active .word-display {
    width: min(84%, 760px);
    height: clamp(106px, 31%, 142px);
  }

  body.possession-rush-active .word-display strong {
    font-size: clamp(36px, 6vw, 62px);
  }
}

@media (max-height: 700px) and (min-width: 981px) {
  body.possession-rush-active .app {
    grid-template-rows: 112px minmax(0, 1fr) 82px;
    gap: 6px;
    padding: 7px 10px;
  }

  body.possession-rush-active .possession-rush-timer-card,
  body.possession-rush-active .possession-rush-center-card {
    max-height: 96px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 60px !important;
    height: 60px !important;
  }

  body.possession-rush-active .word-display {
    height: clamp(96px, 29%, 126px);
  }
}

/* ------------------------------------------------------------------ */
/* Saved list cards and Season Vocabulary (2026-09-14)                 */
/* ------------------------------------------------------------------ */

.saved-list-overview {
  display: grid;
  gap: 10px;
}

.saved-list-status {
  margin: 0;
}

.saved-list-cards,
.season-vocabulary-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.saved-list-card,
.season-vocabulary-list-card {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  background: rgba(2, 9, 18, 0.44);
  color: #eef8fa;
}

.saved-list-card.is-active {
  border-color: rgba(247, 216, 74, 0.72);
  background:
    linear-gradient(135deg, rgba(247, 216, 74, 0.15), transparent 62%),
    rgba(2, 9, 18, 0.5);
  box-shadow: inset 0 0 0 1px rgba(247, 216, 74, 0.18);
}

.saved-list-card.is-editing {
  outline: 2px solid rgba(76, 201, 240, 0.55);
  outline-offset: 2px;
}

.season-vocabulary-list-card.is-current {
  border-color: rgba(82, 255, 168, 0.55);
  background:
    linear-gradient(135deg, rgba(82, 255, 168, 0.1), transparent 62%),
    rgba(2, 9, 18, 0.5);
}

.saved-list-card-copy,
.season-vocabulary-list-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.saved-list-card-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.saved-list-card-title strong,
.season-vocabulary-list-copy strong {
  color: #f8fbff;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.saved-list-card small,
.season-vocabulary-list-copy small {
  display: block;
  color: rgba(226, 240, 244, 0.72);
  font-size: 12px;
  font-weight: 800;
  white-space: normal;
}

.saved-list-card .saved-list-card-season {
  color: #8fd6ff;
}

.saved-list-badge,
.season-vocabulary-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(82, 255, 168, 0.45);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(82, 255, 168, 0.14);
  color: #bfffe0;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.saved-list-badge.is-active {
  border-color: rgba(247, 216, 74, 0.72);
  background: rgba(247, 216, 74, 0.18);
  color: #fff2a0;
}

.saved-list-badge.is-editing {
  border-color: rgba(76, 201, 240, 0.6);
  background: rgba(76, 201, 240, 0.14);
  color: #bfeeff;
}

.season-vocabulary-badge.is-muted {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  color: #d5e8f7;
}

.season-vocabulary-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.season-vocabulary-badges:empty {
  display: none;
}

.saved-list-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.saved-list-card-actions .tool {
  flex: 1 1 auto;
  min-height: 0;
  padding: 8px 10px;
  font-size: 11px;
}

@media (min-width: 761px) {
  .vocabulary-banks .bank-controls {
    grid-template-columns: minmax(220px, 1fr) 190px;
  }

  .vocabulary-banks .bank-editor-top {
    grid-template-columns: minmax(0, 1fr) 150px 150px 120px;
  }
}

.season-vocabulary-block .season-vocabulary-card {
  width: 100%;
}

.season-vocabulary-copy .season-vocabulary-levels {
  color: rgba(159, 232, 255, 0.82);
}

.season-vocabulary-progress {
  display: grid;
  gap: 6px;
  max-width: 620px;
  margin-top: 6px;
}

.season-vocabulary-progress-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12px;
}

.season-vocabulary-progress-head b {
  color: #f8fbff;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.season-vocabulary-progress-head span {
  color: #fff2a0;
  font-weight: 1000;
}

.season-vocabulary-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.season-vocabulary-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #52ffa8, var(--gold));
  transition: width 320ms ease;
}

.season-vocabulary-copy .season-vocabulary-notice,
.season-vocabulary-copy .season-vocabulary-warning,
.season-vocabulary-copy .season-vocabulary-flash {
  margin-top: 4px;
  border-radius: 8px;
  padding: 7px 9px;
}

.season-vocabulary-copy .season-vocabulary-notice {
  border: 1px solid rgba(76, 201, 240, 0.32);
  background: rgba(76, 201, 240, 0.08);
  color: #bfeeff;
}

.season-vocabulary-copy .season-vocabulary-warning {
  border: 1px solid rgba(255, 99, 99, 0.42);
  background: rgba(255, 99, 99, 0.1);
  color: #ffd0d0;
}

.season-vocabulary-copy .season-vocabulary-flash {
  border: 1px solid rgba(82, 255, 168, 0.36);
  background: rgba(82, 255, 168, 0.1);
  color: #bfffe0;
}

.season-vocabulary-actions {
  align-items: flex-end;
}

.season-vocabulary-round-size,
.season-vocabulary-picker-field {
  display: grid;
  gap: 5px;
  color: #d5e8f7;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.season-vocabulary-picker-field {
  max-width: 360px;
}

.season-vocabulary-round-size select,
.season-vocabulary-picker-field select {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(1, 8, 16, 0.86);
  color: #f8fbff;
  font: inherit;
  text-transform: none;
}

.season-vocabulary-picker-backdrop {
  z-index: 160;
}

.season-vocabulary-picker {
  width: min(980px, 100%);
  max-height: min(880px, calc(100vh - 48px));
}

.season-vocabulary-picker:focus {
  outline: none;
}

.season-vocabulary-picker-current {
  margin: 0;
  border: 1px solid rgba(247, 216, 74, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(247, 216, 74, 0.08);
  color: #fff2a0;
  font-size: 13px;
  font-weight: 900;
}

.season-vocabulary-picker-body {
  display: grid;
  gap: 12px;
}

.season-vocabulary-picker-body .setup-hint {
  margin: 0;
}

.season-vocabulary-picker-footer {
  position: sticky;
  bottom: calc(-1 * clamp(16px, 2.4vw, 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
  background: #04101b;
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .season-vocabulary-picker-tabs,
  .season-vocabulary-package-grid {
    grid-template-columns: 1fr;
  }

  .season-vocabulary-picker-footer .tool {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Calm setup UI: quieter text, one gold action, "More options" boxes  */
/* (2026-09-14). Scoped to setup, Season Hub and the vocabulary dialog */
/* so gameplay controls keep their look.                               */
/* ------------------------------------------------------------------ */

:is(#setup, #seasonHubScreen, #seasonVocabularyPicker) .setup-hint {
  color: rgba(213, 232, 247, 0.74);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

:is(#setup, #seasonHubScreen, #seasonVocabularyPicker) .tool {
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

:is(#setup, #seasonHubScreen, #seasonVocabularyPicker) :is(
  .setup-dashboard-card small,
  .vocab-center-section-heading p,
  .vocabulary-source-nav-card small,
  .season-vocabulary-copy small,
  .season-vocabulary-list-copy small,
  .saved-list-card small,
  .bank-fill-actions small
) {
  font-weight: 600;
}

:is(#setup, #seasonHubScreen) details > summary {
  cursor: pointer;
  color: #cfe6f3;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.tool.accent {
  border-color: rgba(247, 216, 74, 0.55);
  background:
    linear-gradient(180deg, rgba(247, 216, 74, 0.16), rgba(247, 216, 74, 0.05)),
    rgba(2, 9, 18, 0.5);
  color: #fff2a0;
}

.tool.accent:hover:not(:disabled) {
  border-color: rgba(247, 216, 74, 0.85);
  background: rgba(247, 216, 74, 0.2);
}

.tool.accent:disabled {
  opacity: 0.6;
  cursor: default;
}

.setup-more-options {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(2, 9, 18, 0.32);
}

.setup-more-options[open] {
  padding-bottom: 12px;
}

.setup-more-options > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.setup-more-options > summary::-webkit-details-marker {
  display: none;
}

.setup-more-options > summary::before {
  content: "⋯";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold);
  font-weight: 900;
  line-height: 1;
}

.setup-more-options[open] > summary::before {
  content: "−";
}

.setup-more-options-group {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
}

.setup-more-options-group > strong {
  color: #f8fbff;
  font-size: 13px;
  font-weight: 800;
}

.setup-more-options-group > small {
  color: rgba(213, 232, 247, 0.7);
  font-size: 12px;
  font-weight: 600;
  white-space: normal;
}

.setup-more-options-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.setup-more-options-actions .tool,
.setup-more-options-group > .tool {
  justify-self: start;
  min-height: 38px;
  padding: 8px 12px;
}

.setup-more-options-field {
  display: grid;
  gap: 6px;
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 700;
}

.setup-more-options-field select {
  max-width: 420px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(1, 8, 16, 0.86);
  color: #f8fbff;
  font: inherit;
}

.bank-more-options[open] {
  width: min(560px, 100%);
}

.vocabulary-banks .bank-file-actions {
  max-width: 560px;
}

/* Quick Game direction switch (2026-09-14) */
.quick-active-vocabulary {
  flex-wrap: wrap;
}

.quick-vocabulary-direction {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px;
  background: rgba(2, 9, 18, 0.5);
}

.quick-vocabulary-direction label {
  position: relative;
}

.quick-vocabulary-direction input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.quick-vocabulary-direction span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 11px;
  color: #d5e8f7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.quick-vocabulary-direction input:checked + span {
  background: rgba(76, 201, 240, 0.22);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(76, 201, 240, 0.6);
}

.quick-vocabulary-direction input:focus-visible + span {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Season setup autosave confirmation (2026-09-14) */
.season-autosave-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  border: 1px solid rgba(82, 255, 168, 0.45);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(82, 255, 168, 0.12);
  color: #bfffe0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  animation: season-autosave-fade 2.8s ease forwards;
}

@keyframes season-autosave-fade {
  0%,
  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .season-autosave-chip {
    animation: none;
  }
}

.season-main-team-hint {
  margin: 0;
  border: 1px solid rgba(247, 216, 74, 0.35);
  border-radius: 8px;
  padding: 7px 9px;
  background: rgba(247, 216, 74, 0.08);
  color: #fff2a0;
  font-size: 12px;
  font-weight: 700;
}

/* Calmer word list editor (2026-09-14) */
.vocabulary-banks :is(.bank-controls, .bank-editor-top) {
  align-items: end;
}

.vocabulary-banks :is(.bank-controls, .bank-editor-top) > .tool {
  min-height: 42px;
}

.bank-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bank-level-menu {
  position: relative;
}

#setup .bank-level-menu > summary {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #d5e8f7;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  list-style: none;
}

.bank-level-menu > summary::-webkit-details-marker {
  display: none;
}

#setup .bank-level-menu[open] > summary {
  border-color: rgba(247, 216, 74, 0.6);
  color: var(--gold);
}

.bank-level-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  min-width: 170px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px;
  background: #061423;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.bank-level-menu-panel .tool {
  justify-content: flex-start;
  min-height: 34px;
  padding: 6px 10px;
  text-align: left;
}

.bank-level-menu-panel .tool.danger {
  border-color: rgba(255, 99, 99, 0.35);
  background: rgba(91, 24, 35, 0.32);
}

/* Dashboard: Quick Game row first, Season row below (2026-09-14) */
.setup-dashboard {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.setup-dashboard-group {
  display: grid;
  gap: 10px;
}

.setup-dashboard-group-title {
  margin: 0;
  color: rgba(213, 232, 247, 0.62);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.setup-dashboard-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.setup-dashboard-season-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.season-mode-off .setup-dashboard-season-cards,
body.season-mode-off #seasonSetup,
body.season-mode-off #seasonHub {
  display: none;
}

.setup-dashboard-group-season .season-mode-toggle-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  border: 1px solid rgba(97, 238, 214, 0.28);
  border-radius: 10px;
  padding: 12px 16px;
}

.setup-dashboard-group-season .season-mode-toggle-panel small {
  display: block;
  margin-top: 4px;
  color: #b9d7e6;
  font-size: 13px;
  font-weight: 600;
}

.setup-dashboard-group-season .season-mode-switch {
  margin-top: 0;
}

@media (max-width: 760px) {
  .setup-dashboard-row,
  .setup-dashboard-season-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Season result: vocabulary recap (2026-09-14) */
.season-result-vocabulary {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  border: 1px solid rgba(76, 201, 240, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(76, 201, 240, 0.08);
  color: #d5e8f7;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.season-result-vocabulary strong {
  color: #8fd6ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Season: tricky words and next-match preview (2026-09-14) */
.season-vocabulary-copy .season-vocabulary-review-hint {
  color: #fff2a0;
}

.season-next-words {
  max-width: 620px;
  margin-top: 8px;
}

.season-next-words-hint {
  color: rgba(213, 232, 247, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.season-next-words-list {
  display: grid;
  gap: 6px;
  max-height: 280px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.season-next-words-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 8px;
  background: rgba(2, 9, 18, 0.4);
}

.season-next-word {
  display: grid;
  flex: 1;
  min-width: 0;
}

.season-vocabulary-copy .season-next-word strong {
  color: #f8fbff;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.season-vocabulary-copy .season-next-word small {
  color: rgba(213, 232, 247, 0.7);
  font-size: 12px;
  font-weight: 600;
}

.season-next-words-list .season-next-word-swap {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
}

/* Scroll fix (2026-09-14): in landscape windows 760-1180 px wide the setup
   card is the scroll area, but a later global "overflow: visible" rule for
   tooltips cancelled it, so the setup could not scroll. */
@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape) {
  .setup-card {
    overflow-y: auto;
  }
}

/* ------------------------------------------------------------------ */
/* Premium setup polish (2026-09-14)                                   */
/* One surface hierarchy for the teacher menus: framed outer sections, */
/* quiet inner panels, gold hairlines for focus. Scoped to the setup,  */
/* the Season Hub screen and the Season vocabulary picker.             */
/* ------------------------------------------------------------------ */

#setup,
#seasonHubScreen,
#seasonVocabularyPicker {
  --vc-hairline: rgba(255, 255, 255, 0.08);
  --vc-hairline-strong: rgba(152, 217, 255, 0.18);
  --vc-panel: rgba(255, 255, 255, 0.035);
  --vc-panel-hover: rgba(255, 255, 255, 0.06);
  --vc-gold-line: linear-gradient(90deg, rgba(247, 216, 74, 0), rgba(247, 216, 74, 0.7) 18%, rgba(255, 242, 160, 0.85) 50%, rgba(247, 216, 74, 0.7) 82%, rgba(247, 216, 74, 0));
  --vc-lift-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(247, 216, 74, 0.12);
}

/* Outer sections: one framed glass surface with a gold hairline when open. */
#setup .setup-layer {
  position: relative;
  border: 1px solid var(--vc-hairline-strong);
  border-radius: 16px;
  padding: clamp(16px, 1.8vw, 24px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 120px),
    rgba(3, 12, 24, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px rgba(0, 0, 0, 0.2);
}

#setup .setup-layer:not(.is-collapsed)::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--vc-gold-line);
  pointer-events: none;
}

#setup .setup-layer:not(.is-collapsed) > .setup-layer-header {
  margin-bottom: 6px;
  border-bottom: 1px solid var(--vc-hairline);
  padding-bottom: 14px;
}

#setup .setup-layer-header .setup-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  letter-spacing: 0.08em;
}

#setup .setup-layer-header .setup-section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(247, 216, 74, 0.6);
}

#setup .setup-layer-header h2 {
  letter-spacing: 0.01em;
}

/* Open / Close pill: neutral glass with a chevron instead of a warning colour. */
#setup .setup-layer-header::after {
  top: 2px;
  border: 1px solid var(--vc-hairline-strong);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #d5e8f7;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

#setup .setup-layer.is-collapsed .setup-layer-header::after {
  content: "Öffnen ▾";
  border-color: rgba(247, 216, 74, 0.35);
  color: #fff2a0;
}

#setup .setup-layer:not(.is-collapsed) .setup-layer-header::after {
  content: "Schließen ▴";
}

#setup .setup-layer-header:hover::after {
  background: rgba(255, 255, 255, 0.1);
}

/* Inner panels: quiet surfaces, hairline borders, consistent radius. */
#setup :is(
  .season-setup-block,
  .vocabulary-center,
  .quick-active-vocabulary,
  .bank-controls,
  .bank-editor-top,
  .bank-fill-actions,
  .bank-level-group,
  .smart-import-panel,
  .season-main-team-card,
  .season-roster-team
) {
  border: 1px solid var(--vc-hairline);
  border-radius: 14px;
  background: var(--vc-panel);
  box-shadow: none;
}

#setup .vocabulary-banks {
  border: 0;
  background: transparent;
  box-shadow: none;
}

#setup .season-setup-block h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  letter-spacing: 0.04em;
}

#setup .season-setup-block h3::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff2a0, var(--gold));
}

/* Panels inside panels lose their own frame to avoid box-in-box. */
#setup .season-setup-block .season-vocabulary-card,
#setup .season-setup-block .season-league-description {
  border-color: var(--vc-hairline);
  background: rgba(2, 9, 18, 0.35);
}

/* Dashboard cards: refined glass, gold number ring, arrow pill, gentle lift. */
#setup .setup-dashboard-card {
  position: relative;
  border: 1px solid var(--vc-hairline-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 70%),
    rgba(3, 12, 24, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#setup a.setup-dashboard-card:hover,
#setup a.setup-dashboard-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(247, 216, 74, 0.45);
  box-shadow: var(--vc-lift-shadow);
}

#setup .setup-dashboard-card > span {
  border: 1px solid rgba(247, 216, 74, 0.55);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 242, 160, 0.28), transparent 70%),
    rgba(247, 216, 74, 0.08);
  color: #fff2a0;
  box-shadow: 0 0 16px rgba(247, 216, 74, 0.18);
}

#setup .setup-dashboard-card > b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: rgba(247, 216, 74, 0.32);
  background: rgba(247, 216, 74, 0.08);
  letter-spacing: 0.06em;
}

#setup .setup-dashboard-card > b::after {
  content: "→";
  font-size: 12px;
  transition: transform 180ms ease;
}

#setup a.setup-dashboard-card:hover > b::after {
  transform: translateX(3px);
}

#setup .setup-dashboard-group-season .season-mode-toggle-panel {
  border-radius: 14px;
}

/* The Season Hub shortcut: premium, but no longer shouting over the page. */
#setup .setup-dashboard-actions .tool {
  min-height: 52px;
  border-radius: 14px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 22px rgba(247, 216, 74, 0.18);
}

/* Word list rows: calm actions; delete stays recognisable but quiet. */
#setup .bank-item {
  border-radius: 10px;
  transition: background 160ms ease;
}

#setup .bank-item:hover {
  background: var(--vc-panel-hover);
}

#setup .bank-item-actions .tool {
  min-height: 30px;
  border-color: var(--vc-hairline);
  background: transparent;
  box-shadow: none;
}

#setup .bank-item-actions .tool.danger {
  color: #ff9d9d;
}

#setup .bank-item-actions .tool.danger:hover {
  border-color: rgba(255, 99, 99, 0.45);
  background: rgba(255, 99, 99, 0.12);
}

/* Section hints read as captions, not paragraphs. */
#setup .setup-layer-header + .setup-hint,
#setup .season-setup-inline-hint {
  color: rgba(213, 232, 247, 0.66);
}

/* Shared: clear keyboard focus in gold. */
:is(#setup, #seasonHubScreen, #seasonVocabularyPicker) :is(button, a, select, input, summary, [tabindex]):focus-visible {
  outline: 2px solid rgba(247, 216, 74, 0.85);
  outline-offset: 2px;
}

/* Season vocabulary picker: same premium frame. */
#seasonVocabularyPicker .season-vocabulary-picker {
  border: 1px solid var(--vc-hairline-strong);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 160px),
    rgba(4, 14, 26, 0.97);
}

#seasonVocabularyPicker .season-vocabulary-picker::before {
  content: "";
  display: block;
  height: 2px;
  margin: -1px 24px 0;
  border-radius: 2px;
  background: var(--vc-gold-line);
}

/* Older school computers: keep the look, drop motion and big shadows. */
body.performance-mode #setup :is(.setup-dashboard-card, .setup-layer, .bank-item) {
  transition: none;
  box-shadow: none;
}

body.performance-mode #setup a.setup-dashboard-card:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #setup :is(.setup-dashboard-card, .setup-dashboard-card > b::after, .bank-item) {
    transition: none;
  }

  #setup a.setup-dashboard-card:hover {
    transform: none;
  }
}

/* One heading per settings box (2026-09-14): the section title above each
   box already names it, so the inner pseudo label is removed. The Saved
   Vocabulary Lists box keeps its label because its real title is hidden. */
#setup :is(
  .game-settings,
  .cup-scoring-settings,
  .roster-settings,
  .team-name-settings,
  .arena-style-settings,
  .ball-style-settings,
  .device-performance-settings,
  .shot-animation-settings,
  .timer-setup,
  .level-inputs
)::before {
  content: none;
}

#setup :is(
  .game-settings,
  .cup-scoring-settings,
  .roster-settings,
  .team-name-settings,
  .arena-style-settings,
  .ball-style-settings,
  .device-performance-settings,
  .shot-animation-settings,
  .timer-setup,
  .level-inputs
) {
  border: 1px solid var(--vc-hairline);
  border-radius: 14px;
  padding-top: 14px;
  background: var(--vc-panel);
  box-shadow: none;
}

#setup .setup-layer > .setup-section-title {
  margin: 18px 0 8px;
  color: rgba(213, 232, 247, 0.72);
  letter-spacing: 0.08em;
}

/* Phone widths (2026-09-14): the older mobile rules sit before the base
   grid rules in this file and lose to them, so settings boxes kept desktop
   columns and pushed the sections wider than the screen. Re-applied here,
   after the base rules. */
@media (max-width: 760px) {
  #setup .setup-layer {
    grid-template-columns: minmax(0, 1fr);
  }

  #setup :is(
    .match-flow-settings,
    .game-settings,
    .roster-settings,
    .team-name-settings,
    .setup-row,
    .timer-setup,
    .arena-style-settings,
    .shot-animation-settings,
    .device-performance-settings
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  #setup .ball-visual-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #setup .ball-style-option {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    min-height: 0;
    padding: 12px 8px;
    text-align: center;
  }

  #setup .ball-style-option > span:not(.ball-style-preview) {
    overflow-wrap: normal;
  }

  #setup .timer-presets {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #setup .timer-presets button {
    min-width: 0;
    min-height: 36px;
  }

  #setup .timer-clock-input input {
    min-width: 64px;
  }

  #setup .performance-mode-toggle {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  #setup .performance-mode-toggle > small {
    grid-column: 1 / -1;
  }

  #setup .season-roster-table-head {
    display: none;
  }

  #setup .season-roster-row {
    grid-template-columns: 32px minmax(0, 1fr) 48px;
  }

  #setup .season-roster-row > input {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Gameplay FX layer (gameplay-fx.js): living arena, shot paths, goal
   celebration. Presentation only; switched off in Performance Mode.
   ========================================================================== */

body {
  --fx-light-rgb: 214, 236, 255;
}

body.level-challenge {
  --fx-light-rgb: 255, 212, 148;
}

body.level-elite {
  --fx-light-rgb: 255, 226, 158;
}

#field {
  --fx-team-rgb: 247, 216, 74;
}

/* Arena camera: slow drift, and a push towards the goal before impact. */
body.fx-ready .field-bg {
  transform-origin: var(--fx-push-x, 50%) var(--fx-push-y, 55%);
}

body.fx-ready .field-bg-image {
  transform-origin: 50% 46%;
  animation: fxArenaDrift 48s ease-in-out infinite alternate;
  will-change: scale, translate;
}

body.fx-goal-build .field-bg {
  scale: 1.06;
  transition: scale 640ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fx-arena {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.fx-arena::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at var(--fx-push-x, 50%) var(--fx-push-y, 60%), transparent 16%, rgba(2, 8, 18, 0.46) 72%);
  opacity: 0;
  transition: opacity 360ms ease;
}

.fx-arena::after {
  content: "";
  position: absolute;
  inset: 0 0 40% 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 34%, rgba(var(--fx-team-rgb), 0.36), transparent 64%),
    linear-gradient(180deg, rgba(var(--fx-light-rgb), 0.18), transparent 82%);
  mix-blend-mode: screen;
  opacity: 0;
}

body.fx-goal-build .fx-arena::before {
  opacity: 1;
}

body.fx-goal-celebrate .fx-arena::after {
  animation: fxStandsPulse 1800ms ease-out both;
}

body.fx-trophy-celebrate .fx-arena::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(247, 216, 74, 0.42), transparent 66%),
    linear-gradient(180deg, rgba(255, 236, 170, 0.22), transparent 82%);
  animation: fxStandsPulse 2400ms ease-out both;
}

/* Floodlight beams: soft cones from above the frame, gently swaying. */
.fx-beams {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.92;
  transition: opacity 600ms ease;
}

body.fx-light-dusk .fx-beams {
  opacity: 0.66;
}

body.fx-light-day .fx-beams {
  opacity: 0.34;
}

.fx-beam {
  position: absolute;
  top: -12%;
  width: 40%;
  height: 94%;
  background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(var(--fx-light-rgb), 0.2) 12deg, rgba(var(--fx-light-rgb), 0.32) 20deg, rgba(var(--fx-light-rgb), 0.2) 28deg, transparent 40deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 46%, transparent 92%);
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  will-change: rotate, opacity;
  animation:
    fxBeamSway 11s ease-in-out infinite alternate,
    fxBeamFlicker 7s ease-in-out infinite;
}

.fx-beam-1 {
  left: -8%;
  --fx-beam-from: -24deg;
  --fx-beam-to: -15deg;
}

.fx-beam-2 {
  left: 16%;
  --fx-beam-from: -9deg;
  --fx-beam-to: -2deg;
  animation-duration: 13s, 9s;
  animation-delay: -4s, -2s;
}

.fx-beam-3 {
  right: 16%;
  --fx-beam-from: 9deg;
  --fx-beam-to: 2deg;
  animation-duration: 12s, 8s;
  animation-delay: -7s, -5s;
}

.fx-beam-4 {
  right: -8%;
  --fx-beam-from: 24deg;
  --fx-beam-to: 15deg;
  animation-duration: 10s, 6s;
  animation-delay: -3s, -1s;
}

body.fx-goal-celebrate .fx-beam,
body.fx-trophy-celebrate .fx-beam {
  animation:
    fxBeamSway 11s ease-in-out infinite alternate,
    fxBeamSurge 1800ms ease-out both;
}

.fx-haze {
  position: absolute;
  inset: 18% -25% 26% -25%;
  z-index: 1;
  background:
    radial-gradient(ellipse 38% 46% at 28% 55%, rgba(var(--fx-light-rgb), 0.13), transparent 70%),
    radial-gradient(ellipse 30% 40% at 70% 45%, rgba(var(--fx-light-rgb), 0.1), transparent 70%);
  mix-blend-mode: screen;
  animation: fxHazeDrift 34s ease-in-out infinite alternate;
  will-change: translate;
}

body.fx-light-day .fx-haze {
  opacity: 0.5;
}

/* Crowd: camera flashes in the stands and a light wave after a goal. */
.fx-crowd {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.fx-camera-flash {
  position: absolute;
  width: clamp(5px, 0.8%, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, rgba(255, 255, 255, 0.7) 38%, transparent 72%);
  opacity: 0;
  translate: -50% -50%;
  mix-blend-mode: screen;
}

.fx-camera-flash::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420%;
  height: 14%;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
}

.fx-crowd-wave {
  position: absolute;
  top: 10%;
  bottom: 48%;
  left: 0;
  z-index: 2;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-team-rgb), 0.5) 42%, rgba(255, 255, 255, 0.4) 50%, rgba(var(--fx-team-rgb), 0.5) 58%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 72%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  translate: -110% 0;
}

.fx-crowd-wave.is-running {
  animation: fxCrowdWave 1500ms cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

.fx-crowd-wave.is-running.from-right {
  animation-name: fxCrowdWaveReverse;
}

/* Particle canvas sits between ball shadow and ball, so trails come out from
   behind the ball; the word and banners stay on top. */
.fx-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fx-screen-canvas {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.fx-screen-canvas.is-active {
  display: block;
}

.fx-impact-light {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 60%), rgba(255, 255, 255, 0.5), rgba(var(--fx-team-rgb), 0.26) 16%, transparent 44%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.fx-impact-light.is-running {
  animation: fxImpactLight 760ms ease-out both;
}

/* GOAL! slam */
.fx-goal-slam {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 72%;
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
  will-change: scale, opacity;
}

.fx-goal-slam strong {
  position: relative;
  z-index: 1;
  padding: 0 0.12em;
  font-size: clamp(56px, 9.5vw, 176px);
  font-style: italic;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #f7d84a;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe680 34%, #f7c531 58%, #b9790f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(40, 22, 0, 0.55)) drop-shadow(0 0 26px rgba(var(--fx-team-rgb), 0.8));
}

.fx-goal-slam.is-penalty strong {
  filter: drop-shadow(0 5px 0 rgba(40, 0, 6, 0.6)) drop-shadow(0 0 26px rgba(255, 74, 94, 0.8));
}

.fx-goal-slam-rays {
  position: absolute;
  inset: 20% -12%;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-team-rgb), 0.55) 30%, rgba(255, 244, 196, 0.75) 50%, rgba(var(--fx-team-rgb), 0.55) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 35%, #000 65%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: skewX(-14deg);
}

.fx-goal-slam.is-running {
  animation: fxGoalSlam 1400ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.fx-goal-slam.is-running .fx-goal-slam-rays {
  animation: fxGoalRays 1400ms ease-out both;
}

/* Camera shake */
#field.fx-kick {
  animation: fxFieldKick 260ms ease-out;
}

#field.fx-goal-shake {
  animation: fxFieldShake 460ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Ball flight driven by gameplay-fx.js: no CSS position transition, one spin,
   and the old attached trails give way to the canvas trails. */
#field .ball[data-fx-motion],
#field .ball-shadow[data-fx-motion] {
  transition: scale 260ms ease, opacity 80ms linear !important;
}

#field .ball.pass[data-fx-motion],
#field .ball.shot[data-fx-motion],
#field .ball.penalty-shot[data-fx-motion] {
  animation: fxBallSpin var(--fx-motion-ms, 560ms) cubic-bezier(0.2, 0.7, 0.3, 1) both !important;
}

#field .ball.pass[data-fx-motion="power"],
#field .ball.shot[data-fx-motion="power"],
#field .ball.penalty-shot[data-fx-motion="power"] {
  animation-name: fxBallSpinFast !important;
}

#field .ball[data-fx-motion]::before,
#field .ball[data-fx-motion]::after {
  display: none !important;
  animation: none !important;
}

#field .ball.fx-windup[data-fx-motion] {
  animation: fxBallWindup 120ms ease-in both !important;
}

/* Tension: the threatened goal glows when the ball reaches the last zone. */
body.fx-danger-left #field .goal-mouth.left:not(.hit),
body.fx-danger-right #field .goal-mouth.right:not(.hit) {
  animation: fxGoalDanger 1150ms ease-in-out infinite;
}

@keyframes fxArenaDrift {
  0% { scale: 1.02; translate: 0 0; }
  100% { scale: 1.065; translate: -0.9% 0.5%; }
}

@keyframes fxStandsPulse {
  0% { opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: 0.72; }
  100% { opacity: 0; }
}

@keyframes fxBeamSway {
  0% { rotate: var(--fx-beam-from, -10deg); }
  100% { rotate: var(--fx-beam-to, 10deg); }
}

@keyframes fxBeamFlicker {
  0%, 100% { opacity: 0.84; }
  42% { opacity: 1; }
  47% { opacity: 0.76; }
  52% { opacity: 0.96; }
}

@keyframes fxBeamSurge {
  0% { opacity: 0.6; }
  10% { opacity: 1; }
  30% { opacity: 0.68; }
  45% { opacity: 1; }
  65% { opacity: 0.74; }
  80% { opacity: 1; }
  100% { opacity: 0.86; }
}

@keyframes fxHazeDrift {
  0% { translate: -6% 0; }
  100% { translate: 6% -2%; }
}

@keyframes fxCrowdWave {
  0% { translate: -110% 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { translate: 230% 0; opacity: 0; }
}

@keyframes fxCrowdWaveReverse {
  0% { translate: 230% 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { translate: -110% 0; opacity: 0; }
}

@keyframes fxImpactLight {
  0% { opacity: 0; }
  8% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fxGoalSlam {
  0% { opacity: 0; scale: 2.2; }
  12% { opacity: 1; scale: 0.92; }
  20% { scale: 1.05; }
  28% { scale: 1; }
  76% { opacity: 1; scale: 1.03; }
  100% { opacity: 0; scale: 1.14; }
}

@keyframes fxGoalRays {
  0% { opacity: 0; scale: 0.2 1; }
  16% { opacity: 0.9; scale: 1.1 1; }
  100% { opacity: 0; scale: 1.5 1; }
}

@keyframes fxGoalSlamFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fxFieldKick {
  0%, 100% { translate: 0 0; }
  30% { translate: 2px -2px; }
  60% { translate: -1px 1px; }
}

@keyframes fxFieldShake {
  0%, 100% { translate: 0 0; }
  12% { translate: -7px 3px; }
  24% { translate: 6px -4px; }
  38% { translate: -5px 2px; }
  52% { translate: 4px -2px; }
  68% { translate: -2px 1px; }
  84% { translate: 1px 0; }
}

@keyframes fxBallSpin {
  0% { rotate: 0deg; scale: 1; }
  40% { scale: 1.12; }
  100% { rotate: 540deg; scale: 1; }
}

@keyframes fxBallSpinFast {
  0% { rotate: 0deg; scale: 1.08; }
  100% { rotate: 1080deg; scale: 0.96; }
}

@keyframes fxBallWindup {
  0% { scale: 1; }
  100% { scale: 1.14 0.84; }
}

@keyframes fxGoalDanger {
  0%, 100% {
    opacity: 0.85;
    box-shadow: inset 0 0 18px rgba(247, 216, 74, 0.18), 0 0 26px rgba(247, 216, 74, 0.16);
  }
  50% {
    opacity: 1;
    box-shadow: inset 0 0 34px rgba(247, 216, 74, 0.42), 0 0 64px rgba(247, 216, 74, 0.4), 0 0 120px rgba(var(--fx-light-rgb), 0.22);
  }
}

body.fx-paused .field-bg-image,
body.fx-paused .fx-beam,
body.fx-paused .fx-haze {
  animation-play-state: paused !important;
}

body.performance-mode .fx-arena,
body.performance-mode .fx-canvas,
body.performance-mode .fx-screen-canvas,
body.performance-mode .fx-goal-slam,
body.performance-mode .fx-impact-light {
  display: none !important;
}

body.performance-mode .field-bg-image {
  animation: none !important;
}

body.performance-mode.fx-goal-build .field-bg {
  scale: 1.012;
}

@media (prefers-reduced-motion: reduce) {
  body.fx-ready .field-bg-image,
  .fx-beam,
  .fx-haze,
  .fx-crowd-wave.is-running,
  #field.fx-kick,
  #field.fx-goal-shake,
  body.fx-danger-left #field .goal-mouth.left:not(.hit),
  body.fx-danger-right #field .goal-mouth.right:not(.hit) {
    animation: none !important;
  }

  body.fx-goal-build .field-bg {
    scale: 1.012;
  }

  .fx-camera-flash {
    display: none;
  }

  .fx-goal-slam.is-running {
    animation: fxGoalSlamFade 1400ms ease both !important;
  }

  .fx-goal-slam.is-running .fx-goal-slam-rays {
    animation: none !important;
  }
}

/* Shot Animation Pool: small previews that play on hover, focus or when ticked. */
.shot-style-preview {
  position: relative;
  display: block;
  width: 74px;
  height: 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.14) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(180deg, rgba(22, 74, 48, 0.82), rgba(9, 38, 26, 0.94));
  font-style: normal;
  pointer-events: none;
}

.shot-style-preview b {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #d5dde6 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 10px var(--preview-glow, rgba(90, 167, 255, 0.9));
}

.shot-style-preview b::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: 0;
  height: var(--preview-trail-height, 5px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--preview-trail, rgba(170, 215, 255, 0.95)));
  opacity: 0;
  translate: 0 -50%;
}

.shot-style-preview-power {
  --preview-glow: rgba(255, 128, 44, 0.95);
  --preview-trail: rgba(255, 176, 60, 0.98);
  --preview-trail-height: 7px;
}

.shot-style-preview-curve {
  --preview-glow: rgba(120, 232, 214, 0.95);
  --preview-trail: rgba(120, 232, 214, 0.9);
  --preview-trail-height: 4px;
}

.shot-style-preview-flash {
  --preview-glow: rgba(255, 255, 255, 0.95);
  --preview-trail: rgba(255, 255, 255, 0.95);
  --preview-trail-height: 2px;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-classic b {
  animation: fxPreviewClassic 1400ms ease-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-classic b::before {
  animation: fxPreviewTrail 1400ms ease-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-power b {
  animation: fxPreviewPower 1400ms ease-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-power b::before {
  animation: fxPreviewPowerTrail 1400ms ease-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-power {
  animation: fxPreviewShake 1400ms ease-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-curve b {
  animation: fxPreviewCurve 1600ms ease-in-out infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-flash b {
  animation: fxPreviewFlash 1300ms linear infinite;
}

.shot-animation-settings .mode-option:is(:hover, :focus-within, .fx-previewing) .shot-style-preview-flash b::before {
  animation: fxPreviewFlashTrail 1300ms linear infinite;
}

@keyframes fxPreviewClassic {
  0% { left: 14%; translate: 0 0; opacity: 0; }
  8% { opacity: 1; }
  34% { translate: 0 -6px; }
  60% { left: 84%; translate: 0 0; }
  85% { left: 84%; opacity: 1; }
  100% { left: 84%; opacity: 0; }
}

@keyframes fxPreviewTrail {
  0% { width: 0; opacity: 0; }
  12% { opacity: 1; }
  40% { width: 34px; opacity: 1; }
  70%, 100% { width: 0; opacity: 0; }
}

@keyframes fxPreviewPower {
  0% { left: 14%; scale: 1; opacity: 0; }
  6% { opacity: 1; }
  20% { left: 14%; scale: 1.25 0.8; }
  36% { left: 86%; scale: 1; }
  82% { left: 86%; opacity: 1; }
  100% { left: 86%; opacity: 0; }
}

@keyframes fxPreviewPowerTrail {
  0%, 20% { width: 0; opacity: 0; }
  30% { width: 50px; opacity: 1; }
  52%, 100% { width: 0; opacity: 0; }
}

@keyframes fxPreviewShake {
  0%, 35%, 50%, 100% { translate: 0 0; }
  39% { translate: 2px -1px; }
  43% { translate: -2px 1px; }
  47% { translate: 1px 0; }
}

@keyframes fxPreviewCurve {
  0% { left: 14%; top: 72%; opacity: 0; }
  6% { opacity: 1; }
  30% { left: 32%; top: 30%; }
  55% { left: 62%; top: 22%; }
  78% { left: 86%; top: 64%; }
  90% { left: 86%; top: 64%; opacity: 1; }
  100% { left: 86%; top: 64%; opacity: 0; }
}

@keyframes fxPreviewFlash {
  0%, 20% { left: 14%; opacity: 1; }
  22% { left: 14%; opacity: 0; }
  34% { left: 50%; opacity: 0.5; }
  40% { left: 50%; opacity: 0; }
  52% { left: 86%; opacity: 1; }
  85% { left: 86%; opacity: 1; }
  100% { left: 86%; opacity: 0; }
}

@keyframes fxPreviewFlashTrail {
  0%, 50% { width: 0; opacity: 0; }
  53% { width: 62px; opacity: 1; }
  70%, 100% { width: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .shot-animation-settings .mode-option .shot-style-preview,
  .shot-animation-settings .mode-option .shot-style-preview b,
  .shot-animation-settings .mode-option .shot-style-preview b::before {
    animation: none !important;
  }
}

/* ==========================================================================
   Immersive gameplay layout: slim broadcast HUD and a pitch that fills the
   stage. Landscape tablets, laptops and projectors; phones keep their layout.
   ========================================================================== */
@media (min-width: 760px) and (orientation: landscape) {
  .app,
  body.possession-rush-active .app {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: clamp(6px, 0.9dvh, 10px);
    padding: clamp(6px, 1dvh, 12px) clamp(10px, 1.2vw, 18px);
  }

  /* Pitch: as large as the stage allows, always 16:9 (older rules capped it
     at 100dvh minus a fixed HUD height). */
  .stage {
    container-type: size;
    padding-inline: 0;
  }

  #field.field {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  /* Scoreboard: trophies and score in one row, clock above the duel line. */
  body:not(.possession-rush-active) .scoreboard {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 1.35fr) minmax(0, 1fr);
    gap: clamp(6px, 0.8vw, 12px);
    height: auto;
    min-height: 0;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    gap: clamp(6px, 0.8vw, 12px);
    height: auto;
    min-height: 0;
    padding: clamp(5px, 0.8dvh, 8px) clamp(8px, 1vw, 14px);
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .trophy-row {
    position: static;
    grid-row: 1;
    height: auto;
    inset: auto;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-a .trophy-row {
    grid-column: 1;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .trophy-row {
    grid-column: 2;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row {
    grid-row: 1;
    height: auto;
    min-height: 0;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .score-row {
    grid-column: 1;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row strong {
    font-size: clamp(28px, 4.6dvh, 44px);
    line-height: 1;
  }

  body:not(.possession-rush-active) .scoreboard .score-adjust {
    width: clamp(30px, 4.4dvh, 40px);
    height: clamp(30px, 4.4dvh, 40px);
    min-height: 0;
  }

  body:not(.possession-rush-active) .duel-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "top top top"
      "side-a line side-b";
    align-items: center;
    column-gap: clamp(8px, 1vw, 14px);
    row-gap: clamp(3px, 0.5dvh, 6px);
    height: auto;
    min-height: 0;
    padding: clamp(5px, 0.8dvh, 8px) clamp(10px, 1.2vw, 16px);
  }

  body:not(.possession-rush-active) .duel-card > .duel-topline {
    grid-area: top;
  }

  body:not(.possession-rush-active) .duel-card > .duel-line {
    grid-area: line;
    height: auto;
    margin: 0;
  }

  body:not(.possession-rush-active) .duel-card > .active-duel-row {
    display: contents;
  }

  body:not(.possession-rush-active) .duel-card #activeSideA {
    grid-area: side-a;
    justify-self: end;
  }

  body:not(.possession-rush-active) .duel-card #activeSideB {
    grid-area: side-b;
    justify-self: start;
  }

  body:not(.possession-rush-active) .duel-card .match-clock {
    height: auto;
    min-height: 0;
    padding-block: clamp(2px, 0.5dvh, 5px);
  }

  body:not(.possession-rush-active) .duel-card #roundTimerValue {
    font-size: clamp(20px, 3.4dvh, 30px);
    line-height: 1;
  }

  body:not(.possession-rush-active) .duel-card .duel-line span {
    min-height: 0;
    padding-block: clamp(3px, 0.6dvh, 6px);
    font-size: clamp(15px, 2.2dvh, 22px);
  }

  /* Controls: team name beside the buttons, flatter tool buttons. */
  body:not(.possession-rush-active) .controls {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr) minmax(0, 1fr);
    gap: clamp(6px, 0.8vw, 12px);
    height: auto;
    min-height: 0;
    padding: clamp(4px, 0.7dvh, 8px);
  }

  body:not(.possession-rush-active) .controls .action-panel {
    grid-template-columns: minmax(28px, auto) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
    gap: clamp(5px, 0.6vw, 8px);
    padding: clamp(4px, 0.6dvh, 7px);
  }

  body:not(.possession-rush-active) .controls .action-panel:last-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(28px, auto);
  }

  body:not(.possession-rush-active) .controls .action-panel:last-child .action-title {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.possession-rush-active) .controls .action-title {
    align-self: center;
    max-width: 96px;
    height: auto;
    padding-inline: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.possession-rush-active) .controls .action {
    height: auto;
    min-height: clamp(44px, 6.6dvh, 58px);
  }

  body:not(.possession-rush-active) .controls .middle-panel {
    grid-auto-rows: minmax(0, 1fr);
    gap: clamp(4px, 0.5dvh, 6px);
  }

  body:not(.possession-rush-active) .controls .middle-panel .tool {
    height: auto;
    min-height: clamp(24px, 3.2dvh, 30px);
    padding: 2px 6px;
    font-size: clamp(10px, 1.4dvh, 12px);
  }
}

@media (min-width: 760px) and (orientation: landscape) and (pointer: coarse) {
  body:not(.possession-rush-active) .scoreboard .score-adjust {
    width: 40px;
    height: 40px;
  }

  body:not(.possession-rush-active) .controls .middle-panel .tool {
    min-height: 36px;
  }
}

@media (min-width: 760px) and (orientation: landscape) {
  /* Explicit placement: an older rule lets the team title span every column. */
  body:not(.possession-rush-active) .controls .action-panel > .action-title {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.possession-rush-active) .controls .action-panel > [data-action^="score-"] {
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.possession-rush-active) .controls .action-panel > [data-action^="penalty-"] {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.possession-rush-active) .controls .action-panel:last-child > .action-title {
    grid-column: 3;
  }

  body:not(.possession-rush-active) .controls .action-panel:last-child > [data-action^="score-"] {
    grid-column: 1;
  }

  body:not(.possession-rush-active) .controls .action-panel:last-child > [data-action^="penalty-"] {
    grid-column: 2;
  }

  /* Glass HUD: the stadium shows through, so bars and pitch read as one scene. */
  body:not(.possession-rush-active) .scoreboard > .team-card,
  body:not(.possession-rush-active) .scoreboard > .duel-card,
  body:not(.possession-rush-active) .controls {
    border-color: rgba(255, 255, 255, 0.09);
    background:
      linear-gradient(180deg, rgba(10, 26, 44, 0.6), rgba(3, 10, 20, 0.46));
    backdrop-filter: blur(10px) saturate(1.12);
  }
}

@media (min-width: 760px) and (max-width: 1180px) and (orientation: landscape) {
  body:not(.possession-rush-active) .scoreboard {
    grid-template-columns: minmax(0, 0.85fr) minmax(360px, 1.5fr) minmax(0, 0.85fr);
  }

  body:not(.possession-rush-active) .duel-card .active-side strong {
    font-size: clamp(11px, 1.6dvh, 14px);
  }

  /* Narrow team cards: smaller trophies and score so "+" never covers "0/3". */
  body:not(.possession-rush-active) .scoreboard > .team-card .trophy-row > * {
    width: clamp(18px, 2.8dvh, 26px);
    height: clamp(18px, 2.8dvh, 26px);
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row {
    column-gap: 4px;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row strong {
    min-width: 0;
    font-size: clamp(24px, 3.8dvh, 34px);
    white-space: nowrap;
  }
}

@media (min-width: 760px) and (orientation: landscape) {
  /* Season badge beside the score: capped so the score always keeps its width. */
  body:not(.possession-rush-active) .scoreboard > .team-card .gameplay-season-badge-slot:not(:empty) {
    width: clamp(36px, 6dvh, 56px);
    height: clamp(36px, 6dvh, 56px);
    min-height: 0;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .gameplay-season-badge-slot:not(:empty) img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-a .score-row:has(.gameplay-season-badge-slot:not(:empty)) {
    grid-template-columns: auto minmax(max-content, 1fr) auto auto;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot:not(:empty)) {
    grid-template-columns: auto auto minmax(max-content, 1fr) auto;
  }
}

/* 760-980 px landscape keeps the stacked HUD of the narrow layout (duel card
   on top, both team cards below it, tools under the actions). Those rules
   place the cards in two columns; the three-column tracks above left the
   right column empty and squeezed team A. */
@media (min-width: 760px) and (max-width: 980px) and (orientation: landscape) {
  body:not(.possession-rush-active) .scoreboard,
  body:not(.possession-rush-active) .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Possession Rush header, 981-1180 px landscape: the centre panel's grid had
   fixed track minimums (112 + 320 + 112 px plus gaps) inside a ~375 px
   scoreboard column, so it slid over team B and the clock chip covered the
   team name. Bounded tracks, a wider centre, the clock in its own row and
   compact cards keep the header at its old height. Stacked layouts below
   981 px or 621 px height keep their own rules. Since 2026-09-15 this also
   covers wider screens (MacBook Air full screen): there the clock chip sat
   on the Word card and the emblem hung out of the header.
   ========================================================================== */
@media (min-width: 981px) and (min-height: 621px) and (orientation: landscape) {
  body.possession-rush-active .scoreboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr) minmax(0, 1fr);
  }

  body.possession-rush-active .scoreboard > .duel-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    row-gap: 3px;
    padding: 3px 10px 4px;
  }

  body.possession-rush-active .duel-topline {
    position: static;
    justify-self: center;
  }

  body.possession-rush-active .round-timer {
    padding: 2px 9px;
  }

  body.possession-rush-active .possession-rush-panel,
  body.possession-rush-active .possession-rush-panel.no-rush-emblem {
    width: 100%;
    min-width: 0;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.6fr) minmax(0, 0.62fr);
    gap: 8px;
  }

  body.possession-rush-active .possession-rush-timer-card {
    max-height: none;
    padding: 4px 6px;
  }

  body.possession-rush-active .possession-rush-timer-card > b {
    margin-top: 4px;
  }

  body.possession-rush-active .possession-rush-center-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 3px 8px;
    max-height: none;
    padding: 5px 9px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 52px !important;
    height: 52px !important;
  }

  /* Season badge beside the score: same cap as the Duel HUD, so it stays in
     its column instead of covering the -/+ buttons. */
  body.possession-rush-active .scoreboard > .team-card .gameplay-season-badge-primary {
    width: clamp(36px, 6dvh, 56px);
    height: clamp(36px, 6dvh, 56px);
  }
}

/* ==========================================================================
   Goal celebration variants and match-flow moments (gameplay-fx.js)
   ========================================================================== */

/* GOAL! slam: sized from the pitch, long words scale down (--fx-slam-scale). */
.fx-goal-slam strong {
  font-size: calc(clamp(56px, 9.5vw, 176px) * var(--fx-slam-scale, 1));
  white-space: nowrap;
}

@media (min-width: 760px) and (orientation: landscape) {
  .fx-goal-slam strong {
    font-size: calc(min(17cqh, 10cqw) * var(--fx-slam-scale, 1));
  }
}

.fx-goal-slam.slam-stamp.is-running {
  animation: fxSlamStamp 1400ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.fx-goal-slam.slam-wipe.is-running {
  animation: fxSlamWipe 1400ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.fx-goal-slam.slam-rise.is-running {
  animation: fxSlamRise 1400ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.fx-goal-slam.slam-glow.is-running {
  animation: fxSlamGlow 1400ms ease-out both;
}

.fx-goal-slam.slam-glow.is-running strong {
  animation: fxSlamLetters 1400ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

/* Spotlight celebration: the stadium goes dark, two beams swing onto the goal. */
.fx-spot {
  position: absolute;
  top: -8%;
  z-index: 4;
  width: 34%;
  height: 135%;
  background: conic-gradient(from 166deg at 50% 0%, transparent 0deg, rgba(255, 246, 214, 0.34) 9deg, rgba(255, 251, 236, 0.52) 14deg, rgba(255, 246, 214, 0.34) 19deg, transparent 28deg, transparent 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 50% 0;
  pointer-events: none;
}

.fx-spot-left {
  left: 1%;
}

.fx-spot-right {
  right: 1%;
}

body.fx-spotlight .fx-spot {
  animation: fxSpotSweep 1900ms cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

body.fx-spotlight .fx-arena::before {
  opacity: 1;
  background: rgba(2, 6, 14, 0.6);
  transition-duration: 180ms;
}

/* Shockwave celebration: one team-coloured light wash and a heavier shake. */
body.fx-shockwave .fx-impact-light {
  background: radial-gradient(circle at var(--fx-x, 50%) var(--fx-y, 60%), rgba(255, 255, 255, 0.55), rgba(var(--fx-team-rgb), 0.32) 28%, rgba(var(--fx-team-rgb), 0.12) 70%);
}

#field.fx-goal-shake-heavy {
  animation: fxFieldShakeHeavy 620ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Start intro: team entrance, three stadium lights for 3-2-1, pulse ring. */
.start-intro-team.team-a {
  animation: fxIntroTeamLeft 700ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.start-intro-team.team-b {
  animation: fxIntroTeamRight 700ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.start-intro-matchup b {
  animation: fxIntroVersus 820ms cubic-bezier(0.2, 0.9, 0.25, 1) 240ms both;
}

.start-intro-team strong {
  font-size: clamp(26px, 3vw, 46px);
}

.start-intro-count-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(8px, 1.6vh, 16px);
}

.start-intro-lights {
  display: flex;
  gap: clamp(14px, 2.4vw, 30px);
}

.start-intro-lights i {
  display: block;
  width: clamp(18px, 2.2vw, 28px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.16), rgba(20, 30, 44, 0.92) 70%);
  box-shadow: inset 0 0 0 2px rgba(247, 216, 74, 0.28);
  transition: background 160ms ease, box-shadow 220ms ease;
}

.start-intro-lights i.is-on {
  background: radial-gradient(circle at 40% 35%, #fffbe0, #f7d84a 45%, #b97a12 100%);
  box-shadow:
    0 0 18px rgba(247, 216, 74, 0.9),
    0 0 46px rgba(247, 216, 74, 0.5),
    inset 0 0 0 2px rgba(255, 255, 255, 0.4);
}

.start-intro-overlay.is-kickoff .start-intro-lights i {
  background: radial-gradient(circle at 40% 35%, #ffffff, #e8fbff 50%, #7dd3ff 100%);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.95),
    0 0 60px rgba(125, 211, 255, 0.6);
}

.start-intro-ring {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(150px, 25vh, 220px) / 2);
  width: clamp(160px, 21vw, 270px);
  aspect-ratio: 1;
  border: 3px solid rgba(247, 216, 74, 0.6);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(247, 216, 74, 0.35),
    inset 0 0 30px rgba(247, 216, 74, 0.2);
  opacity: 0;
  translate: -50% 50%;
  pointer-events: none;
}

.start-intro-ring.is-pulsing {
  animation: fxIntroRing 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.start-intro-overlay.is-kickoff .start-intro-ring {
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 0 40px rgba(255, 255, 255, 0.5),
    inset 0 0 30px rgba(125, 211, 255, 0.3);
}

.start-intro-overlay.is-kickoff .start-intro-panel {
  animation: fxIntroKickoff 950ms ease-out both;
}

.start-intro-overlay.is-leaving .start-intro-panel {
  animation: fxIntroPanelOut 240ms ease-in both;
}

/* Kick-off, countdown ticks and phase changes light up the stands. */
body.fx-countdown-tick .fx-arena::after {
  animation: fxStandsTick 520ms ease-out both;
}

body.fx-kickoff .fx-arena::after {
  animation: fxStandsPulse 1500ms ease-out both;
}

body.fx-alert-pressure .fx-arena::after,
body.fx-alert-final .fx-arena::after {
  animation: fxStandsPulse 1800ms ease-out both;
}

body.fx-alert-pressure .fx-arena::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 170, 60, 0.42), transparent 64%),
    linear-gradient(180deg, rgba(255, 190, 90, 0.2), transparent 82%);
}

body.fx-alert-final .fx-arena::after {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 86, 96, 0.4), transparent 64%),
    linear-gradient(180deg, rgba(247, 216, 74, 0.22), transparent 82%);
}

/* Pressure Mode and Final Attack re-light the floodlights for the whole phase. */
body.round-pressure-active .fx-beam {
  --fx-light-rgb: 255, 184, 88;
}

body.round-final-attack .fx-beam {
  --fx-light-rgb: 255, 132, 104;
  animation-duration: 4.5s, 2.4s;
}

@keyframes fxSlamStamp {
  0% { opacity: 0; scale: 3; rotate: -9deg; }
  10% { opacity: 1; scale: 0.9; rotate: 2deg; }
  17% { scale: 1.06; rotate: 0deg; }
  24% { scale: 1; }
  78% { opacity: 1; scale: 1.02; }
  100% { opacity: 0; scale: 0.94; }
}

@keyframes fxSlamWipe {
  0% { opacity: 0; translate: -130% -50%; transform: skewX(-20deg); }
  14% { opacity: 1; translate: -46% -50%; transform: skewX(-6deg); }
  22% { translate: -50% -50%; transform: skewX(0deg); }
  80% { opacity: 1; translate: -50% -50%; transform: skewX(0deg); }
  100% { opacity: 0; translate: 30% -50%; transform: skewX(-14deg); }
}

@keyframes fxSlamRise {
  0% { opacity: 0; translate: -50% 0%; scale: 0.8; }
  16% { opacity: 1; translate: -50% -58%; scale: 1.05; }
  26% { translate: -50% -50%; scale: 1; }
  78% { opacity: 1; translate: -50% -50%; }
  100% { opacity: 0; translate: -50% -72%; }
}

@keyframes fxSlamGlow {
  0% { opacity: 0; scale: 1.12; }
  18% { opacity: 1; scale: 1; }
  80% { opacity: 1; scale: 1.01; }
  100% { opacity: 0; scale: 1.05; }
}

@keyframes fxSlamLetters {
  0% { letter-spacing: 0.45em; }
  30% { letter-spacing: 0.02em; }
  100% { letter-spacing: 0.01em; }
}

@keyframes fxSpotSweep {
  0% { opacity: 0; rotate: var(--fx-spot-from, 0deg); }
  12% { opacity: 1; }
  40% { rotate: var(--fx-spot-to, 0deg); }
  82% { opacity: 1; rotate: var(--fx-spot-to, 0deg); }
  100% { opacity: 0; rotate: var(--fx-spot-to, 0deg); }
}

@keyframes fxFieldShakeHeavy {
  0%, 100% { translate: 0 0; }
  8% { translate: -12px 5px; }
  16% { translate: 11px -7px; }
  26% { translate: -9px 4px; }
  38% { translate: 8px -4px; }
  52% { translate: -5px 3px; }
  68% { translate: 3px -1px; }
  84% { translate: -1px 0; }
}

@keyframes fxIntroTeamLeft {
  0% { opacity: 0; translate: -36% 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes fxIntroTeamRight {
  0% { opacity: 0; translate: 36% 0; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes fxIntroVersus {
  0% { opacity: 0; scale: 2.2; }
  55% { opacity: 1; scale: 0.9; }
  100% { opacity: 1; scale: 1; }
}

@keyframes fxIntroRing {
  0% { opacity: 0.95; scale: 0.5; }
  60% { opacity: 0.4; }
  100% { opacity: 0; scale: 1.4; }
}

@keyframes fxIntroKickoff {
  0% { filter: brightness(1); }
  14% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

@keyframes fxIntroPanelOut {
  0% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.08; }
}

@keyframes fxStandsTick {
  0% { opacity: 0; }
  22% { opacity: 0.5; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-goal-slam.slam-glow.is-running strong,
  body.fx-spotlight .fx-spot,
  #field.fx-goal-shake-heavy,
  .start-intro-team.team-a,
  .start-intro-team.team-b,
  .start-intro-matchup b,
  .start-intro-ring.is-pulsing,
  .start-intro-overlay.is-kickoff .start-intro-panel,
  .start-intro-overlay.is-leaving .start-intro-panel {
    animation: none !important;
  }
}

/* Possession Rush on the larger pitch: size the countdown and the Team Assist
   ("timeout") and Underdog symbols from the pitch height instead of the window
   width, so the countdown no longer covers half the pitch. */
@media (min-width: 760px) and (orientation: landscape) {
  body.possession-rush-active #field .event-banner.event-countdown,
  body.possession-rush-active #field .event-banner.show.event-countdown {
    top: 30% !important;
    width: clamp(92px, 21cqh, 150px) !important;
    height: clamp(92px, 21cqh, 150px) !important;
    border-radius: 16px !important;
    font-size: clamp(52px, 13cqh, 96px) !important;
  }

  /* The symbols get their own grid columns sized with them; the PowerShot
     meters take the remaining width. Otherwise larger symbols overlap. */
  body.possession-rush-active #field .possession-powershot-meters {
    --rush-emblem-size: clamp(52px, 12.5cqh, 84px);
    --rush-assist-size: clamp(64px, 16.5cqh, 108px);
    grid-template-columns:
      minmax(0, 1fr)
      var(--rush-emblem-size)
      var(--rush-assist-size)
      var(--rush-emblem-size)
      minmax(0, 1fr) !important;
    column-gap: clamp(8px, 1.8cqh, 16px) !important;
    align-items: center;
    /* The symbol artwork sits lower than its box; lift the strip so the
       Team Assist symbol is never cut off by the pitch edge. */
    bottom: clamp(30px, 7cqh, 60px) !important;
  }

  body.possession-rush-active #field .possession-team-assist {
    width: var(--rush-assist-size) !important;
    height: var(--rush-assist-size) !important;
    min-height: var(--rush-assist-size) !important;
  }

  body.possession-rush-active #field .possession-team-assist-icon-slot,
  body.possession-rush-active #field .possession-team-assist-icon {
    width: calc(var(--rush-assist-size) - 8px) !important;
    height: calc(var(--rush-assist-size) - 8px) !important;
  }

  body.possession-rush-active #field .possession-underdog-emblem {
    width: var(--rush-emblem-size) !important;
    height: var(--rush-emblem-size) !important;
  }

  body.possession-rush-active #field .possession-underdog-emblem-icon-slot,
  body.possession-rush-active #field .possession-underdog-emblem-icon {
    width: calc(var(--rush-emblem-size) - 8px) !important;
    height: calc(var(--rush-emblem-size) - 8px) !important;
  }
}

/* ==========================================================================
   Phone landscape (height up to 500px), Duel: team rails left and right, the
   pitch in the middle. Stacked scoreboard and controls used to leave the
   pitch a 2-69px strip.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  body:not(.possession-rush-active) .app {
    display: grid;
    grid-template-columns: clamp(96px, 15vw, 150px) minmax(0, 1fr) clamp(96px, 15vw, 150px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "team-a duel team-b"
      "actions-a stage actions-b"
      "actions-a tools actions-b";
    gap: 5px 6px;
    height: 100dvh;
    max-height: 100dvh;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  body:not(.possession-rush-active) .scoreboard,
  body:not(.possession-rush-active) .controls {
    display: contents;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-a {
    grid-area: team-a;
  }

  body:not(.possession-rush-active) .scoreboard > .duel-card {
    grid-area: duel;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b {
    grid-area: team-b;
  }

  body:not(.possession-rush-active) .stage {
    grid-area: stage;
    container-type: size;
    min-height: 0;
    padding: 0;
  }

  body:not(.possession-rush-active) #field.field {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  body:not(.possession-rush-active) .controls > .action-panel:first-child {
    grid-area: actions-a;
  }

  body:not(.possession-rush-active) .controls > .middle-panel {
    grid-area: tools;
  }

  body:not(.possession-rush-active) .controls > .action-panel:last-child {
    grid-area: actions-b;
  }

  /* Team cards: trophies above a small score row. */
  body:not(.possession-rush-active) .scoreboard > .team-card,
  body:not(.possession-rush-active) .scoreboard > .team-card.team-b {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 2px;
    height: auto;
    min-height: 0;
    padding: 4px;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .trophy-row,
  body:not(.possession-rush-active) .scoreboard > .team-card.team-a .trophy-row,
  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .trophy-row {
    position: static;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    gap: 2px;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .trophy-row > * {
    width: 14px;
    height: 14px;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row,
  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .score-row {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 26px auto 26px;
    gap: 4px;
    height: auto;
    min-height: 0;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row strong {
    font-size: 20px;
    line-height: 1;
  }

  body:not(.possession-rush-active) .scoreboard .score-adjust {
    width: 26px;
    height: 26px;
    min-height: 0;
  }

  body:not(.possession-rush-active) .scoreboard .gameplay-season-badge-slot {
    display: none;
  }

  /* Duel card: clock row, then "Active … 1 VS 2 … Active". */
  body:not(.possession-rush-active) .duel-card {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "top top top"
      "side-a line side-b";
    align-items: center;
    column-gap: 6px;
    row-gap: 2px;
    height: auto;
    min-height: 0;
    padding: 3px 8px;
  }

  body:not(.possession-rush-active) .duel-card > .duel-topline {
    grid-area: top;
  }

  body:not(.possession-rush-active) .duel-card > .duel-line {
    grid-area: line;
    height: auto;
    margin: 0;
  }

  body:not(.possession-rush-active) .duel-card > .active-duel-row {
    display: contents;
  }

  body:not(.possession-rush-active) .duel-card #activeSideA {
    grid-area: side-a;
    justify-self: end;
    min-width: 0;
  }

  body:not(.possession-rush-active) .duel-card #activeSideB {
    grid-area: side-b;
    justify-self: start;
    min-width: 0;
  }

  body:not(.possession-rush-active) .duel-card .active-side strong {
    display: block;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.possession-rush-active) .duel-card .match-clock {
    gap: 6px;
    height: auto;
    min-height: 0;
    padding: 1px 6px;
  }

  body:not(.possession-rush-active) .duel-card .round-timer-label {
    display: none;
  }

  body:not(.possession-rush-active) .duel-card #roundTimerValue {
    font-size: 18px;
    line-height: 1;
  }

  body:not(.possession-rush-active) .duel-card .round-timer-status {
    padding: 1px 6px;
    font-size: 9px;
  }

  body:not(.possession-rush-active) .duel-card .duel-line span {
    min-height: 0;
    padding: 1px 8px;
    font-size: 13px;
  }

  body:not(.possession-rush-active) .duel-card .duel-line b {
    padding: 2px 8px;
    font-size: 11px;
  }

  /* Team rails: name, then large Score and Penalty buttons stacked. */
  body:not(.possession-rush-active) .controls > .action-panel,
  body:not(.possession-rush-active) .controls > .action-panel:last-child {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    gap: 5px;
    height: auto;
    min-height: 0;
    padding: 5px;
  }

  body:not(.possession-rush-active) .controls > .action-panel > .action-title,
  body:not(.possession-rush-active) .controls > .action-panel:last-child > .action-title {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    height: auto;
    text-align: center;
  }

  body:not(.possession-rush-active) .controls > .action-panel > [data-action^="score-"],
  body:not(.possession-rush-active) .controls > .action-panel:last-child > [data-action^="score-"] {
    grid-column: 1;
    grid-row: 2;
  }

  body:not(.possession-rush-active) .controls > .action-panel > [data-action^="penalty-"],
  body:not(.possession-rush-active) .controls > .action-panel:last-child > [data-action^="penalty-"] {
    grid-column: 1;
    grid-row: 3;
  }

  body:not(.possession-rush-active) .controls .action {
    height: auto;
    min-height: 44px;
    max-height: 96px;
    font-size: 15px;
  }

  /* Tools: one row under the pitch. */
  body:not(.possession-rush-active) .controls > .middle-panel {
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0;
  }

  body:not(.possession-rush-active) .controls > .middle-panel .tool {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-height: 28px;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 1.1;
  }

  /* Older rules add a 20px top margin and a 40px minimum to the score and a
     31px VS pill, which made the top row 87px high. */
  body:not(.possession-rush-active) .scoreboard > .team-card .score-row {
    margin: 0;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card .score-row strong {
    min-height: 0;
  }

  body:not(.possession-rush-active) .duel-card > .duel-topline {
    margin: 0;
  }

  body:not(.possession-rush-active) .duel-card .duel-line b {
    grid-template-rows: auto;
    min-height: 0;
    height: 22px;
    padding: 0 8px;
  }

  body:not(.possession-rush-active) .duel-card .active-side {
    min-height: 0;
    padding: 1px 6px;
  }

  /* Countdown and ready banner sized from the small pitch. */
  body:not(.possession-rush-active) #field .event-banner.event-countdown {
    width: clamp(64px, 30cqh, 120px);
    height: clamp(64px, 30cqh, 120px);
    min-height: 0;
    font-size: clamp(36px, 20cqh, 76px);
  }

  body:not(.possession-rush-active) #field .event-banner.ready-tone {
    width: min(86%, 520px);
    padding: 8px 12px;
    font-size: clamp(12px, 5cqh, 20px);
  }

  body:not(.possession-rush-active) #field .ready-title {
    margin-bottom: 4px;
    font-size: clamp(16px, 9cqh, 28px);
  }

  body:not(.possession-rush-active) #field .ready-matchup {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
  }

  body:not(.possession-rush-active) #field .ready-participant {
    padding: 4px 8px;
    font-size: clamp(13px, 7cqh, 22px);
  }
}

/* ==========================================================================
   Phone landscape (height up to 500px), Possession Rush: the same team rails
   as Duel and a flat possession header (timers and centre card in one row).
   The Rush rules force 112-146px tall header cards, so several values here
   need !important.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  body.possession-rush-active .app {
    display: grid;
    grid-template-columns: clamp(96px, 15vw, 150px) minmax(0, 1fr) clamp(96px, 15vw, 150px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "team-a duel team-b"
      "actions-a stage actions-b"
      "actions-a tools actions-b";
    gap: 5px 6px;
    height: 100dvh;
    max-height: 100dvh;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  body.possession-rush-active .scoreboard,
  body.possession-rush-active .controls {
    display: contents;
  }

  body.possession-rush-active .scoreboard > .team-card.team-a {
    grid-area: team-a;
  }

  body.possession-rush-active .scoreboard > .duel-card {
    grid-area: duel;
  }

  body.possession-rush-active .scoreboard > .team-card.team-b {
    grid-area: team-b;
  }

  body.possession-rush-active .stage {
    grid-area: stage;
    container-type: size;
    min-height: 0;
    padding: 0;
  }

  body.possession-rush-active #field.field {
    width: min(100cqw, calc(100cqh * 16 / 9));
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 16 / 9;
  }

  body.possession-rush-active .controls > .action-panel:first-child {
    grid-area: actions-a;
  }

  body.possession-rush-active .controls > .middle-panel {
    grid-area: tools;
  }

  body.possession-rush-active .controls > .action-panel:last-child {
    grid-area: actions-b;
  }

  /* Team cards: trophies above a small score row. */
  body.possession-rush-active .scoreboard > .team-card,
  body.possession-rush-active .scoreboard > .team-card.team-b {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-content: center;
    gap: 2px;
    height: auto;
    min-height: 0;
    padding: 4px;
  }

  body.possession-rush-active .scoreboard > .team-card .trophy-row {
    position: static;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    gap: 2px;
  }

  body.possession-rush-active .scoreboard > .team-card .trophy-row > * {
    width: 14px;
    height: 14px;
  }

  body.possession-rush-active .scoreboard > .team-card .score-row,
  body.possession-rush-active .scoreboard > .team-card.team-b .score-row {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: 26px auto 26px;
    gap: 4px;
    height: auto;
    min-height: 0;
    margin: 0;
  }

  body.possession-rush-active .scoreboard > .team-card .score-row strong {
    min-height: 0;
    font-size: 20px;
    line-height: 1;
  }

  body.possession-rush-active .scoreboard .score-adjust {
    width: 26px;
    height: 26px;
    min-height: 0;
  }

  body.possession-rush-active .scoreboard .gameplay-season-badge-slot {
    display: none;
  }

  /* Possession header: one flat row. */
  body.possession-rush-active .scoreboard > .duel-card {
    height: auto;
    min-height: 0;
    padding: 3px 6px;
  }

  body.possession-rush-active .possession-rush-panel,
  body.possession-rush-active .possession-rush-panel.no-rush-emblem {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body.possession-rush-active .possession-rush-main-grid {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr) minmax(58px, auto);
    gap: 5px;
  }

  body.possession-rush-active .possession-rush-timer-card,
  body.possession-rush-active .possession-rush-center-card {
    min-height: 0 !important;
    max-height: none !important;
    padding: 2px 6px !important;
  }

  body.possession-rush-active .possession-rush-timer-card > span {
    font-size: 9px;
  }

  body.possession-rush-active .possession-rush-timer-card > b {
    margin-top: 1px;
    font-size: 18px;
  }

  body.possession-rush-active .possession-rush-center-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 0 6px;
  }

  body.possession-rush-active .possession-rush-emblem {
    width: 30px !important;
    height: 30px !important;
  }

  body.possession-rush-active #possessionRushTeam,
  body.possession-rush-active #possessionRushTeam.team-name-long,
  body.possession-rush-active #possessionRushTeam.team-name-very-long,
  body.possession-rush-active #possessionRushTeam.team-name-ultra-long {
    font-size: 14px;
  }

  body.possession-rush-active .possession-rush-pair-card {
    padding: 1px 6px;
  }

  body.possession-rush-active #possessionRushPair {
    font-size: 10px;
  }

  /* Team rails: name, then large Correct and Wrong buttons stacked. */
  body.possession-rush-active .controls > .action-panel,
  body.possession-rush-active .controls > .action-panel:last-child {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
    align-content: center;
    gap: 5px;
    height: auto;
    min-height: 0;
    padding: 5px;
  }

  body.possession-rush-active .controls > .action-panel > .action-title {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    height: auto;
    text-align: center;
  }

  body.possession-rush-active .controls > .action-panel > [data-action^="score-"] {
    grid-column: 1;
    grid-row: 2;
  }

  body.possession-rush-active .controls > .action-panel > [data-action^="penalty-"] {
    grid-column: 1;
    grid-row: 3;
  }

  body.possession-rush-active .controls .action {
    height: auto;
    min-height: 44px;
    max-height: 96px;
    font-size: 15px;
  }

  /* Tools: one row under the pitch. */
  body.possession-rush-active .controls > .middle-panel {
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0;
  }

  body.possession-rush-active .controls > .middle-panel .tool {
    grid-column: auto;
    grid-row: auto;
    height: auto;
    min-height: 28px;
    padding: 2px 4px;
    font-size: 10px;
    line-height: 1.1;
  }

  /* Countdown and possession banners sized from the small pitch. */
  body.possession-rush-active #field .event-banner.event-countdown,
  body.possession-rush-active #field .event-banner.show.event-countdown {
    top: 26% !important;
    width: clamp(64px, 30cqh, 110px) !important;
    height: clamp(64px, 30cqh, 110px) !important;
    font-size: clamp(36px, 20cqh, 70px) !important;
  }

  body.possession-rush-active #field .event-banner.possession-ready-banner,
  body.possession-rush-active #field .event-banner.possession-switch-banner {
    width: min(92%, 520px) !important;
    max-height: none !important;
    padding: 6px 10px !important;
    font-size: clamp(12px, 6cqh, 20px) !important;
  }

  /* The round clock chip sits in the top-right corner over the word timer:
     make it small and move the "Word" label below it. */
  body.possession-rush-active .duel-card #matchClock {
    top: 2px !important;
    right: 6px !important;
    min-height: 0 !important;
    padding: 0 5px !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  body.possession-rush-active .duel-card #roundTimerValue {
    font-size: 11px !important;
  }

  body.possession-rush-active .possession-rush-word-card {
    padding-top: 14px !important;
  }
}

/* ==========================================================================
   Big moments: trophy slam with the level cup, level-up cup, penalty title.
   ========================================================================== */
.fx-goal-slam-trophy {
  display: none;
  width: clamp(72px, 18vh, 150px);
  height: auto;
  margin-bottom: -6%;
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 26px rgba(247, 216, 74, 0.55));
  pointer-events: none;
}

.fx-goal-slam.is-trophy .fx-goal-slam-trophy {
  display: block;
}

.fx-goal-slam.is-trophy.is-running {
  animation-duration: 1700ms;
}

.fx-goal-slam.is-trophy.is-running .fx-goal-slam-trophy {
  animation: fxTrophyRise 1700ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@media (min-width: 760px) and (orientation: landscape) {
  .fx-goal-slam-trophy {
    width: min(26cqh, 170px);
  }
}

.level-up-trophy {
  display: block;
  width: clamp(90px, 18vh, 170px);
  height: auto;
  margin: -8px auto 6px;
  filter:
    drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 30px rgba(247, 216, 74, 0.6));
  animation: fxLevelTrophyIn 1100ms cubic-bezier(0.2, 0.9, 0.25, 1) 120ms both;
}

/* Penalty: the title beats while the shot is still open (not in the answer review
   or the Team Assist dialog, which reuse this card). */
.penalty:not([hidden]):not(.possession-team-assist-modal):has(.penalty-prompt-card:not(.answer-review)) .penalty-card h2 {
  animation: fxPenaltyHeartbeat 1300ms ease-in-out 460ms infinite;
}

@keyframes fxTrophyRise {
  0% { opacity: 0; translate: 0 40%; scale: 0.6; rotate: -8deg; }
  22% { opacity: 1; translate: 0 -6%; scale: 1.08; rotate: 3deg; }
  34% { translate: 0 0; scale: 1; rotate: 0deg; }
  100% { opacity: 1; translate: 0 -4%; scale: 1.02; rotate: 0deg; }
}

@keyframes fxLevelTrophyIn {
  0% { opacity: 0; translate: 0 -30%; scale: 1.4; }
  60% { opacity: 1; translate: 0 4%; scale: 0.96; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes fxPenaltyHeartbeat {
  0%, 56%, 100% { scale: 1; }
  14% { scale: 1.05; }
  28% { scale: 1; }
  42% { scale: 1.035; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-goal-slam.is-trophy.is-running .fx-goal-slam-trophy,
  .level-up-trophy,
  .penalty-card h2 {
    animation: none !important;
  }
}

/* ==========================================================================
   Countdown ring and word card sweep
   ========================================================================== */

/* A ring around each countdown number drains in the number's colour. */
@property --fx-countdown-progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

.event-banner.event-countdown::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 4px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, currentColor calc(var(--fx-countdown-progress) * 360deg), rgba(255, 255, 255, 0.1) 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0.85;
  pointer-events: none;
  animation: fxCountdownDrain 760ms linear both;
}

body.possession-rush-active .event-banner.event-countdown::before {
  animation-duration: 1080ms;
}

/* Light sweep over the word card when a word appears; green when the answer is
   revealed by pressing Score. */
.fx-word-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 196, 0.5) 47%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 244, 196, 0.5) 53%, transparent 70%) no-repeat;
  background-position: 140% 0;
  background-size: 250% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.fx-word-sweep.is-running {
  animation: fxWordSweep 900ms cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

.fx-word-sweep.is-correct {
  background-image: linear-gradient(105deg, transparent 30%, rgba(125, 255, 174, 0.5) 47%, rgba(220, 255, 232, 0.85) 50%, rgba(125, 255, 174, 0.5) 53%, transparent 70%);
  box-shadow:
    inset 0 0 0 2px rgba(125, 255, 174, 0.6),
    inset 0 0 40px rgba(125, 255, 174, 0.24);
  animation: fxWordSweep 950ms cubic-bezier(0.3, 0.1, 0.3, 1) both;
}

@keyframes fxCountdownDrain {
  from { --fx-countdown-progress: 1; }
  to { --fx-countdown-progress: 0; }
}

@keyframes fxWordSweep {
  0% { opacity: 0; background-position: 140% 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}

body.performance-mode .fx-word-sweep {
  display: none !important;
}

body.performance-mode .event-banner.event-countdown::before {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .event-banner.event-countdown::before,
  .fx-word-sweep.is-running,
  .fx-word-sweep.is-correct {
    animation: none !important;
  }
}

/* ==========================================================================
   In-game sound switch: small round button in the pitch's top-left corner.
   ========================================================================== */
.field-sound-toggle {
  position: absolute;
  top: clamp(6px, 1.4%, 14px);
  left: clamp(6px, 1%, 14px);
  z-index: 12;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(4, 14, 26, 0.55);
  color: rgba(230, 244, 255, 0.72);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field-sound-toggle svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

.field-sound-toggle .sound-speaker {
  fill: currentColor;
}

.field-sound-toggle .sound-waves,
.field-sound-toggle .sound-mute {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.field-sound-toggle:not(.is-on) .sound-waves,
.field-sound-toggle.is-on .sound-mute {
  display: none;
}

.field-sound-toggle.is-on {
  border-color: rgba(247, 216, 74, 0.5);
  color: #f7d84a;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(247, 216, 74, 0.25);
}

.field-sound-toggle:hover {
  background: rgba(8, 24, 42, 0.78);
  color: #ffffff;
}

.field-sound-toggle:focus-visible {
  outline: 2px solid #f7d84a;
  outline-offset: 2px;
}

@media (orientation: landscape) and (max-height: 500px) {
  .field-sound-toggle {
    width: 28px;
    height: 28px;
  }

  .field-sound-toggle svg {
    width: 15px;
    height: 15px;
  }
}

/* Storage warning (storage-guard.js): stays until dismissed. */
.storage-notice {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: min(560px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid rgba(247, 216, 74, 0.45);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 26, 6, 0.96), rgba(6, 16, 28, 0.96));
  color: #f2f7fb;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  translate: -50% 0;
}

.storage-notice[hidden] {
  display: none;
}

.storage-notice.is-error {
  border-color: rgba(255, 99, 99, 0.6);
  background: linear-gradient(135deg, rgba(60, 10, 18, 0.96), rgba(6, 16, 28, 0.96));
}

.storage-notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
}

.storage-notice p {
  margin: 0;
  color: rgba(230, 240, 248, 0.86);
  font-size: 13px;
  line-height: 1.4;
}

.storage-notice button {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.storage-notice button:focus-visible {
  outline: 2px solid #f7d84a;
  outline-offset: 2px;
}

/* ==========================================================================
   Laptop and desktop HUD (MacBook Air full screen and similar): team emblems
   stay inside their cards, active-team labels stay readable, no tiny text.
   ========================================================================== */

/* The emblem slot shares the team-a/team-b class with the team card, so it
   picked up the card's 5 px team-colour edge as a stray stripe. */
.gameplay-season-badge-slot.team-a,
.gameplay-season-badge-slot.team-b {
  border: 0;
}

/* "Active" and the team are separate spans (app.js); by default they still
   read as one line, "Active: Team 3". */
body .scoreboard .active-side strong > span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

body .scoreboard .active-side-caption::after {
  content: ": ";
}

@media (min-width: 760px) and (min-height: 501px) and (orientation: landscape) {
  /* The emblem frame kept its 90-134 px size inside the capped slot, so it
     spilled over the -/+ buttons and out of the card. */
  body:not(.possession-rush-active) .scoreboard > .team-card .gameplay-season-badge-slot:not(:empty) .gameplay-season-badge-primary,
  body.possession-rush-active .scoreboard > .team-card .gameplay-season-badge-slot:not(:empty) .gameplay-season-badge-primary {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
  }

  /* Possession Rush: same emblem size as the Duel HUD, so "0/3" keeps its width. */
  body.possession-rush-active .scoreboard > .team-card .gameplay-season-badge-slot:not(:empty) {
    width: clamp(36px, 6dvh, 56px);
    height: clamp(36px, 6dvh, 56px);
    min-height: 0;
  }

  body.possession-rush-active .scoreboard > .team-card.team-a .score-row:has(.gameplay-season-badge-slot:not(:empty)) {
    grid-template-columns: auto minmax(max-content, 1fr) auto auto;
  }

  body.possession-rush-active .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot:not(:empty)) {
    grid-template-columns: auto auto minmax(max-content, 1fr) auto;
  }
}

/* Duel: the side columns beside "Team VS Team" are narrow, so "Active: Team 3"
   was cut to "Active:…". Caption above the name fits the same space. */
@media (min-width: 981px) and (min-height: 501px) and (orientation: landscape) {
  body:not(.possession-rush-active) .duel-card .active-side {
    padding: 2px 8px;
  }

  body:not(.possession-rush-active) .duel-card .active-side strong {
    display: grid;
    justify-items: center;
    font-size: clamp(13px, 1.7dvh, 16px);
    line-height: 1.1;
  }

  body:not(.possession-rush-active) .duel-card .active-side strong > .active-side-caption {
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.78;
  }

  body:not(.possession-rush-active) .duel-card .active-side-caption::after {
    content: none;
  }

  body:not(.possession-rush-active) .duel-card .active-side strong > .active-side-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Captions and tool buttons stay readable on laptop and tablet screens
   (Possession Rush was 8.5-10.5 px, Duel tools and "Active" 9-10.7 px). */
@media (min-width: 760px) and (min-height: 621px) and (orientation: landscape) {
  body.possession-rush-active .round-timer-status,
  body.possession-rush-active .possession-rush-timer-card > span {
    font-size: 11px;
  }

  body.possession-rush-active .controls > .middle-panel > .tool {
    font-size: 12px;
  }
}

@media (min-width: 981px) and (min-height: 501px) and (orientation: landscape) {
  body:not(.possession-rush-active) .controls .middle-panel .tool {
    font-size: clamp(11px, 1.4dvh, 13px);
  }

  body:not(.possession-rush-active) .duel-card .active-side strong > .active-side-caption {
    font-size: max(11px, 0.7em);
  }
}

@media (min-width: 760px) and (min-height: 501px) and (orientation: landscape) {
  /* Possession Rush team cards: trophies in their own row above the score.
     Positioned over the card, they covered "0/3" and the -/+ buttons. */
  body.possession-rush-active .scoreboard > .team-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 2px;
  }

  body.possession-rush-active .scoreboard > .team-card .trophy-row {
    position: static;
    grid-row: 1;
    height: auto;
    inset: auto;
  }

  body.possession-rush-active .scoreboard > .team-card.team-a .trophy-row {
    justify-self: start;
  }

  body.possession-rush-active .scoreboard > .team-card.team-b .trophy-row {
    justify-self: end;
  }

  body.possession-rush-active .scoreboard > .team-card .trophy-row > * {
    width: clamp(16px, 2.4dvh, 24px);
    height: clamp(16px, 2.4dvh, 24px);
  }

  body.possession-rush-active .scoreboard > .team-card .score-row {
    grid-row: 2;
    margin-top: 0;
  }

  body.possession-rush-active .scoreboard > .team-card .score-row strong {
    min-height: 0;
    font-size: clamp(30px, 4.6dvh, 46px);
    line-height: 1;
  }

  /* Centre emblem: the artwork was drawn at 108-120 % of its box and hung
     out of the header. */
  body.possession-rush-active .scoreboard .possession-rush-emblem-art,
  body.possession-rush-active .scoreboard .possession-rush-emblem-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
  }
}

/* Possession Rush, 760-980 px landscape (stacked header): the clock chip sat
   on the Word card and the action buttons stuck out of their row. */
@media (min-width: 760px) and (max-width: 980px) and (min-height: 501px) and (orientation: landscape) {
  body.possession-rush-active .scoreboard > .duel-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 3px;
  }

  body.possession-rush-active .duel-topline {
    position: static;
    justify-self: center;
    transform: none;
  }

  body.possession-rush-active .controls {
    grid-template-rows: auto auto;
  }
}

/* Duel, 981-1180 px: with a team emblem the trophies, -/+ buttons, score and
   emblem no longer fit in one row, so the trophies move above the score. */
@media (min-width: 981px) and (max-width: 1180px) and (min-height: 501px) and (orientation: landscape) {
  body:not(.possession-rush-active) .scoreboard > .team-card:has(.gameplay-season-badge-slot:not(:empty)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    row-gap: 2px;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card:has(.gameplay-season-badge-slot:not(:empty)) .trophy-row {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-a:has(.gameplay-season-badge-slot:not(:empty)) .trophy-row {
    justify-self: start;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card.team-b:has(.gameplay-season-badge-slot:not(:empty)) .trophy-row {
    justify-self: end;
  }

  body:not(.possession-rush-active) .scoreboard > .team-card:has(.gameplay-season-badge-slot:not(:empty)) .score-row {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Phone landscape, Possession Rush with team emblems: the emblem slot is
   hidden there, but the four-column emblem score grid still applied, so "0/3"
   got a 0 px column and the -/+ buttons stuck out of the card. The clock chip
   sat on the Word card; it gets its own row (the pitch is limited by the
   width here, so it keeps its size). */
@media (orientation: landscape) and (max-height: 500px) {
  body.possession-rush-active .scoreboard > .team-card.team-a .score-row:has(.gameplay-season-badge-slot),
  body.possession-rush-active .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot) {
    grid-template-columns: auto minmax(max-content, 1fr) auto;
  }

  body.possession-rush-active .scoreboard > .duel-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 2px;
  }

  body.possession-rush-active .duel-topline {
    position: static;
    justify-self: center;
    transform: none;
  }

  body.possession-rush-active .scoreboard .possession-rush-emblem-art,
  body.possession-rush-active .scoreboard .possession-rush-emblem-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0;
  }

  /* Duel has the same hidden emblem slot; on small phones (740 px) the
     emblem grid pushed the -/+ buttons 50 px out of the team rail. */
  body:not(.possession-rush-active) .scoreboard > .team-card.team-a .score-row:has(.gameplay-season-badge-slot),
  body:not(.possession-rush-active) .scoreboard > .team-card.team-b .score-row:has(.gameplay-season-badge-slot) {
    grid-template-columns: auto minmax(max-content, 1fr) auto;
  }
}

/* ==========================================================================
   Level-up light rift: it opened into a hard-edged 34vw column (gold, cyan,
   red) behind the card and read as a rendering fault. Soft side edges and a
   single championship-gold light keep the shaft without the band.
   ========================================================================== */
.level-up .rift {
  background: linear-gradient(180deg, transparent 4%, rgba(255, 243, 166, 0.9) 30%, rgba(247, 216, 74, 0.55) 64%, transparent 96%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 58%, transparent);
  animation-name: fxRiftOpenSoft;
}

@keyframes fxRiftOpenSoft {
  0% { width: 6px; opacity: 0; }
  18% { opacity: 1; }
  58% { width: 26vw; opacity: 0.85; }
  100% { width: 110vw; opacity: 0; }
}

/* ==========================================================================
   Long team names (e.g. "Die unglaublichen Vokabelhelden"): the name pills
   took the whole duel line, so the active-team labels shrank to 0 px and
   disappeared; the team names beside Score/Penalty were cut mid-word.
   ========================================================================== */
@media (min-width: 760px) and (max-width: 980px) and (min-height: 501px) and (orientation: landscape) {
  /* One-line "Active: Team 4" needs about 110 px. */
  body:not(.possession-rush-active) .duel-card {
    grid-template-columns: minmax(112px, 1fr) minmax(0, auto) minmax(112px, 1fr);
  }
}

@media (min-width: 981px) and (min-height: 501px) and (orientation: landscape) {
  /* Two-line "ACTIVE / Team 4" fits in 72 px, so normal names keep their pills. */
  body:not(.possession-rush-active) .duel-card {
    grid-template-columns: minmax(72px, 1fr) minmax(0, auto) minmax(72px, 1fr);
  }
}

@media (min-width: 760px) and (min-height: 501px) and (orientation: landscape) {
  body:not(.possession-rush-active) .controls .action-title {
    display: -webkit-box;
    max-width: 112px;
    font-size: 11px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  body:not(.possession-rush-active) .duel-card {
    grid-template-columns: minmax(84px, 1fr) minmax(0, auto) minmax(84px, 1fr);
  }

  body:not(.possession-rush-active) .controls .action-panel .action-title,
  body.possession-rush-active .controls .action-panel .action-title {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 760px) and (orientation: landscape) {
  body:not(.possession-rush-active) .duel-card > .duel-line {
    min-width: 0;
    max-width: 100%;
  }

  body:not(.possession-rush-active) .duel-card > .duel-line > span {
    min-width: 0;
    flex: 0 1 auto;
  }
}

@media (min-width: 981px) and (orientation: landscape) {
  body.possession-rush-active #possessionRushTeam.team-name-very-long {
    font-size: clamp(0.95rem, 1.25vw, 1.45rem);
  }
}

/* ==========================================================================
   Goal celebration signatures (gameplay-fx.js): fireworks sky, storm, camera
   zoom, net nudge, emblem slam, TV replay; pressure heartbeat vignette.
   ========================================================================== */

/* Fireworks: the sky darkens a little so the rockets stand out. */
body.fx-fireworks .fx-arena::before {
  opacity: 1;
  background: linear-gradient(180deg, rgba(2, 6, 18, 0.62), rgba(2, 6, 18, 0.18) 60%, transparent);
  transition-duration: 240ms;
}

/* Storm: lights out; every strike flashes the whole pitch. */
body.fx-storm .fx-arena::before {
  opacity: 1;
  background: rgba(2, 5, 14, 0.72);
  transition-duration: 160ms;
}

body.fx-storm .fx-beams {
  opacity: 0.12;
}

.fx-impact-light.is-flash {
  background: rgba(236, 244, 255, 0.55);
  animation: fxStormFlash 260ms ease-out both;
}

/* Camera punch-in on the goal. */
body.fx-zoom .field-bg {
  scale: 1.22;
  transition: scale 240ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

body.fx-zoom .fx-arena::before {
  opacity: 1;
}

/* Net hit: the pitch nudges towards the goal. */
#field.fx-nudge-left {
  animation: fxNudgeLeft 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

#field.fx-nudge-right {
  animation: fxNudgeRight 520ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* Emblem slam: the scoring team's emblem lands in the middle of the pitch. */
.fx-emblem-slam {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 9;
  display: grid;
  place-items: center;
  width: min(34vmin, 300px);
  aspect-ratio: 1;
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}

@media (min-width: 760px) and (orientation: landscape) {
  .fx-emblem-slam {
    width: min(40cqh, 320px);
  }
}

.fx-emblem-slam-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 30px rgba(var(--fx-team-rgb), 0.85));
}

.fx-emblem-slam-rays {
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(var(--fx-team-rgb), 0.55) 0deg 7deg, transparent 7deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
}

.fx-emblem-slam.is-running {
  animation: fxEmblemSlam 1900ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.fx-emblem-slam.is-running .fx-emblem-slam-rays {
  animation: fxEmblemRays 1900ms ease-out both;
}

/* TV replay: letterbox bars, a REPLAY tag and a washed-out picture. */
.fx-replay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    rgba(6, 12, 22, 0.3);
  opacity: 0;
  pointer-events: none;
}

.fx-replay::before,
.fx-replay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 11%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.78));
}

.fx-replay::before {
  top: 0;
  translate: 0 -100%;
}

.fx-replay::after {
  bottom: 0;
  translate: 0 100%;
}

.fx-replay-tag {
  position: absolute;
  left: 3%;
  top: 13%;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.8em 0.3em 0.6em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  background: rgba(4, 12, 24, 0.72);
  color: #fff;
  font-size: clamp(12px, 1.6vw, 22px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fx-replay-tag::before {
  content: "";
  width: 0.6em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ff4a5e;
  box-shadow: 0 0 10px rgba(255, 74, 94, 0.9);
  animation: fxReplayDot 900ms ease-in-out infinite;
}

.fx-replay.is-running {
  animation: fxReplayShow 2100ms ease both;
}

.fx-replay.is-running::before,
.fx-replay.is-running::after {
  animation: fxReplayBars 2100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Pressure Mode and Final Attack: the stadium edges pulse like a heartbeat. */
.fx-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(ellipse at 50% 55%, transparent 52%, rgba(var(--fx-vignette-rgb, 255, 150, 60), 0.34) 100%);
  opacity: 0;
  pointer-events: none;
}

body.round-pressure-active .fx-vignette {
  animation: fxHeartbeat 1600ms ease-in-out infinite;
}

body.round-final-attack .fx-vignette {
  --fx-vignette-rgb: 255, 70, 84;
  animation: fxHeartbeat 1050ms ease-in-out infinite;
}

body.performance-mode .fx-emblem-slam,
body.performance-mode .fx-replay {
  display: none !important;
}

@keyframes fxStormFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fxNudgeLeft {
  0%, 100% { translate: 0 0; }
  18% { translate: -14px 2px; }
  40% { translate: 6px -1px; }
  62% { translate: -3px 0; }
}

@keyframes fxNudgeRight {
  0%, 100% { translate: 0 0; }
  18% { translate: 14px 2px; }
  40% { translate: -6px -1px; }
  62% { translate: 3px 0; }
}

@keyframes fxEmblemSlam {
  0% { opacity: 0; scale: 2.8; filter: blur(8px); }
  14% { opacity: 1; scale: 0.9; filter: blur(0); }
  22% { scale: 1.06; }
  30% { scale: 1; }
  80% { opacity: 1; scale: 1.03; }
  100% { opacity: 0; scale: 0.92; }
}

@keyframes fxEmblemRays {
  0% { opacity: 0; rotate: -20deg; scale: 0.6; }
  18% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { opacity: 0; rotate: 70deg; scale: 1.15; }
}

@keyframes fxReplayShow {
  0% { opacity: 0; }
  8%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fxReplayBars {
  14%, 86% { translate: 0 0; }
}

@keyframes fxReplayDot {
  50% { opacity: 0.25; }
}

@keyframes fxHeartbeat {
  0%, 100% { opacity: 0.15; }
  12% { opacity: 0.75; }
  24% { opacity: 0.3; }
  36% { opacity: 0.6; }
  60% { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-emblem-slam.is-running .fx-emblem-slam-rays,
  .fx-replay.is-running::before,
  .fx-replay.is-running::after,
  .fx-replay-tag::before,
  #field.fx-nudge-left,
  #field.fx-nudge-right,
  body.round-pressure-active .fx-vignette,
  body.round-final-attack .fx-vignette,
  .fx-impact-light.is-flash {
    animation: none !important;
  }

  body.fx-zoom .field-bg {
    scale: 1.012;
  }
}

/* The word card sits over the sky and the stands; during a goal celebration
   it steps back so fireworks, smoke and lightning are not hidden behind it. */
#wordDisplay {
  transition: opacity 260ms ease;
}

body.fx-goal-celebrate #wordDisplay {
  opacity: 0.3;
}

/* Full-screen switch beside the sound button; hidden where the browser offers
   no Fullscreen API. */
.field-fullscreen-toggle {
  position: absolute;
  top: clamp(6px, 1.4%, 14px);
  left: calc(clamp(6px, 1%, 14px) + 42px);
  z-index: 12;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(4, 14, 26, 0.55);
  color: rgba(230, 244, 255, 0.72);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.field-fullscreen-toggle[hidden] {
  display: none;
}

.field-fullscreen-toggle svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field-fullscreen-toggle.is-on .fullscreen-enter,
.field-fullscreen-toggle:not(.is-on) .fullscreen-exit {
  display: none;
}

.field-fullscreen-toggle.is-on {
  border-color: rgba(247, 216, 74, 0.5);
  color: #f7d84a;
}

.field-fullscreen-toggle:hover {
  background: rgba(8, 24, 42, 0.78);
  color: #ffffff;
}

.field-fullscreen-toggle:focus-visible {
  outline: 2px solid #f7d84a;
  outline-offset: 2px;
}

@media (orientation: landscape) and (max-height: 500px) {
  .field-fullscreen-toggle {
    left: calc(clamp(6px, 1%, 14px) + 34px);
    width: 28px;
    height: 28px;
  }

  .field-fullscreen-toggle svg {
    width: 15px;
    height: 15px;
  }
}

/* ==========================================================================
   Borderless pitch on laptop and desktop screens (MacBook Air full screen):
   the pitch reaches under the glass score and control bars, which float over
   the sky and the pitch-side boards. At 1470x923 the pitch grows from
   1233x694 to about 1384x779. Only where the height limits the pitch
   (wide windows); delete this block to go back to the framed pitch.
   ========================================================================== */
@media (min-width: 981px) and (min-height: 621px) and (min-aspect-ratio: 7/5) and (orientation: landscape) {
  body .app {
    --hud-overlap: clamp(28px, 4.6dvh, 52px);
  }

  body .app > .scoreboard,
  body .app > .controls {
    position: relative;
    z-index: 4;
  }

  body .app > .stage {
    z-index: 1;
    margin-block: calc(-1 * var(--hud-overlap));
  }

  #field .field-sound-toggle,
  #field .field-fullscreen-toggle {
    top: calc(var(--hud-overlap) + 8px);
  }
}

/* ==========================================================================
   Season Hub on the projector: record, MVP, award and history labels were
   9-10 px. At least 11 px everywhere, 12 px for Hub labels on laptop and
   desktop screens.
   ========================================================================== */
.season-team-record-block small,
.season-team-mvp-card span,
.season-team-mvp-card small,
.season-team-mvp-card em,
.season-vocabulary-copy > span,
.season-snapshot-chip span,
.season-history-score-center span,
.season-award-preview-item > span,
.season-award-preview-item > small,
.season-standings-table th,
.season-standing-compact-stat span,
.season-standing-points span,
.season-mvp-details-stat small,
.season-mvp-details-team-badge,
.season-roster-fixed-name small,
.season-vocabulary-badge,
.season-awards-preview-action,
.season-awards-modal-card-top em,
.season-ceremony-shared-pill,
.season-award-empty-mark,
.season-history-pair-badge,
.season-history-pair-more,
.season-champion-cup-more,
.season-stack-more {
  font-size: 11px;
}

@media (min-width: 1181px) and (min-height: 621px) {
  .season-team-record-block small,
  .season-team-mvp-card span,
  .season-team-mvp-card small,
  .season-vocabulary-copy > span,
  .season-snapshot-chip span,
  .season-history-score-center span,
  .season-award-preview-item > span,
  .season-standings-table th,
  .season-standing-compact-stat span,
  .season-mvp-details-stat small {
    font-size: 12px;
  }
}

/* Awards dialog: winner emblems are drawn at 138 % of their 44 px circle and
   covered the winner text below ("Tied"). The stack gets room for the artwork. */
.season-awards-modal-card .season-award-badge-stack {
  padding-block: 6px 24px;
}

/* ==========================================================================
   Tidier setup (2026-09-15): the dashboard cards are the navigation. A
   section appears only once it is opened, so the page no longer lists every
   section twice; the card of the open section is marked.
   ========================================================================== */
#setup .setup-layer.is-collapsed {
  display: none;
}

.setup-dashboard-card.is-current {
  border-color: rgba(247, 216, 74, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(247, 216, 74, 0.2),
    0 12px 28px rgba(0, 0, 0, 0.24);
}

.setup-dashboard-status {
  display: block;
  overflow: hidden;
  color: rgba(213, 232, 247, 0.62);
  font-size: 13px;
  font-style: normal;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-dashboard-status.is-ready {
  color: #9effcd;
}

/* Vocabulary sources as one calm row of tabs. */
.vocabulary-center {
  gap: 0;
  padding: 10px;
}

.vocabulary-source-nav-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
}

.vocabulary-source-nav-card small {
  margin-top: 2px;
  font-size: 13px;
}

#setupWordBank[data-vocab-view="built-in"] .vocabulary-center {
  gap: 15px;
  padding: 18px;
}

/* Paste Your Own Words: paste, check, save. */
#setupWordBank[data-vocab-view="built-in"] > .vocab-import,
#setupWordBank[data-vocab-view="saved"] > .vocab-import,
#setupWordBank[data-vocab-view="import"] > .vocabulary-banks {
  display: none;
}

.vocab-import .smart-import-panel {
  display: grid;
  gap: 22px;
  padding: 18px;
  border-radius: 14px;
}

.vocab-import .smart-import-panel::after {
  display: none;
}

.vocab-import-step,
.vocab-import .smart-import-preview {
  display: grid;
  gap: 12px;
}

.vocab-import .smart-import-preview[hidden],
.vocab-import-done[hidden],
.vocab-import-save > [hidden] {
  display: none;
}

.vocab-import .smart-import-paste textarea {
  min-height: 190px;
  font-size: 18px;
}

.vocab-import .smart-import-paste textarea.is-drop-target {
  outline: 2px dashed rgba(247, 216, 74, 0.85);
  outline-offset: 3px;
}

.vocab-import-formats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: rgba(213, 232, 247, 0.72);
  font-size: 13px;
  font-weight: 650;
}

.vocab-import-formats code {
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: rgba(2, 9, 18, 0.5);
  color: #eef8fa;
  font: 600 13px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.vocab-import .smart-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vocab-import .upload-tool,
.vocab-import .tool.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vocab-import .tool img {
  width: 18px;
  height: 18px;
}

.smart-import-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.vocab-import .smart-import-level {
  min-height: 0;
}

.vocab-import .smart-import-table-wrap {
  max-height: 340px;
}

.vocab-import .smart-import-table th,
.vocab-import .smart-import-table td {
  font-size: 14px;
  vertical-align: middle;
}

.vocab-import .smart-import-table th:nth-child(3) {
  width: 150px;
}

.vocab-import .smart-import-table th:nth-child(4) {
  width: 170px;
}

.vocab-import .smart-import-table th:nth-child(5) {
  width: 104px;
}

.smart-import-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.vocab-import .smart-import-table tr.has-warning td:nth-child(4) {
  color: #ffe08a;
}

.vocab-import .smart-import-table tr.is-excluded td:not(:last-child) {
  opacity: 0.45;
  text-decoration: line-through;
}

.smart-import-row-toggle {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

.vocab-import-save {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr) auto auto;
  gap: 12px;
  align-items: end;
}

.vocab-import-use {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: #e6f4fa;
  font-weight: 750;
  cursor: pointer;
}

.vocab-import-use input {
  width: 20px;
  height: 20px;
  accent-color: #f7d84a;
}

.vocab-import-save .tool.primary {
  min-height: 48px;
}

.vocab-import-done {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid rgba(82, 255, 168, 0.36);
  border-radius: 12px;
  background: rgba(82, 255, 168, 0.08);
}

.vocab-import-done strong {
  color: #d8ffea;
  font-size: 18px;
}

.vocab-import-done p {
  margin: 0;
  color: #cfe7f2;
}

.vocab-import-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .vocab-import-save {
    grid-template-columns: minmax(0, 1fr);
  }
}

.vocab-import h4 {
  margin: 0;
}

.vocab-import .vocab-center-section-heading {
  margin-top: 0;
}

.vocab-import .vocab-center-section-heading p {
  margin: 3px 0 0;
}

.vocab-import .smart-import-actions .tool {
  min-height: 40px;
  margin: 0;
}

/* Phones: each checked word becomes a small card instead of a squeezed table row. */
@media (max-width: 640px) {
  .vocab-import .smart-import-table-wrap {
    max-height: 420px;
  }

  .vocab-import .smart-import-table,
  .vocab-import .smart-import-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .vocab-import .smart-import-table thead {
    display: none;
  }

  .vocab-import .smart-import-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .vocab-import .smart-import-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .vocab-import .smart-import-table td:nth-child(1) {
    grid-column: 1;
    font-weight: 760;
  }

  .vocab-import .smart-import-table td:nth-child(2) {
    grid-column: 1;
    color: rgba(226, 240, 244, 0.78);
  }

  .vocab-import .smart-import-table td:nth-child(3) {
    grid-column: 1;
  }

  .vocab-import .smart-import-table td:nth-child(4) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 13px;
  }

  .vocab-import .smart-import-table td:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }

  .vocab-import .smart-import-row-level {
    max-width: 180px;
  }
}

@media (max-width: 640px) {
  .vocab-import .smart-import-level {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6px;
    width: 100%;
  }

  .vocab-import .smart-import-level select {
    width: 100%;
    font-size: 16px;
  }
}

/* ==========================================================================
   Keyboard shortcuts (2026-09-15): key list, one-time tip, pressed flash.
   ========================================================================== */
.shortcut-help {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 18, 0.74);
  backdrop-filter: blur(6px);
}

.shortcut-help[hidden],
.shortcut-tip[hidden] {
  display: none;
}

.shortcut-help-card {
  display: grid;
  gap: 16px;
  width: min(760px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 24px 26px;
  border: 1px solid rgba(247, 216, 74, 0.34);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(247, 216, 74, 0.1), transparent 42%),
    linear-gradient(180deg, #0b2238, #06131f);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  color: #eef8fa;
}

.shortcut-help-card .eyebrow {
  margin: 0;
  color: #f7d84a;
}

.shortcut-help-card h2 {
  margin: -8px 0 0;
  font-size: clamp(22px, 3vw, 30px);
}

.shortcut-help-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px 28px;
}

.shortcut-help-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.shortcut-help-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.shortcut-help-list dt {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.shortcut-help-list dd {
  margin: 0;
  color: rgba(226, 240, 244, 0.88);
  font-size: 15px;
  font-weight: 650;
}

.shortcut-help kbd,
.shortcut-tip kbd {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom-width: 3px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: 700 14px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.shortcut-help-note {
  margin: 0;
  color: rgba(226, 240, 244, 0.72);
  font-size: 14px;
}

.shortcut-help-card > .tool {
  justify-self: end;
  min-height: 44px;
}

.shortcut-tip {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(96px, 14dvh, 130px));
  z-index: 300;
  padding: 9px 16px;
  border: 1px solid rgba(247, 216, 74, 0.42);
  border-radius: 999px;
  background: rgba(4, 16, 28, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: #eef8fa;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
  animation: shortcutTipIn 0.3s ease-out;
}

.shortcut-tip kbd {
  min-width: 24px;
  height: 24px;
  margin: 0 3px;
  font-size: 13px;
}

@keyframes shortcutTipIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.is-key-pressed {
  animation: keyPressFlash 0.22s ease-out;
}

@keyframes keyPressFlash {
  0% {
    transform: scale(0.94);
    filter: brightness(1.35);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shortcut-tip,
  .is-key-pressed {
    animation: none;
  }
}

/* ==========================================================================
   How to Play entry (2026-09-15): a tab that is always visible in the setup
   and a welcome card for teachers who open Vocab Cup for the first time.
   ========================================================================== */
#setup .setup-card {
  position: relative;
}

.setup-tutorial-tab {
  position: absolute;
  top: 24px;
  right: 26px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px 0 8px;
  border: 1px solid rgba(247, 216, 74, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247, 216, 74, 0.2), rgba(247, 216, 74, 0.06));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  color: #fff4c4;
  font: 800 16px/1 Inter, Aptos, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.setup-tutorial-tab svg {
  width: 32px;
  height: 32px;
  padding: 8px 7px 8px 9px;
  border-radius: 50%;
  background: #f7d84a;
  fill: #1b1400;
}

.setup-tutorial-tab:hover {
  background: linear-gradient(180deg, rgba(247, 216, 74, 0.32), rgba(247, 216, 74, 0.1));
}

.setup-tutorial-tab:focus-visible,
.setup-welcome-play:focus-visible {
  outline: 3px solid #4cc9f0;
  outline-offset: 3px;
}

.setup-tutorial-tab.is-new::after {
  content: "Neu";
  position: absolute;
  top: -9px;
  right: -6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #49e58f;
  color: #06231a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.setup-welcome {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px 22px;
  border: 1px solid rgba(247, 216, 74, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(247, 216, 74, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(20, 44, 72, 0.92), rgba(6, 18, 32, 0.92));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.setup-welcome[hidden] {
  display: none;
}

.setup-welcome-play {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff1a8, #f2c230 60%, #c98f10);
  box-shadow:
    0 0 0 6px rgba(247, 216, 74, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  animation: setupWelcomePulse 2.4s ease-in-out infinite;
}

.setup-welcome-play svg {
  width: 30px;
  height: 30px;
  margin-left: 4px;
  fill: #1b1400;
}

.setup-welcome-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.setup-welcome-kicker {
  margin: 0;
  color: #f7d84a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.setup-welcome h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
}

.setup-welcome-copy > p:last-child {
  margin: 0;
  color: rgba(226, 240, 244, 0.82);
  font-size: 15px;
  font-weight: 650;
}

.setup-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.setup-welcome-actions .tool {
  min-height: 48px;
  margin: 0;
}

.shortcut-help-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.shortcut-help-actions .tool {
  min-height: 44px;
}

@keyframes setupWelcomePulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(247, 216, 74, 0.18), 0 12px 30px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(247, 216, 74, 0.08), 0 12px 30px rgba(0, 0, 0, 0.4);
  }
}

@media (max-width: 820px) {
  .setup-welcome {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .setup-welcome-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .setup-welcome-play {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 640px) {
  .setup-tutorial-tab {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-welcome-play {
    animation: none;
  }
}