/*
 * DJHOUSE landing page — Lộ Bàng Thổ / Roadside Earth
 *
 * Tailwind-compatible design tokens are expressed as CSS custom properties
 * because this production app has no Tailwind compilation step.  The values
 * map directly to utility concepts such as bg, border, ring and shadow.
 */
:root {
  --tw-earth-black: #0b0b0b;
  --tw-earth-black-deep: #000000;
  --tw-earth-surface: rgba(255, 255, 255, .03);
  --tw-earth-surface-hover: rgba(255, 105, 180, .055);
  --tw-earth-line: rgba(255, 255, 255, .10);
  --tw-earth-line-soft: rgba(255, 255, 255, .20);
  --tw-fire-red: #ff4500;
  --tw-earth-gold: #ffd700;
  --tw-neon-purple: #a020f0;
  --tw-hot-pink: #ff69b4;
  --tw-text-main: #ffffff;
  --tw-text-muted: #e0e0e0;
  --tw-text-warm: #f5f5dc;
  --tw-radius-xl: 24px;
  --tw-shadow-fire: 0 16px 42px rgba(0, 0, 0, .46), 0 0 26px rgba(255, 69, 0, .14);
  --tw-shadow-earth: 0 20px 54px rgba(0, 0, 0, .54), 0 0 28px rgba(255, 215, 0, .16), 0 0 42px rgba(160, 32, 240, .12);
}

html,
body {
  background: var(--tw-earth-black-deep) !important;
}

body {
  color: var(--tw-text-main) !important;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 69, 0, .13), transparent 30%),
    radial-gradient(ellipse at 91% 8%, rgba(160, 32, 240, .12), transparent 29%),
    radial-gradient(ellipse at 52% 100%, rgba(255, 215, 0, .065), transparent 38%),
    var(--tw-earth-black) !important;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .014) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}

.shell {
  width: min(1320px, 92vw) !important;
  padding-top: 28px !important;
}

/* Header and visual banner stay quiet so the rooms are the focal point. */
.topbar {
  min-height: 66px;
  border: 1px solid var(--tw-earth-line) !important;
  background: rgba(0, 0, 0, .56) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .35) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
  backdrop-filter: blur(10px) saturate(115%) !important;
}

.topbar > a,
.topbar .account-nav {
  color: var(--tw-text-warm) !important;
  border-color: rgba(255, 255, 255, .15) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}

.topbar > a:hover,
.topbar .account-nav:hover {
  color: #fff !important;
  border-color: rgba(255, 105, 180, .54) !important;
  box-shadow: 0 0 18px rgba(160, 32, 240, .20) !important;
}

.banner3d-frame,
.djh-banner-stage {
  border-radius: var(--tw-radius-xl) !important;
}

.banner3d {
  border-color: rgba(255, 105, 180, .28) !important;
  filter: saturate(1.06) contrast(1.04) brightness(.82) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .56), 0 0 24px rgba(160, 32, 240, .15), 0 0 30px rgba(255, 69, 0, .10) !important;
}

/* Hero: Roadside Earth is grounded black with a restrained fire halo. */
.lobby-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(34px, 5vw, 62px) 24px !important;
  border: 1px solid var(--tw-earth-line) !important;
  border-radius: var(--tw-radius-xl) !important;
  background:
    radial-gradient(ellipse at 50% -26%, rgba(255, 69, 0, .20), transparent 56%),
    radial-gradient(circle at 87% 80%, rgba(160, 32, 240, .12), transparent 33%),
    rgba(255, 255, 255, .025) !important;
  box-shadow: var(--tw-shadow-fire), inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.lobby-hero::before,
.lobby-hero::after {
  animation: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.lobby-hero::before {
  inset: auto -12% -78% !important;
  height: 118% !important;
  border-radius: 50% !important;
  background: repeating-radial-gradient(ellipse at 50% 38%, rgba(255, 215, 0, .14) 0 1px, transparent 2px 28px) !important;
  transform: perspective(760px) rotateX(68deg) !important;
}

.lobby-hero::after {
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(110deg, rgba(255, 69, 0, .05), transparent 38%, rgba(160, 32, 240, .06)) !important;
  transform: none !important;
}

.lobby-hero > * { position: relative; z-index: 1; }

.lobby-hero .brand {
  color: var(--tw-hot-pink) !important;
  background: rgba(160, 32, 240, .10) !important;
  border: 1px solid rgba(255, 105, 180, .34) !important;
  text-shadow: 0 0 16px rgba(255, 105, 180, .42) !important;
}

.lobby-hero h1,
.lobby-hero .rgb-neon-title {
  color: var(--tw-text-main) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--tw-text-main) !important;
  font-family: Orbitron, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: clamp(.015em, .35vw, .07em) !important;
  text-shadow: 0 0 18px rgba(255, 215, 0, .23), 0 0 34px rgba(255, 69, 0, .17), 0 3px 0 rgba(0, 0, 0, .82) !important;
  animation: none !important;
}

