/* ============================================
   EAU DE PLAY — "AFRO PULSE" REDESIGN LAYER
   Load this AFTER variables/global/layout/public.css
   on every page. It restyles shared components and
   adds the new tribal-gold visual language without
   touching the existing markup or JS.
   ============================================ */

/* ---------- decorative tribal border frame ---------- */
body {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-image: repeating-linear-gradient(
      -45deg,
      var(--color-primary) 0 6px,
      transparent 6px 14px
    ) 10;
}

@media (max-width: 900px) {
  body { border-left-width: 5px; border-right-width: 5px; }
}

/* ---------- global type polish ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  letter-spacing: 0.01em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--spacing-sm);
}

/* ---------- navbar ---------- */
.navbar {
  background: rgba(10, 8, 6, 0.94);
  border-bottom: 1px solid var(--color-border);
}

.desktop-nav a {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: var(--color-primary-light);
}

.navbar-brand .brand-logo {
  border-radius: 50%;
  border: 1px solid var(--color-border);
  padding: 4px;
  background: var(--color-background);
}

.navbar-right {
  gap: var(--spacing-md);
}

.navbar-nav a.cart-link,
.navbar-nav a.auth-link {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.navbar-nav a.cart-link:hover,
.navbar-nav a.auth-link:hover {
  color: #1a1408;
  opacity: 0.9;
}

.navbar-nav a.account-link {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-full);
}

.navbar-nav a.account-link:hover {
  color: var(--color-primary-light);
  border-color: var(--color-primary);
}

.mobile-nav a.cart-link,
.mobile-nav a.auth-link,
.mobile-nav a.account-link {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ---------- buttons, site-wide ---------- */
button, .btn {
  font-family: var(--font-sans);
  border-radius: var(--radius-full);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary-light);
}

.btn-secondary:hover {
  background: rgba(201, 161, 90, 0.12);
}

/* ---------- hero / AFRO PULSE banner ---------- */
.hero {
  min-height: 60vh;
  background: linear-gradient(180deg, rgba(10,8,6,0.55), rgba(10,8,6,0.55)),
              url("../assets/images/IMG_3177.JPG");
}

.hero::before { display: none; }

.afro-home-banner .afro-banner-inner {
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
}

.afro-home-banner .afro-banner-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.45) 45%, rgba(10,8,6,0.15) 100%);
  pointer-events: none;
}

.afro-home-banner-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  text-align: left;
  margin: 0;
  padding-left: var(--spacing-2xl);
}

.afro-home-banner h2 {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.95;
  color: #fff;
  text-transform: uppercase;
}

.afro-home-banner p {
  color: var(--color-text-light);
  max-width: 480px;
  font-size: var(--font-size-base);
}

.afro-home-banner .eyebrow {
  color: var(--color-primary-light);
}

.hero-cta-group {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.afro-home-banner .hero-cta-group .btn:first-child {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #1a1408;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
}

.afro-home-banner .hero-cta-group .btn.btn-secondary {
  background: transparent;
  border: 1px solid var(--color-text-light);
  color: #fff;
}

@media (max-width: 768px) {
  .afro-home-banner-content { padding-left: var(--spacing-lg); text-align: left; }
}

/* ---------- "MORE THAN AN EVENT" movement section ---------- */
.movement-section {
  padding: var(--spacing-4xl) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.movement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.movement-text h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-transform: uppercase;
  line-height: 1.05;
}

.movement-text p {
  max-width: 44ch;
}

.movement-frame {
  position: relative;
  width: min(420px, 90%);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  padding: 18px;
  border: 1px dashed var(--color-primary);
}

.movement-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--color-background);
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

@media (max-width: 860px) {
  .movement-grid { grid-template-columns: 1fr; text-align: center; }
  .movement-text p { margin-left: auto; margin-right: auto; }
}

/* ---------- "WHAT'S NEXT" events section ---------- */
.events-next-section {
  padding: var(--spacing-4xl) 0;
}

.events-next-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-2xl);
}

.events-next-header h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  text-transform: uppercase;
}

.events-next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

@media (max-width: 900px) {
  .events-next-grid { grid-template-columns: 1fr; }
}

.event-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-background-light);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.event-card-image {
  position: relative;
  height: 220px;
}

.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card-tag {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--color-primary);
  color: #1a1408;
  font-family: var(--font-sans);
  font-size: var(--font-size-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
}

.event-card-body {
  padding: var(--spacing-lg);
}

