/*
 FISTY BUILD 25 WEB UI
 Visual layer only.
 No room, auth, invite, playback, LiveKit, Step In,
 browser, shopping or backend behavior is changed.
*/

:root{
  --f25-bg:#050507;
  --f25-panel:#0d0d13;
  --f25-panel2:#12121a;
  --f25-line:rgba(255,255,255,.10);
  --f25-line-hot:rgba(229,46,255,.40);
  --f25-text:#ffffff;
  --f25-muted:#9696a8;
  --f25-pink:#ff2b8a;
  --f25-purple:#9b5cff;
  --f25-blue:#36a8ff;
  --f25-cyan:#35e1ff;
  --f25-radius:22px;
  --f25-radius-sm:15px;
  --f25-glow:
    0 0 28px rgba(155,92,255,.14),
    0 0 52px rgba(255,43,138,.08);
}

html{
  background:var(--f25-bg);
}

body{
  background:
    radial-gradient(circle at 8% -10%,rgba(155,92,255,.14),transparent 28%),
    radial-gradient(circle at 100% 12%,rgba(54,168,255,.10),transparent 28%),
    var(--f25-bg)!important;
  color:var(--f25-text);
  -webkit-font-smoothing:antialiased;
}

body,
button,
input,
textarea,
select{
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

/* ---------- global surfaces ---------- */

.screen{
  background:transparent;
}

.card,
.panel,
.sheet,
.modal,
.dialog,
.watchDock,
.roomInteractionDeck,
.megaHostPanel,
.personaSheet,
.playlistSheet{
  border-color:var(--f25-line)!important;
}

.card,
.panel,
.watchDock,
.roomInteractionDeck{
  background:
    linear-gradient(
      145deg,
      rgba(20,20,29,.94),
      rgba(8,8,12,.97)
    )!important;
  box-shadow:var(--f25-glow);
}

.sheet{
  background:
    linear-gradient(
      180deg,
      rgba(18,18,27,.985),
      rgba(6,6,10,.995)
    )!important;
  border-radius:26px 26px 0 0!important;
  box-shadow:
    0 -20px 60px rgba(0,0,0,.56),
    0 0 40px rgba(155,92,255,.10)!important;
}

.sheetHead{
  position:sticky;
  top:0;
  z-index:3;
  background:
    linear-gradient(
      180deg,
      rgba(16,16,24,.98),
      rgba(16,16,24,.88),
      transparent
    );
  backdrop-filter:blur(18px);
}

.sheetHead h3{
  letter-spacing:-.025em;
}

/* ---------- buttons ---------- */

button,
.btn{
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    opacity .16s ease;
}

button:active,
.btn:active{
  transform:scale(.97);
}

.btn.hot,
button.hot,
.f83PrimaryTransport{
  background:
    linear-gradient(
      135deg,
      var(--f25-pink),
      var(--f25-purple)
    )!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:
    0 8px 24px rgba(255,43,138,.22),
    0 0 24px rgba(155,92,255,.16)!important;
}

.btn:not(.hot),
.sheet button,
.roomInteractionDeck button{
  border-color:var(--f25-line)!important;
}

/* ---------- home / discovery ---------- */

.f84FeatureCard{
  position:relative;
  overflow:hidden;
  border-radius:24px!important;
  border:1px solid var(--f25-line)!important;
  background:#0b0b11!important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.34),
    0 0 30px rgba(155,92,255,.08);
  transform:translateZ(0);
}

.f84FeatureCard:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      130deg,
      rgba(255,255,255,.06),
      transparent 32%,
      transparent 70%,
      rgba(155,92,255,.08)
    );
  z-index:1;
}

