/* Teamazo · Habillage « jeu de foot », 2e passe : ambiances, micro-interactions, Grand écran, duel de compos, tournoi. */

/* ==================================================================
   HABILLAGE « JEU DE FOOT » — 2e passe : ambiances, micro-interactions,
   mode match, duel de compos et tournoi.
   ================================================================== */

/* --- Ambiances --- */
/* Fond d’ambiance sur une couche fixe à part : le navigateur la dessine une seule fois
   au lieu de repeindre toute la page à chaque défilement (background-attachment: fixed). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
:root[data-theme] {
  background: var(--bg);
}
:root[data-theme] body {
  background: transparent;
}
:root[data-theme='dark'] body::before {
  background:
    radial-gradient(ellipse 55% 38% at 18% -8%, #c6ff3d1c, transparent 70%),
    radial-gradient(ellipse 55% 38% at 82% -8%, #c6ff3d12, transparent 70%),
    repeating-linear-gradient(90deg, #ffffff04 0 120px, transparent 120px 240px);
}
:root[data-theme='gold'] body::before {
  background:
    radial-gradient(ellipse 70% 45% at 50% -12%, #f2c14e30, transparent 70%),
    radial-gradient(ellipse 50% 40% at 100% 100%, #c58a1f1c, transparent 70%),
    repeating-linear-gradient(135deg, #f2c14e07 0 2px, transparent 2px 16px);
}
:root[data-theme='champions'] body::before {
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #ffffffb0 50%, transparent),
    radial-gradient(1.1px 1.1px at 72% 12%, #ffffffa0 50%, transparent),
    radial-gradient(1.3px 1.3px at 38% 66%, #ffffff90 50%, transparent),
    radial-gradient(1px 1px at 88% 48%, #ffffffa0 50%, transparent),
    radial-gradient(1.4px 1.4px at 58% 84%, #ffffff80 50%, transparent),
    radial-gradient(ellipse 70% 50% at 50% -10%, #3ee6ff2b, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 100%, #5b3cff2e, transparent 70%);
  background-size:
    420px 420px,
    520px 520px,
    460px 460px,
    380px 380px,
    610px 610px,
    auto,
    auto;
}
:root[data-theme='light'] body::before {
  background:
    radial-gradient(ellipse 80% 45% at 50% -12%, #ffffff, transparent 70%),
    radial-gradient(ellipse 60% 40% at 0% 0%, #c8ecff66, transparent 70%),
    repeating-linear-gradient(90deg, #138a3d08 0 120px, transparent 120px 240px),
    linear-gradient(180deg, #f7fbf5, #e9f0e6);
}
:root[data-theme='light'] .panel,
:root[data-theme='light'] .compo-bar,
:root[data-theme='light'] .match-options,
:root[data-theme='light'] .ranking-capture,
:root[data-theme='light'] .mode-menu,
:root[data-theme='light'] .tour-hero,
:root[data-theme='light'] .club-card,
:root[data-theme='light'] .fixture-card {
  box-shadow:
    0 1px 2px #0f1a100f,
    0 8px 24px -16px #0f1a1040;
}
:root[data-theme='light'] .primary-btn,
:root[data-theme='light'] .mode-menu .mode-cursor {
  background: linear-gradient(135deg, #2bc566, #138a3d);
  border-color: #138a3d;
  color: #ffffff;
}
:root[data-theme='light'] .main-view-tabs.mode-menu button.active {
  color: #ffffff;
}
:root[data-theme='light'] .field-expanded .field-panel .field-toolbar,
:root[data-theme='light'] .field-expanded .field-panel .match-header {
  border-color: var(--line);
  background: #ffffffe6;
}
:root[data-theme='light'] .rank-top-1 .rank-position {
  color: #a8740a;
}
:root[data-theme='light'] .rank-top-2 .rank-position {
  color: #6f7b88;
}
:root[data-theme='light'] .rank-top-3 .rank-position {
  color: #9a5a2a;
}
.theme-switch [data-theme-choice='light']::before {
  background: conic-gradient(from 225deg, #ffffff 0 50%, #2bc566 0);
  box-shadow: inset 0 0 0 2px #0f1a1033;
}
/* Flous d’arrière-plan (backdrop-filter) retirés : très coûteux sur téléphone. */
dialog::backdrop {
  backdrop-filter: none;
  background: #04070599;
}
.mobile-tabs {
  backdrop-filter: none;
  background: var(--panel);
}
.panel,
.compo-bar,
.match-options,
.ranking-capture,
.season-card,
.mode-menu {
  box-shadow: inset 0 1px 0 #ffffff0f;
}
:root[data-theme='gold'] .primary-btn,
:root[data-theme='gold'] .mode-menu .mode-cursor {
  background: linear-gradient(135deg, #ffe08a, #f2c14e 45%, #c58a1f);
  border-color: #f2c14e;
  color: #1d1408;
}
:root[data-theme='champions'] .primary-btn,
:root[data-theme='champions'] .mode-menu .mode-cursor {
  background: linear-gradient(135deg, #8ff6ff, #3ee6ff 40%, #2a7dff);
  border-color: #3ee6ff;
  color: #04102a;
}
:root[data-theme='champions'] .brand-word span {
  color: #3ee6ff;
}

/* Sélecteur d’ambiance : trois pastilles, la pastille active affiche son nom. */
.theme-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}
.theme-switch button {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: 800 italic 13px/1 var(--display);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  transition:
    padding 0.3s var(--ease-snap),
    background 0.2s;
}
.theme-switch button::before {
  content: '';
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #ffffff40;
  transition: transform 0.3s var(--ease-snap);
}
.theme-switch [data-theme-choice='dark']::before {
  background: conic-gradient(from 225deg, #c6ff3d 0 50%, #0b100d 0);
}
.theme-switch [data-theme-choice='gold']::before {
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #8a5a12);
}
.theme-switch [data-theme-choice='champions']::before {
  background: radial-gradient(circle at 70% 30%, #3ee6ff, #1a2a7a 55%, #050a1f);
}
.theme-switch button span {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s var(--ease-snap);
}
.theme-switch button:hover::before {
  transform: rotate(-30deg) scale(1.1);
}
.theme-switch button[aria-checked='true'] {
  padding-right: 12px;
  background: var(--raised);
}
.theme-switch button[aria-checked='true'] span {
  max-width: 140px;
}
@keyframes theme-wipe {
  from {
    clip-path: circle(0 at 92% 0);
  }
  to {
    clip-path: circle(150% at 92% 0);
  }
}
::view-transition-old(root) {
  animation: none;
}
::view-transition-new(root) {
  animation: theme-wipe 0.65s var(--ease-out);
}

/* --- Micro-interactions --- */
button {
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    box-shadow 0.18s,
    transform 0.18s var(--ease-snap);
}
.primary-btn,
.outline-btn,
.subtle-btn,
.mobile-tabs button,
.main-view-tabs.mode-menu button,
.format,
.formation-btn,
.assign-pill,
.draw-btn,
.fixture-play,
.tour-pick-card,
.tour-count button,
.compo-tab button {
  position: relative;
  overflow: hidden;
}
@keyframes ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.28;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.55s ease-out forwards;
}
.primary-btn {
  box-shadow: 0 8px 20px -12px var(--lime);
}
.primary-btn::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffff70, transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
@keyframes btn-shine {
  to {
    left: 130%;
  }
}
.primary-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px var(--lime);
  filter: none;
}
.primary-btn:hover:not(:disabled)::after {
  animation: btn-shine 0.7s ease-out;
}
.outline-btn:hover:not(:disabled),
.subtle-btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--lime);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.spin .icon {
  animation: spin 0.6s var(--ease-out);
}
@keyframes kickoff {
  30% {
    outline: 3px solid var(--lime);
    outline-offset: 4px;
  }
  100% {
    outline: 3px solid transparent;
    outline-offset: 14px;
  }
}
.pitch.kickoff {
  animation: kickoff 0.8s var(--ease-out);
}
@keyframes value-bump {
  35% {
    transform: scale(1.22);
    color: var(--white);
  }
}
.bump {
  display: inline-block;
  animation: value-bump 0.45s var(--ease-snap);
}
@keyframes dialog-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-in {
  from {
    opacity: 0;
  }
}
dialog[open] {
  animation: dialog-pop 0.3s var(--ease-snap) both;
}
dialog[open]::backdrop {
  animation: backdrop-in 0.3s ease both;
}
@keyframes reveal-down {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
details[open] > :not(summary) {
  animation: reveal-down 0.26s var(--ease-out) both;
}
.summary-chevron {
  transition: transform 0.25s var(--ease-snap);
}
.grouped-row,
.team-row,
.compo-tab {
  transition:
    background 0.15s,
    transform 0.15s var(--ease-snap);
}
.grouped-row:hover,
.team-row:hover {
  background: var(--raised);
}
.compo-tab:hover {
  transform: translateY(-2px);
}
.compo-tab.active {
  box-shadow:
    0 0 0 1px var(--lime),
    0 10px 22px -14px var(--lime);
}
.format.active,
.formation-btn.active {
  box-shadow: inset 0 -3px 0 var(--lime);
}
.assign-pill[aria-pressed='true'] {
  box-shadow: inset 0 -3px 0 currentColor;
}
.fairness-meter span {
  transition: width 0.6s var(--ease-out);
}
.brand-mark {
  transition: transform 0.4s var(--ease-snap);
}
.brand:hover .brand-mark {
  transform: rotate(-8deg) scale(1.06);
}
.mobile-tabs button.active::before {
  top: 0;
}
.mobile-tabs button:active .icon {
  transform: scale(0.85);
}

/* --- Grand écran : le terrain en plein écran, façon diffusion TV --- */
body.field-expanded {
  overflow: hidden;
}
.field-expanded .app-header,
.field-expanded .live-welcome,
.field-expanded .bottom-note,
.field-expanded .partner-demo-bar,
.field-expanded .field-panel .compo-bar,
.field-expanded .field-panel .match-options,
.field-expanded .field-panel .secondary-tools,
.field-expanded .field-panel .pending-note {
  display: none !important;
}
.field-expanded .field-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: max(14px, env(safe-area-inset-top)) 18px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 40% at 12% -6%, #ffffff1f, transparent 65%),
    radial-gradient(ellipse 45% 40% at 88% -6%, #ffffff1f, transparent 65%),
    radial-gradient(ellipse 90% 55% at 50% 112%, color-mix(in srgb, var(--lime) 18%, transparent), transparent 65%),
    var(--bg);
}
.field-expanded .field-panel .field-toolbar {
  position: static;
  margin: 0;
  padding: 8px 10px 8px 16px;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  background: #000a;
  box-shadow: none;
}
.field-expanded .field-panel .field-toolbar .section-label {
  color: var(--lime);
  font: 800 italic 20px/1 var(--display);
  letter-spacing: 2px;
}
.field-expanded .field-panel .match-capture {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.field-expanded .field-panel .match-header {
  padding: 10px 18px;
  border: 1px solid #ffffff1a;
  border-radius: 12px;
  background: #000b;
}
.field-expanded .field-panel .match-side strong {
  font: 800 italic 22px/1 var(--display);
}
.field-expanded .field-panel .versus {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;
  line-height: 1;
}
.field-expanded .field-panel .versus::after {
  content: attr(data-gap);
  margin-top: 3px;
  color: var(--lime);
  font: 700 12px/1.3 var(--font);
  letter-spacing: 0.5px;
}
.field-expanded .field-panel .board-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  background: transparent;
}
.field-expanded .field-panel .pitch {
  width: min(100%, calc((100dvh - 190px) * 1.55));
  height: auto !important;
  aspect-ratio: 1.55 !important;
}
.field-expanded .field-panel .jersey,
.field-expanded .field-panel .jersey svg {
  width: 62px;
  height: 58px;
}
.field-expanded .field-panel .jersey-number {
  font-size: 27px;
  inset: 10px 0 0;
}
.field-expanded .field-panel .token-name {
  font-size: 14px;
  max-width: 120px;
}
@keyframes stadium-zoom {
  from {
    transform: perspective(900px) rotateX(22deg) scale(0.86);
    filter: brightness(0.25);
  }
  60% {
    filter: brightness(1.25);
  }
  to {
    transform: none;
    filter: none;
  }
}
@keyframes floodlights {
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.stadium-intro .pitch {
  animation: stadium-zoom 0.9s var(--ease-out) both;
}
.stadium-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0, #ffffff73, transparent 42%),
    radial-gradient(circle at 88% 0, #ffffff73, transparent 42%);
  animation: floodlights 0.9s ease-out both;
}
@media (max-width: 760px) {
  .field-expanded .field-panel {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }
  .field-expanded .field-panel .field-toolbar .section-label {
    display: none;
  }
  .field-expanded .field-panel .field-toolbar-actions button span {
    font-size: 12px;
  }
  .field-expanded .field-panel .pitch {
    width: min(100%, calc((100dvh - 180px) * var(--mobile-pitch-ratio, 0.76)));
    aspect-ratio: var(--mobile-pitch-ratio, 0.76) !important;
  }
  .field-expanded .field-panel .jersey,
  .field-expanded .field-panel .jersey svg {
    width: 48px;
    height: 45px;
  }
  .field-expanded .field-panel .jersey-number {
    font-size: 21px;
    inset: 8px 0 0;
  }
}

/* --- Duel de compos --- */
#compare-dialog[open] {
  display: flex;
  flex-direction: column;
  width: min(1200px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 20px;
}
#compare-dialog .workspace-note {
  display: none;
}
.comparison-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 290px);
  gap: 14px;
  min-height: 0;
  padding: 6px 2px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
