:root {
  color-scheme: dark;
  --ink: #0a1017;
  --panel: #111b23;
  --line: rgba(225, 239, 239, 0.14);
  --text: #f4f5ee;
  --muted: #9ca9ae;
  --accent: #7197b9;
  --away: #6faed0;
  font-family:
    Inter, "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic",
    sans-serif;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  color: var(--text);
}
button,
select {
  font: inherit;
}
button {
  border: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
button {
  touch-action: manipulation;
}
button,
select {
  transition:
    background 0.16s,
    color 0.16s,
    transform 0.16s,
    opacity 0.16s;
}
button:hover {
  color: var(--accent);
}
button:active {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p {
  margin: 0;
}
#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 55% 47%,
    transparent 48%,
    rgba(0, 8, 14, 0.22)
  );
  z-index: 1;
}
kbd,
.keycap {
  font: 500 10px/1.4 inherit;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: inherit;
  white-space: nowrap;
}
kbd {
  font-size: 11px;
}
select {
  display: block;
  width: 100%;
  height: 43px;
  margin-top: 9px;
  border: 1px solid var(--line);
  background: #182129;
  color: #edf1ee;
  padding: 0 32px 0 12px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
select:hover {
  background: #202d35;
  border-color: #81918d;
}
select option {
  background: #17212a;
}
label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
svg {
  display: block;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 29px;
  font-weight: 850;
  letter-spacing: -1.9px;
  white-space: nowrap;
}
.brand svg {
  width: 29px;
  height: 29px;
}
.brand > .brand-title {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.screen {
  position: fixed;
  inset: 0;
  z-index: 10;
}
#menu {
  background:
    linear-gradient(
      90deg,
      rgba(6, 13, 19, 0.98) 0%,
      rgba(7, 15, 21, 0.95) 27%,
      rgba(8, 17, 23, 0.59) 48%,
      rgba(6, 13, 20, 0.04) 76%
    ),
    linear-gradient(0deg, rgba(6, 13, 19, 0.85), transparent 25%);
}
.topbar {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 34px;
  display: flex;
  align-items: center;
  gap: 65px;
  height: 48px;
}
.topbar nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-item {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  padding: 15px 0;
  color: #aab4b6;
}
.nav-item.active {
  color: #f0f3ed;
}
.nav-item.active:after {
  content: "";
  height: 2px;
  background: var(--accent);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
}
.settings-nav {
  font-size: 22px;
  line-height: 1;
  margin-left: 12px;
}
.hero {
  position: absolute;
  top: 142px;
  left: 4%;
}
.hero h1 {
  font-size: 54px;
  font-weight: 750;
  letter-spacing: -3px;
  line-height: 1.15;
}
.hero h1 span {
  color: var(--accent);
  padding-left: 3px;
}
.hero p {
  font-size: 12px;
  color: #9baab0;
  margin-top: 15px;
  letter-spacing: 0.02em;
}
.match-card {
  position: absolute;
  left: 4%;
  top: 260px;
  width: 410px;
  max-height: calc(100vh - 326px);
  overflow: auto;
  scrollbar-width: thin;
  padding: 0 0 4px;
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--line);
}
.match-label {
  color: #a6b1b2;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.team-vs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 14px 22px;
  gap: 24px;
}
.team {
  text-align: center;
  flex: 1;
}
.crest {
  height: 57px;
  width: 51px;
  margin: 0 auto 11px;
}
.crest svg {
  width: 100%;
  height: 100%;
}
.home-crest svg > path:first-child {
  fill: #eeeede;
  stroke: #eeeede;
  stroke-width: 2;
}
.home-crest .crest-mark {
  fill: #1b343e;
}
.away-crest svg > path:first-child {
  fill: #213e50;
  stroke: #72a9c0;
  stroke-width: 2;
}
.away-crest .crest-mark {
  fill: #a8d3da;
}
.team small {
  display: block;
  color: #929fa4;
  font-size: 9px;
  margin: 0 0 7px;
}
.team strong {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.6px;
  font-weight: 650;
}
.team > span {
  display: block;
  color: #819497;
  font-size: 10px;
  margin-top: 9px;
  letter-spacing: 0.1em;
}
.vs {
  font-size: 13px;
  font-weight: 550;
  color: #778a8d;
  margin-top: -30px;
  letter-spacing: 1px;
}
.match-config {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 14px;
}
.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.primary {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #14211b;
  background: var(--accent);
  border-radius: 3px;
  font-size: 15px;
  font-weight: 750;
}
.primary:hover {
  background: #e6ff88;
  color: #132015;
  box-shadow: 0 0 35px #cefa4414;
}
.primary .start-arrow {
  font-size: 25px;
  font-weight: 400;
}
#startBtn {
  margin-top: 21px;
}
.menu-footer {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 28px;
  display: flex;
  gap: 27px;
  align-items: center;
  color: #acb6b6;
  font-size: 10px;
}
.menu-footer kbd {
  margin-right: 8px;
}
.extra-settings,
#trainingPicker {
  position: absolute;
  z-index: 12;
  top: 118px;
  right: 4%;
  width: 424px;
  background: rgba(12, 21, 29, 0.96);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 24px 90px #0006;
  backdrop-filter: blur(22px);
  max-height: calc(100vh - 158px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.extra-settings {
  display: grid;
  gap: 20px;
}
.settings-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.settings-head h2 {
  font-size: 21px;
  letter-spacing: -0.8px;
  font-weight: 650;
}
.settings-head button {
  font-size: 29px;
  color: #a5b2b6;
  padding: 0 0 0 20px;
  line-height: 1;
}
.settings-note {
  font-size: 11px;
  line-height: 1.8;
  color: #8da0a6;
  max-width: 340px;
}
.drill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}
.drill-grid button {
  text-align: left;
  padding: 20px 17px 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #1b2931;
  position: relative;
  min-height: 117px;
}
.drill-grid button:hover {
  background: #243942;
  border-color: var(--accent);
}
.drill-grid b {
  display: block;
  font-size: 19px;
  font-weight: 650;
}
.drill-grid span {
  display: block;
  color: #92a7ad;
  font-size: 11px;
  margin-top: 10px;
}
.drill-grid i {
  display: block;
  font-style: normal;
  text-align: right;
  color: var(--accent);
  margin-top: 10px;
}
#loading,
#fatal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0a1117;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 22px;
}
#loading p {
  color: #85949b;
  font-size: 12px;
}
.loader-track {
  width: 186px;
  height: 2px;
  background: #2d373b;
  overflow: hidden;
}
.loader-track i {
  display: block;
  width: 60px;
  height: 100%;
  background: var(--accent);
  animation: load 1.2s ease-in-out infinite;
}
#fatal {
  padding: 30px;
  text-align: center;
}
#fatal h1 {
  font-size: 26px;
}
#fatal p {
  font-size: 13px;
  max-width: 600px;
  color: #b7c2c6;
  line-height: 1.8;
}
#fatal button {
  padding: 14px 26px;
  background: var(--accent);
  color: #132016;
}
@keyframes load {
  from {
    transform: translateX(-65px);
  }
  to {
    transform: translateX(190px);
  }
}
/* Match overlay: only match information is visible by default. */
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.score-wrap {
  position: absolute;
  left: 32px;
  top: 29px;
  width: 256px;
  filter: drop-shadow(0 3px 9px #0002);
}
.scoreboard {
  height: 41px;
  display: flex;
  align-items: center;
  background: rgba(12, 21, 30, 0.93);
  border-left: 3px solid #eeeede;
  border-right: 0;
  border-radius: 2px;
  overflow: visible;
  position: relative;
}
.score-team {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
}
.scoreboard > b {
  background: #f1f2e9;
  color: #17222b;
  height: 41px;
  min-width: 33px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -1px;
}
.score-divider {
  display: none;
}
#clock {
  position: absolute;
  top: 41px;
  left: -3px;
  width: 74px;
  background: #7197b9;
  color: #1c2822;
  text-align: center;
  padding: 6px 6px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  border-radius: 0 0 2px 2px;
}
.score-meta {
  position: absolute;
  top: 48px;
  left: 85px;
  z-index: 1;
  font-size: 10px;
  color: #e7eae2;
  text-shadow: 0 1px 5px #0009;
}
.score-meta > span:first-child {
  display: none;
}
.attack-direction {
  position: absolute;
  right: 0;
  top: 47px;
  font-size: 13px;
  color: #e8eed4;
  opacity: 0.7;
}
.broadcast,
.control-status,
#gamepadNotice {
  display: none !important;
}
.hud-actions {
  pointer-events: auto;
  position: absolute;
  top: 29px;
  right: 28px;
  display: flex;
  gap: 8px;
  opacity: 0.48;
  transition: opacity 0.2s;
}
.hud-actions:hover {
  opacity: 1;
}
.hud-actions button {
  width: 30px;
  height: 30px;
  font-size: 16px;
  background: #0d171d8c;
  border: 1px solid #dbe7e422;
  border-radius: 3px;
}
.player-card {
  position: absolute;
  bottom: 30px;
  min-width: 199px;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 15px 10px 10px;
  background: linear-gradient(90deg, #0c1a22ed, #10222b65);
  border-left: 3px solid #edeedc;
  border-radius: 2px;
}
.your-player {
  left: 32px;
}
.opponent-player {
  right: 32px;
  border-left: 0;
  border-right: 3px solid #6faed0;
  background: linear-gradient(270deg, #0c1a22ed, #10222b65);
  flex-direction: row-reverse;
  text-align: right;
  padding: 10px 10px 10px 15px;
}
.player-number {
  font-size: 19px;
  font-weight: 650;
  color: #d0d7d3;
  min-width: 22px;
  text-align: center;
}
.player-meta {
  min-width: 124px;
}
.player-meta > div:first-child {
  display: none;
}
.player-meta strong {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.stamina-track {
  width: 100%;
  height: 2px;
  background: #fff2;
  margin-top: 5px;
}
.stamina-track i {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 100%;
  transition: width 0.2s;
}
.opponent-player .stamina-track i {
  background: #81b5c9;
  margin-left: auto;
}
.control-dot {
  display: none;
}
.radar-wrap {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 164px;
  opacity: 0.8;
}
.radar-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
#floatingPlayer {
  position: absolute;
  transform: translate(-50%, -100%);
  min-width: 46px;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
#floatName,
#shotType {
  display: none;
}
#shotMeter {
  width: 52px;
  height: 5px;
  background: #0a121bd9;
  border: 1px solid #eff2d77a;
  border-radius: 2px;
  overflow: hidden;
}
#shotFill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}
.trainer {
  position: absolute;
  bottom: 142px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 16px;
  min-width: 445px;
  border: 1px solid #e1f4f322;
  border-radius: 4px;
  background: #0c181eeb;
  backdrop-filter: blur(8px);
  font-size: 10px;
  color: #b0c1c0;
  line-height: 2.6;
  text-align: center;
}
.trainer kbd {
  font-size: 9px;
  margin-left: 5px;
  padding: 2px 4px;
}
#actionTicker,
.input-display {
  display: none;
}
.show-hints #actionTicker {
  position: absolute;
  display: flex;
  bottom: 104px;
  left: 32px;
  flex-direction: column;
  gap: 5px;
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}
.show-hints #actionTicker strong {
  font-size: 14px;
}
.show-hints #actionTicker small {
  font-size: 10px;
  color: #d4e3cd;
}
.show-hints #actionTag {
  display: none;
}
.show-hints .input-display {
  position: absolute;
  bottom: 106px;
  right: 32px;
  display: flex;
  gap: 4px;
}
.input-display kbd {
  background: #08181cac;
  border-color: #c3e7d333;
}
.input-display .held {
  background: var(--accent);
  color: #11221b;
}
.announcement {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  text-align: center;
  padding: 18px 32px 21px;
  min-width: 320px;
  max-width: 80vw;
  background: none;
  border: 0;
  border-radius: 0;
  text-shadow:
    0 2px 3px #051910e6,
    0 0 16px #051910b3;
  box-shadow: none;
  animation: appear 0.25s ease-out;
}
.announcement.training {
  top: 104px;
  min-width: 0;
  padding: 10px 20px;
}
.announcement.training > strong {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.announcement > span:empty,
.announcement p:empty {
  display: none;
}
.announcement > span {
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--accent);
  display: block;
  margin-bottom: 7px;
}
.announcement > strong {
  font-size: 33px;
  line-height: 1.3;
  letter-spacing: -1px;
  font-weight: 600;
}
.announcement p {
  font-size: 11px;
  color: #c4cecb;
  margin-top: 7px;
}
.announcement.goal {
  top: auto;
  bottom: 20%;
  min-width: 390px;
}
.announcement.goal > strong {
  font-size: 58px;
  letter-spacing: 0;
}
.announcement.restart {
  top: 95px;
  min-width: 240px;
  padding: 12px 24px;
}
.announcement.restart > strong {
  font-size: 22px;
}
.announcement.restart > span:empty {
  display: none;
}
#toast {
  position: fixed;
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  background: #0d1b22de;
  border: 1px solid #eff3ce26;
  color: #e5ebe2;
  border-radius: 3px;
  font-size: 12px;
  z-index: 20;
  pointer-events: none;
}
#replayRibbon {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 11px 16px;
  background: #0d1a23d9;
  font-size: 11px;
  letter-spacing: 0.15em;
  border-left: 2px solid var(--accent);
}
#replayRibbon span {
  font-size: 10px;
  letter-spacing: 0;
  color: #b9c5c2;
  padding-left: 24px;
}
#replayRibbon b {
  font-weight: 500;
  color: white;
}
#practicePanel {
  position: fixed;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 15px;
  background: #0b1821dc;
  border-radius: 3px;
  border: 1px solid #f5f6d423;
  backdrop-filter: blur(10px);
}
#practicePanel > div {
  display: flex;
  gap: 14px;
  align-items: center;
}
#practicePanel small {
  display: none;
}
#drillName {
  font-size: 12px;
  font-weight: 600;
}
#practicePanel span {
  font-size: 10px;
  color: #c4d0cb;
}
#practiceGoals {
  font-weight: 400;
}
#practicePanel button {
  font-size: 18px;
  color: #cbd5cc;
  background: #ffffff09;
  border: 1px solid #ffffff12;
  border-radius: 2px;
  width: 27px;
  height: 27px;
}
#practicePanel button:hover {
  color: var(--accent);
}
/* Pause, full-time and controls share the same restrained presentation. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 11, 18, 0.62);
  backdrop-filter: blur(13px);
  z-index: 25;
  padding: 26px;
}
.pause-panel,
.results-panel,
.help-panel {
  background: rgba(12, 22, 31, 0.96);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 35px 100px #0005;
  padding: 32px;
  width: 440px;
  max-height: calc(100dvh - 52px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.modal-backdrop h2 {
  font-size: 31px;
  font-weight: 650;
  letter-spacing: -1.3px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #9aa9ad;
  margin-bottom: 12px;
}
.eyebrow:empty {
  display: none;
}
.pause-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  margin: 25px 0;
}
.pause-score span {
  font-size: 12px;
  color: #b3c1c3;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.pause-score b {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 2px;
}
.stats-grid {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 24px;
}
.stats-grid > div {
  flex: 1;
}
.stats-grid strong {
  display: block;
  font-size: 21px;
  font-weight: 500;
}
.stats-grid span {
  display: block;
  font-size: 10px;
  color: #91a4aa;
  margin-top: 7px;
}
.pause-tactics {
  border-top: 1px solid var(--line);
  padding: 18px 0 24px;
}
.pause-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.pause-options button,
.secondary {
  padding: 13px 10px;
  border: 1px solid var(--line);
  background: #18252f;
  border-radius: 3px;
  font-size: 12px;
  color: #c0cdd0;
}
.pause-options button:hover,
.secondary:hover {
  color: #e6f7d7;
  background: #243741;
}
.help-panel {
  width: 850px;
  position: relative;
  padding: 32px 36px;
}
.close-btn {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 28px;
  color: #a0b0b4;
}
.help-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38px;
  margin-top: 26px;
}
.help-grid h3 {
  font-size: 14px;
  font-weight: 600;
  color: #e3eae3;
  margin-bottom: 12px;
}
.help-grid p {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 35px;
  border-bottom: 1px solid #cfddd909;
  font-size: 11px;
  line-height: 1.7;
  color: #aebfc4;
}
.help-grid kbd {
  display: inline-block;
  min-width: 72px;
  font-size: 10px;
  text-align: center;
}
.help-tip {
  padding: 15px 17px;
  background: #1f342e6e;
  border-left: 2px solid var(--accent);
  margin-top: 24px;
}
.help-tip b {
  font-size: 12px;
  font-weight: 600;
}
.help-tip p {
  font-size: 11px;
  line-height: 1.9;
  color: #b3c3be;
  margin-top: 6px;
}
.utility-help {
  margin-top: 20px;
  font-size: 10px;
  line-height: 2.8;
  color: #adbec4;
}
.utility-help kbd {
  margin-right: 4px;
  margin-left: 5px;
  font-size: 9px;
}
.pad-tip {
  font-size: 10px;
  line-height: 1.9;
  color: #a2b6bc;
  margin-top: 12px;
}
.subtle {
  font-size: 10px;
  line-height: 1.8;
  color: #6f8a96;
  margin-top: 18px;
}
.results-panel {
  width: 520px;
}
.result-score {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.result-score div {
  text-align: center;
}
.result-score small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b6c4c8;
}
.result-score b {
  display: block;
  font-size: 72px;
  font-weight: 550;
  line-height: 1.3;
}
.result-score > span {
  font-size: 28px;
  color: #819599;
}
#resultStats > div {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  text-align: center;
  padding: 11px 0;
  font-size: 12px;
}
#resultStats span {
  font-size: 11px;
  color: #a6b9bf;
}
#resultStats b {
  font-weight: 500;
}
#rematchBtn {
  margin-top: 24px;
}
#resultMenu {
  display: block;
  width: 100%;
  margin-top: 10px;
}
@keyframes appear {
  from {
    opacity: 0;
    margin-top: -8px;
  }
  to {
    opacity: 1;
    margin-top: 0;
  }
}
/* Touch controls retain the FC Online action mapping. */
#touchControls {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
#joystick {
  position: absolute;
  left: 30px;
  bottom: 45px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #ffffff0b;
  border: 1px solid #fff3;
  pointer-events: auto;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
