* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  background-attachment: fixed;
  color: #e8f0e8;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 24px 1em;
}

h1 {
  margin: 0 0 16px;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#scoreboard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18241b;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 18px;
  box-sizing: border-box;
}

.scoreboard-side {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scoreboard-team {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.scoreboard-score {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 2px 12px;
  min-width: 36px;
  text-align: center;
}

.scoreboard-center {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
  text-align: center;
}

.scoreboard-penalties {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd60a;
  letter-spacing: 0.5px;
}

#pitch {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(7, 80px);
  gap: 0;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  overflow: hidden;
}

#board {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  grid-template-rows: auto;
  gap: 12px;
  align-items: stretch;
}

#pitch-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#pitch-wrapper {
  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.column-ticks {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  margin-bottom: 2px;
}

.column-tick {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.cell.shooting-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.shooting-zone-label {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  padding: 1px 5px;
  white-space: nowrap;
  pointer-events: none;
}

#hands-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#panel-local-team .in-play-hand,
#panel-away-team .in-play-hand {
  margin: 0 auto;
}

#right-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}

.rail-team {
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rail-team-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rail-team-name {
  flex-shrink: 0;
}

.rail-ap-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.rail-ap-dots {
  display: flex;
  gap: 5px;
}

.rail-ap-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.rail-ap-dot.filled {
  background: #ffd24d;
  border-color: #ffd24d;
  box-shadow: 0 0 8px rgba(255, 210, 77, 0.5);
}

.rail-ap-dot.empty {
  background: rgba(255, 255, 255, 0.08);
}

.rail-decks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.rail-decks .deck {
  flex: 0 0 auto;
}

.rail-decks .deck-back {
  width: 64px;
  aspect-ratio: 16 / 21;
  font-size: 8px;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  display: flex;
}

.rail-decks .deck-type {
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
  text-align: center;
}

.rail-decks .deck-team {
  font-size: 8px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-decks .deck-count {
  font-size: 7px;
  text-align: center;
  opacity: 0.7;
}

#rail-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}

.rail-clock {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rail-playing {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rail-end-turn {
  width: 100%;
  background: linear-gradient(180deg, #3d5a48, #2c4234);
  color: #e8f0e8;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.rail-end-turn:hover {
  background: linear-gradient(180deg, #4a6b56, #3d5a48);
  border-color: rgba(255, 210, 77, 0.7);
}

.panel-team-effects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.team-effect-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e6f2e9;
  cursor: help;
  position: relative;
}

.team-effect-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
  font-size: 11px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 260px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}

.team-effect-badge:hover::after {
  opacity: 1;
}

.team-effect-badge.team-artifact {
  background: #3a2b12;
  border-color: rgba(255, 210, 77, 0.45);
  color: #ffd24d;
}

.panel-team-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

.hand-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hand-panel .panel-team {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.hand-panel .panel-hand {
  min-width: 0;
  min-height: 0;
}

#match-log {
  width: 100%;
  flex: 1;
  max-height: 450px;
  min-height: 0;
  overflow-y: auto;
  background: #18241b;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.log-entry {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.4;
}

.log-minute {
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  font-size: 11px;
}

.log-team {
  font-weight: 800;
  flex-shrink: 0;
}

.log-text {
  color: #d9e5d9;
}

.log-entry.log-goal .log-text {
  color: #ffd24d;
  font-weight: 700;
}

.log-entry.log-denied .log-text {
  color: #ff9f7a;
  font-style: italic;
}

.log-entry.log-card .log-text {
  color: #ff8c4d;
  font-weight: 700;
}

.log-entry.log-injury .log-text {
  color: #ff6b6b;
  font-weight: 700;
}

.log-entry.log-sub .log-text {
  color: #9fb8ff;
}

.log-entry.log-error .log-text {
  color: #ff4444;
  font-weight: 700;
}

#benches {
  display: none;
}

.side-bench {
  flex: 1;
}

.bench {
  flex: 1;
}

.bench-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.bench-reserves {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bench-slot {
  position: relative;
  width: 52px;
  height: 60px;
}

.bench-slot-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 52px;
  height: 60px;
  margin: 1px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  color: #b9bdc7;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  user-select: none;
}

.bench-slot .player-token,
.bench-slot .player-token.half-left,
.bench-slot .player-token.half-right {
  width: 34px;
  height: 34px;
  left: calc(50% - 17px);
  top: 4px;
  right: auto;
  font-size: 10px;
}

.bench-slot .player-token .player-token-role {
  font-size: 10px;
}

.bench-slot .player-token-name {
  font-size: 7px;
  top: calc(100% + 0px);
  padding: 1px 3px;
}

.cell {
  height: 80px;
  background: transparent;
  position: relative;
}

.cell.duel {
  background: radial-gradient(circle, rgba(255, 210, 77, 0.18), transparent 70%);
}

.cell.duel::after {
  content: '1 v 1';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: rgba(255, 210, 77, 0.7);
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 1px 5px;
  pointer-events: none;
  z-index: 9;
}

.cell.pass-target {
  outline: 3px solid #ffd24d;
  outline-offset: -3px;
  background: #f4c74d;
  cursor: pointer;
}

.cell.longpass-target {
  outline: 3px dashed #ff8c42;
  outline-offset: -3px;
  background: #e8763a;
  cursor: pointer;
}

.cell.move-cell-target {
  background: transparent;
  cursor: pointer;
}

.cell.move-cell-target::before,
.cell.move-cell-target::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.cell.move-cell-target::before {
  top: -2px;
  left: -2px;
  border-top: 3px solid #4dff88;
  border-left: 3px solid #4dff88;
}

.cell.move-cell-target::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 3px solid #4dff88;
  border-right: 3px solid #4dff88;
}

.cell.move-cell-target:hover {
  background: rgba(77, 255, 136, 0.28);
}

.cell.longball-target {
  outline: 3px solid #ff9ff5;
  outline-offset: -3px;
  background: #e08fd9;
  cursor: pointer;
}

.player-token.move-player-target {
  outline: 3px solid #4dff88;
  outline-offset: 2px;
  cursor: pointer;
}

.cell.slip-cell-target {
  outline: 3px solid #ffb84d;
  outline-offset: -3px;
  background: #e0a03d;
  cursor: pointer;
}

.player-token.slip-player-target {
  outline: 3px solid #ffb84d;
  outline-offset: 2px;
  cursor: pointer;
}

.player-token {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  z-index: 10;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.75);
}

.player-token.selected {
  border-color: #ffd24d;
  box-shadow: 0 0 0 3px rgba(255, 210, 77, 0.55), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.player-token.has-ball {
  border-color: #fff;
  box-shadow: 0 0 12px 3px rgba(255, 255, 255, 0.85);
}

.player-token-role {
  font-size: 14px;
  font-weight: 800;
  color: #122018;
  line-height: 1;
}

.player-token-avatar {
  display: none;
}

.player-token-name {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  padding: 1px 5px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.player-token-star {
  position: absolute;
  top: -5px;
  right: -5px;
  font-size: 11px;
  line-height: 1;
  color: #ffd24d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 12;
  pointer-events: none;
}

.player-token.half-left {
  left: calc(25% - 23px);
  top: 22px;
}

.player-token.half-right {
  right: calc(25% - 23px);
  top: 22px;
}

.player-token.alone {
  width: 46px;
  height: 46px;
  left: calc(50% - 23px);
  top: 22px;
}

.ball {
  position: absolute;
  width: 18.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  z-index: 20;
  perspective: 800px;
  -webkit-perspective: 800px;
}

.ball > .ball-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWcAAAB9CAAAAABb6f0YAAAYvUlEQVR42q1dEWAkTbAuKBhYCAQCB4FAIBAIHAQCgYNAJBAI/BA4ODg4CAQODgKBQOAgEDgJBAKBhYGFhYWBhYWFgYWFgYGBhpLvQc9uNrvdXTXvvaH/v918W11dVd1dU/U1UfjpvU0nxXjtmUyK6SEx2R/en46LDZzxaDroUdYBh07KYjJahynG0/deF3GIzspic1yjyfSFs04DOy3H48CwJi/Mdhwm2p7WTVOvPVVdy30X9WzRcdPUGzh1U9UXlHEHnLOmrjZhmqo5oQ4TltGlbMLUdVNXXeyHmc5cVW2Oy1XVYRf7YboHHEKPO+hkP2NIEAbjXheYrTIsDJB3GBfTdo2AQALBG3cx5948JE53nIOwkiHAWwe/yL5DQooWiNxQz45zI5HpcviPOpjzvQiCMy847zKuW4gEDFHgcKHjMPnvML3FtAzgjJgy1VuZiHirQnS+6h27He42URiZb7dSx8fXDorpwCE48QKRabaYDG1YRHtReUTK3iK2pFC8qi/81AQVLUXmFc2aPBk9SnS+BE+UsYKy+PQZMXsWuDvqfZhIYlzE9AIXjocCuD/Lr6nmGMUBIH+IiTmtaT/zXCDmXRDgF2W6oomYjiJO2uKcWDyVKaOTxV8EkZojSptzq2imc6/QmGPsejPUcDL6FpXHAaj2NBxuneZXbK48VrWrD4yImV5j4vgo2WebojmHi0w8AMG/duvC8bicETFlRXi1WOD8NXkpEQ88jkRWjL8mIyTarWUlHK/HZwGeqEcGpAu4xKjg8J9Nz9dwUfcCxC9hKQNir+qfKa8AICeUKYGViJi+x5XsY/QJZZb48ySxgS1c/pgN89UbITxdC4vGZFsTJyPindJ/X6IDG6lxnjKi/XnCSSFwyLU4T0xEO7P4uAQC0XGYiem4jRqR/TMcJFcnnin7hRqJmRc43BocNbuBQFKW6PDdsmu5j45piX2lWTMT8Q2iq/LC468sjtr34rhg3Gi3If/pG8SdKqpi1woqzS5xep9AvO91I/EdPaTe1qPPkZc/Fcmk3NLHtZ+M8WLCIWK6isOYT3OcET3pKIJnZcPKTK8wAD2q+w3KxSDPH90Q32DC0fw0m4gF6FYLrEdiGRdOlEMhnyUW0xUPOdQUfSEW+6n3NBybPAoOM/1GclO3HNheUstMA5gUPaQskU/KiAqDekTwrvlFacFp8C+JkyUSNp8D4wtx8mC57wzqARye0vZ8YZotEfyXDs8/xCKPCC7SfnFjkgfAWXrB+AHY5DlL737+2cwZDqepie9NYXzm2yk9787F5O+QcS91/tprxKAgAWSQNJ/dCiZFA0NOyXMSzkOFdi+DFM7vSIIkcE69S83Xg9iiGICblH7+iVE9wPeUPRvlESC51+TcaoYQXMdhvjhpYFoHHbAbl+cQcJZ1RwC47fh58Bhi1LLIPOEYXh6beqrPOLzy0PcOavanuQ0MZvb5LOPIBO8bf7/EeQfQWDAEgn9xnAFM4dCHqMc4Th9ilWcN59N0bc9gdi8I7qIv84AuE/Ytdgo7M0vjAMFREIeZriSeAFg7ogpQH8YW5fMPJer+JXK4urW7/Hgubo0w8OnX+fnl1dXl1dUSwP/nxfkrajECAUB+7v96A2donSv/a6/rOO3/no/NogCuwd/ziw8pVtRzPjTiOAgawfMKDq1+PpnZgFoVDmKRczS3+YWPz010URg4JDJa6081iP3MwGjPPtZVsemVfgMYF1QB5qOV/ycP75+mb1+WgXIoG2L6oDwb2aMz3Hgs/k/dOs5kYpVH0MhoEsIRESkmVu8SAPlsVYYlDiDFyKodgWBYyfJPQZ/TFhO7mmUQ/6yYmh0e834iotRm60GZp3GcDQZlIlq91WY7lHKMdXv+LJBRnuk0Lvl8YLVmyLCM4shsZF9Q8zIxZqMhOgCDuApkOrLFDQGQ1xLTs2BqHliV3Gr7WGDBmfb/l8pbO8eNk1ObV8YFQ8bJxfd9bnWw8QRxe3bo18bExGgmKXH7FkcVCN5dIp0r0jdGVnlP/l5jPIAJ3tOHj74xbkj+WQG0BjQfLIGSgHNlz1WOUgCy3AAUhZK2mKz9Teg1CASjSToejEo1EAIiGE5T43YYmuQBijUzpPUvFjNTHMsrRew2zImSiOyLZhfKsdt/WvWVfIrkIkl5/IsQHefdLd51i8T3vNVw7bfW7Vncx8glba7p4de5xTGGU02J0wKqPIL+VIsvk/RhRT7irxJ3h22ZDyLv9QDI5n6CNhx6bDk99Z26YUt6qizN0KVH71Lr//KZaWFcHPJkZst/VGpvJ0TwbpCn3DhA0GaeYFgpkw6Mp2kzFQBO29uJIJ8bNjZDfYl/N6SXZwqOANIXffGeDdSfcoMNGNqwH1UgoM7V2CvAdKzu6UwJjGIKxcomw7Q5CwROWXlEgGKs53cEw6m2xI83v0GBWR3NFB2OZ1rCyQGQQap+wwFN7tRsroNzAyWtUOfO6f4uzVAxjCp32oyKgzR5uhwJ1VA28rAUTMhIctWpB5o5+z1xWbiIfnwhyHgE7a3UMs0RHZpAiontZVtRNkhUNbmhIVsgEAwnLrmktGk0p+kZxRQxTQuA3BnP+MMKiVOIe7eePb1jxOqR6r4Vp494FZrD3Pwy6T1SdeqtYRaKhhQWKGw+vkxpPLHmmnwcD09XY1oE20PRSJq4xSa38p+3AQWa4MwLAPTN8pTDcLpWBIDr11Y9y7SIbNelDbvGZzRDE5wUJygH9tTgaBaMmw4OmHfAGdQI1ylIgw45K4mk2wTSrG74VXtGP94YUJRmeeCingr33thx6kG0MUDenB1nPhKJrRfvHXCqfsSg2+BktWfUw1gfR5Pb5RFMw6XdDjIZosMzjO7JRuNOOPNYNe2oQ+odyEuEIpkIinDhE8XEryLzPpp3eBUAGTSRBazDdEHg8lDgEMDlAmfHqYeRjVuTuy56rgeRlbAZSAc9O9Tnx19Pjjeek72HLuI0GB6GYE6P9/51sEIRPO2dfN2U5uTo8B1NF5znEM7xydfDAVyXcT3unwYGdvL1sAjLE7FneQ2XO3K0pSvynIWqjZiYD6ULjByFq4SyTjUMgBzEKqjOOsE00eKeKxjsefkNtx+pv2O+gVhLBgRvHKrY57a83tnecTjgPtLnwxk9m4WRBA7TWxeDvqFgPSj7ki7ZPL9SeK99GzYfJqLtUmwKcoB8pUjtCtPu3FwyifkuMYf9iw6qdsLk/4BDRIeN8V2tg0x68SK8k3boAk3PgskWURayw4yILq2v6F2qRjGjX/aX9L9SODeGGg/xio7g+KbSOzjr29pLIgoTLjDzY1uOpOWR4HBFUYE4ozwEFPLS2U60qJ2ZskLP37d5gCzVn2OvAY7jMBHvlmq2bvE2gDIOaiijRVugHjcg6DOH+3N8W9wxGsvb0Xm6xJXp3FJ86eASLe5MRHTZLvHyv8chIqJr6CdvETicxPrWvNJu0JjySHJCYTUv+mX/2moY8oVHhttKe/TPkK8Twb+W2YBjva5vhvJUDYeJKDeUOgrwyF780PqeMTOPN5cLCrjGE8XsuV3VdmemqHoapxHw7ntQWfYb1UG0/7/9ga/OEFlVHOZTUwleuUupNmdmuhJZ30wF4nP9JdnMmRHTrWXBeKFF437EL5juLLWydx4gxqvDRPRX32+kcHjh8i+Wxf022YvHREzv6fcpXtifBjoVPakgjU48w1szPW7oPY9t24gijwXnoBFV0YWh1fVIlHVQgLFBnmSLfLtXvWUDkcW19mLP4dpCiPEzHZ8FYsLhW2UPrTd2eXkek++txIhDTH3FDN3Mxsoz0N6bD22MM+P/H5zeTIv07yY+pt25KOfuNxtL0FHybCCwcT4QnSj2YyVDOdfijxHnP2W+miMLTkY/0vsN546NjE6PcOk9nYmGi0nJ2z3bpqvlVEnhGMeVp98vP5jkYeqNEvHZAY9Wjped9N7umIwK2ku+BWv2rCRc6fxfs2ucLjpOvxncscrzLXVOkfkXIwMX0Y8UxcIT2WgJe5TcI8pvOwvgQ6q+14jDxPSUygN8N8rDzC9I2PNPM4kbU6Kitt4j68NbiYra8RaZaSRTDjbestNRphxsRGz1UzqM2rPIODNrmekboiRTv8gsDmXn8XFdtgRbpsj6UxI45oFFD2EC4BuRaeKZiLI/qzif48a3SEIifOqJLmE+rarjtHxx0TqX3ISyHFn08NTnjGhLR/K/thXN//0zclr6ZN7OalaKquVTNw/hY3JMzwflvKrmK89sPp/PZvPqm43vaqHp43nkaRtcdaCMiXp08lmaj+eYMoUO41Mi+ls1n83a4Xw81bzcJ9b5wD4GdllX84WGqCzLclqW5XRazv4Y3WLxzmg0nk4m0+lk+Uyn08lkWp6ZgzMRMffGk/DzpdcBiHl/6mVZCrT4j62MqIP9nJbTdiirQNPxqGec9vYb5+UHxKe4sWA2NM7XTSwgFgrf51oC506im96eyX7Yp6aiTEr3xFZFE2UU7Yf9Y+RS9vkqHkf3dS9ZB47ogyqYnRUR/LKuy8yc2vmeWoj7Ft+Ir6dybHdTnyuRYHlYc0BsRWL6tZpzWdvXnXZYdv7G9VPv2t0ie06UD3WY9l68Pk5eMza6F9N2Ivf3nFm9gmmnTpy7Jz3jfp74ayoP8NceVk9S54JLMm58mX6my0iMcYw9RXQ0S2LzUybmv8n+wV/mA1ieTNscmQ0oWaY53bJa9JdkCrro2cTJ6DCZYB2yZTvPRHyUyj+LzeOZiK7SibaBbf+jmKHgzrpPeEzn2X4aHYz/pV/M/CBjAmiQfJ8ieCILn3uWfJkvEFzZHGxbeRMSKYzaTCNp/bu2RBJ9U9LP8+3MxAt/tfYCY7PfypIYzeg2XT7YYJIZ4k+P7tM4gn8283lP69nhr8l8eJh2U4d7S1zNetO1cW3W1+WmPV2tdgP/tpy7j5wkXxeIC1dCrk/7JRqtz+6rxXx+qZUy7tCC80epK3DicGXAedVrBps9w3z19dLDgeX9xVSv+csNjrFd63V6lvs29pqWSzmiZ+fXeBXnTHuJL3DuVdfPpVJGJBCxkDvfaG3HEBjsh54ESkeswPIC9XWjoTFUl3tj2tPplRcnqhmOYahAnKoXgOzWBraq5cUd2mKqAY1UnNPNusFQfZ3bVRIS3wVaPQAEbtgmCDl47lru6SRdNihyH70fhf0vPPvGYgUIN/F7VvyuOBdFz/43fsbSdtz+69BZ6hghz8k7KehLCdH8HSJwP2JrfEZEGe3qrS4iEE/uHE7hZERExxK7ruOzTNVBKl2S8WVj4dh0mO+2A4i9cHAQi56B01h+NCPO6A7OUL8qwHSbg0Ds1fZkqPMUSINXr50siJPRUNNxS1KPfz4LzYE8FDNlYy1sLHCeIjj+X7anAXqOsJ4HHJuujOiwcabGCXG4S50Kj8XSgCEQh3NKnA6+Q0zmLCJR+2Fi+g1niM4CEfmaSMp7M1x/KOwa1+GrVpgoWxb76RXZIvvRYyr711XqyBwADLMsFje4V+psi4u1P48FVibaa8RQDNkWJUUS/isNTmLQM1yiEv/Mm5iNhfSFotN1gQV1YpqzqE1oxzKS/Ft8ubpIelvnRATXFEwEMbGvOU3Pu+++EBFcxK/8ee3QP9jgLriEMWXZaLW2VHkanHHYDLPeZCG2Env8ErYbU/Nes7wWSMVxmG9F1h3+utxCiepegkkvC7en0BlqBCivYv2w7jDb2t5af3rbdL0URncxAUbZ9ibOdm+HfvsafH3h8d78RJvSbPV2tv1Ldy1yfOxD/9AmzNb21jYPPrrRRI0bDre009sOAPUKCW7GIvEZ80IC13tWrh42+qQv+eCAYhK4t7Sp6tpEdvGBM5oH7lFtqnqFlNZGm1/VgftG66YsOuFIv67nm/I0TVmsSp3Qs//U9UN7CoFDNezQeCx1P3Z+KEcd+iIlyB0CgcPI3G0FOM+uFpRnMO/AEY3hNEagMKgQOsRRyC0ExSTKJjOc2QeGfrwDpQONh2cLlCDvgeQWvr1FZBmEd4Cy5NayeVidJ8iaglGewlW+eXh9chAxCdT+cTkI84qI6MyZq2CTcZxFaFIY+0YFGM0QvedxVIo5bOSz+I+0vH26ngUYzuK34n2QO2sJDki/iXMOYzAz7VoEaAbxlldn4rfxvzNPEGyJGzhdHv95GS+SFgnz9gXXwdkoFlUFK6w16lpYTCRh7S1VhUHPoxmCtCItcc/IBCKQYRW+WdHfGVOOoXchAoDL49ypLW+fWPYbC+K5yO7R07kb/KvKXTSxJ5B2CdNHNsuTB2s3mNn6uz2Hb4yoC25BjKVlOKK0hB7chdQX6B905VjijaoCIG8sx243nMXvwRSIhVNGAMigSZ7z0AxM8+5yh8i0e++dG3HeEMtXtjgjseyfnbrQWZZCMfDBqRRbnqBebVYcmziSdAKt0VwLhQJgoOIM5xv58MD7FF0emUwNbdl9tXnSjWroQAOVwabJDXdyOZ1/rc4VEqAGskrcHA2Yw437mWgz3Wu4eLLJRaMTxsRwF0KM52x1hbLcXVEWunuNDHxwxURf3PuVzXU0/o2hhZZwMlb969WyER2qg2/6lhil35NR5ZadcV+N0KWJ1GCDH3sjPs8sxwdBrtRLYGjig6sH2ns9E6ulVKrz5Cb+LH3FeDNdHzcttP7uvjNxQ5XKdFTvxms9xurvmKiYtKhgOzU6DJSsQlFYRrV5f8G6PU8nxvtBhlVym5lXRhKl3KWWMDdobDhumO73HIgta1UNk+I0fetlW0NJ5ZFc35pFqwdpM7TSJKY81d+bY8MZT5IJkon1wqRilnq/MzSTqxbzVP3GyIwjo1liXG+N9cI2n0iMrSe56R5ViAAJbn2fc7BeMJNYLqq++X6rJk/ouTJTTTcxYlg/mWP7vXgpx2hPlKZTY2oBb69gMwWy1IrxWtuvfZt8cjCSlQeDOewXpI0nIpDQU/ftt/TBjSdhFHShZAaQzxEBsqZO2+xOFRFncXeK7l9tmmPlr+nzscF2b2B7WWbUw4qpmYuyvQsrcg6ubO97/XfqqEHnYruvVtotkMR31x3YeT85Bj2sPH+7UGxCZnf3D48Pj48Pa8/9U4dLSwGZ3nuQNaD7+z5gvj9XBMP7NUEeHx4eHh8f7gvjLZhtnvbl7u7+03Pnn99jsYWfNg33siJKBw6LDd94iRXlnDToQhL9FMO56nIPr4v3oNyaZREIwlfJMxP9gbPGeQByGuiW9Jcf/zEbtAiaXd8Ozps4dpLoRjDb2bh5eXmPs1iXHScYBm5w9kg984W+gMOzJ/tbvxSamXpTQJw1Hvp7pSN18bb5coDgd7zI7EuXl8e/4qVzx0bzcYDgLMrcl2iV3VRPvR8vlb3qcE9xlaKMuYLxBl2RMtFXwz/sF/EWqbLtv7CeU+Q1Pl1mxwAcfqf6InLrAi/4kWyvGDRWnGQbQs/8ElpSbQi8U5vD2H5ivrJDcyCbpDpD+VTEuJ5O0u1dx3A2+xkkGSPozGrQKT64zHeemMZ1n+hXzIgerDvW/yjZkPds2wCJws3L9Gx092Olk+rFBuOSfHDMWWGbrjLdoMxbNupZeac0l/JebZPnRevG+1Kb1p0npbuLDy0Ls8YHlxFd2LIA18k+Zyb6brmXQqMTZKIbi184OVDIFcjTsKvZut0syRnLRPcmM9xJq5kzerNEjiFzluKWZ2ZDItvhSSPUydhUz/dgoCuaGab9Vm2T515tOC8b+OCOLOvFN0vntsEvvijEV2y6nsA1Cs0CE7HFUwu9V5rpWscZKbxXTNSjR33e/ynTxZSRZcX4qRBEMVFGbzrOtcpbxET0nqj68szhF6qSiYiGiJUjLeq5T8lA8LMz10KiM9HX7Mdv/2j/3e/FWBnXgdo8ObLQMWV0HG3UaN8dvhPramb6hlgjgudRwnNLYKco6LvPO0h0Eby1MQn+RrzISgDBhYmvqnefziIuT6aqkh5diqsTBo5f//lLynycuAMywDBlA6Q8DONtG/PRzsQf0GMXyb+RxX5o2V/qwuLIy8dal8TKdufRa10B4JF2bAraryWV6P1NmYU+i+k0dY1q40+mqfiz+ODas0fECnO/qlG1/ZWfUWsWQNxBy8unqYfpV+qKndkXspLX3EY6Z1tehEz1L14eeuIB8X0xIkXPTNxP1FHj0UzlxQUkdr70CRLDdoOJiMeJ+6B/UmbE4awUhC8OFCf/kY3dkJgOmsR1xyd6NFx8dhq/7RjzLwtn10W6iK07gMwy1nBaegFmPo9X5RY9dc/78RsX8XHlRNTT3dSD/Ym2TchfNpPK9WIXgDg0C0pmC1JGb/F0yZUB5+Mbcb6hcyOx2JKpI9wPIse+7VM/NxERb5UI62eFoMxCD7VbIXD+lo/rOvQ5YyLi/cgCJhgslWia++AtcQKHVzPPq3+FJZH+uGeiDmSLdO0i+4TbTuLw77Ah2q7ZWHmiDnYcHtb/ALE13icl88CRAAAAAElFTkSuQmCC") 0 0 no-repeat;
  background-size: auto 100%;
  box-shadow: -10px -30px 40px -20px inset, 10px 10px 10px white inset, 0 8px 10px -10px, 0 1px 1px 0px #CCC inset;
  overflow: hidden;
  position: relative;
  border-radius: 100%;
  transition: none;
}

.ball > .ball-inner::before {
  content: "";
  height: 25%;
  width: 40%;
  position: absolute;
  left: 30%;
  bottom: -13%;
  background: #555;
  border-radius: 100%;
  box-shadow: 0 0 50px 20px #000;
  transform: rotateX(80deg);
}

.ball-moving > .ball-inner {
  animation: ball-spin 2s linear infinite;
}

@keyframes ball-spin {
  0% { background-position: 0% 0; }
  100% { background-position: 92% 0; }
}

.player-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 100;
  overflow: hidden;
}

.player-tooltip.in-match-log {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.player-tooltip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.player-tooltip-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #16231b;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.player-tooltip-heading {
  min-width: 0;
}

.player-tooltip-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-tooltip-star {
  color: #ffd24d;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.player-tooltip-pos {
  display: inline-block;
  align-self: flex-start;
  margin: 2px 0;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
}

.player-tooltip-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-tooltip-stats {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-label {
  width: 92px;
  font-size: 10px;
  color: #b8c8b8;
}

.stat-bar {
  flex: 1;
  height: 6px;
  background: #2c4234;
  border-radius: 3px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  background: #58d68d;
  border-radius: 3px;
}

.stat-value {
  width: 24px;
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.player-tooltip-effects {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.player-tooltip-effects-title {
  font-size: 10px;
  font-weight: 700;
  color: #8ec9a4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.effect-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.effect-icon {
  font-size: 14px;
  line-height: 1.1;
  flex-shrink: 0;
}

.effect-info {
  flex: 1;
  min-width: 0;
}

.effect-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.effect-desc {
  font-size: 10px;
  color: #b8c8b8;
  line-height: 1.3;
}

.effect-turns {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  color: #8ec9a4;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 1px;
}

.player-token.selected {
  outline: 3px solid #ffd24d;
  outline-offset: 2px;
}

#game-status {
  display: none;
  width: 100%;
  margin-top: 20px;
  padding: 10px 16px;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.game-turn {
  font-weight: 700;
  color: #fff;
}

.game-playing {
  font-weight: 700;
}

.game-turns-left {
  color: rgba(255, 255, 255, 0.7);
}

.game-score {
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}

.in-play-team {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.in-play-team-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.skip-btn {
  margin-left: auto;
  background: #2c4234;
  color: #e8f0e8;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.skip-btn:hover {
  background: #3d5a48;
}

.in-play-team-header {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.in-play-hand {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  max-width: 100%;
  overflow: visible;
}

.in-play-hand .action-card {
  margin: 0 -6px;
}

.hand-fade-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.hand-fade-overlay .in-play-hand {
  position: absolute;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hand-fade-overlay.fading .in-play-hand {
  opacity: 0;
  transform: translateY(16px) scale(0.92);
}

.action-card.hand-fly-in {
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}

.action-card.hand-slide {
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.24, 1);
  will-change: transform;
}

.played-card-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
}

.played-card-clone {
  position: fixed;
  transition: left 0.15s ease, top 0.15s ease, transform 0.5s ease, opacity 0.5s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  will-change: left, top, opacity;
}

.played-card-clone.played-card-out {
  opacity: 0;
  transform: translateY(-14px) scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
  .action-card.hand-fly-in,
  .action-card.hand-slide,
  .hand-fade-overlay .in-play-hand,
  .played-card-clone {
    transition: none;
  }
}

.action-card.playable {
  border-color: #ffd24d;
  box-shadow: 0 0 10px rgba(255, 210, 77, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4);
  filter: brightness(1.18) saturate(1.1);
  cursor: pointer;
}

.action-card.playable:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(255, 210, 77, 0.7), 0 5px 12px rgba(0, 0, 0, 0.4);
}

.action-card.disabled {
  cursor: not-allowed;
}

.action-card.disabled > .action-card-name,
.action-card.disabled > .action-card-desc,
.action-card.disabled > .action-card-exhaust,
.action-card.disabled > .action-card-ephemeral,
.action-card.disabled > .action-card-free,
.action-card.disabled > .hold-badge {
  opacity: 0.4;
  filter: grayscale(0.9) brightness(0.5);
}

.action-card.disabled .action-card-tooltip {
  opacity: 1;
  filter: none;
  z-index: 1001;
}

.cell.protected-zone {
  background: rgba(38, 143, 255, 0.16);
  box-shadow: inset 0 0 0 2px rgba(38, 143, 255, 0.7);
  animation: protected-pulse 1.4s ease-in-out infinite;
}

@keyframes protected-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(38, 143, 255, 0.5); }
  50% { box-shadow: inset 0 0 0 3px rgba(38, 143, 255, 0.95); }
}

.action-card.active {
  border-color: #ffd24d;
  box-shadow: 0 0 0 2px #ffd24d;
}

#hint {
  width: 100%;
  margin-top: 12px;
  display: none;
  padding: 8px 12px;
  background: #ffd24d;
  color: #16231b;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

#hint.visible {
  display: block;
}

.player-token.tackle-target {
  outline: 3px solid #ff8c4d;
  outline-offset: 2px;
  cursor: pointer;
  animation: tackle-pulse 1s ease-in-out infinite;
}

@keyframes tackle-pulse {
  0%,
  100% {
    box-shadow: 0 0 4px 1px rgba(255, 140, 77, 0.6);
  }
  50% {
    box-shadow: 0 0 14px 4px rgba(255, 140, 77, 0.95);
  }
}

.cell.offball-cell-target {
  outline: 3px solid #6a9bff;
  outline-offset: -3px;
  background: #5b86e8;
  cursor: pointer;
}

.player-token.offball-player-target {
  outline: 3px solid #6a9bff;
  outline-offset: 2px;
  cursor: pointer;
}

.cell.dribble-target {
  outline: 3px solid #ffb84d;
  outline-offset: -3px;
  background: #ffa94d;
  cursor: pointer;
}

.cell.feint-target {
  outline: 3px solid #e07bff;
  outline-offset: -3px;
  background: #d067ff;
  cursor: pointer;
}

.player-token.sprint-player-target {
  outline: 3px solid #4dffff;
  outline-offset: 2px;
  cursor: pointer;
}

.player-token.overlap-player-target {
  outline: 3px solid #7dffb8;
  outline-offset: 2px;
  cursor: pointer;
}

.cell.sprint-cell-target {
  outline: 3px solid #4dffff;
  outline-offset: -3px;
  background: #3dd9d9;
  cursor: pointer;
}

.cell.siiiiu-target {
  outline: 3px solid #ffd24d;
  outline-offset: -3px;
  background: #d9b13d;
  cursor: pointer;
}

.cell.throughball-target {
  outline: 3px solid #4dffb8;
  outline-offset: -3px;
  background: #3d9d6d;
  cursor: pointer;
}

.cell.onetwo-target {
  outline: 3px solid #ff8c4d;
  outline-offset: -3px;
  background: #d9713d;
  cursor: pointer;
}

.cell.switch-target {
  outline: 3px dashed #4da6ff;
  outline-offset: -3px;
  background: #3d86d9;
  cursor: pointer;
}

.cell.touch-magic-target {
  outline: 3px solid #ffd24d;
  outline-offset: -3px;
  background: #e8c44d;
  cursor: pointer;
}

.player-token.underlap-target {
  outline: 3px solid #b84dff;
  outline-offset: 2px;
  cursor: pointer;
}

.player-token.side-attack-player {
  outline: 3px solid #e04dff;
  outline-offset: 2px;
}

.cell.side-attack-target {
  outline: 3px solid #e04dff;
  outline-offset: -3px;
  background: #c44dd9;
  cursor: pointer;
}

.deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.deck-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100px;
  aspect-ratio: 5 / 7;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0.12) 6px,
    rgba(0, 0, 0, 0.08) 6px,
    rgba(0, 0, 0, 0.08) 12px
  );
}

