html,
body {
  height: 100%;
  overflow: hidden;
}

:root {
  --bg: #10263e;
  --panel: #1f3550;
  --panel-2: #173049;
  --line: #0b1520;
  --text: #f7f2cf;
  --muted: #c6d0bf;
  --accent: #e2bb4f;
  --menu-accent: #f0bf43;
  --team-primary: #2f7cc6;
  --team-secondary: #153458;
  --team-accent: #eebc4b;
  --team-text: #f6f3de;
  --home-team-primary: #f0bf43;
  --home-team-secondary: #2e3547;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Arial Black", Impact, "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.18), transparent 12%),
    radial-gradient(circle at 82% 9%, rgba(255, 255, 255, 0.12), transparent 10%),
    linear-gradient(180deg, #5b86b2 0 12%, #2b4e73 12% 22%, #10263e 22% 100%);
  color: var(--text);
  overscroll-behavior: none;
  touch-action: manipulation;
}

body[data-device="tablet"],
body[data-device="mobile"] {
  touch-action: none;
}

body[data-device="tablet"].menu-scroll-enabled,
body[data-device="mobile"].menu-scroll-enabled,
body[data-device="tablet"].game-library-open,
body[data-device="mobile"].game-library-open {
  touch-action: pan-y;
}

.game-shell {
  width: min(1320px, calc(100vw - 32px));
  margin: 0 auto;
  height: 100dvh;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas:
    "title title"
    "info play";
  gap: 18px;
  align-items: stretch;
  padding: 18px 0 24px;
  position: relative;
  overflow: hidden;
}

.game-shell::before {
  content: "";
  position: absolute;
  inset: 24px 0 12px;
  background:
    radial-gradient(circle at center, rgba(13, 26, 39, 0.18), transparent 55%),
    linear-gradient(90deg, rgba(9, 18, 27, 0.45), transparent 16%, transparent 84%, rgba(9, 18, 27, 0.45));
  pointer-events: none;
}

.play-panel {
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 10px 0 rgba(8, 15, 22, 0.35);
}

.top-title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.info-panel {
  grid-area: info;
  position: relative;
  z-index: 1;
  min-height: 0;
  overflow: hidden;
}

.game-library {
  --team-accent: var(--menu-accent);
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 2;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 20px;
  padding: clamp(18px, 3vw, 34px);
  background:
    linear-gradient(90deg, rgba(10, 24, 38, 0.88), rgba(27, 62, 91, 0.82) 50%, rgba(10, 24, 38, 0.88)),
    repeating-linear-gradient(0deg, #315f37 0 38px, #397040 38px 76px);
  border: 4px solid var(--line);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    0 10px 0 rgba(8, 15, 22, 0.35);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.game-library[hidden] {
  display: none !important;
}

body.game-library-open .info-panel,
body.game-library-open .play-panel {
  display: none !important;
}

.library-header {
  width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}

.library-kicker {
  color: var(--team-accent);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.library-secret-trigger {
  width: auto;
  margin: 0 auto;
  padding: 0;
  color: var(--team-accent);
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: default;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
}

.library-secret-trigger:hover,
.library-secret-trigger:focus-visible {
  color: var(--team-accent);
  background: transparent;
  filter: none;
  transform: none;
  box-shadow: none;
}

.library-secret-trigger:active {
  color: var(--team-accent);
  background: transparent;
  filter: none;
  transform: none;
  box-shadow: none;
}

.library-secret-trigger:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 4px;
}

.pocket-dynasty-screen {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 5;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  overflow: hidden;
  background:
    linear-gradient(rgba(8, 21, 34, 0.86), rgba(8, 21, 34, 0.94)),
    repeating-linear-gradient(90deg, #315f37 0 44px, #397040 44px 88px);
  border: 5px solid #080f18;
  box-shadow: inset 0 0 0 4px #29445f, 0 10px 0 rgba(6, 13, 20, 0.45);
}

.pocket-dynasty-screen[hidden] {
  display: none !important;
}

.dynasty-header {
  display: grid;
  grid-template-columns: 180px 1fr 180px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 14px;
  background: #142f49;
  border: 4px solid #09131e;
  box-shadow: inset 0 -5px 0 #0c2236;
  text-align: center;
  text-transform: uppercase;
}

.dynasty-header p,
.dynasty-card p {
  margin: 0;
  color: #cbd8cd;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
}

.dynasty-header h2 {
  margin: 2px 0 0;
  color: #f0bf43;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1;
  text-shadow: 0 4px 0 #09131e;
}

.dynasty-back-button {
  width: 100%;
  padding: 9px 10px;
  font-size: 0.68rem;
}

.dynasty-header-record {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.dynasty-header-record span {
  color: #cbd8cd;
  font-size: 0.7rem;
}

.dynasty-header-record strong {
  color: #f6efcf;
  font-size: 1.4rem;
}

.dynasty-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr);
  gap: 12px;
  overflow: hidden;
}

.dynasty-game-panel,
.dynasty-front-office {
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: #f0bf43 #10263e;
}

.dynasty-game-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 2px;
}

.dynasty-scoreboard {
  display: grid;
  grid-template-columns: 1fr 140px 1fr;
  align-items: stretch;
  background: #07121d;
  border: 4px solid #29445f;
  box-shadow: inset 0 0 0 3px #0c2236;
}

.dynasty-scoreboard > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-transform: uppercase;
}

.dynasty-scoreboard > div:last-child {
  text-align: right;
}

.dynasty-scoreboard span {
  overflow: hidden;
  color: #f6efcf;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynasty-scoreboard strong {
  color: #f0bf43;
  font-size: 1.55rem;
}

.dynasty-scoreboard .dynasty-game-clock {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2px;
  background: #173652;
  border-inline: 4px solid #29445f;
  text-align: center;
}

.dynasty-game-clock strong {
  font-size: 0.78rem;
}

.dynasty-field-wrap {
  position: relative;
  background: #07121d;
  border: 5px solid #09131e;
  box-shadow: inset 0 0 0 3px #29445f;
}

#pocketDynastyCanvas {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 8 / 3;
  display: block;
  border: 0;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}

.dynasty-field-message {
  position: absolute;
  left: 50%;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 14px;
  transform: translateX(-50%);
  color: #10263e;
  background: #f0bf43;
  border: 3px solid #09131e;
  font-size: 0.72rem;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(5, 11, 18, 0.45);
}

.dynasty-situation {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.dynasty-control-hint {
  margin: -4px 0 0;
  padding: 7px 10px;
  color: #bcd0c7;
  background: #0a1c2c;
  border-left: 4px solid #f0bf43;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.3;
}

.dynasty-situation > div {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  background: #173652;
  border: 3px solid #09131e;
}

.dynasty-situation span {
  color: #cbd8cd;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.dynasty-situation strong {
  color: #f0bf43;
  font-size: 1rem;
}

.dynasty-play-calls {
  position: absolute;
  z-index: 4;
  right: 9px;
  bottom: 9px;
  left: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 6px;
  background: rgba(7, 18, 29, 0.9);
  border: 3px solid #09131e;
}

.dynasty-play-calls[hidden] {
  display: none !important;
}

.dynasty-play-calls button {
  min-height: 64px;
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 9px;
  color: #f6efcf;
  background: #1d4d71;
  border: 3px solid #09131e;
  text-align: left;
  box-shadow: inset 0 -5px 0 rgba(6, 13, 20, 0.28);
}

.dynasty-field-wrap:has(.dynasty-play-calls:not([hidden])) .dynasty-field-message {
  top: 10px;
  bottom: auto;
}

.dynasty-play-calls button:hover,
.dynasty-play-calls button:focus-visible {
  color: #10263e;
  background: #f0bf43;
}

.dynasty-play-calls button > span {
  color: #8fc6e8;
  font-size: 0.58rem;
  text-transform: uppercase;
}

.dynasty-play-calls button:hover > span,
.dynasty-play-calls button:focus-visible > span {
  color: #653f17;
}

.dynasty-play-calls button strong {
  font-size: 0.85rem;
  text-transform: uppercase;
}

.dynasty-play-calls button small {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
}

.dynasty-primary-action {
  width: 100%;
  padding: 13px;
  color: #10263e;
  background: #f0bf43;
  border: 4px solid #09131e;
  font-size: 0.9rem;
  box-shadow: inset 0 -5px 0 rgba(121, 77, 19, 0.24), 0 5px 0 rgba(5, 11, 18, 0.45);
}

.dynasty-primary-action[hidden] {
  display: none !important;
}

.dynasty-drive-log {
  min-height: 58px;
  margin: 0;
  padding: 9px 10px 9px 32px;
  color: #dce4d2;
  background: #0d2336;
  border: 3px solid #09131e;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.45;
}

.dynasty-drive-log li::marker {
  color: #f0bf43;
}

.dynasty-front-office {
  display: grid;
  align-content: start;
  gap: 10px;
}

.dynasty-card {
  padding: 12px;
  background: #142f49;
  border: 4px solid #09131e;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.dynasty-team-card {
  border-top-color: #f0bf43;
}

.dynasty-card h3 {
  margin: 3px 0 8px;
  color: #f6efcf;
  font-size: 1rem;
  text-transform: uppercase;
}

.dynasty-team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 9px;
}

.dynasty-event-card {
  border-top-color: #75c9ee;
  background:
    linear-gradient(135deg, rgba(117, 201, 238, 0.12), transparent 52%),
    #142f49;
}

.dynasty-event-card > p {
  margin-bottom: 10px;
  color: #f6efcf;
  font-size: 0.72rem;
  line-height: 1.4;
}

.dynasty-event-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.dynasty-event-actions button {
  min-height: 46px;
  padding: 7px;
  color: #10263e;
  background: #75c9ee;
  border: 3px solid #09131e;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.dynasty-team-stats span {
  padding: 7px;
  color: #cbd8cd;
  background: #0d2336;
  border: 2px solid #29445f;
  font-size: 0.64rem;
  text-transform: uppercase;
}

.dynasty-team-stats b {
  display: block;
  margin-top: 2px;
  color: #f0bf43;
  font-size: 0.92rem;
}

.dynasty-card-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.dynasty-card-heading span {
  color: #9eb3b3;
  font-size: 0.58rem;
  text-align: right;
  text-transform: uppercase;
}

.dynasty-roster {
  display: grid;
  gap: 6px;
}

.dynasty-player {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  background: #0d2336;
  border: 2px solid #29445f;
}

.dynasty-player > span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: #10263e;
  background: #f0bf43;
  border: 2px solid #09131e;
  font-size: 0.68rem;
}

.dynasty-player div {
  min-width: 0;
  display: grid;
}

.dynasty-player strong {
  overflow: hidden;
  color: #f6efcf;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dynasty-player small {
  color: #9eb3b3;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.6rem;
  font-weight: 800;
}

.dynasty-player em {
  height: 4px;
  margin-top: 4px;
  overflow: hidden;
  background: #07121d;
  border: 1px solid #29445f;
  font-style: normal;
}

.dynasty-player em i {
  height: 100%;
  display: block;
  background: #69c36d;
}

.dynasty-player button {
  width: 42px;
  min-height: 32px;
  padding: 4px;
  color: #10263e;
  background: #f0bf43;
  border: 2px solid #09131e;
  font-size: 0.64rem;
}

.dynasty-player button:disabled {
  color: #8fa09d;
  background: #29445f;
}

.dynasty-facilities {
  display: grid;
  gap: 6px;
}

.dynasty-facility {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #0d2336;
  border: 2px solid #29445f;
}

.dynasty-facility div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dynasty-facility strong {
  color: #f6efcf;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.dynasty-facility small {
  color: #9eb3b3;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
}

.dynasty-facility button {
  min-width: 48px;
  padding: 6px;
  color: #10263e;
  background: #f0bf43;
  border: 2px solid #09131e;
  font-size: 0.58rem;
}

.dynasty-draft-card {
  border-top-color: #69c36d;
}

.dynasty-contract-card {
  border-top-color: #f0bf43;
}

.dynasty-contracts {
  display: grid;
  gap: 7px;
}

.dynasty-contract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #0d2336;
  border: 2px solid #315777;
}

.dynasty-contract > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.dynasty-contract strong {
  overflow: hidden;
  color: #f6efcf;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dynasty-contract small {
  color: #9eb3b3;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.57rem;
  font-weight: 800;
}

.dynasty-contract-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.dynasty-contract-actions button {
  min-width: 58px;
  padding: 6px;
  color: #10263e;
  background: #f0bf43;
  border: 2px solid #09131e;
  font-size: 0.55rem;
  text-transform: uppercase;
}

.dynasty-contract-actions button:last-child {
  color: #f6efcf;
  background: #8e392f;
}

.dynasty-contract-actions button:disabled {
  color: #8fa09d;
  background: #29445f;
}

.dynasty-standings {
  display: grid;
  gap: 3px;
}

.dynasty-standings > div {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 7px;
  padding: 6px 8px;
  color: #cbd8cd;
  background: #0d2336;
  border-left: 4px solid #29445f;
  font-size: 0.62rem;
}

.dynasty-standings > div.player {
  color: #10263e;
  background: #f0bf43;
  border-left-color: #f6efcf;
}

.dynasty-draft {
  display: grid;
  gap: 6px;
}

.dynasty-prospect {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 8px;
  color: #f6efcf;
  background: #0d2336;
  border: 2px solid #315777;
  text-align: left;
}

.dynasty-prospect:hover,
.dynasty-prospect:focus-visible {
  color: #10263e;
  background: #69c36d;
}

.dynasty-prospect span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: #10263e;
  background: #69c36d;
  border: 2px solid #09131e;
  font-size: 0.65rem;
}

.dynasty-prospect strong {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.dynasty-prospect small {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.57rem;
  font-weight: 800;
}

.dynasty-draft-skip {
  padding: 8px;
  color: #cbd8cd;
  background: #29445f;
  border: 2px solid #09131e;
  font-size: 0.6rem;
  text-transform: uppercase;
}

.dynasty-schedule {
  max-height: 180px;
  overflow-y: auto;
  display: grid;
  gap: 3px;
}

.dynasty-schedule > div {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 7px;
  color: #cbd8cd;
  background: #0d2336;
  border-left: 4px solid #29445f;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.dynasty-schedule > div.current {
  color: #10263e;
  background: #f0bf43;
  border-left-color: #f6efcf;
}

.dynasty-schedule > div.win {
  border-left-color: #69c36d;
}

.dynasty-schedule > div.loss {
  border-left-color: #db554c;
}

.dynasty-schedule b {
  color: inherit;
}

.dynasty-reset-button {
  width: 100%;
  padding: 8px;
  font-size: 0.62rem;
}

body.pocket-dynasty-open .info-panel,
body.pocket-dynasty-open .play-panel,
body.pocket-dynasty-open .game-library,
body.pocket-dynasty-open .seasonal-game-screen {
  display: none !important;
}

body.pocket-dynasty-open .support-link,
body.pocket-dynasty-open .account-strip {
  display: none !important;
}

body.pocket-dynasty-open .top-title {
  gap: 0;
}

@media (max-width: 900px) {
  body.pocket-dynasty-open {
    touch-action: pan-y;
  }

  .pocket-dynasty-screen {
    overflow-y: auto;
  }

  .dynasty-layout {
    display: block;
    overflow: visible;
  }

  .dynasty-game-panel,
  .dynasty-front-office {
    overflow: visible;
  }

  .dynasty-front-office {
    margin-top: 12px;
  }
}

@media (max-width: 620px) {
  .pocket-dynasty-screen {
    padding: 7px;
  }

  .dynasty-header {
    grid-template-columns: 1fr auto;
    padding: 8px;
    text-align: left;
  }

  .dynasty-header > div:first-of-type {
    grid-column: 1;
    grid-row: 1;
  }

  .dynasty-back-button {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dynasty-header-record {
    grid-column: 2;
    grid-row: 1;
  }

  .dynasty-scoreboard {
    grid-template-columns: 1fr 80px 1fr;
  }

  .dynasty-scoreboard > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px;
  }

  .dynasty-scoreboard > div:last-child {
    justify-items: end;
  }

  .dynasty-scoreboard strong {
    font-size: 1.15rem;
  }

  .dynasty-scoreboard span {
    font-size: 0.55rem;
  }

  .dynasty-situation {
    gap: 3px;
  }

  .dynasty-situation > div {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1px;
    padding: 6px 3px;
  }

  .dynasty-play-calls {
    position: static;
    grid-template-columns: 1fr 1fr;
    padding: 6px;
    border-width: 0;
    border-top-width: 3px;
  }

  .dynasty-play-calls button {
    min-height: 66px;
  }

  .dynasty-control-hint {
    font-size: 0.58rem;
  }

  .dynasty-event-actions {
    grid-template-columns: 1fr;
  }

  .dynasty-field-message {
    top: 6px;
    bottom: auto;
    padding: 5px 8px;
    font-size: 0.58rem;
  }
}

.library-header h2 {
  margin: 6px 0 8px;
  color: var(--text);
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(8, 15, 22, 0.5);
}

.library-header > p:last-child {
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 800;
  line-height: 1.4;
}

.game-card-grid {
  width: min(100%, 1180px);
  margin: 0 auto;
  align-self: safe center;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-content: center;
}

.game-select-card {
  --card-accent: #c83b42;
  width: 100%;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "art"
    "copy"
    "play";
  background: #14283f;
  color: var(--text);
  border: 5px solid #090f17;
  text-align: left;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 9px 0 rgba(6, 13, 20, 0.42);
  transition:
    background 100ms steps(2, end),
    border-color 100ms steps(2, end),
    box-shadow 100ms steps(2, end);
}

.featured-game-card {
  grid-column: 1 / -1;
  min-height: 300px;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "art copy"
    "art play";
}

.featured-game-card .game-card-art {
  min-height: 300px;
  border-right: 4px solid var(--line);
  border-bottom: 0;
}

.featured-game-card .game-card-copy {
  align-content: center;
  padding: 34px 30px 20px;
}

.featured-game-card .game-card-copy strong {
  font-size: clamp(2.25rem, 5vw, 4.1rem);
}

.featured-game-card .game-card-copy > span:last-child {
  font-size: 1rem;
}

@media (min-width: 981px) {
  .featured-game-card .game-sport-badge {
    bottom: 26px;
    width: 188px;
    height: 128px;
    filter: drop-shadow(10px 10px 0 rgba(6, 13, 20, 0.48));
  }

  .featured-game-card .game-sport-badge::before {
    inset: 8px;
  }

  .featured-game-card .game-icon-speed {
    left: 24px;
    top: 47px;
    width: 30px;
    height: 8px;
    box-shadow:
      -10px -18px 0 -2px var(--text),
      6px 18px 0 -2px var(--text);
  }

  .featured-game-card .mini-football {
    left: 58%;
    width: 88px;
    height: 54px;
    border-width: 6px;
    box-shadow: inset -10px -7px 0 #6e3015;
  }

  .featured-game-card .mini-football::after {
    left: 20px;
    top: 16px;
    width: 35px;
    height: 6px;
    box-shadow:
      7px -9px 0 -1px var(--text),
      7px 9px 0 -1px var(--text);
  }
}

.game-select-card:hover,
.game-select-card:focus-visible,
.game-select-card.selected {
  filter: none;
  border-color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 18%, #14283f);
  box-shadow:
    inset 0 0 0 4px var(--card-accent),
    0 9px 0 rgba(6, 13, 20, 0.42);
}

.game-select-card:hover .game-card-copy strong,
.game-select-card:hover .game-card-tag,
.game-select-card:focus-visible .game-card-copy strong,
.game-select-card:focus-visible .game-card-tag,
.game-select-card.selected .game-card-copy strong,
.game-select-card.selected .game-card-tag {
  color: var(--card-accent);
}

.game-select-card:focus-visible {
  outline: 4px solid var(--text);
  outline-offset: 5px;
}

.game-select-card:hover .game-sport-badge,
.game-select-card:focus-visible .game-sport-badge {
  translate: -50% -4px;
}

.game-card-art {
  grid-area: art;
  position: relative;
  min-height: 190px;
  display: block;
  background:
    linear-gradient(180deg, #688db0 0 18%, #172c41 18% 35%, transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(246, 243, 222, 0.1) 52px 55px),
    repeating-linear-gradient(0deg, #2f7139 0 40px, #3c8444 40px 80px);
  border-bottom: 4px solid var(--line);
  overflow: hidden;
}

.stadium-lights {
  position: absolute;
  inset: 24px 18px auto;
  height: 16px;
  background: repeating-linear-gradient(90deg, #f6f3de 0 11px, #6d879c 11px 17px);
  border: 3px solid #0b1520;
  box-shadow: 0 6px 0 rgba(4, 10, 16, 0.35);
}

.mini-scoreboard {
  position: absolute;
  top: 58px;
  left: 50%;
  translate: -50% 0;
  padding: 6px 10px;
  color: var(--card-accent);
  background: #0d1b2a;
  border: 3px solid #070d14;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.mini-field {
  position: absolute;
  inset: 92px 0 0;
  display: block;
  border-top: 4px solid var(--text);
}

.mini-yard-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(246, 243, 222, 0.76);
}

.mini-yard-line.line-one {
  top: 58px;
}

.mini-yard-line.line-two {
  top: 132px;
}

.game-sport-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 13px;
  width: 104px;
  height: 72px;
  translate: -50% 0;
  background: var(--text);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  filter: drop-shadow(7px 7px 0 rgba(6, 13, 20, 0.48));
  transition: translate 120ms steps(2, end);
}

.game-sport-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--badge-fill);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}