#joystickKnob {
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: #e8ece330;
  border: 1px solid #ffffff69;
  box-shadow: 0 3px 20px #0002;
}
.touch-buttons {
  position: absolute;
  right: 22px;
  bottom: 29px;
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 9px;
  align-items: center;
  pointer-events: auto;
}
.touch-buttons button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0e1d279c;
  border: 1px solid #ecf1e23d;
  color: #edf2e4;
  font-size: 10px;
  font-weight: 600;
  touch-action: none;
}
.touch-buttons .touch-small {
  height: 40px;
  font-size: 9px;
  background: #0e1d2777;
}
.touch-buttons .touch-shoot {
  background: #d4ee7069;
  border-color: #e2fa95b0;
}
.touch-buttons button.pressed {
  background: #7197b9b0;
  color: #102019;
  border-color: var(--accent);
}
.touch .your-player {
  bottom: 200px;
  left: 20px;
}
.touch .opponent-player {
  bottom: 200px;
  right: 20px;
}
.touch .radar-wrap {
  bottom: 20px;
  width: 123px;
}
.touch .trainer {
  bottom: 205px;
}
.touch .player-card {
  min-width: 140px;
  padding: 7px 10px;
}
.touch .player-meta {
  min-width: 82px;
}
.touch .player-meta strong {
  font-size: 11px;
}
.touch .player-number {
  font-size: 14px;
}
@media (min-width: 1600px) {
  .match-card {
    width: 448px;
    top: 285px;
  }
  .hero {
    top: 160px;
  }
  .hero h1 {
    font-size: 65px;
  }
  .topbar {
    top: 40px;
  }
  .team-vs {
    padding: 26px 16px;
  }
  .crest {
    width: 58px;
    height: 65px;
  }
  .team strong {
    font-size: 20px;
  }
  select {
    height: 46px;
  }
}
@media (max-height: 780px) and (min-width: 850px) {
  .topbar {
    top: 23px;
  }
  .hero {
    top: 111px;
  }
  .hero h1 {
    font-size: 42px;
  }
  .hero p {
    margin-top: 9px;
  }
  .match-card {
    top: 202px;
    max-height: calc(100vh - 254px);
    width: 385px;
  }
  .card-top {
    padding-bottom: 12px;
  }
  .team-vs {
    padding: 16px 10px;
    gap: 16px;
  }
  .crest {
    height: 46px;
    width: 43px;
    margin-bottom: 8px;
  }
  .team strong {
    font-size: 16px;
  }
  .team small {
    font-size: 8px;
    margin-bottom: 4px;
  }
  .team > span {
    margin-top: 6px;
  }
  .match-config {
    padding-top: 12px;
    gap: 10px;
  }
  .match-config select {
    height: 36px;
    margin-top: 6px;
  }
  .primary {
    height: 47px;
  }
  #startBtn {
    margin-top: 15px;
  }
  .menu-footer {
    bottom: 20px;
  }
  .extra-settings,
  #trainingPicker {
    top: 92px;
    max-height: calc(100vh - 125px);
  }
}
@media (max-width: 1000px) {
  .topbar {
    gap: 42px;
  }
  .topbar nav {
    gap: 23px;
  }
  .match-card {
    width: 365px;
  }
  .extra-settings,
  #trainingPicker {
    width: 370px;
    right: 3%;
  }
  .player-card {
    min-width: 180px;
  }
  .player-meta {
    min-width: 110px;
  }
}
@media (max-width: 750px) {
  .topbar {
    left: 6%;
    right: 6%;
    top: 24px;
    justify-content: space-between;
    gap: 15px;
  }
  .brand {
    font-size: 23px;
    gap: 7px;
  }
  .brand svg {
    width: 23px;
    height: 23px;
  }
  .brand > .brand-title {
    font-size: 22px;
  }
  .topbar nav {
    gap: 18px;
  }
  .nav-item {
    font-size: 12px;
  }
  .topbar #navPlay,
  .topbar #navTactics {
    display: none;
  }
  .settings-nav {
    font-size: 21px;
    margin-left: 0;
  }
  .hero {
    top: 114px;
    left: 6%;
  }
  .hero h1 {
    font-size: 45px;
  }
  .hero p {
    font-size: 11px;
    margin-top: 10px;
  }
  .match-card {
    top: 220px;
    left: 6%;
    width: 88%;
    max-width: 410px;
    max-height: calc(100dvh - 285px);
    padding: 0 1px 4px;
  }
  .card-top {
    padding-bottom: 16px;
  }
  .team-vs {
    padding: 19px 14px;
  }
  .crest {
    width: 45px;
    height: 51px;
  }
  .team strong {
    font-size: 17px;
  }
  .team small {
    font-size: 9px;
  }
  .match-config {
    padding-top: 15px;
  }
  select {
    height: 42px;
  }
  .menu-footer {
    bottom: 23px;
    left: 6%;
    gap: 23px;
    font-size: 10px;
  }
  #menu {
    background:
      linear-gradient(
        90deg,
        rgba(7, 15, 22, 0.95),
        rgba(7, 15, 22, 0.84) 55%,
        rgba(7, 15, 22, 0.6)
      ),
      linear-gradient(0deg, #071018a0, transparent);
  }
  .extra-settings,
  #trainingPicker {
    left: 5%;
    right: 5%;
    width: 90%;
    top: 100px;
    max-height: calc(100dvh - 132px);
    padding: 20px;
  }
  .extra-settings .config-row {
    gap: 12px;
  }
  .extra-settings select {
    font-size: 12px;
  }
  .score-wrap {
    left: 14px;
    top: 16px;
    width: 194px;
  }
  .scoreboard {
    height: 34px;
  }
  .scoreboard > b {
    height: 34px;
    min-width: 27px;
    font-size: 19px;
  }
  .score-team {
    font-size: 10px;
  }
  .score-meta {
    top: 40px;
    left: 73px;
    font-size: 9px;
  }
  #clock {
    top: 34px;
    width: 62px;
    padding: 5px;
    font-size: 10px;
  }
  .attack-direction {
    top: 39px;
    font-size: 12px;
  }
  .hud-actions {
    top: 17px;
    right: 13px;
    gap: 5px;
  }
  .hud-actions button {
    width: 26px;
    height: 26px;
    font-size: 14px;
  }
  #soundBtn {
    display: none;
  }
  #practicePanel {
    top: 79px;
    left: 14px;
    transform: none;
    padding: 6px 9px 6px 12px;
    gap: 8px;
  }
  #practicePanel b {
    font-size: 11px;
  }
  #practicePanel span {
    font-size: 9px;
  }
  .player-card {
    left: 14px;
    bottom: 23px;
    min-width: 136px;
    padding: 8px 9px;
    gap: 8px;
  }
  .opponent-player {
    left: auto;
    right: 14px;
  }
  .player-meta {
    min-width: 80px;
  }
  .player-number {
    font-size: 16px;
  }
  .player-meta strong {
    font-size: 10px;
  }
  .radar-wrap {
    width: 126px;
    bottom: 91px;
  }
  .trainer {
    min-width: 0;
    width: 90%;
    font-size: 9px;
    bottom: 210px;
    line-height: 2.5;
    padding: 9px;
  }
  .trainer kbd {
    font-size: 8px;
  }
  .show-hints #actionTicker {
    left: 16px;
    bottom: 150px;
  }
  .show-hints .input-display {
    display: none;
  }
  .announcement {
    top: 180px;
    padding: 15px 22px;
    min-width: 280px;
  }
  .announcement > strong {
    font-size: 28px;
  }
  .announcement p {
    font-size: 10px;
  }
  .announcement.goal {
    min-width: 285px;
    bottom: 35%;
  }
  .announcement.goal > strong {
    font-size: 43px;
  }
  .modal-backdrop {
    padding: 15px;
  }
  .pause-panel,
  .help-panel,
  .results-panel {
    padding: 25px;
    max-height: calc(100dvh - 30px);
    width: 100%;
  }
  .help-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .help-panel h2 {
    font-size: 27px;
  }
  .help-grid p {
    font-size: 11px;
  }
  .help-panel .eyebrow {
    font-size: 9px;
  }
  .result-score b {
    font-size: 57px;
  }
  .close-btn {
    top: 20px;
    right: 20px;
  }
  .touch .player-card {
    bottom: 226px;
  }
  .touch .radar-wrap {
    bottom: 220px;
    width: 94px;
  }
  .touch .your-player {
    left: 14px;
  }
  .touch .opponent-player {
    right: 14px;
  }
  .touch .player-meta {
    min-width: 59px;
  }
  .touch .player-card {
    min-width: 110px;
    padding: 6px 7px;
  }
  .touch .player-number {
    min-width: 14px;
  }
  #joystick {
    left: 18px;
    bottom: 46px;
    width: 119px;
    height: 119px;
  }
  #joystickKnob {
    width: 47px;
    height: 47px;
  }
  .touch-buttons {
    right: 14px;
    grid-template-columns: repeat(3, 54px);
    gap: 8px;
    bottom: 30px;
  }
  .touch-buttons button {
    width: 54px;
    height: 54px;
    font-size: 9px;
  }
  .touch-buttons .touch-small {
    height: 36px;
  }
  .touch .trainer {
    bottom: 300px;
  }
  .touch #replayRibbon {
    top: 128px;
    left: 14px;
    transform: none;
  }
  #replayRibbon span {
    padding-left: 14px;
  }
}
@media (max-height: 520px) and (min-width: 650px) {
  .topbar {
    top: 12px;
    left: 25px;
    right: 25px;
    height: 35px;
  }
  .brand {
    font-size: 24px;
  }
  .brand > .brand-title {
    font-size: 22px;
  }
  .hero {
    left: 25px;
    top: 74px;
  }
  .hero h1 {
    font-size: 32px;
  }
  .hero p {
    display: none;
  }
  .match-card {
    left: 25px;
    top: 130px;
    max-height: calc(100dvh - 169px);
    width: 355px;
  }
  .card-top {
    padding-bottom: 8px;
  }
  .team-vs {
    padding: 8px 5px;
  }
  .crest {
    width: 30px;
    height: 34px;
    margin-bottom: 5px;
  }
  .team strong {
    font-size: 13px;
  }
  .team strong br {
    display: none;
  }
  .team small,
  .team > span {
    display: none;
  }
  .match-config {
    padding-top: 8px;
    gap: 8px;
  }
  .match-config select {
    height: 29px;
    margin-top: 4px;
    font-size: 11px;
  }
  .match-config label {
    font-size: 9px;
  }
  .primary {
    height: 36px;
    font-size: 12px;
  }
  #startBtn {
    margin-top: 10px;
  }
  .menu-footer {
    left: 25px;
    bottom: 12px;
    font-size: 9px;
  }
  .menu-footer kbd {
    font-size: 9px;
  }
  .extra-settings,
  #trainingPicker {
    top: 65px;
    max-height: calc(100dvh - 89px);
    width: 365px;
    padding: 20px;
  }
  .hero h1 span {
    font-size: 34px;
  }
  .score-wrap {
    top: 14px;
    left: 20px;
    width: 215px;
  }
  .scoreboard {
    height: 32px;
  }
  .scoreboard > b {
    height: 32px;
    font-size: 19px;
  }
  .score-team {
    font-size: 10px;
  }
  #clock {
    top: 32px;
    padding: 4px;
    font-size: 10px;
  }
  .score-meta {
    top: 37px;
    font-size: 9px;
  }
  .attack-direction {
    top: 36px;
  }
  .hud-actions {
    top: 14px;
    right: 18px;
  }
  .touch .player-card {
    bottom: 150px;
    padding: 5px 7px;
    min-width: 140px;
  }
  .touch .player-meta strong {
    font-size: 10px;
  }
  .touch .player-number {
    font-size: 13px;
  }
  .touch .radar-wrap {
    bottom: 14px;
    width: 100px;
  }
  .touch .opponent-player {
    right: 18px;
  }
  .touch .your-player {
    left: 20px;
  }
  #joystick {
    bottom: 22px;
    left: 32px;
    width: 112px;
    height: 112px;
  }
  #joystickKnob {
    width: 44px;
    height: 44px;
  }
  .touch-buttons {
    bottom: 14px;
    right: 19px;
    grid-template-columns: repeat(4, 49px);
    gap: 7px;
  }
  .touch-buttons button {
    width: 49px;
    height: 49px;
    font-size: 8px;
  }
  .touch-buttons .touch-small {
    height: 38px;
  }
  #practicePanel {
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 8px 5px 13px;
  }
  #practicePanel b {
    font-size: 11px;
  }
  #practicePanel span {
    font-size: 9px;
  }
  #practicePanel button {
    height: 24px;
    width: 24px;
  }
  .trainer {
    bottom: 135px;
    min-width: 420px;
    font-size: 9px;
  }
  .touch .trainer {
    bottom: 136px;
  }
  .show-hints #actionTicker {
    bottom: 190px;
  }
  .show-hints .input-display {
    display: none;
  }
  .announcement {
    top: 80px;
    padding: 10px 23px;
    min-width: 280px;
  }
  .announcement > strong {
    font-size: 27px;
  }
  .announcement p {
    font-size: 10px;
  }
  .announcement.goal {
    bottom: 29%;
    min-width: 290px;
  }
  .announcement.goal > strong {
    font-size: 39px;
  }
  .help-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .modal-backdrop {
    padding: 15px;
  }
  .pause-panel {
    max-height: calc(100dvh - 30px);
    padding: 20px 27px;
  }
  .pause-panel h2 {
    font-size: 24px;
  }
  .pause-score {
    margin: 17px 0;
    padding: 13px 0;
  }
  .pause-score b {
    font-size: 26px;
  }
  .stats-grid {
    margin-bottom: 14px;
  }
  .stats-grid strong {
    font-size: 17px;
  }
  .pause-tactics {
    padding: 12px 0 15px;
  }
  .pause-tactics select {
    height: 32px;
  }
  .pause-options button {
    padding: 10px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.001ms !important;
    transition: none !important;
  }
}

