/* Official Lady Chica Universe brand system — black velvet, warm gold and ruby crystal. */
:root {
  --lcu-black: #050207;
  --lcu-gold: #f6c85a;
  --lcu-gold-pale: #ffe8a5;
  --lcu-ruby: #ff3f92;
  --lcu-pearl: #fff3ee;
}

.four-page-home {
  --crystal-gold: var(--lcu-gold-pale);
  --crystal-pink: var(--lcu-ruby);
  background:
    radial-gradient(circle at 18% 8%, #9615482b, transparent 29%),
    radial-gradient(circle at 80% 18%, #e1982820, transparent 24%),
    var(--lcu-black);
}

.four-page-home .site-header {
  border-bottom-color: #f6c85a70;
  background: linear-gradient(90deg, #030105f7, #18070ff0 48%, #030105f7);
  box-shadow: 0 12px 38px #000b, 0 1px 20px #ff3f9226;
}

.four-page-home .site-header::after {
  content: '';
  position: absolute;
  right: 4vw;
  bottom: -1px;
  left: 4vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lcu-gold), var(--lcu-ruby), var(--lcu-gold), transparent);
  opacity: .85;
}

.four-page-home .site-header .logo { gap: 13px; }

.four-page-home .crown-mark {
  width: 52px;
  height: 52px;
  border: 2px solid var(--lcu-gold);
  background: radial-gradient(circle at 38% 25%, #fff6, #ff3f9280 28%, #14050dcf 62%);
  box-shadow: inset 0 0 18px #ff80ba55, 0 0 0 3px #050207, 0 0 0 4px #f6c85a59, 0 0 20px #ff3f9240;
  color: var(--lcu-ruby);
  font-size: 1.15rem;
  text-shadow: 0 0 8px #fff, 0 0 15px var(--lcu-ruby);
}

.four-page-home .crown-mark i {
  top: -13px;
  color: var(--lcu-gold);
  text-shadow: 0 0 9px #f6c85a;
}

.four-page-home .logo-copy b {
  color: var(--lcu-gold-pale);
  font-family: 'Great Vibes', 'Snell Roundhand', cursive;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 400;
  line-height: .85;
  letter-spacing: .02em;
  text-transform: none;
  text-shadow: 0 0 7px #fff4, 0 0 13px #f6a92f73;
}

.four-page-home .logo-copy small {
  margin-left: 15%;
  color: var(--lcu-gold-pale);
  letter-spacing: .42em;
}

.lobby-intro {
  border-color: #f6c85a78;
  background: linear-gradient(135deg, rgb(5 2 7 / .78), rgb(51 7 27 / .7));
  box-shadow: 0 18px 42px #000a, inset 0 0 32px #ff3f9212, 0 0 24px #f6c85a10;
}

.compact-directory {
  border-color: #f6c85a91;
  background: linear-gradient(145deg, #17030ed9, #050207ed 68%, #2a0716dd);
  box-shadow: inset 0 0 35px #ff3f9216, 0 25px 70px #000b, 0 0 28px #f6c85a1d;
}

.compact-room-grid a { border-color: #f6c85a3f; }
.compact-room-grid a:hover,
.compact-room-grid a:focus-visible { border-color: var(--lcu-gold); box-shadow: inset 0 0 22px #ff3f921f, 0 10px 28px #000b, 0 0 18px #f6c85a35; }

.social-follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #f6c85a42;
}

.social-follow > span {
  color: var(--lcu-gold-pale);
  font: 600 .58rem/1.2 'DM Sans', sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
}

.social-follow-links {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.social-follow-links a {
  position: relative;
  isolation: isolate;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lcu-gold-pale);
  border-radius: 50%;
  color: var(--lcu-pearl);
  background:
    radial-gradient(circle at 32% 24%, #fff7 0 3%, #fff1 11%, transparent 24%),
    linear-gradient(145deg, #2a1622 0%, #080309 45%, #17050e 100%);
  box-shadow:
    inset 0 0 0 2px #070207,
    inset 0 0 13px #ff3f9230,
    0 0 0 2px #f6c85a66,
    0 6px 15px #000b,
    0 0 12px #ff3f9245;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.social-follow-links a::after {
  content: '✦';
  position: absolute;
  z-index: 2;
  top: -7px;
  right: -4px;
  color: #fff8d5;
  font-size: .65rem;
  line-height: 1;
  opacity: .72;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 5px var(--lcu-gold));
  transform: rotate(12deg) scale(.8);
  transition: opacity .2s ease, transform .2s ease;
}

.social-follow-links a:hover,
.social-follow-links a:focus-visible {
  color: #fff;
  border-color: var(--lcu-gold-pale);
  box-shadow:
    inset 0 0 0 2px #070207,
    inset 0 0 15px #ff3f9252,
    0 0 0 2px #ffe8a59c,
    0 7px 18px #000c,
    0 0 18px #ff3f9275;
  transform: translateY(-2px);
}

.social-follow-links a:hover::after,
.social-follow-links a:focus-visible::after {
  opacity: 1;
  transform: rotate(28deg) scale(1.08);
}

.social-follow-links a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.social-follow-links svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: currentColor;
  filter: drop-shadow(0 0 4px #fff5);
}
.social-follow-links .platform-instagram rect,
.social-follow-links .platform-instagram circle { fill: none; stroke: currentColor; stroke-width: 1.9; }
.social-follow-links svg .social-icon-dot { fill: currentColor; stroke: none; }
.social-follow-links .platform-youtube rect { fill: currentColor; stroke: none; }
.social-follow-links svg .social-icon-cutout { fill: #080309; }

.button.primary {
  color: #16050b;
  background: linear-gradient(120deg, #fff0ac, #f6b62f 46%, #ff68a8 120%);
  box-shadow: 0 12px 35px #e69c2942, inset 0 1px #fff9;
}

.universe-seal {
  border-color: var(--lcu-gold);
  background: radial-gradient(circle at 40% 25%, #8d1645, #10040a 67%);
  box-shadow: 0 0 0 5px #050207cc, 0 0 0 6px #f6c85a80, 0 15px 40px #000b, 0 0 20px #ff3f9248;
}
.universe-seal::before,
.universe-seal::after { color: var(--lcu-gold); }
.universe-seal b { color: var(--lcu-ruby); font-size: 1.85rem; text-shadow: 0 0 10px #fff8, 0 0 16px var(--lcu-ruby); }
.universe-seal span { color: var(--lcu-gold); font-size: .78rem; }

@media (max-width: 640px) {
  .four-page-home .crown-mark { width: 40px; height: 40px; }
  .four-page-home .crown-mark i { top: -11px; }
  .four-page-home .logo-copy b { font-size: 1.2rem; }
  .four-page-home .logo-copy small { font-size: .4rem; letter-spacing: .34em; }
  .social-follow {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .social-follow > span { font-size: .52rem; letter-spacing: .1em; }
  .social-follow-links { gap: 5px; }
}

@media (max-width: 480px) {
  .social-follow > span {
    flex: 1 0 100%;
    text-align: center;
  }

  .social-follow-links {
    width: 100%;
  }
}

@media (pointer: coarse) {
  .social-follow-links a {
    width: 44px;
    height: 44px;
  }
}