.football-sport-badge {
  --badge-fill: #9e252d;
}

.soccer-sport-badge {
  --badge-fill: #17613a;
}

.basketball-sport-badge {
  --badge-fill: #3d8fc4;
}

.hockey-sport-badge {
  background: #79d8ef;
}

.water-polo-sport-badge {
  --badge-fill: #167fa8;
  background: #54d2e6;
}

.game-icon-speed {
  position: absolute;
  z-index: 1;
  left: 12px;
  top: 25px;
  width: 18px;
  height: 5px;
  background: var(--text);
  box-shadow: -6px -11px 0 -1px var(--text), 3px 11px 0 -1px var(--text);
}

.soccer-sport-badge .game-icon-speed {
  left: auto;
  right: 12px;
  background: #8fe0a0;
  box-shadow: 6px -11px 0 -1px #8fe0a0, -3px 11px 0 -1px #8fe0a0;
}

.mini-football {
  position: absolute;
  z-index: 2;
  left: 56%;
  top: 50%;
  width: 48px;
  height: 30px;
  translate: -50% -50%;
  rotate: -18deg;
  background: #8c451e;
  border: 4px solid #111016;
  border-radius: 50%;
  box-shadow: inset -6px -4px 0 #6e3015;
}

.mini-football::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 9px;
  width: 18px;
  height: 4px;
  background: var(--text);
  box-shadow: 4px -5px 0 -1px var(--text), 4px 5px 0 -1px var(--text);
}

.soccer-card-art {
  background:
    linear-gradient(180deg, #80a8c5 0 18%, #18364b 18% 35%, transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(246, 243, 222, 0.1) 52px 55px),
    repeating-linear-gradient(0deg, #27743d 0 40px, #37884a 40px 80px);
}

.soccer-mini-field {
  border-inline: 4px solid rgba(246, 243, 222, 0.84);
}

.mini-center-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 4px;
  background: rgba(246, 243, 222, 0.84);
}

.mini-center-circle {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 52px;
  height: 52px;
  translate: -50% -50%;
  border: 4px solid rgba(246, 243, 222, 0.84);
  border-radius: 50%;
}

.mini-soccer-goal {
  position: absolute;
  left: 50%;
  top: 5px;
  width: 76px;
  height: 34px;
  translate: -50% 0;
  border: 5px solid var(--text);
  border-bottom-width: 3px;
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(246, 243, 222, 0.35) 8px 10px);
}

.mini-soccer-ball {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 50%;
  width: 36px;
  height: 36px;
  translate: -50% -50%;
  background: var(--text);
  border: 4px solid #111016;
  border-radius: 50%;
  box-shadow: inset -5px -5px 0 #c8c5ae;
}

.mini-soccer-ball::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: #111016;
  box-shadow: -6px 10px 0 -1px #111016, 10px 8px 0 -1px #111016;
}

.basketball-card-art {
  background:
    linear-gradient(180deg, #314965 0 18%, #141f2e 18% 35%, transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(82, 43, 20, 0.2) 48px 51px),
    repeating-linear-gradient(0deg, #d5a45b 0 40px, #c79149 40px 80px);
}

.hockey-card-art {
  background:
    linear-gradient(180deg, #314965 0 18%, #141f2e 18% 35%, transparent 35%),
    linear-gradient(90deg, transparent 0 46%, rgba(206, 17, 38, 0.78) 46% 48%, transparent 48% 52%, rgba(206, 17, 38, 0.78) 52% 54%, transparent 54%),
    repeating-linear-gradient(0deg, #dceff3 0 40px, #cbe5eb 40px 80px);
}

.water-polo-card-art {
  background:
    linear-gradient(180deg, #314965 0 18%, #14283f 18% 35%, transparent 35%),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(216, 245, 247, 0.16) 42px 45px),
    repeating-linear-gradient(0deg, #2499c2 0 40px, #1d82ad 40px 80px);
}

.water-polo-mini-pool {
  border-inline: 5px solid #f6f3de;
  box-shadow: inset 8px 0 0 #f3d34a, inset -8px 0 0 #cf3545;
}

.mini-pool-center-line {
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  background: rgba(246, 243, 222, 0.84);
}

.mini-water-polo-goal {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 68px;
  height: 28px;
  translate: -50% 0;
  border: 5px solid #f6f3de;
  background: repeating-linear-gradient(45deg, transparent 0 7px, rgba(246, 243, 222, 0.35) 7px 9px);
}

.mini-water-polo-ball {
  position: absolute;
  z-index: 2;
  left: 57%;
  top: 51%;
  width: 36px;
  height: 36px;
  translate: -50% -50%;
  background: #f3d34a;
  border: 4px solid #111016;
  border-radius: 50%;
  box-shadow: inset -5px -4px 0 #d3a927;
}

.mini-water-polo-ball::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 2px;
  width: 4px;
  height: 24px;
  background: #cf3545;
  rotate: 28deg;
}

.mini-water-polo-cap {
  position: absolute;
  z-index: 1;
  left: 16px;
  top: 22px;
  width: 31px;
  height: 22px;
  background: #f6f3de;
  border: 4px solid #111016;
  border-radius: 50% 50% 35% 35%;
}

.mini-water-polo-cap::after {
  content: "7";
  position: absolute;
  right: 1px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  color: #111016;
  background: #54d2e6;
  border: 3px solid #111016;
  font-size: 8px;
  line-height: 13px;
  text-align: center;
}

.hockey-mini-rink {
  border-inline: 5px solid #f6f3de;
  box-shadow: inset 8px 0 0 #236192, inset -8px 0 0 #ce1126;
}

.mini-hockey-center-line {
  position: absolute;
  inset: 50% 0 auto;
  height: 4px;
  background: #ce1126;
}

.mini-hockey-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  translate: -50% -50%;
  border: 4px solid #ce1126;
  border-radius: 50%;
}

.mini-hockey-net {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 56px;
  height: 22px;
  translate: -50% 0;
  border: 5px solid #ce1126;
  border-bottom-color: #f6f3de;
}

.mini-hockey-stick {
  position: absolute;
  left: 27px;
  top: 15px;
  width: 7px;
  height: 48px;
  background: #9a632c;
  rotate: 28deg;
  border: 2px solid #111016;
}

.mini-hockey-stick::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -4px;
  width: 21px;
  height: 7px;
  background: #9a632c;
  border: 2px solid #111016;
}

.mini-hockey-puck {
  position: absolute;
  left: 55%;
  top: 57%;
  width: 25px;
  height: 9px;
  background: #111016;
  border: 3px solid #38434d;
  border-radius: 50%;
}

.basketball-mini-court {
  border-inline: 4px solid rgba(246, 243, 222, 0.9);
}

.mini-court-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 4px;
  background: rgba(246, 243, 222, 0.88);
}

.mini-court-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 50px;
  height: 50px;
  translate: -50% -50%;
  border: 4px solid rgba(246, 243, 222, 0.88);
  border-radius: 50%;
}

.mini-basketball-hoop {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 66px;
  height: 14px;
  translate: -50% 0;
  border: 5px solid var(--text);
  border-bottom-color: #db5b23;
}

.mini-basketball {
  position: absolute;
  z-index: 2;
  left: 54%;
  top: 50%;
  width: 38px;
  height: 38px;
  translate: -50% -50%;
  background: #d86b20;
  border: 4px solid #111016;
  border-radius: 50%;
  box-shadow: inset -5px -4px 0 #a84418;
}

.mini-basketball::before,
.mini-basketball::after {
  content: "";
  position: absolute;
  background: #401d12;
}

.mini-basketball::before {
  left: 14px;
  top: 0;
  width: 3px;
  height: 30px;
}

.mini-basketball::after {
  left: 0;
  top: 14px;
  width: 30px;
  height: 3px;
}

.game-card-copy {
  grid-area: copy;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 26px 26px 16px;
}

.game-card-tag {
  color: var(--card-accent);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.game-card-copy strong {
  color: var(--card-accent);
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  line-height: 0.95;
  text-shadow: 2px 2px 0 #090f17;
  text-transform: uppercase;
}

.game-card-copy > span:last-child {
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.4;
  text-transform: none;
}

.play-game-label {
  grid-area: play;
  align-self: end;
  margin: 0 26px 26px;
  padding: 12px 16px;
  color: #f6f3de;
  background: var(--card-accent);
  border: 3px solid var(--line);
  text-align: center;
  text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
}

.soccer-game-card {
  --card-accent: #2f9854;
}

.basketball-game-card {
  --card-accent: #65b7e8;
}

.hockey-game-card {
  --card-accent: #79d8ef;
}

.water-polo-game-card {
  --card-accent: #54d2e6;
}

.surfing-game-card {
  --card-accent: #46c6d3;
}

.skiing-game-card {
  --card-accent: #d7edf2;
}

.baseball-game-card {
  --card-accent: #e65d45;
}

.lacrosse-game-card {
  --card-accent: #55b982;
}

.dodgeball-game-card {
  --card-accent: #e65d45;
}

.surfing-card-art,
.skiing-card-art,
.baseball-card-art,
.lacrosse-card-art {
  background: #10263b;
}

.dodgeball-card-art {
  background: #10263b;
}

.surfing-mini-break {
  background:
    repeating-linear-gradient(165deg, transparent 0 16px, rgba(225, 249, 244, 0.45) 16px 20px),
    #238bad;
}

.mini-wave-crest {
  position: absolute;
  inset: 8px 8px auto 8px;
  height: 26px;
  border-top: 7px solid #dff7f2;
  border-radius: 50%;
  rotate: -6deg;
}

.skiing-mini-slope {
  background:
    linear-gradient(165deg, transparent 0 44%, rgba(123, 166, 180, 0.28) 44% 48%, transparent 48%),
    #e3eef0;
}

.mini-ski-gate {
  position: absolute;
  top: 9px;
  width: 5px;
  height: 38px;
  background: #d8333f;
  box-shadow: 18px 0 0 #d8333f;
}

.mini-ski-gate.gate-left {
  left: 20%;
}

.mini-ski-gate.gate-right {
  right: 28%;
  top: 30px;
  background: #2b66b1;
  box-shadow: 18px 0 0 #2b66b1;
}

.baseball-mini-diamond {
  background:
    linear-gradient(45deg, transparent 0 39%, #b77d4e 39% 61%, transparent 61%),
    linear-gradient(-45deg, transparent 0 39%, #b77d4e 39% 61%, transparent 61%),
    #47884b;
}

.mini-base {
  position: absolute;
  width: 10px;
  height: 10px;
  rotate: 45deg;
  background: #f6f3de;
  border: 2px solid #111016;
}

.mini-base.base-one { right: 24%; top: 42%; }
.mini-base.base-two { left: 50%; top: 14%; }
.mini-base.base-three { left: 24%; top: 42%; }

.lacrosse-mini-field {
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(246, 243, 222, 0.1) 42px 45px),
    #397b43;
}

.mini-lacrosse-crease {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 46px;
  height: 46px;
  translate: -50% 0;
  border: 4px solid #f6f3de;
  border-radius: 50%;
}

.mini-lacrosse-goal {
  position: absolute;
  left: 50%;
  top: 25px;
  width: 32px;
  height: 25px;
  translate: -50% 0;
  border: 4px solid #e65d45;
}

.surfing-sport-badge { background: #146684; }
.skiing-sport-badge { background: #376b8d; }
.baseball-sport-badge { background: #9f352d; }
.lacrosse-sport-badge { background: #216b45; }

.surfing-sport-badge .game-icon-speed,
.skiing-sport-badge .game-icon-speed,
.baseball-sport-badge .game-icon-speed,
.lacrosse-sport-badge .game-icon-speed,
.dodgeball-sport-badge .game-icon-speed {
  display: block;
}

.mini-surf-fin,
.mini-mountain,
.mini-baseball,
.mini-lacrosse-stick,
.mini-dodgeball {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.mini-surf-fin {
  width: 56px;
  height: 22px;
  background: #f2c84b;
  border: 4px solid #111016;
  border-radius: 50% 46% 46% 50%;
  rotate: -14deg;
  box-shadow: inset -7px -3px 0 #d99b31;
}

.mini-surf-fin::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 3px;
  width: 5px;
  height: 8px;
  background: #f6f3de;
  box-shadow:
    8px 0 0 #146684,
    16px 0 0 #f6f3de;
}

.mini-surf-fin::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -9px;
  width: 10px;
  height: 10px;
  background: #111016;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.mini-mountain {
  width: 50px;
  height: 44px;
  background:
    linear-gradient(63deg, transparent 45%, #f6f3de 46% 50%, transparent 51%),
    linear-gradient(-63deg, transparent 45%, #f6f3de 46% 50%, transparent 51%);
}

.mini-mountain::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 2px;
  width: 10px;
  height: 40px;
  background: #d8333f;
  border: 3px solid #111016;
  border-radius: 50% 50% 28% 28%;
  rotate: -18deg;
  box-shadow: inset 0 -7px 0 #9e252d;
}

.mini-mountain::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 2px;
  width: 10px;
  height: 40px;
  background: #2b66b1;
  border: 3px solid #111016;
  border-radius: 50% 50% 28% 28%;
  rotate: 18deg;
  box-shadow: inset 0 -7px 0 #173f77;
}

.mini-baseball {
  width: 38px;
  height: 38px;
  background: #f6f3de;
  border: 4px solid #111016;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.38);
}

.mini-baseball::before,
.mini-baseball::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 9px;
  height: 18px;
  border-color: #d84848;
  border-style: solid;
}

.mini-baseball::before {
  left: 3px;
  border-width: 0 3px 0 0;
  border-radius: 0 100% 100% 0;
}

.mini-baseball::after {
  right: 3px;
  border-width: 0 0 0 3px;
  border-radius: 100% 0 0 100%;
}

.mini-lacrosse-stick {
  width: 6px;
  height: 40px;
  background: #c39052;
  box-shadow: 0 0 0 3px #111016;
  rotate: 28deg;
}

.mini-lacrosse-stick::before {
  content: "";
  position: absolute;
  left: -9px;
  top: -15px;
  width: 24px;
  height: 20px;
  border: 4px solid #f6f3de;
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 0 3px #111016;
}

.mini-lacrosse-stick::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -10px;
  width: 16px;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 3px, #9eb6ab 3px 4px),
    repeating-linear-gradient(0deg, transparent 0 3px, #9eb6ab 3px 4px);
  border-radius: 45%;
}

.dodgeball-mini-court {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(78, 43, 24, 0.2) 34px 37px),
    #d3a05d;
}

.mini-dodgeball-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  translate: -50% -50%;
  border: 4px solid #f6f3de;
  border-radius: 50%;
}

.mini-dodgeball-line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 5px;
  translate: 0 -50%;
  background: #d94c45;
}

.dodgeball-sport-badge {
  background: #8f302b;
}

.mini-dodgeball {
  width: 38px;
  height: 38px;
  background: #d94c45;
  border: 4px solid #111016;
  border-radius: 50%;
  overflow: hidden;
}

.mini-dodgeball::before {
  content: "";
  position: absolute;
  left: 12px;
  top: -4px;
  width: 7px;
  height: 38px;
  background: #f0c84f;
  rotate: 22deg;
}

.mini-dodgeball::after {
  content: "";
  position: absolute;
  left: -3px;
  top: 12px;
  width: 38px;
  height: 7px;
  background: #f6f3de;
  rotate: -18deg;
}

.soccer-game-card .play-game-label {
  color: #f6f3de;
}

body.franchise-setup-pending #homepageHero,
body.franchise-setup-pending #franchiseMainContent,
body.franchise-setup-pending #startButton {
  display: none !important;
}

body.franchise-slot-selecting #homepageHero,
body.franchise-slot-selecting #onboardingPanel,
body.franchise-slot-selecting #franchiseMainContent,
body.franchise-slot-selecting #startButton {
  display: none !important;
}