/* v4: contextual range feedback and compact replay transport. */
#passRange {
  display: block;
  color: #d8e5c2;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(14, 24, 30, 0.78);
  padding: 5px 7px;
  border-radius: 3px;
  margin-top: 4px;
}
#passRange[hidden] {
  display: none;
}
.control-dot.recovering {
  background: #c4dcec;
  box-shadow: 0 0 0 4px #b8d8ea22;
}
#replayRibbon {
  pointer-events: auto;
}
#replayRibbon span {
  display: flex;
  align-items: center;
  gap: 12px;
}
#replayRibbon button {
  border: 0;
  background: #ffffff14;
  color: #fff;
  font: inherit;
  padding: 5px 9px;
  border-radius: 3px;
  cursor: pointer;
}
#replaySeek {
  width: 210px;
  accent-color: #c5ef7a;
  cursor: pointer;
}
#trainingPicker {
  max-height: calc(100svh - 128px);
  overflow: auto;
}
.drill-grid button {
  min-height: 108px;
}
.extra-settings {
  max-height: calc(100svh - 130px);
  overflow: auto;
}
@media (max-width: 700px) {
  #replaySeek {
    width: 90px;
  }
  #replayRibbon {
    font-size: 10px;
    gap: 8px;
  }
  #replayRibbon span {
    gap: 6px;
  }
  .drill-grid button {
    min-height: 88px;
  }
}

/* V5 broadcast treatment; segmented charge gauge, no permanent telemetry. */
#shotMeter {
  width: 90px !important;
  height: 7px !important;
  border-radius: 2px !important;
  background: rgba(9, 19, 20, 0.86) !important;
  box-shadow: 0 1px 4px #0006;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(235, 245, 235, 0.55);
}
#shotMeter:after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(25% - 1px),
    rgba(8, 22, 20, 0.7) calc(25% - 1px),
    rgba(8, 22, 20, 0.7) 25%
  );
  pointer-events: none;
}
#shotFill {
  height: 100%;
  border-radius: 0 !important;
  transition: none !important;
  box-shadow: none !important;
}
#passRange {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px #0008;
}
.player-card {
  border-radius: 3px;
  background: linear-gradient(
    100deg,
    rgba(9, 24, 27, 0.93),
    rgba(9, 24, 27, 0.62)
  ) !important;
  backdrop-filter: blur(9px);
}
.scoreboard {
  box-shadow: 0 4px 20px #0002;
}