.f84FeatureCard img{
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

.f84FeatureCard:hover img{
  transform:scale(1.035);
}

.f84FeatureText{
  position:relative;
  z-index:2;
}

.f84FeatureText b{
  font-size:clamp(16px,2vw,22px)!important;
  letter-spacing:-.035em;
}

.f84FeatureText small{
  color:#b3b3c2!important;
}

/* ---------- room ---------- */

#room{
  background:
    radial-gradient(circle at 50% 0,rgba(122,63,255,.10),transparent 35%),
    #050507!important;
}

.roomHead{
  position:relative;
  z-index:30;
  backdrop-filter:blur(18px);
}

.roomTitle{
  font-weight:900!important;
  letter-spacing:-.04em!important;
}

.presence{
  color:#9d9dac!important;
}

#roomWatchHome{
  max-width:1680px;
  margin:0 auto;
}

.watchDock{
  border-radius:26px!important;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08)!important;
  background:#000!important;
}

.stage{
  position:relative;
  background:#000!important;
  border-radius:22px!important;
  overflow:hidden;
  isolation:isolate;
  min-height:min(68vh,820px);
}

.stage:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -100px 80px -80px rgba(0,0,0,.80);
  border-radius:inherit;
}

#yt,
.massMediaVideo,
.togetherStage{
  background:#000!important;
}

.roomInteractionDeckV3{
  margin-top:10px!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(10,10,15,.92)!important;
  backdrop-filter:blur(18px);
  box-shadow:
    0 12px 40px rgba(0,0,0,.34),
    0 0 25px rgba(111,68,255,.08)!important;
}

/* compact room actions */

.roomInteractionDeck button{
  min-height:44px;
  border-radius:14px!important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.025)
    )!important;
  color:#fff!important;
}

.roomInteractionDeck button:hover{
  border-color:rgba(155,92,255,.40)!important;
  background:rgba(155,92,255,.10)!important;
}

/* keep Step In prominent */

button[onclick*="openPersona"],
button[onclick*="togglePersona"]{
  border-color:rgba(255,43,138,.30)!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,43,138,.16),
      rgba(155,92,255,.12)
    )!important;
}

/* Step In overlays stay transparent */