body.franchise-setup-pending #onboardingPanel {
  display: block !important;
}

body.franchise-slot-selecting #loadSavePanel {
  display: block !important;
}

.load-save-panel[hidden] {
  display: none !important;
}

.top-title h1 {
  margin: 0;
  padding: 6px 18px 2px;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 3px 0 rgba(8, 15, 22, 0.45);
}

.title-home-button {
  all: unset;
  cursor: pointer;
  color: inherit;
  text-shadow: inherit;
}

.title-home-button:focus-visible {
  color: var(--team-accent);
  outline: 3px solid var(--team-accent);
  outline-offset: 4px;
}

.title-home-button:hover {
  color: var(--team-accent);
  filter: none;
  transform: none;
  box-shadow: none;
}

.title-home-button:active {
  color: var(--text);
  filter: none;
  transform: translateY(2px);
  box-shadow: none;
}

.support-link {
  max-width: min(92vw, 760px);
  color: var(--text);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: underline;
  text-transform: none;
}

.support-link:hover {
  color: var(--team-accent);
}

.account-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.account-button {
  padding: 6px 12px;
  color: #172334;
  background: var(--menu-accent);
  border-width: 2px;
  font-size: 0.72rem;
}

.leaderboard-button {
  color: var(--menu-accent);
  background: #173652;
  border-color: var(--menu-accent);
}

.community-button {
  color: #172334;
  background: #8ed0a0;
  border-color: #07131e;
}

.issue-report-button {
  color: #f7f2cf;
  background: #9d3d38;
  border-color: #07131e;
}

#cloudSyncStatus {
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

#cloudSyncStatus[data-state="saved"] {
  color: #9ee09f;
}

#cloudSyncStatus[data-state="error"] {
  color: #ff9b8f;
}

.creator-modal,
.account-modal,
.community-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 11, 18, 0.72);
}

.creator-modal[hidden],
.account-modal[hidden],
.community-modal[hidden] {
  display: none !important;
}

.creator-card,
.account-card,
.community-card {
  width: min(94vw, 430px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: 16px;
  background: var(--panel);
  border: 4px solid var(--line);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 12px 0 rgba(8, 15, 22, 0.35);
}

.leaderboard-board {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-top: 10px;
  scroll-margin-top: 12px;
}

.leaderboard-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px);
  color: var(--text);
  background: #132d46;
  border: 5px solid var(--menu-accent);
  box-shadow:
    inset 0 0 0 5px #081522,
    0 12px 0 rgba(5, 11, 18, 0.55);
}

.leaderboard-head {
  align-items: center;
  margin-bottom: 14px;
}

.leaderboard-head h3 {
  margin: 3px 0 0;
  color: var(--menu-accent);
  font-size: clamp(1.25rem, 3vw, 2rem);
}

.leaderboard-clock {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 18px;
  align-items: center;
  padding: 14px;
  background: #0b1d2d;
  border: 3px solid var(--line);
  border-left: 8px solid var(--menu-accent);
}

.leaderboard-clock > div {
  grid-row: span 2;
}

.leaderboard-clock span,
.leaderboard-clock small {
  color: #cbd8c8;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leaderboard-clock strong {
  display: block;
  margin-top: 4px;
  color: var(--menu-accent);
  font-size: clamp(1.45rem, 4vw, 2.4rem);
  letter-spacing: 0.08em;
}

.leaderboard-clock p {
  margin: 0;
  color: var(--text);
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.leaderboard-message {
  min-height: 1.25em;
  margin: 12px 0;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
}

.leaderboard-message.error {
  color: #ff9b8f;
}

.leaderboard-table-wrap {
  overflow-x: auto;
  border: 3px solid #07131e;
}

.leaderboard-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: #10263a;
  text-align: left;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 11px 10px;
  border-bottom: 2px solid #29445f;
}

.leaderboard-table th {
  color: #14283f;
  background: var(--menu-accent);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.leaderboard-table td {
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.84rem;
  font-weight: 900;
}

.leaderboard-table td:first-child,
.leaderboard-table td:nth-child(n + 5) {
  color: var(--menu-accent);
  font-family: inherit;
}

.leaderboard-empty-row td {
  padding-block: 28px;
  color: #cbd8c8 !important;
  text-align: center;
}

.account-card {
  width: min(94vw, 470px);
  border-color: #0a111a;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 12px 0 rgba(8, 15, 22, 0.5),
    0 0 0 4px var(--menu-accent);
}

.account-card-head {
  align-items: center;
  margin-bottom: 14px;
}

.account-card-head h3 {
  margin-top: 3px;
}

.account-card-head .homepage-kicker {
  margin: 0;
}

.account-close-button {
  width: auto;
  padding: 7px 10px;
  font-size: 0.72rem;
}

.account-credentials-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  color: #172334;
  background: var(--menu-accent);
  border: 3px solid var(--line);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.account-credentials-note span {
  color: #f6efcf;
  background: #173652;
  padding: 4px 6px;
  border: 2px solid #09131e;
  white-space: nowrap;
}

.account-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 5px;
  background: #0c1d2d;
  border: 3px solid var(--line);
}

.account-mode-button {
  padding: 9px 8px;
  color: var(--text);
  background: #29445f;
  border: 2px solid transparent;
  font-size: 0.76rem;
}

.account-mode-button.selected {
  color: #172334;
  background: var(--menu-accent);
  border-color: var(--text);
}

.account-help,
.account-signed-in > p {
  margin: 0;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.4;
}

.account-message {
  min-height: 1.2em;
  margin: 0;
  color: var(--menu-accent);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
}

.account-message.error {
  color: #ff9b8f;
}

.account-online-link {
  display: block;
  padding: 11px 14px;
  color: #172334;
  background: var(--menu-accent);
  border: 3px solid var(--line);
  box-shadow: inset 0 -5px 0 rgba(91, 69, 17, 0.24);
  font-size: 0.76rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.account-online-link:hover,
.account-online-link:focus-visible {
  color: #f7f2cf;
  background: #29445f;
}

.account-online-link[hidden] {
  display: none !important;
}

.account-signed-in {
  display: grid;
  gap: 14px;
}

.account-signed-in[hidden] {
  display: none !important;
}

.account-signed-in button[hidden] {
  display: none !important;
}

.account-profile {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: #10263a;
  border: 3px solid var(--line);
  border-left: 7px solid var(--menu-accent);
}

.account-profile span {
  color: #c8d4c7;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.account-profile strong {
  color: var(--menu-accent);
  font-size: 1.35rem;
  text-transform: uppercase;
}

.community-card {
  width: min(94vw, 760px);
  border-color: #0a111a;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 12px 0 rgba(8, 15, 22, 0.5),
    0 0 0 4px #8ed0a0;
}

.community-mode-switch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  padding: 5px;
  background: #0c1d2d;
  border: 3px solid var(--line);
}

.community-safety-note {
  margin: 0 0 10px;
  padding: 9px 11px;
  color: #dce4d2;
  background: #10263a;
  border-left: 6px solid #8ed0a0;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.4;
}

.community-messages {
  display: grid;
  align-content: start;
  gap: 8px;
  height: clamp(230px, 42vh, 390px);
  overflow-y: auto;
  padding: 10px;
  background: #0b1d2d;
  border: 3px solid var(--line);
}

.community-empty {
  align-self: center;
  margin: 0;
  color: #cbd8c8;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
  text-align: center;
}

.community-message-item {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  background: #18344f;
  border: 2px solid #294b69;
  border-left: 6px solid #6f91af;
}

.community-message-item.mine {
  border-left-color: var(--menu-accent);
}

.community-message-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.community-message-head strong {
  color: var(--menu-accent);
  font-size: 0.76rem;
}

.community-message-head time {
  color: #aebcaf;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
}

.community-message-body {
  margin: 0;
  color: #f7f2cf;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.community-report-button {
  width: auto;
  padding: 4px 7px;
  color: #ffb0a8;
  background: transparent;
  border: 2px solid #9d3d38;
  font-size: 0.62rem;
}

.community-message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.community-follow-button,
.community-unfollow-button {
  width: auto;
  padding: 5px 8px;
  font-size: 0.62rem;
}

.community-follow-button {
  color: #0b1d2d;
  background: #f5c542;
  border-color: #f7f2cf;
}

.community-follow-button.following,
.community-follow-button.friend,
.community-unfollow-button {
  color: #dce4d2;
  background: #18344f;
  border-color: #6f91af;
}

.community-follow-button.friend {
  color: #d8f4df;
  background: #276640;
  border-color: #8ed0a0;
}

.community-chat-form,
.community-report-form,
.community-follow-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.community-chat-form[hidden],
.community-report-form[hidden],
#communityChatPanel[hidden],
#communityFriendsPanel[hidden],
#communityDirectPanel[hidden],
#communityIssuePanel[hidden] {
  display: none !important;
}

.community-follow-form {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: 8px;
}

.community-follow-form button {
  width: auto;
  min-height: 48px;
}

.community-social-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-height: clamp(260px, 42vh, 390px);
  overflow-y: auto;
}

.community-social-group {
  min-width: 0;
  padding: 9px;
  background: #0b1d2d;
  border: 3px solid var(--line);
}

.community-social-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 3px solid #294b69;
}

.community-social-head h4 {
  margin: 0;
  color: #f7f2cf;
  font-size: 0.75rem;
}

.community-social-head span {
  min-width: 26px;
  padding: 3px 5px;
  color: #0b1d2d;
  background: var(--menu-accent);
  border: 2px solid #f7f2cf;
  font-size: 0.64rem;
  text-align: center;
}

.community-social-list {
  display: grid;
  gap: 7px;
}

.community-social-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 7px;
  background: #18344f;
  border-left: 5px solid #6f91af;
}

.community-social-player > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.community-social-actions {
  display: flex !important;
  flex: 0 0 auto;
  grid-template-columns: repeat(2, auto);
  gap: 5px !important;
}

.community-chat-button {
  width: auto;
  padding: 5px 8px;
  color: #0b1d2d;
  background: #8ed0a0;
  border-color: #d8f4df;
  font-size: 0.62rem;
}

.friend-chat-layout {
  display: grid;
  grid-template-columns: minmax(175px, 0.42fr) minmax(0, 1fr);
  gap: 9px;
}

.friend-conversation-column,
.friend-message-column {
  min-width: 0;
  padding: 9px;
  background: #0b1d2d;
  border: 3px solid var(--line);
}

.friend-conversation-list {
  display: grid;
  gap: 7px;
  max-height: clamp(280px, 44vh, 410px);
  overflow-y: auto;
}

.friend-conversation-button {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 8px;
  color: #f7f2cf;
  background: #18344f;
  border: 2px solid #294b69;
  border-left: 5px solid #6f91af;
  text-align: left;
}

.friend-conversation-button.selected {
  color: #0b1d2d;
  background: var(--menu-accent);
  border-color: #f7f2cf;
}

.friend-conversation-button strong {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-conversation-button span {
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
}

.friend-message-column {
  display: grid;
  gap: 8px;
}

.friend-chat-heading {
  display: grid;
  gap: 3px;
  min-height: 42px;
}

.friend-chat-heading h4 {
  margin: 0;
  color: var(--menu-accent);
  font-size: 0.76rem;
}

.friend-chat-heading span {
  overflow: hidden;
  color: #aebcaf;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.67rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-messages {
  height: clamp(190px, 30vh, 280px);
  padding: 7px;
  border-width: 2px;
}

.community-group-form {
  margin-bottom: 9px;
}

.community-social-player strong {
  overflow: hidden;
  color: #f7f2cf;
  font-size: 0.68rem;
  text-overflow: ellipsis;
}

.community-social-player span,
.community-social-empty {
  color: #aebcaf;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
}

.community-social-empty {
  margin: 4px 0;
  line-height: 1.35;
}

.community-compose-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-compose-footer span {
  color: #cbd8c8;
  font-size: 0.68rem;
}

.community-compose-footer button {
  width: auto;
  min-width: 120px;
}

.community-report-target {
  display: grid;
  gap: 4px;
  padding: 10px;
  background: #10263a;
  border: 3px solid var(--line);
  border-left: 7px solid #d95850;
}

.community-report-target span {
  color: #cbd8c8;
  font-size: 0.65rem;
  text-transform: uppercase;
}

.community-report-target strong {
  color: #ffaaa2;
}

.community-report-target p {
  margin: 0;
  color: #f7f2cf;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}

.account-profile small {
  color: #c8d4c7;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
}

.creator-form {
  display: grid;
  gap: 12px;
}

.creator-form[hidden] {
  display: none !important;
}

.creator-message {
  max-width: none;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
}

.creator-rating-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.creator-rating-label span {
  color: var(--team-accent);
}

.creator-progress-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.creator-player-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--line);
}

.creator-mode-switch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  cursor: pointer;
  background: #102a42;
  border: 3px solid #06121d;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.creator-mode-copy {
  display: grid;
  gap: 3px;
}

.creator-mode-copy strong {
  color: var(--team-accent);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.creator-mode-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.creator-switch-track {
  position: relative;
  width: 58px;
  height: 30px;
  background: #263f57;
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 2px #102234;
}

.creator-switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--line);
  transition: transform 120ms steps(2, end);
}

.creator-mode-switch input:checked + .creator-switch-track {
  background: var(--team-accent);
}

.creator-mode-switch input:checked + .creator-switch-track::after {
  background: #102234;
  transform: translateX(28px);
}

.creator-mode-switch input:focus-visible + .creator-switch-track {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.creator-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.play-panel::before {
  content: "";
  display: block;
  height: 10px;
  margin: -14px -14px 12px;
  background: var(--accent);
  border-bottom: 4px solid var(--line);
}

.eyebrow,
.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: #d7e0cb;
}

h2,
p {
  margin: 0;
}

.subtitle {
  margin-top: 12px;
  color: #d5dfcd;
  line-height: 1.45;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 700;
}

.scoreboard,
.status-row {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

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

.score-card,
.status-pill,
.instructions {
  background: var(--panel-2);
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.score-card,
.status-pill {
  padding: 12px 14px;
}

.score-card strong,
.status-pill strong {
  display: block;
  margin-top: 8px;
  font-size: 1.12rem;
  color: var(--team-accent);
  text-transform: uppercase;
}

.instructions {
  margin-top: 18px;
  padding: 16px;
}

.instructions h2 {
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.instructions p {
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 700;
  line-height: 1.45;
  color: #e8e1be;
}

.instructions p + p {
  margin-top: 8px;
}

.creator-access-link {
  all: unset;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.creator-access-link:hover {
  color: var(--team-accent);
}

.creator-access-link:focus-visible {
  outline: 3px solid var(--team-accent);
  outline-offset: 4px;
}

.creator-access-link:disabled {
  color: inherit;
  cursor: default;
}

.touch-instructions {
  display: none;
}

.play-panel {
  grid-area: play;
  padding: 14px;
  background:
    linear-gradient(180deg, #203a57 0, #162c41 100%);
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background:
    linear-gradient(180deg, #1d3a56 0 18%, #0f2335 18% 100%);
  border: 4px solid var(--line);
  overflow: hidden;
}

.canvas-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2%, transparent 2% 98%, rgba(255, 255, 255, 0.06) 98% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 4%, transparent 4% 100%);
  pointer-events: none;
}

canvas {
  display: block;
  width: min(100%, 760px);
  height: auto;
  max-height: 100%;
  aspect-ratio: 3 / 4;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 6px solid #09080d;
  background: #254529;
}

.field-goal-panel {
  position: absolute;
  inset: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 18, 29, 0.93);
  border: 4px solid var(--line);
  overflow: auto;
}

.field-goal-panel[hidden] {
  display: none !important;
}

.field-goal-card {
  width: min(100%, 520px);
  display: grid;
  gap: 14px;
  padding: clamp(14px, 3vw, 22px);
  color: var(--text);
  background: #14283f;
  border: 4px solid #080f18;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 9px 0 rgba(3, 8, 13, 0.42);
}

.field-goal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.field-goal-header h2 {
  margin: 5px 0 0;
  color: var(--team-accent);
  font-size: clamp(1.55rem, 4vw, 2.3rem);
  line-height: 1;
  text-transform: uppercase;
}

.field-goal-clock {
  min-width: 76px;
  padding: 8px 10px;
  color: var(--team-accent);
  background: #091522;
  border: 3px solid var(--line);
  text-align: center;
}

.field-goal-clock span,
.field-goal-clock strong {
  display: block;
  text-transform: uppercase;
}

.field-goal-clock span {
  color: #dce4d2;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.field-goal-clock strong {
  margin-top: 3px;
  font-size: 1.45rem;
}

.field-goal-clock.urgent {
  color: #ff8d81;
  animation: clock-pulse 0.7s steps(2, end) infinite;
}

@keyframes clock-pulse {
  50% {
    background: #591d25;
  }
}

.field-goal-scene {
  --aim-position: 50%;
  position: relative;
  height: 150px;
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(246, 243, 222, 0.08) 46px 49px),
    linear-gradient(180deg, #557fa6 0 42%, #2c6736 42% 100%);
  border: 4px solid var(--line);
  overflow: hidden;
}

.field-goal-scene::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 8px;
  background: #24384c;
  border-block: 2px solid #111b27;
}

.goal-post,
.goal-crossbar {
  position: absolute;
  z-index: 2;
  display: block;
  background: #f0c84f;
  box-shadow: 3px 0 0 #6f5620;
}

.goal-post {
  top: 12%;
  width: 7px;
  height: 52%;
}

.goal-post-left {
  left: 32%;
}

.goal-post-right {
  right: 32%;
}

.goal-crossbar {
  left: 32%;
  right: 32%;
  top: 62%;
  height: 7px;
}

.kick-ball {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 22px;
  height: 14px;
  translate: -50% 0;
  rotate: -15deg;
  scale: 0.72 1.18;
  opacity: 0;
  background: #8c451e;
  border: 3px solid #111016;
  border-radius: 50%;
  z-index: 4;
  transition: opacity 70ms steps(2, end);
  will-change: left, bottom, scale, rotate, opacity;
}

.kick-ball.in-flight {
  opacity: 1;
  filter: drop-shadow(-5px 5px 0 rgba(17, 16, 22, 0.34));
}

body[data-game="soccer"] .field-goal-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(246, 243, 222, 0.08) 46px 49px),
    linear-gradient(180deg, #6d9fc2 0 40%, #2d7942 40% 100%);
}

body[data-game="soccer"] .field-goal-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 28%;
  right: 28%;
  top: 28%;
  height: 42%;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(246, 243, 222, 0.32) 13px 15px),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(246, 243, 222, 0.32) 10px 12px);
}