.deck-back:hover {
  transform: translateY(-2px);
}

.gk-back {
  border-style: dashed;
  width: 90px;
}

.gk-back .deck-team {
  font-size: 11px;
  text-align: center;
}

.deck-team {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.deck-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.deck-cards {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.deck-cards.open {
  display: flex;
}

.action-card {
  position: relative;
  width: 110px;
  height: 165px;
  flex-shrink: 0;
  background: linear-gradient(165deg, #24382c, #18241b 70%);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 9px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.action-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.action-card-name {
  font-size: 13px;
  line-height: 15px;
  height: 15px;
  flex-shrink: 0;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

.action-card.compact-name .action-card-name {
  font-size: 9px;
}

.action-card-desc {
  font-size: 9px;
  color: #b8c8b8;
  line-height: 1.3;
  text-align: left;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}

.action-card-cost {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px solid currentColor;
  color: #ffd24d;
  font-size: 13px;
  font-weight: 700;
  line-height: 25px;
  text-align: center;
  z-index: 2;
}

.action-card-tooltip {
  display: none;
  position: fixed;
  width: 200px;
  background: #0d1510;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #e2ece2;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  z-index: 1000;
  pointer-events: none;
}

.team-effect-tooltip {
  display: none;
  position: fixed;
  max-width: 240px;
  background: #0d1510;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #e2ece2;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  z-index: 1000;
  pointer-events: none;
}

.action-card.category-offense {
  background: linear-gradient(165deg, #8a1c1c, #571111 70%);
  border-color: rgba(255, 255, 255, 0.5);
}

.action-card.category-offense .action-card-desc {
  color: #ecc6c6;
}

.action-card.category-defense {
  background: linear-gradient(165deg, #c2e8ae, #93d07a 70%);
  border-color: rgba(0, 0, 0, 0.35);
}

.action-card.category-defense .action-card-name,
.action-card.category-defense .action-card-cost {
  color: #15330d;
}

.action-card.category-defense .action-card-desc {
  color: #24401b;
}

.action-card.category-tactical {
  background: linear-gradient(165deg, #2f5fc0, #1d3d7d 70%);
}

.action-card.category-tactical .action-card-desc {
  color: #cdd8f0;
}

.action-card.category-effect {
  background: linear-gradient(165deg, #ffd60a, #dfb700 70%);
  border-color: rgba(0, 0, 0, 0.35);
}

.action-card.category-effect .action-card-name,
.action-card.category-effect .action-card-cost {
  color: #3a3000;
}

.action-card.category-effect .action-card-desc {
  color: #5c4c00;
}

.action-card.category-penalty {
  background: linear-gradient(165deg, #43434a, #26262b 70%);
  border-color: rgba(255, 255, 255, 0.5);
}

.action-card.category-penalty .action-card-name,
.action-card.category-penalty .action-card-cost {
  color: #ffffff;
}

.action-card.category-penalty .action-card-desc {
  color: #e9e9ec;
}

.action-card.rarity-1 {
  border-color: rgba(120, 200, 120, 0.5);
}
.action-card.rarity-2 {
  border-color: rgba(100, 150, 255, 0.5);
}
.action-card.rarity-3 {
  border-color: rgba(230, 190, 90, 0.65);
}

.action-card-exhaust {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  background: #2a2a2e;
  color: #ffd24d;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 2px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.action-card-ephemeral {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 2;
  background: #2a2a2e;
  color: #9fe0c3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 2px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.action-card-free {
  position: absolute;
  bottom: -6px;
  right: -6px;
  z-index: 2;
  background: #2a2a2e;
  color: #6ce58f;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 2px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.action-card.face-down {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.13) 0 6px,
    rgba(0, 0, 0, 0.12) 6px 12px
  );
}

.action-card.face-down .action-card-name,
.action-card.face-down .action-card-cost,
.action-card.face-down .action-card-desc,
.action-card.face-down .action-card-tooltip {
  display: none;
}

.action-card.face-down::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.4);
}

.line {
  position: absolute;
  background: #f4f4f4;
  pointer-events: none;
}

#halfway-line {
  left: calc(50% - 1.5px);
  top: 0;
  width: 3px;
  height: 100%;
}

#center-circle {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 3px solid #f4f4f4;
  border-radius: 50%;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  pointer-events: none;
}

#center-spot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4f4f4;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  pointer-events: none;
}

.penalty-box {
  position: absolute;
  border: 3px solid #f4f4f4;
  pointer-events: none;
}

#penalty-box-left {
  width: 20%;
  height: 42.86%;
  left: 0;
  top: 28.57%;
}

#penalty-box-right {
  width: 20%;
  height: 42.86%;
  right: 0;
  top: 28.57%;
}

.penalty-spot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4f4f4;
  pointer-events: none;
}

#penalty-spot-left {
  left: calc(20% - 4px);
  top: calc(50% - 4px);
}

#penalty-spot-right {
  right: calc(20% - 4px);
  top: calc(50% - 4px);
}

.goal {
  position: relative;
  background: rgba(255, 255, 255, 0.35);
  border: 3px solid #f4f4f4;
  pointer-events: none;
}

#goal-left {
  width: 20px;
  height: 14.29%;
  left: calc(-20px - 3px);
  top: 42.86%;
}

#goal-right {
  width: 20px;
  height: 14.29%;
  right: calc(-20px - 3px);
  top: 42.86%;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.global-error-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  max-width: min(560px, 92vw);
  padding: 12px 18px;
  background: #3a1414;
  color: #ffd7d7;
  border: 1px solid rgba(255, 120, 120, 0.55);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 3000;
}
.global-error-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.global-error-toast.info {
  background: #17231a;
  color: #dfe9df;
  border-color: rgba(140, 200, 150, 0.6);
}

.shot-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  max-width: 92vw;
}

.shot-modal-content {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.shot-modal-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.shot-modal-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.shot-modal-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 340px;
}

.shot-modal-outcome {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 1px;
}

.shot-modal-outcome.goal {
  color: #ffd24d;
}

.shot-modal-outcome.blocked {
  color: #ff8c4d;
}

.shot-formula-line {
  font-size: 12px;
  color: #cfe0cf;
  text-align: center;
  line-height: 1.5;
}

.shot-formula-line.goalkeeping {
  color: #9fb8a8;
}

.shot-modal-verdict {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}

.shot-modal-close {
  background: #2c4234;
  color: #e8f0e8;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.shot-modal-close:hover {
  background: #3d5a48;
}

.gk-placeholder {
  width: 90px;
  aspect-ratio: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 700;
}

.player-token.finish-player-target {
  outline: 3px solid #ff4d6a;
  outline-offset: 2px;
  cursor: pointer;
  animation: tackle-pulse 1s ease-in-out infinite;
}

.player-token.cross-target {
  outline: 3px solid #b06bff;
  outline-offset: 2px;
  cursor: pointer;
}

.player-token.cramp-target {
  outline: 3px dashed #e6ff4d;
  outline-offset: 2px;
  cursor: pointer;
}

.player-token.hard-tackle-target {
  outline: 3px solid #ff2d2d;
  outline-offset: 2px;
  cursor: pointer;
  animation: tackle-pulse 1s ease-in-out infinite;
}

.player-token.yellowcard-target {
  outline: 3px solid #ffd24d;
  outline-offset: 2px;
  cursor: pointer;
  animation: tackle-pulse 1s ease-in-out infinite;
}

.action-card.shithousery-target {
  outline: 3px dashed #ff6b35;
  outline-offset: 2px;
  cursor: pointer;
  opacity: 1 !important;
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.action-card.shithousery-target:hover {
  transform: scale(1.1);
  outline-color: #ff4500;
}

.action-card.hold-target {
  outline: 3px dashed #4cc9f0;
  outline-offset: 2px;
  cursor: pointer;
  opacity: 1 !important;
  transform: scale(1.05);
  transition: transform 0.15s ease;
}

.action-card.hold-target:hover {
  transform: scale(1.1);
  outline-color: #0096c7;
}

.action-card .hold-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #4cc9f0;
  color: #05263a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  pointer-events: none;
}

.action-card.hold-choice {
  cursor: pointer;
}
.action-card.hold-choice:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(76, 201, 240, 0.35);
}
.action-card.hold-choice.held-glow {
  animation: held-pulse 0.35s ease-out;
  border-color: #4cc9f0;
  box-shadow: 0 0 18px rgba(76, 201, 240, 0.8);
}
@keyframes held-pulse {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.08); filter: brightness(1.5); }
  100% { transform: scale(1); filter: brightness(1.2); }
}

.yellow-card-chip {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 22px;
  background: #ffd60a;
  color: #3a3000;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 15;
}

.effect-chips {
  position: absolute;
  top: 1px;
  left: 1px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 15;
  pointer-events: none;
}

.effect-chip {
  width: 16px;
  height: 16px;
  font-size: 11px;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.halftime-modal {
  max-width: 80%;
  flex-direction: column;
}

.halftime-modal.wide-modal {
  min-width: 800px;
  width: min(920px, 92vw);
  max-width: 92vw;
}

.halftime-modal.wide-modal .halftime-content {
  max-width: none;
  width: 100%;
}

.halftime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  width: 100%;
  margin-top: 10px;
}

.halftime-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* In-match card-selection modals (e.g. Card Hold): wide, landscape, scrollable */
.card-pick-modal {
  width: min(920px, 94vw);
  max-width: 94vw;
  max-height: min(640px, 88vh);
}

.card-pick-modal .card-pick-scroll {
  flex-direction: row;
  flex-wrap: wrap;
  max-width: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow-y: auto;
  padding: 6px;
  width: 100%;
  min-height: 0;
}

/* In-match deck-search card picks (The Script, Video Session) */
.deck-pick-modal {
  width: min(920px, 94vw);
  max-width: 94vw;
  max-height: min(640px, 88vh);
}

.deck-pick-modal .halftime-content {
  max-width: none;
  width: 100%;
  min-height: 0;
}

.deck-pick-modal .event-phase-options {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  padding: 6px;
  min-height: 0;
  width: 100%;
}

.deck-pick-modal .event-phase-option {
  width: 260px;
  box-sizing: border-box;
}

/* World Cup flow modals (outside the match): wide layout */
.wc-modal {
  min-width: 800px;
  position: relative;
}

.wc-modal .wc-team-flag-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 30px;
  line-height: 1;
  pointer-events: none;
}

.wc-modal .halftime-content {
  max-width: none;
}

.halftime-content {
  flex-direction: column;
  align-items: center;
  max-width: 420px;
}

.halftime-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffd24d;
  text-align: center;
}

.halftime-score {
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: 4px 0 8px;
}

.halftime-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
  margin-top: 12px;
  text-align: center;
}

.halftime-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.halftime-kickoff {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: #b8c8b8;
}

.player-of-match {
  margin-top: 10px;
  margin-bottom: 6px;
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(255,210,77,0.15), rgba(255,210,77,0.05));
  border: 1px solid rgba(255,210,77,0.3);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
}

.player-of-match .pom-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
}

.player-of-match .pom-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.player-of-match .pom-team {
  font-size: 11px;
  color: #b8c8b8;
}

.training-intro-modal {
  max-width: 520px;
  width: min(520px, 92vw);
  gap: 12px;
}

.training-intro-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 8px;
}

.training-intro-rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #d8e6d8;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
}

.training-intro-rule::before {
  content: '✦';
  color: #ffd24d;
  flex-shrink: 0;
}

.reward-modal {
  max-width: 640px;
}

.reward-subtitle {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.reward-cards {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.reward-card {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reward-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(255, 210, 77, 0.25);
}

.reward-card:focus-visible {
  outline: 2px solid #ffd24d;
  outline-offset: 2px;
}

.exhausted-back {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3) 6px,
    rgba(255, 255, 255, 0.06) 6px,
    rgba(255, 255, 255, 0.06) 12px
  );
}

.hard-tackle-sub-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  color: #cfdbcF;
}

.bench-slot-button {
  background: #2c4234;
  color: #e8f0e8;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

.bench-slot-button.selected {
  background: #3d5a48;
  outline: 2px solid #ffd24d;
}

.bench-slot-button.eligible {
  background: #2a7a4a;
  outline: 2px solid #4cd964;
  box-shadow: 0 0 10px rgba(76, 217, 100, 0.5);
  animation: eligible-pulse 1.2s ease-in-out infinite;
}

@keyframes eligible-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(76, 217, 100, 0.5); }
  50% { box-shadow: 0 0 18px rgba(76, 217, 100, 0.8); }
}

.bench-slot-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bench-slot-button.sub-candidate {
  background: #5a3a3a;
  outline: 2px solid #ff6b6b;
}

/* ---- Main menu / match setup ---- */
.hidden {
  display: none !important;
}

#menu-screen,
#friendly-setup-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url('assets/menu-bg.jpg') center/cover no-repeat;
  filter: contrast(1.5) saturate(0.85) brightness(1.1);
  margin: 0;
  padding: 0;
}

#menu-screen::before,
#friendly-setup-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.3) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
}

#friendly-setup-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(120, 60, 0, 0.6) 100%);
  z-index: 2;
  pointer-events: none;
}

.menu-panel {
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 200, 100, 0.35);
  border-radius: 12px;
  padding: 40px 48px;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.menu-title {
  margin: 0;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #fff;
}

.menu-subtitle {
  margin: 0 0 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

.menu-btn {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #e8f0e8;
  background: #2c4a38;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  cursor: pointer;
}

.menu-btn:hover {
  background: #3d5a48;
}

.menu-btn.primary {
  background: #ffd24d;
  color: #1c2b21;
}

.menu-btn.primary:hover {
  background: #ffdf80;
}

.menu-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.setup-block {
  width: 100%;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.7);
}

.team-select,
.controller-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  color: #e8f0e8;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
}

.controller-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.setup-actions {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-modal {
  max-width: 90%;
  max-height: 85vh;
}

/* ---- Game Rules ---- */
#rules-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.rules-panel {
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  backdrop-filter: blur(6px);
  border: 2px solid rgba(255, 200, 100, 0.35);
  border-radius: 12px;
  padding: 28px 36px;
  max-width: 720px;
  width: 100%;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
}

