.hero#club {
  isolation: isolate;
  --ta-hero-title-size: 82px;
}

.hero#club .hero-content {
  width: 100%;
  min-width: 0;
}

.hero#club h1 {
  font-size: var(--ta-hero-title-size);
  overflow-wrap: anywhere;
}

.hero#club::before {
  display: none;
  animation: none;
}

.hero#club .hero-phenomena {
  display: none;
}

.ta-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ta-hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ta-hero-controls {
  position: absolute;
  top: 18px;
  right: 24px;
  z-index: 4;
  display: flex;
  gap: 8px;
}

.ta-hero-control {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(157, 181, 198, 0.38);
  border-radius: 6px;
  background: rgba(4, 10, 17, 0.7);
  color: #d5e9f1;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.ta-hero-control:not(:disabled):hover,
.ta-hero-control[aria-pressed="true"] {
  background: #122632;
  border-color: #73c5df;
}

.ta-hero-control:focus-visible {
  outline: 2px solid #a9dfec;
  outline-offset: 4px;
}

.ta-hero-control svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.ta-hero-control:disabled {
  opacity: 0.5;
  cursor: default;
}

.ta-hero-control[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  .hero#club { --ta-hero-title-size: 64px; }
}

@media (max-width: 900px) {
  .hero#club { --ta-hero-title-size: 56px; }
}

@media (max-width: 760px) {
  .hero#club { --ta-hero-title-size: 44px; }

  .hero#club .hero-actions .btn {
    min-width: 0;
    padding: 10px 16px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .hero#club .hero-actions .btn svg {
    flex-shrink: 0;
  }

  .ta-hero-controls {
    top: 12px;
    right: 12px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .hero#club { --ta-hero-title-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .ta-hero-control {
    transition: none;
  }
}