body[data-game="soccer"] .goal-post,
body[data-game="soccer"] .goal-crossbar {
  z-index: 2;
  background: #f6f3de;
  box-shadow: 3px 0 0 #68747b;
}

body[data-game="soccer"] .goal-post {
  top: 28%;
  height: 42%;
}

body[data-game="soccer"] .goal-post-left {
  left: 28%;
}

body[data-game="soccer"] .goal-post-right {
  right: 28%;
}

body[data-game="soccer"] .goal-crossbar {
  left: 28%;
  right: 28%;
  top: 28%;
}

body[data-game="soccer"] .kick-ball {
  width: 20px;
  height: 20px;
  rotate: 0deg;
  background: #f6f3de;
}

body[data-game="soccer"] .kick-ball::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 6px;
  height: 6px;
  background: #111016;
  box-shadow: -4px 7px 0 -1px #111016, 7px 6px 0 -1px #111016;
}

body[data-game="soccer"] .kick-aim-marker {
  top: 46%;
}

body[data-game="water-polo"] .field-goal-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(216, 245, 247, 0.13) 42px 45px),
    linear-gradient(180deg, #263d55 0 28%, #2499c2 28% 100%);
}

body[data-game="water-polo"] .field-goal-scene::before {
  top: 68%;
  height: 9px;
  background: repeating-linear-gradient(90deg, #d8f5f7 0 18px, #1685b0 18px 34px);
  border-block: 2px solid #0b5a7e;
}

body[data-game="water-polo"] .field-goal-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 27%;
  right: 27%;
  top: 25%;
  height: 45%;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, rgba(246, 243, 222, 0.34) 13px 15px),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(246, 243, 222, 0.34) 10px 12px);
}

body[data-game="water-polo"] .goal-post,
body[data-game="water-polo"] .goal-crossbar {
  z-index: 2;
  background: #f6f3de;
  box-shadow: 3px 0 0 #637b88;
}

body[data-game="water-polo"] .goal-post {
  top: 25%;
  height: 45%;
}

body[data-game="water-polo"] .goal-post-left {
  left: 27%;
}

body[data-game="water-polo"] .goal-post-right {
  right: 27%;
}

body[data-game="water-polo"] .goal-crossbar {
  left: 27%;
  right: 27%;
  top: 25%;
}

body[data-game="water-polo"] .kick-ball {
  width: 20px;
  height: 20px;
  rotate: 0deg;
  background: #f3d34a;
}

body[data-game="water-polo"] .kick-ball::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1px;
  width: 3px;
  height: 12px;
  background: #cf3545;
  rotate: 28deg;
}

body[data-game="water-polo"] .kick-aim-marker {
  top: 45%;
}

body[data-game="surfing"] .field-goal-scene {
  background:
    repeating-linear-gradient(165deg, transparent 0 36px, rgba(225, 249, 244, 0.34) 36px 42px),
    linear-gradient(180deg, #79bfd3 0 28%, #238bad 28% 100%);
}

body[data-game="surfing"] .field-goal-scene::before {
  top: 67%;
  height: 18px;
  background: #dff7f2;
  border-color: #176985;
  transform: skewY(-4deg);
}

body[data-game="surfing"] .field-goal-scene::after,
body[data-game="skiing"] .field-goal-scene::after {
  content: "";
  position: absolute;
  left: 31%;
  right: 31%;
  top: 41%;
  height: 48%;
  border: 5px dashed rgba(246, 243, 222, 0.72);
}

body[data-game="surfing"] .goal-post,
body[data-game="surfing"] .goal-crossbar,
body[data-game="skiing"] .goal-post,
body[data-game="skiing"] .goal-crossbar,
body[data-game="baseball"] .goal-post,
body[data-game="baseball"] .goal-crossbar {
  display: none;
}

body[data-game="surfing"] .kick-ball {
  width: 36px;
  height: 9px;
  rotate: -14deg;
  scale: 0.9;
  background: #f2c84b;
  border-radius: 50%;
}

body[data-game="surfing"] .kick-ball::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 6px;
  width: 8px;
  height: 20px;
  background: var(--home-team-primary);
  border: 3px solid #111016;
}

body[data-game="surfing"] .kick-aim-marker,
body[data-game="skiing"] .kick-aim-marker {
  top: 68%;
  background: #f0c84f;
}

body[data-game="skiing"] .field-goal-scene {
  background:
    linear-gradient(160deg, transparent 0 46%, rgba(102, 147, 162, 0.28) 46% 49%, transparent 49%),
    linear-gradient(180deg, #79aaca 0 28%, #e4eff1 28% 100%);
}

body[data-game="skiing"] .field-goal-scene::before {
  top: 42%;
  left: 18%;
  right: 18%;
  height: 58%;
  background: #c9dde1;
  border: 0;
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}

body[data-game="skiing"] .kick-ball {
  width: 20px;
  height: 24px;
  rotate: 0deg;
  scale: 0.9;
  background: var(--home-team-primary);
  border-radius: 0;
  box-shadow: -8px 20px 0 -6px #26343d, 8px 20px 0 -6px #26343d;
}

body[data-game="skiing"] .kick-ball::after {
  content: "";
  position: absolute;
  left: 3px;
  top: -12px;
  width: 8px;
  height: 8px;
  background: var(--home-team-secondary);
  border: 3px solid #111016;
}

body[data-game="baseball"] .field-goal-scene {
  background:
    linear-gradient(45deg, transparent 0 43%, #b77d4e 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 0 43%, #b77d4e 43% 57%, transparent 57%),
    linear-gradient(180deg, #182536 0 28%, #47884b 28% 100%);
}

body[data-game="baseball"] .field-goal-scene::before {
  top: 27%;
  height: 8px;
  background: repeating-linear-gradient(90deg, #315a3d 0 18px, #f0c84f 18px 24px);
  border-color: #111016;
}

body[data-game="baseball"] .field-goal-scene::after {
  content: "";
  position: absolute;
  left: 44%;
  top: 38%;
  width: 12%;
  height: 34%;
  border: 4px solid rgba(246, 243, 222, 0.82);
}

body[data-game="baseball"] .kick-ball {
  width: 17px;
  height: 17px;
  rotate: 0deg;
  scale: 0.68;
  background: #f6f3de;
  border-radius: 50%;
  box-shadow: inset 4px 0 0 #d84848;
}

body[data-game="baseball"] .kick-aim-marker {
  top: 52%;
  width: 10px;
  height: 10px;
  background: #e65d45;
}

body[data-game="lacrosse"] .field-goal-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 44px, rgba(246, 243, 222, 0.08) 44px 47px),
    linear-gradient(180deg, #587f9e 0 34%, #397b43 34% 100%);
}

body[data-game="lacrosse"] .field-goal-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 29%;
  right: 29%;
  top: 27%;
  height: 44%;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(246, 243, 222, 0.3) 12px 14px),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(246, 243, 222, 0.3) 10px 12px);
}

body[data-game="lacrosse"] .goal-post,
body[data-game="lacrosse"] .goal-crossbar {
  z-index: 2;
  background: #e65d45;
  box-shadow: 3px 0 0 #6e2424;
}

body[data-game="lacrosse"] .goal-post {
  top: 27%;
  height: 44%;
}

body[data-game="lacrosse"] .goal-post-left { left: 29%; }
body[data-game="lacrosse"] .goal-post-right { right: 29%; }
body[data-game="lacrosse"] .goal-crossbar {
  left: 29%;
  right: 29%;
  top: 27%;
}

body[data-game="lacrosse"] .kick-ball {
  width: 14px;
  height: 14px;
  rotate: 0deg;
  scale: 0.68;
  background: #f0c84f;
  border-radius: 50%;
}

body[data-game="lacrosse"] .kick-aim-marker {
  top: 47%;
  width: 10px;
  height: 10px;
  background: #55b982;
}

body[data-game="dodgeball"] .field-goal-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(78, 43, 24, 0.2) 34px 37px),
    linear-gradient(180deg, #17283a 0 28%, #d3a05d 28% 100%);
}

body[data-game="dodgeball"] .field-goal-scene::before {
  top: 63%;
  height: 6px;
  background: #d94c45;
  border-color: #7e2828;
}

body[data-game="dodgeball"] .field-goal-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 70px;
  height: 70px;
  translate: -50% -50%;
  border: 5px solid rgba(246, 243, 222, 0.72);
  border-radius: 50%;
}

body[data-game="dodgeball"] .goal-post,
body[data-game="dodgeball"] .goal-crossbar {
  display: none;
}

body[data-game="dodgeball"] .kick-ball {
  width: 22px;
  height: 22px;
  rotate: 0deg;
  scale: 0.74;
  background: #d94c45;
  border-radius: 50%;
  box-shadow: inset 5px 0 0 #f0c84f;
}

body[data-game="dodgeball"] .kick-ball::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: 3px;
  height: 16px;
  background: #7e2828;
  rotate: 28deg;
}

body[data-game="dodgeball"] .kick-aim-marker {
  top: 45%;
  width: 11px;
  height: 11px;
  background: #f0c84f;
}

body[data-game="dodgeball"] .basketball-shooter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -2px;
  display: block;
  width: 25px;
  height: 38px;
  translate: -50% 0;
  background: var(--home-team-primary);
  border: 3px solid #111016;
  box-shadow:
    -9px 13px 0 -6px var(--home-team-secondary),
    9px 13px 0 -6px var(--home-team-secondary),
    -8px 28px 0 -6px #efc79d,
    8px 28px 0 -6px #efc79d;
}

body[data-game="dodgeball"] .basketball-shooter::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -17px;
  width: 11px;
  height: 11px;
  background: #efc79d;
  border: 3px solid #111016;
}

body[data-game="dodgeball"] .basketball-shooter::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 3px;
  width: 12px;
  height: 12px;
  background: #d94c45;
  border: 3px solid #111016;
  border-radius: 50%;
  transform-origin: -12px 8px;
}

body[data-game="dodgeball"] .field-goal-scene.shot-launched .basketball-shooter::after {
  animation: dodgeball-throw-arm 460ms steps(4, end) forwards;
}

@keyframes dodgeball-throw-arm {
  0% { transform: translate(0, 0) rotate(0deg); }
  45% { transform: translate(-16px, -11px) rotate(-34deg); }
  100% { transform: translate(8px, -5px) rotate(28deg); opacity: 0; }
}

.basketball-backboard,
.basketball-rim,
.basketball-shooter,
.hockey-goalie,
.hockey-net,
.hockey-shooter {
  display: none;
}

body[data-game="hockey"] .field-goal-scene {
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(206, 17, 38, 0.46) 48% 52%, transparent 52%),
    linear-gradient(180deg, #1a2c40 0 34%, #dceff3 34% 100%);
}

body[data-game="hockey"] .field-goal-scene::before {
  top: 32%;
  background: #546b7c;
  border-color: #111b27;
}

body[data-game="hockey"] .goal-post,
body[data-game="hockey"] .goal-crossbar {
  display: none;
}

body[data-game="hockey"] .hockey-net {
  position: absolute;
  z-index: 2;
  left: 31%;
  right: 31%;
  top: 28%;
  display: block;
  height: 42%;
  border: 7px solid #ce1126;
  border-bottom-color: #aabdc4;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(66, 95, 108, 0.4) 11px 13px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(66, 95, 108, 0.4) 9px 11px);
}

body[data-game="hockey"] .hockey-goalie {
  --goalie-slide-x: 0px;
  --goalie-slide-mid-x: 0px;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 29%;
  display: block;
  width: 26px;
  height: 30px;
  translate: -50% 0;
  background: #315b86;
  border: 3px solid #111016;
  box-shadow: -13px 17px 0 -7px #f6f3de, 13px 17px 0 -7px #f6f3de;
  transform-origin: 50% 100%;
}

body[data-game="hockey"] .hockey-goalie::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -17px;
  width: 14px;
  height: 12px;
  background: #f6f3de;
  border: 3px solid #111016;
  box-shadow: inset 0 -3px 0 #79d8ef;
}

body[data-game="hockey"] .hockey-goalie.diving {
  animation: hockey-goalie-slide 720ms cubic-bezier(0.2, 0.72, 0.25, 1) 60ms forwards;
}

body[data-game="hockey"] .hockey-shooter {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -3px;
  display: block;
  width: 25px;
  height: 34px;
  translate: -50% 0;
  background: var(--home-team-primary);
  border: 3px solid #111016;
  box-shadow: -8px 25px 0 -5px var(--home-team-secondary), 8px 25px 0 -5px var(--home-team-secondary);
}

body[data-game="hockey"] .hockey-shooter::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 5px;
  width: 5px;
  height: 36px;
  background: #9a632c;
  border: 2px solid #111016;
  rotate: 25deg;
  transform-origin: 50% 0;
}

body[data-game="hockey"] .field-goal-scene.shot-launched .hockey-shooter::after {
  animation: hockey-stick-shot 480ms steps(4, end) forwards;
}

body[data-game="hockey"] .kick-ball {
  width: 24px;
  height: 8px;
  rotate: 0deg;
  scale: 0.82;
  background: #111016;
  border-color: #45515a;
  box-shadow: inset 0 -2px 0 #000;
}

body[data-game="hockey"] .kick-aim-marker {
  top: 48%;
  width: 11px;
  height: 7px;
  background: #79d8ef;
}

@keyframes hockey-goalie-slide {
  0% { transform: translateX(0) scale(1); }
  45% { transform: translateX(var(--goalie-slide-mid-x)) scale(1.16, 0.86); }
  100% { transform: translateX(var(--goalie-slide-x)) scale(1.22, 0.78); }
}

@keyframes hockey-stick-shot {
  0% { rotate: 25deg; }
  45% { rotate: -24deg; }
  100% { rotate: 12deg; }
}

body[data-game="basketball"] .field-goal-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(84, 43, 20, 0.18) 34px 37px),
    linear-gradient(180deg, #182536 0 38%, #d4a15b 38% 100%);
}

body[data-game="basketball"] .field-goal-scene::before {
  top: 36%;
  height: 7px;
  background: #2c4058;
  border-color: #101a27;
}

body[data-game="basketball"] .goal-post,
body[data-game="basketball"] .goal-crossbar {
  display: none;
}

body[data-game="basketball"] .basketball-backboard {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 17%;
  display: block;
  width: 104px;
  height: 54px;
  translate: -50% 0;
  background: rgba(230, 239, 239, 0.82);
  border: 6px solid #111016;
  box-shadow: inset 0 0 0 4px #d5d9d5;
}

body[data-game="basketball"] .basketball-backboard::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 34px;
  height: 22px;
  translate: -50% 0;
  border: 4px solid #c94f22;
}

body[data-game="basketball"] .basketball-rim {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 48%;
  display: block;
  width: 54px;
  height: 9px;
  translate: -50% 0;
  background: #df5f25;
  border: 3px solid #111016;
}

body[data-game="basketball"] .basketball-rim::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 8px;
  height: 24px;
  background:
    repeating-linear-gradient(65deg, transparent 0 7px, rgba(246, 243, 222, 0.8) 7px 9px),
    repeating-linear-gradient(-65deg, transparent 0 7px, rgba(246, 243, 222, 0.8) 7px 9px);
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}

body[data-game="basketball"] .basketball-shooter {
  --shooter-primary: var(--home-team-primary);
  --shooter-secondary: var(--home-team-secondary);
  position: absolute;
  z-index: 3;
  left: 28%;
  bottom: -2px;
  display: block;
  width: 25px;
  height: 38px;
  translate: -50% 0;
  background: var(--shooter-primary);
  border: 3px solid #111016;
  box-shadow:
    -9px 13px 0 -6px var(--shooter-secondary),
    9px 13px 0 -6px var(--shooter-secondary),
    -8px 28px 0 -6px #efc79d,
    8px 28px 0 -6px #efc79d;
  transform-origin: 50% 100%;
}