.rules-scroll {
  overflow-y: auto;
  padding-right: 8px;
  flex: 1 1 auto;
}

.rules-scroll .menu-title {
  text-align: center;
}

.rules-scroll .menu-subtitle {
  text-align: center;
}

.rules-section {
  margin: 18px 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rules-section h2 {
  margin: 0 0 8px;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
}

.rules-section p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.rules-list {
  margin: 8px 0 10px;
  padding-left: 20px;
}

.rules-list li {
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.rules-scroll::-webkit-scrollbar {
  width: 8px;
}

.rules-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.rules-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

/* ---- Tournament ---- */
#tournament-setup-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tournament-setup-panel {
  max-width: 480px;
  min-width: 400px;
}

.tournament-team-slots {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tournament-team-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-team-slot .setup-label {
  min-width: 60px;
}

.tournament-team-slot .team-select {
  flex: 1;
}

.tournament-team-slot .controller-select {
  width: 100px;
  flex-shrink: 0;
}

#tournament-screen {
  width: 100%;
  display: flex;
  justify-content: center;
}

.tournament-container {
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 36px 44px;
  width: 90%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.tournament-container .menu-title {
  font-size: 24px;
}

#tournament-table-wrap {
  width: 100%;
  overflow-x: auto;
}

#tournament-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

#tournament-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

#tournament-table th:first-child {
  width: 30px;
}

#tournament-table th:nth-child(2) {
  text-align: left;
}

#tournament-table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8f0e8;
}

#tournament-table td:first-child {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

#tournament-table td:nth-child(2) {
  text-align: left;
  font-weight: 700;
}

#tournament-table td:nth-child(10) {
  font-weight: 800;
  color: #ffd24d;
}

.tournament-section-title {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

#tournament-schedule {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#tournament-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tournament-match-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #18241b;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

.tournament-match-row.played {
  color: rgba(255, 255, 255, 0.85);
}

.tournament-match-row.pending {
  color: rgba(255, 255, 255, 0.5);
}

.tournament-match-row.current {
  border-color: #ffd24d;
  color: #ffd24d;
  font-weight: 600;
}

.tournament-match-home,
.tournament-match-away {
  font-weight: 600;
  min-width: 80px;
}

.tournament-match-home {
  text-align: right;
}

.tournament-match-away {
  text-align: left;
}

.tournament-match-vs {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.tournament-match-score {
  min-width: 40px;
  text-align: center;
  font-weight: 700;
  color: #fff;
}

.tournament-match-status {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tournament-match-row.played .tournament-match-status {
  color: rgba(255, 255, 255, 0.4);
}

.tournament-match-row.pending .tournament-match-status {
  color: rgba(255, 255, 255, 0.3);
}

.tournament-match-row.current .tournament-match-status {
  color: #ffd24d;
}

.tournament-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tournament-done {
  color: #58d68d;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.sim-log {
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
}

/* ---- World Cup ---- */
#world-cup-screen {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.world-cup-container {
  position: relative;
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 28px 32px;
  width: 94%;
  max-width: 1080px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.world-cup-container > div {
  width: 100%;
  position: relative;
}

#world-cup-screen .menu-title,
#world-cup-screen .menu-subtitle {
  align-self: flex-start;
  text-align: left;
}

#world-cup-screen .menu-subtitle {
  margin-bottom: 4px;
}

.world-cup-phase {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
}

.world-cup-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.wc-continue-btn {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 20;
  padding: 12px 28px;
  font-size: 17px;
  font-weight: 800;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #1c1408;
  background: linear-gradient(165deg, #ffd60a, #e8a800);
  border: 2px solid #fff3c4;
  border-radius: 3px;
  cursor: pointer;
  box-shadow:
    0 0 14px rgba(255, 214, 10, 0.55),
    0 0 28px rgba(255, 200, 40, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.35);
  animation: wc-continue-pulse 2.4s ease-in-out infinite;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.wc-continue-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.wc-continue-btn:active:not(:disabled) {
  transform: translateY(0);
}

.wc-continue-btn:disabled {
  opacity: 0.55;
  cursor: default;
  animation: none;
}

.wc-continue-btn .wc-continue-flag {
  font-size: 20px;
  line-height: 1;
  vertical-align: -2px;
  display: inline-block;
  margin-right: 2px;
}

@keyframes wc-continue-pulse {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(255, 214, 10, 0.45),
      0 0 26px rgba(255, 200, 40, 0.3),
      0 4px 12px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 0 20px rgba(255, 214, 10, 0.85),
      0 0 44px rgba(255, 200, 40, 0.6),
      0 4px 14px rgba(0, 0, 0, 0.35);
  }
}

.world-cup-actions .menu-btn {
  width: auto;
  min-width: 180px.
}

/* ===== WC SETUP SCREEN ===== */
.wc-setup-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #fdf8ef;
  color: #201e1d;
  font-family: 'Figtree', system-ui, sans-serif;
}

.wc-setup-layout {
  display: flex;
  gap: 24px;
  height: 100vh;
  padding: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.wc-setup-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.wc-setup-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 24px;
  margin-bottom: 24px;
}

.wc-setup-kicker {
  flex-basis: 100%;
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c67139;
}

.wc-setup-title {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 40px;
  line-height: 1.1;
  margin: 0;
  color: #201e1d;
}

.wc-setup-desc {
  flex: 1;
  min-width: 260px;
  font-size: 15px;
  line-height: 1.6;
  color: #574f45;
}

.wc-setup-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  margin-left: auto;
  background: #eee0cc;
  padding: 12px 22px;
  border-radius: 26px;
}

.wc-setup-counter-num {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wc-setup-counter-value {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 32px;
  color: #5c2a0d;
}

.wc-setup-counter-total {
  font-size: 17px;
  font-weight: 600;
  color: #a8551f;
}

.wc-setup-counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a4a1e;
  margin-top: 4px;
}

.wc-setup-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wc-setup-confed { display: flex; flex-direction: column; gap: 9px; }
.confed-uefa { --confed-tint: #dde6f7; --confed-disc: #c2d4f2; --confed-ink: #17356f; --confed-bar: #2f5bb7; }
.confed-conmebol { --confed-tint: #e6f3d7; --confed-disc: #cbe8ab; --confed-ink: #1f3d10; --confed-bar: #6fae3f; }
.confed-caf { --confed-tint: #f7ecc9; --confed-disc: #f0dc9c; --confed-ink: #5a4409; --confed-bar: #c9a02e; }
.confed-afc { --confed-tint: #fbe6d2; --confed-disc: #f6cfa8; --confed-ink: #5c2a10; --confed-bar: #c06a25; }
.confed-concacaf { --confed-tint: #d9efeb; --confed-disc: #b4ded6; --confed-ink: #123f3a; --confed-bar: #2f8579; }
.confed-ofc { --confed-tint: #f5dcef; --confed-disc: #e8bcdb; --confed-ink: #4a1540; --confed-bar: #9c3a86; }

.wc-setup-confed-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wc-setup-confed-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  background: var(--confed-tint);
}

.wc-setup-confed-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--confed-bar);
}

.wc-setup-confed-name {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--confed-ink);
  line-height: 1.2;
}

.wc-setup-confed-rule {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--confed-tint);
}

.wc-setup-confed-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--confed-bar);
  flex-shrink: 0;
}

.wc-setup-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.wc-setup-team-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: none;
  background: var(--confed-tint);
  color: var(--confed-ink);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.wc-setup-team-chip:hover {
  transform: translateY(-1px);
  background: var(--confed-disc);
  box-shadow: 0 6px 16px rgba(32, 30, 29, 0.12);
}

.wc-setup-team-chip:focus-visible {
  outline: 2px solid #c67139;
  outline-offset: 2px;
}

.wc-setup-team-chip.claimed {
  background: #c67139;
  color: #f5ead8;
}

.wc-setup-team-chip.claimed:hover {
  background: #a8551f;
  box-shadow: 0 6px 16px rgba(198, 113, 57, 0.28);
}

.wc-setup-flag-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--confed-disc);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.wc-setup-flag-disc .wc-setup-flag-emoji {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
}

.wc-setup-team-chip.claimed .wc-setup-flag-disc {
  background: rgba(255, 255, 255, 0.22);
}

.wc-setup-team-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.wc-setup-chip-marker {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--confed-bar);
}

.wc-setup-team-chip.claimed .wc-setup-chip-marker {
  color: #8a4a1e;
  background: #f5ead8;
  padding: 2px 6px;
  border-radius: 999px;
}

.wc-setup-rail {
  flex: none;
  width: 344px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px 20px;
  border-radius: 32px;
  background: #f5ead8;
  box-shadow: 0 12px 32px rgba(32, 30, 29, 0.08);
  box-sizing: border-box;
  overflow: hidden;
}

.wc-setup-rail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.wc-setup-rail-title {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 20px;
  color: #201e1d;
  margin: 0;
}

.wc-setup-reset {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #8a8278;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  transition: color 0.12s ease, background 0.12s ease;
}

.wc-setup-reset:hover {
  color: #c67139;
  background: #f5e0d8;
}

.wc-setup-claimed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  min-height: 0;
}

.wc-setup-claimed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: #eee0cc;
  border-left: 5px solid var(--confed-bar);
  border-radius: 14px;
}

.wc-setup-claimed-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.wc-setup-claimed-info {
  flex: 1;
  min-width: 0;
}

.wc-setup-claimed-name {
  font-weight: 700;
  font-size: 13px;
  color: #6b3410;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wc-setup-claimed-meta {
  font-size: 11px;
  color: #8a4a1e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wc-setup-claimed-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(32, 30, 29, 0.08);
  color: #6a6157;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.wc-setup-claimed-remove:hover {
  background: #c67139;
  color: #f5ead8;
}

.wc-setup-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed #d8d0c4;
  border-radius: 20px;
  background: #f5ead8;
  text-align: center;
}

.wc-setup-empty-title {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 16px;
  color: #201e1d;
  margin: 0;
}

.wc-setup-empty-desc {
  font-size: 12px;
  color: #6a6157;
  margin: 0;
}

.wc-setup-footer-group {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.wc-setup-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 24px;
  background: #f5ead8;
  cursor: pointer;
  position: relative;
}

.wc-setup-toggle-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wc-setup-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  background: #d8d0c4;
  border-radius: 999px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.wc-setup-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fdf8ef;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.wc-setup-toggle-row input:checked + .wc-setup-toggle-track {
  background: #7a8a5e;
}

.wc-setup-toggle-row input:checked + .wc-setup-toggle-track::after {
  transform: translateX(18px);
}

.wc-setup-toggle-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wc-setup-toggle-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #201e1d;
}

.wc-setup-toggle-caption {
  font-size: 11.5px;
  color: #6a6157;
}

.wc-setup-start-btn {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f5ead8;
  background: #c67139;
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(198, 113, 57, 0.35);
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.wc-setup-start-btn:hover {
  background: #b86633;
  box-shadow: 0 6px 20px rgba(198, 113, 57, 0.45);
}

.wc-setup-start-btn:active {
  transform: scale(0.98);
}

.wc-setup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #e0d8cb;
}

.wc-setup-footer-status {
  font-size: 12px;
  color: #3f3a35;
}

.wc-setup-footer-keys {
  font-size: 11px;
  color: #8a8278;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== STAFF PICKS SCREEN ===== */
.staff-picks-screen {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #f5ead8;
  color: #201e1d;
  font-family: 'Figtree', system-ui, sans-serif;
  overflow-y: auto;
}

.staff-picks-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 100vh;
  box-sizing: border-box;
}

.staff-picks-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.staff-picks-header-left {
  flex: 1;
  min-width: 0;
}

.staff-picks-kicker {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #c67139;
  margin-bottom: 6px;
}

.staff-picks-title {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 38px;
  line-height: 1.1;
  margin: 8px 0;
  color: #201e1d;
}

.staff-picks-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #574f45;
  max-width: 560px;
}

.staff-picks-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.staff-picks-legend-label {
  font-size: 12px;
  color: #6a6157;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 2px;
}

.staff-picks-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ebe5da;
  font-size: 12px;
  font-weight: 600;
  color: #3f3a35;
}

.staff-picks-legend-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.staff-picks-legend-swatch.attack {
  background: #f0a35e;
  border: 1px solid #c06a25;
}
.staff-picks-legend-swatch.defense {
  background: #a5e06f;
  border: 1px solid #6fae3f;
}
.staff-picks-legend-swatch.tempo {
  background: #2f5bb7;
  border: 1px solid #7fb3ff;
}
.staff-picks-legend-swatch.squad {
  background: #f2d06b;
  border: 1px solid #c9a02e;
}

.staff-picks-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.staff-picks-team-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fdf8ef;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(32, 30, 29, 0.08);
}

.staff-picks-team-flag {
  font-size: 22px;
}

.staff-picks-team-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.staff-picks-team-name {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 16px;
  color: #201e1d;
  white-space: nowrap;
}

.staff-picks-team-vs {
  font-size: 12.5px;
  color: #6a6157;
  white-space: nowrap;
}

.staff-picks-esc {
  font-size: 11px;
  color: #6a6157;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: right;
}

.staff-picks-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}

.staff-picks-col {
  flex: none;
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.staff-picks-card {
  --fill: #f0a35e;
  --border: #c06a25;
  --ink: #3a1b06;
  --rule: #c06a25;
  --discBg: #93491a;
  --discInk: #ffe6cd;
  --costBg: rgba(58, 27, 6, 0.12);
  --glow: 0 0 0 1px rgba(192, 106, 37, 0.35), 0 10px 24px rgba(147, 73, 26, 0.22);
  width: 236px;
  height: 396px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  border: 3px solid var(--border);
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--glow);
}

.staff-picks-card.dom-defense {
  --fill: #a5e06f;
  --border: #6fae3f;
  --ink: #1f3d10;
  --rule: #6fae3f;
  --discBg: #3f7a1f;
  --discInk: #eaffd6;
  --costBg: rgba(31, 61, 16, 0.12);
  --glow: 0 0 0 1px rgba(111, 174, 63, 0.35), 0 10px 24px rgba(63, 122, 31, 0.22);
}

.staff-picks-card.dom-tempo {
  --fill: #2f5bb7;
  --border: #7fb3ff;
  --ink: #ffffff;
  --rule: #7fb3ff;
  --discBg: #17356f;
  --discInk: #ffd24a;
  --costBg: rgba(255, 255, 255, 0.16);
  --glow: 0 0 0 1px rgba(127, 179, 255, 0.35), 0 10px 24px rgba(23, 53, 111, 0.22);
}

.staff-picks-card.dom-squad {
  --fill: #f2d06b;
  --border: #c9a02e;
  --ink: #3a2c05;
  --rule: #c9a02e;
  --discBg: #5f4707;
  --discInk: #ffe9a3;
  --costBg: rgba(58, 44, 5, 0.12);
  --glow: 0 0 0 1px rgba(201, 160, 46, 0.35), 0 10px 24px rgba(95, 71, 7, 0.22);
}

.staff-picks-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 1px var(--border), 0 18px 40px rgba(32, 30, 29, 0.28);
}

.staff-picks-card.selected {
  box-shadow: 0 0 0 4px #c67139, 0 14px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.staff-picks-card.selected:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 4px #c67139, 0 22px 44px rgba(0, 0, 0, 0.26);
}

.staff-picks-card:focus-visible {
  outline: 2px solid #c67139;
  outline-offset: 3px;
}

.staff-picks-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--rule);
  flex-shrink: 0;
}

.staff-picks-monogram {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--discBg);
  color: var(--discInk);
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-picks-card-id {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.staff-picks-card-name {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.18;
  color: var(--ink);
}

.staff-picks-card-country {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  opacity: 0.78;
}

.staff-picks-card-effect {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 12px;
  flex: none;
}

.staff-picks-cost {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--costBg);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.4;
}

.staff-picks-cost-mark {
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1.2;
}

.staff-picks-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
}

.staff-picks-trait {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--discBg);
  color: var(--discInk);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}

.staff-picks-domain-word {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  color: var(--ink);
  flex-shrink: 0;
}

.staff-picks-fit {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #6a6157;
  text-align: center;
}

.staff-picks-fit.selected {
  background: #f5c9a6;
  color: #6b3410;
  font-weight: 600;
  border-radius: 999px;
}

.staff-picks-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
}

.staff-picks-confirm-status {
  font-size: 14px;
  color: #3f3a35;
}

.staff-picks-hire-btn {
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f5ead8;
  background: #c67139;
  border: none;
  border-radius: 999px;
  padding: 15px 38px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(198, 113, 57, 0.35);
  transition: background 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease;
}

.staff-picks-hire-btn:hover:not(:disabled) {
  background: #b86633;
  box-shadow: 0 6px 20px rgba(198, 113, 57, 0.45);
}

.staff-picks-hire-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.staff-picks-hire-btn:disabled {
  background: #ded6c6;
  color: #6b6258;
  cursor: default;
  box-shadow: none;
}

.staff-picks-staff-section {
  margin-top: 4px;
}

.staff-picks-staff-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6a6157;
  margin-bottom: 10px;
}

.staff-picks-staff-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fdf8ef;
  border-radius: 26px;
  padding: 16px 20px;
}

.staff-picks-staff-empty {
  font-size: 13px;
  color: #8a8278;
}

.staff-picks-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f5ead8;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
}

.staff-picks-staff-disc {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caprasimo', system-ui, sans-serif;
  font-size: 11px;
}

.staff-picks-staff-disc.attack {
  background: #93491a;
  color: #ffe6cd;
}
.staff-picks-staff-disc.defense {
  background: #3f7a1f;
  color: #eaffd6;
}
.staff-picks-staff-disc.tempo {
  background: #17356f;
  color: #ffd24a;
}
.staff-picks-staff-disc.squad {
  background: #5f4707;
  color: #ffe9a3;
}

.staff-picks-staff-text {
  font-size: 12.5px;
  color: #201e1d;
  font-weight: 600;
}

.staff-picks-staff-note {
  margin-left: auto;
  font-size: 11.5px;
  color: #6a6157;
}

.wc-save-modal {
  padding: 18px;
  gap: 12px;
}

.wc-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wc-save-new {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wc-save-name-input {
  flex: 1;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #10221a;
  color: #e8f2e8;
  min-width: 0;
}

.wc-save-name-input::placeholder {
  color: #6b8a78;
}

.wc-save-new .menu-btn {
  width: auto;
  min-width: 90px;
}

.wc-save-list {
  overflow-y: auto;
  max-height: 46vh;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 4px;
}

.wc-save-empty {
  padding: 16px;
  text-align: center;
  color: #6b8a78;
  font-size: 13px;
}

.wc-save-info {
  flex: 1;
  min-width: 0;
}

.wc-save-name {
  font-weight: 700;
  font-size: 14px;
}

.wc-save-meta {
  font-size: 12px;
  color: #6b8a78;
  margin-top: 2px;
}

.wc-save-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.wc-save-actions .menu-btn {
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  font-size: 13px;
}

.world-cup-human-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #b8c8b8;
}

.world-cup-human-pick select {
  background: #18241b;
  color: #eaf3ea;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 13px;
}

.shootout-prompt {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #eaf3ea;
}

.shootout-choices {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.shootout-choices .shootout-btn {
  min-width: 90px;
}

.world-cup-groups {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.world-cup-group {
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 300px;
}

.world-cup-group-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
}

.world-cup-group-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.world-cup-group-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
}

.world-cup-group-table th:first-child {
  text-align: left;
}

.world-cup-group-table td {
  padding: 4px 4px;
  text-align: center;
  color: #e8f0e8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.world-cup-group-table td.wc-team {
  text-align: left;
  font-weight: 600;
}

.wc-boss-star {
  color: #f5a623;
}

.world-cup-group-table tr.qualifies {
  background: rgba(88, 214, 141, 0.12);
}

.world-cup-group-table tr.third {
  background: rgba(255, 210, 77, 0.1);
}

.world-cup-group-table tr.qualifies td:first-child::before,
.world-cup-group-table tr.third td:first-child::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.world-cup-group-table tr.qualifies td:first-child::before {
  background: #58d68d;
}

.world-cup-group-table tr.third td:first-child::before {
  background: #ffd24d;
}

.world-cup-group-schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wc-schedule-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
  background: #121e16;
  color: rgba(255, 255, 255, 0.55);
}

.wc-schedule-row.played {
  color: #e8f0e8;
}

.wc-sched-home {
  flex: 1;
  text-align: right;
}

.wc-sched-away {
  flex: 1;
  text-align: left;
}

.wc-sched-score {
  min-width: 38px;
  text-align: center;
  font-weight: 700;
  color: #ffd24d;
}

.wc-schedule-row.training {
  background: rgba(255, 210, 77, 0.06);
  color: #ffd24d;
}

.wc-schedule-row.event {
  background: rgba(124, 58, 237, 0.06);
  color: #a78bfa;
}

.wc-schedule-row.human {
  background: rgba(52, 211, 153, 0.1);
  color: #e8f0e8;
}

.wc-schedule-row.human .wc-sched-score {
  color: #ffd24d;
}

.wc-schedule-section-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  margin: 12px 0 6px;
}

.wc-schedule-section-header:first-child {
  margin-top: 0;
}

/* My Team view */
/* --- My Squad screen --- */
#world-cup-screen.wc-mt-mode {
  padding: 0;
}
#world-cup-screen.wc-mt-mode .wc-screen {
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  border-radius: 0;
  gap: 16px;
  padding: 16px 28px 18px;
}
#world-cup-screen.wc-mt-mode #world-cup-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.wc-mt-screen {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Header */
.wc-mt-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  min-width: 0;
}
.wc-mt-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.wc-mt-name-col {
  flex: 1;
  min-width: 0;
}
.wc-mt-flag {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
.wc-mt-name {
  font-family: var(--wc-display);
  font-size: 30px;
  line-height: 1;
  color: var(--wc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-mt-sub {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-mt-header-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 0;
}
.wc-mt-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 300px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-mt-chip-effect {
  background: var(--wc-sage-200);
  color: var(--wc-sage-900);
}
.wc-mt-chip-surface {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  color: var(--wc-ink-soft);
}
.wc-mt-staff-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fdf8ef;
  background: var(--wc-terr-600);
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(198, 113, 57, 0.3);
  transition: background 0.12s ease, transform 0.08s ease;
  white-space: nowrap;
}
.wc-mt-staff-btn:hover {
  background: var(--wc-terr-700);
}
.wc-mt-staff-btn:active {
  transform: scale(0.97);
}
.wc-mt-staff-btn:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}

/* Body */
.wc-mt-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 468px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
}