.personaStage,
.remotePersonaStage{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

.personaStage canvas,
.remotePersonaStage canvas{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Step In participant badge */

.stepInPartyBadge{
  background:rgba(7,7,12,.72)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  backdrop-filter:blur(15px)!important;
  box-shadow:
    0 8px 26px rgba(0,0,0,.30),
    0 0 22px rgba(255,43,138,.14);
}

/* ---------- reaction / participant tiles ---------- */

.cam{
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:#0c0c12!important;
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}

.cam video{
  border-radius:inherit;
}

.cam.inviteReactPrompt{
  border-color:rgba(155,92,255,.32)!important;
  background:
    linear-gradient(
      145deg,
      rgba(80,49,145,.20),
      rgba(12,12,18,.96)
    )!important;
}

/* ---------- Together browser ---------- */

.togetherStage,
.togetherBrowserNativeViewport,
.togetherStreamOverlay{
  border-radius:inherit;
}

.togetherBrowserNativeViewport{
  background:#fff!important;
  overflow:hidden!important;
}

.togetherStreamBadge{
  border-radius:999px!important;
  background:rgba(8,8,14,.82)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  backdrop-filter:blur(14px);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}

/* ---------- creator / host ---------- */

.megaHostPanel{
  border-radius:22px!important;
  border:1px solid rgba(155,92,255,.25)!important;
  background:
    radial-gradient(circle at 100% 0,rgba(155,92,255,.16),transparent 42%),
    linear-gradient(145deg,#100b18,#09090e)!important;
}

.megaHostGrid > *{
  min-width:0;
}

.megaHostPanel select,
input,
textarea,
select{
  border-radius:14px!important;
  border-color:rgba(255,255,255,.10)!important;
  background:#0b0b11!important;
  color:#fff!important;
}

input:focus,
textarea:focus,
select:focus{
  outline:none!important;
  border-color:rgba(155,92,255,.68)!important;
  box-shadow:0 0 0 3px rgba(155,92,255,.12)!important;
}

/* ---------- nav ---------- */

nav,
.bottomNav,
.mobileNav,
.tabBar{
  backdrop-filter:blur(22px);
}

nav button,
.bottomNav button,
.mobileNav button,
.tabBar button{
  transition:
    transform .15s ease,
    color .15s ease,
    opacity .15s ease;
}

/* ---------- scrollbars ---------- */

*{
  scrollbar-width:thin;
  scrollbar-color:#343442 transparent;
}

::-webkit-scrollbar{
  width:7px;
  height:7px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:#343442;
  border-radius:999px;
}

/* ---------- desktop immersive layout ---------- */

@media (min-width:1000px){

  #roomWatchHome{
    padding-inline:14px;
  }

  body.theatreMode .stage{
    min-height:calc(100vh - 118px)!important;
    border-radius:16px!important;
  }

  .roomInteractionDeckV3{
    position:relative;
    z-index:25;
  }

  .sheet{
    max-width:620px!important;
    left:auto!important;
    right:18px!important;
    bottom:18px!important;
    border-radius:26px!important;
    max-height:calc(100vh - 36px)!important;
  }
}

/* ---------- mobile / tablet ---------- */

@media (max-width:900px){

  body{
    overscroll-behavior-y:none;
  }

  #room{
    padding-bottom:
      calc(78px + env(safe-area-inset-bottom))!important;
  }

  .roomHead{
    padding-top:
      max(8px,env(safe-area-inset-top));
  }

  .watchDock{
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }

  .stage{
    min-height:56vh;
    border-radius:0!important;
  }

  .roomInteractionDeckV3{
    margin:6px 8px 0!important;
    border-radius:20px!important;
  }

  .sheet{
    max-height:86dvh!important;
    padding-bottom:
      calc(18px + env(safe-area-inset-bottom))!important;
  }

  .f84FeatureCard{
    border-radius:20px!important;
  }
}

@media (max-width:620px){

  .stage{
    min-height:58dvh;
    max-height:72dvh;
  }

  .roomTitle{
    font-size:17px!important;
  }

  .presence{
    font-size:10px!important;
  }

  .roomInteractionDeckV3{
    padding:8px!important;
  }

  .roomInteractionDeck button{
    min-height:42px;
  }

  .personaStage{
    max-width:38vw!important;
  }

  .stepInPartyBadge{
    top:8px!important;
    font-size:7px!important;
  }

  .f84FeatureText b{
    font-size:16px!important;
  }

  .f84FeatureText small{
    font-size:10px!important;
  }
}

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* =========================================================
   BUILD 25 CREATE / HOST / SHOP HUB
   ========================================================= */

.b25CreateHub{
  position:relative;
  overflow:hidden;
  margin:4px 0 18px;
  padding:18px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:26px;
  background:
    radial-gradient(
      circle at 0 0,
      rgba(155,92,255,.24),
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 0,
      rgba(255,43,138,.15),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(17,17,26,.98),
      rgba(7,7,11,.99)
    );
  box-shadow:
    0 22px 60px rgba(0,0,0,.36),
    0 0 44px rgba(110,65,255,.08);
}

.b25CreateHub:after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-110px;
  bottom:-150px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(53,225,255,.10),
      transparent 68%
    );
  pointer-events:none;
}

.b25CreateEyebrow{
  position:relative;
  z-index:1;
  color:#c7b4ff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.18em;
}

.b25CreateHeading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-top:7px;
}

.b25CreateHeading h2{
  margin:0;
  color:#fff;
  font-size:clamp(25px,4vw,44px);
  line-height:.98;
  letter-spacing:-.055em;
}

.b25CreateHeading p{
  max-width:620px;
  margin:9px 0 0;
  color:#a9a9ba;
  font-size:12px;
  line-height:1.55;
}

.b25SelectedShowMode{
  flex:0 0 auto;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#d9d9e8;
  font-size:9px;
  font-weight:950;
  letter-spacing:.07em;
}