.event-card-body h3 {
  font-size: var(--font-size-xl);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

.event-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.event-card-body .btn {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: var(--font-size-xs);
}

/* ---------- Instagram / gallery strip ---------- */
.instagram-section {
  padding: var(--spacing-4xl) 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  max-width: 1200px;
  margin: var(--spacing-2xl) auto 0;
  padding: 0 var(--spacing-xl);
}

@media (max-width: 900px) {
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

.instagram-grid a {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}

.instagram-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.instagram-grid a:hover img {
  transform: scale(1.06);
}

/* ---------- about teaser ---------- */
.about-teaser {
  background: var(--color-background-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---------- footer ---------- */
/* Real markup from components.js: <footer class="site-footer"><div class="site-footer-inner container">
   <nav class="footer-links">...</nav></div></footer> */
.site-footer {
  background: #060504;
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.site-footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.site-footer-inner::before {
  content: 'EAU DEY PLAY';
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: var(--font-size-xl);
  letter-spacing: 0.08em;
  color: var(--color-primary-light);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xl);
}

.footer-links a {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: var(--color-primary-light);
  border-bottom-color: var(--color-primary);
}

.site-footer-inner::after {
  content: '© 2026 Eau De Play Inc. All rights reserved.';
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

/* ============================================
   INNER PAGES: About / Services / Shop
   ============================================ */

/* ---------- shared page-hero banner ---------- */
.page-hero {
  position: relative;
  padding: var(--spacing-4xl) var(--spacing-lg) var(--spacing-3xl);
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201,161,90,0.14), transparent 60%);
  pointer-events: none;
}

.page-hero .eyebrow {
  position: relative;
}

.page-hero h1 {
  position: relative;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--spacing-sm);
}

.page-hero p {
  position: relative;
  max-width: 56ch;
  margin: 0 auto;
  color: var(--color-text-light);
}

.page-hero-rule {
  width: 72px;
  height: 2px;
  margin: var(--spacing-lg) auto 0;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

/* ---------- about page ---------- */
.about-section {
  padding: var(--spacing-4xl) var(--spacing-lg);
}

.about-image {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
}

.about-text h3 {
  color: var(--color-primary-light);
  text-transform: uppercase;
  font-size: var(--font-size-lg);
  letter-spacing: 0.04em;
}

.about-text ul {
  list-style: none;
  margin-left: 0;
  display: grid;
  gap: var(--spacing-sm);
}

.about-text ul li {
  padding-left: 1.4rem;
  position: relative;
}

.about-text ul li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.65rem;
  color: var(--color-primary);
}

.about-text ul li strong {
  color: var(--color-primary-light);
}

/* ---------- services & shop cards: fix low-contrast text ---------- */
.service-card-description,
.product-card-description {
  color: var(--color-text-light) !important;
}

.service-card-title,
.product-card-title {
  font-family: var(--font-serif);
  color: var(--color-text) !important;
}

.service-card-price,
.product-card-price {
  color: var(--color-primary-light) !important;
}

.service-card,
.product-card {
  background: var(--color-background-light);
  border-color: var(--color-border);
}

.service-card:hover,
.product-card:hover {
  border-color: var(--color-primary);
}

.services-heading,
.shop-heading {
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 2.75rem);
}

/* empty-state placeholder while JS populates grids */
#services-container:empty::after,
#products-container:empty::after {
  content: 'Loading…';
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  padding: var(--spacing-2xl) 0;
}

/* ============================================
   AUTH / BOOKING / CHECKOUT / SUCCESS PAGES
   ============================================ */

.auth-switch.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #1a1408;
}

.auth-top h1,
.booking-intro h1,
.checkout-header h1 {
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.price-badge {
  color: var(--color-primary-light);
  font-family: var(--font-serif);
}

.checkout-section h3,
.checkout-section h4 {
  color: var(--color-primary-light);
}

.payment-method input[type="radio"]:checked + label {
  border-color: var(--color-primary);
}

.btn-place-order {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #1a1408;
}

.success-icon {
  color: var(--color-primary-light);
}

.success-box h2 {
  text-transform: uppercase;
}

.order-number,
.booking-summary {
  border: 1px solid var(--color-border);
  background: var(--color-background-light);
}

/* generic "notice" block used by book.js when signed out */
.notice {
  max-width: 560px;
  margin: var(--spacing-4xl) auto;
  padding: var(--spacing-2xl);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background-light);
}

/* fallback navbar brand text used on account.html if JS logo fails to load */
.brand-line {
  display: block;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
}