/* Pitch */
.wc-mt-pitch-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wc-mt-pitch-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  background: #1f4a24;
  border-radius: 28px;
  padding: 14px;
  box-sizing: border-box;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.25);
}
.wc-mt-form-pills {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.wc-mt-form-pill {
  font-family: var(--wc-sans);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.wc-mt-form-pill:hover {
  background: rgba(255, 255, 255, 0.18);
}
.wc-mt-form-pill.active {
  background: #f5ead8;
  color: #1f4a24;
  border-color: transparent;
}
.wc-mt-pitch-field {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 45%);
  overflow: hidden;
}
.wc-mt-pitch-hint {
  flex-shrink: 0;
  font-family: var(--wc-sans);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.35;
}
.wc-mt-line {
  position: absolute;
  box-sizing: border-box;
}
.wc-mt-centre-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 118px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}
.wc-mt-centre-spot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%);
}
.wc-mt-box {
  position: absolute;
  left: 50%;
  border: 2px solid rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
  box-sizing: border-box;
}
.wc-mt-penalty {
  width: 40%;
  height: calc(20% - 10px);
}
.wc-mt-sixyard {
  width: 18%;
  height: calc(9% - 10px);
}
.wc-mt-spot {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(-50%);
}
.wc-mt-token {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid var(--ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wc-sans);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.wc-mt-token:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.wc-mt-token.selected {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.wc-mt-token-name {
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* Squad list */
.wc-mt-list-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.wc-mt-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--wc-ground-2);
  border-radius: 999px;
  flex-shrink: 0;
}
.wc-mt-seg-btn {
  flex: 1;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--wc-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.wc-mt-seg-btn:hover {
  color: var(--wc-ink);
}
.wc-mt-seg-btn.active {
  background: var(--wc-ink);
  color: var(--wc-paper);
}
.wc-mt-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
}
.wc-mt-row {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 18px;
  padding: 10px 12px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.wc-mt-row:hover {
  background: var(--wc-terr-100);
  border-color: var(--wc-terr-300);
}
.wc-mt-row.open {
  background: var(--wc-terr-200);
  border-color: var(--wc-terr-300);
}
.wc-mt-row-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  cursor: pointer;
  border-radius: 12px;
}
.wc-mt-row-top:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.wc-mt-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ring);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.wc-mt-mini-info {
  flex: 1;
  min-width: 0;
}
.wc-mt-mini-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--wc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-mt-mini-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.wc-mt-star-pill {
  font-family: var(--wc-sans);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5f4707;
  background: #ffe9a3;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
  flex-shrink: 0;
}
.wc-mt-mini-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--wc-muted);
  margin-top: 2px;
}
.wc-mt-mini-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.wc-mt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 62px;
  flex-shrink: 0;
}
.wc-mt-stat-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--wc-ink-soft);
}
.wc-mt-stat-body {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.wc-mt-stat-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(32, 30, 29, 0.1);
  overflow: hidden;
}
.wc-mt-stat-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--wc-terr-600);
}
.wc-mt-stat-val {
  min-width: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-ink);
  text-align: right;
}
.wc-mt-ovr {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  min-width: 46px;
  padding-left: 10px;
  border-left: 1px solid var(--wc-line);
}
.wc-mt-ovr-num {
  font-family: var(--wc-display);
  font-size: 22px;
  line-height: 1;
  color: var(--wc-ink);
}
.wc-mt-ovr-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--wc-muted);
  margin-top: 3px;
}
.wc-mt-row-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(32, 30, 29, 0.1);
}
.wc-mt-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px 8px;
}
.wc-mt-note {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 8px 12px;
}
.wc-mt-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 18px;
  border: 2px dashed #d8d0c4;
  border-radius: 20px;
  background: var(--wc-paper);
}
.wc-mt-empty-title {
  font-family: var(--wc-display);
  font-size: 16px;
  color: var(--wc-ink);
  margin: 0;
}
.wc-mt-empty-desc {
  font-size: 12.5px;
  color: var(--wc-muted);
  line-height: 1.5;
  margin: 0;
}
.wc-mt-row-unavail {
  flex-direction: row;
  align-items: center;
  cursor: default;
}
.wc-mt-unavail-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.wc-mt-unavail-reason {
  font-size: 12px;
  color: var(--wc-muted);
  margin-top: 2px;
}

/* Staff modal */
.wc-mt-staff-card {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 16px;
  padding: 12px 14px;
}
.wc-mt-staff-name {
  font-family: var(--wc-display);
  font-size: 16px;
  color: var(--wc-ink);
  margin-bottom: 4px;
}
.wc-mt-staff-desc {
  font-size: 12.5px;
  color: var(--wc-ink-soft);
  line-height: 1.5;
}

/* Footer */
.wc-mt-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--wc-line);
  min-width: 0;
}
.wc-mt-deck-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--wc-ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.wc-mt-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  white-space: nowrap;
}
.wc-mt-cat-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.wc-mt-cat-swatch.sw-offense { background: #c67139; }
.wc-mt-cat-swatch.sw-defense { background: #7a8a5e; }
.wc-mt-cat-swatch.sw-tactical { background: #2f5bb7; }
.wc-mt-cat-swatch.sw-effect { background: #b9932f; }
.wc-mt-cat-swatch.sw-penalty { background: #b54747; }
.wc-mt-cat-swatch.sw-other { background: #8a8278; }
.wc-mt-foot-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.wc-mt-chrome-btn {
  font-family: var(--wc-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wc-ink);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.wc-mt-chrome-btn:hover {
  background: var(--wc-terr-100);
  border-color: var(--wc-terr-300);
}
.wc-mt-chrome-btn:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.wc-mt-deck-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  color: var(--wc-ink-soft);
  text-transform: capitalize;
}

.wc-mt-deck-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 0;
  justify-content: center;
}
.wc-mt-deck-card {
  flex: 0 0 auto;
  width: 140px;
}

.wc-empty-bracket {
  grid-column: 1 / -1;
  padding: 40px 24px;
  text-align: center;
  color: var(--wc-muted);
  font-weight: 600;
}

.world-cup-bracket {
  position: relative;
  z-index: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.world-cup-round {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.world-cup-round-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--wc-muted);
}
.world-cup-round-title .wc-round-num {
  background: var(--wc-terr-200);
  color: var(--wc-terr-900);
  border-radius: var(--wc-pill);
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: 0.06em;
}

.world-cup-round.third,
.world-cup-round.final {
  align-items: center;
}
.world-cup-round.third .world-cup-round-title,
.world-cup-round.final .world-cup-round-title {
  justify-content: center;
}
.world-cup-round.final .world-cup-round-title {
  color: #c8940f;
}
.world-cup-round.final .wc-round-num {
  background: transparent;
  border: 1px solid rgba(255, 210, 77, 0.7);
  color: #c8940f;
}

/* All rounds share one 16-slot grid so parent pairs sit above their child. */
.world-cup-round-row {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.r32 .wc-match-card { flex: 1 1 0; max-width: 96px; min-width: 0; }
.r16 .wc-match-card { flex: 2 1 0; min-width: 0; }
.qf  .wc-match-card { flex: 4 1 0; max-width: 340px; min-width: 0; }
.world-cup-round.third .world-cup-round-row,
.world-cup-round.final .world-cup-round-row {
  justify-content: center;
  width: 100%;
}
.sf  .wc-match-card { flex: 8 1 0; min-width: 0; }
.third .wc-match-card { flex: 0 1 320px; min-width: 0; }
.final .wc-match-card { flex: 0 1 480px; min-width: 0; }

.wc-match-card {
  background: #18241b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.wc-match-card.played {
  border-color: rgba(255, 210, 77, 0.45);
}
.wc-match-card.next {
  border-color: #ffd24d;
  box-shadow: 0 0 0 2px rgba(255, 210, 77, 0.35);
}

.wc-card-team {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 6px;
}
.wc-card-team .wc-card-flag {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  width: 20px;
  text-align: center;
}
.wc-card-team .wc-card-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wc-card-team.won {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 210, 77, 0.1);
}
.wc-card-team.won .wc-card-score {
  color: #ffd24d;
}

.wc-card-score {
  flex: 0 0 auto;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}
.wc-card-team .wc-team-you {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--wc-sage-600);
  border-radius: 999px;
  padding: 2px 7px;
}
.wc-match-card.pending .wc-card-team {
  color: rgba(255, 255, 255, 0.35);
}
.wc-match-card.pending .wc-card-name.tbd {
  color: rgba(255, 255, 255, 0.25);
}

/* Density per round: R32 tight, R16 flags-only, Final heavy */
.r32 .wc-match-card { padding: 6px 7px; }
.r32 .wc-card-team { font-size: 11px; gap: 6px; }
.r32 .wc-card-flag { font-size: 14px; width: 16px; }
.r32 .wc-card-score { font-size: 11px; }
.r16 .wc-match-card { padding: 8px 10px; }
.r16 .wc-card-team { font-size: 12.5px; gap: 10px; }
.r16 .wc-card-flag { font-size: 24px; width: 28px; }
.r16 .wc-card-name { display: none; }
.r16 .wc-card-score { font-size: 13px; }
.qf .wc-card-team { font-size: 12.5px; gap: 9px; }
.qf .wc-card-flag { font-size: 18px; width: 22px; }
.sf .wc-match-card { padding: 10px 14px; }
.sf .wc-card-team { font-size: 14px; gap: 10px; }
.sf .wc-card-flag { font-size: 22px; width: 26px; }
.third .wc-card-team { font-size: 12.5px; gap: 8px; }
.third .wc-card-flag { font-size: 16px; width: 20px; }
.final .wc-match-card {
  padding: 16px 22px;
  border-radius: 14px;
  border-color: rgba(255, 210, 77, 0.55);
  background: radial-gradient(140% 160% at 50% 0%, rgba(255, 210, 77, 0.16), #18241b 70%);
  box-shadow: 0 0 0 1px rgba(255, 210, 77, 0.15);
}
.final .wc-card-team { font-size: 16px; gap: 12px; padding: 2px 0; }
.final .wc-card-flag { font-size: 30px; width: 34px; }
.final .wc-card-score { font-size: 20px; }

.world-cup-bracket-trophy {
  align-self: center;
  width: min(480px, 100%);
  text-align: center;
  border: 1px dashed rgba(255, 210, 77, 0.55);
  border-radius: var(--wc-r-lg);
  padding: 18px 20px;
  background: radial-gradient(160% 140% at 50% 0%, rgba(255, 210, 77, 0.12), transparent 62%);
}
.world-cup-bracket-trophy .wcb-trophy-ico { font-size: 32px; line-height: 1; }
.world-cup-bracket-trophy .wcb-trophy-name {
  font-family: var(--wc-display);
  font-size: 20px;
  line-height: 1.25;
  color: #c8940f;
  margin-top: 6px;
}
.world-cup-bracket-trophy .wcb-trophy-sub {
  font-size: 12px;
  color: var(--wc-muted);
  font-weight: 600;
  margin-top: 4px;
}

.world-cup-bracket-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wc-next-match {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  background: #18241b;
  border: 1px solid #ffd24d;
  border-radius: 10px;
  font-size: 15px;
}

.wc-next-label {
  width: 100%;
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
  font-weight: 700;
}

.wc-next-home,
.wc-next-away {
  font-weight: 700;
  color: #fff;
  min-width: 120px;
  text-align: center;
}

.wc-next-vs {
  color: rgba(255, 255, 255, 0.4);
}

.world-cup-champion {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
  text-align: center;
  padding: 12px;
  border: 1px solid #ffd24d;
  border-radius: 10px;
  background: rgba(255, 210, 77, 0.08);
}

.wc-champion-modal {
  max-width: 440px;
}

.wc-champion-title {
  font-size: 20px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
  text-align: center;
  line-height: 1.3;
}

.wc-champion-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  margin-top: 6px;
}

.wc-awards-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f5a623;
  text-align: center;
  margin: 16px 0 8px;
}

.wc-awards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wc-award-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
}

.wc-award-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wc-award-winner {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: right;
}

.wc-result-modal {
  max-width: 420px;
}

.wc-ko-preview-modal {
  max-width: 420px;
}

.wc-ko-preview-matchup {
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 1.5;
}

.wc-ko-preview-vs {
  display: inline-block;
  margin: 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #f5a623;
  letter-spacing: 1px;
  vertical-align: middle;
}

.wc-result-pens,
.wc-result-winner {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

.world-cup-actions .menu-btn.active {
  border-color: #ffd24d;
  background: rgba(255, 210, 77, 0.15);
  color: #ffd24d;
}

.wc-stats-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wc-stats-note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.wc-table-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.wc-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.wc-stats-table th,
.wc-stats-table td {
  padding: 6px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.wc-stats-table th {
  color: #ffd24d;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.04);
}

.wc-stats-table td.wc-team {
  font-weight: 700;
  color: #fff;
  text-align: left;
}

.wc-stats-table td.sep,
.wc-stats-table th.sep {
  border-left: 2px solid rgba(255, 210, 77, 0.4);
}

.wc-stats-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.wc-top-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wc-top-selector .menu-btn {
  width: auto;
  min-width: 0;
  font-size: 12px;
  padding: 6px 12px;
}

.wc-top-selector .menu-btn.active {
  border-color: #ffd24d;
  background: rgba(255, 210, 77, 0.15);
  color: #ffd24d;
}

.training-modal .shot-modal-content {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 16px;
}

.training-focus-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.training-focus-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e0e0;
  padding: 12px 24px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 120px;
}

.training-focus-btn:hover {
  background: rgba(255, 210, 77, 0.15);
  border-color: #ffd24d;
  color: #ffd24d;
}

.training-cards-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.training-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 16px;
  width: 180px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.training-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.training-card.rarity-1 {
  border-color: rgba(120, 200, 120, 0.4);
}

.training-card.rarity-1:hover {
  border-color: #78c878;
  box-shadow: 0 4px 16px rgba(120, 200, 120, 0.2);
}

.training-card.rarity-2 {
  border-color: rgba(100, 150, 255, 0.4);
}

.training-card.rarity-2:hover {
  border-color: #6496ff;
  box-shadow: 0 4px 16px rgba(100, 150, 255, 0.2);
}

.training-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffd24d;
  margin-bottom: 8px;
}

.training-card-desc {
  font-size: 11px;
  color: #b8c8b8;
  line-height: 1.4;
  margin-bottom: 10px;
  min-height: 40px;
}

.training-card-rarity {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
}

.training-card.selected {
  border-color: #ffd24d;
  box-shadow: 0 0 0 2px #ffd24d, 0 4px 16px rgba(255, 210, 77, 0.3);
  transform: translateY(-4px);
}

/* Training pick: match-view action card used as a clickable choice */
.training-pick {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.training-pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.training-pick.rarity-1 {
  border-color: rgba(120, 200, 120, 0.75);
}

.training-pick.rarity-1:hover {
  border-color: #78c878;
  box-shadow: 0 6px 18px rgba(120, 200, 120, 0.3);
}

.training-pick.rarity-2 {
  border-color: rgba(100, 150, 255, 0.8);
}

.training-pick.rarity-2:hover {
  border-color: #6496ff;
  box-shadow: 0 6px 18px rgba(100, 150, 255, 0.3);
}

.training-pick.rarity-3 {
  border-color: rgba(255, 210, 77, 0.85);
}

.training-pick.rarity-3:hover {
  border-color: #ffd24d;
  box-shadow: 0 6px 18px rgba(255, 210, 77, 0.3);
}

/* Synergy pack: two match-view cards picked together */
.training-pack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 2px dashed rgba(255, 210, 77, 0.55);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.training-pack:hover {
  transform: translateY(-4px);
  border-color: #ffd24d;
  box-shadow: 0 6px 18px rgba(255, 210, 77, 0.25);
}

.training-pack-label {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
}

.training-pack-cards {
  display: flex;
  gap: 12px;
}

.training-pack-info {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
}

.coach-card {
  position: relative;
  width: 150px;
  height: 250px;
  flex-shrink: 0;
  background: linear-gradient(165deg, #2c2438, #1b1623 70%);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.coach-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.coach-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 210, 77, 0.35);
  border-color: rgba(255, 210, 77, 0.9);
}

.coach-card.rarity-1 {
  border-color: rgba(120, 200, 120, 0.5);
}

.coach-card.rarity-2 {
  border-color: rgba(100, 150, 255, 0.5);
}

.coach-card-name {
  font-size: 14px;
  line-height: 16px;
  min-height: 32px;
  flex-shrink: 0;
  font-weight: 700;
  color: #ffd24d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
}

.coach-card-nationality {
  font-size: 9px;
  font-weight: 600;
  color: #a99cc9;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
  z-index: 1;
}

.coach-card-desc {
  font-size: 10px;
  color: #cdc5dd;
  line-height: 1.35;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  z-index: 1;
}

.coach-card-effects {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #888;
  flex-shrink: 0;
  z-index: 1;
}

.event-result-subtitle {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd24d;
  margin: 10px 0 8px;
}

.event-result-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.event-result-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #dfe8df;
}

.event-result-chip.removed {
  border-color: rgba(255, 120, 120, 0.55);
  color: #e8b0b0;
  text-decoration: line-through;
}

.event-result-chip.held {
  border-color: rgba(255, 210, 77, 0.55);
  color: #ffd24d;
}

.event-result-arrow {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.training-card.rarity-1 .training-card-rarity {
  color: #78c878;
}

.training-card.rarity-2 .training-card-rarity {
  color: #6496ff;
}

.game-notice-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: noticeFadeIn 0.15s ease forwards;
}

.game-notice-overlay.notice-exit {
  animation: noticeFadeOut 0.25s ease forwards;
}

.game-notice-bar {
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  padding: 0.6rem 0;
  display: flex;
  justify-content: center;
}

.game-notice-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 10vw, 8rem);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.8);
  text-align: center;
  padding: 0 1rem;
  transform: translateX(-100%);
  animation: noticeSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.game-notice-overlay.notice-exit .game-notice-text {
  animation: none;
}

@keyframes noticeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes noticeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes noticeSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.event-phase-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f5a623;
  margin-bottom: 8px;
}

.event-phase-progress {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9aa7b8;
  margin-bottom: 8px;
}

.event-phase-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.event-phase-option {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

.event-phase-option:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(245, 166, 35, 0.5);
}

.event-option-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}

.event-option-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}



/* ===================== UI polish ===================== */

/* --- #8 Pitch styling: mown stripes, vignette, stadium border --- */
#pitch {
  background:
    repeating-linear-gradient(
      90deg,
      #54a86c 0 calc(100% / 9),
      #4c9c63 calc(100% / 9) calc(200% / 9)
    );
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
  box-shadow:
    inset 0 0 130px rgba(6, 30, 12, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.28),
    0 14px 34px rgba(0, 0, 0, 0.55);
}

.cell {
  background: transparent;
}

/* --- #4 Hand card hover lift + glow --- */
.in-play-hand .action-card {
  flex: 0 0 110px;
  width: 110px;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.in-play-hand .action-card:hover {
  transform: translateY(-8px) scale(1.06);
  border-color: rgba(255, 210, 77, 0.9);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 210, 77, 0.35);
  z-index: 5;
}

/* Active human hand: fanned with a slight arc */
.in-play-hand.playing-hand {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}

.in-play-hand.playing-hand .action-card {
  transform-origin: 50% 100%;
  transform: rotate(var(--fan-angle, 0deg));
}

.in-play-hand.playing-hand .action-card:nth-child(1) {
  --fan-angle: -9deg;
}
.in-play-hand.playing-hand .action-card:nth-child(2) {
  --fan-angle: -6deg;
}
.in-play-hand.playing-hand .action-card:nth-child(3) {
  --fan-angle: -3deg;
}
.in-play-hand.playing-hand .action-card:nth-child(4) {
  --fan-angle: 0deg;
}
.in-play-hand.playing-hand .action-card:nth-child(5) {
  --fan-angle: 3deg;
}
.in-play-hand.playing-hand .action-card:nth-child(6) {
  --fan-angle: 6deg;
}
.in-play-hand.playing-hand .action-card:nth-child(7) {
  --fan-angle: 9deg;
}
.in-play-hand.playing-hand .action-card:nth-child(8) {
  --fan-angle: 12deg;
}

.in-play-hand.playing-hand .action-card:hover {
  transform: rotate(var(--fan-angle, 0deg)) translateY(-14px) scale(1.12);
}

/* --- #4 Pulsing action points for the active team --- */
.rail-team .rail-ap-dot.filled {
  animation: pointStarPulse 1.6s ease-in-out infinite;
}

@keyframes pointStarPulse {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 2px rgba(255, 210, 77, 0.4);
  }
  50% {
    transform: scale(1.25);
    text-shadow: 0 0 10px rgba(255, 210, 77, 0.95);
  }
}

/* --- #1 Screen shake on goals / fouls --- */
@keyframes screenShake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-7px, 4px);
  }
  40% {
    transform: translate(6px, -5px);
  }
  60% {
    transform: translate(-5px, 2px);
  }
  80% {
    transform: translate(4px, -3px);
  }
}

body.screen-shake #board {
  animation: screenShake 0.45s ease;
}

/* --- #2 Goal celebration overlay --- */
.goal-celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  --flash: #ffd24d;
}

.goal-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--flash) 0%, rgba(0, 0, 0, 0) 72%);
  opacity: 0;
  animation: goalFlash 1.5s ease-out forwards;
}

@keyframes goalFlash {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
  }
}

.goal-banner {
  position: relative;
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 900;
  letter-spacing: 8px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 4px 26px rgba(0, 0, 0, 0.65),
    0 0 46px var(--flash);
  animation: goalBannerIn 1.8s cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

.goal-banner small {
  display: block;
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 3px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.92);
}

@keyframes goalBannerIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  12% {
    transform: scale(1.1);
    opacity: 1;
  }
  22% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

/* --- #3 Ball trail --- */
.ball-trail-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1500;
  animation: ballTrailFade 0.55s ease-out forwards;
}

@keyframes ballTrailFade {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* --- #11 Menu screens: button accents --- */

.menu-panel {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.35);
}

#menu-screen .menu-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.12s ease;
}

#menu-screen .menu-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--accent, #ffd24d);
}

#menu-screen .menu-btn:nth-of-type(1) {
  --accent: #e5533d;
}

#menu-screen .menu-btn:nth-of-type(2) {
  --accent: #58a6ff;
}

#menu-screen .menu-btn:nth-of-type(3) {
  --accent: #b981f5;
}

#menu-screen .menu-btn:nth-of-type(4) {
  --accent: #ffd24d;
}

#menu-screen .menu-btn:nth-of-type(5) {
  --accent: #4ecdc4;
}

#menu-screen .menu-btn:nth-of-type(6) {
  --accent: #f4a261;
}

#menu-screen .menu-btn:hover {
  transform: translateX(4px);
  background: #3d5a48;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 12px color-mix(in srgb, var(--accent, #ffd24d) 40%, transparent);
}

#menu-screen .menu-hud { order: -30; }
#menu-screen .menu-title { order: -20; }
#menu-screen .menu-subtitle { order: -10; }
#menu-screen .menu-foot { order: 20; }
#menu-screen #menu-resume-wc { order: -1; }

/* --- Fireworks behind the victory modal --- */
.fireworks-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.firework-burst {
  position: absolute;
  width: 0;
  height: 0;
}

.firework-burst span {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--fw-color, #ffd24d);
  box-shadow: 0 0 10px var(--fw-color, #ffd24d);
  animation: fireworkParticle 0.95s ease-out forwards;
}

@keyframes fireworkParticle {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx, 60px), var(--dy, 60px)) scale(0.2);
    opacity: 0;
  }
}

/* --- Goal celebration: players dance in the corner --- */
.player-token.goal-dance {
  z-index: 20;
}

/* Wiggle: side-to-side twist with a hop */
.player-token.goal-dance-wiggle {
  animation: goalDanceWiggle 0.5s ease-in-out infinite;
}

@keyframes goalDanceWiggle {
  0%,
  100% {
    transform: rotate(-14deg) translateY(0);
  }
  25% {
    transform: rotate(0deg) translateY(-9px) scale(1.08);
  }
  50% {
    transform: rotate(14deg) translateY(0);
  }
  75% {
    transform: rotate(0deg) translateY(-9px) scale(1.08);
  }
}

/* Jump: big vertical leaps with squash & stretch */
.player-token.goal-dance-jump {
  animation: goalDanceJump 0.6s ease-in-out infinite;
}

@keyframes goalDanceJump {
  0%,
  100% {
    transform: translateY(0) scale(1.12, 0.88);
  }
  40% {
    transform: translateY(-16px) scale(0.92, 1.14);
  }
  70% {
    transform: translateY(0) scale(1, 1);
  }
}

/* Spin: full twirls */
.player-token.goal-dance-spin {
  animation: goalDanceSpin 0.8s linear infinite;
}

@keyframes goalDanceSpin {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(180deg) translateY(-6px);
  }
  100% {
    transform: rotate(360deg) translateY(0);
  }
}

/* Wave: swaying side to side with arms-up tilt */
.player-token.goal-dance-wave {
  animation: goalDanceWave 0.7s ease-in-out infinite;
}

@keyframes goalDanceWave {
  0%,
  100% {
    transform: translateX(-7px) rotate(-24deg);
  }
  50% {
    transform: translateX(7px) rotate(24deg);
  }
}

/* Squat: bouncing knee-bends */
.player-token.goal-dance-squat {
  animation: goalDanceSquat 0.55s ease-in-out infinite;
}

@keyframes goalDanceSquat {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  50% {
    transform: translateY(6px) scale(1.15, 0.8);
  }
}

/* Skill-move sparkles */
.spark-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd24d;
  box-shadow: 0 0 8px 2px rgba(255, 210, 77, 0.85);
  pointer-events: none;
  z-index: 15;
  animation: sparkle-fly 650ms ease-out forwards;
}

.spark-particle.spark-white {
  background: #ffffff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.9);
}

@keyframes sparkle-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);
  }
}

/* ---- Match Effects ---- */
.scoreboard-match-effect {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #ffd24d;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
}

.match-effect-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.match-effect-overlay.show {
  background: rgba(0, 0, 0, 0.55);
  opacity: 1;
}
.match-effect-overlay.fade {
  opacity: 0;
}