body[data-game="basketball"] .basketball-shooter::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -17px;
  width: 11px;
  height: 11px;
  background: #efc79d;
  border: 3px solid #111016;
  box-shadow: 0 -4px 0 #302218;
}

body[data-game="basketball"] .basketball-shooter::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 4px;
  width: 9px;
  height: 18px;
  background: #efc79d;
  border: 3px solid #111016;
  box-shadow: 28px 0 0 -3px #111016, 28px 0 0 #efc79d;
  transform-origin: 24px 3px;
}

body[data-game="basketball"] .field-goal-scene.shot-launched .basketball-shooter {
  animation: basketball-jump-shot 620ms cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}

body[data-game="basketball"] .field-goal-scene.shot-launched .basketball-shooter::after {
  animation: basketball-release-arms 430ms steps(3, end) forwards;
}

body[data-game="basketball"] .field-goal-scene.shot-made .basketball-rim {
  animation: basketball-rim-rattle 420ms steps(4, end);
}

body[data-game="basketball"] .field-goal-scene.shot-made .basketball-rim::after {
  animation: basketball-net-swish 520ms ease-out;
}

body[data-game="basketball"] .field-goal-scene.shot-missed .basketball-backboard {
  animation: basketball-backboard-flash 360ms steps(2, end);
}

body[data-game="basketball"] .field-goal-scene.shot-made .kick-ball {
  animation: basketball-ball-swish 480ms ease-in forwards;
}

body[data-game="basketball"] .field-goal-scene.shot-missed .kick-ball {
  animation: basketball-ball-carom 520ms ease-out forwards;
}

@keyframes basketball-jump-shot {
  0% { transform: translateY(0) scaleY(0.92); }
  36% { transform: translateY(-18px) scaleY(1.04); }
  62% { transform: translateY(-21px) scaleY(1); }
  100% { transform: translateY(0) scaleY(0.96); }
}

@keyframes basketball-release-arms {
  0% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-12px) rotate(-8deg); }
  100% { transform: translateY(-16px) rotate(4deg); }
}

@keyframes basketball-rim-rattle {
  0%, 100% { translate: -50% 0; }
  25% { translate: calc(-50% - 4px) 1px; }
  50% { translate: calc(-50% + 4px) -1px; }
  75% { translate: calc(-50% - 2px) 1px; }
}

@keyframes basketball-net-swish {
  0% { transform: scaleY(0.75); filter: brightness(1); }
  45% { transform: scaleY(1.35); filter: brightness(1.5); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

@keyframes basketball-backboard-flash {
  50% { background: rgba(255, 221, 141, 0.96); }
}

@keyframes basketball-ball-swish {
  0% { opacity: 1; translate: -50% 0; }
  55% { opacity: 1; translate: -50% 18px; }
  100% { opacity: 0; translate: -50% 40px; scale: 0.48; }
}

@keyframes basketball-ball-carom {
  0% { opacity: 1; translate: -50% 0; }
  45% { opacity: 1; translate: calc(-50% + 24px) -12px; }
  100% { opacity: 0; translate: calc(-50% + 50px) 44px; scale: 0.52; }
}

body[data-game="basketball"] .kick-ball {
  width: 22px;
  height: 22px;
  rotate: 0deg;
  scale: 0.72;
  background: #d86b20;
  box-shadow: inset -4px -3px 0 #a84418;
}

body[data-game="basketball"] .kick-ball::before,
body[data-game="basketball"] .kick-ball::after {
  content: "";
  position: absolute;
  background: #401d12;
}

body[data-game="basketball"] .kick-ball::before {
  left: 8px;
  top: 0;
  width: 2px;
  height: 16px;
}

body[data-game="basketball"] .kick-ball::after {
  left: 0;
  top: 8px;
  width: 16px;
  height: 2px;
}

body[data-game="basketball"] .kick-aim-marker {
  top: 51%;
  width: 10px;
  height: 10px;
  background: #f7f2cf;
}

.soccer-keeper {
  display: none;
}

body[data-game="soccer"] .soccer-keeper,
body[data-game="lacrosse"] .soccer-keeper {
  --keeper-dive-x: 0px;
  --keeper-dive-mid-x: 0px;
  --keeper-dive-y: 0px;
  --keeper-dive-rotate: 0deg;
  --keeper-dive-mid-rotate: 0deg;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 29%;
  display: block;
  width: 24px;
  height: 28px;
  translate: -50% 0;
  background: #edb62f;
  border: 3px solid #111016;
  box-shadow: -12px 8px 0 -8px #f0c49c, 12px 8px 0 -8px #f0c49c;
  transform-origin: 50% 65%;
  will-change: transform;
}

body[data-game="water-polo"] .soccer-keeper {
  --keeper-dive-x: 0px;
  --keeper-dive-mid-x: 0px;
  --keeper-dive-y: 0px;
  --keeper-dive-rotate: 0deg;
  --keeper-dive-mid-rotate: 0deg;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 28%;
  display: block;
  width: 26px;
  height: 24px;
  translate: -50% 0;
  background: #cf3545;
  border: 3px solid #111016;
  box-shadow: -14px 7px 0 -8px #efc79d, 14px 7px 0 -8px #efc79d;
  transform-origin: 50% 65%;
  will-change: transform;
}

body[data-game="soccer"] .soccer-keeper.diving,
body[data-game="lacrosse"] .soccer-keeper.diving {
  animation: soccer-keeper-dive 720ms cubic-bezier(0.18, 0.75, 0.24, 1) 70ms forwards;
}

body[data-game="water-polo"] .soccer-keeper.diving {
  animation: soccer-keeper-dive 720ms cubic-bezier(0.18, 0.75, 0.24, 1) 70ms forwards;
}

body[data-game="soccer"] .soccer-keeper::before,
body[data-game="lacrosse"] .soccer-keeper::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -15px;
  width: 10px;
  height: 10px;
  background: #efc79d;
  border: 3px solid #111016;
}

body[data-game="soccer"] .soccer-keeper::after,
body[data-game="lacrosse"] .soccer-keeper::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -12px;
  width: 6px;
  height: 10px;
  background: #183653;
  border-inline: 2px solid #111016;
  box-shadow: 10px 0 0 #183653, 8px 0 0 2px #111016;
}

body[data-game="water-polo"] .soccer-keeper::before {
  content: "1";
  position: absolute;
  left: 3px;
  top: -15px;
  width: 14px;
  height: 11px;
  color: #111016;
  background: #f6f3de;
  border: 3px solid #111016;
  font-size: 8px;
  line-height: 11px;
  text-align: center;
}

body[data-game="water-polo"] .soccer-keeper::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: -11px;
  height: 9px;
  background: repeating-linear-gradient(90deg, #d8f5f7 0 10px, #1685b0 10px 18px);
  border-top: 3px solid #111016;
}

body[data-game="dodgeball"] .soccer-keeper {
  --keeper-dive-x: 0px;
  --keeper-dive-mid-x: 0px;
  --keeper-dive-y: 0px;
  --keeper-dive-rotate: 0deg;
  --keeper-dive-mid-rotate: 0deg;
  --dodgeball-target-left: 50%;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 33%;
  display: block;
  width: 25px;
  height: 30px;
  translate: -50% 0;
  background: var(--team-primary);
  border: 3px solid #111016;
  box-shadow: -11px 8px 0 -7px #efc79d, 11px 8px 0 -7px #efc79d;
  transform-origin: 50% 70%;
  will-change: left, transform;
}

body[data-game="dodgeball"] .soccer-keeper.targeting {
  animation: dodgeball-target-brace 900ms steps(5, end) forwards;
}

body[data-game="dodgeball"] .soccer-keeper.targeting.hit {
  animation-name: dodgeball-target-impact;
}

body[data-game="dodgeball"] .soccer-keeper::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -16px;
  width: 11px;
  height: 11px;
  background: #efc79d;
  border: 3px solid #111016;
  box-shadow: inset 0 3px 0 var(--team-accent);
}

body[data-game="dodgeball"] .soccer-keeper::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -12px;
  width: 6px;
  height: 10px;
  background: var(--team-secondary);
  border-inline: 2px solid #111016;
  box-shadow: 11px 0 0 var(--team-secondary), 9px 0 0 2px #111016;
}

@keyframes dodgeball-target-brace {
  0%, 64% { transform: translateY(0) scale(1); }
  78% { transform: translateY(3px) scale(1.08, 0.9); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dodgeball-target-impact {
  0% {
    left: 50%;
    transform: translateY(0) rotate(0deg) scale(1);
  }

  58% {
    left: var(--dodgeball-target-left);
    transform: translateY(0) rotate(0deg) scale(1);
  }

  78% {
    left: var(--dodgeball-target-left);
    transform: translateY(3px) rotate(0deg) scale(1.08, 0.9);
  }

  88% {
    left: var(--dodgeball-target-left);
    transform: translateY(-3px) rotate(-18deg) scale(1.12, 0.88);
  }

  100% {
    left: var(--dodgeball-target-left);
    transform: translate(9px, 13px) rotate(78deg) scale(1.12, 0.88);
  }
}

@keyframes soccer-keeper-dive {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  28% {
    transform: translate(var(--keeper-dive-mid-x), -10px)
      rotate(var(--keeper-dive-mid-rotate)) scale(1.08, 0.94);
  }

  72% {
    transform: translate(var(--keeper-dive-x), var(--keeper-dive-y))
      rotate(var(--keeper-dive-rotate)) scale(1.12, 0.9);
  }

  100% {
    transform: translate(var(--keeper-dive-x), calc(var(--keeper-dive-y) + 8px))
      rotate(var(--keeper-dive-rotate)) scale(1.12, 0.9);
  }
}

.kick-aim-marker {
  position: absolute;
  z-index: 3;
  left: var(--aim-position);
  top: 24%;
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  background: var(--text);
  border: 3px solid #111016;
  rotate: 45deg;
}

.field-goal-instructions,
.field-goal-status {
  max-width: none;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.kick-meter {
  display: grid;
  gap: 7px;
  opacity: 0.48;
  transition: opacity 100ms steps(2, end);
}

.kick-meter[hidden] {
  display: none !important;
}

.kick-meter.active,
.kick-meter.locked {
  opacity: 1;
}

.kick-meter > span:first-child,
.range-labels {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.kick-meter strong,
.kick-meter output {
  color: var(--team-accent);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.timing-track {
  position: relative;
  display: block;
  width: 100%;
  height: 24px;
  border: 3px solid var(--line);
  overflow: visible;
}

.power-timing-track {
  background: linear-gradient(90deg, #8b3037 0 55%, #4f9b58 55% 100%);
}

.aim-timing-track {
  background: linear-gradient(90deg, #8b3037 0 23%, #4f9b58 23% 77%, #8b3037 77% 100%);
}

.timing-needle {
  position: absolute;
  z-index: 2;
  left: 0;
  top: -7px;
  display: block;
  width: 8px;
  height: 32px;
  translate: -50% 0;
  background: var(--team-accent);
  border: 3px solid var(--line);
  box-shadow: 2px 2px 0 rgba(5, 11, 18, 0.35);
}

.kick-meter.locked .timing-needle {
  background: var(--text);
}

.static-kick-controls {
  display: grid;
  gap: 12px;
}

.static-kick-controls[hidden] {
  display: none !important;
}

.static-kick-control {
  display: grid;
  gap: 7px;
}

.static-kick-control > span:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.static-kick-control strong,
.static-kick-control output {
  color: var(--team-accent);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.static-kick-control input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  border: 3px solid var(--line);
  cursor: pointer;
}

.static-kick-control input[type="range"].static-aim-range {
  background: linear-gradient(90deg, #8b3037 0 32.5%, #4f9b58 32.5% 67.5%, #8b3037 67.5% 100%);
}

.static-kick-control input[type="range"].static-power-range {
  background: linear-gradient(90deg, #8b3037 0 55%, #4f9b58 55% 90%, #8b3037 90% 100%);
}

.static-kick-control input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 30px;
  appearance: none;
  background: var(--team-accent);
  border: 3px solid var(--line);
}

.static-kick-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 26px;
  background: var(--team-accent);
  border: 3px solid var(--line);
  border-radius: 0;
}

.range-labels small {
  color: #bfcbb9;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.field-goal-status {
  min-height: 1.2em;
  color: var(--team-accent);
  font-size: 0.95rem;
  text-transform: uppercase;
}

.field-goal-status.made {
  color: #91e38e;
  font-size: 1.2rem;
}

.field-goal-status.missed {
  color: #ff9488;
  font-size: 1.2rem;
}

#fieldGoalActionButton:disabled {
  color: #8c917f;
  background: #3a4550;
  cursor: not-allowed;
  filter: none;
}

.tutorial-panel {
  position: absolute;
  inset: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 18, 29, 0.96);
  border: 4px solid var(--line);
  overflow: auto;
}

.tutorial-panel[hidden] {
  display: none !important;
}

.tutorial-card {
  width: min(100%, 540px);
  display: grid;
  gap: 12px;
  padding: clamp(14px, 3vw, 22px);
  color: var(--text);
  background: #14283f;
  border: 4px solid #080f18;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 9px 0 rgba(3, 8, 13, 0.42);
}

.tutorial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.tutorial-header span {
  display: block;
  margin-top: 4px;
  color: #dce4d2;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tutorial-header > strong {
  min-width: 78px;
  padding: 9px 10px;
  color: #1d1607;
  background: var(--team-accent);
  border: 3px solid var(--line);
  text-align: center;
  text-transform: uppercase;
}

.tutorial-playbook {
  position: relative;
  height: 100px;
  background:
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(246, 243, 222, 0.08) 48px 51px),
    repeating-linear-gradient(0deg, #2d6b36 0 32px, #377a3d 32px 64px);
  border: 3px solid var(--line);
  overflow: hidden;
}

.tutorial-playbook::before,
.tutorial-playbook::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(246, 243, 222, 0.72);
}

.tutorial-playbook::before {
  top: 20px;
}

.tutorial-playbook::after {
  bottom: 20px;
}

.tutorial-runner,
.tutorial-defender {
  position: absolute;
  z-index: 2;
  width: 18px;
  height: 22px;
  border: 3px solid var(--line);
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.24);
}

.tutorial-runner {
  left: 22%;
  bottom: 10px;
  background: var(--team-accent);
}

.tutorial-defender {
  background: #b42d38;
}

.tutorial-defender-one {
  left: 52%;
  top: 16px;
}

.tutorial-defender-two {
  right: 18%;
  top: 44px;
}

.tutorial-route {
  position: absolute;
  left: 27%;
  bottom: 30px;
  width: 42%;
  height: 46px;
  border-top: 5px dashed var(--text);
  border-right: 5px dashed var(--text);
  transform: skewX(-24deg);
}

.tutorial-card > h2 {
  margin: 0;
  color: var(--team-accent);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.tutorial-card > p {
  max-width: none;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.tutorial-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
  text-align: left;
}

.tutorial-list li {
  position: relative;
  padding: 8px 10px 8px 30px;
  color: var(--text);
  background: #0f2133;
  border: 2px solid var(--line);
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
}

.tutorial-list li::before {
  content: ">";
  position: absolute;
  left: 10px;
  color: var(--team-accent);
  font-family: "Arial Black", Impact, sans-serif;
}

.tutorial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.tutorial-dot {
  width: 22px;
  height: 7px;
  background: #334b60;
  border: 2px solid var(--line);
}

.tutorial-dot.active {
  background: var(--team-accent);
}

.tutorial-actions {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(150px, 1.3fr);
  gap: 10px;
}

.tutorial-actions button:disabled {
  color: #8c917f;
  background: #3a4550;
  cursor: not-allowed;
  filter: none;
}

.overlay {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px;
  background: rgba(15, 28, 42, 0.94);
  border: 4px solid var(--line);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.04);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.overlay > :first-child {
  margin-top: auto;
}

.overlay > :last-child {
  margin-bottom: auto;
}

.overlay.hidden {
  display: none;
}

.overlay h2 {
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--team-accent);
  background: #14283f;
  border: 3px solid var(--line);
  padding: 8px 16px;
}

.overlay p {
  max-width: 28ch;
  color: var(--text);
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 700;
  line-height: 1.45;
}

.homepage {
  --team-accent: var(--menu-accent);
  width: min(100%, 560px);
  display: grid;
  gap: 14px;
}

.library-return-button {
  justify-self: start;
  padding: 9px 13px;
  font-size: 0.76rem;
}

#franchiseMainContent {
  display: grid;
  gap: 14px;
}

.homepage-kicker {
  color: #d3dec8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.homepage-hero {
  display: grid;
  gap: 10px;
}

.homepage-hero p {
  max-width: none;
}

.franchise-card,
.runner-select,
.franchise-module,
.runner-feature,
.season-chip {
  background: rgba(20, 40, 63, 0.94);
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.franchise-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  text-align: left;
  padding: 14px;
}

.postgame-score-panel {
  border-color: var(--team-accent);
  background: #10283e;
}

.postgame-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.postgame-score-card {
  display: grid;
  gap: 4px;
  padding: 11px;
  background: #0b1d2d;
  border: 3px solid var(--line);
  border-top-color: var(--team-accent);
}

.postgame-score-card span,
.postgame-score-card small {
  color: #cbd8c8;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.postgame-score-card strong {
  color: var(--team-accent);
  font-size: clamp(0.92rem, 2vw, 1.2rem);
}

.load-save-panel {
  --team-accent: var(--menu-accent);
  display: grid;
  gap: 12px;
}

.franchise-slot-grid {
  display: grid;
  gap: 10px;
}

.franchise-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(12, 25, 38, 0.72);
  border: 3px solid var(--line);
  text-align: left;
}

.franchise-slot.active {
  border-color: var(--team-accent);
  background: rgba(226, 187, 79, 0.16);
}

.franchise-slot.empty {
  background: rgba(12, 25, 38, 0.48);
}

.franchise-slot strong {
  display: block;
  color: var(--team-accent);
  text-transform: uppercase;
}

.franchise-slot .slot-team-name {
  width: fit-content;
  padding: 4px 7px;
  color: var(--slot-team-primary);
  background: var(--slot-team-secondary);
  border-left: 5px solid var(--slot-team-primary);
  text-shadow: 2px 2px 0 #111016;
}

.franchise-slot span {
  display: block;
  margin-top: 4px;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.slot-button {
  min-width: 96px;
  padding-inline: 12px;
}

.franchise-slot.active .slot-button {
  background: var(--team-secondary);
  color: var(--team-accent);
}

.danger-button {
  background: #6d2731;
  color: var(--text);
}

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

.season-chip {
  padding: 12px;
  text-align: left;
}

.season-chip strong {
  display: block;
  margin-top: 6px;
  color: var(--team-accent);
  text-transform: uppercase;
}

.franchise-card strong {
  display: block;
  margin-top: 6px;
  color: var(--team-accent);
  text-transform: uppercase;
}

.career-target {
  display: block;
  margin-top: 6px;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

#homeTeamName {
  width: fit-content;
  padding: 5px 8px;
  color: var(--home-team-primary);
  background: var(--home-team-secondary);
  border-left: 6px solid var(--home-team-primary);
  text-shadow: 2px 2px 0 #111016;
}

.franchise-dashboard {
  display: grid;
  gap: 12px;
  grid-template-columns: 1.05fr 1.15fr;
}

.franchise-module,
.runner-feature {
  padding: 14px;
  text-align: left;
}

.module-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.module-head h3 {
  margin: 0;
  font-size: 0.98rem;
  text-transform: uppercase;
}

.module-head span {
  color: #dce7d2;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.fan-meter {
  height: 16px;
  background: #0f2133;
  border: 2px solid var(--line);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.fan-meter-fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, #c84d33, #e2bb4f 55%, #69b76c);
  transition: width 450ms steps(6, end);
}

.fan-support-value {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 5px;
}

.fan-support-value strong {
  white-space: nowrap;
}

.fan-capacity {
  color: #dce7d2;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.fan-trend {
  padding: 2px 5px;
  border: 2px solid currentColor;
  font-size: 0.62rem;
  line-height: 1;
  white-space: nowrap;
}

.fan-trend.up {
  color: #7bd77d;
}

.fan-trend.down {
  color: #ef765f;
}

.fan-trend.neutral {
  color: #dce7d2;
}

.team-funds-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.team-funds-value span {
  color: #7bd77d;
  font-size: 0.6rem;
  line-height: 1;
  white-space: nowrap;
}

.franchise-module p,
.runner-feature p {
  max-width: none;
  margin-top: 10px;
  color: #dce4d2;
  font-size: 0.9rem;
  line-height: 1.42;
}

.offseason-panel {
  display: grid;
  gap: 10px;
  border-color: var(--team-accent);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 8px, transparent 8px 16px),
    #10283e;
}

.offseason-page-label {
  margin: 0;
  color: var(--team-accent);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.offseason-active #homepageHero,
body.offseason-active #franchiseMainContent,
body.offseason-active #startButton {
  display: none !important;
}

body.offseason-active .homepage {
  width: min(100%, 720px);
}

body.offseason-active .offseason-panel {
  display: grid !important;
  min-height: min(620px, calc(100dvh - 170px));
  align-content: center;
  gap: 18px;
  padding: clamp(22px, 5vw, 48px);
  border-width: 6px;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.04);
}