#sceneFade {
  position: fixed;
  inset: 0;
  background: #071116;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
}
#selectionMarker {
  position: fixed;
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -100%);
  width: 14px;
  height: 10px;
  filter: drop-shadow(0 1px 2px #061012);
}
#selectionMarker > i {
  display: block;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #7197b9;
}
#selectionBooking {
  position: absolute;
  left: 20px;
  top: 1px;
  width: 6px;
  height: 9px;
  border-radius: 1px;
  background: #f4cc39;
}
#restartHUD {
  display: none !important;
  position: fixed;
  z-index: 7;
  left: 50%;
  bottom: 112px;
  transform: translateX(-50%);
  width: 340px;
  background: rgba(9, 22, 26, 0.94);
  border: 1px solid #cad9ce30;
  border-top: 2px solid #7197b9;
  padding: 15px 18px 12px;
  border-radius: 4px;
  box-shadow: 0 10px 30px #0003;
  pointer-events: none;
}
#restartHUD > div:first-child {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #b6c6c1;
}
#restartHUD strong {
  display: block;
  margin: 8px 0;
  font-size: 22px;
  letter-spacing: -0.7px;
}
#restartHUD p {
  font-size: 11px;
  color: #c2cec7;
  line-height: 1.8;
}
#restartClock {
  font-size: 15px;
  color: #7197b9;
  font-variant-numeric: tabular-nums;
}
.restart-track {
  height: 2px;
  background: #ffffff16;
  margin-top: 12px;
}
.restart-track i {
  display: block;
  height: 100%;
  background: #7197b9;
}
#cardNotice {
  position: fixed;
  left: 32px;
  top: 112px;
  z-index: 8;
  padding: 12px 16px;
  background: #111d25ed;
  border-left: 6px solid #ffe055;
  font-size: 12px;
  white-space: pre-line;
  line-height: 1.7;
}
.touch #restartHUD {
  bottom: 278px;
  width: 300px;
}
#shotMeter {
  width: 48px !important;
  height: 4px !important;
}
#restartHUD.direct {
  left: 32px;
  bottom: 110px;
  transform: none;
  width: 300px;
}
.aim-track {
  height: 14px;
  background:
    linear-gradient(
      90deg,
      transparent 49.7%,
      #e4eac866 49.7%,
      #e4eac866 50.3%,
      transparent 50.3%
    ),
    #ffffff12;
  position: relative;
  margin-top: 10px;
  border-radius: 2px;
}
.aim-track i {
  position: absolute;
  width: 3px;
  height: 14px;
  top: 0;
  background: #7197b9;
}
#restartView {
  pointer-events: auto;
  color: #7197b9;
  font-size: 11px;
  margin-top: 10px;
  padding: 0;
}
#setPieceHelp {
  position: fixed;
  right: 28px;
  top: 76px;
  z-index: 7;
  font-size: 11px;
  color: #e9efe9;
  background: #07171e99;
  padding: 8px 11px;
  border-radius: 2px;
  pointer-events: none;
}
.bookingBadge {
  display: inline-block;
  width: 7px;
  height: 10px;
  background: #f4cc39;
  margin-left: 7px;
  border-radius: 1px;
  vertical-align: middle;
}
#playerName,
#opName {
  display: inline !important;
}
#shotType,
#passRange {
  display: none !important;
}
#shotType:empty {
  display: none;
}
#menu {
  background: linear-gradient(180deg, #172b43a8, #13264066 48%, #061521a6);
  overflow-y: auto;
  color: #f5f6ef;
}
#menu .topbar {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: min(1180px, 88%);
  margin: clamp(22px, 6vh, 60px) auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#menu .brand {
  font-weight: 850;
  letter-spacing: -2px;
  font-size: 31px;
}
#menu .brand > .brand-title {
  font-weight: 850;
  font-size: 31px;
  letter-spacing: -1.7px;
}
#menu .topbar nav {
  display: flex;
  gap: 0;
  background: #eff2f2;
  color: #192a3d;
  padding: 0 5px;
  border-radius: 0;
}
#menu .nav-item {
  padding: 13px 22px;
  font-weight: 750;
  font-size: 12px;
  color: inherit;
  letter-spacing: 0.04em;
  border: 0;
  border-radius: 0;
}
#menu .nav-item.active {
  background: #7197b9;
  color: #122433;
}
#menu .nav-item:after {
  display: none;
}
#menu .nav-item:hover {
  background: #dce3e6;
}
#menu .nav-item.active:hover {
  background: #7197b9;
}
#menu .settings-nav {
  font-size: 17px;
  padding: 10px 17px;
  margin: 0;
}
#menu .hero {
  display: none;
}
.home-grid {
  width: min(1180px, 88%);
  margin: clamp(34px, 7vh, 78px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 232px 205px;
  gap: 9px;
  align-items: stretch;
}
#menu #matchCard {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  max-width: none;
  max-height: none;
  grid-column: 1/3;
  grid-row: 1/3;
  margin: 0;
  padding: 25px 28px 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(130deg, #162e4c, #0d1e36);
  border: 0;
  border-top: 4px solid #7197b9;
  border-radius: 0;
  box-shadow: 0 9px 22px #05101a30;
  overflow: hidden;
}
#menu #matchCard .card-top {
  padding: 0;
  border: 0;
  color: #b6c7d1;
  font-size: 10px;
  letter-spacing: 0.12em;
}
.tile-heading {
  margin: 12px 0 0;
  font-size: 35px;
  line-height: 1.08;
  font-weight: 850;
  letter-spacing: -1.7px;
}
.tile-heading small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: #a8b9c9;
  margin-left: 12px;
}
#menu .team-vs {
  flex: 1;
  min-height: 112px;
  padding: 14px 7%;
  border: 0;
  gap: 20px;
}
#menu .team {
  display: grid;
  grid-template-columns: 52px auto;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  text-align: left;
}
#menu .team .crest {
  width: 51px;
  height: 59px;
  grid-row: 1/3;
  margin: 0;
}
#menu .team small {
  display: none;
}
#menu .team strong {
  font-size: 17px;
  line-height: 1.27;
  font-weight: 750;
  letter-spacing: -0.7px;
}
#menu .team > span {
  font-size: 10px;
  margin-top: 4px;
  color: #96afc4;
}
#menu .vs {
  font-size: 13px;
  font-weight: 400;
  color: #94aec0;
}
#menu .match-config {
  display: grid;
  grid-template-columns: 1.12fr 1fr 0.85fr;
  gap: 10px;
  padding: 10px 0 20px;
  border: 0;
}
#menu .match-config .config-row {
  display: contents;
}
#menu .match-config label {
  font-size: 10px;
  color: #b7c6d0;
  gap: 8px;
  margin: 0;
}
#menu .match-config select {
  height: 38px;
  font-size: 11px;
  padding: 0 9px;
  background: #273c51;
  color: #f1f4ed;
  border: 1px solid #ffffff19;
  border-radius: 0;
}
#menu #startBtn {
  width: calc(100% + 56px);
  margin: 0 -28px;
  height: 59px;
  padding: 0 28px;
  flex-shrink: 0;
  border-radius: 0;
  color: #142b3d;
  background: #7197b9;
  font-size: 16px;
  letter-spacing: -0.4px;
  font-weight: 850;
}
#menu #startBtn:hover {
  background: #e4ff89;
}
#menu #startBtn .start-arrow {
  font-size: 25px;
}
.home-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 24px 25px;
  border: 0;
  border-radius: 0;
  background: #f2f4f0;
  color: #19344b;
  box-shadow: 0 9px 22px #05101a25;
  transition:
    transform 0.16s,
    background 0.16s;
}
.home-tile:hover,
.home-tile:focus-visible {
  background: #7197b9;
  transform: translateY(-3px);
  outline: 3px solid #f5ffe5;
  outline-offset: -3px;
}
.home-tile:active {
  transform: translateY(0);
}
.home-tile .tile-category {
  font-size: 10px;
  letter-spacing: 0.13em;
  color: #567187;
  font-weight: 650;
}
.home-tile strong {
  position: relative;
  z-index: 1;
  font-size: 31px;
  line-height: 1.1;
  letter-spacing: -1.2px;
  margin-top: 10px;
  font-weight: 850;
}
.home-tile .tile-copy {
  font-size: 11px;
  color: #536a7e;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}
.home-tile .tile-arrow {
  margin-top: auto;
  font-size: 22px;
  font-weight: 400;
  position: relative;
  z-index: 1;
}
#tileTraining {
  grid-column: 3/5;
  grid-row: 1;
  background: linear-gradient(110deg, #f6f7f1 20%, #d5e1e9);
}
#tileTraining:hover {
  background: #7197b9;
}
#tileTraining svg {
  position: absolute;
  right: 14px;
  bottom: -25px;
  width: 235px;
  height: 210px;
  color: #3b7092;
  opacity: 0.75;
  transform: rotate(-12deg);
}
#tileTactics {
  grid-column: 3;
  grid-row: 2;
  background: #203a53;
  color: #eff4ee;
}
#tileTactics .tile-category,
#tileTactics .tile-copy {
  color: #a6bac9;
}
#tileTactics:hover {
  background: #2e506a;
}
#tileTactics svg {
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 130px;
  height: 130px;
  opacity: 0.24;
  color: #7197b9;
}
#tileSettings {
  grid-column: 4;
  grid-row: 2;
}
#tileSettings strong {
  font-size: 28px;
}
#tileSettings svg {
  position: absolute;
  right: -12px;
  bottom: -13px;
  width: 118px;
  height: 118px;
  color: #3b657f;
  opacity: 0.15;
}
#menu .menu-footer {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(1180px, 88%);
  margin: 22px auto 28px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #edf2e8;
}
#menu .menu-footer kbd {
  color: #12283b;
  background: #eaf0e8;
  border: 0;
  font-weight: 700;
}
#menu .extra-settings,
#menu #trainingPicker {
  z-index: 10;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(580px, 90vw);
  max-height: 84vh;
  border-radius: 0;
  border-top: 3px solid #7197b9;
  background: #112638f7;
  box-shadow: 0 25px 80px #0008;
}
@media (max-width: 900px) {
  #menu .topbar {
    width: 92%;
    margin-top: 25px;
  }
  #menu .nav-item {
    padding: 12px 13px;
  }
  #menu .brand {
    font-size: 25px;
  }
  .home-grid {
    width: 92%;
    margin-top: 40px;
    grid-template-rows: 222px 195px;
  }
  #menu #matchCard {
    padding: 20px 20px 0;
  }
  #menu #startBtn {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  #menu .team-vs {
    padding: 10px 0;
    gap: 8px;
  }
  #menu .team {
    display: block;
    text-align: center;
  }
  #menu .team .crest {
    width: 35px;
    height: 40px;
    margin: 0 auto 6px;
  }
  #menu .team strong {
    font-size: 14px;
  }
  #menu .team > span {
    display: none;
  }
  .home-tile {
    padding: 20px 18px;
  }
  .home-tile strong {
    font-size: 27px;
  }
  #tileTraining svg {
    width: 175px;
    right: -30px;
    opacity: 0.45;
  }
  #menu .match-config {
    gap: 6px;
  }
  #menu .match-config select {
    font-size: 10px;
    padding: 0 5px;
  }
}
@media (max-width: 640px) {
  #menu .topbar {
    flex-wrap: wrap;
    gap: 20px;
  }
  #menu .topbar nav {
    width: 100%;
    justify-content: space-between;
  }
  #menu .topbar #navPlay,
  #menu .topbar #navTactics {
    display: block;
  }
  .home-grid {
    margin-top: 23px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px 170px 150px;
    gap: 7px;
  }
  #menu #matchCard {
    grid-column: 1/3;
    grid-row: 1;
  }
  #tileTraining {
    grid-column: 1/3;
    grid-row: 2;
  }
  #tileTactics {
    grid-column: 1;
    grid-row: 3;
  }
  #tileSettings {
    grid-column: 2;
    grid-row: 3;
  }
  #menu .team {
    display: grid;
    grid-template-columns: 40px auto;
    text-align: left;
  }
  #menu .team .crest {
    grid-row: 1/3;
    margin: 0;
  }
  #menu .team-vs {
    padding: 10px 4%;
  }
  .tile-heading {
    font-size: 29px;
  }
  #menu .menu-footer {
    width: 92%;
    margin-top: 18px;
  }
  .home-tile strong {
    font-size: 26px;
  }
}
@media (min-width: 641px) and (max-height: 680px) {
  #menu .topbar {
    margin-top: 20px;
  }
  .home-grid {
    margin-top: 28px;
    grid-template-rows: 205px 180px;
  }
  #menu #matchCard {
    padding-top: 18px;
  }
  .tile-heading {
    font-size: 29px;
  }
  #menu .menu-footer {
    margin-top: 14px;
  }
}