.match-effect-card {
  width: 125px;
  height: 175px;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.2);
  transform: scale(0.7) translateY(-10px);
  animation: matchEffectIn 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2) forwards;
}
.match-effect-card::before {
  border-color: rgba(0, 0, 0, 0.1);
}
.match-effect-card .action-card-name {
  color: #333;
}
.match-effect-card .action-card-desc {
  color: #555;
}
.match-effect-card .action-card-cost {
  color: #333;
  background: rgba(0, 0, 0, 0.1);
}

.match-effect-tag {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 4px;
  color: #ffd24d;
  text-shadow: 0 0 14px rgba(255, 210, 77, 0.8);
  animation: matchEffectIn 0.4s ease forwards;
}

@keyframes matchEffectIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ============================================================
   WORLD CUP 2026 — OVERVIEW + EVENT PHASE (light theme)
   Scoped to #world-cup-screen and #event-phase-screen only.
   ============================================================ */

.wc-screen,
.event-screen,
.training-screen,
#event-phase-screen,
#training-phase-screen {
  --wc-ink: #201e1d;
  --wc-ink-soft: #4a423d;
  --wc-muted: #7b716a;
  --wc-ground: #f5ead8;
  --wc-ground-2: #eee0c9;
  --wc-paper: #fffaf3;
  --wc-paper-2: #fdf3e3;
  --wc-line: rgba(32, 30, 29, 0.14);
  --wc-terr-100: #faf0e2;
  --wc-terr-200: #f5dfc5;
  --wc-terr-300: #edc7a1;
  --wc-terr-400: #e2aa7b;
  --wc-terr-500: #d58d58;
  --wc-terr-600: #c67139;
  --wc-terr-700: #a9542a;
  --wc-terr-800: #863e1d;
  --wc-terr-900: #612a11;
  --wc-sage-100: #f0f1e6;
  --wc-sage-200: #dfe4ce;
  --wc-sage-300: #c4cfab;
  --wc-sage-400: #a6b688;
  --wc-sage-500: #8d9d70;
  --wc-sage-600: #7a8a5e;
  --wc-sage-700: #636f4b;
  --wc-sage-800: #4a5438;
  --wc-sage-900: #333b26;
  --wc-display: 'Caprasimo', Georgia, serif;
  --wc-sans: 'Figtree', system-ui, sans-serif;
  --wc-r: 16px;
  --wc-r-lg: 20px;
  --wc-r-xl: 28px;
  --wc-pill: 999px;
  --wc-shadow: 0 1px 2px rgba(32, 30, 29, 0.08), 0 8px 24px rgba(32, 30, 29, 0.08);
  --wc-shadow-lift: 0 2px 4px rgba(32, 30, 29, 0.1), 0 14px 34px rgba(32, 30, 29, 0.14);
}

#world-cup-screen {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  position: relative;
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  filter: none;
  min-height: 100vh;
}

#world-cup-screen .wc-pitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(196, 207, 171, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 207, 171, 0.14) 1px, transparent 1px);
  background-size: calc(100% / 9) calc(100% / 7);
}

#world-cup-screen .wc-pitch::before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 2px;
  background: rgba(255, 210, 77, 0.22);
}

#world-cup-screen .wc-pitch::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(18vw, 140px);
  height: min(18vw, 140px);
  border-radius: 50%;
  border: 2px solid rgba(255, 210, 77, 0.22);
  transform: translate(-50%, -50%);
}

#world-cup-screen .wc-light {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  filter: blur(2px);
  will-change: transform;
}

#world-cup-screen #wc-light-a {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 210, 77, 0.85) 15%, rgba(255, 140, 30, 0.5) 30%, transparent 60%);
  animation: wc-light-a-h 15s ease-in-out infinite alternate;
}

#world-cup-screen #wc-light-b {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(30, 180, 255, 0.8) 15%, rgba(100, 60, 220, 0.45) 30%, transparent 60%);
  animation: wc-light-b-v 14s ease-in-out infinite alternate;
}

#world-cup-screen #wc-light-c {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 80, 200, 0.8) 15%, rgba(220, 40, 160, 0.45) 30%, transparent 60%);
  animation: wc-light-c-h 16s ease-in-out infinite alternate;
}

#world-cup-screen #wc-light-d {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(80, 255, 180, 0.8) 15%, rgba(40, 220, 100, 0.45) 30%, transparent 60%);
  animation: wc-light-d-v 18s ease-in-out infinite alternate;
}

#world-cup-screen #wc-light-e {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 180, 40, 0.85) 15%, rgba(240, 140, 20, 0.5) 30%, transparent 60%);
  animation: wc-light-e-h 13.5s ease-in-out infinite alternate;
}

#world-cup-screen #wc-light-f {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(180, 80, 255, 0.8) 15%, rgba(140, 40, 220, 0.45) 30%, transparent 60%);
  animation: wc-light-f-v 15.5s ease-in-out infinite alternate;
}

@keyframes wc-light-a-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes wc-light-b-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }
@keyframes wc-light-c-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes wc-light-d-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }
@keyframes wc-light-e-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes wc-light-f-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }

#world-cup-screen .wc-box {
  position: absolute;
  top: 50%;
  width: 16%;
  height: 42%;
  border: 2px solid rgba(255, 210, 77, 0.16);
  transform: translateY(-50%);
}
#world-cup-screen .wc-box-l { left: calc(15% - 2px); border-right: none; }
#world-cup-screen .wc-box-r { right: calc(15% - 2px); border-left: none; }
#world-cup-screen .wc-six {
  position: absolute;
  top: 50%;
  width: 46%;
  height: 26%;
  border: 2px solid rgba(255, 210, 77, 0.16);
  transform: translateY(-50%);
}
#world-cup-screen .wc-box-l .wc-six { right: 0; border-right: none; }
#world-cup-screen .wc-box-r .wc-six { left: 0; border-left: none; }

.wc-screen {
  position: relative;
  z-index: 3;
  width: min(1280px, 96vw);
  background: var(--wc-ground);
  color: var(--wc-ink);
  font-family: var(--wc-sans);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-shadow);
  padding: 28px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --- Tab bar --- */
.wc-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 6px;
  box-shadow: var(--wc-shadow);
}
.wc-tab {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  background: transparent;
  border: 0;
  border-radius: var(--wc-pill);
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.wc-tab:hover {
  background: var(--wc-terr-100);
  color: var(--wc-terr-800);
}
.wc-tab:active {
  background: var(--wc-terr-200);
}
.wc-tab.active {
  background: var(--wc-ink);
  color: var(--wc-paper);
}
.wc-tab:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.wc-tabs-esc {
  margin-left: auto;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--wc-pill);
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.wc-tabs-esc:hover {
  color: var(--wc-terr-700);
  background: var(--wc-terr-100);
}

/* --- Match banner --- */
.wc-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  background: var(--wc-terr-700);
  border-radius: var(--wc-r-xl);
  padding: 22px 26px;
  color: #fff7ef;
  box-shadow: var(--wc-shadow);
}
.wc-banner-left {
  min-width: 0;
}
.wc-banner-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 247, 239, 0.75);
  margin-bottom: 6px;
}
.wc-banner-title {
  font-family: var(--wc-display);
  font-size: 32px;
  line-height: 1.1;
  color: #fff;
}
.wc-banner-vs {
  color: rgba(255, 247, 239, 0.55);
  font-size: 22px;
  margin: 0 6px;
}
.wc-banner-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wc-banner-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 247, 239, 0.7);
}
.wc-banner-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wc-trait-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--wc-pill);
  padding: 6px 12px;
  font-size: 12.5px;
  color: #fff;
  line-height: 1.35;
  max-width: 360px;
}
.wc-trait-pill strong {
  color: #fff;
  font-weight: 800;
}
.wc-banner-right {
  display: flex;
  align-items: center;
}

/* Kick off / continue button (overrides legacy .wc-continue-btn) */
.wc-screen .wc-continue-btn,
.wc-kickoff-btn {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: #3a1c05;
  background: var(--wc-terr-200);
  border: 0;
  border-radius: var(--wc-pill);
  padding: 14px 30px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease, background 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
  animation: none;
}
.wc-screen .wc-continue-btn:hover:not(:disabled),
.wc-kickoff-btn:hover:not(:disabled) {
  background: var(--wc-terr-100);
  transform: translateY(-2px);
  filter: none;
}
.wc-screen .wc-continue-btn:active:not(:disabled),
.wc-kickoff-btn:active:not(:disabled) {
  transform: translateY(0);
  background: var(--wc-terr-300);
}
.wc-screen .wc-continue-btn:disabled,
.wc-kickoff-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.wc-screen .wc-continue-btn:focus-visible,
.wc-kickoff-btn:focus-visible {
  outline: 2px solid var(--wc-terr-100);
  outline-offset: 2px;
}
.wc-continue-flag {
  font-size: 18px;
  line-height: 1;
}

/* --- Results ticker --- */
.wc-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  background: var(--wc-sage-700);
  border-radius: var(--wc-pill);
  padding: 8px 12px;
  box-shadow: var(--wc-shadow);
  scrollbar-width: none;
}
.wc-ticker::-webkit-scrollbar {
  display: none;
}
.wc-ticker-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--wc-pill);
  padding: 5px 12px;
  font-size: 12px;
  color: #f6f7ef;
  white-space: nowrap;
}
.wc-ticker-pill.upset {
  border-color: rgba(255, 221, 189, 0.9);
  color: #ffe9d6;
  background: rgba(255, 255, 255, 0.1);
}
.wc-tick-team {
  font-weight: 600;
}
.wc-tick-score {
  font-weight: 800;
  color: #fff;
}
.wc-ticker-more {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--wc-pill);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  font-family: inherit;
  transition: background 0.15s ease;
}
.wc-ticker-more:hover {
  background: rgba(255, 255, 255, 0.22);
}
.wc-ticker-more:focus-visible,
.wc-tabs:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* --- Overview layout --- */
.wc-overview-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.wc-overview-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
  align-items: start;
}
.wc-overview-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.wc-overview-rail {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.wc-panel {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-shadow);
  padding: 20px 22px;
}
.wc-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wc-panel-title {
  font-family: var(--wc-display);
  font-size: 20px;
  color: var(--wc-ink);
}
.wc-empty-note {
  font-size: 14px;
  color: var(--wc-muted);
  text-align: center;
  padding: 28px;
}

/* --- Group table --- */
.wc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.wc-table thead th {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wc-muted);
  padding: 8px 6px;
  border-bottom: 2px solid var(--wc-line);
  text-align: center;
}
.wc-table thead th:first-child {
  text-align: left;
}
.wc-table thead th.num {
  width: 26px;
}
.wc-table tbody td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid var(--wc-line);
}
.wc-table tbody td.wc-team {
  text-align: left;
  font-weight: 600;
}
.wc-table tbody tr {
  transition: background 0.12s ease;
}
.wc-table tbody tr:hover:not(.wc-cut-row) {
  background: var(--wc-terr-100);
}
.wc-table tbody tr.you {
  background: var(--wc-terr-200);
  box-shadow: inset 3px 0 0 var(--wc-terr-600);
}
.wc-table tbody tr.you:hover {
  background: var(--wc-terr-200);
}
.wc-table tbody tr.below {
  opacity: 0.72;
}
.wc-cut-row td {
  position: relative;
  height: 22px;
  padding: 0;
  border-bottom: 0;
  text-align: left;
}
.wc-cut-line {
  position: absolute;
  left: 8px;
  right: 70px;
  top: 11px;
  border-top: 2px dashed var(--wc-sage-600);
}
.wc-cut-label {
  position: absolute;
  right: 8px;
  top: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wc-sage-800);
  padding: 1px 9px;
  border-radius: var(--wc-pill);
  background: var(--wc-sage-200);
}

.wc-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: var(--wc-pill);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.wc-badge-you {
  background: var(--wc-terr-700);
  color: #fff;
}
.wc-badge-opp {
  background: var(--wc-sage-600);
  color: #fff;
}

/* --- Right rail cards --- */
.wc-rail-card {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wc-rail-title {
  font-family: var(--wc-display);
  font-size: 18px;
  color: var(--wc-ink);
}
.wc-rail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--wc-line);
}
.wc-rail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.wc-rail-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-rail-name {
  font-weight: 700;
  color: var(--wc-ink);
}
.wc-tag {
  border-radius: var(--wc-pill);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.wc-tag-Inj {
  background: var(--wc-terr-200);
  color: var(--wc-terr-900);
}
.wc-tag-Susp {
  background: var(--wc-sage-200);
  color: var(--wc-sage-900);
}
.wc-tag-Back {
  background: var(--wc-ground-2);
  color: var(--wc-ink-soft);
}
.wc-rail-cons {
  font-size: 12px;
  color: var(--wc-muted);
  line-height: 1.4;
}
.wc-rail-cons strong {
  color: var(--wc-ink);
}
.wc-arrow {
  color: var(--wc-terr-600);
  font-weight: 700;
}
.wc-rail-cons em {
  font-style: normal;
  color: var(--wc-terr-700);
  font-weight: 700;
}
.wc-rail-effect {
  font-size: 12.5px;
  line-height: 1.4;
}
.wc-rail-effect.good {
  color: var(--wc-sage-800);
}
.wc-rail-effect.bad {
  color: var(--wc-terr-800);
}
.wc-rail-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.wc-rail-src {
  font-size: 11px;
  color: var(--wc-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.wc-dur {
  font-size: 11px;
  font-weight: 700;
  color: var(--wc-ink-soft);
  border-radius: var(--wc-pill);
  background: var(--wc-ground-2);
  padding: 1px 8px;
}
.wc-dur-perm {
  color: var(--wc-sage-800);
  background: var(--wc-sage-200);
}
.wc-rail-foot {
  font-size: 12px;
  color: var(--wc-muted);
  border-top: 1px dashed var(--wc-line);
  padding-top: 10px;
  line-height: 1.4;
}
.wc-gb {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.wc-gb-medal {
  font-size: 16px;
}
.wc-gb-info {
  font-weight: 600;
  font-size: 13px;
  color: var(--wc-ink);
}

/* --- Other eleven groups --- */
.wc-other-groups-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wc-other-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.wc-other-group {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  padding: 14px 14px 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  box-shadow: var(--wc-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.wc-other-group:hover {
  transform: translateY(-2px);
  box-shadow: var(--wc-shadow-lift);
  border-color: var(--wc-terr-300);
}
.wc-other-group:active {
  transform: translateY(0);
}
.wc-other-group:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.wc-other-group-name {
  font-family: var(--wc-display);
  font-size: 15px;
  color: var(--wc-ink);
  margin-bottom: 8px;
}
.wc-other-team {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12.5px;
  border-top: 1px solid var(--wc-line);
}
.wc-other-team.down {
  opacity: 0.55;
}
.wc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}
.wc-other-team.up .wc-dot {
  background: var(--wc-sage-600);
}
.wc-other-team-name {
  flex: 1;
  font-weight: 600;
  color: var(--wc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wc-other-team-pts {
  font-weight: 800;
  color: var(--wc-ink-soft);
}

/* --- Actions row --- */
.wc-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 2px;
}
.wc-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--wc-terr-800);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wc-btn:hover {
  background: var(--wc-terr-100);
  border-color: var(--wc-terr-300);
}
.wc-btn:active {
  background: var(--wc-terr-200);
}
.wc-btn:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}

/* --- Taken-over tab pages: light reskin --- */
#world-cup-content {
  color: var(--wc-ink);
}
.wc-tab-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wc-deck-summary {
  font-size: 13px;
  color: var(--wc-ink-soft);
}
.wc-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.wc-schedule {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wc-sched-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--wc-muted);
  width: 130px;
  flex-shrink: 0;
  text-align: right;
}
.wc-schedule-empty {
  font-size: 14px;
  color: var(--wc-muted);
  padding: 18px;
  text-align: center;
}
.wc-schedule-row {
  background: var(--wc-paper);
  color: var(--wc-ink-soft);
  border-bottom: 1px solid var(--wc-line);
}
.wc-schedule-row.played {
  color: var(--wc-ink);
}
.wc-schedule-row.training {
  background: var(--wc-sage-100);
  color: var(--wc-sage-900);
}
.wc-schedule-row.event {
  background: var(--wc-terr-100);
  color: var(--wc-terr-900);
}
.wc-schedule-row.human {
  background: var(--wc-sage-200);
  color: var(--wc-ink);
}
.wc-sched-score {
  color: var(--wc-terr-700);
  font-weight: 800;
}
.wc-schedule-row.human .wc-sched-score {
  color: var(--wc-terr-800);
}
.wc-schedule-section-header {
  color: var(--wc-muted);
}

#world-cup-content .wc-stats-view {
  color: var(--wc-ink);
}
#world-cup-content .wc-stats-note {
  color: var(--wc-muted);
}
#world-cup-content .wc-table-scroll {
  background: var(--wc-paper);
  border-color: var(--wc-line);
  border-radius: var(--wc-r-lg);
}
#world-cup-content .wc-stats-table th {
  color: var(--wc-muted);
  border-bottom-color: var(--wc-line);
  background: var(--wc-ground-2);
}
#world-cup-content .wc-stats-table td {
  color: var(--wc-ink);
  border-bottom-color: var(--wc-line);
}
#world-cup-content .wc-stats-table td.wc-team {
  color: var(--wc-ink);
}
#world-cup-content .wc-stats-table td.sep,
#world-cup-content .wc-stats-table th.sep {
  border-left: 2px solid var(--wc-terr-300);
}
#world-cup-content .wc-stats-table tbody tr:hover {
  background: var(--wc-terr-100);
}

#world-cup-content .world-cup-groups {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
#world-cup-content .world-cup-group {
  background: var(--wc-paper);
  border-color: var(--wc-line);
  border-radius: var(--wc-r-lg);
  box-shadow: var(--wc-shadow);
}
#world-cup-content .world-cup-group-title {
  color: var(--wc-ink);
}
#world-cup-content .world-cup-group-table th {
  color: var(--wc-muted);
  border-bottom-color: var(--wc-line);
}
#world-cup-content .world-cup-group-table td {
  color: var(--wc-ink);
  border-bottom-color: var(--wc-line);
}
#world-cup-content .world-cup-group-table td.wc-team {
  font-weight: 600;
}
#world-cup-content .world-cup-group-table tr.qualifies {
  background: var(--wc-sage-200);
}
#world-cup-content .world-cup-group-table tr.qualifies td:first-child::before {
  background: var(--wc-sage-600);
}
#world-cup-content .world-cup-group-table tr.third {
  background: var(--wc-terr-200);
}
#world-cup-content .world-cup-group-table tr.third td:first-child::before {
  background: var(--wc-terr-500);
}

/* (My Squad styles live at the top of this file in the wc-mt-* block.) */

/* --- Event phase screen --- */
#event-phase-screen {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--wc-ground);
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.event-screen {
  width: min(1200px, 94vw);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 42px;
  align-items: start;
  padding: 40px 12px 60px;
}
.event-left {
  position: sticky;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#event-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.event-kicker-main {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wc-terr-700);
  border: 1px solid var(--wc-terr-300);
  border-radius: var(--wc-pill);
  padding: 4px 12px;
  background: var(--wc-terr-100);
}
.event-kicker-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-muted);
}
#event-heading {
  font-family: var(--wc-display);
  font-size: 40px;
  line-height: 1.05;
  color: var(--wc-ink);
  margin: 0;
}
#event-paragraph {
  font-size: 15px;
  color: var(--wc-ink-soft);
  line-height: 1.55;
  margin: 0;
}
#event-coming-up {
  margin-top: 6px;
}
.event-coming-card {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  padding: 16px 18px;
  box-shadow: var(--wc-shadow);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-coming-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--wc-muted);
}
.event-coming-vs {
  font-family: var(--wc-display);
  font-size: 21px;
  color: var(--wc-ink);
}
.event-coming-vs span {
  color: var(--wc-terr-600);
  margin: 0 4px;
  font-size: 15px;
}
.event-coming-where {
  font-size: 12px;
  font-weight: 600;
  color: var(--wc-muted);
}
.event-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
#event-options {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.event-option {
  text-align: left;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  padding: 20px 22px;
  box-shadow: var(--wc-shadow);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.event-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--wc-shadow-lift);
  border-color: var(--wc-terr-400);
}
.event-option:active {
  transform: translateY(0);
}
.event-option:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.event-option-title {
  font-family: var(--wc-display);
  font-size: 22px;
  color: var(--wc-ink);
}
.event-option-flavour {
  font-size: 13px;
  color: var(--wc-muted);
  line-height: 1.45;
}
.event-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 2px;
}
.event-cell {
  border-radius: var(--wc-r);
  padding: 12px 14px;
}
.event-cell-gain {
  background: var(--wc-sage-100);
  border: 1px solid var(--wc-sage-300);
}
.event-cell-lose {
  background: var(--wc-terr-100);
  border: 1px solid var(--wc-terr-300);
}
.event-cell-title {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
.event-cell-gain .event-cell-title {
  color: var(--wc-sage-800);
}
.event-cell-lose .event-cell-title {
  color: var(--wc-terr-800);
}
.event-cell-body {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wc-ink);
  line-height: 1.4;
}
.event-take {
  align-self: flex-end;
  background: var(--wc-terr-700);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  border-radius: var(--wc-pill);
  padding: 8px 22px;
  margin-top: 2px;
}
#event-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.event-footer-chip {
  font-size: 12px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 5px 12px;
  box-shadow: var(--wc-shadow);
}

/* ============================================================
   WORLD CUP 2026 — TRAINING SESSION (light theme, full screen)
   Scoped to #training-phase-screen only.
   ============================================================ */

#training-phase-screen {
  position: fixed;
  inset: 0;
  z-index: 620;
  background: var(--wc-ground);
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}
.training-screen {
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 12px 30px;
}

/* --- Header --- */
.tr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}
.tr-header-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}
.tr-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tr-kicker-main {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--wc-terr-700);
  border: 1px solid var(--wc-terr-300);
  border-radius: var(--wc-pill);
  padding: 4px 12px;
  background: var(--wc-terr-100);
}
.tr-kicker-sub {
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-muted);
}
.tr-heading {
  font-family: var(--wc-display);
  font-size: 38px;
  line-height: 1.05;
  color: var(--wc-ink);
  margin: 0;
}
.tr-paragraph {
  font-size: 15px;
  color: var(--wc-ink-soft);
  line-height: 1.55;
  margin: 0;
}
.tr-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.tr-team-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 8px 16px;
  box-shadow: var(--wc-shadow);
  font-size: 14px;
  font-weight: 700;
  color: var(--wc-ink);
}
.tr-team-pill .tr-team-flag {
  font-size: 20px;
}
.tr-team-pill .tr-team-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--wc-muted);
}
.tr-esc {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--wc-muted);
  user-select: none;
}

/* --- Focus chips (step 2) --- */
.tr-focus-chip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tr-focus-chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-ink);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 5px 12px;
  box-shadow: var(--wc-shadow);
}
.tr-focus-chip .tr-focus-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--wc-terr-600);
}
.tr-change-focus {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-terr-800);
  background: var(--wc-terr-100);
  border: 1px solid var(--wc-terr-300);
  border-radius: var(--wc-pill);
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tr-change-focus:hover {
  background: var(--wc-terr-200);
}

/* --- Body --- */
.tr-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --- Step 1: focus panels --- */
.tr-focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.tr-focus-panel {
  position: relative;
  border: 3px solid var(--wc-line);
  border-radius: var(--wc-r-xl);
  padding: 20px 18px 18px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tr-focus-panel:hover {
  transform: translateY(-3px);
  box-shadow: var(--wc-shadow-lift);
}
.tr-focus-panel:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}
.tr-focus-panel.panel-defense {
  background: #a5e06f;
  border-color: #6fae3f;
  color: #1f3d10;
}
.tr-focus-panel.panel-offense {
  background: #f0a35e;
  border-color: #c06a25;
  color: #3a1b06;
}
.tr-focus-panel.panel-tactical {
  background: #2f5bb7;
  border-color: #7fb3ff;
  color: #ffffff;
}
.tr-focus-panel.panel-general {
  background: #f2d06b;
  border-color: #c9a02e;
  color: #3a2c05;
}

/* Fighting the generic dark `.wc-modal .wc-*` — keep `.wc-btn` etc from leaking in */
.tr-focus-name {
  font-family: var(--wc-display);
  font-size: 24px;
  line-height: 1.05;
}
.tr-focus-desc {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.85;
}
.tr-focus-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  opacity: 0.55;
  margin-top: 2px;
}

