/* Cinema Universe: a visual layer over the existing product behavior. */
:root {
  --cu-void: #08090c;
  --cu-ink: #101218;
  --cu-panel: rgba(19, 22, 29, 0.88);
  --cu-panel-strong: rgba(12, 14, 19, 0.96);
  --cu-line: rgba(255, 255, 255, 0.1);
  --cu-muted: #98a1af;
  --cu-emerald: #35d07f;
  --cu-amber: #ff9f1c;
  --cu-ice: #55c5ff;
  --cu-danger: #ff5f61;
  --cu-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

html,
body {
  background: var(--cu-void) !important;
  color: #f6f7fb;
}

body {
  min-height: 100vh;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
}

#cinema-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 560ms ease;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(85, 197, 255, 0.14), transparent 45%),
    linear-gradient(180deg, #0b0d12 0%, #08090c 58%, #050608 100%);
}

#cinema-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

body.cinema-active #cinema-stage { opacity: 1; }
body.cinema-room-active #cinema-stage { opacity: 0.72; }
body.cinema-payment-active #cinema-stage { opacity: 0.45; }
body.cinema-auth-active #cinema-stage { opacity: 0.78; }

#app-root,
#loading-screen,
.legal-page,
.legal-nav {
  position: relative;
  z-index: 1;
}

.view,
.public-content-view {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.view::before,
.public-content-view::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(115deg, rgba(8,9,12,0.94), rgba(8,9,12,0.65) 50%, rgba(8,9,12,0.9));
}

/* Shared product chrome */
.card,
.film-store-wrapper,
#chat-popup,
#vcall-float,
.custom-modal-content,
.modal-content,
.admin-panel,
.premium-card {
  background: var(--cu-panel) !important;
  border: 1px solid var(--cu-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--cu-shadow);
  backdrop-filter: blur(18px) saturate(125%);
}

.card {
  position: relative;
  overflow: hidden;
}

.card::after,
.premium-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(85,197,255,0.48), transparent);
  pointer-events: none;
}

.btn,
.icon-btn,
.mob-nav-btn,
.public-primary,
.public-login-link {
  border-radius: 7px !important;
  transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.btn:hover:not(:disabled),
.icon-btn:hover:not(:disabled),
.public-primary:hover,
.public-login-link:hover {
  transform: translateY(-2px);
}

.btn-primary,
.public-primary {
  color: #07100d !important;
  background: var(--cu-emerald) !important;
  border-color: var(--cu-emerald) !important;
  box-shadow: 0 10px 26px rgba(53, 208, 127, 0.22) !important;
}

.btn-outline,
.btn-secondary {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.input,
select.input,
textarea.input {
  color: #f6f7fb !important;
  background: rgba(4, 6, 9, 0.72) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.input:focus,
select.input:focus,
textarea.input:focus {
  border-color: var(--cu-ice) !important;
  box-shadow: 0 0 0 3px rgba(85,197,255,0.14) !important;
}

.gradient-text,
.legal-nav-brand {
  background: linear-gradient(110deg, #ffffff 15%, var(--cu-ice) 55%, var(--cu-emerald) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Public entry and authentication */
.public-content-view,
#auth-view,
#setup-profile-view,
#payment-view {
  min-height: 100dvh;
}

.public-nav,
.legal-nav,
.dash-top-bar,
.mob-top-bar,
#room-view .top-bar {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(8,9,12,0.68) !important;
  backdrop-filter: blur(18px) saturate(130%);
}

.public-hero {
  min-height: min(780px, 90dvh);
  align-items: end;
  padding-block: clamp(7rem, 15vh, 11rem) 5rem;
}

.public-hero-copy {
  max-width: 690px;
}

.public-hero-copy h1,
#dashboard-view .header-center h1,
#auth-view h1 {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

.public-kicker,
.cinema-kicker {
  color: var(--cu-emerald) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

#auth-view .header-center,
#setup-profile-view .card,
#payment-view > .card,
#payment-view .max-w-md {
  position: relative;
  z-index: 1;
}

#auth-view .header-center::before {
  content: '';
  position: absolute;
  inset: -4rem -5rem;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(85,197,255,0.12), transparent);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}

.auth-orb { display: none !important; }

/* Payment theatre */
#payment-view {
  padding: 7rem 1.25rem 3rem !important;
}

#payment-view .card-grid {
  position: relative;
  z-index: 1;
}

#payment-view .premium-card {
  min-height: 360px;
  background: linear-gradient(160deg, rgba(20,24,31,0.93), rgba(10,12,17,0.94)) !important;
}

#payment-view .premium-card.border-orange {
  border-color: rgba(255,159,28,0.65) !important;
  box-shadow: 0 24px 65px rgba(255,159,28,0.12);
}

/* Dashboard command deck */
#dashboard-view {
  display: block !important;
  padding: 6.5rem clamp(1rem, 5vw, 5rem) 4rem;
  min-height: 100dvh !important;
}

#dashboard-view .header-center {
  max-width: 1180px;
  margin: 0 auto 2rem !important;
  padding: 1.4rem 0;
  text-align: left !important;
}

#dashboard-view .header-center > img {
  float: left;
  width: 54px !important;
  height: 54px !important;
  margin: 0 1rem 0 0 !important;
  border-radius: 8px !important;
}