.brand-line.brand-play {
  color: var(--color-primary-light);
}

/* account dashboard */
.profile-box, .bookings-box, .purchases-box,
.upcoming-services-box, .booking-info-box {
  border-color: var(--color-border) !important;
}

/* ============================================
   CONTACT PAGE
   ============================================ */
.contact-header {
  text-align: center;
}

.contact-header h1 {
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.contact-sidebar,
.contact-card {
  background: var(--color-background-light);
  border-color: var(--color-border);
}

.contact-info-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

#tally-embed {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border) !important;
}

/* ============================================
   SILENT DISCO PAGE — gold-toned instead of neon
   ============================================ */
.channel-pill.active,
.channel-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  background: rgba(201, 161, 90, 0.12);
}

.stage-pod {
  border-color: var(--color-primary);
}

.stage-pod::before {
  background: radial-gradient(circle at 30% 30%, rgba(232,199,126,0.35), transparent 42%);
}

.club-logo-glow {
  background: radial-gradient(circle, rgba(201,161,90,0.55), transparent 65%) !important;
}

.club-logo-mark {
  color: var(--color-primary-light) !important;
}

.silence-card h2,
.ticket-placeholder h2 {
  color: var(--color-primary-light);
  text-transform: uppercase;
}

.club-booking-card,
.club-review-card {
  background: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.club-rating button {
  color: var(--color-text-muted);
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

.club-rating button.selected,
.club-rating button:hover {
  color: var(--color-primary);
}

/* ---------- silent disco homepage banner ---------- */
.silent-disco-banner .eyebrow {
  color: var(--color-primary-light);
}

.silent-disco-banner p {
  max-width: 46ch;
  margin: 0 auto var(--spacing-lg);
  color: var(--color-text-light);
}

.silent-disco-banner h2 {
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 2.75rem);
}

/* ---------- defensive fallback for the silent disco banner ---------- */
/* If assets/images/SILENTDISCO-1.jpg fails to load (wrong path, wrong
   case, file missing) there was no solid color behind the overlay
   gradient, so whatever sat behind the section could show through
   instead of a clean dark background. This guarantees it's always dark. */
.silent-disco-banner {
  background-color: var(--color-background-light);
    background: linear-gradient(180deg, rgba(7,8,20,0.72), rgba(7,8,20,0.72)),
             url("../assets/images/SILENTDISCO-1.jpg" !important);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 
}

/* ---------- fix: homepage body background was gold, not black ---------- */
/* public.css sets body.home-background { background-color: var(--color-primary) },
   and public-app.js adds that class only on index.html — making the entire
   homepage's body background solid gold instead of the site's near-black,
   and swallowing the decorative gold border frame in the process. */
body.home-background {
  background-color: var(--color-background);
  color: var(--color-text);
}

/* ---------- fix: avatar builder "selects" look like plain text ---------- */
/* account.js swaps the native <select> for a custom <span class="select-display">
   once JS runs, but that span's border was only rgba(255,255,255,0.12) —
   nearly invisible against the dark theme. Give it a real, visible,
   themed border + background so it reads as an interactive control. */
.avatar-builder-controls .select-display {
  background: var(--color-background-light) !important;
  border: 1px solid var(--color-primary) !important;
  color: var(--color-text) !important;
}

.avatar-builder-controls .select-wrapper:hover .select-display,
.avatar-builder-controls select:focus + .select-display {
  border-color: var(--color-primary);
}

.avatar-builder-controls .select-wrapper::after {
  border-right-color: var(--color-primary-light);
  border-bottom-color: var(--color-primary-light);
}

.avatar-builder-controls select {
  background: var(--color-background-light) !important;
  border-color: var(--color-border) !important;
}

/* ============================================
   AVATAR BUILDER — full-body interactive preview
   ============================================ */

/* Wider, more rounded select controls (was min-width 160px / radius 10px) */
.avatar-builder-row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: var(--spacing-md);
}

.avatar-builder-controls .select-wrapper {
  width: 100%;
  display: block !important;
}

.avatar-builder-controls .select-display {
  width: 100%;
  min-width: unset;
  padding: 0.9rem 2.4rem 0.9rem 1.1rem !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.avatar-builder-controls .select-wrapper:hover .select-display {
  background: rgba(201, 161, 90, 0.08) !important;
}

/* Main builder preview: was a small 140px circle sized for a bust.
   Give it a tall portrait frame that fits a full-body figure. */
#avatar-preview.avatar-preview {
  width: min(280px, 100%);
  height: min(480px, 70vh);
  aspect-ratio: 300 / 500;
  border-radius: var(--radius-lg);
  margin: 0 auto var(--spacing-xl);
  background: radial-gradient(circle at 50% 20%, rgba(201,161,90,0.10), transparent 60%), var(--color-background-light);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

#avatar-preview.avatar-preview svg {
  display: block;
}