.lobby-hero .muted,
.muted,
.feature-note,
#rent .rent-field > span {
  color: var(--tw-text-muted) !important;
}

.lobby-hero .muted::after {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--tw-fire-red), var(--tw-earth-gold), var(--tw-hot-pink), transparent) !important;
  box-shadow: 0 0 14px rgba(255, 69, 0, .35) !important;
}

/* Small stage-light fixtures frame the room lobby headline without competing
   with the text or the existing grounded theme. */
.lobby-hero h1 { position: relative; }

.lobby-hero h1::before,
.lobby-hero h1::after {
  content: "";
  position: absolute;
  top: -30px;
  width: clamp(78px, 10vw, 150px);
  height: 4px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff5f45 30%, #ffe07a 52%, #ff78c9 72%, transparent);
  box-shadow: 0 0 5px rgba(255, 255, 255, .92), 0 0 16px rgba(255, 102, 73, .72), 0 0 32px rgba(215, 77, 255, .45);
  animation: lobby-stage-light 3.8s ease-in-out infinite;
}

.lobby-hero h1::before { left: 3%; transform: rotate(-4deg); }
.lobby-hero h1::after { right: 3%; transform: rotate(4deg); animation-delay: -1.9s; }

@keyframes lobby-stage-light {
  0%, 100% { opacity: .52; filter: brightness(.86); }
  50% { opacity: 1; filter: brightness(1.2); }
}

/* A slow conic sweep keeps the LED border alive while the content surface
   remains a stable, readable dark panel. */
@property --lobby-led-turn {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.lobby-hero {
  border: 2px solid transparent !important;
  background:
    radial-gradient(ellipse at 50% -26%, rgba(255, 69, 0, .20), transparent 56%) padding-box,
    radial-gradient(circle at 87% 80%, rgba(160, 32, 240, .12), transparent 33%) padding-box,
    linear-gradient(110deg, rgba(30, 15, 10, .98), rgba(18, 11, 30, .98)) padding-box,
    conic-gradient(from var(--lobby-led-turn), #ff5b45 0 7%, transparent 13% 29%, #ffd65f 35% 42%, transparent 48% 64%, #ff66c4 70% 77%, transparent 83% 100%) border-box !important;
  box-shadow: var(--tw-shadow-fire), 0 0 12px rgba(255, 112, 73, .20), 0 0 26px rgba(193, 93, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  animation: lobby-led-border 9s linear infinite;
}

@keyframes lobby-led-border {
  to { --lobby-led-turn: 360deg; }
}

/* Room cards: the requested low-noise dark glassmorphism surface. */
#list.lobby .room-card:nth-child(n),
#list.lobby .collection-card:nth-child(n) {
  position: relative;
  min-height: 276px;
  border: 1px solid var(--tw-earth-line) !important;
  border-radius: 20px !important;
  background: var(--tw-earth-surface) !important;
  box-shadow: 0 13px 34px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  transition: border-color .26s ease, background-color .26s ease, box-shadow .26s ease, transform .26s ease !important;
}

#list.lobby .room-card:nth-child(n):hover,
#list.lobby .collection-card:nth-child(n):hover {
  z-index: 1;
  border-color: rgba(255, 215, 0, .66) !important;
  background: var(--tw-earth-surface-hover) !important;
  box-shadow: var(--tw-shadow-earth), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  transform: translateY(-5px) !important;
}

#list.lobby .room-card > .eyebrow {
  color: var(--tw-earth-gold) !important;
  text-shadow: 0 0 12px rgba(255, 215, 0, .18) !important;
}

#list.lobby .room-card > .eyebrow::after {
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--tw-fire-red), var(--tw-earth-gold), transparent) !important;
  box-shadow: 0 0 10px rgba(255, 69, 0, .32) !important;
}

#list.lobby .room-card h2,
#list.lobby .collection-card h2,
#list.lobby .room-card .rgb-neon-title {
  color: var(--tw-text-main) !important;
  background: none !important;
  -webkit-text-fill-color: var(--tw-text-main) !important;
  text-shadow: 0 0 13px rgba(160, 32, 240, .18) !important;
}

#list.lobby .room-owner-label,
#list.lobby .room-card:nth-child(n) .room-owner-label,
#list.lobby .collection-card:nth-child(n) .room-owner-label {
  color: var(--tw-text-warm) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: none !important;
}