.b25ShowModeGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:17px;
}

.b25ShowMode{
  min-height:142px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:5px;
  padding:14px!important;
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:20px!important;
  background:#111118!important;
  color:#fff!important;
  text-align:left!important;
  box-shadow:
    inset 0 0 34px rgba(255,255,255,.02),
    0 12px 28px rgba(0,0,0,.24);
}

.b25ShowMode:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.8;
  pointer-events:none;
}

.b25ShowMode.shopping:before{
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(255,43,138,.28),
      transparent 55%
    );
}

.b25ShowMode.workout:before{
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(53,225,255,.22),
      transparent 55%
    );
}

.b25ShowMode.coaching:before{
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(155,92,255,.28),
      transparent 55%
    );
}

.b25ShowMode.cooking:before{
  background:
    radial-gradient(
      circle at 15% 0,
      rgba(255,126,52,.22),
      transparent 55%
    );
}

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

.b25ShowMode > span{
  font-size:28px;
  margin-bottom:auto;
}

.b25ShowMode b{
  font-size:15px;
  letter-spacing:-.025em;
}

.b25ShowMode small{
  color:#aaaabb;
  font-size:9px;
  line-height:1.4;
}

.b25ShowMode.selected{
  border-color:
    rgba(199,127,255,.70)!important;
  box-shadow:
    0 0 0 1px rgba(255,43,138,.18),
    0 0 30px rgba(155,92,255,.22)!important;
  transform:translateY(-2px);
}

.b25CreateActionRail{
  position:relative;
  z-index:1;
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-top:14px;
  padding-bottom:3px;
  scrollbar-width:none;
}

.b25CreateActionRail::-webkit-scrollbar{
  display:none;
}

.b25CreateActionRail button{
  flex:0 0 92px;
  min-width:92px;
  min-height:68px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  padding:8px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:17px!important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    )!important;
  color:#fff!important;
}

.b25CreateActionRail button:hover{
  border-color:
    rgba(155,92,255,.5)!important;
  background:
    rgba(155,92,255,.11)!important;
}

.b25CreateActionRail span{
  font-size:20px;
}

.b25CreateActionRail em{
  font-style:normal;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.06em;
}

/* Existing working Host Studio becomes Build-25 visual surface */

#hostStudio{
  border:
    1px solid rgba(155,92,255,.24)!important;
  border-radius:22px!important;
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(255,43,138,.10),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #101018,
      #08080d
    )!important;
}

#hostStudio .hostModeBtn{
  border:
    1px solid rgba(255,255,255,.09)!important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    )!important;
}

#hostStudio .hostModeBtn.hot{
  background:
    linear-gradient(
      135deg,
      var(--f25-pink),
      var(--f25-purple)
    )!important;
}

/* Existing host deck stays on the room screen */

#hostDeckPane .hostDeckActions{
  gap:8px!important;
}

#hostDeckPane .hostDeckActions button{
  border-color:
    rgba(155,92,255,.20)!important;
}

#roomProductQuickDock,
#roomProductPanel{
  border-color:
    rgba(54,168,255,.20)!important;
}

/* responsive */

@media(max-width:900px){

  .b25ShowModeGrid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .b25CreateHub{
    margin-inline:8px;
    padding:15px;
    border-radius:22px;
  }

}

@media(max-width:520px){

  .b25CreateHeading{
    display:block;
  }

  .b25SelectedShowMode{
    display:inline-flex;
    margin-top:10px;
  }

  .b25ShowModeGrid{
    gap:7px;
    margin-top:13px;
  }

  .b25ShowMode{
    min-height:126px;
    padding:12px!important;
    border-radius:18px!important;
  }

  .b25ShowMode > span{
    font-size:24px;
  }

  .b25CreateActionRail button{
    flex-basis:78px;
    min-width:78px;
    min-height:64px;
  }

}