/* Restrained broadcast palette; hierarchy comes from the tiles, not accent stripes. */
#menu #matchCard {
  border-top: 0;
  background: linear-gradient(135deg, #1b354d, #142a40);
}
#menu .topbar nav {
  background: #e9eff2;
  padding: 0;
}
#menu .nav-item.active,
#menu .nav-item.active:hover {
  background: #496f98;
  color: white;
}
#menu #startBtn {
  background: #496f98;
  color: #f6f9fb;
}
#menu #startBtn:hover {
  background: #5b82aa;
}
#menu .extra-settings,
#menu #trainingPicker {
  border-top: 0;
}
.home-tile {
  box-shadow: 0 7px 20px #09152220;
}
.home-tile:hover,
.home-tile:focus-visible {
  background: #dce7ee;
  outline: 2px solid #91acc2;
  outline-offset: -2px;
}
.home-tile strong {
  font-size: 28px;
  letter-spacing: -0.9px;
}
.home-tile .tile-category {
  font-size: 9px;
  letter-spacing: 0.09em;
}
.home-tile .tile-copy {
  font-size: 11px;
  line-height: 1.6;
}
.home-tile .tile-arrow {
  position: absolute;
  right: 22px;
  bottom: 19px;
  font-size: 18px;
  margin: 0;
}
#tileTraining {
  background: linear-gradient(115deg, #f2f5f4, #dce6ec);
}
#tileTraining:hover {
  background: #dce7ee;
}
#tileTraining svg {
  right: 30px;
  bottom: 12px;
  width: 185px;
  height: 175px;
  opacity: 0.4;
  transform: rotate(-8deg);
}
#tileTactics {
  background: #254158;
}
#tileTactics svg {
  right: 24px;
  bottom: 16px;
  width: 104px;
  height: 104px;
  opacity: 0.24;
  color: #bdd3e2;
}
#tileTactics .tile-arrow {
  left: 24px;
  right: auto;
}
#tileSettings svg {
  right: 54px;
  bottom: 25px;
  width: 64px;
  height: 64px;
  opacity: 0.24;
}
#tileSettings .tile-arrow {
  left: 24px;
  right: auto;
}
#clock {
  background: #dce7ef;
  color: #192d3f;
}
#selectionMarker > i {
  border-top-color: #dfebf4;
}
#selectionMarker {
  filter: drop-shadow(0 1px 2px #142b3b);
}
@media (max-width: 900px) {
  #tileTraining svg {
    right: 0;
    width: 140px;
    opacity: 0.3;
  }
  .home-tile strong {
    font-size: 25px;
  }
  #tileTactics svg {
    right: 12px;
    width: 82px;
    height: 82px;
  }
  #tileSettings svg {
    right: 25px;
    width: 58px;
    height: 58px;
  }
}

/* Shared alignment frame for masthead, tiles and keyboard footer. */
#menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px 0;
  gap: 0;
}
#menu .topbar,
.home-grid,
#menu .menu-footer {
  width: min(1180px, 88%);
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}
#menu .topbar {
  flex-shrink: 0;
  height: 48px;
  margin-top: 0;
  margin-bottom: 40px;
  gap: 0;
}
#menu .topbar nav {
  height: 42px;
  align-items: stretch;
  gap: 0;
}
#menu .nav-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  line-height: 1;
  margin: 0;
}
#menu .settings-nav {
  width: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.home-grid {
  margin-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  gap: 10px;
}
#menu #matchCard {
  padding: 24px 26px 0;
}
#menu .home-tile {
  padding: 24px 26px;
}
#menu #startBtn {
  width: calc(100% + 52px);
  margin-left: -26px;
  margin-right: -26px;
  padding-left: 26px;
  padding-right: 26px;
}
#menu .tile-heading {
  margin-top: 12px;
}
#menu .home-tile strong {
  margin-top: 12px;
}
#menu .team-vs {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  justify-content: center;
  align-items: center;
  padding: 15px 20px;
  gap: 16px;
}
#menu .team {
  justify-content: center;
}
#menu .team .crest {
  align-self: center;
}
#menu .vs {
  text-align: center;
}
#menu .match-config select {
  margin-top: 8px;
}
#menu .match-config {
  gap: 10px;
}
#menu .menu-footer {
  margin-top: 20px;
  margin-bottom: 0;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: center;
  gap: 26px;
  padding: 0;
  height: 22px;
}
#menu .menu-footer > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#menu .menu-footer kbd {
  margin: 0;
  min-width: 27px;
  text-align: center;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#tileTactics svg {
  right: 26px;
  bottom: 18px;
  height: 88px;
  width: 88px;
}
@media (max-width: 900px) {
  #menu .topbar,
  .home-grid,
  #menu .menu-footer {
    width: 92%;
  }
  #menu .nav-item {
    padding: 0 14px;
  }
  #menu .settings-nav {
    padding: 0;
    width: 40px;
  }
  #menu #matchCard,
  #menu .home-tile {
    padding-left: 20px;
    padding-right: 20px;
  }
  #menu #startBtn {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
  }
  #menu .team-vs {
    padding: 10px 0;
    gap: 6px;
  }
}
@media (max-width: 640px) {
  #menu {
    justify-content: flex-start;
    padding: 24px 0;
  }
  #menu .topbar {
    height: auto;
    gap: 20px;
    margin-bottom: 24px;
  }
  #menu .topbar nav {
    height: 40px;
  }
  #menu .nav-item {
    height: 40px;
    padding: 0 12px;
  }
  .home-grid {
    grid-template-rows: 360px 170px 150px;
  }
  #menu .menu-footer {
    margin-top: 18px;
  }
  #menu .team-vs {
    padding: 12px 4%;
  }
  #menu .extra-settings,
  #menu #trainingPicker {
    position: fixed;
  }
}
@media (min-width: 641px) and (max-height: 640px) {
  #menu {
    justify-content: flex-start;
    padding: 20px 0;
  }
  #menu .topbar {
    margin-bottom: 22px;
  }
  .home-grid {
    grid-template-rows: 190px 175px;
  }
  #menu .menu-footer {
    margin-top: 14px;
  }
}

#menu .topbar nav,
#menu .tile-arrow,
#menu .start-arrow,
#menu .drill-grid i {
  display: none !important;
}
#menu .match-config {
  grid-template-columns: 1fr 1fr;
}
#menu [hidden] {
  display: none !important;
}
#menuPages {
  width: min(1180px, 88%);
  margin: 0 auto;
  flex-shrink: 0;
  min-height: 447px;
}
.page-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.page-heading > button {
  height: 42px;
  padding: 0 22px;
  background: #dfe8ef;
  color: #213a50;
  font-size: 13px;
  font-weight: 700;
}
.page-heading span {
  font-size: 10px;
  color: #b3c7d5;
  letter-spacing: 0.06em;
}
.page-heading h1 {
  font-size: 27px;
  line-height: 1.2;
  margin-top: 5px;
  font-weight: 750;
}
#menu #trainingPicker,
#menu .extra-settings {
  position: relative;
  inset: auto;
  transform: none;
  width: 100%;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: transparent;
}
#menu .settings-head {
  display: none;
}
#menu .drill-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
#menu .drill-grid button {
  min-height: 120px;
  border: 0;
  border-radius: 0;
  background: #edf2f4;
  color: #203c53;
  padding: 23px 26px;
  transition: background 0.16s;
}
#menu .drill-grid button:nth-child(3n + 1) {
  background: #27445d;
  color: #f0f5f8;
}
#menu .drill-grid b {
  font-size: 22px;
  letter-spacing: -0.5px;
}
#menu .drill-grid span {
  color: #637d90;
  font-size: 11px;
  line-height: 1.6;
}
#menu .drill-grid button:nth-child(3n + 1) span {
  color: #b5c8d6;
}
#menu .drill-grid button:hover {
  background: #c9dce9;
  color: #1e384e;
}
#menu .extra-settings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
#menu .extra-settings > .config-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: #e9f0f3;
  color: #223e54;
}
#menu .extra-settings label,
#tacticPage label,
#trainingDetail label {
  font-size: 12px;
  color: inherit;
}
#menuPages select {
  border: 1px solid #8aa0b344;
  border-radius: 0;
  background: #fff8;
  color: #1a354b;
  height: 42px;
  margin-top: 9px;
  padding: 0 12px;
}
#menu .settings-note {
  display: none;
}
#tacticPage,
#trainingDetail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  min-height: 350px;
}
.tactic-options,
.drill-detail-options {
  padding: 32px;
  background: #edf2f4;
  color: #1b384e;
}
.tactic-options h2,
.drill-detail-options h2 {
  font-size: 27px;
  margin: 12px 0 28px;
}
.tactic-options .config-row {
  grid-template-columns: 1fr;
  gap: 24px;
}
.formation-board {
  position: relative;
  background: #25455d;
  padding: 25px;
  color: #e8f2f7;
}
.formation-board > span {
  font-size: 19px;
  font-weight: 700;
}
#formationPitch {
  position: relative;
  width: min(240px, 70%);
  height: 280px;
  border: 1px solid #b9d6e150;
  margin: 12px auto 0;
}
#formationPitch:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 1px solid #b9d6e150;
}
#formationPitch:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border: 1px solid #b9d6e150;
  border-radius: 50%;
}
#formationPitch i {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #edf3f6;
  color: #23445c;
  font-style: normal;
  font-size: 10px;
  display: grid;
  place-items: center;
}
.drill-preview {
  padding: 32px;
  background: #24445c;
  position: relative;
  overflow: hidden;
}
.drill-preview > span,
.tile-category {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #a9bfce;
}
.drill-preview h2 {
  font-size: 36px;
  margin: 20px 0 15px;
  letter-spacing: -1px;
}
.drill-preview p {
  font-size: 13px;
  line-height: 1.8;
  color: #c2d4df;
  max-width: 320px;
}
.drill-detail-options {
  display: flex;
  flex-direction: column;
}
.drill-detail-options p {
  font-size: 12px;
  line-height: 2;
  color: #516f84;
  margin-bottom: 28px;
}
.drill-detail-options .primary {
  margin-top: 30px;
  background: #496f98;
  color: white;
  border-radius: 0;
  justify-content: center;
}
.drill-field {
  position: relative;
  width: 230px;
  height: 112px;
  border: 1px solid #b7d2e05c;
  margin: 32px auto 0;
  transform: perspective(250px) rotateX(20deg);
}
.drill-field:after {
  content: "";
  position: absolute;
  left: 50%;
  height: 100%;
  border-left: 1px solid #b7d2e05c;
}
.drill-field i {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #dce9f2;
  border-radius: 50%;
  left: 20%;
  top: 30%;
}
.drill-field i:nth-child(2) {
  left: 66%;
  top: 20%;
}
.drill-field i:nth-child(3) {
  left: 45%;
  top: 70%;
}
.drill-field i:nth-child(4) {
  left: 80%;
  top: 65%;
}
.audio-credits {
  grid-column: 1/-1;
  padding: 18px 24px;
  background: #233f56;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.audio-credits small {
  font-size: 10px;
  color: #b8cbd8;
  line-height: 1.6;
}
.audio-credits a {
  text-decoration: underline;
  color: inherit;
}
.audio-credits label {
  display: flex;
  align-items: center;
  gap: 20px;
}
#menuSound {
  padding: 9px 20px;
  background: #e4edf3;
  color: #234056;
  font-size: 12px;
}
.menu-footer button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  padding: 0;
  color: inherit;
}
/* One horizontal broadcast strip: team / score / team / clock. */
#hud .score-wrap {
  width: auto;
  left: 28px;
  top: 24px;
}
#hud .scoreboard {
  display: flex;
  align-items: stretch;
  width: auto;
  height: 42px;
  border-radius: 2px;
  overflow: hidden;
}
#hud .score-team {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  min-width: 70px;
  padding: 0 15px;
}
#hud .scoreboard > b {
  height: 42px;
  min-width: 32px;
  font-size: 26px;
  display: grid;
  place-items: center;
}
#hud #clock {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  padding: 0;
  font-size: 15px;
  font-weight: 750;
  border-radius: 0;
  background: #dce7ef;
  color: #192d3f;
  margin-left: 3px;
}
#hud .score-meta {
  position: static;
  order: 2;
  margin-top: 6px;
  font-size: 10px;
}
#hud .score-wrap {
  display: flex;
  flex-direction: column;
}
#hud .attack-direction {
  display: none !important;
}
@media (max-width: 900px) {
  #menuPages {
    width: 92%;
  }
  #menu .extra-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #menu .drill-grid button {
    padding: 20px;
  }
  #menu .drill-grid b {
    font-size: 20px;
  }
}
@media (max-width: 640px) {
  #menuPages {
    min-height: 0;
  }
  .page-heading {
    margin-bottom: 18px;
  }
  #menu .drill-grid {
    grid-template-columns: 1fr 1fr;
  }
  #menu .drill-grid button {
    min-height: 115px;
    padding: 18px;
  }
  #menu .extra-settings {
    grid-template-columns: 1fr;
  }
  #tacticPage,
  #trainingDetail {
    grid-template-columns: 1fr;
  }
  .audio-credits {
    align-items: flex-start;
    flex-direction: column;
  }
  #hud .score-wrap {
    left: 14px;
    top: 16px;
  }
  #hud .scoreboard,
  #hud .scoreboard > b {
    height: 34px;
  }
  #hud .score-team {
    min-width: 46px;
    padding: 0 9px;
    font-size: 12px;
  }
  #hud .scoreboard > b {
    min-width: 23px;
    font-size: 22px;
  }
  #hud #clock {
    width: 59px;
    font-size: 12px;
  }
  #hud .hud-actions {
    top: 62px;
  }
}
#menu .extra-settings > .config-row {
  padding: 22px;
  gap: 16px;
}
#menu .audio-credits {
  grid-column: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 22px;
  background: #29485f;
}
#menu .audio-credits label {
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
#menuSound {
  height: 42px;
}
#menu .audio-credits small {
  margin-top: 18px;
  max-width: 260px;
}
/* Goal announcements occupy the upper HUD lane, clear of the bottom radar. */
#hud .announcement.goal {
  top: 84px;
  bottom: auto;
  left: 50%;
  width: min(330px, calc(100vw - 40px));
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: 14px 22px 15px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
#hud .announcement.goal > strong {
  display: block;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 3px;
  margin: 8px 0;
}
#hud .announcement.goal > span {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #eef5f0;
}
#hud .announcement.goal p {
  font-size: 11px;
  margin: 7px 0 0;
  color: #e0e9ef;
}
@media (max-height: 520px) {
  #hud .announcement.goal {
    top: 62px;
    padding: 9px 18px;
  }
  #hud .announcement.goal > strong {
    font-size: 28px;
    margin: 5px 0;
  }
}
#menu #menuBack,
#menu #pagePath {
  display: none !important;
}
.page-heading {
  gap: 0;
  margin-bottom: 22px;
}
.page-heading h1 {
  margin: 0;
}
#hud .score-meta {
  display: none !important;
}
#hud .scoreboard,
#hud .scoreboard > b {
  height: 36px;
}
#hud .scoreboard > b {
  font-size: 24px;
}
#hud .score-team {
  font-size: 15px;
}
#hud #clock {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}
@media (max-width: 640px) {
  #hud .scoreboard,
  #hud .scoreboard > b {
    height: 30px;
  }
  #hud .scoreboard > b {
    font-size: 21px;
  }
  #hud .score-team {
    font-size: 12px;
  }
  #hud #clock {
    font-size: 14px;
  }
}