@keyframes cmp-in {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(-1.5deg);
  }
}
.cmp-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--raised);
  scroll-snap-align: start;
  transition:
    transform 0.2s var(--ease-snap),
    border-color 0.2s;
  animation: cmp-in 0.42s var(--ease-out) both;
}
.cmp-card:nth-child(2) {
  animation-delay: 0.06s;
}
.cmp-card:nth-child(3) {
  animation-delay: 0.12s;
}
.cmp-card:nth-child(n + 4) {
  animation-delay: 0.18s;
}
.cmp-card:hover {
  transform: translateY(-4px);
  border-color: var(--muted);
}
.cmp-card.chosen {
  border-color: var(--lime);
}
.cmp-card.best {
  box-shadow:
    0 0 0 1px var(--gold),
    0 18px 40px -22px var(--gold);
}
.cmp-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.cmp-card h3 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 800 italic 21px/1 var(--display);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmp-badge {
  padding: 4px 7px;
  border-radius: 4px;
  background: var(--lime);
  color: var(--accent-ink, #15200e);
  font: 800 10px/1 var(--font);
  letter-spacing: 1px;
}
.cmp-badge.best {
  background: var(--gold);
  color: #1d1408;
}
.cmp-meta {
  color: var(--muted);
  font-size: 12px;
}
.cmp-duel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.cmp-team {
  min-width: 0;
  padding-left: 8px;
  border-left: 4px solid var(--c);
}
.cmp-team:last-child {
  padding: 0 8px 0 0;
  border-left: 0;
  border-right: 4px solid var(--c);
  text-align: right;
}
.cmp-team strong {
  display: block;
  font: 800 italic 28px/1 var(--display);
}
.cmp-team small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-gap {
  text-align: center;
}
.cmp-gap b {
  display: block;
  font: 800 22px/1 var(--display);
}
.cmp-gap small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.cmp-gauge {
  display: block;
  width: 70px;
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--line);
}
.cmp-gauge i {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--gold), var(--lime));
  transition: width 0.6s var(--ease-out);
}
.cmp-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cmp-roles span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.cmp-roles b {
  color: var(--white);
}
.cmp-roles span.uneven {
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.cmp-warn {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
}
.cmp-rosters summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.cmp-rosters > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 6px;
}
.cmp-rosters ul {
  margin: 0;
  padding: 0 0 0 8px;
  border-left: 3px solid var(--c);
  font-size: 12px;
  list-style: none;
}
.cmp-rosters li {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 0;
}
.cmp-play {
  width: 100%;
  margin-top: auto;
}