#list.lobby .room-access-label { color: var(--tw-text-muted) !important; text-shadow: none !important; }
#list.lobby .room-access-open { color: #ffdca1 !important; }
#list.lobby .room-access-private { color: #ffb2d2 !important; }

#list.lobby .room-status {
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .025) !important;
  color: var(--tw-text-muted) !important;
}

#list.lobby .lamp-pending,
#list.lobby .lamp-live {
  background: var(--tw-hot-pink) !important;
  box-shadow: 0 0 12px rgba(255, 105, 180, .76) !important;
}

/* Primary action: Fire into Earth, sharp white copy, no muddy text. */
#list.lobby .room-card .btn,
#rent .btn {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 0, .48) !important;
  border-radius: 12px !important;
  background: linear-gradient(to right, var(--tw-fire-red), var(--tw-earth-gold)) !important;
  color: #fff !important;
  font-family: Orbitron, Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 850 !important;
  letter-spacing: .055em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
  box-shadow: 0 6px 0 rgba(118, 35, 0, .80), 0 13px 26px rgba(255, 69, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}

#list.lobby .room-card .btn:hover,
#rent .btn:hover {
  border-color: #fff1a6 !important;
  color: #fff !important;
  filter: brightness(1.08) saturate(1.10) !important;
  box-shadow: 0 8px 0 rgba(118, 35, 0, .82), 0 17px 34px rgba(255, 69, 0, .30), 0 0 24px rgba(160, 32, 240, .16) !important;
}

/* Supporting cards keep the same glass language without dotted gold lines. */
.hero:not(.lobby-hero),
.feature-chips span {
  border-color: var(--tw-earth-line) !important;
  background: var(--tw-earth-surface) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
}

.lobby-section-title,
.hero:not(.lobby-hero) h2 {
  color: var(--tw-text-main) !important;
  text-shadow: 0 0 18px rgba(255, 215, 0, .16) !important;
}

.lobby-section-title::after {
  background: linear-gradient(90deg, transparent, var(--tw-fire-red), var(--tw-earth-gold), transparent) !important;
  box-shadow: 0 0 12px rgba(255, 69, 0, .28) !important;
}

/* Booking fields stay minimal until interaction. */
#rent :is(input, select, textarea) {
  color: #fff !important;
  border: 1px solid var(--tw-earth-line-soft) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, .44) !important;
  box-shadow: none !important;
}

#rent :is(input, select, textarea)::placeholder { color: rgba(224, 224, 224, .58) !important; }

#rent :is(input, select, textarea):focus {
  border-color: var(--tw-fire-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 69, 0, .15), 0 0 18px rgba(255, 69, 0, .12) !important;
}

.site-footer {
  border-top-color: var(--tw-earth-line) !important;
  color: var(--tw-text-muted) !important;
}

.site-footer .footer-brand,
.site-footer h3 { color: var(--tw-earth-gold) !important; }

.site-footer a { color: var(--tw-text-warm) !important; }

/* The essential-cookie banner is mounted after page load, so it needs a
   scoped important override to stay inside this landing page's palette. */
.dj-cookie-banner {
  color: var(--tw-text-main) !important;
  border-color: rgba(255, 255, 255, .14) !important;
  background: linear-gradient(135deg, rgba(18, 12, 10, .97), rgba(18, 11, 24, .97)) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .60), 0 0 18px rgba(160, 32, 240, .13) !important;
}
.dj-cookie-banner .dj-cookie-title { color: var(--tw-text-warm) !important; }
.dj-cookie-banner .dj-cookie-copy { color: var(--tw-text-muted) !important; }
.dj-cookie-banner .dj-cookie-link {
  color: var(--tw-text-warm) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .035) !important;
}
.dj-cookie-banner .dj-cookie-button--primary {
  border-color: rgba(255, 215, 0, .50) !important;
  background: linear-gradient(to right, var(--tw-fire-red), var(--tw-earth-gold)) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72) !important;
}

@media (max-width: 680px) {
  .shell { width: min(94vw, 560px) !important; padding-top: 14px !important; }
  .lobby-hero { padding: 32px 16px !important; }
  .lobby-hero h1 { font-size: clamp(25px, 7vw, 34px) !important; line-height: 1.18 !important; }
  #list.lobby .room-card:nth-child(n), #list.lobby .collection-card:nth-child(n) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lobby-hero { animation: none; }

  .lobby-hero h1::before,
  .lobby-hero h1::after { animation: none; }

  #list.lobby .room-card:nth-child(n),
  #list.lobby .collection-card:nth-child(n) { transition: none !important; }
}