#pauseScreen {
  padding: 26px;
  background: #09152088;
  backdrop-filter: none;
}
#pauseScreen .pause-panel {
  width: min(1180px, 96vw);
  max-height: 94vh;
  padding: 0;
  background: #182a3b;
  border: 0;
  border-radius: 0;
  overflow: auto;
  box-shadow: 0 24px 90px #0006;
}
.match-break-header {
  display: grid;
  grid-template-columns: 1fr 190px 1fr;
  align-items: center;
  background: #ecf1f4;
  color: #183248;
  padding: 22px 36px;
  gap: 18px;
}
.break-team {
  display: flex;
  align-items: center;
  gap: 22px;
}
.break-team.away {
  justify-content: flex-end;
}
.break-team strong {
  font-size: 20px;
  font-weight: 750;
}
.break-crest {
  width: 55px;
  height: 65px;
  flex-shrink: 0;
}
.break-crest svg {
  width: 100%;
  height: 100%;
}
.break-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.break-result time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.break-result > b {
  font-size: 39px;
  font-weight: 750;
  letter-spacing: 4px;
}
.break-tabs {
  height: 46px;
  display: flex;
  justify-content: center;
  background: #263d51;
}
.break-tabs button {
  padding: 0 30px;
  font-size: 13px;
  color: #b9cad7;
}
.break-tabs button.active {
  background: #456a8e;
  color: white;
}
.break-content {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 410px;
}
.break-pitch-panel {
  padding: 22px 32px;
  background: #15293b;
}
.pitch-caption {
  display: flex;
  justify-content: space-between;
  color: #a7bfd0;
  font-size: 11px;
  margin-bottom: 14px;
}
.pitch-caption b {
  font-size: 16px;
  color: #e4edf4;
}
#pausePitch {
  height: 330px;
  max-width: 470px;
  margin: auto;
  position: relative;
  background: linear-gradient(0deg, #274c58, #315c65);
}
.pitch-lines {
  position: absolute;
  inset: 12px;
  border: 1px solid #b4d1d452;
  pointer-events: none;
}
.pitch-lines:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #b4d1d452;
}
.pitch-lines:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 67px;
  height: 67px;
  border: 1px solid #b4d1d452;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch-player {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 82px;
  color: #f1f6f8;
  padding: 3px;
}
.pitch-player > b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e2ebf0;
  color: #203c51;
  font-size: 11px;
}
.pitch-player.selected > b {
  background: #8db5d5;
  color: #12273b;
  box-shadow: 0 0 0 3px #e9f5ff66;
}
.pitch-player span {
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.pitch-player span > i {
  display: inline-block;
  width: 5px;
  height: 8px;
  margin-left: 4px;
  background: #e9c64c;
}
.pitch-player span > i.red {
  background: #ed6c6c;
}
.pitch-player > em {
  width: 43px;
  height: 2px;
  background: #091b2b66;
}
.pitch-player > em > i {
  display: block;
  height: 100%;
  background: #a3c5d5;
}
.pitch-player.sent-off {
  opacity: 0.35;
}
.pitch-player:active {
  transform: translate(-50%, -50%);
}
.break-stats {
  display: flex;
  justify-content: space-around;
  gap: 15px;
  font-size: 10px;
  color: #a4bdcb;
  margin-top: 19px;
}
.break-stats b {
  margin-left: 8px;
  font-size: 13px;
  color: white;
}
.break-detail {
  padding: 26px 30px;
  background: #233b4f;
}
.break-detail h2 {
  font-size: 24px;
  margin-bottom: 24px;
}
.break-detail label {
  display: block;
  color: #bdcfdc;
  font-size: 12px;
  margin-bottom: 18px;
}
.break-detail select {
  background: #e9f0f5;
  color: #243f55;
  border: 0;
  border-radius: 0;
  height: 38px;
  margin-top: 9px;
  font-size: 12px;
}
.tactic-slider {
  display: grid !important;
  grid-template-columns: 1fr 35px;
  gap: 10px;
  align-items: center;
  margin-top: 23px;
  margin-bottom: 0 !important;
}
.tactic-slider input {
  grid-column: 1/3;
  width: 100%;
  accent-color: #91b5d1;
  height: 3px;
  cursor: pointer;
}
.tactic-slider output {
  text-align: right;
  font-size: 13px;
  color: white;
}
.break-player-role {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #90b2cd;
  display: block;
  margin-bottom: 10px;
}
.formation-options {
  display: grid;
  gap: 12px;
}
.formation-options button {
  padding: 18px;
  background: #314e65;
  text-align: left;
  font-size: 21px;
  font-weight: 650;
}
.formation-options button.active {
  background: #567b9c;
  color: white;
}
#pauseAudio {
  padding: 13px 20px;
  background: #456a8e;
  margin-top: 12px;
  font-size: 12px;
}
.break-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background: #142738;
}
.break-footer > div {
  display: flex;
  gap: 8px;
}
.break-footer button {
  height: 38px;
  padding: 0 17px;
  font-size: 12px;
  background: #2d485f;
  border-radius: 0;
  white-space: nowrap;
}
.break-footer .break-resume {
  background: #567d9f;
  color: white;
  min-width: 145px;
}
.break-footer kbd {
  margin-right: 10px;
  border: 0;
  font-size: 10px;
  color: #d7e8f6;
}
@media (max-width: 760px) {
  #pauseScreen {
    padding: 15px;
  }
  .match-break-header {
    grid-template-columns: 1fr 106px 1fr;
    padding: 18px 20px;
    gap: 10px;
  }
  .break-team {
    gap: 9px;
  }
  .break-team strong {
    font-size: 13px;
  }
  .break-crest {
    width: 32px;
    height: 40px;
  }
  .break-result > b {
    font-size: 30px;
    letter-spacing: 1px;
  }
  .break-content {
    grid-template-columns: 1fr 1fr;
  }
  .break-pitch-panel {
    padding: 20px 14px;
  }
  .break-detail {
    padding: 22px 18px;
  }
  .pitch-player {
    width: 62px;
  }
  .pitch-player span {
    font-size: 8px;
  }
  .break-tabs button {
    padding: 0 22px;
  }
  .break-footer {
    flex-wrap: wrap;
    padding: 15px;
  }
  .break-footer button {
    padding: 0 11px;
    font-size: 11px;
  }
}
@media (max-width: 520px) {
  .break-team strong {
    font-size: 11px;
  }
  .break-crest {
    display: none;
  }
  .break-content {
    grid-template-columns: 1fr;
  }
  .break-detail {
    min-height: 300px;
  }
  #pausePitch {
    height: 290px;
  }
  .break-tabs {
    height: 42px;
  }
  .break-tabs button {
    padding: 0 18px;
  }
  .break-footer > div {
    width: 100%;
    justify-content: space-between;
  }
  .break-footer button {
    flex: 1;
  }
}

#pausePending {
  position: fixed;
  top: 74px;
  right: 28px;
  background: #0d1b22ed;
  border-left: 2px solid #7197b9;
  padding: 10px 13px;
  color: #ecf2f5;
  font-size: 12px;
  pointer-events: none;
}
#pausePending span {
  display: block;
  font-size: 10px;
  color: #9aabb8;
  margin-top: 5px;
}
#pauseBtn[data-pending="true"] {
  opacity: 1;
  background: #42677e;
}