/* Miniature card backs fanned top-left */
.tr-minis {
  position: absolute;
  top: -14px;
  left: 14px;
  width: 56px;
  height: 44px;
  pointer-events: none;
}
.tr-mini {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 30px;
  border-radius: 5px;
  background: #fdf6ea;
  border: 2px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
.tr-mini:nth-child(1) { transform: rotate(-8deg); }
.tr-mini:nth-child(2) { transform: rotate(0deg); left: 22px; }
.tr-mini:nth-child(3) { transform: rotate(8deg); left: 44px; }
.tr-mini.m-grn { background: #a5e06f; }
.tr-mini.m-blu { background: #2f5bb7; }
.tr-mini.m-org { background: #f0a35e; }

/* Tempo chip top-right */
.tr-tempo {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.13);
  color: inherit;
  border-radius: var(--wc-pill);
  padding: 4px 11px;
}

/* Example chips */
.tr-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.tr-example-chip {
  font-size: 11px;
  font-weight: 700;
  color: inherit;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--wc-pill);
  padding: 3px 10px;
}

/* Pinned deck count + progress bar */
.tr-deckpin {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding-top: 12px;
}
.tr-deckpin-label {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
}
.tr-deckpin-label b {
  font-weight: 800;
}
.tr-progress {
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.tr-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
}

/* --- Step 2: cards + annotations --- */
.tr-cards {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
.tr-card-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 258px;
}
.tr-card-col > .action-card {
  width: 236px;
  height: 334px;
  border-radius: 12px;
  border-width: 3px;
  padding: 18px 16px 16px;
  gap: 10px;
  box-shadow: 0 8px 22px rgba(32, 30, 29, 0.16);
}
.tr-card-col > .action-card .action-card-name {
  font-size: 13.5px;
  line-height: 1.12;
  letter-spacing: 0.055em;
  color: currentColor;
}
.tr-card-col > .action-card .action-card-desc {
  font-size: 12.5px;
  line-height: 1.42;
  border-top: 1.5px solid currentColor;
  padding-top: 9px;
  padding-right: 44px;
  color: currentColor;
  opacity: 1;
}
.tr-card-col > .action-card .action-card-cost {
  width: 36px;
  height: 36px;
  line-height: 33px;
  font-size: 17px;
  bottom: 12px;
  right: 12px;
  border-width: 2px;
}
.tr-card-col > .action-card .action-card-exhaust {
  top: -9px;
  right: -4px;
  font-size: 9px;
}
.tr-catlabel {
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: currentColor;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}
/* Category colors on every training card (single cards and pack cards alike):
   background = category fill, all inner text re-inked to the category ink. */
#training-phase-screen .action-card.category-defense {
  background: #a5e06f;
  border-color: #6fae3f;
  color: #1f3d10;
}
#training-phase-screen .action-card.category-defense .action-card-desc {
  color: currentColor;
}
#training-phase-screen .action-card.category-defense .action-card-cost {
  background: #3f7a1f;
  border-color: #1f3d10;
  color: #eaffd6;
}
#training-phase-screen .action-card.category-offense {
  background: #f0a35e;
  border-color: #c06a25;
  color: #3a1b06;
}
#training-phase-screen .action-card.category-offense .action-card-desc {
  color: currentColor;
}
#training-phase-screen .action-card.category-offense .action-card-cost {
  background: #93491a;
  border-color: #3a1b06;
  color: #ffe6cd;
}
#training-phase-screen .action-card.category-tactical {
  background: #2f5bb7;
  border-color: #7fb3ff;
  color: #ffffff;
}
#training-phase-screen .action-card.category-tactical .action-card-desc {
  color: currentColor;
}
#training-phase-screen .action-card.category-tactical .action-card-cost {
  background: #17356f;
  border-color: #7fb3ff;
  color: #ffffff;
}
#training-phase-screen .action-card.category-effect,
#training-phase-screen .action-card.category-penalty {
  background: #f2d06b;
  border-color: #c9a02e;
  color: #3a2c05;
}
#training-phase-screen .action-card.category-effect .action-card-desc,
#training-phase-screen .action-card.category-penalty .action-card-desc {
  color: currentColor;
}
#training-phase-screen .action-card.category-effect .action-card-cost,
#training-phase-screen .action-card.category-penalty .action-card-cost {
  background: #8a6a10;
  border-color: #3a2c05;
  color: #ffe9a3;
}
#training-phase-screen .action-card .action-card-exhaust {
  background: #1c2b16;
  border-color: #ffd24a;
  color: #ffd24a;
}
#training-phase-screen .action-card .action-card-name {
  color: currentColor;
}
#training-phase-screen .action-card::before {
  border-color: rgba(32, 30, 29, 0.18);
}

/* Annotation below each step-2 card */
.tr-card-col .tr-anno {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  padding: 8px 12px;
  line-height: 1.4;
  text-align: center;
  max-width: 258px;
}
.tr-card-col.selected > .action-card {
  box-shadow: 0 0 0 4px var(--wc-terr-600), var(--wc-shadow-lift);
  transform: translateY(-6px);
}
.tr-card-col.selected .tr-anno {
  background: var(--wc-terr-200);
  border-color: var(--wc-terr-400);
  color: var(--wc-terr-900);
}

/* --- Synergy pack column: two mini cards + label --- */
.tr-pack-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--wc-paper);
  border: 3px dashed var(--wc-terr-400);
  border-radius: var(--wc-r-xl);
  padding: 16px 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tr-pack-body:hover {
  transform: translateY(-4px);
  box-shadow: var(--wc-shadow-lift);
}
.tr-pack-body.selected {
  border: 3px solid var(--wc-terr-600);
  box-shadow: var(--wc-shadow-lift);
}
.tr-pack-body .action-card {
  width: 150px;
  height: 210px;
}
.tr-pack-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--wc-terr-800);
}
.tr-pack-cards {
  display: flex;
}
.tr-pack-cards .action-card {
  margin: 0 -8px;
}
.tr-pack-note {
  font-size: 11px;
  font-weight: 700;
  color: var(--wc-muted);
}

/* --- Deck strip --- */
.tr-deck-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  padding: 10px 16px;
  box-shadow: var(--wc-shadow);
  flex-wrap: wrap;
}
.tr-deck-strip-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--wc-muted);
  margin-right: 4px;
}
.tr-deck-strip .tr-deck-strip-label b {
  color: var(--wc-ink);
}
.tr-deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-ink-soft);
  background: var(--wc-ground);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 3px 10px;
}
.tr-deck-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.tr-deck-swatch.sw-offense { background: #f0a35e; }
.tr-deck-swatch.sw-defense { background: #a5e06f; }
.tr-deck-swatch.sw-tactical { background: #2f5bb7; }
.tr-deck-swatch.sw-effect { background: #f2d06b; }
.tr-deck-strip-meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--wc-muted);
}

/* --- Footer --- */
.tr-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.tr-state {
  font-size: 13px;
  font-weight: 600;
  color: var(--wc-ink-soft);
  flex: 1 1 0;
}
.tr-confirm {
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--wc-terr-700);
  border: 0;
  border-radius: var(--wc-pill);
  padding: 10px 26px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tr-confirm:hover:not(:disabled) {
  background: var(--wc-terr-800);
  transform: translateY(-1px);
}
.tr-confirm:disabled {
  background: var(--wc-muted);
  color: rgba(255, 255, 255, 0.8);
  cursor: not-allowed;
}
.tr-confirm:focus-visible {
  outline: 2px solid var(--wc-terr-900);
  outline-offset: 2px;
}

/* ============================================================
   TEAM SHEET — light theme, fixed 800px height, Steam Deck 1280×800
   Scoped to #team-sheet-screen only.
   Palette:
     ground #f5ead8, ink #201e1d, terracotta #c67139, sage #7a8a5e
     GK fill #f2d06b, ink #3a2c05, ring #c9a02e
     DF fill #a5e06f, ink #1f3d10, ring #6fae3f
     MF fill #2f5bb7, ink #ffffff, ring #7fb3ff
     FW fill #f0a35e, ink #3a1b06, ring #c06a25
   Fonts: Caprasimo (display), Figtree (body)
   Radii: panels 28px, pitch 20px, pills 999px
   No text below 11px
   ============================================================ */

#team-sheet-screen {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #f5ead8;
  overflow: hidden;
  font-family: 'Figtree', system-ui, sans-serif;
}

.team-sheet-shell {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #f5ead8;
}

/* ---- Header row ---- */
.ts-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #f5ead8;
  border-bottom: 1px solid rgba(32, 30, 29, 0.12);
  flex-shrink: 0;
}

.ts-kicker {
  font-family: 'Caprasimo', cursive;
  font-size: 16px;
  color: #6a6562;
  letter-spacing: 0.5px;
}

.ts-divider {
  width: 1px;
  height: 28px;
  background: rgba(32, 30, 29, 0.18);
}

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

.ts-flag {
  font-size: 20px;
  line-height: 1;
}

.ts-team {
  font-family: 'Caprasimo', cursive;
  font-size: 24px;
  color: #201e1d;
  letter-spacing: 0.3px;
}

.ts-vs {
  font-family: 'Caprasimo', cursive;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #6a6562;
}

.ts-meta {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #6a6562;
  text-align: center;
  white-space: nowrap;
}

.ts-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-pill-primary {
  font-family: 'Caprasimo', cursive;
  font-size: 18px;
  color: #fff;
  background: #c67139;
  border: none;
  border-radius: 999px;
  padding: 8px 22px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.ts-pill-primary:hover { background: #b06432; }
.ts-pill-primary:active { transform: scale(0.98); }
.ts-pill-primary:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; }

/* CTA pulse animation for primary action buttons */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 196, 150, 0.6); }
  50%      { box-shadow: 0 0 0 12px rgba(240, 196, 150, 0); }
}
.cta {
  animation: ctaPulse 2.6s ease-out infinite;
  transition: transform 0.14s ease, background 0.14s ease;
  box-shadow: 0 0 0 0 rgba(240, 196, 150, 0.6);
}
.cta:hover  { background: #ffffff; transform: translateY(-2px); }
.cta:active { transform: translateY(0); }
.cta:focus-visible { outline: 3px solid var(--color-accent-300); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .cta { animation: none; }
}

.ts-esc {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6a6562;
  user-select: none;
}

/* ---- Conditions strip (redesigned chips) ---- */
.ts-conditions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(32, 30, 29, 0.08);
  flex-shrink: 0;
}

.ts-conditions-label {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6a6562;
  margin-right: 2px;
  flex-shrink: 0;
}

.ts-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.ts-effect-hint {
  font-size: 11px;
  font-weight: 500;
  color: #6a6562;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid rgba(32, 30, 29, 0.12);
  font-style: italic;
  flex-shrink: 0;
}

.ts-effect-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Figtree', sans-serif;
  background: #fff;
  border: 1px solid rgba(32, 30, 29, 0.1);
  border-radius: 999px;
  padding: 5px 12px 5px 6px;
  box-shadow: 0 1px 4px rgba(32, 30, 29, 0.06);
  max-width: 100%;
  cursor: help;
  color: #201e1d;
}
.ts-effect-chip:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; }

.ts-effect-kind {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
  flex-shrink: 0;
}

.ts-effect-body {
  font-size: 12.5px;
  font-weight: 600;
  color: #201e1d;
  line-height: 1.25;
  white-space: normal;
}
.ts-effect-sub {
  display: block;
  font-size: 11px;
  color: #6a6562;
  font-weight: 500;
}