body.offseason-active .offseason-panel h4 {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
}

body.offseason-active .offseason-choices {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.offseason-panel[hidden] {
  display: none !important;
}

.offseason-kicker {
  margin: 0 !important;
  color: var(--team-accent) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.offseason-panel h4 {
  margin: 0;
  color: var(--text);
  font-size: 1.25rem;
  text-transform: uppercase;
}

.offseason-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.offseason-summary span {
  padding: 7px;
  color: #dce4d2;
  background: #0b1e30;
  border: 2px solid #07131f;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.offseason-choices {
  display: grid;
  gap: 8px;
}

.offseason-choice {
  width: 100%;
  padding: 10px 12px;
  color: var(--text);
  background: #193b58;
  text-align: left;
}

.offseason-choice strong,
.offseason-choice span {
  display: block;
}

.offseason-choice strong {
  color: var(--team-accent);
}

.offseason-choice span {
  margin-top: 4px;
  color: #d6dfc7;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: none;
}

.offseason-choice:disabled {
  cursor: not-allowed;
  filter: grayscale(0.75) brightness(0.7);
}

.between-game-panel {
  display: grid;
  gap: 9px;
  border-color: var(--team-accent);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 8px, transparent 8px 16px),
    #10283e;
}

.between-game-panel[hidden] {
  display: none !important;
}

.between-game-panel h4 {
  margin: 0;
  color: var(--team-accent);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.between-game-panel.press-conference {
  border-color: #70c8e8;
  background:
    repeating-linear-gradient(90deg, rgba(112, 200, 232, 0.04) 0 6px, transparent 6px 12px),
    #10283e;
}

.between-game-panel.press-conference h4 {
  color: #70c8e8;
}

.problem-kicker {
  margin: 0 !important;
  color: #9ad89a !important;
  font-size: 0.7rem !important;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.problem-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.problem-status span {
  padding: 7px;
  color: #dce4d2;
  background: #0b1e30;
  border: 2px solid #07131f;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.problem-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.problem-choice {
  width: 100%;
  min-height: 98px;
  padding: 10px 12px;
  color: var(--text);
  background: #193b58;
  text-align: left;
}

.problem-choice strong,
.problem-choice span,
.problem-choice small {
  display: block;
}

.problem-choice strong {
  color: var(--team-accent);
}

.problem-choice span {
  margin-top: 4px;
  color: #d6dfc7;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: none;
}

.problem-choice small {
  margin-top: 8px;
  padding-top: 7px;
  color: #9ad89a;
  border-top: 2px solid rgba(246, 243, 222, 0.16);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.problem-choice:disabled {
  cursor: not-allowed;
  filter: grayscale(0.75) brightness(0.7);
}

body.between-game-active .overlay {
  inset: 0;
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(10px, 2vw, 22px);
  overflow: hidden;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(5, 14, 23, 0.96), rgba(16, 40, 62, 0.97)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 255, 255, 0.035) 34px 36px);
}

body.between-game-active .overlay > .homepage {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: block;
}

body.between-game-active #gameLibraryButton,
body.between-game-active #homepageHero,
body.between-game-active #loadSavePanel,
body.between-game-active #onboardingPanel,
body.between-game-active #offseasonPanel,
body.between-game-active #startButton,
body.between-game-active #franchiseMainContent > :not(#betweenGamePanel) {
  display: none !important;
}

body.between-game-active #franchiseMainContent {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block !important;
}

body.between-game-active .between-game-panel {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  align-content: stretch;
  gap: clamp(8px, 1.4vh, 14px);
  padding: clamp(18px, 3vw, 40px);
  overflow: auto;
  overscroll-behavior: contain;
  border-width: 6px;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    inset 18px 0 0 rgba(240, 191, 67, 0.12);
}

body.between-game-active .between-game-panel::before {
  content: "!";
  position: absolute;
  z-index: -1;
  right: clamp(18px, 5vw, 60px);
  top: clamp(52px, 8vh, 90px);
  color: rgba(240, 191, 67, 0.075);
  font-size: clamp(11rem, 30vw, 25rem);
  line-height: 0.75;
}

body.between-game-active .between-game-panel.press-conference {
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    inset 18px 0 0 rgba(112, 200, 232, 0.13);
}

body.between-game-active .between-game-panel.press-conference::before {
  content: "PRESS";
  right: 4%;
  top: 12%;
  color: rgba(112, 200, 232, 0.06);
  font-size: clamp(4rem, 12vw, 9rem);
  letter-spacing: -0.08em;
  writing-mode: vertical-rl;
}

body.between-game-active .between-game-panel .module-head {
  padding-bottom: 12px;
  border-bottom: 4px solid rgba(246, 243, 222, 0.15);
}

body.between-game-active .between-game-panel .module-head h3 {
  font-size: clamp(0.95rem, 2vw, 1.35rem);
  letter-spacing: 0.1em;
}

body.between-game-active .between-game-panel .module-head span {
  padding: 7px 10px;
  color: #10263e;
  background: var(--team-accent);
  border: 3px solid var(--line);
  font-size: clamp(0.62rem, 1.4vw, 0.82rem);
}

body.between-game-active .between-game-panel.press-conference .module-head span {
  background: #70c8e8;
}

body.between-game-active .problem-kicker {
  font-size: clamp(0.72rem, 1.5vw, 0.95rem) !important;
}

body.between-game-active .between-game-panel h4 {
  max-width: 18ch;
  font-size: clamp(2rem, 4.4vw, 4.25rem);
  line-height: 0.95;
  text-shadow: 0 5px 0 rgba(5, 12, 19, 0.45);
}

body.between-game-active .between-game-panel > #betweenGameText {
  max-width: 62ch;
  margin: 0;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  line-height: 1.5;
}

body.between-game-active .problem-status {
  align-self: end;
  gap: clamp(7px, 1.4vw, 14px);
}

body.between-game-active .problem-status span {
  padding: clamp(9px, 1.5vw, 15px);
  border-width: 3px;
  font-size: clamp(0.65rem, 1.25vw, 0.82rem);
}

body.between-game-active .problem-choices {
  align-self: stretch;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(8px, 1.5vw, 16px);
}

body.between-game-active .problem-choice {
  min-height: clamp(104px, 14vh, 150px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: stretch;
  padding: clamp(13px, 2vw, 22px);
  border-width: 4px;
  box-shadow: inset 0 -7px 0 rgba(5, 12, 19, 0.25);
}

body.between-game-active .problem-choice:hover,
body.between-game-active .problem-choice:focus-visible {
  color: #10263e;
  background: var(--team-accent);
}

body.between-game-active .press-conference .problem-choice:hover,
body.between-game-active .press-conference .problem-choice:focus-visible {
  background: #70c8e8;
}

body.between-game-active .problem-choice:hover strong,
body.between-game-active .problem-choice:hover span,
body.between-game-active .problem-choice:hover small,
body.between-game-active .problem-choice:focus-visible strong,
body.between-game-active .problem-choice:focus-visible span,
body.between-game-active .problem-choice:focus-visible small {
  color: #10263e;
}

body.between-game-active .problem-choice strong {
  font-size: clamp(0.9rem, 1.8vw, 1.2rem);
}

body.between-game-active .problem-choice span {
  font-size: clamp(0.76rem, 1.3vw, 0.92rem);
  line-height: 1.4;
}

body.between-game-active .problem-choice small {
  font-size: clamp(0.62rem, 1.15vw, 0.76rem);
}

@media (max-width: 620px) {
  .problem-status,
  .problem-choices {
    grid-template-columns: 1fr;
  }

  body.between-game-active .overlay {
    padding: 6px;
  }

  body[data-device="mobile"].between-game-active,
  body[data-device="tablet"].between-game-active,
  body.between-game-active .between-game-panel {
    touch-action: pan-y;
  }

  body.between-game-active .between-game-panel {
    grid-template-rows: auto auto auto auto auto;
    align-content: start;
    gap: 10px;
    padding: 18px 14px;
    border-width: 4px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.05);
  }

  body.between-game-active .between-game-panel h4 {
    font-size: clamp(1.7rem, 10vw, 2.7rem);
  }

  body.between-game-active .problem-choice {
    min-height: 108px;
  }
}

.team-operations {
  display: grid;
  gap: 10px;
}

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

.operation-card {
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #0f2133;
  border: 2px solid #07131f;
}

.operation-card[hidden] {
  display: none !important;
}

.operation-card span,
.operation-card small {
  color: #d6dfc7;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.operation-card strong {
  color: var(--team-accent);
  font-size: 0.92rem;
  text-transform: uppercase;
}

.management-upgrade-card {
  grid-template-rows: auto auto 1fr auto;
}

.management-buy-button {
  width: 100%;
  min-height: 38px;
  margin-top: 5px;
  padding: 7px 8px;
  color: var(--team-primary);
  background: var(--team-accent);
  border: 2px solid #07131f;
  box-shadow: inset 0 -3px 0 rgba(7, 19, 31, 0.26);
  font: 900 0.66rem/1.1 "Trebuchet MS", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.management-buy-button:hover:not(:disabled),
.management-buy-button:focus-visible:not(:disabled) {
  color: var(--team-accent);
  background: var(--team-primary);
  outline: 2px solid var(--team-accent);
  outline-offset: -4px;
}

.management-buy-button:disabled {
  color: #83909a;
  background: #253646;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

.team-operations > p {
  margin: 0;
  padding: 8px;
  background: rgba(226, 187, 79, 0.12);
  border-left: 4px solid var(--team-accent);
  font-size: 0.78rem;
}

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

.career-path-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.career-path-option {
  position: relative;
  display: grid;
  min-height: 118px;
  cursor: pointer;
}

.career-path-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.career-path-option > span {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 12px;
  color: var(--text);
  background: #12273c;
  border: 3px solid var(--line);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.18);
}

.career-path-option strong {
  color: var(--team-accent);
  font-size: 0.76rem;
  line-height: 1.25;
  text-transform: uppercase;
}

.career-path-option small {
  color: #d6dfc7;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.3;
}

.career-path-option input:checked + span {
  color: var(--team-primary);
  background: var(--team-accent);
  box-shadow: inset 0 0 0 3px var(--team-primary), inset 0 -5px 0 rgba(0, 0, 0, 0.18);
}

.career-path-option input:checked + span strong,
.career-path-option input:checked + span small {
  color: var(--team-primary);
}

.career-path-option input:focus-visible + span {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.favorite-team-field {
  margin-bottom: 9px;
}

.career-path-summary {
  margin: 0 0 12px !important;
  padding: 9px 11px;
  color: #dce4d2 !important;
  background: #0b1e30;
  border-left: 4px solid var(--team-accent);
  font-size: 0.76rem !important;
}

.setup-field {
  display: grid;
  gap: 6px;
}

.setup-field[hidden] {
  display: none !important;
}

.setup-field input,
.setup-field select,
.setup-field textarea {
  width: 100%;
  border: 3px solid var(--line);
  background: #12273c;
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  font-size: 0.92rem;
}

.setup-field textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.35;
}

.setup-field select {
  min-height: 46px;
  cursor: pointer;
}

.setup-field input[type="color"] {
  min-height: 48px;
  padding: 4px;
}

@media (max-width: 760px) {
  .career-path-picker {
    grid-template-columns: 1fr;
  }

  .career-path-option {
    min-height: 0;
  }
}

.character-designer {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
  padding: 12px;
  background: #0f2133;
  border: 3px solid var(--line);
}

.character-preview {
  --preview-primary: #f0bf43;
  --preview-secondary: #2e3547;
  --preview-skin: #efc79d;
  --preview-hair: #302218;
  min-height: 118px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: var(--text);
  background: repeating-linear-gradient(0deg, #285d32 0 12px, #34713b 12px 24px);
  border: 3px solid var(--line);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.preview-player {
  position: relative;
  display: block;
  width: 54px;
  height: 78px;
  filter: drop-shadow(4px 4px 0 rgba(4, 10, 16, 0.38));
}

.preview-head,
.preview-hair,
.preview-helmet,
.preview-arm,
.preview-jersey,
.preview-shorts,
.preview-leg {
  position: absolute;
  display: block;
  border: 3px solid #111016;
}

.preview-head {
  z-index: 2;
  left: 16px;
  top: 11px;
  width: 23px;
  height: 20px;
  background: var(--preview-skin);
}

.preview-hair {
  z-index: 3;
  left: 13px;
  top: 6px;
  width: 29px;
  height: 10px;
  background: var(--preview-hair);
}

.preview-helmet {
  z-index: 4;
  left: 9px;
  top: 2px;
  width: 37px;
  height: 18px;
  background: var(--preview-secondary);
  box-shadow: inset 0 -5px 0 var(--preview-hair);
}

.preview-jersey {
  z-index: 2;
  left: 11px;
  top: 30px;
  width: 33px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--preview-secondary);
  background: var(--preview-primary);
  font-size: 0.78rem;
  line-height: 1;
  text-shadow: 1px 1px 0 #111016;
}

.preview-arm {
  z-index: 1;
  top: 33px;
  width: 12px;
  height: 27px;
  background: var(--preview-skin);
}

.preview-arm-left {
  left: 2px;
}

.preview-arm-right {
  right: 1px;
}

.preview-shorts {
  z-index: 2;
  left: 13px;
  top: 54px;
  width: 29px;
  height: 12px;
  background: var(--preview-secondary);
}

.preview-leg {
  top: 63px;
  width: 11px;
  height: 15px;
  background: var(--preview-skin);
}

.preview-leg-left {
  left: 13px;
}

.preview-leg-right {
  right: 12px;
}

body[data-game="soccer"] .preview-helmet,
body[data-game="basketball"] .preview-helmet,
body[data-game="water-polo"] .preview-helmet {
  display: none;
}

.character-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

@media (max-width: 640px) {
  .character-designer {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
  }

  .character-fields {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .character-preview {
    min-height: 154px;
  }

  .character-fields .setup-field input {
    min-height: 38px;
    padding-block: 5px;
  }
}

.schedule-list {
  display: grid;
  gap: 8px;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: rgba(12, 25, 38, 0.72);
  border: 2px solid rgba(11, 21, 32, 0.9);
}

.schedule-item.active {
  border-color: var(--team-accent);
  background: rgba(226, 187, 79, 0.16);
}

.schedule-item.complete {
  background: rgba(77, 133, 84, 0.18);
}

.schedule-item.win {
  border-color: rgba(88, 176, 98, 0.95);
  background: rgba(64, 143, 73, 0.28);
}

.schedule-item.loss {
  border-color: rgba(188, 67, 67, 0.95);
  background: rgba(132, 41, 41, 0.28);
}

.schedule-week,
.schedule-result {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: #d5dfcd;
}

.schedule-item.win .schedule-result {
  color: #92e08d;
}

.schedule-item.loss .schedule-result {
  color: #ff9f9f;
}

.schedule-opponent {
  font-size: 0.92rem;
  color: var(--text);
  text-transform: uppercase;
}

.runner-feature strong {
  display: block;
  font-size: 1.02rem;
  color: var(--team-accent);
  text-transform: uppercase;
}

.runner-select {
  padding: 14px;
  text-align: left;
}

.runner-select-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 12px;
}

.runner-select-head h3 {
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
}

.runner-select-head p {
  max-width: none;
  color: #d9e4cf;
  font-size: 0.85rem;
}

.runner-grid {
  display: grid;
  gap: 10px;
}

.upgrade-actions {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.upgrade-button {
  width: 100%;
  text-align: left;
  background: #173049;
  color: var(--text);
}

.upgrade-button strong {
  display: block;
  color: var(--team-accent);
  text-transform: uppercase;
}

.upgrade-button span {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #d6dfc7;
  text-transform: uppercase;
}

#startButton:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.7);
}

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

.runner-card {
  width: 100%;
  text-align: left;
  border: 3px solid var(--line);
  background: #19324a;
  color: var(--text);
  padding: 12px;
  display: grid;
  gap: 8px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.14);
}

.runner-card.selected {
  background: linear-gradient(180deg, rgba(226, 187, 79, 0.32), rgba(25, 50, 74, 0.96));
  border-color: var(--team-accent);
}

.runner-card.injured {
  opacity: 0.62;
  cursor: not-allowed;
  filter: grayscale(0.45);
  border-color: #c94d45;
  background: #35232c;
}

.runner-card:disabled:not(.injured) {
  cursor: default;
}

.runner-card .runner-health {
  padding-top: 7px;
  color: #9ad89a;
  border-top: 2px solid rgba(246, 243, 222, 0.18);
  font-weight: 900;
}

.runner-card.injured .runner-health {
  color: #ff9b8f;
}

.runner-card .runner-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.runner-card strong {
  font-size: 0.95rem;
  color: var(--team-accent);
  text-transform: uppercase;
}

.runner-card span {
  font-size: 0.72rem;
  color: #d6dfc7;
  text-transform: uppercase;
}

.runner-card .runner-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
}