/* Online shares the main menu frame, broadcast palette and square cards. */
#menu[data-page="online"] {
  justify-content: flex-start;
  padding-top: clamp(24px, 6vh, 58px);
  padding-bottom: 28px;
}
#menu[data-page="online"] .topbar {
  margin-bottom: 28px;
}
#menu[data-page="online"] #menuPages {
  min-height: 0;
}
#onlineLobby {
  position: relative;
  min-width: 0;
  width: 100%;
  color: #f2f5f4;
}
#onlineLobby[hidden],
#onlineBadge[hidden] {
  display: none !important;
}
#onlineLobby * {
  box-sizing: border-box;
}
.online-shell {
  min-width: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.5;
}
.online-utility {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  min-height: 30px;
  color: #c2d2df;
  font-size: 14px;
}
#onlineIdentity {
  min-width: 0;
  overflow-wrap: anywhere;
}
.online-progress {
  font-size: 13px;
  visibility: hidden;
  margin-left: auto;
  white-space: nowrap;
}
#onlineLobby[aria-busy="true"] .online-progress {
  visibility: visible;
}
#onlineLobby[aria-busy="true"] {
  cursor: progress;
}
.online-text-button {
  background: none !important;
  border: 0 !important;
  color: #dce7ef !important;
  font: inherit !important;
  padding: 4px 0 !important;
  flex-shrink: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
}
#onlineLobby h2 {
  font-size: 26px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.8px;
  margin: 7px 0 0;
}
.online-eyebrow {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: 0.09em;
  color: #648097;
}
.online-light-panel {
  background: #edf2f3;
  color: #1b354d;
  padding: 26px;
  min-width: 0;
}
.online-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 10px;
}
.online-intro {
  display: flex;
  flex-direction: column;
  padding: 34px;
  background: linear-gradient(135deg, #1b354d, #142a40);
  min-height: 365px;
}
.online-intro .online-eyebrow {
  color: #a3bed3;
}
#onlineLobby .online-intro h2 {
  font-size: 36px;
  line-height: 1.3;
  margin-top: 22px;
  letter-spacing: -1.4px;
}
.online-intro > p {
  font-size: 16px;
  color: #b7cbd9;
  margin-top: 16px;
}
.online-mode {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #c8d8e4;
  font-size: 14px;
}
.online-mode > strong {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 4px;
  color: #e8f1f6;
}
.online-mode strong span {
  font-size: 14px;
  vertical-align: middle;
  margin: 0 16px;
  color: #adc4d5;
}
#onlineLoginForm {
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}
#onlineLobby label {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  min-width: 0;
  margin: 0;
}
#onlineLobby input,
#onlineLobby select {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  max-width: 100%;
  padding: 11px 13px;
  background: #f8fafb;
  border: 1px solid #bccbd5;
  border-radius: 0;
  color: #19354c;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.3;
  margin: 0;
  outline-offset: 3px;
}
#onlineLobby input::placeholder {
  color: #617b8d;
  opacity: 1;
}
#onlineLobby input:focus-visible,
#onlineLobby select:focus-visible,
#onlineLobby button:focus-visible {
  outline: 2px solid #6a98bf;
  outline-offset: 3px;
}
#onlineLobby select:disabled {
  opacity: 0.7;
  background: #e2eaef;
  cursor: default;
}
#onlineLobby .online-primary,
#onlineLobby .online-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 0;
  height: auto;
  padding: 12px 18px;
  border-radius: 0;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
  border: 1px solid transparent;
  letter-spacing: -0.25px;
  white-space: normal;
}
#onlineLobby .online-primary {
  background: #496f98;
  color: #f6f9fb;
}
#onlineLobby .online-primary:hover:not(:disabled) {
  background: #5b82aa;
}
#onlineLobby .online-secondary {
  background: transparent;
  border-color: #b5c6d3;
  color: #29465b;
}
#onlineLobby .online-secondary:hover:not(:disabled) {
  background: #dce7ee;
}
#onlineLobby button:disabled {
  cursor: not-allowed;
}
#onlineLobby .online-primary:disabled {
  background: #d0dbe4;
  color: #667f92;
}
.online-field-note {
  font-size: 14px;
  color: #5e788a;
  margin: -12px 0 0;
}
.online-rooms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 10px;
  align-items: stretch;
}
.online-list-panel {
  padding: 26px 0 0;
  display: flex;
  flex-direction: column;
  min-height: 414px;
}
.online-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 26px 22px;
}
#onlineRoomCount {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  color: #6c8598;
  margin-left: 6px;
}
#onlineLobby .online-toolbar .online-secondary {
  font-size: 14px;
  min-height: 40px;
  padding: 9px 12px;
}
.online-list-label {
  display: flex;
  justify-content: space-between;
  padding: 11px 26px;
  background: #dfe8ee;
  color: #587186;
  font-size: 12px;
  font-weight: 650;
}
#onlineRoomList {
  overflow-y: auto;
  max-height: 365px;
  min-height: 270px;
  scrollbar-width: thin;
  scrollbar-color: #9bb0c1 #e4ecf1;
}
#onlineLobby .online-room-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  padding: 18px 26px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #cfdae2;
  border-radius: 0;
  color: #1b354d;
  font: inherit;
  cursor: pointer;
  min-height: 80px;
}
#onlineLobby .online-room-row:hover:not(:disabled) {
  background: #dce7ee;
}
#onlineLobby .online-room-row:disabled {
  opacity: 0.65;
}
.online-room-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.online-room-name strong {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.online-room-name > span {
  font-size: 12px;
  color: #627c8f;
}
.online-room-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #506e84;
}
.online-enter-label {
  background: #496f98;
  color: white;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.online-room-row:disabled .online-enter-label {
  background: #d6e0e7;
  color: #6c8393;
}
.online-empty {
  margin: 0;
  min-height: 270px;
  padding: 42px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 650;
  color: #47647b;
}
.online-empty > span {
  font-size: 14px;
  font-weight: 400;
  color: #6a8293;
}
.online-create-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px;
  background: linear-gradient(135deg, #1b354d, #142a40);
  color: #f2f5f4;
  min-width: 0;
}
.online-create-panel .online-eyebrow {
  color: #a3bed3;
}
.online-form-grid {
  display: grid;
  gap: 18px;
  min-width: 0;
}
#onlineLobby .online-create-panel input,
#onlineLobby .online-create-panel select {
  background: #273f53;
  border-color: #476175;
  color: #f1f5f8;
}
#onlineLobby .online-create-panel input::placeholder {
  color: #a7bdcd;
}
.online-optional {
  position: absolute;
  right: 0;
  top: 0;
  color: #a7bdcd;
  font-size: 12px;
  font-weight: 400;
}
.online-create-panel > .online-primary {
  width: 100%;
  margin-top: auto;
}
.online-room-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
  min-width: 0;
}
.online-room-heading > div {
  min-width: 0;
}
#onlineLobby #onlineTitle {
  font-size: 28px;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.online-room-heading .online-eyebrow {
  color: #aac2d3;
}
#onlineRoomMeta {
  color: #c2d4e1;
  flex-shrink: 0;
  font-size: 14px;
}
.online-match-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 290px);
  gap: 10px;
  align-items: stretch;
}
#onlineSeats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.online-seat {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 0;
  min-height: 350px;
  text-align: center;
  background: #edf2f3;
  color: #19344b;
}
.online-seat.home {
  background: linear-gradient(135deg, #1b354d, #142a40);
  color: #f0f5f8;
}
.online-seat-top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  color: #647d90;
  align-items: center;
}
.online-seat.home .online-seat-top {
  color: #b8cfdf;
}
.online-ready-label {
  letter-spacing: 0;
  background: #dde7ee;
  padding: 4px 8px;
  color: #36546a;
  font-weight: 600;
  white-space: nowrap;
}
.online-seat.home .online-ready-label {
  background: #3b5870;
  color: #e4eef5;
}
#onlineLobby .online-seat .crest {
  width: 74px;
  height: 84px;
  margin: 24px 0 18px;
  flex-shrink: 0;
}
.online-seat h3 {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.75px;
  margin: 0;
  overflow-wrap: anywhere;
}
.online-formation {
  font-size: 13px;
  color: #7690a4;
  margin: 8px 0 24px;
}
.online-seat.home .online-formation {
  color: #9eb9ce;
}
.online-player-name {
  margin-top: auto;
  min-height: 64px;
  padding: 18px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: calc(100% + 48px);
  background: #dfe8ee;
  font-size: 16px;
}
.online-player-name > strong {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
.online-player-name > span {
  background: #496f98;
  color: white;
  padding: 2px 6px;
  flex-shrink: 0;
  font-size: 12px;
}
.online-seat.home .online-player-name {
  background: #25445d;
}
.online-seat.empty .crest {
  opacity: 0.35;
}
.online-seat.empty .online-player-name {
  font-size: 14px;
  color: #6b8395;
}
.online-match-options {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
#onlineRoomHint {
  font-size: 14px;
  line-height: 1.65;
  color: #5d778a;
  margin: 0;
  overflow-wrap: anywhere;
}
.online-room-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
#onlineJoin {
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0 auto;
  padding: 32px;
}
.online-join-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#onlineError {
  padding: 14px 18px;
  background: #f4e7e7;
  color: #71353d;
  border-left: 3px solid #ab636e;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#onlineBadge {
  position: fixed;
  right: 20px;
  top: 18px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #142a40ec;
  color: #eaf1f6;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.4;
}
#onlineBadge button {
  background: transparent;
  border: 0;
  border-left: 1px solid #7290a3;
  color: #c5dbe9;
  padding: 4px 0 4px 14px;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 1000px) {
  .online-room-detail {
    gap: 10px;
  }
  .online-enter-label {
    display: none;
  }
  .online-rooms-grid {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
  .online-seat {
    padding-left: 18px;
    padding-right: 18px;
  }
  .online-player-name {
    width: calc(100% + 36px);
  }
  .online-seat h3 {
    font-size: 20px;
  }
}
@media (max-width: 800px) {
  .online-rooms-grid,
  .online-match-grid {
    grid-template-columns: 1fr;
  }
  .online-list-panel {
    min-height: 300px;
  }
  .online-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .online-form-grid > label:last-child {
    grid-column: 1/-1;
  }
  .online-create-panel > .online-primary {
    align-self: flex-end;
    min-width: 180px;
    width: auto;
  }
  .online-match-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .online-room-actions {
    grid-column: 2;
    grid-row: 1/4;
    justify-content: flex-end;
  }
  .online-entry-grid {
    grid-template-columns: 1fr 1fr;
  }
  #onlineLobby .online-intro h2 {
    font-size: 28px;
  }
  .online-intro {
    padding: 26px;
  }
}
@media (max-width: 640px) {
  #menu .topbar nav {
    overflow-x: auto;
    justify-content: flex-start;
  }
  #menu .nav-item {
    flex: 1 0 auto;
    padding: 0 10px;
    font-size: 12px;
  }
  #menu[data-page="online"] .topbar {
    margin-bottom: 22px;
  }
  .online-utility {
    gap: 10px;
    font-size: 13px;
  }
  .online-progress {
    font-size: 12px;
  }
  #onlineLobby h2 {
    font-size: 24px;
  }
  .online-entry-grid {
    grid-template-columns: 1fr;
  }
  .online-intro {
    min-height: 0;
    padding: 26px;
  }
  .online-intro > p {
    margin-top: 10px;
  }
  .online-mode {
    padding-top: 20px;
  }
  .online-mode > strong {
    font-size: 28px;
  }
  #onlineLobby .online-intro h2 {
    font-size: 28px;
    margin-top: 14px;
  }
  .online-light-panel,
  .online-create-panel {
    padding: 22px;
  }
  .online-list-panel {
    padding: 22px 0 0;
  }
  .online-toolbar {
    padding: 0 20px 20px;
  }
  .online-list-label {
    padding-left: 20px;
    padding-right: 20px;
  }
  #onlineLobby .online-room-row {
    padding: 16px 20px;
    gap: 14px;
  }
  .online-room-detail {
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
  }
  .online-form-grid {
    grid-template-columns: 1fr;
  }
  .online-form-grid > label:last-child {
    grid-column: auto;
  }
  .online-create-panel > .online-primary {
    width: 100%;
  }
  .online-room-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  #onlineLobby #onlineTitle {
    font-size: 25px;
  }
  .online-match-options {
    display: flex;
    gap: 20px;
  }
  .online-room-actions {
    margin-top: 0;
  }
  #onlineSeats {
    gap: 8px;
  }
  .online-seat {
    padding: 16px 12px 0;
    min-height: 290px;
  }
  .online-seat-top {
    flex-direction: column;
    gap: 7px;
  }
  .online-seat h3 {
    font-size: 19px;
  }
  .online-player-name {
    width: calc(100% + 24px);
    padding: 14px 9px;
    font-size: 14px;
    min-height: 68px;
  }
  #onlineLobby .online-seat .crest {
    width: 55px;
    height: 64px;
    margin: 20px 0 14px;
  }
  #onlineBadge {
    top: auto;
    bottom: 16px;
    right: 12px;
    font-size: 12px;
    max-width: calc(100% - 24px);
  }
  #onlineJoin {
    padding: 24px;
  }
  .online-progress {
    margin-left: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #onlineLobby * {
    scroll-behavior: auto;
    transition: none;
  }
}
#menu .online-nav-button {
  height: 42px;
  padding: 0 22px;
  background: #496f98;
  color: #f4f8fa;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#menu .online-nav-button:hover {
  background: #5b82aa;
}
#menu .online-nav-button:focus-visible {
  outline: 2px solid #c3d8e7;
  outline-offset: 3px;
}
#menu[data-page="online"] .online-nav-button {
  background: #dce7ef;
  color: #213e54;
}
@media (max-width: 640px) {
  #menu .online-nav-button {
    height: 40px;
    padding: 0 15px;
    font-size: 13px;
  }
  #menu .topbar {
    flex-wrap: nowrap;
  }
}