#dashboard-view .header-center > h1 {
  font-size: clamp(1.8rem, 4vw, 3.25rem) !important;
  margin-bottom: 0.15rem;
}

#dashboard-view .header-center > .subtitle {
  color: var(--cu-muted) !important;
}

#dashboard-view .card-grid {
  position: relative;
  z-index: 1;
  max-width: 1180px !important;
  gap: clamp(0.8rem, 2vw, 1.5rem) !important;
}

#dashboard-view .icon-box {
  border-radius: 7px !important;
  background: rgba(85,197,255,0.1) !important;
  color: var(--cu-ice) !important;
}

#dashboard-view #my-room-code {
  color: var(--cu-ice) !important;
  text-shadow: 0 0 16px rgba(85,197,255,0.28);
}

.dash-top-bar {
  position: fixed !important;
  inset: 0 0 auto 0;
  z-index: 30;
  padding: 0.75rem clamp(1rem, 5vw, 5rem) !important;
}

.dash-user-pill {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(19,22,29,0.8) !important;
}

/* Shared watch room */
#room-view {
  background: transparent !important;
}

#room-view::before {
  background:
    linear-gradient(180deg, rgba(5,7,10,0.76), rgba(5,7,10,0.22) 42%, rgba(5,7,10,0.82)),
    radial-gradient(ellipse at 50% 20%, rgba(85,197,255,0.12), transparent 55%);
}

#room-view .top-bar {
  min-height: 72px;
  padding-inline: clamp(0.8rem, 2.6vw, 2.25rem) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

#room-view #room-name-display {
  letter-spacing: 0 !important;
}

#room-view #room-id-display {
  color: var(--cu-emerald) !important;
}

#room-view-inner {
  gap: 1rem;
  padding: 0 clamp(0.75rem, 2vw, 2rem) 1rem;
}

#video-container {
  overflow: hidden;
  background: rgba(2,3,6,0.74) !important;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 25px 80px rgba(0,0,0,0.42);
}

#custom-player-wrapper,
#youtube-player-container,
#main-video {
  border-radius: 0 !important;
}

#room-suggestions-container,
#chat-popup {
  border-color: rgba(255,255,255,0.1) !important;
}

#chat-popup {
  background: rgba(10,13,18,0.93) !important;
}

#btn-video-call {
  background: rgba(53,208,127,0.12) !important;
  color: var(--cu-emerald) !important;
  border-color: rgba(53,208,127,0.38) !important;
}

#btn-video-call.vcall-active {
  background: rgba(255,95,97,0.16) !important;
  color: var(--cu-danger) !important;
  border-color: rgba(255,95,97,0.45) !important;
}

#btn-src-rented,
#ad-instruction-banner button {
  color: var(--cu-amber) !important;
  border-color: rgba(255,159,28,0.52) !important;
  background: linear-gradient(135deg, rgba(83,45,8,0.68), rgba(12,18,24,0.94)) !important;
}

.purple-badge,
.mob-plan-price.purple,
.text-purple-400,
.text-purple-500 {
  color: var(--cu-ice) !important;
}

#vcall-float {
  border-color: rgba(85,197,255,0.42) !important;
  background: rgba(10,13,18,0.92) !important;
  box-shadow: 0 28px 85px rgba(0,0,0,0.56), 0 0 0 1px rgba(85,197,255,0.07);
}

#vcall-float-status {
  color: var(--cu-emerald) !important;
  background: rgba(5,8,11,0.82) !important;
}

/* Film, profile, and operational views */
.film-card,
.admin-film-row,
.leaderboard-row,
.mob-settings-item,
.mob-profile-card {
  border-color: rgba(255,255,255,0.1) !important;
  background: rgba(17,20,27,0.78) !important;
  border-radius: 8px !important;
}

.film-card {
  overflow: hidden;
}

.film-card:hover {
  transform: translateY(-5px);
  border-color: rgba(85,197,255,0.46) !important;
}

#admin-view {
  padding: 6rem clamp(1rem, 4vw, 4rem) 3rem;
}

#admin-view table {
  background: rgba(4,6,9,0.55);
  border: 1px solid rgba(255,255,255,0.08);
}

/* Legal pages deliberately stay calm and readable. */
.legal-page {
  max-width: 840px !important;
  margin: 0 auto !important;
  padding: 7rem 1.25rem 4rem !important;
  color: #d8dce5 !important;
}

.legal-page h1,
.legal-page h2 { color: #fff !important; letter-spacing: 0 !important; }
.legal-page a { color: var(--cu-ice) !important; }

/* Motion hooks populated by cinema-universe.js. */
[data-cinema-enter] { will-change: transform, opacity; }

@media (max-width: 760px) {
  #dashboard-view {
    padding: 4.25rem 0.8rem 6.5rem;
  }

  #dashboard-view .header-center {
    padding: 0.6rem 0.25rem 1.2rem;
  }

  #dashboard-view .header-center > img {
    width: 42px !important;
    height: 42px !important;
  }

  #room-view .top-bar { min-height: 58px; }
  #room-view-inner { padding: 0; gap: 0; }
  #video-container { border-inline: 0; }

  .card,
  .premium-card { box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  #cinema-stage { display: none; }
}