/* --- Tournoi --- */
@keyframes crest-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-20deg);
  }
}
@keyframes crest-left {
  from {
    opacity: 0;
    transform: translateX(-50px) rotate(-12deg);
  }
}
@keyframes crest-right {
  from {
    opacity: 0;
    transform: translateX(50px) rotate(12deg);
  }
}
@keyframes vs-pulse {
  50% {
    transform: scale(1.1);
    color: var(--lime);
  }
}
@keyframes crest-float {
  50% {
    transform: translateY(-6px) rotate(-3deg);
  }
}
.crest {
  flex-shrink: 0;
  overflow: visible;
}
.tour-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(120deg, var(--raised), var(--panel) 60%);
}
.tour-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(115deg, #ffffff05 0 2px, transparent 2px 18px);
  pointer-events: none;
}
.tour-hero > * {
  position: relative;
}
.tour-hero-crests {
  display: flex;
  padding-left: 10px;
}
.tour-hero-crests .crest {
  margin-left: -10px;
  filter: drop-shadow(0 4px 6px #0008);
  transition: transform 0.2s var(--ease-snap);
  animation: crest-in 0.5s var(--ease-snap) both;
}
.tour-hero-crests .crest:nth-child(2) {
  animation-delay: 0.06s;
}
.tour-hero-crests .crest:nth-child(3) {
  animation-delay: 0.12s;
}
.tour-hero-crests .crest:nth-child(n + 4) {
  animation-delay: 0.18s;
}
.tour-hero-crests .crest:hover {
  transform: translateY(-5px) scale(1.1);
}
.tour-hero-text small {
  color: var(--lime);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tour-hero-text h2 {
  margin: 4px 0 10px;
  font: 900 italic 40px/1 var(--display);
  text-transform: uppercase;
}
.tour-progress {
  height: 10px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--input);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tour-progress span {
  display: block;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--lime), var(--gold));
  transition: width 0.6s var(--ease-out);
}
.tour-hero-text p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.tour-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tour-next {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--lime);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 0, #ffffff12, transparent 70%), var(--panel);
  box-shadow: 0 20px 50px -30px var(--lime);
}
.tour-next small {
  color: var(--lime);
  font: 800 12px/1 var(--font);
  letter-spacing: 2.5px;
}
.tour-next-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 640px;
}
.tour-next-teams > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.tour-next-teams strong {
  font: 800 italic 24px/1.05 var(--display);
  text-transform: uppercase;
}
.tour-next-teams > div:first-child .crest {
  animation: crest-left 0.6s var(--ease-snap) both;
}
.tour-next-teams > div:last-child .crest {
  animation: crest-right 0.6s var(--ease-snap) both;
}
.tour-vs {
  color: var(--muted);
  font: 900 italic 44px/1 var(--display);
  animation: vs-pulse 2.4s ease-in-out 3;
}
.tour-next-play {
  padding: 14px 28px;
  font-size: 16px;
}
.tour-block {
  margin-bottom: 28px;
}
.tour-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font: 800 italic 22px/1 var(--display);
  text-transform: uppercase;
}
.tour-title::before {
  content: '';
  width: 8px;
  height: 0.8em;
  background: var(--lime);
  transform: skewX(-14deg);
}
.table-club {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}
.form-chips {
  display: inline-flex;
  gap: 3px;
}
.form-chips i {
  width: 18px;
  border-radius: 4px;
  color: #0b0f0c;
  font: 800 10px/18px var(--font);
  font-style: normal;
  text-align: center;
}
.form-V {
  background: #5bd46a;
}
.form-N {
  background: #b7c0b5;
}
.form-D {
  background: #ff6d75;
}
.season-table tbody tr {
  transition: background 0.15s;
}
.season-table tbody tr:hover {
  background: var(--raised);
}
.season-table .leader {
  background: linear-gradient(90deg, #f0c75e24, transparent 70%);
}
.tournament-fixtures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.fixture-side {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 10px;
  padding-left: 0;
  border-left: 0;
}
.fixture-side.won span::after {
  content: none;
}
.fixture-name {
  overflow: hidden;
  font: 800 17px/1.1 var(--display);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.fixture-side.won .fixture-name::after {
  content: ' ◀';
  color: var(--lime);
  font-size: 13px;
}
.crest-empty {
  width: 26px;
  height: 28px;
  border: 2px dashed var(--line);
  border-radius: 6px 6px 12px 12px;
}
.fixture-actions {
  margin-top: 10px;
}
.fixture-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--white);
  font: 800 italic 15px/1 var(--display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.fixture-card.is-ready .fixture-play {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--accent-ink, #15200e);
}
.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.club-card {
  position: relative;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  transition:
    transform 0.2s var(--ease-snap),
    border-color 0.2s;
}
.club-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--club);
}
.club-card:hover {
  transform: translateY(-3px);
  border-color: var(--club);
}
.club-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.club-head > div {
  min-width: 0;
  flex: 1;
}
.club-head .crest {
  transition: transform 0.3s var(--ease-snap);
}
.club-card:hover .club-head .crest {
  transform: rotate(-8deg) scale(1.08);
}
.club-head input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--white);
  font: 800 italic 20px/1 var(--display);
  text-transform: uppercase;
}
.club-head input:hover,
.club-head input:focus {
  border-color: var(--line);
}
.club-head p {
  padding-left: 6px;
  color: var(--muted);
  font-size: 12px;
}
.club-colors {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}
.club-colors button {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 1px var(--line);
}
.club-colors button[aria-pressed='true'] {
  box-shadow: 0 0 0 2px var(--white);
  transform: scale(1.14);
}
.club-players {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.club-players li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--raised);
  font-size: 12px;
  font-weight: 700;
}
.club-players li b {
  color: var(--gold);
}
.tour-transfers summary small {
  margin-left: 6px;
  color: var(--muted);
  font-weight: 400;
}
.tour-champion {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 30px 24px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-mid) 45%, var(--gold-lo));
  color: #1d1a12;
  text-align: center;
  animation: winner-in 0.7s var(--ease-snap) both;
}
.tour-champion::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ffffff8c, transparent);
  animation: shine 1.6s 0.5s 1 both;
}
.tour-champion > * {
  position: relative;
}
.tour-champion small {
  font-weight: 800;
  letter-spacing: 3px;
}
.tour-champion strong {
  font: 900 italic 46px/1 var(--display);
  text-transform: uppercase;
}
.tour-champion-crests {
  display: flex;
  gap: 14px;
}
.tour-champion-crests .crest {
  filter: drop-shadow(0 12px 16px #0007);
  animation: crest-in 0.8s 0.25s var(--ease-snap) both;
}
.tour-champion .fut-confetti {
  display: block;
  position: absolute;
}
.tour-champion .fut-confetti i {
  --team: #ffffff;
  animation-delay: 0.6s;
}
.tour-champion .tour-hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.tour-champion .outline-btn {
  border-color: #0004;
  background: #0002;
  color: #1d1a12;
}
.tour-champion .primary-btn {
  border-color: #14120d;
  background: #14120d;
  color: var(--gold-hi);
}
.tour-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: var(--panel);
  text-align: center;
}
.tour-empty-crests {
  display: flex;
  gap: 10px;
}
.tour-empty-crests .crest {
  animation: crest-float 3s ease-in-out 4;
}
.tour-empty-crests .crest:nth-child(2) {
  animation-delay: 0.4s;
}
.tour-empty-crests .crest:nth-child(3) {
  animation-delay: 0.8s;
}
.tour-empty-crests .crest:nth-child(4) {
  animation-delay: 1.2s;
}
.tour-empty strong {
  font: 900 italic 34px/1 var(--display);
  text-transform: uppercase;
}
.tour-empty p {
  max-width: 440px;
  color: var(--muted);
}
.tour-hidden-selects {
  display: none !important;
}
.tour-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 12px;
}
.tour-pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--raised);
  color: var(--white);
  text-align: left;
}
.tour-pick-card .icon {
  width: 26px;
  height: 26px;
  color: var(--muted);
}
.tour-pick-card strong {
  font: 800 italic 20px/1 var(--display);
  text-transform: uppercase;
}
.tour-pick-card small {
  color: var(--muted);
  font-size: 12px;
}
.tour-pick-card[aria-pressed='true'] {
  border-color: var(--lime);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--lime);
}
.tour-pick-card[aria-pressed='true'] .icon {
  color: var(--lime);
}
.tour-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.tour-count span {
  margin-right: 6px;
  color: var(--muted);
  font-weight: 700;
}
.tour-count button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--raised);
  color: var(--white);
  font: 800 18px/1 var(--display);
}
.tour-count button[aria-pressed='true'] {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--accent-ink, #15200e);
  transform: translateY(-2px);
}
@media (max-width: 760px) {
  .theme-switch button span {
    display: none;
  }
  .theme-switch button[aria-checked='true'] {
    padding-right: 4px;
  }
  .comparison-cards {
    grid-auto-columns: 84vw;
  }
  .tour-hero {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }
  .tour-hero-text h2 {
    font-size: 30px;
  }
  .tour-hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tour-next-teams {
    gap: 10px;
  }
  .tour-next-teams .crest {
    width: 52px;
    height: auto;
  }
  .tour-next-teams strong {
    font-size: 17px;
  }
  .tour-vs {
    font-size: 30px;
  }
  .tour-champion strong {
    font-size: 32px;
  }
  .season-table .form-chips {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ripple,
  .primary-btn::after,
  .spin .icon,
  .pitch.kickoff,
  .bump,
  dialog[open],
  dialog[open]::backdrop,
  details[open] > :not(summary),
  .stadium-intro .pitch,
  .stadium-intro::after,
  .cmp-card,
  .tour-hero-crests .crest,
  .tour-next-teams .crest,
  .tour-vs,
  .tour-empty-crests .crest,
  .tour-champion,
  .tour-champion::before,
  .tour-champion-crests .crest,
  ::view-transition-new(root) {
    animation: none !important;
  }
  .primary-btn:hover:not(:disabled),
  .outline-btn:hover:not(:disabled),
  .subtle-btn:hover:not(:disabled),
  .icon-btn:hover:not(:disabled),
  .compo-tab:hover,
  .cmp-card:hover,
  .club-card:hover {
    transform: none;
  }
}