/* Room selection and setup use the same card geometry as kickoff. */
.online-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.online-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 1fr);
  gap: 10px;
}
.online-match-preview {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: linear-gradient(145deg, #dfe9ec, #c1d2dd);
  color: #1b354d;
  min-width: 0;
}
.online-match-preview .online-eyebrow {
  color: #58768d;
}
#onlineLobby .online-match-preview h2 {
  font-size: 32px;
  margin-top: 6px;
}
.online-preview-teams {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 25px;
  padding: 45px 0;
  min-height: 220px;
}
#onlineLobby .online-preview-teams .crest {
  width: 90px;
  height: 105px;
}
.online-preview-info {
  border-top: 1px solid #a7bdcc;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}
.online-preview-info > span:first-child {
  font-size: 28px;
  font-weight: 750;
}
.online-create-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: auto;
}
#onlineLobby .online-create-panel .online-secondary {
  color: #d9e6ee;
  border-color: #658094;
  background: transparent;
}
#onlineLobby [hidden] {
  display: none !important;
}
@media (max-width: 800px) {
  .online-create-layout {
    grid-template-columns: 1fr;
  }
  .online-match-preview {
    padding: 24px;
  }
  .online-preview-teams {
    min-height: 130px;
    padding: 20px 0;
  }
  #onlineLobby .online-preview-teams .crest {
    width: 58px;
    height: 68px;
  }
  .online-preview-info {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  .online-create-layout .online-form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .online-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .online-toolbar-actions {
    width: 100%;
  }
  .online-toolbar-actions > button {
    flex: 1;
  }
  .online-preview-info {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  #onlineLobby .online-match-preview h2 {
    font-size: 27px;
  }
}

/* Kickoff is the single entry for offline and online friendlies. */
#menu .kickoff-home-card {
  grid-column: 1/3;
  grid-row: 1/3;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 26px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  color: #f3f6f6;
  background: linear-gradient(135deg, #1b354d, #142a40);
  cursor: pointer;
  font: inherit;
}
#menu .kickoff-heading {
  font-size: 35px;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-top: 12px;
}
.kickoff-heading small {
  font-size: 12px;
  color: #9db5c7;
  letter-spacing: 0;
  font-weight: 500;
}
#menu .kickoff-copy {
  margin-top: 12px;
  color: #a9c1d2;
  font-size: 14px;
  line-height: 1.6;
}
.kickoff-team-art,
.online-mode-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex: 1;
  padding: 32px 0;
}
#menu .kickoff-team-art .crest,
#menu .online-mode-art .crest {
  width: 76px;
  height: 88px;
  margin: 0;
}
#menu .kickoff-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 20px 26px;
  background: #496f98;
  color: #f6f9fb;
  font-size: 16px;
  font-weight: 700;
  margin: 0 -26px -26px;
}
#menu .kickoff-home-card:hover .kickoff-footer,
#menu .kickoff-mode:hover .kickoff-footer {
  background: #5b82aa;
}
#kickoffPage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#kickoffPage[hidden],
#aiMatchPage[hidden] {
  display: none;
}
#menu .kickoff-mode {
  min-width: 0;
  min-height: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 26px;
  text-align: left;
  background: #edf2f3;
  color: #19344b;
  font: inherit;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
#menu .kickoff-mode > strong {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -1px;
  margin-top: 12px;
}
#menu .kickoff-mode .kickoff-copy {
  color: #637f95;
}
#menu .kickoff-mode.online-mode {
  background: linear-gradient(135deg, #1b354d, #142a40);
  color: #f3f6f6;
}
#menu .kickoff-mode.online-mode .kickoff-copy,
#menu .kickoff-home-card .tile-category,
#menu .online-mode .tile-category {
  color: #a9c1d2;
}
.mode-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 28px 0;
}
.mode-art svg {
  width: 240px;
  max-width: 100%;
  height: 150px;
  stroke: #7696ad;
  stroke-width: 3;
}
#menu .kickoff-home-card:focus-visible,
#menu .kickoff-mode:focus-visible {
  outline: 2px solid #b3d1e5;
  outline-offset: 4px;
}
#aiMatchPage {
  max-width: 760px;
  margin: auto;
}
#menu #aiMatchPage #matchCard {
  min-height: 440px;
}
@media (max-width: 700px) {
  #kickoffPage {
    grid-template-columns: 1fr;
  }
  #menu .kickoff-mode {
    min-height: 300px;
  }
  #menu .kickoff-home-card {
    min-height: 340px;
    padding: 22px;
  }
  #menu .kickoff-home-card .kickoff-footer {
    margin: 0 -22px -22px;
  }
  .mode-art {
    min-height: 130px;
    padding: 20px 0;
  }
  #menu .kickoff-mode > strong {
    font-size: 28px;
  }
}
@media (max-width: 560px) {
  #menu .kickoff-home-card {
    grid-column: 1/-1;
    grid-row: auto;
  }
}

/* v6.3.4: quieter navigation, optically aligned crests and unified motion. */
button {
  position: relative;
  isolation: isolate;
}
button:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.06);
}
.ui-click-wave {
  position: absolute;
  z-index: 20;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  animation: uiClickWave 0.5s cubic-bezier(0.2, 0.72, 0.25, 1) forwards;
}
@keyframes uiClickWave {
  from {
    opacity: 0.72;
    transform: scale(0.15);
  }
  to {
    opacity: 0;
    transform: scale(18);
  }
}

#loading .brand {
  animation: loadingBrandIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#loading .brand svg {
  animation: loadingMarkPulse 1.7s ease-in-out infinite 0.55s;
}
#loading .loader-track {
  animation: loadingTrackIn 0.65s ease-out 0.16s both;
}
#loading p {
  animation: loadingCopyIn 0.55s ease-out 0.28s both;
}
@keyframes loadingBrandIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
    letter-spacing: 0.02em;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes loadingMarkPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(113, 151, 185, 0.72));
    transform: scale(1.08);
  }
}
@keyframes loadingTrackIn {
  from {
    opacity: 0;
    transform: scaleX(0.25);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes loadingCopyIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.ui-surface-enter {
  animation: uiSurfaceIn 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#menu.ui-surface-enter .topbar {
  animation: uiMastheadIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#menu.ui-surface-enter .home-grid > :nth-child(1) {
  animation: uiTileIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}
#menu.ui-surface-enter .home-grid > :nth-child(2) {
  animation: uiTileIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
#menu.ui-surface-enter .home-grid > :nth-child(3) {
  animation: uiTileIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}
#menu.ui-surface-enter .home-grid > :nth-child(4) {
  animation: uiTileIn 0.68s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
#menu.ui-surface-enter .menu-footer {
  animation: uiMastheadIn 0.55s ease-out 0.3s both;
}
.ui-page-enter .page-heading {
  animation: uiMastheadIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ui-page-enter #menuPageBody > :not([hidden]),
.ui-page-enter #menuPageBody > :not([hidden]) > :not([hidden]) {
  animation: uiTileIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}
.ui-panel-enter {
  animation: uiTileIn 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.online-seat {
  animation: uiTileIn 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.online-seat:nth-child(2) {
  animation-delay: 0.07s;
}
.ui-control-change {
  animation: uiControlChange 0.4s ease-out;
}
@keyframes uiSurfaceIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes uiMastheadIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes uiTileIn {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes uiControlChange {
  0% {
    box-shadow: 0 0 0 0 rgba(113, 151, 185, 0.55);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(113, 151, 185, 0);
  }
}

#menu .kickoff-home-card,
#menu .home-tile,
#menu .kickoff-mode,
#menu .drill-grid button,
#menu .page-heading > button,
#onlineLobby button,
#pauseScreen button,
#results button {
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.72, 0.25, 1),
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.16s ease;
}
#menu .kickoff-home-card:hover,
#menu .kickoff-mode:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(2, 10, 18, 0.28);
}
#menu .kickoff-home-card:hover .kickoff-team-art,
#menu .kickoff-mode:hover .mode-art {
  transform: translateY(-4px) scale(1.025);
}
.kickoff-team-art,
.mode-art {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

#menu .kickoff-heading {
  margin-top: 0;
  font-size: clamp(43px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -2.6px;
  font-weight: 850;
}
#menu .home-tile strong {
  margin-top: 0;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -2px;
}
#menu #tileSettings strong {
  font-size: clamp(31px, 2.65vw, 40px);
}
#menu .kickoff-mode > strong {
  margin-top: 0;
  font-size: clamp(39px, 3.6vw, 50px);
  line-height: 1.05;
  letter-spacing: -2px;
  font-weight: 850;
}
#menu .drill-grid button {
  display: flex;
  align-items: center;
  min-height: 132px;
}
#menu .drill-grid b {
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.1;
  letter-spacing: -1.3px;
}

.crest,
#menu .crest,
#onlineLobby .crest {
  display: grid;
  place-items: center;
}
.crest svg,
#menu .crest svg,
#onlineLobby .crest svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  object-fit: contain;
}
.crest .crest-mark {
  transform-box: view-box;
  transform-origin: 40px 45px;
}
.away-crest .crest-mark {
  transform: translateY(-0.5px);
}

.ai-mode-art svg {
  width: 184px;
  height: 184px;
  overflow: visible;
  stroke: #527791;
  stroke-width: 3;
}
.ai-mode-art .ai-orbit {
  fill: rgba(113, 151, 185, 0.1);
  stroke-width: 4;
}
.ai-mode-art .ai-core {
  fill: #21445c;
  stroke: none;
}
.ai-mode-art .ai-cut {
  fill: #edf2f3;
  stroke: none;
}
.ai-mode-art circle {
  fill: #7197b9;
  stroke: none;
}
.ai-mode-art .ai-signal {
  stroke-linecap: round;
}

.online-match-preview {
  justify-content: center;
}
.online-preview-teams {
  margin-top: 0;
}

@media (max-width: 700px) {
  #menu .brand > .brand-title {
    font-size: 22px;
    letter-spacing: -1.15px;
  }
  #menu .kickoff-heading {
    font-size: 40px;
  }
  #menu .home-tile strong {
    font-size: 32px;
  }
  #menu .kickoff-mode > strong {
    font-size: 34px;
  }
}

@media (max-width: 390px) {
  #menu .brand {
    gap: 7px;
  }
  #menu .brand svg {
    width: 22px;
    height: 22px;
  }
  #menu .brand > .brand-title {
    font-size: 20px;
    letter-spacing: -1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-click-wave {
    display: none;
  }
}