/* Hover/focus feedback on each clickable body part */
#avatar-preview [id^="avatar-hit-"] {
  transition: opacity 0.15s ease;
  outline: none;
}

#avatar-preview [id^="avatar-hit-"]:hover,
#avatar-preview [id^="avatar-hit-"]:focus {
  opacity: 0.72;
}

#avatar-preview [id^="avatar-hit-"]:hover::after {
  content: '';
}

.avatar-note {
  display: block;
  text-align: center;
  margin-top: var(--spacing-sm);
}

/* ============================================
   WALKABLE CLUB FLOOR (js/club-walk.js)
   ============================================ */
.club-walk-wrapper {
  max-width: 900px;
  margin: var(--spacing-3xl) auto 0;
  text-align: center;
}

.club-walk-wrapper h2 {
  text-transform: uppercase;
  margin-bottom: var(--spacing-lg);
}

.club-walk-floor {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: radial-gradient(circle at 50% 20%, rgba(201,161,90,0.10), transparent 65%), var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
}

.club-walk-zone {
  position: absolute;
  border: 1px dashed rgba(201, 161, 90, 0.35);
  border-radius: var(--radius-md);
  background: rgba(201, 161, 90, 0.04);
  pointer-events: none;
}

.club-walk-zone-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: var(--font-sans);
  font-size: var(--font-size-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.club-walk-obstacle {
  position: absolute;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.club-walk-avatar {
  position: absolute;
  width: 6.5%;
  height: 12%;
  transform: translate(-50%, -100%);
  transition: left 0.05s linear, top 0.05s linear;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}

.club-walk-avatar svg { width: 100%; height: 100%; display: block; }

.club-walk-avatar.is-walking { animation: club-walk-bob 0.4s ease-in-out infinite; }
.club-walk-avatar.is-dancing { animation: club-walk-dance 0.6s ease-in-out infinite; }
.club-walk-avatar.is-sitting { transform: translate(-50%, -70%) scale(0.8); }

@keyframes club-walk-bob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -4px; }
}

@keyframes club-walk-dance {
  0%, 100% { transform: translate(-50%, -100%) rotate(-4deg); }
  50% { transform: translate(-50%, -100%) rotate(4deg); }
}

.club-walk-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  flex-wrap: wrap;
}

.club-walk-hud-zone {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-light);
}

.club-walk-help {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.club-walk-toast {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translate(-50%, 10px);
  background: var(--color-background);
  border: 1px solid var(--color-primary);
  color: var(--color-text);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.club-walk-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Remote (other players') avatars on the club floor — same figure
   rendering as your own, dimmed slightly so your own avatar stays the
   clear visual focus. */
.club-walk-avatar.is-remote {
  opacity: 0.82;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)) saturate(0.9);
}

/* ============================================
   READY PLAYER ME 3D AVATAR — modal + preview
   ============================================ */
.rpm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 4, 0.82);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.rpm-modal {
  position: relative;
  width: min(900px, 100%);
  height: min(700px, 90vh);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.rpm-modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.rpm-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-text);
  cursor: pointer;
  font-size: 1rem;
}

.rpm-modal-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light);
}

.avatar-3d-section {
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
}

.avatar-3d-section h3 {
  color: var(--color-primary-light);
  text-transform: uppercase;
  font-size: var(--font-size-lg);
}

.avatar-3d-preview {
  width: min(280px, 100%);
  height: 380px;
  margin: var(--spacing-lg) auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-background-light);
  overflow: hidden;
}

.avatar-3d-loading,
.avatar-3d-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.avatar-3d-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-xxs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  margin-left: 0.5rem;
}

/* 3D-avatar players on the club floor render as an image (Ready Player Me
   snapshot) instead of inline SVG. */
.club-walk-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ---------- clickable movement-frame image cycler (homepage) ---------- */
.movement-frame {
  cursor: pointer;
}

.movement-frame:hover {
  filter: brightness(1.06);
}

.movement-frame:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
}

.movement-frame img {
  transition: opacity 0.18s ease;
}

.movement-frame img.is-swapping {
  opacity: 0;
}