.runner-card .runner-morale {
  padding: 5px 7px;
  background: #10263a;
  border-left: 4px solid #d6dfc7;
  font-weight: 900;
}

.runner-card .runner-morale.high,
.runner-morale-mood.high {
  color: #9ad89a;
  border-color: #68b878;
}

.runner-card .runner-morale.low,
.runner-morale-mood.low {
  color: #ff9b8f;
  border-color: #c94d45;
}

.runner-morale-strip {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  color: #d6dfc7;
  background: #0f2133;
  border: 2px solid #07131f;
  text-transform: uppercase;
}

.runner-morale-strip span,
.runner-morale-strip small {
  font-size: 0.7rem;
  font-weight: 900;
}

.runner-morale-strip strong {
  color: var(--team-accent);
}

body[data-device="mobile"] .runner-card.selected .runner-power-stat {
  padding: 4px 3px;
  color: var(--team-accent);
  background: #0f2235;
  outline: 2px solid var(--team-accent);
  outline-offset: -2px;
  cursor: pointer;
}

button {
  border: 3px solid var(--line);
  padding: 12px 20px;
  font: inherit;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: #1d1607;
  background: var(--accent);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

button:hover {
  filter: brightness(1.04);
}

button:active {
  transform: translateY(1px);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.16);
}

.secondary-button {
  background: #29445f;
  color: var(--text);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 980px) {
  .game-shell {
    width: min(100vw - 20px, 920px);
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "play"
      "info";
  }

  .game-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .game-library {
    padding: 14px;
    gap: 14px;
  }

  .game-select-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "art"
      "copy"
      "play";
  }

  .game-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .featured-game-card {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "art"
      "copy"
      "play";
  }

  .featured-game-card .game-card-art {
    min-height: 168px;
    border-right: 0;
    border-bottom: 4px solid var(--line);
  }

  .featured-game-card .game-card-copy {
    padding: 14px 12px 9px;
  }

  .featured-game-card .game-card-copy strong {
    font-size: clamp(1.25rem, 7vw, 1.8rem);
  }

  .featured-game-card .game-card-copy > span:last-child {
    display: block;
    font-size: 0.78rem;
  }

  .game-card-art {
    min-height: 154px;
    border-right: 0;
    border-bottom: 4px solid var(--line);
  }

  .game-sport-badge {
    bottom: 7px;
    width: 78px;
    height: 56px;
    filter: drop-shadow(4px 4px 0 rgba(6, 13, 20, 0.48));
  }

  .hockey-sport-badge .mini-hockey-stick {
    left: 23px;
    top: 8px;
    width: 6px;
    height: 35px;
  }

  .hockey-sport-badge .mini-hockey-stick::after {
    bottom: -3px;
    width: 16px;
    height: 6px;
  }

  .hockey-sport-badge .mini-hockey-puck {
    left: 61%;
    top: 65%;
    width: 18px;
    height: 7px;
    border-width: 2px;
  }

  .game-icon-speed {
    left: 9px;
    top: 20px;
    width: 13px;
    height: 4px;
    box-shadow: -4px -8px 0 -1px var(--text), 2px 8px 0 -1px var(--text);
  }

  .soccer-sport-badge .game-icon-speed {
    right: 9px;
    box-shadow: 4px -8px 0 -1px #8fe0a0, -2px 8px 0 -1px #8fe0a0;
  }

  .mini-football {
    width: 38px;
    height: 24px;
    border-width: 3px;
  }

  .mini-football::after {
    left: 8px;
    top: 7px;
    width: 15px;
    height: 3px;
  }

  .mini-soccer-ball {
    width: 29px;
    height: 29px;
    border-width: 3px;
  }

  .mini-soccer-ball::after {
    left: 7px;
    top: 6px;
    width: 7px;
    height: 7px;
    box-shadow: -5px 8px 0 -1px #111016, 8px 7px 0 -1px #111016;
  }

  .mini-basketball {
    width: 29px;
    height: 29px;
    border-width: 3px;
  }

  .mini-water-polo-ball {
    width: 28px;
    height: 28px;
    border-width: 3px;
  }

  .mini-water-polo-ball::after {
    left: 11px;
    height: 18px;
  }

  .mini-water-polo-cap {
    left: 11px;
    top: 17px;
    width: 25px;
    height: 18px;
    border-width: 3px;
  }

  .mini-basketball::before {
    left: 11px;
    height: 23px;
  }

  .mini-basketball::after {
    top: 11px;
    width: 23px;
  }

  .mini-field {
    inset: 74px 0 0;
  }

  .stadium-lights {
    inset: 10px 8px auto;
  }

  .mini-scoreboard {
    top: 36px;
  }

  .game-card-copy {
    gap: 7px;
    padding: 11px 6px 7px;
  }

  .game-card-copy strong {
    font-size: clamp(0.82rem, 4vw, 1.12rem);
    overflow-wrap: normal;
  }

  .game-card-tag {
    font-size: 0.56rem;
    letter-spacing: 0.06em;
  }

  .game-card-copy > span:last-child {
    display: none;
  }

  .play-game-label {
    margin: 0 6px 8px;
    padding: 9px 7px;
    font-size: 0;
  }

  .play-game-label::after {
    content: "Play";
    font-size: 0.68rem;
  }

  .play-panel::before {
    margin-left: -10px;
    margin-right: -10px;
  }

  .play-panel {
    padding: 10px;
  }

  .canvas-frame {
    padding: 8px;
  }

  .franchise-card {
    grid-template-columns: 1fr;
  }

  .season-strip,
  .franchise-dashboard,
  .setup-grid,
  .homepage-actions {
    grid-template-columns: 1fr;
  }
}

body[data-device="mobile"] .hockey-sport-badge .mini-hockey-stick {
  left: 23px;
  top: 8px;
  width: 6px;
  height: 35px;
}

body[data-device="mobile"] .hockey-sport-badge .mini-hockey-stick::after {
  bottom: -3px;
  width: 16px;
  height: 6px;
}

body[data-device="mobile"] .hockey-sport-badge .mini-hockey-puck {
  left: 61%;
  top: 65%;
  width: 18px;
  height: 7px;
  border-width: 2px;
}

body[data-device="tablet"] .game-shell {
  width: calc(100vw - 20px);
  height: 100dvh;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0 12px;
}

body[data-device="tablet"] .top-title h1 {
  font-size: clamp(2rem, 4.3vw, 3.3rem);
}

body[data-device="tablet"] .play-panel {
  padding: 10px;
}

body[data-device="tablet"] .canvas-frame {
  padding: 8px;
}

body[data-device="tablet"] canvas {
  width: min(100%, calc((100dvh - 140px) * 0.75));
}

body[data-device="tablet"] .homepage {
  width: min(100%, 500px);
}

body[data-device="tablet"] .franchise-dashboard {
  grid-template-columns: 1fr;
}

body[data-device="tablet"] .keyboard-instructions,
body[data-device="mobile"] .keyboard-instructions {
  display: none;
}

body[data-device="tablet"] .touch-instructions,
body[data-device="mobile"] .touch-instructions {
  display: block;
}

body[data-device="laptop"] .game-shell {
  width: min(1420px, calc(100vw - 28px));
  height: 100dvh;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0 14px;
}

body[data-device="laptop"] .top-title h1 {
  font-size: clamp(2.15rem, 3.4vw, 3.5rem);
}

body[data-device="laptop"] .play-panel {
  padding: 10px;
}

body[data-device="laptop"] .canvas-frame {
  padding: 8px;
}

body[data-device="laptop"] canvas {
  width: auto;
  height: min(100%, calc(100dvh - 132px));
  max-width: 100%;
}

body[data-device="desktop"] #gameCanvas {
  width: auto;
  height: min(100%, calc(100dvh - 132px));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 3 / 4;
}

body[data-device="laptop"] .homepage {
  width: min(100%, 520px);
}

body[data-device="laptop"] .franchise-dashboard {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .game-shell {
  width: calc(100vw - 12px);
  height: 100dvh;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "play";
  gap: 8px;
  padding: 8px 0;
}

body[data-device="mobile"].game-library-open .game-shell {
  grid-template-areas:
    "title"
    "library";
}

body[data-device="mobile"] .game-library {
  grid-area: library;
  grid-column: 1;
  grid-row: 2;
}

body[data-device="mobile"] .library-header h2 {
  font-size: clamp(1.45rem, 7vw, 2rem);
}

body[data-device="mobile"] .library-header > p:last-child {
  font-size: 0.82rem;
}

body[data-device="mobile"] .info-panel {
  display: none;
}

body[data-device="mobile"] .top-title h1 {
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  padding: 2px 10px 0;
}

body[data-device="mobile"] .play-panel {
  padding: 8px;
}

body[data-device="mobile"] .play-panel::before {
  margin: -8px -8px 8px;
}

body[data-device="mobile"] .canvas-frame {
  padding: 6px;
}

body[data-device="mobile"] canvas {
  width: auto;
  height: min(100%, calc(100dvh - 120px));
  max-width: 100%;
}

body[data-device="mobile"] .overlay {
  inset: 6px;
  padding: 14px;
}

body[data-device="mobile"] .field-goal-panel {
  inset: 6px;
  padding: 8px;
}

body[data-device="mobile"] .field-goal-card {
  gap: 9px;
  padding: 12px;
}

body[data-device="mobile"] .field-goal-scene {
  height: 112px;
}

body[data-device="mobile"] .field-goal-instructions {
  display: none;
}

body[data-device="mobile"] .tutorial-panel {
  inset: 6px;
  padding: 8px;
}

body[data-device="mobile"] .tutorial-card {
  gap: 9px;
  padding: 12px;
}

body[data-device="mobile"] .tutorial-playbook {
  height: 72px;
}

body[data-device="mobile"] .tutorial-list li {
  padding-block: 6px;
  font-size: 0.76rem;
}

body[data-device="mobile"] .homepage {
  width: min(100%, 440px);
  gap: 10px;
}

body[data-device="mobile"] .season-strip,
body[data-device="mobile"] .franchise-dashboard,
body[data-device="mobile"] .franchise-card {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .account-strip {
  flex-wrap: wrap;
  gap: 5px;
}

body[data-device="mobile"] .community-card {
  width: min(100%, 520px);
  max-height: calc(100dvh - 16px);
  padding: 11px;
}

body[data-device="mobile"] .community-messages {
  height: min(38vh, 300px);
}

body[data-device="mobile"] .community-mode-switch {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-device="mobile"] .community-mode-switch button {
  min-width: 0;
  padding-inline: 4px;
  font-size: 0.6rem;
}

body[data-device="mobile"] .community-follow-form,
body[data-device="mobile"] .community-social-groups {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .community-social-groups {
  max-height: none;
}

body[data-device="mobile"] .friend-chat-layout {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .friend-conversation-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 125px;
}

body[data-device="mobile"] .friend-messages {
  height: min(30vh, 230px);
}

body[data-device="mobile"] #cloudSyncStatus {
  flex-basis: 100%;
  text-align: center;
}

body[data-device="mobile"] .leaderboard-card {
  width: 100%;
  padding: 11px;
}

body[data-device="mobile"] .leaderboard-clock,
body[data-device="mobile"] .postgame-score-grid {
  grid-template-columns: 1fr;
}

body[data-device="mobile"] .leaderboard-clock > div {
  grid-row: auto;
}

body[data-device="mobile"] .leaderboard-head {
  flex-wrap: wrap;
  align-items: flex-start;
}

body[data-device="mobile"] .leaderboard-clock > *,
body[data-device="mobile"] #leaderboardQueueStatus {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-device="mobile"] .runner-grid {
  gap: 8px;
}

body[data-device="mobile"][data-orientation="landscape"] .game-shell {
  width: calc(100vw - 10px);
  gap: 6px;
  padding: 6px 0;
}

body[data-device="mobile"][data-orientation="landscape"] .game-library {
  gap: 6px;
  padding: 7px;
}

body[data-device="mobile"][data-orientation="landscape"] .library-header > p:last-child,
body[data-device="mobile"][data-orientation="landscape"] .game-card-tag {
  display: none;
}

body[data-device="mobile"][data-orientation="landscape"] .library-header h2 {
  margin: 2px 0;
  font-size: 1.25rem;
}

body[data-device="mobile"][data-orientation="landscape"] .game-card-art {
  min-height: 82px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-field {
  inset: 52px 0 0;
}

body[data-device="mobile"][data-orientation="landscape"] .stadium-lights {
  display: none;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-scoreboard {
  top: 13px;
  left: 27%;
  max-width: 38%;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-device="mobile"][data-orientation="landscape"] .game-sport-badge {
  left: 73%;
  bottom: 5px;
  width: 62px;
  height: 48px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-football {
  width: 32px;
  height: 20px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-football::after {
  left: 7px;
  top: 6px;
  width: 12px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-soccer-ball {
  width: 25px;
  height: 25px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-basketball {
  width: 25px;
  height: 25px;
}

body[data-device="mobile"][data-orientation="landscape"] .mini-water-polo-ball {
  width: 24px;
  height: 24px;
}

body[data-device="mobile"][data-orientation="landscape"] .game-card-copy {
  padding: 7px 8px 5px;
}

body[data-device="mobile"][data-orientation="landscape"] .play-game-label {
  margin: 0 8px 7px;
  padding: 6px;
}

body[data-device="mobile"][data-orientation="landscape"] .top-title h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
}

body[data-device="mobile"][data-orientation="landscape"] canvas {
  height: min(100%, calc(100dvh - 76px));
}

body[data-device="mobile"][data-orientation="landscape"] .field-goal-card {
  grid-template-columns: minmax(120px, 0.8fr) minmax(190px, 1.2fr);
  gap: 7px 12px;
}

body[data-device="mobile"][data-orientation="landscape"] .field-goal-header {
  grid-column: 1 / -1;
}

body[data-device="mobile"][data-orientation="landscape"] .field-goal-scene {
  grid-column: 1;
  grid-row: 2 / span 4;
  height: auto;
  min-height: 170px;
}

body[data-device="mobile"][data-orientation="landscape"] .kick-meter,
body[data-device="mobile"][data-orientation="landscape"] .static-kick-controls,
body[data-device="mobile"][data-orientation="landscape"] .field-goal-status,
body[data-device="mobile"][data-orientation="landscape"] #fieldGoalActionButton {
  grid-column: 2;
}

body[data-device="mobile"][data-orientation="landscape"] .tutorial-card {
  grid-template-columns: 120px minmax(220px, 1fr);
  gap: 6px 10px;
}

body[data-device="mobile"][data-orientation="landscape"] .tutorial-header,
body[data-device="mobile"][data-orientation="landscape"] .tutorial-actions {
  grid-column: 1 / -1;
}

body[data-device="mobile"][data-orientation="landscape"] .tutorial-playbook {
  grid-column: 1;
  grid-row: 2 / span 4;
  height: auto;
  min-height: 150px;
}

body[data-device="mobile"][data-orientation="landscape"] .tutorial-card > h2,
body[data-device="mobile"][data-orientation="landscape"] .tutorial-card > p,
body[data-device="mobile"][data-orientation="landscape"] .tutorial-list,
body[data-device="mobile"][data-orientation="landscape"] .tutorial-dots {
  grid-column: 2;
}

body.game-library-open .game-shell {
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "title"
    "library";
}

body.game-library-open .game-library {
  grid-area: library;
  grid-column: 1;
  grid-row: 2;
}

/* Seasonal builds use one shared arcade engine with a deployment-selected theme. */
.seasonal-game-shelf {
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.seasonal-game-shelf[hidden] {
  display: none !important;
}

.seasonal-select-card {
  --seasonal-accent: #d9473f;
  --seasonal-secondary: #f3cf58;
  --seasonal-sky: #132c4a;
  --seasonal-ground: #dcecf2;
  min-height: 220px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(230px, 1.1fr);
  grid-template-areas:
    "scene copy"
    "scene play";
  color: var(--text);
  background: #14283f;
  border: 5px solid #090f17;
  overflow: hidden;
  text-align: left;
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.05),
    0 9px 0 rgba(6, 13, 20, 0.42);
}

.seasonal-select-card:hover,
.seasonal-select-card:focus-visible {
  border-color: var(--seasonal-accent);
  background: color-mix(in srgb, var(--seasonal-accent) 18%, #14283f);
  box-shadow:
    inset 0 0 0 4px var(--seasonal-accent),
    0 9px 0 rgba(6, 13, 20, 0.42);
}

.seasonal-select-card:focus-visible {
  outline: 4px solid var(--text);
  outline-offset: 5px;
}

.seasonal-featured-card {
  grid-column: 1 / -1;
  min-height: 310px;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
}

.seasonal-card-scene {
  grid-area: scene;
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 82px, rgba(255, 255, 255, 0.08) 82px 86px),
    linear-gradient(180deg, var(--seasonal-sky) 0 48%, var(--seasonal-ground) 48% 100%);
  border-right: 4px solid var(--line);
}

.seasonal-featured-card .seasonal-card-scene {
  min-height: 310px;
}

.seasonal-card-moon {
  position: absolute;
  top: 30px;
  right: 12%;
  width: 62px;
  height: 62px;
  background: var(--seasonal-secondary);
  border: 5px solid #0b1520;
  box-shadow: 9px 9px 0 rgba(8, 15, 22, 0.35);
}

.seasonal-card-track {
  position: absolute;
  inset: 48% 0 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(9, 15, 23, 0.23) 74px 80px),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(255, 255, 255, 0.22) 44px 48px);
}

.seasonal-card-sprite {
  position: absolute;
  left: 22%;
  bottom: 32px;
  width: 104px;
  height: 82px;
  display: grid;
  place-items: center;
  color: #0b1520;
  background: var(--seasonal-accent);
  border: 6px solid #0b1520;
  box-shadow:
    inset 0 0 0 6px var(--seasonal-secondary),
    10px 10px 0 rgba(8, 15, 22, 0.38);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
}

.seasonal-card-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--seasonal-secondary);
  box-shadow: 0 0 0 4px rgba(11, 21, 32, 0.35);
}

.seasonal-card-spark.spark-one { left: 14%; top: 24%; }
.seasonal-card-spark.spark-two { left: 47%; top: 18%; width: 8px; height: 8px; }
.seasonal-card-spark.spark-three { right: 18%; bottom: 26%; }

.seasonal-card-copy {
  grid-area: copy;
  align-content: center;
  display: grid;
  gap: 10px;
  padding: 24px 24px 12px;
}

.seasonal-card-tag {
  color: var(--seasonal-accent);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.seasonal-card-copy strong {
  color: var(--text);
  font-size: clamp(1.4rem, 3vw, 2.35rem);
  line-height: 1;
  text-transform: uppercase;
}

.seasonal-card-copy > span:last-child {
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.35;
}

.seasonal-featured-card .seasonal-card-copy {
  padding: 34px 30px 20px;
}

.seasonal-featured-card .seasonal-card-copy strong {
  font-size: clamp(2.25rem, 5vw, 4.1rem);
}

.seasonal-select-card .play-game-label {
  grid-area: play;
  color: #0b1520;
  background: var(--seasonal-accent);
}

.seasonal-game-screen {
  --seasonal-accent: #d9473f;
  --seasonal-secondary: #f3cf58;
  --seasonal-sky: #132c4a;
  --seasonal-ground: #dcecf2;
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 8;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 12px, transparent 12px 24px),
    #102236;
  border: 4px solid var(--line);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    0 10px 0 rgba(8, 15, 22, 0.35);
  overflow: auto;
}

.seasonal-game-screen[hidden] {
  display: none !important;
}

body.seasonal-game-open .game-library,
body.seasonal-game-open .info-panel,
body.seasonal-game-open .play-panel {
  display: none !important;
}

.seasonal-game-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  width: min(100%, 1060px);
  margin: 0 auto;
  padding: 10px 12px;
  background: #172f49;
  border: 4px solid #0a1420;
}

