/* deslop-ignore-file 02 06 19 */
.hero {
  position: relative;
  padding-block: var(--space-xl) var(--space-2xl);
  overflow: hidden;
}

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

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(244, 249, 255, 0.94) 0%, rgba(244, 249, 255, 0.78) 42%, rgba(184, 232, 251, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 1.02;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
}

.hero__title span {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  font-size: var(--text-lg);
  color: var(--jp-text-muted);
  max-width: 34rem;
  margin: 0 0 var(--space-lg);
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-block-end: var(--space-lg);
}

.hero__stat {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--gradient-card);
  border: 1px solid var(--jp-border);
  box-shadow: var(--shadow-soft);
}

.hero__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__stat span {
  font-size: var(--text-xs);
  color: var(--jp-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__panel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: var(--gradient-card);
}

.hero__panel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-md);
}

.feature-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gradient-card);
  border: 1px solid var(--jp-border);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

.feature-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.feature-card__body {
  padding: var(--space-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.feature-card h3 {
  font-family: var(--font-display);
  margin: 0 0 0.5rem;
  font-size: var(--text-lg);
}

.feature-card p {
  margin: 0;
  color: var(--jp-text-muted);
  font-size: var(--text-sm);
  flex: 1;
}

.feature-card__link {
  margin-block-start: var(--space-sm);
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
}

.section--media-bg {
  position: relative;
  isolation: isolate;
}

.section--media-bg .section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
}

.section--media-bg .section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section--media-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--jp-bg) 0%, rgba(244, 249, 255, 0.92) 100%);
}

.squad-builder {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .squad-builder {
    grid-template-columns: 1.15fr minmax(280px, 380px);
    align-items: start;
  }
}

.rink-board {
  position: relative;
  min-block-size: clamp(24rem, 55vw, 34rem);
  border-radius: var(--radius-xl);
  border: 2px solid rgba(11, 61, 110, 0.25);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-xs);
  background:
    linear-gradient(rgba(232, 242, 252, 0.15), rgba(11, 61, 110, 0.35)),
    url('../images/rink-topdown.webp') center / cover no-repeat;
  box-shadow: inset 0 0 3rem rgba(11, 61, 110, 0.2), var(--shadow-card);
  overflow: hidden;
}

.rink-board__markings {
  position: absolute;
  inset: 6% 8%;
  pointer-events: none;
}

.rink-board__line {
  position: absolute;
  inset-inline: 0;
  block-size: 3px;
  background: rgba(45, 143, 216, 0.55);
}

.rink-board__line--center {
  inset-block-start: 50%;
  background: rgba(255, 107, 74, 0.45);
  transform: translateY(-50%);
}

.rink-board__line--blue-top {
  inset-block-start: 33%;
}

.rink-board__line--blue-bottom {
  inset-block-start: 67%;
}

.rink-board__circle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 22%;
  aspect-ratio: 1;
  border: 3px solid rgba(45, 143, 216, 0.45);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.rink-board__crease {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-start: 50%;
  inline-size: 28%;
  block-size: 12%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px 8px 0 0;
  transform: translateX(-50%);
  background: rgba(184, 232, 251, 0.15);
}

.rink-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rink-row--defense {
  gap: 0.4rem;
}

.rink-slot {
  inline-size: 4.5rem;
  min-block-size: 5rem;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.72);
  border: 2px dashed rgba(11, 61, 110, 0.35);
  border-radius: var(--radius-md);
  color: var(--jp-blue-900);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  backdrop-filter: blur(6px);
}

.rink-slot:hover,
.rink-slot.is-active {
  border-color: var(--jp-cyan-400);
  box-shadow: 0 0 1rem rgba(94, 200, 242, 0.45);
  transform: translateY(-2px);
}