/* severity — fills hold white text ≥ 4.5:1 */
.ts-effect-chip.sev-neutral .ts-effect-kind { background: #2f5bb7; }
.ts-effect-chip.sev-event .ts-effect-kind { background: #a05225; }
.ts-effect-chip.sev-warn .ts-effect-kind { background: #9c3a86; }
.ts-effect-chip.sev-ok .ts-effect-kind { background: #3a7d44; }

/* collapse + open-all */
.ts-chips-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #c67139;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background 0.12s ease;
}
.ts-chips-more:hover { background: rgba(198, 113, 57, 0.12); }
.ts-chips-more:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; }

/* tooltip with the real mechanical effect of each chip, placed BELOW
   the chip so the strip's position never clips it. Reads from data-tip;
   the accessible name stays the visible chip text. */
.ts-effect-chip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: max-content;
  max-width: 260px;
  background: #201e1d;
  color: #fff;
  font-family: 'Figtree', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.45;
  padding: 8px 11px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(32, 30, 29, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 40;
  white-space: normal;
}
.ts-effect-chip[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: #201e1d;
  opacity: 0;
  transition: opacity 0.14s ease;
  z-index: 41;
}
.ts-effect-chip[data-tip]:hover::after,
.ts-effect-chip[data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.ts-effect-chip[data-tip]:hover::before,
.ts-effect-chip[data-tip]:focus-visible::before { opacity: 1; }

/* sr-only — a chip's mechanical effect for AT */
.ts-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Body grid ---- */
.ts-body {
  display: grid;
  grid-template-columns: 404px minmax(0, 1fr) 404px;
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ts-panel {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 12px rgba(32, 30, 29, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.ts-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(32, 30, 29, 0.08);
  flex-shrink: 0;
}

.ts-panel-title {
  font-family: 'Caprasimo', cursive;
  font-size: 20px;
  color: #201e1d;
  letter-spacing: 0.3px;
}

/* Orientation toggle (Vertical / Horizontal) */
.ts-orient-switch { display: flex; gap: 0; }
.ts-orient-opt {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #6a6562;
  background: rgba(32, 30, 29, 0.05);
  border: 1px solid rgba(32, 30, 29, 0.12);
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ts-orient-opt:first-child { border-radius: 999px 0 0 999px; }
.ts-orient-opt:last-child { border-radius: 0 999px 999px 0; border-left: none; }
.ts-orient-opt:not(.active):hover { color: #201e1d; background: rgba(32, 30, 29, 0.09); }
.ts-orient-opt.active { background: #c67139; border-color: #c67139; color: #fff; }
.ts-orient-opt:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; z-index: 1; }

/* ---- Formation control (redesigned selector) ---- */
.ts-formation-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 0;
  flex-shrink: 0;
}

.ts-default-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ts-default-hint {
  font-size: 12px;
  color: #6a6562;
  font-weight: 500;
}
.ts-default-switch { display: flex; gap: 0; }
.ts-default-opt {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #6a6562;
  background: rgba(32, 30, 29, 0.05);
  border: 1px solid rgba(32, 30, 29, 0.12);
  padding: 6px 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ts-default-opt:first-child { border-radius: 999px 0 0 999px; }
.ts-default-opt:last-child { border-radius: 0 999px 999px 0; border-left: none; }
.ts-default-opt:not(.active):hover { color: #201e1d; background: rgba(32, 30, 29, 0.09); }
.ts-default-opt.active { background: #201e1d; border-color: #201e1d; color: #fff; }
.ts-default-opt:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; z-index: 1; }

.ts-formation-wrap { position: relative; }
.ts-formation-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(32, 30, 29, 0.035);
  border: 1px solid rgba(32, 30, 29, 0.1);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: 'Figtree', sans-serif;
  transition: all 0.15s ease;
}
.ts-formation-selector:hover { background: rgba(32, 30, 29, 0.07); border-color: rgba(32, 30, 29, 0.15); }
.ts-formation-selector:focus-visible { outline: 2px solid #c67139; outline-offset: 2px; }
.ts-formation-selector.open { border-color: #c67139; }

.ts-mini-shape {
  width: 96px;
  height: 44px;
  flex-shrink: 0;
  position: relative;
}
.ts-mini-shape .ts-mini-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(32, 30, 29, 0.3);
}

.ts-formation-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ts-formation-name { font-family: 'Caprasimo', cursive; font-size: 18px; line-height: 1; color: #201e1d; }
.ts-formation-sub { font-size: 12px; color: #6a6562; font-weight: 500; line-height: 1.3; }
.ts-formation-caret { font-size: 9px; color: #6a6562; align-self: center; transition: transform 0.15s ease; }
.ts-formation-selector.open .ts-formation-caret { transform: rotate(180deg); }

.ts-formation-systems {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(32, 30, 29, 0.12);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(32, 30, 29, 0.16);
  padding: 6px;
  z-index: 30;
}
.ts-formation-systems.is-open { display: block; }

.ts-system-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #201e1d;
  transition: background 0.12s ease;
}
.ts-system-opt:hover { background: rgba(32, 30, 29, 0.06); }
.ts-system-opt.active { background: #201e1d; color: #fff; }
.ts-system-opt:focus-visible { outline: 2px solid #c67139; outline-offset: -2px; }
.ts-system-opt .ts-mini-shape { width: 84px; height: 32px; opacity: 0.6; }
.ts-system-opt.active .ts-mini-shape { opacity: 1; }

/* ---- LEFT PANEL: Your pitch ---- */
.ts-pitch-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px;
  overflow: hidden;
}

.ts-pitch {
  position: relative;
  background: #1f4a24;
  border-radius: 20px;
  overflow: hidden;
  transition: width 0.25s ease, height 0.25s ease;
}
.ts-pitch-vertical {
  height: 100%;
  max-height: 400px;
  width: auto;
  aspect-ratio: 56 / 90;
  max-width: 100%;
}
.ts-pitch:not(.ts-pitch-vertical) {
  width: auto;
  height: min(100%, 236px);
  aspect-ratio: 90 / 56;
  max-width: min(380px, 100%);
}

.ts-pitch-markings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ts-touchline {
  position: absolute;
  background: rgba(255, 255, 255, 0.42);
}
.ts-touchline-top,
.ts-touchline-bottom {
  left: 9px;
  right: 9px;
  height: 2px;
}
.ts-touchline-top { top: 9px; }
.ts-touchline-bottom { bottom: 9px; }
.ts-touchline-left,
.ts-touchline-right {
  top: 9px;
  bottom: 9px;
  width: 2px;
}
.ts-touchline-left { left: 9px; }
.ts-touchline-right { right: 9px; }

.ts-halfway {
  position: absolute;
  left: 50%;
  top: 9px;
  bottom: 9px;
  width: 2px;
  background: rgba(255, 255, 255, 0.42);
  transform: translateX(-50%);
}

.ts-centre-circle {
  position: absolute;
  width: 104px;
  height: 104px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ts-centre-spot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.ts-penalty-box {
  position: absolute;
  border: 2px solid rgba(255, 255, 255, 0.42);
  width: 20%;
  height: 36%;
}
.ts-penalty-box-left {
  left: 0;
  top: 32%;
}
.ts-penalty-box-right {
  right: 0;
  top: 32%;
}

.ts-penalty-spot {
  position: absolute;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.42);
  border-radius: 50%;
}
.ts-penalty-spot-left {
  left: 11%;
  top: 50%;
  transform: translateY(-50%);
}
.ts-penalty-spot-right {
  right: 11%;
  top: 50%;
  transform: translateY(-50%);
}

.ts-goal {
  position: absolute;
  width: 12px;
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-right: none;
  border-radius: 0;
}
.ts-goal-left {
  left: -12px;
  top: 38%;
  height: 24%;
  border-radius: 4px 0 0 4px;
}
.ts-goal-right {
  right: -12px;
  top: 38%;
  height: 24%;
  border-radius: 0 4px 4px 0;
  border-right: 2px solid rgba(255, 255, 255, 0.42);
  border-left: none;
}

/* Vertical pitch: rotated 90° — own goal at bottom, opponent goal at top */
.ts-pitch-vertical .ts-halfway {
  left: 9px;
  right: 9px;
  top: 50%;
  bottom: auto;
  width: auto;
  height: 2px;
  transform: none;
}
.ts-pitch-vertical .ts-centre-circle { width: 92px; height: 92px; }
.ts-pitch-vertical .ts-penalty-box {
  width: auto;
  height: 22%;
  top: auto;
  left: 9px;
  right: 9px;
  transform: none;
}
.ts-pitch-vertical .ts-penalty-box-left { bottom: 9px; }
.ts-pitch-vertical .ts-penalty-box-right { top: 9px; }
.ts-pitch-vertical .ts-penalty-spot {
  left: 50%;
  top: auto;
  transform: translateX(-50%);
}
.ts-pitch-vertical .ts-penalty-spot-left { bottom: 13%; }
.ts-pitch-vertical .ts-penalty-spot-right { top: 13%; }
.ts-pitch-vertical .ts-goal {
  width: auto;
  height: 10px;
  left: 22px;
  right: 22px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-left: none;
  border-right: none;
}
.ts-pitch-vertical .ts-goal-left {
  top: auto;
  bottom: 2px;
  border-radius: 0 0 6px 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.42);
}
.ts-pitch-vertical .ts-goal-right {
  top: 2px;
  bottom: auto;
  border-radius: 6px 6px 0 0;
  border-top: 2px solid rgba(255, 255, 255, 0.42);
}

/* Keep edge-row players fully inside the field: shrink the token container
   box (inset) so the percentage origin moves 24px in from the sides and
   22px from top/bottom — discs at 0%/100% stay inside instead of clipping. */
.ts-pitch-vertical .ts-tokens {
  inset: 22px 24px;
}

.ts-tokens {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ts-token {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease;
  pointer-events: auto;
  z-index: 10;
}
.ts-token:hover { transform: translate(-50%, -50%) scale(1.09); }
.ts-token.selected {
  border-color: #fff;
  border-width: 3.5px;
  z-index: 20;
}

.ts-token-initials {
  font-family: 'Caprasimo', cursive;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ts-token-surname {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  margin-top: -2px;
}

.ts-token-star {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  background: #3a2c05;
  border: 1.5px solid #8a6a10;
  border-radius: 50%;
  color: #ffd24a;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}

.ts-hint {
  padding: 10px 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: #6a6562;
  line-height: 1.4;
  flex-shrink: 0;
  background: rgba(32, 30, 29, 0.03);
  border-top: 1px solid rgba(32, 30, 29, 0.06);
}

/* ---- MIDDLE PANEL: Squad list ---- */
.ts-tabs {
  display: flex;
  gap: 4px;
  background: rgba(32, 30, 29, 0.06);
  border-radius: 999px;
  padding: 4px;
}

.ts-tab {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #6a6562;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.ts-tab:hover { color: #201e1d; }
.ts-tab.active {
  background: #c67139;
  color: #fff;
}

.ts-tab-count {
  font-family: 'Caprasimo', cursive;
  font-size: 13px;
  font-weight: 400;
  margin-left: 4px;
  opacity: 0.9;
}

.ts-squad-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 30, 29, 0.2) transparent;
}

.ts-squad-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ts-squad-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.ts-squad-row:hover { background: rgba(32, 30, 29, 0.04); }
.ts-squad-row.selected {
  background: #ffe9a3;
}

.ts-squad-row .ts-pos-disc {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caprasimo', cursive;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15);
}

.ts-squad-row .ts-player-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ts-squad-row .ts-player-name {
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #201e1d;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-squad-row .ts-player-meta {
  font-size: 11px;
  color: #6a6562;
  white-space: nowrap;
}

.ts-squad-row .ts-ovr {
  font-family: 'Caprasimo', cursive;
  font-size: 16px;
  color: #201e1d;
  flex-shrink: 0;
}

.ts-squad-row .ts-markers {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.ts-star-pill {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5f4707;
  background: #ffe9a3;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
}

.ts-status-pill {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #c67139;
  background: rgba(198, 113, 57, 0.12);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
}

/* ---- RIGHT PANEL: Opposition ---- */
.ts-panel-right {
  background: #1e3a1a;
  color: #fff;
}

.ts-panel-right .ts-panel-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.ts-panel-right .ts-panel-title {
  color: #fff;
}

.ts-chip-scouted {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #cfe3a8;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 2px 10px;
}

.ts-opp-formation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin: 0 16px 12px;
}

.ts-opp-formation-shape {
  font-family: 'Caprasimo', cursive;
  font-size: 28px;
  color: #fff;
  letter-spacing: 1px;
}

.ts-opp-formation-note {
  font-size: 12.5px;
  color: #d4d4d4;
  line-height: 1.4;
}

.ts-section-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 16px;
}

.ts-section-rule-gold {
  background: #ffd24a;
  opacity: 0.5;
}

/* Team news */
.ts-opp-news {
  padding: 0 16px 8px;
}

.ts-opp-news-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

.ts-opp-news-tag {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.ts-opp-news-tag.out,
.ts-opp-news-tag.susp {
  background: #ffb4a8;
  color: #5c1408;
}

.ts-opp-news-tag.doubt {
  background: #ffd24a;
  color: #3a2c05;
}

.ts-opp-news-body {
  flex: 1;
  min-width: 0;
}

.ts-opp-news-name {
  font-weight: 700;
  font-size: 12.5px;
  color: #fff;
  margin-bottom: 1px;
}

.ts-opp-news-reason {
  font-size: 11.5px;
  color: #c8c8c8;
  line-height: 1.35;
}

/* Team Effects (artifacts + coach) */
.ts-opp-team-effects {
  padding: 0 16px 12px;
}

.ts-team-effect-pill {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ts-team-effect-pill.artifact {
  border-left: 3px solid #ffd24a;
}

.ts-team-effect-pill.coach {
  border-left: 3px solid #7fb3ff;
}

.ts-team-effect-name {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin-bottom: 4px;
}

.ts-coach-header {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffd24a;
  margin-bottom: 8px;
  padding-left: 2px;
}

.ts-team-effect-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
}

/* Traits (legacy - keeping for compatibility) */
.ts-opp-traits {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
  flex-wrap: wrap;
}

.ts-trait-pill {
  flex: 1;
  min-width: 140px;
  max-width: 180px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 8px 12px;
}

.ts-trait-name {
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  margin-bottom: 2px;
}

.ts-trait-effect {
  font-size: 11px;
  color: #b8b8b8;
  line-height: 1.35;
}

/* Danger men */
.ts-danger-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.ts-danger-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ts-danger-title {
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #ffd24a;
  margin-bottom: 8px;
  padding-left: 2px;
  border-left: 3px solid #ffd24a;
  padding-left: 8px;
}

.ts-danger-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 12px 14px;
}

.ts-danger-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.ts-danger-disc {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #ffd24a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caprasimo', cursive;
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  flex-shrink: 0;
}

.ts-danger-name {
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}

.ts-danger-role {
  font-family: 'Figtree', sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffd24a;
  background: rgba(255, 210, 74, 0.12);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1;
}

.ts-danger-traits {
  font-size: 11px;
  color: #ffd24a;
  line-height: 1.4;
  margin-top: 4px;
}

.ts-threat,
.ts-counter {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.ts-threat {
  color: #e8e8e8;
}

.ts-counter {
  color: #cfe3a8;
}

.ts-counter-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
  margin-right: 4px;
}

/* Scrollbar styling */
.ts-squad-scroll::-webkit-scrollbar,
.ts-danger-scroll::-webkit-scrollbar {
  width: 6px;
}
.ts-squad-scroll::-webkit-scrollbar-track,
.ts-danger-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.ts-squad-scroll::-webkit-scrollbar-thumb,
.ts-danger-scroll::-webkit-scrollbar-thumb {
  background: rgba(32, 30, 29, 0.2);
  border-radius: 3px;
}
.ts-panel-right .ts-danger-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

/* Hide panels when not active */
.ts-squad-list.hidden { display: none; }

/* Position color variables for tokens */
.ts-pos-gk { background: #f2d06b; border-color: #c9a02e; }
.ts-pos-df { background: #a5e06f; border-color: #6fae3f; }
.ts-pos-mf { background: #2f5bb7; border-color: #7fb3ff; }
.ts-pos-fw { background: #f0a35e; border-color: #c06a25; }

.ts-pos-gk .ts-token-initials,
.ts-pos-df .ts-token-initials,
.ts-pos-mf .ts-token-initials,
.ts-pos-fw .ts-token-initials { color: #fff; }

/* Position colours for squad row discs */
.ts-disc-gk { background: #f2d06b; }
.ts-disc-df { background: #a5e06f; }
.ts-disc-mf { background: #2f5bb7; }
.ts-disc-fw { background: #f0a35e; }

/* Opp formation/notes on right panel */
.ts-opp-news-tag.doubt { background: #ffd24a; color: #3a2c05; }

/* ============================================================
   MATCHDAY MODAL REDESIGN — light "paper sheet" modals.
   Applies to every .modal-overlay (in-match + campaign modals).
   Tokens are re-declared on the overlay so modals appended to
   <body> always have the WC26 palette, whichever screen opened
   them. Scoped so nothing outside a modal overlay is affected.
   ============================================================ */

.modal-overlay {
  --wc-ink: #201e1d;
  --wc-ink-soft: #4a423d;
  --wc-muted: #7b716a;
  --wc-ground: #f5ead8;
  --wc-ground-2: #eee0c9;
  --wc-paper: #fffaf3;
  --wc-paper-2: #fdf3e3;
  --wc-line: rgba(32, 30, 29, 0.14);
  --wc-terr-100: #faf0e2;
  --wc-terr-200: #f5dfc5;
  --wc-terr-300: #edc7a1;
  --wc-terr-400: #e2aa7b;
  --wc-terr-500: #d58d58;
  --wc-terr-600: #c67139;
  --wc-terr-700: #a9542a;
  --wc-terr-800: #863e1d;
  --wc-terr-900: #612a11;
  --wc-sage-100: #f0f1e6;
  --wc-sage-200: #dfe4ce;
  --wc-sage-300: #c4cfab;
  --wc-sage-400: #a6b688;
  --wc-sage-500: #8d9d70;
  --wc-sage-600: #7a8a5e;
  --wc-sage-700: #636f4b;
  --wc-sage-800: #4a5438;
  --wc-sage-900: #333b26;
  --wc-display: 'Caprasimo', Georgia, serif;
  --wc-sans: 'Figtree', system-ui, sans-serif;
  --wc-r: 16px;
  --wc-r-lg: 20px;
  --wc-r-xl: 28px;
  --wc-pill: 999px;
  --wc-shadow: 0 1px 2px rgba(32, 30, 29, 0.08), 0 8px 24px rgba(32, 30, 29, 0.08);
  --wc-shadow-lift: 0 2px 4px rgba(32, 30, 29, 0.1), 0 14px 34px rgba(32, 30, 29, 0.14);
  --dm-danger: oklch(0.58 0.19 30);
  --dm-danger-strong: oklch(0.5 0.18 25);
  --dm-danger-soft: oklch(0.58 0.19 30 / 0.12);
  --dm-amber: oklch(0.68 0.14 62);
  --dm-amber-soft: oklch(0.68 0.14 62 / 0.14);
  background: rgba(18, 16, 15, 0.66);
  backdrop-filter: blur(3px);
  padding: 18px;
}

.modal-overlay .shot-modal,
.modal-overlay .wc-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  background: var(--wc-paper);
  color: var(--wc-ink);
  font-family: var(--wc-sans);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  box-shadow: var(--wc-shadow-lift);
  padding: 22px 24px 20px;
  max-height: min(92vh, 100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-overlay .shot-modal {
  width: min(460px, 92vw);
}

/* 3-column shot/tackle layouts (attacker + center + keeper): need room
   for the two 110px cards and the mid column, so widen just those. */
.modal-overlay .shot-modal:has(.shot-modal-side) {
  width: min(680px, 94vw);
}

.modal-overlay .wc-modal {
  width: min(640px, 92vw);
  min-width: 0;
}

.modal-overlay .halftime-modal.wide-modal {
  min-width: 0;
  width: min(920px, 92vw);
}

.modal-overlay .card-pick-modal,
.modal-overlay .deck-pick-modal {
  width: min(900px, 94vw);
  max-width: 94vw;
}

.modal-overlay .training-intro-modal {
  width: min(520px, 92vw);
  max-width: 520px;
}

/* Sim result shows the full match log; reward modals lay out wide card rows —
   both were wide pre-redesign, keep them roomier than the 460px base. */
.modal-overlay .sim-modal {
  width: min(720px, 94vw);
}

.modal-overlay .reward-modal {
  width: min(640px, 94vw);
}

.modal-overlay .wc-team-flag-badge {
  top: 16px;
  left: 18px;
  font-size: 28px;
}

.modal-overlay .modal-overlay-madcap,
.modal-overlay .fireworks-layer { display: block; }

/* --- shared content columns --- */
.modal-overlay .shot-modal-content {
  gap: 16px;
  width: 100%;
  justify-content: center;
}

.modal-overlay .halftime-content {
  max-width: 480px;
  width: 100%;
  gap: 10px;
}

.modal-overlay .wc-modal .halftime-content,
.modal-overlay .event-phase-modal .halftime-content,
.modal-overlay .training-modal .halftime-content {
  max-width: none;
  width: 100%;
}

/* --- kickers, titles, verdicts --- */
.modal-overlay .shot-modal-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  color: var(--wc-terr-800);
}

.modal-overlay .halftime-title {
  margin: 0;
  font-family: var(--wc-display);
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--wc-ink);
}

.modal-overlay .halftime-title::after {
  content: '';
  display: block;
  width: 46px;
  height: 3px;
  margin: 9px auto 0;
  border-radius: 2px;
  background: var(--wc-terr-600);
}

.modal-overlay .shot-modal-outcome {
  font-family: var(--wc-display);
  font-size: 25px;
  letter-spacing: 0.4px;
  line-height: 1.05;
}

.modal-overlay .shot-modal-outcome.goal { color: var(--wc-sage-700); }
.modal-overlay .shot-modal-outcome.blocked { color: var(--dm-danger); }

.modal-overlay .shot-modal-verdict,
.modal-overlay .shot-formula-line {
  color: var(--wc-ink-soft);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
}

.modal-overlay .shot-formula-line.goalkeeping { color: var(--wc-muted); }

.modal-overlay .halftime-kickoff,
.modal-overlay .halftime-note,
.modal-overlay .reward-subtitle {
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  color: var(--wc-muted);
}

/* --- scoreboard panel --- */
.modal-overlay .halftime-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin: 2px 0 0;
  background: var(--wc-ink);
  color: #f3ead9;
  font-family: var(--wc-display);
  font-size: 20px;
  letter-spacing: 0.5px;
  border-radius: var(--wc-r);
  padding: 10px 18px;
  box-shadow: var(--wc-shadow);
}

/* --- stats grid (half time / full time) --- */
.modal-overlay .halftime-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
  width: 100%;
  margin-top: 6px;
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  padding: 14px 18px;
}

.modal-overlay .halftime-section-title {
  margin-top: 6px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--wc-terr-800);
}

.modal-overlay .halftime-list {
  text-align: left;
  font-size: 12.5px;
  color: var(--wc-ink-soft);
  gap: 4px;
}

/* --- player of the match --- */
.modal-overlay .player-of-match {
  margin: 4px 0;
  padding: 10px 18px;
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
}

.modal-overlay .player-of-match .pom-label {
  color: var(--wc-terr-800);
  letter-spacing: 1.1px;
}

.modal-overlay .player-of-match .pom-name {
  color: var(--wc-ink);
  font-family: var(--wc-display);
  font-size: 16px;
  font-weight: 400;
}

.modal-overlay .player-of-match .pom-team { color: var(--wc-muted); }

/* --- primary pill buttons --- */
.modal-overlay .shot-modal-close,
.modal-overlay .skip-btn,
.modal-overlay .menu-btn,
.modal-overlay .shootout-btn {
  width: auto;
  border: 0;
  color: #fff7ef;
  background: var(--wc-terr-700);
  border-radius: var(--wc-pill);
  padding: 11px 24px;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(169, 84, 42, 0.26);
  transition: background 0.15s, transform 0.15s;
}

.modal-overlay .shot-modal-close:hover,
.modal-overlay .skip-btn:hover,
.modal-overlay .menu-btn:hover,
.modal-overlay .shootout-btn:hover {
  background: var(--wc-terr-800);
  transform: translateY(-1px);
}

.modal-overlay .shot-modal-close:active,
.modal-overlay .skip-btn:active,
.modal-overlay .menu-btn:active,
.modal-overlay .shootout-btn:active {
  background: var(--wc-terr-900);
  transform: translateY(0);
}

.modal-overlay .shot-modal-close:disabled,
.modal-overlay .skip-btn:disabled,
.modal-overlay .menu-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* --- selection chips (subs / keeper / pending) --- */
.modal-overlay .hard-tackle-sub-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  color: var(--wc-ink-soft);
  font-size: 12px;
}

.modal-overlay .halftime-col { gap: 6px; }

.modal-overlay .bench-slot-button {
  background: transparent;
  color: var(--wc-ink-soft);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.modal-overlay .bench-slot-button:hover {
  background: var(--wc-terr-100);
  border-color: var(--wc-terr-300);
  color: var(--wc-terr-800);
}

.modal-overlay .bench-slot-button.selected {
  background: var(--wc-terr-200);
  border: 1.5px solid var(--wc-terr-600);
  color: var(--wc-terr-900);
  outline: none;
}

.modal-overlay .bench-slot-button.eligible {
  background: var(--wc-sage-200);
  border: 1.5px solid var(--wc-sage-500);
  color: var(--wc-sage-900);
  outline: none;
  animation: none;
  box-shadow: none;
}

.modal-overlay .bench-slot-button.sub-candidate {
  background: var(--dm-danger-soft);
  border: 1.5px solid var(--dm-danger);
  color: var(--dm-danger-strong);
  outline: none;
}

.modal-overlay .bench-slot-button.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- substitution dialog: two-column pitch/bench --- */
.sub-dialog-content,
.modal-overlay .sub-dialog-content {
  max-width: 720px;
  width: min(720px, 92vw);
}

.sub-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
}

.sub-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sub-player-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sub-player-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.sub-pos {
  flex-shrink: 0;
  width: 26px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wc-ink-soft, #cfdbcF);
}

.sub-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sub-fatigue {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.07);
}

.sub-fat-fit { color: #86c98a; }
.sub-fat-tired { color: #e8c05a; }
.sub-fat-exhausted { color: #e8923d; }
.sub-fat-injured { color: #ff6b6b; }

.sub-empty {
  font-size: 12px;
  color: var(--wc-ink-soft, #cfdbcF);
  padding: 6px 2px;
}

/* --- event phase option cards (deck pick, staff picks) --- */
.modal-overlay .event-phase-options .event-phase-option {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  color: var(--wc-ink);
  padding: 14px 16px;
  text-align: left;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}

.modal-overlay .event-phase-options .event-phase-option:hover {
  background: var(--wc-terr-100);
  border-color: var(--wc-terr-400);
  transform: translateY(-1px);
}

.modal-overlay .event-phase-option {
  background: var(--wc-terr-700);
  border: 0;
  border-radius: var(--wc-pill);
  color: #fff7ef;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(169, 84, 42, 0.24);
  transition: background 0.15s, transform 0.15s;
}

.modal-overlay .event-phase-option:hover {
  background: var(--wc-terr-800);
  transform: translateY(-1px);
}

.modal-overlay .event-option-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--wc-ink);
}

.modal-overlay .event-option-desc {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wc-muted);
}

/* --- training & coach cards inside modals --- */
.modal-overlay .training-card {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  color: var(--wc-ink);
  box-shadow: var(--wc-shadow);
}

.modal-overlay .training-card.rarity-1 { border-color: var(--wc-sage-300); }
.modal-overlay .training-card.rarity-2 { border-color: var(--wc-terr-300); }

.modal-overlay .training-card.selected {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 1px;
  border-color: var(--wc-terr-400);
}

.modal-overlay .training-card-name {
  color: var(--wc-ink);
  font-size: 14px;
  font-weight: 800;
}

.modal-overlay .training-card-desc { color: var(--wc-muted); }
.modal-overlay .training-card-rarity { color: var(--wc-terr-800); }

.modal-overlay .coach-card {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  color: var(--wc-ink);
  box-shadow: var(--wc-shadow);
}

.modal-overlay .coach-card-name { color: var(--wc-ink); }
.modal-overlay .coach-card-nationality { color: var(--wc-terr-800); }
.modal-overlay .coach-card-desc { color: var(--wc-muted); }
.modal-overlay .coach-card-effects { color: var(--wc-sage-800); }

/* --- training intro rules --- */
.modal-overlay .training-intro-rules {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.modal-overlay .training-intro-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--wc-ink-soft);
}

.modal-overlay .training-intro-rule::before {
  content: '\2022';
  color: var(--wc-terr-600);
  font-weight: 800;
}

/* --- WC deck / staff panels --- */
.modal-overlay .wc-mt-deck-scroll {
  max-height: min(520px, 58vh);
  overflow-y: auto;
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  padding: 12px;
}

.modal-overlay .wc-mt-staff-card {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  padding: 12px 16px;
}

.modal-overlay .wc-mt-staff-name {
  color: var(--wc-ink);
  font-weight: 800;
  font-size: 14px;
}

.modal-overlay .wc-mt-staff-desc {
  margin-top: 2px;
  color: var(--wc-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* --- event result chips --- */
.modal-overlay .event-result-subtitle {
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--wc-terr-800);
}

.modal-overlay .event-result-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-overlay .event-result-arrow { color: var(--wc-muted); font-weight: 800; }

.modal-overlay .event-result-chip {
  border-radius: var(--wc-pill);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
}

.modal-overlay .event-result-chip.removed {
  background: var(--dm-danger-soft);
  color: var(--dm-danger-strong);
}

.modal-overlay .event-result-chip.held {
  background: var(--wc-sage-200);
  color: var(--wc-sage-900);
}

/* --- WC results / verdicts --- */
.modal-overlay .wc-result-pens,
.modal-overlay .wc-result-winner {
  font-family: var(--wc-display);
  font-size: 19px;
  text-align: center;
  color: var(--wc-sage-800);
}

/* --- KO preview --- */
.modal-overlay .wc-ko-preview-matchup {
  font-family: var(--wc-display);
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
  color: var(--wc-ink);
}

.modal-overlay .wc-ko-preview-vs {
  color: var(--wc-terr-600);
  font-size: 13px;
  letter-spacing: 2px;
}

/* --- champion --- */
.modal-overlay .wc-champion-title {
  font-family: var(--wc-display);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.12;
  text-align: center;
  letter-spacing: 0.3px;
  color: var(--wc-terr-800);
}

.modal-overlay .wc-champion-sub {
  text-align: center;
  font-size: 13.5px;
  color: var(--wc-muted);
}

.modal-overlay .wc-awards-title {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--wc-muted);
}

.modal-overlay .wc-award-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--wc-line);
  font-size: 13px;
}

.modal-overlay .wc-award-label { color: var(--wc-muted); }
.modal-overlay .wc-award-winner { color: var(--wc-ink); font-weight: 800; text-align: right; }

/* --- save / load --- */
.modal-overlay .wc-setup-title {
  font-family: var(--wc-display);
  font-size: 22px;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--wc-ink);
}

.modal-overlay .wc-setup-note {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wc-muted);
}

.modal-overlay .wc-save-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.modal-overlay .wc-save-name-input {
  flex: 1;
  min-width: 0;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-pill);
  padding: 9px 14px;
  color: var(--wc-ink);
  font-size: 13px;
}

.modal-overlay .wc-save-name { color: var(--wc-ink); font-weight: 800; font-size: 13.5px; }
.modal-overlay .wc-save-meta { color: var(--wc-muted); font-size: 11.5px; margin-top: 2px; }
.modal-overlay .wc-save-info { min-width: 0; }
.modal-overlay .wc-save-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.modal-overlay .wc-save-actions .menu-btn { padding: 8px 14px; font-size: 12px; box-shadow: none; }

/* --- misc --- */
.modal-overlay .gk-placeholder {
  width: 96px;
  background: var(--wc-sage-100);
  border: 2px dashed var(--wc-sage-400);
  border-radius: 10px;
  color: var(--wc-muted);
  font-size: 11px;
}

.modal-overlay .sim-log {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  color: var(--wc-ink-soft);
  padding: 14px;
  margin-top: 6px;
}

.modal-overlay .shootout-prompt {
  color: var(--dm-amber);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.modal-overlay .action-card { box-shadow: var(--wc-shadow); }
.modal-overlay .reward-card:hover { box-shadow: 0 8px 20px rgba(169, 84, 42, 0.2); }
.modal-overlay .reward-card:focus-visible { outline-color: var(--wc-terr-700); }

.modal-overlay .sim-log .log-row,
.modal-overlay .sim-log [class*='log-'] { color: inherit; }

.modal-overlay button:focus-visible {
  outline: 2px solid var(--wc-terr-700);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .modal-overlay { padding: 12px; }
  .modal-overlay .halftime-modal.wide-modal,
  .modal-overlay .wc-modal { width: 92vw; }
  .modal-overlay .card-pick-modal,
  .modal-overlay .deck-pick-modal { width: 94vw; max-width: 94vw; }
  .modal-overlay .halftime-grid { grid-template-columns: 1fr; }
  .modal-overlay .wc-save-row { flex-wrap: wrap; }
  .modal-overlay .wc-save-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

@media (max-width: 640px) {
  .modal-overlay .shot-modal:has(.shot-modal-side) .shot-modal-side .action-card {
    width: 92px;
    height: 138px;
  }
  .modal-overlay .shot-modal:has(.shot-modal-side) .shot-modal-center {
    min-width: 0;
    max-width: none;
    flex: 1;
  }
  .modal-overlay .shot-modal:has(.shot-modal-side) .shot-modal-content {
    gap: 12px;
    justify-content: center;
  }
}

/* =====================================================================
   TUTORIAL ONBOARDING (game/onboarding.js)
   Full-screen lesson sheets over the dark game. Mirror the WC26 paper
   palette so the coach reads like the rest of the campaign modals.
   ===================================================================== */

.ob-overlay {
  --wc-ink: #201e1d;
  --wc-ink-soft: #4a423d;
  --wc-muted: #7b716a;
  --wc-ground: #f5ead8;
  --wc-ground-2: #eee0c9;
  --wc-paper: #fffaf3;
  --wc-paper-2: #fdf3e3;
  --wc-line: rgba(32, 30, 29, 0.14);
  --wc-terr-500: #d58d58;
  --wc-terr-600: #c67139;
  --wc-terr-700: #a9542a;
  --wc-terr-800: #863e1d;
  --wc-sage-100: #f0f1e6;
  --wc-sage-200: #dfe4ce;
  --wc-sage-500: #8d9d70;
  --wc-sage-600: #7a8a5e;
  --wc-sage-700: #636f4b;
  --wc-gold: #ffd24d;
  --wc-sans: 'Figtree', system-ui, sans-serif;
  --wc-display: 'Caprasimo', Georgia, serif;
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(18, 16, 15, 0.66);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.ob-sheet {
  font-family: var(--wc-sans);
  background: var(--wc-paper);
  color: var(--wc-ink);
  border: 1px solid var(--wc-line);
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(32, 30, 29, 0.1), 0 14px 34px rgba(32, 30, 29, 0.16);
  width: min(620px, 96vw);
  max-height: min(92vh, 920px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 22px 20px;
}

/* --- header: progress pips + skip --- */
.ob-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ob-prog {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ob-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--wc-ground-2);
  border: 1px solid var(--wc-line);
}
.ob-pip.on {
  background: var(--wc-sage-600);
  border-color: var(--wc-sage-700);
}
.ob-count {
  margin-left: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--wc-muted);
  letter-spacing: 0.4px;
}
.ob-topRight {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ob-esc {
  font-size: 10px;
  font-weight: 600;
  color: var(--wc-muted);
  letter-spacing: 0.5px;
}
.ob-skip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--wc-ink-soft);
  background: transparent;
  border: 1px solid var(--wc-line);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ob-skip:hover {
  background: var(--wc-ground);
  border-color: var(--wc-terr-300, #edc7a1);
  color: var(--wc-ink);
}

/* --- text --- */
.ob-kicker {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--wc-terr-600);
}
.ob-title {
  font-family: var(--wc-display);
  margin: 4px 0 8px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}
.ob-sub {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wc-ink-soft);
}

/* --- demo panel --- */
.ob-demo.dark {
  background: #14231b;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* --- mini pitch --- */
.ob-pitch {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 9 / 7;
  background: #1f4a24;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  overflow: hidden;
}
.ob-line {
  position: absolute;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.ob-line.ob-mid {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
}
.ob-box {
  position: absolute;
  top: 50%;
  width: 17%;
  height: 55%;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.ob-boxL { left: 0; border-left: 0; }
.ob-boxR { right: 0; border-right: 0; }
.ob-goal {
  position: absolute;
  top: 50%;
  width: 9%;
  height: 12%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.ob-goalL { left: -6%; }
.ob-goalR { right: -6%; }
.ob-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 33.33%;
  background: linear-gradient(90deg, rgba(255, 210, 77, 0), rgba(255, 210, 77, 0.22));
  border-left: 1px dashed rgba(255, 210, 77, 0.6);
  pointer-events: none;
}
.ob-zoneTag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffe9a8;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  padding: 2px 6px;
}
.ob-t {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ob-t.h { background: #ffcf5c; }
.ob-t.a { background: #e2604a; }
.ob-t.hl { background: #ffe9a8; box-shadow: 0 0 8px rgba(255, 210, 77, 0.8); }
.ob-ball {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 1;
}

/* --- turns pill --- */
.ob-pill {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3px;
  max-width: 360px;
}
.ob-cell {
  width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  color: #e8f0e8;
}
.ob-cell.second {
  background: rgba(255, 255, 255, 0.32);
  color: #141d16;
}
.ob-ht {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffcf5c;
  background: rgba(255, 207, 92, 0.12);
  border: 1px solid rgba(255, 207, 92, 0.4);
  border-radius: 999px;
  padding: 2px 8px;
  margin: 0 4px;
}

/* --- real cards, shrunk --- */
.ob-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.ob-shrink {
  width: 79px;
  height: 119px;
  flex-shrink: 0;
}
.ob-shrink .action-card {
  width: 110px;
  height: 165px;
  transform: scale(0.72);
  transform-origin: 0 0;
}
.ob-shoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* --- effect chips --- */
.ob-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ob-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 6px 10px;
}
.ob-cglyph {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.ob-chip.amber .ob-cglyph { background: rgba(255, 210, 90, 0.22); }
.ob-chip.sage .ob-cglyph { background: rgba(140, 200, 150, 0.2); }
.ob-chip.blue .ob-cglyph { background: rgba(110, 160, 230, 0.22); }
.ob-cbody {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ob-cbody b {
  font-size: 11px;
  font-weight: 800;
  color: #f2f7f2;
}
.ob-cbody small {
  font-size: 9px;
  color: #a9b8a9;
}

/* --- loop / knockout chains --- */
.ob-chain {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.ob-chainCell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 7px 11px;
  min-width: 56px;
}
.ob-chainCell.gold {
  background: rgba(255, 210, 77, 0.18);
  border-color: rgba(255, 210, 77, 0.6);
}
.ob-chainCell.end {
  background: rgba(124, 164, 90, 0.22);
  border-color: rgba(150, 200, 110, 0.5);
}
.ob-chainIcon {
  font-size: 15px;
  line-height: 1;
}
.ob-chainTag {
  font-size: 11px;
  font-weight: 800;
  color: #f2f7f2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ob-chainSub {
  font-size: 8.5px;
  color: #a9b8a9;
}
.ob-chainArrow {
  font-style: normal;
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 800;
}

/* --- WC setup mock --- */
.ob-setup {
  width: min(340px, 100%);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--wc-ink);
}
.ob-setupCounter {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
}
.ob-setupCounter b {
  font-family: var(--wc-display);
  font-size: 26px;
  color: var(--wc-terr-600);
}
.ob-setupCounter span {
  color: var(--wc-muted);
}
.ob-setupCounter em {
  margin-left: auto;
  font-style: normal;
  font-size: 11px;
  color: var(--wc-sage-700);
  font-weight: 800;
}
.ob-setupRows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ob-setupRow {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
}
.ob-setupRow b {
  font-weight: 800;
}
.ob-setupRow em {
  margin-left: auto;
  font-style: normal;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--wc-sage-700);
  background: var(--wc-sage-200);
  border-radius: 999px;
  padding: 3px 9px;
}
.ob-setupRow em:last-of-type {
  color: var(--wc-muted);
  background: var(--wc-ground-2);
}
.ob-gob {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  border-radius: 6px;
}
.ob-gA { background: #c9a227; }
.ob-gB { background: #2f5fc0; }
.ob-gC { background: #75aadb; }
.ob-setupToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}
.ob-knob {
  width: 26px;
  height: 14px;
  border-radius: 999px;
  background: var(--wc-ground-2);
  border: 1px solid var(--wc-line);
  position: relative;
}
.ob-knob::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wc-muted);
}
.ob-setupToggle small {
  font-size: 9px;
  font-weight: 600;
  color: var(--wc-muted);
}
.ob-setupStart {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: var(--wc-sage-600);
  border-radius: 999px;
  padding: 9px;
}

/* --- hub mock --- */
.ob-hub {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ob-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ob-tab {
  font-size: 10px;
  font-weight: 700;
  color: #c3cdc3;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.ob-tab.on {
  background: var(--wc-sage-600);
  color: #fff;
  border-color: transparent;
}
.ob-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--wc-terr-700);
  color: #fff7ef;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 800;
}
.ob-continue span {
  font-weight: 600;
  opacity: 0.85;
}

/* --- standings mock --- */
.ob-standings {
  width: min(360px, 100%);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--wc-ink);
  font-size: 11px;
}
.ob-sHead,
.ob-sRow {
  display: grid;
  grid-template-columns: 1.5fr repeat(7, 24px) 32px 34px;
  align-items: center;
  gap: 2px;
  padding: 7px 10px;
}
.ob-sHead {
  background: var(--wc-ground);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--wc-muted);
}
.ob-sRow {
  border-top: 1px solid var(--wc-line);
  text-align: center;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.ob-sTeam {
  text-align: left;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ob-sPts {
  font-weight: 900;
  color: var(--wc-terr-700);
}
.ob-sBadge {
  position: absolute;
  right: 4px;
  top: 4px;
  font-style: normal;
  font-size: 8.5px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1px 5px;
}
.ob-sBadge.top {
  color: #fff;
  background: var(--wc-sage-600);
}
.ob-sBadge.third {
  color: var(--wc-ink-soft);
  background: var(--wc-sage-200);
}
.ob-sNote {
  padding: 8px 10px;
  border-top: 1px solid var(--wc-line);
  font-size: 9.5px;
  color: var(--wc-muted);
  background: var(--wc-paper-2);
}

/* --- facts + actions --- */
.ob-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 6px 0 16px;
}
.ob-fact {
  font-size: 11px;
  font-weight: 700;
  color: var(--wc-sage-800);
  background: var(--wc-sage-100);
  border: 1px solid var(--wc-sage-300, #c4cfab);
  border-radius: 999px;
  padding: 4px 11px;
}
.ob-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.ob-back {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--wc-ink-soft);
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ob-back:hover {
  background: var(--wc-ground);
  border-color: var(--wc-terr-300, #edc7a1);
}
.ob-next {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #fff7ef;
  background: var(--wc-terr-700);
  border: 0;
  border-radius: 999px;
  padding: 11px 26px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(169, 84, 42, 0.22);
  transition: background 0.15s, transform 0.15s;
}
.ob-next:hover {
  background: var(--wc-terr-800);
  transform: translateY(-1px);
}
.ob-next.sage {
  background: var(--wc-sage-600);
  box-shadow: 0 5px 14px rgba(99, 111, 75, 0.24);
}
.ob-next.sage:hover {
  background: var(--wc-sage-700);
}
.ob-back:focus-visible,
.ob-next:focus-visible,
.ob-skip:focus-visible {
  outline: 2px solid var(--wc-terr-600);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .ob-overlay { padding: 10px; }
  .ob-sheet { padding: 14px 16px 16px; }
  .ob-title { font-size: 22px; }
  .ob-esc { display: none; }
  .ob-sHead, .ob-sRow { grid-template-columns: 1.4fr repeat(7, 20px) 28px 30px; gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-overlay { backdrop-filter: none; }
  .ob-next, .ob-back, .ob-skip { transition: none; }
}

/* ============================================================
   MATCH SCREEN RESKIN — WC26 paper chrome on the dark pitch.
   The pitch + stadium backdrop stay dark (see the tutorial /
   modal-redesign catalogs: "lessons live on the dark pitch").
   This block re-skins every panel around the board — scoreboard
   pill, team rails, match log, hand plates, tooltips, status and
   hints — to the warm-cream paper language used by the hub,
   WC screens and modals. Scoped to #board & friends, so nothing
   outside the live match is affected. Inline kit colors set by
   ui.js are neutralized with !important (matches .wc-card-team).
   ============================================================ */

#board,
#game-status,
#hint,
#match-screen,
.player-tooltip,
.action-card-tooltip,
.team-effect-tooltip {
  --wc-ink: #201e1d;
  --wc-ink-soft: #4a423d;
  --wc-muted: #7b716a;
  --wc-ground: #f5ead8;
  --wc-ground-2: #eee0c9;
  --wc-paper: #fffaf3;
  --wc-paper-2: #fdf3e3;
  --wc-line: rgba(32, 30, 29, 0.14);
  --wc-terr-100: #faf0e2;
  --wc-terr-200: #f5dfc5;
  --wc-terr-300: #edc7a1;
  --wc-terr-400: #e2aa7b;
  --wc-terr-500: #d58d58;
  --wc-terr-600: #c67139;
  --wc-terr-700: #a9542a;
  --wc-terr-800: #863e1d;
  --wc-terr-900: #612a11;
  --wc-sage-100: #f0f1e6;
  --wc-sage-200: #dfe4ce;
  --wc-sage-300: #c4cfab;
  --wc-sage-400: #a6b688;
  --wc-sage-500: #8d9d70;
  --wc-sage-600: #7a8a5e;
  --wc-sage-700: #636f4b;
  --wc-sage-800: #4a5438;
  --wc-sage-900: #333b26;
  --wc-gold: #ffd24d;
  --wc-gold-ink: #8a6d00;
  --wc-danger: #b22b1d;
  --wc-display: 'Caprasimo', Georgia, serif;
  --wc-sans: 'Figtree', system-ui, sans-serif;
  --wc-r: 16px;
  --wc-r-lg: 20px;
  --wc-r-xl: 28px;
  --wc-pill: 999px;
  --wc-shadow: 0 1px 2px rgba(32, 30, 29, 0.08), 0 8px 24px rgba(32, 30, 29, 0.08);
  --wc-shadow-lift: 0 2px 4px rgba(32, 30, 29, 0.1), 0 14px 34px rgba(32, 30, 29, 0.16);
}

/* ---- shared chrome font ---- */
#match-screen {
  width: min(1400px, 96vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--wc-ground);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-xl);
  box-shadow: var(--wc-shadow);
  padding: 18px 22px 24px;
  color: var(--wc-ink);
}

#match-screen:has(#board.hidden) {
  display: none;
}

/* bare labels that sit on the off-white surround (not inside a
   card, not over the pitch) keep their ink/muted tones */
#match-screen .column-tick {
  color: var(--wc-muted);
}

#match-screen .bench-header {
  color: var(--wc-muted);
}

#scoreboard,
.rail-team,
#match-log,
#rail-controls,
#hands-area .hand-panel,
#game-status,
.player-tooltip,
.action-card-tooltip,
.team-effect-tooltip {
  font-family: var(--wc-sans);
}

/* ---- #game-status: hidden until the flow fills it ---- */

/* the rail sizes to the board row (content) instead of pinning the
   panel to the full viewport height */
#right-rail {
  height: auto;
  overflow: visible;
}

/* ---------- Scoreboard: paper pill on the off-white surround ---------- */
#scoreboard {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  box-shadow: var(--wc-shadow-lift);
  color: var(--wc-ink);
}

.scoreboard-side {
  gap: 10px;
}

.scoreboard-team {
  color: var(--wc-ink) !important;
  font-weight: 800;
  letter-spacing: 1px;
}

.scoreboard-score {
  color: #fff7ef;
  background: var(--wc-terr-700);
  border-radius: var(--wc-pill);
  font-family: var(--wc-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 10px rgba(169, 84, 42, 0.25);
}

.scoreboard-center {
  color: var(--wc-ink-soft);
  font-weight: 700;
}

.scoreboard-penalties {
  color: var(--wc-terr-700);
}

.scoreboard-match-effect {
  color: var(--wc-gold-ink);
}

/* ---------- Right rail: paper team sheets ---------- */
.rail-team {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  box-shadow: var(--wc-shadow);
  color: var(--wc-ink);
}

.rail-team-header {
  color: var(--wc-ink) !important;
  font-weight: 800;
  letter-spacing: 1px;
}

.rail-team-name {
  color: inherit;
}

.rail-ap-dot.empty {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
}

.rail-ap-dot.filled {
  border-color: var(--wc-gold);
  box-shadow: 0 0 6px rgba(255, 210, 77, 0.45);
}

.rail-decks .deck-back {
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Rail controls: clock + primary End Turn ---------- */
.rail-clock {
  color: var(--wc-ink-soft);
}

.rail-playing {
  color: var(--wc-ink) !important;
  font-weight: 800;
}

.rail-end-turn {
  background: var(--wc-terr-700);
  color: #fff7ef;
  border: 0;
  border-radius: var(--wc-pill);
  box-shadow: 0 6px 16px rgba(169, 84, 42, 0.28);
  font-family: var(--wc-sans);
}

.rail-end-turn:hover {
  background: var(--wc-terr-800);
  border-color: transparent;
}

.rail-end-turn:active {
  background: var(--wc-terr-900);
}

/* ---------- Hands: paper plates under the fanned cards ---------- */
#hands-area .hand-panel {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  box-shadow: var(--wc-shadow);
  padding: 10px 12px 8px;
  color: var(--wc-ink);
}

#hands-area .hand-panel .panel-team {
  color: var(--wc-terr-800) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.panel-team-name {
  color: var(--wc-ink-soft) !important;
}

.team-effect-badge {
  background: var(--wc-paper-2);
  border: 1px solid var(--wc-line);
  color: var(--wc-ink-soft);
}

.team-effect-badge.team-artifact {
  background: #fcf0cf;
  border-color: rgba(255, 210, 77, 0.6);
  color: #6d5500;
}

.team-effect-badge::after {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  color: var(--wc-ink);
  box-shadow: var(--wc-shadow-lift);
}

/* ---------- Match log: paper sheet ---------- */
#match-log {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  box-shadow: var(--wc-shadow);
  color: var(--wc-ink);
}

.log-minute {
  color: var(--wc-muted);
}

.log-team {
  color: var(--wc-ink);
  font-weight: 800;
}

.log-text {
  color: var(--wc-ink-soft);
}

.log-entry.log-goal .log-text {
  color: var(--wc-gold-ink);
  font-weight: 700;
}

.log-entry.log-denied .log-text {
  color: var(--wc-terr-700);
}

.log-entry.log-card .log-text {
  color: var(--wc-terr-800);
}

.log-entry.log-injury .log-text,
.log-entry.log-error .log-text {
  color: var(--wc-danger);
}

.log-entry.log-sub .log-text {
  color: var(--wc-sage-700);
}

/* ---------- Player tooltip: paper sheet ----------
   Name/meta/star stay light: they sit on the team-colour header
   band (ui sets header.style.backgroundColor = team.primaryColor).
   Only the body below the band (stats + effects) is paper-ink. */
.player-tooltip {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 10px;
  box-shadow: var(--wc-shadow-lift);
  color: var(--wc-ink);
}

.player-tooltip.in-match-log {
  background: transparent;
  box-shadow: none;
}

.player-tooltip-avatar {
  background: var(--wc-ground);
  color: var(--wc-terr-800);
}

/* card + team-effect floating tooltips: paper sheets */
.action-card-tooltip,
.team-effect-tooltip {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: 10px;
  color: var(--wc-ink-soft);
  box-shadow: var(--wc-shadow-lift);
}

.stat-label {
  color: var(--wc-muted);
}

.stat-bar {
  background: var(--wc-ground-2);
}

.stat-fill {
  background: var(--wc-sage-600);
}

.stat-value {
  color: var(--wc-ink);
}

.player-tooltip-effects {
  border-top: 1px solid var(--wc-line);
}

.player-tooltip-effects-title {
  color: var(--wc-terr-700);
}

.effect-name {
  color: var(--wc-ink);
}

.effect-desc {
  color: var(--wc-muted);
}

.effect-turns {
  color: var(--wc-terr-700);
}

/* ---------- Game status + hints ---------- */
#game-status {
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r);
  box-shadow: var(--wc-shadow);
  color: var(--wc-ink);
}

.game-turn {
  color: var(--wc-ink);
}

.game-turns-left {
  color: var(--wc-muted);
}

.game-score {
  color: var(--wc-terr-700);
}

.in-play-team-header {
  color: var(--wc-ink);
}

.skip-btn {
  background: var(--wc-terr-100);
  color: var(--wc-terr-800);
  border: 1px solid var(--wc-terr-300);
  border-radius: var(--wc-pill);
}

.skip-btn:hover {
  background: var(--wc-terr-200);
}

#hint {
  background: var(--wc-gold);
  color: var(--wc-ink);
  border-radius: var(--wc-pill);
  box-shadow: var(--wc-shadow);
}

/* --- Main menu reskin: pitch room (Option 3) -----------------------
   Warm paper board on a dark pitch-room, WC26 token palette.
   Scoped to #menu-screen so setup screens keep their own chrome. */

#menu-screen {
  position: relative;
  --wc-ink: #201e1d;
  --wc-ink-soft: #4a423d;
  --wc-muted: #7b716a;
  --wc-ground: #f5ead8;
  --wc-ground-2: #eee0c9;
  --wc-paper: #fffaf3;
  --wc-paper-2: #fdf3e3;
  --wc-line: rgba(32, 30, 29, 0.14);
  --wc-terr-100: #faf0e2;
  --wc-terr-200: #f5dfc5;
  --wc-terr-300: #edc7a1;
  --wc-terr-400: #e2aa7b;
  --wc-terr-500: #d58d58;
  --wc-terr-600: #c67139;
  --wc-terr-700: #a9542a;
  --wc-sage-100: #f0f1e6;
  --wc-sage-300: #c4cfab;
  --wc-sage-500: #8d9d70;
  --wc-sage-600: #7a8a5e;
  --wc-gold: #ffd24d;
  --wc-gold-ink: #8a6d00;
  --wc-r-lg: 20px;
  --wc-r-xl: 28px;
  background:
    radial-gradient(110% 70% at 50% -5%, rgba(196, 207, 171, 0.22), transparent 55%),
    radial-gradient(140% 110% at 50% 120%, rgba(0, 0, 0, 0.6), transparent 55%),
    #18241b;
  filter: none;
}

#menu-screen .menu-pitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(rgba(196, 207, 171, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 207, 171, 0.14) 1px, transparent 1px);
  background-size: calc(100% / 9) calc(100% / 7);
}
#menu-screen .menu-pitch::before {
  content: '';
  position: absolute;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 2px;
  background: rgba(255, 210, 77, 0.22);
}
#menu-screen .menu-pitch::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(18vw, 140px);
  height: min(18vw, 140px);
  border-radius: 50%;
  border: 2px solid rgba(255, 210, 77, 0.22);
  transform: translate(-50%, -50%);
}

#menu-screen .menu-light {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  filter: blur(2px);
  will-change: transform;
}

#menu-screen #menu-light-a {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 210, 77, 0.85) 15%, rgba(255, 140, 30, 0.5) 30%, transparent 60%);
  animation: light-a-h 15s ease-in-out infinite alternate;
}

#menu-screen #menu-light-b {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(30, 180, 255, 0.8) 15%, rgba(100, 60, 220, 0.45) 30%, transparent 60%);
  animation: light-b-v 14s ease-in-out infinite alternate;
}

#menu-screen #menu-light-c {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 80, 200, 0.8) 15%, rgba(220, 40, 160, 0.45) 30%, transparent 60%);
  animation: light-c-h 16s ease-in-out infinite alternate;
}