.seasonal-game-header > div:nth-child(2) {
  min-width: 0;
  text-align: center;
}

.seasonal-game-header h2 {
  margin: 0;
  color: var(--seasonal-accent);
  font-size: clamp(1.15rem, 3vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
}

.seasonal-game-header .library-kicker {
  margin: 0 0 5px;
  color: var(--seasonal-secondary);
}

.seasonal-best-box {
  min-width: 86px;
  padding: 8px 12px;
  color: #0b1520;
  background: var(--seasonal-secondary);
  border: 4px solid #0a1420;
  text-align: center;
}

.seasonal-best-box span,
.seasonal-best-box strong {
  display: block;
}

.seasonal-best-box span {
  font-size: 0.68rem;
  text-transform: uppercase;
}

.seasonal-game-body {
  width: min(100%, 1060px);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(250px, 320px);
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.seasonal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #08111b;
  border: 5px solid #070d14;
}

#seasonalCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  image-rendering: pixelated;
  touch-action: none;
}

.seasonal-run-panel {
  min-width: 0;
  align-self: stretch;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  color: #f6f3de;
}

.seasonal-route-card,
.seasonal-controls-card {
  padding: 14px;
  background: #172f49;
  border: 4px solid #08111b;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);
}

.seasonal-panel-label {
  display: block;
  margin-bottom: 7px;
  color: var(--seasonal-secondary);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.seasonal-route-card > strong {
  display: block;
  color: var(--seasonal-accent);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.1;
  text-transform: uppercase;
}

.seasonal-route-card > p {
  margin: 10px 0 0;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
}

.seasonal-route-track {
  position: relative;
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.seasonal-route-track::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 14px;
  width: 4px;
  background: #0a1420;
}

.seasonal-route-stop {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: #8292a0;
}

.seasonal-route-stop b {
  width: 32px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #dce4d2;
  background: #0d1d2d;
  border: 3px solid #08111b;
  font-size: 0.68rem;
}

.seasonal-route-stop em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.seasonal-route-stop.current {
  color: #f6f3de;
}

.seasonal-route-stop.current b {
  color: #08111b;
  background: var(--seasonal-accent);
}

.seasonal-route-stop.complete b {
  color: #08111b;
  background: var(--seasonal-secondary);
}

.seasonal-hud {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  pointer-events: none;
}

.seasonal-hud span {
  box-sizing: border-box;
  min-height: 58px;
  padding: 9px 6px;
  display: grid;
  place-items: center;
  color: #f6f3de;
  background: #0d1d2d;
  border: 3px solid #07101a;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  text-align: center;
  text-transform: uppercase;
}

.seasonal-overlay {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(500px, calc(100% - 30px));
  translate: -50% -50%;
  padding: clamp(16px, 3vw, 28px);
  color: var(--text);
  background: #13283f;
  border: 5px solid #080f17;
  box-shadow:
    inset 0 0 0 5px var(--seasonal-accent),
    12px 12px 0 rgba(4, 9, 14, 0.48);
  text-align: center;
}

.seasonal-overlay[hidden] {
  display: none !important;
}

.seasonal-overlay-kicker {
  margin: 0 0 8px;
  color: var(--seasonal-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.seasonal-overlay h3 {
  margin: 0 0 12px;
  color: var(--seasonal-accent);
  font-size: clamp(1.5rem, 5vw, 2.7rem);
  text-transform: uppercase;
}

.seasonal-overlay p:not(.seasonal-overlay-kicker) {
  margin: 0 auto 18px;
  max-width: 44ch;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 800;
  line-height: 1.45;
}

.seasonal-overlay button {
  color: #0a1420;
  background: var(--seasonal-accent);
}

.seasonal-control-note {
  margin: 0;
  color: #dce4d2;
  font-family: "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: left;
}

@media (max-width: 980px) {
  .seasonal-game-shelf {
    grid-template-columns: 1fr;
  }

  .seasonal-featured-card,
  .seasonal-select-card {
    grid-column: auto;
    grid-template-columns: minmax(0, 0.9fr) minmax(210px, 1.1fr);
    min-height: 230px;
  }

  .seasonal-featured-card .seasonal-card-scene,
  .seasonal-card-scene {
    min-height: 230px;
  }

  .seasonal-featured-card .seasonal-card-copy strong {
    font-size: clamp(1.7rem, 5vw, 2.7rem);
  }

  .seasonal-game-body {
    width: min(100%, 720px);
    grid-template-columns: 1fr;
    align-content: start;
  }

  .seasonal-run-panel {
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
    grid-template-rows: auto auto;
  }

  .seasonal-route-card {
    grid-row: 1 / span 2;
  }

  .seasonal-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .seasonal-hud span {
    min-height: 46px;
  }
}

@media (max-width: 620px) {
  .seasonal-select-card,
  .seasonal-featured-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "scene"
      "copy"
      "play";
  }

  .seasonal-card-scene,
  .seasonal-featured-card .seasonal-card-scene {
    min-height: 190px;
    border-right: 0;
    border-bottom: 4px solid var(--line);
  }

  .seasonal-game-screen {
    padding: 8px;
    gap: 7px;
  }

  .seasonal-game-header {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    padding: 6px;
  }

  .seasonal-best-box {
    display: none;
  }

  .seasonal-back-button {
    padding-inline: 10px;
    font-size: 0.7rem;
  }

  .seasonal-game-body {
    gap: 7px;
  }

  .seasonal-stage {
    border-width: 3px;
  }

  .seasonal-run-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 5px;
  }

  .seasonal-route-card {
    grid-row: auto;
    padding: 8px;
  }

  .seasonal-route-card > strong {
    font-size: 0.86rem;
  }

  .seasonal-route-card > p,
  .seasonal-panel-label {
    display: none;
  }

  .seasonal-route-track {
    margin-top: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .seasonal-route-track::before {
    inset: 11px 10% auto;
    width: 80%;
    height: 3px;
  }

  .seasonal-route-stop {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2px;
  }

  .seasonal-route-stop b {
    width: 28px;
    height: 22px;
  }

  .seasonal-route-stop em {
    width: 100%;
    font-size: 0.5rem;
    text-align: center;
  }

  .seasonal-hud {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .seasonal-hud span {
    min-height: 34px;
    padding: 5px 3px;
    border-width: 2px;
    font-size: 0.58rem;
  }

  .seasonal-controls-card {
    display: none;
  }

  .seasonal-overlay {
    padding: 12px;
    border-width: 3px;
    box-shadow:
      inset 0 0 0 3px var(--seasonal-accent),
      7px 7px 0 rgba(4, 9, 14, 0.48);
  }

  .seasonal-overlay-kicker {
    margin-bottom: 4px;
    font-size: 0.58rem;
  }

  .seasonal-overlay h3 {
    margin-bottom: 7px;
    font-size: clamp(1.1rem, 7vw, 1.7rem);
  }

  .seasonal-overlay p:not(.seasonal-overlay-kicker) {
    margin-bottom: 9px;
    font-size: 0.72rem;
    line-height: 1.25;
  }

  .seasonal-overlay button {
    padding: 8px 12px;
    font-size: 0.72rem;
  }
}

@media (max-height: 560px) and (orientation: landscape) {
  .seasonal-game-screen {
    padding: 6px;
    gap: 6px;
    overflow: hidden;
  }

  .seasonal-game-header {
    padding: 4px 6px;
  }

  .seasonal-game-header h2 {
    font-size: 1rem;
  }

  .seasonal-game-header .library-kicker {
    display: none;
  }

  .seasonal-game-body {
    width: min(100%, 690px);
    height: 100%;
    grid-template-columns: minmax(0, calc((100vh - 180px) * 1.5)) 220px;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .seasonal-stage {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  #seasonalCanvas {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .seasonal-run-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .seasonal-route-card {
    grid-row: auto;
  }

  .seasonal-route-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .seasonal-route-track::before,
  .seasonal-route-stop em,
  .seasonal-controls-card,
  .seasonal-route-card > p,
  .seasonal-panel-label {
    display: none;
  }

  .seasonal-route-stop {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .seasonal-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seasonal-hud span {
    min-height: 34px;
  }
}

/* Holiday games share the same shell proportions as the regular arcade games. */
.seasonal-game-screen {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.seasonal-game-body {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  grid-template-areas: "seasonal-info seasonal-play";
  align-items: stretch;
  gap: 18px;
}

.seasonal-run-panel {
  grid-area: seasonal-info;
  min-width: 0;
  min-height: 0;
  display: block;
  overflow: hidden;
}

.seasonal-sidebar-title {
  padding: 16px;
  background: var(--panel-2);
  border: 3px solid var(--line);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.04);
  text-align: center;
}

.seasonal-sidebar-title .library-kicker {
  margin: 0 0 7px;
  color: var(--seasonal-secondary);
}

.seasonal-sidebar-title h2 {
  color: var(--seasonal-accent);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1;
  text-transform: uppercase;
}

.seasonal-scoreboard {
  margin-top: 18px;
}

.seasonal-scoreboard .score-card strong {
  overflow: hidden;
  color: var(--seasonal-accent);
  font-size: 0.92rem;
  text-overflow: ellipsis;
}

.seasonal-status-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.seasonal-status-row .status-pill strong {
  color: var(--seasonal-secondary);
}

.seasonal-instructions {
  padding: 14px;
}

.seasonal-instructions #seasonalFinaleValue {
  color: var(--seasonal-secondary);
}

.seasonal-route-track {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.seasonal-route-track::before {
  display: none;
}

.seasonal-route-stop {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 3px;
}

.seasonal-route-stop b {
  width: 28px;
  height: 24px;
}

.seasonal-route-stop em {
  width: 100%;
  font-size: 0.5rem;
  text-align: center;
}

.seasonal-back-button {
  width: 100%;
  margin-top: 14px;
}

.seasonal-stage.play-panel {
  grid-area: seasonal-play;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  overflow: hidden;
}

body.seasonal-game-open .seasonal-stage.play-panel {
  display: flex !important;
}

body.seasonal-game-open .seasonal-run-panel {
  display: block !important;
}

.seasonal-stage.play-panel::before {
  position: absolute;
  inset: 0 0 auto;
  margin: 0;
}

#seasonalCanvas {
  display: block;
  width: min(100%, 760px, calc((100dvh - 160px) * 0.75));
  height: auto;
  max-height: none;
  aspect-ratio: 3 / 4;
  border: 6px solid #09080d;
  background: #254529;
}

.seasonal-overlay {
  width: min(440px, calc(100% - 34px));
}

body[data-device="tablet"] .seasonal-game-body {
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 12px;
}

body[data-device="laptop"] .seasonal-game-body {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 14px;
}

body[data-device="tablet"] .seasonal-stage.play-panel,
body[data-device="laptop"] .seasonal-stage.play-panel {
  padding: 10px;
}

body[data-device="tablet"] #seasonalCanvas {
  width: min(100%, calc((100dvh - 160px) * 0.75));
  height: auto;
}

body[data-device="laptop"] #seasonalCanvas {
  width: min(100%, calc((100dvh - 150px) * 0.75));
  height: auto;
}

body[data-device="mobile"] .seasonal-game-body {
  grid-template-columns: 1fr;
  grid-template-areas: "seasonal-play";
  gap: 0;
}

body[data-device="mobile"] .seasonal-run-panel {
  display: none !important;
}

body[data-device="mobile"] .seasonal-stage.play-panel {
  padding: 8px;
}

body[data-device="mobile"] #seasonalCanvas {
  width: min(100%, calc((100dvh - 120px) * 0.75));
  height: auto;
}

@media (max-width: 980px) and (min-width: 641px) {
  .seasonal-game-body {
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-areas: "seasonal-info seasonal-play";
  }
}

@media (max-width: 640px) {
  .seasonal-game-body {
    grid-template-columns: 1fr;
    grid-template-areas: "seasonal-play";
  }

  .seasonal-run-panel {
    display: none !important;
  }

  .seasonal-stage.play-panel {
    padding: 8px;
  }

  #seasonalCanvas {
    width: min(100%, calc((100dvh - 120px) * 0.75));
    height: auto;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.seasonal-scoreboard .score-card strong {
  font-size: 1.12rem;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.seasonal-overlay .seasonal-back-button {
  width: auto;
  margin: 0 0 14px;
  justify-self: start;
}

.seasonal-challenge-panel {
  --team-accent: var(--seasonal-accent);
}

.seasonal-challenge-scene {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(246, 243, 222, 0.08) 46px 49px),
    linear-gradient(180deg, #557fa6 0 42%, #2c6736 42% 100%);
}

#seasonalChallengeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.seasonal-challenge-target {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 18%;
  width: 42%;
  height: 48%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  color: #0b1520;
  background: var(--seasonal-secondary);
  border: 6px solid var(--seasonal-accent);
  box-shadow: inset 0 0 0 4px #f6f3de;
  font-size: clamp(0.7rem, 2vw, 1rem);
  text-transform: uppercase;
}

.seasonal-challenge-token {
  background: var(--seasonal-accent);
  border-radius: 0;
}

.seasonal-challenge-target,
.seasonal-challenge-token {
  display: none;
}

.seasonal-challenge-scene .kick-aim-marker {
  z-index: 5;
}