.rink-slot.is-filled {
  border-style: solid;
  border-color: var(--jp-blue-500);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(184, 232, 251, 0.65));
  animation: slot-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes slot-pop {
  0% { transform: scale(0.85); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.rink-slot__label {
  font-size: 0.58rem;
  color: var(--jp-text-muted);
  display: block;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.rink-slot__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-block-start: 0.2rem;
}

.rink-slot__img {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(45, 143, 216, 0.45);
}

.rink-slot__name {
  font-size: 0.62rem;
  font-weight: 700;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rink-slot__rating {
  font-size: 0.62rem;
  color: var(--jp-accent);
  font-weight: 800;
}

.rink-slot__plus {
  font-size: 1.35rem;
  color: var(--jp-blue-500);
  line-height: 1;
  padding-block: 0.75rem;
}

.squad-panel {
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  background: var(--gradient-card);
  border: 1px solid var(--jp-border);
  box-shadow: var(--shadow-soft);
}

.squad-progress {
  block-size: 0.35rem;
  border-radius: 999px;
  background: var(--jp-bg-alt);
  overflow: hidden;
  margin-block-end: var(--space-md);
}

.squad-progress__bar {
  display: block;
  block-size: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  /* deslop-ignore-next-line 26 */
  transition: width 0.2s ease;
}

.squad-panel__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-block-end: var(--space-md);
}

.squad-panel__stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.squad-panel__stat-label {
  font-size: var(--text-xs);
  color: var(--jp-text-muted);
}

.squad-pos-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-end: var(--space-md);
}

.squad-pos-count {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  color: var(--jp-text-muted);
}

.squad-pos-count.is-needed {
  border-color: var(--jp-accent);
  color: var(--jp-blue-900);
  background: var(--jp-accent-soft);
}

.squad-pos-count.is-complete {
  border-color: transparent;
  color: #fff;
  background: var(--gradient-brand);
}

.squad-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-end: var(--space-sm);
}

.squad-filter {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.squad-filter.is-active {
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}

.player-pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  max-block-size: 22rem;
  overflow: auto;
  padding-inline-end: 0.25rem;
}

.player-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
}

.player-card:hover:not(.is-selected):not(:disabled) {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.player-card.is-selected,
.player-card.is-pos-full {
  opacity: 0.4;
  cursor: not-allowed;
}

.player-card__pos {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: var(--jp-bg-alt);
}

.player-card__pos--g { color: var(--jp-accent); }
.player-card__pos--d { color: var(--jp-blue-700); }
.player-card__pos--c { color: var(--jp-blue-500); }
.player-card__pos--w { color: #2a9d6a; }

.player-card__avatar img {
  border-radius: 50%;
  object-fit: cover;
}

.player-card__name {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.player-card__club {
  font-size: 0.6rem;
  color: var(--jp-text-muted);
}

.player-card__rating {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--jp-blue-900);
}

.squad-panel__hint {
  font-size: var(--text-xs);
  color: var(--jp-text-muted);
  margin-block: var(--space-sm);
}

.squad-panel__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.step-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
  border: 1px solid var(--jp-border);
  box-shadow: var(--shadow-soft);
}

.step-card__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-md);
}

.price-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--gradient-card);
  border: 1px solid var(--jp-border);
  box-shadow: var(--shadow-soft);
}

.price-card--featured {
  border-color: rgba(45, 143, 216, 0.45);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(184, 232, 251, 0.55));
  transform: translateY(-4px);
}

.price-card__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--jp-accent-soft);
  color: var(--jp-accent);
  margin-block-end: 0.5rem;
}

.price-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: 0.5rem 0;
}

.price-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--jp-text-muted);
}

.price-card li {
  padding: 0.35rem 0;
  padding-inline-start: 1.1rem;
  position: relative;
}

.price-card li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.75rem;
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 50%;
  background: var(--jp-cyan-400);
}

.sim-layout {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .sim-layout {
    grid-template-columns: 1fr 1fr;
  }
}

.sim-arena {
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  background:
    linear-gradient(rgba(7, 24, 41, 0.55), rgba(11, 61, 110, 0.65)),
    url('../images/bg-ranking.webp') center / cover;
  color: #fff;
  min-block-size: 16rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: filter 0.3s;
}

.sim-arena--goal-home {
  filter: brightness(1.15);
  box-shadow: inset 0 0 2rem rgba(94, 200, 242, 0.45);
}

.sim-arena--goal-away {
  filter: brightness(0.92);
  box-shadow: inset 0 0 2rem rgba(255, 107, 74, 0.35);
}

.sim-scoreboard {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
}

.sim-scoreboard__sep {
  opacity: 0.5;
}

.sim-log {
  list-style: none;
  margin: 0;
  padding: 0;
  max-block-size: 18rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sim-log__item {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  background: var(--jp-surface);
  border: 1px solid var(--jp-border);
}

.sim-log__item--home {
  border-inline-start: 3px solid var(--jp-cyan-400);
}

.sim-log__item--away {
  border-inline-start: 3px solid var(--jp-accent);
}

.cta-band {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  background: var(--gradient-brand);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.cta-band h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-sm);
}