#menu-screen #menu-light-d {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(80, 255, 180, 0.8) 15%, rgba(40, 220, 100, 0.45) 30%, transparent 60%);
  animation: light-d-v 18s ease-in-out infinite alternate;
}

#menu-screen #menu-light-e {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 180, 40, 0.85) 15%, rgba(240, 140, 20, 0.5) 30%, transparent 60%);
  animation: light-e-h 13.5s ease-in-out infinite alternate;
}

#menu-screen #menu-light-f {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0));
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(180, 80, 255, 0.8) 15%, rgba(140, 40, 220, 0.45) 30%, transparent 60%);
  animation: light-f-v 15.5s ease-in-out infinite alternate;
}

@keyframes light-a-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes light-b-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }
@keyframes light-c-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes light-d-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }
@keyframes light-e-h { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(-44vw); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateX(44vw); } }
@keyframes light-f-v { 0% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(-40vh); } 100% { transform: translate(-50%, -50%) translate(var(--start-x, 0), var(--start-y, 0)) translateY(40vh); } }

#menu-screen .menu-box {
  position: absolute;
  top: 50%;
  width: 16%;
  height: 42%;
  border: 2px solid rgba(255, 210, 77, 0.16);
  transform: translateY(-50%);
}
#menu-screen .menu-box-l { left: calc(15% - 2px); border-right: none; }
#menu-screen .menu-box-r { right: calc(15% - 2px); border-left: none; }
#menu-screen .menu-six {
  position: absolute;
  top: 50%;
  width: 46%;
  height: 26%;
  border: 2px solid rgba(255, 210, 77, 0.16);
  transform: translateY(-50%);
}
#menu-screen .menu-box-l .menu-six { right: 0; border-right: none; }
#menu-screen .menu-box-r .menu-six { left: 0; border-left: none; }

#menu-screen .menu-panel {
  z-index: 3;
  width: 540px;
  background: var(--wc-paper);
  border: 1px solid var(--wc-line);
  border-radius: var(--wc-r-xl);
  padding: 0 30px;
  align-items: stretch;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 70px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}
#menu-screen .menu-panel::before {
  content: '';
  display: block;
  height: 5px;
  margin: 0 -30px 0;
  background: linear-gradient(90deg, var(--wc-terr-600), var(--wc-gold) 55%, var(--wc-sage-600));
}
#menu-screen .menu-title {
  color: var(--wc-ink);
  font-size: 42px;
  letter-spacing: 0.01em;
  text-align: center;
}
#menu-screen .menu-subtitle {
  color: var(--wc-muted);
  letter-spacing: 0.18em;
  text-align: center;
  padding: 0 8px;
}

#menu-screen .menu-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 10px;
  border-bottom: 1px solid var(--wc-line);
  margin-bottom: 18px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
#menu-screen .menu-hud-name { color: var(--wc-muted); }
#menu-screen .menu-hud-season { color: var(--wc-terr-600); }

#menu-screen .menu-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wc-paper-2);
  border: 1.5px solid var(--wc-line);
  border-radius: var(--wc-r-lg);
  color: var(--wc-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: none;
  overflow: hidden;
}
#menu-screen .menu-btn::before {
  content: '';
  position: static;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--acc, var(--wc-terr-600));
  flex: 0 0 auto;
}
#menu-screen .menu-btn .menu-btn-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left
}
#menu-screen .menu-btn small {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--wc-muted);
  text-transform: none;
}
#menu-screen .menu-btn:hover {
  transform: translateX(3px);
  background: var(--wc-paper-2);
  box-shadow: 0 8px 18px rgba(32, 30, 29, 0.14);
}

#menu-screen .menu-btn:nth-of-type(1) { --acc: var(--wc-terr-600); }
#menu-screen .menu-btn:nth-of-type(2) { --acc: var(--wc-sage-600); }
#menu-screen .menu-btn:nth-of-type(3) { --acc: var(--wc-terr-400); }
#menu-screen .menu-btn:nth-of-type(4) { --acc: var(--wc-gold); }
#menu-screen .menu-btn:nth-of-type(5) { --acc: var(--wc-sage-500); }
#menu-screen .menu-btn:nth-of-type(6) { --acc: var(--wc-sage-500); }
#menu-screen .menu-btn:nth-of-type(7) { --acc: var(--wc-terr-300); }

#menu-screen .menu-btn:nth-of-type(1):hover { background: #fff5f0; }
#menu-screen .menu-btn:nth-of-type(2):hover { background: var(--wc-sage-100); }
#menu-screen .menu-btn:nth-of-type(3):hover { background: var(--wc-terr-100); }
#menu-screen .menu-btn:nth-of-type(4):hover { background: var(--wc-gold); border-color: var(--wc-gold); color: var(--wc-gold-ink); box-shadow: 0 10px 22px rgba(255, 210, 77, 0.25); }
#menu-screen .menu-btn:nth-of-type(4) small { color: rgba(138, 109, 0, 0.72); }
#menu-screen .menu-btn:nth-of-type(5):hover,
#menu-screen .menu-btn:nth-of-type(6):hover { background: #edf7f4; }
#menu-screen .menu-btn:nth-of-type(7):hover { background: var(--wc-paper); }

#menu-screen .menu-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 12px 0px;
  border-top: 1px solid var(--wc-line);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wc-muted);
}